:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#202333;background:#f7f8fc;color-scheme:light dark}*{box-sizing:border-box}body{margin:0}main{max-width:430px;margin:auto;padding:36px 24px;text-align:center}.marks{font-size:74px;line-height:1;color:#285bdb;font-weight:300}.marks span{color:#a53b6d}h1{font-size:36px;letter-spacing:-1.3px;margin:16px 0 8px}.intro{color:#62687a;margin:0 0 32px}button,input{font:inherit;min-height:52px;border:1px solid #c8ccda;border-radius:14px;padding:12px 20px}button{cursor:pointer;background:#fff;color:inherit;touch-action:manipulation}.primary{background:#285bdb;color:white;border-color:#285bdb;font-weight:600}#host{width:100%}.divider{color:#62687a;margin:24px 0}label{display:block;text-align:left;font-size:14px;margin-bottom:8px}.entry{display:flex;gap:10px}input{width:100%;min-width:0;background:#fff;color:#202333;font-size:24px;letter-spacing:5px;text-align:center}button:disabled{opacity:.45;cursor:default}button:focus-visible,input:focus-visible{outline:3px solid #a53b6d;outline-offset:3px}#room-code{font-size:36px;font-weight:650;letter-spacing:8px}#room-code small{display:block;font-size:13px;font-weight:400;letter-spacing:0;color:#62687a}#role{color:#62687a}#board{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}#board button{aspect-ratio:1;font-size:52px;line-height:1;padding:0;border-radius:16px;background:#eef1fa;border-color:transparent;font-weight:300;opacity:1}#board button[data-mark="X"]{color:#285bdb}#board button[data-mark="O"]{color:#a53b6d}#board button:disabled{cursor:default}#board button.win{background:#dce7ff}#again{margin-bottom:12px;width:100%}#exit{width:100%;background:transparent}#status{min-height:24px;font-weight:600;line-height:1.5}.small{font-size:13px;line-height:1.5;color:#62687a}[hidden]{display:none!important}@media(prefers-color-scheme:dark){:root{background:#171b28;color:#eef1ff}.intro,.small,#role,label,.divider,#room-code small{color:#abb3cc}input,button{background:#252b3d;color:#eef1ff;border-color:#525c78}.primary{background:#285bdb;border-color:#285bdb}#board button{background:#252b3d}#board button[data-mark="X"]{color:#8eafff}#board button[data-mark="O"]{color:#f49ec8}#board button.win{background:#334970}}

main{min-height:100dvh;padding: max(12px,env(safe-area-inset-top)) 20px max(12px,env(safe-area-inset-bottom))}.marks{font-size:42px}h1{font-size:28px;margin:8px 0 4px}.intro{margin:0 0 16px;font-size:14px}#room-code{font-size:28px;line-height:1.2}#role{margin:8px 0;font-size:14px}#board{width:min(100%,max(144px,calc(100dvh - 385px)));margin:12px auto;gap:6px}#board button{min-height:0;min-width:0;font-size:clamp(28px,7dvh,52px)}#again{margin-bottom:8px}#game .small{margin:8px 0;font-size:12px}#status{margin:10px 0 0;font-size:14px}#game button:not(#board button){min-height:44px;padding:10px 16px}