:root{font-family:system-ui,Yu Gothic UI,sans-serif;color:#17332f;background:#eff3ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}.page{max-width:1440px;margin:auto;padding:32px clamp(15px,3vw,54px)}.masthead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:34px}.eyebrow,.section-label{font-size:11px;letter-spacing:.17em;font-weight:850;color:#2f786a}.masthead h1{font-size:clamp(24px,3vw,40px);letter-spacing:-.045em;line-height:1.2;margin:10px 0}.status{flex-shrink:0;border:1px solid #a7b9af;border-radius:99px;padding:8px 12px;background:#fafcf9;color:#56716b;font-size:13px;font-weight:700}.status.online{border-color:#78ae90;color:#25684b;background:#e0f2e8}.layout{display:grid;grid-template-columns:minmax(400px,1.2fr) minmax(335px,.8fr);gap:clamp(16px,3vw,42px);align-items:start}.scene{min-width:0}.board{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:repeat(11,minmax(0,1fr));aspect-ratio:1;max-width:min(700px,100%);border:8px solid #21453f;background:#d9e9d6;box-shadow:0 24px 45px #183a3225;position:relative;border-radius:10px;overflow:hidden}.tile{border:1px solid #94b2a3;font-size:clamp(8px,1vw,13px);background:#f8f8ee;display:flex;align-items:flex-start;padding:3px;min-width:0}.tile:nth-of-type(3n){background:#dbe7e2}.tile:nth-of-type(5n){background:#dce9cf}.tile-0{grid-column:11;grid-row:11}.tile-1{grid-column:10;grid-row:11}.tile-2{grid-column:9;grid-row:11}.tile-3{grid-column:8;grid-row:11}.tile-4{grid-column:7;grid-row:11}.tile-5{grid-column:6;grid-row:11}.tile-6{grid-column:5;grid-row:11}.tile-7{grid-column:4;grid-row:11}.tile-8{grid-column:3;grid-row:11}.tile-9{grid-column:2;grid-row:11}.tile-10{grid-column:1;grid-row:11}.tile-11{grid-column:1;grid-row:10}.tile-12{grid-column:1;grid-row:9}.tile-13{grid-column:1;grid-row:8}.tile-14{grid-column:1;grid-row:7}.tile-15{grid-column:1;grid-row:6}.tile-16{grid-column:1;grid-row:5}.tile-17{grid-column:1;grid-row:4}.tile-18{grid-column:1;grid-row:3}.tile-19{grid-column:1;grid-row:2}.tile-20{grid-column:1;grid-row:1}.tile-21{grid-column:2;grid-row:1}.tile-22{grid-column:3;grid-row:1}.tile-23{grid-column:4;grid-row:1}.tile-24{grid-column:5;grid-row:1}.tile-25{grid-column:6;grid-row:1}.tile-26{grid-column:7;grid-row:1}.tile-27{grid-column:8;grid-row:1}.tile-28{grid-column:9;grid-row:1}.tile-29{grid-column:10;grid-row:1}.tile-30{grid-column:11;grid-row:1}.tile-31{grid-column:11;grid-row:2}.tile-32{grid-column:11;grid-row:3}.tile-33{grid-column:11;grid-row:4}.tile-34{grid-column:11;grid-row:5}.tile-35{grid-column:11;grid-row:6}.tile-36{grid-column:11;grid-row:7}.tile-37{grid-column:11;grid-row:8}.tile-38{grid-column:11;grid-row:9}.tile-39{grid-column:11;grid-row:10}.board-center{grid-column:2/11;grid-row:2/11;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(circle at center,#e9f6e6,#c8e1d3);min-width:0}.board-center>span{font-size:clamp(14px,2.7vw,39px);font-weight:300;letter-spacing:.15em}.board-center>strong{font-size:clamp(35px,7vw,100px);line-height:1;letter-spacing:-.09em;color:#275c51}.board-center p{letter-spacing:.08em;font-size:12px;color:#4c7069}.token-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.token,.avatar{border:2px solid #fff;box-shadow:0 2px 6px #0002;font-size:11px;font-weight:800;display:grid;place-items:center;color:#fff}.token{height:28px;width:28px;border-radius:50%}.avatar{width:36px;height:36px;border-radius:13px;flex-shrink:0}.p1{background:#dd795b}.p2{background:#498db2}.p3{background:#9b79c0}.p4{background:#45956f}.p5{background:#b68b34}.p6{background:#ad667e}.caption,.small{font-size:12px;color:#647e75}.panel{background:#fff;padding:clamp(22px,3vw,38px);border-radius:21px;box-shadow:0 20px 45px #2e5b4d14;border:1px solid #dee7df}.panel h2{font-size:clamp(24px,2.5vw,34px);margin:7px 0 10px;letter-spacing:-.045em}.panel p{line-height:1.7;color:#5a746a}.panel strong{color:#1f4c3d}.panel label{display:block;margin:22px 0 7px;font-size:13px;font-weight:700}.panel input{display:block;width:100%;font:inherit;border:1px solid #9cafaa;border-radius:10px;padding:14px}.panel button{cursor:pointer;border:0;border-radius:11px;padding:15px 18px;background:#245b4d;color:#fff;font:inherit;font-weight:800;min-height:48px;margin-top:16px;width:100%}.panel button:disabled{background:#a5b7ae;cursor:not-allowed}.panel input:focus-visible,.panel button:focus-visible{outline:3px solid #ebaa4b;outline-offset:3px}.alert{color:#ab3535!important;background:#fff2ed;padding:12px 16px;border-radius:10px;overflow-wrap:anywhere}.placeholder-pulse{border:2px dashed #8fb8a7;padding:35px 15px;text-align:center;border-radius:12px;color:#477866}.list{margin-top:24px;border-top:1px solid #d9e6df}.player{display:flex;align-items:center;gap:11px;border-bottom:1px solid #e3ebe5;padding:11px 0}.player>div{min-width:0;flex:1}.player strong{display:block;font-size:14px;overflow-wrap:anywhere}.player small{display:block;color:#6c8a7d}.readiness{font-size:12px;white-space:nowrap;color:#417763}footer{margin-top:35px;font-size:12px;color:#678378;text-align:center}@media(max-width:950px){.layout{grid-template-columns:1fr}.board{margin:auto;max-width:660px}.panel{max-width:660px;margin:auto;width:100%}}@media(max-width:600px){.masthead{align-items:flex-start;flex-direction:column}.board{border-width:4px}.page{padding:18px 12px}.caption{text-align:center}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}