/* Coach (lesson), modal Bo, victory and the other screens */
.coach {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--sab) + 96px);
  z-index: 20;
  display: flex;
  gap: 10px;
  align-items: center;
}
.tutCount {
  font: 800 1.1rem var(--font-t);
  color: var(--gold);
  padding: 6px 12px;
}
.hand {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 25;
  width: 58px;
  height: 58px;
  pointer-events: none;
  filter: drop-shadow(0 6px 8px #0008);
  opacity: 0;
}
.hand svg {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 30% 10%;
  transition: transform 0.12s ease;
}
.hand.hold svg,
.hand.press svg {
  transform: scale(0.86) rotate(-6deg);
}
.hand.press svg {
  animation: handTap 0.22s ease;
}
@keyframes handTap {
  50% {
    transform: scale(0.82) rotate(-8deg);
  }
}
.hand .tapRing {
  position: absolute;
  left: 6px;
  top: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid #fff;
  opacity: 0;
}
.hand.press .tapRing {
  animation: tapRing 0.5s ease-out;
}
@keyframes tapRing {
  from {
    opacity: 1;
    transform: scale(0.4);
  }
  to {
    opacity: 0;
    transform: scale(2.2);
  }
}
@media (min-aspect-ratio: 6/5) {
  .coach {
    bottom: calc(var(--sab) + 28px);
  }
}
.modalBo {
  display: flex;
  justify-content: center;
  margin: -6px 0 2px;
  height: 130px;
}
.modalBo .bo {
  --bo: 100px;
}
.modalBo.big {
  height: 160px;
}
.modalBo.big .bo {
  --bo: 124px;
}
.victory .winTitle {
  font-size: 2.1rem;
  animation: titlePop 0.6s var(--ease-spring) both;
}
@keyframes titlePop {
  from {
    transform: scale(0.4) rotate(-6deg);
    opacity: 0;
  }
}
.stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: -4px 0 6px;
}
.stars span {
  display: block;
  width: 48px;
  height: 48px;
  color: #32624a;
  opacity: 0.5;
  transform: scale(0.4);
  transition:
    transform 0.45s var(--ease-spring),
    opacity 0.3s;
}
.stars span:nth-child(2) {
  width: 58px;
  height: 58px;
  margin-top: -10px;
}
.stars span .ic {
  width: 100%;
  height: 100%;
  stroke: #0b2018;
  stroke-width: 1.4;
}
.stars span.in {
  opacity: 1;
  transform: scale(1);
}
.stars span.on.in {
  color: #ffd25e;
  filter: drop-shadow(0 0 10px #ffc65aaa);
}
.stars span:not(.on) .artIcon {
  filter: grayscale(1) brightness(0.45);
}
.winSub {
  color: var(--lav2);
  margin-bottom: 10px;
}
.winMeta {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-bottom: 12px;
}
.winMeta small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}
.winMeta b {
  font: 800 1.5rem/1.1 var(--font-t);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.winExtra {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.winLine {
  padding: 7px 10px;
  border-radius: 12px;
  background: #0a2120;
  box-shadow: inset 0 0 0 1.5px #ffc65a44;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.winLine .ic {
  width: 18px;
  height: 18px;
  color: var(--gold);
}
.winLine.new {
  background: linear-gradient(90deg, #2f8a5a, #22b7aa);
  animation: popIn 0.5s 0.9s var(--ease-spring) both;
}
.pausePanel .col .btn {
  width: 100%;
}
.panel .col .btn {
  width: 100%;
}

/* ---------------------------------------------------------------- castle map */
.mapScreen {
  padding-bottom: 0;
  gap: 8px;
}
.mapScreen > .topbar,
.wingNav,
.wingContext {
  width: min(100%, 820px);
  margin: 0 auto;
  flex: none;
}
.wingNav {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 3px 2px 7px;
  scrollbar-width: thin;
  scrollbar-color: #a8e6a0 #1a3428;
}
.wingTab.btn {
  position: relative;
  flex: 1 0 100px;
  min-width: 100px;
  min-height: 70px;
  border-radius: 12px;
  padding: 8px 6px;
  overflow: hidden;
  background: #193528;
  color: #fff;
  box-shadow: inset 0 0 0 1px #ffffff35;
  font-size: 0.7rem;
  text-shadow: 0 2px 3px #000;
}
.wingTab img:not(.ic) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.58;
  pointer-events: none;
}
.wingTab span {
  position: relative;
  z-index: 1;
  align-self: end;
}
.wingTab .ic {
  position: absolute;
  width: 17px;
  height: 17px;
  right: 3px;
  top: 2px;
}
.wingTab.selected {
  box-shadow:
    inset 0 0 0 2px #ffe09a,
    0 0 0 1px #714914;
}
.wingTab.selected img:not(.ic) {
  opacity: 0.85;
}
.wingTab.locked img:not(.ic) {
  filter: saturate(0.35);
}
.wingContext {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  text-shadow: 0 2px 4px #06120c;
}
.wingContext > div {
  flex: 1;
  min-width: 0;
}
.wingContext b,
.wingContext small {
  display: block;
}
.wingContext b {
  font: 800 1.12rem/1.1 var(--font-t);
  color: #ffdc87;
}
.wingContext small {
  font-size: 0.72rem;
  color: #eafcf4;
  margin-top: 3px;
}
.wingContext .chip {
  font-size: 0.75rem;
  white-space: nowrap;
}
.wingContext .ic,
.topbar .chip.stars .ic {
  width: 16px;
  height: 16px;
  color: var(--gold);
}
.mapScroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 -12px;
  scrollbar-width: thin;
  scrollbar-color: #95c8b1 #152a20;
}
.mapInner {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  isolation: isolate;
}
.mapRoom {
  position: absolute;
  left: 0;
  right: 0;
  background: #284839 center / cover no-repeat;
  overflow: hidden;
  border-top: 2px solid #cfac6855;
}
.mapRoom::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#0c1c1555, transparent 20% 80%, #0c1c1577),
    linear-gradient(90deg, #0e1d1655, transparent 25% 75%, #0e1d1655);
  pointer-events: none;
}
.mapRoom.sleeping {
  filter: saturate(0.45) brightness(0.62);
}
.mapRoomLabel {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 15px;
  border-radius: 12px;
  z-index: 1;
  background: #142920e8;
  color: #ffe8b5;
  font: 800 0.92rem var(--font-t);
  white-space: nowrap;
}
.mapPath {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.mapPath path {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mapPath .p0 {
  stroke: #0e2219bd;
  stroke-width: 22px;
}
.mapPath .p1 {
  stroke: #ffe6a1;
  stroke-width: 5px;
  stroke-dasharray: 2 10;
  filter: drop-shadow(0 0 3px #ffc65a);
}
.node {
  position: absolute;
  z-index: 2;
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 40% 30%, #a8e6a0, #2f8a3a);
  box-shadow:
    inset 0 2px 0 #fff6,
    inset 0 -4px 0 #1c5a3a,
    0 3px 0 #0c2017,
    0 6px 12px #0008;
  color: #fff;
  font: 800 1.1rem var(--font-t);
}
.node:active {
  transform: scale(0.94);
}
.node:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
.node.done {
  background: radial-gradient(circle at 40% 30%, #7ff6ea, #22b7aa);
  color: #083a36;
}
.node.cur {
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  background: radial-gradient(circle at 40% 30%, #ffe08a, #f6a81f);
  color: #4a2300;
  animation: nodePulse 1.6s ease-in-out infinite;
}
@keyframes nodePulse {
  50% {
    box-shadow:
      inset 0 2px 0 #fff8,
      inset 0 -4px 0 #a35a06,
      0 0 0 9px #ffc65a22,
      0 6px 14px #0008;
  }
}
.node.lock {
  background: #2b4539;
  color: #c9e4d8;
  cursor: default;
}
.node.boss {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
}
.node .crown {
  position: absolute;
  top: -24px;
}
.node .crown .ic {
  width: 27px;
  height: 27px;
}
.node .nst {
  position: absolute;
  bottom: -10px;
  display: flex;
  gap: 2px;
}
.node .nst i {
  width: 10px;
  height: 10px;
  background: #284437;
  clip-path: polygon(
    50% 0,
    63% 35%,
    100% 38%,
    72% 61%,
    81% 100%,
    50% 78%,
    19% 100%,
    28% 61%,
    0 38%,
    37% 35%
  );
}
.node .nst i.on {
  background: #ffd25e;
}
.chest {
  position: absolute;
  z-index: 2;
  width: 54px;
  height: 54px;
  margin-left: -27px;
  filter: drop-shadow(0 4px 6px #0008);
}
.chest:not(.open) {
  opacity: 0.8;
}
.chest.open {
  filter: drop-shadow(0 0 8px #ffc65a99);
}
.mapBo {
  position: absolute;
  z-index: 4;
  margin-left: -34px;
  transition:
    left 0.35s var(--ease-out),
    top 0.35s var(--ease-out);
  pointer-events: none;
}
.mapBo .bo {
  --bo: 68px;
}
.mapPlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--sab) + 14px);
  z-index: 5;
  width: min(80vw, 320px);
}
.mapPlay:active {
  transform: translateX(-50%) translateY(3px) scale(0.97);
}
@media (max-width: 420px) {
  .wingTab.btn {
    min-width: 84px;
    flex-basis: 84px;
    min-height: 58px;
  }
  .mapScreen > .topbar {
    gap: 6px;
  }
  .mapScreen .topbar .chip {
    padding: 5px 8px;
    font-size: 0.86rem;
  }
}
@media (max-height: 560px) and (min-aspect-ratio: 6/5) {
  .mapScreen {
    gap: 3px;
  }
  .mapScreen .topbar {
    min-height: 40px;
  }
  .mapScreen .topbar .btn {
    width: 40px;
    min-height: 40px;
  }
  .wingTab.btn {
    min-height: 42px;
    padding: 5px;
    font-size: 0.65rem;
  }
  .wingContext {
    display: none;
  }
  .mapPlay {
    width: min(30vw, 220px);
    left: auto;
    right: 12px;
    transform: none;
    font-size: 1rem;
    min-height: 46px;
  }
  .mapPlay:active {
    transform: translateY(3px);
  }
}

/* ---------------------------------------------------------------- wardrobe */
.shop {
  gap: 8px;
}
.mirror {
  position: relative;
  flex: 0 0 auto;
  height: min(34vh, 300px);
  display: grid;
  place-items: center;
}
.mirror::before {
  content: '';
  position: absolute;
  width: min(56vw, 30vh, 250px);
  aspect-ratio: 3 / 4;
  border-radius: 50% / 42%;
  background: radial-gradient(60% 55% at 50% 40%, #e4f7d655, #5fbf6a33 55%, #164238aa 100%);
  box-shadow:
    inset 0 0 0 7px #ffc65a,
    inset 0 0 0 10px #a35a06,
    inset 0 0 0 13px #ffe08a88,
    0 0 40px #a8e6a055,
    0 14px 30px #0008;
}
.mirror::after {
  content: '';
  position: absolute;
  width: min(56vw, 30vh, 250px);
  aspect-ratio: 3 / 4;
  border-radius: 50% / 42%;
  background: linear-gradient(115deg, transparent 35%, #ffffff22 42%, transparent 50%);
  animation: mirrorShine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mirrorShine {
  0%,
  60% {
    opacity: 0;
    transform: translateX(-20%);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(20%);
  }
}
.mirror.art::before,
.mirror.art::after {
  display: none;
}
.mirrorStage {
  position: relative;
  z-index: 2;
}
.mirrorStage .bo {
  --bo: min(36vw, 22vh, 190px);
}
.tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
}
.tabs > :first-child {
  margin-left: auto;
}
.tabs > :last-child {
  margin-right: auto;
}
.tab {
  flex: none;
  border: 0;
  border-radius: 14px;
  padding: 9px 14px;
  background: #0a2120d0;
  color: var(--muted);
  font: 800 0.9rem var(--font);
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px #ffffff1a;
}
.tab.on {
  background: linear-gradient(#5fbf6a, #2f8a5a);
  color: #fff;
  box-shadow:
    inset 0 2px 0 #ffffff44,
    0 3px 0 #1c5a3a;
}
.itemGrid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(98px, 1fr));
  gap: 8px;
  align-content: start;
  padding: 4px 2px 8px;
  scrollbar-width: thin;
}
.card {
  position: relative;
  border: 0;
  border-radius: 18px;
  padding: 8px 6px 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--text);
  background: linear-gradient(180deg, #346e51, #143a33);
  box-shadow:
    inset 0 2px 0 #ffffff26,
    inset 0 -3px 0 #0a2120,
    0 4px 10px #0006;
  transition: transform 0.15s var(--ease-spring);
}
.card:active {
  transform: scale(0.95);
}
.card.sel {
  box-shadow:
    inset 0 0 0 2.5px var(--teal),
    0 0 16px #3fe0d066;
  transform: translateY(-2px);
}
.card .th {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
}
.card .th svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.card b {
  font-size: 0.78rem;
  line-height: 1.1;
  text-align: center;
  min-height: 2.2em;
  display: flex;
  align-items: center;
}
.card .rar {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.8;
}
.card.r-rare .rar,
.r-rare {
  color: #7fdcff;
}
.card.r-epic .rar,
.r-epic {
  color: #a8f2d5;
}
.card.r-legendary .rar,
.r-legendary {
  color: #ffd25e;
}
.card.r-legendary {
  background: linear-gradient(180deg, #5a3f2a, #1d2d27);
}
.card .price {
  font-size: 0.82rem;
  color: #ffe08a;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.card .price .coin-ic {
  width: 1em;
  height: 1em;
}
.card .lockp {
  color: var(--muted);
}
.card .lockp .ic {
  width: 13px;
  height: 13px;
}
.card.locked .th {
  filter: grayscale(0.8) brightness(0.6);
}
.card .tag {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: #083a36;
  display: grid;
  place-items: center;
}
.card .tag .ic {
  width: 14px;
  height: 14px;
  stroke-width: 3.4;
}
.card .own {
  font-size: 0.7rem;
  color: var(--muted);
}
.helperTh {
  color: var(--gold);
}
.helperTh .ic {
  width: 44px;
  height: 44px;
}
.shopAction {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  padding: 8px 12px;
  border-radius: 20px;
  background: #0a2120d9;
  box-shadow: inset 0 0 0 1.5px #ffc65a33;
}
.shopAction .actInfo {
  flex: 1;
  min-width: 0;
}
.shopAction .actInfo b {
  display: block;
  font: 800 1.1rem var(--font-t);
}
.shopAction .actInfo small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.2;
}
.shopAction .need {
  color: var(--rose);
  font-size: 0.78rem;
}
.shopAction > .muted {
  flex: 1;
}
.lockMsg .ic {
  width: 16px;
  height: 16px;
}
@media (min-aspect-ratio: 6/5) {
  .shop {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.3fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 20px;
  }
  .shop > .topbar {
    grid-column: 1 / -1;
  }
  .shop > .mirror {
    grid-column: 1;
    grid-row: 2 / 5;
    height: auto;
  }
  .shop .mirror::before,
  .shop .mirror::after {
    width: min(30vw, 56vh, 360px);
  }
  .shop .mirrorStage .bo {
    --bo: min(24vw, 40vh, 270px);
  }
  .shop > .tabs,
  .shop > .itemGrid,
  .shop > .shopAction {
    grid-column: 2;
  }
}

/* ---------------------------------------------------------------- daily */
.daily,
.modes,
.trophies {
  gap: 12px;
  align-items: center;
}
.daily > *,
.modes > *,
.trophies > * {
  width: min(100%, 520px);
}
.dailyHero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.dailyBo {
  width: 92px;
  height: 104px;
  display: grid;
  place-items: center;
  flex: none;
}
.dailyBo .bo {
  --bo: 82px;
}
.dailyInfo {
  flex: 1;
}
.dailyInfo b {
  display: block;
  font: 800 1.25rem/1.1 var(--font-t);
}
.dailyInfo small {
  display: block;
  color: var(--muted);
  margin-top: 3px;
}
.dailyInfo small.coins {
  color: #ffe08a;
}
.flame {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  position: relative;
  color: #3a5a4a;
}
.flame .ic {
  width: 64px;
  height: 64px;
}
.flame.on {
  color: #ff9a3d;
  filter: drop-shadow(0 0 10px #ff7a2a);
  animation: flameBob 1.6s ease-in-out infinite;
}
.flame b {
  position: absolute;
  bottom: 10px;
  font: 800 1.15rem var(--font-t);
  color: #fff;
  text-shadow: 0 2px 0 #7a2a06;
}
@keyframes flameBob {
  50% {
    transform: scale(1.06, 0.96);
  }
}
.cal {
  padding: 14px;
}
.calHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.calHead b {
  font: 800 1.15rem var(--font-t);
}
.calHead .btn.round {
  width: 40px;
  min-height: 40px;
}
.calHead .flip .ic {
  transform: scaleX(-1);
}
.calGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.calGrid .wd {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
}
.day {
  aspect-ratio: 1;
  border: 0;
  border-radius: 12px;
  background: #0a2120;
  color: var(--lav2);
  font: 800 0.95rem var(--font);
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px #ffffff14;
  display: grid;
  place-items: center;
}
.day.done {
  background: linear-gradient(#5fbf6a, #2f8a5a);
  color: #fff;
}
.day.done i .ic {
  width: 22px;
  height: 22px;
}
.day.today {
  box-shadow:
    inset 0 0 0 2.5px var(--gold),
    0 0 12px #ffc65a66;
}
.day.future {
  opacity: 0.35;
  cursor: default;
}
.dailyPlay {
  width: min(100%, 420px);
  font-size: 1.2rem;
}
.dailyDone {
  text-align: center;
  padding: 12px;
  border-radius: 18px;
  background: #0a2120d9;
  box-shadow: inset 0 0 0 1.5px #3fe0d066;
}
.dailyDone b {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--teal);
  font: 800 1.2rem var(--font-t);
}
.dailyDone b .ic {
  width: 22px;
  height: 22px;
}
.dailyDone small {
  display: block;
  color: var(--muted);
}

/* ---------------------------------------------------------------- relax / endless */
.modeCard {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  margin-top: auto;
  margin-bottom: auto;
}
.modeCard p {
  margin: 0;
  font-size: 1.05rem;
}
.sizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}
.size {
  border: 0;
  border-radius: 14px;
  padding: 12px 0;
  background: #0a2120;
  color: var(--lav2);
  font: 800 1.1rem var(--font-t);
  cursor: pointer;
  box-shadow: inset 0 0 0 1.5px #ffffff1a;
}
.size.on {
  background: linear-gradient(#7ff6ea, #22b7aa);
  color: #083a36;
  box-shadow: 0 3px 0 #0d6b65;
}
.endlessNext {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 800 1.4rem var(--font-t);
}
.modeCard .btn.big {
  width: 100%;
}

/* ---------------------------------------------------------------- trophies */
.troBody {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 2px 10px;
}
.ach {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  background: #0a2120d0;
  box-shadow: inset 0 0 0 1.5px #ffffff14;
}
.achIc {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #143a33;
  color: #3a5a4a;
  flex: none;
}
.achIc .ic {
  width: 26px;
  height: 26px;
}
.ach.done .achIc,
.ach.claimed .achIc {
  background: linear-gradient(#ffe08a, #f6a81f);
  color: #4a2300;
}
.ach.done {
  box-shadow:
    inset 0 0 0 2px #ffc65a99,
    0 0 14px #ffc65a33;
}
.achTx {
  flex: 1;
  min-width: 0;
}
.achTx b {
  display: block;
  font: 800 1rem var(--font-t);
}
.achTx small {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.2;
}
.achReward {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--muted);
  font-size: 0.85rem;
  opacity: 0.7;
}
.achDone {
  color: var(--teal);
}
.achDone .ic {
  width: 24px;
  height: 24px;
}
.statGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.stat {
  padding: 14px 10px;
  border-radius: 18px;
  background: #0a2120d0;
  text-align: center;
  box-shadow: inset 0 0 0 1.5px #ffffff14;
}
.stat b {
  display: block;
  font: 800 1.6rem var(--font-t);
  color: var(--gold);
}
.stat small {
  color: var(--muted);
  font-size: 0.8rem;
}

.hand img {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 25% 9%;
}
.hand.hold img,
.hand.press img {
  transform: scale(0.86) rotate(-6deg);
}
.hand.press img {
  animation: handTap 0.22s ease;
}
.modalBo {
  position: relative;
}
.modalBo .rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  animation: spin 18s linear infinite;
  pointer-events: none;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.zoneHead.art {
  background-size: cover;
  background-position: center;
  padding: 22px 14px;
}

/* A compact dressing area instead of a catalogue stretched to the viewport. */
.itemGrid {
  scrollbar-color: #8dc6ac #1a3428;
}
.chest .chestArt {
  width: 100%;
  height: 100%;
}
.modalBo.big {
  height: 190px;
}
.modalBo.big .bo {
  --bo: 160px;
}
@media (min-aspect-ratio: 6/5) and (min-height: 561px) {
  .shop {
    left: max(0px, calc((100vw - 1080px) / 2));
    right: max(0px, calc((100vw - 1080px) / 2));
    top: max(0px, calc((100vh - 760px) / 2));
    bottom: max(0px, calc((100vh - 760px) / 2));
    grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    row-gap: 10px;
  }
  .shop .itemGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .shop .mirror::before,
  .shop .mirror::after {
    width: min(28vw, 48vh, 310px);
  }
}
@media (max-height: 650px) {
  .modalBo.big {
    height: 130px;
  }
  .modalBo.big .bo {
    --bo: 110px;
  }
}

/* trophies as a gallery of cards (not a long list) */
.troBody {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  align-content: start;
  flex-direction: unset;
}
.ach {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 16px 12px 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, #295840ee, #173325ee);
  box-shadow:
    inset 0 2px 0 #ffffff1f,
    inset 0 0 0 1.5px #ffffff14,
    0 8px 18px #0006;
  position: relative;
  min-height: 196px;
}
.ach .achIc {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #32664c, #173325);
  box-shadow: inset 0 0 0 2px #ffffff14;
}
.ach .achIc .ic,
.ach .achIc img {
  width: 46px;
  height: 46px;
}
.ach:not(.done):not(.claimed) .achIc {
  filter: grayscale(1) brightness(0.6);
}
.ach.done .achIc,
.ach.claimed .achIc {
  background: radial-gradient(circle at 40% 30%, #fff1a8, #f6a81f);
  box-shadow: 0 0 22px #ffc65a66;
}
.ach .achTx b {
  font-size: 1rem;
}
.ach .achTx small {
  font-size: 0.78rem;
}
.ach > .btn,
.ach > .achReward,
.ach > .achDone {
  margin-top: auto;
}
.ach.done {
  box-shadow:
    inset 0 0 0 2px #ffc65a,
    0 0 24px #ffc65a44,
    0 8px 18px #0006;
  animation: achGlow 2s ease-in-out infinite;
}
@keyframes achGlow {
  50% {
    box-shadow:
      inset 0 0 0 2px #ffe08a,
      0 0 34px #ffc65a77,
      0 8px 18px #0006;
  }
}
.ach.claimed {
  box-shadow:
    inset 0 0 0 1.5px #3fe0d066,
    0 8px 18px #0006;
}
.ach .achReward {
  opacity: 0.8;
  font-weight: 800;
}
.trophies > * {
  width: min(100%, 980px);
}
.statGrid {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------- level select (one world at a time) */
.levels {
  gap: 10px;
  align-items: center;
  padding-bottom: calc(var(--sab) + 86px);
}
.levels > * {
  width: min(100%, 760px);
  flex: none;
}
.worldHead {
  display: flex;
  align-items: center;
  gap: 10px;
}
.worldHead .flip .ic {
  transform: scaleX(-1);
}
.worldTitle {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 10px 14px;
  border-radius: 22px;
  background: #0a2120c9;
  box-shadow:
    inset 0 0 0 1.5px #ffc65a40,
    0 10px 24px #0007;
}
.worldTitle small {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.worldTitle b {
  display: block;
  font: 800 clamp(1.3rem, 4vw, 1.9rem) / 1.05 var(--font-t);
  color: var(--gold);
  text-shadow: 0 3px 0 #164238;
}
.worldTitle span {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--lav2);
}
.worldTitle span .ic {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}
.worldDots {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.worldDots .dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff40;
  cursor: pointer;
  transition:
    transform 0.2s var(--ease-spring),
    background 0.2s;
}
.worldDots .dot.on {
  background: var(--gold);
  transform: scale(1.35);
  box-shadow: 0 0 10px #ffc65a;
}
.worldDots .dot.locked {
  background: #ffffff1a;
}
.levelPanel {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 14px 14px;
  border-radius: 28px;
  background: #0b1f15b3;
  box-shadow:
    inset 0 0 0 1.5px #ffffff14,
    0 18px 40px #0008;
  backdrop-filter: blur(2px);
  scrollbar-width: none;
}
.levelPanel::-webkit-scrollbar {
  display: none;
}
.levelPanel.sleeping .lvl {
  filter: grayscale(0.6) brightness(0.75);
}
.levelGrid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 2.6vw, 18px);
  padding-top: 54px;
}
@media (min-width: 700px) {
  .levelGrid {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1000px) and (min-aspect-ratio: 5/4) {
  .levels > * {
    width: min(100%, 1040px);
  }
  .levelGrid {
    grid-template-columns: repeat(10, 1fr);
  }
}
.lvl {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  border-radius: 22%;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  font: 800 clamp(1.2rem, 4vw, 1.7rem) var(--font-t);
  color: #fff;
  background: linear-gradient(180deg, #5fbf6a, #2f8a5a);
  box-shadow:
    inset 0 3px 0 #ffffff55,
    inset 0 -6px 0 #1c5a3a,
    0 6px 12px #0007;
  transition: transform 0.15s var(--ease-spring);
}
.lvl:active:not(:disabled) {
  transform: translateY(3px) scale(0.95);
  box-shadow:
    inset 0 3px 0 #ffffff44,
    inset 0 -2px 0 #1c5a3a,
    0 2px 6px #0007;
}
.lvl.done {
  background: linear-gradient(180deg, #7ff6ea, #22b7aa);
  box-shadow:
    inset 0 3px 0 #ffffff66,
    inset 0 -6px 0 #0d6b65,
    0 6px 12px #0007;
  color: #083a36;
}
.lvl.cur {
  background: linear-gradient(180deg, #ffe08a, #f6a81f);
  box-shadow:
    inset 0 3px 0 #fff9,
    inset 0 -6px 0 #a35a06,
    0 0 0 4px #ffc65a55,
    0 0 24px #ffc65a99;
  color: #4a2300;
  animation: curPulse 1.6s ease-in-out infinite;
}
@keyframes curPulse {
  50% {
    box-shadow:
      inset 0 3px 0 #fff9,
      inset 0 -6px 0 #a35a06,
      0 0 0 8px #ffc65a22,
      0 0 34px #ffc65acc;
  }
}
.lvl.lock {
  background: linear-gradient(180deg, #2c503e, #1b3b2a);
  box-shadow:
    inset 0 2px 0 #ffffff14,
    inset 0 -5px 0 #0f2419,
    0 4px 8px #0006;
  color: #5f7a6a;
  cursor: default;
}
.lvl .num {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.lvl .lst {
  position: absolute;
  bottom: 7%;
  display: flex;
  gap: 2px;
}
.lvl .lst i {
  width: clamp(9px, 2.4vw, 13px);
  height: clamp(9px, 2.4vw, 13px);
  background: #0d5a55;
  clip-path: polygon(
    50% 0,
    63% 35%,
    100% 38%,
    72% 61%,
    81% 100%,
    50% 78%,
    19% 100%,
    28% 61%,
    0 38%,
    37% 35%
  );
}
.lvl .lst i.on {
  background: #ffd25e;
}
.lvl.done .num {
  margin-top: -14%;
}
.lvl .crown {
  position: absolute;
  top: -14%;
  right: -10%;
  width: 42%;
  height: 42%;
  color: #ffd25e;
  filter: drop-shadow(0 2px 2px #0008);
}
.lvl .crown .ic,
.lvl .crown img {
  width: 100%;
  height: 100%;
}
.chestTile {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: clamp(56px, 13vw, 72px);
  margin-top: 4px;
  padding: 0 16px;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 0%, #2f8a5a, #164238 75%);
  box-shadow:
    inset 0 2px 0 #ffffff22,
    inset 0 0 0 1.5px #ffc65a33,
    0 6px 14px #0006;
}
.chestTile img,
.chestTile > .ic {
  height: 128%;
  width: auto;
  aspect-ratio: 1;
  object-fit: contain;
  margin: -8% 0 -6%;
  filter: drop-shadow(0 4px 6px #0008);
}
.chestTile span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.chestTile b {
  font: 800 1.05rem var(--font-t);
  color: var(--gold);
}
.chestTile small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--lav2);
  font-weight: 800;
}
.chestTile small .ic {
  width: 15px;
  height: 15px;
  color: #ffd25e;
}
.chestTile:not(.opened) img {
  animation: letter 2.4s ease-in-out infinite;
}
.chestTile.opened {
  box-shadow:
    inset 0 0 0 2px #ffc65a,
    0 0 18px #ffc65a66;
}
.lvlBo {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transition:
    left 0.32s var(--ease-out),
    top 0.32s var(--ease-out);
}
.lvlBo .bo {
  --bo: clamp(54px, 13vw, 76px);
}
.levels .mapPlay {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--sab) + 14px);
  width: min(86vw, 360px);
  z-index: 5;
}
.levels .mapPlay:active {
  transform: translateX(-50%) translateY(3px) scale(0.97);
}
@media (min-aspect-ratio: 5/4) and (max-height: 560px) {
  .levels {
    padding-bottom: calc(var(--sab) + 8px);
    gap: 4px;
  }
  .levels > * {
    width: min(100%, 640px);
  }
  .levels .topbar {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 6px;
    width: auto;
  }
  .levels > .worldHead {
    width: min(100% - 260px, 440px);
  }
  .worldTitle {
    padding: 4px 10px;
  }
  .worldTitle span {
    display: none;
  }
  .levelGrid {
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
    padding-top: 44px;
  }
  .lvl {
    font-size: 1rem;
  }
  .chestTile {
    grid-column: 1 / 7;
    justify-content: flex-start;
    height: 46px;
  }
  .levels .mapPlay {
    left: auto;
    right: 12px;
    transform: none;
    width: auto;
    min-height: 46px;
    font-size: 1rem;
  }
}

/* iteration 2 polish */
@media (min-height: 651px) {
  .modalBo.big {
    height: 200px;
  }
  .modalBo.big .bo {
    --bo: 150px;
  }
}
.dailyPlay {
  font-size: 1.05rem;
  white-space: nowrap;
}
.modeCard {
  width: min(100%, 560px) !important;
}
.modeCard .modalBo.big .bo {
  --bo: 160px;
}

/* short screens (phones lying down): the victory card goes side by side so the buttons are always on screen */
@media (max-height: 560px) {
  #modal {
    padding-top: calc(var(--sat) + 8px);
    padding-bottom: calc(var(--sab) + 8px);
  }
  #modal > .panel.victory {
    width: min(720px, 100%);
    display: grid;
    grid-template-columns: 190px 1fr;
    column-gap: 18px;
    row-gap: 6px;
    align-items: center;
    padding: 14px 18px;
    grid-template-areas: 'bo title' 'bo sub' 'stars meta' 'stars extra' 'stars row';
  }
  .victory .winTitle {
    grid-area: title;
    font-size: 1.6rem;
    margin: 0;
  }
  .victory .modalBo,
  .victory .modalBo.big {
    grid-area: bo;
    height: 120px;
    margin: 0;
  }
  .victory .modalBo .bo,
  .victory .modalBo.big .bo {
    --bo: 96px;
  }
  .victory .stars {
    grid-area: stars;
    margin: 0;
    align-self: start;
  }
  .victory .stars span {
    width: 40px;
    height: 40px;
  }
  .victory .stars span:nth-child(2) {
    width: 48px;
    height: 48px;
  }
  .victory .winSub {
    grid-area: sub;
    margin: 0;
  }
  .victory .winMeta {
    grid-area: meta;
    margin: 0;
  }
  .victory .winExtra {
    grid-area: extra;
    margin: 0;
  }
  .victory > .row {
    grid-area: row;
  }
  #modal > .panel {
    max-height: 100%;
    padding: 14px 18px;
  }
}

/* critic round 2: quieter locks and stars, readable cards, no black disabled blobs */
.lvl .lst i {
  background: #ffffff38;
}
.lvl.done .lst i {
  background: #0b4f4b66;
}
.lvl .lst i.on,
.lvl.done .lst i.on {
  background: #ffd25e;
  filter: drop-shadow(0 0 2px #ffc65a);
}
.levelPanel {
  flex: 0 1 auto;
}
.btn[disabled],
.btn.off {
  filter: none;
  opacity: 0.38;
}
.card .th {
  flex: none;
  margin-bottom: 6px;
}
.card b {
  min-height: 2.4em;
  align-items: flex-start;
  text-align: center;
  justify-content: center;
}
@media (max-width: 520px) {
  .tabs {
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
    mask-image: linear-gradient(90deg, #000 86%, transparent);
  }
}
/* shop previews sit in a round medallion, so the cropped head reads as a portrait and never touches the name */
.card .th {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #2f6e4e, #153b34 72%);
  box-shadow:
    inset 0 0 0 2px #ffffff1c,
    inset 0 -6px 12px #0006;
}
.card .th svg {
  overflow: hidden;
  width: 92%;
  height: 92%;
  margin-top: 8%;
}
.card.r-legendary .th {
  box-shadow:
    inset 0 0 0 2px #ffd25e88,
    inset 0 -6px 12px #0006;
}
.card .helperTh,
.card.help .th {
  background: radial-gradient(circle at 50% 38%, #2f6e4e, #153b34 72%);
}

/* victory: a lighter veil so the golden board shows behind the card; focus rings only for keyboard users */
#modal:has(.victory) {
  background: #07160fa0;
  backdrop-filter: blur(2px);
}
.victory .btn:focus:not(:focus-visible) {
  outline: none;
}
/* critic round 3: trophies won are small gold chips that pop in one by one after the stars, not full-width bars */
.winExtra {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.winLine {
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
}
.winLine.new {
  background: linear-gradient(180deg, #356b50, #1f4934);
  color: #ffe08a;
  box-shadow:
    inset 0 0 0 1.5px #ffc65a88,
    0 0 12px #ffc65a33;
  animation: popIn 0.4s var(--ease-spring) both;
  animation-delay: 1.3s;
}
.winLine.new:nth-child(2) {
  animation-delay: 1.42s;
}
.winLine.new:nth-child(3) {
  animation-delay: 1.54s;
}
.winLine.new:nth-child(n + 4) {
  animation-delay: 1.66s;
}
.winLine .ic,
.winLine img {
  width: 20px;
  height: 20px;
}

/* critic round 3: trophy cards grow with their text, glows have room, the locked future is just dimmer */
.lvl.lock {
  color: #5d5478;
}
/* rows sized by their content: in a fixed-height scroller, auto rows would stay at the cards' min-height and clip them */
.troBody {
  padding: 24px 24px 32px;
  grid-auto-rows: max-content;
}
.ach .achTx small {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ach .achTx {
  flex: none;
}
.ach .achTx b {
  line-height: 1.15;
  margin-bottom: 4px;
}
/* daily on a phone lying down: streak and button on the left, the month on the right, everything above the fold */
@media (min-aspect-ratio: 6/5) and (max-height: 560px) {
  .daily {
    display: grid;
    grid-template-columns: minmax(0, 330px) minmax(0, 440px);
    grid-template-rows: auto auto 1fr;
    justify-content: center;
    column-gap: 16px;
    row-gap: 10px;
    align-items: start;
  }
  .daily > * {
    width: auto;
  }
  .daily > .topbar {
    grid-column: 1 / -1;
  }
  .dailyHero {
    grid-column: 1;
    grid-row: 2;
    padding: 10px 12px;
  }
  .dailyBo {
    width: 72px;
    height: 84px;
  }
  .dailyBo .bo {
    --bo: 66px;
  }
  .flame,
  .flame .ic {
    width: 52px;
    height: 52px;
  }
  .daily > .dailyPlay,
  .daily > .dailyDone {
    grid-column: 1;
    grid-row: 3;
    width: 100%;
  }
  .daily > .cal {
    grid-column: 2;
    grid-row: 2 / 4;
    padding: 10px 12px;
  }
  .calHead {
    margin-bottom: 4px;
  }
  .calHead .btn.round {
    width: 34px;
    min-height: 34px;
  }
  .calGrid {
    gap: 4px;
  }
  .day {
    aspect-ratio: auto;
    height: 30px;
    border-radius: 9px;
    font-size: 0.85rem;
  }
  .day.done i .ic {
    width: 18px;
    height: 18px;
  }
}
/* level select: no ghost arrows; in portrait the 30 tiles + chest fit above the button, and a scroll (if any) fades out */
.worldHead .btn[disabled] {
  visibility: hidden;
}
.levelPanel {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 14px), transparent);
}
@media (max-aspect-ratio: 5/4) {
  .levelGrid {
    padding-top: 46px;
    gap: clamp(8px, 2.2vw, 16px);
  }
  .levelPanel {
    padding: 14px 12px 16px;
  }
  .chestTile {
    height: 52px;
    margin-top: 0;
  }
  .worldTitle span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
/* phones lying down: the panel runs to the bottom and the button sits inside its last row, beside the chest */
@media (min-aspect-ratio: 5/4) and (max-height: 560px) {
  .levelPanel {
    flex: 1 1 auto;
    padding: 12px 14px 8px;
  }
  .levels .mapPlay {
    right: calc(max(12px, (100vw - 640px) / 2) + 14px);
    bottom: calc(var(--sab) + 16px);
    min-height: 46px;
  }
}
/* shop previews: the real Bo in the medallion, fading out at the bottom instead of a hard cut */
.card .th svg.bo {
  width: 100%;
  height: 100%;
  margin-top: 4%;
  overflow: visible;
  -webkit-mask-image: linear-gradient(#000 80%, transparent);
  mask-image: linear-gradient(#000 80%, transparent);
}

/* ---------------------------------------------------------------- critic round 4 */
/* relax / endless on short screens: a small Bo so the size tiles and the play button always fit */
.modes {
  overflow-y: auto;
}
@media (max-height: 560px) {
  .modeCard {
    gap: 8px;
  }
  .modeCard .modalBo.big {
    height: 70px;
  }
  .modeCard .modalBo.big .bo {
    --bo: 64px;
  }
}
.size {
  background: #244e39;
  box-shadow:
    inset 0 2px 0 #ffffff1f,
    inset 0 0 0 1.5px #ffffff1a;
}
/* text that carries information is never cut */
.ach .achTx small {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
@media (max-aspect-ratio: 5/4) {
  .worldTitle span {
    -webkit-line-clamp: 3;
    font-size: 0.78rem;
  }
}
/* daily: past days you missed step back; in portrait the content sits in the middle of the screen */
.day.missed {
  opacity: 0.45;
}
.flame:not(.on) {
  color: #457d64;
}
.dailyInfo small.coins {
  text-wrap: balance;
}
@media (max-aspect-ratio: 6/5) {
  .daily > .dailyHero {
    margin-top: auto;
  }
  .daily > .dailyPlay,
  .daily > .dailyDone {
    margin-bottom: auto;
  }
}
/* map: locked tiles a step lighter, the chest strip shows the world's star progress */
.lvl.lock {
  background: linear-gradient(180deg, #305743, #224433);
}
.chestTile {
  position: relative;
  overflow: hidden;
}
.chestTile > * {
  position: relative;
}
/* shop: the tab row and the item grid fade at their edges instead of cutting */
.shop .tabs {
  -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent 99%);
  mask-image: linear-gradient(90deg, #000 80%, transparent 99%);
}
@media (min-width: 521px) {
  .shop .tabs {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.shop .itemGrid {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
  padding-bottom: 18px;
}
.victory > .row {
  margin-top: 6px;
}
/* the shop greeting sits inside the mirror, not on its gold frame */
.shop .bubble {
  margin-top: 24px;
}
/* tutorial's last step shows the tool dock: the skip / counter pill moves up so the two don't touch */
@media (max-aspect-ratio: 6/5) {
  .lesson[data-tutorial-stage='7'] .coach {
    bottom: calc(var(--sab) + 116px);
  }
}

/* ---------------------------------------------------------------- critic round 5 */
/* victory: empty star sockets keep their size; the verdict appears once the stars have landed */
.stars span:not(.in) {
  transform: scale(0.85);
  opacity: 0.3;
}
.victory .winSub {
  animation: fadeIn 0.35s ease 1.2s both;
}
/* phones lying down: Bo on the left, everything else in one centred column on the right */
@media (max-height: 560px) {
  #modal > .panel.victory {
    grid-template-columns: 180px 1fr;
    grid-template-areas: 'bo title' 'bo stars' 'bo sub' 'bo meta' 'bo extra' 'bo row';
    justify-items: center;
    align-items: center;
  }
  .victory .modalBo,
  .victory .modalBo.big {
    height: 150px;
  }
  .victory .modalBo .bo,
  .victory .modalBo.big .bo {
    --bo: 120px;
  }
  .victory .stars {
    align-self: center;
  }
}

/* map: the chest's star progress is a slim bar under the count; the strip never stretches across a desktop */
.chestTile {
  justify-self: center;
  width: min(100%, 460px);
}
.chestTile .cbar {
  display: block;
  width: 120px;
  height: 6px;
  margin-top: 3px;
  border-radius: 3px;
  background: #08160faa;
  box-shadow: inset 0 0 0 1px #ffc65a44;
  overflow: hidden;
}
.chestTile .cbar i {
  display: block;
  height: 100%;
  width: calc(var(--p) * 100%);
  border-radius: 3px;
  background: linear-gradient(90deg, #ffe08a, #f6a81f);
}
.topbar .chip.stars {
  color: #ffe08a;
}
/* daily: future days are just numbers; missed days keep their tile but step back; the flame at 0 is an outline */
.day.future {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #ffffff10;
  opacity: 0.5;
}
.day.missed {
  opacity: 0.55;
}
.flame:not(.on) .ic {
  color: transparent;
  stroke: #82bfa1;
  stroke-width: 1.4;
}
.flame:not(.on) b {
  color: #c1f6dc;
  text-shadow: none;
}
/* menus' corner controls sit in the screen corners on every screen, like home and play */
.daily > .topbar,
.modes > .topbar,
.trophies > .topbar {
  width: 100%;
}
/* shop: the grid fades out well before the info bar */
.shop .itemGrid {
  -webkit-mask-image: linear-gradient(#000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 30px), transparent);
  padding-bottom: 30px;
}
@media (max-width: 520px) {
  .shop .tabs .tab {
    padding-left: 11px;
    padding-right: 11px;
    font-size: 0.88rem;
  }
}
.ach .achIc {
  position: relative;
}
.achEm {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #173325;
  box-shadow:
    0 0 0 2px #ffc65a88,
    0 3px 6px #0008;
  color: #ffe08a;
}
.achEm .ic,
.achEm img {
  width: 18px !important;
  height: 18px !important;
}
.ach:not(.done):not(.claimed) .achEm {
  filter: none;
  opacity: 0.85;
}

/* ---------------------------------------------------------------- wing chest ceremony */
.chestCer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(420px, 92vw);
}
.cerStage {
  position: relative;
  width: 210px;
  height: 190px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.cerChest {
  position: relative;
  width: 170px;
  height: 170px;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px #0009);
  animation: cerIdle 1.6s ease-in-out infinite;
}
.cerChest.hop {
  animation: cerHop 0.28s ease;
}
@keyframes cerIdle {
  50% {
    transform: translateY(-4px) rotate(-1.5deg);
  }
}
@keyframes cerHop {
  30% {
    transform: translateY(-14px) rotate(-6deg) scale(1.04, 0.96);
  }
  60% {
    transform: translateY(0) rotate(5deg) scale(0.96, 1.04);
  }
}
.cerRays {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    #ffe08a00 0 6%,
    #ffe08a99 9%,
    #ffe08a00 12% 22%,
    #ffe08a99 25%,
    #ffe08a00 28% 38%,
    #ffe08a99 41%,
    #ffe08a00 44% 54%,
    #ffe08a99 57%,
    #ffe08a00 60% 70%,
    #ffe08a99 73%,
    #ffe08a00 76% 86%,
    #ffe08a99 89%,
    #ffe08a00 92%
  );
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  mask-image: radial-gradient(circle, #000 20%, transparent 68%);
}
.cerStage.open .cerRays {
  animation:
    cerRays 6s linear infinite,
    fadeIn 0.4s ease both;
  opacity: 1;
}
.cerStage.open .cerChest {
  animation: cerOpen 0.6s var(--ease-spring) both;
  filter: drop-shadow(0 0 24px #ffd56a) drop-shadow(0 10px 14px #0009);
}
@keyframes cerRays {
  to {
    transform: rotate(360deg);
  }
}
@keyframes cerOpen {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.18) translateY(-10px);
  }
  100% {
    transform: scale(1.06);
  }
}
.cerLoot {
  display: flex;
  gap: 22px;
  justify-content: center;
  min-height: 64px;
}
.cerLoot > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  animation: popIn 0.45s var(--ease-spring) both;
}
.cerLoot > div:nth-child(2) {
  animation-delay: 0.25s;
}
.cerLoot .coin-ic,
.cerLoot .artIcon,
.cerLoot .ic {
  width: 40px;
  height: 40px;
}
.cerLoot b {
  font: 800 1.4rem/1 var(--font-t);
  color: #ffe08a;
}
.cerLoot small {
  color: var(--lav2);
  font-size: 0.8rem;
}
.chestCer .btn[hidden] {
  display: none;
}
.cerStage {
  outline: none;
  border-radius: 24px;
}
.cerStage:focus-visible {
  outline: none;
} /* it opens by itself too; no ring on the chest */
/* short screens (phones lying down): a smaller chest so the button always fits */
@media (max-height: 560px) {
  .chestCer {
    gap: 2px;
    padding: 10px 16px !important;
  }
  .chestCer .winTitle {
    font-size: 1.5rem;
    margin: 0;
  }
  .cerStage {
    width: 150px;
    height: 120px;
  }
  .cerChest {
    width: 112px;
    height: 112px;
  }
  .chestCer .winSub {
    margin: 0 0 2px;
  }
  .cerLoot {
    min-height: 54px;
    gap: 18px;
  }
  .cerLoot .coin-ic,
  .cerLoot .artIcon,
  .cerLoot .ic {
    width: 30px;
    height: 30px;
  }
  .cerLoot b {
    font-size: 1.15rem;
  }
}
/* victory: a small share button under the time / reward */
.victory .winShare {
  margin: -4px auto 10px;
  min-height: 36px;
  font-size: 0.9rem;
}
.victory .winShare .ic {
  width: 18px;
  height: 18px;
}
@media (max-height: 560px) {
  .victory .winShare {
    grid-area: meta;
    align-self: end;
    justify-self: end;
    margin: 0;
  }
}
.cerItem .cerThumb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  background: radial-gradient(circle at 50% 38%, #2f6e4e, #153b34 72%);
  box-shadow: inset 0 0 0 2px #ffd25e88;
}
.cerItem .cerThumb svg {
  width: 100%;
  height: 100%;
  margin-top: 4%;
}
.cerLoot > div:nth-child(3) {
  animation-delay: 0.5s;
}
@media (max-height: 560px) {
  .cerItem .cerThumb {
    width: 40px;
    height: 40px;
  }
}
/* long words in any language: item names hyphenate inside their card; the daily button may take two lines lying down */
.card b {
  hyphens: auto;
  overflow-wrap: anywhere;
}
@media (min-aspect-ratio: 6/5) and (max-height: 560px) {
  .daily > .dailyPlay {
    white-space: normal;
    line-height: 1.15;
    font-size: 1rem;
    padding-top: 8px;
    padding-bottom: 10px;
  }
}

/* wardrobe tabs: one liquid-glass bar, five equal segments, an icon over each label; the open one is a brighter pane */
html .screen.shop .tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 5px;
  overflow: visible;
  border-radius: 22px;
  background: linear-gradient(160deg, #ffffff26, #ffffff0a 50%, #ffffff17);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  backdrop-filter: blur(16px) saturate(170%);
  border: 1px solid #ffffff40;
  box-shadow:
    inset 0 1px 0 #ffffff80,
    0 8px 22px #0818104d;
  -webkit-mask-image: none;
  mask-image: none;
}
html .screen.shop .tabs > .tab {
  margin: 0;
}
html .screen.shop .tabs .tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 60px;
  padding: 6px 3px;
  border: 0;
  border-radius: 17px;
  background: transparent;
  box-shadow: none;
  color: #e8f4efc4;
  font: 800 0.78rem/1.1 var(--font);
  text-align: center;
  text-wrap: balance;
  overflow-wrap: anywhere;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}
html .screen.shop .tabs .tab .ic {
  width: 34px;
  height: 34px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px #1e372b44);
}
html .screen.shop .tabs .tab:hover {
  background: #ffffff14;
  color: #fff;
}
html .screen.shop .tabs .tab.on {
  background: linear-gradient(160deg, #ffffff5c, #ffffff24);
  color: #fff;
  text-shadow: 0 1px 2px #08181066;
  box-shadow:
    inset 0 1px 0 #ffffffd0,
    inset 0 -1px 0 #ffffff33,
    0 4px 12px #08181040;
}
html .screen.shop .tabs .tab:active {
  transform: scale(0.96);
}
html .screen.shop .tabs .tab:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* an item being tried on (not yet worn) keeps a hanger badge, so the outfit across tabs stays readable */
.card .tag.try {
  background: #fffffff0;
  color: #305443;
}
.card.try:not(.sel) {
  box-shadow: inset 0 0 0 2px #ffffff70;
}
.tabFrog {
  display: inline-block;
  width: 34px;
  height: 34px;
}
.tabFrog svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* End of src/styles/screens.css */

/* End of dist-static/assets/screens-BQKn87Re.css */