:root{--topbar-h:60px}body{background-color:#ecebe8;margin:0;font-family:Inter,sans-serif}header{height:var(--topbar-h);align-items:center;padding:0 16px;display:flex}nav{align-items:center;gap:20px;display:flex}.navlink{height:var(--topbar-h);color:#4d4d4d;align-items:center;font-family:sans-serif;line-height:1;text-decoration:none;display:inline-flex}.navlink-title{font-family:serif;font-size:40px;line-height:1;transform:translateY(-4px)}.app-body{height:calc(100vh - var(--topbar-h));display:flex}.app-main{flex:1;overflow:auto;container-type:inline-size}.debug-panel{color:#d4d4d4;background:#1e1e1e;flex-direction:column;flex-shrink:0;font-family:monospace;font-size:12px;display:flex;overflow:hidden}.debug-panel--open{width:380px}.debug-panel--closed{justify-content:flex-start;align-items:center;width:28px;padding-top:8px}.debug-panel__toggle{color:#aaa;cursor:pointer;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:1px;background:0 0;border:1px solid #555;border-radius:3px;padding:4px 3px;font-family:monospace;font-size:10px}.debug-panel__toggle:hover{color:#fff;border-color:#888}.debug-panel__header{border-bottom:1px solid #333;flex-shrink:0;align-items:center;gap:8px;padding:6px 10px;display:flex}.debug-panel__title{color:#fff;font-weight:700}.debug-panel__count{color:#888;flex:1}.debug-panel__close{color:#888;cursor:pointer;background:0 0;border:none;padding:0 2px;font-size:14px;line-height:1}.debug-panel__close:hover{color:#fff}.debug-panel__list{flex:1;overflow-y:auto}.debug-panel__empty{color:#666;padding:12px;font-style:italic}.debug-panel__entry{border-bottom:1px solid #2a2a2a;padding:6px 10px}.debug-panel__entry--sent .debug-panel__arrow{color:#569cd6}.debug-panel__entry--received .debug-panel__arrow{color:#4ec9b0}.debug-panel__arrow{margin-right:6px}.debug-panel__time{color:#888;margin-right:8px}.debug-panel__raw{white-space:pre-wrap;word-break:break-all;color:#ce9178;margin:4px 0 0;font-size:11px}:root{--max-board-size:7in;--sidebar-width:3in;--surface:white;--gap:clamp(8px, 1.5vw, 16px)}.layout{gap:var(--gap);padding:var(--gap);grid-template-columns:1fr;grid-template-areas:"game""moves""chat";place-items:stretch center;display:grid}@media (width>=800px){.layout{grid-template-columns:var(--sidebar-width) fit-content(var(--max-board-size)) var(--sidebar-width);grid-template-areas:"chat game moves";justify-content:center;margin:0 auto}}.pane{background:var(--surface);flex-direction:column;display:flex}.pane-game{max-width:var(--max-board-size);aspect-ratio:1;grid-area:game}.pane-moves{grid-area:moves}.pane-chat{grid-area:chat}.chat-panel{flex-direction:column;flex:1;padding-right:20px;display:flex;overflow:hidden}.chat-messages{flex-direction:column;flex:1;gap:4px;padding:8px 0;display:flex;overflow-y:auto}.chat-message{border-left:3px solid #0000;padding:4px 8px}.chat-message--own{border-left-color:#4caf50}.chat-message--opponent{border-left-color:#ff9800}.move-panel{width:var(--sidebar-width);background-color:#fff;flex-direction:column;flex:1;justify-content:center;align-items:stretch;display:flex;overflow:hidden}.results-panel{flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex}.game-actions{flex-direction:row;justify-content:center;gap:clamp(8px,4cqw,30px);display:flex}.resign-button-active{color:#fff;background-color:#e3672d;border:1px solid #fff}.postgame-button{background-color:#fff;border:0;height:60px}.postgame-button:hover{color:#fff;background-color:#8dc884}.not-found{justify-content:center;display:flex}.home-layout{flex-direction:row;justify-content:center;align-items:center;display:flex}.server-stats{color:#888;gap:16px;font-size:.9rem;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%)}