:root {
  --bg: #04060a;
  --panel: rgba(10, 16, 24, 0.88);
  --panel2: rgba(16, 26, 38, 0.92);
  --line: #1f3446;
  --text: #dbe6ee;
  --dim: #7d93a4;
  --red: #ff3c3c;
  --red2: #b3121c;
  --amber: #ffb02e;
  --cyan: #6fe3ff;
  --green: #55f0a0;
  --mono: "SF Mono", "Menlo", "Consolas", "Roboto Mono", monospace;
  --sans: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}
html { font-size: 16px; }
html.fz1 { font-size: 18.4px; }
html.fz2 { font-size: 20.8px; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); overflow: hidden; }
body { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.mono { font-family: var(--mono); letter-spacing: 0.04em; }
.dim { color: var(--dim); }
.c-red { color: var(--red); }
b { font-weight: 700; }

#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
#flash { position: fixed; inset: 0; z-index: 50; pointer-events: none; background: #fff; opacity: 0; }
#flash.red { background: var(--red); }

#stage {
  position: relative; z-index: 1; height: 100%; height: 100dvh; max-width: 460px; margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom));
}
@media (min-width: 600px) {
  #stage { border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: rgba(4, 6, 10, 0.55); }
}
.screen { position: absolute; inset: max(10px, env(safe-area-inset-top)) 14px max(10px, env(safe-area-inset-bottom)); display: none; flex-direction: column; }
.screen.on { display: flex; animation: fadein .35s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ボタン */
.btn {
  font: inherit; font-size: 1rem; color: var(--text); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 0.7rem 1rem; cursor: pointer; font-weight: 700;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(#e0262e, #9e0f17); border-color: #ff6b6b; color: #fff; box-shadow: 0 0 24px rgba(255, 40, 40, .35); }
.btn.big { font-size: 1.2rem; padding: 0.95rem 1rem; }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .35; cursor: default; }

/* タイトル */
#title { align-items: center; justify-content: flex-start; text-align: center; gap: 0.7rem; overflow-y: auto; }
#title > :first-child { margin-top: auto; }
#title > :last-child { margin-bottom: auto; }
.t-top { font-size: 0.72rem; color: var(--red); border: 1px solid var(--red2); padding: 0.25rem 0.6rem; border-radius: 4px; animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .45; } }
#earthBig { width: min(62vw, 34vh, 260px); height: min(62vw, 34vh, 260px); flex: none; }
html.fz1 #earthBig, html.fz2 #earthBig { width: min(56vw, 26vh, 240px); height: min(56vw, 26vh, 240px); }
.t-name { margin: 0; font-size: 2.3rem; letter-spacing: 0.08em; text-shadow: 0 0 18px rgba(255, 60, 60, .55); }
.t-lead { margin: 0; line-height: 1.75; color: #c3d2dd; font-size: 1rem; }
#btnStart { width: 100%; max-width: 330px; }
.t-row { display: flex; gap: 0.5rem; width: 100%; max-width: 330px; }
.t-row .btn { flex: 1; font-size: 0.9rem; padding: 0.6rem 0.4rem; }
.t-font { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--dim); }
.fz { font: inherit; font-size: 0.85rem; background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 0.35rem 0.6rem; cursor: pointer; }
.fz.on { border-color: var(--cyan); color: var(--cyan); }
.t-brand { font-size: 0.75rem; color: var(--dim); margin-top: 0.3rem; }

/* 説明 */
#brief { justify-content: center; }
.b-box { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1rem; display: flex; flex-direction: column; gap: 0.8rem; max-height: 100%; overflow: auto; }
.b-head { color: var(--red); font-size: 0.8rem; }
.b-list { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.75rem; line-height: 1.6; font-size: 1rem; }
.b-list .dim { font-size: 0.85rem; }

/* 面接 */
#game { gap: 0.45rem; }
.hud { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--red2); background: linear-gradient(90deg, rgba(120, 0, 10, .35), rgba(10, 16, 24, .6)); border-radius: 10px; padding: 0.3rem 0.4rem 0.3rem 0.8rem; flex: none; }
.hud-label { font-size: 0.75rem; color: #ff9a9a; }
.timer { font-size: 2.6rem; font-weight: 700; color: var(--red); line-height: 1; text-shadow: 0 0 14px rgba(255, 50, 50, .6); font-variant-numeric: tabular-nums; }
.timer.crit { animation: pulse .5s ease-in-out infinite alternate; }
@keyframes pulse { to { color: #fff; text-shadow: 0 0 22px #ff2020; } }
#earthSmall { width: 4.4rem; height: 4.4rem; }
.warn { flex: none; min-height: 1.2rem; font-size: 0.8rem; color: var(--amber); text-align: center; }
.warn.flash { animation: blink .5s steps(2) 4; }

.seats-head { flex: none; display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--dim); padding: 0 0.2rem; }
.seats { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
.seat { border: 1px dashed var(--line); border-radius: 8px; height: 2.9rem; display: flex; align-items: center; gap: 0.3rem; padding: 0 0.3rem; font-size: 0.78rem; color: var(--dim); overflow: hidden; }
.seat.full { border: 1px solid var(--green); color: var(--text); background: rgba(40, 120, 80, .15); animation: seatin .4s ease; }
@keyframes seatin { from { transform: scale(1.15); } }
.seat svg { width: 2rem; height: 2.4rem; flex: none; border-radius: 3px; }
.seat span { line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.card-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.card {
  position: absolute; inset: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 0.7rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.5rem; overflow: auto; touch-action: pan-y; will-change: transform;
}
.card.enter { animation: cardin .28s ease-out; }
@keyframes cardin { from { transform: translateY(18px) scale(.97); opacity: 0; } }
.card.out-l { transition: transform .3s ease-in, opacity .3s; transform: translateX(-120%) rotate(-12deg); opacity: 0; }
.card.out-r { transition: transform .3s ease-in, opacity .3s; transform: translateX(120%) rotate(12deg); opacity: 0; }
.d-head { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--dim); border-bottom: 1px solid var(--line); padding-bottom: 0.3rem; }
.d-body { display: flex; gap: 0.75rem; align-items: center; }
.d-photo { width: min(38%, 150px); aspect-ratio: 4 / 5; height: auto; flex: none; border: 1px solid #2c4a60; border-radius: 4px; overflow: hidden; }
.d-photo svg { width: 100%; height: 100%; display: block; }
.d-title { font-size: 1.45rem; font-weight: 800; line-height: 1.3; }
.d-flaw { margin-top: 0.3rem; font-size: 1.05rem; color: #ff8b8b; font-weight: 700; line-height: 1.4; }
.d-flaw::before { content: "ただし、"; color: var(--dim); font-weight: 400; font-size: 0.9rem; }
.d-stats { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 0.5rem 0.45rem; align-items: center; }
.st-name { font-size: 0.9rem; color: var(--dim); }
.pips { display: flex; gap: 2px; align-items: center; min-width: 0; }
.pip { flex: 1 1 0; min-width: 0.35rem; max-width: 1.1rem; height: 0.8rem; border-radius: 2px; background: #17283a; }
.pips .num { margin-left: 0.3rem; font-size: 0.85rem; font-family: var(--mono); color: var(--text); }
.pip.on { background: var(--cyan); box-shadow: 0 0 6px rgba(111, 227, 255, .5); }
.pips.hid { font-family: var(--mono); color: var(--amber); font-size: 0.85rem; gap: 0.3rem; white-space: nowrap; }
.pips.hid .q { display: inline-block; width: 1.6rem; height: 1.2rem; line-height: 1.2rem; text-align: center; border: 1px dashed var(--amber); border-radius: 3px; }
.pips.reveal .pip.on { background: var(--amber); box-shadow: 0 0 6px rgba(255, 176, 46, .6); animation: pipin .4s ease backwards; }
@keyframes pipin { from { transform: scaleY(0); } }
.d-answer { font-size: 0.95rem; line-height: 1.55; background: rgba(255, 176, 46, .08); border-left: 3px solid var(--amber); padding: 0.4rem 0.6rem; border-radius: 0 6px 6px 0; }
.d-answer::before { content: "回答："; color: var(--amber); font-size: 0.8rem; display: block; }

.stamp { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg) scale(2); font-size: 2.8rem; font-weight: 900; border: 0.3rem solid; padding: 0.1rem 0.9rem; border-radius: 10px; opacity: 0; pointer-events: none; letter-spacing: 0.1em; }
.stamp.yes { color: var(--red); border-color: var(--red); animation: stamp .45s ease forwards; }
.stamp.no { color: #8fa1ae; border-color: #8fa1ae; animation: stamp .45s ease forwards; }
@keyframes stamp { 40% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } }

.next { flex: none; font-size: 0.82rem; color: var(--dim); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next b { color: var(--text); }

.team { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.tm { background: rgba(10, 16, 24, .8); border: 1px solid var(--line); border-radius: 8px; padding: 0.25rem 0.35rem 0.3rem; }
.tm-top { display: flex; justify-content: space-between; font-size: 0.75rem; }
.tm-top .v { font-family: var(--mono); }
.tm-top .v small { color: var(--amber); }
.tm-bar { position: relative; height: 0.45rem; background: #142233; border-radius: 3px; margin-top: 0.2rem; overflow: hidden; }
.tm-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cyan); transition: width .3s; }
.tm-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); }
.tm.ok .tm-fill { background: var(--green); }
.tm.low .v { color: #ff8b8b; }
.team-cap { grid-column: 1 / -1; font-size: 0.7rem; color: var(--dim); text-align: right; margin-top: -0.15rem; }

.actions { flex: none; display: grid; grid-template-columns: 1fr 0.9fr 1fr; gap: 0.45rem; }
.actions .btn { font-size: 1.15rem; padding: 0.85rem 0.3rem; }
.btn.no { background: #1b2530; }
.btn.yes { background: linear-gradient(#e0262e, #9e0f17); border-color: #ff6b6b; color: #fff; }
.btn.ask { font-size: 0.9rem !important; line-height: 1.2; color: var(--amber); border-color: #6a4a14; }
.btn.ask small { display: block; font-size: 0.75rem; color: #ff8b8b; }

/* 発射 */
#launch { align-items: center; justify-content: center; gap: 1.2rem; }
#earthLaunch { width: min(80vw, 46vh, 320px); height: min(80vw, 46vh, 320px); }
.launch-text { text-align: center; font-size: 1.25rem; line-height: 1.7; min-height: 5.5rem; font-weight: 700; }
.launch-text .mono { color: var(--red); font-size: 0.85rem; display: block; }
.launch-text .big { font-size: 2.6rem; color: var(--red); font-family: var(--mono); }

/* 結末 */
#result { gap: 0.5rem; }
.r-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 0.55rem; padding-bottom: 0.4rem; }
.r-kind { font-size: 0.75rem; color: var(--dim); text-align: center; }
.r-new { display: none; align-self: center; font-size: 0.8rem; color: #111; background: var(--amber); padding: 0.15rem 0.6rem; border-radius: 99px; font-weight: 700; }
.r-new.on { display: block; animation: seatin .5s ease; }
.r-title { margin: 0; text-align: center; font-size: 1.9rem; line-height: 1.3; }
.r-title.good { color: var(--green); text-shadow: 0 0 16px rgba(85, 240, 160, .4); }
.r-title.bad { color: var(--red); text-shadow: 0 0 16px rgba(255, 60, 60, .4); }
.r-title.odd { color: var(--amber); text-shadow: 0 0 16px rgba(255, 176, 46, .4); }
.r-story { font-size: 1rem; line-height: 1.75; text-align: center; color: #c9d6e0; }
.r-story p { margin: 0; opacity: 0; animation: fadein .6s ease forwards; }
.r-rate { display: flex; align-items: baseline; justify-content: center; gap: 0.6rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0.4rem 0; }
.r-rate span { color: var(--dim); font-size: 0.9rem; }
.r-rate b { font-size: 1.6rem; color: var(--text); }
.r-sec { font-size: 0.8rem; color: var(--dim); }
.r-crew { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; }
.rc { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.35rem; font-size: 0.78rem; display: flex; flex-direction: column; gap: 0.2rem; }
.rc svg { width: 2.4rem; height: 2.9rem; border-radius: 3px; }
.rc .n { font-weight: 700; line-height: 1.3; font-size: 0.82rem; }
.rc .f { color: #ff8b8b; font-size: 0.72rem; line-height: 1.3; }
.rc .s { font-family: var(--mono); font-size: 0.72rem; color: var(--dim); display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.3rem; }
.rc .s b { color: var(--text); }
.rc .s i { font-style: normal; color: var(--amber); }
.r-legend { font-size: 0.72rem; color: var(--dim); text-align: right; margin-top: -0.3rem; }
.r-legend i { font-style: normal; color: var(--amber); }
.r-reason { margin: 0; font-size: 0.92rem; line-height: 1.6; color: #c9d6e0; background: rgba(255, 255, 255, .04); border-radius: 8px; padding: 0.5rem 0.6rem; }
.r-reason::before { content: "なぜ、こうなったか："; display: block; font-size: 0.78rem; color: var(--dim); }
.r-actions { flex: none; display: flex; flex-direction: column; gap: 0.45rem; }
.r-row { display: flex; gap: 0.45rem; }
.r-row .btn { flex: 1; font-size: 0.95rem; }

/* 結末の記録 */
#book { gap: 0.5rem; }
.bk-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.2rem; font-weight: 800; flex: none; }
.bk-list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 0.35rem; }
.bk { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.45rem 0.6rem; font-size: 0.9rem; }
.bk .tt { font-weight: 700; }
.bk.good .tt { color: var(--green); } .bk.bad .tt { color: var(--red); } .bk.odd .tt { color: var(--amber); }
.bk.no .tt { color: var(--dim); }
.bk .hh { font-size: 0.8rem; color: var(--dim); margin-top: 0.15rem; }
#btnBookBack { flex: none; }

/* 案内 */
.hint { position: absolute; left: 14px; right: 14px; top: max(10px, env(safe-area-inset-top)); z-index: 30; display: none; gap: 0.5rem; align-items: flex-start; background: #1d2a38; border: 1px solid var(--cyan); border-radius: 10px; padding: 0.6rem 0.7rem; font-size: 0.9rem; line-height: 1.55; }
.hint.on { display: flex; }
.hint button { flex: none; background: none; border: 0; color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; }
#rotate { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; text-align: center; background: var(--bg); padding: 1.5rem; font-size: 1.1rem; line-height: 1.7; }
#rotate small { color: var(--dim); font-size: 0.85rem; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) { #rotate { display: flex; } }

/* 揺れ */
.shake { animation: shake .4s linear; }
@keyframes shake { 20% { transform: translate(3px, -2px); } 40% { transform: translate(-3px, 2px); } 60% { transform: translate(2px, 1px); } 80% { transform: translate(-2px, -1px); } }

/* 縦が短い画面（スマホの帯つき）では、少し詰める */
@media (max-height: 700px) {
  .timer { font-size: 2.2rem; }
  #earthSmall { width: 3.6rem; height: 3.6rem; }
  .seat { height: 2.5rem; }
  .seat svg { width: 1.7rem; height: 2rem; }
  .team-cap, .seats-head { display: none; }
  #game { gap: 0.4rem; }
  .actions .btn { padding: 0.7rem 0.3rem; }
  .t-name { font-size: 2rem; }
}

/* 特大・大の文字で、縦が短い画面 */
@media (max-height: 760px) {
  html.fz2 .timer, html.fz1 .timer { font-size: 1.8rem; }
  html.fz2 .hud-label, html.fz1 .hud-label { font-size: 0.65rem; }
  html.fz2 #earthSmall, html.fz1 #earthSmall { width: 2.6rem; height: 2.6rem; }
  html.fz2 .seat, html.fz1 .seat { height: 2.1rem; font-size: 0.68rem; }
  html.fz2 .seat svg, html.fz1 .seat svg { display: none; }
  html.fz2 .warn, html.fz1 .warn { min-height: 0.9rem; font-size: 0.7rem; }
  html.fz2 .tm, html.fz1 .tm { padding: 0.15rem 0.3rem 0.2rem; }
  html.fz2 .tm-top, html.fz1 .tm-top { font-size: 0.68rem; }
  html.fz2 .actions .btn, html.fz1 .actions .btn { padding: 0.55rem 0.2rem; font-size: 1.05rem; }
  html.fz2 .d-photo, html.fz1 .d-photo { width: 27%; }
  html.fz2 .d-head, html.fz1 .d-head { display: none; }
  html.fz2 .card, html.fz1 .card { padding: 0.55rem 0.6rem; gap: 0.4rem; }
  html.fz2 .d-title, html.fz1 .d-title { font-size: 1.25rem; }
  html.fz2 .d-flaw, html.fz1 .d-flaw { font-size: 0.95rem; }
  html.fz2 .next, html.fz1 .next { font-size: 0.75rem; }
}
/* 縦に長い画面（パソコンなど）では、カードを大きく */
@media (min-height: 780px) {
  .d-photo { width: min(40%, 170px); }
  .d-title { font-size: 1.8rem; }
  .d-flaw { font-size: 1.2rem; }
  .d-stats { gap: 0.9rem 0.5rem; margin-top: 0.4rem; }
  .pip { height: 1rem; }
}
.keys { margin-top: auto; text-align: center; font-size: 0.75rem; color: var(--dim); font-family: var(--mono); }
@media (pointer: coarse) { .keys { display: none; } }
@media (max-height: 760px) {
  html.fz1 #title, html.fz2 #title { gap: 0.4rem; }
  html.fz1 #earthBig, html.fz2 #earthBig { width: 21vh; height: 21vh; }
  html.fz1 .t-lead, html.fz2 .t-lead { line-height: 1.5; }
  html.fz1 .t-name, html.fz2 .t-name { font-size: 1.8rem; }
  html.fz1 .t-top, html.fz2 .t-top { font-size: 0.6rem; }
  html.fz1 .btn.big, html.fz2 .btn.big { padding: 0.7rem 1rem; }
}

/* ===== 人物の絵 ===== */
img.face { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; -webkit-user-drag: none; }
.d-photo { box-shadow: 0 0 0 1px #2c4a60, 0 6px 18px rgba(0,0,0,.5); position: relative; }
.d-photo::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); pointer-events: none; }
.seat img.face { width: 2rem; height: 2.4rem; flex: none; border-radius: 3px; }
.rc img.face { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 4px; }
html.fz1 .seat img.face, html.fz2 .seat img.face { display: none; }

/* ===== 航海 ===== */
#voyage { gap: 0.45rem; }
.v-top { flex: none; display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--dim); }
.v-meters .tm.up { border-color: var(--green); box-shadow: 0 0 12px rgba(85,240,160,.35); }
.v-meters .tm.down { border-color: var(--red); box-shadow: 0 0 12px rgba(255,60,60,.35); }
.tm-top .v em { font-style: normal; font-size: 0.7rem; margin-left: 0.15rem; }
.tm.up .v em { color: var(--green); } .tm.down .v em { color: var(--red); }
.v-scene { position: relative; flex: none; aspect-ratio: 3 / 2; max-height: 34vh; width: 100%; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #0a1018; }
.v-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.v-img.zoom { animation: kenburns 14s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.12); filter: brightness(.6); } 12% { filter: brightness(1); } to { transform: scale(1); } }
.v-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(4,6,10,.92)); }
.v-title { position: absolute; left: 0.8rem; bottom: 0.55rem; z-index: 1; font-size: 1.45rem; font-weight: 800; text-shadow: 0 2px 10px #000; }
.v-title .mono { display: block; font-size: 0.75rem; color: #ff8b8b; font-weight: 400; }
.v-text { flex: none; font-size: 0.98rem; line-height: 1.6; }
.v-text p { margin: 0; opacity: 0; animation: fadein .5s ease forwards; }
.v-ask { flex: none; }
.v-ask-text { font-weight: 800; font-size: 1.1rem; color: var(--amber); }
.v-bar { height: 4px; background: #142233; border-radius: 2px; margin-top: 0.3rem; overflow: hidden; }
#vBar { height: 100%; background: var(--amber); width: 100%; }
#vBar.crit { background: var(--red); }
.v-pick { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; align-content: end; }
.vp { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 0.3rem 0.3rem 0.45rem; display: flex; flex-direction: column; gap: 0.2rem; align-items: stretch; cursor: pointer; text-align: center; min-height: 0; }
.vp img.face { aspect-ratio: 4 / 5; height: auto; border-radius: 6px; max-height: 22vh; }
.vp:not(:disabled):hover, .vp:not(:disabled):active { border-color: var(--amber); }
.vp:disabled { opacity: .35; cursor: default; }
.vp-n { font-size: 0.8rem; font-weight: 700; line-height: 1.25; }
.vp-s { font-size: 0.78rem; color: var(--dim); line-height: 1.25; }
.vp-s b { color: var(--cyan); font-family: var(--mono); font-size: 0.95rem; } .vp-s i { color: var(--amber); font-style: normal; }
.vp-s small { color: #ff8b8b; font-size: 0.7rem; }
.v-res { display: none; flex: 1 1 auto; min-height: 0; overflow: auto; flex-direction: column; gap: 0.5rem; }
.v-res.on { display: flex; animation: fadein .35s ease; }
.vr-row { display: flex; gap: 0.7rem; align-items: flex-start; }
.vr-face { width: 5.5rem !important; height: 6.9rem !important; flex: none; border-radius: 8px; border: 1px solid var(--line); }
.vr-face.none { display: flex; align-items: center; justify-content: center; color: var(--dim); background: var(--panel); }
.v-res.good .vr-face { border-color: var(--green); } .v-res.bad .vr-face { border-color: var(--red); } .v-res.odd .vr-face { border-color: var(--amber); }
.vr-who { font-weight: 800; font-size: 1rem; }
.vr-who .mono { font-size: 0.8rem; color: var(--dim); font-weight: 400; }
.vr-text { margin: 0.25rem 0 0; font-size: 1rem; line-height: 1.6; }
.vr-quote { margin: 0.3rem 0 0; color: var(--amber); font-size: 0.92rem; }
.vr-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip { font-size: 0.85rem; font-family: var(--mono); padding: 0.15rem 0.5rem; border-radius: 99px; border: 1px solid; }
.chip.up { color: var(--green); } .chip.down { color: var(--red); } .chip.odd { color: var(--amber); }
#btnNext { margin-top: auto; }

/* ===== 結末 ===== */
.r-img { flex: none; aspect-ratio: 3 / 2; width: 100%; border-radius: 12px; background-size: cover; background-position: center; border: 1px solid var(--line); animation: fadein 1.2s ease; }
.r-log { display: flex; flex-direction: column; gap: 0.3rem; }
.lg { font-size: 0.85rem; line-height: 1.45; background: var(--panel); border-left: 3px solid var(--line); border-radius: 0 6px 6px 0; padding: 0.35rem 0.5rem; }
.lg .mono { color: var(--dim); font-size: 0.72rem; margin-right: 0.4rem; }
.lg small { color: #b9c8d3; }
.lg em { font-style: normal; font-family: var(--mono); font-size: 0.75rem; margin-left: 0.4rem; }
.lg em.up { color: var(--green); } .lg em.down { color: var(--red); }

@media (max-height: 700px) {
  .v-scene { max-height: 27vh; }
  .v-title { font-size: 1.2rem; }
  .v-text { font-size: 0.9rem; line-height: 1.5; }
  .vp img.face { max-height: 17vh; }
  .vr-face { width: 4.4rem !important; height: 5.5rem !important; }
}
html.fz1 .v-meters .tm-bar, html.fz2 .v-meters .tm-bar { display: none; }
@media (max-height: 760px) {
  html.fz2 .v-scene, html.fz1 .v-scene { max-height: 20vh; }
  html.fz2 .vp img.face, html.fz1 .vp img.face { max-height: 12vh; }
  html.fz2 .v-text, html.fz1 .v-text { font-size: 0.85rem; }
}

/* タイトルの候補者の列 */
.t-faces { width: 100%; overflow: hidden; flex: none; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.t-faces-in { display: flex; gap: 6px; width: max-content; animation: faces 60s linear infinite; }
.t-faces img { width: 44px; height: 55px; object-fit: cover; border-radius: 4px; opacity: .75; filter: saturate(.8); }
@keyframes faces { to { transform: translateX(-50%); } }
@media (max-height: 700px) { .t-faces img { width: 36px; height: 45px; } }
html.fz1 .tm-top .v em, html.fz2 .tm-top .v em { display: none; }

/* ===== 序章・その後・手紙 ===== */
.linkbtn { font: inherit; font-size: 0.8rem; background: none; border: 0; color: var(--dim); text-decoration: underline; cursor: pointer; padding: 0.2rem; }
#prologue, #finale { justify-content: flex-end; gap: 0.8rem; }
.pg-img { position: absolute; inset: calc(-1 * max(10px, env(safe-area-inset-top))) -14px; background-size: cover; background-position: center; z-index: -1; }
.pg-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(4,6,10,.15), rgba(4,6,10,.55) 45%, rgba(4,6,10,.96) 78%); }
.pg-img.zoom { animation: kenburns 16s ease-out forwards; }
.pg-img.dim::after { background: linear-gradient(rgba(4,6,10,.35), rgba(4,6,10,.8) 40%, rgba(4,6,10,.97) 70%); }
#prologue { cursor: pointer; overflow: hidden; }
#finale { overflow: hidden; }
.pg-text { font-size: 1.25rem; line-height: 1.8; font-weight: 700; text-shadow: 0 2px 12px #000; min-height: 7rem; }
.pg-text p { margin: 0; opacity: 0; animation: fadein .9s ease forwards; }
.pg-text.hard { font-size: 1.7rem; color: #ff6b6b; text-align: center; min-height: 9rem; }
.pg-foot { display: flex; justify-content: space-between; align-items: center; color: var(--dim); font-size: 0.75rem; }
.pg-foot .btn { font-size: 0.85rem; padding: 0.45rem 0.9rem; }
.launch-text .noa { display: block; font-size: 1rem; font-weight: 400; line-height: 1.75; color: var(--cyan); margin-top: 0.4rem; }
.vr-secret { font-size: 1.05rem; line-height: 1.75; background: rgba(111,227,255,.07); border-left: 3px solid var(--cyan); padding: 0.5rem 0.7rem; border-radius: 0 8px 8px 0; animation: fadein 1.2s ease; }
.vr-true { font-size: 0.78rem; color: var(--dim); }
.vr-true b { color: var(--cyan); }
.vr-noa { margin: 0; font-size: 0.88rem; line-height: 1.6; color: #a9dff0; border-top: 1px dashed var(--line); padding-top: 0.45rem; }
.vr-noa .mono { display: block; font-size: 0.68rem; color: var(--dim); }
.fn-body { flex: none; max-height: 70%; overflow: auto; display: flex; flex-direction: column; gap: 0.7rem; }
.fn-head { font-size: 0.75rem; color: var(--amber); }
.fn-row { display: flex; gap: 0.7rem; align-items: center; opacity: 0; animation: fadein .8s ease forwards; }
.fn-row img.fn-face { width: 4rem; height: 5rem; flex: none; border-radius: 6px; border: 1px solid var(--line); }
.fn-row b { font-size: 0.95rem; }
.fn-row p { margin: 0.15rem 0 0; font-size: 0.98rem; line-height: 1.55; }
.fn-letter { background: rgba(236, 228, 210, .95); color: #2a2620; border-radius: 6px; padding: 1rem 1.1rem; box-shadow: 0 10px 40px rgba(0,0,0,.6); font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; }
.fn-letter .fn-head { color: #8a2a20; margin-bottom: 0.5rem; }
.fn-letter p { margin: 0 0 0.5rem; font-size: 1.08rem; line-height: 1.85; opacity: 0; animation: fadein 1s ease forwards; }
.fn-by { text-align: right; font-size: 0.85rem; color: #6a5f50; opacity: 0; animation: fadein 1s ease forwards; }
#fnNext { flex: none; }
@media (max-height: 700px) { .fn-row img.fn-face { width: 3.2rem; height: 4rem; } .pg-text { font-size: 1.1rem; } }
#prologue, #finale { isolation: isolate; }
#voyage.resolved .v-text { display: none; }
#voyage.resolved .v-scene { max-height: 20vh; }

/* ===== やり込み ===== */
.t-rank { width: 100%; max-width: 330px; flex: none; }
.rk-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; font-size: 0.85rem; }
.rk-row b { flex: 1; text-align: left; color: var(--amber); }
.rk-row .mono { font-size: 0.75rem; }
.rk-bar { height: 4px; background: #142233; border-radius: 2px; overflow: hidden; margin-top: 0.25rem; }
.rk-bar > div { height: 100%; background: var(--amber); }
.t-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; width: 100%; max-width: 330px; flex: none; }
.md { font: inherit; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.2rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.1rem; }
.md b { font-size: 0.85rem; } .md small { font-size: 0.68rem; color: var(--dim); }
.md.on { border-color: var(--red); box-shadow: 0 0 12px rgba(255,60,60,.3); }
.md:disabled { opacity: .45; cursor: default; }
.r-gain { display: flex; flex-direction: column; gap: 0.3rem; background: rgba(255,176,46,.06); border: 1px solid #4a3a1a; border-radius: 8px; padding: 0.5rem 0.6rem; }
.gn-xp { display: flex; justify-content: space-between; font-size: 0.85rem; } .gn-xp .mono { color: var(--amber); }
.gn { font-size: 0.85rem; padding-left: 0.6rem; border-left: 2px solid var(--cyan); animation: fadein .6s ease backwards; }
.gn.ach { border-color: var(--amber); color: var(--amber); } .gn.up { border-color: var(--green); color: var(--green); font-weight: 700; }
.bk-tabs { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.3rem; }
.bk-tabs button { font: inherit; font-size: 0.85rem; color: var(--dim); background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 0.4rem 0; cursor: pointer; }
.bk-tabs button.on { color: var(--text); border-color: var(--amber); background: rgba(255,176,46,.08); }
.bk .lt { font-size: 0.75rem; color: #b9a98a; }
.ch-cap { font-size: 0.75rem; color: var(--dim); margin: 0.2rem 0; }
.ch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; }
.ch { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 0.2rem; display: flex; flex-direction: column; gap: 0.1rem; cursor: pointer; text-align: center; }
.ch img.face { aspect-ratio: 4 / 5; height: auto; border-radius: 4px; }
.ch.seen img.face { filter: grayscale(1) brightness(.5); }
.ch span { font-size: 0.65rem; line-height: 1.2; min-height: 1.6rem; }
.ch i { font-style: normal; font-size: 0.65rem; color: var(--amber); letter-spacing: -0.05em; }
.ch.no { cursor: default; } .ch-q { aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; color: var(--dim); background: #0b131c; border-radius: 4px; font-size: 1.4rem; }
.ch-detail { position: absolute; inset: 0; z-index: 20; background: rgba(4,6,10,.85); display: none; align-items: center; justify-content: center; padding: 0.6rem; }
.ch-detail.on { display: flex; animation: fadein .25s ease; }
.cd-in { position: relative; width: 100%; max-height: 100%; overflow: auto; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.cd-x { position: absolute; right: 0.4rem; top: 0.3rem; background: none; border: 0; color: var(--text); font-size: 1.4rem; cursor: pointer; }
.cd-top { display: flex; gap: 0.7rem; } .cd-face { width: 6rem !important; height: 7.5rem !important; flex: none; border-radius: 8px; }
.cd-top b { font-size: 1.15rem; } .cd-top p { margin: 0.2rem 0 0; font-size: 0.85rem; }
.cd-flaw { color: #ff8b8b; } .cd-st { font-size: 0.75rem !important; } .cd-st b { color: var(--cyan); }
.cd-sec { font-size: 0.92rem; line-height: 1.6; border-top: 1px solid var(--line); padding-top: 0.4rem; }
.cd-sec .mono { font-size: 0.7rem; color: var(--amber); } .cd-sec p { margin: 0.15rem 0 0; }
#book { position: absolute; }
@media (max-height: 700px) { .t-faces { display: none; } }
@media (max-height: 760px) {
  #earthBig { width: min(50vw, 22vh); height: min(50vw, 22vh); }
  #title { gap: 0.5rem; }
  .t-lead { font-size: 0.92rem; line-height: 1.6; }
}
@media (max-height: 760px) { html.fz1 #earthBig, html.fz2 #earthBig { width: 15vh; height: 15vh; } html.fz1 .t-lead, html.fz2 .t-lead { display: none; } }

/* ===== 本編『最後の五日間』 ===== */
#btnCamp { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 0.15rem; flex: none; }
#btnCamp small { font-size: 0.78rem; font-weight: 400; opacity: .85; }
.t-quick { width: 100%; max-width: 330px; display: flex; flex-direction: column; gap: 0.35rem; border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem; flex: none; }
.t-quick > .mono { font-size: 0.68rem; color: var(--dim); text-align: left; }
.t-quick #btnStart { padding: 0.55rem; }
#scene { justify-content: flex-end; gap: 0.7rem; overflow: hidden; cursor: pointer; }
.sc-body { font-size: 1.15rem; line-height: 1.8; font-weight: 700; text-shadow: 0 2px 12px #000; display: flex; flex-direction: column; gap: 0.25rem; max-height: 62%; overflow: auto; }
.sc-body p { margin: 0; opacity: 0; animation: fadein .8s ease forwards; }
.sc-body p.say { font-weight: 400; color: #e6eef4; padding-left: 0.6rem; border-left: 2px solid rgba(120, 220, 255, .45); }
.sc-body .spk { display: block; font-size: 0.75rem; color: var(--cyan); font-weight: 700; letter-spacing: .05em; }
.sc-head { font-size: 0.75rem; color: var(--amber); margin-bottom: 0.2rem; }
.sc-body.big { text-align: center; font-size: 1.9rem; line-height: 1.5; margin-bottom: 18vh; }
.sc-body.big .sc-head { font-size: 0.85rem; color: var(--red); }
.sc-body.hard { font-size: 1.6rem; color: #ff6b6b; text-align: center; margin-bottom: 14vh; }
.sc-body.rules { font-size: 0.98rem; line-height: 1.6; font-weight: 400; background: rgba(6, 10, 16, .82); border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.8rem; text-shadow: none; gap: 0.35rem; }
.sc-body.rules p:first-of-type { font-weight: 700; color: var(--amber); }
.sc-choices { display: flex; flex-direction: column; gap: 0.45rem; flex: none; }
.sc-choices:empty { display: none; }
.sc-ch { display: flex; flex-direction: column; gap: 0.1rem; text-align: left; opacity: 0; animation: fadein .5s ease forwards; background: rgba(16, 24, 34, .92); }
.sc-ch.primary { text-align: center; }
.sc-ch small { font-size: 0.78rem; font-weight: 400; color: var(--amber); }
#scQuit { font-size: 0.78rem; padding: 0.35rem 0.7rem; }
.d-head .again { color: var(--amber); border: 1px solid #6a4a14; border-radius: 4px; padding: 0 0.3rem; margin-right: 0.4rem; }
#cend { gap: 0.5rem; }
.ce-story { text-align: left; }
.ce-story p.say { color: #e6eef4; }
.ce-story .spk { font-size: 0.75rem; color: var(--cyan); margin-right: 0.4rem; }
.ce-ships { display: flex; flex-direction: column; gap: 0.3rem; }
.cs { display: grid; grid-template-columns: 3.2rem auto 1fr auto; gap: 0.45rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.3rem 0.45rem; font-size: 0.85rem; }
.cs .mono { font-size: 0.75rem; color: var(--dim); }
.cs-f { display: flex; gap: 2px; }
.cs-f img { width: 1.7rem; height: 2.1rem; object-fit: cover; object-position: 50% 22%; border-radius: 3px; }
.cs-t { display: flex; flex-direction: column; min-width: 0; }
.cs-t small { font-size: 0.7rem; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs em { font-style: normal; font-size: 0.75rem; }
.cs.good em, .cs.good b { color: var(--green); } .cs.bad b { color: var(--red); } .cs.bad em { color: var(--dim); }
.bk-tabs button { min-width: 0; }
@media (max-height: 700px) { .sc-body { font-size: 1.05rem; } .sc-body.big { font-size: 1.6rem; } .t-lead { display: none; } }
@media (max-height: 760px) {
  html.fz1 .t-top, html.fz2 .t-top { display: none; }
  html.fz1 #earthBig, html.fz2 #earthBig { width: 13vh; height: 13vh; }
  html.fz1 #title, html.fz2 #title { gap: 0.35rem; }
  html.fz1 .t-quick, html.fz2 .t-quick { padding: 0.35rem; gap: 0.25rem; }
  html.fz1 .t-row .btn, html.fz2 .t-row .btn { padding: 0.4rem 0.3rem; }
}
@media (max-height: 700px) { #earthBig { width: 22vh; height: 22vh; } }
@media (min-height: 701px) { #earthBig { width: min(62vw, 24vh, 220px); height: min(62vw, 24vh, 220px); } }
@media (max-height: 920px) { .t-faces { display: none; } #title { gap: 0.55rem; } }
@media (min-height: 701px) and (max-height: 920px) { #earthBig { width: 18vh; height: 18vh; } .t-name { font-size: 2rem; } }
/* 航路表 */
.v-route { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.2rem; font-size: 0.72rem; }
.v-route i { font-style: normal; color: var(--dim); opacity: .6; }
.rt { border: 1px solid var(--line); border-radius: 4px; padding: 0.05rem 0.3rem; color: #c3d2dd; }
.rt.done { opacity: .35; }
.rt.now { border-color: var(--amber); color: #111; background: var(--amber); font-weight: 700; }
.v-next { font-size: 0.82rem; color: #c3d2dd; margin: 0.15rem 0 0.25rem; }
.v-next b { color: var(--cyan); }
#voyage.resolved .v-route { display: none; }
.sc-body.all p, .sc-choices.all .sc-ch { animation: none; opacity: 1; }

/* ===== 旅：持ち場の割りふり ===== */
#voyage:not(.resolved):not(.talk) .v-scene { max-height: 17vh; aspect-ratio: auto; height: 17vh; }
#voyage:not(.resolved):not(.talk) .v-title { font-size: 1.15rem; }
#voyage:not(.resolved) .v-text { font-size: 0.9rem; line-height: 1.5; }
.v-posts { flex: none; display: flex; flex-direction: column; gap: 0.3rem; }
.vpost { font: inherit; color: var(--text); text-align: left; background: var(--panel); border: 1px dashed #36506a; border-radius: 9px; padding: 0.35rem 0.5rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.2rem; }
.vpost.full { border-style: solid; border-color: #4b7090; background: var(--panel2); }
.vpost.trap { border-color: var(--amber); }
.vp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 0.4rem; }
.vp-h b { font-size: 0.92rem; } .vp-h b .mono { color: var(--dim); font-size: 0.7rem; margin-right: 0.35rem; }
.vp-h > .mono { font-size: 0.7rem; color: var(--cyan); white-space: nowrap; }
.vp-trap { font-size: 0.75rem; color: var(--amber); }
.vp-slot { display: flex; align-items: center; gap: 0.45rem; min-height: 1.9rem; font-size: 0.85rem; }
.vp-slot img.vp-face { width: 1.6rem; height: 1.9rem; flex: none; border-radius: 4px; }
.vp-who { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-st { font-family: var(--mono); font-size: 0.78rem; color: var(--dim); } .vp-st b { color: var(--text); } .vp-st i { font-style: normal; color: var(--amber); }
.vp-empty { color: var(--dim); font-size: 0.8rem; }
.v-crew { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; align-content: end; }
.vc { font: inherit; color: var(--text); background: var(--panel); border: 2px solid var(--line); border-radius: 10px; padding: 0.3rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; text-align: center; }
.vc img.vc-face { width: 2.6rem; height: 3.1rem; border-radius: 5px; }
.vc-n { font-size: 0.78rem; font-weight: 700; line-height: 1.25; }
.vc-f { font-size: 0.68rem; color: #ff8b8b; line-height: 1.25; }
.vc.sel { border-color: var(--amber); box-shadow: 0 0 14px rgba(255,176,46,.35); }
.vc.used { opacity: .45; }
.vc.used.sel { opacity: 1; }
.v-help { font-size: 0.78rem; color: var(--dim); min-height: 1rem; }
.v-go { display: flex; align-items: center; gap: 0.5rem; }
.v-go .v-bar { flex: 1; margin: 0; }
#btnGoStage { padding: 0.6rem 1.4rem; font-size: 1.05rem; }
#btnGoStage:disabled { background: var(--panel2); border-color: var(--line); box-shadow: none; color: var(--dim); }
#btnGoStage.ready { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 30px rgba(255,60,60,.7); } }
.vr-drain { font-size: 0.75rem; color: #ff8b8b; }
.vr-row2 { display: flex; gap: 0.55rem; align-items: flex-start; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem; animation: seatin .4s ease; }
.vr-row2 .vr-face { width: 2.8rem !important; height: 3.4rem !important; flex: none; border-radius: 6px; border: 2px solid var(--line); }
.vr-row2.good .vr-face { border-color: var(--green); } .vr-row2.bad .vr-face { border-color: var(--red); } .vr-row2.odd .vr-face { border-color: var(--amber); }
.vr-row2 .vr-body { flex: 1; min-width: 0; }
.vr-post { font-size: 0.7rem; color: var(--dim); }
.vr-row2 .vr-text { margin: 0.1rem 0; font-size: 0.9rem; line-height: 1.5; }
.vr-row2 .vr-quote { margin: 0; font-size: 0.82rem; color: #c3d2dd; }
.vr-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; border-radius: 4px; padding: 0.05rem 0.35rem; margin: 0.1rem 0; }
.vr-badge.up { background: var(--amber); color: #111; } .vr-badge.down { background: #5a1418; color: #ffb3b3; } .vr-badge.odd { background: #3a2a08; color: var(--amber); border: 1px solid var(--amber); }
.vr-chips { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-top: 0.15rem; }
#voyage.resolved .v-scene { max-height: 12vh; height: 12vh; aspect-ratio: auto; }
#voyage.resolved .v-title { font-size: 1rem; }
#voyage.talk .v-scene { max-height: 26vh; }
@media (max-height: 760px) {
  html.fz1 .vc img.vc-face, html.fz2 .vc img.vc-face { display: none; }
  html.fz1 #voyage:not(.resolved):not(.talk) .v-scene, html.fz2 #voyage:not(.resolved):not(.talk) .v-scene { display: none; }
  html.fz1 .vp-trap, html.fz2 .vp-trap { font-size: 0.7rem; }
}
/* 割りふりの画面を詰める */
#voyage:not(.resolved):not(.talk) .v-scene { max-height: 10vh; height: 10vh; }
#voyage:not(.resolved):not(.talk) .v-title { font-size: 1rem; bottom: 0.35rem; }
#voyage:not(.resolved):not(.talk) .v-title .mono { display: none; }
#voyage { gap: 0.35rem; }
.v-crew { flex: none; align-content: start; }
.vc img.vc-face { width: 2.1rem; height: 2.5rem; }
.vp-slot { min-height: 1.6rem; }
.vp-slot img.vp-face { width: 1.35rem; height: 1.6rem; }
.v-posts { flex: 1 1 auto; min-height: 0; overflow: auto; }
.v-pick .v-ask-text { grid-column: 1 / -1; }
@media (max-height: 700px) { .v-route { display: none; } }
@media (min-height: 780px) {
  #voyage:not(.resolved):not(.talk) .v-scene { max-height: 24vh; height: 24vh; }
  #voyage:not(.resolved):not(.talk) .v-title .mono { display: block; }
  .vc img.vc-face { width: 4.2rem; height: 5rem; }
  .vp-slot img.vp-face { width: 1.8rem; height: 2.2rem; }
  .vp-slot { min-height: 2.2rem; }
}

/* ================= 新しい旅（2026-11-10） ================= */
#btnRun, #btnDaily { width: 100%; max-width: 330px; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; flex: none; }
#btnRun small, #btnDaily small { font-size: 0.75rem; font-weight: 400; opacity: .85; }
#btnDaily { padding: 0.55rem; }
.t-stat { display: flex; gap: 0.7rem; font-size: 0.78rem; color: var(--dim); flex-wrap: wrap; justify-content: center; }
.t-stat:empty { display: none; }
.t-stat b { color: var(--amber); font-family: var(--mono); }

/* 船の状態の帯 */
.res-bar { flex: none; display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 0.3rem; }
.rs { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.2rem 0.4rem 0.35rem; display: flex; align-items: baseline; gap: 0.3rem; }
.rs .rs-n { font-size: 0.72rem; color: var(--dim); }
.rs b { font-size: 1.05rem; }
.rs small { font-size: 0.7rem; color: var(--dim); }
.rs i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--cyan); transition: width .5s; }
.rs.low b { color: var(--amber); } .rs.low i { background: var(--amber); }
.rs.crit { border-color: var(--red2); } .rs.crit b { color: var(--red); } .rs.crit i { background: var(--red); }
.rs.crit { animation: blink 1.2s steps(2) infinite; }
.rs em { position: absolute; right: 0.25rem; top: 0.1rem; font-style: normal; font-family: var(--mono); font-size: 0.72rem; animation: deltaup 1.6s ease forwards; }
.rs.up em { color: var(--green); } .rs.down em { color: var(--red); }
.rs.up { border-color: #2e7d55; } .rs.down { border-color: var(--red2); }
@keyframes deltaup { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.rs.crew { padding-right: 0.5rem; }

/* 地図 */
#map { gap: 0.4rem; }
.m-head { flex: none; display: flex; align-items: baseline; gap: 0.6rem; }
.m-head .mono { font-size: 0.72rem; color: var(--amber); }
.m-head b { font-size: 1.15rem; flex: 1; }
.m-box { position: relative; flex: 1 1 auto; min-height: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #03060a; }
.m-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 1; animation: fadein 1.2s ease; }
.m-img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(4,6,10,.15), rgba(4,6,10,.55)); }
.m-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-svg line { stroke: rgba(160, 190, 210, .28); stroke-width: 0.5; stroke-dasharray: 1.2 1.2; vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
.m-svg line.can { stroke: var(--amber); stroke-dasharray: none; stroke-width: 2.5px; animation: dash 1.2s linear infinite; stroke-dasharray: 6 4; }
.m-svg line.past { stroke: var(--cyan); stroke-dasharray: none; stroke-width: 2.5px; opacity: .8; }
@keyframes dash { to { stroke-dashoffset: -20; } }
.m-nodes { position: absolute; inset: 0; }
.mn { position: absolute; transform: translate(-50%, -50%); font: inherit; color: var(--text); background: none; border: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; cursor: pointer; }
.mn b { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; background: rgba(10,16,24,.9); border: 2px solid #4b6a82; box-shadow: 0 0 10px rgba(0,0,0,.6); }
.mn span { font-size: 0.68rem; color: #c3d2dd; white-space: nowrap; text-shadow: 0 1px 3px #000, 0 0 6px #000; }
.mn.t-event b { border-color: #e66; color: #ffb4b4; }
.mn.t-unknown b { border-color: #b08cff; color: #d9c8ff; }
.mn.t-rescue b { border-color: var(--cyan); color: var(--cyan); }
.mn.t-station b { border-color: var(--green); color: var(--green); }
.mn.t-rest b { border-color: #8fb3ff; color: #c8d9ff; }
.mn.t-boss b { width: 3.3rem; height: 3.3rem; font-size: 1.4rem; border-color: var(--red); color: #fff; background: rgba(120, 0, 10, .75); box-shadow: 0 0 18px rgba(255, 50, 50, .5); }
.mn.off { opacity: .38; cursor: default; }
.mn.past { opacity: .55; cursor: default; }
.mn.past b { background: rgba(111,227,255,.15); }
.mn.can b { animation: nodepulse 1.4s ease-in-out infinite; }
.mn.sel b { background: var(--amber); color: #111; border-color: #fff; animation: none; transform: scale(1.12); }
@keyframes nodepulse { 50% { box-shadow: 0 0 0 6px rgba(255,176,46,.25), 0 0 18px rgba(255,176,46,.6); } }
.mn.start span { font-size: 0.68rem; color: var(--dim); background: rgba(4,6,10,.7); border: 1px solid var(--line); border-radius: 99px; padding: 0.1rem 0.5rem; }
.m-ship { position: absolute; width: 1.7rem; height: 1.7rem; transform: translate(-50%, -50%); transition: left .9s ease-in-out, top .9s ease-in-out; pointer-events: none; filter: drop-shadow(0 0 6px rgba(111,227,255,.9)); z-index: 2; margin-top: -1.9rem; }
.m-ship svg { width: 100%; height: 100%; } .m-ship path { fill: #fff; stroke: var(--cyan); stroke-width: 1; }
.m-info { flex: none; min-height: 3.2rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem 0.6rem; font-size: 0.9rem; line-height: 1.5; }
.m-info p { margin: 0; }
.mi-row { display: flex; gap: 0.6rem; align-items: center; }
.mi-row > div { flex: 1; min-width: 0; }
.mi-row .btn { flex: none; padding: 0.7rem 0.9rem; }
.mi-t { font-size: 1rem; } .mi-t.t-event { color: #ffb4b4; } .mi-t.t-unknown { color: #d9c8ff; } .mi-t.t-rescue { color: var(--cyan); } .mi-t.t-station { color: var(--green); } .mi-t.t-rest { color: #c8d9ff; } .mi-t.t-boss { color: var(--red); }
.mi-cost { font-size: 0.8rem; }
.m-intro { position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center; background: rgba(4,6,10,.72); cursor: pointer; }
.m-intro.on { display: flex; animation: fadein .5s ease; }
.mi-in { text-align: center; display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem; }
.mi-in .mono { color: var(--amber); font-size: 0.8rem; }
.mi-in b { font-size: 2rem; letter-spacing: 0.1em; text-shadow: 0 0 16px rgba(111,227,255,.5); }
.mi-in p { margin: 0; color: #a9dff0; line-height: 1.7; }
.mi-in .mi-noa { color: var(--dim); font-size: 0.68rem; }
.mi-in small { color: var(--dim); font-size: 0.75rem; margin-top: 0.6rem; }
.crew-strip { flex: none; display: flex; gap: 0.3rem; overflow-x: auto; }
.cs-p { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.2rem; width: 3.6rem; flex: none; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; cursor: pointer; position: relative; }
.cs-p img.face { width: 2.6rem; height: 3.1rem; border-radius: 5px; }
.cs-p span { font-size: 0.6rem; line-height: 1.2; text-align: center; max-height: 1.45rem; overflow: hidden; }
.cs-p em { position: absolute; top: 0.15rem; left: 0.15rem; right: 0.15rem; font-style: normal; font-size: 0.58rem; background: var(--red2); color: #fff; border-radius: 3px; }
.cs-p.sleep img.face { filter: grayscale(1) brightness(.5) hue-rotate(180deg); }
.cs-p.sleep em { background: #2a5a8a; }
.cd-stats { display: flex; gap: 0.8rem; font-size: 0.85rem; flex-wrap: wrap; } .cd-stats b { color: var(--cyan); } .cd-stats i { font-style: normal; color: var(--amber); }
.t-up { color: var(--green) !important; } .t-down { color: var(--red) !important; }
.cd-sec p.t-up, .cd-sec p.t-down { font-weight: 700; } .cd-sec p small { font-weight: 400; color: #c9d6e0; }

/* 場所の中身 */
#node { gap: 0.4rem; }
.n-scene { position: relative; flex: none; height: 30vh; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.n-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.n-img.zoom { animation: kenburns 14s ease-out forwards; }
.n-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(4,6,10,0) 45%, rgba(4,6,10,.92)); pointer-events: none; }
.n-title { position: absolute; left: 0.7rem; right: 0.7rem; bottom: 0.5rem; z-index: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.n-title .mono { font-size: 0.68rem; color: var(--amber); text-shadow: 0 1px 3px #000; }
.n-title b { font-size: 1.45rem; text-shadow: 0 2px 8px #000; }
.n-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 0.3rem; -webkit-overflow-scrolling: touch; }
.n-text { margin: 0; font-size: 1.02rem; line-height: 1.7; }
.n-text small { font-size: 0.82rem; line-height: 1.5; display: inline-block; margin-top: 0.2rem; }
.n-opts { display: flex; flex-direction: column; gap: 0.4rem; }
.opt { font: inherit; color: var(--text); text-align: left; background: var(--panel2); border: 1px solid #36506a; border-radius: 10px; padding: 0.55rem 0.6rem; cursor: pointer; display: flex; gap: 0.55rem; align-items: center; }
.opt:active { transform: translateY(1px); }
.opt > .mono { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--dim); }
.o-l { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.o-l b { font-size: 1rem; }
.o-l small { font-size: 0.78rem; color: var(--dim); line-height: 1.4; }
.opt.safe { border-style: dashed; }
.n-ask { font-size: 0.98rem; line-height: 1.5; display: flex; flex-direction: column; gap: 0.15rem; }
.n-ask small { font-size: 0.78rem; color: #b9c8d3; }
.n-ask.small { font-size: 0.82rem; color: var(--dim); }
.who-list { display: flex; flex-direction: column; gap: 0.35rem; }
.who { font: inherit; color: var(--text); text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.35rem 0.5rem; cursor: pointer; display: flex; align-items: center; gap: 0.55rem; }
.who img.who-f { width: 2.8rem; height: 3.4rem; border-radius: 6px; flex: none; }
.who-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.05rem; }
.who-n b { font-size: 0.95rem; } .who-n small { font-size: 0.75rem; color: #ff8b8b; line-height: 1.3; }
.who-n em { font-style: normal; font-size: 0.68rem; color: #fff; background: var(--red2); border-radius: 3px; padding: 0 0.3rem; align-self: flex-start; }
.who-s { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 0; text-align: right; }
.who-s small { font-size: 0.7rem; color: var(--dim); }
.who-s b { font-size: 1.25rem; font-family: var(--mono); color: var(--cyan); } .who-s b.q { color: var(--amber); }
.who.k-up { border-color: var(--green); } .who.k-down { border-color: var(--red2); }
.who.dis { opacity: .4; cursor: default; }
.n-chosen { font-size: 0.8rem; color: var(--amber); font-family: var(--mono); border-bottom: 1px solid var(--line); padding-bottom: 0.2rem; }
.jd { position: relative; display: flex; align-items: center; gap: 0.6rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem 0.55rem; animation: fadein .3s ease; }
.jd img.jd-f, .jd .jd-f { width: 3.4rem; height: 4.2rem; border-radius: 7px; flex: none; }
.jd .jd-f.none { display: flex; align-items: center; justify-content: center; background: #0b131c; color: var(--dim); }
.jd-r { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.jd-r b { font-size: 1rem; }
.jd-bar { position: relative; height: 0.8rem; background: rgba(255,60,60,.25); border-radius: 4px; overflow: visible; }
.jd-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(85,240,160,.45); border-radius: 4px 0 0 4px; }
.jd-bar span { position: absolute; top: -0.25rem; bottom: -0.25rem; width: 3px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px #fff; left: 0; transition: left .85s cubic-bezier(.2,.9,.3,1); }
.jd-trait { font-size: 0.85rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 5px; align-self: flex-start; }
.jd-trait.up { color: #111; background: var(--green); } .jd-trait.down { color: #fff; background: var(--red2); }
.jd-stamp { flex: none; font-size: 1.35rem; font-weight: 900; border: 3px solid; border-radius: 8px; padding: 0.05rem 0.45rem; transform: rotate(-10deg); opacity: 0; letter-spacing: 0.05em; }
.jd-stamp.on { animation: stamp2 .4s ease forwards; }
.jd-stamp.ok, .jd-stamp.up { color: var(--green); }
.jd-stamp.ng, .jd-stamp.down { color: var(--red); }
.jd-stamp.up { box-shadow: 0 0 18px rgba(85,240,160,.6); }
@keyframes stamp2 { from { opacity: 0; transform: rotate(-10deg) scale(2); } to { opacity: 1; transform: rotate(-10deg) scale(1); } }
.jd-new { font-size: 0.8rem; color: #111; background: var(--amber); border-radius: 6px; padding: 0.2rem 0.5rem; animation: seatin .5s ease; }
.n-res { margin: 0; font-size: 1rem; line-height: 1.65; animation: fadein .5s ease; }
.n-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.n-next { flex: none; margin-top: 0.2rem; padding: 0.8rem; font-size: 1.05rem; }
.n-next:disabled { background: var(--panel2); border-color: var(--line); box-shadow: none; color: var(--dim); }
#node .linkbtn { align-self: flex-start; }
/* 救難 */
.dr-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.dr { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem; display: flex; flex-direction: column; gap: 0.35rem; }
.dr.on { border-color: var(--green); background: rgba(40,120,80,.12); }
.dr-tag { font-size: 0.68rem; color: #111; background: var(--amber); border-radius: 4px; padding: 0.05rem 0.3rem; align-self: flex-start; }
.dr-top { display: flex; gap: 0.4rem; }
.dr-top img.dr-f { width: 3rem; height: 3.7rem; border-radius: 6px; flex: none; }
.dr-top b { font-size: 0.9rem; line-height: 1.3; }
.dr-top .d-flaw { font-size: 0.78rem; margin-top: 0.15rem; }
.dr-st { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 0.4rem; font-size: 0.75rem; color: var(--dim); }
.dr-st b { color: var(--cyan); } .dr-st i { font-style: normal; color: var(--amber); }
.dr .btn { padding: 0.5rem; font-size: 0.9rem; }
/* 補給基地 */
.st-list { display: flex; flex-direction: column; gap: 0.35rem; }
.so { display: flex; align-items: center; gap: 0.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem 0.55rem; }
.so > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.so b { font-size: 0.98rem; } .so small { font-size: 0.78rem; color: #b9c8d3; }
.so .btn { flex: none; padding: 0.5rem 0.8rem; font-size: 0.9rem; }
.so.done { opacity: .5; }
.st-deal { font-size: 0.9rem; }
/* 関門 */
.bp-list { display: flex; flex-direction: column; gap: 0.35rem; }
.bp { font: inherit; color: var(--text); text-align: left; background: var(--panel); border: 1px dashed #36506a; border-radius: 10px; padding: 0.4rem 0.55rem; cursor: pointer; display: flex; flex-direction: column; gap: 0.25rem; }
.bp.full { border-style: solid; border-color: #4b7090; background: var(--panel2); }
.bp-h { display: flex; flex-direction: column; gap: 0.05rem; }
.bp-h b { font-size: 0.98rem; } .bp-h b .mono { color: var(--dim); font-size: 0.72rem; margin-right: 0.4rem; }
.bp-h small { font-size: 0.74rem; color: var(--dim); }
.bp-s { display: flex; align-items: center; gap: 0.45rem; min-height: 2.2rem; font-size: 0.88rem; }
.bp-s img.bp-f { width: 1.9rem; height: 2.3rem; border-radius: 4px; flex: none; }
.bp-s > span:not(.bp-c) { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 700; }
.bp-s small { font-weight: 400; font-size: 0.72rem; color: var(--dim); }
.bp-c b { font-size: 1.2rem; font-family: var(--mono); color: var(--cyan); } .bp-c b.q { color: var(--amber); }
.bc-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.bc { font: inherit; color: var(--text); background: var(--panel); border: 2px solid var(--line); border-radius: 10px; padding: 0.3rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; text-align: center; position: relative; }
.bc img.bc-f { width: 2.5rem; height: 3rem; border-radius: 5px; }
.bc span { font-size: 0.74rem; font-weight: 700; line-height: 1.25; }
.bc small { font-size: 0.64rem; color: #ff8b8b; line-height: 1.25; }
.bc em { position: absolute; top: 0.15rem; left: 0.15rem; font-style: normal; font-size: 0.6rem; background: var(--red2); color: #fff; border-radius: 3px; padding: 0 0.2rem; }
.bc.sel { border-color: var(--amber); box-shadow: 0 0 14px rgba(255,176,46,.35); }
.bc.used { opacity: .45; } .bc.used.sel { opacity: 1; } .bc.dis { opacity: .3; cursor: default; }
/* 結末 */
.r-after { display: flex; flex-direction: column; gap: 0.35rem; }
.ra { display: flex; gap: 0.55rem; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.5rem; }
.ra img.ra-f { width: 2.8rem; height: 3.4rem; border-radius: 5px; flex: none; }
.ra b { font-size: 0.92rem; } .ra em { font-style: normal; font-size: 0.68rem; margin-left: 0.4rem; color: #fff; background: #2a5a8a; border-radius: 3px; padding: 0 0.3rem; }
.ra small { display: block; font-size: 0.74rem; color: #ff8b8b; }
.ra p { margin: 0.15rem 0 0; font-size: 0.86rem; line-height: 1.5; color: #c9d6e0; }
.gn-xp b { font-size: 1.1rem; color: var(--amber); }
.bk-tabs.three { grid-template-columns: repeat(3, 1fr); }
#book { position: absolute; }
#book .ch-detail { z-index: 30; }
#sheet { position: fixed; z-index: 40; }

/* 背の低い画面（スマホ縦＋ブラウザの帯）と、文字を大きくしたとき */
@media (max-height: 700px) {
  .n-scene { height: 24vh; }
  .n-title b { font-size: 1.2rem; }
  .mn b { width: 2.3rem; height: 2.3rem; font-size: 1rem; }
  .mn.t-boss b { width: 2.8rem; height: 2.8rem; }
}
html.fz1 .n-scene, html.fz2 .n-scene { height: 20vh; }
html.fz2 .mn span { display: none; }
html.fz2 .res-bar .rs-n { font-size: 0.62rem; }
html.fz1 .crew-strip .cs-p span, html.fz2 .crew-strip .cs-p span { display: none; }
html.fz2 .dr-list { grid-template-columns: 1fr; }
html.fz2 .bc-list { grid-template-columns: repeat(2, 1fr); }
.rs-n .s { display: none; }
html.fz1 .rs-n .l, html.fz2 .rs-n .l { display: none; } html.fz1 .rs-n .s, html.fz2 .rs-n .s { display: inline; }
html.fz1 .res-bar .rs-n, html.fz2 .res-bar .rs-n { font-size: 0.72rem; }

/* ===== 映画の場面（2026-11-12） ===== */
.cine { position: fixed; inset: 0; z-index: 40; display: none; background: #000; overflow: hidden; cursor: pointer; }
.cine.on { display: block; animation: fadein .6s ease; }
.cine.out { opacity: 0; transition: opacity .5s ease; }
@media (min-width: 600px) { .cine { left: 50%; width: 460px; transform: translateX(-50%); } }
.cn-layer { position: absolute; inset: -4%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease; will-change: transform, opacity; }
.cn-layer.on { opacity: 1; animation-duration: var(--hold, 10s); animation-timing-function: linear; animation-fill-mode: forwards; }
.cn-layer.black { background: #000; }
.cn-layer.pan-in { animation-name: pan-in; }
.cn-layer.pan-out { animation-name: pan-out; }
.cn-layer.pan-left { animation-name: pan-left; background-size: auto 100%; }
.cn-layer.pan-right { animation-name: pan-right; background-size: auto 100%; }
.cn-layer.pan-up { animation-name: pan-up; }
.cn-layer.pan-down { animation-name: pan-down; }
.cn-layer.tint-red { filter: saturate(1.2) sepia(.25) hue-rotate(-20deg); }
.cn-layer.tint-dim { filter: brightness(.45); }
@keyframes pan-in { from { transform: scale(1.02); } to { transform: scale(1.18); } }
@keyframes pan-out { from { transform: scale(1.22); } to { transform: scale(1.03); } }
@keyframes pan-left { from { background-position: 80% 50%; } to { background-position: 20% 50%; } }
@keyframes pan-right { from { background-position: 20% 50%; } to { background-position: 80% 50%; } }
@keyframes pan-up { from { background-position: 50% 100%; transform: scale(1.08); } to { background-position: 50% 0%; transform: scale(1.02); } }
@keyframes pan-down { from { background-position: 50% 0%; } to { background-position: 50% 100%; } }
/* 暗く落とす縁と、粒子 */
.cine::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.65) 100%), linear-gradient(transparent 55%, rgba(0,0,0,.75)); }
.cine::after { content: ""; position: absolute; inset: -50%; z-index: 3; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .6s steps(3) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 33% { transform: translate(-3%,2%); } 66% { transform: translate(2%,-3%); } }
/* 上下の黒い帯 */
.cn-bar { position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 4; transition: height .9s cubic-bezier(.6,0,.2,1); }
.cn-bar.top { top: 0; } .cn-bar.bot { bottom: 0; }
.cine.bars .cn-bar { height: 11vh; }
/* 章の題 */
.cn-center { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 1.4rem; pointer-events: none; gap: .5rem; }
.cn-center > * { opacity: 0; animation: cn-rise 1.6s cubic-bezier(.2,.7,.2,1) forwards; }
.cn-center > *:nth-child(2) { animation-delay: .35s; }
.cn-center > *:nth-child(3) { animation-delay: .9s; }
@keyframes cn-rise { from { opacity: 0; transform: translateY(10px); letter-spacing: .5em; filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.cn-kick { color: var(--amber); font-size: .8rem; letter-spacing: .35em; }
.cn-center b { font-size: 2.1rem; letter-spacing: .14em; font-weight: 800; text-shadow: 0 0 30px rgba(111,227,255,.35), 0 2px 18px #000; line-height: 1.35; }
.cn-center small { color: #b9cad6; font-size: 1rem; text-shadow: 0 2px 10px #000; }
.cn-center.big b { font-size: 2.6rem; letter-spacing: .2em; text-shadow: 0 0 40px rgba(255,60,60,.45), 0 2px 18px #000; }
.cn-center.hard b { color: #ff6b6b; }
/* 字幕 */
.cn-sub { position: absolute; left: 0; right: 0; bottom: calc(11vh + 1.2rem); z-index: 6; padding: 0 1.3rem; text-align: center; pointer-events: none; }
.cn-sub p { margin: 0; font-size: 1.15rem; line-height: 1.75; font-weight: 700; text-shadow: 0 2px 6px #000, 0 0 18px #000; animation: fadein .7s ease; }
.cn-sub p.hard { color: #ff6b6b; font-size: 1.6rem; }
/* 話す人の顔 */
.cn-face { position: absolute; left: 0; right: 0; bottom: calc(11vh + 6.2rem); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: .35rem; pointer-events: none; }
.cn-face img { width: 6.4rem; height: 8rem; object-fit: cover; border-radius: 6px; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 6px 30px rgba(0,0,0,.8); animation: cn-face 1s ease both; }
.cn-face span { font-size: .85rem; color: var(--amber); letter-spacing: .1em; text-shadow: 0 2px 8px #000; animation: fadein 1s ease both .3s; }
.cn-face .cn-who { font-family: var(--mono); color: var(--cyan); font-size: .75rem; }
@keyframes cn-face { from { opacity: 0; transform: scale(1.08); filter: brightness(2) blur(3px); } }
/* 出演者の流れ */
.cn-credits { position: absolute; inset: 11vh 0; z-index: 6; overflow: hidden; display: none; pointer-events: none; }
.cn-credits.on { display: block; }
.cr-in { position: absolute; left: 0; right: 0; top: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; animation: roll linear forwards; text-align: center; }
@keyframes roll { to { transform: translateY(calc(-100% - 80vh)); } }
.cr-head { font-family: var(--mono); color: var(--amber); letter-spacing: .3em; font-size: .8rem; margin-top: 1.6rem; }
.cr-row { display: flex; flex-direction: column; gap: .15rem; }
.cr-row span { color: var(--dim); font-size: .78rem; }
.cr-row b { font-size: 1.15rem; letter-spacing: .08em; }
/* とばす */
.cn-skip { position: absolute; z-index: 8; top: max(12px, env(safe-area-inset-top)); right: 12px; font: inherit; font-size: .85rem; color: #cfdbe4; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .4rem .9rem; cursor: pointer; }
.cn-tap { position: absolute; z-index: 8; bottom: max(10px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: rgba(200,215,225,.5); font-size: .7rem; }
@media (max-height: 640px) { .cine.bars .cn-bar { height: 7vh; } .cn-sub { bottom: calc(7vh + .8rem); } .cn-face { bottom: calc(7vh + 5.4rem); } .cn-face img { width: 5rem; height: 6.2rem; } }
/* 結果の判と、増えた・減ったもの */
.cn-center:has(.cn-stamp) { justify-content: flex-start; padding-top: calc(11vh + 2.2rem); }
.cn-stamp { font-size: 2.6rem; font-weight: 900; letter-spacing: .2em; padding: .2rem 1.1rem .2rem 1.3rem; border: 4px solid currentColor; border-radius: 8px; transform: rotate(-10deg); text-shadow: 0 0 20px currentColor; background: rgba(0,0,0,.35); animation: cn-stamp .45s cubic-bezier(.2,1.6,.4,1) both !important; opacity: 1 !important; }
@keyframes cn-stamp { from { transform: rotate(-10deg) scale(2.4); opacity: 0; } to { transform: rotate(-10deg) scale(1); opacity: 1; } }
.cn-stamp.ok { color: var(--green); } .cn-stamp.ng { color: var(--red); } .cn-stamp.up { color: var(--amber); } .cn-stamp.down { color: #c08cff; }
.cn-foot { margin-top: .5rem; animation: fadein .8s ease .3s both; }
.cn-foot .n-chips { justify-content: center; }
@media (max-height: 640px) { .cn-center:has(.cn-stamp) { padding-top: calc(7vh + 1.4rem); } .cn-stamp { font-size: 2rem; } }
.cn-foot .chip { background: rgba(0,0,0,.6); font-size: .95rem; }
/* 顔と字幕が重ならないように */
.cn-face { bottom: calc(11vh + 8.4rem); }
.cn-face img { width: 5.6rem; height: 7rem; }
@media (max-height: 640px) { .cn-face { bottom: calc(7vh + 7.6rem); } .cn-face img { width: 4.6rem; height: 5.8rem; } }

/* ---- 考えて選ぶ（2026-11-12）：仕事の種類・⚡・疲れ ---- */
.t-maybe { color: var(--amber) !important; }
b.t-maybe { font-size: 1.35rem; }
.who.k-maybe { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(255, 190, 80, 0.35) inset; }
.who-n small.t-maybe, .bc small.t-maybe { font-weight: 700; }
.job { color: #cfe6f5; } .job b { color: #fff; }
.n-ask small.job { display: block; margin-top: 0.25rem; font-size: 0.85rem; }
.toast { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); z-index: 40; background: rgba(20, 60, 40, 0.95); border: 1px solid var(--green); color: #eafff2; border-radius: 10px; padding: 0.6rem 0.9rem; font-weight: 700; font-size: 0.95rem; white-space: nowrap; transition: opacity 0.5s; }
.toast.out { opacity: 0; }