.arena-page {
  min-height: 100vh;
  padding: 42px 18px 72px;
  background:
    radial-gradient(
      circle at 15% 5%,
      rgba(206, 31, 59, 0.2),
      transparent 30%
    ),
    #090a0e;
  color: #f5f5f7;
}

.arena-shell {
  width: min(980px, 100%);
  margin: 0 auto;
}

.arena-lobby-shell {
  width: min(720px, 100%);
}

.arena-heading,
.arena-room-header {
  margin-bottom: 24px;
}

.arena-room-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
}

.arena-eyebrow,
.arena-label {
  display: block;
  margin: 0 0 7px;
  color: #ff5c76;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.arena-heading h1,
.arena-room-header h1 {
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 4.2rem);
  line-height: 0.98;
}

.arena-heading > p:last-child {
  max-width: 650px;
  color: #b6b8c1;
  line-height: 1.65;
}

.arena-card {
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: rgba(20, 22, 29, 0.94);
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.42);
}

.arena-card h2 {
  margin: 0 0 14px;
}

.arena-card p {
  color: #b6b8c1;
  line-height: 1.6;
}

.arena-create-form,
.arena-join-form {
  display: grid;
  gap: 14px;
}

.arena-form-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.arena-card label {
  color: #dedfe4;
  font-size: 0.84rem;
  font-weight: 750;
}

.arena-card input,
.arena-card select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: #ffffff;
  font: inherit;
}

.arena-card select option {
  color: #111111;
}

.arena-primary-button,
.arena-secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 16px;
  border-radius: 10px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}

.arena-primary-button {
  border: 0;
  background: #d8203e;
  color: #ffffff;
}

.arena-secondary-button {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.045);
  color: #ffffff;
}

.arena-room-grid {
  display: grid;
  gap: 16px;
}

.arena-status-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.arena-player-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.arena-player-card {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.arena-player-card.is-you {
  border-color: rgba(255, 92, 118, 0.68);
}

.arena-player-card.is-current {
  box-shadow:
    0 0 0 2px rgba(255, 92, 118, 0.24);
}

.arena-player-card strong,
.arena-player-card small {
  display: block;
}

.arena-player-card small {
  margin-top: 5px;
  color: #979aa5;
}

.arena-share-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  gap: 10px;
}

.arena-waiting-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: #d8d9dd;
  font-weight: 750;
}

.arena-waiting-indicator span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ff5c76;
  box-shadow:
    0 0 0 0 rgba(255, 92, 118, 0.65);
  animation:
    arenaPulse 1.6s infinite;
}

.arena-message {
  min-height: 22px;
  margin: 10px 0 0;
}

.arena-message-error {
  color: #ff8ca0 !important;
}

@keyframes arenaPulse {
  70% {
    box-shadow:
      0 0 0 10px rgba(255, 92, 118, 0);
  }

  100% {
    box-shadow:
      0 0 0 0 rgba(255, 92, 118, 0);
  }
}

@media (max-width: 620px) {
  .arena-page {
    padding: 28px 12px 50px;
  }

  .arena-room-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .arena-card {
    padding: 18px;
  }

  .arena-form-grid,
  .arena-player-grid,
  .arena-share-row {
    grid-template-columns: 1fr;
  }

  .arena-primary-button,
  .arena-secondary-button {
    width: 100%;
  }
}


.arena-game-card {
  overflow: hidden;
}

.arena-turn-banner {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.arena-turn-banner strong {
  color: #ffffff;
  font-size: 1.12rem;
}

.arena-board {
  position: relative;
  width: min(100%, 820px);
  aspect-ratio: 16 / 10;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: #08090d;
}

.arena-hidden-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #08090d;
}

.arena-cover-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  grid-template-rows:
    repeat(2, minmax(0, 1fr));
}

.arena-piece {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    linear-gradient(
      145deg,
      rgba(31, 33, 41, 0.997),
      rgba(8, 9, 12, 0.997)
    );
  color: #ffffff;
  cursor: pointer;
  transition:
    opacity 0.35s ease,
    transform 0.16s ease,
    background 0.16s ease;
}

.arena-piece:hover:not(:disabled),
.arena-piece.is-selected {
  background:
    linear-gradient(
      145deg,
      #d8203e,
      #7d0d22
    );
  transform: scale(0.97);
}

.arena-piece:disabled {
  cursor: default;
}

.arena-piece.is-revealed,
.arena-board.is-complete
.arena-piece {
  opacity: 0;
  pointer-events: none;
}

.arena-piece strong {
  font-size: clamp(1.4rem, 3vw, 2.35rem);
}

.arena-piece span {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.arena-action-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(320px, 0.92fr);
  gap: 14px;
  margin-top: 16px;
}

.arena-action-card {
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.025);
}

.arena-action-card h2 {
  font-size: 1.15rem;
}

.arena-answer-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.arena-answer-button {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
  color: #ffffff;
  font: inherit;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.arena-answer-button:hover:not(:disabled) {
  border-color: #ff5c76;
  background: rgba(255, 92, 118, 0.08);
}

.arena-answer-button:disabled {
  cursor: default;
  opacity: 0.58;
}

.arena-guess-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  gap: 9px;
  margin-top: 8px;
}

.arena-result-layout {
  display: grid;
  grid-template-columns:
    minmax(220px, 0.7fr)
    minmax(0, 1.3fr);
  gap: 22px;
  align-items: start;
}

.arena-result-image {
  width: 100%;
  border-radius: 14px;
}

.arena-result-card h3 {
  margin: 0 0 8px;
  font-size: 1.6rem;
}

@media (max-width: 760px) {
  .arena-action-grid,
  .arena-result-layout {
    grid-template-columns: 1fr;
  }

  .arena-answer-grid {
    grid-template-columns: 1fr;
  }

  .arena-guess-row {
    grid-template-columns: 1fr;
  }

  .arena-board {
    aspect-ratio: 1 / 1;
  }

  .arena-cover-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    grid-template-rows:
      repeat(5, minmax(0, 1fr));
  }
}


/* v3: top question, countdown, exact answer UX */

.arena-game-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.arena-turn-banner {
  margin-bottom: 0;
}

.arena-timer {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 94px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.arena-timer span {
  color: #9fa2ac;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.arena-timer strong {
  color: #ffffff;
  font-size: 1.3rem;
  line-height: 1;
}

.arena-timer.is-warning {
  border-color: #ff5c76;
  background: rgba(255, 92, 118, 0.14);
  animation: arenaTimerPulse 0.7s infinite alternate;
}

.arena-question-card {
  margin-bottom: 14px;
}

.arena-question-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.arena-question-owner {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 92, 118, 0.13);
  color: #ff7189;
  font-size: 0.72rem;
  font-weight: 800;
}

.arena-guess-card {
  margin-top: 14px;
}

.arena-guess-card.is-disabled {
  opacity: 0.58;
}

.arena-guess-example {
  margin: 7px 0 8px !important;
  color: #ff9aaa !important;
  font-size: 0.78rem;
  font-weight: 750;
}

.arena-guess-row input:disabled {
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.025);
}

@keyframes arenaTimerPulse {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.05);
  }
}

@media (max-width: 620px) {
  .arena-game-topbar,
  .arena-question-title-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .arena-timer {
    min-width: 88px;
  }
}


/* v5: post-game actions */

.arena-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.arena-result-actions
.arena-primary-button,
.arena-result-actions
.arena-secondary-button {
  min-width: 150px;
}

@media (max-width: 620px) {
  .arena-result-actions {
    flex-direction: column;
  }

  .arena-result-actions
  .arena-primary-button,
  .arena-result-actions
  .arena-secondary-button {
    width: 100%;
  }
}


/* v12 — Hive-shaped trivia choices */
.arena-question-card { overflow: visible; }

.arena-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  overflow: visible;
  padding: 8px 2px 4px;
}

.arena-answer-button {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 76px;
  padding: 16px 28px;
  border: 0;
  border-radius: 0;
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
  background: linear-gradient(145deg, rgba(34,36,46,.98), rgba(13,14,20,.99));
  color: #f7f7f9;
  font: inherit;
  font-size: .95rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  transition: transform .16s ease, filter .16s ease, color .16s ease;
}

.arena-answer-button::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  clip-path: inherit;
  background: linear-gradient(135deg, rgba(255,89,115,.34), rgba(255,255,255,.07) 34%, rgba(255,255,255,.04) 68%, rgba(255,89,115,.18));
}

.arena-answer-button::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  clip-path: inherit;
  background: radial-gradient(circle at 24% 20%, rgba(255,255,255,.07), transparent 38%), linear-gradient(145deg, rgba(27,29,37,.995), rgba(9,10,15,.995));
}

.arena-answer-button:hover:not(:disabled),
.arena-answer-button:focus-visible:not(:disabled) {
  transform: translateY(-2px) scale(1.015);
  filter: drop-shadow(0 10px 18px rgba(216,32,62,.28));
  color: #fff;
}

.arena-answer-button:hover:not(:disabled)::after,
.arena-answer-button:focus-visible:not(:disabled)::after {
  background: linear-gradient(145deg, rgba(216,32,62,.98), rgba(91,8,28,.99));
}

.arena-answer-button:focus-visible {
  outline: 3px solid rgba(255,255,255,.9);
  outline-offset: 4px;
}

.arena-answer-button:disabled {
  cursor: default;
  opacity: .52;
  filter: saturate(.5);
}

@media (max-width: 680px) {
  .arena-answer-grid { grid-template-columns: 1fr; gap: 9px; }
  .arena-answer-button {
    min-height: 66px;
    padding: 13px 25px;
    font-size: .9rem;
    clip-path: polygon(9% 0, 91% 0, 100% 50%, 91% 100%, 9% 100%, 0 50%);
  }
}


/* ============================================================
   v13 — Room context and invitation details
   ============================================================ */

.arena-room-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.arena-room-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 31px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 89, 115, 0.32);
  border-radius: 999px;
  background: rgba(255, 89, 115, 0.09);
  color: #f4f4f6;
  font-size: 0.75rem;
  font-weight: 850;
}

.arena-join-introduction,
.arena-share-description {
  color: #aeb0ba;
  line-height: 1.55;
}

.arena-room-settings-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin: 24px 0;
}

.arena-room-setting {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.035);
}

.arena-room-setting strong,
.arena-active-room-settings strong {
  display: block;
  margin-top: 5px;
  color: #ffffff;
}

.arena-active-room-settings {
  display: grid;
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.028);
}

.arena-share-preview {
  display: grid;
  gap: 6px;
  margin: 18px 0;
  padding: 15px 17px;
  border-left: 3px solid #ff5973;
  border-radius: 0 12px 12px 0;
  background: rgba(255, 89, 115, 0.065);
}

.arena-share-preview strong {
  color: #ffffff;
}

.arena-share-preview span {
  color: #b8bac3;
  font-size: 0.85rem;
}

@media (max-width: 680px) {
  .arena-room-settings-grid,
  .arena-active-room-settings {
    grid-template-columns: 1fr;
  }

  .arena-room-badges {
    gap: 6px;
  }

  .arena-room-badge {
    min-height: 28px;
    padding: 5px 10px;
    font-size: 0.7rem;
  }
}


/* ============================================================
   v19 — Real cassette reveal board + restored hive answers
   ============================================================ */

.arena-cassette-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  width: min(100%, 860px);
  margin: 4px auto 12px;
}

.arena-cassette-heading h2 {
  margin: 0;
  color: #ffffff;
  font-size: 1.15rem;
}

.arena-cassette-format {
  flex: 0 0 auto;
  color: #8f929d;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.arena-cassette-board {
  width: min(100%, 860px);
  aspect-ratio: 1.72 / 1;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #07080b;
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, 0.025),
    0 22px 55px rgba(0, 0, 0, 0.42);
}

.arena-cassette-board .arena-hidden-image {
  inset: 8%;
  width: 84%;
  height: 84%;
  border-radius: 14px;
  object-fit: contain;
}

.arena-cassette-shell {
  position: absolute;
  inset: 2.5%;
  z-index: 2;
  overflow: hidden;
  border: 3px solid rgba(202, 205, 215, 0.42);
  border-radius: 22px;
  background:
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.08),
      transparent 22% 76%,
      rgba(255, 255, 255, 0.055)
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.018) 0 2px,
      rgba(0, 0, 0, 0.035) 2px 4px
    ),
    rgba(13, 14, 18, 0.82);
  box-shadow:
    inset 0 0 0 4px rgba(0, 0, 0, 0.46),
    inset 0 -36px 48px rgba(0, 0, 0, 0.36);
  pointer-events: none;
  transition: opacity 0.38s ease;
}

.arena-cassette-board.is-complete
.arena-cassette-shell {
  opacity: 0;
}

.arena-cassette-label {
  position: absolute;
  top: 8%;
  left: 10%;
  right: 10%;
  height: 29%;
  padding: 13px 18px;
  border-radius: 9px;
  background:
    linear-gradient(
      180deg,
      rgba(213, 202, 176, 0.94),
      rgba(174, 164, 145, 0.9)
    );
  color: #161616;
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

.arena-cassette-label span,
.arena-cassette-label strong,
.arena-cassette-label small {
  display: block;
}

.arena-cassette-label span {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.arena-cassette-label strong {
  margin-top: 4px;
  font-size: clamp(0.9rem, 2vw, 1.35rem);
  letter-spacing: 0.08em;
}

.arena-cassette-label small {
  margin-top: 3px;
  font-weight: 750;
}

.arena-cassette-window {
  position: absolute;
  top: 35%;
  left: 18%;
  right: 18%;
  height: 34%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8%;
  border: 4px solid rgba(130, 132, 139, 0.5);
  border-radius: 48px;
  background:
    linear-gradient(
      180deg,
      rgba(4, 5, 7, 0.88),
      rgba(18, 19, 23, 0.94)
    );
}

.arena-cassette-tape {
  position: absolute;
  left: 25%;
  right: 25%;
  height: 16%;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      #311e13,
      #080706
    );
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.65);
}

.arena-cassette-reel {
  position: relative;
  z-index: 2;
  width: clamp(58px, 11vw, 104px);
  aspect-ratio: 1;
  border: 10px dotted rgba(200, 201, 207, 0.68);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #08090c 0 24%,
      #c2c3c8 25% 32%,
      #1d1f24 33% 52%,
      #08090c 53%
    );
  box-shadow:
    0 0 0 5px rgba(0, 0, 0, 0.58),
    inset 0 0 16px rgba(255, 255, 255, 0.1);
  transition: transform 0.55s ease;
}

.arena-cassette-bottom {
  position: absolute;
  left: 26%;
  right: 26%;
  bottom: 5%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  clip-path: polygon(
    12% 0,
    88% 0,
    100% 100%,
    0 100%
  );
  background:
    linear-gradient(
      180deg,
      rgba(37, 38, 43, 0.94),
      rgba(9, 10, 13, 0.97)
    );
}

.arena-cassette-bottom span {
  width: 20%;
  aspect-ratio: 1.5;
  border-radius: 50%;
  background: #050507;
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.08);
}

.arena-cassette-bottom strong {
  color: #d8203e;
  font-size: clamp(1rem, 2.5vw, 1.7rem);
}

.arena-cassette-screw {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, #868892, #222329);
  box-shadow:
    inset 0 0 0 4px #0d0e11;
}

.arena-cassette-screw::after {
  content: "";
  position: absolute;
  inset: 8px 3px;
  background: #090a0d;
  transform: rotate(35deg);
}

.screw-one { top: 3%; left: 2%; }
.screw-two { top: 3%; right: 2%; }
.screw-three { bottom: 3%; left: 2%; }
.screw-four { bottom: 3%; right: 2%; }

.arena-cassette-board .arena-cover-grid {
  z-index: 3;
  inset: 2.5%;
  overflow: hidden;
  border-radius: 22px;
}

.arena-cassette-board .arena-piece {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(226, 228, 235, 0.22);
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.08),
      rgba(10, 11, 15, 0.15) 32% 72%,
      rgba(255, 255, 255, 0.045)
    ),
    rgba(8, 9, 12, 0.38);
  backdrop-filter: blur(1px);
  transition:
    opacity 0.42s ease,
    transform 0.28s ease,
    filter 0.2s ease;
}

.arena-cassette-board .arena-piece::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.035);
}

.arena-cassette-board
.arena-piece:hover:not(:disabled),
.arena-cassette-board
.arena-piece.is-selected {
  background:
    linear-gradient(
      145deg,
      rgba(216, 32, 62, 0.86),
      rgba(82, 7, 24, 0.82)
    );
  transform: translateY(-3px) scale(0.985);
  filter: drop-shadow(
    0 8px 12px rgba(216, 32, 62, 0.28)
  );
}

.arena-cassette-board .arena-piece.is-revealed {
  opacity: 0;
  transform:
    translateY(-14px)
    rotateX(18deg)
    scale(0.94);
}

.arena-cassette-board .arena-piece strong {
  position: relative;
  z-index: 2;
  font-size: clamp(1.4rem, 3.2vw, 2.6rem);
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.85);
}

.arena-cassette-board .arena-piece span {
  position: relative;
  z-index: 2;
}

/* Restore the original hive appearance for trivia answers. */
.arena-question-card {
  overflow: visible;
}

.arena-answer-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  overflow: visible;
  padding: 8px 2px 4px;
}

.arena-answer-button {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 76px;
  padding: 16px 28px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  clip-path: polygon(
    12% 0,
    88% 0,
    100% 50%,
    88% 100%,
    12% 100%,
    0 50%
  );
  background:
    linear-gradient(
      145deg,
      rgba(34, 36, 46, 0.98),
      rgba(13, 14, 20, 0.99)
    );
  color: #f7f7f9;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.16s ease,
    filter 0.16s ease,
    color 0.16s ease;
}

.arena-answer-button::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: -1;
  clip-path: inherit;
  background:
    linear-gradient(
      135deg,
      rgba(255, 89, 115, 0.34),
      rgba(255, 255, 255, 0.07) 34%,
      rgba(255, 255, 255, 0.04) 68%,
      rgba(255, 89, 115, 0.18)
    );
}

.arena-answer-button::after {
  content: "";
  position: absolute;
  inset: 4px;
  z-index: -1;
  clip-path: inherit;
  background:
    radial-gradient(
      circle at 24% 20%,
      rgba(255, 255, 255, 0.07),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(27, 29, 37, 0.995),
      rgba(9, 10, 15, 0.995)
    );
}

.arena-answer-button:hover:not(:disabled),
.arena-answer-button:focus-visible:not(:disabled) {
  transform: translateY(-2px) scale(1.015);
  filter:
    drop-shadow(
      0 10px 18px rgba(216, 32, 62, 0.28)
    );
}

.arena-answer-button:hover:not(:disabled)::after,
.arena-answer-button:focus-visible:not(:disabled)::after {
  background:
    linear-gradient(
      145deg,
      rgba(216, 32, 62, 0.98),
      rgba(91, 8, 28, 0.99)
    );
}

@media (max-width: 760px) {
  .arena-cassette-board {
    aspect-ratio: 1 / 1.05;
  }

  .arena-cassette-board .arena-cover-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    grid-template-rows:
      repeat(5, minmax(0, 1fr));
  }

  .arena-cassette-label {
    top: 5%;
    left: 12%;
    right: 12%;
  }

  .arena-cassette-window {
    top: 37%;
    left: 12%;
    right: 12%;
  }

  .arena-cassette-bottom {
    left: 18%;
    right: 18%;
  }

  .arena-answer-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .arena-answer-button {
    min-height: 66px;
    padding: 13px 25px;
    font-size: 0.9rem;
    clip-path: polygon(
      9% 0,
      91% 0,
      100% 50%,
      91% 100%,
      9% 100%,
      0 50%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .arena-cassette-reel,
  .arena-cassette-board .arena-piece {
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   v19.2 — Expose artwork through successfully revealed sections
   ============================================================ */

/*
The complete cassette body is useful before play begins, but it must
not remain above the artwork after sections are revealed. Once at
least one section opens, the body fades away while every unrevealed
button stays opaque and continues to hide its part of the image.
*/

.arena-cassette-board .arena-hidden-image {
  z-index: 1;
}

.arena-cassette-board .arena-cassette-shell {
  z-index: 2;
}

.arena-cassette-board .arena-cover-grid {
  z-index: 3;
}

.arena-cassette-board.has-reveals
.arena-cassette-shell {
  opacity: 0;
  visibility: hidden;
}

.arena-cassette-board.has-reveals
.arena-piece:not(.is-revealed) {
  background:
    linear-gradient(
      115deg,
      rgba(47, 49, 58, 0.99),
      rgba(11, 12, 16, 0.995) 33% 73%,
      rgba(38, 40, 48, 0.99)
    );
  backdrop-filter: none;
}

.arena-cassette-board.has-reveals
.arena-piece:not(.is-revealed)::before {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.035),
      rgba(0, 0, 0, 0.2)
    );
}

.arena-cassette-board
.arena-piece.is-revealed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* The full cover should remain unobstructed at battle completion. */
.arena-cassette-board.is-complete
.arena-cassette-shell,
.arena-cassette-board.is-complete
.arena-cover-grid {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* ============================================================
   v20 — Approved production dashboard
   ============================================================ */
[hidden] { display: none !important; }

.arena-page { padding: 24px 18px 64px; }
.arena-shell { width: min(1500px, 100%); }

.arena-room-header {
  align-items: center;
  margin-bottom: 16px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.arena-room-title-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.arena-room-title-line .arena-label { margin: 0; }
.arena-room-header h1 {
  color: #ff3153;
  font-size: clamp(2rem,4vw,3.15rem);
}

.arena-dashboard-layout {
  display: grid;
  grid-template-columns: 270px minmax(0,1fr);
  gap: 16px;
  align-items: start;
}
.arena-dashboard-sidebar {
  position: sticky;
  top: 90px;
}
.arena-dashboard-main {
  min-width: 0;
  display: grid;
  gap: 16px;
}
.arena-status-card {
  padding: 18px;
  border-radius: 16px;
}
.arena-status-row {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.arena-status-row > div:last-child { display: none; }

.arena-active-room-settings {
  grid-template-columns: 1fr;
  margin: 14px 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.arena-active-room-settings > div {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.arena-player-grid {
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
.arena-player-card.is-current {
  border-color: #ff3153;
  box-shadow: 0 0 0 1px rgba(255,49,83,.45);
}
.arena-player-card.is-current::after {
  content: "Current turn";
  display: block;
  margin-top: 11px;
  color: #72d249;
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.arena-game-workspace {
  display: grid;
  gap: 14px;
}
.arena-reveal-card {
  position: relative;
  padding: 18px;
}
.arena-game-topbar {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 8;
  margin: 0;
}
.arena-turn-banner { display: none; }
.arena-cassette-heading {
  width: 100%;
  margin: 0 0 14px;
  padding-right: 110px;
}
.arena-cassette-board {
  width: 100%;
  max-width: none;
}
.arena-lower-game-grid {
  display: grid;
  grid-template-columns: minmax(0,1.65fr) minmax(280px,.72fr);
  gap: 14px;
}
.arena-question-card,
.arena-guess-card {
  min-height: 100%;
  margin: 0;
}
.arena-guess-row { grid-template-columns: 1fr; }
.arena-guess-row .arena-primary-button { width: 100%; }
.arena-guess-card.is-disabled { opacity: 1; }
.arena-guess-card.is-disabled input,
.arena-guess-card.is-disabled button { opacity: .45; }
.arena-guess-card.is-disabled .arena-guess-example {
  color: #ffd14a !important;
}
.arena-dashboard-result { width: 100%; }

/* Lobby */
.arena-lobby-page {
  min-height: calc(100vh - 70px);
  display: grid;
  place-items: center;
}
.arena-lobby-dashboard { width: min(470px,100%); }
.arena-brand-lockup {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 18px;
  color: #fff;
  font-weight: 900;
}
.arena-brand-lockup strong {
  color: #ff3153;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.arena-heading { text-align: center; }
.arena-heading > p:last-child { margin-inline: auto; }
.arena-create-form { padding: 18px; gap: 12px; }
.arena-create-form label,
.arena-emoji-fieldset legend {
  color: #c9cbd3;
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.arena-emoji-picker {
  display: grid;
  grid-template-columns: repeat(8,minmax(0,1fr));
  gap: 7px;
}
.arena-emoji-option span {
  width: 100%;
  height: 46px;
  border-radius: 9px;
  font-size: 1.35rem;
}
.arena-create-room-button {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.arena-form-footnote {
  margin: 0 !important;
  text-align: center;
  font-size: .76rem;
}
.arena-how-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 16px;
}
.arena-how-card p {
  margin: 5px 0 0;
  font-size: .8rem;
}
.arena-how-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border: 1px solid rgba(255,205,85,.3);
  border-radius: 50%;
  color: #ffd15b;
  background: rgba(255,205,85,.08);
  font-size: 1.6rem;
  font-weight: 900;
}
.arena-lobby-brand {
  margin-top: 18px;
  text-align: center;
  color: #ff3153;
  font-size: .78rem;
}
.arena-lobby-brand span { color: #fff; }

@media (min-width:1200px) {
  .arena-cassette-board { aspect-ratio: 1.95 / 1; }
}
@media (max-width:980px) {
  .arena-dashboard-layout { grid-template-columns: 1fr; }
  .arena-dashboard-sidebar { position: static; }
  .arena-player-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .arena-active-room-settings { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .arena-lower-game-grid { grid-template-columns: 1fr; }
}
@media (max-width:680px) {
  .arena-page { padding: 18px 10px 48px; }
  .arena-player-grid,
  .arena-active-room-settings { grid-template-columns: 1fr; }
  .arena-game-topbar {
    position: static;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
  .arena-cassette-heading { padding-right: 0; }
  .arena-emoji-picker { grid-template-columns: repeat(4,minmax(0,1fr)); }
}


/* ============================================================
   v21 — Approved top-question + persistent cassette design
   ============================================================ */

.arena-game-workspace {
  display: grid;
  gap: 14px;
}

.arena-top-game-grid {
  display: grid;
  grid-template-columns:
    minmax(0, 1.65fr)
    minmax(280px, 0.72fr);
  gap: 14px;
  align-items: stretch;
}

.arena-top-game-grid
.arena-question-card,
.arena-top-game-grid
.arena-guess-card {
  min-height: 100%;
  margin: 0;
}

.arena-reveal-card {
  position: relative;
  padding: 18px;
  overflow: hidden;
}

.arena-game-topbar {
  position: absolute;
  top: 17px;
  right: 18px;
  z-index: 20;
  margin: 0;
}

.arena-cassette-heading {
  width: 100%;
  margin: 0 0 14px;
  padding-right: 120px;
}

.arena-cassette-board {
  position: relative;
  width: 100%;
  max-width: none;
  aspect-ratio: 1.95 / 1;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 23px;
  background: #07080b;
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, 0.025),
    0 22px 55px rgba(0, 0, 0, 0.42);
}

/*
Artwork lives inside the cassette, while the frame remains above it.
Revealed grid cells disappear, exposing the artwork through the
persistent transparent cassette body.
*/
.arena-cassette-board
.arena-hidden-image {
  position: absolute;
  z-index: 1;
  inset: 7.5% 11%;
  width: 78%;
  height: 82%;
  object-fit: contain;
  border-radius: 10px;
  background: #08090d;
}

.arena-cassette-frame {
  position: absolute;
  z-index: 2;
  inset: 2.2%;
  overflow: hidden;
  border: 3px solid rgba(177, 180, 190, 0.48);
  border-radius: 21px;
  background:
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.075),
      transparent 23% 75%,
      rgba(255, 255, 255, 0.045)
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.015) 0 2px,
      rgba(0, 0, 0, 0.028) 2px 4px
    ),
    rgba(11, 12, 16, 0.27);
  box-shadow:
    inset 0 0 0 4px rgba(0, 0, 0, 0.48),
    inset 0 -34px 50px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.arena-frame-label {
  position: absolute;
  top: 7%;
  left: 9%;
  right: 9%;
  height: 27%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 18px;
  border-radius: 7px;
  background:
    linear-gradient(
      180deg,
      rgba(222, 212, 190, 0.86),
      rgba(183, 173, 153, 0.79)
    );
  color: #131313;
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.17);
}

.arena-frame-index {
  display: grid;
  place-items: center;
  width: clamp(46px, 6vw, 67px);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 3px;
  background: rgba(12, 12, 12, 0.88);
  color: #e3d7bd;
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  font-weight: 900;
}

.arena-frame-label div {
  min-width: 0;
}

.arena-frame-label small,
.arena-frame-label strong,
.arena-frame-label em {
  display: block;
}

.arena-frame-label small {
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.arena-frame-label strong {
  margin-top: 3px;
  font-size: clamp(1rem, 2.4vw, 1.85rem);
  letter-spacing: 0.08em;
}

.arena-frame-label em {
  margin-top: 1px;
  overflow: hidden;
  font-size: clamp(0.58rem, 1vw, 0.8rem);
  font-style: normal;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.arena-frame-window {
  position: absolute;
  z-index: 3;
  top: 35%;
  left: 24%;
  right: 24%;
  height: 34%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6%;
  border: 4px solid rgba(119, 121, 129, 0.55);
  border-radius: 52px;
  background:
    linear-gradient(
      180deg,
      rgba(5, 6, 8, 0.87),
      rgba(18, 19, 23, 0.91)
    );
}

.arena-frame-tape {
  position: absolute;
  left: 24%;
  right: 24%;
  height: 17%;
  border-radius: 999px;
  background:
    linear-gradient(
      180deg,
      #342116,
      #080706
    );
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.68);
}

.arena-cassette-reel {
  position: relative;
  z-index: 2;
  width: clamp(55px, 9vw, 100px);
  aspect-ratio: 1;
  border: 9px dotted rgba(213, 214, 220, 0.7);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      #07080a 0 24%,
      #c7c8cd 25% 32%,
      #202228 33% 52%,
      #07080a 53%
    );
  box-shadow:
    0 0 0 5px rgba(0, 0, 0, 0.6),
    inset 0 0 16px rgba(255, 255, 255, 0.1);
  transition: transform 0.55s ease;
}

.arena-frame-footer {
  position: absolute;
  left: 27%;
  right: 27%;
  bottom: 4.5%;
  height: 18%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  clip-path: polygon(
    10% 0,
    90% 0,
    100% 100%,
    0 100%
  );
  background:
    linear-gradient(
      180deg,
      rgba(34, 35, 40, 0.89),
      rgba(8, 9, 12, 0.93)
    );
}

.arena-frame-footer span {
  color: rgba(211, 212, 217, 0.55);
  font-size: clamp(0.55rem, 1vw, 0.78rem);
}

.arena-frame-footer strong {
  padding: 2px 12px;
  background: rgba(170, 9, 28, 0.82);
  color: #09090b;
  font-size: clamp(1rem, 2.2vw, 1.65rem);
}

.arena-frame-screw {
  position: absolute;
  z-index: 4;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background:
    linear-gradient(135deg, #8a8c96, #222329);
  box-shadow:
    inset 0 0 0 4px #0d0e11;
}

.arena-frame-screw::after {
  content: "";
  position: absolute;
  inset: 8px 3px;
  background: #090a0d;
  transform: rotate(35deg);
}

.frame-screw-one {
  top: 3%;
  left: 2%;
}

.frame-screw-two {
  top: 3%;
  right: 2%;
}

.frame-screw-three {
  bottom: 3%;
  left: 2%;
}

.frame-screw-four {
  right: 2%;
  bottom: 3%;
}

.arena-cassette-board
.arena-cover-grid {
  position: absolute;
  z-index: 5;
  inset: 2.2%;
  display: grid;
  grid-template-columns:
    repeat(5, minmax(0, 1fr));
  grid-template-rows:
    repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-radius: 21px;
}

.arena-cassette-board
.arena-piece {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(226, 228, 235, 0.2);
  background:
    linear-gradient(
      115deg,
      rgba(41, 43, 51, 0.985),
      rgba(9, 10, 14, 0.99) 33% 73%,
      rgba(31, 33, 40, 0.985)
    );
  color: #fff;
  backdrop-filter: none;
  transition:
    opacity 0.42s ease,
    visibility 0.42s ease,
    transform 0.28s ease,
    filter 0.2s ease;
}

.arena-cassette-board
.arena-piece::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 8px;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.025);
}

.arena-cassette-board
.arena-piece:hover:not(:disabled),
.arena-cassette-board
.arena-piece.is-selected {
  background:
    linear-gradient(
      145deg,
      rgba(216, 32, 62, 0.9),
      rgba(79, 7, 23, 0.9)
    );
  transform: translateY(-3px) scale(0.985);
}

.arena-cassette-board
.arena-piece.is-revealed {
  opacity: 0;
  visibility: hidden;
  transform:
    translateY(-14px)
    rotateX(18deg)
    scale(0.94);
  pointer-events: none;
}

.arena-cassette-board
.arena-piece strong,
.arena-cassette-board
.arena-piece span {
  position: relative;
  z-index: 2;
}

/*
Do not hide the cassette frame after a reveal. Only the selected
covering pieces disappear; the cassette remains visible around and
over the exposed album artwork.
*/
.arena-cassette-board.has-reveals
.arena-cassette-frame,
.arena-cassette-board.is-complete
.arena-cassette-frame {
  opacity: 1;
  visibility: visible;
}

.arena-cassette-board.is-complete
.arena-cover-grid {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 980px) {
  .arena-top-game-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .arena-cassette-board {
    aspect-ratio: 1 / 1.05;
  }

  .arena-cassette-board
  .arena-cover-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
    grid-template-rows:
      repeat(5, minmax(0, 1fr));
  }

  .arena-cassette-board
  .arena-hidden-image {
    inset: 8% 10%;
    width: 80%;
    height: 84%;
  }

  .arena-frame-label {
    top: 4%;
    left: 10%;
    right: 10%;
    height: 22%;
  }

  .arena-frame-window {
    top: 34%;
    left: 13%;
    right: 13%;
    height: 31%;
  }

  .arena-frame-footer {
    left: 18%;
    right: 18%;
  }
}


/* ============================================================
   v21.1 — Make revealed artwork clearly visible
   ============================================================ */

/*
The album/artist artwork must fill the usable cassette area.
The decorative cassette remains above it, but all large surfaces
are translucent so revealed sections show the real image clearly.
*/

.arena-cassette-board
.arena-hidden-image {
  z-index: 1;
  inset: 2.2%;
  width: 95.6%;
  height: 95.6%;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
  opacity: 1;
  filter: none;
}

/* Keep only subtle plastic texture over the artwork. */
.arena-cassette-frame {
  background:
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.035),
      transparent 24% 76%,
      rgba(255, 255, 255, 0.025)
    ),
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.008) 0 2px,
      rgba(0, 0, 0, 0.012) 2px 4px
    ),
    rgba(8, 9, 12, 0.08);
  box-shadow:
    inset 0 0 0 4px rgba(0, 0, 0, 0.38),
    inset 0 -28px 42px rgba(0, 0, 0, 0.12);
}

/* Make the cassette paper label translucent. */
.arena-frame-label {
  background:
    linear-gradient(
      180deg,
      rgba(225, 215, 193, 0.42),
      rgba(183, 173, 153, 0.34)
    );
  backdrop-filter: blur(0.7px);
}

/* The tape window should frame the image, not hide it. */
.arena-frame-window {
  border-color: rgba(160, 163, 172, 0.55);
  background:
    linear-gradient(
      180deg,
      rgba(5, 6, 8, 0.34),
      rgba(18, 19, 23, 0.42)
    );
  backdrop-filter: blur(0.4px);
}

.arena-frame-tape {
  opacity: 0.55;
}

.arena-frame-footer {
  background:
    linear-gradient(
      180deg,
      rgba(34, 35, 40, 0.5),
      rgba(8, 9, 12, 0.58)
    );
}

/*
Unrevealed cells remain fully opaque. Revealed cells disappear and
therefore expose the full-strength artwork below the cassette frame.
*/
.arena-cassette-board
.arena-piece:not(.is-revealed) {
  opacity: 1;
  background:
    linear-gradient(
      115deg,
      rgba(41, 43, 51, 0.995),
      rgba(9, 10, 14, 0.998) 33% 73%,
      rgba(31, 33, 40, 0.995)
    );
}

.arena-cassette-board
.arena-piece.is-revealed {
  opacity: 0;
  visibility: hidden;
}

/* At battle completion, show the artwork fully but retain a light frame. */
.arena-cassette-board.is-complete
.arena-cassette-frame {
  opacity: 0.28;
}

@media (max-width: 760px) {
  .arena-cassette-board
  .arena-hidden-image {
    inset: 2.5%;
    width: 95%;
    height: 95%;
  }
}


/* ============================================================
   v21.2 — Remove cassette decoration after the first reveal
   ============================================================ */

/*
Initial state:
- The realistic cassette is visible.

After at least one correct answer:
- The cassette frame, label, reels, tape and footer disappear.
- Only unopened numbered pieces remain above the original artwork.
- Opened sections expose the clean album/artist image.
*/

.arena-cassette-board.has-reveals
.arena-cassette-frame {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Make the original image fill the board cleanly after a reveal. */
.arena-cassette-board.has-reveals
.arena-hidden-image,
.arena-cassette-board.is-complete
.arena-hidden-image {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 18px;
  background: #08090d;
}

/*
Keep unopened sections fully opaque so players only see the portions
they have earned. Remove cassette-like gloss and texture from them.
*/
.arena-cassette-board.has-reveals
.arena-piece:not(.is-revealed) {
  opacity: 1;
  visibility: visible;
  background:
    linear-gradient(
      145deg,
      rgba(28, 30, 37, 0.995),
      rgba(8, 9, 13, 0.998)
    );
  border-color: rgba(255, 255, 255, 0.14);
  backdrop-filter: none;
}

.arena-cassette-board.has-reveals
.arena-piece:not(.is-revealed)::before {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      rgba(0, 0, 0, 0.12)
    );
}

/* Revealed pieces disappear completely. */
.arena-cassette-board
.arena-piece.is-revealed {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Completed battle: reveal the full clean artwork. */
.arena-cassette-board.is-complete
.arena-cassette-frame,
.arena-cassette-board.is-complete
.arena-cover-grid {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .arena-cassette-board.has-reveals
  .arena-hidden-image,
  .arena-cassette-board.is-complete
  .arena-hidden-image {
    inset: 0;
    width: 100%;
    height: 100%;
  }
}


/* ============================================================
   v21.6 — Shared selected cassette-section marker
   ============================================================ */

/*
active_section is part of the authoritative room state, so this
marker appears in both browsers while the trivia question is open.
*/

.arena-cassette-board
.arena-piece.is-selected:not(.is-revealed) {
  z-index: 12;
  opacity: 1 !important;
  visibility: visible !important;
  border-color: #ff3153 !important;
  background:
    linear-gradient(
      145deg,
      rgba(151, 18, 48, 0.995),
      rgba(55, 5, 18, 0.998)
    ) !important;
  box-shadow:
    inset 0 0 0 3px rgba(255, 49, 83, 0.72),
    inset 0 -8px 0 rgba(255, 49, 83, 0.74),
    0 0 0 2px rgba(255, 49, 83, 0.42),
    0 0 24px rgba(255, 49, 83, 0.52) !important;
  filter: none !important;
  transform: translateY(-3px) scale(0.985);
  animation: arenaSelectedSectionPulse 1.15s ease-in-out infinite;
}

.arena-cassette-board
.arena-piece.is-selected:not(.is-revealed)::before {
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.09),
      rgba(255, 49, 83, 0.05)
    );
}

.arena-cassette-board
.arena-piece.is-selected:not(.is-revealed)::after {
  content: attr(data-selected-label);
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 4;
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: 999px;
  background: #ff3153;
  color: #ffffff;
  font-size: clamp(0.52rem, 0.8vw, 0.68rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.34);
}

.arena-cassette-board
.arena-piece.is-selected:not(.is-revealed)
strong {
  color: #ffffff;
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.85),
    0 0 14px rgba(255, 255, 255, 0.28);
}

@keyframes arenaSelectedSectionPulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 0 3px rgba(255, 49, 83, 0.68),
      inset 0 -8px 0 rgba(255, 49, 83, 0.72),
      0 0 0 2px rgba(255, 49, 83, 0.38),
      0 0 17px rgba(255, 49, 83, 0.34);
  }

  50% {
    box-shadow:
      inset 0 0 0 3px rgba(255, 101, 126, 0.9),
      inset 0 -8px 0 rgba(255, 49, 83, 0.9),
      0 0 0 3px rgba(255, 49, 83, 0.55),
      0 0 31px rgba(255, 49, 83, 0.64);
  }
}

@media (prefers-reduced-motion: reduce) {
  .arena-cassette-board
  .arena-piece.is-selected:not(.is-revealed) {
    animation: none;
  }
}