/* ==========================================================================
   Robot Arcade - styles for the four games.
   Loaded only on /arcade/.
   ========================================================================== */

.arcade{--hud:#0A0D10}

/* ------------------------------------------------------------ game tabs -- */
.gtabs{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-bottom:clamp(24px,3vw,40px)}
.gtab{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--ink-700);border:1px solid var(--ink-600);border-radius:var(--r-md);
  padding:20px 20px 18px;color:var(--cream);font:inherit;
  transition:border-color .2s,transform .2s var(--ease),background .2s;
}
.gtab:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.gtab[aria-selected="true"]{border-color:var(--orange);background:linear-gradient(180deg,rgba(238,118,28,.12),var(--ink-700) 60%)}
.gtab__ico{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;margin-bottom:14px;background:rgba(238,118,28,.14);color:var(--orange)}
.gtab__ico svg{width:21px;height:21px}
.gtab[data-c="cyan"] .gtab__ico{background:rgba(53,211,206,.13);color:var(--cyan)}
.gtab[data-c="lime"] .gtab__ico{background:rgba(199,240,63,.12);color:var(--lime)}
.gtab[data-c="violet"] .gtab__ico{background:rgba(155,140,255,.14);color:var(--violet)}
.gtab b{display:block;font-family:var(--ff-display);font-size:1.08rem;letter-spacing:-.01em;margin-bottom:5px}
.gtab span{display:block;font-size:.86rem;color:var(--muted);line-height:1.45}

/* ----------------------------------------------------------- game shell -- */
.game{display:none}
.game.on{display:block}
.gbox{
  background:var(--ink-800);border:1px solid var(--ink-600);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow);
}
.gbox__head{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:16px clamp(16px,2.2vw,26px);border-bottom:1px solid var(--ink-600);background:var(--hud);
}
.gbox__title{display:flex;align-items:center;gap:11px;font-family:var(--ff-mono);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.gbox__body{padding:clamp(16px,2.4vw,28px)}

.hud{display:flex;flex-wrap:wrap;gap:8px}
.hud__item{
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(247,243,234,.05);border:1px solid var(--line);border-radius:var(--r-xs);
  padding:6px 10px;color:var(--muted);white-space:nowrap;
}
.hud__item b{color:var(--cream);font-weight:500}
.hud__item.good b{color:var(--lime)}
.hud__item.warn b{color:var(--orange)}
.hud__item.bad b{color:var(--red)}

/* --------------------------------------------------------------- canvas -- */
.gcanvas{
  width:100%;display:block;background:var(--ink-900);border:1px solid var(--ink-600);
  border-radius:var(--r-sm);touch-action:manipulation;
}

.glayout{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:1fr}
@media (min-width:860px){.glayout{grid-template-columns:1.35fr .85fr;align-items:start}}

/* ---------------------------------------------------------- controls ---- */
.gbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.gbtn{
  font-family:var(--ff-body);font-weight:600;font-size:.85rem;line-height:1;cursor:pointer;
  padding:11px 15px;border-radius:var(--r-xs);border:1px solid var(--ink-600);
  background:var(--ink-700);color:var(--cream);transition:border-color .16s,background .16s,transform .14s var(--ease);
}
.gbtn:hover{border-color:var(--line-strong);background:var(--ink-600)}
.gbtn:active{transform:translateY(1px)}
.gbtn--go{background:linear-gradient(180deg,var(--orange-bright),var(--orange));color:#140A02;border-color:transparent}
.gbtn--go:hover{background:var(--orange-bright)}
.gbtn[disabled]{opacity:.42;cursor:not-allowed}
.gbtn--cmd{display:flex;align-items:center;gap:8px;font-family:var(--ff-mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.gbtn--cmd i{width:8px;height:8px;border-radius:2px;flex:none;background:var(--orange)}
.gbtn--cmd[data-c="cyan"] i{background:var(--cyan)}
.gbtn--cmd[data-c="lime"] i{background:var(--lime)}
.gbtn--cmd[data-c="violet"] i{background:var(--violet)}

/* Hint and result sit under the whole layout, so on a phone the controls
   come straight after the board instead of behind a paragraph of text. */
.gfoot{margin-top:clamp(16px,2vw,22px)}
.ghint{font-size:.88rem;color:var(--muted);margin:0;line-height:1.55;max-width:74ch}
.ghint b{color:var(--cream-dim);font-weight:500}

/* ---------------------------------------------------------- program ----- */
.prog{
  background:var(--ink-900);border:1px solid var(--ink-600);border-radius:var(--r-sm);
  min-height:190px;max-height:330px;overflow-y:auto;padding:10px;
}
.prog ol{list-style:none;margin:0;padding:0;counter-reset:ln}
.prog li{
  counter-increment:ln;display:flex;align-items:center;gap:10px;
  font-family:var(--ff-mono);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  padding:7px 8px;border-radius:var(--r-xs);margin-bottom:3px;color:var(--cream-dim);
  background:rgba(247,243,234,.03);
}
.prog li::before{content:counter(ln,decimal-leading-zero);color:var(--muted);font-size:.7rem;flex:none;width:18px}
.prog li.run{background:rgba(238,118,28,.17);color:var(--cream);box-shadow:inset 2px 0 0 var(--orange)}
.prog li i{width:8px;height:8px;border-radius:2px;flex:none;background:var(--orange)}
.prog li[data-c="cyan"] i{background:var(--cyan)}
.prog li[data-c="lime"] i{background:var(--lime)}
.prog li[data-c="violet"] i{background:var(--violet)}
.prog li span{flex:1}
.prog li button{
  background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1;
  padding:2px 5px;border-radius:3px;
}
.prog li button:hover{color:var(--red);background:rgba(255,90,77,.12)}
.prog__empty{color:var(--muted);font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;padding:14px 8px;line-height:1.7}

.panelttl{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;display:block}

/* ----------------------------------------------------------- messages --- */
.gmsg{
  margin-top:14px;padding:13px 16px;border-radius:var(--r-xs);font-size:.9rem;line-height:1.5;
  border:1px solid var(--line);background:rgba(247,243,234,.04);color:var(--cream-dim);
}
.gmsg.ok{border-color:rgba(199,240,63,.42);background:rgba(199,240,63,.09);color:#E6F7B5}
.gmsg.no{border-color:rgba(255,90,77,.42);background:rgba(255,90,77,.09);color:#FFC9C4}
.gmsg b{color:inherit;font-weight:600}

/* -------------------------------------------------------------- gears --- */
.gearpick{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.gearpick label{display:block;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.teeth{display:flex;flex-wrap:wrap;gap:6px}
.teeth button{
  font-family:var(--ff-mono);font-size:.8rem;padding:9px 0;width:48px;cursor:pointer;
  background:var(--ink-700);border:1px solid var(--ink-600);border-radius:var(--r-xs);color:var(--cream-dim);
  transition:border-color .16s,color .16s,background .16s;
}
.teeth button:hover{border-color:var(--line-strong);color:var(--cream)}
.teeth button[aria-pressed="true"]{border-color:var(--orange);background:rgba(238,118,28,.14);color:var(--orange)}
.readout{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));margin-top:18px}
.readout div{background:var(--ink-900);border:1px solid var(--ink-600);border-radius:var(--r-xs);padding:12px 14px}
.readout span{display:block;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.readout b{font-family:var(--ff-mono);font-size:1.22rem;font-weight:500;color:var(--cream)}
.readout b.pass{color:var(--lime)}
.readout b.fail{color:var(--red)}

/* -------------------------------------------------------------- binary -- */
.bits{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:0 0 6px}
.bit{
  width:clamp(36px,8.5vw,56px);height:clamp(48px,10vw,70px);cursor:pointer;
  background:var(--ink-700);border:1px solid var(--ink-600);border-radius:var(--r-xs);
  font-family:var(--ff-mono);font-size:clamp(1.1rem,2.6vw,1.5rem);color:var(--muted);
  display:grid;place-items:center;transition:all .13s;
}
.bit[aria-pressed="true"]{background:rgba(199,240,63,.14);border-color:var(--lime);color:var(--lime)}
.bitlabels{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:18px}
.bitlabels span{width:clamp(36px,8.5vw,56px);text-align:center;font-family:var(--ff-mono);font-size:.62rem;color:var(--muted);letter-spacing:.04em}
.target{text-align:center;padding:clamp(18px,3vw,30px) 10px}
.target em{display:block;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-style:normal;margin-bottom:10px}
.target strong{display:block;font-family:var(--ff-mono);font-size:clamp(2.6rem,9vw,4.2rem);font-weight:500;line-height:1;color:var(--cream);letter-spacing:-.01em}
.target strong.sm{font-size:clamp(1.5rem,5.5vw,2.6rem);letter-spacing:.08em}
.timerbar{height:5px;background:var(--ink-600);border-radius:3px;overflow:hidden;margin:18px 0 0}
.timerbar i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),var(--orange));width:100%;transition:width .25s linear}
.scores{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:18px}
.scores div{background:var(--ink-900);border:1px solid var(--ink-600);border-radius:var(--r-xs);padding:12px 14px;text-align:center}
.scores span{display:block;font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.scores b{font-family:var(--ff-mono);font-size:1.4rem;font-weight:500;color:var(--cream)}

/* --------------------------------------------------------------- logic -- */
.slots{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:18px}
.slot label{display:block;font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.slot select{
  width:100%;font-family:var(--ff-mono);font-size:.82rem;padding:11px 12px;cursor:pointer;
  background:var(--ink-700);border:1px solid var(--ink-600);border-radius:var(--r-xs);color:var(--cream);
}
.slot select:focus{border-color:var(--orange)}
.ttable{width:100%;border-collapse:collapse;font-family:var(--ff-mono);font-size:.82rem;margin-top:4px}
.ttable th,.ttable td{padding:9px 6px;text-align:center;border-bottom:1px solid var(--ink-600)}
.ttable th{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.ttable td{color:var(--cream-dim)}
.ttable td.y{color:var(--lime)}
.ttable td.n{color:var(--muted)}
.ttable tr.bad td{background:rgba(255,90,77,.1)}
.ttable tr.good td{background:rgba(199,240,63,.07)}

/* --------------------------------------------------------- level pips --- */
.pips{display:flex;gap:5px}
.pips i{width:20px;height:4px;border-radius:2px;background:var(--ink-600);display:block}
.pips i.done{background:var(--lime)}
.pips i.now{background:var(--orange)}

@media (prefers-reduced-motion:reduce){
  .gtab:hover,.gbtn:active{transform:none}
}