:root{--ink: #172033;--paper: #fffaf2;--canvas: #f6efe5;--accent: #8f3f2b;--danger: #9f1d0e;--color-one: #ffd166;--color-two: #9ad7ff;--color-three: #c7ef8f;color:var(--ink);background:radial-gradient(circle at 18% 12%,rgba(255,209,102,.38),transparent 28rem),radial-gradient(circle at 86% 20%,rgba(154,215,255,.45),transparent 24rem),var(--canvas);font-family:Georgia,Times New Roman,serif}*{box-sizing:border-box}body{margin:0;min-width:320px}.app-shell{inline-size:min(100%,1040px);margin:0 auto;padding:clamp(32px,7vw,72px) clamp(14px,4vw,32px)}.eyebrow{color:var(--accent);font-weight:700;letter-spacing:.16em;text-transform:uppercase}h1{font-size:clamp(2.75rem,8vw,5.5rem);line-height:.9;margin:0 0 24px}#connection-status{display:inline-flex;border:2px solid var(--ink);border-radius:999px;padding:10px 16px;font-weight:700}#connection-status[data-state=connected]{background:#d8f4c3}#connection-status[data-state=disconnected]{background:#ffd3c7}.panel{background:var(--paper);border:2px solid var(--ink);border-radius:clamp(18px,4vw,28px);box-shadow:clamp(4px,1vw,8px) clamp(4px,1vw,8px) 0 var(--ink);margin-top:32px;overflow-wrap:anywhere;padding:clamp(16px,4vw,28px)}button{background:var(--ink);border:2px solid var(--ink);border-radius:12px;color:var(--paper);cursor:pointer;font:inherit;font-weight:800;padding:10px 14px}input{background:var(--paper);border:2px solid var(--ink);border-radius:12px;color:var(--ink);font:inherit;font-weight:800;min-width:0;padding:10px 12px}#room-code{letter-spacing:.12em;text-transform:uppercase}input::placeholder{color:var(--accent);opacity:1}button:focus-visible,a:focus-visible,input:focus-visible{outline:4px solid var(--accent);outline-offset:3px}.landing-actions{align-items:start;display:grid;gap:22px}.create-form,.join-form{display:grid;gap:10px}.join-form{border-top:2px solid rgba(23,32,51,.22);padding-top:20px}.create-form label,.join-form label,.share-label{font-weight:800}.join-row{display:grid;gap:10px;grid-template-columns:minmax(0,1fr) auto}.rules-summary{font-size:1.08rem;line-height:1.5;max-width:42rem}.share-card{background:var(--canvas);border:2px dashed var(--ink);border-radius:18px;display:grid;gap:8px;margin:18px 0;padding:16px}.share-card p{margin:0}.selectable-link{color:var(--accent);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all}.room-status{font-size:1.2rem;font-weight:800}.error{color:var(--danger);font-weight:800}.board{display:grid;gap:clamp(6px,2vw,10px);grid-template-columns:repeat(3,minmax(0,1fr));inline-size:min(100%,360px);margin-top:20px}.square{aspect-ratio:1;border-color:var(--ink);box-shadow:clamp(2px,1vw,4px) clamp(2px,1vw,4px) 0 var(--ink);color:var(--ink);font-size:clamp(2rem,14vw,4rem);line-height:1;min-width:0;padding:0}.square:disabled{cursor:not-allowed;opacity:1}.color-1{background:var(--color-one)}.color-2{background:var(--color-two)}.color-3{background:var(--color-three)}.winning{outline:5px solid var(--accent);outline-offset:-7px}.game-over-note{font-weight:700}@media(max-width:420px){.join-row{grid-template-columns:1fr}.join-row button{width:100%}}@media(min-width:1024px){.panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,360px);column-gap:40px}.panel>.board{grid-column:2;grid-row:1 / span 6;margin-top:0}}