/* 試作用：画面いっぱいにする（ui.css の上に重ねる） */
[hidden] { display: none !important; }  /* display:flex などを指定した要素でも hidden で消えるように */
html, body { height: 100%; overflow: hidden; }
body { padding: 0; background: #1f1a2e; }
#screen { position: fixed; inset: 0; width: 100vw; height: 100vh; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; container-type: normal; }
#hud { font-size: clamp(11px, 1.25vw, 19px); }
#labels { font-size: clamp(10px, 1.05vw, 16px); }
#hud.cine > :not([data-big]):not([data-flash]):not(.result) { opacity: 0; transition: opacity .2s; }
#hud > * { transition: opacity .3s; }

.help { position: absolute; left: 50%; bottom: 1.2%; transform: translateX(-50%); font-size: .7em; font-weight: 700; padding: .35em 1em; text-align: center; line-height: 1.6; white-space: nowrap; opacity: .85; }
.help b { background: var(--ink); color: #fff; border-radius: .4em; padding: 0 .4em; margin-right: .2em; font-weight: 800; }
.status { bottom: 9%; }
.action { bottom: 11%; }
.feed { top: 16%; }
.zbanner { bottom: 22%; }
.crosshair { position: absolute; left: 50%; top: 50%; width: 1.4em; height: 1.4em; margin: -.7em 0 0 -.7em; border: .2em solid #fff; border-radius: 50%; box-shadow: 0 0 0 .12em var(--ink); }
.lbl .tag .hp { color: #1ea5d8; margin-left: .2em; letter-spacing: -.1em; }
.lbl .tag .fresh { color: #fff; background: #1ea5d8; border-radius: 99px; padding: 0 .4em; margin-left: .3em; font-size: .85em; }
.result { position: absolute; inset: 0; pointer-events: auto; }
.result .banner { font-size: 3.2em; }

.lil-gui.root { position: fixed; top: 0; right: 0; max-height: 100vh; overflow: auto; z-index: 20; font-family: "M PLUS Rounded 1c", sans-serif; --width: 300px; }
.lil-gui.root.hidden-panel { display: none; }

/* 数値テストの結果 */
.bench { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; width: min(92vw, 860px); max-height: 86vh; overflow: auto; background: #fff; color: var(--ink); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 0 6px 0 var(--ink); padding: 16px 20px; font-size: 14px; }
.bench h2 { margin: 0 0 6px; font-size: 18px; font-weight: 900; }
.bench p { margin: 4px 0 10px; color: var(--muted); font-weight: 700; }
.bench table { width: 100%; border-collapse: collapse; }
.bench td, .bench th { padding: 5px 8px; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
.bench th { background: #f6efe6; }
.bench td:first-child { font-weight: 800; white-space: nowrap; }
.bench button { font: inherit; font-weight: 900; cursor: pointer; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; padding: 4px 16px; box-shadow: 0 3px 0 var(--ink); margin-top: 10px; }
.bench .bar { height: 10px; background: #eee; border-radius: 99px; overflow: hidden; margin: 8px 0; }
.bench .bar i { display: block; height: 100%; background: var(--human-d); }

#hud.ended > :not(.result):not([data-feed]) { opacity: 0; pointer-events: none; }
#hud.ended [data-feed] { opacity: 0; }

/* 「さいごの ひとり／ゾンビ」：人数表示のすぐ下に小さく出しっぱなし */
.banner.small { font-size: 1em; top: 14%; padding: .1em .9em .15em; animation: none; transform: translateX(-50%); border-width: .12em; box-shadow: 0 .12em 0 var(--ink); }
.banner.lastz { background: linear-gradient(#b8f07c, #5fae36); border: .12em solid var(--ink); }
.banner.last.small:not([hidden]) ~ .banner.lastz.small { top: 17.5%; }

/* お知らせ：画面の上のほうに小さめに（まんなかのキャラをかくさない） */
.announce { position: absolute; left: 50%; top: 19%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .3em; pointer-events: none; z-index: 2; }
.announce .a-main { font-size: 1.9em; font-weight: 900; color: #fff; white-space: nowrap; padding: .05em .8em .12em; border-radius: .5em; text-shadow: var(--outline); border: .08em solid var(--ink); box-shadow: 0 .08em 0 var(--ink); background: linear-gradient(#ffd06b, #ff9f3c); animation: annpop .4s cubic-bezier(.2, 1.6, .4, 1) both; }
.announce .a-sub { font-size: .85em; font-weight: 800; padding: .2em .9em; white-space: nowrap; animation: annpop .4s .08s cubic-bezier(.2, 1.6, .4, 1) both; }
.announce.warn .a-main { background: linear-gradient(#ff8a5b, #ff4f6b); }
.announce.green .a-main { background: linear-gradient(#b8f07c, #5fae36); }
.announce.blue .a-main { background: linear-gradient(#8fe3ff, #2fa8e0); }
.announce.gold .a-main { background: linear-gradient(#ffe58a, #ffb52e); }
.announce.info .a-main { background: linear-gradient(#fff, #f3e9ff); color: var(--ink); text-shadow: none; font-size: 1.4em; }
#hud.finale .announce { top: 7%; }
#hud.finale .announce .a-main { font-size: 2.4em; }
@keyframes annpop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* のこり10びょう：タイマーの下に */
.countdown { position: absolute; left: 50%; top: 13%; transform: translate(-50%, 0); font-size: 3.2em; font-weight: 900; color: #fff; text-shadow: var(--outline), 0 .08em 0 var(--ink); pointer-events: none; opacity: 0; }
.countdown.on { animation: cdpop .95s ease-out forwards; }
@keyframes cdpop { 0% { transform: translate(-50%, 0) scale(1.8); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1); opacity: .95; } 70% { opacity: .9; } 100% { transform: translate(-50%, 0) scale(.85); opacity: 0; } }

/* E などのキー表示（物の上に出る） */
.prompt { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .4em; padding: .2em .8em .2em .25em; background: rgba(255, 255, 255, .96); border: .14em solid var(--ink); border-radius: 999px; box-shadow: 0 .14em 0 var(--ink); font-weight: 900; font-size: .95em; white-space: nowrap; pointer-events: none; z-index: 3; }
.prompt .k { background: var(--ink); color: #fff; border-radius: .45em; padding: .05em .5em .1em; min-width: 1.5em; text-align: center; }

/* リザルト：おどっているみんなを隠さない配置 */
.result .banner.win { top: 3%; font-size: 2.4em; }
.result .subbanner { top: 15.5% !important; font-size: .95em; max-width: 60%; white-space: normal; text-align: center; line-height: 1.5; }
.result .awards { top: auto; bottom: 4%; right: 1.5%; width: 27%; font-size: .66em; padding: .5em .7em; opacity: .96; }
.result .allwin { font-size: 1em; bottom: 4%; }
.result .resbtns { bottom: 4%; }

/* 決着の瞬間は、お知らせと人数だけ残す */
#hud.finale > :not([data-ann]):not([data-teambar]):not([data-big]) { opacity: 0; pointer-events: none; }

.lbl .tag .ammo { color: #1ea5d8; margin-left: .15em; font-size: .9em; }
.lbl .tag .tired { color: #fff; background: #ff8a5b; border-radius: 99px; padding: 0 .4em; margin-left: .2em; font-size: .8em; }

/* 試合 → お祭りに切りかわるときの丸いワイプ */
#wipe { position: fixed; inset: 0; background: #3a2d4f; pointer-events: none; z-index: 15; clip-path: circle(0% at 50% 50%); }
#wipe.on { animation: wipe 1.1s ease-in-out forwards; }
@keyframes wipe { 0% { clip-path: circle(0% at 50% 50%); } 35% { clip-path: circle(80% at 50% 50%); } 55% { clip-path: circle(80% at 50% 50%); } 100% { clip-path: circle(0% at 50% 50%); } }

/* なかまにした数 */
.myscore { position: absolute; top: calc(2.6% + 4.3em); left: 1.8%; display: flex; gap: .7em; padding: .25em .8em; font-size: .72em; font-weight: 800; white-space: nowrap; }
.myscore b { font-size: 1.25em; margin-left: .15em; }
.myscore .dead { color: var(--muted); }
.board { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: .6em 1em .8em; font-size: .85em; z-index: 4; }
.board h3 { margin: 0 0 .4em; font-size: 1.05em; font-weight: 900; }
.board h3 small { font-size: .7em; color: var(--muted); }
.board table { border-collapse: collapse; }
.board th { font-size: .75em; font-weight: 800; color: var(--muted); padding: .1em .7em; line-height: 1.2; }
.board td { padding: .15em .7em; text-align: center; font-weight: 900; border-top: 1px solid rgba(58,45,79,.12); }
.board td small { font-size: .7em; color: var(--muted); font-weight: 700; margin-left: .3em; }
.board td.nm { text-align: left; display: flex; align-items: center; gap: .35em; }
.board td.nm svg.face { width: 1.5em; height: 1.6em; }
.board td.sum { font-size: 1.15em; color: var(--human-d); }
.board tr.me td { background: #fff3c4; }
.result .board.inresult { left: 1.5%; top: auto; bottom: 12%; transform: none; font-size: .62em; opacity: .96; }
.result .allwin { bottom: 4%; }

/* ================= ゾーン配置（重ならないように） ================= */
.hud-tl { position: absolute; top: 2.4%; left: 1.6%; display: flex; flex-direction: column; gap: .4em; }
.hud-tl .you { position: static; padding: .35em .9em .4em .4em; }
.you .nm .role { margin-left: .3em; vertical-align: .12em; }
.you .sc { display: flex; align-items: center; gap: .6em; margin-top: .25em; font-size: .82em; font-weight: 900; }
.you .sc span { display: inline-flex; align-items: center; gap: .12em; }
.you .sc .ico { width: 1.4em; height: 1.4em; }
.you .sc .sum b { color: var(--human-d); }
.you .sc .dead { padding-left: .55em; border-left: .12em solid rgba(58, 45, 79, .2); color: var(--muted); }

.hud-top { position: absolute; top: 2.2%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .45em; }
.hud-top .teambar { position: static; transform: none; }
.hud-top .announce { position: static; transform: none; }
.chips { display: flex; gap: .4em; }
.chips:not(:has(.chip:not([hidden]))) { display: none; }
.chip { font-weight: 900; font-size: .85em; color: #fff; padding: .08em .9em .14em; border-radius: 999px; border: .13em solid var(--ink); box-shadow: 0 .12em 0 var(--ink); text-shadow: var(--outline); }
.chip.last { background: linear-gradient(#ff8a5b, #ff4f6b); }
.chip.lastz { background: linear-gradient(#b8f07c, #5fae36); }
.tb-timer.count { font-size: 2em; color: #ff4f6b; animation: throb .5s infinite; }

.feed { top: 5.5%; }
.help.mini { font-size: .68em; padding: .2em .9em; opacity: .75; }
.status { bottom: 4%; }
.action { bottom: 7.5%; }

#hud.finale > :not(.hud-top):not([data-big]) { opacity: 0; pointer-events: none; }
#hud.finale .chips { display: none; }
#hud.finale .hud-top .announce .a-main { font-size: 2.4em; }

/* スコア表：見出しはアイコン */
.board th .ico { width: 1.6em; height: 1.6em; display: block; margin: 0 auto; }
.board th small { display: block; font-size: .8em; }
.board td.dead { color: var(--muted); }
.board td.dead small .ico { width: 1em; height: 1em; vertical-align: -.15em; margin-left: .2em; }

/* みんなに賞：2列につめて余白を減らす */
.result .awards { width: auto; max-width: 44%; display: grid; grid-template-columns: repeat(2, auto); column-gap: 1.1em; row-gap: .25em; padding: .5em .8em .6em; align-items: center; }
.result .awards h3 { grid-column: 1 / -1; margin: 0 0 .1em; }
.result .awards .aw { gap: .35em; font-size: .8em; line-height: 1.25; }
.result .awards .aw svg.face { width: 1.6em; height: 1.7em; }
.result .awards .aw b { font-size: .95em; white-space: nowrap; }
.result .awards .aw small { font-size: .82em; white-space: nowrap; }

/* ================= こっそりモード ================= */
/* 目的：ざいりょうの びん（そろった数） */
.tb-obj { display: flex; align-items: center; gap: .15em; }
.tb-obj .ico { width: 1.45em; height: 1.45em; }
.tb-obj .ico.empty { opacity: .25; filter: grayscale(1); }
.tb-obj small { font-weight: 900; margin-left: .3em; font-size: .85em; }
.you .sc .ico { vertical-align: middle; }
/* 足音の大きさ */
.status .ico { width: 1.5em; height: 1.5em; }
.status .loud { font-weight: 900; padding: .02em .6em .08em; border-radius: 999px; color: #fff; font-size: .85em; }
.status .loud.q { background: #7ec8a4; }
.status .loud.n { background: #9a8fbf; }
.status .loud.m { background: #ffa865; }
.status .loud.l { background: #ff4f6b; animation: throb .5s infinite; }
.status .shh { font-weight: 900; font-size: .8em; background: var(--ink); color: #fff; padding: .02em .6em .08em; border-radius: 999px; }
/* 長押しのゲージ */
.prompt .hold { display: inline-block; width: 4.5em; height: .55em; border: .12em solid var(--ink); border-radius: 999px; background: #eee; overflow: hidden; }
.prompt .hold i { display: block; height: 100%; background: var(--human-d); }
/* マシンの札・材料を持っている人の札 */
.lbl .note.mach { background: #2f2a52; border: .12em solid #7fe0ff; font-size: .8em; }
.lbl .note.mach.busy { border-color: #ffb347; }
.lbl .note.mach b { color: #7fe0ff; margin-left: .2em; }
.lbl .note.mach.busy b { color: #ffb347; }
.lbl .tag .carry { color: #fff; background: #ff7fa8; border-radius: 99px; padding: 0 .45em; margin-left: .2em; font-size: .8em; }
.lbl .pop.blue { color: #7fe0ff; }

/* モードえらび */
#hud > .modesel { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(31, 26, 46, .55); pointer-events: auto !important; opacity: 1 !important; z-index: 10; }
#hud > .modesel[hidden] { display: none; }
.modesel .ms-in { position: static; padding: 1.2em 1.6em 1.1em; text-align: center; max-width: 92%; }
.modesel h1 { margin: 0; font-size: 2.2em; font-weight: 900; color: var(--human-d); text-shadow: 0 .06em 0 var(--ink); letter-spacing: .02em; }
.modesel .ms-sub { font-weight: 800; color: var(--muted); margin: .2em 0 .8em; }
.modesel .ms-cards { display: flex; gap: 1em; justify-content: center; flex-wrap: wrap; }
.modesel .mcard { font: inherit; cursor: pointer; width: 15em; text-align: left; display: flex; flex-direction: column; gap: .25em; padding: .8em 1em 1em; border: .17em solid var(--ink); border-radius: 1.1em; box-shadow: 0 .25em 0 var(--ink); background: #fff; color: var(--ink); transition: transform .12s; position: relative; }
.modesel .mcard:hover { transform: translateY(-.15em); }
.modesel .mcard-w { display: flex; flex-direction: column; gap: .35em; align-items: stretch; }
.modesel .ms-map { display: flex; align-items: center; gap: .4em; font-weight: 800; font-size: .85em; padding: 0 .4em; }
.modesel .ms-map select { flex: 1; font: inherit; padding: .15em .3em; border: .12em solid var(--ink); border-radius: .5em; background: #fff; color: var(--ink); }
.modesel .mcard b { font-size: 1.35em; font-weight: 900; }
.modesel .mcard small { font-weight: 700; color: var(--muted); font-size: .8em; line-height: 1.45; }
.modesel .mcard[data-mode="party"] { background: linear-gradient(#fff8ee, #ffe6ef); }
.modesel .mcard[data-mode="sneak"] { background: linear-gradient(#3a3366, #262046); color: #fff; }
.modesel .mcard[data-mode="sneak"] small { color: #cfc8f0; }
.modesel .mcard.on { outline: .2em solid var(--gold); outline-offset: .15em; }
.modesel .mtag { align-self: flex-start; font-size: .7em; font-weight: 900; padding: .05em .7em .1em; border-radius: 999px; background: var(--ink); color: #fff; }
.modesel .mcard[data-mode="sneak"] .mtag { background: #7fe0ff; color: var(--ink); }
.modesel .ms-team { margin-top: 1em; display: flex; justify-content: center; align-items: center; gap: .4em; font-weight: 900; }
.modesel .ms-team button { font: inherit; font-weight: 900; cursor: pointer; background: #fff; color: var(--ink); border: .15em solid var(--ink); border-radius: 999px; padding: .15em 1em; box-shadow: 0 .15em 0 var(--ink); }
.modesel .ms-team button.on { background: var(--gold); }
.climbhint { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); padding: .3em 1em; background: rgba(40,30,60,.75); color: #fff; font-weight: 800; border-radius: 999px; pointer-events: none; white-space: nowrap; }
.climbhint b { background: #fff; color: var(--ink); border-radius: .3em; padding: 0 .35em; margin: 0 .15em; }
.perf { position: fixed; right: .5em; bottom: .4em; z-index: 50; font: 700 11px/1.3 system-ui, sans-serif; color: #fff; background: rgba(40,30,60,.55); padding: .15em .6em; border-radius: 6px; pointer-events: none; }
.perf.bad { background: rgba(220,50,80,.8); }
.crosshair.zhot { border-color: #ff5f8a; transform: scale(1.35); box-shadow: 0 0 0 .12em var(--ink), 0 0 .8em #ff5f8a; }
.modesel .ms-vol { margin-top: .8em; display: flex; justify-content: center; align-items: center; gap: .6em; font-weight: 900; }
.modesel .ms-vol input { width: 12em; accent-color: #ff8fb8; }
.modesel .ms-vol b { min-width: 6.5em; text-align: left; }
.modesel .ms-vol button { font: inherit; font-weight: 900; cursor: pointer; background: #fff; color: var(--ink); border: .15em solid var(--ink); border-radius: 999px; padding: .1em .9em; box-shadow: 0 .15em 0 var(--ink); }
.modesel .ms-note { margin-top: .6em; font-size: .75em; font-weight: 700; color: var(--muted); }
.modesel .ms-note b { background: var(--ink); color: #fff; border-radius: .4em; padding: 0 .4em; }
/* 下のゾーン：左＝状態、まんなか＝操作説明、右＝アクション。横に重ならない幅にする */
.help { max-width: 54%; white-space: normal; }
.status { max-width: 15em; }
.status .row small { white-space: normal; line-height: 1.35; }

/* 気配マーク：聞こえた音の方向（画面のまんなかを囲む輪の上） */
.sring { position: absolute; left: 50%; top: 52%; width: 0; height: 0; pointer-events: none; z-index: 1; }
.smark { position: absolute; left: 0; top: 0; width: 3.6em; height: 1.1em; border-radius: 50% 50% 40% 40% / 100% 100% 30% 30%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(ellipse at 50% 100%, currentColor 0%, currentColor 35%, transparent 72%); filter: drop-shadow(0 0 .35em currentColor); }
.smark.zombie { color: #8fe35a; }
.smark.human { color: #ffa865; }
.smark.lunge { color: #ff4f6b; width: 4.6em; height: 1.4em; }
#hud.cine .sring, #hud.ended .sring { display: none; }

/* どうぐ（Q・F）：アクションボタンの左 */
.gslots { position: absolute; right: calc(2.6% + 8.2em); bottom: 7.5%; display: flex; gap: .45em; }
.gslots:empty { display: none; }
.gs { position: relative; width: 4.4em; height: 4.4em; border-radius: 1em; background: rgba(255, 250, 243, .95); border: .15em solid var(--ink); box-shadow: 0 .18em 0 var(--ink); display: grid; place-items: center; text-align: center; }
.gs .ico { width: 2.3em; height: 2.3em; margin-top: -.5em; }
.gs small { position: absolute; bottom: .25em; left: 0; right: 0; font-size: .58em; font-weight: 900; line-height: 1.15; color: var(--ink); }
.gs.empty { opacity: .55; }
.gs.empty small { position: static; color: var(--muted); }
.gs .gk { position: absolute; top: -.55em; left: -.45em; background: var(--ink); color: #fff; border-radius: .45em; padding: 0 .45em .05em; font-weight: 900; font-size: .75em; }
/* マウス操作のヒント（1人称・3人称でマウスがつかまっていないとき） */
.lockhint { position: absolute; left: 50%; top: 36%; transform: translateX(-50%); background: var(--ink); color: #fff; font-weight: 900; padding: .35em 1.1em .4em; border-radius: 999px; font-size: .9em; pointer-events: none; opacity: .9; }
/* 長押しのゲージ：ねらいの輪のまわり */
.crosshair { background: conic-gradient(var(--human-d) calc(var(--hold, 0) * 1turn), transparent 0); }
/* ロッカーの中：すき間からのぞく */
.hideov { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(rgba(12, 10, 24, .96) 0 30%, transparent 30% 36%, rgba(12, 10, 24, .96) 36% 44%, transparent 44% 50%, rgba(12, 10, 24, .96) 50% 58%, transparent 58% 64%, rgba(12, 10, 24, .96) 64% 100%); }
/* くんくん中：画面のふちが緑に */
.sniffov { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 6em 1em rgba(120, 220, 90, .45); }
/* ボットのゾンビの気づき */
.lbl .tag .alert { display: inline-block; margin-right: .3em; color: #fff; background: #ffb52e; border-radius: 99px; padding: 0 .4em; font-weight: 900; }
.lbl .tag .alert.on { background: #ff4f6b; }