/* =====================================================
   THABET — Memphis / retro-postmodern trivia UI
   Landscape. Thick outlines. Hard offset shadows.
   Responsive via fluid clamps + aspect-aware classes.
   ===================================================== */

:root {
  --bg: #f7f2e9;
  --ink: #0a0a0a;
  --white: #ffffff;
  --pink: #ff8fb1;
  --pink-dk: #ff5d8f;
  --green: #bfe6b5;
  --green-dk: #87d57f;
  --purple: #c9afff;
  --purple-dk: #a77cff;
  --orange: #ff9e4d;
  --orange-dk: #ff7a1a;
  --yellow: #ffdf4a;
  --yellow-dk: #f5c400;
  --blue: #9ed8ff;
  --red: #ff5a5a;
  --cream: #fbeccb;

  --border: 4px solid var(--ink);
  --border-thin: 3px solid var(--ink);
  --shadow: 8px 8px 0 var(--ink);
  --shadow-sm: 5px 5px 0 var(--ink);
  --shadow-lg: 12px 12px 0 var(--ink);
  --radius: 14px;
  --radius-sm: 8px;

  --font: "Archivo Black", "Noto Kufi Arabic", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Noto Kufi Arabic", "Helvetica Neue", Arial, sans-serif;
  --font-ar: "Noto Kufi Arabic", "Inter", sans-serif;

  /* Fluid sizing driven by min(vw, vh*ratio) so text scales nicely landscape */
  --fluid-unit: min(100vw, calc(100vh * 1.9));
  --fs-mega: clamp(56px, calc(var(--fluid-unit) * 0.1), 150px);
  --fs-brand: clamp(48px, calc(var(--fluid-unit) * 0.06), 90px);
  --fs-h1: clamp(22px, calc(var(--fluid-unit) * 0.028), 36px);
  --fs-h2: clamp(18px, calc(var(--fluid-unit) * 0.022), 30px);
  --fs-body: clamp(14px, calc(var(--fluid-unit) * 0.016), 18px);
  --fs-small: clamp(11px, calc(var(--fluid-unit) * 0.012), 14px);
  --fs-timer: clamp(36px, calc(var(--fluid-unit) * 0.055), 72px);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* Dynamic viewport — prevents Safari's collapsing URL bar from clipping the layout */
  height: 100dvh;
  min-height: 100dvh;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  /* Disable iOS rubber-band bounce / pull-to-refresh */
  overscroll-behavior: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

body[dir="rtl"] {
  font-family: var(--font-ar);
}
body[dir="rtl"] .btn,
body[dir="rtl"] .mega,
body[dir="rtl"] .tagline,
body[dir="rtl"] .brand-pill,
body[dir="rtl"] .page-title,
body[dir="rtl"] .auth-tagline,
body[dir="rtl"] .turn-chip,
body[dir="rtl"] .category-tile,
body[dir="rtl"] .board-cat,
body[dir="rtl"] .board-cell,
body[dir="rtl"] .score-chip,
body[dir="rtl"] .timer-big,
body[dir="rtl"] .q-label,
body[dir="rtl"] .q-text,
body[dir="rtl"] .answering-chip,
body[dir="rtl"] .answer-label,
body[dir="rtl"] .answer-text,
body[dir="rtl"] .reveal-q,
body[dir="rtl"] .winner-label,
body[dir="rtl"] .winner-name,
body[dir="rtl"] .aw-name,
body[dir="rtl"] .aw-pts,
body[dir="rtl"] .final-chip,
body[dir="rtl"] .pay-price,
body[dir="rtl"] .pay-card h3,
body[dir="rtl"] .stg,
body[dir="rtl"] .status-chip,
body[dir="rtl"] .lang,
body[dir="rtl"] .team-tag,
body[dir="rtl"] .free-badge,
body[dir="rtl"] .vs,
body[dir="rtl"] .tab,
body[dir="rtl"] .btn-back,
body[dir="rtl"] input { font-family: var(--font-ar); font-weight: 900; }

body {
  background:
    linear-gradient(135deg, #ffd9c7 0%, #ffe6c7 35%, #ffcbe0 100%);
}

#app {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

/* =========== Rotate overlay for portrait phones =========== */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--yellow);
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#rotate-overlay .rotate-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 28px 36px;
  text-align: center;
  max-width: 320px;
  transform: rotate(-2deg);
}
#rotate-overlay .rotate-icon {
  font-size: 64px;
  transform: rotate(90deg);
  display: inline-block;
  margin-bottom: 10px;
  animation: rockphone 1.8s ease-in-out infinite;
}
@keyframes rockphone {
  0%, 100% { transform: rotate(90deg); }
  50% { transform: rotate(0deg); }
}
#rotate-overlay h2 {
  font-family: var(--font);
  font-size: 22px;
  margin: 8px 0 6px;
  letter-spacing: 0.02em;
}
#rotate-overlay p {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  margin: 0;
}

/* Phones in portrait see the rotate prompt — the game is designed for landscape.
   Tablets in portrait (≥ 600px wide) fall through to the dormant portrait-layout
   section further down so an iPad user isn't blocked. */
@media (orientation: portrait) and (max-width: 600px) {
  #rotate-overlay { display: flex; }
  #app { display: none; }
}

/* =========== Screens =========== */
.screen {
  position: absolute;
  inset: 0 0 44px 0;       /* bottom room for stage strip */
  /* Respect iPhone notch / dynamic island in landscape (inset left/right) and home indicator */
  padding: clamp(14px, 2.4vh, 24px)
           calc(clamp(18px, 3vw, 36px) + env(safe-area-inset-right))
           10px
           calc(clamp(18px, 3vw, 36px) + env(safe-area-inset-left));
  display: none;
  flex-direction: column;
  animation: pop .25s ease-out;
}
.screen.active { display: flex; }
@keyframes pop {
  from { opacity: 0; transform: translateY(6px) scale(.99); }
  to   { opacity: 1; transform: none; }
}

/* =========== Rich (multi-color) category icons =========== */
/* Some category icons use multi-colored SVGs; let child fills stand. */
.cat-icon svg .c-hair { fill: #b79cff; }
.cat-icon svg .c-skin { fill: #ffd7b5; }
.cat-icon svg .c-star { fill: #ffdf4a; }
.cat-icon svg .c-cd   { fill: #bfe6b5; }
.cat-icon svg .c-pink { fill: #ff8fb1; }
.cat-icon svg .c-green{ fill: #bfe6b5; }
.cat-icon svg .c-orange{fill: #ff9e4d; }
.cat-icon svg .c-white{ fill: #ffffff; }
.cat-icon svg .c-ink  { fill: #0a0a0a; }
/* When tile is dark (6n+6), override only the plain monochrome rects */
.category-tile:nth-child(6n+6) .cat-icon svg rect:not([class]) { fill: var(--white); }

/* =========== Top / Bottom bars =========== */
.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.bottom-bar {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.spacer { width: 110px; }
.spacer-sm { width: 70px; }
.page-title {
  font-family: var(--font);
  font-size: var(--fs-h1);
  margin: 0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* =========== Buttons =========== */
.btn {
  font-family: var(--font);
  font-weight: 900;
  font-size: var(--fs-body);
  padding: clamp(10px, 1.4vh, 16px) clamp(18px, 2.2vw, 28px);
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: var(--shadow-sm); transform: none; }
.btn-pink   { background: var(--pink-dk); color: var(--white); }
.btn-yellow { background: var(--yellow); }
.btn-green  { background: var(--green-dk); }
.btn-white  { background: var(--white); }
.btn-black  { background: var(--ink); color: var(--white); }

.btn-huge {
  font-size: clamp(30px, 5.5vw, 48px);
  padding: clamp(18px, 3.2vh, 28px) clamp(44px, 8vw, 80px);
  background: var(--pink-dk);
  color: var(--white);
  box-shadow: var(--shadow-lg);
  letter-spacing: 0.06em;
}
.btn-huge:hover { box-shadow: 10px 10px 0 var(--ink); }
.btn-huge:active { box-shadow: 4px 4px 0 var(--ink); }
.btn-start { margin-top: clamp(16px, 3vh, 28px); }

.btn-back {
  font-family: var(--font);
  font-weight: 900;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: var(--fs-small);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  z-index: 3;
}
.btn-back:hover { transform: translate(-1px,-1px); }

.btn-done-top {
  font-size: var(--fs-small);
  padding: 9px 16px;
  background: var(--yellow);
}
.btn-done-top:disabled { background: var(--bg); color: #999; }

.link {
  background: none;
  border: none;
  text-decoration: underline;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-body);
  cursor: pointer;
  color: var(--ink);
  padding: 4px 8px;
}

/* =========== Cards =========== */
.card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 2.5vh, 26px);
}

/* =========== AUTH =========== */
.auth-wrap {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
  position: relative;
  z-index: 1;
  padding: 0 20px;
}
.auth-left {
  display: flex; flex-direction: column; gap: clamp(12px, 2.4vh, 22px);
  align-items: flex-start;
}
.brand-pill {
  display: inline-block;
  background: var(--yellow);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 30px 10px;
  font-family: var(--font);
  font-size: var(--fs-brand);
  letter-spacing: 0.02em;
  line-height: 1;
  transform: rotate(-2deg);
}
.brand-pill.small {
  font-size: clamp(24px, 3.6vw, 40px);
  padding: 7px 18px;
  background: var(--pink);
  transform: rotate(-3deg);
}
.auth-tagline {
  font-family: var(--font);
  font-size: var(--fs-h1);
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.free-badge {
  background: var(--pink);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  box-shadow: var(--shadow-sm);
  font-family: var(--font);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  transform: rotate(-1.5deg);
  text-transform: uppercase;
}

.auth-right {
  padding: clamp(14px, 2.2vh, 22px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: rotate(1deg);
  position: relative;
  z-index: 1;
}
.tabs { display: flex; gap: 10px; }
.tab {
  flex: 1;
  font-family: var(--font);
  font-size: var(--fs-body);
  padding: 10px;
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.tab.active {
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--ink);
}
.auth-right form { display: flex; flex-direction: column; gap: 9px; }
.auth-right input {
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
}
.auth-right input:focus { outline: none; box-shadow: 3px 3px 0 var(--ink); }
.auth-error {
  background: var(--red);
  color: var(--white);
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: var(--font);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-align: center;
  box-shadow: 3px 3px 0 var(--ink);
  text-transform: uppercase;
  animation: shake .35s ease;
}
.auth-error[hidden] { display: none; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
.auth-right button[type="submit"] { width: 100%; padding: 14px; font-size: var(--fs-body); }
.divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.3em;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 3px; background: var(--ink); }
.oauth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: clamp(13px, 1.3vw, 15px);
  letter-spacing: 0.02em;
}
.oauth-logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.btn-black .oauth-apple { fill: var(--white); }
.btn-white .oauth-apple { fill: var(--ink); }

/* =========== HOME =========== */
.home-main {
  position: relative;
  z-index: 1;
  margin: auto;
  text-align: center;
}
.mega {
  font-family: var(--font);
  font-size: var(--fs-mega);
  line-height: 1;
  margin: 0;
  letter-spacing: -0.04em;
}
.tagline {
  font-family: var(--font);
  font-size: var(--fs-body);
  margin: 12px 0 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.home-meta {
  margin-top: clamp(18px, 3vh, 32px);
  display: flex; gap: 24px; justify-content: center;
}
.home-legal {
  margin-top: clamp(10px, 1.5vh, 14px);
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: clamp(11px, 1vw, 13px);
  opacity: 0.75;
}
.link-danger {
  color: var(--pink-dk, #ff5d8f) !important;
}
.link-danger:hover { text-decoration: underline; }
/* Delete-account confirm modal */
#delete-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4000;
  padding: 20px;
}
#delete-modal[hidden] { display: none; }
#delete-modal .modal-card {
  background: var(--white, #fff);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md, 8px 8px 0 var(--ink));
  padding: clamp(20px, 3vw, 32px);
  max-width: 480px;
  width: 100%;
  text-align: center;
}
#delete-modal h2 {
  font-family: var(--font);
  font-size: clamp(18px, 2vw, 24px);
  margin: 0 0 10px;
}
#delete-modal p {
  font-size: clamp(13px, 1.2vw, 15px);
  line-height: 1.45;
  margin: 0 0 20px;
}
#delete-modal .modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Force-upgrade overlay — blocks the entire app */
#upgrade-overlay {
  position: fixed;
  inset: 0;
  background: var(--yellow, #ffdf4a);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#upgrade-overlay[hidden] { display: none; }
#upgrade-overlay .upgrade-card {
  background: var(--white, #fff);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md, 8px 8px 0 var(--ink));
  padding: clamp(24px, 4vw, 40px);
  max-width: 520px;
  text-align: center;
}
#upgrade-overlay .upgrade-icon {
  font-size: clamp(40px, 6vw, 64px);
  margin-bottom: 8px;
}
#upgrade-overlay h2 {
  font-family: var(--font);
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: 0.02em;
  margin: 0 0 12px;
}
#upgrade-overlay p {
  font-size: clamp(14px, 1.3vw, 17px);
  margin: 0 0 20px;
}
.home-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.home-legal a:hover { opacity: 1; color: var(--pink-dk); }
.pay-legal {
  grid-column: 1 / -1;
  margin-top: 14px;
  font-size: clamp(10px, 0.9vw, 12px);
  line-height: 1.4;
  opacity: 0.7;
  text-align: center;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.pay-legal a { color: inherit; text-decoration: underline; }
.lang-toggle {
  display: inline-flex;
  border: var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--white);
}
.lang {
  padding: 9px 16px;
  font-family: var(--font);
  border: none;
  background: var(--white);
  cursor: pointer;
  font-size: var(--fs-body);
}
.lang.active { background: var(--purple-dk); color: var(--white); }
.lang + .lang { border-left: var(--border); }
.status-chip {
  background: var(--yellow);
  border: var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  font-family: var(--font);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* =========== TEAM SETUP =========== */
.split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(16px, 2.6vw, 28px);
  align-items: center;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.team-card {
  padding: clamp(26px, 4.4vh, 44px) clamp(22px, 3vw, 36px);
  text-align: center;
  transform: rotate(-1.5deg);
}
.team-card.team-b { transform: rotate(1.5deg); }
.team-a { background: var(--pink); }
.team-b { background: var(--purple); }
.team-tag {
  font-family: var(--font);
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
.team-card input {
  width: 100%;
  padding: clamp(18px, 3vh, 26px);
  font-size: clamp(26px, 3.2vw, 40px);
  font-family: var(--font);
  text-align: center;
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.team-card input:focus { outline: none; box-shadow: 4px 4px 0 var(--ink); }
.vs {
  font-family: var(--font);
  font-size: clamp(28px, 4vw, 44px);
  background: var(--ink);
  color: var(--yellow);
  width: clamp(64px, 8vw, 88px); height: clamp(64px, 8vw, 88px);
  border-radius: 50%;
  display: grid; place-items: center;
  transform: rotate(-6deg);
  box-shadow: var(--shadow);
}

/* =========== CATEGORY PICK =========== */
.cat-bar {
  gap: 12px;
  flex-wrap: wrap;
  /* Buffer so the active chip's shadow + pulse can never overlap the grid below */
  margin-bottom: clamp(18px, 2.4vh, 26px);
  padding-bottom: 6px;
}
.cat-bar-left, .cat-bar-right {
  display: flex; align-items: center; gap: 12px;
}
/* Team turn indicator chips — sit on opposite ends. Active one is bright + pulses; inactive is dimmed. */
.team-turn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: clamp(16px, 1.8vw, 22px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--white);
  color: #999;
  box-shadow: 4px 4px 0 var(--ink);
  opacity: 0.5;
  transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
}
.team-turn .tt-arrow { font-size: clamp(18px, 2vw, 22px); color: var(--ink); opacity: 0; transition: opacity .2s ease; }
.team-turn .tt-status { font-size: clamp(12px, 1.3vw, 16px); opacity: 0.8; font-weight: 900; }
.team-turn .tt-name { font-size: 1em; font-weight: 900; }
.team-turn.active {
  color: var(--ink);
  opacity: 1;
  transform: scale(1.05);
  /* Gentler, tightly-bounded shadow pulse so it never reaches the grid below */
  box-shadow: 5px 5px 0 var(--ink);
  animation: turnPulse 1.6s ease-in-out infinite;
}
.team-turn.active .tt-arrow { opacity: 1; animation: bobArrow 1.3s ease-in-out infinite; }
.team-turn-a.active { background: var(--pink); }
.team-turn-b.active { background: var(--purple); }
@keyframes turnPulse {
  0%, 100% { box-shadow: 4px 4px 0 var(--ink); }
  50%      { box-shadow: 7px 7px 0 var(--ink); }
}
@keyframes bobArrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
.sel-count {
  font-family: var(--font);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.category-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.category-grid {
  flex: 1;
  display: grid;
  /* Top-level: 9 categories fit on-screen without scrolling. Subcategories
     (up to 17) switch to a fixed-square layout via .subcat-mode below so
     every tile is the same size and a scrollbar kicks in when needed. */
  grid-template-columns: repeat(auto-fit, minmax(clamp(130px, 14vw, 180px), 1fr));
  grid-auto-rows: minmax(clamp(90px, 10vh, 130px), 1fr);
  gap: clamp(9px, 1.2vw, 14px);
  min-height: 0;
  overflow-y: auto;
  align-content: start;
  padding: 4px;
}
/* Subcategory view: uniform squares with a FIXED per-tile size (auto-fill
   with clamped min width). This guarantees:
   - every tile is the same size across every category (Girls/Women with 2 subs
     looks the same as Foreign Entertainment with 17);
   - the last row of a partially-filled grid keeps tile size (empty tracks
     stay empty — tiles never stretch to fill);
   - changing the sub count later can never break the layout.
   Scroll inside the grid kicks in only when tiles overflow. */
.category-grid.subcat-mode {
  grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 13vw, 170px), 1fr));
  grid-auto-rows: min-content;
  justify-content: start;
}
.category-grid.subcat-mode .subcat-tile {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: clamp(6px, 0.9vh, 10px);
  /* Zero rotation inside the scroll container so tiles can't clip at edges
     or visually overlap neighbors as rows wrap. */
  --rot: 0deg;
  transform: none;
}
.category-grid.subcat-mode .subcat-tile:hover {
  transform: translate(-1px, -1px);
}
.cat-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-family: var(--font);
  padding: 20px;
  opacity: 0.6;
}
.cat-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.cat-title {
  font-family: var(--font);
  font-size: clamp(12px, 1.4vw, 16px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}
.cat-top-name,
.subcat-name {
  font-family: var(--font);
  font-size: clamp(12px, 1.3vw, 17px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  text-align: center;
  padding: 0 6px;
}
.cat-top-meta,
.subcat-meta {
  font-family: var(--font);
  font-size: clamp(9px, 0.9vw, 11px);
  letter-spacing: 0.06em;
  opacity: 0.75;
  margin-top: 4px;
  text-transform: uppercase;
}
.category-tile {
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.05em;
  padding: clamp(8px, 1.1vh, 12px);
  transition: transform .08s ease, box-shadow .08s ease;
  text-transform: uppercase;
  position: relative;
}
.category-tile:hover { transform: translate(-1px, -1px) rotate(var(--rot)); box-shadow: 6px 6px 0 var(--ink); }
/* Explicit per-position colors (12 tiles, 6 cols × 2 rows)
   Stacked tiles in the same column NEVER share a color. */
/* Cycle through 6 theme colors + slight rotations. Works for 9 top-level
   categories and up to 17 subcategories (Foreign Entertainment). */
.category-tile:nth-child(6n+1) { background: var(--green);   --rot: -1.5deg; }
.category-tile:nth-child(6n+2) { background: var(--pink);    --rot: 1deg; }
.category-tile:nth-child(6n+3) { background: var(--yellow);  --rot: -0.5deg; }
.category-tile:nth-child(6n+4) { background: var(--purple);  --rot: 1.5deg; }
.category-tile:nth-child(6n+5) { background: var(--orange);  --rot: -1deg; }
.category-tile:nth-child(6n+6) { background: var(--pink-dk); --rot: 0.8deg; color: var(--white); }
.category-tile { transform: rotate(var(--rot)); }
/* Top-level category tiles: keep the colored card + hard shadow but zero
   the rotation so tiles can never tilt into their neighbors. The rotation
   was purely decorative; dropping it is the robust long-term fix. */
.category-tile.cat-top {
  --rot: 0deg;
  transform: none;
}
.category-tile.cat-top:hover { transform: translate(-1px, -1px); }
.category-tile.picked {
  opacity: 0.55;
  filter: grayscale(0.2);
  cursor: pointer;
  position: relative;
}
.category-tile.picked.picked-a {
  box-shadow: 0 0 0 3px var(--pink-dk), var(--shadow-sm);
}
.category-tile.picked.picked-b {
  box-shadow: 0 0 0 3px var(--purple-dk), var(--shadow-sm);
}
.category-tile.picked::after {
  content: "✓";
  position: absolute;
  top: 4px; right: 4px;
  width: clamp(18px, 2.4vw, 24px);
  height: clamp(18px, 2.4vw, 24px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: clamp(11px, 1.3vw, 14px);
  border: 2px solid var(--ink);
  line-height: 1;
  background: var(--white);
}
.category-tile.picked.picked-a::after { background: var(--pink-dk); color: var(--white); }
.category-tile.picked.picked-b::after { background: var(--purple-dk); color: var(--white); }
body[dir="rtl"] .category-tile.picked::after { right: auto; left: 4px; }
.category-tile.flash-a { animation: flashA .5s ease; }
.category-tile.flash-b { animation: flashB .5s ease; }
@keyframes flashA { 50% { background: var(--pink-dk) !important; color: var(--white); } }
@keyframes flashB { 50% { background: var(--purple-dk) !important; color: var(--white); } }
.cat-icon {
  width: clamp(30px, 3.6vw, 42px);
  height: clamp(30px, 3.6vw, 42px);
  display: block;
}
.category-tile:nth-child(6) .cat-icon svg,
.category-tile:nth-child(9) .cat-icon svg { fill: var(--white); }
.cat-icon svg { width: 100%; height: 100%; fill: var(--ink); }
.cat-icon img.img-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Art tile — image fits inside the card with minimal padding so it reads prominently.
   keyout-white filter makes JPEG white edges transparent so theme color shows through. */
.category-tile.has-art,
.board-cat.has-art {
  padding: clamp(3px, 0.5vh, 6px) !important;
  overflow: hidden;
  gap: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.art-fill {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Keys out white background; image's own colors are preserved exactly */
  filter: url(#keyout-white);
}

.cat-hint {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  font-family: var(--font);
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  align-self: center;
  box-shadow: 3px 3px 0 var(--ink);
  text-transform: uppercase;
}

/* =========== Picks row — shows each team's selected categories =========== */
.picks-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.5vw, 16px);
  margin-bottom: clamp(6px, 1vh, 10px);
  flex-shrink: 0;
}
.picks-card {
  border: var(--border-thin);
  border-radius: var(--radius-sm);
  box-shadow: 3px 3px 0 var(--ink);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  flex-wrap: wrap;
}
.picks-card.picks-a { background: var(--pink);   transform: rotate(-0.4deg); }
.picks-card.picks-b { background: var(--purple); transform: rotate(0.4deg); }
.picks-label {
  flex-shrink: 0;
  padding: 4px 10px;
  background: var(--ink);
  color: var(--white);
  border-radius: 4px;
  font-family: var(--font);
  font-size: clamp(10px, 1.1vw, 12px);
  letter-spacing: 0.1em;
}
.picks-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex: 1;
  min-height: 18px;
}
.pick-chip {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 2px 10px;
  font-family: var(--font);
  font-size: clamp(9px, 1vw, 11px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  animation: pickChipPop 0.28s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--ink);
}
.picks-empty {
  font-family: var(--font);
  font-size: clamp(10px, 1.1vw, 12px);
  opacity: 0.5;
  letter-spacing: 0.1em;
}
@keyframes pickChipPop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}

/* =========== BOARD =========== */
.board-bar { gap: 8px; flex-wrap: nowrap; margin-bottom: 10px; }
.score-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: var(--border-thin);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--font);
}
.score-chip.score-a { background: var(--pink); }
.score-chip.score-b { background: var(--purple); }
.score-name {
  font-size: clamp(12px, 1.2vw, 15px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.score-val {
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1;
  background: var(--ink);
  color: var(--white);
  padding: 3px 8px;
  border-radius: 3px;
}
.board-meta {
  font-family: var(--font);
  background: var(--yellow);
  padding: 6px 12px;
  border: var(--border-thin);
  border-radius: 4px;
  font-size: clamp(11px, 1.1vw, 13px);
  box-shadow: 3px 3px 0 var(--ink);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex: 1;
  text-align: center;
  max-width: 280px;
}
.turn-display {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  justify-content: center;
  /* vertical padding gives the bob animation headroom so it never clips or collides */
  padding: 6px 0;
}
.turn-label {
  font-family: var(--font);
  font-size: clamp(14px, 1.5vw, 18px);
  letter-spacing: 0.2em;
}
.turn-pill {
  background: var(--pink);
  border: var(--border);
  border-radius: 999px;
  padding: 12px 24px;
  font-family: var(--font);
  font-size: clamp(16px, 1.8vw, 22px);
  box-shadow: 4px 4px 0 var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Gentle vertical bob — single axis, no rotation/scale, won't collide with neighbors */
  animation: turnBob 2.4s ease-in-out infinite;
  will-change: transform;
}
.turn-pill.team-b { background: var(--purple); }
@keyframes turnBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.board-main { flex: 1; display: flex; min-height: 0; }
.board-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: clamp(88px, 14vh, 126px) repeat(6, 1fr);
  gap: clamp(6px, 0.8vw, 10px);
  row-gap: clamp(8px, 1vh, 12px);
}
.board-cat {
  background: var(--purple);
  border: var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 4px 4px 0 var(--ink);
  padding: 6px 10px;
  font-family: var(--font);
  font-size: clamp(11px, 1.2vw, 15px);
  letter-spacing: 0.06em;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-transform: uppercase;
  overflow: hidden;
}
/* Distinct per-category header colors so the 6 categories read apart */
.board-cat:nth-child(1) { background: var(--green); }
.board-cat:nth-child(2) { background: var(--pink); }
.board-cat:nth-child(3) { background: var(--yellow); }
.board-cat:nth-child(4) { background: var(--purple); }
.board-cat:nth-child(5) { background: var(--orange); }
.board-cat:nth-child(6) { background: var(--pink-dk); color: var(--white); }
.board-cat:nth-child(6) .cat-icon svg { fill: var(--white); }
.board-cat .cat-icon {
  width: clamp(22px, 2.4vw, 30px);
  height: clamp(22px, 2.4vw, 30px);
  flex-shrink: 0;
}
.board-cat .cat-icon svg { fill: var(--ink); }
.board-cat-name {
  font-family: var(--font);
  letter-spacing: 0.06em;
  font-weight: 900;
}

.board-cell {
  border: var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 4px 4px 0 var(--ink);
  display: grid; place-items: center;
  font-family: var(--font);
  font-size: clamp(22px, 2.6vw, 36px);
  cursor: pointer;
  background: var(--white);
  transition: transform .08s ease, box-shadow .08s ease;
  letter-spacing: 0.02em;
}
/* Tinted point cells — subtle color per difficulty so the 6 rows read as a gradient of stakes */
.board-cell.diff-easy   { background: #e4f5df; }
.board-cell.diff-medium { background: #fff4c9; }
.board-cell.diff-hard   { background: #ffe1c2; }
.board-cell:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.board-cell.used {
  background: #e4e0d6; color: #a9a396; cursor: not-allowed; pointer-events: none;
  text-decoration: line-through; box-shadow: 2px 2px 0 #aaa;
}

/* =========== PLAY =========== */
.play-bar { gap: 10px; }
.play-center {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--font);
}
.cat-icon-md {
  width: clamp(24px, 2.4vw, 32px);
  height: clamp(24px, 2.4vw, 32px);
  display: inline-block;
}
.cat-icon-md svg { width: 100%; height: 100%; fill: var(--ink); }
.cat-name-sm { font-size: var(--fs-small); letter-spacing: 0.05em; }
.pts-sm {
  background: var(--yellow);
  border: var(--border-thin);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: var(--fs-small);
}
.play-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr clamp(180px, 22vw, 240px);
  gap: clamp(12px, 1.6vw, 20px);
  min-height: 0;
  margin-top: 4px;
}
.question-card {
  background: var(--white);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(20px, 3.2vh, 34px) clamp(24px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  overflow: auto;
}
.q-label {
  align-self: flex-start;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
  padding: 3px 10px;
  border-radius: 4px;
}
.q-text {
  font-family: var(--font);
  font-size: clamp(22px, 3vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}
.q-image-wrap img,
.a-image-wrap img {
  max-height: 180px;
  border: var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}
.a-image-wrap {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.play-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.answering-chip {
  background: var(--pink);
  border: var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.answering-chip.team-b { background: var(--purple); }
.answering-chip .label {
  font-family: var(--font);
  font-size: clamp(12px, 1.3vw, 15px);
  letter-spacing: 0.2em;
}
.answering-chip .team-name {
  font-family: var(--font);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1;
}
.timer-big {
  background: var(--yellow);
  border: var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 16px 0;
  text-align: center;
  font-family: var(--font);
  font-size: var(--fs-timer);
  letter-spacing: 0.05em;
  line-height: 1;
}
.timer-big.warn { background: var(--orange); }
.timer-big.danger { background: var(--red); color: var(--white); animation: pulse .5s infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.05); } }
.btn-done { font-size: clamp(16px, 2vw, 22px); padding: clamp(12px, 2vh, 18px) 0; letter-spacing: 0.15em; }
/* SHOW ANSWER sits under DONE — always reveals instantly from any phase. */
.btn-show-answer {
  font-size: clamp(13px, 1.6vw, 17px);
  padding: clamp(10px, 1.6vh, 14px) 0;
  letter-spacing: 0.1em;
  margin-top: 4px;
}
/* When the second-team timer hits 0 the SHOW ANSWER button pulses so the
   room's eye is drawn to the next action. */
.btn-show-answer.btn-expired {
  animation: expiredPulse 1.1s ease-in-out infinite;
}
@keyframes expiredPulse {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50%      { box-shadow: 7px 7px 0 var(--ink); }
}
.timer-big.expired {
  background: var(--red);
  color: var(--white);
  animation: pulse .55s infinite alternate;
}

/* =========== REVEAL =========== */
#screen-reveal { background: var(--orange); }
.reveal-bar { margin-bottom: 6px; }
.reveal-inner {
  margin: auto;
  max-width: 1100px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}
.answer-pill {
  background: var(--yellow);
  border: var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 12px 22px;
  display: inline-flex;
  gap: 14px;
  align-items: center;
  transform: rotate(-1.5deg);
  flex-wrap: wrap;
  justify-content: center;
}
.answer-label {
  background: var(--ink);
  color: var(--white);
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--font);
  font-size: var(--fs-small);
  letter-spacing: 0.2em;
}
.answer-text {
  font-family: var(--font);
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: -0.01em;
}
.reveal-q {
  font-family: var(--font);
  font-size: clamp(22px, 2.8vw, 32px);
  margin: 4px 0 0;
  letter-spacing: 0.02em;
}
.reveal-sub {
  font-family: var(--font);
  font-size: var(--fs-small);
  margin: 0 0 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: .85;
}
.award-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(14px, 2vw, 24px);
  width: 100%;
  margin-top: 6px;
}
.award-card {
  position: relative;
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(14px, 2vh, 20px) 16px;
  font-family: var(--font);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: clamp(120px, 18vh, 160px);
  justify-content: center;
  transition: transform .08s ease, box-shadow .08s ease;
}
.award-card:hover { transform: translate(-2px,-2px); box-shadow: 10px 10px 0 var(--ink); }
.award-a { background: var(--pink); transform: rotate(-2deg); }
.award-b { background: var(--purple); transform: rotate(1deg); }
.award-none { background: var(--white); transform: rotate(-1deg); }
.award-card .mark {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: clamp(20px, 2vw, 28px);
  font-family: var(--font);
  line-height: 1;
}
body[dir="rtl"] .award-card .mark { left: auto; right: 14px; }
.aw-name { font-size: clamp(24px, 2.8vw, 34px); letter-spacing: 0.02em; }
.aw-sub { font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; }
.aw-pts { font-size: clamp(18px, 2.2vw, 26px); }

/* =========== WIN =========== */
#screen-end { background: var(--yellow); }
.deco-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.end-inner {
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.winner-label {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font);
  padding: 5px 14px;
  border-radius: 4px;
  letter-spacing: 0.2em;
  font-size: var(--fs-small);
}
.winner-name-pill {
  background: var(--purple);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(14px, 2.5vh, 22px) clamp(30px, 5vw, 50px);
  transform: rotate(-2deg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.winner-name {
  font-family: var(--font);
  font-size: clamp(32px, 5vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.winner-sub {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.final-scores {
  display: flex;
  gap: 14px;
  margin-top: 4px;
}
.final-chip {
  border: var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  padding: 8px 20px;
  font-family: var(--font);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.final-chip span { font-size: clamp(14px, 1.6vw, 18px); letter-spacing: 0.08em; text-transform: uppercase; }
.final-chip b { font-size: clamp(24px, 3vw, 34px); font-weight: 900; }
.final-a { background: var(--pink); transform: rotate(-1.5deg); }
.final-b { background: var(--purple); transform: rotate(1.5deg); }
.end-actions { margin-top: 8px; display: flex; gap: 12px; }

.confetti {
  position: absolute;
  width: 18px; height: 18px;
  border: var(--border-thin);
  will-change: transform;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
/* Positions + shape + animation variant. Durations staggered so the
   movement feels organic rather than synchronized. */
.c1  { top: 10%;    left: 12%;  background: var(--pink);     animation: confA 11s infinite; }
.c2  { top: 22%;    left: 22%;  background: var(--purple);   border-radius: 50%;
       animation: confB 14s infinite; }
.c3  { top: 14%;    left: 32%;  background: var(--green-dk);
       clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
       animation: confC 9s infinite; }
.c4  { top: 28%;    left: 8%;   background: var(--orange);   animation: confA 15s infinite reverse; }
.c5  { bottom: 14%; right: 10%; background: var(--pink-dk);  animation: confB 12s infinite reverse; }
.c6  { bottom: 24%; right: 20%; background: var(--purple);   border-radius: 50%;
       animation: confC 14s infinite reverse; }
.c7  { top: 10%;    right: 18%; background: var(--green-dk); animation: confA 10s infinite; }
.c8  { top: 40%;    left: 45%;  background: var(--yellow);   border-radius: 50%;
       animation: confB 13s infinite; }
.c9  { bottom: 10%; left: 28%;  background: var(--pink);
       clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
       animation: confC 11s infinite reverse; }
.c10 { top: 50%;    right: 6%;  background: var(--orange);   animation: confA 12s infinite reverse; }
.c11 { bottom: 30%; left: 5%;   background: var(--purple);   animation: confB 16s infinite; }
.c12 { top: 62%;    left: 60%;  background: var(--green-dk); border-radius: 50%;
       animation: confC 13s infinite; }

/* Three independent drift patterns so the 12 pieces never look in sync */
@keyframes confA {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%      { transform: translate(40px, 30px) rotate(90deg); }
  50%      { transform: translate(-25px, 60px) rotate(180deg); }
  75%      { transform: translate(-35px, -15px) rotate(270deg); }
}
@keyframes confB {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%      { transform: translate(-35px, 45px) rotate(120deg) scale(1.15); }
  66%      { transform: translate(40px, -25px) rotate(240deg) scale(0.9); }
}
@keyframes confC {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20%      { transform: translate(25px, -30px) rotate(72deg); }
  40%      { transform: translate(-20px, -50px) rotate(144deg); }
  60%      { transform: translate(-40px, 10px) rotate(216deg); }
  80%      { transform: translate(15px, 35px) rotate(288deg); }
}
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .confetti { animation: none !important; }
}

/* =========== PAYMENT =========== */
.payment-main {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}
.pay-card {
  position: relative;
  text-align: center;
  transform: rotate(-1deg);
}
.pay-card.pay-monthly { transform: rotate(0.5deg); }
.pay-card.pay-yearly { transform: rotate(1deg) scale(1.04); }
.pay-card h3 {
  font-family: var(--font);
  font-size: clamp(20px, 2.6vw, 28px);
  margin: 0 0 4px;
}
.pay-price {
  font-family: var(--font);
  font-size: clamp(32px, 4.6vw, 56px);
  letter-spacing: -0.03em;
  margin: 4px 0 12px;
}
.pay-price span { font-size: clamp(12px, 1.4vw, 18px); opacity: 0.7; }
.pay-card ul { list-style: none; padding: 0; margin: 0 0 14px; text-align: left; }
.pay-card li {
  padding: 6px 0;
  font-weight: 800;
  border-bottom: 2px dashed var(--ink);
  font-size: var(--fs-small);
}
.pay-card li::before {
  content: "✓";
  background: var(--ink);
  color: var(--green);
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
  font-weight: 900;
}
body[dir="rtl"] .pay-card li::before { margin-right: 0; margin-left: 8px; }
.pay-weekly  { background: var(--green); }
.pay-monthly { background: var(--yellow); }
.pay-yearly  { background: var(--pink); }
.pay-badge {
  position: absolute;
  top: -14px;
  right: 20px;
  background: var(--ink);
  color: var(--yellow);
  padding: 6px 12px;
  font-family: var(--font);
  font-size: var(--fs-small);
  letter-spacing: 0.15em;
  border-radius: 6px;
  transform: rotate(4deg);
}
body[dir="rtl"] .pay-badge { right: auto; left: 20px; }
.pay-card .btn { width: 100%; }

/* =========== STAGE STRIP (bottom nav) =========== */
#stage-strip {
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  height: 44px;
  background: var(--bg);
  border-top: var(--border-thin);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 calc(14px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(14px + env(safe-area-inset-left));
  z-index: 20;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.stg {
  background: var(--white);
  border: var(--border-thin);
  border-radius: 6px;
  padding: 5px 11px;
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.stg:hover { transform: translate(-1px,-1px); }
.stg.active { background: var(--ink); color: var(--white); }

/* =========== Small-screen safety =========== */
@media (max-height: 560px) {
  .auth-tagline { font-size: clamp(16px, 2.4vw, 22px); }
  .brand-pill { font-size: clamp(36px, 5vw, 56px); padding: 8px 20px; }
  #stage-strip { height: 36px; }
  .screen { inset: 0 0 36px 0; }
}
@media (max-width: 900px) {
  .payment-main { grid-template-columns: 1fr; gap: 10px; overflow-y: auto; }
  .pay-card { transform: none !important; }
}

/* =========== iPhone-specific (landscape) =========== */
/* iPhone landscape heights (14/15 Pro Max: ~430px, SE: ~375px) */
@media (max-height: 460px) and (orientation: landscape) {
  #stage-strip { height: 32px; padding-top: 2px; padding-bottom: 2px; }
  .stg { padding: 3px 8px; font-size: 10px; box-shadow: 2px 2px 0 var(--ink); }
  .screen { inset: 0 0 32px 0; padding-top: 10px; padding-bottom: 6px; }
  .mega { font-size: clamp(48px, 12vw, 80px); }
  .brand-pill { font-size: clamp(36px, 8vw, 52px); padding: 8px 18px; }
  .btn-huge { font-size: clamp(24px, 6vw, 34px); padding: 14px 40px; }
  .auth-tagline { font-size: clamp(14px, 3.2vw, 20px); }
  .team-card { padding: 14px 16px; }
  .team-card input { font-size: clamp(18px, 4vw, 26px); padding: 10px; }
  .team-tag { font-size: clamp(14px, 2.6vw, 18px); margin-bottom: 8px; }
  .vs { width: clamp(52px, 10vw, 68px); height: clamp(52px, 10vw, 68px); font-size: clamp(22px, 5vw, 32px); }
  .tagline { font-size: clamp(12px, 2.4vw, 16px); }
}

/* Ensure tappable elements meet the 44×44 Apple HIG minimum on touch devices */
@media (hover: none) and (pointer: coarse) {
  .btn, .btn-back, .btn-icon, .stg, .lang, .tab, .category-tile, .board-cell {
    min-height: 36px;
  }
  .btn { padding-top: 12px; padding-bottom: 12px; }
  /* prevent iOS auto-zoom on inputs (requires font-size >= 16px) */
  input { font-size: 16px; }
  .team-card input { font-size: clamp(22px, 4vw, 32px); } /* override for team inputs */
  .auth-right input { font-size: 16px; }
}

/* =====================================================
   PORTRAIT — phones & tablets held upright.
   Reflows every screen to a single column, shrinks the
   board, and lets screens scroll rather than blocking
   the player with a rotate prompt.
   ===================================================== */
@media (orientation: portrait) {
  :root {
    /* Drop the landscape-biased ratio so fluid sizes scale off the narrower side */
    --fluid-unit: min(100vw, 100vh);
  }

  .screen {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: clamp(10px, 2vh, 16px)
             calc(clamp(12px, 3vw, 22px) + env(safe-area-inset-right))
             clamp(10px, 1.5vh, 14px)
             calc(clamp(12px, 3vw, 22px) + env(safe-area-inset-left));
    gap: 0;
  }

  /* Top bars wrap; kill spacer placeholders that waste horizontal room */
  .top-bar { flex-wrap: wrap; row-gap: 8px; }
  .spacer, .spacer-sm { display: none; }

  /* ---- AUTH ---- */
  .auth-wrap {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    padding: 4px 0 16px;
    align-items: start;
  }
  .auth-left { align-items: center; text-align: center; }
  .auth-tagline br { display: none; }
  .auth-tagline { font-size: clamp(18px, 5vw, 28px); }
  .auth-right { transform: none; }
  .oauth { grid-template-columns: 1fr 1fr; }

  /* ---- HOME ---- */
  .home-main { padding: 4vh 0; }

  /* ---- TEAM SETUP ---- */
  .split {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto 1fr;
    max-width: 460px;
    gap: 14px;
    padding: 6px 0;
  }
  .team-card,
  .team-card.team-b { transform: none; }
  .team-card { padding: clamp(18px, 3vh, 26px) clamp(16px, 4vw, 22px); }
  .team-card input { font-size: clamp(22px, 5.5vw, 32px); padding: clamp(14px, 2.4vh, 18px); }
  .team-tag { margin-bottom: 10px; font-size: clamp(14px, 3.4vw, 20px); }
  .vs {
    width: clamp(54px, 14vw, 72px);
    height: clamp(54px, 14vw, 72px);
    font-size: clamp(22px, 5vw, 32px);
    margin: 0 auto;
  }

  /* ---- CATEGORY PICK ---- */
  .cat-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .cat-bar-left, .cat-bar-right {
    justify-content: space-between;
    width: 100%;
  }
  .sel-count { text-align: center; }
  .team-turn { padding: 10px 14px; gap: 6px; }
  .team-turn .tt-name { font-size: clamp(13px, 3.4vw, 18px); }
  .team-turn .tt-status { font-size: clamp(10px, 2.4vw, 13px); }
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, minmax(80px, 1fr));
    gap: 8px;
  }
  .category-tile {
    font-size: clamp(10px, 2.4vw, 13px);
    padding: 6px;
  }
  .category-tile .cat-icon {
    width: clamp(34px, 10vw, 54px);
    height: clamp(34px, 10vw, 54px);
  }

  /* ---- BOARD ---- */
  .board-bar {
    flex-wrap: wrap;
    row-gap: 6px;
    gap: 6px;
    margin-bottom: 6px;
  }
  .turn-display {
    order: 10;
    width: 100%;
    justify-content: center;
    padding: 0;
  }
  .turn-label { font-size: clamp(11px, 2.8vw, 14px); letter-spacing: 0.15em; }
  .turn-pill {
    padding: 8px 16px;
    font-size: clamp(12px, 3.4vw, 16px);
    box-shadow: 3px 3px 0 var(--ink);
  }
  .score-chip { padding: 5px 9px; }
  .score-name { font-size: clamp(10px, 2.6vw, 13px); }
  .score-val { font-size: clamp(13px, 3.4vw, 17px); padding: 2px 6px; }
  .board-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: clamp(54px, 9vh, 78px) repeat(6, minmax(38px, 1fr));
    gap: 4px;
    row-gap: 5px;
  }
  .board-cell {
    font-size: clamp(13px, 3.6vw, 22px);
    box-shadow: 3px 3px 0 var(--ink);
    border-width: 3px;
  }
  .board-cat {
    font-size: clamp(9px, 2.1vw, 12px);
    padding: 3px 2px;
    box-shadow: 3px 3px 0 var(--ink);
    border-width: 3px;
  }
  .board-cat.has-art { padding: 2px !important; }
  .board-cat .cat-icon { display: none; }

  /* ---- PLAY ---- */
  .play-bar { gap: 6px; }
  .play-center {
    padding: 4px 10px;
    font-size: var(--fs-small);
    box-shadow: 3px 3px 0 var(--ink);
  }
  .play-main {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    gap: 10px;
  }
  .question-card {
    padding: clamp(16px, 3vh, 24px) clamp(16px, 4vw, 22px);
    box-shadow: 5px 5px 0 var(--ink);
  }
  .q-text { font-size: clamp(18px, 4.8vw, 28px); }
  .play-side {
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
  }
  .play-side > * { flex: 1; min-width: 0; }
  .answering-chip {
    padding: 8px 10px;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .answering-chip .team-name { font-size: clamp(14px, 3.6vw, 20px); }
  .answering-chip .label { font-size: clamp(10px, 2.4vw, 13px); }
  .timer-big {
    padding: 10px 6px;
    font-size: clamp(22px, 6vw, 36px);
    box-shadow: 4px 4px 0 var(--ink);
  }
  .btn-done {
    padding: clamp(12px, 2vh, 16px) 6px;
    font-size: clamp(13px, 3.4vw, 18px);
    letter-spacing: 0.06em;
  }
  /* Let SHOW ANSWER span the full row under answering-chip | timer | DONE */
  .play-side { flex-wrap: wrap; }
  .play-side > .btn-show-answer {
    flex: 1 1 100%;
    padding: clamp(10px, 1.6vh, 14px) 6px;
    font-size: clamp(11px, 3vw, 15px);
    margin-top: 0;
  }

  /* ---- REVEAL ---- */
  .reveal-inner { gap: 10px; padding: 0 6px; }
  .answer-pill { padding: 10px 16px; transform: rotate(-1deg); }
  .answer-text { font-size: clamp(18px, 4.6vw, 28px); }
  .reveal-q { font-size: clamp(18px, 4.6vw, 26px); }
  .award-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .award-card {
    min-height: 62px;
    flex-direction: row;
    gap: 12px;
    justify-content: flex-start;
    padding: 10px 14px;
    transform: none;
  }
  .award-card .mark {
    position: static;
    font-size: clamp(16px, 4vw, 22px);
  }
  body[dir="rtl"] .award-card .mark { left: auto; right: auto; }
  .aw-name { font-size: clamp(15px, 4vw, 22px); }
  .aw-sub { display: none; }
  .aw-pts { font-size: clamp(14px, 3.4vw, 18px); margin-left: auto; }
  body[dir="rtl"] .aw-pts { margin-left: 0; margin-right: auto; }

  /* ---- END ---- */
  .winner-name { font-size: clamp(28px, 8vw, 48px); }
  .final-scores { flex-direction: column; gap: 10px; align-items: center; }
  .final-chip { min-width: 180px; transform: none; }
  .end-actions { flex-direction: column; width: 100%; max-width: 280px; align-items: stretch; }
  .end-actions .btn { width: 100%; }

  /* ---- PAYMENT (already stacks at max-width:900px; match vertical pacing) ---- */
  .pay-card { transform: none !important; }
  .pay-price { font-size: clamp(28px, 7vw, 44px); margin: 2px 0 10px; }

  /* ---- STAGE STRIP ---- */
  #stage-strip {
    height: 40px;
    justify-content: flex-start;
    gap: 4px;
    padding: 0 calc(10px + env(safe-area-inset-right)) env(safe-area-inset-bottom) calc(10px + env(safe-area-inset-left));
  }
  .stg { padding: 4px 8px; font-size: 10px; box-shadow: 2px 2px 0 var(--ink); }
  .screen { inset: 0 0 40px 0; }
}

/* Ultra-narrow phones — iPhone SE, small Androids */
@media (orientation: portrait) and (max-width: 380px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, minmax(64px, 1fr));
  }
  .oauth { grid-template-columns: 1fr; }
  .board-grid {
    grid-template-rows: clamp(48px, 8vh, 64px) repeat(6, minmax(34px, 1fr));
  }
  .board-cell { font-size: clamp(12px, 3.4vw, 18px); }
}

/* Tall portrait (phones) — give the board a bit more room since vertical is cheap */
@media (orientation: portrait) and (min-aspect-ratio: 1/2.1) and (max-aspect-ratio: 1/1) {
  .board-grid {
    grid-template-rows: clamp(60px, 10vh, 88px) repeat(6, minmax(44px, 1fr));
  }
}

/* Hide iPhone home-indicator gap visually padding the stage strip on notched devices */
@supports (padding: env(safe-area-inset-bottom)) {
  #stage-strip { padding-bottom: max(env(safe-area-inset-bottom), 0px); }
}