:root{color-scheme:dark;--bg:#0b1019;--panel:#121a28;--line:#253145;--text:#eef3fd;--muted:#9caac1;--mint:#66e8c6;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--mint);outline-offset:4px}[hidden]{display:none!important}.mast{height:98px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:16px}.brand{display:flex;gap:13px;align-items:center;font-size:18px;font-weight:850;letter-spacing:2px}.brand small{display:block;font-size:10px;letter-spacing:4px;color:var(--muted);margin-top:5px}.brand-mark{display:flex;align-items:center;justify-content:center;width:46px;height:46px;background:var(--mint);color:var(--bg);font-size:31px;letter-spacing:-4px;border-radius:11px}.brand-mark span{font-size:24px}.connection{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px}.led{height:7px;width:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 12px #66e8c677}.button{padding:12px 18px;border:1px solid var(--line);border-radius:9px;background:#1c293d;color:var(--text);font-weight:650;font-size:13px;transition:background .15s,transform .15s}.button:hover{background:#2c3b53}.button.primary{background:var(--mint);border-color:var(--mint);color:var(--bg)}.button.primary:hover{background:#94f1d9}.button.ghost{background:transparent}.button.active{border-color:var(--mint);color:var(--mint)}main{max-width:1580px;margin:auto;padding:0 5vw}.intro{display:flex;justify-content:space-between;align-items:center;padding:42px 0 34px}.eyebrow{font-size:10px;letter-spacing:2.5px;font-weight:750;color:var(--mint);margin:0 0 12px}h1{font-size:clamp(34px,4vw,56px);letter-spacing:-2px;margin:0 0 10px;font-weight:800}.intro p:last-child{font-size:15px;color:var(--muted);margin:0}.intro-stat{border-left:1px solid var(--line);padding-left:30px;display:flex;align-items:center;gap:20px}.intro-stat strong{font-size:52px;color:var(--mint);font-weight:750;letter-spacing:-2px}.intro-stat span{width:90px;font-size:10px;letter-spacing:2px;line-height:1.8;color:var(--muted)}.toolbar{display:flex;gap:12px;align-items:center}.search{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);padding:0 15px;border-radius:9px;flex:1;max-width:520px}.search span{font-size:26px;color:var(--muted)}.search input{border:0;background:transparent;padding:13px 0;width:100%;outline:none;color:var(--text);font-size:13px}.categories{display:flex;gap:9px;overflow:auto;padding:25px 0 27px;scrollbar-width:thin}.categories button{border:0;border-radius:7px;padding:9px 13px;background:transparent;color:var(--muted);white-space:nowrap;font-size:12px}.categories button.active{background:#66e8c61a;color:var(--mint)}.section-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 18px;gap:12px}.section-head h2{font-size:18px;margin:0}.section-head span{font-size:12px;color:var(--muted)}.games{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.game-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);text-align:left;padding:0;color:var(--text);transition:transform .18s,border-color .18s}.game-card:hover{transform:translateY(-4px);border-color:#5b7895}.game-card .art{height:165px;position:relative;overflow:hidden;background:#111a29}.art img{width:100%;height:100%;object-fit:cover}.art .tag{position:absolute;left:12px;top:12px;font-size:9px;letter-spacing:1px;background:#0b1019cc;padding:5px 7px;border:1px solid #ffffff17;border-radius:4px}.card-body{padding:16px 16px 17px}.card-body h3{font-size:16px;letter-spacing:-.25px;margin:0 0 8px}.card-bottom{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.card-bottom span:last-child{color:var(--mint)}footer{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:40px;padding:25px 0 35px;font-size:10px;color:var(--muted)}.text-button{border:0;padding:4px;background:none;color:var(--mint);font-size:12px}.muted{font-size:12px;color:var(--muted);line-height:1.7}.error{color:#ff729a;font-size:13px;min-height:16px}dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:16px;max-height:92dvh;padding:30px;width:440px;max-width:94vw;overflow:auto;box-shadow:0 30px 130px #000b}dialog::backdrop{background:#050810d9;backdrop-filter:blur(8px)}dialog h2{font-size:30px;letter-spacing:-1px;margin:5px 0 18px}.close{position:absolute;right:14px;top:14px;width:32px;height:32px;background:#0b1019a8;color:white;border:1px solid var(--line);border-radius:50%;font-size:23px;z-index:2}.detail{width:820px;padding:0}.detail-art{height:210px;background:#101a2b}.detail-art img{height:100%;width:100%;object-fit:cover}.detail-body{padding:28px}.detail-description{color:var(--muted)}.controls-note{font-size:12px;color:var(--muted);padding:12px;border-radius:7px;background:var(--bg);line-height:1.7}.actions{display:flex;gap:10px;flex-wrap:wrap}.ranking{margin-top:26px;border-top:1px solid var(--line);padding-top:25px}.ranking h3{margin:0;font-size:18px}.ranking-filters{display:flex;gap:12px}.ranking-filters select{width:50%;padding:10px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);font-size:12px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px;text-align:left}th{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:500;padding:12px 8px;border-bottom:1px solid var(--line)}td{padding:13px 8px;border-bottom:1px solid #25314577}td:nth-child(3){font-variant-numeric:tabular-nums}tr.me{background:#66e8c617;color:var(--mint)}.my-rank{font-size:12px;color:var(--mint)}.pagination{display:flex;justify-content:space-between;align-items:center;padding-top:10px;font-size:11px;color:var(--muted)}form{display:grid;gap:17px}form label{display:grid;gap:8px;font-size:12px;color:var(--muted)}form input{padding:13px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);width:100%}.auth .text-button{margin-top:20px}.room-code{display:block;font-size:38px;letter-spacing:5px;color:var(--mint);margin-top:18px}.small-dialog p{font-size:13px;color:var(--muted);line-height:1.8}#lobby-players{padding:20px 0;display:grid;gap:10px}#start-online{width:100%}.history{padding:30px}.player-view{position:fixed;inset:0;z-index:10;background:var(--bg);display:flex;flex-direction:column;align-items:center;padding:10px 20px;overflow:auto}.player-top{width:min(100%,1100px);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}.player-top h2{font-size:17px}.player-top>div{display:flex;gap:8px}.hud{display:flex;width:min(100%,900px);gap:16px;align-items:center;justify-content:space-between;padding:10px 0;color:var(--muted);font-size:12px;flex-shrink:0}.hud strong{color:var(--text);font-variant-numeric:tabular-nums}.stage{position:relative;width:min(100%,900px);aspect-ratio:3/2;max-height:calc(100dvh - 210px);flex-shrink:1;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:#0e1624}canvas{width:100%;height:100%;display:block}.game-labels{position:absolute;inset:0;pointer-events:none}.game-labels span{position:absolute;transform:translate(-50%,-50%);color:#fff;font-weight:800;font-size:18px;text-shadow:0 2px 3px #0008}.game-controls{font-size:11px;color:var(--muted);line-height:1.5;text-align:center;flex-shrink:0}.touch-controls{width:min(100%,720px);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:8px 30px;user-select:none;flex-shrink:0}.dpad{display:grid;grid-template-columns:repeat(3,42px);grid-template-rows:repeat(3,36px);gap:4px}.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad span{grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}.dpad button:nth-child(5){grid-column:2;grid-row:3}.touch-controls button{background:#23314a;border:1px solid #3c5274;border-radius:8px;color:#c8d9f3;font-size:20px;touch-action:none;user-select:none}.touch-controls button.held{background:var(--mint);color:var(--bg)}.action-pad{display:flex;gap:15px}.action-pad button{height:64px;width:64px;border-radius:50%;font-weight:800}.action-pad button:last-child{background:#235344;color:var(--mint);border-color:#38876e}.end-screen{position:absolute;inset:0;background:#080e19e8;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;text-align:center;backdrop-filter:blur(8px)}.end-screen h2{font-size:26px;letter-spacing:-.5px}.end-screen p{color:var(--muted);font-size:12px}.end-screen .eyebrow{color:var(--mint)}#end-scores{font-size:24px;font-weight:750;line-height:1.6}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);max-width:90vw;background:#22324a;color:#fff;border:1px solid #4a6589;padding:13px 20px;border-radius:10px;font-size:13px;z-index:100}body.playing{overflow:hidden}
@media(min-width:1400px){.games{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1000px){.games{grid-template-columns:repeat(3,minmax(0,1fr))}.intro-stat{display:none}.connection{display:none}}
@media(max-width:700px){.mast{height:78px;padding:0 5vw}.brand{font-size:13px;letter-spacing:1px}.brand-mark{width:36px;height:36px;font-size:25px}.brand small{font-size:8px;letter-spacing:2px}.mast .button{font-size:11px;padding:10px}.intro{padding:28px 0}.intro .eyebrow{font-size:8px;letter-spacing:1.5px}.intro p:last-child{font-size:12px}.toolbar{flex-wrap:wrap;gap:8px}.search{flex-basis:100%;max-width:none}.toolbar .button{font-size:11px;flex:1;padding:10px 8px}.categories{gap:4px;padding:18px 0}.categories button{font-size:11px;padding:8px 10px}.games{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.game-card .art{height:120px}.card-body{padding:12px}.card-body h3{font-size:13px}.card-bottom{font-size:9px}.art .tag{font-size:8px;left:8px;top:8px}.detail-body{padding:20px}.detail-art{height:150px}.player-view{padding:6px 10px}.player-top h2{font-size:12px;margin:8px 0}.player-top .button{font-size:10px;padding:8px}.player-top #sound{display:none}.stage{max-height:calc(100dvh - 270px);flex-shrink:0}.hud{font-size:10px;gap:6px}.touch-controls{padding:8px 15px}.dpad{grid-template-columns:repeat(3,49px);grid-template-rows:repeat(3,43px)}.action-pad button{height:65px;width:65px}.game-controls{font-size:10px}.game-labels span{font-size:12px}.end-screen h2{font-size:18px;margin:8px}.end-screen .button{font-size:11px;padding:9px}#end-scores{font-size:17px}.end-screen{padding:12px}.end-screen p{margin:7px}.section-head h2{font-size:16px}footer{line-height:1.8}.ranking-filters{gap:8px}}
@media(max-height:550px) and (orientation:landscape){.player-view{display:grid;grid-template-columns:130px 1fr 130px;grid-template-rows:40px 1fr 20px;gap:4px}.player-top{grid-column:1/4}.hud{grid-column:1/4;padding:0;position:absolute;top:45px;left:150px;width:calc(100% - 300px)}.stage{grid-column:2;grid-row:2;width:100%;height:100%;aspect-ratio:auto;max-height:none;margin-top:15px}.game-controls{grid-column:1/4;margin:0}.touch-controls{display:contents}.dpad{grid-column:1;grid-row:2;align-self:center;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(3,40px)}.action-pad{grid-column:3;grid-row:2;align-self:center;justify-content:center;gap:8px;flex-wrap:wrap}.action-pad button{height:50px;width:50px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}