*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root {
    --cell:72px; --gap:7px; --pad:14px; --radius:16px;
    --bg:#070b14; --surface:#0f1623;
    --board-1:#1a5276; --board-2:#154360; --board-3:#2980b9;
    --red:#e74c3c; --red-light:#ff6b6b; --red-dark:#b71c1c;
    --yellow:#f1c40f; --yellow-light:#ffe066; --yellow-dark:#c49b00;
    --text:#e0e6ed; --text-dim:#7f8c9b; --accent:#3498db;
    --fast:.15s ease; --med:.25s ease;
}
body {
    background:var(--bg);
    background-image:
        radial-gradient(ellipse at 50% 0%,rgba(26,82,118,.13) 0%,transparent 60%),
        radial-gradient(ellipse at 50% 100%,rgba(231,76,60,.04) 0%,transparent 50%);
    color:var(--text); font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
    display:flex; justify-content:center; align-items:flex-start;
    min-height:100vh; padding:20px 12px 40px; overflow-x:hidden;
    user-select:none; -webkit-user-select:none;
}
#app { display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; max-width:660px; animation:fadeIn .5s ease-out; }
@keyframes fadeIn { from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:translateY(0)} }

/* Title */
h1 { font-size:2.2rem; font-weight:800; letter-spacing:5px; color:#fff; text-transform:uppercase; }
h1 .accent { background:linear-gradient(135deg,var(--red),var(--yellow)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* Controls */
.controls { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-items:flex-end; }
.control-group { display:flex; flex-direction:column; gap:3px; }
.control-group label { font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-dim); padding-left:4px; }
select,button {
    height:36px; padding:0 14px; border:1px solid rgba(52,152,219,.22); border-radius:9px;
    background:var(--surface); color:var(--text); font-size:13px; font-weight:500;
    cursor:pointer; outline:none; transition:all var(--fast);
    -webkit-appearance:none; appearance:none;
}
select { padding-right:30px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%237f8c9b' d='M1 3l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
select:hover,button:hover { border-color:var(--accent); background:#162235; transform:translateY(-1px); box-shadow:0 3px 10px rgba(0,0,0,.25); }
select:focus,button:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(52,152,219,.18); }
button { font-weight:600; letter-spacing:.4px; }
button#newGame { background:linear-gradient(135deg,#2471a3,#1a5276); border-color:rgba(41,128,185,.4); color:#fff; }
button#newGame:hover { background:linear-gradient(135deg,#2980b9,#2471a3); }
button.secondary { color:var(--text-dim); }
button:active { transform:translateY(0) scale(.97); }
.icon-btn { font-size:17px; padding:0 10px; }

/* Status */
.status-bar { display:flex; align-items:center; gap:10px; font-size:1.05rem; font-weight:600; min-height:28px; }
.turn-dot { width:14px; height:14px; border-radius:50%; background:var(--text-dim); transition:all .3s; box-shadow:0 0 6px rgba(255,255,255,.08); }
.turn-dot.red { background:var(--red); box-shadow:0 0 10px rgba(231,76,60,.45); }
.turn-dot.yellow { background:var(--yellow); box-shadow:0 0 10px rgba(241,196,15,.45); }
#status { transition:color .3s; }
.status-red { color:var(--red-light); }
.status-yellow { color:var(--yellow-light); }
.status-bar.thinking #status { animation:pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* Analysis spinner — stylish double ring */
.analysis-spinner {
    width:20px; height:20px; border-radius:50%; display:none; position:relative;
}
.analysis-spinner.active { display:block; }
.analysis-spinner::before, .analysis-spinner::after {
    content:''; position:absolute; inset:0; border-radius:50%;
    border:2.5px solid transparent;
}
.analysis-spinner::before {
    border-top-color:var(--accent); border-right-color:var(--accent);
    animation:spin .6s linear infinite;
}
.analysis-spinner::after {
    border-bottom-color:var(--red-light); border-left-color:var(--yellow);
    animation:spin .9s linear infinite reverse;
    inset:3px;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* Eval row (practice hints) */
.eval-row {
    display:grid; grid-template-columns:repeat(7,var(--cell));
    gap:var(--gap); padding:0 var(--pad);
    min-height:0; overflow:hidden;
    transition:min-height .3s ease,opacity .3s ease;
    opacity:0; pointer-events:none;
    margin-left: 28px; /* offset to match board with eval bar */
}
.eval-row.visible { min-height:54px; opacity:1; pointer-events:auto; }
.eval-cell { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px; }
.eval-cell .eval-label { font-size:10px; font-weight:700; letter-spacing:.5px; color:var(--text-dim); transition:color .2s; white-space:nowrap; }
.eval-cell .eval-bar-fill { width:26px; border-radius:4px; min-height:4px; max-height:30px; transition:height .4s ease,background .4s ease; }
.eval-cell.best .eval-label { color:#2ecc71; }
.eval-cell.best .eval-bar-fill { box-shadow:0 0 8px rgba(46,204,113,.4); }
.eval-cell.analyzing .eval-bar-fill { background:var(--text-dim)!important; animation:barPulse .8s ease-in-out infinite alternate; }
@keyframes barPulse { from{opacity:.25} to{opacity:.65} }

/* Board area (board + side eval bar) */
.board-area { display:flex; align-items:stretch; gap:0; position:relative; }

/* Side eval bar */
.eval-bar-side {
    width:16px; border-radius:8px; overflow:hidden; position:relative;
    background:var(--yellow); margin-right:10px; min-height:100px;
    box-shadow:inset 0 0 4px rgba(0,0,0,.3);
    transition:opacity .3s;
}
.eval-bar-side.hidden { opacity:0; width:0; margin:0; overflow:hidden; }
.eval-bar-fill-red { width:100%; background:var(--red); transition:height .6s ease; position:absolute; top:0; }
.eval-bar-label {
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-90deg);
    font-size:9px; font-weight:700; color:rgba(255,255,255,.7); white-space:nowrap;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* Board */
.board-wrapper { display:flex; flex-direction:column; align-items:center; position:relative; }
.hover-row { display:grid; grid-template-columns:repeat(7,var(--cell)); gap:var(--gap); padding:0 var(--pad); height:36px; align-items:end; }
.hover-piece { width:var(--cell); height:var(--cell); border-radius:50%; opacity:0; transform:scale(.5); transition:all .18s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
.hover-piece.visible { opacity:.6; transform:scale(.5); }
.hover-piece.red { background:radial-gradient(circle at 38% 32%,var(--red-light),var(--red)); }
.hover-piece.yellow { background:radial-gradient(circle at 38% 32%,var(--yellow-light),var(--yellow)); }
.col-labels { display:none; grid-template-columns:repeat(7,var(--cell)); gap:var(--gap); padding:0 var(--pad); height:16px; }
.col-labels.visible { display:grid; }
.col-label { text-align:center; font-size:11px; font-weight:600; color:var(--text-dim); letter-spacing:1px; }

.board {
    display:grid; grid-template-columns:repeat(7,var(--cell)); grid-template-rows:repeat(6,var(--cell));
    gap:var(--gap); padding:var(--pad);
    background:linear-gradient(160deg,var(--board-3),var(--board-1) 40%,var(--board-2));
    border-radius:var(--radius);
    box-shadow:0 14px 44px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.25),0 0 0 1px rgba(41,128,185,.25),inset 0 1px 2px rgba(255,255,255,.07);
    position:relative; overflow:visible;
}

/* Cells */
.cell {
    width:var(--cell); height:var(--cell); border-radius:50%; background:var(--bg);
    box-shadow:inset 0 4px 10px rgba(0,0,0,.65),inset 0 -2px 5px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.15);
    position:relative; cursor:pointer; transition:box-shadow var(--fast);
}
.cell.appear { animation:cellAppear .25s ease-out backwards; }
@keyframes cellAppear { from{transform:scale(.2);opacity:0} to{transform:scale(1);opacity:1} }
.cell.col-hover { box-shadow:inset 0 4px 10px rgba(0,0,0,.45),inset 0 -2px 5px rgba(0,0,0,.15),0 0 10px rgba(52,152,219,.22); }

/* Pieces — glossy */
.cell.red { background:radial-gradient(circle at 36% 32%,var(--red-light),var(--red) 55%,var(--red-dark)); box-shadow:inset 0 3px 10px rgba(255,255,255,.25),inset 0 -3px 7px rgba(0,0,0,.2),0 3px 8px rgba(0,0,0,.3); }
.cell.yellow { background:radial-gradient(circle at 36% 32%,var(--yellow-light),var(--yellow) 55%,var(--yellow-dark)); box-shadow:inset 0 3px 10px rgba(255,255,255,.28),inset 0 -3px 7px rgba(0,0,0,.18),0 3px 8px rgba(0,0,0,.3); }
.cell.red::after,.cell.yellow::after { content:''; position:absolute; top:10%; left:18%; width:30%; height:20%; background:radial-gradient(ellipse,rgba(255,255,255,.4) 0%,transparent 70%); border-radius:50%; pointer-events:none; }

/* Flat piece style */
body.flat-pieces .cell.red { background:var(--red); box-shadow:inset 0 2px 4px rgba(255,255,255,.15),0 2px 6px rgba(0,0,0,.3); }
body.flat-pieces .cell.yellow { background:var(--yellow); box-shadow:inset 0 2px 4px rgba(255,255,255,.15),0 2px 6px rgba(0,0,0,.3); }
body.flat-pieces .cell.red::after, body.flat-pieces .cell.yellow::after { display:none; }

/* Move numbers */
.cell[data-move]::before { content:attr(data-move); position:absolute; inset:0; display:none; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:rgba(255,255,255,.75); text-shadow:0 1px 3px rgba(0,0,0,.6); pointer-events:none; z-index:2; }
body.show-move-nums .cell[data-move]::before { display:flex; }

/* Last move ring */
.cell.last-move { box-shadow:inset 0 3px 10px rgba(255,255,255,.25),inset 0 -3px 7px rgba(0,0,0,.2),0 0 0 3px rgba(255,255,255,.28),0 3px 8px rgba(0,0,0,.3); }

/* Threats */
.cell.threat::before { content:''; position:absolute; top:50%; left:50%; width:20px; height:20px; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; z-index:2; animation:threatPulse 1.4s ease-in-out infinite; }
.cell.threat-red::before { background:rgba(231,76,60,.35); }
.cell.threat-yellow::before { background:rgba(241,196,15,.35); }
@keyframes threatPulse { 0%,100%{opacity:.25;transform:translate(-50%,-50%) scale(.4)} 50%{opacity:.7;transform:translate(-50%,-50%) scale(1)} }

/* Line preview (practice hover) — HIGH VISIBILITY */
.cell.line-mine {
    outline:3px solid #2ecc71; outline-offset:-3px; z-index:3;
    box-shadow:inset 0 0 14px rgba(46,204,113,.5), 0 0 10px rgba(46,204,113,.35) !important;
}
.cell.line-block {
    outline:3px solid #e74c3c; outline-offset:-3px; z-index:3;
    box-shadow:inset 0 0 14px rgba(231,76,60,.5), 0 0 10px rgba(231,76,60,.35) !important;
}
.cell.line-target {
    outline:3px solid #fff; outline-offset:-3px; z-index:4;
    box-shadow:inset 0 0 16px rgba(255,255,255,.4), 0 0 12px rgba(255,255,255,.4) !important;
}

/* Floating piece (drop animation) */
.floating-piece { position:absolute; border-radius:50%; z-index:20; will-change:transform; pointer-events:none; }
.floating-piece.red { background:radial-gradient(circle at 36% 32%,var(--red-light),var(--red) 55%,var(--red-dark)); box-shadow:inset 0 3px 10px rgba(255,255,255,.25),inset 0 -3px 7px rgba(0,0,0,.2),0 4px 12px rgba(0,0,0,.4); }
.floating-piece.yellow { background:radial-gradient(circle at 36% 32%,var(--yellow-light),var(--yellow) 55%,var(--yellow-dark)); box-shadow:inset 0 3px 10px rgba(255,255,255,.28),inset 0 -3px 7px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.4); }
.floating-piece::after { content:''; position:absolute; top:10%; left:18%; width:30%; height:20%; background:radial-gradient(ellipse,rgba(255,255,255,.4) 0%,transparent 70%); border-radius:50%; }
body.flat-pieces .floating-piece.red { background:var(--red); box-shadow:0 4px 12px rgba(0,0,0,.4); }
body.flat-pieces .floating-piece.yellow { background:var(--yellow); box-shadow:0 4px 12px rgba(0,0,0,.4); }
body.flat-pieces .floating-piece::after { display:none; }

/* Win */
.cell.win-piece { animation:winPulse .8s ease-in-out infinite alternate; z-index:5; }
@keyframes winPulse { 0%{transform:scale(1);filter:brightness(1)} 100%{transform:scale(1.07);filter:brightness(1.3);box-shadow:inset 0 3px 10px rgba(255,255,255,.4),0 0 18px rgba(255,255,255,.35),0 0 36px rgba(255,255,255,.12)} }
.cell.dimmed { opacity:.3; transition:opacity .5s; }
.board.shake { animation:boardShake .5s ease-in-out; }
@keyframes boardShake { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-5px) rotate(-.4deg)} 30%{transform:translateX(4px) rotate(.4deg)} 45%{transform:translateX(-3px)} 60%{transform:translateX(2px)} 75%{transform:translateX(-1px)} }

/* Game over banner */
.game-over-banner { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(0); background:rgba(7,11,20,.92); border:2px solid rgba(255,255,255,.12); border-radius:14px; padding:22px 36px; text-align:center; z-index:25; backdrop-filter:blur(8px); animation:bannerIn .4s .3s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes bannerIn { to{transform:translate(-50%,-50%) scale(1)} }
.game-over-banner h2 { font-size:1.5rem; font-weight:700; margin-bottom:3px; }
.game-over-banner p { font-size:.85rem; color:var(--text-dim); }

/* Practice feedback */
.practice-feedback { min-height:0; overflow:hidden; text-align:center; font-weight:600; font-size:.95rem; transition:min-height .3s,opacity .3s; opacity:0; }
.practice-feedback.visible { min-height:26px; opacity:1; }
.practice-feedback.perfect { color:#2ecc71; }
.practice-feedback.good { color:#82e0aa; }
.practice-feedback.inaccuracy { color:#f39c12; }
.practice-feedback.mistake { color:#e67e22; }
.practice-feedback.blunder { color:#e74c3c; }

/* Strategy panel */
.strategy-panel { min-height:0; overflow:hidden; transition:min-height .3s,opacity .3s; opacity:0; width:100%; max-width:540px; }
.strategy-panel.visible { min-height:24px; opacity:1; }
.strategy-items { display:flex; flex-direction:column; gap:4px; }
.strategy-item { display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--text-dim); padding:3px 8px; border-radius:6px; background:rgba(255,255,255,.03); }
.strategy-item .si-icon { font-size:1rem; flex-shrink:0; }
.strategy-item.tip-win { color:#2ecc71; }
.strategy-item.tip-danger { color:#e74c3c; }
.strategy-item.tip-info { color:var(--accent); }
.strategy-item.tip-neutral { color:var(--text-dim); }

/* Line summary */
.line-summary { min-height:0; overflow:hidden; text-align:center; font-size:.8rem; color:var(--text-dim); transition:min-height .2s,opacity .2s; opacity:0; }
.line-summary.visible { min-height:20px; opacity:1; }

/* Move history */
.move-history { display:flex; gap:3px; flex-wrap:wrap; max-width:540px; justify-content:center; min-height:0; transition:min-height .3s,opacity .3s; opacity:0; padding:4px 6px; }
.move-history.visible { min-height:26px; opacity:1; }
.move-dot {
    width:18px; height:18px; border-radius:50%; font-size:8px; font-weight:700;
    display:flex; align-items:center; justify-content:center;
    color:rgba(255,255,255,.8); border:2px solid transparent;
    cursor:default; transition:transform .12s;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
    flex-shrink:0;
}
.move-dot:hover { transform:scale(1.25); }
.move-dot.q-perfect { background:#2ecc71; }
.move-dot.q-good { background:#82e0aa; }
.move-dot.q-inaccuracy { background:#f39c12; }
.move-dot.q-mistake { background:#e67e22; }
.move-dot.q-blunder { background:#e74c3c; }
.move-dot.q-unknown { background:rgba(255,255,255,.12); }

/* Info bar */
.info-bar { display:flex; gap:16px; align-items:center; font-size:11px; color:var(--text-dim); letter-spacing:.8px; text-transform:uppercase; min-height:16px; }
.engine-info { font-variant-numeric:tabular-nums; transition:opacity .3s; }

#confetti { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:100; }

/* Settings overlay */
.settings-overlay { position:fixed; inset:0; z-index:50; opacity:0; visibility:hidden; transition:opacity .3s,visibility .3s; }
.settings-overlay.open { opacity:1; visibility:visible; }
.settings-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); }
.settings-panel { position:absolute; right:0; top:0; bottom:0; width:min(380px,90vw); background:var(--surface); border-left:1px solid rgba(255,255,255,.06); transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); overflow-y:auto; padding:24px; display:flex; flex-direction:column; gap:16px; }
.settings-overlay.open .settings-panel { transform:translateX(0); }
.settings-header { display:flex; justify-content:space-between; align-items:center; }
.settings-header h2 { font-size:1.2rem; font-weight:700; }
.close-btn { width:32px; height:32px; border-radius:8px; border:1px solid rgba(255,255,255,.1); background:transparent; color:var(--text); font-size:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all var(--fast); }
.close-btn:hover { background:rgba(255,255,255,.08); transform:none; box-shadow:none; }
.settings-section h3 { font-size:11px; text-transform:uppercase; letter-spacing:2px; color:var(--accent); margin-bottom:8px; border-bottom:1px solid rgba(52,152,219,.15); padding-bottom:5px; }
.setting-row { display:flex; justify-content:space-between; align-items:center; padding:5px 0; }
.setting-row label:first-child { font-size:13px; color:var(--text); flex:1; }
.toggle { position:relative; width:42px; height:24px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; border-radius:12px; cursor:pointer; background:#2c3e50; transition:background .25s; }
.toggle-slider::before { content:''; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .25s; }
.toggle input:checked+.toggle-slider { background:var(--accent); }
.toggle input:checked+.toggle-slider::before { transform:translateX(18px); }
.range-wrap { display:flex; align-items:center; gap:8px; }
.range-wrap input[type=range] { width:100px; accent-color:var(--accent); }
.range-val { font-size:12px; color:var(--accent); font-weight:600; min-width:28px; text-align:right; }
.settings-footer { margin-top:auto; padding-top:12px; }
.settings-footer p { font-size:11px; color:var(--text-dim); line-height:1.6; }

/* Responsive */
@media (max-width:580px) {
    :root { --cell:min(12.5vw,64px); --gap:1.2vw; --pad:2.5vw; --radius:12px; }
    h1 { font-size:1.5rem; letter-spacing:3px; }
    .controls { gap:5px; } select,button { height:32px; padding:0 9px; font-size:11px; border-radius:7px; }
    .status-bar { font-size:.92rem; } .hover-row { height:28px; }
    .eval-row.visible { min-height:42px; } .eval-row { margin-left:22px; }
    .eval-bar-side { width:12px; margin-right:6px; }
}
@media (max-width:380px) { :root { --cell:12vw; --gap:1vw; --pad:2vw; } h1 { font-size:1.2rem; } .controls { gap:3px; } }
@media (hover:none) { .hover-row { height:8px; } .hover-piece { display:none; } }