/* 훈민정음 수호대 2: 학동 카드 5장, 훈장님 줄, 3갈래 업그레이드 패널, 대왕 먹귀 막대 */
.tower-cards{grid-template-columns:repeat(5,minmax(0,1fr))}
.tower-card{touch-action:none;user-select:none;-webkit-user-select:none}
.tower-card.poor .cost{color:#c0613f}
.tower-card.poor:not(.selected){background:#f6f4ea}
.tower-card.placed{opacity:.55}
.hero-stamp{display:inline-grid;place-items:center;width:1.2em;height:1.2em;border-radius:.28em;background:#35413b;color:#ffe7a3;font-size:.9em;line-height:1}
.tower-card .mini .hero-stamp{font-size:22px}
#world canvas{touch-action:none;cursor:crosshair}

/* 훈장님 줄 */
.hero-bar{display:flex;align-items:center;gap:8px;margin-top:14px;min-width:0}
.hero-status{flex:1;display:flex;align-items:center;gap:8px;min-width:0;padding:4px 10px;border-radius:12px;background:#fffdf4;border:1px solid #e2e7d7;height:44px}
.hero-status .hero-stamp{font-size:20px;flex:none}
.hero-status b{display:block;font-weight:normal;font-size:14px;color:#2f5140}
.hero-status small{display:block;font-size:12px;color:#6c7b63;white-space:nowrap}
.hero-status .xp{flex:1;height:8px;border-radius:5px;background:#e3e8d6;overflow:hidden;min-width:30px}
.hero-status .xp b{display:block;height:100%;width:0;background:linear-gradient(90deg,#f1b93a,#e0913a);transition:width .3s}
.ability{flex:none;min-width:104px;height:44px;padding:4px 12px;border-radius:12px;background:#efe9d2;color:#6b5a2a;text-align:center;line-height:1.1}
.ability strong{display:block;font-weight:normal;font-size:15px}
.ability small{display:block;font-size:11px;margin-top:2px;color:#8a7a4c}
.ability.ready{background:#f6c94e;color:#4a3710;box-shadow:0 3px 0 #c99a25}
.ability.ready small{color:#5d4515}
.ability:disabled{opacity:.7}

/* 전장 위 */
.boss-bar{position:absolute;z-index:2;top:74px;left:50%;transform:translateX(-50%);width:min(46%,340px);display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:#2b2739e6;color:#f3eefc;font-size:13px;pointer-events:none}
.boss-bar[hidden]{display:none}
.boss-bar i{flex:1;height:10px;border-radius:6px;background:#ffffff26;overflow:hidden}
.boss-bar b{display:block;height:100%;background:linear-gradient(90deg,#e0674f,#f1b93a);transition:width .2s}
.stat.hurt{animation:lk-hurt .35s}
@keyframes lk-hurt{25%{transform:translateX(-4px);background:#ffe1dc}75%{transform:translateX(4px)}}
.task-line strong{line-height:1.45}
.next-label{font-style:normal;display:inline-block;margin-right:4px;padding:1px 7px;border-radius:999px;background:#e3ead5;color:#46583f;font-size:12px}
.trait{white-space:nowrap;font-style:normal;margin-left:3px;padding:0 6px;border-radius:999px;font-size:11px;vertical-align:1px}
.trait.camo{background:#dbe7c8;color:#3e5a22}
.trait.hard{background:#dfe2ea;color:#3f4658}
.skill.auto{background:#eef2e2;border-color:#d8e1c8;color:#3f5d45}
.skill.auto .skill-icon{background:#fffdf4;font-size:15px}
.skill.auto[aria-pressed="true"]{background:#dff0cf;border-color:#9cc47e}

/* 오른쪽 패널: 3갈래 업그레이드 */
.selection-panel h3 small{font-size:13px;color:#6c7b63;margin-left:4px}
.stat-line{font-size:13px;line-height:1.5;color:#46583f;word-break:keep-all}
.badges{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 4px}
.ability-badge{padding:2px 8px;border-radius:999px;background:#e4e2d8;color:#7a7568;font-size:12px}
.ability-badge.on{background:#d6ebc6;color:#2f5140}
.paths{display:grid;gap:7px;margin-top:8px}
.path-row{border-radius:12px;background:#fffdf4;border:1px solid #dfe5d2;padding:7px 9px;border-left:4px solid #e0674f}
.path-row.path-1{border-left-color:#4f8ed8}
.path-row.path-2{border-left-color:#f1b93a}
.path-head{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#46583f}
.path-head b{font-weight:normal}
.pips{display:flex;gap:3px}
.pips i{width:10px;height:10px;border-radius:50%;background:#e1e5d6;border:1px solid #cdd4bf}
.pips i.on{background:#285b43;border-color:#285b43}
.up-btn{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px;width:100%;margin-top:5px;padding:6px 9px;border-radius:9px;background:#e9f3d9;color:#2f5140;text-align:left}
.up-btn .up-name{font-size:15px}
.up-btn small{grid-column:1/-1;font-size:11.5px;color:#56664f;line-height:1.3}
.up-btn .up-cost{grid-row:1;grid-column:2;font-size:13px;color:#9c762b}
.up-btn:disabled .up-cost{color:#c0613f}
.up-done,.up-locked{margin-top:5px;font-size:12px;color:#7b8770;padding:4px 2px}
.xp-line{display:flex;align-items:center;gap:8px;font-size:12px;color:#6c7b63}
.xp-line i{flex:1;height:8px;border-radius:5px;background:#e3e8d6;overflow:hidden}
.xp-line b{display:block;height:100%;background:#f1b93a}
.selection-panel .tower-actions{flex-wrap:wrap}
.selection-panel .tower-actions button{background:#fffdf4;border:1px solid #dfe5d2;border-radius:9px;color:#46583f}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0;text-align:center;font-size:13px;color:#647359}
.result-stats div{padding:10px 6px;border-radius:12px;background:#eef3e2}
.result-stats b{display:block;font-weight:normal;font-size:22px;color:#285b43}

@media (max-width:520px){
 .tower-card{padding:8px 5px;min-height:92px}
 .tower-card strong{font-size:13px}.tower-card small{font-size:10px}
 .tower-card .cost{font-size:10px;right:4px;top:8px}
 .tower-card .mini{font-size:20px}.tower-card .mini .hero-stamp{font-size:17px}
 .hero-bar{flex-wrap:wrap}.hero-status{flex-basis:100%}
 .ability{flex:1}
 .boss-bar{top:64px;width:70%}
}
@media (min-width:740px) and (orientation:landscape){
 .hero-bar{margin:0;height:44px}
 .ability{min-width:0;flex:0 1 118px}
 .selection-panel{overflow-y:auto}
 .selection-panel h3{font-size:21px;margin:6px 0 6px}
 .tower-card .mini{font-size:20px}
}
@media (min-width:740px) and (orientation:landscape) and (max-height:650px){
 .up-btn small{display:none}
 .path-row{padding:5px 8px}
 .selection-panel .badges{margin:4px 0 2px}
 .boss-bar{top:64px}
}