/* ArcoMage Playtest - style.css
 * Design tokens + shell layout, specced from rfq/expansions/ui.png.
 * All colors are Trent-confirmed tokens; the fantasy reskin later re-themes here only.
 * ASCII only; no TOFU (icons are inline SVG or <img> from assets/).
 */

:root {
  /* --- confirmed palette --- */
  --accent:        #0468e0;   /* End Turn, rollovers, active phase */
  --accent-hover:  #0355bd;
  --border:        #e9ecef;   /* standard 1px panel border everywhere */
  --text:          #2c2e2f;   /* primary dark text */
  --text-muted:    #6b7280;
  --text-dim:      #9aa0a6;
  --ok:            #2bb31c;    /* connected / good */
  --err:           #c52728;    /* errors / destructive */

  /* --- surfaces --- */
  --bg:            #ffffff;
  --bg-alt:        #f6f7f9;
  --bg-rail:       #fbfcfd;
  --bg-hover:      #f0f4fb;

  /* --- confirmed dimensions --- */
  --rail-left:     256px;
  --rail-right:    390px;
  --navbar-h:      39px;
  --toolbar-h:     60px;
  --status-h:      26px;
  --chat-h:        165px;
  --phase-w:       142px;

  --radius:        6px;
  --hex:           #8fbf6f;

  /* --- resource bar fills --- */
  --bar-tower:     #3f6fd6;
  --bar-wall:      #3f6fd6;
  --bar-mana:      #3f6fd6;
  --bar-moat:      #3f6fd6;
  --bar-life:      #d64b4b;
  --bar-int:       #9b59d6;
  --bar-bricks:    #c0392b;
  --bar-manapool:  #8e44ad;
  --bar-time:      #e0a800;
  --bar-hp:        #2bb31c;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 13px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }

/* ============================= APP GRID ============================= */
body.app {
  display: grid;
  grid-template-rows: var(--navbar-h) var(--toolbar-h) 1fr var(--status-h);
  height: 100vh;
  overflow: hidden;
}

/* --- 1) menu bar --- */
.menubar {
  display: flex; align-items: center; gap: 2px;
  height: var(--navbar-h);
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-alt);
}
.menubar .brand { font-weight: 600; margin-right: 14px; display: flex; align-items: center; gap: 6px; }
.menubar .brand svg { width: 16px; height: 16px; }
.menubar a { padding: 4px 9px; border-radius: 4px; color: var(--text); text-decoration: none; }
.menubar a:hover { background: var(--bg-hover); color: var(--accent); }

/* --- 2) toolbar --- */
.toolbar {
  display: flex; align-items: center; gap: 14px;
  height: var(--toolbar-h);
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.tb-left { display: flex; gap: 8px; }
.tb-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
}
.tb-btn.gpt { font-weight: 600; }
.tb-btn:hover { border-color: var(--accent); color: var(--accent); }

.tb-chips { display: flex; gap: 6px; }
.chip {
  min-width: 52px; text-align: center;
  padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-alt);
}
.chip .k { display: block; font-size: 10px; color: var(--text-muted); text-transform: none; }
.chip .v { display: block; font-weight: 700; font-size: 15px; }
/* Turn-clock hourglass flipbook (sprite atlas 1024x768 = 16x12 of 64px; shown at 28px).
   Frame stepped by renderEngine.renderTurnTimer via background-position. Shadow in CSS,
   NOT baked into frames. Atlas is immutable - served cache-hard, no ?v. */
.chip .hg-sprite {
  display: block; width: 28px; height: 28px; margin: 0 auto 1px;
  background: url(/assets/hourglass_atlas.png) no-repeat 0 0;
  background-size: 448px 336px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}

.tb-actions { display: flex; align-items: center; gap: 10px; }
.btn {
  padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font-weight: 600;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.turn-label { color: var(--text-muted); }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.env-label { color: var(--text-muted); }
.env-select {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
}
.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg);
}
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }

/* --- 3) body: three columns --- */
.body {
  display: grid;
  grid-template-columns: var(--rail-left) 1fr var(--rail-right);
  min-height: 0;
}

/* ---- left rail (dev) ---- */
.rail-left {
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-rail);
  overflow: hidden;                                          /* the grow section scrolls, not the rail */
}
.rail-section { border-bottom: 1px solid var(--border); padding: 10px 12px; flex: none; }
.rail-section.grow { flex: 1 1 auto; min-height: 0; overflow-y: auto; }   /* Assets/Logs scroll here */
.rail-h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--text-muted);
  text-transform: uppercase; margin-bottom: 8px;
}
.rail-h .add { color: var(--text-dim); font-size: 16px; line-height: 1; }
.rail-h .add:hover { color: var(--accent); }

.search { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); margin-bottom: 8px; }
.scenario-list, .asset-tree, .log-list { display: flex; flex-direction: column; gap: 2px; }
.scenario {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 5px; cursor: pointer;
}
.scenario:hover { background: var(--bg-hover); }
.scenario.active { background: var(--accent); color: #fff; }
.scenario .ico { width: 18px; height: 18px; flex: none; }
.scenario .nm { flex: 1; }
.scenario .play { color: var(--text-dim); }
.tree-item, .log-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 5px; color: var(--text-muted); }
.tree-item:hover, .log-item:hover { background: var(--bg-hover); color: var(--text); }

.status-panel { flex: none; }                   /* auto content-height, pinned at bottom of rail */
.status-panel .st-line { display: flex; align-items: center; gap: 7px; color: var(--text-muted); padding: 2px 0; }
.status-panel .st-title { font-weight: 700; color: var(--accent); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dot.ok { background: var(--ok); }
.dot.err { background: var(--err); }

/* ---- center ---- */
.center { display: grid; grid-template-rows: 1fr var(--chat-h); min-width: 0; min-height: 0; }
.stage { display: flex; min-height: 0; }
.phase-panel {
  width: var(--phase-w);
  margin: 10px 0 10px 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); flex: none; overflow: auto;
}
.phase-h { padding: 10px 12px; font-weight: 700; border-bottom: 1px solid var(--border); }
.phase-list { display: flex; flex-direction: column; padding: 6px; gap: 2px; }
.phase { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-radius: 5px; color: var(--text-muted); }
.phase:hover { background: var(--bg-hover); color: var(--text); }
.phase.active { color: var(--accent); font-weight: 600; }
.phase .rn { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-alt); font-size: 12px; }
.phase.active .rn { background: var(--accent); color: #fff; }

.board-scene {
  flex: 1; min-width: 0; margin: 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff;
  display: grid; place-items: center; color: var(--text-dim);
}

/* comms (chat) - center column only, 165 tall */
.comms { border-top: 1px solid var(--border); display: grid; grid-template-rows: auto 1fr auto; min-height: 0; background: var(--bg); }
.comms-tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid var(--border); }
.tab { padding: 6px 12px; border-radius: 5px 5px 0 0; color: var(--text-muted); }
.tab.active { color: var(--accent); border-bottom: 2px solid var(--accent); font-weight: 600; }
.chat-log { overflow-y: auto; padding: 8px 12px; background: var(--bg-alt); font-size: 12px; min-height: 96px; }
.chat-msg { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: #4a5568; }
.chat-msg .tag { color: var(--accent); }
.chat-msg .ts { color: var(--text-dim); flex: none; }
.chat-msg.cmd { color: #b45309; font-style: italic; }   /* dev-command audit line (100-series) */
.chat-input-row { display: flex; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--border); align-items: flex-end; }
.chat-input-row textarea { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); resize: none; font: inherit; line-height: 1.4; min-height: 3.6em; max-height: 200px; overflow-y: auto; box-sizing: border-box; }
.chat-input-row select { padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }

/* ---- right rail (HUD) ---- */
.rail-right { border-left: 1px solid var(--border); background: var(--bg-rail); overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }

.player-card { padding: 12px; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; }
.player-card .crest { width: 34px; height: 40px; grid-row: 1 / span 2; }
.player-card .pc-name { font-weight: 700; }
.logout-btn { padding: 5px 12px; border: 1px solid var(--accent); color: var(--accent); border-radius: var(--radius); background: var(--bg); font-weight: 600; text-decoration: none; }
.logout-btn:hover { background: var(--accent); color: #fff; }
.hpbar { grid-column: 1 / -1; height: 16px; border-radius: 8px; background: var(--bg-alt); position: relative; overflow: hidden; margin-top: 4px; }
.hpbar > i { position: absolute; inset: 0; width: var(--pct, 100%); background: var(--bar-hp); }
.hpbar > b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #14320d; }
/* Turn-clock bar: the REAL clock, depletes as the turn drains (renderTurnTimer sets --pct).
   Amber, turns red under 10s. Replaces the removed dead 'Time' vital bar. */
.clockbar { grid-column: 1 / -1; height: 14px; border-radius: 7px; background: var(--bg-alt); position: relative; overflow: hidden; margin-top: 4px; }
.clockbar > i { position: absolute; inset: 0; width: var(--pct, 100%); background: var(--bar-time, #e0a800); transition: width .25s linear; }
.clockbar > b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #3a2a00; font-variant-numeric: tabular-nums; }
.clockbar.low > i { background: #c0392b; }

.stat-list { padding: 6px 12px; display: flex; flex-direction: column; }
.stat-row { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; column-gap: 12px; row-gap: 4px; padding: 1px 0; border-bottom: 1px solid var(--border); }
.stat-row:last-child { border-bottom: 0; }
.stat-row .ico { width: 64px; height: 64px; grid-row: 1 / span 2; align-self: center; }
.stat-row .lab { color: var(--text); }
.stat-row .val { font-weight: 700; }
.stat-row .bar { grid-column: 2 / -1; height: 6px; border-radius: 3px; background: var(--bg-alt); overflow: hidden; }
.stat-row .bar > i { display: block; height: 100%; width: var(--pct, 50%); }
/* Clock stat-row: the hourglass flipbook IS the 64px icon (renderTurnTimer steps the frame).
   Atlas 1024x768 = 16x12 of 64px cells. Bar depletes with the turn: amber -> red under 10s. */
.stat-row .hg-sprite { background: url(/assets/hourglass_atlas.png) no-repeat 0 0; background-size: 1024px 768px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.clock-row .bar > i { background: var(--bar-time, #e0a800); transition: width .25s linear; }
.clock-row.low .bar > i { background: #c0392b; }
/* keep Mana's divider before the persistent Time row (last-child of the top group) */
.game-stats-a .stat-row:last-child { border-bottom: 1px solid var(--border); }

/* worker grid */
.worker-grid { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.worker { display: flex; align-items: center; gap: 8px; }
.worker .ico { width: 26px; height: 26px; flex: none; }
.worker .wl { display: flex; flex-direction: column; line-height: 1.15; }
.worker .wl small { color: var(--text-muted); font-size: 11px; }
.worker .wl b { font-size: 14px; }

/* bottom asset buttons */
.asset-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.asset-btn { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); padding: 14px 6px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted); }
.asset-btn:hover { border-color: var(--accent); color: var(--accent); }
.asset-btn .ai { width: 30px; height: 34px; display: grid; place-items: center; }

/* --- 4) status bar --- */
.statusbar { display: flex; align-items: center; padding: 0 12px; height: var(--status-h); border-top: 1px solid var(--border); background: var(--bg-alt); color: var(--text-muted); font-size: 12px; }

/* scrollbars (subtle) */
.rail-left::-webkit-scrollbar, .rail-right::-webkit-scrollbar, .chat-log::-webkit-scrollbar { width: 10px; }
.rail-left::-webkit-scrollbar-thumb, .rail-right::-webkit-scrollbar-thumb, .chat-log::-webkit-scrollbar-thumb { background: #dfe3e8; border-radius: 6px; }

/* ============================= LOGIN ============================= */
.login-body { display: grid; place-items: center; height: 100vh; background: var(--bg-alt); }
.login-card { width: 340px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 34px 30px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.login-crest { margin-bottom: 8px; }
.login-card h1 { font-size: 20px; margin: 4px 0 4px; }
.login-sub { color: var(--text-muted); margin: 0 0 22px; }
.gsi-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: var(--text); font-weight: 600; text-decoration: none; }
.gsi-btn:hover { border-color: var(--accent); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.gsi-g { display: grid; place-items: center; }
.login-foot { margin: 18px 0 0; color: var(--text-dim); font-size: 12px; }