:root{--ink:#17324d;--muted:#5f788b;--cyan:#50ded4;--player:#49d7bd;--player2:#168b7d;--raz:#f28bc1;--raz2:#a94f86;--empty:#eef9fb;--empty2:#e3f3f7;--preview:#ffd45e;--bad:#e36a78;--line:#a7ced8;--shadow:0 14px 34px rgba(19,93,106,.14)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}
body{background:linear-gradient(145deg,#56ddd3 0%,#83ebe3 48%,#aaf2ec 100%);min-height:100vh;overflow-x:hidden}button,a,select{font:inherit}.app{max-width:1320px;margin:auto;padding:12px 14px 28px}.top{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.96);border:1px solid #fff;border-radius:20px;padding:9px 12px;box-shadow:0 8px 22px rgba(23,93,104,.13);position:sticky;top:8px;z-index:20}.logo{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:950}.logo img{width:40px;height:40px;object-fit:contain}.logo small{display:block;color:#168d88;font-size:10px;letter-spacing:.08em}.top-spacer{flex:1}.pill{border-radius:999px;background:#e4f9f6;padding:7px 10px;font-size:11px;font-weight:900;color:#22746f}.back{border:0;border-radius:12px;background:#173c59;color:#fff;text-decoration:none;padding:10px 12px;font-size:11px;font-weight:900}
.titlebar{display:flex;align-items:center;justify-content:space-between;gap:14px;background:rgba(255,255,255,.96);border-radius:20px;padding:16px 18px;margin:14px 0 10px;box-shadow:0 8px 22px rgba(22,104,112,.12)}.titlebar h1{margin:0;font-size:clamp(26px,3vw,40px);letter-spacing:-1.3px;line-height:1}.titlebar p{margin:5px 0 0;color:var(--muted);font-size:12px;font-weight:700}.level-select select{border:2px solid #c9e4e8;border-radius:12px;background:#fff;padding:9px 10px;font-weight:850;color:var(--ink)}
.stage{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,.85fr);gap:12px}.game,.side{background:rgba(255,255,255,.95);border:1px solid #fff;border-radius:24px;box-shadow:var(--shadow)}.game{padding:14px}.side{padding:14px;display:flex;flex-direction:column;gap:11px}.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}.metric{background:#eefbfa;border:1px solid #d5eeee;border-radius:13px;padding:9px 10px}.metric b{display:block;font-size:15px}.metric span{font-size:9px;font-weight:900;color:var(--muted);letter-spacing:.04em}.feedback{min-height:42px;border-radius:13px;background:#173c59;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:8px 12px;font-size:11px;font-weight:900;margin-bottom:10px}
.playarea{display:grid;grid-template-columns:minmax(300px,1.25fr) minmax(225px,.75fr);gap:12px;align-items:start}.mapbox{background:linear-gradient(180deg,#dff8ee,#edfaff);border:1px solid #8fd1c3;border-radius:20px;padding:12px}.mapbox h2,.panel h2{margin:0 0 8px;font-size:16px}.board{display:grid;gap:2px;aspect-ratio:1.08/1;max-width:600px;margin:auto;background:#fff;border:4px solid #fff;border-radius:16px;box-shadow:0 8px 18px rgba(42,105,113,.12);overflow:hidden}.cell{border:1px solid var(--line);background:var(--empty);position:relative;cursor:pointer;min-width:0;min-height:30px;padding:0;transition:.12s transform,.12s filter}.cell:nth-child(even){background:var(--empty2)}.cell:hover{filter:brightness(.98);transform:scale(.985)}.cell.player{background:var(--player);border-color:var(--player2)}.cell.raz{background:var(--raz);border-color:var(--raz2)}.cell.preview{background:#ffe57d;border-color:#d5a900}.cell.invalid{background:#f6a6af;border-color:#c85060}.cell.hint{box-shadow:inset 0 0 0 3px #f3b800}.cell b{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:10px;text-shadow:0 1px 2px rgba(0,0,0,.18)}.cell.empty b{color:transparent}.cell.sel:after{content:"";position:absolute;inset:4px;border:3px solid #173c59;border-radius:6px}.maplegend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:9px;font-size:10px;font-weight:850;color:var(--muted)}.dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}.dot.p{background:var(--player)}.dot.r{background:var(--raz)}.dot.v{background:var(--preview)}
.panel{display:grid;gap:9px}.scorecard{border:1px solid #c8e0e5;border-radius:16px;padding:11px;background:#fff}.scorecard.playercard{background:#e7fbf5;border-color:#9ce0ce}.scorecard.razcard{background:#fff0f7;border-color:#edb0d1}.scorecard strong{font-size:11px}.big{font-size:25px;font-weight:950;letter-spacing:-1px;margin-top:4px}.sub{font-size:10px;color:var(--muted);font-weight:800;margin-top:3px}.eff{height:8px;border-radius:99px;background:#dcebed;overflow:hidden;margin-top:8px}.eff i{display:block;height:100%;border-radius:99px;background:var(--player2)}.razcard .eff i{background:var(--raz2)}.selection{border-radius:14px;background:#f7fbfc;padding:10px;font-size:11px;line-height:1.45}.selection b{display:block;margin-bottom:3px}.selection.valid b{color:#168b7d}.selection.invalid b{color:#bc4f5f}
.controls{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:7px;margin-top:10px}.controls button{min-height:44px;border:0;border-radius:12px;font-size:11px;font-weight:950;cursor:pointer;box-shadow:0 3px 0 rgba(32,83,96,.13)}.claim{background:var(--player);color:#153f44}.clear{background:#fff;border:1px solid #d4e5e8!important;color:var(--ink)}.hintbtn{background:#fff0a6;color:#725a00}.controls button:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}.guide{background:linear-gradient(145deg,#eefcff,#fff0f8);border:1px solid #d5ebed;border-radius:18px;padding:12px;display:flex;align-items:center;gap:10px;min-height:126px}.guide img{width:88px;height:100px;object-fit:contain}.speech{font-size:12px;font-weight:850;line-height:1.35}.speech b{display:block;color:var(--raz2);margin-bottom:4px}.rules{font-size:10px;color:var(--muted);line-height:1.5;background:#f7fbfc;border-radius:12px;padding:10px}.level-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}.level-btn{border:1px solid #d0e4e7;background:#fff;border-radius:10px;padding:8px;font-size:10px;font-weight:850;color:var(--ink);cursor:pointer}.level-btn.done{background:#e6fbf3;border-color:#92dec5}.level-btn.active{background:#173c59;color:#fff;border-color:#173c59}
.toast{position:fixed;left:50%;top:84px;transform:translate(-50%,-15px);background:#173c59;color:#fff;border-radius:14px;padding:11px 15px;font-size:11px;font-weight:900;opacity:0;pointer-events:none;transition:.2s;z-index:50;box-shadow:0 10px 24px rgba(0,0,0,.16)}.toast.show{opacity:1;transform:translate(-50%,0)}.celebrate{position:fixed;inset:0;background:rgba(11,46,64,.54);display:none;place-items:center;z-index:60;padding:20px}.celebrate.show{display:grid}.result{width:min(440px,94vw);background:#fff;border-radius:24px;padding:22px;text-align:center;box-shadow:0 22px 60px rgba(0,0,0,.22)}.result .stars{font-size:34px;color:#f0b400;letter-spacing:4px}.result h2{margin:8px 0 4px;font-size:28px}.result p{margin:0 0 16px;color:var(--muted);font-size:13px}.result button{border:0;border-radius:13px;padding:12px 16px;font-weight:950;background:#173c59;color:#fff;cursor:pointer}.footer{text-align:center;padding:18px 0 0;font-size:10px;font-weight:850;color:#266a70}.footer span{display:block}
@media(max-width:900px){.stage{grid-template-columns:1fr}.side{display:grid;grid-template-columns:1.2fr .8fr}.level-list{grid-column:1/-1}.playarea{grid-template-columns:1fr .7fr}}
@media(max-width:620px){.app{padding:8px 8px 18px}.top{border-radius:16px}.logo span{display:none}.pill{display:none}.titlebar{padding:13px 14px;border-radius:17px}.titlebar p{display:none}.titlebar h1{font-size:27px}.level-select select{max-width:155px}.stage{gap:8px}.game,.side{border-radius:18px;padding:9px}.hud{grid-template-columns:repeat(2,1fr)}.playarea{grid-template-columns:1fr}.mapbox{padding:8px}.board{max-width:100%;gap:1px}.cell{min-height:34px}.panel{grid-template-columns:1fr 1fr}.selection{grid-column:1/-1}.side{display:block}.guide{margin-bottom:9px}.level-list{margin-top:8px}.controls{grid-template-columns:1.2fr 1fr 1fr}.controls button{font-size:10px}.feedback{font-size:10px}}