/* Thinking Cap — shared styles
   Identity: the propeller beanie. Its three panel colors (yellow, red, blue) are the palette;
   red belongs to Then & Now, blue to Pinpoint, yellow to streaks and wins. Everything else stays quiet. */
:root{
  --paper:#EEF1F6; --surface:#FFFFFF; --ink:#1D2240; --muted:#5C627D; --line:#D6DBE6; --soft:#E4E8F0;
  --yellow:#F7B928; --red:#E2453C; --blue:#2F6FE4;
  --accent:var(--ink); --accent-soft:var(--soft); --on-accent:#FFFFFF;
  --good:#1E8B50; --good-soft:#DCF1E4; --bad:#C8372F; --bad-soft:#FADFDC; --near:#A86F06; --near-soft:#FBEDCB; --cool-soft:#DDE7FB;
  --sea:#DCE6F3; --land:#B9C6D6; --border:#DCE6F3; --grat:#CBD8E8;
  --shadow:0 10px 30px rgb(29 34 64 / .14);
  --f-display:"Fredoka", "Avenir Next Rounded", "Nunito", system-ui, sans-serif;
  --f-body:"Figtree", "Helvetica Neue", Arial, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --paper:#12152B; --surface:#1B1F3C; --ink:#EDF0FA; --muted:#A0A6C2; --line:#2E3459; --soft:#252A4D;
  --yellow:#FFC94A; --red:#FF6A5F; --blue:#7EA2FF;
  --good:#4FC985; --good-soft:#173A2B; --bad:#FF7C72; --bad-soft:#43211F; --near:#F2BA45; --near-soft:#3D3012; --cool-soft:#1F2C55;
  --sea:#17203E; --land:#34416A; --border:#17203E; --grat:#1F2A4C;
  --shadow:0 10px 30px rgb(0 0 0 / .45);
  color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#12152B; --surface:#1B1F3C; --ink:#EDF0FA; --muted:#A0A6C2; --line:#2E3459; --soft:#252A4D;
  --yellow:#FFC94A; --red:#FF6A5F; --blue:#7EA2FF;
  --good:#4FC985; --good-soft:#173A2B; --bad:#FF7C72; --bad-soft:#43211F; --near:#F2BA45; --near-soft:#3D3012; --cool-soft:#1F2C55;
  --sea:#17203E; --land:#34416A; --border:#17203E; --grat:#1F2A4C;
  --shadow:0 10px 30px rgb(0 0 0 / .45);
  color-scheme:dark }
body[data-game="then-and-now"]{ --accent:var(--red); --accent-soft:var(--bad-soft) }
body[data-game="pinpoint"]{ --accent:var(--blue); --accent-soft:var(--cool-soft) }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.5;
  padding:max(12px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) max(40px, env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px));
  font-variant-numeric:tabular-nums}
a{color:inherit}
button{font:inherit; color:inherit; cursor:pointer}
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible{outline:3px solid var(--yellow); outline-offset:2px; border-radius:8px}
[hidden]{display:none!important}
.wrap{max-width:660px; margin:0 auto}

/* ---------- Header ---------- */
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:6px 18px}
.logo{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-family:var(--f-display); font-weight:600; font-size:22px; letter-spacing:-.01em}
.logo svg{width:40px; height:40px; flex:none}
.top .help{border:2px solid var(--line); background:var(--surface); border-radius:999px; padding:6px 14px; font-weight:600; font-size:15px}
.top .help:hover{border-color:var(--ink)}

/* the one bit of motion: the propeller spins on load and on a win */
.prop{transform-box:fill-box; transform-origin:center}
.spin .prop{animation:spin 1.1s cubic-bezier(.2,.8,.3,1)}
@keyframes spin{from{transform:rotate(0)} to{transform:rotate(1080deg)}}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--f-display); font-weight:600; letter-spacing:-.01em; margin:0; text-wrap:balance; line-height:1.15}
.muted{color:var(--muted)}
.small{font-size:14px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:12px; padding:13px 20px; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:16px; text-decoration:none}
.btn:hover{filter:brightness(1.06)}
.btn[disabled]{opacity:.4; cursor:not-allowed; filter:none}
.btn.ghost{background:transparent; color:var(--ink); border:2px solid var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
body[data-game] .btn:not(.ghost){color:#fff}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body[data-game] .btn:not(.ghost){color:#0F1226} }
:root[data-theme="dark"] body[data-game] .btn:not(.ghost){color:#0F1226}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* ---------- Game page frame ---------- */
.gamehead{display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.gamehead h1{font-size:clamp(30px,7vw,40px)}
.gamehead h1 .dot{display:inline-block; width:.42em; height:.42em; border-radius:50%; background:var(--accent); margin-left:.12em; vertical-align:.12em}
.gamehead .when{color:var(--muted); font-size:15px}
.board{background:var(--surface); border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:18px; border:1px solid var(--line)}
@media (max-width:480px){ .board{padding:16px 14px; border-radius:16px} }
.prompt{font-family:var(--f-display); font-weight:600; font-size:clamp(21px,5vw,27px); line-height:1.2; margin:0; text-wrap:balance}
.progress{display:flex; gap:5px}
.progress i{flex:1; height:6px; border-radius:3px; background:var(--soft)}
.progress i.on{background:var(--accent)} .progress i.ok{background:var(--good)} .progress i.no{background:var(--bad)}
.status{display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--muted); font-size:15px}
.note{margin:0; color:var(--muted); font-size:15px}
.practice{background:var(--yellow); color:#1D2240; border-radius:14px; padding:12px 16px; font-size:15px; margin-bottom:14px}
.practice b{font-weight:700}

/* result callouts */
.callout{border-radius:14px; padding:14px 16px; background:var(--soft); display:flex; flex-direction:column; gap:3px}
.callout .big{font-family:var(--f-display); font-weight:600; font-size:22px; line-height:1.2}
.callout p{margin:0; color:var(--muted); font-size:15px}
.callout.ok{background:var(--good-soft)} .callout.ok .big{color:var(--good)}
.callout.no{background:var(--bad-soft)} .callout.no .big{color:var(--bad)}
.callout.final .big{font-size:28px}

/* ---------- End of game ---------- */
.score{font-family:var(--f-display); font-weight:700; font-size:56px; line-height:1}
.score small{font-family:var(--f-body); font-size:18px; font-weight:500; color:var(--muted); margin-left:4px}
.grid{font-size:22px; letter-spacing:2px; line-height:1.2}
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; text-align:center}
.stats div{background:var(--soft); border-radius:12px; padding:10px 6px}
.stats b{display:block; font-family:var(--f-display); font-weight:600; font-size:26px; line-height:1.1}
.stats span{font-size:13px; color:var(--muted)}
.stats .streak b{color:var(--near)}
.next{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:16px}
.next .clock{font-family:var(--f-display); font-weight:600; font-size:22px}
.copied{font-size:14px; color:var(--good); min-height:1.2em}
table.recap{width:100%; border-collapse:collapse; font-size:15px}
table.recap td{padding:9px 4px; border-top:1px solid var(--line); vertical-align:top}
table.recap td.n{text-align:right; white-space:nowrap; color:var(--muted)}
table.recap td.e{width:28px}

/* ---------- How to play dialog ---------- */
dialog.how{border:0; border-radius:20px; padding:24px; max-width:min(460px, calc(100vw - 32px)); background:var(--surface); color:var(--ink); box-shadow:var(--shadow)}
dialog.how::backdrop{background:rgb(18 21 43 / .55)}
dialog.how h2{font-size:26px; margin-bottom:10px}
dialog.how ul{padding-left:20px; margin:0 0 18px; display:flex; flex-direction:column; gap:8px}

/* ---------- Footer ---------- */
button.linkish{background:none; border:0; padding:0; color:var(--ink); text-decoration:underline; font-size:inherit}
footer.site{margin-top:28px; color:var(--muted); font-size:14px; text-align:center}
footer.site a{color:var(--muted)}

@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important; scroll-behavior:auto!important} }