:root{--sea:#04222b;--sea2:#093541;--lagoon:#19d3b8;--pink:#ff4f8b;--gold:#ffc83d;--sand:#f1e6cb;--mute:#8fb0b3}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,#0d5560 0,transparent 60%),var(--sea);color:var(--sand);font:400 16px/1.5 Outfit,sans-serif;padding:max(16px,env(safe-area-inset-top)) 16px 48px}
header{max-width:1200px;margin:24px auto}
h1{font:400 clamp(34px,6vw,64px)/.95 Bungee,sans-serif;margin:0;color:var(--pink);text-shadow:3px 3px 0 var(--gold)}
header p{max-width:60ch;color:var(--mute)}
h2{font:400 22px Bungee,sans-serif;margin:0 0 12px;color:var(--lagoon)}
h3{margin:20px 0 8px;font-weight:600;color:var(--gold)}
main{max-width:1200px;margin:auto;display:grid;grid-template-columns:3fr 2fr;gap:20px}
.panel{background:rgba(9,53,65,.75);border:1px solid #1b6270;border-radius:18px;padding:20px;backdrop-filter:blur(6px)}
#primary-panel,.mapwrap{grid-column:1}.results{grid-column:2;grid-row:1/span 2;align-self:start;position:sticky;top:12px}
@media(max-width:900px){main{grid-template-columns:1fr}.results{grid-column:1;grid-row:auto;position:static}}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.card{all:unset;cursor:pointer;padding:12px;border:2px solid #1b6270;border-radius:12px;background:var(--sea);transition:.15s}
.card b{display:block}.card span{color:var(--gold);font-weight:600}
.card:hover{border-color:var(--lagoon)}
.card[aria-pressed=true]{border-color:var(--pink);box-shadow:0 0 18px rgba(255,79,139,.55);transform:translateY(-2px)}
.card:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.toggle{display:block;margin-top:12px;color:var(--mute)}
.map{position:relative;background:repeating-linear-gradient(0deg,transparent 0 23px,rgba(25,211,184,.08) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,rgba(25,211,184,.08) 23px 24px),#031a21;border-radius:14px;border:1px solid #1b6270;overflow:hidden}
svg{width:100%;display:block}
.room rect{fill:rgba(25,211,184,.08);stroke:var(--lagoon);stroke-width:2;rx:8}
.room text.t{fill:var(--mute);font:600 12px Outfit}
.room.vault rect{stroke:var(--pink);fill:rgba(255,79,139,.12);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{fill:rgba(255,79,139,.28)}}
.slot{cursor:pointer}.slot circle{fill:var(--sea);stroke:var(--mute);stroke-width:2;transition:.15s}
.slot:hover circle,.slot:focus circle{stroke:var(--gold);stroke-width:3}
.slot.on circle{stroke-width:3}.slot text{font-size:20px;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.pop{position:absolute;z-index:5;background:var(--sea);border:2px solid var(--gold);border-radius:12px;padding:6px;display:grid;gap:4px;min-width:150px;box-shadow:0 10px 30px #000a}
.pop button{all:unset;cursor:pointer;padding:6px 10px;border-radius:8px}.pop button:hover,.pop button:focus-visible{background:var(--sea2);outline:2px solid var(--lagoon)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0;color:var(--mute);font-size:14px}
.ghost{all:unset;cursor:pointer;border:1px solid var(--lagoon);color:var(--lagoon);padding:6px 14px;border-radius:999px;margin-right:8px}
.ghost:hover{background:var(--lagoon);color:var(--sea)}
.row{display:flex;gap:16px;flex-wrap:wrap;align-items:end}.row label{display:grid;gap:4px;color:var(--mute);font-size:14px}
input[type=number]{width:90px;padding:8px;border-radius:8px;border:1px solid #1b6270;background:var(--sea);color:var(--sand);font:inherit}
.seg{display:flex}.seg button{all:unset;cursor:pointer;padding:8px 16px;border:1px solid var(--lagoon);color:var(--lagoon)}
.seg button:first-child{border-radius:999px 0 0 999px}.seg button:last-child{border-radius:0 999px 999px 0}
.seg button[aria-pressed=true]{background:var(--lagoon);color:var(--sea);font-weight:600}
.verdict{margin:16px 0;padding:14px;border-radius:12px;background:var(--sea)}
.verdict .big{font:400 clamp(28px,4vw,40px) Bungee,sans-serif;color:var(--gold)}
.bag{display:flex;align-items:center;gap:8px;margin:6px 0}.bag>span{width:70px;font-size:14px;color:var(--mute)}
.bar{flex:1;height:22px;background:var(--sea);border-radius:6px;overflow:hidden;display:flex;border:1px solid #1b6270}.bar i{display:block;height:100%}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:6px 4px;text-align:right}th:first-child,td:first-child{text-align:left}
tr.best td{color:var(--gold);font-weight:600}tr.sel{background:rgba(255,79,139,.15)}
.note{color:var(--mute);font-size:14px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}