/* トイレ我慢ゲーム ザ・サバイバル
   見た目は承認モック v2（docs/mock/index.html・approved-20260926.png）とシリーズ特設サイトのトークンを踏襲。 */
:root {
  --c-bg: #06070b;
  --c-surface: #0b0e15;
  --c-glass: rgba(6, 7, 11, .80);
  --c-text: #f1eadb;
  --c-muted: rgba(241, 234, 219, .66);
  --c-line: rgba(241, 234, 219, .16);
  --c-accent: #ff3d2e;
  --c-done: #8fbf8a;
  --c-g0: #8fbf8a; --c-g1: #ffd400; --c-g2: #ff8a1f; --c-g3: #ff3d2e;
  --c-scrap: #f1eadb; --c-food: #a8d59a; --c-water: #7cc4e8;   /* 素材の識別色（浮かぶ数字） */

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --r-1: 2px;
  --f-display: 'Dela Gothic One', 'BIZ UDGothic', 'Yu Gothic', sans-serif;
  --f-body: 'Zen Kaku Gothic New', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  --f-mono: 'DM Mono', Consolas, ui-monospace, monospace;
  --fs-1: .6875rem; --fs-2: .8125rem; --fs-3: 1rem; --fs-4: 1.75rem;
  --e-1: 0 1px 0 rgba(241, 234, 219, .06) inset;
  --tw: 76px; --th: 46px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #111316; overscroll-behavior: none; }
body { color: var(--c-text); font-family: var(--f-body); font-size: var(--fs-3); line-height: 1.6; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
button[disabled] { cursor: not-allowed; }
[hidden] { display: none !important; }
.noscript { padding: 2rem; color: var(--c-text); }

.phone { position: relative; overflow: hidden; margin: 0 auto; width: 100%; max-width: 480px; height: 100vh; height: 100dvh; background: var(--c-bg); }

/* ---------- マップ ---------- */
.map { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; background: #1a1c1f; user-select: none; -webkit-user-select: none; }
.map.is-dragging { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; width: 820px; height: 1230px; will-change: transform; }
.world__ground { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 120, 40, .55), rgba(120, 30, 60, .55)); mix-blend-mode: multiply; opacity: var(--dusk, 0); transition: opacity 1s linear; }
.map.is-raid::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; box-shadow: inset 0 0 90px 20px rgba(255, 61, 46, .55); animation: pulse .6s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .map.is-raid::before { animation: none; } }

.cell { position: absolute; width: var(--tw); height: var(--th); padding: 0; border: 0; background: transparent; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.cell::before { content: ''; position: absolute; inset: 1px; clip-path: inherit; }
.cell.is-open::before { background: rgba(241, 234, 219, .06); }
.cell.is-open:hover::before { background: rgba(241, 234, 219, .18); }
.cell.is-locked::before { background: rgba(6, 7, 11, .55); }
.cell.is-free::before { background: rgba(143, 191, 138, .22); }
.cell.is-free::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-mono); font-size: 1.25rem; line-height: 1; color: var(--c-done); text-shadow: 0 1px 3px #000; }
.cell.is-selected::before { background: rgba(255, 255, 255, .34); }
.sprite { position: absolute; pointer-events: none; transform: translate(-50%, -100%); }
.sprite img { display: block; width: 100%; height: auto; }
.sprite.is-broken img { filter: grayscale(1) brightness(.55) sepia(.4) hue-rotate(-30deg) saturate(3); }
.sprite.is-stopped img { filter: brightness(.6); }
.sprite.is-building img { opacity: .5; }
.sprite.is-mirror img { transform: scaleX(-1); }
.sprite__badge { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font-family: var(--f-mono); font-size: 9px; line-height: 1; white-space: nowrap; background: var(--c-glass); border: 1px solid var(--c-line); padding: 2px 4px; }
.sprite__badge.is-alert { border-color: var(--c-accent); color: var(--c-accent); }
.sprite__badge.is-up { border-color: var(--c-done); color: var(--c-done); }

/* 生産施設から浮かぶ数字 */
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 2000; }
.fx-pop { position: absolute; transform: translate(-50%, 0); font-family: var(--f-mono); font-size: 12px; font-weight: 500; white-space: nowrap;
  text-shadow: 0 1px 3px #000, 0 0 2px #000; animation: fx-rise 1.8s ease-out forwards; }
.fx-pop--scrap { color: var(--c-scrap); } .fx-pop--food { color: var(--c-food); } .fx-pop--water { color: var(--c-water); }
@keyframes fx-rise { 0% { opacity: 0; transform: translate(-50%, 6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -26px); } }
@media (prefers-reduced-motion: reduce) { .fx-pop { animation: fx-fade 1.8s linear forwards; } }
@keyframes fx-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 上部UI ---------- */
.ui-top { position: absolute; left: 0; right: 0; top: 0; z-index: 5; padding: var(--s-2) var(--s-3) 0; pointer-events: none; }
.ui-top > * { pointer-events: auto; }
.topbar { display: flex; align-items: center; gap: var(--s-2); }
.topbar__brand { font-family: var(--f-display); font-size: var(--fs-2); line-height: 1.3; text-shadow: 0 1px 4px #000; }
.topbar__brand small { display: block; font-family: var(--f-mono); font-size: var(--fs-1); color: var(--c-muted); letter-spacing: .12em; }
.topbar__hq { margin-left: auto; font-family: var(--f-mono); font-size: var(--fs-2); background: var(--c-glass); border: 1px solid var(--c-line); padding: 2px var(--s-2); }
.topbar__menu { width: 44px; height: 44px; background: var(--c-glass); border: 1px solid var(--c-line); border-radius: var(--r-1); display: grid; place-items: center; }
.res { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-1); margin-top: var(--s-2); }
.res__item { background: var(--c-glass); border: 1px solid var(--c-line); padding: 2px var(--s-2); min-width: 0; }
.res__label { font-size: var(--fs-1); color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res__val { font-family: var(--f-mono); font-size: var(--fs-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res__val small { color: var(--c-muted); }
.res__cap { height: 2px; background: var(--c-line); margin-top: 1px; }
.res__cap i { display: block; height: 100%; background: var(--c-text); }
.res__item.is-full .res__cap i { background: var(--c-g2); }
.res__rate { font-family: var(--f-mono); font-size: 10px; line-height: 1.3; color: var(--c-muted); white-space: nowrap; }
.res__rate.is-down { color: var(--c-accent); }
.res__item.is-empty { border-color: var(--c-accent); }
.res__item.is-empty .res__val { color: var(--c-accent); }

/* signature: 決戦メーター */
.hud { margin-top: var(--s-2); border: 1px solid var(--c-line); background: var(--c-glass); box-shadow: var(--e-1); }
.hud::before { content: ''; display: block; height: 4px; background: repeating-linear-gradient(-45deg, var(--stage) 0 8px, transparent 8px 14px); }
.hud__row { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding: var(--s-2) var(--s-3) var(--s-1); align-items: end; }
.hud__raid-label, .hud__gauge-label { font-size: var(--fs-1); color: var(--c-muted); letter-spacing: .08em; }
.hud__clock { font-family: var(--f-mono); font-size: var(--fs-4); line-height: 1; font-variant-numeric: tabular-nums; }
.hud.is-imminent .hud__clock { color: var(--c-accent); }
.hud__wave { font-size: var(--fs-1); color: var(--c-muted); margin-top: 2px; }
.hud__gauge-head { display: flex; justify-content: space-between; align-items: baseline; }
.hud__pct { font-family: var(--f-display); font-size: var(--fs-3); color: var(--stage); }
.gauge { position: relative; height: 12px; background: rgba(241, 234, 219, .1); margin-top: 2px; }
.gauge__fill { position: absolute; inset: 0 auto 0 0; background: var(--stage); transition: width .3s linear; }
.gauge__tick { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--c-text); opacity: .5; }
.gauge__tick--50 { left: 50%; } .gauge__tick--75 { left: 75%; } .gauge__tick--100 { left: calc(100% - 1px); }
.gauge__scale { position: relative; height: 12px; font-family: var(--f-mono); font-size: 9px; color: var(--c-muted); }
.gauge__scale span { position: absolute; transform: translateX(-50%); top: 1px; white-space: nowrap; }
.gauge__lbl--50 { left: 50%; } .gauge__lbl--75 { left: 75%; } .gauge__lbl--100 { left: 94%; }
.hud__troops { text-align: right; font-family: var(--f-mono); font-size: var(--fs-2); }
.hud__troops em { font-style: normal; color: var(--stage); }
.hud__live { border-top: 1px solid var(--c-line); padding: var(--s-1) var(--s-3); font-size: var(--fs-2); line-height: 1.5; }
.hud__live b { color: var(--stage); }

.raidbanner { position: absolute; left: 0; right: 0; top: 42%; z-index: 6; text-align: center; pointer-events: none; font-family: var(--f-display); font-size: 1.75rem; text-shadow: 0 2px 12px #000, 0 0 2px var(--c-accent); }
.raidbanner small { display: block; font-family: var(--f-mono); font-size: var(--fs-2); color: var(--c-accent); letter-spacing: .2em; }

/* ---------- 下部UI ---------- */
.ui-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; }
.wallbar { display: flex; justify-content: space-between; gap: var(--s-2); width: calc(100% - 1.5rem); margin: 0 auto var(--s-2); background: var(--c-glass); border: 1px solid var(--c-line); padding: var(--s-1) var(--s-3); font-size: var(--fs-1); color: var(--c-muted); min-height: 32px; align-items: center; }
.wallbar.is-broken { border-color: var(--c-accent); color: var(--c-accent); }
.wallbar.is-selected { border-color: var(--c-text); color: var(--c-text); }
.sheet { background: var(--c-surface); border-top: 1px solid var(--c-line); padding: var(--s-3) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); }
.sheet__head { display: flex; align-items: baseline; gap: var(--s-2); }
.sheet__name { font-family: var(--f-display); font-size: var(--fs-3); }
.sheet__lv { font-family: var(--f-mono); font-size: var(--fs-2); color: var(--c-muted); }
.sheet__max { margin-left: auto; font-size: var(--fs-1); color: var(--c-muted); }
.sheet__effect { margin: var(--s-1) 0 0; font-size: var(--fs-2); font-family: var(--f-mono); }
.sheet__effect b { color: var(--c-done); font-weight: 500; }
.sheet__desc { font-size: var(--fs-1); color: var(--c-muted); margin: var(--s-1) 0 var(--s-2); min-height: 1.5em; line-height: 1.5; }
.costs { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-bottom: var(--s-2); }
.cost { display: flex; align-items: baseline; gap: var(--s-2); padding: 3px var(--s-2); border: 1px solid var(--c-line); background: rgba(241, 234, 219, .04); font-size: var(--fs-1); }
.cost__n { color: var(--c-muted); }
.cost__v { font-family: var(--f-mono); font-size: var(--fs-2); }
.cost__s { font-family: var(--f-mono); color: var(--c-done); }
.cost.is-short { border-color: var(--c-accent); }
.cost.is-short .cost__s { color: var(--c-accent); }
.sheet__desc b { color: var(--c-text); font-weight: 500; }
.picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-1); margin-bottom: var(--s-2); }
.pick { min-height: 44px; padding: var(--s-1); background: rgba(241, 234, 219, .04); border: 1px solid var(--c-line); border-radius: var(--r-1); text-align: center; line-height: 1.2; }
.pick__g { display: block; font-family: var(--f-display); font-size: 1.125rem; }
.pick__n { display: block; font-size: 9px; color: var(--c-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick.is-active { border-color: var(--c-accent); background: rgba(255, 61, 46, .12); }
.pick.is-off { opacity: .45; }
.primary { width: 100%; min-height: 48px; border: 0; border-radius: var(--r-1); background: var(--c-accent); color: var(--c-bg); font-family: var(--f-display); font-size: var(--fs-3); display: flex; align-items: center; justify-content: center; gap: var(--s-3); padding: 0 var(--s-3); }
.primary:active { transform: translateY(1px); }
.primary[disabled] { background: #3a2a2a; color: var(--c-muted); }
.primary.is-quiet { background: transparent; color: var(--c-text); border: 1px solid var(--c-line); }
.sheet__why { font-size: var(--fs-1); color: var(--c-accent); margin-top: var(--s-2); }
.sheet__why:empty { display: none; }

/* ---------- カード・メニュー・通知 ---------- */
.overlay { position: absolute; inset: 0; z-index: 9; background: rgba(6, 7, 11, .78); display: flex; align-items: flex-end; }
.card { width: 100%; max-height: 92%; overflow-y: auto; background: var(--c-surface); border-top: 2px solid var(--c-accent); padding: var(--s-5) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom)); }
.card.is-calm { border-top-color: var(--c-done); }
.card__kicker { font-family: var(--f-mono); font-size: var(--fs-1); letter-spacing: .14em; color: var(--c-accent); margin: 0; }
.card.is-calm .card__kicker { color: var(--c-done); }
.card__title { font-family: var(--f-display); font-size: 1.375rem; font-weight: 400; margin: var(--s-1) 0 var(--s-3); line-height: 1.3; }
.card__list { list-style: none; margin: 0 0 var(--s-4); padding: 0; font-size: var(--fs-2); }
.card__list li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--c-line); }
.card__list li span:last-child { font-family: var(--f-mono); text-align: right; }
.card__list li.is-bad span:last-child { color: var(--c-accent); }
.card__note { font-size: var(--fs-1); color: var(--c-muted); margin: 0 0 var(--s-3); }
.card__h { font-family: var(--f-display); font-size: var(--fs-3); font-weight: 400; margin: var(--s-4) 0 var(--s-2); }
.card__text { font-size: var(--fs-2); color: var(--c-muted); margin: 0 0 var(--s-2); }
.card__area { width: 100%; min-height: 84px; background: var(--c-bg); color: var(--c-text); border: 1px solid var(--c-line); font-family: var(--f-mono); font-size: var(--fs-1); padding: var(--s-2); word-break: break-all; resize: vertical; }
.card__row { display: flex; gap: var(--s-2); margin: var(--s-2) 0 var(--s-3); }
.card__row .primary { flex: 1; }
.toast { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; max-width: 86%; background: var(--c-surface); border: 1px solid var(--c-accent); padding: var(--s-2) var(--s-3); font-size: var(--fs-2); text-align: center; }