/* Spectrum Gambit — ZX Spectrum flavoured, dark, crisp. */
:root{
  --bg:#0a0a14; --panel:#13131f; --ink:#e8e8f0; --dim:#8a8aa0;
  --line:#262636; --accent:#ffd000;
  --zx-red:#d80000; --zx-yel:#ffd000; --zx-grn:#00c000; --zx-cyn:#00c0c0;
  --good:#00c000; --think:#ffd000; --over:#d80000;
}
*{box-sizing:border-box}
.hidden{display:none !important}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"SF Mono",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
.rainbow{height:6px;background:linear-gradient(90deg,
  var(--zx-red) 0 25%,var(--zx-yel) 25% 50%,var(--zx-grn) 50% 75%,var(--zx-cyn) 75% 100%);}

header{padding:22px 20px 10px;text-align:center}
h1{margin:0;font-size:clamp(28px,6vw,52px);letter-spacing:.18em;font-weight:800;
   background:linear-gradient(90deg,var(--zx-red),var(--zx-yel),var(--zx-grn),var(--zx-cyn));
   -webkit-background-clip:text;background-clip:text;color:transparent;}
.tag{margin:.3em 0 0;color:var(--dim);font-size:13px;letter-spacing:.06em}
.tag span{color:var(--accent)}

.banner{max-width:1040px;margin:8px auto;padding:10px 16px;border:1px solid var(--accent);
  border-radius:10px;display:flex;gap:12px;align-items:center;justify-content:center;
  background:#1a1a0a;flex-wrap:wrap}
.banner button{cursor:pointer}
.banner .fresh{background:var(--accent);color:#000;border:0;padding:6px 14px;border-radius:7px;font-weight:700}
.banner .dismiss{background:transparent;color:var(--dim);border:1px solid var(--line);padding:6px 12px;border-radius:7px}

main{display:flex;gap:20px;max-width:1040px;margin:14px auto;padding:0 16px;align-items:flex-start;flex-wrap:wrap}
.stage{flex:1 1 460px;min-width:320px}
.panel{flex:0 0 340px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px}

/* screen */
.crt{position:relative;background:#000;border-radius:12px;padding:14px;border:1px solid var(--line);
  box-shadow:0 0 0 1px #000 inset, 0 18px 50px rgba(0,0,0,.5)}
#screen{display:block;width:100%;height:auto;image-rendering:pixelated;border-radius:4px;
  aspect-ratio:320/240;background:#cfcfcf}
.loading{position:absolute;inset:14px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;background:#000;border-radius:4px;color:#fff;font-size:18px;letter-spacing:.1em}
.loading.hidden{display:none}
.loading b{color:var(--accent)}
.stripes{width:90%;height:18px;margin-bottom:18px;border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--zx-red) 0 14px,var(--zx-yel) 14px 28px,
  var(--zx-cyn) 28px 42px,#1050ff 42px 56px);
  animation:load 1s linear infinite;background-size:56px 100%}
@keyframes load{to{background-position:56px 0}}

/* touch controls */
.touch{margin-top:14px;display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap}
.dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:6px}
.dpad button{background:#1c1c2c;border:1px solid var(--line);color:var(--ink);border-radius:9px;
  font-size:16px;cursor:pointer}
.dpad button:active{background:var(--accent);color:#000}
.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .ok{grid-area:2/2;color:var(--accent)}
.dpad .right{grid-area:2/3}.dpad .down{grid-area:3/2}
.hint{color:var(--dim);font-size:12px;max-width:220px}
.toggle{display:flex;align-items:center;gap:7px;margin-top:8px;color:var(--ink);cursor:pointer;font-size:13px}
.toggle input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
#screen{cursor:pointer}

/* panel */
.status-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.status{font-weight:700;padding:4px 12px;border-radius:20px;background:#1c1c2c;text-transform:capitalize}
.status.yourmove{background:#0c2a0c;color:#7dff7d}
.status.thinking{background:#2a2400;color:var(--zx-yel);animation:pulse 1s ease-in-out infinite}
.status.over{background:#2a0c0c;color:#ff8080}
@keyframes pulse{50%{opacity:.55}}
.movecount{color:var(--dim);font-size:12px}

.readout{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.readout div{background:#0e0e18;border:1px solid var(--line);border-radius:9px;padding:8px;text-align:center}
.readout label{display:block;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.readout b{font-size:18px}

.clockbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.clockbar>label{color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
#timecontrol{flex:1;min-width:150px;background:#0e0e18;border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:8px;font-family:inherit;font-size:13px;cursor:pointer}
.clocks{display:flex;gap:8px;width:100%}
.clk{flex:1;background:#0e0e18;border:1px solid var(--line);border-radius:9px;padding:6px 10px;text-align:center}
.clk label{display:block;color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.clk b{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.clk.active{border-color:var(--accent);background:#1a1a0a}
.clk.active b{color:var(--accent)}
.clk.low b{color:#ff6b6b}
.clockmsg{width:100%;text-align:center;color:#ff8080;font-size:13px;min-height:0}
.clockmsg:empty{display:none}

.levels{display:flex;align-items:center;gap:6px;margin-bottom:12px;font-size:13px;color:var(--dim)}
.levels span{flex:1}
.levels button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:#1c1c2c;color:var(--ink);cursor:pointer}
.levels button:active{background:var(--accent);color:#000}

.actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.actions button,.filebtn{flex:1;min-width:72px;padding:9px;border-radius:9px;border:1px solid var(--line);
  background:#1c1c2c;color:var(--ink);cursor:pointer;font-family:inherit;font-size:13px;text-align:center}
.actions button:active{background:var(--accent);color:#000}
.ghost{background:transparent !important}
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}

h3{margin:16px 0 8px;font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
.logwrap{height:170px;overflow:auto;background:#0e0e18;border:1px solid var(--line);border-radius:9px;padding:6px 10px}
.logwrap table{width:100%;border-collapse:collapse;font-size:14px}
.logwrap td{padding:1px 6px}
.logwrap td.n{color:var(--dim);width:34px}
.wide{width:100%;margin-top:8px;padding:8px;border-radius:9px;border:1px solid var(--line);color:var(--ink);cursor:pointer}

.note{color:var(--dim);font-size:12px;margin:0 0 8px}
.slots{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px}
.slots li{display:flex;align-items:center;gap:8px;background:#0e0e18;border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.slots li span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slots button{background:#1c1c2c;border:1px solid var(--line);color:var(--ink);border-radius:6px;padding:4px 10px;cursor:pointer}
.slots .del{color:#ff8080}
.slotsave{display:flex;gap:8px;margin-bottom:12px}
.slotsave input{flex:1;background:#0e0e18;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:8px;font-family:inherit}
.slotsave button{background:var(--accent);color:#000;border:0;border-radius:8px;padding:8px 16px;font-weight:700;cursor:pointer}

/* compete */
.compete{display:flex;gap:20px;max-width:1040px;margin:6px auto;padding:0 16px;flex-wrap:wrap}
.card{flex:1 1 340px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px}
.card h2{margin:0 0 6px;font-size:18px}
.card h3{margin:14px 0 8px}
.namerow,.sharerow{display:flex;gap:8px;margin:10px 0}
.namerow input,.sharerow input{flex:1;background:#0e0e18;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:9px;font-family:inherit}
.card button{background:#1c1c2c;border:1px solid var(--line);color:var(--ink);border-radius:8px;padding:9px 14px;cursor:pointer;font-family:inherit}
.card button:active{background:var(--accent);color:#000}
.card .primary{background:var(--accent);color:#000;border:0;font-weight:700}
.card .wide{width:100%;margin:6px 0}
.card .ghost{background:transparent}
.small{font-size:12px}.dim{color:var(--dim)}
.reportbox{background:#0e0e18;border:1px solid var(--accent);border-radius:10px;padding:12px;margin:10px 0}
.reportbtns{display:flex;gap:8px}.reportbtns button{flex:1}
.reportbtns .suggest{background:var(--accent);color:#000;font-weight:700}
.lb{width:100%;border-collapse:collapse;font-size:14px;margin-top:4px}
.lb th{text-align:left;color:var(--dim);font-weight:500;font-size:12px;padding:4px 6px;border-bottom:1px solid var(--line)}
.lb td{padding:4px 6px}.lb td.n,.lb .n{color:var(--dim);width:28px}
.lb tr.me{color:var(--accent)}
/* Recent games: a viewport-sized scroll box so the feed never stretches the page;
   max-height scales with the screen (taller screen = more rows visible). */
.recentwrap{max-height:clamp(140px,34vh,360px);overflow:auto;background:#0e0e18;
  border:1px solid var(--line);border-radius:9px;padding:2px 10px;margin-top:4px}
.recentwrap thead th{position:sticky;top:0;background:#0e0e18;z-index:1}
.corrstate{background:#0e0e18;border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:10px}
.corrstate b{color:var(--accent);text-transform:capitalize}
.card .actions{display:flex;gap:8px;margin-top:6px}
.card .actions button{flex:1}
button:disabled{opacity:.4;cursor:not-allowed}

/* AI Companion */
.companion{max-width:1040px;margin:6px auto;padding:0 16px}
.comp-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.comp-head h2{margin:0;font-size:18px}
.badge{font-size:11px;background:#1c1c2c;border:1px solid var(--line);color:var(--accent);padding:2px 7px;border-radius:6px;vertical-align:middle}
.comp-connect{background:#0e0e18;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:10px 0}
.comp-row{display:flex;align-items:center;gap:10px;padding:3px 0;flex-wrap:wrap}
.comp-row .k{color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.06em;min-width:110px}
.comp-row code{background:#000;border:1px solid var(--line);border-radius:6px;padding:3px 8px;font-size:13px;word-break:break-all}
.comp-row code.code{font-size:18px;letter-spacing:.18em;color:var(--accent)}
.comp-status{padding:2px 10px;border-radius:20px;font-size:13px}
.comp-status.waiting{background:#2a2400;color:var(--zx-yel)}
.comp-status.connected{background:#0c2a0c;color:#7dff7d}
.comp-status.offline{background:#2a0c0c;color:#ff8080}
.comp-setup{background:#0e0e18;border:1px solid var(--line);border-radius:9px;padding:8px 12px;margin:6px 0;font-size:13px}
.comp-setup summary{cursor:pointer;color:var(--ink)}
.comp-setup ol{margin:8px 0 4px;padding-left:20px;color:var(--dim)}
.comp-setup li{margin:4px 0}
.comp-setup code,.comp-setup pre{background:#000;border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:12px;color:var(--ink)}
.comp-setup pre{display:block;padding:8px;overflow:auto;white-space:pre;margin:4px 0}
.codeRef{color:var(--accent);font-weight:700}
.comp-cmd:empty{display:none}
.comp-cmd{display:flex;align-items:center;gap:10px;background:#1a1a0a;border:1px solid var(--accent);border-radius:9px;padding:10px 12px;margin:10px 0}
.comp-cmd button{background:var(--accent);color:#000;border:0;border-radius:7px;padding:6px 14px;font-weight:700;cursor:pointer}
.comp-cmd button.ghost{background:transparent;color:var(--dim);border:1px solid var(--line)}
.comp-comment{color:var(--ink);margin:0 0 8px}
.comp-cards{display:flex;flex-direction:column;gap:8px;margin:4px 0}
.comp-card{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:10px;background:#0e0e18;border:1px solid var(--line);border-radius:9px;padding:8px 12px}
.comp-card.illegal{opacity:.6}
.comp-move{font-size:18px;font-weight:700}
.comp-move .warn{font-size:11px;color:#ff8080;font-weight:400}
.comp-why{color:var(--dim);font-size:13px}
.comp-play{background:var(--accent);color:#000;border:0;border-radius:7px;padding:6px 14px;font-weight:700;cursor:pointer}
.comp-log{display:flex;flex-direction:column;gap:4px;max-height:140px;overflow:auto;background:#0e0e18;border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.comp-log:empty{display:none}
.comp-logline{font-size:13px;color:var(--dim);border-bottom:1px solid var(--line);padding-bottom:3px}
.toggle.small{font-size:12px;color:var(--dim);margin:10px 0}

footer{max-width:1040px;margin:10px auto 40px;padding:0 16px;color:var(--dim);font-size:13px;text-align:center}
footer b{color:var(--ink)}

.flash{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--accent);color:#000;padding:8px 18px;border-radius:20px;font-weight:700;font-size:13px;
  opacity:0;pointer-events:none;transition:.2s}
.flash.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:880px){main{flex-direction:column}.panel{flex:1 1 auto;width:100%}}