/* 딥스트라이크 — UI 스킨 (원작 배틀마린의 크롬 금속 + 청록 유리 패널) */
:root {
  --steel-hi: #fbfcfd; --steel: #c9cfd4; --steel-lo: #7d858c; --steel-dk: #4a5157;
  --glass: rgba(6, 34, 50, 0.82); --glass2: rgba(10, 52, 72, 0.78);
  --cyan: #45d6f0; --cyan2: #8ff0ff; --gold: #ffcf3a; --orange: #ff8a1c; --red: #ff5a4a; --green: #5cf08a;
  --ink: #e8f8ff; --ink2: #9fc8d8;
  --f-ui: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --f-disp: "Arial Black", "Arial", Impact, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #01070b; overflow: hidden; color: var(--ink); font-family: var(--f-ui); user-select: none; -webkit-user-select: none; }
#frame { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 30%, #062232 0%, #01070b 70%); }
#stage { position: relative; width: 1024px; height: 768px; transform-origin: 0 0; position: absolute; left: 0; top: 0; overflow: hidden; box-shadow: 0 0 80px rgba(0, 180, 255, 0.12); }
#game { position: absolute; left: 0; top: 0; width: 1024px; height: 768px; display: block; }
#ui { position: absolute; left: 0; top: 0; width: 1024px; height: 768px; pointer-events: none; }   /* 가로로 넓은 화면이면 main.js 가 left 를 가운데로 */
#ui > * { pointer-events: auto; }
#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .35s; }
#fade.on { opacity: 1; }

/* ---------------------------------------------------------------- 부팅 */
#boot { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(circle at 50% 40%, #0a3a52, #01070b 70%); z-index: 50; transition: opacity .6s; }
#boot.done { opacity: 0; pointer-events: none; }
.boot-logo { font: 900 italic 64px var(--f-disp); letter-spacing: 2px; color: #fff; text-shadow: 0 4px 0 #0a5a7a, 0 0 30px rgba(80, 220, 255, .6); }
.boot-logo b { color: var(--gold); margin-left: 14px; text-shadow: 0 4px 0 #a2560a, 0 0 30px rgba(255, 190, 60, .5); }
.boot-sub { font: 800 18px var(--f-ui); letter-spacing: 12px; color: var(--cyan2); }
.boot-bar { width: 360px; height: 10px; border-radius: 6px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: 18px; box-shadow: inset 0 1px 3px #000; }
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2fb8e8, #9ff4ff); transition: width .25s; }
.boot-msg { font-size: 13px; color: var(--ink2); }

/* ---------------------------------------------------------------- 공통 */
.scr { position: absolute; inset: 0; animation: scrIn .35s ease both; }
.scr.out { animation: scrOut .25s ease both; }
@keyframes scrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes scrOut { to { opacity: 0; } }

.chrome {
  position: absolute; border-radius: 16px; padding: 6px;
  background: linear-gradient(180deg, var(--steel-hi) 0%, var(--steel) 12%, #e3e7ea 50%, #a9b0b6 88%, var(--steel-lo) 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0, 0, 0, .25);
}
.chrome::before { content: ""; position: absolute; inset: 3px; border-radius: 13px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.chrome > .in {
  position: relative; height: 100%; border-radius: 11px; overflow: hidden;
  background: linear-gradient(180deg, rgba(10, 48, 68, .96), rgba(4, 22, 34, .98));
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(90, 200, 240, .18);
}
.rivet { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #b9c0c6 45%, #5c646b); }
.head {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(90, 220, 255, .22), rgba(90, 220, 255, .04));
  border-bottom: 1px solid rgba(120, 230, 255, .25);
  font: 900 13px var(--f-disp); letter-spacing: 3px; color: var(--cyan2); text-shadow: 0 1px 0 #000;
}
.head > span { display: flex; align-items: center; gap: 10px; width: 100%; }
.head small { font: 700 12px var(--f-ui); letter-spacing: 0; color: var(--ink2); margin-left: 4px; }
.head .sp { flex: 1; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 10px; font: 800 11px var(--f-ui); background: rgba(255, 255, 255, .1); color: var(--ink2); }

.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 18px; border-radius: 19px; border: 0; cursor: pointer;
  font: 900 14px var(--f-ui); color: #fff; letter-spacing: .5px; text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
  background: linear-gradient(180deg, #6fd8ff 0%, #1f9ad8 45%, #0b5a96 100%);
  box-shadow: 0 0 0 2px #dfe5e9, 0 0 0 3px #7a838a, 0 4px 10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .7);
  transition: transform .08s, filter .15s;
}
.btn::after { content: ""; position: absolute; left: 10%; right: 10%; top: 3px; height: 38%; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); pointer-events: none; }
.btn:hover { filter: brightness(1.15) saturate(1.1); }
.btn:active { transform: translateY(1px) scale(.98); }
.btn[disabled], .btn.dis { filter: grayscale(1) brightness(.7); cursor: not-allowed; }
.btn.orange { background: linear-gradient(180deg, #ffd08a 0%, #ff8a1c 45%, #b8430a 100%); }
.btn.green { background: linear-gradient(180deg, #a8ffb8 0%, #2ec85a 45%, #0e7a30 100%); }
.btn.red { background: linear-gradient(180deg, #ffb0a0 0%, #e8402a 45%, #8a1a0a 100%); }
.btn.steel { color: #1d262c; text-shadow: 0 1px 0 #fff; background: linear-gradient(180deg, #ffffff 0%, #cfd5da 50%, #8f979d 100%); }
.btn.purple { background: linear-gradient(180deg, #e2b0ff 0%, #9a3fd8 45%, #4a1a7a 100%); }
.btn.big { height: 54px; border-radius: 27px; font-size: 20px; padding: 0 30px; }
.btn.sm { height: 28px; padding: 0 12px; font-size: 12px; border-radius: 14px; }
.btn.round { width: 34px; padding: 0; }

.lcd { font: 900 18px "Consolas", monospace; color: #e8f8ff; background: linear-gradient(180deg, #05090b, #141c20); border-radius: 8px; padding: 4px 10px; box-shadow: 0 0 0 2px #dfe5e9, 0 0 0 3px #6d767e, inset 0 1px 4px #000; letter-spacing: 2px; }
.money { color: var(--gold); }

/* ---------------------------------------------------------------- 타이틀 */
.title-logo { position: absolute; left: 0; right: 0; top: 84px; text-align: center; pointer-events: none; }
.title-logo .l1 { font: 900 italic 108px/1 var(--f-disp); color: #fff; letter-spacing: 3px; text-shadow: 0 6px 0 #0a5a7a, 0 10px 0 #06344a, 0 0 50px rgba(80, 220, 255, .55); -webkit-text-stroke: 2px rgba(0, 40, 60, .4); }
.title-logo .l1 b { color: var(--gold); text-shadow: 0 6px 0 #a2560a, 0 10px 0 #5a2a04, 0 0 50px rgba(255, 190, 60, .5); }
.title-logo .l2 { margin-top: 18px; font: 900 22px var(--f-ui); letter-spacing: 22px; color: var(--cyan2); text-shadow: 0 2px 0 #000, 0 0 16px rgba(80, 220, 255, .6); padding-left: 22px; }
.title-logo .l3 { margin-top: 10px; font: 700 13px var(--f-ui); color: rgba(200, 240, 255, .7); letter-spacing: 1px; }
/* 메인 메뉴: 윗줄 스토리·대전·멀티 3개(각 2칸), 아랫줄 도감·설정 2개(각 3칸) */
.menu { position: absolute; left: 50%; transform: translateX(-50%); top: 400px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px 18px; width: 900px; }
.menu .mbtn { grid-column: span 2; height: 76px; }
.menu .mbtn.half { grid-column: span 3; height: 56px; }
.mbtn { height: 64px; border-radius: 16px; justify-content: flex-start; padding: 0 22px; font-size: 20px; }
.mbtn .ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .25); font-size: 18px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
.mbtn .txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.mbtn .txt small { font: 700 11px var(--f-ui); opacity: .85; letter-spacing: 0; }
.title-foot { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; font-size: 12px; color: rgba(180, 225, 240, .55); }
.title-profile { position: absolute; right: 18px; top: 16px; display: flex; gap: 10px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 16px; background: rgba(0, 20, 30, .6); box-shadow: inset 0 0 0 1px rgba(120, 230, 255, .3); font: 800 13px var(--f-ui); }

/* ---------------------------------------------------------------- 대기실 */
.room-slots { left: 16px; top: 16px; width: 470px; height: 522px; }
.slot { display: grid; grid-template-columns: 58px 44px 1fr auto auto; align-items: center; gap: 8px; height: 50px; margin: 6px 8px; padding: 0 8px; border-radius: 10px; background: linear-gradient(180deg, rgba(30, 80, 110, .55), rgba(10, 40, 60, .55)); box-shadow: inset 0 0 0 1px rgba(120, 220, 255, .18); }
.slot.me { box-shadow: inset 0 0 0 2px rgba(255, 210, 60, .7); }
.slot.empty { opacity: .55; background: rgba(0, 20, 30, .4); }
.slot .st { font: 900 10px var(--f-disp); text-align: center; padding: 3px 0; border-radius: 6px; background: linear-gradient(180deg, #e8eef2, #8f99a0); color: #1d262c; }
.slot .st.ready { background: linear-gradient(180deg, #d2ffd8, #3ac85a); color: #053a14; }
.slot .st.ai { background: linear-gradient(180deg, #ffe7b8, #e0962a); color: #3a2000; }
.slot canvas { width: 44px; height: 34px; }
.slot .nm { font: 800 14px var(--f-ui); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.slot .nm small { display: block; font: 700 11px var(--f-ui); color: var(--ink2); }
.teamsel { display: flex; gap: 4px; }
.teamsel b { width: 30px; height: 26px; display: grid; place-items: center; border-radius: 6px; font: 900 13px var(--f-disp); background: rgba(0, 0, 0, .35); color: rgba(255, 255, 255, .3); cursor: pointer; }
.teamsel b.on.A { background: linear-gradient(180deg, #ffe08a, #e8a21a); color: #3a2400; }
.teamsel b.on.B { background: linear-gradient(180deg, #a8ecff, #2aa8e0); color: #002a3a; }
.slot .x { cursor: pointer; opacity: .6; font-size: 16px; }
/* 슬롯 안 아이템 4칸 — 각 플레이어(나·AI·상대) 가 뭘 들고 왔는지 우측 여백에 표시 */
.slot-items { display: flex; gap: 2px; align-items: center; }
.slot-items canvas { width: 20px; height: 20px; display: block; }
.slot-items .sl { width: 20px; height: 20px; border-radius: 50%; }
.slot-items.mine { cursor: pointer; padding: 3px 4px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(200,150,255,.45); }
.slot-items.mine:hover { box-shadow: inset 0 0 0 2px var(--cyan); background: rgba(120,230,255,.12); }
.slot-items .buy { margin-left: 3px; font-size: 13px; line-height: 1; opacity: .9; }
.slot.empty .slot-items { visibility: hidden; }

.slot .x:hover { opacity: 1; color: var(--red); }
.addbot { display: flex; gap: 6px; margin: 8px; }

.room-chars { left: 498px; top: 16px; width: 510px; height: 330px; }
.pgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 8px 12px 4px; }   /* 0924 26종 → 7열×4줄(히든 포함 25칸+랜덤) */
.pgrid-wrap { overflow: hidden; }   /* 스크롤 없이 한눈에 (7열 × 4줄) */
.pcell { position: relative; height: 41px; border-radius: 8px; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); transition: transform .1s; }
.pcell canvas { width: 100% !important; height: 100% !important; display: block; object-fit: cover; object-position: center; }
.pcell:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--cyan); }
.pcell.sel { box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(255, 210, 60, .6); }
/* 스토리 브리핑 용병 카드 (0918) */
.merc { display: flex; align-items: center; gap: 8px; height: 50px; padding: 4px 8px; border-radius: 8px; cursor: pointer; background: rgba(0, 0, 0, .32); box-shadow: 0 0 0 2px rgba(0, 0, 0, .5); transition: transform .1s; }
.merc canvas { width: 52px !important; height: 36px !important; border-radius: 6px; flex: none; }
.merc:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--cyan); }
.merc.sel { box-shadow: 0 0 0 3px var(--gold), 0 0 14px rgba(255, 210, 60, .6); background: rgba(60, 45, 0, .45); }
.pcell.lock { cursor: not-allowed; }
.pcell.lock::after { content: "🔒"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 10, 16, .6); font-size: 18px; }
.pcell .nm { position: absolute; left: 0; right: 0; bottom: 0; font: 800 9.5px var(--f-ui); letter-spacing: -.3px; white-space: nowrap; text-align: center; background: linear-gradient(0deg, rgba(0, 0, 0, .8), transparent); padding: 6px 0 1px; }
.subinfo { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 14px 14px 10px; margin: 6px 12px 0; border-top: 1px solid rgba(120, 220, 255, .18); }
.subinfo canvas { width: 150px; height: 96px; border-radius: 10px; box-shadow: 0 0 0 2px #dfe5e9, 0 0 0 3px #6d767e; }
.subinfo h3 { margin: 0 0 2px; font: 900 18px var(--f-ui); color: #fff; }
.subinfo h3 small { font: 700 11px var(--f-ui); color: var(--ink2); margin-left: 6px; }
.subinfo p { margin: 4px 0 10px; font-size: 11.5px; color: var(--ink2); line-height: 1.45; }
.bars { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 16px; }
.bar { display: grid; grid-template-columns: 50px 1fr 22px; align-items: center; gap: 6px; font: 800 10.5px var(--f-ui); color: var(--ink2); }
.bar i { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; box-shadow: inset 0 1px 2px #000; }
.bar i u { display: block; height: 100%; background: linear-gradient(90deg, #2fb8e8, #b8f4ff); }
.bar em { font-style: normal; text-align: right; color: #fff; }

.room-opts { left: 498px; top: 356px; width: 510px; height: 182px; }
.opts { display: grid; grid-template-columns: 168px 1fr; gap: 10px; padding: 10px; }
.mapprev { position: relative; width: 168px; height: 118px; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px #dfe5e9, 0 0 0 3px #6d767e; }
.mapprev canvas { width: 100%; height: 100%; }
.mapprev .nm { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 6px 4px; font: 800 12px var(--f-ui); background: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent); text-align: center; }
.optrow { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font: 800 12px var(--f-ui); color: var(--ink2); }
.optrow .lab { width: 64px; }
.seg { display: flex; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 2px #dfe5e9, 0 0 0 3px #6d767e; }
.seg b { padding: 6px 12px; font: 800 12px var(--f-ui); background: linear-gradient(180deg, #33434d, #182228); color: rgba(255, 255, 255, .55); cursor: pointer; }
.seg b.on { background: linear-gradient(180deg, #8fe8ff, #1f9ad8); color: #fff; text-shadow: 0 1px 1px #000; }

.room-bottom { left: 16px; top: 550px; width: 992px; height: 204px; }
.items4 { display: flex; gap: 10px; align-items: center; }
.orb { width: 54px; height: 54px; cursor: pointer; }
.orb canvas { width: 54px; height: 54px; }

/* ---------------------------------------------------------------- 상점 */
.shop-wrap { left: 16px; top: 16px; width: 992px; height: 736px; }
.shop-row { position: relative; margin: 10px 12px; height: 256px; border-radius: 14px; background: linear-gradient(180deg, #0f6e6a 0%, #0a4a4c 60%, #06303a 100%); box-shadow: inset 0 0 0 1px rgba(150, 255, 230, .25), inset 0 2px 10px rgba(0, 0, 0, .5); overflow: hidden; }
.shop-row.def { background: linear-gradient(180deg, #0f5a86 0%, #0a3e62 60%, #062a44 100%); }
.shop-row h4 { position: absolute; right: 18px; top: 8px; margin: 0; font: 900 22px var(--f-ui); color: rgba(210, 255, 245, .9); text-shadow: 0 2px 0 rgba(0, 0, 0, .5); letter-spacing: 3px; }
.shop-cards { position: absolute; left: 14px; right: 150px; top: 44px; bottom: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.card { position: relative; border-radius: 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(0, 0, 0, .25)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); padding: 10px; display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px rgba(160, 255, 240, .8), 0 8px 18px rgba(0, 0, 0, .4); }
.card canvas { width: 86px; height: 86px; }
.card .en { font: 900 10px var(--f-disp); color: rgba(255, 255, 255, .7); letter-spacing: 1px; margin-top: 2px; }
.card .nm { font: 900 15px var(--f-ui); color: #fff; }
.card .ds { font: 600 11px var(--f-ui); color: rgba(230, 250, 255, .85); text-align: center; margin: 4px 0; line-height: 1.35; min-height: 30px; }
.card .ft { margin-top: auto; display: flex; justify-content: space-between; width: 100%; align-items: center; }
.card .pr { font: 900 14px "Consolas", monospace; color: var(--gold); }
.card .dl { font: 800 10px var(--f-ui); padding: 2px 7px; border-radius: 8px; background: rgba(0, 0, 0, .35); }
.dl.low { color: #8fffa8; } .dl.mid { color: #ffe08a; } .dl.high { color: #ff9a8a; }
.pager { position: absolute; right: 14px; top: 96px; display: flex; flex-direction: column; gap: 10px; }
.shop-foot { position: absolute; left: 12px; right: 12px; bottom: 46px; height: 104px; display: flex; align-items: center; gap: 18px; padding: 0 18px; border-radius: 14px; background: linear-gradient(180deg, #e9edf0, #9aa2a8); box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(0, 0, 0, .4); color: #1d262c; }
.shop-foot .slotbox { width: 88px; height: 80px; border-radius: 10px; background: linear-gradient(180deg, #111, #2a3238); box-shadow: inset 0 2px 6px #000; display: grid; place-items: center; cursor: pointer; position: relative; }
.shop-foot .slotbox canvas { width: 70px; height: 70px; }
.shop-foot .slotbox small { position: absolute; bottom: -16px; font: 900 10px var(--f-disp); color: #39434a; }

/* ---------------------------------------------------------------- 결과 */
.res-wrap { left: 0; top: 0; width: 1024px; height: 768px; }
.res-band { position: absolute; left: 0; right: 0; height: 150px; background: linear-gradient(180deg, rgba(20, 100, 170, .85), rgba(6, 40, 80, .85)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -1px 0 rgba(0, 0, 0, .5); }
.res-band.lose { background: linear-gradient(180deg, rgba(70, 76, 84, .85), rgba(30, 34, 40, .85)); }
.res-band h2 { position: absolute; left: 22px; top: 14px; margin: 0; font: 400 34px/1 "Arial", sans-serif; letter-spacing: 5px; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .5); }
.res-band h2::first-letter { font-size: 48px; }
.res-cards { position: absolute; left: 236px; right: 20px; top: 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rcard { border-radius: 12px; overflow: hidden; background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 2px rgba(255, 255, 255, .2); }
.rcard canvas { display: block; width: 100%; height: 76px; }
.rcard .nm { font: 800 13px var(--f-ui); text-align: center; padding: 4px; background: linear-gradient(180deg, #e8eef2, #9aa2a8); color: #1d262c; }
.rcard .sv { display: flex; justify-content: space-around; font: 800 11px var(--f-ui); padding: 3px 0 5px; color: var(--ink); }
.res-money { position: absolute; left: 20px; right: 20px; bottom: 20px; height: 84px; border-radius: 16px; display: flex; align-items: center; gap: 18px; padding: 0 20px; background: linear-gradient(180deg, #e9edf0, #9aa2a8); box-shadow: 0 4px 16px rgba(0, 0, 0, .5); }
.res-money .lcdbig { flex: 1; min-width: 0; white-space: nowrap; font: 900 30px "Consolas", monospace; letter-spacing: 3px; color: #7ff4ff; background: #03080b; border-radius: 12px; padding: 6px 18px; box-shadow: inset 0 2px 8px #000; text-shadow: 0 0 10px rgba(80, 240, 255, .7); }

/* ---------------------------------------------------------------- 스토리 */
.story-map { left: 16px; top: 16px; width: 992px; height: 736px; }
.snode { position: absolute; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: transform .15s; }
.snode:hover { transform: scale(1.08); }
.snode canvas { width: 92px; height: 92px; border-radius: 50%; }
.snode .no { position: absolute; top: -8px; left: -6px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 900 14px var(--f-disp); background: linear-gradient(180deg, #ffe08a, #e8962a); color: #3a2000; box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.snode .stars { position: absolute; bottom: -18px; font-size: 14px; letter-spacing: -1px; color: #555; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.snode .stars .on { color: var(--gold); }
.snode.lock { filter: grayscale(1) brightness(.5); cursor: not-allowed; }
.snode.next::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 3px solid var(--gold); animation: pulse 1.2s infinite; }
@keyframes pulse { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
.dialog { position: absolute; left: 40px; right: 40px; bottom: 30px; height: 190px; }
.dialog .in { display: grid; grid-template-columns: 200px 1fr; gap: 18px; padding: 14px; }
.dialog canvas { width: 200px; height: 160px; border-radius: 12px; box-shadow: 0 0 0 2px #dfe5e9, 0 0 0 3px #6d767e; }
.dialog .who { font: 900 20px var(--f-ui); color: var(--gold); margin: 4px 0 8px; }
.dialog .say { font: 600 19px/1.6 var(--f-ui); color: #fff; white-space: pre-wrap; }
.dialog .next { position: absolute; right: 22px; bottom: 16px; font: 800 12px var(--f-ui); color: var(--cyan2); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.brief { left: 162px; top: 90px; width: 700px; height: 560px; }
.brief .body { padding: 18px 26px; }
.brief h2 { margin: 0; font: 900 30px var(--f-ui); color: #fff; }
.brief h2 small { display: block; font: 900 13px var(--f-disp); letter-spacing: 4px; color: var(--cyan2); margin-bottom: 4px; }
.brief .goal { margin: 12px 0; padding: 12px 16px; border-radius: 12px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(120, 230, 255, .2); font-size: 15px; line-height: 1.6; }
.brief .goal b { color: var(--gold); }
.brief ul { margin: 6px 0; padding-left: 20px; font-size: 14px; line-height: 1.7; color: var(--ink); }

/* ---------------------------------------------------------------- 모달 / 토스트 */
.modal-bg { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--ui-ox, 0px)); width: var(--view-w, 100%); background: rgba(0, 6, 10, .6); display: grid; place-items: center; animation: scrIn .2s both; }
.modal { position: relative !important; min-width: 380px; }
.modal .body { padding: 20px 24px; text-align: center; }
.modal h3 { margin: 0 0 10px; font: 900 22px var(--f-ui); color: #fff; }
.modal p { margin: 0 0 16px; color: var(--ink2); font-size: 14px; line-height: 1.6; }
.modal .row { display: flex; gap: 12px; justify-content: center; }
.input { height: 38px; border-radius: 10px; border: 0; padding: 0 12px; font: 800 16px var(--f-ui); color: #fff; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(120, 230, 255, .35), inset 0 2px 4px #000; outline: none; }
.input:focus { box-shadow: inset 0 0 0 2px var(--cyan), inset 0 2px 4px #000; }
.slider { width: 220px; accent-color: #2fb8e8; }
.toast-ui { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); padding: 10px 22px; border-radius: 20px; background: rgba(2, 16, 24, .9); box-shadow: inset 0 0 0 1px rgba(120, 230, 255, .45); font: 800 14px var(--f-ui); animation: scrIn .2s both; pointer-events: none; z-index: 30; }
.unlock-pop { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }

/* 도감 */
.dex-wrap { left: 16px; top: 16px; width: 992px; height: 736px; }
.dex-list { position: absolute; left: 12px; top: 46px; bottom: 12px; width: 330px; overflow-y: auto; padding-right: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start; }
.dex-list::-webkit-scrollbar { width: 8px; } .dex-list::-webkit-scrollbar-thumb { background: rgba(120, 220, 255, .35); border-radius: 4px; }
.dex-detail { position: absolute; left: 356px; right: 12px; top: 46px; bottom: 12px; }
.dex-detail canvas.big { width: 610px; height: 300px; border-radius: 14px; box-shadow: 0 0 0 2px #dfe5e9, 0 0 0 3px #6d767e; }
.kbd { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 5px; background: linear-gradient(180deg, #f0f3f5, #a8b0b6); color: #1d262c; font: 800 11px var(--f-ui); box-shadow: 0 2px 0 #5c646b; margin: 0 2px; }

/* 멀티 로비 */
.lobby-wrap { left: 16px; top: 16px; width: 992px; height: 736px; }
.rooms { padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.roomcard { padding: 12px 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(30, 90, 120, .55), rgba(10, 40, 60, .55)); box-shadow: inset 0 0 0 1px rgba(120, 220, 255, .2); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.roomcard:hover { box-shadow: inset 0 0 0 2px var(--cyan); }
.chatlog { height: 120px; overflow-y: auto; padding: 8px 12px; font-size: 13px; line-height: 1.5; }
.chatlog .sys { color: var(--cyan2); }
.chatlog b { color: var(--gold); }