:root {
  --bg: #0f1417;
  --bg2: #161d22;
  --panel: #1e272e;
  --panel2: #26323a;
  --line: #33424c;
  --ink: #eef4f2;
  --muted: #8fa3ad;
  --accent: #4fd1a5;
  --accent2: #6ea8fe;
  --good: #4fd1a5;
  --bad: #f2657a;
  --extinct: #c79bff;
  --sil: #cfe8dd;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --r: 16px;
}
* { box-sizing: border-box; }
/* The gradient below paints only the body box, so rubber-band overscroll would
   expose the default white canvas without this colour on the root element. */
html { background-color: var(--bg); color-scheme: dark; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  background-color: var(--bg);
  background-image: radial-gradient(1200px 700px at 50% -10%, #1a252b 0%, var(--bg) 60%);
  color: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 920px; margin: 0 auto; padding: 16px 18px 48px; }

/* One visible focus ring for everything keyboard-reachable. :focus-visible keeps
   it off mouse clicks, so this costs the pointer experience nothing. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rank-item:focus-visible { outline-offset: 3px; }

/* shown when data.js never arrives, or by <noscript> */
.loadfail { max-width: 460px; margin: 48px auto; text-align: center; color: var(--muted); line-height: 1.55; }
.loadfail b { color: var(--ink); }
.loadfail .btn { margin-top: 14px; }

/* header */
header.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; color: inherit; }
.brand-mark { width: 30px; height: 30px; color: var(--accent); display: inline-flex; }
.brand-mark svg { width: 100%; height: 100%; }
.brand h1 { font-size: 22px; margin: 0; letter-spacing: .2px; font-weight: 800; }
.brand .dot { color: var(--accent); }
.scoreboard { display: flex; gap: 10px; align-items: center; }
.pill { background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--muted); display: flex; gap: 7px; align-items: center; }
.pill b { color: var(--ink); font-variant-numeric: tabular-nums; font-size: 15px; }
.pill.hot b { color: #f4a259; }
.iconbtn {
  width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--muted); font-family: Georgia, serif; font-style: italic;
  font-weight: 700; font-size: 16px; cursor: pointer; line-height: 1; padding: 0;
  transition: color .12s, border-color .12s;
}
.iconbtn:hover { color: var(--ink); border-color: var(--accent); }
/* language picker: flag + name (collapses to flag-only on phones) + a dropdown */
.langpick { position: relative; }
.langbtn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--panel);
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: color .12s, border-color .12s;
}
.langbtn:hover { color: var(--ink); border-color: var(--accent); }
.lang-label-short { display: none; }
.lang-caret { font-size: 11px; }
.langmenu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; margin: 0; padding: 5px; list-style: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); min-width: 130px;
}
.langmenu li { margin: 0; }
.langopt {
  display: block; width: 100%; text-align: left; font: inherit; background: none; border: 0;
  padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--ink); cursor: pointer; white-space: nowrap;
}
.langopt:hover { background: var(--panel2); }
.langopt[aria-current="true"] { color: var(--accent); }
/* phones: the short "Lang" label to keep the header compact */
@media (max-width: 520px){ .lang-label-full { display: none; } .lang-label-short { display: inline; } .lang-caret { display: none; } }

/* hero / start */
.hero { text-align: center; max-width: 620px; margin: 0 auto; padding: 2px 10px; }
.hero-mark { width: 76px; height: 76px; color: var(--accent); margin: 0 auto 18px; display: flex; }
.hero-mark svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 20px rgba(79,209,165,.25)); }
.hero h2 { font-size: 26px; margin: 0 0 6px; letter-spacing: -.3px; }
.hero .tagline { color: var(--ink); font-size: 15px; line-height: 1.5; margin: 0 auto 6px; max-width: 520px; }
.hero .tagline b { color: var(--accent); }
.hero .sub2 { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 auto 26px; max-width: 500px; }
.hero.wide { max-width: 820px; }
.demo-cap { color: var(--muted); font-size: 13px; margin: 0 auto 8px; }
.demo-cap b { color: var(--ink); }
.demo-board { margin: 0 auto 12px; }
/* smaller example cards than the round view — this is just a static illustration */
.demo-board .silbox { height: min(74px, 10vh); margin-bottom: 5px; }
.demo-board .card { padding: 11px; }
.demo-board .name { font-size: 15px; }
.demo-board .target-card { margin-bottom: 8px; }
.demo-board .rank-item { cursor: default; }
.streakline { color: var(--muted); font-size: 13px; margin-top: 16px; min-height: 18px; }

/* Phones: the example board is an illustration, and at full size it pushed the
   Play button below the fold once the browser toolbar took its cut. Trim the
   decorative parts of it (scientific names, silhouette height, padding) so the
   primary action is reachable without scrolling. */
@media (max-width: 700px) {
  .hero h2 { font-size: 23px; margin-bottom: 4px; }
  .hero .tagline { font-size: 14.5px; margin-bottom: 4px; }
  .demo-cap { margin-bottom: 5px; }
  .demo-board { margin-bottom: 8px; }
  .demo-board .silbox { height: min(54px, 8vh); margin-bottom: 4px; }
  .demo-board .card { padding: 9px; }
  .demo-board .latin { display: none; }
  .demo-board .name { font-size: 14px; }
  .demo-board .when, .demo-board .badge-extinct { margin-top: 3px; }
  .demo-board .target-card { margin-bottom: 6px; }
  .demo-board .rank-grid { gap: 10px; }
}

/* game head */
.gamehead { text-align: center; margin: 4px 0 12px; }
.gamehead .q { font-size: 21px; font-weight: 700; margin: 4px 0; line-height: 1.3; }
.gamehead .sub { color: var(--muted); font-size: 14px; }
.target-name { color: var(--accent); }

/* cards */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; text-align: center; position: relative; }
/* silhouette height caps at 108px but shrinks on short viewports (e.g. a mobile
   browser toolbar eating height) so the round view keeps some breathing room */
.silbox { height: min(108px, 14vh); display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.sil { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(88%) sepia(6%) saturate(400%) hue-rotate(105deg) brightness(97%); }
.name { font-size: 17px; font-weight: 650; }
.latin { font-size: 12.5px; color: var(--muted); font-style: italic; margin-top: 2px; }
.when { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.badge-extinct { display: inline-block; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--extinct); border: 1px solid color-mix(in srgb, var(--extinct) 45%, transparent); border-radius: 999px; padding: 2px 8px; margin-top: 6px; }

.target-card { max-width: 300px; margin: 0 auto; background: var(--panel2); border-color: var(--accent); }
.target-card .sil { filter: brightness(0) invert(66%) sepia(52%) saturate(560%) hue-rotate(104deg) brightness(96%); }

/* rank grid */
.rank-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 700px){ .rank-grid { grid-template-columns: 1fr 1fr; } }
/* A real <button> so the game is playable by keyboard; these reset the UA
   defaults that would otherwise fight .card */
.rank-item {
  appearance: none; font: inherit; color: inherit; width: 100%; margin: 0;
  cursor: pointer; transition: transform .1s, border-color .1s, box-shadow .1s, background .1s;
}
.rank-item:hover:not(.chosen) { transform: translateY(-2px); border-color: var(--accent2); box-shadow: var(--shadow); }
.rank-item.chosen { border-color: var(--accent2); background: color-mix(in srgb, var(--accent2) 12%, var(--panel)); }
.rank-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2; min-width: 26px; height: 26px; padding: 0 7px;
  border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--accent2); color: #08203a; border: 2px solid var(--bg2);
}
.rank-badge[hidden] { display: none !important; }

/* ⓘ badge + description popover on obscure cards (see cardInner). The 44px hit
   area is a comfortable phone touch target; the visible glyph is 30px. */
.info { position: absolute; top: 4px; right: 4px; z-index: 3; width: 44px; height: 44px;
  padding: 6px; display: flex; align-items: flex-start; justify-content: flex-end; cursor: pointer;
  background: none; border: 0; -webkit-tap-highlight-color: transparent; }
.info > span { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg2); color: var(--muted); font-family: Georgia, "Times New Roman", serif;
  font-style: italic; font-weight: 700; font-size: 17px; line-height: 1;
  display: flex; align-items: center; justify-content: center; }
.info:hover > span, .info:focus-visible > span, .card.showpop .info > span {
  color: var(--ink); border-color: var(--accent); background: var(--panel2); }
.info:focus-visible { outline: none; }
.pop { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 4; display: none;
  background: var(--bg2); border: 1px solid var(--accent); border-radius: 10px;
  padding: 11px 12px; font-size: 13px; line-height: 1.45; color: var(--ink);
  text-align: left; box-shadow: var(--shadow); }
.card.showpop .pop { display: block; }

/* reveal result cards: your ranking, marked right/wrong */
.result-grid { margin-top: 4px; }
.res-item { position: relative; }
.res-item.res-ok { border-color: var(--good); background: color-mix(in srgb, var(--good) 10%, var(--panel)); }
.res-item.res-no { border-color: var(--bad); }
.res-item.res-no .silbox { opacity: .4; }
.res-item.res-no::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--r); pointer-events: none;
  background: linear-gradient(to top right, transparent calc(50% - 1.3px), color-mix(in srgb, var(--bad) 65%, transparent) calc(50% - 1.3px), color-mix(in srgb, var(--bad) 65%, transparent) calc(50% + 1.3px), transparent calc(50% + 1.3px));
}
.res-badge { position: absolute; top: 10px; left: 10px; z-index: 3; width: 28px; height: 28px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; border: 2px solid var(--bg2); font-variant-numeric: tabular-nums; }
.res-badge.ok { background: var(--good); color: #06231a; }
.res-badge.no { background: var(--bad); color: #2a0b12; }
.res-mark { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; }
.res-mark.ok { color: var(--good); font-size: 22px; font-weight: 800; line-height: 1; }
.res-mark.fix { width: 28px; height: 28px; border-radius: 999px; background: var(--accent2); color: #08203a; font-size: 15px; font-weight: 800; border: 2px solid var(--bg2); font-variant-numeric: tabular-nums; }
/* Reserved gap between the target and the options. Empty during play; on reveal
   the Next button drops into it — same height either way, so nothing shifts. */
.midgap { min-height: 60px; display: flex; align-items: center; justify-content: center; margin: 4px 0; }

/* reveal panel + timeline */
.panel { margin: 28px auto 0; max-width: 760px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.timeline-box { overflow-x: auto; }
.timeline { display: block; min-width: 520px; }
.feedback {
  margin: 12px auto 0; max-width: 560px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 16px;
}
.feedback p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink); }
.tl-icon { filter: brightness(0) invert(88%) sepia(6%) saturate(400%) hue-rotate(105deg) brightness(97%); }
.tl-target { filter: brightness(0) invert(66%) sepia(52%) saturate(560%) hue-rotate(104deg) brightness(96%); }

.banner { text-align: center; font-size: 16px; font-weight: 650; margin-top: 16px; min-height: 22px; }
.banner.good { color: var(--good); }
.banner.bad { color: var(--bad); }
.factline { text-align: center; color: var(--muted); font-size: 13.5px; margin-top: 10px; line-height: 1.5; max-width: 640px; margin-left: auto; margin-right: auto; }
.factline .hl { color: var(--accent); font-weight: 600; }

/* buttons */
.actions { display: flex; justify-content: center; gap: 12px; margin-top: 22px; min-height: 46px; }
.btn { border: 1px solid var(--line); background: var(--accent); color: #06231a; border-radius: 12px; padding: 12px 24px; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .1s, filter .1s; }
.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn.big { padding: 15px 40px; font-size: 17px; border-radius: 14px; }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { border-color: var(--accent); }

/* tier tag shown during play (and in the final recap) */
.tiertag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: middle; background: var(--panel2); color: var(--muted); border: 1px solid var(--line); }
.tiertag.t-medium { color: #f4a259; border-color: #f4a259; }
.tiertag.t-hard { color: var(--bad); border-color: var(--bad); }
/* PLAYTEST ONLY — estimated-difficulty badge; remove with fame.js at launch */
.diffbadge { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; vertical-align: middle; font-variant-numeric: tabular-nums; color: hsl(var(--dh, 90) 70% 62%); background: hsl(var(--dh, 90) 45% 50% / 0.13); border: 1px solid hsl(var(--dh, 90) 55% 55% / 0.55); }

/* daily status on the start screen */
.daily-status { margin: 4px auto 14px; }
.slot-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }
.slot-dot {
  width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--panel); border: 1px solid var(--line); color: var(--muted);
}
.slot-dot.done { background: var(--accent); border-color: var(--accent); color: #06231a; }
.daily-sub { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
/* level picker + Play on one row */
.pickrow { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* shown when every game of the selected level is already played for the day */
.picknote { color: var(--muted); font-size: 13px; margin: 10px auto 0; max-width: 420px; line-height: 1.5; min-height: 0; }
.btn:disabled, .btn.is-disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover, .btn.is-disabled:hover { filter: none; transform: none; }
/* difficulty picker: one row of three levels; player picks, then hits Play */
.seg { display: flex; width: max-content; margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; }
.seg-btn { border: none; background: transparent; color: var(--muted); border-radius: 9px; padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .12s, color .12s; }
.seg-btn:hover { color: var(--ink); }
.seg-btn.on { color: #06231a; background: var(--accent); }
.seg-btn.t-medium.on { background: #f4a259; }
.seg-btn.t-hard.on { background: var(--bad); color: #2a0b12; }

/* final summary */
.final { text-align: center; max-width: 620px; margin: 2vh auto 0; padding: 10px; }
.final h2 { font-size: 30px; margin: 0 0 6px; letter-spacing: -.3px; }
.final-score { font-size: 44px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; margin: 6px 0; }
.final-max { font-size: 22px; font-weight: 600; color: var(--muted); }
.final-grid { font-size: 26px; letter-spacing: 3px; margin: 6px 0 10px; word-break: break-all; }
.final-line { color: var(--ink); font-size: 15px; margin-bottom: 18px; }
.final-line b { color: var(--accent); }
/* Beat-the-crowd line above the recap (only when >= 10 players finished). */
.beatline { color: var(--muted); font-size: 14px; margin: 0 auto 8px; max-width: 520px; line-height: 1.5; min-height: 0; }
.beatline b { color: var(--accent); }

/* Recap: one clickable row per round, folding out to a per-round review. */
.recap { width: 100%; max-width: 540px; margin: 4px auto 8px; border-collapse: collapse; font-size: 14.5px; text-align: left; }
.recap .hrow td { padding: 4px 8px 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: 600; white-space: nowrap; }
.recap .hrow .h-you { text-align: center; } .recap .hrow .h-oth { text-align: right; }
.recap .rrow { cursor: pointer; }
.recap .rrow > td { padding: 11px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.recap .rrow:hover > td { background: var(--panel2); }
.recap .rc-n { color: var(--muted); width: 22px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.recap .rc-nm { color: var(--ink); font-weight: 600; }
.rc-cand { display: inline-flex; align-items: center; gap: 9px; }
.rc-sil { width: 34px; height: 34px; object-fit: contain; flex: none;
  filter: brightness(0) invert(88%) sepia(6%) saturate(400%) hue-rotate(105deg) brightness(97%); }
.recap .rc-yo { text-align: center; width: 40px; }
.rc-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px;
  padding: 0 6px; border-radius: 7px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.rc-chip.g { background: var(--good); color: #06231a; } .rc-chip.y { background: #e0b24c; color: #2a1c00; }
.rc-chip.r { background: var(--bad); color: #2a0b12; }
.recap .rc-pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; width: 56px; }
.recap .rc-car { width: 22px; text-align: center; color: var(--muted); transition: transform .15s; }
.recap .rrow.open .rc-car { transform: rotate(180deg); }

.recap .drow { display: none; }
.recap .drow.show { display: table-row; }
.recap .drow > td { padding: 0 6px 14px 32px; background: var(--panel2); border-top: 0; }
.detail { width: 100%; border-collapse: collapse; font-size: 13px; }
.detail th { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  font-weight: 600; text-align: left; padding: 9px 8px 5px; white-space: nowrap; }
.detail th.r { text-align: right; } .detail th.c { text-align: center; }
.detail td { padding: 6px 8px; border-top: 1px dashed var(--line); vertical-align: middle; }
.detail .rc-sil { width: 26px; height: 26px; }
.detail .rc-cand { gap: 8px; }
.detail .d-ord { color: var(--muted); width: 16px; font-variant-numeric: tabular-nums; }
.detail .d-mya { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.detail .d-you { text-align: center; white-space: nowrap; font-weight: 600; }
.detail .d-ev { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v-ok { color: var(--good); } .v-no { color: var(--bad); } .v-wh { color: var(--muted); font-weight: 500; font-size: 12.5px; }
@media (max-width: 520px){ .final-grid { font-size: 22px; letter-spacing: 2px; } }

/* modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(6,10,12,.7); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 22px; z-index: 50; }
.modal { position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r); max-width: 640px; width: 100%; max-height: 86vh; overflow-y: auto; padding: 26px 26px 30px; box-shadow: var(--shadow); }
.modal h2 { margin: 0 0 14px; font-size: 22px; }
.modal-close { position: absolute; top: 14px; right: 16px; background: none; border: none; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 4px; }
.modal-close:hover { color: var(--ink); }
.modal-body { color: var(--muted); font-size: 14px; line-height: 1.6; }
.modal-body a { color: var(--accent); }
.modal-body p { margin: 0 0 12px; }
.modal-body h3 { color: var(--ink); font-size: 13px; text-transform: uppercase; letter-spacing: .8px; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.credit-list { display: flex; flex-direction: column; gap: 13px; }
.credit-block { }
.credit-artist { color: var(--ink); font-weight: 600; font-size: 13.5px; }
.credit-names { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-top: 2px; }
.clic { color: var(--muted); font-weight: 400; font-size: 11.5px; }
.clic a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.clic a:hover { color: var(--accent); }

.hidden { display: none !important; }
@media (max-width: 520px){
  .brand h1 { font-size: 19px; }
  .hero h2 { font-size: 27px; }
  .gamehead .q { font-size: 19px; }
  .pill { padding: 5px 10px; font-size: 12px; }
  /* keep the header from crowding on narrow phones */
  .scoreboard { gap: 7px; }
  /* the round view stacks the cards 2x2 on phones (3 silhouette-rows tall), plus
     the reserved gap — shrink the images here to keep it within the viewport */
  .silbox { height: min(74px, 11vh); margin-bottom: 6px; }
  .card { padding: 10px; }
  .rank-grid { gap: 9px; }
  .gamehead { margin: 2px 0 8px; }
  .midgap { min-height: 46px; margin: 2px 0; }
}