@scope (body[data-game="standard"]) {

  :scope { --bg:#f7f5ef; --card:#fff; --line:#cbd2d2; --text:#202a32; --muted:#586570; --amber:#a65309; --green:#176b45; --red:#ad3034; --blue:#176a88; --primary:#16736d; --primary-contrast:#fff; }
  * { box-sizing:border-box; }
  :scope { margin:0; background:var(--bg); color:var(--text); font:16px/1.5 Inter,system-ui,sans-serif; }
  main { max-width:480px; margin:0 auto; padding:16px 16px calc(24px + env(safe-area-inset-bottom)); }
  h1,.display { font-family:Fraunces,Georgia,serif; font-weight:600; }
  h1 { font-size:32px; margin:8px 0 0; color:var(--amber); }
  .hook { color:var(--muted); margin:4px 0 16px; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:12px; }
  .topline { display:flex; justify-content:space-between; align-items:center; min-height:44px; }
  .topline h1 { margin:0; }
  .topline a { min-height:44px; display:inline-flex; align-items:center; color:var(--amber); }
  .topline .home-link { padding:0 12px; text-decoration:none; }
  .row { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
  .muted { color:var(--muted); }
  .tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
  .tile { min-height:84px; border-radius:12px; padding:10px 12px; background:var(--card); border:2px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; position:relative; }
  .tile .word { font-family:Fraunces,Georgia,serif; font-size:22px; letter-spacing:.02em; }
  .tile .role { font-size:16px; font-weight:600; color:var(--muted); }
  .tile.target { border-color:var(--amber); }
  .tile.target .role { color:var(--amber); }
  .tile.decoy { border-color:var(--line); }
  .tile.stretch { border-style:dashed; border-color:var(--blue); }
  .tile.stretch .role { color:var(--blue); }
  .tile .verdict { font-weight:600; }
  .tile.linked { background:#e5f3e9; }
  .tile.unsure { background:#edf0ef; }
  .tile.decoy.linked { background:#fae9e8; }
  .ok { color:var(--green); } .miss { color:var(--red); }
  .flag { position:absolute; top:4px; right:4px; min-width:44px; min-height:44px; background:transparent; border:0; color:var(--muted); font-size:16px; cursor:pointer; }
  form { display:flex; gap:8px; }
  input { flex:1; min-width:0; min-height:52px; font:inherit; font-size:20px; text-transform:uppercase; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:0 14px; }
  button { min-height:48px; font:inherit; font-weight:600; border-radius:10px; border:0; padding:0 18px; cursor:pointer; }
  .primary { background:var(--primary); color:var(--primary-contrast); }
  .ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
  button:disabled { opacity:.5; cursor:default; }
  .message { min-height:24px; margin:10px 0 0; }
  .message.big { font-family:Fraunces,Georgia,serif; font-size:26px; }
  .history { margin-top:10px; }
  .history div { border-top:1px solid var(--line); padding:6px 0; }
  .reveal b { font-family:Fraunces,Georgia,serif; font-weight:600; letter-spacing:.02em; }
  .actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
  .actions button { flex:1; }
  .grid { font-size:24px; letter-spacing:4px; line-height:1.6; }
  pre { white-space:pre-wrap; font:inherit; }

}
@scope (body[data-game="spymaster"]) {

  :scope { --bg:#f7f5ef; --card:#fff; --line:#cbd2d2; --text:#202a32; --muted:#586570; --amber:#a65309; --green:#176b45; --red:#ad3034; --blue:#176a88; --primary:#16736d; --primary-contrast:#fff; }
  * { box-sizing:border-box; }
  :scope { margin:0; background:var(--bg); color:var(--text); font:16px/1.4 Inter,system-ui,sans-serif; }
  main { max-width:480px; margin:0 auto; padding:16px 16px calc(24px + env(safe-area-inset-bottom)); }
  h1,.display { font-family:Fraunces,Georgia,serif; font-weight:600; }
  h1 { font-size:30px; margin:4px 0 0; color:var(--amber); }
  a { color:var(--blue); }
  .topline { display:flex; justify-content:space-between; align-items:center; min-height:44px; }
  .topline a { min-height:44px; display:inline-flex; align-items:center; }
  .topline .home-link { padding:0 12px; text-decoration:none; }
  .hook { color:var(--muted); margin:4px 0 12px; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px; margin-bottom:12px; }
  .muted { color:var(--muted); }
  .status { display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; font-weight:600; }
  .status .back { min-height:44px; padding:0 12px; margin-left:auto; }
  /* 4 columns at 390px leave ~71px per word: title case at 16px fits every ≤ 8-letter word (BASEBALL ≈ 62px), upper case doesn't. */
  .grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:5px; margin:12px -2px 0; }
  .tile { min-width:0; min-height:64px; border-radius:10px; padding:4px 2px; background:var(--card); border:2px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2px; }
  .tile .word { font-weight:600; font-size:16px; text-transform:capitalize; white-space:nowrap; }
  .tile .mark { font-size:16px; color:var(--muted); line-height:1.2; }
  .tile.agent { border-color:var(--amber); }
  .tile.agent .mark { color:var(--amber); }
  .tile.assassin { border-color:var(--red); border-style:dashed; }
  .tile.assassin .mark { color:var(--red); }
  .tile.revealed { opacity:.55; }
  .tile.revealed.agent { opacity:1; background:#e5f3e9; border-color:var(--green); border-style:solid; }
  .tile.revealed.agent .mark { color:var(--green); }
  .tile.revealed.assassin { opacity:1; background:#fae9e8; }
  .tile.just { outline:3px solid var(--blue); outline-offset:1px; }
  .voice, .shortlist { scroll-margin-bottom:150px; }
  .voice { margin:12px 0 0; padding:10px 12px; border-left:3px solid var(--amber); background:#fff2e2; border-radius:0 10px 10px 0; }
  .voice p { margin:4px 0; }
  .voice .who { font-weight:600; color:var(--amber); }
  .shortlist { list-style:none; margin:10px 0 0; padding:0; }
  .shortlist li { display:grid; grid-template-columns:1.6em 1fr 44px; align-items:center; gap:6px; padding:4px 0; border-top:1px solid var(--line); }
  .shortlist .rowtext { min-width:0; }
  .bar { height:8px; background:var(--line); border-radius:4px; margin-top:3px; }
  .bar span { display:block; height:100%; border-radius:4px; background:var(--muted); }
  .bar span.linked { background:var(--green); }
  .flag { min-width:44px; min-height:44px; background:transparent; border:0; color:var(--muted); font-size:16px; cursor:pointer; }
  .composer { position:sticky; bottom:0; background:var(--bg); padding:10px 0 calc(8px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
  .composer form { display:flex; flex-direction:column; gap:8px; }
  .composer .row { display:flex; gap:8px; align-items:center; }
  input { flex:1; min-width:0; min-height:52px; font:inherit; font-size:20px; text-transform:uppercase; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:0 14px; }
  button { min-height:48px; font:inherit; font-weight:600; border-radius:10px; border:0; padding:0 16px; cursor:pointer; }
  .primary { background:var(--primary); color:var(--primary-contrast); }
  .ghost { background:transparent; color:var(--text); border:1px solid var(--line); }
  .count { min-width:48px; background:var(--card); color:var(--text); border:1px solid var(--line); }
  .count[aria-pressed="true"] { background:var(--primary); color:var(--primary-contrast); border-color:var(--primary); }
  button:disabled { opacity:.5; cursor:default; }
  .message { min-height:22px; margin:8px 0 0; }
  .history { margin-top:8px; }
  .history div { border-top:1px solid var(--line); padding:6px 0; }
  .missions button { width:100%; text-align:left; margin-top:8px; padding:12px 14px; min-height:56px; }
  .missions .done { color:var(--green); }
  .result { font-size:28px; margin:0 0 4px; }
  .share { font-size:22px; letter-spacing:2px; line-height:1.6; }
  .actions { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
  .actions button { flex:1; }
  pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; margin:0; }
  ol.rules { padding-left:1.2em; margin:8px 0; }
  ol.rules li { margin:4px 0; }

}

/* Appearance control is shared by both games. */
.appearance { display:flex; justify-content:flex-end; align-items:center; gap:6px; margin:0 0 12px; color:var(--muted); font:12px/1.2 Inter,system-ui,sans-serif; }
.appearance span { margin-right:4px; }
.appearance button { min-height:36px; padding:0 12px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--muted); font:600 12px Inter,system-ui,sans-serif; cursor:pointer; }
.appearance button[aria-pressed="true"] { background:var(--primary); color:var(--primary-contrast); border-color:var(--primary); }
.appearance button:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
body[data-game] :is(button, input, textarea, a):focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
body[data-game] .primary:hover:not(:disabled) { filter:brightness(.92); }
body[data-game] .ghost:hover:not(:disabled) { background:var(--bg); }
body[data-game] :is(input, textarea):focus-visible { border-color:var(--blue); }

/* Human-review request after a second opinion (appeal.js), shared by both games. Resets the games' single-line form and
   input styles for the radios and textarea. */
.review-note { margin:10px 0 0; }
.review-note > p { margin:0; }
.review-note .appeal { margin-top:6px; min-height:40px; font-size:14px; }
.appeal-form { display:flex; flex-direction:column; gap:8px; margin-top:8px; padding:12px; border:1px solid var(--line); border-radius:10px; }
.appeal-form p { margin:0; }
.appeal-form [role="radiogroup"] { display:flex; flex-wrap:wrap; gap:8px 16px; }
.appeal-choice { display:flex; align-items:center; gap:6px; min-height:44px; cursor:pointer; }
.appeal-choice input { flex:none; min-height:0; width:20px; height:20px; margin:0; }
.appeal-choice:has(input:disabled) { opacity:.5; cursor:default; }
.appeal-form textarea { width:100%; box-sizing:border-box; font:inherit; font-size:16px; color:var(--text); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; resize:vertical; }
.appeal-form .actions { display:flex; flex-wrap:wrap; gap:8px; }

body[data-game] .playtest-feedback { margin-top:16px; padding-top:8px; border-top:1px solid var(--line); }
body[data-game] .playtest-feedback button[aria-pressed="true"] { background:var(--green); color:var(--bg); border-color:var(--green); }