:root {
  color-scheme: dark;
  --bg: #0a1019;
  --surface: #111d2c;
  --line: #2c3e53;
  --text: #edf3f8;
  --muted: #acb9cc;
  --accent: #6bdcc5;
  --red: #ffaaa1;
  --amber: #ffd18c;
  --radius: 12px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
* {
  box-sizing:border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}
button,input,select,textarea {
  font:inherit;
}
button,a,input,select,textarea {
  outline-offset:4px;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--accent);
}
button {
  cursor: pointer;
  border: 1px solid var(--line);
  background: #1b2b3e;
  color: var(--text);
  border-radius: 8px;
  padding: 11px 16px;
  min-height: 44px;
  font-weight: 650;
  line-height: 1.4;
}
button:hover {
  background:#25374b;
}
button.primary {
  background:var(--accent);
  border-color:var(--accent);
  color:#071613;
}
button.danger {
  color:var(--red);
}
button:disabled {
  opacity:.45;
  cursor:not-allowed;
}
a {
  color:var(--accent);
}
input,select,textarea {
  border: 1px solid #40516a;
  background: #0b1420;
  color: var(--text);
  padding: 11px 12px;
  border-radius: 8px;
  width: 100%;
  min-height: 44px;
}
textarea {
  min-height:85px;
  resize:vertical;
}
input[type=checkbox] {
  width:auto;
  accent-color:var(--accent);
}
label {
  display:block;
  font-size:13px;
  color:var(--muted);
  margin-bottom:8px;
}
label>input,label>select,label>textarea {
  margin-top:8px;
}
.check {
  display:flex;
  gap:10px;
  align-items:center;
}
.check input {
  margin:0;
}
h1,h2,h3,p {
  margin-top:0;
}
h1 {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: -1px;
  margin-bottom: 14px;
}
h2 {
  font-size: 22px;
  line-height: 1.35;
  margin-bottom: 18px;
}
h3 {
  font-size:16px;
  line-height:1.5;
}
p {
  line-height:1.7;
}
small,.muted {
  color:var(--muted);
  line-height:1.65;
}
.eyebrow {
  font-size:11px;
  letter-spacing:2px;
  font-weight:700;
  color:var(--accent);
  text-transform:uppercase;
  margin-bottom:12px;
}
.shell {
  grid-template-rows:1fr auto;
  max-width:1520px;
  margin:auto;
  min-height:100vh;
  display:grid;
  grid-template-columns:238px minmax(0,1fr);
}
.sidebar {
  padding:35px 25px;
  border-right:1px solid var(--line);
  background:#0d1521;
  display:flex;
  flex-direction:column;
  gap:30px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  overscroll-behavior:contain;
}
.brand {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
  line-height: 1.15;
}
.brand span {
  color: var(--text);
}
.brand-sub {
  font-size:10px;
  letter-spacing:2px;
  color:var(--muted);
  margin-top:8px;
}
.sidebar .nav {
  display:flex;
  flex-direction:column;
  gap:10px;
}
.nav button {
  text-align:left;
  background:transparent;
  border-color:transparent;
}
.nav button.active {
  background:#1b2c3c;
  color:var(--accent);
}
.side-note {
  margin-top:auto;
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
}
.side-note strong {
  display:block;
  color:var(--text);
  margin-bottom:8px;
}
.main {
  padding:30px 42px 50px;
  min-width:0;
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
  margin-bottom:34px;
}
.status {
  font-size:11px;
  color:var(--muted);
  letter-spacing:1.5px;
  text-transform:uppercase;
}
.status:before {
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--accent);
  border-radius:50%;
  margin-right:10px;
}
.topbar button {
  font-size:12px;
  padding:8px 12px;
}
.hero {
  display:flex;
  justify-content:space-between;
  gap:25px;
  margin-bottom:30px;
}
.hero p {
  max-width:680px;
  color:var(--muted);
  font-size:15px;
}
.tag {
  font-size:12px;
  color:var(--muted);
  padding:8px 0;
}
.grid2 {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.setup-grid {
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);
  gap:30px;
  align-items:start;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 22px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
}
.panel .line {
  height:1px;
  background:var(--line);
  margin:22px 0;
}
.scenario {
  display:block;
  text-align:left;
  padding:22px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:8px;
  margin:0;
  width:100%;
  min-height:146px;
}
.scenario.selected {
  background:#15312f;
  border-color:var(--accent);
}
.scenario .code {
  color:var(--accent);
  font:12px monospace;
  display:block;
  margin-bottom:10px;
}
.scenario strong {
  display:block;
  margin-bottom:10px;
  font-size:16px;
}
.scenario small {
  font-size:12px;
  display:block;
}
.options {
  display:flex;
  gap:8px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.options button.selected {
  border-color:var(--accent);
  color:var(--accent);
}
.scenario-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:12px;
}
.form-stack {
  display:flex;
  flex-direction:column;
  gap:13px;
}
.form-stack button {
  margin-top:6px;
}
.callout {
  border-left:2px solid var(--amber);
  padding-left:14px;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}
.login {
  max-width: 530px;
  padding: 34px;
  margin: 38px auto;
  border-top: 3px solid var(--accent);
}
.login h1 {
  font-size:30px;
}
.login form {
  margin:30px 0 18px;
}
.run-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:15px;
}
.run-list button {
  text-align:left;
  padding:20px;
}
.run-list small {
  display:block;
  margin-top:10px;
}
.session-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:24px;
  align-items:start;
}
.scene {
  font-size:17px;
  line-height:1.8;
  white-space:pre-line;
  margin-bottom:20px;
}
.prompt {
  color:var(--accent);
  font-size:14px;
  line-height:1.7;
}
.roundline {
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:25px;
}
.roundnum {
  font-size:12px;
  color:var(--accent);
  letter-spacing:1px;
}
.clock {
  font-variant-numeric:tabular-nums;
  font:24px monospace;
}
.lock-row {
  display:flex;
  gap:10px;
  margin:20px 0;
  flex-wrap:wrap;
}
.lock {
  padding:7px 11px;
  font-size:12px;
  background:#1c2a3b;
  border-radius:4px;
  color:var(--muted);
}
.lock.done {
  color:var(--accent);
}
.intel {
  border-left:2px solid var(--accent);
  padding-left:16px;
  line-height:1.7;
  margin:18px 0;
  font-size:14px;
}
.cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  gap:12px;
  margin-top:20px;
}
.card {
  display: block;
  text-align: left;
  position: relative;
  padding: 20px;
  border-radius: 9px;
  background: #111d2d;
  border-color: var(--line);
  font-weight: 400;
  min-height: 180px;
}
.card h3 {
  padding-right:26px;
  margin-bottom:9px;
}
.card small {
  display:block;
  font-size:11px;
  margin-bottom:8px;
}
.card p {
  font-size:13px;
  line-height:1.65;
  margin-bottom:12px;
}
.card .trade {
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}
.card.selected {
  border-color:var(--accent);
  background:#14302e;
}
.card .cost {
  position:absolute;
  right:16px;
  top:19px;
  color:var(--accent);
  font:14px monospace;
}
.capacity {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:20px;
  font-size:13px;
}
.controls {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}
.controls button {
  font-size:12px;
  padding:10px 12px;
}
.score {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.score strong {
  font:28px monospace;
}
.state-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.state {
  background:#0c1420;
  padding:10px;
  text-align:center;
  font:12px monospace;
  color:var(--muted);
  border-radius:4px;
}
.state strong {
  display:block;
  font-size:20px;
  color:var(--text);
  margin-top:7px;
}
.state-entry {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
.state-entry input {
  padding:7px;
}
.state-entry label {
  margin:0;
}
.invite {
  border-top:1px solid var(--line);
  padding:15px 0;
}
.invite input {
  font:11px monospace;
  margin-top:8px;
}
.update {
  padding:15px 0;
  border-top:1px solid var(--line);
  font-size:14px;
  line-height:1.6;
}
.update small {
  display:block;
  margin-bottom:5px;
}
details {
  margin:18px 0;
}
summary {
  cursor:pointer;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}
pre {
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
  color:var(--muted);
  font-size:11px;
  max-height:320px;
}
.empty {
  padding:30px 0;
  color:var(--muted);
  line-height:1.8;
}
.footer {
  color:var(--muted);
  font-size:11px;
  margin-top:35px;
}
.logo {
  max-width:150px;
  max-height:60px;
  object-fit:contain;
  margin-bottom:10px;
}
#notice {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 480px;
  background: #203449;
  border: 1px solid #6a8a9c;
  color: var(--text);
  padding: 18px 20px;
  border-radius: 10px;
  z-index: 20;
  display: none;
  box-shadow: 0 12px 30px rgb(0 0 0 / 25%);
}
.skip {
  position:absolute;
  left:15px;
  top:-100px;
  background:#111;
  padding:10px;
  z-index:30;
}
.skip:focus {
  top:10px;
}
.error {
  color:var(--red);
}
.inline {
  display:flex;
  gap:12px;
  align-items:center;
}
.button-wide {
  width:100%;
}
.danger-note {
  color:var(--amber);
  font-size:12px;
}
.subtitle-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.badge {
  font-size:10px;
  letter-spacing:1px;
  color:var(--muted);
}
/* Role workspaces and a keyboard-accessible, persistent navigation control. */
[hidden] {
  display:none!important;
}
.shell.menu-hidden {
  grid-template-columns:minmax(0,1fr);
}
.topbar-start {
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.menu-toggle {
  white-space:nowrap;
}
.dashboard-attack {
  --role-accent:#ffb29b;
}
.dashboard-defense {
  --role-accent:#7dcafa;
}
.dashboard-display {
  --role-accent:#b8adff;
}
.dashboard .hero .eyebrow {
  color:var(--role-accent,var(--accent));
}
.dashboard .scene {
  max-width:78ch;
}
.timer {
  text-align:right;
  flex-shrink:0;
  padding:12px 16px;
  background:#0b1420;
  border:1px solid var(--line);
  border-radius:8px;
  min-width:155px;
}
.timer small {
  display:block;
  font-size:10px;
  letter-spacing:.6px;
}
.timer .clock {
  font-size:36px;
  line-height:1.5;
  color:var(--accent);
}
.timer .clock.urgent {
  color:var(--amber);
}
.workspace {
  border-top:3px solid var(--role-accent,var(--accent));
}
.workflow {
  padding-left:20px;
  margin:20px 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.8;
}
.workflow li+li {
  margin-top:8px;
}
.workspace-state {
  font-size:13px;
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-bottom:0;
  color:var(--role-accent,var(--accent));
}
.decision-summary {
  padding:16px;
  margin:22px 0;
  background:#0c1723;
  border:1px solid var(--line);
  border-radius:7px;
}
.decision-summary strong {
  font-size:13px;
}
.decision-summary p {
  font-size:13px;
  margin:8px 0 0;
}
.decision-panel .intel:before {
  content:attr(data-intel-label);
  display:block;
  font-size:10px;
  letter-spacing:1.4px;
  color:var(--accent);
  margin-bottom:8px;
}
.invite {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.invite>strong {
  flex:1 0 100%;
  font-size:14px;
  margin-bottom:4px;
}
.invite input {
  order:1;
  flex-basis:100%;
  font-size:12px;
}
.invite button {
  font-size:11px;
  padding:9px 10px;
}
.dashboard-display .session-layout {
  grid-template-columns:minmax(0,1fr) 290px;
}
.dashboard-display .scene {
  font-size:21px;
}
.dashboard-display .roundline h2 {
  font-size:28px;
}
.dashboard-display .prompt {
  font-size:18px;
}
.dashboard-display .public-updates .update {
  font-size:18px;
}
.dashboard-display .public-updates .update:first-of-type {
  border-left:3px solid var(--role-accent);
  padding-left:18px;
}
.dashboard-display .timer .clock {
  font-size:44px;
}
.dashboard-display .lock {
  font-size:14px;
  padding:10px 14px;
}
.dashboard-display .hero {
  margin-bottom:20px;
}
.panel h2 {
  overflow-wrap:anywhere;
}
.dashboard .session-layout>section,.session-aside {
  min-width:0;
}
.invite-pin-value {
  font:700 23px monospace;
  letter-spacing:4px;
  padding:12px 16px;
  border:1px solid var(--accent);
  border-radius:6px;
  color:var(--accent);
  user-select:all;
}
.login input#invite-pin {
  font-size:24px;
  letter-spacing:7px;
  font-variant-numeric:tabular-nums;
}

/* Shared interface feedback and session cards. */
.brand .brand-game { color: var(--accent); font-size: 15px; letter-spacing: 0; }
.brand-sub { line-height: 1.6; }
.nav-label { font-size: 10px; letter-spacing: 1.5px; color: var(--muted); margin-bottom: 2px; }
.nav button { width: 100%; }
.nav button[aria-current="page"] { border-left: 2px solid var(--accent); }
.side-note p { margin-bottom: 0; }
.hero h1 { max-width: 24ch; overflow-wrap: anywhere; }
.hero p { margin-bottom: 0; }
.home-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 14px; margin-bottom: 28px; }
.summary-stat { background: #0e1927; border: 1px solid var(--line); border-radius: 10px; padding: 18px 22px; }
.summary-stat span { display: block; color: var(--muted); font-size: 12px; }
.summary-stat strong { display: block; font-size: 30px; line-height: 1.3; margin-top: 6px; font-variant-numeric: tabular-nums; }
.run-list .run-card { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; min-height: 185px; background: #142236; }
.run-list .run-card:hover { border-color: var(--accent); background: #192c40; }
.run-code { color: var(--accent); font: 12px monospace; letter-spacing: 1px; }
.run-company { font-size: 18px; overflow-wrap: anywhere; }
.run-open { margin-top: auto; color: var(--muted); font-size: 12px; }
.phase-chip { display: inline-block; padding: 5px 9px; border: 1px solid #40516a; border-radius: 6px; font-size: 11px; color: var(--muted); }
.phase-decision_open { color: var(--accent); border-color: #3d746d; background: #14302e; }
.phase-paused { color: var(--amber); border-color: #79623f; }
.form-field { font-weight: 550; }
.form-stack { gap: 16px; }
.form-error { color: #ffd1cc; background: #301e27; border: 1px solid #8b4a54; border-radius: 8px; padding: 12px 14px; font-size: 13px; line-height: 1.6; }
.login-help { color: var(--muted); font-size: 12px; line-height: 1.7; margin: 0; }
button[aria-busy="true"]::after { content: " …"; }
button[aria-busy="true"] { cursor: progress; }
button.danger { border-color: #64414c; background: #281e2a; }
button.danger:hover { background: #3b2430; }
button.card.selected { box-shadow: inset 3px 0 var(--accent); }
input[type="checkbox"] { min-height: 20px; width: 20px; height: 20px; flex-shrink: 0; }
.notice-message { display: block; padding-right: 62px; font-size: 14px; line-height: 1.6; }
#notice.error { border-color: var(--red); background: #35232c; }
.notice-dismiss { position: absolute; top: 12px; right: 10px; min-height: 44px; padding: 8px; background: transparent; font-size: 11px; }
.empty h3 { color: var(--text); margin-bottom: 8px; }
.empty p { margin-bottom: 0; }

/* Responsive layouts follow content width; no essential controls are hidden. */
input,select,textarea,button { min-width: 0; max-width: 100%; }
.panel,.grid2>*,.setup-grid>*,.roundline>*,.hero>*,.topbar-start { min-width: 0; }
.panel,.run-card,.footer,.tag,.lock,.state,.score,.form-error,#notice { overflow-wrap: anywhere; }
.hero p,.scene,.intel,.decision-summary p,.public-updates .update { max-width: 78ch; }
.roundline,.subtitle-row,.score,.inline { flex-wrap: wrap; }
.sidebar .nav { flex-shrink: 0; }
.sidebar .nav button { white-space: normal; }
.controls button { flex: 1 1 125px; }
.check { min-height: 44px; }
summary { padding-block: 10px; min-height: 44px; }
.invite input { flex: 1 1 100%; min-width: 0; }
.invite-pin-value { max-width: 100%; }
#notice { max-width: min(480px,calc(100vw - 48px)); max-height: calc(100dvh - 48px); overflow-y: auto; }
.notice-message { min-height: 28px; }

/* Shared copyright is in normal flow, after all page content. */
.shell>.sidebar { grid-row: 1 / span 2; }
.shell>.main { grid-column: 2; grid-row: 1; }
.copyright-footer { grid-column: 2; grid-row: 2; padding: 20px 42px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.shell.menu-hidden>.main,.shell.menu-hidden>.copyright-footer { grid-column: 1; }

@media (min-width:1800px) {
  .copyright-footer { padding-inline: 48px; }
  .shell,.shell.menu-hidden { max-width: 1840px; }
  .shell { grid-template-columns: 260px minmax(0,1fr); }
  .shell.menu-hidden { grid-template-columns: minmax(0,1fr); }
  .main { padding: 40px 48px 60px; }
  .session-layout { grid-template-columns: minmax(0,1fr) 360px; gap: 30px; }
  .dashboard-display .session-layout { grid-template-columns: minmax(0,1fr) 320px; }
  .hero h1 { font-size: 42px; }
  .scene { font-size: 19px; }
  .card p,.card .trade,.intel,.workflow { font-size: 15px; }
  .dashboard-display .scene { font-size: 24px; max-width: 65ch; }
  .dashboard-display .prompt,.dashboard-display .public-updates .update { font-size: 20px; }
}
@media (max-width:1150px) {
  .copyright-footer { padding-inline: 25px; }
  .shell { grid-template-columns: 190px minmax(0,1fr); }
  .sidebar { padding: 28px 18px; }
  .main { padding: 25px; }
  .setup-grid,.session-layout,.dashboard-display .session-layout { grid-template-columns: minmax(0,1fr); }
  .session-aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .session-aside .panel { margin: 0; }
  .hero h1 { font-size: 30px; }
  .topbar { gap: 12px; }
  .timer { min-width: 145px; }
}
@media (max-width:850px) {
  .shell,.shell.menu-hidden { display: block; }
  .sidebar { position: static; height: auto; overflow: visible; padding: 20px 25px; border-right: 0; border-bottom: 1px solid var(--line); gap: 15px; }
  .sidebar .nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar .nav button { width: auto; flex: 1 1 150px; }
  .side-note { display: none; }
  .topbar { align-items: flex-start; flex-wrap: wrap; }
  .hero { flex-wrap: wrap; }
}
@media (max-width:700px) {
  .copyright-footer { padding-inline: 16px; }
  .main { padding: 22px 16px 36px; }
  .sidebar { padding: 18px 16px; }
  .brand { font-size: 20px; }
  .topbar { padding-bottom: 20px; margin-bottom: 25px; }
  .topbar-start { gap: 10px; }
  .topbar .status { font-size: 11px; letter-spacing: .8px; }
  .topbar button { font-size: 12px; }
  .hero { display: block; }
  .hero h1 { font-size: 29px; }
  .cards,.scenario-list,.session-aside,.grid2 { grid-template-columns: minmax(0,1fr); }
  .panel { padding: 20px; }
  .login { margin: 15px auto; padding: 24px; }
  input,select,textarea { font-size: 16px; }
  .roundline { align-items: flex-start; gap: 15px; }
  .timer { width: 100%; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; padding: 8px 12px; }
  .timer .clock,.dashboard-display .timer .clock { font-size: 30px; }
  .timer small { max-width: 100px; }
  .capacity { align-items: flex-start; gap: 12px; flex-direction: column; }
  .dashboard-display .scene { font-size: 18px; }
  .dashboard-display .roundline h2 { font-size: 23px; }
  .dashboard-display .prompt,.dashboard-display .public-updates .update { font-size: 16px; }
  #notice { left: 12px; right: 12px; bottom: max(12px,env(safe-area-inset-bottom)); max-width: none; max-height: calc(100dvh - 24px); }
}
@media (max-width:480px) {
  .panel { padding: 16px; }
  .state-grid,.state-entry { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .controls button,.options button { flex: 1 1 100%; }
  .card { padding: 16px; min-height: 0; }
  .card .cost { right: 12px; top: 16px; }
  .invite button { flex: 1 1 100%; font-size: 12px; }
  .invite input { font-size: 16px; }
  .timer { flex-wrap: wrap; }
  .login { padding: 20px; }
}

/* Shared TR/EN control stays in the top bar at every viewport. */
.language-selector { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; }
.language-selector button { min-width: 44px; min-height: 44px; padding: 8px; background: transparent; border-color: transparent; }
.language-selector button[aria-pressed="true"] { background: #1b3537; color: var(--accent); border-color: #3d746d; }
.translation-notice { max-width: 78ch; font-size: 13px; margin-bottom: 22px; }