/* Wordle as a split-flap departure board. */
:root {
  --flap: #26292e; --flap-edge: #0d0e10; --flap-ink: #f2efe8; --flap-dim: #6d7178;
  --ok: #2e9e6b; --warn: #e9a825; --bad: #d64545; --info: #5aa7f0;
  --accent: #e9a825; --accent-ink: #1b1a14;
  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif-condensed, sans-serif;
  --font-ui: "Barlow", "Inter", system-ui, sans-serif;
  /* light: station wall */
  --bg: #e8e5de; --surface: #f6f4ef; --surface-2: #dcd8cf; --ink: #1c1d20; --ink-2: #5e6169; --line: #c9c4b8;
  --panel: #16181b; --panel-ink: #f2efe8;
  --flap-empty-top: #d9d5cc; --flap-empty-bot: #cbc7be; --flap-empty-seam: #b3afa6;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --flap-empty-top: #1f2226; --flap-empty-bot: #1a1d21; --flap-empty-seam: #0d0e10; --bg: #101215; --surface: #191c20; --surface-2: #23262b; --ink: #f2efe8; --ink-2: #9aa0a8; --line: #2e3238; --panel: #16181b; } }
:root[data-theme="dark"] { --flap-empty-top: #1f2226; --flap-empty-bot: #1a1d21; --flap-empty-seam: #0d0e10; --bg: #101215; --surface: #191c20; --surface-2: #23262b; --ink: #f2efe8; --ink-2: #9aa0a8; --line: #2e3238; --panel: #16181b; }
:root[data-colorblind="1"] { --ok: #e69f00; --warn: #56b4e9; }
:root[data-contrast="1"] { --flap-dim: #b8bcc3; --flap: #303439; }

body { font-size: 1.05rem; }
.screen { gap: 14px; max-width: 560px; margin-inline: auto; }
.topbar { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.screen-title { font-size: 2rem; font-weight: 600; letter-spacing: .02em; margin-left: 6px; text-transform: uppercase; }
.btn { font-family: var(--font-display); font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; }
.cta { font-size: 1.3rem; min-height: 52px; }
.panel { background: var(--panel); color: var(--panel-ink); border-radius: 14px; padding: 16px; box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, var(--shadow-2); }
.panel-title { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; color: #9aa0a8; margin-bottom: 10px; }

/* Flap tiles (restyle hg-tile) */
hg-tile, .flap {
  --tile: 58px; width: var(--tile); height: var(--tile); border-radius: 6px; border: 0;
  background: linear-gradient(var(--flap) 0 49%, var(--flap-edge) 49% 51%, color-mix(in oklab, var(--flap) 88%, black) 51%);
  color: var(--flap-ink); font-family: var(--font-display); font-weight: 600; font-size: calc(var(--tile) * .62); line-height: 1;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 2px 0 var(--flap-edge), 0 4px 10px rgb(0 0 0 / .35);
  transition: background var(--t-fast), transform var(--t-fast);
}
hg-tile[data-empty="true"] { background: linear-gradient(var(--flap-empty-top) 0 49%, var(--flap-empty-seam) 49% 51%, var(--flap-empty-bot) 51%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 2px 0 var(--flap-empty-seam); }
hg-tile[state="active"] { box-shadow: inset 0 0 0 2px var(--flap-dim), 0 2px 0 var(--flap-edge), 0 4px 10px rgb(0 0 0 / .35); }
hg-tile[state="correct"] { background: linear-gradient(var(--ok) 0 49%, color-mix(in oklab, var(--ok) 40%, black) 49% 51%, color-mix(in oklab, var(--ok) 82%, black) 51%); color: #fff; }
hg-tile[state="present"] { background: linear-gradient(var(--warn) 0 49%, color-mix(in oklab, var(--warn) 40%, black) 49% 51%, color-mix(in oklab, var(--warn) 82%, black) 51%); color: #1b1a14; }
hg-tile[state="absent"] { background: linear-gradient(var(--flap-edge) 0 49%, #000 49% 51%, #0a0b0c 51%); color: var(--flap-dim); }
hg-tile.anim-flip { animation: flap-flip var(--t-slow) var(--ease-out); }
@keyframes flap-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(-90deg); } 100% { transform: rotateX(0); } }
hg-tile.anim-pop { animation: pop var(--t-fast) var(--ease-spring); }
hg-tile.anim-bounce { animation: bounce .7s var(--ease-out); animation-delay: calc(var(--i) * 80ms); }
.row.anim-shake { animation: shake-x var(--t-slow); }

/* Hero */
.hero { text-align: center; padding-top: 6px; }
.flapline { display: flex; justify-content: center; gap: 6px; perspective: 600px; }
.flapline hg-tile { --tile: clamp(40px, 12vw, 56px); }
.tagline { color: var(--ink-2); margin-top: 10px; font-size: 1.05rem; }
.daily-card { display: flex; flex-direction: column; gap: 8px; }
.daily-head { display: flex; justify-content: space-between; align-items: baseline; }
.daily-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.daily-next { color: #9aa0a8; font-size: .95rem; }
.daily-sub { color: #c5c9cf; }
.daily-card .cta { margin-top: 4px; }
.streak-pill { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 12px; border-radius: var(--r-pill); background: var(--surface); color: var(--warn); font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; box-shadow: var(--shadow-1); }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mode { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; min-height: 68px; border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; box-shadow: var(--shadow-1); border: 2px solid transparent; transition: border-color var(--t-base); }
.mode b { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } .mode span { color: var(--ink-2); font-size: .85rem; line-height: 1.2; }
.mode[aria-pressed="true"] { border-color: var(--accent); }
.seg-line { display: flex; background: var(--surface); border-radius: var(--r-pill); padding: 3px; box-shadow: var(--shadow-1); }
.seg-line button { flex: 1; height: 40px; border-radius: var(--r-pill); color: var(--ink-2); font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; }
.seg-line button[aria-checked="true"] { background: var(--ink); color: var(--bg); }
.hard-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 4px; }
.hard-row small { display: block; color: var(--ink-2); font-size: .85rem; }
.home-actions { display: flex; gap: 8px; } .home-actions .cta { flex: 1; } .home-actions > .btn:not(.cta) { flex: 1; background: var(--surface); box-shadow: var(--shadow-1); }

/* Play */
.screen[data-screen="play"] { height: 100dvh; min-height: 0; overflow: hidden; gap: 8px; }
.hud { gap: 6px; } .hud-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.hud-note { color: var(--ink-2); font-family: var(--font-display); font-size: 1.15rem; }
.boards { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: center; gap: 10px; }
.board { display: grid; gap: var(--gap, 6px); --gap: 6px; }
.board .row { display: grid; grid-template-columns: repeat(var(--len), 1fr); gap: var(--gap); perspective: 500px; }
.board hg-tile { --tile: var(--t); width: var(--t); height: var(--t); }
/* single board: width-limited by container, height-limited by rows */
.boards[data-boards="1"] .board { --t: min(calc((100cqw - (var(--len) - 1) * var(--gap)) / var(--len)), 58px, calc((100cqh - (var(--rows) - 1) * var(--gap)) / var(--rows))); }
.boards[data-boards="2"] .board { --gap: 4px; --t: min(calc((50cqw - 5px - (var(--len) - 1) * var(--gap)) / var(--len)), 46px, calc((100cqh - (var(--rows) - 1) * var(--gap)) / var(--rows))); }
.boards[data-boards="2"] .board[data-done="true"] { opacity: .55; }
.boards { container-type: size; }
.play-msg { text-align: center; min-height: 1.4em; color: var(--ink-2); font-family: var(--font-display); font-size: 1.15rem; }
hg-keyboard { padding-bottom: env(safe-area-inset-bottom); }
.key { background: var(--surface-2); font-family: var(--font-display); font-size: 1.2rem; height: 50px; }
.key[data-state="correct"] { background: var(--ok); color: #fff; } .key[data-state="present"] { background: var(--warn); color: #1b1a14; } .key[data-state="absent"] { background: var(--flap-edge); color: var(--flap-dim); opacity: 1; }
.key:disabled { cursor: default; }
@media (min-width: 640px) { .screen[data-screen="play"] { max-width: 640px; } }

/* Result sheet */
.result-verdict { font-family: var(--font-display); font-size: clamp(2.4rem, 11vw, 3.4rem); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: center; line-height: 1; }
.result-verdict[data-won="false"] { color: var(--bad); }
.result-answer { text-align: center; color: var(--ink-2); }
.result-answer b { color: var(--ink); font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .12em; text-transform: uppercase; }
.result-next { text-align: center; color: var(--ink-2); }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; } .result-actions .cta { grid-column: 1 / -1; }

/* Distribution */
.dist { display: flex; flex-direction: column; gap: 5px; }
.dist-row { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center; font-family: var(--font-display); font-size: 1.05rem; }
.dist-bar { height: 22px; min-width: 24px; width: var(--w); background: var(--surface-2); color: var(--ink); border-radius: 4px; display: flex; align-items: center; justify-content: flex-end; padding-right: 6px; transition: width var(--t-slow) var(--ease-out); }
.dist-row[data-hl="true"] .dist-bar { background: var(--ok); color: #fff; }
#dist-panel .dist-bar { background: #2e3238; color: #f2efe8; } #dist-panel .dist-row { color: #f2efe8; } #dist-panel .dist-row[data-hl="true"] .dist-bar { background: var(--ok); }
.howto-row { display: flex; gap: 5px; }
.howto-row hg-tile { --tile: 38px; }
.lb-row[data-me="true"] { outline-color: var(--warn); }