*{box-sizing:border-box}body{margin:0;background:#101619;color:#edf4ed;font:15px var(--font-game)}header{height:78px;border-bottom:1px solid #ffffff12;padding:0 4vw;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:850;letter-spacing:.1em}.brand span{font-size:10px;background:#b8d998;color:#17231c;padding:5px 8px;border-radius:4px;margin-left:12px;vertical-align:middle}a{color:inherit;text-decoration:none}.connection{display:flex;gap:22px;align-items:center;font-size:12px;color:#a4b4b9}main{max-width:1320px;margin:auto;padding:40px 4vw}.welcome{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:9vw;padding:8vh 0}h1{font-size:clamp(45px,6vw,80px);letter-spacing:-.06em;line-height:1.05;margin:20px 0 24px}.eyebrow{color:#b8d998;font-size:11px;letter-spacing:.2em;font-weight:700}p{color:#a4b4b9;line-height:1.65}button,input,select{font:inherit;border:1px solid #ffffff20;border-radius:9px;padding:12px 16px;color:#eef4ed;background:#20292e}button,a{touch-action:manipulation}button{cursor:pointer}button:hover{background:#2d393e}button:disabled{opacity:.45;cursor:default}button.primary{background:#bedc9b;color:#17231c;border-color:transparent;font-weight:750}.primary:hover{background:#d2edb6}.entry .primary{width:100%;text-align:left;padding:21px;display:flex;justify-content:space-between}form{margin-top:28px}label{display:block;font-size:12px;color:#abb9bd;margin:0 0 9px}.join{display:flex;gap:10px}input{min-width:0;flex:1;letter-spacing:.22em;text-transform:uppercase}#message{min-height:24px;color:#f9c393;margin:0 0 18px}.lobby{background:linear-gradient(120deg,#1c282c,#161d21);border:1px solid #ffffff15;padding:30px;border-radius:18px}.room-heading,.lobby-footer{display:flex;justify-content:space-between;align-items:center;gap:18px}h2{font-size:36px;letter-spacing:.15em;margin:10px 0 28px}.setup{display:grid;grid-template-columns:1fr 1.4fr;gap:35px}select{width:100%;margin-bottom:22px}.seats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.seats article{background:#10191da6;border:1px solid #ffffff10;border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:16px}.seats span{color:#8eadb6;font-size:11px;letter-spacing:.14em}.seats strong{font-size:24px;letter-spacing:-.03em}.seats small{color:#b8d998}.lobby-footer{border-top:1px solid #ffffff12;padding-top:16px;margin-top:10px}.match-bar{display:flex;align-items:center;gap:20px;font-size:12px;color:#bacbcd;margin-bottom:14px}.match-bar button{margin-left:auto}.arena{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;border:1px solid #ffffff17}canvas{width:100%;height:100%;display:block;outline:none}.score{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;pointer-events:none}.score>div{background:#111b25c9;border:1px solid #ffffff15;border-radius:10px;padding:12px 20px;display:flex;flex-direction:column;gap:8px;min-width:160px}.score>div:nth-child(2){text-align:right}.score strong{font-size:13px}.score span{font-size:23px;font-weight:800;color:#c8e0bd}.banner{position:absolute;inset:42% 10% auto;text-align:center;background:#14222bed;padding:24px;border:1px solid #ffffff20;border-radius:12px;font-size:25px;font-weight:750;white-space:pre-line}footer{display:flex;justify-content:space-between;gap:12px;padding:16px 0;color:#8ca2ae;font-size:11px}[hidden]{display:none!important}:focus-visible{outline:2px solid #bedc9b;outline-offset:3px}@media(max-width:760px){header{padding:12px;height:auto;gap:12px}.connection{gap:10px}.connection>a{display:none}.welcome,.setup{grid-template-columns:1fr;gap:22px}.welcome{padding-top:10px}.lobby{padding:18px}.room-heading{align-items:flex-start}.room-heading button{margin-bottom:6px}.seats article{padding:15px}.score{top:8px;left:8px;right:8px}.score>div{min-width:100px;padding:8px}.score span{font-size:15px}.banner{font-size:16px;padding:15px}footer{flex-direction:column}}
/* The room is a place to meet; the match occupies the entire screen. */
body{background:linear-gradient(#08172caa,#081425ee),url('/assets/ui/create/skyroom.webp') center/cover fixed}.welcome h1{color:#e7f3ff}.lobby{isolation:isolate;position:relative;overflow:hidden;background:#102137e6}.lobby-world{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;opacity:.18;pointer-events:none}.setup{grid-template-columns:minmax(210px,.6fr) minmax(0,1.4fr)}.seats{gap:18px}.seats article{min-height:290px;position:relative;overflow:hidden;justify-content:flex-end;background:linear-gradient(transparent,#0a182cf2);border:1px solid #c6e2ff25}.lobby-portrait{position:absolute;top:12px;left:10%;width:80%;height:190px;object-fit:contain;pointer-events:none;z-index:-1;filter:drop-shadow(0 8px 20px #0004)}.connection-options{margin-top:18px;font-size:12px;color:#abc3db}.connection-options summary{cursor:pointer;padding:10px 0}.match-playing{height:100dvh;overflow:hidden;display:flex;flex-direction:column}.match-playing>header{min-height:52px;height:52px;padding:8px 22px;flex-shrink:0;border:0}.match-playing>main{padding:0;max-width:none;margin:0;flex:1;min-height:0;display:flex;flex-direction:column}.match-playing #message{display:none}.match-playing #match{position:relative;display:flex;flex-direction:column;flex:1;min-height:0}.match-playing .match-bar{height:42px;min-height:42px;padding:0 22px;margin:0;background:#0a1a2d;color:#a1bfd6}.match-playing .arena{flex:1;min-height:0;aspect-ratio:auto;border:0;border-radius:0}.match-playing footer{padding:10px 22px;margin:0;height:34px;min-height:34px;font:11px inherit;background:#0a1a2d}.match-playing .connection .account-link,.match-playing .connection>a{display:none}.score>div{backdrop-filter:blur(8px);background:#0b1f35c9;border:1px solid #c8e1fa25}.banner{background:#0a1b30db;border-color:#c9e6ff30;backdrop-filter:blur(12px)}
@media(max-width:760px){.setup{grid-template-columns:1fr}.seats article{min-height:245px}.lobby-portrait{height:150px}.match-playing>header{padding:8px 12px}.match-playing header .smashup-context{display:none}.match-playing .match-bar{padding:0 12px;gap:10px;font-size:10px}.match-playing .match-bar button{font-size:11px;padding:7px 10px}.match-playing footer{display:none}.match-playing .score>div{min-width:0;width:42%;padding:8px 10px}.match-playing .score strong{font-size:11px}.match-playing .score span{font-size:19px}}