/* Nels' Monster Trucks: chunky toy-box UI. Everything a kid touches is at
   least 72px, sits clear of the screen edges (home bar, notch) and answers
   with a squish. Tokens mirror THEME in main.js. */

@font-face { font-family: "Lexend"; font-weight: 600; font-display: block; src: url("fonts/lexend-600.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-weight: 800; font-display: block; src: url("fonts/lexend-800.woff2") format("woff2"); }

:root {
  --bg: #1d2330; --surface: #2a3244; --edge: #3d4760; --ink: #ffffff; --muted: #b9c3d6;
  --accent: #ffd21f; --reward: #ffd21f; --danger: #ff4f5e;
  --green: #2fcf5b; --green-d: #1c8f3b; --orange: #ff8a1f; --orange-d: #c45a00;
  --blue: #2f86ff; --blue-d: #1a55b8; --purple: #8b52ff; --purple-d: #5a2dc0; --grey: #8d97a8; --grey-d: #5b6475;
  --text-s: 14px; --text-m: 18px; --text-l: 28px; --text-xl: 56px;
  --space: 8px; --radius: 22px;
  --font-ui: "Lexend", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-weight: 800;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: none; overscroll-behavior: none;
}
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible { outline: 4px solid var(--accent); outline-offset: 4px; }
svg { fill: currentColor; }

/* ------------------------------------------------------------- screens */
.screen {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .35s ease; z-index: 20;
}
.screen.show { opacity: 1; pointer-events: auto; }
#loading { background: radial-gradient(circle at 50% 40%, #33425e, #141a26); z-index: 60; gap: 34px; }
#pause, #gift, #settings, #bye { background: rgba(14, 18, 28, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 40; }
#settings { z-index: 50; }

/* ------------------------------------------------------------- logo */
.logo { display: flex; flex-direction: column; align-items: center; line-height: .88; transform: rotate(-4deg); text-align: center; }
.logo span { display: block; letter-spacing: .02em; paint-order: stroke fill; -webkit-text-stroke: 0; }
.logo .l1 {
  font-size: clamp(64px, 15vmin, 150px); color: #ffd21f;
  text-shadow: 0 6px 0 #c43a0f, 0 10px 0 #16171b, 0 14px 24px rgba(0,0,0,.45);
  -webkit-text-stroke: 3px #16171b;
}
.logo .l2 {
  font-size: clamp(34px, 7.4vmin, 76px); color: #fff; margin-top: 10px;
  text-shadow: 0 4px 0 #e3222b, 0 7px 0 #16171b, 0 10px 18px rgba(0,0,0,.4);
  -webkit-text-stroke: 2px #16171b;
}
.logo.small .l1 { font-size: 72px; } .logo.small .l2 { font-size: 34px; }
#title .logo { margin-top: -6vh; animation: logoIn .8s cubic-bezier(.2, 1.6, .4, 1) both, wobble 4s ease-in-out 1s infinite; }
@keyframes logoIn { from { transform: scale(.3) rotate(-14deg); opacity: 0; } to { transform: scale(1) rotate(-4deg); opacity: 1; } }
@keyframes wobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-2deg) scale(1.03); } }

.tire-spin svg { width: 96px; height: 96px; animation: spin .9s linear infinite; filter: drop-shadow(0 6px 8px rgba(0,0,0,.4)); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- big buttons */
.bigbtn {
  --c: var(--green); --d: var(--green-d);
  width: clamp(104px, 20vmin, 150px); height: clamp(104px, 20vmin, 150px); border-radius: 50%;
  background: var(--c);
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--c) 65%, white), var(--c) 55%);
  box-shadow: 0 9px 0 var(--d), 0 14px 22px rgba(0,0,0,.4), inset 0 -6px 0 rgba(0,0,0,.12);
  display: grid; place-items: center; color: #fff; position: relative;
  transition: transform .12s cubic-bezier(.3, 1.8, .5, 1), box-shadow .12s;
}
.bigbtn svg { width: 52%; height: 52%; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.bigbtn:active, .bigbtn.down { transform: translateY(6px) scale(.94); box-shadow: 0 3px 0 var(--d), 0 6px 12px rgba(0,0,0,.35); }
.bigbtn.orange { --c: var(--orange); --d: var(--orange-d); }
.bigbtn.blue { --c: var(--blue); --d: var(--blue-d); }
.bigbtn.purple { --c: var(--purple); --d: var(--purple-d); }
.bigbtn.grey { --c: var(--grey); --d: var(--grey-d); }
.bigbtn.small { width: 96px; height: 96px; }
.bigbtn.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.bigbtn.pulse:active { animation: none; }

.title-buttons { display: flex; gap: clamp(24px, 6vw, 70px); margin-top: 7vh; align-items: center; }
#btnPlay { width: clamp(130px, 26vmin, 190px); height: clamp(130px, 26vmin, 190px); }

.cornerbtn {
  position: fixed; width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center;
  background: rgba(20, 26, 40, .72); box-shadow: 0 5px 0 rgba(0,0,0,.35); color: #fff;
  transition: transform .12s;
}
.cornerbtn svg { width: 44px; height: 44px; }
.cornerbtn:active { transform: scale(.9); }
.cornerbtn.gear { right: calc(18px + var(--sar)); top: calc(18px + var(--sat)); width: 64px; height: 64px; opacity: .8; }
.cornerbtn.gear svg { width: 34px; height: 34px; }
.cornerbtn.home { left: calc(18px + var(--sal)); top: calc(18px + var(--sat)); }
.cornerbtn.sound { left: calc(18px + var(--sal)); top: calc(18px + var(--sat)); }
.hold-ring { position: absolute; inset: -6px; border-radius: 28px; border: 5px solid var(--accent); clip-path: inset(100% 0 0 0); pointer-events: none; }
.gear.holding .hold-ring { transition: clip-path 1.6s linear; clip-path: inset(0 0 0 0); }
a.back { position: fixed; left: calc(16px + var(--sal)); bottom: calc(14px + var(--sab)); color: rgba(255,255,255,.55); font-size: var(--text-s); text-decoration: none; font-weight: 600; }
a.back:hover { color: var(--accent); }

/* ------------------------------------------------------------- world cards */
#worlds { background: linear-gradient(180deg, rgba(20,26,40,.35), rgba(20,26,40,.75)); }
.cards { display: flex; gap: clamp(14px, 3vw, 36px); padding: 0 24px; }
.wcard {
  width: clamp(170px, 27vw, 300px); aspect-ratio: 4 / 5; border-radius: 30px; overflow: hidden; position: relative;
  box-shadow: 0 10px 0 rgba(0,0,0,.4), 0 18px 30px rgba(0,0,0,.4); border: 6px solid #fff;
  transition: transform .15s cubic-bezier(.3, 1.8, .5, 1);
  animation: cardIn .6s cubic-bezier(.2, 1.5, .4, 1) both;
}
.wcard:nth-child(2) { animation-delay: .08s; } .wcard:nth-child(3) { animation-delay: .16s; }
@keyframes cardIn { from { transform: translateY(60px) scale(.7); opacity: 0; } }
.wcard:active { transform: scale(.94); }
.wcard .art { position: absolute; inset: 0; }
.wcard.locked { filter: saturate(.3) brightness(.7); }

/* ------------------------------------------------------------- garage */
#garage { justify-content: flex-start; align-items: stretch; pointer-events: none; }
#garage.show > * { pointer-events: auto; }
.gpanel {
  position: fixed; right: calc(12px + var(--sar)); top: calc(12px + var(--sat)); bottom: calc(12px + var(--sab));
  width: min(47vw, 560px); background: rgba(22, 28, 42, .86); border-radius: 30px; padding: 14px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
  border: 3px solid rgba(255,255,255,.08);
}
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tab {
  height: 72px; border-radius: 20px; background: #34405a; display: grid; place-items: center; color: #fff;
  box-shadow: 0 5px 0 #1b2233; transition: transform .1s;
}
.tab svg { width: 44px; height: 44px; }
.tab.on { background: var(--accent); color: #16171b; box-shadow: 0 5px 0 #b38d00; transform: translateY(-2px); }
.tab:active { transform: translateY(3px); }
.items { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; align-content: start; padding: 4px 4px 20px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.item {
  height: 104px; border-radius: 22px; background: #2e3850; position: relative; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 5px 0 #1b2233; transition: transform .12s cubic-bezier(.3, 1.8, .5, 1);
  animation: itemIn .35s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes itemIn { from { transform: scale(.5); opacity: 0; } }
.item img { width: 100%; height: 100%; object-fit: contain; }
.item.on { outline: 5px solid var(--accent); outline-offset: -5px; background: #3c4a69; }
.item.on::after { content: ""; position: absolute; right: 6px; top: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%2316171b' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat; }
.item:active { transform: scale(.92); }
.item .swatch { width: 70px; height: 70px; border-radius: 50%; box-shadow: inset 0 -6px 10px rgba(0,0,0,.3), inset 0 6px 10px rgba(255,255,255,.35), 0 4px 0 rgba(0,0,0,.3); }
.item .digit { font-size: 58px; color: #16171b; background: #fff; width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; border: 6px solid #16171b; font-variant-numeric: tabular-nums; }
.item .digit.two { font-size: 40px; letter-spacing: -2px; }
.item .digit.none { font-size: 0; background: transparent; border-style: dashed; border-color: rgba(255,255,255,.4); }
.item .hornicon svg { width: 62px; height: 62px; }
.item .hornicon { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--c, #ff8a1f); box-shadow: 0 4px 0 rgba(0,0,0,.3); }
.item.locked { background: repeating-linear-gradient(45deg, #ff3b8a 0 14px, #ff5c9f 14px 28px); }
.item.locked img, .item.locked .swatch, .item.locked .digit, .item.locked .hornicon { display: none; }
.item.locked::before { content: ""; width: 64px; height: 64px; background: #fff; -webkit-mask: var(--gift-mask) center / contain no-repeat; mask: var(--gift-mask) center / contain no-repeat; }
.item.wiggle { animation: wiggle .5s; }
@keyframes wiggle { 20% { transform: rotate(-8deg); } 40% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(4deg); } }
.item .spinner { width: 34px; height: 34px; border-radius: 50%; border: 5px solid rgba(255,255,255,.2); border-top-color: #fff; animation: spin .8s linear infinite; }
#btnGo { position: fixed; left: calc((100vw - min(47vw, 560px) - 24px) / 2 - 65px); bottom: calc(22px + var(--sab)); width: 130px; height: 130px; }
.spin-hint { position: fixed; left: calc((100vw - min(47vw, 560px)) / 2 - 30px); top: 46%; width: 60px; height: 60px; opacity: 0; pointer-events: none; color: #fff; }
.spin-hint.show { animation: swipe 2.4s ease-in-out 2; }
@keyframes swipe { 0% { opacity: 0; transform: translateX(60px); } 20% { opacity: .9; } 70% { opacity: .9; transform: translateX(-60px); } 100% { opacity: 0; transform: translateX(-60px); } }
.spin-hint svg { width: 60px; height: 60px; }

@media (orientation: portrait) {
  .gpanel { left: calc(10px + var(--sal)); right: calc(10px + var(--sar)); top: auto; width: auto; height: 50vh; }
  #btnGo { left: auto; right: calc(20px + var(--sar)); bottom: calc(50vh + 26px); width: 110px; height: 110px; }
  .spin-hint { left: 50%; top: 25%; }
  .cards { flex-direction: column; }
  .wcard { width: min(56vw, 300px); aspect-ratio: 16 / 9; }
}

/* ------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: 0; transition: opacity .3s; }
#hud.show { opacity: 1; }
#hud .pausebtn { pointer-events: auto; left: calc(16px + var(--sal)); top: calc(16px + var(--sat)); width: 72px; height: 72px; }
.mission {
  position: absolute; left: 50%; top: calc(14px + var(--sat)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 26px;
  background: rgba(20, 26, 40, .7); box-shadow: 0 6px 0 rgba(0,0,0,.25);
}
.mission.hide { display: none; }
.micon { width: 58px; height: 58px; display: grid; place-items: center; }
.micon svg { width: 54px; height: 54px; }
.tray { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.slot { width: 40px; height: 32px; border-radius: 9px; background: rgba(255,255,255,.12); border: 3px dashed rgba(255,255,255,.35); display: grid; place-items: center; }
.slot svg { width: 30px; height: 22px; opacity: 0; transform: scale(.2); transition: transform .35s cubic-bezier(.2, 1.8, .4, 1), opacity .2s; }
.slot.full { background: rgba(255,255,255,.95); border: 3px solid #fff; }
.slot.full svg { opacity: 1; transform: scale(1); }
.mcount { font-size: 50px; min-width: 62px; text-align: center; color: var(--reward); font-variant-numeric: tabular-nums; text-shadow: 0 4px 0 rgba(0,0,0,.35); }
.mcount.bump { animation: bump .4s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes bump { 40% { transform: scale(1.5); } }

.target {
  position: absolute; left: 50%; top: calc(106px + var(--sat)); transform: translateX(-50%);
  pointer-events: auto; display: none; align-items: center; gap: 14px; padding: 10px 20px 10px 12px; border-radius: 28px;
  background: #fff; color: #16171b; box-shadow: 0 7px 0 rgba(0,0,0,.3); min-height: 100px;
}
.target.show { display: flex; animation: targetIn .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes targetIn { from { transform: translateX(-50%) scale(.3); } }
.target .big { font-size: 84px; line-height: 1; min-width: 70px; text-align: center; }
.target .dots { display: grid; grid-template-columns: repeat(5, 18px); gap: 5px; }
.target .dots i { width: 18px; height: 18px; border-radius: 50%; background: #e3222b; }
.target .pic { width: 84px; height: 84px; }
.target .speak { width: 36px; height: 36px; color: #2f86ff; }

#pops { position: absolute; inset: 0; overflow: hidden; }
.pop {
  position: absolute; font-size: 120px; color: #fff; line-height: 1; transform: translate(-50%, -50%);
  text-shadow: 0 6px 0 #16171b, 0 0 30px rgba(255,210,31,.7); -webkit-text-stroke: 3px #16171b; font-variant-numeric: tabular-nums;
}
.stamp {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(0); display: flex; align-items: center; gap: 10px;
  color: #fff; font-size: 90px; -webkit-text-stroke: 3px #16171b; text-shadow: 0 6px 0 #16171b;
}
.stamp svg { width: 110px; height: 110px; color: #ffd21f; filter: drop-shadow(0 6px 0 #16171b); }
.stamp.show { animation: stamp 1.2s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes stamp { 0% { transform: translate(-50%, -50%) scale(0) rotate(-20deg); opacity: 1; } 25% { transform: translate(-50%, -50%) scale(1.1) rotate(4deg); } 75% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } 100% { transform: translate(-50%, -80%) scale(.9); opacity: 0; } }

/* ------------------------------------------------------------- touch controls */
#controls { position: fixed; inset: 0; z-index: 12; }
#controls.off { display: none; }
.zone-left { position: absolute; left: 0; top: 0; bottom: 0; width: 58%; touch-action: none; }
.zone-right { position: absolute; right: 0; top: 30%; bottom: 0; width: 42%; touch-action: none; }
.stick { position: absolute; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: rgba(255,255,255,.14); border: 5px solid rgba(255,255,255,.4); opacity: 0; pointer-events: none; transition: opacity .15s; }
.stick.on { opacity: 1; }
.knob { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d8dde6); box-shadow: 0 5px 0 rgba(0,0,0,.3); transform: translate(-50%, -50%); }
.btn-jump {
  position: absolute; right: calc(34px + var(--sar)); bottom: calc(46px + var(--sab)); width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #ffe98a, #ffd21f 55%); color: #16171b;
  box-shadow: 0 10px 0 #b38d00, 0 14px 24px rgba(0,0,0,.35); display: grid; place-items: center; pointer-events: auto;
  transition: transform .1s cubic-bezier(.3, 1.8, .5, 1), box-shadow .1s;
}
.btn-jump svg { width: 76px; height: 76px; }
.btn-jump.down { transform: translateY(7px) scale(.93); box-shadow: 0 3px 0 #b38d00, 0 6px 12px rgba(0,0,0,.3); }
.btn-jump.air { background: radial-gradient(circle at 35% 28%, #ffb0d6, #ff4fae 55%); box-shadow: 0 10px 0 #b8246f, 0 14px 24px rgba(0,0,0,.35); animation: pulse .5s ease-in-out infinite; }
.btn-jump.air svg { transform: rotate(-90deg); }
.btn-horn {
  position: absolute; right: calc(204px + var(--sar)); bottom: calc(74px + var(--sab)); width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #9fd0ff, #2f86ff 55%); color: #fff;
  box-shadow: 0 8px 0 #1a55b8, 0 12px 20px rgba(0,0,0,.35); display: grid; place-items: center; pointer-events: auto;
  transition: transform .1s cubic-bezier(.3, 1.8, .5, 1);
}
.btn-horn svg { width: 54px; height: 54px; }
.btn-horn.down { transform: translateY(6px) scale(.9) rotate(-8deg); }
.coach { position: absolute; left: 20%; top: 62%; width: 80px; height: 80px; color: #fff; opacity: 0; pointer-events: none; }
.coach svg { width: 80px; height: 80px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.coach.show { animation: coach 2.2s ease-in-out infinite; }
@keyframes coach { 0% { opacity: 0; transform: translate(0, 40px); } 20% { opacity: 1; } 70% { opacity: 1; transform: translate(0, -60px); } 100% { opacity: 0; transform: translate(0, -60px); } }

/* ------------------------------------------------------------- pause */
.pause-grid { display: grid; grid-template-columns: repeat(4, auto); gap: clamp(18px, 4vw, 48px); }
@media (orientation: portrait) { .pause-grid { grid-template-columns: repeat(2, auto); } }

/* ------------------------------------------------------------- gift */
.gift-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.gift-img { width: min(62vw, 520px); aspect-ratio: 4 / 3; position: relative; z-index: 1; animation: giftIn .7s cubic-bezier(.2, 1.6, .4, 1) both; filter: drop-shadow(0 16px 24px rgba(0,0,0,.45)); }
@keyframes giftIn { from { transform: scale(.2) rotate(-25deg); opacity: 0; } }
.rays { position: absolute; left: 50%; top: 42%; width: 900px; height: 900px; margin: -450px 0 0 -450px; background: repeating-conic-gradient(rgba(255,210,31,.35) 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: spin 14s linear infinite; mask: radial-gradient(circle, #000 20%, transparent 65%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 65%); }
.gift-buttons { display: flex; gap: 40px; align-items: center; z-index: 1; }

/* ------------------------------------------------------------- goodbye */
#bye { background: linear-gradient(180deg, #1b2450, #3b2a6b); gap: 28px; }
.bye-moon svg { width: 150px; height: 150px; color: #ffe98a; filter: drop-shadow(0 0 30px rgba(255,233,138,.6)); animation: wobble 3s ease-in-out infinite; }
.bye-stats { display: flex; gap: 26px; font-size: 54px; font-variant-numeric: tabular-nums; }
.bye-stats span { display: flex; align-items: center; gap: 10px; }
.bye-stats svg { width: 64px; height: 50px; }

/* ------------------------------------------------------------- settings */
#settings .panel {
  width: min(92vw, 620px); max-height: 90vh; overflow-y: auto; touch-action: pan-y; background: var(--surface); border-radius: 26px; padding: 22px 24px;
  font-weight: 600; font-size: var(--text-m); box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
#settings h2 { margin: 0 0 12px; font-size: var(--text-l); font-weight: 800; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--edge); }
.row label { color: var(--muted); }
.seg { display: flex; background: #1c2333; border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { min-width: 64px; min-height: 44px; padding: 0 12px; border-radius: 11px; font-weight: 700; color: var(--muted); }
.seg button.on { background: var(--accent); color: #16171b; }
.toggle { width: 70px; height: 44px; border-radius: 22px; background: #1c2333; position: relative; }
.toggle::after { content: ""; position: absolute; left: 5px; top: 5px; width: 34px; height: 34px; border-radius: 50%; background: var(--muted); transition: left .15s; }
.toggle.on { background: var(--green); }
.toggle.on::after { left: 31px; background: #fff; }
.slider { display: flex; align-items: center; gap: 10px; }
.slider input { width: 160px; accent-color: var(--accent); }
.slider output { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; color: var(--reward); }
.danger { min-height: 44px; padding: 0 16px; border-radius: 12px; background: #3b2530; color: #ff9aa6; font-weight: 700; }
.danger.armed { background: var(--danger); color: #fff; }
.note { color: var(--muted); font-size: var(--text-s); line-height: 1.5; }
.okbtn { width: 100%; min-height: 56px; border-radius: 16px; background: var(--green); color: #fff; font-size: var(--text-m); box-shadow: 0 5px 0 var(--green-d); }

/* ------------------------------------------------------------- misc */
#rotate { position: fixed; inset: 0; z-index: 90; background: #1d2330; display: none; align-items: center; justify-content: center; }
#rotate svg { width: 140px; height: 140px; color: #fff; animation: rot 2s ease-in-out infinite; }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 600px) { html.playing #rotate { display: flex; } }
#fade { position: fixed; inset: 0; background: #0d1119; opacity: 0; pointer-events: none; z-index: 70; transition: opacity .3s; }
#fade.on { opacity: 1; }

html.rm *, html.rm *::before, html.rm *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }

/* ------------------------------------------------------------- short landscape phones */
@media (max-height: 520px) and (orientation: landscape) {
  #title .logo { margin-top: -2vh; }
  .logo .l1 { font-size: 64px; } .logo .l2 { font-size: 32px; margin-top: 4px; }
  .title-buttons { margin-top: 4vh; }
  .bigbtn { width: 96px; height: 96px; }
  #btnPlay { width: 118px; height: 118px; }
  .cornerbtn { width: 60px; height: 60px; border-radius: 18px; }
  .cornerbtn svg { width: 34px; height: 34px; }
  .cornerbtn.gear { width: 52px; height: 52px; }
  #hud .pausebtn { width: 58px; height: 58px; top: calc(10px + var(--sat)); left: calc(12px + var(--sal)); }
  .mission { top: calc(8px + var(--sat)); padding: 6px 12px; gap: 8px; border-radius: 20px; }
  .micon, .micon svg { width: 40px; height: 40px; }
  .slot { width: 30px; height: 24px; border-width: 2px; }
  .slot svg { width: 22px; height: 16px; }
  .mcount { font-size: 36px; min-width: 44px; }
  .target { top: calc(70px + var(--sat)); min-height: 72px; padding: 6px 14px 6px 8px; }
  .target .big { font-size: 58px; min-width: 50px; }
  .target .dots { grid-template-columns: repeat(5, 12px) !important; }
  .target .dots i { width: 12px; height: 12px; }
  .target .pic { width: 60px; height: 60px; }
  .btn-jump { width: 118px; height: 118px; right: calc(22px + var(--sar)); bottom: calc(26px + var(--sab)); }
  .btn-jump svg { width: 60px; height: 60px; }
  .btn-horn { width: 74px; height: 74px; right: calc(22px + var(--sar)); bottom: calc(160px + var(--sab)); }
  .btn-horn svg { width: 42px; height: 42px; }
  .stick { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
  .knob { width: 60px; height: 60px; }
  .pop { font-size: 84px; }
  .stamp { font-size: 64px; } .stamp svg { width: 80px; height: 80px; }
  .gpanel { padding: 10px; gap: 8px; border-radius: 22px; width: min(52vw, 560px); }
  .tabs { gap: 6px; }
  .tab { height: 52px; border-radius: 14px; }
  .tab svg { width: 34px; height: 34px; }
  .items { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .item { height: 80px; border-radius: 16px; }
  .item .swatch { width: 54px; height: 54px; }
  .item .digit { width: 62px; height: 62px; font-size: 42px; border-width: 5px; }
  .item .digit.two { font-size: 30px; }
  .item .hornicon { width: 64px; height: 64px; } .item .hornicon svg { width: 44px; height: 44px; }
  #btnGo { left: calc(18px + var(--sal)); bottom: calc(18px + var(--sab)); width: 100px; height: 100px; }
  .wcard { width: clamp(150px, 24vw, 220px); border-width: 5px; }
  .gift-img { width: min(46vw, 360px); }
}

/* ------------------------------------------------------------- upright tablets */
@media (orientation: portrait) and (min-width: 700px) {
  .wcard { width: min(64vw, 440px); }
  .cards { gap: 22px; }
  .items { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .item { height: 124px; }
  .tab { height: 80px; }
}