/* Light mode, Apple glass (2026-11-14, owner: "keep the dark mode how it is but also add an Apple glass
   light mode"). Loaded on every page after the app stylesheet; everything here only applies while
   <html data-scheme="light"> (set by themes.js / the inline head script). Dark mode is untouched.
   Same rules as dark: glass for controls (header, sidebar, chips, buttons, menus), plain white cards for
   content, a near-black highlight, a soft pastel wallpaper behind the glass, no blur on scrolling layers.
   Rename the file (-v2…) when it changes so browsers fetch the new copy. */
:root[data-scheme=light]{
 color-scheme:light;
 --card:linear-gradient(#ffffff,#ffffff);
 --pane-edge:inset 0 0 0 .5px rgba(0,0,0,.07);
 --card-flat:linear-gradient(rgba(118,118,128,.12),rgba(118,118,128,.12));
 --glass:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.62));
 --lg-edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 .5px rgba(0,0,0,.08);
 --lg-shadow:0 12px 30px -16px rgba(40,40,80,.22);
 --wallpaper:radial-gradient(80vw 80vh at 0% 0%,rgba(122,108,255,.20),transparent 70%),radial-gradient(70vw 75vh at 100% 10%,rgba(56,186,232,.18),transparent 70%),radial-gradient(85vw 80vh at 85% 110%,rgba(255,150,112,.18),transparent 70%),radial-gradient(70vw 70vh at 5% 100%,rgba(206,132,255,.16),transparent 70%),#f2f2f7;
 --glass-solid:linear-gradient(180deg,#ffffff,#f7f7fa);
 --glass-edge:inset 0 1px 0 #fff,inset 0 0 0 .5px rgba(0,0,0,.08);
 --sheen:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));
 --sheen-edge:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 .5px rgba(0,0,0,.09);
 --shadow-card:0 10px 26px -16px rgba(40,40,80,.22);
 --tile-highlight:none;
 --scrim:rgba(20,24,40,.28);
 --shadow-pop:0 18px 40px -12px rgba(30,30,60,.25);
 --chat-accent-text:#0a64d6;
 --danger:#c4262e;--warn:#9a5b00;--gold:#b88400;
}
:root[data-scheme=light] body{background:#f2f2f7;color:var(--text)}

/* Header and sidebar: frosted white glass over the wallpaper. */
:root[data-scheme=light] .top{background:rgba(246,246,250,.86);box-shadow:inset 0 -.5px 0 rgba(0,0,0,.1)}
:root[data-scheme=light] .brand img{filter:invert(1)}
:root[data-scheme=light] .side{box-shadow:var(--lg-edge),var(--lg-shadow)}
@media (max-width:900px){
 :root[data-scheme=light] .side{background:rgba(246,246,250,.92);border-bottom-color:rgba(0,0,0,.08)}
 :root[data-scheme=light] .nav-item{background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
}
:root[data-scheme=light] .nav-item:hover{background:rgba(0,0,0,.045)}
:root[data-scheme=light] .nav-item[aria-current=page]{background:#fff;color:var(--text);box-shadow:0 0 0 .5px rgba(0,0,0,.06),0 2px 8px -3px rgba(0,0,0,.18)}
:root[data-scheme=light] .nav-item[aria-current=page] svg{color:var(--text)}
@media (max-width:900px){:root[data-scheme=light] .nav-item[aria-current=page]{background:#1d1d1f;color:#fff}:root[data-scheme=light] .nav-item[aria-current=page] svg{color:#fff}}

/* Controls: white glass pills; the picked one is black. */
:root[data-scheme=light] .btn{background:linear-gradient(180deg,#2c2c2e,#1d1d1f);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 12px -6px rgba(0,0,0,.4)}
:root[data-scheme=light] .btn.ghost,:root[data-scheme=light] .icon-btn,:root[data-scheme=light] .chip,:root[data-scheme=light] .search,:root[data-scheme=light] .xp-chip{background:rgba(255,255,255,.78);color:var(--text);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 .5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.05)}
:root[data-scheme=light] .btn.ghost:hover,:root[data-scheme=light] .icon-btn:hover,:root[data-scheme=light] .chip:hover{background:#fff}
:root[data-scheme=light] .chip[aria-pressed=true],:root[data-scheme=light] .chip[aria-checked=true]{background:#1d1d1f;color:#fff;box-shadow:0 4px 10px -6px rgba(0,0,0,.45)}
:root[data-scheme=light] .tabs{background:rgba(118,118,128,.12);box-shadow:none}
:root[data-scheme=light] .tab[aria-selected=true]{background:#fff;color:var(--text);box-shadow:0 3px 8px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
:root[data-scheme=light] .switch{background:rgba(120,120,128,.24)}
:root[data-scheme=light] input,:root[data-scheme=light] select,:root[data-scheme=light] textarea{color:var(--text)}
:root[data-scheme=light] kbd{background:rgba(0,0,0,.06);color:var(--muted);border-color:rgba(0,0,0,.08)}

/* Content: plain white cards. */
:root[data-scheme=light] .tile{background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.07),0 8px 20px -14px rgba(40,40,80,.3)}
:root[data-scheme=light] .tile:hover{background:#fff}
:root[data-scheme=light] .tile-art{background:rgba(0,0,0,.04)}
:root[data-scheme=light] .feature,:root[data-scheme=light] .stand,:root[data-scheme=light] .shop-item,:root[data-scheme=light] .player-help,:root[data-scheme=light] .empty{background:var(--glass);box-shadow:var(--lg-edge),var(--lg-shadow)}
:root[data-scheme=light] .feature-bg::after{background:linear-gradient(90deg,rgba(255,255,255,.94) 20%,rgba(255,255,255,.5))}
:root[data-scheme=light] .motd{background:rgba(255,255,255,.55);box-shadow:inset 0 -.5px 0 rgba(0,0,0,.08)}
:root[data-scheme=light] .rank-card,:root[data-scheme=light] .mission,:root[data-scheme=light] .badge-card,:root[data-scheme=light] .reward,:root[data-scheme=light] .duel,:root[data-scheme=light] .social-hero,:root[data-scheme=light] .stat,:root[data-scheme=light] .standing>section,:root[data-scheme=light] .season-card{background:#fff;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.07)}
:root[data-scheme=light] .meter,:root[data-scheme=light] .xp-mini{background:rgba(0,0,0,.08)}
:root[data-scheme=light] .toast{background:#1d1d1f;color:#fff}

/* Menus and pop-up sheets: iOS grouped style, light grey sheet with white groups. */
:root[data-scheme=light] .you-menu{background:rgba(255,255,255,.97);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 20px 50px -16px rgba(0,0,0,.3)}
:root[data-scheme=light] .sheet,:root[data-scheme=light] .avatar-dlg,:root[data-scheme=light][data-lowpower] .sheet,:root[data-scheme=light][data-lowpower] .avatar-dlg{background:#f2f2f7;color:var(--text);box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 30px 80px -20px rgba(0,0,0,.35)}
:root[data-scheme=light] .sheet .sheet-head{background:#f7f7fa;box-shadow:0 .5px 0 rgba(0,0,0,.1)}
:root[data-scheme=light] .sheet::backdrop,:root[data-scheme=light] .avatar-dlg::backdrop,:root[data-scheme=light][data-lowpower] .sheet::backdrop{background:rgba(20,24,40,.3)}
:root[data-scheme=light] .sheet .group,:root[data-scheme=light] .shop-wallet,:root[data-scheme=light] .sheet .shop-item{background:#fff;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06)}
:root[data-scheme=light] .sheet .shop-item.owned{box-shadow:inset 0 0 0 1.5px #1d1d1f}
:root[data-scheme=light] .group>.set-row{border-top-color:rgba(0,0,0,.08)}
:root[data-scheme=light] .shop-preview{background:rgba(0,0,0,.05)}
@media (max-width:600px){:root[data-scheme=light] .sheet .sheet-head::before{background:rgba(0,0,0,.2)}}

/* Lazy screens with their own colours. */
:root[data-scheme=light] .cash-bal,:root[data-scheme=light] .cash-x,:root[data-scheme=light] .cash-items{background:#fff;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.07)}
:root[data-scheme=light] .cash-bal div+div{border-left-color:rgba(0,0,0,.08)}
:root[data-scheme=light] .cash-preset,:root[data-scheme=light] .cash-x input,:root[data-scheme=light] .cash-item .ic{background:rgba(118,118,128,.1);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.08)}
:root[data-scheme=light] .cash-item+.cash-item{border-top-color:rgba(0,0,0,.08)}
:root[data-scheme=light] .cash-modal>div{background:#f2f2f7;color:var(--text)}
:root[data-scheme=light] .lbx-card,:root[data-scheme=light] .mk-card{background:#fff;border-color:rgba(0,0,0,.07)}
:root[data-scheme=light] .mk-chip,:root[data-scheme=light] .mk-own,:root[data-scheme=light] .mk-stat,:root[data-scheme=light] .mk-seg,:root[data-scheme=light] .mk-pos span{background:rgba(118,118,128,.1);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.07)}
:root[data-scheme=light] .ch-hero{background:#fff}
:root[data-scheme=light] .cs-hero{border-color:rgba(0,0,0,.06)}
:root[data-scheme=light] .cs-hero h1{color:var(--text)}
:root[data-scheme=light] .cs-hero .cs-wallet{background:rgba(118,118,128,.1);border-color:rgba(0,0,0,.08)}
:root[data-scheme=light] .cs-hero .cs-wallet small{color:var(--muted)}
:root[data-scheme=light] .cs-hero .cs-wallet strong{color:var(--text)}
:root[data-scheme=light] .cs-hero .cs-pill{background:rgba(118,118,128,.1);border-color:rgba(0,0,0,.1);color:var(--text)}
:root[data-scheme=light] .cs-hero .cs-mini{background:rgba(255,255,255,.8);border-color:rgba(0,0,0,.1);color:var(--text)}
:root[data-scheme=light] .cs-tabs button:hover{background:rgba(0,0,0,.05)}