.rng-shell { width: min(1540px, 96vw) }
.rng-nav-link {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 13px;
  border: 1px solid #32636a;
  background: #0b2025;
  color: var(--ink-strong);
  font-size: 12px;
  letter-spacing: .06em;
  text-decoration: none;
}
.rng-nav-link:hover, .rng-nav-link:focus-visible { border-color: var(--cyan); color: var(--cyan) }

.rng-guide {
  margin-bottom: 12px;
  border: 1px solid #2d5961;
  background: linear-gradient(135deg, #0a2026, #071419);
}
.rng-guide>summary {
  padding: 13px 15px;
  color: var(--cyan);
  cursor: pointer;
  font-weight: 700;
  letter-spacing: .03em;
}
.rng-guide>summary:hover, .rng-guide>summary:focus-visible { background: #0d292e }
.rng-guide-body {
  padding: 2px 18px 17px;
  border-top: 1px solid #24434b;
  color: var(--muted);
}
.rng-guide-body>p { margin: 13px 0 0 }
.rng-guide-body ol { display: grid; gap: 8px; margin: 14px 0 0; padding-left: 25px }
.rng-guide-body li { padding-left: 3px }
.rng-guide-body li::marker { color: var(--cyan); font-family: var(--mono); font-weight: 600 }
.rng-guide-tip {
  margin-top: 15px;
  padding: 13px 15px;
  border: 1px solid #42664f;
  border-left: 4px solid #75b582;
  background: #102018;
}
.rng-guide-tip strong { color: #a8d9ad }
.rng-guide-tip p { margin: 7px 0 0 }
.rng-guide-warning {
  padding: 11px 13px;
  border: 1px solid #6b5639;
  background: #241d12;
  color: #e3bf86;
}

input[type=datetime-local] {
  width: 100%;
  margin-top: 6px;
  padding: 10px 11px;
  border: 1px solid #25434e;
  border-radius: 2px;
  outline: none;
  background: #071218;
  color: var(--text);
  color-scheme: dark;
  font-family: var(--mono);
  font-size: 15px;
}
input[type=datetime-local]:focus { border-color: var(--cyan); box-shadow: 0 0 0 1px #39e5d244 }

.rng-status-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 15px;
  border: 1px solid var(--line);
  background: #071419cc;
}
.rng-status-strip>div { min-width: 0; padding: 10px 14px }
.rng-status-strip>div+div { border-left: 1px solid var(--line) }
.rng-status-strip span { display: block; color: var(--faint); font: 11px/1.3 var(--mono); letter-spacing: .11em }
.rng-status-strip strong {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: var(--ink-strong);
  font: 600 18px/1.2 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rng-status-strip .status-ready { color: var(--cyan) }
.rng-status-strip .status-error { color: var(--red) }
.rng-status-strip .status-dirty { color: var(--amber) }

.prediction-mode-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 15px;
  padding: 14px 16px;
  border: 1px solid #337b72;
  border-left: 5px solid var(--cyan);
  background: linear-gradient(135deg, #0d302e, #08191d);
}
.prediction-mode-banner[hidden] { display: none }
.prediction-mode-banner strong, .prediction-mode-banner span { display: block }
.prediction-mode-banner strong { color: var(--cyan); font-size: 17px }
.prediction-mode-banner span { margin-top: 4px; color: var(--muted); font-size: 12px }
body.is-prediction-mode .rng-layout { grid-template-columns: minmax(0, 1.25fr) minmax(430px, .75fr) }

.rng-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(390px, .75fr);
  align-items: start;
  gap: 16px;
}
.rng-main, .rng-side { display: grid; min-width: 0; gap: 14px }
.rng-side { position: sticky; top: 12px }
.rng-panel { min-width: 0 }
.rng-seed-grid {
  display: grid;
  grid-template-columns: minmax(250px, 1.3fr) repeat(2, minmax(150px, .55fr));
  align-items: end;
  gap: 12px;
}
.input-with-unit { position: relative; display: block }
.input-with-unit input { padding-right: 44px }
.input-with-unit i {
  position: absolute;
  right: 11px;
  bottom: 9px;
  color: var(--faint);
  font: normal 12px/1 var(--mono);
}

.rng-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px }
.primary-button, .secondary-button, .danger-button, .analyze-button, .icon-button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #32636a;
  border-radius: 2px;
  background: #0b2025;
  color: var(--ink-strong);
  cursor: pointer;
  font-size: 13px;
  letter-spacing: .05em;
}
.primary-button { border-color: #2d756f; background: #0e2d2d; color: var(--cyan) }
.danger-button { border-color: #65423f; background: #281717; color: #ff9c93 }
.primary-button:hover:not(:disabled), .secondary-button:hover:not(:disabled),
.danger-button:hover:not(:disabled), .analyze-button:hover:not(:disabled),
.icon-button:hover:not(:disabled) { border-color: var(--cyan); color: var(--cyan) }
button:disabled { opacity: .42; cursor: not-allowed }
.wide-button { width: 100%; margin-top: 13px }

.roster-adder {
  display: grid;
  grid-template-columns: 120px minmax(280px, 1.5fr) minmax(150px, .6fr) auto;
  align-items: end;
  gap: 10px;
}
.roster-adder button { margin-bottom: 1px }
.roster-unit-choice>span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 12px }
.unit-picker-trigger {
  width: 100%;
  min-height: 39px;
  overflow: hidden;
  padding: 8px 11px;
  border: 1px solid #315660;
  border-radius: 2px;
  background: #08171c;
  color: var(--ink-strong);
  cursor: pointer;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unit-picker-trigger:hover, .unit-picker-trigger:focus-visible { border-color: var(--cyan); color: var(--cyan) }
.roster-list { display: grid; gap: 8px; margin-top: 15px }
.roster-card {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 100px 130px 100px auto;
  align-items: end;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid #294852;
  border-left: 3px solid #3f777e;
  background: #09171c;
}
.roster-card.is-ally { border-left-color: #48a8d8; background: linear-gradient(90deg, #0a1e28, #09171c 34%) }
.roster-card.is-enemy { border-left-color: #d65f5a; background: linear-gradient(90deg, #291719, #09171c 34%) }
.roster-card.is-prediction { grid-template-columns: minmax(190px, 1fr) 130px auto }
.roster-card.is-prediction.has-formation { grid-template-columns: minmax(190px, 1fr) 130px 100px auto }
.roster-card>div { min-width: 0; align-self: center }
.roster-card strong, .roster-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.roster-card strong { color: var(--ink-strong); font-size: 15px }
.roster-card small { color: var(--faint); font: 11px/1.5 var(--mono) }
.roster-card label { margin: 0 }
.roster-card>.icon-button { grid-column: -2 / -1 }
.fixed-roster-value {
  display: flex;
  min-height: 39px;
  align-items: center;
  margin-top: 6px;
  padding: 0 9px;
  border: 1px solid #49383a;
  background: #171315;
  color: #d89994;
  font: 11px/1.3 var(--mono);
}
.roster-rank-note { margin-top: 4px; color: #d89994; font: 10px/1.3 var(--mono) }
.icon-button { width: 38px; min-height: 38px; padding: 0; color: var(--faint); font: 18px/1 var(--mono) }
.empty-state {
  margin: 14px 0 0;
  padding: 16px;
  border: 1px dashed #29434c;
  color: var(--faint);
  text-align: center;
}

.combat-log-list { display: grid; gap: 11px }
.combat-log {
  position: relative;
  padding: 14px;
  border: 1px solid #2b4d56;
  background: linear-gradient(135deg, #0a1b21, #081419);
}
.combat-log.is-ally-attack {
  border-left: 4px solid #48a8d8;
  background: linear-gradient(135deg, #0b2430, #081419 55%);
}
.combat-log.is-enemy-attack {
  border-left: 4px solid #d65f5a;
  background: linear-gradient(135deg, #2a181b, #081419 55%);
}
.combat-log.is-enemy-attack .combat-log-head>b { color: #ff8f88 }
.combat-log.is-invalid { border-color: #7e4d48; box-shadow: inset 3px 0 0 var(--red) }
.combat-log-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px }
.combat-log-head>b { color: var(--cyan); font: 600 12px/1 var(--mono); letter-spacing: .12em }
.combat-log-head>span { min-width: 0; overflow: hidden; color: var(--ink-soft); text-overflow: ellipsis; white-space: nowrap }
.combat-log-head .icon-button { width: 31px; min-height: 31px; margin-left: auto }
.combat-log-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  gap: 9px;
}
.combat-log-grid label { min-width: 0; margin-top: 6px }
.combat-log-grid .span-two { grid-column: span 2 }
.combat-log-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  grid-column: 1 / -1;
  padding: 8px 10px;
  border: 1px solid #233f47;
  background: #071419;
}
.combat-log-options label { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap }
.combat-log-options input { accent-color: var(--cyan) }
.combat-log-summary { margin: 10px 0 0; color: var(--faint); font: 11px/1.5 var(--mono) }
.battle-end-marker {
  padding: 13px;
  border: 1px solid #70563a;
  background: #251c11;
  color: #e5bc7c;
  text-align: center;
}
.battle-end-marker button { margin-left: 12px }

.analyze-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px }
.analyze-panel h2 { margin: 0; font-size: 19px }
.analyze-button {
  flex: 0 0 auto;
  min-width: 190px;
  min-height: 54px;
  border-color: #3a8e83;
  background: linear-gradient(135deg, #103b39, #0a2226);
  color: var(--cyan);
  font-weight: 700;
}

.result-panel { min-height: 280px }
.unique-state {
  margin-bottom: 13px;
  padding: 14px;
  border: 1px solid #2c746c;
  border-left: 4px solid var(--cyan);
  background: #0c2928;
}
.unique-state span, .unique-state small { display: block; color: var(--muted) }
.unique-state strong { display: block; margin: 5px 0; color: var(--cyan); font: 600 19px/1.3 var(--mono) }
.candidate-summary {
  padding: 12px;
  border: 1px solid #243e47;
  background: #08161b;
}
.candidate-summary p { margin: 0; color: var(--muted) }
.candidate-summary strong { color: var(--ink-strong); font-family: var(--mono) }
.candidate-summary.is-error { border-color: #71433f; background: #211314 }
.candidate-summary.is-error p, .candidate-summary.is-error strong { color: #ff9c93 }
.filter-steps { margin: 13px 0 0; padding: 0; list-style: none; counter-reset: filter-step }
.filter-steps li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #172b33;
  color: var(--muted);
  font-size: 12px;
}
.filter-steps li::before {
  counter-increment: filter-step;
  content: counter(filter-step);
  color: var(--faint);
  font: 11px/1 var(--mono);
}
.filter-steps b { color: var(--ink-strong); font: 600 12px/1 var(--mono) }
.filter-steps .is-zero { color: var(--red) }
.candidate-details { margin-top: 12px; border-top: 1px solid var(--line) }
.candidate-details summary { padding: 10px 0; color: var(--muted); cursor: pointer; font-size: 12px }
.candidate-times { max-height: 180px; overflow: auto; color: var(--faint); font: 11px/1.6 var(--mono) }
.candidate-times code { display: block }
.prediction-stack-controls {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.prediction-stack-controls label { margin: 0 }
.prediction-stack-controls button { width: 100%; margin-top: 9px }
.prediction-stack-controls .hint { margin-bottom: 0 }
.filter-steps li.stack-entry {
  grid-template-columns: 26px 1fr auto;
}
.filter-steps li.stack-entry small {
  display: block;
  grid-column: 2 / -1;
  color: var(--faint);
  font: 10px/1.4 var(--mono);
}
.filter-steps li.stack-entry b { color: var(--cyan) }

.prediction-log-panel { min-height: 560px }
.prediction-log-summary {
  margin-bottom: 12px;
  padding: 11px 12px;
  border: 1px solid #2d766e;
  background: #0b2827;
  color: var(--cyan);
  font: 600 12px/1.5 var(--mono);
}
.prediction-log-summary p { margin: 0 }
.prediction-log-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  counter-reset: prediction-event;
  list-style: none;
}
.prediction-log-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 38px;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid #294852;
  border-left: 3px solid var(--amber);
  background: #09171c;
}
.prediction-log-entry::before {
  display: none;
}
.prediction-log-entry.is-fixed {
  grid-template-columns: minmax(0, 1fr) auto;
  border-left-color: var(--cyan);
  background: linear-gradient(90deg, #0b2827, #09171c 42%);
}
.prediction-log-entry span {
  overflow: hidden;
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prediction-log-entry b { color: var(--cyan); font: 600 13px/1 var(--mono) }
.prediction-log-entry small {
  grid-column: 1 / -1;
  color: var(--faint);
  font: 10px/1.4 var(--mono);
}
.prediction-log-entry .icon-button { min-height: 34px }
.prediction-log-composer {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.prediction-log-composer>label {
  width: min(220px, 100%);
  margin: 0;
}
.prediction-log-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.prediction-log-actions button { flex: 1 1 150px }
.prediction-log-composer .hint { margin-bottom: 0 }

.prediction-panel { max-height: calc(100vh - 32px); overflow: auto }
.prediction-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.prediction-form-grid label { min-width: 0; margin-top: 6px }
.prediction-form-grid .span-two { grid-column: 1 / -1 }
.prediction-result { margin-top: 13px; padding: 13px; border: 1px solid #284750; background: #08161b }
.prediction-result>p { margin: 0; color: var(--muted) }
.prediction-result.is-consensus { border-color: #2d766e; border-left: 4px solid var(--cyan); background: #0b2827 }
.prediction-result.is-split { border-color: #70563a; border-left: 4px solid var(--amber); background: #241c11 }
.prediction-headline { display: block; color: var(--cyan); font: 600 22px/1.25 var(--mono) }
.prediction-detail { display: block; margin-top: 6px; color: var(--ink-soft) }
.prediction-groups { display: grid; gap: 7px; margin-top: 11px }
.prediction-group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  padding: 8px 9px;
  border: 1px solid #2b444c;
  background: #09181d;
}
.prediction-group b { color: var(--ink-strong) }
.prediction-group span { color: var(--cyan); font-family: var(--mono) }
.prediction-group small { grid-column: 1 / -1; color: var(--faint) }

.rng-notes { margin-top: 15px }
.rng-notes ul { margin: 0; padding-left: 22px; color: var(--muted) }
.rng-notes li+li { margin-top: 5px }

.rng-unit-picker {
  width: min(900px, 92vw);
  max-width: none;
  max-height: min(820px, 88vh);
  padding: 0;
  border: 1px solid #32636a;
  background: #071419;
  color: var(--text);
}
.rng-unit-picker::backdrop { background: #02080bd9; backdrop-filter: blur(3px) }
.rng-unit-picker-shell { display: grid; max-height: min(820px, 88vh); padding: 18px; gap: 12px }
.rng-unit-picker-head { display: flex; align-items: start; justify-content: space-between; gap: 20px }
.rng-unit-picker-head h2 { margin: 3px 0 0; color: var(--ink-strong) }
.rng-picker-search { margin: 0 }
.rng-picker-meta { display: flex; justify-content: space-between; color: var(--muted); font: 12px/1.3 var(--mono) }
.rng-picker-meta b { color: var(--cyan) }
.rng-picker-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  min-height: 120px;
  overflow: auto;
  padding-right: 4px;
}
.rng-picker-unit {
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 94px;
  padding: 11px;
  border: 1px solid #294852;
  background: #09191f;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.rng-picker-unit:hover, .rng-picker-unit:focus-visible, .rng-picker-unit.is-selected {
  border-color: var(--cyan);
  background: #0c292a;
}
.rng-picker-unit strong, .rng-picker-unit span, .rng-picker-unit small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rng-picker-unit strong { color: var(--ink-strong) }
.rng-picker-unit span { margin-top: 6px; color: var(--muted); font-size: 12px }
.rng-picker-unit small { margin-top: 5px; color: var(--faint); font: 10px/1.2 var(--mono) }

@media (max-width: 1120px) {
  .rng-layout { grid-template-columns: 1fr }
  .rng-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .prediction-panel { max-height: none }
  .rng-seed-grid { grid-template-columns: minmax(260px, 1.2fr) repeat(2, minmax(140px, .6fr)) }
}

@media (max-width: 820px) {
  .rng-shell { width: min(94vw, 720px) }
  .hero { align-items: flex-start; gap: 18px }
  .hero-actions { align-items: stretch; flex-direction: column }
  .rng-status-strip { grid-template-columns: 1fr }
  .rng-status-strip>div+div { border-top: 1px solid var(--line); border-left: 0 }
  .rng-seed-grid, .roster-adder, .roster-card, .rng-side { grid-template-columns: 1fr }
  body.is-prediction-mode .roster-adder,
  .roster-card.is-prediction,
  .roster-card.is-prediction.has-formation { grid-template-columns: 1fr }
  .rng-picker-list { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .combat-log-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .roster-card .icon-button { width: 100% }
  .analyze-panel { align-items: stretch; flex-direction: column }
  .analyze-button { width: 100% }
  .prediction-mode-banner { align-items: stretch; flex-direction: column }
}

@media (max-width: 520px) {
  .combat-log-grid, .prediction-form-grid { grid-template-columns: 1fr }
  .combat-log-grid .span-two, .prediction-form-grid .span-two { grid-column: auto }
  .combat-log-options { display: grid; grid-template-columns: 1fr }
  .rng-picker-list { grid-template-columns: 1fr }
}