/* ─────────────────────────────────────────────────────────────
   DEAD HARVEST — comic-ink UI
   ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --ink: #0d0b09;
  --ink2: #1c1814;
  --paper: #ece2cc;
  --paper2: #d9cdb2;
  --tape: #e8b923;
  --blood: #c2321e;
  --pumpkin: #ff7a1a;
  --toxic: #8cff4a;
  --cyan: #5ad0ff;
  --violet: #c06aff;
  --hull: #e0402a;
  --fuel: #ff9a2a;
  --nitro: #4aa0ff;
  --xp: #ffc83a;
  --head: 'Anton', 'Impact', 'Arial Narrow Bold', sans-serif;
  --logo: 'Anton', 'Impact', sans-serif;
  /* light speckle wear for the logo (subtle: it must stay readable) */
  --wear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.22' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -9 6.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --mono: 'Courier Prime', 'Special Elite', 'Courier New', monospace;
  --type: 'Special Elite', 'Courier Prime', 'Courier New', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0a0807; overflow: hidden; overscroll-behavior: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; color: var(--paper); font-family: var(--mono); user-select: none; -webkit-user-select: none; }
#app { position: fixed; inset: 0; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ui-root { position: absolute; inset: 0; pointer-events: none; }
#ui-root .screen { position: absolute; inset: 0; display: none; }
#ui-root .screen.on { display: block; }
#ui-root button, #ui-root .clickable, #ui-root .card, #ui-root input { pointer-events: auto; }

/* ── loading ─────────────────────────────────────────────── */
.loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; background: radial-gradient(ellipse at center, #2a1810 0%, #0a0807 70%); z-index: 10; transition: opacity .6s; }
.loading.done { opacity: 0; pointer-events: none; }
.loading-title { font-family: var(--logo); font-size: clamp(36px, 7vw, 84px); color: var(--pumpkin); text-shadow: 4px 4px 0 var(--ink), 0 0 30px rgba(255,122,26,.4); letter-spacing: 2px; text-align: center; }
.loading-bar { width: min(420px, 80vw); height: 14px; border: 3px solid var(--paper); background: var(--ink); transform: skew(-12deg); }
.loading-fill { height: 100%; width: 0; background: repeating-linear-gradient(45deg, var(--tape) 0 10px, #c89a10 10px 20px); transition: width .25s; }
.loading-text { font-family: var(--type); color: var(--paper2); letter-spacing: 2px; }

/* ── shared bits ─────────────────────────────────────────── */
.btn {
  font-family: var(--head); font-size: 26px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: 3px solid var(--ink);
  padding: 10px 26px; cursor: pointer; position: relative;
  box-shadow: 5px 5px 0 var(--ink); transform: rotate(-.6deg);
  transition: transform .08s, box-shadow .08s, background .15s;
}
@media (hover: hover) { .btn:hover { background: var(--tape); transform: rotate(0) translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink); } .btn.primary:hover { background: var(--tape); } }
.btn:active { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--ink); }
.btn.primary { background: var(--pumpkin); }
.btn.small { font-size: 18px; padding: 6px 16px; box-shadow: 3px 3px 0 var(--ink); }
.btn[disabled] { opacity: .45; pointer-events: none; }

.tape {
  display: inline-block; font-family: var(--head); color: var(--ink); background: var(--tape);
  padding: 6px 28px 4px; font-size: 34px; letter-spacing: 1px; transform: rotate(-1.5deg);
  clip-path: polygon(1% 8%, 99% 0, 100% 88%, 97% 100%, 2% 94%, 0 20%);
  text-shadow: none;
}
.paper {
  background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 8px 8px 0 rgba(0,0,0,.6);
  background-image: radial-gradient(rgba(0,0,0,.07) 1px, transparent 1.3px); background-size: 6px 6px;
}
.mono { font-family: var(--mono); }
.kbd { display: inline-block; border: 2px solid currentColor; padding: 0 6px; margin: 0 2px; font-family: var(--mono); font-weight: 700; border-radius: 3px; font-size: .9em; }

/* ── title ───────────────────────────────────────────────── */
.title { background: linear-gradient(90deg, rgba(8,6,5,.88) 0%, rgba(8,6,5,.55) 38%, rgba(0,0,0,0) 65%); }
.title-wrap { position: absolute; left: clamp(20px, 6vw, 90px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 14px; }
@media (max-height: 760px) { .title-wrap { transform: translateY(-50%) scale(.84); transform-origin: left center; } }
@media (max-height: 640px) { .title-wrap { transform: translateY(-50%) scale(.72); transform-origin: left center; } }
.logo { line-height: .9; transform: rotate(-3deg); margin-bottom: 18px; -webkit-mask-image: var(--wear); mask-image: var(--wear); }
.logo .l1, .logo .l2 { display: block; font-family: var(--logo); font-size: clamp(54px, 9.5vw, 124px); letter-spacing: 3px; text-transform: uppercase; }
/* outline built from shadows (keeps the letter shapes open), then a chunky drop shadow */
.logo .l1 { color: var(--paper); text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 7px 7px 0 var(--ink); }
.logo .l2 { color: var(--pumpkin); margin-left: 6px; text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 7px 7px 0 var(--ink), 0 0 40px rgba(255,122,26,.45); }
.tagline { font-family: var(--type); color: var(--paper2); font-size: 18px; letter-spacing: 1px; margin: -6px 0 16px 4px; }
.menu-buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.menu-buttons .btn { min-width: 260px; text-align: left; }
.menu-foot { position: absolute; right: 30px; top: 22px; text-align: right; font-family: var(--mono); color: var(--paper2); font-size: 14px; letter-spacing: 1px; opacity: .85; }
.menu-foot b { color: var(--tape); }
.menu-car { position: absolute; right: 30px; bottom: 26px; text-align: right; font-family: var(--head); font-size: 22px; letter-spacing: 1px; color: var(--paper); text-shadow: 3px 3px 0 var(--ink); }
.menu-car small { display: block; font-family: var(--mono); font-size: 13px; color: var(--paper2); }

/* ── HUD ─────────────────────────────────────────────────── */
.hud { font-family: var(--head); }
.hud-tl { position: absolute; left: 18px; top: 16px; width: min(330px, 46vw); }
.hud-name { font-size: 20px; letter-spacing: 1px; color: var(--paper); text-shadow: 2px 2px 0 var(--ink); margin-bottom: 6px; }
.bar { position: relative; height: 18px; margin-bottom: 7px; background: rgba(10,8,7,.75); border: 2px solid var(--ink); transform: skew(-14deg); box-shadow: 3px 3px 0 rgba(0,0,0,.5); overflow: hidden; }
.bar .fill { position: absolute; inset: 0; transform-origin: left; transition: transform .12s; }
.bar .ghost { position: absolute; inset: 0; transform-origin: left; background: rgba(255,255,255,.55); transition: transform .6s .2s; }
.bar .lbl { position: absolute; left: 8px; top: 0; font-size: 13px; line-height: 15px; letter-spacing: 1.5px; color: #fff; text-shadow: 1px 1px 0 var(--ink); transform: skew(14deg); }
.bar .val { position: absolute; right: 8px; top: 0; font-family: var(--mono); font-weight: 700; font-size: 12px; line-height: 15px; color: #fff; text-shadow: 1px 1px 0 var(--ink); transform: skew(14deg); }
.bar.hull .fill { background: linear-gradient(180deg, #ff6a4a, var(--hull) 60%, #8a1a10); }
.bar.fuel .fill { background: linear-gradient(180deg, #ffc060, var(--fuel) 60%, #a05010); }
.bar.nitro .fill { background: linear-gradient(180deg, #8ac8ff, var(--nitro) 60%, #1a4aa0); }
.bar.warn { animation: warn .5s infinite alternate; }
@keyframes warn { to { box-shadow: 0 0 14px 3px rgba(255,60,30,.9); } }

.hud-tc { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); text-align: center; }
.hud-clock { font-size: 40px; letter-spacing: 2px; color: var(--paper); text-shadow: 3px 3px 0 var(--ink); line-height: 1; }
.hud-dawn { font-family: var(--mono); font-size: 13px; letter-spacing: 2px; color: var(--paper2); text-shadow: 1px 1px 0 var(--ink); }
.skybar { width: 220px; height: 8px; margin: 6px auto 0; border: 2px solid var(--ink); background: linear-gradient(90deg, #ff9a40, #6a3a6a 30%, #1a2050 50%, #1a2050 80%, #ff9a8a 95%, #ffd890); position: relative; }
.skybar .dot { position: absolute; top: -5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }

.hud-tr { position: absolute; right: 18px; top: 16px; text-align: right; }
.stat { font-size: 30px; line-height: 1.05; color: var(--paper); text-shadow: 3px 3px 0 var(--ink); }
.stat small { font-family: var(--mono); font-size: 13px; color: var(--paper2); letter-spacing: 2px; margin-right: 6px; }
.stat.scrap { color: var(--xp); }

.hud-xp { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: rgba(10,8,7,.8); border-top: 2px solid var(--ink); }
.hud-xp .fill { height: 100%; background: linear-gradient(180deg, #ffe080, var(--xp) 50%, #b07a10); transform-origin: left; transition: transform .15s; box-shadow: 0 0 12px rgba(255,200,58,.5); }
.hud-level { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 18px; letter-spacing: 2px; color: var(--ink); background: var(--xp); padding: 2px 16px 0; border: 2px solid var(--ink); border-bottom: none; }

.hud-weapons { position: absolute; left: 16px; bottom: 26px; display: flex; gap: 8px; flex-wrap: wrap; max-width: 60vw; }
.wslot { width: 58px; height: 58px; background: var(--paper); border: 3px solid var(--ink); box-shadow: 3px 3px 0 rgba(0,0,0,.6); position: relative; transform: rotate(-2deg); }
.wslot:nth-child(even) { transform: rotate(1.5deg); }
.wslot img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(1px 0 0 #0d0b09) drop-shadow(-1px 0 0 #0d0b09) drop-shadow(0 1px 0 #0d0b09) drop-shadow(0 -1px 0 #0d0b09); }
.wslot .rank { position: absolute; right: -6px; bottom: -6px; background: var(--ink); color: var(--tape); font-family: var(--head); font-size: 14px; padding: 1px 6px; border: 2px solid var(--tape); }
.wslot.passive { width: 40px; height: 40px; background: var(--paper2); }
.wslot.passive .rank { font-size: 11px; padding: 0 4px; }

.announce { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -50%) rotate(-2deg); pointer-events: none; text-align: center; }
.announce .tape { font-size: clamp(20px, 3vw, 40px); animation: slam .35s cubic-bezier(.2,1.6,.4,1) both; white-space: nowrap; max-width: 92vw; }
.announce .tape.boss { background: var(--blood); color: var(--paper); }
.announce .out { animation: fadeout .5s forwards; }
@keyframes slam { from { transform: scale(2.4) rotate(-6deg); opacity: 0; } to { transform: scale(1) rotate(-1.5deg); opacity: 1; } }
@keyframes fadeout { to { opacity: 0; transform: translateY(-20px) rotate(-1.5deg); } }

.bossbar { position: absolute; left: 50%; top: 100px; transform: translateX(-50%); width: min(560px, 80vw); display: none; text-align: center; }
.bossbar.on { display: block; }
.bossbar .name { font-size: 22px; letter-spacing: 3px; color: var(--pumpkin); text-shadow: 2px 2px 0 var(--ink); }
.bossbar .bar .fill { background: linear-gradient(180deg, #ffa040, #e0501a 60%, #7a2008); }

.streak { position: absolute; right: 22px; top: 120px; text-align: right; font-size: 40px; color: var(--pumpkin); text-shadow: 3px 3px 0 var(--ink); transition: opacity .3s; opacity: 0; transform: rotate(3deg); }
.streak small { display: block; font-size: 15px; letter-spacing: 3px; color: var(--paper); }
.streak.on { opacity: 1; }

.toasts { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.toast { position: absolute; font-family: var(--head); font-size: 24px; letter-spacing: 1px; text-shadow: 2px 2px 0 var(--ink); animation: toast 1.2s ease-out forwards; white-space: nowrap; transform: translate(-50%, -50%); }
@keyframes toast { 0% { opacity: 0; margin-top: 10px; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -60px; } }

.offarrow { position: absolute; width: 0; height: 0; pointer-events: none; display: none; }
.offarrow.on { display: block; }
.offarrow .tri { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; clip-path: polygon(100% 50%, 0 0, 22% 50%, 0 100%); background: var(--fuel); filter: drop-shadow(0 0 6px rgba(255,140,40,.9)); }
.offarrow .tag { position: absolute; left: -30px; top: 16px; width: 60px; text-align: center; font-family: var(--head); font-size: 13px; letter-spacing: 1px; color: var(--fuel); text-shadow: 1px 1px 0 var(--ink); }

.pause-btn { position: absolute; right: 18px; bottom: 26px; }
.touch-ui { display: none; }


/* ── overlays ────────────────────────────────────────────── */
.overlay { background: rgba(6,5,4,.78); backdrop-filter: blur(2px); }
.center-col { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px; }
.big-title { font-family: var(--head); font-size: clamp(44px, 7vw, 84px); letter-spacing: 3px; color: var(--paper); text-shadow: 5px 5px 0 var(--ink); line-height: 1; transform: rotate(-2deg); text-align: center; }
.big-title.gold { color: var(--tape); }
.big-title.red { color: var(--blood); }
.sub { font-family: var(--mono); letter-spacing: 3px; color: var(--paper2); font-size: 15px; text-align: center; }

/* ── level up cards ──────────────────────────────────────── */
.levelup .center-col { gap: 10px; }
.cards { display: flex; gap: clamp(10px, 2vw, 26px); margin: 18px 0 10px; perspective: 1200px; flex-wrap: wrap; justify-content: center; }
.card { width: clamp(180px, 22vw, 250px); height: clamp(280px, 33vw, 370px); position: relative; cursor: pointer; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.9,.3,1.2); }
.card .face, .card .back { position: absolute; inset: 0; backface-visibility: hidden; border: 4px solid var(--ink); box-shadow: 8px 8px 0 rgba(0,0,0,.65); }
.card .back { background: var(--ink2); transform: rotateY(0deg); display: flex; align-items: center; justify-content: center; background-image: repeating-linear-gradient(45deg, rgba(255,122,26,.12) 0 12px, transparent 12px 24px); }
.card .back::after { content: '☠'; font-size: 90px; color: var(--pumpkin); opacity: .8; text-shadow: 4px 4px 0 #000; }
.card .face { transform: rotateY(180deg); background: var(--paper2); display: flex; flex-direction: column; overflow: visible; }
.card.flipped { transform: rotateY(180deg); }
@media (hover: hover) { .card.flipped:hover { transform: rotateY(180deg) translateY(-10px) scale(1.03); } }
.card .top { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 10px 4px; background: var(--paper2); border-bottom: 3px solid var(--ink); font-family: var(--head); color: var(--ink); font-size: 18px; letter-spacing: 1px; }
.card .top .lv { font-family: var(--mono); font-weight: 700; font-size: 12px; }
.card .art { flex: 1.15; margin: 8px; background: #f6f1e4; border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  background-image: radial-gradient(rgba(0,0,0,.09) 1px, transparent 1.4px); background-size: 5px 5px; }
.card .art img { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(2px 0 0 #0d0b09) drop-shadow(-2px 0 0 #0d0b09) drop-shadow(0 2px 0 #0d0b09) drop-shadow(0 -2px 0 #0d0b09) drop-shadow(5px 5px 0 rgba(0,0,0,.25)); }
.card .new { position: absolute; left: -4px; top: 10px; background: var(--blood); color: var(--paper); font-family: var(--head); font-size: 14px; padding: 2px 10px; letter-spacing: 1px; transform: rotate(-8deg); }
.card .kind { position: absolute; right: 6px; top: 6px; font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 1px; color: #6a6050; }
.card .info { flex: 1; background: var(--ink2); margin: 0 8px 8px; padding: 10px 10px; border: 3px solid var(--ink); }
.card .name { font-family: var(--head); font-size: 21px; letter-spacing: .5px; color: var(--paper); line-height: 1.05; }
.card .desc { font-family: var(--mono); font-size: 12.5px; line-height: 1.35; color: var(--paper2); margin-top: 6px; text-transform: uppercase; }
.card.rare .top { background: #b6d4f2; } .card.epic .top { background: #dcb6f2; }
.card.matched .face { box-shadow: 0 0 0 4px var(--tape), 0 0 30px 6px rgba(232,185,35,.75), 8px 8px 0 rgba(0,0,0,.65); }
.card .bonus { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%) rotate(-3deg); background: var(--tape); color: var(--ink); font-family: var(--head); font-size: 18px; padding: 2px 14px; border: 3px solid var(--ink); display: none; white-space: nowrap; }
.card.matched .bonus { display: block; }
.card .key { position: absolute; left: 50%; top: -34px; z-index: 2; transform: translateX(-50%); font-family: var(--head); color: var(--paper2); font-size: 16px; }
.levelup .rules { font-family: var(--mono); letter-spacing: 2px; color: var(--paper2); font-size: 13px; }
.lu-actions { display: flex; gap: 16px; margin-top: 18px; }

/* ── game over ───────────────────────────────────────────── */
.results { padding: 18px 28px; min-width: min(460px, 90vw); transform: rotate(-1deg); }
.results h3 { margin: 0 0 8px; font-family: var(--head); font-size: 24px; letter-spacing: 1px; }
.results .row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 16px; padding: 4px 0; border-bottom: 2px dashed rgba(0,0,0,.2); }
.results .row b { font-family: var(--head); font-weight: normal; font-size: 20px; }
.results .row.scrap b { color: #a06a00; }
.row-btns { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }

/* ── garage ──────────────────────────────────────────────── */
.garage-head { position: absolute; left: clamp(14px, 4vw, 50px); top: 20px; }
.garage-head .tape { font-size: clamp(32px, 4vw, 52px); padding: 4px 60px 2px; }
.garage-head .sub2 { font-family: var(--mono); font-size: 13px; letter-spacing: 2px; background: var(--paper); color: var(--ink); display: inline-block; padding: 2px 12px; margin-left: 14px; margin-top: 4px; border: 2px solid var(--ink); }
.garage .back { position: absolute; right: 24px; top: 24px; }
.gpanel { position: absolute; left: clamp(14px, 4vw, 50px); top: 120px; width: min(370px, 90vw); max-height: calc(100vh - 260px); overflow-y: auto; padding: 16px 20px; transform: rotate(-.6deg); pointer-events: auto; }
.gpanel h2 { margin: 0; font-family: var(--head); font-weight: normal; font-size: 40px; letter-spacing: 1px; line-height: 1; }
.gpanel .cls { font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: 2px; margin: 6px 0 10px; text-transform: uppercase; }
.gpanel .blurb { font-family: var(--type); font-size: 14px; line-height: 1.35; margin-bottom: 12px; }
.srow { display: grid; grid-template-columns: 82px 1fr; align-items: center; gap: 8px; margin: 5px 0; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 1px; }
.sbar { height: 11px; border: 2px solid var(--ink); background: rgba(0,0,0,.08); }
.sbar i { display: block; height: 100%; background: var(--ink); }
.gpanel .status { font-family: var(--mono); font-weight: 700; letter-spacing: 2px; margin: 12px 0 8px; font-size: 14px; }
.gpanel .status.ok { color: #2a7a2a; } .gpanel .status.locked { color: var(--blood); }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 14px; }
.swatch { width: 34px; height: 34px; border: 3px solid var(--ink); cursor: pointer; pointer-events: auto; position: relative; }
.swatch.sel { outline: 3px solid var(--tape); outline-offset: 2px; }
.swatch.locked::after { content: '🔒'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; background: rgba(0,0,0,.45); }
.carousel { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: center; gap: 12px; padding: 0 14px; overflow-x: auto; }
.cthumb { width: clamp(110px, 13vw, 168px); height: clamp(66px, 7.6vw, 98px); flex: 0 0 auto; border: 3px solid var(--paper2); background: rgba(10,8,7,.75); cursor: pointer; pointer-events: auto; position: relative; transition: transform .1s; }
@media (hover: hover) { .cthumb:hover { transform: translateY(-4px); } }
.cthumb.sel { border-color: var(--tape); box-shadow: 0 0 0 3px var(--ink), 0 0 18px rgba(232,185,35,.5); }
.cthumb img { width: 100%; height: 100%; object-fit: contain; }
.cthumb .nm { position: absolute; left: 6px; bottom: 3px; font-family: var(--head); font-size: 14px; color: var(--paper); text-shadow: 1px 1px 0 var(--ink); }
.cthumb .pr { position: absolute; right: 6px; top: 3px; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--tape); }
.cthumb.equipped::before { content: 'EQUIPPED'; position: absolute; left: 6px; top: 3px; font-family: var(--mono); font-weight: 700; font-size: 10px; color: var(--toxic); }

/* ── how to / settings ───────────────────────────────────── */
.sheet { padding: 22px 28px; max-width: min(720px, 92vw); max-height: 80vh; overflow: auto; transform: rotate(-.5deg); pointer-events: auto; }
.sheet h2 { margin: 0 0 10px; font-family: var(--head); font-weight: normal; font-size: 34px; letter-spacing: 1px; }
.sheet p, .sheet li { font-family: var(--type); font-size: 15px; line-height: 1.45; }
.sheet .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
.sheet .set { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 10px; margin: 10px 0; font-family: var(--mono); font-weight: 700; letter-spacing: 1px; }
.sheet .opts { display: flex; gap: 8px; }
.sheet input[type=range] { width: 100%; accent-color: var(--blood); }
@media (max-width: 640px) { .sheet .grid2 { grid-template-columns: 1fr; } .hud-clock { font-size: 30px; } .stat { font-size: 24px; } }

/* ── objectives / minimap ─────────────────────────────────── */
.obj { margin-top: 12px; padding: 8px 12px 9px; background: rgba(13,11,9,.78); border-left: 4px solid var(--tape); transform: rotate(-.4deg); max-width: 330px; box-shadow: 3px 3px 0 rgba(0,0,0,.5); }
.obj-head { display: flex; justify-content: space-between; font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 2px; color: var(--tape); }
.obj-title { font-family: var(--head); font-size: 20px; letter-spacing: .5px; color: var(--paper); line-height: 1.1; margin-top: 2px; }
.obj-desc { font-family: var(--mono); font-size: 12px; color: var(--paper2); margin-top: 2px; }
.obj-bar { height: 6px; margin-top: 6px; background: rgba(255,255,255,.12); border: 1px solid var(--ink); }
.obj-bar i { display: block; height: 100%; background: linear-gradient(90deg, #40e0ff, #a0f0ff); transform-origin: left; transition: transform .15s; }
.obj-arrow .tri { background: var(--tape); filter: drop-shadow(0 0 6px rgba(232,185,35,.9)); }
.obj-arrow .tag { color: var(--tape); }
.map-slot { position: absolute; right: 14px; top: 92px; }
.minimap { width: 184px; height: 184px; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.55)); }
.streak { top: 290px !important; }
@media (max-width: 700px), (max-height: 520px) { .map-slot { transform: scale(.7); transform-origin: top right; } .obj-desc { display: none; } }

/* ── map select ───────────────────────────────────────────── */
.maps { display: flex; gap: clamp(12px, 2vw, 28px); flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.mapcard { width: clamp(220px, 26vw, 300px); background: var(--paper); color: var(--ink); border: 4px solid var(--ink); box-shadow: 8px 8px 0 rgba(0,0,0,.65); cursor: pointer; pointer-events: auto; transition: transform .12s; position: relative; transform: rotate(-.8deg); }
.mapcard:nth-child(2) { transform: rotate(.6deg); }
@media (hover: hover) { .mapcard:hover { transform: translateY(-6px) rotate(0); } }
.mapcard .art { height: 120px; border-bottom: 4px solid var(--ink); position: relative; overflow: hidden; }
.mapcard .art canvas { width: 100%; height: 100%; display: block; }
.mapcard .art .big { position: absolute; left: 12px; right: 10px; bottom: 6px; font-family: var(--logo); font-size: 28px; letter-spacing: 1px; color: var(--paper); text-shadow: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink), 3px 3px 0 var(--ink); line-height: 1; }
.mapcard .body { padding: 10px 14px 14px; }
.mapcard .sub { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }
.mapcard .desc { font-family: var(--type); font-size: 13px; line-height: 1.35; margin: 6px 0 8px; }
.mapcard ol { margin: 0; padding-left: 20px; font-family: var(--mono); font-size: 11.5px; line-height: 1.45; }
.mapcard .stat { text-shadow: none; line-height: 1.3; font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 1px; margin-top: 8px; color: #5a4a38; }
.mapcard.locked .art { filter: grayscale(.9) brightness(.45); }
.mapcard.locked .lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(13,11,9,.86); color: var(--paper); text-align: center; padding: 18px; font-family: var(--mono); font-size: 13px; line-height: 1.4; }
.mapcard.locked .lock b { font-family: var(--head); font-size: 26px; letter-spacing: 2px; color: var(--tape); }
.mapcard.selected { outline: 4px solid var(--tape); outline-offset: 3px; }
.busy { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(6,5,4,.85); z-index: 5; font-family: var(--head); font-size: 34px; letter-spacing: 2px; color: var(--paper); pointer-events: auto; }
.busy.on { display: flex; }

.mapcard .lock button[disabled] { opacity: .55; cursor: not-allowed; }
.mapselect .big-title { font-size: clamp(34px, 6vw, 72px); }
.mapcard .lock .btn { white-space: nowrap; font-size: 15px; padding: 6px 12px; }
.mapcard .lock .nm { font-family: var(--head); font-size: 15px; letter-spacing: 2px; opacity: .8; }
.mapselect .center-col { max-height: 100vh; overflow-y: auto; padding: 14px 10px; box-sizing: border-box; }
@media (max-height: 700px) {
  .mapselect .big-title { font-size: 40px; }
  .mapcard .art { height: 84px; }
  .mapcard .desc { display: none; }
  .gameover .big-title { font-size: 48px; }
  .results .row { padding: 2px 0; font-size: 13px; }
  .results h3 { margin: 0 0 4px; }
  .results .row b { font-size: 16px; }
}

/* windshield blood (ui/Splatter.js) */
.splatter { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.splat { position: absolute; background-size: contain; background-repeat: no-repeat; opacity: 0; }
.splat.on { animation: splat 2.6s ease-in forwards; }
@keyframes splat {
  0% { opacity: 0; filter: blur(2px); }
  6% { opacity: .92; filter: none; }
  60% { opacity: .75; }
  100% { opacity: 0; margin-top: 40px; }
}

/* nuke badge (core/Nuke.js) + drift meter */
.nuke-badge { position: absolute; right: 18px; bottom: 84px; width: 74px; height: 74px; border-radius: 50%; border: 4px solid var(--ink); background: radial-gradient(circle at 50% 40%, #c8ff60, #4a8a10 70%); color: var(--ink); pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 22px rgba(154,255,64,.55), 4px 4px 0 rgba(0,0,0,.6); animation: nukepulse 1.4s ease-in-out infinite; font-family: var(--head); padding: 0; }
.nuke-badge .ico { font-size: 30px; line-height: 0.9; }
.nuke-badge b { font-size: 16px; font-weight: normal; letter-spacing: 1px; line-height: 1; }
.nuke-badge small { position: absolute; left: -10px; top: -8px; background: var(--paper); border: 2px solid var(--ink); font-family: var(--mono); font-weight: 700; font-size: 12px; padding: 1px 6px; }
.nuke-badge.empty { filter: grayscale(1) brightness(.5); animation: none; box-shadow: 4px 4px 0 rgba(0,0,0,.6); }
.nuke-badge.firing { animation: nukefire .12s linear infinite; }
@keyframes nukepulse { 50% { box-shadow: 0 0 36px rgba(154,255,64,.9), 4px 4px 0 rgba(0,0,0,.6); transform: scale(1.05); } }
@keyframes nukefire { 50% { transform: scale(1.18) rotate(8deg); } }
.drift-meter { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); display: none; align-items: center; gap: 5px; font-family: var(--head); font-size: 16px; letter-spacing: 2px; color: var(--paper); text-shadow: 2px 2px 0 var(--ink); }
.drift-meter.on { display: flex; }
.drift-meter i { width: 26px; height: 10px; border: 2px solid var(--ink); background: rgba(0,0,0,.4); }
.drift-meter[data-tier="1"] i:nth-of-type(1), .drift-meter[data-tier="2"] i:nth-of-type(-n+2), .drift-meter[data-tier="3"] i { background: var(--tc); box-shadow: 0 0 10px var(--tc); }
.drift-meter[data-tier="1"] { --tc: #60c0ff; } .drift-meter[data-tier="2"] { --tc: #ff9020; } .drift-meter[data-tier="3"] { --tc: #d060ff; }

/* gamepad focus in menus (ui/PadNav.js) */
.pad-focus { outline: 4px solid var(--tape) !important; outline-offset: 4px; transform: translateY(-3px) scale(1.03); }

/* garage header: keep the scrap readout clear of the car panel */
.garage-head { z-index: 2; }
.garage-head .sub2 { font-size: 15px; font-weight: 700; box-shadow: 3px 3px 0 rgba(0,0,0,.6); }
.gpanel { top: clamp(150px, 19vh, 170px); max-height: calc(100vh - 300px); }
@media (pointer: coarse) { .nuke-badge { bottom: 170px; right: 28px; } .nuke-badge small { display: none; } }


/* ═════════════════════════════════════════════════════════════
   PHONES & TABLETS  (html.touch is set by core/Mobile.js)
   ═════════════════════════════════════════════════════════════ */
html.touch, html.touch body { touch-action: none; }
html.touch .sheet, html.touch .gpanel, html.touch .carousel, html.touch .maps, html.touch .center-col { touch-action: pan-x pan-y; }

/* ── touch controls ── */
.touch-ui { display: none; }
html.touch .touch-ui { display: block; }
html.touch .pause-btn { right: auto; left: calc(50% + 96px); top: 8px; bottom: auto; font-size: 13px; padding: 3px 10px; box-shadow: 2px 2px 0 var(--ink); }
.stick { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: .6; transition: opacity .15s; }
.stick.active { opacity: 1; }
.stick::before { content: ''; position: absolute; left: -62px; top: -62px; width: 124px; height: 124px; border-radius: 50%; border: 3px solid rgba(236,226,204,.55); background: rgba(10,8,7,.28); box-shadow: 0 0 0 2px rgba(0,0,0,.4); }
.stick .knob { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff4dc, var(--paper) 45%, #b8a888); border: 3px solid var(--ink); box-shadow: 0 3px 8px rgba(0,0,0,.6); }
.touch-btn { position: absolute; border-radius: 50%; border: 3px solid var(--ink); color: var(--ink); font-family: var(--head); font-size: 15px; letter-spacing: 1px; pointer-events: auto; box-shadow: 0 4px 0 rgba(0,0,0,.55); touch-action: none; padding: 0; opacity: .92; }
.touch-btn.down { transform: translateY(3px) scale(.94); box-shadow: 0 1px 0 rgba(0,0,0,.55); filter: brightness(1.25); }
.touch-btn.drift { right: max(18px, env(safe-area-inset-right)); bottom: 30px; width: 98px; height: 98px; font-size: 19px; background: radial-gradient(circle at 40% 35%, #ffb060, var(--pumpkin) 60%, #b04a08); }
.touch-btn.nitro { right: calc(max(18px, env(safe-area-inset-right)) + 112px); bottom: 20px; width: 76px; height: 76px; background: radial-gradient(circle at 40% 35%, #a8d4ff, var(--nitro) 60%, #1a4aa0); color: #fff; text-shadow: 1px 1px 0 var(--ink); }
.touch-btn.brake { right: calc(max(18px, env(safe-area-inset-right)) + 10px); bottom: 136px; width: 64px; height: 64px; font-size: 13px; background: radial-gradient(circle at 40% 35%, #f6eedc, var(--paper2) 60%, #8a7e66); }
html.touch .nuke-badge { right: calc(max(18px, env(safe-area-inset-right)) + 96px); bottom: 110px; width: 64px; height: 64px; }
html.touch .nuke-badge .ico { font-size: 24px; }
html.touch .nuke-badge small { display: none; }

/* ── compact HUD on touch screens ── */
html.touch .hud-tl { left: max(10px, env(safe-area-inset-left)); top: 8px; zoom: .62; }
html.touch .hud-tc { top: 6px; transform: translateX(-50%) scale(.62); transform-origin: top center; }
html.touch .hud-tr { right: max(10px, env(safe-area-inset-right)); top: 8px; zoom: .62; }
/* zoom also scales top/right, so offsets are divided by the zoom factor */
html.touch .map-slot { right: calc(8px / .52); top: calc(52px / .52); transform: none; zoom: .52; }
html.touch .streak { right: calc(14px / .55); top: calc(168px / .55); zoom: .55; }
html.touch .announce { top: 30%; transform: translate(-50%, -50%) rotate(-2deg) scale(.62); }
html.touch .bossbar { top: 58px; transform: translateX(-50%) scale(.65); transform-origin: top center; }
html.touch .toast { font-size: 17px; }
html.touch .hud-weapons { left: 50%; transform: translateX(-50%) scale(.5); transform-origin: top center; top: 74px; bottom: auto; flex-wrap: nowrap; max-width: none; }
html.touch .drift-meter { bottom: 40px; transform: translateX(-50%) scale(.8); transform-origin: bottom center; }
html.touch .hud-level { font-size: 14px; padding: 1px 12px 0; }
html.touch .hud-xp { height: 9px; }
html.touch .hud-level { bottom: 9px; }
html.touch .obj-desc { display: none; }

/* ── portrait: ask for landscape ── */
.rotate-hint { position: fixed; inset: 0; z-index: 50; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 30px; text-align: center; background: radial-gradient(ellipse at center, #2a1810 0%, #0a0807 75%); color: var(--paper); font-family: var(--mono); }
.rotate-hint b { font-family: var(--head); font-weight: normal; font-size: 30px; letter-spacing: 2px; color: var(--pumpkin); text-shadow: 3px 3px 0 var(--ink); }
.rotate-hint span { font-size: 15px; color: var(--paper2); }
.rotate-hint small { max-width: 300px; font-size: 13px; line-height: 1.5; color: var(--paper2); margin-top: 10px; border: 2px dashed rgba(236,226,204,.35); padding: 10px 12px; }
.rotate-hint small b { font-family: var(--mono); font-size: 13px; color: var(--tape); text-shadow: none; letter-spacing: 0; }
.rotate-hint .phone { width: 56px; height: 96px; border: 5px solid var(--paper); border-radius: 12px; position: relative; animation: turnphone 2.2s ease-in-out infinite; margin-bottom: 10px; }
.rotate-hint .phone::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 14px; height: 4px; margin-left: -7px; border-radius: 2px; background: var(--paper); }
@keyframes turnphone { 0%, 20% { transform: rotate(0); } 55%, 80% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (orientation: portrait) { html.touch .rotate-hint { display: flex; } }

/* ── short screens (phones in landscape): shrink the menus ── */
@media (max-height: 500px) {
  .title-wrap { transform: translateY(-50%) scale(.6); transform-origin: left center; left: max(18px, env(safe-area-inset-left)); }
  .menu-foot { top: 10px; right: max(14px, env(safe-area-inset-right)); font-size: 11px; }
  .menu-car { bottom: 12px; right: max(14px, env(safe-area-inset-right)); font-size: 17px; }
  .menu-car small { font-size: 11px; }
  .levelup .center-col, .gameover .center-col, .pause .center-col { zoom: .62; }
  .mapselect .center-col { zoom: .62; justify-content: flex-start; padding-top: 14px; }
  .mapcard ol { display: none; }
  .maps { flex-wrap: nowrap; }
  .howto .center-col, .settings .center-col { zoom: .78; }
  .sheet { max-height: 92vh; max-height: calc(100vh / .78 - 40px); }
  .garage-head { zoom: .62; top: 10px; }
  .garage .back { zoom: .75; top: 12px; right: max(14px, env(safe-area-inset-right)); }
  .gpanel { zoom: .72; top: calc(62px / .72); left: calc(12px / .72); max-height: calc((100vh - 128px) / .72); padding: 10px 16px; }
  .gpanel .blurb { display: none; }
  .gpanel .cls { margin: 2px 0 6px; }
  .gpanel .srow { margin: 2px 0; }
  .gpanel .status { margin: 6px 0 4px; }
  .swatches { margin: 4px 0 8px; }
  .carousel { zoom: .62; bottom: 8px; }
}

.stick .stick-label { position: absolute; left: -40px; top: 66px; width: 80px; text-align: center; font-family: var(--head); font-size: 13px; letter-spacing: 2px; color: var(--paper); text-shadow: 1px 1px 0 var(--ink); transition: opacity .4s; }
.stick.used .stick-label { opacity: 0; }
.stick .knob::after { content: ''; position: absolute; inset: 14px; border-radius: 50%; border: 2px solid rgba(13,11,9,.25); }
.version { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: rgba(217,205,178,.55); }

/* ── the Arsenal (ui/Codex.js) ───────────────────────────── */
.codex-col { justify-content: flex-start; padding-top: 28px; gap: 12px; }
.codex-tabs { display: flex; gap: 12px; }
.codex-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; width: min(1180px, 96vw); flex: 1; min-height: 0; overflow-y: auto; padding: 8px 6px 18px; pointer-events: auto; }
.card.codex-card { width: 214px; height: auto; cursor: default; transform: none; flex: 0 0 auto; display: flex; }
.card.codex-card .face { position: relative; inset: auto; width: 100%; }
.card.codex-card .art { flex: none; height: 118px; }
.card.codex-card .info { flex: none; min-height: 118px; }
.card.codex-card .face { transform: none; }
@media (hover: hover) { .card.codex-card:hover { transform: translateY(-6px); } }
.card.codex-card .top .lv { font-size: 10px; letter-spacing: .5px; }
.card.codex-card .desc { text-transform: none; font-size: 12px; }
.card.codex-card .starts { margin-top: 6px; font-family: var(--mono); font-weight: 700; font-size: 10px; letter-spacing: 1px; color: var(--tape); }
.card.codex-card .glyph { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 50px; line-height: 1; color: #fff; background: radial-gradient(circle at 38% 32%, #ffffff55, var(--gc) 55%, #0008 140%); border: 4px solid var(--ink); box-shadow: 4px 4px 0 rgba(0,0,0,.35); text-shadow: 2px 2px 0 var(--ink); font-family: var(--head); }
@media (max-height: 500px) {
  .codex .center-col { zoom: .66; }
  .codex .codex-grid { max-height: calc((100vh - 150px) / .66); }
}

/* ── tournaments (coming soon) ─────────────────────────────── */
.tourney-btn { position: relative; }
.tourney-btn .soon { position: absolute; right: -10px; top: -9px; font-size: 11px; letter-spacing: 1px; padding: 2px 6px; background: var(--blood, #8a0f0a); color: var(--paper); border: 2px solid var(--ink); transform: rotate(6deg); box-shadow: 2px 2px 0 var(--ink); }
.tourney-col { gap: 14px; }
.tourney-col .t-board { margin-top: 10px; }
.t-board { position: relative; display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; pointer-events: auto; }
.t-flyer { position: relative; width: min(330px, 42vw); padding: 22px 22px 18px; color: var(--ink); transform: rotate(-1.6deg); box-shadow: 6px 6px 0 rgba(0,0,0,.55); }
.t-flyer.weekly { transform: rotate(1.4deg); }
.t-flyer h3 { margin: 0; font-family: var(--head); font-size: 30px; letter-spacing: 1px; line-height: 1; }
.t-flyer.daily h3 { color: #b0400a; }
.t-flyer.weekly h3 { color: #7a0d08; }
.t-when { font-family: var(--head); font-size: 14px; letter-spacing: 1px; margin: 6px 0 10px; opacity: .75; }
.t-flyer p { margin: 0 0 10px; font-size: 14px; line-height: 1.35; }
.t-flyer ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 1.5; }
.t-pin { position: absolute; top: -9px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a6a, #a01a10 60%, #4a0805); box-shadow: 2px 3px 0 rgba(0,0,0,.5); }
.t-head { display: flex; align-items: center; gap: 22px; }
.t-stamp { position: relative; transform: rotate(-8deg); font-family: var(--head); font-size: clamp(26px, 4vw, 44px); background: rgba(236, 226, 204, .9); letter-spacing: 3px; color: rgba(190, 20, 12, .88); border: 6px solid rgba(190, 20, 12, .88); padding: 4px 22px; border-radius: 8px; pointer-events: none; -webkit-mask-image: var(--wear); mask-image: var(--wear); white-space: nowrap; box-shadow: 4px 4px 0 rgba(0,0,0,.5); }
.t-note { max-width: 640px; text-align: center; color: var(--paper); font-size: 15px; line-height: 1.45; text-shadow: 2px 2px 0 var(--ink); }
.t-scrap { font-family: var(--head); letter-spacing: 1px; color: var(--paper); font-size: 18px; text-shadow: 2px 2px 0 var(--ink); }
.t-scrap b { color: #ffd040; }
@media (max-height: 520px) {
  .t-flyer { padding: 14px 16px 12px; } .t-flyer h3 { font-size: 22px; } .t-flyer p, .t-flyer ul { font-size: 12px; }
  .t-note { font-size: 12px; } .tourney-col { gap: 8px; }
}

/* ── ?embed=1: the website's live feed — picture only ─────────── */
html.embed #ui-root, html.embed .rotate-hint, html.embed #loading { display: none !important; }

/* six title buttons on a short landscape phone: two columns, DRIVE across the top */
@media (max-height: 480px) {
  html.touch .menu-buttons, .menu-buttons { display: grid; grid-template-columns: auto auto; gap: 12px 14px; }
  .menu-buttons .btn { min-width: 0; width: 100%; }
  .menu-buttons .btn.primary { grid-column: 1 / -1; }
  .tourney-col .big-title { font-size: 40px; }
  .tourney-col .t-board { margin-top: 4px; }
  .t-note { max-width: 560px; }
  .t-flyer { width: min(300px, 44vw); }
}
@media (max-height: 500px) { .tourney .center-col { zoom: .74; } }

/* passengers (rooftop survivors riding along) */
.pass { display: flex; align-items: center; gap: 5px; min-height: 0; margin-top: 2px; }
.pass i { width: 22px; height: 22px; display: grid; place-items: center; font-style: normal; font-family: var(--head); font-size: 13px; color: var(--ink); background: var(--pc); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
.pass span { font-family: var(--head); font-size: 12px; letter-spacing: 1px; color: var(--paper); text-shadow: 1px 1px 0 var(--ink); }

/* KDHR 66.6 — the DJ's subtitles on the car radio */
.radio { position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%) translateY(10px); width: min(620px, 70vw); display: flex; gap: 12px; align-items: flex-start;
  background: rgba(13,11,9,.82); border: 2px solid #3a332b; border-radius: 6px; padding: 8px 14px; box-shadow: 4px 4px 0 rgba(0,0,0,.5);
  opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; }
.radio.on { opacity: 1; transform: translateX(-50%); }
.radio .dial { flex: none; font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: 1px; color: #ff9a3a; background: #1a0e06; border: 1px solid #5a3a1a; padding: 2px 6px; border-radius: 3px; text-shadow: 0 0 6px rgba(255,140,40,.8); }
.radio .rtext { font-family: var(--type); font-size: 15px; line-height: 1.35; color: var(--paper); }
@media (max-height: 500px) { .radio { bottom: 46px; width: min(420px, 45vw); padding: 5px 9px; gap: 8px; } .radio .rtext { font-size: 11.5px; } .radio .dial { font-size: 10px; } }

/* ── cursed cards ─────────────────────────────────────────── */
.card.cursed .face { background: #1a0f14; border-color: #000; }
.card.cursed .top { background: var(--blood); color: var(--paper); border-bottom-color: #000; }
.card.cursed .art { background: radial-gradient(circle at 50% 55%, #5a0c10 0%, #1c0a0c 70%); border-color: #000; }
.card.cursed .art img { filter: drop-shadow(2px 0 0 #000) drop-shadow(-2px 0 0 #000) drop-shadow(0 2px 0 #000) drop-shadow(0 -2px 0 #000) sepia(1) saturate(4) hue-rotate(-45deg) brightness(.85); }
.card.cursed .kind { color: #ff7a6a; }
.card.cursed .info { background: #0d0608; border-color: #000; }
.card .skull { position: absolute; left: 6px; top: 2px; font-size: 34px; color: #ff3a2a; text-shadow: 0 0 12px rgba(255,40,20,.9), 2px 2px 0 #000; animation: skullpulse 1.1s ease-in-out infinite; }
.card .curse { margin-top: 8px; padding-top: 6px; border-top: 2px dashed rgba(255,80,60,.4); font-family: var(--mono); font-weight: 700; font-size: 12px; line-height: 1.3; color: #ff6a52; text-transform: uppercase; }
.card .curse b { font-family: var(--head); font-weight: normal; letter-spacing: 1px; background: var(--blood); color: var(--paper); padding: 0 5px; margin-right: 4px; }
.card.cursed.flipped .face { animation: cursedin .6s ease-out; box-shadow: 0 0 26px 4px rgba(194,50,30,.65), 8px 8px 0 rgba(0,0,0,.65); }
.card.codex-card.cursed .desc { color: var(--paper2); }
@keyframes skullpulse { 50% { transform: scale(1.15) rotate(-6deg); } }
@keyframes cursedin { 0%, 40% { filter: brightness(2.2) saturate(0); } 20% { filter: brightness(.5) hue-rotate(-30deg); } 100% { filter: none; } }
.wslot.cursed { border-color: var(--blood) !important; box-shadow: 0 0 10px rgba(194,50,30,.8); background: #2a0c0c !important; }
.wslot.cursed img { filter: sepia(1) saturate(4) hue-rotate(-45deg); }
.wslot.cursed .rank { color: #ff6a52; border-color: var(--blood); }
.codex-note { width: 100%; text-align: center; font-family: var(--type); font-size: 15px; color: #ff8a72; padding: 0 20px 4px; }
.results .row.cursed b { color: var(--blood); }

/* ── stunt combo meter ────────────────────────────────────── */
.stunt { position: absolute; right: 24px; bottom: 178px; text-align: right; pointer-events: none; opacity: 0; transform: translateY(8px) rotate(-1.5deg); transition: opacity .2s, transform .2s; --heat: 0; }
.stunt.live, .stunt.bank, .stunt.wipe { opacity: 1; transform: rotate(-1.5deg); }
.stunt .st-tricks { font-family: var(--head); font-size: 15px; letter-spacing: 1px; color: var(--paper); text-shadow: 2px 2px 0 var(--ink); max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; }
.stunt .st-score { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; }
.stunt .st-score b { font-family: var(--head); font-weight: normal; font-size: 40px; line-height: 1; color: var(--paper); text-shadow: 3px 3px 0 var(--ink); }
.stunt .st-score span { font-family: var(--head); font-size: calc(30px + var(--heat) * 22px); line-height: 1; color: color-mix(in srgb, var(--tape), #ff3a1a calc(var(--heat) * 100%)); text-shadow: 3px 3px 0 var(--ink), 0 0 calc(var(--heat) * 18px) rgba(255,90,30,.9); }
.stunt .st-bar { height: 6px; margin-top: 4px; margin-left: auto; width: 180px; background: rgba(0,0,0,.5); border: 2px solid var(--ink); }
.stunt .st-bar i { display: block; height: 100%; background: var(--tape); transform-origin: right; }
.stunt.bank .st-score b { color: var(--tape); animation: slam .35s cubic-bezier(.2,1.6,.4,1) both; }
.stunt.bank .st-bar, .stunt.wipe .st-bar { visibility: hidden; }
.stunt.wipe .st-score b { color: var(--blood); animation: wipeshake .4s; }
.stunt.wipe .st-tricks { text-decoration: line-through; color: #ff8a72; }
@keyframes wipeshake { 20% { transform: translateX(-8px) rotate(-3deg); } 40% { transform: translateX(7px) rotate(2deg); } 60% { transform: translateX(-4px); } }

/* ── map events + crossroads ──────────────────────────────── */
.ev-status { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.ev-status div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 10px; background: rgba(13,11,9,.78); border-left: 4px solid var(--ec); max-width: 330px; box-shadow: 3px 3px 0 rgba(0,0,0,.5); }
.ev-status b { font-family: var(--head); font-weight: normal; font-size: 14px; letter-spacing: 1px; color: var(--ec); }
.ev-status span { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--paper); }
.offarrow.way .tri { background: var(--wc); filter: drop-shadow(0 0 6px var(--wc)); }
.offarrow.way .tag { color: var(--wc); width: 110px; left: -55px; }
.route-panel { position: absolute; left: 0; right: 0; top: 84px; display: none; flex-direction: column; align-items: center; pointer-events: none; text-align: center; }
.route-panel.on { display: flex; }
.route-panel.on > * { animation: slam .4s cubic-bezier(.2,1.6,.4,1) both; }
.rp-head { display: inline-block; font-family: var(--head); font-size: 20px; letter-spacing: 3px; background: var(--tape); color: var(--ink); padding: 2px 14px; border: 3px solid var(--ink); }
.rp-head span { font-family: var(--mono); font-weight: 700; font-size: 15px; margin-left: 8px; }
.rp-opts { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.rp-or { font-family: var(--head); font-size: 16px; color: var(--paper); text-shadow: 2px 2px 0 var(--ink); }
.rp-opt { width: 200px; padding: 6px 10px 7px; background: rgba(13,11,9,.85); border: 3px solid var(--rc); box-shadow: 4px 4px 0 rgba(0,0,0,.5); display: grid; grid-template-columns: auto 1fr auto; column-gap: 8px; align-items: center; text-align: left; }
.rp-opt i { font-style: normal; font-size: 24px; color: var(--rc); grid-row: span 2; text-shadow: 0 0 8px var(--rc); }
.rp-opt b { font-family: var(--head); font-weight: normal; font-size: 17px; letter-spacing: 1px; color: var(--rc); }
.rp-opt em { font-style: normal; font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--paper); }
.rp-opt small { grid-column: 2 / 4; font-family: var(--mono); font-size: 10.5px; line-height: 1.25; color: var(--paper2); text-transform: uppercase; }

/* ── share card ───────────────────────────────────────────── */
.share-col { gap: 14px; }
.share-col .big-title { font-size: clamp(32px, 5vw, 56px); }
.share-frame { position: relative; width: min(860px, 88vw, calc((100vh - 230px) * 1.778)); aspect-ratio: 16 / 9; background: var(--ink2); border: 4px solid var(--ink); box-shadow: 10px 10px 0 rgba(0,0,0,.6); transform: rotate(-.6deg); }
.share-frame img { display: block; width: 100%; height: 100%; transition: opacity .3s; }
.share-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--head); font-size: 28px; letter-spacing: 4px; color: var(--paper2); animation: skullpulse 1s infinite; }
.share-note { min-height: 20px; font-family: var(--mono); font-weight: 700; font-size: 14px; letter-spacing: 1px; color: var(--tape); text-align: center; }
.share-note b { background: var(--tape); color: var(--ink); padding: 0 6px; }
.btn.x-btn { background: #0d0b09; color: var(--paper); border-color: var(--paper); }
.btn.x-btn.primary { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.btn.x-btn .xg { font-family: Arial, sans-serif; font-weight: 700; margin-right: 4px; }
.share-btn { font-size: 20px; padding: 8px 22px; transform: rotate(-1deg); animation: sharepulse 2.4s ease-in-out infinite; }
@keyframes sharepulse { 50% { box-shadow: 5px 5px 0 var(--ink), 0 0 22px rgba(236,226,204,.45); } }

@media (max-height: 500px) {
  .stunt { right: auto; left: 50%; bottom: auto; top: 26%; transform: translateX(-50%) scale(.7); text-align: center; }
  .stunt.live, .stunt.bank, .stunt.wipe { transform: translateX(-50%) scale(.7); }
  .stunt .st-score { justify-content: center; } .stunt .st-bar { margin: 4px auto 0; }
  .route-panel { top: 52px; zoom: .62; }
  .ev-status div { max-width: 260px; }
  .share .center-col { gap: 6px; padding: 8px; }
  .share-col .big-title { font-size: 24px; }
  .share-frame { width: min(84vw, calc((100vh - 112px) * 1.778)); box-shadow: 6px 6px 0 rgba(0,0,0,.6); }
  .share .btn { font-size: 16px; padding: 5px 14px; }
  .share .row-btns { gap: 10px; }
  .share-note { min-height: 0; font-size: 11px; }
}
html.touch .stunt { right: auto; left: 50%; bottom: 112px; top: auto; transform: translateX(-50%) scale(.62); transform-origin: bottom center; text-align: center; }
html.touch .stunt.live, html.touch .stunt.bank, html.touch .stunt.wipe { transform: translateX(-50%) scale(.62); }
html.touch .stunt .st-score { justify-content: center; } html.touch .stunt .st-bar { margin: 4px auto 0; }

/* run report: two columns so the buttons stay on screen */
.results .rgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
.results { min-width: min(720px, 92vw); }
.results .row.scrap { border-bottom: none; margin-top: 4px; font-size: 18px; }
.results .row.scrap b { font-size: 26px; }
.gameover .center-col { gap: 14px; }
@media (max-width: 700px) { .results .rgrid { grid-template-columns: 1fr; } }
html.touch .route-panel { top: 196px; zoom: .55; }   /* zoomed: ~108px on screen, under the weapon strip */
html.touch .rp-opt { width: auto; grid-template-columns: auto auto auto; }
html.touch .rp-opt small { display: none; }
html.touch .rp-opt i { grid-row: auto; }

/* ── minimap hint + the full map ──────────────────────────── */
.minimap { position: relative; cursor: pointer; pointer-events: auto; }
.mm-hint { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); font-family: var(--head); font-size: 11px; letter-spacing: 1.5px; color: var(--ink); background: var(--paper2); padding: 0 7px; border: 2px solid var(--ink); white-space: nowrap; }
html.touch .mm-hint::before { content: 'TAP · '; }
html.touch .mm-hint { font-size: 0; } html.touch .mm-hint::before, html.touch .mm-hint::after { font-size: 11px; } html.touch .mm-hint::after { content: 'MAP'; }
.bigmap { background: rgba(6,5,4,.86); }
.bm-wrap { position: absolute; inset: 0; display: flex; gap: 22px; padding: 24px 28px; align-items: stretch; pointer-events: auto; }
.bm-left { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; }
.bm-left canvas { border: 4px solid var(--ink); box-shadow: 0 0 0 2px var(--paper2), 10px 10px 0 rgba(0,0,0,.6); cursor: pointer; }
.bm-side { width: min(320px, 34vw); display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.bm-title { font-family: var(--head); font-size: 34px; letter-spacing: 2px; color: var(--paper); text-shadow: 3px 3px 0 var(--ink); line-height: 1; }
.bm-clock { font-family: var(--mono); font-weight: 700; font-size: 13px; letter-spacing: 1px; color: var(--paper2); }
.bm-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding-right: 4px; }
.bm-row { display: grid; grid-template-columns: 16px 1fr auto; column-gap: 8px; align-items: center; padding: 5px 9px; background: rgba(28,24,20,.92); border-left: 4px solid var(--c); }
.bm-row i { width: 12px; height: 12px; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); }
.bm-row i.dia { border-radius: 0; transform: rotate(45deg) scale(.85); }
.bm-row b { font-family: var(--head); font-weight: normal; font-size: 15px; letter-spacing: 1px; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bm-row span { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--paper); }
.bm-row small { grid-column: 2 / 4; font-family: var(--mono); font-size: 11px; color: var(--paper2); text-transform: uppercase; }
.bm-note { font-family: var(--head); font-size: 13px; letter-spacing: 1px; color: var(--ink); background: #e8f0ff; padding: 4px 8px; }
.bm-key { margin-top: 4px; font-family: var(--mono); font-weight: 700; font-size: 11px; color: var(--paper2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bm-key span { display: inline-block; width: 12px; height: 8px; } .k-ramp { background: rgba(232,185,35,.8); } .k-fuel { background: #ff9a2a; } .k-dead { background: rgba(230,50,30,.8); width: 6px !important; height: 6px !important; }
.bm-hint { font-family: var(--mono); font-weight: 700; font-size: 11px; letter-spacing: 1px; color: var(--paper2); text-align: center; }
@media (max-height: 500px), (max-width: 760px) {
  .bm-wrap { padding: 10px 12px; gap: 12px; }
  .bm-title { font-size: 22px; } .bm-row { padding: 3px 7px; } .bm-row b { font-size: 12px; } .bm-row span { font-size: 11px; }
  .bm-side .btn { font-size: 14px; padding: 4px 10px; }
}

/* radio show: head row (dial, ON AIR, show name), who's talking */
.radio { flex-direction: column; gap: 4px; }
.radio .r-head { display: flex; align-items: center; gap: 8px; }
.radio .r-body { display: flex; gap: 10px; align-items: baseline; }
.radio .onair, .radio .show { display: none; }
.radio.live .onair { display: inline-block; font-family: var(--head); font-size: 11px; letter-spacing: 1.5px; color: #fff; background: #c2321e; padding: 0 6px; border-radius: 2px; box-shadow: 0 0 10px rgba(255,40,20,.7); animation: onair 1.4s ease-in-out infinite; }
.radio.live .show { display: inline-block; font-family: var(--head); font-size: 12px; letter-spacing: 2px; color: var(--paper2); }
.radio .who { flex: none; font-family: var(--head); font-size: 13px; letter-spacing: 1px; color: #ff9a3a; }
.radio.caller .who { color: #5ad0ff; }
.radio.caller .rtext { font-style: italic; color: #cfe6ff; }
@keyframes onair { 50% { opacity: .55; } }
@media (max-height: 500px) { .radio .show { font-size: 10px; } .radio .who { font-size: 11px; } }

.offarrow.notag .tag { display: none; }