/* The world builder's screens: the pamphlet's areas and floors, the floor fade, the pamphlet button's first pulse.
   Loaded after the page's own styles, so these win where they overlap. */

/* ---------- the floor fade ---------- */
#floor-veil { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: #F4EFE7; color: #2B2829; font: 600 18px "Pretendard", sans-serif; opacity: 0; pointer-events: none; transition: opacity .24s ease; }
#floor-veil.on { opacity: 1; pointer-events: auto; }
#floor-veil.now { transition: none; }

/* ---------- the pamphlet button: a gentle pulse until it has been opened once ---------- */
@keyframes pm-pulse { 0%, 100% { box-shadow: var(--lift, 0 2px 10px rgba(0,0,0,.12)), 0 0 0 0 rgba(201,80,45,.45); } 55% { box-shadow: var(--lift, 0 2px 10px rgba(0,0,0,.12)), 0 0 0 10px rgba(201,80,45,0); } }
#btn-pamphlet.pulse { animation: pm-pulse 1.8s ease-out infinite; }

/* ---------- the pamphlet: one fixed size whatever the tab ---------- */
#pm-sheet { height: min(800px, calc(100dvh - 20px)); }
#pm-list { align-content: start; min-height: calc(100dvh - 230px); }
#pm-chips button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
#pm-chips button i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* Floors */
#pm-floors { display: flex; gap: 6px; margin: 0 0 10px; }
#pm-floors button { flex: 1; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; padding: 4px 6px; line-height: 1.2; }
#pm-floors button[aria-current="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); font-weight: 700; }
#pm-floors button:disabled { color: var(--muted); background: var(--sunken); }
#pm-floors small { display: block; font-size: 11px; opacity: .85; }

/* Areas on the map: carpets in the area's colour, named along the aisle; every spot carries its area's colour. */
.pm-area-run { display: flex; align-items: center; justify-content: center; }
.pm-area-run span { writing-mode: vertical-rl; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; color: var(--ink); opacity: .82; }
.pm-booth.area.empty { outline-style: dashed; outline-width: 1.5px; outline-offset: -2px; }
.pm-booth.area.filled { outline: 0; }
.pm-escalator { background: #D8D2C9; border-radius: var(--r-s); }
.pm-escalator b { font-size: 10px !important; }

/* Legend: one swatch per area. */
#pm-legend .k.area { outline: 0; }

/* The list, grouped by area. */
.pm-group { display: flex; align-items: center; gap: 8px; margin: 14px 0 2px; padding: 6px 2px; border-bottom: 2px solid var(--area, var(--line)); font-family: var(--display); font-size: 15px; }
.pm-group i { width: 12px; height: 12px; border-radius: 3px; background: var(--area); flex: none; }
.pm-group small { margin-left: auto; font-family: var(--text, inherit); font-size: 12px; color: var(--muted); font-weight: 400; }
.pm-group-empty { font-size: 13px; color: var(--muted); padding: 8px 2px 4px; margin: 0; }
.pm-row .pm-area-tag { font-size: 11px; font-weight: 700; padding: 0 6px 1px; border-radius: 6px; margin-left: 4px; }

@media (max-width: 640px) {
  #pm-sheet { height: calc(100dvh - 32px); }
  #pm-list { min-height: calc(100dvh - 250px); }
  #pm-floors button { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #btn-pamphlet.pulse { animation: none; box-shadow: var(--lift), 0 0 0 3px rgba(201,80,45,.45); }
  #floor-veil { transition: none; }
}
#pm-legend .pm-key { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin-right: 6px; }
#pm-legend .pm-key .k { margin-left: 0; }