:root {
  color-scheme: light;
  --ink: #1c1915;
  --muted: #6f675f;
  --line: #e6dfd6;
  --paper: #f6f3ee;
  --card: #fff;
  --green: #1f6b45;
  --pink: #e11d48;
  --bar: 58px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font: 16px/1.35 ui-sans-serif, system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

@media (min-width: 520px) {
  body { background: #ebe6df; }
  #gate, #app {
    max-width: 480px;
    margin: 0 auto;
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--line);
  }
  #gate { min-height: 100%; }
}

button, a { font: inherit; color: inherit; }

#gate {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
}

.gate-card {
  width: min(100%, 360px);
  text-align: center;
}

.gate-card h1 {
  margin: 0 0 8px;
  font-size: 32px;
  letter-spacing: -0.03em;
}

.gate-card p {
  margin: 0 0 22px;
  color: var(--muted);
}

.go {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 650;
}

#app {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
}

#app[hidden], #gate[hidden] { display: none !important; }

.top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 8px;
  background: rgba(246, 243, 238, 0.92);
  backdrop-filter: blur(10px);
}

.who { display: none; }

.switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(240px, 70%);
  background: #ebe4db;
  border-radius: 12px;
  padding: 3px;
}

.switch button {
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 650;
}

.switch button.on {
  background: #fff;
  box-shadow: 0 1px 2px rgba(28, 25, 21, 0.12);
}

.switch button:disabled {
  color: #b3aaa0;
}

.stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.panel.off { display: none; }

.map-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 16px;
  touch-action: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#map-host {
  width: 100%;
  height: 100%;
  min-width: 0;
}

#map-host svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

#map-host .aisle { cursor: pointer; }

#shelf-point { pointer-events: none; }

#map-host .aisle.is-on {
  fill: var(--pink);
  stroke: #9f1239;
}

#map-host .aisle.is-pulse {
  animation: aisle-pulse 480ms ease-out;
}

@keyframes aisle-pulse {
  0% { stroke: #e11d48; stroke-width: 14; }
  100% { stroke: #9f1239; stroke-width: 1; }
}

#tap-dot {
  position: fixed;
  z-index: 30;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border: 3px solid #e11d48;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
}

#tap-dot.on {
  animation: tap-ring 520ms ease-out;
}

@keyframes tap-ring {
  0% { transform: scale(0.4); opacity: 0.95; }
  100% { transform: scale(5.5); opacity: 0; }
}

.pick {
  flex: none;
  min-height: 72px;
  display: grid;
  place-items: center;
  background: #fff;
  border-top: 1px solid var(--line);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.pick.empty {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
}

.list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}

.list article {
  flex: 0 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}

.pic {
  height: 210px;
  background: #f0ebe4;
  display: grid;
  place-items: center;
}

.pic img {
  width: 100%;
  height: 210px;
  object-fit: contain;
  display: block;
  background: #f0ebe4;
}

.pic span { color: var(--muted); font-size: 14px; }

.body { padding: 12px 14px 14px; }

.name { font-size: 18px; font-weight: 680; }

.title { color: var(--muted); font-size: 14px; margin-top: 2px; }

.size { margin-top: 10px; font-size: 22px; font-weight: 680; }

.exact { color: var(--muted); font-size: 13px; }

.price { margin-top: 6px; font-size: 20px; color: var(--green); font-weight: 700; }

.per { color: var(--muted); font-size: 14px; }

.note { color: var(--muted); padding: 24px 8px; text-align: center; }

.tabs {
  flex: none;
  height: calc(var(--bar) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.tabs button {
  border: 0;
  background: transparent;
  color: #8a8178;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 650;
}

.tabs button svg { width: 24px; height: 24px; }

.tabs button.on { color: var(--green); }

.tabs button:disabled { color: #d0c8be; }

.err {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 32px;
  text-align: center;
}

.err a { color: var(--green); }