:root {
  --cream: #fff6e8;
  --cream-2: #ffe9cc;
  --brown: #5a3519;
  --brown-d: #3a2414;
  --panel: rgba(58, 36, 20, .78);
  --honey: #f2a33a;
  --orange: #e8742c;
  --orange-d: #b4531a;
  --red: #e63946;
  --pink: #ff8fa3;
  --mint: #7dcfb6;
  --gold: #ffd166;
  --font: "Fredoka", "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1a1410; font-family: var(--font); color: var(--brown); -webkit-tap-highlight-color: transparent; }
canvas { display: block; touch-action: none; }
button { font-family: inherit; }
.hidden { display: none !important; }

/* ================= HUD ================= */
#hud { position: fixed; top: max(10px, env(safe-area-inset-top)); left: 0; right: 0; display: flex; justify-content: center; gap: 10px; pointer-events: none; z-index: 5; padding: 0 64px; }
.panel { display: flex; align-items: center; gap: 6px; background: var(--panel); color: var(--cream-2); padding: 6px 14px 6px 8px; border-radius: 999px; font-size: 18px; font-weight: 500;
  box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 6px 16px rgba(0,0,0,.3); border: 2px solid rgba(255, 220, 170, .25); backdrop-filter: blur(4px); transition: background .3s, border-color .3s; }
.panel .ico { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 233, 204, .16); font-size: 17px; }
.panel small { font-size: 14px; opacity: .8; }
.panel span { font-weight: 700; color: #fff; font-size: 22px; min-width: 1.4em; text-align: center; display: inline-block; font-variant-numeric: tabular-nums; }
#score-panel .ico { background: rgba(255, 143, 163, .3); }
#best-panel .ico { background: rgba(255, 209, 102, .3); }

#score.bump { animation: bump .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.7) rotate(-6deg); color: var(--gold); } 100% { transform: scale(1); } }
#score-panel.bump { animation: panelGlow .6s ease-out; }
@keyframes panelGlow { 0% { box-shadow: 0 0 0 0 rgba(255,209,102,.9), 0 6px 16px rgba(0,0,0,.3); } 100% { box-shadow: 0 0 0 14px rgba(255,209,102,0), 0 6px 16px rgba(0,0,0,.3); } }

#time-panel.urgent { background: rgba(200, 30, 45, .88); border-color: #ffb3b3; animation: pulse .9s ease-in-out infinite; }
#time-panel.urgent .ico { background: rgba(255,255,255,.25); }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }

/* corner buttons */
#corner-btns { position: fixed; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; flex-direction: column; gap: 8px; z-index: 6; }
.round-btn { width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255, 220, 170, .3); background: var(--panel); color: #fff; font-size: 18px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,.25); display: grid; place-items: center; padding: 0; transition: transform .12s, opacity .2s; }
.round-btn:hover { transform: scale(1.08); }
.round-btn:active { transform: scale(.94); }
.round-btn.off { opacity: .55; }

/* combo */
#combo { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #ff8fa3, #f2a33a); padding: 4px 16px; border-radius: 999px; font-size: 20px; border: 3px solid #fff; box-shadow: 0 4px 0 rgba(0,0,0,.2), 0 8px 18px rgba(0,0,0,.3); white-space: nowrap; }
#combo span { font-weight: 500; font-size: 16px; }
#combo em { font-style: normal; }
#combo.pop { animation: comboPop .4s cubic-bezier(.3, 1.9, .5, 1); }
#combo.fade { animation: comboFade .6s ease-in forwards; }
#combo.hot { background: linear-gradient(135deg, #e63946, #ffb703); }
@keyframes comboPop { 0% { transform: translateX(-50%) scale(.4) rotate(-10deg); } 100% { transform: translateX(-50%) scale(1) rotate(0); } }
@keyframes comboFade { 0% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) translateY(-14px) scale(.7); } }

/* balloons in air */
#balloon-slots { position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: 22px; display: flex; gap: 4px; padding: 6px 10px; background: var(--panel); border-radius: 999px; pointer-events: none; z-index: 5; border: 2px solid rgba(255, 220, 170, .25); }
#balloon-slots:empty { display: none; }
.slot { width: 16px; height: 20px; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%; position: relative; border: 2px solid rgba(255, 233, 204, .55); background: transparent; transition: background .25s, transform .25s; }
.slot::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 1px; height: 5px; background: rgba(255, 233, 204, .55); }
.slot.on { background: radial-gradient(circle at 35% 30%, #fff 0 10%, #ff8fa3 25%, #e63946 90%); border-color: #fff; transform: translateY(-2px); }
.slot.on:nth-child(2) { background: radial-gradient(circle at 35% 30%, #fff 0 10%, #ffd166 25%, #f2a33a 90%); }
.slot.on:nth-child(3) { background: radial-gradient(circle at 35% 30%, #fff 0 10%, #9be7c4 25%, #2a9d8f 90%); }
.slot.on:nth-child(4) { background: radial-gradient(circle at 35% 30%, #fff 0 10%, #a0c4ff 25%, #4361ee 90%); }
.slot.on:nth-child(5) { background: radial-gradient(circle at 35% 30%, #fff 0 10%, #d0a8ff 25%, #8e44ad 90%); }
#balloon-slots.full { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* thermometer */
#charge-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); width: min(300px, 56vw); height: 34px; pointer-events: none; z-index: 5; display: flex; align-items: center; }
#thermo-bulb { position: relative; z-index: 2; flex: 0 0 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 16px;
  background: radial-gradient(circle at 35% 35%, #ffd8a8, #e8742c 60%, #b4531a); border: 3px solid var(--cream); box-shadow: 0 3px 8px rgba(0,0,0,.35); filter: grayscale(.7) brightness(.9); transition: filter .2s; }
#charge-wrap.warm #thermo-bulb { filter: none; }
#thermo-tube { position: relative; flex: 1; height: 18px; margin-left: -6px; background: var(--panel); border: 3px solid var(--cream); border-left: 0; border-radius: 0 999px 999px 0; overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
#charge-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #ffd166, #ff9f43 45%, #e63946); border-radius: 0 999px 999px 0; }
#thermo-ticks { position: absolute; inset: 0 0 0 10px; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255,255,255,.35) calc(25% - 1px) 25%); }
#charge-label { position: absolute; left: 34px; right: 0; top: -20px; text-align: center; color: #fff; font-size: 14px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.8); letter-spacing: .5px; }
#charge-wrap.full #thermo-tube { border-color: #ffe08a; box-shadow: 0 0 14px 3px rgba(255, 140, 40, .85), 0 0 30px 6px rgba(255, 80, 40, .45); animation: glow .5s ease-in-out infinite alternate; }
#charge-wrap.full #thermo-bulb { border-color: #ffe08a; box-shadow: 0 0 18px 4px rgba(255, 140, 40, .9); }
#charge-wrap.full #charge-label { color: var(--gold); animation: pulse .5s ease-in-out infinite; }
@keyframes glow { to { box-shadow: 0 0 22px 6px rgba(255, 160, 40, 1), 0 0 40px 10px rgba(255, 80, 40, .6); } }

/* message + gust */
#message { position: fixed; top: 28%; left: 12px; right: 12px; text-align: center; font-size: clamp(28px, 7vw, 52px); font-weight: 700; color: #fff; pointer-events: none; opacity: 0; transition: opacity .3s, transform .3s; z-index: 7;
  text-shadow: 0 3px 0 var(--orange-d), 0 6px 16px rgba(0,0,0,.6); transform: scale(.85); }
#message.show { opacity: 1; transform: scale(1); }
#gust { position: fixed; top: 40%; left: 50%; z-index: 7; pointer-events: none; transform: translateX(-50%); white-space: nowrap; font-size: clamp(24px, 6vw, 40px); font-weight: 700; color: #fff;
  background: linear-gradient(90deg, rgba(80,160,220,0), rgba(80,160,220,.85) 20%, rgba(80,160,220,.85) 80%, rgba(80,160,220,0)); padding: 8px 60px; text-shadow: 0 2px 0 #23608f; animation: gustIn 1.8s ease-out forwards; }
@keyframes gustIn { 0% { opacity: 0; transform: translateX(-120%) skewX(-12deg); } 18% { opacity: 1; transform: translateX(-50%) skewX(0); } 75% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; transform: translateX(40%) skewX(-12deg); } }

/* ================= Screens ================= */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(60, 34, 14, .45), rgba(20, 12, 6, .8)); z-index: 20; overflow-y: auto; padding: 16px; }
.screen > .card { margin: auto; }
.card { background: var(--cream); color: var(--brown); width: 100%; max-width: 480px; padding: 22px 26px 26px; border-radius: 28px; text-align: center;
  box-shadow: 0 8px 0 #e3c8a0, 0 18px 50px rgba(0,0,0,.55); border: 4px solid #fff; animation: cardIn .45s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes cardIn { from { transform: translateY(30px) scale(.9); opacity: 0; } }
.card h1 { margin: 4px 0 6px; font-size: clamp(28px, 7vw, 38px); font-weight: 700; color: var(--orange); text-shadow: 0 3px 0 #f6d3a8; line-height: 1.1; }
.card h2 { margin: 4px 0; font-size: 32px; color: var(--orange); }
.card p { margin: 0 0 12px; line-height: 1.4; }
.small-card { max-width: 340px; }

kbd { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; font: 600 14px var(--font); color: var(--brown); background: linear-gradient(#fff, #f3e3cc); border: 2px solid #d9b98f; border-bottom-width: 4px; border-radius: 8px; }
kbd.wide { min-width: 96px; }
.howto { text-align: left; background: #fdebd2; border-radius: 18px; padding: 10px 12px; margin: 0 0 14px; display: grid; gap: 8px; font-size: 15px; }
.howto .row { display: grid; grid-template-columns: 142px 1fr; align-items: center; gap: 10px; }
.howto .keys { display: flex; gap: 3px; flex-wrap: nowrap; }
.howto em { opacity: .7; font-style: normal; font-size: 13px; }
.touch-only { display: none; }
body.touch .touch-only { display: grid; }
body.touch .keys-only { display: none; }
body.touch .howto .row { grid-template-columns: 44px 1fr; }

.options { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.opt { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.opt-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; opacity: .65; }
.seg, .toggles { display: flex; background: #f3dcbc; border-radius: 999px; padding: 3px; gap: 3px; }
.seg button, .toggle { border: 0; background: transparent; color: var(--brown); font-size: 15px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s; }
.seg button.active { background: #fff; box-shadow: 0 2px 0 #d9b98f; }
.seg button[data-fan="alu"].active { background: linear-gradient(135deg, #f4f6f8, #b9c0c8); }
.toggle[aria-pressed="true"] { background: var(--mint); color: #fff; box-shadow: 0 2px 0 #4f9f88; }
.toggle[aria-pressed="false"] { text-decoration: line-through; opacity: .6; }

.big-btn { font-size: 22px; font-weight: 700; padding: 12px 34px; border: 0; border-radius: 999px; background: linear-gradient(#f59a45, var(--orange)); color: #fff; cursor: pointer;
  box-shadow: 0 5px 0 var(--orange-d), 0 8px 16px rgba(180, 83, 26, .35); text-shadow: 0 2px 0 rgba(0,0,0,.15); transition: transform .1s, box-shadow .1s; }
.big-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--orange-d), 0 10px 18px rgba(180, 83, 26, .35); }
.big-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--orange-d); }

/* pause */
.pause-icon { font-size: 44px; }
.hint-key { font-size: 18px; }

/* game over */
.go-badge { font-size: 54px; line-height: 1; animation: wobble 2s ease-in-out infinite; }
.go-badge.record { filter: drop-shadow(0 0 12px rgba(255, 200, 60, .9)); }
@keyframes wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) translateY(-4px); } }
.go-score { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.go-score span { font-size: 64px; font-weight: 700; color: var(--brown); line-height: 1; }
.go-score small { font-size: 18px; opacity: .7; }
.go-best { font-weight: 600; opacity: .8; }
.go-best.new { color: var(--orange); opacity: 1; }
.go-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 6px; }
.stat { background: #fdebd2; border-radius: 16px; padding: 6px 4px 5px; display: flex; flex-direction: column; align-items: center; gap: 0; min-width: 0; }
.stat i { font-style: normal; font-size: 20px; line-height: 24px; }
.stat.big i { font-size: 28px; }
.stat b { font-size: 22px; line-height: 1.1; }
.stat small { font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stat .pts { font-style: normal; font-size: 12px; font-weight: 600; margin-top: 2px; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--orange-d); font-variant-numeric: tabular-nums; }
.stat .pts.none { color: #a07a6a; background: transparent; }
.stat.gold { background: #fff0bf; }
.stat.heavy { background: #e9e2da; }
.stat.mission { background: #e2f4ea; }
.stat.mission .pts { color: #2a7d63; }
.stat.lost { background: #f7dcd6; }
.go-sum { margin: 0 0 16px !important; font-size: 15px; font-weight: 600; color: var(--brown); opacity: .85; font-variant-numeric: tabular-nums; }
.go-sum b { color: var(--orange-d); }

/* teddy illustration */
.teddy-art { position: relative; width: 150px; height: 112px; margin: 0 auto 2px; }
.teddy { position: absolute; left: 50%; bottom: 0; width: 92px; height: 82px; margin-left: -46px; animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
.teddy .head { position: absolute; left: 6px; right: 6px; bottom: 0; height: 70px; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 40% 30%, #d9995e, #b8733c 70%, #9a5c2c); box-shadow: inset 0 -6px 0 rgba(0,0,0,.1); }
.teddy .ear { position: absolute; top: 0; width: 30px; height: 30px; border-radius: 50%; background: #a8652f; }
.teddy .ear::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #f0c48f; }
.teddy .ear.l { left: 2px; } .teddy .ear.r { right: 2px; }
.teddy .eye { position: absolute; top: 24px; width: 9px; height: 11px; border-radius: 50%; background: #2a1608; animation: blink 4s infinite; }
.teddy .eye::after { content: ""; position: absolute; top: 2px; left: 2px; width: 3px; height: 3px; border-radius: 50%; background: #fff; }
.teddy .eye.l { left: 22px; } .teddy .eye.r { right: 22px; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.teddy .cheek { position: absolute; top: 38px; width: 12px; height: 7px; border-radius: 50%; background: rgba(255, 120, 130, .55); }
.teddy .cheek.l { left: 10px; } .teddy .cheek.r { right: 10px; }
.teddy .muzzle { position: absolute; left: 50%; top: 34px; width: 32px; height: 24px; margin-left: -16px; border-radius: 50%; background: #f0c48f; }
.teddy .nose { position: absolute; left: 50%; top: 4px; width: 12px; height: 8px; margin-left: -6px; border-radius: 50% 50% 60% 60%; background: #3a1f0c; }
.teddy .muzzle::after { content: ""; position: absolute; left: 50%; top: 11px; width: 10px; height: 6px; margin-left: -5px; border: 2px solid #3a1f0c; border-top: 0; border-radius: 0 0 10px 10px; }
.balloon { position: absolute; width: 28px; height: 34px; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%; animation: floaty 3s ease-in-out infinite; }
.balloon::before { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: inherit; }
.balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 30px; background: rgba(90, 53, 25, .5); }
.balloon.b1 { left: 4px; top: 6px; background: radial-gradient(circle at 35% 30%, #fff 0 8%, #ff8fa3 30%, #e63946); border-top-color: #e63946; }
.balloon.b2 { right: 8px; top: 0; background: radial-gradient(circle at 35% 30%, #fff 0 8%, #ffd166 30%, #f2a33a); animation-delay: -1s; }
.balloon.b3 { right: 30px; top: 18px; width: 22px; height: 27px; background: radial-gradient(circle at 35% 30%, #fff 0 8%, #9be7c4 30%, #2a9d8f); animation-delay: -2s; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }


/* ================= Phone ================= */
@media (max-width: 600px) {
  #hud { gap: 6px; padding: 0 56px 0 8px; justify-content: flex-start; }
  .panel { padding: 4px 10px 4px 4px; font-size: 14px; gap: 4px; }
  .panel small { display: none; }
  .panel .ico { width: 26px; height: 26px; font-size: 14px; }
  .panel span { font-size: 18px; }
  .round-btn { width: 36px; height: 36px; font-size: 15px; }
  #combo { top: 54px; font-size: 17px; }
  body.touch #combo { top: 88px; }
  .card { padding: 16px 16px 20px; border-radius: 22px; }
  .howto { font-size: 14px; }
  .howto .row { grid-template-columns: 118px 1fr; }
  kbd { min-width: 24px; height: 26px; font-size: 12px; }
  kbd.wide { min-width: 80px; }
  .teddy-art { transform: scale(.85); margin-top: -8px; margin-bottom: -6px; }
  .go-score span { font-size: 52px; }
  .stat small { font-size: 11px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .teddy-art { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ================= Leaderboard ================= */
.top-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; text-align: left; }
.top-list li { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 6px; background: #fdebd2; border-radius: 12px; padding: 4px 12px 4px 6px; font-size: 16px; font-weight: 500; }
.top-list li:nth-child(1) { background: #fff0bf; }
.tl-medal { font-size: 20px; text-align: center; line-height: 1; }
.tl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-score { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--orange-d); }
.top-list li.pending { background: #fff; outline: 3px dashed var(--honey); outline-offset: -3px; }
.top-list li.pending .tl-name { opacity: .7; font-style: italic; }
.top-list li.new { background: linear-gradient(90deg, #ffd166, #ffb36b); color: var(--brown-d); box-shadow: 0 3px 0 #e39a45; animation: rowPop .6s cubic-bezier(.3, 1.8, .5, 1); }
.top-list li.new .tl-score { color: var(--brown-d); }
@keyframes rowPop { 0% { transform: scale(.85); } 60% { transform: scale(1.05); } 100% { transform: scale(1); } }
.top-list.compact li { font-size: 14px; padding: 2px 10px 2px 4px; border-radius: 10px; grid-template-columns: 24px 1fr auto auto; background: #fff; }
.top-list.compact .tl-medal { font-size: 16px; }
.top-list.compact .tl-score { font-size: 15px; }

.go-board { margin: -6px 0 16px; display: grid; gap: 8px; }
.name-form { background: #fff6d6; border: 2px solid #f3d27c; border-radius: 16px; padding: 8px 10px 10px; animation: cardIn .4s cubic-bezier(.3, 1.5, .5, 1); }
.name-form label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; color: var(--orange-d); }
.name-row { display: flex; gap: 6px; }
#name-input { flex: 1; min-width: 0; font: 600 18px var(--font); color: var(--brown); padding: 8px 12px; border-radius: 999px; border: 2px solid #d9b98f; background: #fff; outline: none; transition: border-color .2s, box-shadow .2s; }
#name-input:focus { border-color: var(--honey); box-shadow: 0 0 0 4px rgba(242, 163, 58, .25); }
#name-save { font: 700 17px var(--font); color: #fff; border: 0; border-radius: 999px; padding: 0 18px; background: linear-gradient(#8fe0c7, var(--mint)); box-shadow: 0 3px 0 #4f9f88; cursor: pointer; }
#name-save:active { transform: translateY(2px); box-shadow: 0 1px 0 #4f9f88; }

.start-extra { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: -4px 0 16px; }
.mini-board { width: 100%; max-width: 300px; background: #fdebd2; border-radius: 16px; padding: 6px 8px 8px; }
.mini-head { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; opacity: .7; margin-bottom: 4px; }
.ach-btn { font: 600 16px var(--font); color: var(--brown); background: linear-gradient(#fff, #f6e3c6); border: 2px solid #e3c8a0; border-bottom-width: 4px; border-radius: 999px; padding: 6px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: transform .1s; }
.ach-btn:hover { transform: translateY(-1px); }
.ach-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.ach-count { font-size: 13px; background: var(--honey); color: #fff; border-radius: 999px; padding: 1px 8px; }

/* ================= Achievements ================= */
#ach-screen { z-index: 25; }
.ach-card { max-width: 560px; }
.ach-sub { opacity: .7; font-weight: 500; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-bottom: 18px; }
.ach-badge { position: relative; background: #fff0bf; border: 2px solid #f3d27c; border-radius: 18px; padding: 10px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; overflow: hidden; }
.ach-badge .ab-ico { font-size: 32px; line-height: 1.1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.15)); }
.ach-badge b { font-size: 14px; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; }
.ach-badge small { font-size: 11.5px; line-height: 1.25; opacity: .75; }
.ach-badge.on::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%); transform: translateX(-120%); animation: shine 3.5s ease-in-out infinite; pointer-events: none; }
.ach-badge.locked { background: #efe6da; border-color: #ddd0bf; border-style: dashed; color: #8a7a6a; }
.ach-badge.locked .ab-ico { filter: grayscale(1) opacity(.35); }
.ach-badge.locked small { font-size: 16px; font-weight: 700; opacity: .5; }
.ab-prog { font-style: normal; font-size: 11px; font-weight: 600; background: #ddd0bf; border-radius: 999px; padding: 0 7px; margin-top: 2px; }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

#toasts { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: 22px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.ach-toast { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; width: min(320px, calc(100vw - 28px)); padding: 10px 14px 10px 10px; border-radius: 20px; text-align: left;
  background: linear-gradient(135deg, #fff6e8, #ffe2a8); border: 3px solid #fff; color: var(--brown); box-shadow: 0 5px 0 #e3b26a, 0 12px 26px rgba(0,0,0,.4); animation: toastIn .55s cubic-bezier(.3, 1.5, .5, 1); }
.ach-toast::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%); transform: translateX(-120%); animation: toastShine 1.1s .45s ease-out forwards; pointer-events: none; }
.ach-toast.out { animation: toastOut .45s ease-in forwards; }
.at-ico { flex: 0 0 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; background: radial-gradient(circle at 35% 30%, #fff7d1, #ffd166 55%, #f2a33a); border: 3px solid #fff; box-shadow: 0 0 0 2px #f2a33a, 0 3px 8px rgba(0,0,0,.25); animation: badgeSpin .7s .1s cubic-bezier(.3, 1.6, .5, 1) both; }
.at-txt { display: flex; flex-direction: column; min-width: 0; }
.at-txt small { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--orange-d); }
.at-txt b { font-size: 18px; line-height: 1.15; }
.at-txt span { font-size: 13px; line-height: 1.25; opacity: .8; }
@keyframes toastIn { from { transform: translateX(120%) rotate(4deg); opacity: 0; } }
@keyframes toastOut { to { transform: translateX(120%); opacity: 0; } }
@keyframes toastShine { to { transform: translateX(120%); } }
@keyframes badgeSpin { from { transform: scale(.3) rotate(-180deg); } }
body.touch #toasts { bottom: auto; top: 100px; }
@media (max-width: 600px) {
  #toasts { right: 12px; bottom: 70px; }
  .ach-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
  .ach-badge .ab-ico { font-size: 26px; }
  .ach-badge b { font-size: 13px; }
  .top-list li { font-size: 15px; }
}

/* ================= Touch controls (compact thumb clusters) =================
   joystick bottom-left; heat (main) bottom-right with puff to its left (raised) and jump above it.
   Thermometer sits between the two clusters so nothing overlaps; all targets stay >= 44px. */
#touch { position: fixed; inset: 0; pointer-events: none; z-index: 8;
  --tb: max(14px, env(safe-area-inset-bottom)); --joy: 112px; --heat: 84px; --puff: 60px; --jump: 54px; --gap: 8px; --puff-up: 72px; }
#joy { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: var(--tb); width: var(--joy); height: var(--joy); border-radius: 50%; pointer-events: auto; touch-action: none;
  background: radial-gradient(circle, rgba(255, 233, 204, .06), rgba(58, 36, 20, .32)); border: 2px solid rgba(255, 233, 204, .38); }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; transform: none; border-radius: 50%; translate: -50% -50%;
  background: radial-gradient(circle at 35% 30%, rgba(240, 196, 143, .92), rgba(184, 115, 60, .92)); border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 3px 8px rgba(0,0,0,.35); }
#touch-btns { position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: var(--tb);
  width: calc(var(--heat) + var(--gap) + var(--puff)); height: calc(var(--heat) + var(--gap) + var(--jump)); pointer-events: none; }
#touch-btns button { position: absolute; pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .8); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; line-height: 1; opacity: .8; box-shadow: 0 3px 0 rgba(0,0,0,.25); transition: opacity .12s, transform .08s; }
#touch-btns small { font-size: 11px; font-weight: 600; margin-top: 2px; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
#btn-heat { right: 0; bottom: 0; width: var(--heat); height: var(--heat); font-size: 30px; background: radial-gradient(circle at 35% 30%, #ffb070, #e8742c 60%, #b4531a); }
#btn-puff { right: calc(var(--heat) + var(--gap)); bottom: var(--puff-up); width: var(--puff); height: var(--puff); font-size: 22px; background: radial-gradient(circle at 35% 30%, #b8e3ff, #4aa3df 60%, #23608f); }
#btn-jump { right: calc((var(--heat) - var(--jump)) / 2); bottom: calc(var(--heat) + var(--gap)); width: var(--jump); height: var(--jump); font-size: 20px; background: radial-gradient(circle at 35% 30%, #c6f0a8, #6cbf4a 60%, #3f8a2a); }
#btn-jump small, #btn-puff small { font-size: 10px; }
#touch-btns button.down { opacity: 1; transform: scale(.92) translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.3); filter: brightness(1.15); }
/* thermometer between the clusters, label clear of the puff/heat buttons */
body.touch #charge-wrap { --tb: max(14px, env(safe-area-inset-bottom)); bottom: calc(var(--tb) + 8px); transform: none; width: auto; max-width: 300px; margin: 0 auto;
  left: calc(max(14px, env(safe-area-inset-left)) + 112px + 12px); right: calc(max(12px, env(safe-area-inset-right)) + 84px + 10px); }
body.touch #charge-label { font-size: 13px; white-space: nowrap; }
body.touch #balloon-slots { bottom: auto; top: 64px; }
@media (max-width: 600px) {
  #touch { --joy: 100px; --heat: 72px; --puff: 54px; --jump: 48px; }
  body.touch #balloon-slots { top: 52px; }
  body.touch #charge-wrap { left: calc(max(14px, env(safe-area-inset-left)) + 100px + 12px); right: calc(max(12px, env(safe-area-inset-right)) + 72px + 10px); height: 30px; }
  body.touch #thermo-bulb { flex-basis: 30px; height: 30px; font-size: 14px; }
  body.touch #charge-label { left: 30px; top: -18px; font-size: 12px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #touch { --tb: max(10px, env(safe-area-inset-bottom)); }
  body.touch #charge-wrap { --tb: max(10px, env(safe-area-inset-bottom)); }
  .teddy-art { display: none; }
}

/* ================= Active power-up chips ================= */
#pu-chips { position: fixed; z-index: 5; pointer-events: none; display: flex; gap: 6px;
  left: max(14px, env(safe-area-inset-left)); bottom: 66px; flex-direction: row; align-items: center; }
#pu-chips:empty { display: none; }
.pu-chip { display: flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 999px; background: var(--panel); color: #fff;
  border: 2px solid var(--pu, rgba(255, 220, 170, .4)); box-shadow: 0 3px 0 rgba(0,0,0,.25); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
  animation: chipIn .35s cubic-bezier(.3, 1.7, .5, 1); }
.pu-chip i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: color-mix(in srgb, var(--pu, #fff) 35%, transparent); }
.pu-chip b { min-width: 2.1em; text-align: center; }
.pu-thermos { --pu: #ff6a3d; }
.pu-remote { --pu: #4fc3ff; }
.pu-honey { --pu: #ffc43d; }
.pu-chip.low { animation: chipBlink .5s ease-in-out infinite alternate; }
@keyframes chipIn { from { transform: scale(.3); opacity: 0; } }
@keyframes chipBlink { to { opacity: .45; } }
/* touch: right edge, under the corner buttons (3 x 42px + gaps) */
body.touch #pu-chips { left: auto; bottom: auto; right: max(10px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 152px); flex-direction: column; align-items: flex-end; }
@media (max-width: 600px) {
  body.touch #pu-chips { top: calc(max(10px, env(safe-area-inset-top)) + 132px); }
  .pu-chip { font-size: 13px; padding: 2px 8px 2px 3px; }
  .pu-chip i { width: 22px; height: 22px; font-size: 13px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.touch #pu-chips { top: auto; bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 4px); right: calc(max(10px, env(safe-area-inset-right)) + 48px); flex-direction: row; }
}

/* ================= Levels ("baner") ================= */
.tl-lvl { font-size: 15px; line-height: 1; opacity: .9; }
.top-list.compact .tl-lvl { font-size: 13px; }

/* --- start screen: level picker --- */
.level-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 14px; }
.lvl-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 8px 10px; min-width: 0;
  font: inherit; color: var(--brown); text-align: center; cursor: pointer; border-radius: 20px; background: #fdebd2; border: 3px solid transparent;
  box-shadow: 0 4px 0 #e8cfa9; transition: transform .15s, box-shadow .15s, border-color .2s, background .2s; }
.lvl-card:hover { transform: translateY(-2px); }
.lvl-card:focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; }
.lvl-card.selected { background: #fff; border-color: var(--honey); box-shadow: 0 4px 0 #e39a45, 0 0 0 4px rgba(242, 163, 58, .22); }
.lvl-card.selected::after { content: "✓"; position: absolute; top: -9px; right: -7px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--honey); color: #fff; font-weight: 700; font-size: 15px; border: 3px solid #fff; box-shadow: 0 2px 0 #e39a45; animation: badgeSpin .4s cubic-bezier(.3, 1.6, .5, 1); }
.lvl-card.picked { animation: rowPop .45s cubic-bezier(.3, 1.8, .5, 1); }
.lvl-card.nope { animation: shake .35s; }
.lvl-num { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; opacity: .6; margin-top: 4px; }
.lvl-name { font-size: 18px; line-height: 1.1; color: var(--orange-d); }
.lvl-desc { font-size: 12px; line-height: 1.25; opacity: .75; margin: 2px 0 4px; }
.lvl-best { font-size: 12.5px; font-weight: 600; background: #fff0bf; border-radius: 999px; padding: 1px 9px; color: var(--brown); margin-top: auto; }
.lvl-best.none { background: rgba(0,0,0,.05); font-weight: 500; opacity: .7; }
.lvl-card.selected .lvl-best { background: #ffe3a3; }
.lvl-card.selected .lvl-best.none { background: rgba(0,0,0,.05); }

/* mini illustrations */
.lvl-art { position: relative; display: block; width: 100%; height: 66px; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.lvl-art .la-teddy { position: absolute; font-size: 24px; line-height: 1; }
.lvl-art .la-balloon { position: absolute; top: 7px; width: 13px; height: 16px; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%; animation: floaty 3s ease-in-out infinite; }
.lvl-art .la-balloon::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 9px; background: rgba(90, 53, 25, .45); }
/* gym: cream wall, parquet floor with court lines, hoop, bouncing ball */
.lvl-art.gym { background: linear-gradient(#fff3df 0 52%, transparent 52%), repeating-linear-gradient(90deg, #e2a865 0 12px, #d99a55 12px 13px, #e8b273 13px 25px, #d99a55 25px 26px); }
.gym .la-lines { position: absolute; left: 50%; bottom: -14px; width: 54px; height: 30px; margin-left: -27px; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; }
.gym .la-hoop { position: absolute; right: 12px; top: 8px; width: 22px; height: 15px; background: #fff; border: 2px solid #b9c0c8; border-radius: 3px; }
.gym .la-hoop::after { content: ""; position: absolute; left: 3px; right: 3px; top: 100%; height: 4px; border: 2px solid var(--orange); border-top: 0; border-radius: 0 0 6px 6px; }
.gym .la-balloon { left: 14px; background: radial-gradient(circle at 35% 30%, #fff 0 8%, #ff8fa3 30%, #e63946); }
.gym .la-teddy { left: 50%; bottom: 7px; margin-left: -18px; animation: bob 2.6s ease-in-out infinite; }
.gym .la-ball { position: absolute; left: 50%; bottom: 6px; margin-left: 6px; font-size: 15px; line-height: 1; animation: dribble .9s cubic-bezier(.5, 0, .5, 1) infinite alternate; }
@keyframes dribble { from { transform: translateY(0); } to { transform: translateY(-14px) rotate(160deg); } }
/* pool: tiled wall, waving water, teddy in a red/white swim ring */
.lvl-art.pool { background: linear-gradient(#e6f6fb 0 46%, #5ec3e6 46%, #2f98c9); }
.pool .la-tiles { position: absolute; inset: 0 0 54% 0; background-image: linear-gradient(rgba(120, 180, 205, .35) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 180, 205, .35) 1px, transparent 1px); background-size: 10px 10px; }
.pool .la-water { position: absolute; left: -20px; right: -20px; top: 40%; height: 12px; opacity: .85;
  background: radial-gradient(circle at 10px -3px, transparent 9px, #8fd8f0 10px) 0 0 / 20px 12px repeat-x; animation: waves 2.4s linear infinite; }
@keyframes waves { to { transform: translateX(20px); } }
.pool .la-balloon { right: 16px; background: radial-gradient(circle at 35% 30%, #fff 0 8%, #9be7c4 30%, #2a9d8f); animation-delay: -1.2s; }
.pool .la-ring { position: absolute; left: 50%; bottom: 8px; width: 46px; height: 22px; margin-left: -23px; border-radius: 50%; z-index: 1;
  background: radial-gradient(ellipse at center, #3aa6d6 0 34%, transparent 36%), repeating-conic-gradient(#ff5d6c 0 45deg, #fff 45deg 90deg);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.15), 0 2px 4px rgba(0, 60, 100, .3); animation: swimBob 2.2s ease-in-out infinite; }
.pool .la-teddy { left: 50%; bottom: 6px; margin-left: -12px; }
@keyframes swimBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }

/* locked level */
.lvl-card.locked { cursor: not-allowed; background: #efe6da; box-shadow: 0 4px 0 #ddd0bf; }
.lvl-card.locked:hover { transform: none; }
.lvl-card.locked .lvl-art { filter: grayscale(.85) brightness(.95) opacity(.55); }
.lvl-card.locked .lvl-art, .lvl-card.locked .lvl-art * { animation-play-state: paused; }
.lvl-card.locked .lvl-name { color: #8a7a6a; }
.lvl-card.locked .lvl-desc, .lvl-card.locked .lvl-best { display: none; }
.lvl-lock { display: none; }
.lvl-card.locked .lvl-lock { display: flex; flex-direction: column; align-items: center; font-size: 12px; font-weight: 600; line-height: 1.25; color: #7a6a5a; margin-top: 2px; }
.lvl-lock i { position: absolute; left: 50%; top: 22px; margin-left: -19px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 20px;
  background: #fff; border: 3px solid #ddd0bf; box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.lvl-card.locked.nope .lvl-lock { color: var(--red); }

/* --- HUD level badge: a small tab hanging under the score/time row --- */
#level-badge { position: absolute; left: 50%; top: calc(100% + 5px); transform: translateX(-50%); display: flex; align-items: center; gap: 5px; white-space: nowrap;
  background: var(--panel); color: var(--cream-2); padding: 2px 12px 2px 3px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 2px solid rgba(255, 220, 170, .25); box-shadow: 0 3px 0 rgba(0,0,0,.2); backdrop-filter: blur(4px); }
#level-badge .lb-ico { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: rgba(255, 233, 204, .18); }
#level-badge .lb-num { color: #fff; }
#level-badge .lb-name { opacity: .85; font-weight: 500; white-space: pre; }
body[data-level="2"] #level-badge { border-color: rgba(143, 216, 240, .55); }
body[data-level="2"] #level-badge .lb-ico { background: rgba(94, 195, 230, .35); }
body.has-level #combo { top: 92px; }
@media (max-width: 700px) {
  #level-badge .lb-name { display: none; }
}
@media (max-width: 600px) {
  /* phone: no room under the row (mission card / balloon slots live there) – sit inline after the panels */
  #level-badge { position: static; transform: none; order: 9; align-self: center; padding: 2px 9px 2px 2px; font-size: 12px; gap: 3px; }
  body.has-level #combo { top: 54px; }
  body.has-level.touch #combo { top: 88px; }
}
@media (max-width: 360px) {
  #level-badge .lb-num { display: none; }
  #level-badge { padding: 2px; }
}

/* --- level intro title card --- */
#level-intro { position: fixed; left: 0; right: 0; top: 54%; z-index: 7; pointer-events: none; display: flex; justify-content: center; padding: 0 16px; transform: translateY(-50%); }
#level-intro .li-card { position: relative; max-width: 520px; padding: 34px 28px 18px; border-radius: 26px; text-align: center; color: var(--brown);
  background: linear-gradient(#fff6e8, #ffe9cc); border: 4px solid #fff; box-shadow: 0 7px 0 #e3c8a0, 0 18px 44px rgba(0,0,0,.5); }
#level-intro[data-level="2"] .li-card { background: linear-gradient(#f2fbff, #cdeefa); box-shadow: 0 7px 0 #8fc9df, 0 18px 44px rgba(0,0,0,.5); }
#level-intro .li-ico { position: absolute; left: 50%; top: -30px; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; display: grid; place-items: center; font-size: 32px;
  background: radial-gradient(circle at 35% 30%, #fff7d1, #ffd166 55%, #f2a33a); border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.3); }
#level-intro[data-level="2"] .li-ico { background: radial-gradient(circle at 35% 30%, #e8fbff, #8fd8f0 55%, #3aa6d6); }
#level-intro .li-title { font-size: clamp(26px, 6.5vw, 44px); font-weight: 700; line-height: 1.1; color: var(--orange); text-shadow: 0 3px 0 #f6d3a8; }
#level-intro[data-level="2"] .li-title { color: #1f7fae; text-shadow: 0 3px 0 #bfe7f5; }
#level-intro .li-sub { margin-top: 6px; font-size: clamp(14px, 3.4vw, 17px); font-weight: 500; line-height: 1.35; opacity: .85; }
#level-intro.show .li-card { animation: introIn .6s cubic-bezier(.3, 1.6, .5, 1) both; }
#level-intro.show .li-ico { animation: badgeSpin .7s .15s cubic-bezier(.3, 1.6, .5, 1) both; }
#level-intro.out .li-card { animation: introOut .4s ease-in forwards; }
@keyframes introIn { from { transform: translateY(40px) scale(.6) rotate(-4deg); opacity: 0; } }
@keyframes introOut { to { transform: translateY(-24px) scale(.9); opacity: 0; } }

/* --- game over: level chip, unlock banner, next-level button --- */
.go-level { display: inline-block; font-size: 13px; font-weight: 600; background: #fdebd2; border-radius: 999px; padding: 2px 12px; margin: 4px 0 0; opacity: .85; }
.go-unlock { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; text-align: left; margin: 0 0 12px; padding: 8px 14px 8px 8px; border-radius: 18px;
  background: linear-gradient(135deg, #d9f4ff, #9fdcf2); border: 3px solid #fff; box-shadow: 0 4px 0 #6fb9d6, 0 0 0 3px rgba(94, 195, 230, .3); color: #134a66;
  animation: unlockIn .7s .25s cubic-bezier(.3, 1.6, .5, 1) both; }
.go-unlock::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%); transform: translateX(-120%); animation: shine 3s 1s ease-in-out infinite; pointer-events: none; }
.gu-ico { flex: 0 0 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; background: radial-gradient(circle at 35% 30%, #fff, #8fd8f0 60%, #3aa6d6); border: 3px solid #fff; animation: wobble 2s ease-in-out infinite; }
.gu-txt { display: flex; flex-direction: column; min-width: 0; }
.gu-txt b { font-size: 19px; line-height: 1.15; }
.gu-txt small { font-size: 13px; opacity: .8; }
@keyframes unlockIn { from { transform: scale(.4) rotate(-6deg); opacity: 0; } }
.go-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.next-btn { background: linear-gradient(#7fd3f0, #3aa6d6); box-shadow: 0 5px 0 #23759c, 0 8px 16px rgba(35, 117, 156, .35); }
.next-btn:hover { box-shadow: 0 7px 0 #23759c, 0 10px 18px rgba(35, 117, 156, .35); }
.next-btn:active { box-shadow: 0 1px 0 #23759c; }
#gameover.celebrate .next-btn { animation: nextPulse 1.2s 1s ease-in-out infinite; }
@keyframes nextPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.next-btn.secondary { font-size: 17px; padding: 10px 20px; color: #1f6f96; text-shadow: none; background: linear-gradient(#fff, #dff3fb); box-shadow: 0 4px 0 #8fc9df; }
.next-btn.secondary:hover { box-shadow: 0 6px 0 #8fc9df; }
@media (max-width: 600px) {
  .level-pick { gap: 8px; }
  .lvl-card { padding: 6px 6px 8px; border-radius: 16px; }
  .lvl-art { height: 58px; }
  .lvl-name { font-size: 16px; }
  .lvl-desc { font-size: 11.5px; }
  .lvl-lock i { top: 16px; }
  .go-btns .big-btn { font-size: 19px; padding: 11px 22px; }
  .gu-txt b { font-size: 17px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .lvl-art { height: 44px; }
  .lvl-desc { display: none; }
  .lvl-lock i { top: 8px; width: 32px; height: 32px; font-size: 16px; margin-left: -16px; }
}

/* ================= Fit-to-viewport cards (start / game over / udmærkelser) =================
   The card never exceeds the viewport: its body scrolls internally and the action bar
   (.card-foot: start / spil igen / luk) stays pinned at the bottom, always visible. */
.screen { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.card.fit-card { display: flex; flex-direction: column; padding: 0; overflow: hidden;
  max-height: calc(100vh - 24px); max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))); }
.fit-card > .card-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 22px 10px; scrollbar-width: thin; scrollbar-color: #e3c8a0 transparent; }
.fit-card > .card-foot { flex: none; position: relative; padding: 10px 18px 16px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; background: var(--cream); }
/* soft fade above the bar hints that more content scrolls underneath */
.fit-card > .card-foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 14px; pointer-events: none; background: linear-gradient(rgba(255, 246, 232, 0), var(--cream)); }
.fit-card .big-btn { padding: 11px 32px; }

/* --- start card --- */
.start-card { max-width: 500px; }
.start-card .card-scroll { padding-top: 10px; }
.start-card .teddy-art { height: 96px; transform: scale(.86); transform-origin: 50% 100%; margin-bottom: 0; }
.start-card h1 { margin: 0 0 4px; }
.start-card #intro { font-size: 15px; line-height: 1.35; margin-bottom: 10px; }
.start-card .level-pick { margin-bottom: 10px; }
#start-btn { min-width: 220px; }

/* compact how-to: small key caps, tight rows */
.start-card .howto { gap: 4px; padding: 8px 10px; margin-bottom: 10px; font-size: 13.5px; line-height: 1.25; border-radius: 14px; }
.start-card .howto .row { grid-template-columns: 112px 1fr; gap: 8px; }
.start-card kbd { min-width: 24px; height: 24px; font-size: 12px; padding: 0 5px; border-bottom-width: 3px; border-radius: 7px; }
.start-card kbd.wide { min-width: 78px; }
body.touch .start-card .howto .row { grid-template-columns: 36px 1fr; }
.start-card .options { margin-bottom: 10px; gap: 8px; }
.start-card .seg button, .start-card .toggle { font-size: 14px; padding: 5px 12px; }
.start-card .start-extra { margin: 0 0 4px; gap: 8px; }

/* collapsible top 5 */
.mini-board > summary { list-style: none; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 0; }
.mini-board > summary::-webkit-details-marker { display: none; }
.mini-board > summary::after { content: "▾"; font-size: 13px; transition: transform .2s; }
.mini-board:not([open]) > summary::after { transform: rotate(-90deg); }
.mini-board[open] > summary { margin-bottom: 4px; }
.mini-board { padding: 5px 8px 6px; }
.start-card .top-list.compact { gap: 3px; }
.start-card .top-list.compact li { padding: 1px 10px 1px 4px; font-size: 13.5px; }

/* wide screens: two columns – left: title, intro, levels; right: keys, options, top 5, badges */
@media (min-width: 780px) {
  .start-card { max-width: 900px; }
  .start-cols { display: grid; grid-template-columns: 1.08fr 1fr; gap: 0 22px; align-items: start; padding: 12px 24px 8px; }
  .start-side { padding-top: 8px; }
  .start-card .mini-board { max-width: none; }
}
/* short screens: drop the decorative teddy first */
@media (max-height: 700px) {
  .start-card .teddy-art { display: none; }
  .start-card .start-main { padding-top: 6px; }
  .go-card .go-badge { font-size: 40px; }
  .go-card .go-score span { font-size: 48px; }
}

/* --- game over card --- */
.go-card { max-width: 500px; }
.go-card .card-scroll { padding-top: 14px; }
.go-card h1 { margin: 2px 0 4px; }
.go-card .go-best { margin-bottom: 8px; }
.go-card .go-sum { margin-bottom: 10px !important; }
.go-card .go-board { margin: 0 0 6px; }
.go-card .top-list li { padding: 2px 12px 2px 6px; font-size: 15px; }
.go-card .card-foot { padding-top: 8px; align-items: center; }
/* "🏠 Menu": quiet secondary action next to the big buttons */
.menu-btn { font: 600 16px var(--font); color: var(--brown); background: linear-gradient(#fff, #f6e3c6); border: 2px solid #e3c8a0; border-bottom-width: 4px;
  border-radius: 999px; padding: 7px 16px; cursor: pointer; white-space: nowrap; transition: transform .1s; }
.menu-btn:hover { transform: translateY(-1px); }
.menu-btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.menu-btn:focus-visible { outline: 3px solid #f59a45; outline-offset: 2px; }
@media (max-width: 600px), (max-height: 500px) {
  .menu-btn { font-size: 14px; padding: 6px 12px; }
}
/* narrow: "Spil igen" + "Menu" share the first row, the next-level button wraps below (2 rows, not 3) */
@media (max-width: 600px) { .go-btns .next-btn { order: 2; } }

/* --- achievements --- */
.ach-card .ach-grid { margin-bottom: 6px; }

@media (max-width: 600px) {
  .fit-card > .card-scroll { padding: 12px 14px 8px; }
  .fit-card > .card-foot { padding: 8px 12px 12px; }
  .fit-card .big-btn { font-size: 20px; padding: 10px 26px; }
  .start-card .howto .row { grid-template-columns: 100px 1fr; }
  .start-card kbd.wide { min-width: 70px; }
  .go-card .go-stats { gap: 5px; }
}
@media (max-height: 500px) {
  .fit-card > .card-scroll { padding-top: 8px; }
  .fit-card > .card-foot { padding: 6px 12px 8px; }
  .fit-card .big-btn { font-size: 18px; padding: 8px 24px; }
  .card.fit-card h1 { font-size: 26px; }
  .start-card .lvl-art { height: 40px; }
  .go-card .go-badge { display: none; }
  .go-card .go-score span { font-size: 40px; }
}
/* wide screens: game-over gets a second column for the top-5 board + name entry */
@media (min-width: 780px) {
  .go-card:has(.go-board:not(.hidden)) { max-width: 860px; }
  .go-card:has(.go-board:not(.hidden)) > .card-scroll { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; align-items: center; padding: 14px 24px 8px; }
  .go-card .go-board { margin: 0; }
  .go-card .go-main, .go-card .go-board { min-width: 0; }
}
@media (max-height: 640px) { .go-card .go-badge { display: none; } }

/* ================= Bane 3 – Logistikcentret (platform mode) ================= */
/* --- level picker: three cards --- */
.level-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.level-pick .lvl-name { font-size: 16px; hyphens: manual; }
.lb-lbl { display: block; font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; opacity: .65; line-height: 1.2; }
#lvl-best-3:not(.none) { padding: 2px 9px 3px; border-radius: 12px; line-height: 1.2; }

/* warehouse illustration: concrete wall, blue/orange racks with boxes, hopping helmeted teddy, floor line */
.lvl-art.warehouse { background:
  linear-gradient(#cfd6dc 0 6px, transparent 6px),
  repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 22px),
  linear-gradient(#efe7d9, #e2d6c3 78%, #a69c8e 78%); }
.warehouse::before { content: ""; position: absolute; left: 50%; top: 5px; width: 34px; height: 3px; margin-left: -17px; border-radius: 2px; background: #4b5158;
  animation: fanBlur .5s linear infinite; z-index: 1; }
.warehouse::after { content: ""; position: absolute; left: 50%; top: 2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #c9ced3; border: 1px solid #4b5158; z-index: 2; }
@keyframes fanBlur { 50% { transform: scaleX(.35); } }
.warehouse .la-rack { position: absolute; bottom: 9px; width: 30px; height: 46px; border-left: 3px solid #2f6db3; border-right: 3px solid #2f6db3;
  background: repeating-linear-gradient(transparent 0 12px, #e8742c 12px 15px); }
.warehouse .la-rack::before, .warehouse .la-rack::after { content: ""; position: absolute; width: 11px; height: 9px; border-radius: 1px;
  background: linear-gradient(90deg, transparent 40%, #ecd2a2 40% 60%, transparent 60%), #c48a4a; border: 1px solid #8a5a2b; }
.warehouse .la-rack::before { left: 2px; top: 3px; }
.warehouse .la-rack::after { right: 2px; top: 18px; width: 14px; height: 9px; }
.warehouse .r1 { left: 4px; }
.warehouse .r2 { right: 4px; height: 52px; }
.warehouse .la-box { position: absolute; bottom: 9px; border-radius: 2px; border: 1px solid #8a5a2b;
  background: linear-gradient(90deg, transparent 40%, #ecd2a2 40% 60%, transparent 60%), linear-gradient(#d39a58, #b97d40); }
.warehouse .x1 { left: 30%; width: 17px; height: 14px; }
.warehouse .x2 { left: 50%; width: 19px; height: 24px; }
.warehouse .x3 { left: 50%; bottom: 33px; width: 13px; height: 10px; margin-left: 3px; }
.warehouse .la-coin { position: absolute; left: 41%; bottom: 40px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd166 45%, #e39a45);
  border: 1px solid #b4531a; animation: coinSpin 1.1s ease-in-out infinite; }
@keyframes coinSpin { 50% { transform: scaleX(.2); } }
.warehouse .la-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; background: linear-gradient(#ffd166 0 2px, #8f867a 2px); }
.warehouse .la-hopper { position: absolute; left: 28%; bottom: 22px; width: 20px; height: 20px; z-index: 3; animation: whHop 2.4s ease-in-out infinite; }
.warehouse .la-teddy { position: absolute; left: 0; bottom: 0; font-size: 18px; line-height: 1; }
.warehouse .la-helmet { position: absolute; left: 50%; top: 1px; width: 15px; height: 8px; margin-left: -7px; border-radius: 9px 9px 2px 2px;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #ffcc33 50%, #e0a800); box-shadow: 0 1px 0 #b98a00; }
.warehouse .la-helmet::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -1px; height: 2px; border-radius: 2px; background: #e0a800; }
@keyframes whHop {
  0%, 8% { left: 28%; bottom: 22px; transform: scaleY(1); }
  12% { transform: scaleY(.85); }
  30% { left: 39%; bottom: 44px; transform: scaleY(1.05) rotate(8deg); }
  48%, 58% { left: 50%; bottom: 32px; transform: scaleY(1) rotate(0); }
  78% { left: 39%; bottom: 46px; transform: rotate(-8deg); }
  100% { left: 28%; bottom: 22px; transform: none; }
}
@media (max-width: 600px) {
  .level-pick .lvl-name { font-size: 14px; }
  .lvl-desc { font-size: 11px; }
  .lvl-best { font-size: 11px; padding: 1px 6px; }
  .lvl-card.locked .lvl-lock { font-size: 11px; }
  .warehouse .r2 { display: none; }
}
@media (max-width: 420px) {
  .level-pick { gap: 6px; }
  .lvl-card { padding: 5px 4px 7px; }
  .lvl-desc { display: none; }
}
@media (max-height: 500px) { .lb-lbl { display: none; } }

/* --- HUD: show platform panels, hide balloon-only bits --- */
.pf-panel, #pf-progress { display: none; }
body.mode-platform .pf-panel { display: flex; }
body.mode-platform #pf-progress { display: flex; }
body.mode-platform #score-panel, body.mode-platform #time-panel, body.mode-platform #best-panel,
body.mode-platform #charge-wrap, body.mode-platform #balloon-slots, body.mode-platform #combo, body.mode-platform #gust,
body.mode-platform #btn-puff { display: none !important; }
body.mode-platform #btn-heat { background: radial-gradient(circle at 35% 30%, #ffc2cf, #ff6f8a 60%, #c23a57); }
body[data-level="3"] #level-badge { border-color: rgba(255, 204, 51, .6); }
body[data-level="3"] #level-badge .lb-ico { background: rgba(255, 204, 51, .35); }

#pf-lives-panel { padding: 6px 12px; }
.panel .pf-hearts { display: flex; gap: 3px; min-width: 0; font-size: 20px; line-height: 1; }
.heart { font-style: normal; display: inline-block; transition: filter .3s, opacity .3s; }
.heart.off { filter: grayscale(1) brightness(1.5); opacity: .35; }
.heart.break { animation: heartBreak .75s ease-out; }
.heart.pop { animation: heartPop .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes heartBreak { 0% { transform: scale(1); opacity: 1; filter: none; } 25% { transform: scale(1.6) rotate(-12deg); opacity: 1; filter: none; }
  55% { transform: scale(1.3) rotate(10deg) translateY(-3px); opacity: 1; filter: none; } 100% { transform: scale(1) translateY(0); } }
@keyframes heartPop { 0% { transform: scale(.2); } 100% { transform: scale(1); } }
#pf-lives-panel.hurt { animation: hurtPanel .5s ease-out; }
@keyframes hurtPanel { 0% { background: rgba(200, 30, 45, .92); transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 100% { transform: none; } }
#pf-coins-panel .ico { background: rgba(255, 209, 102, .3); }
#pf-coins.bump { animation: bump .45s cubic-bezier(.3, 1.8, .5, 1); }
#pf-coins-panel.bump { animation: panelGlow .6s ease-out; }
#pf-time { min-width: 4.3em; }
#pf-best-panel .ico { background: rgba(255, 209, 102, .3); }
.panel #pf-best { min-width: 4.3em; font-size: 18px; opacity: .9; }

/* course progress bar (bottom centre, where the thermometer sits in Bane 1–2) */
#pf-progress { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); width: min(460px, 60vw); height: 40px; z-index: 5; pointer-events: none; align-items: center; gap: 6px; --p: 0; }
.pp-track { position: relative; flex: 1; height: 16px; background: var(--panel); border: 3px solid var(--cream); border-radius: 999px; box-shadow: 0 3px 8px rgba(0,0,0,.35); }
.pp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); min-width: 10px; border-radius: 999px; background: linear-gradient(90deg, #ffd166, #f2a33a); }
.pp-marks { position: absolute; inset: 0; }
.pp-cp { position: absolute; bottom: 4px; width: 2px; height: 17px; margin-left: -1px; background: #fff; border-radius: 1px; box-shadow: 0 1px 2px rgba(0,0,0,.4); }
.pp-cp::after { content: ""; position: absolute; left: 2px; top: 0; border-left: 10px solid #d9c6a8; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: border-color .3s; }
.pp-cp.done::after { border-left-color: #2fbf71; }
.pp-cp.reached { animation: cpWave .8s cubic-bezier(.3, 1.8, .5, 1); transform-origin: 50% 100%; }
@keyframes cpWave { 0% { transform: scale(1); } 30% { transform: scale(1.6) rotate(-10deg); } 100% { transform: scale(1); } }
.pp-teddy { position: absolute; left: calc(var(--p) * 100%); top: 50%; font-size: 22px; line-height: 1; transform: translate(-50%, -62%); z-index: 2; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); transition: left .12s linear; }
.pp-helmet { position: absolute; left: 50%; top: -2px; width: 17px; height: 9px; margin-left: -8px; border-radius: 10px 10px 2px 2px;
  background: radial-gradient(circle at 35% 30%, #fff3b0, #ffcc33 50%, #e0a800); box-shadow: 0 1px 0 #b98a00; }
.pp-goal { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #3a2414; padding: 3px 7px; border-radius: 8px; border: 2px solid var(--cream);
  background: repeating-linear-gradient(-45deg, #ffd166 0 6px, #ffe39a 6px 12px); box-shadow: 0 3px 8px rgba(0,0,0,.35); }
#pf-progress.cp-hit .pp-track { animation: panelGlow .7s ease-out; }
body.touch #pf-progress { --tb: max(14px, env(safe-area-inset-bottom)); bottom: calc(var(--tb) + 6px); transform: none; width: auto; max-width: 340px; margin: 0 auto;
  left: calc(max(14px, env(safe-area-inset-left)) + 112px + 12px); right: calc(max(12px, env(safe-area-inset-right)) + 84px + 10px); }
@media (max-width: 600px) {
  #pf-progress { width: calc(100vw - 28px); bottom: 16px; }
  body.touch #pf-progress { left: calc(max(14px, env(safe-area-inset-left)) + 100px + 10px); right: calc(max(12px, env(safe-area-inset-right)) + 72px + 8px); width: auto; }
  body.touch .pp-goal { font-size: 10px; padding: 2px 4px; }
  #pf-best-panel, body.mode-platform #level-badge { display: none !important; }
  #pf-lives-panel { padding: 4px 8px; }
  .panel .pf-hearts { font-size: 16px; gap: 1px; }
  .panel #pf-time { min-width: 3.9em; font-size: 16px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.touch #pf-progress { --tb: max(10px, env(safe-area-inset-bottom)); }
}
@media (max-width: 900px) and (min-width: 601px) { #pf-best-panel small { display: none; } }

/* toasts: checkpoint / lost life */
#pf-toast { position: fixed; top: 24%; left: 50%; z-index: 7; pointer-events: none; transform: translateX(-50%); white-space: nowrap;
  font-size: clamp(20px, 5vw, 30px); font-weight: 700; color: #fff; padding: 6px 22px; border-radius: 999px; border: 3px solid #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,.2), 0 10px 24px rgba(0,0,0,.35); text-shadow: 0 2px 0 rgba(0,0,0,.2); }
#pf-toast.cp { background: linear-gradient(135deg, #5fd39a, #2a9d8f); }
#pf-toast.hurt { background: linear-gradient(135deg, #ff7a7a, #e63946); }
#pf-toast.show { animation: pfToastIn .45s cubic-bezier(.3, 1.7, .5, 1) both; }
#pf-toast.out { animation: pfToastOut .35s ease-in forwards; }
@keyframes pfToastIn { from { transform: translateX(-50%) scale(.3) rotate(-6deg); opacity: 0; } }
@keyframes pfToastOut { to { transform: translateX(-50%) translateY(-16px) scale(.85); opacity: 0; } }
#pf-hurt { position: fixed; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(230, 57, 70, .55)); opacity: 0; }
#pf-hurt.flash { animation: hurtFlash .7s ease-out; }
@keyframes hurtFlash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* level intro + unlock banner in warehouse colours */
#level-intro[data-level="3"] .li-card { background: linear-gradient(#fffaf0, #fff0c2); box-shadow: 0 7px 0 #d9b44a, 0 18px 44px rgba(0,0,0,.5); }
#level-intro[data-level="3"] .li-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; border-radius: 22px 22px 0 0;
  background: repeating-linear-gradient(-45deg, #ffcc33 0 10px, #3a2414 10px 20px); }
#level-intro[data-level="3"] .li-ico { background: radial-gradient(circle at 35% 30%, #fff7d1, #ffcc33 55%, #e0a800); z-index: 1; }
#level-intro[data-level="3"] .li-title { color: #c26a12; }
.go-unlock[data-level="3"] { background: linear-gradient(135deg, #fff6cf, #ffd97a); box-shadow: 0 4px 0 #d9b44a, 0 0 0 3px rgba(255, 204, 51, .35); color: #5a3a08; }
.go-unlock[data-level="3"] .gu-ico { background: radial-gradient(circle at 35% 30%, #fff, #ffd166 60%, #e0a800); }

/* --- game over (out of lives): how far Teddy got --- */
#gameover.platform .go-score, #gameover.platform .go-best, #gameover.platform .go-stats, #gameover.platform .go-sum { display: none; }
.go-platform { margin: 4px 0 12px; --p: 0; }
.gp-track { position: relative; height: 18px; margin: 30px 52px 8px 12px; background: #f3dcbc; border: 3px solid #fff; border-radius: 999px; box-shadow: 0 3px 0 #e3c8a0; }
.gp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); min-width: 12px; border-radius: 999px; background: linear-gradient(90deg, #ffd166, #f2a33a); }
.go-platform .pp-cp { background: #8a6a4a; }
.gp-teddy { position: absolute; left: calc(var(--p) * 100%); top: 50%; font-size: 28px; line-height: 1; transform: translate(-50%, -66%); z-index: 2; }
.gp-teddy .pp-helmet { top: -1px; width: 21px; height: 11px; margin-left: -10px; }
.gp-goal { position: absolute; left: 100%; top: 50%; transform: translate(6px, -50%); font-size: 12px; font-weight: 700; color: #3a2414; padding: 2px 6px; border-radius: 7px;
  background: repeating-linear-gradient(-45deg, #ffd166 0 6px, #ffe39a 6px 12px); border: 2px solid #fff; box-shadow: 0 2px 0 #e3c8a0; }
.gp-txt { font-weight: 600; margin: 0 0 10px !important; }
.pf-stats { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 6px; margin: 4px 0 8px; }
.stat.pf-coins { background: #fff0bf; }
.stat.pf-lives { background: #f7dcd6; }
.stat.pf-cp { background: #e2f4ea; }
.pf-stats .stat b { font-variant-numeric: tabular-nums; }

/* --- level complete card --- */
#complete { z-index: 21; }
.done-card { position: relative; max-width: 460px; }
.done-stars { display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin: 2px 0 0; line-height: 1; }
.done-stars .star { font-size: 50px; color: #e8dccb; text-shadow: 0 3px 0 #d9c8b0; }
.done-stars .s2 { font-size: 64px; margin-bottom: 8px; }
.done-stars .star.on { color: #ffd166; text-shadow: 0 3px 0 #e39a45, 0 0 16px rgba(255, 200, 60, .75); }
.done-stars.show .star.on { animation: starPop .6s cubic-bezier(.3, 1.8, .5, 1) both; }
.done-stars.show .s1.on { animation-delay: .1s; }
.done-stars.show .s2.on { animation-delay: .35s; }
.done-stars.show .s3.on { animation-delay: .6s; }
@keyframes starPop { 0% { transform: scale(0) rotate(-120deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.done-card h1 { margin: 4px 0 2px; }
.done-sub { font-size: 15px; font-weight: 500; opacity: .85; margin-bottom: 8px !important; }
.done-card .pf-stats { margin-bottom: 6px; }
.done-card .stat b { font-size: 20px; }
.done-card .go-best { margin: 2px 0 4px; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.confetti i { position: absolute; top: -14px; left: var(--x); width: 8px; height: 12px; border-radius: 2px; background: var(--c); opacity: 0; }
#complete.celebrate .confetti i { animation: confFall 2.8s var(--d) cubic-bezier(.3, .2, .6, 1) forwards; }
@keyframes confFall { 0% { opacity: 1; transform: translate(0, 0) rotate(var(--r)); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), 420px) rotate(calc(var(--r) + 540deg)); } }
@media (max-height: 500px) {
  .done-stars .star { font-size: 34px; }
  .done-stars .s2 { font-size: 42px; margin-bottom: 4px; }
  .done-sub { margin-bottom: 4px !important; }
  .gp-track { margin-top: 24px; }
}
.lvl-best { white-space: nowrap; }
#lvl-best-3 { white-space: normal; }
@media (max-height: 500px) { .lvl-best { font-size: 11px; padding: 1px 6px; } }

/* ================= Bane 4 – Indkøbscentret (cart mode) ================= */
.howto kbd.mid { min-width: 50px; }

/* --- level picker: four cards – 2×2 in one column, a row of 4 where there is room --- */
.level-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#lvl-best-4 { white-space: nowrap; }
@media (min-width: 1180px) and (min-height: 700px) {
  .start-card { max-width: 1100px; }
  .start-card .level-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .start-card .lvl-card { padding: 6px 5px 8px; }
  .start-card .lvl-art { height: 60px; }
  .start-card .level-pick .lvl-name { font-size: 15px; }
  .start-card .lvl-desc { font-size: 11.5px; }
  .start-card .lvl-best { font-size: 11px; padding: 1px 6px; }
  .start-card .lvl-card.locked .lvl-lock { font-size: 11px; }
}
/* two-column start card with a 2×2 picker on a short screen (e.g. 800×600): slimmer art, 2-line descriptions */
@media (min-width: 780px) and (max-height: 700px) {
  .start-card .lvl-art { height: 48px; }
  .start-card .lb-lbl { display: none; }
  .start-card .lvl-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .start-card .lvl-card { padding-bottom: 7px; }
}
/* short landscape (phones on their side): one compact row of four, lock text only as tooltip */
@media (max-height: 500px) and (min-width: 700px) {
  .start-card .level-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .start-card .lvl-card { padding: 4px 4px 6px; }
  .start-card .lvl-art { height: 40px; }
  .start-card .lvl-desc { display: none; }
  .start-card .level-pick .lvl-name { font-size: 13px; }
  .start-card .lvl-card.locked .lvl-lock { font-size: 0; margin: 0; }
  .start-card .lvl-best { font-size: 10px; padding: 1px 5px; }
  .start-card .lb-lbl { display: none; }
}

/* mall illustration: upper-floor shop fronts with awnings, glass balustrade, tiled floor, teddy + cart, falling apple */
.lvl-art.mall { background:
  linear-gradient(#f7efe2 0 50%, #dfe9ea 50% 54%, transparent 54%),
  repeating-linear-gradient(90deg, #f3e6d3 0 15px, #e8d8c0 15px 16px); }
.mall::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; z-index: 1;
  background: repeating-linear-gradient(90deg, rgba(120, 190, 210, .55) 0 14px, rgba(255,255,255,.9) 14px 16px); }
.mall .la-shops { position: absolute; left: 3px; right: 3px; top: 10px; height: 22px; display: flex; gap: 3px; }
.mall .la-shop { position: relative; flex: 1; border-radius: 2px 2px 0 0; background: linear-gradient(transparent 7px, #bfe3ef 7px, #e8f6fb 85%, #9db7bf 85%); border: 1px solid rgba(90, 53, 25, .25); border-bottom: 0; }
.mall .la-shop::before { content: ""; position: absolute; left: -1px; right: -1px; top: 0; height: 7px; border-radius: 2px 2px 3px 3px; background: repeating-linear-gradient(90deg, var(--aw) 0 5px, #fff 5px 10px); }
.mall .s1 { --aw: #e63946; } .mall .s2 { --aw: #2a9d8f; } .mall .s3 { --aw: #f2a33a; }
.mall .la-rail { position: absolute; left: 0; right: 0; top: 32px; height: 5px; background: linear-gradient(rgba(170, 220, 235, .7), rgba(120, 180, 200, .5)); border-top: 1.5px solid #8a9aa3; }
.mall .la-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(90, 53, 25, .12); }
.mall .la-apple { position: absolute; left: 61%; top: 26px; font-size: 13px; line-height: 1; z-index: 2; animation: appleDrop 2.6s cubic-bezier(.45, 0, .8, .6) infinite; }
@keyframes appleDrop { 0%, 12% { transform: translateY(0) rotate(0); opacity: 0; } 18% { opacity: 1; } 62% { transform: translateY(24px) rotate(160deg); opacity: 1; } 66%, 100% { transform: translateY(24px) rotate(160deg); opacity: 0; } }
.mall .la-pusher { position: absolute; left: 50%; bottom: 3px; width: 52px; height: 26px; margin-left: -34px; z-index: 3; animation: cartRoll 2.6s ease-in-out infinite; }
.mall .la-teddy { position: absolute; left: 0; bottom: 1px; font-size: 21px; line-height: 1; }
.mall .la-cart { position: absolute; right: 0; bottom: 4px; width: 26px; height: 15px; border: 2px solid #5f6b73; border-radius: 1px 1px 4px 4px;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(95, 107, 115, .6) 4px 5px), rgba(200, 220, 230, .35); }
.mall .la-pusher::before { content: ""; position: absolute; right: 25px; bottom: 17px; width: 8px; height: 2px; border-radius: 1px; background: #5f6b73; }
.mall .la-pusher::after { content: ""; position: absolute; right: 3px; bottom: 0; width: 20px; height: 4px;
  background: radial-gradient(circle at 2px 2px, #3a3f44 1.8px, transparent 2.2px) 0 0 / 16px 4px repeat-x; }
.mall .la-goods { position: absolute; left: 3px; right: 3px; bottom: 0; height: 6px; border-radius: 3px 3px 0 0; background: radial-gradient(circle at 25% 60%, #e63946 0 2.5px, transparent 3px), radial-gradient(circle at 60% 50%, #ffd166 0 3px, transparent 3.5px), radial-gradient(circle at 82% 70%, #7dcfb6 0 2.5px, transparent 3px); }
@keyframes cartRoll { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(8px); } }
.lvl-card.locked .mall .la-apple { opacity: 0; }

/* --- HUD: cart mode shows score/time/record + cart meter; hides balloon-only bits --- */
#cart-meter, #cart-pops, #btn-empty { display: none; }
body.mode-cart #cart-meter { display: flex; }
body.mode-cart #cart-pops { display: flex; }
body.mode-cart #charge-wrap, body.mode-cart #balloon-slots, body.mode-cart .lv-card,
body.mode-cart #btn-puff, body.mode-cart #btn-heat, body.mode-cart #btn-jump { display: none !important; }
body.mode-cart #btn-empty { display: flex; }
body:not(.mode-cart) #checkout-arrow, body:not(.mode-cart) #cart-deliver { display: none !important; }
body.mode-cart #score-panel .ico { background: rgba(230, 57, 70, .3); }
body[data-level="4"] #level-badge { border-color: rgba(125, 207, 182, .6); }
body[data-level="4"] #level-badge .lb-ico { background: rgba(125, 207, 182, .35); }

/* cart meter (bottom centre, where the thermometer sits in Bane 1–2) */
#cart-meter { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 5; pointer-events: none; align-items: center; gap: 6px;
  padding: 5px 10px 5px 5px; background: var(--panel); border: 2px solid rgba(255, 220, 170, .3); border-radius: 999px; box-shadow: 0 3px 0 rgba(0,0,0,.25), 0 6px 16px rgba(0,0,0,.3); backdrop-filter: blur(4px); }
#cart-meter .cm-ico { font-style: normal; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 19px;
  background: radial-gradient(circle at 35% 30%, #e8fbf5, #7dcfb6 60%, #2a9d8f); border: 2px solid var(--cream); }
.cart-slots { display: flex; gap: 3px; }
.cslot { font-style: normal; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 16px; line-height: 1;
  background: rgba(255, 233, 204, .1); border: 2px dashed rgba(255, 233, 204, .35); transition: background .2s, border-color .2s; }
.cslot.on { background: rgba(255, 246, 232, .92); border: 2px solid #fff; box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.cslot.pop { animation: slotPop .4s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes slotPop { 0% { transform: translateY(-14px) scale(.3) rotate(-30deg); } 100% { transform: none; } }
.cart-label { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 3px; text-align: center; white-space: nowrap; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: .3px; text-shadow: 0 1px 3px rgba(0,0,0,.85); }
#cart-meter.full { border-color: #ffe08a; background: rgba(150, 40, 30, .85); animation: cartGlow .55s ease-in-out infinite alternate; }
#cart-meter.full .cm-ico { background: radial-gradient(circle at 35% 30%, #fff7d1, #ffd166 55%, #f2a33a); }
#cart-meter.full .cart-label { font-size: 17px; color: var(--gold); animation: pulse .55s ease-in-out infinite; }
@keyframes cartGlow { from { box-shadow: 0 0 0 0 rgba(255, 209, 102, 0), 0 6px 16px rgba(0,0,0,.3); } to { box-shadow: 0 0 16px 4px rgba(255, 209, 102, .85), 0 6px 16px rgba(0,0,0,.3); } }
#cart-meter.shake .cart-slots { animation: shake .4s; }
#cart-meter.emptied .cm-ico { animation: badgeSpin .6s cubic-bezier(.3, 1.6, .5, 1); }

/* checkout edge arrow: a honey badge on the screen edge with a rotating pointer */
#checkout-arrow { position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  transform: translate(var(--ax, 50vw), var(--ay, 50vh)); transition: transform .12s linear; --rot: 0rad; }
#checkout-arrow .ca-rot { position: absolute; inset: 0; transform: rotate(var(--rot)); }
#checkout-arrow .ca-rot::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff7d1, #ffd166 55%, #f2a33a);
  border: 3px solid #fff; box-shadow: 0 3px 0 #b4531a, 0 6px 16px rgba(0,0,0,.4); }
#checkout-arrow .ca-tip { position: absolute; left: 100%; top: 50%; margin: -11px 0 0 -6px; width: 0; height: 0; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.35)); animation: tipNudge .6s ease-in-out infinite alternate; }
#checkout-arrow .ca-tip::after { content: ""; position: absolute; left: -15px; top: -7px; border-left: 11px solid var(--orange); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
@keyframes tipNudge { to { transform: translateX(6px); } }
#checkout-arrow .ca-lbl { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: .3px; color: var(--brown-d); }
#checkout-arrow.show { animation: arrowIn .4s ease-out; }
@keyframes arrowIn { from { opacity: 0; } }
#checkout-arrow.show .ca-rot::before { animation: badgeSpin .5s cubic-bezier(.3, 1.6, .5, 1); }

/* catch / combo / junk toasts (stack under the HUD) */
#cart-pops { position: fixed; top: 25%; left: 50%; transform: translateX(-50%); z-index: 7; pointer-events: none; flex-direction: column; align-items: center; gap: 6px; }
.cpop { white-space: nowrap; font-size: clamp(16px, 4vw, 22px); font-weight: 700; color: #fff; padding: 3px 16px; border-radius: 999px; border: 3px solid #fff;
  background: linear-gradient(135deg, #5fd39a, #2a9d8f); box-shadow: 0 3px 0 rgba(0,0,0,.2), 0 8px 18px rgba(0,0,0,.3); text-shadow: 0 2px 0 rgba(0,0,0,.18);
  animation: cpopIn .35s cubic-bezier(.3, 1.8, .5, 1) both, cpopOut .35s .95s ease-in forwards; }
.cpop.combo { background: linear-gradient(135deg, #ff8fa3, #f2a33a); }
.cpop.bonus { background: linear-gradient(135deg, #ffd166, #f2a33a); color: var(--brown-d); text-shadow: none; }
.cpop.junk { background: linear-gradient(135deg, #9a8c7a, #6b5d4d); }
.cpop.miss { background: linear-gradient(135deg, #ff7a7a, #e63946); }
.cpop.full { background: linear-gradient(135deg, #e8742c, #b4531a); }
@keyframes cpopIn { from { transform: scale(.3) rotate(-6deg); opacity: 0; } }
@keyframes cpopOut { to { transform: translateY(-14px) scale(.85); opacity: 0; } }

/* "Ka-ching!" delivery */
#cart-deliver { position: fixed; top: 38%; left: 50%; z-index: 8; pointer-events: none; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center;
  padding: 10px 30px 12px; border-radius: 26px; border: 4px solid #fff; color: var(--brown-d); text-align: center; white-space: nowrap;
  background: linear-gradient(#fff7d1, #ffd166); box-shadow: 0 6px 0 #e39a45, 0 16px 40px rgba(0,0,0,.45); }
#cart-deliver b { font-size: clamp(30px, 8vw, 48px); line-height: 1.05; color: var(--orange-d); text-shadow: 0 3px 0 #fff0bf; }
#cart-deliver small { font-size: clamp(14px, 3.6vw, 18px); font-weight: 600; opacity: .85; }
#cart-deliver.show { animation: deliverIn .55s cubic-bezier(.3, 1.7, .5, 1) both; }
#cart-deliver.out { animation: deliverOut .4s ease-in forwards; }
@keyframes deliverIn { from { transform: translate(-50%, -50%) scale(.3) rotate(-8deg); opacity: 0; } }
@keyframes deliverOut { to { transform: translate(-50%, -80%) scale(.9); opacity: 0; } }
.cd-coins { position: absolute; inset: 0; pointer-events: none; }
.cd-coins i { position: absolute; left: 50%; top: 50%; font-style: normal; font-size: 22px; opacity: 0; }
#cart-deliver.show .cd-coins i { animation: coinBurst .9s ease-out forwards; }
.cd-coins i:nth-child(1) { --dx: -120px; --dy: -50px; } .cd-coins i:nth-child(2) { --dx: -80px; --dy: -80px; animation-delay: .05s; }
.cd-coins i:nth-child(3) { --dx: -10px; --dy: -95px; animation-delay: .1s; } .cd-coins i:nth-child(4) { --dx: 60px; --dy: -85px; animation-delay: .05s; }
.cd-coins i:nth-child(5) { --dx: 120px; --dy: -45px; } .cd-coins i:nth-child(6) { --dx: 100px; --dy: 30px; animation-delay: .1s; }
@keyframes coinBurst { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.2) rotate(200deg); } }

/* touch: only the joystick + an "🛒 Tøm" button; the meter moves under the HUD row */
#btn-empty { right: 0; bottom: 0; width: var(--heat); height: var(--heat); font-size: 28px; background: radial-gradient(circle at 35% 30%, #c9f2e4, #7dcfb6 55%, #2a9d8f); }
#touch-btns #btn-empty { opacity: .5; }
#touch-btns #btn-empty.ready { opacity: .85; }
#touch-btns #btn-empty.down { opacity: 1; }
body.touch.mode-cart #cart-meter { bottom: auto; top: calc(max(10px, env(safe-area-inset-top)) + 58px); }
body.touch.mode-cart #cart-meter .cart-label { bottom: auto; top: 100%; margin: 3px 0 0; }
body.touch.mode-cart #cart-pops { top: 34%; }
@media (max-width: 600px) {
  #cart-meter { bottom: 14px; gap: 4px; padding: 4px 8px 4px 4px; }
  #cart-meter .cm-ico { width: 28px; height: 28px; font-size: 15px; }
  .cart-slots { gap: 2px; }
  .cslot { width: 22px; height: 22px; font-size: 13px; border-radius: 6px; }
  .cart-label { font-size: 12px; }
  #cart-meter.full .cart-label { font-size: 14px; }
  body.touch.mode-cart #cart-meter { top: calc(max(10px, env(safe-area-inset-top)) + 46px); }
  #checkout-arrow { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  #checkout-arrow .ca-lbl { font-size: 9.5px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.touch.mode-cart #cart-meter { top: auto; bottom: max(10px, env(safe-area-inset-bottom)); }
  body.touch.mode-cart #cart-meter .cart-label { top: auto; bottom: 100%; margin: 0 0 3px; }
  .cslot { width: 22px; height: 22px; font-size: 13px; }
}

/* level intro + unlock banner in mall colours */
#level-intro[data-level="4"] .li-card { background: linear-gradient(#f4fffb, #d3f3e8); box-shadow: 0 7px 0 #8fcdb9, 0 18px 44px rgba(0,0,0,.5); }
#level-intro[data-level="4"] .li-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 22px 22px 0 0;
  background: repeating-linear-gradient(90deg, #e63946 0 14px, #fff 14px 28px); }
#level-intro[data-level="4"] .li-ico { background: radial-gradient(circle at 35% 30%, #e8fbf5, #7dcfb6 55%, #2a9d8f); z-index: 1; }
#level-intro[data-level="4"] .li-title { color: #1f8a72; text-shadow: 0 3px 0 #bdeadb; }
.go-unlock[data-level="4"] { background: linear-gradient(135deg, #e5fbf3, #a6e3cf); box-shadow: 0 4px 0 #6fbfa6, 0 0 0 3px rgba(125, 207, 182, .35); color: #13503f; }
.go-unlock[data-level="4"] .gu-ico { background: radial-gradient(circle at 35% 30%, #fff, #7dcfb6 60%, #2a9d8f); }
#complete .go-unlock { margin: 6px 0 4px; }
#complete.celebrate .next-btn:not(.secondary) { animation: nextPulse 1.2s 1s ease-in-out infinite; }

/* --- game over (Bane 4): caught / missed / junk / delivered tiles instead of balloon tiles --- */
#gameover.cart .go-stats, #gameover.cart .go-sum { display: none; }
.go-cart { margin: 4px 0 12px; }
.stat.pf-caught { background: #e2f4ea; }
.stat.pf-missed { background: #f7dcd6; }
.stat.pf-junk { background: #e9e2da; }
.stat.pf-delivered { background: #fff0bf; }

/* ================= Bane 5 – Kontrolcentret (control mode) ================= */
/* --- level picker: five cards --- */
.lvl-txt { display: contents; }
/* one-column start card: 2 columns, Bane 5 is a wide card across both (art left, text right) */
.level-pick .lvl-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; text-align: left; }
.lvl-wide .lvl-art { width: 46%; flex: 0 0 46%; }
.lvl-wide .lvl-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; flex: 1; }
.lvl-wide .lvl-num { margin-top: 0; }
.lvl-wide .lvl-best { margin-top: 4px; }
.lvl-wide.locked .lvl-lock { align-items: flex-start; text-align: left; }
.lvl-wide .lvl-lock i { left: calc(8px + 23%); top: 50%; margin-top: -19px; }
#lvl-best-5 { white-space: nowrap; }
.lb-stars { color: #e39a45; letter-spacing: -1px; }
/* two-column start card: 3 + 2 */
@media (min-width: 780px) {
  .start-card .level-pick { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .start-card .level-pick .lvl-card { grid-column: span 2; }
  .start-card .level-pick .lvl-card[data-level="4"] { grid-column: 1 / span 3; }
  .start-card .level-pick .lvl-card[data-level="5"] { grid-column: 4 / span 3; }
  .start-card .lvl-wide { flex-direction: column; align-items: center; text-align: center; gap: 1px; }
  .start-card .lvl-wide .lvl-art { width: 100%; flex: none; }
  .start-card .lvl-wide .lvl-txt { display: contents; }
  .start-card .lvl-wide .lvl-num { margin-top: 4px; }
  .start-card .lvl-wide.locked .lvl-lock { align-items: center; text-align: center; }
  .start-card .lvl-wide .lvl-lock i { left: 50%; top: 22px; margin-top: 0; }
  .start-card .lvl-card { padding: 6px 5px 8px; }
  .start-card .level-pick .lvl-name { font-size: 15px; }
  .start-card .lvl-desc { font-size: 11.5px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .start-card .lvl-best { font-size: 11px; padding: 1px 6px; }
  .start-card .lvl-card.locked .lvl-lock { font-size: 11px; }
}
@media (min-width: 780px) and (max-height: 700px) {
  .start-card .lvl-art { height: 44px; }
  .start-card .lvl-lock i, .start-card .lvl-wide .lvl-lock i { top: 10px; width: 32px; height: 32px; font-size: 16px; margin-left: -16px; }
}
.start-main, .start-side { min-width: 0; }
@media (min-width: 780px) { .start-cols { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } }
/* short landscape: one compact row that scrolls sideways */
@media (max-height: 500px) and (orientation: landscape) {
  .start-card .level-pick { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; gap: 6px; padding: 10px 8px 6px 2px; margin: -6px -2px 6px; scrollbar-width: thin; scrollbar-color: #e3c8a0 transparent; overscroll-behavior-x: contain; }
  .start-card .level-pick .lvl-card { flex: 0 0 108px; scroll-snap-align: start; grid-column: auto; padding: 4px 4px 6px; }
  .start-card .lvl-wide { flex-direction: column; align-items: center; text-align: center; gap: 1px; }
  .start-card .lvl-wide .lvl-art { width: 100%; flex: none; }
  .start-card .lvl-wide .lvl-txt { display: contents; }
  .start-card .lvl-lock i, .start-card .lvl-wide .lvl-lock i { left: 50%; top: 8px; margin-top: 0; }
  .start-card .lvl-art { height: 38px; }
  .start-card .lvl-desc { display: none; }
  .start-card .level-pick .lvl-name { font-size: 13px; }
  .start-card .lvl-num { margin-top: 2px; font-size: 10px; }
  .start-card .lvl-card.locked .lvl-lock { font-size: 0; margin: 0; }
  .start-card .lvl-best { font-size: 10px; padding: 1px 5px; }
  .start-card .lb-lbl { display: none; }
}

/* control-room illustration: window into the hall, three monitors, desk with knobs, teddy with a headset */
.lvl-art.control { background: linear-gradient(#2b3f58, #1c2a3d 60%, #7a5a3c 60%, #8f6a47 66%, #6b4e33); }
.control .la-win { position: absolute; left: 5px; right: 5px; top: 4px; height: 17px; border-radius: 3px; border: 2px solid #0f1824;
  background: linear-gradient(#eef4f8 0 3px, #cfdbe4 3px 70%, #d9a86a 70%); overflow: hidden; }
.control .la-win::before { content: ""; position: absolute; left: 50%; top: 3px; width: 24px; height: 2px; margin-left: -12px; border-radius: 1px; background: #8f989f; animation: fanBlur .5s linear infinite; }
.control .la-win::after { content: ""; position: absolute; left: 50%; top: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #1d1f22; }
.control .la-mon { position: absolute; bottom: 26px; width: 22px; height: 15px; border-radius: 3px; border: 2px solid #0f1824; background: #0c2534; overflow: hidden;
  box-shadow: 0 0 6px rgba(127, 227, 255, .45); }
.control .m1 { left: 9%; }
.control .m2 { left: 50%; width: 26px; height: 17px; margin-left: -13px; bottom: 27px; }
.control .m3 { right: 9%; }
.control .m1 i { position: absolute; left: 2px; right: 2px; bottom: 2px; height: 8px; border-top: 2px solid #ff9a3d; border-radius: 60% 40% 0 0; }
.control .m1 i::after { content: ""; position: absolute; left: 0; right: 0; top: 3px; height: 4px; border-top: 2px solid #5ec3ff; border-radius: 0 0 50% 50%; }
.control .m2 i { position: absolute; inset: 2px; background: radial-gradient(circle at 30% 45%, #ffd166 0 3px, transparent 3.5px),
  linear-gradient(90deg, transparent 52%, #5fd39a 52% 62%, transparent 62% 70%, #5fd39a 70% 80%, transparent 80% 86%, #ff6a4a 86% 94%, transparent 94%) 0 100% / 100% 60% no-repeat; animation: monBlink 2.4s steps(2) infinite; }
.control .m3 i { position: absolute; left: 3px; right: 3px; bottom: 2px; height: 9px;
  background: linear-gradient(#5fd39a, #5fd39a) 0 100% / 3px 70% no-repeat, linear-gradient(#5fd39a, #5fd39a) 5px 100% / 3px 40% no-repeat,
  linear-gradient(#ffd166, #ffd166) 10px 100% / 3px 85% no-repeat, linear-gradient(#5ec3ff, #5ec3ff) 15px 100% / 3px 55% no-repeat; animation: monBars 1.6s ease-in-out infinite alternate; transform-origin: bottom; }
@keyframes monBlink { 50% { filter: brightness(1.35); } }
@keyframes monBars { to { transform: scaleY(.6); } }
.control .la-desk { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; }
.control .la-knob { position: absolute; top: 6px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid #2b1d10; box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.control .k1 { right: 26%; background: radial-gradient(circle at 35% 30%, #ffb3a8, #e63946); }
.control .k2 { right: 17%; background: radial-gradient(circle at 35% 30%, #cfeaff, #3a8fe0); }
.control .k3 { right: 8%; background: radial-gradient(circle at 35% 30%, #fff, #b9c0c8); animation: knobTurn 3s ease-in-out infinite; }
.control .k3::after { content: ""; position: absolute; left: 2px; top: 0; width: 1.5px; height: 3px; background: #2b1d10; }
@keyframes knobTurn { 50% { transform: rotate(120deg); } }
.control .la-led { position: absolute; left: 9%; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: #5fd39a; box-shadow: 0 0 6px #5fd39a; animation: ledBlink 1.2s steps(2) infinite; }
.control .la-led::after { content: ""; position: absolute; left: 10px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: #ffd166; box-shadow: 0 0 5px #ffd166; }
@keyframes ledBlink { 50% { opacity: .35; } }
.control .la-op { position: absolute; left: 50%; bottom: 2px; width: 26px; height: 26px; margin-left: -13px; z-index: 2; animation: bob 2.6s ease-in-out infinite; }
.control .la-teddy { left: 0; bottom: 0; font-size: 23px; }
.control .la-headset { position: absolute; left: 2px; top: -1px; width: 21px; height: 12px; border: 2.5px solid #2b2f36; border-bottom: 0; border-radius: 12px 12px 0 0; }
.control .la-headset::before { content: ""; position: absolute; left: -4px; bottom: -6px; width: 6px; height: 8px; border-radius: 3px; background: #2b2f36; }
.control .la-headset::after { content: ""; position: absolute; left: -1px; bottom: -10px; width: 10px; height: 2px; border-radius: 1px; background: #2b2f36; transform: rotate(28deg); transform-origin: left; box-shadow: 3px 0 0 #e63946; }
.lvl-card.locked .control .la-mon { box-shadow: none; }

/* --- HUD: control mode hides the other levels' HUD and shows the operator console --- */
#ctl, #ctl-alarms { display: none; }
body:not(.mode-control) #ctl-tut { display: none !important; }
body.mode-control #ctl { display: block; }
body.mode-control #ctl-alarms { display: flex; }
body.mode-control #score-panel, body.mode-control #time-panel, body.mode-control #best-panel, body.mode-control .pf-panel,
body.mode-control #level-badge, body.mode-control #charge-wrap, body.mode-control #balloon-slots, body.mode-control #combo,
body.mode-control #gust, body.mode-control #pu-chips, body.mode-control #pf-progress, body.mode-control #cart-meter,
body.mode-control #cart-pops, body.mode-control .lv-card, body.mode-control .lv-banner, body.mode-control #touch { display: none !important; }
body.mode-control #corner-btns { flex-direction: row; }
body[data-level="5"] #level-badge { border-color: rgba(127, 227, 255, .55); }

#ctl { --c-bg: rgba(20, 30, 44, .86); --c-bd: rgba(150, 210, 255, .3); --c-ink: #eaf5ff; --c-dim: rgba(200, 225, 245, .72); --c-glow: #7fe3ff;
  --top: max(10px, env(safe-area-inset-top)); --side-w: 252px;
  position: fixed; inset: 0; z-index: 5; pointer-events: none; color: var(--c-ink); font-family: var(--font); }
#ctl b { font-variant-numeric: tabular-nums; }
/* top strip: clock + day progress, weather, people */
#ctl-top { position: fixed; top: var(--top); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; align-items: center; white-space: nowrap; }
.ct-pill { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--c-bg); border: 2px solid var(--c-bd);
  box-shadow: 0 3px 0 rgba(0,0,0,.3), 0 6px 16px rgba(0,0,0,.3); backdrop-filter: blur(4px); }
.ct-pill > i { font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; background: rgba(127, 227, 255, .15); }
.ct-pill b { font-size: 21px; color: #fff; line-height: 1; }
.ct-pill small { font-size: 13px; color: var(--c-dim); }
.ct-day { position: relative; width: 74px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
#ct-day-fill { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); border-radius: 4px; background: linear-gradient(90deg, #ffd166, #ff9a3d 60%, #e8742c); transition: width .3s linear; }
#ctl-top[data-wx="sun"] .ct-weather { border-color: rgba(255, 209, 102, .75); }
#ctl-top[data-wx="sun"] .ct-weather > i { background: rgba(255, 209, 102, .35); }
#ctl-top[data-wx="cold"] .ct-weather { border-color: rgba(140, 200, 255, .8); }
#ctl-top[data-wx="cold"] .ct-weather > i { background: rgba(140, 200, 255, .35); }
#ct-under { position: fixed; top: calc(var(--top) + 48px); left: 50%; transform: translateX(-50%); display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; width: max-content;
  max-width: calc(100vw - 2 * var(--side-w) - 40px); }
#ct-events { display: contents; }
.ct-ev { font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--c-bg); border: 2px solid var(--c-bd); white-space: nowrap; animation: chipIn .35s cubic-bezier(.3, 1.7, .5, 1); }
.ev-coldfront { border-color: #8cc8ff; } .ev-doorsOpen { border-color: #ffd166; } .ev-crowd, .ev-match { border-color: #ff8fa3; }
#ct-forecast { font-size: 15px; font-weight: 700; padding: 3px 14px; border-radius: 999px; white-space: nowrap; color: var(--brown-d);
  background: linear-gradient(135deg, #fff7d1, #ffd166); border: 2px solid #fff; box-shadow: 0 3px 0 #e39a45, 0 6px 14px rgba(0,0,0,.3); animation: fcPulse 1.4s ease-in-out infinite; }
#ct-forecast[data-type="coldfront"], #ct-forecast[data-type="cloud"] { background: linear-gradient(135deg, #f2fbff, #a9dbff); box-shadow: 0 3px 0 #5d9fd0, 0 6px 14px rgba(0,0,0,.3); }
#ct-forecast[data-type="doorsOpen"], #ct-forecast[data-type="crowd"], #ct-forecast[data-type="match"] { background: linear-gradient(135deg, #fff0f3, #ffc2cf); box-shadow: 0 3px 0 #d9798f, 0 6px 14px rgba(0,0,0,.3); }
#ct-forecast.show { animation: chipIn .4s cubic-bezier(.3, 1.7, .5, 1), fcPulse 1.4s .4s ease-in-out infinite; }
@keyframes fcPulse { 50% { transform: scale(1.05); } }

/* side panel (readouts) */
#ctl-side { position: fixed; right: max(12px, env(safe-area-inset-right)); top: calc(var(--top) + 52px); width: var(--side-w);
  max-height: calc(100vh - var(--top) - 64px); max-height: calc(100dvh - var(--top) - 64px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 20px; pointer-events: auto;
  background: var(--c-bg); border: 2px solid var(--c-bd); box-shadow: 0 4px 0 rgba(0,0,0,.3), 0 10px 24px rgba(0,0,0,.35); backdrop-filter: blur(5px); transition: box-shadow .3s; }
#ctl-side::-webkit-scrollbar { display: none; }
.cs { background: rgba(255,255,255,.05); border: 1px solid rgba(160, 220, 255, .12); border-radius: 14px; padding: 6px 9px 7px; }
.cs-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--c-dim); margin-bottom: 4px; white-space: nowrap; }
.cs-h b { font-size: 17px; color: #fff; letter-spacing: 0; text-transform: none; }
.cs-dt { font-size: 12px; padding: 0 7px; border-radius: 999px; background: rgba(95, 211, 154, .25); color: #c8f5dc; letter-spacing: 0; text-transform: none; transition: background .3s; }
.cs-dt[data-lvl="warn"] { background: rgba(255, 176, 60, .35); color: #ffe2b0; }
.cs-dt[data-lvl="bad"] { background: rgba(255, 90, 74, .5); color: #fff; animation: chipBlink .6s ease-in-out infinite alternate; }
.cs-strat { display: grid; grid-template-columns: 16px auto 1fr; gap: 8px; align-items: stretch; }
.strat-col { position: relative; width: 16px; height: 56px; border-radius: 8px; border: 2px solid rgba(255,255,255,.55); background: linear-gradient(#ff9a3d, #5ec3ff); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.strat-col::after { content: ""; position: absolute; left: -6px; right: -6px; top: -5px; height: 18px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 140, 60, .9), rgba(255, 140, 60, 0) 70%); opacity: var(--strat, 0); transition: opacity .5s; }
.strat-col[data-lvl="bad"] { border-color: #ffb36b; animation: stratPulse .9s ease-in-out infinite alternate; }
@keyframes stratPulse { to { box-shadow: 0 0 10px 2px rgba(255, 140, 60, .8); } }
.strat-lbls { display: flex; flex-direction: column; justify-content: space-between; font-size: 12.5px; color: var(--c-dim); white-space: nowrap; }
.strat-lbls b { font-size: 16px; color: #fff; }
.cs-feel { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; line-height: 1.1; min-width: 0; }
.cs-feel small { font-size: 11.5px; color: var(--c-dim); white-space: nowrap; }
.cs-feel b { font-size: 24px; color: #fff; transition: color .4s; text-shadow: 0 1px 2px rgba(0,0,0,.5); white-space: nowrap; }
.cs-big { display: flex; align-items: center; gap: 4px; }
.cs-big i { font-style: normal; font-size: 18px; }
.mood-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.1); }
.mood-bar i { display: block; height: 100%; transition: width .4s; }
.mb-cold { width: calc(var(--c, 0) * 100%); background: linear-gradient(#8fd0ff, #3a8fe0); }
.mb-ok { width: calc(var(--o, 1) * 100%); background: linear-gradient(#8fe7b8, #2fae74); }
.mb-hot { width: calc(var(--h, 0) * 100%); background: linear-gradient(#ffb08a, #e8492f); }
.mood-faces { display: flex; justify-content: space-between; margin-top: 4px; font-size: 13px; white-space: nowrap; }
.mood-faces b { color: #fff; }
.pw-bar { position: relative; display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.pw-bar i { display: block; height: 100%; transition: width .35s; }
.pw-heat { width: calc(var(--ph, 0) * 100%); background: linear-gradient(#ff9a7a, #e63946); }
.pw-cool { width: calc(var(--pc, 0) * 100%); background: linear-gradient(#9fd6ff, #2f7fe0); }
.pw-fan { width: calc(var(--pf, 0) * 100%); background: linear-gradient(#f4f6f8, #a9b2ba); }
.pw-bar small { position: absolute; right: 6px; top: 0; bottom: 0; display: grid; place-items: center; font-size: 9.5px; font-weight: 600; color: rgba(255,255,255,.6); }
.pw-legend { display: flex; gap: 10px; margin-top: 4px; font-size: 12.5px; white-space: nowrap; align-items: baseline; }
.pw-legend b { color: #fff; }
.pw-legend small { margin-left: auto; color: var(--c-dim); font-size: 11px; }
.cs-energy { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0 8px; margin-top: 5px; padding-top: 5px; border-top: 1px dashed rgba(160, 220, 255, .2); font-size: 12.5px; color: var(--c-dim); }
.cs-energy b { font-size: 16px; color: #fff; }
.cs-energy small { font-size: 11.5px; }
.cs-save { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 14px; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.07); transition: background .4s, border-color .4s; }
.cs-save small { font-size: 12px; line-height: 1.2; font-weight: 600; color: var(--c-dim); }
.cs-save b { font-size: 26px; line-height: 1; color: #fff; white-space: nowrap; }
.cs-save[data-s="good"] { background: linear-gradient(135deg, rgba(47, 174, 116, .6), rgba(30, 120, 80, .6)); border-color: rgba(143, 231, 184, .75); }
.cs-save[data-s="good"] small { color: #d6f7e6; }
.cs-save[data-s="good"] b::before { content: "\01F331\00a0"; font-size: .7em; }
.cs-save[data-s="bad"] { background: linear-gradient(135deg, rgba(230, 57, 70, .65), rgba(160, 30, 40, .65)); border-color: rgba(255, 160, 150, .8); }
.cs-save[data-s="bad"] small { color: #ffe0dc; }
.cs-graph { padding: 5px 6px 4px; }
#ct-graph { display: block; width: 100%; height: 70px; border-radius: 8px; background: rgba(0, 10, 20, .35); }
.g-legend { display: flex; gap: 10px; justify-content: center; margin-top: 3px; font-size: 11px; color: var(--c-dim); white-space: nowrap; }
.g-legend i { font-style: normal; display: inline-flex; align-items: center; gap: 4px; }
.g-legend i::before { content: ""; width: 10px; height: 3px; border-radius: 2px; }
.g-legend .gl-f::before { background: #5ec3ff; } .g-legend .gl-c::before { background: #ff9a3d; } .g-legend .gl-m::before { background: #5fd39a; height: 7px; opacity: .75; }

/* control deck: three big vertical sliders (Varme / Køling / Ventilatorer) */
#ctl-deck { position: fixed; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  padding: 8px 10px 6px; border-radius: 22px; pointer-events: auto; user-select: none; -webkit-user-select: none;
  background: linear-gradient(rgba(44, 58, 76, .92), rgba(20, 30, 44, .92)); border: 2px solid var(--c-bd); box-shadow: 0 5px 0 rgba(0,0,0,.35), 0 12px 26px rgba(0,0,0,.4); }
.kc { --kc: #ff6a4a; --kc-rgb: 255, 106, 74; --v: 0; position: relative; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 4px 6px; border-radius: 16px;
  border: 2px solid transparent; cursor: pointer; touch-action: none; outline: none; transition: background .2s, border-color .2s, box-shadow .2s; }
.kc.cool { --kc: #4aa8ff; --kc-rgb: 74, 168, 255; }
.kc.fan { --kc: #dfe5ea; --kc-rgb: 223, 229, 234; }
.kc:hover { background: rgba(255,255,255,.05); }
.kc.sel { border-color: var(--kc); background: rgba(var(--kc-rgb), .14); box-shadow: 0 0 0 3px rgba(var(--kc-rgb), .2), 0 0 18px rgba(var(--kc-rgb), .3); }
.kc:focus-visible { outline: 3px solid var(--c-glow); outline-offset: 2px; }
.kc-head { display: flex; align-items: center; gap: 5px; height: 26px; }
.kc .kc-key { min-width: 20px; height: 20px; padding: 0 4px; font-size: 11px; border-bottom-width: 3px; border-radius: 6px; }
.kc.sel .kc-key { background: linear-gradient(#fff, #ffe3a3); border-color: #e3b26a; }
body.touch .kc-key, body.touch .keys-hint { display: none; }
.kc-ico { font-style: normal; font-size: 21px; line-height: 1; transition: filter .3s; }
.kc.off .kc-ico, .kc.off .kc-fan { filter: grayscale(.8) opacity(.6); }
.kc.heat:not(.off) .kc-ico { animation: flameFlick .5s ease-in-out infinite alternate; }
@keyframes flameFlick { to { transform: scale(1.12) rotate(-4deg); filter: drop-shadow(0 0 4px #ff8a3d); } }
.kc-fan { width: 24px; height: 24px; overflow: visible; }
.kc-fan rect { fill: #d9dee3; stroke: #7d868e; stroke-width: .5; }
.kc-fan circle { fill: #1d1f22; stroke: #555; stroke-width: .6; }
.kc-rot { transform-origin: 0 0; animation: kcSpin var(--spin, 1s) linear infinite; }
.kc.fan.off .kc-rot { animation: none; }
@keyframes kcSpin { to { transform: rotate(360deg); } }
.kc-track { position: relative; width: 36px; height: var(--track-h, 118px); border-radius: 18px; background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.35)); border: 2px solid rgba(255,255,255,.16); box-shadow: inset 0 2px 6px rgba(0,0,0,.5); }
.kc-fill { position: absolute; left: 4px; right: 4px; bottom: 4px; height: calc((100% - 8px) * var(--v)); border-radius: 14px; transition: height .12s;
  background: linear-gradient(to top, #ffb13d, #ff3b30); box-shadow: 0 0 12px rgba(var(--kc-rgb), .55); }
.kc.cool .kc-fill { background: linear-gradient(to top, #9fe0ff, #2f7fe0); }
.kc.fan .kc-fill { background: linear-gradient(90deg, #aab3bb, #f6f8fa 45%, #b9c0c8); box-shadow: 0 0 10px rgba(255,255,255,.35); }
.kc-ticks { position: absolute; left: 3px; right: 3px; top: 6px; bottom: 6px; pointer-events: none;
  background: repeating-linear-gradient(to top, rgba(255,255,255,.25) 0 1px, transparent 1px 25%);
  -webkit-mask: linear-gradient(90deg, #000 0 22%, transparent 22% 78%, #000 78%); mask: linear-gradient(90deg, #000 0 22%, transparent 22% 78%, #000 78%); }
.kc-thumb { position: absolute; left: -9px; right: -9px; height: 20px; bottom: calc((100% - 20px) * var(--v)); border-radius: 10px; transition: bottom .12s;
  background: linear-gradient(#ffffff, #cfd6dc); border: 2px solid var(--kc); box-shadow: 0 3px 5px rgba(0,0,0,.45); }
.kc-thumb::before { content: ""; position: absolute; left: 30%; right: 30%; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: rgba(0,0,0,.35); box-shadow: 0 -4px 0 rgba(0,0,0,.15), 0 4px 0 rgba(0,0,0,.15); }
.kc.fan .kc-thumb { border-color: #8f989f; }
.kc.drag .kc-thumb, .kc.drag .kc-fill { transition: none; }
.kc.drag .kc-thumb { transform: scale(1.08); }
.kc-val { font-size: 18px; color: #fff; line-height: 1.1; }
.kc-name { font-size: 10.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--c-dim); white-space: nowrap; }
.kc.sel .kc-name { color: var(--kc); }
.kc-help { flex-basis: 100%; text-align: center; font-size: 11px; color: var(--c-dim); margin-top: -1px; }
.kc.pick { animation: kcPick .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes kcPick { 0% { transform: scale(.92); } 100% { transform: scale(1); } }
.kc.nudge-up .kc-val { animation: nudgeUp .25s ease-out; }
.kc.nudge-down .kc-val { animation: nudgeDown .25s ease-out; }
@keyframes nudgeUp { 40% { transform: translateY(-3px); color: var(--gold); } }
@keyframes nudgeDown { 40% { transform: translateY(3px); color: #9fd6ff; } }

/* alarm highlights on the console */
#ctl.alarm #ctl-side { box-shadow: 0 4px 0 rgba(0,0,0,.3), 0 0 0 2px rgba(255, 90, 74, .6), 0 10px 24px rgba(0,0,0,.35); }
#ctl.flash #ctl-side, #ctl.flash #ctl-deck { animation: ctlFlash .6s ease-out; }
@keyframes ctlFlash { 0% { box-shadow: 0 0 0 4px rgba(255, 90, 74, .9), 0 0 30px rgba(255, 90, 74, .7); } }
#ctl.al-wasteHeatCool .kc.heat, #ctl.al-wasteHeatCool .kc.cool { animation: kcWarn .5s ease-in-out infinite alternate; }
#ctl.al-stratification .kc.fan { animation: kcWarn .6s ease-in-out infinite alternate; }
@keyframes kcWarn { to { border-color: #ff5a4a; box-shadow: 0 0 14px rgba(255, 90, 74, .8); } }
#ctl.al-tooCold .mf-c, #ctl.al-tooHot .mf-h { animation: chipBlink .45s ease-in-out infinite alternate; }
#ctl.al-highPower .pw-bar { animation: stratPulse .5s ease-in-out infinite alternate; }

/* alarm toasts (under the top strip – never in the middle of the view) */
#ctl-alarms { position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 84px); left: 50%; transform: translateX(-50%); z-index: 10; pointer-events: none;
  flex-direction: column; align-items: center; gap: 6px; width: max-content; max-width: min(460px, calc(100vw - 24px)); }
.ctl-alarm { display: flex; align-items: center; gap: 8px; padding: 5px 16px 5px 6px; border-radius: 999px; border: 3px solid #fff; color: #fff; font-size: 16px; line-height: 1.2;
  background: linear-gradient(135deg, #ff6a5a, #d62f3c); box-shadow: 0 4px 0 rgba(120, 10, 20, .5), 0 10px 22px rgba(0,0,0,.35); text-shadow: 0 1px 0 rgba(0,0,0,.2);
  animation: alarmIn .45s cubic-bezier(.3, 1.7, .5, 1) both, alarmShake .25s .45s ease-in-out 2; }
.ctl-alarm i { font-style: normal; flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: rgba(255,255,255,.25); }
.ctl-alarm.a-tooCold { background: linear-gradient(135deg, #6fc0ff, #2f6fd0); box-shadow: 0 4px 0 rgba(20, 60, 130, .5), 0 10px 22px rgba(0,0,0,.35); }
.ctl-alarm.a-stratification, .ctl-alarm.a-highPower { background: linear-gradient(135deg, #ffb13d, #e8742c); box-shadow: 0 4px 0 rgba(140, 70, 10, .5), 0 10px 22px rgba(0,0,0,.35); }
.ctl-alarm.out { animation: alarmOut .4s ease-in forwards; }
@keyframes alarmIn { from { transform: scale(.3) rotate(-6deg); opacity: 0; } }
@keyframes alarmShake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes alarmOut { to { transform: translateY(-12px) scale(.85); opacity: 0; } }

/* tutorial card */
#ctl-tut { position: fixed; z-index: 9; top: calc(max(10px, env(safe-area-inset-top)) + 84px); left: 50%; transform: translateX(-50%); width: min(380px, calc(100vw - 24px));
  padding: 12px 14px; border-radius: 22px; color: var(--brown); background: linear-gradient(#f4faff, #dcecfa); border: 4px solid #fff;
  box-shadow: 0 6px 0 #9cc0dd, 0 16px 40px rgba(0,0,0,.45); text-align: left; }
#ctl-tut.show { animation: tutIn .55s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes tutIn { from { transform: translateX(-50%) translateY(-20px) scale(.7); opacity: 0; } }
.tut-head { display: flex; align-items: center; gap: 8px; font-size: 17px; color: #22598e; margin-bottom: 6px; }
.tut-ico { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: radial-gradient(circle at 35% 30%, #fff, #9fd6ff 60%, #3a8fe0); border: 2px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.tut-steps { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 5px; counter-reset: tut; }
.tut-steps li { counter-increment: tut; display: grid; grid-template-columns: 22px 26px 1fr; align-items: center; gap: 6px; font-size: 14.5px; line-height: 1.25; background: rgba(255,255,255,.75); border-radius: 12px; padding: 5px 8px 5px 6px; }
.tut-steps li::before { content: counter(tut); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; color: #fff; background: #3a8fe0; }
.tut-steps li i { font-style: normal; font-size: 20px; text-align: center; }
.tut-steps b { color: #b4531a; }
.tut-ok { display: block; margin: 0 auto; font: 700 16px var(--font); color: #fff; border: 0; border-radius: 999px; padding: 7px 22px; cursor: pointer;
  background: linear-gradient(#7fd3f0, #3a8fe0); box-shadow: 0 4px 0 #23609c; }
.tut-ok:active { transform: translateY(3px); box-shadow: 0 1px 0 #23609c; }

/* ---- console layouts ---- */
/* medium / short screens: slimmer side panel + shorter sliders */
@media (max-width: 1000px), (max-height: 640px) {
  #ctl { --side-w: 220px; }
  .kc { width: 74px; }
  .kc-track { --track-h: 96px; }
  #ct-graph { height: 56px; }
  .ct-pill b { font-size: 19px; }
  .cs-feel b { font-size: 21px; }
  .cs-save b { font-size: 22px; }
}
@media (max-height: 500px) {
  #ctl { --side-w: 206px; --top: max(6px, env(safe-area-inset-top)); }
  #ctl-side { top: calc(var(--top) + 44px); max-height: calc(100vh - var(--top) - 52px); max-height: calc(100dvh - var(--top) - 52px); gap: 4px; padding: 5px; border-radius: 16px; }
  .cs { padding: 4px 7px 5px; border-radius: 11px; }
  .cs-h { margin-bottom: 2px; font-size: 11px; }
  .cs-h b { font-size: 15px; }
  .strat-col { height: 40px; }
  .cs-feel b { font-size: 18px; }
  .cs-energy small, .g-legend { display: none; }
  .cs-save b { font-size: 19px; }
  #ct-graph { height: 38px; }
  .ct-pill { padding: 2px 10px 2px 3px; }
  .ct-pill > i { width: 26px; height: 26px; font-size: 15px; }
  .ct-pill b { font-size: 17px; }
  #ct-under { top: calc(var(--top) + 40px); }
  #ctl-alarms, #ctl-tut { top: calc(max(6px, env(safe-area-inset-top)) + 70px); }
  #ctl-deck { padding: 5px 6px 4px; gap: 3px; border-radius: 18px; bottom: max(8px, env(safe-area-inset-bottom)); left: max(8px, env(safe-area-inset-left)); }
  .kc { width: 66px; padding: 3px 2px 4px; gap: 2px; }
  .kc-track { --track-h: 70px; width: 32px; }
  .kc-val { font-size: 15px; }
  .kc-name { font-size: 9px; letter-spacing: .2px; }
  .kc-help { display: none; }
  .pw-legend { margin-top: 2px; }
  .cs-energy { margin-top: 3px; padding-top: 3px; }
  .tut-steps li { font-size: 13px; padding: 3px 6px; }
  #ctl-tut { padding: 8px 10px; }
}
@media (max-width: 760px) and (min-width: 601px) { .ct-occ, .ct-weather small { display: none; } }
/* phones (portrait): everything docks at the bottom – readouts above the slider deck */
@media (max-width: 600px) {
  #ctl { --side-w: 0px; top: auto; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom));
    flex-direction: column; gap: 6px; }
  body.mode-control #ctl { display: flex; }
  #ctl-top { left: max(8px, env(safe-area-inset-left)); transform: none; gap: 5px; }
  body.mode-control #corner-btns { gap: 6px; }
  .ct-pill { padding: 2px 8px 2px 2px; gap: 4px; }
  .ct-pill > i { width: 24px; height: 24px; font-size: 14px; }
  .ct-pill b { font-size: 16px; }
  .ct-day { width: 40px; height: 6px; }
  .ct-weather small, .ct-occ { display: none; }
  #ct-under { top: calc(var(--top) + 40px); left: max(8px, env(safe-area-inset-left)); transform: none; justify-content: flex-start; max-width: calc(100vw - 16px); }
  #ct-forecast { font-size: 13px; padding: 2px 10px; }
  .ct-ev { font-size: 12px; padding: 1px 8px; }
  #ctl-alarms, #ctl-tut { top: calc(max(10px, env(safe-area-inset-top)) + 72px); }
  .ctl-alarm { font-size: 14px; }
  #ctl-side { position: static; width: auto; max-height: none; overflow: visible; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 5px; border-radius: 16px; }
  .cs { padding: 4px 7px 5px; border-radius: 11px; min-width: 0; }
  .cs-h { font-size: 10.5px; margin-bottom: 2px; }
  .cs-h b { font-size: 15px; }
  .cs-strat { grid-template-columns: 12px auto 1fr; gap: 6px; }
  .strat-col { width: 12px; height: 40px; }
  .strat-lbls { font-size: 11px; }
  .strat-lbls b { font-size: 13.5px; }
  .cs-feel b { font-size: 17px; }
  .cs-feel small { font-size: 10px; }
  .mood-faces { font-size: 11.5px; }
  .pw-legend { gap: 6px; font-size: 11px; }
  .cs-energy { font-size: 11px; }
  .cs-energy b { font-size: 13.5px; }
  .cs-energy small { display: none; }
  .cs-save { flex-direction: column; justify-content: center; align-items: stretch; gap: 2px; padding: 4px 8px; text-align: center; }
  .cs-save small { font-size: 10.5px; }
  .cs-save b { font-size: 22px; }
  .cs-graph { grid-column: 1 / -1; padding: 3px 4px 2px; }
  #ct-graph { height: 34px; }
  .g-legend { display: none; }
  #ctl-deck { position: static; justify-content: space-around; padding: 4px 6px; gap: 4px; border-radius: 18px; }
  .kc { flex: 1; width: auto; max-width: 110px; padding: 3px 2px 4px; gap: 2px; }
  .kc-head { height: 22px; }
  .kc-track { --track-h: 66px; width: 32px; }
  .kc-val { font-size: 15px; }
  .kc-help { display: none; }
}
@media (max-width: 600px) and (max-height: 700px) {
  .cs-graph { display: none; }
  .kc-track { --track-h: 54px; }
}

/* --- level intro + unlock banner in control-room colours --- */
#level-intro[data-level="5"] .li-card { background: linear-gradient(#f2f8ff, #d5e7f8); box-shadow: 0 7px 0 #8fb4d6, 0 18px 44px rgba(0,0,0,.5); }
#level-intro[data-level="5"] .li-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; border-radius: 22px 22px 0 0;
  background: radial-gradient(circle, #5fd39a 0 2.5px, transparent 3px) 6px 50% / 18px 10px repeat-x, linear-gradient(#2b3f58, #1c2a3d); }
#level-intro[data-level="5"] .li-ico { background: radial-gradient(circle at 35% 30%, #fff, #9fd6ff 55%, #3a8fe0); z-index: 1; }
#level-intro[data-level="5"] .li-title { color: #22598e; text-shadow: 0 3px 0 #bcd8f0; }
.go-unlock[data-level="5"] { background: linear-gradient(135deg, #e8f3ff, #b3d4f5); box-shadow: 0 4px 0 #7fa6cf, 0 0 0 3px rgba(58, 143, 224, .3); color: #173e66; }
.go-unlock[data-level="5"] .gu-ico { background: radial-gradient(circle at 35% 30%, #fff, #9fd6ff 60%, #3a8fe0); }

/* --- Energirapport (end of day) --- */
#energy { z-index: 21; }
.er-card { max-width: 500px; }
.er-card h1 { margin: 4px 0 2px; }
.er-save { display: flex; flex-direction: column; align-items: center; margin: 2px auto 10px; padding: 8px 18px 9px; border-radius: 22px; width: fit-content; max-width: 100%;
  border: 3px solid #fff; box-shadow: 0 4px 0 #8fd1ae; background: linear-gradient(135deg, #e6f9ee, #b7ebcf); color: #1d6e46; animation: unlockIn .7s .3s cubic-bezier(.3, 1.6, .5, 1) both; }
.er-save b { font-size: 56px; line-height: 1; font-variant-numeric: tabular-nums; }
.er-save small { font-size: 14px; font-weight: 600; }
.er-save[data-s="good"] b::before { content: "\2193\00a0"; font-size: .6em; vertical-align: .25em; }
.er-save[data-s="bad"] { background: linear-gradient(135deg, #fff0ee, #ffc9c2); color: #a8262f; box-shadow: 0 4px 0 #e39a92; }
.er-save[data-s="bad"] b::before { content: "\2191\00a0"; font-size: .6em; vertical-align: .25em; }
.er-save[data-s="zero"] { background: #fdebd2; color: var(--brown); box-shadow: 0 4px 0 #e3c8a0; }
.er-bars { display: grid; gap: 6px; margin: 0 0 8px; text-align: left; }
.er-row { display: grid; grid-template-columns: 116px 1fr 76px; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.er-lbl { white-space: nowrap; }
.er-row b { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.er-track { height: 16px; border-radius: 8px; background: #f3dcbc; overflow: hidden; }
.er-track i { display: block; height: 100%; width: calc(var(--w, 0) * 100%); border-radius: 8px; animation: barGrow 1s .4s cubic-bezier(.3, 1, .5, 1) both; }
.er-row.you i { background: linear-gradient(90deg, #8fe7b8, #2fae74); }
.er-row.base i { background: repeating-linear-gradient(-45deg, #c4ad92 0 6px, #b39c80 6px 12px); }
@keyframes barGrow { from { width: 0; } }
.stat.pf-comfort { background: #e2f4ea; }
.stat.pf-co2 { background: #e6f7dc; }
.stat.pf-kwh { background: #fff0bf; }
.er-chart { margin: 2px 0 6px; padding: 6px 6px 4px; border-radius: 16px; background: #fdebd2; }
#er-chart { display: block; width: 100%; height: 96px; border-radius: 10px; background: #fff8ee; }
.er-chart .g-legend { color: var(--brown); opacity: .8; }
#energy.celebrate .confetti i { animation: confFall 2.8s var(--d) cubic-bezier(.3, .2, .6, 1) forwards; }
@media (max-width: 600px) {
  .er-save b { font-size: 46px; }
  .er-row { grid-template-columns: 100px 1fr 66px; font-size: 12.5px; gap: 6px; }
}
@media (max-height: 640px) {
  .er-save { padding: 4px 14px 6px; margin-bottom: 6px; }
  .er-save b { font-size: 40px; }
  #er-chart { height: 70px; }
}
@media (max-height: 500px) {
  .er-save b { font-size: 34px; }
  #er-chart { height: 56px; }
}

/* ================= Bane 6 – Svømmelandet (slide mode) ================= */
/* --- level picker: six cards – 2×3 in one column, 3×2 in the two-column start card, a scroller on short landscape --- */
@media (min-width: 780px) {
  .start-card .level-pick .lvl-card[data-level="4"], .start-card .level-pick .lvl-card[data-level="5"] { grid-column: auto / span 2; }
}
#lvl-best-6 { white-space: nowrap; }

/* water-park illustration: glass hall, slide tower, three twisting slides into the pool, palm, teddy in a tube ring */
.lvl-art.park { background: linear-gradient(#e9fbff, #bdeefa 72%); }
.lvl-art.park::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 9px; z-index: 0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.95) 0 2px, transparent 2px 15px), linear-gradient(rgba(140, 200, 220, .55), rgba(140, 200, 220, .15)); }
.park svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.pk-pool { fill: #3cb6e0; }
.pk-wave { fill: #8fe0f5; opacity: .9; animation: pkWave 2.4s linear infinite; }
@keyframes pkWave { to { transform: translateX(10px); } }
.pk-poles path { stroke: #9fb3bd; stroke-width: 1.2; fill: none; }
.pk-tower { fill: #f2a33a; stroke: #c26a12; stroke-width: .8; }
.pk-ladder { stroke: rgba(120, 60, 10, .45); stroke-width: 1; }
.pk-deck { fill: #fff; stroke: #c9d6dc; stroke-width: .6; }
.pk-sl { fill: none; stroke-width: 5.5; stroke-linecap: round; }
.pk-sl.blue { stroke: #2f8fe0; } .pk-sl.green { stroke: #3dbb5a; } .pk-sl.red { stroke: #e8473a; }
.pk-hl { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 1.1; stroke-linecap: round; transform: translateY(-1.3px); }
.pk-trunk { fill: none; stroke: #9a6334; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2.4 1.2; }
.pk-leaf { fill: #3fae5a; stroke: #2a8a44; stroke-width: .4; }
.pk-leaf.l2 { fill: #5cc46f; }
.pk-palm { transform-origin: 132px 13px; animation: pkSway 3.2s ease-in-out infinite; }
@keyframes pkSway { 50% { transform: rotate(4deg); } }
.pk-nut { fill: #7a4a22; }
.pk-duck { font-size: 9px; }
.pk-bear { font-size: 10px; }
.pk-tube { fill: none; stroke: #ff5d6c; stroke-width: 2.6; stroke-dasharray: 3 3; }
.pk-splash circle { fill: none; stroke: #fff; stroke-width: 1.6; }
.lvl-card.locked .park .pk-rider, .lvl-card.locked .park .pk-splash { display: none; }

/* --- slide picker (inside the start card, only while Bane 6 is selected) --- */
.slide-pick { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: -2px 0 10px; padding: 4px 6px 7px; border-radius: 16px;
  background: linear-gradient(135deg, #e3f7fd, #c4ecf7); box-shadow: inset 0 0 0 2px #fff, 0 3px 0 #a9d7e6; }
body:not([data-level="6"]) .slide-pick { display: none; }
.slide-pick::before { content: "🛝 Vælg rutsjebane"; grid-column: 1 / -1; font-size: 11px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #1f6f96; text-align: left; padding: 0 4px; }
.sp-card { --sc: #2f8fe0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 5px 4px 6px; border-radius: 14px; border: 3px solid transparent;
  background: #fff; font: inherit; color: var(--brown); cursor: pointer; box-shadow: 0 3px 0 #9fd0e3; transition: transform .15s, border-color .2s, box-shadow .2s; }
.sp-card:hover { transform: translateY(-2px); }
.sp-card:focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; }
.sp-card.selected { border-color: var(--sc); box-shadow: 0 3px 0 color-mix(in srgb, var(--sc) 70%, #000), 0 0 0 3px color-mix(in srgb, var(--sc) 22%, transparent); }
.sp-card.selected::after { content: "✓"; position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sc); color: #fff; font-weight: 700; font-size: 12px; border: 2px solid #fff; animation: badgeSpin .4s cubic-bezier(.3, 1.6, .5, 1); }
.sp-card.picked { animation: rowPop .45s cubic-bezier(.3, 1.8, .5, 1); }
.sp-chip { display: block; width: 100%; height: 12px; border-radius: 7px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
  background: repeating-linear-gradient(-60deg, rgba(255,255,255,.45) 0 3px, transparent 3px 9px), var(--sc); }
.sp-card.selected .sp-chip { animation: spFlow 1s linear infinite; }
@keyframes spFlow { to { background-position: 10.4px 0, 0 0; } }
.sp-txt { display: flex; flex-direction: column; align-items: center; min-width: 0; max-width: 100%; line-height: 1.1; }
.sp-name { font-size: 14px; color: var(--brown-d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sp-diff { font-size: 11px; opacity: .8; white-space: nowrap; }
.sp-dots { color: var(--sc); letter-spacing: 1px; }
.sp-best { font-size: 10.5px; font-weight: 600; background: #fff0bf; border-radius: 999px; padding: 0 6px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.sp-best.none { background: rgba(0,0,0,.05); font-weight: 500; opacity: .7; }
.sp-stars { font-style: normal; color: #e39a45; margin-left: 3px; letter-spacing: -1px; }
@media (max-height: 500px) and (orientation: landscape) {
  .slide-pick { margin: -2px 0 6px; padding: 3px 5px 5px; gap: 5px; }
  .slide-pick::before { display: none; }
  .sp-card { flex-direction: row; justify-content: center; gap: 5px; padding: 3px 5px; }
  .sp-chip { width: 10px; height: 22px; flex: none; }
  .sp-txt { align-items: flex-start; }
  .sp-name { font-size: 12.5px; }
  .sp-best { display: none; }
}
@media (max-width: 420px) {
  .sp-name { font-size: 12.5px; }
  .sp-diff { font-size: 10px; }
  .sp-best { font-size: 9.5px; padding: 0 4px; }
}

/* --- HUD: slide mode shows lives / loot / time / best + speed gauge + slide progress; hides the other levels' bits --- */
.sl-panel, #sl-speed, #sl-progress, #sl-streaks { display: none; }
body.mode-slide #sl-loot-panel, body.mode-slide .pf-panel, body.mode-slide #sl-speed, body.mode-slide #sl-progress { display: flex; }
body.mode-slide #sl-speed { display: block; }
body.mode-slide #sl-streaks.on { display: block; }
body.mode-slide #score-panel, body.mode-slide #time-panel, body.mode-slide #best-panel, body.mode-slide #charge-wrap, body.mode-slide #balloon-slots,
body.mode-slide #combo, body.mode-slide #gust, body.mode-slide #pu-chips, body.mode-slide #pf-progress, body.mode-slide #cart-meter, body.mode-slide #cart-pops,
body.mode-slide .lv-card, body.mode-slide .lv-banner, body.mode-slide #btn-puff, body.mode-slide #btn-heat, body.mode-slide #btn-empty,
body.mode-slide #pf-coins-panel { display: none !important; }
body:not(.mode-slide) #sl-toast, body:not(.mode-slide) #sl-flash { display: none !important; }
body[data-level="6"] #level-badge { border-color: rgba(127, 227, 255, .6); }
body[data-level="6"] #level-badge .lb-ico { background: rgba(58, 166, 214, .45); }

/* ducks / coins / gold counters */
#sl-loot-panel { gap: 10px; padding: 4px 14px 4px 5px; }
#sl-loot-panel .sl-c { display: inline-flex; align-items: center; gap: 4px; min-width: 0; font-size: inherit; font-weight: inherit; }
.sl-c i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: rgba(255, 233, 204, .16); }
#sl-c-ducks i { background: rgba(255, 214, 80, .35); }
#sl-c-coins i { background: rgba(242, 163, 58, .3); }
#sl-c-gold i { background: rgba(255, 240, 150, .3); }
.sl-c b { color: #fff; font-size: 20px; min-width: 1.1em; text-align: center; font-variant-numeric: tabular-nums; }
.sl-c.bump b { animation: bump .45s cubic-bezier(.3, 1.8, .5, 1); }
.sl-c.bump i { animation: slGrab .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes slGrab { 40% { transform: scale(1.35) rotate(-12deg); box-shadow: 0 0 12px rgba(255, 220, 100, .9); } }

/* speed gauge (dial): bottom-right on desktop, under the HUD row on touch */
#sl-speed { --s: 0; position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: 16px; z-index: 5; pointer-events: none; width: 118px; height: 118px;
  border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(40, 70, 96, .88), rgba(14, 30, 46, .9)); border: 3px solid rgba(160, 225, 255, .5);
  box-shadow: 0 4px 0 rgba(0,0,0,.3), 0 8px 20px rgba(0,0,0,.35); backdrop-filter: blur(4px); transition: border-color .3s, box-shadow .3s; }
.sg-dial { position: absolute; inset: 0; }
.sg-arc { position: absolute; inset: 7px; border-radius: 50%;
  background: conic-gradient(from 240deg, transparent calc(var(--s) * 240deg), rgba(10, 22, 34, .82) 0 240deg, transparent 0),
    conic-gradient(from 240deg, #7fe3ff 0deg, #5fd39a 90deg, #ffd166 170deg, #ff5a4a 240deg, transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 10px)); }
.sg-ticks { position: absolute; inset: 20px; border-radius: 50%; background: repeating-conic-gradient(from 239deg, rgba(255,255,255,.55) 0 2deg, transparent 2deg 30deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 50%, 0 78%); }
.sg-needle { position: absolute; left: 50%; bottom: 50%; width: 4px; height: 38%; margin-left: -2px; border-radius: 2px 2px 1px 1px; transform-origin: 50% 100%;
  background: linear-gradient(#fff, #ffd166); box-shadow: 0 0 6px rgba(255, 209, 102, .8); transform: rotate(calc(-120deg + var(--s) * 240deg)); transition: transform .12s linear; }
.sg-hub { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9fb3bd); border: 2px solid #1c2a3d; }
.sg-read { position: absolute; left: 0; right: 0; bottom: 11px; display: flex; flex-direction: column; align-items: center; line-height: 1; color: #fff; }
.sg-read b { font-size: 24px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.sg-read small { font-size: 11px; font-weight: 600; letter-spacing: .5px; color: rgba(200, 235, 255, .8); }
.sg-wind { position: absolute; left: -18px; top: 30%; font-size: 22px; opacity: 0; transition: opacity .3s; }
#sl-speed.fast { border-color: #7fe3ff; box-shadow: 0 4px 0 rgba(0,0,0,.3), 0 0 18px 4px rgba(127, 227, 255, .75); }
#sl-speed.fast .sg-wind { opacity: 1; animation: windShake .25s linear infinite alternate; }
#sl-speed.fast .sg-needle { animation: needleBuzz .09s linear infinite alternate; }
@keyframes windShake { to { transform: translateX(-5px) scaleX(1.15); } }
@keyframes needleBuzz { to { margin-left: -1px; } }
#sl-speed.boost { animation: gaugeBoost .6s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes gaugeBoost { 30% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(127, 227, 255, .5), 0 0 26px 8px rgba(127, 227, 255, .8); } }

/* motion streaks at high speed + darker edges in tunnels */
#sl-streaks { position: fixed; inset: -12%; z-index: 4; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0 4deg, rgba(255,255,255,.5) 4deg 4.35deg, transparent 4.35deg 9deg, rgba(190, 240, 255, .38) 9deg 9.3deg, transparent 9.3deg 13deg);
  -webkit-mask: radial-gradient(ellipse 58% 54% at 50% 50%, transparent 48%, #000 100%); mask: radial-gradient(ellipse 58% 54% at 50% 50%, transparent 48%, #000 100%);
  animation: streakZoom .24s linear infinite; will-change: transform; }
@keyframes streakZoom { from { transform: scale(1) rotate(0deg); } to { transform: scale(1.1) rotate(1.2deg); } }
body.sl-tunnel::after { content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse at center, transparent 38%, rgba(6, 22, 44, .62)); animation: slFade .35s ease-out; }
@keyframes slFade { from { opacity: 0; } }

/* slide progress bar: start tower → splash pool, checkpoint flags, teddy in a tube ring */
#sl-progress { --p: 0; position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); width: min(460px, 52vw); height: 40px; z-index: 5; pointer-events: none; align-items: center; gap: 6px; }
.sl-start { flex: none; font-size: 20px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.sl-fill { background: linear-gradient(90deg, #7fe3ff, #2f9be0); }
.sl-water { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p) * 100%); min-width: 10px; border-radius: 999px; pointer-events: none;
  background: repeating-linear-gradient(-60deg, rgba(255,255,255,.4) 0 3px, transparent 3px 11px); animation: slShimmer .8s linear infinite; }
@keyframes slShimmer { to { background-position: 12.7px 0; } }
.sl-tube { position: absolute; left: calc(var(--p) * 100%); top: 50%; width: 32px; height: 28px; transform: translate(-50%, -64%); z-index: 2; transition: left .12s linear; filter: drop-shadow(0 2px 2px rgba(0,0,0,.45)); }
.sl-bear { position: absolute; left: 50%; bottom: 5px; font-size: 19px; line-height: 1; transform: translateX(-50%); }
.sl-ring { position: absolute; left: 0; right: 0; bottom: 0; height: 13px; border-radius: 50%; z-index: 1;
  background: repeating-conic-gradient(#ff5d6c 0 45deg, #fff 45deg 90deg);
  -webkit-mask: radial-gradient(ellipse at 50% 45%, transparent 0 34%, #000 37%); mask: radial-gradient(ellipse at 50% 45%, transparent 0 34%, #000 37%); }
.sl-goal { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #0f3a52; padding: 3px 7px; border-radius: 8px; border: 2px solid var(--cream);
  background: repeating-linear-gradient(-45deg, #8fe0f5 0 6px, #c9f1fb 6px 12px); box-shadow: 0 3px 8px rgba(0,0,0,.35); white-space: nowrap; }
#sl-progress.cp-hit .pp-track { animation: panelGlow .7s ease-out; }

/* toasts + flashes */
#sl-toast { position: fixed; top: 24%; left: 50%; z-index: 7; pointer-events: none; transform: translateX(-50%); white-space: nowrap;
  font-size: clamp(20px, 5vw, 30px); font-weight: 700; color: #fff; padding: 6px 22px; border-radius: 999px; border: 3px solid #fff;
  background: linear-gradient(135deg, #7fe3ff, #2f9be0); box-shadow: 0 4px 0 rgba(0,0,0,.2), 0 10px 24px rgba(0,0,0,.35); text-shadow: 0 2px 0 rgba(0,0,0,.2); }
#sl-toast.k-tunnel { background: linear-gradient(135deg, #8f7bff, #4b3bb0); }
#sl-toast.k-hit { background: linear-gradient(135deg, #ffb13d, #e8492f); font-size: clamp(24px, 6vw, 36px); }
#sl-toast.k-flyout { background: linear-gradient(135deg, #5fd3f0, #1f7fae); }
#sl-toast.k-checkpoint { background: linear-gradient(135deg, #5fd39a, #2a9d8f); }
#sl-toast.show { animation: pfToastIn .45s cubic-bezier(.3, 1.7, .5, 1) both; }
#sl-toast.k-hit.show { animation: pfToastIn .3s cubic-bezier(.3, 1.9, .5, 1) both, slShake .2s .3s ease-in-out 2; }
@keyframes slShake { 25% { transform: translateX(calc(-50% - 5px)); } 75% { transform: translateX(calc(-50% + 5px)); } }
#sl-toast.k-flyout.show { animation: slFly .7s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes slFly { 0% { transform: translateX(-50%) translateY(40px) scale(.3) rotate(-14deg); opacity: 0; } 60% { transform: translateX(-50%) translateY(-8px) scale(1.08) rotate(5deg); opacity: 1; } }
#sl-toast.out { animation: pfToastOut .35s ease-in forwards; }
#sl-flash { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; }
#sl-flash.k-hit { background: radial-gradient(ellipse at center, transparent 50%, rgba(255, 120, 40, .5)); }
#sl-flash.k-flyout { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.9) 0 2%, transparent 2.5%), radial-gradient(circle at 72% 30%, rgba(255,255,255,.85) 0 1.6%, transparent 2%),
  radial-gradient(circle at 60% 75%, rgba(255,255,255,.8) 0 2.2%, transparent 2.6%), radial-gradient(ellipse at center, rgba(120, 220, 255, .15) 30%, rgba(40, 150, 220, .6)); }
#sl-flash.flash { animation: hurtFlash .75s ease-out; }

/* 3-2-1-GO! countdown with a splash per number */
#countdown { position: fixed; inset: 0; z-index: 9; pointer-events: none; display: grid; place-items: center; }
.cd-ring { width: clamp(120px, 28vmin, 200px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff, #bff0ff 40%, #3aa6d6); border: 6px solid #fff; box-shadow: 0 8px 0 #23759c, 0 20px 50px rgba(0,0,0,.45); }
#cd-num { font-size: clamp(60px, 15vmin, 116px); font-weight: 700; line-height: 1; color: #fff; text-shadow: 0 5px 0 #1f6f96, 0 0 22px rgba(255,255,255,.6); }
#countdown[data-step="1"] .cd-ring { background: radial-gradient(circle at 35% 30%, #fff, #c8f5dc 40%, #3dbb5a); box-shadow: 0 8px 0 #24803a, 0 20px 50px rgba(0,0,0,.45); }
#countdown[data-step="1"] #cd-num { text-shadow: 0 5px 0 #24803a, 0 0 22px rgba(255,255,255,.6); }
#countdown[data-step="2"] .cd-ring { background: radial-gradient(circle at 35% 30%, #fff, #ffd2cc 40%, #e8473a); box-shadow: 0 8px 0 #a8262f, 0 20px 50px rgba(0,0,0,.45); }
#countdown[data-step="2"] #cd-num { text-shadow: 0 5px 0 #a8262f, 0 0 22px rgba(255,255,255,.6); }
#countdown[data-step="3"] .cd-ring { width: clamp(150px, 34vmin, 250px); background: radial-gradient(circle at 35% 30%, #fff7d1, #ffd166 50%, #f2a33a); box-shadow: 0 8px 0 #b4531a, 0 0 40px 10px rgba(255, 209, 102, .6); }
#countdown[data-step="3"] #cd-num { font-size: clamp(46px, 11vmin, 88px); text-shadow: 0 5px 0 #b4531a; }
#countdown.tick .cd-ring { animation: cdPop .9s cubic-bezier(.3, 1.7, .5, 1) both; }
#countdown[data-step="3"].tick .cd-ring { animation: cdGo .8s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes cdPop { 0% { transform: scale(.2) rotate(-20deg); opacity: 0; } 22% { transform: scale(1.08); opacity: 1; } 72% { transform: scale(1); opacity: 1; } 100% { transform: scale(.82); opacity: 0; } }
@keyframes cdGo { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 30% { transform: scale(1.12); opacity: 1; } 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.cd-drops { position: absolute; inset: 0; }
.cd-drops i { position: absolute; left: 50%; top: 50%; width: 16px; height: 20px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #fff, #8fe0f5 55%, #2f9be0); box-shadow: 0 2px 4px rgba(0, 60, 100, .3); }
#countdown.tick .cd-drops i { animation: cdDrop .85s .08s ease-out both; }
.cd-drops i:nth-child(1) { --dx: -140px; --dy: -60px; --r: -60deg; } .cd-drops i:nth-child(2) { --dx: -95px; --dy: -125px; --r: -35deg; }
.cd-drops i:nth-child(3) { --dx: -20px; --dy: -160px; --r: -5deg; } .cd-drops i:nth-child(4) { --dx: 70px; --dy: -140px; --r: 25deg; }
.cd-drops i:nth-child(5) { --dx: 140px; --dy: -70px; --r: 60deg; } .cd-drops i:nth-child(6) { --dx: 150px; --dy: 30px; --r: 100deg; }
.cd-drops i:nth-child(7) { --dx: -150px; --dy: 40px; --r: -100deg; } .cd-drops i:nth-child(8) { --dx: 10px; --dy: 120px; --r: 180deg; }
@keyframes cdDrop { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--r)) scale(.4); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(1); } }

/* --- level intro + unlock banner in water-park colours --- */
#level-intro[data-level="6"] .li-card { background: linear-gradient(#f0fdff, #c4eff8); box-shadow: 0 7px 0 #6fc6d8, 0 18px 44px rgba(0,0,0,.5); }
#level-intro[data-level="6"] .li-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; border-radius: 22px 22px 0 0;
  background: radial-gradient(circle at 8px -4px, transparent 9px, #3aa6d6 10px) 0 0 / 16px 12px repeat-x, #8fe0f5; }
#level-intro[data-level="6"] .li-ico { background: radial-gradient(circle at 35% 30%, #fff, #8fe0f5 55%, #2f9be0); z-index: 1; }
#level-intro[data-level="6"] .li-title { color: #1479a8; text-shadow: 0 3px 0 #bfe7f5; }
.li-slide { --sc: #2f8fe0; display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; padding: 3px 12px 3px 4px; border-radius: 999px; background: #fff;
  border: 3px solid var(--sc); box-shadow: 0 3px 0 color-mix(in srgb, var(--sc) 60%, #000); font-size: 16px; }
.li-slide small { font-size: 12px; color: var(--sc); font-weight: 600; letter-spacing: .5px; }
.sd-chip { --w: 24px; display: inline-block; flex: none; width: var(--w); height: 13px; border-radius: 7px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18);
  background: repeating-linear-gradient(-60deg, rgba(255,255,255,.45) 0 3px, transparent 3px 8px), var(--sc, #2f8fe0); }
.go-unlock[data-level="6"] { background: linear-gradient(135deg, #e3fbff, #9fe3f2); box-shadow: 0 4px 0 #5fbcd2, 0 0 0 3px rgba(58, 166, 214, .3); color: #0f4a5e; }
.go-unlock[data-level="6"] .gu-ico { background: radial-gradient(circle at 35% 30%, #fff, #8fe0f5 60%, #2f9be0); }
#energy .go-unlock { margin: 6px 0 4px; }
#energy .next-btn:not(.secondary) { animation: nextPulse 1.2s 1s ease-in-out infinite; }

/* --- finish card ("Splash! I mål!") --- */
#slide-done { z-index: 21; }
.sd-card { background: linear-gradient(#effcff, var(--cream) 34%); }
.sd-level { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; background: #dff3fb; padding: 2px 4px 2px 12px; }
.sd-slide { --sc: #2f8fe0; display: inline-flex; align-items: center; gap: 5px; background: #fff; border-radius: 999px; padding: 1px 10px 1px 3px; border: 2px solid var(--sc); }
.sd-slide b { color: var(--brown-d); }
.sd-slide .sd-chip { --w: 20px; height: 11px; }
.sd-goals { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 0 0 8px; }
.sd-goal { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; padding: 2px 10px 2px 3px; border-radius: 999px; background: #efe6da; color: #8a7a6a; white-space: nowrap; }
.sd-goal i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #fff; font-size: 13px; filter: grayscale(.85); opacity: .6; }
.sd-goal.on { background: #e2f4ea; color: #1d6e46; }
.sd-goal.on i { filter: none; opacity: 1; }
.sd-goal.on::after { content: "✓"; color: #2fae74; font-weight: 700; }
.sd-card { max-width: 580px; }
#sd-stats { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(66px, 1fr)); }
#sd-stats .stat small { font-size: 11px; }
.stat.pf-ducks { background: #fff4c2; }
.stat.pf-gold { background: #fff0bf; }
.stat.pf-hits { background: #f7dcd6; }
.stat.pf-time { background: #dff3fb; }
#slide-done.celebrate .confetti i { animation: confFall 2.8s var(--d) cubic-bezier(.3, .2, .6, 1) forwards; }
#slide-done.celebrate .next-btn { animation: nextPulse 1.2s 1s ease-in-out infinite; }
.sd-drops { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; overflow: hidden; pointer-events: none; z-index: 2; }
.sd-drops i { position: absolute; bottom: -12px; left: var(--x); width: 10px; height: 13px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #fff, #8fe0f5 55%, #2f9be0); }
#slide-done.celebrate .sd-drops i { animation: sdDrop 1.3s var(--d) ease-out 2 both; }
@keyframes sdDrop { 0% { opacity: 0; transform: translateY(0) scale(.5); } 15% { opacity: .9; } 50% { transform: translateY(calc(-1 * var(--h))) scale(1); opacity: .9; } 100% { transform: translateY(10px) scale(.8); opacity: 0; } }

/* --- game over (out of lives) in Bane 6: tube ring instead of the hard hat, water-coloured bar --- */
#gameover.slide .gp-teddy .pp-helmet { display: none; }
#gameover.slide .gp-teddy::after { content: ""; position: absolute; left: 50%; bottom: -3px; width: 34px; height: 14px; margin-left: -17px; border-radius: 50%;
  background: repeating-conic-gradient(#ff5d6c 0 45deg, #fff 45deg 90deg);
  -webkit-mask: radial-gradient(ellipse at 50% 45%, transparent 0 34%, #000 37%); mask: radial-gradient(ellipse at 50% 45%, transparent 0 34%, #000 37%); }
#gameover.slide .gp-fill { background: linear-gradient(90deg, #7fe3ff, #2f9be0); }
#gameover.slide .gp-track { background: #d6eef6; box-shadow: 0 3px 0 #a9d7e6; }
#gameover.slide .gp-goal { background: repeating-linear-gradient(-45deg, #8fe0f5 0 6px, #c9f1fb 6px 12px); color: #0f3a52; }

/* --- touch: joystick (lean) + one big "Hop" button --- */
body.touch.mode-slide #btn-jump { right: 0; bottom: 0; width: var(--heat); height: var(--heat); font-size: 30px; }
body.touch.mode-slide #btn-jump small { font-size: 11px; }
body.touch #sl-progress { --tb: max(14px, env(safe-area-inset-bottom)); bottom: calc(var(--tb) + 6px); transform: none; width: auto; max-width: 340px; margin: 0 auto;
  left: calc(max(14px, env(safe-area-inset-left)) + 112px + 12px); right: calc(max(12px, env(safe-area-inset-right)) + 84px + 10px); }
body.touch #sl-speed { right: auto; bottom: auto; left: max(10px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + 58px); width: 92px; height: 92px; }
body.touch .sg-wind { left: auto; right: -18px; }
@media (max-width: 900px) and (min-width: 601px) {
  #sl-loot-panel { gap: 7px; }
  body.mode-slide #pf-best-panel small, body.mode-slide #pf-time-panel small { display: none; }
}
@media (max-width: 600px) {
  #sl-progress { width: calc(100vw - 28px); bottom: 14px; }
  body.touch #sl-progress { left: calc(max(14px, env(safe-area-inset-left)) + 100px + 10px); right: calc(max(12px, env(safe-area-inset-right)) + 72px + 8px); width: auto; }
  body.touch .sl-goal { font-size: 10px; padding: 2px 4px; }
  body.touch .sl-start { display: none; }
  body.mode-slide #level-badge, body.mode-slide #pf-best-panel { display: none !important; }
  /* phones: no room in the top row – the loot counters sit on a second row (right of the touch speed gauge) */
  #sl-loot-panel { gap: 5px; padding: 3px 8px 3px 3px; position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 44px); left: max(8px, env(safe-area-inset-left)); }
  body.touch #sl-loot-panel { left: calc(max(10px, env(safe-area-inset-left)) + 88px); top: calc(max(10px, env(safe-area-inset-top)) + 50px); }
  #sl-loot-panel .sl-c { gap: 2px; }
  .sl-c i { width: 22px; height: 22px; font-size: 13px; }
  .sl-c b { font-size: 16px; }
  #sl-speed { width: 90px; height: 90px; bottom: 62px; }
  body.touch #sl-speed { top: calc(max(10px, env(safe-area-inset-top)) + 48px); width: 80px; height: 80px; bottom: auto; }
  .sg-arc { inset: 5px; }
  .sg-ticks { inset: 15px; }
  .sg-read { bottom: 8px; }
  .sg-read b { font-size: 19px; }
  .sg-read small { font-size: 9.5px; }
  .sg-hub { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
  .li-slide { font-size: 14px; }
  .sd-goal { font-size: 11.5px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.touch #sl-progress { --tb: max(10px, env(safe-area-inset-bottom)); }
  body.touch #sl-speed { top: calc(max(8px, env(safe-area-inset-top)) + 50px); width: 76px; height: 76px; }
  #sl-speed { width: 92px; height: 92px; }
  .sg-read b { font-size: 18px; }
  .sg-read small { font-size: 9px; }
  .sd-goals { margin-bottom: 4px; }
}