/* ==========================================================================
   PITBORN — polish.css
   Whole-app polish layered on app.css: simulation activity (progress line under the
   top bar, "stepping…" text, dimmed strips while the worker steps), the "?" help button
   and the grouped shortcuts modal, the Watch button in the World head, shared empty-state
   spacing, and small-screen fixes found by tests/ui_smoke.py.
   Sections: 1 sim activity · 2 help & shortcuts · 3 world head · 4 empty states ·
   5 mobile fixes · 6 reduced motion
   ========================================================================== */

/* 1. Sim activity ---------------------------------------------------------- */
.sim-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity var(--t);
}
.sim-progress::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -45%; width: 45%;
  background: linear-gradient(90deg, transparent, var(--gold-bright) 40%, var(--ember-hot) 60%, transparent);
}
body.sim-busy .sim-progress, body.sim-playing .sim-progress { opacity: 1; }
body.sim-busy .sim-progress::before { animation: sim-sweep 1.1s linear infinite; }
body.sim-playing .sim-progress::before { animation: sim-sweep 1.7s linear infinite; }
@keyframes sim-sweep { to { left: 100%; } }

.sim-activity {
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap;
}
.sim-activity::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin: 0 6px 1px 0; background: var(--ember); box-shadow: 0 0 6px var(--ember); animation: pulse 1.2s ease-in-out infinite; }
body.sim-playing .sim-activity { color: var(--gold); }
body.sim-playing .sim-activity::before { background: var(--gold-bright); box-shadow: 0 0 8px var(--gold); }

/* while a step is in flight the numbers on screen are about to change: dim them a touch */
body.sim-busy:not(.sim-playing) .stat-strip, body.sim-busy:not(.sim-playing) .table-wrap { opacity: 0.82; transition: opacity var(--t); }
.view[aria-busy="true"] { cursor: progress; }

/* 2. Help & shortcuts -------------------------------------------------------- */
.btn-help { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--gold); line-height: 1; }
.btn-help:hover { color: var(--gold-bright); }
.shortcuts { display: grid; gap: 14px; }
.shortcuts h3 { margin: 0 0 4px; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dim); }
.shortcuts dl { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 4px 14px; margin: 0; align-items: baseline; }
.shortcuts dt { text-align: right; }
.shortcuts dd { margin: 0; color: var(--text); font-size: 0.9rem; }
.shortcuts kbd {
  display: inline-block; padding: 1px 7px; font: 600 0.74rem/1.5 var(--font-mono);
  color: var(--gold-bright); background: var(--bg-1); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px;
  white-space: nowrap;
}
.shortcuts-foot { margin: 0; font-size: 0.78rem; color: var(--text-faint); }

/* 3. World head -------------------------------------------------------------- */
.world-head .row { gap: 8px; }
#world-watch .ico { filter: drop-shadow(0 0 4px rgba(42, 27, 8, 0.4)); }

/* 4. Empty states ------------------------------------------------------------ */
.panel-hero.fighters-empty, .panel-hero.houses-empty, .panel-hero.ev-empty, .panel-hero.cards-empty, .panel-hero.hall-empty { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; }
.panel-hero.fighters-empty .row, .panel-hero.houses-empty .row, .panel-hero.ev-empty .row, .panel-hero.cards-empty .row { justify-content: center; }
.panel-hero .lede { max-width: 52ch; margin-left: auto; margin-right: auto; }

/* 5. Mobile fixes ------------------------------------------------------------ */
@media (max-width: 720px) {
  .world-head .row, .fighter-actions, .house-actions, .evp-actions, .fv-actions, .card-actions, .lab-head-actions { flex-wrap: wrap; }
  .view-head > .row { width: 100%; }
  .sim-activity { display: none; }
  .shortcuts dl { grid-template-columns: minmax(72px, auto) 1fr; }
  .shortcuts dt { text-align: left; }
}
@media (max-width: 420px) {
  .btn-help { width: 30px; height: 30px; padding: 0; }
}

/* 6. Reduced motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .sim-progress::before, .sim-activity::before { animation: none !important; }
  body.sim-busy .sim-progress::before, body.sim-playing .sim-progress::before { left: 0; width: 100%; }
}

/* 7. Long columns ------------------------------------------------------------ */
/* the fighter page's timeline and chronicle excerpts grow with a life; scroll them inside the panel
   instead of stretching the whole page to thousands of pixels */
.fighter-grid .timeline { max-height: 640px; overflow: auto; padding-right: 6px; scrollbar-width: thin; }
.fighter-grid .bio + .chronicle { max-height: 720px; overflow: auto; padding-right: 6px; scrollbar-width: thin; }