*{box-sizing:border-box}body{margin:0;color:#f5f0dc;background:#0c202a;font-family:ui-sans-serif,system-ui,sans-serif;min-height:100vh;background-image:radial-gradient(ellipse at 18% 18%,#1c4756 0,transparent 52%)}main{max-width:1150px;margin:auto;padding:32px 36px;display:grid;grid-template-columns:1fr 1.3fr;gap:24px 56px}header{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ffffff24;padding-bottom:22px;font-size:12px;letter-spacing:2px}.brand{font-weight:800;letter-spacing:4px}h1{font:500 clamp(38px,5vw,65px)/1.05 Georgia,serif;margin:18px 0 22px;letter-spacing:-2px}.eyebrow{font-size:10px;letter-spacing:2px;color:#95b9b9}.intro{align-self:end}.intro>p:last-child{line-height:1.6;color:#b8cccd;max-width:330px}.play{grid-column:2;grid-row:2/4;align-self:center;background:#102b35;border:1px solid #ffffff1b;box-shadow:0 28px 80px #0003;border-radius:24px;padding:24px}.toolbar{display:flex;justify-content:space-between;font-size:13px;align-items:center;margin-bottom:20px;color:#c8dada}#phase{border-radius:30px;background:#efba66;color:#29261e;padding:7px 14px;font-weight:700}#phase.blue-phase{background:#81c8e4;color:#123145}#board{display:grid;gap:7px;aspect-ratio:1;width:100%;max-width:480px;margin:auto}.tile{position:relative;border:1px solid #ffffff24;border-bottom:4px solid #0004;border-radius:10px;background:#33525a;color:#f5f0dc;display:flex;align-items:center;justify-content:center;font-size:clamp(18px,3vw,30px);min-width:0;padding:0;transition:transform .12s,background .15s}.tile.wall{visibility:hidden}.tile.amber{background:#ab7946;color:#ffe6ae}.tile.blue{background:#2d718a;color:#bcf1ff}.tile.hold{background:#6a657b}.tile.exit{background:#466e62}.tile.player{outline:3px solid #fff4c9;outline-offset:1px;box-shadow:0 0 22px #fff5a93b}.tile.legal:hover{transform:translateY(-3px);cursor:pointer;filter:brightness(1.18)}.tile:not(.legal){cursor:default}.tile .token{width:56%;height:56%;border-radius:50%;background:#f9f0c9;box-shadow:inset 0 -5px #cbb773,0 2px 9px #0005;color:#25383b;font-size:18px;display:flex;align-items:center;justify-content:center}.tile .pearl{width:26%;height:26%;background:#fff3ce;border-radius:50%;box-shadow:0 0 16px #fff6b45c}.tile .mark{position:absolute;top:3px;left:5px;font-size:10px;opacity:.8}button,select{font:inherit}button{touch-action:manipulation}.actions{display:flex;gap:7px;flex-wrap:wrap}.actions button,select{border:1px solid #ffffff35;background:transparent;color:#e1e8df;padding:9px 13px;border-radius:9px;font-size:12px;cursor:pointer}.actions button:hover{background:#ffffff12}.actions button:disabled{opacity:.35;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid #f1d890;outline-offset:3px}#next{background:#eed79b;color:#213439;font-weight:800}#status{min-height:38px;font-size:13px;line-height:1.5;color:#d7e3d8;margin:18px 0 8px}aside{max-width:330px;color:#a7c1c4;font-size:13px;line-height:1.7}h2{font-size:17px;color:#ede6d4;font-weight:500}.legend{display:grid;gap:11px;margin:22px 0}.legend span{display:flex;align-items:center;gap:10px}.legend i{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;border-radius:6px;font-style:normal}.amber{background:#ab7946}.blue{background:#2d718a}.hold{background:#6a657b;color:white}.small{font-size:11px;color:#87a8ae}label{display:flex;align-items:center;gap:10px;margin-top:24px}select{max-width:240px}option{background:#17333c}footer{grid-column:1/-1;border-top:1px solid #ffffff18;padding-top:20px;font-size:10px;letter-spacing:1px;color:#71979f;margin-top:12px}@media(max-width:760px){main{grid-template-columns:1fr;gap:12px;padding:20px;max-width:560px}.play{grid-column:1;grid-row:auto;padding:18px;border-radius:18px}.intro{padding:10px 0}.intro h1{font-size:38px;margin:9px 0}.intro h1 br{display:none}.intro p:last-child{margin:8px 0;max-width:none;font-size:13px}aside{max-width:none}.legend{grid-template-columns:1fr 1fr;gap:10px;font-size:11px;margin:12px 0}.legend span:last-child{grid-column:1/-1}header{font-size:10px}.brand{letter-spacing:2px}.tile{font-size:25px}h2{margin-bottom:3px}footer{line-height:1.6}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}