:root {
  --night: #1a0f33;
  --night-2: #2a1850;
  --ink: #fff7ea;
  --muted: #c7b8e8;
  --orange: #ff8a1f;
  --orange-edge: #b34d00;
  --cheese: #ffc61a;
  --cheese-edge: #c96a00;
  --purple: #8b3dff;
  --purple-edge: #5a1fc0;
  --face: #4a3d7d;
  --edge: #2a1f52;
  --danger: #ff4d6d;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: max(12px, env(safe-area-inset-left));
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--ink); font-family: var(--font); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
[hidden] { display: none !important; }
canvas#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; touch-action: none; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
svg rect { fill: currentColor; stroke: none; }
h1, h2, p { margin: 0; }

/* Buttons: a solid face on a darker edge that sinks when pressed, like the portal. */
.btn {
  --depth: 5px;
  appearance: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 800; font-size: 18px; color: var(--ink);
  background: var(--face);
  box-shadow: inset 0 2px 0 #ffffff2e, 0 var(--depth) 0 var(--edge), 0 calc(var(--depth) + 6px) 14px #0006;
  border-radius: 16px; padding: 0 22px; height: 52px; min-width: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform .08s ease-out, box-shadow .08s ease-out, filter .15s;
  margin-bottom: var(--depth);
}
.btn:hover { filter: brightness(1.1); }
.btn:active, .btn.pressed { transform: translateY(var(--depth)); box-shadow: inset 0 2px 0 #ffffff2e, 0 0 0 var(--edge), 0 4px 8px #0006; }
.btn:focus { outline: none; }
.btn:focus-visible, .btn.focus { outline: 4px solid var(--cheese); outline-offset: 4px; }
.btn.primary { --face: var(--orange); --edge: var(--orange-edge); color: #2b1000; }
.btn.big { height: 64px; font-size: 24px; padding: 0 40px; border-radius: 20px; }
.btn.small { height: 40px; font-size: 15px; padding: 0 16px; border-radius: 12px; --depth: 4px; }
.btn.round { width: 52px; padding: 0; border-radius: 50%; }
.btn.ghost { --face: transparent; --edge: transparent; box-shadow: none; color: var(--muted); }
.btn.ghost:active { transform: none; }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: default; }

/* Screens */
.screen { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px var(--pad); z-index: 10; }
.screen.dim { background: #0d0620b8; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.card {
  width: min(420px, 100%); text-align: center; padding: 32px 28px 22px;
  background: linear-gradient(180deg, #34205f, #241443); border-radius: 28px;
  box-shadow: inset 0 2px 0 #ffffff22, 0 10px 0 #140a2b, 0 24px 60px #000a;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: pop .28s cubic-bezier(.2, 1.4, .4, 1);
}
.card .btn { width: 100%; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.kicker { font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--cheese); }
.card h2 { font-size: 34px; line-height: 1.1; }

#loading { background: radial-gradient(circle at 50% 30%, var(--night-2), var(--night)); gap: 16px; align-content: center; color: var(--muted); font-weight: 700; }
.spinner { width: 48px; height: 48px; border-radius: 50%; border: 6px solid #ffffff22; border-top-color: var(--orange); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* Title */
#title { background: radial-gradient(ellipse 46% 60% at 50% 50%, #12082af0 0%, #12082ac0 55%, #12082a40 100%); }
.title-card { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.game-name { font-size: clamp(56px, 12vw, 104px); line-height: .9; font-weight: 900; letter-spacing: -.03em; text-shadow: 0 6px 0 #140a2b, 0 16px 40px #000c; }
.game-name em { font-style: normal; color: var(--orange); }
.tagline { font-size: 20px; color: var(--muted); font-weight: 700; max-width: 22ch; }
.lang { display: flex; gap: 10px; margin-top: 6px; }
.lang .btn.active { --face: var(--purple); --edge: var(--purple-edge); }

/* Map */
#map { place-items: start center; background: radial-gradient(circle at 50% 0%, #3b2170 0%, var(--night) 70%); overflow-y: auto; padding-top: 20px; }
.map-head { width: min(560px, 100%); display: flex; align-items: center; gap: 16px; }
.map-head h2 { font-size: 26px; display: flex; align-items: center; gap: 6px; }
.map-head h2::before { content: "★"; color: var(--cheese); }
.path { list-style: none; margin: 18px 0 0; padding: 0 0 40px; width: min(560px, 100%); display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px 10px; }
.path li { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* Second row runs right to left so the path snakes like a board game. */
.path li:nth-child(6) { grid-row: 2; grid-column: 5; } .path li:nth-child(7) { grid-row: 2; grid-column: 4; } .path li:nth-child(8) { grid-row: 2; grid-column: 3; } .path li:nth-child(9) { grid-row: 2; grid-column: 2; } .path li:nth-child(10) { grid-row: 2; grid-column: 1; }
.node { width: 76px; height: 76px; font-size: 28px; border-radius: 50%; padding: 0; --face: var(--purple); --edge: var(--purple-edge); }
.node.done { --face: var(--orange); --edge: var(--orange-edge); color: #2b1000; }
.node.locked { --face: #3a305e; --edge: #241c40; color: #8d82b5; }
.node.hard::after { content: "💀"; position: absolute; transform: translate(26px, -26px); font-size: 20px; }
.node.boss { width: 92px; height: 92px; font-size: 32px; }
.node { position: relative; }
.node-stars { font-size: 16px; letter-spacing: 2px; color: #ffffff30; height: 18px; }
.node-stars b { color: var(--cheese); font-weight: 400; }

/* Intro */
.intro-tip { font-size: 18px; color: var(--muted); font-weight: 700; line-height: 1.35; }
.intro-tip:empty { display: none; }
.intro-facts { display: flex; gap: 24px; font-size: 16px; color: var(--muted); font-weight: 700; margin: 6px 0; }
.intro-facts b { color: var(--ink); font-size: 22px; }

/* Result */
.stars { display: flex; gap: 8px; margin-top: -4px; }
.stars i { width: 64px; height: 64px; clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 61%, 80% 100%, 50% 78%, 20% 100%, 29% 61%, 0 38%, 37% 35%); background: #ffffff1c; }
.stars i:nth-child(2) { transform: translateY(-14px) scale(1.15); }
.stars i.on { background: var(--cheese); animation: star .45s cubic-bezier(.2, 1.6, .4, 1) both; }
.stars i.on:nth-child(2) { animation-delay: .25s; }
.stars i.on:nth-child(3) { animation-delay: .5s; }
@keyframes star { from { transform: scale(0) rotate(-40deg); } }
.stars i.on:nth-child(2) { animation-name: star2; }
@keyframes star2 { from { transform: translateY(-14px) scale(0) rotate(-40deg); } to { transform: translateY(-14px) scale(1.15); } }
.result-text { font-size: 18px; color: var(--muted); font-weight: 700; }
.reward { font-size: 16px; font-weight: 800; color: var(--cheese); background: #ffc61a1c; padding: 8px 14px; border-radius: 12px; }

/* HUD */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.hud .btn, .hud .chip { pointer-events: auto; }
.hud-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) var(--pad) 0; }
.level-chip, .goal-chip, .timer { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 14px; background: #1a0f33cc; box-shadow: inset 0 0 0 2px #ffffff18; font-weight: 800; font-size: 18px; }
.timer { margin-left: auto; font-variant-numeric: tabular-nums; min-width: 104px; justify-content: center; }
.timer.low { background: var(--danger); color: #fff; animation: beat 1s infinite; }
.timer.frozen { background: #4cc9f0; color: #062a3a; }
@keyframes beat { 50% { transform: scale(1.08); } }
.goal-chip .dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 -3px 0 #0003; }
.hud-bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 12px; padding: 0 var(--pad) max(10px, env(safe-area-inset-bottom)); }
.booster { position: relative; height: 60px; min-width: 120px; padding: 0 16px; font-size: 16px; }
.booster .count { position: absolute; top: -8px; right: -8px; min-width: 26px; height: 26px; border-radius: 13px; background: var(--orange); color: #2b1000; font-size: 15px; display: grid; place-items: center; box-shadow: 0 2px 0 var(--orange-edge); padding: 0 6px; }
.booster .count.none { background: #5d528c; color: #fff; box-shadow: none; }
.toast { position: absolute; left: 50%; top: 22%; transform: translate(-50%, -10px); opacity: 0; padding: 12px 22px; border-radius: 16px; background: #1a0f33e8; font-size: 22px; font-weight: 900; transition: opacity .2s, transform .2s; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--danger); color: #fff; }

.sound-hint { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; padding: 8px 16px; border-radius: 12px; background: #000a; color: var(--muted); font-size: 15px; font-weight: 700; pointer-events: none; }

/* Phones */
@media (max-width: 640px) {
  .booster { min-width: 0; flex: 1; height: 58px; padding: 0 8px; flex-direction: column; gap: 0; font-size: 12px; }
  .booster svg { width: 22px; height: 22px; }
  .hud-bottom { gap: 8px; }
  .level-chip, .goal-chip, .timer { height: 40px; padding: 0 12px; font-size: 16px; }
  .timer { min-width: 88px; }
  .node { width: 60px; height: 60px; font-size: 22px; }
  .node.boss { width: 72px; height: 72px; }
  .path { gap: 18px 4px; }
}
@media (max-height: 460px) {
  .card { padding: 18px 22px 14px; gap: 8px; }
  .card h2 { font-size: 26px; }
  .btn.big { height: 54px; font-size: 20px; }
  .stars i { width: 48px; height: 48px; }
}

/* TV: seen from the couch, driven by the remote. */
body.tv .btn:focus-visible, body.tv .btn.focus { outline-width: 5px; outline-offset: 5px; transform: scale(1.06); }
body.tv .booster { min-width: 150px; height: 66px; font-size: 18px; }

/* Halloween parlour: dark plum surfaces with warm, selective reward accents. */
:root {
  --night: #160d23; --night-2: #301839; --muted: #cdbbd8;
  --orange: #ee9b39; --orange-edge: #a65019;
  --cheese: #ffc107; --purple: #704098; --purple-edge: #45235e;
  --face: #4c315f; --edge: #291834;
}
.btn { background: linear-gradient(180deg, #ffffff14, #ffffff00 65%), var(--face); border: 1px solid #ffffff25; }
.btn.primary { color: #42260b; }
.hud-top .round { --face: #58396c; --edge: #301e40; }
.level-chip, .goal-chip, .timer { background: #20132de8; box-shadow: inset 0 1px 0 #ffffff40, 0 4px 0 #20153a40; border: 1px solid #b18aaf35; }
.booster { --face: #503361; --edge: #2e1b3c; border-radius: 20px; }
.booster[data-booster="magnet"] { --face: #355247; --edge: #20362e; }
.booster[data-booster="freeze"] { --face: #354b63; --edge: #202d40; }
.booster[data-booster="shuffle"] { --face: #653650; --edge: #3d2033; }
.booster .count { background: #e8a54a; color: #2c170a; border: 2px solid #efbb72; box-shadow: 0 3px 0 #a96924; }
.card { background: linear-gradient(160deg,#42294f,#24172f); border: 2px solid #84628d66; box-shadow: inset 0 2px 0 #ffffff35, 0 10px 0 #251543, 0 24px 60px #12082a99; }
#result .card { padding-top: 40px; }
.stars { gap: 4px; margin: -12px 0 8px; }
.stars i { clip-path: none; background: transparent; width: 76px; height: 76px; display: block; font-style: normal; filter: drop-shadow(0 6px 8px #24153c66); }
.stars i.on { background: transparent; }
.reward-star { width: 100%; height: 100%; fill: none; stroke: none; overflow: visible; }
.reward-star .star-face { fill: #8b71aa; }
.reward-star .star-shadow { fill: #513970; }
.reward-star .star-shine { stroke: #ffffff25; stroke-width: 4; fill: none; }
.on .reward-star .star-face, .match-burst .star-face { fill: #ffc107; }
.on .reward-star .star-shadow, .match-burst .star-shadow { fill: #dc8507; }
.on .reward-star .star-shine, .match-burst .star-shine { stroke: #fff4ae; }
.node-stars { display: flex; gap: 1px; height: 20px; }
.node-stars i { width: 20px; height: 20px; }
.quick-tip { position: absolute; top: max(76px, calc(env(safe-area-inset-top) + 76px)); left: 50%; transform: translateX(-50%); font-size: 13px; font-weight: 750; color: #f2eaff; text-shadow: 0 1px 4px #251957; white-space: nowrap; }
.streak { position: absolute; top: 29%; right: max(20px, env(safe-area-inset-right)); width: clamp(112px, 15vw, 184px); padding: 0; text-align: center; color: #ffc86b; pointer-events: none; transform-origin: 75% 50%; }
.streak strong { display: block; font-size: clamp(23px, 3vw, 40px); line-height: 1.1; font-weight: 950; letter-spacing: -.04em; text-shadow: 0 3px 0 #66301d, 0 5px 10px #10091de0; }
.streak > span { display: block; font-size: 12px; font-weight: 800; margin-top: 5px; color: #ffe7b5; text-shadow: 0 2px 6px #10091d; }
.streak span:empty { display: none; }
.streak[data-tier="3"] { color: #ffad43; }
.streak[data-tier="4"] { color: #ffe381; }
.streak.hit { animation: combo-hit 1.35s cubic-bezier(.18,.9,.3,1) both; }
/* Cadence stays in game state; no card or meter around the reward text. */
.streak-track { display: none; }
@keyframes combo-hit {
  0% { transform: translateY(10px) scale(.6) rotate(-7deg); opacity: 0; }
  16% { transform: translateY(0) scale(1.16) rotate(3deg); opacity: 1; }
  32% { transform: scale(1) rotate(-2deg); opacity: 1; }
  72% { transform: translateY(-4px) scale(1); opacity: 1; }
  100% { transform: translateY(-20px) scale(.94); opacity: 0; }
}
.match-burst { position: absolute; left: 50%; top: 40%; width: 0; height: 0; }
.match-burst span { position: absolute; width: 20px; height: 20px; margin: -10px; animation: star-flight .8s ease-out both; }
@keyframes star-flight { 0% { transform: translate(0,0) scale(.25); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--turn)) scale(.5); opacity: 0; } }
@media (max-width: 640px) {
  .streak { right: max(10px, env(safe-area-inset-right)); top: 24%; width: 112px; }
  .streak strong { font-size: 23px; }
  .streak > span { font-size: 11px; }
}
@media (max-height: 460px) { .quick-tip { display: none; } .streak { top: 25%; } .streak strong { font-size: 25px; } .streak > span { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .streak.hit, .stars i.on, .timer.low, .card { animation: none; }
  .match-burst { display: none; }
  .btn, .toast { transition: none; }
}

/* A compact lantern belongs to the HUD, while match celebrations stay on the side. */
.lantern-hud { position: absolute; top: max(76px, calc(env(safe-area-inset-top) + 76px)); left: var(--pad); display: flex; align-items: center; gap: 6px; width: 160px; color: #e4c7a2; }
.lantern-icon { width: 40px; height: 44px; flex-shrink: 0; stroke: #8c643b; stroke-width: 3; }
.pumpkin-body { fill: #6c3b27; }
.pumpkin-face { fill: #b98b45; stroke: none; }
.lantern-hud b { display: block; font-size: 13px; }
.lantern-hud span { display: block; font-size: 11px; white-space: nowrap; }
.lantern-track { height: 3px; background: #59404b; margin-top: 5px; border-radius: 3px; overflow: hidden; }
.lantern-track i { display: block; height: 100%; background: #f0a344; transform: scaleX(var(--charge,0)); transform-origin: left; }
.lantern-hud.burning { color: #ffda88; }
.burning .pumpkin-body { fill: #bc601f; }
.burning .pumpkin-face { fill: #ffdf76; }
.burning .lantern-icon { filter: drop-shadow(0 0 6px #f18a3866); }
.quick-tip { top: max(76px, calc(env(safe-area-inset-top) + 76px)); left: max(192px, calc(env(safe-area-inset-left) + 192px)); right: var(--pad); transform: none; max-width: 54ch; margin: 0 auto; white-space: normal; font-size: 12px; line-height: 1.4; color: #d8c8dd; }
@media (max-width: 640px) { .lantern-hud { width: 134px; gap: 3px; } .lantern-icon { width: 30px; } .lantern-hud span { font-size: 10px; } .quick-tip { left: 160px; font-size: 11px; } }
@media (max-height: 460px) { .lantern-hud { top: max(68px, calc(env(safe-area-inset-top) + 68px)); } }

/* Short renewable clock: the wide bar makes lost and earned time visible. */
.time-track { position: absolute; top: max(66px, calc(env(safe-area-inset-top) + 66px)); left: var(--pad); right: var(--pad); height: 12px; background: #160e20; border: 1px solid #96725b70; border-radius: 8px; box-shadow: inset 0 2px 3px #0008; }
.time-fill { height: 100%; width: 100%; border-radius: 8px; transform-origin: left; background: linear-gradient(180deg,#b7d861,#669b3d); box-shadow: inset 0 1px 0 #ffffbc55; will-change: transform; }
.time-track.low .time-fill { background: linear-gradient(180deg,#f5b34c,#c36b29); }
.time-track.critical .time-fill { background: linear-gradient(180deg,#fb7962,#bc304c); }
.time-track.critical { animation: clock-danger .7s ease-in-out infinite; }
.time-track.frozen .time-fill { background: linear-gradient(180deg,#a7deef,#5286b0); }
.time-track.boosted { box-shadow: 0 0 12px #c6e97160; border-color: #cde58a; }
.time-gain { position: absolute; right: 8px; top: 16px; color: #d7f3a6; font-size: 15px; font-weight: 900; text-shadow: 0 2px 4px #140d20; }
@keyframes clock-danger { 50% { box-shadow: 0 0 10px #ea4f6366; } }
.lantern-hud, .quick-tip { top: max(96px, calc(env(safe-area-inset-top) + 96px)); }
@media (max-height: 460px) { .time-track { top: max(64px, calc(env(safe-area-inset-top) + 64px)); height: 9px; } .lantern-hud { top: max(86px, calc(env(safe-area-inset-top) + 86px)); } }
@media (prefers-reduced-motion: reduce) { .time-track.critical { animation: none; } }

/* Toy controls: illustrated power tokens instead of text-heavy rectangular buttons. */
.hud-bottom { gap: clamp(14px, 4vw, 28px); }
.booster { --face: #4e3264; --edge: #281432; width: 78px; min-width: 78px; height: 78px; padding: 10px; border-radius: 27px; flex: none; border: 2px solid #ac7bb263; box-shadow: inset 0 3px 0 #e1c4ef30, inset 0 -5px 8px #0003, 0 7px 0 var(--edge), 0 11px 15px #0005; transform: rotate(-3deg); }
.booster:nth-child(even) { transform: rotate(3deg); }
.booster:active { transform: translateY(5px) rotate(0) scale(.94); }
.booster[data-booster="magnet"] { --face: #4c3749; --edge: #2c1b2c; border-color: #d4909860; }
.booster[data-booster="freeze"] { --face: #304860; --edge: #182939; border-color: #8dc8e260; }
.booster[data-booster="shuffle"] { --face: #573563; --edge: #301e3b; border-color: #c094d660; }
.booster .power-icon { width: 46px; height: 46px; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 3px 0 #160d2380); }
.booster .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.booster .count { top: -7px; right: -7px; height: 24px; min-width: 24px; font-size: 14px; }
.level-chip { background: transparent; border: 0; box-shadow: none; gap: 4px; padding: 0 4px; }
.level-chip svg { width: 20px; color: #e9ba72; }
.goal-chip { padding: 0 8px; background: #24152bcc; border: 0; }
.goal-chip .dot { width: 28px; height: 32px; border-radius: 0; box-shadow: none; }
.goal-chip .dot svg { width: 28px; height: 32px; stroke-width: 1.5; }
.lantern-hud { width: 100px; }
.lantern-hud b { display: none; }
.lantern-hud span { font-size: 13px; font-weight: 900; }
.lantern-track { width: 42px; height: 4px; }
.quick-tip { display: flex; align-items: center; justify-content: center; gap: 3px; left: 128px; max-width: 240px; height: 38px; }
.quick-tip svg { width: 26px; height: 30px; stroke-width: 2; }
.quick-tip b { font-size: 16px; color: #e9d9b4; margin-left: 5px; white-space: nowrap; }
.audio-controls { display: flex; justify-content: center; gap: 18px; }
.card .audio-controls .btn { width: 54px; height: 54px; padding: 0; }
.mute-slash { display: none; stroke: #ffae92; stroke-width: 3; }
.muted .mute-slash { display: block; }
.muted { filter: saturate(.3); }
.card { border-radius: 34px; }
.card > .btn { width: auto; min-width: 190px; height: 50px; border-radius: 18px; }
.card > .btn.primary { height: 64px; min-width: 210px; border-radius: 24px; }
.card > .btn svg { width: 26px; height: 26px; }
.card > .btn.primary svg { width: 32px; height: 32px; }
.mission-name { color: #e6bd7e; font-size: 16px; font-weight: 850; }
.pause-tip { color: var(--muted); font-size: 14px; line-height: 1.4; max-width: 30ch; }
@media (max-width: 640px) { .booster { width: 62px; min-width: 62px; height: 62px; padding: 7px; border-radius: 22px; } .booster .power-icon { width: 39px; height: 39px; } .hud-bottom { gap: clamp(12px, 4vw, 20px); } .lantern-hud { width: 100px; } .quick-tip { left: 124px; height: 38px; } .quick-tip svg { width: 22px; height: 26px; } .quick-tip b { font-size: 14px; } }
@media (max-height: 460px) { .booster { width: 56px; min-width: 56px; height: 56px; border-radius: 20px; padding: 6px; } .booster .power-icon { width: 36px; height: 36px; } #pause .card { display: grid; grid-template-columns: 1fr 1fr; width: min(540px, 100%); gap: 10px 18px; } #pause .card h2, #pause .mission-name, #pause .pause-tip { grid-column: 1/-1; } #pause .pause-tip { display: none; } #pause .lang { margin: 0; } #pause .card > .btn { min-width: 0; width: 100%; height: 44px; font-size: 16px; padding: 0 10px; } .card .audio-controls .btn { width: 44px; height: 44px; min-width: 44px; } .quick-tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .booster, .booster:nth-child(even), .booster:active { transform: none; } }

/* The renewable clock sits directly below the tray, above the power tokens. */
.time-dock { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(108px + env(safe-area-inset-bottom)); width: min(740px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px; height: 30px; }
.time-dock .time-track { position: relative; inset: auto; flex: 1; height: 15px; min-width: 0; border-radius: 10px; }
.time-dock .timer { margin: 0; padding: 0; min-width: 68px; height: 30px; background: none; border: 0; box-shadow: none; gap: 4px; font-size: 18px; }
.time-dock .timer svg { width: 18px; height: 18px; }
.time-dock .time-gain { top: -23px; right: 3px; font-size: 17px; }
.time-track.critical { animation: tray-alarm .55s ease-in-out infinite; }
.time-track.last-seconds { animation-duration: .28s; }
.time-track.critical .time-fill { box-shadow: inset 0 2px 0 #ffb28a90, 0 0 10px #ef634a80; }
.time-dock .timer.low { color: #ff9b7c; animation: none; }
.time-dock .timer.frozen { color: #9cdef1; }
@keyframes tray-alarm { 50% { border-color: #ff9778; box-shadow: 0 0 16px #ef634a90; } }
.lantern-hud, .quick-tip { top: max(72px, calc(env(safe-area-inset-top) + 72px)); }
@media (max-width: 640px) { .time-dock { width: calc(100% - 24px); gap: 8px; } .time-dock .timer { min-width: 58px; font-size: 16px; } .time-dock .time-track { height: 13px; } }
@media (max-height: 460px) { .time-dock { height: 24px; } .time-dock .time-track { height: 11px; } .lantern-hud { top: max(66px, calc(env(safe-area-inset-top) + 66px)); } }
@media (prefers-reduced-motion: reduce) { .time-track.critical { animation: none; border-color: #ff9778; } }

/* Landscape phones: leave the centre for the bucket, not stacked toolbars. */
@media (orientation: landscape) and (max-height: 500px) {
  .hud-bottom { left: max(10px, env(safe-area-inset-left)); right: auto; top: 50%; bottom: auto; transform: translateY(-50%); flex-direction: column; gap: 8px; padding: 0; }
  .booster { width: 48px; min-width: 48px; height: 48px; border-radius: 17px; padding: 5px; --depth: 3px; }
  .booster .power-icon { width: 32px; height: 32px; }
  .booster .count { width: 21px; height: 21px; min-width: 21px; font-size: 12px; top: -5px; right: -5px; }
  .lantern-hud { top: max(10px, env(safe-area-inset-top)); left: max(130px, calc(env(safe-area-inset-left) + 130px)); height: 44px; }
  .lantern-icon { width: 30px; height: 38px; }
  .quick-tip { display: none; }
  .time-dock { left: calc(50% + 36px); width: min(680px, calc(100% - 110px)); height: 24px; }
  .time-dock .time-track { height: 12px; }
  .streak { top: 28%; right: max(16px, env(safe-area-inset-right)); width: 112px; }
}
@media (orientation: landscape) and (max-height: 340px) { .hud-bottom { gap: 6px; } .booster { height: 44px; width: 44px; min-width: 44px; } .hud-top .btn.round { height: 44px; width: 44px; min-width: 44px; } }

/* Portrait play: one compact status row, a large bowl, thumb controls below it. */
@media (orientation: portrait) and (max-width: 640px) {
  .hud-top { gap: 8px; padding: max(10px, env(safe-area-inset-top)) 12px 0; }
  .hud-top .btn.round { width: 44px; min-width: 44px; height: 44px; --depth: 3px; }
  .level-chip { height: 44px; font-size: 16px; }
  .lantern-hud { top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); height: 44px; width: 90px; gap: 4px; }
  .lantern-icon { width: 32px; height: 38px; }
  .quick-tip { display: none; }
  .hud-bottom { gap: clamp(12px, 5vw, 22px); padding: 0 12px max(12px, env(safe-area-inset-bottom)); }
  .booster { flex: 0 0 56px; width: 56px; min-width: 56px; height: 56px; border-radius: 19px; padding: 6px; --depth: 4px; }
  .booster .power-icon { width: 38px; height: 38px; }
  .booster .count { min-width: 22px; height: 22px; font-size: 12px; top: -5px; right: -5px; }
  .time-dock { height: 24px; width: calc(100% - 28px); gap: 8px; }
  .time-dock .timer { height: 24px; font-size: 15px; min-width: 56px; }
  .time-dock .time-track { height: 12px; }
  .streak { top: max(68px, calc(env(safe-area-inset-top) + 68px)); right: 12px; width: 100px; }
  .streak strong { font-size: 22px; }
  .streak > span { font-size: 10px; }
  .card { max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px 20px 18px; }
}

/* Candy Panic: the launcher's plum, candy-pink and pumpkin-gold art direction. */
:root { --night: #170b2c; --night-2: #35105b; --face: #7133a7; --edge: #361249; --orange: #ffb321; --orange-edge: #bd5e10; --muted: #d9c8ea; }
.hud-mark { width: 32px; height: 32px; border-radius: 11px; box-shadow: 0 2px 0 #14081f, 0 0 0 1px #ffdb8d60; object-fit: cover; }
.loading-mark { width: min(160px, 40vw); height: auto; border-radius: 30%; box-shadow: 0 10px 0 #10061f, 0 15px 50px #b632f338; }
.menu-mark { width: 72px; height: 72px; border-radius: 24px; box-shadow: 0 4px 0 #160921; }
.btn { background: linear-gradient(170deg, #ffffff38, #ffffff00 48%, #00000022), var(--face); }
.hud-top .round { --face: #7032aa; --edge: #361249; border: 2px solid #ba87e5; box-shadow: inset 0 2px 0 #e9c8ff70, 0 4px 0 var(--edge); }
.booster { --face: #7133a7; --edge: #391449; border-color: #c18be9; box-shadow: inset 0 3px 0 #f0d0ff70, inset 0 -4px 8px #210a3b66, 0 6px 0 var(--edge), 0 10px 14px #0006; }
.booster[data-booster="magnet"] { --face: #ad286d; --edge: #5a123c; border-color: #ff9ace; }
.booster[data-booster="freeze"] { --face: #25668e; --edge: #12364e; border-color: #9be4f5; }
.booster[data-booster="shuffle"] { --face: #7e31ad; --edge: #40154f; border-color: #d18df3; }
.booster .count { background: linear-gradient(#ffe78c,#ffb52b); color: #442007; border-color: #fff0ab; box-shadow: 0 2px 0 #a45a12; }
.card { background: radial-gradient(ellipse at 50% 0, #60217c, #241034 75%); border-color: #a55bd27d; }
.lantern-icon { stroke: #ad561b; }
.pumpkin-body { fill: #f69920; }
.pumpkin-face { fill: #ffed89; }
.burning .pumpkin-body { fill: #ff9d15; }
.burning .pumpkin-face { fill: #fff4ad; }
.lantern-track i { background: linear-gradient(90deg,#f844ad,#ffc549); }
.time-track { border-color: #b278d0; background: #1b0b2f; }
.time-fill { background: linear-gradient(180deg,#f99bd8,#df38a0 55%,#a3228d); box-shadow: inset 0 2px 0 #ffe0f180; }
.time-track.low .time-fill { background: linear-gradient(180deg,#ffe47b,#f9a329 55%,#d06a14); }
.time-track.critical .time-fill { background: linear-gradient(180deg,#ff9c9b,#f23f72 55%,#b31956); }
.time-track.boosted { border-color: #ffe7a0; box-shadow: 0 0 12px #ffc24f70; }
.time-gain { color: #ffe591; }
.streak { color: #ffdc68; }
.streak strong { text-shadow: 0 3px 0 #803019, 0 0 10px #ffad3540, 0 6px 12px #140821; }
@media (orientation: portrait) and (max-width: 360px) { .hud-mark { width: 26px; height: 26px; border-radius: 9px; } .level-chip { gap: 3px; font-size: 15px; } }

.hazard-status { display: inline-flex; align-items: center; gap: 4px; color: #ff8d9f; font-size: 16px; font-weight: 900; }
.hazard-status svg { width: 22px; height: 22px; fill: #481527; stroke: #ff718e; stroke-width: 1.8; }
.hazard-status svg path + path { stroke: #fff0d2; }

/* Icon-first screens. Labels stay available to assistive technology. */
.sr-only, .card .action-label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; border: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }
#pause .card { display: flex; flex-direction: column; width: min(330px,100%); gap: 18px; padding: 24px 22px; }
.pause-guide { display: flex; align-items: center; justify-content: center; gap: 4px; }
.pause-guide svg { width: 30px; height: 34px; flex: none; }
.pause-guide .reward-star { width: 36px; height: 36px; }
.pause-actions { display: grid; grid-template-columns: 64px 64px; justify-content: center; gap: 16px; }
.card .pause-actions .btn { width: 64px; min-width: 64px; height: 64px; border-radius: 50%; padding: 0; }
.card .pause-actions .btn.primary { grid-column: 1/-1; justify-self: center; width: 86px; height: 86px; }
.card .pause-actions .btn svg { width: 30px; height: 30px; }
.card .pause-actions .btn.primary svg { width: 42px; height: 42px; }
.card .audio-controls .btn { border-radius: 50%; }
#result .card { width: min(350px,100%); gap: 18px; }
.result-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }
.card .result-actions .btn { width: 62px; min-width: 62px; height: 62px; border-radius: 50%; padding: 0; }
.card .result-actions .btn.primary { width: 82px; height: 82px; }
.card .result-actions .btn svg { width: 32px; height: 32px; }
.result-outcome { width: 82px; height: 82px; color: #ff8d91; }
.result-outcome svg { width: 100%; height: 100%; stroke-width: 3; }
.node.hard::after { content: '!'; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #9b264d; color: #fff1df; font-size: 18px; box-shadow: 0 2px 0 #46142e; }
.hud.epic .hud-mark { box-shadow: 0 2px 0 #14081f, 0 0 0 2px #ffcb53, 0 0 12px #eb722d40; }
.booster.unavailable { animation: power-denied .32s ease-out; border-color: #ff718e; }
@keyframes power-denied { 25% { transform: rotate(-7deg); } 65% { transform: rotate(6deg); } }

/* Edge-only danger: centre and touch targets stay unobscured. Pulses stay slow. */
.panic-edge { position: fixed; inset: 0; pointer-events: none; z-index: 3; opacity: 0; background: radial-gradient(ellipse at center, transparent 56%, rgb(255 32 75 / var(--panic-strength,0)) 100%); box-shadow: inset 0 0 36px rgb(236 30 65 / var(--panic-strength,0)); transition: opacity .18s ease-out; }
.panic-edge:not([data-tier="0"]) { opacity: 1; animation: danger-breath var(--panic-period,2.8s) ease-in-out infinite; }
@keyframes danger-breath { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
.time-track.critical { animation-duration: 2s; }
.time-track.last-seconds { animation-duration: 1.4s; }
.hud[data-shelf="3"] .hazard-status { color: #ffc4ca; }
@media (max-height: 500px) {
  #pause .card { width: min(540px,100%); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; padding: 18px; }
  #pause .menu-mark { width: 56px; height: 56px; justify-self: center; }
  #pause .pause-guide { grid-column: 1; }
  #pause .audio-controls { grid-column: 1; }
  #pause .pause-actions { grid-column: 2; grid-row: 1/4; }
}
@media (prefers-reduced-motion: reduce) {
  .panic-edge:not([data-tier="0"]) { animation: none; opacity: .8; }
  .booster.unavailable, .time-track.critical, .time-track.last-seconds { animation: none; }
}

.hud[data-playing="false"] .time-track.critical, .hud[data-playing="false"] .time-track.last-seconds { animation: none; }
@media (prefers-reduced-motion: reduce) { .streak.hit, .stars i.on { animation: none; } }

/* Illustrated witch's kitchen behind the transparent 3D canvas. The bottom is dimmed so the lit props never compete with the power tokens. */
body { background: linear-gradient(180deg, #0c051800 62%, #0c0518b8 100%), url(ui/bg-play-portrait.jpg) center / cover no-repeat, var(--night); }
@media (min-aspect-ratio: 1/1) { body { background: linear-gradient(180deg, #0c051800 55%, #0c0518a0 100%), linear-gradient(90deg, #0c05188c, #0c051800 18%, #0c051800 82%, #0c05188c), url(ui/bg-play-landscape.jpg) center / cover no-repeat, var(--night); } }
@media (orientation: landscape) and (max-height: 500px) {
  .time-dock { top: max(18px, env(safe-area-inset-top)); bottom: auto; left: auto; right: max(16px, env(safe-area-inset-right)); transform: none; width: min(44vw, 420px); }
}

/* Level badge: the illustrated candy with the level number on it. */
.level-chip { padding: 0; }
.level-badge { position: relative; display: grid; place-items: center; width: 52px; height: 50px; }
.level-badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px #14081f99); }
.level-badge span { position: relative; font-size: 19px; font-weight: 950; color: #7a1f55; text-shadow: 0 1px 0 #fff6fb; }
@media (orientation: portrait) and (max-width: 360px) { .level-badge { width: 44px; height: 42px; } .level-badge span { font-size: 16px; } }

/* Illustrated map button. */
.map-icon { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 1px #14081f88); }
.card .result-actions .btn .map-icon, .card .pause-actions .btn .map-icon { width: 42px; height: 42px; }

/* Loss, step one: the reason appears right above the shelf while the board stays visible. */
.outcome-banner { position: absolute; transform: translate(-50%, -100%); margin: 0; z-index: 6; white-space: nowrap; pointer-events: none;
  font-size: clamp(34px, 9vw, 52px); font-weight: 950; letter-spacing: -.02em; color: #fff3d9;
  -webkit-text-stroke: 2px #8a1650; paint-order: stroke fill;
  text-shadow: 0 4px 0 #8a1650, 0 7px 0 #3d0a2a, 0 10px 24px #0b0416cc, 0 0 30px #ff3d7f80;
  animation: outcome-in .5s cubic-bezier(.2, 1.6, .4, 1) both, outcome-wobble 1.4s .5s ease-in-out infinite; }
@keyframes outcome-in { from { transform: translate(-50%, -60%) scale(.3) rotate(-8deg); opacity: 0; } }
@keyframes outcome-wobble { 50% { transform: translate(-50%, -104%) rotate(-2deg) scale(1.03); } }
@media (orientation: landscape) and (max-height: 500px) { .outcome-banner { font-size: 38px; } }

/* Loss, step two: a light veil keeps the full shelf readable behind the card. */
#result.dim { background: #0d062066; backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
#result .card { padding-top: 16px; gap: 10px; }
.result-art { width: min(180px, 46vw); height: auto; margin: 0; filter: drop-shadow(0 10px 14px #0b041699); animation: art-in .45s cubic-bezier(.2, 1.5, .4, 1) both; }
#result:not(.lost) .result-art { width: min(140px, 36vw); margin-bottom: -18px; }
#result .card h2 { font-size: 32px; }
@keyframes art-in { from { transform: translateY(18px) scale(.7); opacity: 0; } }
@media (max-height: 500px) {
  #result .card { flex-direction: row; flex-wrap: wrap; justify-content: center; width: min(520px, 100%); padding: 14px 20px; }
  .result-art, #result:not(.lost) .result-art { width: 120px; margin: 0; }
  #result .card h2 { width: 100%; order: -1; font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .outcome-banner, .result-art { animation: none; } }

/* Map: illustrated candy land. Portrait scrolls up the road; landscape fits one screen. */
#map { display: block; padding: 0; overflow: hidden; background: linear-gradient(#12081fd0, #12081fd0), url(ui/bg-map-portrait.jpg) center / cover, var(--night); }
#map .map-head { position: absolute; z-index: 4; top: 0; left: 0; right: 0; width: auto; padding: max(12px, env(safe-area-inset-top)) var(--pad) 28px; background: linear-gradient(#12081fe6, #12081f00); pointer-events: none; }
#map .map-head .btn { pointer-events: auto; }
#map .map-head h2 { text-shadow: 0 2px 6px #0b0416; }
.map-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.map-world { position: relative; width: min(100%, 560px); margin: 0 auto; aspect-ratio: 724 / 2172; background: url(ui/bg-map-portrait.jpg) center / 100% 100% no-repeat; box-shadow: 0 0 60px #0b0416; }
#map[data-mode="landscape"] { background: var(--night); }
#map[data-mode="landscape"] .map-scroll { overflow: hidden; }
#map[data-mode="landscape"] .map-world { position: absolute; inset: 0; width: auto; margin: 0; aspect-ratio: auto; background: url(ui/bg-map-landscape.jpg) center 70% / cover no-repeat; box-shadow: none; }
.map-trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-trail path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.map-trail .trail-road { stroke: #1d0a2bb0; stroke-width: 26px; }
.map-trail .trail-dash { stroke: #f7c9e5; stroke-width: 5px; stroke-dasharray: 2 14; opacity: .7; }
.map-trail .trail-lit { stroke: #ffc43d; stroke-width: 6px; stroke-dasharray: 2 14; filter: drop-shadow(0 0 4px #ff9b2f); }
#map .path { position: absolute; inset: 0; margin: 0; padding: 0; width: auto; display: block; }
#map .path li { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 0; z-index: 1; }
#map .node { --size: 66px; width: var(--size); height: var(--size); min-width: 0; padding: 0; margin: 0; border: 0; border-radius: 50%;
  background: var(--art) center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 6px 4px #0b0416aa); transition: transform .12s; }
#map .node:hover { filter: drop-shadow(0 6px 4px #0b0416aa) brightness(1.08); }
#map .node:active { transform: scale(.9); }
#map .node.boss { --size: 92px; }
#map .node::after { content: none; }
.node-lock { position: absolute; right: -2px; bottom: 0; width: 24px; height: 24px; fill: none; stroke: #f1e6ff; stroke-width: 2.4; }
.node-lock rect { fill: #4b3a5e; stroke: #f1e6ff; stroke-width: 2; }
#map .node.current { animation: node-glow 1.6s ease-in-out infinite; }
@keyframes node-glow { 50% { filter: drop-shadow(0 0 14px #ffd36b) drop-shadow(0 6px 4px #0b0416aa); transform: scale(1.06); } }
#map .node:focus-visible { outline: 4px solid var(--cheese); outline-offset: 4px; }
#map .node-stars { margin-top: -6px; height: 20px; }
#map .node-stars i { width: 19px; height: 19px; }
.map-ghost { position: absolute; z-index: 3; width: 64px; height: auto; transform: translate(-50%, -128%); pointer-events: none; filter: drop-shadow(0 8px 8px #0b0416aa); animation: ghost-bob 2.2s ease-in-out infinite; }
@keyframes ghost-bob { 50% { transform: translate(-50%, -140%) rotate(-3deg); } }
#map[data-mode="landscape"] .node { --size: clamp(48px, 14vh, 66px); }
#map[data-mode="landscape"] .node.boss { --size: clamp(64px, 19vh, 92px); }
#map[data-mode="landscape"] .map-ghost { width: clamp(46px, 13vh, 64px); }
@media (prefers-reduced-motion: reduce) { #map .node.current, .map-ghost { animation: none; } }

/* Title: the launcher art as the logo on the kitchen backdrop; the 3D board stays hidden behind it. */
#title { background: radial-gradient(ellipse 70% 55% at 50% 45%, #2a0f4599, #0d0619e6 75%), url(ui/bg-play-portrait.jpg) center / cover, var(--night); }
@media (min-aspect-ratio: 1/1) { #title { background: radial-gradient(ellipse 55% 70% at 50% 50%, #2a0f4599, #0d0619e6 75%), url(ui/bg-play-landscape.jpg) center / cover, var(--night); } }
.title-card { gap: 14px; }
.title-logo { width: min(220px, 52vw); height: auto; border-radius: 26%; box-shadow: 0 10px 0 #10061f, 0 0 0 3px #ffcf6b55, 0 20px 60px #c73cff55; animation: logo-float 3.2s ease-in-out infinite; }
@keyframes logo-float { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
.game-name { font-size: clamp(46px, 11vw, 84px); line-height: 1; white-space: nowrap; -webkit-text-stroke: 3px #3b0d4f; paint-order: stroke fill; text-shadow: 0 6px 0 #1c0828, 0 14px 34px #000c; }
.game-name em { color: #ffb321; }
.title-card .tagline { font-size: 18px; max-width: 26ch; color: #ead9f7; text-shadow: 0 2px 6px #0b0416; }
.title-card .btn.big { min-width: 200px; margin-top: 4px; }
@media (max-height: 500px) {
  .title-card { display: grid; grid-template-columns: auto auto; column-gap: 32px; row-gap: 10px; align-items: center; justify-items: start; text-align: left; }
  .title-logo { grid-row: 1 / span 3; width: min(190px, 44vh); }
  .game-name { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) { .title-logo { animation: none; } }

/* 3D model icons (rendered from the game models). */
.model-icon { display: block; object-fit: contain; filter: drop-shadow(0 3px 2px #14081f99); }
.quick-tip .model-icon, .goal-chip .dot .model-icon { width: 30px; height: 30px; }
.goal-chip .dot { display: grid; place-items: center; width: 34px; height: 34px; }
.pause-guide { gap: 2px; }
.pause-guide .model-icon { width: 40px; height: 40px; }
.pause-guide .model-icon + .model-icon { margin-left: -8px; }
.pause-guide .guide-star { display: block; width: 40px; height: 40px; }
.pause-guide .guide-star .reward-star { width: 40px; height: 40px; }
.pause-guide .guide-avoid { position: relative; margin-left: 10px; padding-left: 12px; border-left: 2px solid #ffffff22; }
img.lantern-icon { width: 38px; height: 38px; stroke: none; object-fit: contain; filter: drop-shadow(0 0 3px #ffb34259) drop-shadow(0 2px 2px #14081f99); transition: filter .2s; }
.lantern-hud.burning img.lantern-icon { filter: saturate(1.15) brightness(1.1) drop-shadow(0 0 8px #ff9b2fcc); }
.hazard-status .hazard-icon { width: 26px; height: 26px; }

/* Title wordmark (user's text logo). */
.game-name { -webkit-text-stroke: 0; text-shadow: none; line-height: 0; }
.text-logo { display: block; width: min(340px, 82vw); height: auto; filter: drop-shadow(0 8px 14px #0b0416cc); animation: logo-in .5s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes logo-in { from { transform: scale(.7); opacity: 0; } }
.title-card .title-logo { width: min(150px, 36vw); margin-bottom: -18px; }
@media (max-height: 500px) { .text-logo { width: min(320px, 40vw); } .title-card .title-logo { width: min(170px, 40vh); margin: 0; } }
@media (prefers-reduced-motion: reduce) { .text-logo { animation: none; } }

/* Round buttons: a soft dome highlight instead of a flat top line, so circles do not look sliced. */
.btn.round, .card .pause-actions .btn, .card .result-actions .btn, .card .audio-controls .btn {
  border: 2px solid #ffffff2b;
  background: radial-gradient(circle at 50% 28%, #ffffff3d, #ffffff00 58%), var(--face);
  box-shadow: 0 var(--depth) 0 var(--edge), 0 calc(var(--depth) + 6px) 14px #0007;
}
.btn.round:active, .card .pause-actions .btn:active, .card .result-actions .btn:active, .card .audio-controls .btn:active { box-shadow: 0 0 0 var(--edge), 0 4px 8px #0006; }
.card .pause-actions .btn.ghost, .card .result-actions .btn.ghost { --face: #3c2153; --edge: #1f0f2e; color: var(--ink); }
.card .audio-controls .btn { --face: #7d3bbd; --edge: #3f1660; }
/* Muted: same colourful button, a darker face and a clear coral slash instead of a grey filter. */
.muted { filter: none; }
.card .audio-controls .btn.muted { --face: #5e3480; --edge: #2e1546; color: #f0e4fa; }
.mute-slash { stroke: #ff7a8a; stroke-width: 3.2; }

/* No double-tap zoom anywhere; fast taps go to the game. */
html, body, .btn, .screen, .hud { touch-action: manipulation; }

/* Safari ignores paint-order on HTML text, so a thick -webkit-text-stroke eats the digits.
   Outline with stacked shadows instead: identical in every browser. */
.outcome-banner { -webkit-text-stroke: 0; --o: #8a1650;
  text-shadow: 3px 0 0 var(--o), -3px 0 0 var(--o), 0 3px 0 var(--o), 0 -3px 0 var(--o), 2px 2px 0 var(--o), -2px 2px 0 var(--o), 2px -2px 0 var(--o), -2px -2px 0 var(--o), 0 6px 0 #3d0a2a, 0 10px 24px #0b0416cc; }

/* Map header star: the same illustrated star as the level stars. */
.map-head h2::before { content: none; }
.map-head h2 { gap: 8px; }
.map-head .head-star { display: block; width: 32px; height: 32px; flex: none; }
.map-head .head-star .reward-star { width: 32px; height: 32px; }

/* Map scroll: hard stop at the top and bottom of the art (no rubber band revealing the page), no scrollbar. */
.map-scroll { overscroll-behavior: none; scrollbar-width: none; touch-action: pan-y; }
.map-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
#map { background: #1a0b28; }

/* Phones: the title is just Play over the live board; the logo screen stays for larger screens. */
@media (orientation: portrait) and (max-width: 640px), (orientation: landscape) and (max-height: 500px) {
  #title { background: radial-gradient(ellipse at 50% 50%, #0d061933, #0d061999); }
  #title .title-logo, #title .game-name, #title .tagline { display: none; }
  #title .title-card { display: flex; }
  #title .btn.big { height: 72px; min-width: 220px; font-size: 28px; border-radius: 26px; box-shadow: inset 0 2px 0 #ffffff55, 0 7px 0 var(--edge), 0 16px 36px #000a; }
}

/* Clock and power tokens share one bottom column, so the clock can never slide under the tokens. */
.hud-dock { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.hud-dock .time-dock { position: relative; left: auto; bottom: auto; transform: none; }
.hud-dock .hud-bottom { position: relative; left: auto; right: auto; bottom: auto; align-self: stretch; }
@media (orientation: landscape) and (max-height: 500px) {
  .hud-dock { display: contents; }
  .hud-dock .time-dock { position: absolute; }
  .hud-dock .hud-bottom { position: absolute; left: max(10px, env(safe-area-inset-left)); top: 50%; bottom: auto; align-self: auto; }
}
/* Static light veil behind the result card: no live blur over the board. */
#result.dim { backdrop-filter: none; -webkit-backdrop-filter: none; background: #0d062080; }

/* Map stones: the art sits on ::before so only the art dims when locked; the number keeps full contrast.
   Number colour follows the stone (dark on the pale candy, light on pumpkin and cauldron), so it never
   depends on an outline (Safari drew text outlines inconsistently). */
#map .node { position: relative; isolation: isolate; background: none; }
#map .node::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--art) center / contain no-repeat; }
#map .node.locked { filter: drop-shadow(0 6px 4px #0b0416aa); }
#map .node.locked::before { filter: grayscale(.9) brightness(.55); }
.node-num { position: relative; font-size: 26px; font-weight: 950; line-height: 1; -webkit-text-stroke: 0; color: #8e1b5e; text-shadow: 0 1px 0 #ffffffcc; }
.node.hard .node-num, .node.boss .node-num { color: #fff7e8; text-shadow: 0 2px 0 #3a1200, 0 0 6px #3a1200; }
.node.boss .node-num { font-size: 30px; margin-top: 18px; text-shadow: 0 2px 0 #1c0a2b, 0 0 6px #1c0a2b; }
.node.locked .node-num { color: #f3ecfa; text-shadow: 0 2px 0 #1d1626, 0 0 6px #1d1626; }
#map[data-mode="landscape"] .node-num { font-size: clamp(20px, 6vh, 26px); }

/* First-time tips: a glowing spotlight on one thing and a short card next to it. */
.coach { position: fixed; inset: 0; z-index: 20; cursor: pointer; touch-action: none; }
.coach-hole { position: absolute; border-radius: 24px; pointer-events: none;
  box-shadow: 0 0 0 200vmax #0b0416b8, 0 0 0 3px #ffd36b, 0 0 26px 4px #ffb321aa;
  transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; }
.coach-card { position: absolute; left: 50%; transform: translateX(-50%); width: min(340px, calc(100% - 32px)); padding: 16px 18px 12px;
  background: radial-gradient(ellipse at 50% 0, #6a2588, #2a1240 80%); border: 2px solid #c98af07d; border-radius: 22px;
  box-shadow: inset 0 2px 0 #ffffff30, 0 8px 0 #1c0a2e, 0 18px 40px #000a; opacity: 0; }
.coach-card.in { animation: coach-in .28s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes coach-in { from { opacity: 0; transform: translate(-50%, 10px) scale(.94); } to { opacity: 1; transform: translateX(-50%); } }
.coach-text { font-size: 18px; font-weight: 800; line-height: 1.35; color: #fff6ea; }
.coach-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.coach-next { font-size: 13px; font-weight: 800; color: #ffcf6b; animation: coach-blink 1.6s ease-in-out infinite; }
@keyframes coach-blink { 50% { opacity: .45; } }
.coach-dots { display: flex; gap: 6px; }
.coach-dots i { width: 8px; height: 8px; border-radius: 50%; background: #ffffff38; }
.coach-dots i.on { background: #ffcf6b; }
@media (max-height: 500px) { .coach-card { width: min(420px, calc(100% - 140px)); padding: 12px 16px 10px; } .coach-text { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { .coach-hole { transition: none; } .coach-card.in, .coach-next { animation: none; opacity: 1; } }

/* Phones: the launcher art sits above the single Play button. */
@media (orientation: portrait) and (max-width: 640px), (orientation: landscape) and (max-height: 500px) {
  #title .title-logo { display: block; width: min(150px, 38vw); margin: 0 0 6px; grid-row: auto; }
  #title .title-card { display: flex; flex-direction: column; align-items: center; }
}
@media (orientation: landscape) and (max-height: 500px) { #title .title-logo { width: min(130px, 34vh); } }

/* ---- 2026-10-15: teach by showing ---- */
.coach-card { width: auto; max-width: calc(100% - 32px); padding: 12px 18px; }
.coach-text { display: flex; align-items: center; justify-content: center; gap: 4px; white-space: nowrap; }
.coach-text .model-icon { width: 40px; height: 40px; }
.coach-text .model-icon + .model-icon { margin-left: -10px; }
.coach-text b { font-size: 24px; font-weight: 950; color: #ffd36b; text-shadow: 0 2px 0 #4a1a12; margin: 0 2px; }
.coach-text svg { width: 34px; height: 34px; flex: none; }
.tip-arrow { stroke: #fff6ea; stroke-width: 3; margin: 0 4px; }
.tip-clock { stroke: #ffd36b; stroke-width: 2.4; margin-right: 6px; }
.tip-slot { width: 40px !important; height: 40px !important; fill: #3b1030; stroke: #ff4d6d; stroke-width: 4; }
.coach-hole.round { border-radius: 50%; }

/* Pointing hand: fingertip sits on the point, taps (or double-taps) in place. */
.hand { position: fixed; z-index: 21; width: 0; height: 0; pointer-events: none; }
.hand svg { position: absolute; left: -22px; top: -2px; width: 58px; height: 58px; fill: #fff; stroke: #3a1450; stroke-width: 3; stroke-linejoin: round;
  filter: drop-shadow(0 6px 6px #0b0416aa); transform-origin: 40% 10%; animation: hand-tap 1.1s ease-in-out infinite; }
.hand-ring { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 4px solid #ffd36b; opacity: 0; animation: hand-ring 1.1s ease-out infinite; }
.hand[data-motion="double"] svg { animation-name: hand-double; }
.hand[data-motion="double"] .hand-ring { animation-name: hand-ring-double; }
@keyframes hand-tap { 0%, 100% { transform: translate(10px, 18px); } 40% { transform: translate(0, 4px) scale(.92); } 55% { transform: translate(0, 6px) scale(.92); } }
@keyframes hand-ring { 0%, 38% { opacity: 0; transform: scale(.4); } 45% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes hand-double { 0%, 100% { transform: translate(10px, 18px); } 25%, 55% { transform: translate(0, 4px) scale(.92); } 40% { transform: translate(2px, 12px); } }
@keyframes hand-ring-double { 0%, 20% { opacity: 0; transform: scale(.4); } 28%, 58% { opacity: 1; } 45% { opacity: .3; transform: scale(1); } 100% { opacity: 0; transform: scale(1.4); } }
@media (prefers-reduced-motion: reduce) { .hand svg, .hand-ring { animation: none; } .hand svg { transform: translate(4px, 8px); } }

/* Tutorial boards: no clock, no helpers, nothing to read. */
.hud.tutorial .hud-dock, .hud.tutorial .lantern-hud, .hud.tutorial .level-chip, .hud.tutorial .goal-chip, .hud.tutorial .streak { visibility: hidden; }

/* A new helper arrives: it pops and shows +2. */
.booster.gift { animation: gift-pop .9s cubic-bezier(.2, 1.6, .4, 1) 2; }
@keyframes gift-pop { 30% { transform: scale(1.25) rotate(-6deg); } 60% { transform: scale(.95); } }

/* Screens respect the notch / Dynamic Island as well as the home bar. */
.screen { padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); }
#map.screen { padding: 0; }
.card { max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom))); }

/* Result card: the ghost has its own space above the stars, with room above it. */
#result .card { padding-top: 26px; gap: 8px; }
#result:not(.lost) .result-art { width: min(150px, 38vw); margin: 0 0 6px; }
#result .stars { margin: 0 0 4px; }
#result .stars i:nth-child(2) { transform: translateY(-8px) scale(1.12); }
@keyframes star2 { from { transform: translateY(-8px) scale(0) rotate(-40deg); } to { transform: translateY(-8px) scale(1.12); } }

/* 20 stones: slightly smaller so the zigzag breathes. */
#map .node { --size: 58px; }
#map .node.boss { --size: 80px; }
.node-num { font-size: 23px; }
#map[data-mode="landscape"] .node { --size: clamp(40px, 12vh, 52px); }
#map[data-mode="landscape"] .node.boss { --size: clamp(54px, 16vh, 72px); }
#map[data-mode="landscape"] .node-num { font-size: clamp(17px, 5vh, 22px); }
#map[data-mode="landscape"] .node-stars i { width: 14px; height: 14px; }
.gift-bubble { position: absolute; z-index: 1; transform: translate(-50%, 0); font-size: 22px; font-weight: 950; color: #ffe27a; text-shadow: 0 2px 0 #6a2b08, 0 0 10px #ffb321; pointer-events: none; animation: gift-float 1.6s ease-out .2s both; }
@keyframes gift-float { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.5); } 25% { opacity: 1; transform: translate(-50%, -18px) scale(1.2); } 70% { opacity: 1; transform: translate(-50%, -30px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -44px); } }
@media (prefers-reduced-motion: reduce) { .gift-bubble { animation: none; top: -30px; } }

/* Passing hints (2026-10-15): no dim, no blocking. Taps go straight through to the game. */
.coach { pointer-events: none; cursor: default; touch-action: auto; transition: opacity .4s ease; }
.coach.fade { opacity: 0; }
.coach-hole { box-shadow: 0 0 0 3px #ffd36b, 0 0 22px 6px #ffb321aa; animation: hint-glow 1.1s ease-in-out infinite; }
@keyframes hint-glow { 50% { box-shadow: 0 0 0 4px #ffe9a8, 0 0 30px 10px #ffb321cc; } }
.hand { opacity: .95; }
@media (prefers-reduced-motion: reduce) { .coach-hole { animation: none; } }

/* Result buttons in reading order: retry on the left, the big "next" in the middle, map on the right.
   When there is no next level (a loss or the last level), retry becomes the big centre button. */
.result-actions #retryBtn { order: 1; }
.result-actions #nextBtn { order: 2; }
.result-actions #resultMap { order: 3; }

/* Combo multiplier: big candy lettering in the middle of the screen, colour rising with the streak.
   Gradient text + drop-shadow outline (text-shadow would bleed through the transparent fill in Safari). */
.streak { left: 0; right: 0; width: auto; top: max(17%, calc(env(safe-area-inset-top) + 92px)); text-align: center; transform-origin: 50% 50%; }
.streak strong { display: inline-block; font-size: clamp(60px, 17vw, 96px); line-height: 1; font-weight: 950; letter-spacing: -.03em;
  text-shadow: none; color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, #fffbe0 0%, #ffe05c 38%, #ffad1f 70%, #ff7a12 100%); -webkit-background-clip: text; background-clip: text;
  --o: #7a2410; filter: drop-shadow(0 3px 0 var(--o)) drop-shadow(0 -2px 0 var(--o)) drop-shadow(2px 0 0 var(--o)) drop-shadow(-2px 0 0 var(--o)) drop-shadow(0 10px 16px #14082199); }
.streak strong:empty { display: none; }
.streak[data-tier="4"] strong { background-image: linear-gradient(180deg, #fff0fa 0%, #ff9bd6 40%, #f2399f 75%, #c0157a 100%); --o: #5e0b3c; }
.streak[data-tier="3"] strong { background-image: linear-gradient(180deg, #fff7c4 0%, #ffcf2e 30%, #ff7b00 65%, #e3260a 100%); --o: #5a1004;
  filter: drop-shadow(0 3px 0 var(--o)) drop-shadow(0 -2px 0 var(--o)) drop-shadow(2px 0 0 var(--o)) drop-shadow(-2px 0 0 var(--o)) drop-shadow(0 0 18px #ff8a1fcc); }
.streak > span { font-size: 22px; font-weight: 950; margin-top: 2px; color: #fff3c4; text-shadow: 0 2px 0 #6a2b08, 0 0 10px #ffb32188; }
.streak.hit { animation: combo-pop 1.25s cubic-bezier(.2, 1.2, .3, 1) both; }
@keyframes combo-pop {
  0% { transform: scale(.3) rotate(-10deg); opacity: 0; }
  14% { transform: scale(1.25) rotate(4deg); opacity: 1; }
  26% { transform: scale(.95) rotate(-2deg); }
  36% { transform: scale(1.03) rotate(0); }
  75% { transform: translateY(-6px) scale(1); opacity: 1; }
  100% { transform: translateY(-26px) scale(.9); opacity: 0; }
}
@media (orientation: landscape) and (max-height: 500px) { .streak { top: 22%; } .streak strong { font-size: 64px; } }
@media (prefers-reduced-motion: reduce) { .streak.hit { animation: none; } }

/* Level badge: the number sits on the pale centre of the candy (the art's circle is above its box centre). */
.level-badge span { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); line-height: 1; }
.level-badge span.two-digit { font-size: 16px; letter-spacing: -.04em; }

/* Music volume: quiet speaker, ten growing candy bars, loud speaker. No thumb: bars light up to the finger. */
.music-volume { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 270px; padding: 10px 14px; border-radius: 22px;
  background: #1c0b2bcc; box-shadow: inset 0 2px 6px #0008, 0 1px 0 #ffffff1a; }
.music-volume .mv-icon { width: 26px; height: 26px; flex: none; stroke: #ffd36b; stroke-width: 2.2; }
.music-volume .mv-icon .mv-speaker { fill: #ffd36b; }
.mv-bars { flex: 1; height: 38px; display: flex; align-items: flex-end; justify-content: space-between; gap: 4px; cursor: pointer; touch-action: none; outline: none; padding: 2px 0; }
.mv-bars i { flex: 1; height: var(--h); border-radius: 4px; background: #4a2c66; box-shadow: inset 0 1px 2px #0008; transition: background .12s, transform .12s, box-shadow .12s; }
.mv-bars i.on { background: linear-gradient(180deg, #ffb8e0, #ff5fb0 60%, #d8318a); box-shadow: inset 0 2px 0 #ffffff70, 0 0 8px #ff5fb070; }
.mv-bars[data-drag] i.on:last-of-type, .mv-bars i.on:has(+ i:not(.on)) { transform: scaleY(1.08); transform-origin: bottom; }
.mv-bars:focus-visible { outline: 3px solid var(--cheese); outline-offset: 4px; border-radius: 6px; }
#pause .music-volume { align-self: center; }

/* Level badge on the right of the top row. */
.hud-top .level-chip { margin-left: auto; }
/* Speaker buttons around the volume bars; muted shows a clear slash across the quiet speaker. */
.mv-speaker-btn { appearance: none; border: 0; background: none; padding: 4px; margin: -4px; cursor: pointer; flex: none; display: grid; place-items: center; }
.mv-speaker-btn:active { transform: scale(.88); }
.mv-slash { display: none; stroke: #ff6b7d !important; stroke-width: 3 !important; }
.music-volume.muted .mv-slash { display: block; }
.music-volume.muted .mv-speaker-btn:first-child .mv-icon { stroke: #ffd36b; }
.music-volume.muted .mv-speaker-btn:first-child .mv-speaker { fill: #9b86b4; }

/* Map trail: the travelled part is candy pink, so it never merges with the gold stars under the stones. */
.map-trail .trail-dash { stroke: #e9d6ff; opacity: .45; }
.map-trail .trail-lit { stroke: #ff6fc2; stroke-width: 7px; filter: drop-shadow(0 0 3px #ffffffaa) drop-shadow(0 0 6px #ff3ea5); }

/* Star total: a readable pill on the right of the header. */
#map .map-head { justify-content: space-between; }
#map .map-head h2 { pointer-events: none; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px 0 10px; border-radius: 23px;
  font-size: 22px; font-weight: 950; color: #fff6e6; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #4a1f6ee8, #2a1042e8); border: 2px solid #c98af066; box-shadow: inset 0 2px 0 #ffffff26, 0 4px 0 #1a0829, 0 8px 18px #0008;
  text-shadow: 0 2px 0 #2a0b3d; }
#map .map-head .head-star, #map .map-head .head-star .reward-star { width: 30px; height: 30px; }
/* Star total: tight digits, the total in a smaller, softer size. */
#map .map-head h2 { gap: 6px; letter-spacing: -.02em; padding: 0 14px 0 9px; }
#map .map-head h2 b { font-size: 23px; font-weight: 950; }
#map .map-head h2 small { font-size: 16px; font-weight: 850; color: #d9c2ef; margin-left: -3px; align-self: center; padding-top: 3px; }

/* Quiet speaker: slash crosses the speaker itself; muted turns it red. */
.mv-icon.mv-quiet { width: 16px; height: 26px; }
.music-volume.muted .mv-speaker-btn:first-child .mv-speaker { fill: #ff5f73; }
.music-volume.muted .mv-speaker-btn:first-child .mv-icon { stroke: #ff5f73; }
.mv-slash { stroke: #fff2f4 !important; stroke-width: 2.6 !important; stroke-linecap: round; filter: drop-shadow(0 0 1.5px #8a0f22); }

/* Tap-sounds button: a candy that pops. */
.sfx-icon { stroke-width: 1.6; }
.sfx-candy { fill: #ff7ac4; stroke: #fff0f8; }
.sfx-wrap { fill: #ffb8e0; stroke: #fff0f8; stroke-linejoin: round; }
.sfx-stripe { stroke: #fff0f8; stroke-width: 1.4; fill: none; }
.sfx-pop { stroke: #ffd36b; stroke-width: 2; }
.card .audio-controls #effectsBtn svg { width: 30px; height: 30px; }

/* Pause card mascot. */
.menu-mark.mascot { width: 96px; height: auto; border-radius: 0; box-shadow: none; filter: drop-shadow(0 8px 10px #0b0416aa); animation: ghost-bob 2.4s ease-in-out infinite; }
@keyframes ghost-bob-pause { 50% { transform: translateY(-6px) rotate(-3deg); } }
.menu-mark.mascot { animation-name: ghost-bob-pause; }
@media (prefers-reduced-motion: reduce) { .menu-mark.mascot { animation: none; } }
/* Empty volume bars are flat (no inset shade), and bars switch instantly so no glow lingers behind. */
.mv-bars i { box-shadow: none; transition: none; }
.mv-bars i.on { box-shadow: inset 0 2px 0 #ffffff70; }

/* Tablets (iPad, both orientations): larger thumb-friendly HUD, same layout as phones, no text hints. */
.quick-tip { display: none !important; }
@media (min-width: 700px) and (min-height: 700px) {
  .hud-top { padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); }
  .hud-top .btn.round { width: 64px; min-width: 64px; height: 64px; }
  .hud-top .btn.round svg { width: 30px; height: 30px; }
  .level-badge { width: 72px; height: 68px; }
  .level-badge span { font-size: 26px; } .level-badge span.two-digit { font-size: 22px; }
  .lantern-hud { top: max(18px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: 130px; height: 64px; gap: 8px; }
  img.lantern-icon { width: 54px; height: 54px; }
  .lantern-hud span { font-size: 18px; }
  .lantern-track { width: 60px; height: 5px; }
  .hud-dock { gap: 14px; }
  .time-dock { width: min(760px, calc(100% - 64px)); height: 34px; }
  .time-dock .time-track { height: 18px; }
  .time-dock .timer { font-size: 22px; min-width: 80px; }
  .hud-bottom { gap: 28px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .booster { width: 92px; min-width: 92px; height: 92px; border-radius: 30px; }
  .booster .power-icon { width: 56px; height: 56px; }
  .booster .count { min-width: 30px; height: 30px; font-size: 17px; top: -8px; right: -8px; }
  .streak strong { font-size: 120px; }
  .card { width: min(440px, 100%); }
  #map .map-world { width: min(100%, 760px); }
  #map .node { --size: 76px; } #map .node.boss { --size: 104px; }
  .node-num { font-size: 30px; }
  #map .node-stars i { width: 24px; height: 24px; }
  .map-ghost { width: 84px; }
  #map .map-head h2 { height: 56px; font-size: 26px; } #map .map-head h2 b { font-size: 28px; }
  #map .map-head .btn.round { width: 60px; height: 60px; }
}
/* Landscape phones: the level badge now sits top right, so the clock stops before it. */
@media (orientation: landscape) and (max-height: 500px) { .time-dock { right: calc(max(16px, env(safe-area-inset-right)) + 62px) !important; width: min(40vw, 380px); } }
@media (min-width: 700px) and (min-height: 700px) and (orientation: portrait) { #map .map-world { width: 100%; } }