/* Inkline - doodle notebook UI. Owned by agent D. */
:root {
  --ink: #1b1b1f;
  --paper: #f6f2e7;
  --paper-2: #efe9d6;
  --line: #b9cde3;
  --margin: #e79a9a;
  --p0: #ff2e63;
  --p1: #1e90ff;
  --hand: 'Patrick Hand', 'Comic Sans MS', 'Segoe Print', cursive;
  --marker: 'Permanent Marker', 'Marker Felt', 'Comic Sans MS', cursive;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--paper); color: var(--ink); font-family: var(--hand); }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-family: var(--hand); font-size: 18px; }
#ui button, #ui input, #ui select, #ui .menu-overlay, #ui .win-overlay { pointer-events: auto; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------ doodle box */
.dbox { position: relative; isolation: isolate; }
.dbox::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  filter: url(#ink-wobble);
  box-shadow: 3px 4px 0 rgba(27, 27, 31, 0.2);
}
.dbox.p0::before { border-color: var(--p0); }
.dbox.p1::before { border-color: var(--p1); }
.c0 { color: var(--p0); font-weight: bold; }
.c1 { color: var(--p1); font-weight: bold; }

/* ------------------------------------------------------------ HUD */
.hud { position: absolute; inset: 0; pointer-events: none; }
.hud[hidden] { display: none; }

.hud-top { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: min(560px, 56vw); min-width: 280px; text-align: center; }
.bar-label { font-family: var(--marker); font-size: 15px; letter-spacing: 2px; margin-bottom: 3px; display: flex; justify-content: space-between; align-items: baseline; padding: 1px 8px; background: rgba(246, 242, 231, 0.92); border-radius: 6px; }
.bar-label .val { font-family: var(--hand); font-size: 18px; }
.bar { height: 30px; padding: 4px; }
.bar-inner { position: relative; height: 100%; }
.bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  background: repeating-linear-gradient(-45deg, var(--ink) 0 5px, #34343b 5px 8px);
  border-radius: 8px 3px 6px 3px;
}
.bar-ghosts { position: absolute; inset: 0; overflow: hidden; border-radius: 4px; }
.ghost { position: absolute; top: 0; bottom: 0; left: 0; width: 0; opacity: 0; }
.ghost.g0 { background: repeating-linear-gradient(45deg, var(--p0) 0 4px, #ff7b9c 4px 7px); }
.ghost.g1 { background: repeating-linear-gradient(45deg, var(--p1) 0 4px, #6cb8ff 4px 7px); }
.bar.regen::before { border-color: #2a9d5c; box-shadow: 0 0 12px 2px rgba(60, 200, 110, 0.55), 3px 4px 0 rgba(27, 27, 31, 0.2); animation: regenPulse 1s ease-in-out infinite; }
.bar.low::before { border-color: #e07a00; box-shadow: 0 0 10px 2px rgba(224, 122, 0, 0.5), 3px 4px 0 rgba(27, 27, 31, 0.2); animation: emptyFlash 0.8s steps(2, jump-none) infinite; }
.bar.empty::before { border-color: #d81b3c; animation: emptyFlash 0.5s steps(2, jump-none) infinite; }
.bar.empty .bar-inner::after {
  content: 'EMPTY!'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--marker); color: #d81b3c; font-size: 18px; letter-spacing: 3px;
  text-shadow: 0 0 0 #d81b3c, 1px 1px 0 var(--paper), -1px -1px 0 var(--paper), 1px -1px 0 var(--paper), -1px 1px 0 var(--paper);
  animation: emptyFlash 0.5s steps(2, jump-none) infinite;
}
@keyframes regenPulse { 0%, 100% { filter: url(#ink-wobble) brightness(1); } 50% { filter: url(#ink-wobble) brightness(1.15); } }
@keyframes emptyFlash { 0% { opacity: 1; } 50% { opacity: 0.25; } }

.chip .tag.seat { background: var(--ink); color: var(--paper); }
.hearts { margin-top: 6px; display: flex; gap: 9px; justify-content: center; height: 33px; }
.hearts .heart { width: 36px; height: 33px; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; filter: url(#ink-wobble); transition: transform 0.2s; }
.hearts .heart.full { fill: var(--p0); }
.hearts .heart.empty { fill: transparent; opacity: 0.5; stroke-dasharray: 3 2.5; transform: scale(0.85); }
.hearts.ouch .heart { animation: heartOuch 0.45s ease-out; }
.hearts.ouch-big { animation: heartsQuake 0.6s ease-out; }
.hearts.ouch-big .heart { animation: heartOuch 0.6s ease-out; }
@keyframes heartOuch { 0% { transform: scale(1.35) rotate(-8deg); } 60% { transform: scale(0.9) rotate(5deg); } 100% { transform: none; } }
@keyframes heartsQuake { 0%, 100% { transform: none; } 15% { transform: translate(-7px, 2px) rotate(-3deg); } 30% { transform: translate(6px, -2px) rotate(3deg); }
  45% { transform: translate(-5px, 1px) rotate(-2deg); } 60% { transform: translate(4px, 0) rotate(1deg); } 80% { transform: translate(-2px, 0); } }

/* losing a heart (hud.js heartLost): the emptied heart pops off the row and cracks in two with a "-1" */
.heart-loss { position: absolute; width: 36px; height: 33px; margin: -16.5px 0 0 -18px; z-index: 6; }
.heart-loss .hl-fly { position: relative; width: 100%; height: 100%; animation: hlPop 1.1s ease-out forwards; }
.heart-loss .hl-half { position: absolute; inset: 0; }
.heart-loss .hl-half .heart { width: 100%; height: 100%; display: block; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; fill: var(--p0); }
.heart-loss .hl-half.l { clip-path: polygon(0 0, 54% 0, 44% 32%, 60% 52%, 42% 74%, 52% 100%, 0 100%); animation: hlHalfL 1.1s ease-in forwards; }
.heart-loss .hl-half.r { clip-path: polygon(54% 0, 100% 0, 100% 100%, 52% 100%, 42% 74%, 60% 52%, 44% 32%); animation: hlHalfR 1.1s ease-in forwards; }
.heart-loss .hl-minus { position: absolute; left: 100%; top: -6px; font-family: var(--marker); font-size: 14px; color: #d81b3c; white-space: nowrap;
  text-shadow: 1px 1px 0 var(--paper), -1px -1px 0 var(--paper), 1px -1px 0 var(--paper), -1px 1px 0 var(--paper); animation: hlMinus 1.1s ease-out forwards; }
@keyframes hlPop { 0% { transform: scale(1); } 18% { transform: scale(1.9) rotate(-10deg); } 30% { transform: scale(1.7) rotate(8deg); }
  40% { transform: scale(1.75) rotate(-4deg); } 100% { transform: scale(1.6) translateY(4px); } }
@keyframes hlHalfL { 0%, 38% { transform: none; opacity: 1; } 100% { transform: translate(-16px, 46px) rotate(-38deg); opacity: 0; } }
@keyframes hlHalfR { 0%, 38% { transform: none; opacity: 1; } 100% { transform: translate(16px, 50px) rotate(42deg); opacity: 0; } }
@keyframes hlMinus { 0% { opacity: 0; transform: scale(0.4); } 20% { opacity: 1; transform: scale(1.3); } 70% { opacity: 1; transform: translateY(-10px); } 100% { opacity: 0; transform: translateY(-22px); } }
/* the big one: flies to the middle of the screen, swells, shakes, then shatters there */
.heart-loss.big .hl-fly { animation: hlBigFly 2s cubic-bezier(.3, .7, .3, 1) forwards; }
.heart-loss.big .hl-half.l { animation: hlBigHalfL 2s ease-in forwards; }
.heart-loss.big .hl-half.r { animation: hlBigHalfR 2s ease-in forwards; }
.heart-loss.big .hl-minus { left: 0; right: 0; top: 8px; text-align: center; font-size: 8px; color: var(--ink); text-shadow: none; animation: hlBigMinus 2s ease-out forwards; }
@keyframes hlBigFly {
  0% { transform: none; }
  22% { transform: translate(var(--dx), var(--dy)) scale(5.5) rotate(-8deg); }
  27% { transform: translate(calc(var(--dx) - 6px), var(--dy)) scale(5.2) rotate(6deg); }
  32% { transform: translate(calc(var(--dx) + 6px), var(--dy)) scale(5.4) rotate(-6deg); }
  37% { transform: translate(calc(var(--dx) - 4px), var(--dy)) scale(5.2) rotate(4deg); }
  42% { transform: translate(var(--dx), var(--dy)) scale(5.6) rotate(0deg); }
  100% { transform: translate(var(--dx), calc(var(--dy) + 30px)) scale(5.6); }
}
@keyframes hlBigHalfL { 0%, 46% { transform: none; opacity: 1; } 52% { transform: translate(-3px, 0) rotate(-6deg); opacity: 1; } 100% { transform: translate(-22px, 40px) rotate(-55deg); opacity: 0; } }
@keyframes hlBigHalfR { 0%, 46% { transform: none; opacity: 1; } 52% { transform: translate(3px, 0) rotate(6deg); opacity: 1; } 100% { transform: translate(22px, 44px) rotate(60deg); opacity: 0; } }
@keyframes hlBigMinus { 0%, 44% { opacity: 0; transform: scale(0.3); } 54% { opacity: 1; transform: scale(1.4); } 85% { opacity: 1; transform: translateY(-4px); } 100% { opacity: 0; transform: translateY(-8px); } }
/* red flash around the screen edges on any heart loss (stronger for the big one) */
.hurt-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; box-shadow: inset 0 0 90px 24px rgba(216, 27, 60, 0.55); }
.hurt-flash.on { animation: hurtFlash 0.6s ease-out; }
.hurt-flash.on.big { box-shadow: inset 0 0 160px 60px rgba(216, 27, 60, 0.7); animation: hurtFlash 1.1s ease-out; }
@keyframes hurtFlash { 0% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .heart-loss.big .hl-fly { animation: hlPop 1.1s ease-out forwards; }
  .hearts.ouch-big { animation: none; }
}
.bar-legend { margin-top: 4px; font-size: 15px; opacity: 0.85; min-height: 20px; background: rgba(246, 242, 231, 0.85); border-radius: 6px; padding: 0 6px; display: inline-block; }
.bar-warn { margin-top: 2px; min-height: 26px; font-family: var(--marker); font-size: 18px; color: #d81b3c; letter-spacing: 1px; }
.bar-warn > span { display: none; }
.bar-warn.range .w-range, .bar-warn.empty .w-empty { display: inline-block; }
.bar-warn.range.empty .w-empty { display: none; }
.bar-warn.low .w-low { display: inline-block; color: #e07a00; text-decoration-color: #e07a00; }
.bar-warn.low.range .w-range { display: none; }   /* running out of air matters more */
.bar-warn > span { animation: warnWobble 0.7s ease-in-out infinite alternate; text-decoration: underline wavy #d81b3c; text-underline-offset: 4px; }
@keyframes warnWobble { from { transform: rotate(-1.2deg) scale(1); } to { transform: rotate(1.2deg) scale(1.04); } }

.chip { position: absolute; top: 12px; padding: 7px 14px 8px; min-width: 150px; line-height: 1.15; }
.chip.p0 { left: 14px; }
.chip.p1 { right: 14px; text-align: right; }
.chip .nm { font-family: var(--marker); font-size: 19px; letter-spacing: 1px; }
.chip.p0 .nm { color: var(--p0); }
.chip.p1 .nm { color: var(--p1); }
.chip .you { font-family: var(--hand); font-size: 13px; color: var(--ink); margin-left: 6px; opacity: 0.7; }
.chip .row { font-size: 16px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-height: 22px; }
.chip.p1 .row { justify-content: flex-end; }
.tag { display: none; font-size: 14px; padding: 0 7px; border: 2px solid var(--ink); border-radius: 12px 4px 10px 4px; background: var(--paper-2); }
.tag.on { display: inline-block; }
.tag.shelter { background: #dff3df; }
.tag.tumble { background: #ffe1c9; animation: warnWobble 0.3s ease-in-out infinite alternate; }
.tag.inv { background: #eee; opacity: 0.8; }

.side-info { position: absolute; top: 88px; padding: 4px 12px; font-size: 20px; }
.side-info.left { left: 14px; }
.side-info.right { right: 14px; text-align: right; }
.timer { font-family: var(--marker); font-size: 24px; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.cp { font-size: 20px; }
.cp b { font-family: var(--marker); font-weight: normal; }

.mode-badge { position: absolute; bottom: 14px; right: 14px; padding: 4px 12px; font-size: 16px; font-family: var(--marker); letter-spacing: 1px; }
.mode-badge .code { letter-spacing: 3px; }
.mode-badge .net { margin-left: 8px; font-family: var(--hand); letter-spacing: 0; opacity: 0.75; }
.mode-badge .net small { font-size: 0.8em; }
.mode-badge .net.bad { color: #d81b3c; opacity: 1; }

.hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); padding: 6px 18px; font-size: 16px; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.6s; }
.hint.hide { opacity: 0; }
body.is-paused .hint.hide { opacity: 1; }
.hint b { font-family: var(--marker); font-weight: normal; }
.hint .sep { opacity: 0.4; margin: 0 8px; }

.toasts { position: absolute; top: 175px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(520px, 90vw); }
.toast { padding: 6px 20px 7px; font-size: 22px; text-align: center; animation: toastIn 0.25s cubic-bezier(.2, 1.6, .4, 1) both; }
.toast.out { animation: toastOut 0.4s ease-in both; }
.toast .big { font-family: var(--marker); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px) rotate(-3deg) scale(0.85); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-10px) rotate(2deg); } }

/* ------------------------------------------------------------ kill cam ("WASTED") */
/* Greys out the whole game (canvas + HUD underneath) with a heavy vignette; the word slams in after a beat. */
.killcam {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px;
  padding-bottom: 9vh;   /* the victim is centred on screen; keep the word below them */
  opacity: 0; transition: opacity 0.35s ease-out;
  background: radial-gradient(ellipse at center, rgba(20, 16, 12, 0) 40%, rgba(20, 16, 12, 0.6) 100%);
  -webkit-backdrop-filter: grayscale(0.9) contrast(1.15) sepia(0.2);
  backdrop-filter: grayscale(0.9) contrast(1.15) sepia(0.2);
}
.killcam.on { opacity: 1; transition-duration: 0.9s; }
.hud.kc-on .toasts { opacity: 0; }
.kc-band {
  width: 100%; padding: 6px 16px 10px; text-align: center; background: rgba(12, 10, 8, 0.55);
  transform: scaleY(0); transition: transform 0.2s ease-out;
}
.kc-word {
  font-family: var(--marker); font-size: clamp(64px, 15vw, 150px); line-height: 1.05; letter-spacing: 0.08em;
  color: #b3141f; text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 0 0 30px rgba(0, 0, 0, 0.6);
  transform: rotate(-3deg) scale(1.8); opacity: 0;
}
.kc-blame {
  font-size: clamp(20px, 3.4vw, 30px); padding: 4px 18px; border-radius: 10px 4px 12px 5px;
  background: rgba(246, 242, 231, 0.94); border: 2.5px solid var(--ink); transform: rotate(1.5deg); opacity: 0; max-width: calc(100vw - 32px); text-align: center;
}
.kc-blame .c0, .kc-blame .c1 { font-family: var(--marker); font-weight: normal; }
.killcam.text .kc-band { transform: scaleY(1); }
.killcam.text .kc-word { animation: kcSlam 0.45s cubic-bezier(.2, 1.5, .4, 1) both; }
.killcam.text .kc-blame { animation: kcBlame 0.4s 0.6s ease-out both; }
@keyframes kcSlam { from { opacity: 0; transform: rotate(-3deg) scale(1.8); } to { opacity: 1; transform: rotate(-3deg) scale(1); } }
@keyframes kcBlame { from { opacity: 0; transform: translateY(10px) rotate(1.5deg); } to { opacity: 1; transform: rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) {
  .killcam.text .kc-word, .killcam.text .kc-blame { animation-duration: 0.01s; }
}

/* ------------------------------------------------------------ overlays (menu / pause / win) */
.menu-overlay, .win-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  overflow: auto; padding: 20px;
}
.menu-overlay[hidden], .win-overlay[hidden] { display: none; }
.menu-overlay.main {
  background:
    linear-gradient(90deg, transparent 0 70px, var(--margin) 70px 72px, transparent 72px),
    repeating-linear-gradient(0deg, var(--paper) 0 31px, var(--line) 31px 33px);
}
.menu-overlay.dim, .win-overlay { background: rgba(246, 242, 231, 0.72); backdrop-filter: blur(2px); }

.menu-wrap { display: flex; gap: 28px; align-items: flex-start; justify-content: center; flex-wrap: wrap; max-width: 1000px; margin: auto; }
.panel { padding: 22px 30px 26px; }
.panel[hidden] { display: none; }
.menu-col { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 300px; }

.title { font-family: var(--marker); font-size: clamp(56px, 10vw, 104px); line-height: 1; margin: 0; letter-spacing: 4px; transform: rotate(-2deg); position: relative; }
.title .ink-p { color: var(--p0); }
.title .ink-b { color: var(--p1); }
.title-underline { width: min(360px, 70vw); height: 24px; margin-top: -6px; }
.subtitle { font-size: 22px; opacity: 0.8; margin: 2px 0 8px; }
.doodle-row { font-size: 30px; letter-spacing: 6px; opacity: 0.7; }

.btn {
  position: relative; isolation: isolate; cursor: pointer; border: 0; background: none;
  font-family: var(--marker); font-size: 22px; color: var(--ink);
  padding: 10px 26px; min-width: 260px; letter-spacing: 1px; transition: transform 0.1s;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--paper);
  border: 3px solid var(--ink); border-radius: 255px 14px 225px 14px / 14px 225px 14px 255px;
  filter: url(#ink-wobble); box-shadow: 3px 4px 0 rgba(27, 27, 31, 0.25); transition: background 0.1s;
}
.btn:hover::before, .btn:focus-visible::before { background: #fff3a8; }
.btn:hover, .btn:focus-visible { transform: rotate(-1deg) scale(1.03); outline: none; }
.btn:focus-visible::before { border-color: var(--p0); border-width: 4px; }
.btn:active { transform: scale(0.98); }
.btn.p0::before { background: #ffd6e0; }
.btn.p1::before { background: #d3e8ff; }
.btn.small { font-size: 16px; min-width: 0; padding: 6px 14px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn.toggle .box { display: inline-block; width: 22px; height: 22px; border: 3px solid var(--ink); border-radius: 4px 8px 4px 7px; vertical-align: -4px; margin-right: 8px; position: relative; }
.btn.toggle.on .box::after { content: 'X'; position: absolute; inset: -6px 0 0 2px; font-size: 22px; line-height: 1; color: var(--p0); }
.btn.toggle { font-family: var(--hand); font-size: 17px; text-align: left; max-width: 340px; line-height: 1.15; min-width: 0; }

.join-row { display: flex; gap: 10px; align-items: center; }
.code-input {
  width: 130px; font-family: var(--marker); font-size: 28px; letter-spacing: 8px; text-align: center; text-transform: uppercase;
  padding: 6px 4px 6px 12px; background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 12px 4px 14px 4px / 4px 14px 4px 12px; outline: none;
}
.code-input:focus { border-color: var(--p1); background: #fff; }
.code-input::placeholder { color: #bbb; letter-spacing: 6px; }

.level-row { display: flex; gap: 10px; align-items: center; font-size: 20px; }
.level-select {
  font-family: var(--hand); font-size: 19px; max-width: 220px; padding: 5px 8px;
  background: var(--paper); color: var(--ink); cursor: pointer;
  border: 3px solid var(--ink); border-radius: 12px 4px 14px 4px / 4px 14px 4px 12px; outline: none;
}
.level-select:focus { border-color: var(--p1); background: #fff; }

.volume-row { display: flex; gap: 10px; align-items: center; font-size: 19px; }
.volume-row .vol-val { min-width: 56px; font-size: 16px; opacity: 0.75; }
.volume { width: 170px; accent-color: var(--p1); cursor: pointer; }

.status { min-height: 26px; font-size: 18px; text-align: center; color: #d81b3c; max-width: 340px; }
.status.info { color: var(--ink); opacity: 0.75; }

kbd { font-family: var(--hand); font-size: 14px; padding: 0 6px; border: 2px solid var(--ink); border-radius: 6px 3px 6px 3px; background: #fff; }

.lobby { display: flex; flex-direction: column; gap: 14px; width: min(760px, 94vw); }
.lobby-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.lobby-head h2 { font-family: var(--marker); font-weight: normal; font-size: 40px; margin: 0 auto 0 0; transform: rotate(-2deg); }
.lobby-code { font-size: 20px; }
.lobby-code b { font-family: var(--marker); font-weight: normal; font-size: 30px; letter-spacing: 6px; margin-left: 6px; }
.lobby-body { display: flex; gap: 18px; flex-wrap: wrap; align-items: stretch; }
.lobby-players { display: flex; gap: 14px; flex: 2 1 340px; }
.lcard { flex: 1 1 0; min-width: 150px; padding: 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lname { font-family: var(--marker); font-size: 22px; }
.lname small { font-family: var(--hand); font-size: 15px; opacity: 0.7; }
.lfig { width: 140px; height: 170px; }
.lfig[hidden] { display: none; }
.lwait { height: 170px; display: flex; align-items: center; text-align: center; font-size: 18px; opacity: 0.7; padding: 0 8px; }
.lwait[hidden], .outfit[hidden], .orow[hidden], .orow button[hidden], .ohint[hidden] { display: none; }
.outfit { display: flex; flex-direction: column; gap: 3px; width: 100%; }
.orow { display: flex; align-items: center; gap: 6px; justify-content: center; font-size: 16px; }
.oslot { width: 50px; text-align: right; opacity: 0.6; font-size: 14px; }
.oname { min-width: 104px; text-align: center; }
.outfit:not(.mine) .oname { min-width: 0; text-align: left; }
.orow .btn.small { padding: 0 10px; font-size: 18px; }
.ohint { font-size: 14px; opacity: 0.65; text-align: center; margin-top: 2px; }

.store { display: flex; flex-direction: column; gap: 12px; width: min(960px, 94vw); }
.store-head { display: flex; align-items: center; gap: 16px; }
.store-head h2 { font-family: var(--marker); font-weight: normal; font-size: 40px; margin: 0 auto 0 0; transform: rotate(-2deg); }
.money { font-family: var(--marker); font-size: 30px; color: #2e7d32; }
.store-body { display: flex; gap: 18px; flex-wrap: wrap; }
.store-preview { flex: 0 0 170px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sfig { width: 170px; height: 210px; }
.store-preview .tiny { font-size: 14px; opacity: 0.7; text-align: center; }
.store-main { flex: 1 1 400px; display: flex; flex-direction: column; gap: 10px; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tab.on::before { background: #fff3a8; border-width: 4px; }
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.sitem { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px 10px; }
.sitem.owned::before { border-style: dashed; }
.sitem.worn::before { background: #fff8d0; }
.sicon { width: 90px; height: 110px; }
.sname { font-size: 16px; text-align: center; min-height: 20px; }
.lobby-map { flex: 1 1 180px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lthumb { width: 100%; max-width: 220px; height: 230px; }
.lmapname { font-family: var(--marker); font-size: 20px; text-align: center; }
.lobby .btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lobby .status { max-width: none; }
.dots::after { content: ''; animation: dots 1.4s steps(4, end) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.howto { display: flex; flex-direction: column; gap: 10px; width: min(640px, 94vw); }
.howto-head { display: flex; align-items: center; gap: 16px; }
.howto-head h2 { font-family: var(--marker); font-weight: normal; font-size: 40px; margin: 0 auto 0 0; transform: rotate(-2deg); }
.howto-count { font-family: var(--marker); font-size: 18px; opacity: 0.6; }
.howto-page { min-height: 400px; display: flex; flex-direction: column; align-items: center; }
.howto-page h3 { font-family: var(--marker); font-weight: normal; font-size: 28px; margin: 0 0 6px; align-self: flex-start; }
.howto-art { width: 100%; max-width: 480px; height: auto; aspect-ratio: 16 / 9; background: #fff; border: 2px dashed rgba(27, 27, 31, 0.35); border-radius: 10px 4px 12px 4px; }
.howto-art text { font-family: var(--marker); }
.howto-text { font-size: 18px; line-height: 1.35; align-self: stretch; }
.howto-text p { margin: 10px 0 0; }
.howto-text b { font-weight: normal; font-family: var(--marker); letter-spacing: 0.5px; }
.howto-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.howto-dots { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.hdot { width: 14px; height: 14px; padding: 0; border: 2.5px solid var(--ink); border-radius: 50% 40% 55% 45%; background: var(--paper); cursor: pointer; }
.hdot.on { background: var(--p0); border-color: var(--p0); transform: scale(1.2); }
.hdot:hover, .hdot:focus-visible { background: #fff3a8; outline: none; }
.hdot.on:hover, .hdot.on:focus-visible { background: var(--p0); }

.pause-panel { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 320px; }
.pause-panel h2 { font-family: var(--marker); font-weight: normal; font-size: 44px; margin: 0 0 6px; transform: rotate(-2deg); }

/* win screen */
.win { text-align: center; min-width: min(560px, 92vw); }
.win h1 { font-family: var(--marker); font-weight: normal; font-size: clamp(40px, 7vw, 64px); margin: 0; transform: rotate(-2deg); }
.win .time { font-family: var(--marker); font-size: 44px; letter-spacing: 2px; margin: 4px 0 10px; font-variant-numeric: tabular-nums; }
.win-cols { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 8px 0 14px; }
.pcard { padding: 10px 18px; min-width: 210px; text-align: left; }
.pcard h3 { font-family: var(--marker); font-weight: normal; margin: 0 0 4px; font-size: 24px; }
.pcard.p0 h3 { color: var(--p0); }
.pcard.p1 h3 { color: var(--p1); }
.pcard div { font-size: 18px; }
.awards { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 16px; font-size: 20px; }
.awards .aw { display: inline-block; }
.awards .aw b { font-family: var(--marker); font-weight: normal; padding: 0 8px; border: 2px dashed var(--ink); border-radius: 10px 3px 9px 3px; margin-right: 6px; background: #fff3a8; }
.win .btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 820px) {
  .chip { min-width: 120px; font-size: 15px; }
  .hud-top { top: 120px; width: 92vw; }
  .side-info { top: 84px; font-size: 16px; }
  .timer { font-size: 18px; }
  .toasts { top: 250px; }
  .menu-wrap { gap: 14px; }
}

/* ------------------------------------------------------------ progression UI (main menu card, level select,
   store locks, HUD money, "NEW:" card, win screen earnings) */
.main-panel { display: flex; gap: 48px; align-items: center; justify-content: center; flex-wrap: wrap; }
.main-panel .menu-col { gap: 10px; }
.main-panel .subtitle { margin-bottom: 6px; }
.me-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 22px 16px; transform: rotate(1.5deg); }
.mefig { width: 170px; height: 210px; }
.me-card .money { font-size: 34px; }
.me-line { font-size: 17px; opacity: 0.75; }

.maps { display: flex; flex-direction: column; gap: 8px; width: min(1080px, 96vw); max-height: calc(100vh - 40px); }
.maps-head { display: flex; align-items: center; gap: 16px; }
.maps-head h2 { font-family: var(--marker); font-weight: normal; font-size: 40px; margin: 0 auto 0 0; transform: rotate(-2deg); }
.maps-tabs { align-items: center; }
.maps-hint { margin-left: auto; font-size: 15px; opacity: 0.65; }
.maps-page { overflow-y: auto; overflow-x: hidden; padding: 4px 10px 10px 4px; flex: 1 1 auto; min-height: 0; }
.maps-blurb { margin: 4px 0 10px; font-size: 18px; opacity: 0.8; }
.chapter { margin-bottom: 12px; }
.chapter h3 { font-family: var(--marker); font-weight: normal; font-size: 24px; margin: 4px 0 6px; }
.chapter h3 .chnum { font-family: var(--hand); font-size: 18px; opacity: 0.6; margin-right: 6px; }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mcard {
  border: 0; background: none; font-family: var(--hand); color: var(--ink); text-align: left; cursor: pointer;
  padding: 10px 14px 12px; display: flex; flex-direction: column; gap: 2px; min-height: 118px; transition: transform 0.1s;
}
.mcard:hover, .mcard:focus-visible { transform: rotate(-1deg) scale(1.03); outline: none; }
.mcard:hover::before, .mcard:focus-visible::before { background: #fff3a8; }
.mcard:focus-visible::before { border-color: var(--p0); border-width: 4px; }
.mcard.cleared::before { background: #eef7ea; }
.mcard.open::before { background: #fff; border-color: var(--p0); }
.mcard.locked { cursor: not-allowed; }
.mcard.locked::before { border-style: dashed; background: var(--paper-2); box-shadow: none; }
.mcard.locked > * { opacity: 0.6; }
.mcard.final .mname { color: var(--p0); }
.mtop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mnum { font-family: var(--marker); font-size: 15px; opacity: 0.6; }
.mname { font-family: var(--marker); font-size: 21px; line-height: 1.1; }
.mstate { font-size: 14px; padding: 0 7px; border: 2px solid var(--ink); border-radius: 10px 4px 9px 4px; white-space: nowrap; }
.mstate.ok { background: #dff3df; }
.mstate.new { background: #ffd6e0; border-color: var(--p0); }
.mstate.lock { background: #eee; border-style: dashed; }
.mbest, .mteach, .mreward, .mlock { font-size: 15px; line-height: 1.2; }
.mteach { opacity: 0.85; }
.mteach b { font-weight: normal; font-family: var(--marker); font-size: 13px; letter-spacing: 0.5px; }
.mreward { color: #2e7d32; margin-top: auto; padding-top: 3px; }
.mreward small { color: var(--ink); opacity: 0.7; font-size: 13px; }
.mlock { margin-top: auto; font-style: italic; }
.star { color: #e0a800; font-size: 1.15em; text-shadow: 0 0 1px var(--ink); }

.sitem.locked::before { border-style: dashed; background: var(--paper-2); }
.slock { font-size: 13px; text-align: center; line-height: 1.15; opacity: 0.8; max-width: 130px; }

.money-chip { position: absolute; top: 138px; left: 14px; padding: 2px 12px; font-family: var(--marker); font-size: 22px; color: #2e7d32; }
.money-chip.bump { animation: moneyBump 0.35s ease-out; }
@keyframes moneyBump { 0% { transform: scale(1.25) rotate(-3deg); } 100% { transform: none; } }
.money-pops { position: absolute; left: 100%; top: 0; margin-left: 10px; width: 260px; height: 0; }
.money-pop { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--hand); font-size: 20px; color: var(--ink);
  padding: 0 8px; background: rgba(246, 242, 231, 0.92); border-radius: 8px 3px 8px 3px; animation: moneyPop 2.6s ease-out both; }
.money-pop b { font-family: var(--marker); font-weight: normal; color: #2e7d32; font-size: 24px; }
@keyframes moneyPop { 0% { opacity: 0; transform: translate(-6px, 6px) scale(0.8); } 10% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } }

.intro-card { position: absolute; left: 0; right: 0; margin: 0 auto; width: fit-content; bottom: 70px; padding: 8px 22px 10px; text-align: center; max-width: min(720px, 92vw); animation: toastIn 0.3s cubic-bezier(.2, 1.6, .4, 1) both; }
.intro-card.out { animation: toastOut 0.5s ease-in both; }
.intro-title { font-family: var(--marker); font-size: 18px; opacity: 0.65; }
.intro-new { font-size: 21px; line-height: 1.25; }
.intro-new b { font-family: var(--marker); font-weight: normal; color: var(--p0); margin-right: 4px; }

.win { max-height: calc(100vh - 30px); overflow-y: auto; }
.win-sub { font-size: 22px; margin: 2px 0 0; }
.win-sub .time { font-size: 38px; margin: 0; display: inline; }
.win-sub .best { font-family: var(--marker); color: var(--p0); font-size: 18px; margin-left: 6px; }
.win-hearts { font-size: 19px; margin: 0 0 8px; }
.win-hearts b { font-family: var(--marker); font-weight: normal; }
.win-body { display: flex; gap: 18px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.win-left { flex: 1 1 360px; }
.win-body .win-cols { margin: 4px 0 10px; }
.win-body .pcard { min-width: 170px; padding: 8px 14px; }
.win-body .pcard div { font-size: 16px; }
.win-body .awards { font-size: 17px; margin: 4px 0 10px; }
.earn { flex: 0 1 270px; padding: 10px 18px 12px; text-align: left; transform: rotate(1deg); }
.earn h3 { font-family: var(--marker); font-weight: normal; margin: 0 0 4px; font-size: 22px; }
.eline { display: flex; justify-content: space-between; gap: 12px; font-size: 17px; }
.eline b { font-family: var(--marker); font-weight: normal; color: #2e7d32; }
.eline.total { border-top: 2px dashed var(--ink); margin-top: 4px; padding-top: 3px; font-size: 19px; }
.enow { font-size: 15px; opacity: 0.7; text-align: right; }
.unlocks { margin: 0 0 10px; }
.unl { font-family: var(--marker); font-size: 20px; color: var(--p1); animation: toastIn 0.4s 0.3s cubic-bezier(.2, 1.6, .4, 1) both; }
.unl b { font-weight: normal; color: var(--ink); }
.win-wait { font-size: 16px; opacity: 0.7; margin-bottom: 8px; }
.win .btns .btn { min-width: 0; }

@media (max-width: 820px) { .money-chip { top: 122px; } }
@media (max-height: 820px) {
  .title { font-size: 76px; }
  .main-panel .btn { padding: 7px 26px; font-size: 20px; }
  .win h1 { font-size: 44px; }
  .win.panel { padding: 14px 24px 18px; }
}
.mink { font-family: var(--hand); font-size: 14px; color: var(--p1); opacity: 1; }
/* the store fits the screen; its item grid scrolls */
.store { max-height: calc(100vh - 40px); }
.store-body { flex: 1 1 auto; min-height: 0; flex-wrap: nowrap; }
.store-main { min-height: 0; }
.store-grid { overflow-y: auto; padding: 6px 8px 10px 4px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.sitem .btn { white-space: nowrap; }
@media (max-width: 700px) { .store-body { flex-wrap: wrap; } }
@media (max-height: 820px) { .sicon { width: 76px; height: 92px; } .sfig { height: 180px; } }

/* ---- solo playtest cheat panel (ui/soloPanel.js) */
.solo-panel { position: absolute; left: 14px; top: 140px; width: 228px; padding: 8px 10px 10px; z-index: 5; font-size: 15px; line-height: 1.2;
  background: rgba(246, 242, 231, 0.94); pointer-events: auto; user-select: none; }
.solo-panel[hidden] { display: none; }
.solo-panel .sp-head { font-family: var(--marker); font-size: 17px; letter-spacing: 1px; display: flex; align-items: center; gap: 6px; }
.solo-panel .sp-head b { font-weight: normal; color: #d81b3c; }
.solo-panel .sp-min { margin-left: auto; font: inherit; font-size: 13px; padding: 0 7px; border: 2px solid var(--ink); border-radius: 8px 3px 7px 3px; background: var(--paper-2); cursor: pointer; }
.solo-panel.min .sp-body { display: none; }
.solo-panel .sp-who { margin: 4px 0 2px; }
.solo-panel .sp-who .c0, .solo-panel .sp-who .c1 { font-family: var(--marker); }
.solo-panel .sp-sec { margin: 7px 0 2px; font-family: var(--marker); font-size: 13px; letter-spacing: 1px; opacity: 0.7; display: flex; justify-content: space-between; }
.solo-panel .sp-note { font-family: var(--hand); font-size: 13px; opacity: 0.8; letter-spacing: 0; }
.solo-panel > .sp-body > .sp-note { margin-top: 6px; }
.solo-panel .sp-btn { display: flex; align-items: center; gap: 6px; width: 100%; margin: 2px 0; padding: 2px 6px; font: inherit; color: var(--ink); text-align: left;
  background: transparent; border: 1.5px solid transparent; border-radius: 8px 3px 7px 3px; cursor: pointer; }
.solo-panel .sp-btn:hover { border-color: var(--ink); background: var(--paper-2); }
.solo-panel .sp-btn b { margin-left: auto; font-family: var(--marker); font-weight: normal; }
.solo-panel kbd { min-width: 20px; text-align: center; font-size: 12px; }
.solo-panel .sp-tog .box { width: 14px; height: 14px; flex: none; border: 2px solid var(--ink); border-radius: 3px; }
.solo-panel .sp-tog.on .box { background: #2a9d5c; box-shadow: inset 0 0 0 2px var(--paper); }
.solo-panel .sp-tog:not(.on) { opacity: 0.75; }
.solo-panel .sp-cp { display: flex; align-items: center; gap: 4px; }
.solo-panel .sp-cp .sp-btn { width: auto; flex: 1; justify-content: center; }
.solo-panel .sp-cp span { font-family: var(--marker); }