:root{
  --ink:#12151b;
  --panel:#1a1e26;
  --panel-2:#20252f;
  --line:#2c3140;
  --ivory:#ede6d6;
  --paper:#c9c2ae;
  --muted:#8790a3;
  --good:#4fa9e0;
  --none:#5b6577;
  --inacc:#e0a93a;
  --mistake:#d9752f;
  --blunder:#c23a4b;
}
*{box-sizing:border-box;}
.hidden{display:none !important;}
body{margin:0;background:var(--ink);color:var(--paper);font-family:'Inter',sans-serif;font-size:14px;}
::selection{background:var(--inacc);color:#12151b;}
a{color:inherit;}
.eyebrow{font-family:'JetBrains Mono',monospace;letter-spacing:.18em;text-transform:uppercase;font-size:11px;color:var(--muted);}
h1,h2,h3{font-family:'Fraunces',serif;margin:0;color:var(--ivory);}
header.top{padding:28px 24px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;}
header.top h1{font-size:30px;font-weight:700;}
header.top h1 a{text-decoration:none;}
header.top .sub{color:var(--muted);font-size:13px;margin-top:4px;}
nav.primary a{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-decoration:none;margin-left:16px;}
nav.primary a:hover, nav.primary a.active{color:var(--ivory);}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px 60px;}
.grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:20px;}
@media(min-width:920px){.grid.two{grid-template-columns:1fr 1fr;}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:20px;min-width:0;max-width:100%;box-sizing:border-box;}
.panel h2{font-size:18px;margin-bottom:14px;}
.panel h3{font-size:13px;color:var(--ivory);margin:0 0 8px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.06em;}
textarea{width:100%;min-height:140px;background:var(--ink);color:var(--ivory);border:1px solid var(--line);border-radius:2px;padding:10px;font-family:'JetBrains Mono',monospace;font-size:12px;line-height:1.5;resize:vertical;}
input[type=text]{background:var(--ink);color:var(--ivory);border:1px solid var(--line);border-radius:2px;padding:8px 10px;font-family:'JetBrains Mono',monospace;font-size:13px;}
select{
  background-color:var(--ink);color:var(--ivory);border:1px solid var(--line);border-radius:2px;
  padding:8px 30px 8px 10px;font-family:'JetBrains Mono',monospace;font-size:13px;cursor:pointer;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3e%3cpath fill='%23ede6d6' d='M1 1l5 5 5-5'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:right 10px center;background-size:11px 7px;
}
select::-ms-expand{display:none;}
/* the dropdown's OPEN popup list uses the OS's own rendering in most browsers,
   which ignores page CSS for the popup surface itself — but <option> elements
   still accept background/color and most engines (Chrome, Firefox, Edge)
   respect it, which is what actually fixes the unreadable white layer */
select option{background:var(--ink);color:var(--ivory);}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:6px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.08em;}
button, .btn{background:var(--inacc);color:#12151b;border:none;border-radius:2px;padding:10px 16px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;text-decoration:none;display:inline-block;}
button.ghost, .btn.ghost{background:transparent;color:var(--ivory);border:1px solid var(--line);}
button:hover, .btn:hover{filter:brightness(1.08);}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:12px;}
.msg{font-family:'JetBrains Mono',monospace;font-size:12px;margin-top:8px;min-height:16px;}
.msg.ok{color:var(--good);}
.msg.warn{color:var(--blunder);}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;}
.tab{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border:1px solid var(--line);border-radius:20px;color:var(--muted);cursor:pointer;text-decoration:none;}
.tab.active{background:var(--ivory);color:var(--ink);border-color:var(--ivory);}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px;}
.stat-card{border:1px solid var(--line);padding:14px;border-radius:2px;background:var(--panel-2);}
.stat-card .num{font-family:'Fraunces',serif;font-size:28px;color:var(--ivory);}
.stat-card .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px;}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle;}
.d-good{background:var(--good);}.d-none{background:var(--none);}.d-inacc{background:var(--inacc);}
.d-mistake{background:var(--mistake);}.d-blunder{background:var(--blunder);}
table{width:100%;border-collapse:collapse;font-size:12px;}
th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--line);}
th{font-family:'JetBrains Mono',monospace;color:var(--muted);text-transform:uppercase;font-size:10px;letter-spacing:.06em;}
.game-row{cursor:pointer;}
.game-row:hover{background:var(--panel-2);}
.badge{font-family:'JetBrains Mono',monospace;font-size:10px;padding:2px 6px;border-radius:10px;margin-right:3px;display:inline-block;}
.b-blunder{background:rgba(194,58,75,.2);color:var(--blunder);}
.b-mistake{background:rgba(217,117,47,.2);color:var(--mistake);}
.b-inacc{background:rgba(224,169,58,.2);color:var(--inacc);}
.b-link{background:rgba(224,169,58,.2);color:var(--inacc);text-decoration:none;}
.strip{width:0;min-width:100%;box-sizing:border-box;display:flex;flex-wrap:wrap;gap:2px;overflow:hidden;}
.strip .tick{width:8px;height:18px;cursor:pointer;border-radius:1px;border:none;padding:0;flex-shrink:0;}
.movelist{flex:1;min-width:220px;max-height:460px;overflow-y:auto;font-family:'JetBrains Mono',monospace;font-size:12px;}
.mv{padding:5px 6px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;}
.mv:hover{background:var(--panel-2);}
.mv.sel{background:var(--panel-2);border-left:2px solid var(--inacc);}
.mv .comment{color:var(--muted);font-size:11px;flex-basis:100%;margin-top:2px;font-family:'Inter',sans-serif;}
.controls{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;width:0;min-width:100%;box-sizing:border-box;}
.controls button{padding:6px 10px;flex-shrink:0;}
.nav-hint{color:var(--muted);font-size:10px;font-family:'JetBrains Mono',monospace;margin-top:6px;}
.challenge-prompt{margin-top:10px;padding:10px;border:1px solid var(--inacc);background:rgba(224,169,58,.1);border-radius:2px;}
.challenge-prompt button{padding:8px 14px;}

/* on-board correct/incorrect celebration — instant feedback, no scrolling needed */
.board-frame{position:relative;display:inline-block;}
.quality-glyph{
  position:absolute;z-index:60;min-width:28px;height:28px;padding:0 5px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;
  color:#12151b;border:2px solid rgba(18,21,27,.7);
  cursor:pointer;animation:chessisGlyphPop .35s ease;
}
.mate-glyph{
  position:absolute;z-index:61;min-width:28px;height:28px;padding:0 4px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#12151b;border:2px solid rgba(18,21,27,.7);
  cursor:pointer;animation:chessisGlyphPop .35s ease;
}
.book-glyph{
  position:absolute;z-index:59;min-width:26px;height:26px;padding:0 4px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;background:#3a5a40;border:2px solid rgba(18,21,27,.7);
  box-shadow:0 0 0 3px rgba(18,21,27,.5), 0 0 10px 1px rgba(58,90,64,.9);
  animation:chessisGlyphPop .35s ease;pointer-events:none;
}
.mv .book-ico{font-size:11px;opacity:.9;}
.book-panel{
  margin-bottom:10px;padding:8px 10px;border:1px solid #3a5a40;border-radius:2px;
  background:rgba(58,90,64,.12);font-family:'JetBrains Mono',monospace;font-size:12px;
  max-height:160px;overflow-y:auto;flex-shrink:0;width:0;min-width:100%;box-sizing:border-box;
}
.book-panel .bp-title{font-weight:700;color:#7fae87;margin-bottom:6px;font-size:11px;letter-spacing:.4px;}
.book-panel .bp-name{
  font-family:'Fraunces',serif;font-weight:700;font-size:14px;color:var(--inacc,#e0a93a);
  margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid rgba(58,90,64,.4);
}
.book-panel .bp-line{padding:3px 0;border-bottom:1px solid rgba(58,90,64,.25);display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;}
.book-panel .bp-line:last-child{border-bottom:none;}
.book-panel .bp-san{color:var(--ink,#e8e4d8);font-weight:700;white-space:nowrap;}
.book-panel .bp-note{color:var(--muted);font-size:11px;font-family:'Inter',sans-serif;}
.book-panel .bp-line.clickable{
  cursor:pointer;border:1px solid rgba(127,174,135,.5);border-radius:3px;
  padding:5px 8px;margin:4px 0;background:rgba(58,90,64,.18);border-bottom:1px solid rgba(127,174,135,.5);
}
.book-panel .bp-line.clickable::before{content:'▸';color:#7fae87;font-weight:700;}
.book-panel .bp-line.clickable:hover{background:rgba(58,90,64,.4);border-color:#7fae87;}
.book-panel .bp-line.clickable:active{transform:translateY(1px);}
.trap-alert{
  margin:10px 0;padding:10px 12px;border-radius:2px;font-family:'JetBrains Mono',monospace;
  font-weight:700;font-size:13px;border:2px solid transparent;box-sizing:border-box;
}
.trap-alert.hidden{display:none;}
.trap-alert.show{background:rgba(194,58,75,.18);border-color:var(--blunder,#c23a4b);color:#ff7a8a;}
.trap-alert.warn.show{background:rgba(194,58,75,.10);border-color:rgba(194,58,75,.5);color:#e08a95;font-weight:500;}
.trap-alert-sub{font-weight:400;font-size:11px;color:var(--muted);margin-top:6px;font-family:'Inter',sans-serif;}
.trap-glyph{
  position:absolute;z-index:62;min-width:26px;height:26px;padding:0 4px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;background:#c23a4b;border:2px solid rgba(18,21,27,.7);
  box-shadow:0 0 0 3px rgba(18,21,27,.5), 0 0 12px 2px rgba(194,58,75,.9);
  cursor:pointer;animation:chessisGlyphPop .35s ease;
}
.trap-form{margin-top:10px;padding:10px;border:1px solid var(--blunder,#c23a4b);background:rgba(194,58,75,.08);border-radius:2px;}
.trap-form input,.trap-form textarea{width:100%;box-sizing:border-box;margin-bottom:8px;}
.trap-line-cell{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);max-width:340px;}
.traps-panel{
  margin-bottom:10px;padding:8px 10px;border:1px solid rgba(194,58,75,.55);border-radius:2px;
  background:rgba(194,58,75,.08);font-family:'JetBrains Mono',monospace;font-size:12px;
  max-height:200px;overflow-y:auto;flex-shrink:0;width:0;min-width:100%;box-sizing:border-box;
}
.traps-panel .tp-title{font-weight:700;color:#e08a95;margin-bottom:6px;font-size:11px;letter-spacing:.4px;}
.traps-panel .tp-line{padding:4px 0;border-bottom:1px solid rgba(194,58,75,.2);display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;}
.traps-panel .tp-line:last-child{border-bottom:none;}
.traps-panel .tp-line.clickable{
  cursor:pointer;border:1px solid rgba(224,138,149,.5);border-radius:3px;
  padding:5px 8px;margin:4px 0;background:rgba(194,58,75,.14);border-bottom:1px solid rgba(224,138,149,.5);
}
.traps-panel .tp-line.clickable::before{content:'▸';color:#e08a95;font-weight:700;}
.traps-panel .tp-line.clickable:hover{background:rgba(194,58,75,.3);border-color:#e08a95;}
.traps-panel .tp-line.clickable:active{transform:translateY(1px);}
.traps-panel .tp-name{color:var(--ink,#e8e4d8);font-weight:700;}
.traps-panel .tp-meta{color:var(--muted);font-size:11px;font-family:'Inter',sans-serif;}
.traps-panel .tp-empty{color:var(--muted);font-size:11px;padding:4px 0;font-family:'Inter',sans-serif;}
.traps-panel .tp-exec-del{margin-left:auto;padding:1px 7px;font-size:11px;}
@keyframes chessisGlyphPop{
  0%{transform:scale(0);opacity:0;}
  60%{transform:scale(1.15);opacity:1;}
  100%{transform:scale(1);}
}
.mate-alert{
  margin:10px 0;padding:10px 12px;border-radius:2px;font-family:'JetBrains Mono',monospace;
  font-weight:700;font-size:13px;text-align:center;border:2px solid transparent;
  min-height:20px;box-sizing:border-box;
}
.mate-alert.hidden{display:block !important;visibility:hidden;border-color:transparent;background:transparent;}
.mate-alert.found_mate,.mate-alert.entered_mate{background:rgba(224,169,58,.18);border-color:var(--inacc);color:var(--inacc);text-shadow:0 0 12px rgba(224,169,58,.4);}
.mate-alert.allowed_mate{background:rgba(194,58,75,.18);border-color:var(--blunder);color:var(--blunder);}
.mate-alert.missed_mate{background:rgba(217,117,47,.18);border-color:var(--mistake);color:var(--mistake);}

.legal-move-dot{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:18px;height:18px;border-radius:50%;
  background:rgba(79,169,224,.55);pointer-events:none;z-index:40;
}
.legal-move-dot.capture{
  width:80%;height:80%;background:transparent;border:4px solid rgba(194,58,75,.55);
  box-sizing:border-box;
}
.invalid-click{animation:chessisInvalidShake .3s ease;}
@keyframes chessisInvalidShake{
  0%,100%{box-shadow:inset 0 0 0 3px rgba(135,144,163,.6);}
  50%{box-shadow:inset 0 0 0 3px rgba(135,144,163,.15);}
}

.table-scroll{max-height:370px;overflow-y:auto;overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:2px;}
.table-scroll table{margin:0;}
.table-scroll thead th{position:sticky;top:0;background:var(--panel);z-index:5;}
.reason-box{margin-top:10px;padding:10px 12px;border:1px solid var(--line);background:var(--panel-2);border-radius:2px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--paper);line-height:1.6;cursor:pointer;}
.reason-box .reason-hint{color:var(--muted);font-size:10px;display:block;margin-top:4px;}
.player-label{font-family:'JetBrains Mono',monospace;font-size:12px;padding:4px 2px;color:var(--muted);}
.player-label .you{color:var(--ivory);font-weight:700;}
.player-label .you::after{content:" (you)";color:var(--inacc);font-weight:400;}
.celebration-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0;z-index:50;
}
.celebration-overlay.show{opacity:1;animation:chessisPop .6s ease;}
.celebration-overlay .badge{
  font-family:'Fraunces',serif;font-weight:700;font-size:clamp(22px,6vw,34px);
  padding:12px 26px;border-radius:6px;background:rgba(18,21,27,0.88);
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.celebration-overlay.correct .badge{color:var(--good);border:2px solid var(--good);box-shadow:0 0 24px rgba(79,169,224,.5);}
.celebration-overlay.incorrect .badge{color:var(--blunder);border:2px solid var(--blunder);box-shadow:0 0 20px rgba(194,58,75,.4);}
@keyframes chessisPop{
  0%{transform:scale(.7);opacity:0;}
  45%{transform:scale(1.08);opacity:1;}
  65%{transform:scale(1);}
  100%{transform:scale(1);opacity:1;}
}
.empty{color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:12px;padding:20px 0;}
.foot{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-family:'JetBrains Mono',monospace;font-size:11px;}
canvas{max-height:260px;}

/* board zoom + fullscreen + mistake banner */
.board-wrap{display:flex;gap:20px;flex-wrap:wrap;min-width:0;max-width:100%;}
.movelist-wrap{display:flex;flex-direction:column;flex:1;min-width:220px;max-width:100%;gap:8px;}
.movelist-wrap .movelist{flex:1;min-height:0;}
#challengeZone{flex-shrink:0;min-height:40px;}
.board-col{display:flex;flex-direction:column;min-width:0;flex-shrink:0;}
#board{width:420px;max-width:100%;}
.zoom-controls{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;width:0;min-width:100%;box-sizing:border-box;}
.zoom-controls button{padding:6px 10px;font-size:10px;}
.board-wrap.is-fullscreen{
  position:fixed;inset:0;z-index:1000;background:var(--ink);
  display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;justify-content:center;
  justify-content:safe center; /* never overflow leftward — see note above */
  gap:32px;padding:32px 24px 24px;overflow-y:auto;overflow-x:hidden;
}
.board-wrap.is-fullscreen .board-col{overflow-x:hidden;}
.board-wrap.is-fullscreen .board-col{order:2;flex:0 0 auto;}
.board-wrap.is-fullscreen .board-and-eval{align-items:stretch;}
.board-wrap.is-fullscreen .movelist,
.board-wrap.is-fullscreen .movelist-wrap,
.board-wrap.is-fullscreen .puzzle-side{order:1;flex:0 0 auto;max-height:90vh;min-width:280px;max-width:340px;display:flex;flex-direction:column;}
@media (max-width:820px){
  .board-wrap.is-fullscreen{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-items:safe center;padding:12px;gap:14px;overflow-x:hidden;}
  .board-wrap.is-fullscreen .board-col{order:1;}
  .board-wrap.is-fullscreen #board{max-width:100vw;}
  .board-wrap.is-fullscreen .board-and-eval{width:auto;max-width:100%;justify-content:center;justify-content:safe center;}
  .board-wrap.is-fullscreen .board-and-eval .board-frame{flex:0 0 auto;}
  .board-wrap.is-fullscreen .movelist,
  .board-wrap.is-fullscreen .movelist-wrap,
  .board-wrap.is-fullscreen .puzzle-side{order:2;width:100%;max-width:100%;max-height:40vh;}
}
.move-banner{margin:10px 0;padding:10px 12px;border-radius:2px;font-family:'JetBrains Mono',monospace;font-size:12px;border:1px solid var(--line);min-height:36px;box-sizing:border-box;}
.move-banner.hidden{display:block !important;visibility:hidden;border-color:transparent;background:transparent;}
.banner-blunder{background:rgba(194,58,75,.15);border-color:var(--blunder);color:var(--blunder);}
.banner-mistake{background:rgba(217,117,47,.15);border-color:var(--mistake);color:var(--mistake);}
.banner-inacc{background:rgba(224,169,58,.15);border-color:var(--inacc);color:var(--inacc);}
.banner-good{background:rgba(79,169,224,.15);border-color:var(--good);color:var(--good);}

/* puzzle mode */
.puzzle-stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px;}
.puzzle-feedback{margin-top:14px;padding:12px;border-radius:2px;font-family:'JetBrains Mono',monospace;font-size:13px;border:1px solid var(--line);}
.puzzle-feedback.correct{background:rgba(79,169,224,.15);border-color:var(--good);color:var(--good);}
.puzzle-feedback.incorrect{background:rgba(194,58,75,.15);border-color:var(--blunder);color:var(--blunder);}
.puzzle-meta{color:var(--muted);font-size:12px;margin-bottom:14px;}
.refutation-box{margin-top:10px;padding:10px 12px;border:1px solid var(--line);background:var(--panel-2);border-radius:2px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--paper);line-height:1.6;}
.puzzle-side{min-width:240px;}
.puzzle-prompt{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ivory);padding:10px;border:1px solid var(--line);background:var(--panel-2);margin-bottom:12px;}
.puzzle-start-overlay{
  position:absolute;inset:0;z-index:10;background:var(--ink);
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.puzzle-start-overlay.hidden{display:none;}
.puzzle-start-btn{
  background:var(--inacc);color:#12151b;border:none;border-radius:2px;
  padding:18px 32px;font-family:'JetBrains Mono',monospace;font-weight:700;
  font-size:16px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
}
.puzzle-start-btn:hover{filter:brightness(1.08);}
.board-wrap{position:relative;}
.nav-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.nav-row button{padding:6px 10px;}
.nav-label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);flex:1;text-align:center;}
.prior-moves{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;}
.prior-move{font-family:'JetBrains Mono',monospace;font-size:12px;padding:4px 8px;border:1px solid var(--line);border-radius:2px;cursor:pointer;color:var(--paper);}
.prior-move:hover{background:var(--panel-2);}
.prior-move.sel{background:var(--ivory);color:var(--ink);border-color:var(--ivory);}

/* file upload (import) */
.upload-row{border:1px dashed var(--line);border-radius:2px;padding:16px;margin-top:14px;text-align:center;}
.upload-row input[type=file]{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--paper);}
.import-results{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:12px;}
.import-results .line{padding:6px 0;border-bottom:1px solid var(--line);}

/* alerts/banners inside the board column: never allowed to widen it —
   long trap/mate text was pushing the board sideways and forcing
   horizontal page scroll on mobile */
.board-col .trap-alert, .board-col .mate-alert, .board-col .move-banner,
.board-col .reason-box, .board-col .trap-form, .board-col #execForm,
.board-col .puzzle-feedback, .board-col .refutation-box{
  width:0;min-width:100%;box-sizing:border-box;overflow-wrap:anywhere;
}
html,body{overflow-x:hidden;max-width:100%;}
#board{touch-action:pan-y;} /* horizontal swipes over the board belong to move navigation, not page panning */

/* execution show-mode badge over the board */
.exec-badge{
  margin:0 0 8px;max-width:100%;box-sizing:border-box;width:fit-content;
  background:rgba(18,21,27,.92);border:1px solid var(--blunder,#c23a4b);border-radius:14px;
  padding:4px 10px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  max-width:100%;white-space:normal;overflow-wrap:anywhere;
  font-family:'JetBrains Mono',monospace;font-size:11px;color:#ff9aa6;
}
.exec-badge button{padding:1px 8px;font-size:11px;}
.exec-badge.hidden{display:none;}

/* small squares on mobile: shrink all corner badges so they stop covering pieces */
@media (max-width:820px){
  .quality-glyph{min-width:17px;height:17px;font-size:9px;padding:0 3px;border-width:1px;}
  .mate-glyph{min-width:17px;height:17px;font-size:10px;padding:0 2px;border-width:1px;}
  .book-glyph{min-width:17px;height:17px;padding:0 2px;border-width:1px;}
  .book-glyph svg{width:10px;height:10px;}
  .trap-glyph{min-width:17px;height:17px;font-size:9px;padding:0 2px;border-width:1px;}
}

/* saved-traps table: execution sub-rows + view buttons */
.exec-row td{background:rgba(194,58,75,.05);}
.exec-name-cell{padding-left:22px;color:var(--muted);font-family:'Inter',sans-serif;font-size:12px;}
.trap-actions{white-space:nowrap;}
.trap-actions button{margin-right:4px;padding:3px 9px;font-size:11px;}
.trap-view{background:rgba(58,90,64,.3);border:1px solid #7fae87;color:#c9e0cd;cursor:pointer;border-radius:2px;}
.trap-view:hover{background:rgba(58,90,64,.5);}

/* logged-in user area in the nav */
.nav-user{margin-left:auto;font-size:12px;color:var(--muted);align-self:center;}
.nav-user a{color:var(--inacc,#e0a93a);text-decoration:none;}
.nav-user a:hover{text-decoration:underline;}

/* opening map tree */
.map-tree{font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.7;}
.map-tree details{margin:2px 0;}
.map-tree summary{cursor:pointer;padding:4px 8px;border-radius:3px;list-style-position:outside;}
.map-tree summary:hover{background:rgba(58,90,64,.18);}
.map-tree .mt-kids{margin-left:18px;padding-left:10px;border-left:1px solid rgba(127,174,135,.3);}
.map-tree .mt-leaf{padding:3px 8px 3px 22px;color:var(--ink,#e8e4d8);}
.map-tree .mt-moves{color:var(--ink,#e8e4d8);}
.map-tree .mt-name{color:var(--inacc,#e0a93a);font-family:'Fraunces',serif;font-weight:700;font-size:13px;margin-left:6px;}
.map-tree .mt-meta{color:var(--muted);font-size:11px;font-family:'Inter',sans-serif;margin-left:8px;}
@media (max-width:820px){ .map-tree{font-size:12px;} .map-tree .mt-kids{margin-left:8px;padding-left:6px;} }

/* analysis PGN import/export panel */
.pgn-panel{
  margin-top:10px;padding:12px;border:1px solid rgba(110,231,255,.45);border-radius:4px;
  background:rgba(110,231,255,.06);width:0;min-width:100%;box-sizing:border-box;
}
.pgn-panel.hidden{display:none;}
.pgn-panel textarea{width:100%;box-sizing:border-box;margin-bottom:8px;font-family:'JetBrains Mono',monospace;font-size:12px;}
.pgn-panel .pgn-note{color:var(--muted);font-size:11px;font-family:'Inter',sans-serif;margin-bottom:10px;}
.pgn-panel .pgn-sep{height:1px;background:rgba(110,231,255,.25);margin:12px 0;}
.pgn-msg{margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:12px;}
.pgn-msg.hidden{display:none;}
.pgn-msg.ok{color:#a9d6b0;}
.pgn-msg.bad{color:#ff9aa6;}

/* ---- Stockfish eval bar + engine panel ---- */
.board-and-eval{display:flex;gap:10px;align-items:stretch;min-width:0;}
.board-and-eval .board-frame{flex:0 0 auto;}
.eval-bar{
  width:18px;flex-shrink:0;border-radius:3px;overflow:hidden;position:relative;
  background:#1b1f27;border:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column-reverse;
}
.eval-bar.hidden{display:none;}
.eval-bar .eb-fill{
  width:100%;height:50%;background:linear-gradient(180deg,#f2efe4,#cfcabc);
  transition:height .45s cubic-bezier(.4,0,.2,1);
}
.eval-bar .eb-mid{
  position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(224,169,58,.75);
  box-shadow:0 0 6px rgba(224,169,58,.8);
}
.engine-panel{
  margin-top:10px;padding:9px 12px;border-radius:4px;
  border:1px solid rgba(110,231,255,.35);background:rgba(110,231,255,.06);
  width:0;min-width:100%;box-sizing:border-box;
}
.engine-panel.hidden{display:none;}
.engine-panel .ep-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.engine-panel .ep-score{
  font-family:'JetBrains Mono',monospace;font-weight:700;font-size:18px;min-width:66px;
}
.engine-panel .ep-score.white{color:#f2efe4;text-shadow:0 0 10px rgba(242,239,228,.35);}
.engine-panel .ep-score.black{color:#8fb7ff;text-shadow:0 0 10px rgba(143,183,255,.35);}
.engine-panel .ep-score.mate{color:#ff9aa6;text-shadow:0 0 12px rgba(255,154,166,.6);}
.engine-panel .ep-depth{color:var(--muted);font-size:11px;font-family:'Inter',sans-serif;}
.engine-panel .ep-pv{
  margin-top:6px;font-family:'JetBrains Mono',monospace;font-size:12px;color:#6ee7ff;
  overflow-wrap:anywhere;min-height:16px;
}
#btnEngine.on{border-color:#6ee7ff;color:#6ee7ff;box-shadow:0 0 10px rgba(110,231,255,.35);}
@media (max-width:820px){
  .eval-bar{width:13px;}
  .engine-panel .ep-score{font-size:16px;min-width:56px;}
}

/* full-game sweep progress on the replay page */
.sweep-box{
  margin-top:10px;padding:9px 12px;border-radius:4px;
  border:1px solid rgba(224,169,58,.4);background:rgba(224,169,58,.07);
  width:0;min-width:100%;box-sizing:border-box;font-family:'JetBrains Mono',monospace;font-size:12px;
}
.sweep-box.hidden{display:none;}
.sweep-bar{height:6px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:7px;}
.sweep-bar > div{height:100%;width:0;background:linear-gradient(90deg,#b8892f,#ffd97a);box-shadow:0 0 8px rgba(255,217,122,.7);transition:width .3s ease;}
.sweep-find{margin-top:8px;max-height:150px;overflow-y:auto;}
.sweep-find .sf-row{padding:3px 0;border-bottom:1px solid rgba(224,169,58,.15);cursor:pointer;}
.sweep-find .sf-row:hover{background:rgba(224,169,58,.12);}
.sweep-find .sf-drop{color:#ff9aa6;font-weight:700;}

/* ---- engine move verdict ---- */
.ep-verdict{
  margin-top:8px;padding:7px 10px;border-radius:4px;border:1px solid transparent;
  font-family:'JetBrains Mono',monospace;font-size:12px;
  display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
}
.ep-verdict.hidden{display:none;}
.ep-verdict .ev-tag{font-weight:700;font-size:13px;}
.ep-verdict .ev-move{color:var(--ink,#e8e4d8);font-weight:700;}
.ep-verdict .ev-drop{color:var(--muted);font-size:11px;font-family:'Inter',sans-serif;}
.ep-verdict .ev-alt{color:#6ee7ff;font-size:11px;font-family:'Inter',sans-serif;}
.ep-verdict.q-blunder{background:rgba(255,23,68,.14);border-color:#ff1744;}
.ep-verdict.q-blunder .ev-tag{color:#ff5c78;}
.ep-verdict.q-mistake{background:rgba(255,145,0,.13);border-color:#ff9100;}
.ep-verdict.q-mistake .ev-tag{color:#ffab40;}
.ep-verdict.q-inacc{background:rgba(255,234,0,.12);border-color:#ffea00;}
.ep-verdict.q-inacc .ev-tag{color:#ffe57f;}
.ep-verdict.q-good{background:rgba(127,174,135,.12);border-color:rgba(127,174,135,.6);}
.ep-verdict.q-good .ev-tag{color:#a9d6b0;}
.ep-verdict.q-excellent{background:rgba(110,231,255,.12);border-color:rgba(110,231,255,.6);}
.ep-verdict.q-excellent .ev-tag{color:#6ee7ff;}
.ep-verdict.q-best{background:rgba(255,217,122,.14);border-color:#ffd97a;}
.ep-verdict.q-best .ev-tag{color:#ffd97a;text-shadow:0 0 10px rgba(255,217,122,.6);}
.ep-verdict.q-book{background:rgba(58,90,64,.14);border-color:#3a5a40;}
.ep-verdict.q-mate-walked{background:rgba(213,0,249,.14);border-color:#d500f9;}
.ep-verdict.q-mate-walked .ev-tag{color:#e066ff;text-shadow:0 0 10px rgba(213,0,249,.6);}
.ep-verdict.q-forced{background:rgba(135,144,163,.12);border-color:#8790a3;}
.ep-verdict.q-forced .ev-tag{color:#c3c9d4;}
.mv-q.q-mate-walked{color:#e066ff;}
.mv-q.q-forced{color:#8790a3;}
.ep-verdict.q-book .ev-tag{color:#7fae87;}
/* glyphs in the move list */
.mv-q{font-weight:700;font-size:11px;padding:0 3px;border-radius:2px;}
.mv-q.q-blunder{color:#ff5c78;}
.mv-q.q-mistake{color:#ffab40;}
.mv-q.q-inacc{color:#ffe57f;}
.mv-q.q-best{color:#ffd97a;}
.mv-q.q-excellent{color:#6ee7ff;}

/* live game: reuse trap-alert/drill-feedback styling but give a neutral
   (non-red) variant for informational banners like pending confirmation */
.trap-alert.show:not(.warn){background:rgba(58,90,64,.16);border-color:rgba(127,174,135,.6);color:#c9e0cd;font-weight:400;}

/* ---- crown celebration (beating a CPU bot) ---- */
.celebration-overlay.crown{background:rgba(10,12,18,.72);}
.crown-badge{
  text-align:center;animation:crownPop .5s cubic-bezier(.34,1.7,.64,1) both;
}
.crown-icon{font-size:56px;line-height:1;filter:drop-shadow(0 0 22px rgba(255,217,122,.9));}
.crown-badge.boss .crown-icon{font-size:64px;}
.crown-title{
  margin-top:6px;font-family:'Fraunces',serif;font-weight:700;font-size:26px;color:#ffd97a;
  text-shadow:0 0 20px rgba(255,217,122,.8),0 2px 10px rgba(0,0,0,.8);
}
.crown-badge.boss .crown-title{font-size:30px;}
.crown-sub{margin-top:4px;font-family:'JetBrains Mono',monospace;font-size:13px;color:#e8e4d8;}
.crown-spark{
  position:absolute;top:-10%;font-size:20px;pointer-events:none;
  animation:crownFall 2.6s ease-in forwards;
}
@keyframes crownPop{
  0%{opacity:0;transform:scale(.3) rotate(-8deg);}
  60%{opacity:1;transform:scale(1.15) rotate(3deg);}
  100%{opacity:1;transform:scale(1) rotate(0);}
}
@keyframes crownFall{
  0%{transform:translateY(0) rotate(0deg);opacity:0;}
  10%{opacity:1;}
  100%{transform:translateY(560px) rotate(340deg);opacity:0;}
}

/* ---- neon bot ladder map ---- */
.ladder-path{display:flex;flex-direction:column;align-items:center;padding:10px 0 30px;position:relative;}
.ladder-node{
  position:relative;width:100%;max-width:420px;display:flex;align-items:center;gap:14px;
  padding:14px 18px;margin:6px 0;border-radius:10px;
  background:linear-gradient(160deg,rgba(34,39,51,.95),rgba(22,26,35,.95));
  border:1px solid rgba(110,231,255,.25);
  transition:box-shadow .25s,border-color .25s,transform .2s,opacity .3s;
}
.ladder-node.unlocked{cursor:pointer;}
.ladder-node.unlocked:hover{border-color:#6ee7ff;box-shadow:0 0 18px 2px rgba(110,231,255,.35);transform:translateX(3px);}
.ladder-node.beaten{border-color:rgba(255,217,122,.65);}
.ladder-node.beaten:hover{box-shadow:0 0 18px 2px rgba(255,217,122,.4);}
.ladder-node.locked{opacity:.4;filter:grayscale(.6);cursor:default;}
.ladder-node.boss{border-color:rgba(255,92,120,.5);}
.ladder-node.boss.unlocked:hover{box-shadow:0 0 22px 3px rgba(255,92,120,.45);}
.ladder-node.boss.beaten{border-color:#ffd97a;box-shadow:0 0 14px 1px rgba(255,217,122,.5);}
.ln-avatar{font-size:30px;flex-shrink:0;width:44px;text-align:center;filter:drop-shadow(0 0 6px rgba(110,231,255,.4));}
.ln-info{flex:1;min-width:0;}
.ln-name{font-family:'Fraunces',serif;font-weight:700;font-size:15px;color:#e8e4d8;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ladder-node.beaten .ln-name{color:#ffd97a;}
.ln-rating{font-family:'JetBrains Mono',monospace;font-size:11px;color:#6ee7ff;}
.ln-record{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);margin-top:2px;}
.ln-crown{font-size:14px;}
.ln-lock{font-size:18px;color:var(--muted);flex-shrink:0;}
.ln-boss-tag{font-size:9px;letter-spacing:1px;color:#ff5c78;border:1px solid rgba(255,92,120,.5);border-radius:3px;padding:1px 5px;}
/* connecting rail with the same travelling shine as the opening map */
.ladder-rail{
  width:2px;height:26px;border-radius:2px;
  background:linear-gradient(180deg,rgba(110,231,255,.1) 0%,rgba(110,231,255,.85) 45%,#d8faff 50%,rgba(110,231,255,.85) 55%,rgba(110,231,255,.1) 100%);
  background-size:100% 300%;animation:mtFlow 2.6s linear infinite;
  box-shadow:0 0 8px rgba(110,231,255,.6),0 0 18px rgba(110,231,255,.2);
}
.ladder-rail.done{
  background:linear-gradient(180deg,rgba(255,217,122,.15) 0%,rgba(255,217,122,.9) 45%,#fff3d0 50%,rgba(255,217,122,.9) 55%,rgba(255,217,122,.15) 100%);
  background-size:100% 300%;box-shadow:0 0 8px rgba(255,217,122,.7),0 0 18px rgba(255,217,122,.25);
}
@media (prefers-reduced-motion: reduce){ .ladder-rail{animation:none;} }

/* ---- bot play interface ---- */
.bot-thinking{
  margin-top:8px;padding:7px 10px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:12px;
  background:rgba(110,231,255,.08);border:1px solid rgba(110,231,255,.4);color:#6ee7ff;
  display:flex;align-items:center;gap:8px;width:0;min-width:100%;box-sizing:border-box;
}
.bot-thinking.hidden{display:none;}
.bot-thinking .dot{width:6px;height:6px;border-radius:50%;background:#6ee7ff;animation:thinkPulse 1s ease-in-out infinite;}
.bot-thinking .dot:nth-child(2){animation-delay:.15s;}
.bot-thinking .dot:nth-child(3){animation-delay:.3s;}
@keyframes thinkPulse{0%,60%,100%{opacity:.3;transform:scale(.8);}30%{opacity:1;transform:scale(1.15);}}

/* ---- captured-material display (game.php, live.php, bots.php, analysis.php) ---- */
.mat-row{
  display:inline-flex;align-items:center;gap:1px;font-size:15px;line-height:1;
  color:var(--muted);margin-left:8px;vertical-align:middle;
}
.mat-row .mat-lead{
  margin-left:5px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
  color:#7fae87;
}
.material-bar{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:5px 2px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);
  width:0;min-width:100%;box-sizing:border-box;
}