:root{color:#0f172a;background:radial-gradient(circle at 20% 20%,#f6f8fb,#e2e8f0 50%,#cbd5e1 100%);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}html,body{overscroll-behavior:contain;height:100%;margin:0;overflow:auto}.page{max-width:1200px;height:auto;min-height:100vh;margin:0 auto;padding:16px 24px 80px;overflow:visible}header{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.layout{grid-template-columns:1fr 1fr;gap:16px;display:grid}.left,.right{flex-direction:column;gap:12px;display:flex;overflow-y:visible}.board{aspect-ratio:1;background:0 0;border:8px solid #2f2f2f;width:100%;max-width:520px;box-shadow:0 12px 24px #00000038}.board.rotated,.board.rotated .piece{transform:rotate(180deg)}.rank{grid-template-columns:repeat(8,1fr);height:12.5%;display:grid}.square{cursor:pointer;justify-content:center;align-items:center;font-size:32px;display:flex}.square.light{background:#f0d9b5}.square.dark{background:#b58863}.square.last{outline:3px solid #22c55e}.piece{opacity:1;color:#0f0f0f;font-family:Segoe UI Symbol,Noto Sans Symbols2,Arial Unicode MS,sans-serif;font-weight:800}.piece.white{filter:invert()brightness(1.1);text-shadow:0 0 2px #00000059}.piece.black{filter:none;text-shadow:0 0 1px #e0c48f}.piece.bishop.white{text-shadow:0 0 2px #000,0 0 5px #000,0 0 7px #000c}.piece.bishop.black{text-shadow:0 0 2px #f4e8d5,0 0 5px #ffffffbf}.panel{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#fffc;border-radius:12px;padding:12px;overflow:visible;box-shadow:0 4px 12px #0000001a}.form{gap:8px;display:grid}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;display:grid}.form-col{flex-direction:column;gap:6px;display:flex}.fullwidth{width:100%;margin-top:8px}.form input{background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:8px}.form input:disabled{color:#64748b;cursor:not-allowed;background:#e2e8f0;border-style:dashed;border-color:#94a3b8}.panel button{color:#fff;cursor:pointer;background:#0f172a;border:none;border-radius:10px;margin-right:6px;padding:8px 12px}.panel button:disabled{color:#6b7280;cursor:not-allowed;background:#cbd5e1}.chat-panel{flex-direction:column;gap:8px;max-height:none;display:flex}.chat-messages{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;min-height:40px;max-height:80px;padding:8px;overflow-y:auto}.chat-item{margin-bottom:6px;font-size:13px}.chat-sender{margin-right:6px;font-weight:700}.move-list,.positions,.game-list{max-height:200px;overflow-y:auto}.move-row,.game-row,.position-row{border-bottom:1px solid #e2e8f0;justify-content:space-between;padding:6px 0;font-size:14px;display:flex}.time{font-variant-numeric:tabular-nums;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:24px;font-weight:700}.clocks{grid-template-columns:repeat(2,1fr);align-items:center;gap:8px;display:grid}.clock-col{flex-direction:column;align-items:stretch;gap:6px;display:flex}.clock{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;flex-direction:column;justify-content:center;min-height:72px;padding:8px;display:flex}.clock.active{border-color:#22c55e;box-shadow:0 0 0 2px #bbf7d0}.controls{flex-wrap:wrap;gap:6px;display:flex}.status{align-items:center;gap:8px;display:flex}.dot{border-radius:50%;width:10px;height:10px;display:inline-block}.dot.green{background:#22c55e}.panel button.danger{background:#b91c1c}.viewer-row{align-items:center;gap:8px;display:flex}.viewer-row input{border:1px solid #cbd5e1;border-radius:8px;flex:1;padding:8px}.error{color:#b91c1c;font-weight:600}.modal-overlay{z-index:50;background:#00000073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal{text-align:center;background:#fff;border-radius:12px;width:90%;max-width:360px;padding:16px;box-shadow:0 10px 30px #00000040}.modal p{margin-top:0;margin-bottom:12px;font-weight:700}.modal button{color:#fff;cursor:pointer;background:#0f172a;border:none;border-radius:10px;padding:10px 16px}.guide-open-btn{color:#fff;cursor:pointer;background:#0d6a33;border:none;border-radius:8px;padding:6px 12px;font-size:.9rem;font-weight:700}.modal.guide-modal{text-align:left;width:94%;max-width:600px;max-height:85vh;padding:0;overflow-y:auto}.guide-head{z-index:1;color:#fff;background:#0d6a33;border-radius:12px 12px 0 0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex;position:sticky;top:0}.guide-title{font-size:1.05rem;font-weight:800}.modal.guide-modal .guide-close{color:#fff;background:#ffffff2e;border-radius:8px;width:32px;height:32px;padding:0;font-size:1rem;line-height:1}.guide-body{color:#1f2937;padding:14px 18px 20px;line-height:1.55}.guide-body h3{color:#0f172a;margin:18px 0 8px;font-size:1.02rem}.guide-body h3:first-child{margin-top:4px}.guide-body h3 small{color:#64748b;font-size:.8rem;font-weight:600}.guide-body ol{margin:0;padding-left:22px}.guide-body ol li{margin-bottom:7px}.gkey{color:#0a5429;white-space:nowrap;background:#e7f0e8;border-radius:6px;padding:1px 7px;font-size:.85em;font-weight:700;display:inline-block}.guide-note{background:#ebf2ec;border:1px solid #cfe2d4;border-left:4px solid #0d6a33;border-radius:10px;margin-top:18px;padding:12px 14px}.guide-note b{margin-bottom:6px;display:inline-block}.guide-note ul{margin:0;padding-left:20px}.guide-note ul li{margin-bottom:6px}@media (width<=900px){.layout{grid-template-columns:1fr}.board{max-width:100%}}.actions{align-items:center;gap:8px;display:flex}.small{color:#475569;font-size:12px}.indicators{flex-wrap:wrap;align-items:center;gap:10px;margin-top:8px;display:flex}.indicator{align-items:center;gap:6px;font-size:13px;display:flex}.lamp{border:1px solid #0f172a;border-radius:50%;width:12px;height:12px;display:inline-block}.lamp.red{background:#dc2626}.lamp.green{background:#16a34a}.piece{-webkit-user-select:none;user-select:none;font-family:Segoe UI Symbol,Noto Sans Symbols2,Noto Sans Symbols,Segoe UI,Arial,sans-serif;font-size:40px;font-weight:800;line-height:1}.piece.white{color:#fff;text-shadow:0 0 2px #000c,0 0 4px #0009}.piece.black{color:#000;text-shadow:0 0 2px #fff9,0 0 4px #fff6}.square.light .piece{filter:drop-shadow(0 0 2px #00000059)}.square.dark .piece{filter:drop-shadow(0 0 2px #ffffff59)}.square.selected{outline:3px solid #22c55e;box-shadow:inset 0 0 0 2px #22c55e59}.scoresheet-header{justify-content:center;align-items:center;margin-bottom:10px;display:flex}.scoresheet-title{text-align:center;flex-wrap:nowrap;justify-content:center;align-items:center;gap:20px;font-size:14px;font-weight:800;display:flex}.scoresheet-result{color:#0b5c0b;text-shadow:0 1px 2px #00000026;margin-top:4px;font-size:18px;font-weight:800}.scoresheet-result--blink{animation:1s infinite alternate blink}@keyframes blink{0%{opacity:1}to{opacity:.4}}@keyframes blink-strong{0%{opacity:1}50%{opacity:.7}to{opacity:1}}.suggestion{background:#ecfeff;border:1px solid #06b6d4;border-radius:8px;margin-top:8px;padding:8px}.col-name{background:#f8fafc;border:1px solid #cbd5e1;border-radius:10px;flex-direction:column;gap:4px;padding:8px 10px;display:flex}.col-name .label{letter-spacing:.5px;color:#475569;font-size:12px}.col-name .value{font-weight:700}.left-name{text-align:left}.right-name{text-align:right}.scoresheet{border:1px solid #cbd5e1;border-radius:10px;flex-direction:column;display:flex;overflow:hidden}.scoresheet-head,.scoresheet-row{grid-template-columns:70px 1fr 1fr;align-items:center;gap:12px;padding:8px 10px;display:grid}.scoresheet-head{color:#f8fafc;background:#0f172a;font-weight:700}.scoresheet-row:nth-child(odd){background:#f8fafc}.scoresheet-row:nth-child(2n){background:#eef2f6}.online-badge{color:#f8fafc;background:#0ea5e9;border-radius:999px;padding:6px 12px;font-weight:800;box-shadow:0 4px 12px #0ea5e94d}.turn-indicator{color:#22c55e;text-shadow:0 0 4px #22c55e59;text-align:center;word-break:break-word;font-size:13px;line-height:1.3}.col-num{text-align:right;padding-right:8px;font-weight:700}.col-move{font-family:JetBrains Mono,Fira Code,Consolas,monospace}.scoresheet-panel{max-height:360px;overflow:hidden}.scoresheet{scrollbar-width:thin;max-height:320px;position:relative;overflow-y:auto}.scoresheet-head{z-index:2;position:sticky;top:0;box-shadow:0 2px 4px #0000001f}@media (width<=600px){.chat-panel{max-height:120px}.chat-messages{max-height:80px}}