/* Phase 2: mid-2000s Flash arena look — outlined, gradient-filled, a fixed 800×500 stage */
:root {
  --ink: #24170f; --red: #d8332a; --red-d: #9e1d17; --cream: #fff4cf;
  --display: "Luckiest Guy", Impact, sans-serif;
  --ui: Verdana, Tahoma, sans-serif;
  --outline: -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink),
             0 3px 0 var(--ink), 0 -3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink);
  --outline-sm: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #10131c radial-gradient(ellipse at 50% 40%, #2a3247 0%, #10131c 70%);
  color: #cfd6e6; font-family: var(--ui);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  overflow: hidden;
}
.caption { margin: 0; font-size: 12px; color: #7f8aa3; text-align: center; }
.caption a { color: inherit; }
/* row under the game box: the version-swap button sits at its left edge */
#below { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 30px; }
#below .caption { text-align: right; }
#below .left { position: relative; display: flex; align-items: center; gap: 8px; flex: none; }
.btn.sound { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border-radius: 7px;
  background: linear-gradient(#5b6b8c, #3a4766); color: #fff; }
/* settings menu: pops up above the menu button */
#settings { position: absolute; z-index: 20; left: 0; bottom: calc(100% + 10px); width: 230px; padding: 10px;
  border: 3px solid #000; border-radius: 10px; background: #1c2130; box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; gap: 6px; }
#settings[hidden] { display: none; }
#settings .set-title { font: bold 11px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: #7f8aa3; padding: 0 4px 2px; }
.tgl { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 8px;
  border: 0; border-radius: 6px; background: transparent; color: #e8ecf5; font: bold 13px var(--ui); text-align: left; cursor: pointer; }
.tgl:hover { background: rgba(255, 255, 255, .07); }
.tgl small { display: block; font-weight: normal; font-size: 10.5px; color: #8b95ad; margin-top: 2px; }
.tgl i { flex: none; position: relative; width: 38px; height: 22px; border-radius: 11px; background: #4a5266; transition: background .2s; }
.tgl i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform .2s; }
.tgl[aria-checked="true"] i { background: #3fae2c; }
.tgl[aria-checked="true"] i::after { transform: translateX(16px); }
.btn.swap { flex: none; font-size: 14px; padding: 5px 12px 2px; border-radius: 7px; text-decoration: none; white-space: nowrap;
  background: linear-gradient(#8fe86a, #3fae2c 55%, #26801a);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 3px 0 var(--ink); }
.btn.swap:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 1px 0 var(--ink); }

/* ---------- the two versions ---------- */
/* Big Hungry Cartographer: same game, glasses + map instead of the hat, and a plain backdrop */
.bhc-only { display: none; }
.bhc .bhc-only { display: inline; }
.bhc .bhf-only { display: none; }
.bhc #stage { background: #f6f3ea; }
.bhc #sky, .bhc #sun, .bhc #scenes, .bhc #floor, .bhc #tumble, .bhc #sceneBanner { display: none; }
/* the spinning globe (built by globe.js); land drifts west→east, clouds a bit quicker */
#globeBg { position: absolute; inset: 0; pointer-events: none; }
#globeBg svg { display: block; }
#globeBg .spin { animation: globe-spin 40s linear infinite; }
#globeBg .spin.cloud { animation-duration: 26s; }
@keyframes globe-spin { from { transform: translateX(-960px); } to { transform: translateX(0); } }
#globeBg .star { animation: twinkle 2.4s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }

/* the fixed "Flash window" */
#frame { position: relative; overflow: hidden; border: 3px solid #000; background: #000;
  box-shadow: 0 0 0 2px #4a5470, 0 14px 40px rgba(0, 0, 0, .7); }
#stage { position: absolute; left: 0; top: 0; width: 800px; height: 500px; transform-origin: 0 0;
  overflow: hidden; user-select: none; font-family: var(--ui); }

/* ---------- backdrop ---------- */
#sky { position: absolute; inset: 0;
  background: linear-gradient(#1593e0 0%, #45b9f2 42%, #a9e6ff 64%, #eafaff 72%); }
#sun { position: absolute; left: 10px; top: -25px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 252, 220, 1) 0 30px, rgba(255, 240, 160, .8) 40px,
    rgba(255, 232, 130, .3) 78px, rgba(255, 232, 130, 0) 120px); }
#sun::after { content: ""; position: absolute; left: 92px; top: 92px; width: 56px; height: 56px; border-radius: 50%;
  border: 3px solid #e09a1a; background: radial-gradient(circle at 38% 35%, #fffde8, #ffe46a 55%, #ffc21a); }
.layer { position: absolute; left: 0; top: 0; height: 500px; will-change: transform; }
.layer svg { display: block; }
#world.hide { visibility: hidden; }

/* ---------- score-driven backdrops (built in scenes.js) ---------- */
#scenes .scene { position: absolute; left: 0; top: 0; height: 500px; opacity: 0; transition: opacity 1.4s ease; }
#scenes .scene.on { opacity: 1; }
#scenes.instant .scene, #tumble.instant { transition: none; }
.sprite { position: absolute; pointer-events: none; }
.sprite svg { display: block; width: 100%; height: 100%; overflow: visible; }
#tumble { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
#tumble.on { opacity: 1; }
.tw { position: absolute; left: 0; top: var(--y); width: var(--s); height: var(--s);
  animation: twx var(--d) linear var(--delay) infinite; }
.twb { width: 100%; height: 100%; animation: twb .75s infinite; }
.tw svg { display: block; width: 100%; height: 100%; animation: spin 1.1s linear infinite; }
@keyframes twx { from { transform: translateX(-90px); } to { transform: translateX(900px); } }
@keyframes twb { 0% { transform: translateY(0); animation-timing-function: ease-out; }
  50% { transform: translateY(-24px); animation-timing-function: ease-in; } 100% { transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
/* dolphins: the clip box's bottom edge is the waterline, so underwater parts are hidden */
.dclip { position: absolute; overflow: hidden; }
.dclip .dj { left: 0; bottom: 0; width: var(--u); height: calc(var(--u) * .7);
  animation: djump var(--d) ease-in-out var(--delay) infinite; }
@keyframes djump {
  0% { transform: translate(0, calc(var(--u) * .9)) rotate(-50deg); }
  10% { transform: translate(calc(var(--u) * .3), calc(var(--u) * .1)) rotate(-40deg); }
  22% { transform: translate(calc(var(--u) * .65), calc(var(--u) * -.75)) rotate(-5deg); }
  34% { transform: translate(calc(var(--u) * 1), calc(var(--u) * -.1)) rotate(35deg); }
  44%, 100% { transform: translate(calc(var(--u) * 1.3), calc(var(--u) * .9)) rotate(55deg); }
}
.dclip .splash { bottom: 0; width: calc(var(--u) * .6); height: calc(var(--u) * .35); opacity: 0;
  animation: splash var(--d) linear var(--delay) infinite; }
.dclip .splash.in { left: calc(var(--u) * .15); }
.dclip .splash.out { left: calc(var(--u) * 1.4); animation-name: splash2; }
@keyframes splash { 0% { opacity: 0; } 4% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes splash2 { 0%, 34% { opacity: 0; } 40% { opacity: 1; } 52%, 100% { opacity: 0; } }
/* tiny worms trembling in shock; .r turns them to face right once Tex is past them */
.tiny svg { animation: tremble var(--sh) linear infinite alternate; }
.tiny.r svg { animation-name: tremble-r; }
@keyframes tremble { from { transform: translateX(-.7px); } to { transform: translateX(.7px); } }
@keyframes tremble-r { from { transform: scaleX(-1) translateX(-.7px); } to { transform: scaleX(-1) translateX(.7px); } }
.tiny .gasp { position: absolute; left: 50%; top: -40%; transform: translateX(-50%); font-family: var(--display); font-weight: normal;
  color: #ffe14d; -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke; animation: gasp 1s ease-in-out infinite; }
@keyframes gasp { 0%, 100% { margin-top: 0; } 50% { margin-top: -4px; } }
.cave .cpup { transform: translate(var(--px, 0px), 2px); transition: transform .3s ease-out; }

#sceneBanner { position: absolute; left: 50%; top: 6px; opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 4px 18px 0; border: 3px solid var(--ink); border-radius: 6px;
  background: linear-gradient(#ffd84a, #f08a12); color: #fff; font-family: var(--display); font-size: 24px; letter-spacing: 1px;
  text-shadow: 2px 2px 0 var(--ink); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--ink);
  transform: translateX(-50%); }
#sceneBanner.show { animation: banner 3s ease forwards; }
@keyframes banner {
  0% { opacity: 0; transform: translateX(-50%) scale(.3) rotate(-6deg); }
  10% { opacity: 1; transform: translateX(-50%) scale(1.15) rotate(2deg); }
  16%, 85% { opacity: 1; transform: translateX(-50%) scale(1) rotate(-1deg); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(1) rotate(-1deg); }
}

/* ---------- stations: one prompt plank + one blank per word ---------- */
.station { position: absolute; top: 0; width: 800px; height: 500px; }
.rope { position: absolute; top: -10px; width: 5px; height: 66px; border: 1px solid var(--ink);
  background: repeating-linear-gradient(160deg, #d8b47a 0 4px, #8a6635 4px 7px); }
.rope.l { left: 388px; } .rope.r { left: 688px; }
.rope { transition: height .35s ease-out; }
.plank, .board, .post {
  border: 3px solid var(--ink); border-radius: 10px;
  background: repeating-linear-gradient(0deg, transparent 0 26px, rgba(60, 30, 10, .22) 26px 28px),
    linear-gradient(#d39a5c, #a8693a 60%, #8c5428);
  box-shadow: inset 0 3px 0 rgba(255, 235, 200, .45), inset 0 -5px 0 rgba(0, 0, 0, .25), 0 6px 0 rgba(0, 0, 0, .2);
}
.plank { position: absolute; left: 350px; top: 50px; width: 380px; height: 112px; transform: rotate(-1.2deg);
  transition: top .35s ease-out; }
/* between rounds the sign hangs down on longer ropes and the typing board is put away */
.station.ready .plank { top: 150px; }
.station.ready .rope { height: 166px; }
.station.ready .blank, .station.ready .err, .station.ready .rsign { visibility: hidden; opacity: 0; transform: rotate(.6deg) scale(.85); }
.plank::before, .plank::after { content: ""; position: absolute; top: 8px; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--ink); background: radial-gradient(circle at 35% 35%, #f4f4f4, #777); }
.plank::before { left: 34px; } .plank::after { right: 34px; }

.rtag { position: absolute; left: 50%; top: -15px; transform: translateX(-50%) rotate(1.5deg);
  padding: 2px 10px; border: 2px solid var(--ink); border-radius: 3px;
  background: linear-gradient(#ef4a3f, #c22a22); color: #fff; white-space: nowrap;
  font: bold 12px var(--ui); letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 1px 1px 0 var(--red-d); box-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.pword { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-top: 10px;
  font-family: var(--display); font-size: 58px; letter-spacing: 2px; color: var(--cream);
  text-shadow: var(--outline), 4px 8px 0 rgba(0, 0, 0, .35); }
/* Cartographer prompt: flag + country name */
.pword.geo { gap: 12px; padding: 14px 16px 4px; }
.pword.geo .flag { flex: none; width: 76px; height: 57px; border: 3px solid var(--ink); border-radius: 4px;
  background: #ddd; box-shadow: 3px 4px 0 rgba(0, 0, 0, .3); object-fit: cover; }
.pword.geo .pname { line-height: 1.05; letter-spacing: 1px; text-align: center; min-width: 0; overflow-wrap: break-word; }
.board .v { font-weight: normal; color: #ffe9a8; font-size: 10px; }
.go { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(1deg); }
.go:active { transform: translate(-50%, calc(-50% + 3px)) rotate(1deg); }
.station.ready .pword { display: none; }
.station:not(.ready) .go { display: none; }

/* the rule sign hangs between the prompt and the blank, pointing down at where you type */
.rsign { position: absolute; left: 540px; top: 167px; transform: translateX(-50%) rotate(-.6deg); width: max-content; max-width: 430px;
  padding: 4px 12px 5px; border: 2px solid var(--ink); border-radius: 4px; text-align: center; white-space: nowrap;
  background: linear-gradient(#ef4a3f, #c22a22); color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .3);
  transition: opacity .2s .15s; }
.rsign::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 14px; height: 14px; margin-left: -7px;
  background: #c22a22; border: 2px solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.rs-title { font: bold 13px var(--ui); letter-spacing: .06em; text-transform: uppercase; text-shadow: 1px 1px 0 var(--red-d); }
.rs-hint { font: 11px var(--ui); margin-top: 1px; white-space: normal; }
.rs-hint b { color: #ffe680; }
.rs-hint .pat { margin-left: 2px; }

.blank { position: absolute; left: 330px; top: 242px; width: 420px; height: 70px; margin: 0;
  border: 3px solid var(--ink); border-radius: 8px; background: linear-gradient(#fffdf2, #f3e7c2);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .08), 0 5px 0 rgba(0, 0, 0, .25); transform: rotate(.6deg);
  transition: opacity .2s .15s, transform .25s .15s cubic-bezier(.3, 1.6, .5, 1); }
.blank::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 13px;
  border-bottom: 3px dashed rgba(36, 23, 15, .3); pointer-events: none; }
.station.live .blank { box-shadow: 0 0 0 4px rgba(255, 255, 255, .7), 0 5px 0 rgba(0, 0, 0, .25); }
.word, .eaten { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; outline: none;
  background: transparent; padding: 12px 18px 0; white-space: pre;
  font-family: var(--display); font-size: 42px; line-height: 56px; letter-spacing: 2px; color: var(--ink);
  caret-color: var(--red); }
/* the placeholder sits above the dashed line; typed letters sit on it */
.word:placeholder-shown { padding-top: 0; line-height: 44px; }
.word::placeholder { font: bold 15px var(--ui); color: #b3a27c; letter-spacing: 0; }

.err { position: absolute; left: 340px; top: 324px; max-width: 410px; padding: 3px 8px 3px 3px;
  border: 2px solid var(--ink); border-radius: 4px; background: #fff; color: var(--ink);
  font: bold 12px var(--ui); box-shadow: 0 3px 0 rgba(0, 0, 0, .25); }
.err .nope { margin-right: 6px; padding: 1px 6px; border-radius: 2px; background: var(--red); color: #fff; }
.err .fix { padding: 0 5px; border: 1px solid var(--ink); border-radius: 3px; background: #ffcf4a; color: var(--ink);
  font: inherit; cursor: pointer; box-shadow: 0 2px 0 var(--ink); }
.err .fix:hover { background: #ffe08a; }
.word.misspelt { text-decoration: underline wavy #e0281e; text-decoration-thickness: 2px; text-underline-offset: 6px; cursor: pointer; }
.err .pts { margin-right: 6px; padding: 1px 6px; border-radius: 2px; background: #2f9e44; color: #fff; }
.err .key { padding: 0 4px; border: 1px solid #999; border-radius: 3px; color: #777; font-size: 10px; }
.shake { animation: shake .3s; }

/* ---------- final scoreboard ---------- */
.board { position: absolute; left: 300px; top: 22px; width: 470px; height: 330px; padding: 22px 22px 0;
  text-align: center; transform: rotate(.8deg); }
.post { position: absolute; top: 330px; width: 24px; height: 90px; border-radius: 4px; }
.post.l { left: 370px; } .post.r { left: 690px; }
.board .total { font-family: var(--display); font-size: 64px; line-height: 64px; color: var(--cream);
  text-shadow: var(--outline), 4px 7px 0 rgba(0, 0, 0, .35); }
.board .sub { font: bold 11px var(--ui); color: var(--cream); text-shadow: var(--outline-sm); margin: 4px 0 6px; }
.board .top { display: flex; align-items: center; justify-content: space-around; gap: 8px; margin-bottom: 4px; }
.board .bell svg { display: block; }
.board .pct { margin-top: 2px; font: bold 11px var(--ui); color: var(--cream); text-shadow: var(--outline-sm); }
.board .pct b { color: #ffd76a; }
.board .pct.wait { width: 210px; height: 82px; display: flex; align-items: center; justify-content: center; margin: 0; opacity: .8; }
.board table { width: 100%; border-collapse: collapse; font: bold 11px var(--ui); color: var(--cream);
  text-shadow: var(--outline-sm); text-align: left; }
.board th { color: #ffd76a; font-size: 10px; text-transform: uppercase; }
.board td, .board th { padding: 2px 4px; border-bottom: 1px solid rgba(0, 0, 0, .25); }
.board .num { text-align: right; }
.board .miss td { opacity: .6; }
.board .btn { margin-top: 10px; font-size: 22px; padding: 6px 18px 2px; }

/* ---------- chunky button ---------- */
.btn { font-family: var(--display); font-size: 30px; letter-spacing: 1px; color: #fff; cursor: pointer;
  padding: 8px 26px 4px; border: 3px solid var(--ink); border-radius: 10px;
  background: linear-gradient(#ff6b5c, #d8332a 55%, #a81f18);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .25), 0 5px 0 var(--ink);
  text-shadow: 2px 2px 0 var(--ink); }
.btn:hover { filter: brightness(1.08); }
.btn:active { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .25), 0 2px 0 var(--ink); }
.btn:disabled { filter: grayscale(.8); cursor: default; }
.btn:focus-visible { outline: 3px dashed #fff; outline-offset: 4px; }
/* Start/Continue is focused by the game itself so Enter works; it doesn't need the outline */
.go.btn:focus-visible { outline: none; }
.btn small { display: block; font-family: Verdana, sans-serif; font-size: 10px; letter-spacing: 0; text-shadow: 1px 1px 0 var(--ink); opacity: .9; margin: 1px 0 3px; }
.btn.alt, .board .share { background: linear-gradient(#5cc8ff, #2a86d8 55%, #1a5aa8); }
#intro .modes { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: -6px; }
#intro .modes #startBtn { font-size: 30px; padding: 7px 30px 2px; }
#intro .modes #startBtn.fed { background: linear-gradient(#b4b8c0, #868b95 55%, #5e636c); }
#intro .modes #bonusBtn { font-size: 17px; padding: 5px 16px 1px; border-radius: 8px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 4px 0 var(--ink); }
#intro .modes #bonusBtn small { font-size: 9px; margin-bottom: 2px; }
#intro .rules[hidden], #intro .modes[hidden] { display: none; }
/* bonus-game picker (replaces the rules + mode buttons while open) */
#bonusPick { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 2px; }
#bonusPick[hidden] { display: none; }
#bonusPick .bp-title { font-family: var(--display); font-size: 26px; color: var(--cream); text-shadow: var(--outline), 3px 5px 0 rgba(0, 0, 0, .35); }
#bonusPick .bp-sub { max-width: 400px; padding: 3px 8px; border: 1px solid #000; border-radius: 2px; background: rgba(20, 14, 8, .8);
  font: bold 11px var(--ui); color: #fff; }
#bonusGrid { display: grid; grid-template-columns: repeat(2, 170px); gap: 10px 12px; margin-top: 4px; }
#bonusGrid .btn { font-size: 20px; padding: 5px 10px 1px; }
#bonusGrid .btn.played { background: linear-gradient(#b9a68a, #8a7354 55%, #5e4a32); }
#bonusGrid .btn.zen { background: linear-gradient(#a8dcb0, #5fae78 55%, #3d8a5a); }
#bonusGrid .btn.zen:hover { background: linear-gradient(#b8e6c0, #6dbd86 55%, #469866); }
#bonusGrid .btn.zen.played { background: linear-gradient(#b5c9b4, #7f9a80 55%, #5b735c); }
#bonusPick .back { font-size: 15px; padding: 4px 16px 1px; border-radius: 7px; background: linear-gradient(#b9a68a, #8a7354 55%, #5e4a32);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 0 rgba(0, 0, 0, .25), 0 3px 0 var(--ink); }
.board .btns { display: flex; justify-content: center; gap: 8px; }
.board .btns .btn { font-size: 17px; padding: 6px 12px 2px; white-space: nowrap; }
.board .menu { background: linear-gradient(#b9a68a, #8a7354 55%, #5e4a32); }

/* ---------- worm + effects ---------- */
#wormSvg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
#fx { position: absolute; inset: 0; pointer-events: none; }
#fx span { position: absolute; left: 0; top: 0; font-family: var(--display); font-size: 42px; color: var(--ink);
  will-change: transform; }

/* ---------- HUD ---------- */
#hud { position: absolute; left: 0; top: 0; right: 0; height: 40px; pointer-events: none; }
.banner { position: absolute; top: 8px; padding: 3px 12px 1px; border: 2px solid var(--ink); border-radius: 3px;
  color: #fff; font: bold 12px var(--ui); letter-spacing: .06em; text-transform: uppercase;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .5); box-shadow: 0 3px 0 rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .35); }
.banner b { margin-left: 4px; font-family: var(--display); font-weight: normal; font-size: 20px; letter-spacing: 1px; }
.banner .of { font-family: var(--display); font-size: 14px; }
#roundBanner { left: 8px; background: linear-gradient(#ef4a3f, #b8241d); }
#scoreBanner { right: 8px; background: linear-gradient(#4b8ff0, #2453a8); }

#meter { position: absolute; left: 767px; top: 60px; width: 24px; height: 300px; overflow: hidden;
  border: 2px solid var(--ink); border-radius: 4px; background: linear-gradient(90deg, #2b2b38, #454558);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
#meterFill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background-color: #5fd04a;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 60%); }
#meter .lbl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: bold 12px var(--ui); line-height: 15px; color: #fff; text-shadow: var(--outline-sm); }
#secs { position: absolute; left: 758px; top: 366px; width: 42px; text-align: center;
  font-family: var(--display); font-size: 22px; color: #fff; text-shadow: var(--outline-sm), 2px 2px 0 #000; }
#secs.low { color: #ff6b5c; }

#status { position: absolute; left: 0; right: 0; bottom: 0; height: 28px; padding: 6px 10px 0;
  border-top: 2px solid var(--ink); background: rgba(28, 18, 10, .8); color: #fff; font: 12px var(--ui);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#status::before { content: "» "; color: #ffcf4a; font-weight: bold; }
#status b { color: #ffcf4a; }
.pat { padding: 0 4px; border: 1px solid #000; border-radius: 2px; background: var(--cream); color: var(--ink);
  font: bold 11px "Courier New", monospace; }

/* ---------- title screen + wipe ---------- */
#intro { position: absolute; left: 280px; top: 34px; width: 500px; text-align: center; }
/* doomscrolling: hidden until he's been left alone on the title screen (game.js adds .scrolling) */
#arm, #phone, #glow { opacity: 0; transition: opacity .35s, transform .5s cubic-bezier(.3, 1.4, .5, 1); }
#arm, #phone { transform: translate(-30px, 70px); }
#head.scrolling #arm, #head.scrolling #phone { opacity: 1; transform: none; }
#head.scrolling #glow { opacity: 1; transition-delay: .35s; }
#glow .tint { fill: #bfe3ff; opacity: .6; animation: reelTint 7.2s step-end infinite; }
#glow .reel { animation: reelScroll 7.2s infinite; }
/* each "swipe" flicks the content up 60, then he watches for a bit; 4 swipes = one 240 loop */
@keyframes reelScroll {
  0% { transform: translateY(0); } 5% { transform: translateY(-60px); } 25% { transform: translateY(-60px); }
  30% { transform: translateY(-120px); } 50% { transform: translateY(-120px); } 55% { transform: translateY(-180px); }
  75% { transform: translateY(-180px); } 80% { transform: translateY(-240px); } 100% { transform: translateY(-240px); }
}
@keyframes reelTint { 0% { fill: #bfe3ff; } 5% { fill: #ffd0ec; } 30% { fill: #d4ffd2; } 55% { fill: #fff0b0; } 80% { fill: #bfe3ff; } }
/* Tex's speech bubble on the title screen (below and right of his head, placed by game.js) */
#bubble { position: absolute; z-index: 5; width: max-content; max-width: 180px; padding: 6px 10px;
  border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink);
  font: bold 13px/1.25 var(--ui); text-align: center; box-shadow: 0 3px 0 rgba(0, 0, 0, .25); pointer-events: none;
  transform-origin: 20px 0; animation: bubblePop .25s cubic-bezier(.3, 1.6, .5, 1); }
#bubble::after { content: ""; position: absolute; z-index: -1; left: 16px; top: -9px; width: 14px; height: 14px;
  background: #fff; border: solid var(--ink); border-width: 2.5px 0 0 2.5px; transform: rotate(45deg); }
#bubble[hidden] { display: none; }
@keyframes bubblePop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#intro[hidden] { display: none; }
#intro .plainTitle { display: none; }
#intro .logo { width: 470px; height: auto; display: block; margin: 0 auto; overflow: visible; }
#intro .rules { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 4px 0 18px; }
#intro .rules span { padding: 3px 8px; border: 1px solid #000; border-radius: 2px; background: rgba(20, 14, 8, .8);
  color: #fff; font: bold 12px var(--ui); text-align: left; }
#intro .rules b { color: #ffcf4a; }
#wipe { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .25s; }
#wipe.on { opacity: 1; }

@keyframes bob { from { transform: translateY(0); } to { transform: translateY(7px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---------- tall layout (phones held upright): a 480×820 stage, see TALL in game.js ---------- */
.tall body { justify-content: flex-start; gap: 6px; padding-top: 3px; }
.tall #stage { width: 480px; height: 820px; }
.tall #world, .tall .station { height: 820px; }
.tall .station { width: 480px; }
/* the 500-tall backdrops sit at the bottom of the stage, under more sky */
.tall #scenes, .tall #floor { top: 320px; }
.tall #tumble { top: 320px; bottom: auto; height: 500px; }
.tall #globeBg { left: -280px; top: 280px; right: auto; bottom: auto; width: 800px; height: 500px; }
/* Cartographer: space fills the whole tall stage (the globe's own backdrop only covers 800×500) */
.tall.bhc #stage { background: radial-gradient(circle at 50% 72%, #2b4f9e 0, #16285c 330px, #0a1230 640px); }
.tall #globeBg svg > rect { fill: none; }
/* timer: a bar across the top instead of down the side */
.tall #meter { left: 10px; top: 44px; width: 412px; height: 18px; }
.tall #meterFill { top: 0; bottom: 0; right: auto; width: 100%; height: auto;
  background-image: linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 60%); }
.tall #meter .lbl { flex-direction: row; gap: 5px; font-size: 11px; }
.tall #secs { left: 426px; top: 38px; width: 48px; }
.tall #stage.menu #meter, .tall #stage.menu #secs { visibility: hidden; }
.tall #sceneBanner { top: 70px; font-size: 20px; }
/* a round: sign, rule and typing box stacked at the top */
.tall .rope.l { left: 60px; } .tall .rope.r { left: 414px; }
.tall .rope { height: 98px; }
.tall .station.ready .rope { height: 198px; }
.tall .plank { left: 20px; top: 84px; width: 440px; height: 116px; }
.tall .station.ready .plank { top: 184px; }
.tall .rsign { left: 240px; top: 224px; max-width: 450px; padding: 6px 14px 7px; }
.tall .rs-title { font-size: 14px; }
.tall .rs-hint { font-size: 12.5px; margin-top: 2px; }
.tall .blank { left: 20px; top: 318px; width: 440px; height: 72px; }
.tall .err { left: 24px; top: 402px; max-width: 432px; font-size: 13px; }
/* final scoreboard */
.tall .board { left: 10px; top: 58px; width: 460px; height: auto; padding: 22px 14px 16px; }
.tall .post { top: 440px; height: 120px; }
.tall .post.l { left: 70px; } .tall .post.r { left: 386px; }
/* title screen */
.tall #intro { left: 0; top: 40px; width: 480px; }
.tall #intro .logo { width: 400px; }
.tall #intro .rules { margin: 2px 0 10px; }
.tall #intro .modes { gap: 9px; }
.tall.bhc #intro .rules span { font-size: 12px; }
.tall #intro .rules span { font-size: 13px; }
.tall #status { height: 30px; padding-top: 7px; font-size: 13px; line-height: 16px; }
/* under the game box: keep just the buttons and the privacy link */
.tall #below .caption > span { display: none; }

/* ---------- simple look (settings menu): the bare game, nothing to draw the eye in public ---------- */
/* plain boxes and text in the style of a school web form: no Tex, no scenery, no effects */
.plain { --p-ink: #2d3b45; --p-sub: #6b7780; --p-line: #c7cdd1; --p-bg: #f5f5f5; --p-blue: #0374b5;
  --p-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.plain body { background: var(--p-bg); color: var(--p-ink); font-family: var(--p-font); }
.plain .caption { color: var(--p-sub); }
.plain #frame { border-color: var(--p-line); background: #fff; box-shadow: none; }
.plain #stage, .plain.bhc #stage, .plain.tall.bhc #stage { background: #fff; font-family: var(--p-font); }
.plain #sky, .plain #sun, .plain #scenes, .plain #floor, .plain #tumble, .plain #wormSvg, .plain #fx, .plain #sceneBanner,
.plain #bubble, .plain #globeBg, .plain .rope, .plain .post, .plain #intro .logo, .plain .plank::before, .plain .plank::after,
.plain .rsign::after, .plain .blank::after { display: none !important; }
.plain #wipe { background: #fff; }
/* every button: flat; the main ones blue, the rest outlined */
.plain .btn { font-family: var(--p-font) !important; font-weight: 600; letter-spacing: 0; text-shadow: none; filter: none !important;
  border: 1px solid var(--p-blue) !important; border-radius: 4px !important; background: var(--p-blue) !important; color: #fff !important;
  box-shadow: none !important; }
.plain .btn:hover { background: #02609a !important; }
.plain .btn small { font-family: var(--p-font); text-shadow: none; font-weight: normal; }
.plain .btn.alt, .plain .btn.sound, .plain .btn.swap, .plain .board .share, .plain .board .menu, .plain #bonusPick .back,
.plain #bonusGrid .btn.played, .plain #intro .modes #startBtn.fed { background: #fff !important; color: var(--p-ink) !important; border-color: var(--p-line) !important; }
.plain .btn.alt:hover, .plain .btn.sound:hover, .plain .btn.swap:hover, .plain .board .share:hover, .plain .board .menu:hover,
.plain #bonusPick .back:hover, .plain #bonusGrid .btn.played:hover { background: #eef1f3 !important; }
.plain #bonusGrid .btn.zen:not(.played) { background: #2f7d4f !important; border-color: #2f7d4f !important; }
.plain #bonusGrid .btn.played { color: var(--p-sub) !important; }
.plain .btn:focus-visible { outline: 2px solid var(--p-blue); outline-offset: 2px; }
.plain #intro .modes #startBtn { font-size: 22px; padding: 8px 26px 6px; }
.plain #intro .modes #bonusBtn { font-size: 15px; padding: 6px 16px; }
.plain #bonusGrid .btn { font-size: 16px; padding: 8px 10px; }
.plain .board .btns .btn { font-size: 14px; padding: 7px 12px; }
.plain .btn.swap { font-size: 13px; padding: 5px 12px; }
.plain .go { font-size: 22px; padding: 8px 22px 6px; transform: translate(-50%, -50%); }
/* settings menu */
.plain #settings { border: 1px solid var(--p-line); border-radius: 6px; background: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.plain #settings .set-title { color: var(--p-sub); font-family: var(--p-font); }
.plain .tgl { color: var(--p-ink); font-family: var(--p-font); }
.plain .tgl:hover { background: #f2f4f5; }
.plain .tgl small { color: var(--p-sub); }
.plain .tgl i { background: #c7cdd1; }
.plain .tgl[aria-checked="true"] i { background: var(--p-blue); }
/* HUD */
.plain .banner { border: 0; background: none !important; box-shadow: none; color: var(--p-sub); text-shadow: none; font-family: var(--p-font); }
.plain .banner b { font-family: var(--p-font); font-weight: 700; font-size: 18px; color: var(--p-ink); }
.plain .banner .of { font-family: var(--p-font); font-size: 14px; color: var(--p-sub); }
.plain #meter { width: 10px; left: 774px; border: 0; border-radius: 5px; background: #e4e7ea; box-shadow: none; }
.plain #meter .lbl { display: none; }
.plain #stage.menu #meter, .plain #stage.menu #secs, .plain #stage.menu #hud { visibility: hidden; }
.plain #meterFill { background-image: none; }
.plain #secs { font-family: var(--p-font); font-weight: 700; font-size: 18px; color: var(--p-ink); text-shadow: none; }
.plain #secs.low { color: #c23c2d; }
.plain #status { border-top: 1px solid var(--p-line); background: #fafbfb; color: var(--p-sub); font-family: var(--p-font); }
.plain #status::before { content: none; }
.plain #status b { color: var(--p-ink); }
/* a round: prompt card, rule, answer box, centred */
.plain .plank { left: 160px; width: 480px; border: 1px solid var(--p-line); border-radius: 6px; background: #fff; box-shadow: none; transform: none; }
.plain .rtag { top: 10px; left: 14px; transform: none; padding: 0; border: 0; background: none; box-shadow: none; color: var(--p-sub);
  font-family: var(--p-font); font-size: 11px; text-shadow: none; }
.plain .board .rtag { left: 50%; transform: translateX(-50%); }
.plain .pword { font-family: var(--p-font); font-weight: 700; font-size: 44px; letter-spacing: 0; color: var(--p-ink); text-shadow: none; }
.plain .pword.geo .flag { border: 1px solid var(--p-line); border-radius: 2px; box-shadow: none; }
.plain .rsign { left: 400px; transform: translateX(-50%); padding: 2px 10px; border: 0; background: none; box-shadow: none; color: var(--p-ink); }
.plain .rs-title { font-family: var(--p-font); font-size: 15px; text-shadow: none; color: var(--p-ink); }
.plain .rs-hint { font-family: var(--p-font); font-size: 12px; color: var(--p-sub); }
.plain .rs-hint b { color: var(--p-ink); }
.plain .pat { border-color: var(--p-line); background: #f2f4f5; color: var(--p-ink); }
.plain .blank { left: 160px; width: 480px; border: 1px solid #8b969e; border-radius: 4px; background: #fff; box-shadow: none; transform: none; }
.plain .station.live .blank { border-color: var(--p-blue); box-shadow: 0 0 0 2px rgba(3, 116, 181, .25); }
.plain .station.ready .blank, .plain .station.ready .err { transform: none; }
.plain .station.ready .rsign { transform: translateX(-50%); }
.plain .word, .plain .eaten { font-family: var(--p-font); font-weight: 600; letter-spacing: 0; color: var(--p-ink); caret-color: var(--p-blue);
  padding: 0 16px; line-height: 64px; }
.plain .word, .plain .word:placeholder-shown { line-height: normal; }
.plain .word::placeholder { font-family: var(--p-font); font-weight: normal; color: #8b969e; }
.plain .err { left: 160px; max-width: 480px; padding-left: 0; border: 0; background: none; box-shadow: none; color: var(--p-ink); font-family: var(--p-font); }
.plain .err .nope { background: #c23c2d; }
.plain .err .fix { background: #fff; border-color: var(--p-blue); color: var(--p-blue); box-shadow: none; }
/* scoreboard */
.plain .board { left: 165px; top: 24px; width: 470px; height: auto; padding: 34px 20px 16px; border: 1px solid var(--p-line); border-radius: 6px;
  background: #fff; box-shadow: none; transform: none; }
.plain .board .total { font-family: var(--p-font); font-weight: 700; font-size: 52px; line-height: 56px; color: var(--p-ink); text-shadow: none; }
.plain .board .sub, .plain .board .pct { color: var(--p-sub); text-shadow: none; font-family: var(--p-font); }
.plain .board .pct b { color: var(--p-ink); }
.plain .board table { color: var(--p-ink); text-shadow: none; font-family: var(--p-font); }
.plain .board th { color: var(--p-sub); }
.plain .board td, .plain .board th { border-bottom-color: #e4e7ea; }
.plain .board .v { color: var(--p-sub); }
.plain .bell rect { fill: #f5f5f5; stroke: var(--p-line); }
.plain .bell path[fill^="rgba"] { fill: #e4e7ea; }
.plain .bell path[fill^="url"] { fill: var(--p-blue); }
.plain .bell path[fill="none"] { stroke: #8b969e; }
.plain .bell path[stroke="#fff4cf"] { stroke: var(--p-sub); }
/* title screen: the game's name as plain text instead of the logo */
.plain #intro { left: 150px; top: 60px; width: 500px; }
.plain #intro .plainTitle { display: block; font-size: 30px; font-weight: 700; color: var(--p-ink); margin-bottom: 14px; }
.plain #intro .rules span { padding: 1px 0; border: 0; background: none; color: var(--p-ink); font-family: var(--p-font); font-weight: normal; font-size: 14px; }
.plain #intro .rules b { color: var(--p-ink); }
.plain #bonusPick .bp-title { font-family: var(--p-font); font-weight: 700; font-size: 22px; color: var(--p-ink); text-shadow: none; }
/* tall (phone) layout: everything already sits in one column */
.plain.tall #intro { left: 0; top: 70px; width: 480px; }
.plain.tall .plank { left: 20px; width: 440px; }
.plain.tall .rsign { left: 240px; }
.plain.tall .blank, .plain.tall .err { left: 20px; width: 440px; }
.plain.tall .board { left: 10px; top: 58px; width: 460px; }
.plain.tall #meter { left: 10px; top: 48px; width: 412px; height: 10px; }
/* the points for an accepted word: big and coloured by how good it was, like the popups in the full look */
.plain .err.gain { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.plain .err.gain .pts { margin: 0; padding: 3px 12px; border-radius: 5px; font-size: 24px; font-weight: 800; line-height: 1.15; color: #fff; }
.plain .err.gain.t0 .pts { background: #8b969e; }
.plain .err.gain.t1 .pts { background: #2f9e44; }
.plain .err.gain.t2 .pts { background: #f2b705; color: #2d3b45; }
.plain .err.gain.t3 .pts { background: #ee6a1f; }
.plain .err.gain.t4 .pts { background: linear-gradient(90deg, #ff4fb3, #7a3cff); }