@font-face { font-family: KFuture; src: url(../assets/fonts/kenney-future.ttf) format('truetype'); font-display: swap; }
:root { --heavy: "Arial Black", "Segoe UI Black", Roboto, system-ui, sans-serif; --ink: #fff4dc; --gold: #ffd23f; --red: #ff4b3e; --green: #3ddc6a; --panel: rgba(14, 10, 22, 0.94); --edge: #f0a202; --u: 1rem; }
html { font-size: 18px; }
html.big { font-size: 21px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0b0710; color: var(--ink); overflow: hidden; overscroll-behavior: none; touch-action: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 700; -webkit-user-select: none; user-select: none; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; image-rendering: pixelated; }
.layer { position: fixed; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.ic { display: inline-block; width: 1.6em; height: 1.6em; background-image: url(../assets/icons.png); background-repeat: no-repeat; image-rendering: pixelated; vertical-align: middle; flex: none; }
h2, #warn strong, #banner strong, #depth b, #action b { font-family: var(--heavy); font-weight: 900; letter-spacing: 0.02em; }
/* the pixel font is only used for the logo: its K looks like an H */
.logo { font-family: KFuture, Impact, sans-serif; font-weight: normal; letter-spacing: 0.03em; }

/* ---------- HUD ---------- */
#hud { inset: 0; pointer-events: none; display: none; }
body[data-screen="play"] #hud, body[data-screen="shop"] #hud, body[data-screen="tow"] #hud, body[data-screen="lore"] #hud { display: block; }
#gauges { position: absolute; left: max(10px, env(safe-area-inset-left)); top: max(8px, env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 6px;
  background: rgba(8, 6, 14, 0.62); border: 2px solid rgba(255, 255, 255, 0.16); border-radius: 12px; padding: 6px 10px 6px 6px; }
.gauge { display: flex; align-items: center; gap: 8px; height: 30px; }
.gauge .ic { width: 28px; height: 28px; }
.gauge .bar { width: 9.5em; max-width: 26vw; height: 20px; border-radius: 6px; background: #241a2e; border: 2px solid #000; overflow: hidden; position: relative; }
.gauge .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; border-radius: 4px; transition: width 0.15s linear; }
#g-fuel .bar i { background: linear-gradient(#ffd45a, #f08a00); }
#g-hull .bar i { background: linear-gradient(#8ee2ff, #2b8fd6); }
#g-hold .bar i { background: linear-gradient(#e7c27a, #a8692a); }
.gauge.low .bar i { background: linear-gradient(#ff8a7a, #d62020); animation: blink 0.5s steps(2) infinite; }
.gauge.full .bar i { background: linear-gradient(#9cff9c, #22a845); }
.gauge .val { min-width: 4.2em; font-size: 1rem; text-shadow: 0 2px 0 #000; }
#topright { position: absolute; right: max(10px, env(safe-area-inset-right)); top: max(8px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 10px; }
#cash, #depth { display: flex; align-items: center; gap: 6px; background: rgba(8, 6, 14, 0.62); border: 2px solid rgba(255, 255, 255, 0.16); border-radius: 12px; padding: 4px 12px 4px 6px; height: 48px; }
#cash .ic, #depth .ic { width: 30px; height: 30px; }
#cash b { font-size: 1.35rem; color: var(--gold); text-shadow: 0 2px 0 #000; }
#cash.pop b { animation: pop 0.5s ease-out; }
#depth b { font-size: 1.2rem; text-shadow: 0 2px 0 #000; }
.iconbtn { pointer-events: auto; width: 52px; height: 52px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, 0.4); background: rgba(8, 6, 14, 0.7); font-size: 1.2rem; font-family: var(--heavy); font-weight: 900; }
#warn { position: absolute; left: 50%; top: max(70px, 18vh); transform: translateX(-50%); text-align: center; padding: 8px 26px; border-radius: 14px; background: rgba(160, 0, 0, 0.82); border: 3px solid #ffd0c8; animation: warn 0.6s steps(2) infinite; }
#warn strong { display: block; font-size: 2.1rem; color: #fff; }
#warn span { font-size: 1rem; }
#banner { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); text-align: center; animation: banner 2.4s ease-out forwards; }
#banner strong { display: block; font-size: 2.6rem; color: var(--gold); text-shadow: 0 4px 0 #000, 0 0 18px rgba(255, 180, 40, 0.6); white-space: nowrap; }
#banner span { font-size: 1.1rem; text-shadow: 0 2px 0 #000; }
#toast { position: absolute; left: 50%; bottom: 40%; transform: translateX(-50%); padding: 8px 18px; border-radius: 12px; background: rgba(8, 6, 14, 0.85); border: 2px solid #ffffff44; font-size: 1.05rem; white-space: nowrap; max-width: 90vw; overflow: hidden; text-overflow: ellipsis; }
#toast.warn { border-color: #ff8a6a; color: #ffd8c8; } #toast.good { border-color: #6aff8a; color: #d8ffe0; }
#tally { position: absolute; right: max(14px, env(safe-area-inset-right)); top: 70px; min-width: 15em; padding: 10px 16px; border-radius: 14px; background: var(--panel); border: 3px solid var(--green); }
#tally h3 { margin: 0 0 4px; font-family: var(--heavy); font-weight: 900; color: var(--green); font-size: 1.2rem; }
#tally ul { list-style: none; margin: 0; padding: 0; }
#tally li { display: flex; align-items: center; gap: 8px; font-size: 1rem; animation: slidein 0.18s ease-out; }
#tally li span.n { flex: 1; } #tally li .v { color: var(--gold); }
#tally .total { margin-top: 6px; font-size: 1.8rem; color: var(--gold); text-align: right; }
#coach { position: absolute; left: 50%; top: max(64px, 15vh); transform: translateX(-50%); width: min(560px, 60vw); padding: 10px 16px 12px; border-radius: 14px; background: rgba(20, 40, 70, 0.92); border: 3px solid #8ee2ff; pointer-events: auto; text-align: center; }
#coach .step { font-size: 1rem; color: #8ee2ff; }
#coach p { margin: 4px 0 8px; font-size: 1.2rem; line-height: 1.3; }
#coach.done { border-color: var(--green); background: rgba(20, 70, 40, 0.92); }
button.small { min-height: 48px; padding: 4px 18px; border-radius: 10px; border: 2px solid #ffffff66; background: #00000066; font-size: 1rem; }
body.coaching #warn { top: auto; bottom: max(68px, 24%); }

/* ---------- touch ---------- */
#touch { inset: 0; pointer-events: none; display: none; }
body.touch[data-screen="play"] #touch { display: block; }
.cluster { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 14px; pointer-events: none; }
.cluster.left { left: max(14px, env(safe-area-inset-left)); }
.cluster.right { right: max(14px, env(safe-area-inset-right)); flex-direction: column; align-items: flex-end; }
.pad { pointer-events: auto; width: 84px; height: 84px; border-radius: 22px; border: 3px solid rgba(255, 255, 255, 0.55); background: rgba(20, 14, 30, 0.45);
  font-size: 2.1rem; line-height: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-shadow: 0 2px 0 #000; }
.pad small { font-size: 1rem; font-family: var(--heavy); font-weight: 900; margin-top: 2px; }
.pad.held { background: rgba(255, 200, 60, 0.55); border-color: #ffe38a; transform: scale(0.95); }
.pad.down { background: rgba(120, 40, 20, 0.5); }
.cluster.right .pad { width: 92px; height: 76px; }
.items { position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 10px; pointer-events: none; }
.item { pointer-events: auto; width: 64px; height: 52px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, 0.45); background: rgba(20, 14, 30, 0.55); display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 1.1rem; }
.item .ic { width: 28px; height: 28px; } .item.empty { opacity: 0.5; }
#action { right: max(122px, calc(env(safe-area-inset-right) + 122px)); bottom: max(100px, 26vh); min-width: 150px; min-height: 64px; padding: 6px 18px; border-radius: 16px; border: 3px solid #fff3c4;
  background: linear-gradient(#ffd45a, #f08a00); color: #2a1400; display: none; align-items: center; justify-content: center; gap: 8px; font-size: 1.3rem; z-index: 4; box-shadow: 0 6px 0 #6a3a00; animation: bob 1s ease-in-out infinite; }
body[data-screen="play"] #action:not([hidden]) { display: flex; }
body:not(.touch) #action { right: 50%; transform: translateX(50%); bottom: 18%; }
#action .ic { width: 32px; height: 32px; }
.newdot { position: absolute; top: -12px; right: -10px; background: var(--red); color: #fff; font-style: normal; font-size: 1rem; padding: 2px 8px; border-radius: 10px; border: 2px solid #fff; font-family: var(--heavy); font-weight: 900; }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 10; padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
body[data-screen="loading"] #s-loading, body[data-screen="title"] #s-title, body[data-screen="pause"] #s-pause, body[data-screen="settings"] #s-settings,
body[data-screen="confirm"] #s-confirm, body[data-screen="help"] #s-help, body[data-screen="notes"] #s-notes, body[data-screen="credits"] #s-credits,
body[data-screen="shop"] #s-shop, body[data-screen="lore"] #s-lore, body[data-screen="tow"] #s-tow { display: flex; }
.screen.panel { background: rgba(6, 4, 12, 0.7); }
.screen.panel > * { max-width: 760px; width: 100%; }
.screen.panel > h2 { text-align: center; }
.screen.panel::before { content: ""; position: absolute; inset: max(8px, 3vh) max(10px, 4vw); background: var(--panel); border: 3px solid var(--edge); border-radius: 18px; z-index: -1; }
.screen.panel.wide > * { max-width: 1100px; }
h2 { margin: 0 0 10px; font-size: 1.9rem; color: var(--gold); text-shadow: 0 3px 0 #000; }
#s-title { background: linear-gradient(rgba(6, 4, 12, 0.15), rgba(6, 4, 12, 0.65)); flex-direction: row; flex-wrap: wrap; align-content: center; gap: 4px 48px; }
#s-title .logo { font-size: 4.4rem; line-height: 0.95; color: var(--gold); text-shadow: 0 6px 0 #6a2a00, 0 10px 18px #000; text-align: center; animation: logo 3s ease-in-out infinite; }
#s-title .tag { flex-basis: 100%; order: 3; text-align: center; margin: 0; font-size: 1.1rem; text-shadow: 0 2px 0 #000; }
#s-title .foot { flex-basis: 100%; order: 4; margin: 2px 0 0; text-align: center; font-size: 1rem; opacity: 0.85; text-shadow: 0 2px 0 #000; }
#s-loading .logo { font-size: 3rem; color: var(--gold); }
.menu { display: flex; flex-direction: column; gap: 8px; min-width: 260px; }
.menu button, .row button, .back, .toggles button, #s-tow > button, #lore-actions button { min-height: 52px; padding: 6px 22px; border-radius: 14px; border: 3px solid #fff3c4; background: linear-gradient(#ffd45a, #f08a00); color: #2a1400; font-size: 1.15rem; font-family: var(--heavy); font-weight: 900; box-shadow: 0 4px 0 #6a3a00; }
.menu button.alt, .row button.alt, .toggles button, .back { background: linear-gradient(#4a4060, #2a2238); color: var(--ink); border-color: #9a8ab8; box-shadow: 0 4px 0 #120c1c; }
button.danger { background: linear-gradient(#ff6a5a, #c01818) !important; color: #fff !important; border-color: #ffd0c8 !important; }
.menu button:active, .row button:active, .toggles button:active, .back:active, .card .buy:active { transform: translateY(3px); box-shadow: none; }
.row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.back { margin-top: 10px; align-self: center; width: auto !important; min-width: 200px; }
.toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.toggles button b { color: var(--gold); }
.scroll { overflow-y: auto; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); padding: 2px 6px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.help p { margin: 0 0 10px; font-size: 1rem; line-height: 1.45; font-weight: 600; }
kbd { display: inline-block; padding: 0 6px; border: 2px solid #9a8ab8; border-radius: 6px; background: #2a2238; font: inherit; }
#confirm-text, #tow-text { font-size: 1.15rem; text-align: center; line-height: 1.4; }
#tow-title { color: #ff8a6a; }
.lore { font-family: "Courier New", monospace; font-size: 1.1rem; line-height: 1.45; white-space: pre-wrap; min-height: 6em; }
.notes button { display: block; width: 100%; min-height: 48px; margin-bottom: 6px; text-align: left; padding: 6px 14px; border-radius: 10px; border: 2px solid #9a8ab8; background: #2a2238; font-size: 1rem; }
.notes button[disabled] { opacity: 0.5; }

/* ---------- shop cards ---------- */
.shophead { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.shophead h2 { margin: 0; flex: 1; text-align: left; }
.cashline { display: flex; align-items: center; gap: 6px; font-size: 1.5rem; font-family: var(--heavy); font-weight: 900; color: var(--gold); }
.close { min-height: 52px; padding: 4px 18px; border-radius: 12px; border: 3px solid #9a8ab8; background: #2a2238; font-size: 1.1rem; }
#shop-body h3 { margin: 6px 0 6px; font-size: 1rem; color: #b8a8d8; letter-spacing: 0.12em; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5em, 1fr)); gap: 10px; }
.card { position: relative; display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: #1e1830; border: 3px solid #3a3050; }
.card .ic { width: 56px; height: 56px; }
.card .info { flex: 1; min-width: 0; }
.card .name { font-size: 1.05rem; }
.card .stat { font-size: 1rem; color: #cfe8ff; font-weight: 600; }
.card .stat b { color: var(--green); }
.card .desc { font-size: 1rem; color: #b8a8d8; font-weight: 600; }
.card .buy { min-width: 96px; min-height: 52px; border-radius: 12px; border: 3px solid #d8ffe0; background: linear-gradient(#6aff8a, #18a840); color: #052a10; font-size: 1.15rem; font-family: var(--heavy); font-weight: 900; box-shadow: 0 4px 0 #0a4a1a; }
.card.cant .buy { border-color: #ffc0b8; background: linear-gradient(#ff8a7a, #b82020); color: #fff; box-shadow: 0 4px 0 #4a0a0a; }
.card.max .buy { background: #3a3050; border-color: #6a6080; color: #b8a8d8; box-shadow: none; }
.card.can { border-color: var(--green); }
.card .newdot { top: -10px; left: -8px; right: auto; }
.card.flash { animation: cardflash 0.5s ease-out; }

#fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 30; transition: opacity 0.25s ease; }
#fade.on { opacity: 1; }

/* rotate overlay (same approach as Boom Ridge v5.3.1) */
#rotate-overlay { display: none; position: fixed; inset: 0; z-index: 40; background: rgba(10, 3, 14, 0.97); color: #ffe7c4; align-items: center; justify-content: center; text-align: center; padding: 24px; }
#rotate-overlay strong { display: block; font: 900 30px/1.15 var(--heavy); }
#rotate-overlay p { margin: 8px 0 0; font-size: 18px; }
#rotate-overlay .rotate-inner { max-width: 340px; }
.rotate-phone { width: 60px; height: 100px; margin: 0 auto 22px; border: 6px solid #ffe7c4; border-radius: 12px; animation: spinphone 1.8s ease-in-out infinite; }
@keyframes spinphone { 0%, 30% { transform: rotate(0deg); } 55%, 100% { transform: rotate(90deg); } }
#rotate-land { display: block; margin: 24px auto 0; min-width: 240px; min-height: 60px; font: 900 22px/1.1 var(--heavy); letter-spacing: 0.04em; white-space: nowrap;
  background: linear-gradient(#ffd45a, #f08a00); color: #2a0c08; border: 2px solid #ffe7c4; border-radius: 14px; touch-action: manipulation; }
#rotate-land[hidden] { display: none; }
#rotate-overlay .rotate-tip { display: block; margin: 20px auto 0; font-size: 17px; line-height: 1.35; opacity: 0.95; }
@media (orientation: portrait) { #rotate-overlay { display: flex; } }

@keyframes blink { 50% { opacity: 0.35; } }
@keyframes warn { 50% { background: rgba(255, 40, 20, 0.95); } }
@keyframes pop { 0% { transform: scale(1.5); color: #fff; } 100% { transform: scale(1); } }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 20% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }
@keyframes bob { 50% { margin-bottom: 4px; } }
@keyframes logo { 50% { transform: translateY(-4px) rotate(-1deg); } }
@keyframes cardflash { 0% { background: #6aff8a; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01s !important; } .rotate-phone { animation: none; transform: rotate(90deg); } }
/* short landscape phones */
@media (max-height: 420px) {
  html { font-size: 17px; } html.big { font-size: 19px; }
  .gauge { height: 26px; } .gauge .ic { width: 24px; height: 24px; } .gauge .bar { height: 18px; width: 7.5em; }
  #s-title .logo { font-size: 3.4rem; }
  .menu { gap: 6px; } .menu button { min-height: 48px; }
  h2 { font-size: 1.5rem; margin-bottom: 6px; }
  .pad { width: 76px; height: 76px; } .cluster.right .pad { width: 86px; height: 68px; } .cluster { gap: 10px; }
  .scroll { max-height: calc(100dvh - 130px); }
  #coach { top: 54px; width: min(440px, 52vw); padding: 6px 12px 8px; } #coach p { font-size: 1.05rem; margin: 2px 0 6px; }
  #warn strong { font-size: 1.7rem; }
  #banner strong { font-size: 2rem; }
}

/* money: the pixel font draws $ like an S, so cash uses a heavy system font */
#cash b, .total, .cashline b, .card .buy, #tally .v { font-family: "Arial Black", "Segoe UI Black", system-ui, sans-serif !important; font-weight: 900 !important; letter-spacing: 0; }
#s-title::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 45%, rgba(6,4,12,0.72), rgba(6,4,12,0) 75%); z-index: -1; }
.card .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .lv { color: #ffd23f; font-size: 1rem; }
.card .lv b { color: var(--green); }
.card.pulse { animation: pulse 0.9s ease-in-out infinite; border-color: #8ee2ff; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(142, 226, 255, 0.7); } }
.card .buy[disabled] { cursor: default; }
.card .lv { display: block; white-space: nowrap; }

.screen.panel { padding: calc(max(8px, 3vh) + 12px) calc(max(10px, 4vw) + 14px); }
#coach { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 14px; }
#coach .step { flex-basis: 100%; }
#coach p { flex: 1 1 14em; }
#coach[hidden] { display: none; }
@media (max-height: 420px) {
  #coach { top: 118px; width: min(560px, 66vw); }
  #coach p { margin: 0; }
  .screen.panel { padding: calc(max(8px, 3vh) + 8px) calc(max(10px, 4vw) + 10px); }
}
[hidden] { display: none !important; }

#coach { flex-wrap: nowrap; text-align: left; gap: 12px; padding: 8px 10px 8px 16px; }
#coach .txt { flex: 1; min-width: 0; }
#coach p { margin: 2px 0 0; }
#coach-skip { flex: none; }
@media (max-height: 420px) {
  #coach { top: 112px; width: min(520px, 62vw); padding: 4px 8px 4px 12px; }
  #coach p { font-size: 1rem; line-height: 1.25; }
  #action { min-height: 56px; min-width: 120px; font-size: 1.1rem; bottom: 30vh; }
  .card .desc { display: none; }
  .card .ic { width: 40px; height: 40px; }
  .card { padding: 6px 8px; gap: 8px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); gap: 8px; }
  .card .buy { min-width: 84px; }
  #gauges { gap: 3px; padding: 4px 8px 4px 4px; }
}
@media (max-height: 380px) { .gauge { height: 24px; } .gauge .ic { width: 22px; height: 22px; } #coach { top: 100px; } }
/* contextual action button sits right above the FLY button, clear of the rig */
body.touch #action { right: max(14px, env(safe-area-inset-right)); bottom: calc(max(14px, env(safe-area-inset-bottom)) + 178px); min-width: 92px; }
@media (max-height: 420px) {
  body.touch #action { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 160px); min-height: 52px; padding: 4px 12px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); }
}
/* phones: tutorial card sits low, between the thumb pads, so it never covers the pod; TURN BACK stays up top */
@media (max-height: 420px) {
  body.touch #coach { top: auto; bottom: 72px; left: 196px; right: 118px; width: auto; transform: none; }
  body.touch.coaching #warn { top: 62px; bottom: auto; left: 276px; transform: none; }
}

/* ================= Stage 2 ================= */
body[data-screen="records"] #s-records, body[data-screen="map"] #s-map, body[data-screen="perk"] #s-perk, body[data-screen="controls"] #s-controls { display: flex; }
body[data-screen="perk"] #hud, body[data-screen="map"] #hud { display: block; }
body[data-screen="perk"] #hud > :not(#achpop), body[data-screen="map"] #hud > :not(#achpop) { visibility: hidden; }
/* menus: two buttons per row so everything fits on a short phone */
.menu .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.menu .pair button { padding: 6px 10px; white-space: nowrap; }
#s-title .menu { min-width: 340px; }
#s-pause .menu { width: min(560px, 100%); }
/* HUD: day pill (top centre), contract chip (under gauges), minimap (under cash) */
#day { position: absolute; left: 50%; transform: translateX(-50%); top: max(8px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 6px; height: 44px; padding: 2px 14px 2px 6px;
  background: rgba(8, 6, 14, 0.62); border: 2px solid rgba(255, 255, 255, 0.16); border-radius: 12px; }
#day .ic { width: 28px; height: 28px; } #day b { font-family: var(--heavy); font-weight: 900; font-size: 1.05rem; text-shadow: 0 2px 0 #000; white-space: nowrap; }
#contract-chip { position: absolute; left: max(10px, env(safe-area-inset-left)); top: calc(max(8px, env(safe-area-inset-top)) + 112px); display: flex; align-items: center; gap: 6px; max-width: 46vw;
  background: rgba(30, 20, 6, 0.78); border: 2px solid #f0a202; border-radius: 12px; padding: 3px 10px 3px 4px; min-height: 36px; }
#contract-chip .ic { width: 26px; height: 26px; }
#contract-chip .cbar { width: 44px; height: 12px; border-radius: 4px; background: #241a2e; border: 2px solid #000; overflow: hidden; position: relative; flex: none; }
#contract-chip .cbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#ffe066, #f08a00); }
#contract-chip b { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 0 #000; }
#minimap-btn { position: absolute; right: max(10px, env(safe-area-inset-right)); top: calc(max(8px, env(safe-area-inset-top)) + 58px); pointer-events: auto; padding: 0; width: 124px; height: 84px;
  border: 2px solid rgba(255, 255, 255, 0.45); border-radius: 10px; background: #000; overflow: hidden; }
#minimap { width: 120px; height: 80px; display: block; image-rendering: pixelated; }
#achpop { position: absolute; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 54px); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 8px;
  background: rgba(40, 28, 4, 0.94); border: 3px solid var(--gold); border-radius: 14px; z-index: 20; min-width: 260px; max-width: 70vw; }
#achpop.in { animation: slidein 0.25s ease-out; }
#achpop .ic { width: 40px; height: 40px; } #achpop small { display: block; font-size: 1rem; color: var(--gold); letter-spacing: 0.1em; }
#achpop strong { display: block; font-family: var(--heavy); font-weight: 900; font-size: 1.1rem; } #achpop span { font-size: 1rem; font-weight: 600; }
/* shop extras */
#shop-body .h3note { letter-spacing: 0; font-weight: 600; color: #8f82a8; margin-left: 6px; }
.card.contract { border-color: #f0a202; background: #2a2010; }
.card.contract.active { border-color: var(--gold); }
.card .buy.quit { background: linear-gradient(#4a4060, #2a2238); color: var(--ink); border-color: #9a8ab8; box-shadow: 0 4px 0 #120c1c; }
/* records */
.tabs { display: flex; gap: 10px; justify-content: center; margin-bottom: 8px; }
.tabs button { min-height: 52px; padding: 6px 22px; border-radius: 14px; border: 3px solid #9a8ab8; background: #2a2238; font-family: var(--heavy); font-weight: 900; font-size: 1.1rem; }
.tabs button.on { background: linear-gradient(#ffd45a, #f08a00); color: #2a1400; border-color: #fff3c4; }
p.sub { margin: 0 0 8px; text-align: center; font-size: 1rem; opacity: 0.9; }
.achs, .codex { display: grid; grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); gap: 8px; }
.ach, .ore { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 12px; background: #1e1830; border: 2px solid #3a3050; opacity: 0.6; }
.ach.got, .ore.got { opacity: 1; border-color: var(--gold); }
.ach .ic, .ore .ic { width: 40px; height: 40px; } .ore .ic.unknown { filter: brightness(0) invert(0.35); }
.ach b, .ore b { display: block; font-size: 1.05rem; } .ach span, .ore span { display: block; font-size: 1rem; font-weight: 600; color: #cfc2e6; }
.ore em { font-style: normal; color: var(--gold); margin-left: 6px; } .ore .mk { color: #8ee2ff; }
/* map */
.mapwrap { display: flex; justify-content: center; }
.mapinner { position: relative; padding-left: 0; padding-right: 150px; }
#fullmap { display: block; image-rendering: pixelated; border: 2px solid #9a8ab8; }
#ruler { position: absolute; top: 0; right: 0; width: 146px; height: 100%; }
#ruler div { position: absolute; left: 0; right: 0; border-top: 2px solid #ffffff66; font-size: 1rem; line-height: 1.1; padding: 1px 0 0 6px; white-space: nowrap; }
#ruler div.layer { border-top-color: var(--gold); color: var(--gold); font-family: var(--heavy); font-weight: 900; }
#ruler div.you { border-top: 3px solid #ff3b30; color: #ff8a80; }
/* specialty choice */
#perk-choices { gap: 14px; }
.perkbtn { flex: 1 1 14em; max-width: 22em; min-height: 120px; padding: 12px 16px; border-radius: 16px; border: 3px solid #fff3c4; background: linear-gradient(#4a4060, #2a2238); text-align: center; box-shadow: 0 4px 0 #120c1c; }
.perkbtn b { display: block; font-family: var(--heavy); font-weight: 900; font-size: 1.25rem; color: var(--gold); margin-bottom: 4px; }
.perkbtn span { display: block; font-size: 1rem; font-weight: 600; line-height: 1.3; } .perkbtn em { display: block; font-style: normal; margin-top: 6px; color: var(--green); font-size: 1rem; }
.perkbtn.cur { opacity: 0.7; } .perkbtn:not([disabled]):active { transform: translateY(3px); box-shadow: none; }
#controls-list button.wait { border-color: var(--gold); background: #4a3a10; }
#s-settings .toggles, #s-controls .toggles { max-height: calc(100dvh - 190px); }
/* REDUCE FLASHING: no blinking, pulsing or zooming UI */
body.calm #warn, body.calm .gauge.low .bar i, body.calm .card.pulse, body.calm #action, body.calm #banner, body.calm .rotate-phone, body.calm #cash.pop b, body.calm .card.flash, body.calm #achpop.in { animation: none !important; }
body.calm #banner { opacity: 1; transform: translate(-50%, -50%); }
@media (max-height: 420px) {
  #s-title .menu { min-width: 320px; }
  #day { height: 40px; } #day .ic { width: 24px; height: 24px; }
  #contract-chip { top: calc(max(8px, env(safe-area-inset-top)) + 94px); min-height: 32px; }
  #minimap-btn { top: calc(max(8px, env(safe-area-inset-top)) + 56px); width: 100px; height: 68px; } #minimap { width: 96px; height: 64px; }
  #achpop { top: 52px; } #achpop .ic { width: 32px; height: 32px; }
  .perkbtn { min-height: 96px; padding: 8px 12px; }
  #s-settings .toggles, #s-controls .toggles { max-height: calc(100dvh - 150px); }
}
#shop-body p.locked { grid-column: 1 / -1; margin: 0; padding: 8px 12px; font-size: 1rem; font-weight: 600; color: #b8a8d8; border: 2px dashed #3a3050; border-radius: 12px; }
#ruler div.you.low { border-top-color: #ff3b30; padding-top: 22px; color: #ff8a80; }
/* Stage 2: narrow phones (667 wide) — day pill sits left of the minimap, contract chip drops its bar */
.card.contract { grid-column: 1 / -1; }
@media (max-width: 760px) {
  #day { left: auto; transform: none; right: calc(max(10px, env(safe-area-inset-right)) + 110px); top: calc(max(8px, env(safe-area-inset-top)) + 58px); }
  #contract-chip { max-width: 58vw; } #contract-chip .cbar { display: none; }
}
#perk-choices .perkbtn { background: linear-gradient(#4a4060, #2a2238); color: #fff8e6; border-color: #ffd23f; }
#perk-choices .perkbtn b { color: var(--gold); }

/* ================= Stage 2.1: decluttered HUD ================= */
/* top right: one strip (cash | depth | day) + pause; under it a small contract chip + the map button */
#topright { flex-direction: column; align-items: flex-end; gap: 6px; }
#topright .hrow { display: flex; align-items: center; gap: 8px; }
#strip { display: flex; align-items: center; height: 48px; background: rgba(8, 6, 14, 0.62); border: 2px solid rgba(255, 255, 255, 0.16); border-radius: 12px; padding: 0 2px; }
#strip > div { position: static; transform: none; display: flex; align-items: center; gap: 5px; height: 100%; padding: 0 10px; background: none; border: 0; border-radius: 0; }
#strip > div + div { border-left: 2px solid rgba(255, 255, 255, 0.16); }
#strip #day { left: auto; right: auto; top: auto; }
#strip #day b { font-size: 1rem; color: #d8ccf0; }
#contract-chip { position: static; max-width: none; min-height: 0; height: 40px; padding: 0 10px 0 4px; gap: 4px; }
#contract-chip .ic { width: 24px; height: 24px; }
#contract-chip b { font-size: 1rem; }
#minimap-btn { position: static; width: 100px; height: 68px; padding: 0; display: flex; align-items: center; justify-content: center; }
#minimap { width: 96px; height: 64px; }
#minimap-btn .mapic { display: none; width: 32px; height: 32px; }
#achpop > div { display: flex; flex-direction: column; min-width: 0; white-space: nowrap; }
#achpop > div > * { display: block; }
#tally { top: 140px; }
.cinfo { margin: 0 0 8px; font-size: 1rem; font-weight: 600; color: #ffe8a0; text-align: center; max-width: 34em; }
/* the Auto-Miner button is small: it is a bonus, not the main action */
body #action.mini, body.touch #action.mini { min-height: 48px; min-width: 0; padding: 2px 12px; font-size: 1rem; border-width: 2px; }
body #action.mini .ic { width: 24px; height: 24px; }
body #action.mini b { font-size: 1rem; }
/* phones and tablets with touch: map is a 52px button, gauges and strip are slimmer */
body.touch #minimap-btn { width: 52px; height: 52px; }
body.touch #minimap { display: none; }
body.touch #minimap-btn .mapic { display: block; }
body.touch #tally { top: 122px; }
@media (max-height: 500px) {
  .gauge { height: 24px; } .gauge .ic { width: 22px; height: 22px; }
  .gauge .bar { width: 7em; max-width: 17vw; height: 16px; }
  .gauge .val { min-width: 3.1em; }
  #gauges { gap: 2px; padding: 4px 8px 4px 4px; }
  #strip > div { padding: 0 8px; gap: 4px; }
  #cash .ic, #depth .ic { width: 24px; height: 24px; }
  #cash b { font-size: 1.1rem; } #depth b { font-size: 1.05rem; }
  #contract-chip { height: 36px; }
  /* messages go where nothing else is: under the gauges (warnings) and low in the middle (achievements) */
  body.touch #warn, body.touch.coaching #warn { left: max(10px, env(safe-area-inset-left)); right: auto; top: 96px; bottom: auto; transform: none; padding: 4px 14px; }
  body.touch #warn strong { font-size: 1.5rem; }
  body.touch #achpop { top: auto; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 70px); }
  body.touch.coaching #achpop { top: 96px; bottom: auto; left: max(10px, env(safe-area-inset-left)); transform: none; }
}
body.calm #achpop.in { animation: none !important; }
/* Stage 2.1: iOS Safari zoom-proofing */
html, body { height: 100%; height: 100dvh; width: 100%; position: fixed; inset: 0; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
button, canvas, #touch, #touch *, #hud, #action { touch-action: none; }
.screen button, #coach button { touch-action: manipulation; }
input, select, textarea { font-size: max(16px, 1rem) !important; -webkit-user-select: text; user-select: text; }
/* Stage 2.1: achievement pop-up sits low in the middle (clear of TURN BACK, the rig and the day note); on short screens it drops the label line */
body:not(.touch) #achpop { top: auto; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 96px); }
@media (max-height: 500px) {
  #achpop small { display: none; } #achpop { padding: 4px 14px 4px 8px; }
  body.touch:not(.coaching) #achpop { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 66px); }
}
/* Stage 3: game controller focus ring (menus) + hide the on-screen buttons while a controller is in use */
.padfocus { outline: 4px solid #ffd23f !important; outline-offset: 3px; box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.55), 0 0 18px 6px rgba(255, 210, 63, 0.55) !important; }
body.pad #touch { display: none !important; }
#toast { position: fixed; z-index: 35; pointer-events: none; }
body:not([data-screen="play"]) #toast { bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 6px); }
/* ---- 6.1 polish ---- */
/* desktop: depth / layer banners sit below the rig while the tutorial card is at the top (they used to overlap the card) */
body.coaching:not(.touch) #banner { top: 66%; }
/* controller focus: scrolled-to cards and buttons keep a little room so the gold ring and the card text are never cut off */
.card, .scroll button { scroll-margin: 14px; }
/* ---- 6.2 polish ---- */
/* phones: a slimmer tutorial card (text stays 16px+) so more of the town shows above it */
@media (max-height: 420px) {
  body.touch #coach { bottom: 70px; padding: 2px 4px 2px 12px; gap: 8px; border-width: 2px; border-radius: 12px; }
  body.touch #coach .step { font-size: 16px; line-height: 1.1; }
  body.touch #coach p { font-size: 16px; line-height: 1.15; margin: 1px 0 0; }
  body.touch #coach-skip { min-height: 48px; min-width: 64px; padding: 0 10px; font-size: 16px; }
}
/* phones in landscape: title is two tidy columns — logo, tagline and save note on the left, the menu on the right, the version line along the bottom */
@media (max-height: 500px) and (orientation: landscape) {
  body[data-screen="title"] #s-title { height: auto; inset: 0; display: grid; grid-template-columns: auto auto; grid-template-areas: "logo menu" "tag menu" "save menu" "foot foot";
    grid-template-rows: auto auto auto auto; align-content: center; justify-content: center; align-items: center; column-gap: clamp(20px, 5vw, 56px); row-gap: 6px; }
  #s-title .logo { grid-area: logo; align-self: end; font-size: clamp(2.6rem, 15vh, 3.6rem); }
  #s-title .tag { grid-area: tag; align-self: start; max-width: 11em; margin: 4px auto 0; line-height: 1.25; }
  #s-title #save-note { grid-area: save; align-self: start; max-width: 13em; margin: 0 auto; line-height: 1.25; }
  #s-title .foot.small { grid-area: foot; margin-top: 8px; }
  #s-title .menu { grid-area: menu; min-width: min(320px, 52vw); }
  #s-title .menu button { min-height: 48px; }
}
@media (max-height: 340px) and (orientation: landscape) { #s-title .menu { gap: 5px; } #s-title .menu button { min-height: 48px; padding-top: 0; padding-bottom: 0; } #s-title .foot.small { margin-top: 2px; } }
/* achievements: on phones the pop-up sits under the gauges (it used to land on the bigger 6.1 rig in town); a TURN BACK warning pushes it lower */
@media (max-height: 500px) {
  body.touch #achpop, body.touch:not(.coaching) #achpop, body.touch.coaching #achpop { top: calc(max(8px, env(safe-area-inset-top)) + 92px); bottom: auto; left: max(10px, env(safe-area-inset-left)); right: auto; transform: none; }
  body.touch:has(#warn:not([hidden])) #achpop { top: calc(max(8px, env(safe-area-inset-top)) + 168px); }
}
/* desktop: when a SHOP / COLLECT / BLACK BOX button is showing, the pop-up moves above it instead of covering it */
body:not(.touch):has(#action:not([hidden])) #achpop { bottom: calc(18% + 80px); }
/* map: the depth labels on the right wrap instead of being cut off on small screens */
#ruler div.layer { white-space: normal; overflow-wrap: anywhere; }
/* lore and notes: the untyped part of the text holds its place, so nothing jumps while it types */
#lore-text .untyped { visibility: hidden; }
/* short landscape phones: long lore (black box, final entry) sits in two columns so it fits without scrolling */
@media (max-height: 500px) and (min-width: 560px) {
  #lore-text .lore-cols { column-count: 2; column-gap: 36px; column-rule: 2px solid rgba(255, 255, 255, 0.12); }
  #s-lore h2 { margin-bottom: 4px; }
  .lore { font-size: max(16px, 1rem); line-height: 1.3; min-height: 0; }
}

/* ---------------- 6.3: TOWN & RIG screen ---------------- */
.townview { position: relative; margin-bottom: 4px; }
#town-cv { display: block; width: 100%; height: clamp(110px, 30vh, 240px); border-radius: 12px; border: 3px solid #3a3050; image-rendering: pixelated; background: #1b3358; }
.townlabel { font-size: 1rem; font-weight: 700; color: #e8dcff; margin-top: 4px; text-align: center; }
.townlabel b { color: #ffd23f; }
.card .pnum { flex: none; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #3a3050; color: #ffd23f; font-family: var(--heavy); font-weight: 900; font-size: 1.3rem; }
.card.done .pnum { background: #18a840; color: #fff; }
.card.later { opacity: 0.72; }
.card .lockp { min-width: 96px; text-align: center; font-family: var(--heavy); font-weight: 900; font-size: 1.05rem; color: #b8a8d8; display: flex; flex-direction: column; }
.card .lockp small { font-family: inherit; font-weight: 700; font-size: 1rem; }
.card canvas.rigic { flex: none; width: 56px; height: 56px; image-rendering: pixelated; }
.card.inuse { border-color: #ffd23f; }
.card .sw { display: inline-block; width: 16px; height: 16px; border-radius: 50%; vertical-align: -2px; border: 2px solid #fff; font-style: normal; }
.towncard { border-color: #ffd23f; }
/* ---------------- 6.3: end-of-loop summary card ---------------- */
#s-summary { justify-content: center; }
#s-summary > * { max-width: 860px; width: 100%; }
#s-summary h2 { color: #ffd23f; }
.sumgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 6px 0 10px; }
.sumtile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #1e1830; border: 3px solid #3a3050; min-width: 0; }
.sumtile .ic { flex: none; width: 44px; height: 44px; }
.sumtile .k { font-size: 1rem; font-weight: 700; color: #b8a8d8; white-space: nowrap; }
.sumtile .v { font-size: 1.35rem; font-family: var(--heavy); font-weight: 900; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sumline { font-size: 1.1rem; font-weight: 700; color: #ffe9b8; text-align: center; margin: 0 0 10px; line-height: 1.35; }
#sum-ok { align-self: center; width: auto; min-width: 260px; min-height: 56px; padding: 6px 26px; border-radius: 14px; border: 3px solid #fff3c4; background: linear-gradient(#ffd45a, #f08a00); color: #2a1400; font-size: 1.2rem; font-family: var(--heavy); font-weight: 900; box-shadow: 0 4px 0 #6a3a00; }
#sum-ok:focus-visible { outline: 4px solid #8ee2ff; outline-offset: 3px; }
@media (max-width: 760px) { .sumgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-height: 500px) {
  #town-cv { height: clamp(90px, 28vh, 130px); }
  #s-summary h2 { margin: 0 0 2px; }
  #s-summary p.sub { margin-bottom: 4px; }
  .sumgrid { grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 2px 0 6px; }
  .sumtile { padding: 4px 8px; gap: 6px; border-width: 2px; }
  .sumtile .ic { width: 30px; height: 30px; }
  .sumtile .v { font-size: 1.1rem; }
  .sumline { font-size: 1rem; margin-bottom: 6px; line-height: 1.25; }
  #sum-ok { min-height: 50px; }
}
@media (max-height: 360px) { #s-summary p.sub { display: none; } .sumtile .ic { display: none; } }
body[data-screen="town"] #s-town, body[data-screen="summary"] #s-summary { display: flex; }
#town-body h3 { margin: 8px 0 6px; font-size: 1rem; color: #b8a8d8; letter-spacing: 0.12em; }
#town-body .h3note { letter-spacing: 0; font-weight: 600; color: #8f82a8; margin-left: 6px; }
.card.proj .name, .card.paintc .name { white-space: normal; overflow: visible; }
@media (max-height: 500px) and (max-width: 760px) { .sumtile .ic { display: none; } .sumtile { padding: 4px 8px; } }