/* NINE LEGION — 2D 화면. 게임 화면은 시안 A "전장 작전판"(0.0.5). 3D 병사·무기 연출은 M3 에서 이 위에 얹는다 */
:root {
  --bg: #0b0f17; --panel: #161f30; --cell: #141c2c; --line: #2a3550; --line2: #3b4a6b;
  --ink: #e9eef8; --mute: #8b97b3; --gold: #ffcf5a; --bad: #ff3d5a; --given: #b9c4da; --hint: #9fe3ff;
  --p1: #ff7a3d; --p1d: #7a2f12; --p2: #43b4ff; --p2d: #11446b; --p3: #7be07b; --p3d: #1f5a1f; --p4: #d58bff; --p4d: #4b1f6b;
  --bs: 360px; --ff: "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50% 0%, #1b2740 0%, var(--bg) 60%) fixed, var(--bg); color: var(--ink);
  font-family: "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; overflow: hidden; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }
.p1 { --team: var(--p1); --teamd: var(--p1d); } .p2 { --team: var(--p2); --teamd: var(--p2d); }
.p3 { --team: var(--p3); --teamd: var(--p3d); } .p4 { --team: var(--p4); --teamd: var(--p4d); }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ── 로비 — 시안 A 톤 (어두운 작전실 배경 위 종이 카드·진한 잉크 글자) */
#lobby { overflow-y: auto; align-items: center; padding: 16px; background: radial-gradient(120% 90% at 50% 0%, #2a3346 0%, #0e131d 70%); }
#lobby .p1 { --team: #d9531e; --teamL: #ffb08a; } #lobby .p2 { --team: #1f78c8; --teamL: #9fd0ff; }
#lobby .p3 { --team: #2f9a46; --teamL: #a6e6b4; } #lobby .p4 { --team: #8e4fd1; --teamL: #d9b8ff; }
.lobby { width: min(980px, 100%); display: flex; flex-direction: column; align-items: center; gap: 18px; padding-bottom: 30px; }
.brand { text-align: center; }
.logo { margin: 18px 0 0; font: 800 clamp(42px, 9vw, 88px)/1 "Bitter", Georgia, serif; letter-spacing: .04em; text-align: center;
  background: linear-gradient(180deg, #fffaf0 0%, #f3e3c3 55%, #d9b26a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 5px 0 #3a2208) drop-shadow(0 0 26px rgba(255, 190, 90, .3)); }
.tag { margin: 8px 0 0; text-align: center; color: #c9bea4; font: 700 15px var(--ff); letter-spacing: .32em; }
.seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; }
@media (max-width: 720px) { .seats { grid-template-columns: repeat(2, 1fr); } }
.seat { background: linear-gradient(180deg, #f9f5ea, #ece4d0); color: #1c2433; border-radius: 16px; padding: 16px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 9px;
  box-shadow: 0 5px 0 #9e927a, 0 14px 30px #0008; border: 2px solid transparent; }
.seat.on { border-color: var(--team); box-shadow: 0 5px 0 #9e927a, 0 0 0 3px color-mix(in srgb, var(--team) 35%, transparent), 0 14px 30px #0008; }
.seat.off { background: #ffffff0d; color: #a8b3c7; box-shadow: none; border: 2px dashed #ffffff26; }
.seat .badge { width: 58px; height: 58px; border-radius: 15px; display: grid; place-items: center; font: 800 34px "Bitter", Georgia, serif; color: #fff;
  background: linear-gradient(160deg, var(--teamL), var(--team)); box-shadow: inset 0 -4px 0 #0003, 0 6px 14px #0004; }
.seat.off .badge { background: #ffffff14; color: #ffffff40; box-shadow: none; }
.seat .who { font: 900 16px var(--ff); letter-spacing: .04em; }
.seat.on .who { color: var(--team); }
.chips { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.chips button { padding: 6px 11px; border-radius: 999px; border: 1px solid #c9bea4; background: #fffdf6; color: #5a5446; font: 800 12px var(--ff); }
.seat.off .chips button { background: transparent; border-color: #ffffff30; color: #a8b3c7; }
.chips button.on { background: var(--team); color: #fff; border-color: var(--team); }
.seat.off .chips button.on { background: #ffffff26; color: #fff; border-color: #ffffff40; }
.seat .keys { color: #7a7262; font-size: 11px; font-weight: 700; }
.opts { display: flex; flex-direction: column; gap: 10px; align-items: center; background: #ffffff0a; border: 1px solid #ffffff17; border-radius: 16px; padding: 14px 18px; width: min(720px, 100%); }
.opt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; }
.opt > b { width: 72px; color: #a8b3c7; font: 800 14px var(--ff); text-align: right; }
.opt button { padding: 10px 16px; border-radius: 12px; border: 0; background: linear-gradient(180deg, #f9f5ea, #e6dcc3); color: #1c2433; font: 800 14px var(--ff); box-shadow: 0 3px 0 #9e927a; }
.opt button:active { transform: translateY(2px); box-shadow: 0 1px 0 #9e927a; }
.opt button.on { background: linear-gradient(180deg, #fff, #ffe08a); box-shadow: 0 3px 0 #b88a1f, 0 0 0 2px #ffcf5a; }
.mode { padding: 10px 16px; border-radius: 12px; background: #0006; font: 800 14px var(--ff); color: #ffcf5a; }
.go { padding: 16px 76px; border: 0; border-radius: 16px; background: linear-gradient(180deg, #ffe9a8, #ffcf5a 50%, #d9962a); color: #1a1000;
  font: 800 26px "Bitter", Georgia, serif; letter-spacing: .3em; box-shadow: 0 6px 0 #7a4a0a, 0 0 34px rgba(255, 207, 90, .35); }
.go:active { transform: translateY(3px); box-shadow: 0 3px 0 #7a4a0a; }
.note { margin: 0; color: #a8b3c7; font-size: 13px; text-align: center; line-height: 1.5; }
.online { width: min(720px, 100%); background: linear-gradient(180deg, #d6f3f5, #c3e9ec); color: #0d4850; border-radius: 16px; padding: 16px 18px; box-shadow: 0 5px 0 #7fb7bd, 0 14px 30px #0007; }
.online h3 { margin: 0 0 6px; font: 900 17px var(--ff); color: #0a6672; }
.online p { margin: 0 0 12px; color: #2d6a72; font-size: 13px; line-height: 1.55; }
.online .row { display: flex; gap: 8px; flex-wrap: wrap; }
.online input, .link-in { flex: 1; min-width: 160px; padding: 12px 13px; border-radius: 11px; border: 1px solid #9fcfd4; background: #fff; color: #1c2433; font: 700 15px var(--ff); }
.link-in { width: 100%; margin: 4px 0 2px; border-color: #3b4a6b; background: #0d1320; color: #e9eef8; }
.invite { padding: 12px 20px; border-radius: 11px; border: 0; background: linear-gradient(180deg, #2fc0d0, #1a8f9c); color: #fff; font: 900 15px var(--ff); box-shadow: 0 3px 0 #0e5e67; }
.invite:active { transform: translateY(2px); box-shadow: 0 1px 0 #0e5e67; }
.sheet .wait { margin-top: 14px; text-align: center; animation: beat 1.6s infinite; }
.howto { width: min(720px, 100%); background: #ffffff0a; border: 1px solid #ffffff17; border-radius: 14px; padding: 12px 16px; color: #c3ccdb; font-size: 14px; }
.howto summary { cursor: pointer; font-weight: 800; color: #fff; }
.howto li { margin: 7px 0; line-height: 1.55; }
.howto b { color: #ffcf5a; }
.links { display: flex; gap: 12px; align-items: center; }
.ghost { color: #e9eef8; text-decoration: none; border: 1px solid #ffffff30; padding: 7px 13px; border-radius: 10px; font-weight: 700; font-size: 13px; }
.ver { color: #a8b3c7; font-size: 12px; }

/* ══ 게임 화면 — 시안 A "전장 작전판" (docs/proposals/ninelegion/concept2) ══ */
:root { --paper: #f6f1e4; --paper2: #ece4d0; --pink: #2a3242; --grid: #c9bea4; --grid2: #4a4436; --hl: #efe7d3; --same: #f6cf7a;
  --selc: #ffcf5a; --badc: #d81e3c; --hintc: #1aa6b7; --inkd: #1c2433; --fd: "Bitter", Georgia, serif; --fc: "Barlow Condensed", "Barlow", var(--ff);
  --kh: 52px; --cs: 40px; }
#game { background: radial-gradient(120% 90% at 50% 0%, #2a3346 0%, #0e131d 70%); }
#game .p1 { --team: #d9531e; --teamL: #ffb08a; } #game .p2 { --team: #1f78c8; --teamL: #9fd0ff; }
#game .p3 { --team: #2f9a46; --teamL: #a6e6b4; } #game .p4 { --team: #8e4fd1; --teamL: #d9b8ff; }

/* ── 상단 */
.topbar { min-height: 52px; flex: none; display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: linear-gradient(180deg, #0c1119ee, #0c111900); }
.topbar.duel { min-height: 86px; }
.icon { width: 38px; height: 38px; border-radius: 11px; border: 1px solid #ffffff26; background: #ffffff10; font-size: 16px; flex: none; }
.stage { color: #a8b3c7; font-weight: 800; font-size: 13px; letter-spacing: .06em; display: flex; flex-direction: column; gap: 4px; flex: none; }
.stage b { color: #fff; }
.pips { display: flex; gap: 5px; }
.pips i { width: 10px; height: 10px; border-radius: 50%; background: #ffffff26; }
.pips i.w0 { background: #ff7a3d; } .pips i.w1 { background: #4aa3ff; }
.timer { margin-left: auto; font: 800 34px/1 var(--fc); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.chip { color: #ffcf5a; font-weight: 800; font-size: 12px; border: 1px solid #ffffff26; border-radius: 10px; padding: 4px 8px; flex: none; }
.topbar.duel .chip, .topbar.duel .timer { display: none; }

/* VS 막대 (결투) */
.vsbar { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: center; }
.vs-side { display: flex; align-items: center; gap: 12px; min-width: 0; }
.vs-side.right { flex-direction: row-reverse; text-align: right; }
.vs-side .avatar { width: 50px; height: 50px; flex: none; border-radius: 14px; display: grid; place-items: center; font: 800 30px var(--fd); color: #fff;
  background: linear-gradient(160deg, var(--teamL), var(--team)); box-shadow: inset 0 -4px 0 #0003, 0 6px 16px #0006; }
.vs-side .who { flex: none; max-width: 120px; overflow: hidden; }
.vs-side .who b { display: block; font: 900 16px var(--ff); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-side .who small { font: 600 12px var(--ff); color: #a8b3c7; }
.vs-side .life { flex: 1; min-width: 0; max-width: 440px; }
.vs-side.right .life .row { flex-direction: row-reverse; }
.vs-side .row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.vs-side .clock { font: 800 38px/1 var(--fc); letter-spacing: .02em; color: var(--teamL); font-variant-numeric: tabular-nums; }
.vs-side.low .clock { color: #ff6b6b; animation: hurt 1s infinite; }
.vs-side .score { font: 700 13px var(--ff); color: #cfd6e2; white-space: nowrap; }
.vs-side .score b { font: 800 21px "Barlow", var(--ff); color: #fff; margin-right: 2px; }
.vs-side .score i { font-style: normal; color: #ffcf5a; }
.vs-side .bar { height: 13px; border-radius: 7px; background: #0007; overflow: hidden; box-shadow: inset 0 0 0 1px #ffffff1a; }
.vs-side .bar i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--team), var(--teamL)); transition: width .2s; }
.vs-side.right .bar i { margin-left: auto; background: linear-gradient(270deg, var(--team), var(--teamL)); }
.vs-side .rage { height: 4px; margin-top: 4px; border-radius: 2px; background: #ffffff10; overflow: hidden; }
.vs-side .rage i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #b5123a, #ff3d5a, #ffcf5a); transition: width .2s; }
.vs-side.right .rage i { margin-left: auto; }
.vs-side .rage.full i { animation: ragep .6s infinite; }
.vs-side.ko { opacity: .45; filter: grayscale(.7); }
.vs-mid { font: 800 28px var(--fd); color: #ffcf5a; text-shadow: 0 2px 0 #6b4a00; }
@media (max-width: 700px) {
  .topbar.duel { min-height: 0; flex-wrap: wrap; gap: 8px; }
  .topbar.duel .vsbar { order: 3; flex-basis: 100%; gap: 8px; }
  .vs-side .who { display: none; }
  .vs-side .avatar { width: 34px; height: 34px; font-size: 19px; border-radius: 10px; }
  .vs-side .clock { font-size: 28px; }
  .vs-side .score { font-size: 11px; } .vs-side .score b { font-size: 16px; } .vs-side .score i { display: none; }
  .vs-side .row { gap: 4px; }
  .vs-side .bar { height: 9px; }
  .vs-mid { font-size: 16px; }
}
@keyframes ragep { 50% { filter: brightness(1.8); } }

/* ── 배치 */
.arena { flex: 1; min-height: 0; display: flex; gap: 14px; padding: 6px 14px 12px; }
.panel { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bwrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ctrl { width: var(--bs); display: flex; flex-direction: column; gap: 8px; }
.side { display: flex; flex-direction: column; gap: 10px; justify-content: center; align-items: stretch; }
.side:empty { display: none; }
.arena.h1 .side { width: 230px; flex: none; }
.arena.h2 .side { width: clamp(70px, 12vw, 190px); flex: none; }
.side.only { flex: 1; flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: center; }
.side.only .mini { width: 240px; }
/* 가로 넓은 화면: 판 | 패드·도구·상대 */
.arena.wide .panel { flex-direction: row; align-items: center; justify-content: center; gap: 28px; }
.arena.wide .ctrl { width: 300px; align-self: center; }
.arena.wide .pad { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.arena.wide .tools .tool { height: 54px; }
.arena.wide.m-duel .side:not(:has(.mini)) { display: none; }
@media (orientation: portrait) {
  .arena.h1 { flex-direction: column; gap: 8px; }
  .arena.h1 .side { width: auto; flex-direction: row; justify-content: center; }
  .arena.h1 .side .mini { flex: 1; max-width: 340px; display: grid; grid-template-columns: 64px 1fr; column-gap: 10px; padding: 8px 10px; align-items: center; }
  .arena.h1 .side .mini .mgrid { grid-row: 1 / 3; grid-column: 1; width: 64px; }
  .arena.h1 .side .mini .nm, .arena.h1 .side .mini .mst { grid-column: 2; }
  .arena.h2 { flex-direction: column; }
  .arena.h2 .side { width: auto; flex-direction: row; height: 30px; }
}

/* ── 패널 머리 (혼자·난전) */
.phead { width: var(--bs); display: flex; align-items: baseline; gap: 8px; font-weight: 800; }
.m-duel .phead { display: none; }
.phead .nm { color: var(--teamL); font-size: 15px; letter-spacing: .04em; }
.phead .rk { color: #ffcf5a; font-size: 13px; }
.phead .sc { margin-left: auto; font: 800 22px "Barlow", var(--ff); font-variant-numeric: tabular-nums; }
.phead .sc small { font: 700 11px var(--ff); color: #a8b3c7; margin-left: 2px; }
.phead .cb { color: #ffcf5a; font: italic 800 15px "Barlow", var(--ff); min-width: 40px; }

/* ── 판: 종이 + 진한 박스 틈 */
.board { width: var(--bs); height: var(--bs); flex: none; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: calc(var(--bs) / 110 + 2px); padding: calc(var(--bs) / 110 + 2px); background: var(--grid2); border-radius: 14px;
  box-shadow: 0 26px 56px #000a, 0 0 0 1px #0009; touch-action: manipulation; }
.box { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1.5px; background: var(--grid); border-radius: 6px; overflow: hidden; }
.c { background: var(--paper); position: relative; display: grid; place-items: center; cursor: pointer;
  font: 700 calc(var(--cs) * .6)/1 var(--fd); color: var(--pink); }
.c.hl { background: var(--hl); }
.c.same { background: var(--same); }
.c.mine { color: var(--team); font-weight: 800; }
.c.mine::after { content: ""; position: absolute; left: 50%; bottom: 9%; width: 28%; height: max(2px, calc(var(--cs) * .05)); border-radius: 2px; background: var(--team); transform: translateX(-50%); opacity: .75; }
.c.hinted { color: #6f7b8c; }
.c.hinted::before { content: "⚑"; position: absolute; top: 3%; right: 7%; font-size: calc(var(--cs) * .18); color: #8a95a6; }
.c.pointed { background: #d6f3f5; box-shadow: inset 0 0 0 3px var(--hintc); animation: hintp 1s infinite; }
.c.pointed::before { content: "💡"; position: absolute; top: 3%; left: 6%; font-size: calc(var(--cs) * .2); }
@keyframes hintp { 50% { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px var(--hintc); } }
.c.sel { background: #fff6d6; box-shadow: inset 0 0 0 3px var(--selc), inset 0 0 0 5px #fff; }
.c.sel.pointed { box-shadow: inset 0 0 0 3px var(--selc), inset 0 0 0 6px var(--hintc); }
.c.bad { background: #ffd9df !important; color: var(--badc) !important; animation: shake .3s 2; }
.c.bad::before { content: "✕"; position: absolute; top: 3%; right: 7%; font: 800 calc(var(--cs) * .2) var(--ff); color: var(--badc); }
@keyframes shake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.c.flash { animation: flash .8s; }
@keyframes flash { 30% { background: #ffe08a; } }
.c.pop { animation: pop .35s; }
@keyframes pop { 40% { transform: scale(1.2); } }
.memo { position: absolute; inset: 8%; display: grid; grid-template-columns: repeat(3, 1fr); align-content: space-between; text-align: center;
  font: 700 calc(var(--cs) * .21)/1.05 "Barlow", var(--ff); color: #8a7f66; pointer-events: none; }
.tip { width: var(--bs); min-height: 0; font: 700 13px var(--ff); border-radius: 10px; padding: 0 14px; opacity: 0; transition: opacity .2s; }
.tip.show { opacity: 1; padding: 8px 14px; background: #d6f3f5; color: #0d5660; }
.tip.show b { color: #0a7d8a; }
.tip.warn { background: #ffd9df; color: #8f1028; }

/* ── 숫자 패드: 큰 숫자 + 놓은 개수 점 */
.pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px; }
.key { height: var(--kh); border: 0; border-radius: 12px; background: linear-gradient(180deg, #f9f5ea, #e6dcc3); color: var(--inkd); position: relative;
  display: grid; place-items: center; box-shadow: 0 4px 0 #9e927a, 0 8px 18px #0006; font: 800 calc(var(--kh) * .5)/1 var(--fd); padding: 0; }
.key:active { transform: translateY(3px); box-shadow: 0 1px 0 #9e927a; }
.key .dots { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; }
.key .dots i { width: 4px; height: 4px; border-radius: 50%; background: #c8bc9f; }
.key .dots i.on { background: var(--team); }
.key.done { opacity: .35; }
.key.act { background: linear-gradient(180deg, #fff, #ffe9a8); box-shadow: 0 4px 0 #b88a1f, 0 0 0 3px var(--selc); }
.arena:not(.wide) .key .dots { gap: 1px; bottom: 4px; } .arena:not(.wide) .key .dots i { width: 3px; height: 3px; }
.tools { display: flex; gap: 8px; }
.tool { flex: 1; height: 46px; border-radius: 12px; background: #ffffff12; border: 1px solid #ffffff22; display: flex; align-items: center; justify-content: center; gap: 6px;
  font: 800 14px var(--ff); color: #e7ecf4; }
.tool small { font: 700 12px var(--ff); opacity: .75; }
.tool.on { background: #ffcf5a; color: #1a1000; border-color: #ffcf5a; }
.tool.hintb { border-color: var(--hintc); color: #8fe8f2; }
.tool.hintb.used { opacity: .4; }
.tool:active { transform: translateY(1px); }

/* ── 상대 카드 */
.mini { border-radius: 16px; background: #ffffff0d; border: 1px solid #ffffff1c; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.mini .nm { display: flex; justify-content: space-between; gap: 6px; font: 800 14px var(--ff); color: var(--teamL); }
.mini .nm small { color: #a8b3c7; font-weight: 600; }
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: #ffffff10; padding: 3px; border-radius: 8px; width: 100%; max-width: 200px; align-self: center; }
.mbox { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; }
.mbox i { aspect-ratio: 1; border-radius: 2px; background: #ffffff14; }
.mbox i.g { background: #ffffff40; } .mbox i.f { background: var(--team); }
.mini .mst { display: flex; align-items: baseline; gap: 4px; font-weight: 800; }
.mini .mst .sc { font: 800 20px "Barlow", var(--ff); } .mini .mst small { color: #a8b3c7; font-size: 11px; }
.mini .mst .rk { color: #ffcf5a; margin-left: 4px; }
.mini .mst .ct { margin-left: auto; font: 800 18px var(--fc); color: var(--teamL); }
.m-duel .mini .ct { display: none; }
.mini.ko { opacity: .45; filter: grayscale(.6); }
.ctrl .mini { margin-top: 6px; }

/* ── 날아가는 무기 (2D) */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.shot { position: absolute; left: 0; top: 0; padding: 6px 12px; border-radius: 999px; font: 800 14px var(--ff); color: #fff; white-space: nowrap;
  background: linear-gradient(90deg, var(--team), var(--teamL)); box-shadow: 0 0 22px color-mix(in srgb, var(--team) 70%, transparent); }
.shot.line { background: linear-gradient(90deg, #d99a12, #ffe08a); color: #2a1a00; box-shadow: 0 0 26px #ffcf5aaa; font-size: 16px; }
.shot.rage { background: linear-gradient(90deg, #b5123a, #ff6b6b); box-shadow: 0 0 28px #ff3d5a; font-size: 18px; }
.float { position: absolute; font: 900 22px "Barlow", var(--ff); color: #fff; text-shadow: 0 0 10px var(--c, #ff3d5a), 0 2px 0 #000; animation: floatup .9s forwards; white-space: nowrap; }
@keyframes floatup { to { transform: translateY(-40px); opacity: 0; } }
.hurt { animation: hurt .35s; }
@keyframes hurt { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ── 배너·긴장 */
.banner { position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%); pointer-events: none; z-index: 30; text-align: center;
  font: 800 clamp(36px, 8vw, 92px) var(--fd); color: #ffcf5a; text-shadow: 0 4px 0 #6b4a00, 0 0 30px #ffb32a88; opacity: 0; }
.banner.show { animation: bannerin 1.1s forwards; }
.banner.stay { opacity: 1; animation: none; }
.banner small { display: block; font: 700 clamp(13px, 2.2vw, 20px) var(--ff); color: #fff; letter-spacing: .04em; text-shadow: 0 2px 6px #000; margin-top: 6px; }
@keyframes bannerin { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; } }
.vign { position: fixed; inset: 0; pointer-events: none; z-index: 10; opacity: 0; transition: opacity .4s; }
body.tense .timer { color: #ffb38a; }
body.crisis .vign { opacity: 1; box-shadow: inset 0 0 110px rgba(255, 40, 70, .5); animation: beat 1s infinite; }
body.final .vign { opacity: 1; box-shadow: inset 0 0 150px rgba(255, 40, 70, .75); animation: beat .5s infinite; }
body.crisis .timer, body.final .timer { color: #ff6b6b; }
@keyframes beat { 0%, 100% { opacity: .4; } 15% { opacity: 1; } 30% { opacity: .55; } 45% { opacity: .9; } }

/* ── 결과·일시정지 시트 */
.overlay { position: fixed; inset: 0; background: rgba(4, 6, 12, .78); z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sheet { background: #161f30; border: 1px solid #3b4a6b; border-radius: 18px; padding: 22px; width: min(640px, 100%); max-height: 100%; overflow: auto; color: #e9eef8; box-shadow: 0 30px 70px #000c; }
.sheet h2 { margin: 0 0 4px; font: 800 40px var(--fd); color: #ffcf5a; text-shadow: 0 3px 0 #6b4a00; }
.sheet .sub { color: #a8b3c7; margin: 0 0 14px; font-weight: 700; line-height: 1.55; }
.sheet table { width: 100%; border-collapse: collapse; font-weight: 700; font-size: 14px; }
.sheet th, .sheet td { padding: 7px 4px; text-align: center; border-bottom: 1px solid #2a3550; }
.sheet td { font-family: "Barlow", var(--ff); font-size: 15px; }
.sheet th:first-child, .sheet td:first-child { text-align: left; color: #a8b3c7; font-family: var(--ff); font-size: 14px; }
.sheet .btns { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.sheet .btns button, .sheet .btns a { padding: 12px 22px; border-radius: 12px; border: 1px solid #3b4a6b; background: #1f2a40; font-weight: 800; text-decoration: none; color: #e9eef8; }
.sheet .btns .primary { background: #ffcf5a; color: #1a1000; border-color: #ffcf5a; }
.sheet .btns button:disabled { opacity: .55; }
.stars { color: #ffcf5a; font-size: 22px; letter-spacing: 3px; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #22304b; border: 1px solid #3b4a6b; padding: 9px 15px; border-radius: 10px; font-weight: 700; font-size: 13px; opacity: 0; transition: opacity .25s; z-index: 50; pointer-events: none; color: #e9eef8; }
.toast.show { opacity: 1; }
.m-brawl .side .mgrid { max-width: 150px; }
.m-brawl .side .mini { padding: 10px; gap: 6px; }

/* ── M4: 피격 흔들림·K.O. 번쩍·결전 카운트다운 */
.board.punch1 { animation: punch1 .16s; } .board.punch2 { animation: punch2 .22s; } .board.punch3 { animation: punch3 .34s; }
@keyframes punch1 { 30% { transform: translateX(-3px); } 70% { transform: translateX(3px); } }
@keyframes punch2 { 20% { transform: translate(-6px, 2px) scale(.995); } 50% { transform: translate(5px, -2px); } 80% { transform: translate(-2px, 1px); } }
@keyframes punch3 { 15% { transform: translate(-10px, 4px) scale(.985) rotate(-.4deg); } 40% { transform: translate(9px, -3px) rotate(.3deg); } 65% { transform: translate(-5px, 2px); } 85% { transform: translate(2px, 0); } }
.flash { position: fixed; inset: 0; pointer-events: none; z-index: 35; background: radial-gradient(circle at 50% 40%, #fff 0%, #ffe9a8 40%, transparent 75%); opacity: 0; }
.flash.on { animation: flashko .7s ease-out; }
@keyframes flashko { 0% { opacity: .95; } 100% { opacity: 0; } }
.vs-mid.count { color: #ff4d5e; font-size: 40px; text-shadow: 0 2px 0 #5a0010, 0 0 22px #ff3d5a; animation: countp 1s infinite; min-width: 52px; text-align: center; }
.timer.count { color: #ff4d5e; animation: countp 1s infinite; }
@keyframes countp { 0% { transform: scale(1.35); } 30% { transform: scale(1); } }
@media (max-width: 700px) { .vs-mid.count { font-size: 24px; min-width: 30px; } }

/* ── M5: 원정 지도·새 기록 */
.campaign { width: min(720px, 100%); background: #ffffff0a; border: 1px solid #ffffff17; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.campaign h3 { margin: 0; font: 900 16px var(--ff); color: #ffcf5a; }
.campaign h3 small { display: block; margin-top: 3px; font: 700 12px var(--ff); color: #a8b3c7; }
.camp-row { display: grid; grid-template-columns: 92px repeat(5, 1fr); gap: 8px; align-items: center; }
.camp-row > b { font: 800 14px var(--ff); color: #e9eef8; }
.camp-row > b small { display: block; color: #ffcf5a; font-size: 12px; }
.camp { height: 58px; border: 0; border-radius: 12px; background: linear-gradient(180deg, #f9f5ea, #e6dcc3); color: #1c2433; box-shadow: 0 3px 0 #9e927a; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.camp span { font: 800 22px "Bitter", Georgia, serif; line-height: 1; }
.camp i { font-style: normal; font-size: 11px; color: #d99a12; letter-spacing: 1px; }
.camp.gold { background: linear-gradient(180deg, #fff6d6, #ffd977); box-shadow: 0 3px 0 #b88a1f; }
.camp.locked { background: #ffffff10; color: #ffffff50; box-shadow: none; cursor: not-allowed; }
.camp:not(.locked):active { transform: translateY(2px); box-shadow: 0 1px 0 #9e927a; }
@media (max-width: 520px) { .camp-row { grid-template-columns: 64px repeat(5, 1fr); gap: 5px; } .camp { height: 50px; } .camp span { font-size: 18px; } }
.newrec { margin: -4px 0 12px; padding: 8px 12px; border-radius: 10px; background: #3a2c08; color: #ffd977; font-weight: 800; }
.links .ghost { background: transparent; cursor: pointer; font-family: var(--ff); }

/* ── M7: 온라인 2~4인 */
.opt-size { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.opt-size span { font: 800 13px var(--ff); color: #0a6672; margin-right: 4px; }
.opt-size button { border: 1px solid #8fc9cf; background: #fff; color: #0a6672; border-radius: 999px; padding: 6px 14px; font: 800 13px var(--ff); cursor: pointer; }
.opt-size button.on { background: #0a8a96; border-color: #0a8a96; color: #fff; }
.waitlist { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.waitlist li { padding: 8px 10px; border-radius: 10px; background: #ffffff10; border: 1px solid #ffffff1a; font-weight: 800; color: #e9eef8; }
.waitlist li b { display: inline-block; width: 22px; height: 22px; border-radius: 6px; text-align: center; line-height: 22px; margin-right: 6px; color: #fff; background: #5b6474; }
.waitlist li small { color: #ffcf5a; margin-left: 4px; }
.waitlist li.empty { color: #ffffff55; border-style: dashed; }
.waitlist li.p1 b { background: var(--p1); } .waitlist li.p2 b { background: var(--p2); } .waitlist li.p3 b { background: var(--p3, #2fa36b); } .waitlist li.p4 b { background: var(--p4, #8a5bd6); }
.mini.out { opacity: .45; filter: grayscale(.7); }