:root {
  --purple-950: #090015;
  --purple-900: #120026;
  --purple-800: #250057;
  --purple-700: #4e0ca0;
  --purple-600: #7a22d1;
  --purple-500: #a43cff;
  --violet-glow: #bb4cff;
  --blue-glow: #3b5fff;
  --gold: #ffd95c;
  --gold-soft: #fff0a3;
  --ink: #ffffff;
  --muted: #beb2d5;
  --card: rgba(25, 8, 71, 0.88);
  --radius-xl: 28px;
  --shadow-purple: 0 0 16px rgba(171, 68, 255, .9), 0 0 46px rgba(87, 35, 201, .72);
}

* {
  box-sizing: border-box;
}

.hidden { display: none !important; }

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

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  overflow-x: hidden;
  background: #080012;
}

button,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.page-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 18%, rgba(116, 25, 215, .7), transparent 26%),
    radial-gradient(circle at 12% 55%, rgba(78, 14, 151, .5), transparent 34%),
    radial-gradient(circle at 88% 54%, rgba(28, 29, 145, .52), transparent 30%),
    linear-gradient(180deg, #0f0129 0%, #21004d 50%, #13002d 100%);
}

.space-bg,
.space-bg > * {
  position: absolute;
}

.space-bg {
  inset: 0;
  z-index: -5;
  pointer-events: none;
}

.nebula {
  filter: blur(12px);
  border-radius: 50%;
  opacity: .7;
}

.nebula-a {
  width: 70vw;
  height: 48vw;
  left: -22vw;
  top: 28vh;
  background: radial-gradient(circle, rgba(120, 32, 238, .55), transparent 70%);
  animation: drift 13s ease-in-out infinite alternate;
}

.nebula-b {
  width: 62vw;
  height: 42vw;
  right: -18vw;
  top: 3vh;
  background: radial-gradient(circle, rgba(54, 33, 185, .52), transparent 68%);
  animation: drift 16s ease-in-out infinite alternate-reverse;
}

.stars {
  inset: 0;
  background-repeat: repeat;
}

.stars-a {
  opacity: .8;
  background-image:
    radial-gradient(circle at 12px 18px, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 71px 54px, #ffd78b 0 1.3px, transparent 2px),
    radial-gradient(circle at 125px 22px, #a5a9ff 0 1px, transparent 1.8px),
    radial-gradient(circle at 185px 90px, #fff 0 .8px, transparent 1.5px);
  background-size: 220px 140px;
  animation: starMove 30s linear infinite;
}

.stars-b {
  opacity: .55;
  background-image:
    radial-gradient(circle at 30px 42px, #73d8ff 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 140px 74px, #f6a8ff 0 1px, transparent 1.8px),
    radial-gradient(circle at 210px 20px, #fff2a4 0 1.1px, transparent 1.9px);
  background-size: 260px 170px;
  animation: starMove 42s linear infinite reverse;
}

.shooting-star {
  width: 220px;
  height: 2px;
  top: 14%;
  left: -30%;
  transform: rotate(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  filter: drop-shadow(0 0 8px white);
  animation: shoot 9s linear infinite;
}

.coin {
  display: grid;
  place-items: center;
  width: clamp(34px, 4vw, 60px);
  aspect-ratio: 1;
  border-radius: 50%;
  color: #9d611c;
  font-size: clamp(15px, 1.8vw, 28px);
  font-weight: 900;
  background:
    radial-gradient(circle at 38% 33%, #fff6c2 0 10%, #f8c763 35%, #b36927 72%, #6e3515 100%);
  border: 3px solid rgba(255, 222, 136, .65);
  box-shadow: 0 0 14px rgba(255, 179, 72, .5);
  opacity: .8;
  animation: floatCoin 6s ease-in-out infinite;
}

.coin::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px solid rgba(110, 53, 21, .65);
}

.coin-1 { left: 5%; top: 25%; transform: rotate(-24deg); }
.coin-2 { right: 6%; top: 19%; animation-delay: -2s; }
.coin-3 { left: -1%; bottom: 12%; animation-delay: -4s; }
.coin-4 { right: -1%; bottom: 16%; animation-delay: -1s; }

.spark {
  color: #ffe9a0;
  font-size: clamp(28px, 5vw, 70px);
  text-shadow: 0 0 8px #fff, 0 0 24px #ffad4a;
  animation: twinkle 2.2s ease-in-out infinite;
}

.spark-1 { left: 14%; top: 13%; }
.spark-2 { right: 22%; top: 10%; animation-delay: -.7s; }
.spark-3 { left: 11%; bottom: 16%; animation-delay: -1.4s; }
.spark-4 { right: 10%; bottom: 24%; animation-delay: -.2s; }

.sound-toggle {
  position: fixed;
  z-index: 30;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #fff;
  background: rgba(7, 2, 29, .62);
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 14px rgba(0,0,0,.4);
  transition: transform .2s ease, background .2s ease;
}

.sound-toggle:hover {
  transform: scale(1.06);
  background: rgba(68, 16, 132, .75);
}

.sound-toggle svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.sound-toggle svg path:not(:first-child) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.sound-off {
  display: none;
}

.sound-toggle.muted .sound-on {
  display: none;
}

.sound-toggle.muted .sound-off {
  display: block;
}

.winner-toast {
  position: fixed;
  z-index: 25;
  top: clamp(16px, 6vh, 58px);
  left: 50%;
  transform: translateX(-50%);
  width: min(92vw, 480px);
  min-height: 42px;
  padding: 8px 18px 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--gold);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(63, 29, 93, .96), rgba(27, 11, 56, .96));
  box-shadow: 0 0 22px rgba(255, 215, 92, .22);
  font-size: clamp(11px, 1.25vw, 14px);
  animation: toastIn .8s cubic-bezier(.2, .8, .2, 1) both;
}

.toast-crown {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--gold);
  border: 1px solid rgba(255, 217, 92, .55);
  background: rgba(255, 217, 92, .08);
}

.winner-toast p {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
}

.winner-toast::after {
  content: "";
  flex: 0 0 28px;
  width: 28px;
}

.winner-toast b,
.winner-toast strong {
  color: var(--gold);
}

.winner-toast.refresh {
  animation: winnerRefresh .55s ease both;
}

@keyframes winnerRefresh {
  0% { opacity: 0; transform: translate(-50%, -9px) scale(.97); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.hero-stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 110px 20px 130px;
}

.magic-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(76vw, 780px);
  aspect-ratio: 1;
  transform: translate(-50%, -49%);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 35%, rgba(139, 44, 255, .09) 36% 48%, transparent 49%),
    conic-gradient(from 20deg, rgba(255,255,255,.07), rgba(121, 44, 246, .22), rgba(255, 220, 128, .08), rgba(255,255,255,.07));
  border: clamp(3px, .35vw, 5px) solid rgba(217, 162, 255, .65);
  box-shadow:
    inset 0 0 28px rgba(195, 100, 255, .44),
    0 0 36px rgba(149, 53, 255, .45),
    0 0 100px rgba(81, 22, 150, .5);
}

.magic-ring::before,
.magic-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.magic-ring::before {
  inset: 6%;
  border: 2px solid rgba(255, 220, 152, .42);
  box-shadow: inset 0 0 20px rgba(180, 89, 255, .4);
}

.magic-ring::after {
  inset: 14%;
  border: 1px dashed rgba(255, 255, 255, .35);
  animation: spin 26s linear infinite;
}

.ring-orbit {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.orbit-1 {
  inset: 3%;
  border: 1px solid rgba(245, 214, 255, .25);
  border-top-color: #fff2aa;
  animation: spin 18s linear infinite;
}

.orbit-2 {
  inset: 9%;
  border: 2px solid rgba(150, 62, 255, .32);
  border-left-color: rgba(255, 228, 157, .76);
  animation: spin 24s linear infinite reverse;
}

.orbit-3 {
  inset: 22%;
  border: 1px solid rgba(226, 177, 255, .24);
  box-shadow: 0 0 20px rgba(161, 65, 255, .28);
}

.center-glow {
  inset: 24%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(175, 62, 255, .35), rgba(63, 17, 132, .12) 55%, transparent 72%);
  filter: blur(3px);
}

.menu-orb,
.medal-orb {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.menu-orb {
  width: clamp(104px, 13vw, 150px);
  aspect-ratio: 1;
  padding: 0;
  color: #fff3b0;
  cursor: pointer;
  background:
    radial-gradient(circle at 48% 36%, rgba(123, 39, 219, .93), rgba(31, 7, 76, .98) 72%);
  border: clamp(3px, .35vw, 5px) solid rgba(244, 197, 255, .72);
  box-shadow:
    inset 0 0 22px rgba(215, 113, 255, .42),
    0 0 0 8px rgba(57, 13, 123, .66),
    0 0 0 10px rgba(255, 214, 128, .35),
    0 0 28px rgba(175, 75, 255, .62);
  transition: transform .25s ease, filter .25s ease;
}

.menu-orb:hover {
  transform: scale(1.06);
  filter: brightness(1.2);
}

.menu-orb::after {
  content: attr(data-label);
  position: absolute;
  bottom: -34px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  opacity: 0;
  padding: 5px 9px;
  border-radius: 999px;
  color: #fff;
  background: rgba(7, 0, 23, .75);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.menu-orb:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.orb-top-left { left: 11%; top: 7%; }
.orb-top-right { right: 11%; top: 7%; }
.orb-left { left: -1%; top: 39%; }
.orb-right { right: -1%; top: 39%; }
.orb-bottom-left { left: 13%; bottom: 8%; }
.orb-bottom-right { right: 13%; bottom: 8%; }

.orb-icon svg {
  width: clamp(42px, 5.5vw, 66px);
  height: clamp(42px, 5.5vw, 66px);
  fill: url(#goldGradient);
  color: #ffe9ab;
  filter: drop-shadow(0 0 10px rgba(255, 223, 135, .5));
}

.orb-icon svg path {
  fill: currentColor;
}

.orb-symbol {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(52px, 7vw, 82px);
  font-weight: 800;
  line-height: 1;
  color: transparent;
  background: linear-gradient(#fff3c3, #efb25c);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 7px rgba(255, 217, 92, .25));
}

.orb-symbol.small {
  font-size: clamp(40px, 5vw, 62px);
  color: initial;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}

.orb-word {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(16px, 2vw, 24px);
  font-weight: 800;
  transform: rotate(-3deg);
  text-shadow: 0 2px 0 #6d3d2a, 0 0 12px rgba(255, 217, 92, .35);
}

.ticket-icon {
  display: grid;
  place-items: center;
  width: 62%;
  height: 42%;
  color: #693c78;
  font-size: clamp(22px, 3vw, 36px);
  background: linear-gradient(145deg, #ffe9a6, #d99c4b);
  border: 5px solid #9e5c35;
  outline: 2px dashed rgba(255,255,255,.45);
  outline-offset: -10px;
  transform: rotate(8deg);
  filter: drop-shadow(0 0 8px rgba(255, 203, 114, .35));
}

.medal-orb {
  left: 50%;
  bottom: -5%;
  width: clamp(100px, 13vw, 150px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  color: #af6932;
  font-size: clamp(44px, 5.8vw, 68px);
  background: radial-gradient(circle at 44% 32%, #fff1c1, #e8aa53 55%, #6b2d4f 58%, #31104b 78%);
  border: 4px solid rgba(239, 192, 255, .72);
  box-shadow: 0 0 0 8px rgba(66, 20, 123, .62), 0 0 26px rgba(161, 67, 255, .65);
}

.medal-orb::before,
.medal-orb::after {
  content: "";
  position: absolute;
  top: 54%;
  width: 72px;
  height: 92px;
  border: 4px solid rgba(255, 232, 161, .78);
  border-top: 0;
  border-right: 0;
  border-radius: 0 0 0 60px;
  opacity: .8;
}

.medal-orb::before {
  right: 86%;
  transform: rotate(13deg);
}

.medal-orb::after {
  left: 86%;
  transform: scaleX(-1) rotate(13deg);
}

.login-card {
  position: relative;
  z-index: 10;
  width: min(92vw, 390px);
  padding: 42px 38px 38px;
  border: 2px solid rgba(244, 215, 255, .7);
  border-radius: 22px 22px 28px 28px;
  background:
    linear-gradient(180deg, rgba(52, 16, 115, .92), rgba(24, 8, 67, .96)),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(199, 145, 255, .09) 29px 30px),
    repeating-linear-gradient(90deg, transparent 0 28px, rgba(199, 145, 255, .09) 29px 30px);
  background-blend-mode: normal, screen, screen;
  box-shadow:
    inset 0 0 24px rgba(140, 66, 255, .35),
    0 0 0 3px rgba(81, 28, 160, .48),
    0 14px 40px rgba(3, 0, 20, .6),
    0 0 38px rgba(169, 71, 255, .5);
  overflow: hidden;
}

.login-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,.12), transparent 17%),
    radial-gradient(circle at 85% 18%, rgba(125, 79, 255, .28), transparent 27%);
  pointer-events: none;
}

.brand {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.brand h1 {
  margin: 0;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(25px, 3.5vw, 36px);
  line-height: .95;
  letter-spacing: -1.5px;
  color: transparent;
  background: linear-gradient(180deg, #fff8cf 0%, #ffcb55 44%, #b76d19 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(89, 41, 16, .7);
  filter: drop-shadow(0 2px 0 #54245e) drop-shadow(0 0 8px rgba(255, 211, 88, .22));
}

.brand-subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  color: #fff4c9;
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-align: center;
}

.brand-subtitle span {
  width: 24px;
  height: 1px;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(255, 217, 92, .8);
}

.brand-plane {
  display: grid;
  place-items: center;
  width: 34px;
  aspect-ratio: 1;
  margin-right: -11px;
  z-index: 2;
  border-radius: 50%;
  background: linear-gradient(145deg, #39a9ff, #043d9b);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 3px #37204f;
}

.brand-plane svg {
  width: 23px;
  fill: #fff4b4;
  transform: rotate(-9deg);
}

.brand-ticket {
  align-self: flex-end;
  margin-left: -8px;
  padding: 5px 7px;
  color: #4e185a;
  font-family: "Orbitron", sans-serif;
  font-size: 8px;
  line-height: 1.05;
  text-align: center;
  background: linear-gradient(#ffe9a3, #d99a3f);
  border: 2px solid #7a3854;
  transform: rotate(8deg);
}
.participant-brand{display:flex!important;justify-content:center!important;width:100%;margin-inline:auto!important}.participant-brand img{display:block;width:min(280px,88%);height:auto;margin:auto;object-fit:contain;filter:drop-shadow(0 4px 9px rgba(20,0,40,.45))}
@media(max-width:600px){.participant-brand img{width:min(245px,86%)}}

.login-caption {
  position: relative;
  z-index: 1;
  margin: 0 0 22px;
  color: #f4dc9e;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

.field {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 58px;
  margin-top: 14px;
  border: 1.5px solid rgba(221, 160, 255, .92);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(165, 72, 232, .42), rgba(74, 25, 143, .52));
  box-shadow:
    inset 0 0 16px rgba(214, 132, 255, .22),
    0 0 12px rgba(168, 66, 255, .35);
  overflow: hidden;
}

.field:focus-within {
  border-color: #fff1a5;
  box-shadow:
    inset 0 0 16px rgba(214, 132, 255, .22),
    0 0 0 3px rgba(255, 224, 107, .12),
    0 0 17px rgba(255, 224, 107, .25);
}

.field-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 44px;
  margin-left: 8px;
  border-radius: 11px;
  color: #c76fff;
  background: rgba(76, 20, 142, .42);
  box-shadow: inset 0 0 13px rgba(204, 104, 255, .35), 0 0 9px rgba(146, 64, 255, .3);
}

.field-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0 17px;
  color: #fff;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
}

.field input::placeholder {
  color: rgba(211, 198, 226, .52);
}

.form-message {
  position: relative;
  z-index: 1;
  min-height: 17px;
  margin: 8px 4px -2px;
  color: #ffcfde;
  font-size: 12px;
  text-align: center;
}

.form-message.success {
  color: #baffcd;
}

.action-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 10px;
  margin-top: 6px;
}

.primary-btn,
.info-btn,
.modal-ok {
  min-height: 43px;
  border: 1px solid rgba(226, 195, 255, .72);
  border-radius: 10px;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(130, 57, 255, .45);
  transition: transform .2s ease, filter .2s ease;
}

.primary-btn:hover,
.info-btn:hover,
.modal-ok:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
}

.primary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(180deg, #d05bff, #7213cf 75%, #5c08b0);
}

.info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(180deg, #6358da, #2728a7 76%, #1e187f);
}

.btn-arrow,
.btn-info {
  display: grid;
  place-items: center;
  width: 25px;
  aspect-ratio: 1;
  margin-left: -10px;
  border-radius: 50%;
  color: #ebe3ff;
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 8px rgba(255,255,255,.15);
}

.btn-info {
  border: 1px solid rgba(190, 214, 255, .55);
  font-size: 13px;
}

.platform {
  position: absolute;
  left: 50%;
  bottom: -80px;
  width: min(1120px, 120vw);
  height: 210px;
  transform: translateX(-50%);
  perspective: 600px;
  pointer-events: none;
}

.platform-ring {
  position: absolute;
  left: 50%;
  bottom: 0;
  border-radius: 50%;
  transform: translateX(-50%) rotateX(68deg);
}

.p1 {
  width: 100%;
  height: 175px;
  border: 3px solid rgba(218, 159, 255, .8);
  box-shadow: 0 0 30px rgba(172, 76, 255, .78), inset 0 0 34px rgba(92, 25, 183, .8);
}

.p2 {
  width: 82%;
  height: 142px;
  bottom: 14px;
  border: 2px solid rgba(255, 217, 127, .55);
  box-shadow: 0 0 22px rgba(255, 197, 97, .28);
}

.p3 {
  width: 61%;
  height: 102px;
  bottom: 28px;
  border: 3px solid rgba(197, 89, 255, .75);
}

.platform-core {
  position: absolute;
  left: 50%;
  bottom: 72px;
  width: 12px;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px #fff, 0 0 24px #ffc764, 0 0 48px #ae4dff;
}

.mini-popup {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 18px);
  max-width: min(90vw, 360px);
  padding: 11px 16px;
  border: 1px solid rgba(255, 223, 147, .65);
  border-radius: 12px;
  color: #fff6d0;
  background: rgba(24, 5, 58, .92);
  box-shadow: 0 0 18px rgba(164, 60, 255, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  text-align: center;
  font-size: 13px;
}

.mini-popup.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.info-modal {
  width: min(90vw, 420px);
  padding: 34px 30px 28px;
  color: #fff;
  border: 1px solid rgba(233, 199, 255, .76);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 0, rgba(134, 49, 255, .45), transparent 42%),
    linear-gradient(180deg, rgba(47, 16, 104, .98), rgba(17, 5, 49, .99));
  box-shadow: 0 0 46px rgba(168, 70, 255, .55);
  text-align: center;
}

.info-modal::backdrop {
  background: rgba(5, 0, 17, .7);
  backdrop-filter: blur(6px);
}

.info-modal h2 {
  margin: 8px 0 12px;
  color: #ffe48b;
}

.info-modal p {
  margin: 0 0 22px;
  color: #d9cee9;
  line-height: 1.6;
}

.modal-icon {
  display: grid;
  place-items: center;
  width: 52px;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  color: #fff4bd;
  font-family: Georgia, serif;
  font-size: 30px;
  border: 2px solid #ffe27b;
  box-shadow: 0 0 18px rgba(255, 226, 123, .25);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.08);
  font-size: 24px;
  cursor: pointer;
}

.modal-ok {
  width: 100%;
  background: linear-gradient(180deg, #a845f5, #5b10b7);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes drift {
  to { transform: translate3d(5vw, -2vh, 0) scale(1.08); }
}

@keyframes starMove {
  to { background-position: 220px 140px; }
}

@keyframes shoot {
  0%, 74% { transform: translateX(0) rotate(-18deg); opacity: 0; }
  76% { opacity: 1; }
  100% { transform: translateX(160vw) rotate(-18deg); opacity: 0; }
}

@keyframes floatCoin {
  0%, 100% { translate: 0 0; rotate: -7deg; }
  50% { translate: 0 -18px; rotate: 7deg; }
}

@keyframes twinkle {
  0%, 100% { opacity: .35; transform: scale(.72) rotate(0); }
  50% { opacity: 1; transform: scale(1.15) rotate(18deg); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -18px) scale(.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

@media (max-width: 780px) {
  .hero-stage {
    padding-top: 110px;
    padding-bottom: 120px;
  }

  .magic-ring {
    width: min(102vw, 690px);
  }

  .menu-orb {
    width: clamp(74px, 19vw, 105px);
  }

  .orb-top-left { left: 9%; top: 6%; }
  .orb-top-right { right: 9%; top: 6%; }
  .orb-left { left: -2%; }
  .orb-right { right: -2%; }
  .orb-bottom-left { left: 11%; bottom: 9%; }
  .orb-bottom-right { right: 11%; bottom: 9%; }

  .medal-orb {
    width: clamp(76px, 19vw, 108px);
  }

  .medal-orb::before,
  .medal-orb::after {
    width: 44px;
    height: 60px;
    border-width: 3px;
  }

  .login-card {
    width: min(86vw, 370px);
    padding: 34px 24px 30px;
  }

  .brand h1 {
    font-size: 26px;
  }

  .field {
    min-height: 54px;
  }

  .winner-toast {
    top: 62px;
  }
}

@media (max-width: 480px) {
  html,
  body {
    min-height: 100%;
    background: linear-gradient(180deg, #0f0129, #21004d 68%, #13002d);
  }

  .page-shell {
    min-height: max(760px, 100svh);
    min-height: max(760px, 100dvh);
  }

  .hero-stage {
    min-height: max(760px, 100svh);
    min-height: max(760px, 100dvh);
    padding-inline: 10px;
  }

  .magic-ring {
    top: 51%;
    width: 690px;
  }

  .menu-orb {
    width: 86px;
  }

  .orb-left { left: 18%; top: 34%; }
  .orb-right { right: 18%; top: 34%; }
  .orb-top-left { left: 25%; top: 6%; }
  .orb-top-right { right: 25%; top: 6%; }
  .orb-bottom-left { left: 24%; bottom: 8%; }
  .orb-bottom-right { right: 24%; bottom: 8%; }

  .login-card {
    width: min(92vw, 360px);
    margin-top: 10px;
  }

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

  .primary-btn,
  .info-btn {
    min-height: 46px;
  }

  .medal-orb {
    bottom: -3%;
  }

  .winner-toast {
    width: min(calc(100vw - 24px), 360px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding: 6px 8px;
    gap: 7px;
    min-height: 39px;
    font-size: clamp(8px, 2.35vw, 10px);
  }

  .winner-toast p {
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.3;
    text-align: center;
  }

  .winner-toast::after {
    content: "";
    flex: 0 0 24px;
    width: 24px;
  }

  .toast-crown {
    width: 24px;
    height: 24px;
  }

  .winner-toast.refresh {
    animation-name: winnerRefreshMobile;
  }

  @keyframes winnerRefreshMobile {
    from { opacity: 0; transform: translate(-50%, -9px) scale(.98); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
  }

  @keyframes toastIn {
    from { opacity: 0; transform: translate(-50%, -18px) scale(.96); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
  }
}

@media (max-width: 380px) {
  .winner-toast {
    width: calc(100vw - 18px);
    left: 50%;
    right: auto;
    font-size: 8px;
  }

  .login-card {
    width: calc(100vw - 26px);
    padding-inline: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Main website background */
.page-shell {
  background-image:
    linear-gradient(180deg, rgba(9, 0, 24, .18), rgba(9, 0, 24, .56)),
    radial-gradient(circle at 50% 42%, transparent 8%, rgba(15, 0, 38, .3) 75%),
    url("assets/backgroundweb-mahjongwayspuzzle.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (max-width: 780px) {
  .page-shell {
    background-attachment: scroll;
    background-position: center top;
  }
}