: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: 84px; height: 101px; 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; }
  .d-photo { width: 70px; height: 84px; }
  .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: 60px; height: 72px; }
  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: 120px; height: 144px; }
  .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; }
}