*{box-sizing:border-box} :root{font-family:'Segoe UI',Inter,system-ui,sans-serif;color:#eef1f4;background:#0c1016;--accent:#d5fb60;--muted:#8c97a7;--line:#29323e}body{margin:0;background:radial-gradient(ellipse at 75% 4%,#202a243d,transparent 40%),#0c1016}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button{cursor:pointer;transition:background .18s,transform .18s;border:0}button:disabled{opacity:.4;cursor:not-allowed}button:not(:disabled):active{transform:translateY(1px)}button:focus-visible,a:focus-visible{outline:2px solid var(--accent)}button[hidden],[hidden]{display:none!important}a{color:inherit;text-decoration:none}.top{height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 4%;border-bottom:1px solid var(--line);background:#0c1016b5;gap:20px}.brand{display:flex;gap:13px;align-items:center;font-weight:800;letter-spacing:1.5px;font-size:16px}.brand small{display:block;font-size:9px;letter-spacing:1.5px;color:var(--muted);margin-top:6px}.brand-mark{background:var(--accent);color:#182008;font-size:28px;font-style:italic;letter-spacing:-4px;padding:4px 14px 7px 9px;border-radius:11px;line-height:34px}.brand-mark span{font-size:18px;vertical-align:top;margin-left:5px}.header-right{display:flex;align-items:center;gap:18px}.connection{font-size:12px;color:var(--muted)}.connection.online{color:var(--accent)}main{max-width:1510px;margin:auto;padding:0 4%}.intro{display:flex;align-items:center;justify-content:space-between;padding:45px 0 34px;gap:30px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--accent);font-weight:700;margin:0 0 13px}h1{font-size:clamp(32px,3.5vw,53px);font-weight:750;letter-spacing:-2px;line-height:1.08;margin:0}h1 em{font-style:normal;color:var(--accent)}.intro-copy{color:var(--muted);font-size:14px;line-height:1.8;padding-right:25px}.arena-layout{display:grid;grid-template-columns:268px minmax(0,1fr);gap:20px}.panel{background:#141a22;border:1px solid var(--line);border-radius:17px;overflow:hidden}.lobby{padding:23px 21px;align-self:start}.section-label{display:flex;align-items:center;gap:7px;letter-spacing:1px;font-size:10px;font-weight:700}.section-label>span:last-child{margin-left:auto;color:#556372}.live-dot{display:inline-block;width:6px;height:6px;background:var(--accent);border-radius:50%;margin-right:3px;box-shadow:0 0 10px #d5fb6030}.profile-summary{display:flex;gap:12px;align-items:center;margin:25px 0}.avatar{display:grid;place-items:center;background:#242d38;border:1px solid #3d4858;border-radius:50%;width:38px;height:38px;font-weight:700;color:var(--accent);flex-shrink:0}.profile-summary strong{display:block;font-size:14px;overflow-wrap:anywhere}.profile-summary small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.primary,.secondary,.subtle,.square,.icon-button{border-radius:8px;padding:12px 15px;font-size:12px;font-weight:650}.primary{background:var(--accent);color:#1a2508;display:flex;align-items:center;justify-content:space-between;gap:16px}.primary:not(:disabled):hover{background:#e4ff97}.secondary,.square{color:#e3e8ed;background:#232d39;border:1px solid #394452}.secondary:not(:disabled):hover,.square:hover{background:#344052}.subtle,.icon-button{background:transparent;color:#b9c3cf}.subtle:hover,.icon-button:hover{background:#29333f}.lobby>.primary,.practice>.secondary{width:100%}.divider{display:flex;align-items:center;gap:10px;color:#687485;font-size:10px;margin:21px 0}.divider:before,.divider:after{content:'';height:1px;background:var(--line);flex:1}label{display:block;font-size:11px;color:#b9c2cc;margin-bottom:8px}.input-row{display:flex;gap:7px}input,select{background:#0c1118;color:#edf1f4;border:1px solid #323e4e;border-radius:8px;min-width:0;padding:11px 12px;width:100%;font-size:13px}input:focus,select:focus{outline:2px solid #a4c64e;outline-offset:1px}#code{text-transform:uppercase;letter-spacing:3px}.square{font-size:18px;padding:6px 14px}.practice{border-top:1px solid var(--line);margin-top:25px;padding-top:22px}h2{font-size:16px;margin:0 0 8px}.practice p{font-size:11px;line-height:1.7;color:var(--muted);margin:0 0 17px}.practice select{margin-bottom:10px}.controls-mini{border-top:1px solid var(--line);margin-top:23px;padding-top:20px;font-size:11px;color:var(--muted)}.controls-mini>span{font-size:9px;letter-spacing:1.5px}.controls-mini p{line-height:2.6;margin:10px 0 4px}kbd{border:1px solid #445060;background:#26303c;border-radius:3px;padding:2px 5px;font:10px Arena,system-ui;color:#e3e8ed}small{display:block;color:var(--muted);font-size:11px;line-height:1.6}.text-button{padding:5px 0;background:none;color:var(--accent);font-size:11px;margin:4px 0 8px;text-align:left}.arena{align-self:start}.arena-toolbar{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid var(--line);gap:15px;min-height:69px}.arena-toolbar strong{font-size:10px;letter-spacing:1.2px}.arena-toolbar #room-mode{display:block;font-size:10px;color:var(--muted);padding:5px 0 0 14px}.toolbar-buttons{display:flex;align-items:center;gap:5px}.toolbar-buttons button{font-size:10px;padding:9px}.toolbar-buttons .icon-button{font-size:23px;line-height:20px}.players{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:14px 18px}.player{padding:10px 11px;background:#1a232e;border:1px solid #2d3947;border-radius:8px;min-width:0}.player.you{border-color:#809940;background:#222b20}.player.eliminated{opacity:.45}.player-top{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:8px;color:#9cabbc;text-transform:uppercase;letter-spacing:1px}.player.you .player-top{color:var(--accent)}.player strong{display:block;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:7px 0}.player small{font-size:9px}.player .streak{color:#f2ba71}.screen{position:relative;background:#080c11;aspect-ratio:384/224;margin:0 18px;border:1px solid #29313d;border-radius:8px;overflow:hidden}canvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.empty{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;background:radial-gradient(ellipse at center,#2733236b 0%,transparent 70%)}.empty .eyebrow{font-size:8px;letter-spacing:2.3px;margin:23px 0 13px}.empty h2{font-size:clamp(18px,2.4vw,33px);letter-spacing:-.8px;line-height:1.15}.empty p:last-child{color:var(--muted);font-size:11px;line-height:1.8;margin:7px 0}.gem-art{display:flex;gap:12px;align-items:center;height:65px}.gem-art i{height:43px;width:43px;border-radius:10px;background:linear-gradient(140deg,#c6ee50 2%,#435226 100%);border:1px solid #ceef7c;transform:rotate(45deg);box-shadow:inset 5px 5px 0 #ffffff22,0 8px 35px #c5ff3020}.gem-art i:nth-child(2){height:60px;width:60px;background:linear-gradient(140deg,#869bdd,#2e395e);border-color:#98a9e0;transform:rotate(45deg) translateY(-7px);margin:0 9px}.gem-art i:last-child{background:linear-gradient(140deg,#e9b989,#695237);border-color:#e4bf90}.match-bar{display:flex;align-items:center;justify-content:space-between;padding:17px 18px;gap:10px;min-height:65px}.match-bar>span{font-size:10px;line-height:1.6;color:var(--muted);max-width:55%}.match-bar>div{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}.compact{padding:9px 12px;font-size:10px}.match-bar .subtle{font-size:9px;padding:8px}.performance{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:11px 18px;color:#748398;font-size:9px;letter-spacing:.4px}.result{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#080e18c4;text-align:center;padding:20px;backdrop-filter:blur(4px)}.result span{font-size:10px;letter-spacing:3px;color:var(--accent)}.result h2{font-size:36px;margin:15px 0 2px}.result p{font-size:12px;color:#b8c4d5;line-height:1.7}.ranking{margin-top:24px;padding:25px 28px}.ranking-heading{display:flex;justify-content:space-between;align-items:center}.ranking .eyebrow{font-size:8px;margin-bottom:8px}.ranking h2{font-size:22px;letter-spacing:-.6px}.ranking h2 span{font-size:8px;border:1px solid #3b4553;border-radius:4px;color:#9fadb9;letter-spacing:1px;padding:4px 6px;vertical-align:middle;margin-left:9px}.ranking-note{color:var(--muted);font-size:11px;margin:9px 0 20px}.table-scroll{overflow:auto}table{border-collapse:collapse;width:100%;white-space:nowrap;text-align:left}th{font-size:8px;color:#8492a4;letter-spacing:1px;font-weight:500;padding:12px 10px;border-bottom:1px solid var(--line)}td{font-size:13px;padding:13px 10px;border-bottom:1px solid #222c38}td:first-child{color:var(--accent);font-weight:700}td:nth-child(5){color:#eac181}.ranking-empty{padding:18px;text-align:center;color:#6f7d8e;font-size:12px}footer{display:flex;justify-content:space-between;gap:20px;color:#5f6c7e;font-size:9px;padding:25px 0 30px}dialog{border:1px solid #3b495b;border-radius:18px;background:#171e28;color:#eff3f5;padding:32px;width:min(480px,calc(100% - 30px));max-height:90vh}dialog::backdrop{background:#03070ccd;backdrop-filter:blur(5px)}dialog h2{font-size:25px;margin-bottom:15px}dialog p{font-size:12px;color:#aab5c3;line-height:1.7}dialog label{margin-top:18px}dialog .primary{width:100%;justify-content:center}dialog .close{position:absolute;right:10px;top:10px;background:none;color:#aab4c1;font-size:23px}dialog .text-button{display:block;margin:18px 0}dialog small{font-size:10px}.form-error{color:#ffb2a5;min-height:15px}.mapping{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.notice{background:#293322;border:1px solid #667942;border-radius:9px;padding:12px 17px;font-size:12px;line-height:1.6;margin-bottom:16px}.notice.error{background:#392822;border-color:#885445;color:#ffd7c6}.arena:fullscreen{background:#0c1016;border:0;border-radius:0;display:flex;flex-direction:column;justify-content:center}.arena:fullscreen .screen{max-height:76vh;width:auto;max-width:100%;align-self:center;height:76vh}.arena:fullscreen .players{margin:0 auto;width:min(130vh,100%)}@media(min-width:1600px){.screen{min-height:435px}}@media(max-width:1000px){main{padding:0 22px}.top{padding:0 22px}.arena-layout{grid-template-columns:230px minmax(0,1fr);gap:14px}.lobby{padding:20px 15px}.intro-copy{font-size:12px;padding:0}.players{padding:12px 10px;gap:5px}.player{padding:8px}.screen{margin:0 10px}.empty .eyebrow{margin:14px 0 7px}.gem-art{transform:scale(.75);height:50px}.empty h2{font-size:23px}.match-bar{flex-wrap:wrap;padding:13px 10px}.match-bar>span{max-width:100%}.match-bar>div{justify-content:flex-start}.arena-toolbar{padding:13px 10px}.arena-toolbar strong{font-size:9px}.header-right{gap:5px}.header-right button{font-size:10px}}@media(max-width:730px){.top{height:auto;min-height:80px;padding:16px;flex-wrap:wrap;gap:12px}.brand{font-size:13px}.brand small{font-size:7px}.header-right{margin-left:auto}.intro{padding:29px 0 25px}.intro-copy{display:none}h1{font-size:36px}.arena-layout{display:flex;flex-direction:column}.lobby{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}.section-label,.profile-summary{grid-column:1/-1}.profile-summary{margin:0}.lobby .divider{display:none}.lobby .primary{align-self:end}.practice{margin:0;padding:12px 0 0}.controls-mini{margin:0;padding-top:15px}.lobby form{align-self:end}.practice h2{font-size:13px}.practice p{font-size:10px}.arena{width:100%;order:-1}.players{padding:10px}.player strong{font-size:12px}.player small{font-size:8px}.ranking{padding:20px 14px}.ranking h2{font-size:19px}.ranking h2 span{display:block;width:max-content;margin:8px 0 0}.ranking-note{line-height:1.7}.empty h2{font-size:24px}.empty .gem-art{display:none}.empty .eyebrow{font-size:7px}.empty p:last-child{font-size:10px}footer{flex-direction:column;gap:8px;line-height:1.7}.connection{font-size:10px}.arena-toolbar{gap:5px}.toolbar-buttons{gap:0}.toolbar-buttons button{padding:7px}.ranking-heading>button{font-size:10px}}