/* Letterpeak: pixel art over the funfair scene. Frames are stepped box-shadows, never border-radius. */
:root {
  --ink: #050818; --panel: rgba(8, 12, 32, 0.93); --line: #2b3a63; --text: #f4ead0; --muted: #8f9cc4;
  --ui: #ffcf4a; --ui-dark: #b97a1f; --bar: #8c1a2e; --bar-light: #b93348; --bar-dark: #5b0f1e;
  --go: #7fdc4f; --miss: #e2476a; --edge: #17101c;
  --px: "Silkscreen", monospace; --num: "Jersey 25", "Silkscreen", monospace; --mono: "IBM Plex Mono", ui-monospace, monospace;
  --kb: 0px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--ink); color: var(--text); font: 500 14px/1.45 var(--mono); overflow: hidden; overscroll-behavior: none; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
a { color: var(--ui); }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.scan { position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.13) 0 1px, transparent 1px 4px); }

/* header */
.top { position: fixed; z-index: 5; top: 0; left: 0; right: 0; height: 44px; padding: 0 10px; padding-top: env(safe-area-inset-top); display: flex; align-items: center; justify-content: space-between; gap: 8px; background: linear-gradient(rgba(3, 5, 20, 0.9), rgba(3, 5, 20, 0.55) 70%, rgba(3, 5, 20, 0)); }
.top .left, .top .right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { font: 700 17px var(--px); color: var(--ui); text-decoration: none; letter-spacing: 1px; text-shadow: 2px 2px 0 #8c1a2e; }
.dayno { font: 18px var(--num); color: var(--muted); white-space: nowrap; }
.pips { display: flex; gap: 2px; }
.pip { width: 15px; height: 16px; background: var(--hex-dim) center / 100% 100% no-repeat; image-rendering: pixelated; }
.pip.now { background-image: var(--hex-now); animation: blink 1s steps(2) infinite; }
.pip.green { background-image: var(--hex-green); } .pip.yellow { background-image: var(--hex-yellow); } .pip.orange { background-image: var(--hex-orange); } .pip.red { background-image: var(--hex-red); }
.total { font: 22px var(--num); color: var(--ui); min-width: 44px; text-align: right; }
.icon { width: 30px; height: 30px; display: grid; place-items: center; color: var(--text); font: 700 15px var(--px); background: rgba(8, 12, 32, 0.7); box-shadow: 0 -2px 0 var(--line), 0 2px 0 var(--line), -2px 0 0 var(--line), 2px 0 0 var(--line); }
.icon.off .wave { opacity: 0.2; }
@keyframes blink { 50% { filter: brightness(0.7); } }

/* the page over the scene */
#ui { position: fixed; z-index: 3; left: 0; right: 0; top: calc(44px + env(safe-area-inset-top)); bottom: var(--kb); display: flex; flex-direction: column; align-items: center; pointer-events: none; transition: opacity 0.18s; }
#ui > * { pointer-events: auto; }
body.hitting #ui, body.hitting #kb { opacity: 0; pointer-events: none; }
body.hitting #ui > * { pointer-events: none; }
body.viewing #ui { display: none; }
body.sheet #ui { bottom: 0; }

.panel { background: var(--panel); padding: 20px 22px; margin: 12px; box-shadow: 0 -4px 0 var(--line), 0 4px 0 var(--line), -4px 0 0 var(--line), 4px 0 0 var(--line), 0 8px 0 rgba(0, 0, 0, 0.35); max-width: min(440px, calc(100vw - 32px)); }
.btn { font: 700 15px var(--px); padding: 10px 16px; color: var(--text); background: #26305a; box-shadow: 0 -3px 0 #3d4a82, 0 3px 0 #141a36, -3px 0 0 #2f3a6b, 3px 0 0 #1b2247; letter-spacing: 1px; }
.btn:active { transform: translateY(2px); }
.btn.primary { background: var(--ui); color: var(--edge); box-shadow: 0 -3px 0 #fff0a8, 0 3px 0 var(--ui-dark), -3px 0 0 #ffe07a, 3px 0 0 #d99a2b; }
.btn.ghost { background: rgba(8, 12, 32, 0.85); }
.btn:disabled { filter: saturate(0.3) brightness(0.7); cursor: default; }
.link { color: var(--muted); font: 500 13px var(--mono); text-decoration: underline; padding: 6px 4px; }
.link.sure { color: var(--miss); }

/* start */
.start { margin-top: clamp(10px, 7vh, 80px); text-align: center; }
.logo.big { font-size: clamp(26px, 8vw, 40px); margin: 0 0 4px; display: block; text-shadow: 3px 3px 0 #8c1a2e; }
.tag { margin: 0 0 14px; color: var(--muted); }
.how { text-align: left; margin: 0 0 18px; padding-left: 22px; display: grid; gap: 6px; }
.how b { color: var(--ui); font-weight: 600; }
.note { margin: 12px 0 0; color: var(--muted); font-size: 12px; min-height: 1em; }
.start .btn { min-width: 180px; font-size: 18px; padding: 12px 20px; }

/* the play screen: value tab, hexagons, timer tab, clue banner */
.play { --n: 4; --bw: min(560px, calc(100vw - 16px)); --tw: min(46px, calc((var(--bw) - (var(--n) - 1) * 3px) / var(--n))); width: var(--bw); margin-top: clamp(4px, 7vh, 84px); display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
.board { display: flex; flex-direction: column; align-items: center; }
.tabrow { width: calc(var(--n) * var(--tw) + (var(--n) - 1) * 3px); min-width: 150px; display: flex; justify-content: space-between; align-items: flex-end; height: 26px; }
.tabrow.under { align-items: flex-start; height: 24px; margin-bottom: -2px; position: relative; z-index: 1; }
.tab { font: 22px/1 var(--num); padding: 2px 9px 1px; min-width: 58px; text-align: center; background: #f4ead0; color: var(--edge); box-shadow: 0 -2px 0 var(--edge), -2px 0 0 var(--edge), 2px 0 0 var(--edge); letter-spacing: 1px; }
.tab.timer { background: var(--edge); color: var(--text); box-shadow: 0 2px 0 var(--bar-light), -2px 0 0 var(--bar-light), 2px 0 0 var(--bar-light), 0 -2px 0 var(--edge); }
.tab.timer.low { color: #ff5a6e; animation: blink 0.5s steps(2) infinite; }
.tab.drop { animation: drop 0.35s steps(4); }
@keyframes drop { 0% { transform: translateY(-5px); background: #ff93a8; } 100% { transform: none; } }
.wordno { white-space: nowrap; font: 400 11px var(--px); color: var(--muted); letter-spacing: 2px; padding-bottom: 3px; text-shadow: 1px 1px 0 #000; }
.tiles { display: flex; gap: 3px; justify-content: center; padding: 2px 0; }
.hex { width: var(--tw); height: calc(var(--tw) * 14 / 13); flex: none; display: grid; place-items: center; background: var(--hex-cream) center / 100% 100% no-repeat; image-rendering: pixelated; font: 700 calc(var(--tw) * 0.52) / 1 var(--px); color: var(--edge); padding-bottom: 1px; }
.hex.green { background-image: var(--hex-green); } .hex.red { background-image: var(--hex-red); color: #fff; } .hex.yellow { background-image: var(--hex-yellow); } .hex.orange { background-image: var(--hex-orange); }
.hex.pop { animation: pop 0.32s steps(5); }
.hex.flip { animation: flip 0.3s steps(6); }
.hex.bad { animation: bad 0.45s steps(4); }
@keyframes pop { 0% { transform: scale(0.3); } 60% { transform: scale(1.25); } 100% { transform: none; } }
@keyframes flip { 0% { transform: scaleY(1); } 50% { transform: scaleY(0.05); } 100% { transform: scaleY(1); } }
@keyframes bad { 0%, 60% { background-image: var(--hex-red); } }
.tiles.shake { animation: shake 0.32s steps(6); }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.clue { width: 100%; background: var(--bar); color: var(--text); font: 600 clamp(13px, 3.9vw, 16px) / 1.35 var(--mono); text-transform: uppercase; letter-spacing: 0.4px; padding: 10px 14px; min-height: 58px; display: grid; align-items: center; text-align: center; box-shadow: 0 -3px 0 var(--bar-light), 0 3px 0 var(--bar-dark), -3px 0 0 var(--bar), 3px 0 0 var(--bar), 0 -6px 0 var(--edge), 0 6px 0 var(--edge), -6px 0 0 var(--edge), 6px 0 0 var(--edge); margin: 6px 0; }
.gap { height: 16px; flex: none; }
.answer { display: flex; gap: 10px; align-items: stretch; }
.entry { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: rgba(5, 8, 24, 0.94); box-shadow: 0 -3px 0 var(--go), 0 3px 0 var(--go), -3px 0 0 var(--go), 3px 0 0 var(--go); font: 700 clamp(17px, 5.2vw, 22px) / 1 var(--px); min-height: 46px; }
.entry .prompt { color: var(--go); }
.typed { letter-spacing: 3px; white-space: nowrap; overflow: hidden; }
.cursor { width: 10px; height: 20px; background: var(--go); animation: blink 0.9s steps(2) infinite; flex: none; }
.count { margin-left: auto; font: 18px var(--num); color: var(--muted); letter-spacing: 0; }
.entry.full .count { color: var(--go); }
.buy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 11px; line-height: 1.1; padding: 5px 12px; background: var(--ui); color: var(--edge); box-shadow: 0 -3px 0 #fff0a8, 0 3px 0 var(--ui-dark), -3px 0 0 #ffe07a, 3px 0 0 #d99a2b; white-space: nowrap; }
.buy b { font: 20px/1 var(--num); letter-spacing: 1px; }
.result { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.verdict { font: 700 15px var(--px); padding: 8px 10px; background: rgba(5, 8, 24, 0.94); flex: 1; min-height: 46px; display: flex; align-items: center; gap: 10px; box-shadow: 0 -3px 0 var(--line), 0 3px 0 var(--line), -3px 0 0 var(--line), 3px 0 0 var(--line); }
.verdict .pts { font: 26px/1 var(--num); margin-left: auto; }
.underline { display: flex; justify-content: space-between; align-items: center; min-height: 34px; padding-top: 4px; gap: 10px; }
.msg { font-size: 12.5px; color: var(--text); text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; }
.msg.bad { color: #ff8fa3; } .msg.good { color: var(--go); }
.play.done .answer, .play.done #btn-pass, .play.done .tab.timer, .play.done .tab.value { display: none; }
.play.done .tabrow.under { height: 6px; }

/* the on-screen keyboard (touch screens): it sits on the scene's plain ground */
.kb { position: fixed; z-index: 4; left: 0; right: 0; bottom: 0; padding: 6px 3px calc(6px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(5, 8, 24, 0.82), rgba(5, 8, 24, 0.96)); display: none; transition: opacity 0.18s; }
body.touch .kb { display: block; }
body.touch.nokeys .kb { visibility: hidden; }
.kb .row { display: flex; gap: 4px; justify-content: center; margin-bottom: 5px; padding: 0 2px; }
.kb .row:nth-child(2) { padding: 0 5%; }
.key { flex: 1; height: 46px; font: 700 15px var(--px); color: var(--text); background: #2a3462; box-shadow: 0 -2px 0 #44518d, 0 3px 0 #131935; }
.key:active, .key.down { background: var(--ui); color: var(--edge); transform: translateY(2px); }
.key.wide { flex: 1.6; font-size: 11px; }
.key.enter { background: var(--go); color: var(--edge); box-shadow: 0 -2px 0 #c6f59e, 0 3px 0 #3f9a2c; }
body.touch .play { flex: 1; margin-top: 2px; }
body.touch .gap { flex: 1; }
body.touch .underline { min-height: 30px; padding-top: 2px; }
/* on a phone the start and end panels sit low, on the plain ground, so the striker and the man stay in view */
body.touch #ui { justify-content: flex-start; }
body.touch .start, body.touch .end { margin-top: auto; margin-bottom: calc(14px + env(safe-area-inset-bottom)); }

/* the end of the day */
.end { margin-top: clamp(4px, 4vh, 50px); text-align: center; width: min(440px, calc(100vw - 24px)); max-height: calc(100% - 20px); overflow: auto; }
.end .band { font: 700 clamp(16px, 5vw, 21px) var(--px); color: var(--ui); margin: 0 0 2px; }
.end .score { font: clamp(46px, 14vw, 64px) / 1 var(--num); margin: 2px 0; }
.end .score small { font-size: 0.5em; color: var(--muted); }
.end .rows { display: grid; gap: 3px; margin: 10px auto 12px; text-align: left; width: fit-content; }
.end .rowx { display: grid; grid-template-columns: 20px minmax(108px, auto) 46px; gap: 10px; align-items: center; font: 700 13px var(--px); }
.end .rowx .pip { width: 17px; height: 18px; }
.end .rowx .pts { font: 20px/1 var(--num); text-align: right; color: var(--muted); }
.end .shares { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 6px 0 12px; }
.end .shares .btn { font-size: 12px; padding: 9px 11px; }
.end .meta { color: var(--muted); font-size: 12px; display: grid; gap: 3px; }
.end .meta b { color: var(--text); font: 18px var(--num); font-weight: 400; }
.tower { position: fixed; z-index: 6; left: 50%; bottom: 24px; transform: translateX(-50%); }

.help { color: var(--text); border: 0; max-width: min(480px, calc(100vw - 32px)); }
.help::backdrop { background: rgba(2, 4, 16, 0.7); }
.help h2 { font: 700 18px var(--px); color: var(--ui); margin: 0 0 8px; }
.help ul { padding-left: 20px; display: grid; gap: 6px; }
.help b { color: var(--ui); font-weight: 600; }
.help .squares { color: var(--muted); font-size: 13px; }

@media (min-width: 900px) and (min-height: 700px) {
  .play { --bw: 640px; --tw: min(58px, calc((var(--bw) - (var(--n) - 1) * 4px) / var(--n))); }
  .tiles { gap: 4px; } .tabrow { width: calc(var(--n) * var(--tw) + (var(--n) - 1) * 4px); height: 32px; }
  .tab { font-size: 28px; min-width: 72px; } .clue { font-size: 19px; padding: 14px 18px; min-height: 70px; }
  .entry { min-height: 54px; font-size: 24px; } .buy { font-size: 12px; padding: 6px 16px; } .buy b { font-size: 24px; }
  .msg { font-size: 14px; } .logo { font-size: 20px; } .pip { width: 19px; height: 20px; } .total { font-size: 26px; }
  .panel { padding: 26px 30px; max-width: 500px; } body { font-size: 15px; }
  .end { width: 500px; } .end .rowx { font-size: 15px; grid-template-columns: 22px minmax(140px, auto) 60px; } .end .rowx .pts { font-size: 24px; }
}
@media (max-width: 420px) {
  .logo { font-size: 14px; } .dayno { display: none; } .top .right { gap: 6px; } .pip { width: 13px; height: 14px; }
  .panel { padding: 16px; }
}
@media (max-height: 620px) and (min-width: 700px) { .play { margin-top: 4px; } .start { margin-top: 6px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
body.reduced * { animation: none !important; transition: none !important; }