:root {
  --paper: #ffffff;
  --paper-2: #ffffff;
  --ink: #26241f;
  --ink-soft: #6b665a;
  --line: #d9d1bd;
  --gold: #e9a910;
  --gold-soft: #fff1c7;
  --red: #d6336c;
  --green: #0c8a5d;
  --ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--ui); }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

#app { display: flex; flex-direction: column; height: 100%; }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 2px solid var(--ink); background: var(--paper); }
.brand { font-weight: 700; font-size: 22px; letter-spacing: .5px; }
.week-label { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); margin-left: 8px; white-space: nowrap; }
.me { display: flex; gap: 12px; }
.brand { display: flex; align-items: baseline; gap: 4px; }
.games { display: flex; gap: 4px; }
.games a { color: var(--ink-soft); text-decoration: none; padding: 2px 10px; border-radius: 8px; border: 2px solid transparent; white-space: nowrap; }
.games a:hover { color: var(--ink); }
.games a.on { color: var(--ink); border-color: var(--ink); background: var(--gold-soft); }
.record { font-family: var(--mono); font-size: 15px; margin-top: 6px; letter-spacing: 1px; }
.record b { font-size: 20px; }
.golf-count { font-family: var(--mono); font-size: 16px; margin-top: 2px; }
.golf-count b { font-size: 20px; }
.thumb.golf-thumb { width: 160px; height: 240px; }
#game.golf-canvas { border-radius: 14px; background: #9fd67e; cursor: crosshair; }
.dots { color: var(--gold); letter-spacing: 2px; }
.ev.g-golf .t .when { color: var(--green); }
.ev.g-gauntlet .t .when { color: var(--red); }
.ev.quip { border-style: dashed; font-style: italic; }
.ev.quip .t { font-family: var(--ui); font-weight: 700; font-size: 15px; letter-spacing: 0; }
/* Prank Gauntlet */
.gauntlet-card { flex-wrap: wrap; }
.gauntlet-card .hill-main { flex: 1 1 220px; }
.room-thumb { flex: 2 1 320px; width: 100%; max-width: 480px; aspect-ratio: 16 / 9; border: 2px solid var(--ink); border-radius: 6px; background: #fbf3e4; align-self: flex-start; }
.gauntlet-card .changelog, .gauntlet-card .inks { flex-basis: 100%; }
.meta-line { font-family: var(--mono); font-size: 13px; margin-top: 6px; }
#game.room-canvas { background: #fbf3e4; cursor: crosshair; }
.tool.prank { min-width: 72px; }
.tool.prank .ico { font-size: 22px; }
/* ArcticBlast — icy styling in the original's Lilita One lettering */
@font-face { font-family: 'LilitaOne'; src: url('/ab/LilitaOne-Regular.ttf') format('truetype'); font-display: swap; }
.ev.g-arctic .t .when { color: #1098ad; }
.hill-card.arctic-card { background: linear-gradient(160deg, #f4fbff, #dff1fa); border-color: #25648a; box-shadow: 5px 5px 0 #25648a; }
.ab-word { font-family: 'LilitaOne', var(--ui); font-size: 44px; line-height: 1; color: #9edfff; -webkit-text-stroke: 2px #25648a; text-shadow: 0 3px 0 #4492ba; letter-spacing: .5px; }
.ab-word.small { font-size: 30px; }
.ab-record { font-family: 'LilitaOne', var(--mono); margin-top: 8px; color: #25648a; }
.ab-record small { display: block; font-size: 12px; letter-spacing: 3px; color: #4a7389; }
.ab-record b { font-size: 34px; font-weight: 400; color: #163b55; }
.big-btn.ab-play { background: #9edfff; border-color: #163b55; box-shadow: 3px 3px 0 #163b55; font-family: 'LilitaOne', var(--mono); letter-spacing: 3px; }
.ab-pick { margin-top: 12px; font-size: 15px; color: var(--ink-soft); display: flex; gap: 6px; align-items: center; }
.ab-pick .chip.on { background: #9edfff; }
.forecast { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.forecast.small { margin-top: 4px; }
.mut-chip { font-family: 'LilitaOne', var(--mono); font-size: 14px; letter-spacing: .5px; color: #163b55; background: #e3f5fc; border: 2px solid #25648a; border-radius: 999px; padding: 3px 10px; }
.forecast.small .mut-chip { font-size: 12px; padding: 1px 8px; }
.mut-chip.base { font-family: var(--ui); background: transparent; border-style: dashed; color: var(--ink-soft); }
#game.ab-canvas { border-color: #163b55; box-shadow: 4px 4px 0 #163b55; background: #cfeaf5; }
.ab-kicker { font-family: 'LilitaOne', var(--mono); letter-spacing: 3px; color: #c34d34; font-size: 15px; }
.ab-time { font-family: 'LilitaOne', var(--mono); font-size: 46px; color: #087da4; line-height: 1.1; }
.remix { max-width: 760px; margin: 0 auto; width: 100%; }
.remix-head p { font-size: 17px; margin: 6px 0 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mcard { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'i n' 'i d' 'i c'; column-gap: 12px; text-align: left; padding: 12px; border: 2.5px solid #25648a; border-radius: 14px; background: #f4fbff; box-shadow: 3px 3px 0 #25648a; transition: transform .08s; }
.mcard:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #25648a; }
.mcard .mi { grid-area: i; font-size: 34px; align-self: center; }
.mcard .mn { grid-area: n; font-family: 'LilitaOne', var(--mono); font-size: 18px; color: #163b55; letter-spacing: .5px; }
.mcard .md { grid-area: d; font-size: 14px; color: var(--ink-soft); }
.mcard .mc { grid-area: c; font-family: var(--mono); font-size: 11px; color: #4a7389; }
.mcard.on { background: #9edfff; box-shadow: 0 0 0 3px #fff, 0 0 18px 4px rgba(114, 204, 236, .9); }
.mcard.cant { opacity: .45; }
.remix-actions { display: flex; gap: 12px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.remix-actions .big-btn:disabled { opacity: .45; }
.linkish { background: none; border: none; text-decoration: underline; text-underline-offset: 3px; font-size: 16px; padding: 4px; }

.layout { flex: 1; display: grid; grid-template-columns: 1fr 340px; min-height: 0; }
.stage { min-height: 0; overflow: auto; padding: 16px; display: flex; flex-direction: column; }
.screen { width: 100%; max-width: 760px; margin: 0 auto; }
#gameScreen { max-width: none; height: 100%; display: flex; flex-direction: column; }

/* Enter/Play takes over the viewport in every game. Removing .playing restores
   the group page; keep the game's own Back button, HUD and touch controls. */
body.playing { overflow: hidden; background-image: none; }
body.playing #app { position: fixed; inset: 0; height: 100dvh; }
body.playing .topbar, body.playing .chat, body.playing .m-nav { display: none; }
body.playing .layout { display: flex; min-width: 0; }
body.playing .stage {
  flex: 1; min-width: 0; overflow: hidden;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
body.playing #gameScreen { min-height: 0; }
body.playing .canvas-wrap { align-items: center; }


/* ---------- A. current level ---------- */
.lock-banner { background: var(--gold-soft); border: 2px dashed var(--gold); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 17px; }
.hill-card { display: flex; gap: 20px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 14px; padding: 18px; box-shadow: 5px 5px 0 var(--ink); }
.thumb { width: 120px; height: 400px; border: 2px solid var(--ink); border-radius: 6px; background: #fff; flex: none; }
.hill-main { flex: 1; min-width: 0; }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 3px; color: var(--ink-soft); }
.king { font-size: 44px; font-weight: 700; line-height: 1.05; margin-top: 6px; word-break: break-word; }
.reign { font-family: var(--mono); font-size: 14px; margin-top: 4px; }
.version { font-size: 20px; margin-top: 10px; }
.big-btn { display: inline-block; margin-top: 14px; font-family: var(--mono); font-weight: 700; font-size: 20px; letter-spacing: 4px; padding: 12px 34px; background: var(--gold); border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); transition: transform .06s; }
.big-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.big-btn:disabled { opacity: .5; cursor: default; }
.secondary { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); margin-top: 10px; }
.changelog { margin-top: 14px; font-size: 17px; line-height: 1.35; }
.changelog .who { font-weight: 700; }
.inks { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 14px; color: var(--ink-soft); }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--ink); vertical-align: -1px; margin-right: 4px; }

.tabs { display: flex; gap: 6px; margin: 22px 0 8px; }
.tabs button { background: none; border: 2px solid transparent; border-radius: 8px; padding: 4px 12px; font-size: 18px; }
.tabs button.on { border-color: var(--ink); background: var(--paper); }
.tab-body { background: var(--paper); border: 2px solid var(--line); border-radius: 10px; padding: 6px 12px; }
.row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1.5px dashed var(--line); }
.row:last-child { border-bottom: none; }
.row .vnum { font-family: var(--mono); font-weight: 700; min-width: 44px; }
.row .grow { flex: 1; min-width: 0; }
.row .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.row .acts { display: flex; gap: 6px; }
.chip { font-family: var(--mono); font-size: 11px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--paper); padding: 3px 8px; }
.chip:hover { background: var(--gold-soft); }
table.stats { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; }
table.stats th { text-align: right; font-weight: 400; color: var(--ink-soft); padding: 6px 4px; border-bottom: 1.5px solid var(--line); }
table.stats td { text-align: right; padding: 6px 4px; border-bottom: 1px dashed var(--line); }
table.stats th:first-child, table.stats td:first-child { text-align: left; font-family: var(--ui); font-size: 16px; }
.empty { color: var(--ink-soft); padding: 12px 0; }

/* ---------- game screen ---------- */
.hud { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px 10px; flex-wrap: wrap; }
.hud .title { font-weight: 700; font-size: 22px; }
.hud .sub { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.hud .pts { font-family: var(--mono); font-weight: 700; font-size: 18px; }
.hud .timer { font-family: var(--mono); font-weight: 700; font-size: 26px; }
.hud .timer.low { color: var(--red); }
.hud .btns { display: flex; gap: 8px; flex-wrap: wrap; }
.btn { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 1px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); padding: 7px 12px; box-shadow: 2px 2px 0 var(--ink); }
.btn.primary { background: var(--gold); }
.btn:disabled { opacity: .45; cursor: default; }

.toolbar { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 10px; }
.tool { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 6px 4px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); }
.tool.on { background: var(--gold); box-shadow: 2px 2px 0 var(--ink); }
.tool.cant { opacity: .4; }
.tool .ico { font-size: 20px; line-height: 1; height: 22px; }
.tool .nm { font-size: 13px; }
.tool .cost { font-family: var(--mono); font-size: 10px; color: var(--ink-soft); }

.canvas-wrap { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: flex-start; gap: 10px; }
#game { border: 2.5px solid var(--ink); border-radius: 8px; background: #fff; touch-action: none; box-shadow: 4px 4px 0 var(--ink); }
#minimap { width: 60px; height: 200px; border: 2px solid var(--ink); border-radius: 4px; background: #fff; touch-action: none; cursor: ns-resize; }
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.card { pointer-events: auto; background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--ink); padding: 22px 28px; text-align: center; max-width: 380px; animation: pop .25s ease-out; }
.card h1 { margin: 4px 0; font-size: 38px; line-height: 1.05; }
.card p { margin: 6px 0; font-size: 18px; }
.card .big { font-family: var(--mono); font-weight: 700; font-size: 20px; letter-spacing: 2px; }
.card .btns { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.touch { display: none; gap: 10px; padding: 10px 4px 4px; user-select: none; -webkit-user-select: none; }
.touch button { width: 72px; height: 64px; font-size: 26px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); touch-action: none; }
.touch button.jump { width: 120px; font-family: var(--mono); font-weight: 700; font-size: 18px; background: var(--gold); }
.touch button.down { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.touch .spacer { flex: 1; }
@media (pointer: coarse) { .touch.show { display: flex; } }

/* ---------- chat ---------- */
.chat { border-left: 2px solid var(--ink); background: var(--paper-2); display: flex; flex-direction: column; min-height: 0; }
.chat-head { padding: 10px 14px; font-weight: 700; font-size: 18px; border-bottom: 1.5px solid var(--line); }
.feed { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.ev { background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; padding: 8px 10px; }
.ev .t { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: .5px; }
.ev .b { font-size: 15px; margin-top: 2px; }
.ev ul { margin: 4px 0 0; padding-left: 4px; list-style: none; font-size: 15px; }
.ev .when { font-family: var(--mono); font-size: 10px; color: var(--ink-soft); float: right; margin-left: 6px; }
.ev.crown { background: var(--gold-soft); border-color: var(--gold); }
.ev.publish { border-style: solid; box-shadow: 3px 3px 0 var(--ink); }
.ev.milestone, .ev.choke { border-color: var(--red); }
.ev.summary table { font-family: var(--mono); font-size: 11px; margin-top: 6px; border-collapse: collapse; width: 100%; }
.ev.summary td { padding: 2px 0; }
.ev.summary td:last-child { text-align: right; }
.msg { font-size: 16px; line-height: 1.3; padding: 0 2px; }
.msg .n { font-weight: 700; }
.composer { display: flex; gap: 6px; padding: 10px; border-top: 1.5px solid var(--line); }
.composer input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 8px 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); }
.composer button { border: 2px solid var(--ink); border-radius: 8px; background: var(--gold); padding: 0 12px; font-weight: 700; }

/* ---------- toasts + modal ---------- */
.toasts { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 10000; pointer-events: none; width: min(92vw, 420px); }
.toast { background: var(--ink); color: var(--paper); border-radius: 10px; padding: 10px 14px; font-size: 16px; animation: pop .2s ease-out; box-shadow: 3px 3px 0 var(--gold); }
.toast.err { box-shadow: 3px 3px 0 var(--red); }
.toast.run-toast { align-self:center; width:fit-content; max-width:min(78vw,300px); box-sizing:border-box; padding:6px 10px; border-radius:16px; font:600 13px/1.35 var(--ui); text-align:center; background:rgba(38,36,31,.86); box-shadow:none; animation:run-toast-in .15s ease-out; }
@keyframes run-toast-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce){.toast.run-toast{animation:none}}
.modal { color: var(--ink); position: fixed; inset: 0; background: rgba(38, 36, 31, .45); display: flex; align-items: center; justify-content: center; z-index: 90; padding: 16px; }
.modal-card { background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--ink); padding: 22px; width: 100%; max-width: 360px; }
.modal-card h2 { margin: 4px 0 6px; font-size: 32px; }
.modal-card p { margin: 0 0 12px; color: var(--ink-soft); }
.modal-card input { width: 100%; font: inherit; font-size: 20px; padding: 10px 12px; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; }

/* ---------- phones: the game owns the screen (see mobile.js) ---------- */
.m-nav, .m-you, .m-share, .m-hint { display: none; }
.secondary .n { font-weight: 700; }
@media (max-width: 900px) {
  /* Game screens scroll inside .stage; the landing page, catalog and group hub scroll as documents. */
  html:not(:has(body.door, body.catalog, body.hubpage)), body:not(.door):not(.catalog):not(.hubpage) { overflow: hidden; }
  /* dialogs sit high so the phone keyboard never covers their input or button */
  .modal { align-items: flex-start; padding-top: max(16px, 8vh); overflow-y: auto; }
  /* cold landing on phones: everything up to the social options fits the first screen */
  .cold-top .brand-mark img { height: 52px; }
  .cold { padding: 18px 18px 32px; }
  .cold-desc { font-size: 18px; margin-bottom: 18px; }
  .cold-or { margin: 22px 0 12px; }
  .cold .cold-social { grid-template-columns: 1fr; }
  #app { height: 100dvh; }
  .layout { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .stage { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 12px 14px; }
  .chat { display: none; }

  /* header: active game as a pill, the others as icons; group chip + share on the right */
  .topbar { gap: 8px; padding: 8px 10px; }
  .brand { font-size: 16px; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
  .week-label { display: none; }
  .games { min-width: 0; gap: 2px; }
  .games a { padding: 3px 4px; font-size: 18px; flex: none; }
  .games a.on { padding: 3px 6px; font-size: 15px; letter-spacing: 0; box-shadow: 2px 2px 0 var(--ink); flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .games a:not(.on) .gl { display: none; }
  .me { gap: 6px; flex: none; align-items: center; }
  .topbar .group-switch { margin: 0; max-width: 78px; padding: 5px 2px; font-size: 11px; text-overflow: ellipsis; box-shadow: 2px 2px 0 var(--ink); }
  #meBtn, #inviteBtn { display: none; }
  #soundBtn { font-size: 16px; padding: 2px; }
  .m-share { display: block; order: 10; margin-top: 14px; padding: 10px 12px; }
  .chat-head .m-share { display: inline-block; margin: 0; padding: 4px 10px; font-size: 12px; flex: none; }

  /* bottom tab bar */
  /* Game / History / Stats / Chat: a slim strip under the header (the app nav owns the bottom) */
  .m-nav { display: flex; gap: 4px; padding: 6px 10px; background: var(--paper); border-bottom: 1.5px solid var(--line); }
  .m-nav button { flex: 1; background: none; border: 1.5px solid transparent; border-radius: 999px; padding: 5px 0; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); position: relative; }
  .m-nav button.on { color: var(--ink); border-color: var(--ink); background: var(--gold-soft); }
  .m-nav button.dot::after { content: ''; position: absolute; top: 2px; right: 10%; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 1.5px solid var(--paper); }
  body.playing .m-nav { display: none; }

  /* panes */
  body[data-pane="play"] #homeScreen > .tabs, body[data-pane="play"] #tabBody { display: none; }
  body[data-pane="history"] #homeScreen > .hill-card, body[data-pane="stats"] #homeScreen > .hill-card,
  body[data-pane="history"] #lockBanner, body[data-pane="stats"] #lockBanner { display: none !important; }
  body[data-pane="stats"] #homeScreen > .tabs { display: none; }
  body[data-pane="history"] .tabs [data-tab="stats"] { display: none; }
  #homeScreen > .tabs { margin-top: 0; }
  .tab-body { overflow-x: auto; }
  .row .acts { flex-direction: column; }
  body[data-pane="community"]:not(.playing) .stage { display: none; }
  body[data-pane="community"]:not(.playing) .chat { display: flex; flex: 1; border: none; }
  .chat-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 17px; white-space: nowrap; }
  .m-you { display: inline; flex: 1 1 auto; min-width: 0; text-align: right; font-size: 14px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .composer input { font-size: 16px; } /* 16px stops iOS zooming on focus */

  /* Play pane: who's king → the game → PLAY → numbers. The header already names the
     game, so the card doesn't repeat it; king + preview + PLAY fit the first screen. */
  body[data-pane="play"] #homeScreen:not([hidden]) { min-height: 100%; display: flex; flex-direction: column; }
  .stage { padding-top: 10px; }
  .hill-card { flex-direction: column; align-items: stretch; text-align: center; gap: 0; padding: 12px 14px 12px; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
  .hill-card .hill-main { display: contents; }
  .hill-card.gauntlet-card { flex-wrap: nowrap; }
  .gauntlet-card .changelog, .gauntlet-card .inks { flex-basis: auto; }
  .hill-card .kicker, .hill-card .ab-word { display: none; }
  .hill-card .king { order: 2; font-size: 34px; margin-top: 0; text-decoration: underline var(--gold) 3px; text-underline-offset: 6px; text-decoration-skip-ink: none; }
  .hill-card .reign, .hill-card .record, .hill-card .ab-record, .hill-card .golf-count, .hill-card .meta-line { order: 3; font-family: var(--mono); font-size: 13px; margin-top: 6px; color: var(--ink-soft); }
  .hill-card .forecast, .hill-card .ab-pick { order: 4; justify-content: center; }
  .hill-card .thumb { order: 4; width: 100%; flex: none; height: clamp(140px, 30dvh, 250px); margin: 10px 0 2px; border: 2px solid var(--ink); border-radius: 10px; background: #fffdf6; }
  .hill-card .thumb.golf-thumb, .hill-card .thumb.td-thumb { width: 100%; height: clamp(140px, 30dvh, 250px); }
  .hill-card .room-thumb { order: 4; flex: 0 0 auto; max-width: none; height: auto; max-height: 30dvh; margin: 10px 0 2px; }
  .hill-card .big-btn { order: 5; width: 100%; margin-top: 12px; font-size: 30px; letter-spacing: 6px; padding: 18px 0; border-radius: 16px; border-width: 3px; box-shadow: 4px 4px 0 var(--ink); }
  .hill-card #playBtn::before { content: '▶ '; }
  .hill-card .version { order: 6; font-family: var(--mono); font-size: 12px; letter-spacing: 1px; color: var(--ink-soft); margin-top: 10px; }
  .hill-card .secondary { order: 7; font-size: 12px; margin-top: 8px; }
  .hill-card .secondary .n { display: block; font-size: 20px; color: var(--ink); }
  .hill-card .stat-cols { display: grid; grid-template-columns: repeat(3, 1fr); }
  .hill-card .stat-cols .sep { display: none; }
  .hill-card .stat-cols > span:not(.sep):not(:first-child) { border-left: 1.5px solid var(--line); }
  .hill-card .changelog { order: 8; font-size: 15px; text-align: left; }
  .hill-card .inks { order: 9; justify-content: center; }

  /* game screen: everything goes to the canvas */
  body.playing .stage { padding-bottom: 0; }
  .hud { flex-wrap: nowrap; gap: 8px; padding: 0 2px 8px; }
  .hud > div:first-child { min-width: 0; }
  .hud .title { font-size: 22px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud .sub { font-size: 11px; }
  .hud .timer { font-size: 22px; }
  .hud .btns { flex-wrap: nowrap; gap: 6px; }
  .hud:has(.btns > :nth-child(3)) { flex-wrap: wrap; }
  .hud:has(.btns > :nth-child(3)) .btns { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .hud:has(.btns > :nth-child(3)) .btn { padding: 0 4px; height: 40px; letter-spacing: 0; }
  /* Short mobile labels replace the full text. Keep it hidden even when a
     later game theme sets a button font; the real text stays accessible. */
  .hud .btn:is([data-h="undo"], [data-h="test"], [data-h="done"], [data-h="pass"], [data-h="editor"], [data-h="giveup"]) { font-size: 0 !important; }
  .hud .btn:is([data-h="undo"], [data-h="test"], [data-h="done"], [data-h="pass"], [data-h="editor"], [data-h="giveup"])::before { font-size: 13px; letter-spacing: 0; white-space: nowrap; }
  .hud .btn[data-h="undo"]::before { content: '↶ Undo'; }
  .hud .btn[data-h="test"]::before { content: '▶ Test'; }
  .hud .btn[data-h="done"]::before { content: '✓ Done'; }
  .hud .btn[data-h="pass"]::before { content: 'Leave it'; }
  .hud .btn[data-h="editor"]::before { content: '← Editor'; }
  .hud .btn[data-h="giveup"]::before { content: 'Give up'; }
  .hud .btn:is([data-h="editor"], [data-h="giveup"]) { height: 46px; padding: 0 12px; }
  .m-hint { display: block; font-size: 14px; line-height: 1.3; color: var(--ink-soft); background: var(--gold-soft); border: 1.5px dashed var(--gold); border-radius: 8px; padding: 5px 9px; margin: 0 0 8px; }
  .m-hint[hidden] { display: none; }
  #gameScreen:has(#toolbar:not([hidden])) #minimap { width: 46px; }
  .toolbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
  .tool { flex: none; min-width: 58px; padding: 5px 4px; }
  .tool .cost { display: none; }
  .toolbar .sub { display: none; }
  .canvas-wrap { gap: 8px; }
  #game { box-shadow: 3px 3px 0 var(--ink); }
  #minimap { width: 30px; }
  .touch { gap: 10px; padding: 10px 2px max(10px, env(safe-area-inset-bottom)); }
  .touch button { flex: 0 0 84px; height: 76px; font-size: 30px; border-radius: 16px; }
  .touch button.jump { flex: 1 1 auto; max-width: 190px; width: auto; font-size: 26px; letter-spacing: 2px; }
  .touch .spacer { flex: 0 1 12px; }
  #gameScreen:has(#toolbar:not([hidden])) .touch { display: none; }
  /* ArcticBlast's editor is a card picker, not a canvas: scroll the cards, pin the actions */
  #gameScreen:has(#remix:not([hidden])) .touch { display: none; }
  #remix:not([hidden]) { flex: 1; min-height: 0; overflow-y: auto; padding: 0 2px; display: flex; flex-direction: column; }
  .remix-head .ab-word.small { font-size: 26px; }
  .remix-head p { font-size: 15px; margin: 4px 0 10px; }
  .remix .cards { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mcard { grid-template-columns: 1fr; grid-template-areas: 'i' 'n' 'd' 'c'; justify-items: center; text-align: center; padding: 10px 6px 8px; row-gap: 2px; }
  .mcard .mi { font-size: 28px; }
  .mcard .mn { font-size: 15px; line-height: 1.1; }
  .mcard .md { font-size: 12px; line-height: 1.25; }
  .remix-actions { position: sticky; bottom: 0; margin-top: auto; padding: 10px 0 max(10px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--paper) 18%); display: grid; grid-template-columns: 1fr; gap: 8px; }
  .remix-actions .big-btn { width: 100%; margin: 0; }
  #gameScreen:not(:has(.touch.show)) .canvas-wrap, #gameScreen:has(#toolbar:not([hidden])) .canvas-wrap { margin-bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* ---------- groups: switcher, join/share modals, front door ---------- */
.group-switch { margin-left: 10px; max-width: 180px; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 8px; padding: 3px 6px; }
.modal-card .btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.modal-card .big-btn { width: 100%; font-size: 18px; letter-spacing: 2px; padding: 12px 16px; }
.modal-foot { margin: 12px 0 0 !important; font-size: 15px; text-align: center; }
.modal-foot a { color: var(--ink); }
.modal-err { color: var(--red); margin: 10px 0 0 !important; font-size: 15px; }
.share-text { background: var(--gold-soft); border: 2px dashed var(--ink); border-radius: 10px; padding: 10px 12px; color: var(--ink) !important; }
.modal-card .share-url { font-family: var(--mono); font-size: 13px; }
/* URL + inline copy icon sit on one bar; the icon swaps to a check on copy. */
.share-url-row { display: flex; gap: 8px; align-items: stretch; }
.share-url-row .share-url { flex: 1; min-width: 0; }
.share-copy { flex: none; width: 52px; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--ink); background: #fff; border: 2.5px solid var(--ink); border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); cursor: pointer; }
.share-copy svg { width: 20px; height: 20px; }
.share-copy.copied { background: var(--gold-soft); }
/* Close X, top-right of the share card, in place of the old Done button.
   Scoped with :has so only the card carrying the X becomes a positioning
   context — other modals' absolutely-positioned children are untouched. */
.modal-card:has(> .modal-x) { position: relative; }
.modal-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink); cursor: pointer; }
.modal-x svg { width: 16px; height: 16px; }
.modal-card:has(> .modal-x) > .kicker, .modal-card:has(> .modal-x) > h2 { padding-right: 40px; }
.share-btns { display: flex; flex-direction: column; gap: 8px; }
.share-btns .btn { width: 100%; padding: 10px 12px; }
.share-btns .big-btn { font-size: 16px; letter-spacing: 2px; padding: 12px 16px; }
.share-err { color: var(--red); font-size: 15px; margin: 10px 0 0 !important; }

/* ---------- cold landing (index.html): game first → social second → account third ----------
   Heavy treatment only on PLAY; everything else is lighter so the eye knows where to go. */
body.door { height: auto; min-height: 100%; }
.cold-top { display: flex; justify-content: space-between; align-items: center; max-width: 560px; margin: 0 auto; padding: 10px 16px 0; }
.cold-top .brand-mark img { height: 60px; }
.cold-signin { background: none; border: none; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 1px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 4px; padding: 8px 2px; }
.cold { max-width: 560px; margin: 0 auto; padding: 22px 20px 40px; }
.cold-eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 3px; color: var(--ink-soft); }
.cold-title { font-size: clamp(46px, 13vw, 76px); line-height: 1; margin: 8px 0 12px; letter-spacing: -.5px; }
/* a highlighter swipe under the title, not a button-shaped box */
.cold-title span { background: linear-gradient(transparent 58%, var(--gold) 58%, var(--gold) 92%, transparent 92%); padding: 0 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cold-desc { font-size: 20px; line-height: 1.35; margin: 0 0 22px; color: var(--ink); max-width: 420px; }
.big-btn.cold-play { display: block; width: 100%; margin: 0; text-align: center; text-decoration: none; color: var(--ink); font-size: 24px; letter-spacing: 5px; padding: 20px 12px; border-width: 3px; border-radius: 14px; box-shadow: 6px 6px 0 var(--ink); }
.cold-or { display: flex; align-items: center; gap: 12px; margin: 28px 0 14px; font-size: 17px; color: var(--ink-soft); }
.cold-or::before, .cold-or::after { content: ''; flex: 1; border-top: 1.5px dashed var(--line); }
.cold-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cold-2nd { font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 2px; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; padding: 14px 8px; }
.cold-2nd:active { background: var(--gold-soft); }
.cold-back { margin-bottom: 26px; }
.cold-groups { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cold-groups a { display: flex; justify-content: space-between; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-size: 20px; font-weight: 700; border: 2px solid var(--ink); border-radius: 10px; padding: 9px 14px; background: #fff; }
.cold-groups a:hover { background: var(--gold-soft); }
.cold-groups .go { font-family: var(--mono); font-size: 12px; letter-spacing: 2px; white-space: nowrap; }
.cold-cadence { margin: 34px 0 0; text-align: center; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 3px; color: var(--ink-soft); }
/* create / join sheets: light inputs, one yellow action */
.cold-sheet h2 { font-size: 30px; margin: 0 0 14px; }
.cold-sheet label { display: block; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 2px; color: var(--ink-soft); margin-bottom: 12px; }
.cold-sheet input { display: block; width: 100%; margin-top: 5px; font: inherit; font-family: var(--ui); font-size: 20px; color: var(--ink); padding: 10px 12px; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff; }
.cold-sheet .big-btn { width: 100%; margin-top: 6px; }
.cold-sheet .cold-eyebrow { margin: 18px 0 0; }
.cold-sheet .cold-cancel { display: block; width: 100%; margin-top: 12px; box-shadow: none; }

/* ---------- phones held sideways: the game takes the whole screen ----------
   Left column: HUD, editor tools, hint. Right: the canvas (or ArcticBlast's cards).
   Play controls float over the bottom corners. Mostly for the 16:9 Gauntlet room. */
@media (orientation: landscape) and (max-height: 500px) {
  body.playing .topbar, body.playing .chat, body.playing .m-nav { display: none; }
  body.playing .layout { display: flex; }
  body.playing #app { height: 100dvh; }
  body.playing .stage { flex: 1; height: 100dvh; overflow: hidden; padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); }
  /* left column rows: HUD, tools (scroll if they don't fit), hint */
  #gameScreen { display: grid; grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 10px; height: 100%; }
  #gameScreen > .hud { grid-column: 1; grid-row: 1; flex-wrap: wrap; align-content: flex-start; gap: 4px 8px; padding: 0 0 6px; }
  #gameScreen > .hud .title { font-size: 16px; }
  #gameScreen > .hud .timer { font-size: 18px; }
  #gameScreen > .hud .btns { flex-wrap: wrap; gap: 4px; }
  #gameScreen > .hud:has(.btns > :nth-child(3)) .btns { grid-template-columns: 1fr 1fr; }
  #gameScreen > .hud:has(.btns > :nth-child(3)) .btn { height: 32px; }
  #gameScreen > .toolbar { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 4px; overflow-y: auto; padding: 0 2px 6px 0; }
  #gameScreen > .toolbar .tool { min-width: 0; padding: 3px 1px; border-radius: 8px; }
  #gameScreen > .toolbar .tool .nm { font-size: 10px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  #gameScreen > .toolbar .sub { display: none; }
  #gameScreen > .m-hint { display: block; grid-column: 1; grid-row: 3; font-size: 12px; margin: 0; max-height: 64px; overflow-y: auto; }
  #gameScreen > .m-hint[hidden] { display: none; }
  #gameScreen > .canvas-wrap, #gameScreen > .remix { grid-column: 2; grid-row: 1 / -1; min-height: 0; margin: 0; }
  #gameScreen > .canvas-wrap { align-items: center; }
  #gameScreen > .remix:not([hidden]) { overflow-y: auto; }
  .touch.show { position: fixed; left: 0; right: 0; bottom: 0; padding: 0 max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); pointer-events: none; justify-content: space-between; z-index: 5; }
  .touch.show button { pointer-events: auto; opacity: .88; flex: 0 0 72px; height: 64px; }
  .touch.show button.jump { flex: 0 0 150px; }
  .touch .spacer { flex: 1; }
  #gameScreen:has(#toolbar:not([hidden])) .touch, #gameScreen:has(#remix:not([hidden])) .touch { display: none; }
  .hud .title { font-size: 18px; }
}
/* In portrait the Gauntlet room is letterboxed: suggest turning the phone. */
@media (orientation: portrait) and (max-width: 900px) {
  #gameScreen .canvas-wrap:has(> #game.room-canvas) { flex-direction: column; align-items: center; }
  #gameScreen .canvas-wrap:has(> #game.room-canvas)::after { content: '↻ Turn your phone sideways for a bigger room'; font-size: 15px; color: var(--ink-soft); margin-top: 14px; }
}

/* ---------- Tower Defense ---------- */
.ev.g-defense .t .when { color: #7a5c2e; }
.thumb.td-thumb { width: 150px; height: 200px; }
#game.td-canvas { background: #e6efd3; cursor: pointer; }
.td-stats { display: flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--mono); font-size: 14px; margin-top: 2px; }
.td-stats b { font-size: 16px; }
.tdbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 10px 0 4px; }
.td-towers, .td-ctl { display: flex; gap: 6px; align-items: center; }
.td-t { display: flex; flex-direction: column; align-items: center; min-width: 66px; padding: 5px 6px 4px; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); }
.td-t .ico { font-size: 20px; line-height: 1.1; }
.td-t .nm { font-size: 13px; font-weight: 700; }
.td-t .cost { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.td-t .cost::before { content: '💰'; font-size: 9px; margin-right: 1px; }
.td-t.on { background: var(--gold); }
.td-t.cant { opacity: .45; }
.td-t.up { background: var(--gold-soft); }
.td-sel { font-size: 15px; padding: 0 6px; }
.big-btn.td-wave { margin: 0; font-size: 16px; letter-spacing: 2px; padding: 12px 18px; }
.td-speed { min-width: 48px; font-size: 16px; }
.td-wavecount { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); letter-spacing: 1px; }
@media (max-width: 900px) {
  .hill-card .thumb.td-thumb { width: 100%; height: clamp(140px, 30dvh, 250px); }
  .tdbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 0 max(10px, env(safe-area-inset-bottom)); }
  .td-towers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .td-towers:has(.td-sel) { display: flex; }
  .td-towers:has(.td-sel) .td-t { flex: 1; }
  .td-t { min-width: 0; padding: 6px 2px 4px; }
  .td-ctl { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 2px 8px; }
  .big-btn.td-wave { grid-row: 1; font-size: 18px; padding: 14px 8px; box-shadow: 3px 3px 0 var(--ink); }
  .td-speed { grid-row: 1; height: 100%; min-width: 60px; font-size: 18px; }
  .td-wavecount { grid-column: 1 / -1; text-align: center; }
}
@media (orientation: landscape) and (max-height: 500px) {
  #gameScreen > .tdbar { grid-column: 1; grid-row: 2; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; overflow-y: auto; }
  #gameScreen > .tdbar .td-towers { display: grid; grid-template-columns: 1fr 1fr; }
  #gameScreen > .tdbar .td-t { padding: 3px 2px; }
  #gameScreen > .tdbar .big-btn.td-wave { font-size: 14px; padding: 8px; }
}

/* ---------- no text selection / iOS long-press menu while playing or editing ----------
   A held finger on a game (jump, aim, drag) must never select the HUD or pop "Copy · Look Up". */
body.playing, body.playing *,
canvas, .touch, .tdbar, .toolbar, .hud, .m-nav, .remix, .overlay, .big-btn, .btn, .tool, .games {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.touch button, .tdbar button, .toolbar button, .hud button, .m-nav button, .big-btn, .btn, canvas { touch-action: manipulation; }
#game, #minimap { touch-action: none; }
@media (pointer: coarse) {
  body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
}
/* ...but anything you type into stays normal. */
body.playing input, body.playing textarea, input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* ---------- top bar: game · scope · vote · profile (header.js) ---------- */
.topbar.kh > .brand, .topbar.kh > .me { display: none; }
.topbar.kh { position: relative; padding: 8px 16px; }
.kh-bar { display: flex; align-items: center; gap: 14px; width: 100%; }
.kh-home { display: flex; align-items: center; gap: 8px; font-size: 26px; text-decoration: none; color: var(--ink); }
/* URMOVE brand: the full wordmark on desktop, just the pointing hand on phones */
.kh-home img.kh-word { display: block; height: 46px; width: auto; }
.kh-home .kh-hand { display: none; height: 36px; width: auto; }
.brand-mark { display: inline-block; line-height: 0; }
.brand-mark img { height: 52px; width: auto; }
.kh-game { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); background: var(--gold-soft); border: 2.5px solid var(--ink); border-radius: 12px 14px 11px 13px; box-shadow: 3px 3px 0 var(--ink); padding: 3px 14px 3px 10px; min-width: 0; }
.kh-gi { font-size: 26px; line-height: 1; }
.kh-gt { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; }
.kh-gt b { font-size: 21px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-live { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kh-live.off { color: var(--ink-soft); }
.kh-game { margin-right: auto; }
.kh-me { background: none; border: none; padding: 0; }
.kh-me.signin { font-family: var(--mono); font-size: 12px; font-weight: 700; border: 2px solid var(--ink); border-radius: 10px; padding: 6px 10px; background: var(--gold); box-shadow: 2px 2px 0 var(--ink); }
.kh-av { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--ink); background: var(--gold); color: #fff; font-weight: 700; font-size: 18px; text-shadow: 1px 1px 0 var(--ink); }
.kh-av.big { width: 72px; height: 72px; font-size: 36px; flex: none; }

.kh-steps { margin: 0 0 12px; padding-left: 20px; font-size: 15px; }

.kh-screen { position: fixed; inset: 0; z-index: 70; overflow-y: auto; background-color: var(--paper); }
body.kh-open { overflow: hidden; }
/* Keep header dropdowns above profile screens (70), below modal dialogs (90). */
body.kh-open .topbar.kh,
body .topbar.kh:has(.kh-group-picker[open]) { z-index: 80; }
.kh-sc-in { position: relative; max-width: 780px; margin: 0 auto; padding: 22px 16px 40px; }
.kh-close { position: absolute; top: 14px; right: 12px; width: 40px; height: 40px; font-size: 18px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: 2px 2px 0 var(--ink); }
.kh-h1 { font-size: clamp(30px, 6vw, 44px); line-height: 1.05; margin: 6px 48px 6px 0; }
.kh-h2 { font-size: 24px; margin: 22px 0 8px; }
.kh-sub { font-size: 17px; color: var(--ink-soft); margin: 0 0 16px; }
.kh-foot, .kh-note { font-size: 15px; color: var(--ink-soft); }
.kh-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.kh-card { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); overflow: hidden; display: flex; flex-direction: column; }
.kh-card.mine { box-shadow: 0 0 0 3px var(--gold), 4px 4px 0 3px var(--ink); }
.kh-thumb { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; border-bottom: 2.5px solid var(--ink); background-image: radial-gradient(rgba(38,36,31,.12) 1.5px, transparent 1.5px); background-size: 14px 14px; }
.kh-thumb span { font-size: 64px; filter: drop-shadow(3px 3px 0 rgba(38,36,31,.25)); }
.kh-cb { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.kh-cb b { font-size: 22px; }
.kh-cb p { margin: 0; font-size: 15px; color: var(--ink-soft); flex: 1; }
.kh-cb .big-btn, .kh-cb .btn { width: 100%; margin-top: 6px; }
.kh-share { position: relative; height: 22px; border: 2px solid var(--ink); border-radius: 6px; background: #fff; overflow: hidden; }
.kh-share i { position: absolute; inset: 0 auto 0 0; background: var(--gold); }
.kh-share span { position: relative; font-family: var(--mono); font-size: 11px; font-weight: 700; padding-left: 6px; line-height: 18px; }
.kh-prof { display: flex; gap: 16px; align-items: center; margin-right: 48px; }
.kh-prof .kh-h1 { margin: 0; }
.kh-prof .kh-sub { margin: 2px 0 0; }
.kh-sub small, .kh-r small { font-size: 12px; }
.kh-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.kh-stats div { background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; padding: 10px; text-align: center; display: flex; flex-direction: column; }
.kh-stats span { font-size: 20px; }
.kh-stats b { font-family: var(--mono); font-size: 20px; }
.kh-stats small { font-size: 12px; color: var(--ink-soft); }
.kh-groups a { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; margin-bottom: 8px; color: var(--ink); text-decoration: none; font-size: 18px; box-shadow: 2px 2px 0 var(--ink); }
.kh-r { font-family: var(--mono); font-weight: 700; }
.kh-set { display: flex; flex-direction: column; gap: 8px; }
.kh-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; background: var(--paper); font-size: 17px; }
.kh-phone label { display: flex; flex-direction: column; gap: 4px; flex: 1; font-size: 15px; }
.kh-phone small { color: var(--ink-soft); font-size: 12px; }
.kh-phone input { font: inherit; font-size: 17px; padding: 7px 10px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; }

/* share dialog: one-tap apps + optional friend's number */
.share-phone { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-soft); margin: 10px 0 8px; }
.share-phone span { font-size: 12px; }
.share-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
.app-btn { display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 10px 4px; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); color: var(--ink); text-decoration: none; background: #fff; }
.app-btn.imsg { background: #d8f5dd; }
.app-btn.wa { background: #dcf8e6; }
.app-btn.slack { background: #efe4f7; }
.share-note { font-size: 14px; color: var(--ink); background: var(--gold-soft); border-radius: 8px; padding: 8px 10px; margin: 10px 0 0 !important; }

@media (max-width: 900px) {
  /* One compact bar (~64px), the same on every page: home · game over its live state · your group · you.
     Vote lives in the app nav down here. */
  .topbar.kh { padding: 7px 12px 7px 8px; }
  .kh-bar { gap: 10px; }
  .kh-home { font-size: 24px; flex: none; }
  .kh-home img.kh-word { display: none; }
  .kh-home .kh-hand { display: block; height: 38px; }
  .kh-game { flex: 1 1 auto; background: none; border: none; box-shadow: none; padding: 0; border-radius: 0; }
  .kh-gi { display: none; }
  .kh-gt b { font-size: 20px; min-width: 0; }
  .kh-clan { flex: 0 1 auto; font-size: 13px; padding: 3px 9px 3px 4px; border-width: 1.5px; box-shadow: 1.5px 1.5px 0 var(--ink); }
  .kh-clan .kc-t { overflow: hidden; text-overflow: ellipsis; }
  .kh-clan .gpfp { width: 24px; height: 24px; font-size: 9px; flex: none; }
  .kh-me { flex: none; }
  .kh-av { width: 32px; height: 32px; font-size: 16px; }
  .kh-stats { grid-template-columns: repeat(2, 1fr); }
  .kh-cards { gap: 12px; }
  .kh-card { flex-direction: row; }
  .kh-thumb { aspect-ratio: auto; width: 96px; flex: none; border-bottom: none; border-right: 2.5px solid var(--ink); }
  .kh-thumb span { font-size: 44px; }
  .kh-cb { padding: 10px 12px 12px; gap: 4px; }
  .kh-cb b { font-size: 20px; }
  .kh-cb p { font-size: 14px; }
  .kh-cb .big-btn { font-size: 16px; padding: 8px 12px; margin-top: 4px; }
  .kh-av.big { width: 60px; height: 60px; font-size: 30px; }
}
@media (orientation: landscape) and (max-height: 500px) { body.playing .topbar.kh { display: none; } }

/* Account prompts sit above game/profile overlays without blocking ongoing play. */
.phone-modal { z-index: 10000; }
.phone-modal .modal-card { max-height: 90dvh; overflow-y: auto; }
.phone-close { float: right; }
.phone-modal label { display: block; margin: 12px 0; }
.phone-modal input:not([type=checkbox]) { width: 100%; }
.phone-modal .phone-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; }
.phone-consent input { width: auto; flex: 0 0 auto; margin-top: 4px; }
.phone-foot, .phone-status { font-size: 14px; }
.phone-error { color: var(--red); }
.phone-legal { font-size: 12px; margin: 10px 0 0 !important; text-align: center; }
.phone-guest { display: block; width: 100%; margin-top: 10px; }
.phone-nudge { position: fixed; z-index: 9999; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); max-width: calc(100vw - 24px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px var(--ink); }


/* Opening scene completes before the compact menu is revealed. */
.opening-scene,.opening-skip { display:none; }
.intro-playing .opening-scene { display:grid; position:fixed; inset:0; z-index:100; place-items:center; background:var(--paper); animation:opening-exit .5s 3.4s ease both; }
.opening-content { position:relative; width:min(560px,calc(100% - 48px)); text-align:center; }
.intro-playing .opening-skip { display:block; position:fixed; right:20px; bottom:max(20px,env(safe-area-inset-bottom)); z-index:101; background:transparent; border:0; padding:12px; font:700 13px 'Space Mono',monospace; cursor:pointer; color:var(--ink); }
.intro-playing .cold,.intro-playing .cold-top { visibility:hidden; }
.door { min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:32px 0; box-sizing:border-box; }
.door .cold-top { flex-direction:column; justify-content:center; width:100%; padding:0 20px 20px; }
.door .cold { width:100%; box-sizing:border-box; padding-top:0; padding-bottom:0; text-align:center; }
.door .cold-desc { margin-left:auto; margin-right:auto; }
.door .cold-cadence { margin-bottom:0; }
html:not(.intro-playing) .cold { animation:challenge-arrive .45s ease both; }
@keyframes opening-exit { to {opacity:0;transform:translateY(-12px)} }

.hero-challenge { display:flex; flex-direction:row; justify-content:center; align-items:center; gap:12px; margin:0 0 22px; perspective:700px; }
.hero-ur { font:700 clamp(42px,9vw,70px)/1.1 'Kalam',cursive; }
.hero-point { width:clamp(90px,20vw,130px); height:auto; transform-origin:center; filter:drop-shadow(0 7px 5px #29262022); }
/* Pixel lettering lands like an arcade title card, then holds before the menu. */
.arcade-title { margin:0; text-align:center; font-family:'Press Start 2P','Space Mono',monospace; font-weight:400; line-height:1.5; }
.arcade-title span { display:block; }
.arcade-ready { font-size:clamp(18px,5vw,32px); letter-spacing:.08em; color:var(--ink); }
.arcade-crown { position:relative; width:max-content; max-width:100%; margin:12px auto 0; font-size:clamp(34px,9vw,62px); color:#efb416; text-shadow:2px 0 #292620,-2px 0 #292620,0 -2px #292620,0 2px #292620,4px 5px #292620,0 0 22px #f2b91655; }
.arcade-crown::after { content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(transparent 0 3px,#29262018 3px 4px); mix-blend-mode:multiply; }
.intro-playing .arcade-ready { animation:arcade-ready .45s .2s steps(4,end) both; }
.intro-playing .arcade-crown { animation:arcade-land .65s .75s cubic-bezier(.16,.85,.3,1.2) both; }
@keyframes arcade-ready { 0% {opacity:0;transform:translateY(8px)} 45% {opacity:1} 65% {opacity:.5} 100% {opacity:1;transform:none} }
@keyframes arcade-land { 0% {opacity:0;transform:scale(1.45) translateY(-8px);filter:blur(3px)} 50% {opacity:1;transform:scale(.96);filter:blur(0)} 75% {transform:scale(1.04);text-shadow:2px 0 #292620,-2px 0 #292620,0 -2px #292620,0 2px #292620,4px 5px #292620,0 0 35px #efb416} 100% {opacity:1;transform:none;filter:blur(0)} }
html:not(.intro-playing) .hero-ur { animation:challenge-arrive .45s .6s ease both; }
html:not(.intro-playing) .hero-point { animation:point-arrive 1.1s 1.05s cubic-bezier(.2,.8,.2,1) both; }
.falling-crown { position:absolute; width:clamp(88px,22vw,120px); height:auto; left:50%; bottom:calc(100% + 24px); margin-left:clamp(-60px,-11vw,-44px); filter:drop-shadow(0 6px 0 #29262022); }
.intro-playing .falling-crown { animation:crown-drop .85s 1.65s cubic-bezier(.3,.05,.7,1) both; }
@keyframes crown-drop { 0% {opacity:0;transform:translateY(-70vh) rotate(-15deg)} 8% {opacity:1} 65% {transform:translateY(0) rotate(4deg) scaleY(.86)} 82% {transform:translateY(-20px) rotate(-3deg) scaleY(1.03)} 100% {opacity:1;transform:none} }
@keyframes challenge-arrive { from {opacity:0;visibility:hidden;transform:translateY(10px)} to {opacity:1;visibility:visible;transform:none} }
@keyframes point-arrive { 0% {opacity:0;transform:scale(.12) translateZ(-200px) rotate(-18deg)} 50% {opacity:1;transform:scale(1.85) translateZ(60px) rotate(6deg);filter:drop-shadow(0 18px 12px #29262044)} 72% {transform:scale(.92) rotate(-3deg)} 100% {opacity:1;transform:scale(1) rotate(0)} }
@media (prefers-reduced-motion:reduce) {
  .intro-playing .hero-ur,.intro-playing .hero-point,.intro-playing .arcade-ready,.intro-playing .arcade-crown { animation:none; }
  .intro-playing .opening-scene,.intro-playing .opening-skip { display:none; }
  .intro-playing .cold,.intro-playing .cold-top { visibility:visible; }
  html:not(.intro-playing) .cold,html:not(.intro-playing) .hero-ur,html:not(.intro-playing) .hero-point,.intro-playing .falling-crown { animation:none; }
}

/* Account access follows the group and Global play actions. */
.cold-account { margin-top:24px; text-align:center; }

/* Upright interface text; branding and arcade display fonts retain their own faces. */
.modal-card h2,.kh-screen h1,.kh-screen h2 { font-weight:800; letter-spacing:-.025em; line-height:1.15; }
.modal-card p,.phone-foot,.phone-status,.phone-legal { line-height:1.5; }
.cold-sheet input { font-weight:400; letter-spacing:normal; }
.modal-card input::placeholder { font-weight:400; }

/* ---------- groups v1: app nav, group chip, pictures, points receipt ---------- */
.app-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; box-sizing: border-box; height: calc(64px + env(safe-area-inset-bottom)); border-top: 2px solid var(--ink); background: var(--paper); padding: 0 4px env(safe-area-inset-bottom); }
#app > .app-nav { position: static; flex: none; }
/* Links and buttons are laid out identically, so the five tabs line up. */
.app-nav a, .app-nav button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin: 0; padding: 0; border: 0; background: none; font: inherit; line-height: 1; color: var(--ink-soft); opacity: .6; text-decoration: none; cursor: pointer; }
.app-nav .ico { display: flex; align-items: center; justify-content: center; height: 30px; line-height: 0; }
.app-nav .ico svg { width: 28px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.app-nav .ico img:not(.uface) { display: block; height: 30px; width: auto; }
.app-nav .on .uface { box-shadow: 0 0 0 2.5px var(--gold); }
.app-nav .ico .acc { fill: transparent; }
.app-nav .nm { font-size: 14px; font-weight: 800; line-height: 1.15; }
.app-nav .on { color: var(--ink); opacity: 1; }
.app-nav .on .ico svg { stroke-width: 2.6; }
.app-nav .on .ico .acc { fill: var(--gold); }
.app-nav .on .nm { background: linear-gradient(transparent 62%, var(--gold) 62%, var(--gold) 92%, transparent 92%); padding: 0 3px; }
body.has-app-nav:not(:has(#app)) { padding-bottom: 76px; }
body.playing .app-nav { display: none; }
/* Vote and Profile open between the top bar (header.js sets `top`) and the app nav, on every
   screen size. Its tabs close the view, so there's no ✕ and no profile button up top. */
body.has-app-nav .kh-close, body.has-app-nav .kh-me { display: none; }
body.has-app-nav .kh-h1, body.has-app-nav .kh-prof { margin-right: 0; }
.kh-screen { border-top: 1px solid var(--line); }
/* A player's face (KG.face): picture, or initial on their color. */
.uface { display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; background: #fff; }
span.uface { color: #fff; font-family: var(--ui, inherit); font-weight: 700; line-height: 1; text-shadow: 1px 1px 0 var(--ink); }
.kh-pic { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; cursor: pointer; }
.kh-pic > span:last-of-type { font-size: 12px; font-weight: 600; color: var(--ink-soft); text-decoration: underline; }
body.has-app-nav .kh-screen { bottom: calc(64px + env(safe-area-inset-bottom)); }

.kh-clan { display: inline-flex; align-items: center; gap: 5px; min-width: 0; text-decoration: none; color: var(--ink); font-family: var(--mono); font-size: 12px; font-weight: 700; border: 2px solid var(--ink); border-radius: 10px; padding: 2px 8px 2px 3px; background: var(--gold-soft); box-shadow: 2px 2px 0 var(--ink); white-space: nowrap; }
.kh-clan.fa { background: #fff; padding-left: 8px; color: var(--ink-soft); border-style: dashed; box-shadow: none; }
.kh-clan .kc-r { color: var(--ink-soft); }
.kh-clan .kc-t { min-width: 0; }
.kh-tag { font-family: var(--mono); color: var(--ink-soft); }

.gpfp { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 22%; border: 2px solid var(--ink); object-fit: cover; background: #fff; }
.gpfp-fb { color: var(--ink); font-family: var(--mono); font-weight: 700; letter-spacing: 0; line-height: 1; text-transform: uppercase; overflow: hidden; }
.fa-badge { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 2px; border: 2px dashed var(--ink); border-radius: 8px; padding: 4px 10px; background: #fff; }
.kh-myclan { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px; border: 2.5px solid var(--ink); border-radius: 14px; background: var(--gold-soft); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); text-decoration: none; }
.kh-myclan > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.kh-myclan b { font-size: 20px; }
.kh-myclan small { color: var(--ink-soft); }
.kh-myclan.fa { background: #fff; border-style: dashed; box-shadow: none; flex-wrap: wrap; }
.btn.danger { color: var(--red); border-color: var(--red); }

.receipt { position: fixed; z-index: 9000; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 20px)); background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--ink); padding: 12px 40px 12px 14px; animation: rc-in .35s cubic-bezier(.2, 1.4, .4, 1); transition: opacity .4s, transform .4s; }
.receipt.out { opacity: 0; transform: translate(-50%, -12px); }
@keyframes rc-in { from { transform: translate(-50%, -30px) scale(.9); opacity: 0; } }
.rc-top { display: flex; flex-direction: column; gap: 2px; }
.rc-pts { font-family: var(--mono); font-size: 22px; letter-spacing: 1px; background: linear-gradient(transparent 55%, var(--gold) 55%, var(--gold) 90%, transparent 90%); align-self: flex-start; }
.rc-top small, .rc-cap { font-size: 13px; color: var(--ink-soft); }
.rc-grp { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--ink); text-decoration: none; border-top: 1.5px dashed var(--line); padding-top: 10px; }
.rc-grp span { display: flex; flex-direction: column; min-width: 0; }
.rc-grp small { font-family: var(--mono); font-size: 13px; }
.rc-cap { display: block; margin-top: 8px; }
.rc-fa { margin: 8px 0; font-size: 14px; color: var(--ink-soft); }
.big-btn.rc-join { display: block; margin: 0; text-align: center; font-size: 13px; letter-spacing: 1px; padding: 10px 8px; color: var(--ink); text-decoration: none; }
.rc-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); font-size: 12px; }

.chat-empty { color: var(--ink-soft); font-size: 15px; line-height: 1.5; text-align: center; padding: 24px 12px; }

/* Social links: the landing page and the bottom of Profile */
.site-social { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 28px 0 8px; order: 99; }
.site-social a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 14px 7px 10px; background: var(--paper); }
.site-social a:hover { background: var(--gold-soft); }
.site-social svg { width: 20px; height: 20px; color: #5865f2; flex: none; }
.kh-game { cursor: default; }

/* ---------- vote page: this week's game on top, practice + vote for the rest ---------- */
.kh-card { position: relative; }
.kh-card.live { border-color: #c98f00; box-shadow: 0 0 0 3px var(--gold), 4px 5px 0 3px var(--ink); grid-column: 1 / -1; }
.kh-card.mine { box-shadow: 0 0 0 3px var(--green), 4px 4px 0 3px var(--ink); }
.kh-card.live { flex-flow: row wrap; }
.kh-card.live .kh-thumb { width: 96px; flex: none; aspect-ratio: auto; border-bottom: none; border-right: 2.5px solid var(--ink); }
.kh-card.live .kh-cb { flex: 1 1 0; min-width: 0; }
.kh-tag { flex: 0 0 100%; background: var(--gold); border-bottom: 2.5px solid var(--ink); padding: 6px 12px; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-align: center; }
.kh-dev { display: block; color: var(--ink-soft); font-size: 13px; margin-top: -4px; }
.kh-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 6px; }
.kh-acts .btn, .kh-acts .big-btn { width: 100%; margin: 0; text-align: center; text-decoration: none; color: var(--ink); font-size: 16px; padding: 8px 6px; }
.kh-cb a.big-btn { text-align: center; text-decoration: none; color: var(--ink); }
.btn.voted { background: #d9f2e6; }
@media (min-width: 901px) { .kh-card.live .kh-thumb { width: 38%; } }

/* practice pages: just the level and a PLAY button */
.practice-banner { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; padding: 10px 14px; border: 2px dashed var(--ink); border-radius: 12px; background: var(--gold-soft); font-size: 14px; }
.practice-banner b { letter-spacing: 2px; font-size: 12px; }
body.practice-only #homeScreen > .tabs, body.practice-only #tabBody, body.practice-only .m-nav, body.practice-only .m-share, body.practice-only .chat,
body.practice-only #recentAttempts, body.practice-only .hill-utilities, body.practice-only .secondary, body.practice-only .changelog { display: none !important; }

/* ---------- rewards in the profile (Harbor): balance, streak, 7-day check-in ---------- */
.rw { margin-top: 16px; padding: 16px; border: 2.5px solid var(--ink); border-radius: 18px; background: linear-gradient(160deg, #2b2440, #1c1830); color: #fff; box-shadow: 3px 4px 0 var(--ink); }
.rw-loading { color: #c9c3e6; font-size: 14px; }
.rw-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.rw-k { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: #c9c3e6; }
.rw-bal { display: flex; align-items: center; gap: 8px; font-size: 34px; font-weight: 800; line-height: 1.1; }
.rw-res { font-size: 12px; color: #c9c3e6; }
.rw-streak { font-size: 15px; color: #e6e2f7; white-space: nowrap; }
.rw-streak b { font-size: 20px; color: #fff; }
.rw-coin { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; object-fit: cover; }
.rw-coin-css { background: radial-gradient(circle at 35% 30%, #ffe680, #f0a90a 70%); color: #a86a00; border: 2px solid #c98400; line-height: 1; }
.rw-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 14px 0 12px; }
.rw-day { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.rw-tile { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 8px; border-radius: 12px; background: #453d63; }
.rw-tile b { font-size: 13px; }
.rw-gift { font-size: 20px; line-height: 22px; }
.rw-day small { font-size: 11px; color: #c9c3e6; white-space: nowrap; }
.rw-day.today .rw-tile { background: linear-gradient(180deg, #6a4cff, #4a2fe0); box-shadow: 0 0 0 2px #fff3; }
.rw-day.today small { color: #fff; font-weight: 700; }
.rw-day.claimed .rw-tile { opacity: .55; }
.big-btn.rw-btn { display: block; width: 100%; margin: 0; background: linear-gradient(180deg, #5b3dff, #4326e6); color: #fff; border-color: #15102b; box-shadow: 2px 3px 0 #15102b; font-size: 20px; }
.big-btn.rw-btn:disabled { background: #453d63; color: #c9c3e6; opacity: 1; box-shadow: none; }
.rw-note { margin: 10px 0 0; text-align: center; font-weight: 700; color: #ffe680; }
.rw-err { margin: 10px 0 0; font-size: 14px; color: #ffb4c2; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rw-err .btn { color: var(--ink); font-size: 13px; padding: 4px 10px; }
@media (max-width: 380px) { .rw { padding: 12px; } .rw-days { gap: 4px; } .rw-tile b { font-size: 12px; } }
.rw-locked .rw-bal { font-size: 24px; }
.rw-locked .rw-btn { margin-top: 14px; }
.rw-hint { margin: 10px 0 0; font-size: 12px; color: #c9c3e6; }

/* the "＋ Create a game" card at the end of the vote page */
a.kh-card.create { border-style: dashed; box-shadow: none; background: var(--gold-soft); color: var(--ink); text-decoration: none; }
.kh-card.create .kh-thumb { background: #fff; }
.kh-card.create .big-btn { text-align: center; }

/* ---------- the Vote: the feed (vote.html), the actions on a game's result card, the remix sheet ---------- */
.vl-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1.5px solid var(--ink); border-radius: 12px; font-size: 26px; line-height: 1; }
.v-intro { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 17px; }
.v-intro b { display: inline-block; width: 28px; text-align: center; }
.v-acts { display: flex; gap: 10px; }
.v-acts .v-star { flex: 1.5; margin: 0; }
.v-acts .v-remix { flex: 1; margin: 0; }
.v-acts .big-btn, .v-acts .btn { font-size: 19px; padding: 11px 8px; white-space: nowrap; }
.vote-after { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1.5px dashed var(--line); text-align: center; }
.remix-credit { margin: 0 0 10px; font-size: 14px; color: var(--ink-soft); }
.rx { display: flex; flex-direction: column; gap: 10px; }
.rx-src { display: flex; align-items: center; gap: 12px; font-size: 17px; }
.rx label { font-family: var(--display, inherit); font-size: 24px; }
.rx textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1.5px solid var(--ink); resize: vertical; }
.rx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rx-chips .chip { font-size: 14px; padding: 6px 10px; border-radius: 999px; box-shadow: none; }
.rx-chips .rx-surprise { background: var(--gold-soft); }
.rx-note { margin: 0; font-size: 13px; color: var(--ink-soft); }
.rx .big-btn:disabled { opacity: .45; }
/* The feed: one game per screen between the top bar and the app nav; swipe up for the next. */
body.feedpage { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 0 !important; }
.feedpage .topbar { flex: none; }
.feed { flex: 1; min-height: 0; margin: 0 0 calc(64px + env(safe-area-inset-bottom)); padding: 0; max-width: none; display: flex; flex-direction: column; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.feed::-webkit-scrollbar { display: none; }
.fd { position: relative; flex: 0 0 100%; min-height: 0; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 84px 26px 20px;
  background: radial-gradient(120% 70% at 50% 28%, #fffdf6 0%, var(--tint, #fff2bd) 62%), var(--tint, #fff2bd); }
.fd-n { position: absolute; top: 14px; left: 16px; font-size: 13px; font-weight: 700; padding: 4px 10px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fffcf2; }
.fd-art { position: absolute; left: 0; right: 0; top: 11%; text-align: center; font-size: min(42vw, 26vh, 190px); line-height: 1; filter: drop-shadow(5px 7px 0 rgba(36, 37, 31, .16)); pointer-events: none; }
.big-btn.fd-play { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); margin: 0; min-width: 190px; font-size: 28px; padding: 16px 30px; white-space: nowrap; }
.big-btn.fd-play:active { transform: translate(-50%, calc(-50% + 2px)); }
.fd-info { max-width: 34em; }
.fd-info h2 { margin: 0; font-size: clamp(32px, 9vw, 46px); line-height: 1.02; }
.fd-info small { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.fd-info p { margin: 8px 0 0; font-size: 17px; line-height: 1.35; }
.fd-rail { position: absolute; right: 12px; bottom: 26px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fd-rail button { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: 700 12px var(--ui, inherit); }
.fd-rail .ic { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border: 2px solid var(--ink); border-radius: 50%; background: #fffcf2; box-shadow: 2px 3px 0 var(--ink); font-size: 26px; line-height: 1; }
.fd-rail button:active .ic { transform: translateY(2px); box-shadow: none; }
.fd-rail .on .ic { background: var(--gold); }
.fd-hint { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 12px; font-weight: 600; color: var(--ink-soft); animation: fd-nudge 1.6s ease-in-out infinite; pointer-events: none; }
@keyframes fd-nudge { 50% { transform: translateY(-4px); } }
.fd-end { justify-content: center; align-items: center; text-align: center; padding: 20px; }
.fd-end .fd-art { position: static; margin-bottom: 12px; font-size: 96px; }
.fd-end .fd-info { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fd-end .btn { text-decoration: none; color: var(--ink); }
/* a game being played: its own page in a frame over everything */
.fd-player { position: fixed; inset: 0; z-index: 95; background: var(--paper); }
.fd-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; }
.fd-player.live iframe { opacity: 1; }
.fd-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; font: 26px var(--display, inherit); }
.fd-exit { position: absolute; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 1; font-size: 13px; font-weight: 700; padding: 5px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fffcf2e6; }
/* …and inside that frame, only the game shows: no bars, no home screen */
body.embed .topbar, body.embed .app-nav, body.embed .m-nav, body.embed .chat, body.embed .phone-nudge { display: none !important; }
body.embed:not(.playing) #app { visibility: hidden; }
.v-next { align-self: center; background: none; border: none; padding: 4px 12px; font-size: 16px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
/* sign in by texting us; have UrMove text a friend; connect a group chat */
.phone-text { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.phone-text .big-btn { display: block; width: 100%; margin: 0; text-align: center; text-decoration: none; color: var(--ink); box-sizing: border-box; }
.phone-text-go { margin: 4px 0; font-size: 20px; text-align: center; }
.phone-text-go b { font-size: 26px; white-space: nowrap; }
.phone-or { margin: 6px 0 0; text-align: center; font-size: 13px; color: var(--ink-soft); }
.share-invite { margin: 12px 0 0; }
.share-invite label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.share-invite span { display: flex; gap: 8px; }
.share-invite input { flex: 1; min-width: 0; padding: 8px 10px; border: 1.5px solid var(--ink); }
.share-invite small { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-soft); }
.gp-chat { margin: 0 0 8px; padding-left: 22px; font-size: 16px; line-height: 1.5; }
.gp-cmd { font-family: var(--mono); background: var(--gold-soft); padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
/* profile: the other groups you're in, under your home group */
.kh-clans { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.kh-clans a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; }

/* Group navigation lives in the header, beside the active group badge. */
.kh-group-picker{position:relative;flex:0 1 auto;min-width:0}
.kh-group-picker[hidden]{display:none}
.kh-group-picker summary{cursor:pointer;list-style:none;max-width:100%}
.kh-group-picker summary::-webkit-details-marker{display:none}
.kh-group-picker summary:focus-visible{outline:3px solid #4264da;outline-offset:3px}
.kc-chevron{font-size:12px;margin-left:3px}
.kh-group-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:100;width:min(310px,calc(100vw - 32px));max-height:65dvh;overflow:auto;padding:10px;background:var(--paper);border:2px solid var(--ink);border-radius:14px;box-shadow:3px 4px 0 var(--ink)}
.kh-group-menu>strong{display:block;padding:6px 10px;font-size:14px;color:var(--ink-soft)}
.kh-group-menu a{display:flex;align-items:center;gap:10px;padding:12px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font:600 16px var(--ui);white-space:normal}
.kh-group-menu a span{overflow-wrap:anywhere}.kh-group-menu .gpfp{flex:none}.kh-group-menu small{margin-left:auto}
.kh-group-menu a[aria-current],.kh-group-menu a:hover{background:var(--gold-soft)}
.kh-group-menu .kh-group-add{border-top:1px solid var(--line);margin-top:6px;border-radius:0}

/* Keep the voting deadline visible while candidate cards swipe underneath. */
.vote-banner{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;background:var(--gold-soft);border-bottom:1.5px solid var(--line)}
.vote-banner strong{display:block;font:24px/1.1 var(--display)}
.vote-banner span{display:block;font:13px/1.3 var(--ui);color:var(--ink-soft);margin-top:3px}
.vote-banner time{flex:none;white-space:nowrap;font:700 21px/1.2 var(--ui);font-variant-numeric:tabular-nums;background:var(--paper);border:1.5px solid var(--ink);border-radius:10px;padding:8px 10px}
@media(max-width:380px){.vote-banner{padding:10px 12px;gap:8px}.vote-banner strong{font-size:21px}.vote-banner time{font-size:18px;padding:7px}}

/* Guest challenges expose gameplay, not private group conversation. */
body.guest-play #chat { display: none; }

body.guest-play #secondaryStats, body.guest-play #reignLabel, body.guest-play #kingName, body.guest-play .tabs, body.guest-play #tabBody { display: none; }

/* Short, non-blocking celebration above game results and optional sign-in. */
.win-celebration { position:fixed; inset:0; z-index:10010; pointer-events:none; overflow:hidden; }
.win-confetti { position:absolute; width:9px; height:14px; animation:win-confetti 2s cubic-bezier(.16,.6,.45,1) both; }
@keyframes win-confetti { 0% { opacity:0; transform:translate(0,0) rotate(0); } 10% { opacity:1; } 40% { transform:translate(calc(var(--fly-x) * .55),var(--fly-y)) rotate(calc(var(--spin) * .4)); } 100% { opacity:0; transform:translate(var(--fly-x),var(--fall-y)) rotate(var(--spin)); } }
@media (prefers-reduced-motion:reduce) { .win-confetti { display:none; } }

/* ---------- group looks (lib/cosmetics.js): frame on the picture, badge by the name, banner behind the row ---------- */
.gpfp.gl-frame-gold { border-color: #b97f00; outline: 2px solid #f0b90b; outline-offset: 1px; }
.gpfp.gl-frame-fire { border-color: #a8300f; outline: 2px solid #ff6a2b; outline-offset: 1px; }
.gpfp.gl-frame-ice { border-color: #1d6f96; outline: 2px solid #6fcdf5; outline-offset: 1px; }
.gbadge { display: inline-block; margin-left: .3em; font-size: .8em; line-height: 1; vertical-align: baseline; }
.gbadge.gl-badge-crown::after { content: '👑'; }
.gbadge.gl-badge-flame::after { content: '🔥'; }
.gbadge.gl-badge-star::after { content: '⭐'; }
.gl-banner-sunset { background: linear-gradient(110deg, #ffe27a, #ffb38a) !important; }
.gl-banner-arcade { background: linear-gradient(110deg, #d9d2ff, #b9e3ff) !important; }
.gl-banner-mint { background: linear-gradient(110deg, #c9f3d8, #eef7b0) !important; }
.gp-head[class*="gl-banner-"] { padding: 12px; border: 1.5px solid var(--ink); border-radius: 16px; }
.gp-look { flex-wrap: wrap; }
.gp-look-opts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.gp-look .chip { font-size: 14px; padding: 5px 10px; box-shadow: none; }
.gp-look .chip.on { background: var(--gold); }
.rw-more { display: block; margin-top: 12px; text-align: center; color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; padding: 10px; border: 1.5px solid #ffffff55; border-radius: 12px; }
.rw-more:hover { background: #ffffff14; }

/* Inside Discord: sign-in trouble, said plainly at the top of the page (public/discord.js). */
.discord-problem { position: sticky; top: 0; z-index: 200; padding: 10px 14px; background: #a93429; color: #fff; font: 600 15px/1.35 var(--ui); text-align: center; }

/* in-page yes/no and notices (KG.ask / KG.say), used where the browser's own dialogs are switched off */
.ask-modal { z-index: 10001; }
.ask-modal .ask-text { white-space: pre-line; color: var(--ink); font-size: 18px; overflow-wrap: anywhere; }

/* Result and interstitial cards replace gameplay controls until play resumes. */
#gameScreen:has(#overlay:not([hidden]), .king-intro) :is(.touch, .tdbar) { display: none !important; }

/* the + after the faces on the Play tab: invite friends */
.hill-faces .u-add { padding: 0; background: var(--gold); color: var(--ink); font: 700 24px/1 var(--ui); cursor: pointer; }
.hill-faces .u-add:hover { background: var(--gold-soft); }

/* ---------- the victory GIF loot box (KG.crownLoot) ---------- */
.loot { z-index: 9500; background: rgba(24, 22, 40, .82); }
.loot-card { max-width: 440px; text-align: center; overflow: hidden; }
.loot-title { margin: 4px 0 12px; font-size: 26px; }
.loot-reel { position: relative; height: 112px; margin: 0 -22px; overflow: hidden; background: #1c1830; border-block: 3px solid var(--ink); }
.loot-strip { position: relative; left: 50%; display: flex; width: max-content; height: 100%; will-change: transform; }
.loot-strip img { flex: none; width: 104px; height: 96px; margin: 8px 4px; object-fit: cover; border-radius: 10px; background: #453d63; }
.loot-pin { position: absolute; top: 0; bottom: 0; left: 50%; width: 112px; margin-left: -56px; border: 4px solid var(--gold); border-radius: 14px; box-shadow: 0 0 0 200px rgba(28, 24, 48, .35), 0 0 22px 4px rgba(255, 204, 40, .7); pointer-events: none; }
.loot-reel.landed .loot-pin { animation: loot-pop .5s ease-out; }
@keyframes loot-pop { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
.loot-prize { margin: 14px auto 0; }
.loot-prize img { display: block; max-width: 100%; max-height: 200px; margin: 0 auto; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); animation: loot-in .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes loot-in { from { opacity: 0; transform: scale(.6) rotate(-4deg); } to { opacity: 1; transform: none; } }
.loot-acts { margin-top: 12px; }
.loot-acts .big-btn { width: 100%; margin: 0; }
.loot-acts .btns { justify-content: center; margin-top: 10px; }
.loot .gif-search { text-align: left; }
.loot .gif-grid { max-height: 42dvh; }
.ev-gif { display: block; width: 120px; max-width: 100%; margin-top: 6px; border-radius: 8px; border: 1.5px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .loot-prize img, .loot-reel.landed .loot-pin { animation: none; } }
.loot [hidden] { display: none !important; }
/* the search inside the loot box (the group Settings picker has its own copy in group.css) */
.loot .gif-search { display: flex; gap: 8px; margin: 10px 0; }
.loot .gif-search input { flex: 1; min-width: 0; }
.loot .gif-search .gif-back { flex: none; padding: 0 14px; font-size: 20px; line-height: 1; }
.loot .gif-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; min-height: 120px; overflow-y: auto; }
.loot .gif-grid .hub-note { grid-column: 1 / -1; color: var(--ink-soft); }
.loot .gif-grid button { padding: 0; border: 2px solid transparent; border-radius: 10px; background: var(--line); overflow: hidden; aspect-ratio: 1 / 1; cursor: pointer; }
.loot .gif-grid button:hover, .loot .gif-grid button:focus-visible { border-color: var(--gold); }
.loot .gif-grid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.loot .gif-by { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; text-align: right; margin: 6px 0 0 !important; }

/* owned group looks on the profile's rewards card (the swatch styles are shared with /rewards) */
.rw-looks { margin-top: 14px; }
.rw-look-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.rw-look { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 76px; text-align: center; }
.rw-look small { font-size: 11px; color: #e6e2f7; line-height: 1.2; }
.rs-sw { width: 56px; height: 56px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 28px; border-radius: 12px; background: #fff; border: 1.5px solid var(--line); overflow: hidden; }
.rs-sw .gbadge { margin: 0; font-size: 30px; }
.rs-sw.rs-banner { border-color: var(--ink); }

/* A new player's first remix is live: the nudge to start a game chat of their own (groups.js).
   Above the points receipt, which arrives at the same moment. */
.chat-offer { z-index: 9500; }
.chat-offer .big-btn { display: block; box-sizing: border-box; margin: 4px 0 0; text-align: center; text-decoration: none; color: var(--ink); }
.chat-offer .btn { display: block; width: 100%; margin-top: 10px; }
.phone-text .big-btn.phone-wa { background: #d9f7e3; }

/* Strategic defenses, selected after the victory GIF. */
.curse-choices { display: grid; gap: 10px; }
.curse-choices .btn { text-align: left; white-space: normal; padding: 14px; }
.curse-choices b, .curse-choices span { display: block; }
.curse-choices span { font: 16px/1.4 sans-serif; margin-top: 6px; }
.curse-zone { display: grid; gap: 6px; margin-top: 16px; }
.curse-zone select { padding: 10px; font: inherit; border: 2px solid #26241f; border-radius: 10px; }

.curse-modal { z-index: 10000; }
.curse-modal .modal-card { max-height: calc(100dvh - 32px); overflow-y: auto; }

/* Looping curse demonstrations; stop motion when the device requests it. */
.curse-choices .btn { display: grid; grid-template-columns: minmax(0, 1fr) 88px; align-items: center; gap: 6px 10px; }
.curse-choices .btn > span { grid-column: 1 / -1; margin-top: 0; }
.curse-preview { width: 88px; height: 62px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; pointer-events: none; background-color: var(--paper); background-image: linear-gradient(#dce3ed 1px, transparent 1px), linear-gradient(90deg, #dce3ed 1px, transparent 1px); background-size: 12px 12px; }
.preview-scribble { animation: curse-patrol .65s ease-in-out infinite alternate; }
.preview-darkness { animation: curse-fade 4s ease-in-out infinite; }
.preview-landing { animation: curse-land 3.4s ease-in infinite; }
.preview-ledge-left { animation: curse-break-left 3.4s ease-in infinite; }
.preview-ledge-right { animation: curse-break-right 3.4s ease-in infinite; }
@keyframes curse-patrol { from { transform: translateX(-4px); } to { transform: translateX(48px); } }
@keyframes curse-fade { 0%, 100% { opacity: 0; } 50% { opacity: .85; } }
@keyframes curse-land { 0%, 10% { transform: translateY(-38px); opacity: 0; } 15% { opacity: 1; } 35%, 50% { transform: translateY(0); opacity: 1; } 76%, 100% { transform: translateY(50px); opacity: 0; } }
@keyframes curse-break-left { 0%, 49%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 76%, 90% { transform: translate(-9px, 38px) rotate(-12deg); opacity: 0; } }
@keyframes curse-break-right { 0%, 49%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 76%, 90% { transform: translate(9px, 30px) rotate(12deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .curse-preview * { animation: none; }
  .preview-darkness { opacity: .65; }
  .preview-scribble { transform: translateX(22px); }
}
.discovery-progress { display:grid; grid-template-columns:20px 1fr; gap:5px 8px; max-width:230px; margin:20px auto; color:var(--ink-soft); }
.discovery-progress progress { width:100%; height:10px; accent-color:var(--gold); align-self:center; }
.discovery-progress small { grid-column:2; font-size:12px; }
.toolbox-locked { display:flex; gap:10px; justify-content:center; margin-top:16px; }
.toolbox-locked span { background:var(--line); border-radius:10px; width:44px; height:44px; display:grid; place-items:center; font-size:24px; }
.toolbox-recap { font-size:14px; border-left:3px solid var(--gold); padding-left:10px; }
.placement-map { display:block; width:180px; height:240px; max-width:100%; margin:10px auto; background:var(--paper); border:2px solid var(--line); border-radius:10px; }
.placement-options { display:grid; gap:8px; margin-bottom:12px; }
.placement-options [aria-pressed="true"] { background:var(--gold); }
/* A toy tray and the real hill: one place to build a defense. */
#gameScreen.defense-workspace { display:flex; flex-direction:column; }
.defense-workspace #touch, .defense-workspace #toolbar { display:none !important; }
.defense-workspace .hud { padding:10px 4px; gap:6px; flex-wrap:nowrap; }
.defense-workspace .hud .title { font-size:24px; }
.defense-workspace .hud .sub { font-size:12px; }
.defense-workspace .hud > .btn { font-size:13px; padding:8px; min-height:38px; height:auto; }
#defenseDock { flex:0 0 auto; padding:8px 6px max(8px,env(safe-area-inset-bottom)); border-top:2px solid var(--line); background:var(--paper); }
.defense-tool-row { display:flex; gap:7px; overflow-x:auto; padding:3px 3px 7px; scrollbar-width:thin; }
.defense-toy { flex:0 0 70px; border:2px solid var(--ink); border-radius:14px; background:var(--paper); padding:3px; display:flex; flex-direction:column; align-items:center; box-shadow:2px 3px 0 var(--ink); }
.defense-toy[aria-pressed="true"] { background:#fff0a1; border-color:#26241f; transform:rotate(-3deg); }
.defense-toy .curse-preview { width:60px; height:46px; background:none; border:0; }
.defense-toy span { font:14px/1.1 var(--display, sans-serif); padding:2px 0; }
.defense-toy.collection b { font-size:30px; color:#d4a600; }
.defense-caption { display:flex; align-items:baseline; gap:8px; margin:3px 0 7px; line-height:1.2; }
.defense-caption b { display:none; }
.defense-caption span { font-size:12px; color:var(--ink-soft); }
.defense-locations { display:flex; gap:5px; margin-bottom:8px; }
.defense-locations .chip { flex:1; font-size:12px; padding:6px 3px; white-space:normal; }
.defense-locations [aria-pressed="true"] { background:var(--gold); color:var(--ink); }
.defense-publish { display:flex; gap:8px; }
.defense-publish .big-btn { flex:1; margin:0; min-height:48px; padding:10px 8px; font-size:22px; letter-spacing:0; }
.defense-publish .btn { padding:8px; font-size:15px; }
.defense-footnote { display:block; text-align:center; font-size:11px; color:var(--ink-soft); margin-top:7px; }
.arsenal-modal .modal-card { width:min(480px,100%); text-align:center; }
.arsenal-modal h2 { text-transform:uppercase; text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:5px; text-underline-offset:6px; margin:0 0 12px; }
.arsenal-crown { color:#e9a910; font-size:42px; line-height:1; }
.arsenal-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.arsenal-tool { border:2px solid var(--ink); border-radius:14px; padding:8px 4px; background:var(--paper); color:var(--ink); box-shadow:2px 3px 0 var(--ink); }
.arsenal-tool .curse-preview { display:block; width:100%; height:70px; background:none; border:0; }
.arsenal-tool b { display:block; font:20px/1.15 var(--display); }
.arsenal-tool.locked { opacity:.45; background:#d9d7cf; box-shadow:none; }
.arsenal-tool.locked svg { filter:grayscale(1); opacity:.3; }
.discovery-cards { grid-template-columns:1fr; }
.discovery-cards .arsenal-tool { display:grid; grid-template-columns:80px 1fr; column-gap:12px; text-align:left; padding:10px; }
.discovery-cards svg { grid-column:1; grid-row:1/3; height:80px !important; }
.discovery-cards b { font-size:22px; align-self:end; }
.discovery-cards span { font-size:14px; line-height:1.3; padding-top:4px; }
@media (orientation:landscape) and (max-height:560px) {
  #gameScreen.defense-workspace { display:grid; grid-template-columns:250px 1fr; grid-template-rows:auto 1fr; }
  .defense-workspace #defenseDock { grid-column:1; grid-row:2; overflow-y:auto; min-height:0; }
  .defense-workspace .canvas-wrap { grid-column:2; grid-row:1/3; }
  .defense-workspace .hud .title { font-size:20px; }
  .defense-workspace .hud .sub { display:none; }
  .defense-workspace .defense-tool-row { flex-wrap:nowrap; }
  .defense-workspace .defense-caption { min-height:29px; }
}

img.arsenal-crown { display:block; width:48px; height:40px; margin:0 auto 8px; }

/* The spin: a clean white "SPIN RESULT" card in the brand's line-art style (thick black
   outline, flat yellow accents), floating on a gold sunburst over the dimmed hill. Three
   reels each frame their result between two ghost neighbours; tap one, then CHOOSE 1 TO PLACE. */
.spin-modal .modal-card { position:relative; background:transparent; border:none; box-shadow:none; padding:0; overflow:visible; max-width:340px; }
.spin-burst { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:150%; aspect-ratio:1; z-index:0; pointer-events:none;
  background:repeating-conic-gradient(from 6deg, #ffd12e 0deg 3.4deg, transparent 3.4deg 15deg);
  -webkit-mask-image:radial-gradient(circle, transparent 30%, #000 36%, rgba(0,0,0,.65) 48%, transparent 62%);
  mask-image:radial-gradient(circle, transparent 30%, #000 36%, rgba(0,0,0,.65) 48%, transparent 62%);
  opacity:.95; animation:spin-rays 90s linear infinite; }
@keyframes spin-rays { to { transform:translate(-50%,-50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin-burst { animation:none; } }
.spin-card { position:relative; z-index:1; width:min(300px,100%); margin:0 auto; padding:16px 16px 18px; background:#fffdf6; border:4px solid #26241f; border-radius:26px; box-shadow:5px 7px 0 rgba(38,36,31,.9); }
.spin-head { text-align:center; font-family:'LilitaOne','Boogaloo',var(--ui); font-size:24px; letter-spacing:.5px; color:#26241f; margin:0 0 12px; white-space:nowrap; }
.spin-reels { display:flex; gap:9px; align-items:flex-start; justify-content:center; }
.spin-reel { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; background:none; border:none; padding:0; cursor:default; }
.spin-card.landed .spin-reel { cursor:pointer; }
.spin-ptr { width:0; height:0; margin-bottom:5px; border-left:8px solid transparent; border-right:8px solid transparent; border-top:11px solid #f3b200; filter:drop-shadow(0 1.5px 0 #26241f); }
.spin-window { position:relative; width:100%; height:150px; overflow:hidden; } /* three 50px cells */
.spin-window::before, .spin-window::after { content:""; position:absolute; left:0; right:0; height:52px; z-index:3; pointer-events:none; }
.spin-window::before { top:0; background:linear-gradient(#fffdf6, rgba(255,253,246,0)); }
.spin-window::after { bottom:0; background:linear-gradient(rgba(255,253,246,0), #fffdf6); }
.spin-strip { display:flex; flex-direction:column; will-change:transform; }
.spin-cell { height:50px; display:flex; align-items:center; justify-content:center; }
.spin-cell .curse-preview { width:90%; max-width:44px; height:auto; }
.spin-frame { position:absolute; left:50%; top:50px; transform:translateX(-50%); width:calc(100% - 4px); height:50px; z-index:2; pointer-events:none; border:3px solid #26241f; border-radius:11px; box-shadow:0 0 0 2px #fffdf6; transition:box-shadow .12s, border-color .12s; }
.spin-card.landed .spin-reel.sel .spin-frame { border-color:#26241f; box-shadow:0 0 0 4px #ffc927, 0 0 0 6px #26241f; }
.spin-card.landed .spin-reel.sel .spin-label { color:#26241f; }
.spin-label { margin-top:9px; font-family:var(--ui); font-size:12px; font-weight:800; line-height:1.1; text-align:center; color:#8a8577; transition:color .12s; }
.spin-card.landed .spin-label { color:#26241f; }
.spin-desc { margin:13px 2px 0; font-family:var(--ui); font-size:13px; font-weight:600; line-height:1.3; color:#26241f; text-align:center; }
.spin-confirm { display:block; width:100%; margin:11px 0 0; padding:13px; font-family:'LilitaOne','Boogaloo',var(--ui); font-size:18px; letter-spacing:1px; color:#26241f; background:#ffcf33; border:4px solid #26241f; border-radius:15px; box-shadow:0 5px 0 rgba(38,36,31,.85); cursor:pointer; transition:filter .12s; }
.spin-confirm:disabled { filter:grayscale(.55) opacity(.6); cursor:default; }
.spin-confirm:not(:disabled):active { transform:translateY(3px); box-shadow:0 2px 0 rgba(38,36,31,.85); }
.spin-foot { display:block; width:100%; margin:11px 0 0; padding:0; border:none; background:none; font-family:var(--ui); font-size:12px; font-weight:700; color:#6b665a; cursor:pointer; }
/* Boon ribbon — the lucky one-round surprise that sometimes drops onto a spin (no rarity labels,
   just a flashy pop-in). Sits between the title and the reels; pops in a beat after the reels land. */
.spin-boon { margin:0 0 12px; padding:9px 12px; border:3px solid #26241f; border-radius:14px;
  background:linear-gradient(100deg,#fff3c4,#ffd84d 55%,#ffc927); box-shadow:0 4px 0 rgba(38,36,31,.85);
  display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center;
  animation:boon-pop .46s cubic-bezier(.34,1.56,.64,1) both; }
.spin-boon-tag { font-family:'LilitaOne','Boogaloo',var(--ui); font-size:16px; letter-spacing:.6px; color:#26241f; line-height:1.1; }
.spin-boon-blurb { font-family:var(--ui); font-size:11.5px; font-weight:700; color:#4a3b10; line-height:1.25; }
.spin-card.boon-crownboost .spin-boon { background:linear-gradient(100deg,#ffe0a3,#ffb23e 55%,#ff9a2e); }
.spin-card.boon-instantunlock .spin-boon { background:linear-gradient(100deg,#d8f5c9,#8fe06a 55%,#5fc93a); }
.spin-card.boon-momentum .spin-boon { background:linear-gradient(100deg,#ffd2c2,#ff8a5c 55%,#ff6a3d); }
@keyframes boon-pop { 0%{ transform:scale(.4) translateY(-8px); opacity:0; } 60%{ transform:scale(1.06); opacity:1; } 100%{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .spin-boon { animation:none; } }
/* The golden-boon spin glows while it waits to be claimed. */
.spin-card.boon-golden.boon-shown .spin-reel.sel .spin-frame { box-shadow:0 0 0 4px #ffb300, 0 0 14px 3px rgba(255,179,0,.7), 0 0 0 6px #26241f; }
.boon-won { margin:6px 0 0; font-family:var(--ui); font-weight:800; color:#2e7d32; }
/* The unlock reveal (flow step 1): the new toy floats on the dimmed hill as clean line-art —
   no halo (the gold sunburst is the slot machine's). You then transition into the Toybox. */
.unlock-modal .modal-card { background:transparent; border:none; box-shadow:none; padding:0; overflow:visible; max-width:340px; }
.unlock-card { position:relative; z-index:1; width:min(300px,100%); margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center; }
.unlock-card.unlock-zoom { animation:unlock-zoom .44s cubic-bezier(.45,0,.55,1) forwards; transform-origin:center 62%; }
@keyframes unlock-zoom { 0%{ transform:scale(1); opacity:1; } 32%{ transform:scale(1.12); opacity:1; } 100%{ transform:scale(.34) translateY(54px); opacity:0; } }
.tb-enter { animation:tb-enter .4s cubic-bezier(.2,1,.4,1) both; }
@keyframes tb-enter { 0%{ transform:scale(.9); opacity:0; } 100%{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .unlock-card.unlock-zoom, .tb-enter { animation:none; } }
.unlock-hero.pop { animation:unlock-heropop .45s cubic-bezier(.2,1.5,.5,1) both; }
@keyframes unlock-heropop { 0%{ transform:scale(.6) rotate(-6deg); opacity:0; } 100%{ transform:scale(1) rotate(0); opacity:1; } }
.unlock-banner { font-family:'LilitaOne','Boogaloo',var(--ui); font-size:22px; line-height:1.08; letter-spacing:.5px; color:#26241f; background:#fffdf6; border:4px solid #26241f; border-radius:16px; box-shadow:4px 5px 0 rgba(38,36,31,.9); padding:12px 20px; }
.unlock-hero { margin:22px 0 12px; min-width:130px; padding:14px 18px 12px; display:flex; flex-direction:column; align-items:center; gap:6px; background:#fffdf6; border:4px solid #26241f; border-radius:20px; box-shadow:4px 5px 0 rgba(38,36,31,.9); }
.unlock-hero .curse-preview { width:84px; max-width:84px; height:auto; }
.unlock-name { font-family:'LilitaOne','Boogaloo',var(--ui); font-size:17px; letter-spacing:.3px; color:#26241f; }
.unlock-blurb { font-family:var(--ui); font-size:14px; font-weight:700; line-height:1.35; color:#26241f; background:#fffdf6; border:3px solid #26241f; border-radius:12px; box-shadow:3px 4px 0 rgba(38,36,31,.85); padding:9px 14px; max-width:250px; margin:0; }
.unlock-go { width:auto; min-width:210px; margin-top:18px; }
.unlock-grid { display:flex; gap:10px; margin:18px 0 0; }
.unlock-pick { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px; padding:12px 6px; background:#fffdf6; border:4px solid #26241f; border-radius:16px; box-shadow:3px 4px 0 rgba(38,36,31,.9); font-family:var(--ui); font-size:12px; font-weight:800; color:#26241f; cursor:pointer; }
.unlock-pick .curse-preview { width:48px; max-width:48px; height:auto; }
.unlock-added { margin:18px 0 8px; font-family:var(--ui); font-size:12px; font-weight:800; letter-spacing:.3px; color:#2e7d32; }
.unlock-shelf { display:flex; gap:8px; justify-content:center; }
.unlock-slot { position:relative; width:52px; height:52px; display:flex; align-items:center; justify-content:center; background:#fffdf6; border:3px solid #26241f; border-radius:12px; box-shadow:2px 3px 0 rgba(38,36,31,.85); }
.unlock-slot .curse-preview { width:36px; max-width:36px; height:auto; }
.unlock-slot:not(.new) { opacity:.55; }
.unlock-slot.new { animation:unlock-drop .5s cubic-bezier(.2,1.4,.5,1) .15s both; }
.unlock-slot .tb-new { position:absolute; top:-7px; left:-5px; background:#ffd329; border:2px solid #26241f; border-radius:6px; font-size:8px; font-weight:800; padding:1px 3px; z-index:1; }
@keyframes unlock-drop { 0%{ transform:translateY(-26px) scale(.7); opacity:0; } 100%{ transform:translateY(0) scale(1); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .unlock-slot.new { animation:none; } }
.spin-choices { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.spin-pick { display:grid; grid-template-columns:52px 1fr; grid-template-rows:auto auto; gap:0 12px; align-items:center; text-align:left; padding:10px 12px; border:3px solid #26241f; border-radius:14px; background:#fff; cursor:pointer; }
.spin-pick:hover, .spin-pick:focus-visible { background:#fff1c7; transform:translateY(-1px); }
.spin-pick .curse-preview { grid-row:1/3; width:48px; height:44px; }
.spin-pick b { font-size:16px; }
.spin-pick span { grid-column:2; font-size:12px; opacity:.72; }
.defense-toy.respin b, .defense-toy.collection b { font-size:20px; }

/* The Toybox collection (Toybox tab). */
.toybox-view { padding:2px 0 8px; }
.tb-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.tb-head h2 { margin:0; }
.tb-head span { font-size:13px; color:var(--ink-soft,#7a756a); font-weight:700; }
.tb-progress { display:flex; align-items:center; gap:10px; margin:8px 0 4px; }
.tb-progress progress { flex:1; height:10px; }
.tb-progress small { color:var(--ink-soft,#7a756a); }
.tb-note { font-size:12px; color:var(--ink-soft,#7a756a); margin:2px 0 12px; }
.tb-family { border:2px solid #26241f; border-radius:14px; padding:10px 12px; margin-bottom:10px; background:#fffdf6; }
.tb-fam-head { display:flex; align-items:center; gap:10px; }
.tb-fam-ico { font-size:22px; width:30px; text-align:center; }
.tb-fam-id { flex:1; min-width:0; }
.tb-fam-id b { display:block; }
.tb-fam-id small { color:var(--ink-soft,#7a756a); font-size:12px; }
.tb-mastery { letter-spacing:1px; color:#f0a200; font-size:14px; white-space:nowrap; }
.tb-tools { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tb-tool { width:76px; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px; border:2px solid #26241f; border-radius:10px; background:#fff; }
.tb-tool .curse-preview { width:58px; height:44px; }
.tb-tool span { font-size:11px; text-align:center; line-height:1.1; }
.tb-tool.locked { opacity:.5; border-style:dashed; }
.tb-tool.offered { border-color:#f0a200; box-shadow:0 0 0 2px #ffd32955; }
.tb-lock { width:58px; height:44px; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:#26241f; }
.tb-evolve { padding:5px 11px; font-size:12px; font-weight:800; background:#ffd329; border:2px solid #26241f; border-radius:999px; white-space:nowrap; cursor:pointer; }
.tb-family.ready { box-shadow:0 0 0 2px #f0a20088; animation:tb-pulse 1.6s ease-in-out infinite; }
@keyframes tb-pulse { 50% { box-shadow:0 0 0 4px #f0a20044; } }
.tb-tool.evolveOffered, .tb-tool.offered { border-color:#f0a200; box-shadow:0 0 0 2px #ffd32955; }
/* The just-unlocked toy, highlighted when you land in the Toybox from the unlock reveal. */
.tb-tool.tb-just { border-color:#f0a200; box-shadow:0 0 0 3px #ffd32977; animation:tb-pop .5s cubic-bezier(.2,1.4,.5,1) both; }
@keyframes tb-pop { 0%{ transform:scale(.8); } 60%{ transform:scale(1.08); } 100%{ transform:scale(1); } }
/* The Spin button that sits on the Toybox during the take-the-hill flow (the one next step). */
.tb-spin { margin-top:6px; display:flex; align-items:center; justify-content:center; gap:8px; }
.evo-modal .evo-title { margin:4px 0; }
.evo-cards { margin-top:12px; }

/* Toybox categories (horizontally scrollable tabs + grid). */
.tb-cats { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 12px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tb-cats::-webkit-scrollbar { display:none; }
.tb-cat { flex:0 0 auto; padding:6px 14px; border:2px solid #26241f; border-radius:999px; background:#fffdf6; font-weight:700; font-size:13px; cursor:pointer; white-space:nowrap; }
.tb-cat.on { background:#ffd329; }
/* The grid pages horizontally (8 per page, 4×2) so undiscovered ??? slots never dominate;
   swipe left/right, dots track the page. */
.tb-pager { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.tb-pager::-webkit-scrollbar { display:none; }
.tb-page { flex:0 0 100%; scroll-snap-align:start; display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:1fr; gap:8px; align-content:start; }
.tb-page .tb-tool { width:auto; position:relative; }
.tb-dots { display:flex; justify-content:center; gap:7px; margin:12px 0 2px; }
.tb-dots i { width:7px; height:7px; border-radius:50%; background:#d9d2c2; transition:background .15s, transform .15s; }
.tb-dots i.on { background:#f0a200; transform:scale(1.2); }
.tb-new { position:absolute; top:-6px; left:-4px; background:#ffd329; border:2px solid #26241f; border-radius:6px; font-size:9px; font-weight:800; padding:1px 4px; z-index:1; }
.tb-evos { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 4px; }

/* The toolbar stays in reading order; the pad follows the selected object. */
.defense-workspace .hud:has(.placement-actions) { flex-direction:column; align-items:stretch; }
.defense-workspace #hud .placement-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; width:100%; }
.defense-workspace #hud .placement-actions .btn { min-width:0; min-height:44px; padding:6px 2px; font-size:16px; letter-spacing:0; white-space:nowrap; }
.defense-workspace #hud .placement-actions [data-h="undo"] { font-size:16px !important; }
.defense-workspace #hud .placement-actions [data-h="undo"]::before { content:none; }
.placement-actions [aria-pressed="true"] { background:#fff0a1; }
.placement-move-pad { position:absolute; display:grid; grid-template:repeat(3,44px)/repeat(3,44px); gap:2px; z-index:2; pointer-events:none; filter:drop-shadow(0 3px 8px #26241f33); }
.placement-move-pad[hidden] { display:none; }
.placement-move-pad .btn { pointer-events:auto; touch-action:manipulation; width:44px; height:44px; padding:0; font:28px/1 sans-serif; border-radius:12px; background:var(--paper); }
.move-up { grid-area:1/2; }
.move-left { grid-area:2/1; }
.move-right { grid-area:2/3; }
.move-down { grid-area:3/2; }

.hill-music-card { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; margin:8px 0; border:2px solid var(--ink); border-radius:14px; background:#fff4c3; text-align:left; }
.hill-music-label { display:flex; flex-direction:column; min-width:0; }
.hill-music-label b { font-size:16px; }
.hill-music-label span { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#defenseDock .hill-music-card .btn { flex-shrink:0; font-size:18px; min-height:44px; padding:6px 12px; }
.song-modal .modal-card { width:min(460px,calc(100vw - 24px)); max-height:calc(100dvh - 40px); overflow:auto; }
.song-modal .song-save-note { font-size:13px; color:var(--ink-soft); margin:16px 0; }
.song-modal .song-row { padding:8px 0; }
.song-modal .song-row .btn { font-size:18px; }
.song-modal .song-row span { font-weight:700; font-size:16px; }
.song-choices { border:2px solid var(--line); border-radius:12px; padding:8px; }
.song-choices p { margin:0 0 8px; color:var(--ink-soft); font-size:13px; }
.song-row { display:flex; align-items:center; gap:8px; margin:6px 0; }
.song-row span { flex:1; min-width:0; text-align:left; }
.song-row .btn { padding:6px 10px; min-height:44px; font-size:16px; }
.song-actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-top:10px; }
.music-toggle { font-size:14px; padding:6px 10px; }

/* Compact gameplay controls and group progress stay above the playfield. */
#gameScreen > #hud.play-hud { display:grid; grid-template-columns:minmax(0,1fr); gap:7px; padding:5px 4px 9px; }
#hud.play-hud .btns { display:flex; flex-wrap:nowrap; justify-content:flex-end; gap:6px; width:100%; }
#hud.play-hud .btns .btn { flex:0 1 auto; min-width:44px; height:44px; min-height:44px; padding:0 12px; font:500 13px var(--ui); border:1px solid #ddd7c8; border-radius:9px; background:#fffdf6; color:#656153; box-shadow:none; letter-spacing:0; white-space:nowrap; }
#hud.play-hud .btns [data-h="help"] { color:#b33232; border-color:#e7bdb6; background:#fff2ed; }
#hud.play-hud .map-progress { padding:10px 12px 12px; margin-bottom:5px; background:#fff0a6; border-width:2px; }
#hud.play-hud .mp-title { font-size:20px; }
#hud.play-hud .mp-bar { height:18px; margin-top:10px; }
#hud.play-hud .title { font-size:22px; line-height:1.1; }
#hud.play-hud .sub { font-size:12px; line-height:1.4; }
#hudNote:empty { display:none; }
/* The group mutation bar — a zany mini-game element ("PLAY MORE TO MUTATE!"): a chunky ink-outlined
   bar with a bubbling goo fill creeping toward a googly-eyed mutant blob that hatches when ready. */
.map-progress { box-sizing:border-box; width:100%; min-width:0; border:2px solid #26241f; border-radius:11px; padding:6px 9px 8px; color:#38342b; background:#fff5c6; text-align:left; cursor:pointer; overflow:hidden; box-shadow:2px 3px 0 rgba(38,36,31,.9); font-family:var(--ui); }
.map-progress[hidden] { display:none; }
.map-progress:disabled { opacity:1; cursor:default; }
.mp-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mp-title { font-family:'LilitaOne','Boogaloo',var(--ui); font-size:14px; letter-spacing:.5px; color:#26241f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; animation:mp-title-bob 2.4s ease-in-out infinite; transform-origin:left center; }
@keyframes mp-title-bob { 0%,100%{ transform:rotate(-1.2deg) translateY(0); } 50%{ transform:rotate(1.2deg) translateY(-1px); } }
.mp-gen { flex-shrink:0; font-size:10px; letter-spacing:1px; font-weight:800; color:#8a6a12; background:#ffe79a; border:1.5px solid #26241f; border-radius:5px; padding:1px 5px; }
.mp-bar { position:relative; display:block; height:14px; margin-top:7px; padding-right:0; border:2px solid #26241f; border-radius:9px; background:#efe6c6; }
.mp-goo { position:absolute; left:0; top:0; bottom:0; min-width:0; border-radius:7px 0 0 7px; background:linear-gradient(#8fe0a0,#5cc98e); box-shadow:inset 0 2px 0 #b8f0c4; overflow:hidden; transition:width .4s cubic-bezier(.2,1.25,.4,1); }
.mp-bar.ready .mp-goo { border-radius:7px; background:linear-gradient(#c7a8ff,#9b7bff); box-shadow:inset 0 2px 0 #e2d4ff; }
.mp-bub { position:absolute; bottom:-3px; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.75); animation:mp-bub 2.3s linear infinite; }
.mp-bub:nth-child(1){ left:22%; animation-delay:0s; } .mp-bub:nth-child(2){ left:54%; animation-delay:.8s; } .mp-bub:nth-child(3){ left:82%; animation-delay:1.55s; }
@keyframes mp-bub { 0%{ transform:translateY(0) scale(.5); opacity:0; } 25%{ opacity:.85; } 100%{ transform:translateY(-13px) scale(1); opacity:0; } }
.mp-mascot { position:absolute; left:clamp(0px,calc(var(--progress,0%) - 11px),calc(100% - 22px)); top:50%; width:22px; height:27px; margin-top:-17px; transition:left .4s ease; animation:mp-mascot-bob 1.7s ease-in-out infinite; transform-origin:bottom center; }
@keyframes mp-mascot-bob { 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-2px) rotate(3deg); } }
.mp-bar.ready .mp-mascot { animation:mp-mascot-hatch .5s ease-in-out infinite; }

@keyframes mp-mascot-hatch { 0%,100%{ transform:translateY(0) scale(1) rotate(-7deg); } 50%{ transform:translateY(-6px) scale(1.2) rotate(9deg); } }
@media (prefers-reduced-motion:reduce) { .mp-title, .mp-bub, .mp-mascot, .mp-goo { animation:none !important; transition:none; } }
.map-modal .modal-card { width:min(540px,94vw); max-height:88dvh; display:flex; flex-direction:column; overflow:hidden; padding:0; text-align:center; }
.map-modal p { line-height:1.45; }
/* Constrained scroll area + a fixed footer the cards never hide behind. */
.mut-scroll { flex:1; min-height:0; overflow:auto; padding:18px 18px 10px; }
/* Horizontal (stacked) option rows — a wide thumbnail beside roomy text, so nothing is squished. */
.map-choices { margin:14px 0 4px; }
.mut-grid { display:flex; flex-direction:column; gap:10px; }
.map-choice { position:relative; display:flex; flex-direction:row; align-items:center; overflow:hidden; text-align:left; border:2px solid #28261f; border-radius:16px; background:#fffdf6; color:#28261f; cursor:pointer; box-shadow:2px 3px 0 #28261f; }
.map-choice.selected { outline:4px solid #ffd32c; outline-offset:1px; background:#fff6c4; }
.map-choice .mut-prev { width:116px; flex:none; height:auto; display:block; align-self:center; margin:9px; border:2px solid #28261f; border-radius:10px; background:#fffdf6; }
.mc-check { position:absolute; top:8px; right:10px; width:26px; height:26px; border-radius:50%; background:#ffd32c; border:2px solid #28261f; color:#28261f; font-size:15px; display:flex; align-items:center; justify-content:center; box-shadow:1px 2px 0 #28261f; z-index:2; }
.mc-body { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:10px 12px 10px 2px; }
.mut-tag { align-self:flex-start; margin:0 0 4px; padding:2px 9px; border-radius:999px; font-family:'LilitaOne', var(--mono); font-weight:400; font-size:10.5px; letter-spacing:.7px; text-transform:uppercase; color:#6a6450; background:#ece7da; }
.mut-tag.mut-keep { background:#c7ecc9; color:#2f6b36; }
.mut-tag.mut-change { background:#ffe8a3; color:#8a6d13; }
.mut-tag.mut-add { background:#f7c7bb; color:#9e3a28; }
.mut-tag.mut-revert { background:#dde5f2; color:#3f567e; }
.map-choice b { display:block; margin:0 0 2px; font-family:'LilitaOne', system-ui; font-weight:400; text-transform:uppercase; font-size:16px; line-height:1.05; letter-spacing:.2px; }
.map-choice small { display:block; margin:0; font-size:12.5px; line-height:1.28; color:#5a5848; }
.theme-thumbs { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; }
.tb-thumb { width:54px; padding:0; border:2px solid #28261f; border-radius:8px; overflow:hidden; background:#fff; cursor:pointer; box-shadow:1px 2px 0 #28261f; line-height:0; }
.tb-thumb.sel { outline:3px solid #ffb02e; outline-offset:1px; }
.tb-thumb canvas { width:100%; height:auto; display:block; }
.theme-name { margin:6px 0 1px; font:400 15px 'LilitaOne', var(--mono); }
.map-carry-note { font-size:13px; color:#79766a; margin:12px 0 2px; }
.map-actions { flex:none; display:flex; gap:10px; align-items:center; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); border-top:2px solid #28261f; background:#fffdf6; }
.map-actions .btn { flex:none; margin:0; }
.map-actions .big-btn { flex:1; margin:0; font-size:20px; }
.map-error:empty { display:none; }
.map-error { color:#a52f42; font-size:14px; }
#lockBanner.tappable { cursor:pointer; }
.map-modal h2 { position:relative; display:inline-block; z-index:0; margin:6px 0; font-family:'LilitaOne', system-ui; text-transform:uppercase; font-size:28px; color:#ffd94a; -webkit-text-stroke:4px #1c1a14; paint-order:stroke fill; text-shadow:0 3px 0 #1c1a14, 0 6px 0 rgba(28,26,20,.22); letter-spacing:.5px; line-height:1.0; }
.map-modal h2::before { content:''; position:absolute; inset:-22px -44px; z-index:-1; pointer-events:none;
  background:repeating-conic-gradient(from 7deg, #ffc92f 0deg 3deg, transparent 3deg 24deg);
  -webkit-mask:radial-gradient(closest-side, transparent 60%, #000 63%, #000 69%, transparent 72%);
          mask:radial-gradient(closest-side, transparent 60%, #000 63%, #000 69%, transparent 72%); opacity:.8; }

/* The king's little potion lab, shown while the next world is being prepared. */
.mutation-wait { padding:22px 14px; }
.mutation-wait-card { max-width:480px; margin:0 auto; text-align:center; border:2px solid var(--ink); border-radius:24px; background:var(--paper,#fffdf6); padding:24px 18px; box-shadow:4px 6px 0 var(--ink); }
.mutation-wait-card h1 { font-size:34px; line-height:1.15; margin:8px 0 14px; }
.mutation-wait-card p { font-size:16px; line-height:1.5; }
.mutation-wait-card .big-btn { width:100%; font-size:25px; margin:18px 0 12px; }
.mutation-wait-card > .btn { margin-top:12px; }
.mutation-lab { position:relative; height:235px; max-width:330px; margin:12px auto; overflow:hidden; border-radius:20px; background:radial-gradient(ellipse at 70% 70%,#dbf7ad 0,transparent 52%),repeating-linear-gradient(0deg,transparent 0 23px,#dedde840 24px),repeating-linear-gradient(90deg,transparent 0 23px,#dedde840 24px); }
.lab-scientist { position:absolute; left:40px; bottom:38px; width:108px; height:151px; animation:lab-bob 2.8s ease-in-out infinite; }
.lab-scientist .lab-face { position:absolute; left:8px; top:4px; border:3px solid var(--ink); border-radius:50%; object-fit:cover; z-index:3; font-size:32px; }
.lab-crown { position:absolute; top:-26px; left:31px; font-size:36px; color:#e5ad00; z-index:4; transform:rotate(-12deg); }
.lab-coat { position:absolute; bottom:0; left:4px; width:90px; height:78px; border:3px solid var(--ink); border-radius:25px 25px 5px 5px; background:#fff; }
.lab-coat:before { content:''; position:absolute; top:0; bottom:0; left:43px; border-left:2px solid #b8b5ab; }
.lab-coat i { position:absolute; width:18px; height:15px; border:2px solid #b8b5ab; top:38px; left:10px; }
.lab-coat i+i { left:57px; }
.lab-arm { position:absolute; z-index:4; width:72px; height:20px; border:3px solid var(--ink); background:#fff; border-radius:18px; left:62px; top:92px; transform-origin:10px center; animation:lab-stir 2.8s ease-in-out infinite; }
.lab-potion { position:absolute; bottom:32px; right:32px; width:115px; height:160px; }
.lab-flask { position:absolute; bottom:0; width:110px; height:85px; border:3px solid var(--ink); border-radius:18px 18px 45px 45px; background:#f4ffee; overflow:hidden; }
.lab-flask i { position:absolute; top:20px; bottom:-15px; left:-10px; right:-10px; border-radius:40%; background:#a6da53; border-top:3px solid #79b83b; animation:lab-liquid 3s ease-in-out infinite; }
.lab-flask b { position:absolute; top:35px; left:46px; font-size:28px; }
.lab-stir { position:absolute; bottom:55px; left:22px; width:8px; height:85px; background:#b88a50; border:2px solid var(--ink); transform:rotate(-18deg); transform-origin:bottom; animation:lab-stir 2.8s ease-in-out infinite; z-index:1; }
.lab-bubble { position:absolute; bottom:80px; left:45px; width:13px; height:13px; border:2px solid #5a9134; background:#d3ef9f; border-radius:50%; animation:lab-bubble 3s ease-out infinite; }
.lab-bubble.b2 { left:70px; width:9px; height:9px; animation-delay:1s; }
.lab-bubble.b3 { left:27px; animation-delay:2s; }
.lab-table { position:absolute; bottom:30px; left:15px; right:15px; height:7px; border-radius:8px; background:var(--ink); }
.lab-spark { position:absolute; color:#b18b00; font-size:27px; animation:lab-bob 3s ease-in-out infinite; }
.spark-one { top:15px; right:30px; }.spark-two { top:78px; left:10px; animation-delay:-1s; }
.lab-formula { position:absolute; right:5px; top:12px; font:12px var(--mono); transform:rotate(7deg); color:#7a766a; }
.lab-brewing { display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; color:var(--ink-soft); }
.lab-brewing i { width:8px; height:8px; border-radius:50%; background:#81b346; animation:lab-bob 2s ease-in-out infinite; }
.mutation-clock span { display:block; font:42px var(--display); }.mutation-clock small { font-size:12px; color:var(--ink-soft); }
@keyframes lab-bob { 50% { transform:translateY(-5px) rotate(-2deg); } }
@keyframes lab-stir { 50% { transform:rotate(8deg); } }
@keyframes lab-liquid { 50% { transform:translateY(4px) rotate(6deg); } }
@keyframes lab-bubble { 0% { opacity:0; transform:translateY(0) scale(.5); } 20% { opacity:1; } 100% { opacity:0; transform:translateY(-90px) scale(1.2); } }
@media (prefers-reduced-motion:reduce) { .mutation-lab *, .lab-brewing i { animation:none; } .lab-bubble { opacity:.65; } }

/* Identity first; mutation progress and utility actions share one compact surface. */
#gameScreen > #hud.play-hud{gap:6px;padding:6px 6px 8px}
#hud.play-hud .hud-identity{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;min-width:0}
#hud.play-hud .hud-identity .title{font-size:18px;line-height:1.2}
#hud.play-hud .hud-king{font:500 13px/1.3 var(--ui);color:var(--ink-soft);overflow-wrap:anywhere}
#hud.play-hud .hud-progress-unit{overflow:hidden;border:1.5px solid #b4a575;border-radius:12px;background:#fff4bf;box-shadow:0 2px 0 #d9cfab}
#hud.play-hud .hud-progress-unit .map-progress{display:block;margin:0;padding:8px 11px 10px;border:0;border-radius:0;background:transparent;box-shadow:none}
#hud.play-hud .hud-progress-unit .map-progress[hidden]{display:none}
#hud.play-hud .hud-progress-unit .mp-title{font-size:17px}
#hud.play-hud .hud-progress-unit .mp-bar{height:14px;margin-top:8px}
#hud.play-hud .hud-progress-unit .btns{gap:2px;justify-content:flex-end;border-top:1px solid #dfd3a3;padding:0 5px;box-sizing:border-box;background:#fff9df}
#hud.play-hud .hud-progress-unit .btns .btn{height:44px;min-height:44px;padding:0 10px;border:0;background:transparent;border-radius:6px;font-size:12px}
#hud.play-hud .hud-progress-unit .btns [data-h="help"]{color:#b33232}
#hud.play-hud .hud-progress-unit .btns .btn:hover{background:#f4ebcb}
#hud.play-hud .hud-progress-unit:has(.map-progress[hidden]) .btns{border-top:0}

#minimap[hidden]{display:none!important}
.run-hint{position:absolute;z-index:4;top:24px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);box-sizing:border-box;padding:12px 22px;border:2px solid #26241f;border-radius:5px;background:#ffd329;color:#26241f;box-shadow:4px 4px 0 #26241f;font:26px/1.1 var(--display);letter-spacing:1px;text-align:center;pointer-events:none;animation:run-hint-fade 1.8s ease-out both}
@keyframes run-hint-fade{0%{opacity:0;transform:translateX(-50%) scale(.85)}12%{opacity:1;transform:translateX(-50%) scale(1.06)}22%,72%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.run-hint{animation-name:run-hint-reduced}}
@keyframes run-hint-reduced{0%,80%{opacity:1}100%{opacity:0}}

/* Full-width playfield and compact, thumb-friendly controls. */
.hill-page.playing #canvasWrap{gap:0;padding:0;margin:0;width:100%}
.hill-page.playing #touch{padding:8px 12px max(8px,env(safe-area-inset-bottom));gap:8px;background:var(--paper)}
.hill-page.playing #touch button{flex:0 0 76px;width:76px;height:64px;min-height:64px;border:1px solid #d1cec3;border-radius:13px;background:#fff;color:#000;box-shadow:0 3px 0 #c4c0b4,inset 0 2px 0 #fff;display:flex;align-items:center;justify-content:center;touch-action:none;position:relative;isolation:isolate}
.hill-page.playing #touch button svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.hill-page.playing #touch button.jump{flex:1 1 auto;max-width:210px;min-width:110px;width:auto;border-color:#b78316;background:linear-gradient(165deg,#ffe36b,#ffc52b);color:#352a15;box-shadow:0 3px 0 #a97822,inset 0 2px 0 #fff6c2;font:700 17px var(--ui);letter-spacing:.5px}
.hill-page.playing #touch button.down{transform:translateY(2px);box-shadow:0 1px 0 #c4c0b4,inset 0 2px 4px #00000012;background:#f0f0ed}
.hill-page.playing #touch button.jump.down{background:#f4b920;box-shadow:0 1px 0 #a97822,inset 0 2px 4px #8b5b1826}
.hill-page.playing #touch button:focus-visible{outline:3px solid #202d63;outline-offset:4px}

#hud.play-hud .hud-progress-unit .hud-version{margin-right:auto;padding-left:6px;font:500 12px/1.3 var(--ui);color:var(--ink-soft);white-space:nowrap}

/* The saved collection stays within thumb reach while the hill remains visible. */
.editor-tray-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 6px 4px; }
.editor-tray-head b { font:20px var(--display); }
.tray-collection { border:0; background:none; color:var(--ink-soft); padding:6px; font-family:inherit; font-size:12px; }
.editor-tabs { display:flex; gap:5px; overflow-x:auto; padding:3px 2px 7px; scrollbar-width:none; }
.editor-tabs button { flex-shrink:0; border:0; border-radius:9px; padding:8px 10px; background:transparent; color:var(--ink-soft); font-size:12px; min-height:36px; }
.editor-tabs button[aria-pressed="true"] { background:var(--ink); color:var(--paper); }
.editor-tools { display:flex; overflow-x:auto; gap:8px; padding:2px 3px 7px; }
.editor-tool { flex:0 0 76px; border:1px solid #d6d0bd; border-radius:12px; background:#fffdf5; padding:5px; color:var(--ink); }
.editor-tool[aria-pressed="true"] { background:#fff0a1; border:2px solid #b48a23; padding:4px; }
.editor-tool .curse-preview { width:60px; height:40px; background:none; border:0; }
.editor-tool span { display:block; font-size:11px; line-height:1.2; min-height:26px; }
.editor-tools p { margin:12px 4px; font-size:13px; color:var(--ink-soft); }
.editor-placement-status { font-size:12px; color:var(--ink-soft); padding:2px 5px 7px; }
#defenseDock .hill-music-card { padding:4px 6px; margin:0 0 6px; }
#defenseDock .hill-music-label span { font-size:11px; }
#defenseDock .hill-music-card .btn { min-height:32px; font-size:13px; padding:4px 8px; }
#defenseDock .hill-music-label b { font-size:13px; }
#defenseDock .defense-publish .big-btn { min-height:42px; font-size:19px; padding:8px; }
#defenseDock { border-radius:20px 20px 0 0; padding:8px 10px max(8px,env(safe-area-inset-bottom)); max-height:42dvh; overflow-y:auto; }

.mark-editor { margin:5px 0 8px; border:1px solid #ded8c5; border-radius:12px; padding:9px 12px; background:#fffdf5; }
.mark-editor summary { cursor:pointer; font-weight:650; font-size:14px; }
.mark-editor summary small { float:right; font-weight:400; color:var(--ink-soft); }
.mark-editor label { display:block; font-size:12px; margin:10px 0 5px; }
.mark-input { display:flex; align-items:center; gap:8px; }
.mark-input input { flex:1; min-width:0; padding:10px; border:1px solid #c9c3b1; border-radius:8px; font-size:16px; background:white; }
.mark-input span { font-size:11px; color:var(--ink-soft); }
.mark-actions { display:flex; gap:8px; margin-top:8px; }
.mark-actions .btn { font:13px sans-serif; min-height:36px; padding:6px 10px; box-shadow:none; }
.mark-editor p { font-size:11px; color:var(--ink-soft); margin:8px 0 0; }

/* One focused tray for tools, lettering and soundtrack. */
.editor-sections { display:flex; gap:4px; padding:0 0 8px; margin-bottom:6px; border-bottom:1px solid #e4dfd0; }
.editor-sections button { flex:1; min-height:40px; border:0; border-radius:9px; background:transparent; color:var(--ink-soft); font:600 13px var(--ui); cursor:pointer; }
.editor-sections button[aria-pressed="true"] { color:var(--ink); background:#eee9db; }
#defenseDock:not([data-section="tools"]) :is(.editor-tray-head,.editor-tabs,.editor-tools,.editor-placement-status) { display:none; }
#defenseDock:not([data-section="text"]) .mark-editor, #defenseDock:not([data-section="music"]) .hill-music-card { display:none; }
#defenseDock .mark-editor { border:0; background:transparent; padding:0 3px 10px; margin:0; }
#defenseDock .mark-editor summary { display:none; }
#defenseDock .mark-editor label { margin-top:2px; }
#defenseDock .hill-music-card { border:0; box-shadow:none; background:transparent; border-radius:0; padding:8px 3px 14px; }
#defenseDock .editor-tray-head b { font:600 12px var(--ui); color:var(--ink-soft); }
#defenseDock .editor-tool { border-color:transparent; background:transparent; }
#defenseDock .editor-tool[aria-pressed="true"] { border-color:#b48a23; background:#fff0a1; }
#defenseDock .editor-tools { padding-bottom:3px; }
#defenseDock .editor-placement-status { font-size:11px; padding:4px 4px 8px; }
#defenseDock .defense-publish { padding-top:8px; border-top:1px solid #e4dfd0; }
#defenseDock [data-remove] { border:0; box-shadow:none; background:transparent; color:#8b4233; }
#defenseDock [data-remove][hidden] { display:none; }
.defense-workspace #hud .placement-actions .btn { border:0; box-shadow:none; background:transparent; font:500 12px var(--ui); min-height:40px; }
.defense-workspace #hud .placement-actions [data-h="undo"] { font-size:12px!important; }
.defense-workspace #hud .placement-actions .btn:disabled { opacity:.35; }

/* King and navigation share the first row; scoring and reset stay below the map meter. */
#hud.play-hud .hud-identity { width:100%; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:12px; }
#hud.play-hud .hud-identity .title { min-width:0; overflow-wrap:anywhere; }
#hud.play-hud .hud-identity .hud-back { flex-shrink:0; min-height:44px; padding:0 8px; border:0; box-shadow:none; background:transparent; font:500 13px var(--ui); }
#hud.play-hud .hud-progress-unit .btns { display:flex; flex-wrap:nowrap; align-items:center; }
#hud.play-hud .hud-progress-unit .hud-version { min-width:0; white-space:normal; font-size:11px; }
#hud.play-hud .hud-progress-unit .btns [data-h="points"] { color:#8e392e; white-space:nowrap; padding:0 8px; }
.help-sections { display:flex; gap:5px; margin-bottom:18px; padding:4px; background:#eee9db; border-radius:10px; }
.help-sections button { flex:1; min-height:42px; border:0; border-radius:7px; color:var(--ink-soft); background:transparent; font:600 13px var(--ui); cursor:pointer; }
.help-sections button[aria-pressed="true"] { background:var(--paper); color:var(--ink); box-shadow:0 1px 3px #26241f15; }
.hill-help [data-guide-panel][hidden] { display:none; }
.hill-help .points-rules { margin:0; }
.hill-help .points-rules dt { display:flex; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid #ded8c5; }
.hill-help .points-rules dt b { white-space:nowrap; color:#775e0f; }
.hill-help .points-rules dd { margin-bottom:16px; }
.hill-help .points-fine { color:var(--ink-soft); font-size:13px; line-height:1.5; }

#hud.play-hud .mp-gen { max-width:48%; white-space:normal; text-align:center; font-size:9px; letter-spacing:0; padding:3px 5px; line-height:1.2; }
#hud.play-hud .hud-progress-unit .hud-leader { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#hud.play-hud .hud-progress-unit .mp-title { font-size:17px; letter-spacing:0; }

.hill-page .defeat-art.defeat-obstacle { width:220px; max-width:85%; height:150px; object-fit:contain; margin:18px auto 22px; border-radius:18px; transform:none; }
.hill-page .overlay .defeat-attribution { font:700 20px/1.4 var(--ui); color:#fff9e7; margin:0 0 42px; }

.editor-bonus { font:12px/1.4 var(--ui); color:var(--ink-soft); margin:0 3px 8px; }

.hill-page .overlay .defeat-award:not([hidden]) { display:block; margin-top:10px; font:700 16px/1.4 var(--ui); color:#ffdc52; }

/* The progress card shares the palette of the course currently being played. */
#hud.play-hud .hud-progress-unit { background:var(--map-sky); border-color:var(--map-decor); box-shadow:0 2px 0 var(--map-decor); }
#hud.play-hud .hud-progress-unit .map-progress,
#hud.play-hud .hud-progress-unit .mp-title,
#hud.play-hud .hud-progress-unit .hud-version,
#hud.play-hud .hud-progress-unit .btns .btn { color:var(--map-ink); }
#hud.play-hud .hud-progress-unit .mp-gen { color:var(--map-ink); border-color:var(--map-ink); background:color-mix(in srgb,var(--map-accent) 22%,var(--map-sky)); }
#hud.play-hud .hud-progress-unit .mp-bar { border-color:var(--map-ink); background:var(--map-grid); }
#hud.play-hud .hud-progress-unit .mp-goo { background:linear-gradient(color-mix(in srgb,var(--map-accent) 60%,white),var(--map-accent)); box-shadow:inset 0 2px 0 color-mix(in srgb,var(--map-accent) 35%,white); }
#hud.play-hud .hud-progress-unit .mp-bar.ready .mp-goo { background:linear-gradient(var(--map-accent),var(--map-ink)); }
#hud.play-hud .hud-progress-unit .btns { border-color:var(--map-decor); background:color-mix(in srgb,var(--map-sky) 70%,white); }
#hud.play-hud .hud-progress-unit .btns .btn:hover { background:var(--map-grid); }

/* Two-reel round reward, using the game's ink outlines and gold/lilac palette. */
.round-modal { z-index:210; }
.round-modal .modal-card { max-width:440px; width:calc(100% - 28px); max-height:90dvh; overflow:auto; padding:24px; border:3px solid #28251e; border-radius:26px; background:#fffbed; box-shadow:0 8px 0 #28251e; }
.round-spin { text-align:center; }
.round-spin h2 { margin:8px 0; font-size:36px; }
.round-spin p { font-size:15px; }
.round-reel { position:relative; overflow:hidden; display:grid; place-items:center; min-height:100px; margin:12px 0; padding:12px; border:3px solid #292439; border-radius:16px; background:#eee8fb; box-shadow:inset 0 8px 14px #40305712; }
.round-reel small { font:700 10px var(--ui); letter-spacing:2px; color:#655576; }
.round-reel strong { font-family:var(--heading,inherit); font-size:27px; line-height:1.3; }
.round-reel:first-of-type strong { font-size:42px; }
.round-modal.rolling .round-reel strong { animation:round-tick .15s linear infinite; }
.round-allowance { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; padding:10px 12px; margin-bottom:8px; border:2px solid #4b3a63; border-radius:12px; background:#eee8fb; font-size:13px; }
.round-allowance span { font-size:11px; color:#685b78; }
.round-items { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.round-items .btn { font-size:13px; min-height:40px; padding:6px 10px; }
.round-items [aria-pressed="true"],.round-variants [aria-pressed="true"] { background:#ffdb39; }
.round-variants { max-height:320px; overflow:auto; margin-bottom:10px; }
.variant-head { font:700 13px var(--ui); color:var(--ink,#26241f); margin:2px 2px 9px; }
.variant-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.variant-card { display:flex!important; flex-direction:column; align-items:center; text-align:center; gap:3px; padding:12px 8px!important; white-space:normal; font-family:var(--ui); border-radius:13px; }
.variant-card .variant-ico { font-size:27px; line-height:1; }
.variant-card b { font-size:13px; display:block; }
.variant-card .variant-desc { font-size:10.5px; font-weight:400; color:var(--ink-soft,#6b665a); display:block; line-height:1.25; }
#defenseDock [hidden] { display:none !important; }
@keyframes round-tick { from {transform:translateY(-6px);opacity:.5} to {transform:translateY(6px);opacity:1} }

#defenseDock .round-allowance { position:sticky; top:-8px; z-index:2; margin-top:-1px; }
#defenseDock:has(.round-allowance) .defense-publish { position:sticky; bottom:-8px; background:var(--paper); z-index:2; padding-bottom:4px; }

/* Three-row reward reveal: number, category, then distinct illustrated items. */
.round-modal .round-spin h2 { font-size:30px; margin:4px 0; }
.round-modal .round-spin > p { margin:8px 0; font-size:13px; }
.round-modal .round-count,.round-modal .round-category { min-height:62px; padding:7px; margin:8px 0; }
.round-modal .round-count strong { font-size:30px; }
.round-modal .round-category strong { font-size:23px; }
.round-item-reel { min-height:142px; padding:8px; margin:8px 0; background:#fff1b4; }
.round-item-reel [data-item-picture] { height:74px; display:grid; place-items:center; }
.round-item-reel .curse-preview { width:120px; height:74px; object-fit:contain; border-radius:10px; }
.round-item-icon { display:grid; place-items:center; width:74px; height:66px; color:#493660; font-size:43px; }
.round-item-reel [data-item-name] { font-size:15px; min-height:20px; }
.round-reel.is-rolling strong,.round-reel.is-rolling [data-item-picture] { animation:round-tick .15s linear infinite; }
.round-winnings { display:flex; gap:6px; justify-content:center; }
.round-winning { flex:1; min-width:0; max-width:110px; padding:6px 3px; border:2px solid #4b3a63; border-radius:12px; background:#f4efff; }
.round-winning .curse-preview { display:block; width:58px; height:36px; object-fit:contain; margin:auto; }
.round-winning .round-item-icon { font-size:25px; width:auto; height:36px; }
.round-winning span:last-child { display:block; font-size:11px; line-height:1.2; margin-top:3px; }
.round-modal [hidden] { display:none!important; }

/* Three mechanical reels in the current map's palette. */
.casino-modal .modal-card { background:var(--slot-sky);border:4px solid var(--slot-ink);box-shadow:0 7px 0 var(--slot-ink),inset 0 0 0 7px var(--slot-decor),0 16px 35px #0004;color:var(--slot-ink);padding:24px;max-width:390px;border-radius:28px; }
.casino { text-align:center;position:relative; }
.casino-marquee { font:700 42px var(--display);color:var(--slot-ink);padding:10px 0;border-bottom:3px solid var(--slot-decor); }
.casino p { font-size:14px;color:var(--slot-ink);margin-top:10px; }
.casino-reels { display:grid;grid-template-columns:repeat(var(--slot-reels,3),minmax(0,1fr));gap:5px;padding:12px 8px;border:3px solid var(--slot-ink);border-radius:18px;background:var(--slot-accent);box-shadow:0 5px 0 var(--slot-ink),inset 0 3px 0 #ffffff70; margin:22px 0 26px;position:relative; }
.casino-reels::after { content:'';position:absolute;right:-15px;top:50px;width:9px;height:65px;border:3px solid var(--slot-ink);border-radius:8px;background:var(--slot-decor);box-shadow:0 -10px 0 4px var(--slot-accent); }
.casino-window { height:180px;overflow:hidden;position:relative;background:#fffdf6;border:2px solid var(--slot-ink);border-radius:9px; }
.casino-window::after { content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0005,transparent 30%,transparent 70%,#0005);box-shadow:inset 0 0 12px #0003; }
.casino-strip { will-change:transform;transform:translateY(30px); }
.casino-cell { height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;color:var(--slot-ink);border-bottom:1px solid #0001; }
.casino-cell > span { font:48px "Apple Color Emoji","Segoe UI Emoji",sans-serif;line-height:1.1;display:block;width:54px;height:54px; }
.casino-cell svg, .casino-cell img { width:54px;height:54px;object-fit:contain; }
.casino-cell small { font:700 11px var(--ui);min-height:14px;max-width:100%;padding:0 4px;text-align:center;overflow-wrap:anywhere; }
.casino-result { min-height:42px;line-height:1.5;font-weight:600; }
.casino .big-btn { width:100%;background:var(--slot-ink);color:#fff;text-shadow:0 1px 2px #0007;border:2.5px solid var(--slot-ink);box-shadow:0 5px 0 #0004,0 9px 18px #00000022;font-family:var(--display); }

/* A brief casino win chase; only earned symbols glow. No rapid flashing. */
.casino-modal.has-rewards .casino-window.is-winner { border-color:#dfaa20;box-shadow:0 0 0 2px #fff4aa,0 0 15px #ffcf4d;background:#fff3bc; }
.casino-modal.has-rewards .casino-window.is-winner::after { background:linear-gradient(#8e651b44,transparent 30%,transparent 70%,#8e651b44); }
.casino-modal.has-rewards .casino-result { color:var(--slot-ink); }
.casino-modal.celebrating .casino-window.is-winner { animation:slot-reward-glow .8s ease-in-out 3; }
.casino-modal.celebrating .casino-marquee { text-shadow:0 0 18px #ffdb63; }
.casino-modal .casino-reels::before { content:'';position:absolute;inset:-9px;border-radius:23px;pointer-events:none;opacity:0;border:4px dotted #ffe680; }
.casino-modal.celebrating .casino-reels::before { animation:slot-chase .8s ease-in-out 3; }
@keyframes slot-reward-glow { 0%,100% { box-shadow:0 0 0 2px #fff4aa,0 0 12px #ffcf4d; } 50% { box-shadow:0 0 0 3px #fff8cf,0 0 25px #ffd34c; } }
@keyframes slot-chase { 0%,100% { opacity:.45;filter:drop-shadow(0 0 2px #ffe680); } 50% { opacity:1;filter:drop-shadow(0 0 7px #ffcf4d); } }

/* One local flash on each usable symbol as its reel stops. */
.casino-window.reward-flash::before { content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,#fffce7 0%,#ffe879aa 42%,#ffd44900 75%);animation:slot-land-flash .6s ease-out both; }
.casino-window.reward-flash .casino-cell > span { filter:drop-shadow(0 0 8px #ffc943); }
.casino-window.reward-flash::after { background:radial-gradient(circle at 15% 25%,#fff 0 3px,transparent 4px),radial-gradient(circle at 82% 35%,#fff 0 3px,transparent 4px),radial-gradient(circle at 25% 75%,#ffdc54 0 4px,transparent 5px),radial-gradient(circle at 80% 80%,#fff 0 3px,transparent 4px);animation:slot-land-sparkles .65s ease-out both;z-index:3; }
@keyframes slot-land-flash { 0% { opacity:0; } 15% { opacity:.9; } 100% { opacity:0; } }
@keyframes slot-land-sparkles { 0% { opacity:0;transform:scale(.65); } 25% { opacity:1; } 100% { opacity:0;transform:scale(1.15); } }

/* Brighter casino feel: running marquee bulbs, a glowing reel frame, and a light chase while spinning. */
.casino-marquee { text-shadow:0 0 12px #ffe27a77,0 2px 0 #0002; }
.casino-marquee::before,.casino-marquee::after { content:'';position:absolute;left:0;right:0;height:9px;background:radial-gradient(circle at 5px 4.5px,#fffdf0 0 2.6px,#ffd86b00 3.4px);background-size:18px 9px;background-repeat:repeat-x;filter:drop-shadow(0 0 3px #ffd86b);pointer-events:none; }
.casino-marquee::before { top:-7px; }
.casino-marquee::after { bottom:-9px; }
.casino-modal .casino-marquee::before { animation:casino-run .8s linear infinite; }
.casino-modal .casino-marquee::after { animation:casino-run .8s linear infinite reverse; }
@keyframes casino-run { to { background-position:18px 0; } }
/* Ambient bulb frame around the reels, always softly pulsing. */
.casino-modal .casino-reels::before { opacity:.5;border:4px dotted var(--slot-decor);filter:drop-shadow(0 0 3px #ffd86b);animation:casino-frame 1.2s ease-in-out infinite; }
@keyframes casino-frame { 0%,100% { opacity:.38; } 50% { opacity:.8; } }
/* While the reels spin, crank the lights up. */
.casino-modal.spinning .casino-reels { box-shadow:0 5px 0 var(--slot-ink),inset 0 3px 0 #ffffff70,0 0 26px #ffd86baa; }
.casino-modal.spinning .casino-reels::before { opacity:1;border-color:#ffe27a;animation:casino-frame .4s steps(2) infinite; }
.casino-modal.spinning .casino-marquee { text-shadow:0 0 18px #ffe27a; }
.casino-modal.spinning .casino-marquee::before,.casino-modal.spinning .casino-marquee::after { animation-duration:.4s; }
/* Motion blur on each reel while it travels; cleared the moment it settles. */
.casino-strip.is-spinning { filter:blur(1.4px); }

/* Matching-symbol bonus: DOUBLE/TRIPLE fly-in banner, confetti burst, matched reels pop. */
.slot-bonus { position:absolute;left:0;right:0;top:46%;transform:translateY(-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none; }
.slot-bonus b { font:900 40px var(--display);line-height:1;color:#ffe27a;background:#29251f;padding:8px 24px;border-radius:16px;border:3px solid #ffd166;box-shadow:0 5px 0 #0007,0 0 34px #ffd16699;text-shadow:0 2px 0 #000,0 0 14px #ff8a00;animation:slot-banner-in .65s cubic-bezier(.2,1.5,.35,1) both; }
.slot-bonus span { font:800 13px var(--ui);text-transform:uppercase;letter-spacing:.05em;color:#29251f;background:#ffd166;padding:4px 14px;border-radius:999px;box-shadow:0 3px 0 #29251f;opacity:0;animation:slot-banner-in .5s cubic-bezier(.2,1.4,.35,1) both .16s; }
.casino-modal.match-3 .slot-bonus b { font-size:50px;animation:slot-banner-in .65s cubic-bezier(.2,1.65,.35,1) both,slot-bonus-glow .5s ease-in-out 3 .85s; }
.casino-modal.match-3 .modal-card { animation:slot-match-flash .55s ease-out 2; }
@keyframes slot-banner-in { 0%{opacity:0;transform:scale(.3) rotate(-7deg)} 60%{opacity:1;transform:scale(1.14) rotate(2deg)} 100%{opacity:1;transform:scale(1) rotate(0)} }
@keyframes slot-bonus-glow { 0%,100%{filter:none} 50%{filter:drop-shadow(0 0 22px #ffd166)} }
@keyframes slot-match-flash { 0%{box-shadow:0 7px 0 var(--slot-ink),inset 0 0 0 7px var(--slot-decor),0 16px 35px #0004} 30%{box-shadow:0 7px 0 var(--slot-ink),inset 0 0 0 7px #fff3bc,0 0 40px #ffd34c} 100%{box-shadow:0 7px 0 var(--slot-ink),inset 0 0 0 7px var(--slot-decor),0 16px 35px #0004} }
.casino-window.match-cell { z-index:2;animation:slot-match-pop .55s ease-in-out 3!important; }
@keyframes slot-match-pop { 0%,100%{transform:scale(1);box-shadow:0 0 0 2px #fff4aa,0 0 15px #ffcf4d} 50%{transform:scale(1.05);box-shadow:0 0 0 3px #fff,0 0 30px #ffd34c} }
.slot-confetti { position:absolute;width:9px;height:14px;border-radius:2px;z-index:6;pointer-events:none;animation:slot-confetti-fly 1.5s cubic-bezier(.2,.5,.4,1) both; }
@keyframes slot-confetti-fly { 0%{opacity:1;transform:translate(0,0) rotate(0)} 100%{opacity:0;transform:translate(var(--cx),var(--cy)) rotate(var(--cr))} }

.item-detail-modal { z-index:10002; }
.item-detail-modal .modal-card { background:var(--item-sky);border-color:var(--item-ink);color:var(--item-ink);max-height:85dvh;overflow:auto; }
.item-detail-picture { border-radius:16px;background:var(--item-decor);padding:12px;text-align:center;margin-bottom:14px; }
.item-detail-picture .curse-preview { width:100%;height:125px;object-fit:contain; }
.item-detail-picture .round-item-icon { font-size:70px; }
.item-detail-modal .item-detail-description { font-size:18px;line-height:1.45;color:var(--item-ink); }
.item-detail-modal .item-detail-unlock { font-size:15px;font-weight:700;color:var(--item-ink); }
.item-detail-modal .btns { flex-wrap:wrap; }
button.tb-tool { font:inherit;color:inherit;cursor:pointer; }
button.tb-tool.locked { opacity:.8; }
button.tb-tool:focus-visible { outline:3px solid var(--ink);outline-offset:2px; }

/* Profile group membership: visible actions with comfortable mobile targets. */
.kh-profile-groups { display: grid; gap: 10px; }
.kh-profile-group { position:relative; display: flex; flex-wrap:wrap; align-items: center; gap: 12px; padding: 16px; border: 2px solid var(--line); border-radius: 16px; background: var(--paper); }
.kh-profile-group.is-home { background: var(--gold-soft); border-color: var(--ink); }
.kh-profile-group > a { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.kh-profile-group > a > span { min-width: 0; overflow-wrap: anywhere; }
.kh-profile-group b { display: block; }
.kh-profile-group small { display: block; color: var(--ink-soft); }
.kh-profile-group-actions { display:flex; margin-left:auto; flex-shrink:0; align-items:center; gap:8px; }
.kh-profile-group-actions .btn { min-height:44px; padding:8px 10px; font:600 14px var(--ui); box-shadow:none; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
/* Native swipe-to-reveal: the action follows the full-width card in a scroll row. */
.kh-profile-swipe { display:flex; min-width:0; overflow-x:auto; overflow-y:hidden; border-radius:16px; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.kh-profile-swipe::-webkit-scrollbar { display:none; }
.kh-profile-swipe .kh-profile-group { flex:0 0 100%; box-sizing:border-box; scroll-snap-align:start; }
.kh-profile-leave { flex:0 0 80px; align-self:stretch; scroll-snap-align:end; padding:0; border:0; border-radius:0 16px 16px 0; background:#b3333b; color:white; font:600 14px var(--ui); cursor:pointer; }
.kh-profile-leave svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.kh-profile-leave:focus-visible { outline:2px solid white; outline-offset:-5px; }
.kh-profile-info { color:var(--ink); }
.kh-profile-group small small { display:inline; }
@media(max-width: 360px) { .kh-profile-group { flex-wrap: wrap; } .kh-profile-group-actions { margin-left: auto; } }

.kh-profile-groups-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; margin-bottom: 10px; flex-wrap: wrap; }
.kh-profile-groups-heading .kh-h2 { margin: 0; }
.kh-profile-groups-heading .btn { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }

.sticker-library { text-align: left; }
.sticker-packs { display: flex; flex-wrap: wrap; gap: 8px; }
.sticker-packs .btn { font-size: 14px; min-height: 44px; }
.sticker-packs [aria-pressed="true"] { background: var(--gold-soft); }
.sticker-results { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; max-height: 40dvh; overflow-y: auto; }
.sticker-results button { border: 2px solid var(--line); border-radius: 14px; padding: 8px; background: var(--paper); cursor: pointer; }
.sticker-results img { width: 100%; height: 90px; object-fit: contain; }
.sticker-library { max-height: 80dvh; overflow-y: auto; }

.song-modal .song-choices { max-height: 48dvh; overflow-y: auto; }
.song-modal .song-row small { display:block; font-size:12px; font-weight:400; color:var(--ink-soft); margin-top:4px; }
.song-modal .song-row b { font-size:15px; }
.song-modal .song-locked { background:rgba(100,90,130,.06); border-radius:10px; }
.song-modal .song-credits { font-size:12px; }

/* Keep the rewarded items in view, without collection and category chrome. */
#defenseDock.slot-toolbox .round-allowance { position:static; border:0; background:none; padding:3px 2px 7px; margin:0; align-items:center; gap:4px 10px; }
#defenseDock.slot-toolbox .round-allowance b { font:700 15px var(--ui); }
#defenseDock.slot-toolbox .round-allowance span { font-size:12px; color:var(--ink-soft); }
#defenseDock.slot-toolbox .editor-sections { padding:3px; margin:0 0 8px; border:0; border-radius:12px; background:#eee9db; }
#defenseDock.slot-toolbox .editor-sections button { min-height:40px; border-radius:9px; }
#defenseDock.slot-toolbox .editor-sections button[aria-pressed="true"] { background:var(--paper); box-shadow:0 1px 3px #0002; color:var(--ink); }
#defenseDock.slot-toolbox .editor-tool { flex-basis:86px; border:1px solid var(--line); border-radius:12px; background:#fffdf5; padding:6px; }
#defenseDock.slot-toolbox .editor-tool[aria-pressed="true"] { background:#fff0a1; border-color:#b48a23; }
#defenseDock.slot-toolbox .editor-tool .curse-preview { width:68px; height:44px; }
#defenseDock.slot-toolbox .editor-placement-status { padding:6px 3px; }
#defenseDock.slot-toolbox .round-items:empty { display:none; }

#defenseDock.slot-toolbox .editor-sections { position:sticky; top:-8px; z-index:3; box-shadow:0 3px 0 var(--paper); }
#defenseDock.slot-toolbox .editor-sections button { white-space:nowrap; padding:6px 8px; }
#defenseDock.slot-toolbox .reward-next { width:100%; margin:8px 0; min-height:44px; background:var(--gold-soft); }
#defenseDock.slot-toolbox .variant-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }

.chaos-run-hint { width:340px; padding:12px 16px; letter-spacing:0; }
.chaos-run-hint b { display:block; font:700 18px/1.25 var(--ui); }
.chaos-run-hint span { display:block; margin-top:4px; font:14px/1.35 var(--ui); }
.chaos-run-hint span + b { margin-top:10px; }

#defenseDock .editor-tool.is-locked { position:relative; background:#efede6; border-style:dashed; }
#defenseDock .editor-tool.is-locked .curse-preview { filter:grayscale(1); opacity:.35; }
#defenseDock .tool-lock { position:absolute; top:19px; left:0; right:0; font:700 11px var(--ui); color:var(--ink); text-align:center; }

.item-detail-picture canvas {display:block;width:100%;height:auto;max-height:230px;object-fit:contain;border-radius:12px;}
.item-detail-picture small {display:block;margin:8px 0;font:12px/1.4 var(--ui);}

.editor-patrol { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px; border:1px solid var(--ink-soft); border-radius:12px; margin:6px 0; }
.editor-patrol label { flex:1; min-width:180px; font-weight:700; }
.editor-patrol output { float:right; font-weight:400; }
.editor-patrol input { display:block; width:100%; margin-top:8px; }
.editor-patrol small { flex-basis:100%; }
/* Focused touch editor: map and reward tray share the viewport. */
#gameScreen.defense-workspace { position:fixed; inset:0; z-index:40; height:100dvh; max-height:100dvh; display:flex; flex-direction:column; overflow:hidden; background:var(--paper); padding-top:env(safe-area-inset-top); box-sizing:border-box; }
#gameScreen.defense-workspace #hud { flex:none; padding:8px 12px; gap:6px; }
#gameScreen.defense-workspace #hud .sub { display:none; }
#gameScreen.defense-workspace #hud .title { font-size:22px; }
#gameScreen.defense-workspace .placement-actions { flex-wrap:wrap; gap:2px; }
#gameScreen.defense-workspace #canvasWrap { flex:1; min-height:120px; width:100%; padding:0; overflow:hidden; }
#gameScreen.defense-workspace #placementMovePad { display:none!important; }
#gameScreen.defense-workspace #defenseDock { flex:0 0 42%; max-height:48%; min-height:170px; width:100%; box-sizing:border-box; border:0; border-top:2px solid var(--line); border-radius:22px 22px 0 0; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); overflow:auto; box-shadow:0 -6px 20px #0001; }
#gameScreen.defense-workspace #defenseDock.is-collapsed { flex-basis:110px; min-height:110px; }
#defenseDock.is-collapsed > :not(.editor-guide):not(.defense-publish) { display:none!important; }
#defenseDock .editor-guide { display:flex; gap:10px; align-items:center; position:sticky; top:-8px; background:var(--paper); padding:8px 0; z-index:5; }
.editor-guide strong { font-size:17px; }.editor-guide span { font-size:12px; color:var(--ink-soft); flex:1; }.editor-guide .btn { padding:5px 10px; font-size:12px; }
#defenseDock .editor-tools { gap:8px; padding:4px 0 10px; }
#defenseDock .defense-publish { position:sticky; bottom:-8px; background:var(--paper); padding:8px 0; z-index:6; }
#defenseDock .round-allowance { display:none; }
#defenseDock .reward-next { display:none; }
#defenseDock .reward-skip { font-size:12px; padding:8px; margin:6px 0; }
.reward-steps { display:flex; gap:5px; padding:0 0 8px; overflow:auto; }
#defenseDock .reward-steps .btn { white-space:nowrap; font-size:11px; padding:6px 8px; border-width:1px; box-shadow:none; min-height:32px; }
/* One reward at a time; the map keeps most of the screen. */
#gameScreen.defense-workspace #defenseDock { flex-basis:42%; max-height:440px; min-height:280px; display:flex; flex-direction:column; overflow:hidden; padding:0 12px env(safe-area-inset-bottom); }
#defenseDock[hidden] { display:none!important; }
#defenseDock .editor-guide { position:static; display:block; flex:none; padding:0 0 8px; }
#defenseDock .sheet-handle { display:flex; align-items:center; justify-content:center; width:100%; height:44px; padding:0; border:0; background:none; touch-action:none; cursor:ns-resize; }
#defenseDock .sheet-handle i { width:42px; height:5px; border-radius:4px; background:#c6c0b4; }
#defenseDock .edit-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
#defenseDock .edit-heading strong { font:700 18px/1.2 var(--ui); }
#defenseDock .edit-dots { display:flex; gap:6px; flex:none; }
#defenseDock .edit-dots span { width:9px; height:9px; border-radius:50%; background:#ddd8ce; flex:none; }
#defenseDock .edit-dots .current { background:var(--gold); outline:1.5px solid var(--ink); outline-offset:2px; }
#defenseDock .edit-dots .done { background:var(--ink); }
#defenseDock .editor-sheet-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; touch-action:pan-x pan-y; -webkit-overflow-scrolling:touch; padding:0 1px 12px; }
#defenseDock .defense-publish { position:static; flex:none; display:flex; gap:8px; padding:8px 0; margin:0; border-top:1px solid var(--line); }
#defenseDock .defense-publish .reward-skip { flex:0 0 25%; margin:0; min-height:44px; font-size:17px; border-radius:13px; }
#defenseDock .defense-publish [data-publish] { flex:1; min-height:44px; font-size:20px; padding:8px; border-radius:13px; }
#defenseDock .defense-publish [data-publish]:disabled { background:#dedbd4; color:#88857e; border-color:#aaa69e; box-shadow:none; opacity:1; cursor:default; }
#defenseDock .defense-publish [data-remove] { display:none; }
#defenseDock .editor-tools { flex-wrap:nowrap; overflow-x:auto; }
#defenseDock .editor-tools .editor-tool { flex:0 0 84px; }
#defenseDock .expression-tools { position:static; display:flex; gap:7px; background:none; padding:0; box-shadow:none; overflow-x:auto; }
#defenseDock .expression-tools button { flex:1; min-width:80px; display:grid; justify-items:center; gap:3px; border:1.5px solid var(--line); border-radius:14px; background:var(--paper); padding:7px; }
#defenseDock .expression-tools button b { font:700 28px/1 var(--display,var(--ui)); color:#665290; }
#defenseDock .expression-tools button span { font-size:13px; font-weight:700; }
#defenseDock .expression-tools button[aria-pressed="true"] { background:var(--gold-soft); border-color:var(--ink); box-shadow:none; }
#defenseDock .mark-editor { padding:0; border:0; margin:0; }
#defenseDock .mark-editor summary,#defenseDock .mark-editor > label,#defenseDock .mark-editor > p { display:none; }
#defenseDock .mark-input { margin:4px 0; }
#defenseDock .mark-actions { margin:5px 0; }
#defenseDock .mark-actions .btn { min-height:36px; padding:5px 9px; font-size:13px; }
#defenseDock .hill-music-card { margin:0; padding:8px; }
#defenseDock .editor-sheet-body [hidden] { display:none!important; }
#gameScreen.defense-workspace #defenseDock.is-collapsed { flex-basis:150px; min-height:150px; }
#defenseDock.is-collapsed .editor-sheet-body { display:none!important; }
@media(max-height:550px){ #gameScreen.defense-workspace #defenseDock { flex-basis:45%; min-height:190px; } }
#defenseDock.slot-toolbox .editor-sections.expression-tools { background:none; position:static; box-shadow:none; padding:0; }
#defenseDock.slot-toolbox .editor-sections.expression-tools button[aria-pressed="true"] { background:var(--gold-soft); border-color:var(--ink); box-shadow:none; }
/* A single editor toolbar; map navigation stays beside the map. */
#gameScreen.defense-workspace #hud.editor-hud { display:flex; flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:nowrap; padding:9px 10px; min-height:62px; gap:8px; }
#hud.editor-hud .editor-title { flex:1; min-width:0; }
#gameScreen.defense-workspace #hud.editor-hud .title { font-size:22px; white-space:nowrap; }
#hud.editor-hud .editor-header-actions { display:flex; gap:6px; align-items:center; flex:none; }
#hud.editor-hud .editor-header-actions .btn { display:flex; align-items:center; justify-content:center; min-height:42px; border:2px solid var(--ink); border-radius:13px; background:var(--paper); padding:5px; box-shadow:0 2px 0 var(--ink); margin:0; }
#hud.editor-hud .editor-header-actions .editor-icon { width:42px; font-size:25px; }
#hud.editor-hud .editor-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:2; }
#hud.editor-hud .editor-header-actions .editor-keep { background:var(--gold); padding:5px 9px; font-size:17px; white-space:nowrap; }
#hud.editor-hud .editor-header-actions .btn:disabled { opacity:.35; box-shadow:none; }
#editorMapControls { position:absolute; top:12px; left:12px; z-index:8; display:flex; flex-direction:column; align-items:flex-start; gap:9px; }
#editorMapControls[hidden] { display:none; }
#editorMapControls button { width:42px; height:42px; border:2px solid var(--ink); border-radius:12px; background:var(--paper); color:var(--ink); font:700 24px var(--ui); cursor:pointer; touch-action:manipulation; }
#editorMapControls .editor-zoom { display:flex; flex-direction:column; border:2px solid var(--ink); border-radius:12px; overflow:hidden; }
#editorMapControls .editor-zoom button { border:0; border-radius:0; width:38px; }
#editorMapControls .editor-zoom button+button { border-top:1px solid var(--line); }
@media(max-width:370px){ #gameScreen.defense-workspace #hud.editor-hud .title { font-size:19px; } #hud.editor-hud .editor-header-actions { gap:4px; } #hud.editor-hud .editor-header-actions .editor-keep { font-size:14px; padding:5px; } }
#hud.editor-hud .editor-header-actions .editor-icon { font-size:25px!important; }
#hud.editor-hud .editor-header-actions .editor-icon::before { content:none; }
#defenseDock .new-world-note { display:block; margin-top:5px; color:var(--ink-soft); font:12px/1.3 var(--ui); }
#defenseDock .defense-publish .reward-back { flex:0 0 auto; min-height:44px; padding:7px 10px; font-size:16px; border-radius:13px; }
#defenseDock .defense-publish:has(.reward-back) .reward-skip { flex-basis:auto; padding:7px 10px; }
#defenseDock .defense-publish:has(.reward-back) [data-publish] { font-size:18px; }

/* One vertical scroll area, including the full Chaos list. */
#defenseDock .editor-sheet-body .round-variants { max-height:none; overflow:visible; }

#defenseDock .mark-editor > p { display:block; font-size:12px; margin:7px 0; }
#hud.editor-hud .editor-header-actions .editor-undo { font-size:15px; padding:5px 7px; white-space:nowrap; }

/* Keep the map usable while each reward explains its next action. */
#gameScreen.defense-workspace #defenseDock { flex-basis:34%; min-height:260px; max-height:390px; }
#gameScreen.defense-workspace #defenseDock[data-reward="expression"] { flex-basis:320px; min-height:320px; }
#gameScreen.defense-workspace #defenseDock[data-reward="eraser"],
#gameScreen.defense-workspace #defenseDock[data-reward="ready"] { flex-basis:220px; min-height:220px; }
#defenseDock .editor-step-hint { margin:7px 0 0; font:14px/1.4 var(--ui); color:var(--ink-soft); }
#defenseDock .edit-heading strong { font-size:16px; }
#defenseDock .round-items { display:flex; flex-wrap:wrap; gap:8px; }
#defenseDock .round-items .btn { min-height:44px; padding:8px 12px; font-size:14px; }
#defenseDock .expression-tools button { min-width:0; min-height:56px; }
#defenseDock .expression-tools button b { font-size:24px; }
#defenseDock .expression-tools button span { font-size:12px; }
#defenseDock .defense-publish [data-publish]:disabled { font-size:16px; }
#hud.editor-hud .editor-header-actions .editor-keep { background:var(--paper); box-shadow:none; border-color:var(--line); font-size:14px; }
#gameScreen.defense-workspace #defenseDock.is-collapsed { flex-basis:180px; min-height:180px; }
#defenseDock.is-collapsed .editor-step-hint { display:none; }
@media(max-height:550px){
  #gameScreen.defense-workspace #defenseDock,
  #gameScreen.defense-workspace #defenseDock[data-reward="expression"],
  #gameScreen.defense-workspace #defenseDock[data-reward="eraser"],
  #gameScreen.defense-workspace #defenseDock[data-reward="ready"] { flex-basis:45%; min-height:180px; }
  #defenseDock .sheet-handle { height:24px; }
}

.sticker-modal { z-index:10002; }
.sticker-modal .modal-card { background:#fffdf4; color:#26241f; border-color:#26241f; max-height:85dvh; overflow-y:auto; }
.sticker-modal p { color:#555247; }
.sticker-modal .sticker-library { max-height:none; overflow:visible; }
.sticker-modal .sticker-packs { flex-wrap:nowrap; overflow-x:auto; padding-bottom:8px; }
.sticker-modal .sticker-packs .btn { flex:none; }
.sticker-modal .sticker-results { max-height:44dvh; -webkit-overflow-scrolling:touch; }
.sticker-modal .btns { position:sticky; bottom:0; background:#fffdf4; padding-top:8px; }

/* Rare slot events stay inside the familiar reel reveal. */
.casino-reels{position:relative}
.slot-event-reveal{position:absolute;z-index:3;left:4%;right:4%;top:35%;padding:14px 8px;background:#ffdc41;color:#242421;border:3px solid currentColor;border-radius:12px;box-shadow:3px 5px 0 #242421;text-align:center;font-weight:900;animation:slot-event-pop .35s ease-out}
.casino-modal[data-instability="uneasy"] .casino{border-top:3px dashed #a56840}
.casino-modal[data-instability="unstable"] .casino-reels{animation:slot-event-shake 4s ease-in-out infinite}
.slot-event-modal .modal-card{max-height:85dvh;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;background:#fffbed!important;color:#242421!important}
.slot-event-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.slot-event-choices .btn{white-space:normal;text-align:left;padding:12px}
.slot-event-choices small{display:block;font-family:system-ui,sans-serif;font-size:13px;line-height:1.35;margin-top:6px}
@keyframes slot-event-pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes slot-event-shake{0%,90%,100%{transform:translateX(0)}92%,96%{transform:translateX(-2px)}94%,98%{transform:translateX(2px)}}

.world-choice-preview{display:block;width:100%;height:auto;aspect-ratio:10/7;border-radius:8px;margin-top:8px;pointer-events:none}

.world-wheel-modal .modal-card{background:radial-gradient(ellipse at top,#fff1b4,#fffbed 65%)!important;border:3px solid #29251f}
.world-wheel-heading{text-align:center}.world-wheel-heading h2{margin:5px 0}.world-wheel-heading p{font-size:14px}
.world-wheel-stage{position:relative;max-width:340px;margin:12px auto 16px;border-radius:50%;border:8px dotted #e9b529;background:#29251f;box-shadow:0 5px 0 #29251f,0 0 22px #ffcf4055}
[data-wheel-disc]{will-change:transform;transform-origin:center}[data-wheel-disc] svg{display:block;width:100%;height:auto}
.world-wheel-pointer{position:absolute;top:-16px;left:50%;transform:translateX(-50%);z-index:2;color:#e34c43;font-size:32px;text-shadow:0 2px #29251f}
.world-wheel-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#ffda36;border:3px solid #29251f;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;font-size:24px}
[data-wheel-result]{text-align:center;min-height:24px;margin:10px 0}[data-wheel-result] h3{margin:4px 0;font-size:25px}.world-winner-preview{display:block;width:130px;margin:8px auto;border-radius:10px;border:2px solid #29251f}
.world-wheel-modal .big-btn{width:100%}.world-wheel-foot{font-size:12px;text-align:center;color:#696557}
.wheel-landed .world-wheel-stage{box-shadow:0 5px 0 #29251f,0 0 28px #ffca23}.wheel-landed [data-wheel-disc]{will-change:auto}
@media(prefers-reduced-motion:reduce){[data-wheel-disc]{transition:none!important}}
/* New World creation: describe-a-world / pick-a-map chooser */
.world-create-modal .modal-card{background:radial-gradient(ellipse at top,#fff1b4,#fffbed 65%)!important;border:3px solid #29251f}
.world-create-modal .world-wheel-heading{text-align:center}
/* Build progress flow: current step emphasized, the rest in a horizontal scroll. */
.build-steps{position:relative;display:flex;flex-wrap:nowrap;gap:6px;margin:10px -4px 14px;padding:3px 14px 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.build-steps::-webkit-scrollbar{display:none}
.build-steps .bstep{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font:800 10px var(--ui);text-transform:uppercase;letter-spacing:.03em;color:#29251f55;padding:4px 10px 4px 4px;border-radius:999px;background:#29251f0d;transition:all .25s;opacity:.8}
.build-steps .bstep i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#29251f1a;color:#29251f88;font-style:normal;font-size:10px;font-weight:800;flex:0 0 auto}
.build-steps .bstep.done{color:#29251f99;background:#2b9d6b1a;opacity:1}
.build-steps .bstep.done i{background:#2b9d6b;color:#fff}
.build-steps .bstep.on{color:#29251f;background:#ffcf4d;box-shadow:0 2px 0 #29251f;opacity:1;font-size:11px;padding:5px 13px 5px 5px}
.build-steps .bstep.on i{background:#29251f;color:#ffcf4d;width:20px;height:20px}
/* Old-hill crumble transition into the New World builder. */
.crumble-ov{position:fixed;z-index:360;pointer-events:none;overflow:visible}
.crumble-bit{position:absolute;background-repeat:no-repeat;will-change:transform,opacity;animation:crumble-fall 1.6s cubic-bezier(.38,0,.86,1) both}
@keyframes crumble-fall{0%{transform:translate(0,0) rotate(0);opacity:1}6%{transform:translate(-2px,1px) rotate(-1.5deg)}12%{transform:translate(2px,-1px) rotate(1.5deg)}18%{transform:translate(0,-8px) rotate(0);opacity:1}100%{transform:translate(var(--dx,0),122vh) rotate(var(--rot,60deg));opacity:.05}}
#gameScreen.quake{animation:crumble-quake .5s linear 3}
@keyframes crumble-quake{0%,100%{transform:translate(0,0)}20%{transform:translate(-3px,2px)}40%{transform:translate(3px,-1px)}60%{transform:translate(-2px,-2px)}80%{transform:translate(2px,1px)}}
.create-choices{display:grid;gap:12px;margin:8px 0}
.create-or{display:flex;align-items:center;gap:10px;margin:16px 2px 10px;color:#29251f88;font:800 11px var(--ui);text-transform:uppercase;letter-spacing:.04em}
.create-or::before,.create-or::after{content:'';flex:1;height:2px;background:#29251f22;border-radius:2px}
.world-create-modal .create-more{width:100%;margin-top:10px}
.create-big{display:flex;flex-direction:column;align-items:center;gap:3px;padding:18px 14px;background:#fff;border:3px solid #29251f;border-radius:16px;box-shadow:0 5px 0 rgba(41,37,31,.85);cursor:pointer;font-family:inherit}
.create-big:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(41,37,31,.85)}
.create-big .create-ico{font-size:30px;line-height:1}
.create-big b{font-size:17px;color:#242421}.create-big small{font-size:12px;color:#696557}
.create-sub{font-weight:700;font-size:13px;color:#4a463c;margin:4px 0 8px}
.world-create-modal textarea[data-prompt]{width:100%;box-sizing:border-box;border:3px solid #29251f;border-radius:12px;padding:9px;font-size:14px;font-family:inherit;resize:vertical}
.world-create-modal .big-btn[data-gen]{width:100%;margin-top:8px}
.gen-card{margin:10px 0;padding:12px;background:#fff;border:3px solid #29251f;border-radius:14px;box-shadow:0 4px 0 rgba(41,37,31,.85);display:flex;flex-direction:column;gap:4px}
.gen-card b{font-size:17px;color:#242421}.gen-card i{font-size:13px;color:#5a5648}
.gen-preview{width:100%;aspect-ratio:1.7;border-radius:9px;background:#f3eeda;display:block;margin-bottom:8px;border:2px solid #29251f22}
.gen-progress{display:flex;flex-direction:column;align-items:center;gap:5px;margin:14px 0;font-size:14px;color:#4a463c;text-align:center}
.gen-progress b{font-size:22px;color:#242421;font-variant-numeric:tabular-nums}
.gen-progress small{font-size:11.5px;color:#8a8577}
.gen-spin{display:inline-block;width:15px;height:15px;border:3px solid #29251f33;border-top-color:#efb826;border-radius:50%;animation:gen-spin .7s linear infinite;vertical-align:-2px}
@keyframes gen-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.gen-spin{animation:none}}
.gen-stages{list-style:none;margin:14px 0 6px;padding:0;display:flex;flex-direction:column;gap:9px;text-align:left}
.gen-stages li{display:flex;align-items:center;gap:9px;font-size:14px;color:#b7b2a4;transition:color .25s}
.gen-stages li::before{content:'';flex:none;width:16px;height:16px;border-radius:50%;border:2px solid #d9d4c6;box-sizing:border-box}
.gen-stages li.active{color:#242421;font-weight:600}
.gen-stages li.active::before{border:2px solid #29251f33;border-top-color:#efb826;animation:gen-spin .7s linear infinite}
.gen-stages li.done{color:#55513f}
.gen-stages li.done::before{content:'✓';border:none;background:#3fae6a;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
@media(prefers-reduced-motion:reduce){.gen-stages li.active::before{animation:none}}
/* Guided world-build wizard — themed from the generated world's own palette (--w-*). */
.world-create-modal .wiz{background:var(--w-sky,#1a1626);color:var(--w-ink,#f4f1ff);border-radius:18px;padding:16px 16px 12px;margin:6px 0;border:2px solid var(--w-ink,#2a2436);box-shadow:0 6px 0 rgba(0,0,0,.18)}
.wiz-head{text-align:center;margin-bottom:8px}
.wiz-head b{display:block;font:700 22px var(--display);color:var(--w-ink)}
.wiz-head i{font-size:12.5px;opacity:.75}
.wiz-dots{display:flex;gap:6px;justify-content:center;margin:6px 0 12px}
.wiz-dots span{width:8px;height:8px;border-radius:50%;background:var(--w-ink);opacity:.22;transition:all .2s}
.wiz-dots span.done{opacity:.5}
.wiz-dots span.on{opacity:1;background:var(--w-accent,#ff2e88);transform:scale(1.35)}
.wiz-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.wiz-kicker{font:700 10px var(--ui);letter-spacing:1.5px;text-transform:uppercase;opacity:.6}
.wiz-step h3{font:700 19px var(--display);margin:0;color:var(--w-ink)}
.wiz-prev{width:100%;max-width:300px;height:180px;border-radius:12px;background:rgba(0,0,0,.2);border:2px solid var(--w-ink);margin:6px 0}
.wiz-icon{font-size:70px;line-height:1.25;margin:4px 0}
.wiz-name{font:700 16px var(--ui);color:var(--w-accent,#ff2e88)}
.wiz-reset{margin:10px 2px 0;padding:8px 10px;font:600 11.5px var(--ui);line-height:1.45;color:var(--w-ink,#f4f1ff);background:#ffffff14;border:1px solid #ffffff2e;border-radius:10px}
.wiz-reset b{color:#ffd166}
.wiz-step small{font-size:12px;opacity:.72;max-width:260px}
.wiz-reroll{margin-top:8px;background:transparent;border:2px dashed var(--w-ink);color:var(--w-ink);font-size:13px;opacity:.85}
.wiz-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px}
.wiz-nav .big-btn{margin:0;background:var(--w-accent,#ff2e88);color:#fff;border-color:var(--w-ink);box-shadow:0 4px 0 var(--w-ink);font-family:var(--display);flex:1}
.wiz-nav .btn{margin:0;background:transparent;border:2px solid var(--w-ink);color:var(--w-ink);flex:none}
.wiz-exit{display:block;width:100%;margin:10px 0 0;background:none;border:none;color:var(--w-ink);opacity:.55;font-size:12px;text-decoration:underline;cursor:pointer}
.wiz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:100%;margin:8px 0}
.wiz-list{display:flex;flex-direction:column;gap:6px;width:100%;max-height:230px;overflow-y:auto;margin:8px 0}
.wiz-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:9px 4px;border-radius:11px;border:2px solid var(--w-ink);background:rgba(0,0,0,.14);color:var(--w-ink);cursor:pointer;transition:transform .1s,background .1s;font:inherit}
.wiz-opt span{font-size:22px;line-height:1}
.wiz-opt .wiz-oico{width:46px;height:40px}
.wiz-list .wiz-opt .wiz-oico{width:30px;height:26px}
.wiz-opt b{font:700 11px var(--ui);text-align:center;color:inherit}
.wiz-opt.on{background:var(--w-accent);color:#fff;border-color:var(--w-ink);box-shadow:0 3px 0 var(--w-ink);transform:translateY(-1px)}
.wiz-list .wiz-opt{flex-direction:row;justify-content:flex-start;gap:9px;padding:9px 12px}
.wiz-list .wiz-opt span{font-size:16px}.wiz-list .wiz-opt b{font-size:13px}
.wiz-final{background:rgba(0,0,0,.25)}
.world-create-modal [data-preview] .big-btn{width:100%;margin-bottom:6px}.world-create-modal [data-preview] .btn{width:100%}
.map-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:4px 0 12px}
.map-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;background:#fff;border:3px solid #29251f;border-radius:12px;box-shadow:0 4px 0 rgba(41,37,31,.85);cursor:pointer;font-family:inherit}
.map-card:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(41,37,31,.85)}
.map-card-prev{width:100%;aspect-ratio:1.3;border-radius:7px;background:#f3eeda}
.map-card b{font-size:11px;color:#242421;text-align:center;line-height:1.15}
@media(max-width:380px){.map-gallery{grid-template-columns:repeat(2,1fr)}}

/* Profile: your character and a way to change it (public/header.js). */
.kh-char { display: flex; align-items: center; gap: 12px; margin: 10px 0; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; }
.kh-char img { width: 56px; height: 56px; }
.kh-char span { flex: 1; font-weight: 700; }

/* The king's entrance owns the playfield while physics and input wait. */
.king-intro { position:absolute; inset:0; z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:24px; background:#f8f1dcef; color:#242421; text-align:center; overflow:auto; pointer-events:auto; touch-action:none; }
.king-intro small { font:700 14px var(--ui); text-transform:uppercase; letter-spacing:1px; }
.king-intro strong { max-width:720px; font:800 clamp(28px,7vw,64px)/1.12 var(--display); overflow-wrap:anywhere; text-decoration:underline; text-decoration-color:#ed5782; text-underline-offset:8px; }
.king-intro progress { width:min(220px,80%); height:8px; accent-color:#ed5782; }
.king-intro [hidden] { display:none; }
.king-expression .modal-card { max-height:90dvh; overflow-y:auto; }
.king-expression h2 { margin:10px 0; }
.king-expression textarea { display:block; width:100%; box-sizing:border-box; resize:vertical; margin:8px 0; padding:12px; font:18px/1.4 var(--ui); border:2px solid var(--ink); border-radius:12px; background:var(--paper); color:var(--ink); }
.king-expression .intro-options,.king-expression .intro-actions { display:flex; gap:8px; margin:16px 0 8px; }
.king-expression .intro-options .btn { flex:1; min-height:48px; white-space:normal; }
.king-expression [aria-pressed=true] { background:var(--gold); }
.king-expression .intro-actions .big-btn { flex:1; margin:0; font-size:20px; }
.king-expression [data-intro-preview] { display:block; margin-top:12px; }
#defenseDock[data-reward=proposal] { min-height:240px; }
#defenseDock[data-reward=proposal] .challenge-summary { flex:1; min-height:0; overflow-y:auto; padding:12px 0; overscroll-behavior:contain; }
.challenge-summary h2 { font:700 20px/1.15 var(--display); margin:4px 0; }
.challenge-summary p { margin:6px 0 10px; font-size:13px; }
.proposal-items { display:flex; flex-direction:column; gap:6px; }
#defenseDock .proposal-items .btn { text-align:left; white-space:normal; min-height:44px; margin:0; padding:8px 12px; font-size:14px; }
.proposal-actions { display:flex; flex:none; gap:6px; margin:8px 0; }
#defenseDock .proposal-actions .btn,#defenseDock [data-proposal-intro] { min-height:44px; font-size:14px; margin:0; }
#defenseDock [data-proposal-intro] { margin-top:8px; }
#defenseDock .defense-publish [data-proposal-prove] { min-height:48px; font-size:21px; }
/* Entrance styling is shared by its editor and the actual challenger screen. */
[data-color=pink] { --entrance-accent:#db3e75; }
[data-color=gold] { --entrance-accent:#b07900; }
[data-color=blue] { --entrance-accent:#2477a9; }
[data-color=purple] { --entrance-accent:#8053b5; }
.king-intro strong { text-decoration-color:var(--entrance-accent,#db3e75); }
.king-intro progress { accent-color:var(--entrance-accent,#db3e75); }
.king-intro[data-style=stamp] strong { text-decoration:none; border:4px solid var(--entrance-accent); border-radius:8px; padding:12px; transform:rotate(-3deg); }
.king-intro[data-style=giant] strong { text-decoration:none; font-size:clamp(42px,10vw,84px); color:var(--entrance-accent); }
.entrance-close { position:absolute; top:16px; right:16px; z-index:2; min-height:44px; }
.entrance-canvas { padding:22px 12px; border:1px solid var(--line); border-radius:18px; background:repeating-linear-gradient(0deg,transparent,transparent 19px,#cac3af33 20px),var(--paper); text-align:center; }
.entrance-canvas small { text-transform:uppercase; font-weight:700; }
.king-expression .entrance-canvas textarea { border:0; background:transparent; resize:none; text-align:center; font:700 28px/1.2 var(--display); text-decoration:underline; text-decoration-color:var(--entrance-accent); text-underline-offset:5px; }
.king-expression [data-style=stamp] textarea { border:3px solid var(--entrance-accent); text-decoration:none; transform:rotate(-2deg); }
.king-expression [data-style=giant] textarea { font-size:36px; text-decoration:none; color:var(--entrance-accent); }
.entrance-choices { display:flex; gap:8px; margin:10px 0; }
.entrance-choices .btn { flex:1; min-height:44px; text-transform:capitalize; }
.color-choice { color:var(--entrance-accent); font-size:24px; }
.entrance-audio-label { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:12px 0; }
.entrance-audio-label select { min-height:44px; padding:8px; font:inherit; max-width:60%; background:var(--paper); color:var(--ink); border:1px solid var(--ink); border-radius:10px; }
.king-expression [data-record-intro] { min-height:44px; }
.king-expression [hidden] { display:none; }
#hud.test-hud { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; padding:8px 12px; min-height:60px; box-sizing:border-box; }
#hud.test-hud > .title { flex:1; text-align:center; font-size:17px; }
#hud.test-hud > .btn { min-height:44px; padding:8px 12px; margin:0; white-space:nowrap; }
#hud.test-hud .test-deadline { position:absolute; top:60px; right:12px; background:var(--paper); padding:4px 8px; z-index:10; font-size:12px; }
#hud.test-hud .proof-menu .btn { display:block; min-height:44px; width:100%; margin:4px 0; }
.review-menu { display:flex; flex-direction:column; gap:10px; }
.review-menu .btn { min-height:48px; }
.review-heading { display:flex; justify-content:space-between; align-items:center; }
.review-navigation { display:flex; justify-content:space-between; gap:8px; flex:none; }
#defenseDock .review-navigation .btn { min-height:44px; margin:0; padding:8px 12px; }
#defenseDock .proposal-actions .btn { flex:1; padding:8px; white-space:normal; }
#defenseDock[data-reward=proposal] .challenge-summary { padding:10px 0 4px; }
#defenseDock[data-reward=proposal] .challenge-summary h2 { font-size:24px; }
.placement-progress { width:100%; height:6px; accent-color:var(--gold); }
.king-expression button,.review-menu button,#defenseDock[data-reward=proposal] button,#hud.test-hud button { transition:transform .12s,background-color .12s,box-shadow .12s; touch-action:manipulation; }
.king-expression button:active:not(:disabled),.review-menu button:active:not(:disabled),#defenseDock[data-reward=proposal] button:active:not(:disabled),#hud.test-hud button:active:not(:disabled) { transform:translateY(2px) scale(.98); box-shadow:none; background-color:#ffe77c; }
.king-expression button:focus-visible,#defenseDock[data-reward=proposal] button:focus-visible { outline:3px solid #2477a9; outline-offset:2px; }
@media(max-height:500px){.king-expression .modal-card { padding:16px; }.entrance-canvas { padding:8px; }#defenseDock[data-reward=proposal] .challenge-summary h2 { font-size:18px; }}

#defenseDock .edit-heading-actions { display:flex; flex-direction:column; align-items:flex-end; gap:10px; flex:none; }
#defenseDock .edit-auto-place { min-height:44px; padding:8px 10px; font-size:15px; white-space:nowrap; }
#defenseDock .edit-heading > strong { min-width:0; }

/* ---- UrMove: clean play UI (no top bar, no minimap sidebar, floating right rail) ---- */
.play-screen .hud { display: none !important; }
.play-screen #minimap { display: none !important; }
.game-rail { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 25; }
.game-rail .rail-btn { width: 34px; height: 34px; min-width: 0; padding: 0; margin: 0; border: none; border-radius: 50%; background: rgba(20,18,16,.38); box-shadow: none; display: flex; align-items: center; justify-content: center; color: #fff; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.game-rail .rail-btn:active { background: rgba(20,18,16,.55); }
.game-rail .rail-btn svg { width: 18px; height: 18px; display: block; }
.game-rail .rail-btn.muted { opacity: .72; }
.game-rail .ic { font-size: 16px; line-height: 1; }
.king-intro-hill { font: 400 clamp(32px, 9.5vw, 52px) var(--display, inherit); color: #8a7a3a; margin-bottom: 6px; line-height: 1.05; }
.king-intro-char { width: 200px; height: 200px; margin: 0 auto 2px; display: block; }
.king-intro-audio { position: absolute; top: 14px; right: 14px; margin: 0; z-index: 3; color: #d64f78; width: 38px; height: 38px; animation: king-audio-pulse 1.1s ease-in-out infinite; }
.king-intro-audio svg { width: 100%; height: 100%; display: block; }
@keyframes king-audio-pulse { 0%, 100% { transform: scale(1); opacity: .82; } 50% { transform: scale(1.16); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .king-intro-audio { animation: none; } }
.king-intro-scribble { max-width: min(82%, 520px); max-height: 38vh; height: auto; object-fit: contain; }
/* Stake your claim — voice or scribble, with optional manual text */
.stake-claim .claim-sub { opacity: .78; margin-top: -4px; }
.claim-modes { display: flex; gap: 8px; justify-content: center; margin: 10px 0 16px; }
.claim-mode { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 22px; padding: 10px 16px; line-height: 1.05; }
.claim-mode span { font-size: 12px; font-weight: 700; }
.claim-mode[aria-pressed="true"] { outline: 2.5px solid var(--ink, #26241f); outline-offset: 1px; }
.claim-pane { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.claim-pane[hidden] { display: none; }
.claim-pane[data-pane="text"] { margin-top: 16px; }
.claim-lead { opacity: .8; margin: 0; }
.claim-footer { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 12px; }
.scribble-thumb { width: 190px; height: 124px; background: #fffcf2 center/contain no-repeat; border: 1.5px solid var(--ink, #26241f); border-radius: 10px; }
/* Full-screen scribble pad */
.scribble-pad { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: #fffdf5; }
.scribble-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 2px solid var(--ink, #26241f); background: #fff9e7; }
.scribble-head strong { font: 700 16px var(--ui, system-ui, sans-serif); }
.scribble-tools { display: flex; gap: 8px; }
.scribble-canvas { flex: 1 1 auto; width: 100%; min-height: 0; touch-action: none; cursor: crosshair; background-color: #fffdf5; background-image: linear-gradient(#efe9d2 1px, transparent 1px), linear-gradient(90deg, #efe9d2 1px, transparent 1px); background-size: 28px 28px; }

/* Invite a spin without reserving space for pre-spin instructions. */
.casino-result:empty { display:none; }
.casino .slot-spin-ready:not(:disabled) { margin-top:16px; animation:slot-spin-pulse 1.5s ease-in-out infinite; }
@keyframes slot-spin-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.035); box-shadow:0 5px 0 #0004,0 0 22px var(--slot-accent); } }
@media(prefers-reduced-motion:reduce) { .casino .slot-spin-ready:not(:disabled) { animation:none; } }

.claim-caption-toggle { display:flex; align-items:center; gap:12px; width:100%; margin:20px 0 8px; cursor:pointer; font-weight:600; }
.claim-caption-toggle input { position:absolute; width:1px; height:1px; opacity:0; }
.claim-switch { margin-left:auto; width:48px; height:28px; border:2px solid var(--ink); border-radius:20px; background:#dedbd1; position:relative; flex-shrink:0; }
.claim-switch::after { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:var(--ink); }
.claim-caption-toggle input:checked + .claim-switch { background:#ffda3d; }
.claim-caption-toggle input:checked + .claim-switch::after { left:22px; }
.claim-caption-toggle input:focus-visible + .claim-switch { outline:3px solid #4562cf; outline-offset:3px; }

/* Compact reward sheet: keep the tool and actions visible on phone screens. */
#defenseDock .sheet-handle { height:22px; min-height:22px; }
#defenseDock .editor-guide { padding-bottom:4px; }
#defenseDock .edit-heading-actions { flex-direction:row; gap:8px; }
#defenseDock .edit-heading { flex-wrap:wrap; }
#defenseDock .edit-auto-place { min-height:36px; padding:5px 8px; font-size:13px; margin:0; }
#defenseDock .editor-step-hint { margin:4px 0 0; font-size:12px; line-height:1.3; }
#defenseDock .editor-sheet-body { padding-bottom:4px; }
#defenseDock .defense-publish { padding:6px 0; }

/* Floating numbered inventory leaves the hill visible behind the editor. */
#gameScreen.numbered-editor #defenseDock.numbered-item-dock {
  position:absolute; left:calc(50% - 24px); bottom:calc(12px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  width:max-content; max-width:calc(100% - 76px); height:auto; min-height:0; max-height:none;
  flex:none; padding:12px 10px 8px; border:2px solid #fff; border-radius:26px;
  background:#fffdf3ec; box-shadow:0 5px 20px #25233233; overflow:visible; z-index:12;
}
.numbered-items { display:flex; gap:10px; justify-content:center; }
.numbered-item { position:relative; display:grid; place-items:center; width:76px; height:70px; padding:8px; margin:0; border:2px solid transparent; border-radius:18px; background:transparent; touch-action:manipulation; }
.numbered-item[aria-pressed="true"] { background:#fff0a1; border-color:#e6ad20; box-shadow:0 0 0 3px #ffd44733; }
.numbered-item .curse-preview { width:58px; height:44px; object-fit:contain; border:0; background:none; }
.numbered-item .item-number { position:absolute; top:-12px; left:50%; transform:translateX(-50%); width:25px; height:25px; border:2px solid white; border-radius:50%; background:#e8e4dc; color:#242421; font:700 14px/21px var(--ui); text-align:center; }
.numbered-item[aria-pressed="true"] .item-number { background:var(--gold); }
.item-symbol { font-size:32px; }
.item-pending { position:absolute; right:2px; bottom:0; width:18px; height:18px; border-radius:50%; background:#a43125; color:white; font:bold 12px/18px var(--ui); }
.item-loading { display:block; margin-top:5px; text-align:center; font:12px var(--ui); }
#gameScreen.numbered-editor #hud .title { font-size:19px; }
#gameScreen.numbered-editor #hud .btn { min-height:40px; padding:6px 9px; margin:0; font-size:16px; }
#gameScreen.numbered-editor #hud .editor-header-actions { gap:5px; }
@media(max-width:360px){.numbered-item { width:62px; height:64px; }.numbered-items { gap:6px; }.numbered-item .curse-preview { width:48px; }#gameScreen.numbered-editor #hud .title { font-size:16px; }}

.king-intro-milestone { font:700 clamp(24px,6vw,38px)/1.15 var(--display); color:#a43125; }

.illustrated-generation { display:flex; flex-direction:column; align-items:center; gap:12px; padding:28px 14px; text-align:center; }
.world-build-spinner { width:38px; height:38px; border:4px solid #e8dfce; border-top-color:#dc5686; border-radius:50%; animation:world-build-turn 1s linear infinite; }
@keyframes world-build-turn { to { transform:rotate(360deg); } }
.world-art-preview { display:block; width:100%; max-height:52vh; object-fit:contain; border-radius:18px; }
.world-ledge-previews { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.world-ledge-previews figure { margin:0; padding:6px; border:1px solid #ded9cc; border-radius:10px; text-align:center; }
.world-ledge-previews canvas { max-width:100%; height:auto; }
.world-ledge-previews figcaption { font:12px var(--ui); }
@media(prefers-reduced-motion:reduce){.world-build-spinner { animation:none; }}
.first-world-builder .bottom-nav,.first-world-builder #homeScreen,.first-world-builder #siteHeader{display:none!important}
.first-world-builder .world-create-modal .modal-card{max-height:94dvh}
.first-world-builder .world-create-modal{padding:0;background:#fffbee;align-items:stretch}
.first-world-builder .world-create-modal .modal-card{box-sizing:border-box;width:100%;max-width:none;max-height:100dvh;border:0;border-radius:0;box-shadow:none;padding:14px}
/* The king's entrance: map artwork, personal note and bounded autoplay. */
.king-intro { isolation:isolate; background:#fff9e8e8; gap:12px; padding:30px 20px 20px; overflow:hidden; touch-action:pan-y; }
.intro-map { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.17; z-index:-1; pointer-events:none; }
.intro-eyebrow { position:relative; flex:none; max-width:100%; box-sizing:border-box; font:400 clamp(27px,7.5vw,46px)/1.05 var(--display); letter-spacing:1px; color:#ffe34a; background:linear-gradient(135deg,#403252,#211c2c); border:3px solid #242421; border-radius:5px; padding:12px 24px; margin:calc(-1 * clamp(20px,4vh,36px)) 0 calc(5px + clamp(20px,4vh,36px)); transform:rotate(-3deg) skewX(-5deg); text-shadow:2px 2px 0 #16121d; box-shadow:4px 5px 0 #242421, inset 0 0 0 2px #a989d4; }
.intro-eyebrow::after { content:''; position:absolute; bottom:-9px; left:12%; right:12%; height:4px; background:#ffd42a; transform:skewX(-25deg); }
@media(max-width:360px), (max-height:650px) { .intro-eyebrow { font-size:27px; padding:8px 16px; margin:-6px 0 23px; } }
.king-intro-hill { font-size:clamp(28px,6vw,48px); color:var(--ink,#242421); margin:0; }
.intro-hero { flex:0 1 230px; min-height:90px; display:grid; place-items:center; width:100%; background:radial-gradient(ellipse,#ffe44780,transparent 65%); }
.king-intro-char { width:auto; height:100%; max-height:230px; max-width:100%; object-fit:contain; }
.intro-note { position:relative; background:#fffdf3; border:3px solid #242421; box-shadow:4px 5px 0 #242421; padding:16px; width:min(88%,390px); min-height:40px; transform:rotate(-2deg); display:flex; flex-direction:column; align-items:center; flex:0 1 auto; min-width:0; }
.intro-note::before { content:''; position:absolute; width:64px; height:20px; background:#b78ce4cc; top:-12px; left:calc(50% - 32px); transform:rotate(-7deg); }
.king-intro .king-intro-scribble { width:100%; max-width:100%; height:clamp(70px,18vh,180px); object-fit:contain; }
.king-intro .king-intro-msg { font:700 clamp(18px,4vw,28px)/1.2 var(--display); text-decoration:none; overflow-wrap:anywhere; }
.intro-sticker { font-size:45px; line-height:1; color:#8053b5; }
.intro-mute { position:absolute; top:10px; right:10px; width:44px; height:44px; border:2px solid #242421; border-radius:50%; background:#fffdf3; color:#242421; font-size:23px; cursor:pointer; }
.intro-wave { width:min(90%,350px); padding:9px 12px; border:2px solid #24242133; border-radius:16px; background:#fffdf3b3; }
.intro-wave span { display:block; font:800 10px var(--ui); letter-spacing:1px; }
.intro-wave>div { display:flex; align-items:center; justify-content:center; gap:3px; height:28px; }
.intro-wave i { width:4px; height:var(--bar); border-radius:4px; background:#ae87eb; transform:scaleY(.35); }
.intro-wave.is-playing:not(.is-muted) i { animation:intro-wave .65s var(--delay) ease-in-out infinite alternate; }
@keyframes intro-wave { to { transform:scaleY(1); } }
.king-intro progress { flex:none; width:160px; height:6px; accent-color:#a283dc; }
.king-intro-milestone { font-size:18px; background:#d6bcff; color:#242421; padding:3px 10px; transform:rotate(-2deg); }
.intro-composer .modal-card { width:min(100%,480px); padding:20px; max-height:94dvh; border:3px solid #242421; background:#fffbed; overflow-y:auto; }
.composer-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.composer-top .btn { padding:6px 12px; min-height:44px; margin:0; }
.composer-top b { font:900 25px var(--display); }
.composer-steps { display:flex; gap:7px; }
.composer-steps i { width:10px; height:10px; border-radius:50%; background:#ccc9bc; }
.composer-steps .current { background:#ffdf26; outline:2px solid #242421; }
.intro-composer h2 { font:400 clamp(28px,6vw,39px)/1.05 var(--display); text-align:center; margin:20px 0 10px; outline:none; }
.composer-sub { background:#d9c2ff; text-align:center; padding:7px; font-size:15px; margin:0 0 15px; }
.composer-hero { position:relative; isolation:isolate; height:210px; display:grid; place-items:center; overflow:hidden; }
.composer-hero>canvas:not(.intro-map) { max-height:100%; width:auto; }
.composer-record { text-align:center; border:2px solid #242421; border-radius:18px; padding:16px 8px; }
.composer-record .big-btn { width:100%; font-size:24px; margin:0; }
.composer-record p { font-size:14px; margin:10px 0; }
.composer-record .btn { margin:4px; }
.celebration-choices { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-top:12px; }
.celebration-choices .btn { min-width:0; padding:8px 3px; display:flex; flex-direction:column; align-items:center; margin:0; font:700 12px var(--ui); white-space:normal; }
.celebration-choices canvas { width:100%; height:auto; }
.composer-actions { display:flex; gap:10px; padding-top:12px; }
.composer-actions .big-btn { flex:1; margin:0; font-size:24px; }
.composer-actions .btn { margin:0; font-size:16px; }
.composer-status { font-size:14px; margin:8px 0 0; }
.composer-status:empty { display:none; }
.composer-label { font-weight:700; display:block; }
.composer-label span { float:right; font-size:12px; color:#777; }
.composer-art { background:#fffef9; border:2px dashed #b2a5bd; border-radius:12px; min-height:140px; display:grid; place-items:center; padding:12px; color:#78716c; font-size:14px; }
.composer-art img { max-width:100%; height:150px; object-fit:contain; }
.composer-drawing-actions { display:flex; gap:8px; margin:10px 0; }
.composer-drawing-actions .btn { font-size:15px; margin:0; }
.composer-stickers { display:flex; justify-content:center; gap:12px; }
.composer-stickers .btn { font-size:34px; padding:4px 18px; margin:0; }
.composer-preview { height:min(530px,60dvh); position:relative; border:3px solid #242421; border-radius:16px; overflow:hidden; isolation:isolate; }
.composer-preview .king-intro { padding:24px 12px 12px; gap:9px; }
.composer-preview .intro-eyebrow { display:none; }
.composer-preview .king-intro-hill { font-size:25px; }
.composer-preview .intro-hero { flex-basis:140px; }
.composer-preview .king-intro-char { max-height:145px; }
.composer-preview .king-intro-scribble { height:85px; }
.composer-preview .king-intro-msg { font-size:19px; }
.composer-preview .intro-mute { width:36px; height:36px; top:5px; right:5px; font-size:19px; }
.preview-end { height:100%; display:grid; place-items:center; font:26px var(--display); background:#eee4fb; }
@media(max-height:650px) { .king-intro { gap:7px; padding-top:15px; } .intro-hero { flex-basis:130px; } .king-intro-char { max-height:140px; } .king-intro .king-intro-scribble { height:80px; } .composer-hero { height:150px; } }
@media(prefers-reduced-motion:reduce) { .intro-wave.is-playing i { animation:none; } }
.intro-composer.modal { align-items:center; padding:12px; }
.intro-composer .modal-card { max-height:calc(100dvh - 24px); }
.composer-hero { grid-template-rows:minmax(0,1fr); }
.composer-hero>canvas:not(.intro-map) { height:100%; width:auto; max-width:100%; object-fit:contain; }
.composer-preview { height:min(440px,51dvh); }
.composer-actions>.big-btn { width:auto; min-width:0; letter-spacing:0; }
.intro-mute { display:grid; place-items:center; padding:0; }
/* Keep the character and every caption inside their allocated space. */
.intro-hero { position:relative; }
.intro-hero .king-intro-char { position:absolute; inset:0; width:100%; height:100%; max-height:100%; }
.intro-note { flex-shrink:0; }
.intro-note .intro-sticker { position:absolute; right:-10px; top:-14px; padding:3px; background:#ffe54f; border:2px solid #242421; border-radius:12px; transform:rotate(10deg); font-size:32px; }
.composer-preview .intro-hero { flex-basis:110px; min-height:45px; }
.composer-preview .intro-note { padding:12px; }
.composer-preview .king-intro-scribble { height:60px; }
.composer-preview .king-intro-msg { font-size:18px; }
@media(max-height:500px) { .king-intro { overflow-y:auto; justify-content:flex-start; } }
/* Recording happens in place; the king waits on a little floating platform. */
.recording-hero { height:225px; padding-bottom:35px; background:radial-gradient(ellipse at 50% 45%,#d3b1ff65,transparent 63%); }
.recording-hero>canvas:not(.intro-map) { z-index:1; }
.composer-pedestal { position:absolute; bottom:5px; left:20%; width:60%; height:34px; background:repeating-linear-gradient(45deg,transparent 0 15px,#9a713d30 16px 18px),repeating-linear-gradient(-45deg,#d6b177 0 15px,#a07b4330 16px 18px); border:3px solid #24251f; border-radius:8px 8px 40% 40%; box-shadow:0 5px 0 #24251f; }
.composer-pedestal::before { content:''; position:absolute; top:-10px; left:-7px; right:-7px; height:15px; background:#ffe7a3; border:3px solid #24251f; border-radius:45% 25% 40% 30%; }
.composer-record.inline-record { padding:12px 14px; border:2px solid #24251f; background:#fffdf6; }
.record-mic { display:grid; place-items:center; width:76px; height:76px; margin:0 auto 12px; border:3px solid #24251f; outline:2px solid #24251f; outline-offset:3px; border-radius:50%; background:#ffe831; box-shadow:0 3px 0 #24251f; }
.record-mic svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; }
.record-mic svg rect { fill:currentColor; }
.record-wave { display:flex; height:30px; align-items:center; justify-content:center; gap:3px; }
.record-wave i { width:4px; height:var(--bar); background:#d0ccc0; border-radius:4px; }
.is-recording .record-mic { background:#ff817b; }
.is-recording .record-wave i { background:#a77bdd; animation:intro-wave .5s var(--delay) infinite alternate; }
.record-time { font:600 13px var(--ui); margin:6px 0 0; font-variant-numeric:tabular-nums; }
.inline-record .record-status { margin:7px 0 0; font-size:13px; line-height:1.3; }
.record-status:empty,.record-review:empty { display:none; }
.record-review { display:flex; justify-content:center; gap:8px; margin-top:8px; }
.record-review .btn { font-size:17px; padding:5px 15px; min-height:36px; }
.intro-composer .record-hint { text-align:center; margin:10px 0 0; font:18px var(--display); }
.mark-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:6px 0 20px; }
.mark-tabs .btn { margin:0; display:flex; flex-direction:column; align-items:center; font-size:28px; padding:10px 5px; }
.mark-tabs .btn span { font-size:18px; }
.mark-tabs [aria-selected=true] { background:#ffe831; }
.mark-workspace { min-height:220px; }
.mark-workspace textarea { background:#fffdf6; min-height:180px; font-family:'Kalam',var(--ui); font-size:23px; border:2px solid #24251f; border-radius:4px 10px 5px 7px; box-shadow:3px 4px 0 #24251f; }
.mark-workspace .composer-art { border:2px solid #24251f; background:#fffdf6; min-height:180px; gap:8px; align-content:center; box-shadow:3px 4px 0 #24251f; }
.mark-empty-icon { font-size:40px; text-align:center; color:#a77bdd; }
.mark-workspace .composer-drawing-actions { justify-content:center; }
.mark-workspace .composer-drawing-actions .big-btn { width:auto; font-size:21px; padding:8px 22px; }
.mark-workspace .composer-stickers { gap:10px; margin-top:20px; }
.mark-workspace .composer-stickers .btn { display:flex; flex-direction:column; align-items:center; padding:12px; min-width:80px; }
.mark-workspace .composer-stickers .btn span:first-child { font-size:42px; }
.mark-workspace .composer-stickers .btn span:last-child { font-size:18px; }
.mark-summary,.sticker-help { text-align:center; font-size:14px; }
/* Giphy sticker library — horizontal-scroll picker in the brag composer */
.composer-stickers.sticker-scroll { justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; gap:10px; padding:6px 2px 10px; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
.sticker-thumb { flex:0 0 auto; width:88px; height:88px; min-width:88px; padding:5px; margin:0; border:2px solid #24242126; border-radius:14px; background:#fff; display:grid; place-items:center; scroll-snap-align:start; }
.sticker-thumb img { width:100%; height:100%; object-fit:contain; }
.sticker-thumb[aria-pressed="true"] { border-color:#8053b5; box-shadow:0 0 0 2px #8053b5; }
/* Giphy image stickers render as a clean in-flow picture (same size regardless of text/draw), not an emoji corner-badge. */
.intro-note .intro-sticker-img { position:static; transform:none; background:none; border:none; padding:0; font-size:0; display:block; width:auto; max-width:min(72%,220px); height:clamp(82px,18vh,150px); object-fit:contain; margin:6px auto 2px; border-radius:12px; }
/* Slot machine: reels are blank until you spin */
.casino-modal.pre-spin .casino-strip { visibility:hidden; }
.intro-composer .composer-sub { border-radius:5px 12px 4px 10px; }
@media(max-height:700px) { .recording-hero { height:175px; } .record-mic { width:62px; height:62px; } }
@media(prefers-reduced-motion:reduce) { .is-recording .record-wave i { animation:none; } }
/* Shared motion vocabulary; transforms never delay input or navigation. */
:root { --motion-press:80ms; --motion-release:120ms; --motion-small:150ms; --motion-screen:220ms; --motion-in:cubic-bezier(.16,1,.3,1); --motion-out:cubic-bezier(.4,0,1,1); }
:where(.btn,.big-btn,.chip,.app-nav button,.app-nav a) { transition:translate var(--motion-release) var(--motion-in),transform var(--motion-release) var(--motion-in),opacity var(--motion-small) ease-out; }
:where(.btn,.big-btn,.chip,.app-nav button,.app-nav a):active:not(:disabled) { translate:0 1px; transition-duration:var(--motion-press); }
.motion-pending { position:fixed; z-index:12000; bottom:calc(78px + env(safe-area-inset-bottom)); left:50%; translate:-50% 0; max-width:calc(100% - 32px); padding:10px 18px; border:2px solid var(--ink,#242421); border-radius:12px; background:#fffbed; color:#242421; box-shadow:2px 3px 0 #242421; pointer-events:none; font:600 16px var(--ui,sans-serif); }
.intro-composer.keyboard-open { top:var(--keyboard-top,0px); bottom:auto; height:var(--keyboard-height,100%); align-items:flex-start; box-sizing:border-box; }
.intro-composer.keyboard-open .modal-card { max-height:calc(var(--keyboard-height) - 24px); overscroll-behavior:contain; scroll-padding:16px; }
.intro-composer.keyboard-open .composer-top { position:static; }
.intro-composer.keyboard-open .composer-actions { position:sticky; bottom:0; background:#fffbed; padding-top:10px; }
.intro-composer.keyboard-open .mark-workspace { min-height:0; }
.intro-composer.keyboard-open .mark-workspace textarea { min-height:100px; scroll-margin:16px; }
.gif-grid img { aspect-ratio:1; object-fit:cover; }
.loot-prize { min-height:160px; }
.intro-skip { position:absolute; right:12px; bottom:12px; z-index:3; }
@media(prefers-reduced-motion:reduce) { :where(.btn,.big-btn,.chip,.app-nav button,.app-nav a) { transition:none; } }

#hud.editor-hud .editor-header-actions .editor-submit { background:var(--gold); padding:5px 18px; }
/* Compose the note beside a persistent, silent preview of the actual intro. */
.intro-composer.editing-mark .modal-card { width:min(100%,780px); }
.mark-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; }
.mark-live-preview { position:relative; isolation:isolate; height:240px; border:2px solid #242421; border-radius:16px; overflow:hidden; }
.mark-preview-label { position:absolute; top:8px; left:10px; z-index:50; font:800 9px var(--ui); letter-spacing:1px; color:#6c6375; }
.mark-live-preview .king-intro { padding:26px 16px 12px; gap:8px; pointer-events:none; }
.mark-live-preview .king-intro-hill { font-size:21px; line-height:1; }
.mark-live-preview .intro-hero { flex:1 1 70px; min-height:35px; }
.mark-live-preview .intro-note { width:85%; min-height:0; padding:8px; border-width:2px; box-shadow:2px 3px 0 #242421; }
.mark-live-preview .intro-note::before { width:35px; height:12px; top:-7px; left:calc(50% - 17px); }
.mark-live-preview .king-intro-msg { font-size:15px; line-height:1.1; }
.mark-live-preview .king-intro-scribble { height:50px; }
.mark-live-preview .intro-sticker { font-size:24px; top:-10px; }
.mark-live-preview .intro-sticker-img { height:48px; margin:3px auto 1px; }
.composer-preview .intro-sticker-img { height:70px; }
.intro-composer.editing-mark.keyboard-open .mark-live-preview .intro-sticker-img { height:36px; }
.editing-mark .mark-tabs { margin:0 0 10px; gap:7px; }
.editing-mark .mark-tabs .btn { flex-direction:row; justify-content:center; gap:6px; font-size:20px; padding:8px 4px; min-height:44px; }
.editing-mark .mark-workspace { min-height:0; }
.editing-mark .mark-workspace textarea { min-height:80px; height:80px; margin-top:6px; font-size:20px; }
.mark-draw-canvas { display:block; width:100%; height:auto; max-height:190px; aspect-ratio:13/7; border:2px solid #242421; border-radius:10px; background:#fffdf6; touch-action:none; cursor:crosshair; }
.editing-mark .composer-drawing-actions { margin-top:6px; }
.editing-mark .composer-drawing-actions .btn { margin:0; min-height:44px; }
.editing-mark .composer-stickers { margin-top:8px; }
.editing-mark .sticker-help { margin:0; font-size:14px; }
@media(min-width:700px) {
 .mark-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
 .mark-live-preview { height:320px; position:sticky; top:0; }
 .mark-live-preview .intro-hero { flex-basis:130px; }
 .mark-live-preview .king-intro-scribble { height:75px; }
}
@media(max-width:699px) {
 .intro-composer.editing-mark .modal-card { padding:14px; }
 .intro-composer.editing-mark h2 { font-size:26px; margin:10px 0; }
 .intro-composer.editing-mark .composer-sub { display:none; }
 .intro-composer.editing-mark .composer-top b { font-size:21px; }
 .intro-composer.editing-mark .composer-actions .big-btn { font-size:21px; }
 /* Pin the live preview to the top of the scrolling card so it stays visible while the keyboard pushes the textarea up. */
 .intro-composer.editing-mark .mark-live-preview { position:sticky; top:0; z-index:5; background:#fffbed; box-shadow:0 8px 10px -8px #0005; }
}
.intro-composer.editing-mark.keyboard-open h2,.intro-composer.editing-mark.keyboard-open .composer-top { display:none; }
.intro-composer.editing-mark.keyboard-open .mark-live-preview { height:175px; }
.intro-composer.editing-mark.keyboard-open .mark-live-preview .king-intro { padding:20px 12px 8px; gap:5px; }
.intro-composer.editing-mark.keyboard-open .mark-live-preview .king-intro-hill { font-size:17px; }
.intro-composer.editing-mark.keyboard-open .mark-live-preview .intro-hero { min-height:20px; }
.intro-composer.editing-mark.keyboard-open .mark-live-preview .king-intro-scribble { height:24px; }
.intro-composer.editing-mark.keyboard-open .mark-workspace textarea { min-height:65px; height:65px; }

.intro-composer.editing-mark.keyboard-open .composer-actions { position:static; }
.intro-composer.editing-mark.keyboard-open .mark-live-preview .intro-note { padding:6px; }
.intro-composer.editing-mark.keyboard-open .mark-live-preview .king-intro-msg { font-size:13px; }

.slot-rarity { color:#6c329b!important;font-weight:900!important;letter-spacing:.12em;font-size:10px!important; }

/* Profile collection reuses the paper cards and gold accents of the character editor. */
.kh-collection-progress{border:2px solid var(--ink);border-radius:18px;padding:16px;background:var(--gold-soft);margin:12px 0 24px}
.kh-collection-progress>div{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kh-collection-progress .kh-h2{margin:0}
.kh-collection-progress progress{display:block;width:100%;height:16px;margin:12px 0;accent-color:var(--gold);border-radius:20px;overflow:hidden}
.kh-collection-progress progress::-webkit-progress-bar{background:var(--paper)}
.kh-collection-progress progress::-webkit-progress-value{background:var(--gold)}
.kh-collection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0 24px}
.kh-collection-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;border:2px solid var(--line);border-radius:16px;padding:14px 10px;background:var(--paper);min-width:0}
.kh-collection-card b{font-size:16px;overflow-wrap:anywhere}
.kh-collection-card small{font-size:13px;color:var(--ink-soft);line-height:1.45}
.kh-collection-card .btn{margin-top:auto;min-height:40px;font-size:16px}
.kh-collection-art{height:80px;display:flex;align-items:center;justify-content:center;font-size:42px}
.kh-power-catalog{margin-top:28px}
.kh-power-catalog .kh-collection-art{height:48px;font-size:32px}
@media(max-width:600px){.kh-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kh-collection-card{padding:12px 8px}}
.kh-collection-card a.btn{color:var(--ink);text-decoration:none}

.kh-catalog-controls{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.kh-catalog-controls input,.kh-catalog-controls select{font:inherit;color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:12px;padding:12px;min-width:0;max-width:100%}
.kh-catalog-controls input{flex:1 1 200px}
.kh-catalog-controls select{flex:1 1 150px}
/* Battle Pass: paper, ink outlines and gold, shared with the Profile. */
.bp-summary{display:block;width:100%;text-align:left;background:var(--paper);border:2px solid var(--line);border-radius:20px;padding:16px;margin:0 0 20px;color:var(--ink);font:inherit;cursor:pointer}
.bp-summary-top,.bp-summary-bottom{display:flex;align-items:center;gap:12px;justify-content:space-between}
.bp-summary-top>span:nth-child(2){flex:1}.bp-summary strong{font-family:var(--display);font-size:26px}.bp-summary small{display:block;color:var(--ink-soft)}
.bp-view{font-family:var(--display);font-size:20px}.bp-crown{position:relative;font-size:58px;color:#e9b90a;line-height:1}.bp-crown b{position:absolute;font-size:18px;color:var(--ink);left:50%;top:53%;transform:translate(-50%,-50%)}
.bp-summary-bottom{font-size:13px;color:var(--ink-soft);flex-wrap:wrap}.bp-summary progress,.bp-dialog progress{width:100%;height:16px;accent-color:#ffce28;margin:12px 0;border:0;border-radius:18px;overflow:hidden}.bp-summary progress::-webkit-progress-bar,.bp-dialog progress::-webkit-progress-bar{background:#dcd6c8}.bp-summary progress::-webkit-progress-value,.bp-dialog progress::-webkit-progress-value{background:#ffcf28}
.bp-dialog{position:fixed;inset:0;margin:0 auto;width:100%;max-width:960px;height:100dvh;max-height:100dvh;box-sizing:border-box;border:0;background:var(--paper);color:var(--ink);padding:20px 20px calc(32px + env(safe-area-inset-bottom));overflow:auto;z-index:10040}.bp-dialog::backdrop{background:#24251fcc}.bp-close{position:sticky;top:0;z-index:3;background:var(--paper);min-width:48px;min-height:48px}
.bp-hero{position:relative;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(140deg,#fffaf0 35%,#bee9fb);border-radius:20px;padding:20px;margin:12px 0 18px;overflow:hidden}.bp-hero h1{font-family:var(--display);font-size:clamp(42px,8vw,76px);line-height:1.05;color:#ffd333;text-shadow:2px 3px 0 #24251f,-1px -1px 0 #24251f;margin:16px 0}.bp-hero h2{font-size:22px}.bp-brand{font-weight:900}.bp-season{background:#ffda40;padding:5px 10px;border:2px solid var(--ink);border-radius:10px}.bp-hero-character{align-self:flex-end}.bp-hero-character img{width:150px;height:150px;object-fit:contain}
.bp-progress,.bp-challenge,.bp-coming{border:3px solid var(--ink);border-radius:18px;padding:16px;box-shadow:3px 5px 0 var(--ink);margin:16px 0 24px}.bp-progress>div{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}.bp-progress h2{margin:0;font-family:var(--display);font-size:30px}.bp-progress em{font-style:normal;color:#c69700}.bp-progress small,.bp-challenge small{color:var(--ink-soft);font-size:12px}.bp-reward-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.bp-reward-heading h2{font-family:var(--display);font-size:32px}.bp-reward-heading span{font-size:13px}
.bp-track{display:flex;overflow-x:auto;padding:4px 4px 10px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}.bp-tier{flex:0 0 150px;border:2px solid var(--ink);border-left:0;text-align:center;scroll-snap-align:center}.bp-tier h3,.bp-labels>div:first-child{height:42px;box-sizing:border-box;margin:0;padding:6px;font-family:var(--display);font-size:26px;border-bottom:2px solid var(--ink)}.bp-tier.is-current{outline:3px solid #e9b90a;outline-offset:-3px;background:#fff4b1}.bp-tier.is-current h3{background:#ffda40}.bp-free{height:226px;box-sizing:border-box;display:flex;align-items:center;flex-direction:column;gap:8px;padding:12px 8px}.bp-free b{font-size:13px}.bp-free .btn{margin-top:auto;font-size:16px;color:var(--ink);text-decoration:none}.bp-locked{margin-top:auto;color:var(--ink-soft);font-size:13px}.bp-premium{height:105px;box-sizing:border-box;background:#ffe58a;border-top:2px solid var(--ink);display:flex;flex-direction:column;justify-content:center;gap:4px}.bp-premium>span{font-size:32px}.bp-premium small{font-size:12px}.bp-labels{flex:0 0 74px;position:sticky;left:0;background:var(--paper);z-index:1;border:2px solid var(--ink);text-align:center;border-radius:12px 0 0 12px;font-family:var(--display)}.bp-labels>div:nth-child(2){height:226px;display:grid;place-items:center}.bp-labels>div:last-child{height:105px;box-sizing:border-box;background:#ffd333;border-top:2px solid var(--ink);padding-top:22px;font-size:17px}
.bp-challenge{display:flex;align-items:center;gap:14px}.bp-challenge>span{font-size:36px}.bp-challenge>div{flex:1}.bp-challenge h3{margin:5px 0}.bp-challenge p{margin:4px 0}.bp-challenge>b{white-space:nowrap;background:#ffda40;border-radius:10px;padding:8px;font-size:16px}.bp-coming{background:#ffdf70;text-align:center}.bp-coming h2{font-family:var(--display);font-size:30px}.bp-owned summary{cursor:pointer;font-weight:bold}.bp-owned a{color:var(--ink);text-decoration:none}
@media(max-width:480px){.bp-dialog{padding:12px 12px 32px}.bp-hero{padding:16px}.bp-hero-character{position:absolute;right:0;bottom:0;opacity:.22;pointer-events:none}.bp-hero>div:first-child{position:relative;z-index:1}.bp-challenge{gap:8px}.bp-challenge>span{display:none}.bp-reward-heading span{max-width:110px}}
.bp-landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.7;pointer-events:none}.bp-hero>div{position:relative}.bp-hero-character{z-index:1}.bp-free img{flex-shrink:0}
@media(max-width:480px){.bp-hero{min-height:245px;align-items:flex-start}.bp-hero h2{max-width:190px;margin-top:28px}.bp-hero .bp-hero-character{position:absolute;right:0;bottom:0;opacity:1}.bp-hero-character img{width:125px;height:125px}}
.economy-currencies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.economy-currencies article{border:2px solid var(--line);border-radius:16px;background:var(--paper);padding:16px}.economy-currencies b{font-size:18px}.economy-currencies p{font-size:14px;line-height:1.5;color:var(--ink-soft)}#rwEconomy{margin:28px 0}#rwEconomy .rq-pay{font-size:13px;white-space:normal}#rwEconomy details{margin-top:16px}#rwEconomy summary{cursor:pointer;font-weight:bold}@media(max-width:600px){.economy-currencies{grid-template-columns:1fr}.economy-currencies article{padding:12px}.economy-currencies p{margin:6px 0}}

#hub .rs-list .btns{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}#hub .rs-list .btn{min-height:44px}#giftGroup,#giftFriend{display:block;width:100%;margin:8px 0 16px;padding:10px;font:inherit}#giftAnnounce{width:20px;height:20px;vertical-align:middle;margin-right:8px}.economy-wallet{border:2px solid var(--line);border-radius:16px;padding:16px;margin:20px 0;background:var(--paper)}

/* A tiny paper ribbon, leaving the course and touch controls unobstructed. */
.run-ribbon{align-self:center;display:flex;align-items:center;gap:10px;width:max-content;max-width:min(86vw,340px);box-sizing:border-box;padding:10px 14px;background:#fff9df;color:#29271f;border:1.5px solid #827856;border-radius:7px 13px 9px 12px;box-shadow:0 3px 0 #29271f24;animation:run-toast-in .18s ease-out;pointer-events:none;font:600 14px/1.3 var(--ui)}
.run-ribbon-icon{font-size:23px;flex:none;color:#856517}.run-ribbon-copy{min-width:0}.run-ribbon-copy b{display:block;font:700 17px/1.2 var(--hand,var(--ui))}.run-ribbon-copy small{display:block;font-size:12px;font-weight:400;line-height:1.4;margin-top:3px;color:#655d48}.run-ribbon-score{flex:none;color:#296645;font-size:23px;line-height:1.1;padding-left:10px;border-left:1px solid #d8cfad}.run-ribbon-score small{display:block;font-size:10px;font-weight:600;margin-top:2px}.run-ribbon:has(.run-ribbon-score) .run-ribbon-icon{font-size:18px}@media(prefers-reduced-motion:reduce){.run-ribbon{animation:none}}

/* Stable navigation chrome; short transitions connect content, never gate input. */
.profile-skeleton{min-height:420px}.profile-skeleton [role=status]{font-size:14px;color:var(--ink-soft)}
.skeleton-avatar,.skeleton-line,.skeleton-panel{background:#e8e3d2;border-radius:16px;margin:18px 0}
.skeleton-avatar{width:96px;height:96px;border-radius:50%}.skeleton-line{width:60%;height:20px}.skeleton-panel{height:180px}
.kh-screen[inert],.modal[inert]{pointer-events:none}

/* First-play worlds share one live canvas and the familiar movement controls. */
.discovery-browser{position:absolute;top:16px;left:16px;right:60px;z-index:4;pointer-events:none}
.discovery-browser[hidden],.discovery-swipe-hint[hidden]{display:none}
.discovery-keyboard{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;pointer-events:auto}
.discovery-keyboard:focus-within{clip-path:none;width:auto;height:auto;overflow:visible;background:var(--paper);padding:8px;display:flex;gap:8px}
.discovery-swipe-hint{position:absolute;top:32%;left:50%;transform:translateX(-50%);z-index:4;display:flex;align-items:center;flex-direction:column;gap:8px;pointer-events:none;color:#fff;text-shadow:0 2px 5px #171827;font:600 14px var(--ui);white-space:nowrap;animation:discovery-hint-life 5s both}
.discovery-swipe-hint svg{width:48px;height:64px;fill:none;stroke:white;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 3px #171827);animation:discovery-swipe 1.5s ease-in-out infinite}
.discovery-swipe-hint span{padding:7px 12px;border-radius:20px;background:#191c32b8}
@keyframes discovery-hint-life{0%,90%{opacity:1}100%{opacity:0}}
@keyframes discovery-swipe{0%,100%{transform:translateY(10px);opacity:.5}55%{transform:translateY(-12px);opacity:1}}
@media(prefers-reduced-motion:reduce){.discovery-swipe-hint svg{animation:none}}
.discovery-mode #runHint{display:none}.discovery-mode .topbar,.discovery-mode .app-nav{display:none!important}.discovery-mode .canvas-wrap{touch-action:none}.discovery-mode #overlay{z-index:6}

/* Keep background map actions out of capture dialogs. */
#gameScreen:has(#overlay:not([hidden])) .game-rail{display:none!important}
#overlay .card:has(.discovery-close){position:relative}
.discovery-close{position:absolute;top:12px;right:12px;width:36px;height:36px;padding:0;border:1px solid #d1cbb9;border-radius:50%;background:transparent;color:var(--ink);font:26px/1 var(--ui);cursor:pointer}

#overlay .card.discovery-intro{max-width:310px;padding:20px 22px;border-width:2px;border-radius:20px}
#overlay .discovery-intro .win-crown{width:48px;height:48px;margin:0 auto 8px}
#overlay .discovery-intro h1{font-size:30px;line-height:1.05;margin:0 0 12px}
#overlay .discovery-intro p{font-size:15px;line-height:1.45;margin:0 0 16px}
#overlay .discovery-intro .btns{margin-top:0}
#overlay .discovery-intro .btn{padding:10px 18px;font-size:21px}
.discovery-jump-nudge #touch button.jump:not(.down){animation:discovery-jump-pulse 1.3s ease-in-out infinite}
@keyframes discovery-jump-pulse{50%{filter:brightness(1.12);box-shadow:0 3px 0 #a97822,0 0 0 5px #ffc52b45,inset 0 2px 0 #fff6c2}}
@media(prefers-reduced-motion:reduce){.discovery-jump-nudge #touch button.jump:not(.down){animation:none;outline:3px solid #e7a91c;outline-offset:3px}}

.discovery-chat .modal-card{max-width:390px;padding:24px}
.discovery-chat h2{font-size:30px;padding-right:30px;margin:0 0 10px}
.discovery-chat p{font-size:14px;line-height:1.45}
.discovery-chat form label{display:block;font-size:14px;margin:14px 0}
.discovery-chat input{display:block;width:100%;margin-top:6px}
.discovery-chat .big-btn{display:block;width:100%;font-size:20px;padding:12px;margin-top:12px;text-align:center;letter-spacing:0}
.discovery-chat-steps{padding-left:22px;margin:20px 0}
.discovery-chat-steps li{padding-left:4px;margin-bottom:18px;font-size:15px}
.discovery-chat-steps p{margin:6px 0 10px}
.discovery-chat-steps .btn{margin-top:8px}
.discovery-chat-wait{color:var(--ink-soft)}
.discovery-chat details{font-size:13px}.discovery-chat details .btn{display:block;margin:10px 0}
.discovery-chat [data-error]{color:var(--red)}

.onboarding-draft .topbar,.onboarding-draft .app-nav{display:none!important}

.game-rail .game-rank{font-family:var(--font-body, sans-serif);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.modal.game-pause{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;align-items:center;padding:0;cursor:pointer}
.modal.game-pause .modal-card{width:auto;max-width:none;padding:0;margin:0;background:transparent;border:0;box-shadow:none;overflow:visible}
.pause-symbol{display:block;width:80px;height:80px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#fff;cursor:pointer;filter:drop-shadow(0 2px 5px #0005)}
.pause-symbol svg{width:100%;height:100%;fill:currentColor}
.pause-symbol:focus-visible{outline:2px solid #fff;outline-offset:8px;border-radius:12px}

.game-rail .game-character{overflow:hidden}
.game-rail .game-character .character-face{display:block;border:0;border-radius:50%;margin:0;background:transparent;object-fit:contain;pointer-events:none}
.game-character-dialog{padding:0}
.game-character-dialog .modal-card{width:100%;max-width:none;height:100dvh;max-height:none;padding:0;border:0;border-radius:0;overflow:hidden}
.game-character-dialog iframe{display:block;width:100%;height:100%;border:0;background:#fffdf2}

body.kh-open #touch,body.kh-open #gameRail{display:none!important}
body.has-app-nav .kh-screen.profile-from-game{bottom:0}
body:has(.profile-from-game:not([inert])) .app-nav{display:none!important}

.phone-create.btn { background: transparent; border: 0; box-shadow: none; padding: 8px 4px; min-height: 44px; color: #51318a; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.game-board-tabs { display:flex; gap:4px; padding:4px; margin:30px 0 18px; background:#eee9db; border-radius:14px; }
.game-board-tabs button { flex:1; border:0; border-radius:10px; padding:12px 8px; font:inherit; font-weight:700; background:transparent; color:var(--ink); cursor:pointer; }
.game-board-tabs button[aria-selected="true"] { background:#ffda32; box-shadow:0 2px 0 #0002; }

/* Keep the optional save invitation balanced on narrow gameplay screens. */
.guest-save-prompt .modal-card { text-align: center; }
.guest-save-prompt .modal-card .btns { justify-content: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 16px; }
.guest-save-prompt .modal-card > p:last-child { margin: 0; }
.guest-save-prompt .btn { max-width: 100%; white-space: normal; }

/* Keep the optional save invitation balanced on small screens. */
.guest-save-prompt .modal-card { text-align: center; }
.guest-save-prompt .modal-card .btns { justify-content: center; flex-wrap: wrap; margin: 20px 0 16px; }
.guest-save-prompt .modal-card > p { margin: 0; }
.guest-save-prompt .btn { text-align: center; }

.kh-profile-group .kh-group-activity { display:block; margin-top:5px; font-size:12px; line-height:1.35; color:var(--muted,#74746b); }
.kh-profile-group .kh-group-activity.is-new { color:#584193; font-weight:600; }

.kh-profile-screen .kh-close[hidden] { display:none!important; }

/* Rival challenge: a quick, skippable face-off before gameplay. */
.king-intro.intro-challenge { overflow-y:auto; justify-content:safe center; gap:14px; padding:106px 22px 22px; background:radial-gradient(ellipse at 50% 46%,#ffdf6380,transparent 48%),#fff9e8ed; }
.intro-challenge .intro-eyebrow { position:absolute; top:28px; margin:0; padding:7px 16px; font-size:20px; letter-spacing:1.5px; }
.intro-challenge .king-intro-hill { width:min(100%,520px); font-size:clamp(30px,8vw,52px); line-height:1.02; text-transform:uppercase; animation:intro-challenge-hit .32s ease-out both; }
.intro-rival,.intro-dare { display:block; overflow-wrap:anywhere; }
.intro-rival { color:#63449a; margin-bottom:5px; }
.intro-dare { color:#242421; }
.intro-challenge .intro-hero { flex:0 1 260px; min-height:105px; animation:intro-challenge-hit .38s .1s ease-out both; }
.intro-challenge .intro-note { width:min(88%,360px); padding:12px; animation:intro-challenge-hit .3s .2s ease-out both; }
.intro-challenge .king-intro-scribble { height:clamp(60px,14vh,140px); }
.intro-challenge .intro-wave { padding:6px 10px; }
.intro-challenge .intro-wave>div { height:20px; }
.intro-challenge .intro-challenge-start { flex:none; width:auto; max-width:100%; min-height:44px; margin:4px 0 0; padding:10px 20px; font:400 21px/1.1 var(--display); animation:intro-challenge-hit .3s .3s backwards; cursor:pointer; }
.intro-challenge .intro-challenge-start:focus-visible { outline:3px solid #63449a; outline-offset:5px; }
.intro-challenge progress { height:4px; opacity:.6; }
@keyframes intro-challenge-hit { from { opacity:0; translate:0 8px; scale:.96; } to { opacity:1; translate:0 0; scale:1; } }
@media(max-height:700px) {
 .king-intro.intro-challenge { gap:10px; padding:82px 18px 14px; }
 .intro-challenge .intro-eyebrow { top:20px; font-size:16px; padding:5px 12px; margin:0; }
 .intro-challenge .king-intro-hill { font-size:clamp(26px,7vw,36px); }
 .intro-challenge .intro-hero { flex-basis:175px; min-height:70px; }
 .intro-challenge .king-intro-scribble { height:70px; }
 .intro-challenge .intro-challenge-start { min-height:44px; font-size:20px; padding:9px 18px; }
}
@media(max-height:500px) { .king-intro.intro-challenge { overflow-y:auto; justify-content:flex-start; } }
@media(prefers-reduced-motion:reduce) { .intro-challenge :is(.king-intro-hill,.intro-hero,.intro-note,.intro-challenge-start) { animation:none; } }