:root{--bg:#050911;--panel:rgba(9,22,38,.88);--line:rgba(93,197,255,.36);--blue:#39B6FF;--green:#6BFF8E;--purple:#B97BFF;--gold:#FFC86B;--pink:#FF78C8;--text:#EAF6FF;--muted:#9FB7C9;--shadow:0 24px 100px rgba(0,0,0,.48);font-family:Inter,ui-sans-serif,system-ui,Segoe UI,Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text)}button{font:inherit}a{color:inherit;text-decoration:none}#pixiHost{position:fixed;inset:0;z-index:0;background:#050911 url("./assets/img/hero.jpg") center/cover no-repeat}#pixiHost canvas{display:block;width:100%!important;height:100%!important}.hidden{display:none!important}
.boot-screen{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 24% 15%,rgba(57,182,255,.30),transparent 34%),radial-gradient(circle at 82% 18%,rgba(185,123,255,.24),transparent 34%),linear-gradient(180deg,rgba(7,17,31,.70),#050911)}
.boot-card{width:min(1080px,96vw);border:1px solid var(--line);border-radius:34px;background:rgba(7,17,31,.82);box-shadow:var(--shadow),inset 0 0 80px rgba(57,182,255,.08);padding:clamp(26px,5vw,62px);backdrop-filter:blur(18px)}
.eyebrow{color:var(--blue);text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;font-weight:900;margin:0 0 10px}h1{font-size:clamp(2.6rem,7vw,6.8rem);line-height:.88;letter-spacing:-.08em;margin:0 0 20px}h2,h3,p{margin-top:0}.lead{color:var(--muted);font-size:1.08rem;line-height:1.55;max-width:850px}.boot-status{display:inline-flex;margin:12px 0 2px;padding:9px 12px;border:1px solid rgba(93,197,255,.36);border-radius:999px;background:rgba(57,182,255,.08);color:#9FB7C9;font-size:.88rem;font-weight:800}
.mode-grid{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:10px;margin:22px 0}.mode-button,.primary-button,.ghost-button,.hud-button,.choice-button,.mini-button,.ghost-link{border:1px solid var(--line);border-radius:16px;color:var(--text);background:linear-gradient(180deg,rgba(57,182,255,.20),rgba(8,30,52,.88));padding:12px 14px;cursor:pointer;box-shadow:inset 0 0 30px rgba(57,182,255,.08)}.mode-button.selected,.primary-button{background:linear-gradient(180deg,rgba(255,200,107,.36),rgba(80,48,8,.96));border-color:rgba(255,200,107,.62)}.ghost-button,.ghost-link{background:rgba(255,255,255,.04)}.button-row{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0 12px}.tiny{font-size:.82rem;color:var(--muted);margin-bottom:0}
.hud{position:fixed;left:16px;right:16px;top:16px;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:14px;border:1px solid var(--line);border-radius:24px;background:rgba(5,12,22,.70);backdrop-filter:blur(16px);padding:12px 14px;box-shadow:var(--shadow)}.hud-left,.hud-right{display:flex;align-items:center;gap:10px}.hud-right{flex-wrap:wrap;justify-content:flex-end}.hud h2{margin:0 0 3px;font-size:1.08rem}.hud p{margin:0;color:var(--muted);font-size:.86rem}.sync-orb{width:74px;height:74px;flex:0 0 auto;border:2px solid var(--blue);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 28px rgba(57,182,255,.48),inset 0 0 30px rgba(57,182,255,.16)}.sync-orb span{display:block;color:var(--muted);font-size:.56rem;text-align:center}.sync-orb strong{display:block;color:var(--blue);font-size:1.45rem}.hud-button{padding:9px 11px;border-radius:13px;font-size:.88rem}.hud-button.accent{border-color:rgba(255,200,107,.55);color:var(--gold)}.save-badge{color:var(--green);border:1px solid rgba(107,255,142,.36);background:rgba(107,255,142,.08);padding:8px 10px;border-radius:999px;font-size:.76rem;white-space:nowrap}
.side-panel{position:fixed;right:16px;top:112px;bottom:80px;z-index:12;width:min(500px,calc(100vw - 32px));overflow:auto;border:1px solid var(--line);border-radius:24px;background:rgba(5,12,22,.90);backdrop-filter:blur(16px);box-shadow:var(--shadow);padding:18px}.panel-card{border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(255,255,255,.045);padding:14px;margin:12px 0}.panel-card.good{border-color:rgba(107,255,142,.34)}.panel-card.warn{border-color:rgba(255,200,107,.34)}.row{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.progress-row{display:grid;grid-template-columns:112px 1fr 36px;gap:10px;align-items:center;margin:11px 0}.progress-track{height:10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}.progress-track span{display:block;height:100%;width:var(--value);background:var(--bar-color);box-shadow:0 0 18px var(--bar-color)}
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(1,5,10,.58);backdrop-filter:blur(7px);padding:20px}.modal-card{position:relative;width:min(720px,96vw);border:1px solid rgba(255,200,107,.50);border-radius:28px;background:radial-gradient(circle at top right,rgba(255,200,107,.14),transparent 38%),rgba(7,17,31,.96);box-shadow:var(--shadow),0 0 42px rgba(255,200,107,.14);padding:28px}.close-button{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);color:var(--text);background:rgba(255,255,255,.06);cursor:pointer}.mechanic-line{color:var(--gold);font-weight:850}.choice-grid{display:grid;gap:12px;margin:18px 0 8px}.choice-button{text-align:left;font-weight:850;min-height:54px}.choice-button:hover,.choice-button:focus{border-color:var(--gold)}.feedback{min-height:24px;color:var(--gold);font-weight:850}
.toast-stack{position:fixed;left:16px;bottom:76px;z-index:40;display:grid;gap:10px;width:min(460px,calc(100vw - 32px))}.toast{border:1px solid var(--line);border-radius:18px;background:rgba(7,17,31,.92);padding:12px 14px;box-shadow:var(--shadow);animation:toastIn .22s ease-out}@keyframes toastIn{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}.emote-wheel{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:28;display:grid;grid-template-columns:repeat(4,76px);gap:10px;padding:14px;border:1px solid var(--line);border-radius:24px;background:rgba(5,12,22,.92);box-shadow:var(--shadow)}.emote-button{height:68px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.06);color:var(--text);cursor:pointer}.emote-button span{display:block;font-size:1.35rem}.emote-button small{display:block;font-size:.65rem;color:var(--muted)}
.controls-help{position:fixed;right:16px;bottom:16px;z-index:8;padding:10px 12px;border:1px solid rgba(255,255,255,.12);background:rgba(3,9,18,.62);color:var(--muted);border-radius:999px;backdrop-filter:blur(10px);font-size:.80rem}.scene-badge{position:fixed;left:16px;bottom:16px;z-index:8;padding:8px 11px;border:1px solid rgba(107,255,142,.35);background:rgba(107,255,142,.08);border-radius:999px;color:#6BFF8E;font-size:.78rem}.asset-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.asset-strip img{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.10);aspect-ratio:16/10;object-fit:cover}.chat-message{border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);border-radius:14px;padding:10px;margin:8px 0}.chat-message small{color:var(--muted)}.badge{display:inline-block;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.12);color:var(--gold);font-size:.74rem}.loading-curtain{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(5,9,17,.72);backdrop-filter:blur(10px);font-size:1.4rem;font-weight:900;color:var(--gold)}.hard-error,.fatal-error{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;border:1px solid rgba(255,106,92,.65);background:rgba(40,5,8,.94);color:#fff;border-radius:18px;padding:16px;box-shadow:0 20px 80px rgba(0,0,0,.5);white-space:pre-wrap}
@media(max-width:860px){.mode-grid{grid-template-columns:1fr 1fr}.hud{left:8px;right:8px;top:8px;align-items:flex-start;flex-direction:column}.hud-right{width:100%;justify-content:flex-start}.side-panel{top:178px;right:8px;left:8px;width:auto}.controls-help{left:8px;right:8px;text-align:center;border-radius:16px}.emote-wheel{grid-template-columns:repeat(2,76px)}}
/* v6 hybrid gameplay layer: game-critical visuals are guaranteed DOM elements. Pixi supplies atmosphere and VFX. */
.dom-game-layer{position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.dom-path-layer{position:absolute;inset:0;pointer-events:none}
.dom-path-layer svg{width:100%;height:100%;display:block}
.dom-node{position:absolute;width:286px;height:205px;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;transition:transform .12s ease, opacity .12s ease, filter .12s ease;filter:drop-shadow(0 24px 50px rgba(0,0,0,.45))}
.dom-node.near{transform:translate(-50%,-50%) scale(1.1);filter:drop-shadow(0 0 32px var(--node-color)) drop-shadow(0 24px 50px rgba(0,0,0,.45))}
.dom-node.hidden-node{display:none}
.dom-node-card{position:absolute;left:0;right:0;top:0;height:162px;border-radius:28px;border:3px solid var(--node-color);background:#07111f center/cover no-repeat;box-shadow:inset 0 0 40px rgba(255,255,255,.08),0 0 36px color-mix(in srgb,var(--node-color) 45%,transparent)}
.dom-node-card::before{content:"";position:absolute;inset:-22px;border-radius:38px;border:2px solid var(--node-color);opacity:.45;animation:domRing 2.2s ease-in-out infinite}
.dom-node-card::after{content:"";position:absolute;inset:0;border-radius:25px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.22));pointer-events:none}
.dom-node-title{position:absolute;top:166px;left:0;right:0;text-align:center;font-weight:900;color:#eaf6ff;text-shadow:0 2px 8px #07111f,0 0 10px #07111f}
.dom-node-sub{position:absolute;top:190px;left:0;right:0;text-align:center;font-size:.78rem;font-weight:900;color:var(--node-color);text-shadow:0 2px 8px #07111f}
.dom-node-prompt{position:absolute;left:50%;top:-34px;transform:translateX(-50%);padding:6px 10px;border-radius:999px;border:1px solid rgba(255,200,107,.55);background:rgba(7,17,31,.88);color:#ffc86b;font-weight:900;font-size:.74rem;white-space:nowrap;display:none}
.dom-node.near .dom-node-prompt{display:block}
.dom-node-synced{position:absolute;left:50%;top:-8px;transform:translateX(-50%);padding:5px 9px;border-radius:999px;border:1px solid rgba(107,255,142,.55);background:rgba(7,17,31,.88);color:#6bff8e;font-weight:900;font-size:.72rem;white-space:nowrap;display:none}
.dom-node.synced .dom-node-synced{display:block}
@keyframes domRing{0%,100%{transform:scale(1);opacity:.28}50%{transform:scale(1.06);opacity:.62}}
.dom-player{position:absolute;left:50%;top:50%;width:92px;height:128px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 16px 28px rgba(0,0,0,.55))}
.dom-player-aura{position:absolute;left:50%;top:54%;width:112px;height:112px;transform:translate(-50%,-50%);border:3px solid #39b6ff;border-radius:50%;box-shadow:0 0 34px rgba(57,182,255,.55),inset 0 0 24px rgba(57,182,255,.18);animation:pulseAura 1.6s ease-in-out infinite}
.dom-player-shadow{position:absolute;left:50%;top:100px;width:86px;height:24px;transform:translateX(-50%);border-radius:50%;background:rgba(0,0,0,.36)}
.dom-player-body{position:absolute;left:50%;top:50px;width:58px;height:70px;transform:translateX(-50%);border-radius:26px;background:linear-gradient(180deg,#90ffae,#28b86a);border:3px solid rgba(234,246,255,.45);box-shadow:inset 0 0 18px rgba(255,255,255,.22)}
.dom-player-head{position:absolute;left:50%;top:17px;width:52px;height:52px;transform:translateX(-50%);border-radius:50%;background:#ffd7c6;border:2px solid rgba(255,255,255,.35)}
.dom-player-core{position:absolute;left:50%;top:82px;width:20px;height:20px;transform:translateX(-50%);border-radius:50%;background:#39b6ff;box-shadow:0 0 22px rgba(57,182,255,.9);animation:corePulse .8s ease-in-out infinite}
.dom-player-name{position:absolute;left:50%;top:132px;transform:translateX(-50%);font-weight:900;color:#6bff8e;text-shadow:0 2px 8px #07111f;white-space:nowrap;font-size:.78rem}
@keyframes pulseAura{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.72}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
@keyframes corePulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.18)}}
.dom-loot-pop{position:absolute;z-index:7;pointer-events:none;font-weight:900;color:#ffc86b;text-shadow:0 3px 10px #07111f,0 0 18px currentColor;animation:lootPop 1.25s ease-out forwards;white-space:nowrap}
@keyframes lootPop{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}20%{opacity:1}100%{transform:translate(-50%,-150%) scale(1.12);opacity:0}}
.dom-minimap{position:fixed;left:16px;top:118px;left:16px;z-index:9;width:220px;border:1px solid rgba(93,197,255,.32);border-radius:20px;background:rgba(5,12,22,.58);backdrop-filter:blur(12px);padding:10px;color:#9fb7c9;font-size:.72rem;pointer-events:none}
.dom-minimap strong{display:block;color:#eaf6ff;margin-bottom:4px}
@media(max-width:860px){.dom-node{width:230px;height:176px}.dom-node-card{height:128px}.dom-node-title{top:132px}.dom-node-sub{top:154px}.dom-minimap{display:none}}

.dom-minimap{left:16px!important;right:auto!important;max-width:220px}