* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --accent: #2f7dd1;
  --accent-2: #ffb020;
  --danger: #e0483a;
  --glass-bg: rgba(24, 28, 38, 0.55);
  --glass-bg-strong: rgba(20, 24, 34, 0.72);
  --glass-border: rgba(255, 255, 255, 0.14);
  --text: #f4f6fb;
  --text-dim: rgba(244, 246, 251, 0.72);
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0d1420;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  /* No browser double-tap or pinch zoom anywhere, so the UI never zooms. The canvas handles pinch itself. */
  touch-action: none;
}

#app {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
}

#canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- splash ---------- */

#splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: radial-gradient(circle at 50% 40%, #1c3a5e 0%, #0d1420 70%);
  transition: opacity 0.4s ease;
}

#splash.splash-hidden { opacity: 0; pointer-events: none; }

#splash-emoji {
  font-size: 64px;
  animation: splashBob 1.4s ease-in-out infinite;
}

#splash-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

#splash-sub {
  font-size: 13px;
  color: var(--text-dim);
}

@keyframes splashBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
}

/* ---------- glass panel base ---------- */

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

/* ---------- HUD ---------- */

#hud {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  pointer-events: none;
  z-index: 10;
}

#hud > div {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid var(--glass-border);
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

#hud-money { color: var(--accent-2); }
#hud.hidden, #speed-bar.hidden { display: none; }

/* ---------- toolbar ---------- */

#toolbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  display: flex;
  gap: 4px;
  padding: 0 6px;
  overflow-x: auto;
  touch-action: pan-x; /* scrollable, but no zoom */
  z-index: 10;
}

.tool-btn, #btn-park {
  min-height: 52px;
  min-width: 52px;
  padding: 6px 12px;
  border: none;
  border-radius: 14px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid var(--glass-border);
  color: var(--text);
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.1s ease, background 0.15s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  /* Sized so all 7 toolbar buttons fit without clipping/scrolling at a 390px viewport (D5/N3):
     7*46 + 6*4(gap) + 12(container padding) = 346px, comfortably under 390px. */
  min-width: 46px;
  min-height: 46px;
  padding: 4px 3px;
}

.tool-icon { font-size: 18px; line-height: 1; }
.tool-label { font-size: 9px; font-weight: 600; color: var(--text-dim); white-space: nowrap; }
.tool-btn.active .tool-label { color: var(--text); }

.tool-btn:active, #btn-park:active,
.panel-close:active, .danger-btn:active {
  transform: scale(0.9);
}

.tool-btn.active {
  background: linear-gradient(180deg, var(--accent), #205ea0);
  border-color: rgba(255, 255, 255, 0.35);
}

#speed-bar {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 54px);
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  display: flex;
  gap: 6px;
  z-index: 10;
}

/* ---------- panels ---------- */

.panel {
  position: absolute;
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
  max-width: 360px;
  /* RUN-04 (REVIEW-03 blocker): never taller than the space above the toolbar — in 844x390
     landscape the coaster panel was 380px tall and its header/✕ sat off-screen above the top. */
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 86px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 86px);
  overflow-y: auto;
  touch-action: pan-y; /* scrollable, but no zoom */
  overscroll-behavior: contain;
  margin: 0 auto;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 12px 16px 16px;
  z-index: 20;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: panelIn 0.18s ease;
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.panel.hidden { display: none; }

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--glass-border);
}

.panel-close {
  min-height: 32px;
  min-width: 32px;
  border: none;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-size: 14px;
  transition: transform 0.1s ease;
}

.panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 14px;
  color: var(--text-dim);
}

.panel-row span:last-child { color: var(--text); font-weight: 700; }

.danger-btn {
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--danger), #a8291f);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.1s ease;
  box-shadow: 0 4px 12px rgba(224, 72, 58, 0.35);
}

/* ---------- coaster design panel: compact bottom bar, not a big sheet (E2) — sits exactly
   where #toolbar sits (main.js/ui.js hide the toolbar while design mode is active), so the map
   and the track being built stay visible above it instead of losing ~half the screen. ---------- */

#design-panel, #preset-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  z-index: 10;
}
#design-panel.hidden, #toolbar.hidden, #preset-panel.hidden { display: none; }

#design-hint, #preset-hint {
  margin: 0 6px 4px;
  padding: 5px 10px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

#design-bar, #preset-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 0 4px;
  justify-content: center;
}

/* 17 pieces no longer fit as wrapped rows (263px tall at 390px): one horizontally scrollable
   row of pieces, with the action buttons on a single row under it. */
#design-piece-palette {
  display: flex;
  flex: 0 0 100%;
  gap: 3px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 2px 2px 3px;
  margin-bottom: 1px;
}
#design-piece-palette::-webkit-scrollbar { display: none; }
#design-piece-palette .tool-btn { flex: 0 0 62px; width: 62px; }
#design-piece-palette.hidden { display: none; }

/* Up to 9 buttons (5 pieces + 자동연결/되돌리기/완성/취소) need to stay reachable at 390px
   without horizontal scroll (N1/G3 in REVIEW-10). Icon-only buttons were under the 44px touch
   target guideline and unlabeled (REVIEW-11 N1/H1: Director prefers small labels under icons
   when they fit). Wrapping onto two rows at a fixed width fits every button at >=44px tall with
   its label visible: ceil(9/2)=5 per row, 5*72 + 4*3 = 372px, under 390px. */
#design-bar .tool-btn, #preset-bar .tool-btn {
  flex: 0 0 72px;
  min-width: 0;
  width: 72px;
  min-height: 44px;
  padding: 3px;
}
#design-bar .tool-btn .tool-label, #preset-bar .tool-btn .tool-label { display: block; font-size: 9px; }
#design-bar .tool-btn .tool-icon, #preset-bar .tool-btn .tool-icon { font-size: 17px; }
#design-bar .tool-btn:disabled, #preset-bar .tool-btn:disabled { opacity: 0.4; }

/* lpvs round 2: gallery cards — functional only, polish belongs to the UX task. */
.preset-card { padding: 8px 0 10px; border-bottom: 1px solid var(--glass-border); }
.preset-name { font-size: 15px; font-weight: 800; }
.preset-desc { font-size: 12px; color: var(--text-dim); }
.preset-card .panel-row { padding: 3px 0; font-size: 13px; }
/* Grey, not the old red/olive tint that read like a highlighted "selected" state (REVIEW-11
   N2): a plain desaturated look matches the usual "unavailable" convention. */
#design-bar .tool-btn.invalid { background: rgba(120, 120, 120, 0.35); color: rgba(244, 246, 251, 0.55); opacity: 0.7; }
#design-bar .tool-btn.hidden { display: none; }

/* ---------- toasts ---------- */

#toast-container {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 104px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  pointer-events: none;
  z-index: 30;
  width: 90%;
  max-width: 360px;
}

.toast {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid var(--glass-border);
  padding: 9px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  animation: fadeOut 3s forwards;
}

@keyframes fadeOut {
  0% { opacity: 0; transform: translateY(-6px) scale(0.96); }
  10% { opacity: 1; transform: translateY(0) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- ride board button + first-person POV overlay ---------- */

.board-btn {
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #2fa76b, #1c7a4b);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  transition: transform 0.1s ease;
  box-shadow: 0 4px 12px rgba(47, 167, 107, 0.35);
}
.board-btn:active { transform: scale(0.96); }
.board-btn.hidden { display: none; }

#pov-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}
#pov-overlay.hidden { display: none; }

#pov-hud {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  left: calc(env(safe-area-inset-left, 0px) + 8px);
  display: flex;
  gap: 8px;
  pointer-events: none;
}
#pov-hud span {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid var(--glass-border);
  padding: 7px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

#pov-exit {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  min-height: 44px;
  padding: 8px 16px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--danger), #a8291f);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(224, 72, 58, 0.4);
  pointer-events: auto;
}
#pov-exit:active { transform: scale(0.96); }

/* ---------- floating placement buttons (above the candidate being placed) ---------- */
#place-actions {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  gap: 10px;
  transform: translate(-50%, -100%);
  z-index: 15;
  touch-action: none;
  pointer-events: auto;
}
#place-actions.hidden { display: none; }
.pa-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(20, 28, 40, 0.82);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  -webkit-tap-highlight-color: transparent;
}
.pa-btn:active { transform: scale(0.92); }
.pa-btn.hidden { display: none; }
/* sprite symbols use fixed colors; render them white on the dark and green circles */
.pa-btn .ico { width: 24px; height: 24px; filter: brightness(0) invert(1); }
.pa-confirm { background: #2fa35a; border-color: #d8ffe6; font-weight: 700; }
.pa-confirm:disabled { background: rgba(80, 80, 80, 0.75); border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.5); }
.pa-confirm:disabled .ico { opacity: 0.5; }
#preset-bar.hidden { display: none; }

/* ---------- saved parks list (park panel) ---------- */
.park-sub { font-size: 13px; color: var(--text-dim); margin: 4px 0 8px; }
#park-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.park-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.07); }
.park-row.current { background: rgba(47, 163, 90, 0.22); }
.park-row-name { flex: 1; font-weight: 600; display: flex; flex-direction: column; }
.park-row-date { font-size: 11px; font-weight: 400; color: var(--text-dim); }
.park-row-tag { font-size: 12px; color: #bdf0cc; }
.park-row-btn { min-width: 52px; min-height: 40px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 14px; }
.park-row-btn.danger { background: rgba(214, 69, 65, 0.35); }

/* ---------- UX refresh: bright rounded cards, SVG icons ---------- */
:root {
  --card: rgba(255, 255, 255, 0.94);
  --card-ink: #26303d;
  --card-ink-dim: #6b7482;
  --card-line: rgba(38, 48, 61, 0.1);
  --primary: #ff7a3d;
}
.ico { width: 24px; height: 24px; display: block; flex-shrink: 0; }

/* HUD pills */
#hud { gap: 6px; }
#hud > .hud-pill {
  display: flex; align-items: center; gap: 6px;
  background: var(--card); color: var(--card-ink);
  border: 1px solid var(--card-line); border-radius: 999px;
  padding: 5px 12px 5px 6px; font-size: 15px; font-weight: 800;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); backdrop-filter: none; -webkit-backdrop-filter: none;
}
#hud > .hud-pill .ico { width: 22px; height: 22px; }

/* park button: top-right, away from the thumb zone */
#speed-bar { left: auto; right: calc(env(safe-area-inset-right, 0px) + 8px); top: calc(env(safe-area-inset-top, 0px) + 8px); }
#btn-park {
  display: flex; align-items: center; gap: 6px; min-height: 40px; min-width: 0; padding: 6px 12px 6px 8px;
  background: var(--card); color: var(--card-ink); border: 1px solid var(--card-line); border-radius: 999px;
  font-size: 13px; font-weight: 700; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); backdrop-filter: none; -webkit-backdrop-filter: none;
}
#btn-park .ico { width: 22px; height: 22px; }

/* bottom dock: one card, grouped buttons (tools | rides | coaster) */
#toolbar {
  left: 50%; right: auto; transform: translateX(-50%);
  max-width: calc(100% - 12px);
  gap: 0; padding: 5px; align-items: stretch;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 22px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.tb-group { display: flex; gap: 2px; padding: 0 4px; }
.tb-group + .tb-group { border-left: 1px solid var(--card-line); }
#toolbar .tool-btn {
  min-width: 48px; min-height: 52px; padding: 5px 4px 4px; gap: 3px;
  background: transparent; border: none; box-shadow: none; border-radius: 16px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
#toolbar .tool-icon { width: 26px; height: 26px; font-size: 0; }
#toolbar .tool-label { font-size: 10.5px; font-weight: 700; color: var(--card-ink-dim); }
#toolbar .tool-btn.active { background: #e6efff; }
#toolbar .tool-btn.active .tool-label { color: #2f5fb3; }
#toolbar .tool-btn.primary { background: linear-gradient(180deg, #ff9a5c, var(--primary)); min-width: 58px; }
#toolbar .tool-btn.primary .tool-label { color: #fff; }
#toolbar .tool-btn.primary.active { box-shadow: 0 0 0 3px #ffd2bb inset; }
/* 워터: the water-ride gallery, a primary button like 코스터 but blue so the two are told apart */
#toolbar .tool-btn.primary.water { background: linear-gradient(180deg, #5cc0ff, #2f7dd1); }
#toolbar .tool-btn.primary.water.active { box-shadow: 0 0 0 3px #c5e6ff inset; }
.panel-header .title-ico { display: inline-block; width: 22px; height: 22px; vertical-align: -5px; margin-right: 6px; }
@media (max-width: 420px) { #toolbar .tool-btn { min-width: 44px; } #toolbar .tool-btn.primary { min-width: 52px; } .tb-group { padding: 0 2px; gap: 1px; } }

/* ---------- UX refresh 2: bright panels, bottom sheet, lighter secondary actions ---------- */
.panel {
  background: var(--card); color: var(--card-ink);
  border: 1px solid var(--card-line); border-radius: 22px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  padding: 10px 16px 16px;
}
/* portrait: a bottom sheet above the dock, with a grab handle */
.panel::before { content: ''; display: block; width: 38px; height: 4px; border-radius: 2px; background: rgba(38, 48, 61, 0.18); margin: 0 auto 8px; }
.panel-header { border-bottom-color: var(--card-line); color: var(--card-ink); font-size: 17px; }
.panel-close { background: rgba(38, 48, 61, 0.08); color: var(--card-ink); border-radius: 50%; min-width: 34px; min-height: 34px; }
.panel-row { color: var(--card-ink-dim); border-bottom: 1px dashed rgba(38, 48, 61, 0.07); }
.panel-row:last-of-type { border-bottom: none; }
.panel-row span:last-child { color: var(--card-ink); }
.board-btn { border-radius: 14px; min-height: 50px; font-size: 15px; background: linear-gradient(180deg, #3cc07c, #22945b); }
/* 옮기기: a plain secondary action, lighter than 탑승하기 and not a danger style */
.move-btn { width: 100%; min-height: 44px; margin-top: 10px; border: 1.5px solid var(--card-line); border-radius: 14px; background: rgba(38, 48, 61, 0.06); color: var(--card-ink); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; transition: transform 0.1s ease; }
.move-btn .ico { width: 20px; height: 20px; }
.move-btn:active { transform: scale(0.96); }
/* destructive = secondary: outlined and smaller, so it never outweighs 탑승하기 */
/* can't get guests: a soft amber note under the header, not a button (§6) */
.ride-warn { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; padding: 9px 12px; border-radius: 14px; background: #fff4e0; border: 1px solid rgba(224, 160, 64, 0.45); color: var(--card-ink); font-size: 13px; line-height: 1.35; }
.ride-warn b { color: #9a5b00; font-size: 14px; }
.ride-warn.hidden { display: none; }
/* 길 놓기: lays the blinking tiles in one tap; sits right of the text, spanning its three lines */
.ride-warn { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: center; }
.ride-warn > :not(button) { grid-column: 1; }
.warn-path-btn { grid-column: 2; grid-row: 1 / span 3; min-height: 44px; padding: 0 12px; border: 1.5px solid rgba(224, 160, 64, 0.7); border-radius: 12px; background: #fff; color: #7a4800; font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 5px; white-space: nowrap; transition: transform 0.1s ease; }
.warn-path-btn .ico { width: 20px; height: 20px; }
.warn-path-btn:active { transform: scale(0.92); }
.warn-path-btn.hidden { display: none; }
#ride-panel.stall .rating-row { display: none; }
#ride-panel .panel-row.hidden { display: none; }
#ride-panel.stall .panel-row:has(#ride-total) { border-bottom: none; }
.danger-btn { background: transparent; color: #d9443a; border: 1.5px solid rgba(217, 68, 58, 0.55); box-shadow: none; min-height: 40px; font-size: 13px; }
.park-sub { color: var(--card-ink-dim); }
.park-row { background: rgba(38, 48, 61, 0.05); }
.park-row.current { background: #e6f6ec; }
.park-row-date { color: var(--card-ink-dim); }
.park-row-tag { color: #22945b; font-weight: 700; }
.park-row-btn { background: rgba(38, 48, 61, 0.08); color: var(--card-ink); font-weight: 700; }
.park-row-btn.danger { background: transparent; color: #d9443a; border: 1.5px solid rgba(217, 68, 58, 0.45); }
.preset-card { background: rgba(38, 48, 61, 0.04); border: 1px solid var(--card-line); border-radius: 16px; padding: 10px 12px 12px; margin-bottom: 8px; }
.preset-desc { color: var(--card-ink-dim); }
.preset-card .board-btn { min-height: 42px; margin-top: 8px; background: linear-gradient(180deg, #ff9a5c, var(--primary)); }
/* landscape phones: a side sheet on the right instead of covering the middle */
@media (orientation: landscape) and (max-height: 500px) {
  .panel { left: auto; right: calc(env(safe-area-inset-right, 0px) + 8px); top: calc(env(safe-area-inset-top, 0px) + 56px); bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); width: 330px; max-height: none; margin: 0; }
  .panel::before { display: none; }
}

/* editor and preset bars, toasts: same bright look */
#design-hint, #preset-hint, .toast {
  background: var(--card); color: var(--card-ink); border: 1px solid var(--card-line);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.toast { border-radius: 999px; font-weight: 700; }
#design-bar .tool-btn, #preset-bar .tool-btn {
  background: var(--card); color: var(--card-ink); border: 1px solid var(--card-line);
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
}
#design-bar .tool-btn .tool-label, #preset-bar .tool-btn .tool-label { color: var(--card-ink-dim); font-weight: 700; }
#design-bar .tool-btn.active { background: #e6efff; }
#design-bar .tool-btn.invalid { background: #eceef1; color: #9aa1ab; opacity: 0.75; }
#design-bar .tool-btn.invalid .tool-label { color: #9aa1ab; }
#design-complete:not(:disabled) { background: linear-gradient(180deg, #3cc07c, #22945b); }
#design-complete:not(:disabled) .tool-label { color: #fff; }
/* landscape: two columns of stats so 탑승하기 fits without scrolling */
@media (orientation: landscape) and (max-height: 500px) {
  #ride-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; align-content: start; }
  #ride-panel.hidden { display: none; }
  #ride-panel > :not(.panel-row) { grid-column: 1 / -1; }
  #ride-panel .panel-row { padding: 4px 0; font-size: 13px; }
  #ride-panel .panel-header { margin-bottom: 4px; padding-bottom: 6px; }
  #ride-panel .board-btn { margin-top: 6px; min-height: 44px; }
  #ride-panel .danger-btn { margin-top: 6px; min-height: 36px; }
  #ride-panel .ride-warn { margin-bottom: 2px; padding: 5px 10px; font-size: 12px; line-height: 1.25; gap: 0; }
  #ride-panel .ride-warn b { font-size: 13px; }
  /* with the warning shown, 탑승하기 · 옮기기 · 철거 share one row so the sheet still needs no scroll */
  #ride-panel.warn { grid-template-columns: repeat(6, 1fr); column-gap: 8px; }
  #ride-panel.warn > .panel-row { grid-column: span 3; padding: 3px 0; }
  #ride-panel.warn > button { grid-column: span 3; }
  #ride-panel.warn > #ride-board:not(.hidden), #ride-panel.warn > #ride-board:not(.hidden) ~ button { grid-column: span 2; font-size: 13px; }
  /* stalls show 3 stats: 누적 이용객 takes the whole second row instead of leaving an empty cell */
  #ride-panel.stall > .panel-row:has(#ride-total) { grid-column: 1 / -1; }
  /* up to 9 facts (§6): tighter rows, and the long 높이 value takes a whole row, so a track ride's
     panel with the warning card still fits the short side sheet without scrolling */
  #ride-panel { padding: 6px 14px 8px; }
  #ride-panel .panel-header { margin-bottom: 2px; padding-bottom: 4px; }
  #ride-panel .panel-row { padding: 2px 0; font-size: 12px; line-height: 1.3; }
  /* an odd number of facts must not pull the first button up beside the last one */
  #ride-panel > #ride-board, #ride-panel > #ride-board.hidden + .move-btn { grid-column-start: 1; }
  #ride-panel.warn > #ride-board:not(.hidden) { grid-column: 1 / span 2; }
  #ride-panel.warn > .panel-row { padding: 1px 0; }
  #ride-panel > .panel-row:has(#ride-height), #ride-panel.warn > .panel-row:has(#ride-height) { grid-column: 1 / -1; }
  /* 옮기기 and 철거 share one row so the coaster panel still fits the short side sheet */
  #ride-panel > .move-btn, #ride-panel > .danger-btn { grid-column: auto; margin-top: 4px; min-height: 44px; }
  #ride-panel > .board-btn { margin-top: 4px; }
}

.install-btn { width: 100%; min-height: 44px; margin-top: 8px; border: 1.5px solid #2f7dd1; border-radius: 14px; background: #eaf2ff; color: #2f5fb3; font-size: 14px; font-weight: 800; }
.install-btn.hidden { display: none; }
.app-version { margin-top: 6px; text-align: center; font-size: 11px; line-height: 1.3; color: var(--card-ink-dim); }
/* version + 업데이트 share one row at the bottom of 내 공원 (§6, §10) */
.app-update { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.app-update-text { flex: 1; min-width: 0; }
.app-update .app-version { margin-top: 0; text-align: left; }
.app-update .update-btn { width: auto; margin-top: 0; padding: 0 14px; flex: none; }
.update-btn.fresh { background: linear-gradient(180deg, #3cc07c, #22945b); color: #fff; border-color: transparent; }
.update-btn.fresh .ico { filter: brightness(0) invert(1); }
.update-btn:disabled { opacity: 0.6; }

#design-bar .tool-icon.ico, #preset-bar .tool-icon.ico { width: 24px; height: 24px; font-size: 0; }
#design-bar .tool-btn.invalid .ico { opacity: 0.45; filter: grayscale(1); }
#design-mountain.active { background: #fff1dc; box-shadow: 0 0 0 2px #e0a040 inset; }
#design-tunnel.active { background: #e3f1ff; box-shadow: 0 0 0 2px #2f8ff0 inset; }

/* ride picker: opens above the dock from the 놀이기구 button */
#ride-picker {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 82px);
  display: grid; grid-template-columns: repeat(3, 76px); gap: 6px; padding: 8px;
  background: var(--card); border: 1px solid var(--card-line); border-radius: 20px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25); z-index: 12;
}
#ride-picker.hidden { display: none; }
#ride-picker .tool-btn { background: rgba(38, 48, 61, 0.04); border: none; box-shadow: none; min-height: 64px; border-radius: 14px; backdrop-filter: none; -webkit-backdrop-filter: none; }
#ride-picker .tool-icon { width: 30px; height: 30px; font-size: 0; }
#ride-picker .tool-label { font-size: 11px; font-weight: 700; color: var(--card-ink-dim); white-space: normal; text-align: center; line-height: 1.15; }
#ride-picker .tool-btn.active { background: #e6efff; }