:root { color-scheme: dark; --ink: #27342e; --cream: #fff5d5; --gold: #ffd568; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #111b24; color: var(--cream); font: 15px/1.5 'Trebuchet MS', Arial, sans-serif; }
#app { position: fixed; inset: 0; }
canvas { display: block; }
#app canvas:focus { outline: none; }
[hidden] { display: none !important; }
button, a, summary, input { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid #fff0a3; outline-offset: 5px; }
#game-hud { position: fixed; inset: 0; z-index: 2; pointer-events: none; user-select: none; padding: max(22px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left)); }
.hud-top, .hud-left, .hud-right, .hud-counter { display: flex; align-items: center; }
.hud-top { justify-content: space-between; gap: 18px; }
.hud-left { gap: 22px; }.hud-right { gap: 30px; }
.hud-art { overflow: visible; filter: drop-shadow(0 4px 0 #19251b80) drop-shadow(0 2px 5px #16262340); }
.hero-badge { width: 70px; height: 70px; transform: rotate(-6deg); }
.hud-counter { gap: 9px; height: 64px; }
.coin-icon { width: 39px; height: 48px; transform: rotate(-12deg); }
.gem-icon { width: 47px; height: 55px; transform: rotate(8deg); }
.counter-number, .counter-cross { font-family: 'Arial Black', 'Trebuchet MS', sans-serif; font-weight: 1000; line-height: 1; color: var(--cream); -webkit-text-stroke: 1.5px #263228; paint-order: stroke fill; text-shadow: 2px 4px 0 #29392c, 0 5px 8px #1b281b50; }
.counter-number { font-size: 43px; letter-spacing: -2px; min-width: 28px; font-variant-numeric: tabular-nums; }
.counter-cross { font-size: 27px; margin-top: 5px; }
.hud-button { pointer-events: auto; display: grid; place-items: center; padding: 0; border: none; color: #fff4da; background: transparent; transition: transform .15s; }
.hud-button:hover { transform: translateY(-2px) scale(1.05); }.hud-button:active { transform: translateY(2px); }
.menu-toggle { width: 42px; height: 42px; border-radius: 50%; background: #27372b9c; border: 2px solid #fff2cb80; box-shadow: 0 3px 0 #1e2c2d80; }
.menu-toggle svg { width: 23px; height: 23px; }
.hud-corner { position: absolute; right: max(30px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 22px; }
.camera-toggle { position: relative; width: 68px; height: 57px; border-radius: 12px; }
.camera-toggle svg { width: 52px; height: 44px; filter: drop-shadow(1px 3px 0 #22322680); }
kbd { font: 800 10px/1.3 'Trebuchet MS', sans-serif; display: inline-block; padding: 2px 5px; border-radius: 4px; background: #283d30b3; color: #fff6de; border: 1px solid #fff6de55; }
.hud-corner kbd { position: absolute; bottom: -8px; right: -2px; }
.camera-mode-dot { position: absolute; right: 7px; top: 3px; height: 9px; width: 9px; border-radius: 50%; background: #c3c8a9; border: 2px solid #30453b; }
.camera-toggle[aria-pressed=true] .camera-mode-dot { background: #6effb2; box-shadow: 0 0 8px #87ffd978; }
.target-indicator { position: relative; width: 32px; height: 32px; color: #fff9d2; opacity: .5; filter: drop-shadow(1px 2px 0 #213e31); transition: opacity .15s, transform .15s; }
.target-indicator svg { width: 32px; height: 32px; }.target-indicator.is-active { opacity: 1; color: #91ffd7; transform: scale(1.12); }
.charge-meter { position: absolute; left: 50%; top: 22px; width: 100px; transform: translateX(-50%) rotate(-5deg); text-align: center; filter: drop-shadow(0 4px 0 #152a2666); }
.charge-meter svg { width: 88px; height: 88px; overflow: visible; }
.charge-caption { display: block; margin-bottom: -5px; font: 1000 17px/1 'Arial Black', sans-serif; color: #ffe295; -webkit-text-stroke: 1.4px #253a2f; paint-order: stroke fill; text-shadow: 1px 3px #263c32; letter-spacing: -.5px; position: relative; z-index: 1; }
.charge-segment { fill: none; stroke: #53665a; stroke-width: 10; }.charge-segment.is-filled { stroke: #7aefd4; }.charge-meter.is-ready .charge-segment { stroke: #ffdb66; }
.charge-meter.is-ready { animation: ready-beat .65s ease-in-out infinite alternate; }
.counter-pop { animation: pickup-pop .32s ease-out; }
@keyframes pickup-pop { 45% { transform: translateY(-6px) scale(1.14); } }
@keyframes ready-beat { to { filter: drop-shadow(0 0 9px #ffe38c90); transform: translateX(-50%) rotate(3deg) scale(1.04); } }
#pause-menu { width: min(410px, calc(100vw - 36px)); max-height: calc(100dvh - 48px); border: 2px solid #b2c1a585; border-radius: 24px; background: #23382ff5; color: var(--cream); padding: 30px; box-shadow: 0 8px 0 #11282080, 0 24px 80px #0005; overflow: auto; scrollbar-width: thin; }
#pause-menu::backdrop { background: #10262561; backdrop-filter: blur(5px); }
.pause-heading { text-align: center; margin: 0 0 24px; }
.menu-eyebrow { font-size: 10px; letter-spacing: 2.4px; font-weight: 800; color: #aec6af; }
.pause-heading h1 { font: 1000 44px/1.2 'Arial Black', sans-serif; letter-spacing: -2px; margin: 4px 0 0; transform: rotate(-3deg); color: #ffe08b; text-shadow: 3px 4px #102b23; }
.menu-primary, .menu-secondary { display: flex; align-items: center; justify-content: space-between; width: 100%; border-radius: 12px; font-weight: 800; text-align: left; padding: 13px 16px; }
.menu-primary { color: #34432b; background: #ffda78; border: 2px solid #ffe4a1; box-shadow: 0 4px 0 #9f7537; margin-bottom: 14px; }
.menu-primary:hover { background: #ffebae; }.menu-primary:active { transform: translateY(2px); box-shadow: 0 2px 0 #9f7537; }
.menu-secondary { border: 1px solid #b1c39b38; background: #49604b4d; color: #e5efd7; margin-bottom: 19px; }
.menu-secondary:hover { background: #58775966; }
.menu-section { border-top: 1px solid #a6c59b33; padding: 12px 0; }
.movement-option { display: flex; align-items: center; gap: 10px; padding: 16px 0 4px; font-weight: 700; cursor: pointer; }
.movement-option input { width: 20px; height: 20px; accent-color: #e2c393; }
.movement-help { font-size: 12px; line-height: 1.6; color: #c8c3bd; margin: 10px 0 4px; }
.candy-land .movement-help { color: #75445f; }
.menu-section summary { cursor: pointer; font-weight: 800; font-size: 14px; list-style: none; }
.menu-section summary::after { content: '+'; float: right; color: #ffd578; font-size: 18px; line-height: 20px; }.menu-section[open] summary::after { content: '−'; }
.control-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; font-size: 12px; margin: 20px 0 8px; }.control-grid dt { color: #adc5b5; }.control-grid dd { margin: 0; color: #fff2d0; }
.world-links { display: grid; gap: 4px; margin-top: 12px; }.world-links a { display: block; color: #d8ecd5; padding: 7px 10px; text-decoration: none; border-radius: 7px; }.world-links a:hover { color: #ffe29b; background: #91ad8830; }
.menu-foot { color: #a8bea8; text-align: center; margin: 18px 0 0; font-size: 11px; }.menu-credit { font-size: 10px; color: #b2c1b0; overflow-wrap: anywhere; border-top: 1px solid #a6c59b33; padding-top: 14px; margin-top: 8px; }
#swim-help { font-size: 12px; color: #a9daca; }
/* World setup remains available inside the pause menu. */
.expedition { font-size: 12px; }.eyebrow { font-size: 9px; letter-spacing: 1px; color: #aacda9; margin-top: 14px; }.expedition h1 { font-size: 20px; margin: 6px 0; }.exp-status, .exp-hint { color: #b9ccba; font-size: 11px; }.exp-map { width: 120px; height: 120px; margin: 16px auto; border-radius: 8px; }.expedition button, .expedition input { font: inherit; border: 1px solid #87a07b; color: #f4f0da; background: #2a4637; border-radius: 5px; padding: 7px; }.expedition input:not([type=file]) { width: 100%; margin: 6px 0 10px; }.expedition a { color: #9fe7c8; }.exp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }.exp-plan { display: block; margin-top: 16px; }.exp-plan input { width: 100%; margin-top: 6px; font-size: 10px; }.exp-message { color: #ffce86; margin-top: 10px; font-size: 11px; }
@media (max-width: 600px) { #game-hud { padding: max(14px, env(safe-area-inset-top)) 16px; }.hero-badge { width: 50px; height: 56px; }.hud-left { gap: 10px; }.hud-right { gap: 16px; }.hud-counter { gap: 5px; }.coin-icon { width: 29px; height: 38px; }.gem-icon { width: 35px; height: 43px; }.counter-number { font-size: 32px; letter-spacing: -1px; min-width: 20px; }.counter-cross { font-size: 21px; }.menu-toggle { width: 35px; height: 35px; }.charge-meter { top: 82px; width: 88px; }.charge-meter svg { width: 74px; height: 74px; }.charge-caption { font-size: 15px; }.hud-corner { right: 21px; bottom: max(24px, env(safe-area-inset-bottom)); gap: 18px; }.camera-toggle svg { width: 46px; }.camera-toggle { width: 58px; } }
@media (max-width: 370px) { .hero-badge { display: none; }.hud-right { gap: 10px; }.hud-counter { gap: 3px; }.counter-number { font-size: 26px; }.counter-cross { font-size: 18px; }.coin-icon { width: 24px; }.gem-icon { width: 28px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Sugarplum's quiet location card leaves the centre clear for play. */
.candy-location, .candy-help { display: none; }
.candy-land { --cream: #fff4e5; background: #f4d6e0; }
.candy-land .candy-location { display: flex; position: absolute; left: 30px; bottom: 32px; gap: 13px; align-items: center; color: #75455f; background: #fff4e8df; padding: 10px 17px 10px 10px; border-radius: 32px; border: 1px solid #fff9f0; }
.candy-location-star { display: grid; place-items: center; width: 42px; height: 42px; color: #a65d7d; font-size: 29px; background: #fff5e8cf; border: 1px solid #fff9ee; border-radius: 50%; box-shadow: 0 3px 15px #ab6d8b12; }
.candy-eyebrow { display: block; font: 800 9px/1.8 'Trebuchet MS', sans-serif; letter-spacing: 2.5px; }
.candy-location-name { display: block; font: italic 25px/1.25 Georgia, serif; text-shadow: 0 1px #fff4e6; }
.candy-land .candy-help { display: block; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); text-align: center; color: #75445f; font: italic 15px/1.5 Georgia, serif; background: #fff4e8de; padding: 8px 18px 10px; border: 1px solid #fff9f1; border-radius: 14px; box-shadow: 0 3px 18px #9c6d8812; }
.candy-help > span:first-child { margin-right: 6px; }
.candy-help-keys { display: block; font: 10px/1.6 'Trebuchet MS', sans-serif; margin-top: 8px; color: #856576; }
.candy-help-keys > span { margin: 0 5px; }
.candy-land kbd { background: #fff3e7bb; border-color: #be8d9e66; color: #805470; }
.candy-land .hud-art { filter: drop-shadow(0 3px 0 #80506a55) drop-shadow(0 3px 8px #97617e20); }
.candy-land .counter-number, .candy-land .counter-cross { -webkit-text-stroke-color: #80516e; text-shadow: 2px 3px 0 #80516e; }
.candy-land .menu-toggle { color: #996382; filter: drop-shadow(0 2px #fff4e7); }
.candy-land .target-indicator { color: #8a5275; filter: drop-shadow(0 1px #fff4e7); }
.candy-land #pause-menu { background: #fff2e9f5; color: #75445f; border-color: #fffaf2; box-shadow: 0 8px 0 #ad79904d, 0 24px 80px #6e3b6955; }
.candy-land #pause-menu::backdrop { background: #75536c44; }
.candy-land .pause-heading h1 { color: #bd688e; text-shadow: 2px 3px #efd2da; }
.candy-land .menu-eyebrow, .candy-land .menu-foot, .candy-land .menu-credit, .candy-land .control-grid dt { color: #946a80; }
.candy-land .menu-secondary { background: #eed7e8; border-color: #d9b8cd; color: #75445f; }
.candy-land .control-grid dd, .candy-land .world-links a { color: #714763; }
.candy-land .menu-section, .candy-land .menu-credit { border-color: #dcb9cc; }
.candy-land .menu-section summary::after { color: #b46b8b; }
.candy-land:has(.charge-meter:not([hidden])) .candy-help { visibility: hidden; }
@media (max-width: 900px) {
  .candy-land .candy-help { display: none; }
  .candy-land .candy-location { left: 18px; bottom: 24px; gap: 8px; }
  .candy-location-name { font-size: 19px; }
  .candy-eyebrow { font-size: 7px; letter-spacing: 1.5px; }
  .candy-location-star { width: 30px; height: 30px; font-size: 22px; }
}
@media (max-height: 440px) { .candy-land .candy-location { display: none; } }

/* Hollowveil keeps the current HUD and controls; its guide lives in the pause menu. */
.haunted-land { --cream: #efe2d0; --gold: #dbb884; background: #302d42; }
.haunted-location { position: absolute; left: max(30px, env(safe-area-inset-left)); bottom: max(28px, env(safe-area-inset-bottom)); display: grid; gap: 5px; max-width: calc(100% - 190px); padding-left: 16px; border-left: 1px solid #c7a87988; text-shadow: 0 2px 12px #101323; }
.haunted-eyebrow { font-size: .8rem; letter-spacing: .18em; color: #cabac0; }
.haunted-name { font: 2.25rem/1.1 Georgia, serif; letter-spacing: .08em; color: #f2e4d2; }
#haunted-region { font: 1rem/1.5 Georgia, serif; color: #d5c7ca; }
.haunted-hint { font-size: .875rem; color: #bdb2c0; margin-top: 5px; }
.haunted-land kbd { background: #292534b8; border-color: #c3a67a55; color: #e8d4b7; font-size: .8rem; }
.haunted-land .menu-toggle { background: #292533c9; border-color: #ccaf7e99; }
.haunted-land #pause-menu { background: #272434f5; border-color: #b79c7866; box-shadow: 0 8px 0 #13132380, 0 24px 80px #0007; }
.haunted-land #pause-menu::backdrop { background: #18162680; }
.haunted-land .pause-heading h1 { color: #e2c393; text-shadow: 3px 4px #181523; }
.haunted-land .menu-eyebrow, .haunted-land .menu-foot, .haunted-land .control-grid dt { color: #bdb0c1; }
.haunted-land .menu-secondary { background: #47405166; border-color: #c5b39238; color: #e9decf; }
.haunted-land .menu-section { border-color: #c6b09233; }
.haunted-land .world-links a { color: #e0d0bd; }
.haunted-land .world-links a:hover { background: #a898b230; }
.haunted-routes { margin: 18px 0 2px; font-size: 1rem; line-height: 1.55; }
.haunted-routes dt { margin-top: 16px; color: #e3c18d; font-family: Georgia, serif; }
.haunted-routes dd { margin: 5px 0 0; color: #c9bfce; }
@media (max-width: 600px) {
  .haunted-location { left: 18px; bottom: 24px; padding-left: 10px; max-width: calc(100% - 155px); }
  .haunted-name { font-size: 1.5rem; }.haunted-eyebrow { letter-spacing: .08em; }
  .haunted-hint { display: none; }
}
@media (max-height: 440px) { .haunted-eyebrow, .haunted-hint { display: none; } }