/* First-run controls are bundled into the main stylesheet on every platform. */
.home-guide { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid #8aa394; border-radius:6px; background:#28534e; color:#fff3cf; font:inherit; font-size:9px; padding:3px 6px; cursor:pointer; }
.guided-note { position:absolute; z-index:85; left:11px; top:31px; width:208px; max-width:42%; padding:8px 9px; border:2px solid #71512f; border-top-color:#ffe0a2; border-radius:9px; box-shadow:0 3px 0 #17343d; color:#403724; background:#fff4d2; font-family:var(--game-font); pointer-events:none; }
.guided-note[hidden] { display:none; }
.guided-note.guide-right { left:auto; right:11px; }
.guided-note.guide-bottom { top:auto; bottom:44px; }
.guided-note small { display:block; font-size:9px; color:#6a5333; margin-bottom:3px; }
.guided-note b { display:block; font-size:12px; line-height:1.28; overflow-wrap:anywhere; }
.guided-end { pointer-events:auto; margin-top:5px; min-height:23px; padding:2px 8px; border:1px solid #a88b5b; border-radius:5px; background:#f8e6b6; color:#493b28; font:inherit; font-size:10px; cursor:pointer; }
.guided-target { outline:3px solid #ffcf66!important; outline-offset:2px; }
.guided-cells { position:absolute; inset:0; z-index:37; pointer-events:none; }
.guided-cell { position:absolute; margin:0; padding:0; border:2px solid #ffc75c; border-radius:6px; outline-offset:-2px!important; background:transparent; cursor:pointer; pointer-events:auto; }
.guided-cell:focus-visible,.guided-end:focus-visible,.home-guide:focus-visible { outline:3px solid #ffe799; }
@media (orientation:portrait) {
  .guided-note { width:220px; }
  .guided-note b { font-size:15px; }
  .guided-end,.home-guide { min-height:28px; font-size:12px; }
}
@font-face { font-family: "Galmuri11"; src: url("assets/fonts/Galmuri11.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Galmuri11"; font-weight: 700; src: url("assets/fonts/Galmuri11-Bold.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Galmuri9"; src: url("assets/fonts/Galmuri9.woff2") format("woff2"); font-display: block; }

:root {
  --bg: #0b0c13;
  --panel: #151724;
  --panel2: #1d1f30;
  --panel3: #26293e;
  --line: #3a3d58;
  --line2: #565a7a;
  --ink: #0b0a12;
  --text: #ece9f4;
  --dim: #9497b4;
  --dim2: #63668a;
  --gold: #ffd870;
  --cyan: #7ad8ff;
  --red: #ff5a5a;
  --green: #4ae0a0;
  --purple: #b07aff;
  --orange: #ffa040;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
body { font-family: "Galmuri11", "Malgun Gothic", sans-serif; font-size: 12px; -webkit-font-smoothing: none; user-select: none; }
button { font: inherit; color: inherit; }
img { image-rendering: pixelated; }
.hidden { display: none !important; }

#app { position: fixed; inset: 0; display: grid; place-items: center; }
#stage { position: absolute; left: 0; top: 0; width: 640px; height: 360px; transform-origin: 0 0; overflow: hidden; background: var(--bg); }
#screen { position: absolute; left: 0; top: 0; width: 640px; height: 360px; image-rendering: pixelated; image-rendering: crisp-edges; }

.small { font-family: "Galmuri9", "Galmuri11", sans-serif; font-size: 10px; }
.dim { color: var(--dim); }
.gold { color: var(--gold); }
.red { color: var(--red); }
.cyan { color: var(--cyan); }
.green { color: var(--green); }
kbd { font-family: "Galmuri9"; font-size: 10px; padding: 0 3px; border: 1px solid var(--line2); background: var(--panel3); color: var(--dim); border-radius: 0; }

/* ---------------------------------------------------------------- 보드 칸 라벨 */
#tile-labels { position: absolute; inset: 0; pointer-events: none; }
.tile-label { position: absolute; width: 54px; text-align: center; font-family: "Galmuri9"; font-size: 10px; line-height: 10px; color: var(--text); text-shadow: 1px 0 var(--ink), -1px 0 var(--ink), 0 1px var(--ink), 0 -1px var(--ink); white-space: nowrap; overflow: hidden; }
.tile-label .tile-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-label .sub { display: block; color: var(--gold); }

/* ---------------------------------------------------------------- HUD 공통 */
.box { background: var(--panel); border: 1px solid var(--line); box-shadow: inset 0 0 0 1px var(--ink); }
.btn { display: flex; align-items: center; gap: 4px; background: var(--panel3); border: 1px solid var(--line2); box-shadow: inset 0 -2px 0 var(--ink), inset 0 0 0 1px #00000040; padding: 2px 4px; cursor: pointer; text-align: left; }
.btn:hover:not(:disabled) { background: #31354f; border-color: var(--gold); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 -1px 0 var(--ink); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.on { border-color: var(--green); color: var(--green); }
.bar { position: relative; height: 6px; background: #0b0a12; border: 1px solid var(--line); overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold); }
.bar > b { position: absolute; top: 0; bottom: 0; background: var(--cyan); opacity: 0.85; }

/* ---------------------------------------------------------------- 상단 */
#hud-top { position: absolute; left: 0; top: 0; width: 640px; height: 24px; display: flex; align-items: center; gap: 4px; padding: 0 6px; background: linear-gradient(#171928, #10111b); border-bottom: 1px solid var(--line); }
#hud-top .wave { width: 136px; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hud-top .wave b { color: var(--gold); }
#hud-top .time { width: 62px; flex: none; text-align: center; white-space: nowrap; }
#hud-top .hp { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
#hud-top .hp .bar { flex: 1; min-width: 20px; height: 10px; }
#hud-top .hp .bar > i { background: linear-gradient(#5ae08a, #2a9a5a); }
#hud-top .hp .bar.low > i { background: linear-gradient(#ff7a6a, #b03030); }
#hud-top .hp .num { min-width: 76px; flex: none; white-space: nowrap; text-align: right; font-family: "Galmuri9"; font-size: 10px; }
#hud-top .threat { width: 80px; flex: none; overflow: hidden; text-overflow: ellipsis; text-align: right; font-family: "Galmuri9"; font-size: 10px; color: var(--dim); white-space: nowrap; }
#hud-top .threat.danger { color: var(--red); }

/* ---------------------------------------------------------------- 왼쪽: 스킬과 증강 */
#hud-left { position: absolute; left: 0; top: 24px; width: 96px; height: 336px; padding: 4px; display: flex; flex-direction: column; gap: 3px; background: #0f101a; border-right: 1px solid var(--line); font-family: "Galmuri9"; font-size: 10px; }
.hd { font-family: "Galmuri9"; font-size: 10px; color: var(--dim); display: flex; justify-content: space-between; }
.skill { position: relative; height: 44px; padding: 3px; display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto auto; column-gap: 3px; cursor: pointer; }
.skill:hover { border-color: var(--gold); }
.skill img { grid-row: 1 / 4; width: 26px; height: 26px; }
.skill .nm { font-size: 11px; line-height: 12px; white-space: nowrap; overflow: hidden; }
.skill .lv { font-family: "Galmuri9"; font-size: 10px; line-height: 11px; color: var(--gold); white-space: nowrap; overflow: hidden; }
.skill .ev { font-family: "Galmuri9"; font-size: 10px; line-height: 11px; color: var(--cyan); white-space: nowrap; overflow: hidden; }
.skill .cd { position: absolute; left: 3px; right: 3px; bottom: 2px; height: 2px; background: #0b0a12; }
.skill .cd i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--line2); }
.skill.empty { opacity: 0.4; cursor: default; display: flex; align-items: center; justify-content: center; color: var(--dim2); font-family: "Galmuri9"; font-size: 10px; }
.skill.trans { border-color: #ffd870; box-shadow: inset 0 0 0 1px #6a4a10; }
.augs { display: flex; flex-wrap: wrap; gap: 2px; align-content: flex-start; min-height: 30px; }
.aug { position: relative; width: 20px; height: 20px; display: grid; place-items: center; background: var(--panel2); border: 1px solid var(--line); cursor: help; }
.aug img { width: 14px; height: 14px; }
.aug .r { position: absolute; right: 0; bottom: -2px; font-family: "Galmuri9"; font-size: 10px; color: var(--gold); text-shadow: 1px 1px var(--ink); }
.aug.dormant { opacity: 0.35; }
.stats { margin-top: auto; font-family: "Galmuri9"; font-size: 10px; line-height: 12px; color: var(--dim); }
.stats b { color: var(--text); font-weight: normal; }

/* ---------------------------------------------------------------- 오른쪽: 주사위 */
#hud-right { position: absolute; right: 0; top: 24px; width: 96px; height: 336px; padding: 4px; display: flex; flex-direction: column; gap: 4px; background: #0f101a; border-left: 1px solid var(--line); font-family: "Galmuri9"; font-size: 10px; }
#hud-right .btn { font-family: "Galmuri9"; font-size: 10px; white-space: nowrap; }
.dice-eq .dn { white-space: nowrap; overflow: hidden; min-width: 0; }
#tower-panel .th { white-space: nowrap; }
#tower-panel .th .small { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.roll { height: 42px; gap: 5px; border-color: var(--gold); }
.roll img { width: 27px; height: 27px; flex: none; }
.roll .rt { display: flex; flex-direction: column; align-items: flex-start; line-height: 12px; gap: 1px; }
.roll .rt b { font-family: "Galmuri11"; font-size: 12px; font-weight: normal; }
.roll .cnt { color: var(--gold); white-space: nowrap; }
.auto { justify-content: space-between; }
.auto .av { color: var(--dim); margin-left: auto; }
.roll.pulse { animation: pulse 0.9s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: inset 0 -2px 0 var(--ink), 0 0 0 1px var(--gold); } }
.kill .bar { height: 6px; }
.kill .bar > i { background: linear-gradient(90deg, #c08a2a, #ffd870); transition: width 0.15s; }
.kill.flash .bar { border-color: var(--gold); }
.tac { height: 25px; }
.tac img { width: 22px; height: 22px; flex: none; }
.tac .n { flex: 1; white-space: nowrap; overflow: hidden; }
.tac.empty { opacity: 0.4; }
.super { flex-direction: column; align-items: stretch; height: 38px; border-color: var(--purple); }
.super .row { display: flex; align-items: center; gap: 4px; }
.super .row .sn { flex: 1; }
.super img { width: 20px; height: 20px; }
.super .bar > i { background: linear-gradient(90deg, #6a3aa0, #d0a0ff); }
.super.ready { animation: superglow 1.2s ease-in-out infinite; }
@keyframes superglow { 50% { box-shadow: inset 0 -2px 0 var(--ink), 0 0 6px 1px #b07aff; border-color: #e0c0ff; } }
.dice-eq { display: flex; align-items: center; gap: 4px; padding: 2px 3px; background: var(--panel); border: 1px solid var(--line); font-family: "Galmuri9"; font-size: 10px; line-height: 11px; cursor: help; }
.dice-eq img { width: 22px; height: 22px; }
.ctl { display: flex; gap: 2px; }
.ctl .btn { flex: 1; justify-content: center; padding: 1px 2px; font-size: 10px; }
.towerbtn { justify-content: space-between; border-color: #c08a2a; }
.towerbtn .coins { color: var(--gold); margin-left: auto; }
.towerbtn.afford { animation: pulse 1.2s ease-in-out infinite; }
#tower-panel { position: absolute; left: 156px; top: 226px; width: 328px; padding: 3px; background: #0b0a12ee; border: 1px solid #c08a2a; font-family: "Galmuri9"; font-size: 10px; }
#tower-panel .th { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
#tower-panel .th .btn { margin-left: auto; padding: 0 4px; }
#tower-panel .tg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
#tower-panel .tu { flex-direction: column; align-items: flex-start; gap: 0; position: relative; padding: 2px 3px; line-height: 11px; }
#tower-panel .tu b { font-weight: normal; }
#tower-panel .tu .cost { color: var(--gold); }
#tower-panel .tu.no { opacity: 0.55; }
#tower-panel:has(.fort-status) { padding: 7px; border-radius: 6px; }
.fort-status { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 3px; }
.fort-status > div { display: flex; align-items:center; gap: 4px; background:#214753; border-radius:3px; padding:3px; }
.fort-status img { width:16px; height:16px; }
.fort-status b,.fort-gold b { margin-left:auto; white-space:nowrap; color:#ffe7a6; }
.fort-note { margin:5px 0 2px; color:#d2e5de; }
.fort-gold { display:flex; align-items:center; }

/* ---------------------------------------------------------------- 보스 체력 */
#boss-bar { position: absolute; left: 158px; top: 84px; width: 324px; padding: 2px 4px 3px; background: #10111bd8; border: 1px solid #6a2a3a; }
#boss-bar .nm { display: flex; justify-content: space-between; font-family: "Galmuri9"; font-size: 10px; color: #ffb0a0; }
#boss-bar .bar { height: 7px; border-color: #6a2a3a; }
#boss-bar .bar > i { background: linear-gradient(#ff6a5a, #a02a2a); transition: width 0.1s; }
#boss-bar .bar .mk { position: absolute; top: 0; bottom: 0; width: 1px; background: #ffffff90; }
#boss-bar .phase { font-family: "Galmuri9"; font-size: 10px; color: var(--red); }

#pick-bar { position: absolute; left: 158px; top: 84px; width: 324px; padding: 4px 6px; display: flex; align-items: center; gap: 6px; background: #10111bf0; border: 1px solid var(--gold); color: var(--gold); }
#pick-bar .t { flex: 1; }

/* ---------------------------------------------------------------- 알림 */
/* Feedback sits above all stage menus, including the account dialog (160).
   Keep this strip inside the space between the two battle HUD columns. */
#toasts {
  position: absolute; z-index: 200; left: 160px; top: 100px; width: 320px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; pointer-events: none;
}
.toast {
  max-width: 100%; padding: 3px 8px; border: 1px solid #83a7b9; border-radius: 4px;
  background: #102b39; box-shadow: 0 1px 2px #071823ba; font-size: 10px;
  line-height: 1.3; text-align: center; overflow-wrap: anywhere; animation: toast 2.6s forwards;
}
@keyframes toast { 0% { opacity: 0; transform: translateY(4px); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
#banner { position: absolute; left: 152px; top: 150px; width: 336px; text-align: center; pointer-events: none; opacity: 0; }
#banner.show { animation: banner 2.2s forwards; }
#banner .t { font-weight: 700; font-size: 12px; letter-spacing: 1px; padding: 4px 0 2px; background: linear-gradient(90deg, transparent, #0b0a12e0 20%, #0b0a12e0 80%, transparent); border-top: 1px solid #ffffff30; }
#banner .s { font-family: "Galmuri9"; font-size: 10px; color: var(--dim); padding-bottom: 4px; background: linear-gradient(90deg, transparent, #0b0a12e0 20%, #0b0a12e0 80%, transparent); border-bottom: 1px solid #ffffff30; }
#banner.danger .t { color: var(--red); }
@keyframes banner { 0% { opacity: 0; transform: scaleY(0.2); } 10% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
#hint { position: absolute; left: 160px; top: auto; bottom: 48px; width: 320px; padding: 2px 6px; text-align: center; font-family: "Galmuri9"; font-size: 10px; line-height: 13px; color: #fff4c8; background: #0b0a12d8; border: 1px solid #ffd87060; pointer-events: none; opacity: 0; transition: opacity 0.3s; }
#hint.show { opacity: 1; }
#stage:has(#tower-panel:not(.hidden)) #hint { visibility: hidden; }
#flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: #ff4040; }

/* ---------------------------------------------------------------- 결정 패널 */
/* 전장 가운데(보드 안쪽 336x224)를 기준으로 세로 가운데 정렬. 내용이 길면 위아래로 자라고(최대 상단 HUD 아래까지) 그래도 넘치면 스크롤 */
#panel { position: absolute; left: 152px; top: 192px; width: 336px; min-height: 224px; max-height: 332px; transform: translateY(-50%); padding: 6px 2px; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; background: radial-gradient(#0b0a12ee, #0b0a12c8); }
#panel.wide { left: 98px; width: 444px; padding: 6px 4px; background: #0b0a12e8; border: 1px solid #ffffff18; }
#panel .title { font-weight: 700; color: var(--gold); text-align: center; }
#panel .sub { font-family: "Galmuri9"; font-size: 10px; color: var(--dim); margin: 1px 0 5px; text-align: center; max-width: 420px; }
#panel .cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 332px; }
#panel.wide .cards { flex-wrap: nowrap; max-width: none; width: 100%; }
#panel.wide .card { flex: 1 1 0; width: auto; min-width: 0; }
#panel .card:not(.tiny) .top { gap: 3px; }
#panel .card:not(.tiny) .top .badge { flex: 1; min-width: 0; word-break: keep-all; overflow-wrap: anywhere; }
#panel .card:not(.tiny) .key { position: static; align-self: flex-start; flex: none; }
#panel .card .ttl, #panel .card .desc, #panel .card .why { word-break: keep-all; overflow-wrap: anywhere; }
#panel.wide[data-n="5"] .card .top img, #panel.wide[data-n="6"] .card .top img { width: 20px; height: 20px; }
.card { position: relative; width: 104px; min-height: 118px; padding: 4px; display: flex; flex-direction: column; gap: 2px; background: var(--panel2); border: 1px solid var(--line2); box-shadow: inset 0 -2px 0 var(--ink); cursor: pointer; text-align: left; }
.card.compact { min-height: 0; width: 158px; }
.card.tiny { min-height: 52px; width: 99px; align-items: center; text-align: center; overflow-wrap: anywhere; }
.dest-head { display: inline-flex; align-items: center; justify-content: center; gap: 2px; font-size: 10px; line-height: 12px; }
.dest-head img { width: 23px; height: 23px; }
.card:hover:not(.disabled) { border-color: var(--gold); background: #262a40; transform: translateY(-1px); }
.card .top { display: flex; align-items: center; gap: 4px; }
.card .top img { width: 24px; height: 24px; flex: none; }
.card .ttl { font-size: 11px; line-height: 12px; }
.card .badge { font-family: "Galmuri9"; font-size: 10px; color: var(--gold); line-height: 11px; }
.card .desc { font-family: "Galmuri9"; font-size: 10px; line-height: 12px; color: #c8c6d8; }
.card .tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 2px; }
.card .tag { font-family: "Galmuri9"; font-size: 10px; line-height: 10px; padding: 1px 2px; background: #0b0a12; color: var(--dim); }
.card .tag.miss { color: var(--red); }
.card .key { position: absolute; right: 2px; top: 2px; }
.card.disabled { opacity: 0.4; cursor: not-allowed; }
.card .why { font-family: "Galmuri9"; font-size: 10px; color: var(--red); }
#panel .actions { display: flex; gap: 6px; margin-top: 6px; }
.g-skill { border-color: #5aa8ff; }
.g-combo { border-color: #ff8a5c; }
.g-dice { border-color: #b07aff; }

/* ---------------------------------------------------------------- 툴팁 */
#tooltip { position: absolute; max-width: 190px; padding: 4px 5px; background: #0b0a12f2; border: 1px solid var(--line2); font-family: "Galmuri9"; font-size: 10px; line-height: 12px; pointer-events: none; z-index: 20; }
#tooltip .tt { font-family: "Galmuri11"; font-size: 11px; color: var(--gold); margin-bottom: 2px; }
#tooltip .row { color: var(--dim); }

/* ---------------------------------------------------------------- 화면 (타이틀, 준비, 결과, 일시정지) */
#screens { position: absolute; inset: 0; pointer-events: none; }
.screen { position: absolute; inset: 0; pointer-events: auto; display: flex; flex-direction: column; align-items: center; background: #0b0c13f4; }
.screen.clear { background: transparent; pointer-events: none; }
.screen.clear > * { pointer-events: auto; }
/* 타이틀: 배경 장면(scene.js) 위에 로고·시작 문구·공지/도움말/설정·시즌 배지 */
.screen.title { background: transparent; cursor: pointer; }
.tlogo { position: absolute; left: 0; right: 0; top: 30px; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.tlogo .lg { font-family: "Galmuri11"; font-weight: 700; font-size: 12px; line-height: 14px; letter-spacing: 1px; color: #ffe680; transform: scale(4); transform-origin: center top; height: 56px;
  text-shadow: 0 1px 0 #ff9d1a, 1px 0 0 #3a1a00, -1px 0 0 #3a1a00, 0 -1px 0 #3a1a00, 0 2px 0 #3a1a00, 1px 1px 0 #3a1a00, -1px 1px 0 #3a1a00, 1px 2px 0 #3a1a00, -1px 2px 0 #3a1a00, 0 3px 0 #1a0a2a; }
.tlogo .lgs { margin-top: 6px; padding: 2px 18px; font-family: "Galmuri11"; font-size: 12px; color: #fff; letter-spacing: 2px; background: linear-gradient(#8a4ad8, #5a2a9a); border: 1px solid #0b0c22;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 8px 50%); text-shadow: 0 1px 0 #2a0a4a; }
.tstart { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center; font-family: "Galmuri11"; font-size: 12px; color: #fff; letter-spacing: 1px; pointer-events: none;
  text-shadow: 1px 0 #0b0c22, -1px 0 #0b0c22, 0 1px #0b0c22, 0 -1px #0b0c22; animation: tblink 1.4s ease-in-out infinite; }
.tstart::before { content: ""; position: absolute; left: 160px; right: 160px; top: -3px; bottom: -3px; z-index: -1; background: linear-gradient(90deg, transparent, #0b0c22c0 25%, #0b0c22c0 75%, transparent); }
@keyframes tblink { 50% { opacity: 0.35; } }
.tbtns { position: absolute; right: 6px; top: 6px; display: flex; gap: 5px; }
.tib { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0; background: transparent; border: 0; color: #fff; cursor: pointer; font-family: "Galmuri9"; font-size: 10px; line-height: 12px; text-shadow: 1px 0 #0b0c22, -1px 0 #0b0c22, 0 1px #0b0c22, 0 -1px #0b0c22; }
.tib img { width: 28px; height: 28px; padding: 2px; box-sizing: content-box; border-radius: 7px; background: linear-gradient(#4a50a8, #262a66); border: 1px solid #0b0c22; box-shadow: inset 0 1px 0 #ffffff40, inset 0 -2px 0 #161a48; }
.tsea { position: absolute; left: 6px; top: 6px; display: flex; align-items: center; gap: 4px; padding: 2px 6px 2px 2px; background: #07081cc8; border: 1px solid #ffffff30; border-radius: 9px; color: #fff; cursor: pointer; font-family: "Galmuri9"; font-size: 10px; }
.tsea img { width: 28px; height: 28px; }
.tsea span { display: flex; flex-direction: column; align-items: flex-start; line-height: 12px; }
.tsea b { font-family: "Galmuri11"; font-size: 12px; font-weight: normal; color: #ffe680; }
.tsea i { font-style: normal; color: #c8ccf0; }
.tfoot { position: absolute; bottom: 4px; font-family: "Galmuri9"; font-size: 10px; color: #c8ccf0; text-shadow: 1px 0 #0b0c22, -1px 0 #0b0c22, 0 1px #0b0c22, 0 -1px #0b0c22; pointer-events: none; }
.tfoot.l { left: 6px; }
.tfoot.r { right: 6px; }
.tcredit { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-family: "Galmuri9"; font-size: 10px; color: #8a8fb8; text-shadow: 1px 0 #0b0c22, -1px 0 #0b0c22, 0 1px #0b0c22, 0 -1px #0b0c22; pointer-events: none; }
.screen.title .lmodal { cursor: default; }
.setup { padding: 8px 10px; width: 100%; height: 100%; display: grid; grid-template-columns: 372px 1fr; gap: 10px; }
.setup .col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.setup h2 { margin: 0 0 2px; font-size: 12px; color: var(--gold); }
.setup h3 { margin: 3px 0 1px; font-size: 10px; font-family: "Galmuri9"; color: var(--dim); font-weight: normal; }
.heroes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.hero { padding: 4px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; height: 122px; overflow: hidden; }
.hero:hover, .opt:hover:not(.locked) { border-color: var(--line2); background: #20223a; }
.hero.sel, .opt.sel { border-color: var(--gold); background: #2a2a3a; box-shadow: inset 0 0 0 1px #6a5a20; }
.hero .top { display: flex; gap: 5px; align-items: center; }
.hero .top img { width: 24px; height: 30px; }
.hero .nm { font-size: 12px; }
.hero .ttl { font-family: "Galmuri9"; font-size: 10px; color: var(--dim); }
.hero .sk { font-family: "Galmuri9"; font-size: 10px; color: var(--cyan); }
.hero .ps { font-family: "Galmuri9"; font-size: 10px; line-height: 12px; color: #c8c6d8; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.opt { padding: 4px; cursor: pointer; display: flex; gap: 4px; align-items: flex-start; }
.opt img { width: 20px; height: 20px; flex: none; }
.opt .nm { font-size: 11px; }
.opt .ds { font-family: "Galmuri9"; font-size: 10px; line-height: 12px; color: #c8c6d8; }
.opt.locked { opacity: 0.35; cursor: not-allowed; }
.row3 { display: flex; gap: 4px; }
.row3 .opt { flex: 1; }
.setup .go { margin-top: auto; display: flex; justify-content: flex-end; gap: 6px; }
.setup .go .btn { padding: 4px 12px; }
.btn.primary { border-color: var(--gold); color: var(--gold); }
.ready-bar { position: absolute; left: 172px; top: 88px; width: 296px; padding: 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: #0b0a12e8; border: 1px solid var(--gold); }
.ready-bar .keys { font-family: "Galmuri9"; font-size: 10px; color: var(--dim); text-align: center; line-height: 13px; }
.result { padding: 10px 14px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 8px 14px; align-content: start; width: 100%; height: 100%; }
.result h2 { grid-column: 1 / 3; margin: 0; font-size: 12px; }
.result h3 { margin: 0 0 3px; font-family: "Galmuri9"; font-size: 10px; color: var(--dim); font-weight: normal; }
.result .kv { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; font-family: "Galmuri9"; font-size: 10px; }
.result .kv b { font-weight: normal; color: var(--text); text-align: right; }
.dmgrow { display: grid; grid-template-columns: 62px 1fr 34px; gap: 4px; align-items: center; font-family: "Galmuri9"; font-size: 10px; margin-bottom: 2px; }
.dmgrow .bar { height: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 2px; }
.chip { font-family: "Galmuri9"; font-size: 10px; padding: 1px 3px; background: var(--panel2); border: 1px solid var(--line); }
.result .go { grid-column: 1 / 3; display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.result .go .btn { padding: 4px 12px; }
.pause { justify-content: center; gap: 6px; }
.pause .btn { width: 180px; justify-content: center; padding: 4px; }
.setting { display: flex; gap: 6px; align-items: center; width: 180px; justify-content: space-between; font-family: "Galmuri9"; font-size: 10px; }
.setting span { white-space: nowrap; }
.pause .setting .btn { width: 52px; flex: none; padding: 2px 4px; }
.helpbox { max-width: 440px; font-family: "Galmuri9"; font-size: 10px; line-height: 13px; color: #c8c6d8; padding: 8px; }
.helpbox b { color: var(--gold); font-weight: normal; }

/* 모바일 전투 제어: 선택한 배속은 정지/계속에도 유지된다. */
#hud-top .battle-controls { display: flex; flex: none; gap: 3px; height: 22px; align-items: center; }
#hud-top .battle-controls .btn { height: 21px; padding: 1px 3px; justify-content: center; gap: 2px; font-size: 9px; line-height: 12px; white-space: nowrap; touch-action: manipulation; border-color: #6e929b; background: #264d5c; color: #fff3cf; }
#hud-top .battle-controls .btn:focus-visible { outline: 2px solid #ffe29a; outline-offset: 1px; }
#hud-top .battle-speed { width: 43px; }
#hud-top .battle-speed .speed-value { font-size: 11px; font-weight: 800; min-width: 14px; }
#hud-top .battle-speed[data-speed="2"], #hud-top .battle-speed[data-speed="3"], #hud-top .battle-speed[data-speed="4"], #hud-top .battle-speed[data-speed="5"] { background: #826330; border-color: #f1ce7b; }
#hud-top .battle-pause { width: 52px; }
#hud-top .pause-symbol { display: inline-block; width: 6px; height: 8px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; flex: none; }
#hud-top .is-paused .pause-symbol { width: 7px; height: 8px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid currentColor; border-right: 0; }

.game-action-wait {
  position: absolute; inset: 0; z-index: 875; display: grid; place-items: center;
  background: rgb(12 35 46 / 32%); touch-action: none; outline: 0;
}
.game-action-wait > div {
  display: flex; align-items: center; gap: 12px; max-width: min(88%, 320px);
  min-height: 36px; padding: 9px 17px; border: 2px solid #e4bd76; border-radius: 10px;
  background: #214653; color: #fff4cb; box-shadow: 0 4px 0 #132f3c;
  font: 12px var(--game-font); overflow-wrap: anywhere;
}
.action-die {
  flex: none; position: relative; width: 19px; height: 19px;
  border: 2px solid #675034; border-radius: 5px; background: #ffe4a1;
  box-shadow: inset -2px -2px #dca85d; animation: pending-die .7s ease-in-out infinite;
}
.action-die::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 3px; height: 3px;
  border-radius: 50%; background: #523d2a; box-shadow: 4px 4px #523d2a, 8px 8px #523d2a;
}
.game-action-wait[data-action-kind="summon"] { background: rgb(12 35 46 / 50%); }
.game-action-wait[data-action-kind="summon"] .action-die { box-shadow: inset -2px -2px #dca85d, 0 0 10px #e8c16d; }
@keyframes pending-die {
  0%, 100% { transform: translateY(0) rotate(-9deg); }
  50% { transform: translateY(-4px) rotate(9deg); }
}
.lobby button:enabled:active, .campaign-panel button:enabled:active { filter: brightness(1.14); }
@media (prefers-reduced-motion: reduce) {
  .action-die { animation: none; }
}