/* map: the world map and land visits (ui/map). See styles.css for the shared tokens and components. */

/* ── The world map ───────────────────────────────────────────────────────────────────────── */

.map-screen { position: absolute; inset: 0; overflow: hidden; overflow: clip; background: #120B33; }

/* The page's own scroller takes touches, the wheel and keys; the stage pinned in it draws the map. */
.map-scroller {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
.map-scroller::-webkit-scrollbar { display: none; }
.map-scroller.hidden-map { visibility: hidden; }
.map-scroller.dragging, .map-scroller.dragging * { cursor: grabbing !important; }
/* Clipped, never scrolled itself: focusing a land mustn't scroll the stage instead of the map. */
.map-stage { position: sticky; top: 0; height: 100%; overflow: hidden; overflow: clip; }
.map-canvas { position: absolute; top: 0; display: block; pointer-events: none; }
.map-sky { left: 0; width: 100%; height: 100%; }
.map-lands-col { position: absolute; top: 0; height: 0; }
.map-lands { position: absolute; left: 0; top: 0; width: 100%; height: 0; will-change: transform; }

.map-land { position: absolute; }
.map-glow { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.map-glow.ready { animation: mapPulse 1.047s ease-in-out infinite alternate; }
/* Only the island's middle answers taps (lands overlap). */
.map-tap {
  position: absolute;
  left: 17%;
  top: 20%;
  width: 66%;
  height: 60%;
  z-index: 2;
  border-radius: 40%;
  cursor: pointer;
  outline: none;
}
.map-tap:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85); }
/* Each island floats on its own beat (Android's sin(1.4 t)): a 4.5 s sway, half each way. */
.map-float { position: absolute; inset: 0; pointer-events: none; animation: mapBob 2.244s ease-in-out infinite alternate; }
.map-art { position: absolute; inset: 0; transition: transform 0.25s cubic-bezier(.3, 1.6, .5, 1), filter 0.2s ease; }
.map-tap:active ~ .map-float .map-art { transform: scale(0.97); }

.map-tag-slot { position: absolute; left: 0; z-index: 3; white-space: nowrap; }
.map-tag { display: flex; align-items: center; gap: 6px; border-radius: 999px; white-space: nowrap; }
.map-tag.open { background: #fff; padding: 5px 12px; box-shadow: 0 3px 10px rgba(30, 27, 75, 0.2); }
.map-tag.ready {
  gap: 4px;
  padding: 6px 16px 6px 12px;
  background: var(--gold);
  box-shadow: 0 5px 16px rgba(255, 200, 61, 0.7), 0 2px 0 var(--gold-ledge);
  cursor: pointer;
  animation: mapTagPulse 0.628s ease-in-out infinite alternate;
}
.map-tag.locked { gap: 4px; padding: 5px 12px; }

/* Sized by the map (inline): 104px on a phone. */
.map-stella { position: absolute; left: 0; top: 0; z-index: 4; opacity: 0; will-change: transform; }

/* The bar over the sky, and the card at the bottom. */
.map-topbar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding-top: var(--safe-top);
  background: linear-gradient(to bottom, rgba(18, 11, 51, 0.8), rgba(18, 11, 51, 0));
  z-index: 5;
  pointer-events: none;
}
.map-topbar-row { padding: 8px 16px 14px; gap: 12px; }
.map-topbar-row > * { pointer-events: auto; }
.map-xp-pill { flex-shrink: 0; gap: 4px; padding: 5px 14px 5px 8px; border-radius: 999px; background: var(--gold); }

.map-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  z-index: 5;
  pointer-events: none;
}
.map-card { width: 100%; max-width: 520px; padding: 16px; border-radius: 24px; pointer-events: auto; }
.map-show-me { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; background: var(--gold); white-space: nowrap; }
.map-close { width: 28px; height: 28px; flex-shrink: 0; color: var(--ink-soft); cursor: pointer; border-radius: 50%; }
.map-xp-track { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.map-xp-fill { height: 100%; border-radius: 999px; background: var(--gold); transition: width 0.8s cubic-bezier(.4, 0, .2, 1); }
.map-thumb { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* A desktop's journey panel beside the map (JourneyPanel.kt); a phone shows the map alone. */
.map-main { position: absolute; inset: 0; }
@media (min-width: 900px) {
  .map-screen { --journey-w: clamp(300px, 27vw, 380px); }
  .map-main { right: var(--journey-w); }
}
.journey {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--journey-w);
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--line);
  z-index: 6;
}
.journey-top { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; padding: 16px 16px 6px; }
.journey-top .map-card { max-width: none; animation: none; }
.journey-here { padding: 16px; }
.journey-list { position: relative; flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 16px; }
.journey-tier { position: sticky; top: 0; z-index: 1; gap: 8px; padding: 12px 8px 6px; background: var(--bg); }
.journey-row { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: 16px; cursor: pointer; outline: none; }
.journey-row:hover { background: rgba(109, 74, 255, 0.07); }
.journey-row:focus-visible { box-shadow: 0 0 0 2px var(--primary); }
.journey-row.here { background: var(--primary-tint); }
.journey-row.picked { background: var(--surface); box-shadow: 0 0 0 2px var(--primary), 0 4px 12px rgba(30, 27, 75, 0.08); }
.journey-row-text { min-width: 0; }
.journey-thumb { position: relative; flex-shrink: 0; }
.journey-number {
  position: absolute;
  left: -4px;
  bottom: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(30, 27, 75, 0.18);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}
.journey-ready { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; background: var(--gold); animation: mapTagPulse 0.628s ease-in-out infinite alternate; }

/* A media-CDN picture: a soft cloud until it's here, then it fades in. */
.map-media { position: relative; flex-shrink: 0; pointer-events: none; }
.map-media-pic { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-media-fade { animation: mapFadeIn 0.32s ease backwards; }
.map-cloud { position: absolute; inset: 0; transition: opacity 0.32s ease; }
.map-cloud.gone { opacity: 0; }
.map-cloud-puff { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.95); }

/* A land just opened. */
.map-celebrate {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(30, 27, 75, 0.86);
  animation: fadeIn 0.25s ease both;
}
.map-celebrate.leaving { animation: mapFadeOut 0.25s ease both; pointer-events: none; }
.map-celebrate-col { max-width: 560px; padding: 0 28px var(--safe-bottom); }
.map-burst { position: relative; width: 320px; height: 320px; flex-shrink: 0; }
.map-burst-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-burst-land { position: absolute; left: 35px; top: 35px; width: 250px; height: 250px; animation: mapLandPop 0.9s linear both; }
.map-burst-bob { animation: mapBobBig 1.963s ease-in-out infinite alternate; }
.map-burst-stella { position: absolute; left: -8px; bottom: -20px; }
.map-celebrate-text { animation: mapTextIn 0.6s cubic-bezier(.2, .9, .3, 1.1) 0.35s both; }

@keyframes mapPulse { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes mapBob { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
@keyframes mapBobBig { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@keyframes mapTagPulse { from { transform: scale(0.94); } to { transform: scale(1.06); } }
@keyframes mapFadeIn { from { opacity: 0; } }
@keyframes mapFadeOut { to { opacity: 0; } }
/* A spring (damping 0.5) from a fifth of the size, turning upright as it grows. */
@keyframes mapLandPop {
  0% { transform: scale(0.2) rotate(-20deg); }
  18% { transform: scale(0.86) rotate(-3.5deg); }
  32% { transform: scale(1.13) rotate(3.2deg); }
  50% { transform: scale(0.97) rotate(-0.7deg); }
  68% { transform: scale(1.02) rotate(0.4deg); }
  100% { transform: none; }
}
@keyframes mapTextIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* ── A land visit ────────────────────────────────────────────────────────────────────────── */

/* Over the map: the whole screen on a phone, a large panel over the dimmed map on a desktop. */
.visit-host { position: absolute; inset: 0; z-index: 20; }
/* Backwards, not both: once in it holds no transform, so a report sheet or dialog opened in the visit covers the window (sidebar too). */
.visit-frame { position: absolute; inset: 0; overflow: hidden; overflow: clip; animation: visitIn 0.52s cubic-bezier(.4, 0, .2, 1) backwards; }
.visit-host.leaving { pointer-events: none; }
.visit-host.leaving .visit-frame { animation: visitOut 0.32s ease both; }

.visit-root { position: absolute; inset: 0; outline: none; }
.visit { position: absolute; inset: 0; overflow: hidden; overflow: clip; user-select: none; -webkit-user-select: none; }
.visit-stage { position: absolute; inset: 0; touch-action: none; }
.visit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.visit-stella-place { position: absolute; width: 78px; height: 78px; }
.visit-stella { width: 78px; height: 78px; will-change: transform, opacity; }
.visit-area { position: absolute; inset: 0; pointer-events: none; will-change: transform; }

/* A seat: its perch, the sitter and their name, in a box whose bottom is the perch's foot. */
/* Seats glide when the meadow's bottom moves (a note coming in under it, the window resized). */
.visit-seat { position: absolute; transition: top 0.5s cubic-bezier(.2, .8, .2, 1), left 0.5s cubic-bezier(.2, .8, .2, 1), width 0.5s cubic-bezier(.2, .8, .2, 1), height 0.5s cubic-bezier(.2, .8, .2, 1); }
.visit-rise { position: absolute; inset: 0; }
.visit-perch { position: absolute; left: 20px; pointer-events: none; }
.visit-perch-pic { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.visit-perch-pic.pop { transform-origin: 50% 95%; animation: visitPerchPop 0.6s linear both; }
.visit-seat-cloud { position: absolute; inset: 0; width: 100%; height: 100%; animation: visitCloudBob 1.963s ease-in-out infinite alternate; }
.visit-seat-cloud.gone { animation: visitCloudGo 0.42s ease-out forwards; }
.visit-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(255, 200, 61, 0.75), rgba(255, 200, 61, 0));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.visit-glow.on { opacity: 1; }
.visit-sitter {
  position: absolute;
  transform-origin: 50% 100%;
  pointer-events: auto;
  animation: visitSit 0.6s linear backwards;
  transition: opacity 0.22s ease;
}
.visit-sitter.fading { opacity: 0; }
.visit-lift { width: 100%; height: 100%; transform-origin: 50% 100%; transition: transform 0.45s cubic-bezier(.3, 1.9, .5, 1); }
.visit-lift.on { transform: translateY(-10px) scale(1.18); }
.visit-bob { width: 100%; height: 100%; animation: visitBob 1.496s ease-in-out infinite alternate; }
.visit-press { position: relative; width: 100%; height: 100%; outline: none; }
.visit-press:focus-visible { box-shadow: 0 0 0 3px rgba(109, 74, 255, 0.55); border-radius: 50%; }
.visit-face { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.visit-online {
  position: absolute;
  right: -2px;
  bottom: 2px;
  border-radius: 50%;
  background: var(--success);
  border: 2px solid #fff;
  animation: visitPulse 1.047s ease-in-out infinite alternate;
}
.visit-name {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  padding: 3px 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.3;
  box-shadow: 0 2px 6px rgba(30, 27, 75, 0.2);
  pointer-events: auto;
  cursor: pointer;
  animation: mapFadeIn 0.3s ease backwards;
  transition: opacity 0.22s ease;
}
.visit-name.fading { opacity: 0; }
.visit-name.me { background: var(--gold); }

.visit-topbar { position: absolute; left: 0; right: 0; top: 0; z-index: 5; gap: 10px; padding: calc(var(--safe-top) + 8px) 16px 8px; }
.visit-title { padding: 7px 14px; border-radius: 20px; }
.visit-home { flex-shrink: 0; max-width: 112px; gap: 4px; padding: 5px 8px; border-radius: 14px; background: var(--gold); }
.visit-home .t-caption { font-size: 12px; line-height: 15px; font-weight: 800; }
.visit-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 16px calc(10px + var(--safe-bottom));
  pointer-events: none;
}
.visit-controls > * { pointer-events: auto; }
.visit-guest { width: 100%; max-width: 520px; gap: 8px; padding: 8px 8px 8px 14px; border-radius: 20px; }
.visit-signin { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; background: var(--primary); white-space: nowrap; }
/* Nobody to meet, or only the player so far: under the meadow, so it never hides a perch. */
.visit-land-note { width: 100%; max-width: 520px; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 22px; animation: visitNoteIn 0.45s cubic-bezier(.3, 1.4, .5, 1) both; }
.visit-land-note .t-caption { display: block; margin-top: 2px; }
.visit-land-note-icon { flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.visit-center { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 32px; pointer-events: none; }
.visit-note { width: 100%; max-width: 420px; padding: 18px; pointer-events: auto; }
.visit-arrow { position: absolute; top: 50%; z-index: 4; transform: translateY(-50%); animation: fadeIn 0.3s ease both; }
.visit-arrow.left svg { transform: scaleX(-1); }
.visit-arrow .icon-btn { width: 52px; height: 52px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }

/* Someone's card. */
.visit-scrim-card { position: absolute; inset: 0; z-index: 10; background: rgba(30, 27, 75, 0.18); animation: fadeIn 0.2s ease both; }
.visit-card-host {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  display: flex;
  justify-content: center;
  padding: 12px 12px calc(12px + var(--safe-bottom));
  pointer-events: none;
}
/* Backwards, not both: no transform is held once it's in, so the ⋯ menu's catcher covers the window. */
.visit-card { position: relative; width: 100%; max-width: 520px; padding: 16px; border-radius: 28px; pointer-events: auto; animation: visitCardIn 0.42s cubic-bezier(.2, .9, .3, 1.04) backwards; }
/* The ⋯ (Report, Block) and the close button, side by side in the card's top-right corner; the name stops short of them. */
.visit-card-actions { position: absolute; top: 12px; right: 12px; gap: 2px; }
.visit-card-name { padding-right: 62px; }
.visit-where { flex-wrap: nowrap; }
.visit-dot { width: 8px; height: 8px; flex-shrink: 0; margin-right: 5px; border-radius: 50%; background: var(--success); }
.visit-offline { justify-content: center; gap: 6px; padding: 12px 0; border-radius: 18px; background: rgba(231, 227, 248, 0.6); }
.visit-sending { height: 61px; justify-content: center; gap: 10px; }
.visit-games { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px 8px; }
.visit-game { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: visitTileIn 0.45s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.visit-game-tile { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 16px; }

@keyframes visitIn {
  from { opacity: 0; transform: scale(1.18); }
  61% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes visitOut {
  81% { opacity: 0; }
  to { opacity: 0; transform: scale(1.12); }
}
/* Sitting down: a springy drop from above (damping 0.48). */
@keyframes visitSit {
  0% { opacity: 0; transform: translateY(-46px) scale(0.3); }
  22% { opacity: 1; transform: translateY(-6px) scale(0.92); }
  40% { transform: translateY(6px) scale(1.12); }
  62% { transform: translateY(-2px) scale(0.97); }
  82% { transform: translateY(1px) scale(1.01); }
  100% { opacity: 1; transform: none; }
}
/* A late perch popping out of its cloud (a spring of 0.42 s, damping 0.55). */
@keyframes visitPerchPop {
  0% { opacity: 0; transform: scale(0.7); }
  35% { opacity: 1; transform: scale(1.05); }
  60% { transform: scale(0.985); }
  80% { transform: scale(1.005); }
  100% { opacity: 1; transform: none; }
}
@keyframes visitCloudBob { from { transform: translateY(-1.2px); } to { transform: translateY(1.2px); } }
@keyframes visitCloudGo { to { opacity: 0; transform: scale(1.3); } }
@keyframes visitBob { from { transform: translateY(-2.2px); } to { transform: translateY(2.2px); } }
@keyframes visitPulse { from { transform: scale(0.88); } to { transform: scale(1.12); } }
@keyframes visitCardIn { from { opacity: 0; transform: translateY(100%); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes visitTileIn { from { opacity: 0; transform: scale(0.6); } }
@keyframes visitNoteIn { from { opacity: 0; transform: translateY(40%); } }

@media (hover: hover) and (pointer: fine) {
  .map-scroller { cursor: grab; }
  .map-tap:hover ~ .map-float .map-art { filter: brightness(1.06); }
  .map-tag.ready:hover { filter: brightness(1.05); }
  .map-close:hover { background: var(--bg); color: var(--ink); }
  .visit-stage { cursor: grab; }
  .visit-stage:active { cursor: grabbing; }
  .visit-press, .visit-name { cursor: pointer; }
}

/*
 * Desktop: the visit fills the window beside the sidebar, its seats in two wide rows (see
 * LandVisitScreen's `spot`); the arrows to fly on sit at its sides, and the title stays short so
 * the land's picture shows in the middle of the sky.
 */
@media (min-width: 900px) {
  .visit-arrow.left { left: 24px; }
  .visit-arrow.right { right: 24px; }
  .visit-topbar { padding: 16px 24px 8px; }
  .visit-title { flex: 0 1 460px; }
  .visit-home { margin-left: auto; }
}

/* ── Land titles (v19): plates on the islands, the Hall of Fame button, the holder in a visit ── */
.map-bottom-col { width: 100%; max-width: 520px; gap: 10px; pointer-events: none; }
.map-hall { display: flex; justify-content: flex-end; pointer-events: none; }
.map-hall > * { pointer-events: auto; }
.map-plate { position: absolute; z-index: 3; }
.visit-holder { position: absolute; left: 16px; top: calc(var(--safe-top) + 68px); z-index: 5; }
.visit-glow.holder { opacity: 0.7; }
.visit-name.holder { background: var(--gold); }
.visit-medal { position: absolute; left: 50%; top: -16%; transform: translateX(-50%) rotate(-8deg); line-height: 0; pointer-events: none; z-index: 2; }

/* ── Hall of Fame as a summit trail (v19) ── */
.hall { background: #120B33; }
.hall-scroll { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.hall-sky { position: relative; width: 100%; max-width: 640px; margin: 0 auto; }
.hall-stars { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; opacity: .75;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.6px), radial-gradient(circle, #fff 0 .8px, transparent 1.4px);
  background-size: 90px 70px, 53px 41px; background-position: 10px 5px, 30px 20px;
  mask-image: linear-gradient(#000 70%, transparent); -webkit-mask-image: linear-gradient(#000 70%, transparent); }
.hall-trail { position: absolute; left: 0; top: 0; pointer-events: none; }
.hall-topbar { position: absolute; left: 0; right: 0; top: 0; z-index: 5; gap: 12px; padding: calc(var(--safe-top) + 8px) 12px 0; pointer-events: none; }
.hall-topbar > * { pointer-events: auto; }
.hall-error { position: absolute; left: 16px; right: 16px; top: calc(var(--safe-top) + 64px); z-index: 5; }
.hall-standing { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: center; padding: 0 12px calc(var(--safe-bottom) + 12px); pointer-events: none; }
.hall-strip { width: 100%; max-width: 616px; padding: 10px 14px; border-radius: 18px; border: 1.5px solid #FFD98A; gap: 3px; pointer-events: auto; }
.hall-summit { position: absolute; left: 0; right: 0; height: 250px; display: flex; flex-direction: column; align-items: center; padding: 10px 24px 0; text-align: center; gap: 2px; }
.hall-stage { position: relative; width: 150px; height: 150px; display: grid; place-items: center; flex: none; }
.hall-rays { position: absolute; inset: 0; border-radius: 50%; animation: hallSpin 22s linear infinite;
  background: conic-gradient(from 0deg, rgba(255,200,61,0) 0 10deg, rgba(255,200,61,.5) 10deg 18deg, rgba(255,200,61,0) 18deg 40deg, rgba(255,200,61,.5) 40deg 48deg, rgba(255,200,61,0) 48deg 70deg, rgba(255,200,61,.5) 70deg 78deg, rgba(255,200,61,0) 78deg 100deg, rgba(255,200,61,.5) 100deg 108deg, rgba(255,200,61,0) 108deg 130deg, rgba(255,200,61,.5) 130deg 138deg, rgba(255,200,61,0) 138deg 160deg, rgba(255,200,61,.5) 160deg 168deg, rgba(255,200,61,0) 168deg 190deg, rgba(255,200,61,.5) 190deg 198deg, rgba(255,200,61,0) 198deg 220deg, rgba(255,200,61,.5) 220deg 228deg, rgba(255,200,61,0) 228deg 250deg, rgba(255,200,61,.5) 250deg 258deg, rgba(255,200,61,0) 258deg 280deg, rgba(255,200,61,.5) 280deg 288deg, rgba(255,200,61,0) 288deg 310deg, rgba(255,200,61,.5) 310deg 318deg, rgba(255,200,61,0) 318deg 340deg, rgba(255,200,61,.5) 340deg 348deg, rgba(255,200,61,0) 348deg 360deg);
  mask-image: radial-gradient(circle, transparent 30%, #000 40%, transparent 72%); -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 40%, transparent 72%); }
.hall-summit-land { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% + 16px)); filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
.hall-summit-plate { position: absolute; left: 50%; top: 50%; transform: translate(-50%, calc(-50% - 10px)); }
.hall-band { position: absolute; left: 0; right: 0; height: 44px; display: flex; align-items: center; padding: 0 16px; }
.hall-banner { width: 100%; gap: 6px; border-radius: 12px; padding: 6px 12px; align-items: center; }
.hall-stop { position: absolute; left: 0; right: 0; height: 104px; }
.hall-island { position: absolute; top: 24px; filter: drop-shadow(0 8px 10px rgba(30,27,75,.3)); }
.hall-group { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 6px; }
.hall-group.right { flex-direction: row-reverse; }
.hall-tag { background: #fff; border-radius: 14px; padding: 5px 10px; min-width: 0; box-shadow: 0 4px 12px rgba(30,27,75,.2); }
.hall-tag.me { outline: 2px solid var(--primary); outline-offset: -2px; }
.hall-tag > * { display: block; }
@keyframes hallSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hall-rays { animation: none; } }