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

:root {
  --bg: #FFFD8F;
  --surface: #ffffff;
  --ink: #0a0a0a;
  --ink-soft: #4a4a4a;
  --border: #0a0a0a;
  --primary: #e8344c;
  --primary-hover: #ff5060;
  --warning: #ff8a00;
  --warning-hover: #ffa133;
  --success: #2ecc40;
  --danger: #c81d11;
  --danger-hover: #e63226;
  --info: #0074d9;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 2px 2px 0 var(--ink);
  --shadow-lg: 6px 6px 0 var(--ink);

  --font-pixel: 'Press Start 2P', system-ui, monospace;
  --font-body: 'VT323', 'Courier New', monospace;
}

html, body {
  height: 100%;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.4;
  font-size: 22px;
}

h1, h2, h3 {
  font-family: var(--font-pixel);
  font-weight: 400;
  letter-spacing: 0.5px;
}

h1 { font-size: 1.5rem; line-height: 1.6; }
h2 { font-size: 1.1rem; line-height: 1.5; }
h3 { font-size: 0.9rem; line-height: 1.5; }

p { font-size: 1.1rem; }

/* Brand mark (top-left on voter & presenter views) */
.brand {
  position: fixed;
  top: 1rem;
  left: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: var(--ink);
  z-index: 10;
  pointer-events: none;
}

.brand-logo {
  height: 1.75rem;
  width: auto;
  display: block;
}

body[data-view="presenter"] .brand {
  font-size: 1rem;
  top: 1.25rem;
  left: 1.5rem;
  gap: 0.85rem;
}

body[data-view="presenter"] .brand-logo {
  height: 2.5rem;
}

@media (max-width: 768px) {
  .brand { font-size: 0.6rem; gap: 0.45rem; }
  .brand-logo { height: 1.4rem; }
  body[data-view="presenter"] .brand { font-size: 0.75rem; gap: 0.5rem; }
  body[data-view="presenter"] .brand-logo { height: 1.6rem; }
}

/* Reserve clear space under the fixed brand mark on branded views */
body[data-view="voter"] .view { padding-top: 3.25rem; }
body[data-view="presenter"] .view { padding-top: 4.25rem; }
@media (max-width: 768px) {
  body[data-view="voter"] .view { padding-top: 2.75rem; }
  body[data-view="presenter"] .view { padding-top: 3rem; }
}

/* View visibility based on body[data-state] */
.view { display: none; }

body[data-state="no-session"] .view-no-session,
body[data-state="invalid-session"] .view-invalid-session,
body[data-state="auth"] .view-auth,
body[data-state="location"] .view-location,
body[data-state="enter-name"] .view-enter-name,
body[data-state="waiting"] .view-waiting,
body[data-state="voting"] .view-voting,
body[data-state="voted"] .view-voted,
body[data-state="results"] .view-results,
body[data-state="manage"] .view-manage,
body[data-state="setup"] .view-setup,
body[data-state="ready"] .view-ready,
body[data-state="poll-open"] .view-poll-open,
body[data-state="poll-closed"] .view-poll-closed,
body[data-state="show-qr"] .view-show-qr,
body[data-state="live"] .view-live,
body[data-state="suggesting"] .view-suggesting,
body[data-state="ended"] .view-ended {
  display: flex;
}

/* Layout */
#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.view {
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* Cards */
.card {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 2rem;
  max-width: 460px;
  width: 100%;
  box-shadow: var(--shadow-lg);
}

.card.wide {
  max-width: 680px;
}

.card h1, .card h2 {
  margin-bottom: 1.25rem;
}

/* Forms */
label {
  display: block;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
  margin-top: 1rem;
  text-transform: uppercase;
}

input[type="text"], input[type="password"], select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.1rem;
  box-shadow: var(--shadow-sm);
}

input[type="text"]:focus, input[type="password"]:focus, select:focus {
  outline: none;
  background: #fff;
  box-shadow: var(--shadow);
}

/* Buttons */
button {
  cursor: pointer;
  padding: 0.6rem 1rem;
  border: 3px solid var(--ink);
  border-radius: 0;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: var(--shadow);
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out, background 0.15s;
}

button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
}

button:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-sm);
}

button:focus-visible {
  outline: 2px dashed var(--ink);
  outline-offset: 4px;
}

form button[type="submit"], .btn-primary {
  background: var(--primary);
  color: #fff;
  width: 100%;
  margin-top: 1.25rem;
}

form button[type="submit"]:hover, .btn-primary:hover {
  background: var(--primary-hover);
}

.btn-warning {
  background: var(--warning);
  color: var(--ink);
  width: 100%;
  margin-top: 0.5rem;
}

.btn-warning:hover {
  background: var(--warning-hover);
}

.btn-secondary {
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  margin-top: 0.5rem;
}

.btn-secondary:hover {
  background: #f0f0f0;
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  width: 100%;
  margin-top: 0.5rem;
}

.btn-danger:hover {
  background: var(--danger-hover);
}

a.btn-primary, a.btn-secondary, a.btn-warning, a.btn-danger {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 0.6rem 1rem;
  border: 3px solid var(--ink);
  border-radius: 0;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out, background 0.15s;
}

a.btn-primary:hover, a.btn-secondary:hover, a.btn-warning:hover, a.btn-danger:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
}

a.btn-primary:active, a.btn-secondary:active, a.btn-warning:active, a.btn-danger:active {
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-sm);
}

/* Vote buttons */
.options-grid {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.vote-button {
  background: var(--surface);
  border: 3px solid var(--ink);
  color: var(--ink);
  padding: 1rem;
  border-radius: 0;
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  text-transform: uppercase;
  text-align: left;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow);
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out, background 0.15s;
}

.vote-button:hover {
  background: #fffbcc;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--ink);
}

.vote-button.selected {
  background: var(--primary);
  color: #fff;
  transform: translate(2px, 2px);
  box-shadow: var(--shadow-sm);
}

body[data-state="results"] .vote-button {
  pointer-events: none;
  opacity: 0.55;
}

body[data-state="results"] .vote-button.selected {
  opacity: 1;
}

/* Controller (dpad / abxy / lr — SNES-style positional button layouts) */
.controller {
  margin: 1rem auto;
  width: 100%;
}

.controller-dpad,
.controller-abxy {
  display: grid;
  /* minmax(0, 1fr) — without the 0 floor, each column's `auto` min-content
     would be the full nowrap label width, forcing the controller wider than
     its max-width and shoving the card off small screens (e.g. iPhone SE). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 8px;
  max-width: 360px;
  aspect-ratio: 1 / 1;
}

/* ABXY: two diagonal capsules running NE-SW behind the buttons
   — one grouping X+Y (upper-left), one grouping A+B (lower-right),
   echoing the recessed capsule plates on the SNES PAL controller. */
.controller-abxy {
  position: relative;
  isolation: isolate;
}

.controller-abxy::before,
.controller-abxy::after {
  content: '';
  position: absolute;
  width: 88%;
  height: 38%;
  border: 3px solid var(--ink);
  border-radius: 9999px;
  background: #cccbb8;
  pointer-events: none;
  z-index: 0;
}

.controller-abxy::before {
  /* A+B (lower-right diamond half) */
  left: 66.67%;
  top: 66.67%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.controller-abxy::after {
  /* X+Y (upper-left diamond half) */
  left: 33.33%;
  top: 33.33%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.controller-abxy .controller-button {
  z-index: 1;
}

/* LR: two pills stacked vertically. Side-by-side gets too cramped on phone
   widths to read as shoulder buttons. We nudge L left and R right so the
   spatial L/R cue is preserved without crowding the labels. */
.controller-lr {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 440px;
}

.controller-lr .slot-l { margin-right: 14%; }
.controller-lr .slot-r { margin-left: 14%; }

/* Two rows: glyph + label across the top, count below — fits the LR
   pill's reduced vertical room (and matches what a single-line bound
   label naturally wants to do). */
.controller-lr .controller-button {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.3rem;
  row-gap: 0.25rem;
  align-items: center;
  align-content: center;
  background: #d8d8d8;
}

.controller-lr .controller-glyph {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  /* px not rem — the pill itself is a fixed pixel size, so the text inside
     it should keep its proportions instead of stepping at the 768px
     font-size breakpoint. */
  font-size: 20px;
}

.controller-lr .controller-button:not(.slot-empty) .controller-glyph::after {
  content: ':';
}

.controller-lr .controller-label {
  grid-column: 2;
  grid-row: 1;
  justify-self: start;
  text-align: left;
  font-size: 14px;
}

.controller-lr .controller-count {
  grid-column: 1 / span 2;
  grid-row: 2;
  justify-self: center;
  font-size: 16px;
}

.controller-button {
  position: relative;
  border: 3px solid var(--ink);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-pixel);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out;
}

.controller-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--slot-fill, transparent);
  opacity: var(--slot-fill-intensity, 0);
  transition: opacity 0.3s ease-out;
  z-index: 0;
  pointer-events: none;
}

.controller-button > * {
  position: relative;
  z-index: 1;
}

/* Per-kind button shape */
.controller-dpad .controller-button { border-radius: 0; }
.controller-abxy .controller-button { border-radius: 50%; aspect-ratio: 1 / 1; }
/* LR: pill — corner radius = half height so each end is a semicircle (SNES shoulder buttons). */
.controller-lr   .controller-button { border-radius: 9999px; min-height: 64px; padding: 0 1.25rem; }

/* Slot positions: dpad (3x3) */
.controller-dpad .slot-up    { grid-column: 2; grid-row: 1; }
.controller-dpad .slot-right { grid-column: 3; grid-row: 2; }
.controller-dpad .slot-down  { grid-column: 2; grid-row: 3; }
.controller-dpad .slot-left  { grid-column: 1; grid-row: 2; }

/* Slot positions: abxy (3x3 diamond, SNES PAL/JP layout) */
.controller-abxy .slot-x { grid-column: 2; grid-row: 1; }
.controller-abxy .slot-a { grid-column: 3; grid-row: 2; }
.controller-abxy .slot-b { grid-column: 2; grid-row: 3; }
.controller-abxy .slot-y { grid-column: 1; grid-row: 2; }

/* Controller text sizes are in px, not rem — the buttons themselves are
   fixed-size, so the text inside should keep its proportions instead of
   stepping at the 768px page font-size breakpoint. */
.controller-glyph {
  font-size: 28px;
  line-height: 1;
}

.controller-label {
  font-size: 11px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.controller-count {
  font-size: 14px;
}

.controller-button.slot-empty {
  background: #d8d8c8;
  color: #888;
  cursor: not-allowed;
  box-shadow: none;
}

/* "Your vote" highlight when the renderer is in invert-selected mode (abxy
   voter): the selected slot becomes black with white text instead of
   wearing its slot colour. */
.controller-button.slot-inverted {
  background: var(--ink);
  color: var(--surface);
}

.controller-button.slot-inverted::before {
  opacity: 0;
}

button.controller-button:not(:disabled):hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}

button.controller-button:not(:disabled):active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

.controller-badge {
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
  width: 34px;
  height: 34px;
  background: #FFC72C;
  color: var(--ink);
  border: 3px solid var(--ink);
  font-family: var(--font-pixel);
  font-size: 1rem;
  line-height: 28px;
  text-align: center;
  text-shadow: 0 1px 0 #B8860B;
  z-index: 2;
  box-shadow: var(--shadow-sm);
  animation: controller-medal 1.2s ease-in-out infinite;
}

.controller-button.marked-leader .controller-badge {
  display: block;
}

@keyframes controller-medal {
  0%, 100% { transform: scale(1) rotate(-4deg); }
  50%      { transform: scale(1.12) rotate(4deg); }
}

/* Presenter sizing */
.presenter-controller.controller-dpad,
.presenter-controller.controller-abxy { max-width: 540px; }
.presenter-controller.controller-lr   { max-width: 640px; }

.presenter-controller .controller-glyph { font-size: 48px; }
.presenter-controller .controller-label { font-size: 17px; }
.presenter-controller .controller-count { font-size: 28px; }

/* LR sits inline rather than centring a single glyph in a square, so the
   default presenter scale-up makes the L/R look enormous. Bring the glyph
   down to roughly match the label, and grow the pill so the two-row
   content has breathing room. */
.presenter-controller.controller-lr .controller-button { min-height: 110px; padding: 0 2rem; }
.presenter-controller.controller-lr .controller-glyph   { font-size: 34px; }
.presenter-controller.controller-lr .controller-label   { font-size: 24px; }
.presenter-controller.controller-lr .controller-count   { font-size: 30px; }

/* Chart */
.chart {
  margin: 1rem auto;
}

.chart-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.chart-label {
  width: 140px;
  text-align: right;
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chart-bar-track {
  flex: 1;
  height: 36px;
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.chart-bar-fill {
  height: 100%;
  border-radius: 0;
  transition: width 0.3s ease-out;
  min-width: 0;
}

.chart-count {
  width: 50px;
  text-align: right;
  font-family: var(--font-pixel);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.vote-count {
  font-family: var(--font-pixel);
  color: var(--ink);
  font-size: 0.7rem;
  margin-top: 0.75rem;
}

/* Presenter — body is a two-column grid: main content on the left,
   persistent QR sidebar on the right. Show-takeover states (ended,
   invalid-session) collapse to a single column. */
body[data-view="presenter"] {
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 100vh;
  min-height: 100vh;
}

body[data-view="presenter"] #app {
  position: relative;
  min-width: 0;
}

.presenter-qr-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  border-left: 4px solid var(--ink);
}

.presenter-qr-aside canvas {
  border: 4px solid var(--ink);
  box-shadow: var(--shadow-lg);
  background: #fff;
  width: clamp(280px, 40vw, 900px);
  height: auto;
}

/* Game Over and bad-session states take the whole screen. */
body[data-view="presenter"][data-state="ended"],
body[data-view="presenter"][data-state="invalid-session"] {
  grid-template-columns: 1fr;
}
body[data-view="presenter"][data-state="ended"] .presenter-qr-aside,
body[data-view="presenter"][data-state="invalid-session"] .presenter-qr-aside {
  display: none;
}

/* Phone-width fallback: stack the QR below the main pane instead of beside it. */
@media (max-width: 768px) {
  body[data-view="presenter"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }
  .presenter-qr-aside {
    border-left: none;
    border-top: 4px solid var(--ink);
  }
}

.presenter-center {
  text-align: center;
  width: 100%;
  max-width: 960px;
}

.presenter-center h1 {
  font-size: 2.5rem;
  line-height: 1.4;
  margin-bottom: 2rem;
}

.presenter-chart .chart-label {
  font-size: 1rem;
  width: 220px;
}

.presenter-chart .chart-bar-track {
  height: 56px;
  border-width: 4px;
}

.presenter-chart .chart-count {
  font-size: 1.5rem;
  width: 80px;
}

.large {
  font-size: 1.5rem;
}

/* Suggest stage (presenter) */
.suggest-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.suggest-question {
  font-size: 2rem;
  line-height: 1.4;
  text-align: center;
  max-width: 60vw;
  z-index: 1;
}

.bubble-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bubble {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--surface);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-width: 220px;
  animation: bubble-fade var(--lifetime, 8000ms) ease-out forwards;
}

.bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 16px;
  width: 12px;
  height: 12px;
  background: var(--surface);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(45deg);
}

.bubble-text {
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  line-height: 1.4;
  word-break: break-word;
}

.bubble-attribution {
  font-family: var(--font-body);
  font-size: 0.85rem;
  opacity: 0.55;
}

@keyframes bubble-fade {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, calc(-50% - 30px)) scale(1); }
}

/* Admin tabs */
.admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 3px solid var(--ink);
  flex-shrink: 0;
  background: var(--bg);
}

.admin-tab {
  padding: 0.75rem 1.5rem;
  background: #c8c8b8;
  color: var(--ink-soft);
  border: 3px solid var(--ink);
  border-bottom: none;
  border-radius: 0;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  text-transform: uppercase;
  cursor: pointer;
  margin-right: -3px;
  margin-bottom: -3px;
  box-shadow: none;
  transition: background 0.15s, color 0.15s;
}

.admin-tab:hover {
  background: #d8d8c8;
  color: var(--ink);
  transform: none;
  box-shadow: none;
}

.admin-tab:active {
  transform: none;
  box-shadow: none;
}

.admin-tab.active {
  background: var(--bg);
  color: var(--ink);
}

/* Admin layout */
.admin-layout {
  display: flex;
  gap: 2rem;
  width: 100%;
  max-width: 1080px;
  height: 100%;
}

.admin-sidebar {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.admin-info {
  background: var(--surface);
  padding: 1rem 1.25rem;
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow);
}

.admin-info p {
  margin-bottom: 0.4rem;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  color: var(--ink);
  text-transform: uppercase;
}

.admin-info strong {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ink);
  text-transform: none;
}

.admin-controls {
  display: flex;
  flex-direction: column;
}

.admin-controls hr {
  border: none;
  border-top: 3px dashed var(--ink);
  margin: 1rem 0;
}

.admin-main {
  flex: 1;
  background: var(--surface);
  padding: 2rem;
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
}

.admin-question {
  margin-bottom: 1.5rem;
}

.jump-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.jump-row select {
  flex: 1;
}

.jump-row button {
  width: auto;
  margin-top: 0;
}

/* Poll management */
.manage-layout {
  display: flex;
  gap: 2rem;
  width: 100%;
  max-width: 1080px;
  height: 100%;
}

.manage-sidebar {
  width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.manage-sidebar h2 {
  margin-bottom: 0.25rem;
}

.manage-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.manage-sidebar-actions .btn-primary {
  margin-top: 0;
}

.show-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.show-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  border-radius: 0;
  background: var(--surface);
  border: 3px solid var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.05s, box-shadow 0.05s, background 0.15s;
}

.show-list .show-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.1rem;
}

.show-list li::after {
  content: '▶';
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1;
  margin-left: 0.25rem;
  transition: transform 0.15s;
}

.show-list li:hover {
  background: #fffbcc;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}

.show-list li:hover::after {
  transform: translateX(2px);
}

.show-list li:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

.show-list li.selected {
  background: var(--primary);
  color: #fff;
}

.show-list li.selected::after {
  color: #fff;
}

.show-list li:focus-visible {
  outline: 2px dashed var(--ink);
  outline-offset: 4px;
}

.show-name {
  font-weight: 400;
}

.show-count {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  text-transform: uppercase;
}

.manage-main {
  flex: 1;
  overflow-y: auto;
}

.poll-editor {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.poll-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.poll-editor-header h2 {
  margin-bottom: 0;
  padding: 0.25rem 0.5rem;
  outline: none;
  min-width: 0;
  flex: 1;
}

.poll-editor-header h2:focus {
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--ink);
}

.btn-danger-sm {
  background: var(--danger);
  color: #fff;
  padding: 0.45rem 0.75rem;
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  text-transform: uppercase;
  width: auto;
  margin: 0;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.btn-danger-sm:hover {
  background: var(--danger-hover);
}

.poll-card {
  background: var(--surface);
  border: 3px solid var(--ink);
  border-radius: 0;
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}

.poll-card-header {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.poll-card .poll-type-select {
  width: auto;
  flex-shrink: 0;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  padding: 0.4rem 0.5rem;
}

.poll-type-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.poll-type-row label {
  margin: 0;
  font-size: 0.55rem;
}

.poll-type-row .poll-type-select {
  width: auto;
  font-family: var(--font-pixel);
  font-size: 0.6rem;
  padding: 0.4rem 0.5rem;
  margin: 0;
}

.slot-edit-grid {
  display: grid;
  gap: 6px;
  width: 100%;
  margin: 0.5rem 0;
}

.slot-edit-grid.kind-dpad,
.slot-edit-grid.kind-abxy {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  max-width: 360px;
}

.slot-edit-grid.kind-lr {
  grid-template-columns: 1fr 1fr;
  max-width: 360px;
}

.slot-edit-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.slot-edit-slot .slot-edit-glyph {
  font-family: var(--font-pixel);
  font-size: 0.9rem;
  line-height: 1;
}

.slot-edit-slot .slot-input {
  width: 100%;
  padding: 0.4rem 0.5rem;
  font-size: 0.95rem;
  box-shadow: var(--shadow-sm);
  text-align: center;
}

/* dpad slot placement */
.kind-dpad .slot-edit-up    { grid-column: 2; grid-row: 1; }
.kind-dpad .slot-edit-right { grid-column: 3; grid-row: 2; }
.kind-dpad .slot-edit-down  { grid-column: 2; grid-row: 3; }
.kind-dpad .slot-edit-left  { grid-column: 1; grid-row: 2; }

/* abxy slot placement */
.kind-abxy .slot-edit-x { grid-column: 2; grid-row: 1; }
.kind-abxy .slot-edit-a { grid-column: 3; grid-row: 2; }
.kind-abxy .slot-edit-b { grid-column: 2; grid-row: 3; }
.kind-abxy .slot-edit-y { grid-column: 1; grid-row: 2; }

.poll-save-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.poll-save-row .btn-save-poll,
.poll-options-edit .btn-save-poll {
  width: auto;
  margin: 0;
  padding: 0.45rem 1rem;
  font-size: 0.55rem;
}

.poll-question-input {
  flex: 1;
  font-weight: 400;
}

.poll-card-actions {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  background: var(--surface);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
}

.btn-icon:hover {
  background: var(--primary);
  color: #fff;
}

.poll-options-edit {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  align-items: center;
}

.poll-options-input {
  flex: 1;
  font-size: 1rem;
}

.poll-options-edit .btn-secondary {
  width: auto;
  margin: 0;
  padding: 0.45rem 1rem;
  font-size: 0.55rem;
}

.add-poll-card {
  background: var(--surface);
  border: 3px dashed var(--ink);
  border-radius: 0;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.add-poll-card .btn-primary {
  margin-top: 0.25rem;
}

/* QR fallback URL — shown beneath the QR for the rare voter without a
   working phone camera. Smaller and more subdued than the QR itself. */
.qr-url-hint {
  margin-top: 0.4rem;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  color: var(--ink);
  opacity: 0.7;
  word-break: break-all;
}
.qr-url-hint.qr-url {
  margin-top: 0.1rem;
  opacity: 1;
}

/* Suggest poll */
.suggest-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  align-items: stretch;
}

.suggest-form input[type="text"] {
  flex: 1;
  margin: 0;
}

.suggest-form button[type="submit"] {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

.my-suggestions-heading {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.my-suggestions {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.my-suggestions li {
  background: var(--surface);
  border: 3px solid var(--ink);
  padding: 0.4rem 0.75rem;
  font-size: 1.1rem;
  box-shadow: var(--shadow-sm);
}

.admin-suggest-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 60vh;
  overflow-y: auto;
}

.admin-suggest-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  background: var(--surface);
  border: 2px solid var(--ink);
  padding: 0.3rem 0.6rem;
  font-size: 1rem;
}

.admin-suggest-text {
  flex: 1;
  word-break: break-word;
}

.admin-suggest-from {
  font-family: var(--font-pixel);
  font-size: 0.55rem;
  opacity: 0.6;
  flex-shrink: 0;
}

/* Auth screen */
.auth-card {
  text-align: center;
}

.auth-card h1 {
  font-size: 1.75rem;
  line-height: 1.5;
}

.google-signin-container {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.anon-link {
  background: none;
  border: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.1rem;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 1.25rem;
  padding: 0.5rem;
  cursor: pointer;
  box-shadow: none;
  text-decoration: underline;
}

.anon-link:hover {
  color: var(--primary);
  background: none;
  transform: none;
  box-shadow: none;
}

.anon-link:active {
  transform: none;
  box-shadow: none;
}

/* Back link on the login funnel screens (name / location) */
.back-link {
  align-self: flex-start;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.25rem 0;
  margin-bottom: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
}

.back-link:hover {
  color: var(--primary);
  background: none;
  transform: none;
  box-shadow: none;
}

.back-link:active {
  transform: none;
  box-shadow: none;
}

/* Location screen */
.location-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.loc-row {
  margin-bottom: 0.5rem;
}

.combobox {
  position: relative;
}

/* Leave room for the clear (×) button so long names don't run under it. */
.combobox-input {
  padding-right: 2.5rem;
}

.combobox-clear {
  position: absolute;
  top: 3px;
  right: 3px;
  bottom: 3px;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.combobox-clear:hover {
  color: var(--primary);
  background: none;
  transform: none;
  box-shadow: none;
}

.combobox-clear:active {
  transform: none;
  box-shadow: none;
}

.combobox-clear.hidden {
  display: none;
}

.combobox-list {
  position: absolute;
  top: calc(100% - 3px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 14rem;
  overflow-y: auto;
  background: var(--surface);
  border: 3px solid var(--ink);
  box-shadow: var(--shadow);
}

.combobox-option,
.combobox-note {
  padding: 0.5rem 0.75rem;
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.2;
}

.combobox-option {
  color: var(--ink);
  cursor: pointer;
}

.combobox-option.active,
.combobox-option:hover {
  background: var(--ink);
  color: var(--surface);
}

.combobox-note {
  color: var(--ink-soft);
  font-style: italic;
  cursor: default;
}

.venue-fieldset {
  border: 3px dashed var(--ink);
  padding: 0.75rem 1rem 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.venue-fieldset legend {
  font-family: var(--font-pixel);
  font-size: 0.65rem;
  text-transform: uppercase;
  padding: 0 0.4rem;
}

/* Utilities */
.hidden { display: none !important; }

/* Error banner */
.error-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--danger);
  color: #fff;
  padding: 0.75rem 1rem;
  text-align: center;
  font-family: var(--font-pixel);
  font-size: 0.7rem;
  text-transform: uppercase;
  border-bottom: 3px solid var(--ink);
  z-index: 200;
}

.subtle {
  color: var(--ink-soft);
  font-size: 1rem;
}

.error {
  color: var(--danger);
  text-align: center;
  padding: 2rem;
  font-family: var(--font-pixel);
  font-size: 0.8rem;
}

.pulse {
  animation: pulse 1.2s steps(2) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Responsive */
@media (max-width: 768px) {
  html, body { font-size: 18px; }
  .admin-layout, .manage-layout {
    flex-direction: column;
  }
  .admin-sidebar, .manage-sidebar {
    width: 100%;
  }
  .presenter-center h1 {
    font-size: 1.5rem;
  }
  .chart-label {
    width: 90px;
    font-size: 0.5rem;
  }
}

/* Phones around iPhone SE width (375px) don't have room for the default
   2rem view/card padding plus a 3×3 controller — the buttons end up so
   narrow that the labels collapse to 0 height inside the flex column.
   Tighten the surrounding chrome so the controller stays usable. */
@media (max-width: 480px) {
  .view { padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem; }
  .card { padding: 1.25rem; }
  .controller-dpad,
  .controller-abxy { gap: 6px; }
}

/* Below ~360px (older iPhones, Galaxy Fold etc.) buttons get small enough
   that the option label can't share space with the glyph and count. Drop
   the dynamic option text and rely on the static glyph (▲/A/etc.) — the
   chart below still shows label→count. */
@media (max-width: 360px) {
  .controller-label { display: none; }
}