/* Global theme tokens and the layout scale used to shrink the desktop design. */
:root {
  --layout-scale: 1;
  --viewport-height: 100dvh;
  --browser-bottom-inset: 0px;
  --paper: #f6f0e4;
  --paper-deep: #efe6d2;
  --paper-line: rgba(25, 25, 25, 0.1);
  --ink: #171717;
  --ink-soft: #57534a;
  --accent: #b65b3a;
  --accent-soft: rgba(182, 91, 58, 0.12);
  --good: #6f9f7d;
  --good-soft: rgba(111, 159, 125, 0.14);
  --shadow: 0 20px 40px rgba(30, 24, 18, 0.08);
  --radius-card: 24px;
  --radius-pill: 999px;
  --tile-width: min(76vw, calc(370px * var(--layout-scale)));
  --tile-half-width: min(38vw, calc(185px * var(--layout-scale)));
  --tile-height: calc(90px * var(--layout-scale));
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  background: #f6f6f6;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}

body::before {
  display: none;
}

button {
  font: inherit;
}

body.is-dragging,
body.is-dragging * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* Outer app frame. The game view uses viewport-aware bottom padding for mobile browser chrome. */
.app-shell {
  width: min(100%, 900px);
  min-width: 0;
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top, 0px) + 12px * var(--layout-scale))
    clamp(16px, 4vw, 40px)
    calc(env(safe-area-inset-bottom, 0px) + 14px * var(--layout-scale));
  position: relative;
}

.app-shell,
.app-shell * {
  user-select: none;
  -webkit-user-select: none;
}

.app-shell.is-game-view {
  min-height: var(--viewport-height);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--browser-bottom-inset));
}

.screen {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: calc(6px * var(--layout-scale));
  justify-items: center;
  padding-top: clamp(calc(12px * var(--layout-scale)), 3.5vh, calc(30px * var(--layout-scale)));
}

.home-screen {
  min-height: calc(100vh - calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 52px * var(--layout-scale)));
  align-content: center;
  gap: calc(28px * var(--layout-scale));
  padding-top: 0;
  padding-bottom: clamp(calc(18px * var(--layout-scale)), 6vh, calc(42px * var(--layout-scale)));
}

.home-brand {
  display: grid;
  gap: calc(12px * var(--layout-scale));
  justify-items: center;
  text-align: center;
}

.archive-screen {
  min-height: calc(100vh - calc(env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 52px * var(--layout-scale)));
  align-content: start;
  gap: calc(18px * var(--layout-scale));
  padding-top: clamp(calc(8px * var(--layout-scale)), 2vh, calc(16px * var(--layout-scale)));
  padding-bottom: clamp(calc(18px * var(--layout-scale)), 6vh, calc(42px * var(--layout-scale)));
}

.archive-topbar {
  width: min(100%, calc(640px * var(--layout-scale)));
  display: grid;
  grid-template-columns: calc(30px * var(--layout-scale)) 1fr calc(30px * var(--layout-scale));
  align-items: start;
}

.archive-back-button {
  justify-self: start;
}

.archive-brand {
  gap: calc(8px * var(--layout-scale));
}

.archive-title {
  font-size: clamp(2.4rem, 11vw, 4rem);
}

.home-kicker {
  margin: 0;
  color: rgba(23, 23, 23, 0.48);
  font-size: calc(0.88rem * var(--layout-scale));
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Shared QUANT wordmark used on both the landing page and the in-game header. */
.home-title {
  margin: 0;
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: clamp(3.5rem, 15vw, 5.9rem);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.04em;
  user-select: none;
  -webkit-user-select: none;
}

.home-title-mark {
  --mark-color: var(--ink);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(8px * var(--layout-scale));
  color: var(--mark-color);
  user-select: none;
  -webkit-user-select: none;
}

.home-title-mark.bar-bottom {
  flex-direction: column-reverse;
}

.home-title-mark.slot-hue-0 {
  --mark-color: #d9a7e8;
}

.home-title-mark.slot-hue-1 {
  --mark-color: #efbe82;
}

.home-title-mark.slot-hue-2 {
  --mark-color: #9ebce8;
}

.home-title-mark.slot-hue-3 {
  --mark-color: #a9d1af;
}

.home-title-mark.slot-hue-4 {
  --mark-color: #ecd77f;
}

.home-title-letter {
  display: block;
  color: var(--ink);
}

.home-title-bar {
  display: block;
  width: 0.72em;
  height: calc(4px * var(--layout-scale));
  border-radius: 999px;
  background: var(--mark-color);
}

.home-subtitle {
  margin: 0;
  color: rgba(23, 23, 23, 0.7);
  font-size: calc(1.02rem * var(--layout-scale));
  font-weight: 500;
}

.home-options {
  width: min(100%, calc(420px * var(--layout-scale)));
  display: grid;
  gap: calc(16px * var(--layout-scale));
  position: relative;
  overflow: visible;
}

.home-footer {
  width: min(100%, calc(420px * var(--layout-scale)));
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: calc(14px * var(--layout-scale));
  align-items: end;
  text-align: left;
}

.home-footer-meta {
  margin: 0;
  color: rgba(23, 23, 23, 0.7);
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(0.86rem * var(--layout-scale));
  font-weight: 500;
  line-height: 1.22;
}

.home-footer-date {
  justify-self: start;
  text-align: left;
  font-weight: 700;
}

.home-footer-name {
  justify-self: end;
  align-self: center;
  text-align: right;
  letter-spacing: 0.02em;
}

.home-footer-name span {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.game-screen {
  position: relative;
  padding-top: calc(45px * var(--layout-scale));
}

.game-fade-zone {
  width: 100%;
  display: grid;
  gap: calc(6px * var(--layout-scale));
  justify-items: center;
  transition:
    opacity 280ms cubic-bezier(0.2, 0.84, 0.24, 1),
    transform 280ms cubic-bezier(0.2, 0.84, 0.24, 1);
  transform-origin: top center;
}

.game-screen.is-help-open .game-fade-zone {
  opacity: 0;
  transform: translateY(calc(10px * var(--layout-scale))) scale(0.988);
  pointer-events: none;
}

/* Compact top row used only on the game screen. */
.game-header {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, calc(var(--tile-width) + (8px * var(--layout-scale))));
  min-width: 0;
  display: grid;
  grid-template-columns: calc(30px * var(--layout-scale)) 1fr calc(30px * var(--layout-scale));
  align-items: center;
  gap: calc(8px * var(--layout-scale));
  z-index: 40;
}

.game-wordmark {
  margin: 0;
  font-size: clamp(1.2rem, 5.2vw, 1.78rem);
  line-height: 0.84;
  gap: 0.02em;
  user-select: none;
  -webkit-user-select: none;
}

.game-wordmark-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(7px * var(--layout-scale));
  justify-self: center;
  transform: translateX(calc(2px * var(--layout-scale)));
  user-select: none;
  -webkit-user-select: none;
}

.game-wordmark-wrap .game-wordmark {
  flex: 0 0 auto;
}

.game-wordmark-sports {
  margin-right: calc(-1px * var(--layout-scale));
}

.game-wordmark-suffix {
  display: inline-block;
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: calc(0.9rem * var(--layout-scale));
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink);
  transform: translateY(calc(2px * var(--layout-scale)));
}

.logo-secret-number.is-sports-emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: calc(1rem * var(--layout-scale));
  letter-spacing: 0;
  text-shadow: none;
}

.game-wordmark .home-title-mark {
  gap: calc(3px * var(--layout-scale));
}

.game-wordmark .home-title-bar {
  width: 0.5em;
  height: calc(2px * var(--layout-scale));
}

.game-header-button {
  --game-header-shift-x: 0px;
  width: calc(30px * var(--layout-scale));
  height: calc(30px * var(--layout-scale));
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transform: translateX(var(--game-header-shift-x));
  transition: transform 180ms ease, opacity 180ms ease;
}

.game-header-button:hover:not(:disabled),
.game-header-button:focus-visible:not(:disabled) {
  transform: translateX(var(--game-header-shift-x)) translateY(-1px);
}

.game-header-button:disabled {
  opacity: 0.42;
  cursor: default;
}

.game-header-back:disabled {
  opacity: 1;
  color: var(--ink);
  cursor: default;
}

.game-header-help {
  --game-header-shift-x: calc(-4px * var(--layout-scale));
}

.game-header-help .game-header-icon {
  width: calc(24px * var(--layout-scale));
  height: calc(24px * var(--layout-scale));
}

.game-header-help.is-open {
  opacity: 1;
  color: var(--ink);
}

.game-header-icon {
  display: inline-grid;
  place-items: center;
  width: calc(22px * var(--layout-scale));
  height: calc(22px * var(--layout-scale));
  overflow: visible;
}

.game-header-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.logo-secret-number {
  position: fixed;
  z-index: 2450;
  pointer-events: none;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: calc(1.1rem * var(--layout-scale));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58);
  user-select: none;
  -webkit-user-select: none;
}

.logo-secret-number.is-jackpot {
  background: linear-gradient(180deg, #fff6a9 0%, #f7d86d 35%, #d7a62a 72%, #b98211 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 0 10px rgba(241, 199, 63, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.52);
  filter: drop-shadow(0 1px 1px rgba(120, 82, 8, 0.18));
}

.home-card {
  display: grid;
  gap: calc(14px * var(--layout-scale));
  padding: calc(18px * var(--layout-scale));
  position: relative;
  z-index: 2;
  border-radius: calc(26px * var(--layout-scale));
  background: #fffdf8;
  border: 1px solid #171717;
  box-shadow: calc(-6px * var(--layout-scale)) calc(5px * var(--layout-scale)) 0 #171717;
}

.home-launch-panel {
  gap: 0;
  padding:
    calc(10px * var(--layout-scale))
    calc(18px * var(--layout-scale));
}

.home-launch-item {
  display: grid;
  gap: calc(14px * var(--layout-scale));
  padding: calc(14px * var(--layout-scale)) 0;
}

.home-launch-item:first-child {
  padding-top: calc(8px * var(--layout-scale));
}

.home-launch-item:last-child {
  padding-bottom: calc(8px * var(--layout-scale));
}

.home-launch-item + .home-launch-item {
  border-top: 1px solid rgba(23, 23, 23, 0.12);
}

.home-archive-button {
  width: 100%;
}

.home-card-copy {
  display: grid;
  gap: calc(6px * var(--layout-scale));
}

.home-card-title {
  margin: 0;
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: calc(1.36rem * var(--layout-scale));
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.home-card-description {
  margin: 0;
  color: rgba(23, 23, 23, 0.64);
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(0.78rem * var(--layout-scale));
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.28;
  text-transform: uppercase;
}

.home-sports-select-wrap {
  position: relative;
  display: grid;
  gap: 0;
}

.home-sports-select-wrap::after,
.archive-sports-select-wrap::after,
.results-sports-select-wrap::after {
  content: "";
  position: absolute;
  right: calc(16px * var(--layout-scale));
  top: 50%;
  width: calc(8px * var(--layout-scale));
  height: calc(8px * var(--layout-scale));
  border-right: 2px solid rgba(23, 23, 23, 0.76);
  border-bottom: 2px solid rgba(23, 23, 23, 0.76);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none;
}

.home-sports-select,
.archive-sports-select,
.results-sports-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: calc(42px * var(--layout-scale));
  padding: 0 calc(34px * var(--layout-scale)) 0 calc(12px * var(--layout-scale));
  border: 1px solid #171717;
  border-radius: calc(14px * var(--layout-scale));
  background: #ffffff;
  color: var(--ink);
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: calc(0.94rem * var(--layout-scale));
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.home-sports-select {
  min-height: calc(58px * var(--layout-scale));
  border-width: 3px;
  border-radius: calc(24px * var(--layout-scale));
  background: #171717;
  color: #ffffff;
  letter-spacing: 0.05em;
  text-align: center;
  text-align-last: center;
  text-transform: uppercase;
  transition:
    transform 180ms ease,
    background 180ms ease,
    color 180ms ease;
}

.home-sports-select-wrap::after {
  right: calc(18px * var(--layout-scale));
  border-color: #ffffff;
}

.home-sports-select:hover,
.home-sports-select:focus-visible {
  transform: translateY(-1px);
}

.home-sports-select option,
.archive-sports-select option,
.results-sports-select option {
  background: #ffffff;
  color: #171717;
}

.action-button.primary.home-play-button {
  width: 100%;
  border-width: 3px;
  background: #171717;
  color: #ffffff;
}

.action-button.primary.home-play-button:hover:not(:disabled),
.action-button.primary.home-play-button:focus-visible:not(:disabled) {
  background: #171717;
  color: #ffffff;
}

.archive-panel {
  width: min(100%, calc(520px * var(--layout-scale)));
  display: grid;
  gap: calc(16px * var(--layout-scale));
  padding: calc(18px * var(--layout-scale));
  border-radius: calc(26px * var(--layout-scale));
  background: #fffdf8;
  border: 1px solid #171717;
  box-shadow: calc(-6px * var(--layout-scale)) calc(5px * var(--layout-scale)) 0 #171717;
}

.archive-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: calc(10px * var(--layout-scale));
}

.archive-mode-button {
  min-height: calc(42px * var(--layout-scale));
  padding: calc(10px * var(--layout-scale)) calc(12px * var(--layout-scale));
  border: 1px solid #171717;
  border-radius: calc(16px * var(--layout-scale));
  background: #ffffff;
  color: var(--ink);
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: calc(0.92rem * var(--layout-scale));
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.archive-mode-button.is-active {
  background: #171717;
  color: #ffffff;
}

.archive-mode-button:hover,
.archive-mode-button:focus-visible {
  transform: translateY(-1px);
}

.archive-sports-group {
  display: grid;
  gap: calc(5px * var(--layout-scale));
}

.archive-sports-heading {
  display: block;
  color: rgba(23, 23, 23, 0.68);
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: calc(0.66rem * var(--layout-scale));
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.archive-sports-select-wrap {
  position: relative;
  display: block;
  min-height: calc(42px * var(--layout-scale));
  padding: 0;
  border: 1px solid #171717;
  border-radius: calc(16px * var(--layout-scale));
  background: #ffffff;
  color: var(--ink);
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.archive-sports-select-wrap.is-active {
  background: #171717;
  color: #ffffff;
}

.archive-sports-select-wrap.is-active::after {
  border-color: #ffffff;
}

.archive-sports-select-wrap:hover,
.archive-sports-select-wrap:focus-within {
  transform: translateY(-1px);
}

.archive-sports-select {
  width: 100%;
  min-height: calc(42px * var(--layout-scale));
  padding:
    0
    calc(34px * var(--layout-scale))
    0
    calc(16px * var(--layout-scale));
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font-size: calc(0.9rem * var(--layout-scale));
  letter-spacing: 0.04em;
  text-align: center;
  text-align-last: center;
  text-transform: uppercase;
}

.archive-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(12px * var(--layout-scale));
}

.archive-select-wrap {
  position: relative;
  display: grid;
  gap: calc(6px * var(--layout-scale));
}

.archive-select-wrap::after {
  content: "";
  position: absolute;
  right: calc(18px * var(--layout-scale));
  bottom: calc(16px * var(--layout-scale));
  width: calc(9px * var(--layout-scale));
  height: calc(9px * var(--layout-scale));
  border-right: 2px solid rgba(23, 23, 23, 0.76);
  border-bottom: 2px solid rgba(23, 23, 23, 0.76);
  transform: rotate(45deg);
  pointer-events: none;
}

.archive-select-label {
  color: rgba(23, 23, 23, 0.58);
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(0.7rem * var(--layout-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.archive-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: calc(42px * var(--layout-scale));
  padding: 0 calc(34px * var(--layout-scale)) 0 calc(12px * var(--layout-scale));
  border: 1px solid #171717;
  border-radius: calc(14px * var(--layout-scale));
  background: #ffffff;
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(0.94rem * var(--layout-scale));
  cursor: pointer;
}

.archive-calendar {
  display: grid;
  gap: calc(12px * var(--layout-scale));
}

.archive-weekdays,
.archive-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.archive-weekdays {
  gap: calc(6px * var(--layout-scale));
  color: rgba(23, 23, 23, 0.54);
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(0.7rem * var(--layout-scale));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.archive-grid {
  gap: calc(6px * var(--layout-scale));
}

.archive-day {
  min-height: calc(54px * var(--layout-scale));
  display: grid;
  place-items: center;
  border-radius: calc(16px * var(--layout-scale));
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(23, 23, 23, 0.12);
  color: rgba(23, 23, 23, 0.4);
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}

.archive-day.is-empty {
  background: transparent;
  border-color: transparent;
}

.archive-day.is-available {
  background: #ffffff;
  border-color: #171717;
  color: var(--ink);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.archive-day.is-available:hover,
.archive-day.is-available:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(30, 24, 18, 0.08);
}

.archive-day-number {
  font-size: calc(1rem * var(--layout-scale));
  font-weight: 700;
  line-height: 1;
}

.archive-day-check {
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(1.22rem * var(--layout-scale));
  font-weight: 700;
  line-height: 1;
}

.archive-day-check.slot-hue-0 {
  color: #d9a7e8;
}

.archive-day-check.slot-hue-1 {
  color: #efbe82;
}

.archive-day-check.slot-hue-2 {
  color: #9ebce8;
}

.archive-day-check.slot-hue-3 {
  color: #a9d1af;
}

.archive-day-check.slot-hue-4 {
  color: #ecd77f;
}

.topbar {
  display: block;
  width: 100%;
  max-width: 640px;
  min-width: 0;
  text-align: center;
}

.brand-kicker {
  display: none;
}

.brand-title {
  margin: 0;
  font-size: clamp(3.2rem, 11vw, 5.8rem);
  line-height: 0.9;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.panel {
  min-width: 0;
  border-radius: 28px;
  border: 1px solid var(--paper-line);
  background: rgba(255, 255, 255, 0.44);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.board-panel {
  width: var(--tile-width);
  max-width: var(--tile-width);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.board-panel.has-results-overlay {
  position: relative;
  z-index: 80;
}

.board-panel.has-results-overlay .rank-list {
  filter: none;
  opacity: 0;
  pointer-events: none;
  transition:
    filter 220ms ease,
    opacity 220ms ease;
}

.board-labels {
  margin-bottom: 14px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.board-label-bottom {
  margin-top: 14px;
}

.rank-list {
  --rank-gap: calc(7px * var(--layout-scale));
  --slot-connector-color: rgba(23, 23, 23, 0.16);
  display: grid;
  position: relative;
  gap: var(--rank-gap);
  height: calc(var(--tile-height) * 5 + var(--rank-gap) * 4);
  max-height: calc(var(--tile-height) * 5 + var(--rank-gap) * 4);
  grid-template-rows: repeat(5, var(--tile-height));
  overflow: visible;
}

.rank-list::before,
.rank-list::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--slot-connector-color);
  pointer-events: none;
  z-index: -1;
}

.rank-list::before {
  left: calc(33.333% - 0.5px);
}

.rank-list::after {
  left: calc(66.666% - 0.5px);
}

.rank-list:has(.rank-slot:nth-child(5).is-final-wave-active)::before,
.rank-list:has(.rank-slot:nth-child(5).is-final-wave-active)::after {
  opacity: 0;
}

.rank-slot {
  --slot-depth-color: #d9d6cf;
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding: 0;
  border-radius: calc(18px * var(--layout-scale));
  border: 0;
  outline: 1px solid rgba(23, 23, 23, 0.16);
  outline-offset: -1px;
  background: #ffffff;
  box-shadow: calc(-5px * var(--layout-scale)) calc(4px * var(--layout-scale)) 0 var(--slot-depth-color);
  contain: layout size;
  isolation: isolate;
  transition:
    transform 180ms ease,
    outline-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease;
}

.rank-slot.is-filled {
  outline-color: transparent;
  background: #ffffff;
}

.rank-slot.is-drag-origin,
.rank-slot.is-filled.is-drag-origin,
.rank-slot.is-filled:has(.rank-card.dragging-origin),
.rank-slot.is-filled:has(.rank-card.is-being-replaced) {
  outline-color: rgba(23, 23, 23, 0.16);
  background: #ffffff;
}

.rank-slot.is-shift-animating {
  z-index: 24;
}

.rank-slot.is-returning-source {
  outline-color: rgba(23, 23, 23, 0.16);
  background: #ffffff;
}

.rank-slot.is-locked,
.rank-slot.is-submit-confirmed {
  outline-color: rgba(23, 23, 23, 0.16);
  background: #ffffff;
  --slot-depth-color: #d9d6cf;
}

.rank-slot.is-submit-revealing .slot-placeholder {
  visibility: hidden;
}

.rank-slot.is-final-wave-active {
  z-index: 36;
}

.rank-slot.drop-target,
.rank-slot.is-drag-origin.drop-target,
.rank-slot.is-filled.drop-target,
.rank-slot.is-filled.is-drag-origin.drop-target,
.rank-slot.is-returning-source.drop-target,
.rank-slot.is-filled:has(.rank-card.dragging-origin).drop-target,
.rank-slot.is-filled:has(.rank-card.is-being-replaced).drop-target {
  outline-color: #9fc7e8;
  background: #ffffff;
  --slot-depth-color: #dbe7f1;
}

.slot-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.06em;
  padding: 0 calc(20px * var(--layout-scale));
  color: rgba(23, 23, 23, 0.42);
  text-align: center;
  font-size: calc(0.88rem * var(--layout-scale));
  line-height: 1.02;
  font-family: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

.slot-placeholder.is-blank {
  display: none;
}

.slot-placeholder span {
  display: block;
}

.fact-card {
  width: 100%;
  height: var(--tile-height);
  max-height: var(--tile-height);
  border: 0;
  border-radius: calc(18px * var(--layout-scale));
  background: #fffdf8;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  box-shadow: 0 10px 24px rgba(30, 24, 18, 0.08);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.rank-card {
  position: relative;
  z-index: 1;
  height: var(--tile-height);
  max-height: var(--tile-height);
  min-height: 0;
  overflow: visible;
  padding: calc(12px * var(--layout-scale)) calc(14px * var(--layout-scale));
  text-align: left;
  touch-action: none;
  cursor: grab;
  box-shadow: none;
}

.rank-card,
.rank-card * {
  cursor: inherit;
}

.rank-card.is-shifting {
  z-index: 24;
}

.rank-card.is-locked,
.rank-card.is-submit-confirmed {
  cursor: default;
  box-shadow: none;
}

.rank-card.is-rejecting {
  animation:
    reject-shake 260ms ease-in-out 0s 2,
    reject-fall 640ms cubic-bezier(0.18, 0.82, 0.26, 0.98) 180ms forwards;
}

.rank-card.is-returning {
  animation: slot-return 280ms cubic-bezier(0.2, 0.84, 0.3, 1) forwards;
}

.rank-card.dragging-origin,
.tray-card.dragging-origin {
  opacity: 0;
  visibility: hidden;
}

.rank-card.is-being-replaced {
  visibility: hidden;
}

.tray-card {
  min-height: 0;
  padding: calc(12px * var(--layout-scale)) calc(14px * var(--layout-scale));
  text-align: left;
  touch-action: none;
  cursor: grab;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease;
  user-select: none;
  -webkit-user-select: none;
}

.tray-card,
.tray-card * {
  cursor: inherit;
}

.tray-card:active,
.tray-card:hover {
  transform: translateY(-2px);
}

.rank-card:not(.is-locked):not(.is-submit-confirmed):active,
.tray-card:active,
.rolodex-card:active {
  cursor: grabbing;
}

.card-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(10px * var(--layout-scale));
  height: 100%;
}

.card-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.card-title {
  display: block;
  font-size: calc(1.24rem * var(--layout-scale));
  line-height: 1.14;
  padding-bottom: 0.1em;
  letter-spacing: 0.05em;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.card-note {
  position: absolute;
  left: 50%;
  bottom: calc(11px * var(--layout-scale));
  transform: translateX(-50%);
  transform-origin: center bottom;
  margin: 0 auto;
  z-index: 2;
  width: calc(100% - (28px * var(--layout-scale)));
  color: rgba(23, 23, 23, 0.48);
  font-size: calc(0.68rem * var(--layout-scale));
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: none;
}

.card-value {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-pill);
  background: var(--good-soft);
  color: var(--good);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}

.card-icon {
  width: calc(46px * var(--layout-scale));
  height: calc(46px * var(--layout-scale));
  flex: 0 0 calc(46px * var(--layout-scale));
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
  color: var(--ink);
}

.card-icon.is-value {
  align-content: center;
  justify-items: center;
}

.card-value-circle {
  --value-ring-color: #d9a7e8;
  width: calc(44px * var(--layout-scale));
  height: calc(44px * var(--layout-scale));
  display: inline-grid;
  place-items: center;
  place-content: center;
  position: relative;
  border-radius: 50%;
  box-sizing: border-box;
  border: calc(4px * var(--layout-scale)) solid var(--value-ring-color);
  background: transparent;
  color: var(--ink);
}

.card-value-circle.is-hidden-ring {
  border-color: transparent;
}

.card-value-circle.slot-hue-0 {
  --value-ring-color: #d9a7e8;
}

.card-value-circle.slot-hue-1 {
  --value-ring-color: #efbe82;
}

.card-value-circle.slot-hue-2 {
  --value-ring-color: #9ebce8;
}

.card-value-circle.slot-hue-3 {
  --value-ring-color: #a9d1af;
}

.card-value-circle.slot-hue-4 {
  --value-ring-color: #ecd77f;
}

.card-icon svg {
  width: calc(29px * var(--layout-scale));
  height: calc(29px * var(--layout-scale));
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-number {
  display: inline-grid;
  place-items: center;
  width: 100%;
  font-size: calc(1.14rem * var(--layout-scale));
  font-family: inherit;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
  position: relative;
  overflow: visible;
  justify-self: center;
  text-align: center;
  transform-origin: center center;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  will-change: transform;
}

.card-number-ink {
  display: block;
  transform: translateY(-0.03em);
}

.card-value-circle > .card-number {
  width: 100%;
  height: 100%;
}

.card-value-circle .card-number-ink {
  transform: translateY(-0.04em);
}

.card-number.digits-1 {
  font-size: calc(1.28rem * var(--layout-scale));
}

.card-number.digits-2 {
  font-size: calc(1.08rem * var(--layout-scale));
  letter-spacing: 0;
}

.card-number.digits-3 {
  font-size: calc(0.94rem * var(--layout-scale));
  letter-spacing: 0.01em;
}

.card-number.digits-4 {
  font-size: calc(0.68rem * var(--layout-scale));
  letter-spacing: 0;
}

.card-return {
  position: absolute;
  top: calc(-9px * var(--layout-scale));
  right: calc(-9px * var(--layout-scale));
  z-index: 5;
  width: calc(28px * var(--layout-scale));
  height: calc(28px * var(--layout-scale));
  padding: 0;
  border: 1px solid var(--paper-line);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.96);
  color: var(--ink-soft);
  box-shadow: 0 8px 18px rgba(30, 24, 18, 0.1);
  display: grid;
  place-items: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(1rem * var(--layout-scale));
  line-height: 1;
  cursor: pointer;
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}

.card-return,
.card-return * {
  cursor: pointer !important;
}

.card-return.is-entering {
  animation: card-return-fade-in 340ms cubic-bezier(0.16, 0.84, 0.26, 1) both;
}

.card-drag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.card-drag::before {
  content: "";
  width: 14px;
  height: 14px;
  background:
    radial-gradient(circle, currentColor 1.2px, transparent 1.3px) 0 0 / 7px 7px;
  opacity: 0.55;
}

.tray-panel {
  position: relative;
  z-index: 1100;
  width: 100%;
  max-width: 820px;
  min-width: 0;
  margin-top: calc(-38px * var(--layout-scale));
  overflow: visible;
  padding: 0;
}

/* Rolodex stack plus its up/down controls. */
.rolodex-tray {
  --rolodex-card-width: var(--tile-width);
  --rolodex-half-card-width: var(--tile-half-width);
  --rolodex-stage-width: min(84vw, calc(460px * var(--layout-scale)));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: calc(268px * var(--layout-scale));
  gap: calc(8px * var(--layout-scale));
  transform: translateX(2.5%);
}

.rolodex-window {
  position: relative;
  width: var(--rolodex-stage-width);
  height: calc(238px * var(--layout-scale));
  flex: 0 0 var(--rolodex-stage-width);
  max-width: 100%;
  overflow: visible;
  z-index: 1100;
  isolation: isolate;
  overscroll-behavior: contain;
  touch-action: none;
  transform-style: preserve-3d;
}

.rolodex-window.is-returning-over-controls {
  z-index: 1505;
}

.rolodex-tray.is-empty .rolodex-window {
  pointer-events: none;
}

.rolodex-card {
  --rolodex-x: 0px;
  --rolodex-y: 0px;
  --rolodex-scale: 1;
  --rolodex-opacity: 1;
  --rolodex-z-index: 100;
  position: absolute;
  top: 8px;
  left: 50%;
  width: var(--rolodex-card-width);
  height: var(--tile-height);
  min-height: var(--tile-height);
  z-index: var(--rolodex-z-index);
  opacity: var(--rolodex-opacity);
  transform:
    translateX(calc(-50% + (var(--rolodex-x) * var(--layout-scale))))
    translateY(calc(var(--rolodex-y) * var(--layout-scale)))
    scale(var(--rolodex-scale));
  transition:
    opacity 260ms ease,
    transform 260ms cubic-bezier(0.18, 0.78, 0.2, 1),
    box-shadow 180ms ease;
  transform-origin: center center;
  will-change: transform, opacity;
}

.rolodex-card:not(.is-active) {
  cursor: grab;
  filter: saturate(0.92);
}

.rolodex-card,
.rolodex-card * {
  cursor: inherit;
}

.rolodex-card:hover,
.rolodex-card:active,
.rolodex-card:focus-visible {
  transform:
    translateX(calc(-50% + (var(--rolodex-hover-x, var(--rolodex-x)) * var(--layout-scale))))
    translateY(calc(var(--rolodex-hover-y, var(--rolodex-y)) * var(--layout-scale)))
    scale(var(--rolodex-scale));
}

body.is-dragging .tray-card:hover,
body.is-dragging .tray-card:active,
body.is-dragging .rolodex-card:hover,
body.is-dragging .rolodex-card:active,
body.is-dragging .rolodex-card:focus-visible,
body.is-dragging .rolodex-card.is-active:hover {
  transform:
    translateX(calc(-50% + (var(--rolodex-x, 0px) * var(--layout-scale))))
    translateY(calc(var(--rolodex-y, 0px) * var(--layout-scale)))
    scale(var(--rolodex-scale, 1));
}

.app-shell.suppress-rolodex-hover .rolodex-card:hover,
.app-shell.suppress-rolodex-hover .rolodex-card:active,
.app-shell.suppress-rolodex-hover .rolodex-card:focus-visible {
  transform:
    translateX(calc(-50% + (var(--rolodex-x) * var(--layout-scale))))
    translateY(calc(var(--rolodex-y) * var(--layout-scale)))
    scale(var(--rolodex-scale));
}

.app-shell.is-round-animating .rolodex-card,
.app-shell.is-round-animating .rolodex-card * {
  cursor: default !important;
  pointer-events: none;
}

.app-shell.is-round-animating .rolodex-card:hover,
.app-shell.is-round-animating .rolodex-card:active,
.app-shell.is-round-animating .rolodex-card:focus-visible {
  transform:
    translateX(calc(-50% + (var(--rolodex-x) * var(--layout-scale))))
    translateY(calc(var(--rolodex-y) * var(--layout-scale)))
    scale(var(--rolodex-scale));
}

.rolodex-card.is-active {
  z-index: 600;
  cursor: grab;
}

.rolodex-point-probe {
  position: absolute;
  top: 8px;
  left: 50%;
  width: var(--rolodex-card-width);
  height: var(--tile-height);
  min-height: var(--tile-height);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform-origin: center center;
}

.rolodex-card.is-active:hover {
  transform:
    translateX(calc(-50% + (var(--rolodex-hover-x, var(--rolodex-x)) * var(--layout-scale))))
    translateY(calc(var(--rolodex-hover-y, var(--rolodex-y)) * var(--layout-scale)))
    scale(var(--rolodex-scale));
}

.rolodex-card.is-settling-center {
  animation: rolodex-center-in 340ms cubic-bezier(0.18, 0.82, 0.22, 1);
}

.rolodex-card.is-return-settling {
  opacity: 1;
  visibility: visible;
  transition: none;
  pointer-events: none;
}

.rolodex-card.is-return-settling:hover,
.rolodex-card.is-return-settling:active,
.rolodex-card.is-return-settling:focus-visible {
  transform:
    translateX(calc(-50% + (var(--rolodex-x) * var(--layout-scale))))
    translateY(calc(var(--rolodex-y) * var(--layout-scale)))
    scale(var(--rolodex-scale));
}

.rolodex-controls {
  position: absolute;
  top: calc((8px * var(--layout-scale)) + (86px * var(--layout-scale)) + (var(--tile-height) / 2) - (4px * var(--layout-scale)));
  left: min(
    calc(100% - (38px * var(--layout-scale))),
    calc(50% + var(--rolodex-half-card-width) + (16px * var(--layout-scale)))
  );
  display: grid;
  gap: calc(8px * var(--layout-scale));
  align-content: center;
  margin-left: 0;
  z-index: 1405;
  pointer-events: auto;
  transform: translateX(calc(-6px * var(--layout-scale)));
}

.rolodex-control {
  width: calc(18px * var(--layout-scale));
  height: calc(18px * var(--layout-scale));
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font-size: 0.82rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease;
}

.rolodex-control,
.rolodex-control * {
  cursor: inherit;
}

.rolodex-control:not(:disabled),
.rolodex-control:not(:disabled) * {
  cursor: pointer !important;
}

.rolodex-control:disabled {
  color: rgba(23, 23, 23, 0.28);
  background: transparent;
  cursor: default;
}

.rolodex-chevron {
  width: 0;
  height: 0;
  border-left: calc(6px * var(--layout-scale)) solid transparent;
  border-right: calc(6px * var(--layout-scale)) solid transparent;
}

.rolodex-chevron.up {
  border-bottom: calc(9px * var(--layout-scale)) solid currentColor;
}

.rolodex-chevron.down {
  border-top: calc(9px * var(--layout-scale)) solid currentColor;
}

.rolodex-control:hover:not(:disabled),
.rolodex-control:focus-visible:not(:disabled) {
  background: transparent;
  transform: translateY(-1px);
}

.rolodex-empty {
  min-height: calc(238px * var(--layout-scale));
}

/* Help modal that temporarily replaces the board/tray visually without losing progress. */
.help-overlay {
  position: absolute;
  top: calc(52px * var(--layout-scale));
  left: 0;
  right: 0;
  width: 100%;
  min-height: calc(100% - (52px * var(--layout-scale)));
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: calc(26px * var(--layout-scale));
  opacity: 0;
  pointer-events: none;
  z-index: 1450;
  transform: translateY(calc(10px * var(--layout-scale))) scale(0.988);
  transition:
    opacity 280ms cubic-bezier(0.2, 0.84, 0.24, 1),
    transform 280ms cubic-bezier(0.2, 0.84, 0.24, 1);
}

.game-screen.is-help-open .help-overlay {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.help-panel {
  position: relative;
  width: min(100%, calc(var(--tile-width) - (4px * var(--layout-scale))));
  max-width: min(100%, calc(var(--tile-width) - (4px * var(--layout-scale))));
  min-width: 0;
  margin-left: calc(3px * var(--layout-scale));
  padding: calc(22px * var(--layout-scale)) calc(20px * var(--layout-scale)) calc(20px * var(--layout-scale));
  border: 1px solid #171717;
  border-radius: calc(26px * var(--layout-scale));
  background: #fffdf8;
  box-shadow: calc(-6px * var(--layout-scale)) calc(5px * var(--layout-scale)) 0 #171717;
  backdrop-filter: none;
  display: grid;
  gap: calc(14px * var(--layout-scale));
  text-align: left;
}

.help-close {
  position: absolute;
  top: calc(10px * var(--layout-scale));
  right: calc(12px * var(--layout-scale));
  width: calc(28px * var(--layout-scale));
  height: calc(28px * var(--layout-scale));
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(23, 23, 23, 0.8);
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(1.3rem * var(--layout-scale));
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 180ms ease, opacity 180ms ease;
}

.help-close:hover,
.help-close:focus-visible {
  transform: translateY(-1px);
}

.help-kicker {
  margin: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: calc(1.22rem * var(--layout-scale));
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-align: center;
}

.help-headline {
  margin: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: calc(0.98rem * var(--layout-scale));
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-align: left;
}

.help-copy {
  display: grid;
  gap: calc(12px * var(--layout-scale));
  color: var(--ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: calc(0.98rem * var(--layout-scale));
  line-height: 1.42;
  text-align: left;
}

.help-copy p {
  margin: 0;
}

.actions {
  position: relative;
  bottom: auto;
  width: var(--tile-width);
  max-width: var(--tile-width);
  min-width: 0;
  margin-top: calc(2px * var(--layout-scale));
  padding-top: 0;
}

.results-stage {
  position: relative;
  z-index: 1500;
  width: var(--tile-width);
  max-width: var(--tile-width);
  min-width: 0;
  min-height: calc(320px * var(--layout-scale));
}

/* End-of-round results card shown after a completed puzzle. */
.results-panel {
  position: relative;
  z-index: 1501;
  width: min(100%, calc(var(--tile-width) - (28px * var(--layout-scale))));
  max-width: min(100%, calc(var(--tile-width) - (28px * var(--layout-scale))));
  min-width: 0;
  min-height: calc(286px * var(--layout-scale));
  margin-left: calc(3px * var(--layout-scale));
  margin-top: calc(12px * var(--layout-scale));
  padding: calc(24px * var(--layout-scale)) calc(20px * var(--layout-scale)) calc(18px * var(--layout-scale));
  border: 1px solid #171717;
  border-radius: calc(26px * var(--layout-scale));
  background: #fffdf8;
  box-shadow: calc(-6px * var(--layout-scale)) calc(5px * var(--layout-scale)) 0 #171717;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(14px * var(--layout-scale));
  text-align: center;
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  animation: results-panel-in 320ms cubic-bezier(0.2, 0.84, 0.24, 1) both;
}

.results-panel.is-docked {
  animation: none;
}

.results-panel.is-docked .results-score-block {
  animation: none;
}

.results-panel.is-docked .results-share-button {
  margin-top: calc(22px * var(--layout-scale));
}

.game-screen.is-results-dock-entering .board-panel {
  animation: docked-grid-phase-in 360ms cubic-bezier(0.2, 0.84, 0.24, 1) both;
}

.game-screen.is-results-dock-entering .results-panel.is-docked {
  animation: docked-results-phase-in 360ms cubic-bezier(0.2, 0.84, 0.24, 1) both;
}

.board-panel.has-results-overlay .results-panel {
  position: absolute;
  top: calc(30px * var(--layout-scale));
  left: calc(11px * var(--layout-scale));
  right: calc(17px * var(--layout-scale));
  width: auto;
  max-width: none;
  min-height: calc(424px * var(--layout-scale));
  margin: 0;
  padding-bottom: calc(20px * var(--layout-scale));
  z-index: 90;
}

.results-close {
  position: absolute;
  top: calc(8px * var(--layout-scale));
  right: calc(9px * var(--layout-scale));
  width: calc(27px * var(--layout-scale));
  height: calc(27px * var(--layout-scale));
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: calc(1.16rem * var(--layout-scale));
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 180ms ease;
}

.results-close:hover,
.results-close:focus-visible {
  transform: translateY(-1px);
}

.results-headline {
  margin: 0;
  font-size: calc(1.78rem * var(--layout-scale));
  font-weight: 700;
  letter-spacing: 0.01em;
}

.results-score-block {
  display: grid;
  gap: 0;
  justify-items: center;
  margin-top: calc(6px * var(--layout-scale));
  animation: results-score-pop 360ms cubic-bezier(0.18, 0.82, 0.24, 1) 220ms both;
}

.results-score-value {
  margin: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: calc(2.46rem * var(--layout-scale));
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.results-score-value span {
  margin-left: 0.18em;
  font-size: 0.42em;
  letter-spacing: 0;
}

.results-share-button {
  width: min(100%, calc(232px * var(--layout-scale)));
  margin-top: calc(4px * var(--layout-scale));
}

.results-share-feedback {
  min-height: calc(18px * var(--layout-scale));
  margin: calc(-6px * var(--layout-scale)) 0 calc(-2px * var(--layout-scale));
  color: var(--ink);
  font-size: calc(0.78rem * var(--layout-scale));
  font-weight: 700;
  letter-spacing: 0.01em;
  opacity: 0;
  transform: translateY(calc(6px * var(--layout-scale)));
  pointer-events: none;
}

.results-share-feedback.is-visible {
  animation: share-feedback-pop 1700ms cubic-bezier(0.18, 0.82, 0.24, 1) both;
}

.results-secondary-button {
  width: min(100%, calc(232px * var(--layout-scale)));
}

.results-sports-select-wrap {
  position: relative;
  width: min(100%, calc(232px * var(--layout-scale)));
}

.results-sports-select-wrap::after {
  border-color: #ffffff;
}

.results-sports-select {
  width: 100%;
  min-height: calc(58px * var(--layout-scale));
  border-width: 3px;
  border-radius: calc(24px * var(--layout-scale));
  background: #171717;
  color: #ffffff;
  text-align: center;
  text-align-last: center;
  text-transform: uppercase;
}

.results-divider {
  width: min(100%, calc(236px * var(--layout-scale)));
  height: 1px;
  margin:
    calc(-2px * var(--layout-scale))
    0
    calc(20px * var(--layout-scale));
  background: rgba(23, 23, 23, 0.14);
}

.results-timer {
  display: flex;
  align-items: baseline;
  gap: calc(4px * var(--layout-scale));
  justify-items: center;
  margin-top: auto;
  padding-top: calc(18px * var(--layout-scale));
  justify-content: center;
  flex-wrap: nowrap;
}

.board-panel.has-results-overlay .results-timer {
  margin-top: auto;
  padding-top: calc(28px * var(--layout-scale));
}

.results-timer-label {
  margin: 0;
  color: var(--ink);
  font-size: calc(0.88rem * var(--layout-scale));
  font-weight: 400;
  letter-spacing: 0.01em;
}

.results-timer-value {
  margin: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: calc(1.32rem * var(--layout-scale));
  font-weight: 800;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.action-bar {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr calc(56px * var(--layout-scale)) 1fr;
  gap: calc(7px * var(--layout-scale));
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.action-bar .action-button {
  border-radius: calc(24px * var(--layout-scale));
}

.action-button {
  min-height: calc(58px * var(--layout-scale));
  padding: 0 calc(20px * var(--layout-scale));
  border-radius: 999px;
  border: 2px solid rgba(23, 23, 23, 0.88);
  background: #ffffff;
  color: var(--ink);
  font-size: calc(1.02rem * var(--layout-scale));
  font-family: inherit;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 220ms ease,
    color 220ms ease,
    opacity 220ms ease;
}

.action-button,
.action-button * {
  cursor: inherit;
}

.action-button:not(:disabled),
.action-button:not(:disabled) * {
  cursor: pointer !important;
}

.action-button:not(.primary) {
  border-color: rgba(23, 23, 23, 0.88);
}

.action-bar .action-button.clue-button {
  padding: 0;
  min-width: calc(56px * var(--layout-scale));
  border-radius: calc(24px * var(--layout-scale));
  border-color: rgba(23, 23, 23, 0.88);
  background: #ffffff;
}

.action-button.clue-button.is-armed {
  background: #ffffff;
  animation: clue-button-pulse 1.45s ease-in-out infinite;
}

.action-button.clue-button.is-spent {
  color: transparent;
  border-color: rgba(23, 23, 23, 0.38);
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.08);
}

.action-button.clue-button.is-dragging-origin .clue-icon {
  opacity: 0;
}

.action-button.primary {
  border-color: rgba(23, 23, 23, 0.88);
  background: #ffffff;
  color: var(--ink);
}

.action-button:hover:not(:disabled),
.action-button:focus-visible:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 0 rgba(23, 23, 23, 0.16);
}

.action-button:not(.primary):hover:not(:disabled),
.action-button:not(.primary):focus-visible:not(:disabled) {
  border-color: rgba(23, 23, 23, 0.88);
  background: #ffffff;
}

.action-button.primary:hover:not(:disabled),
.action-button.primary:focus-visible:not(:disabled) {
  background: #ffffff;
}

.action-button:disabled {
  opacity: 1;
  color: rgba(23, 23, 23, 0.34);
  border-color: rgba(23, 23, 23, 0.88);
  background: #ffffff;
  cursor: default;
  box-shadow: none;
}

.action-button:disabled,
.action-button:disabled * {
  cursor: default !important;
}

.action-button.clue-button.is-spent:disabled {
  color: transparent;
  border-color: rgba(23, 23, 23, 0.38);
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(23, 23, 23, 0.08);
}

@media (pointer: fine) {
  .game-header-button:not(:disabled),
  .game-header-button:not(:disabled) *,
  .help-close,
  .help-close *,
  .rolodex-control:not(:disabled),
  .rolodex-control:not(:disabled) *,
  .action-button:not(:disabled),
  .action-button:not(:disabled) *,
  .card-return,
  .card-return *,
  .home-play-button:not(:disabled),
  .home-play-button:not(:disabled) * {
    cursor: pointer !important;
  }

  .rank-card:not(.is-locked):not(.is-submit-confirmed),
  .rank-card:not(.is-locked):not(.is-submit-confirmed) *,
  .tray-card,
  .tray-card *,
  .rolodex-card,
  .rolodex-card * {
    cursor: grab !important;
  }

  .rank-card:not(.is-locked):not(.is-submit-confirmed):active,
  .rank-card:not(.is-locked):not(.is-submit-confirmed):active *,
  .tray-card:active,
  .tray-card:active *,
  .rolodex-card:active,
  .rolodex-card:active * {
    cursor: grabbing !important;
  }

  .rank-card.is-locked,
  .rank-card.is-locked *,
  .rank-card.is-submit-confirmed,
  .rank-card.is-submit-confirmed *,
  .game-header-button:disabled,
  .game-header-button:disabled *,
  .rolodex-control:disabled,
  .rolodex-control:disabled *,
  .action-button:disabled,
  .action-button:disabled * {
    cursor: default !important;
  }
}

@keyframes results-panel-in {
  from {
    opacity: 0;
    transform: translateY(calc(10px * var(--layout-scale))) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes docked-grid-phase-in {
  0% {
    opacity: 0;
    transform: translateY(calc(8px * var(--layout-scale))) scale(0.992);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes docked-results-phase-in {
  0% {
    opacity: 0;
    transform: translateY(calc(8px * var(--layout-scale))) scale(0.992);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes results-score-pop {
  0% {
    opacity: 0;
    transform: translateY(calc(8px * var(--layout-scale))) scale(0.98);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes share-feedback-pop {
  0% {
    opacity: 0;
    transform: translateY(calc(8px * var(--layout-scale))) scale(0.98);
  }

  18% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  72% {
    opacity: 1;
    transform: translateY(calc(-2px * var(--layout-scale))) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(calc(-10px * var(--layout-scale))) scale(0.985);
  }
}

/* Floating clone used during drag/drop and return animations. */
.drag-ghost {
  position: fixed;
  inset: auto;
  right: auto;
  bottom: auto;
  z-index: 2200;
  max-width: min(92vw, 420px);
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-2deg);
  opacity: 1;
  box-shadow: 0 10px 24px rgba(30, 24, 18, 0.08);
  will-change: left, top, transform, opacity;
}

.drag-ghost.is-touch-drag {
  transform: translate(-50%, -50%) rotate(0deg);
}

.drag-ghost.is-over-slot {
  box-shadow: none;
}

.drag-ghost.is-returning-home {
  transition:
    left 336ms cubic-bezier(0.2, 0.86, 0.28, 1),
    top 336ms cubic-bezier(0.2, 0.86, 0.28, 1),
    transform 336ms cubic-bezier(0.2, 0.86, 0.28, 1),
    opacity 336ms ease;
}

.drag-ghost.is-dropping-into-slot {
  transition:
    left 312ms cubic-bezier(0.2, 0.88, 0.24, 1),
    top 312ms cubic-bezier(0.2, 0.88, 0.24, 1),
    width 312ms cubic-bezier(0.2, 0.88, 0.24, 1),
    height 312ms cubic-bezier(0.2, 0.88, 0.24, 1),
    transform 312ms cubic-bezier(0.2, 0.88, 0.24, 1);
  box-shadow: none;
}

.return-ghost {
  position: fixed;
  z-index: 1300;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  box-shadow: 0 10px 24px rgba(30, 24, 18, 0.08);
  transition:
    left 408ms cubic-bezier(0.18, 0.82, 0.28, 1),
    top 408ms cubic-bezier(0.18, 0.82, 0.28, 1),
    transform 408ms cubic-bezier(0.16, 1.1, 0.28, 1),
    opacity 310ms ease;
}

.return-ghost.is-bouncing-to-tray {
  box-shadow: none;
}

.drag-ghost .card-return,
.drag-ghost .card-drag,
.drag-ghost .card-note,
.return-ghost .card-return,
.return-ghost .card-drag {
  display: none;
}

.clue-icon {
  display: inline-grid;
  place-items: center;
  width: calc(24px * var(--layout-scale));
  height: calc(24px * var(--layout-scale));
}

.clue-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clue-ghost {
  position: fixed;
  z-index: 2300;
  width: calc(28px * var(--layout-scale));
  height: calc(28px * var(--layout-scale));
  display: grid;
  place-items: center;
  color: var(--ink);
  filter: drop-shadow(0 4px 8px rgba(30, 24, 18, 0.14));
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.clue-pop-line {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(9px * var(--layout-scale));
  height: calc(2px * var(--layout-scale));
  border-radius: 999px;
  background: currentColor;
  pointer-events: none;
  transform-origin: center center;
}

.submit-confetti-piece {
  position: fixed;
  z-index: 1400;
  pointer-events: none;
  border-radius: 1px;
  will-change: transform, opacity;
}

.submit-confetti-piece.is-number-burst {
  width: auto !important;
  height: auto !important;
  border-radius: 0;
  background: none !important;
  clip-path: none !important;
  box-shadow: none !important;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: calc(0.92rem * var(--layout-scale));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: none;
}

.submit-air-puff {
  position: fixed;
  z-index: 1380;
  pointer-events: none;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.34) 48%, rgba(255, 255, 255, 0) 100%);
  filter: blur(0.45px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

@keyframes card-return-fade-in {
  0% {
    opacity: 0;
    transform: translateY(-2px) scale(0.96);
  }

  65% {
    opacity: 1;
    transform: translateY(0px) scale(1.01);
  }

  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
  }
}

@keyframes clue-button-pulse {
  0%,
  100% {
    transform: translateY(-1px) scale(1);
    box-shadow: 0 6px 0 rgba(23, 23, 23, 0.16);
  }

  50% {
    transform: translateY(-2px) scale(1.06);
    box-shadow:
      0 8px 0 rgba(23, 23, 23, 0.16),
      0 0 0 5px rgba(23, 23, 23, 0.05);
  }
}

@keyframes reject-shake {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-8px);
  }

  40% {
    transform: translateX(8px);
  }

  60% {
    transform: translateX(-6px);
  }

  80% {
    transform: translateX(6px);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes reject-fall {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(170px) scale(0.94);
  }
}

@keyframes slot-return {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  45% {
    transform: translateY(-8px) scale(1.01);
  }

  100% {
    opacity: 0;
    transform: translateY(120px) scale(0.95);
  }
}

@keyframes rolodex-center-in {
  0% {
    opacity: 0.72;
    transform:
      translateX(calc(-50% + var(--rolodex-x) - 24px))
      translateY(calc(var(--rolodex-y) - 58px))
      scale(0.93);
  }

  100% {
    opacity: var(--rolodex-opacity);
    transform:
      translateX(calc(-50% + var(--rolodex-x)))
      translateY(var(--rolodex-y))
      scale(var(--rolodex-scale));
  }
}

.end-screen {
  padding-top: 28px;
  text-align: center;
}

.end-card {
  padding: 26px 22px;
  display: grid;
  gap: 14px;
}

.end-title {
  margin: 0;
  font-size: clamp(2rem, 7vw, 2.8rem);
}

.end-copy {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

.end-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.1rem;
}

@media (min-width: 760px) {
  .app-shell {
    padding-left: 32px;
    padding-right: 32px;
  }
}

@media (max-width: 440px) {
  .brand-title {
    font-size: clamp(2.8rem, 14vw, 4rem);
  }
}