/* Palette/type/radius come from /shared/tokens.css (Phase 5). This file consumes
   the shared tokens (incl. legacy aliases --accent/--err/--warn/--ok/--font) and
   only styles the IDE chrome — layout & behavior unchanged. */

* { box-sizing: border-box; }
/* The `hidden` attribute must win over the display:flex/inline-flex we set on
   .mb-group/.hud-card/etc — otherwise the scenario group and end card show by default. */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-ui); font-size: 13px;
}

/* Thin themed scrollbars WITHOUT the stepper arrow buttons (no up/down/left/right
   arrows at the scrollbar ends). */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-corner { background: transparent; }

#app { display: grid; grid-template-rows: auto auto 1fr 220px; height: 100vh; }

/* ── Toolbar ─────────────────────────────────────────────────────────── */
#toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px; background: var(--toolbar); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 9px; margin-right: 6px; text-decoration: none; color: var(--fg); }
.brand img { height: 24px; width: auto; mix-blend-mode: screen; }
.brand-name { font-size: 14px; letter-spacing: .2em; color: var(--fg); }
.brand-name b { font-weight: 700; }
.brand-name span { font-weight: 300; }
/* Scope to DIRECT-child buttons only (Build/Stop). Otherwise this ID-specificity
   rule would override .seg button.active and paint every Code/Split/Arena segment
   teal, hiding which view is selected. */
#toolbar > button {
  background: var(--teal); color: var(--ink-teal); border: 0; border-radius: var(--radius);
  padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  transition: background .15s;
}
#toolbar > button:hover:not(:disabled) { background: var(--teal-hover); }
#toolbar > button:active:not(:disabled) { background: var(--teal-active); }
#toolbar > button:disabled { opacity: 0.5; cursor: default; }

.status { padding: 3px 10px; border-radius: 10px; font-weight: 600; font-size: 12px; }
.status-idle    { background: #3a3d41; color: #ccc; }
.status-building{ background: #5a4a00; color: #ffe08a; }
.status-running { background: var(--teal-tint); color: var(--teal); }
.status-error   { background: #5a1d1d; color: #ff9b9b; }
.message { color: var(--fg-muted); font-size: 12px; }
.message.error { color: var(--err); }

#robot-help { color: var(--fg-muted); text-decoration: none; font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius); white-space: nowrap; }
#robot-help:hover { color: var(--fg); border-color: var(--teal); }

/* ── Auth (Phase 4) ──────────────────────────────────────────────────── */
.auth { margin-left: auto; display: flex; align-items: center; gap: var(--space); font-size: 12px; }
.auth-email { color: #aaa; }
.auth-link { color: var(--accent-hover); text-decoration: none; }
.auth-link:hover { text-decoration: underline; }

/* ── Workspace: editor | simulation ──────────────────────────────────── */
#workspace { display: grid; grid-template-columns: var(--code, 1fr) 6px var(--sim, 1fr); min-height: 0; }
#divider { cursor: col-resize; background: var(--border); }
#divider:hover { background: var(--accent); }
/* Editor pane = flat file list | editor. Keeping the list inside the pane leaves
   the workspace grid + resize divider untouched. */
#editor-pane { min-width: 0; display: flex; }
#editor { flex: 1; min-width: 0; height: 100%; }

/* ── Flat file list (no folders) ─────────────────────────────────────── */
#filetree {
  width: 168px; flex: 0 0 168px; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--border);
  overflow: hidden; transition: flex-basis .15s, width .15s;
}
#editor-pane.filetree-collapsed #filetree { flex-basis: 0; width: 0; border-right: 0; }
#filetree-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 4px 10px; border-bottom: 1px solid var(--border);
}
.filetree-title {
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em;
  font-weight: 700; color: var(--fg-2);
}
.filetree-actions { display: flex; gap: 2px; }
.filetree-actions button {
  background: none; border: 0; color: var(--fg-muted); cursor: pointer;
  font-size: 12px; padding: 2px 4px; border-radius: var(--radius);
}
.filetree-actions button:hover { background: #2a2d2e; color: var(--fg); }
#file-list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; }
#file-list li {
  padding: 4px 10px; cursor: pointer; font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#file-list li:hover { background: #2a2d2e; }
#file-list li.active { background: var(--teal-tint); color: var(--teal); }

/* Collapse/expand toggle — thin strip between the list and the editor. */
#filetree-toggle {
  flex: 0 0 12px; border: 0; border-right: 1px solid var(--border);
  background: var(--panel); color: var(--fg-muted); cursor: pointer; font-size: 11px;
}
#filetree-toggle:hover { background: #2a2d2e; color: var(--fg); }
#editor-pane.filetree-collapsed #filetree-toggle { transform: scaleX(-1); }
#sim-pane { min-width: 0; background: var(--canvas); display: flex; position: relative; }

/* ── Match-config bar + view toggle (Phase 9) ─────────────────────────────── */
#matchbar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 6px 12px; background: var(--panel);
  border-bottom: 1px solid var(--border);
  font-size: 12px; color: var(--fg-2);
}
.mb-group { display: flex; align-items: center; gap: 8px; }
.mb-right { margin-left: auto; }
.mb-label { text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); font-weight: 600; font-size: 11px; }
.mb-note { color: var(--fg-muted); font-style: italic; }
.mb-right { gap: 10px; }
/* Sound toggle — icon button (matches the design brief bar). */
.mb-iconbtn {
  background: transparent; border: 1px solid var(--border); border-radius: 3px;
  padding: 5px 9px; font-size: 15px; line-height: 1; cursor: pointer;
}
.mb-iconbtn:hover { border-color: var(--fg-muted); }
/* Start match/test — lives on the bar above the arena, right-aligned. */
#btn-start {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 700;
  color: var(--ink-teal); background: var(--teal); border: 0; border-radius: 3px;
  padding: 8px 16px; cursor: pointer; transition: background .15s, opacity .15s;
}
#btn-start:hover:not(:disabled) { background: var(--teal-hover); }
#btn-start:disabled { opacity: .5; cursor: default; }
/* Secondary "Restart" — ghost button shown only while a match is in progress/paused. */
.mb-ghost {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 600;
  color: var(--fg-2); background: transparent; border: 1px solid var(--border);
  border-radius: 3px; padding: 7px 12px; cursor: pointer;
}
.mb-ghost:hover { border-color: var(--fg-muted); color: var(--fg); }
/* When the sim is paused the button shows "Resume ▶" tinted yellow (a clear paused cue). */
#btn-start.paused { background: var(--yellow); color: var(--yellow-ink); }
#btn-start.paused:hover:not(:disabled) { background: var(--yellow); filter: brightness(1.06); }
/* Themed pose dropdown (custom — the native <select> popup can't be dark-themed
   across browsers). Reuses the web palette so the open list matches the IDE. */
.dd { position: relative; display: inline-block; }
.dd-btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  min-width: 150px; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 5px; padding: 4px 10px;
  font: inherit; font-size: 12px; cursor: pointer;
}
.dd-btn::after { content: "▾"; color: var(--fg-muted); font-size: 10px; }
.dd-btn:hover:not(:disabled) { border-color: var(--fg-muted); }
.dd-btn[aria-expanded="true"] { border-color: var(--teal); }
.dd-btn:disabled { opacity: .5; cursor: default; }
.dd-list {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
  margin: 0; padding: 4px; list-style: none; min-width: 100%; max-height: 260px; overflow: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.7);
}
.dd-list li {
  padding: 6px 10px; border-radius: 4px; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); white-space: nowrap;
}
.dd-list li:hover { background: #2a2d2e; color: var(--fg); }
.dd-list li.sel { background: var(--teal-tint); color: var(--teal); }

/* Segmented control (reused by mode + view toggles). The active segment is a solid
   teal chip so the current view/mode is unmistakable. */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; }
.seg button {
  background: transparent; color: var(--fg-muted); border: 0; border-radius: 4px;
  padding: 4px 12px; cursor: pointer; font: inherit; font-weight: 600;
  transition: background .12s, color .12s;
}
.seg button:hover:not(.active) { color: var(--fg); }
.seg button.active { background: var(--teal); color: var(--ink-teal); }
/* View toggle + auth grouped on the RIGHT of the toolbar (one auto-gap, then they sit together). */
#view-toggle { margin-left: auto; }
#toolbar #auth { margin-left: 14px; }

/* Pills (opponent / scenario choices). */
.pills { display: inline-flex; gap: 6px; }
.pill { background: var(--bg); color: var(--fg-2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 12px; cursor: pointer; font: inherit; font-size: 12px; }
.pill.active { background: var(--teal); color: var(--ink-teal); border-color: var(--teal); font-weight: 600; }
.pill:disabled { opacity: .4; cursor: default; }

/* ── HUD overlays (Phase 9) — exact values from the ArenaLab design brief (IDE
   "GAME MODE HUD" / "TEST MODE HUD" blocks). Non-interactive except the end card. ── */
#hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-mono, monospace); }
@keyframes alPop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Top-left: ROUND n/3 pill + timer badge. Top-right: score badge. */
#hud-badges { position: absolute; top: 14px; left: 14px; display: flex; align-items: center; gap: 8px; }
#hud-roundpill {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-teal); background: var(--teal); padding: 4px 9px; border-radius: 999px;
}
#hud-timer {
  font-size: 13px; font-weight: 700; color: var(--fg);
  background: rgba(13,13,13,.72); padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border);
}
#hud-score {
  position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  background: rgba(13,13,13,.72); padding: 4px 11px; border-radius: 4px; border: 1px solid var(--border);
}
#hud-score-you { color: var(--teal); }
#hud-score .hud-sep { color: var(--fg-muted); }
#hud-score-bot { color: var(--red); }

/* Match-start countdown: 120px gradient digit, popped per tick. */
#hud-countdown {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(13,13,13,.55); backdrop-filter: blur(2px);
}
#hud-countdown-digit {
  font-weight: 800; font-size: 120px; line-height: 1;
  background: linear-gradient(160deg, var(--yellow), var(--orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: alPop .5s ease;
}

/* Between-rounds transition: big "ROUND n", auto-continues. */
#hud-transition {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(13,13,13,.45);
}
#hud-transition-label { font-weight: 800; font-size: 36px; color: var(--fg); animation: alPop .4s ease; }

/* Match end: full overlay, 64px outcome, score line, actions. */
#hud-end {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px;
  background: rgba(13,13,13,.72); backdrop-filter: blur(2px); pointer-events: auto;
}
#hud-end-title { font-weight: 800; font-size: 64px; letter-spacing: .04em; }
#hud-end-title.win { color: var(--teal); }
#hud-end-title.lose { color: var(--red); }
#hud-end-title.draw { color: var(--yellow); }
#hud-end-score { font-size: 14px; color: var(--fg-2); }
.hud-actions { display: flex; gap: 10px; margin-top: 4px; }
#hud-rematch {
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  color: var(--ink-teal); background: var(--teal); border: 0; border-radius: 3px;
  padding: 9px 18px; cursor: pointer;
}
#hud-rematch:hover { background: var(--teal-hover); }
#hud-back {
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--fg-2); background: transparent; border: 1px solid var(--border); border-radius: 3px;
  padding: 9px 16px; cursor: pointer;
}
#hud-back:hover { border-color: var(--fg-muted); color: var(--fg); }

/* Test mode: yellow pill left, auto-stop countdown right. */
#hud-test {
  position: absolute; top: 14px; left: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--yellow-ink); background: var(--yellow); padding: 4px 9px; border-radius: 999px;
}
#hud-test-timer {
  position: absolute; top: 14px; right: 14px;
  font-size: 12px; font-weight: 700; color: var(--fg-2);
  background: rgba(13,13,13,.72); padding: 4px 11px; border-radius: 4px; border: 1px solid var(--border);
}
#sim-host { flex: 1; display: flex; }
#sim-host iframe { flex: 1; width: 100%; height: 100%; border: 0; background: #000; }
#sim-host .placeholder {
  flex: 1; display: flex; align-items: center; justify-content: center;
  color: #666; font-size: 13px;
}

/* ── Bottom panels: Problems | Console ───────────────────────────────── */
#panels { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--border); min-height: 0; }
#problems-pane { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
#console-pane { display: flex; flex-direction: column; min-height: 0; }
.panel-title {
  padding: 4px 10px; background: var(--panel); border-bottom: 1px solid var(--border);
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.1em; font-weight: 700; color: var(--fg-2);
}
#problems-count { color: #888; }
#problems-list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; }
#problems-list li {
  padding: 4px 10px; cursor: pointer; border-bottom: 1px solid #2a2a2a;
  display: flex; gap: 8px; align-items: baseline;
}
#problems-list li:hover { background: #2a2d2e; }
#problems-list .sev { font-weight: 700; }
#problems-list .sev.error { color: var(--err); }
#problems-list .sev.warning { color: var(--warn); }
#problems-list .loc { color: #888; }
#problems-list .empty { color: #666; cursor: default; }
#problems-list .empty:hover { background: none; }

#console {
  margin: 0; padding: 6px 10px; overflow: auto; flex: 1; white-space: pre-wrap;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-2);
}
#console .err { color: var(--err); }

/* ── Unsupported-browser card ────────────────────────────────────────── */
#unsupported {
  position: fixed; inset: 0; background: var(--bg);
  display: flex; align-items: center; justify-content: center; z-index: 10;
}
/* The `hidden` attribute must win over the display:flex above, or the overlay
   paints on top of a perfectly working IDE. */
#unsupported[hidden] { display: none; }
#unsupported .card { max-width: 460px; text-align: center; padding: 24px; }
#unsupported h1 { color: var(--err); }