/* Light-mode style: Sky (cool and clean), the only light style since 1.139.1. light_style() always returns 'sky', so <html> always carries
   data-lstyle=sky in light mode (Cream and Classic were removed in 1.139.16). Dark mode is never touched.
   Loaded after style.css / game.css, so these tokens win. The frame thickness and shadow scale with the screen (--bw, --sh) so cards stay chunky on a
   desktop and calm on a phone. */
html[data-theme=light][data-lstyle=sky]{
  --bg:#dff1ff;--bg2:#eef8ff;--panel:#ffffff;--panel2:#eaf5ff;--line:#a9d3f5;--hard:#14284b;
  --sky:#0369d6;--purple:#6d28d9;--gold:#f59e0b;--green:#047857;--rose:#be123c;--on-rose:#ffffff;--text:#14284b;--soft:#2f4468;--muted:#4b6082;
  --header-bg:#ffffff;--head:#0b4fa8;--chip-bg:#cfe6fb;--code-bg:#cfe6fb;--th-bg:#eaf5ff;--th-ink:#2f4468;--link-hover:#083b80;--stage-bg:#f3faff;
  --band:linear-gradient(180deg,#7cc4ff 0,#bfe3ff 55%,rgba(223,241,255,0) 100%);--band-edge:#38bdf8;--accent-text:#b45309;--btn-main:#0369d6}

/* no dotted background in any light style (1.81.1) */
html[data-theme=light]{--dots:none}

/* Sky rules */
html[data-theme=light][data-lstyle=sky]{--bw:var(--ds-bw);--sh:var(--ds-sh);--rad:var(--ds-r-panel)}
html[data-theme=light][data-lstyle=sky] a{color:var(--head)}
html[data-theme=light][data-lstyle=sky] .main-header{border-bottom:clamp(3px,.4vw + 1.6px,5px) solid var(--hard);box-shadow:0 3px 0 var(--band-edge)}
html[data-theme=light][data-lstyle=sky] .hero{background:var(--band);border-radius:0 0 28px 28px}
html[data-theme=light][data-lstyle=sky] .hero .gradient-text,html[data-theme=light][data-lstyle=sky] .hero h1 span{color:var(--accent-text)}
html[data-theme=light][data-lstyle=sky] :is(.card,.howto li,.chip){border-width:var(--bw)}
html[data-theme=light][data-lstyle=sky] .card{border-radius:var(--rad);box-shadow:var(--sh) calc(var(--sh) + 1px) 0 var(--hard)}
html[data-theme=light][data-lstyle=sky] .card:hover{box-shadow:calc(var(--sh) + 2px) calc(var(--sh) + 4px) 0 var(--hard)}
html[data-theme=light][data-lstyle=sky] .card-bar{border-bottom-width:var(--bw);filter:saturate(1.35) brightness(.97)}
html[data-theme=light][data-lstyle=sky] .card-thumb{border-bottom-width:var(--bw)}
html[data-theme=light][data-lstyle=sky] .card .badge{background:#fff;color:var(--hard);border:max(1.5px,calc(var(--bw) - 1px)) solid var(--hard);padding:2px 9px}
html[data-theme=light][data-lstyle=sky] .card-title{color:var(--head)}
html[data-theme=light][data-lstyle=sky] :is(.card-desc,.card-meta){color:var(--soft)}
html[data-theme=light][data-lstyle=sky] .howto li{border-radius:var(--rad);box-shadow:var(--sh) var(--sh) 0 var(--hard)}
html[data-theme=light][data-lstyle=sky] .howto li b{background:var(--gold);color:var(--hard);border:var(--bw) solid var(--hard)}
html[data-theme=light][data-lstyle=sky] :is(.chip.active,.chip:hover){background:var(--btn-main);color:#fff}
html[data-theme=light][data-lstyle=sky] .btn-primary{background:var(--btn-main);color:#fff}
html[data-theme=light][data-lstyle=sky] .btn-primary:hover{background:var(--head)}

/* ---- 1.84.0: light-mode leftovers found by the contrast audit ---- */
/* Blue "selected" / primary controls: the blue is dark in the new styles, so the label is white (it was dark-on-blue, 2.8:1). */
html[data-theme=light][data-lstyle=sky] :is(.btn.primary,.segmented button[aria-pressed=true]:not(.on),.cls-views .btn[aria-pressed=true],[data-min][aria-pressed=true],.cls-vbtn[aria-pressed=true],.dd-pc[aria-pressed=true],.theme-btn.active,.gic-tabs button[aria-pressed=true]:not(.on),.lv-tabs a.on,.pp-tabs button[aria-pressed=true],.rd-modes button[aria-pressed=true],.rd-qopt[aria-pressed=true],.rd-chip:hover,.rd-qnum,.imp-step,.tier-starter,.fb-filter-btn.on,.fb-search.open .fb-search-btn,.gic-tip:hover,.gic-tip.open){color:#fff}
/* Game panels that were see-through dark over the page (fine on the dark page, grey with white text on the light one) get a solid dark colour. Dark mode is untouched. */
html[data-theme=light] :is(.sl-turn,.sl-dicebox,.sl-pl,.qr-turn,.qr-dicebox,.qr-pl,.qr-hand,.cq-turn,.cq-pl,.wt-plate){background:#1e293b}
html[data-theme=light] :is(.sl-pl.cur,.qr-pl.cur,.cq-pl.cur,.wt-col.cur .wt-plate,.wt-col.win .wt-plate){background:#0f172a}
html[data-theme=light] :is(.sl-pop,.qr-pop){background:#16202f}
html[data-theme=light] .wt-msg{background:#1e293b}
html[data-theme=light] :is(.dc-k,#resK,#cntLbl){color:#cbd5e1}
/* Trivia Night editor: the gold round number on a pale panel */
html[data-theme=light] .tn-rd-h .n{color:#b45309}
html[data-theme=light] .gs-card .link-btn{color:#7dd3fc}
html[data-theme=light][data-lstyle=sky] .gs-card :is(.segmented button,.btn)[aria-pressed=true]{color:#04263a}
html[data-theme=light][data-lstyle=sky] :is(.segmented button,.gic-tabs button)[aria-pressed=true]{background:var(--btn-main);color:#fff}
html[data-theme=light][data-lstyle=sky] .gs-card .segmented button[aria-pressed=true]{background:#38bdf8;color:#04263a}

/* 1.136.3 - light mode: white text on the green and blue fills. The link colour rule above was winning over the buttons' own text colour (dull blue on green, dark ink on mid blue). */
html[data-theme=light][data-lstyle=sky] :is(.btn-accent,.badge.green,.type-tab[aria-pressed=true],.type-tab:hover){color:#fff}
html[data-theme=light][data-lstyle=sky] .btn-accent:hover{background:#047857;color:#fff}

/* ---- 1.139.1: contrast fixes (DESIGN-RULES.md rule 14). Sky is the single light style; green is #047857 and rose #be123c, so white ink is 5.5:1 / 6.3:1. ---- */
html[data-theme=light] :is(.mark,.btn.accent,.gic-toast.success,.rank-badge.on,.gl-btn,.btn-accent,.badge.green,.toast.success,.toast.error){color:#fff}
html[data-theme=light] .logo-highlight{color:var(--head)}
html[data-theme=light] .skip-link{color:var(--hard)}
html[data-theme=light] a.pg-pill.on{color:#14284b}
html[data-theme=light][data-lstyle=sky] :is(.tab.active,.chip.active){color:#fff}
html[data-theme=light][data-lstyle=sky] .tab.active *{color:inherit}
/* My library tabs: the open tab is a white card on tablets and desktops (dark label) and a blue block on phones (white label). 1.136.3 made it white on white. */
html[data-theme=light][data-lstyle=sky] .lib-tab.active{color:var(--text)}
@media(max-width:600px){html[data-theme=light][data-lstyle=sky] .lib-tab.active{color:#fff}html[data-theme=light][data-lstyle=sky] .lib-tab.active .n{color:var(--hard)}}
html[data-theme=light][data-lstyle=sky] a.skip-link{color:var(--hard)}