/* Hive: a beeswax ledger. */
:root {
  --wax: #fbf3e1; --wax-2: #f3e3b8; --honey: #f59e0b; --honey-deep: #b45309; --ink: #3b2a12; --ink-2: #8a6d3b; --line: #e6d4a8;
  --bg: var(--wax); --surface: #fff9ea; --surface-2: #f6ead0; --ok: #2e9e6b; --warn: var(--honey); --bad: #c2410c; --info: var(--honey-deep); --accent: var(--honey); --accent-ink: #3b2a12;
  --font-display: "DM Serif Display", Georgia, serif; --font-ui: "DM Sans", "Inter", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --wax: #1f1710; --wax-2: #3a2c17; --ink: #f7ecd2; --ink-2: #c7ab74; --line: #4a3a1f; --bg: var(--wax); --surface: #2a2015; --surface-2: #38291a; } }
:root[data-theme="dark"] { --wax: #1f1710; --wax-2: #3a2c17; --ink: #f7ecd2; --ink-2: #c7ab74; --line: #4a3a1f; --bg: var(--wax); --surface: #2a2015; --surface-2: #38291a; }
body { background-image: radial-gradient(circle at 50% 0%, rgb(245 158 11 / .12), transparent 55%); }
.screen { gap: 14px; max-width: 520px; margin-inline: auto; }
.topbar { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.screen-title { font-size: 1.9rem; font-weight: 400; margin-left: 6px; }
.btn { font-weight: 700; } .cta { font-size: 1.15rem; min-height: 52px; }
.hx { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 60px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--wax-2); color: var(--ink); font-family: var(--font-display); font-size: 1.6rem; }
.hx.c { background: var(--honey); color: #3b2a12; }
.hero { text-align: center; padding-top: 6px; } .logo { display: flex; justify-content: center; gap: 4px; } .tagline { color: var(--ink-2); margin-top: 10px; font-weight: 500; }
.panel { background: var(--surface); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-2); }
.daily-card { display: flex; flex-direction: column; gap: 10px; } .daily-head { display: flex; justify-content: space-between; align-items: baseline; } .daily-title { font-family: var(--font-display); font-size: 1.5rem; } .daily-rank { color: var(--ink-2); font-weight: 700; }
.rank-dots { display: flex; gap: 4px; } .rank-dots i { flex: 1; height: 6px; border-radius: 3px; background: var(--line); } .rank-dots i[data-on="true"] { background: var(--honey); }
.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(--honey-deep); font-weight: 700; box-shadow: var(--shadow-1); }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; min-height: 64px; border-radius: 12px; background: var(--surface); color: var(--ink); text-align: left; box-shadow: var(--shadow-1); border: 2px solid transparent; }
.mode b { font-family: var(--font-display); font-size: 1.25rem; font-weight: 400; } .mode span { color: var(--ink-2); font-size: .85rem; line-height: 1.2; } .mode[aria-pressed="true"] { border-color: var(--honey); }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 4px; font-weight: 500; } .opt-row small { display: block; color: var(--ink-2); font-size: .82rem; font-weight: 400; }
.home-actions { display: flex; gap: 8px; } .home-actions .cta { flex: 2; } .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: 6px; }
.hud-title { font-family: var(--font-display); font-size: 1.3rem; } .hud-note { color: var(--ink-2); font-weight: 700; }
.rank { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.rank-name { font-family: var(--font-display); font-size: 1.15rem; min-width: 5.5em; } .rank-pts { font-weight: 700; color: var(--ink-2); min-width: 2.5em; text-align: right; }
.rank-track { position: relative; height: 8px; border-radius: 4px; background: var(--line); } .rank-fill { height: 100%; width: 0; border-radius: 4px; background: var(--honey); transition: width .5s var(--ease-out); }
.rank-track i { position: absolute; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--line); border: 2px solid var(--bg); transform: translateX(-50%); } .rank-track i[data-on="true"] { background: var(--honey); }
.found-strip { display: flex; gap: 6px; align-items: center; min-height: 40px; padding: 6px 10px; border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; white-space: nowrap; cursor: pointer; font-size: .92rem; }
.found-strip span { flex: 0 0 auto; } .found-strip .found-empty { color: var(--ink-2); } .found-strip .pg { color: var(--honey-deep); font-weight: 700; } .found-strip .more { color: var(--ink-2); margin-left: auto; }
.entry { display: flex; align-items: center; justify-content: center; min-height: 48px; font-family: var(--font-display); font-size: clamp(1.6rem, 8vw, 2.2rem); letter-spacing: .06em; text-transform: uppercase; }
.entry-text .c { color: var(--honey-deep); } .entry.anim-shake { animation: shake-x var(--t-slow); }
.caret { width: 2px; height: 1em; background: var(--honey); margin-left: 2px; animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } }
.play-msg { text-align: center; min-height: 1.3em; color: var(--ink-2); font-weight: 600; font-size: .95rem; } .play-msg[data-tone="good"] { color: var(--honey-deep); }
.hive { position: relative; flex: 1 1 auto; min-height: 0; margin-inline: auto; width: 100%; max-width: 320px; }
.hex { position: absolute; width: var(--hw); height: calc(var(--hw) * 1.1547); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--wax-2); color: var(--ink); font-family: var(--font-display); font-size: calc(var(--hw) * .42); text-transform: uppercase; display: flex; align-items: center; justify-content: center; transition: transform var(--t-fast), background var(--t-fast), left .35s var(--ease-out), top .35s var(--ease-out); left: var(--x); top: var(--y); }
.hex:active { transform: scale(.92); } .hex[data-centre="true"] { background: var(--honey); color: #3b2a12; }
.hive[data-shimmer="true"]::after { content: ""; position: absolute; inset: -10%; background: linear-gradient(115deg, transparent 30%, rgb(255 230 150 / .9) 50%, transparent 70%); mix-blend-mode: soft-light; animation: shimmer 1.1s ease-out forwards; pointer-events: none; } @keyframes shimmer { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.float { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); font-family: var(--font-display); font-size: 1.6rem; color: var(--honey-deep); pointer-events: none; animation: float-up 1s var(--ease-out) forwards; } @keyframes float-up { to { transform: translate(-50%, -60px); opacity: 0; } }
.actions { display: flex; justify-content: center; gap: 10px; } .pill { min-height: 48px; padding: 0 22px; background: var(--surface); box-shadow: var(--shadow-1); border: 1px solid var(--line); } .pill.btn-icon { width: 48px; padding: 0; }
.finish { align-self: center; background: transparent; color: var(--ink-2); font-weight: 600; min-height: 40px; padding-bottom: env(safe-area-inset-bottom); }
@media (min-width: 640px) { .hive { max-width: 360px; } }

/* Sheets */
.words-summary { color: var(--ink-2); }
.word-list { display: flex; flex-wrap: wrap; gap: 6px; } .word-list span { padding: 5px 10px; border-radius: 8px; background: var(--surface-2); font-weight: 500; } .word-list span.pg { background: var(--honey); color: #3b2a12; font-weight: 700; }
.badge { display: flex; justify-content: center; } .badge .hx { width: 72px; height: 83px; font-size: 2.2rem; animation: pop var(--t-slow) var(--ease-spring); }
.result-verdict { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 2.8rem); text-align: center; line-height: 1.1; } .result-sub { text-align: center; color: var(--ink-2); font-weight: 500; }
.missed summary { cursor: pointer; font-weight: 700; color: var(--ink-2); margin: 4px 0 8px; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; } .result-actions .cta { grid-column: 1 / -1; }