/* V2 Chess Puzzles */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0f1923;
  --bg-r:#111b27;
  --text:#c8d0d8;
  --dim:#52606d;
  --accent:#4fc3f7;
  --ok:#4caf50;
  --err:#e74c3c;
  --warn:#f5c518;
  --bd:rgba(255,255,255,0.07);
  --inp:rgba(255,255,255,0.06);
}

html,body{height:100%;background:var(--bg);color:var(--text);
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px;line-height:1.55;
  /* tnum = tabular numerals so Play% / Win% / Eval / Rating columns align. */
  font-feature-settings:'tnum' 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale}

/* ── Two-column shell ─────────────────────────────────── */
.v2{display:grid;grid-template-columns:2fr 1fr;height:100vh;overflow:hidden}
@media(max-width:780px){.v2{display:flex;flex-direction:column;height:auto;overflow:auto}}

.v2-left{
  background:var(--bg);
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  padding:70px 32px 32px;overflow:hidden
}
@media(max-width:780px){.v2-left{padding:30px 20px 20px;order:2}}

.v2-right{
  background:var(--bg-r);
  border-left:1px solid var(--bd);
  display:flex;flex-direction:column;
  overflow:hidden
}
@media(max-width:780px){.v2-right{display:contents}}
@media(max-width:780px){.v2-topbar{order:1;border-bottom:1px solid var(--bd);background:var(--bg-r);padding-top:max(10px,env(safe-area-inset-top,10px))}}
@media(max-width:780px){.v2-scroll{order:3;background:var(--bg)}}
.v2-mob-status{display:none;flex:1;text-align:center;font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:780px){.v2-mob-status{display:block}.board-above #status{display:none}}

/* ── Top bar ─────────────────────────────────────────── */
.v2-topbar{
  display:flex;align-items:center;justify-content:flex-end;
  padding:16px 28px 14px;gap:18px;flex-shrink:0;
  border-bottom:1px solid var(--bd)
}
.v2-topbar-user{color:var(--dim);font-size:12px;margin-right:auto}
.v2-ghost{
  background:none;border:none;color:var(--dim);cursor:pointer;
  font-size:12px;letter-spacing:.04em;padding:0;
  transition:color .15s
}
.v2-ghost:hover{color:var(--text)}
.v2-theme-toggle{background:none;border:none;color:var(--text);cursor:pointer;
  font-size:16px;padding:2px 4px;font-family:inherit;opacity:.8}
.v2-theme-toggle:hover{opacity:1}
.v2-pro-badge{font-size:9px;font-weight:600;letter-spacing:.04em;
  background:none;border:1px solid var(--bd);color:var(--dim);
  border-radius:20px;padding:1px 6px;line-height:1.4;align-self:center;}

/* ── Move notation panel ─────────────────────────────── */
#notation-panel{font-size:13px;font-family:'Courier New',monospace;
  padding:6px 8px;background:var(--bg-r);border:1px solid var(--bd);border-radius:4px;
  max-height:140px;overflow-y:auto}
.v2-not-tbl{border-collapse:collapse;width:100%}
.v2-not-tbl td{padding:1px 4px;vertical-align:middle}
.v2-not-tbl td:first-child{width:36px}
.v2-not-num{color:var(--dim);font-size:11px;user-select:none;text-align:right;padding-right:6px!important}
.v2-not-dim{color:var(--dim);opacity:.4}
.v2-not-move{cursor:pointer;padding:2px 6px;border-radius:3px;
  color:var(--text);display:inline-block;line-height:1.5}
.v2-not-move:hover{background:rgba(79,195,247,.15)}
.v2-not-move.cur{background:rgba(79,195,247,.22);color:#4fc3f7;font-weight:700}

/* ── Panel scroll area ───────────────────────────────── */
.v2-scroll{flex:1;overflow-y:auto;padding:20px 20px 40px;background:var(--bg-r)}

/* ── Panel visibility ───────────────────────────────── */
.v2-panel{display:none}
.v2-panel.active{display:block}

/* ── Section label ───────────────────────────────────── */
.v2-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--dim);margin-bottom:4px
}
.v2-heading{font-size:14px;font-weight:700;color:var(--text);margin-bottom:20px;letter-spacing:.02em}

/* ── Menu (home) ─────────────────────────────────────── */
.v2-menu{margin-top:8px}
.v2-menu-item{
  display:block;padding:14px 0;
  border-bottom:1px solid var(--bd);
  color:var(--text);text-decoration:none;
  font-size:14px;font-weight:700;letter-spacing:.02em;
  transition:color .12s
}
.v2-menu-item:first-child{border-top:1px solid var(--bd)}
.v2-menu-item:hover{color:var(--accent)}
.v2-menu-footer{display:flex;gap:10px;align-items:center;padding:16px 0 4px;margin-top:auto;}
.v2-menu-footer-link{font-size:11px;color:var(--dim);text-decoration:none;letter-spacing:.04em;}
.v2-menu-footer-link:hover{color:var(--text);}

/* ── Back link ───────────────────────────────────────── */
.v2-back{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;color:var(--dim);text-decoration:none;
  background:none;border:none;cursor:pointer;padding:0;
  font-family:inherit;letter-spacing:.04em;
  margin-bottom:20px;transition:color .15s
}
.v2-back:hover{color:var(--text)}
@media(max-width:780px){.v2-back-hide-mobile{display:none}}
@media(max-width:900px){#board-nav{display:none!important}}
@media(max-width:900px){#notation-panel{display:none!important}}
@media(max-width:900px){.hide-mobile{display:none!important}}
@media(max-width:900px){.v2-mobile-nav.mob-active{display:flex;align-items:center}}

/* ── Settings table ──────────────────────────────────── */
.v2-tbl{width:100%;border-collapse:collapse}
.v2-tbl tr{border-bottom:1px solid var(--bd)}
.v2-tbl tr:last-child{border-bottom:none}
.v2-tbl tr.no-border{border-bottom:none}
.v2-tbl td{padding:11px 0;vertical-align:middle}
.v2-tbl td.lbl{
  color:var(--dim);font-size:11px;text-transform:uppercase;
  letter-spacing:.07em;width:120px;padding-right:8px
}
.v2-tbl td.val{text-align:right}

/* ── Inputs ──────────────────────────────────────────── */
.v2-inp{
  background:var(--inp);border:1px solid var(--bd);
  color:var(--text);font-size:13px;padding:6px 10px;
  border-radius:3px;width:100%;font-family:inherit;
  box-sizing:border-box
}
.v2-inp:focus{outline:none;border-color:var(--accent)}
.v2-sel{
  background:var(--inp);border:1px solid var(--bd);
  color:var(--text);font-size:13px;padding:6px 10px;
  border-radius:3px;font-family:inherit;cursor:pointer;
  appearance:none;padding-right:8px
}
.v2-sel:focus{outline:none;border-color:var(--accent)}

/* ── Buttons ─────────────────────────────────────────── */
.v2-btn{
  background:none;color:var(--accent);border:1px solid var(--accent);
  padding:9px 22px;font-size:13px;font-weight:600;
  border-radius:3px;cursor:pointer;letter-spacing:.03em;
  transition:opacity .15s;width:100%;text-align:center;
  display:block;font-family:inherit
}
.v2-btn:hover{opacity:.72}
.v2-btn-line{
  background:none;border:1px solid var(--bd);color:var(--text);
  padding:8px 22px;font-size:13px;border-radius:3px;
  cursor:pointer;transition:border-color .15s;width:100%;
  text-align:center;display:block;font-family:inherit
}
.v2-btn-line:hover{border-color:var(--dim)}
.v2-btn-line:disabled{opacity:.35;cursor:not-allowed}
.v2-btn-warn{
  background:none;border:1px solid var(--err);color:var(--err);
  padding:8px 22px;font-size:13px;border-radius:3px;
  cursor:pointer;width:100%;text-align:center;
  display:block;font-family:inherit
}
.v2-btn-warn:hover{background:rgba(231,76,60,.08)}
.v2-btn-ok{
  background:none;border:1px solid #4caf50;color:#4caf50;
  padding:8px 22px;font-size:13px;border-radius:3px;
  cursor:pointer;width:100%;text-align:center;
  display:block;font-family:inherit
}
.v2-btn-ok:hover{background:rgba(76,175,80,.08)}
.v2-btn-ok:disabled{opacity:.35;cursor:not-allowed}

/* ── Actions row ─────────────────────────────────────── */
.v2-actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px}
.v2-actions .v2-btn,.v2-actions .v2-btn-line,.v2-actions .v2-btn-warn,.v2-actions .v2-btn-ok{flex:1 1 0;width:auto;min-width:0;padding:7px 10px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
.v2-actions form{flex:1 1 0;min-width:0;display:flex}
.v2-actions form .v2-btn-warn{flex:1 1 0}
.v2-btn-icon{font-style:normal;font-size:13px;line-height:1;opacity:.85}

/* ── Puzzle stats (right panel) ──────────────────────── */
.v2-stat{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--bd)
}
.v2-stat:last-child{border-bottom:none}
.v2-stat .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim)}
.v2-stat .val{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.v2-stat .val.mono{font-family:'Courier New',monospace}
.v2-stat .val.big{font-size:20px}

.v2-timer-warn{color:var(--warn)}
.v2-timer-danger{color:var(--err)}

/* ── Status ──────────────────────────────────────────── */
.v2-status{padding:4px 6px;font-size:14px;color:var(--text);text-align:center}
.v2-ok{color:var(--ok)}
.v2-err{color:var(--err)}

/* ── Common board nav row (below board, shared across puzzle + openings) ── */
.v2-board-nav{display:flex;align-items:center;justify-content:center;gap:2px;padding:6px 0;width:100%;max-width:min(800px,calc(100vh - 152px),100%)}
@media(max-width:780px){.v2-board-nav{max-width:calc(100vw - 40px)}}
.v2-nb{background:none;border:none;color:var(--text);cursor:pointer;font-size:14px;line-height:1;padding:5px 10px;border-radius:3px;transition:background .12s}
.v2-nb:hover{background:rgba(128,128,128,.13)}
.v2-nb:disabled{opacity:.35;cursor:not-allowed}
.v2-nb-copy{font-size:11px;letter-spacing:.04em;padding:5px 12px;margin:0 6px}

/* ── Divider ─────────────────────────────────────────── */
.v2-div{border:none;border-top:1px solid var(--bd);margin:14px 0}

/* ── Checkbox row ────────────────────────────────────── */
.v2-check{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-size:12px;color:var(--dim);padding:6px 0;
  user-select:none
}
.v2-check input{width:13px;height:13px;cursor:pointer;accent-color:var(--accent)}

/* ── Nav controls ────────────────────────────────────── */
.v2-nav{display:flex;align-items:center;gap:8px;margin:8px 0}
.v2-nav-btn{
  background:none;border:1px solid var(--bd);color:var(--text);
  padding:4px 12px;font-size:16px;border-radius:3px;cursor:pointer;
  transition:border-color .15s
}
.v2-nav-btn:hover{border-color:var(--dim)}
.v2-nav-btn:disabled{opacity:.35;cursor:not-allowed}
.v2-nav-lbl{flex:1;text-align:center;font-size:12px;color:var(--dim)}
.v2-sf-eval{font-size:12px;color:var(--dim);padding:4px 0}

/* ── Board-above: stacks top-status + pgn-bar above board-wrap ── */
.board-above{position:absolute;bottom:100%;left:0;right:0;display:flex;flex-direction:column}
#top-status{font-size:13px;font-family:'Courier New',monospace;color:var(--text);padding:2px 4px;text-align:center;white-space:nowrap;overflow-x:auto}
#top-status:empty{display:none}
#pgn-bar{width:100%;overflow-x:auto;white-space:nowrap;font-size:12px;font-family:'Courier New',monospace;padding:3px 4px 4px;border-bottom:1px solid var(--bd);scrollbar-width:thin;scrollbar-color:var(--bd) transparent;box-sizing:border-box;line-height:1.7;text-align:center}
/* pgn-bar always visible — always contains at least Start */
#pgn-bar::-webkit-scrollbar{height:3px}
#pgn-bar::-webkit-scrollbar-track{background:transparent}
#pgn-bar::-webkit-scrollbar-thumb{background:var(--bd);border-radius:2px}
.pgn-bar-num{color:var(--dim);padding:0 1px}
.pgn-bar-move{cursor:pointer;padding:1px 4px;border-radius:3px}
.pgn-bar-move:hover{background:rgba(128,128,128,.15)}
.pgn-bar-active{background:none!important;color:var(--accent)!important;border:1px solid var(--accent);border-radius:20px;padding:1px 8px}
.explain-move{cursor:pointer;color:var(--accent);border-bottom:1px solid rgba(79,195,247,.45);padding:0 1px;border-radius:2px}
.explain-move:hover{background:rgba(79,195,247,.12)}

/* ── Board outer — centres board-wrap; eval-bar and pgn-bar are absolute ── */
#board-outer{display:flex;justify-content:center;align-items:flex-start;width:100%}
#eval-bar{position:absolute;right:100%;top:0;bottom:0;margin-right:6px;background:#1c1c1c;border-radius:3px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
#eval-bar-white{position:absolute;bottom:0;left:0;width:100%;background:#efefef;transition:height 0.25s ease}
#eval-bar-markers{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}
.eval-tick{position:absolute;left:0;width:100%;height:1px;background:rgba(120,120,120,0.4);transform:translateY(50%)}
.eval-tick-zero{background:rgba(160,160,160,0.7);height:2px}

/* ── Openings visibility settings ───────────────────── */
html.op-hide-eval   #eval-bar                                { display:none!important }
html.op-hide-pgn    #ed-pgn-view                             { display:none!important }
html.op-hide-moves  .op-col-moves                            { display:none!important }
html.op-hide-learned .op-col-learned                         { display:none!important }

/* ── Board wrapper ───────────────────────────────────── */
.v2-board-wrap{position:relative;display:block;width:100%;max-width:min(800px,calc(100vh - 152px),100%);transition:filter .2s;margin:0}
/* Prevent native image context-menu on chess pieces */
.v2-board-wrap img{-webkit-touch-callout:none;user-select:none;}
/* GPU-accelerate piece elements for smoother mobile drag/animation */
.piece-417db{will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
@media(max-width:780px){.v2-board-wrap{max-width:calc(100vw - 40px)}}
/* Promotion picker — bubble over the target square when a pawn reaches
   the last rank. Position/left/top are set inline by board.js's
   _bShowPromotionPicker from the square's getBoundingClientRect, then
   clamped to stay inside the board wrap. */
/* Filter buttons (opening stats: rating band + time control) */
.ed-filter-btn{padding:3px 8px;font-size:11px;border:1px solid var(--bd);border-radius:10px;background:none;color:var(--dim);cursor:pointer;font-weight:400;transition:all .15s}
.ed-filter-btn:hover{border-color:var(--accent);color:var(--text)}
.ed-filter-btn.active{border-color:var(--accent);color:var(--accent);font-weight:600}
/* Autofill modal */
#autofill-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9000;display:flex;align-items:center;justify-content:center}
#autofill-modal{background:var(--bg-r);border:1px solid var(--bd);border-radius:8px;padding:20px 24px;max-width:340px;width:90%;box-shadow:0 8px 32px rgba(0,0,0,.4)}
#autofill-modal .af-title{font-size:15px;font-weight:700;margin-bottom:14px;color:var(--text)}
#autofill-modal .af-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:13px;color:var(--dim)}
#autofill-modal .af-row input[type=range]{flex:1;margin:0 10px;accent-color:var(--accent)}
#autofill-modal .af-row .af-val{min-width:24px;text-align:right;font-weight:600;color:var(--text)}
#autofill-modal .af-actions{display:flex;gap:8px;margin-top:16px}
#autofill-modal .af-actions button{flex:1;padding:8px 0;border-radius:4px;font-size:13px;cursor:pointer}
#autofill-modal .af-gen{background:var(--accent);color:#fff;border:none;font-weight:600}
#autofill-modal .af-cancel{background:none;border:1px solid var(--bd);color:var(--dim)}
#autofill-modal .af-status{font-size:12px;color:var(--dim);margin-top:10px;text-align:center}
#promotion-picker{position:absolute;z-index:100;display:flex;gap:2px;padding:4px;background:var(--bg-r);border:1px solid var(--bd);border-radius:4px;box-shadow:0 4px 16px rgba(0,0,0,.5)}
#promotion-picker button{width:48px;height:48px;background:var(--inp);border:1px solid var(--bd);border-radius:3px;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center}
#promotion-picker button:hover{background:var(--bg);border-color:var(--accent)}
#promotion-picker button img{width:100%;height:100%;pointer-events:none}
/* Mobile: hide the decorative SPA board (home / setup / openings menu /
   history / stats / subscribe / admin). Interactive pages override the
   spa_left block with #board-wrap / #board, so :has(#spa-board) only
   matches decorative layouts — puzzle / analysis / opening builder /
   opening training all stay visible. */
@media(max-width:780px){.v2-left:has(#spa-board){display:none}}
#board-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}
/* click-selected: corner bracket indicator (::before, see below) */
/* suppress browser focus outline and chessboard.js yellow highlight on all boards */
[id*="board"] [class*="square-"]{outline:none}
[id*="board"] img{outline:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
[class*="highlight1-"],[class*="highlight2-"]{box-shadow:none!important}

/* ── Board hint ──────────────────────────────────────── */
.v2-hint{font-size:12px;color:var(--dim);text-align:center;margin-top:8px;min-height:18px}

/* ── Viz section ─────────────────────────────────────── */
#viz-section{margin-top:8px;padding:8px 0;border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);margin-bottom:8px}
.viz-header{font-size:12px;color:var(--accent);margin-bottom:6px}
.viz-moves{font-family:'Courier New',monospace;font-size:13px;color:var(--text);line-height:1.6}

/* ── Login form ──────────────────────────────────────── */
.v2-form-row{margin-bottom:14px}
.v2-form-row label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);margin-bottom:5px}
.v2-form-error{color:var(--err);font-size:13px;margin-bottom:12px}

/* ── History ─────────────────────────────────────────── */

.v2-puzzle-row{
  display:flex;align-items:center;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--bd);cursor:pointer
}
.v2-puzzle-row:hover{background:rgba(255,255,255,.02);margin:0 -4px;padding-left:4px;padding-right:4px}
.v2-puzzle-meta{flex:1;min-width:0}
.v2-puzzle-result{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.v2-puzzle-result.ok{color:var(--ok)}
.v2-puzzle-result.fail{color:var(--err)}
.v2-puzzle-info{font-size:12px;color:var(--dim);margin-top:2px}

/* ── History left pane ───────────────────────────────── */
.v2-left.boards{
  justify-content:flex-start;align-items:flex-start;
  overflow-y:auto;padding:71px 20px 20px
}
#puzzle-list{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.v2-history-item{
  display:flex;flex-direction:column;gap:8px;padding:10px 8px;
  border-bottom:1px solid var(--bd);border-right:1px solid var(--bd);
  cursor:pointer;transition:background .12s;box-sizing:border-box;min-width:0
}
.v2-history-item:nth-child(3n){border-right-color:transparent}
.v2-history-item:hover{background:rgba(255,255,255,.04)}
/* Session rows */
.v2-session-row{width:100%;border-bottom:1px solid var(--bd);box-sizing:border-box}
.v2-sess-header{display:flex;align-items:center;gap:10px;padding:12px 10px;cursor:pointer;transition:background .12s}
.v2-sess-header:hover{background:rgba(255,255,255,.04)}
.v2-sess-main{flex:1;min-width:0}
.v2-sess-date{font-size:12px;color:var(--text);font-weight:500;margin-bottom:5px}
.v2-sess-stats{display:flex;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--dim);align-items:center}
.v2-sess-stats .ok{color:var(--ok);font-weight:600}
.v2-sess-stats .fail{color:var(--err);font-weight:600}
.v2-sess-type{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text);padding:1px 5px;font-weight:600}
.v2-sess-expand-btn{background:none;border:none;color:var(--dim);font-size:14px;cursor:pointer;padding:0 4px;flex-shrink:0}
.v2-sess-puzzles{padding:0}
.v2-sess-params{font-size:11px;color:var(--dim);margin-top:4px;display:flex;flex-wrap:wrap;gap:6px}
.v2-sess-param{background:rgba(255,255,255,.05);border:1px solid var(--bd);border-radius:3px;padding:1px 5px}
.v2-sess-puzzle-stats{font-size:11px;color:var(--dim);margin-top:3px}
#session-list{display:block}
.v2-sess-puzzle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;width:100%}
.v2-hist-board{width:100%;aspect-ratio:1;min-width:0}
.v2-hist-board > div{width:100%!important;height:100%!important}
.v2-hist-meta{min-width:0;padding-top:2px}
.v2-hist-rating{font-size:13px;font-weight:600;color:var(--text);margin:3px 0 2px}
.v2-hist-themes{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2-hist-date{font-size:11px;color:var(--dim);margin-top:3px}

/* ── Uniform settings inputs ─────────────────────────── */
.v2-tbl td.val .v2-inp,
.v2-tbl td.val .v2-sel{width:100%}

/* ── Stats ────────────────────────────────────────────── */
.v2-chart-wrap{width:100%}
.v2-stat-num{font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.v2-stat-group{margin-bottom:24px}
.v2-stat-group .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dim);margin-bottom:6px}

/* ── Session complete overlay ─────────────────────────── */
#session-complete-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.75);z-index:10000;
  align-items:center;justify-content:center
}
#session-complete-overlay.active{display:flex}
.sc-box{
  background:var(--bg-r);border:1px solid var(--bd);
  border-radius:12px;padding:24px 28px;text-align:center;
  max-width:460px;width:92%
}
.sc-img{
  width:100%;max-height:280px;object-fit:contain;border-radius:8px;
  margin:0 auto 14px;display:block
}
.sc-title{font-size:1.2rem;font-weight:700;margin-bottom:6px}
.sc-reason{font-size:.95rem;color:var(--accent);margin-bottom:20px;line-height:1.4}
.sc-actions{display:flex;gap:10px;justify-content:center}
.sc-actions button{padding:8px 20px;font-size:13px}

#fireworks-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:9999;display:none}

/* ── First Moves specific ─────────────────────────────── */
#board .fm-highlight{background:rgba(245,166,35,.55)!important}
#board .fm-target{background:rgba(100,180,255,.35)!important}
#board .fm-found{box-shadow:inset 0 0 0 1000px rgba(76,175,80,.50)!important}
#board .fm-wrong{background:rgba(229,57,53,.55)!important;transition:background .1s}
.highlight-hint{background:rgba(76,175,80,.55)!important}

/* ── BV specific ──────────────────────────────────────── */
/* highlight-sel-from/to: corner bracket indicator (::before, see below) */
.highlight-miss{background:rgba(255,100,50,0.50)!important}
.highlight-fp{background:rgba(200,50,200,0.40)!important}

.bv-badge{display:inline-block;padding:1px 6px;border-radius:8px;font-size:.72rem;font-weight:700;text-transform:uppercase}
.badge-check{background:#1e4620;color:#4caf50}
.badge-capture{background:#3d1a1a;color:#ef5350}
.badge-threat{background:#2d2200;color:#f5c518}
.badge-fp{background:#3a1a3a;color:#ce93d8}
.badge-miss{background:#2d1500;color:#ff8c42}

.bv-sel-chip{display:inline-flex;align-items:center;gap:4px;background:var(--inp);border:1px solid var(--bd);border-radius:12px;padding:3px 10px 3px 8px;font-size:.82rem;cursor:pointer;transition:background .12s}
.bv-sel-chip:hover{background:rgba(231,76,60,.2);border-color:var(--err)}

/* ── Themes multi-select ──────────────────────────────── */
.v2-themes-select{
  background:var(--inp);border:1px solid var(--bd);
  color:var(--text);font-size:12px;
  border-radius:3px;width:100%;font-family:inherit;
  height:auto
}
.v2-themes-select:focus{outline:none;border-color:var(--accent)}
.v2-themes-hint{font-size:11px;color:var(--dim);margin-top:4px}

/* ── Board color themes ──────────────────────────────── */
html.board-blue    .white-1e1d7{background-color:#d0e8f0!important}
html.board-blue    .black-3c85d{background-color:#4a7fa5!important}
html.board-green   .white-1e1d7{background-color:#eef5d0!important}
html.board-green   .black-3c85d{background-color:#5a8a44!important}
html.board-slate   .white-1e1d7{background-color:#e0e4e8!important}
html.board-slate   .black-3c85d{background-color:#6a7680!important}
html.board-purple  .white-1e1d7{background-color:#e8d8f0!important}
html.board-purple  .black-3c85d{background-color:#7a5898!important}
html.board-chess24 .white-1e1d7{background-color:#9e7863!important}
html.board-chess24 .black-3c85d{background-color:#633526!important}
html.board-dilena  .white-1e1d7{background-color:#ffe5b6!important}
html.board-dilena  .black-3c85d{background-color:#b16228!important}
html.board-uscf    .white-1e1d7{background-color:#c3c6be!important}
html.board-uscf    .black-3c85d{background-color:#727fa2!important}
html.board-symbol  .white-1e1d7{background-color:#ffffff!important}
html.board-symbol  .black-3c85d{background-color:#58ac8a!important}
html.board-sage       .white-1e1d7{background-color:#f0eace!important}
html.board-sage       .black-3c85d{background-color:#82a050!important}
html.board-rebel      .white-1e1d7{background-color:#dce8f0!important}
html.board-rebel      .black-3c85d{background-color:#5b92c0!important}
html.board-damascus   .white-1e1d7{background-color:#c5d5e8!important}
html.board-damascus   .black-3c85d{background-color:#1e3a7a!important}
html.board-tournament .white-1e1d7{background-color:#e0d5b0!important}
html.board-tournament .black-3c85d{background-color:#4e7c45!important}
/* Neo: chess.com green/cream board theme */
html.board-neo .white-1e1d7{background-color:#ebecd0!important}
html.board-neo .black-3c85d{background-color:#779556!important}
html.board-neo .notation-322f9{color:#779556!important}
html.board-neo .white-1e1d7 .notation-322f9{color:#779556!important}
html.board-neo .black-3c85d .notation-322f9{color:#ebecd0!important}
/* Lichess: cream + slate-blue board theme */
html.board-lichess .white-1e1d7{background-color:#edebd6!important}
html.board-lichess .black-3c85d{background-color:#6088a8!important}
html.board-lichess .notation-322f9{color:#6088a8!important}
html.board-lichess .white-1e1d7 .notation-322f9{color:#6088a8!important}
html.board-lichess .black-3c85d .notation-322f9{color:#edebd6!important}
/* chess.com Green (default chess.com palette) */
html.board-ccgreen .white-1e1d7{background-color:#ebecd0!important}
html.board-ccgreen .black-3c85d{background-color:#779656!important}
html.board-ccgreen .notation-322f9{color:#779656!important}
html.board-ccgreen .white-1e1d7 .notation-322f9{color:#779556!important}
html.board-ccgreen .black-3c85d .notation-322f9{color:#ebecd0!important}
/* chess.com Dark Blue */
html.board-ccdarkblue .white-1e1d7{background-color:#b9c8d4!important}
html.board-ccdarkblue .black-3c85d{background-color:#4b6e89!important}
html.board-ccdarkblue .notation-322f9{color:#4b6e89!important}
html.board-ccdarkblue .white-1e1d7 .notation-322f9{color:#4b6e89!important}
html.board-ccdarkblue .black-3c85d .notation-322f9{color:#b9c8d4!important}
/* chess.com Bubblegum (pink) */
html.board-ccbubblegum .white-1e1d7{background-color:#fce5e0!important}
html.board-ccbubblegum .black-3c85d{background-color:#f1a7a7!important}
html.board-ccbubblegum .notation-322f9{color:#f1a7a7!important}
html.board-ccbubblegum .white-1e1d7 .notation-322f9{color:#f1a7a7!important}
html.board-ccbubblegum .black-3c85d .notation-322f9{color:#fce5e0!important}

/* ── Selected square: corner bracket indicator ───────── */
/* Four sharp L-shaped corners via gradient backgrounds.
   inset:2px = 2px gap from square edge.
   Same appearance across all board themes.
   Covers: puzzle click-to-move, viz mode, board vision. */
#board .click-selected,
#board .viz-sel-to,
#bv-board .click-selected,
#bv-board .highlight-sel-from,
#bv-board .highlight-sel-to {
  position: relative;
}
#board .click-selected::before,
#board .viz-sel-to::before,
#bv-board .click-selected::before,
#bv-board .highlight-sel-from::before,
#bv-board .highlight-sel-to::before {
  content: '';
  position: absolute;
  inset: 2px;
  pointer-events: none;
  z-index: 10;
  background:
    /* top-left  H */ linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)) 0    0    / 30% var(--sq-thick,4px) no-repeat,
    /* top-left  V */ linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)) 0    0    / var(--sq-thick,4px) 30% no-repeat,
    /* top-right H */ linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)) 100% 0    / 30% var(--sq-thick,4px) no-repeat,
    /* top-right V */ linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)) 100% 0    / var(--sq-thick,4px) 30% no-repeat,
    /* bot-left  H */ linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)) 0    100% / 30% var(--sq-thick,4px) no-repeat,
    /* bot-left  V */ linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)) 0    100% / var(--sq-thick,4px) 30% no-repeat,
    /* bot-right H */ linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)) 100% 100% / 30% var(--sq-thick,4px) no-repeat,
    /* bot-right V */ linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)) 100% 100% / var(--sq-thick,4px) 30% no-repeat;
}

/* ── Unified board size (fits viewport height) ───────── */
.v2-board-std{width:100%;max-width:min(800px,calc(100vh - 152px),100%)}
@media(max-width:780px){.v2-board-std{max-width:calc(100vw - 40px)}}
/* ── Page footer (About / Contact) ──────────────────── */
#v2-page-footer{
  position:fixed;bottom:0;right:0;
  left:calc(100% * 2 / 3);
  padding:10px 28px;
  border-top:1px solid var(--bd);
  background:var(--bg-r);
  display:flex;align-items:center;justify-content:flex-end;
  gap:18px;z-index:200;font-size:12px
}
@media(max-width:780px){#v2-page-footer{display:none}}

/* ── Settings swatches ───────────────────────────────── */
.v2-swatches{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.v2-swatch{
  width:48px;height:48px;border-radius:4px;overflow:hidden;
  border:2px solid var(--bd);cursor:pointer;padding:0;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  transition:border-color .15s
}
.v2-swatch.active{border-color:var(--accent)}
.v2-swatch span{display:block}
.v2-piece-swatches{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.v2-piece-swatch{
  padding:6px 4px;border:1px solid var(--bd);border-radius:3px;
  background:none;color:var(--dim);cursor:pointer;font-size:11px;
  font-family:inherit;transition:all .15s;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  width:64px;height:64px;box-sizing:border-box;
  overflow:hidden;
}
.v2-piece-swatch img{width:32px;height:32px;object-fit:contain;display:block;flex-shrink:0;}
.v2-piece-swatch span,.v2-piece-swatch{white-space:nowrap;text-overflow:ellipsis;}
.v2-piece-swatch.active{border-color:var(--accent);color:var(--text)}

/* ── Light theme ─────────────────────────────────────── */
html.light{
  --bg:#f0f4f8;
  --bg-r:#ffffff;
  --text:#1e2d3d;
  --dim:#8fa3b8;
  --accent:#0277bd;
  --ok:#2e7d32;
  --err:#c62828;
  --warn:#b45309;
  --bd:rgba(0,0,0,0.10);
  --inp:rgba(0,0,0,0.05)
}
html.light .v2-btn{background:var(--accent);color:#fff;border-color:var(--accent)}
html.light .v2-btn-ok{background:#4caf50;color:#fff;border-color:#4caf50}
html.light #board .white-1e1d7{background-color:#f0d9b5}
html.light #board .black-3c85d{background-color:#b58863}

/* ── Rating mode tabs ────────────────────────────────── */
.v2-mode-tabs{display:flex;width:100%}
.v2-mode-tab{
  flex:1;padding:7px 2px;font-size:11px;text-align:center;text-transform:uppercase;
  letter-spacing:.04em;border:1px solid var(--bd);background:none;
  color:var(--dim);cursor:pointer;font-family:inherit;transition:all .15s
}
.v2-mode-tab+.v2-mode-tab{border-left-color:transparent}
.v2-mode-tab:first-child{border-radius:3px 0 0 3px}
.v2-mode-tab:last-child{border-radius:0 3px 3px 0}
.v2-mode-tab.active{background:none;color:var(--accent);border-color:var(--accent);position:relative;z-index:1;margin-left:-1px}
html.light .v2-mode-tab.active{background:var(--accent);color:#fff}

/* ── Menu item collapsible wrapper ───────────────────── */
.v2-menu-item-wrap{display:flex;align-items:center;border-bottom:1px solid var(--bd)}
.v2-menu>.v2-menu-item-wrap:first-child{border-top:1px solid var(--bd)}
.v2-menu-link{
  display:block;padding:14px 0;flex:1;
  color:var(--text);text-decoration:none;
  font-size:14px;font-weight:700;letter-spacing:.02em;
  transition:color .12s
}
.v2-menu-link:hover{color:var(--accent)}
.v2-collapse-toggle{
  background:none;border:1px solid var(--accent);color:var(--accent);cursor:pointer;
  padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;line-height:1;
  letter-spacing:.04em;transition:opacity .12s, background .12s, color .12s;font-family:inherit;flex-shrink:0;
}
.v2-collapse-toggle:hover{background:rgba(79,195,247,.12);}
.v2-collapse-toggle.collapsed{background:none;border-color:var(--bd);color:var(--dim);}

/* ── Preset rows (home menu) ─────────────────────────── */
.v2-preset-row{display:flex;align-items:center;border-bottom:1px solid var(--bd)}
.v2-preset-start{
  flex:1;padding:14px 0;background:none;border:none;color:var(--dim);
  text-align:left;cursor:pointer;font-size:14px;font-weight:400;
  font-family:inherit;transition:color .12s
}
.v2-preset-start:hover{color:var(--text)}
.v2-preset-start.v2-preset-locked{opacity:.5;cursor:not-allowed}
.v2-preset-start.v2-preset-locked:hover{color:var(--dim)}
.v2-preset-edit{
  color:var(--dim);font-size:15px;padding:6px 6px;text-decoration:none;
  opacity:.45;transition:opacity .12s;line-height:1;flex-shrink:0
}
.v2-preset-edit:hover{opacity:1;color:var(--text)}
.v2-preset-delete{
  background:none;border:none;color:var(--dim);font-size:14px;padding:6px 6px;
  cursor:pointer;opacity:.35;transition:opacity .12s;line-height:1;flex-shrink:0;
  font-family:inherit
}
.v2-preset-delete:hover{opacity:1;color:var(--err)}

/* ── puzzle.js dynamic classes ───────────────────────── */
.timer-warning{color:var(--warn)!important}
.timer-danger{color:var(--err)!important}
.success-msg{color:var(--ok)}
.error-msg{color:var(--err)}
.info-hidden{filter:blur(4px);user-select:none;cursor:default}


/* ── Stats data tables ───────────────────────────────── */
.v2-dtbl{width:100%;border-collapse:collapse;font-size:12px}
.v2-dtbl th{
  color:var(--dim);font-weight:600;font-size:10px;text-transform:uppercase;
  letter-spacing:.06em;padding:6px 8px;border-bottom:1px solid var(--bd);
  text-align:left;cursor:pointer;user-select:none;white-space:nowrap
}
.v2-dtbl th.sort-asc::after{content:' ↑'}
.v2-dtbl th.sort-desc::after{content:' ↓'}
.v2-dtbl th.sortable::after{content:' ⇅';opacity:.3}
.v2-dtbl td{padding:5px 8px;border-bottom:1px solid rgba(255,255,255,.04);font-size:12px}
.v2-dtbl tr:last-child td{border-bottom:none}
.v2-dtbl tr:hover td{background:rgba(255,255,255,.02)}
.v2-dtbl td.r{text-align:right;font-variant-numeric:tabular-nums}
.v2-rate-cell{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.v2-rate-bar{flex:1;background:rgba(255,255,255,.08);border-radius:2px;height:5px;min-width:28px;max-width:52px}
.v2-rate-fill{height:5px;border-radius:2px}
.v2-card{background:var(--bg);border:1px solid var(--bd);border-radius:4px;overflow:hidden;margin-bottom:16px}
.v2-card-hdr{padding:8px 12px;border-bottom:1px solid var(--bd);font-size:10px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.v2-card-body{max-height:280px;overflow-y:auto}
.v2-chart-wrap{position:relative;margin-bottom:2px}

/* ── Admin table ─────────────────────────────────────── */
.v2-admin-tbl{width:100%;border-collapse:collapse;font-size:13px}
.v2-admin-tbl th{
  text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--dim);padding:8px 10px;border-bottom:1px solid var(--bd);
  white-space:nowrap
}
.v2-admin-tbl td{padding:10px 10px;border-bottom:1px solid var(--bd);vertical-align:middle}
.v2-admin-tbl tr:last-child td{border-bottom:none}
.v2-admin-tbl tr:hover td{background:rgba(255,255,255,.02)}
.v2-admin-tbl .user-disabled td{opacity:.5}
.v2-admin-tbl .badge-admin{
  font-size:10px;color:var(--accent);border:1px solid var(--accent);
  border-radius:3px;padding:1px 4px;margin-left:5px;vertical-align:middle
}
.v2-admin-tbl .badge-disabled{
  font-size:10px;color:var(--err);border:1px solid var(--err);
  border-radius:3px;padding:1px 4px;margin-left:5px;vertical-align:middle
}
.v2-mode-tab-locked{opacity:.45;cursor:not-allowed}
.pro-badge{
  font-size:9px;font-weight:600;letter-spacing:.04em;
  background:none;border:1px solid var(--bd);color:var(--dim);
  border-radius:20px;padding:1px 6px;vertical-align:middle;margin-left:2px;
}
.v2-admin-actions{display:flex;gap:6px;align-items:center}
.v2-admin-actions input[type=password]{flex:1;min-width:0;width:0}
.v2-admin-actions .v2-btn-compact{
  background:none;border:1px solid var(--bd);color:var(--text);
  padding:5px 8px;font-size:11px;border-radius:3px;cursor:pointer;
  font-family:inherit;white-space:nowrap;flex-shrink:0;width:auto
}

/* ── Puzzle history pills ────────────────────────────── */
.ph-pill{display:inline-flex;align-items:center;justify-content:center;width:46px;height:26px;box-sizing:border-box;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;border:2px solid;overflow:hidden;flex-shrink:0;}
.ph-green{border-color:#4caf50;color:#4caf50;background:rgba(76,175,80,.12);}
.ph-red{border-color:#e74c3c;color:#e74c3c;background:rgba(231,76,60,.12);}
.ph-yellow{border-color:#f5a623;color:#f5a623;background:rgba(245,166,35,.12);}
.ph-pill:hover{opacity:.75;}
.ph-empty{border-color:rgba(76,175,80,.3);background:rgba(76,175,80,.04);cursor:default;}
.ph-yellow.ph-empty{border-color:rgba(245,166,35,.3);background:rgba(245,166,35,.04);cursor:default;}
/* Review session pill states */
.ph-green-outline{border-color:#4caf50;color:#4caf50;background:transparent;}
.ph-red-outline{border-color:#e74c3c;color:#e74c3c;background:transparent;}
.ph-green-filled{border-color:#4caf50;color:#fff;background:#4caf50;}
.ph-red-filled{border-color:#e74c3c;color:#fff;background:#e74c3c;}

/* Setup field tooltips */
.v2-tip-wrap{position:relative;display:inline-flex;align-items:center;gap:5px;cursor:default;}
.v2-tip-box{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:200;width:210px;padding:6px 8px;background:var(--bg-r);border:1px solid var(--bd);border-radius:6px;font-size:10px;line-height:1.5;color:var(--dim);box-shadow:0 4px 12px rgba(0,0,0,.18);pointer-events:none;}
.v2-tip-wrap:hover .v2-tip-box{display:block;}

/* PGN right-click context menu */
#_pgn-ctx{position:fixed;z-index:9000;background:var(--bg-r);border:1px solid var(--bd);border-radius:6px;padding:4px 0;box-shadow:0 4px 16px rgba(0,0,0,.4);min-width:175px;display:none;}
#_pgn-ctx .ctx-item{display:block;padding:7px 14px;color:var(--text);cursor:pointer;font-size:13px;white-space:nowrap;user-select:none;}
#_pgn-ctx .ctx-item:hover{background:var(--inp);color:var(--accent);}
#_pgn-ctx .ctx-item.ctx-danger{color:var(--err);}
#_pgn-ctx .ctx-item.ctx-danger:hover{background:var(--inp);}
#_pgn-ctx .ctx-sep{border-top:1px solid var(--bd);margin:3px 0;}