/* 苔庭の平屋 — 3D間取りビューア UI（ライトテーマのみ）
   Tokens: BRIEF §5-1. Layout: §5-2. No relative url() in this file (it is inlined by tools/build.mjs). */

:root {
  color-scheme: light;
  /* colour */
  --paper: #FFFFFF;
  --stage: #F2F2F0;
  --ink: #0D0D0D;
  --ink-2: #5E5E5A;
  --ink-3: #74746F;
  --ink-4: #A8A8A3;
  --rule: #E4E4E0;
  --hover: #F5F5F3;
  /* type */
  --f-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --f-ui: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  --f-en: "Syncopate", "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  /* shape & motion */
  --r: 2px;
  --sh-float: 0 8px 30px rgba(0, 0, 0, .08);
  --sh-hud: 0 2px 10px rgba(0, 0, 0, .05);
  --ease: cubic-bezier(.22, .7, .24, 1);
  --dur: 200ms;
  /* layout */
  --top-h: 56px;
  --panel-w: 340px;
  --play-h: 64px;
  --hud-m: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); }
body { overflow: hidden; overscroll-behavior: none; }
[hidden] { display: none !important; }

.app {
  position: fixed; inset: 0;
  display: grid;
  grid-template-columns: var(--panel-w) minmax(0, 1fr);
  grid-template-rows: var(--top-h) minmax(0, 1fr) var(--play-h);
  grid-template-areas: "top top" "panel stage" "panel play";
  background: var(--paper);
  color: var(--ink);
  font: 400 13px/1.6 var(--f-ui);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  word-break: auto-phrase;
  line-break: strict;
  overflow: hidden;
}
/* zero specificity so that any component rule with white-space: nowrap still wins (text-wrap resets the wrap mode) */
:where(.app p, .app h1, .app h2, .app h3, .app li, .app dd, .app dt, .app figcaption) { text-wrap: pretty; }
:where(.app) button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
:where(.app) input { font: inherit; color: inherit; }
.app :focus { outline: none; }
.app :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.app ::selection { background: var(--ink); color: #fff; }
.ico { display: block; flex: none; width: 16px; height: 16px; }
.en { font-family: var(--f-en); font-weight: 400; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow {
  margin: 0;
  font: 400 9px/1.5 var(--f-en);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.note { margin: 24px 0 0; font-size: 11px; line-height: 1.75; color: var(--ink-3); }
.safe-probe { position: fixed; left: 0; bottom: 0; width: 0; height: env(safe-area-inset-bottom, 0px); visibility: hidden; pointer-events: none; }

/* ── buttons ─────────────────────────────────────────────── */
.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: var(--r);
  color: var(--ink-2);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.btn, .btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 14px;
  border: 1px solid var(--ink); border-radius: var(--r);
  background: var(--paper);
  font-size: 12px; font-weight: 500; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover, .btn-outline:hover { background: var(--ink); color: #fff; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #2B2B29; }
.btn-text {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 2px; font-size: 12px; font-weight: 500; color: var(--ink);
}
.btn-text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.btn-text:hover::after { transform: scaleX(1); }
.chip {
  display: inline-flex; align-items: center; gap: 3px;
  height: 24px; padding: 0 10px;
  border: 1px solid var(--rule); border-radius: 999px;
  font-size: 11px; line-height: 1; color: var(--ink-2); white-space: nowrap;
}
.chip b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.chip .k { color: var(--ink-3); margin-right: 4px; }
.chip .u { color: var(--ink-3); }

/* ── top bar ─────────────────────────────────────────────── */
.topbar {
  grid-area: top;
  position: relative; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-width: 0;
  padding: 0 20px 0 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.tb-left { display: flex; align-items: center; gap: 20px; min-width: 0; }
.tb-title { display: flex; align-items: center; gap: 14px; white-space: nowrap; flex: none; }
.tb-sheet {
  font: 700 9px/1 var(--f-en); letter-spacing: .16em; color: var(--ink);
  padding: 4px 0 3px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.tb-name { margin: 0; font: 500 20px/1.2 var(--f-mincho); letter-spacing: .08em; }
.tb-chips {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  margin: 0; padding: 0 0 0 20px; list-style: none;
  border-left: 1px solid var(--rule);
  overflow: hidden;
}
.tb-right { display: flex; align-items: center; gap: 22px; flex: none; }
.seg { display: flex; align-items: center; }
.seg-bar { width: 1px; height: 14px; background: var(--rule); margin: 0 10px; flex: none; }
.seg button {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 3px;
  font-size: 12px; color: var(--ink-3); white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-checked="true"] { color: var(--ink); font-weight: 500; }
.seg button::after {
  content: ""; position: absolute; left: 3px; right: 3px; bottom: 2px; height: 1.5px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.seg button[aria-checked="true"]::after { transform: scaleX(1); }
.sw { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 1px; }
.sw-color { background: linear-gradient(135deg, #D8C3A0 0 50%, #6F8A55 50% 100%); }
.sw-model { background: linear-gradient(135deg, #FFFFFF 0 50%, #C9C9C4 50% 100%); box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .22); }
.check { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 32px; font-size: 12px; cursor: pointer; user-select: none; white-space: nowrap; }
.check input { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin: -7px 0 0; opacity: 0; }
.check-box {
  display: grid; place-items: center; width: 14px; height: 14px;
  border: 1px solid var(--ink-4); border-radius: var(--r); color: transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.check-box .ico { width: 10px; height: 10px; stroke-width: 1.75; }
.check input:checked + .check-box { background: var(--ink); border-color: var(--ink); color: #fff; }
.check:hover .check-box { border-color: var(--ink); }
.check input:focus-visible + .check-box { outline: 2px solid var(--ink); outline-offset: 2px; }
.tb-share { height: 32px; }
.share-pop {
  position: absolute; top: calc(100% + 8px); right: 16px; z-index: 40;
  width: min(380px, calc(100vw - 16px));
  padding: 14px 12px 12px 16px;
  background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-float);
}
.share-pop-t { margin: 0 0 8px; font-size: 12px; color: var(--ink-2); }
.share-pop-row { display: flex; align-items: center; gap: 6px; }
.share-pop input {
  flex: 1; min-width: 0; height: 36px; padding: 0 10px;
  border: 1px solid var(--ink); border-radius: var(--r); background: var(--paper);
  font-size: 12px; font-variant-numeric: tabular-nums;
}
.share-pop input:focus-visible { outline: 1px solid var(--ink); outline-offset: 0; }

/* ── panel ───────────────────────────────────────────────── */
.panel {
  grid-area: panel;
  position: relative; z-index: 10;
  display: flex; flex-direction: column;
  min-height: 0; min-width: 0;
  background: var(--paper);
  border-right: 1px solid var(--rule);
}
.sheet-grip { display: none; }
.tabs { display: flex; gap: 28px; flex: none; padding: 0 24px; border-bottom: 1px solid var(--rule); }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 7px;
  height: 52px; font-size: 13px; font-weight: 500; color: var(--ink-3);
  transition: color var(--dur) var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease);
}
.tab[aria-selected="true"]::after { transform: scaleX(1); }
.tab-count {
  min-width: 20px; padding: 2px 6px; border-radius: 999px; background: var(--hover);
  font-size: 10px; line-height: 1.2; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.tab-count:empty { display: none; }
.panes { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
.pane { padding: 28px 24px 36px; }

/* overview */
.pane-head { margin-bottom: 24px; }
.floor-title { margin: 10px 0 0; font: 500 28px/1.25 var(--f-mincho); letter-spacing: .04em; }
.ft-floor { display: block; }
.ft-dash { color: var(--ink-4); margin-right: .45em; font-size: 15px; }
.ft-sub { display: block; margin-top: 8px; font-size: 15px; line-height: 1.6; letter-spacing: .06em; color: var(--ink-2); }
.floor-title .ft-dash { display: none; }
.ft-sub::before { content: "— "; color: var(--ink-4); }
.stats { display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 32px; border-top: 1px solid var(--ink); }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 16px 0 14px; border-bottom: 1px solid var(--rule); min-width: 0; }
.stat:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--rule); }
.stat:nth-child(even) { padding-left: 18px; }
.stat dd { margin: 0; display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.stat dd b { font: 500 30px/1.1 var(--f-mincho); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.stat dd span { font-size: 12px; color: var(--ink-2); }
.stat .ph { font-style: normal; color: var(--ink-4); }
.stat dt { margin-top: 6px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.sec-title { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.room-list, .f-list { list-style: none; margin: 0; padding: 0; }
.room-list { border-top: 1px solid var(--rule); }
.room-row, .f-row {
  position: relative; width: 100%; text-align: left;
  border-bottom: 1px solid var(--rule);
  transition: background-color var(--dur) var(--ease);
}
.room-row::before, .f-row::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; background: var(--ink);
  transform: scaleY(0); transition: transform var(--dur) var(--ease);
}
.room-row:hover, .room-row.is-hover, .f-row:hover, .f-row.is-hover { background: var(--hover); }
.room-row.is-selected::before, .f-row.is-selected::before { transform: scaleY(1); }
.room-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto 50px; align-items: baseline; column-gap: 10px;
  padding: 11px 6px 11px 12px;
}
.rr-name { font-size: 13px; font-weight: 500; white-space: nowrap; }
.rr-en { font: 400 9px/1 var(--f-en); letter-spacing: .14em; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-area { text-align: right; white-space: nowrap; }
.rr-area b { font: 500 15px/1 var(--f-mincho); font-variant-numeric: tabular-nums; }
.rr-area small { margin-left: 2px; font-size: 10px; color: var(--ink-3); }
.rr-furn { text-align: right; font-size: 11px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.room-row.is-selected .rr-name { font-weight: 700; }

/* furniture */
/* sticks with 8px of its padding still visible above the field */
.search-bar { position: sticky; top: -12px; z-index: 2; margin: -28px -24px 0; padding: 20px 24px 10px; background: var(--paper); box-shadow: 0 1px 0 transparent; transition: box-shadow var(--dur) var(--ease); }
.search {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px 0 12px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper);
  transition: border-color var(--dur) var(--ease);
}
.panes.is-scrolled .search-bar { box-shadow: 0 1px 0 var(--rule); }
.search:hover { border-color: var(--ink-4); }
.search:focus-within { border-color: var(--ink); }
.search-ico { color: var(--ink-3); display: grid; }
.search-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none !important; background: transparent; font-size: 13px; -webkit-appearance: none; appearance: none; }
.search-input::placeholder { color: var(--ink-4); }
.search-input::-webkit-search-cancel-button, .search-input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.f-summary { margin: 4px 0 0; font-size: 11px; color: var(--ink-3); }
.f-group { margin-top: 22px; }
.fg-head {
  display: flex; align-items: baseline; gap: 8px; margin: 0; padding-bottom: 7px;
  border-bottom: 1px solid var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.fg-en { font: 400 9px/1 var(--f-en); letter-spacing: .14em; color: var(--ink-3); }
.fg-count { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fg-count small { font-size: 10px; margin-left: 1px; }
.f-row {
  display: grid; grid-template-columns: minmax(0, auto) auto 1fr; grid-template-areas: "name badge ." "dims dims dims";
  align-items: center; column-gap: 8px; row-gap: 2px;
  padding: 9px 8px 10px 12px;
}
.fr-name { grid-area: name; font-size: 13px; font-weight: 500; line-height: 1.45; }
.f-row.is-selected .fr-name { font-weight: 700; }
.badge {
  grid-area: badge; justify-self: start;
  padding: 2px 7px 2px 6px; border: 1px solid var(--ink); border-radius: 999px;
  font-size: 10px; line-height: 1.1; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fr-dims { grid-area: dims; font-size: 11px; line-height: 1.4; color: var(--ink-3); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.f-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; padding: 56px 8px; text-align: center; font-size: 12px; color: var(--ink-2); }
.f-empty .ico { width: 20px; height: 20px; color: var(--ink-4); }

/* plan */
.plan-head { display: flex; align-items: center; justify-content: space-between; margin: -6px 0 10px; }
.plan-fig { margin: 0; }
.plan-view { position: relative; line-height: 0; background: #FFFFFF; cursor: crosshair; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.panel-view { border: 1px solid var(--rule); }
.plan-img { display: block; width: 100%; height: auto; }
.plan-marks { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.pm-cross { stroke: var(--ink); stroke-width: 1; stroke-opacity: .42; stroke-dasharray: 3 3; }
.pm-halo { fill: none; stroke: #FFFFFF; stroke-width: 4.5; stroke-linejoin: round; stroke-opacity: .95; }
.pm-frame { fill: none; stroke: var(--ink); stroke-width: 1.75; stroke-linejoin: round; }
.pm-fill { fill: var(--ink); fill-opacity: .07; }
.pm-dot { fill: var(--ink); }
.pm-dot-halo { fill: #FFFFFF; }
.pm-hover { fill: rgba(13, 13, 13, .06); stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 2; }
.plan-north {
  position: absolute; top: 8px; right: 8px;
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px 5px 5px;
  background: rgba(255, 255, 255, .92); border-radius: var(--r); box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
  font: 700 9px/1 var(--f-en); letter-spacing: .12em; color: var(--ink); pointer-events: none;
}
.plan-north .ico { width: 12px; height: 12px; transform: rotate(90deg); fill: var(--ink); }
.plan-cap { margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--ink-3); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.plan-sel { margin: 14px 0 0; padding: 10px 12px; background: var(--hover); border-radius: var(--r); font-size: 12px; color: var(--ink-2); }
.plan-sel b { color: var(--ink); font-weight: 500; }

/* ── stage & HUD ─────────────────────────────────────────── */
.stage { grid-area: stage; position: relative; overflow: hidden; min-width: 0; min-height: 0; background: var(--stage); isolation: isolate; }
.stage-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.labels-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hud > .floor-switch, .hud > .toolrow, .hud > .assemble, .hud > .card { pointer-events: auto; }
.hud > .card { z-index: 3; }
.has-card .hint { display: none; }

.floor-switch {
  position: absolute; left: var(--hud-m); top: var(--hud-m);
  display: flex; overflow: hidden;
  background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-hud);
}
.fs-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 60px; height: 60px;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.fs-btn + .fs-btn { box-shadow: inset 1px 0 0 var(--rule); }
.fs-btn:hover { background: var(--hover); }
.fs-en { font: 700 13px/1 var(--f-en); letter-spacing: .06em; }
.fs-ja { font-size: 10px; line-height: 1; color: var(--ink-3); transition: color var(--dur) var(--ease); }
.fs-btn[aria-checked="true"] { background: var(--ink); color: #FFFFFF; box-shadow: none; }
.fs-btn[aria-checked="true"] + .fs-btn { box-shadow: none; }
.fs-btn[aria-checked="true"] .fs-ja { color: rgba(255, 255, 255, .74); }
.fs-btn:focus-visible { outline-offset: -4px; }

.toolrow {
  position: absolute; top: var(--hud-m);
  left: calc(var(--hud-m) + var(--fs-w, 121px) + 8px);
  max-width: calc(100% - var(--hud-m) * 2 - var(--fs-w, 121px) - 8px - 200px);
  height: 60px;
  background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-hud);
}
.tr-scroll {
  display: flex; align-items: center; height: 100%; padding: 0 6px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
.tr-scroll::-webkit-scrollbar { display: none; }
.tr-group { display: flex; flex: none; }
.tool {
  position: relative; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-width: 54px; height: 60px; padding: 0 9px;
  font-size: 11px; line-height: 1; color: var(--ink-2); white-space: nowrap;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tool .ico { color: var(--ink); }
.tool:hover { background: var(--hover); color: var(--ink); }
.tool[aria-checked="true"], .tool[aria-pressed="true"] { color: var(--ink); font-weight: 500; }
.tool::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 7px; height: 1.5px; background: var(--ink);
  transform: scaleX(0); transition: transform var(--dur) var(--ease);
}
.tool[aria-checked="true"]::after, .tool[aria-pressed="true"]::after { transform: scaleX(1); }
.tool:focus-visible { outline-offset: -3px; }
.tr-sep { flex: none; width: 1px; height: 28px; margin: 0 5px; background: var(--rule); }
.only-phone { display: none !important; }

.assemble {
  position: absolute; top: var(--hud-m); right: var(--hud-m);
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 16px 0 14px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--sh-hud);
  font-size: 12px; font-weight: 500; white-space: nowrap;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.assemble .ico { width: 12px; height: 12px; }
.assemble:hover { border-color: var(--ink); }
.assemble.is-playing { border-color: var(--ink); }

.counter { position: absolute; left: calc(var(--hud-m) + 4px); top: calc(var(--hud-top-end, 76px) + 28px); pointer-events: none; color: var(--ink); }
.counter p { margin: 0; }
.c-main { display: flex; align-items: baseline; gap: 8px; }
.c-num { font: 500 56px/1 var(--f-mincho); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.c-total { font: 500 20px/1 var(--f-mincho); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.c-lab { margin-top: 10px !important; font-size: 12px; color: var(--ink-2); }
.c-lab .en { margin-left: 6px; color: var(--ink-3); }
.c-furn { width: 160px; margin-top: 12px !important; padding-top: 10px; border-top: 1px solid var(--ink); font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.c-furn b { font: 500 17px/1 var(--f-mincho); color: var(--ink); margin: 0 2px 0 4px; }

.card {
  position: absolute; top: var(--card-top, calc(var(--hud-m) + 48px)); right: var(--hud-m);
  width: 300px; max-height: calc(100% - var(--card-top, calc(var(--hud-m) + 48px)) - var(--hud-m));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: 22px 22px 20px;
  background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-float);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card.is-in { opacity: 1; transform: none; }
.card-close { position: absolute; top: 10px; right: 10px; }
.card .eyebrow { padding-right: 36px; }
.card-name { margin: 10px 0 4px; padding-right: 8px; font: 500 24px/1.3 var(--f-mincho); letter-spacing: .03em; }
.card-loc { margin: 0; font-size: 12px; color: var(--ink-3); }
.card-dims { display: grid; grid-template-columns: repeat(3, minmax(max-content, 1fr)); column-gap: 8px; margin: 18px 0 0; border-top: 1px solid var(--ink); }
.card-dims.two { grid-template-columns: repeat(2, minmax(max-content, 1fr)); }
.cd { min-width: 0; padding: 12px 0 2px; }
.cd + .cd { padding-left: 10px; border-left: 1px solid var(--rule); }
.cd dt { display: flex; align-items: baseline; gap: 5px; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.cd dt .en { font-size: 9px; }
.cd dd { margin: 5px 0 0; display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.cd dd b { font: 500 20px/1.1 var(--f-mincho); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cd dd span { font-size: 10px; color: var(--ink-3); }
.cd dd.cd-sub { margin-top: 3px; font-size: 11px; color: var(--ink-3); }
.card-rows { margin: 16px 0 0; border-top: 1px solid var(--rule); }
.card-rows > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 12px; line-height: 1.55; }
.card-rows dt { color: var(--ink-3); }
.card-rows dd { margin: 0; }
.card-sub { margin: 18px 0 0; font-size: 11px; color: var(--ink-3); }
.card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip-btn { height: 28px; font-size: 12px; color: var(--ink); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.chip-btn:hover { border-color: var(--ink); }
.chip-n { margin-left: 3px; font-size: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.card[data-kind="room"] .card-actions { grid-template-columns: 1fr; }

.compass {
  position: absolute; left: var(--hud-m); bottom: var(--hud-m);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, .92); box-shadow: var(--sh-hud); color: var(--ink);
  pointer-events: none;
}
.compass svg { display: block; width: 100%; height: 100%; }
.compass-dial { transform-box: view-box; transform-origin: 24px 24px; }
.compass-n { font: 700 8px/1 var(--f-en); fill: currentColor; letter-spacing: 0; }

.hint {
  position: absolute; left: 50%; bottom: calc(var(--hud-m) + 6px);
  margin: 0; padding: 8px 16px;
  background: rgba(255, 255, 255, .9); border-radius: var(--r); box-shadow: var(--sh-hud);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 12px; line-height: 1.5; color: var(--ink-2); white-space: nowrap;
  opacity: 0; transform: translate(-50%, 4px);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
  pointer-events: none;
}
.hint.is-in { opacity: 1; transform: translate(-50%, 0); }
.hint.is-raised { bottom: calc(var(--hud-m) + 48px + 12px); }
.hint i { display: inline-block; width: 3px; height: 3px; margin: 0 8px; border-radius: 50%; background: var(--ink-4); vertical-align: middle; }

.toast {
  position: absolute; left: 50%; bottom: calc(var(--hud-m) + 52px); z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 12px;
  background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-float);
  font-size: 12px; font-weight: 500; white-space: nowrap;
  opacity: 0; transform: translate(-50%, 8px); visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  pointer-events: none;
}
.toast.is-in { opacity: 1; transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
.toast-ico { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #FFFFFF; }
.toast-ico .ico { width: 12px; height: 12px; stroke-width: 1.75; }

.tooltip {
  position: fixed; left: 0; top: 0; z-index: 50;
  display: flex; flex-direction: column; gap: 1px;
  max-width: 280px; padding: 9px 13px 10px;
  background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-float);
  pointer-events: none; font-family: var(--f-ui); font-feature-settings: "palt";
}
.tt-name { font-size: 13px; font-weight: 500; line-height: 1.45; }
.tt-sub { font-size: 11px; line-height: 1.5; color: var(--ink-3); }
.tt-dims { margin-top: 3px; font-size: 11px; line-height: 1.4; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* loading / no WebGL */
.loading {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: var(--stage);
  transition: opacity 450ms var(--ease), visibility 0s linear 450ms;
}
.loading.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-in { text-align: center; }
.loading-en { margin: 0; font: 400 9px/1.5 var(--f-en); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
.loading-ja { margin: 10px 0 20px; font: 500 17px/1.5 var(--f-mincho); letter-spacing: .1em; color: var(--ink); }
.loading-bar { width: 180px; height: 1.5px; margin: 0 auto; background: var(--rule); overflow: hidden; }
.loading-bar i { display: block; height: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
.nogl { position: absolute; inset: 0; z-index: 31; overflow-y: auto; background: var(--stage); display: flex; justify-content: center; align-items: flex-start; padding: 48px 24px; }
.nogl-in { width: min(560px, 100%); margin: auto 0; padding: 32px 32px 28px; background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-float); }
.nogl-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border: 1px solid var(--rule); border-radius: 50%; }
.nogl h2 { margin: 8px 0 12px; font: 500 20px/1.5 var(--f-mincho); letter-spacing: .03em; }
.nogl p { margin: 0 0 6px; color: var(--ink-2); }
.nogl ul { margin: 0; padding: 0 0 0 1.2em; color: var(--ink-2); }
.nogl li { margin: 3px 0; }
.nogl-plan { margin: 22px 0 0; }
.nogl-plan img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); }
.nogl-plan figcaption { margin-top: 8px; font-size: 11px; color: var(--ink-3); }
.no-webgl .hud, .no-webgl .playbar > * { visibility: hidden; }
.ft-sub:empty { display: none; }

/* plan lightbox (larger view) */
.plan-lightbox {
  grid-area: stage; position: relative; z-index: 25; min-width: 0; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(242, 242, 240, .9);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--dur) var(--ease);
  --lb-img-max: calc(100vh - var(--top-h) - var(--play-h) - 190px);
}
.plan-lightbox.is-in { opacity: 1; }
.lb-in {
  display: flex; flex-direction: column; max-width: 100%; max-height: 100%;
  padding: 18px 22px 16px;
  background: var(--paper); border-radius: var(--r); box-shadow: var(--sh-float);
}
.lb-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.lb-title { margin: 4px 0 0; font: 500 20px/1.3 var(--f-mincho); letter-spacing: .04em; }
.lb-hint { margin: 0 0 0 auto; font-size: 11px; color: var(--ink-3); }
.lb-fig { margin: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.lb-view { display: inline-block; border: 1px solid var(--rule); }
.lb-view .plan-img { width: auto; max-width: 100%; max-height: max(220px, var(--lb-img-max)); }
.lb-foot { align-self: stretch; display: flex; align-items: center; gap: 16px; min-height: 30px; margin-top: 8px; font-size: 11px; color: var(--ink-3); }
.lb-cap { letter-spacing: .06em; white-space: nowrap; }
.lb-sel { flex: 1; min-width: 0; text-align: right; font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-sel b { font-weight: 500; color: var(--ink); }
.lb-dims { margin-left: 10px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lb-3d { flex: none; }
.lb-tip { display: none; }

/* ── room / zone labels (positioned by the viewer) ──────── */
.room-label {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 8px 4px;
  background: rgba(255, 255, 255, .95); color: var(--ink);
  border-radius: var(--r); box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
  font: 500 11px/1.3 var(--f-ui); font-feature-settings: "palt"; letter-spacing: .04em;
  white-space: nowrap; pointer-events: none; user-select: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.room-label .ja { display: inline; }
.room-label .en { display: none; font: 400 9px/1 var(--f-en); letter-spacing: .14em; color: rgba(255, 255, 255, .76); }
.room-label.is-hover, .room-label.is-selected { background: var(--ink); color: #FFFFFF; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); }
.room-label.is-hover .en, .room-label.is-selected .en { display: inline; }
.zone-label {
  position: absolute; left: 0; top: 0;
  font: 400 10.5px/1.3 var(--f-ui); font-feature-settings: "palt"; letter-spacing: .06em;
  padding: 1px 5px; border-radius: var(--r); background: rgba(255, 255, 255, .72);
  color: var(--ink-2); white-space: nowrap; pointer-events: none; user-select: none;
  text-shadow: 0 0 2px #FFFFFF, 0 0 4px rgba(255, 255, 255, .9);
}

/* ── playbar ─────────────────────────────────────────────── */
.playbar {
  grid-area: play;
  position: relative; z-index: 10;
  display: flex; align-items: center; gap: 20px;
  min-width: 0; padding: 0 20px 0 14px;
  background: var(--paper); border-top: 1px solid var(--rule);
}
.pb-controls { display: flex; align-items: center; gap: 2px; flex: none; }
.pb-btn {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r);
  transition: background-color var(--dur) var(--ease);
}
.pb-btn:hover { background: var(--hover); }
.pb-btn .ico { width: 14px; height: 14px; }
.pb-play {
  display: grid; place-items: center; width: 40px; height: 40px; margin: 0 2px;
  border-radius: 50%; background: var(--ink); color: #FFFFFF;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.pb-play:hover { background: #2B2B29; }
.pb-play .ico { width: 15px; height: 15px; }
.pb-play:not(.is-playing) .ico { transform: translateX(1px); }
.pb-play:focus-visible { outline-offset: 3px; }
.pb-speed { display: flex; flex: none; height: 28px; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.pb-speed button {
  min-width: 38px; height: 100%; padding: 0 6px;
  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--ink-3);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pb-speed button + button { box-shadow: inset 1px 0 0 var(--rule); }
.pb-speed button:hover { color: var(--ink); background: var(--hover); }
.pb-speed .x { margin-left: 1px; font-size: 9px; }
.pb-speed button[aria-checked="true"] { background: var(--ink); color: #FFFFFF; font-weight: 500; box-shadow: none; }
.pb-speed button[aria-checked="true"] + button { box-shadow: none; }
.pb-speed button:focus-visible { outline-offset: -3px; }
.pb-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
.pb-label { margin: 0; display: flex; align-items: baseline; gap: 12px; min-width: 0; font-size: 12px; line-height: 1.5; white-space: nowrap; }
.pb-state { flex: none; font-weight: 500; }
.pb-state b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pb-state .en { margin-left: 7px; color: var(--ink-3); }
.pb-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.pb-seek { position: relative; display: flex; align-items: center; height: 16px; cursor: pointer; touch-action: none; }
.pb-seek:focus-visible { outline-offset: 1px; }
.pb-track { position: relative; width: 100%; height: 2px; background: var(--rule); }
.pb-fill { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(1); transition: transform 240ms var(--ease); }
.pb-ticks i { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--paper); }
.pb-knob {
  position: absolute; top: 50%; left: calc(var(--f, 1) * 100%); width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 2px var(--paper);
  transform: translate(-50%, -50%) scale(.8); transition: left 240ms var(--ease), transform var(--dur) var(--ease);
}
.pb-seek:hover .pb-knob, .pb-seek:focus-visible .pb-knob { transform: translate(-50%, -50%) scale(1.1); }
.pb-finish {
  flex: none; height: 32px; padding: 0 16px;
  border: 1px solid var(--ink); border-radius: var(--r);
  font-size: 12px; font-weight: 500;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pb-finish:hover { background: var(--ink); color: #FFFFFF; }
.pb-finish[aria-disabled="true"] { border-color: var(--ink-4); color: var(--ink-4); cursor: default; }
.pb-finish[aria-disabled="true"]:hover { background: none; color: var(--ink-4); }

/* ── responsive: desktop steps ──────────────────────────── */
@media (max-width: 1320px) {
  .chip[data-chip="size"] { display: none; }
}
@media (max-width: 1180px) {
  :root { --panel-w: 300px; }
  .chip[data-chip="rooms"], .chip[data-chip="furniture"] { display: none; }
  .tabs { gap: 24px; padding: 0 20px; }
  .pane { padding: 24px 20px 32px; }
  .search-bar { top: -8px; margin: -24px -20px 0; padding: 16px 20px 10px; }
  .tb-right { gap: 18px; }
  .playbar { gap: 14px; padding-right: 16px; }
}
@media (max-width: 1010px) {
  .tb-chips { display: none; }
  .tb-left { gap: 0; }
  .playbar { gap: 10px; padding: 0 12px 0 8px; }
  .pb-speed button { min-width: 30px; padding: 0 4px; }
  .pb-finish { padding: 0 12px; }
  .pb-state .en { display: none; }
}
/* tablet: tool row moves to a second row under the floor switch; the assemble button is replaced by the playbar ▶ */
@media (min-width: 720px) and (max-width: 1010px) and (min-height: 500.02px) {
  .app { grid-template-areas: "top top" "panel stage" "play play"; }
  .playbar { gap: 16px; padding: 0 16px 0 12px; }
  .toolrow { left: var(--hud-m); top: calc(var(--hud-m) + var(--fs-h, 60px) + 8px); max-width: calc(100% - var(--hud-m) * 2); }
  .assemble { display: none; }
  /* narrower card so the model keeps some room on a ~500px stage */
  .card { width: 272px; padding: 18px 18px 16px; }
  .card-name { font-size: 20px; margin-top: 8px; }
  .card-dims { column-gap: 4px; }
  .cd + .cd { padding-left: 8px; }
  .card-rows > div { grid-template-columns: 80px minmax(0, 1fr); }
  .card-actions { gap: 6px; }
  .card .btn { gap: 6px; padding: 0 8px; }
}

/* ── phone (portrait < 720px, or landscape with height ≤ 500px) ─ */
@media (max-width: 719.98px), (max-height: 500px) and (orientation: landscape) {
  :root { --top-h: 48px; --hud-m: 8px; }
  .app {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: var(--top-h) minmax(0, 1fr);
    grid-template-areas: "top" "stage";
  }
  .topbar { gap: 8px; padding: 0 6px 0 14px; }
  .tb-sheet, .tb-chips, .tb-labels { display: none; }
  .tb-name { font-size: 17px; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; }
  .tb-title, .tb-left { min-width: 0; flex: 0 1 auto; }
  .tb-right { gap: 4px; }
  .seg button { height: 40px; font-size: 12px; gap: 6px; }
  .seg button::after { bottom: 6px; }
  .seg-bar { margin: 0 7px; }
  .tb-share { width: 40px; height: 40px; padding: 0; gap: 0; border-color: transparent; }
  .tb-share:hover { background: var(--hover); color: var(--ink); }
  .tb-share-t { display: none; }
  .share-pop { right: 8px; }
  .search-input, .share-pop input { font-size: 16px; }   /* ≥16px: iOS does not zoom the page on focus */

  /* bottom sheet */
  .panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    height: calc(100% - var(--top-h));
    border-right: 0; border-radius: 6px 6px 0 0;
    box-shadow: 0 -1px 0 var(--rule), 0 -10px 30px rgba(0, 0, 0, .07);
    transform: translateY(calc(100% - var(--sheet-vis, 70px)));
    transition: transform 320ms var(--ease);
    will-change: transform;
  }
  .sheet-grip { display: flex; justify-content: center; align-items: center; flex: none; height: 18px; padding-top: 4px; touch-action: none; cursor: grab; }
  .sheet-grip i { width: 36px; height: 4px; border-radius: 999px; background: var(--ink-4); }
  .tabs { gap: 0; padding: 0 8px; touch-action: none; }
  .tab { flex: 1; justify-content: center; height: 46px; }
  .tab::after { left: 22%; right: 22%; }
  .panes { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .panes::after { content: ""; display: block; height: var(--sheet-hidden, 0px); }
  .pane { padding: 20px 16px 28px; }
  .search-bar { top: -6px; margin: -20px -16px 0; padding: 14px 16px 8px; }
  .floor-title { font-size: 24px; }
  .room-row { padding: 12px 6px 12px 10px; }
  .f-row { padding: 10px 8px 11px 10px; }

  /* HUD */
  .fs-btn { width: 48px; height: 48px; gap: 4px; }
  .fs-en { font-size: 12px; }
  .fs-ja { font-size: 9px; }
  .toolrow { height: 48px; right: 0; max-width: none; border-radius: var(--r) 0 0 var(--r); }
  .tr-scroll { padding: 0 2px; }
  .toolrow.has-more .tr-scroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .toolrow.has-less .tr-scroll { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); mask-image: linear-gradient(90deg, transparent, #000 32px); }
  .toolrow.has-less.has-more .tr-scroll { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 44px), transparent); }
  .tool { height: 48px; min-width: 48px; padding: 0 7px; gap: 5px; font-size: 10px; }
  .tool::after { left: 12px; right: 12px; bottom: 5px; }
  .only-phone { display: flex !important; }
  .tr-sep.only-phone { display: block !important; }
  .tr-sep { height: 24px; margin: 0 3px; }
  .assemble { display: none; }
  .counter { top: calc(var(--hud-top-end, 56px) + 18px); left: calc(var(--hud-m) + 6px); }
  .c-num { font-size: 30px; }
  .c-total { font-size: 15px; }
  .c-furn { width: 140px; }

  .playbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 29;
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "label label finish" "controls . speed";
    align-items: center; gap: 4px 8px;
    height: auto; padding: 14px 10px 6px 8px;
    border-top: 0; box-shadow: 0 -1px 0 var(--rule), 0 -6px 20px rgba(0, 0, 0, .04);
    transform: translateY(calc(-1 * var(--sheet-vis, 70px)));
    transition: transform 320ms var(--ease), opacity var(--dur) var(--ease);
  }
  .pb-mid { display: contents; }
  .pb-label { grid-area: label; padding-left: 6px; font-size: 12px; gap: 8px; }
  .pb-state .en { display: none; }
  /* the thin full-width strip keeps a 32px touch band (12px above the bar edge, 20px into it); controls sit above it */
  .pb-seek { position: absolute; left: 0; right: 0; top: -12px; height: 32px; align-items: flex-start; }
  .pb-track { height: 3px; margin-top: 11px; }
  .pb-ticks i { top: 0; bottom: 0; }
  .pb-knob { width: 12px; height: 12px; left: clamp(8px, calc(var(--f, 1) * 100%), calc(100% - 8px)); }
  .pb-controls, .pb-speed, .pb-finish { position: relative; z-index: 1; }
  .pb-controls { grid-area: controls; }
  .pb-btn { width: 40px; height: 40px; }
  .pb-play { width: 42px; height: 42px; }
  .pb-speed { grid-area: speed; height: 42px; }   /* 40px buttons inside the 1px frame */
  .pb-speed button { min-width: 42px; }
  .pb-finish { grid-area: finish; justify-self: end; height: 32px; padding: 0 14px; }
  .pb-finish::before { content: ""; position: absolute; inset: -5px -4px; }   /* 42px touch area */
  .playbar.is-done .pb-finish { visibility: hidden; }   /* keeps the row height; the label runs over its cell */
  .playbar.is-done .pb-label { grid-column: 1 / -1; }
  [data-sheet="full"] .playbar { opacity: 0; pointer-events: none; }
  /* half-open sheet (portrait): one compact row so the model keeps more room; speeds return with the sheet closed */
  [data-layout="phone"][data-sheet="half"] .playbar { grid-template-areas: "controls label finish"; padding: 8px 10px 8px 6px; }
  [data-layout="phone"][data-sheet="half"] .pb-speed { display: none; }
  [data-layout="phone"][data-sheet="half"] .pb-label { padding-left: 2px; }
  [data-layout="phone"][data-sheet="half"] .playbar.is-done .pb-finish { display: none; }   /* one row: the label gets the room */
  .no-webgl .playbar { display: none; }
  .nogl { padding: 16px 12px calc(var(--sheet-vis, 70px) + 16px); }
  .nogl-in { padding: 24px 20px 20px; }
  .is-sheet-drag .panel, .is-sheet-drag .playbar { transition: none; }

  .card {
    top: auto; left: var(--hud-m); right: var(--hud-m); width: auto;
    bottom: calc(var(--sheet-vis, 70px) + var(--pb-h, 96px) + 14px);
    max-height: min(46vh, calc(100% - var(--sheet-vis, 70px) - var(--pb-h, 96px) - var(--hud-top-end, 56px) - 26px));
    padding: 16px 16px 14px;
  }
  .card-name { font-size: 20px; margin-top: 6px; }
  .card-close { top: 6px; right: 6px; width: 40px; height: 40px; }
  .card .eyebrow { padding-right: 44px; }
  /* portrait: dimensions only; landscape keeps a room's 置いてある物 chips (rows stay out in both) */
  .card-rows, [data-layout="phone"] .card-sub, [data-layout="phone"] .card-chips-wrap { display: none; }
  .card-dims { margin-top: 12px; }
  .cd dd b { font-size: 20px; }
  .card-actions { margin-top: 14px; }
  .card .btn { height: 40px; }
  [data-sheet="full"] .card { display: none; }
  [data-layout="phone"][data-sheet="half"] .card { padding: 12px 14px 12px 16px; }
  [data-layout="phone"][data-sheet="half"] .card .eyebrow, [data-layout="phone"][data-sheet="half"] .card-loc, [data-layout="phone"][data-sheet="half"] .card-actions, [data-layout="phone"][data-sheet="half"] .cd-sub { display: none; }
  [data-layout="phone"][data-sheet="half"] .card-name { margin: 0; padding-right: 40px; font-size: 17px; }
  [data-layout="phone"][data-sheet="half"] .card-close { top: 2px; right: 2px; }
  [data-layout="phone"][data-sheet="half"] .card-dims { margin-top: 8px; border-top-color: var(--rule); }
  [data-layout="phone"][data-sheet="half"] .cd { padding-top: 7px; }
  [data-layout="phone"][data-sheet="half"] .cd dd { margin-top: 2px; }
  [data-layout="phone"][data-sheet="half"] .cd dd b { font-size: 17px; }
  .compass { width: 40px; height: 40px; bottom: calc(var(--sheet-vis, 70px) + var(--pb-h, 96px) + 8px); }
  .has-card .compass { opacity: 0; }
  .hint, .toast { bottom: calc(var(--sheet-vis, 70px) + var(--pb-h, 96px) + 12px); }
  .hint.is-raised { bottom: calc(var(--sheet-vis, 70px) + var(--pb-h, 96px) + 8px + 40px + 10px); }
  .hint { max-width: calc(100% - 16px); padding: 7px 12px; font-size: 12px; }
  .hint i { margin: 0 5px; }
  .toast { z-index: 35; }
  .tooltip { display: none !important; }
  .plan-zoom { height: 40px; }
  .plan-lightbox { position: fixed; inset: 0; z-index: 60; padding: 0; background: var(--paper); --lb-img-max: calc(100dvh - 140px); }
  .lb-in { width: 100%; height: 100%; padding: 12px 12px 14px; box-shadow: none; justify-content: center; }
  .lb-hint { display: none; }
  .lb-head { margin-bottom: 10px; }
  .lb-close { margin-left: auto; width: 40px; height: 40px; }
  .lb-view .plan-img { max-width: 100%; }
  .lb-foot { flex-wrap: wrap; gap: 2px 12px; }
  /* portrait: the drawing is shown larger than the screen and scrolls sideways */
  [data-layout="phone"] .lb-view { display: block; width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
  [data-layout="phone"] .lb-view .plan-img { width: auto; max-width: none; height: min(calc(100dvh - 230px), 540px); max-height: none; }
  [data-layout="phone"] .lb-tip { display: block; order: 4; flex-basis: 100%; margin-top: 2px; color: var(--ink-3); }
  .lb-sel { order: 3; flex-basis: 100%; text-align: left; }
  .lb-3d { margin-left: auto; height: 40px; }
}

/* landscape phones: the sheet becomes a left column, the playbar sits to its right, the card on the right */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --top-h: 44px; }
  .panel { right: auto; width: min(360px, 46vw); border-radius: 0 6px 0 0; }
  .playbar {
    left: min(360px, 46vw); transform: none;
    grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "controls label speed finish";
    padding: 8px 10px 6px 6px; gap: 0 10px;
  }
  .pb-btn { width: 40px; height: 40px; }
  .pb-play { width: 42px; height: 42px; }
  .pb-speed { height: 42px; }
  .pb-speed button { min-width: 40px; padding: 0 3px; }
  .pb-label { font-size: 11px; }
  /* complete: no 完成 button, and 「完成 部材 113点 ・ 16工程」 (short form) so the step count fits */
  .playbar.is-done { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "controls label speed"; }
  .playbar.is-done .pb-finish { display: none; }
  .playbar.is-done .pb-label { grid-column: auto; grid-area: label; }   /* undo the portrait full-row label */
  .pb-long { display: none; }
  [data-sheet="full"] .playbar { opacity: 1; pointer-events: auto; }
  .toolrow {
    top: var(--hud-m); left: calc(var(--hud-m) + var(--fs-w, 97px) + 8px); right: auto;
    max-width: calc(100% - var(--hud-m) * 2 - var(--fs-w, 97px) - 8px); border-radius: var(--r);
  }
  .zone-label { display: none; }
  .room-label { font-size: 10px; padding: 2px 6px 3px; }
  .card {
    left: auto; right: var(--hud-m); top: var(--card-top, var(--hud-m)); width: 280px;
    bottom: auto; max-height: calc(100% - var(--card-top, var(--hud-m)) - var(--hud-m) - var(--pb-h, 52px) - 6px);
  }
  [data-sheet="full"] .card { display: block; }
  .compass, .hint, .toast { bottom: calc(var(--pb-h, 52px) + 8px); }
  .compass { left: var(--hud-m); bottom: calc(var(--sheet-vis, 64px) + 8px); }
  [data-sheet="half"] .compass, [data-sheet="full"] .compass { left: calc(min(360px, 46vw) + 8px); bottom: calc(var(--pb-h, 52px) + 8px); }
  .toast { left: calc(50% + min(360px, 46vw) / 2); }
  .hint { display: none; }
  .has-card .compass { opacity: 1; }
  .counter { top: calc(var(--hud-top-end, 56px) + 10px); }
  .c-lab { margin-top: 4px !important; font-size: 11px; }
  .c-furn { margin-top: 6px !important; padding-top: 6px; }
  .plan-lightbox { --lb-img-max: calc(100dvh - 128px); }
  .lb-in { padding: 8px 16px 6px; }
  .lb-head { margin-bottom: 6px; }
  .lb-head .eyebrow { display: none; }
  .lb-title { margin: 0; font-size: 16px; }
  .lb-close { width: 40px; height: 40px; margin-top: -2px; margin-bottom: -2px; }
  .lb-foot { flex-wrap: nowrap; margin-top: 4px; }
  .lb-sel { order: 0; flex-basis: auto; text-align: right; }
  .lb-3d { margin-left: 0; height: 32px; }
  .lb-3d::before { content: ""; position: absolute; inset: -4px -4px; }   /* 40px touch area in the compact footer */
}

/* ── motion preferences ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .app *, .app *::before, .app *::after { transition-duration: 1ms !important; transition-delay: 0s !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}