:root{--cell: 165px;--gap: 18px;--board-pad: 26px;--layout-base: calc(var(--cell) * 3 + var(--gap) * 2 + var(--board-pad) * 2);--board-border: #d3dbeb;--board-bg: linear-gradient(135deg, #eef2ff, #f8fafc);--cell-bg: #ffffff;--cell-border: #d7dee9;--accent: #4b6bfb;--piece-size: 96px}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#ccc;color:#0f172a;display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px}.wrap{background:#fff;border:1px solid #e5e7eb;border-radius:24px;box-shadow:0 18px 45px #0f172a2e;padding:32px;width:min(100%,calc(var(--layout-base) + 120px));margin:0 auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}.title{font-size:27px;font-weight:700;letter-spacing:.2px}.turn-section{display:flex;align-items:center;gap:14px;margin-left:auto}@media(max-width:640px){.topbar{flex-direction:column;align-items:flex-start}.turn-section{flex-wrap:wrap;justify-content:flex-start;margin-left:0}}.status{font-size:14px;padding:6px 10px;border-radius:999px;background:#eef2ff;border:1px solid #e0e7ff;display:flex;align-items:center;gap:6px}.turn-section .status{margin-right:4px}.status .mini-piece{width:14px;height:14px;border-radius:50%;display:inline-block}.mini-red{background:radial-gradient(circle at 30% 30%,#ff7b7b,#d72626)}.mini-black{background:radial-gradient(circle at 30% 30%,#9aa3ad,#111827)}.board-shell{width:min(100%,var(--layout-base));max-width:100%;aspect-ratio:1;background:var(--board-bg);border-radius:28px;border:2px solid var(--board-border);box-shadow:inset 0 1px #ffffffe6,inset 0 -1px #6e78a026,0 28px 60px #0f172a1f;position:relative;overflow:hidden;margin:18px auto 22px}.board{position:relative;z-index:2;width:100%;height:100%;padding:var(--board-pad);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:var(--gap);-webkit-user-select:none;user-select:none;touch-action:manipulation;box-sizing:border-box}.board-lines{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.cell{background:var(--cell-bg);border:1.5px solid var(--cell-border);border-radius:18px;position:relative;display:flex;align-items:center;justify-content:center;transition:box-shadow .15s ease,transform .05s ease;cursor:pointer}.cell.forbidden-red{background:linear-gradient(135deg,#d7262624,#ff7b7b14),var(--cell-bg)}.cell.forbidden-black{background:linear-gradient(135deg,#0f172a29,#94a3b814),var(--cell-bg)}.cell:hover{box-shadow:inset 0 0 0 4px #4b6bfb14}.cell.highlight{outline:2px dashed var(--accent);outline-offset:-8px;box-shadow:inset 0 0 0 4px #4b6bfb14}.cell-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(42px,10vw,84px);font-weight:700;color:#0f172a14;pointer-events:none;-webkit-user-select:none;user-select:none;letter-spacing:.08em;text-transform:uppercase}.cell.win{box-shadow:inset 0 0 0 5px gold}.piece{width:var(--piece-size);height:var(--piece-size);border-radius:50%;box-shadow:0 4px 10px #00000026,inset 0 0 0 2px #ffffffb3;transition:transform .08s ease;position:relative}.piece.red{background:radial-gradient(circle at 30% 30%,#ff7b7b,#d72626)}.piece.black{background:radial-gradient(circle at 30% 30%,#9aa3ad,#111827)}.cell.selected .piece{transform:scale(1.05)}.piece.last-move:after{content:"";position:absolute;top:50%;left:50%;width:calc(var(--piece-size) * .11);height:calc(var(--piece-size) * .11);transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 3px #ffffff80}.piece.red.last-move:after{background:#ffd7d7}.piece.black.last-move:after{background:#c0c6cf}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}.piece.shake{animation:shake .4s linear}.controls{display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}.history-btn{min-width:120px;display:inline-flex;align-items:center;justify-content:center;gap:8px}.history-arrow{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:#475569;font-size:15px;line-height:1}.history-arrow:before{content:"▾";display:block;transition:transform .2s ease}.history-btn[aria-expanded=true] .history-arrow:before{transform:rotate(180deg)}.history-panel{max-height:0;overflow:hidden;transition:max-height .3s ease,opacity .3s ease,padding .3s ease;opacity:0;border-radius:18px;border:1px solid #e2e8f0;background:#ffffffa6;box-shadow:inset 0 1px #fffc,0 12px 30px #0f172a14;padding:0 20px;margin-top:0}.history-panel.open{max-height:260px;opacity:1;padding:18px 20px 20px;margin-top:10px}.history-list{margin:0;padding:0 0 0 22px;font-size:15px;color:#1e293b;max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;list-style:none}.history-list li{line-height:1.4}.history-empty{list-style:none;padding:4px 0;color:#94a3b8}.history-entry__player{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;margin-right:6px;border:1px solid rgba(15,23,42,.1);box-shadow:inset 0 0 0 2px #fff9;vertical-align:middle}.history-chip--red{background:radial-gradient(circle at 30% 30%,#ff7b7b,#d72626)}.history-chip--black{background:radial-gradient(circle at 30% 30%,#9aa3ad,#111827)}.history-entry__index{font-weight:700;margin-right:6px;color:#0f172a}.history-entry__coords{font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;font-size:14px;color:#475569}.history-entry__arrow{color:#cbd5f5;margin:0 6px}@media(max-width:520px){:root{--gap: 12px;--board-pad: 18px;--piece-size: clamp(64px, 22vw, 88px)}body{padding:0;align-items:flex-start;justify-content:flex-start}.wrap{padding:20px 0 28px;border-radius:0;width:100%}.board{margin:18px 0 22px;border-radius:0}.controls{flex-direction:column;align-items:stretch;gap:14px}.move-info{margin-left:0}.history-btn{width:100%}.history-panel.open{max-height:320px}.wrap>:not(.board){padding-inline:16px}}.control-buttons{display:flex;gap:8px;align-items:center}.move-info{margin-left:auto;font-size:15px;display:flex;align-items:baseline;gap:6px;color:#334155}.move-label{text-transform:uppercase;font-size:13px;letter-spacing:.05em;color:#94a3b8}.move-value{font-weight:700;font-size:20px;color:#fff;background:#0f172a;padding:6px 12px;border-radius:10px;min-width:52px;text-align:center;box-shadow:inset 0 1px #ffffff1a}.rules{margin-top:20px;color:#1e293b}.rules-divider{border-top:1px dashed #c7d2fe;margin-bottom:14px}.rules-title{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;color:#0f172a}.rules-list{margin:0;padding-left:18px;font-size:14px;line-height:1.45;color:#475569}.rules-list li+li{margin-top:6px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #e5e7eb;background:#fff;padding:10px 14px;border-radius:12px;font-weight:600;cursor:pointer;transition:color .15s ease,background .15s ease,box-shadow .15s ease,border-color .15s ease}button:hover{box-shadow:0 8px 26px #0f172a1a;border-color:#cbd5f5}button:active{transform:none}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon-btn{width:44px;height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;color:#111827;box-shadow:inset 0 0 0 1px #fff3}.icon-btn:hover{transform:none;background:#f8fafc}.icon-btn.primary{box-shadow:none}.icon-btn.primary:hover{background:#050c1f}.primary{background:#111827;color:#fff;border-color:#111827}.secondary{background:#fff;color:#111827;border-color:#d1d5db}.icon{width:22px;height:22px;display:inline-block;background-color:currentColor;mask-position:center;mask-repeat:no-repeat;mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain}.icon-play{mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-player-play'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'/%3e%3cpath%20d='M7%204v16l13%20-8z'%20/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-player-play'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'/%3e%3cpath%20d='M7%204v16l13%20-8z'%20/%3e%3c/svg%3e")}.icon-undo{mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-arrow-back-up'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'/%3e%3cpath%20d='M9%2014l-4%20-4l4%20-4'%20/%3e%3cpath%20d='M5%2010h11a4%204%200%201%201%200%208h-1'%20/%3e%3c/svg%3e");-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%20class='icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-arrow-back-up'%3e%3cpath%20stroke='none'%20d='M0%200h24v24H0z'%20fill='none'/%3e%3cpath%20d='M9%2014l-4%20-4l4%20-4'%20/%3e%3cpath%20d='M5%2010h11a4%204%200%201%201%200%208h-1'%20/%3e%3c/svg%3e")}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}.status.pulse{animation:pulse-turn .9s ease}@keyframes pulse-turn{0%{box-shadow:0 0 #4b6bfb66;transform:scale(1)}50%{box-shadow:0 0 0 6px #4b6bfb00;transform:scale(1.04)}to{box-shadow:0 0 #4b6bfb00;transform:scale(1)}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a8c;display:none;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-overlay.open{display:flex}.modal{background:#ffffffd1;border:1px solid #e5e7eb;border-radius:20px;box-shadow:0 20px 60px #0f172a40;padding:32px 26px 24px;text-align:center;width:min(92vw,520px)}.mode-modal{width:min(92vw,480px)}.modal-piece{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;box-shadow:0 10px 16px #0f172a40,inset 0 0 0 2px #ffffffb3}.modal-piece.red{background:radial-gradient(circle at 30% 30%,#ff7b7b,#d72626)}.modal-piece.black{background:radial-gradient(circle at 30% 30%,#9aa3ad,#111827)}.modal-piece__default{background:#e2e8f0}.mode-sub{font-size:16px;color:#475569;margin-bottom:22px}.mode-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.mode-actions button{min-width:180px}.move-badge{display:inline-flex;align-items:center;justify-content:center;background:#111827;color:#fff;border-radius:8px;padding:2px 12px;min-width:32px;height:28px;font-size:16px;font-weight:700;letter-spacing:.5px;margin:0 6px}.modal-title{font-size:32px;font-weight:900;letter-spacing:.3px;margin-bottom:12px}.modal-sub{font-size:14px;color:#475569;margin-bottom:18px}.modal-actions{display:flex;gap:10px;justify-content:center}.modal-actions button{flex:1;width:100%}