/* 記録するな ― 災害記録保存館 */
:root {
  --ink: #1d1b18;
  --paper: #ebe3cd;
  --paper2: #f4eedd;
  --red: #b0221c;
  --blue: #2a5c8a;
  --ui: #0e0f11;
  --ui2: #1a1c20;
  --line: #3a3d44;
  --text: #e8e6df;
  --dim: #9ea1a8;
  --ok: #4f9a6a;
  --warn: #c8902a;
  --font: "Zen Kaku Gothic New", "Yu Gothic", "Hiragino Sans", sans-serif;
  --mincho: "Zen Old Mincho", "Yu Mincho", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07080a; color: var(--text); font-family: var(--font); overflow: hidden; -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior: none; touch-action: none; }
button { font-family: inherit; }
canvas#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }
.small { font-size: 12px; color: var(--dim); }
.touch-only { display: none; }
body.touch .touch-only { display: inline; }
body.touch .desk-only { display: none; }

/* ---------------- title */
#title { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: #050506; overflow: auto; }
#title-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.38; filter: grayscale(0.4) contrast(1.05); }
#title-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,6,0.2), rgba(5,5,6,0.85)); }
.title-inner { position: relative; max-width: 560px; width: 100%; padding: 28px 16px; text-align: center; }
.series { font-size: 12px; letter-spacing: 0.2em; color: var(--dim); }
#title h1 { font-family: var(--mincho); font-size: clamp(44px, 12vw, 76px); margin: 10px 0 0; letter-spacing: 0.18em; font-weight: 700; text-shadow: 0 0 18px rgba(176,34,28,0.35); }
#title .sub { font-family: var(--mincho); font-size: 16px; color: #cfcabc; letter-spacing: 0.12em; }
#title .lead { font-family: var(--mincho); font-size: 17px; margin: 22px 0 6px; }
#title .meta { font-size: 12px; color: var(--dim); margin-bottom: 18px; }
#title-menu { display: flex; flex-direction: column; gap: 10px; align-items: center; margin: 10px 0 12px; }
#title-menu button { width: min(280px, 100%); padding: 12px 10px; font-size: 16px; background: rgba(235,227,205,0.08); color: var(--text); border: 1px solid #5a5650; border-radius: 4px; cursor: pointer; letter-spacing: 0.1em; }
#title-menu button:hover:not(:disabled) { background: rgba(235,227,205,0.18); }
#title-menu button:disabled { opacity: 0.4; cursor: default; }
#btn-start, #btn-continue { border-color: #a89a78 !important; }
#loading { font-size: 13px; color: var(--dim); min-height: 18px; }
.controls { margin-top: 14px; line-height: 1.7; }

/* ---------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#objective { position: absolute; left: 12px; top: 10px; max-width: min(56vw, 520px); padding: 6px 10px; background: rgba(10,10,12,0.62); border-left: 3px solid #c8b890; font-size: 14px; line-height: 1.45; }
#status { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 42vw; }
#status > div { padding: 4px 9px; background: rgba(10,10,12,0.62); font-size: 12.5px; border-radius: 3px; }
#recloc.mismatch { border: 1px solid var(--red); }
#recloc .mm { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid currentColor; font-size: 11px; }
#pending { color: #e8d8a8; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255,255,255,0.65); box-shadow: 0 0 2px #000; }
#crosshair.on { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: none; border: 2px solid #f2e2b0; }
#prompt { position: absolute; left: 50%; top: calc(50% + 22px); transform: translateX(-50%); font-size: 14px; padding: 3px 10px; background: rgba(10,10,12,0.55); border-radius: 3px; white-space: nowrap; }
#prompt:empty { display: none; }
#prompt .k { display: inline-block; border: 1px solid #ccc; border-radius: 3px; padding: 0 5px; margin-right: 6px; font-size: 12px; }
#subs { position: absolute; left: 50%; bottom: 13vh; transform: translateX(-50%); text-align: center; width: min(92vw, 720px); }
#subs div { display: inline-block; margin: 2px auto; padding: 4px 12px; background: rgba(8,8,10,0.7); font-size: 15px; line-height: 1.5; border-radius: 3px; }
#subs .sfx { color: #d8d0b8; font-size: 13px; }
#subs .sfx .dir { display: inline-block; width: 1.4em; font-weight: 700; color: #f0c070; }
#say { position: absolute; left: 50%; bottom: 22vh; transform: translateX(-50%); font-family: var(--mincho); font-size: 18px; text-shadow: 0 1px 3px #000, 0 0 10px #000; text-align: center; width: min(92vw, 720px); opacity: 0; transition: opacity 0.4s; }
#say.on { opacity: 1; }
#toasts { position: absolute; left: 12px; top: 64px; display: flex; flex-direction: column; gap: 6px; max-width: min(70vw, 420px); }
.toast { background: rgba(14,14,16,0.82); border-left: 3px solid #a89a78; padding: 6px 10px; font-size: 13.5px; transition: opacity 0.6s; }
.toast.out { opacity: 0; }
.toast.good { border-color: var(--ok); }
.toast.bad { border-color: var(--red); }
#cue { position: absolute; left: 50%; top: 58px; transform: translateX(-50%); padding: 4px 14px; font-size: 13px; letter-spacing: 0.1em; background: rgba(14,10,10,0.78); border: 1px solid #8a3a30; border-radius: 3px; }
#cue .ic { display: inline-block; margin-right: 6px; font-weight: 700; }
#debug { position: absolute; right: 8px; bottom: 8px; font: 11px/1.4 ui-monospace, Consolas, monospace; background: rgba(0,0,0,0.7); padding: 6px 8px; white-space: pre; max-width: 46vw; overflow: hidden; }

/* ---------------- touch */
#touch { position: fixed; inset: 0; z-index: 11; pointer-events: none; }
#t-look { position: absolute; right: 0; top: 0; width: 60vw; height: 100%; pointer-events: auto; }
#t-stick { position: absolute; left: 22px; bottom: 26px; width: 128px; height: 128px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.22); pointer-events: auto; touch-action: none; }
#t-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255,255,255,0.28); }
#t-buttons { position: absolute; right: 14px; bottom: 18px; display: grid; grid-template-columns: repeat(2, 70px); gap: 10px; pointer-events: auto; }
#t-buttons button { height: 54px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.35); background: rgba(20,20,24,0.55); color: #fff; font-size: 14px; touch-action: none; }
#t-buttons button.big { grid-column: span 2; height: 62px; font-size: 17px; background: rgba(60,52,36,0.7); }
#t-buttons button.on { background: rgba(200,184,144,0.45); }
#t-pause { position: absolute; right: 12px; top: 84px; width: 44px; height: 44px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.35); background: rgba(20,20,24,0.55); color: #fff; font-size: 16px; pointer-events: auto; }

/* ---------------- windows */
#win-root { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.win-wrap { position: absolute; inset: 0; background: rgba(4,4,6,0.66); display: flex; align-items: center; justify-content: center; pointer-events: auto; padding: 12px; }
.win { background: var(--ui); border: 1px solid var(--line); border-radius: 6px; width: min(560px, 100%); max-height: calc(100vh - 24px); display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.win.wide { width: min(860px, 100%); }
.win-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.win-title { font-weight: 700; font-size: 16px; flex: 1; }
.win-sub { font-size: 12px; color: var(--dim); }
.win-x { background: none; border: 1px solid #555; color: var(--text); border-radius: 4px; padding: 4px 10px; cursor: pointer; font-size: 13px; }
.win-body { padding: 12px 14px; overflow-y: auto; -webkit-overflow-scrolling: touch; line-height: 1.6; font-size: 14.5px; }
.win-foot { padding: 10px 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.win-foot:empty { display: none; }
.btn { background: #24272d; color: var(--text); border: 1px solid #4a4e56; border-radius: 4px; padding: 9px 14px; font-size: 14px; cursor: pointer; min-height: 40px; }
.btn:hover:not(:disabled) { background: #2e3239; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.primary { background: #3a3424; border-color: #a89a78; }
.btn.danger { background: #3a1c1a; border-color: #b0221c; }
.btn .note { display: block; font-size: 11px; color: var(--dim); }
.hint { font-size: 12px; color: var(--dim); margin-top: 8px; }

/* document (paper) */
.paper { background: var(--paper); color: var(--ink); font-family: var(--mincho); padding: 22px 22px 18px; border-radius: 2px; position: relative; box-shadow: inset 0 0 60px rgba(120,90,40,0.22); line-height: 1.9; font-size: 16px; overflow: hidden; }
.paper .ptitle { font-weight: 700; border-bottom: 1px solid rgba(0,0,0,0.25); margin-bottom: 10px; padding-bottom: 4px; font-size: 15px; }
.paper.fold::after { content: ""; position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; background: linear-gradient(135deg, var(--paper) 50%, #c8bc9c 50%); box-shadow: -2px -2px 4px rgba(0,0,0,0.15); transition: width 1.6s, height 1.6s; }
.paper .margin-mark { position: absolute; right: 10px; top: 30%; width: 3px; height: 40px; background: var(--red); opacity: 0.75; transition: top 2s; }
.paper img { max-width: 100%; display: block; margin: 8px auto; border: 6px solid #f8f4ea; box-shadow: 0 2px 6px rgba(0,0,0,0.35); }
.doc-think { margin-top: 10px; font-size: 14px; color: #cfc9b8; font-family: var(--mincho); }

/* inventory */
.inv { display: grid; grid-template-columns: minmax(130px, 210px) 1fr; gap: 12px; }
.inv-list { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; }
.inv-list button { text-align: left; background: #1d2025; border: 1px solid #343840; color: var(--text); padding: 7px 9px; border-radius: 3px; font-size: 13.5px; cursor: pointer; }
.inv-list button.on { border-color: #c8b890; background: #2a2a24; }
.inv-list button .rd { float: right; font-size: 11px; color: var(--dim); }
.inv-detail { min-height: 160px; }
@media (max-width: 560px) { .inv { grid-template-columns: 1fr; } .inv-list { max-height: 26vh; } }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; flex-wrap: wrap; }
.tabs button { background: #1a1c20; color: var(--dim); border: 1px solid #343840; border-radius: 3px; padding: 6px 11px; font-size: 13px; cursor: pointer; }
.tabs button.on { color: var(--text); border-color: #c8b890; }

/* map */
.mapwrap { position: relative; }
.mapwrap canvas { width: 100%; height: auto; background: #e9e2cc; border-radius: 3px; display: block; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--dim); margin-top: 6px; }
.legend i { display: inline-block; width: 18px; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: 4px; }

/* terminal (registration) */
.term { font-family: var(--font); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 10px; }
.steps div { text-align: center; font-size: 12px; padding: 6px 2px; border: 1px solid #343840; color: var(--dim); border-radius: 3px; }
.steps div.on { color: var(--text); border-color: #c8b890; background: #24221c; }
.steps div.done { color: #a8c8a8; }
.steps div b { display: block; font-size: 13px; }
.field { display: flex; align-items: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; padding: 6px 8px; border: 2px solid transparent; border-radius: 4px; }
.field.bad { border-color: var(--red); }
.field.bad::after { content: "× 矛盾"; color: #ff8a80; font-size: 12px; margin-left: auto; }
.field label { min-width: 84px; font-size: 13.5px; color: var(--dim); }
.opt { background: #1d2025; border: 1px solid #3a3e46; color: var(--text); padding: 7px 11px; border-radius: 3px; cursor: pointer; font-size: 14px; }
.opt.on { border-color: #c8b890; background: #3a3424; }
.opt.dim { opacity: 0.35; }
.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper button { width: 38px; height: 38px; background: #1d2025; color: var(--text); border: 1px solid #3a3e46; border-radius: 3px; font-size: 18px; cursor: pointer; }
.stepper span { min-width: 30px; text-align: center; font-size: 20px; font-variant-numeric: tabular-nums; }
.contra { margin-top: 8px; padding: 8px 10px; border: 1px solid #6a2a24; background: #1c1210; font-size: 13.5px; }
.contra li { margin: 3px 0; }
.affect { margin: 10px 0; padding: 8px 10px; border: 1px dashed #c8902a; color: #f0d8a0; font-size: 14px; }
.holdbtn { position: relative; width: 100%; padding: 14px; font-size: 16px; background: #3a1c1a; color: #fff; border: 1px solid #b0221c; border-radius: 4px; cursor: pointer; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
.holdbtn .bar { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(176,34,28,0.55); }
.holdbtn span { position: relative; }
.refs { font-size: 13px; color: var(--dim); }
.refs li { margin: 2px 0; }
.refs b { color: var(--text); font-weight: 400; }
.draft-ok { color: #a8d8a8; }

/* arrangement (P01 / P02) */
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.slot { min-height: 92px; border: 2px dashed #4a4e56; border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px; font-size: 13px; cursor: pointer; text-align: center; background: #15171a; }
.slot.filled { border-style: solid; border-color: #8a7a58; background: #2a261c; }
.slot.bad { border-color: var(--red); }
.slot .n { font-size: 11px; color: var(--dim); }
.slot img { width: 100%; max-height: 64px; object-fit: cover; border: 3px solid #f0eadc; }
.pieces { display: flex; gap: 8px; flex-wrap: wrap; }
.piece { padding: 8px 10px; border: 1px solid #5a5650; background: #22201a; border-radius: 3px; cursor: pointer; font-size: 13.5px; color: var(--text); }
.piece.sel { border-color: #f0d8a0; background: #3a3424; }
.piece img { display: block; width: 92px; height: 64px; object-fit: cover; border: 3px solid #f0eadc; margin-bottom: 4px; }

/* stamp (P06) */
.choice { display: block; width: 100%; text-align: left; margin: 6px 0; padding: 10px 12px; background: #1d2025; border: 1px solid #3a3e46; color: var(--text); border-radius: 4px; cursor: pointer; font-size: 14.5px; }
.choice.on { border-color: #c8b890; background: #2e2a20; }
.choice:disabled { opacity: 0.45; cursor: default; }
.choice small { display: block; color: var(--dim); font-size: 12.5px; margin-top: 3px; }

/* stage card */
.stage { text-align: center; }
.stage .num { font-size: 13px; color: var(--dim); letter-spacing: 0.2em; }
.stage .ttl { font-family: var(--mincho); font-size: 22px; margin: 4px 0 12px; }
.stage ul { text-align: left; display: inline-block; margin: 0; padding-left: 1.2em; }
.stage .stamp { display: inline-block; border: 3px solid var(--red); color: var(--red); padding: 2px 12px; font-family: var(--mincho); font-weight: 700; transform: rotate(-6deg); margin-bottom: 8px; }

/* fade / death / ending */
#fade { position: fixed; inset: 0; z-index: 25; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.45s; }
#fade.on { opacity: 1; }
#death { position: fixed; inset: 0; z-index: 35; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; }
.death-paper { width: min(420px, 86vw); aspect-ratio: 3 / 4; background: var(--paper2); position: relative; animation: dpaper 4.6s forwards; }
.death-lines { position: absolute; inset: 14% 12%; background: repeating-linear-gradient(180deg, transparent 0 22px, rgba(0,0,0,0.5) 22px 24px); animation: dlines 1.6s forwards; }
.death-stamp { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-12deg) scale(2); border: 6px solid var(--red); color: var(--red); font-family: var(--mincho); font-weight: 700; font-size: 54px; padding: 4px 20px; opacity: 0; animation: dstamp 0.35s 1.9s forwards; }
@keyframes dlines { to { opacity: 0; } }
@keyframes dstamp { to { opacity: 0.9; transform: translate(-50%, -50%) rotate(-12deg) scale(1); } }
@keyframes dpaper { 0% { transform: scale(1); } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.96) translateY(10px); opacity: 0; } }
#ending { position: fixed; inset: 0; z-index: 36; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; }
#ending-img { width: min(900px, 100vw); aspect-ratio: 16 / 10; max-height: 62vh; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.6s; filter: grayscale(0.25); }
#ending-img.on { opacity: 1; }
#ending-text { max-width: min(720px, 92vw); text-align: center; font-family: var(--mincho); font-size: 18px; line-height: 1.9; min-height: 4em; margin-top: 16px; padding: 0 12px; opacity: 0; transition: opacity 1s; }
#ending-text.on { opacity: 1; }
#ending-text .last { font-size: 22px; color: #f0e6cc; }
#ending-skip { position: absolute; bottom: 14px; font-size: 12px; color: #6a6a6a; }

/* result */
.result { text-align: center; }
.result .ename { font-family: var(--mincho); font-size: 26px; margin: 4px 0; }
.result .eid { font-size: 13px; color: var(--dim); letter-spacing: 0.2em; }
.result .eline { font-family: var(--mincho); margin: 8px 0 14px; }
.result .nums { display: flex; justify-content: center; gap: 18px; margin: 10px 0; flex-wrap: wrap; }
.result .nums div { min-width: 90px; }
.result .nums b { display: block; font-size: 22px; }
.result .flaw { display: inline-block; margin-top: 4px; font-size: 11px; color: #9a6a60; border: 1px solid #6a3a30; padding: 1px 6px; }
.share-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.elist { display: flex; flex-direction: column; gap: 6px; }
.elist div { padding: 8px 10px; border: 1px solid #343840; border-radius: 3px; }
.elist div.got { border-color: #8a7a58; }
.elist .how { font-size: 12px; color: var(--dim); }

/* settings */
.set-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.set-row label { min-width: 120px; }
.set-row input[type="range"] { flex: 1; min-width: 140px; }
.set-row select { background: #1d2025; color: var(--text); border: 1px solid #3a3e46; padding: 6px; border-radius: 3px; }

/* handover */
.handover .paper ol { margin: 6px 0 6px 1.2em; padding: 0; }
.handover .paper li.done { text-decoration: line-through; color: #6a6250; }

@media (max-width: 560px) {
  #objective { font-size: 12.5px; max-width: 58vw; }
  #status > div { font-size: 11.5px; }
  .win-body { font-size: 14px; }
  .paper { font-size: 15px; padding: 16px 14px; }
  .slots { grid-template-columns: repeat(2, 1fr); }
  #subs { bottom: 30vh; }
  #say { bottom: 36vh; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .death-paper, .death-lines, .death-stamp { animation-duration: 0.01s !important; animation-delay: 0s !important; }
}

/* kit share buttons */
.share-text { font-size: 13px; color: var(--dim); margin-bottom: 6px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.share-buttons button { background: #24272d; color: var(--text); border: 1px solid #4a4e56; border-radius: 4px; padding: 8px 12px; font-size: 13px; cursor: pointer; min-height: 38px; }
.share-x { background: #111 !important; }
.share-fb { background: #1f3a6a !important; }
.share-line { background: #0a6a2a !important; }
.share-ig { background: #6a2a5a !important; }
.share-note { font-size: 12px; color: var(--dim); margin-top: 6px; min-height: 1em; }
#subs .look { font-size: 15px; color: #f2ecdc; font-family: var(--mincho); }
#subs .notice { color: #ffb4a8; font-family: var(--mincho); border: 1px solid #8a3a30; }
.stage-img { height: 150px; margin: -12px -14px 12px; background-size: cover; background-position: center; filter: grayscale(0.35) brightness(0.8); }
.win-head { flex-wrap: wrap; }
.win-title { min-width: 50%; }
@media (max-width: 560px) { .win-sub { order: 3; width: 100%; } }