:root {
  color-scheme: dark;
  --ink: #eef5ef;
  --muted: #9eafa9;
  --panel: #172226;
  --panel-2: #223136;
  --line: #405258;
  --gold: #f0bd3c;
  --green: #57d39a;
  --blue: #3c8ee6;
  --red: #ef625f;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #0d1518; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100vh; overflow: hidden; }
button { font: inherit; letter-spacing: 0; }

.game-shell { height: 100vh; display: grid; grid-template-rows: 72px minmax(0, 1fr) 86px; background: #101a1d; }
.topbar { position: relative; display: grid; grid-template-columns: minmax(220px, .8fr) minmax(300px, 1.4fr) auto; align-items: center; gap: 24px; padding: 8px 22px 14px; border-bottom: 1px solid #34464b; background: #172226; box-shadow: 0 6px 22px #0007; z-index: 4; }
.title-group h1 { margin: 1px 0 0; font-family: Georgia, serif; font-size: 25px; font-weight: 700; letter-spacing: 0; }
.chapter { display: block; color: var(--gold); font-size: 11px; font-weight: 900; letter-spacing: 0; }
.objective { min-width: 0; padding-left: 18px; border-left: 2px solid var(--gold); }
.objective span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; }
.objective strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.top-actions { display: flex; gap: 8px; }
.quest-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; overflow: visible; background: #0c1417; border-top: 1px solid #2f4146; }
.quest-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #3c8ee6, #57d39a, #f0bd3c); box-shadow: 0 0 10px #57d39a99; transition: width .35s ease; }
.quest-progress span { position: absolute; right: 8px; bottom: 9px; color: #d6e1dd; font-size: 9px; font-weight: 900; text-shadow: 0 1px 3px #000; }
.icon-button { width: 42px; height: 42px; border: 1px solid #61747a; border-radius: 4px; background: #24353a; color: #fff; font-size: 23px; cursor: pointer; }
.icon-button:hover { border-color: var(--gold); background: #30464b; }
.icon-button.dark { background: #111a1d; }

.viewport { position: relative; min-height: 0; overflow: hidden; background: #9bb5c0; }
#gameCanvas { display: block; width: 100%; height: 100%; image-rendering: auto; cursor: crosshair; touch-action: none; }
.compass { position: absolute; right: 22px; top: 20px; width: 54px; height: 54px; border: 1px solid #d8c99b; border-radius: 50%; background: #172226cc; color: #f0bd3c; display: grid; place-items: center; font: 900 13px Georgia, serif; box-shadow: 0 4px 18px #0008; pointer-events: none; }
.compass::after { content: ""; width: 2px; height: 20px; background: #ef625f; position: absolute; top: 7px; left: 25px; transform-origin: 50% 20px; transform: rotate(var(--heading, 0deg)); }
.toast { position: absolute; top: 18px; left: 50%; transform: translate(-50%, -14px); padding: 11px 18px; border: 1px solid #7d8e91; border-radius: 4px; background: #10191de8; color: #fff; opacity: 0; pointer-events: none; transition: .18s ease; font-weight: 750; box-shadow: 0 8px 24px #0008; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.gate-timer { position: absolute; top: 22px; right: 24px; width: 96px; padding: 8px; border: 1px solid var(--gold); background: #171c1ce8; text-align: center; box-shadow: 0 0 22px #f0bd3c44; }
.gate-timer span { display: block; color: var(--gold); font-size: 10px; font-weight: 900; }
.gate-timer strong { display: block; font-size: 38px; line-height: 1; }
.survival-status { position: absolute; left: 18px; top: 18px; width: 190px; padding: 9px 10px; border: 1px solid #72827d; background: #121c1fe8; box-shadow: 0 5px 18px #0007; font-size: 10px; }
.survival-status span { color: var(--gold); font-weight: 900; }
.survival-status b { margin-left: 12px; color: #cad5d1; font-size: 9px; }
.survival-status div { display: inline-block; width: 72px; height: 7px; margin: 0 5px; overflow: hidden; background: #394448; vertical-align: middle; }
.survival-status i { display: block; width: 100%; height: 100%; background: var(--green); transition: width .25s, background .25s; }
.survival-status strong { font-size: 9px; }
.coin-hud { position: absolute; right: 22px; top: 84px; min-width: 76px; height: 38px; padding: 0 11px; border: 1px solid #a98532; border-radius: 4px; background: #171c1ce8; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 5px 18px #0007; color: var(--gold); }
.coin-hud span { width: 18px; height: 18px; border: 2px solid #ffe28b; border-radius: 50%; background: var(--gold); color: transparent; box-shadow: inset 0 0 0 2px #b67e18; }
.coin-hud strong { min-width: 24px; color: #fff4c7; font-size: 16px; text-align: right; }
.backpack-button { position: absolute; right: 22px; bottom: 20px; width: 62px; height: 68px; border: 1px solid #886f3c; border-radius: 5px; background: #382c21; cursor: pointer; box-shadow: 0 8px 20px #0008; }
.backpack-button:hover { border-color: var(--gold); transform: translateY(-2px); }
.pack-icon { position: absolute; left: 14px; top: 20px; width: 32px; height: 35px; border: 3px solid #d39b4c; border-radius: 5px; background: #9c5f31; }
.pack-icon::before { content: ""; position: absolute; left: 5px; top: -13px; width: 16px; height: 13px; border: 3px solid #d39b4c; border-bottom: 0; border-radius: 8px 8px 0 0; }
.backpack-button b { position: absolute; right: -7px; top: -7px; min-width: 24px; height: 24px; padding: 3px; border-radius: 50%; background: var(--gold); color: #192023; font-size: 12px; }
.controls { position: absolute; left: 18px; bottom: 18px; display: flex; gap: 5px; opacity: .68; }
.controls span { padding: 5px 7px; border: 1px solid #819093; border-radius: 3px; background: #121c1fbb; font-size: 10px; font-weight: 900; }

.hotbar-wrap { display: grid; place-items: center; border-top: 1px solid #3a4b50; background: #172226; box-shadow: 0 -8px 25px #0006; z-index: 4; }
.hotbar { display: grid; grid-template-columns: repeat(5, 58px); gap: 8px; }
.hot-slot { position: relative; width: 58px; height: 58px; border: 2px solid #52646a; border-radius: 4px; background: #0f181b; color: #fff; display: grid; place-items: center; font-size: 29px; cursor: pointer; }
.hot-slot::after { content: attr(data-key); position: absolute; left: 3px; top: 1px; color: #718287; font-size: 9px; font-weight: 900; }
.hot-slot.filled { border-color: #a78439; background: #28251c; }
.hot-slot.selected { outline: 2px solid var(--gold); outline-offset: 2px; }

dialog { color: var(--ink); border: 1px solid #607176; border-radius: 6px; background: #172226; box-shadow: 0 28px 90px #000c; }
dialog::backdrop { background: #071012c9; backdrop-filter: blur(3px); }
.intro-dialog, .complete-dialog { width: min(560px, calc(100vw - 32px)); padding: 30px; text-align: center; }
.intro-dialog h2, .complete-dialog h2, .backpack-dialog h2 { margin: 5px 0 12px; font-family: Georgia, serif; font-size: 31px; letter-spacing: 0; }
.intro-dialog p, .complete-dialog p { color: #bdc9c5; line-height: 1.55; }
.hero-mark { position: relative; width: 150px; height: 150px; margin: 18px auto; display: grid; place-items: center; background: #25353a; border: 1px solid #52666b; }
.hero-mark span { font-size: 70px; z-index: 2; }
.hero-mark i, .hero-mark b { position: absolute; width: 82px; height: 14px; background: #3c8ee6; }
.hero-mark i { transform: rotate(45deg); }
.hero-mark b { transform: rotate(-45deg); }
.primary { min-height: 44px; padding: 0 22px; border: 0; border-radius: 4px; background: var(--gold); color: #182024; font-weight: 900; cursor: pointer; }
.primary:hover { background: #ffd35d; }
.backpack-dialog, .shop-dialog { width: min(620px, calc(100vw - 28px)); padding: 22px; }
.map-dialog { width: min(700px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 18px; }
.map-dialog h2 { margin: 4px 0 8px; font-family: Georgia, serif; }
#mapCanvas { display: block; width: min(620px, 100%); height: auto; aspect-ratio: 1; margin: 10px auto; border: 1px solid #5d706d; background: #25392f; }
.map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 9px; font-weight: 900; }
.map-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 50%; background: #fff; }
.map-legend .you::before { background: #3c8ee6; }.map-legend .supply::before { background: #f0bd3c; }.map-legend .chest::before { background: #b87435; }.map-legend .hut::before { background: #79c68d; }.map-legend .shop::before { background: #d978c6; }.map-legend .gate::before { background: #ef625f; }
.mystery-card { position:absolute; z-index:5; left:18px; top:177px; width:min(260px,calc(100% - 36px)); padding:12px 14px; text-align:left; color:#edf4ee; background:#142229e8; border:1px solid #d8bd83a8; border-radius:9px; box-shadow:0 12px 25px #07101477; cursor:pointer; }
.mystery-card small,.mystery-card strong,.mystery-card span { display:block; }.mystery-card small{font-size:10px;letter-spacing:.13em;color:#e9c58a;font-weight:800;}.mystery-card strong{font:20px Georgia,serif;margin:4px 0;}.mystery-card span{font-size:12px;line-height:1.45;color:#c7d6d2;}
.villager-tag{position:absolute;z-index:7;transform:translate(-50%,-100%);padding:6px 10px;border:1px solid var(--villager-colour);border-radius:999px;background:#13242eea;color:#fff;font:700 12px system-ui;box-shadow:0 3px 12px #0009;cursor:pointer;white-space:nowrap;}.villager-tag::before{content:'●';color:var(--villager-colour);margin-right:5px;}.villager-tag:hover{background:#30505a;}
.dream-bubble{position:absolute;z-index:7;width:172px;height:114px;transform:translate(-50%,-100%);border:2px solid #aebcde;border-radius:49% 51% 46% 54% / 52% 48% 52% 48%;background:radial-gradient(circle at 35% 22%,#fff 0%,#f2f5ff 55%,#d9e3fa 100%);box-shadow:0 7px 22px #0009,inset 0 2px 9px #fff;pointer-events:none;overflow:visible;animation:dream-float 3s ease-in-out infinite;}
.dream-bubble::before,.dream-bubble::after{content:'';position:absolute;border:2px solid #aebcde;border-radius:50%;background:#eff3ff;box-shadow:0 2px 6px #0005;}
.dream-bubble::before{width:17px;height:17px;left:23px;bottom:-13px;}
.dream-bubble::after{width:9px;height:9px;left:15px;bottom:-27px;}
.dream-scene{position:absolute;inset:6px 8px;display:block;overflow:hidden;border-radius:48%;background:linear-gradient(#bcd6f5,#f8f5e9 72%,#b9d8a3 73%);}
.dream-part{position:absolute;display:block;line-height:1;filter:drop-shadow(0 2px 2px #34415f66);will-change:transform;}
.dream-hill{left:-10px;bottom:-12px;width:180px;height:38px;border-radius:50% 50% 0 0;background:#84b879;}
.dream-fence{left:75px;bottom:12px;width:45px;height:26px;border-left:6px solid #86563c;border-right:6px solid #86563c;background:repeating-linear-gradient(to bottom,transparent 0 6px,#a66f48 6px 11px,transparent 11px 16px);z-index:2;}
.dream-sheep{left:-35px;bottom:10px;font-size:34px;z-index:3;animation:dream-sheep-leap 3.4s linear infinite;}
.dream-sheep-late{animation-delay:-1.7s;}
.dream-cloud{font-size:49px;opacity:.85;animation:dream-cloud-drift 5s ease-in-out infinite alternate;}.dream-cloud-one{left:-5px;top:14px;}.dream-cloud-two{left:82px;top:38px;animation-delay:-2s;}
.dream-boat{left:53px;top:32px;font-size:43px;animation:dream-boat-sail 3.8s ease-in-out infinite alternate;}
.dream-dragon{left:21px;top:28px;font-size:52px;animation:dream-dragon-fly 2s ease-in-out infinite alternate;}
.dream-flame{left:89px;top:37px;font-size:22px;animation:dream-fire 1s ease-out infinite;}.dream-flame-late{left:109px;top:28px;animation-delay:-.5s;}
.dream-fox{left:8px;bottom:14px;font-size:39px;animation:dream-fox-run 3s ease-in-out infinite alternate;}
.dream-butterfly{left:96px;top:15px;font-size:27px;animation:dream-butterfly-flit 2.4s ease-in-out infinite alternate;}
.dream-cake{left:50px;bottom:17px;font-size:42px;animation:dream-cake-rise 3.5s ease-in-out infinite alternate;}
.dream-balloon{font-size:29px;animation:dream-balloon-rise 3.5s ease-in-out infinite alternate;}.dream-balloon-one{left:35px;top:4px;}.dream-balloon-two{left:92px;top:3px;animation-delay:-.5s;}
.dream-moon .dream-part.dream-moon,.dream-star .dream-part.dream-moon{left:92px;top:9px;font-size:44px;}
.dream-bird{left:-30px;top:47px;font-size:32px;animation:dream-bird-fly 4s linear infinite;}.dream-bird-late{animation-delay:-2s;}
.dream-sea{background:linear-gradient(#9acbeb,#64aed2 45%,#4485b5);}.dream-castle{left:60px;bottom:1px;font-size:58px;opacity:.85;}.dream-fish{left:6px;top:34px;font-size:31px;animation:dream-fish-swim 3.6s ease-in-out infinite alternate;}.dream-bubbles{left:104px;top:11px;font-size:25px;animation:dream-bubble-rise 2.2s ease-in-out infinite;}
.dream-village{background:linear-gradient(#9dc7ed,#e9f5ff);}.dream-home{top:24px;font-size:44px;animation:dream-home-float 3s ease-in-out infinite alternate;}.dream-home-one{left:30px;}.dream-home-two{left:85px;animation-delay:-1.5s;}
.dream-door{left:59px;bottom:9px;font-size:61px;animation:dream-door-open 3s ease-in-out infinite;}.dream-key{left:8px;top:44px;font-size:31px;animation:dream-key-turn 3s ease-in-out infinite;}.dream-glow{left:106px;top:13px;font-size:26px;animation:dream-twinkle 1s ease-in-out infinite alternate;}
.dream-tree{bottom:11px;font-size:54px;transform-origin:bottom center;animation:dream-tree-dance 1.7s ease-in-out infinite alternate;}.dream-tree-one{left:21px;}.dream-tree-two{left:88px;animation-delay:-.85s;}.dream-music{left:68px;top:10px;font-size:22px;animation:dream-music-rise 2.2s ease-in-out infinite;}
.dream-star .dream-star{left:-34px;top:7px;font-size:44px;animation:dream-star-shoot 3.2s ease-in infinite;}
@keyframes dream-float{50%{transform:translate(-50%,calc(-100% - 7px));}}
@keyframes dream-sheep-leap{0%{transform:translate(0,0) rotate(0)}30%{transform:translate(70px,0) rotate(0)}50%{transform:translate(113px,-48px) rotate(-12deg)}70%{transform:translate(153px,0) rotate(4deg)}100%{transform:translate(210px,0) rotate(0)}}
@keyframes dream-cloud-drift{to{transform:translateX(18px)}}
@keyframes dream-boat-sail{to{transform:translate(23px,-11px) rotate(8deg)}}
@keyframes dream-dragon-fly{to{transform:translate(14px,-13px) rotate(-9deg)}}
@keyframes dream-fire{to{transform:translate(22px,-9px) scale(.5);opacity:0}}
@keyframes dream-fox-run{to{transform:translateX(65px) rotate(-8deg)}}
@keyframes dream-butterfly-flit{to{transform:translate(-30px,20px) rotate(20deg)}}
@keyframes dream-cake-rise{to{transform:translateY(-27px) rotate(6deg)}}
@keyframes dream-balloon-rise{to{transform:translateY(-22px) rotate(7deg)}}
@keyframes dream-bird-fly{to{transform:translate(215px,-38px)}}
@keyframes dream-fish-swim{to{transform:translateX(83px) scaleX(-1)}}
@keyframes dream-bubble-rise{to{transform:translateY(-40px);opacity:0}}
@keyframes dream-home-float{to{transform:translateY(-14px) rotate(5deg)}}
@keyframes dream-door-open{50%{transform:scaleX(.65);filter:brightness(1.6)}}
@keyframes dream-key-turn{50%{transform:translate(42px,-7px) rotate(95deg)}}
@keyframes dream-tree-dance{to{transform:rotate(12deg)}}
@keyframes dream-music-rise{to{transform:translateY(-27px);opacity:0}}
@keyframes dream-star-shoot{to{transform:translate(207px,56px);opacity:0}}
@keyframes dream-twinkle{to{transform:scale(.55) rotate(25deg);opacity:.35;}}
@media(prefers-reduced-motion:reduce){.dream-bubble,.dream-part{animation:none;}}
.character-tag{--villager-colour:#efd08c;pointer-events:none;cursor:default;}.character-tag::before{content:'●';}.character-tag:hover{background:#13242eea;}
.mystery-dialog{width:min(560px,calc(100vw - 28px));padding:26px;}.mystery-dialog h2{font:34px Georgia,serif;margin:6px 0 15px;}.mystery-dialog p{color:#d6e0dc;line-height:1.6;font-size:15px;}.mystery-notebook{border-top:1px solid #ffffff25;border-bottom:1px solid #ffffff25;padding:12px 0;margin:16px 0;color:#d9e8e1;font-size:13px;}.mystery-notebook strong{display:block;color:#e9c58a;font-size:11px;letter-spacing:.12em;margin-bottom:8px;}.mystery-notebook ol{padding-left:22px;margin:0;}.mystery-notebook li{margin:8px 0;line-height:1.45;}.mystery-choices{display:grid;gap:8px;margin:14px 0;}.mystery-choices button{padding:12px;text-align:left;color:#f3f4ec;background:#24363d;border:1px solid #ffffff35;border-radius:7px;cursor:pointer;font:inherit;}.mystery-choices button:hover{border-color:#e9c58a;background:#35423d;}.mystery-dialog>.primary{width:100%;}
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; }
.inventory { min-height: 190px; display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 10px; margin-top: 18px; }
.inventory-item { min-height: 105px; padding: 12px 8px; border: 1px solid #53666b; border-radius: 4px; background: #202e32; color: #fff; cursor: pointer; text-align: center; }
.inventory-item:hover { border-color: var(--gold); }
.inventory-item i { display: block; font-style: normal; font-size: 38px; }
.inventory-item span { display: block; margin-top: 5px; font-size: 12px; font-weight: 800; }
.empty-pack { grid-column: 1 / -1; align-self: center; color: #82938e; text-align: center; }
.pack-hint { margin: 14px 0 0; color: #98aaa4; font-size: 12px; }
.pack-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; }
.pack-actions .pack-hint { margin: 0; }
.level-dialog { text-align: left; }
.level-dialog .level-grid { margin-bottom: 4px; }
.coin-balance { margin: 14px 0; padding: 9px 12px; border-left: 3px solid var(--gold); background: #111a1d; color: #b7c4bf; font-size: 11px; font-weight: 900; }
.coin-balance strong { margin-left: 8px; color: var(--gold); font-size: 18px; }
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.shop-grid button { min-height: 96px; padding: 13px; border: 1px solid #53666b; border-radius: 4px; background: #202e32; color: #fff; cursor: pointer; text-align: left; }
.shop-grid button:hover { border-color: var(--gold); }
.shop-grid b, .shop-grid span, .shop-grid strong { display: block; }
.shop-grid span { margin: 4px 0 10px; color: #9fb0aa; font-size: 11px; }
.shop-grid strong { color: var(--gold); font-size: 11px; }
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 22px 0; }
.level { aspect-ratio: 1; border: 1px solid #4c5e63; border-radius: 4px; background: #1d292d; color: #758681; }
.level b, .level span { display: block; }
.level b { font-size: 22px; }.level span { font-size: 11px; line-height: 1.25; padding: 4px; }
.level.done { border-color: var(--green); color: var(--green); background: #193128; }
.level:not(:disabled) { cursor: pointer; color: #dce7e2; }
.level:not(:disabled):hover { border-color: var(--gold); color: var(--gold); background: #2b2b21; }

@media (max-width: 760px) {
  .game-shell { grid-template-rows: 62px minmax(0, 1fr) 74px; }
  .topbar { grid-template-columns: 1fr auto; gap: 8px; padding: 6px 10px 12px; }
  .objective { position: absolute; left: 10px; top: 65px; z-index: 5; max-width: calc(100vw - 100px); padding: 7px 10px; border: 1px solid #596a6f; background: #142024dc; }
  .title-group h1 { font-size: 19px; }
  .icon-button { width: 38px; height: 38px; }
  .hotbar { grid-template-columns: repeat(5, 50px); gap: 6px; }
  .hot-slot { width: 50px; height: 50px; }
  .controls { display: none; }
  .coin-hud { right: 10px; top: 76px; }
}

/* Expedition edition — spacious in-world view, quiet brass and midnight UI. */
:root { --gold:#e9c58a; --green:#a0c998; --panel:#131f25; --muted:#adbbb9; }
.game-shell { grid-template-rows:76px minmax(0,1fr) 76px; height:100dvh; }
.topbar { background:#111c21; border:0; box-shadow:none; padding:10px 26px 12px; }
.title-group h1 { font-size:26px; font-weight:500; }
.chapter { letter-spacing:.15em; font-size:11px; font-weight:650; }
.objective { border-left:1px solid #7e745b; padding-left:22px; }
.objective span { letter-spacing:.16em; font-size:10px; margin-bottom:4px; }
.objective strong { font-size:14px; font-weight:500; }
.icon-button { border:1px solid #ffffff21; border-radius:50%; background:transparent; width:38px; height:38px; font-size:20px; }
.quest-progress { height:3px; border:0; background:#ffffff0d; }
.quest-progress i { background:var(--gold); box-shadow:0 0 10px #e9c58a33; }
.quest-progress span { font-size:10px; bottom:5px; }
.viewport:after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 -110px 85px -75px #061015bb; }
.survival-status { background:#111c21bf; border:1px solid #ffffff20; border-radius:8px; box-shadow:none; width:192px; padding:12px; backdrop-filter:blur(10px); }
.survival-status div { width:77px; }.survival-status b { font-size:10px; }.survival-status strong{font-size:11px;}
.coin-hud { background:#111c21bc; border-color:#ffffff20; border-radius:8px; box-shadow:none; min-width:68px; }
.compass { background:#111c21a8; border-color:#e9c58a70; box-shadow:none; }
.gate-timer { right:110px; top:20px; z-index:6; border-radius:8px; }
.toast { top:20px; max-width:50%; font-size:14px; font-weight:500; text-align:center; z-index:8; border-color:#e9c58a50; border-radius:8px; }
.hotbar-wrap { background:#111c21; border-top:1px solid #ffffff15; box-shadow:none; }
.hotbar { grid-template-columns:repeat(5,50px); gap:10px; }
.hot-slot { width:50px; height:50px; border:1px solid #ffffff24; border-radius:7px; background:#19282e; font-size:24px; }
.hot-slot.filled { border-color:#847451; background:#2d302a; }
.hot-slot.selected { outline-width:1px; }.hot-slot::after{font-size:11px;left:5px;top:2px;}
.backpack-button { right:22px; bottom:22px; transform:scale(.85); transform-origin:bottom right; }
.player-hud { position:absolute; bottom:24px; left:26px; z-index:3; pointer-events:none; max-width:calc(100% - 105px); text-shadow:0 2px 8px #000; }
.player-hud span,.player-hud strong { display:block; }
.explorer-label { color:var(--gold); letter-spacing:.2em; font-size:10px; margin-bottom:7px; }
.player-hud strong { font-family:Georgia,serif; font-weight:400; font-size:23px; margin-bottom:8px; }
.player-hud span:last-child { color:#f3f3eb; font-size:12px; }
.player-hud.second { left:calc(50% + 24px); }.second .explorer-label { color:#b1d2ec; }
body.coop .player-hud { max-width:calc(50% - 40px); }
body.coop .survival-status { top:18px; }
#splitDivider { position:absolute; left:50%; top:0; bottom:0; width:2px; background:#0e191f; z-index:4; }
.waypoint { position:absolute; color:#ffe0a1; font-size:23px; text-shadow:0 0 12px #ffc35c,0 2px 6px #000; pointer-events:none; transform:translate(-50%,-50%); }
.second-marker { color:#b9e0ff; }
dialog { border:1px solid #ffffff25; border-radius:14px; background:#131f25f5; max-height:calc(100dvh - 30px); overflow:auto; }
dialog::backdrop { background:#07101466; backdrop-filter:blur(5px); }
.intro-dialog { width:min(660px,calc(100vw - 28px)); padding:38px 42px 24px; text-align:left; }
.intro-dialog h2 { font-size:58px; line-height:1.07; font-weight:400; margin:18px 0 6px; letter-spacing:-.04em; }
.title-ellipsis { color:var(--gold); }.intro-subtitle { font-family:Georgia,serif; font-style:italic; font-size:21px; color:#e9c58a!important; margin:0 0 22px; }
.intro-dialog p { font-size:14px; line-height:1.7; }
.mode-picker { display:grid; grid-template-columns:1fr 1fr; gap:12px; border:0; margin:24px 0 18px; padding:0; }
.mode-picker legend { color:#abb9bb; font-size:12px; margin-bottom:9px; }
.mode-picker label { display:flex; align-items:center; gap:10px; padding:14px 12px; border:1px solid #ffffff25; border-radius:8px; cursor:pointer; }
.mode-picker label:has(input:checked) { border-color:var(--gold); background:#e9c58a0d; }
input { accent-color:var(--gold); }.mode-picker b,.mode-picker small { display:block; }.mode-picker b{font-size:14px;font-weight:600;}.mode-picker small{color:#a5b7b9;font-size:11px;margin-top:5px;}
.intro-controls { border-top:1px solid #ffffff15; padding-top:12px; margin:12px 0 20px; }
.intro-controls p { margin:4px 0; font-size:12px; color:#9dafb3; }.intro-controls b{color:#dee5e3;margin-right:8px;font-weight:500;}
.primary { border-radius:6px; font-size:14px; font-weight:650; min-height:46px; }
.intro-dialog .primary { width:100%; display:flex; align-items:center; justify-content:space-between; }.primary:hover{background:#f5d8a9;}
.asset-status { font-size:11px!important; margin:12px 0 0; text-align:center; color:#95b69f!important; }
.settings-dialog { width:min(560px,calc(100vw - 28px)); padding:28px; }.settings-dialog h2{font:30px Georgia,serif;margin:8px 0 18px;}.settings-dialog>p{font-size:14px;line-height:1.6;color:#acbec0;}
.setting-row { display:flex; justify-content:space-between; align-items:center; min-height:52px; border-bottom:1px solid #ffffff16; font-size:14px; }
.setting-row input{width:20px;height:20px;}.setting-row select{padding:8px;border-radius:5px;background:#21323a;color:#fff;border:1px solid #ffffff25;font:inherit;}
.setting-row input[type="text"]{width:min(210px,52%);height:auto;min-height:38px;padding:8px 10px;border-radius:5px;background:#21323a;color:#fff;border:1px solid #ffffff45;font:inherit;font-size:14px;}.setting-row input[type="text"]:focus{outline:2px solid #efd08c;outline-offset:2px;}.setting-help{margin:5px 0 12px;color:#9dafb3;font-size:12px;line-height:1.4;}
.settings-actions { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; }.secondary{background:#21323a;border:1px solid #ffffff25;color:#eef3ee;border-radius:6px;padding:10px;font:inherit;font-size:13px;cursor:pointer;}
.settings-dialog a{color:#98aaa9;font-size:12px;}button:focus-visible,a:focus-visible{outline:2px solid #f0d2a0;outline-offset:4px;}
.touch-controls{display:none;position:absolute;bottom:90px;left:16px;right:16px;z-index:6;align-items:end;gap:12px;pointer-events:none;}.touch-controls button{pointer-events:auto;touch-action:none;background:#132229ae;color:#fff;border:1px solid #ffffff70;border-radius:8px;min-width:48px;height:46px;}.touch-pad{display:grid;grid-template-columns:repeat(3,46px);gap:3px;margin-right:auto;}.touch-pad button:first-child{grid-column:2;}.touch-pad button:nth-child(2){grid-column:1;}
[hidden] { display:none!important; }
@media(pointer:coarse){.touch-controls{display:flex;}.player-hud{bottom:18px;}.player-hud span:last-child{display:none;}}
@media(max-width:760px){.topbar{padding:8px 12px 12px;grid-template-columns:1fr auto;}.top-actions{gap:5px;}.title-group h1{font-size:21px;}.chapter{font-size:9px;}.game-shell{grid-template-rows:64px minmax(0,1fr) 68px;}.objective{top:70px;font-size:12px;max-width:calc(100vw - 100px);padding:8px;}.objective span{display:none;}.objective strong{font-size:12px;}.survival-status{top:58px;left:12px;width:185px;}.intro-dialog{padding:26px 24px 20px;}.intro-dialog h2{font-size:44px;}.intro-dialog p{font-size:13px;}.intro-controls p{font-size:11px;}.mode-picker{gap:8px;}.mode-picker label{padding:10px 6px;gap:5px;}.mode-picker b{font-size:12px;}.mode-picker small{font-size:10px;}.player-hud{left:16px;bottom:18px;}.player-hud strong{font-size:18px;}.player-hud span:last-child{font-size:10px;}.toast{top:106px;max-width:85%;width:max-content;}.hot-slot{width:46px;height:46px;}.hotbar{grid-template-columns:repeat(5,46px);}.compass{right:12px;top:12px;}.coin-hud{right:12px;top:76px;}body.coop .survival-status{top:58px;}.gate-timer{top:120px;right:12px;width:70px;}}

.hotbar-wrap { display:flex; align-items:center; justify-content:center; gap:16px; }
.gear-use { border:1px solid #ffffff25; background:#21323a; color:#e9e8db; border-radius:6px; padding:9px; font:inherit; font-size:12px; cursor:pointer; }
.gear-use kbd { display:block; color:#e9c58a; font:inherit; font-size:10px; margin-top:3px; }
@media(max-width:420px){.hotbar-wrap{gap:10px;}.hotbar{gap:6px;}.gear-use{padding:8px 6px;}}

#stormFade{position:absolute;inset:0;background:#dce2e0;opacity:0;pointer-events:none;z-index:10;transition:opacity .15s linear;}
#cameraButton{font-size:12px;font-weight:700;}
.view-switch{pointer-events:auto;border:1px solid #b8d9ee70;border-radius:5px;padding:5px 8px;background:#14222dc9;color:#d3eafb;font:inherit;font-size:11px;margin-bottom:10px;cursor:pointer;}
@media(max-width:420px){.title-group h1{font-size:17px;}.top-actions{gap:3px;}.top-actions .icon-button{width:30px;height:32px;}.topbar{padding-left:8px;padding-right:8px;}}

.camera-choices{display:inline-flex;gap:2px;padding:3px;border:1px solid #ffffff35;border-radius:8px;pointer-events:auto;background:#14222de6;flex-shrink:0;}
.camera-choices button{border:0;border-radius:5px;background:transparent;color:#d3eafb;font:700 12px system-ui;min-width:31px;min-height:30px;padding:3px 5px;cursor:pointer;}
.camera-choices button[aria-pressed="true"]{background:#efc879;color:#18262c;}
.camera-choices button:focus-visible{outline:2px solid white;outline-offset:1px;}
.player-hud .camera-choices{align-self:flex-start;margin-bottom:8px;}

.extra-run-badge{position:absolute;left:18px;top:90px;z-index:4;border:1px solid #f5cc79;border-radius:5px;background:#23352fec;color:#ffe0a0;font:700 10px system-ui;letter-spacing:.06em;padding:6px 8px;pointer-events:none;}
.extra-run-badge[hidden]{display:none;}.run-help{font-size:12px;color:#aebfc5;margin:0 0 12px;line-height:1.5;}

@media(max-width:760px){.extra-run-badge{top:130px;left:12px;}}

.online-hud {position:absolute;top:16px;left:50%;transform:translateX(-50%);max-width:45%;display:grid;gap:5px;text-align:center;background:#102126dd;padding:9px 14px;border-radius:9px;pointer-events:none;color:#d4eee5;z-index:5;}
.online-hud strong {font-size:13px}.online-hud small {font-size:12px;color:#a8c7bf}.online-hud small:empty {display:none}
.voice-hud {position:absolute;right:18px;bottom:18px;z-index:8;max-width:290px;text-align:right;display:grid;gap:7px}.voice-hud button {font:600 13px system-ui;background:#172d33;color:#e5f5ef;border:1px solid #689c91;border-radius:7px;padding:9px 12px;cursor:pointer}.voice-hud button[aria-pressed=true] {background:#235e4d}.voice-hud small {font-size:12px;color:#e4eee9;text-shadow:0 1px 4px #000;background:#102126c9;padding:5px;border-radius:5px}.friends-intro {color:#dfbf77!important}.top-actions button:disabled {opacity:.4;cursor:default}
@media(max-width:760px){.online-hud{top:90px;max-width:65%;padding:6px 9px}.voice-hud{right:12px;bottom:108px;max-width:200px}.voice-hud small{font-size:12px}.online-hud strong{font-size:12px}}

#accessForm {display:grid;gap:12px;text-align:left;margin-top:20px}#accessForm label{font-size:16px}#gamePassword{width:100%;box-sizing:border-box;font:18px system-ui;padding:13px;border:1px solid #729990;border-radius:7px;background:#102126;color:#fff}#accessError{min-height:1.4em;margin:0;font-size:14px;color:#ffbc91}