/* 裏面の展示街。通常の Map の状態色・クロムへ配色を漏らさない。 */
#backstage-entry { position: fixed; right: 24px; bottom: calc(94px + var(--safe-b)); z-index: 16; }
#btn-backstage { display: flex; gap: 12px; align-items: center; padding: 12px 18px; min-height: 48px; color: #fff; background: #042b5a; border: 1px solid #436487; border-radius: 14px; box-shadow: 0 8px 24px #042b5a24; font-size: 12px; }
#btn-backstage:hover { background: #134b78; transform: translateY(-2px); }
#btn-backstage small { display: block; margin-bottom: 3px; font-size: 8px; letter-spacing: .15em; color: #a8dfe5; text-align: left; }
#btn-backstage .backstage-flip-icon { font-size: 25px; color: #84dbe1; }
body.auto-mode #backstage-entry { visibility: hidden; pointer-events: none; }
body.backstage-mode :is(#topbar, #explorer, #controls, #map-hint, #card, #viewing-labels, #operations-labels, #rooftop-signs, #auto-building-labels, #backstage-entry, #news-ticker, #bgm-credit) { visibility: hidden; pointer-events: none; }
#canvas::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 62% 44%, #1c3d57, #091b30 78%); opacity: var(--backstage-progress, 0); pointer-events: none; }
body.backstage-mode .city-webgl { z-index: 2; }
.backstage { position: fixed; inset: 0; z-index: 25; color: #e7f0f4; pointer-events: none; --site-color: #09a7b2; }
.backstage :focus-visible { outline: 2px solid #80e0e7; outline-offset: 4px; }
.backstage-header { position: absolute; top: max(22px, env(safe-area-inset-top)); left: 28px; right: 28px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.backstage-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
.backstage-wordmark { border-left: 1px solid #456077; padding-left: 14px; margin-left: 8px; font-size: 10px; font-weight: 500; letter-spacing: .2em; color: #8cb1c6; }
.backstage-return { pointer-events: auto; padding: 12px 20px; border: 1px solid #6a8599; border-radius: 30px; background: #17364d; color: #eff9fb; min-height: 44px; font-size: 12px; }
.backstage-return:hover { background: #31546c; }
.backstage-panel { position: absolute; top: 106px; bottom: 55px; left: 28px; width: min(360px, 28vw); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #436780 transparent; pointer-events: auto; padding: 0 22px 0 0; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; }
.backstage-ready .backstage-panel { opacity: 1; transform: none; }
.backstage-eyebrow { color: #85bdc8; font-size: 9px; font-weight: 600; letter-spacing: .16em; margin-bottom: 12px; }
.backstage-content h1 { font-size: clamp(23px, 2.2vw, 32px); line-height: 1.4; letter-spacing: -.04em; font-weight: 600; overflow-wrap: anywhere; }
.backstage-lead { margin-top: 16px; font-size: 22px; line-height: 1.7; white-space: pre-line; letter-spacing: -.03em; font-weight: 500; }
.backstage-description { font-size: 12px; line-height: 1.9; color: #9fb9c9; margin: 16px 0 26px; }
.backstage-district { margin: 22px 0; }
.backstage-district h2 { display: flex; gap: 8px; align-items: center; font-size: 10px; color: #c0d1da; margin-bottom: 10px; font-weight: 500; letter-spacing: .08em; }
.backstage-district h2::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--site-color); }
.backstage-site-links { display: flex; flex-wrap: wrap; gap: 7px; }
.backstage-site-link { min-height: 38px; padding: 8px 11px; font-size: 11px; background: #163149; border: 1px solid #38556c; border-radius: 6px; color: #dbe9f0; text-align: left; }
.backstage-site-link:hover { border-color: var(--site-color); background: #25465f; }
.backstage-note { font-size: 11px; line-height: 1.9; color: #87a4b6; border-top: 1px solid #355067; padding-top: 20px; margin: 24px 0; }
.backstage-panel-footer { display: flex; justify-content: space-between; align-items: center; gap: 6px; border-top: 1px solid #355067; margin-top: 24px; padding: 14px 0; }
.backstage-panel-footer button { min-height: 44px; color: #c1e7eb; font-size: 11px; }
.backstage-panel-footer button:hover { color: white; }
.backstage-panel-footer span { color: #7e9eb4; font-size: 10px; font-variant-numeric: tabular-nums; }
.backstage-all { min-height: 44px; color: #b6ccd9; font-size: 11px; margin-bottom: 14px; }
.backstage-role { color: #9bb6c8; font-size: 12px; margin: 8px 0 25px; }
.backstage-headline { white-space: pre-line; text-wrap: pretty; font-size: 18px; line-height: 1.8; margin-bottom: 18px; font-weight: 600; }
.backstage-body { font-size: 12px; color: #c3d5df; line-height: 2; margin: 0 0 16px; }
.backstage-principle { margin: 22px 0; padding: 16px; border-left: 2px solid var(--site-color); background: #1b374e; border-radius: 0 8px 8px 0; }
.backstage-principle p { font-size: 12px; line-height: 1.9; }
.backstage-principle .backstage-eyebrow { display: block; font-size: 8px; color: #a4c5d5; }
.backstage-flow { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 20px 0; }
.backstage-flow li { font-size: 10px; line-height: 1.8; color: #a7c8d8; }
.backstage-flow li:not(:last-child)::after { content: ' →'; color: #668a9f; margin-left: 7px; }
.backstage-guide { display: inline-block; font-size: 11px; color: #b4e7ed; padding: 12px 0; text-decoration-color: #598b9c; text-underline-offset: 5px; }
.backstage-related-title { font-size: 10px; font-weight: 500; color: #86a6b9; margin: 20px 0 12px; }
.backstage-labels { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; pointer-events: none; }
.backstage-ready .backstage-labels { opacity: 1; }
.backstage-label { position: absolute; transform: translate(-50%, 0); display: flex; align-items: center; gap: 7px; padding: 7px 9px; min-height: 42px; border: 1px solid #517086; border-radius: 8px; background: #102b43f0; box-shadow: 0 5px 14px #05122245; text-align: left; white-space: nowrap; color: #eaf3f6; pointer-events: auto; }
.backstage-label strong { display: block; font-size: 11px; font-weight: 600; }
.backstage-label small { display: block; font-size: 8px; color: #9cb8c9; margin-top: 3px; }
.backstage-number { color: var(--site-color); font-size: 10px; font-variant-numeric: tabular-nums; padding-right: 5px; border-right: 1px solid #456075; }
.backstage-label:hover, .backstage-label[aria-pressed="true"] { border-color: var(--site-color); background: #254960; z-index: 2; }
.backstage-label[aria-pressed="true"]::after { content: ''; position: absolute; inset: auto 25% -4px; height: 2px; background: var(--site-color); }
.backstage-caption { position: absolute; left: max(430px, 34vw); right: 28px; bottom: 26px; text-align: center; color: #7299af; }
.backstage-caption span { font-size: 10px; letter-spacing: .22em; }
.backstage-caption p { font-size: 9px; margin-top: 8px; color: #87a4b7; }
.backstage-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 900px) {
  #backstage-entry { right: 12px; bottom: calc(138px + var(--safe-b)); }
  #btn-backstage { padding: 10px 14px; }
  #btn-backstage small { display: none; }
}
@media (max-width: 759px) {
  .backstage-header { top: max(14px, env(safe-area-inset-top)); left: 16px; right: 16px; }
  .backstage-brand { font-size: 14px; gap: 7px; }
  .backstage-brand img { width: 25px; height: 25px; }
  .backstage-wordmark { display: none; }
  .backstage-return { padding: 10px 14px; font-size: 11px; }
  .backstage-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 330px; max-height: 46dvh; background: #102a42f5; padding: 22px 22px calc(18px + var(--safe-b)); border-top: 1px solid #38596f; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px #08182b44; }
  .backstage-content h1 { font-size: 24px; }
  .backstage-lead { margin-top: 8px; font-size: 16px; white-space: normal; }
  .backstage-description { margin: 8px 0 16px; font-size: 11px; }
  .backstage-district { margin: 16px 0; }
  .backstage-label { min-height: 30px; padding: 5px 6px; gap: 4px; border-radius: 5px; }
  .backstage-label strong { font-size: 8px; }
  .backstage-label small { display: none; }
  .backstage-number { font-size: 8px; padding-right: 3px; }
  .backstage-caption { top: 73px; bottom: auto; left: 16px; right: 16px; }
  .backstage-caption span { font-size: 8px; }
  .backstage-caption p { display: none; }
  .backstage-role { margin-bottom: 15px; }
  .backstage-all { margin-bottom: 8px; }
}
@media (max-height: 550px) and (min-width: 760px) {
  .backstage-panel { top: 82px; bottom: 18px; }
  .backstage-caption { bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .backstage *, #btn-backstage { transition: none !important; transform: none; }
  .backstage-label { transform: translate(-50%, 0); }
}

.backstage-number-labels .backstage-label { justify-content: center; width: var(--backstage-marker-size, 36px); height: var(--backstage-marker-size, 36px); min-height: 24px; padding: 4px; }
.backstage-number-labels .backstage-label > span:not(.backstage-number) { display: none; }
.backstage-number-labels .backstage-number { font-size: 11px; border: 0; padding: 0; }

/* 建物の展示と、矢印で辿る接続図を切り替える。 */
.backstage-modes { position: absolute; top: 78px; right: 28px; display: flex; padding: 4px; gap: 4px; background: #0c243b; border: 1px solid #3b5e76; border-radius: 12px; pointer-events: auto; opacity: 0; }
.backstage-ready .backstage-modes { opacity: 1; }
.backstage-modes button { min-height: 36px; padding: 8px 20px; border-radius: 8px; color: #a9c2d2; font-size: 12px; }
.backstage-modes button[aria-pressed="true"] { color: #082636; background: #a3e3e8; }
.backstage-diagram-link { display: block; width: 100%; padding: 13px 14px; margin: 18px 0; border: 1px solid #54818f; border-radius: 8px; background: #1a4054; color: #c8f1f2; text-align: left; font-size: 12px; line-height: 1.7; }
.backstage-diagram-link:hover { background: #245467; border-color: #93dbe0; }
.backstage-body { font-size: 13px; line-height: 2; text-wrap: pretty; }
.backstage :is(.backstage-labels, .backstage-caption)[hidden], .architecture[hidden] { display: none; }
.architecture { position: absolute; left: calc(min(360px, 28vw) + 55px); right: 28px; top: 137px; bottom: 26px; display: grid; grid-template-rows: auto minmax(90px, 1fr) auto; background: #0c2237; border: 1px solid #34536c; border-radius: 16px; overflow: hidden; pointer-events: auto; opacity: 0; box-shadow: 0 12px 50px #03132240; }
.backstage-ready .architecture { opacity: 1; }
.architecture-header { padding: 20px 24px 14px; border-bottom: 1px solid #29485e; }
.architecture-header h2 { font-size: 19px; line-height: 1.6; font-weight: 550; }
.architecture-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.architecture-tabs button { padding: 8px 13px; min-height: 36px; border: 1px solid #3c596c; border-radius: 7px; background: #152f44; color: #b1c7d5; font-size: 12px; }
.architecture-tabs button[aria-pressed="true"] { color: var(--diagram-color); border-color: var(--diagram-color); background: #254052; }
.architecture-description { margin-top: 13px; font-size: 12px; line-height: 1.8; color: #c3d5df; }
.architecture-viewport { overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #527388 #0c2237; background-image: radial-gradient(#305065 1px, transparent 1px); background-size: 20px 20px; }
.architecture-viewport:focus-visible { outline-offset: -3px; }
.architecture-board { position: relative; margin: 14px auto 0; }
.architecture-board svg { display: block; position: absolute; inset: 0; overflow: visible; }
.architecture-edge { color: var(--diagram-color); }
.architecture-edge > path { stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.architecture-edge text { fill: #d4e4ed; font-size: 12px; paint-order: stroke; stroke: #0c2237; stroke-width: 9px; stroke-linejoin: round; }
.architecture-edge.architecture-connected > path { stroke-width: 3; }
.architecture-node { position: absolute; width: 180px; height: 76px; display: flex; flex-direction: column; justify-content: center; padding: 12px 15px; gap: 7px; border: 1px solid #4a6b81; border-left: 3px solid var(--site-color); border-radius: 10px; background: #17364c; color: #ebf3f8; text-align: left; box-shadow: 0 5px 16px #00102040; }
.architecture-node strong { font-size: 14px; font-weight: 600; }
.architecture-node small { font-size: 10px; color: #b1cad9; line-height: 1.6; }
button.architecture-node:hover, .architecture-node[aria-pressed="true"] { border-color: #c4ecf1; background: #2b5167; box-shadow: 0 0 0 2px #76c7d22e; }
div.architecture-node { border-style: dashed; background: #142a3d; }
.architecture-muted { opacity: .45; }
.architecture-footer { padding: 14px 24px; border-top: 1px solid #29485e; background: #132b40; font-size: 11px; line-height: 1.85; color: #c1d4de; }
.architecture-help { margin-top: 7px; color: #88acbf; font-size: 10px; }
.architecture[data-layout="compact"] .architecture-node { width: 150px; padding: 10px 11px; }
.architecture[data-layout="compact"] .architecture-node strong { font-size: 13px; }
.architecture[data-layout="compact"] .architecture-node small { font-size: 9px; }
.architecture[data-layout="compact"] .architecture-edge text { font-size: 11px; }

@media (max-width: 759px) {
  .backstage-modes { top: 70px; right: 16px; left: 16px; justify-content: center; margin: auto; width: fit-content; }
  .backstage-modes button { padding: 7px 22px; }
  .backstage-caption { display: none; }
  .architecture { left: 10px; right: 10px; top: 126px; bottom: max(12px, env(safe-area-inset-bottom)); border-radius: 12px; }
  .architecture-header { padding: 14px 16px 10px; }
  .architecture-header h2 { font-size: 16px; }
  .architecture-tabs { gap: 5px; margin-top: 9px; }
  .architecture-tabs button { padding: 7px 9px; font-size: 11px; }
  .architecture-description { font-size: 11px; margin-top: 10px; }
  .architecture-footer { padding: 10px 16px; font-size: 10px; }
  .backstage[data-presentation="diagram"][data-exhibit-selected="false"] .backstage-panel { display: none; }
  .backstage[data-presentation="diagram"][data-exhibit-selected="true"] .architecture { visibility: hidden; pointer-events: none; }
  .backstage[data-presentation="diagram"][data-exhibit-selected="true"] .backstage-panel { top: 126px; height: auto; max-height: none; }
}
@media (max-height: 550px) and (min-width: 760px) {
  .backstage-modes { top: 22px; right: 160px; }
  .architecture { top: 82px; bottom: 14px; }
  .architecture-header { padding: 10px 16px; }
  .architecture-header h2 { display: none; }
  .architecture-tabs { margin-top: 0; }
  .architecture-description { margin-top: 7px; font-size: 11px; }
  .architecture-footer { padding: 8px 16px; font-size: 10px; }
  .architecture-help { display: none; }
}

.backstage-label { max-width: var(--backstage-label-width, 180px); }
.backstage-label > span:not(.backstage-number) { min-width: 0; }
.backstage-label :is(strong, small) { overflow: hidden; text-overflow: ellipsis; }
.backstage-number { flex-shrink: 0; }

.backstage[data-presentation="diagram"] .backstage-diagram-link { display: none; }