@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.dbct-root{
  --dbct-void:#050a06; --dbct-panel:#0b1a10; --dbct-panel2:#0e2013;
  --dbct-phos:#38ff7c; --dbct-phos-dim:#8fe8ae; --dbct-phos-faint:#2c5e3c;
  --dbct-amber:#ffb000; --dbct-bezel:#161916; --dbct-bezel-edge:#2a2e2a;
  --dbct-sq-light:#16321f; --dbct-sq-dark:#0b2112;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  color:var(--dbct-phos);
  max-width:1200px; width:100%; margin:0 auto;
}
.dbct-root *{box-sizing:border-box}

.dbct-crt{
  background:var(--dbct-bezel); border:1px solid var(--dbct-bezel-edge);
  border-radius:14px; padding:14px;
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.dbct-screen{
  position:relative; background:var(--dbct-void); border-radius:8px;
  padding:18px 18px 16px; overflow:hidden;
  box-shadow:inset 0 0 60px rgba(20,255,110,.06), inset 0 0 8px rgba(0,0,0,.9);
}
.dbct-screen::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.45) 100%);
}
@media (prefers-reduced-motion: no-preference){
  .dbct-screen::before{
    content:""; position:absolute; left:0; right:0; height:90px; top:-90px; pointer-events:none;
    background:linear-gradient(to bottom, transparent, rgba(56,255,124,.05), transparent);
    animation:dbct-sweep 7s linear infinite;
  }
  @keyframes dbct-sweep{to{top:110%}}
}

.dbct-header{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  border-bottom:1px solid var(--dbct-phos-faint); padding-bottom:9px; margin-bottom:12px;
}
.dbct-bars{display:flex; flex-direction:column; gap:2px; width:34px; flex:none}
.dbct-bars i{height:3px; background:var(--dbct-phos); opacity:.9; display:block}
.dbct-bars i:nth-child(odd){opacity:.55}
.dbct-title{font-size:15px; font-weight:600; letter-spacing:.16em; margin:0; color:var(--dbct-phos); line-height:1.3; flex:0 1 auto; min-width:0; overflow:hidden}
.dbct-title small{display:block; font-size:10px; font-weight:400; letter-spacing:.18em; color:var(--dbct-phos-dim); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.dbct-hright{flex:none; text-align:right; font-size:10px; color:var(--dbct-phos-dim); letter-spacing:.06em; line-height:1.6; white-space:nowrap}
.dbct-hright b{color:var(--dbct-amber); font-weight:500}
.dbct-hright .dbct-ver{color:var(--dbct-phos-faint); letter-spacing:.12em}

.dbct-cols{display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start}
.dbct-colboard{flex:1 1 360px; min-width:280px; max-width:520px}
/* play-mode right region splits into telemetry/log + controls */
.dbct-playpanel{flex:2 1 420px; display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start}
.dbct-playinfo{flex:2 1 240px; min-width:0; display:flex; flex-direction:column; gap:12px}
.dbct-playctrl{flex:1 1 170px; min-width:160px; display:flex; flex-direction:column; gap:8px}

.dbct-board{
  display:grid; grid-template-columns:repeat(8,1fr); grid-template-rows:repeat(8,1fr);
  aspect-ratio:1/1; width:100%; max-width:min(440px, 54vh); margin:0 auto;
  border:1px solid var(--dbct-phos-faint);
  box-shadow:0 0 24px rgba(56,255,124,.08); user-select:none;
}
.dbct-sq{
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(22px,5.4vw,34px); line-height:1; cursor:pointer; position:relative;
}
.dbct-sq.dbct-light{background:var(--dbct-sq-light)}
.dbct-sq.dbct-dark{background:var(--dbct-sq-dark)}
.dbct-sq .dbct-pc{filter:drop-shadow(0 0 4px rgba(56,255,124,.35))}
.dbct-sq .dbct-w{color:#eafff0}
.dbct-sq .dbct-b{color:#34c463}
.dbct-sq.dbct-sel{outline:2px solid var(--dbct-amber); outline-offset:-2px; z-index:1}
.dbct-sq.dbct-tgt::after{content:""; position:absolute; width:22%; height:22%; border-radius:50%; background:rgba(255,176,0,.55)}
.dbct-sq.dbct-tgt.dbct-cap::after{width:86%; height:86%; background:transparent; border:2px solid rgba(255,176,0,.6); border-radius:4px}
.dbct-sq.dbct-lastmove{box-shadow:inset 0 0 0 2px rgba(143,232,174,.35)}

.dbct-coords{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap;
  max-width:min(440px,54vh); margin:6px auto 0; font-size:9px; color:var(--dbct-phos-faint); letter-spacing:.32em; padding:0 2px}
.dbct-coords .dbct-files{letter-spacing:.32em; white-space:nowrap; flex:0 0 auto}
.dbct-coords .dbct-statustext{margin-left:auto; text-align:right; font-size:11px; letter-spacing:.08em;
  color:var(--dbct-phos); min-width:0}
.dbct-coords .dbct-statustext.dbct-alert{color:var(--dbct-amber)}

.dbct-tele{border:1px solid var(--dbct-phos-faint); background:var(--dbct-panel); padding:10px 12px}
.dbct-tt{font-size:9px; letter-spacing:.25em; color:var(--dbct-phos-dim); margin-bottom:8px}
.dbct-grid{display:grid; grid-template-columns:1fr 1fr; gap:7px 14px}
.dbct-cell{font-size:10px; color:var(--dbct-phos-dim); letter-spacing:.06em}
.dbct-cell b{display:block; font-size:14px; font-weight:600; color:var(--dbct-phos); margin-top:1px; font-variant-numeric:tabular-nums}
.dbct-cell.dbct-wide{grid-column:1/-1}
.dbct-cell b.dbct-amber{color:var(--dbct-amber)}
.dbct-cell b.dbct-pv{font-size:10.5px; letter-spacing:.05em; word-break:break-word; line-height:1.5; font-weight:500}

.dbct-log{border:1px solid var(--dbct-phos-faint); background:var(--dbct-panel);
  padding:10px 12px; flex:1 1 auto; display:flex; flex-direction:column; min-height:90px}
.dbct-logbody{flex:1; overflow-y:auto; font-size:10.5px; line-height:1.55;
  max-height:22vh; scrollbar-width:thin; scrollbar-color:var(--dbct-phos-faint) transparent}
.dbct-logbody .dbct-tag{color:var(--dbct-phos-dim)}
.dbct-logbody .dbct-amb{color:var(--dbct-amber)}
.dbct-logbody .dbct-dim{color:var(--dbct-phos-faint)}

.dbct-tclabel{font-size:9px; letter-spacing:.25em; color:var(--dbct-phos-dim); margin-bottom:-4px}
.dbct-controls{display:flex; gap:10px}
.dbct-root .dbct-controls button{
  font-family:inherit; font-size:11px; letter-spacing:.14em; font-weight:500;
  background:var(--dbct-panel2); color:var(--dbct-phos);
  border:1px solid var(--dbct-phos-faint); padding:8px 10px; cursor:pointer; flex:1;
  border-radius:0; text-transform:none; line-height:1.2; height:auto; width:auto; box-shadow:none;
}
.dbct-root .dbct-controls button:hover{background:#143020; border-color:var(--dbct-phos-dim)}
.dbct-root .dbct-controls button:focus-visible{outline:2px solid var(--dbct-amber); outline-offset:2px}
.dbct-root .dbct-controls button:active{transform:translateY(1px)}
.dbct-root .dbct-controls button.dbct-on{border-color:var(--dbct-amber); color:var(--dbct-amber)}

.dbct-footer{margin-top:12px; padding-top:8px; border-top:1px solid var(--dbct-phos-faint);
  font-size:9px; color:var(--dbct-phos-faint); letter-spacing:.06em; line-height:1.6}

/* ---- v1.1: mode toggle, strength selector, replay panel ---- */
.dbct-modebar{display:flex;gap:8px;flex:1 1 auto;justify-content:center;margin:0}
.dbct-root .dbct-modebar button{
  font-family:inherit;font-size:11px;letter-spacing:.12em;font-weight:500;
  background:var(--dbct-panel2);color:var(--dbct-phos-dim);
  border:1px solid var(--dbct-phos-faint);padding:7px 16px;cursor:pointer;flex:0 1 auto;border-radius:0;white-space:nowrap;
}
.dbct-root .dbct-modebar button.dbct-on{border-color:var(--dbct-amber);color:var(--dbct-amber)}
.dbct-root .dbct-modebar button:hover{background:#143020}

.dbct-strengthrow .dbct-strbtn{font-size:10px;letter-spacing:.08em}
/* in the narrow controls column, let button rows wrap instead of squishing */
.dbct-playctrl .dbct-controls{flex-wrap:wrap}
.dbct-playctrl .dbct-controls button{flex:1 1 40px}
.dbct-playctrl .dbct-strengthrow button{flex:1 1 30%}

/* replay panel */
.dbct-replay{flex:2 1 420px; display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start; max-height:88vh; min-height:0}
.dbct-replayinfo{flex:1 1 200px; min-width:0; display:flex; flex-direction:column; gap:12px}
.dbct-replayctrl{flex:1 1 190px; min-width:170px; display:flex; flex-direction:column; gap:12px; min-height:0; max-height:84vh}
.dbct-selectrow{display:flex;gap:10px}
.dbct-root .dbct-selectrow select{
  flex:1;font-family:inherit;font-size:11px;letter-spacing:.06em;
  background:var(--dbct-panel2);color:var(--dbct-phos);
  border:1px solid var(--dbct-phos-faint);padding:7px 8px;border-radius:0;
  -webkit-appearance:none;appearance:none;cursor:pointer;
}
.dbct-root .dbct-selectrow select:focus{outline:2px solid var(--dbct-amber);outline-offset:1px}

.dbct-scorewrap{border:1px solid var(--dbct-phos-faint);background:var(--dbct-panel);padding:10px 12px;flex:0 0 auto;overflow:hidden}
.dbct-scoretitle{font-size:9px;letter-spacing:.25em;color:var(--dbct-phos-dim);margin-bottom:8px;
  display:flex;flex-direction:column;gap:3px}
.dbct-scoretitle .dbct-matchres{color:var(--dbct-amber);letter-spacing:.12em}
/* grid columns: #, white, black, result, running score */
.dbct-scorehead,.dbct-scorerow{display:grid;grid-template-columns:1.4em 1fr 1fr 2.6em 3.4em;
  gap:0 6px;align-items:center;font-size:10.5px;font-variant-numeric:tabular-nums}
.dbct-scorehead{color:var(--dbct-phos-dim);letter-spacing:.04em;padding:0 2px 5px;
  border-bottom:1px solid var(--dbct-phos-faint)}
.dbct-scorebody{padding-top:3px}
.dbct-scorehead span,.dbct-scorerow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbct-scorerow{padding:3px 2px;color:var(--dbct-phos-dim);cursor:pointer;border-radius:2px}
.dbct-scorerow:hover{color:var(--dbct-phos)}
.dbct-scorerow .dbct-c{color:var(--dbct-phos);text-align:center}
.dbct-scorerow .dbct-r,.dbct-scorehead .dbct-r{text-align:right}
.dbct-scorehead .dbct-c{text-align:center}
.dbct-scorerow .dbct-r{color:var(--dbct-phos)}
.dbct-scorerow.dbct-cur{background:rgba(255,176,0,.18);box-shadow:inset 2px 0 0 var(--dbct-amber)}
.dbct-scorerow.dbct-cur span{color:var(--dbct-amber)}
.dbct-scorerow.dbct-cur .dbct-c,.dbct-scorerow.dbct-cur .dbct-r{color:var(--dbct-amber)}

.dbct-movewrap{border:1px solid var(--dbct-phos-faint);background:var(--dbct-panel);padding:10px 12px;
  display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.dbct-movelist{flex:1 1 auto;overflow-y:auto;min-height:64px;max-height:30vh;font-size:11px;line-height:1.7;
  scrollbar-width:thin;scrollbar-color:var(--dbct-phos-faint) transparent;
  display:grid;grid-template-columns:auto 1fr 1fr;gap:0 6px;align-content:start}
.dbct-movelist .dbct-mvnum{color:var(--dbct-phos-faint);text-align:right;padding-right:2px}
.dbct-movelist .dbct-mv{cursor:pointer;padding:0 4px;border-radius:2px;color:var(--dbct-phos-dim);white-space:nowrap}
.dbct-movelist .dbct-mv:hover{color:var(--dbct-phos);background:#143020}
.dbct-movelist .dbct-mv.dbct-cur{background:var(--dbct-amber);color:#102016;font-weight:600}

/* themed scrollbars (WebKit/Blink) to match the phosphor console, not the OS default */
.dbct-root .dbct-logbody,.dbct-root .dbct-movelist{scrollbar-width:thin;scrollbar-color:var(--dbct-phos-faint) transparent}
.dbct-root .dbct-logbody::-webkit-scrollbar,
.dbct-root .dbct-movelist::-webkit-scrollbar{width:8px;height:8px}
.dbct-root .dbct-logbody::-webkit-scrollbar-track,
.dbct-root .dbct-movelist::-webkit-scrollbar-track{background:var(--dbct-void)}
.dbct-root .dbct-logbody::-webkit-scrollbar-thumb,
.dbct-root .dbct-movelist::-webkit-scrollbar-thumb{background:var(--dbct-phos-faint);border:2px solid var(--dbct-void)}
.dbct-root .dbct-logbody::-webkit-scrollbar-thumb:hover,
.dbct-root .dbct-movelist::-webkit-scrollbar-thumb:hover{background:var(--dbct-phos-dim)}

.dbct-playback{display:flex;gap:8px;align-items:center}
.dbct-root .dbct-playback button{
  font-family:inherit;font-size:13px;font-weight:600;line-height:1;
  background:var(--dbct-panel2);color:var(--dbct-phos);
  border:1px solid var(--dbct-phos-faint);padding:8px 0;cursor:pointer;flex:1;border-radius:0;
}
.dbct-root .dbct-playback button:hover{background:#143020;border-color:var(--dbct-phos-dim)}
.dbct-root .dbct-playback button.dbct-play{flex:1.4;color:var(--dbct-amber);border-color:var(--dbct-amber)}
.dbct-root .dbct-speedrow{display:flex;gap:8px;align-items:center;font-size:9px;letter-spacing:.18em;color:var(--dbct-phos-dim)}
.dbct-root .dbct-speedrow button{flex:1;font-size:10px;letter-spacing:.1em;padding:6px 0}
.dbct-root .dbct-speedrow button.dbct-on{border-color:var(--dbct-amber);color:var(--dbct-amber)}
.dbct-gamehdr{font-size:10px;color:var(--dbct-phos-dim);letter-spacing:.04em;line-height:1.5}
.dbct-gamehdr b{color:var(--dbct-phos);font-weight:600}
.dbct-hidden{display:none !important}

/* Deferred popup shell ---------------------------------------------------
   Test 6: sidebar fog-dialog visual language, tightened to the original Divi
   content width. The popup copy and the chess console share the same measure
   so their left/right edges align. The Deep Blue CRT console keeps its own
   terminal styling inside .dbct-root. */
.dbct-popup-deferred{width:100%;min-height:1px}
.dbct-popup-deferred[data-dbct-popup-loading="1"]:empty::before{
  content:"Loading Deep Blue\2026";
  display:flex;min-height:220px;align-items:center;justify-content:center;
  font-size:16px;color:#222b3f;
}
.dbct-popup-deferred[data-dbct-popup-error="1"]:empty::before{content:"Deep Blue could not load.";color:#222b3f}
.dbct-popup-body{width:100%;max-width:1080px;margin:0 auto}
.dbct-popup-copy{max-width:1080px;margin:0 auto 18px;color:#222b3f;font-family:inherit}
.dbct-popup-copy h1,.dbct-popup-copy h2{
  margin:0 38px 14px 0;
  font-family:'Special Elite','Courier New',Courier,monospace;
  font-weight:400;
  font-size:clamp(27px,2.55vw,38px);
  line-height:1.16;
  letter-spacing:.01em;
  color:#0d1530;
  text-shadow:none;
}
.dbct-popup-copy p{
  margin:0 0 18px;
  font-family:inherit;
  font-size:15px;
  line-height:1.55;
  font-weight:400;
  letter-spacing:0;
  color:#222b3f;
  text-shadow:none;
}
.dbct-lazy-loading:before{content:"Loading Deep Blue\2026"}
.dbct-lazy-loading.dbct-lazy-error:before{content:"Deep Blue could not load."}

/* Plugin-managed modal opened by #deepblue.
   Styling is intentionally aligned with .ns-overlay / .ns-dialog from the
   sidebar plugin, copied here so the popup remains independent. */
body.dbct-modal-is-open{overflow:hidden}
body.admin-bar .dbct-modal{top:var(--wp-admin--admin-bar--height,32px)}
@media screen and (max-width:782px){body.admin-bar .dbct-modal{top:46px}}
.dbct-modal[hidden]{display:none!important}
.dbct-modal{
  position:fixed;inset:0;z-index:9990;display:flex;
  align-items:center;justify-content:center;
  padding:24px clamp(16px,4vw,64px);
  box-sizing:border-box;overflow-y:auto;overscroll-behavior:contain;
  font-family:inherit;color:#222b3f;
}
.dbct-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:0}
.dbct-modal-dialog{
  position:relative;z-index:1;isolation:isolate;
  width:min(92vw,1144px);margin:0;box-sizing:border-box;
  flex:0 1 auto;
  background:transparent;color:#222b3f;border:0;box-shadow:none;
  border-radius:14px;padding:24px 32px 30px;
  font-family:inherit;font-size:14px;line-height:1.6;letter-spacing:normal;
}
.dbct-modal-dialog::before{
  content:"";
  position:absolute;inset:-4px;z-index:-1;border-radius:14px;
  background:rgba(207,207,207,.88);filter:blur(5px);
}
.dbct-modal-close{
  position:absolute;top:12px;right:14px;z-index:3;
  width:28px;height:28px;border-width:0;border-radius:50%;background-color:transparent;
  color:#555;font:400 24px/1 Arial,Helvetica,sans-serif;cursor:pointer;
  box-shadow:none;text-align:center;padding:0;opacity:1;-webkit-appearance:none;appearance:none;
  transition:background .2s,color .2s;
}
.dbct-modal-close:hover,.dbct-modal-close:focus{color:#0d1530;background:rgba(255,255,255,.25);outline:none}
.dbct-modal .dbct-popup-deferred{clear:both;min-height:160px;position:relative;z-index:1}
.dbct-modal .dbct-popup-body{max-width:1080px;margin:0 auto;padding:0}
.dbct-modal .dbct-popup-copy{max-width:1080px;margin:0 auto 18px;padding:0;color:#222b3f}
.dbct-modal .dbct-popup-copy h1,.dbct-modal .dbct-popup-copy h2{color:#0d1530}
.dbct-modal .dbct-popup-copy p{color:#222b3f}
.dbct-modal .dbct-root{position:relative;z-index:1;max-width:1080px}
@media (max-height:760px){
  .dbct-modal{align-items:flex-start}
}
@media (max-width:760px){
  .dbct-modal{padding:18px 10px;align-items:flex-start}
  .dbct-modal-dialog{width:100%;max-width:none;padding:22px 16px 18px;border-radius:14px}
  .dbct-modal-dialog::before{border-radius:14px}
  .dbct-modal-close{top:8px;right:10px}
  .dbct-modal .dbct-popup-copy{margin-bottom:16px}
  .dbct-modal .dbct-popup-copy h1,.dbct-modal .dbct-popup-copy h2{margin:0 34px 10px 0;font-size:28px}
  .dbct-modal .dbct-popup-copy p{font-size:14.5px;margin-bottom:14px;line-height:1.5}
}