:root {
  --bg: #2b1a2e;
  --bg2: #3b2440;
  --panel: rgba(28, 16, 32, 0.92);
  --line: rgba(255, 255, 255, 0.12);
  --text: #f4e9f7;
  --muted: #b89cc0;
  --gold: #ffd54f;
  --mana: #80deea;
  --primary: #ff7043;
  --coop: #66bb6a;
  --boss: #ab47bc;
  --danger: #ef5350;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; overscroll-behavior: none; }
body { touch-action: manipulation; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }
.hidden { display: none !important; }

/* 애드센스가 광고 조상 요소에 height:auto!important 를 끼워 넣어도 화면이 무너지지 않도록 절대 위치로 꽉 채움 */
#app { position: absolute; inset: 0; }
.screen { display: none; position: absolute; inset: 0; }
.screen.active { display: flex; align-items: center; justify-content: center; }

/* ===== 공통 버튼 ===== */
.btn {
  border: 2px solid rgba(0,0,0,.45); border-radius: 14px; padding: 10px 16px; color: #fff; font-weight: 800;
  background: linear-gradient(#7a5682, #4a2f50); text-shadow: 0 2px 0 rgba(0,0,0,.45);
  box-shadow: 0 4px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.18); transition: transform .06s, filter .1s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.2); }
.btn.big { padding: 14px 20px; font-size: 18px; width: 100%; }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn.primary { background: linear-gradient(#ff8a65, #e64a19); }
.btn.coop { background: linear-gradient(#81c784, #388e3c); }
.btn.boss { background: linear-gradient(#ce93d8, #8e24aa); }
.btn.ghost { background: transparent; box-shadow: none; border-color: transparent; text-shadow: none; color: var(--muted); }
.btn:disabled { opacity: .45; cursor: default; }

/* ===== 타이틀 ===== */
#screen-title { background: radial-gradient(circle at 50% 20%, #5b2d5e, var(--bg) 60%); }
.title-box { width: min(420px, 92vw); text-align: center; }
.logo { font-size: 72px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
h1 { margin: 6px 0 2px; font-size: 40px; letter-spacing: -1px; text-shadow: 0 4px 0 #000; }
.sub { margin: 0 0 18px; color: var(--muted); }
.field { display: block; text-align: left; margin-bottom: 14px; }
.field span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.field input, .join-row input {
  width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(0,0,0,.3); color: #fff; font-size: 16px;
}
.menu { display: grid; gap: 10px; }
.records { margin-top: 16px; font-size: 13px; color: var(--muted); line-height: 1.6; }

/* ===== 로비 ===== */
.panel { width: min(460px, 94vw); max-height: 94vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.panel-head h2 { margin: 0; font-size: 20px; }
.panel h3 { margin: 10px 0 6px; font-size: 14px; color: var(--muted); }
.diff-list { display: grid; gap: 6px; }
.diff { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 2px solid transparent; background: rgba(255,255,255,.05); cursor: pointer; text-align: left; color: var(--text); }
.diff.sel { border-color: var(--primary); background: rgba(255,112,67,.15); }
.diff b { min-width: 52px; }
.diff small { color: var(--muted); font-size: 12px; }
.actions { display: grid; gap: 8px; margin-top: 14px; }
.join-row { display: flex; gap: 8px; }
.join-row input { text-transform: uppercase; letter-spacing: 4px; text-align: center; }
.hint { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
.room-code { font-size: 18px; margin: 6px 0; }
.room-code b { font-size: 30px; letter-spacing: 6px; color: var(--gold); margin: 0 6px; }
.room-players { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.room-players li { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.06); display: flex; justify-content: space-between; }
.room-players .ok { color: var(--coop); font-weight: 700; }

/* ===== 게임 ===== */
#screen-game { background: #1a0f1d; }
#game-wrap { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
#board { display: block; background: #241527; touch-action: none; margin: 52px 0 72px; }

#hud-top {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: var(--boardw, 100%);
  display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 8px; gap: 6px; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.7), transparent);
}
.hud-wave { font-weight: 800; }
.wave-num { font-size: 26px; text-shadow: 0 2px 0 #000; line-height: 1; } .wave-num span { font-size: 13px; color: var(--muted); }
.wave-next { font-size: 15px; color: #fff; margin-top: 2px; } .wave-next b { color: var(--gold); font-size: 18px; }
.wave-mode { display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 8px; font-size: 12px; font-weight: 800; background: rgba(255,255,255,.14); border: 1px solid var(--line); }
.wave-mode[data-diff="easy"] { background: rgba(102,187,106,.3); } .wave-mode[data-diff="normal"] { background: rgba(66,165,245,.3); }
.wave-mode[data-diff="hard"] { background: rgba(255,167,38,.35); } .wave-mode[data-diff="hell"] { background: rgba(239,83,80,.4); }
.wave-mode[data-diff="abyss"] { background: rgba(171,71,188,.45); } .wave-mode[data-diff="deepsea"] { background: rgba(26,35,126,.7); } .wave-mode[data-diff="tower"] { background: rgba(120,144,156,.45); }
.hud-castle { flex: 1; max-width: 180px; padding-top: 4px; }
.castle-bar { position: relative; height: 18px; border-radius: 9px; background: rgba(0,0,0,.5); border: 1px solid var(--line); overflow: hidden; }
#castle-fill { height: 100%; width: 100%; background: linear-gradient(#ff8a80, #d32f2f); transition: width .3s; }
.castle-bar span { position: absolute; inset: 0; text-align: center; font-size: 12px; font-weight: 700; line-height: 16px; }
.hud-res { display: grid; gap: 2px; text-align: right; font-weight: 700; font-size: 14px; }
.res.gold b { color: var(--gold); } .res.mana b { color: var(--mana); }
#hud-partner { position: absolute; top: 60px; right: calc(50% - var(--boardw, 100%)/2 + 8px); font-size: 12px; color: var(--muted); background: rgba(0,0,0,.45); padding: 4px 8px; border-radius: 8px; pointer-events: none; }
#hud-boss { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); min-width: 260px; background: rgba(120,0,30,.88); border: 2px solid #ff5252; padding: 6px 14px; border-radius: 12px; font-weight: 800; pointer-events: none; text-align: center; z-index: 4; }
#hud-boss .bname { font-size: 15px; } #hud-boss .bhp { font-weight: 600; font-size: 13px; color: #ffcdd2; margin-left: 6px; }
#hud-boss .bbar { height: 8px; border-radius: 4px; background: rgba(0,0,0,.5); margin: 4px 0; overflow: hidden; } #hud-boss .bbar i { display: block; height: 100%; background: linear-gradient(#ff8a80, #d50000); transition: width .2s; }
#hud-boss .btimer { font-size: 13px; color: #ffe0b2; } #hud-boss .btimer b { font-size: 20px; color: #fff; }
#hud-boss.urgent { animation: urgent .5s ease-in-out infinite alternate; } #hud-boss.urgent .btimer b { color: #ff5252; font-size: 24px; }
@keyframes urgent { from { box-shadow: 0 0 0 0 rgba(255,82,82,.6); } to { box-shadow: 0 0 18px 6px rgba(255,82,82,.9); } }
#result-why { margin: 8px 0; padding: 10px 12px; border-radius: 12px; background: rgba(255,82,82,.12); border: 1px solid rgba(255,82,82,.5); font-size: 13px; text-align: left; line-height: 1.5; }
#result-why .why { font-weight: 800; color: #ffab91; } #result-why .tip { color: var(--muted); margin-top: 4px; }

#toasts { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); display: grid; gap: 4px; pointer-events: none; z-index: 5; }
.toast { background: rgba(0,0,0,.75); border: 1px solid var(--line); padding: 6px 12px; border-radius: 10px; font-size: 13px; animation: toast 3s forwards; white-space: nowrap; }
.toast.err { border-color: var(--danger); color: #ff8a80; }
.toast.good { border-color: var(--coop); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-6px);} 10% { opacity: 1; transform: none;} 80% { opacity: 1;} 100% { opacity: 0; } }

#missions { position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%); width: calc(var(--boardw, 100%) - 12px); max-width: 420px; display: grid; gap: 4px; pointer-events: none; z-index: 4; }
.mission { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 12px; }
.mission .bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.15); margin-top: 3px; overflow: hidden; }
.mission .bar i { display: block; height: 100%; background: var(--gold); }
.mission .rw { color: var(--muted); }

#hud-bottom {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: var(--boardw, 100%);
  display: flex; gap: 4px; padding: 6px; background: linear-gradient(transparent, rgba(0,0,0,.8) 40%);
}
.act { flex: 1; border: 2px solid rgba(0,0,0,.45); border-radius: 14px; background: linear-gradient(#6b4a72, #3e2744); color: #fff; padding: 6px 2px; display: grid; justify-items: center; gap: 1px; min-width: 0; text-shadow: 0 2px 0 rgba(0,0,0,.5); box-shadow: 0 4px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.2); transition: transform .06s; }
.act:hover { filter: brightness(1.08); }
.act:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.45); }
.act .ic { filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.act.summon:not(.disabled) { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 4px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.25), 0 0 0 0 rgba(255,138,101,.0); } 50% { box-shadow: 0 4px 0 rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.25), 0 0 18px 4px rgba(255,138,101,.45); } }
.act.summon { background: linear-gradient(#ff8a65, #d84315); flex: 1.4; }
.act .ic { font-size: 20px; } .act .lb { font-size: 11px; font-weight: 700; } .act .cost { font-size: 10px; color: var(--gold); }
.act.disabled { opacity: .5; }
.act.on { background: #2e7d32; }

#unit-panel, #upgrade-panel {
  position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%); width: calc(var(--boardw, 100%) - 12px); max-width: 420px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px; z-index: 4;
}
.up-head { display: flex; align-items: center; gap: 10px; }
.up-emoji { font-size: 34px; }
.up-name { font-weight: 800; font-size: 16px; } .up-grade { font-size: 12px; font-weight: 700; }
.up-head .btn { margin-left: auto; }
.up-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin: 8px 0; }
.up-stats b { color: var(--text); }
.up-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.up-actions .btn { padding: 8px 4px; font-size: 13px; }
.panel-title { display: flex; justify-content: space-between; align-items: center; font-weight: 800; margin-bottom: 6px; }
.upg-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.upg-row .g { font-weight: 800; min-width: 44px; } .upg-row .lv { color: var(--muted); font-size: 12px; flex: 1; }

#card-modal { position: absolute; inset: 0; background: rgba(0, 40, 30, .8); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 6; padding: 12px; }
.card-title { font-size: 22px; font-weight: 900; color: #a5ffd6; margin-bottom: 12px; text-shadow: 0 0 12px #00e676; }
.card-list { display: grid; gap: 10px; width: min(420px, 100%); }
.card { display: flex; gap: 12px; align-items: center; background: linear-gradient(90deg, #0f3d2e, #1b5e20); border: 2px solid #69f0ae; border-radius: 14px; padding: 12px; cursor: pointer; text-align: left; color: #fff; }
.card:active { transform: scale(.98); }
.card .ce { font-size: 36px; } .card .cn { font-weight: 900; color: #ffd54f; font-size: 16px; } .card .cd { font-size: 12px; margin-top: 2px; }

#chat { position: absolute; bottom: 74px; left: 50%; transform: translateX(-50%); width: calc(var(--boardw, 100%) - 12px); max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 8px; z-index: 4; }
#chat-log, #chat-glog { max-height: 110px; min-height: 60px; overflow: auto; font-size: 12px; display: grid; gap: 2px; align-content: start; margin-bottom: 6px; }
#chat-log b, #chat-glog b { color: var(--gold); } #chat-glog .me b { color: var(--mana); } #chat-glog .t { color: var(--muted); font-size: 10px; margin-left: 4px; }
#game-wrap.wide #chat-log, #game-wrap.wide #chat-glog { max-height: 200px; }
.chat-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.ctab { flex: 1; padding: 5px 6px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--muted); font-size: 12px; font-weight: 700; }
.ctab.on { background: rgba(255,213,79,.18); color: #fff; border-color: var(--gold); }
#chat.solo .ctab[data-scope="room"], #chat.solo .chat-quick { display: none; }
#chat.global .chat-quick, #chat.global #chat-log { display: none; } #chat.room #chat-glog { display: none; }
.chat-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.chat-quick button { border: 0; border-radius: 8px; padding: 8px 4px; background: #5a3d60; color: #fff; font-size: 12px; font-weight: 700; }

#result { position: absolute; inset: 0; background: rgba(0,0,0,.75); display: flex; align-items: center; justify-content: center; z-index: 8; }
.result-box { width: min(380px, 92%); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px; text-align: center; }
.result-box h2 { margin: 0 0 6px; font-size: 36px; }
#result-stats { text-align: left; font-size: 13px; color: var(--muted); line-height: 1.7; margin: 10px 0; }

/* ===== 전투 밖 성장 ===== */
.wallet { display: flex; justify-content: center; gap: 18px; margin: 8px 0 10px; font-weight: 800; font-size: 16px; }
.wallet span b { color: var(--gold); }
.wallet.small { margin: 0 0 0 auto; font-size: 13px; gap: 10px; }
.menu.row2 { grid-template-columns: 1fr 1fr; margin-bottom: 6px; }
.btn.gacha { background: linear-gradient(#f48fb1, #c2185b); }
.panel.wide { width: min(560px, 96vw); }
.monster-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.mcard { background: rgba(255,255,255,.06); border: 2px solid transparent; border-radius: 12px; padding: 8px 4px; text-align: center; cursor: pointer; color: var(--text); }
.mcard.sel { border-color: var(--primary); }
.mcard img { width: 56px; height: 56px; }
.mcard .mn { font-weight: 800; font-size: 13px; }
.mcard .ml { font-size: 12px; color: var(--gold); }
.mcard .bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); margin: 4px 6px 0; overflow: hidden; }
.mcard .bar i { display: block; height: 100%; background: #80deea; }
.mcard .ms { font-size: 11px; color: var(--muted); }
#monster-detail { margin-top: 10px; background: rgba(0,0,0,.25); border-radius: 12px; padding: 10px; }
.mdetail-row { display: flex; gap: 6px; justify-content: space-between; flex-wrap: wrap; }
.mdetail-row .g { text-align: center; font-size: 11px; width: 64px; }
.mdetail-row .g img { width: 48px; height: 48px; display: block; margin: 0 auto; }
.mdetail-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.gacha-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.gacha-results { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; min-height: 60px; }
.gres { text-align: center; border-radius: 10px; padding: 6px 2px; background: rgba(255,255,255,.06); border: 2px solid var(--line); animation: pop .35s both; }
.gres img { width: 48px; height: 48px; }
.gres .rn { font-size: 11px; font-weight: 800; }
.gres .rs { font-size: 11px; color: var(--muted); }
.gres.r1 { border-color: #42a5f5; } .gres.r2 { border-color: #ab47bc; box-shadow: 0 0 12px rgba(171,71,188,.6); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.reward-box { margin: 8px 0; padding: 10px; border-radius: 12px; background: rgba(255,213,79,.12); border: 1px solid rgba(255,213,79,.4); font-weight: 700; font-size: 14px; line-height: 1.7; }
.reward-box small { color: var(--muted); font-weight: 400; }

/* ===== 유물 / 룬 ===== */
.menu.row3 { grid-template-columns: 1fr 1fr 1fr; margin-bottom: 6px; }
.menu.row3 .btn { padding: 12px 6px; font-size: 14px; }
.btn.relic { background: linear-gradient(#ffd54f, #f9a825); color: #3e2723; }
.relic-list { display: grid; gap: 6px; }
.rrow { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.06); border-radius: 10px; padding: 8px 10px; }
.rrow .re { font-size: 26px; width: 34px; text-align: center; }
.rrow .rt { flex: 1; min-width: 0; }
.rrow .rn { font-weight: 800; font-size: 14px; }
.rrow .rd { font-size: 12px; color: var(--muted); }
.rrow .rl { font-size: 12px; color: var(--gold); font-weight: 700; }
.rrow .btn { padding: 8px 10px; font-size: 13px; white-space: nowrap; }
.rune-ctl { display: flex; align-items: center; gap: 6px; }
.rune-ctl b { min-width: 22px; text-align: center; font-size: 16px; }
.rune-ctl .btn { padding: 6px 10px; }
.lib-box { margin-top: 8px; padding: 8px; border-radius: 10px; background: rgba(38,198,218,.12); border: 1px solid rgba(38,198,218,.4); font-size: 13px; }
.lib-box.done { background: rgba(102,187,106,.12); border-color: rgba(102,187,106,.5); }

/* ===== 가로 화면 레이아웃 ===== */
#board { margin: 52px 0 72px; }
#rotate-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.8); border: 1px solid var(--line); padding: 10px 16px; border-radius: 12px; font-weight: 700; pointer-events: none; z-index: 9; }
/* 넓은 화면: 임무는 왼쪽 여백, 마물/강화/채팅 패널은 오른쪽 여백에 세로로 */
#game-wrap.wide #missions { left: calc(var(--railw, 0px) + 6px); right: auto; transform: none; bottom: auto; top: 56px; width: var(--panelw, 240px); max-width: 300px; }
#game-wrap.wide #gamelog { display: grid; }
#game-wrap.wide #unit-panel, #game-wrap.wide #upgrade-panel, #game-wrap.wide #chat { left: auto; right: calc(var(--railw, 0px) + 6px); transform: none; bottom: auto; top: 56px; width: var(--panelw, 240px); max-width: 300px; }
#game-wrap.wide #unit-panel { top: auto; bottom: 80px; }
/* 넓은 화면: 채팅은 왼쪽 아래에 항상 표시 (솔로 포함), 전투 기록은 그 위 */
#game-wrap.wide #chat { flex-direction: column; left: calc(var(--railw, 0px) + 6px); right: auto; top: auto; bottom: 80px; height: 52vh; width: var(--chatw, 300px); max-width: 420px; padding: 10px; }
#game-wrap.wide #chat-log, #game-wrap.wide #chat-glog { flex: 1; max-height: none; min-height: 0; font-size: 14px; gap: 4px; }
#game-wrap.wide #chat.global #chat-log, #game-wrap.wide #chat.room #chat-glog { display: none; }
#game-wrap.wide #chat .ctab { font-size: 13px; padding: 7px 6px; } #game-wrap.wide #chat .online { font-size: 12px; max-height: 60px; }
#game-wrap.wide #chat .join-row input { padding: 10px; font-size: 14px; } #game-wrap.wide #chat .chat-quick button { font-size: 13px; }
#game-wrap.wide #gamelog { bottom: calc(80px + 52vh + 8px); max-height: 16%; width: var(--chatw, 300px); max-width: 420px; }
#game-wrap.wide #missions { width: var(--chatw, 300px); max-width: 420px; }
#game-wrap.wide #btn-chat { display: flex; }
.online { font-size: 11px; color: var(--muted); margin-bottom: 6px; line-height: 1.5; max-height: 54px; overflow: auto; }
.online b { color: #a5d6a7; } .online .who { display: inline-block; margin-right: 6px; color: var(--text); } .online .who small { color: var(--muted); }
.online .who.me { color: var(--mana); }
#gamelog { position: absolute; left: calc(var(--railw, 0px) + 6px); bottom: 80px; width: var(--panelw, 240px); max-width: 300px; max-height: 40%; overflow: hidden; display: none; gap: 2px; align-content: end; background: rgba(0,0,0,.45); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font-size: 12px; color: var(--muted); pointer-events: none; z-index: 4; }
#gamelog .gl-head { font-weight: 800; color: var(--text); margin-bottom: 2px; }
#gamelog .good { color: #a5d6a7; } #gamelog .err { color: #ff8a80; }
/* 광고 레일(브라우저 양쪽 끝 300px)이 켜지면 패널은 레일 안쪽으로 */
#game-wrap.rails { --railw: 324px; }
#game-wrap.rails .ad-rail, #screen-title.rails .ad-rail { display: block; }
#screen-title.rails #title-layout { left: 324px; right: 324px; }
#game-wrap.rails #hud-partner { right: calc(var(--railw) + 6px); }
#game-wrap.wide .up-actions { grid-template-columns: 1fr 1fr; }
#game-wrap.wide #hud-partner { right: 6px; top: auto; bottom: 80px; }
/* 낮은 화면(폰 가로): HUD 를 얇게 */
@media (max-height: 520px) {
  #hud-top { padding: 3px 8px; }
  .wave-num { font-size: 18px; } .wave-next { font-size: 12px; } .wave-next b { font-size: 14px; } .hud-res { font-size: 12px; gap: 0; }
  .castle-bar { height: 14px; } .castle-bar span { font-size: 10px; line-height: 12px; }
  #hud-bottom { padding: 4px; gap: 3px; }
  .act { padding: 3px 2px; border-radius: 9px; } .act .ic { font-size: 16px; } .act .lb { font-size: 10px; } .act .cost { font-size: 9px; }
  #toasts { top: 44px; } .toast { font-size: 12px; padding: 4px 10px; }
  #hud-boss { top: 40px; font-size: 13px; padding: 4px 10px; }
  .card-title { font-size: 17px; margin-bottom: 6px; } .card { padding: 6px 10px; } .card .ce { font-size: 26px; } .card .cd { font-size: 11px; }
  .result-box { padding: 12px; } .result-box h2 { font-size: 26px; }
}

/* ===== 상점 / 출석 / 시즌 패스 ===== */
.btn.shop { background: linear-gradient(#4fc3f7, #0288d1); }
.btn.pass { background: linear-gradient(#ce93d8, #7b1fa2); }
.badge { display: inline-block; background: #ff1744; color: #fff; border-radius: 10px; padding: 0 7px; font-size: 12px; margin-left: 4px; }
.daily-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 6px; }
.dcell { text-align: center; border-radius: 10px; padding: 6px 2px; background: rgba(255,255,255,.06); border: 2px solid var(--line); font-size: 11px; }
.dcell .dn { color: var(--muted); } .dcell .dr { font-weight: 800; font-size: 13px; }
.dcell.done { opacity: .5; border-color: var(--coop); } .dcell.today { border-color: var(--gold); box-shadow: 0 0 10px rgba(255,213,79,.5); cursor: pointer; }
#pick-line { margin-top: 8px; padding: 8px; border-radius: 10px; background: rgba(0,0,0,.25); }
#pick-line .line-pick { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 6px; }
#pick-line .line-pick button { border: 2px solid transparent; background: rgba(255,255,255,.06); border-radius: 8px; padding: 4px; color: var(--text); font-size: 11px; }
#pick-line .line-pick button img { width: 36px; height: 36px; display: block; margin: 0 auto; }
.pass-head { display: flex; gap: 10px; align-items: center; margin: 6px 0; }
.pass-prog { position: relative; flex: 1; height: 22px; border-radius: 11px; background: rgba(0,0,0,.4); border: 1px solid var(--line); overflow: hidden; }
#pass-fill { height: 100%; background: linear-gradient(90deg, #ce93d8, #7b1fa2); transition: width .3s; }
.pass-prog span { position: absolute; inset: 0; text-align: center; font-size: 12px; font-weight: 800; line-height: 20px; }
.pass-tiers { display: grid; gap: 4px; max-height: 50vh; overflow: auto; }
.ptier { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 6px; align-items: center; background: rgba(255,255,255,.05); border-radius: 10px; padding: 6px 8px; font-size: 12px; }
.ptier.locked { opacity: .55; }
.ptier .pt { font-weight: 900; color: var(--muted); }
.ptier .prw { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 6px; border-radius: 8px; background: rgba(0,0,0,.25); }
.ptier .prw.prem { background: rgba(123,31,162,.25); }
.ptier .prw .btn { padding: 4px 8px; font-size: 11px; }
.ptier .prw.claimed { opacity: .5; }

/* ===== 마왕군 ===== */
.btn.guild { background: linear-gradient(#90a4ae, #37474f); }
.guild-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.gname { font-size: 20px; font-weight: 900; }
.glevel { min-width: 160px; text-align: right; }
.glevel .bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); margin: 4px 0; overflow: hidden; }
.glevel .bar i { display: block; height: 100%; background: var(--gold); }
.gnotice { background: rgba(255,213,79,.1); border: 1px solid rgba(255,213,79,.3); border-radius: 10px; padding: 8px 10px; font-size: 13px; margin-bottom: 8px; white-space: pre-wrap; }
.guild-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .guild-cols { grid-template-columns: 1fr; } }
#g-members .rrow { padding: 6px 8px; } #g-members .rrow .rn { font-size: 13px; }
#g-chat { height: 220px; overflow: auto; background: rgba(0,0,0,.3); border-radius: 10px; padding: 8px; font-size: 12px; display: grid; gap: 3px; align-content: start; margin-bottom: 6px; }
#g-chat b { color: var(--gold); } #g-chat .me b { color: var(--mana); } #g-chat .t { color: var(--muted); font-size: 10px; margin-left: 4px; }

/* ===== 인간의 탑 / 사운드 ===== */
.btn.tower { background: linear-gradient(#b0bec5, #546e7a); }
.tower-box { text-align: center; padding: 10px 0; }
.tower-floor { font-size: 42px; font-weight: 900; color: var(--gold); text-shadow: 0 3px 0 #000; }
.mute { pointer-events: auto; border: 0; background: rgba(0,0,0,.45); color: #fff; border-radius: 8px; padding: 4px 8px; font-size: 16px; align-self: flex-start; }

/* ===== 특성 / 보석 / 스킨 / 컴팩트 ===== */
.rrow.locked { opacity: .55; }
.rrow select { max-width: 46%; background: #3a2740; color: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px; font-size: 12px; }
.gem-box { background: rgba(171,71,188,.12); border-color: rgba(171,71,188,.4); }
.skin-box { background: rgba(255,255,255,.05); border-color: var(--line); }
.skin-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.skin { border: 2px solid transparent; border-radius: 10px; background: rgba(0,0,0,.25); color: var(--text); padding: 6px 2px; font-size: 12px; text-align: center; }
.skin img { width: 48px; height: 48px; display: block; margin: 0 auto; }
.skin small { color: var(--muted); } .skin.eq { border-color: var(--gold); }
#game-wrap.compact #hud-top { background: rgba(0,0,0,.55); padding: 2px 8px; }
#game-wrap.compact #hud-bottom { background: linear-gradient(transparent, rgba(0,0,0,.75) 50%); }
#game-wrap.compact #missions, #game-wrap.compact #unit-panel, #game-wrap.compact #upgrade-panel, #game-wrap.compact #chat { bottom: 60px; }

/* ===== 로그인 / 채팅 ===== */
.account-row { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; margin: 6px 0; }
.btn.facer { background: linear-gradient(#ff8a65, #c62828); }
#login-dialog { position: fixed; inset: 0; background: rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; z-index: 50; }
.login-box { width: min(380px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; text-align: left; }
.login-box h3 { margin: 0 0 6px; font-size: 18px; }
.login-box input { width: 100%; padding: 11px; margin-top: 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.3); color: #fff; font-size: 15px; }
.login-box a { color: var(--gold); }
.room-chat { margin-top: 10px; }
#room-chat-log { height: 110px; overflow: auto; background: rgba(0,0,0,.3); border-radius: 10px; padding: 6px 8px; font-size: 12px; margin-bottom: 6px; }
#room-chat-log b { color: var(--gold); }

.mute.off { opacity: .4; text-decoration: line-through; }

/* ===== 메인화면 (로비: 알현실 배경 + 버튼) ===== */
#screen-title { background: #17101d; align-items: stretch; justify-content: stretch; }
#title-layout { display: flex; flex-direction: column; position: absolute; inset: 0; overflow: hidden; }
#lobby-scene { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#lobby-bg { position: absolute; inset: 0; display: block; }
#lobby-scene > *:not(#lobby-bg) { position: absolute; z-index: 2; }
.hero { left: 50%; top: 42%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 0; pointer-events: none; }
.hero img { width: clamp(64px, 12vh, 120px); height: auto; filter: drop-shadow(0 10px 10px rgba(0,0,0,.6)); animation: bob 2.6s ease-in-out infinite; }
.hero img:nth-child(2) { width: clamp(84px, 16vh, 160px); animation-delay: .5s; margin: 0 -10px; z-index: 1; } .hero img:nth-child(3) { animation-delay: 1s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* 상단 */
.lb-top { left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); }
.lb-profile { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border: 1px solid rgba(255,255,255,.18); border-radius: 30px; background: rgba(0,0,0,.45); color: #fff; }
.lb-avatar { width: 40px; height: 40px; border-radius: 50%; background: #3a2744 center/80% no-repeat; border: 2px solid var(--gold); display: inline-block; }
.lb-avatar img { width: 100%; height: 100%; object-fit: contain; }
.lb-pinfo { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.lb-pinfo b { font-size: 14px; } .lb-pinfo small { font-size: 11px; color: var(--gold); }
.lb-wallet { flex: 1; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 12px; border-radius: 20px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.15); font-size: 14px; font-weight: 800; line-height: 1; }
.chip.ghost { background: transparent; border-color: transparent; font-weight: 400; }
.lb-iconbtn { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.45); color: #fff; font-size: 20px; }

/* 좌우 아이콘 */
.lb-side { top: 68px; display: flex; flex-direction: column; gap: 8px; }
.lb-side.left { left: 12px; } .lb-side.right { right: 12px; }
.lb-icon { position: relative; width: 64px; padding: 6px 2px; border-radius: 14px; border: 2px solid rgba(0,0,0,.5); background: linear-gradient(#5d4466, #2e1d35); color: #fff; font-size: 11px; font-weight: 800; text-shadow: 0 2px 0 rgba(0,0,0,.5); display: flex; flex-direction: column; align-items: center; gap: 2px; box-shadow: 0 4px 0 rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.22); transition: transform .06s; }
.lb-icon .ic { font-size: 24px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); } .lb-icon:hover { filter: brightness(1.1); } .lb-icon:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.5); }
.lb-icon .badge { position: absolute; top: -4px; right: -4px; }

/* 가운데 아래 시작 버튼 */
.lb-actions { left: 50%; bottom: 64px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(420px, 60vw); }
.lb-row { display: flex; gap: 8px; width: 100%; } .lb-row .btn { flex: 1; }
.lb-pill { padding: 9px 10px; font-size: 14px; background: linear-gradient(#4a3352, #221527); white-space: nowrap; }
.lb-pill.rune { background: linear-gradient(#5c6bc0, #283593); } .lb-pill.boss { background: linear-gradient(#ce93d8, #8e24aa); }
.lb-start { width: 100%; padding: 12px 20px; font-size: 22px; background: linear-gradient(#ffd54f 0%, #ffa726 45%, #f57c00 100%); border: 2px solid #7a3b00; box-shadow: 0 6px 0 #a04a00, inset 0 3px 0 rgba(255,255,255,.45), 0 0 24px rgba(255,160,50,.5); display: flex; flex-direction: column; align-items: center; line-height: 1.1; animation: glow 1.8s ease-in-out infinite; }
@keyframes glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
.lb-start small { font-size: 12px; font-weight: 600; opacity: .9; }
.lb-start:active { transform: translateY(3px); box-shadow: 0 2px 0 #a04a00; }

/* 하단 탭 */
.lb-tabs { left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 4px; padding: 4px 8px; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.75) 40%); }
.lb-tab { width: 92px; padding: 6px 4px; border-radius: 12px 12px 0 0; border: 2px solid rgba(0,0,0,.5); border-bottom: 0; background: linear-gradient(#4a3352, #2a1930); color: var(--muted); font-size: 12px; font-weight: 800; text-shadow: 0 2px 0 rgba(0,0,0,.5); box-shadow: inset 0 2px 0 rgba(255,255,255,.15); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.lb-tab span { font-size: 20px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.5)); }
.lb-tab.active { background: linear-gradient(#7b3fa0, #4a2a55); color: #fff; transform: translateY(-4px); border-color: var(--gold); }

/* 채팅 (왼쪽 아래) */
.tchat { left: 86px; bottom: 64px; width: 300px; height: 230px; display: flex; flex-direction: column; background: rgba(10,5,15,.78); border: 1px solid var(--line); border-radius: 14px; padding: 8px; backdrop-filter: blur(4px); }
.tchat.collapsed { display: none; }
.tchat-head { display: flex; justify-content: space-between; align-items: center; font-weight: 800; font-size: 13px; margin-bottom: 6px; }
#gchat-log { flex: 1; overflow: auto; font-size: 12px; display: grid; gap: 3px; align-content: start; min-height: 60px; }
#gchat-log b { color: var(--gold); } #gchat-log .me b { color: var(--mana); } #gchat-log .t { color: var(--muted); font-size: 10px; margin-left: 4px; }
.tchat .join-row input { padding: 8px; font-size: 13px; }

/* 광고 (화면 맨 아래 띠) */
.ad-rail { position: absolute; top: 0; bottom: 0; width: 300px; display: none; overflow: hidden; background: #0e0912; z-index: 3; }
.ad-rail.left { left: 0; } .ad-rail.right { right: 0; }
.ad-rail .adsbygoogle { display: block; width: 300px; margin: 12px auto; }

/* 팝업 */
.lb-popup { position: absolute; inset: 0; z-index: 40; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; }
.lb-box { width: min(440px, 92vw); max-height: 92%; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.lb-box .menu .btn.big { display: flex; flex-direction: column; align-items: center; line-height: 1.1; } .lb-box .menu .btn.big small { font-size: 12px; font-weight: 500; opacity: .85; }
.news { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.6; font-size: 13px; } .news b { color: var(--text); }
.daily-strip { display: flex; gap: 4px; flex-wrap: wrap; margin: 6px 0; } .daily-strip span { width: 30px; height: 30px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.daily-strip span.done { background: rgba(102,187,106,.35); } .daily-strip span.now { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255,213,79,.4); }
.sc-head { font-weight: 800; font-size: 14px; margin-bottom: 4px; }

/* 작은 화면 (폰 가로) */
@media (max-width: 760px), (max-height: 520px) {
  .lb-top { padding: 4px 8px; } .lb-avatar { width: 30px; height: 30px; } .lb-pinfo b { font-size: 12px; } .chip { font-size: 12px; height: 26px; padding: 0 8px; }
  .lb-side { top: 48px; gap: 4px; } .lb-icon { width: 50px; font-size: 10px; padding: 3px 2px; } .lb-icon .ic { font-size: 18px; }
  .hero { top: 36%; }
  .lb-actions { bottom: 44px; gap: 4px; width: min(360px, 52vw); } .lb-pill { padding: 6px 8px; font-size: 12px; } .lb-start { padding: 7px 14px; font-size: 17px; } .lb-start small { font-size: 10px; }
  .lb-tab { width: 64px; padding: 3px 2px; font-size: 10px; } .lb-tab span { font-size: 16px; }
  .tchat { left: 68px; width: 220px; height: 150px; bottom: 44px; }
}

#tile-summon { position: absolute; transform: translate(-50%, -50%); z-index: 5; border: 2px solid #fff; border-radius: 12px; padding: 6px 12px; background: linear-gradient(#42a5f5, #1565c0); color: #fff; font-weight: 900; font-size: 13px; box-shadow: 0 4px 10px rgba(0,0,0,.5); white-space: nowrap; }
#tile-summon .cost { color: var(--gold); }

/* ===== PC 화면: 글자·버튼을 크게 (폰용 크기가 그대로 보이던 문제) ===== */
@media (min-width: 1000px) and (min-height: 620px) {
  #hud-top { padding: 10px 14px; align-items: center; background: linear-gradient(rgba(20,10,28,.95), rgba(20,10,28,.75)); border-bottom: 2px solid rgba(0,0,0,.5); width: max(var(--boardw, 100%), 860px); max-width: calc(100% - var(--railw, 0px) * 2); border-radius: 0 0 16px 16px; gap: 14px; }
  #game-wrap.wide #missions, #game-wrap.wide #upgrade-panel { top: 124px; } /* 넓어진 상단 HUD 아래로 */
  .wave-num { font-size: 36px; } .wave-num span { font-size: 16px; }
  .wave-next { font-size: 16px; } .wave-next b { font-size: 22px; }
  .wave-mode { font-size: 14px; padding: 3px 10px; }
  .hud-castle { max-width: 340px; padding-top: 0; }
  .castle-bar { height: 30px; border-radius: 15px; border-width: 2px; } .castle-bar span { font-size: 16px; line-height: 26px; }
  .mute { font-size: 20px; padding: 6px 10px; align-self: center; }
  .hud-res { display: flex; gap: 8px; font-size: 20px; align-items: center; }
  .hud-res .res { padding: 5px 12px; border-radius: 20px; background: rgba(0,0,0,.5); border: 1px solid var(--line); white-space: nowrap; }
  #hud-bottom { gap: 8px; padding: 8px 10px 10px; }
  .act { padding: 10px 4px; border-radius: 16px; gap: 2px; }
  .act .ic { font-size: 30px; } .act .lb { font-size: 16px; font-weight: 800; } .act .cost { font-size: 14px; font-weight: 700; }
  .mission { font-size: 14px; padding: 8px 10px; } .mission .bar { height: 6px; }
  #unit-panel, #upgrade-panel { padding: 14px; }
  .panel-title { font-size: 17px; }
  .upg-row { padding: 9px 0; font-size: 16px; } .upg-row .lv { font-size: 14px; } .upg-row .btn { font-size: 15px; padding: 8px 12px; }
  #upgrade-panel .hint, #unit-panel .hint { font-size: 13px; }
  .up-name { font-size: 19px; } .up-grade { font-size: 14px; } .up-stats { font-size: 14px; }
  .up-actions .btn { font-size: 15px; padding: 10px 8px; }
  .toast { font-size: 16px; padding: 8px 16px; }
  #toasts { top: 130px; }
  #hud-boss { top: 104px; min-width: 340px; padding: 8px 18px; } #hud-boss .bname { font-size: 18px; } #hud-boss .bhp { font-size: 15px; } #hud-boss .bbar { height: 12px; }
  #hud-boss .btimer { font-size: 15px; } #hud-boss .btimer b { font-size: 26px; }
  #hud-partner { font-size: 14px; }
  #gamelog { font-size: 13px; }
  #tile-summon { font-size: 16px; padding: 8px 16px; }
  .result-box { font-size: 16px; }
}