:root{--bg-0: #161210;--bg-1: #221b16;--ink: #f3e9d8;--ink-dim: #b8a890;--gold: #d4a657;--gold-bright: #f0c674;--emerald: #3fd17a;--emerald-deep: #1f7a45;--ember: #ff5a4d;--ember-deep: #b8302a;--board-light: #e8d4ad;--board-dark: #a06b43;--board-light-2: #f0deba;--board-dark-2: #8a5a38;--check: #ffd23f;--display: "Cinzel", serif;--body: "Gowun Dodum", system-ui, sans-serif;--mono: "JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%}body{font-family:var(--body);color:var(--ink);background:var(--bg-0);-webkit-font-smoothing:antialiased;overflow-x:hidden}.app{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px}.bg-layer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;background:radial-gradient(900px 600px at 20% -10%,rgba(212,166,87,.16),transparent 60%),radial-gradient(700px 500px at 90% 110%,rgba(255,90,77,.1),transparent 55%),linear-gradient(160deg,#1c1612,#120e0b)}.bg-layer:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");mix-blend-mode:overlay;pointer-events:none}.app>*:not(.bg-layer){position:relative;z-index:1}.lobby{width:100%;max-width:380px;background:linear-gradient(180deg,#281f18eb,#1c1510f5);border:1px solid rgba(212,166,87,.28);border-radius:20px;padding:32px 26px 26px;box-shadow:0 24px 70px #0009,inset 0 1px #ffffff0a}.title{font-family:var(--display);font-weight:700;font-size:38px;letter-spacing:1px;background:linear-gradient(180deg,var(--gold-bright),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;text-align:center;text-shadow:0 2px 12px rgba(212,166,87,.2)}.subtitle{text-align:center;color:var(--ink-dim);font-size:13px;margin-top:4px;margin-bottom:14px;letter-spacing:.5px}.lobby-parade{display:flex;justify-content:center;align-items:flex-end;gap:2px;margin-bottom:22px;padding-bottom:14px;border-bottom:1px solid rgba(212,166,87,.15)}.parade-piece{height:52px;width:auto;image-rendering:pixelated;image-rendering:crisp-edges;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4));animation:paradeBob 2.4s ease-in-out infinite}.parade-piece:nth-child(2){animation-delay:.2s}.parade-piece:nth-child(3){animation-delay:.4s}.parade-piece:nth-child(4){animation-delay:.6s}.parade-piece:nth-child(5){animation-delay:.8s}.parade-piece:nth-child(6){animation-delay:1s}@keyframes paradeBob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.field{display:block;margin-bottom:16px}.field span{display:block;font-size:12px;color:var(--ink-dim);margin-bottom:6px;letter-spacing:.5px}.field input,.join-row input{width:100%;background:#00000052;border:1px solid rgba(212,166,87,.25);border-radius:10px;padding:12px 14px;color:var(--ink);font-family:var(--body);font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}.field input:focus,.join-row input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #d4a65726}.field input.input-error,.field input.input-error:focus{border-color:#ff5a4d;box-shadow:0 0 0 3px #ff5a4d38;animation:shake .3s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.field-error{display:block;margin-top:7px;color:#ff8a7d;font-size:13px;font-weight:600}.my-rating{text-align:center;color:var(--ink-dim);font-size:13px;margin-bottom:14px}.my-rating b{color:var(--gold-bright);font-family:var(--mono);font-size:16px}.btn{width:100%;border:1px solid rgba(212,166,87,.3);background:#d4a65714;color:var(--ink);border-radius:12px;padding:14px;font-family:var(--body);font-size:15px;cursor:pointer;transition:transform .1s,background .15s,border-color .15s;display:flex;flex-direction:column;align-items:center;gap:2px}.btn:hover:not(:disabled){background:#d4a65729;border-color:var(--gold)}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn small{font-size:11px;color:var(--ink-dim)}.btn-primary{background:linear-gradient(180deg,var(--gold),#b8862f);color:#2a1d0c;border:none;font-weight:700;box-shadow:0 8px 24px #d4a6574d}.btn-primary small{color:#2a1d0cb3}.btn-primary:hover:not(:disabled){background:linear-gradient(180deg,var(--gold-bright),var(--gold))}.divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--ink-dim);font-size:12px}.divider:before,.divider:after{content:"";flex:1;height:1px;background:#d4a65733}.room-actions{display:flex;flex-direction:column;gap:10px}.join-row{display:flex;gap:8px}.join-row input{flex:1;text-transform:uppercase;font-family:var(--mono);letter-spacing:3px;text-align:center}.join-row .btn{width:auto;padding:12px 20px;flex-direction:row}.room-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#0009;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);padding:20px}.room-modal{background:linear-gradient(180deg,#2a2018,#1c1510);border:1px solid var(--gold);border-radius:18px;padding:28px 30px;text-align:center;max-width:320px;width:100%;box-shadow:0 24px 70px #000000b3;animation:pop .25s ease-out}.room-modal-title{font-family:var(--display);font-size:20px;color:var(--gold-bright);margin-bottom:12px}.room-code-big{font-family:var(--mono);font-size:52px;font-weight:800;letter-spacing:10px;color:var(--emerald);padding:10px 0 6px;text-shadow:0 0 24px rgba(63,209,122,.4)}.room-modal-hint{color:var(--ink);font-size:14px;margin-bottom:18px}.room-waiting{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink-dim);font-size:13px;margin-bottom:20px}.spinner-sm{width:18px;height:18px;border:3px solid rgba(212,166,87,.25);border-top-color:var(--gold);border-radius:50%;animation:spin .9s linear infinite}.room-modal .btn{width:auto;display:inline-flex;padding:10px 28px;flex-direction:row}.rules-hint{margin-top:22px;padding-top:18px;border-top:1px solid rgba(212,166,87,.15);font-size:12px;color:var(--ink-dim);line-height:1.9}.rules-hint b{color:var(--ink)}.rules-hint .g{color:var(--emerald)}.rules-hint .r{color:var(--ember)}.queue{text-align:center;color:var(--ink)}.queue h2{font-family:var(--display);font-size:24px;margin:18px 0 6px}.queue p{color:var(--ink-dim);font-size:13px;margin-bottom:24px}.queue .btn{width:auto;display:inline-flex;padding:12px 28px;flex-direction:row}.spinner{width:56px;height:56px;margin:0 auto;border:4px solid rgba(212,166,87,.2);border-top-color:var(--gold);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.game{width:100%;max-width:460px;display:flex;flex-direction:column;gap:10px}.clock{display:grid;grid-template-columns:1fr auto;grid-template-areas:"player main" "meta meta" "cap cap";gap:4px 12px;align-items:center;background:linear-gradient(180deg,#281f18d9,#1c1510e6);border:1px solid rgba(212,166,87,.18);border-radius:14px;padding:10px 14px;transition:border-color .2s,box-shadow .2s}.clock-active{border-color:var(--gold);box-shadow:0 0 0 1px #d4a65766,0 6px 20px #d4a6571f}.clock-danger{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember),0 0 24px #ff5a4d4d;animation:dangerPulse 1s ease-in-out infinite}@keyframes dangerPulse{50%{box-shadow:0 0 0 2px var(--ember),0 0 36px #ff5a4d80}}.clock-player{grid-area:player;display:flex;align-items:center;gap:8px;min-width:0}.color-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.4)}.dot-w{background:#f3e9d8}.dot-b{background:#2a2018;box-shadow:inset 0 0 0 1px #d4a65766}.clock-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.clock-rating{font-family:var(--mono);font-size:12px;color:var(--gold);flex-shrink:0}.clock-main{grid-area:main;display:flex;align-items:baseline;gap:3px}.clock-time{font-family:var(--mono);font-weight:800;font-size:30px;line-height:1;font-variant-numeric:tabular-nums}.clock-danger .clock-time{color:var(--ember)}.clock-unit{font-size:13px;color:var(--ink-dim)}.clock-phase{font-size:10px;padding:2px 7px;border-radius:6px;margin-left:6px;letter-spacing:.5px}.phase-main{background:#3fd17a26;color:var(--emerald)}.phase-reserve{background:#ffa5002e;color:#ffb84d}.phase-grace{background:#ff5a4d33;color:var(--ember)}.clock-meta{grid-area:meta;display:flex;justify-content:space-between;font-size:11px;color:var(--ink-dim);margin-top:2px}.reserve{font-family:var(--mono)}.warnings{display:flex;gap:4px}.warn-pip{font-size:12px;color:#ffffff40}.warn-on{color:var(--ember)}.captured-row{grid-area:cap;display:flex;flex-wrap:wrap;gap:2px;margin-top:3px;min-height:18px}.captured-piece{height:22px;width:auto;image-rendering:pixelated;image-rendering:crisp-edges;opacity:.92;filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}.turn-banner{text-align:center;font-family:var(--display);font-size:15px;letter-spacing:1px;padding:6px;border-radius:10px;transition:all .2s}.my-turn{background:#3fd17a24;color:var(--emerald);border:1px solid rgba(63,209,122,.3)}.wait-turn{background:#0003;color:var(--ink-dim);border:1px solid transparent}.check-flag{margin-left:10px;color:var(--check);font-family:var(--body);font-weight:700;animation:blink .8s step-start infinite}@keyframes blink{50%{opacity:.4}}.board-frame{border-radius:10px;padding:12px;background:linear-gradient(150deg,#4a3320,#2a1b0f);border:3px solid #6b4a2a;box-shadow:0 16px 50px #0009,inset 0 0 0 2px #ffdca01f,inset 0 0 50px #00000080}.board-grid{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);aspect-ratio:1 / 1;width:100%;border-radius:3px;overflow:hidden;box-shadow:0 0 0 2px #00000080}.cell{position:relative;border:none;padding:0;cursor:default;display:flex;align-items:flex-end;justify-content:center;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background-size:100% 100%;background-repeat:no-repeat;image-rendering:pixelated;image-rendering:crisp-edges}.cell.light{background-image:var(--tile-light)}.cell.dark{background-image:var(--tile-dark)}.cell.clickable{cursor:pointer}.cell.clickable:hover{filter:brightness(1.12) saturate(1.08)}.piece-sprite{position:relative;z-index:3;height:122%;width:auto;margin-bottom:-2%;image-rendering:pixelated;image-rendering:crisp-edges;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4));transition:transform .1s;pointer-events:none}.cell.clickable:active .piece-sprite{transform:translateY(1px) scale(.97)}.cell.clickable:hover .piece-sprite.liftable{transform:translateY(-3px)}.ind{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.cell.selected{box-shadow:inset 0 0 0 3px var(--gold-bright),inset 0 0 0 5px #281a0a8c}.cell.move-target .ind-move{background:#3fd17a42;box-shadow:inset 0 0 0 3px #3fd17af2,inset 0 0 0 5px #14462873}.cell.move-target .ind-move:after{content:"";position:absolute;left:50%;top:58%;width:20%;height:20%;transform:translate(-50%,-50%) rotate(45deg);background:#50e68cf2;box-shadow:0 0 0 2px #144628b3;animation:movePip 1s steps(2,jump-none) infinite}@keyframes movePip{50%{opacity:.4}}.cell.move-target.clickable:hover .ind-move{background:#3fd17a6b}.cell.capture-target .ind-capture{background:#ff463c29;box-shadow:inset 0 0 0 3px #ff463c,inset 0 0 0 5px #5a0f0c80;animation:capturePulse .8s steps(2,jump-none) infinite}@keyframes capturePulse{50%{box-shadow:inset 0 0 0 4px #ff825f,inset 0 0 0 6px #5a0f0c80}}.piece-sprite.threatened{animation:threatBob .8s ease-in-out infinite}@keyframes threatBob{0%,to{transform:translateY(0)}50%{transform:translateY(-3px) scale(1.02)}}.cell.in-check .ind-check{background:#ffd23f2e;box-shadow:inset 0 0 0 3px var(--check),inset 0 0 0 5px #78500080;animation:checkBlink .6s steps(2,jump-none) infinite}@keyframes checkBlink{50%{background:#ffd23f0a}}.cell.lastmove:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#f0c67438;pointer-events:none;z-index:1}.coord{position:absolute;font-family:var(--mono);font-size:8px;font-weight:700;opacity:.65;z-index:4;pointer-events:none;text-shadow:0 1px 0 rgba(0,0,0,.45)}.cell.light .coord{color:#6b5238}.cell.dark .coord{color:#efe1c9}.rank-coord{top:2px;left:3px}.file-coord{bottom:1px;right:3px}.game-controls{display:flex;justify-content:center}.btn-ghost{width:auto;flex-direction:row;padding:8px 24px;font-size:13px;background:transparent;border-color:#ff5a4d4d;color:var(--ember)}.btn-ghost:hover:not(:disabled){background:#ff5a4d1a;border-color:var(--ember)}.warning-overlay,.promo-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#0000008c;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.warning-card,.promo-card{background:linear-gradient(180deg,#2a2018,#1c1510);border:1px solid var(--gold);border-radius:18px;padding:28px 36px;text-align:center;box-shadow:0 24px 70px #000000b3;animation:pop .25s ease-out}@keyframes pop{0%{transform:scale(.85);opacity:0}}.warning-overlay.fatal .warning-card{border-color:var(--ember)}.warn-icon{font-size:48px;display:block;margin-bottom:8px}.warning-card p{font-family:var(--display);font-size:22px;color:var(--check)}.warning-overlay.fatal .warning-card p{color:var(--ember)}.warning-card small{color:var(--ink-dim);font-size:13px;display:block;margin-top:6px}.promo-card p{font-size:15px;margin-bottom:16px;color:var(--ink)}.promo-choices{display:flex;gap:12px}.promo-btn{width:64px;height:72px;display:flex;align-items:flex-end;justify-content:center;background:#d4a6571a;border:1px solid rgba(212,166,87,.3);border-radius:12px;cursor:pointer;transition:all .12s;padding:4px}.promo-sprite{height:90%;width:auto;image-rendering:pixelated;image-rendering:crisp-edges;filter:drop-shadow(0 2px 0 rgba(0,0,0,.4))}.promo-btn:hover{background:var(--gold);transform:translateY(-2px)}.warn-flash{animation:warnFlash 2.5s ease-out}@keyframes warnFlash{0%{filter:drop-shadow(0 0 0 transparent)}10%{filter:drop-shadow(0 0 30px rgba(255,90,77,.6))}to{filter:none}}.result{text-align:center;background:linear-gradient(180deg,#281f18eb,#1c1510f5);border:1px solid rgba(212,166,87,.3);border-radius:20px;padding:40px 36px;max-width:340px;width:100%;box-shadow:0 24px 70px #0009}.result h1{font-family:var(--display);font-size:44px;margin-bottom:6px}.result.win h1{color:var(--emerald);text-shadow:0 0 24px rgba(63,209,122,.4)}.result.lose h1{color:var(--ember)}.result.draw h1{color:var(--gold)}.result .reason{color:var(--ink-dim);font-size:15px;margin-bottom:24px}.rating-change{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-bottom:28px}.rating-change span:first-child{font-size:13px;color:var(--ink-dim)}.rating-change b{font-family:var(--mono);font-size:36px;color:var(--gold-bright)}.delta{font-family:var(--mono);font-size:18px;font-weight:800}.delta.up{color:var(--emerald)}.delta.down{color:var(--ember)}.result .btn{width:auto;display:inline-flex;padding:14px 40px;flex-direction:row}.conn-banner{position:fixed;top:0;left:0;right:0;z-index:100;text-align:center;background:var(--ember-deep);color:#fff;font-size:12px;padding:6px}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%);z-index:90;background:#140f0bf2;border:1px solid var(--gold);color:var(--ink);padding:12px 22px;border-radius:12px;font-size:14px;box-shadow:0 12px 40px #00000080;animation:toastIn .25s ease-out}@keyframes toastIn{0%{transform:translate(-50%,16px);opacity:0}}@media (max-width: 420px){.app{padding:8px;align-items:flex-start}.game{gap:8px}}