:root {
  --purple: #6f3fa8;
  --purple-dark: #4e2d7d;
  --purple-mid: #5d3793;
  --orange: #ff7a37;
  --green: #39b916;
  --hex-fill: #f1f1f1;
  --hex-stroke: #6a3aa4;
  --hex-letter: #6a3aa4;
  --modal-bg: #2a1942d6;
  --ui-font: "Tajawal", sans-serif;
  --title-font: "Lalezar", cursive;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--ui-font);
  background: #2f1c49;
  color: #fff;
}

.app {
  direction: ltr;
  width: 100vw;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: 1fr;
}

.app-header {
  display: none;
}

.board-shell {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--orange);
  border-right: 6px solid var(--purple-dark);
}

.board-shell::before,
.board-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--green);
}

.board-shell::before {
  /*
    Top green band anchored to the top outer sharp corners of the hex grid.
    Points are injected from JS as CSS variables.
  */
  clip-path: polygon(
    0 0,
    100% 0,
    var(--bg-top-right-x, 72%) var(--bg-top-y, 18%),
    var(--bg-top-left-x, 28%) var(--bg-top-y, 18%)
  );
}

.board-shell::after {
  /*
    Bottom green band anchored to the bottom outer sharp corners of the hex grid.
  */
  clip-path: polygon(
    0 100%,
    100% 100%,
    var(--bg-bottom-right-x, 72%) var(--bg-bottom-y, 82%),
    var(--bg-bottom-left-x, 28%) var(--bg-bottom-y, 82%)
  );
}

.board-canvas {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem 1.4rem;
}

#board {
  width: min(840px, 100%);
  height: auto;
  display: block;
}

.toolbar {
  grid-column: 2;
  grid-row: 1;
  background: var(--purple);
  border-left: 4px solid #4a2a77;
  padding: 1.4rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  direction: rtl;
}

.session-pill {
  width: min(180px, 100%);
  border: 2px solid var(--purple-dark);
  border-radius: 14px;
  background: #ffffff1a;
  padding: 0.42rem 0.6rem;
  text-align: center;
  line-height: 1.25;
}

.session-pill span {
  display: block;
  font-size: 0.82rem;
  color: #ecdfff;
}

.session-pill strong {
  display: block;
  margin-top: 0.12rem;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: #fff;
}

.round-title {
  margin: 1.3rem 0 0;
  line-height: 0.9;
  text-align: center;
  font-family: var(--title-font);
  font-size: clamp(3rem, 5vw, 4.6rem);
  font-weight: 400;
}

.round-title span {
  display: block;
}

.word-red {
  color: #ff473f;
  text-shadow: 0 4px 0 #46195f, 0 5px 12px #0000004a;
}

.word-yellow {
  color: #f0d329;
  text-shadow: 0 4px 0 #2f2f2f, 0 5px 12px #0000004a;
}

.score-card {
  direction: ltr;
  margin-top: 0.6rem;
  margin-bottom: 0.4rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.score-hex {
  width: 74px;
  height: 66px;
  clip-path: polygon(50% 0%, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
  border: 4px solid var(--purple-dark);
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px #00000024;
}

.score-hex strong {
  font-family: var(--title-font);
  font-weight: 400;
  font-size: 2rem;
  color: #182010;
  line-height: 1;
}

.score-hex.green {
  background: var(--green);
}

.score-hex.orange {
  background: var(--orange);
}

.score-name {
  width: 92px;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 800;
  color: #f0e4ff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.turn-card,
.board-fixed {
  display: none;
}

.host-buzzer-panel {
  width: min(220px, 100%);
  border: 2px solid #4a2a77;
  border-radius: 12px;
  background: #ffffff14;
  padding: 0.45rem 0.55rem;
  text-align: center;
  line-height: 1.3;
}

.host-buzzer-label {
  display: block;
  color: #eadbff;
  font-size: 0.82rem;
  font-weight: 700;
}

#hostBuzzerText {
  display: block;
  margin-top: 0.2rem;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
}

.actions {
  margin-top: auto;
  width: min(170px, 100%);
  display: grid;
  gap: 0.45rem;
}

.actions button {
  min-height: 2.2rem;
  border: 2px solid #4a2a77;
  border-radius: 10px;
  background: #f4effe;
  color: #432a69;
  font-size: 0.93rem;
  font-weight: 800;
  cursor: pointer;
}

.actions button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.mobile-sidebar-toggle {
  position: fixed;
  inset-inline-end: 0.7rem;
  top: max(0.7rem, env(safe-area-inset-top));
  min-height: 2.3rem;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  border: 2px solid #4a2a77;
  background: #f5efff;
  color: #3f2a63;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  z-index: 74;
  display: none;
  box-shadow: 0 10px 18px #00000033;
}

.mobile-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: #180f2bc7;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  z-index: 73;
}

body.mobile-sidebar-mode {
  overflow: hidden;
}

body.mobile-sidebar-mode .app {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  min-height: 100dvh;
}

body.mobile-sidebar-mode .board-shell {
  grid-column: 1;
  grid-row: 1;
  position: fixed;
  inset: 0;
  border-right: 0;
  border-bottom: 0;
  min-height: 100dvh;
  z-index: 1;
}

body.mobile-sidebar-mode .board-canvas {
  min-height: 100dvh;
  padding: 0.45rem;
}

body.mobile-sidebar-mode #board {
  width: 100%;
  max-height: 100dvh;
}

body.mobile-sidebar-mode .toolbar {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  width: min(320px, 86vw);
  max-width: 86vw;
  z-index: 75;
  transform: translateX(108%);
  transition: transform 220ms ease;
  border-left: 4px solid #4a2a77;
  border-bottom: 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
  padding: max(0.9rem, env(safe-area-inset-top)) 0.7rem 1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  pointer-events: none;
}

body.mobile-sidebar-mode .round-title {
  order: initial;
  width: auto;
  margin: 0.2rem 0 0;
}

body.mobile-sidebar-mode .score-card {
  margin: 0.3rem 0;
  width: 100%;
}

body.mobile-sidebar-mode .session-pill {
  width: min(190px, 100%);
}

body.mobile-sidebar-mode .host-buzzer-panel {
  width: min(210px, 100%);
}

body.mobile-sidebar-mode .actions {
  width: min(190px, 100%);
  margin-top: auto;
}

body.mobile-sidebar-mode .mobile-sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.mobile-sidebar-mode.sidebar-open .toolbar {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}

body.mobile-sidebar-mode.sidebar-open .mobile-sidebar-backdrop {
  opacity: 1;
  pointer-events: auto;
}

body.mobile-sidebar-mode .modal {
  z-index: 72;
  padding: 0.45rem;
  place-items: center;
}

body.mobile-sidebar-mode .modal-card {
  width: min(560px, calc(100vw - 0.9rem));
  max-height: calc(100dvh - 0.9rem);
  padding: 0.72rem 0.78rem;
  border-radius: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.mobile-sidebar-mode .modal-card h2 {
  font-size: 1.3rem;
}

body.mobile-sidebar-mode .modal-meta {
  margin-top: 0.4rem;
  font-size: 0.9rem;
}

body.mobile-sidebar-mode #questionText {
  margin-top: 0.65rem;
  font-size: 1.16rem;
  line-height: 1.6;
}

body.mobile-sidebar-mode .host-answer {
  margin-top: 0.5rem;
  min-height: 2rem;
  padding: 0.4rem 0.55rem;
}

body.mobile-sidebar-mode .responder-row {
  margin-top: 0.58rem;
  gap: 0.28rem;
}

body.mobile-sidebar-mode .responder-row select {
  min-height: 2.2rem;
  font-size: 0.94rem;
}

body.mobile-sidebar-mode .modal-actions {
  margin-top: 0.65rem;
  gap: 0.45rem;
}

body.mobile-sidebar-mode .modal-actions button {
  min-height: 2.2rem;
  font-size: 0.92rem;
}

@media (orientation: landscape) and (max-height: 520px) {
  body.mobile-sidebar-mode .modal {
    padding: 0.3rem;
  }

  body.mobile-sidebar-mode .modal-card {
    max-height: calc(100dvh - 0.6rem);
    padding: 0.58rem 0.62rem;
  }

  body.mobile-sidebar-mode .modal-card h2 {
    font-size: 1.2rem;
  }

  body.mobile-sidebar-mode #questionText {
    font-size: 1.02rem;
    line-height: 1.45;
    margin-top: 0.5rem;
  }

  body.mobile-sidebar-mode .responder-row select,
  body.mobile-sidebar-mode .modal-actions button {
    min-height: 2rem;
  }
}

button {
  font-family: inherit;
}

.hex-cell {
  fill: var(--hex-fill);
  stroke: var(--hex-stroke);
  stroke-width: 5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill 160ms ease, transform 180ms ease;
}

.hex-cell.unclaimed {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hex-cell.unclaimed:hover,
.hex-cell.unclaimed:focus-visible {
  stroke-width: 6;
  filter: drop-shadow(0 0 0.5px #fff) drop-shadow(0 0 8px #6c3fa9b3);
}

.hex-cell:focus,
.hex-cell:focus-visible {
  outline: none;
}

.hex-cell.team-red {
  fill: var(--orange);
}

.hex-cell.team-blue {
  fill: var(--green);
}

.hex-cell.claim-pop {
  animation: claimPop 210ms ease-out;
}

.hex-letter {
  fill: var(--hex-letter);
  font-family: var(--ui-font);
  font-weight: 800;
  pointer-events: none;
  user-select: none;
  paint-order: stroke;
  stroke: #e8dff6;
  stroke-width: 0.65;
}

.hex-letter.owned {
  fill: #ffffff;
  stroke: #4f2f7c;
  stroke-width: 0.55;
}

.modal {
  position: fixed;
  inset: 0;
  background: var(--modal-bg);
  display: grid;
  place-items: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 40;
}

.modal.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-card {
  position: relative;
  width: min(560px, 100%);
  border-radius: 16px;
  background: #fff;
  color: #2f2350;
  border: 2px solid #6d40a3;
  padding: 1rem;
  box-shadow: 0 18px 36px #00000052;
  transform: translateY(8px) scale(0.95);
  transition: transform 210ms ease;
  overflow: hidden;
}

.modal.open .modal-card {
  transform: translateY(0) scale(1);
}

.modal-card.shake {
  animation: modalShake 220ms ease;
}

.modal-card h2 {
  margin: 0;
  font-size: 1.3rem;
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.modal-close {
  width: 2.1rem;
  min-width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 2px solid #6a3ea5;
  background: #f3eefc;
  color: #4f327d;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
}

.modal-close:hover {
  filter: brightness(0.96);
}

.modal-meta {
  margin: 0.45rem 0 0;
  color: #6b588f;
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

#modalLetter {
  font-weight: 800;
}

.question-letter-reveal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: linear-gradient(165deg, #ffffffef 0%, #f5efffe8 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.question-letter-reveal span {
  font-family: var(--ui-font);
  font-size: clamp(2.6rem, 9vw, 5.8rem);
  font-weight: 800;
  line-height: 1;
  color: #5f3896;
  text-shadow: 0 10px 20px #5f389633;
  text-align: center;
  padding: 0 0.8rem;
}

.question-letter-reveal.play {
  animation: questionLetterReveal 5000ms cubic-bezier(0.2, 0.76, 0.24, 1) forwards;
}

.question-letter-reveal.hold {
  opacity: 1;
}

#questionText {
  margin: 0.85rem 0 0;
  direction: rtl;
  text-align: right;
  font-size: 1.2rem;
  line-height: 1.7;
  font-weight: 700;
}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .modal-card {
    width: min(760px, 92vw);
    border-width: 3px;
    padding: 1.25rem 1.35rem 1.1rem;
  }

  .modal-card h2 {
    font-size: 1.95rem;
  }

  .modal-meta {
    margin-top: 0.6rem;
    font-size: 1.14rem;
    font-weight: 800;
  }

  #modalLetter {
    font-size: 1.38rem;
    color: #4f2f80;
    font-weight: 900;
  }

  #questionText {
    margin-top: 1rem;
    font-size: 2rem;
    line-height: 1.58;
    font-weight: 800;
  }

  .host-answer strong {
    font-size: 1.32rem;
  }
}

@media (max-width: 1023px), (hover: none), (pointer: coarse) {
  .modal-card h2 {
    font-size: 1.3rem;
  }

  .modal-meta {
    margin-top: 0.45rem;
    font-size: 0.9rem;
    font-weight: 700;
  }

  #modalLetter {
    font-size: inherit;
    color: inherit;
    font-weight: 800;
  }

  #questionText {
    margin-top: 0.85rem;
    font-size: 1.2rem;
    line-height: 1.7;
    font-weight: 700;
  }

  .host-answer strong {
    font-size: 1.03rem;
  }
}

.host-answer {
  margin-top: 0.6rem;
  min-height: 2.35rem;
  border-radius: 10px;
  border: 2px solid #5f3c8f;
  background: #efe8fb;
  color: #362455;
  display: grid;
  gap: 0.2rem;
  align-content: center;
  padding: 0.45rem 0.7rem;
}

.host-answer .label {
  font-size: 0.83rem;
  color: #6a588f;
  font-weight: 800;
}

.host-answer strong {
  font-size: 1.03rem;
  line-height: 1.4;
}

.responder-row {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.35rem;
}

.responder-row label {
  font-size: 0.9rem;
  color: #6a588f;
  font-weight: 800;
}

.responder-row select {
  min-height: 2.45rem;
  border-radius: 10px;
  border: 2px solid #5b3b8a;
  background: #f5f2fb;
  color: #2f2350;
  font-family: inherit;
  font-size: 0.96rem;
  font-weight: 700;
  padding: 0 0.55rem;
}

.modal-actions {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  gap: 0.55rem;
}

.modal-actions button {
  min-height: 2.5rem;
  border-radius: 11px;
  border: 2px solid #53347f;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}

.modal-actions .good {
  background: #dbf5d2;
}

.modal-actions .bad {
  background: #ffe1d3;
}

.modal-actions .neutral {
  background: #ece8f6;
}

.modal-open #board {
  pointer-events: none;
}

.winner-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #180f2bd9;
  opacity: 0;
  pointer-events: none;
  transition: opacity 190ms ease;
  z-index: 110;
}

.round-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #180f2bd9;
  opacity: 0;
  pointer-events: none;
  transition: opacity 190ms ease;
  z-index: 109;
}

.round-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.round-intro-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 48%, #7a4bc0 0%, #6a3fa9 34%, #5a338f 66%, #4c2b7d 100%);
  opacity: 0;
  pointer-events: none;
  z-index: 108;
  overflow: hidden;
  isolation: isolate;
  --intro-hole: 0%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--intro-hole) - 0.25%), #000 var(--intro-hole));
  mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--intro-hole) - 0.25%), #000 var(--intro-hole));
}

.round-intro-overlay::before {
  content: "";
  position: absolute;
  inset: 16% 14%;
  border-radius: 26%;
  background: radial-gradient(circle at 50% 50%, #8f66d0 0%, #7348b6 60%, #5f389b 100%);
  opacity: 0.5;
  transform: scale(0.88) rotate(-8deg);
}

.round-intro-band {
  position: absolute;
  left: -6%;
  right: -6%;
  display: flex;
  justify-content: center;
  gap: clamp(0.18rem, 0.6vw, 0.55rem);
  opacity: 0;
  pointer-events: none;
}

.round-intro-band.top {
  top: 0.8rem;
  transform: translateY(-120%);
}

.round-intro-band.bottom {
  bottom: 0.8rem;
  transform: translateY(120%);
}

.round-intro-cell {
  width: clamp(2.6rem, 6.1vw, 5.2rem);
  aspect-ratio: 1 / 1;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: #9f80d4;
  border: 2px solid #7555ac;
  color: #5f4293;
  font-weight: 800;
  font-size: clamp(1.35rem, 3vw, 2.4rem);
  display: grid;
  place-items: center;
  line-height: 1;
}

.round-intro-portal {
  position: absolute;
  width: min(44vw, 44vh, 240px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.2) rotate(0deg);
}

.round-intro-portal .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 14px solid #f59f2d;
  box-shadow: 0 0 0 6px #6738a5, inset 0 0 0 3px #ffca67;
}

.round-intro-portal .hex {
  width: 44%;
  aspect-ratio: 1 / 1;
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  background: #7f57bb;
  border: 4px solid #d7c1ff;
}

.round-intro-content {
  position: relative;
  text-align: center;
  color: #fff;
  opacity: 0;
  transform: translateY(12px) scale(0.92);
  text-shadow: 0 4px 0 #00000050;
  z-index: 1;
}

#roundIntroTitle {
  margin: 0;
  display: grid;
  gap: 0.2rem;
  line-height: 0.92;
}

#roundIntroTitle .line-one,
#roundIntroTitle .line-two {
  display: block;
  font-family: var(--title-font);
  letter-spacing: 0.01em;
}

#roundIntroTitle .line-one {
  color: #ffe018;
  font-size: clamp(2.1rem, 8vw, 4.1rem);
}

#roundIntroTitle .line-two {
  color: #ff4343;
  font-size: clamp(2.45rem, 9vw, 4.6rem);
}

.round-intro-overlay.play {
  animation: roundIntroFade 2550ms ease forwards, roundIntroMask 2550ms ease-in-out forwards;
}

.round-intro-overlay.play .round-intro-content {
  animation: roundIntroContent 2550ms ease forwards;
}

.round-intro-overlay.play .round-intro-band.top {
  animation: roundIntroBandTop 2550ms cubic-bezier(0.19, 0.76, 0.24, 1) forwards;
}

.round-intro-overlay.play .round-intro-band.bottom {
  animation: roundIntroBandBottom 2550ms cubic-bezier(0.19, 0.76, 0.24, 1) forwards;
}

.round-intro-overlay.play .round-intro-portal {
  animation: roundIntroPortal 2550ms ease-in-out forwards;
}

.round-intro-overlay.play .round-intro-cell {
  animation: roundIntroCellPulse 2550ms ease-in-out forwards;
}

.round-intro-content p {
  margin: 0;
  font-weight: 800;
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  color: #d9c8ff;
}

.round-card {
  width: min(460px, 100%);
  border-radius: 20px;
  background: #fff;
  color: #2b1f45;
  border: 4px solid #6a3da4;
  text-align: center;
  padding: 1.2rem 1rem 1rem;
  box-shadow: 0 26px 52px #0000005c;
}

.round-tag {
  margin: 0;
  color: #6f5a95;
  font-weight: 700;
  font-size: 0.98rem;
}

#roundWinTitle {
  margin: 0.3rem 0 0;
  font-family: var(--title-font);
  font-size: clamp(2rem, 6vw, 2.7rem);
  line-height: 1;
}

#roundWinSubtitle {
  margin: 0.55rem 0 0;
  color: #5d4d7f;
  font-weight: 700;
  font-size: 1.04rem;
}

#roundContinueBtn {
  margin-top: 1rem;
  min-height: 2.45rem;
  min-width: 220px;
  border-radius: 11px;
  border: 2px solid #573783;
  background: #f4effd;
  color: #3c2a61;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.96rem;
  cursor: pointer;
}

.winner-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.winner-card {
  position: relative;
  z-index: 2;
  width: min(460px, 100%);
  border-radius: 20px;
  background: #fff;
  color: #2b1f45;
  border: 4px solid #6a3da4;
  text-align: center;
  padding: 1.2rem 1rem 1rem;
  transform: scale(0.88) translateY(14px);
  transition: transform 220ms ease;
  box-shadow: 0 26px 52px #0000005c;
  overflow: hidden;
}

.winner-overlay.open .winner-card {
  transform: scale(1) translateY(0);
}

.winner-overlay.red .winner-card {
  border-color: #e06023;
  box-shadow: 0 26px 52px #0000005c, 0 0 0 6px #ff7a3740;
}

.winner-overlay.blue .winner-card {
  border-color: #2b9f11;
  box-shadow: 0 26px 52px #0000005c, 0 0 0 6px #39b9163f;
}

.winner-tag {
  margin: 0;
  color: #6f5a95;
  font-weight: 700;
  font-size: 0.98rem;
}

#winnerTitle {
  margin: 0.3rem 0 0;
  font-family: var(--title-font);
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1;
}

#winnerSubtitle {
  margin: 0.5rem 0 0;
  color: #5d4d7f;
  font-weight: 700;
  font-size: 1.04rem;
}

.winner-countdown {
  margin: 0.45rem 0 0;
  color: #6f5d92;
  font-weight: 700;
  font-size: 0.95rem;
}

.winner-actions {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 0.6rem;
}

.winner-actions button {
  min-height: 2.45rem;
  border-radius: 11px;
  border: 2px solid #573783;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.96rem;
  cursor: pointer;
}

.winner-undo-btn {
  background: #ffe8de;
  color: #7d2d0d;
}

.winner-continue-btn {
  background: #f4effd;
  color: #3c2a61;
}

.winner-burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.winner-burst span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 14px;
  border-radius: 3px;
  transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  opacity: 0;
  animation: winnerBurst 880ms cubic-bezier(0.22, 0.98, 0.41, 1) forwards;
}

.winner-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.winner-rain span {
  position: absolute;
  top: -10%;
  left: 50%;
  width: 9px;
  height: 16px;
  border-radius: 3px;
  opacity: 0;
  transform: translate3d(0, -18vh, 0) rotate(0deg);
  animation: winnerRainFall var(--fall-duration, 3200ms) linear var(--fall-delay, 0ms) forwards;
}

.board-shell.winner-red {
  animation: boardWinPulseRed 860ms ease-in-out 2;
}

.board-shell.winner-blue {
  animation: boardWinPulseBlue 860ms ease-in-out 2;
}

.setup-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: #261742dc;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 50;
}

.setup-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.setup-card {
  width: min(460px, 100%);
  background: #fff;
  color: #2f2350;
  border: 3px solid #6a3ea5;
  border-radius: 18px;
  padding: 1rem;
}

.setup-card h2 {
  margin: 0;
  font-size: 1.4rem;
}

.setup-card p {
  margin: 0.45rem 0 0;
  color: #6f5d92;
}

.size-options {
  margin-top: 0.95rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 0.55rem;
}

.size-btn,
.start-game-btn {
  min-height: 2.55rem;
  border: 2px solid #5b388c;
  border-radius: 11px;
  background: #f6f3fd;
  color: #3f2a63;
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}

.size-btn.selected {
  background: #e6f4dc;
  border-color: #4f9133;
  color: #2f6219;
}

.start-game-btn {
  margin-top: 0.95rem;
  width: 100%;
  background: #6b40a4;
  color: #fff;
  border-color: #512f7d;
}

@keyframes claimPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes modalShake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-3px);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes questionLetterReveal {
  0% {
    opacity: 0;
    transform: scale(0.56);
  }
  14% {
    opacity: 1;
    transform: scale(1.06);
  }
  72% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes winnerBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2) rotate(0deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot));
  }
}

@keyframes winnerRainFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -18vh, 0) rotate(var(--rot-start, 0deg));
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 0.95;
    transform: translate3d(var(--drift, 0), 118vh, 0) rotate(var(--rot-end, 420deg));
  }
}

@keyframes roundIntroFade {
  0% {
    opacity: 0;
  }
  10%,
  92% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes roundIntroMask {
  0% {
    --intro-hole: 0%;
  }
  18% {
    --intro-hole: 13%;
  }
  33% {
    --intro-hole: 0%;
  }
  82% {
    --intro-hole: 0%;
  }
  90% {
    --intro-hole: 16%;
  }
  100% {
    --intro-hole: 120%;
  }
}

@keyframes roundIntroBandTop {
  0% {
    opacity: 0;
    transform: translateY(-120%);
  }
  40% {
    opacity: 0;
    transform: translateY(-120%);
  }
  56%,
  84% {
    opacity: 0.8;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-120%);
  }
}

@keyframes roundIntroBandBottom {
  0% {
    opacity: 0;
    transform: translateY(120%);
  }
  40% {
    opacity: 0;
    transform: translateY(120%);
  }
  56%,
  84% {
    opacity: 0.8;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(120%);
  }
}

@keyframes roundIntroPortal {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(0deg);
  }
  14% {
    opacity: 1;
    transform: scale(1) rotate(35deg);
  }
  25% {
    opacity: 0.95;
    transform: scale(0.74) rotate(145deg);
  }
  35% {
    opacity: 0;
    transform: scale(0.28) rotate(220deg);
  }
  85% {
    opacity: 0;
    transform: scale(0.28) rotate(220deg);
  }
  92% {
    opacity: 1;
    transform: scale(0.82) rotate(305deg);
  }
  100% {
    opacity: 0;
    transform: scale(2.2) rotate(380deg);
  }
}

@keyframes roundIntroContent {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  20%,
  80% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
}

@keyframes roundIntroCellPulse {
  0%,
  38% {
    opacity: 0;
  }
  56%,
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes boardWinPulseRed {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 #ff7a3700;
  }
  50% {
    box-shadow: inset 0 0 0 11px #ff7a374d;
  }
}

@keyframes boardWinPulseBlue {
  0%,
  100% {
    box-shadow: inset 0 0 0 0 #39b91600;
  }
  50% {
    box-shadow: inset 0 0 0 11px #39b9164f;
  }
}

@media (max-width: 980px) {
  .round-intro-overlay {
    padding:
      max(0.3rem, env(safe-area-inset-top))
      max(0.3rem, env(safe-area-inset-right))
      max(0.3rem, env(safe-area-inset-bottom))
      max(0.3rem, env(safe-area-inset-left));
    -webkit-mask-image: none;
    mask-image: none;
  }

  .round-intro-overlay.play {
    animation: roundIntroFade 2550ms ease forwards;
  }

  .round-intro-overlay::before {
    inset: 18% 8%;
    border-radius: 22%;
    opacity: 0.42;
    transform: scale(0.92) rotate(-6deg);
  }

  .round-intro-band {
    left: 0;
    right: 0;
    gap: clamp(0.12rem, 0.4vw, 0.34rem);
  }

  .round-intro-band.top {
    top: max(0.32rem, env(safe-area-inset-top));
  }

  .round-intro-band.bottom {
    bottom: max(0.32rem, env(safe-area-inset-bottom));
  }

  .round-intro-cell {
    width: clamp(2rem, 7.2vw, 3.65rem);
    border-width: 1.5px;
    font-size: clamp(1rem, 3.8vw, 1.75rem);
  }

  .round-intro-portal {
    width: min(52vw, 34vh, 182px);
  }

  #roundIntroTitle .line-one {
    font-size: clamp(1.55rem, 6.6vw, 2.7rem);
  }

  #roundIntroTitle .line-two {
    font-size: clamp(1.85rem, 7.4vw, 3rem);
  }

  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .toolbar {
    grid-column: 1;
    grid-row: 1;
    border-left: 0;
    border-bottom: 4px solid #4a2a77;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem;
    gap: 0.8rem;
  }

  .round-title {
    margin: 0;
    font-size: clamp(2.2rem, 8vw, 3.2rem);
  }

  .score-card {
    margin: 0;
    gap: 0.7rem;
    width: auto;
  }

  .score-item {
    gap: 0.22rem;
  }

  .score-hex {
    width: 58px;
    height: 52px;
    border-width: 3px;
  }

  .score-hex strong {
    font-size: 1.55rem;
  }

  .score-name {
    width: 72px;
    font-size: 0.74rem;
  }

  .session-pill {
    width: 128px;
    padding: 0.3rem 0.4rem;
  }

  .session-pill strong {
    font-size: 1.05rem;
  }

  .actions {
    width: 118px;
    gap: 0.35rem;
  }

  .actions button {
    min-height: 1.9rem;
    font-size: 0.83rem;
  }

  .host-buzzer-panel {
    width: 150px;
    padding: 0.34rem 0.42rem;
  }

  #hostBuzzerText {
    font-size: 0.79rem;
  }

  .board-shell {
    grid-column: 1;
    grid-row: 2;
    min-height: calc(100vh - 110px);
    border-right: 0;
  }

  .board-canvas {
    min-height: calc(100vh - 110px);
    padding: 1.2rem 0.7rem;
  }

  body.mobile-sidebar-mode {
    overflow: hidden;
  }

  body.mobile-sidebar-mode .app {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    min-height: 100dvh;
  }

  body.mobile-sidebar-mode .board-shell {
    grid-column: 1;
    grid-row: 1;
    position: fixed;
    inset: 0;
    border-right: 0;
    border-bottom: 0;
    min-height: 100dvh;
    z-index: 1;
  }

  body.mobile-sidebar-mode .board-canvas {
    min-height: 100dvh;
    padding: 0.45rem;
  }

  body.mobile-sidebar-mode #board {
    width: 100%;
    max-height: 100dvh;
  }

  body.mobile-sidebar-mode .toolbar {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: min(320px, 86vw);
    max-width: 86vw;
    z-index: 75;
    transform: translateX(108%);
    transition: transform 220ms ease;
    border-left: 4px solid #4a2a77;
    border-bottom: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    padding: max(0.9rem, env(safe-area-inset-top)) 0.7rem 1rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body.mobile-sidebar-mode .round-title {
    order: initial;
    width: auto;
    margin: 0.2rem 0 0;
  }

  body.mobile-sidebar-mode .score-card {
    margin: 0.3rem 0;
    width: 100%;
  }

  body.mobile-sidebar-mode .session-pill {
    width: min(190px, 100%);
  }

  body.mobile-sidebar-mode .host-buzzer-panel {
    width: min(210px, 100%);
  }

  body.mobile-sidebar-mode .actions {
    width: min(190px, 100%);
    margin-top: auto;
  }

  body.mobile-sidebar-mode .mobile-sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.mobile-sidebar-mode.sidebar-open .toolbar {
    transform: translateX(0);
  }

  body.mobile-sidebar-mode.sidebar-open .mobile-sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.mobile-sidebar-mode .modal {
    z-index: 72;
    padding: 0.45rem;
    place-items: center;
  }

  body.mobile-sidebar-mode .modal-card {
    width: min(560px, calc(100vw - 0.9rem));
    max-height: calc(100dvh - 0.9rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 760px) {
  .round-intro-overlay::before {
    inset: 19% 6%;
    opacity: 0.38;
  }

  .round-intro-portal {
    width: min(56vw, 32vh, 162px);
  }

  #roundIntroTitle {
    line-height: 0.9;
  }

  .toolbar {
    flex-wrap: wrap;
    justify-content: center;
  }

  .round-title {
    order: 3;
    width: 100%;
  }

  .modal-actions,
  .size-options,
  .winner-actions {
    grid-template-columns: 1fr;
  }

  body.mobile-sidebar-mode .modal-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .round-intro-cell {
    width: clamp(1.58rem, 9vw, 2.38rem);
    font-size: clamp(0.85rem, 4.6vw, 1.15rem);
  }

  .round-intro-portal {
    width: min(58vw, 30vh, 142px);
  }

  #roundIntroTitle .line-one {
    font-size: clamp(1.3rem, 8vw, 2.08rem);
  }

  #roundIntroTitle .line-two {
    font-size: clamp(1.55rem, 9.4vw, 2.5rem);
  }
}