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

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

.dbc-crt{
  background:var(--dbc-bezel); border:1px solid var(--dbc-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);
}
.dbc-screen{
  position:relative; background:var(--dbc-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);
}
.dbc-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){
  .dbc-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:dbc-sweep 7s linear infinite;
  }
  @keyframes dbc-sweep{to{top:110%}}
}

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

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

.dbc-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(--dbc-phos-faint);
  box-shadow:0 0 24px rgba(56,255,124,.08); user-select:none;
}
.dbc-sq{
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(22px,5.4vw,34px); line-height:1; cursor:pointer; position:relative;
}
.dbc-sq.dbc-light{background:var(--dbc-sq-light)}
.dbc-sq.dbc-dark{background:var(--dbc-sq-dark)}
.dbc-sq .dbc-pc{filter:drop-shadow(0 0 4px rgba(56,255,124,.35))}
.dbc-sq .dbc-w{color:#eafff0}
.dbc-sq .dbc-b{color:#34c463}
.dbc-sq.dbc-sel{outline:2px solid var(--dbc-amber); outline-offset:-2px; z-index:1}
.dbc-sq.dbc-tgt::after{content:""; position:absolute; width:22%; height:22%; border-radius:50%; background:rgba(255,176,0,.55)}
.dbc-sq.dbc-tgt.dbc-cap::after{width:86%; height:86%; background:transparent; border:2px solid rgba(255,176,0,.6); border-radius:4px}
.dbc-sq.dbc-lastmove{box-shadow:inset 0 0 0 2px rgba(143,232,174,.35)}

.dbc-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(--dbc-phos-faint); letter-spacing:.32em; padding:0 2px}
.dbc-coords .dbc-files{letter-spacing:.32em; white-space:nowrap; flex:0 0 auto}
.dbc-coords .dbc-statustext{margin-left:auto; text-align:right; font-size:11px; letter-spacing:.08em;
  color:var(--dbc-phos); min-width:0}
.dbc-coords .dbc-statustext.dbc-alert{color:var(--dbc-amber)}

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

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

.dbc-tclabel{font-size:9px; letter-spacing:.25em; color:var(--dbc-phos-dim); margin-bottom:-4px}
.dbc-controls{display:flex; gap:10px}
.dbc-root .dbc-controls button{
  font-family:inherit; font-size:11px; letter-spacing:.14em; font-weight:500;
  background:var(--dbc-panel2); color:var(--dbc-phos);
  border:1px solid var(--dbc-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;
}
.dbc-root .dbc-controls button:hover{background:#143020; border-color:var(--dbc-phos-dim)}
.dbc-root .dbc-controls button:focus-visible{outline:2px solid var(--dbc-amber); outline-offset:2px}
.dbc-root .dbc-controls button:active{transform:translateY(1px)}
.dbc-root .dbc-controls button.dbc-on{border-color:var(--dbc-amber); color:var(--dbc-amber)}

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

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

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

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

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

.dbc-movewrap{border:1px solid var(--dbc-phos-faint);background:var(--dbc-panel);padding:10px 12px;
  display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.dbc-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(--dbc-phos-faint) transparent;
  display:grid;grid-template-columns:auto 1fr 1fr;gap:0 6px;align-content:start}
.dbc-movelist .dbc-mvnum{color:var(--dbc-phos-faint);text-align:right;padding-right:2px}
.dbc-movelist .dbc-mv{cursor:pointer;padding:0 4px;border-radius:2px;color:var(--dbc-phos-dim);white-space:nowrap}
.dbc-movelist .dbc-mv:hover{color:var(--dbc-phos);background:#143020}
.dbc-movelist .dbc-mv.dbc-cur{background:var(--dbc-amber);color:#102016;font-weight:600}

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

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