:root{--bg: #1f1a17;--board: #e8c184;--board-edge: #b07d3c;--line: #5a3a1a;--red: #c1272d;--black: #1c1c1c;--accent: #d8a657;--panel: #2a2421;--panel-soft: #352d28;--text: #f3e9da;--text-dim: #b8a892;font-family:"Noto Serif SC",Songti SC,serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{background:radial-gradient(circle at 50% 0%,#2c2521,#161210 70%);color:var(--text)}.app{max-width:1120px;margin:0 auto;padding:24px 16px 40px;display:flex;flex-direction:column;min-height:100vh}.home{max-width:900px;margin:0 auto;padding:48px 20px;min-height:100vh;display:flex;flex-direction:column;justify-content:center}.home__header{text-align:center;margin-bottom:40px}.home__title{margin:0;font-size:44px;letter-spacing:10px;color:var(--accent);text-shadow:0 2px 12px rgba(0,0,0,.4)}.home__subtitle{margin:8px 0 0;color:var(--text-dim);letter-spacing:3px;font-size:14px}.home__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px}.game-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 18px 22px;background:var(--panel);border:1px solid #4a3f37;border-radius:16px;cursor:pointer;font-family:inherit;color:var(--text);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.game-card:hover:not(:disabled){transform:translateY(-4px);border-color:var(--accent);box-shadow:0 10px 26px #0006}.game-card--soon{cursor:not-allowed;opacity:.55}.game-emblem{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:700;background:radial-gradient(circle at 35% 30%,#fdf2d8,#e8cfa0 70%,#cda86f);box-shadow:0 3px 8px #0006,inset 0 0 0 2px #78501e66}.game-emblem--red{color:var(--red)}.game-emblem--black{color:var(--black)}.game-emblem--wood{color:#6b3f12}.game-card__title{font-size:20px;font-weight:700;letter-spacing:2px}.game-card__subtitle{font-size:12px;color:var(--text-dim)}.game-card__cta{margin-top:6px;padding:6px 16px;border-radius:999px;background:var(--accent);color:#2a1c08;font-size:13px;font-weight:700}.game-card__badge{margin-top:6px;padding:6px 16px;border-radius:999px;border:1px dashed var(--text-dim);color:var(--text-dim);font-size:13px}.home__footer{margin-top:36px;text-align:center;color:var(--text-dim);font-size:12px;letter-spacing:2px}.back-btn{position:absolute;left:0;top:2px;padding:7px 14px;border:1px solid #4a3f37;background:var(--panel-soft);color:var(--text);border-radius:8px;cursor:pointer;font-family:inherit;font-size:14px}.back-btn:hover{border-color:var(--accent)}.app__header{position:relative;text-align:center;margin-bottom:18px}.app__header h1{margin:0;font-size:28px;letter-spacing:4px;color:var(--accent)}.app__subtitle{margin:4px 0 0;color:var(--text-dim);font-size:14px;letter-spacing:2px}.mode-switch{display:inline-flex;gap:6px;margin-top:12px;background:var(--panel-soft);padding:4px;border-radius:10px;border:1px solid #4a3f37}.mode-switch button{padding:7px 18px;border:none;background:transparent;color:var(--text-dim);border-radius:7px;cursor:pointer;font-family:inherit;font-size:14px}.mode-switch button.active{background:var(--accent);color:#2a1c08;font-weight:700}.app__main--lobby{justify-content:center}.online-lobby{width:min(92vw,360px);margin:0 auto;background:var(--panel);border-radius:16px;padding:28px 24px;box-shadow:0 8px 24px #0000004d}.online-lobby__title{margin:0 0 18px;text-align:center;color:var(--accent);letter-spacing:3px}.online-field{display:block;margin-bottom:14px}.online-field span{display:block;font-size:13px;color:var(--text-dim);margin-bottom:6px;letter-spacing:2px}.online-field input{width:100%;padding:11px 12px;border-radius:8px;border:1px solid #4a3f37;background:var(--panel-soft);color:var(--text);font-family:inherit;font-size:16px;letter-spacing:2px}.online-field input:focus{outline:none;border-color:var(--accent)}.online-primary,.online-secondary{width:100%;padding:12px 0;border-radius:8px;border:none;cursor:pointer;font-family:inherit;font-size:15px;font-weight:700}.online-primary{background:var(--accent);color:#2a1c08}.online-secondary{background:var(--panel-soft);color:var(--text);border:1px solid #4a3f37}.online-primary:disabled,.online-secondary:disabled{opacity:.5;cursor:not-allowed}.online-divider{text-align:center;color:var(--text-dim);margin:16px 0;font-size:13px}.online-error{margin:14px 0 0;color:#ff9a9e;font-size:14px;text-align:center}.online-hint{margin:16px 0 0;color:var(--text-dim);font-size:12px;line-height:1.6}.room-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.room-code{font-size:18px;font-weight:700;letter-spacing:3px;color:var(--accent)}.copy-btn{padding:6px 12px;border:1px solid #4a3f37;background:var(--panel-soft);color:var(--text-dim);border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px}.copy-btn:hover{border-color:var(--accent)}.seats{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}.seat{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--panel-soft);font-size:14px}.seat__dot{width:10px;height:10px;border-radius:50%}.seat--red .seat__dot{background:var(--red)}.seat--black .seat__dot{background:#cfcfcf}.seat--me{border:1px solid var(--accent)}.seat--spec{color:var(--text-dim);font-size:13px}.online-info{margin:12px 0 0;padding:8px 10px;border-radius:8px;background:#d8a6571f;color:var(--accent);font-size:13px}.app__main{display:flex;gap:24px;align-items:flex-start;justify-content:center;flex-wrap:wrap}.app__board{position:relative;flex:0 0 auto;width:min(94vw,560px)}.app__side{flex:1 1 260px;max-width:320px;min-width:240px;display:flex;flex-direction:column;gap:16px}.board-wrap{position:relative;width:100%;aspect-ratio:96 / 107;border-radius:8px;box-shadow:0 12px 30px #00000073;container-type:inline-size}.board-grid{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.board-bg{fill:var(--board);stroke:var(--board-edge);stroke-width:1.2}.grid-line{stroke:var(--line);stroke-width:.4;stroke-linecap:round}.river-text{fill:var(--line);font-size:4px;letter-spacing:1px;text-anchor:middle;opacity:.7}.board-points{position:absolute;top:0;right:0;bottom:0;left:0}.point{position:absolute;width:10.4%;height:9.3%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;cursor:pointer}.point--from:after{content:"";position:absolute;width:74%;height:74%;border:2px dashed var(--accent);border-radius:6px;opacity:.85;pointer-events:none}.point--to:before{content:"";position:absolute;width:98%;height:98%;background:#d8a6574d;border:2px solid var(--accent);border-radius:6px;pointer-events:none;animation:lastTo .7s ease-out}@keyframes lastTo{0%{box-shadow:0 0 0 7px #d8a6578c;background:#d8a65799}to{box-shadow:0 0 #d8a65700;background:#d8a6574d}}.point--check:after{content:"";position:absolute;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 2px var(--red),0 0 12px 2px #c1272db3;animation:checkPulse .9s ease-in-out infinite;pointer-events:none}@keyframes checkPulse{0%,to{opacity:.45;transform:scale(.92)}50%{opacity:1;transform:scale(1.05)}}.move-dot{width:26%;height:26%;border-radius:50%;background:#3c783cd9;box-shadow:0 0 4px #0006;pointer-events:none}.capture-ring{position:absolute;width:92%;height:92%;border:2px solid rgba(60,140,60,.9);border-radius:50%;pointer-events:none}.anim-point{z-index:5;pointer-events:none;transition:left .28s cubic-bezier(.4,.7,.3,1),top .28s cubic-bezier(.4,.7,.3,1)}.piece{position:relative;width:92%;height:92%;border-radius:50%;border:none;padding:0;cursor:pointer;background:radial-gradient(circle at 35% 30%,#fdf2d8,#e8cfa0 70%,#cda86f);box-shadow:0 2px 4px #0006,inset 0 0 0 1px #78501e59;display:flex;align-items:center;justify-content:center;transition:transform .12s ease;font-family:inherit}.piece:hover{transform:scale(1.06)}.piece__ring{position:absolute;top:12%;right:12%;bottom:12%;left:12%;border-radius:50%;border:1.5px solid currentColor;opacity:.55}.piece__char{font-size:clamp(16px,6cqw,34px);font-weight:700;line-height:1}.piece--red{color:var(--red)}.piece--black{color:var(--black)}.piece--selected{box-shadow:0 0 0 2px var(--accent),0 2px 6px #00000080;transform:scale(1.08)}.controls,.history{background:var(--panel);border-radius:12px;padding:16px;box-shadow:0 6px 18px #0000004d}.control-group{margin-bottom:14px}.control-label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:6px;letter-spacing:2px}.segmented{display:flex;gap:6px}.segmented button{flex:1;padding:8px 0;border:1px solid #4a3f37;background:var(--panel-soft);color:var(--text-dim);border-radius:8px;cursor:pointer;font-family:inherit;font-size:14px;transition:all .15s ease}.segmented button.active{background:var(--accent);color:#2a1c08;border-color:var(--accent);font-weight:700}.last-move{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--panel-soft);border:1px solid #4a3f37}.last-move--ai{border-color:var(--accent);box-shadow:0 0 0 1px #d8a65766}.last-move__label{font-size:12px;color:var(--text-dim);letter-spacing:1px;white-space:nowrap}.last-move__text{font-size:22px;font-weight:700;letter-spacing:2px}.last-move__text--red{color:#ff8a8e}.last-move__text--black{color:#e2e2e2}.status-line{display:flex;align-items:center;gap:8px;margin:14px 0;flex-wrap:wrap}.thinking{display:inline-flex;align-items:center;gap:6px}.spinner{width:12px;height:12px;border:2px solid rgba(216,166,87,.3);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.mute-btn{margin-left:auto;padding:5px 10px;border:1px solid #4a3f37;background:var(--panel-soft);color:var(--text-dim);border-radius:8px;cursor:pointer;font-family:inherit;font-size:13px}.mute-btn--off{color:#ff9a9e;border-color:var(--red)}.result-reason{margin:-8px 0 16px;color:var(--text-dim);font-size:14px}.turn-badge{padding:6px 12px;border-radius:999px;font-size:14px;background:var(--panel-soft);border:1px solid #4a3f37}.turn-badge--red{color:#ff8a8e}.turn-badge--black{color:#cfcfcf}.check-badge{padding:6px 12px;border-radius:999px;background:#c1272d33;color:#ff9a9e;border:1px solid var(--red);font-size:14px;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}.control-actions{display:flex;gap:8px}.control-actions button{flex:1;padding:10px 0;border:1px solid #4a3f37;background:var(--panel-soft);color:var(--text);border-radius:8px;cursor:pointer;font-family:inherit;font-size:14px;transition:all .15s ease}.control-actions button:hover:not(:disabled){border-color:var(--accent)}.control-actions button:disabled{opacity:.4;cursor:not-allowed}.control-actions .danger:hover:not(:disabled){border-color:var(--red);color:#ff9a9e}.history__title{margin:0 0 10px;font-size:15px;color:var(--accent);letter-spacing:2px}.history__list{max-height:280px;overflow-y:auto}.history__empty{color:var(--text-dim);font-size:13px;margin:0}.history table{width:100%;border-collapse:collapse;font-size:13px}.history td{padding:4px 6px;border-bottom:1px solid #3a322c}.history__no{color:var(--text-dim);width:28px}.history__red{color:#ff8a8e}.history__black{color:#d6d6d6}.result-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0a080699;border-radius:8px;z-index:10}.result-card{background:var(--panel);padding:28px 32px;border-radius:16px;text-align:center;box-shadow:0 10px 30px #00000080}.result-card h2{margin:0 0 16px;font-size:24px;color:var(--accent)}.result-card button{padding:10px 24px;border:none;border-radius:8px;background:var(--accent);color:#2a1c08;font-weight:700;font-size:15px;cursor:pointer;font-family:inherit}.app__footer{margin-top:auto;padding-top:24px;text-align:center;color:var(--text-dim);font-size:12px;letter-spacing:2px}@media(max-width:720px){.app__main{flex-direction:column;align-items:center}.app__side{width:min(92vw,420px);max-width:420px}}