/* Dark mode: same "Récré" playroom at night. Deep indigo ground, lifted violet accent, the four answer colors unchanged.
   <html data-theme> is set before first paint by the snippet in index.html (saved choice, otherwise the system setting). */
:root[data-theme="dark"]{
  --bg:#100F1F; --card:#1B1A30; --soft:#24233B; --line:#2F2D4A; --line2:#423F63;
  --ink:#F1F0FA; --muted:#A6A9BC; --hl:#7A63FF; --hl-dk:#4E37D6; --hl-ink:#FFFFFF; --hl-soft:#28234D; --hl-glow:rgba(122,99,255,.35);
  --ok:#25A05E; --ok-bg:#12301F; --bad:#F0543E; --bad-bg:#3A1915;
  --field:#14132A;
  color-scheme:dark;
}
/* text that sits on yellow or pastel blocks stays dark in both themes */
.goodans,.pod.p3 .blk,.autonext.paused,.fc-ico,.bankpanel .bk-ico,.qico{color:#17162B}
.fc-ico::before,.fc-ico::after{border-color:#17162B}
input[type=text],textarea,.qsearch input{background:var(--field,#FAFAFD)}

/* the two logos (dark text / light text): only the one for the current theme shows */
.brand .logo-d{display:none}
[data-theme="dark"] .brand .logo-l{display:none}
[data-theme="dark"] .brand .logo-d{display:block}

[data-theme="dark"] .panel{box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}
[data-theme="dark"] .btn.dark{background:#F1F0FA;color:#17162B;box-shadow:0 5px 0 #8F8CAE}
[data-theme="dark"] .btn.dark:active:not(:disabled){box-shadow:0 1px 0 #8F8CAE}
[data-theme="dark"] .brow:nth-child(1){background:#2E2914;border-color:#6B5A1E}
[data-theme="dark"] .brow:nth-child(1) .rk{color:#FFD54A}
[data-theme="dark"] .tile.right::after,[data-theme="dark"] .tile.mine::after{background:var(--card)}
[data-theme="dark"] .fc-face{box-shadow:0 6px 0 var(--line),0 18px 30px -20px rgba(0,0,0,.8)}
[data-theme="dark"] .fc-card[data-swipe="ok"] .fc-back{box-shadow:0 6px 0 #0B4F2A}
[data-theme="dark"] .fc-card[data-swipe="bad"] .fc-back{box-shadow:0 6px 0 #8E1F11}
[data-theme="dark"] .fc-back{box-shadow:0 6px 0 var(--hl-dk),0 18px 30px -20px rgba(0,0,0,.8)}
[data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:#7D8096}
[data-theme="dark"] #music{box-shadow:0 12px 32px rgba(0,0,0,.6)}
@media (max-width:560px){[data-theme="dark"] #createPanel .actions{box-shadow:0 -8px 16px -12px rgba(0,0,0,.8)}}

/* header icon buttons: theme, sound */
.iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:14px;font-weight:800;border:2px solid var(--line);background:var(--card);color:var(--ink);padding:6px 12px;min-height:40px;min-width:40px;border-radius:999px;cursor:pointer;flex:none}
.iconbtn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.iconbtn:hover{border-color:var(--line2)}
#themeBtn{padding:0;width:40px}
#langBtn{padding:0 10px;font-size:13px;letter-spacing:.03em}
#themeBtn .i-sun{display:none}
[data-theme="dark"] #themeBtn .i-sun{display:block}
[data-theme="dark"] #themeBtn .i-moon{display:none}
#soundBtn .i-off{display:none}
#soundBtn[aria-pressed="false"] .i-on{display:none}
#soundBtn[aria-pressed="false"] .i-off{display:block}
#soundBtn[aria-pressed="false"]{color:var(--muted);text-decoration:none}
#soundBtn[aria-pressed="true"]{border-color:var(--hl);background:var(--hl-soft);color:var(--hl)}
/* small phones: icons only, so logo + music + theme + sound + status still fit on one line */
@media (max-width:420px){
  #soundBtn{padding:0;width:40px}
  #musicBtn{font-size:0;padding:6px 0;width:40px;min-height:40px;flex:none}
  #musicBtn::before{font-size:18px;margin:0}
  #soundBtn .bt{display:none}
}

/* resume an interrupted solo game */
.resume{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 14px;border-color:var(--hl);background:var(--hl-soft);animation:fadeUp .35s both}
.resume .rs-main{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px}
.resume .rs-main h2{font-size:20px}
.resume .rs-title{font-weight:800;overflow-wrap:anywhere}
.resume .rs-sub{font-size:14px;font-weight:700;color:var(--muted)}
.resume .row{flex:1 1 auto;justify-content:flex-end;gap:8px}
.resume .btn{min-height:46px;padding:10px 18px;font-size:17px}
@media (max-width:560px){.resume .row .btn{flex:1 1 0}}
[data-theme="dark"] .ex-tiles .tile.sel::after{background:var(--card)}

/* French interface: the tags drawn in CSS (the English ones are in style.css / exam.css) */
html[lang="es"] .tile.right::after{content:"Respuesta correcta"}
html[lang="es"] .tile.mine::after,html[lang="es"] .ex-tiles .tile.sel::after{content:"Tu respuesta"}
html[lang="fr"] .tile.right::after{content:"Bonne réponse"}
html[lang="fr"] .tile.mine::after,html[lang="fr"] .ex-tiles .tile.sel::after{content:"Ta réponse"}


/* language menu under the EN/FR/ES button */
.topr{position:relative}
.lang-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;display:flex;flex-direction:column;gap:4px;padding:6px;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.14)}
.lang-menu[hidden]{display:none}
.lang-opt[aria-pressed="true"]{background:var(--ink);color:var(--card);border-color:var(--ink)}