* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  overflow: hidden;
  background: #000;
  color: #fff7df;
  font-family: Arial, sans-serif;
}
.mygoldMenuAction {
  display: block;
  width: min(100%, 430px);
  min-height: 44px;
  margin: 10px auto 0;
  padding: 11px 18px;
  border: 1px solid #f4b72455;
  border-radius: 9px;
  background: linear-gradient(135deg, #171207, #080b10);
  box-shadow: inset 0 0 22px #f4b7240b;
  color: #e7bd48;
  font: 900 9px Arial, sans-serif;
  letter-spacing: 1.4px;
  touch-action: manipulation;
}
.mygoldMenuAction:active { transform: scale(.98); }
#bootCinematic {
  position: fixed;
  z-index: 200;
  inset: 0;
  width: 100%;
  height: 100dvh;
  display: grid;
  place-content: center;
  gap: 22px;
  border: 0;
  padding: 28px;
  background:
    radial-gradient(circle at 50% 46%, #381108 0, #0a0302 28%, #000 68%), #000;
  color: #fff;
  text-align: center;
  overflow: hidden;
  pointer-events: auto;
  cursor: pointer;
  touch-action: manipulation;
  isolation: isolate;
  transition:
    opacity 0.62s ease,
    transform 0.62s ease;
}
#bootCinematic.playing {
  background: #000;
}
#bootCinematic.titlePhase {
  background:
    radial-gradient(circle at 50% 46%, #381108 0, #0a0302 28%, #000 68%), #000;
}
.bootEntry {
  position: relative;
  display: grid;
  width: min(760px, calc(100vw - 36px));
  gap: 22px;
  padding: clamp(30px, 7vw, 64px) clamp(20px, 7vw, 70px);
  border: 1px solid #ff9a3d5e;
  border-radius: 4px;
  background: linear-gradient(145deg, #0c0b0bf2, #020202f8);
  box-shadow:
    0 30px 90px #000,
    0 0 55px #ff4b1817,
    inset 0 0 45px #ff8b1710;
  clip-path: polygon(
    22px 0,
    calc(100% - 22px) 0,
    100% 22px,
    100% calc(100% - 22px),
    calc(100% - 22px) 100%,
    22px 100%,
    0 calc(100% - 22px),
    0 22px
  );
}
.bootEntry:before {
  content: "";
  position: absolute;
  top: 0;
  left: 17%;
  right: 17%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffb52d, transparent);
  box-shadow: 0 0 20px #ff711c;
}
.bootKicker {
  color: #ffbe50;
  font:
    900 9px Arial,
    sans-serif;
  letter-spacing: 4px;
}
.bootKicker i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ff3b20;
  box-shadow: 0 0 12px #ff3b20;
}
#bootCinematic:before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  opacity: 0;
  background:
    radial-gradient(circle, #d5172938 0 10%, transparent 42%),
    repeating-conic-gradient(from 0deg, #ffffff09 0 1deg, transparent 1deg 8deg);
  transform: scale(0.4) rotate(-8deg);
}
#bootCinematic span {
  font:
    800 clamp(18px, 5vw, 30px) Arial,
    sans-serif;
  letter-spacing: clamp(3px, 1.5vw, 9px);
  text-shadow: 0 0 22px #fff5;
}
#bootQuestion {
  width: 100%;
  line-height: 1;
  letter-spacing: normal !important;
  animation: bootQuestionIn 0.65s ease-out both;
}
#bootQuestion em {
  display: block;
  margin-bottom: 17px;
  color: #fff;
  font:
    italic 900 clamp(30px, 7.5vw, 58px) / 0.92 Impact,
    Arial Black,
    sans-serif;
  letter-spacing: -1px;
  text-shadow: 0 7px 30px #000;
}
#bootQuestion b {
  display: block;
  margin-top: 0;
  color: #f4b724;
  font:
    900 clamp(14px, 3.4vw, 22px) / 1.15 Arial,
    sans-serif;
  letter-spacing: clamp(1px, 0.6vw, 4px);
}
#bootQuestion b + b {
  margin-top: 4px;
  color: #ff6b35;
}
.bootMeta {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.bootMeta span {
  padding: 8px 11px;
  border: 1px solid #ffffff18;
  border-radius: 999px;
  background: #ffffff08;
  color: #8d9aaa;
  font-size: 7px !important;
  letter-spacing: 1px !important;
  text-shadow: none !important;
}
.bootMeta b {
  color: #fff;
}
#bootPresents {
  display: none;
  animation: bootPresentsIn 0.45s ease-out both;
}
#bootCinematic strong {
  display: none;
  font:
    900 clamp(48px, 15vw, 104px) / 0.8 Georgia,
    serif;
  letter-spacing: -2px;
  filter: drop-shadow(0 0 24px #d5172966);
}
#bootCinematic strong em {
  display: block;
  color: #d51729;
  font-style: normal;
  -webkit-text-stroke: 1px #ff5a62;
}
#bootCinematic small {
  display: inline-flex;
  justify-self: center;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border: 1px solid #ffb52d5c;
  border-radius: 3px;
  background: linear-gradient(135deg, #ffb52d1c, #ff3b200e);
  color: #fff;
  font:
    800 10px Arial,
    sans-serif;
  letter-spacing: 4px;
  opacity: 0.72;
  animation: bootPrompt 1.1s ease-in-out infinite;
}
#bootCinematic small i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffb52d;
  box-shadow: 0 0 12px #ff8b1e;
}
#bootCinematic.playing .bootEntry,
#bootCinematic.titlePhase span {
  display: none;
}
#bootCinematic.playing #bootPresents {
  display: block;
}
#bootCinematic.titlePhase #bootPresents {
  display: none;
}
#bootCinematic.titlePhase strong {
  display: block;
  animation: bootTitle 0.58s cubic-bezier(0.16, 0.9, 0.22, 1) both;
}
#bootCinematic.titlePhase:before {
  opacity: 1;
  animation: bootBurst 2.8s ease-out both;
}
#bootCinematic.done {
  opacity: 0;
  transform: scale(1.08);
  pointer-events: none;
}
@keyframes bootQuestionIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes bootPresentsIn {
  from {
    opacity: 0;
  }
}
@keyframes bootPrompt {
  50% {
    opacity: 0.25;
  }
}
@keyframes bootTitle {
  0% {
    opacity: 0;
    transform: scale(1.7);
  }
  65% {
    opacity: 1;
    transform: scale(0.94);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes bootBurst {
  from {
    transform: scale(0.4) rotate(-8deg);
  }
  to {
    transform: scale(1.3) rotate(4deg);
  }
}
html,
body {
  width: 100%;
  height: 100%;
}
#app,
#stage,
#stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: var(--app-height, 100dvh);
  touch-action: none;
}
#app:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle, transparent 45%, #000a 120%);
  z-index: 2;
}
#portraitGuard {
  display: none;
  position: fixed;
  z-index: 100;
  inset: 0;
  place-content: center;
  gap: 10px;
  padding: 24px;
  background: #000;
  color: #ffc43d;
  text-align: center;
  font:
    italic 900 24px Impact,
    sans-serif;
  letter-spacing: 2px;
}
#portraitGuard span {
  color: #fff;
  font:
    700 10px Arial,
    sans-serif;
  letter-spacing: 2px;
}
@media (orientation: landscape) and (pointer: coarse) {
  #portraitGuard {
    display: grid;
  }
}
#app.menuMode:before,
#app.loadingMode:before,
#app.resultMode:before {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 0;
  background: #000;
}
#app.menuMode #hud,
#app.menuMode #actionHud,
#app.menuMode nav,
#app.resultMode #hud,
#app.resultMode #actionHud,
#app.resultMode nav,
#app.loadingMode header,
#app.loadingMode #hud,
#app.loadingMode #actionHud,
#app.loadingMode nav {
  display: none !important;
}
#app.menuMode .brand,
#app.resultMode .brand {
  display: none;
}
#app.menuMode header,
#app.resultMode header {
  justify-content: flex-end;
}
header {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 0;
  padding: 22px 4vw;
  display: flex;
  justify-content: space-between;
}
.brand {
  display: flex;
  gap: 11px;
  align-items: center;
}
.brand i {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid #f4b724;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px #8e1018;
  color: #f4b724;
  font: bold 25px Georgia;
}
.brand b {
  display: block;
  font: 700 18px Georgia;
  letter-spacing: 3px;
}
.brand small {
  display: block;
  color: #f4b724;
  letter-spacing: 7px;
  font-size: 8px;
  margin-top: 4px;
}
button {
  cursor: pointer;
}
.audioControls { display: flex; gap: 7px; align-items: center; }
#sound,
#musicToggle {
  height: 38px;
  border: 1px solid #ffffff55;
  background: #020a16aa;
  color: white;
  border-radius: 20px;
  padding: 0 16px;
  font: bold 9px Arial;
  letter-spacing: 2px;
}
#hud {
  position: absolute;
  z-index: 5;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
#hud div {
  min-width: 96px;
  text-align: center;
  padding: 9px 13px;
  background: #020a16cc;
  border: 1px solid #ffffff22;
}
#hud small {
  display: block;
  color: #92a7c0;
  font-size: 7px;
  letter-spacing: 2px;
  margin-bottom: 5px;
}
#hud b {
  font-size: 17px;
}
#rankPosition {
  display: block;
  min-height: 8px;
  margin-top: 4px;
  color: #70e9a4;
  font: normal 800 6px/1 Arial, sans-serif;
  letter-spacing: 0.8px;
}
#rankPosition.rankUp { animation: rankUp 650ms ease-out; }
@keyframes rankUp {
  45% { color: #ffe071; transform: scale(1.12); text-shadow: 0 0 12px #f4b724; }
}
#coinMultiplier {
  color: #ffc43d;
  font-weight: 900;
}
#comboHint {
  display: block;
  min-height: 8px;
  margin-top: 3px;
  color: #8fa4ba;
  font:
    normal 700 6px/1 Arial,
    sans-serif;
  letter-spacing: 0.7px;
}
#hud .comboX2 {
  border-color: #ffba386e;
  box-shadow: inset 0 -2px 0 #ffba38;
}
#hud .comboX3 {
  border-color: #ff552f9c;
  box-shadow:
    inset 0 -2px 0 #ff552f,
    0 0 20px #ff552f26;
}
#hud .coinPickup {
  animation: coinPickup 180ms ease-out;
}
@keyframes coinPickup {
  45% {
    transform: scale(1.055);
    border-color: #ffd75e;
    box-shadow:
      inset 0 0 18px #ffb72d38,
      0 0 22px #ffb72d2e;
  }
}
#actionHud {
  position: absolute;
  z-index: 5;
  top: 128px;
  left: 50%;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}
#actionHud > div {
  min-width: 72px;
  padding: 6px 10px;
  border: 1px solid #ffb53b66;
  border-radius: 10px;
  background: #030b16dc;
  text-align: center;
}
#actionHud small {
  display: block;
  color: #91a5bb;
  font-size: 7px;
  letter-spacing: 2px;
}
#powerHud b {
  color: #41e5ff;
  font-size: 13px;
}
#gameToast {
  position: absolute;
  z-index: 8;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-3deg);
  color: #fff;
  font:
    italic 900 clamp(22px, 5vw, 42px) Impact,
    sans-serif;
  letter-spacing: 2px;
  text-shadow:
    0 4px 0 #b51d20,
    0 0 30px #ff9a32;
  pointer-events: none;
  animation: toastPop 0.65s ease-out;
}
#superBanner {
  display: none !important;
  position: absolute;
  z-index: 8;
  top: 24%;
  left: 50%;
  padding: 10px 20px;
  transform: translateX(-50%) skewX(-8deg);
  border: 2px solid #fff2a0;
  background: linear-gradient(110deg, #a20b16, #ff791f, #f3b926);
  color: white;
  font:
    italic 900 clamp(24px, 5vw, 42px) Impact,
    sans-serif;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 0 3px 0 #6b0710;
  box-shadow: 0 0 35px #ff762bcc;
  animation: superPulse 0.42s ease-in-out infinite alternate;
}
#message.confirmed .resultIcon {
  border-color: #55f28c;
  background: #082717;
  color: #55f28c;
  box-shadow: 0 0 32px #21dc6d55;
}
#message.confirmed #messageTitle {
  color: #fff4cf;
}
#message.securityReview .resultIcon {
  border-color: #ffb528;
  background: #2b1705;
  color: #ffd46f;
  box-shadow: 0 0 34px #ff9d2855;
}
#message.securityReview #messageTag {
  color: #ffca5a;
}
#superBanner small {
  display: block;
  font: 900 7px Arial;
  letter-spacing: 5px;
}
@keyframes superPulse {
  to {
    transform: translateX(-50%) skewX(-8deg) scale(1.06);
    filter: brightness(1.22);
  }
}
#app.superMode:before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  border: clamp(4px, 1vw, 10px) solid #ff9c2a80;
  box-shadow: inset 0 0 70px #ff361f66;
  animation: superFrame 0.35s ease-in-out infinite alternate;
}
@keyframes superFrame {
  to {
    border-color: #ffe65dbb;
    box-shadow: inset 0 0 100px #ff7b1f80;
  }
}
@keyframes toastPop {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5) rotate(-8deg);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18) rotate(2deg);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -70%) scale(1) rotate(-3deg);
  }
}
.gold {
  color: #f4b724;
}
.hearts {
  color: #ee3239;
  letter-spacing: 2px;
}
.panel {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 51%;
  transform: translate(-50%, -50%);
  width: min(620px, calc(100% - 32px));
  padding: 45px;
  text-align: center;
  background: linear-gradient(145deg, #020202f7, #090909f2);
  border: 1px solid #f4b72488;
  box-shadow: 0 25px 90px #000c;
  clip-path: polygon(
    24px 0,
    calc(100% - 24px) 0,
    100% 24px,
    100% calc(100% - 24px),
    calc(100% - 24px) 100%,
    24px 100%,
    0 calc(100% - 24px),
    0 24px
  );
}
#intro {
  box-shadow:
    0 0 0 100vmax #000,
    0 25px 90px #000;
}
.panel p {
  color: #f4b724;
  font: bold 9px Arial;
  letter-spacing: 4px;
}
.panel h1 {
  font: 900 clamp(48px, 8vw, 82px) / 0.78 Georgia;
  margin: 17px 0 25px;
}
.panel h1 em {
  font-style: normal;
  color: #c51c25;
  -webkit-text-stroke: 1px #ff5555;
}
.panel h2 {
  font: 900 48px Georgia;
  margin: 20px;
}
.copy {
  color: #bdc8d7;
  font-size: 14px;
}
.prizePodium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 25px auto 0;
}
.prizePodium div {
  position: relative;
  min-width: 0;
  padding: 15px 10px 14px;
  overflow: hidden;
  border: 1px solid #ffffff21;
  border-radius: 10px;
  background: linear-gradient(155deg, #121820, #050608);
  box-shadow: inset 0 1px #ffffff0b;
}
.prizePodium .firstPrize {
  border-color: #f4b72488;
  background: linear-gradient(155deg, #2b2109, #080705);
  box-shadow:
    inset 0 1px #fff2a329,
    0 0 24px #e9a91b16;
}
.prizePodium i {
  display: grid;
  width: 27px;
  height: 27px;
  margin: 0 auto 10px;
  place-items: center;
  border: 1px solid #ffffff42;
  border-radius: 50%;
  color: #dce5ef;
  font:
    normal 900 11px Arial,
    sans-serif;
}
.prizePodium .firstPrize i {
  border-color: #f4b724;
  background: #f4b724;
  color: #241700;
  box-shadow: 0 0 18px #f4b72455;
}
.prizePodium span {
  display: block;
  color: #77889a;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 1px;
}
.prizePodium b {
  display: block;
  margin-top: 7px;
  color: #fff4d2;
  font-size: 11px;
}
.prizePodium .firstPrize b {
  color: #ffd256;
}
#play {
  position: relative;
  overflow: hidden;
  animation: playFocus 1.9s ease-in-out infinite;
}
.brandBroadcast {
  display: flex;
  width: min(100%, 430px);
  min-height: 34px;
  margin: 20px auto 4px;
  padding: 8px 14px;
  justify-content: center;
  align-items: center;
  border: 1px solid #f4b72425;
  border-radius: 999px;
  background: #15100799;
  color: #e3bd65;
  font: 800 8px/1 Arial, sans-serif;
  letter-spacing: 1.35px;
  white-space: nowrap;
}
.brandBroadcast span,
.raceTicker span {
  transition: opacity 150ms ease, transform 150ms ease;
}
.brandBroadcast span.switching,
.raceTicker span.switching {
  opacity: 0;
  transform: translateY(4px);
}
.raceTicker {
  display: flex;
  width: min(100%, 500px);
  min-height: 56px;
  margin: 13px auto 0;
  padding: 9px 16px;
  align-items: center;
  justify-content: center;
  border: 1px solid #42e78624;
  border-radius: 10px;
  background: linear-gradient(90deg, #06100dcc, #071624cc, #06100dcc);
  color: #aab9c9;
  overflow: hidden;
  text-align: center;
}
#activityTicker {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 4px;
  place-items: center;
  text-align: center;
}
#activityTicker b {
  display: block;
  width: 100%;
  overflow: hidden;
  color: #f3c45b;
  font: 900 8px/1.1 Arial, sans-serif;
  letter-spacing: 1.25px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#activityTicker small {
  display: block;
  width: min(100%, 44ch);
  min-height: 22px;
  max-height: 2.5em;
  margin: 0 auto;
  overflow: hidden;
  color: #b8c7d8;
  font: 800 9px/1.25 Arial, sans-serif;
  letter-spacing: 0.35px;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.activityPanel ol {
  list-style: none;
  max-height: 52vh;
  margin: 15px 0;
  padding: 0;
  overflow: auto;
  text-align: left;
}
.activityPanel li {
  display: grid;
  gap: 5px;
  padding: 12px 10px;
  border-bottom: 1px solid #ffffff14;
  color: #d9e3ee;
  font-size: 11px;
  line-height: 1.35;
}
.activityPanel li small {
  color: #74879d;
  font-size: 8px;
  letter-spacing: 1px;
}
.activitySummary {
  color: #54e995;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.6px;
}
.activityRefresh {
  margin: 10px auto 2px;
  padding: 8px 14px;
  border: 1px solid #54e99545;
  border-radius: 999px;
  background: #07140e;
  color: #69efa0;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 1.3px;
}
.activityRefresh:disabled { opacity: 0.58; }
.shoutBox {
  width: min(100%, 410px);
  margin: 12px auto;
  padding: 13px;
  border: 1px solid #f4b72444;
  border-radius: 14px;
  background: #0c0b08e8;
}
.shoutBox > strong,
.shoutBox > small { display: block; }
.shoutBox > strong { color: #f4b724; font-size: 10px; letter-spacing: 1.4px; }
.shoutBox > small { margin: 5px 0 10px; color: #8798aa; font-size: 8px; }
#shoutChoices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#shoutChoices button,
.shoutSkip {
  min-height: 42px;
  padding: 7px;
  border: 1px solid #ffffff20;
  border-radius: 8px;
  background: #101722;
  color: #dfe8f2;
  font-size: 9px;
  line-height: 1.25;
}
.shoutSkip { min-height: 0; margin-top: 8px; border: 0; background: transparent; color: #75879b; }
.savedResultSummary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  width: min(100%, 450px);
  margin: 15px auto 9px;
}
.savedResultSummary span {
  padding: 10px 5px;
  border: 1px solid #ffffff18;
  border-radius: 9px;
  background: #07101bd9;
  color: #7f91a6;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.8px;
}
.savedResultSummary b {
  display: block;
  margin-top: 5px;
  color: #f4c452;
  font-size: 13px;
  letter-spacing: 0;
}
.savedNextTarget {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 12px;
  width: min(100%, 450px);
  margin: 8px auto 10px;
  padding: 11px 13px;
  border: 1px solid #f4b72445;
  border-radius: 11px;
  background: linear-gradient(135deg, #1a170d, #090f18);
  text-align: left;
}
.savedNextTarget small { color: #d7b44f; font-size: 7px; font-weight: 900; letter-spacing: .65px; white-space: nowrap; }
.savedNextTarget b { color: #fff2c2; font-size: 13px; white-space: nowrap; }
.savedNextTarget span { grid-column: 1 / -1; color: #91a1b3; font-size: 8px; line-height: 1.35; }
.resultActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  width: min(100%, 430px);
  margin: 12px auto 0;
}
.resultActions .primary,
.resultActions .secondary {
  width: 100%;
  min-height: 43px;
  margin: 0;
  padding: 10px 8px;
  font-size: 8px;
}
.resultActions .primary { grid-column: 1 / -1; }
.resultActions .mygoldMenuAction { grid-column: 1 / -1; margin-top: 2px; }
#message.confirmed #again {
  min-height: 52px;
  padding: 14px 16px;
  border-color: #ffd66b;
  background: linear-gradient(135deg, #ffbd32, #f4771e);
  color: #110b02;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .8px;
  text-shadow: 0 1px 0 #fff5;
  box-shadow: 0 9px 24px #f2862c40;
  animation: replayPulse 2.2s ease-in-out infinite;
}
@keyframes replayPulse {
  50% { transform: translateY(-1px) scale(1.018); box-shadow: 0 11px 30px #f6a52d62, 0 0 0 4px #ffca4c18; }
}
#message.confirmed #openShout:not(:disabled) {
  border-color: #f3bd3e;
  background: linear-gradient(135deg, #3b2a08, #151107);
  color: #ffe17e;
  box-shadow: 0 0 0 0 #f4b72455;
  animation: shoutInvitePulse 2.6s ease-in-out infinite;
}
@keyframes shoutInvitePulse {
  50% { border-color: #ffe283; box-shadow: 0 0 0 5px #f4b72400, 0 5px 18px #f4b72422; }
}
.inviteCard {
  width: min(100%, 450px);
  margin: 11px auto 0;
  padding: 12px;
  border: 1px solid #ffffff18;
  border-radius: 13px;
  background: linear-gradient(145deg, #0c1723, #060b12);
  text-align: left;
}
.inviteCard > div:first-child small { display: block; color: #6f8398; font-size: 6px; font-weight: 900; letter-spacing: .8px; }
.inviteCard > div:first-child b { display: block; margin-top: 4px; color: #f6cf63; font-size: 11px; }
.inviteCard > div:first-child span { display: block; margin-top: 4px; color: #91a1b2; font-size: 8px; line-height: 1.35; }
.inviteActions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 10px; }
.inviteActions button { min-width: 0; min-height: 36px; padding: 7px 4px; border: 1px solid #ffffff1f; border-radius: 8px; background: #111d29; color: #dce7f1; font-size: 6px; font-weight: 900; letter-spacing: .4px; }
.inviteActions button:first-child { border-color: #35d27c55; color: #66e69b; }
.postPanel { width: min(560px, calc(100% - 22px)); }
.postPanel h2 { margin: 11px 0 17px; font-size: clamp(29px, 7.5vw, 45px); }
.postPanel > small { color: #8294a8; font-size: 8px; }
.personalLog {
  list-style: none;
  max-height: 46vh;
  margin: 12px 0;
  padding: 0;
  overflow: auto;
  text-align: left;
}
.personalLog li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 8px;
  padding: 10px 6px;
  border-bottom: 1px solid #ffffff14;
}
.personalLog li strong { color: #fff1c5; }
.personalLog li small { color: #7d90a6; font-size: 8px; }
.shoutScreen { width: 100%; }
.shoutIntro { margin: -5px auto 20px; max-width: 410px; color: #a8b6c5; font-size: 12px; line-height: 1.5; }
.shoutStep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 10px;
  color: #d8e2ed;
  font-size: 8px;
  letter-spacing: .8px;
  text-align: left;
}
.shoutStep span {
  display: grid;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid #f4b72480;
  border-radius: 50%;
  background: #2a2009;
  color: #ffd25d;
}
.shoutPhraseHead { margin-top: 15px; }
.shoutPhraseHead small { margin-left: auto; color: #73879d; font-size: 7px; }
.shoutCategories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 0;
  padding: 2px 0;
}
.shoutCategories button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 67px;
  padding: 12px 14px;
  border: 1px solid #ffffff1f;
  border-radius: 14px;
  background: linear-gradient(145deg, #101c29, #080e16);
  color: #a8b7c7;
  text-align: left;
}
.shoutCategories button i { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border: 1px solid #ffffff18; border-radius: 11px; background: #050a10; font-size: 19px; font-style: normal; }
.shoutCategories button span { min-width: 0; }
.shoutCategories button b { display: block; color: #e6edf4; font-size: 10px; letter-spacing: .7px; }
.shoutCategories button small { display: block; margin-top: 4px; color: #8293a6; font-size: 8px; }
.shoutCategories button.active small { color: #cba842; }
.shoutCategories button.active {
  border-color: #f4b724a8;
  background: linear-gradient(145deg, #342807, #171307);
  box-shadow: inset 0 0 18px #e6a90012, 0 5px 16px #0005;
  color: #ffd25d;
}
.shoutCategories button::after { content: "ESCOLHER  ›"; margin-left: auto; color: #718397; font-size: 6px; font-weight: 900; letter-spacing: .5px; }
.shoutBack { display: block; margin: 0 0 15px; padding: 7px 0; border: 0; background: transparent; color: #f2c650; font-size: 7px; font-weight: 900; letter-spacing: .7px; }
.shoutPhraseMeta { display: flex; justify-content: space-between; margin: -5px 0 10px; color: #8192a5; font-size: 7px; }
.shoutPhraseMeta small { color: #d2ad48; font-size: 7px; }
.shoutChoices {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  max-height: 43vh;
  margin: 8px 0 13px;
  overflow: auto;
}
.shoutChoices button {
  min-height: 59px;
  padding: 12px 14px;
  border: 1px solid #ffffff1c;
  border-radius: 13px;
  background: linear-gradient(145deg, #121f2e, #070d15);
  color: #e2e9f1;
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
}
.shoutChoices button::after { content: "○  SELECIONAR"; float: right; margin: 1px 0 0 12px; color: #6f8298; font-size: 6px; font-weight: 900; letter-spacing: .5px; }
.shoutChoices button.selected { border-color: #f4b724; background: linear-gradient(145deg, #2b230d, #0b1119); color: #ffe181; box-shadow: inset 0 0 0 1px #f4b72435; }
.shoutChoices button.selected::after { content: "●  SELECIONADO"; color: #f4c452; }
.shoutChoices button:active { border-color: #f4b724; color: #ffd25d; transform: scale(.99); }
.shoutPreview { margin: 2px 0 12px; padding: 11px; border: 1px solid #ffffff20; border-radius: 12px; background: #060c14; text-align: left; }
.shoutPreview > small { color: #718397; font-size: 6px; font-weight: 900; letter-spacing: .7px; }
.shoutPreview div { margin-top: 7px; color: #dfe8f1; font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; }
.shoutPreview div b { display: block; margin-bottom: 3px; color: #f2c650; font-size: 8px; }
.shoutPreview .primary { width: 100%; min-height: 42px; margin: 10px 0 0; padding: 10px; font-size: 8px; }
.shoutPrivacy { margin: -4px 0 11px; color: #6f8298; font-size: 7px; line-height: 1.4; }

body.keyboardOpen #message {
  top: calc(var(--visual-top, 0px) + 8px) !important;
  bottom: auto !important;
  max-height: calc(var(--visual-height, 100dvh) - 16px) !important;
  transform: translateX(-50%) !important;
  overscroll-behavior: contain;
  scroll-padding: 80px 0;
}
body.keyboardOpen #message .resultIcon,
body.keyboardOpen #message #messageTag,
body.keyboardOpen #message #messageTitle,
body.keyboardOpen #message #messageCopy,
body.keyboardOpen #message #resultBreakdown { display: none; }
body.keyboardOpen #scoreForm { margin-top: 0; }
#play:after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  width: 34%;
  background: linear-gradient(90deg, transparent, #fff9, transparent);
  transform: skewX(-24deg);
  animation: playShine 2.8s ease-in-out infinite;
}
@keyframes playFocus {
  50% {
    transform: translateY(-2px) scale(1.025);
    box-shadow:
      0 16px 48px #ff6c2166,
      0 0 0 4px #ffb52d1f;
  }
}
@keyframes playShine {
  0%,
  52% {
    left: -55%;
  }
  82%,
  100% {
    left: 125%;
  }
}
.primary {
  display: block;
  margin: 26px auto 22px;
  border: 0;
  padding: 17px 28px;
  background: linear-gradient(#ffd65b, #da960d);
  color: #281600;
  font-weight: 900;
  letter-spacing: 2px;
  clip-path: polygon(9px 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}
aside {
  color: #8999ad;
  font-size: 8px;
  letter-spacing: 1px;
}
.secondary {
  border: 1px solid #f4b72466;
  background: #071528;
  color: #f4b724;
  padding: 11px 18px;
  font-weight: bold;
  letter-spacing: 1px;
}
.panel form {
  display: grid;
  gap: 9px;
  max-width: 390px;
  margin: 18px auto;
}
.panel form input,
.panel form select {
  padding: 13px;
  border: 1px solid #ffffff33;
  background: #061424;
  color: white;
  border-radius: 7px;
}
.panel form select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #f4b724 50%),
    linear-gradient(135deg, #f4b724 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 12px) 18px;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.panel form label {
  display: flex;
  gap: 8px;
  text-align: left;
  color: #9fb0c4;
  font-size: 11px;
  line-height: 1.35;
}
.panel form label input {
  width: auto;
}
.panel form .primary {
  margin: 5px auto;
}
.panel form > small {
  color: #7f91a7;
}
.ranking {
  max-height: 82vh;
  overflow: auto;
}
.ranking ol {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  text-align: left;
}
.ranking li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 11px;
  border-bottom: 1px solid #ffffff17;
}
.ranking li strong {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.15;
}
.ranking li b,
.ranking li small { white-space: nowrap; }
.ranking li small {
  color: #8fa5bd;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.rankingMode {
  color: #91a7c2;
  font-size: 9px;
  letter-spacing: 2px;
}
.ranking .secondary {
  margin: 4px;
}
.rankingPager {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  gap: 10px;
  align-items: center;
  margin: 10px 0 14px;
  padding: 10px;
  border: 1px solid #f4b72430;
  border-radius: 12px;
  background: #020912cc;
  color: #f4b724;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1.5px;
}
.rankingPager .secondary {
  min-width: 0;
  width: 48px;
  height: 40px;
  padding: 0;
  font-size: 18px;
}
.rankingPager button:disabled {
  opacity: 0.25;
}
.playerHistory {
  width: min(100%, 390px);
  max-height: 24vh;
  overflow: auto;
  margin: 10px auto 12px;
  padding: 12px;
  border: 1px solid #f4b72438;
  border-radius: 12px;
  background: #020912d9;
  text-align: left;
}
.playerHistoryHead {
  display: flex;
  justify-content: space-between;
  color: #f4b724;
  font-size: 9px;
  letter-spacing: 1.4px;
}
.playerHistory ol {
  list-style: none;
  margin: 8px 0;
  padding: 0;
}
.playerHistory li {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid #ffffff12;
  font-size: 11px;
}
.playerHistory li strong { color: #fff4cf; }
.playerHistory li small,
.playerHistory > small { color: #8193a8; font-size: 8px; }
.ranking li b {
  color: #f4b724;
}
.ranking li:first-child,
.ranking li:nth-child(2),
.ranking li:nth-child(3) {
  background: #f4b72412;
}
nav {
  display: none;
  position: absolute;
  z-index: 6;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  gap: 11px;
}
nav button {
  width: 66px;
  height: 59px;
  border: 1px solid #ffffff66;
  border-radius: 12px;
  background: #020a16c9;
  color: white;
  font-size: 23px;
}
nav button#jump {
  height: 76px;
  color: #f4b724;
}
nav button:active {
  transform: scale(0.975);
  border-color: #ffc14d;
  background: linear-gradient(180deg, #17365ee8, #081423ed);
}
nav small {
  display: block;
  font-size: 7px;
}
.hidden {
  display: none !important;
}
footer {
  position: absolute;
  z-index: 4;
  bottom: 12px;
  width: 100%;
  text-align: center;
  font-size: 7px;
  letter-spacing: 3px;
  color: #ffffff77;
}
footer b {
  color: #f4b724;
  margin: 0 8px;
}
#fatal {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 30px;
  background: #020814;
  color: #fff;
  font-size: 18px;
}
@media (max-width: 700px), (pointer: coarse) {
  header {
    padding: 14px;
  }
  .brand b {
    font-size: 14px;
  }
  .brand i {
    width: 38px;
    height: 38px;
  }
  #hud {
    top: 68px;
    width: calc(100% - 22px);
  }
  #actionHud {
    top: 119px;
  }
  #actionHud > div {
    min-width: 78px;
    padding: 6px 9px;
  }
  #hud div {
    min-width: 0;
    flex: 1;
    padding: 8px 5px;
  }
  .panel {
    top: 45%;
    padding: 27px 18px;
  }
  #intro {
    top: max(8px, env(safe-area-inset-top));
    bottom: max(8px, env(safe-area-inset-bottom));
    height: auto;
    max-height: none;
    padding: clamp(13px, 2.2dvh, 20px) 17px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: auto;
  }
  #intro .heroLogo { max-height: clamp(86px, 18dvh, 145px); }
  #intro .prizePodium { width: 100%; }
  #intro .brandBroadcast { margin: clamp(8px, 1.8dvh, 18px) auto 3px; }
  #intro #play { margin: clamp(9px, 1.6dvh, 15px) auto 7px; }
  #intro #openRanking { margin: 0 auto; }
  #intro .raceTicker { margin-top: clamp(8px, 1.5dvh, 13px); }
  .panel h1 {
    font-size: 50px;
  }
  .panel aside {
    display: none;
  }
  nav {
    display: flex;
  }
  footer {
    display: none;
  }
}

/* Adult arcade visual system */
.arcadeBadge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 7px 12px;
  border: 1px solid #ffae3d66;
  border-radius: 99px;
  background: #ff7a1714;
  color: #ffc767;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 2px;
}
.gameSlogan {
  margin-top: 15px;
  color: #dce5ef;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
}
.gameSlogan b {
  color: #ffc34a;
}
.loadingPanel {
  display: grid;
  place-items: center;
  gap: 18px;
  min-height: 260px;
  background: #020202f8;
  border: 1px solid #ff9f355e;
  box-shadow:
    0 0 0 1px #ffffff0b inset,
    0 28px 90px #000,
    0 0 55px #ff641c1f;
}
.loadingPanel:before,
#message:before {
  content: "";
  position: absolute;
  top: 0;
  left: 14%;
  right: 14%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ffb330, transparent);
  box-shadow: 0 0 22px #ff7a20;
}
.loadingPanel p {
  margin: 0;
}
.loadingPanel > small {
  color: #8da0b7;
  font-size: 8px;
  letter-spacing: 2px;
}
.startLights {
  display: flex;
  gap: 16px;
  padding: 17px 22px;
  border: 1px solid #ffffff24;
  border-radius: 18px;
  background: #090b0d;
  box-shadow: 0 18px 55px #000;
}
.startLights i {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #290609;
  box-shadow: inset 0 0 14px #000;
  animation: startLight 1.35s infinite;
}
.startLights i:nth-child(2) {
  animation-delay: 0.3s;
}
.startLights i:nth-child(3) {
  animation-delay: 0.6s;
}
@keyframes startLight {
  0%,
  20% {
    background: #2a0608;
    box-shadow: inset 0 0 14px #000;
    transform: scale(0.88);
  }
  30%,
  70% {
    background: #ff3328;
    box-shadow: 0 0 28px #ff281fcc;
    transform: scale(1);
  }
  78%,
  100% {
    background: #38e86e;
    box-shadow: 0 0 32px #32e86dcc;
    transform: scale(1.06);
  }
}
.resultIcon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: -16px auto 8px;
  border: 2px solid #ffd45c;
  border-radius: 50%;
  background: radial-gradient(circle, #ffb632, #a52614);
  color: white;
  font-size: 28px;
  box-shadow: 0 0 32px #ff7b2759;
  animation: resultPulse 1.2s ease-in-out infinite alternate;
}
#message {
  border-color: #ff9f355e;
  box-shadow:
    0 0 0 1px #ffffff0b inset,
    0 28px 90px #000,
    0 0 60px #ff641c1c;
}
.resultBreakdown {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-width: 390px;
  margin: 16px auto 4px;
}
.resultBreakdown span {
  padding: 12px 8px;
  border: 1px solid #ff9c2d30;
  background: #050505;
  color: #8fa0b2;
  font-size: 8px;
  letter-spacing: 2px;
}
.resultBreakdown b {
  display: block;
  margin-top: 6px;
  color: #ffc348;
  font-size: 17px;
}
.pausePanel .resultIcon,
.pausePanel #scoreForm {
  display: none !important;
}
@keyframes resultPulse {
  to {
    transform: scale(1.08) rotate(5deg);
  }
}
.brand img {
  width: 78px;
  height: 44px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid #ffb52d;
  box-shadow: 0 0 24px #ff5a003f;
}
.brand b {
  font-family: Arial, sans-serif;
  font-weight: 950;
  font-style: italic;
}
.heroLogo {
  display: block;
  margin-inline: auto;
  align-self: center;
  width: min(330px, 72vw);
  aspect-ratio: 16/9;
  object-fit: contain;
  border-radius: 18px;
  border: 1px solid #ffb52d;
  box-shadow:
    0 0 0 7px #071323,
    0 0 45px #ff4d004d;
}
.panel {
  background: linear-gradient(155deg, #020202f8, #0b0b0bf2);
  border-color: #ff8a2f7d;
}
.panel h1 {
  font-family:
    Impact,
    Arial Black,
    sans-serif;
  font-style: italic;
  letter-spacing: -2px;
  line-height: 0.92;
}
.panel h1 em {
  color: #ff3b20;
  -webkit-text-stroke: 0;
  text-shadow: 0 0 24px #ff3b205c;
}
.primary {
  background: linear-gradient(135deg, #ffda45, #ff711c);
  box-shadow: 0 12px 38px #ff6c213f;
}
.secondary {
  border-color: #ff8f3d75;
  color: #ffc45b;
}
nav button {
  background: linear-gradient(180deg, #09192de6, #03080fe6);
  border-color: #ff9d4666;
  box-shadow: 0 8px 28px #000a;
}
nav button#jump {
  color: #ffb43b;
}
#hud div {
  background: linear-gradient(#061324e8, #020810d9);
  border-color: #ff9f3333;
}
@media (max-width: 700px), (pointer: coarse) {
  header {
    align-items: center;
  }
  .brand img {
    width: 72px;
    height: 40px;
    border-radius: 9px;
  }
  .brand span {
    display: none;
  }
  #sound,
  #musicToggle {
    height: 34px;
    padding: 0 10px;
    font-size: 8px;
    letter-spacing: 1px;
  }
  .panel {
    top: auto;
    bottom: 110px;
    transform: translateX(-50%);
    padding: 20px 17px 18px;
    width: calc(100% - 24px);
    max-height: calc(var(--app-height, 100dvh) - 150px);
    overflow: auto;
    border-radius: 22px;
    clip-path: none;
  }
  .heroLogo {
    width: min(260px, 78vw);
  }
  .ranking li {
    grid-template-columns: 28px minmax(0, 1fr) auto auto;
    gap: 6px;
    padding: 10px 6px;
  }
  .ranking li strong,
  .ranking li b { font-size: 10px; }
  .panel p {
    margin: 8px 0;
  }
  .panel h1 {
    font-size: 44px;
    margin: 8px 0 13px;
  }
  .panel .copy {
    font-size: 12px;
  }
  .prizePodium {
    gap: 7px;
    margin-top: 19px;
  }
  .prizePodium div {
    padding: 11px 5px;
  }
  .prizePodium i {
    width: 23px;
    height: 23px;
    margin-bottom: 7px;
    font-size: 9px;
  }
  .prizePodium span {
    font-size: 6px;
    letter-spacing: 0.5px;
  }
  .prizePodium b {
    font-size: 9px;
    line-height: 1.25;
  }
  .arcadeBadge {
    margin-bottom: 8px;
  }
  .resultIcon {
    width: 46px;
    height: 46px;
    font-size: 22px;
  }
  .panel .primary {
    margin: 15px auto 10px;
    padding: 14px 24px;
  }
  .panel .secondary {
    padding: 9px 15px;
  }
  .ranking {
    bottom: 88px;
  }
  #loading.loadingPanel,
  #message,
  #ranking.ranking,
  #activityPanel.activityPanel,
  #historyPanel.postPanel,
  #shoutPanel.postPanel {
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: calc(100% - 28px);
    max-height: calc(var(--app-height, 100dvh) - 34px);
    overflow: auto;
  }
  #loading.loadingPanel {
    min-height: min(330px, calc(var(--app-height, 100dvh) - 48px));
    border-radius: 26px;
  }
  #message {
    padding: 20px 16px 18px;
  }
  #message.confirmed .resultIcon {
    width: 40px;
    height: 40px;
    margin-bottom: 8px;
  }
  #message.confirmed #messageTitle {
    margin: 9px 0;
    font-size: clamp(28px, 8vw, 40px);
  }
  #message.confirmed .copy {
    font-size: 11px;
    line-height: 1.35;
  }
  .savedResultSummary { margin: 11px auto 7px; }
  .savedNextTarget { grid-template-columns: 1fr; gap: 4px; padding: 10px 11px; }
  .savedNextTarget small,
  .savedNextTarget b { white-space: normal; overflow-wrap: anywhere; }
  .savedNextTarget span { grid-column: 1; }
  .resultActions { margin-top: 8px; }
  .postPanel { padding: 22px 16px 18px; }
  .shoutPanel { padding-top: 18px !important; }
  .shoutPanel h2 { margin: 8px 0 11px; }
  .shoutChoices { max-height: min(34vh, 280px); }
  .touch-controls {
    display: flex;
  }
  nav {
    bottom: max(18px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: calc(100% - 20px);
    gap: 8px;
    pointer-events: none;
  }
  nav button {
    pointer-events: auto;
    width: 100%;
    height: clamp(96px, 15dvh, 126px);
    border-radius: 22px;
    font-size: 36px;
  }
  #hud {
    top: 64px;
  }
  .game-shell:after,
  #app:after {
    background: linear-gradient(
      180deg,
      #0007,
      transparent 24%,
      transparent 68%,
      #000b
    );
  }
}
@media (orientation: landscape) and (max-height: 540px) {
  header {
    padding: 8px 12px;
  }
  .brand img {
    width: 58px;
    height: 34px;
  }
  #sound,
  #musicToggle {
    height: 30px;
    padding: 0 10px;
  }
  #hud {
    top: 48px;
    left: 12px;
    transform: none;
    width: 220px;
  }
  #hud div {
    padding: 5px 4px;
  }
  #hud small {
    margin-bottom: 2px;
    font-size: 6px;
  }
  #hud b {
    font-size: 13px;
  }
  #actionHud {
    top: 48px;
    left: auto;
    right: 12px;
    transform: none;
  }
  .panel {
    top: 50%;
    bottom: auto;
    width: min(680px, calc(100% - 170px));
    max-height: calc(100% - 18px);
    padding: 14px 24px;
    transform: translate(-50%, -50%);
  }
  .heroLogo {
    width: min(190px, 32vw);
    max-height: 90px;
  }
  .arcadeBadge {
    margin-bottom: 4px;
    padding: 4px 9px;
  }
  .panel h1 {
    font-size: 34px;
    margin: 5px 0 8px;
  }
  .panel .copy {
    font-size: 10px;
  }
  .prizePodium {
    margin-top: 7px;
  }
  .prizePodium div {
    padding: 5px 4px;
  }
  .prizePodium i {
    display: inline-grid;
    width: 19px;
    height: 19px;
    margin: 0 4px 0 0;
  }
  .prizePodium span {
    display: inline;
  }
  .prizePodium b {
    margin-top: 2px;
  }
  .gameSlogan {
    margin-top: 7px;
    font-size: 9px;
  }
  .panel .primary {
    display: inline-block;
    margin: 9px 5px 5px;
    padding: 11px 18px;
  }
  .panel .secondary {
    padding: 9px 13px;
  }
  nav {
    left: auto;
    right: max(10px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    transform: none;
    width: auto;
    gap: 7px;
  }
  nav button,
  nav button#jump {
    width: 62px;
    height: 52px;
    border-radius: 15px;
  }
  #gameToast {
    top: 28%;
    font-size: 22px;
  }
  #superBanner {
    top: 16%;
  }
}
.mygoldBridgeCard{position:relative;isolation:isolate;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin:10px 0 3px;padding:15px;border:1px solid transparent;border-radius:16px;background:linear-gradient(135deg,rgba(56,39,3,.96),rgba(5,8,10,.98)) padding-box,linear-gradient(115deg,#9b6500,#ffe680,#d48b00,#fff0a1,#9b6500) border-box;background-size:100% 100%,260% 100%;box-shadow:0 12px 34px rgba(0,0,0,.42),0 0 18px rgba(255,190,0,.18);animation:mygoldBorderFlow 3.4s linear infinite,mygoldCardPulse 2.8s ease-in-out infinite}
.resultActions>.mygoldBridgeCard{grid-column:1/-1;width:100%}
.mygoldBridgeCard.hidden{display:none}.mygoldBridgeLogo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:78px}.mygoldBridgeLogo img{display:block;width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(255,190,0,.3))}.mygoldBridgeLogo strong{color:#fff;font:italic 1000 14px/1 Arial Black,Arial,sans-serif;letter-spacing:-.07em;white-space:nowrap}.mygoldBridgeLogo strong span{color:#ffc300;font:inherit}
.mygoldBridgeCopy{display:flex;min-width:0;flex-direction:column;gap:5px;text-align:left}.mygoldBridgeCard small{color:#ffc31d;font-size:9px;font-weight:900;letter-spacing:.18em}.mygoldBridgeCopy b{color:#fff;font-size:16px;font-style:italic;line-height:1.15;text-wrap:balance}.mygoldBridgeCopy>span{max-width:36ch;color:#b9b9b9;font-size:11px;line-height:1.42;text-wrap:balance}.mygoldBridgeCard a{grid-column:1/-1;padding:14px;border-radius:11px;color:#151008;background:linear-gradient(100deg,#ffd63e,#ffae00);font-size:12px;font-weight:1000;text-align:center;text-decoration:none}
.mygoldBridgeCard a[aria-busy="true"]{pointer-events:none;filter:saturate(.7);animation:mygoldLaunchPulse .7s ease-in-out infinite alternate}
@keyframes mygoldLaunchPulse{to{opacity:.68}}
@keyframes mygoldBorderFlow{to{background-position:0 0,260% 0}}
@keyframes mygoldCardPulse{50%{box-shadow:0 14px 38px rgba(0,0,0,.5),0 0 27px rgba(255,190,0,.36)}}
@media (prefers-reduced-motion:reduce){.mygoldBridgeCard{animation:none}}
.mygoldRankSeal{display:inline-grid;place-items:center;width:21px;height:21px;margin-left:7px;border:1px solid rgba(255,211,74,.72);border-radius:50%;background:#080808;box-shadow:0 0 0 2px rgba(255,192,0,.08),0 0 13px rgba(255,187,0,.25);vertical-align:-5px;overflow:hidden}
.mygoldRankSeal img{display:block;width:100%;height:100%;object-fit:contain}