:root {
  color-scheme: dark;
  --bg: #0b1020;
  --surface: #11182a;
  --surface-raised: #151e32;
  --surface-soft: #0f1728;
  --border: rgba(167, 184, 219, .12);
  --text: #f1f4fb;
  --muted: #a9b4c8;
  --faint: #8592a8;
  --mint: #69e0b5;
  --mint-dim: rgba(105, 224, 181, .12);
  --coral: #ff8e83;
  --amber: #f2c879;
  font-family: "Manrope", "Noto Sans KR", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); }
button, select { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.hidden { display: none !important; }

.start-screen { position: relative; min-height: 100vh; overflow: hidden; padding: 30px max(6.5vw, 28px) 24px; background: radial-gradient(ellipse at 76% 46%, rgba(58, 91, 114, .15), transparent 34%), radial-gradient(ellipse at 22% 90%, rgba(35, 67, 73, .12), transparent 38%), var(--bg); }
.start-screen::before { position: absolute; inset: 0; pointer-events: none; content: ""; opacity: .15; background-image: linear-gradient(rgba(180, 196, 222, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 196, 222, .12) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 82%); }
.start-top, .start-footer, .game-header, .game-brand, .header-center, .section-heading, .action-panel-heading, .intel-title-row, .player-card-top, .player-card-bottom, .deck-row, .secret-counter > div, .feed-row, .modal-heading { display: flex; align-items: center; }
.start-top { position: relative; z-index: 1; gap: 12px; color: #e1e8f5; font-size: 11px; font-weight: 800; letter-spacing: .18em; }
.brand-mark { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(105, 224, 181, .55); border-radius: 9px; color: var(--mint); font-size: 15px; font-weight: 800; letter-spacing: 0; }
.status-pill { display: flex; align-items: center; gap: 8px; margin-left: auto; color: #8b99aa; font: 10px "DM Mono", monospace; letter-spacing: .12em; }
.status-pill i, .turn-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px rgba(105, 224, 181, .8); }
.hero { position: relative; z-index: 1; display: grid; min-height: calc(100vh - 125px); max-width: 1200px; margin: 0 auto; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 8%; }
.hero-copy { padding-bottom: 30px; }
.eyebrow { margin: 0 0 12px; color: var(--mint); font: 10px "DM Mono", monospace; letter-spacing: .17em; }
h1, h2, p { margin-top: 0; }
.hero h1 { margin: 0; font-size: clamp(42px, 5.6vw, 74px); font-weight: 700; line-height: 1.23; letter-spacing: -.065em; }
.hero h1 span { color: var(--mint); }
.hero-description { max-width: 450px; margin: 24px 0 30px; color: #99a4b8; font-size: 14px; line-height: 1.9; word-break: keep-all; }
.mode-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.primary-button, .secondary-button { min-height: 52px; padding: 0 21px; border-radius: 10px; font-weight: 700; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.primary-button { display: flex; min-width: 190px; align-items: center; justify-content: space-between; border: 1px solid var(--mint); background: var(--mint); color: #08231b; box-shadow: 0 7px 28px rgba(71, 212, 166, .15); }
.primary-button:hover { transform: translateY(-2px); background: #8aebc9; }
.primary-button span { font-size: 19px; }
.secondary-button { display: flex; min-width: 190px; align-items: center; justify-content: space-between; gap: 15px; border: 1px solid var(--border); background: rgba(255,255,255,.025); color: #7c889c; cursor: not-allowed; }
.coming-tag { padding: 4px 7px; border: 1px solid rgba(242, 200, 121, .17); border-radius: 5px; color: var(--amber); font-size: 10px; }
.mode-note { margin: 11px 0 0; color: var(--faint); font-size: 11px; }
.quick-rules { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 48px; color: #8692a7; font-size: 11px; }
.quick-rules b { width: 3px; height: 3px; border-radius: 50%; background: var(--mint); }
.hero-visual { position: relative; display: grid; min-height: 430px; place-items: center; }
.orbit { position: absolute; width: min(37vw, 390px); aspect-ratio: 1; border: 1px solid rgba(116, 151, 174, .1); border-radius: 50%; }
.orbit-two { width: min(28vw, 296px); border-style: dashed; opacity: .65; }
.code-card { position: relative; z-index: 1; width: min(340px, 83%); padding: 25px 27px 20px; border: 1px solid rgba(151, 183, 204, .22); border-radius: 17px; background: linear-gradient(145deg, rgba(26, 39, 57, .96), rgba(14, 21, 36, .96)); box-shadow: 0 30px 90px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.04); transform: rotate(-4deg); }
.card-topline, .card-bottom { display: flex; justify-content: space-between; color: #78879f; font: 9px "DM Mono", monospace; letter-spacing: .14em; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 11px var(--coral); }
.masked-code { display: flex; justify-content: space-between; margin: 30px 0 27px; color: var(--mint); font: 500 clamp(30px, 4vw, 43px) "DM Mono", monospace; letter-spacing: .15em; }
.masked-code span { display: grid; width: 56px; height: 68px; place-items: center; border: 1px solid rgba(105, 224, 181, .2); border-radius: 8px; background: rgba(105, 224, 181, .045); }
.card-bottom { padding-top: 14px; border-top: 1px solid var(--border); }
.card-bottom span:last-child { color: var(--coral); }
.floating-chip { position: absolute; z-index: 2; padding: 10px 12px; border: 1px solid rgba(166, 186, 210, .15); border-radius: 8px; background: #151f31; color: var(--mint); box-shadow: 0 10px 28px rgba(0,0,0,.23); font: 12px "DM Mono", monospace; }
.floating-chip span { margin-left: 8px; color: #79869a; font-size: 9px; letter-spacing: .06em; }
.chip-one { top: 19%; right: 3%; transform: rotate(5deg); }
.chip-two { bottom: 18%; left: 4%; color: var(--amber); transform: rotate(-5deg); }
.chip-three { right: 3%; bottom: 25%; color: #a9b3c3; font-size: 9px; }
.chip-three .mini-bars { color: var(--mint); font-size: 14px; }
.start-footer { position: relative; z-index: 1; justify-content: space-between; color: #7e8899; font: 9px "DM Mono", monospace; letter-spacing: .12em; }

.game-screen { max-width: 1440px; min-height: 100vh; margin: auto; padding: 0 38px 20px; }
.game-header { min-height: 70px; justify-content: space-between; border-bottom: 1px solid var(--border); }
.game-brand { gap: 9px; color: #e1e8f5; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-decoration: none; }
.game-brand .brand-mark { width: 27px; height: 27px; }
.header-center { gap: 10px; color: var(--muted); font-size: 11px; }
.header-center strong { color: var(--text); font: 500 14px "DM Mono", monospace; }
.header-divider { width: 1px; height: 18px; margin: 0 5px; background: var(--border); }
.turn-status { display: flex; align-items: center; gap: 7px; color: var(--mint); font: 9px "DM Mono", monospace; letter-spacing: .11em; }
.turn-status.ai-turn { color: var(--amber); }
.turn-status.ai-turn i { background: var(--amber); box-shadow: 0 0 12px rgba(242, 200, 121, .7); }
.icon-button { padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: #9ba6b9; cursor: pointer; }
.icon-button:hover { border-color: rgba(105,224,181,.35); color: var(--mint); }
.icon-button span { margin-left: 4px; font-size: 10px; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.start-top .sound-toggle { margin-left: 14px; font: 10px "DM Mono", monospace; letter-spacing: .1em; }
.sound-toggle[aria-pressed="false"] { color: var(--faint); text-decoration: line-through; }
.section-heading { justify-content: space-between; }
.section-heading h2, .action-panel-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.035em; }
.section-heading .eyebrow, .action-panel-heading .eyebrow { margin-bottom: 5px; font-size: 9px; }

.submit-button { min-height: 39px; padding: 0 15px; border: 1px solid var(--mint); border-radius: 7px; background: var(--mint); color: #0a261d; font-size: 11px; font-weight: 800; cursor: pointer; }
.submit-button:hover { background: #8aebc9; }
.submit-button:disabled { border-color: #324052; background: #273143; color: #778399; cursor: not-allowed; }
.digit-keypad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.digit-key { min-height: 45px; border: 1px solid rgba(167,184,219,.13); border-radius: 8px; background: #0d1626; color: #d6deea; font: 14px "DM Mono", monospace; cursor: pointer; }
.digit-key:hover, .digit-key.selected { border-color: rgba(105,224,181,.5); background: var(--mint-dim); color: var(--mint); }
.intel-sheet-list .digit { height: 25px; }

.intel-sidebar { display: flex; flex-direction: column; gap: 13px; }
.intel-list { display: grid; gap: 9px; }
.intel-card { padding: 11px; border: 1px solid rgba(167,184,219,.09); border-radius: 8px; background: rgba(5,10,18,.21); }
.intel-player-mark { display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--intel-color, var(--mint)); box-shadow: 0 0 8px var(--intel-color); }
.intel-card .digit:not(.eliminated) { border: 1px solid color-mix(in srgb, var(--intel-color) 24%, transparent); background: var(--intel-color-dim); color: color-mix(in srgb, var(--intel-color) 80%, white); }
.intel-card .digit.eliminated { border: 1px solid transparent; }
.intel-title-row { justify-content: space-between; margin-bottom: 8px; }
.intel-title-row strong { font-size: 10px; }
.digit-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.digit { display: grid; width: 100%; height: 19px; place-items: center; padding: 0; border: 0; border-radius: 3px; background: rgba(105,224,181,.08); color: #b8c3d2; font: 9px "DM Mono", monospace; cursor: pointer; }
.digit.eliminated { background: rgba(120,134,153,.055); color: #656e80; text-decoration: line-through; }
.digit.user-marked { outline: 2px solid var(--amber); outline-offset: -2px; background: rgba(242,200,121,.18) !important; color: #fff0c8 !important; text-decoration: none; box-shadow: 0 0 9px rgba(242,200,121,.19); }
.digit.user-marked::after { position: absolute; }
.digit { position: relative; }
.intel-meta { display: grid; gap: 5px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed rgba(167,184,219,.1); }
.intel-meta > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.intel-meta small { width: 46px; color: #7b879b; font-size: 9px; }
.meta-chip { padding: 2px 6px; border: 1px solid rgba(167,184,219,.12); border-radius: 5px; color: #aeb8ca; font: 9px "DM Mono", monospace; }
.meta-chip.strong { border-color: rgba(242,200,121,.3); color: var(--amber); }
.meta-chip em { margin-left: 3px; color: var(--amber); font-style: normal; }
.meta-chip.secret-used { margin-left: auto; color: var(--amber); border-color: rgba(242,200,121,.2); }
.meta-empty { color: var(--faint); font-size: 9px; }
.intel-foot { display: flex; justify-content: space-between; margin-top: 8px; color: #7b879b; font-size: 9px; }
.game-footer { display: flex; justify-content: space-between; padding-top: 13px; border-top: 1px solid var(--border); color: #7d8799; font: 9px "DM Mono", monospace; }
.game-footer i { padding: 0 4px; color: var(--mint); font-style: normal; }

.toast-region { position: fixed; z-index: 20; top: 83px; left: 50%; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); transform: translateX(-50%); }
.toast { padding: 12px 15px; border: 1px solid rgba(105,224,181,.25); border-radius: 9px; background: #172438; color: var(--text); box-shadow: 0 12px 35px rgba(0,0,0,.35); font-size: 11px; animation: toast-in .2s ease-out; }
.toast.warning { border-color: rgba(242,200,121,.3); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.modal-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; padding: 18px; place-items: center; background: rgba(4,8,15,.76); backdrop-filter: blur(7px); }
.modal-card { width: min(430px, 100%); padding: 24px; border: 1px solid rgba(167,184,219,.18); border-radius: 14px; background: #121c2e; box-shadow: 0 25px 80px rgba(0,0,0,.45); }
.modal-heading { justify-content: space-between; margin-bottom: 19px; }
.modal-heading h2 { margin: 0; font-size: 16px; }
.modal-close { border: 0; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.modal-description { margin: -7px 0 16px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.modal-code { display: flex; justify-content: center; gap: 10px; margin: 20px 0; color: var(--mint); font: 28px "DM Mono", monospace; letter-spacing: .12em; }
.modal-code span { display: grid; width: 51px; height: 55px; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: #0c1422; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 17px; }
.modal-secondary { min-height: 39px; padding: 0 13px; border: 1px solid var(--border); border-radius: 7px; background: transparent; color: #a2aec1; font-size: 10px; cursor: pointer; }
.modal-info { display: grid; gap: 8px; }
.modal-info-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); color: #8d9aaf; font-size: 10px; }
.modal-info-row strong { color: var(--text); font-weight: 600; }
.winner-mark { margin-bottom: 11px; color: var(--mint); font: 10px "DM Mono", monospace; letter-spacing: .15em; }

.digit-line { display: grid; grid-template-columns: 13px 1fr; align-items: center; gap: 5px; margin-top: 4px; }
.digit-position { color: #7b879c; font: 9px "DM Mono", monospace; text-align: center; }
.intel-lock { color: #8290a4; font-size: 9px; }
.intel-lock.decrypted { color: var(--coral); }
.spectator-banner { display: flex; min-height: 66px; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(242,200,121,.19); border-radius: 9px; background: rgba(242,200,121,.045); }
.spectator-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(242,200,121,.24); border-radius: 10px; color: var(--amber); font-size: 16px; }
.spectator-banner strong { font-size: 11px; }
.spectator-banner p { margin: 4px 0 0; color: #8d99ac; font-size: 9px; }
.watching-pulse { width: 7px; height: 7px; flex: 0 0 auto; margin-left: auto; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px rgba(242,200,121,.8); animation: pulse 1.5s infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.7); } }
.replay-button { display: flex; width: 100%; min-height: 37px; align-items: center; justify-content: space-between; margin-top: 10px; padding: 0 11px; border: 1px solid var(--border); border-radius: 7px; background: rgba(255,255,255,.025); color: #a8b4c6; font-size: 10px; cursor: pointer; }
.replay-button:hover { border-color: rgba(105,224,181,.3); color: var(--mint); }
.combat-trail { position: fixed; z-index: 80; height: 2px; transform-origin: left center; pointer-events: none; background: linear-gradient(90deg, transparent, var(--mint), #eafff7); box-shadow: 0 0 9px var(--mint); animation: trail-burst .46s ease-out forwards; }
.combat-trail.hit, .combat-trail.miss { background: linear-gradient(90deg, transparent, var(--coral), #fff0ee); box-shadow: 0 0 10px var(--coral); }
.combat-trail.miss { opacity: .7; }
.combat-projectile { position: fixed; z-index: 82; width: 11px; height: 11px; border: 2px solid #dffff3; border-radius: 50%; background: var(--mint); box-shadow: 0 0 16px 5px rgba(105,224,181,.58); pointer-events: none; animation: projectile-flight .48s cubic-bezier(.18,.68,.25,1) forwards; }
.combat-projectile.hit, .combat-projectile.miss { border-color: #fff0ee; background: var(--coral); box-shadow: 0 0 17px 5px rgba(255,142,131,.62); }
.player-card.is-attacking { animation: attacker-recoil .48s ease-out; }
.player-card.is-scanned { animation: scan-pulse .62s ease-out; }
.player-card.is-evading { animation: dodge .38s ease-out; }
.player-card.is-hit, .player-card.freshly-eliminated { animation: card-hit .62s cubic-bezier(.18,.72,.23,1); }
.impact-flash { position: fixed; z-index: 79; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(255,91,94,.12), transparent 58%); animation: impact-fade .62s ease-out forwards; }
@keyframes projectile-flight { to { transform: translate(var(--fly-x), var(--fly-y)) scale(.45); opacity: .9; } }
@keyframes trail-burst { 0% { opacity: 0; scale: .1 1; } 20% { opacity: 1; } 100% { opacity: 0; scale: 1 1; } }
@keyframes attacker-recoil { 25% { transform: translateY(-5px) scale(1.025); } }
@keyframes scan-pulse { 35% { box-shadow: 0 0 0 2px rgba(105,224,181,.36), 0 0 28px rgba(105,224,181,.22); } }
@keyframes dodge { 25% { transform: translateX(5px); } 55% { transform: translateX(-4px); } }
@keyframes card-hit { 20% { transform: translateX(-5px) rotate(-1deg); border-color: var(--coral); box-shadow: 0 0 27px rgba(255,142,131,.24); } 100% { transform: translateX(0); } }
@keyframes impact-fade { 0% { opacity: 1; } 100% { opacity: 0; } }
.ranking-list { display: grid; gap: 6px; margin: 12px 0; }
.ranking-row { display: grid; grid-template-columns: 30px 1fr auto 17px; align-items: center; gap: 10px; min-height: 39px; padding: 0 10px; border: 1px solid rgba(167,184,219,.1); border-radius: 7px; background: rgba(5,10,18,.25); }
.ranking-row:first-child { border-color: rgba(105,224,181,.27); background: rgba(105,224,181,.055); }
.ranking-place { color: var(--mint); font: 10px "DM Mono", monospace; }
.ranking-row strong { font-size: 10px; }
.ranking-code { color: #9aa7bb; font: 10px "DM Mono", monospace; letter-spacing: .1em; }
.winner-crown { color: var(--amber); }
.replay-stage { min-height: 145px; padding: 15px; border: 1px solid rgba(105,224,181,.17); border-radius: 10px; background: radial-gradient(ellipse at 12% 0%, rgba(105,224,181,.09), transparent 58%), #0e1727; }
.replay-event-type { color: var(--mint); font: 9px "DM Mono", monospace; letter-spacing: .11em; text-transform: uppercase; }
.replay-event { min-height: 62px; padding: 18px 0 11px; color: #cbd4e1; font-size: 12px; line-height: 1.8; }
.replay-event strong { color: var(--text); }
.replay-result { float: right; color: var(--mint) !important; }
.replay-progress { display: flex; align-items: center; gap: 10px; color: #77849a; font: 9px "DM Mono", monospace; }
.replay-progress-track { flex: 1; }
.replay-controls { display: flex; justify-content: center; gap: 9px; margin-top: 12px; }
.replay-controls button { min-width: 52px; }
.replay-play { min-width: 104px !important; }
.modal-card:has(.ranking-list) { max-height: min(90vh, 680px); overflow-y: auto; }
.modal-card:has(.replay-stage) { width: min(520px, 100%); }
.secret-outcome .result-symbol, .secret-outcome strong { border-color: rgba(242,200,121,.25); color: var(--amber); }
.miss-outcome .result-symbol, .miss-outcome strong { border-color: rgba(255,142,131,.25); color: var(--coral); }
.log-detail { padding: 14px; border: 1px solid var(--border); border-radius: 9px; background: rgba(5,10,18,.3); color: #cbd4e1; font-size: 12px; line-height: 1.8; }
.log-detail strong { color: var(--text); }
.intel-sheet-list { display: grid; max-height: min(58vh, 500px); gap: 9px; overflow-y: auto; padding-right: 3px; scrollbar-color: #303c50 transparent; scrollbar-width: thin; }
.mobile-game-dock { display: none; }
.mobile-panel-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 13px; padding: 4px; border: 1px solid rgba(167,184,219,.09); border-radius: 9px; background: rgba(5,10,18,.35); }
.mobile-panel-tab { min-height: 37px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #8592a7; font-size: 10px; cursor: pointer; }
.mobile-panel-tab.active { border-color: rgba(105,224,181,.2); background: var(--mint-dim); color: var(--mint); font-weight: 700; }
.mobile-panel-content { min-height: 100px; }
.mobile-panel-content .modal-description { margin: 0 0 10px; }
.mobile-log-list { display: grid; max-height: min(62vh, 540px); overflow-y: auto; padding: 0 4px 0 1px; scrollbar-color: #303c50 transparent; scrollbar-width: thin; }
.mobile-log-list .feed-row { min-height: 46px; align-items: center; padding: 6px 0; font-size: 9px; line-height: 1.5; }
.mobile-log-list .feed-result { flex: 0 0 auto; }
.modal-card:has(.mobile-panel-tabs) { width: min(540px, 100%); max-height: min(91vh, 760px); overflow: hidden; }
.modal-card:has(.mobile-panel-tabs) .modal-heading { margin-bottom: 12px; }

/* ───────── Game table (board) ───────── */
.player-you { --player-color: #e4ebf7; --player-color-dim: rgba(228,235,247,.1); }
.player-nova { --player-color: #69e0b5; --player-color-dim: rgba(105,224,181,.14); }
.player-echo { --player-color: #79aaff; --player-color-dim: rgba(121,170,255,.14); }
.player-byte { --player-color: #c19aff; --player-color-dim: rgba(193,154,255,.14); }
.tier-weak { --tier: #9fb0c8; --tier-dim: rgba(159,176,200,.1); }
.tier-medium { --tier: #69e0b5; --tier-dim: rgba(105,224,181,.11); }
.tier-strong { --tier: #f2c879; --tier-dim: rgba(242,200,121,.13); }

.alive-count { color: var(--muted); font: 9px "DM Mono", monospace; letter-spacing: .08em; }
.game-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; padding: 22px 0 28px; align-items: start; }
.board { min-width: 0; }
.table-felt { position: relative; display: grid; gap: 18px; padding: 20px; overflow: hidden; border: 1px solid rgba(105,224,181,.14); border-radius: 26px; background:
  radial-gradient(ellipse 70% 55% at 50% 48%, rgba(46,96,98,.22), transparent 70%),
  radial-gradient(ellipse at 50% 120%, rgba(105,224,181,.07), transparent 55%),
  linear-gradient(180deg, #0f182b, #0c1424); box-shadow: inset 0 0 0 6px rgba(5,9,17,.55), inset 0 0 60px rgba(0,0,0,.35), 0 20px 50px rgba(0,0,0,.25); }
.table-felt::before { position: absolute; inset: 18% 6%; content: ""; pointer-events: none; border: 1px dashed rgba(105,224,181,.08); border-radius: 50%; }
.table-felt::after { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(180,196,222,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(180,196,222,.035) 1px, transparent 1px); background-size: 32px 32px; }
.table-felt > * { position: relative; z-index: 1; }

/* seats */
.opponents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.seat { position: relative; display: grid; gap: 12px; padding: 13px 13px 11px; border: 1px solid rgba(167,184,219,.12); border-radius: 16px; background: linear-gradient(160deg, rgba(23,33,53,.94), rgba(13,20,34,.94)); transition: transform .2s, border-color .2s, box-shadow .2s, opacity .3s; }
.seat[role="button"] { cursor: pointer; }
.seat[role="button"]:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--player-color) 45%, transparent); }
.seat[role="button"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.seat-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.seat-avatar { position: relative; display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border: 2px solid color-mix(in srgb, var(--player-color) 55%, transparent); border-radius: 50%; background: var(--player-color-dim); color: var(--player-color); font: 800 16px "Manrope", sans-serif; }
.seat-name { display: grid; min-width: 0; }
.seat-name strong { overflow: hidden; font-size: 13px; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.seat-name small { color: var(--faint); font-size: 10px; }
.is-current .seat-avatar::after { position: absolute; inset: -7px; content: ""; border: 2px solid transparent; border-top-color: var(--player-color); border-right-color: var(--player-color); border-radius: 50%; animation: spin 1.1s linear infinite; }
.seat.is-current { border-color: color-mix(in srgb, var(--player-color) 55%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--player-color) 18%, transparent), 0 0 30px color-mix(in srgb, var(--player-color) 14%, transparent); }
.seat.is-target { border-color: rgba(242,200,121,.8); box-shadow: 0 0 0 1px rgba(242,200,121,.25), 0 0 34px rgba(242,200,121,.17); }
.reticle { position: absolute; inset: -6px; pointer-events: none; }
.reticle i { position: absolute; width: 16px; height: 16px; border: 2px solid var(--amber); }
.reticle i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.reticle i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.reticle i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.reticle i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.seat.is-target .reticle { animation: reticle-in .25s ease-out; }
.target-flag { position: absolute; top: -9px; right: 14px; padding: 2px 7px; border-radius: 5px; background: var(--amber); color: #2a1f07; font: 700 9px "DM Mono", monospace; letter-spacing: .1em; }
.thinking { display: inline-flex; gap: 3px; margin-left: auto; }
.thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--player-color, var(--amber)); animation: blink 1s infinite; }
.thinking i:nth-child(2) { animation-delay: .15s; }
.thinking i:nth-child(3) { animation-delay: .3s; }
.seat.is-dead { opacity: .62; border-color: rgba(255,142,131,.32); background: linear-gradient(160deg, rgba(40,22,28,.85), rgba(13,20,34,.94)); }
.seat.is-dead .seat-avatar { border-color: rgba(255,142,131,.5); background: rgba(255,142,131,.1); color: var(--coral); }
.stamp { position: absolute; top: 44%; left: 50%; padding: 4px 10px; border: 2px solid var(--coral); border-radius: 6px; color: var(--coral); font: 700 12px "DM Mono", monospace; letter-spacing: .2em; transform: translate(-50%, -50%) rotate(-10deg); background: rgba(11,16,32,.75); pointer-events: none; }
.seat-foot { display: flex; align-items: center; justify-content: space-between; }

/* lock slots: 상대 코드에 대해 내가 아는 정도 */
.lock-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lock-slot { position: relative; display: grid; height: 46px; place-items: center; overflow: hidden; padding: 0; border: 1px solid rgba(167,184,219,.14); border-radius: 9px; background: linear-gradient(180deg, #0a111e, #101a2c); color: #7e889c; font: 500 19px "DM Mono", monospace; }
.lock-slot b { position: relative; z-index: 1; font-weight: 500; }
.lock-slot small { position: absolute; top: 3px; left: 5px; color: #7d889a; font: 9px "DM Mono", monospace; }
.known-bar { position: absolute; right: 0; bottom: 0; left: 0; height: calc(var(--known, 0) * 100%); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--player-color, var(--mint)) 22%, transparent)); transition: height .4s ease; }
.lock-slot.cracked { border-color: color-mix(in srgb, var(--player-color, var(--mint)) 60%, transparent); color: var(--player-color, var(--mint)); box-shadow: inset 0 0 14px color-mix(in srgb, var(--player-color, var(--mint)) 20%, transparent); }
.lock-slot.cracked .known-bar { height: 0; }
.lock-slot.revealed { border-color: rgba(255,142,131,.4); color: var(--coral); }
.lock-row.large { gap: 10px; }
.lock-row.large .lock-slot { height: 74px; border-radius: 12px; font-size: 30px; }
button.lock-slot { cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
button.lock-slot:hover { transform: translateY(-2px); border-color: rgba(105,224,181,.45); }
.lock-slot.aimed { border-color: var(--mint); box-shadow: 0 0 0 2px rgba(105,224,181,.25), 0 0 22px rgba(105,224,181,.25); }
.lock-slot.aimed::before { position: absolute; inset: 0; content: ""; background: repeating-linear-gradient(180deg, rgba(105,224,181,.09) 0 2px, transparent 2px 5px); animation: scanlines 1.6s linear infinite; }
.lock-slot em { position: absolute; top: 4px; right: 5px; padding: 0 4px; border-radius: 4px; background: var(--mint); color: #08231b; font: 700 9px "DM Mono", monospace; font-style: normal; }

.secret-lamps { display: inline-flex; align-items: center; gap: 4px; color: #92876d; font-size: 11px; }
.secret-lamps i { width: 8px; height: 8px; border: 1px solid rgba(242,200,121,.35); border-radius: 50%; }
.secret-lamps i.on { background: var(--amber); box-shadow: 0 0 8px rgba(242,200,121,.7); }
.secret-lamps.big i { width: 11px; height: 11px; }
.secret-lamps.big { color: var(--amber); font-size: 14px; gap: 5px; }
.used-stack { position: relative; display: inline-flex; align-items: center; gap: 6px; color: #8a96aa; font: 11px "DM Mono", monospace; }
.used-stack span { position: relative; width: 16px; height: 21px; }
.used-stack span i { position: absolute; inset: 0; border: 1px solid rgba(167,184,219,.3); border-radius: 3px; background: linear-gradient(145deg, #1d2a42, #121b2d); }
.used-stack span i:nth-child(2) { transform: translate(3px, -2px); }
.used-stack span i:nth-child(3) { transform: translate(6px, -4px); }
.used-stack b { margin-left: 6px; color: var(--text); font-weight: 500; }

/* stage */
.stage { width: min(100%, 760px); margin: 0 auto; padding: 16px 18px 18px; border: 1px solid rgba(167,184,219,.12); border-radius: 18px; background: rgba(9,14,26,.72); box-shadow: 0 14px 40px rgba(0,0,0,.25); backdrop-filter: blur(6px); }
.stage-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 13px; }
.stage-heading h2 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.action-hint { color: var(--faint); font-size: 10px; }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.mode-btn { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(167,184,219,.12); border-radius: 12px; background: rgba(255,255,255,.02); color: #7f8ca2; font-size: 17px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.mode-btn b { font: 600 13px "DM Mono", monospace; letter-spacing: .14em; }
.mode-btn small { color: inherit; font-size: 10px; opacity: .7; }
.mode-btn:hover { border-color: rgba(167,184,219,.3); color: #c4cedd; }
.mode-btn.scan.active { border-color: rgba(105,224,181,.6); background: linear-gradient(180deg, rgba(105,224,181,.16), rgba(105,224,181,.04)); color: var(--mint); }
.mode-btn.crack.active { border-color: rgba(255,142,131,.6); background: linear-gradient(180deg, rgba(255,142,131,.16), rgba(255,142,131,.04)); color: var(--coral); }
.target-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 7px 10px; border: 1px solid rgba(242,200,121,.22); border-radius: 10px; background: linear-gradient(90deg, rgba(242,200,121,.08), transparent); }
.tb-label { color: var(--amber); font: 9px "DM Mono", monospace; letter-spacing: .16em; }
.target-bar strong { color: var(--player-color); font-size: 13px; }
.tb-tip { margin-left: auto; color: var(--faint); font-size: 10px; }
.mini-av { display: inline-grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border: 1.5px solid color-mix(in srgb, var(--player-color) 60%, transparent); border-radius: 50%; background: var(--player-color-dim); color: var(--player-color); font: 800 10px "Manrope", sans-serif; }
.scan-stage { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 18px; }
.stage-card { display: grid; justify-items: center; gap: 8px; }
.stage-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; text-align: center; word-break: keep-all; }
.aim-area { display: grid; gap: 9px; min-width: 0; }
.aim-label { color: #aab6c8; font-size: 11px; }
.stage-actions { display: flex; align-items: stretch; gap: 10px; margin-top: 16px; }
.secret-switch { display: flex; flex: 1; align-items: center; gap: 11px; padding: 8px 12px; border: 1px solid rgba(242,200,121,.2); border-radius: 12px; background: rgba(242,200,121,.03); color: #b9a77d; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.secret-switch b { display: block; font: 600 11px "DM Mono", monospace; letter-spacing: .12em; }
.secret-switch small { color: #8d8676; font-size: 10px; }
.switch-knob { position: relative; width: 34px; height: 19px; flex: 0 0 auto; border-radius: 10px; background: #263045; transition: background .2s; }
.switch-knob::after { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; content: ""; border-radius: 50%; background: #8a95a9; transition: transform .2s, background .2s; }
.secret-switch[aria-pressed="true"] { border-color: rgba(242,200,121,.7); background: rgba(242,200,121,.12); color: var(--amber); box-shadow: 0 0 22px rgba(242,200,121,.12); }
.secret-switch[aria-pressed="true"] .switch-knob { background: rgba(242,200,121,.45); }
.secret-switch[aria-pressed="true"] .switch-knob::after { background: var(--amber); transform: translateX(15px); }
.secret-switch:disabled { opacity: .4; cursor: not-allowed; }
.go-button { display: flex; min-width: 170px; min-height: 56px; align-items: center; justify-content: center; gap: 12px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #86eecb, #4fcf9f); color: #062119; font: 700 15px "DM Mono", monospace; letter-spacing: .18em; cursor: pointer; box-shadow: 0 6px 0 #2a8d6a, 0 12px 26px rgba(79,207,159,.25); transition: transform .1s, box-shadow .1s, filter .15s; }
.go-button span { font-size: 18px; }
.go-button:hover { filter: brightness(1.07); }
.go-button:active { transform: translateY(4px); box-shadow: 0 2px 0 #2a8d6a, 0 6px 14px rgba(79,207,159,.2); }
.go-button.crack { background: linear-gradient(180deg, #ffaea5, #f07a6e); color: #2c0906; box-shadow: 0 6px 0 #a64a41, 0 12px 26px rgba(240,122,110,.25); }
.go-button.crack:active { box-shadow: 0 2px 0 #a64a41; }
.go-button:disabled { background: #273143; color: #6f7b90; box-shadow: 0 6px 0 #1a2232; cursor: not-allowed; filter: none; transform: none; }
.crack-stage { display: grid; gap: 12px; }
.dial { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dial-slot { position: relative; height: 78px; border: 1px solid rgba(255,142,131,.22); border-radius: 13px; background: linear-gradient(180deg, #0a111e, #141d30); color: #ffd9d4; font: 500 34px "DM Mono", monospace; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.dial-slot.empty { color: #626c7d; }
.dial-slot small { position: absolute; top: 5px; left: 7px; color: #7e889a; font-size: 9px; }
.dial-slot.active { border-color: var(--coral); box-shadow: 0 0 0 2px rgba(255,142,131,.22), 0 0 24px rgba(255,142,131,.18); transform: translateY(-2px); }
.dial-slot.active::after { position: absolute; bottom: 10px; left: 50%; width: 22px; height: 2px; content: ""; background: var(--coral); transform: translateX(-50%); animation: blink 1s infinite; }
.keypad { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px; }
.key { min-height: 42px; padding: 0; border: 1px solid rgba(167,184,219,.14); border-radius: 9px; background: linear-gradient(180deg, #1a2438, #121a2b); color: #dbe3ef; font: 500 15px "DM Mono", monospace; cursor: pointer; box-shadow: 0 3px 0 #0a0f1b; transition: transform .08s, box-shadow .08s; }
.key:hover { border-color: rgba(255,142,131,.45); }
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a0f1b; }
.key.unlikely { color: #646e80; text-decoration: line-through; }
.key.used { border-color: rgba(255,142,131,.35); color: var(--coral); }
.key-clear { color: var(--amber); }
.stage-note { margin: 0; color: var(--faint); font-size: 10px; }
.stage-note.warn { color: #c9a35f; }
.stage-wait { display: flex; min-height: 92px; align-items: center; justify-content: center; gap: 14px; color: var(--muted); }
.stage-wait .seat-avatar { width: 48px; height: 48px; font-size: 19px; }
.stage-wait strong { display: block; color: var(--text); font-size: 15px; }
.stage-wait .thinking { margin: 6px 0 0; }
.feed-empty { padding: 13px 2px 15px; color: var(--faint); font-size: 10px; }

/* home row: 내 좌석 + 손패 */
.home-row { display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: end; gap: 18px; }
.my-seat { display: grid; gap: 11px; padding: 13px; border: 1px solid rgba(167,184,219,.14); border-radius: 16px; background: linear-gradient(160deg, rgba(23,33,53,.94), rgba(13,20,34,.94)); }
.my-seat.is-current { border-color: rgba(105,224,181,.45); box-shadow: 0 0 28px rgba(105,224,181,.1); }
.my-seat.is-current .seat-avatar::after { border-top-color: var(--mint); border-right-color: var(--mint); }
.my-seat.is-dead { border-color: rgba(255,142,131,.35); }
.my-code { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.code-slot { position: relative; display: grid; height: 44px; place-items: center; overflow: hidden; border: 1px solid rgba(228,235,247,.2); border-radius: 9px; background: #0b1220; color: #eef3fb; font: 500 20px "DM Mono", monospace; }
.code-slot b { position: relative; z-index: 1; font-weight: 500; }
.code-slot .known-bar { --player-color: var(--coral); height: calc(var(--exposure, 0) * 100%); }
.code-slot.exposed { border-color: rgba(255,142,131,.7); color: var(--coral); animation: danger 1.6s ease-in-out infinite; }
.code-caption { display: flex; justify-content: space-between; color: var(--faint); font-size: 9px; }
.code-caption em { color: var(--coral); font-style: normal; }
.my-assets { display: flex; align-items: center; gap: 12px; }
.pile { position: relative; display: grid; width: 42px; height: 56px; place-items: center; align-content: center; border: 1px solid rgba(105,224,181,.3); border-radius: 7px; background: repeating-linear-gradient(45deg, rgba(105,224,181,.07) 0 4px, transparent 4px 8px), linear-gradient(145deg, #1b2a40, #0f1828); box-shadow: 2px -2px 0 -1px #131d30, 2px -2px 0 0 rgba(105,224,181,.2), 4px -4px 0 -1px #131d30, 4px -4px 0 0 rgba(105,224,181,.12); }
.pile b { font: 500 15px "DM Mono", monospace; }
.pile small { color: #7d8aa0; font-size: 9px; }
.pile.discard { border-color: rgba(167,184,219,.18); background: rgba(5,10,18,.45); box-shadow: none; }
.pile.empty { opacity: .45; box-shadow: none; }
.cycle { margin-left: auto; color: var(--faint); font: 9px "DM Mono", monospace; letter-spacing: .1em; }

.hand { display: flex; min-height: 170px; align-items: flex-end; justify-content: center; padding: 18px 0 4px; }
.hand.idle .play-card { filter: saturate(.5) brightness(.75); }
.hand-label { align-self: center; color: var(--faint); font-size: 11px; }
.play-card { position: relative; display: grid; width: 112px; flex: 0 0 auto; aspect-ratio: 5 / 7; grid-template-rows: auto 1fr auto; padding: 8px; margin: 0 -5px; border: 1px solid color-mix(in srgb, var(--tier) 45%, transparent); border-radius: 12px; background: radial-gradient(circle at 50% 40%, var(--tier-dim), transparent 65%), linear-gradient(160deg, #1d2a42, #0f1727); color: var(--text); text-align: left; box-shadow: 0 10px 22px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.05); transform: translateY(var(--drop, 0)) rotate(var(--rot, 0)); transform-origin: 50% 120%; transition: transform .2s cubic-bezier(.2,.8,.3,1.2), box-shadow .2s, border-color .2s; }
button.play-card { cursor: pointer; }
button.play-card:hover:not(:disabled) { z-index: 2; transform: translateY(calc(var(--drop, 0px) - 12px)) rotate(var(--rot, 0)); }
.play-card.selected { z-index: 3; border-color: var(--tier); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tier) 35%, transparent), 0 18px 34px rgba(0,0,0,.45), 0 0 30px color-mix(in srgb, var(--tier) 25%, transparent); transform: translateY(-24px) rotate(0deg); }
button.play-card.selected:hover { transform: translateY(-26px) rotate(0deg); }
.play-card:disabled { cursor: default; }
.pc-corner { color: var(--tier); font: 500 10px "DM Mono", monospace; }
.pc-glyph { display: grid; place-items: center; color: var(--tier); font: 500 30px "DM Mono", monospace; text-shadow: 0 0 18px color-mix(in srgb, var(--tier) 45%, transparent); }
.pc-name { overflow: hidden; color: #dbe3ef; font-size: 9.5px; font-weight: 600; line-height: 1.3; word-break: keep-all; }
.pc-pips { position: absolute; top: 9px; right: 8px; display: flex; gap: 2px; }
.pc-pips i { width: 5px; height: 5px; border-radius: 50%; background: rgba(167,184,219,.18); }
.pc-pips i.on { background: var(--tier); }
.pc-key { position: absolute; right: 7px; bottom: 6px; color: #7c8698; font: 9px "DM Mono", monospace; }
.play-card.preview { width: 128px; margin: 0; transform: none; }
.play-card.preview .pc-glyph { font-size: 36px; }
.play-card.mini { width: 74px; margin: 0; padding: 6px; border-radius: 9px; transform: none; }
.play-card.mini .pc-glyph { font-size: 20px; }
.play-card.mini .pc-name, .play-card.mini .pc-pips { display: none; }

/* sidebar */
.intel-sidebar { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 13px; }
.intel-panel, .activity-panel { padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: rgba(16, 24, 40, .67); }
.compact h2 { font-size: 14px; }
.compact .eyebrow { margin-bottom: 4px; }
.intel-legend { display: flex; align-items: center; gap: 4px; color: var(--faint); font-size: 9px; }
.intel-legend i { width: 8px; height: 8px; margin-left: 4px; border-radius: 2px; background: rgba(105,224,181,.3); }
.intel-legend i.off { background: rgba(120,134,153,.15); }
.intel-legend i.mark { background: rgba(242,200,121,.5); }
.intel-list { display: grid; gap: 9px; margin-top: 11px; }
.intel-card { --intel-color: var(--player-color); }
.intel-card .digit:not(.eliminated) { border: 1px solid color-mix(in srgb, var(--intel-color) 24%, transparent); background: var(--player-color-dim); color: color-mix(in srgb, var(--intel-color) 80%, white); }
.intel-player-mark { display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--player-color); box-shadow: 0 0 8px var(--player-color); }
.feed-count { color: var(--muted); font: 9px "DM Mono", monospace; letter-spacing: .08em; }
.activity-feed { display: grid; max-height: 300px; margin-top: 8px; overflow-y: auto; scrollbar-color: #303c50 transparent; scrollbar-width: thin; }
.feed-row { display: flex; width: 100%; min-height: 38px; align-items: center; gap: 6px; padding: 5px 4px; border: 0; border-top: 1px solid rgba(167,184,219,.07); background: transparent; color: #aab5c6; font-size: 10px; text-align: left; cursor: pointer; }
.feed-row:hover, .feed-row:focus-visible { background: rgba(105,224,181,.05); outline: none; }
.feed-row .mini-av { width: 22px; height: 22px; font-size: 9px; }
.feed-arrow { color: #7c8697; font-style: normal; }
.feed-token { padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--tier, var(--coral)) 40%, transparent); border-radius: 5px; color: var(--tier, var(--coral)); font: 10px "DM Mono", monospace; }
.feed-detail { overflow: hidden; color: #8592a7; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.feed-detail.mono { color: #d5dce8; font: 11px "DM Mono", monospace; letter-spacing: .12em; }
.feed-result { margin-left: auto; padding: 2px 7px; border-radius: 5px; background: rgba(105,224,181,.1); color: var(--mint); font: 500 11px "DM Mono", monospace; white-space: nowrap; }
.feed-result:empty { display: none; }
.feed-result.secret { background: rgba(242,200,121,.12); color: var(--amber); }
.feed-result.hit { background: rgba(105,224,181,.2); }
.feed-result.miss { background: rgba(255,142,131,.12); color: var(--coral); }
.feed-row.system { color: #8d99ac; font-size: 9.5px; line-height: 1.5; }
.feed-row.system strong { color: var(--text); font-weight: 600; }
.sys-icon { flex: 0 0 auto; width: 22px; color: #7e889c; font-size: 9px; text-align: center; }

/* result modal */
.result-eyebrow { margin-bottom: 7px; color: var(--mint); font: 9px "DM Mono", monospace; letter-spacing: .13em; }
.duel { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin: 6px 0 16px; }
.duel-side { display: grid; justify-items: center; gap: 4px; }
.duel-side .seat-avatar { width: 46px; height: 46px; }
.duel-side small { color: var(--muted); font: 10px "DM Mono", monospace; }
.duel-beam { position: relative; height: 2px; background: rgba(167,184,219,.12); }
.duel-beam i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px 4px rgba(105,224,181,.5); animation: beam 1s ease-in-out infinite; }
.duel-beam.secret i { background: var(--amber); box-shadow: 0 0 14px 4px rgba(242,200,121,.5); }
.duel-beam.guess i { background: var(--coral); box-shadow: 0 0 14px 4px rgba(255,142,131,.5); }
.result-row { display: flex; align-items: center; gap: 14px; }
.result-readout { display: grid; flex: 1; gap: 4px; min-height: 100px; align-content: center; padding: 14px 16px; border: 1px solid rgba(105,224,181,.25); border-radius: 12px; background: radial-gradient(ellipse at 20% 0%, rgba(105,224,181,.12), transparent 65%), #0c1422; }
.result-readout small { color: #8a97aa; font-size: 10px; }
.result-readout strong { color: var(--mint); font: 500 40px "DM Mono", monospace; line-height: 1.1; text-shadow: 0 0 22px rgba(105,224,181,.35); }
.result-readout.secret { border-color: rgba(242,200,121,.3); background: radial-gradient(ellipse at 20% 0%, rgba(242,200,121,.12), transparent 65%), #0c1422; }
.result-readout.secret strong { color: var(--amber); text-shadow: 0 0 22px rgba(242,200,121,.35); }
.result-readout.locked strong { font-size: 26px; letter-spacing: .3em; }
.guess-tiles { display: flex; justify-content: center; gap: 9px; }
.guess-tiles span { display: grid; width: 60px; height: 74px; place-items: center; border: 1px solid rgba(167,184,219,.25); border-radius: 12px; background: #0c1422; font: 500 32px "DM Mono", monospace; animation: tile-flip .5s calc(var(--d) * .12s) both; }
.guess-tiles.hit span { border-color: var(--mint); color: var(--mint); box-shadow: 0 0 20px rgba(105,224,181,.25); }
.guess-tiles.miss span { border-color: rgba(255,142,131,.6); color: var(--coral); }
.guess-tiles.miss { animation: shake .45s .55s; }
.verdict { margin-top: 14px; font: 700 15px "DM Mono", monospace; letter-spacing: .3em; text-align: center; }
.verdict.hit { color: var(--mint); text-shadow: 0 0 18px rgba(105,224,181,.5); }
.verdict.miss { color: var(--coral); }
.result-note { margin: 14px 0 0; color: #8995a9; font-size: 10px; line-height: 1.6; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: .25; } }
@keyframes reticle-in { from { opacity: 0; transform: scale(1.12); } }
@keyframes scanlines { to { background-position: 0 20px; } }
@keyframes danger { 50% { box-shadow: 0 0 16px rgba(255,142,131,.35); } }
@keyframes beam { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes tile-flip { from { opacity: 0; transform: rotateX(90deg); } to { opacity: 1; transform: rotateX(0); } }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 1100px) {
  .game-screen { padding: 0 23px 18px; }
  .game-layout { grid-template-columns: 1fr; }
  .intel-sidebar { position: static; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .hero { gap: 2%; }
}
@media (max-width: 760px) {
  .start-screen { padding: 20px 22px; }
  .hero { min-height: unset; grid-template-columns: 1fr; gap: 0; padding: 72px 0 45px; }
  .hero-copy { padding: 0; }
  .hero h1 { font-size: clamp(40px, 10vw, 62px); }
  .hero-description { margin: 17px 0 22px; font-size: 12px; }
  .quick-rules { margin-top: 27px; gap: 8px; font-size: 9px; }
  .hero-visual { min-height: 290px; margin-top: 16px; }
  .orbit { width: min(77vw, 330px); }
  .orbit-two { width: min(58vw, 245px); }
  .code-card { width: min(295px, 78%); padding: 20px 21px 17px; }
  .masked-code { margin: 22px 0; }
  .masked-code span { width: 48px; height: 57px; }
  .chip-one { top: 10%; right: 1%; }
  .chip-two { bottom: 8%; left: 0; }
  .chip-three { right: 0; bottom: 15%; }
  .start-footer { gap: 12px; font-size: 7px; }
  .game-screen { padding: 0 12px 17px; }
  .game-header { min-height: 58px; }
  .game-brand { font-size: 0; }
  .game-brand .brand-mark { font-size: 14px; }
  .header-center { gap: 6px; }
  .header-center .round-label, .header-center .alive-count, .header-center .header-divider + .header-divider { display: none; }
  .turn-status { font-size: 9px; }
  .icon-button { padding: 7px; }
  .icon-button span { display: none; }
  .game-layout { padding-top: 14px; padding-bottom: 82px; }
  .table-felt { gap: 14px; padding: 12px 10px; border-radius: 18px; }
  .table-felt::before { display: none; }
  .opponents { gap: 7px; }
  .seat { gap: 8px; padding: 9px 7px 8px; border-radius: 12px; }
  .seat-avatar { width: 30px; height: 30px; font-size: 12px; }
  .seat-head { gap: 6px; }
  .seat-name strong { font-size: 11px; }
  .seat-name small { font-size: 9px; }
  .lock-row { gap: 3px; }
  .lock-slot { height: 32px; border-radius: 6px; font-size: 14px; }
  .lock-slot small { display: none; }
  .seat-foot { flex-wrap: wrap; gap: 4px; }
  .secret-lamps i { width: 6px; height: 6px; }
  .used-stack span { display: none; }
  .used-stack b { margin: 0; }
  .target-flag { right: 6px; font-size: 9px; }
  .stage { padding: 12px; border-radius: 14px; }
  .mode-btn small { display: none; }
  .tb-tip { display: none; }
  .scan-stage { grid-template-columns: 1fr; gap: 12px; }
  .stage-card { grid-template-columns: auto 1fr; align-items: center; justify-items: start; gap: 12px; }
  .stage-card p { text-align: left; }
  .play-card.preview { width: 84px; }
  .play-card.preview .pc-glyph { font-size: 24px; }
  .lock-row.large .lock-slot { height: 58px; font-size: 24px; }
  .lock-row.large .lock-slot small { display: block; }
  .stage-actions { flex-direction: column; }
  .go-button { min-height: 52px; }
  .keypad { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dial-slot { height: 64px; font-size: 28px; }
  .home-row { grid-template-columns: 1fr; gap: 10px; }
  .hand { order: -1; min-height: 140px; padding-top: 22px; }
  .play-card { width: 84px; padding: 6px; margin: 0 -3px; }
  .pc-glyph { font-size: 22px; }
  .pc-name { font-size: 9px; }
  .pc-key { display: none; }
  .intel-sidebar { grid-template-columns: 1fr; }
  .game-footer span:last-child { display: none; }
  .mobile-game-dock { position: fixed; z-index: 19; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); left: 12px; display: flex; min-height: 54px; align-items: center; gap: 7px; padding: 6px; border: 1px solid rgba(167,184,219,.17); border-radius: 15px; background: rgba(12,19,33,.95); box-shadow: 0 8px 28px rgba(0,0,0,.42), 0 0 22px rgba(105,224,181,.055); backdrop-filter: blur(12px); }
  .quick-targets { display: flex; min-width: 0; flex: 1; gap: 5px; }
  .quick-target { display: flex; min-width: 0; min-height: 39px; flex: 1; align-items: center; justify-content: center; gap: 5px; padding: 0 5px; border: 1px solid rgba(167,184,219,.1); border-radius: 9px; background: rgba(255,255,255,.025); color: #a7b3c5; font-size: 9px; font-weight: 700; cursor: pointer; }
  .quick-target i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--player-color, #8290a4); }
  .quick-target.selected { border-color: rgba(242,200,121,.7); background: rgba(242,200,121,.13); color: var(--amber); }
  .quick-target.selected i { background: var(--amber); box-shadow: 0 0 8px rgba(242,200,121,.75); }
  .intel-fab { display: flex; min-width: 61px; min-height: 39px; flex: 0 0 auto; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid rgba(105,224,181,.38); border-radius: 9px; background: rgba(105,224,181,.09); color: var(--mint); font-size: 9px; font-weight: 700; cursor: pointer; }
  .intel-fab > span:first-child { font-size: 15px; }
  #action-panel { scroll-margin-top: 14px; }
  .intel-sheet-list { max-height: min(55vh, 470px); }
  .mobile-log-list { max-height: min(59vh, 500px); }
  .guess-tiles span { width: 52px; height: 64px; font-size: 26px; }
  .result-readout strong { font-size: 32px; }
}
@media (max-width: 390px) {
  .mode-actions { display: grid; }
  .primary-button, .secondary-button { width: 100%; }
  .seat-name small { display: none; }
  .play-card { width: 74px; }
  .keypad { gap: 4px; }
  .mobile-game-dock { right: 8px; left: 8px; gap: 4px; padding: 5px; }
  .quick-target { gap: 3px; padding: 0 3px; font-size: 9px; }
  .intel-fab { min-width: 54px; padding: 0 6px; font-size: 9px; }
}

.link-button { display: inline-flex; align-items: center; text-decoration: none; }
.history-link { color: var(--mint); text-decoration: none; }
.history-link:hover { text-decoration: underline; }

.records-btn { margin-left: auto; padding: 4px 9px; border: 1px solid rgba(242,200,121,.35); border-radius: 6px; background: rgba(242,200,121,.08); color: var(--amber); font: 9px "DM Mono", monospace; letter-spacing: .04em; cursor: pointer; white-space: nowrap; }
.records-btn:hover { border-color: rgba(242,200,121,.5); color: var(--amber); }
.records-btn.wide { width: 100%; margin: 0; padding: 7px; font-size: 10px; }
.record-attackers { display: grid; gap: 6px; margin-bottom: 12px; }
.record-attacker { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid rgba(167,184,219,.1); border-radius: 9px; background: rgba(5,10,18,.3); font-size: 11px; color: var(--muted); }
.record-attacker strong { color: var(--player-color); font-size: 12px; }
.record-attacker em { color: var(--amber); font-style: normal; }
.record-list { display: grid; max-height: min(52vh, 420px); overflow-y: auto; scrollbar-color: #303c50 transparent; scrollbar-width: thin; }
.modal-card:has(.record-list) { width: min(480px, 100%); }
.seat[data-records] { cursor: pointer; }
.seat[data-records]:hover { border-color: rgba(167,184,219,.3); }
.seat-records { padding: 4px 9px; border: 1px solid rgba(242,200,121,.35); border-radius: 7px; background: rgba(242,200,121,.08); color: var(--amber); font: 10px "DM Mono", "Noto Sans KR", monospace; cursor: pointer; transition: background .15s, border-color .15s; }
.seat-records:hover { border-color: var(--amber); background: rgba(242,200,121,.18); }
@media (max-width: 760px) { .seat-records { padding: 3px 6px; font-size: 9px; } }

/* ───────── Multiplayer ───────── */
.secondary-button.enabled { border-color: rgba(121,170,255,.45); background: rgba(121,170,255,.08); color: #cfe0ff; cursor: pointer; }
.secondary-button.enabled:hover { transform: translateY(-2px); border-color: #79aaff; }
.coming-tag.beta { border-color: rgba(121,170,255,.35); color: #9fc2ff; }
.turn-timer { padding: 3px 8px; border: 1px solid rgba(167,184,219,.2); border-radius: 6px; color: var(--text); font: 11px "DM Mono", monospace; font-variant-numeric: tabular-nums; }
.turn-timer.warn { border-color: var(--coral); color: var(--coral); animation: blink 1s infinite; }

.lobby-screen { max-width: 1100px; min-height: 100vh; margin: auto; padding: 0 38px 40px; }
.lobby-body { display: grid; place-items: start center; padding-top: 6vh; }
.lobby-entry, .lobby-room { display: grid; gap: 16px; width: min(560px, 100%); }
.lobby-entry h1 { margin: 0; font-size: clamp(30px, 5vw, 44px); letter-spacing: -.04em; }
.lobby-entry .hero-description { margin: 0; }
.lobby-field { display: grid; gap: 6px; color: var(--muted); font-size: 12px; }
.lobby-field input, .join-box input { height: 48px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; background: #0b1220; color: var(--text); font: 600 15px "Noto Sans KR", sans-serif; }
.lobby-field input:focus, .join-box input:focus { border-color: rgba(105,224,181,.6); outline: none; }
.lobby-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.join-box { display: flex; flex: 1; min-width: 220px; gap: 6px; }
.join-box input { flex: 1; min-width: 0; font: 600 16px "DM Mono", monospace; letter-spacing: .2em; text-transform: uppercase; }
.join-button { min-width: 72px; border: 1px solid rgba(121,170,255,.5); border-radius: 10px; background: rgba(121,170,255,.1); color: #cfe0ff; font-weight: 700; cursor: pointer; }
.join-button:hover { background: rgba(121,170,255,.2); }
.lobby-error { min-height: 18px; margin: 0; color: var(--coral); font-size: 12px; }
.room-code-card { display: grid; justify-items: center; gap: 8px; padding: 22px; border: 1px solid rgba(105,224,181,.25); border-radius: 18px; background: radial-gradient(ellipse at 50% 0%, rgba(105,224,181,.1), transparent 70%), var(--surface); }
.room-code-card small { color: var(--muted); font-size: 12px; }
.room-code-card strong { color: var(--mint); font: 500 clamp(36px, 8vw, 54px) "DM Mono", monospace; letter-spacing: .25em; text-shadow: 0 0 24px rgba(105,224,181,.35); }
.lobby-seats { display: grid; gap: 8px; }
.lobby-seat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid rgba(167,184,219,.12); border-radius: 14px; background: var(--surface); }
.lobby-seat.mine { border-color: color-mix(in srgb, var(--player-color) 50%, transparent); }
.lobby-seat.open { border-style: dashed; opacity: .7; }
.lobby-seat.open .seat-avatar { border-style: dashed; }
.host-badge { margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: rgba(242,200,121,.15); color: var(--amber); font: 600 9px "Noto Sans KR", sans-serif; font-style: normal; }
.seat-control { margin-left: auto; padding: 6px 10px; border: 1px solid rgba(167,184,219,.2); border-radius: 8px; background: transparent; color: #a9b5c7; font-size: 11px; cursor: pointer; }
.seat-control:hover { border-color: var(--amber); color: var(--amber); }
.lobby-hint { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.lobby-room-actions { display: flex; justify-content: space-between; gap: 10px; }

.live-event { position: absolute; top: 210px; left: 50%; z-index: 6; display: flex; align-items: center; gap: 9px; max-width: calc(100% - 32px); padding: 10px 16px; border: 1px solid rgba(167,184,219,.25); border-radius: 14px; background: rgba(9,14,26,.94); box-shadow: 0 16px 40px rgba(0,0,0,.45); transform: translateX(-50%); white-space: nowrap; }
.live-event.pop { animation: live-pop .3s cubic-bezier(.2,.8,.3,1.3); }
.live-event b { color: var(--player-color); font-size: 13px; }
.live-event i { color: var(--faint); font-style: normal; }
.live-event .live-detail { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; }
.live-event .live-detail.mono { color: var(--text); font: 13px "DM Mono", monospace; letter-spacing: .15em; }
.live-event strong { margin-left: 6px; color: var(--mint); font: 500 18px "DM Mono", monospace; }
.live-event strong.secret { color: var(--amber); }
.live-event strong.hit { color: var(--mint); }
.live-event strong.miss { color: var(--coral); }
@keyframes live-pop { from { opacity: 0; transform: translate(-50%, -8px) scale(.92); } }

@media (max-width: 760px) {
  .lobby-screen { padding: 0 14px 30px; }
  .lobby-body { padding-top: 24px; }
  .live-event { top: 120px; gap: 6px; padding: 8px 10px; }
  .live-event .live-detail { display: none; }
}

/* 싱글 인원 선택 · 상대 수에 맞춘 좌석 배치 */
.player-count { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.player-count > span { margin-right: 4px; color: var(--muted); font-size: 11px; }
.player-count button { padding: 7px 12px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.02); color: #9aa6ba; font-size: 12px; font-weight: 700; cursor: pointer; }
.player-count button small { margin-left: 3px; color: var(--faint); font-size: 10px; font-weight: 500; }
.player-count button:hover { border-color: rgba(105,224,181,.35); }
.player-count button.active { border-color: rgba(105,224,181,.6); background: var(--mint-dim); color: var(--mint); }
.player-count button.active small { color: #86d8bb; }
.opponents[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.opponents[data-count="1"] { grid-template-columns: minmax(0, 420px); justify-content: center; }
.room-size { justify-content: center; margin-top: 0; }
#start-room:disabled { background: #273143; color: #6f7b90; box-shadow: 0 6px 0 #1a2232; cursor: not-allowed; }
.room-settings { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.rs-head { display: flex; align-items: baseline; justify-content: space-between; }
.rs-head strong { font-size: 13px; }
.rs-head small { color: var(--faint); font-size: 11px; }
.rs-row { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 10px; }
.rs-row > span { color: var(--muted); font-size: 12px; }
.seg-options { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-options button { padding: 7px 11px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.02); color: #9aa6ba; font-size: 12px; font-weight: 700; cursor: pointer; }
.seg-options button small { margin-left: 3px; color: var(--faint); font-size: 10px; font-weight: 500; }
.seg-options button:hover:not(:disabled) { border-color: rgba(105,224,181,.35); }
.seg-options button.active { border-color: rgba(105,224,181,.6); background: var(--mint-dim); color: var(--mint); }
.seg-options button:disabled { cursor: default; }
.seg-options button:disabled:not(.active) { opacity: .45; }

/* 이모지 */
.my-seat { position: relative; }
.emote-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.emote-btn { display: grid; justify-items: center; gap: 2px; padding: 5px 2px 4px; border: 1px solid rgba(167,184,219,.14); border-radius: 10px; background: rgba(255,255,255,.03); color: #aab6c8; font-size: 10px; font-weight: 700; cursor: pointer; transition: transform .12s, border-color .12s; }
.emote-btn img { width: 36px; height: 36px; border-radius: 9px; object-fit: cover; }
.emote-btn:hover { transform: translateY(-2px); border-color: rgba(105,224,181,.45); color: var(--mint); }
.emote-btn:active { transform: scale(.94); }
.emote-pop { position: fixed; z-index: 60; display: grid; justify-items: center; gap: 2px; padding: 6px 6px 5px; border: 2px solid var(--mint); border-radius: 16px; background: #0f1828; box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 22px rgba(105,224,181,.3); pointer-events: none; transform: translate(-50%, -50%); animation: emote-pop 2.6s cubic-bezier(.2,.8,.3,1.2) forwards; }
.emote-pop img { width: 88px; height: 88px; border-radius: 11px; object-fit: cover; }
.emote-pop span { color: var(--mint); font-size: 12px; font-weight: 800; }
@keyframes emote-pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 16% { transform: translate(-50%, -50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -62%) scale(.95); } }
@media (max-width: 760px) { .emote-pop img { width: 64px; height: 64px; } .emote-btn img { width: 30px; height: 30px; } }

/* ───────── 1.4: 특수 카드 · 레이드 · CARD LAB ───────── */
.player-boss { --player-color: #ff8e83; --player-color-dim: rgba(255,142,131,.13); }
.tier-special { --tier: #c19aff; --tier-dim: rgba(193,154,255,.14); }
.play-card.tier-special { background: radial-gradient(circle at 50% 40%, var(--tier-dim), transparent 65%), repeating-linear-gradient(135deg, rgba(193,154,255,.05) 0 6px, transparent 6px 12px), linear-gradient(160deg, #241d3d, #12162a); }
.play-card.sealed { filter: grayscale(.9) brightness(.6) !important; }
.seal-mark { position: absolute; top: 50%; left: 50%; padding: 3px 8px; border: 2px solid var(--coral); border-radius: 6px; background: rgba(20,10,14,.85); color: var(--coral); font: 700 11px "Noto Sans KR", sans-serif; transform: translate(-50%, -50%) rotate(-12deg); }
.feed-token.tier-special { border-color: rgba(193,154,255,.5); color: #d4bcff; }
.go-button.special { background: linear-gradient(180deg, #d6bdff, #a57cf2); color: #1d0c3a; box-shadow: 0 6px 0 #6a4aa8, 0 12px 26px rgba(165,124,242,.25); }
.special-note { display: grid; flex: 1; align-content: center; gap: 2px; padding: 8px 12px; border: 1px solid rgba(193,154,255,.3); border-radius: 12px; background: rgba(193,154,255,.06); }
.special-note b { color: #d4bcff; font: 600 11px "DM Mono", monospace; letter-spacing: .1em; }
.special-note small { color: var(--muted); font-size: 10px; }
.rival-pick, .value-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.value-pick { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.rival-option { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.02); color: var(--player-color); font-weight: 700; cursor: pointer; }
.rival-option.active { border-color: var(--player-color); background: var(--player-color-dim); }
.result-readout.blocked { border-color: rgba(255,142,131,.4); }
.result-readout.blocked strong { color: var(--coral); }
.extra-secret { color: var(--amber); font: 600 11px "DM Mono", monospace; font-style: normal; }
.reward-line { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid rgba(242,200,121,.3); border-radius: 10px; background: rgba(242,200,121,.07); }
.reward-line b { color: var(--amber); font: 600 16px "DM Mono", monospace; }
.reward-line small { color: var(--muted); font-size: 11px; }
.ranking-row.boss-row { border-color: rgba(255,142,131,.3); background: rgba(255,142,131,.05); }
.coming-tag.credit { border-color: rgba(242,200,121,.35); color: var(--amber); }

/* 레이드 */
.raid-header { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid rgba(255,142,131,.35); border-radius: 16px; background: radial-gradient(ellipse at 15% 50%, rgba(255,142,131,.14), transparent 60%), rgba(20,12,20,.8); }
.boss-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.boss-emblem { display: grid; width: 46px; height: 46px; flex: 0 0 auto; place-items: center; border: 2px solid var(--coral); border-radius: 12px; color: var(--coral); font-size: 24px; box-shadow: 0 0 24px rgba(255,142,131,.35); animation: danger 2.4s ease-in-out infinite; }
.boss-id strong { display: block; color: #ffd2cc; font-size: 14px; letter-spacing: .02em; }
.boss-id small { color: var(--muted); font-size: 11px; }
.boss-hp, .boss-stat { display: grid; gap: 4px; }
.boss-hp span, .boss-stat span { color: var(--muted); font-size: 10px; }
.boss-hp b, .boss-stat b { font: 500 15px "DM Mono", monospace; }
.boss-stat b.warn { color: var(--coral); }
.hp-track { display: flex; gap: 4px; }
.hp-track i { flex: 1; height: 8px; border-radius: 3px; background: rgba(255,142,131,.15); }
.hp-track i.on { background: linear-gradient(90deg, #ff8e83, #ffb3a9); box-shadow: 0 0 8px rgba(255,142,131,.5); }
.opponents.raid .seat { background: linear-gradient(160deg, rgba(48,24,30,.85), rgba(16,18,32,.94)); }
.block-seat .seat-avatar { border-radius: 10px; }
.block-probes { color: var(--muted); font: 11px "DM Mono", monospace; }
.shield { color: var(--coral); font-size: 16px; }
.shield.broken { color: var(--faint); }
.rivals { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rival { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 12px; background: rgba(13,20,34,.85); }
.rival .seat-avatar { width: 28px; height: 28px; font-size: 11px; }
.rival.is-current { border-color: color-mix(in srgb, var(--player-color) 55%, transparent); }
.rival-info { display: grid; }
.rival-info strong { font-size: 12px; }
.rival-info small { color: var(--faint); font-size: 9px; }
.rival-cracks { color: var(--coral); font: 11px "DM Mono", monospace; }
.raid-me { display: grid; grid-template-columns: auto auto auto auto; align-items: baseline; justify-content: start; gap: 6px 10px; padding: 10px 12px; border: 1px solid rgba(255,142,131,.2); border-radius: 10px; background: rgba(255,142,131,.05); }
.raid-me span { color: var(--muted); font-size: 11px; }
.raid-me b { color: var(--coral); font: 500 20px "DM Mono", monospace; }

/* CARD LAB */
.deck-screen { max-width: 1240px; min-height: 100vh; margin: auto; padding: 0 38px 40px; }
.wallet { display: flex; gap: 14px; color: var(--muted); font-size: 12px; }
.wallet b { color: var(--amber); font: 600 15px "DM Mono", monospace; }
.deck-tabs { display: flex; gap: 8px; margin: 20px 0 18px; }
.deck-tabs button { padding: 10px 18px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.02); color: #9aa6ba; font-size: 13px; font-weight: 700; cursor: pointer; }
.deck-tabs button.active { border-color: rgba(105,224,181,.6); background: var(--mint-dim); color: var(--mint); }
.deck-footnote { margin: 24px 0 0; color: var(--faint); font-size: 11px; text-align: center; }
.lab-card { width: 100px; margin: 0; transform: none; }
.lab-card.rarity-rare { box-shadow: 0 0 0 1px rgba(121,170,255,.5), 0 0 18px rgba(121,170,255,.2); }
.lab-card.rarity-epic { box-shadow: 0 0 0 1px rgba(242,200,121,.7), 0 0 24px rgba(242,200,121,.3); }
.pack-stage { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px; padding: 18px; }
.booster { display: grid; justify-items: center; align-content: center; gap: 6px; width: 190px; aspect-ratio: 5 / 7; border: 2px solid rgba(105,224,181,.5); border-radius: 18px; background: radial-gradient(circle at 50% 30%, rgba(105,224,181,.25), transparent 60%), repeating-linear-gradient(45deg, rgba(105,224,181,.06) 0 6px, transparent 6px 12px), linear-gradient(160deg, #183048, #0c1424); box-shadow: 0 20px 50px rgba(0,0,0,.45), 0 0 40px rgba(105,224,181,.15); animation: float 3s ease-in-out infinite; }
.booster span { color: var(--muted); font: 10px "DM Mono", monospace; letter-spacing: .2em; }
.booster b { color: var(--mint); font: 800 28px "Manrope", sans-serif; letter-spacing: .08em; }
.booster small, .booster i { color: var(--muted); font-size: 10px; font-style: normal; text-align: center; }
.booster.empty { opacity: .45; animation: none; }
.pack-actions { display: grid; gap: 10px; justify-items: start; }
.pack-meta { margin: 0; color: var(--muted); font-size: 12px; }
.pack-meta b { color: var(--amber); }
.pack-hint { color: var(--faint); font-size: 12px; text-align: center; }
.pack-reveal { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 10px 0 20px; perspective: 900px; }
.reveal-slot { width: 120px; }
.reveal-inner { position: relative; display: grid; transform-style: preserve-3d; animation: flip-in .7s calc(.35s + var(--i) * .26s) both; }
.reveal-back, .reveal-front { grid-area: 1 / 1; backface-visibility: hidden; }
.reveal-back { display: grid; aspect-ratio: 5 / 7; place-items: center; border: 2px solid rgba(105,224,181,.4); border-radius: 12px; background: linear-gradient(160deg, #183048, #0c1424); color: var(--mint); font-size: 30px; transform: rotateY(180deg); }
.reveal-front { display: grid; justify-items: center; gap: 6px; }
.reveal-front .lab-card { width: 120px; }
.reveal-tag { font: 600 10px "Noto Sans KR", sans-serif; color: var(--muted); }
.reveal-tag.rarity-rare { color: #9fc2ff; }
.reveal-tag.rarity-epic { color: var(--amber); }
.collection-group { margin-bottom: 22px; }
.collection-group h3, .deck-pool h3, .deck-current h3 { margin: 0 0 12px; font-size: 15px; }
.collection-group h3 small, .deck-pool h3 small, .deck-current h3 small { margin-left: 6px; color: var(--faint); font-size: 11px; font-weight: 500; }
.collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.collection-item { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.collection-item.missing .lab-card { filter: grayscale(1) brightness(.5); }
.owned-count { position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.55); color: var(--text); font: 10px "DM Mono", monospace; }
.collection-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font: 10px "DM Mono", monospace; }
.collection-text { margin: 0; color: var(--faint); font-size: 10px; line-height: 1.5; text-align: center; word-break: keep-all; }
.craft-btn { padding: 3px 8px; border: 1px solid rgba(242,200,121,.4); border-radius: 6px; background: rgba(242,200,121,.08); color: var(--amber); font-size: 10px; cursor: pointer; }
.craft-btn:disabled { opacity: .4; cursor: not-allowed; }
.deck-use { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.deck-use > span { font-size: 13px; font-weight: 700; }
.deck-use small { color: var(--muted); font-size: 11px; }
.deck-editor { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.deck-pool, .deck-current { padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.deck-current { position: sticky; top: 12px; }
.pool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.pool-card { position: relative; display: grid; justify-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pool-card .lab-card { width: 92px; }
.pool-card:hover:not(:disabled) .lab-card { transform: translateY(-3px); }
.pool-card:disabled { opacity: .35; cursor: not-allowed; }
.pool-left { position: absolute; top: -6px; right: 0; padding: 1px 6px; border-radius: 6px; background: var(--mint); color: #08231b; font: 700 10px "DM Mono", monospace; }
.pool-points { margin-top: 4px; color: var(--muted); font: 10px "DM Mono", monospace; }
.deck-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.gauge { position: relative; display: grid; gap: 2px; overflow: hidden; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: #0b1220; }
.gauge span { color: var(--muted); font-size: 10px; }
.gauge b { font: 500 20px "DM Mono", monospace; }
.gauge small { color: var(--faint); font-size: 10px; }
.gauge i { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--mint); }
.gauge.bad { border-color: rgba(255,142,131,.5); }
.gauge.bad b { color: var(--coral); }
.gauge.bad i { background: var(--coral); }
.deck-list { display: grid; gap: 4px; max-height: 420px; overflow-y: auto; }
.deck-row-item { display: grid; grid-template-columns: 52px 1fr auto auto; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid rgba(167,184,219,.1); border-radius: 8px; background: rgba(5,10,18,.3); color: var(--text); font-size: 12px; text-align: left; cursor: pointer; }
.deck-row-item:hover { border-color: rgba(255,142,131,.45); }
.deck-row-token { color: var(--tier); font: 500 12px "DM Mono", monospace; }
.deck-row-count, .deck-row-points { color: var(--muted); font: 11px "DM Mono", monospace; }
.deck-problem { margin: 10px 0 0; color: var(--coral); font-size: 12px; }
.deck-problem.ok { color: var(--mint); }
.deck-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; }
@keyframes flip-in { from { transform: rotateY(180deg) scale(.85); } to { transform: rotateY(0) scale(1); } }
@keyframes float { 50% { transform: translateY(-6px); } }

@media (max-width: 760px) {
  .raid-header { grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 10px; }
  .boss-id { grid-column: 1 / -1; }
  .deck-screen { padding: 0 12px 30px; }
  .deck-editor { grid-template-columns: 1fr; }
  .deck-current { position: static; }
  .value-pick { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .reveal-slot, .reveal-front .lab-card { width: 96px; }
}

/* ───────── 튜토리얼 · 도움말 ───────── */
.tutorial-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 14px; border: 1px solid rgba(242,200,121,.45); border-radius: 12px; background: rgba(242,200,121,.08); color: #f5dfae; font-size: 13px; cursor: pointer; }
.tutorial-cta b { color: var(--amber); }
.tutorial-cta:hover { background: rgba(242,200,121,.16); }
.tut-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px rgba(242,200,121,.8); animation: blink 1.2s infinite; }
.tutorial-cta.done { border-color: var(--border); background: rgba(255,255,255,.02); color: var(--muted); }
.tutorial-cta.done .tut-dot { display: none; }
.tutorial-cta.done b { color: var(--muted); }
.start-top .help-button { margin-left: 14px; font: 10px "DM Mono", monospace; letter-spacing: .1em; }
.tutorial-layer { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.tut-block { position: fixed; background: rgba(3,6,12,.66); pointer-events: auto; transition: all .25s ease; }
.tut-hole { position: fixed; border: 2px solid var(--amber); border-radius: 14px; box-shadow: 0 0 0 4px rgba(242,200,121,.18), 0 0 30px rgba(242,200,121,.35); pointer-events: none; transition: all .25s ease; animation: tut-pulse 1.6s ease-in-out infinite; }
.tut-hole.passive { pointer-events: auto; }
.tut-bubble { position: fixed; z-index: 101; padding: 14px 16px; border: 1px solid rgba(242,200,121,.5); border-radius: 14px; background: #141d30; color: var(--text); box-shadow: 0 18px 50px rgba(0,0,0,.55); pointer-events: auto; transition: left .25s ease, top .25s ease; }
.tut-bubble p { margin: 8px 0 0; font-size: 13px; line-height: 1.7; word-break: keep-all; }
.tut-progress { display: flex; align-items: center; justify-content: space-between; color: var(--amber); font: 10px "DM Mono", monospace; letter-spacing: .1em; }
.tut-skip { border: 0; background: transparent; color: var(--faint); font-size: 11px; cursor: pointer; text-decoration: underline; }
.tut-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.tut-wait { color: var(--amber) !important; font-size: 11px !important; }
@keyframes tut-pulse { 50% { box-shadow: 0 0 0 7px rgba(242,200,121,.1), 0 0 40px rgba(242,200,121,.45); } }
.modal-card:has(.help-modal) { width: min(760px, 100%); max-height: min(90vh, 820px); overflow-y: auto; }
.help-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.help-tabs button { padding: 6px 11px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.02); color: #9aa6ba; font-size: 12px; font-weight: 700; cursor: pointer; }
.help-tabs button.active { border-color: rgba(105,224,181,.6); background: var(--mint-dim); color: var(--mint); }
.help-body { color: #c9d2e0; font-size: 13px; line-height: 1.75; word-break: keep-all; }
.help-body p { margin: 0 0 10px; }
.help-body ul { margin: 0 0 10px; padding-left: 18px; }
.help-body b { color: var(--text); }
.help-table-wrap { overflow-x: auto; }
.help-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.help-table th { color: var(--muted); font-weight: 500; text-align: left; padding: 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.help-table td { padding: 7px 6px; border-bottom: 1px solid rgba(167,184,219,.06); vertical-align: top; }
.help-table td small { color: var(--faint); }
.help-table .num { text-align: right; font-family: "DM Mono", monospace; }
kbd { padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: #0b1220; font: 11px "DM Mono", monospace; }
.aim-count { margin-left: 6px; color: var(--mint); font: 600 12px "DM Mono", monospace; }
.aim-count.short { color: var(--amber); }
.aim-hint { margin-left: 8px; color: var(--faint); font-size: 10px; }
.deck-mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.deck-mode-tabs button { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.02); color: #9aa6ba; font-size: 14px; font-weight: 800; text-align: left; cursor: pointer; }
.deck-mode-tabs button small { color: var(--faint); font-size: 11px; font-weight: 500; }
.deck-mode-tabs button.active { border-color: rgba(105,224,181,.6); background: var(--mint-dim); color: var(--mint); }
.deck-mode-tabs button[data-deck-mode="raid"].active { border-color: rgba(255,142,131,.6); background: rgba(255,142,131,.1); color: var(--coral); }
.pool-card.banned .pool-left { background: var(--coral); color: #2c0906; }
.replay-button.skip-button { border-color: rgba(242,200,121,.45); background: rgba(242,200,121,.08); color: var(--amber); }

/* 공개 방 */
.visibility-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.visibility-pick > span { margin-right: 4px; color: var(--muted); font-size: 12px; }
.visibility-pick button { padding: 7px 12px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.02); color: #9aa6ba; font-size: 12px; font-weight: 700; cursor: pointer; }
.visibility-pick button small { margin-left: 4px; color: var(--faint); font-size: 10px; font-weight: 500; }
.visibility-pick button.active { border-color: rgba(105,224,181,.6); background: var(--mint-dim); color: var(--mint); }
.room-list-panel { display: grid; gap: 10px; margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.room-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.room-list-head h2 { margin: 0; font-size: 16px; }
.room-list-head .eyebrow { margin-bottom: 4px; }
.room-list-tools { display: flex; align-items: center; gap: 10px; }
.room-list-tools .icon-button span { display: inline; }
.room-list-tools .icon-button:disabled { opacity: .5; cursor: not-allowed; }
.room-list { display: grid; gap: 6px; max-height: 340px; overflow-y: auto; }
.room-list-empty { margin: 6px 0; color: var(--faint); font-size: 12px; text-align: center; }
.room-item { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(167,184,219,.1); border-radius: 12px; background: rgba(5,10,18,.3); }
.room-item.full { opacity: .55; }
.room-item-main { display: grid; gap: 2px; min-width: 0; }
.room-item-main strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.room-item-main small { color: var(--faint); font: 11px "DM Mono", monospace; }
.room-tags { display: flex; gap: 4px; margin-top: 2px; }
.room-tag { padding: 1px 6px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); font-size: 10px; }
.room-tag.raid { border-color: rgba(255,142,131,.4); color: var(--coral); }
.room-item-count { color: var(--muted); font: 12px "DM Mono", monospace; }
.room-item-count b { color: var(--text); font-size: 15px; }
.room-item .join-button { min-height: 36px; padding: 0 14px; }
.room-item .join-button:disabled { opacity: .5; cursor: not-allowed; }

/* 음량 바 */
.sound-control { display: inline-flex; align-items: center; gap: 8px; padding-right: 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.02); }
.sound-control .sound-toggle { border: 0; background: transparent; }
.volume-slider { --fill: 80%; width: 84px; height: 4px; margin: 0; border-radius: 4px; background: linear-gradient(90deg, var(--mint) var(--fill), rgba(167,184,219,.22) var(--fill)); cursor: pointer; appearance: none; -webkit-appearance: none; }
.volume-slider::-webkit-slider-thumb { width: 14px; height: 14px; border: 2px solid var(--bg); border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(105,224,181,.5); -webkit-appearance: none; }
.volume-slider::-moz-range-thumb { width: 12px; height: 12px; border: 2px solid var(--bg); border-radius: 50%; background: var(--mint); }
.volume-slider:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
@media (max-width: 640px) { .volume-slider { width: 60px; } }

/* 대상 기록 창 (게임을 막지 않는 떠 있는 창) */
.records-window { position: fixed; z-index: 25; right: 24px; bottom: 24px; display: flex; flex-direction: column; width: min(380px, calc(100vw - 32px)); max-height: min(70vh, 620px); border: 1px solid rgba(167,184,219,.24); border-radius: 14px; background: #131d30; box-shadow: 0 18px 60px rgba(0,0,0,.55); animation: rw-in .18s ease; }
@keyframes rw-in { from { opacity: 0; transform: translateY(8px); } }
.rw-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 8px 10px; border-bottom: 1px solid var(--border); cursor: grab; touch-action: none; user-select: none; }
.rw-head:active { cursor: grabbing; }
.rw-head > div { flex: 1; min-width: 0; }
.rw-head h2 { margin: 0; font-size: 15px; }
.rw-head .eyebrow { margin: 0 0 2px; }
.rw-grip { color: var(--faint); font-size: 14px; letter-spacing: -2px; }
.rw-tabs { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 12px 0; }
.rw-tab { padding: 4px 9px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.03); color: var(--muted); font-size: 11px; font-weight: 700; cursor: pointer; }
.rw-tab small { margin-left: 3px; color: var(--faint); font: 10px "DM Mono", monospace; }
.rw-tab.active { border-color: color-mix(in srgb, var(--player-color, var(--mint)) 60%, transparent); background: var(--player-color-dim, var(--mint-dim)); color: var(--player-color, var(--mint)); }
.rw-body { display: flex; flex-direction: column; min-height: 0; flex: 1; padding: 10px 12px 0; }
.rw-body .record-attackers { flex: 0 0 auto; }
.rw-body .record-list { flex: 1; max-height: none; min-height: 60px; }
.rw-item.fresh > .feed-row { animation: rw-fresh 1.6s ease; }
@keyframes rw-fresh { from { background: rgba(105,224,181,.22); } to { background: transparent; } }
.rw-item.open > .feed-row { background: rgba(255,255,255,.04); }
.rw-detail { margin: 0 4px 8px 32px; padding: 8px 10px; border-left: 2px solid var(--mint); border-radius: 0 8px 8px 0; background: rgba(5,10,18,.45); color: #d6deea; font-size: 12px; line-height: 1.55; }
.rw-result { display: block; margin-top: 4px; color: var(--mint); font: 600 13px "DM Mono", monospace; }
.rw-foot { margin: 0; padding: 8px 12px 10px; color: var(--faint); font-size: 10px; }
@media (max-width: 640px) {
  .records-window { right: 8px !important; bottom: 8px !important; left: 8px !important; top: auto !important; width: auto; max-height: 48vh; }
  .rw-head { cursor: default; }
  .rw-grip { display: none; }
}

/* 결과 창: 좁은 화면에서 글자가 중간에 끊기지 않게 */
.reward-line b { flex: 0 0 auto; white-space: nowrap; }
.modal-actions > * { white-space: nowrap; }
.modal-actions .link-button { display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 520px) {
  .reward-line { flex-direction: column; align-items: flex-start; gap: 3px; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions > * { flex: 1 1 auto; }
  .modal-actions > .submit-button { flex-basis: 100%; order: -1; }
}
@media (max-width: 520px) {
  .sound-control { gap: 4px; padding-right: 8px; }
  .sound-control .sound-toggle span { display: none; }
  .volume-slider { width: 56px; }
  .start-top { flex-wrap: wrap; row-gap: 8px; }
}

/* ───────── 캠페인 ───────── */
.coming-tag.new { border-color: rgba(10,38,29,.35); color: #0a261d; background: rgba(255,255,255,.25); }
.campaign-entry { gap: 10px; }
.campaign-screen { min-height: 100vh; padding: 18px max(3vw, 16px) 40px; overflow-x: clip; background: var(--bg); }
.camp-body { max-width: 1440px; margin: 0 auto; }
.mood-slate { --mood: #8fb3d9; --mood-dim: rgba(143,179,217,.12); }
.mood-teal { --mood: #4fd6c8; --mood-dim: rgba(79,214,200,.12); }
.mood-night { --mood: #ff6f6f; --mood-dim: rgba(255,111,111,.12); }
.mood-glitch { --mood: #b38cff; --mood-dim: rgba(179,140,255,.14); }
.mood-hospital { --mood: #ff8e83; --mood-dim: rgba(255,142,131,.12); }

/* 사건 목록 */
.camp-hero { position: relative; margin: 18px 0 22px; padding: 26px 28px; overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: radial-gradient(ellipse at 85% 20%, rgba(179,140,255,.16), transparent 50%), linear-gradient(140deg, #111a2c, #0c1220); }
.camp-hero h1 { margin: 4px 0 8px; font: 800 44px "DM Mono", monospace; letter-spacing: .12em; }
.camp-hero p { max-width: 640px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.camp-progress { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; color: var(--muted); font-size: 12px; }
.camp-progress b { color: var(--amber); font: 700 24px "DM Mono", monospace; }
.star-row { display: inline-flex; gap: 2px; margin-left: 6px; }
.star-row i { color: rgba(167,184,219,.25); font-style: normal; }
.star-row i.on { color: var(--amber); text-shadow: 0 0 10px rgba(242,200,121,.5); }
.star-row.big i { font-size: 34px; }
.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.case-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--mood) 28%, transparent); border-radius: 16px; background: linear-gradient(170deg, var(--mood-dim), transparent 60%), #0f1728; }
.case-card::before { position: absolute; inset: 0 0 auto; height: 3px; content: ""; background: var(--mood); opacity: .7; }
.case-card.locked { filter: grayscale(.9); opacity: .55; }
.case-card h2 { margin: 0; font-size: 19px; }
.case-num { display: flex; align-items: center; gap: 8px; color: var(--mood); font: 600 12px "DM Mono", monospace; letter-spacing: .14em; }
.case-num span { padding: 2px 6px; border: 1px solid color-mix(in srgb, var(--mood) 35%, transparent); border-radius: 5px; font-size: 9px; }
.case-learn { flex: 0 0 auto; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.case-stars { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; flex: 1; }
.case-stars li, .camp-goals li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.case-stars i, .camp-goals i { color: rgba(167,184,219,.3); font-style: normal; }
.case-stars li.on i, .camp-goals li.on i, .camp-goals li.owned i { color: var(--amber); }
.case-stars small, .camp-goals small { color: var(--faint); font: 10px "DM Mono", monospace; }
.case-stars li.on small { color: var(--amber); }
.case-go { justify-content: space-between; width: 100%; min-height: 46px; margin-top: 4px; }
.case-go:disabled { cursor: not-allowed; opacity: .6; }

/* 대화 장면 */
#scene-root:empty { display: none; }
.scene { position: fixed; z-index: 80; inset: 0; display: grid; grid-template-rows: 1fr auto; padding: max(4vh, 16px) max(6vw, 16px); background: radial-gradient(ellipse at 50% 30%, var(--mood-dim), transparent 60%), #05080f; cursor: pointer; animation: rw-in .3s ease; }
.scene-grain { position: absolute; inset: 0; pointer-events: none; opacity: .08; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.4) 0 1px, transparent 1px 3px); }
.scene.mood-glitch .scene-stage { animation: glitch-shift 3.2s infinite steps(1); }
@keyframes glitch-shift { 0%, 92%, 100% { transform: none; } 93% { transform: translateX(-3px) skewX(-2deg); } 95% { transform: translateX(4px); } 97% { transform: translateX(-1px) skewX(1deg); } }
.scene-stage { display: grid; place-items: center; min-height: 0; }
.scene-screen { max-width: min(760px, 100%); margin: 0; padding: 22px 26px; border: 1px solid color-mix(in srgb, var(--mood) 45%, transparent); border-radius: 10px; background: rgba(5,10,18,.85); color: var(--mood); font: 500 clamp(13px, 2.2vw, 20px)/1.6 "DM Mono", monospace; letter-spacing: .06em; white-space: pre-wrap; box-shadow: 0 0 40px color-mix(in srgb, var(--mood) 18%, transparent); }
.scene-screen.glitch { color: #e6d6ff; text-shadow: 2px 0 rgba(255,80,120,.7), -2px 0 rgba(80,200,255,.7); animation: glitch-shift 1.6s infinite steps(1); }
.scene-box { position: relative; width: min(860px, 100%); min-height: 150px; margin: 0 auto; padding: 18px 22px 30px; border: 1px solid rgba(167,184,219,.22); border-radius: 16px; background: rgba(14,20,34,.94); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.scene-speaker { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.scene-speaker b { display: block; font-size: 15px; }
.scene-speaker small { color: var(--faint); font-size: 11px; }
.scene-text { margin: 0; color: #e8eef8; font-size: clamp(15px, 2vw, 18px); line-height: 1.7; white-space: pre-wrap; }
.scene-text.note { color: var(--muted); font-style: italic; }
.scene-text.who-echo { color: #d9c8ff; letter-spacing: .04em; text-shadow: 1px 0 rgba(255,80,120,.5), -1px 0 rgba(80,200,255,.5); }
.scene-text.who-nova { color: #cfe3ff; font-family: "DM Mono", monospace; }
.scene-text.who-dohyeon { color: #e8dcae; }
.scene-hint { position: absolute; right: 18px; bottom: 8px; margin: 0; color: var(--faint); font: 11px "DM Mono", monospace; animation: blink 1.4s infinite; }
.scene-skip { position: absolute; top: 14px; right: 16px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.04); color: var(--muted); font-size: 12px; cursor: pointer; }
.scene-choices { display: grid; gap: 8px; }
.scene-choices button { padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--mood) 40%, transparent); border-radius: 10px; background: var(--mood-dim); color: var(--text); font-size: 15px; text-align: left; cursor: pointer; }
.scene-choices button:hover { border-color: var(--mood); }
.portrait { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border: 2px solid var(--pc, #8fb3d9); border-radius: 50%; background: color-mix(in srgb, var(--pc, #8fb3d9) 16%, #0b1020); color: var(--pc, #8fb3d9); font: 800 19px "Noto Sans KR", sans-serif; }
.p-me { --pc: #e4ebf7; } .p-seorin { --pc: #9aa6ba; } .p-taeo { --pc: #f2c879; } .p-mira { --pc: #4fd6c8; } .p-dohyeon { --pc: #d8c58a; } .p-ian { --pc: #ff8e83; }
.p-nova { --pc: #79aaff; grid-template-columns: repeat(2, 8px); gap: 6px; place-content: center; }
.p-nova i { width: 8px; height: 8px; border-radius: 50%; background: #cfe3ff; box-shadow: 0 0 8px #79aaff; animation: blink 2s infinite; }
.p-nova i:nth-child(2) { animation-delay: .3s; } .p-nova i:nth-child(3) { animation-delay: .6s; } .p-nova i:nth-child(4) { animation-delay: .9s; }
.p-echo { --pc: #b38cff; display: flex; gap: 3px; align-items: center; justify-content: center; background: #050508; }
.p-echo i { width: 3px; height: 10px; background: #d9c8ff; animation: wave .9s infinite ease-in-out; }
.p-echo i:nth-child(2) { animation-delay: .15s; } .p-echo i:nth-child(3) { animation-delay: .3s; } .p-echo i:nth-child(4) { animation-delay: .45s; } .p-echo i:nth-child(5) { animation-delay: .6s; }
@keyframes wave { 50% { height: 26px; } }

/* 사건 플레이 */
.camp-play { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; margin-top: 14px; }
.camp-main { display: grid; gap: 14px; min-width: 0; }
.camp-side { position: sticky; top: 12px; display: grid; gap: 12px; }
.camp-brief { padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--mood) 30%, transparent); border-radius: 16px; background: linear-gradient(160deg, var(--mood-dim), transparent 70%), #0f1728; }
.camp-brief-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.camp-brief-head h2 { flex: 1; margin: 0; font-size: 20px; }
.camp-brief > p { margin: 8px 0 12px; color: #d6deea; font-size: 13px; line-height: 1.6; }
.camp-meters { display: flex; flex-wrap: wrap; gap: 8px; }
.meter { position: relative; display: grid; min-width: 120px; gap: 2px; padding: 8px 12px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: rgba(5,10,18,.35); }
.meter span { color: var(--faint); font-size: 10px; }
.meter b { font: 700 20px "DM Mono", monospace; }
.meter small { color: var(--muted); font-size: 10px; }
.meter em { max-width: 320px; color: var(--muted); font-size: 11px; font-style: normal; }
.meter > i { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--mood); }
.meter.bad b { color: var(--coral); }
.meter.mira b { color: #4fd6c8; }
.meter.clock b { color: var(--mood); letter-spacing: .06em; }
.track-line { display: flex; align-items: center; gap: 6px; margin: 4px 0 2px; }
.track-line i { display: grid; width: 34px; height: 22px; place-items: center; border: 1px solid var(--border); border-radius: 6px; color: var(--faint); font: 10px "DM Mono", monospace; font-style: normal; }
.track-line i.here { border-color: var(--mood); color: var(--mood); box-shadow: 0 0 12px var(--mood-dim); }
.track-line i.passed { text-decoration: line-through; opacity: .5; }
.track-line i.cracked { border-color: var(--mint); color: var(--mint); }
.track-line i.end { border-style: dashed; }
.camp-nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.camp-node { position: relative; display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: #101a2c; transition: border-color .2s, transform .2s; }
.camp-node[role=button] { cursor: pointer; }
.camp-node[role=button]:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--mood) 40%, transparent); }
.camp-node.selected { border-color: var(--mood); box-shadow: 0 0 0 1px var(--mood-dim), 0 0 26px var(--mood-dim); }
.camp-node header { display: flex; justify-content: space-between; gap: 8px; }
.camp-node header strong { display: block; font-size: 14px; }
.camp-node header small { color: var(--faint); font-size: 11px; }
.node-status { align-self: start; padding: 2px 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.camp-node .lock-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.camp-node .lock-slot { height: 46px; }
.camp-node footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; }
.node-cands { color: var(--muted); }
.node-cands b { color: var(--text); font-family: "DM Mono", monospace; }
.node-timer { padding: 2px 7px; border-radius: 6px; background: rgba(242,200,121,.1); color: var(--amber); }
.node-timer.warn { background: rgba(255,142,131,.16); color: var(--coral); animation: blink 1s infinite; }
.node-frag { padding: 2px 7px; border-radius: 6px; background: rgba(179,140,255,.12); color: #d4bcff; }
.sig { padding: 2px 7px; border-radius: 6px; font-weight: 700; }
.sig.unknown { background: rgba(167,184,219,.1); color: var(--muted); }
.sig.safe { background: rgba(105,224,181,.14); color: var(--mint); }
.sig.danger { background: rgba(255,142,131,.16); color: var(--coral); }
.camp-node.status-cracked, .camp-node.status-cancelled { border-color: rgba(105,224,181,.45); }
.camp-node.status-cancelled .node-status, .camp-node.status-cracked .node-status { border-color: rgba(105,224,181,.5); color: var(--mint); }
.camp-node.status-triggered, .camp-node.status-interfered { border-color: rgba(255,142,131,.5); }
.camp-node.status-triggered .node-status, .camp-node.status-interfered .node-status { color: var(--coral); }
.camp-node.status-passed, .camp-node.status-locked, .camp-node.status-executed { opacity: .55; }
.node-flash { padding: 5px 9px; border-radius: 8px; background: #1b2a44; color: var(--text); font: 600 11px "DM Mono", monospace; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.4); animation: rw-in .2s ease; }
.node-flash.hit { background: rgba(105,224,181,.9); color: #062016; }
.node-flash.miss { background: rgba(255,142,131,.9); color: #2c0906; animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.camp-action { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 14px; align-items: end; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: #0f1728; }
.camp-action.idle { opacity: .7; }
.camp-hand { display: flex; justify-content: center; padding-top: 26px; }
.camp-hand .play-card { margin: 0 3px; }
.pc-cost { position: absolute; top: -9px; right: -6px; padding: 2px 6px; border-radius: 6px; background: var(--amber); color: #2a1e05; font: 700 10px "DM Mono", monospace; }
.camp-controls { display: grid; gap: 12px; }
.camp-scan { display: grid; gap: 8px; }
.camp-digits { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.camp-digits span { width: 100%; color: var(--muted); font-size: 11px; }
.camp-digits button, .guess-slots button, .keypad button { min-width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.03); color: var(--text); font: 600 14px "DM Mono", monospace; cursor: pointer; }
.camp-digits button.active, .guess-slots button.active { border-color: var(--mood); background: var(--mood-dim); color: var(--mood); }
.camp-guess { display: grid; gap: 7px; padding-top: 10px; border-top: 1px solid var(--border); }
.camp-guess > span { color: var(--muted); font-size: 11px; }
.guess-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.guess-slots button { height: 42px; font-size: 18px; }
.keypad { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.keypad button { min-width: 0; height: 32px; padding: 0; }
.camp-guess .submit-button.guess { background: var(--coral); border-color: var(--coral); color: #2c0906; }
.camp-guess .submit-button:disabled, .camp-scan .submit-button:disabled { opacity: .45; cursor: not-allowed; }
.camp-goals { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.camp-goals li.fresh { color: var(--text); }
.camp-goals li.fresh small { color: var(--amber); }
.camp-goals.result { margin-bottom: 12px; }
.result-stars { display: grid; place-items: center; margin: 4px 0 10px; }
.camp-notebook { margin-top: 10px; }
.camp-notebook .digit { cursor: default; }
.camp-clues { display: grid; gap: 4px; max-height: 190px; margin: 10px 0 0; padding: 0; overflow-y: auto; list-style: none; font-size: 12px; }
.camp-clues li { display: flex; gap: 6px; align-items: baseline; color: #d6deea; }
.camp-clues li span { flex: 0 0 auto; padding: 0 5px; border-radius: 4px; background: rgba(167,184,219,.1); color: var(--muted); font-size: 10px; }
.camp-clues li.by-mira span { background: rgba(79,214,200,.15); color: #4fd6c8; }
.camp-clues li.by-fragment span { background: rgba(179,140,255,.15); color: #d4bcff; }
.camp-clues li.corrupt { color: var(--faint); }
.camp-clues li.corrupt em { color: #d4bcff; font-style: normal; }
.camp-clues li.empty { color: var(--faint); }
.camp-log { display: grid; gap: 5px; max-height: 260px; margin: 10px 0 0; padding: 0; overflow-y: auto; list-style: none; font-size: 12px; }
.camp-log li { padding: 5px 8px; border-left: 2px solid var(--border); color: #c9d2e0; }
.camp-log li.by-mira { border-color: #4fd6c8; }
.camp-log li.log-crack, .camp-log li.log-epilogue { border-color: var(--mint); color: var(--mint); }
.camp-log li.log-harm, .camp-log li.log-pass { border-color: var(--coral); color: var(--coral); }
.verdict-options { display: grid; gap: 8px; margin-top: 14px; }
.verdict-options button { min-height: 46px; font-size: 13px; text-align: left; }
@media (max-width: 1100px) {
  .camp-play { grid-template-columns: 1fr; }
  .camp-side { position: static; grid-template-columns: 1fr 1fr; }
  .camp-side .activity-panel { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .camp-action { grid-template-columns: 1fr; }
  .camp-side { grid-template-columns: 1fr; }
  .camp-hero h1 { font-size: 34px; }
  .camp-hand { flex-wrap: wrap; gap: 14px 0; }
  .camp-hand .play-card { width: 72px; padding: 6px; margin: 0 2px; }
  .camp-action { padding: 12px; }
  .camp-nodes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .camp-node .lock-slot { height: 38px; }
  .scene-box { padding: 14px 16px 28px; }
  .portrait { width: 40px; height: 40px; font-size: 16px; }
}

/* 대화 장면 무대: 배경 · 스탠딩 · AI */
.scene-bg { position: absolute; inset: 0; background: center / cover no-repeat; opacity: .55; filter: saturate(.85) brightness(.75); transition: background-image .6s ease; }
.scene-bg::after { position: absolute; inset: 0; pointer-events: none; content: ""; background: linear-gradient(180deg, rgba(5,8,15,.35), transparent 30%, rgba(5,8,15,.55) 75%, rgba(5,8,15,.9)), radial-gradient(ellipse at 50% 30%, var(--mood-dim), transparent 60%); }
.scene > * { position: relative; z-index: 1; }
.scene > .scene-bg, .scene > .scene-cast, .scene > .scene-ai, .scene > .scene-grain { position: absolute; z-index: 0; }
.scene-skip { position: absolute !important; z-index: 3 !important; }
.scene-box, .scene-stage { z-index: 2 !important; }
.scene-cast { inset: 0; pointer-events: none; }
.cast { position: absolute; bottom: 0; height: min(92vh, 980px); max-width: 48vw; object-fit: contain; object-position: bottom; opacity: 0; filter: brightness(.45) saturate(.7); transition: opacity .35s ease, filter .3s ease, transform .3s ease; }
.cast.left { left: max(4vw, 10px); }
.cast.right { right: max(4vw, 10px); }
.cast.on { opacity: 1; }
.cast.speaking { filter: none; transform: translateY(-6px); }
.cast.enter { animation: cast-in .45s ease; }
@keyframes cast-in { from { opacity: 0; transform: translateY(24px); } }
.cast.video { filter: sepia(.75) saturate(.6) contrast(1.1) brightness(.9); animation: video-flicker 2.4s infinite steps(1); }
.cast.video:not(.speaking) { filter: sepia(.75) saturate(.6) brightness(.45); }
@keyframes video-flicker { 0%, 88%, 100% { opacity: 1; } 90% { opacity: .6; transform: translateX(3px); } 93% { opacity: .9; transform: translateX(-2px); } }
.scene-ai { inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.scene-ai.show { opacity: 1; }
.scene-ai .portrait { display: none; width: 180px; height: 180px; border-width: 3px; box-shadow: 0 0 60px var(--pc); }
.scene-ai.ai-nova .p-nova { display: grid; grid-template-columns: repeat(2, 26px); gap: 24px; }
.scene-ai.ai-nova .p-nova i { width: 26px; height: 26px; }
.scene-ai.ai-echo .p-echo { display: flex; gap: 10px; }
.scene-ai.ai-echo .p-echo i { width: 8px; height: 30px; animation-name: wave-big; }
@keyframes wave-big { 50% { height: 110px; } }
@media (max-width: 760px) {
  .cast { height: 62vh; max-width: 86vw; }
  .cast:not(.speaking) { opacity: 0; }
  .cast.left, .cast.right { left: 50%; right: auto; transform: translateX(-50%); }
  .cast.speaking { transform: translateX(-50%) translateY(-4px); }
  .scene-ai .portrait { width: 120px; height: 120px; }
}
/* 다음 대사로 넘어가면 지난 단말 화면은 서서히 사라진다 (무대에 남아 인물 · AI 연출을 가리지 않게) */
.scene-screen.stale { opacity: 0; transform: scale(.94); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }

/* 캠페인 손패: 영역 폭에 맞춰 카드가 줄어든다 (조작부를 덮지 않게) */
.camp-hand { min-width: 0; gap: 0 6px; }
.camp-hand .play-card { width: min(112px, calc((100% - 18px) / 4)); min-width: 0; margin: 0; }
.camp-hand .play-card .pc-glyph { font-size: clamp(18px, 2.4vw, 30px); }

/* 사건 중 캐릭터 반응 */
.camp-bark { position: fixed; z-index: 26; left: max(3vw, 12px); bottom: 22px; display: flex; align-items: flex-end; gap: 10px; max-width: min(460px, calc(100vw - 24px)); pointer-events: none; opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .25s ease; }
.camp-bark.show { opacity: 1; transform: none; }
.bark-face { width: 74px; height: 74px; flex: 0 0 auto; border: 2px solid var(--bark, #8fb3d9); border-radius: 50%; background: #101a2c 50% 4% / 260% auto no-repeat; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.camp-bark .portrait { width: 74px; height: 74px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.bark-bubble { position: relative; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--bark, #8fb3d9) 45%, transparent); border-radius: 14px 14px 14px 4px; background: rgba(14,20,34,.96); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.bark-bubble b { display: block; margin-bottom: 2px; color: var(--bark, #8fb3d9); font-size: 11px; }
.bark-bubble p { margin: 0; color: #eef3fb; font-size: 14px; line-height: 1.5; }
.camp-bark.who-seorin { --bark: #b5c2d6; } .camp-bark.who-taeo { --bark: #f2c879; } .camp-bark.who-mira { --bark: #4fd6c8; } .camp-bark.who-nova { --bark: #79aaff; } .camp-bark.who-echo { --bark: #b38cff; }
.camp-bark.who-echo .bark-bubble p { color: #d9c8ff; text-shadow: 1px 0 rgba(255,80,120,.5), -1px 0 rgba(80,200,255,.5); }
.camp-bark.who-nova .bark-bubble p { font-family: "DM Mono", monospace; font-size: 13px; }
.camp-bark.kind-good .bark-face, .camp-bark.kind-correct .bark-face { animation: bark-pop .4s ease; }
.camp-bark.kind-wrong .bark-face, .camp-bark.kind-harm .bark-face, .camp-bark.kind-blind .bark-face { animation: shake .4s; }
@keyframes bark-pop { 50% { transform: scale(1.12); } }
@media (max-width: 760px) {
  .camp-bark { bottom: 12px; left: 12px; }
  .bark-face, .camp-bark .portrait { width: 56px; height: 56px; }
  .bark-bubble p { font-size: 13px; }
}
/* 반응 말풍선은 손패를 가리지 않게 오른쪽 아래 (모바일은 위쪽) */
.camp-bark { left: auto; right: max(3vw, 12px); flex-direction: row-reverse; }
.bark-bubble { border-radius: 14px 14px 4px 14px; }
@media (max-width: 760px) {
  .camp-bark { top: 64px; bottom: auto; right: 12px; flex-direction: row-reverse; }
}

/* 시작 화면 계층 메뉴 */
.menu-crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--muted); font-size: 12px; }
.menu-crumb i { color: var(--faint); font-style: normal; }
.menu-crumb b { color: var(--text); }
.menu-crumb .icon-button { margin-right: 6px; }
.single-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 640px; }
.single-choice { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--border); border-radius: 16px; background: rgba(15,23,40,.85); }
.single-choice h2 { margin: 0; font-size: 20px; }
.single-choice .eyebrow { margin: 0; }
.choice-text { flex: 1; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.campaign-choice { border-color: rgba(179,140,255,.4); background: radial-gradient(ellipse at 90% 0%, rgba(179,140,255,.18), transparent 60%), rgba(15,23,40,.9); }
.choice-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: 12px; }
.choice-meta b { color: var(--amber); }
.single-choice .player-count { flex-wrap: wrap; margin: 0; }
.single-choice .primary-button, .single-choice .secondary-button { width: 100%; justify-content: space-between; }
@media (max-width: 640px) { .single-choices { grid-template-columns: 1fr; } }

/* 도움말이 열려 있는 동안 뒤 화면 스크롤 잠금 · 도움말 안 스크롤이 뒤로 넘어가지 않게 */
html:has(#modal-root .help-modal), html:has(#modal-root .help-modal) body { overflow: hidden; }
#modal-root .modal-backdrop:has(.help-modal) { overscroll-behavior: contain; touch-action: none; }
.help-modal .help-body, #modal-root .modal-card:has(.help-modal) { overscroll-behavior: contain; touch-action: pan-y; }

/* 튜토리얼 중에는 사용자가 스크롤하지 못하게 (비출 곳으로의 자동 이동은 그대로) */
html:has(.tutorial-layer), html:has(.tutorial-layer) body { overflow: hidden; }

/* 경기 끝난 뒤 보드 리플레이 (게임 위에 띄움) */
.board-replay-overlay { position: fixed; z-index: 70; inset: 0; background: var(--bg); }
.board-replay-overlay iframe { width: 100%; height: 100%; border: 0; }
.board-replay-close { position: absolute; z-index: 1; top: 12px; right: 16px; background: rgba(14,20,34,.95); }

/* 대사 상자 방향: 말하는 사람이 왼쪽이면 왼쪽, 오른쪽이면 오른쪽 */
.scene-box { transition: transform .25s ease; }
.scene-box::before { position: absolute; top: -9px; width: 16px; height: 16px; content: ""; display: none; border-top: 1px solid rgba(167,184,219,.22); border-left: 1px solid rgba(167,184,219,.22); background: rgba(14,20,34,.94); transform: rotate(45deg); }
.scene-box.side-left { transform: translateX(-6%); }
.scene-box.side-right { transform: translateX(6%); }
.scene-box.side-left::before { display: block; left: 46px; }
.scene-box.side-right::before { display: block; right: 46px; }
.scene-box.side-right .scene-speaker { flex-direction: row-reverse; text-align: right; }
@media (max-width: 760px) {
  /* 모바일도 두 사람을 좌우에 세운다 (말하는 사람만 밝게) */
  .cast { height: 54vh; max-width: 64vw; }
  .cast.left { left: -10vw; right: auto; transform: none; }
  .cast.right { right: -10vw; left: auto; transform: none; }
  .cast.on:not(.speaking) { opacity: 1; }
  .cast.speaking { transform: translateY(-4px); }
  .cast.left.speaking, .cast.right.speaking { transform: translateY(-4px); }
  .scene-box.side-left, .scene-box.side-right { transform: none; }
  .scene-box.side-left::before { left: 26px; }
  .scene-box.side-right::before { right: 26px; }
}

/* 사건 제목이 글자 단위로 끊기지 않게 */
.camp-brief-head h2 { min-width: 0; word-break: keep-all; }
@media (max-width: 760px) {
  .camp-brief-head { position: relative; padding-right: 48px; }
  .camp-brief-head h2 { flex-basis: 100%; order: 3; font-size: 19px; }
  .camp-brief-head #camp-leave { position: absolute; top: -4px; right: 0; }
  .camp-brief-head #camp-leave span { display: none; }
}

.bark-bubble b small { margin-left: 4px; color: var(--faint); font-size: 10px; font-weight: 500; }

/* 추리 노트: 지워진 숫자는 붉은 빗금 칸 + 취소선, 가능한 숫자는 색이 찬 칸 (모든 노트 공통) */
.digit.eliminated, .intel-card .digit.eliminated, .note-card .digit.eliminated {
  border: 1px solid rgba(255,110,110,.18) !important;
  background: repeating-linear-gradient(135deg, rgba(255,110,110,.2) 0 2px, rgba(10,14,24,.85) 2px 5px) !important;
  color: rgba(255,150,140,.55) !important;
  text-decoration: line-through 1.5px rgba(255,120,110,.8);
}
.digit:not(.eliminated) { font-weight: 700; }

/* 캠페인 결과 창 · 기록 상세 */
.case-event-card { width: min(460px, 100%); }
.case-event-card.by-mira { border-color: rgba(79,214,200,.45); }
.case-event-card.by-mira .winner-mark { color: #4fd6c8; }
.case-result-row { display: flex; align-items: center; gap: 16px; margin: 6px 0 4px; }
.case-result-row .play-card { width: 104px; flex: 0 0 auto; transform: none; }
.case-result-read { display: grid; gap: 4px; min-width: 0; }
.case-result-read small { color: var(--muted); font-size: 12px; }
.case-result-read strong { color: var(--mint); font: 700 34px "DM Mono", monospace; }
.case-result-read span { color: var(--faint); font-size: 11px; line-height: 1.5; }
.case-result-change { margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.case-result-change b { color: var(--text); font-family: "DM Mono", monospace; }
.case-signature { margin: 10px 0 0; padding: 10px 12px; border: 1px solid rgba(105,224,181,.4); border-radius: 10px; background: rgba(105,224,181,.08); color: #d6deea; font-size: 13px; }
.case-signature b { color: var(--mint); font-family: "DM Mono", monospace; }
.case-event-card .guess-tiles { display: flex; justify-content: center; gap: 8px; margin: 10px 0; }
.case-event-card .guess-tiles span { display: grid; width: 48px; height: 56px; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: #0f1728; font: 700 26px "DM Mono", monospace; }
.case-event-card .guess-tiles.hit span { border-color: var(--mint); color: var(--mint); }
.case-event-card .guess-tiles.miss span { border-color: var(--coral); color: var(--coral); }
.case-event-card .verdict { text-align: center; font: 700 16px "DM Mono", monospace; letter-spacing: .12em; }
.case-event-card .verdict.hit { color: var(--mint); } .case-event-card .verdict.miss { color: var(--coral); }
.camp-log li button { display: flex; width: 100%; justify-content: space-between; gap: 8px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.camp-log li button i { flex: 0 0 auto; color: var(--faint); font-size: 10px; font-style: normal; }
.camp-log li button:hover i { color: var(--mint); }
.verdict-evidence { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.verdict-evidence div { display: grid; gap: 4px; padding: 10px; border: 1px solid rgba(105,224,181,.35); border-radius: 10px; background: rgba(105,224,181,.06); }
.verdict-evidence span { color: var(--muted); font-size: 11px; }
.verdict-evidence b { color: var(--mint); font-family: "DM Mono", monospace; }
@media (max-width: 520px) { .case-result-row .play-card { width: 84px; } .case-result-read strong { font-size: 28px; } }

.case-signature.stolen, .verdict-evidence .stolen { border-color: rgba(79,214,200,.35); background: rgba(79,214,200,.06); }
.case-signature.stolen b, .verdict-evidence .stolen b { color: #4fd6c8; font-family: inherit; }

/* 사건별 최고 기록 */
.case-best { margin: 0; color: var(--muted); font-size: 12px; }
.case-best b, .case-record b { color: var(--amber); font-family: "DM Mono", monospace; }
.case-record { margin: 4px 0 0; color: var(--muted); font-size: 13px; text-align: center; }
.case-record.new { color: var(--text); }
.case-record.new b { animation: bark-pop .6s ease 2; }

/* 확인 창 · 결과 창이 떠 있는 동안 뒤 화면 스크롤 잠금 */
html:has(#modal-root .modal-backdrop), html:has(#modal-root .modal-backdrop) body { overflow: hidden; }
#modal-root .modal-backdrop { overscroll-behavior: contain; }

/* 모바일 장면: 좌우 인물이 화면 밖으로 잘리지 않게 */
@media (max-width: 760px) {
  .cast { height: 50vh; max-width: 50vw; }
  .cast.left { left: 0; }
  .cast.right { right: 0; }
}

/* 소리 설정 창 (⚙) */
.audio-settings { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(4,8,15,.72); backdrop-filter: blur(3px); }
.audio-card { width: min(380px, 100%); padding: 22px; border: 1px solid rgba(167,184,219,.2); border-radius: 14px; background: #121c2e; box-shadow: 0 25px 80px rgba(0,0,0,.5); }
.audio-card h2 { margin: 2px 0 14px; font-size: 18px; }
.audio-row { display: grid; grid-template-columns: 96px 1fr 34px; align-items: center; gap: 12px; margin: 12px 0; color: var(--muted); font-size: 13px; }
.audio-row b { color: var(--text); font: 600 13px "DM Mono", monospace; text-align: right; }
.audio-row input { --fill: 50%; width: 100%; height: 6px; margin: 0; border-radius: 6px; background: linear-gradient(90deg, var(--mint) var(--fill), rgba(167,184,219,.22) var(--fill)); cursor: pointer; appearance: none; -webkit-appearance: none; }
.audio-row input::-webkit-slider-thumb { width: 18px; height: 18px; border: 2px solid var(--bg); border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px rgba(105,224,181,.5); -webkit-appearance: none; }
.audio-row input::-moz-range-thumb { width: 16px; height: 16px; border: 2px solid var(--bg); border-radius: 50%; background: var(--mint); }
.audio-card .modal-actions { margin-top: 18px; }
html:has(.audio-settings), html:has(.audio-settings) body { overflow: hidden; }
@media (max-width: 520px) { .settings-button span { display: none; } }

/* 캠페인 모바일 탭: 조사 / 노트 / 기록 (PC에서는 숨김) */
.camp-tabs { display: none; }
.intel-node-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.intel-node-chips button { padding: 4px 9px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.03); color: var(--muted); font-size: 11px; cursor: pointer; }
.intel-node-chips button.active { border-color: var(--mood, var(--mint)); background: var(--mood-dim, var(--mint-dim)); color: var(--mood, var(--mint)); }
@media (max-width: 760px) {
  .campaign-screen { padding-bottom: 86px; }
  .camp-tabs { position: fixed; z-index: 24; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: rgba(11,16,32,.96); backdrop-filter: blur(8px); }
  .camp-tabs button { display: grid; justify-items: center; gap: 1px; padding: 6px 4px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; }
  .camp-tabs button i { font-style: normal; font-size: 15px; }
  .camp-tabs button small { overflow: hidden; max-width: 100%; color: var(--faint); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
  .camp-tabs button.active { border-color: color-mix(in srgb, var(--mint) 40%, transparent); background: var(--mint-dim); color: var(--mint); }
  .camp-play.tab-act .camp-side { display: none; }
  .camp-play.tab-intel .camp-main, .camp-play.tab-intel .camp-side .activity-panel { display: none; }
  .camp-play.tab-log .camp-main, .camp-play.tab-log .camp-side .intel-panel { display: none; }
  .camp-play.tab-log .camp-log { max-height: none; }
  .camp-play.tab-intel .camp-clues { max-height: none; }
  .camp-play { margin-top: 8px; }
}

@media (max-width: 760px) {
  /* 사건 설명은 두 줄만, 누르면 펼침 (조사 탭에서 카드가 덜 밀리게) */
  .camp-objective { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; cursor: pointer; }
  .camp-objective.open { display: block; }
  .camp-meters .meter { min-width: 0; flex: 1 1 40%; }
}

/* CHAPTER 1 완료 카드 */
.case-card.to-be-continued { --mood: #b38cff; --mood-dim: rgba(179,140,255,.14); grid-column: 1 / -1; align-items: center; text-align: center; border-style: dashed; background: radial-gradient(ellipse at 50% 0%, rgba(179,140,255,.18), transparent 70%), #0d1424; }
.case-card.to-be-continued h2 { font: 700 clamp(22px, 4vw, 34px) "DM Mono", monospace; letter-spacing: .12em; text-shadow: 2px 0 rgba(255,80,120,.45), -2px 0 rgba(80,200,255,.45); animation: glitch-shift 3.6s infinite steps(1); }
.case-card.to-be-continued .case-go { max-width: 320px; }

/* 사건별 배경: 플레이 화면 뒤 · 사건 카드 위쪽 */
.campaign-screen { position: relative; }
.campaign-screen.in-case::before { position: fixed; z-index: 0; inset: 0; pointer-events: none; content: ""; background: linear-gradient(180deg, rgba(11,16,32,.78), rgba(11,16,32,.9) 45%, rgba(11,16,32,.96)), var(--case-bg) center / cover no-repeat; }
.campaign-screen > * { position: relative; z-index: 1; }
.case-art { height: 96px; margin: -18px -18px 4px; background: center / cover no-repeat; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); opacity: .85; }
.case-card.locked .case-art { opacity: .4; }
.camp-play .camp-node, .camp-play .camp-action, .camp-play .camp-brief { backdrop-filter: blur(2px); }

/* CHAPTER 1 접기/펼치기 */
.chapter-fold { position: absolute; top: 22px; right: 22px; padding: 7px 12px; border: 1px solid rgba(179,140,255,.4); border-radius: 9px; background: rgba(179,140,255,.1); color: #d4bcff; font-size: 12px; font-weight: 700; cursor: pointer; }
.chapter-fold:hover { border-color: #b38cff; }
.camp-list.folded .case-grid, .camp-list.folded .to-be-continued { display: none; }
.camp-list.folded .camp-hero { margin-bottom: 12px; }
@media (max-width: 760px) { .chapter-fold { position: static; display: block; margin-top: 12px; } }

/* 게임 예약 게시판 */
.reserve-hint { margin: -2px 0 2px; color: var(--muted); font-size: 12px; }
.reserve-list { display: grid; gap: 8px; max-height: 420px; overflow-y: auto; }
.reserve-item { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid rgba(167,184,219,.12); border-radius: 12px; background: rgba(5,10,18,.32); }
.reserve-item.is-cancelled { opacity: .55; }
.reserve-item.is-cancelled .reserve-message { text-decoration: line-through; }
.reserve-when { display: grid; gap: 1px; text-align: center; }
.reserve-when b { color: var(--mint); font: 700 16px "DM Mono", monospace; }
.reserve-when span { color: var(--text); font-size: 11px; }
.reserve-when em { color: var(--amber); font-size: 10px; font-style: normal; }
.reserve-main { display: grid; gap: 6px; min-width: 0; }
.reserve-message { margin: 0; overflow-wrap: anywhere; color: #e8eef8; font-size: 13px; }
.reserve-players { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.reserve-players span { padding: 2px 7px; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); font-size: 11px; }
.reserve-players span.host { border-color: rgba(242,200,121,.4); color: var(--amber); }
.reserve-players small { margin-left: 4px; color: var(--faint); font: 10px "DM Mono", monospace; }
.reserve-actions { display: grid; justify-items: end; gap: 6px; }
.reserve-actions .join-button { min-height: 34px; padding: 0 14px; white-space: nowrap; }
.reserve-actions .join-button:disabled { opacity: .5; cursor: not-allowed; }
.reserve-actions .modal-secondary { min-height: 32px; white-space: nowrap; }
.reserve-manage { padding: 2px 6px; border: 0; background: none; color: var(--faint); font-size: 11px; cursor: pointer; }
.reserve-manage:hover { color: var(--text); }
.reserve-badge { padding: 4px 9px; border-radius: 7px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.reserve-badge.mine { background: var(--mint-dim); color: var(--mint); }
.reserve-badge.cancelled { background: rgba(255,142,131,.14); color: var(--coral); }
.reserve-form { display: grid; gap: 10px; margin-top: 6px; }
.reserve-form label { display: grid; gap: 4px; color: var(--muted); font-size: 12px; }
.reserve-form input { min-height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 9px; background: #0d1424; color: var(--text); font: inherit; font-size: 14px; color-scheme: dark; }
.reserve-form input:focus { outline: 2px solid var(--mint); outline-offset: 1px; }
.reserve-rules { margin: 0; color: var(--faint); font-size: 11px; line-height: 1.6; }
.reserve-rules b { color: var(--text); }
.reserve-form .modal-actions button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 560px) {
  .reserve-item { grid-template-columns: 76px minmax(0, 1fr); }
  .reserve-actions { grid-column: 1 / -1; grid-template-columns: 1fr auto; justify-items: stretch; }
  .reserve-new span { display: none; }
}

.reserve-badge.waiting { background: rgba(242,200,121,.16); color: var(--amber); animation: blink 1.6s infinite; }
.reserve-badge.open { background: var(--mint-dim); color: var(--mint); font-family: "DM Mono", monospace; }
.reserve-note { margin: 0; color: var(--muted); font-size: 11px; }
.reserve-note b { color: var(--mint); font-family: "DM Mono", monospace; }

/* 프롤로그 내레이션 */
.scene-narration { max-width: min(720px, 92vw); margin: 0; color: #eef3fb; font-size: clamp(17px, 2.4vw, 24px); font-weight: 600; line-height: 1.75; text-align: center; white-space: pre-wrap; text-shadow: 0 2px 18px rgba(0,0,0,.8); }
.scene-narration.big { color: var(--mint); font: 800 clamp(34px, 7vw, 64px) "DM Mono", monospace; letter-spacing: .08em; text-shadow: 0 0 30px rgba(105,224,181,.45); }
.scene-box.narrating { min-height: 0; padding: 10px 18px; border-color: transparent; background: transparent; box-shadow: none; }
.prologue-button { margin-top: 12px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 9px; background: rgba(255,255,255,.03); color: var(--muted); font-size: 12px; cursor: pointer; }
.prologue-button:hover { color: var(--text); border-color: var(--mint); }
.verdict-evidence small { color: var(--faint); font-size: 10px; }

/* ───────── 캠페인 PC 화면 (docs/PC_화면개선계획.md) ───────── */
/* 사건 카드: 별 · 최고 기록 · 잠금 한 줄 */
.case-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; flex: 1; align-content: flex-end; }
.case-card-foot .star-row { margin-left: 0; font-size: 18px; }
.case-lock { color: var(--faint); font: 600 11px "DM Mono", monospace; letter-spacing: .1em; }
.case-card:not(.locked):not(.to-be-continued) { cursor: pointer; }
.case-card:not(.locked):not(.to-be-continued):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--mood) 55%, transparent); }
.case-card { transition: transform .2s ease, border-color .2s ease; }
.case-detail-short { margin: 0 0 6px; color: var(--mint); font-size: 14px; font-weight: 700; }
.case-detail-meta { display: grid; grid-template-columns: 82px 1fr; gap: 6px 10px; margin: 14px 0 0; font-size: 12px; }
.case-detail-meta dt { color: var(--faint); }
.case-detail-meta dd { margin: 0; color: var(--text); }

@media (min-width: 768px) {
  /* 사건 플레이는 페이지 스크롤 없이 한 화면 */
  .campaign-screen.in-case.desk { height: 100vh; padding-bottom: 12px; overflow: hidden; }
  .campaign-screen.in-case.desk .camp-body { height: calc(100vh - 88px); max-width: 1480px; }
  .camp-desk { display: grid; height: 100%; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 10px; }

  /* 위: CASE · 한 줄 목표 · 계측 · 별 */
  .desk-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 10px 16px; border: 1px solid color-mix(in srgb, var(--mood) 30%, transparent); border-radius: 14px; background: linear-gradient(160deg, var(--mood-dim), transparent 70%), rgba(15,23,40,.86); }
  .desk-title { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 12px; min-width: 0; }
  .desk-title h2 { margin: 0; font-size: 20px; }
  .desk-title p { grid-column: 1 / -1; margin: 0; overflow: hidden; color: #d6deea; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
  .desk-meters { display: flex; gap: 6px; }
  .desk-meters .meter { min-width: 0; padding: 5px 10px; }
  .desk-meters .meter b { font-size: 16px; }
  .desk-meters .meter em { display: none; }
  .desk-meters .meter.track { display: none; }
  .desk-stars { display: flex; align-items: center; gap: 3px; }
  .desk-stars span { color: rgba(167,184,219,.25); font-size: 22px; cursor: help; }
  .desk-stars span.on { color: var(--amber); text-shadow: 0 0 10px rgba(242,200,121,.5); }
  .desk-stars .icon-button { min-height: 32px; margin-left: 6px; padding: 0 10px; }

  /* 가운데: 왼쪽 Context · 오른쪽 Focus */
  .desk-main { display: grid; min-height: 0; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 12px; }
  .desk-context { display: flex; min-height: 0; flex-direction: column; gap: 10px; }
  .desk-panel { padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: rgba(15,23,40,.86); }
  .desk-panel .eyebrow { margin: 0 0 8px; }
  .desk-intel { display: flex; min-height: 0; flex: 1; flex-direction: column; }
  .desk-intel-head { display: flex; justify-content: space-between; gap: 8px; }
  .desk-intel-head span { color: var(--muted); font-size: 12px; }
  .desk-intel .camp-notebook { margin-top: 0; }
  .desk-intel .camp-clues { flex: 1; max-height: none; min-height: 40px; overflow-y: auto; }
  .desk-hint { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
  .desk-hint b { color: var(--coral); }

  /* Node 목록 (요약형) */
  .desk-node-list { display: grid; gap: 6px; }
  .desk-node-item { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(5,10,18,.4); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
  .desk-node-item:hover:not(:disabled) { border-color: color-mix(in srgb, var(--mood) 45%, transparent); }
  .desk-node-item.active { border-color: var(--mood); box-shadow: 0 0 0 1px var(--mood-dim), 0 0 18px var(--mood-dim); }
  .desk-node-item:disabled { opacity: .45; cursor: default; }
  .desk-node-item.status-cracked, .desk-node-item.status-passed { opacity: .7; }
  .dn-head { display: grid; }
  .dn-head b { font-size: 13px; }
  .dn-head small { color: var(--faint); font-size: 10px; }
  .dn-pattern { align-self: center; color: var(--mood); font: 700 15px "DM Mono", monospace; letter-spacing: .2em; }
  .dn-extra { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--muted); font-size: 11px; }
  .dn-extra b { color: var(--text); font-family: "DM Mono", monospace; }
  .sig-line { color: var(--muted); font: normal 10px "DM Mono", monospace; letter-spacing: .04em; }
  .sig-line.ok { color: var(--mint); } .sig-line.lost { color: #4fd6c8; }
  .dn-active { position: absolute; top: 6px; right: 8px; color: var(--mood); font: normal 9px "DM Mono", monospace; letter-spacing: .1em; }

  /* CASE 05 병원 상태판: 색 + 아이콘 + 글자 */
  .hospital-board { display: grid; gap: 5px; }
  .desk-hospital .desk-node-item { grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 0 8px; }
  .hs-icon { grid-row: 1 / 3; font-size: 15px; text-align: center; }
  .hs-name { font-size: 12px; font-weight: 700; }
  .hs-label { grid-column: 2; font: 600 10px "DM Mono", monospace; letter-spacing: .08em; }
  .hs-count { grid-column: 3; grid-row: 1 / 3; color: var(--muted); font-size: 11px; white-space: nowrap; }
  .hs-count b { color: var(--amber); font-family: "DM Mono", monospace; }
  .hs-unknown .hs-icon, .hs-unknown .hs-label { color: var(--muted); }
  .hs-safe .hs-icon, .hs-safe .hs-label, .fx.hs-safe { color: var(--mint); }
  .hs-threat { border-color: rgba(255,142,131,.45) !important; }
  .hs-threat .hs-icon, .hs-threat .hs-label, .fx.hs-threat { color: var(--coral); }
  .hs-blocked .hs-icon, .hs-blocked .hs-label, .fx.hs-blocked { color: #79aaff; }
  .hs-executed { opacity: .75; }
  .hs-executed .hs-icon, .hs-executed .hs-label, .fx.hs-executed { color: #ff6b6b; }
  .desk-node-item.urgent .hs-count b { color: var(--coral); animation: blink 1s infinite; }

  /* Focus: CASE 03 타이머 · CASE 04 ECHO · 현재 Node */
  .desk-focus { display: flex; min-height: 0; flex-direction: column; gap: 10px; overflow-y: auto; }
  .desk-timer { padding: 12px 18px; border: 1px solid rgba(255,111,111,.35); border-radius: 14px; background: linear-gradient(180deg, rgba(255,111,111,.1), rgba(15,23,40,.9)); text-align: center; }
  .desk-timer.warn { border-color: var(--coral); box-shadow: 0 0 30px rgba(255,111,111,.25); }
  .dt-head { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font: 600 11px "DM Mono", monospace; letter-spacing: .1em; }
  .dt-time { margin: 4px 0; }
  .dt-time b { color: #ff8e83; font: 800 54px "DM Mono", monospace; letter-spacing: .04em; }
  .dt-time small { margin-left: 6px; color: var(--muted); }
  .dt-bar { height: 8px; overflow: hidden; border-radius: 8px; background: rgba(255,255,255,.08); }
  .dt-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff6b6b, #f2c879); transition: width .4s ease; }
  .dt-preview { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
  .dt-preview b { color: var(--text); font-family: "DM Mono", monospace; }
  .dt-warn { margin: 6px 0 0; color: var(--coral); font: 800 16px "DM Mono", monospace; letter-spacing: .14em; animation: blink 1s infinite; }
  .desk-echo { padding: 14px 18px; border: 1px solid rgba(179,140,255,.35); border-radius: 14px; background: radial-gradient(ellipse at 50% 0%, rgba(179,140,255,.2), transparent 70%), rgba(6,6,14,.92); text-align: center; }
  .echo-wave { display: flex; height: 34px; align-items: center; justify-content: center; gap: 4px; }
  .echo-wave i { width: 3px; height: 8px; border-radius: 2px; background: #d9c8ff; animation: wave 1.2s infinite ease-in-out; animation-delay: calc(var(--i) * -.07s); }
  .echo-title { margin: 6px 0 2px; color: #d9c8ff; font: 700 18px "DM Mono", monospace; letter-spacing: .5em; text-shadow: 2px 0 rgba(255,80,120,.5), -2px 0 rgba(80,200,255,.5); }
  .echo-quote { margin: 0; color: var(--muted); font-size: 13px; font-style: italic; }
  .desk-active { display: grid; gap: 12px; padding: 16px 20px; border: 1px solid var(--mood); border-radius: 16px; background: radial-gradient(ellipse at 50% 0%, var(--mood-dim), transparent 70%), rgba(15,23,40,.92); box-shadow: 0 0 30px var(--mood-dim); }
  .desk-active.done { border-color: var(--border); box-shadow: none; }
  .da-head { display: flex; justify-content: space-between; gap: 10px; }
  .da-head .eyebrow { margin: 0; }
  .da-head h3 { margin: 2px 0 0; font-size: 22px; }
  .da-head small { color: var(--faint); font-size: 12px; }
  .focus-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 92px)); justify-content: center; gap: 12px; }
  .focus-slot { position: relative; display: grid; height: 104px; place-items: center; overflow: hidden; border: 1px solid rgba(167,184,219,.25); border-radius: 14px; background: #0b1220; color: var(--muted); font: 700 44px "DM Mono", monospace; }
  .focus-slot i { position: absolute; right: 0; bottom: 0; left: 0; height: calc(var(--known, 0) * 100%); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mood) 25%, transparent)); }
  .focus-slot.cracked { border-color: var(--mood); color: var(--mood); box-shadow: inset 0 0 18px var(--mood-dim); }
  .da-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
  .fx { color: var(--muted); font-size: 13px; }
  .fx b { color: var(--text); font-family: "DM Mono", monospace; }
  .fx.big { font-size: 15px; }
  .fx.big b { color: var(--mood); font-size: 20px; }
  .da-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: end; }
  .da-actions.idle { opacity: .6; }
  .da-actions .camp-guess { padding-top: 0; border-top: 0; border-left: 1px solid var(--border); padding-left: 16px; }

  /* 손패 */
  .desk-hand { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid var(--border); border-radius: 14px; background: rgba(15,23,40,.86); }
  .desk-hand.idle .play-card { filter: saturate(.6) brightness(.8); }
  .desk-hand .eyebrow { display: grid; gap: 2px; margin: 0; }
  .desk-hand .eyebrow small { color: var(--faint); font: 10px "Noto Sans KR", sans-serif; letter-spacing: 0; }
  .desk-hand .camp-hand { justify-content: flex-start; padding-top: 22px; }
  .desk-hand .play-card { width: 104px; }

  /* LIVE FEED: 평소 한 줄, 펼치면 내부 스크롤 */
  .desk-feed { position: relative; border: 1px solid var(--border); border-radius: 12px; background: rgba(11,16,32,.95); }
  .feed-toggle { display: flex; width: 100%; align-items: center; gap: 12px; padding: 8px 14px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
  .feed-toggle b { flex: 0 0 auto; color: var(--mint); font: 600 11px "DM Mono", monospace; letter-spacing: .1em; }
  .feed-toggle span { flex: 1; overflow: hidden; color: #d6deea; text-overflow: ellipsis; white-space: nowrap; }
  .feed-toggle small { color: var(--faint); }
  .desk-feed.open .feed-list { position: absolute; z-index: 5; right: 0; bottom: calc(100% + 6px); left: 0; max-height: 44vh; margin: 0; padding: 10px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; background: rgba(11,16,32,.98); box-shadow: 0 -10px 40px rgba(0,0,0,.5); }
  .feed-turn { margin-right: 8px; color: var(--faint); font: 10px "DM Mono", monospace; }

  /* 반응 말풍선은 위쪽 오른편 (손패 · LIVE FEED를 가리지 않게) */
  body:has(.camp-desk) .camp-bark { top: 96px; bottom: auto; }
}
@media (min-width: 1280px) and (max-height: 820px) {
  .focus-slot { height: 80px; font-size: 34px; }
  .dt-time b { font-size: 40px; }
  .desk-hand .play-card { width: 88px; padding: 6px; }
  .desk-hand .camp-hand { padding-top: 16px; }
  .desk-echo .echo-quote { display: none; }
}
@media (min-width: 768px) {
  /* 아래 LIVE FEED가 화면 끝에 붙지 않게, 왼쪽 칸은 넘치면 그 안에서 스크롤 */
  .campaign-screen.in-case.desk .camp-body { height: calc(100vh - 100px); }
  .desk-context { overflow-y: auto; scrollbar-width: thin; }
  .desk-intel { flex: 1 0 auto; }
  .desk-intel .camp-clues { max-height: 220px; }
}
@media (min-width: 1280px) and (max-height: 820px) {
  .campaign-screen.in-case.desk { padding-top: 10px; }
  .desk-top { padding: 6px 12px; }
  .desk-top .meter small { display: none; }
  .desk-active { gap: 8px; padding: 10px 14px; }
  .da-head h3 { font-size: 18px; }
  .focus-slot { height: 64px; font-size: 30px; border-radius: 10px; }
  .focus-slots { grid-template-columns: repeat(4, minmax(0, 70px)); }
  .da-actions { gap: 12px; }
  .da-actions .camp-digits button, .da-actions .keypad button { height: 28px; }
  .da-actions .guess-slots button { height: 34px; }
  .da-actions .submit-button { min-height: 32px; }
  .desk-hand { padding: 4px 12px; }
  .desk-hand .play-card { width: 72px; padding: 5px; }
  .desk-hand .play-card .pc-glyph { font-size: 22px; }
  .desk-hand .camp-hand { padding-top: 12px; }
  .desk-hospital .desk-node-item { padding: 5px 8px; }
  .desk-panel { padding: 10px; }
}

/* ───────── 캠페인 모바일 화면 (docs/모바일_화면개선계획.md · 760px 이하) ───────── */
@media (max-width: 767px) {
  .campaign-screen.in-case.mob { padding: 0 0 0; }
  .campaign-screen.in-case.mob > .game-header { display: none; }   /* 사건 중에는 위쪽 고정 막대가 제목 역할 */
  .camp-mob { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; }

  /* 위 고정: CASE · 목표 · 타이머/상태판 · Node 탭 */
  .mob-top { position: sticky; z-index: 6; top: 0; display: grid; gap: 6px; padding: 8px 12px 8px; border-bottom: 1px solid color-mix(in srgb, var(--mood) 30%, transparent); background: linear-gradient(180deg, rgba(11,16,32,.98), rgba(11,16,32,.94)); backdrop-filter: blur(8px); }
  .mob-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .mob-title .case-num { flex: 0 0 auto; font-size: 11px; }
  .mob-title b { flex: 1; min-width: 0; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .mob-title .desk-stars { display: flex; gap: 1px; }
  .mob-title .desk-stars span { color: rgba(167,184,219,.25); font-size: 14px; }
  .mob-title .desk-stars span.on { color: var(--amber); }
  .mob-title .icon-button { min-width: 32px; min-height: 30px; padding: 0 8px; }
  .mob-goal { margin: 0; color: #d6deea; font-size: 12px; }
  .mob-timer { padding: 6px 10px; border: 1px solid rgba(255,111,111,.35); border-radius: 10px; background: rgba(255,111,111,.08); }
  .mob-timer.warn { border-color: var(--coral); }
  .mob-timer > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
  .mob-timer small { color: var(--muted); font: 600 10px "DM Mono", monospace; }
  .mob-timer b { color: #ff8e83; font: 800 26px "DM Mono", monospace; }
  .mob-timer .dt-bar { height: 5px; margin: 4px 0; }
  .mob-timer p { margin: 0; color: var(--muted); font-size: 11px; }
  .mob-timer p b { font-size: 12px; color: var(--text); }
  .mob-timer .dt-warn { font-size: 13px; }
  .mob-board { display: grid; gap: 4px; }
  .mob-board-toggle { display: grid; gap: 3px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; background: rgba(5,10,18,.5); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
  .mob-board-toggle b { color: var(--mint); font: 600 11px "DM Mono", monospace; letter-spacing: .08em; }
  .mob-board-sum { display: flex; flex-wrap: wrap; gap: 4px 10px; font: 600 11px "DM Mono", monospace; }
  .mob-board-sum .hs-unknown { color: var(--muted); } .mob-board-sum .hs-safe { color: var(--mint); } .mob-board-sum .hs-threat { color: var(--coral); } .mob-board-sum .hs-blocked { color: #79aaff; } .mob-board-sum .hs-executed { color: #ff6b6b; }
  .mob-board-list { display: grid; gap: 3px; }
  .hs-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(5,10,18,.4); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
  .hs-row.active { border-color: var(--mood); }
  .hs-row small { font: 600 10px "DM Mono", monospace; }
  .hs-row.hs-unknown small { color: var(--muted); } .hs-row.hs-safe small { color: var(--mint); } .hs-row.hs-threat small { color: var(--coral); } .hs-row.hs-blocked small { color: #79aaff; } .hs-row.hs-executed { opacity: .7; } .hs-row.hs-executed small { color: #ff6b6b; }
  .mob-node-tabs { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 5px; }
  .mob-tab { display: grid; gap: 1px; padding: 5px 6px; border: 1px solid var(--border); border-radius: 9px; background: rgba(5,10,18,.4); color: var(--muted); font: inherit; text-align: center; cursor: pointer; }
  .mob-tab b { color: var(--text); font-size: 12px; }
  .mob-tab small { font: 10px "DM Mono", monospace; }
  .mob-tab.active { border-color: var(--mood); background: var(--mood-dim); }
  .mob-tab.active b { color: var(--mood); }
  .mob-tab:disabled { opacity: .4; }

  /* 가운데 스크롤: 현재 Node · 코드 추리 · 추리 노트 · 게임 기록 */
  .mob-center { display: grid; flex: 1; align-content: start; gap: 10px; padding: 10px 12px 16px; }
  .mob-echo { padding: 8px; }
  .mob-echo .echo-wave { height: 22px; }
  .mob-echo .echo-title { margin: 2px 0 0; font-size: 13px; }
  .mob-active { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--mood); border-radius: 14px; background: radial-gradient(ellipse at 50% 0%, var(--mood-dim), transparent 70%), rgba(15,23,40,.92); }
  .mob-active.done { border-color: var(--border); }
  .mob-active .da-head { display: flex; justify-content: space-between; gap: 8px; }
  .mob-active .da-head .eyebrow { margin: 0; }
  .mob-active .da-head h3 { margin: 2px 0 0; font-size: 18px; }
  .mob-active .da-head small { color: var(--faint); font-size: 11px; }
  .mob-active .focus-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .mob-active .focus-slot { position: relative; display: grid; height: 66px; place-items: center; overflow: hidden; border: 1px solid rgba(167,184,219,.25); border-radius: 12px; background: #0b1220; color: var(--muted); font: 700 32px "DM Mono", monospace; }
  .mob-active .focus-slot i { position: absolute; right: 0; bottom: 0; left: 0; height: calc(var(--known, 0) * 100%); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mood) 25%, transparent)); }
  .mob-active .focus-slot.cracked { border-color: var(--mood); color: var(--mood); }
  .mob-active .da-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
  .mob-active .fx { color: var(--muted); font-size: 12px; }
  .mob-active .fx b { color: var(--text); font-family: "DM Mono", monospace; }
  .mob-active .fx.big b { color: var(--mood); font-size: 17px; }
  .mob-active .fx.hs-safe { color: var(--mint); } .mob-active .fx.hs-threat { color: var(--coral); } .mob-active .fx.hs-blocked { color: #79aaff; } .mob-active .fx.hs-executed { color: #ff6b6b; }
  .mob-guess { padding-top: 8px; border-top: 1px solid var(--border); }
  .mob-guess.idle { opacity: .6; }
  .mob-guess .keypad { grid-template-columns: repeat(6, 1fr); }
  .mob-guess .keypad button { height: 34px; }
  .mob-guess .guess-slots button { height: 38px; }
  .mob-fold { border: 1px solid var(--border); border-radius: 12px; background: rgba(15,23,40,.86); }
  .mob-fold-head { display: grid; width: 100%; gap: 2px; padding: 9px 12px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
  .mob-fold-head b { color: var(--mint); font-size: 13px; }
  .mob-fold-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mob-fold .camp-notebook { margin: 0 10px; }
  .mob-fold .camp-clues { max-height: 180px; margin: 8px 10px 10px; }
  .mob-log-list { max-height: 40vh; margin: 0 10px 10px; overflow-y: auto; }

  /* 아래 고정: 손패 가로 스크롤 (약 4장 + 다음 카드 일부) · 자리 · 조사 */
  .mob-hand { position: sticky; z-index: 6; bottom: 0; display: grid; gap: 4px; padding: 6px 0 calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: rgba(11,16,32,.97); backdrop-filter: blur(8px); }
  .mob-hand.idle .play-card { filter: saturate(.6) brightness(.8); }
  .mob-hand-head { display: flex; justify-content: space-between; padding: 0 12px; color: var(--mint); font: 600 10px "DM Mono", monospace; letter-spacing: .08em; }
  .mob-hand-head small { color: var(--faint); letter-spacing: 0; }
  .mob-hand-row { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 8px; padding: 14px 12px 4px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .mob-hand-row::-webkit-scrollbar { display: none; }
  .mob-hand-row .play-card { width: 76px; min-width: 76px; flex: 0 0 76px; padding: 5px; margin: 0; scroll-snap-align: start; }
  .mob-hand-row .play-card.selected { transform: translateY(-10px); }
  .mob-hand-row .play-card .pc-glyph { font-size: 22px; }
  .mob-hand-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 12px; }
  .mob-picker { flex-wrap: nowrap; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  .mob-picker span { width: auto; flex: 0 0 auto; margin-right: 2px; font-size: 10px; }
  .mob-picker button { min-width: 30px; height: 32px; }
  .mob-hand-actions .submit-button { min-height: 38px; padding: 0 14px; white-space: nowrap; }
  .mob-hand-actions .submit-button:disabled { opacity: .45; }
  body:has(.camp-mob) .camp-bark { top: auto; bottom: 200px; }
  body:has(.camp-mob) .camp-tabs { display: none; }

  /* 컷신: 캐릭터는 위쪽 55~60%, 대사는 아래 */
  .cast { bottom: 30vh; height: 46vh; }
  .scene { grid-template-rows: 1fr auto; padding-bottom: 14px; }
  .scene-box { min-height: 26vh; }
}

/* ───────── AI 대전 · 클래식 대전 화면 (docs/AI대전_클래식_화면개선계획.md) ───────── */
.secret-meter { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; color: var(--amber); font: 600 10px "DM Mono", monospace; letter-spacing: .12em; }
.secret-meter span { margin-right: 2px; }
.secret-meter i { width: 9px; height: 9px; border: 1px solid var(--amber); border-radius: 50%; }
.secret-meter i.on { background: var(--amber); box-shadow: 0 0 8px rgba(242,200,121,.6); }
.secret-meter b { font-size: 10px; }
.arena-tabs, .arena-folds { display: none; }
.game-screen.arena .intel-sidebar, .game-screen.arena .game-footer { display: none; }
body:has(.game-screen.arena:not(.hidden)) .mobile-game-dock { display: none !important; }
.game-screen.arena .game-layout { grid-template-columns: minmax(0, 1fr); padding: 12px 0 14px; }
.game-screen.arena .table-felt { gap: 12px; padding: 14px 18px 16px; }
.game-screen.arena .arena-folds { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 상대 슬롯: 대전 상대처럼. 현재 타겟만 크게 */
.arena .opponents { display: flex; align-items: stretch; justify-content: center; gap: 14px; }
.arena .seat.fighter { position: relative; flex: 1 1 0; max-width: 270px; gap: 6px; padding: 10px 12px 9px; opacity: .72; text-align: center; }
.arena .seat.fighter.is-focus { flex-grow: 1.5; max-width: 380px; opacity: 1; border-color: rgba(242,200,121,.75); box-shadow: 0 0 0 1px rgba(242,200,121,.2), 0 0 40px rgba(242,200,121,.14); }
.arena .seat.fighter.is-current { opacity: 1; }
.arena .seat.fighter[role="button"]:hover { opacity: 1; }
.ft-head { display: flex; align-items: baseline; justify-content: center; gap: 7px; min-width: 0; }
.ft-head strong { color: var(--player-color); font: 800 14px "Manrope", sans-serif; letter-spacing: .14em; }
.is-focus .ft-head strong { font-size: 17px; }
.ft-head small { color: var(--faint); font-size: 10px; white-space: nowrap; }
.ft-head .thinking { align-self: center; }
.ft-visual { display: grid; height: 52px; place-items: center; }
.is-focus .ft-visual { height: 70px; }
.ai-core { display: grid; width: 48px; height: 48px; place-items: center; border: 2px solid var(--player-color); border-radius: 50%; background: radial-gradient(circle, var(--player-color-dim), #070b14 72%); box-shadow: 0 0 22px color-mix(in srgb, var(--player-color) 30%, transparent); color: var(--player-color); }
.is-focus .ai-core { width: 66px; height: 66px; box-shadow: 0 0 34px color-mix(in srgb, var(--player-color) 45%, transparent); }
.core-nova { grid-template-columns: repeat(2, 7px); gap: 6px; place-content: center; }
.core-nova i { width: 7px; height: 7px; border-radius: 50%; background: #cfe3ff; box-shadow: 0 0 8px var(--player-color); animation: blink 2s infinite; }
.core-nova i:nth-child(2) { animation-delay: .3s; } .core-nova i:nth-child(3) { animation-delay: .6s; } .core-nova i:nth-child(4) { animation-delay: .9s; }
.is-focus .core-nova { grid-template-columns: repeat(2, 10px); gap: 9px; }
.is-focus .core-nova i { width: 10px; height: 10px; }
.core-echo { display: flex; align-items: center; justify-content: center; gap: 3px; }
.core-echo i { width: 3px; height: 10px; background: #d9c8ff; animation: wave .9s infinite ease-in-out; }
.core-echo i:nth-child(2) { animation-delay: .12s; } .core-echo i:nth-child(3) { animation-delay: .24s; } .core-echo i:nth-child(4) { animation-delay: .36s; } .core-echo i:nth-child(5) { animation-delay: .48s; } .core-echo i:nth-child(6) { animation-delay: .6s; } .core-echo i:nth-child(7) { animation-delay: .72s; }
.core-byte { grid-template-columns: repeat(3, 6px); gap: 3px; place-content: center; }
.core-byte i { width: 6px; height: 6px; background: var(--player-color); animation: byte-flick 1.3s steps(2) infinite; }
.core-byte i:nth-child(3n) { animation-delay: .4s; } .core-byte i:nth-child(2n) { animation-delay: .8s; } .core-byte i:nth-child(5) { animation-delay: .2s; }
.is-focus .core-byte { grid-template-columns: repeat(3, 9px); gap: 4px; }
.is-focus .core-byte i { width: 9px; height: 9px; }
@keyframes byte-flick { 50% { opacity: .2; } }
.arena .seat.fighter .lock-slot { height: 32px; }
.arena .seat.fighter.is-focus .lock-slot { height: 42px; font-size: 20px; }
.ft-stat { display: flex; align-items: baseline; justify-content: center; gap: 10px; color: var(--muted); font-size: 11px; }
.ft-stat b { color: var(--text); font: 700 15px "DM Mono", monospace; }
.is-focus .ft-stat b { color: var(--amber); font-size: 20px; }
.ft-state { font: 700 10px "DM Mono", monospace; font-style: normal; letter-spacing: .14em; }
.ft-state.alive { color: var(--mint); }
.ft-state.dead { color: var(--coral); font-size: 12px; }
.ft-last { min-height: 14px; margin: 0; overflow: hidden; color: var(--faint); font: 10px "DM Mono", "Noto Sans KR", monospace; text-overflow: ellipsis; white-space: nowrap; }
.arena .seat.fighter .seat-foot { justify-content: center; gap: 12px; }
.arena .seat.fighter.is-dead { opacity: .42; filter: grayscale(.7); }
.arena .seat.fighter.is-dead .lock-slot.revealed { color: var(--coral); }
.target-flag.watch { background: rgba(167,184,219,.25); color: #d6deea; }
.arena .seat.glitching { animation: seat-glitch .9s steps(2) 1; }
@keyframes seat-glitch { 0%, 100% { transform: none; filter: none; } 20% { transform: translateX(-4px); filter: hue-rotate(80deg) saturate(2); } 40% { transform: translateX(5px); filter: hue-rotate(-60deg); } 60% { transform: translateX(-2px); filter: brightness(1.8); } 80% { transform: translateX(2px); } }

/* 현재 타겟 아래의 행동 무대 */
.arena .stage { width: min(100%, 820px); padding: 12px 16px 14px; }
.arena .stage-heading { margin-bottom: 10px; }
.arena .stage-heading h2 { color: var(--amber); font: 700 14px "DM Mono", "Noto Sans KR", monospace; letter-spacing: .06em; }
.arena .stage-heading h2::before { content: "▲ "; }
.secret-banner { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; padding: 7px 12px; border: 1px solid rgba(242,200,121,.45); border-radius: 10px; background: rgba(242,200,121,.08); color: var(--amber); font: 700 12px "DM Mono", monospace; letter-spacing: .14em; animation: secret-in .3s ease-out; }
@keyframes secret-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.secret-banner small { color: var(--muted); font: 11px "Noto Sans KR", sans-serif; letter-spacing: 0; }

/* 해독: 공격 단계처럼. 타겟과 입력만 남기고 나머지는 흐리게 */
.arena .seat.fighter, .arena .home-row, .arena .arena-folds, .arena #hand { transition: opacity .25s, filter .25s; }
.arena.decoding .seat.fighter:not(.is-focus) { opacity: .22; filter: blur(1px) grayscale(.7); }
.arena.decoding #hand, .arena.decoding .arena-folds, .arena.decoding #my-seat { opacity: .3; pointer-events: none; }
.arena.decoding .stage { border-color: rgba(255,142,131,.6); box-shadow: 0 0 0 1px rgba(255,142,131,.18), 0 0 46px rgba(255,142,131,.16); }
.arena.decoding .stage-heading h2 { color: var(--coral); }
.arena.decoding .seat.fighter.is-focus { border-color: rgba(255,142,131,.8); box-shadow: 0 0 40px rgba(255,142,131,.2); }
.arena #cancel-guess { min-height: 48px; padding: 0 18px; }
/* 시크릿: 비공개 채널 */
.arena.secret-channel .seat.fighter:not(.is-focus), .arena.secret-channel #my-seat, .arena.secret-channel .arena-folds { opacity: .35; filter: saturate(.4); }
.arena.secret-channel .stage { border-color: rgba(242,200,121,.65); box-shadow: 0 0 46px rgba(242,200,121,.15); }
.verdict small { display: block; margin-top: 6px; color: var(--coral); font-size: 12px; letter-spacing: .24em; }

/* 추리 노트 · 게임 기록: 기본은 접힘 */
.arena-fold { position: relative; min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: rgba(9,14,26,.86); }
.arena-fold.open { border-color: rgba(105,224,181,.35); }
.arena-fold-head { display: flex; width: 100%; align-items: center; gap: 12px; padding: 9px 14px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.arena-fold-head b { flex: 0 0 auto; color: var(--mint); font-size: 13px; }
.arena-fold-head span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena-fold-body { max-height: 46vh; padding: 0 10px 10px; overflow-y: auto; }
.arena-fold-body .intel-card { margin: 0; }
.arena-log { display: grid; align-content: start; gap: 4px; }

/* AI 행동 띠 · 큰 사건 표시 */
.arena .live-event { top: 150px; }
.arena-event { position: fixed; z-index: 40; top: 58%; left: 50%; display: grid; gap: 6px; max-width: calc(100vw - 32px); padding: 16px 28px; border: 1px solid rgba(167,184,219,.3); border-radius: 14px; background: rgba(7,11,20,.93); box-shadow: 0 24px 60px rgba(0,0,0,.55); text-align: center; pointer-events: none; transform: translate(-50%, -50%); animation: arena-event 1.9s ease forwards; }
.arena-event strong { font: 800 clamp(18px, 3vw, 30px) "DM Mono", monospace; letter-spacing: .12em; }
.arena-event small { color: var(--muted); font: 600 11px "DM Mono", monospace; letter-spacing: .22em; }
.arena-event.kill { border-color: rgba(255,142,131,.6); }
.arena-event.kill strong { color: var(--coral); text-shadow: 2px 0 rgba(255,80,120,.55), -2px 0 rgba(80,200,255,.55); }
.arena-event.secret { border-color: rgba(242,200,121,.5); }
.arena-event.secret strong { color: var(--amber); }
.arena-event.fail strong { color: #a7b8db; }
@keyframes arena-event { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* PC: 한 화면에 상대 · 타겟 · 손패 · 접힌 노트/기록 (펼친 창만 내부 스크롤, 위로 열린다) */
@media (min-width: 761px) {
  .game-screen.arena { display: flex; height: 100vh; min-height: 0; flex-direction: column; padding-bottom: 0; }
  .game-screen.arena .game-header { min-height: 56px; flex: 0 0 auto; }
  .game-screen.arena .game-layout { min-height: 0; flex: 1; }
  .game-screen.arena .board, .game-screen.arena .table-felt { height: 100%; min-height: 0; }
  .game-screen.arena .table-felt { display: flex; flex-direction: column; overflow: visible; }
  .arena .opponents { flex: 0 0 auto; }
  .arena #action-panel { min-height: 0; flex: 1 1 auto; overflow-y: auto; }
  .arena .home-row { flex: 0 0 auto; grid-template-columns: 240px minmax(0, 1fr) minmax(220px, 300px); align-items: end; }
  .game-screen.arena .arena-folds { grid-template-columns: 1fr; gap: 8px; }
  .game-screen.arena .table-felt > .home-row { z-index: 6; }
  .arena .hand { min-height: 0; padding: 10px 0 0; }
  .arena .hand .play-card { width: 96px; }
  .arena #my-seat { gap: 8px; padding: 10px 12px; }
  .arena #my-seat .my-assets { display: none; }
  .arena .arena-folds { flex: 0 0 auto; }
  .arena .opponents { align-items: flex-start; }
  .arena .mode-switch { margin-bottom: 10px; }
  .arena .mode-btn { min-height: 40px; }
  .arena .scan-stage { grid-template-columns: 116px minmax(0, 1fr); gap: 14px; }
  .arena .play-card.preview { width: 100px; }
  .arena .play-card.preview .pc-glyph { font-size: 30px; }
  .arena .lock-row.large .lock-slot { height: 58px; font-size: 26px; }
  .arena .stage-actions { margin-top: 10px; }
  .arena .go-button { min-height: 48px; }
  .arena #my-seat { gap: 7px; }
  .arena #my-seat .code-slot { height: 38px; }
  .arena #my-seat .code-caption { display: none; }
  .arena #my-seat .records-btn.wide { padding: 5px; }
  .arena-fold.open .arena-fold-body { position: absolute; z-index: 15; right: -1px; bottom: calc(100% + 6px); width: min(470px, 46vw); max-height: min(56vh, 520px); padding: 12px; border: 1px solid rgba(105,224,181,.35); border-radius: 12px; background: rgba(9,14,26,.98); box-shadow: 0 -18px 50px rgba(0,0,0,.5); }
}
@media (min-width: 761px) and (min-height: 940px) {
  .arena .is-focus .ft-visual { height: 92px; }
  .arena .is-focus .ai-core { width: 84px; height: 84px; }
  .arena .seat.fighter.is-focus .lock-slot { height: 52px; font-size: 24px; }
  .arena .hand .play-card { width: 104px; }
}
@media (min-width: 761px) and (max-height: 820px) {
  .arena .ft-visual { height: 40px; }
  .arena .is-focus .ft-visual { height: 52px; }
  .arena .ai-core { width: 38px; height: 38px; }
  .arena .is-focus .ai-core { width: 50px; height: 50px; }
  .arena .seat.fighter .lock-slot { height: 28px; font-size: 14px; }
  .arena .seat.fighter.is-focus .lock-slot { height: 34px; font-size: 17px; }
  .arena .ft-last { display: none; }
  .arena .seat.fighter:not(.is-focus) .ft-visual { display: none; }
  .arena .play-card.preview { width: 84px; }
  .arena .play-card.preview .pc-glyph { font-size: 26px; }
  .arena .stage-card p { display: none; }
  .arena .lock-row.large .lock-slot { height: 50px; }
  .arena .hand .play-card { width: 80px; }
  .arena #my-seat .code-slot { height: 34px; font-size: 17px; }
  .arena .stage { padding-top: 9px; padding-bottom: 11px; }
  .arena .stage-heading { margin-bottom: 8px; }
}

/* 모바일: 위 고정(라운드·SECRET·상대 탭) · 가운데(타겟·노트·기록) · 아래 고정(손패) */
@media (max-width: 760px) {
  .game-screen.arena { padding-bottom: 0; overflow-x: clip; }
  .game-screen.arena .game-header { position: sticky; z-index: 12; top: 0; margin: 0 -12px; padding: 0 12px; background: rgba(8,12,22,.97); }
  .game-screen.arena .game-layout { padding: 0; }
  .game-screen.arena .table-felt { display: flex; flex-direction: column; gap: 10px; overflow: visible; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .game-screen.arena .table-felt::after { display: none; }
  .game-screen.arena .arena-tabs { position: sticky; z-index: 11; top: 58px; display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 6px; margin: 0 -12px; padding: 6px 12px 8px; border-bottom: 1px solid var(--border); background: rgba(8,12,22,.97); }
  .arena-tab { display: flex; min-width: 0; min-height: 38px; align-items: center; justify-content: center; gap: 5px; padding: 0 6px; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.03); color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; }
  .arena-tab i { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--player-color); }
  .arena-tab b { overflow: hidden; color: var(--text); text-overflow: ellipsis; }
  .arena-tab small { color: var(--amber); font: 600 11px "DM Mono", monospace; }
  .arena-tab.active { border-color: var(--amber); background: rgba(242,200,121,.12); }
  .arena-tab.active b { color: var(--amber); }
  .arena-tab.dead { opacity: .45; }
  .arena-tab.dead small { color: var(--coral); }
  .arena .opponents { display: block; padding: 4px 6px 0; }
  .arena .seat.fighter:not(.is-focus) { display: none; }
  .arena .seat.fighter.is-focus { max-width: none; }
  .arena #action-panel { order: 2; }
  .game-screen.arena .arena-folds { order: 3; grid-template-columns: 1fr; gap: 8px; }
  .arena .home-row { display: contents; }
  .arena #my-seat { order: 4; margin-bottom: 4px; }
  .arena #my-seat .my-assets { display: none; }
  .arena #hand { position: sticky; z-index: 10; bottom: 0; order: 5; display: flex; min-height: 0; justify-content: flex-start; gap: 8px; margin: 0 -12px; padding: 16px 12px calc(10px + env(safe-area-inset-bottom)); overflow-x: auto; border-top: 1px solid var(--border); background: rgba(11,16,32,.97); scrollbar-width: none; }
  .arena #hand::-webkit-scrollbar { display: none; }
  .arena #hand .play-card { width: 80px; flex: 0 0 80px; margin: 0; transform: none; }
  .arena #hand .play-card.selected { transform: translateY(-8px); }
  .arena .live-event { position: fixed; top: 112px; }
  .arena.decoding .arena-folds, .arena.decoding #my-seat, .arena.decoding #hand { display: none; }
  .game-screen.arena .turn-status { white-space: nowrap; }
}
@media (max-width: 420px) {
  .game-screen.arena .secret-meter span { display: none; }
  .game-screen.arena .secret-meter::before { content: "✳"; }
}

/* ───────── 캠페인 1차 화면 개선 (docs/1차화면개선계획.md) ───────── */
/* 추리 노트: 항상 펼침 · 작은 칩 · 확정은 민트 · 방금 지워진 숫자는 잠깐 강조 */
.note-panel { display: grid; gap: 6px; }
.note-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.note-head b { color: var(--mint); font-size: 13px; }
.note-head span { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.note-grid { display: grid; gap: 3px; margin: 0; padding: 0; border: 0; background: none; }
.note-grid .digit-line { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: center; gap: 6px; }
.note-grid .digit-position { color: var(--faint); font: 600 10px "DM Mono", monospace; }
.note-grid .digit-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
.note-grid .digit { display: grid; height: 22px; place-items: center; border-radius: 5px; background: rgba(167,184,219,.08); color: #e4ebf7; font: 600 12px "DM Mono", monospace; }
.note-grid .digit.eliminated { background: transparent; color: rgba(167,184,219,.32); text-decoration: line-through; }
.note-grid .digit.fixed { background: color-mix(in srgb, var(--mint) 22%, transparent); color: var(--mint); font-weight: 800; box-shadow: inset 0 0 0 1px var(--mint); }
.note-grid .digit.just-out { animation: just-out 1.1s ease-out; }
@keyframes just-out { 0% { background: rgba(255,142,131,.55); color: #fff; text-decoration: none; transform: scale(1.12); } 60% { background: rgba(255,142,131,.25); } 100% { background: transparent; } }
.note-sum { margin: 2px 0 0; color: var(--muted); font-size: 11px; }
.note-sum b { color: var(--text); font-family: "DM Mono", monospace; }
.note-history-toggle { justify-self: start; padding: 2px 0; border: 0; background: none; color: var(--faint); font: inherit; font-size: 11px; cursor: pointer; }
.note-history-toggle:hover { color: var(--mint); }
.note-panel .camp-clues { max-height: 150px; margin: 0; overflow-y: auto; }

/* CASE 02: Node A/B 카드 · 미라 · 최종 판단 */
.side-node { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid rgba(167,184,219,.14); border-radius: 14px; background: rgba(13,19,33,.82); color: var(--muted); font: inherit; text-align: left; cursor: pointer; opacity: .82; transition: border-color .2s, opacity .2s, box-shadow .2s; }
.side-node:hover { opacity: 1; }
.side-node.active { border: 2px solid var(--mint); background: rgba(18,28,46,.95); box-shadow: 0 0 22px rgba(105,224,181,.16), inset 0 0 18px rgba(105,224,181,.06); opacity: 1; }
.side-node small { color: var(--faint); font: 600 10px "DM Mono", monospace; letter-spacing: .12em; }
.side-node b { color: var(--text); font-size: 15px; }
.side-node .sn-line { color: var(--text); font-size: 12px; }
.side-node .sn-sign { color: var(--muted); font: 600 11px "DM Mono", monospace; letter-spacing: .06em; }
.side-node strong { font-size: 12px; }
.side-node.own-mine .sn-sign, .side-node.own-mine strong { color: var(--mint); }
.side-node.own-mira { border-color: rgba(79,214,200,.45); background: repeating-linear-gradient(135deg, rgba(79,214,200,.06) 0 8px, transparent 8px 16px), rgba(13,19,33,.85); }
.side-node.own-mira .sn-state { color: #4fd6c8; font: 700 11px "DM Mono", monospace; font-style: normal; letter-spacing: .2em; }
.side-node.own-mira .sn-sign { color: #4fd6c8; }
.side-node.own-mira strong { color: #4fd6c8; }
.mira-panel { display: grid; gap: 3px; }
.mira-panel b { color: #4fd6c8; font-size: 13px; }
.mira-panel span { color: var(--muted); font-size: 11px; }
.mira-panel small { color: #d6deea; font-size: 11px; }
.judge-button { width: 100%; min-height: 44px; }
.judge-button:disabled { opacity: .45; }

/* 위에 1.7초 띄우는 알림 (미라 행동) */
.camp-toast { position: fixed; z-index: 60; left: 50%; display: grid; gap: 2px; max-width: min(92vw, 520px); padding: 9px 16px; border: 1px solid rgba(79,214,200,.5); border-radius: 12px; background: rgba(9,16,26,.96); box-shadow: 0 12px 30px rgba(0,0,0,.45); color: #d6deea; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%, -6px); transition: opacity .2s, transform .2s; }
.camp-toast.show { opacity: 1; transform: translate(-50%, 0); }
.camp-toast b { color: #4fd6c8; font-size: 13px; }
.camp-toast small { color: var(--text); font-size: 12px; }
.camp-toast.mira-win { border-color: #4fd6c8; box-shadow: 0 0 30px rgba(79,214,200,.25); }

/* 사건별 아주 옅은 배경 그림 (코드 카드 뒤는 비움) */
.case-art { position: absolute; z-index: 0; top: 50%; width: 150px; height: 190px; color: var(--mood); opacity: .08; filter: blur(.6px); pointer-events: none; transform: translateY(-50%); }
.case-art.art-left { left: 14px; }
.case-art.art-right { right: 14px; width: 190px; }
.desk-active { position: relative; overflow: hidden; }
.desk-active > :not(.case-art) { position: relative; z-index: 1; }

@media (min-width: 768px) {
  /* 머리: 작게 · 한 줄 중심 (제목이 계측보다 먼저 보이게) */
  .desk-top { gap: 12px; padding: 8px 14px; }
  .desk-title .case-num { font-size: 11px; }
  .desk-title h2 { font-size: 22px; }
  .desk-title p { font-size: 13px; }
  .desk-meters .meter { min-width: 58px; max-width: 120px; padding: 4px 8px; }
  .desk-meters .meter span { font-size: 10px; }
  .desk-meters .meter b { font-size: 15px; }
  .desk-meters .meter small { font-size: 9px; }
  .desk-stars span { font-size: 18px; }

  /* 가운데: [추리 노트] [현재 Node 760~900] (CASE 02: [A + 노트] [현재 Node] [B + 미라]) */
  .desk-main { grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); }
  .camp-desk.three-col .desk-main { grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(220px, 260px); }
  .desk-focus { align-items: center; justify-content: safe center; }
  .desk-focus > * { width: 100%; max-width: 900px; }
  .desk-context, .desk-side { justify-content: safe center; }
  .desk-side { display: flex; min-height: 0; flex-direction: column; gap: 10px; overflow-y: auto; }
  .desk-context .note-panel .camp-clues { max-height: 140px; }
  .desk-panel.note-panel { padding: 12px; }
  .da-head h3 { font-size: 22px; }
  .focus-slots { grid-template-columns: repeat(4, minmax(0, 90px)); gap: 12px; }
  .focus-slot { height: 102px; }
  .fx.big { font-size: 15px; }
  .fx.big b { font-size: 26px; }
  .da-actions { grid-template-columns: 48fr 52fr; gap: 0; }
  .da-actions .camp-scan { padding-right: 16px; }
  .da-actions .camp-guess { padding-left: 16px; border-left: 1px solid var(--border); }
  .da-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
  .camp-scan .camp-digits > span { display: none; }

  /* 손패: 카드 높이만큼 (빈 공간 최소) */
  .desk-hand { grid-template-columns: 96px minmax(0, 1fr); padding: 6px 14px; }
  .desk-hand .hand-label { display: grid; gap: 2px; margin: 0; color: var(--mint); font-size: 13px; font-weight: 700; }
  .desk-hand .hand-label small { color: var(--faint); font-size: 10px; font-weight: 400; }
  .desk-hand .camp-hand { padding-top: 14px; }

  /* 게임 기록: 접히면 36px 한 줄 · 펼치면 위로 160~220px */
  .feed-toggle { min-height: 36px; padding: 0 14px; }
  .feed-toggle b { font: 700 12px "Noto Sans KR", sans-serif; letter-spacing: 0; }
  .desk-feed.open .feed-list { max-height: 220px; }
}
/* 768~1279: 줄이지 않고 위아래로 재배치 (페이지 스크롤 허용) */
@media (min-width: 768px) and (max-width: 1279px) {
  .campaign-screen.in-case.desk { height: auto; min-height: 100vh; overflow: visible; }
  .campaign-screen.in-case.desk .camp-body { height: auto; }
  .camp-desk { height: auto; grid-template-rows: auto; }
  .desk-main, .camp-desk.three-col .desk-main { grid-template-columns: minmax(0, 1fr); }
  .desk-focus { order: 2; overflow: visible; }
  .desk-context { order: 3; overflow: visible; }
  .desk-side { order: 4; overflow: visible; }
  /* CASE 02: A/B는 위쪽 2열 요약 카드, 현재 Node는 전체 폭, 노트는 그 아래 */
  .camp-desk.three-col .desk-main { grid-template-areas: "a b" "focus focus" "notes notes" "side side"; grid-template-columns: 1fr 1fr; }
  .camp-desk.three-col .desk-context, .camp-desk.three-col .desk-side { display: contents; }
  .camp-desk.three-col .desk-context > .side-node { grid-area: a; }
  .camp-desk.three-col .desk-side > .side-node { grid-area: b; }
  .camp-desk.three-col .desk-context > .note-panel { grid-area: notes; }
  .camp-desk.three-col .desk-focus { grid-area: focus; }
  .camp-desk.three-col .desk-side > .mira-panel { grid-area: side; }
  .camp-desk.three-col .desk-side > .judge-button { grid-column: 1 / -1; }
  .desk-hand { grid-template-columns: minmax(0, 1fr); }
  .desk-hand .camp-hand { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; }
  .desk-hand .play-card { flex: 0 0 auto; }
  .case-art.art-left { display: none; }
  .case-art { opacity: .06; }
  .desk-feed { position: sticky; bottom: 8px; z-index: 4; }
}
@media (min-width: 1280px) and (max-height: 820px) {
  .note-grid .digit { height: 19px; font-size: 11px; }
  .focus-slot { height: 64px; font-size: 30px; }
  .focus-slots { grid-template-columns: repeat(4, minmax(0, 72px)); }
  .fx.big { font-size: 13px; }
  .fx.big b { font-size: 20px; }
  .da-head h3 { font-size: 18px; }
  .desk-active { gap: 8px; }
  .desk-timer { padding: 6px 14px; }
  .dt-time { margin: 0; }
  .dt-time b { font-size: 32px; }
  .dt-preview { margin-top: 4px; }
  .side-node { padding: 8px 12px; }
}

/* 모바일: 노트 상시 · 기록 접힘 · 손패는 가운데 흐름 · 고른 카드 + 자리 + 조사는 아래 고정 */
@media (max-width: 767px) {
  .mob-active .da-head h3 { font-size: 17px; }
  .mob-note { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(15,23,40,.86); }
  .mob-note .note-grid .digit-row { gap: 2px; }
  .mob-note .note-grid .digit { height: 24px; font-size: 12px; border-radius: 4px; }
  .mob-center .judge-button { margin-top: -2px; }
  .mob-center .mob-hand { position: static; z-index: auto; padding: 8px 0 4px; border: 1px solid var(--border); border-radius: 12px; background: rgba(15,23,40,.86); backdrop-filter: none; }
  .mob-center .mob-hand-row { padding: 12px 10px 4px; gap: 7px; }
  .mob-center .mob-hand-row .play-card { width: 80px; min-width: 80px; flex: 0 0 80px; }
  .mob-actionbar { position: sticky; z-index: 6; bottom: 0; display: grid; gap: 6px; min-height: 40px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: rgba(11,16,32,.97); backdrop-filter: blur(8px); }
  .mob-actionbar.idle { opacity: .75; }
  .mob-picked { margin: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .mob-picked b { color: var(--mint); font-family: "DM Mono", monospace; }
  .mob-picked.empty { padding: 4px 0; color: var(--faint); text-align: center; }
  .mob-actionbar .mob-hand-actions { padding: 0; }
  .mob-tab em { font: 600 10px "DM Mono", monospace; font-style: normal; letter-spacing: .04em; }
  .mob-tab.own-mine em, .mob-tab.own-mine small { color: var(--mint); }
  .mob-tab.own-mira { border-color: rgba(79,214,200,.5); background: repeating-linear-gradient(135deg, rgba(79,214,200,.07) 0 6px, transparent 6px 12px); }
  .mob-tab.own-mira em, .mob-tab.own-mira small { color: #4fd6c8; }
  .case-art { display: none; }
  body:has(.camp-mob) .camp-bark { bottom: 120px; }
}

/* 1차 화면 개선 보완: 선택 카드 줄 · Node 카드 높이 · 노트 전환 페이드 · 768~1279 재배치 · 모바일 조사 바 높이 */
.da-picked { margin: 0 0 8px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.da-picked b { color: var(--mint); font-family: "DM Mono", monospace; }
.note-panel.switched .note-grid, .note-panel.switched .note-sum { animation: note-fade .18s ease-out; }
@keyframes note-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1280px) {
  .side-node { min-height: 124px; align-content: center; }
}
@media (min-width: 768px) and (max-width: 1279px) {
  /* 조사 · 해독은 Node 아래 전체 폭으로 (위: 조사, 아래: 해독) */
  .da-actions { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .da-actions .camp-scan { padding-right: 0; }
  .da-actions .camp-guess { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  /* 추리 노트: 숫자 칩은 작게, 한 줄 유지 (폭을 늘리지 않는다) */
  .desk-context .note-panel { max-width: 900px; width: 100%; justify-self: center; }
  .note-grid { max-width: 440px; }
  .camp-desk.three-col .side-node { min-height: 0; }
}
@media (max-width: 767px) {
  .mob-actionbar.picked { min-height: 86px; padding-top: 10px; gap: 8px; }
  .mob-note { gap: 4px; }
  .mob-note .note-grid { gap: 2px; }
  .mob-note .note-grid .digit { height: 23px; }
}

/* 캠페인 사건 게임판: 수치 UI와 분리해 현장·연결·행동 결과를 보여 준다. */
.incident-board { position:relative; isolation:isolate; flex:0 0 auto; overflow:hidden; border:1px solid #69e0b538; border-radius:16px; background:#0b1720; min-height:200px; }
.incident-board::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#091320cc,#091320b0),var(--incident-bg) center/cover; }
.incident-caption { display:flex; justify-content:space-between; gap:12px; padding:12px 16px 0; color:#dbe8ef; font-size:12px; }
.incident-caption small { color:#a4bac3; font-size:10px; }
.incident-board svg { display:block; width:100%; max-height:235px; color:#d6e8ed; }
.incident-board svg text { fill:currentColor; font:12px "DM Mono","Noto Sans KR",sans-serif; }
.incident-board .marker-status { font-size:10px; fill:#a3bac4; }
.incident-line { fill:none; stroke:#7facbf; stroke-width:3; }
.incident-line.normal { stroke:#69e0b5; }
.incident-line.suspect { stroke:#f2c879; stroke-dasharray:7 6; }
.incident-line.blocked { stroke:#ff8e83; stroke-dasharray:3 15; }
.incident-marker { cursor:pointer; color:#d6e8ed; }
.incident-marker rect { fill:#102333ee; stroke:#829fa177; stroke-width:1.5; }
.incident-marker circle { fill:#a1b9c2; }
.incident-marker.selected rect,.incident-marker:focus rect { stroke:#f2c879; stroke-width:3; }
.incident-marker:focus { outline:none; }
.incident-marker:hover rect { fill:#1b3944; }
.incident-marker.state-locked { opacity:.45; cursor:default; }
.incident-marker.state-safe rect,.incident-marker.state-blocked rect { stroke:#69e0b5; }
.incident-marker.state-threat rect,.incident-marker.state-executed rect { stroke:#ff8e83; }
.incident-marker.state-mira rect { stroke:#c19aff; }
.incident-line.state-executed { stroke:#ff8e83; stroke-dasharray:5 8; animation:incident-warning .6s alternate 4; }
.incident-line.state-blocked { stroke:#69e0b5; stroke-dasharray:2 8; }
.incident-line.state-safe { stroke:#69e0b5; }
.incident-line.state-threat { stroke:#f2c879; }
.warehouse-building,.destination,.asset-document,.hospital-central { fill:#122b39; stroke:#8babba; stroke-width:1.5; }
.warehouse-building text { stroke:none; }
.route-end rect { fill:#2a271b; stroke:#f2c879; }
.route-end.is-blocked rect { fill:#34202a; stroke:#ff8e83; }
.asset-fold,.hospital-outline { fill:none; stroke:#77959b55; stroke-width:2; }
.incident-board .signature { fill:#f2c879; font-size:11px; }
.incident-board .signature.secured { fill:#c19aff; }
.incident-line.rail { stroke-width:7; stroke:#71879c; }
.incident-train { transform:translateX(var(--train-x)); transition:transform .8s ease; fill:#69e0b5; stroke:#092323; stroke-width:2; }
.incident-board .rail-clock { fill:#f2c879; font-size:20px; }
.data-fragment { fill:#304256; }
.data-fragment.recovered { fill:#69e0b5; }
.data-fragment.corrupted { opacity:.35; }
.echo-signal { fill:none; stroke:#c19aff; stroke-width:2; }
.incident-board.recovering .data-fragment { animation:incident-recovery .8s calc(var(--fragment)*12ms) both; }
.incident-board .harm-count { fill:#f2c879; }
.incident-response { min-height:18px; margin:0; padding:0 16px 10px; font-size:11px; color:#9fc7b8; }
.incident-scan { position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(90deg,transparent 40%,#69e0b530 49%,#69e0b580 50%,transparent 52%); }
.incident-board.responding .incident-scan { animation:incident-scan .65s ease-out; }
.incident-board.decoded { animation:incident-decode 1.6s ease-out; }
.incident-board.denied { animation:incident-denied .4s; }
.incident-board.damage,.incident-board.mission-failed { animation:incident-warning .5s alternate 4; }
.incident-board.mira-secured .secured { animation:incident-stamp .6s ease-out; }
.incident-board.timestamp-shift .rail-clock { animation:incident-timestamp .6s ease-out; }
@keyframes incident-timestamp { 20%,60% { opacity:.35; transform:translateX(2px); } 40%,80% { opacity:1; transform:translateX(-2px); } }
@keyframes incident-scan { from {opacity:1;transform:translateX(-90%)} to {opacity:0;transform:translateX(90%)} }
@keyframes incident-decode { 20% {box-shadow:inset 0 0 40px #69e0b559;border-color:#69e0b5} }
@keyframes incident-denied { 25% {transform:translateX(-4px)} 75% {transform:translateX(4px)} }
@keyframes incident-warning { to {box-shadow:inset 0 0 65px #ff403040;opacity:.65} }
@keyframes incident-recovery { from {opacity:.1} to {opacity:1} }
@keyframes incident-stamp { from {opacity:0;transform:translateY(-8px)} to {opacity:1;transform:translateY(0)} }
@media(min-width:1280px) { .desk-focus:has(.incident-board) {justify-content:flex-start} .desk-focus:has(.incident-board) .desk-active>.case-art {display:none} .desk-focus:has(.incident-board) .desk-timer {display:none} .incident-board {min-height:190px} }
@media(max-width:767px) { .incident-board {margin:10px 12px;min-height:170px;flex-shrink:0} .incident-board svg {min-height:154px} .incident-caption {padding:10px 10px 0;font-size:10px} .incident-caption small {font-size:9px} .incident-response {font-size:10px;padding:0 10px 7px} }
@media(prefers-reduced-motion:reduce) { .incident-board *,.incident-board {animation:none!important;transition:none!important} }
@media(min-width:1280px) {
  .desk-focus:has(.incident-board) { display:grid; grid-template-columns:minmax(240px,.9fr) minmax(330px,1.1fr); align-items:stretch; overflow-y:auto; }
  .desk-focus:has(.incident-board)>.incident-board { display:flex; flex-direction:column; justify-content:center; min-height:0; }
  .desk-focus:has(.incident-board)>.desk-active { align-self:center; }
  .desk-focus:has(.incident-board)>.desk-echo { display:none; }
}
/* 캠페인 조사 작업대: 노트와 손패, 자리 선택을 가까이 묶는다. */
@media(min-width:768px) {
  .desk-hand.desk-workbench { display:grid; grid-template-columns:minmax(250px, .8fr) minmax(0, 2fr); align-items:start; gap:16px; padding:14px; }
  .desk-workbench>.note-panel { margin:0; min-width:0; }
  .desk-investigation { display:grid; gap:8px; min-width:0; }
  .desk-workbench .camp-hand { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; padding:16px 8px 10px; gap:10px; }
  .desk-workbench .note-panel .camp-clues { max-height:80px; overflow-y:auto; }
  .desk-focus:has(.incident-board)>.desk-active { align-self:start; }
  .desk-workbench .play-card { margin:0; width:88px; }
  .desk-workbench .camp-hand .play-card.selected,
  .desk-workbench .camp-hand .play-card:hover { transform:translateY(-6px); }
  .desk-workbench .camp-scan { display:grid; grid-template-columns:minmax(0,1fr) minmax(140px, .7fr); gap:8px 12px; align-items:center; }
  .desk-workbench .camp-scan .da-label { display:none; }
  .desk-workbench .da-picked { grid-column:1/-1; margin:0; white-space:normal; }
  .desk-workbench .camp-digits { margin:0; flex-wrap:wrap; }
  .desk-workbench .submit-button { min-height:36px; }
  .da-actions.guess-only { grid-template-columns:minmax(0,1fr); }
  .da-actions.guess-only .camp-guess { padding:0; border:0; }
  .context-empty { display:none; }
  .desk-main:has(>.context-empty) { grid-template-columns:minmax(0,1fr); }
}
@media(min-width:768px) and (max-width:1000px) {
  .desk-hand.desk-workbench { grid-template-columns:minmax(0,1fr); }
  .desk-workbench>.note-panel { max-width:none; }
}
@media(min-width:1280px) and (max-height:820px) {
  .desk-hand.desk-workbench { padding:8px 12px; }
  .desk-workbench .play-card { width:68px; }
  .desk-investigation { gap:4px; }
  .desk-workbench .camp-hand { padding-top:10px; padding-bottom:6px; }
}
.mob-hand-row { padding-left:10px; padding-right:10px; }
.mob-hand-row .play-card { margin-left:0; margin-right:0; }
.mob-hand-row .play-card.selected:hover { transform:translateY(-10px); }
/* 물류 사건: 흐름도 대신 현장 그림의 관제 장치를 직접 조사한다. */
.incident-board.warehouse-scene { background:#0a121c; border-color:#64899450; display:flex; flex-direction:column; justify-content:center; }
.warehouse-scene::before { display:none; }
.warehouse-scene-top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 18px; font:9px "DM Mono",monospace; letter-spacing:1.5px; color:#809ba6; }
.warehouse-scene-top b { display:block; margin-top:5px; color:#e5edf0; font:600 13px "Noto Sans KR",sans-serif; letter-spacing:0; }
.warehouse-status { color:#f3c27d; font:11px "Noto Sans KR",sans-serif; letter-spacing:0; }
.warehouse-stage { position:relative; width:100%; aspect-ratio:7/4; overflow:hidden; }
@media(min-width:768px) and (max-width:1279px) { .warehouse-stage { aspect-ratio:auto; height:330px; } .warehouse-stage .warehouse-terminal {top:67%} }
.warehouse-stage>img { width:100%; height:100%; object-fit:cover; display:block; }
.warehouse-stage::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#0a121c55,transparent 25%,transparent 70%,#0a121c); }
.warehouse-location { position:absolute; z-index:1; display:flex; align-items:center; gap:6px; color:#e9eff0; text-shadow:0 1px 5px #000; font-size:11px; }
.warehouse-location i { display:grid; place-items:center; width:21px; height:21px; border-radius:50%; border:1px solid #b7cfcd88; background:#071725b0; font:10px "DM Mono",monospace; font-style:normal; }
.warehouse-location small { display:block; margin-top:3px; color:#aec1c6; font-size:9px; }
.warehouse-location.loading { right:5%; bottom:10%; }
.warehouse-location.approved { right:5%; top:40%; }
.warehouse-location.unauthorized { left:4%; top:35%; color:#ffbe98; }
.warehouse-location.unauthorized i { border-color:#ffb88b; }
.warehouse-terminal { position:absolute; z-index:2; left:42%; top:61%; transform:translate(-50%,-50%); width:62px; height:62px; padding:0; border:0; background:none; color:#ffe0a6; cursor:pointer; }
.terminal-reticle { position:absolute; inset:0; border:1px solid #ffe0a688; border-radius:50%; box-shadow:0 0 18px #efb66533; animation:terminal-breathe 2.4s ease-in-out infinite; }
.terminal-reticle::before,.terminal-reticle::after { content:""; position:absolute; border:2px solid #ffde9e; width:10px; height:10px; }
.terminal-reticle::before { top:4px; left:4px; border-right:0; border-bottom:0; }
.terminal-reticle::after { bottom:4px; right:4px; border-left:0; border-top:0; }
.terminal-callout { position:absolute; top:66px; left:50%; transform:translateX(-50%); min-width:145px; padding:8px 13px; background:linear-gradient(90deg,#101c27f5,#101c27cf); border-left:2px solid #ffde9e; text-align:left; white-space:nowrap; }
.terminal-callout small { display:block; font:8px "DM Mono",monospace; letter-spacing:2px; color:#c4a26e; }
.terminal-callout b { display:block; margin:3px 0; font-size:12px; }
.terminal-callout em { font-size:9px; color:#b8c9cb; font-style:normal; }
.warehouse-terminal:hover .terminal-reticle,.warehouse-terminal:focus-visible .terminal-reticle { background:#ffd68a22; border-color:#ffde9e; }
.warehouse-terminal:focus-visible { outline:2px solid #ffde9e; outline-offset:5px; border-radius:50%; }
.warehouse-scene-bottom { padding:12px 18px; color:#abc0c6; font-size:11px; line-height:1.6; }
.warehouse-scene.route-restored .warehouse-status,.warehouse-scene.route-restored .warehouse-location.unauthorized { color:#7ce9c2; }
.warehouse-scene.route-restored .terminal-reticle { border-color:#7ce9c2; box-shadow:0 0 24px #69e0b540; animation:none; }
.warehouse-scene.route-restored .terminal-callout { border-color:#7ce9c2; color:#baf7dc; }
@keyframes terminal-breathe { 50% { box-shadow:0 0 26px #efb66566; transform:scale(1.07); } }
@media(max-width:767px) { .warehouse-scene-top { padding:10px 12px; } .warehouse-scene-top b {font-size:11px} .warehouse-location {font-size:9px} .warehouse-location small {display:none} .warehouse-terminal {width:44px;height:44px} .terminal-callout {top:46px;min-width:120px;padding:6px 8px} .terminal-callout b {font-size:10px} .terminal-callout em {display:none} .warehouse-scene-bottom {padding:8px 12px;font-size:10px} }
.evidence-scene { display:flex; flex-direction:column; justify-content:center; background:#0a121c; }
.evidence-scene::before { display:none; }
.scene-meter { color:#f3c27d; font:11px "Noto Sans KR",sans-serif; letter-spacing:0; white-space:nowrap; }
.evidence-stage { position:relative; width:100%; aspect-ratio:7/4; overflow:hidden; }
.evidence-stage>img { width:100%; height:100%; object-fit:cover; display:block; }
.evidence-stage::after { content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0a121c22,transparent 65%,#0a121cb0); }
.scene-object { position:absolute;z-index:1;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:30px;height:30px;border:0;padding:0;background:none;color:#dcebe9;cursor:pointer; }
.scene-reticle { position:absolute;inset:0;display:grid;place-items:center;border:1px solid #c8e6e380;border-radius:50%;background:#07152070;box-shadow:0 0 15px #0008; }
.scene-reticle i {font-style:normal;font-size:12px}
.scene-object-label { position:absolute;top:35px;left:50%;transform:translateX(-50%);min-width:95px;padding:5px 8px;background:linear-gradient(90deg,#0a1523ed,#0a1523b0);border-left:2px solid #94b4b5;text-align:left;white-space:nowrap; }
.scene-object-label b {display:block;font-size:10px;font-weight:600}
.scene-object-label small {display:block;margin-top:3px;font-size:8px;color:#b1c4ca}
.scene-object.selected .scene-reticle,.scene-object:hover .scene-reticle,.scene-object:focus-visible .scene-reticle {border-color:#ffdc99;box-shadow:0 0 0 5px #ffdc9922,0 0 22px #ffdc9955;color:#ffdc99}
.scene-object.selected .scene-object-label {border-color:#ffdc99}
.scene-object:focus-visible {outline:2px solid #ffdc99;outline-offset:7px;border-radius:50%}
.scene-object.state-safe .scene-reticle,.scene-object.state-blocked .scene-reticle {border-color:#79e9c0;color:#79e9c0;background:#123f3280}
.scene-object.state-mira .scene-reticle {border-color:#c6a1ff;color:#c6a1ff}
.scene-object.state-threat .scene-reticle,.scene-object.state-executed .scene-reticle {border-color:#ff9984;color:#ff9984}
.scene-object:disabled {opacity:.55;cursor:default}
.scene-rail-progress {display:flex;align-items:center;gap:10px;padding:8px 18px;color:#afc3ca;font:9px "DM Mono",monospace}
.scene-track {height:3px;background:#526472;position:relative;flex:1}
.scene-train {position:absolute;top:-8px;left:calc(var(--progress)*100%);color:#7ce9c2;font-style:normal;transition:left .8s ease;text-shadow:0 0 12px #79e9c0}
.evidence-scene.recovering .scene-reticle {animation:incident-recovery .8s ease}
.evidence-scene.mira-secured .state-mira {animation:incident-stamp .6s ease}
.scene-room-strip {display:flex;gap:6px;padding:8px 12px;overflow-x:auto}
.scene-room-strip button {flex:1 0 62px;min-width:0;padding:0 0 5px;background:#121e2c;border:1px solid #465a6966;border-radius:7px;overflow:hidden;color:#dbe8ed;text-align:left}
.scene-room-strip img {width:100%;height:42px;object-fit:cover;display:block}
.scene-room-strip b,.scene-room-strip small {display:block;padding:3px 5px 0;font-size:9px}
.scene-room-strip small {font-size:8px;color:#a7bac3}
.scene-room-strip button.selected {border-color:#ffdc99}
@media(min-width:768px) and (max-width:1279px) { .evidence-stage {aspect-ratio:auto;height:330px} }
@media(max-width:767px) {
 .evidence-scene .warehouse-scene-top {padding:10px 12px;gap:5px}
 .evidence-scene .warehouse-scene-top b {font-size:11px}
 .scene-meter {font-size:9px}
 .scene-object-label {min-width:70px;padding:4px 6px}
 .scene-object-label b {font-size:9px}
 .scene-object-label small {font-size:7px}
 .scene-05 .evidence-stage {aspect-ratio:1.25}
 .scene-05 .scene-object-label {min-width:65px}
 .scene-05 .scene-object-label small {white-space:normal;max-width:73px}
}

/* 언어 선택 */
.lang-switch { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: rgba(5,10,18,.5); }
.lang-switch button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 7px; background: none; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.lang-switch button.active { background: var(--mint); color: #062119; font-weight: 700; }
.audio-row.lang-row { grid-template-columns: 1fr auto; }
.lang-button span { font-size: 11px; }

/* 5040 main: case imagery and immediate play choices. */
.start-screen { padding:24px max(4vw,24px) 20px; background:radial-gradient(ellipse at 60% 30%,#142537,transparent 65%),#090f1b; }
.hero { max-width:1400px; min-height:calc(100vh - 140px); grid-template-columns:1.05fr 1fr; gap:48px; padding:40px 0; }
.hero-copy { padding:0; }
.hero h1 { font-size:clamp(44px,4.6vw,70px); line-height:1.15; }
.hero-description { max-width:530px; margin:24px 0; font-size:14px; color:#b4c2d4; }
.incident-cover { align-self:stretch; min-height:540px; border-radius:22px; overflow:hidden; border:1px solid #314750; box-shadow:0 30px 100px #0008; }
.incident-cover>img { position:absolute; inset:0; width:100%;height:100%;object-fit:cover;object-position:46% 40%; }
.incident-cover::after { content:'';position:absolute;inset:0;background:linear-gradient(0deg,#061019 0%,transparent 55%);pointer-events:none; }
.incident-stamp { position:absolute;top:24px;left:24px;z-index:2;display:flex;align-items:center;gap:9px;padding:10px 14px;background:#08151bd9;border:1px solid #62867c66;border-radius:5px;font-size:11px;letter-spacing:.08em; }
.home-case-caption { position:absolute;z-index:2;bottom:32px;left:32px;right:24px; }
.home-case-caption>span { color:var(--mint);font:11px 'DM Mono',monospace;letter-spacing:.2em; }
.home-case-caption strong { display:block;margin:14px 0;font-size:36px;line-height:1.3;letter-spacing:-.04em; }
.home-case-caption p { margin:0;color:#bbc9d0;font-size:13px; }
#menu-main .mode-actions { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.mode-cover { position:relative;isolation:isolate;overflow:hidden;min-height:170px;padding:20px;align-items:flex-end;text-align:left;border:1px solid #45695788;color:#f4f7fa;background:#15212d;box-shadow:none; }
.mode-cover::before { content:'';position:absolute;z-index:-2;inset:0;background-size:cover;background-position:center;transition:transform .35s; }
.mode-cover::after { content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(0deg,#07121bf5, #07121b35); }
.campaign-entry::before { background-image:url('assets/story/warehouse_game_scene.webp'); }
.versus-entry::before { background-image:url('assets/home/versus.webp'); }
.mode-cover:hover::before { transform:scale(1.06); }
.mode-cover:hover { background:#15212d;border-color:var(--mint); }
.mode-cover-copy { display:flex;flex-direction:column;gap:9px; }
.mode-cover-copy small { color:var(--mint);font:9px 'DM Mono',monospace;letter-spacing:.12em; }
.mode-cover-copy strong { font-size:19px;line-height:1.3;letter-spacing:-.04em; }
.mode-cover-copy em { font-size:11px;font-style:normal;color:#bdcbd7; }
.mode-cover .mode-cover-arrow { font-size:24px;color:var(--mint); }
#menu-main .deck-entry { grid-column:1/-1;min-height:42px;font-size:12px; }
.quick-rules { margin-top:24px; }
.single-choices { max-width:none; }
.single-choice { overflow:hidden; }
.choice-art { width:calc(100% + 36px);height:138px;object-fit:cover;margin:-18px -18px 4px; }
.start-footer { max-width:1400px;margin:auto; }
@media(max-width:900px) { .hero { gap:24px;grid-template-columns:1fr 1fr; }.mode-cover { padding:14px; }.mode-cover-copy strong { font-size:16px; }.home-case-caption strong {font-size:28px;} }
@media(max-width:640px) { .start-screen {padding:18px 18px 22px;} .start-top {gap:8px;}.status-pill {display:none;}.start-top .lang-button {margin-left:auto;}.hero {display:flex;flex-direction:column;gap:22px;padding:28px 0;}.hero-copy {width:100%;}.hero h1 {font-size:42px;}.hero-description {font-size:12px;margin:18px 0;}.incident-cover {width:100%;min-height:300px;margin:0;order:-1;}.incident-cover>img {object-position:50% 32%;}.home-case-caption {left:22px;bottom:20px;}.home-case-caption strong {font-size:26px;margin:8px 0;}.incident-stamp {top:16px;left:16px;font-size:9px;}.home-case-caption p {font-size:11px;}.hero .eyebrow {font-size:9px;}.mode-cover {min-height:150px;}.quick-rules {gap:9px;font-size:10px;}.start-footer {font-size:8px;gap:12px;}.choice-art {height:160px;} }
@media(prefers-reduced-motion:reduce) { .mode-cover::before {transition:none;} }
.start-screen .mode-cover { min-width:0; }
.start-screen .mode-cover-copy { min-width:0; }
.start-screen .mode-cover-copy small { overflow-wrap:anywhere; }
.start-screen .home-case-caption { display:block; padding:0; }

/* Card collection: supply display, archive and loadout table. */
.deck-screen {max-width:1440px;padding:0 40px 40px;}
.lab-intro {display:flex;justify-content:space-between;align-items:center;gap:28px;padding:36px 0 26px;border-bottom:1px solid #29384a;}
.lab-intro h1 {font-size:clamp(26px,3vw,38px);margin:0 0 12px;letter-spacing:-.04em;}
.lab-intro p:not(.eyebrow) {margin:0;color:#a8b6c6;font-size:13px;line-height:1.8;}
.lab-progress {display:grid;gap:8px;min-width:180px;}.lab-progress b {font:32px 'DM Mono',monospace;color:var(--mint);}.lab-progress small {font-size:16px;color:#7e8da1;}.lab-progress span {font-size:11px;color:var(--muted);}.lab-progress meter {width:100%;height:8px;accent-color:var(--mint);}
.deck-tabs {gap:0;border-bottom:1px solid #29384a;margin:0 0 26px;}.deck-tabs button {flex:1;border:0;border-radius:0;padding:20px;background:transparent;}.deck-tabs button.active {border-bottom:3px solid var(--mint);background:transparent;}
.pack-stage {min-height:390px;gap:80px;background:#101b29;border:1px solid #304458;border-radius:20px;padding:40px;}
.pack-display {position:relative;isolation:isolate;padding:14px 65px;}.booster {position:relative;width:200px;animation:none;border-radius:6px;background:linear-gradient(145deg,#274b50,#122b38);box-shadow:12px 18px 0 #060d1680;border:1px solid #6a9488;overflow:hidden;}
.booster::before {content:'? ? ? ?';font:38px 'DM Mono',monospace;letter-spacing:8px;color:#76ad9b;transform:rotate(-12deg);margin-bottom:32px;}.booster::after {content:'';position:absolute;inset:6px;border-top:5px double #83ac9c;border-bottom:5px double #83ac9c;pointer-events:none;}.booster small {padding:0 12px;}.booster.empty {opacity:.8;}
.pack-fan {position:absolute;inset:36px 0;z-index:-1;}.pack-fan span {position:absolute;display:grid;place-items:center;inset:0 50px;background:#182635;border:1px solid #506679;border-radius:10px;font:30px 'DM Mono',monospace;color:#b3c4cf;transform:rotate(-18deg) translateX(-38px);}.pack-fan span:nth-child(2) {transform:rotate(18deg) translateX(38px);}.pack-fan span:nth-child(3) {transform:rotate(7deg) translateX(20px);}
.pack-actions {max-width:380px;gap:14px;}.pack-actions h2 {font-size:28px;line-height:1.4;margin:0;letter-spacing:-.04em;}.pack-actions>p:not(.eyebrow) {font-size:12px;color:var(--muted);margin:0;}.pack-actions .go-button {width:100%;min-height:54px;}.pack-odds {display:flex;gap:20px;padding:15px 0;font-size:11px;color:#aabac9;}.pack-odds b {display:block;font:20px 'DM Mono',monospace;margin-top:6px;color:#dfebed;}
.pack-await {display:flex;justify-content:center;gap:14px;margin:28px 0 12px;}.pack-await span {display:grid;place-items:center;width:100px;aspect-ratio:5/7;border:1px dashed #3a4a60;border-radius:10px;background:#111a27;font:28px 'DM Mono',monospace;color:#44556b;}.pack-await b {font-size:10px;font-weight:400;}
.collection-group {margin-bottom:32px;}.collection-group h3 {padding:12px 0;border-bottom:1px solid #29384a;}.collection-item {background:#111c2b;padding:22px 12px 16px;gap:12px;border-radius:12px;}.collection-item .lab-card {width:120px;}.collection-text {font-size:11px;line-height:1.7;}.collection-item.missing {background:#0e1521;}.collection-item.missing .lab-card {filter:grayscale(.7) brightness(.75);}.craft-btn {padding:7px 10px;}
.deck-pool,.deck-current {padding:22px;background:#111c2b;}.deck-pool h3,.deck-current h3 {padding-bottom:16px;border-bottom:1px solid #29384a;}.pool-grid {grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:24px 14px;}.pool-card .lab-card {width:110px;}.pool-card:disabled {opacity:.6;}.deck-hand-preview {display:flex;gap:9px;overflow-x:auto;padding:12px 0 18px;}.deck-hand-preview>button {flex-shrink:0;background:none;border:0;padding:0;cursor:pointer;}.deck-hand-preview .lab-card {width:86px;}.deck-list {max-height:300px;}.deck-row-item {padding:10px 8px;}.deck-actions {padding-top:14px;border-top:1px solid #29384a;}
@media(max-width:700px) {.deck-screen {padding:0 16px 28px;}.lab-intro {padding:24px 0;align-items:flex-start;gap:16px;}.lab-progress {min-width:90px;}.lab-progress b {font-size:25px;}.lab-progress small {font-size:12px;}.lab-intro h1 {font-size:24px;}.lab-intro p:not(.eyebrow) {font-size:11px;}.deck-tabs button {padding:16px 6px;}.pack-stage {padding:24px 18px;gap:30px;}.pack-actions {width:100%;}.pack-actions h2 {font-size:25px;}.pack-await {gap:8px;}.pack-await span {width:16%;}.collection-grid {grid-template-columns:repeat(2,minmax(0,1fr));}.collection-group h3 small {display:block;margin:6px 0;}.collection-item {padding:18px 8px;}.deck-editor {display:flex;flex-direction:column;}.deck-current {position:static;order:-1;width:100%;}.deck-pool {width:100%;}.deck-pool,.deck-current {padding:16px;}.pool-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 8px;}.pool-card .lab-card {width:100%;max-width:110px;}.deck-mode-tabs button {font-size:12px;}.deck-actions button {min-width:0;font-size:11px;}}
@media(prefers-reduced-motion:reduce) {.reveal-inner {animation:none;}}
@media(max-width:700px) {.pack-display {padding:10px 45px;}.booster {width:150px;}.booster::before {font-size:28px;letter-spacing:5px;margin-bottom:20px;}.booster b {font-size:23px;}.pack-fan {inset:30px 0;}.pack-fan span {inset:0 36px;}.pack-stage {gap:24px;}.deck-gauges {gap:6px;}.gauge {padding:8px;}}