:root {
  --ink: #3a2d4f;
  --muted: #7a6e92;
  --paper: #fffaf3;
  --bg: #f6efe6;
  --human: #ff9ec4;
  --human-d: #e2507f;
  --zombie: #9ed46a;
  --zombie-d: #4f9a2c;
  --zombie-p: #6d3f8f;
  --serum: #49cfff;
  --gold: #ffc93c;
  --o: .075em;
  --outline: 0 var(--o) 0 var(--ink), var(--o) 0 0 var(--ink), 0 calc(-1*var(--o)) 0 var(--ink), calc(-1*var(--o)) 0 0 var(--ink),
    var(--o) var(--o) 0 var(--ink), calc(-1*var(--o)) var(--o) 0 var(--ink), var(--o) calc(-1*var(--o)) 0 var(--ink), calc(-1*var(--o)) calc(-1*var(--o)) 0 var(--ink);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif; }
body { padding: 20px 16px 60px; }
.wrap { max-width: 1180px; margin: 0 auto; }

header.top { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }
header.top h1 { margin: 0; font-weight: 900; font-size: 30px; letter-spacing: .02em; }
header.top h1 small { font-size: 15px; font-weight: 700; color: var(--muted); margin-left: 8px; }
header.top p { margin: 0; color: var(--muted); font-weight: 700; font-size: 14px; }

nav.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
nav.tabs button {
  font: inherit; font-weight: 800; font-size: 15px; color: var(--ink); cursor: pointer;
  background: #fff; border: 3px solid var(--ink); border-radius: 999px; padding: 7px 16px;
  box-shadow: 0 3px 0 var(--ink); transition: transform .08s;
}
nav.tabs button:hover { transform: translateY(-1px); }
nav.tabs button.on { background: var(--ink); color: #fff; }

#screen {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 24px; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink);
  container-type: inline-size; background: #bfe4ff;
}
#world { position: absolute; inset: 0; background: linear-gradient(#bfe4ff 0%, #e6f3ff 55%, #fff1e3 100%); }
#world.night { background: linear-gradient(#141230 0%, #2a2250 60%, #3a2d5c 100%); }
#world canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#fx, #flash, #lines { position: absolute; inset: 0; pointer-events: none; }
#flash { background: #fff; opacity: 0; }
#lines { opacity: 0; background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255,255,255,.0) 0deg 5deg, rgba(255,255,255,.75) 5deg 6deg, rgba(255,255,255,0) 6deg 11deg); -webkit-mask: radial-gradient(circle at 50% 45%, transparent 22%, #000 60%); mask: radial-gradient(circle at 50% 45%, transparent 22%, #000 60%); }
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; font-size: 1.25cqw; }
#hud { position: absolute; inset: 0; pointer-events: none; font-size: 1.45cqw; }
#hud .clickable, #hud button { pointer-events: auto; }

/* ---------- 3Dラベル */
.lbl { position: absolute; left: 0; top: 0; will-change: transform; }
.lbl .in { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-weight: 800; }
.lbl .tag { font-size: .78em; padding: .05em .6em .1em; border-radius: 999px; background: rgba(255,255,255,.92); border: .13em solid var(--ink); }
.lbl .tag.z { background: #d9f5bd; }
.lbl .tag.me { background: var(--gold); }
.lbl .tag small { font-size: .75em; color: var(--muted); }
.lbl .mark { font-size: 2.2em; font-weight: 900; color: #ffd84d; text-shadow: var(--outline); animation: bob .6s ease-in-out infinite alternate; }
.lbl .note { font-size: .9em; padding: .1em .6em; border-radius: .7em; background: var(--ink); color: #fff; }
.lbl .pop { font-size: 2.2em; font-weight: 900; color: #fff; text-shadow: var(--outline), 0 .12em 0 var(--ink); animation: pop 1.1s ease-out forwards; }
.lbl .pop.big { font-size: 3.2em; color: #ff5f8a; }
.lbl .pop.green { color: #b8f07c; }
.lbl .pop.blue { color: #7fe0ff; }
.lbl .pop.small { font-size: 1.5em; color: #fff; }
.lbl .pop.grey { font-size: 1.4em; color: #d9d2e6; }
@keyframes pop { 0% { transform: translate(-50%,-100%) scale(.2) rotate(-10deg); opacity: 0; } 12% { transform: translate(-50%,-110%) scale(1.25) rotate(-6deg); opacity: 1; } 25% { transform: translate(-50%,-110%) scale(1) rotate(-4deg); } 80% { opacity: 1; } 100% { transform: translate(-50%,-150%) scale(1) rotate(-4deg); opacity: 0; } }
@keyframes bob { from { transform: translate(-50%, -100%); } to { transform: translate(-50%, -125%); } }

/* ---------- HUD 共通 */
.panel { background: rgba(255, 250, 243, .95); border: .17em solid var(--ink); border-radius: 1.1em; box-shadow: 0 .22em 0 var(--ink); }
.z-theme .panel { background: rgba(240, 255, 226, .95); }

.teambar { position: absolute; top: 2.4%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .7em; padding: .35em .8em; }
.tb-side { display: flex; align-items: center; gap: .35em; font-weight: 900; }
.tb-side b { font-size: 2em; line-height: 1; }
.tb-side span { font-size: .78em; padding: .15em .6em .2em; border-radius: 999px; color: #fff; }
.tb-h span { background: var(--human-d); }
.tb-z span { background: var(--zombie-d); }
.tb-mid { display: flex; flex-direction: column; align-items: center; gap: .18em; width: 15em; }
.tb-timer { font-weight: 900; font-size: 1.3em; line-height: 1.1; }
.tb-timer.hurry { color: #ff4f6b; animation: throb .5s infinite; }
.tb-rope { width: 100%; height: .6em; border-radius: 999px; background: var(--zombie); border: .14em solid var(--ink); overflow: hidden; }
.tb-fill { height: 100%; background: var(--human); border-right: .14em solid var(--ink); transition: width .4s; }
.tb-faces { display: flex; gap: .12em; }
.tb-faces svg { width: 1.75em; height: 1.85em; }
@keyframes throb { 50% { transform: scale(1.15); } }

.you { position: absolute; top: 2.6%; left: 1.8%; display: flex; align-items: center; gap: .5em; padding: .35em .9em .35em .4em; }
.you svg.face { width: 2.9em; height: 3.1em; }
.you .nm { font-weight: 900; font-size: 1.15em; line-height: 1.2; }
.you .nm small { font-size: .7em; color: var(--muted); }
.role { display: inline-block; font-size: .78em; font-weight: 800; padding: .08em .65em .12em; border-radius: 999px; color: #fff; }
.role.h { background: var(--human-d); }
.role.z { background: var(--zombie-d); }

.feed { position: absolute; top: 3%; right: 1.8%; display: flex; flex-direction: column; gap: .35em; align-items: flex-end; }
.feed .pill { display: flex; align-items: center; gap: .3em; padding: .2em .75em .2em .3em; font-weight: 800; font-size: .82em; border-radius: 999px; }
.feed .pill svg.face { width: 1.6em; height: 1.7em; }
.feed .pill .v { color: #fff; border-radius: 999px; padding: .02em .5em .06em; font-size: .9em; }
.feed .pill .v.bite { background: var(--zombie-d); }
.feed .pill .v.cure { background: #1ea5d8; }

.action { position: absolute; right: 2.6%; bottom: 7%; width: 7em; height: 7em; border-radius: 50%; display: grid; place-items: center; }
.action .ring { position: absolute; inset: -.5em; border-radius: 50%; background: conic-gradient(var(--c, var(--serum)) calc(var(--p, 1) * 1turn), rgba(58,45,79,.2) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - .45em), #000 calc(100% - .4em)); mask: radial-gradient(farthest-side, transparent calc(100% - .45em), #000 calc(100% - .4em)); }
.action .ico { width: 4.2em; height: 4.2em; }
.action .nm { position: absolute; bottom: -1.55em; font-weight: 900; font-size: .95em; background: var(--ink); color: #fff; padding: .05em .7em .1em; border-radius: 999px; white-space: nowrap; }
.action .key { position: absolute; top: -.35em; left: -.6em; background: #fff; border: .14em solid var(--ink); font-size: .7em; padding: .05em .55em; border-radius: .6em; font-weight: 900; }
.action .cnt { position: absolute; top: -.3em; right: -.55em; background: #fff; border: .15em solid var(--ink); border-radius: 999px; padding: 0 .45em; font-weight: 900; font-size: 1.05em; }
.action.cool .ico { opacity: .45; }

.status { position: absolute; left: 1.8%; bottom: 4%; padding: .5em .9em; display: flex; flex-direction: column; gap: .35em; min-width: 12em; }
.status .row { display: flex; align-items: center; gap: .45em; font-weight: 900; }
.status .row small { font-weight: 700; color: var(--muted); font-size: .75em; }
.heart { color: var(--human-d); }
.heart .ico { width: 1.9em; height: 1.9em; animation: beat .55s infinite; }
.heart.fast .ico { animation-duration: .33s; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.28); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
.serums { display: flex; gap: .2em; }
.serums .ico { width: 1.6em; height: 1.6em; }
.serums .empty { opacity: .22; filter: grayscale(1); }
.sniff .ico { width: 1.9em; height: 1.9em; }
.meter { display: block; flex: 1; min-width: 6em; height: .6em; border-radius: 999px; background: rgba(58,45,79,.15); border: .12em solid var(--ink); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--human-d); }

.banner { position: absolute; left: 50%; top: 21%; transform: translateX(-50%) rotate(-3deg); padding: .15em 1em .25em; font-weight: 900; font-size: 3em; white-space: nowrap; color: #fff; text-shadow: var(--outline); border-radius: .5em; }
.banner.last { top: 15%; font-size: 2.6em; background: linear-gradient(#ff8a5b, #ff4f6b); border: .07em solid var(--ink); box-shadow: 0 .09em 0 var(--ink); animation: shake .9s infinite; }
.banner.win { top: 5%; background: linear-gradient(#b8f07c, #6fc43f); border: .07em solid var(--ink); box-shadow: 0 .09em 0 var(--ink); }
.banner.win.h { background: linear-gradient(#ffc0da, #ff7fae); }
.subbanner { position: absolute; left: 50%; top: 27%; transform: translateX(-50%); font-weight: 900; font-size: 1.3em; padding: .3em 1.1em; white-space: nowrap; }
@keyframes shake { 0%, 100% { transform: translateX(-50%) rotate(-3deg); } 10% { transform: translateX(-51%) rotate(-4deg); } 20% { transform: translateX(-49%) rotate(-2deg); } 30% { transform: translateX(-50%) rotate(-3deg); } }

.edge { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .25em; font-weight: 900; font-size: .8em; will-change: transform; }
.edge .box { white-space: nowrap; display: flex; align-items: center; gap: .3em; padding: .15em .6em .15em .25em; border-radius: 999px; background: rgba(240,255,226,.95); border: .14em solid var(--ink); transform: translate(-50%, -50%); }
.edge .box svg.face { width: 1.6em; height: 1.7em; }
.edge .arr { position: absolute; left: 0; top: 0; width: 0; height: 0; border-left: .6em solid transparent; border-right: .6em solid transparent; border-bottom: 1em solid var(--zombie-d); transform-origin: 50% 50%; }

.hint { position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); font-weight: 800; font-size: .85em; padding: .25em 1em; white-space: nowrap; }

/* ---------- 感染演出（本人カメラ） */
.bigtext { position: absolute; left: 50%; top: 42%; font-weight: 900; color: #fff; white-space: nowrap; text-shadow: var(--outline), 0 .1em 0 var(--ink); transform: translate(-50%, -50%); }
.bigtext.b0 { font-size: 7em; color: #ff5f8a; top: 30%; transform: translate(-50%, -50%) rotate(-8deg); animation: slam .35s ease-out; }
.bigtext.b1 { font-size: 4em; color: #fff; top: 22%; left: 24%; animation: slam .3s ease-out; }
.bigtext.b2 { font-size: 3em; color: #e8ffd0; top: 16%; animation: jitter .08s infinite; }
.bigtext .dk { margin-left: -.42em; margin-right: -.28em; }
.bigtext.b3 { font-size: 7.5em; color: #b8f07c; top: 30%; animation: jitter .05s infinite; }
.bigtext.b4 { font-size: 2.4em; color: #d9d2e6; top: 70%; }
.bigtext.b5 { font-size: 5em; color: #b8f07c; top: 28%; animation: slam .4s ease-out; }
@keyframes slam { 0% { transform: translate(-50%, -50%) scale(3) rotate(-8deg); opacity: 0; } 60% { transform: translate(-50%, -50%) scale(.9) rotate(-8deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1) rotate(-8deg); } }
@keyframes jitter { 0% { transform: translate(-50%, -50%) rotate(-2deg); } 25% { transform: translate(-48%, -53%) rotate(2deg); } 50% { transform: translate(-52%, -48%) rotate(-1deg); } 75% { transform: translate(-49%, -51%) rotate(3deg); } }
.povbar { position: absolute; right: 1.8%; top: 3%; display: flex; gap: .35em; }
.povbar button { font: inherit; font-weight: 800; font-size: .8em; cursor: pointer; background: #fff; color: var(--ink); border: .15em solid var(--ink); border-radius: 999px; padding: .2em .8em; box-shadow: 0 .15em 0 var(--ink); }
.povbar button.on { background: var(--ink); color: #fff; }
.beats { position: absolute; left: 50%; bottom: 3.2%; transform: translateX(-50%); width: 62%; padding: .35em .5em .45em; }
.beats .track { position: relative; display: flex; gap: .2em; }
.beats .bt { flex: var(--w); text-align: center; font-size: .72em; font-weight: 900; padding: .15em 0; border-radius: .5em; background: rgba(58,45,79,.1); white-space: nowrap; overflow: hidden; }
.beats .bt.on { background: var(--zombie); }
.beats .head { position: absolute; top: -.25em; bottom: -.25em; width: .22em; background: #ff4f6b; border-radius: 99px; }
.zbanner { position: absolute; left: 50%; top: auto; bottom: 15%; transform: translateX(-50%); font-weight: 900; font-size: 1.4em; padding: .35em 1.2em; white-space: nowrap; background: rgba(240,255,226,.96) !important; }

/* ---------- リザルト */
.awards { position: absolute; right: 2%; top: 20%; width: 34%; padding: .6em .8em; display: flex; flex-direction: column; gap: .25em; }
.awards h3 { margin: 0 0 .2em; font-size: 1em; font-weight: 900; display: flex; align-items: center; gap: .3em; }
.awards h3 .ico { width: 1.5em; height: 1.5em; }
.awards .aw { display: flex; align-items: center; gap: .45em; font-size: .78em; font-weight: 800; }
.awards .aw svg.face { width: 1.8em; height: 1.9em; flex: none; }
.awards .aw b { display: block; font-size: 1.05em; }
.awards .aw small { color: var(--muted); font-weight: 700; }
.resbtns { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); display: flex; gap: .6em; }
.resbtns button { font: inherit; font-weight: 900; font-size: 1em; cursor: pointer; background: #fff; color: var(--ink); border: .17em solid var(--ink); border-radius: 999px; padding: .3em 1.2em; box-shadow: 0 .2em 0 var(--ink); }
.resbtns button.main { background: var(--gold); }
.allwin { position: absolute; left: 3%; bottom: 5%; font-weight: 900; font-size: 1.2em; padding: .35em 1em; transform: rotate(-3deg); }

/* ---------- ページ下の説明 */
.note { margin-top: 18px; background: #fff; border: 3px solid var(--ink); border-radius: 20px; padding: 14px 20px; box-shadow: 0 4px 0 var(--ink); }
.note h2 { margin: 0 0 6px; font-size: 18px; font-weight: 900; }
.note ul { margin: 0; padding-left: 1.2em; line-height: 1.75; font-weight: 500; }
.note b { font-weight: 800; }
.story { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; }
.story figure { margin: 0; background: #fbf6ff; border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; position: relative; }
.story img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.story figcaption { padding: 4px 8px 8px; font-weight: 900; font-size: 14px; }
.story figcaption small { display: block; font-weight: 700; color: var(--muted); font-size: 11px; }
.story .tt { position: absolute; top: 6px; left: 8px; font-size: 11px; font-weight: 900; background: var(--ink); color: #fff; border-radius: 99px; padding: 1px 8px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.card { background: #fff; border: 3px solid var(--ink); border-radius: 20px; padding: 14px 18px; box-shadow: 0 4px 0 var(--ink); }
.card h2 { margin: 0 0 8px; font-size: 18px; font-weight: 900; }
.card ul { margin: 0; padding-left: 1.15em; line-height: 1.7; font-size: 14px; }
.card .rec { margin-top: 8px; background: #fff3c4; border-radius: 12px; padding: 8px 12px; font-size: 13.5px; font-weight: 700; line-height: 1.6; }
.maps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 8px; }
.maps figure { margin: 0; text-align: center; font-size: 12px; font-weight: 800; }
.maps svg { width: 100%; border-radius: 10px; border: 2px solid var(--ink); background: #f3e2c4; }

@media (max-width: 860px) {
  .cards { grid-template-columns: 1fr; }
  .story { grid-template-columns: repeat(3, 1fr); }
  header.top h1 { font-size: 22px; }
}