:root{--bg:#08131d;--panel:#0f2234;--panel-2:#132a40;--ink:#e9f3fb;--muted:#99b5cc;--accent:#e0a83d;--border:#32506b;font-family:JetBrains Mono,Fira Code,monospace}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0}body{color:var(--ink);background:radial-gradient(circle at 20% 20%,#17324b 0%,#0000 30%),radial-gradient(circle at 80% 10%,#10273a 0%,#0000 35%),linear-gradient(#09131d 0%,#0a141f 100%)}.shell{grid-template-rows:auto 1fr;gap:10px;width:100%;height:100%;padding:10px;display:grid;position:relative}.topbar{border:1px solid var(--border);background:linear-gradient(90deg,#132a40 0%,#1d3852 100%);border-radius:10px;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;display:flex}.topbar h1{margin:0;font-size:24px;line-height:1.1}.controls{gap:8px;display:flex}.controls #hubBtn{min-width:88px}input,button{font:inherit;color:var(--ink);background:#0f2234;border:1px solid #42617f;border-radius:8px;padding:8px 10px}input{width:220px}button{cursor:pointer;transition:transform .16s,border-color .16s,background-color .16s,box-shadow .16s,color .16s}button:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 8px 18px #00000029}.stage{flex-direction:column;height:100%;min-height:0;display:flex;position:relative}.game-panel{border:1px solid var(--border);background:radial-gradient(circle at 30% 25%, #2c568261 0%, transparent 32%), radial-gradient(circle at 78% 24%, #8fc4ff24 0%, transparent 22%), radial-gradient(circle at 64% 74%, #68a26e24 0%, transparent 24%), linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);border-radius:12px;flex:auto;width:100%;min-height:0;position:relative;overflow:hidden}.game-panel:before{content:"";pointer-events:none;opacity:.55;background:linear-gradient(30deg,#78b2e014 0 1px,#0000 1px 30px) 0 0/120px 120px,linear-gradient(150deg,#78b2e014 0 1px,#0000 1px 30px) 0 0/120px 120px,linear-gradient(90deg,#78b2e00d 0 1px,#0000 1px 58px) 0 0/58px 58px,linear-gradient(#78b2e00d 0 1px,#0000 1px 58px) 0 0/58px 58px;position:absolute;inset:0}#game-root{width:100%;height:100%;min-height:0}#game-root canvas{display:block}.hub-fallback{pointer-events:none;z-index:1;position:absolute;inset:0;overflow:hidden}.hub-fallback.hidden{display:none}.hub-fallback:before{content:"";opacity:.9;background:radial-gradient(circle at 38% 54%,#5587b338 0%,#0000 23%),radial-gradient(circle at 52% 56%,#f0c45b2e 0%,#0000 13%),linear-gradient(145deg,#80b4e617,#0000 40%),linear-gradient(325deg,#80b4e614,#0000 36%);position:absolute;inset:0}.hub-fallback:after{content:"";opacity:.42;background-image:linear-gradient(#78b2e01f 1px,#0000 1px),linear-gradient(90deg,#78b2e01f 1px,#0000 1px);background-size:76px 76px;position:absolute;inset:0}.hub-fallback__node{z-index:1;position:absolute}.hub-fallback__node,.hub-fallback__road{pointer-events:auto}.hub-fallback__road{transform-origin:0;z-index:0;background:linear-gradient(90deg,#8fb4d300,#8fb4d36b,#8fb4d300);border-radius:999px;height:4px;position:absolute;box-shadow:0 0 14px #8fb4d32e}.hub-fallback__road:before,.hub-fallback__road:after{content:"";border-top:1px solid #8fb4d333;border-bottom:1px solid #8fb4d333;border-radius:999px;position:absolute;inset:-6px 0}.hub-fallback__road--a{width:41%;top:58%;left:17%;transform:rotate(-30deg)}.hub-fallback__road--b{width:32%;top:38%;left:51%;transform:rotate(36deg)}.hub-fallback__road--c{width:38%;top:57%;left:17%;transform:rotate(-70deg)}.hub-fallback__node{color:#edf6ff;background:#0f2234db;border:1px solid #8fb4d3a8;border-radius:10px;padding:9px 13px;font-size:12px;transition:border-color .16s,box-shadow .16s,background-color .16s;box-shadow:0 0 16px #0000002e}.hub-fallback__node:hover{border-color:#f0c45b;box-shadow:0 0 18px #f0c45b38}.hub-fallback__node:before{content:"";border:1px solid #8fb4d338;border-radius:14px;position:absolute;inset:-7px}.hub-fallback__node--first{top:56%;left:16%}.hub-fallback__node--second{top:36%;left:50%}.hub-fallback__node--third{top:26%;left:62%}.hub-fallback__node--fourth{top:20%;left:26%}.hub-fallback__node--fifth{top:72%;left:24%}.hub-fallback__node--sixth{top:58%;left:72%}.hub-fallback__node.hidden-by-role,.hub-fallback__road.hidden-by-role{display:none}.hub-hero-block{gap:8px;margin-bottom:10px;display:grid}.hub-hero-block h3{color:#f0c45b;margin:0;font-size:13px}.hub-divider{background:linear-gradient(90deg,#0000,#8fb4d39e,#0000);height:1px;margin:10px 0 12px}.hub-card{background:#10263ab8;border:1px solid #3f5f7d;border-radius:10px;gap:6px;padding:10px;display:grid}.hub-card__title{color:#edf6ff;font-size:14px}.hub-card__description{color:var(--muted);font-size:12px;line-height:1.45}.hub-card__meta{color:var(--muted);flex-wrap:wrap;gap:8px 12px;font-size:11px;display:flex}.dock{z-index:30;gap:8px;display:grid;position:absolute;top:18px;right:18px}.dock-btn{text-align:center;background:#0f2234eb;border:1px solid #44627f;min-width:106px;padding:8px 10px;transition:transform .16s,border-color .16s,box-shadow .16s,background-color .16s}.dock-btn.active{border-color:var(--accent);box-shadow:0 0 0 1px #f0c45b33,0 0 14px #f0c45b26}.dock-btn:hover{background:#142c42fa;transform:translate(-3px)scale(1.02)}.drawer{border:1px solid var(--border);z-index:25;opacity:0;visibility:hidden;pointer-events:none;background:#0c1c2beb;border-radius:12px;width:min(390px,100vw - 190px);height:calc(100% - 32px);padding:12px;transition:transform .22s,opacity .16s,visibility 0s linear .22s;position:absolute;top:16px;right:136px;overflow:auto;transform:translate(calc(100% + 24px))}.drawer.open{opacity:1;visibility:visible;pointer-events:auto;transition:transform .22s,opacity .16s,visibility linear;transform:translate(0)}.drawer-panel{display:none}.drawer-panel.active{display:block}h2{color:var(--accent);margin:0 0 8px;font-size:14px}.log-actions{gap:8px;margin:0 0 8px;display:flex}.log-actions button{flex:1;padding:6px 8px;font-size:12px}pre{color:var(--muted);white-space:pre-wrap;max-height:54vh;margin:0;font-size:12px;overflow:auto}.hero-picker{gap:8px;display:grid}.hero-chip{text-align:left;background:#10263a;align-items:center;gap:10px;width:100%;padding:8px 10px;transition:transform .16s,border-color .16s,box-shadow .16s,background-color .16s;display:flex}.hero-chip.active{border-color:var(--accent);box-shadow:0 0 0 1px #f0c45b33,0 0 14px #f0c45b26}.hero-chip:hover{background:#14314a;transform:translate(4px)}.hero-chip__thumb-wrap{flex:0 0 40px;width:40px;height:40px;position:relative}.hero-chip__thumb{object-fit:cover;border:1px solid #486584;border-radius:9px;width:40px;height:40px}.hero-chip__glyph{color:#09131d;background:linear-gradient(#ffe28d 0%,#f0c45b 100%);border:1px solid #7f632d;border-radius:6px;justify-content:center;align-items:center;min-width:22px;height:18px;padding:0 5px;font-size:10px;font-weight:700;display:flex;position:absolute;bottom:-6px;right:-6px}.hero-chip__meta{gap:2px;display:grid}.hero-chip__meta strong{font-size:12px}.hero-chip__meta small{color:var(--muted)}.hero-summary{color:var(--muted);align-items:flex-start;gap:9px;margin:8px 0 0;font-size:12px;line-height:1.45;display:flex}.hero-summary__thumb{object-fit:cover;border:1px solid #4a6580;border-radius:8px;width:36px;height:36px}.artifact-list{gap:8px;display:grid}.artifact-item{background:#10263ab8;border:1px solid #3f5f7d;border-radius:8px;gap:2px;padding:8px 10px;display:grid}.artifact-item strong{color:#e6f1fa;font-size:12px}.artifact-item span{color:var(--muted);font-size:11px}.artifact-item--common{border-color:#40698b}.artifact-item--rare{border-color:#3b8a8c}.artifact-item--epic{border-color:#b18d46;box-shadow:0 0 0 1px #e1b45b3d}.artifact-item--empty{color:var(--muted);border-style:dashed;font-size:12px}.profile-card,.leaderboard-list{gap:10px;display:grid}.profile-card{background:#10263ab8;border:1px solid #3f5f7d;border-radius:10px;padding:10px}.profile-card__empty,.leaderboard-list__empty{color:var(--muted);font-size:12px}.profile-card__header{justify-content:space-between;align-items:start;gap:12px;display:flex}.profile-card__header strong{color:#edf6ff;font-size:14px;display:block}.profile-card__header span,.profile-card__role,.profile-card__stats span,.profile-card__runs span{color:var(--muted);font-size:11px}.profile-card__role{color:#f0c45b;white-space:nowrap;background:#0f2234d1;border:1px solid #486584;border-radius:999px;padding:6px 8px}.profile-card__stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.profile-card__stats div,.leaderboard-row{background:#08131d8f;border:1px solid #3f5f7d;border-radius:8px}.profile-card__stats div{gap:4px;padding:8px;display:grid}.profile-card__stats strong{color:#edf6ff;font-size:18px}.profile-card__section-title{color:#f0c45b;margin-top:2px;font-size:12px}.profile-card__runs{gap:6px;margin:0;padding:0;list-style:none;display:grid}.profile-card__runs li{background:#08131d70;border:1px solid #3f5f7d8c;border-radius:8px;justify-content:space-between;gap:12px;padding:7px 8px;display:flex}.profile-card__runs strong{color:#edf6ff;font-size:12px;display:block}.profile-card__empty-inline{color:var(--muted);font-size:12px}.leaderboard-list{padding:2px 0}.leaderboard-row{grid-template-columns:42px 1fr 56px;align-items:center;gap:8px;padding:8px 10px;display:grid}.leaderboard-row__rank{color:#f0c45b;font-size:12px}.leaderboard-row__body{gap:2px;display:grid}.leaderboard-row__body strong{color:#edf6ff;font-size:12px}.leaderboard-row__score{text-align:right;color:#f4d27a;font-size:14px;font-weight:700}.leaderboard-row.gold{border-color:#d7b14a}.leaderboard-row.silver{border-color:#9fb5c8}.leaderboard-row.bronze{border-color:#c08b57}#startQuestBtn{width:100%;margin-top:10px}#startQuestBtn:hover:not(:disabled){transform:translateY(-1px)scale(1.01)}#startQuestBtn:disabled{opacity:.55;cursor:not-allowed}.debug-overlay{z-index:50;color:#bfeaff;white-space:pre-wrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#07121be6;border:1px solid #5e8594;border-radius:10px;min-width:260px;max-width:360px;padding:10px 12px;font-size:12px;line-height:1.45;position:absolute;bottom:20px;left:20px}.debug-overlay.hidden{display:none}.presentation-banner{z-index:48;color:#f6dfaf;background:#1d170ce6;border:1px solid #8e7542;border-radius:10px;max-width:720px;padding:10px 14px;font-size:12px;line-height:1.45;position:absolute;top:84px;left:20px}.presentation-banner.hidden{display:none}.hub-exit-modal{z-index:70;place-items:center;display:grid;position:absolute;inset:0}.hub-exit-modal.hidden{display:none}.hub-exit-modal__backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:radial-gradient(circle at 25% 20%,#79b0e024,#0000 38%),#040c13bd;position:absolute;inset:0}.hub-exit-modal__card{background:linear-gradient(170deg,#122537f5,#0a1826fa);border:1px solid #5e7f9f;border-radius:12px;width:min(520px,100vw - 38px);padding:16px;position:relative;box-shadow:0 18px 42px #00000061}.hub-exit-modal__card h3{color:#edf6ff;margin:0 0 8px;font-size:20px}.hub-exit-modal__card p{color:#b3cce2;margin:0;font-size:13px;line-height:1.5}.hub-exit-modal__actions{justify-content:flex-end;gap:10px;margin-top:16px;display:flex}#hubExitConfirmBtn{color:#0a1622;background:linear-gradient(#f0c45b 0%,#d9a644 100%);border-color:#b98d3e}#hubExitConfirmBtn:hover{border-color:#f6d282}body.mission-active .dock,body.mission-active .drawer{display:none}body.presentation-mode .topbar{background:linear-gradient(90deg,#1e2f40 0%,#304b68 100%);border-color:#6c86a0}body.presentation-mode .controls{gap:6px}body.presentation-mode #username{width:180px}body.presentation-mode .game-panel{border-color:#6b8197;box-shadow:inset 0 0 0 1px #f0c45b14}body.presentation-mode .dock{top:14px;right:14px}body.presentation-mode .drawer{background:#0d1d2ef5;border-color:#647b93}body.presentation-mode .presentation-banner{box-shadow:0 12px 28px #0000003d}body.presentation-mode .debug-overlay{border-color:#627f8f}@media (width<=960px){.topbar{flex-direction:column;align-items:stretch}.topbar h1{font-size:20px}.controls{width:100%}input{flex:1;width:100%}.dock{top:12px;right:12px}.dock-btn{min-width:86px;padding:7px 8px;font-size:12px}.drawer{width:min(320px,100vw - 126px);right:104px}.hub-exit-modal__actions{flex-direction:column}}