/* 3D Screentoned Manga Bangkok Walkthrough — PLUB house style */
.street-3d-stage {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--paper, #ffffff);
  overflow: hidden;
  touch-action: none;
}
.street-3d-stage[hidden] {
  display: none;
}

.model-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
.model-canvas:active {
  cursor: grabbing;
}
.model-canvas:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

.model-bar {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  pointer-events: none;
  z-index: 10;
}
.model-bar > * {
  pointer-events: auto;
}

/* Segment roles: neighbourhood (secondary nav), mode (primary action), TOD (tertiary visual) */
.model-seg {
  display: inline-flex;
  border: 1px solid var(--rule, #b6bfc1);
  background: var(--paper, #ffffff);
}
.model-seg--area { border-color: var(--rule, #b6bfc1); }
.model-seg--mode { border-color: var(--ink, #7d133a); }
.model-seg--tod { border-color: var(--muted); }

.model-seg button {
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid var(--rule, #b6bfc1);
  background: none;
  color: var(--muted);
  font: 500 var(--small)/1 var(--font);
  letter-spacing: .02em;
  cursor: pointer;
  white-space: nowrap;
}
.model-seg button:last-child { border-right: 0; }

/* Neighbourhood segment — subtle */
.model-seg--area button { color: var(--muted); font-size: var(--micro); }
.model-seg--area button[aria-pressed="true"] {
  background: var(--ink, #7d133a); color: var(--paper, #ffffff); font-weight: 600;
}

/* Mode segment — primary action, emphasized */
.model-seg--mode button { color: var(--ink); font-weight: 600; font-size: var(--small); }
.model-seg--mode button[aria-pressed="true"] {
  background: var(--ink, #7d133a); color: var(--paper, #ffffff);
}

/* TOD segment — tertiary visual setting, subtle */
.model-seg--tod button { color: var(--muted); font-size: var(--micro); font-weight: 400; }
.model-seg--tod button[aria-pressed="true"] {
  background: var(--wash, #f4f4f0); color: var(--ink, #7d133a); font-weight: 600;
}

.model-close {
  margin-left: auto;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--ink, #7d133a);
  background: var(--paper, #ffffff);
  color: var(--ink, #7d133a);
  font: 600 var(--small)/1 var(--font);
  cursor: pointer;
}
.model-close:hover {
  background: var(--ink, #7d133a);
  color: var(--paper, #ffffff);
}

.model-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 6px 12px;
  border: 1px solid var(--rule, #b6bfc1);
  background: rgba(255, 255, 255, 0.94);
  color: var(--muted);
  font-size: var(--micro);
  letter-spacing: .04em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 10;
}

.model-joy {
  position: absolute;
  left: 20px;
  bottom: 60px;
  width: 100px;
  height: 100px;
  border: 2px solid var(--ink, #7d133a);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.65);
  touch-action: none;
  z-index: 15;
}
.model-joy span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  background: var(--ink, #7d133a);
}

.model-pins {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.model-pin {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid var(--ink, #7d133a);
  background: var(--paper, #f9c1ce);
  cursor: pointer;
  pointer-events: auto;
  white-space: nowrap;
}
.pin-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.pin-dot.cafe { background: var(--ink, #7d133a); }
.pin-dot.coworking { background: var(--accent, #dd4027); }
.pin-dot.library { background: #fff; box-shadow: inset 0 0 0 2px var(--ink, #7d133a); }
.pin-dot.restaurant { background: var(--ink-45, #c08da2); }
.pin-dot.cannabis { background: var(--cat-cannabis, #87c540); }
.pin-tag {
  font-size: var(--micro);
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-card {
  position: absolute;
  right: 14px;
  bottom: 24px;
  width: min(320px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid var(--ink, #7d133a);
  background: var(--paper, #f9c1ce);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 20;
}
.model-card[hidden] {
  display: none;
}
.model-card-title {
  font-size: var(--small);
  font-weight: 600;
  line-height: 1.25;
  margin-right: 24px;
}
.model-card-meta {
  font-size: var(--small);
  color: var(--muted);
}
.model-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.model-card-actions button {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--ink, #7d133a);
  background: none;
  font-size: var(--small);
  font-weight: 500;
  cursor: pointer;
}
.model-card-actions .model-card-stand {
  background: var(--ink, #7d133a);
  color: var(--paper, #f9c1ce);
}
.model-card-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border: 0;
  background: none;
  font-size: var(--big);
  line-height: 1;
  cursor: pointer;
}

/* The scene owns the viewport. Its controls occupy an edge and wrap in reading order. */
dialog.street-3d-stage {
  margin:0; border:0; padding:0; width:100%; height:100dvh;
  max-width:none; max-height:none; color:var(--ink);
}
.street-3d-stage:not([open]) { display:none; }
.model-pin[hidden] { display:inline-flex; visibility:hidden; pointer-events:none; }
.model-bar { align-items:start; gap:5px 6px; }
.model-area, .model-light, .model-look, .model-finish, .model-lens { max-width:100%; min-width:0; }
.model-bar select, .model-close, .model-tool-btn, .model-start button {
  max-width:100%; min-height:36px; padding:4px 8px; border:1px solid var(--rule);
  border-radius:0; background:var(--paper); color:var(--ink); font:inherit;
}
.model-tool-btn {
  font-size: var(--micro);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.model-tool-btn[aria-pressed="true"] {
  background: var(--ink, #7d133a);
  color: var(--paper, #f9c1ce);
  border-color: var(--ink, #7d133a);
}
.model-seg { max-width:100%; }
.model-seg button { font-size:inherit; white-space:normal; }
.model-close { margin-left:0; border-color:var(--ink, #7d133a); font-weight:600; }
.model-coverage {
  display:flex; flex-wrap:wrap; align-items:center; gap:0 8px;
  flex-basis:max-content; max-width:100%; padding:4px 8px;
  background:var(--paper); color:var(--ink); line-height:1.3;
  font-size:var(--micro);
}
.model-relief { min-height:32px; padding:0; text-decoration:underline; text-underline-offset:3px; }
.model-hint { max-width:calc(100% - 24px); text-transform:none; }
.model-start { padding:14px; max-width:35em; }
.model-start-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.model-card-actions { flex-wrap:wrap; }
.model-card-actions button { font-size:inherit; }

/* Rokehan 2D Minimap radar */
.model-minimap {
  position: absolute;
  right: 12px;
  bottom: 48px;
  width: 120px;
  height: 120px;
  border: 1.5px solid var(--ink, #7d133a);
  background: #141824;
  z-index: 12;
  cursor: crosshair;
  pointer-events: auto;
}
.model-minimap[hidden],
.street-3d-stage:has(.model-card:not([hidden])) .model-minimap { display: none; }

@media(max-width:599px) {
  .model-coverage { flex-basis:100%; }
  .model-hint { font-size:var(--micro); }
  .model-minimap {
    width: 88px;
    height: 88px;
    bottom: 52px;
  }
}

.model-footer {
  display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:end;
  gap:4px 8px; pointer-events:none;
}
.model-footer .model-hint { position:static; max-width:100%; margin-right:auto; }
.model-attribution {
  padding:4px 6px; background:var(--paper); color:var(--ink);
  font-size:var(--micro); pointer-events:auto;
}

.model-bottom {
  position:absolute; left:12px; right:12px; bottom:12px; z-index:10;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.model-bottom .model-joy { position:relative; inset:auto; align-self:flex-start; pointer-events:auto; }
.model-bottom .model-card { position:relative; inset:auto; align-self:flex-end; pointer-events:auto; }