html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; background: #000; font-family: "Yu Gothic UI", "Segoe UI", sans-serif; }
#cesiumContainer { position: absolute; inset: 0; }
.cesium-viewer-bottom, .cesium-viewer-animationContainer, .cesium-viewer-timelineContainer { display: none !important; }

/* ---- 常時表示の小さな HUD ---- */
#hud { position: absolute; left: 12px; top: 10px; color: #f2fbff; text-shadow: 0 1px 2px rgba(0,0,0,.7); pointer-events: none; line-height: 1.25; transition: opacity .6s;
  padding: .55em .9em .5em; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 45%, rgba(120,210,255,.10)); border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5); }
#hud.hidden { opacity: 0; }
#hud-title { font-size: 28px; font-weight: 800; letter-spacing: .04em; }
#hud-mode { font-size: 20px; margin-top: 2px; color: #ffe08a; }
#hud-help { color: #e4f6ff; }
#hud-help { font-size: 14px; margin-top: 4px; opacity: .85; }

/* ---- ① 起動画面 ---- */
#splash { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(ellipse at center, #0b1b2b 0%, #04080f 70%); color: #fff; opacity: 1; transition: opacity .9s ease; }
#splash.out { opacity: 0; }
.splash-grid { position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(0,200,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(0,200,255,.18) 1px, transparent 1px);
  background-size: 80px 80px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.splash-title { position: relative; font-size: clamp(64px, 9vw, 180px); font-weight: 900; letter-spacing: .12em; line-height: 1.1;
  text-shadow: 0 0 18px rgba(0,220,255,.9), 0 0 60px rgba(0,160,255,.6), 0 2px 0 #000; animation: rise 1.2s ease-out both; }
.splash-sub { position: relative; font-size: clamp(16px, 1.6vw, 30px); letter-spacing: .5em; color: #9fe8ff; font-family: Consolas, "Cascadia Mono", monospace; animation: rise 1.2s .25s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---- ② 操作説明パネル (ガラス風: 背景の街が透けて見える) ---- */
#help-backdrop { position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center; background: rgba(2,8,16,.25); }
#help { position: relative; width: min(1500px, 92vw); max-height: 94vh; overflow: auto; color: #f2fbff; border-radius: 22px; font-size: clamp(13px, 2.4vh, 24px);
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 45%, rgba(120,210,255,.10));
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(0,0,0,.25);
  padding: 1em 1.4em .9em; line-height: 1.3; animation: rise .5s ease-out both; overflow: hidden; }
/* ガラスの反射 (斜めのハイライト) */
#help::before { content: ""; position: absolute; inset: -40% -10% auto -10%; height: 60%; pointer-events: none;
  background: linear-gradient(170deg, rgba(255,255,255,.22), rgba(255,255,255,0) 60%); transform: rotate(-4deg); }
#help::after { content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  box-shadow: inset 0 0 40px rgba(0,200,255,.18); }
.help-head { display: flex; align-items: baseline; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 8px; margin-bottom: 14px; }
.help-tag { font-family: Consolas, "Cascadia Mono", monospace; font-size: .62em; letter-spacing: .4em; color: #7fe7ff; }
.help-title { font-size: 1.67em; font-weight: 800; letter-spacing: .08em; text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 18px rgba(0,200,255,.35); }
.help-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .4em 1.6em; }
@media (max-width: 900px) { .help-cols { grid-template-columns: 1fr; } }
#help h3 { margin: 0 0 .33em; font-size: 1em; font-weight: 700; color: #bfefff; letter-spacing: .06em; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#help section { padding: .5em .66em; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.row { display: flex; align-items: center; gap: .4em; margin: .25em 0; font-size: 1em; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.row span { flex: 1; }
kbd { display: inline-block; min-width: 2.7em; text-align: center; padding: .2em .6em; border-radius: .4em; font-size: .83em; font-weight: 700; color: #063042; text-shadow: none;
  background: linear-gradient(rgba(255,255,255,.92), rgba(225,240,250,.78)); border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 2px 0 rgba(255,255,255,.12), 0 4px 12px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.7); backdrop-filter: blur(6px); }
.note { margin: .5em 0 0; font-size: .8em; color: #d8f3ff; opacity: .95; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.help-foot { display: flex; align-items: center; gap: 24px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.28); }
.help-flow { flex: 1; font-size: .83em; color: #e4f6ff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
#ok { font-size: 1.25em; font-weight: 800; letter-spacing: .1em; padding: .4em 1.5em; border-radius: .47em; cursor: pointer; color: #063042; text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background: linear-gradient(rgba(220,246,255,.95), rgba(140,220,255,.85)); border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 0 34px rgba(120,220,255,.55), 0 4px 0 rgba(60,140,180,.5), 0 10px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.95); }
#ok:hover { filter: brightness(1.06); box-shadow: 0 0 48px rgba(140,230,255,.8), 0 4px 0 rgba(60,140,180,.5), 0 10px 24px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.95); } #ok:active { transform: translateY(2px); box-shadow: 0 0 34px rgba(120,220,255,.55), 0 2px 0 rgba(60,140,180,.5); }

#blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

/* ---- 出典表示 (右下・常時) ---- */
#credits a, .help-src a { color: #9fe3ff; text-decoration: underline; pointer-events: auto; }   /* 地理院タイル一覧へのリンク (出典の決まり) */
#credits { position: absolute; right: 8px; bottom: 6px; z-index: 5; font-size: 12px; color: #dbe9f2; background: rgba(0,0,0,.45); padding: 3px 8px; border-radius: 4px; pointer-events: none; }

/* ---- 都市を選ぶ (ガラスのカード) ---- */
/* 画面に収める: 文字の大きさを幅 (9列で3段に収まる) と高さの両方で決める。それでも溢れたら縦スクロール (2026-10-08 英語版で切れたため) */
#select { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; padding-bottom: 2vh; background: linear-gradient(to top, rgba(2,8,16,.6) 0%, rgba(2,8,16,.3) 55%, rgba(2,8,16,0) 75%); pointer-events: none; font-size: clamp(11px, min(2vh, .88vw), 24px); overflow: hidden; padding-top: 30vh; box-sizing: border-box; }
#select > .select-head { margin-top: auto; padding-top: 2em; }
.select-head { display: flex; align-items: baseline; gap: 1em; margin-bottom: .4em; color: #f2fbff; text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 0 18px rgba(0,200,255,.4); }
.select-title { font-size: 1.8em; font-weight: 800; letter-spacing: .08em; }
.select-hint { font-size: .8em; color: #cfeeff; }
/* 2026-10-10 (AnimeMap と同じ仕様、ご主人様のご指示): 画面の上 30% (スマホは 26%) は必ず地図に空け、カードの箱は残りに収めて箱の中だけ縦スクロール。
   ★grid-auto-rows: max-content が要る: 無いと箱の高さに合わせてカードが縦につぶれる。★mask-image で端をぼかさない (すりガラスが効かなくなる) */
.city-cards { display: grid; grid-template-columns: repeat(auto-fit, 11.5em); gap: .45em; justify-content: center; align-content: start; pointer-events: auto; width: 96vw;
  flex: 0 1 auto; min-height: 0; grid-auto-rows: max-content; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: .9em .6em 1.2em; box-sizing: border-box;
  scrollbar-width: thin; scrollbar-color: rgba(140,230,255,.55) transparent; }
.city-cards::-webkit-scrollbar { width: 6px; }
.city-cards::-webkit-scrollbar-thumb { background: rgba(140,230,255,.55); border-radius: 3px; }
.city-cards::-webkit-scrollbar-track { background: transparent; }
/* 下にまだカードがあるときの印 (箱の下端の中央に光る札。押すと 1 画面ぶん送る)。出し入れは soratwin.js の moreBelow */
.more-below { display: none; position: absolute; left: 50%; bottom: calc(2vh + .2em); z-index: 2; pointer-events: auto; cursor: pointer; margin: 0; appearance: none;
  font: inherit; font-size: 1.05em; font-weight: 800; letter-spacing: .06em; line-height: 1.2; color: #063042; padding: .35em 1.2em; border-radius: 999px;
  background: linear-gradient(rgba(220,246,255,.97), rgba(140,220,255,.9)); border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 0 26px rgba(120,220,255,.8), 0 8px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.95);
  transform: translateX(-50%); animation: more-bob 1.6s ease-in-out infinite; }
.more-below.show { display: block; }
.more-below:hover { filter: brightness(1.07); box-shadow: 0 0 40px rgba(140,230,255,.95), 0 8px 20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.95); }
@keyframes more-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }
.select-error { color: #ffd6d6; background: rgba(120,0,0,.55); border: 1px solid rgba(255,120,120,.6); border-radius: 8px; padding: .3em .9em; margin-bottom: .6em; pointer-events: auto; }
/* カードは button (Tab と Enter で選べる: 2026-10-08)。見た目は div のときと同じ */
.city-card { position: relative; padding: .6em .8em .55em; border-radius: 14px; cursor: pointer; color: #f2fbff; overflow: hidden; display: block; width: 100%; text-align: left; font: inherit; line-height: inherit; margin: 0; appearance: none;
  background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.06) 45%, rgba(120,210,255,.10));
  border: 1px solid rgba(255,255,255,.4);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(255,255,255,.12);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; animation: rise .5s ease-out both; }
.city-card::before { content: ""; position: absolute; inset: -40% -10% auto -10%; height: 60%; pointer-events: none;
  background: linear-gradient(170deg, rgba(255,255,255,.22), rgba(255,255,255,0) 60%); transform: rotate(-4deg); }
.city-card:focus-visible { outline: 3px solid #9ff0ff; outline-offset: 2px; }
.q-btn:focus-visible, #ok:focus-visible { outline: 3px solid #9ff0ff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.city-card:hover, .city-card:focus-visible { transform: translateY(-6px); border-color: rgba(140,230,255,.9); box-shadow: 0 0 40px rgba(120,220,255,.55), 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.7); }
.city-num { position: absolute; right: .7em; top: .6em; min-width: 1.6em; text-align: center; padding: .1em .4em; border-radius: .5em; font-size: 1.1em; font-weight: 800; color: #063042;
  background: linear-gradient(rgba(220,246,255,.95), rgba(140,220,255,.85)); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 0 16px rgba(120,220,255,.5), inset 0 1px 0 rgba(255,255,255,.9); }
.city-name { font-size: 1.5em; font-weight: 800; letter-spacing: .06em; line-height: 1.1; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.city-sub { display: block; font-family: Consolas, "Cascadia Mono", monospace; font-size: .42em; letter-spacing: .4em; color: #7fe7ff; font-weight: 400; margin-top: .2em; }
.city-desc { margin-top: .35em; font-size: .72em; color: #e4f6ff; text-shadow: 0 1px 2px rgba(0,0,0,.7); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.city-year { margin-top: .25em; font-size: .62em; color: #bfefff; opacity: .9; font-family: Consolas, "Cascadia Mono", monospace; }

/* ---- 画質ボタン (操作説明パネル内・ガラス) ---- */
.help-quality { display: flex; align-items: center; gap: .4em; margin-top: .7em; padding-top: .6em; border-top: 1px solid rgba(255,255,255,.28); }
.q-label { font-size: 1em; font-weight: 700; color: #bfefff; margin-right: .3em; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.q-btn { display: flex; flex-direction: column; align-items: center; min-width: 4.2em; padding: .25em .6em; border-radius: .5em; cursor: pointer; font-size: 1em; font-weight: 800; color: #f2fbff; line-height: 1.1;
  background: linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.08)); border: 1px solid rgba(255,255,255,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 10px rgba(0,0,0,.3); }
.q-btn span { font-size: .55em; font-weight: 600; letter-spacing: .05em; opacity: .9; }
.q-btn:hover { border-color: rgba(140,230,255,.9); }
.q-btn.on { color: #063042; background: linear-gradient(rgba(220,246,255,.97), rgba(140,220,255,.9)); border-color: rgba(255,255,255,.9); box-shadow: 0 0 22px rgba(120,220,255,.6), inset 0 1px 0 rgba(255,255,255,.95); }
.q-note { margin-left: .6em; font-size: .72em; color: #d8f3ff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
#qbar { position: absolute; right: 12px; top: 10px; z-index: 6; display: flex; align-items: center; gap: .3em; font-size: 15px; padding: .3em .5em; border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); box-shadow: 0 8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.4); }
#qbar.hidden { display: none; }
#qbar .q-btn { min-width: 2em; padding: .15em .4em; }
#qbar .q-label { font-size: .9em; }
#hud-perf { font-size: 13px; margin-top: 2px; color: #9fe8ff; font-family: Consolas, monospace; }

/* ---- 隠れページ /_stats (社内だけ): SoraBus の使い方ページと同じ、濃紺に白文字・大きめの字の読みやすい型 (ガラスは使わない。2026-10-08 ご主人様) ---- */
#stats { position: absolute; inset: 0; overflow-y: auto; box-sizing: border-box; padding: 26px 18px 60px; background: #0b1020; color: #fff; font-size: 18px; line-height: 1.6; }
#stats .inner { max-width: 960px; margin: 0 auto; }
#stats h1 { font-size: 27px; margin: 0 0 6px; outline: none; }
#stats h2 { font-size: 21px; margin: 26px 0 8px; color: #ffd54f; border-bottom: 2px solid rgba(255,255,255,.25); padding-bottom: 6px; }
#stats .note { font-size: 15px; color: #cfd8e3; margin: 0 0 14px; }
#stats .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
#stats .tile { padding: 12px 16px; border-radius: 12px; background: #16203a; border: 2px solid #2b3a62; }
#stats .tile .k { font-size: 16px; color: #7fd0ff; font-weight: 700; }
#stats .tile .v { font-size: 40px; font-weight: 800; line-height: 1.15; color: #fff; }
#stats .tile .v.small { font-size: 22px; margin-top: 8px; }
#stats .tile .s { font-size: 15px; color: #cfd8e3; }
#stats table { border-collapse: collapse; width: 100%; font-size: 17px; }
#stats th, #stats td { padding: 6px 10px; text-align: right; border-bottom: 1px solid rgba(255,255,255,.2); }
#stats th { color: #ffd54f; font-weight: 700; background: #141c33; }
#stats td:first-child, #stats th:first-child { text-align: left; }
#stats tr:nth-child(even) td { background: rgba(255,255,255,.04); }
#stats .dim { color: #9fb0c3; font-size: 15px; }
#stats .cols { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 760px) { #stats .cols { grid-template-columns: 1fr; } #stats { font-size: 16px; padding: 16px 10px 40px; } }
/* ---- 評価用サイトの断り書き (2026-10-08 ご主人様のご指示: 題字・操作説明・紹介画像に入れる) ---- */
.eval-note { color: #cfeeff; opacity: .85; font-size: .9em; letter-spacing: .06em; }
#splash .eval-note { margin-top: 1.2em; font-size: clamp(12px, 1.6vh, 18px); text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.help-eval { margin: .6em 0 0; font-size: .8em; }

/* ---- 触って使う端末 (スマートフォン / タブレット): 2026-10-08 iPhone 実機で確認 ---- */
#hud-touch { display: none; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; gap: 14px; }
#hud-touch.hidden { display: none !important; }
#hud-touch button { width: 64px; height: 64px; border-radius: 50%; font-size: 28px; color: #063042; cursor: pointer;
  background: linear-gradient(rgba(220,246,255,.95), rgba(140,220,255,.85)); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 0 22px rgba(120,220,255,.5), 0 8px 20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.9); }
.touch-note { display: none; margin: .4em 0 0; color: #e4f6ff; line-height: 1.4; }
@media (pointer: coarse) {
  #hud-touch { display: flex; }
  .help-cols { display: none; }          /* キーボードとマウスの説明は要らない */
  .touch-note { display: block; }
  #hud-help { display: none; }
}
@media (max-width: 700px) {
  #qbar { font-size: 12px; right: 6px; top: 6px; }
  #hud { left: 8px; top: 48px; max-width: 70vw; }   /* 画質ボタンの下に */
  #hud-title { font-size: 18px; } #hud-mode { font-size: 14px; }
  #credits { font-size: 9px; right: 4px; bottom: 2px; left: 4px; text-align: center; padding: 2px 4px; }
  #select { font-size: 13px; padding-bottom: 4vh; padding-top: 26vh; }
  #select > .select-head { flex-direction: column; align-items: flex-start; gap: .1em; padding-top: .4em; margin-bottom: .5em; width: 94vw; }
  .select-head .help-tag { display: none; }
  .select-title { font-size: 1.4em; }
  .city-cards { grid-template-columns: repeat(2, 1fr); width: 94vw; padding: .7em .2em 1em; }
  .more-below { bottom: calc(4vh + .2em); }
  #help { width: 96vw; max-height: 92vh; font-size: 14px; }
  .help-quality { flex-wrap: wrap; }
  .help-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  #ok { width: 100%; }
}

/* ---- ⓪ 会社のロゴと社名 ---- */
#brand { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; background: #0b0b0c; color: #fff; transition: opacity .7s ease; }
#brand.out { opacity: 0; }
#brand img { width: clamp(90px, 14vh, 220px); height: auto; animation: rise 1s ease-out both; }
.brand-name { font-size: clamp(22px, 4vh, 48px); font-weight: 800; letter-spacing: .12em; animation: rise 1s .15s ease-out both; }
.brand-sub { font-size: clamp(11px, 1.6vh, 18px); letter-spacing: .4em; color: #cfcfcf; font-family: Consolas, "Cascadia Mono", monospace; animation: rise 1s .3s ease-out both; }
.splash-brand { position: relative; display: flex; align-items: center; gap: .6em; margin-bottom: 1.2em; color: #fff; font-size: clamp(16px, 2.6vh, 30px); font-weight: 700; letter-spacing: .14em; animation: rise 1s ease-out both; text-shadow: 0 2px 6px rgba(0,0,0,.8); }
.splash-brand img { width: 2.2em; height: 2.2em; }