:root{--ink: #f3e7d2;--ink-soft: #bda989;--ink-faint: #8d7b62;--night: #150e08;--night-2: #221709;--paper: #241a11;--paper-2: #2e2116;--edge: #4a341f;--edge-soft: #3a2919;--brass: #d9a94e;--brass-2: #b5822f;--brass-glow: rgba(217, 169, 78, .35);--jade: #55b394;--vermilion: #d4483f;--board-height: max(420px, calc(100vh - 300px) );--board-height: max(420px, calc(100svh - 300px) );--board-ratio: .905;--radius: 16px;--radius-sm: 11px;--shadow-lift: 0 18px 40px rgb(0 0 0 / 45%);--shadow-soft: 0 10px 24px rgb(0 0 0 / 32%);color-scheme:dark}*{box-sizing:border-box}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}body{margin:0;min-height:100vh;color:var(--ink);font-family:Be Vietnam Pro,system-ui,-apple-system,Segoe UI,sans-serif;font-size:15px;line-height:1.55;background:radial-gradient(120% 80% at 50% -10%,#4a2f16,#4a2f1600 60%),radial-gradient(90% 60% at 100% 100%,#33200f,#33200f00 55%),linear-gradient(180deg,var(--night-2) 0%,var(--night) 60%,#100b06 100%);background-attachment:fixed;overflow-x:hidden}.ambience{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}.lantern{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(60px);opacity:.5}.lantern-a{top:-18vmax;left:-10vmax;background:radial-gradient(circle,#e28e3673,#e28e3600 68%);animation:sway 22s ease-in-out infinite}.lantern-b{right:-16vmax;bottom:-20vmax;background:radial-gradient(circle,#a3422c61,#a3422c00 70%);animation:sway 28s ease-in-out infinite reverse}@keyframes sway{50%{transform:translate3d(4vmax,3vmax,0) scale(1.08)}}.drift{position:absolute;font-family:"Noto Serif SC",serif;font-size:clamp(60px,9vw,130px);color:#d9a94e08;user-select:none;animation:float-piece linear infinite}.drift-1{top:12%;left:6%;animation-duration:34s}.drift-2{top:62%;left:12%;animation-duration:41s;animation-delay:-8s}.drift-3{top:24%;right:9%;animation-duration:37s;animation-delay:-14s}.drift-4{top:72%;right:14%;animation-duration:46s;animation-delay:-22s}.drift-5{top:8%;right:38%;animation-duration:52s;animation-delay:-6s}@keyframes float-piece{0%{transform:translateZ(0) rotate(-6deg)}50%{transform:translate3d(2vw,-4vh,0) rotate(6deg)}to{transform:translateZ(0) rotate(-6deg)}}.app{position:relative;z-index:1;max-width:1220px;margin:0 auto;padding:28px 18px 34px;display:flex;flex-direction:column;gap:22px;min-height:100vh}.app-header{text-align:center;animation:rise .6s cubic-bezier(.22,1,.36,1) both}.brand{margin:0;display:inline-flex;align-items:center;gap:14px;font-size:clamp(24px,4.2vw,34px);font-weight:700;letter-spacing:.3px}.brand-text em{font-style:normal;background:linear-gradient(100deg,var(--brass) 10%,#f4dda2 45%,var(--brass-2) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}.brand-mark{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:50%;font-family:"Noto Serif SC",serif;font-size:28px;color:#b5262c;background:radial-gradient(circle at 32% 28%,#fffaf0,#fdf4dd 45%,#e2c795);border:2px solid #8c6231;box-shadow:0 8px 18px #00000073,inset 0 -3px 8px #8c623173;animation:seal-in .7s cubic-bezier(.34,1.56,.64,1) both}@keyframes seal-in{0%{transform:scale(.5) rotate(-25deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}@keyframes rise{0%{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}.brand-sub{margin:8px 0 0;color:var(--ink-soft);font-size:14px}.screen[hidden]{display:none}.screen-home{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:20px;align-items:start}.card{position:relative;overflow:hidden;padding:26px;border-radius:var(--radius);border:1px solid var(--edge);background:linear-gradient(160deg,#ffe2b00d,#ffe2b000 45%),linear-gradient(180deg,var(--paper-2),var(--paper));box-shadow:var(--shadow-lift),inset 0 1px #ffe0aa1a}.card:after{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,var(--brass-glow) 45%,transparent)}.card-glow{position:absolute;inset:-40% 40% 40% -40%;background:radial-gradient(circle,rgb(217 169 78 / 10%),transparent 62%);pointer-events:none}.reveal{animation:reveal-card .62s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--delay, 0ms)}@keyframes reveal-card{0%{transform:translateY(22px) scale(.985);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.card-title{margin:0 0 16px;font-size:20px;font-weight:700;display:flex;align-items:center;gap:10px}.card-title:before{content:"";width:4px;height:20px;border-radius:2px;background:linear-gradient(180deg,var(--brass),var(--brass-2));box-shadow:0 0 12px var(--brass-glow)}.card h3{margin:0 0 12px;font-size:14px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--brass)}.split{display:grid;grid-template-columns:1fr auto 1fr;gap:22px;margin-top:18px}.split-divider{display:grid;place-items:center;position:relative;color:var(--ink-faint);font-size:12px}.split-divider:before{content:"";position:absolute;inset:0 50%;border-left:1px solid var(--edge)}.split-divider span{position:relative;padding:8px 0;background:var(--paper)}.feature-list{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:7px;font-size:13px;color:var(--ink-soft)}.feature-list li{display:flex;gap:9px;align-items:center}.feature-list li:before{content:"";width:6px;height:6px;rotate:45deg;background:var(--brass);box-shadow:0 0 8px var(--brass-glow)}.field{display:block;margin-bottom:14px}.field>span{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:7px}input[type=text],select{width:100%;padding:11px 13px;border-radius:var(--radius-sm);border:1px solid var(--edge);background:linear-gradient(180deg,#1b130c,#221810);color:var(--ink);font:inherit;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}input[type=text]:hover,select:hover{border-color:var(--edge-soft)}input[type=text]:focus,select:focus{outline:none;border-color:var(--brass-2);box-shadow:0 0 0 3px #d9a94e29}input::placeholder{color:#8d7b6299}#join-code{letter-spacing:7px;text-transform:uppercase;font-weight:700;font-size:17px;text-align:center}.form-error{margin:-8px 0 10px;color:var(--vermilion);font-size:12.5px;animation:shake .35s ease}@keyframes shake{25%{transform:translate(-5px)}75%{transform:translate(5px)}}.muted{color:var(--ink-soft);font-size:13px}.meta-row{display:flex;align-items:center;gap:8px;margin:10px 0 4px}.dot{width:3px;height:3px;border-radius:50%;background:var(--ink-faint)}.btn{position:relative;overflow:hidden;appearance:none;border:1px solid var(--edge);background:linear-gradient(180deg,#33241740,#1e150d);color:var(--ink);font:inherit;font-weight:600;padding:11px 18px;border-radius:var(--radius-sm);cursor:pointer;transition:transform .14s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,opacity .18s ease}.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgb(255 240 210 / 18%) 50%,transparent 80%);transform:translate(-120%);transition:transform .55s ease}.btn:hover:not(:disabled){transform:translateY(-2px);border-color:var(--brass-2);box-shadow:0 10px 22px #00000061}.btn:hover:not(:disabled):after{transform:translate(120%)}.btn:active:not(:disabled){transform:translateY(0) scale(.985)}.btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px}.btn:disabled{opacity:.4;cursor:not-allowed}.btn[hidden]{display:none}.btn-block{width:100%}.btn-primary{border-color:#8a5f22;color:#24170a;background:linear-gradient(180deg,#eec06a 0%,var(--brass) 45%,var(--brass-2) 100%);box-shadow:0 8px 20px #b5822f47,inset 0 1px #fff5dc8c}.btn-primary:hover:not(:disabled){box-shadow:0 12px 26px #b5822f66,inset 0 1px #fff5dca6}.btn-primary.is-active{background:linear-gradient(180deg,#78d3b2,var(--jade));border-color:#3d8f74;color:#07231b;box-shadow:0 10px 24px #55b39452}.btn-danger{background:linear-gradient(180deg,#6d2a26,#4c1c19);border-color:#7d3630;color:#f6d9d5}.btn-small{flex:1 1 auto;padding:9px 13px;font-size:13px;font-weight:500}.btn-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:11px}.screen-game{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:22px;align-items:start;animation:reveal-card .5s cubic-bezier(.22,1,.36,1) both}.board-column{display:flex;flex-direction:column;gap:12px;min-width:0;width:min(100%,calc(var(--board-height) * var(--board-ratio)));margin-inline:auto}.board-stage{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:9.56 / 10.56}canvas#board{border-radius:12px;box-shadow:0 24px 60px #0000008c,0 3px #2c1b0c,inset 0 0 0 1px #ffe2b01f;touch-action:manipulation;animation:board-in .55s cubic-bezier(.22,1,.36,1) both}@keyframes board-in{0%{transform:scale(.97) translateY(10px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.board-overlay{position:absolute;inset:0;display:grid;place-items:center;border-radius:12px;background:radial-gradient(circle at 50% 45%,#120b069e,#0c0804e0);backdrop-filter:blur(3px);animation:fade-in .28s ease both}.board-overlay[hidden]{display:none}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.overlay-card{position:relative;display:grid;place-items:center;gap:4px;padding:26px 34px;text-align:center}.overlay-card.is-enter{animation:overlay-pop .42s cubic-bezier(.34,1.56,.64,1) both}@keyframes overlay-pop{0%{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}.overlay-ring{position:absolute;width:148px;height:148px;transform:rotate(-90deg);transition:opacity .2s ease}.ring-track{fill:none;stroke:#ffe2b01f;stroke-width:5}.ring-value{fill:none;stroke:var(--brass);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 8px var(--brass-glow));transition:stroke-dashoffset .25s linear}.overlay-title{position:relative;font-family:"Noto Serif SC",serif;font-size:46px;font-weight:700;line-height:1.1;color:var(--ink);text-shadow:0 4px 20px rgb(0 0 0 / 60%)}.overlay-sub{position:relative;font-size:14px;color:var(--ink-soft);max-width:260px}.overlay-sub[hidden]{display:none}.board-overlay[data-kind=countdown] .overlay-title{font-size:64px;color:var(--brass);animation:tick 1s ease-out infinite}@keyframes tick{0%{transform:scale(1.18);opacity:.65}30%{transform:scale(1);opacity:1}}.board-overlay[data-kind=win] .overlay-title{background:linear-gradient(100deg,#f6dfa6,var(--brass) 55%,#f0c46f);-webkit-background-clip:text;background-clip:text;color:transparent}.board-overlay[data-kind=lose] .overlay-title{color:#c9b9a4}.board-overlay[data-kind=draw] .overlay-title{color:#cfd7d2}.board-overlay[data-kind=win]:before,.board-overlay[data-kind=win]:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;border:2px solid var(--brass);opacity:0;animation:ripple 2.4s ease-out infinite}.board-overlay[data-kind=win]:after{animation-delay:.8s}@keyframes ripple{0%{transform:scale(.5);opacity:.55}to{transform:scale(2.1);opacity:0}}.board-toast{position:absolute;top:12px;left:50%;translate:-50% 0;z-index:2;padding:8px 16px;border-radius:999px;border:1px solid rgb(212 72 63 / 45%);background:#26100ceb;color:#f2cfc9;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-soft);animation:toast-in .32s cubic-bezier(.22,1,.36,1) both}.board-toast[hidden]{display:none}@keyframes toast-in{0%{transform:translate(-50%,-14px);opacity:0}to{transform:translate(-50%);opacity:1}}.seat{display:flex;align-items:center;gap:13px;padding:11px 16px;border-radius:14px;border:1px solid var(--edge);background:linear-gradient(180deg,var(--paper-2),var(--paper));box-shadow:var(--shadow-soft);transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}.seat.is-turn{border-color:var(--brass-2);box-shadow:0 0 0 1px #d9a94e59,0 10px 26px #00000061;transform:translate(3px)}.seat.is-turn .seat-disc{animation:disc-pulse 1.8s ease-in-out infinite}@keyframes disc-pulse{50%{box-shadow:0 0 0 6px #d9a94e1f,0 6px 14px #00000073}}.seat-disc{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;font-family:"Noto Serif SC",serif;font-size:21px;background:radial-gradient(circle at 32% 28%,#fffaf0,#fdf4dd 45%,#e2c795);border:1.5px solid #8c6231;box-shadow:0 6px 14px #00000073}.seat-red .seat-disc{color:#b5262c}.seat-black .seat-disc{color:#25303a}.seat-info{display:flex;flex-direction:column;min-width:0;flex:1}.seat-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.seat-meta{font-size:12px;color:var(--ink-faint)}.seat-clock{font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;letter-spacing:.5px;color:var(--ink)}.seat.is-low-time .seat-clock{color:var(--vermilion);animation:blink 1s steps(2,start) infinite}@keyframes blink{50%{opacity:.3}}.panel{padding:18px;border-radius:var(--radius);border:1px solid var(--edge);background:linear-gradient(160deg,#ffe2b00d,#ffe2b000 40%),linear-gradient(180deg,var(--paper-2),var(--paper));box-shadow:var(--shadow-lift);display:flex;flex-direction:column;gap:15px;position:sticky;top:18px}.panel-block[hidden]{display:none}.status{margin:0;padding:11px 14px;border-radius:12px;background:linear-gradient(180deg,#1c130c,#171009);border:1px solid var(--edge-soft);font-weight:600;text-align:center}.status.is-flash{animation:status-flash .5s ease}@keyframes status-flash{0%{background:#d9a94e2e}}.status[data-state=check]{color:var(--vermilion)}.status[data-state=over]{color:var(--brass)}.status[data-state=waiting]{color:var(--ink-soft)}.room-code-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.label{display:block;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-faint)}.room-code{display:block;font-size:28px;letter-spacing:6px;font-weight:700;line-height:1.2;background:linear-gradient(100deg,#f6dfa6,var(--brass) 50%,var(--brass-2));-webkit-background-clip:text;background-clip:text;color:transparent}.connection[data-state=online]{color:var(--jade)}.connection[data-state=offline]{color:var(--vermilion)}.connection[data-state=connecting]{color:var(--brass);animation:blink 1.4s ease-in-out infinite}.thinking{margin:8px 0 0;min-height:20px;font-size:13px;color:var(--ink-soft)}.thinking.is-active:after{content:"…";display:inline-block;animation:blink 1.1s steps(2,start) infinite}.captured{display:grid;gap:9px}.captured-list{display:flex;flex-wrap:wrap;gap:4px;min-height:28px;margin-top:5px}.captured-piece{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-family:"Noto Serif SC",serif;font-size:15px;line-height:1;background:radial-gradient(circle at 32% 28%,#fffaf0,#f2e3c2 60%,#d9c093);border:1px solid #8c6231;animation:capture-in .4s cubic-bezier(.34,1.56,.64,1) both}@keyframes capture-in{0%{transform:scale(.2) rotate(-40deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.captured-piece.red{color:#b5262c}.captured-piece.black{color:#25303a}.moves{display:flex;flex-direction:column;min-height:0}.move-list{list-style:none;margin:7px 0 0;padding:0 5px 0 0;max-height:236px;overflow-y:auto;font-size:13px;scrollbar-width:thin;scrollbar-color:var(--edge) transparent}.move-list::-webkit-scrollbar{width:6px}.move-list::-webkit-scrollbar-thumb{background:var(--edge);border-radius:3px}.move-row{display:grid;grid-template-columns:30px 1fr 1fr;gap:7px;padding:4px 6px;border-radius:7px}.move-row.is-latest{background:linear-gradient(90deg,rgb(217 169 78 / 14%),transparent);box-shadow:inset 2px 0 0 var(--brass-2);animation:move-in .32s ease both}@keyframes move-in{0%{transform:translate(-6px);opacity:0}to{transform:translate(0);opacity:1}}.move-no{color:var(--ink-faint)}.move.red{color:#ef9a92}.move.black{color:#c3cdd6}.app-footer{margin-top:auto;text-align:center;color:var(--ink-faint);font-size:12px}@media (max-width: 940px){.screen-home,.screen-game{grid-template-columns:minmax(0,1fr)}.split{grid-template-columns:1fr;gap:14px}.split-divider:before{inset:50% 0;border-left:none;border-top:1px solid var(--edge)}.panel{position:static}.board-column{width:100%}.move-list{max-height:168px}.overlay-title{font-size:38px}.board-overlay[data-kind=countdown] .overlay-title{font-size:54px}}@media (max-width: 520px){.app{padding:18px 12px 26px}.card{padding:20px}.seat-clock{font-size:19px}}