*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  height: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.3;
  color: var(--c-white);
  background: var(--sky-1);
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  touch-action: manipulation;
}
button:disabled { cursor: default; }
ol, ul { list-style: none; }
svg { display: block; }
[hidden] { display: none !important; }

.icon { width: 1.3em; height: 1.3em; fill: currentColor; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--c-cyan); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    url("https://akm-img-a-in.tosshub.com/sites/games/ludo/assets/images/bg_mobile.webp") center / cover no-repeat,
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 40%, var(--sky-3) 74%, var(--sky-4) 100%);
}
@media (min-aspect-ratio: 1 / 1) {
  .sky {
    background:
      url("https://akm-img-a-in.tosshub.com/sites/games/ludo/assets/images/bg_desktop.webp") center / cover no-repeat,
      linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 40%, var(--sky-3) 74%, var(--sky-4) 100%);
  }
}
.sky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 75% 60% at 50% 48%, rgba(14, 8, 48, .35) 0%, rgba(10, 5, 38, .72) 100%),
    rgba(16, 9, 52, .38);
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
body[data-screen="game"] .sky::before { opacity: 1; }

.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(30, 20, 110, .28) 0%, rgba(40, 20, 120, .05) 35%, rgba(60, 20, 120, .12) 70%, rgba(70, 20, 110, .35) 100%);
}
.starfield { position: absolute; inset: 0; }
.twinkle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size, 3px);
  height: var(--size, 3px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, .8);
  opacity: .25;
  animation: twinkle var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
}
.twinkle--sparkle {
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

.app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--app-max);
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: max(14px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    visibility 0s linear var(--dur-med);
}
.screen.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out),
    visibility 0s;
}

.btn {
  --b-top: #a890ff;
  --b-mid: #6a45ec;
  --b-bot: #5130cf;
  --b-edge: #3b1e9e;
  --b-glow: rgba(106, 69, 236, .5);
  --b-text: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: var(--tap);
  padding: 0 1.5em;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--b-text);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .18);
  background: linear-gradient(180deg, var(--b-top) 0%, var(--b-mid) 55%, var(--b-bot) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .5),
    inset 0 -3px 0 rgba(0, 0, 0, .15),
    0 5px 0 var(--b-edge),
    0 10px 22px var(--b-glow);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast);
}
.btn::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 12%;
  right: 12%;
  height: 45%;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.btn > * { position: relative; }
@media (hover: hover) { .btn:not(:disabled):hover { filter: brightness(1.07); } }
.btn:not(:disabled):active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .5),
    inset 0 -3px 0 rgba(0, 0, 0, .15),
    0 1px 0 var(--b-edge),
    0 4px 10px var(--b-glow);
}
.btn:disabled {
  filter: saturate(.3) brightness(.85);
  opacity: .7;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 3px 0 var(--b-edge);
}
.btn--gold {
  --b-top: #fff4b4; --b-mid: #ffcf4d; --b-bot: #f7a42a; --b-edge: #c46f0a;
  --b-glow: rgba(255, 196, 70, .55); --b-text: #6b3500;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.btn--pink {
  --b-top: #ffb8e2; --b-mid: #ff6fc2; --b-bot: #e84aa6; --b-edge: #a8246f;
  --b-glow: rgba(255, 111, 194, .5);
}
.btn--cyan {
  --b-top: #b0f7ff; --b-mid: #4fd6f5; --b-bot: #2aa6e0; --b-edge: #16689e;
  --b-glow: rgba(79, 214, 245, .45); --b-text: #06345a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.btn--danger {
  --b-top: #ffb8c0; --b-mid: #ff6b7f; --b-bot: #e0455e; --b-edge: #9e1f36;
  --b-glow: rgba(255, 90, 120, .45);
}
.btn--wide { width: 100%; }
.btn--sm { min-height: 44px; padding: 0 1em; font-size: .92rem; }
.btn--xl {
  min-height: 78px;
  padding: 0 1.4em;
  border-radius: 32px;
  font-size: 2rem;
  letter-spacing: .12em;
}

.icon-btn {
  position: relative;
  width: var(--tap);
  height: var(--tap);
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .1) 55%),
    linear-gradient(180deg, rgba(165, 135, 255, .7), rgba(90, 60, 210, .7));
  border: 1.5px solid rgba(255, 255, 255, .6);
  box-shadow: inset 0 -3px 6px rgba(40, 10, 120, .3), 0 4px 12px rgba(20, 0, 80, .35);
  transition: transform var(--dur-fast) var(--ease-bounce), opacity var(--dur-fast);
}
.icon-btn:active { transform: scale(.9); }
.icon-btn.is-off {
  color: rgba(255, 255, 255, .6);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .35), rgba(255, 255, 255, .05) 55%),
    linear-gradient(180deg, rgba(130, 120, 170, .6), rgba(70, 60, 120, .6));
}

.art-btn {
  position: relative;
  flex: none;
  width: 54px;
  height: 50px;
  padding: 0;
  display: grid;
  place-items: center;
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.art-btn img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(20, 0, 70, .45));
}
.art-btn:active { transform: scale(.9); }
.art-btn--toggle .art-btn__off { visibility: hidden; }
.art-btn--toggle.is-off .art-btn__on { visibility: hidden; }
.art-btn--toggle.is-off .art-btn__off { visibility: visible; }

.glass-card {
  position: relative;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(150, 120, 255, .62), rgba(85, 55, 195, .55));
  border: 1.5px solid rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 30px rgba(28, 10, 90, .3);
}

.face {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  font-size: var(--face-size, 40px);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0 6%, var(--p-hi) 17%, var(--p) 56%, var(--p-lo) 100%);
  box-shadow:
    inset 0 -.08em .14em rgba(0, 0, 0, .25),
    0 0 0 .05em rgba(255, 255, 255, .85),
    0 .06em .16em rgba(20, 0, 70, .4);
}
.face::before {
  content: "";
  position: absolute;
  left: .3em;
  top: .4em;
  width: .1em;
  height: .14em;
  border-radius: 50%;
  background: var(--c-ink);
  box-shadow: .3em 0 0 var(--c-ink);
}
.face::after {
  content: "";
  position: absolute;
  left: .36em;
  top: .58em;
  width: .28em;
  height: .12em;
  border-bottom: .05em solid var(--c-ink);
  border-radius: 0 0 .2em .2em;
}
.face--sm { --face-size: 28px; }
.face--xs { --face-size: 22px; }

.orb {
  display: inline-block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 26%, #fff 0 8%, var(--p-hi) 18%, var(--p) 55%, var(--p-lo) 100%);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .28), 0 0 0 2px #fff, 0 3px 6px rgba(20, 0, 60, .45);
}

.logo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.logo__spark {
  width: 34px;
  height: 34px;
  fill: var(--c-gold);
  filter: drop-shadow(0 0 10px rgba(255, 214, 110, .9));
  animation: spark-spin 6s linear infinite;
}
.logo__title { display: flex; flex-direction: column; align-items: center; font-weight: 700; }
.logo__ludo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.8rem, 21vw, 5.4rem);
  line-height: .95;
  letter-spacing: .04em;
  background: linear-gradient(180deg, #fffbe6 0%, #ffe07a 38%, #ffb347 62%, #ff7fc8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 #7a36c9) drop-shadow(0 10px 18px rgba(80, 20, 160, .55));
}
.logo__sub {
  margin-top: .45em;
  padding: .32em 1em .32em 1.32em;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(.95rem, 4.8vw, 1.2rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  background: linear-gradient(90deg, rgba(98, 232, 255, .4), rgba(255, 124, 207, .4));
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, .25), 0 6px 16px rgba(40, 10, 120, .3);
}

.toast {
  position: absolute;
  left: 50%;
  top: 44%;
  z-index: 80;
  max-width: calc(100% - 32px);
  padding: 10px 24px;
  border-radius: var(--radius-pill);
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 5.6vw, 1.5rem);
  letter-spacing: .05em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  text-shadow: 0 2px 0 rgba(60, 20, 140, .5);
  background: linear-gradient(180deg, rgba(175, 145, 255, .97), rgba(110, 70, 230, .97));
  border: 2px solid rgba(255, 255, 255, .75);
  box-shadow: 0 10px 30px rgba(30, 5, 90, .5), 0 0 30px rgba(200, 160, 255, .6);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.5);
}
.toast.is-visible { animation: toast-in .38s var(--ease-bounce) forwards; }
.toast.is-leaving { animation: toast-out .24s ease-in forwards; }
.toast--good {
  color: #6b3500;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  background: linear-gradient(180deg, #fff4b4, #ffcf4d 60%, #f7a42a);
  box-shadow: 0 10px 30px rgba(120, 60, 0, .4), 0 0 34px rgba(255, 214, 110, .8);
}
.toast--bad { background: linear-gradient(180deg, #ffb8e2, #ff6fc2 60%, #e04aa0); }
.toast--warn {
  color: #06345a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  background: linear-gradient(180deg, #d4fbff, #7fe3f7 60%, #3cb8e8);
}

.rotate-hint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  background: linear-gradient(180deg, var(--sky-1), var(--sky-3));
}
.rotate-hint .icon { width: 56px; height: 56px; fill: var(--c-gold); animation: rotate-phone 2s ease-in-out infinite; }