/* Tira Latas: a fairground can stall look on top of the shared Pop menu and HUD. */
:root {
  --tl-ink: #1d2340;
  --tl-cream: #fff4dc;
  --tl-red: #e8343f;
  --tl-gold: #ffd23f;
}
html,
body {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 220, 160, 0.45), rgba(255, 220, 160, 0) 60%),
    linear-gradient(180deg, #2d6fd6 0%, #1d4fa8 55%, #14357a 100%);
}

/* ---------- Menu ---------- */
.pop-menu {
  padding-top: 64px;
  background: none;
}
.pop-menu > .pop-deco {
  display: none;
}
.pop-menu > .tl-deco {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100%;
  min-height: 720px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.tl-deco i {
  position: absolute;
  display: block;
}
.tl-awning {
  left: 0;
  right: 0;
  top: 0;
  height: 40px;
  background: repeating-linear-gradient(90deg, var(--tl-red) 0 40px, var(--tl-cream) 40px 80px);
  box-shadow: inset 0 -8px 10px rgba(80, 0, 20, 0.18);
}
.tl-scallops {
  left: 0;
  right: 0;
  top: 40px;
  height: 20px;
  background:
    radial-gradient(circle at 20px 0, var(--tl-red) 19px, rgba(0, 0, 0, 0) 20px) 0 0 / 80px 20px repeat-x,
    radial-gradient(circle at 60px 0, var(--tl-cream) 19px, rgba(0, 0, 0, 0) 20px) 0 0 / 80px 20px repeat-x;
  filter: drop-shadow(0 4px 3px rgba(10, 20, 60, 0.35));
}
.tl-bulb {
  top: 30px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #fff7c2;
  box-shadow:
    0 0 0 2px rgba(120, 80, 10, 0.35),
    0 0 14px 4px rgba(255, 230, 120, 0.8);
  animation: tl-blink 1.2s steps(2, jump-none) infinite;
}
.tl-flags {
  left: -5%;
  right: -5%;
  top: 96px;
  height: 46px;
  background:
    conic-gradient(from 150deg at 50% 100%, rgba(0, 0, 0, 0) 0 60deg, rgba(0, 0, 0, 0) 0) 0 0 / 56px 46px,
    linear-gradient(90deg, #ffd23f 0 14%, #22a861 14% 28%, #ff7a2a 28% 42%, #e8343f 42% 56%, #8e5bd8 56% 70%, #fff4dc 70% 84%, #2fb5ff 84% 100%) 0 0 / 392px 100%;
  -webkit-mask: linear-gradient(to bottom left, #000 50%, transparent 50%) 0 0 / 28px 46px repeat-x,
    linear-gradient(to bottom right, #000 50%, transparent 50%) 28px 0 / 28px 46px repeat-x;
  mask:
    linear-gradient(to bottom left, #000 50%, transparent 50%) 0 0 / 56px 46px repeat-x,
    linear-gradient(to bottom right, #000 50%, transparent 50%) 28px 0 / 56px 46px repeat-x;
  opacity: 0.35;
  transform: rotate(-2deg);
}

.pop-logo {
  width: 150px;
  height: 136px;
  font-size: 0;
  background: radial-gradient(circle, rgba(255, 240, 180, 0.55) 0%, rgba(255, 240, 180, 0) 64%);
  filter: drop-shadow(0 10px 12px rgba(10, 20, 60, 0.4));
}
.pop-logo svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pop-title {
  margin-top: -2px;
  font-size: clamp(44px, 12.5vw, 66px);
  line-height: 1;
  letter-spacing: -0.5px;
  color: #fffef4;
  --ol: #7a1424;
  text-shadow:
    3px 0 0 #7a1424,
    -3px 0 0 #7a1424,
    0 3px 0 #7a1424,
    0 -3px 0 #7a1424,
    2px 2px 0 #7a1424,
    -2px 2px 0 #7a1424,
    2px -2px 0 #7a1424,
    -2px -2px 0 #7a1424,
    0 7px 0 #7a1424,
    3px 7px 0 #7a1424,
    -3px 7px 0 #7a1424,
    0 12px 16px rgba(10, 20, 60, 0.5);
}
.pop-how {
  max-width: 450px;
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 18px;
  background: rgba(10, 25, 80, 0.45);
  font-size: 15.5px;
  line-height: 1.3;
}
.pop-reto-row {
  width: 100%;
  max-width: 460px;
  flex-wrap: nowrap;
  gap: 12px;
  margin-top: 14px;
}
.pop-reto-row .pop-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 58px;
  padding: 8px 14px;
  font-size: 21px;
  white-space: nowrap;
  color: var(--tl-ink);
}
.pop-btn.pop-reto {
  flex-grow: 1.25;
  font-size: 22px;
}
.pop-btn.ghost {
  background: linear-gradient(180deg, #ffffff, var(--tl-cream));
  box-shadow:
    inset 0 2px 0 #fff,
    0 5px 0 rgba(10, 20, 60, 0.45),
    0 8px 16px rgba(10, 20, 60, 0.3);
}
.pop-reto-how {
  font-size: 15px;
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0, 10, 40, 0.6);
}
.pop-total {
  margin: 2px 0 6px;
  padding: 4px 22px;
  background: rgba(10, 20, 60, 0.45);
  font-size: 20px;
}
.tl-card {
  margin: 0 0 14px;
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--tl-cream);
  color: var(--tl-ink);
  font-size: 15.5px;
  font-weight: 700;
  box-shadow: 0 4px 0 rgba(10, 20, 60, 0.35);
}
.tl-card b {
  color: var(--tl-red);
}
.pop-levels {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 460px;
}
.tl-world {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 6px 0 -2px;
  padding: 3px 18px;
  border-radius: 12px;
  background: var(--tl-red);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.15),
    0 3px 0 rgba(10, 20, 60, 0.4);
}
.tl-world[data-world="1"] {
  background: #8a2fc9;
}
.tl-world[data-world="2"] {
  background: #232a6b;
  box-shadow:
    0 0 0 2px #ff4fd8,
    0 3px 0 rgba(10, 20, 60, 0.4);
}
.pop-level {
  position: relative;
  min-height: 104px;
  padding-bottom: 26px;
  border-radius: 22px;
  background:
    repeating-linear-gradient(90deg, rgba(232, 52, 63, 0.09) 0 12px, rgba(0, 0, 0, 0) 12px 24px),
    linear-gradient(180deg, #ffffff 0%, var(--tl-cream) 62%, #f2ddb5 100%);
  box-shadow:
    inset 0 -3px 0 rgba(150, 100, 40, 0.3),
    0 5px 0 rgba(10, 20, 60, 0.5),
    0 8px 14px rgba(10, 20, 60, 0.3);
  color: var(--tl-ink);
  font-size: 36px;
}
.pop-level[data-world="1"] {
  background:
    repeating-linear-gradient(90deg, rgba(138, 47, 201, 0.09) 0 12px, rgba(0, 0, 0, 0) 12px 24px),
    linear-gradient(180deg, #ffffff 0%, #fbf0ff 62%, #ecd6f7 100%);
}
.pop-level[data-world="2"] {
  background:
    repeating-linear-gradient(90deg, rgba(31, 209, 193, 0.1) 0 12px, rgba(0, 0, 0, 0) 12px 24px),
    linear-gradient(180deg, #ffffff 0%, #eef3ff 62%, #d6def7 100%);
}
.pop-level small {
  margin-top: 2px;
  color: #b0222d;
  font-size: 12.5px;
}
.tl-par {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--tl-ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.5;
}
.tl-par b {
  color: var(--tl-gold);
}
.pop-level[disabled] {
  padding-bottom: 26px;
  background: rgba(255, 255, 255, 0.16);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15);
  font-size: 30px;
}
.pop-level[disabled] small {
  color: #fff;
  font-size: 13px;
}
.pop-level[disabled] .tl-par {
  background: rgba(10, 20, 60, 0.45);
}
.pop-level.next {
  animation: tl-glow 1.6s ease-in-out infinite;
}
.pop-menu > .pop-row:not(.pop-reto-row) {
  margin-top: 22px;
}
.pop-menu > .pop-row:not(.pop-reto-row) .pop-btn {
  min-width: 190px;
  min-height: 54px;
  font-size: 22px;
}
.pop-foot {
  margin-top: 18px;
  background: var(--tl-cream);
  color: var(--tl-red);
}

/* ---------- Play ---------- */
.pop-play {
  background: #1d2340;
}
.pop-hud {
  margin: 4px 0 0;
  padding: 8px 10px;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  gap: 8px;
  border-radius: 26px;
  background: linear-gradient(180deg, #fffdf4 0%, #f2e2c0 100%);
  box-shadow:
    inset 0 -2px 0 rgba(150, 100, 40, 0.3),
    0 6px 16px rgba(10, 10, 30, 0.45);
}
.pop-icon {
  width: 46px;
  height: 46px;
  color: var(--tl-ink);
  background: #fff;
  box-shadow:
    0 3px 0 rgba(120, 90, 40, 0.3),
    0 4px 10px rgba(60, 40, 20, 0.15);
}
.pop-icon svg {
  width: 22px;
  height: 22px;
}
.pop-hud .pop-icon:last-child {
  border-radius: 14px;
  background: linear-gradient(180deg, #ff5a63, var(--tl-red));
  color: #fff;
  box-shadow:
    inset 0 0 0 3px #fff,
    0 3px 0 rgba(120, 90, 40, 0.3);
}
.pop-lvl {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
  color: var(--tl-ink);
  font-size: 19px;
  text-shadow: none;
}
.pop-lvl > svg {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
}
.pop-lvl > span {
  min-width: 0;
}
.pop-lvl small {
  max-width: 100%;
  font-size: 14px;
  opacity: 0.8;
}
.pop-chips {
  flex-shrink: 0;
  flex-wrap: nowrap;
  gap: 6px;
}
.pop-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 6px;
  font-size: 18px;
  background: #fff;
  color: var(--tl-ink);
  box-shadow:
    0 2px 0 rgba(120, 90, 40, 0.25),
    0 3px 8px rgba(60, 40, 20, 0.12);
}
.pop-chip svg {
  width: 22px;
  height: 22px;
}
.tl-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.tl-chip.low b {
  color: var(--tl-red);
}
.pop-overlay {
  background: rgba(15, 15, 45, 0.5);
}
.tl-verdict {
  display: inline-block;
  margin-bottom: 2px;
  color: var(--tl-red);
  font-size: 1.45em;
}

@keyframes tl-glow {
  50% {
    box-shadow:
      0 0 0 4px var(--tl-gold),
      0 0 22px 6px rgba(255, 220, 80, 0.85),
      0 5px 0 rgba(10, 20, 60, 0.5);
  }
}
@keyframes tl-blink {
  50% {
    background: #ffe48a;
    box-shadow:
      0 0 0 2px rgba(120, 80, 10, 0.35),
      0 0 4px 1px rgba(255, 230, 120, 0.4);
  }
}
@media (max-width: 380px) {
  .pop-hud {
    gap: 5px;
    padding-left: 7px;
    padding-right: 7px;
  }
  .pop-icon {
    width: 40px;
    height: 40px;
  }
  .pop-lvl > svg {
    width: 30px;
    height: 30px;
  }
  .pop-lvl {
    font-size: 17px;
    gap: 4px;
  }
  .pop-lvl small {
    font-size: 12px;
  }
  .pop-chips {
    gap: 4px;
  }
  .pop-chip {
    font-size: 16px;
    padding: 3px 8px 3px 5px;
    gap: 3px;
  }
  .pop-chip svg {
    width: 18px;
    height: 18px;
  }
  .pop-reto-row .pop-btn {
    font-size: 18px;
    padding: 8px 10px;
  }
  .pop-level {
    font-size: 30px;
  }
  .pop-level small {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pop-level.next,
  .tl-bulb {
    animation: none;
  }
}