/* Practice: mode cards, score, prompt / options / reveal layout for both modes. */
/* Practice bar (RSP-109): title + score on one row, the mode cards full width under them.
   Phones: two cards per row; 600px and wider: up to four in a row (Nerd and Hardcore join later). */
.pbar{display:grid; grid-template-columns:1fr auto; gap:10px 16px; align-items:baseline}
.pbar-title{font:800 20px var(--display); margin:0}
.modes{grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
@media (min-width:600px){.modes{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mode{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:44px; padding:12px 14px;
  border:1.5px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink); text-align:left; cursor:pointer}
.mode:hover{border-color:var(--muted)}
.mode-icon{width:26px; height:26px; color:var(--accent)}
.mode-name{font:800 17px/1.15 var(--display); padding-right:22px; max-width:100%; overflow-wrap:break-word; hyphens:auto}
.mode-hint{font-size:13px; line-height:1.35; color:var(--muted)}
.mode-check{display:none; position:absolute; top:10px; right:10px; width:22px; height:22px; border-radius:50%; background:var(--accent); color:var(--surface);
  align-items:center; justify-content:center}
.mode-check svg{width:14px; height:14px}
.mode[aria-pressed="true"]{border:2.5px solid var(--accent); padding:11px 13px}
.mode[aria-pressed="true"] .mode-check{display:inline-flex}
/* Hardcore (RSP-101): dark card with orange; selected = orange border, a ring and an orange check. */
.mode.hard{background:#33202F; border-color:#33202F; color:#F7EEF4}
.mode.hard .mode-icon{color:#F2A15A}
.mode.hard .mode-hint{color:#D9C6D3}
.mode.hard[aria-pressed="true"]{border-color:#F2A15A; box-shadow:0 0 0 3px var(--bg),0 0 0 5.5px var(--accent)}
.mode.hard .mode-check{background:#F2A15A; color:#33202F}
.score{font:600 14px var(--mono); color:var(--muted); font-variant-numeric:tabular-nums}
.stage{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr; gap:24px; margin-top:20px; align-items:start;
  grid-template-areas:"prompt opts" "result opts"}
/* RSP-104: "Code → creature" has a short prompt, so the reveal goes under it (left column).
   "Picture → code" has a tall image prompt, so the reveal stays under the options (right column). */
.stage[data-mode="art"]{grid-template-areas:"prompt opts" "prompt result"}
/* Two columns. Code mode: the prompt and the reveal are two equal blocks whose bottom lines up with the options.
   The reveal is text only (the creature is already on screen: the big picture or the four options). */
@media (min-width:761px){
  .stage:is([data-mode="code"],[data-mode="nerd"],[data-mode="hard"]){grid-template-rows:1fr 1fr}
  .stage:is([data-mode="code"],[data-mode="nerd"],[data-mode="hard"]) > .prompt, .stage:is([data-mode="code"],[data-mode="nerd"],[data-mode="hard"]) > #result{align-self:stretch}
  .stage:is([data-mode="code"],[data-mode="nerd"],[data-mode="hard"]) > .prompt{justify-content:center}
  .stage:is([data-mode="code"],[data-mode="nerd"],[data-mode="hard"]) > #result{display:flex; flex-direction:column}
  .stage:is([data-mode="code"],[data-mode="nerd"],[data-mode="hard"]) .reveal{flex:1}
  /* Picture mode: the reveal under the options stretches so its bottom lines up with the picture prompt */
  .stage[data-mode="art"] > .prompt{align-self:stretch; justify-content:center}
  .stage[data-mode="art"] > #result{align-self:stretch; display:flex; flex-direction:column}
  .stage[data-mode="art"] .reveal{flex:1}
}
.stage > .prompt{grid-area:prompt} #opts{grid-area:opts} #result{grid-area:result}
@media (max-width:760px){.stage, .stage[data-mode]{grid-template-columns:minmax(0,1fr); grid-template-rows:none; grid-template-areas:"prompt" "opts" "result"}}
.prompt{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:16px; display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center}
.prompt{scroll-margin-top:12px} .prompt:focus{outline:none} .prompt:focus-visible{outline:3px solid var(--accent); outline-offset:2px}   /* RSP-108: "Next" scrolls here and focuses it */
.prompt .q{font:700 15px var(--body); color:var(--muted)}
.prompt img.art{width:100%; max-width:440px; border-radius:14px; aspect-ratio:640/573; object-fit:cover}
/* RSP-124: the class symbol on the art's top-left corner in the picture modes (same white circle as on the cards). */
.artwrap{position:relative; display:block; width:100%; max-width:440px}
.pr-sym{position:absolute; top:8px; left:8px; width:36px; height:36px; border-radius:50%; background:#FFFFFF; border:2px solid #33202F; color:#33202F; display:grid; place-items:center; pointer-events:none}
.pr-sym .cls-sym{width:62%; height:62%; display:block}
.opt.imgopt{position:relative}
.opt.imgopt .pr-sym{top:12px; left:12px; width:28px; height:28px}
.bigcode{font:800 clamp(56px,12vw,96px)/1 var(--mono); letter-spacing:-.03em; color:var(--ink)}
.bigstatus{font:700 20px var(--display)}
/* Nerd mode (RSP-100): the meaning is the question, set as a readable paragraph; the example sits under the reveal. */
.nerdq{margin:0; max-width:40ch; font:600 clamp(18px,2.4vw,22px)/1.45 var(--body); color:var(--ink); text-wrap:pretty}
.reveal p.ex{color:var(--muted)}
/* Hardcore (RSP-101): status-name options and the hint button under the code. */
.opt.hardopt{justify-content:center; min-height:64px}
.opt.hardopt b{font:800 18px/1.2 var(--display); overflow-wrap:break-word}
.hintbtn{min-height:44px; border:1.5px dashed var(--muted); background:none; color:var(--ink); border-radius:999px; padding:8px 18px; font:700 15px var(--body); cursor:pointer}
.hintbtn:hover{border-color:var(--accent)}
.hintbtn[aria-expanded="true"]{border-style:solid; color:var(--muted)}
.hint-out{margin:0; font:800 18px var(--display); color:var(--accent); min-height:1.2em}
.hint-out:empty{display:none}
.opts{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.opt{border:2px solid var(--line); background:var(--surface); color:var(--ink); border-radius:14px; padding:12px; cursor:pointer; text-align:left; font:700 15px var(--body); display:flex; flex-direction:column; gap:2px; min-width:0}
.opt b{font:800 22px var(--mono)}
.opt span{color:var(--muted); font-weight:400; font-size:13px}
.opt img{width:100%; border-radius:10px; aspect-ratio:640/573; object-fit:cover}
.opt.imgopt{padding:6px; gap:6px}
.opt .nm{font:800 16px var(--display); color:var(--ink); text-align:center; padding-bottom:2px}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt.right{border-color:var(--good); background:color-mix(in srgb,var(--good) 12%,var(--surface))}
.opt.wrong{border-color:var(--bad); background:color-mix(in srgb,var(--bad) 12%,var(--surface))}
.opt:disabled{cursor:default}
.reveal{display:flex; gap:16px; align-items:flex-start; background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:14px}
.reveal .txt{min-width:0}
.reveal .verdict{font:800 22px/1.2 var(--display); margin:0}   /* .reveal p (15px) used to win over .verdict; now 22px bold = large text, AA needs 3:1 (RSP-17) */
.reveal .verdict.ok{color:var(--good)} .reveal .verdict.no{color:var(--bad)}
.reveal p{margin:4px 0 0; font-size:15px}
.next{margin-top:12px; border:0; background:var(--accent); color:var(--bg); font:700 16px var(--body); padding:10px 18px; border-radius:12px; cursor:pointer}