:root{--wood:#d9a441;--line:#7a5b1e;--bg:#14161a;--fg:#e8e6e1}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);justify-content:center;margin:0;padding:16px;font:15px/1.5 system-ui,-apple-system,PingFang SC,Microsoft YaHei,sans-serif;display:flex}#app{width:100%;max-width:560px}h1{font-size:22px}input,button{font:inherit;color:var(--fg);background:#1e2228;border:1px solid #3a3f46;border-radius:10px;padding:10px 14px}button{cursor:pointer;background:#2b6cb0;border-color:#2b6cb0}button:disabled{opacity:.5;cursor:default}#lobby:not([hidden]){flex-direction:column;gap:12px;display:flex}.row{gap:8px;display:flex}.row input{text-transform:uppercase;flex:1}header,footer{flex-wrap:wrap;align-items:center;gap:12px;padding:10px 0;display:flex}#room-label{letter-spacing:.12em;font-weight:700}.board{grid-template-columns:repeat(var(--size), 1fr);aspect-ratio:1;background:var(--wood);border-radius:8px;width:100%;padding:4px;display:grid}.cell{all:unset;aspect-ratio:1;cursor:pointer;position:relative}.cell:disabled{opacity:1;cursor:default}.cell:before{content:"";border-right:1px solid var(--line);border-bottom:1px solid var(--line);opacity:.55;position:absolute;inset:0}.cell.star:after{content:"";background:var(--line);border-radius:50%;width:6px;height:6px;position:absolute;bottom:-3px;right:-3px}.cell.black:after,.cell.white:after{content:"";border-radius:50%;width:84%;height:84%;position:absolute;inset:8% auto auto 8%;box-shadow:0 1px 2px #00000073}.cell.black:after{background:radial-gradient(circle at 32% 30%,#555,#000)}.cell.white:after{background:radial-gradient(circle at 32% 30%,#fff,#c8c8c8)}.cell.last{outline-offset:-2px;z-index:1;outline:2px solid #e53e3e}.cell.win:after{box-shadow:0 0 0 3px #38a169}#toast{z-index:10;background:#e53e3e;border-radius:10px;padding:10px 16px;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}body.offline #board{pointer-events:none}body.offline #lobby button{opacity:.5;cursor:not-allowed}body.offline #status:after{content:" · 连接中断,正在重连…";color:#e53e3e}#public-toggle{color:#a8b0ba;cursor:pointer;align-items:center;gap:8px;font-size:14px;display:flex}#public-toggle input{accent-color:#2b6cb0;cursor:pointer;width:16px;height:16px;padding:0}#room-list h2{color:#a8b0ba;margin:8px 0;font-size:14px;font-weight:600}#rooms{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.room-item{text-align:left;background:#1e2228;border-color:#3a3f46;align-items:center;gap:12px;width:100%;display:flex}.room-item:hover{border-color:#2b6cb0}.room-id{letter-spacing:.12em;color:#d9a441;font-weight:700}.room-nick{color:#a8b0ba;text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}#rooms-empty{color:#6b7280;margin:4px 0;font-size:14px}#btn-leave{color:#a8b0ba;background:0 0;border-color:#3a3f46;margin-left:auto;padding:6px 12px;font-size:14px}#btn-leave:hover{color:#e53e3e;border-color:#e53e3e}#pick:not([hidden]){flex-direction:column;gap:12px;display:flex}#game-list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.game-item{text-align:left;background:#1e2228;border-color:#3a3f46;grid-template-columns:1fr auto;gap:4px 12px;width:100%;padding:14px 16px;display:grid}.game-item:hover{border-color:#2b6cb0}.game-name{font-size:17px;font-weight:600}.game-players{color:#7c8794;white-space:nowrap;border:1px solid #333941;border-radius:999px;grid-area:1/2/span 2;place-self:center end;padding:3px 8px;font-size:12px}.game-tagline{color:#a8b0ba;font-size:13px}#btn-back{color:#a8b0ba;background:0 0;border-color:#0000;align-self:flex-start;padding:4px 0;font-size:14px}#btn-back:hover{color:#e8e6e1}#kof:not([hidden]),#kof-select:not([hidden]),#kof-fight:not([hidden]){flex-direction:column;gap:12px;display:flex}#kof-back{background:#2a2f36;border-color:#3a3f46;align-self:flex-start;padding:6px 12px;font-size:13px}#kof-name-en,#kof-timer,#kof-time span,#kof-credits,#kof-random,#kof-ko{letter-spacing:.12em;font-family:Courier New,ui-monospace,monospace;font-weight:700}#kof-portrait{aspect-ratio:1;background:#0b0d10 radial-gradient(circle at 50% 30%,#1d2530,#0b0d10 70%);border:2px solid #3a3f46;border-radius:6px;position:relative;overflow:hidden}#kof-art{object-fit:cover;object-position:50% 22%;width:100%;height:100%;display:block}#kof-portrait.empty:after{content:"?";color:#3a4652;place-items:center;font:700 64px Courier New,monospace;display:grid;position:absolute;inset:0}#kof-plate{background:linear-gradient(90deg,#0b1a3ae6,#0b1a3a99 70%,#0000);flex-direction:column;max-width:90%;padding:6px 12px 7px;display:flex;position:absolute;bottom:0;left:0}#kof-name-en{color:#6fb8ff;text-shadow:2px 2px #06132c;font-size:17px}#kof-name-cn{color:#b9c6d4;font-size:12px}#kof-grid{grid-template-columns:repeat(6,1fr);gap:4px;display:grid}.kof-cell:nth-child(6n+2),.kof-cell:nth-child(6n+4){margin-right:9px}.kof-cell{aspect-ratio:1;background:#1a1f26;border:1px solid #4a5361;border-radius:3px;min-width:0;padding:0;position:relative;overflow:hidden}.kof-cell img{object-fit:cover;object-position:50% 18%;width:100%;height:100%;display:block}.kof-cell.locked{color:#48535f;cursor:default;font:700 18px Courier New,monospace}.kof-cell.on{z-index:1;border-color:#8fd8ff}.kof-cell.on:after{content:"";pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle,#eafaff 0%,#a8e6ff 14%,#4fc3ff 32%,#1478e0 52%,#0b3f9ecc 64%,#0000 74%);animation:.7s ease-in-out infinite alternate kof-plasma;position:absolute;inset:-25%}@keyframes kof-plasma{0%{opacity:.85;transform:scale(.86)rotate(0)}to{opacity:1;transform:scale(1.06)rotate(12deg)}}#kof-hud{grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;display:grid}#kof-random{cursor:pointer;color:#ffd84a;background:#1436c8;border:2px solid #dfe7f2;border-radius:3px;justify-self:start;place-items:center;width:46px;height:38px;padding:0;font-size:24px;display:grid}#kof-time{flex-direction:column;align-items:center;gap:2px;line-height:1;display:flex}#kof-time span{color:#f0c000;text-shadow:1px 1px #4a2a00;font-size:12px}#kof-timer{color:#ffe27a;text-shadow:2px 2px #7a4a00;font-size:32px}#kof-timer.out{color:#ff6b6b}#kof-credits{color:#dfe7f2;text-shadow:1px 1px #000;justify-self:end;font-size:12px}#kof-tip{color:#97a2ae;text-align:center;margin:0;font-size:12px}#kof-tip b{color:#ffd84a}#kof-bars{grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;font-size:12px;display:grid}.kof-bar{flex-direction:column;gap:3px;min-width:0;display:flex}.kof-bar.right{align-items:flex-end}.kof-bar span{white-space:nowrap;text-overflow:ellipsis;max-width:100%;overflow:hidden}.kof-hp{background:#2a1010;border:1px solid #6b3a1a;border-radius:2px;width:100%;height:12px;overflow:hidden}.kof-bar.right .kof-hp{transform:scaleX(-1)}.kof-hp i{background:linear-gradient(#ffe27a,#f0a000);height:100%;transition:width .12s linear;display:block}.kof-hp i.low{background:linear-gradient(#ff9a9a,#d02020)}#kof-mid{flex-direction:column;align-items:center;line-height:1.1;display:flex}#kof-round-timer{color:#ffe27a;text-shadow:2px 2px #7a4a00;font:700 22px Courier New,ui-monospace,monospace}#kof-streak{color:#ffd84a;white-space:nowrap;font-size:11px}#kof-combo{color:#ff9a5a;white-space:nowrap;font:700 12px Courier New,ui-monospace,monospace}#kof-combo[hidden]{display:none}#kof-stage{background:#0b0d12;border:2px solid #3a3f46;border-radius:8px;position:relative;overflow:hidden}#kof-canvas{aspect-ratio:16/9;width:100%;display:block}#kof-ko{z-index:2;white-space:nowrap;letter-spacing:.12em;color:#ffe27a;text-shadow:3px 3px #a01010,6px 6px #00000080;pointer-events:none;place-items:center;font:700 clamp(30px,12vw,54px) Courier New,ui-monospace,monospace;animation:.4s ease-out kof-ko-in;display:grid;position:absolute;inset:0}#kof-ko[hidden]{display:none}@keyframes kof-ko-in{0%{opacity:0;transform:scale(2.4)}}#kof-pad{touch-action:none;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:10px;display:flex}#kof-stick{touch-action:none;background:radial-gradient(circle at 50% 45%,#232830,#171a20 70%);border:2px solid #3d4552;border-radius:50%;flex:none;place-items:center;width:124px;height:124px;display:grid;position:relative}#kof-stick.on{border-color:#5b7fbd}#kof-knob{pointer-events:none;background:radial-gradient(circle at 40% 35%,#4a5568,#2f3846 70%);border:2px solid #5b6675;border-radius:50%;width:54px;height:54px;transition:transform 80ms ease-out}#kof-stick.on #kof-knob{border-color:#7fa8e8;transition:none}.stick-mark{color:#5a6474;pointer-events:none;font-size:11px;position:absolute}.stick-mark.up{top:5px}.stick-mark.down{bottom:5px}.pad-side.right{align-items:center;gap:8px;min-width:0;display:flex}.pad-btn{aspect-ratio:1;color:#cfd6de;touch-action:none;-webkit-touch-callout:none;background:#232830;border:2px solid #3d4552;border-radius:50%;flex:0 auto;width:clamp(46px,17vw,62px);padding:0;font-size:18px;font-weight:700}.pad-btn.atk{background:#2b3a5c;border-color:#40598c}.pad-btn.heavy{background:#5c2b3a;border-color:#8c4058}.pad-btn.guard{background:#2b4a3a;border-color:#3f7a5c}.pad-btn.on{filter:brightness(1.5);transform:scale(.94)}#kof-hint{text-align:center;color:#7f8a97;margin:0;font-size:11px}#kof-after:not([hidden]){flex-wrap:wrap;align-items:center;gap:10px;display:flex}#kof-result{font-weight:700}#kof-recharacter{background:#2a2f36;border-color:#3a3f46}.kof-cell.cameo img{filter:grayscale(.6)brightness(.5)}