/* ============================================================
   Ballstar — styles
   Aesthetic: thick charcoal outlines, sage green canvas,
   cream surfaces, flat colored balls.
   ============================================================ */

:root {
  --bg: #a8c8a0;
  --bg-deep: #93b88a;
  --highlight: #87b07b;
  --cream: #ebe2cf;
  --cream-2: #d8cdb6;
  --line: #3d3d3d;
  --line-soft: #3d3d3d;
  --shadow: rgba(40, 50, 40, 0.18);

  --c-red: #d94843;
  --c-blue: #5189c8;
  --c-yellow: #e8c046;
  --c-white: #fdfbf3;

  --r-card: 18px;
  --r-rack: 999px;
  --stroke: 3px;
  --stroke-thin: 2px;

  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 480ms;

  --ease: cubic-bezier(.2, .65, .25, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);

  --ball-size: clamp(34px, 9vw, 52px);
  --slot-size: clamp(38px, 10vw, 56px);
  --cell-size: clamp(48px, 14vw, 70px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--line);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overflow: hidden;
  overscroll-behavior: none;
}

#app {
  position: relative;
  width: 100%;
  height: 100dvh;
  max-width: 540px;
  margin: 0 auto;
  overflow: hidden;
}

/* ===== Screens ===== */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 22px 28px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.screen[data-active="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ============================================================
   Balls
   ============================================================ */
.ball {
  display: inline-block;
  width: var(--ball-size);
  height: var(--ball-size);
  border-radius: 50%;
  border: var(--stroke) solid var(--line);
  background: var(--cream);
  box-shadow: 0 2px 0 0 rgba(0,0,0,0.05);
  flex-shrink: 0;
  transition: transform var(--t-fast) var(--ease);
}
.ball--red    { background: var(--c-red); }
.ball--blue   { background: var(--c-blue); }
.ball--yellow { background: var(--c-yellow); }
.ball--white  { background: var(--c-white); }

/* small variant for headers/icons */
.curtain-icon .ball,
.logo-balls .ball {
  width: 28px;
  height: 28px;
  border-width: var(--stroke-thin);
}

/* ============================================================
   Loading screen
   ============================================================ */
.screen--loading {
  justify-content: center;
  gap: 24px;
}
.loading-balls {
  display: flex;
  gap: 14px;
}
.loading-balls .ball {
  animation: bounce 1s var(--ease) infinite;
}
.loading-balls .ball:nth-child(1) { animation-delay: 0ms; }
.loading-balls .ball:nth-child(2) { animation-delay: 120ms; }
.loading-balls .ball:nth-child(3) { animation-delay: 240ms; }
.loading-balls .ball:nth-child(4) { animation-delay: 360ms; }

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-18px); }
}

.loading-title {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 8px 0 0;
}
.loading-tag {
  margin: 0;
  opacity: 0.7;
  font-size: 16px;
}

/* ============================================================
   Main menu
   ============================================================ */
.screen--menu {
  justify-content: center;
  gap: 36px;
}
.menu-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.logo-balls {
  display: flex;
  gap: 8px;
  background: var(--cream);
  border: var(--stroke) solid var(--line);
  border-radius: var(--r-rack);
  padding: 10px 18px;
}
.menu-title {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.menu-sub {
  margin: 0;
  opacity: 0.75;
  font-size: 15px;
}

.menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 320px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  border: var(--stroke) solid var(--line);
  background: var(--cream);
  color: var(--line);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  box-shadow: 0 4px 0 0 var(--line);
  font-family: inherit;
}
.btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 var(--line);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: 0 2px 0 0 var(--line);
}
.btn--primary { background: #ffd86b; }
.btn--ghost   { background: var(--cream); }
.btn--text {
  background: transparent;
  border: none;
  box-shadow: none;
  font-weight: 600;
  opacity: 0.7;
}
.btn--text:active { transform: none; }
.btn-sub {
  font-size: 12px;
  opacity: 0.65;
  font-weight: 500;
  margin-left: 4px;
}

/* ============================================================
   Online lobby + modals
   ============================================================ */
.screen--online {
  justify-content: center;
  gap: 22px;
}
.online-name-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}
.online-name-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.online-name-header label {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.75;
}
.online-name-saved {
  font-size: 11px;
  font-weight: 700;
  color: #3a7d2a;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  pointer-events: none;
}
.online-name-saved::before { content: "✓ "; }
.online-name-saved[data-shown="true"] {
  opacity: 1;
  transform: translateY(0);
}
#online-name, #online-code {
  border: var(--stroke) solid var(--line);
  border-radius: 12px;
  background: var(--cream);
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--line);
  outline: none;
  width: 100%;
  box-shadow: 0 3px 0 0 var(--line);
}
#online-code {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  text-align: center;
  font-weight: 800;
}
.online-modes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 320px;
}

/* Modal variant for online actions: stack content with breathing room */
.modal-card--online {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.modal-card--online h3 { margin: 0; }
.modal-card--online .modal-sub {
  margin: 0;
  font-size: 14px;
  opacity: 0.7;
}
.modal-card--online .btn { width: 100%; }
.modal-error {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--c-red);
}

/* Animated waiting strip used in the create + queue modals */
.online-waiting {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  opacity: 0.85;
  margin: 4px 0;
}
.online-spinner {
  display: inline-flex;
  gap: 6px;
}
.online-spinner span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
  opacity: 0.5;
  animation: spinner-bounce 1s var(--ease) infinite;
}
.online-spinner span:nth-child(1) { background: var(--c-red); animation-delay: 0ms; }
.online-spinner span:nth-child(2) { background: var(--c-blue); animation-delay: 120ms; }
.online-spinner span:nth-child(3) { background: var(--c-yellow); animation-delay: 240ms; }
.online-spinner span:nth-child(4) { background: var(--c-white); border: 1px solid var(--line); animation-delay: 360ms; }
@keyframes spinner-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(-8px); opacity: 1; }
}

/* Room code (big yellow chip) */
.online-room-code {
  display: inline-block;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 0.18em;
  background: #ffd86b;
  border: var(--stroke) solid var(--line);
  border-radius: 16px;
  padding: 16px 22px;
  box-shadow: 0 4px 0 0 var(--line);
  user-select: all;
  -webkit-user-select: all;
}

/* Top-left back arrow used on screens like setup */
.screen-back {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
}

/* ============================================================
   Game options
   ============================================================ */
.screen--options {
  justify-content: center;
  gap: 24px;
}
.options-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 320px;
}
.option-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.option-label {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.75;
}
.option-segmented {
  display: flex;
  gap: 0;
  background: var(--cream);
  border: var(--stroke) solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 0 0 var(--line);
}
.option-segmented .seg {
  flex: 1;
  background: transparent;
  border: none;
  padding: 11px 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--line);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.option-segmented .seg + .seg {
  border-left: var(--stroke-thin) solid var(--line);
}
.option-segmented .seg:hover { background: rgba(0,0,0,0.04); }
.option-segmented .seg[data-active="true"] {
  background: #ffd86b;
}
.option-segmented .seg[data-active="true"]:hover { background: #ffd86b; }

/* ============================================================
   Difficulty picker
   ============================================================ */
.screen--difficulty {
  justify-content: center;
  gap: 24px;
}
.diff-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 320px;
}
.diff-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px 18px;
  background: var(--cream);
  border: var(--stroke) solid var(--line);
  border-radius: 14px;
  box-shadow: 0 4px 0 0 var(--line);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.diff-btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 var(--line);
}
.diff-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: 0 2px 0 0 var(--line);
}
.diff-btn .diff-name {
  font-size: 16px;
  font-weight: 800;
}
.diff-btn .diff-blurb {
  font-size: 13px;
  opacity: 0.7;
}
.diff-btn .diff-soon {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: var(--line);
  color: var(--cream);
  padding: 2px 6px;
  border-radius: 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ============================================================
   Curtain (pass device)
   ============================================================ */
.screen--curtain {
  justify-content: center;
  background: var(--bg);
}
.curtain-card {
  background: var(--cream);
  border: var(--stroke) solid var(--line);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 320px;
  box-shadow: 0 6px 0 0 var(--line);
  animation: pop var(--t-slow) var(--bounce);
}
@keyframes pop {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.curtain-icon {
  display: flex;
  gap: 6px;
}
.curtain-title {
  margin: 0;
  font-size: 22px;
}
.curtain-sub {
  margin: 0;
  opacity: 0.75;
  font-size: 14px;
}

/* ============================================================
   Setup screen
   ============================================================ */
.screen--setup {
  justify-content: center;
  gap: 28px;
}
.setup-header {
  text-align: center;
}
.setup-title {
  margin: 0 0 6px;
  font-size: 22px;
}
.setup-sub {
  margin: 0;
  opacity: 0.75;
  font-size: 14px;
}

.setup-rack {
  display: flex;
  gap: 10px;
  background: var(--cream);
  border: var(--stroke) solid var(--line);
  border-radius: var(--r-rack);
  padding: 12px 18px;
  min-height: calc(var(--slot-size) + 24px);
}

.setup-pool {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  border: var(--stroke-thin) dashed var(--line);
  border-radius: 16px;
  background: rgba(255,255,255,0.18);
  max-width: 320px;
}
.setup-pool .pool-ball {
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast);
}
.setup-pool .pool-ball:active { transform: scale(0.92); }
.setup-pool .pool-ball[data-used="true"] {
  opacity: 0.25;
  pointer-events: none;
  transform: scale(0.85);
}

.setup-actions {
  display: flex;
  gap: 12px;
}

/* ============================================================
   Rack slots (used in opp-rack, self-rack, setup-rack, end-secret)
   ============================================================ */
.rack-slot {
  display: inline-block;
  width: var(--slot-size);
  height: var(--slot-size);
  border-radius: 50%;
  border: var(--stroke) solid var(--line);
  background: var(--cream-2);
  flex-shrink: 0;
  transition: background var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.rack-slot--filled-red    { background: var(--c-red); }
.rack-slot--filled-blue   { background: var(--c-blue); }
.rack-slot--filled-yellow { background: var(--c-yellow); }
.rack-slot--filled-white  { background: var(--c-white); }

/* dashed/hidden style */
.rack-slot--hidden {
  border-style: dashed;
  background: var(--cream-2);
  opacity: 0.6;
  border-width: var(--stroke-thin);
}

/* ============================================================
   Game screen
   ============================================================ */
.screen--game {
  justify-content: flex-start;
  gap: 14px;
  padding-top: 14px;
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 6px;
}

.icon-btn {
  width: 36px;
  height: 36px;
  border: var(--stroke-thin) solid var(--line);
  border-radius: 50%;
  background: var(--cream);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.turn-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cream);
  border: var(--stroke-thin) solid var(--line);
  border-radius: var(--r-rack);
  padding: 6px 14px;
  font-weight: 700;
  font-size: 14px;
  transition: background var(--t-base) var(--ease);
}
.turn-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--c-red);
  transition: background var(--t-base) var(--ease);
}
.turn-indicator[data-turn="1"] .turn-dot { background: var(--c-blue); }

/* Opponent rack (hidden, dashed) */
.opp-rack {
  display: flex;
  gap: 8px;
  background: var(--cream);
  border: var(--stroke-thin) dashed var(--line);
  border-radius: var(--r-rack);
  padding: 7px 14px;
  margin-bottom: 4px;
  /* Auto margin pairs with self-bar's margin-bottom: auto to vertically
     center the (opp-rack, grid, self-bar) group below the header. */
  margin-top: auto;
}

/* Smaller in-game rack slots so the rack fits comfortably inside the grid
   width without crowding the eye icon. (Setup rack stays full-size.) */
.opp-rack .rack-slot,
.self-rack .rack-slot {
  width: clamp(26px, 6vw, 36px);
  height: clamp(26px, 6vw, 36px);
}

/* Self-rack (your own secret), mirrors opp-rack visually */
.self-rack {
  display: flex;
  gap: 8px;
  background: var(--cream);
  border: var(--stroke-thin) dashed var(--line);
  border-radius: var(--r-rack);
  padding: 7px 14px;
}
.self-rack .rack-slot {
  border-style: solid;
  border-width: var(--stroke);
  transition:
    background var(--t-base) var(--ease),
    border-style 0ms linear var(--t-base),
    opacity var(--t-base) var(--ease);
}
/* Hidden state: slots collapse to dashed empty look (same as opp-rack slots) */
.self-rack[data-hidden="true"] .rack-slot {
  background: var(--cream-2) !important;
  border-style: dashed;
  border-width: var(--stroke-thin);
  opacity: 0.6;
  transition:
    background var(--t-base) var(--ease),
    opacity var(--t-base) var(--ease);
}

/* Grid (size driven by --grid-size set on .screen--game from JS) */
.screen--game { --grid-size: 5; }

.grid-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 6px 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-size), var(--cell-size));
  grid-template-rows: repeat(var(--grid-size), var(--cell-size));
  background: var(--cream);
  border: var(--stroke) solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 0 0 var(--line);
}
.cell {
  position: relative;
  border-right: var(--stroke-thin) solid var(--line);
  border-bottom: var(--stroke-thin) solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--t-base) var(--ease);
}
/* Drop the right border on the rightmost column and the bottom border on the
   bottom row regardless of grid size. JS marks these via data-attrs. */
.cell[data-edge-right] { border-right: none; }
.cell[data-edge-bottom] { border-bottom: none; }

.cell[data-disabled="true"] {
  cursor: default;
}
.cell.cell--win {
  background: var(--highlight);
  animation: winPulse 1.2s var(--ease) infinite;
}
@keyframes winPulse {
  0%, 100% { background: var(--highlight); }
  50%      { background: #6ea65f; }
}

.cell .ball {
  width: calc(var(--cell-size) - 14px);
  height: calc(var(--cell-size) - 14px);
  border-width: var(--stroke-thin);
}
.cell .ball--drop {
  animation: drop var(--t-slow) var(--bounce);
}
@keyframes drop {
  0%   { transform: translateY(-30px) scale(0.6); opacity: 0; }
  60%  { transform: translateY(2px) scale(1.05); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Picker tooltip */
.picker {
  position: absolute;
  display: flex;
  gap: 6px;
  background: var(--cream);
  border: var(--stroke) solid var(--line);
  border-radius: var(--r-rack);
  padding: 8px 12px;
  z-index: 10;
  animation: popIn var(--t-base) var(--bounce);
  box-shadow: 0 4px 0 0 var(--line);
}
@keyframes popIn {
  0%   { transform: scale(0.6) translateY(8px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.picker[hidden] { display: none; }
.picker-ball {
  position: relative;
  border: var(--stroke-thin) solid var(--line);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  width: 32px;
  height: 32px;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.picker-ball:active:not(:disabled) { transform: scale(0.9); }
.picker-ball:disabled {
  cursor: not-allowed;
  opacity: 0.25;
  filter: grayscale(0.5);
}
.picker-ball::after {
  content: attr(data-count);
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 700;
  color: var(--line);
  opacity: 0.85;
  font-family: inherit;
  pointer-events: none;
}
/* breathing room for the count badge */
.picker { padding-bottom: 22px; }
.picker-arrow {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: var(--cream);
  border-right: var(--stroke) solid var(--line);
  border-bottom: var(--stroke) solid var(--line);
}
.picker[data-flip="true"] .picker-arrow {
  bottom: auto;
  top: -10px;
  border-right: none;
  border-bottom: none;
  border-left: var(--stroke) solid var(--line);
  border-top: var(--stroke) solid var(--line);
}

/* Bottom bar: self-rack + eye.
   The rack is truly centered in the bar; the eye floats absolutely on the right
   so it doesn't push the rack off-center. The bar matches the grid's width
   (5 cells + outer borders) so the eye sits just inside the right grid edge. */
.self-bar {
  position: relative;
  width: 100%;
  max-width: calc(var(--grid-size, 5) * var(--cell-size) + 2 * var(--stroke));
  display: flex;
  align-items: center;
  justify-content: center;
  /* Pair with .opp-rack margin-top: auto to center the play area vertically. */
  margin-bottom: auto;
  padding-top: 12px;
}
.self-bar .eye-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.legend-icon {
  background: transparent;
  border: none;
  color: var(--line);
  font-size: 22px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.55;
  padding: 4px;
  flex-shrink: 0;
}

/* Animated open/closed eye */
.eye-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: transparent;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--line);
  flex-shrink: 0;
  opacity: 0.7;
  transition: opacity var(--t-fast) var(--ease);
  font-family: inherit;
}
.eye-btn:hover:not(:disabled) { opacity: 1; }
.eye-btn:active:not(:disabled) .eye-icon { transform: scale(0.92); }
.eye-btn:disabled { opacity: 0.32; cursor: not-allowed; }
.eye-icon { transition: transform var(--t-fast) var(--ease); }
.peek-count {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-top: -1px;
  opacity: 0.75;
}
.eye-btn:disabled .peek-count {
  text-decoration: line-through;
  opacity: 0.6;
}
.eye-open,
.eye-closed,
.eye-lashes {
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--bounce);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.eye-lashes {
  stroke-width: 1.6;
  opacity: 0;
}
/* aria-pressed=true → eye is OPEN (rack visible) */
.eye-btn[aria-pressed="true"]  .eye-closed,
.eye-btn[aria-pressed="true"]  .eye-lashes { opacity: 0; transform: scaleY(0.6); }
.eye-btn[aria-pressed="true"]  .eye-open   { opacity: 1; transform: scaleY(1); }

/* aria-pressed=false → eye is CLOSED (rack hidden) */
.eye-btn[aria-pressed="false"] .eye-open   { opacity: 0; transform: scaleY(0.4); }
.eye-btn[aria-pressed="false"] .eye-closed { opacity: 1; transform: scaleY(1); }
.eye-btn[aria-pressed="false"] .eye-lashes { opacity: 0.7; transform: scaleY(1) translateY(-1px); }

/* ============================================================
   End screen
   ============================================================ */
.screen--end {
  justify-content: center;
  background: var(--bg);
}
.end-card {
  background: var(--cream);
  border: var(--stroke) solid var(--line);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 6px 0 0 var(--line);
  animation: pop var(--t-slow) var(--bounce);
  position: relative;
  z-index: 60;        /* above the fixed confetti canvas */
}
.end-title {
  font-size: 26px;
  margin: 0 0 4px;
}
.end-sub {
  margin: 0 0 18px;
  opacity: 0.75;
  font-size: 14px;
}
.end-secrets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.end-secret {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255,255,255,0.4);
  padding: 8px 12px;
  border-radius: 12px;
}
.end-secret-label {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.7;
}
.end-secret-row {
  display: flex;
  gap: 4px;
}
.end-secret-row .rack-slot {
  width: 26px;
  height: 26px;
  border-width: var(--stroke-thin);
}
.end-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.end-rematch-note {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: #3a7d2a;
}
#confetti {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  pointer-events: none;
  z-index: 50;
}

/* ============================================================
   Modal
   ============================================================ */
.modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
  animation: fadeIn var(--t-base);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal[hidden] { display: none; }
.modal-card {
  background: var(--cream);
  border: var(--stroke) solid var(--line);
  border-radius: 16px;
  padding: 22px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 6px 0 0 var(--line);
}
.modal-card h3 { margin: 0 0 12px; }
.modal-card ul {
  margin: 0 0 18px;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
}
.modal-card li { margin-bottom: 6px; }

/* ============================================================
   Misc
   ============================================================ */
@media (max-height: 640px) {
  :root {
    --cell-size: clamp(42px, 12vw, 60px);
    --slot-size: clamp(34px, 9vw, 50px);
  }
  .menu-title, .loading-title { font-size: 32px; }
}