/* ==========================================================
   MAGIKRINGTONEZ RAINBOW THEME
   Add this CSS after your normal site.css to activate it.
   ========================================================== */

:root{
    --theme-accent:#ff2bd6;
    --theme-link:#ffffff;
    --theme-border:#ff2bd6;
    --theme-glow:rgba(255,43,214,.55);
    --theme-panel:rgba(20,5,35,.88);
}

/* Rainbow page background and subtle animated glow */
body{
    background:
        radial-gradient(circle at 15% 20%,rgba(255,0,102,.18),transparent 25%),
        radial-gradient(circle at 85% 20%,rgba(0,255,255,.16),transparent 25%),
        radial-gradient(circle at 50% 85%,rgba(120,0,255,.20),transparent 30%),
        #05000c;
}

/* Headings */
.heading,
.kicker{
    text-shadow:
        0 0 5px #ff2b2b,
        0 0 8px #ff8c00,
        0 0 11px #ffe600,
        0 0 14px #2cff55,
        0 0 17px #00d9ff,
        0 0 20px #7b2cff,
        0 0 23px #ff2bd6;
}

/* Boxes and cards */
.box,
.card,
.dashboard-card{
    border-color:#ff2bd6;
    box-shadow:
        0 0 5px rgba(255,43,214,.35),
        inset 0 0 8px rgba(0,217,255,.08);
}

/* Rainbow dashboard cards */
.dashboard-card{
    background:
        linear-gradient(
            135deg,
            rgba(255,43,43,.16),
            rgba(255,145,0,.13),
            rgba(255,235,0,.11),
            rgba(45,255,85,.11),
            rgba(0,217,255,.13),
            rgba(123,44,255,.14),
            rgba(255,43,214,.16)
        );
    border-image:linear-gradient(
        90deg,
        #ff2b2b,
        #ff8c00,
        #ffe600,
        #2cff55,
        #00d9ff,
        #7b2cff,
        #ff2bd6
    ) 1;
}

.dashboard-card:hover{
    box-shadow:
        0 0 7px #ff2b2b,
        0 0 10px #ffe600,
        0 0 13px #00d9ff,
        0 0 16px #ff2bd6;
}

/* Buttons */
.button{
    border-color:#ff2bd6;
    background:
        linear-gradient(
            90deg,
            #ff2b2b,
            #ff8c00,
            #ffe600,
            #2cff55,
            #00d9ff,
            #7b2cff,
            #ff2bd6
        );
    color:#fff;
    text-shadow:0 1px 2px #000;
    box-shadow:0 0 8px rgba(255,43,214,.45);
}

.button:hover{
    filter:brightness(1.2);
    box-shadow:
        0 0 8px #ff2b2b,
        0 0 12px #ffe600,
        0 0 16px #00d9ff,
        0 0 20px #ff2bd6;
}

/* Links */
a{
    text-decoration-color:#ff2bd6;
}

a:hover{
    color:#ffe600;
    text-shadow:
        0 0 5px #ff2b2b,
        0 0 8px #00d9ff,
        0 0 11px #ff2bd6;
}

/* Navigation */
.nav,
nav{
    border-color:#ff2bd6;
    box-shadow:
        0 0 5px rgba(255,43,43,.3),
        0 0 8px rgba(0,217,255,.25);
}

/* Dashboard remains clean on mobile */
.dashboard-cards{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
}

.dashboard-card{
    min-width:0;
    box-sizing:border-box;
}

.dashboard-card strong,
.dashboard-card span{
    overflow-wrap:anywhere;
}

@media(max-width:430px){
    .dashboard-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:5px;
    }

    .dashboard-card{
        padding:7px 6px;
    }

    .dashboard-card strong{
        font-size:12px;
    }

    .dashboard-card span{
        font-size:10px;
        line-height:1.25;
    }
}

@media(max-width:340px){
    .dashboard-cards{
        grid-template-columns:1fr;
    }
}

/* ==========================================================
   RESPONSIVE MOBILE SUPPORT
   Optimised for small phones and modern phones such as
   Google Pixel 10 (roughly 412px CSS width and below).
   ========================================================== */

html{
    max-width:100%;
    overflow-x:hidden;
}

body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    box-sizing:border-box;
}

*, *::before, *::after{
    box-sizing:border-box;
}

img,
video,
iframe,
svg{
    max-width:100%;
    height:auto;
}

input,
select,
textarea,
button{
    max-width:100%;
    box-sizing:border-box;
}

/* Prevent long ringtone names, URLs and usernames from breaking the layout. */
h1,h2,h3,h4,h5,h6,p,a,span,strong,td,th,li{
    overflow-wrap:anywhere;
    word-break:break-word;
}

/* Keep common navigation/header rows from forcing a desktop-width page. */
.nav,
nav,
.navbar,
.header,
.site-header,
.header-inner,
.nav-inner{
    max-width:100%;
    width:100%;
}

.nav,
nav{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
}

.nav a,
nav a{
    max-width:100%;
}

/* Tables become horizontally scrollable instead of stretching the page. */
.table-wrap,
.table-responsive,
.responsive-table{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

table{
    max-width:100%;
}

/* Small-screen layout */
@media (max-width:600px){
    body{
        font-size:14px;
    }

    .heading,
    .kicker{
        text-shadow:
            0 0 4px #ff2b2b,
            0 0 7px #ff8c00,
            0 0 10px #ffe600,
            0 0 13px #2cff55,
            0 0 16px #00d9ff,
            0 0 19px #7b2cff,
            0 0 22px #ff2bd6;
    }

    .button,
    button,
    input[type="submit"],
    input[type="button"]{
        min-height:42px;
        padding:8px 12px;
    }

    .nav a,
    nav a{
        min-height:40px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    .dashboard-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:100%;
    }
}

/* Pixel 10 / similar 400–430px CSS-width phones */
@media (min-width:400px) and (max-width:430px){
    .dashboard-cards{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:6px;
    }

    .dashboard-card{
        padding:8px 7px;
    }

    .dashboard-card strong{
        font-size:12px;
        line-height:1.15;
    }

    .dashboard-card span{
        font-size:10px;
        line-height:1.25;
    }
}

/* Very small phones */
@media (max-width:399px){
    .dashboard-cards{
        grid-template-columns:1fr;
        gap:5px;
    }

    .dashboard-card{
        padding:8px 7px;
    }

    .button,
    button,
    input[type="submit"],
    input[type="button"]{
        width:auto;
        max-width:100%;
    }
}

/* Extremely narrow displays */
@media (max-width:340px){
    body{
        font-size:13px;
    }

    .nav a,
    nav a{
        font-size:12px;
        padding:6px 8px;
    }
}