.online-cta{background:#2a2520;border:1px solid #b58a55;color:#f0c78d;font-size:13px;white-space:nowrap;padding:11px 15px}.online-cta span{margin-left:8px}#online-panel{border:1px solid #665038;background:linear-gradient(115deg,#241b16,#121314);padding:22px;margin-bottom:20px;border-radius:6px}.online-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.online-heading h2{font-size:24px;margin:0}.online-heading .eyebrow{margin:0 0 6px}#connection-badge{font-size:11px;color:#b1a99e;border:1px solid #4f463c;border-radius:20px;padding:6px 10px;white-space:nowrap}#online-panel[data-state=connected] #connection-badge,#online-panel[data-state=playing] #connection-badge{color:#a5d9a2;border-color:#426247}.online-description{font-size:13px;line-height:1.8;color:#bcb4a8;max-width:720px}#room-entry{display:flex;align-items:flex-end;gap:24px;margin:20px 0}.join-row{flex:1;min-width:0}.join-row>div,.copy-row{display:flex;gap:10px;margin-top:7px}#online-panel label{font-size:12px;color:#c3b8aa}#online-panel input,#online-panel select{min-width:0;flex:1;background:#101113;color:#f1dfc6;border:1px solid #554738;border-radius:4px;padding:11px 10px;font:13px system-ui;width:100%}.secondary{background:#282522;border:1px solid #5b4c3a;color:#e7d3b6;padding:10px 14px;font-size:12px}#online-status{font-size:13px;line-height:1.6;color:#ecc994;min-height:22px;margin:15px 0}.online-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.online-controls #match-info{color:#a9b9a6;font-size:12px;flex:1;min-width:160px}.access-note{font-size:11px;color:#a79b8a}#guest-setup{max-width:560px;margin-top:16px}#remote-wait{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:25px;color:#bcb5ab;background:radial-gradient(ellipse,#24201b,#0a0c10)}#remote-wait h2{color:#e9c08a}#remote-wait p{font-size:13px;line-height:1.8}#remote-audio{position:absolute;bottom:12px;right:12px;font-size:12px;z-index:5}#net-paused{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:#15110ee8;border:1px solid #c19865;border-radius:5px;padding:10px 16px;color:#f1cc9c;font-size:12px;text-align:center;max-width:90%;z-index:4}#touch-controls{display:flex;justify-content:space-between;gap:20px;margin:16px 0;touch-action:none;user-select:none}#touch-controls button{min-height:46px;min-width:45px;padding:9px 12px;background:#252526;color:#e8c798;border:1px solid #5f5140;font-size:12px;touch-action:none}#touch-controls button:active{background:#6b4c27}.dpad{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.dpad button:first-child{grid-column:2}.dpad button:nth-child(2){grid-column:1}.firepad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}body[data-online-role=guest] #canvas{visibility:hidden}body[data-online-role=guest] #new-game{display:none}#online-panel[data-state=playing] .online-description{display:none}
@media(max-width:600px){header{align-items:flex-start;flex-wrap:wrap}.online-cta{font-size:12px}#online-panel{padding:16px 12px}.online-heading{align-items:flex-start;flex-wrap:wrap}.online-heading h2{font-size:21px}#room-entry{flex-direction:column;align-items:stretch;gap:16px}.copy-row,.join-row>div{flex-wrap:wrap}.copy-row input,.join-row input{flex-basis:180px}#touch-controls{gap:10px}.firepad{grid-template-columns:repeat(2,1fr)}#touch-controls button{padding:9px 8px}.screen:has(#remote-wait:not([hidden])){min-height:240px;aspect-ratio:4/3}}