/* The screens around the game: start, menu, map, collection, daily and the popups. */

.logo {
  width: calc(var(--u) * 78);
  height: auto;
}
.starpill {
  --H: calc(var(--u) * 8.5);
  min-width: calc(var(--u) * 22);
  position: absolute;
  z-index: 3;
}
.corner-tl {
  position: absolute;
  left: calc(var(--u) * 2.5);
  top: calc(var(--u) * 2.5);
  z-index: 3;
}
.corner-tr {
  position: absolute;
  right: calc(var(--u) * 2.5);
  top: calc(var(--u) * 2.5);
  z-index: 3;
}
.screen > .ribbon.head {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * 3);
  translate: -50% 0;
  z-index: 2;
  transition: opacity 0.2s;
}
/* a popup hides the title of the screen behind it (two ribbons on top of each other look like a mistake) */
#stage:has(.pop:not(.out)) .screen > .ribbon.head {
  opacity: 0;
}
.port .screen > .ribbon.head {
  top: calc(var(--u) * 14);
}

/* ---- tap to start ---- */
#boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  cursor: pointer;
  padding: calc(var(--u) * 4) 0;
}
#boot .logo {
  width: calc(var(--u) * 70);
  animation: logo-in 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
.port #boot .logo {
  width: calc(var(--u) * 78);
}
@keyframes logo-in {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
}
#boot .nest {
  position: relative;
  width: calc(var(--u) * 31);
  isolation: isolate;
}
.port #boot .nest {
  width: calc(var(--u) * 60);
}
#boot .nest .hero {
  position: relative;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  animation: snore 3.4s ease-in-out infinite;
}
#boot .nest .lampglow {
  position: absolute;
  left: 50%;
  top: 66%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% -50%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glow), 0.55), transparent);
  animation: breathe 3.4s ease-in-out infinite;
}
@keyframes breathe {
  50% {
    opacity: 0.6;
  }
}
@keyframes snore {
  50% {
    transform: scale(1.02, 0.98);
  }
}
#boot .tap {
  font-size: calc(var(--u) * 8.5);
  animation: tap 1.5s ease-in-out infinite;
}
.port #boot .tap {
  font-size: calc(var(--u) * 9.5);
}
/* (it pulses by size only: a white text that fades lets the deck show through the letters) */
@keyframes tap {
  50% {
    transform: scale(0.94);
  }
}
#boot.go .tap {
  animation: none;
  opacity: 0;
  transition: opacity 0.2s;
}

/* ---- menu ---- */
#menu {
  display: grid;
  align-items: center;
  justify-items: center;
}
.land #menu {
  grid-template-columns: 1.15fr 1fr;
  padding: calc(var(--u) * 6) calc(var(--u) * 8);
}
.port #menu {
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--u) * 16) calc(var(--u) * 4) calc(var(--u) * 12);
}
#menu .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1);
}
.port #menu .brand {
  display: contents;
}
#menu .logo {
  width: calc(var(--u) * 76);
}
#menu .flick {
  width: calc(var(--u) * 50);
  margin-top: calc(var(--u) * -4);
}
.port #menu .flick {
  width: calc(var(--u) * 60);
}
#menu .buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 3);
}
#menu .btn {
  --H: calc(var(--u) * 14.5);
  min-width: calc(var(--u) * 60);
  font-size: calc(var(--u) * 6.2);
  gap: calc(var(--u) * 2.4);
}
#menu .btn img {
  height: calc(var(--H) * 0.56);
}
#menu .btn.big {
  --H: calc(var(--u) * 21);
  min-width: calc(var(--u) * 66);
  font-size: calc(var(--u) * 9.5);
}
#menu .play img {
  height: calc(var(--u) * 8.5);
}
.port #menu .btn {
  --H: calc(var(--u) * 16);
  min-width: calc(var(--u) * 70);
  font-size: calc(var(--u) * 6.8);
}
.port #menu .btn.big {
  --H: calc(var(--u) * 23);
  min-width: calc(var(--u) * 76);
  font-size: calc(var(--u) * 10.5);
}
/* the level sits on a small parchment ribbon hanging from the Play button */
#menu .play {
  position: relative;
  margin-bottom: calc(var(--u) * 3.5);
}
#menu .play .lvl {
  position: absolute;
  left: 50%;
  bottom: calc(var(--H) * -0.24);
  translate: -50% 0;
  --H: calc(var(--u) * 7.2);
  min-width: calc(var(--u) * 34);
  font-size: calc(var(--u) * 3.5);
  -webkit-text-stroke: 0;
}
.port .corner-tl .pill {
  --H: calc(var(--u) * 11);
}

/* ---- map ---- */
#map .world {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  z-index: 3;
  --D: calc(var(--u) * 8);
}
#map .world.prev {
  left: calc(var(--u) * 1.5);
}
#map .world.next {
  right: calc(var(--u) * 1.5);
}
#map svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#map svg path {
  fill: none;
  stroke: #fff0b8;
  stroke-linecap: round;
  filter: drop-shadow(0 0 calc(var(--u) * 0.8) rgba(255, 196, 80, 1));
}
.node {
  position: absolute;
  width: calc(var(--u) * 15.5);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: url(../assets/ui/node-done.webp) center / contain no-repeat;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: calc(var(--u) * 6);
  color: var(--ink);
  transition: transform 0.08s;
}
.port .node {
  width: calc(var(--u) * 17.5);
  font-size: calc(var(--u) * 6.8);
}
.node b {
  margin-top: 22%;
}
.node.lock {
  background-image: url(../assets/ui/node-lock.webp);
  color: #d9cdf5;
  pointer-events: none;
  filter: brightness(0.8) saturate(1.3);
}
.node.lock::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 34%;
  aspect-ratio: 1;
  translate: -50% 0;
  background: url(../assets/ui/lock.webp) center / contain no-repeat;
}
.node.now {
  width: calc(var(--u) * 19);
  z-index: 2;
}
.port .node.now {
  width: calc(var(--u) * 21.5);
}
/* the light under the current level: an element of its own, behind the nodes (inside the node it washed the lantern out) */
.nowglow {
  position: absolute;
  width: calc(var(--u) * 40);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--glow-strong), 0.9), rgba(var(--glow), 0.4) 55%, transparent);
  animation: breathe 1.8s ease-in-out infinite;
}
/* back from a win: a light runs along the path to the next level, and that lantern lights up */
#map .runner {
  position: absolute;
  width: calc(var(--u) * 5.5);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(closest-side, #fff, rgba(var(--glow-strong), 0.9) 45%, transparent);
  transition:
    left var(--travel) ease-in-out,
    top var(--travel) ease-in-out,
    opacity 0.25s;
}
#map.walk .flick,
#map.walk .nowglow {
  transition:
    left var(--travel) ease-in-out,
    top var(--travel) ease-in-out;
}
.node.lit {
  animation: node-lit 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes node-lit {
  0% {
    scale: 0.7;
  }
  55% {
    scale: 1.16;
  }
}
.calm .node.lit {
  animation: none;
}
.node .st {
  position: absolute;
  left: 50%;
  bottom: -16%;
  translate: -50% 0;
  display: flex;
  gap: 1%;
  width: 78%;
  justify-content: center;
}
.node .st img {
  width: 30%;
}
.node:active {
  transform: scale(0.94);
}
#map .flick {
  position: absolute;
  width: calc(var(--u) * 23);
  translate: -50% -112%;
  z-index: 3;
  pointer-events: none;
}
.port #map .flick {
  width: calc(var(--u) * 28);
}
/* Above his lantern only where the sky is free: under a low lantern of the zigzag (landscape; the current lantern has no
   stars under it yet), and at the right of a lantern of the right column (portrait). Centered, he covered the next one. */
#map .flick[data-side='low'] {
  translate: -50% 18%;
}
#map .flick[data-side='right'] {
  translate: -14% -62%;
}
#map .flick[data-side='left'] {
  translate: -30% -112%;
}
.chestbtn {
  position: absolute;
  translate: -50% -50%;
  width: calc(var(--u) * 15);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
.port .chestbtn {
  width: calc(var(--u) * 18);
}
.chestbtn img {
  width: 100%;
}
.chestbtn span {
  margin-top: calc(var(--u) * -1.5);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 2);
  border-radius: 99px;
  background: #fff0c8;
  box-shadow: 0 0 0 calc(var(--u) * 0.4) #c98a2e;
  font-weight: 700;
  font-size: calc(var(--u) * 3);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  white-space: nowrap;
}
.chestbtn span img {
  width: calc(var(--u) * 3.2);
}
.chestbtn.ready img {
  animation: chest 0.9s ease-in-out infinite;
}
@keyframes chest {
  30% {
    rotate: -6deg;
  }
  60% {
    rotate: 6deg;
    scale: 1.08;
  }
}
.chestbtn:not(.ready) {
  pointer-events: none;
}

/* ---- result, pause and the other panels ---- */
.stars3 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: calc(var(--u) * 2);
  height: calc(var(--u) * 18);
}
.stars3 .s {
  position: relative;
  width: calc(var(--u) * 13.5);
  aspect-ratio: 1;
  background: url(../assets/ui/star-dim.webp) center / contain no-repeat;
}
.stars3 .s.mid {
  width: calc(var(--u) * 18);
}
.stars3 .s i {
  position: absolute;
  inset: 0;
  background: url(../assets/ui/star.webp) center / contain no-repeat;
  opacity: 0;
}
.stars3 .s.on i {
  animation: star-hit 0.42s cubic-bezier(0.3, 1.7, 0.5, 1) both;
}
@keyframes star-hit {
  0% {
    opacity: 0;
    scale: 2.6;
    rotate: -25deg;
  }
  55% {
    opacity: 1;
    scale: 0.9;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
/* a ring of light opens behind a star as it lands */
.stars3 .s::before {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: calc(var(--u) * 0.7) solid rgba(var(--glow-strong), 0.95);
  opacity: 0;
  z-index: -1;
}
.stars3 .s.on::before {
  animation: star-ring 0.6s ease-out 0.16s both;
}
@keyframes star-ring {
  0% {
    opacity: 0.95;
    scale: 0.5;
  }
  100% {
    opacity: 0;
    scale: 2.3;
  }
}
.calm .stars3 .s.on::before {
  animation: none;
}
/* a stamp on the result: "New best!" or, in gold, "Perfect!" */
#win .stamp {
  position: absolute;
  right: calc(var(--u) * -2);
  top: calc(var(--u) * 23.5);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 2.2);
  border-radius: calc(var(--u) * 1.6);
  border: calc(var(--u) * 0.6) solid #4a2fb8;
  background: rgba(255, 246, 220, 0.92);
  color: #4a2fb8;
  font-weight: 700;
  font-size: calc(var(--u) * 3.6);
  white-space: nowrap;
  rotate: 8deg;
  pointer-events: none;
  z-index: 3;
  animation: stamp 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) 1.5s both;
}
#win .stamp.gold {
  border-color: #d1921a;
  color: #a8650a;
}
@keyframes stamp {
  from {
    opacity: 0;
    scale: 2.4;
  }
}
.stars3 .s.on .rays {
  animation: rays 0.9s ease-out forwards;
  width: 300%;
}
.plate.fresh {
  gap: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1) calc(var(--u) * 2.2);
  font-size: calc(var(--u) * 3.1);
  line-height: 1.05;
  text-align: center;
}
/* the label takes what the cards leave and breaks only between words; a word that is too long makes fit() shrink the font */
.plate.fresh > span {
  flex: 1 1 0;
}
.plate.fresh .minicards {
  flex: none;
  flex-wrap: nowrap;
}
.plate.fresh .minicard {
  width: calc(var(--u) * 7);
}
#win .panel {
  gap: calc(var(--u) * 1.5);
  padding-top: calc(var(--u) * 9);
}
#win .plate {
  min-height: calc(var(--u) * 7.5);
}
#win .plate.gift {
  background: rgba(255, 224, 130, 0.9);
}
#win .btn.big {
  --H: calc(var(--u) * 13);
}
.land #win .show {
  gap: calc(var(--u) * 1.5);
}
.minicards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 1);
}
.minicard {
  position: relative;
  flex: none;
  width: calc(var(--u) * 8.6);
  aspect-ratio: 360 / 386;
  background: var(--img-card-front) center / 100% 100% no-repeat;
  display: grid;
  place-items: center;
  animation: panel-in 0.35s cubic-bezier(0.3, 1.6, 0.5, 1) backwards;
}
.minicard img {
  width: 64%;
  height: 64%;
  margin-top: 7%;
  object-fit: contain;
}
.minicard.unknown {
  background-image: var(--back, url(../assets/cards/back-1.webp));
  filter: brightness(0.45) saturate(0.6);
}
.minicard.unknown img {
  filter: brightness(0);
  opacity: 0.55;
}
/* the result: the scene stays visible, lanterns keep rising and the mascot cheers beside the panel */
#win::before {
  background: rgba(22, 14, 64, 0.34);
}
/* while the result is on screen the game behind it leaves: only the scene, the rising lanterns and the panel stay */
#game > * {
  transition: opacity 0.3s;
}
#stage:has(#win:not(.out)) #game > * {
  opacity: 0;
}
/* a celebration popup over the game hides the bar at the top, so its ribbon is never on top of the HUD */
#stage:has(.pop:not(.out) > .show) #g-top,
#stage:has(.pop:not(.out) > .show) #g-meter,
#stage:has(#lose:not(.out)) #g-top,
#stage:has(#lose:not(.out)) #g-meter {
  opacity: 0;
}
/* (placed from the corner of the stage, not of the window: on an ultrawide screen it stays with the game) */
#win .logo {
  position: absolute;
  left: calc(var(--sx) + var(--u) * 3);
  top: calc(var(--sy) + var(--u) * 3);
  width: calc(var(--u) * 36);
}
.port #win .logo {
  display: none;
}
.sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.sky i {
  position: absolute;
  bottom: -14%;
  width: calc(var(--u) * 7 * var(--k, 1));
  aspect-ratio: 1;
  background: url(../assets/ui/lantern.webp) center / contain no-repeat;
  animation: float-up linear infinite;
}
@keyframes float-up {
  to {
    transform: translate(var(--drift, 0), -130vh);
  }
}
/* the mascot beside a popup (landscape) or peeking from behind its top (portrait) */
.show > .flick.side {
  position: absolute;
  right: calc(100% - calc(var(--u) * 6));
  top: 30%;
  width: calc(var(--u) * 34);
  z-index: 1;
}
.port .show > .flick.side {
  right: auto;
  left: 50%;
  top: calc(var(--u) * -21);
  translate: -50% 0;
  width: calc(var(--u) * 27);
  z-index: -1;
}
.port .show:has(> .flick.side) {
  margin-top: calc(var(--u) * 18);
}
.calm .sky i {
  animation: none;
  bottom: auto;
  top: var(--rest, 20%);
}
#win .btns,
#lose .btns {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
}
.dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(var(--u) * 0.4);
}
.dots img {
  width: calc(var(--u) * 5.6);
  margin: 0 calc(var(--u) * -0.45);
}
.dots {
  max-width: 100%;
}
.tagged {
  position: relative;
  margin-top: calc(var(--u) * 1.6);
}
.tag {
  position: absolute;
  right: calc(var(--u) * -2.5);
  top: calc(var(--u) * -2.2);
  font-style: normal;
  z-index: 1;
  padding: calc(var(--u) * 0.6) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 2);
  background: var(--good);
  color: #fff;
  font-size: calc(var(--u) * 3);
  font-weight: 700;
  rotate: 6deg;
  box-shadow: 0 0 0 calc(var(--u) * 0.4) #2f7d22;
}
.panel .flick.top {
  position: absolute;
  left: 50%;
  bottom: calc(100% - calc(var(--u) * 7));
  width: calc(var(--u) * 28);
  translate: -50% 0;
  z-index: -1;
}
#lose .panel {
  margin-top: calc(var(--u) * 17);
  isolation: auto;
}
.bigtext {
  font-size: calc(var(--u) * 4.4);
  font-weight: 700;
  text-align: center;
}
.hinttext {
  font-size: calc(var(--u) * 3.6);
  font-weight: 700;
  text-align: center;
  max-width: 90%;
  line-height: 1.25;
}

/* settings */
.setrow {
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--u) * 7) minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--u) * 1.8);
  width: 100%;
  font-weight: 700;
  font-size: calc(var(--u) * 3.8);
  min-height: calc(var(--u) * 8);
}
.setrow img {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
}
.setrow > span {
  line-height: 1.05;
}
.setrow .btn {
  min-width: 0;
  --H: calc(var(--u) * 7.5);
  /* an invisible border answers the finger up to 44 px without making the button look bigger */
  box-sizing: content-box;
  border: 3px solid transparent;
  margin: -3px;
}
.setrow + .setrow {
  border-top: calc(var(--u) * 0.25) solid rgba(160, 110, 50, 0.25);
}
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 2.2);
  border-radius: 99px;
  background: linear-gradient(90deg, #ffc531 var(--v, 50%), #4a2f8f var(--v, 50%));
  box-shadow: 0 0 0 calc(var(--u) * 0.4) #9c6a1c;
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: calc(var(--u) * 5.4);
  height: calc(var(--u) * 5.4);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4c0, #ffb81f 60%, #e08a00);
  box-shadow: 0 0 0 calc(var(--u) * 0.4) #9c6a1c;
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: calc(var(--u) * 5.4);
  height: calc(var(--u) * 5.4);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff4c0, #ffb81f 60%, #e08a00);
  box-shadow: 0 0 0 calc(var(--u) * 0.4) #9c6a1c;
  cursor: pointer;
}
.toggle {
  position: relative;
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 6);
  border-radius: 99px;
  background: #4a2f8f;
  box-shadow: 0 0 0 calc(var(--u) * 0.4) #9c6a1c;
  transition: background 0.15s;
}
.toggle::after {
  content: '';
  position: absolute;
  top: 8%;
  left: 5%;
  height: 84%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffbe8, #f2dfae);
  transition: left 0.15s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.toggle.on {
  background: #ffc531;
}
.toggle.on::after {
  left: 53%;
}
/* language: a list that opens over the panel, right above its row (upwards: the row is the last one of the panel).
   Two columns on a phone held upright, three on a wide screen, so every row is tall enough for a finger. */
.drop .btn {
  gap: calc(var(--H) * 0.12);
}
.drop .caret {
  flex: none;
  width: calc(var(--H) * 0.2);
  height: calc(var(--H) * 0.2);
  border: solid var(--cream);
  border-width: 0 calc(var(--H) * 0.075) calc(var(--H) * 0.075) 0;
  rotate: 45deg;
  translate: 0 -30%;
  transition:
    rotate 0.16s ease-out,
    translate 0.16s ease-out;
}
.drop.open .caret {
  rotate: 225deg;
  translate: 0 20%;
}
.droplist {
  position: absolute;
  left: 50%;
  bottom: calc(100% + var(--u) * 0.6);
  translate: -50% 0;
  z-index: 5;
  display: grid;
  width: max-content;
  grid-template-columns: repeat(2, minmax(calc(var(--u) * 23), auto));
  gap: calc(var(--u) * 0.5) calc(var(--u) * 1);
  padding: calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 3.6);
  background: linear-gradient(#fff7e0, #fbdfae);
  box-shadow:
    0 0 0 calc(var(--u) * 0.5) #efae2e,
    0 0 0 calc(var(--u) * 0.9) #7a4413,
    0 calc(var(--u) * 1.6) calc(var(--u) * 3) rgba(30, 14, 60, 0.5);
  transform-origin: 80% 100%;
  visibility: hidden;
  opacity: 0;
  scale: 0.86;
  transition:
    opacity 0.1s ease-in,
    scale 0.1s ease-in,
    visibility 0s 0.1s;
}
.drop.open .droplist {
  visibility: visible;
  opacity: 1;
  scale: 1;
  transition:
    opacity 0.12s ease-out,
    scale 0.2s cubic-bezier(0.3, 1.5, 0.5, 1);
}
/* the list covers the top of the panel: the title and the close button step out while it is open, so nothing of them
   shows around it. A tap outside the list closes it and brings them back. */
.panel > .ribbon,
.panel > .close {
  transition: opacity 0.12s;
}
.panel:has(.drop.open) > .ribbon,
.panel:has(.drop.open) > .close {
  opacity: 0;
  pointer-events: none;
}
.land .droplist {
  grid-template-columns: repeat(3, minmax(calc(var(--u) * 19), auto));
}
.calm .droplist {
  scale: 1;
  transition: none;
}
.opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1);
  min-height: max(calc(var(--u) * 7.6), 50px); /* 44 px after the panel shrinks to fit */
  padding: 0 calc(var(--u) * 2);
  border-radius: 99px;
  font-weight: 700;
  font-size: calc(var(--u) * 3.4);
  color: var(--ink);
  white-space: nowrap;
}
.opt:active {
  background: rgba(255, 190, 50, 0.5);
}
@media (hover: hover) {
  .opt:not(.on):hover {
    background: rgba(255, 197, 49, 0.32);
  }
}
.opt.on {
  background: linear-gradient(#ffdc6a, #ffb526);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.4) #c97c12;
}
/* the check of the chosen language: the same dark brown as the text (a mask, so it takes the color) */
.opt .mark {
  flex: none;
  width: calc(var(--u) * 3.2);
  height: calc(var(--u) * 3.2);
  background: var(--ink);
  -webkit-mask: url(../assets/ui/check.webp) center / contain no-repeat;
  mask: url(../assets/ui/check.webp) center / contain no-repeat;
}

/* level card */
.thresholds {
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}
.thresholds > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: 700;
  font-size: calc(var(--u) * 3.8);
  padding: calc(var(--u) * 0.8) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 2.5);
  background: rgba(255, 235, 190, 0.75);
}
.thresholds .st {
  display: flex;
}
.thresholds .st img {
  width: calc(var(--u) * 5);
  margin: 0 calc(var(--u) * -0.3);
}
.charges {
  display: flex;
  gap: calc(var(--u) * 5);
}
.charges .power {
  width: calc(var(--u) * 13);
  pointer-events: none;
}
#levelcard .panel {
  gap: calc(var(--u) * 1.8);
}
#levelcard .goals {
  display: flex;
  gap: calc(var(--u) * 1.5);
  width: 100%;
}
#levelcard .goals .plate {
  white-space: nowrap;
  padding: calc(var(--u) * 0.8) calc(var(--u) * 1.5);
  gap: calc(var(--u) * 1);
  font-size: calc(var(--u) * 3.7);
  line-height: 1.05;
  text-align: center;
}
.port #levelcard .goals {
  flex-direction: column;
}
#levelcard .goals .plate img {
  height: calc(var(--u) * 5);
}
#levelcard .btn.big {
  --H: calc(var(--u) * 13);
}

/* mechanic card */
.demo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2.5);
}
.demo .minicard {
  width: calc(var(--u) * 15);
  animation: none;
}
.port .demo {
  gap: calc(var(--u) * 1.4);
}
.port .demo .minicard {
  width: calc(var(--u) * 10.5);
}
.port .demo .arrow {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
}
.demo .arrow {
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  background: url(../assets/ui/round/next.webp) center / contain no-repeat;
}
.demo .minicard.vined::after {
  content: '';
  position: absolute;
  inset: -6%;
  background: url(../assets/ui/vines.webp) center / 100% 100% no-repeat;
}
.demo .minicard.vined::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 36%;
  aspect-ratio: 1;
  translate: -50% 0;
  z-index: 1;
  background: url(../assets/ui/lock.webp) center / contain no-repeat;
}
.demo .minicard.lit {
  box-shadow: 0 0 calc(var(--u) * 2.4) calc(var(--u) * 0.8) rgba(255, 190, 60, 0.95);
  border-radius: 18%;
}
.demo .minicard.moon {
  background-image: var(--img-card-moon);
}
.demo .minicard.moon img {
  filter: var(--shadow-ink);
}
.demo .wind {
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  background: url(../assets/ui/wind.webp) center / contain no-repeat;
}
.demo .bubble {
  position: relative;
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  padding: calc(var(--u) * 1.8);
  border-radius: 50% 50% 50% 12%;
  background: #fff3d6;
  box-shadow: 0 0 0 calc(var(--u) * 0.5) #c98a2e;
}
.demo .bubble img {
  width: 100%;
  height: 100%;
}

/* one big card with light behind it (new Glimmer, collection detail, new world) */
.bigcard {
  position: relative;
  width: calc(var(--u) * 34);
  aspect-ratio: 360 / 386;
  background: var(--img-card-front) center / 100% 100% no-repeat;
  display: grid;
  place-items: center;
  isolation: isolate;
}
/* a warm bloom behind the big pieces of a celebration */
.bigcard::before,
.chestbig::before {
  content: '';
  position: absolute;
  inset: -42%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 196, 80, 0.8), rgba(255, 160, 50, 0.28) 60%, transparent);
}
.bigcard .rays,
.chestbig .rays,
.worldpic .rays {
  width: 290%;
  opacity: 0.9;
}
.bigcard > img {
  width: 64%;
  height: 64%;
  margin-top: 7%;
  object-fit: contain;
}
.worldpic {
  position: relative;
  width: calc(var(--u) * 50);
  aspect-ratio: 1;
  isolation: isolate;
}
.worldpic > i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: 8% 45% / auto 150% no-repeat;
  box-shadow:
    0 0 0 calc(var(--u) * 1.2) var(--gold),
    0 0 0 calc(var(--u) * 1.8) #8a4d12,
    0 calc(var(--u) * 1) calc(var(--u) * 3) var(--shadow);
}
.chestbig {
  position: relative;
  width: calc(var(--u) * 40);
  isolation: isolate;
}
.chestbig > img {
  width: 100%;
}
.rewards {
  display: flex;
  gap: calc(var(--u) * 6);
}
/* each prize jumps out of the chest in an arc and lands in the row (--jx = how far to the side it started) */
.rewards .power {
  width: calc(var(--u) * 15);
  pointer-events: none;
  animation: prize 0.55s cubic-bezier(0.3, 1.3, 0.5, 1) backwards;
}
@keyframes prize {
  0% {
    opacity: 0;
    transform: translate(var(--jx, 0), calc(var(--u) * 16)) scale(0.3);
  }
  55% {
    opacity: 1;
    transform: translate(calc(var(--jx, 0) * 0.3), calc(var(--u) * -6)) scale(1.1);
  }
}
.calm .rewards .power {
  animation-duration: 0.01s;
}
.rewards .power .n {
  position: static;
  margin-top: calc(var(--u) * -2);
  font-size: calc(var(--u) * 3.6);
  background: #fff0c8;
  color: var(--ink);
  box-shadow: 0 0 0 calc(var(--u) * 0.4) #c98a2e;
  padding: 0 calc(var(--u) * 2);
}

/* ---- collection ---- */
#collection {
  display: grid;
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 17) calc(var(--u) * 4) calc(var(--u) * 3);
}
.land #collection {
  grid-template: 'tabs detail' auto 'grid detail' 1fr / 1.9fr 1fr;
}
.port #collection {
  grid-template: 'tabs' auto 'grid' 1fr 'detail' auto / 1fr;
  padding-top: calc(var(--u) * 38);
}
#collection .count {
  --H: calc(var(--u) * 7.5);
  position: absolute;
  top: calc(var(--u) * 5);
  left: calc(50% + var(--u) * 30);
  min-width: calc(var(--u) * 22);
  z-index: 2;
}
.port #collection .count {
  left: 50%;
  translate: -50% 0;
  top: calc(var(--u) * 28);
}
#collection .tabs {
  grid-area: tabs;
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 3);
}
#collection .tab {
  position: relative;
  width: calc(var(--u) * 11);
  aspect-ratio: 1;
  background: url(../assets/ui/node-done.webp) center / contain no-repeat;
  filter: brightness(0.7) saturate(0.7);
  transition:
    filter 0.15s,
    transform 0.15s;
}
#collection .tab.on {
  filter: drop-shadow(0 0 calc(var(--u) * 1.2) rgba(255, 214, 120, 1));
  transform: scale(1.2);
}
#collection .tab.lock {
  background-image: url(../assets/ui/node-lock.webp);
  pointer-events: none;
}
#collection .tab.lock::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 38%;
  aspect-ratio: 1;
  translate: -50% 0;
  background: url(../assets/ui/lock.webp) center / contain no-repeat;
}
#collection .grid {
  grid-area: grid;
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: calc(var(--u) * 1.6);
  place-content: center;
}
.port #collection .grid {
  grid-template-columns: repeat(3, auto);
}
#collection .grid .minicard {
  width: calc(var(--u) * 15.5);
  animation: none;
}
.port #collection .grid .minicard {
  width: calc(var(--u) * 19);
}
#collection .grid .minicard.sel {
  box-shadow:
    0 0 0 calc(var(--u) * 0.5) var(--gold),
    0 0 calc(var(--u) * 3) calc(var(--u) * 0.8) rgba(255, 190, 60, 0.95);
  border-radius: 18%;
}
#collection .detail {
  grid-area: detail;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 6) calc(var(--u) * 3);
  background: var(--img-panel) center / 100% 100% no-repeat;
}
.port #collection .detail {
  flex-direction: row;
  background-image: var(--img-panel-wide);
  padding: calc(var(--u) * 5);
}
#collection .detail .bigcard {
  width: calc(var(--u) * 30);
}
.port #collection .detail .bigcard {
  width: calc(var(--u) * 26);
}
.port #collection .detail .ribbon {
  --H: calc(var(--u) * 9.5);
  min-width: calc(var(--u) * 40);
}

/* ---- daily ---- */
#daily {
  display: grid;
  gap: calc(var(--u) * 3);
  align-items: center;
  justify-items: center;
  padding: calc(var(--u) * 18) calc(var(--u) * 6) calc(var(--u) * 4);
}
.land #daily {
  grid-template-columns: 1.1fr 1fr;
}
.port #daily {
  grid-template-rows: 1fr auto;
  padding-top: calc(var(--u) * 24);
}
#daily .panel {
  animation: none;
  width: 100%;
  max-width: calc(var(--u) * 78);
  padding: calc(var(--u) * 7) calc(var(--u) * 6) calc(var(--u) * 6);
  gap: calc(var(--u) * 1.5);
}
#daily .streak {
  --H: calc(var(--u) * 7.5);
  min-width: calc(var(--u) * 30);
}
#daily .month {
  font-weight: 700;
  font-size: calc(var(--u) * 4);
}
/* only the first letter goes up ("ноябрь 2026 г." must not become "Г.") */
#daily .month::first-letter {
  text-transform: uppercase;
}
#daily .cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: calc(var(--u) * 0.8);
  width: 100%;
}
#daily .cal span {
  position: relative;
  aspect-ratio: 1.15;
  display: grid;
  place-items: center;
  border-radius: calc(var(--u) * 1.4);
  background: rgba(255, 244, 214, 0.9);
  box-shadow: inset 0 0 0 calc(var(--u) * 0.25) rgba(196, 150, 80, 0.6);
  font-weight: 700;
  font-size: calc(var(--u) * 3);
}
#daily .cal span.wd {
  background: none;
  box-shadow: none;
  aspect-ratio: auto;
  font-size: calc(var(--u) * 2.4);
  color: var(--ink-soft);
}
#daily .cal span.none {
  visibility: hidden;
}
#daily .cal span.later {
  opacity: 0.45;
}
#daily .cal span.played::after {
  content: '';
  position: absolute;
  inset: 8% 20% -6%;
  background: url(../assets/ui/lantern.webp) center / contain no-repeat;
}
#daily .cal span.played {
  color: transparent;
}
#daily .cal span.today {
  box-shadow:
    0 0 0 calc(var(--u) * 0.6) var(--gold),
    0 0 calc(var(--u) * 2) rgba(var(--glow-strong), 1);
  background: #fff7df;
  z-index: 1;
}
#daily .side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 1.8);
  position: relative;
}
#daily .mini {
  display: grid;
  gap: calc(var(--u) * 0.7);
  padding: calc(var(--u) * 5) calc(var(--u) * 6.5);
  background: var(--img-panel-wide) center / 100% 100% no-repeat;
}
#daily .mini i {
  width: calc(var(--u) * 5.2);
  aspect-ratio: 360 / 386;
  background: url(../assets/cards/back-1.webp) center / 100% 100% no-repeat;
}
#daily .mini i.hole {
  visibility: hidden;
}
#daily .note {
  font-size: calc(var(--u) * 3);
  line-height: 1.1;
  text-align: center;
  max-width: calc(var(--u) * 56);
}
.land #daily .btn.big {
  --H: calc(var(--u) * 13);
}
/* (on the right of the Play button: on the left he covered the last days of the calendar) */
#daily .flick {
  width: calc(var(--u) * 26);
  position: absolute;
  right: calc(var(--u) * -25);
  bottom: calc(var(--u) * -4);
}
.port #daily .flick {
  position: static;
  width: calc(var(--u) * 24);
}
.port #daily .side {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.port #daily .mini i {
  width: calc(var(--u) * 5);
}

/* End of css/screens.css */