/* The map app (home page in each language). Shared tokens and cards come from base.css. */
body.appbody { overflow: hidden; }
.app { position: fixed; inset: 0; display: grid; grid-template-columns: 470px minmax(0, 1fr); }

/* ---------------- panel ---------------- */
.panel { position: relative; z-index: 3; display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }
.handle { display: none; }
.top { display: flex; align-items: center; gap: 12px; padding: 20px 22px 0; }
.top .brand { flex: 1; }
.top .brand-text b { white-space: normal; line-height: 1.12; }

.searchbox {
  margin: 18px 22px 0; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 8px 0 16px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-1);
}
.searchbox:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px var(--ring); }
.searchbox > .ms { color: var(--muted); font-size: 24px; }
.searchbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 500 16.5px Manrope, sans-serif; color: var(--ink); }
.searchbox input::placeholder { color: var(--muted); }
.searchbox input::-webkit-search-cancel-button { display: none; }
.clear { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }

.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 22px 0; }
.qbtn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 68px; padding: 8px 4px;
  border-radius: 18px; background: var(--card); border: 1.5px solid var(--line); color: var(--ink); text-decoration: none;
  font-weight: 800; font-size: 13px; text-align: center; line-height: 1.15; transition: transform .15s var(--ease), border-color .15s;
}
.qbtn .ms { font-size: 24px; color: var(--blue); }
.qbtn:hover { border-color: var(--blue); }
.qbtn:active { transform: scale(.97); }
.qbtn[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.qbtn[aria-pressed="true"] .ms { color: var(--yellow); }
#favs .ms { color: #e5484d; }
.qbtn .favcount { position: absolute; top: 8px; right: 10px; }

.cats, .kinds {
  display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 16px 22px 2px; scroll-behavior: smooth;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 30px), transparent); mask: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 30px), transparent);
}
.cats::-webkit-scrollbar, .kinds::-webkit-scrollbar { display: none; }
.cat {
  flex: none; display: inline-flex; align-items: center; gap: 9px; min-height: 50px; padding: 0 16px 0 6px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--line); box-shadow: var(--shadow-1); font-weight: 800; font-size: 14.5px; white-space: nowrap;
}
.cat i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; }
.cat i .ms { font-size: 21px; }
.cat small { color: var(--muted); font-weight: 800; font-size: 12.5px; }
.cat[aria-pressed="true"] { background: color-mix(in srgb, var(--c) 15%, var(--card)); border-color: var(--c); }
.cat.all i { background: linear-gradient(var(--blue) 0 50%, var(--yellow) 50%); }
.kinds { padding-top: 12px; }
.kind { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 15px 0 12px; border-radius: 999px; border: 1.5px dashed color-mix(in srgb, var(--c) 45%, var(--line)); font-weight: 800; font-size: 13.5px; white-space: nowrap; color: var(--ink-2); }
.kind .ms { font-size: 19px; color: var(--c); }
.kind small { color: var(--muted); }
.kind[aria-pressed="true"] { background: var(--c); border: 1.5px solid var(--c); color: #fff; }
.kind[aria-pressed="true"] .ms, .kind[aria-pressed="true"] small { color: #fff; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 22px 12px; }
.count { font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .03em; text-transform: uppercase; }
.radius { display: flex; gap: 6px; }
.radius button { min-height: 36px; padding: 0 12px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--line); font-weight: 800; font-size: 13px; }
.radius button[aria-pressed="true"] { background: var(--ink); color: var(--panel); border-color: var(--ink); }
.viewbtn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 12px; background: var(--card-2); color: var(--ink-2); font-size: 13px; font-weight: 800; }
.viewbtn .ms { font-size: 19px; }

.scroller { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 24px; }
.list { grid-template-columns: 1fr; gap: 12px; }
.list .pcard { flex-direction: row; align-items: stretch; min-height: 120px; }
.list .pc-cover { flex: none; width: 120px; aspect-ratio: auto; }
.list .pc-cover .big { font-size: 46px; }
.list .pc-badge { left: 8px; bottom: 8px; width: 30px; height: 30px; }
.list .pc-badge .ms { font-size: 17px; }
.list .pc-body { justify-content: center; padding: 14px 58px 14px 16px; }
.list .pc-name { font-size: 16.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list > li > .heart { top: 50%; translate: 0 -50%; right: 10px; box-shadow: none; background: transparent; }
.pc-dist { color: var(--blue); font-weight: 800; }
.empty { list-style: none; text-align: center; color: var(--muted); padding: 50px 20px; font-weight: 700; }
.seo-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 6px; }
.seo-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--line); color: var(--ink-2); text-decoration: none; font-weight: 700; font-size: 13.5px; }
.seo-links .ms { font-size: 18px; color: var(--blue); }

/* ---------------- map ---------------- */
.stage { position: relative; min-width: 0; }
#map { position: absolute; inset: 0; background: var(--bg); }
.maplibregl-ctrl-attrib { font-size: 10.5px; }
.maplibregl-ctrl-group { border-radius: 14px !important; box-shadow: var(--shadow-2) !important; overflow: hidden; }
.maplibregl-ctrl-group button { width: 40px !important; height: 40px !important; }
.map-tools { position: absolute; right: 16px; bottom: calc(var(--sheet, 0px) + 32px); z-index: 5; display: grid; gap: 12px; transition: bottom .3s var(--ease); }
.tool { width: 52px; height: 52px; border-radius: 17px; background: var(--card); color: var(--ink); box-shadow: var(--shadow-2); display: grid; place-items: center; }
.tool .ms { font-size: 24px; }
.tool.on { color: #fff; background: var(--blue); }

.mk { cursor: pointer; }
.mk:hover, .mk.top { z-index: 4; }
.pin { position: relative; transition: transform .2s var(--ease); }
.pin .dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(10, 20, 40, .3); }
.pin .dot .ms { font-size: 20px; }
.pin.photo .dot { width: 48px; height: 48px; background: var(--c) center / cover no-repeat; }
.pin.photo .b { position: absolute; right: -4px; bottom: -3px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #fff; border: 2px solid #fff; }
.pin.photo .b .ms { font-size: 13px; }
.pin.fav::after { content: "♥"; position: absolute; top: -6px; left: -4px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #e5484d; font-size: 12px; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.mk:hover .pin, .pin.hot { transform: scale(1.16); }
.pin.on { transform: scale(1.3); }
.mk:has(.pin.on) { z-index: 5; }
.pin.on::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: var(--c); opacity: .35; animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { from { transform: scale(.7); opacity: .5; } to { transform: scale(1.5); opacity: 0; } }
.cl { --s: 46px; width: var(--s); height: var(--s); border-radius: 50%; padding: 4px; background: var(--ring-bg); box-shadow: 0 6px 16px rgba(10, 20, 40, .28); transition: transform .2s var(--ease); }
.mk:hover .cl { transform: scale(1.08); }
.cl span { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink); font: 700 15px Unbounded, Manrope, sans-serif; }
.me { width: 20px; height: 20px; border-radius: 50%; background: var(--blue); border: 3px solid #fff; box-shadow: 0 0 0 9px rgba(0, 87, 183, .2); }

.hover-card { position: fixed; z-index: 20; pointer-events: none; display: flex; gap: 10px; align-items: center; max-width: 290px; background: var(--card); border-radius: 16px; padding: 7px 14px 7px 7px; box-shadow: var(--shadow-2); transform: translate(-50%, calc(-100% - 32px)); }
.hover-card img, .hover-card .hc-ic { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: none; background: var(--c); color: #fff; display: grid; place-items: center; }
.hover-card b { display: block; font-size: 14px; line-height: 1.2; }
.hover-card small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }

/* ---------------- detail drawer ---------------- */
.detail { position: fixed; z-index: 30; left: 0; top: 0; bottom: 0; width: 470px; background: var(--panel); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow-3); animation: slide-in .28s var(--ease); }
@keyframes slide-in { from { transform: translateX(-24px); opacity: 0; } }
.hero { position: relative; height: 300px; background: var(--c); overflow: hidden; }
.hero .slides { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero .slides::-webkit-scrollbar { display: none; }
.hero .slides img { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: center; }
.hero.blank { display: grid; place-items: center; color: #fff; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 12px, transparent 12px 24px), radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--c) 55%, #fff), var(--c)); }
.hero.blank > .ms { font-size: 100px; width: auto; }
.hero-bar { position: absolute; z-index: 2; top: 14px; left: 14px; right: 14px; display: flex; gap: 10px; }
.hero-bar .sp { flex: 1; }
.hbtn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #14171c; background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.hbtn[aria-pressed="true"] { color: #e5484d; }
.hbtn[aria-pressed="true"] .ms { font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
.hero .dots { position: absolute; z-index: 2; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; }
.hero .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .6); transition: width .2s; }
.hero .dots i.on { width: 22px; border-radius: 4px; background: #fff; }
.d-body { padding: 22px 24px 34px; }
.d-kind { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 13px 0 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 15%, var(--card)); color: color-mix(in srgb, var(--c) 70%, var(--ink)); font-weight: 800; font-size: 13.5px; }
.d-kind .ms { font-size: 18px; }
.d-body h2 { font-family: Unbounded, Manrope, sans-serif; font-weight: 700; font-size: 25px; letter-spacing: -.02em; line-height: 1.18; margin: 14px 0 8px; }
.d-meta { color: var(--muted); font-size: 14px; font-weight: 700; margin-bottom: 18px; }
.d-desc { font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 18px 0; }
.d-rows { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.d-row { display: flex; gap: 14px; align-items: flex-start; padding: 15px 16px; font-size: 15px; line-height: 1.45; border-top: 1px solid var(--line); }
.d-row:first-child { border-top: 0; }
.d-row > .ms { color: var(--muted); }
.d-row a { font-weight: 700; text-decoration: none; word-break: break-word; }
.d-row .grow { flex: 1; min-width: 0; }
.d-row .copy { width: 40px; height: 40px; margin: -8px -6px -8px 0; border-radius: 10px; display: grid; place-items: center; color: var(--muted); }
.d-page { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin-top: 16px; border-radius: 16px; background: var(--card-2); color: var(--ink); text-decoration: none; font-weight: 800; }
.sect { margin-top: 26px; }
.sect h3 { font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.rail-x { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 2px 24px 8px; scroll-snap-type: x proximity; }
.rail-x::-webkit-scrollbar { display: none; }
.mini { flex: none; width: 160px; text-align: left; scroll-snap-align: start; text-decoration: none; color: inherit; }
.mini .mc { width: 160px; height: 106px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: var(--c); color: #fff; }
.mini .mc img { width: 100%; height: 100%; object-fit: cover; }
.mini b { display: block; font-size: 14px; margin-top: 8px; line-height: 1.25; }
.mini small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }

.back-map { display: none; position: fixed; z-index: 25; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); translate: -50% 0; align-items: center; gap: 8px; min-height: 54px; padding: 0 22px 0 18px; border-radius: 999px; background: var(--ink); color: var(--panel); font-weight: 800; font-size: 15px; box-shadow: var(--shadow-3); }

/* ---------------- fullscreen list ---------------- */
[data-view="grid"] .app { grid-template-columns: minmax(0, 1fr); }
[data-view="grid"] .stage { display: none; }
[data-view="grid"] .panel { height: 100dvh; border: 0; border-radius: 0; box-shadow: none; transition: none; }
[data-view="grid"] .handle { display: none; }
[data-view="grid"] .top, [data-view="grid"] .searchbox, [data-view="grid"] .quick, [data-view="grid"] .cats, [data-view="grid"] .kinds, [data-view="grid"] .toolbar { width: auto; margin-left: max(22px, calc((100% - 1240px) / 2)); margin-right: max(22px, calc((100% - 1240px) / 2)); padding-left: 0; padding-right: 0; }
[data-view="grid"] .quick { max-width: 620px; }
[data-view="grid"] .scroller { padding: 4px max(22px, calc((100% - 1240px) / 2)) 120px; }
[data-view="grid"] .list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
[data-view="grid"] .list .pcard { flex-direction: column; min-height: 0; }
[data-view="grid"] .list .pc-cover { width: auto; aspect-ratio: 3 / 2; }
[data-view="grid"] .list .pc-body { padding: 14px 18px 18px; }
[data-view="grid"] .list > li > .heart { top: 12px; right: 12px; translate: none; background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: var(--shadow-1); }
[data-view="grid"] .back-map { display: inline-flex; }
[data-view="grid"] .detail { left: auto; right: 0; width: min(500px, 100vw); }

/* ---------------- phones ---------------- */
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .stage { position: fixed; inset: 0; }
  .panel {
    position: fixed; left: 0; right: 0; bottom: 0; height: var(--sheet-h, 52dvh); border-right: 0; border-radius: 28px 28px 0 0;
    box-shadow: 0 -12px 40px rgba(10, 20, 40, .18); transition: height .32s var(--ease);
  }
  .panel.dragging { transition: none; }
  .handle { display: block; padding: 12px 0 4px; touch-action: none; cursor: grab; }
  .handle span { display: block; margin: 0 auto; width: 48px; height: 5px; border-radius: 5px; background: var(--line); }
  .top { padding: 4px 18px 0; touch-action: none; }
  .logo { width: 38px; height: 38px; border-radius: 12px; }
  .brand-text b { font-size: 16px; }
  .brand-text small { font-size: 12px; }
  .langs a { min-width: 40px; height: 34px; }
  .searchbox { margin: 14px 18px 0; min-height: 54px; }
  .quick { margin: 12px 18px 0; gap: 8px; }
  .qbtn { min-height: 64px; font-size: 12.5px; }
  .cats, .kinds { padding-left: 18px; padding-right: 18px; }
  .toolbar { padding: 14px 18px 10px; }
  .scroller { padding: 0 12px calc(24px + env(safe-area-inset-bottom)); }
  .list .pc-cover { width: 108px; }
  .detail { left: 0; right: 0; top: auto; width: auto; height: 86dvh; border-radius: 28px 28px 0 0; animation: slide-up .32s var(--ease); padding-bottom: env(safe-area-inset-bottom); }
  @keyframes slide-up { from { transform: translateY(40px); opacity: 0; } }
  .hero { height: 250px; border-radius: 28px 28px 0 0; }
  .maplibregl-ctrl-top-right { display: none; }
  .hover-card { display: none !important; }
  [data-view="grid"] .list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  [data-view="grid"] .list .pc-body { padding: 10px 12px 12px; }
  [data-view="grid"] .list .pc-name { font-size: 14.5px; }
  [data-view="grid"] .list > li > .heart { width: 38px; height: 38px; top: 8px; right: 8px; }
  [data-view="grid"] .detail { width: auto; }
}