/* Decision Arena — owns only the P0 play loop. */
body.is-game {
  --play-pink: #ff096c;
  --play-coral: #ff4b34;
  --play-cyan: #00c9ff;
  --play-blue: #0876ff;
  --play-yellow: #ffcf24;
  background: var(--play-blue);
}

body.is-game .app-shell,
body.is-game #gameScreen,
body.is-game #gameCard {
  width: 100%;
  height: 100dvh;
  min-height: 620px;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

body.is-game #gameCard {
  position: relative;
  isolation: isolate;
  color: #fff;
}

body.is-game .decision-arena {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
}

body.is-game .choice {
  position: absolute;
  right: -3%;
  left: -3%;
  width: 106%;
  margin: 0;
  padding: 0 42px;
  border: 0;
  border-radius: 0;
  opacity: 1;
  overflow: hidden;
  color: #fff;
  filter: none;
  text-shadow: 0 4px 12px rgba(23, 22, 73, 0.2);
  transition: transform 460ms cubic-bezier(0.2, 0.88, 0.22, 1), box-shadow 460ms cubic-bezier(0.2, 0.88, 0.22, 1);
  will-change: transform;
}

body.is-game .choice::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.45;
  pointer-events: none;
}

body.is-game #choiceA {
  top: -2%;
  z-index: 2;
  height: 60%;
  padding-top: max(112px, calc(env(safe-area-inset-top) + 104px));
  padding-bottom: 90px;
  background: linear-gradient(145deg, var(--play-coral) 0%, var(--play-pink) 54%, #f80072 100%);
  border-bottom-left-radius: 74% 19%;
  border-bottom-right-radius: 20% 9%;
  box-shadow: 0 24px 46px rgba(101, 0, 76, 0.22);
  transform: translate3d(0, 0, 0) rotate(-0.25deg);
}

body.is-game #choiceA::before {
  background:
    radial-gradient(circle at 15% 38%, rgba(255,255,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 81% 24%, rgba(255,218,56,.26) 0 5px, transparent 6px),
    radial-gradient(circle at 88% 68%, rgba(255,255,255,.18) 0 3px, transparent 4px);
  background-repeat: no-repeat;
}

body.is-game #choiceB {
  bottom: -2%;
  z-index: 1;
  height: 54%;
  padding-top: 92px;
  padding-bottom: max(132px, calc(env(safe-area-inset-bottom) + 112px));
  background: linear-gradient(150deg, var(--play-cyan) 0%, #079ff8 48%, var(--play-blue) 100%);
  box-shadow: 0 -20px 50px rgba(0, 65, 183, 0.14);
  transform: translate3d(0, 0, 0) rotate(0.18deg);
}

body.is-game #choiceB::before {
  background:
    radial-gradient(circle at 15% 34%, rgba(255,255,255,.2) 0 3px, transparent 4px),
    radial-gradient(circle at 83% 68%, rgba(113,255,175,.2) 0 5px, transparent 6px),
    radial-gradient(circle at 48% 86%, rgba(255,255,255,.16) 0 2px, transparent 3px);
  background-repeat: no-repeat;
}

body.is-game .choice-letter {
  display: none;
}

body.is-game .choice-text {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  margin: 0 auto;
  color: #fff;
  font-size: clamp(25px, 7.3vw, 34px);
  font-weight: 900;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
  opacity: 1;
  transform: none;
  transition: transform 460ms cubic-bezier(0.2, 0.88, 0.22, 1);
}

body.is-game .choice[disabled],
body.is-game .game.answered .choice,
body.is-game .game.answered #choiceA,
body.is-game .game.answered #choiceB {
  opacity: 1;
  filter: none;
}

body.is-game .game.answered #choiceA {
  transform: translate3d(0, -26px, 0) rotate(-1.2deg);
  box-shadow: 0 30px 56px rgba(101, 0, 76, 0.22);
}

body.is-game .game.answered #choiceB {
  transform: translate3d(0, 24px, 0) rotate(0.8deg);
}

body.is-game .game.answered #choiceA .choice-text {
  transform: translate3d(0, 12px, 0) rotate(1.2deg);
}

body.is-game .game.answered #choiceB .choice-text {
  transform: translate3d(0, -8px, 0) rotate(-0.8deg);
}

body.is-game .game:not(.answered) #choiceA:active {
  transform: translate3d(0, 4px, 0) rotate(-0.25deg) scale(.99);
}

body.is-game .game:not(.answered) #choiceB:active {
  transform: translate3d(0, -4px, 0) rotate(.18deg) scale(.99);
}

body.is-game .decision-head {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 16px;
  left: 16px;
  z-index: 12;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  align-items: start;
  gap: 12px;
  direction: ltr;
  pointer-events: none;
}

body.is-game .decision-head .round-btn {
  width: 58px;
  height: 58px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.2);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 26px rgba(58, 0, 66, .16);
  backdrop-filter: none;
  pointer-events: auto;
}

body.is-game .decision-head .round-btn:focus-visible,
body.is-game .or-badge:focus-visible,
body.is-game .question-feedback button:focus-visible {
  outline: 3px solid var(--play-yellow);
  outline-offset: 3px;
}

body.is-game .decision-context {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding-top: 1px;
  direction: rtl;
}

body.is-game .game-title {
  position: static;
  margin: 0;
  padding: 7px 18px 5px;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(255,129,41,.96), rgba(255,0,137,.92));
  color: #fff;
  font-size: clamp(15px, 4.7vw, 19px);
  font-weight: 900;
  line-height: 1.25;
  text-shadow: 0 2px 5px rgba(93,0,64,.2);
  box-shadow: 0 10px 24px rgba(107, 0, 75, .18), inset 0 1px 0 rgba(255,255,255,.35);
  white-space: nowrap;
}

body.is-game #gameCategoryTitle {
  max-width: 100%;
  padding: 2px 12px;
  color: #fff7b8;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.3;
  text-shadow: 0 2px 5px rgba(77,0,60,.3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.is-game .result-stack {
  position: absolute;
  top: 53%;
  right: auto;
  left: 50%;
  z-index: 10;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: transform 220ms var(--ease-out), opacity 180ms var(--ease-out);
  pointer-events: none;
}

body.is-game .or-badge {
  width: 78px;
  height: 78px;
  padding: 0;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 999px;
  background: #fff;
  color: var(--play-pink);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 14px 30px rgba(7, 31, 91, .26), inset 0 -3px 7px rgba(23,46,91,.09);
  transition: transform 180ms var(--ease-out), color 180ms ease, box-shadow 220ms var(--ease-out);
}

body.is-game .or-badge:disabled {
  opacity: 1;
}

body.is-game .game.answered .result-stack {
  top: auto;
  bottom: max(82px, calc(env(safe-area-inset-bottom) + 72px));
  width: 164px;
  height: 62px;
  opacity: 1;
  transform: translateX(-50%);
  pointer-events: auto;
}

body.is-game .game.answered .or-badge {
  width: 164px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border-color: #ffe25b;
  color: #ef9c00;
  font-size: 24px;
  box-shadow: 0 0 0 4px rgba(255,221,49,.2), 0 0 30px rgba(255,215,38,.56), 0 15px 32px rgba(0,56,146,.22);
  animation: playNextPop 420ms var(--ease-out) both;
}

body.is-game .game.answered .or-badge b {
  font-size: 30px;
  line-height: 1;
}

body.is-game .vote-tip {
  position: absolute;
  z-index: 5;
  min-width: 104px;
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 9px 14px 8px;
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 20px;
  background: rgba(255,255,255,.94);
  text-align: center;
  text-shadow: none;
  opacity: 0;
  transform: scale(.82);
  box-shadow: 0 13px 28px rgba(28,25,92,.2), inset 0 1px 0 #fff;
  transition: opacity 180ms var(--ease-out), transform 420ms var(--ease-out);
  pointer-events: none;
}

body.is-game .vote-tip::after {
  content: none;
}

body.is-game .vote-tip strong {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

body.is-game .vote-tip small {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 900;
}

body.is-game #tipA {
  top: auto;
  right: auto;
  bottom: 72px;
  left: 32px;
  color: var(--play-pink);
}

body.is-game #tipB {
  top: 64px;
  right: 32px;
  bottom: auto;
  left: auto;
  color: var(--play-blue);
}

body.is-game .game.answered .vote-tip,
body.is-game .game.answered .vote-tip.agree,
body.is-game .game.answered .vote-tip.disagree,
body.is-game .game.answered.picked-a .vote-tip.agree,
body.is-game .game.answered.picked-a .vote-tip.disagree {
  opacity: 1;
  transform: scale(1);
}

body.is-game .result-summary {
  position: absolute;
  top: 52.5%;
  right: 50%;
  z-index: 11;
  width: min(84%, 380px);
  min-height: 0;
  padding: 7px 18px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: var(--play-blue);
  font-size: clamp(14px, 4.2vw, 18px);
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transform: translate(50%, -50%) rotate(-5deg) scale(.86);
  box-shadow: 0 9px 22px rgba(3, 62, 159, .14);
  transition: opacity 180ms var(--ease-out), transform 420ms var(--ease-out);
  pointer-events: none;
}

body.is-game .game.answered .result-summary {
  opacity: 1;
  transform: translate(50%, -50%) rotate(-5deg) scale(1);
}

body.is-game .decision-dock {
  position: absolute;
  right: 20px;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 20px;
  z-index: 12;
  pointer-events: none;
}

body.is-game .question-feedback {
  position: static;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  gap: 14px;
  direction: rtl;
  transform: none;
  animation: none;
  pointer-events: auto;
}

body.is-game .question-feedback[hidden] {
  display: none;
}

body.is-game .question-feedback button {
  width: 54px;
  height: 54px;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
  gap: 0;
  padding: 5px;
  border: 2px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  box-shadow: 0 10px 24px rgba(0,49,139,.16), inset 0 1px 0 rgba(255,255,255,.24);
}

body.is-game .question-feedback button .dazzle-icon {
  width: 24px;
  height: 24px;
}

body.is-game .question-feedback button b {
  display: none;
}

body.is-game #likeQuestion {
  color: #8dff58;
  border-color: rgba(141,255,88,.38);
}

body.is-game #likeQuestion.active {
  border-color: #8dff58;
  background: #8dff58;
  color: #075c35;
  box-shadow: inset 0 3px 8px rgba(7,92,53,.2), 0 0 0 4px rgba(141,255,88,.2);
  transform: scale(.94);
}

body.is-game #dislikeQuestion {
  color: #ff6c96;
  border-color: rgba(255,108,150,.42);
}

body.is-game #dislikeQuestion.active {
  border-color: #ff6c96;
  background: #ff6c96;
  color: #72112d;
  box-shadow: inset 0 3px 8px rgba(114,17,45,.2), 0 0 0 4px rgba(255,108,150,.2);
  transform: scale(.94);
}

body.is-game #reportQuestion {
  color: #fff275;
  border-color: rgba(255,242,117,.38);
}

body.is-game #floatingNext {
  display: none !important;
}

body.is-game .game-loader {
  z-index: 30;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 4px;
  background: #fff;
  color: var(--play-blue);
}

body.is-game .game.loading .game-loader,
body.is-game .game.advancing .game-loader {
  opacity: 1;
  pointer-events: auto;
}

body.is-game .game-loader-animation {
  position: relative;
  width: min(58vw, 230px);
  aspect-ratio: 1;
}

body.is-game .game-loader-animation svg {
  width: 100% !important;
  height: 100% !important;
}

body.is-game .game-loader-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--play-pink), var(--play-blue));
  color: #fff;
  font-size: 54px;
  font-weight: 900;
  box-shadow: 12px 12px 30px rgba(8,118,255,.18), -12px -12px 30px #fff;
}

body.is-game .game-loader-animation.is-loaded .game-loader-fallback {
  display: none;
}

body.is-game .game-loader-label {
  font-size: 17px;
  font-weight: 900;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  body.is-game .game-loader-animation {
    width: min(44vw, 180px);
  }
}

@keyframes playNextPop {
  from { transform: scale(.72); }
  to { transform: scale(1); }
}

@media (min-width: 760px) {
  body.is-game .app-shell {
    width: min(100%, 560px);
    margin-inline: auto;
    box-shadow: 0 0 80px rgba(0,52,152,.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-game .choice,
  body.is-game .choice-text,
  body.is-game .result-stack,
  body.is-game .or-badge,
  body.is-game .vote-tip,
  body.is-game .result-summary {
    transition-duration: 1ms;
    animation: none !important;
  }

  body.is-game .game.answered #choiceA,
  body.is-game .game.answered #choiceB,
  body.is-game .game.answered #choiceA .choice-text,
  body.is-game .game.answered #choiceB .choice-text {
    transform: none;
  }
}

@media (max-height: 700px) {
  body.is-game .choice-text {
    font-size: clamp(22px, 6.8vw, 30px);
  }

  body.is-game .game.answered .result-stack { bottom: 72px; }

  body.is-game .question-feedback button {
    width: 48px;
    height: 48px;
  }
}