/* Trade War · Tariff Simulator — game styles
   Uses tokens from style.css (Small Step Econ) */

/* ---------- Layout ---------- */
.game-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-4) var(--space-6);
  border-bottom:1px solid var(--color-divider);
  background:var(--color-surface);
  position:sticky;top:0;z-index:20;
}
.brand{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-text);text-decoration:none;font-weight:600}
.brand svg{color:var(--color-primary)}
.mode-nav{display:inline-flex;gap:var(--space-1);background:var(--color-surface-2);padding:var(--space-1);border-radius:var(--radius-full);border:1px solid var(--color-divider)}
.mode-btn{
  padding:.5rem 1rem;border-radius:var(--radius-full);
  font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);
}
.mode-btn.is-active{background:var(--color-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-sm)}
.mode-btn:not(.is-active):hover{color:var(--color-text)}

.game-shell{
  max-width:var(--content-wide);
  margin:0 auto;
  padding:var(--space-8) var(--space-6) var(--space-24);
}

/* ---------- Hero ---------- */
.hero{margin:var(--space-4) 0 var(--space-8);max-width:820px}
.eyebrow{
  text-transform:uppercase;letter-spacing:.14em;font-size:var(--text-xs);
  color:var(--color-text-muted);font-weight:600;margin-bottom:var(--space-3);
}
.hero h1{font-size:var(--text-3xl);font-weight:400;letter-spacing:-.01em}
.hero h1 em{font-style:italic;color:var(--color-primary)}
.hero .lede{margin-top:var(--space-4);font-size:var(--text-lg);color:var(--color-text-muted);max-width:640px}

/* ---------- Preset strip ---------- */
.presets{margin:var(--space-6) 0 var(--space-8)}
.preset-strip{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);
}
.preset-btn{
  text-align:left;padding:var(--space-4) var(--space-5);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  display:flex;flex-direction:column;gap:var(--space-1);
}
.preset-btn:hover{border-color:var(--color-primary);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.preset-btn.is-active{border-color:var(--color-primary);background:var(--color-primary-highlight);box-shadow:var(--shadow-md)}
.preset-year{font-family:var(--font-display);font-style:italic;color:var(--color-primary);font-size:var(--text-lg);line-height:1}
.preset-name{font-weight:600;font-size:var(--text-base)}
.preset-desc{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.4}

@media (max-width:820px){.preset-strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.preset-strip{grid-template-columns:1fr}}

/* ---------- Two-pane panel ---------- */
.panel-grid{display:grid;grid-template-columns:1fr 380px;gap:var(--space-6);align-items:start}
@media (max-width:960px){.panel-grid{grid-template-columns:1fr}}

/* ---------- Story card (scenario mode) ---------- */
.story-card{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-6) var(--space-8);
  box-shadow:var(--shadow-sm);
}
.story-title{font-size:var(--text-2xl);font-weight:400;letter-spacing:-.01em;margin-bottom:var(--space-4)}
.story-body{font-size:var(--text-base);line-height:1.7;color:var(--color-text)}
.story-body p{margin:var(--space-3) 0;max-width:none}
.story-body strong{color:var(--color-primary)}
.story-body em{font-family:var(--font-display);font-style:italic}
.story-body blockquote{
  border-left:3px solid var(--color-primary);
  padding-left:var(--space-4);margin:var(--space-4) 0;
  font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);
  color:var(--color-text-muted);
}
.story-choices{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-6)}
.story-choice{
  text-align:left;padding:var(--space-4) var(--space-5);
  border:1px solid var(--color-border);background:var(--color-surface-2);
  border-radius:var(--radius-md);font-size:var(--text-base);
  display:flex;flex-direction:column;gap:var(--space-1);
}
.story-choice:hover{border-color:var(--color-primary);background:var(--color-primary-highlight)}
.story-choice-title{font-weight:600}
.story-choice-desc{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.4}
.story-nav{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--color-divider)}
.story-progress{color:var(--color-text-faint);font-size:var(--text-sm);font-variant-numeric:tabular-nums}

/* ---------- Dashboard ---------- */
.dash{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-5);
  box-shadow:var(--shadow-sm);position:sticky;top:88px;
}
.dash-title{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:var(--text-lg);color:var(--color-text-muted);margin-bottom:var(--space-4)}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.stat{
  background:var(--color-surface-2);border:1px solid var(--color-divider);
  border-radius:var(--radius-md);padding:var(--space-3);
}
.stat.is-wide{grid-column:1/-1}
.stat-label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.stat-value{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.1;margin-top:var(--space-1);font-variant-numeric:tabular-nums}
.stat-delta{font-size:var(--text-xs);margin-top:var(--space-1);font-variant-numeric:tabular-nums}
.stat-delta.up{color:var(--color-error)}
.stat-delta.down{color:var(--color-primary)}
.stat-delta.neutral{color:var(--color-text-muted)}

.stat.is-warn{background:#fdf5f0;border-color:#f2c9b3}
.stat.is-good{background:var(--color-primary-highlight);border-color:#a9d5b6}

.retaliation-meter{
  margin-top:var(--space-2);height:8px;border-radius:999px;
  background:var(--color-surface-offset);overflow:hidden;
}
.retaliation-meter > span{
  display:block;height:100%;background:linear-gradient(90deg,#e8b17a,#c25a3a);
  transition:width 400ms cubic-bezier(.16,1,.3,1);
}

/* ---------- Verdict banner ---------- */
.verdict{
  margin-top:var(--space-4);padding:var(--space-4);
  border-radius:var(--radius-md);border:1px solid var(--color-border);
  background:var(--color-surface-2);
  font-size:var(--text-sm);line-height:1.5;
}
.verdict h4{font-family:var(--font-display);font-style:italic;font-weight:400;color:var(--color-primary);margin-bottom:var(--space-1)}
.verdict.is-bad{background:#fdf5f0;border-color:#f2c9b3}
.verdict.is-bad h4{color:#8a1e2c}
.verdict.is-good{background:var(--color-primary-highlight);border-color:#a9d5b6}
.verdict.is-neutral{background:var(--color-surface-2)}

/* ---------- Sliders ---------- */
.slider-group{margin:var(--space-5) 0}
.slider-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:var(--space-1);margin-top:var(--space-4)}
.slider-label{color:var(--color-text-muted);font-size:var(--text-sm)}
.slider-label b{color:var(--color-text);font-weight:600}
.slider-value{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:var(--text-lg);color:var(--color-primary)}

.slider{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;
  background:var(--color-surface-offset);border-radius:999px;outline:none;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:22px;height:22px;border-radius:50%;
  background:var(--color-primary);border:3px solid var(--color-surface);
  box-shadow:var(--shadow-md);cursor:grab;
}
.slider::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;
  background:var(--color-primary);border:3px solid var(--color-surface);
  box-shadow:var(--shadow-md);cursor:grab;
}
.slider:active::-webkit-slider-thumb,.slider:focus-visible::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.08)}

/* ---------- Buttons ---------- */
.btn-primary{
  background:var(--color-primary);color:var(--color-text-inverse);
  padding:.7rem 1.4rem;border-radius:var(--radius-full);font-weight:600;
  font-size:var(--text-sm);letter-spacing:.02em;
}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-ghost{
  color:var(--color-text-muted);font-size:var(--text-sm);
  padding:.5rem 1rem;border-radius:var(--radius-full);
}
.btn-ghost:hover{background:var(--color-surface-2);color:var(--color-text)}

/* ---------- Turn mode ---------- */
.turn-controls{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-6);
  box-shadow:var(--shadow-sm);
}
.turn-controls h2{font-size:var(--text-xl);font-weight:400;font-family:var(--font-display)}
.turn-controls h2 .muted{color:var(--color-text-faint);font-size:var(--text-base)}
.turn-actions{display:flex;gap:var(--space-3);align-items:center;margin-top:var(--space-5)}

.log{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--color-divider)}
.log h4{font-family:var(--font-display);font-style:italic;font-weight:400;color:var(--color-text-muted);margin-bottom:var(--space-3);font-size:var(--text-base)}
.log ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}
.log li{
  padding:var(--space-3);background:var(--color-surface-2);
  border-left:3px solid var(--color-primary);border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-size:var(--text-sm);line-height:1.5;
}
.log li.retaliation{border-left-color:#c25a3a;background:#fdf5f0}
.log li .log-turn{color:var(--color-text-faint);font-family:var(--font-display);font-style:italic;font-size:var(--text-xs);margin-bottom:2px;display:block}

.chart{
  margin-top:var(--space-4);height:120px;
  background:var(--color-surface-2);border:1px solid var(--color-divider);
  border-radius:var(--radius-md);padding:var(--space-3);
  position:relative;
}

/* ---------- Sandbox ---------- */
.sandbox-controls{
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-6);
  box-shadow:var(--shadow-sm);
}
.sandbox-controls h2{font-size:var(--text-xl);font-family:var(--font-display);font-weight:400;margin-bottom:var(--space-2)}
.sb-row{margin:var(--space-4) 0}
.sb-row > label{display:block;font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-2)}
.select{
  width:100%;padding:.6rem .8rem;border-radius:var(--radius-md);
  border:1px solid var(--color-border);background:var(--color-surface-2);
  font-size:var(--text-base);
}
.switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;color:var(--color-text) !important;margin-bottom:0 !important}
.switch input{width:18px;height:18px;accent-color:var(--color-primary)}

.muted{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.5}

/* ---------- Footer / footnotes ---------- */
.footnotes{
  margin-top:var(--space-16);padding-top:var(--space-6);
  border-top:1px solid var(--color-divider);color:var(--color-text-muted);
}
.footnotes details{max-width:800px}
.footnotes summary{cursor:pointer;font-family:var(--font-display);font-style:italic;font-size:var(--text-lg);color:var(--color-text);padding:var(--space-2) 0}
.footnotes .fn-body{padding:var(--space-3) 0;font-size:var(--text-sm);line-height:1.6}
.footnotes .fn-body h4{font-family:var(--font-display);font-style:italic;font-weight:400;margin-top:var(--space-4);color:var(--color-text)}
.footnotes ul{margin-top:var(--space-2);padding-left:var(--space-5);display:flex;flex-direction:column;gap:var(--space-1)}
.footnotes a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px}
.tiny{margin-top:var(--space-3);font-size:var(--text-xs);color:var(--color-text-faint)}

.site-foot{
  border-top:1px solid var(--color-divider);
  padding:var(--space-6);text-align:center;
  color:var(--color-text-faint);font-size:var(--text-sm);
}
.site-foot a{color:var(--color-text-muted)}