:root{--paper: #f7f7f2;--ink: #101427;--line: rgba(255, 255, 255, .16);--panel: rgba(255, 255, 255, .08);--panel-strong: rgba(255, 255, 255, .12)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%}body{font-family:Trebuchet MS,Lucida Sans Unicode,Segoe UI,sans-serif;color:var(--paper);background:radial-gradient(circle at 18% 12%,#2c2960,#121025,#0b0a16)}#app{width:100%;min-height:100%;display:flex;flex-direction:column}.app-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 18px 0}.app-header h1{margin:0;font-size:1.5rem;letter-spacing:.06em}#status{margin:0;min-width:260px;white-space:pre-wrap;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:#07091673;font-size:.8rem}.page{display:none;padding:14px 18px 18px;min-height:0}.page.active{display:block}.panel{border-radius:14px;border:1px solid var(--line);background:var(--panel);padding:12px}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.panel-header h2{margin:0;font-size:.9rem;letter-spacing:.14em;text-transform:uppercase}.two-col{display:grid;grid-template-columns:minmax(320px,1fr) minmax(280px,.8fr);gap:12px}.stack{display:flex;flex-direction:column;gap:8px}.rooms-list{display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto}.room-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}.room-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.room-title{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-subtitle{font-size:.82rem;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.checkbox-row{display:flex;align-items:center;gap:8px;font-size:.85rem}.checkbox-row input{width:15px;height:15px}.field-group{display:flex;flex-direction:column;gap:4px}.row{display:flex;gap:8px;align-items:center}input,select,button{border-radius:10px;border:1px solid rgba(255,255,255,.22);background:#ffffff1a;color:var(--paper);padding:8px 10px;font:inherit}button{cursor:pointer;transition:transform .12s ease,background .12s ease}button:hover:enabled{transform:translateY(-1px);background:#6ee6c233}button:disabled{cursor:not-allowed;opacity:.5}.room-panel{max-width:620px;display:flex;flex-direction:column;gap:10px}.room-id-chip{font-size:.8rem;opacity:.9;border:1px solid var(--line);border-radius:999px;padding:4px 8px;background:#ffffff14}.room-start-hint{font-size:.85rem;color:#d6d7e8}.player-list{display:flex;flex-direction:column;gap:6px}.player-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;border:1px solid var(--line);background:#080b1c73}.match-shell{display:flex;flex-direction:column;gap:12px;min-height:calc(100vh - 112px)}.match-hud{order:2;border-radius:14px;border:1px solid var(--line);background:var(--panel);padding:12px;display:flex;flex-direction:column;gap:10px}.hud-stats{border-radius:10px;border:1px solid var(--line);background:#07091673;padding:8px 10px;white-space:pre-wrap;font-size:.86rem}.cell-info{border-radius:10px;border:1px solid var(--line);background:#07091659;padding:8px 10px;white-space:pre-wrap;font-size:.86rem;line-height:1.25rem}.match-canvas-wrap{order:1;border-radius:14px;border:1px solid var(--line);overflow:hidden;min-height:620px}#game-canvas{width:100%;height:100%;display:block;touch-action:none;-webkit-user-select:none;user-select:none}.post-panel{max-width:620px;display:flex;flex-direction:column;gap:10px}.post-summary{margin:0;line-height:1.45}@media(max-width:980px){.two-col{grid-template-columns:1fr}.match-shell{min-height:auto}.match-canvas-wrap{min-height:420px}.app-header{flex-direction:column}#status{width:100%;min-width:0}}