/* ============================================================
   Senedd D'Hondt Simulator – style.css
   Mobile-first, landscape orientation
   ============================================================ */

/* ── Reset & custom properties ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0d1b2a;
  --surface:     rgba(13, 27, 42, 0.93);
  --border:      rgba(255, 255, 255, 0.14);
  --text:        #f0f0f0;
  --muted:       #9aacb8;
  --gold:        #ffd700;
  --gold-dim:    rgba(255, 215, 0, 0.15);
  --primary:     #005b54;
  --primary-h:   #00796e;
  --danger:      #e04040;
  --effective:   #60d0f0;   /* adjusted / effective vote count */
  --divisor:     #f0882c;   /* divisor values */

  --radius:  8px;
  --shadow:  0 4px 20px rgba(0,0,0,0.5);
  --trans:   0.5s ease;
}

html, body {
  width: 100%; height: 100%;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Portrait orientation is fully supported — no rotation required */

/* ── App shell ──────────────────────────────────────────── */
#app {
  position: relative;
  width: 100%; height: 100vh; height: 100dvh;
}

/* ── Phases ─────────────────────────────────────────────── */
.phase {
  position: absolute; inset: 0;
  padding-bottom: 34px; /* clear the fixed site-footer */
  display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity var(--trans);
}
.phase.active {
  opacity: 1; pointer-events: all;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  padding: 9px 20px;
  border: none; border-radius: var(--radius);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  letter-spacing: 0.4px;
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
  border: 2px solid var(--primary-h);
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--primary-h);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,91,84,0.45);
}
.btn-secondary {
  background: rgba(255,255,255,0.09);
  color: #fff;
  border: 2px solid rgba(255,255,255,0.2);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
  background: rgba(255,255,255,0.18);
}
.btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   PHASE 1 – INPUT
   ════════════════════════════════════════════════════════════ */

.map-bg {
  position: absolute; inset: 0; overflow: hidden;
}
.map-bg svg {
  width: 100%; height: 100%;
}

.input-overlay {
  position: relative; z-index: 10;
  display: flex;
  align-items: center; justify-content: center;
  flex: 1; padding: 6px;
}

.input-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  width: 100%; max-width: 740px;
  /* Never taller than the viewport */
  max-height: 92vh; max-height: 92dvh;
  display: flex; flex-direction: column;
  padding: 8px 12px;
  box-shadow: var(--shadow);
  overflow-y: auto;
}

.panel-header {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px; margin-bottom: 7px;
  flex-shrink: 0;
}
.flag { font-size: 26px; line-height: 1; }
.panel-header h1 {
  font-size: 20px; color: var(--gold); font-weight: 800; line-height: 1;
}
.panel-header .subtitle {
  font-size: 10px; color: var(--muted); margin-top: 2px;
}

.panel-body { margin-bottom: 6px; flex-shrink: 0; }
.instructions {
  font-size: 10px; color: var(--muted); margin-bottom: 6px;
}

/* Party input cards grid */
.party-inputs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-bottom: 6px;
  border: none; padding: 0;  /* reset fieldset defaults */
  min-width: 0;
}
@media (max-width: 600px) {
  .party-inputs-grid { grid-template-columns: repeat(2, 1fr); }
}

.party-input-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 5px 7px;
  display: flex; flex-direction: column; gap: 3px;
}
.party-input-label {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; line-height: 1.2;
}
.party-dot {
  width: 9px; height: 9px;
  border-radius: 50%; flex-shrink: 0;
}
.pct-input-wrapper {
  display: flex; align-items: baseline; justify-content: center; gap: 2px;
}
.party-number-input {
  font-size: 16px; font-weight: 800;
  color: var(--gold); text-align: right;
  line-height: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,215,0,0.3);
  width: 40px;
  padding: 1px 0;
  outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}
.party-number-input::-webkit-inner-spin-button,
.party-number-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.party-number-input:focus {
  border-bottom-color: var(--gold);
  background: rgba(255,215,0,0.08);
  border-radius: 2px 2px 0 0;
}
.pct-suffix {
  font-size: 12px; color: var(--gold); font-weight: 700; line-height: 1;
}
.party-slider {
  width: 100%;
  height: 4px;
  cursor: pointer;
}

/* Turnout */
.turnout-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--gold-dim);
  border: 1px solid rgba(255,215,0,0.28);
  border-radius: var(--radius);
  padding: 5px 10px;
  margin-bottom: 5px;
}
.turnout-label {
  font-size: 12px; font-weight: 700;
  white-space: nowrap; color: var(--gold);
}
.turnout-slider { flex: 1; cursor: pointer; }
.turnout-value  {
  font-size: 16px; font-weight: 800;
  color: var(--gold); min-width: 40px; text-align: right;
}

/* Total indicator */
.total-indicator {
  font-size: 11px; text-align: center; color: var(--muted);
}
.warning { color: var(--danger); font-weight: 700; margin-left: 4px; }
.ok      { color: #4caf50;        font-weight: 700; margin-left: 4px; }

.input-error {
  display: none;
  color: var(--danger);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  padding: 5px 8px;
  background: rgba(224, 64, 64, 0.12);
  border: 1px solid rgba(224, 64, 64, 0.35);
  border-radius: var(--radius);
  margin-bottom: 6px;
}

.panel-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  border-top: 1px solid var(--border); padding-top: 7px;
  flex-shrink: 0;
}

/* Independents candidate count row (within party card) */
.ind-cand-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 4px;
  border-top: 1px solid rgba(107, 114, 128, 0.3);
}
.ind-cand-label {
  font-size: 9px; color: var(--muted); white-space: nowrap;
}
.ind-cand-input {
  font-size: 13px; font-weight: 700; color: var(--ind);
  background: transparent; border: none;
  border-bottom: 1px solid rgba(107, 114, 128, 0.4);
  width: 28px; text-align: center; outline: none;
  appearance: textfield;
  -moz-appearance: textfield;
}
.ind-cand-input::-webkit-inner-spin-button,
.ind-cand-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.ind-cand-input:focus {
  border-bottom-color: var(--ind);
  background: rgba(107, 114, 128, 0.12);
  border-radius: 2px 2px 0 0;
}

/* ════════════════════════════════════════════════════════════
   PHASE 2 – CALCULATION
   ════════════════════════════════════════════════════════════ */
#phase-calc {
  background: var(--bg);
  justify-content: center; align-items: center;
}
.calc-wrapper {
  width: 100%; max-width: 560px;
  padding: 10px 16px;
  display: flex; flex-direction: column;
  /* Fill but never overflow the viewport */
  max-height: 100vh; max-height: 100dvh; overflow: hidden;
}
.calc-wrapper h2 {
  font-size: 16px; color: var(--gold);
  text-align: center; margin-bottom: 8px;
  flex-shrink: 0;
}
.calc-scroll {
  overflow-y: auto;
  flex: 1;
}
.calc-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.calc-table tr {
  border-bottom: 1px solid var(--border);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.calc-table tr.visible {
  opacity: 1; transform: translateY(0);
}
.calc-table td { padding: 5px 10px; }
.calc-table td:first-child { color: var(--muted); }
.calc-table td:last-child  { font-weight: 700; text-align: right; }
.party-row td:last-child   { color: var(--gold); }
.total-row td              { font-weight: 800; color: #fff; }
.sep-row td                { padding: 2px; border: none; opacity: 0.3; font-size: 7px; }

.calc-footer { margin-top: 10px; text-align: center; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   PHASE 3 – BALLOT BOXES
   ════════════════════════════════════════════════════════════ */
#phase-ballot { background: var(--bg); overflow: hidden; }

.ballot-wrapper {
  display: flex; flex-direction: column;
  height: 100%; padding: 6px 8px;
}
.ballot-wrapper h2 {
  font-size: 15px; color: var(--gold);
  text-align: center; margin-bottom: 4px; flex-shrink: 0;
  min-height: 2.6em; /* reserve space for the tallest heading text */
}

/* Particle layer – covers entire screen */
#particle-layer {
  position: fixed; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 5;
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Ballot boxes row */
.ballot-boxes-row {
  display: flex; gap: 6px;
  justify-content: center; align-items: flex-end;
  flex: 1; overflow-x: auto;
  padding: 4px 2px;
  position: relative; z-index: 6;
  list-style: none;
}

/* Shared ballot-box styles (used in phase 3 and phase 4) */
.ballot-box {
  flex: 0 0 88px;
  width: 88px;
  height: 132px;            /* fixed — never grows or shrinks */
  background: rgba(15, 28, 44, 0.95);
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 4px 4px 6px 6px;
  padding: 0;
  display: flex; flex-direction: column;
  align-items: stretch; overflow: hidden;
  position: relative;
  transition: box-shadow 0.4s, border-color 0.4s;
}
.ballot-box.highlight {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(255,215,0,0.5);
  animation: box-pulse 1.4s ease infinite;
}
.ballot-box.dim { opacity: 0.45; }

/* Lid with paper slot */
.bbox-lid {
  width: 100%; height: 30px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 2px solid rgba(0,0,0,0.4);
}
.bbox-slot {
  width: 36px; height: 5px;
  background: rgba(0,0,0,0.85);
  border-radius: 1px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,1);
  margin-top: 4px;
}

/* Box body */
.bbox-body {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 5px 4px; gap: 3px;
  overflow: hidden;
}
.bbox-abbr {
  font-size: 15px; font-weight: 900;
  line-height: 1; letter-spacing: 0.5px;
}
.bbox-name {
  font-size: 8px; font-weight: 600;
  text-align: center; color: var(--muted); line-height: 1.25;
}
.bbox-votes {
  font-size: 11px; font-weight: 800;
  color: var(--gold); text-align: center; line-height: 1;
}
.bbox-rank {
  position: absolute; top: 5px; left: 5px;
  background: rgba(0,0,0,0.65);
  color: #fff;
  font-size: 10px; font-weight: 900;
  border-radius: 3px;
  padding: 1px 5px;
  border: 1px solid rgba(255,255,255,0.3);
  z-index: 2;
  line-height: 1.4;
}
.bbox-seats-icons {
  display: flex; gap: 2px; flex-wrap: wrap;
  justify-content: center;
}
.bbox-seat-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.bbox-seat-dot.bbox-seat-won {
  background: #ffd700;
  border-color: #ffd700;
  box-shadow: 0 0 4px rgba(255,215,0,0.6);
}

.ballot-footer {
  flex-shrink: 0;
  text-align: center; padding: 6px 0;
}

/* ════════════════════════════════════════════════════════════
   PHASE 4 – D'HONDT
   ════════════════════════════════════════════════════════════ */
#phase-dhondt { background: var(--bg); }

.dhondt-wrapper {
  display: flex; flex-direction: column;
  height: 100%; padding: 6px 8px; gap: 6px;
}

/* Top section: seats + boxes */
.dhondt-top {
  flex: 1; display: flex; flex-direction: column; gap: 6px; overflow: hidden;
}

/* Seats */
.seats-section { flex-shrink: 0; text-align: center; }
.seats-label {
  font-size: 11px; color: var(--muted); margin-bottom: 5px;
}
.seats-row {
  display: flex; gap: 6px; justify-content: center;
  list-style: none;
}
.seat {
  width: 46px; height: 46px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.18);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 9px; color: var(--muted);
  transition: background 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
  position: relative; overflow: hidden;
}
.seat.won {
  border-color: transparent;
  color: #fff; font-weight: 800;
}
.seat .seat-abbr { font-size: 12px; font-weight: 900; line-height: 1; }
.seat .seat-num  {
  position: absolute; bottom: 2px;
  font-size: 8px; opacity: 0.7; font-weight: 400;
}

/* D'Hondt ballot boxes */
.dhondt-boxes-section {
  flex: 1; overflow: hidden;
}
.dhondt-boxes-row {
  display: flex; gap: 5px;
  align-items: flex-end;
  height: 100%;
  overflow-x: auto;
  padding: 2px 2px 4px;
  list-style: none;
}

/* D'Hondt phase — fixed-height variant with more data */
.dhondt-boxes-row .ballot-box {
  width: 82px; height: 164px; flex: 0 0 82px;
}
.dhondt-boxes-row .bbox-lid  { height: 26px; }
.dhondt-boxes-row .bbox-slot { width: 30px; height: 4px; }
.dhondt-boxes-row .bbox-body { padding: 4px 3px; gap: 2px; }
.dhondt-boxes-row .bbox-abbr { font-size: 13px; }
.dhondt-boxes-row .bbox-name { font-size: 7px; }
.dhondt-boxes-row .bbox-votes { font-size: 10px; }

/* Separate data rows: votes / divisor / effective */
.bbox-divrow, .bbox-adjrow {
  display: flex; align-items: baseline;
  justify-content: center; gap: 3px;
  line-height: 1;
}
.bbox-divisor {
  font-size: 12px; font-weight: 800;
  color: var(--divisor); line-height: 1;
}
.bbox-adjusted {
  font-size: 11px; font-weight: 800;
  color: var(--effective); line-height: 1;
}
.bbox-div-label { font-size: 9px; color: var(--muted); }

/* 'No more candidates' stamp overlay */
.bbox-stamp {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 4;
  pointer-events: none;
  background: rgba(0,0,0,0.25);
}
.bbox-stamp-inner {
  transform: rotate(-22deg);
  border: 2px solid #e04040;
  border-radius: 4px;
  padding: 3px 5px;
  color: #e04040;
  font-size: 7px; font-weight: 900;
  text-align: center; line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: rgba(10, 5, 5, 0.6);
  white-space: nowrap;
}

/* Bottom: message + button */
.dhondt-bottom {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius);
  padding: 8px 12px;
}
.dhondt-bottom .btn {
  min-width: 140px;
  text-align: center;
}
.dhondt-message-box { flex: 1; }
.dhondt-message {
  font-size: 15px; line-height: 1.5; color: var(--text);
}
.dhondt-message strong { color: var(--gold); }
.dhondt-message .dv    { color: var(--divisor); font-weight: 700; }

/* D'Hondt intro overlay */
.dhondt-intro-overlay {
  position: absolute; inset: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 15, 25, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 16px;
  transition: opacity 0.3s ease;
}
.dhondt-intro-overlay.hidden {
  opacity: 0; pointer-events: none;
}
.dhondt-intro-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 28px;
  max-width: 520px; width: 100%;
  max-height: 88dvh;
  overflow-y: auto;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 16px;
  text-align: center;
}
.dhondt-intro-card h3 {
  font-size: 18px; color: var(--gold); font-weight: 800;
}
#dhondt-intro-text {
  font-size: 14px; line-height: 1.65; color: var(--text);
}
#dhondt-intro-text .dv { color: var(--divisor); font-weight: 700; }

/* ════════════════════════════════════════════════════════════
   PHASE 5 – COMPLETE
   ════════════════════════════════════════════════════════════ */
#phase-complete {
  background: var(--bg);
  justify-content: center; align-items: center;
  padding: 16px; overflow-y: auto;
}
.complete-wrapper {
  max-width: 640px; width: 100%; text-align: center;
}
.complete-header { margin-bottom: 12px; }
.confetti-emoji  { font-size: 40px; display: block; margin-bottom: 6px; }
.complete-header h2 { font-size: 26px; color: var(--gold); }
.complete-header p  { color: var(--muted); font-size: 14px; margin-top: 4px; }

.final-seats-row {
  display: flex; gap: 8px;
  justify-content: center; flex-wrap: wrap;
  margin: 12px 0;
  list-style: none;
}
.final-seat {
  width: 78px; height: 78px;
  border-radius: 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff;
  padding: 4px; text-align: center;
  box-shadow: var(--shadow);
}
.final-seat .fs-abbr { font-size: 20px; font-weight: 900; line-height: 1; }
.final-seat .fs-num  { font-size: 9px; opacity: 0.75; margin-top: 2px; }

.final-summary {
  display: flex; gap: 8px;
  justify-content: center; flex-wrap: wrap;
  margin-bottom: 16px;
  list-style: none;
}
.summary-card {
  background: rgba(255,255,255,0.07);
  border-radius: var(--radius);
  padding: 8px 12px;
  display: flex; flex-direction: column;
  align-items: center; gap: 3px;
  min-width: 130px;
  border-left: 4px solid transparent;
}
.summary-seats { font-size: 26px; font-weight: 900; }
.summary-name  { font-size: 10px; color: var(--muted); text-align: center; }
.summary-votes { font-size: 9px;  color: #666; }

.summary-comparison {
  width: 100%; margin-top: 5px;
  display: flex; flex-direction: column; gap: 4px;
}
.cmp-row {
  display: flex; align-items: center; gap: 4px;
}
.cmp-label {
  color: var(--muted); width: 46px; flex-shrink: 0; font-size: 8px;
}
.cmp-bar-wrap {
  flex: 1; height: 5px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px; overflow: hidden;
}
.cmp-bar {
  display: block; height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.cmp-pct {
  color: var(--text); min-width: 30px; text-align: right; font-size: 8px;
}

/* ════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════ */

/* Falling vote particles */
@keyframes ballot-fall {
  0%   { transform: translateY(0) rotate(0deg);   opacity: 1;   }
  80%  { opacity: 0.8; }
  100% { transform: translateY(var(--fall-dist)) rotate(var(--spin)); opacity: 0; }
}
.vote-particle {
  position: fixed;
  width: 9px; height: 13px;
  border-radius: 2px;
  animation: ballot-fall var(--dur) var(--delay) ease-in forwards;
  pointer-events: none; z-index: 5;
}

/* Seat win flash */
@keyframes seat-win {
  0%   { transform: scale(1);    box-shadow: none; }
  40%  { transform: scale(1.35); box-shadow: 0 0 20px rgba(255,215,0,0.8); }
  100% { transform: scale(1);    box-shadow: none; }
}
.seat-flash { animation: seat-win 0.7s ease; }

/* Divisor bump */
@keyframes divisor-bump {
  0%   { transform: scale(1);    color: var(--gold); }
  50%  { transform: scale(1.6);  color: #fff; }
  100% { transform: scale(1);    color: var(--gold); }
}
.divisor-bump { animation: divisor-bump 0.5s ease; }

/* Row slide-in for calc table */
/* (handled inline via .visible class transitions) */

/* Subtle pulse on highlighted box */
@keyframes box-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(255,215,0,0.5); }
  50%       { box-shadow: 0 0 28px rgba(255,215,0,0.9); }
}

/* Scrollbar styling */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE – MOBILE & TABLET
   Targets: iPhone 15/16/17 (390–393px), Pixel 7 (412px),
            Pixel 8 (393px), iPad (768px+)
   ════════════════════════════════════════════════════════════ */

/* ── Ensure 44px minimum touch targets on all mobile ────── */
@media (max-width: 1024px) {
  .btn:not(.footer-feedback) { min-height: 44px; }
}

/* ── Portrait phones: iPhone 15/16/17 (390–393px),
       Pixel 7 (412px), Pixel 8 (393px)
   ──────────────────────────────────────────────────────── */
@media (orientation: portrait) and (max-width: 500px) {

  /* Phase 1 – allow overlay to scroll if content exceeds viewport */
  .input-overlay {
    align-items: flex-start;
    overflow-y: auto;
    padding: 10px 8px;
  }
  .input-panel { max-height: none; }

  /* Party grid – 2 columns with comfortable spacing */
  .party-inputs-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 8px;
  }
  .party-input-card   { padding: 8px 10px; gap: 5px; }
  .party-input-label  { font-size: 11px; }
  .party-number-input { font-size: 18px; width: 44px; }
  .pct-suffix         { font-size: 13px; }
  .turnout-row        { padding: 7px 12px; }
  .turnout-value      { font-size: 18px; min-width: 44px; }
  .btn                { padding: 12px 18px; font-size: 14px; }

  /* Phase 3 – wrap ballot boxes into a multi-row grid */
  .ballot-boxes-row {
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden;
    overflow-y: auto;
    gap: 8px;
  }
  .ballot-box { width: 98px; height: 132px; flex: 0 0 98px; }

  /* Phase 4 – wrap d'hondt boxes, allow section to scroll */
  .dhondt-top             { overflow-y: auto; }
  .dhondt-boxes-section   { overflow: visible; }
  .dhondt-boxes-row {
    flex-wrap: wrap;
    height: auto;
    align-items: flex-start;
    justify-content: center;
    overflow-x: hidden;
    gap: 6px;
  }
  .dhondt-boxes-row .ballot-box { width: 84px; height: 164px; flex: 0 0 84px; }
  .seats-row    { flex-wrap: wrap; justify-content: center; gap: 8px; }
  .seat         { width: 46px; height: 46px; }
  .dhondt-message { font-size: 14px; line-height: 1.4; }
}

/* ── Wider portrait phones (Pixel 7 at 412px) ────────────── */
@media (orientation: portrait) and (min-width: 400px) and (max-width: 500px) {
  .ballot-box                   { width: 106px; flex: 0 0 106px; }
  .dhondt-boxes-row .ballot-box { width: 90px;  flex: 0 0 90px; }
}

/* ── Squashed landscape phones
       Pixel 8 landscape: 851×393  |  iPhone 15/16 landscape: 844×390
   ──────────────────────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 480px) {

  /* Phase 1 – compact everything to ease the squashed feeling */
  .input-panel {
    padding: 5px 10px;
    overflow-y: auto;
    max-height: 96dvh;
  }
  .panel-header          { padding-bottom: 3px; margin-bottom: 4px; gap: 6px; }
  .panel-header h1       { font-size: 15px; }
  .panel-header .subtitle { font-size: 9px; }
  .flag                  { font-size: 20px; }
  .instructions          { font-size: 9px; margin-bottom: 4px; line-height: 1.3; }
  .party-inputs-grid     { gap: 4px; margin-bottom: 4px; }
  .party-input-card      { padding: 3px 5px; gap: 1px; }
  .party-input-label     { font-size: 9px; }
  .party-number-input    { font-size: 13px; width: 33px; }
  .party-slider          { height: 3px; }
  .pct-suffix            { font-size: 10px; }
  .turnout-row           { padding: 3px 8px; margin-bottom: 3px; }
  .turnout-label         { font-size: 10px; }
  .turnout-value         { font-size: 13px; min-width: 32px; }
  .total-indicator       { font-size: 9px; }
  .ind-cand-row          { margin-top: 2px; padding-top: 2px; }
  .ind-cand-label        { font-size: 8px; }
  .panel-footer          { padding-top: 4px; }
  .btn                   { padding: 6px 12px; font-size: 11px; min-height: 32px; }

  /* Phase 2 */
  .calc-wrapper h2  { font-size: 12px; margin-bottom: 5px; }
  .calc-table       { font-size: 10px; }
  .calc-table td    { padding: 3px 7px; }

  /* Phase 3 */
  .ballot-wrapper h2 { font-size: 12px; margin-bottom: 2px; }
  .ballot-box        { width: 76px; height: 112px; flex: 0 0 76px; }
  .bbox-lid          { height: 24px; }
  .bbox-slot         { width: 28px; height: 4px; }
  .bbox-abbr         { font-size: 13px; }
  .bbox-name         { font-size: 8px; }
  .bbox-votes        { font-size: 10px; }

  /* Phase 4 */
  .dhondt-wrapper              { padding: 4px 6px; gap: 4px; }
  .dhondt-top                  { gap: 4px; }
  .seats-label                 { font-size: 9px; margin-bottom: 3px; }
  .seat                        { width: 36px; height: 36px; border-radius: 6px; }
  .seat .seat-abbr             { font-size: 10px; }
  .dhondt-boxes-row .ballot-box { width: 70px; height: 144px; flex: 0 0 70px; }
  .dhondt-boxes-row .bbox-name  { font-size: 7px; }
  .dhondt-boxes-row .bbox-votes    { font-size: 10px; }
  .dhondt-boxes-row .bbox-adjusted { font-size: 10px; }
  .dhondt-bottom    { padding: 5px 8px; }
  .dhondt-message   { font-size: 11px; line-height: 1.4; }

  /* Phase 5 */
  .complete-header h2  { font-size: 20px; }
  .confetti-emoji      { font-size: 28px; margin-bottom: 3px; }
  .complete-header p   { font-size: 12px; }
  .final-seats-row     { margin: 8px 0; gap: 6px; }
  .final-seat          { width: 62px; height: 62px; }
  .final-seat .fs-abbr { font-size: 16px; }
  .summary-card        { min-width: 108px; padding: 6px 8px; }
  .summary-seats       { font-size: 20px; }
}

/* ── Portrait tablet (iPad Air / Pro portrait: 768–834px wide)
   ──────────────────────────────────────────────────────── */
@media (orientation: portrait) and (min-width: 600px) and (max-width: 1023px) {
  .input-panel        { max-width: 700px; padding: 14px 20px; }
  .panel-header h1    { font-size: 24px; }
  .panel-header .subtitle { font-size: 12px; }
  .flag               { font-size: 30px; }
  .party-inputs-grid  { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .party-input-card   { padding: 8px 10px; }
  .party-number-input { font-size: 19px; width: 46px; }
  .pct-suffix         { font-size: 14px; }
  .turnout-value      { font-size: 19px; }
  .btn                { padding: 12px 22px; font-size: 14px; }

  .ballot-box { width: 106px; height: 148px; flex: 0 0 106px; }
  .bbox-abbr  { font-size: 17px; }
  .bbox-name  { font-size: 10px; }
  .bbox-votes { font-size: 14px; }

  .seat            { width: 58px; height: 58px; }
  .seat .seat-abbr { font-size: 14px; }
  .dhondt-boxes-row .ballot-box { width: 98px; height: 177px; flex: 0 0 98px; }
  .dhondt-message  { font-size: 14px; }

  .final-seat          { width: 90px; height: 90px; }
  .final-seat .fs-abbr { font-size: 22px; }
  .summary-card        { min-width: 150px; }
  .summary-seats       { font-size: 30px; }
}

/* ── Site footer ───────────────────────────────────────── */
.site-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  background: rgba(7, 15, 25, 0.88);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.footer-name {
  font-size: 9px;
  color: var(--muted);
  opacity: 0.6;
}

.footer-feedback {
  font-size: 9px;
  color: var(--muted);
  text-decoration: none;
  opacity: 0.6;
  white-space: nowrap;
}
.footer-feedback:hover,
.footer-feedback:focus-visible {
  opacity: 1;
  color: var(--text);
}

/* ── Landscape tablet / desktop (1024px+ wide, 600px+ tall) ─ */
@media (min-width: 1024px) and (min-height: 600px) {
  .input-panel        { max-width: 900px; padding: 14px 22px; }
  .panel-header h1    { font-size: 24px; }
  .panel-header .subtitle { font-size: 12px; }
  .flag               { font-size: 30px; }
  .party-inputs-grid  { gap: 8px; }
  .party-input-card   { padding: 8px 12px; }
  .party-number-input { font-size: 19px; width: 46px; }
  .pct-suffix         { font-size: 14px; }
  .turnout-value      { font-size: 19px; }
  .btn                { padding: 11px 22px; font-size: 14px; }

  .ballot-box { width: 108px; height: 150px; flex: 0 0 108px; }
  .bbox-abbr  { font-size: 17px; }
  .bbox-name  { font-size: 10px; }
  .bbox-votes { font-size: 14px; }

  .seat            { width: 58px; height: 58px; }
  .seat .seat-abbr { font-size: 14px; }
  .dhondt-boxes-row .ballot-box { width: 100px; height: 180px; flex: 0 0 100px; }
  .dhondt-message  { font-size: 14px; }

  .final-seat          { width: 90px; height: 90px; }
  .final-seat .fs-abbr { font-size: 22px; }
  .summary-seats       { font-size: 30px; }
}