/* WIPEY IN POOPLAND 2 - all the CSS: POOP CATCHER's Win95 chrome (teal page, grey outset window, navy title bar,
   Comic Sans inside, Tahoma on the chrome), the three layouts (L-desktop / L-portrait / L-landscape on <html>,
   set by UI.layout), the HUD and overlays over the world canvas, the screens and the settings dialog. */

:root {
  --ink: #2a1a12; --ink-soft: #4a3426;
  --win: #c0c0c0; --title-a: #000080; --title-b: #1084d0; --teal: #008080;
  --tile: #eef8f5; --grout: #b9d7d0; --btn-a: #ffffff; --btn-b: #e9ecef; --sel: #ffd54f;
  --counter: #ffd400; --counter-ink: #3a2a00; --tooltip: #ffffe1;
  --title-fill: #ffd54f; --title-outline: #5a3210; --title-shadow: #c62828;
  --menu-bg: #0f5a2a; --plaque: #0f5a2a; --plaque-dark: #083d1b; --poop: #6b3a0e; --danger: #ff3b3b;
  --ff: "Comic Sans MS", "Comic Sans", "Chalkboard SE", sans-serif;
  --tahoma: Tahoma, sans-serif;
  --outline: -1px -1px 0 var(--counter-ink), 1px -1px 0 var(--counter-ink), -1px 1px 0 var(--counter-ink), 1px 1px 0 var(--counter-ink), 0 2px 0 var(--counter-ink);
  --ink-outline: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 0 3px 0 var(--ink);
  --title-outline-shadow: -2px -2px 0 var(--title-outline), 2px -2px 0 var(--title-outline), -2px 2px 0 var(--title-outline),
    2px 2px 0 var(--title-outline), 3px 3px 0 var(--title-shadow);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { overscroll-behavior: none; }
html { background: var(--teal); }
body {
  /* (UI.layout sets --vw / --vh: the real viewport, or a forced size for the layout tests) */
  width: var(--vw, 100vw); height: var(--vh, 100vh); overflow: hidden;
  background: var(--teal); color: #000;
  font-family: var(--ff); font-weight: bold;
  display: flex;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
html.forced body { position: fixed; left: 0; top: 0; }
button, input, select { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
canvas { display: block; }

/* ---------- the Win95 window ---------- */
.window { position: relative; background: var(--win); border: 3px outset #fff; padding: 4px; box-shadow: 6px 6px 0 rgba(0,0,0,0.4); }
.win { background: var(--win); border: 3px outset #fff; padding: 3px; box-shadow: 4px 4px 0 rgba(0,0,0,0.5); }
#app { flex: 1 1 auto; min-width: 0; min-height: 0; display: grid; gap: 4px; }
#titlebar { grid-area: title; }
#stage { grid-area: stage; }
#panel { grid-area: panel; }
#hud { grid-area: hud; }

.titlebar {
  background: linear-gradient(90deg, var(--title-a), var(--title-b));
  color: #fff; padding: 2px 3px 2px 6px; min-width: 0; min-height: 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  font: bold 14px var(--tahoma);
}
#titleText { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titlebar .tb { display: flex; gap: 2px; flex: none; }
.titlebar button {
  background: var(--win); border: 2px outset #fff; min-width: 20px; height: 18px; padding: 0 3px;
  font: bold 11px var(--tahoma); line-height: 1; color: #000; cursor: pointer;
}
.titlebar button:active { border-style: inset; }
#tbHelp { font-size: 9px; letter-spacing: -1px; }
#tbPause { font-size: 8px; letter-spacing: -1px; }
#tbPause:disabled { color: #808080; cursor: default; }
#tbSettings { font-size: 12px; }
#tbFull { font-size: 13px; }

/* ---------- the world and what floats over it ---------- */
#stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #12381f; border: 2px inset #fff; }
#world { position: absolute; left: 0; top: 0; width: 100%; height: 100%; touch-action: none; cursor: default; background: #12381f; }
#world.dragging { cursor: move !important; }
/* (phones: a pinch or a swipe that starts on the chrome is no page zoom or scroll) */
#titlebar, #hud, #panel, #strip, #chips, #floatBtns, #mmWrap { touch-action: none; }
/* level 3, THE STORM DRAIN FORK: a cool tint and a vignette over the world, under every overlay (A4 grades the ground) */
#mood { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
html.lv3 #mood { display: block; mix-blend-mode: multiply;
  background: radial-gradient(ellipse 75% 75% at 50% 50%, rgba(255,255,255,0) 30%, rgba(24,30,64,0.6) 100%), rgba(150,165,205,0.22); }

/* chips: TRAIN, POOP-O-CLOCK, MURDER TURDS */
#chips { position: absolute; left: 6px; top: 6px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  max-width: calc(100% - 150px); }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; max-width: 100%;
  padding: 2px 9px 2px 4px; background: rgba(255,253,231,0.95); border: 2px solid var(--ink); border-radius: 14px;
  font: bold 12px var(--ff); color: var(--ink); cursor: pointer; white-space: nowrap; box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
}
.chip .ico { width: 20px; height: 20px; flex: none; }
.chip .txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chip:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.35); }
#chipTrain.loading { background: #fff3c4; }
#chipTrain.last { background: linear-gradient(#fff6c8, var(--sel)); border-color: #8a5a00; animation: goldPulse 0.9s ease-in-out infinite alternate; }
#chipTrain.threat { background: #ffcdd2; border-color: #b71c1c; color: #b71c1c; animation: redPulse 0.6s ease-in-out infinite alternate; }
#chipClock.ripe { background: #ffe9c4; }
#chipClock.hurry { background: #ffcdd2; border-color: #b71c1c; color: #b71c1c; animation: blink 0.6s steps(2) infinite; }
#chipTurds.green { background: #e6ffc8; border-color: #2f6b10; color: #1d3a06; }
#chipTurds.orange { background: #ffe0b2; border-color: #e65100; color: #8a3200; }
#chipTurds.red { background: #ffcdd2; border-color: #b71c1c; color: #b71c1c; animation: blink 0.5s steps(2) infinite; }
.touch .chip { min-height: 34px; font-size: 13px; border-radius: 17px; }
.touch .chip::after { content: ''; position: absolute; left: -2px; right: -2px; top: -5px; bottom: -5px; }   /* (44 px to a finger) */
.touch #chips { gap: 8px; }

#banner {
  position: absolute; left: 50%; top: 6px; transform: translateX(-50%); z-index: 6; width: max-content; max-width: calc(100% - 24px);
  padding: 5px 14px; border: 3px solid var(--ink); border-radius: 6px; text-align: center; pointer-events: none;
  font: bold 14px var(--ff); box-shadow: 3px 3px 0 rgba(0,0,0,0.35);
}
#banner.danger { background: var(--danger); color: #fff; animation: blink 0.45s steps(2) infinite; }
#banner.info { background: var(--sel); color: var(--ink); }
/* phones: a small line UI.placeBanner puts under the chips (portrait) or right of the HUD (landscape) */
.L-portrait #banner, .L-landscape #banner { font-size: 12px; line-height: 1.25; padding: 3px 8px; border-width: 2px; box-shadow: 2px 2px 0 rgba(0,0,0,0.35); }

#toasts {
  position: absolute; left: 50%; top: 46px; transform: translateX(-50%); z-index: 12; width: max-content; max-width: calc(100% - 24px);
  display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none;
}
.toast {
  padding: 5px 12px; background: #fffde7; border: 2px solid #000; box-shadow: 3px 3px 0 rgba(0,0,0,0.35);
  font: bold 13px/1.3 var(--ff); color: #222; text-align: center; animation: toastIn 0.18s ease-out;
}
.toast.good { background: #fff3c4; color: #5a3210; }
.toast.bad { background: #ffe5e5; color: #b71c1c; }
.toast.big { font-size: 17px; padding: 8px 16px; background: var(--sel); color: var(--ink); border-width: 3px; }
.toast.out { opacity: 0; transition: opacity 0.3s; }
/* phones (P6): UI.placeToasts puts the column under the chips / minimap; at most 2 lines each (2 stacked, ui.js) */
.L-portrait .toast, .L-landscape .toast { font-size: 12px; padding: 3px 10px; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.L-portrait .toast.big, .L-landscape .toast.big { font-size: 14px; padding: 4px 12px; }
.L-portrait #toasts, .L-landscape #toasts { gap: 4px; }

#mmWrap { position: absolute; right: 6px; top: 6px; z-index: 3; }
#minimap { width: 120px; height: 120px; border: 2px solid var(--ink); background: #0f3d1c; image-rendering: pixelated; cursor: crosshair;
  touch-action: none; box-shadow: 2px 2px 0 rgba(0,0,0,0.35); }
#mmToggle { position: absolute; left: -10px; bottom: -10px; width: 26px; height: 26px; padding: 2px; border-radius: 50%;
  background: linear-gradient(var(--btn-a), var(--btn-b)); border: 2px solid var(--ink); cursor: pointer; display: grid; place-items: center; }
#mmToggle .ico { width: 18px; height: 18px; }
#mmWrap.collapsed #minimap { display: none; }
#mmWrap.collapsed #mmToggle { position: static; }
.touch #mmToggle { width: 40px; height: 40px; left: -16px; bottom: -16px; }
.touch #mmToggle::after { content: ''; position: absolute; inset: -4px; }
.touch #mmToggle .ico { width: 24px; height: 24px; }

#floatBtns { position: absolute; right: 6px; bottom: 6px; z-index: 3; display: flex; flex-direction: column; gap: 6px; }
#floatBtns button {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(var(--btn-a), var(--btn-b)); border: 2px solid var(--ink); box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
}
#floatBtns .ico { width: 26px; height: 26px; }
#floatBtns button.lit { background: linear-gradient(#ffe9a8, var(--sel)); }
#floatBtns button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(0,0,0,0.35); }
#btnTurbo.grey { opacity: 0.45; }
#followPill { position: absolute; right: calc(100% + 8px); bottom: 8px; padding: 3px 9px; white-space: nowrap; pointer-events: none;
  background: rgba(255,253,231,0.95); border: 2px solid var(--ink); border-radius: 12px; font: bold 12px var(--ff); color: var(--ink);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35); animation: toastIn 0.18s ease-out; }
.touch #floatBtns button { width: 48px; height: 48px; }
.touch #floatBtns .ico { width: 30px; height: 30px; }

/* the context strip (DESIGN §5.6) */
#strip {
  position: absolute; left: 6px; bottom: 6px; z-index: 7; width: max-content; max-width: calc(100% - 64px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 4px 8px; min-height: 32px;
  background: rgba(255,253,231,0.95); border: 2px solid var(--ink); border-radius: 8px; box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
  font: bold 12px/1.25 var(--ff); color: var(--ink);
}
#stripText b { color: #c62828; }
/* (D10: the strip's words let map clicks through; its buttons, and a tappable line (P14), still take them) */
#strip, #stripText, #stripMeter, #stripArtie { pointer-events: none; }
#strip button, #stripText.tap { pointer-events: auto; }
#stripText.tap { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
#strip button {
  display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 9px;
  background: linear-gradient(var(--btn-a), var(--btn-b)); border: 2px outset #fff; outline: 1px solid var(--ink);
  font: bold 12px var(--ff); color: var(--ink); cursor: pointer; white-space: nowrap;
}
#strip button:active { border-style: inset; }
#strip button .ico { width: 20px; height: 20px; flex: none; }
#btnDeliver { background: linear-gradient(#fff6d6, var(--sel)) !important; }
#btnDeliver.threat { background: linear-gradient(#ffe5e5, #ff9e9e) !important; color: #b71c1c; outline: 2px solid #b71c1c; }
#stripMeter { display: none; }
#stripArtie { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 3px; border-radius: 10px;
  background: #ede7f6; border: 1px solid #4b2a8a; color: #4b2a8a; font-size: 11px; white-space: nowrap; }
#stripArtie .ico { width: 16px; height: 16px; }
.touch #strip { max-width: calc(100% - 72px); }
.touch #strip button { min-height: 44px; padding: 2px 8px; }
/* phones: one row, always (long text wraps inside its own box); with DELIVER / DROP it is exactly the 44-px buttons */
.L-portrait #strip, .L-landscape #strip { flex-wrap: nowrap; }
.L-portrait #stripText, .L-landscape #stripText { min-width: 0; flex: 1 1 auto; }
.L-portrait #stripArtie, .L-landscape #stripArtie { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.L-portrait #stripArtie span, .L-landscape #stripArtie span { overflow: hidden; text-overflow: ellipsis; }
.L-portrait #strip.acts, .L-landscape #strip.acts { padding-top: 0; padding-bottom: 0; }
.L-portrait #strip button, .L-landscape #strip button { flex: none; }
/* portrait: the strip spans the stage and the round buttons sit above it (UI sets --strip-h) */
.L-portrait #strip { right: 6px; width: auto; max-width: none; gap: 4px 6px; }
.L-portrait #floatBtns { bottom: calc(var(--strip-h, 0px) + 12px); }

/* the BUKET meter: 9 poop pips in 3 groups */
#buketMeter, #stripMeter { gap: 5px; align-items: center; justify-content: center; }
#buketMeter { display: flex; }
.grp { display: flex; gap: 2px; }
.pip { display: block; width: 9px; height: 9px; border-radius: 50% 50% 45% 45%; background: rgba(255,255,255,0.2); border: 1px solid rgba(0,0,0,0.55); }
.pip.on { background: radial-gradient(circle at 35% 30%, #94561f, var(--poop) 60%, #4a2608); border-color: var(--ink); }
/* the count in words beside the pips ("BUKET 6/9"): grey when empty, white while filling, gold when full */
.mcount { font: bold 11px/1 var(--ff); color: rgba(255,255,255,0.55); white-space: nowrap; }
.mcount.some { color: #fff; }
.mcount.full { color: #ffd54f; }
#buketMeter { flex-wrap: wrap; }
.L-desktop #buketMeter .mcount { flex-basis: 100%; text-align: center; font-size: 13px; margin-bottom: 2px; }
#stripMeter .mcount { color: #5a3a10; font-size: 12px; }
#stripMeter .mcount.full { color: #c62828; }
#stripMeter .pip { background: #e8dcc0; }
#stripMeter .pip.on { background: radial-gradient(circle at 35% 30%, #94561f, var(--poop) 60%, #4a2608); }

/* first-time tips: tap-through cards (only ✕ takes a tap); the arrow and ring go under the strip, the card over it */
#tipCard {
  position: absolute; left: 0; top: 0; z-index: 8; width: min(300px, calc(100% - 20px));
  padding: 8px 36px 10px 12px; background: #fffde7; border: 2px solid #000; box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
  font: bold 13px/1.35 var(--ff); color: #222; pointer-events: none;
}
.touch #tipCard { width: min(300px, calc(100% - 84px)); }   /* (phones: the round-button column stays free) */
/* (phone landscape: a low stage, so a danger tip is wider and shorter: under the HUD, between the chips and the minimap) */
.L-landscape #tipCard.danger { width: max(min(300px, calc(100% - 84px)), min(400px, calc(100% - 232px))); }
#tipCard::before { content: 'TIP'; display: block; font-size: 11px; color: #e65100; margin-bottom: 1px; }
#tipCard.danger { background: #fff1ef; border-color: #b71c1c; }
#tipCard.danger::before { content: '⚠ WATCH OUT'; color: #b71c1c; }
#tipText b { color: #c62828; }
#tipText .ico { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; }
#tipClose { position: absolute; top: 3px; right: 3px; width: 28px; height: 28px; background: var(--win); border: 2px outset #fff;
  font: bold 12px var(--tahoma); color: #000; cursor: pointer; pointer-events: auto; touch-action: none; }
#tipClose:active { border-style: inset; }
.touch #tipClose::after { content: ''; position: absolute; inset: -8px; }
#tipArrow { position: absolute; left: 0; top: 0; z-index: 6; height: 4px; margin-top: -2px; background: var(--sel); border-radius: 2px;
  transform-origin: 0 50%; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,0.55); }
#tipArrow::after { content: ''; position: absolute; right: -14px; top: -5px; border-left: 14px solid var(--sel);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
#tipRing { position: absolute; left: 0; top: 0; z-index: 6; border: 3px solid var(--sel); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.4); animation: ringPulse 0.9s ease-in-out infinite alternate; }
.tip-target { outline: 3px solid var(--sel) !important; outline-offset: 2px; animation: tipPulse 0.7s ease-in-out infinite alternate; }

/* inspect cards and tool hints: a Win95 tooltip */
#inspect {
  position: absolute; left: 0; top: 0; z-index: 9; width: max-content; max-width: min(280px, calc(100% - 12px));
  padding: 4px 7px; background: var(--tooltip); border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  font: 11px/1.4 var(--tahoma); color: #000; pointer-events: none;
}
#debugBox { position: absolute; left: 6px; bottom: 52px; z-index: 9; padding: 4px 6px; background: rgba(0,0,0,0.72); color: #7cff6b;
  font: 11px/1.35 Consolas, "Courier New", monospace; white-space: pre; pointer-events: none; }

/* ---------- the panel: logo plate + the original's 2 x 5 tool grid ---------- */
#panel { display: flex; flex-direction: column; gap: 4px; min-width: 0; min-height: 0; }
#logoPlate { flex: none; height: 36px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(#1a7a3a, var(--plaque)); border: 2px inset #fff; overflow: hidden; }
.logo { font: italic bold 16px var(--ff); color: var(--title-fill); letter-spacing: 0.5px; white-space: nowrap;
  text-shadow: -1px -1px 0 var(--title-outline), 1px -1px 0 var(--title-outline), -1px 1px 0 var(--title-outline), 1px 1px 0 var(--title-outline), 2px 3px 0 var(--title-shadow); }
.logo b { font-size: 24px; margin-left: 3px; vertical-align: -2px; }
#tools {
  display: grid; grid-template-columns: 56px 56px; gap: 4px; justify-content: center; padding: 6px;
  background-color: var(--tile);
  background-image: linear-gradient(var(--grout) 1px, transparent 1px), linear-gradient(90deg, var(--grout) 1px, transparent 1px);
  background-size: 20px 20px; border: 2px inset #fff;
}
.tool {
  position: relative; width: 56px; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(var(--btn-a), var(--btn-b)); border: 2px outset #fff; border-radius: 3px; outline: 1px solid #8a8f96;
  cursor: pointer; color: var(--ink);
}
.tool .ico { width: 32px; height: 32px; flex: none; }
.tool .lbl { font: bold 10px var(--ff); line-height: 1; white-space: nowrap; }
.tool:active:not(.disabled):not(.locked) { border-style: inset; }
.tool.pressed { border-style: inset; background: linear-gradient(#fff4cc, var(--sel)); outline: 2px solid #c99a12; }
.tool.disabled { background: linear-gradient(#f4f4f4, #d9d9d9); cursor: default; }
.tool.disabled .lbl { color: #5f5f5f; }
.tool.locked { background: linear-gradient(#f4f4f4, #dedede); }
.tool.locked .ico { opacity: 0.6; }
.tool .badge:empty { display: none; }
.tool .badge { position: absolute; pointer-events: none; }
/* (D4: a disabled tool keeps its name; the cost is a small corner pill, "10" and a log pile; the full line is in its hint) */
.badge.cost { top: -5px; right: -5px; display: flex; align-items: center; gap: 1px; padding: 0 3px 0 4px; height: 16px;
  background: #c62828; color: #fff; border: 1px solid #000; border-radius: 8px; font: bold 10px/1 var(--tahoma);
  white-space: nowrap; z-index: 1; box-shadow: 1px 1px 0 rgba(0,0,0,0.3); }
.tool .badge.cost .ico { width: 12px !important; height: 12px !important; }
.badge.lock { top: 1px; right: 1px; }
.tool .badge .ico { width: 16px !important; height: 16px !important; }
.badge.run { top: -5px; right: -5px; padding: 1px 4px; background: var(--sel); border: 1px solid var(--ink); border-radius: 6px;
  font: bold 9px var(--ff); color: var(--ink); }

/* ---------- the HUD (desktop: the counter plaque under the tools) ---------- */
#hud { min-width: 0; min-height: 0; color: var(--counter); }
.cnt { position: relative; display: flex; align-items: center; gap: 6px; }
.cnt .ico { width: 26px; height: 26px; flex: none; }
.cnt .num { font: bold 20px var(--ff); color: var(--counter); text-shadow: var(--outline); white-space: nowrap; }
#cntLives { gap: 2px; }
#cntLives.bump { animation: bump 0.45s ease-out; }
#goal { position: relative; overflow: hidden; }
#goalFill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#ffe066, #e0a800); transition: width 0.4s; }
#goalText { position: relative; display: block; color: #fff; text-shadow: 1px 1px 0 #000; }
.delta { position: absolute; left: 50%; top: -6px; z-index: 2; pointer-events: none; white-space: nowrap;
  font: bold 15px var(--ff); text-shadow: var(--outline); animation: floatUp 1s ease-out forwards; }
.delta.up { color: #b6ff5a; }
.delta.down { color: #ff7a7a; }

.L-desktop #hud { display: flex; flex-direction: column; gap: 5px; padding: 6px; background: var(--plaque); border: 2px inset #fff; overflow: hidden; }
.L-desktop #cntLives { justify-content: center; }
.L-desktop #cntLives .ico { width: 30px; height: 30px; }
.L-desktop .cnt:not(#cntLives) { padding-left: 6px; }
.L-desktop #goal.long #goalText { font-size: 9px; letter-spacing: -0.3px; padding-left: 1px; padding-right: 1px; }
.L-desktop #goal { min-height: 32px; background: var(--plaque-dark); border: 1px solid #000; border-radius: 3px; }
.L-desktop #goalText { font: bold 10px/1.3 var(--ff); padding: 3px 4px 7px; text-align: center; white-space: pre-line;
  color: var(--counter); text-shadow: 1px 1px 0 #000; }
.L-desktop #goalFill { top: auto; bottom: 0; height: 4px; }
.L-desktop #buketMeter { padding: 3px 0 1px; }
.L-desktop #buketMeter .pip { width: 10px; height: 10px; }

/* ---------- desktop: the Win95 window with the 132 px right panel ---------- */
.L-desktop #app {
  grid-template-columns: minmax(0, 1fr) 132px;
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "title title" "stage panel" "stage hud";
}
html.full.L-desktop body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
html.full.L-desktop #app { border: none; box-shadow: none; }
@media (max-height: 660px) {
  .L-desktop #logoPlate { display: none; }
  .L-desktop #tools { grid-template-columns: 50px 50px; padding: 4px; }
  .L-desktop .tool { width: 50px; height: 50px; }
  .L-desktop .tool .ico { width: 28px; height: 28px; }
  .L-desktop #hud { gap: 3px; padding: 4px; }
}
@media (max-height: 560px) {
  .L-desktop #tools { grid-template-columns: 44px 44px; gap: 3px; }
  .L-desktop .tool { width: 44px; height: 44px; }
  .L-desktop .tool .lbl { display: none; }
  .L-desktop #cntLives .ico { width: 22px; height: 22px; }
}

/* ---------- phones: frameless, the window fills the screen ---------- */
.L-portrait body, .L-landscape body { padding: 0; }
.L-portrait #app, .L-landscape #app { border: none; box-shadow: none; padding: 0; gap: 0; }
.L-portrait #stage, .L-landscape #stage { border: none; }
.L-portrait #logoPlate, .L-landscape #logoPlate { display: none; }
.L-portrait #buketMeter, .L-landscape #buketMeter { display: none; }
.L-portrait #strip.meter #stripMeter, .L-landscape #strip.meter #stripMeter { display: flex; }
.L-portrait #minimap, .L-landscape #minimap { width: 88px; height: 88px; }
.touch #tbClose { display: none; }
.touch .titlebar .tb { gap: 4px; }
.touch .titlebar button { position: relative; min-width: 40px; height: 24px; font-size: 12px; }
.touch .titlebar button::after { content: ''; position: absolute; left: -2px; right: -2px; top: -10px; bottom: -10px; }   /* (44 px) */
.touch #tbHelp { font-size: 11px; }
.touch #tbPause { font-size: 10px; }

/* portrait: title 28 px / HUD bar 40 px / the world / a dock of 7 tools */
.L-portrait #app {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 40px minmax(0, 1fr) auto;
  grid-template-areas: "title" "hud" "stage" "panel";
}
.L-portrait #titlebar { min-height: calc(28px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
  padding-left: max(6px, env(safe-area-inset-left)); padding-right: max(3px, env(safe-area-inset-right)); }
.L-portrait #hud { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 8px 4px; background: var(--plaque);
  border-bottom: 1px solid #000; z-index: 4; }
.L-portrait .cnt { gap: 4px; flex: none; }
.L-portrait .cnt .ico { width: 22px; height: 22px; }
.L-portrait .cnt .num { font-size: 16px; }
.L-portrait #cntLives .ico { width: 20px; height: 20px; }
.L-portrait #cntScore .num { display: none; }
.L-portrait #hud.endless #cntScore .num { display: inline; }
.L-portrait #goal { position: static; flex: 1 1 auto; min-width: 0; overflow: visible; }
.L-portrait #goal::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--plaque-dark); }
.L-portrait #goalFill { top: auto; bottom: 0; height: 4px; z-index: 1; }
.L-portrait #goalText { font: bold 14px var(--ff); color: var(--counter); text-shadow: var(--outline);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.L-portrait #panel { padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: var(--win); border-top: 2px outset #fff; }
.L-portrait #tools { display: flex; gap: 3px; padding: 0; background: none; border: none; justify-content: space-between; }
.L-portrait .tool { flex: 1 1 0; min-width: 44px; width: auto; height: 56px; }
.L-portrait .tool.sys { display: none; }
.L-portrait .tool .ico { width: 28px; height: 28px; }
.L-portrait .badge.cost, .L-landscape .badge.cost { top: -3px; right: -2px; }
.narrow .L-portrait #tools, html.narrow.L-portrait #tools { gap: 1px; }
html.narrow.L-portrait #panel { padding-left: 2px; padding-right: 2px; }
html.narrow .tool .lbl { display: none; }
html.narrow #titleText { font-size: 12px; }

/* landscape: title 22 px; the world; a 112 px rail of 2 x 4 tools (lefty: on the left); the HUD floats top-left */
.L-landscape #app {
  grid-template-columns: minmax(0, 1fr) 112px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "title title" "stage panel";
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom);
}
html.lefty.L-landscape #app { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "title title" "panel stage"; }
.L-landscape #titlebar { min-height: calc(22px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
.L-landscape.touch .titlebar button, html.L-landscape.touch .titlebar button { height: 18px; }
html.L-landscape.touch .titlebar button::after { top: -13px; bottom: -13px; }
.L-landscape #panel { padding: 4px; background: var(--win); border-left: 2px outset #fff; }
html.lefty.L-landscape #panel { border-left: none; border-right: 2px outset #fff; }
.L-landscape #tools { flex: 1 1 auto; min-height: 0; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(44px, 1fr); gap: 4px; padding: 2px; }
.L-landscape .tool { width: auto; height: auto; min-width: 44px; min-height: 44px; }
.L-landscape #tool-pause, .L-landscape #tool-quit { display: none; }
.L-landscape .tool .ico { width: 30px; height: 30px; }
.L-landscape #hud {
  grid-area: stage; align-self: start; justify-self: start; position: relative; z-index: 4; margin: 6px;
  display: flex; align-items: center; gap: 8px; padding: 3px 8px 7px; max-width: calc(100% - 112px);
  background: rgba(15,90,42,0.94); border: 2px solid var(--ink); border-radius: 8px; box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
}
.L-landscape .cnt { gap: 3px; flex: none; }
.L-landscape .cnt .ico { width: 20px; height: 20px; }
.L-landscape .cnt .num { font-size: 15px; }
.L-landscape #cntLives .ico { width: 18px; height: 18px; }
.L-landscape #cntScore .num { display: none; }
.L-landscape #hud.endless #cntScore .num { display: inline; }
.L-landscape #goal { position: static; min-width: 0; overflow: visible; }
.L-landscape #goal::before { content: ''; position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px; background: var(--plaque-dark); border-radius: 2px; }
.L-landscape #goalFill { top: auto; left: 6px; bottom: 3px; height: 3px; max-width: calc(100% - 12px); z-index: 1; border-radius: 2px; }
.L-landscape #goalText { font: bold 12px var(--ff); color: var(--counter); text-shadow: var(--outline); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.L-landscape #chips { top: 50px; }

/* ---------- screens (Screens builds them inside #screens, which UI.layout puts over the window below its title bar) ---------- */
#screens { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 10; pointer-events: none; }
.scr { position: absolute; inset: 0; pointer-events: auto; overflow: hidden; display: flex; align-items: center; justify-content: center;
  font-family: var(--ff); font-weight: bold; color: var(--ink); }
.scr.dim { background: rgba(0,0,0,0.5); }
canvas.art { display: block; }
.big {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: 6px 14px;
  background: linear-gradient(var(--btn-a), var(--btn-b)); border: 3px outset #fff; outline: 2px solid var(--ink);
  font: bold 18px var(--ff); color: var(--ink); cursor: pointer; box-shadow: 4px 4px 0 rgba(0,0,0,0.35); line-height: 1.15;
}
.big:active { border-style: inset; transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0,0,0,0.35); }
.big .s { font-size: 11px; color: var(--poop); }
.big .s:empty { display: none; }
.big.small { font-size: 14px; min-height: 44px; padding: 4px 12px; }
.big.go { background: linear-gradient(#f1fbef, #a5d6a7); }
.big.danger { color: #b71c1c; }
.big.danger.cf-yes, .big.cf-yes.danger { background: linear-gradient(#fff, #ffcdd2); }
.btnline { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
table.stats { width: 100%; border-collapse: collapse; font: bold 13px var(--ff); }
table.stats th { text-align: left; padding: 3px 6px; color: var(--ink-soft); }
table.stats td { text-align: right; padding: 3px 6px; color: var(--ink); }
table.stats tr:nth-child(odd) { background: rgba(0,0,0,0.05); }

/* boot */
.scr.boot { background: var(--teal); cursor: pointer; }
.boot-box { width: min(380px, calc(100% - 24px)); }
.boot-box .titlebar { font-size: 13px; }
.boot-body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px 12px 18px; }
.boot-art { width: 150px; height: 150px; }
.boot-line { text-align: center; font-size: 15px; line-height: 1.5; }
.boot-name { white-space: nowrap; }
.boot-go { display: inline-block; color: var(--title-a); animation: blink 1.1s steps(2) infinite; white-space: nowrap; }

/* main menu */
.scr.menu { background: var(--menu-bg); }
.menu-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.tp-drift { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tp-drift i { position: absolute; bottom: -40px; width: 22px; height: 22px; background: rgba(255,255,255,0.09); border: 1px dashed rgba(255,255,255,0.16);
  animation: drift 19s linear infinite; }
.tp-drift i:nth-child(1) { left: 6%;  animation-delay: -2s; }
.tp-drift i:nth-child(2) { left: 18%; animation-delay: -9s; animation-duration: 23s; }
.tp-drift i:nth-child(3) { left: 31%; animation-delay: -14s; width: 16px; height: 16px; }
.tp-drift i:nth-child(4) { left: 46%; animation-delay: -5s; animation-duration: 26s; }
.tp-drift i:nth-child(5) { left: 59%; animation-delay: -17s; width: 28px; height: 28px; }
.tp-drift i:nth-child(6) { left: 71%; animation-delay: -11s; animation-duration: 21s; }
.tp-drift i:nth-child(7) { left: 84%; animation-delay: -7s; width: 18px; height: 18px; }
.tp-drift i:nth-child(8) { left: 93%; animation-delay: -1s; animation-duration: 25s; }
.menu-logo-tm { position: absolute; right: 10px; top: 10px; width: 92px; height: 46px; }
.menu-logo-st { position: absolute; right: 10px; bottom: 10px; width: 112px; height: 54px; }
.menu-grid {
  position: relative; width: 100%; height: 100%; display: grid; gap: 6px 28px; padding: 14px 24px;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "title title" "wipey btns" "warn warn";
}
.menu-title { grid-area: title; text-align: center; min-width: 0; }
.menu-title canvas { width: min(600px, 100%); height: clamp(64px, 17vh, 160px); margin: 0 auto; animation: bob 3.2s ease-in-out infinite; }
.menu-sub { color: var(--title-fill); letter-spacing: 3px; font-size: 15px; text-shadow: 2px 2px 0 var(--title-outline); }
.menu-wipey { grid-area: wipey; position: relative; min-height: 0; min-width: 0; }
.menu-wipey canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.menu-btns { grid-area: btns; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 0; padding-right: 6px; }
.menu-btns .big { visibility: hidden; transform: scale(0); pointer-events: none; }
.menu-btns .big.in { visibility: visible; transform: scale(1); pointer-events: auto; animation: popin 0.26s cubic-bezier(0.3, 1.6, 0.6, 1); }
.menu-btns .big.in:active { transform: translate(2px, 2px); }
.menu-warn { grid-area: warn; justify-self: center; padding: 4px 10px; background: #fff; border: 2px solid #c62828; color: #c62828;
  font-size: 13px; text-align: center; }
.L-portrait .menu-grid {
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "title" "wipey" "btns" "warn"; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); gap: 6px;
}
.L-portrait .menu-title canvas { height: clamp(56px, 13vh, 110px); }
.L-portrait .menu-btns { gap: 8px; padding-right: 0; }
.L-portrait .menu-btns .big { min-height: 46px; font-size: 16px; padding: 4px 10px; }
.L-portrait .menu-logo-tm, .L-portrait .menu-logo-st { display: none; }
.L-landscape .menu-grid {
  grid-template-columns: minmax(0, 1fr) minmax(200px, 250px); grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "title btns" "wipey btns" "warn btns"; padding: 8px 14px; gap: 4px 16px;
}
.L-landscape .menu-title canvas { height: clamp(50px, 20vh, 90px); }
.L-landscape .menu-sub { font-size: 12px; }
.L-landscape .menu-btns { gap: 6px; padding-right: 0; }
.L-landscape .menu-btns .big { min-height: 46px; font-size: 15px; padding: 2px 10px; }
.L-landscape .menu-logo-tm, .L-landscape .menu-logo-st { display: none; }

/* help */
.help-card {
  width: min(740px, calc(100% - 20px)); max-height: calc(100% - 20px); display: flex; flex-direction: column;
  padding: 10px 14px 10px; background: #fffdf2; border: 3px solid var(--ink); border-radius: 10px; box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
}
.help-title { text-align: center; font: bold 26px var(--ff); color: var(--title-fill); text-shadow: var(--title-outline-shadow); margin-bottom: 8px; }
.help-page { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; touch-action: pan-y; }
.help-art { display: flex; flex-direction: column; gap: 8px; }
.help-art canvas { width: 100%; height: 110px; }
.help-page.one .help-art canvas { height: 220px; }
.help-text p { font-size: 14px; line-height: 1.42; margin-bottom: 9px; color: var(--ink); }
.help-text .help-h { font-size: 18px; color: #c62828; }
.help-text h3 { font-size: 14px; color: var(--title-a); margin: 6px 0 3px; }
.help-page:has(.keys) { grid-template-columns: minmax(0, 1fr); }
table.keys { border-collapse: collapse; font-size: 13px; width: 100%; }
table.keys th { text-align: left; white-space: nowrap; padding: 3px 12px 3px 0; color: #c62828; vertical-align: top; }
table.keys td { padding: 3px 0; color: var(--ink); }
table.keys tr + tr { border-top: 1px dashed #d8ccb0; }
.help-nav { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.help-nav .red {
  width: 58px; height: 44px; background: linear-gradient(#ef5350, #c62828); color: #fff; border: 3px outset #ffcdd2;
  font: bold 20px var(--tahoma); cursor: pointer; box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
}
.help-nav .red:active { border-style: inset; }
.help-pg { margin-left: auto; color: var(--poop); font-size: 13px; }
.L-portrait .help-page { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.L-portrait .help-art { flex-direction: row; }
.L-portrait .help-art canvas { height: 84px; }
.L-portrait .help-page.one .help-art canvas { height: 130px; }
.L-portrait .help-title { font-size: 21px; }
.L-portrait .help-text p { font-size: 13px; }
.L-landscape .help-card { padding: 6px 10px; max-height: calc(100% - 10px); }
.L-landscape .help-title { font-size: 19px; margin-bottom: 4px; }
.L-landscape .help-page { grid-template-columns: 120px minmax(0, 1fr); }
.L-landscape .help-page:has(.keys) { grid-template-columns: minmax(0, 1fr); }   /* (P7: the CONTROLS tables get the whole width) */
.L-landscape .help-art canvas { height: 70px; }
.L-landscape .help-page.one .help-art canvas { height: 140px; }
.L-landscape .help-text p { font-size: 12.5px; margin-bottom: 6px; }
.L-landscape .help-nav { margin-top: 4px; }

/* about */
.scr#scrAbout { cursor: pointer; }
.about-card {
  width: min(520px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow-y: auto; padding: 14px 18px;
  background: #fffdf2; border: 3px solid var(--ink); border-radius: 10px; box-shadow: 6px 6px 0 rgba(0,0,0,0.4); text-align: center;
}
.about-card h2 { font-size: 20px; color: var(--title-fill); text-shadow: var(--title-outline-shadow); margin-bottom: 6px; }
.about-art { width: 140px; height: 64px; margin: 0 auto 6px; }
.credits { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; text-align: left; font-size: 13px; margin: 6px 0 10px; }
.credits dt { color: #c62828; white-space: nowrap; }
.credits dd { color: var(--ink); }
.about-card .why { font-size: 14px; margin-bottom: 4px; }
.about-card .tribute { font-size: 12px; color: var(--ink-soft); }
.about-card .tap { font-size: 11px; color: #888; margin-top: 8px; }

/* level-up: banner / card / intermission */
.scr.level { background: transparent; }
.scr.level[data-part=banner] { background: rgba(0,0,0,0.22); cursor: pointer; }
.scr.level[data-part=card] { background: rgba(0,0,0,0.55); }
.lv-banner, .lv-card, .lv-inter { display: none; }
.scr.level[data-part=banner] .lv-banner, .scr.level[data-part=card] .lv-card { display: block; }
.scr.level[data-part=intermission] .lv-inter { display: flex; }
.lv-banner span { display: inline-block; font: italic bold clamp(34px, 9vmin, 76px) var(--ff); color: var(--title-fill);
  text-shadow: var(--title-outline-shadow); animation: bounceIn 0.6s cubic-bezier(0.3, 1.6, 0.6, 1); text-align: center; }
.lv-card, .ov-card { width: min(460px, calc(100% - 20px)); max-height: calc(100% - 20px); overflow-y: auto; }
.lv-body { background: #fffdf2; padding: 10px; border: 2px inset #fff; }
.lv-body .left { margin-top: 8px; font-size: 12px; line-height: 1.35; color: var(--poop); }
.lv-inter { position: absolute; inset: 0; align-items: center; justify-content: center; gap: 24px; padding: 16px; background: var(--menu-bg); }
.lv-sign { width: min(340px, 44%); height: min(340px, 80%); flex: none; }
.lv-info { max-width: 380px; text-align: center; color: #fff; }
.lv-name { font-size: 24px; color: var(--title-fill); text-shadow: var(--title-outline-shadow); margin-bottom: 6px; }
.lv-sub { font-size: 16px; margin-bottom: 10px; }
.lv-cap { font-size: 12px; color: #c8e6c9; margin-bottom: 14px; }
.lv-info .big { margin: 0 auto; min-width: 160px; }
.L-portrait .lv-inter { flex-direction: column; gap: 10px; }
.L-portrait .lv-sign { width: min(260px, 80%); height: min(260px, 45%); }
.L-portrait .lv-name { font-size: 20px; }
.L-landscape .lv-inter { gap: 14px; padding: 8px; }
.L-landscape .lv-sign { height: 90%; }

/* game over */
.scr.over { background: rgba(25,12,6,0.78); flex-direction: column; gap: 8px; padding: 10px; cursor: pointer; }
.ov-top { text-align: center; }
.ov-title { font: italic bold clamp(28px, 7vmin, 58px) var(--ff); color: #fff; text-shadow: var(--ink-outline); }
.ov-art { width: 180px; height: 180px; margin: 6px auto 0; animation: shiver 0.12s linear infinite; }
.scr.over.card .ov-art { width: 96px; height: 96px; }
.scr.over.card .ov-title { font-size: clamp(22px, 5vmin, 40px); }
.L-landscape .scr.over.card .ov-top { display: none; }

/* HALL OF FUME: the stall door */
.scr.hof { background: #5d4037; }
.hof-door { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.hof-wrap { position: relative; width: min(540px, calc(100% - 24px)); max-height: calc(100% - 16px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; background: rgba(255,255,255,0.42); border-radius: 6px; }
.hof-title { text-align: center; font: italic bold 30px var(--ff); color: var(--title-fill); text-shadow: var(--title-outline-shadow); }
.hof-rows { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.hof-rows li { display: flex; align-items: baseline; gap: 8px; padding: 2px 6px; transform: rotate(var(--tilt, 0deg));
  font: bold 20px var(--ff); color: #1a237e; }
.hof-rows li:nth-child(2) { color: #222; }
.hof-rows li:nth-child(3) { color: #b71c1c; }
.hof-rows li:nth-child(4) { color: #1b5e20; }
.hof-rows li:nth-child(5) { color: #4a148c; }
.hof-rows .rk { flex: none; width: 1.6em; }
.hof-rows .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-rows .sc { flex: none; font-size: 22px; }
.hof-rows .meta { flex: none; font-size: 11px; color: #555; }
.hof-rows li.empty { color: rgba(0,0,0,0.35); }
.hof-rows li.new { background: rgba(255,213,79,0.55); border-radius: 4px; }
.hof-rows li.entry { flex-wrap: wrap; align-items: center; background: rgba(255,255,255,0.75); border: 2px dashed #c62828; border-radius: 4px; }
.hof-rows li.entry .sign { flex: 1 1 100%; font-size: 12px; color: #c62828; order: -1; padding-left: 1.9em; }
.hof-rows li.entry input { flex: 1 1 120px; min-width: 0; height: 40px; padding: 2px 8px; font: bold 18px var(--ff); color: #1a237e;
  background: #fff; border: 2px inset #fff; outline: none; -webkit-user-select: text; user-select: text; }
.hof-rows li.entry .ok { min-width: 56px; height: 44px; background: var(--win); border: 2px outset #fff; font: bold 14px var(--tahoma); color: #000; cursor: pointer; }
.hof-btns { display: flex; gap: 10px; justify-content: center; margin-top: 4px; }
.hof-polaroids { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.hof-polaroids canvas { width: 88px; height: 70px; background: #fff; border: 5px solid #fff; border-bottom-width: 14px;
  box-shadow: 2px 3px 0 rgba(0,0,0,0.35); transform: rotate(-4deg); }
.hof-polaroids canvas:nth-child(even) { transform: rotate(3deg); margin-left: 10px; }
.L-portrait .hof-polaroids, .L-landscape .hof-polaroids { display: none; }
@media (max-width: 860px) { .hof-polaroids { display: none; } }
.L-portrait .hof-rows li { font-size: 17px; }
/* (P16: portrait: the level and date go under the name, so the name keeps its room; the list sits higher, off the door's heart) */
.L-portrait .hof-rows li:not(.entry) { display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; grid-template-areas: "rk nm sc" "rk meta sc";
  column-gap: 8px; row-gap: 0; align-items: baseline; }
.L-portrait .hof-rows li:not(.entry) .rk { grid-area: rk; }
.L-portrait .hof-rows li:not(.entry) .nm { grid-area: nm; }
.L-portrait .hof-rows li:not(.entry) .sc { grid-area: sc; align-self: center; }
.L-portrait .hof-rows li:not(.entry) .meta { grid-area: meta; line-height: 1.1; }
.L-portrait .scr.hof { align-items: flex-start; }
.L-portrait .hof-wrap { margin-top: calc(var(--vh, 100vh) * 0.08); background: rgba(255,255,255,0.62); }
.L-portrait .hof-title { font-size: 25px; }
.L-landscape .hof-wrap { padding: 6px 12px; gap: 4px; }
.L-landscape .hof-title { font-size: 20px; }
.L-landscape .hof-rows { gap: 2px; }
.L-landscape .hof-rows li { font-size: 15px; }

/* pause card, quit and confirm dialogs */
.pause-card { width: min(390px, calc(100% - 20px)); max-height: calc(100% - 16px); overflow-y: auto; }
.pause-body { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; background: #fffdf2; border: 2px inset #fff; }
.pause-head { font: bold 18px var(--ff); text-align: center; color: var(--ink); }
.pause-sub { font-size: 12px; color: var(--ink-soft); margin-top: -4px; }
.scr.tapgo .pause-head { font-size: 26px; color: #c62828; animation: blink 1.1s steps(2) infinite; }
.pause-art { width: 170px; height: 140px; cursor: pointer; }
.pause-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.pause-btns .go { grid-column: 1 / -1; }
.dlg { width: min(430px, calc(100% - 20px)); }
.dlg-body { padding: 14px; font: bold 14px/1.4 var(--ff); color: var(--ink); }
.dlg-body p { margin-bottom: 4px; }
@media (max-height: 440px) {
  .pause-art { width: 110px; height: 80px; }
  .pause-head { font-size: 15px; }
  .scr.tapgo .pause-head { font-size: 20px; }
  .pause-btns { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .pause-btns .go { grid-column: auto; }
  .pause-btns .big.small { font-size: 12px; padding: 2px 6px; }
}

/* ---------- settings: POOP CATCHER's Win95 dialog ---------- */
.settings-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 20;
  display: flex; align-items: center; justify-content: center; padding: 12px;
}
.settings {
  width: min(320px, 100%); max-height: 100%; display: flex; flex-direction: column;
  background: var(--win); border: 3px outset #fff; padding: 3px; box-shadow: 4px 4px 0 rgba(0,0,0,0.5);
}
.settings .titlebar button { width: 20px; }
.settings-body { padding: 12px 10px 10px; font-family: var(--tahoma); font-size: 14px; font-weight: normal; overflow-y: auto; touch-action: pan-y; color: #000; }
.settings .slider { display: block; margin-bottom: 12px; }
.settings .row { display: flex; justify-content: space-between; font-weight: bold; margin-bottom: 4px; }
.settings input[type=range] { width: 100%; height: 28px; touch-action: pan-y; accent-color: var(--title-a); }
.settings .check { display: flex; align-items: center; gap: 8px; font-weight: bold; margin: 6px 0; min-height: 28px; cursor: pointer; }
.settings .check input { width: 20px; height: 20px; accent-color: var(--title-a); flex: none; }
.settings .check.off { opacity: 0.5; }
.settings .checkrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.settings .select { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: bold; margin: 8px 0; min-height: 30px; }
.settings select { min-width: 100px; height: 28px; padding: 0 4px; font: 13px var(--tahoma); background: #fff; border: 2px inset #fff; color: #000; }
.settings .hint { font-size: 12px; color: #333; margin: 2px 0 10px; }
.settings .sub { font-weight: bold; margin: 12px 0 2px; padding-top: 8px; border-top: 2px groove #fff; color: var(--title-a); }
.settings .ok {
  display: block; margin: 8px auto 0; min-width: 90px; min-height: 30px;
  background: var(--win); border: 2px outset #fff; font-family: var(--tahoma); font-weight: bold; cursor: pointer; color: #000;
}
.settings .ok:active, .settings .btn:active { border-style: inset; }
.settings .btnrow { display: flex; gap: 8px; margin: 6px 0 12px; }
.settings .btn {
  flex: 1; min-height: 30px; padding: 2px 6px;
  background: var(--win); border: 2px outset #fff; font-family: var(--tahoma); font-size: 13px; font-weight: bold; cursor: pointer; color: #000;
}
.settings .btn.small { flex: none; font-size: 12px; min-height: 26px; }
.settings .btn.danger { color: #900; }
.settings .btn.armed { background: #c62828; color: #fff; }
.touch .settings .check { min-height: 44px; margin: 0; }
.touch .settings .select { min-height: 48px; }
.touch .settings select { height: 46px; }
.touch .settings input[type=range] { height: 46px; }
.touch .big.small, .touch .big { min-height: 46px; }
.touch .hof-rows li.entry input { height: 46px; }
.touch .settings .btn, .touch .settings .ok { min-height: 44px; }
.touch .settings .titlebar button { min-width: 40px; height: 24px; }
.L-landscape .settings { width: min(620px, 100%); }
.L-landscape .settings-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "c b";
  column-gap: 18px; align-items: start; }
.L-landscape .settings-cols .g-a { grid-area: a; }
.L-landscape .settings-cols .g-b { grid-area: b; }
.L-landscape .settings-cols .g-c { grid-area: c; }
.L-landscape .settings-cols .g-b > .sub:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.L-landscape .settings-body { padding-top: 8px; }
.L-landscape .settings .slider { margin-bottom: 4px; }
html.L-landscape.touch .settings input[type=range] { height: 36px; }
.L-landscape .settings .hint { margin: 0 0 6px; }
.L-landscape .settings .sub { margin-top: 8px; padding-top: 6px; }
.L-landscape .settings .ok { margin-top: 4px; }
/* phones: bigger small print */
html.touch .badge.cost { font-size: 11px; height: 17px; }
.touch #inspect { font-size: 13px; max-width: min(300px, calc(100% - 12px)); }

/* ---------- the NEW GAME difficulty chooser ---------- */
.diff-dlg { width: min(470px, calc(100% - 20px)); max-height: calc(100% - 16px); overflow-y: auto; }
.diff-list { display: flex; flex-direction: column; gap: 8px; }
.diff { position: relative; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 10px 6px 8px; text-align: left;
  background: linear-gradient(var(--btn-a), var(--btn-b)); border: 3px outset #fff; outline: 2px solid var(--ink); cursor: pointer;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.3); color: var(--ink); font: bold 15px var(--ff); }
.diff:active { border-style: inset; transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(0,0,0,0.3); }
.diff.sel { background: linear-gradient(#fffbe6, var(--sel)); outline-color: #b07a00; }
.diff .ico { width: 40px; height: 40px; flex: none; }
.diff .dt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.diff .dt b { font-size: 16px; line-height: 1.1; }
.diff .dt small { font-size: 11px; color: var(--ink-soft); line-height: 1.25; }
.diff .dk { position: absolute; left: 3px; top: 1px; font: bold 10px var(--tahoma); color: #888; }
.dtag { flex: none; display: inline-block; padding: 1px 6px; border-radius: 9px; font: bold 10px var(--tahoma); font-style: normal;
  background: #e0e0e0; color: #333; border: 1px solid rgba(0,0,0,0.35); }
.dtag.easy { background: #c8e6c9; color: #1b5e20; }
.dtag.hard { background: #ffcdd2; color: #b71c1c; }
.dtag.normal { background: #fff3c4; color: #5a3210; }
.hof-rows .meta .dtag { margin-left: 6px; vertical-align: 1px; }
.diff-note { margin-top: 8px; font-size: 11px; color: var(--ink-soft); text-align: center; }
.L-landscape .diff { min-height: 48px; padding: 3px 8px; }
.L-landscape .diff .ico { width: 32px; height: 32px; }
.L-landscape .diff-list { gap: 5px; }
.L-landscape .diff-dlg .btnline { margin-top: 6px; }
.L-landscape .diff-note { display: none; }
.lv-diff { font-size: 12px; color: var(--title-fill); margin: -4px 0 8px; }
.pause-diff { font-size: 12px; color: var(--ink-soft); text-align: center; margin-top: -2px; }

/* the menu: TROPHIES, and SETTINGS + ABOUT side by side */
.menu-pair { display: flex; gap: 10px; }
.menu-pair .big { flex: 1 1 0; min-width: 0; padding-left: 6px; padding-right: 6px; }
.menu-pair .big .l { white-space: nowrap; }
.L-portrait .menu-pair, .L-landscape .menu-pair { gap: 6px; }
.big.trophies .l { display: inline-flex; align-items: center; gap: 6px; }
.big.trophies .ico { width: 24px; height: 24px; flex: none; }

/* ---------- TROPHIES & CLOSET ---------- */
.scr.trophies { background: var(--teal); }
.tr-win { width: min(860px, calc(100% - 16px)); height: calc(100% - 16px); display: flex; flex-direction: column; }
.tr-tabs { display: flex; gap: 4px; padding: 6px 4px 0; }
.tr-tabs .tab { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 2px 14px; background: var(--win); border: 2px outset #fff;
  border-bottom: none; font: bold 14px var(--ff); color: var(--ink); cursor: pointer; position: relative; top: 2px; }
.tr-tabs .tab.on { background: #fffdf2; top: 0; padding-bottom: 4px; z-index: 1; }
.tr-tabs .tab .ico { width: 24px; height: 24px; }
.tr-count { font: bold 11px var(--tahoma); color: var(--poop); }
.tr-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; background: #fffdf2; border: 2px inset #fff; padding: 10px; }
.tr-foot { display: flex; justify-content: center; padding: 8px 0 4px; }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; }
.scr.trophies[data-tab=closet] .tr-grid, .scr.trophies[data-tab=trophies] .cl-wrap { display: none; }
.tcard { display: flex; gap: 8px; align-items: flex-start; padding: 7px 8px; border: 2px solid var(--ink); border-radius: 6px;
  background: linear-gradient(#fffbe6, #ffe8a3); box-shadow: 3px 3px 0 rgba(0,0,0,0.18); }
.tcard .ico { width: 42px; height: 42px; flex: none; }
.tcard .tc-txt { min-width: 0; }
.tcard b { display: block; font-size: 14px; color: var(--ink); }
.tcard p { font-size: 11px; line-height: 1.3; color: var(--ink-soft); }
.tcard .tc-meta { margin-top: 3px; font: bold 10px var(--tahoma); color: var(--poop); }
.tcard.locked { background: #ecebe6; border-color: #9a968a; box-shadow: none; }
.tcard.locked b { color: #77736a; }
.tcard.locked p { color: #8a867c; }
.tc-bar { position: relative; height: 14px; margin-top: 4px; background: #d8d4c8; border: 1px solid #9a968a; border-radius: 7px; overflow: hidden; }
.tc-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ffe082, #ffb300); }
.tc-bar span { position: relative; display: block; text-align: center; font: bold 10px/12px var(--tahoma); color: #333; }
.cl-wrap { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); gap: 14px; align-items: start; }
.cl-preview { position: sticky; top: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px;
  background: radial-gradient(ellipse at 50% 85%, #9fd68a 0, #6fbf5a 60%, #4f9440 100%); border: 2px solid var(--ink); border-radius: 8px; }
.cl-wipey { width: 150px; height: 190px; }
.cl-wagon { width: 100%; max-width: 240px; height: 110px; }
.cl-note { font-size: 10px; color: #fff; text-align: center; text-shadow: 1px 1px 0 var(--ink); }
.cl-slots h3 { margin: 4px 0 2px; font-size: 16px; color: var(--poop); }
.cl-slots h3:not(:first-child) { margin-top: 12px; }
.cl-slot h4 { margin: 6px 0 4px; font: bold 11px var(--tahoma); color: var(--ink-soft); letter-spacing: 1px; }
.cl-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.look { position: relative; display: flex; flex-direction: column; align-items: center; width: 92px; padding: 3px 3px 4px; cursor: pointer;
  background: linear-gradient(var(--btn-a), var(--btn-b)); border: 2px outset #fff; outline: 2px solid var(--ink); color: var(--ink); }
.look .lk { width: 70px; height: 70px; }
.look .ln { font: bold 10px/1.15 var(--ff); text-align: center; min-height: 2.3em; display: flex; align-items: center; }
.look.on { background: linear-gradient(#fffbe6, var(--sel)); outline-color: #b07a00; }
.look.on::after { content: '\2714'; position: absolute; right: 3px; top: 1px; font-size: 13px; color: #2e7d32; }
.look.locked { cursor: not-allowed; }
.look.locked .lk { filter: grayscale(1) brightness(0.92); opacity: 0.45; }
.look.locked .ln { color: #8a867c; }
.look .lt { position: absolute; left: 2px; right: 2px; top: 26px; display: flex; align-items: center; justify-content: center; gap: 2px;
  padding: 1px 2px; background: rgba(255,255,255,0.88); border: 1px solid #9a968a; border-radius: 4px; font: bold 8px var(--tahoma); color: #555; text-align: center; }
.look .lt .ico { width: 12px; height: 12px; flex: none; }
.L-portrait .cl-wrap { grid-template-columns: minmax(0, 1fr); }
.L-portrait .cl-preview { position: static; flex-direction: row; justify-content: center; padding: 4px; }
.L-portrait .cl-wipey { width: 100px; height: 126px; }
.L-portrait .cl-wagon { width: 170px; height: 90px; }
.L-portrait .cl-note { display: none; }
.L-portrait .tr-grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.L-portrait .look, .L-landscape .look { width: 80px; }
.L-portrait .look .lk, .L-landscape .look .lk { width: 60px; height: 60px; }
.L-portrait .look .lt, .L-landscape .look .lt { top: 20px; }
.L-landscape .tr-win { height: calc(100% - 8px); }
.L-landscape .tr-tabs .tab { min-height: 36px; }
.L-landscape .tr-body { padding: 6px; }
.L-landscape .tr-foot { padding: 4px 0 2px; }
.L-landscape .cl-wrap { grid-template-columns: 150px minmax(0, 1fr); gap: 8px; }
.L-landscape .cl-wipey { width: 100px; height: 120px; }
.L-landscape .cl-wagon { height: 70px; }
.L-landscape .cl-note { display: none; }

/* the TROPHY card (a toast of its own, over everything) */
#trophyPop { position: fixed; left: 50%; top: max(10px, env(safe-area-inset-top)); z-index: 40; pointer-events: none; display: flex; align-items: center; gap: 10px;
  max-width: min(420px, calc(100vw - 20px)); padding: 6px 14px 6px 8px; transform: translate(-50%, -140%);
  background: linear-gradient(#fffbe6, #ffd54f); border: 3px outset #fff; outline: 2px solid var(--ink); box-shadow: 4px 4px 0 rgba(0,0,0,0.4);
  font-family: var(--ff); font-weight: bold; color: var(--ink); transition: transform 0.3s cubic-bezier(0.3, 1.5, 0.6, 1), opacity 0.3s; }
#trophyPop.in { transform: translate(-50%, 0); }
#trophyPop.out { opacity: 0; transform: translate(-50%, -30%); }
#trophyPop .ico { width: 46px; height: 46px; flex: none; }
#trophyPop .tp-txt { display: flex; flex-direction: column; min-width: 0; }
#trophyPop .tp-head { font: bold 11px var(--tahoma); color: #b07a00; letter-spacing: 2px; }
#trophyPop .tp-name { font-size: 18px; line-height: 1.1; }
#trophyPop .tp-sub { font-size: 11px; color: var(--ink-soft); line-height: 1.2; }
#chipClock.rot { background: #ffe0b2; border-color: #e65100; color: #bf360c; }

/* ---------- animations ---------- */
@keyframes blink { 50% { opacity: 0.35; } }
@keyframes toastIn { from { transform: translateY(-8px) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes floatUp { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -28px); } }
@keyframes bump { 30% { transform: scale(1.25) rotate(-4deg); } 60% { transform: scale(0.95); } }
@keyframes drift { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(calc(-1 * var(--vh, 100vh) - 80px)) rotate(360deg); } }
@keyframes bob { 50% { transform: translateY(-6px); } }
@keyframes popin { from { transform: scale(0); } 70% { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes bounceIn { from { transform: scale(0.2) rotate(-8deg); opacity: 0; } 70% { transform: scale(1.12) rotate(2deg); opacity: 1; } to { transform: none; } }
@keyframes shiver { 0%, 100% { transform: translateX(-1px); } 50% { transform: translateX(1px); } }
@keyframes tipPulse { from { outline-color: var(--sel); } to { outline-color: #ff6f00; } }
@keyframes goldPulse { from { box-shadow: 2px 2px 0 rgba(0,0,0,0.35); } to { box-shadow: 0 0 0 4px rgba(255,213,79,0.75); } }
@keyframes redPulse { from { box-shadow: 2px 2px 0 rgba(0,0,0,0.35); } to { box-shadow: 0 0 0 4px rgba(255,59,59,0.6); } }
@keyframes ringPulse { from { box-shadow: 0 0 0 2px rgba(0,0,0,0.4); } to { box-shadow: 0 0 0 7px rgba(255,213,79,0.45); } }
@media (prefers-reduced-motion: reduce) {
  .menu-title canvas, .tp-drift i, .ov-art, #tipRing, .tip-target, #chipTrain.last, #chipTrain.threat { animation: none !important; }
}