.screen--splash { align-items: center; justify-content: center; }
.splash__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  animation: float-soft 4s ease-in-out infinite;
}
.splash__gems { display: flex; gap: 14px; }
.gem-pawn {
  height: 38px;
  width: auto;
  filter: drop-shadow(0 4px 6px rgba(30, 5, 90, .45));
  animation: gem-hop 1.2s ease-in-out infinite;
}
.gem-pawn:nth-child(2) { animation-delay: .15s; }
.gem-pawn:nth-child(3) { animation-delay: .3s; }
.gem-pawn:nth-child(4) { animation-delay: .45s; }
.loader {
  width: 180px;
  height: 12px;
  padding: 2px;
  border-radius: var(--radius-pill);
  background: rgba(20, 0, 70, .35);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .35);
  overflow: hidden;
}
.loader__fill {
  height: 100%;
  border-radius: inherit;
  transform-origin: left center;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-lavender), var(--c-pink), var(--c-gold));
  animation: loader-fill 2s var(--ease-out) forwards;
}
.splash__text {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .9;
  animation: pulse-opacity 1.4s ease-in-out infinite;
}

.screen--home { gap: 14px; }
.topbar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.topbar__actions { display: flex; gap: 10px; }
.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 5px 16px 5px 5px;
  border-radius: var(--radius-pill);
}
.avatar { position: relative; flex: none; }
.avatar .face { --face-size: 44px; }
.avatar__crown {
  position: absolute;
  left: 50%;
  top: -11px;
  width: 22px;
  height: 16px;
  transform: translateX(-50%) rotate(-8deg);
  fill: var(--c-gold);
  filter: drop-shadow(0 1px 1px rgba(120, 60, 0, .5));
}
.avatar__badge {
  position: absolute;
  right: -5px;
  bottom: -3px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: .72rem;
  font-weight: 700;
  color: #6b3500;
  background: linear-gradient(180deg, #fff4b4, #ffc53d);
  box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0, 0, 0, .3);
}
.profile__info { display: flex; flex-direction: column; min-width: 0; }
.profile__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.profile__level { font-size: .78rem; font-weight: 700; opacity: .85; letter-spacing: .05em; }

.home-hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
}
.hero-orb { position: absolute; animation: float-soft 3.6s ease-in-out infinite; }
.hero-orb img { display: block; height: 58px; width: auto; filter: drop-shadow(0 8px 10px rgba(30, 5, 90, .45)); }
.hero-orb--1 { top: 12%; left: 6%; }
.hero-orb--2 { top: 6%; right: 10%; animation-delay: -1s; }
.hero-orb--3 { bottom: 12%; left: 14%; animation-delay: -2s; }
.hero-orb--4 { bottom: 8%; right: 6%; animation-delay: -.5s; }
.hero-orb--2 img, .hero-orb--3 img { height: 44px; }
.hero-orb--1 img { transform: rotate(-10deg); }
.hero-orb--4 img { transform: rotate(8deg); }

.progress-card { flex: none; padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.progress-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .04em;
}
.progress-card__stars { display: flex; align-items: center; gap: 4px; color: var(--c-gold); }
.progress-card__stars .icon { width: 18px; height: 18px; filter: drop-shadow(0 0 4px rgba(255, 214, 110, .8)); }
.progress-bar {
  height: 12px;
  border-radius: var(--radius-pill);
  background: rgba(20, 0, 70, .35);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3);
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--c-cyan), var(--c-lavender), var(--c-pink));
  box-shadow: 0 0 10px rgba(98, 232, 255, .7);
  transition: transform .8s var(--ease-out);
}

.btn-play {
  flex: none;
  align-self: center;
  width: min(100%, 300px);
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}
.btn-play::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 40px;
  border: 2px solid rgba(255, 230, 140, .7);
  box-shadow: 0 0 24px rgba(255, 214, 110, .6);
  pointer-events: none;
  animation: halo 2s ease-out infinite;
}
.btn-play__label { display: flex; align-items: center; gap: .3em; }
.btn-play__label .icon { width: .9em; height: .9em; }
.btn-play small { font-size: .72rem; letter-spacing: .24em; opacity: .85; }

.home-menu { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.menu-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 88px;
  padding: 10px 4px;
  border-radius: 22px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .86rem;
  letter-spacing: .03em;
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.menu-tile:active { transform: scale(.94); }
.menu-tile__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 6px rgba(0, 0, 0, .18), 0 5px 12px rgba(20, 0, 80, .35);
}
.menu-tile__icon .icon { width: 24px; height: 24px; }
.tile--violet { background: linear-gradient(180deg, #b9a2ff, #6a45ec); }
.tile--cyan { background: linear-gradient(180deg, #a9f6ff, #2aa6e0); color: #063456; }
.tile--pink { background: linear-gradient(180deg, #ffb8e2, #e84aa6); }

.home-logo {
  display: block;
  width: min(100%, 410px);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(30, 5, 90, .55));
  animation: float-soft 4.5s ease-in-out infinite;
  pointer-events: none;
}
.home-logo--splash { width: min(88vw, 400px); }
.screen--home .home-hero {
  flex: 1 1 0;
  min-height: 90px;
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.screen--home .home-hero .home-logo { height: 100%; min-height: 0; min-width: 0; }

.screen--home .profile {
  padding: 4px 18px 4px 4px;
  gap: 12px;
  background: linear-gradient(180deg, #9a7bff 0%, #7248ea 55%, #5c33d2 100%);
  border: 3px solid #f7c948;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -3px 6px rgba(40, 10, 120, .35), 0 6px 14px rgba(20, 0, 70, .4);
}
.screen--home .avatar .face { --face-size: 50px; box-shadow: inset 0 -.08em .14em rgba(0, 0, 0, .25), 0 0 0 3px #f7c948, 0 .06em .16em rgba(20, 0, 70, .4); }
.screen--home .avatar__badge {
  min-width: 24px;
  height: 24px;
  font-size: .8rem;
  background: radial-gradient(circle at 35% 30%, #fff6b0, #ffc93a 55%, #e89a0c);
  box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0, 0, 0, .35);
}
.screen--home .profile__name { font-size: 1.15rem; text-shadow: 0 2px 0 rgba(40, 10, 110, .6); }
.screen--home .profile__level { color: #ffe38a; opacity: 1; }

.icon-btn--gold {
  width: 54px;
  height: 54px;
  background: radial-gradient(circle at 35% 25%, #b7a0ff 0%, #7a52ec 45%, #4b27c4 100%);
  border: 3.5px solid #f7c948;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 -4px 8px rgba(30, 5, 100, .45), 0 5px 12px rgba(20, 0, 70, .45);
}
.icon-btn--gold .icon { width: 26px; height: 26px; }
.icon-btn--gold.is-off {
  background: radial-gradient(circle at 35% 25%, #a8a0c8 0%, #6a6090 50%, #463c70 100%);
  border-color: #c9a748;
}

.screen--home .progress-card {
  position: relative;
  padding: 16px 18px;
  gap: 12px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(150, 120, 255, .78) 0%, rgba(100, 70, 220, .74) 100%);
  border: 3px solid #f5c542;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -8px 18px rgba(40, 10, 140, .35), 0 10px 24px rgba(20, 0, 70, .4);
}
.home-bar {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(40, 20, 120, .7), rgba(80, 50, 180, .6));
  border: 2px solid rgba(170, 150, 255, .7);
  box-shadow: inset 0 3px 6px rgba(10, 0, 50, .45);
}
.home-bar__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(.02);
  background: linear-gradient(180deg, #a6f6ff 0%, #3fd3f5 55%, #1aa4dc 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 0 12px rgba(80, 220, 255, .6);
  transition: transform .8s var(--ease-out);
}
.home-bar--stars .home-bar__fill {
  background: linear-gradient(180deg, #fff3a8 0%, #ffcf3d 55%, #f0a01a 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 0 12px rgba(255, 210, 80, .6);
}
.home-bar__label, .home-bar__value {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .03em;
  color: #fff;
  -webkit-text-stroke: 3px #2a1878;
  paint-order: stroke fill;
  white-space: nowrap;
}
.home-bar__value .icon { width: 16px; height: 16px; fill: #ffd84a; stroke: #7a4a00; stroke-width: 1.2px; }

.deco-star {
  position: absolute;
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 2px 3px rgba(80, 40, 0, .45));
  pointer-events: none;
  z-index: 1;
}
.deco-star--tl { left: -13px; top: 22%; }
.deco-star--bl { left: -10px; bottom: -13px; }
.deco-star--tr { right: -13px; top: 44%; }
.deco-star--br { right: -10px; bottom: -13px; }

.screen--home .btn-play {
  border: 3px solid #e3940f;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .6),
    inset 0 -5px 0 rgba(170, 80, 0, .25),
    0 6px 0 #b8630a,
    0 14px 28px rgba(255, 180, 50, .45);
}

.screen--home .menu-tile {
  position: relative;
  gap: 8px;
  min-height: 96px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(140, 110, 255, .8) 0%, rgba(90, 60, 210, .78) 100%);
  border: 3px solid #f5c542;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), inset 0 -8px 16px rgba(40, 10, 140, .35), 0 8px 18px rgba(20, 0, 70, .4);
  text-shadow: 0 2px 0 rgba(40, 10, 110, .6);
}
.screen--home .menu-tile__icon {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), inset 0 -5px 8px rgba(0, 0, 0, .2), 0 5px 10px rgba(20, 0, 80, .4);
}
.screen--home .menu-tile__icon .icon { width: 28px; height: 28px; }
.screen--home .tile--violet { background: linear-gradient(180deg, #c3a4ff 0%, #8a4dff 55%, #6a2fe0 100%); color: #fff; }
.screen--home .tile--cyan { background: linear-gradient(180deg, #b6f7ff 0%, #45d2f6 55%, #1a9ee0 100%); color: #0b3a7a; }
.screen--home .tile--pink { background: linear-gradient(180deg, #ffc0e6 0%, #ff6fc2 55%, #e2409c 100%); color: #fff; }

.screen-header { flex: none; display: flex; align-items: center; gap: 12px; }
.screen-title {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(80, 30, 170, .6), 0 0 18px rgba(255, 255, 255, .35);
}
.star-count {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: var(--tap);
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-gold);
}
.star-count .icon { width: 18px; height: 18px; }

.level-map {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 8px -16px 0;
  padding: 24px 16px 48px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(transparent, #000 24px, #000 calc(100% - 32px), transparent);
}
.level-map::-webkit-scrollbar { display: none; }
.level-row {
  display: flex;
  justify-content: center;
  padding: 8px 0;
  transform: translateX(calc(var(--o, 0) * min(1vw, 4.2px)));
}
.level-row + .level-row::before {
  content: "";
  position: absolute;
  margin-top: -18px;
  width: 6px;
  height: 14px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .25);
}
.level-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 6px;
  border-radius: 24px;
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.level-node:active { transform: scale(.94); }
.level-node__orb {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: #fff;
  text-shadow: 0 2px 0 rgba(60, 20, 140, .5);
  background: radial-gradient(circle at 35% 25%, #fff 0 6%, #d8caff 18%, #8c6bff 56%, #5a36d6 100%);
  box-shadow:
    inset 0 -6px 10px rgba(40, 10, 120, .35),
    inset 0 3px 0 rgba(255, 255, 255, .6),
    0 0 0 4px rgba(255, 255, 255, .35),
    0 8px 18px rgba(30, 5, 90, .45),
    0 0 24px rgba(180, 150, 255, .6);
}
.level-node.is-completed .level-node__orb {
  background: radial-gradient(circle at 35% 25%, #fff 0 6%, #c9f8ff 18%, #53c9f0 56%, #3b6fd8 100%);
  box-shadow:
    inset 0 -6px 10px rgba(10, 40, 120, .35),
    inset 0 3px 0 rgba(255, 255, 255, .6),
    0 0 0 4px rgba(255, 255, 255, .4),
    0 8px 18px rgba(30, 5, 90, .45),
    0 0 24px rgba(98, 232, 255, .6);
}
.level-node.is-current .level-node__orb {
  color: #6b3500;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
  background: radial-gradient(circle at 35% 25%, #fff 0 6%, #fff4b4 18%, #ffcf4d 56%, #f09a1a 100%);
  box-shadow:
    inset 0 -6px 10px rgba(140, 70, 0, .3),
    inset 0 3px 0 rgba(255, 255, 255, .7),
    0 0 0 4px rgba(255, 255, 255, .55),
    0 8px 18px rgba(30, 5, 90, .45),
    0 0 30px rgba(255, 214, 110, .8);
}
.level-node.is-current .level-node__orb::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 230, 140, .85);
  animation: halo 1.8s ease-out infinite;
}
.level-node.is-locked .level-node__orb {
  color: rgba(255, 255, 255, .3);
  text-shadow: none;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .45) 0 6%, rgba(200, 190, 235, .45) 18%, rgba(110, 100, 165, .6) 60%, rgba(70, 58, 125, .7) 100%);
  box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .25), 0 0 0 3px rgba(255, 255, 255, .15), 0 6px 12px rgba(20, 5, 60, .35);
}
.level-node__lock {
  position: absolute;
  width: 30px;
  height: 30px;
  fill: rgba(255, 255, 255, .9);
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3));
}
.level-node__check {
  position: absolute;
  right: -2px;
  top: -2px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(180deg, #86ffc9, #1fbf7f);
  box-shadow: 0 0 0 2px #fff, 0 3px 6px rgba(0, 0, 0, .3);
}
.level-node__check .icon { width: 15px; height: 15px; }
.level-node__stars { display: flex; gap: 2px; }
.mini-star { width: 18px; height: 18px; fill: rgba(40, 20, 100, .55); stroke: rgba(255, 255, 255, .55); stroke-width: 1.2px; }
.mini-star.is-on { fill: var(--c-gold); filter: drop-shadow(0 0 4px rgba(255, 214, 110, .85)); }
.level-node__name {
  max-width: 170px;
  margin-top: 2px;
  padding: 4px 12px 5px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .03em;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  text-shadow: 0 1px 0 rgba(30, 10, 80, .9), 0 0 6px rgba(30, 10, 80, .6);
  background: linear-gradient(180deg, rgba(88, 60, 200, .92) 0%, rgba(52, 30, 150, .92) 100%);
  border: 1.5px solid rgba(255, 255, 255, .55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px rgba(20, 0, 70, .45);
}
.level-node.is-completed .level-node__name {
  background: linear-gradient(180deg, rgba(40, 120, 220, .94) 0%, rgba(28, 70, 170, .94) 100%);
}
.level-node.is-current .level-node__name {
  color: #fff6c8;
  border-color: #ffd66e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 0 12px rgba(255, 214, 110, .6), 0 4px 10px rgba(20, 0, 70, .45);
}
.level-node.is-locked .level-node__name {
  color: rgba(255, 255, 255, .8);
  background: linear-gradient(180deg, rgba(70, 60, 110, .88) 0%, rgba(45, 38, 80, .88) 100%);
  border-color: rgba(255, 255, 255, .3);
}
.level-node__tag {
  position: absolute;
  top: -8px;
  left: 50%;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #fff;
  background: linear-gradient(180deg, #ffb8e2, #e84aa6);
  box-shadow: 0 0 0 2px #fff, 0 3px 6px rgba(0, 0, 0, .3);
  transform: translateX(-50%);
  animation: tag-bob 1.4s ease-in-out infinite;
  z-index: 1;
}
.level-node.is-denied { animation: shake .36s; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 18px 20px;
  background: rgba(28, 12, 80, .45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
}
.modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-med) var(--ease-out), visibility 0s;
}
.modal__panel {
  position: relative;
  width: 100%;
  max-width: 340px;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 38px 20px 22px;
  border-radius: 30px;
  background: linear-gradient(165deg, rgba(160, 130, 255, .92) 0%, rgba(105, 72, 225, .92) 58%, rgba(196, 88, 200, .9) 100%);
  border: 1.5px solid rgba(255, 255, 255, .6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -10px 30px rgba(80, 40, 200, .3),
    0 20px 50px rgba(20, 5, 70, .55),
    0 0 40px rgba(200, 160, 255, .4);
  transform: translateY(20px) scale(.92);
  transition: transform var(--dur-med) var(--ease-bounce);
}
.modal__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(170deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}
.modal.is-open .modal__panel { transform: none; }
.modal__ribbon {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 28px;
  border-radius: 18px;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffb8e2, #ff6fc2 60%, #e04aa0);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 5px 0 #a8246f, 0 10px 20px rgba(160, 30, 110, .4);
}
.modal__ribbon--cyan {
  background: linear-gradient(180deg, #b0f7ff, #4fd6f5 60%, #2aa6e0);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .55), 0 5px 0 #16689e, 0 10px 20px rgba(20, 100, 160, .4);
}
.modal__ribbon--gold {
  background: linear-gradient(180deg, #fff4b4, #ffcf4d 60%, #f7a42a);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 5px 0 #c46f0a, 0 10px 20px rgba(160, 90, 10, .4);
}
.modal__ribbon h2 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(90, 20, 100, .35);
}
.modal__ribbon--cyan h2, .modal__ribbon--gold h2 { color: #3a1d7a; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.modal__stack { position: relative; display: flex; flex-direction: column; gap: 14px; }
.modal__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  margin: 0 -8px;
  padding: 4px 8px;
  scrollbar-width: thin;
}
.modal__text { position: relative; text-align: center; font-weight: 700; line-height: 1.45; }
.modal__row { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.pause-card {
  position: relative;
  width: min(calc(100vw - 16px), 400px, calc((100dvh - 24px) / 1.351));
  aspect-ratio: 760 / 1027;
  container-type: inline-size;
  transform: translateY(24px) scale(.9);
  transition: transform var(--dur-med) var(--ease-bounce);
}
.modal.is-open .pause-card { transform: none; }
.pause-card--settings { aspect-ratio: 760 / 1033; }
.modal--framed { padding: 12px 8px; }
.pause-card__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 30px rgba(15, 0, 60, .55));
  pointer-events: none;
}
.pause-card__buttons {
  position: absolute;
  left: 17.5%;
  right: 17.5%;
  top: 31.5%;
  height: 53%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.btn--framed {
  width: 100%;
  height: 16.4%;
  min-height: 0;
  padding: 0 4cqw;
  gap: 3cqw;
  font-size: 6.4cqw;
  font-weight: 700;
  letter-spacing: .02em;
  border: .8cqw solid #ffb52e;
  box-shadow:
    inset 0 .7cqw 0 rgba(255, 255, 255, .55),
    inset 0 -.9cqw 0 rgba(0, 0, 0, .14),
    0 .7cqw 0 #b8630a,
    0 1.6cqw 2.6cqw rgba(10, 0, 50, .4);
}
.btn--framed::before { top: .6cqw; height: 40%; }
.btn--framed .icon { width: 1.1em; height: 1.1em; }
.btn--framed:not(:disabled):active {
  transform: translateY(.6cqw);
  box-shadow: inset 0 .7cqw 0 rgba(255, 255, 255, .55), 0 .1cqw 0 #b8630a, 0 .6cqw 1.2cqw rgba(10, 0, 50, .4);
}
.btn--framed.btn--cyan { --b-top: #b8fbff; --b-mid: #52dcf7; --b-bot: #22b4ea; --b-text: #0b2a66; }
.btn--framed:not(.btn--gold):not(.btn--cyan):not(.btn--pink):not(.btn--danger) { --b-top: #b48cff; --b-mid: #7b3ff2; --b-bot: #6027d6; }

.frame-row {
  height: 16.4%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2cqw;
  padding: 0 2.4cqw 0 4cqw;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(10, 30, 120, .55), rgba(20, 50, 170, .45));
  border: .6cqw solid rgba(255, 190, 70, .85);
  box-shadow: inset 0 .6cqw 1.4cqw rgba(0, 10, 60, .45), 0 .5cqw 0 rgba(140, 70, 0, .6);
}
.frame-row__label {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5.6cqw;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-shadow: 0 .4cqw 0 rgba(0, 0, 50, .5);
}
.frame-row__label .icon { width: 1.1em; height: 1.1em; color: #ffe07a; }
.settings-card .switch {
  width: 15cqw;
  height: 8cqw;
  border: .5cqw solid #ffb52e;
}
.settings-card .switch::after {
  top: .5cqw;
  left: .5cqw;
  width: 6cqw;
  height: 6cqw;
}
.settings-card .switch[aria-checked="true"] { background: linear-gradient(90deg, #3fd67d, #1fae5a); }
.settings-card .switch[aria-checked="true"]::after { transform: translateX(7cqw); }
.settings-card .segmented { width: 30cqw; padding: .6cqw; border: .5cqw solid #ffb52e; }
.settings-card .segmented button { min-height: 0; height: 6.6cqw; font-size: 3.8cqw; }
.settings-card .btn--danger.btn--framed { --b-top: #ffb3bd; --b-mid: #ff5c72; --b-bot: #e23452; font-size: 5.4cqw; }
.btn--framed { white-space: nowrap; }
.pause-card .settings-note {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 86%;
  font-size: 3cqw;
}

.win-card {
  position: relative;
  width: min(calc(100vw - 16px), 420px, calc((100dvh - 24px) / 1.559));
  aspect-ratio: 760 / 1185;
  container-type: inline-size;
  transform: translateY(30px) scale(.85);
  transition: transform .5s var(--ease-bounce);
}
.modal.is-open .win-card { transform: none; }
.confetti-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.modal--win .confetti-layer { z-index: 3; }
.win-card__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 20px 34px rgba(15, 0, 60, .6));
  pointer-events: none;
}
.win-card > :not(.win-card__art) { position: absolute; left: 11%; right: 11%; }

.win-card__sub {
  top: 32.6%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6.4cqw;
  color: #fff;
  -webkit-text-stroke: 1.1cqw #3a1a8c;
  paint-order: stroke fill;
  text-shadow: 0 .7cqw 0 #2a0f6e;
}

.win-card__unlock {
  top: 38.4%;
  height: 5.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
}
.win-pill {
  padding: 1.2cqw 5cqw;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.6cqw;
  white-space: nowrap;
  color: #0b2a66;
  background: linear-gradient(180deg, #d4fcff 0%, #8eeaff 45%, #3ec9f2 100%);
  border: .5cqw solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 .6cqw 0 rgba(255, 255, 255, .7), inset 0 -.6cqw 1cqw rgba(0, 90, 160, .25), 0 0 3cqw rgba(98, 232, 255, .6);
}
.win-lock { position: relative; width: 8cqw; height: 8cqw; flex: none; animation: lock-wiggle 1.6s ease-in-out infinite; }
.win-lock svg { width: 100%; height: 100%; filter: drop-shadow(0 .5cqw .6cqw rgba(0, 0, 40, .45)); }
.win-lock--flip svg { transform: scaleX(-1); }
.win-lock::before {
  content: "";
  position: absolute;
  inset: -34%;
  background:
    linear-gradient(#ffe38a, #ffe38a) 12% 14% / 12% 3.5% no-repeat,
    linear-gradient(#ffe38a, #ffe38a) 6% 42% / 14% 3.5% no-repeat,
    linear-gradient(#ffe38a, #ffe38a) 18% 72% / 12% 3.5% no-repeat;
  opacity: .9;
}
.win-lock--flip::before { transform: scaleX(-1); }

.win-card__stars {
  top: 44.2%;
  height: 9.6%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
}
.win-star { width: 13.6cqw; height: 13.6cqw; filter: drop-shadow(0 0 2.4cqw rgba(255, 214, 60, .75)) drop-shadow(0 .8cqw .8cqw rgba(60, 20, 0, .4)); }
.win-star:nth-child(2) { width: 15.6cqw; height: 15.6cqw; margin-top: -2.6cqw; }
.win-star.is-empty { filter: drop-shadow(0 .6cqw .6cqw rgba(0, 0, 50, .35)); }
.win-star.is-on { animation: star-pop .55s var(--ease-bounce) both; animation-delay: calc(var(--i, 0) * 200ms + 350ms); }

.win-card__stats {
  top: 54.6%;
  height: 15%;
  display: grid;
  grid-template-columns: 1.08fr 1fr 1.08fr;
  gap: 2.2cqw;
}
.win-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5cqw;
  padding: 1.4cqw 1cqw;
  border-radius: 4cqw;
  background: linear-gradient(180deg, rgba(150, 140, 255, .55) 0%, rgba(90, 80, 230, .45) 100%);
  border: .5cqw solid rgba(190, 185, 255, .75);
  box-shadow: inset 0 .8cqw 0 rgba(255, 255, 255, .25), inset 0 -1cqw 2cqw rgba(30, 20, 140, .35), 0 .8cqw 1.6cqw rgba(10, 0, 60, .3);
}
.win-stat__icon { width: 7.4cqw; height: 7.4cqw; filter: drop-shadow(0 .5cqw .5cqw rgba(60, 0, 0, .4)); }
.win-stat .win-stat__dice { --size: 7cqw; margin-bottom: .4cqw; box-shadow: 0 0 0 .4cqw #fff, 0 .6cqw 1cqw rgba(0, 0, 40, .45); }
.win-stat__dice .pip { background: radial-gradient(circle at 35% 30%, #5a5a70, #16162a 70%); }
.win-stat__pawn { height: 7.8cqw; width: auto; filter: drop-shadow(0 .6cqw .6cqw rgba(60, 0, 0, .45)); }
.win-stat__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6.8cqw;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: .9cqw #2a1878;
  paint-order: stroke fill;
}
.win-stat__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.4cqw;
  line-height: 1.05;
  max-width: 13ch;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  -webkit-text-stroke: .6cqw #2a1878;
  paint-order: stroke fill;
}

.win-card__actions {
  top: 72.3%;
  bottom: 12.4%;
  display: flex;
  flex-direction: column;
  gap: 2.4cqw;
}
.win-card .btn--framed { height: auto; flex: 1 1 0; font-size: 6.6cqw; }
.win-card__row { flex: 1 1 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2.6cqw; }
.win-card__row .btn--framed { font-size: 5.8cqw; padding: 0 2cqw; }
.win-card.is-final .win-card__row { flex: 1.1 1 0; }

.lose-card { aspect-ratio: 760 / 1102; width: min(calc(100vw - 16px), 420px, calc((100dvh - 24px) / 1.45)); }
.lose-card .win-card__sub { top: 40.6%; }
.lose-card .win-card__unlock { top: 46.6%; height: 5.4%; }
.lose-pill {
  color: #7a0a4a;
  background: linear-gradient(180deg, #ffe0f3 0%, #ff9ad5 45%, #ff5fb8 100%);
  box-shadow: inset 0 .6cqw 0 rgba(255, 255, 255, .7), inset 0 -.6cqw 1cqw rgba(160, 0, 90, .25), 0 0 3cqw rgba(255, 110, 200, .55);
}
.lose-card .win-card__stats { top: 54%; height: 15.4%; }
.lose-card .win-card__actions { top: 72.6%; bottom: 13.2%; }

.art-card {
  --aspect: 1.54;
  position: relative;
  width: min(calc(100vw - 16px), 420px, calc((100dvh - 24px) / var(--aspect)));
  aspect-ratio: 1 / var(--aspect);
  container-type: inline-size;
  transform: translateY(24px) scale(.9);
  transition: transform var(--dur-med) var(--ease-bounce);
}
.modal.is-open .art-card { transform: none; }
.art-card__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 18px 30px rgba(15, 0, 60, .55));
  pointer-events: none;
}

.art-card--players { --aspect: 1.5395; }
.art-card__close {
  position: absolute;
  left: 86.6%;
  top: 11.8%;
  width: 12.8%;
  aspect-ratio: 1;
  border-radius: 50%;
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.art-card__close:active { transform: scale(.88); }
.players-level {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 27%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.4cqw;
  color: #fff;
  -webkit-text-stroke: .8cqw #3a1a8c;
  paint-order: stroke fill;
}
.player-row-btn {
  position: absolute;
  left: 7.9%;
  right: 8.8%;
  top: var(--row-top);
  height: 13.7%;
  display: flex;
  align-items: center;
  border-radius: 5cqw;
  transition: transform var(--dur-fast) var(--ease-bounce), box-shadow .25s;
}
.player-row-btn:active { transform: scale(.97); }
.player-row-btn.is-selected {
  box-shadow: 0 0 0 1cqw #ffe38a, 0 0 5cqw rgba(255, 214, 110, .85);
}
.player-row-btn__num {
  position: absolute;
  left: 4.4%;
  top: 16%;
  width: 16.8%;
  height: 69%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11cqw;
  line-height: 1;
  color: #7a3a00;
  text-shadow: 0 .5cqw 0 rgba(255, 255, 255, .6);
}
.player-row-btn__text {
  position: absolute;
  left: 25%;
  right: 30%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .8cqw;
  text-align: left;
}
.player-row-btn__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6.2cqw;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: .8cqw #3a1a8c;
  paint-order: stroke fill;
  white-space: nowrap;
}
.player-row-btn__desc {
  font-weight: 800;
  font-size: 3.4cqw;
  line-height: 1.15;
  color: #e9e3ff;
  text-shadow: 0 1px 2px rgba(20, 0, 70, .8);
}
.art-card__back {
  position: absolute;
  left: 15.2%;
  right: 16.2%;
  top: 79.1%;
  height: 8.7%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6.8cqw;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b3500;
  text-shadow: 0 .4cqw 0 rgba(255, 255, 255, .6);
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.art-card__back .icon { width: 1em; height: 1em; }
.art-card__back:active { transform: scale(.95); }

.art-card--howto { --aspect: 1.5355; }
.howto-scroll {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 25.5%;
  bottom: 22.5%;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 1cqw 1cqw 3cqw;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(transparent, #000 3cqw, #000 calc(100% - 5cqw), transparent);
  mask-image: linear-gradient(transparent, #000 3cqw, #000 calc(100% - 5cqw), transparent);
}
.art-card--howto .howto-item {
  background: linear-gradient(180deg, rgba(150, 130, 255, .5), rgba(90, 70, 220, .42));
  border: .45cqw solid rgba(210, 200, 255, .6);
  box-shadow: inset 0 .6cqw 0 rgba(255, 255, 255, .22), 0 .8cqw 1.6cqw rgba(20, 0, 70, .3);
}
.art-card--howto .howto-item h3 { font-size: 4.4cqw; }
.art-card--howto .howto-item p { font-size: 3.5cqw; }
.art-card--howto .howto-art { width: 14cqw; height: 14cqw; }
.art-card--howto .howto-art .dice--mini { --size: 9.4cqw; box-shadow: 0 0 0 .5cqw var(--p, #8f6bff), 0 .6cqw 1cqw rgba(20, 0, 80, .4); }
.howto-ok {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 79%;
  width: auto;
  height: 8.6% !important;
  font-size: 6.4cqw;
}

.player-options { position: relative; display: flex; flex-direction: column; gap: 12px; }
.player-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px 10px 10px;
  border-radius: 20px;
  text-align: left;
  background: rgba(255, 255, 255, .14);
  border: 2px solid rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform var(--dur-fast) var(--ease-bounce), background .2s, border-color .2s;
}
.player-option:active { transform: scale(.96); }
.player-option.is-selected {
  border-color: #ffe38a;
  background: linear-gradient(160deg, rgba(255, 230, 140, .35), rgba(255, 255, 255, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 18px rgba(255, 214, 110, .55);
}
.player-option__count {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #6b3500;
  background: linear-gradient(180deg, #fff4b4, #ffcf4d 60%, #f7a42a);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), 0 3px 0 #c46f0a;
}
.player-option__info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.player-option__title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.player-option__desc { font-size: .78rem; font-weight: 800; opacity: .85; }
.player-option__orbs { flex: none; display: flex; }
.player-option__orbs img { height: 30px; width: auto; margin-left: -6px; filter: drop-shadow(0 2px 3px rgba(20, 0, 60, .4)); }

.settings-list { display: flex; flex-direction: column; gap: 12px; }
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25);
}
.setting-row--stack { flex-direction: column; align-items: stretch; }
.setting-row__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}
.setting-row__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .2);
}
.setting-row__icon .icon { width: 20px; height: 20px; }
.switch {
  position: relative;
  flex: none;
  width: 62px;
  height: 34px;
  border-radius: var(--radius-pill);
  background: rgba(20, 0, 70, .45);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35);
  transition: background .25s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #e3dcff);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
  transition: transform .25s var(--ease-bounce);
}
.switch[aria-checked="true"] { background: linear-gradient(90deg, #4fd6f5, #8f6bff); }
.switch[aria-checked="true"]::after { transform: translateX(28px); }
.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border-radius: var(--radius-pill);
  background: rgba(20, 0, 70, .4);
}
.segmented button {
  min-height: 38px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .75);
  transition: background .2s, color .2s;
}
.segmented button[aria-pressed="true"] {
  color: #6b3500;
  background: linear-gradient(180deg, #fff4b4, #ffcf4d 60%, #f7a42a);
  box-shadow: 0 2px 0 #c46f0a;
}
.settings-note { font-size: .8rem; font-weight: 700; text-align: center; opacity: .85; }

.howto-list { display: flex; flex-direction: column; gap: 10px; }
.howto-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
}
.howto-art {
  position: relative;
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.howto-art .icon { width: 30px; height: 30px; }
.howto-item h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; letter-spacing: .03em; }
.howto-item p { font-size: .84rem; font-weight: 700; opacity: .9; }
.art-pair { display: flex; align-items: center; gap: 2px; }
.art-pair img { height: 34px; width: auto; }
.art-pair img + img { margin-left: -6px; }
.howto-pawn { height: 42px; width: auto; }
.art-cell {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(160deg, #fff, #e2d8ff);
}
.art-cell .icon { width: 22px; height: 22px; fill: #9c80ff; }
.art-home {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: conic-gradient(from -45deg, var(--green) 0 90deg, var(--yellow) 0 180deg, var(--blue) 0 270deg, var(--red) 0 360deg);
  box-shadow: 0 0 0 2px #fff;
}
.dice--mini { --size: 38px; pointer-events: none; }
.icon--gold { fill: var(--c-gold); filter: drop-shadow(0 0 4px rgba(255, 214, 110, .8)); }