*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:hidden}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 18% 8%,#7c3aed 0 12rem,transparent 30rem),radial-gradient(circle at 85% 20%,#f59e0b 0 10rem,transparent 28rem),linear-gradient(135deg,#0d0a1a,#1a1535 55%,#2b1706);color:#fff7ed}
button,a{font:inherit}
.shell{width:min(1220px,calc(100% - 28px));margin:auto;padding:18px 0 40px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.topActions{display:flex;gap:8px}
.back,.round{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.1);color:#fff;text-decoration:none;border-radius:999px;padding:10px 14px;font-weight:950}
.round{width:44px;height:44px;cursor:pointer}
.brand{display:flex;align-items:center;gap:10px;background:rgba(13,10,26,.76);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:9px 16px;box-shadow:0 18px 42px rgba(0,0,0,.28)}
.brand span{font-size:1.25rem}
.brand small{color:#fde68a;font-weight:850}
.hero{display:grid;grid-template-columns:1fr 230px;gap:16px;margin-bottom:16px;padding:24px;border-radius:32px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);box-shadow:0 24px 70px rgba(0,0,0,.25)}
.eyebrow{margin:0 0 8px;text-transform:uppercase;letter-spacing:.12em;color:#fde68a;font-weight:1000;font-size:.76rem}
.hero h1{margin:0;font-size:clamp(2rem,5vw,4.5rem);line-height:.92;letter-spacing:-.06em}
.hero p{max-width:720px;color:#ffedd5;line-height:1.55}
.hero aside{background:linear-gradient(135deg,#7c3aed,#b45309);border-radius:24px;padding:18px;align-self:start}
.hero aside span,.hero aside small{display:block;color:#fef3c7;font-weight:900}
.hero aside strong{display:block;font-size:1.25rem;margin:5px 0}
.game{display:grid;grid-template-columns:220px minmax(0,1fr) 300px;gap:16px}
.panel{border:1px solid rgba(255,255,255,.13);border-radius:30px;background:rgba(255,255,255,.09);box-shadow:0 22px 65px rgba(0,0,0,.26);overflow:hidden;backdrop-filter:blur(12px)}
.hud{padding:16px;display:grid;gap:10px;align-content:start}
.stat{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.1);border-radius:18px;padding:12px}
.stat span{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:#fde68a;font-weight:950}
.stat strong{font-size:1.25rem}
.stat.best{background:rgba(253,230,138,.14)}
.stat.best strong{color:#fde68a}
.primary,.ghost{border:0;border-radius:17px;padding:12px;color:white;font-weight:950;cursor:pointer}
.primary{background:linear-gradient(135deg,#7c3aed,#f59e0b)}
.primary:active{transform:translateY(1px)}
.ghost{background:#111827}
.hud p{color:#ffedd5;line-height:1.45;font-weight:750;margin:0}
.mapPanel{position:relative;padding:14px}
.map{position:relative;min-height:560px;border-radius:24px;background:radial-gradient(circle at 50% 45%,#6b3f16,#2b1706 60%,#160c08);border:1px solid rgba(255,255,255,.14);overflow:hidden}
.map::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(38% 42% at 50% 46%,rgba(255,196,90,.28),rgba(255,140,40,.07) 45%,transparent 72%);animation:torch 3.2s ease-in-out infinite}
@keyframes torch{0%,100%{opacity:.75}35%{opacity:1}60%{opacity:.68}80%{opacity:.92}}
.lines{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.lines line{stroke:rgba(254,243,199,.32);stroke-width:.5}
.lines line.lit{stroke:rgba(254,243,199,.7);stroke-width:.7}
.node{position:absolute;z-index:1;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.18);background:#241d2e;color:#fff;font-size:1.35rem;font-weight:1000;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.3);transition:transform .12s,box-shadow .2s,background .2s}
.node:disabled{cursor:default;opacity:.5}
.node.open{border-color:#fde68a;box-shadow:0 0 0 6px rgba(253,230,138,.14),0 10px 25px rgba(0,0,0,.3)}
.node.open:not(:disabled):hover{transform:translate(-50%,-50%) scale(1.08)}
.node.current{background:#f59e0b;color:#1f1302;border-color:#fff}
.node.visited{border-color:rgba(255,255,255,.45)}
.node.current.visited{background:#f59e0b}
.node.exit{border-style:dashed}
.node.exit.open{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(253,230,138,.12),0 10px 25px rgba(0,0,0,.3)}50%{box-shadow:0 0 0 12px rgba(253,230,138,.05),0 10px 25px rgba(0,0,0,.3)}}
.event{position:absolute;inset:14px;display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:24px;border-radius:24px;background:rgba(13,10,26,.86);backdrop-filter:blur(8px);z-index:5}
.event.show{display:flex;animation:fade .22s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
.event h2{font-size:clamp(2rem,5vw,3.5rem);margin:0}
.event p{max-width:520px;color:#ffedd5;line-height:1.5}
.event button{border:0;border-radius:999px;background:#facc15;color:#111827;padding:12px 20px;font-weight:1000;cursor:pointer;margin-top:8px}
.event.good{background:rgba(9,38,24,.9)}
.event.good h2{color:#86efac}
.event.bad{background:rgba(42,8,12,.9)}
.event.bad h2{color:#fca5a5}
.event.pause{z-index:6}
.clue{padding:18px}
.clue>strong{display:block;font-size:1.15rem;margin-bottom:10px}
.clue h3{margin:0 0 8px;color:#fde68a}
.clue p,.clue small{display:block;color:#ffedd5;line-height:1.45;margin:0 0 8px}
.clue .found{color:#fde68a;font-weight:800}
.clue small{color:#e9d5b0;opacity:.85;margin-top:4px}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 10px}
.legend span{border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:8px;background:rgba(255,255,255,.06);font-weight:800}
.par{color:#e9d5b0;font-size:.85rem;line-height:1.45;margin:0}
.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%) translateY(-16px);opacity:0;border-radius:999px;padding:12px 18px;background:#111827;color:#fff;font-weight:1000;box-shadow:0 18px 38px rgba(0,0,0,.35);transition:.18s;z-index:30;max-width:calc(100% - 24px);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.good{background:#166534}
.toast.bad{background:#991b1b}
@media(max-width:1050px){.game{grid-template-columns:1fr}
.hud{grid-template-columns:repeat(4,1fr)}
.hud .primary,.hud .ghost,.hud p{grid-column:span 2}
.clue{order:2}
.mapPanel{order:3}
.map{min-height:520px}
}
@media(max-width:680px){.shell{width:calc(100% - 18px);padding-top:10px}
.brand small{display:none}
.hero{grid-template-columns:1fr;padding:18px;border-radius:24px}
.hero h1{font-size:2.2rem}
.hud{grid-template-columns:1fr 1fr;border-radius:24px}
.hud p{grid-column:span 2}
.mapPanel{padding:8px;border-radius:24px}
.map{min-height:440px}
.node{width:46px;height:46px;font-size:1.1rem}
.clue{border-radius:24px}
.legend{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){.map::after,.node.exit.open{animation:none}.event.show{animation:none}}