/* HiHe Festa Obby — lobby (main menu), side panels and map list.
   Same rules as joydigi-style.css: everything is in "UI pixels" (min 853×480, scaled as one block),
   every zone is anchored to an edge of the stage so the 3D hero keeps the middle of the screen.
   Frames and buttons are 9-slice images cut from the UI atlas (assets/ui/lobby/joydigi-lobby-*.png). */

:root {
  --joydigi-btn-yellow: url("https://gamehihe.com/gamehihe-play/hihe-festa-obby/assets/ui/lobby/joydigi-lobby-button_yellow.png?v=1792483880-24455");
  --joydigi-btn-royal: url("https://gamehihe.com/gamehihe-play/hihe-festa-obby/assets/ui/lobby/joydigi-lobby-button_royal.png?v=1792483880-25265");
  --joydigi-btn-blue: url("https://gamehihe.com/gamehihe-play/hihe-festa-obby/assets/ui/lobby/joydigi-lobby-button_blue.png?v=1792483880-24078");
  --joydigi-btn-charcoal: url("https://gamehihe.com/gamehihe-play/hihe-festa-obby/assets/ui/lobby/joydigi-lobby-button_charcoal.png?v=1792483880-24808");
  --joydigi-btn-teal: url("https://gamehihe.com/gamehihe-play/hihe-festa-obby/assets/ui/lobby/joydigi-lobby-button_teal.png?v=1792483880-25226");
  --joydigi-btn-white: url("https://gamehihe.com/gamehihe-play/hihe-festa-obby/assets/ui/lobby/joydigi-lobby-button_white.png?v=1792483880-24920");
  --joydigi-btn-lime: url("https://gamehihe.com/gamehihe-play/hihe-festa-obby/assets/ui/lobby/joydigi-lobby-button_lime.png?v=1792483880-26558");
  --joydigi-btn-slate: url("https://gamehihe.com/gamehihe-play/hihe-festa-obby/assets/ui/lobby/joydigi-lobby-button_slate.png?v=1792483880-25422");
  --joydigi-btn-red: url("https://gamehihe.com/gamehihe-play/hihe-festa-obby/assets/ui/lobby/joydigi-lobby-button_red.png?v=1792483880-25940");
  --joydigi-bar-frame: url("https://gamehihe.com/gamehihe-play/hihe-festa-obby/assets/ui/lobby/joydigi-lobby-progress_empty.png?v=1792483880-22466");
  --joydigi-outline:
    -1.5px -1.5px 0 #10204f, 1.5px -1.5px 0 #10204f, -1.5px 1.5px 0 #10204f, 1.5px 1.5px 0 #10204f, 0 2.5px 0 #0a1638;
}

/* ── input routing: the lobby lets the free space through to the canvas (drag = turn the hero) ── */
#joydigi-ui > #joydigi-menu.joydigi-lobby {
  pointer-events: none;
}
#joydigi-ui .joydigi-lobby .joydigi-sheet.joydigi-open,
#joydigi-ui .joydigi-lobby .joydigi-mapselect.joydigi-open {
  pointer-events: auto;
}

/* ── shared pieces ── */
.joydigi-lobby button {
  transition:
    transform 0.12s,
    filter 0.12s;
}
.joydigi-lobby button:active {
  transform: scale(0.94);
}
@media (hover: hover) and (pointer: fine) {
  .joydigi-tile:hover,
  .joydigi-player-card:hover,
  .joydigi-journey-card:hover,
  .joydigi-map-card:hover,
  .joydigi-stars-card:hover,
  .joydigi-mode:not(.joydigi-map-locked):hover,
  .joydigi-shop-pic:hover {
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.08);
  }
  .joydigi-cta:hover {
    filter: brightness(1.06) saturate(1.1);
  }
}
.joydigi-bar {
  position: relative;
  display: block;
  height: 14px;
  border-image: var(--joydigi-bar-frame) 28 fill / 7px / 0 stretch;
}
.joydigi-bar-fill {
  position: absolute;
  left: 3px;
  top: 3px;
  bottom: 3px;
  width: 0;
  max-width: calc(100% - 6px);
  border-radius: 5px;
  background: linear-gradient(180deg, #fff27a, #ffc21a 55%, #f39a0c);
  box-shadow: inset 0 -1px 0 rgba(150, 70, 0, 0.45);
  transition: width 0.4s;
}
.joydigi-badge {
  position: absolute;
  top: -4px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: radial-gradient(circle at 40% 35%, #ff6b6b, var(--joydigi-red) 70%);
  border: 2px solid #fff;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 2px 0 rgba(10, 22, 56, 0.4);
  animation: joydigi-badge 1.6s ease-in-out infinite;
  z-index: 2;
}
@keyframes joydigi-badge {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

/* ── top left: player card ── */
.joydigi-player-box {
  position: absolute;
  left: 12px;
  top: 10px;
  width: 290px;
  height: 82px;
}
.joydigi-player-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 290px;
  height: 64px;
  padding: 0 12px 0 4px;
  border-image: var(--joydigi-btn-royal) 30 fill / 14px / 0 stretch;
  text-align: left;
  filter: drop-shadow(0 3px 0 rgba(10, 22, 56, 0.35));
}
.joydigi-avatar {
  position: relative;
  flex: none;
  width: 60px;
  height: 60px;
  margin-top: -2px;
}
.joydigi-avatar-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.joydigi-avatar-pic {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff, #c9ecff);
  z-index: 1;
}
.joydigi-avatar-pic canvas {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.35) translateY(8%);
}
.joydigi-pc-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.joydigi-pc-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: var(--joydigi-outline);
}
.joydigi-pc-level {
  display: flex;
  align-items: center;
  gap: 4px;
}
.joydigi-pc-level .joydigi-bar {
  flex: 1;
}
.joydigi-pc-level small {
  font-size: 11px;
  font-weight: 700;
  color: #dff1ff;
  text-shadow: 0 1px 0 #10204f;
}
.joydigi-pc-badge {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
}
.joydigi-pc-badge img {
  width: 100%;
  height: 100%;
}
.joydigi-pc-badge b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
  font-size: 12px;
  color: #fff;
  text-shadow: var(--joydigi-outline);
}

/* ── top right: currencies + round buttons ── */
.joydigi-wallet-bar {
  position: absolute;
  top: 16px;
  right: 168px;
  display: flex;
  gap: 8px;
}
.joydigi-pill {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  min-width: 78px;
  padding: 0 12px 0 32px;
  border-image: var(--joydigi-btn-charcoal) 30 fill / 12px / 0 stretch;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-shadow: 0 2px 0 #0a1638;
  pointer-events: auto;
}
.joydigi-pill > img {
  position: absolute;
  left: -6px;
  top: 50%;
  width: 36px;
  height: 36px;
  object-fit: contain;
  transform: translateY(-50%);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
}
.joydigi-pill-plus {
  width: 26px;
  height: 26px;
  margin-left: auto;
  margin-right: -8px;
}
.joydigi-pill-plus img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body.joydigi-free .joydigi-wallet-bar .joydigi-pill:first-child {
  display: none;
}
/* the three round buttons (music, full screen, settings) sit in the corner, a bit smaller */
body.joydigi-in-menu .joydigi-icon-btn {
  top: 13px;
  width: 42px;
  height: 42px;
}
body.joydigi-in-menu #joydigi-mute {
  right: 112px;
}
body.joydigi-in-menu #joydigi-fs-btn {
  right: 62px;
}
body.joydigi-in-menu #joydigi-set-btn {
  right: 12px;
}
body.joydigi-in-menu .joydigi-fs-glyph {
  inset: 9px;
}

/* ── left column: Loja · Personalizar · Recordes ── */
.joydigi-lobby-left {
  position: absolute;
  left: 12px;
  top: 94px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.joydigi-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 92px;
  padding-bottom: 2px;
}
.joydigi-tile > img {
  width: 76px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 3px 0 rgba(10, 22, 56, 0.4));
}
.joydigi-tile > span {
  margin-top: -6px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-shadow: var(--joydigi-outline);
}

/* ── right column: JORNADA + current map ── */
.joydigi-lobby-right {
  position: absolute;
  right: 12px;
  top: 70px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 226px;
}
.joydigi-journey-card {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 6px;
  height: 64px;
  padding: 0 12px 0 6px;
  border-image: var(--joydigi-btn-teal) 30 fill / 14px / 0 stretch;
  text-align: left;
  color: #fff;
  filter: drop-shadow(0 3px 0 rgba(10, 22, 56, 0.35));
}
.joydigi-journey-cup {
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.joydigi-journey-text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  text-shadow: var(--joydigi-outline);
}
.joydigi-journey-text b {
  font-size: 15px;
  letter-spacing: 1px;
}
.joydigi-journey-dots {
  display: flex;
  gap: 3px;
}
.joydigi-journey-dots i {
  flex: 1;
  height: 10px;
  border-radius: 4px;
  background: rgba(8, 30, 60, 0.5);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.joydigi-journey-dots i.joydigi-dot-open {
  background: #7fd8ff;
}
.joydigi-journey-dots i.joydigi-dot-now {
  background: var(--joydigi-yellow);
  box-shadow: 0 0 6px #fff38a;
}
.joydigi-journey-dots i.joydigi-dot-done {
  background: #5ee05c;
}
.joydigi-map-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 7px 7px 6px;
  border-image: var(--joydigi-btn-white) 30 fill / 14px / 0 stretch;
  text-align: left;
  filter: drop-shadow(0 3px 0 rgba(10, 22, 56, 0.35));
}
.joydigi-map-card-pic {
  display: block;
  height: 96px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 -40px 30px -16px rgba(7, 28, 74, 0.85);
}
.joydigi-map-card-tag {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 1px 8px;
  border-radius: 9px;
  background: var(--joydigi-yellow);
  color: var(--joydigi-ink);
  font-size: 11px;
  font-weight: 700;
}
.joydigi-map-card-name {
  position: absolute;
  left: 14px;
  right: 12px;
  top: 78px;
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: var(--joydigi-outline);
}
.joydigi-map-card-info {
  margin: 4px 2px 3px;
  font-size: 11px;
  font-weight: 600;
  color: var(--joydigi-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.joydigi-map-card-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  border-image: var(--joydigi-btn-blue) 30 fill / 11px / 0 stretch;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 #0b3f9c;
}
.joydigi-map-card-go img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* ── bottom row: ESTRELAS · Missões · Presente · Mapas ── */
.joydigi-lobby-bottom {
  position: absolute;
  left: 12px;
  bottom: 10px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.joydigi-stars-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  column-gap: 6px;
  width: 168px;
  height: 64px;
  margin-right: 4px;
  margin-bottom: 8px;
  padding: 0 12px 0 6px;
  border-image: var(--joydigi-btn-royal) 30 fill / 14px / 0 stretch;
  text-align: left;
  color: #fff;
  filter: drop-shadow(0 3px 0 rgba(10, 22, 56, 0.35));
}
.joydigi-stars-card > img {
  grid-row: 1 / span 2;
  width: 38px;
  height: 38px;
  object-fit: contain;
}
.joydigi-stars-text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  text-shadow: var(--joydigi-outline);
}
.joydigi-stars-text b {
  font-size: 13px;
  letter-spacing: 0.5px;
}
.joydigi-lobby-bottom .joydigi-tile {
  width: 80px;
}
.joydigi-lobby-bottom .joydigi-tile > img {
  width: 70px;
  height: 56px;
}

/* ── JOGAR ── */
.joydigi-cta {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 226px;
  height: 78px;
  padding: 0 18px 4px 10px;
  border-image: var(--joydigi-btn-yellow) 34 fill / 20px / 0 stretch;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow:
    -2px -2px 0 #a3480b,
    2px -2px 0 #a3480b,
    -2px 2px 0 #a3480b,
    2px 2px 0 #a3480b,
    0 4px 0 #7a3205;
  filter: drop-shadow(0 5px 0 rgba(122, 50, 5, 0.55)) drop-shadow(0 0 14px rgba(255, 214, 64, 0.55));
  animation: joydigi-cta-pulse 1.7s ease-in-out infinite;
  overflow: hidden;
  z-index: 2;
}
.joydigi-cta img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 rgba(122, 50, 5, 0.5));
}
.joydigi-cta::after {
  content: "";
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  transform: skewX(-18deg);
  animation: joydigi-cta-shine 2.6s ease-in-out infinite;
  pointer-events: none;
}
.joydigi-cta:active {
  animation: none;
}
@keyframes joydigi-cta-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.045);
  }
}
@keyframes joydigi-cta-shine {
  0%,
  55% {
    left: -60%;
  }
  100% {
    left: 130%;
  }
}

/* ── side panels (Personalizar, Loja, Recordes, Missões, Presente) ── */
.joydigi-sheet {
  position: absolute;
  left: 10px;
  top: 82px;
  bottom: 10px;
  width: 420px;
  display: none;
  z-index: 3;
}
.joydigi-sheet.joydigi-open {
  display: block;
  animation: joydigi-sheet-in 0.18s ease-out;
}
/* opacity only: the buttons are where they are drawn from the first frame (a quick tap never misses) */
@keyframes joydigi-sheet-in {
  from {
    opacity: 0;
  }
}
.joydigi-lobby .joydigi-sheet-panel {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  transform: none;
  width: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: visible; /* the close button sits on the frame; the lists scroll inside */
  padding: 8px 10px 8px;
}
.joydigi-sheet-panel h2 {
  font-size: 26px;
  line-height: 1;
  text-align: center;
  margin: -4px 30px 6px;
  white-space: nowrap;
}
.joydigi-sheet-x {
  position: absolute;
  right: -14px;
  top: -16px;
  width: 40px;
  height: 40px;
  z-index: 2;
  filter: drop-shadow(0 2px 0 rgba(10, 22, 56, 0.4));
}
.joydigi-sheet-x img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* while a panel is open the hero stands on the right and the other menus step aside */
body.joydigi-sheet-open .joydigi-lobby-left,
body.joydigi-sheet-open .joydigi-lobby-right,
body.joydigi-sheet-open .joydigi-lobby-bottom,
body.joydigi-sheet-open #joydigi-play {
  display: none;
}
.joydigi-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: none; /* scrolled by joydigi-lobby-ui.js (also inside the rotated phone stage) */
  scrollbar-width: thin;
  padding-right: 2px;
}
.joydigi-sheet-panel h3 {
  margin: 6px 0 6px;
}
.joydigi-sheet-panel #joydigi-chars,
.joydigi-sheet-panel #joydigi-hats {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px 8px;
  padding-bottom: 14px;
}
.joydigi-sheet-panel .joydigi-swatch {
  width: 50px;
  height: 50px;
}
.joydigi-sheet-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
}
.joydigi-equip-status {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--joydigi-ink-soft);
}

/* buttons made from the atlas frames */
.joydigi-btn2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 150px;
  height: 46px;
  padding: 0 16px 2px;
  border-image: var(--joydigi-btn-lime) 30 fill / 14px / 0 stretch;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  white-space: nowrap;
  text-shadow:
    -1.5px -1.5px 0 #23620a,
    1.5px -1.5px 0 #23620a,
    -1.5px 1.5px 0 #23620a,
    1.5px 1.5px 0 #23620a,
    0 2px 0 #1a4a06;
}
.joydigi-btn2 img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.joydigi-btn2-small {
  min-width: 0;
  height: 30px;
  padding: 0 10px 1px;
  font-size: 12px;
  border-image-width: 10px;
}
.joydigi-btn2-small img {
  width: 15px;
  height: 15px;
}
.joydigi-btn2-blue {
  border-image-source: var(--joydigi-btn-blue);
  text-shadow: 0 2px 0 #0b3f9c;
}
.joydigi-btn2-done {
  border-image-source: var(--joydigi-btn-slate);
  text-shadow: 0 2px 0 #24324f;
}
.joydigi-btn2-off {
  border-image-source: var(--joydigi-btn-slate);
  text-shadow: 0 2px 0 #24324f;
  filter: saturate(0.6);
}

/* shop */
.joydigi-shop-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-content: start;
}
.joydigi-shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px 6px;
  border-radius: 12px;
  background: rgba(36, 18, 79, 0.08);
  border: 2px solid rgba(36, 18, 79, 0.12);
}
.joydigi-shop-card.joydigi-sel {
  border-color: var(--joydigi-yellow);
  background: rgba(249, 193, 15, 0.2);
}
.joydigi-shop-pic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fff, #d9f3ff);
  border: 3px solid #fff;
  box-shadow: 0 2px 0 rgba(36, 18, 79, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.joydigi-shop-pic canvas {
  width: 100%;
  height: 100%;
}
.joydigi-shop-pic img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}
.joydigi-shop-name {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  line-height: 1.1;
  min-height: 26px;
  display: flex;
  align-items: center;
}

/* records / missions lists */
.joydigi-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.joydigi-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(36, 18, 79, 0.07);
  border: 2px solid rgba(36, 18, 79, 0.1);
}
.joydigi-list-main {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
}
.joydigi-list-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--joydigi-ink-soft);
  white-space: nowrap;
}
.joydigi-list-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 104px;
}
.joydigi-list-bar .joydigi-bar {
  flex: 1;
}
.joydigi-list-bar small {
  font-size: 10.5px;
  font-weight: 700;
  min-width: 30px;
  text-align: right;
}
.joydigi-list-done {
  background: rgba(37, 186, 41, 0.12);
  border-color: rgba(37, 186, 41, 0.35);
}
.joydigi-list-locked {
  opacity: 0.55;
}
.joydigi-list-total {
  background: rgba(249, 193, 15, 0.22);
  border-color: rgba(249, 193, 15, 0.6);
}

/* daily gift */
.joydigi-gift-panel {
  align-items: center;
  text-align: center;
}
.joydigi-gift-art {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin: 8px auto 6px;
  animation: joydigi-bob 1.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 4px rgba(36, 18, 79, 0.3));
}
.joydigi-gift-panel p {
  font-size: 16px;
  font-weight: 700;
  color: var(--joydigi-ink);
  margin: 0 12px 14px;
}

/* ── map list (full screen) ── */
.joydigi-mapselect {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: 10px 18px 10px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(120, 70, 220, 0.55), rgba(0, 0, 0, 0) 60%),
    linear-gradient(180deg, rgba(34, 16, 92, 0.94), rgba(14, 26, 74, 0.96));
  z-index: 4;
}
.joydigi-mapselect.joydigi-open {
  display: flex;
  animation: joydigi-fade-in 0.18s ease-out;
}
@keyframes joydigi-fade-in {
  from {
    opacity: 0;
  }
}
body.joydigi-maps-open #joydigi-topbar,
body.joydigi-maps-open .joydigi-player-card,
body.joydigi-maps-open .joydigi-wallet-bar {
  display: none;
}
.joydigi-mapselect-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  margin-bottom: 8px;
}
.joydigi-round-btn {
  width: 46px;
  height: 46px;
  flex: none;
}
.joydigi-round-btn img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
}
.joydigi-mapselect-head h2 {
  flex: 1;
  font-size: 30px;
  text-align: center;
}
.joydigi-mapselect .joydigi-maps-done {
  min-width: 130px;
  padding: 6px 12px;
  border-image: var(--joydigi-btn-charcoal) 30 fill / 12px / 0 stretch;
  font-size: 14px;
  color: #fff;
  text-align: center;
}
.joydigi-mapselect .joydigi-modes {
  flex: 1;
  min-height: 0;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 10px 12px;
  padding: 4px;
  overflow-y: auto;
  touch-action: none;
  scrollbar-width: none;
}
.joydigi-mapselect .joydigi-mode {
  height: auto;
  min-height: 92px;
  border-width: 4px;
  border-radius: 14px;
}
.joydigi-mapselect .joydigi-mode-num {
  top: 6px;
  left: 6px;
  min-width: 26px;
  height: 26px;
  border-radius: 13px;
  font-size: 15px;
  line-height: 26px;
}
.joydigi-mapselect .joydigi-mode-diff {
  top: 7px;
  right: 7px;
  font-size: 11px;
}
.joydigi-mapselect .joydigi-mode-name {
  left: 8px;
  bottom: 20px;
  font-size: 15px;
  text-shadow: var(--joydigi-outline);
}
.joydigi-mapselect .joydigi-mode-kind {
  left: 8px;
  bottom: 5px;
  font-size: 11px;
}
.joydigi-mapselect .joydigi-mode-lock img {
  width: 40px;
  height: 40px;
}
.joydigi-mapselect .joydigi-mode-done {
  top: 30px;
  right: 6px;
}
.joydigi-mapselect .joydigi-mode-done img {
  width: 26px;
  height: 26px;
}
.joydigi-mode-best {
  top: 34px;
  left: 6px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px 1px 2px;
  border-radius: 9px;
  background: rgba(7, 28, 74, 0.75);
  color: #ffe58a;
  font-size: 11px;
}
.joydigi-mode-best img {
  width: 16px;
  height: 16px;
}
.joydigi-mapselect .joydigi-mode.joydigi-sel {
  transform: scale(1.04);
  box-shadow:
    0 0 0 3px var(--joydigi-red),
    0 0 18px rgba(255, 220, 80, 0.9);
}
.joydigi-mapselect-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px;
  margin-top: 8px;
}
.joydigi-mapselect-info {
  flex: 1;
  min-width: 0;
  padding: 8px 14px;
  border-image: var(--joydigi-btn-charcoal) 30 fill / 12px / 0 stretch;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.joydigi-cta.joydigi-cta-small {
  position: relative;
  right: auto;
  bottom: auto;
  width: 200px;
  height: 60px;
  font-size: 28px;
  border-image-width: 16px;
}
.joydigi-cta.joydigi-cta-small img {
  width: 38px;
  height: 38px;
}

/* ── taller UI (fill mode / 4:3 screens): a bit more room for everything ── */
body:not(.joydigi-compact) .joydigi-lobby-left {
  top: 100px;
  gap: 10px;
}
body:not(.joydigi-compact) .joydigi-map-card-pic {
  height: 120px;
}
body:not(.joydigi-compact) .joydigi-map-card-name {
  top: 102px;
}

/* locked map: the shield takes the corner of the difficulty stars (long names stay readable) */
.joydigi-mapselect .joydigi-mode.joydigi-map-locked .joydigi-mode-diff {
  display: none;
}
.joydigi-mapselect .joydigi-mode-lock {
  left: auto;
  right: 6px;
  top: 6px;
  transform: none;
}
.joydigi-mapselect .joydigi-mode-lock img {
  width: 32px;
  height: 32px;
}
/* outfit prices are paid in coins */
.joydigi-sheet-panel .joydigi-locked::after {
  background:
    url("https://gamehihe.com/gamehihe-play/hihe-festa-obby/assets/sprites/items/joydigi-item-coin.png?v=1792483880-32525") 3px center / 12px no-repeat,
    var(--joydigi-ink);
}

/* ── ALTERAR NOME: button hanging under the player card ── */
.joydigi-name-change {
  position: absolute;
  right: 12px;
  top: 56px;
  height: 25px;
  padding: 0 14px 1px;
  border-image: var(--joydigi-btn-lime) 30 fill / 9px / 0 stretch;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  white-space: nowrap;
  text-shadow:
    -1px -1px 0 #23620a,
    1px -1px 0 #23620a,
    -1px 1px 0 #23620a,
    1px 1px 0 #23620a,
    0 2px 0 #1a4a06;
  filter: drop-shadow(0 2px 0 rgba(10, 22, 56, 0.35));
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .joydigi-name-change:hover {
    transform: translateY(-1px) scale(1.05);
    filter: brightness(1.08) drop-shadow(0 2px 0 rgba(10, 22, 56, 0.35));
  }
}

/* ── ALTERAR NOME window (placed by joydigi-name-popup.js inside the visible part of the stage) ── */
.joydigi-name-popup {
  z-index: 12;
  background: rgba(6, 16, 46, 0.58);
}
.joydigi-name-popup.joydigi-open {
  display: block;
  animation: joydigi-fade-in 0.15s ease-out;
}
#joydigi-ui .joydigi-name-box {
  left: 0;
  top: 0;
  width: 420px;
  max-height: none;
  overflow: visible;
  transform: none;
  transform-origin: 0 0;
  padding: 6px 14px 10px;
  text-align: center;
}
.joydigi-name-box h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 28px;
  line-height: 1;
  margin: -2px 0 4px;
}
.joydigi-name-box h2 img {
  width: 34px;
  height: 30px;
  object-fit: contain;
}
.joydigi-name-box .joydigi-name-help {
  font-size: 13px;
  margin: 0 0 10px;
}
.joydigi-name-field {
  position: relative;
}
.joydigi-name-count {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 700;
  color: var(--joydigi-ink-soft);
  pointer-events: none;
}
.joydigi-name-count.joydigi-full {
  color: var(--joydigi-red);
}
.joydigi-name-box .joydigi-name-error {
  min-height: 18px;
  margin: 5px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--joydigi-red);
}
.joydigi-name-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
}
.joydigi-name-actions .joydigi-btn2 {
  min-width: 150px;
}
.joydigi-btn2-red {
  border-image-source: var(--joydigi-btn-red);
  text-shadow:
    -1.5px -1.5px 0 #7d0d16,
    1.5px -1.5px 0 #7d0d16,
    -1.5px 1.5px 0 #7d0d16,
    1.5px 1.5px 0 #7d0d16,
    0 2px 0 #5c0810;
}