/* Rook n Roll Chess Academy: Guess the Move. Colours and fonts match the style quiz. */
:root{
  --bg:#EAF4FF; --surface:#FFFFFF; --ink:#14233B; --muted:#44556F; --line:#BCD0E8;
  --accent:#14233B; --accent-ink:#FFFFFF; --focus:#E85D04;
  --good:#2FB386; --bad:#E5484D; --gold:#FFC93C; --orange:#FF8A4C;
  --bsq1:#F1F6FF; --bsq2:#7FA8DB;
  /* The board stays light in dark mode, so pieces and coordinates keep their own dark ink instead of --ink. */
  --bink:#14233B;
  --head:"Baloo 2","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  --pieces:"Noto Sans Symbols 2","Segoe UI Symbol","Apple Symbols","DejaVu Sans","Arial Unicode MS",serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1A2C; --surface:#172640; --ink:#F2F6FF; --muted:#AEBCD3; --line:#2D4268;
    --accent:#FFC93C; --accent-ink:#14233B; --focus:#FFB36B;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1A2C; --surface:#172640; --ink:#F2F6FF; --muted:#AEBCD3; --line:#2D4268;
  --accent:#FFC93C; --accent-ink:#14233B; --focus:#FFB36B;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.5}
.wrap{max-width:580px;margin:0 auto;padding:16px 16px 40px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.brand{font-family:var(--head);font-weight:700;font-size:17px;line-height:1.2}
.lang{display:flex;border:3px solid var(--ink);border-radius:999px;overflow:hidden;flex:none}
.lang button{font:700 15px var(--body);padding:5px 14px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
button{font-family:inherit}
:focus-visible{outline:4px solid var(--focus);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
h1,h2,h3{font-family:var(--head);margin:0;line-height:1.15}
.title{font-size:clamp(34px,9vw,46px);font-weight:800;margin-bottom:10px}
.sub{margin:0 0 22px;color:var(--muted)}
a{color:inherit;font-weight:700}
.note{margin:22px 0 0;color:var(--muted);font-size:16px}

/* ---- player picker ---- */
.team{margin:0 0 26px;--c:#5AA9FF}
.teamhead{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.teamhead .av{width:64px;flex:none}
.teamhead .av svg{width:100%;height:auto;display:block}
.teamhead h2{font-size:23px;font-weight:700}
.teamhead p{margin:2px 0 0;color:var(--muted);font-size:15px;line-height:1.35}
.players{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.pcard{display:flex;flex-direction:column;gap:2px;text-align:left;font:700 18px/1.25 var(--body);padding:12px 14px;border:3px solid var(--ink);border-left-width:10px;border-left-color:var(--c);border-radius:16px;background:var(--surface);color:var(--ink);cursor:pointer;min-height:68px}
.pcard small{font-weight:600;font-size:14px;color:var(--muted)}
.pcard:hover{background:var(--bsq1)}
.pcard.soon{border-color:var(--line);border-left-color:var(--line);color:var(--muted);cursor:default;background:transparent}
.pcard.soon:hover{background:transparent}

/* ---- game screen ---- */
.backbtn{background:none;border:0;color:var(--muted);font:600 16px var(--body);text-decoration:underline;cursor:pointer;padding:6px 0;margin-bottom:6px}
.vs{font-size:clamp(22px,6vw,28px);font-weight:700;margin:0}
.meta{margin:2px 0 4px;color:var(--muted);font-size:15px}
.youare{margin:0 0 10px;font-size:16px;font-weight:600}
.boardwrap{container-type:inline-size;margin:10px 0}
.board{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);aspect-ratio:1;border:3px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--bsq2)}
.sq{position:relative;display:flex;align-items:center;justify-content:center;border:0;padding:0;margin:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-family:var(--pieces);background:var(--bsq1);color:var(--bink)}
.sq.dk{background:var(--bsq2)}
.sq::before{content:"";position:absolute;inset:0;pointer-events:none}
.sq::after{content:"";position:absolute;pointer-events:none}
.sq .pc{position:relative;z-index:1;font-size:clamp(28px,10.8cqw,60px);line-height:1;font-family:var(--pieces)}
.sq .pc.w{color:#fff;text-shadow:1px 0 0 var(--bink),-1px 0 0 var(--bink),0 1px 0 var(--bink),0 -1px 0 var(--bink),1px 1px 0 var(--bink),-1px -1px 0 var(--bink),1px -1px 0 var(--bink),-1px 1px 0 var(--bink)}
.sq .pc.b{color:var(--bink)}
.sq .co{position:absolute;z-index:2;font:700 10px/1 var(--body);color:var(--bink);opacity:.7;pointer-events:none}
.sq .co.f{right:3px;bottom:2px}
.sq .co.r{left:3px;top:2px}
@container (min-width:420px){.sq .co{font-size:12px}}
.sq.last::before{background:rgba(255,214,64,.5)}
.sq.good::before{background:rgba(47,179,134,.65)}
.sq.hint::before{background:rgba(255,201,60,.75)}
.sq.sel{outline:4px solid var(--orange);outline-offset:-4px}
.sq.bad{outline:4px solid var(--bad);outline-offset:-4px}
.sq.tgt::after{width:30%;height:30%;left:35%;top:35%;border-radius:50%;background:rgba(20,35,59,.35)}
.sq.tgt.cap::after{width:88%;height:88%;left:6%;top:6%;background:none;border:4px solid rgba(20,35,59,.4)}
.sq:focus-visible{outline:4px solid var(--focus);outline-offset:-4px;z-index:3}
.status{min-height:3.2em;margin:10px 0 6px}
.status p{margin:0}
.status .main{font-weight:700;font-size:19px}
.status .help{color:var(--muted);font-size:15px;margin-top:2px}
.status.ok .main{color:var(--good)}
.status.no .main{color:var(--bad)}
.prog{display:flex;gap:3px;margin:8px 0 4px}
.prog span{flex:1;height:14px;min-width:3px;border:2px solid var(--line);border-radius:4px;background:var(--surface)}
.prog span.ok{background:var(--good);border-color:var(--good)}
.prog span.no{background:var(--bad);border-color:var(--bad)}
.prog span.now{border-color:var(--ink)}
.pcount{display:flex;justify-content:space-between;gap:10px;margin:0 0 14px;color:var(--muted);font-size:15px;font-weight:600}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.btn{font:700 21px var(--head);padding:12px 26px;border-radius:16px;border:3px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer}
.btn:hover{filter:brightness(1.12)}
.btn:disabled{opacity:.45;cursor:default;filter:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.small{font-size:18px;padding:9px 20px}

/* ---- end screen ---- */
.rcard{border:3px solid var(--ink);border-radius:26px;overflow:hidden;background:var(--surface);--c:#FF8A4C}
.rhead{background:var(--c);color:#14233B;padding:20px 18px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.rhead .av{width:112px;flex:none}
.rhead .av svg{width:100%;height:auto;display:block}
.rhead .txt{flex:1;min-width:200px}
.kicker{margin:0;font-weight:700;font-size:15px}
.rscore{font-family:var(--head);font-size:clamp(30px,8vw,40px);font-weight:800;margin:2px 0;line-height:1.1}
.rtier{margin:0;font-weight:700;font-size:19px;line-height:1.35}
.rbody{padding:18px 18px 22px}
.rbody p{margin:0 0 10px}
.rbody .small{color:var(--muted);font-size:16px}
.foot{text-align:center;color:var(--muted);font-size:14px;margin-top:28px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* ---- player intro + share card ---- */
.rcard.intro .ihead{background:var(--c);padding:18px;display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap}
.iphoto{width:min(220px,46%);aspect-ratio:4/5;object-fit:cover;object-position:30% 30%;border:4px solid #14233B;border-radius:18px;background:#fff;flex:none;display:block}
.itxt{flex:1;min-width:170px;color:#14233B}
.intro-text{font-size:18px;line-height:1.55}
.credit{margin:16px 0 0!important;font-size:13px;line-height:1.4;color:var(--muted)}
.shareimg{display:block;width:100%;max-width:360px;height:auto;margin:20px auto 8px;border-radius:14px;border:3px solid var(--ink);background:var(--bsq1);min-height:120px}
.sharehint{text-align:center;color:var(--muted);font-size:15px;margin:0 0 12px!important}
.actions.center{justify-content:center;margin-bottom:18px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--accent);color:var(--accent-ink);font-weight:700;padding:10px 18px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s}
.toast.on{opacity:1}

/* ---- women marker on player cards ---- */
.wbadge{align-self:flex-start;margin-top:5px;font:700 13px/1 var(--body);color:#8F1D4E;background:#FFD9E8;border:2px solid #8F1D4E;border-radius:999px;padding:3px 9px 3px 7px}
.pcard.soon .wbadge{opacity:.85}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wbadge{color:#FFC4DC;background:#4A1D34;border-color:#FFC4DC}}
:root[data-theme="dark"] .wbadge{color:#FFC4DC;background:#4A1D34;border-color:#FFC4DC}

/* ---- "Who is ...?" button and the card that slides up ---- */
.whobtn{display:inline-flex;align-items:center;gap:9px;margin:2px 0 8px;padding:8px 16px 8px 12px;font:700 16px var(--body);color:var(--ink);background:var(--surface);border:3px solid var(--ink);border-radius:14px;cursor:pointer}
.whobtn:hover{background:var(--bsq1)}
.cardicon{display:inline-block;width:16px;height:22px;border:3px solid var(--ink);border-radius:4px;background:var(--gold);transform:rotate(-8deg);flex:none}
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet-bd{position:absolute;inset:0;background:rgba(14,26,44,.6);opacity:0;transition:opacity .3s}
.sheet.open .sheet-bd{opacity:1}
.sheet-card{position:relative;width:min(560px,100%);max-height:92vh;max-height:92dvh;overflow:auto;margin:0 10px calc(10px + env(safe-area-inset-bottom,0px));border-radius:26px;background:var(--surface);box-shadow:0 18px 50px rgba(0,0,0,.45);transform:translateY(115%) rotate(-7deg);transform-origin:20% 100%;transition:transform .45s cubic-bezier(.2,.9,.25,1.08)}
.sheet.open .sheet-card{transform:none}
.sheet-card .rcard{margin:0}
.sheetclose{position:absolute;top:12px;right:12px;z-index:2;font:700 16px var(--body);padding:6px 16px;color:#14233B;background:#fff;border:3px solid #14233B;border-radius:999px;cursor:pointer}
.sheetclose:hover{background:#FFF4D6}