/* ============================================================
   Castle Busters — UI styling
   ============================================================ */
:root{
  --gold:#ffcf4a; --gold-d:#e0a423; --gold-l:#ffe9a8;
  --wood:#5a3b22; --wood-l:#7c5430; --wood-d:#3a2614;
  --panel:#2a3142; --panel-l:#39435a; --panel-d:#1c2231;
  --ink:#1a1410; --txt:#fff; --good:#4ad36a; --bad:#ff5a4a;
  --shadow:0 6px 0 rgba(0,0,0,.35), 0 10px 22px rgba(0,0,0,.4);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;overflow:hidden;background:#0d1018;
  font-family:"Trebuchet MS","Segoe UI",system-ui,Arial,sans-serif;
  color:var(--txt);user-select:none;}
#app{position:fixed;inset:0;}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}

.overlay,.screen{position:absolute;inset:0;pointer-events:none;}
.overlay *,.screen *{pointer-events:auto;}
.screen{display:none;}
.screen.active{display:block;}

/* ---------- buttons (chunky game style) ---------- */
button{font-family:inherit;color:var(--txt);border:none;cursor:pointer;
  font-weight:700;letter-spacing:.3px;}
.big-btn,.nav-btn,.tool-btn,.upgrade-btn,.back-btn,.modal-close,.result-buttons button,.map-go{
  border-radius:16px;transition:transform .08s, filter .12s;}
button:active{transform:translateY(2px) scale(.98);}

/* ---------- top bar ---------- */
#topbar{display:flex;justify-content:space-between;align-items:flex-start;
  padding:12px 14px;}
.rank-chip{display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,var(--panel-l),var(--panel-d));
  padding:6px 12px 6px 8px;border-radius:30px;box-shadow:var(--shadow);
  border:2px solid rgba(255,255,255,.12);}
.rank-emblem{font-size:22px;width:34px;height:34px;display:grid;place-items:center;
  background:radial-gradient(circle at 40% 30%,var(--gold-l),var(--gold-d));
  border-radius:50%;color:#6b4a00;box-shadow:inset 0 -2px 4px rgba(0,0,0,.3);}
.rank-text{line-height:1.05;display:flex;flex-direction:column;}
.rank-text b{font-size:14px;} .rank-text small{font-size:11px;opacity:.85;}
.res-group{display:flex;gap:8px;align-items:center;}
.res{display:flex;align-items:center;gap:6px;background:linear-gradient(180deg,var(--panel-l),var(--panel-d));
  padding:7px 14px;border-radius:24px;box-shadow:var(--shadow);
  border:2px solid rgba(255,255,255,.12);font-size:15px;min-width:74px;justify-content:center;}
.res-ico{font-size:16px;}
.lang-btn{background:linear-gradient(180deg,var(--gold),var(--gold-d));color:#5a3c00;
  padding:8px 12px;border-radius:14px;box-shadow:var(--shadow);font-size:13px;}

/* ---------- menu ---------- */
.game-title{position:absolute;top:14%;width:100%;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.35));pointer-events:none;}
.title-castle{font-size:clamp(40px,9vw,86px);font-weight:900;letter-spacing:3px;
  color:var(--gold-l);text-shadow:0 4px 0 var(--gold-d),0 6px 8px rgba(0,0,0,.5);
  -webkit-text-stroke:2px #6b4a00;}
.title-busters{font-size:clamp(30px,7vw,64px);font-weight:900;letter-spacing:6px;
  color:#fff;text-shadow:0 4px 0 #b23a2a,0 6px 8px rgba(0,0,0,.5);
  -webkit-text-stroke:2px #7a2018;margin-top:-6px;}

.menu-bottom{position:absolute;bottom:0;left:0;right:0;
  display:flex;align-items:flex-end;justify-content:center;gap:12px;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(13,16,24,.55),transparent);}
.nav-btn{display:flex;flex-direction:column;align-items:center;gap:3px;
  background:linear-gradient(180deg,var(--panel-l),var(--panel-d));
  padding:12px 14px;min-width:78px;font-size:13px;box-shadow:var(--shadow);
  border:2px solid rgba(255,255,255,.12);}
.nav-ico{font-size:24px;}
.big-btn.battle-btn{display:flex;flex-direction:column;align-items:center;gap:2px;
  background:linear-gradient(180deg,#ff7a4a,#d83a22);
  padding:20px 38px;font-size:26px;box-shadow:0 8px 0 #8f2414,0 12px 24px rgba(0,0,0,.45);
  border:3px solid rgba(255,255,255,.18);text-shadow:0 2px 2px rgba(0,0,0,.4);}
.big-btn.battle-btn small{font-size:12px;font-weight:600;opacity:.9;letter-spacing:.5px;}
.big-btn.battle-btn:active{box-shadow:0 4px 0 #8f2414,0 6px 12px rgba(0,0,0,.45);}

/* ---------- panels (castle/units/map) ---------- */
.panel-header{position:absolute;top:64px;width:100%;text-align:center;pointer-events:none;}
.panel-header h2{margin:0;font-size:30px;letter-spacing:1px;
  text-shadow:0 3px 0 rgba(0,0,0,.4);-webkit-text-stroke:1px rgba(0,0,0,.25);}
.edit-hint{position:absolute;top:108px;width:100%;text-align:center;font-size:14px;
  opacity:.9;pointer-events:none;text-shadow:0 2px 3px rgba(0,0,0,.6);}
.edit-tools{position:absolute;top:140px;width:100%;display:flex;justify-content:center;gap:12px;}
.tool-btn{display:flex;align-items:center;gap:8px;
  background:linear-gradient(180deg,var(--panel-l),var(--panel-d));
  padding:12px 18px;font-size:15px;box-shadow:var(--shadow);
  border:2px solid rgba(255,255,255,.12);}
.tool-btn.active{background:linear-gradient(180deg,#4ad36a,#27a045);border-color:#bff5cb;}

.back-btn{position:absolute;bottom:20px;left:20px;
  background:linear-gradient(180deg,var(--panel-l),var(--panel-d));
  padding:12px 24px;font-size:16px;box-shadow:var(--shadow);
  border:2px solid rgba(255,255,255,.12);}

/* block info popup */
.block-info{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  width:min(340px,86vw);background:linear-gradient(180deg,var(--panel-l),var(--panel-d));
  padding:14px 16px;border-radius:18px;box-shadow:var(--shadow);
  border:2px solid rgba(255,255,255,.14);}
.bi-title{display:flex;justify-content:space-between;font-size:16px;margin-bottom:8px;}
.bi-title #bi-level{opacity:.8;}
.bi-bar{height:12px;background:rgba(0,0,0,.4);border-radius:8px;overflow:hidden;margin-bottom:12px;}
.bi-bar #bi-hp{height:100%;width:60%;background:linear-gradient(90deg,#4ad36a,#8df0a0);}
.upgrade-btn{width:100%;background:linear-gradient(180deg,var(--gold),var(--gold-d));
  color:#5a3c00;padding:12px;font-size:16px;box-shadow:0 4px 0 #a87714;
  display:flex;justify-content:center;gap:8px;align-items:center;}
.upgrade-btn.disabled{filter:grayscale(.7) brightness(.8);}
.upgrade-btn .cost{font-size:13px;opacity:.9;}

/* ---------- units roster ---------- */
.unit-roster{position:absolute;top:150px;bottom:80px;left:0;right:0;
  display:flex;flex-direction:column;gap:12px;align-items:center;
  padding:0 16px;overflow-y:auto;}
.unit-card{width:min(460px,92vw);display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg,var(--panel-l),var(--panel-d));
  padding:12px 14px;border-radius:18px;box-shadow:var(--shadow);
  border:2px solid rgba(255,255,255,.12);}
.unit-card canvas{flex:0 0 auto;background:rgba(0,0,0,.25);border-radius:14px;}
.uc-body{flex:1;min-width:0;}
.uc-name{font-size:17px;display:flex;align-items:center;gap:8px;}
.uc-lvl{font-size:12px;background:var(--gold);color:#5a3c00;padding:2px 8px;border-radius:10px;}
.uc-desc{font-size:12px;opacity:.8;margin:3px 0 6px;}
.uc-stats{display:flex;gap:10px;font-size:11px;opacity:.85;flex-wrap:wrap;}
.uc-stats span b{color:var(--gold-l);}
.uc-up{background:linear-gradient(180deg,var(--gold),var(--gold-d));color:#5a3c00;
  padding:10px 12px;border-radius:14px;font-size:13px;box-shadow:0 4px 0 #a87714;
  display:flex;flex-direction:column;align-items:center;min-width:84px;}
.uc-up small{font-size:10px;opacity:.85;font-weight:600;}
.uc-up.disabled{filter:grayscale(.7) brightness(.85);}
.uc-up.max{background:linear-gradient(180deg,#8d93a1,#5d626e);color:#fff;box-shadow:0 4px 0 #3a3f49;}

/* slot assign panel */
.slot-assign{position:absolute;bottom:78px;left:50%;transform:translateX(-50%);
  display:flex;gap:10px;background:linear-gradient(180deg,var(--panel-l),var(--panel-d));
  padding:10px;border-radius:18px;box-shadow:var(--shadow);border:2px solid rgba(255,255,255,.14);}
.slot-assign canvas{cursor:pointer;border-radius:12px;background:rgba(0,0,0,.25);}
.slot-assign canvas.sel{outline:3px solid var(--gold);}

/* ---------- map ---------- */
.map-list{position:absolute;top:118px;bottom:78px;left:0;right:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:12px;align-items:center;padding:6px 16px;}
.map-row{width:min(520px,94vw);display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg,var(--panel-l),var(--panel-d));
  padding:14px;border-radius:18px;box-shadow:var(--shadow);border:2px solid rgba(255,255,255,.12);}
.map-row.locked{filter:grayscale(.6) brightness(.7);}
.map-row.cleared{border-color:rgba(74,211,106,.6);}
.map-num{flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;font-size:20px;font-weight:900;
  background:linear-gradient(180deg,var(--gold),var(--gold-d));color:#5a3c00;}
.map-body{flex:1;min-width:0;}
.map-name{font-size:18px;}
.map-meta{font-size:12px;opacity:.85;display:flex;gap:10px;margin-top:3px;flex-wrap:wrap;}
.stars{color:var(--gold);letter-spacing:1px;}
.map-go{background:linear-gradient(180deg,#ff7a4a,#d83a22);padding:12px 18px;
  box-shadow:0 5px 0 #8f2414;font-size:15px;}
.map-go.done{background:linear-gradient(180deg,#4ad36a,#27a045);box-shadow:0 5px 0 #1c7a33;}

/* ---------- battle hud ---------- */
.battle-top{position:absolute;top:0;left:0;right:0;display:flex;
  justify-content:space-between;align-items:flex-start;padding:12px 14px;gap:10px;
  background:linear-gradient(180deg,rgba(13,16,24,.55),transparent);}
.side-panel{flex:1;max-width:300px;}
.side-panel.right{text-align:right;}
.side-name{font-size:15px;margin-bottom:5px;text-shadow:0 2px 3px rgba(0,0,0,.6);}
.hpbar{position:relative;height:20px;background:rgba(0,0,0,.5);border-radius:12px;
  overflow:hidden;border:2px solid rgba(255,255,255,.18);}
.hpfill{position:absolute;top:0;bottom:0;width:100%;transition:width .4s ease;}
.hpfill.player{left:0;background:linear-gradient(90deg,#27a045,#4ad36a);}
.hpfill.enemy{right:0;background:linear-gradient(270deg,#b23a2a,#ff5a4a);}
.hpbar span{position:absolute;inset:0;display:grid;place-items:center;
  font-size:12px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.8);}
.vs-center{text-align:center;flex:0 0 auto;}
.vs-label{font-size:24px;font-weight:900;color:var(--gold-l);
  text-shadow:0 2px 0 var(--gold-d),0 3px 4px rgba(0,0,0,.5);line-height:1;}
.round-label{font-size:12px;opacity:.9;}
.turn-timer{margin-top:3px;font-size:22px;font-weight:900;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;margin:4px auto 0;
  background:radial-gradient(circle at 40% 30%,var(--panel-l),var(--panel-d));
  border:2px solid rgba(255,255,255,.2);box-shadow:var(--shadow);}
.turn-timer.warn{color:var(--bad);border-color:var(--bad);animation:pulse .5s infinite alternate;}
@keyframes pulse{to{transform:scale(1.08);}}

.battle-banner{position:absolute;top:32%;width:100%;text-align:center;
  font-size:clamp(28px,6vw,48px);font-weight:900;pointer-events:none;
  color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.5),0 0 18px rgba(0,0,0,.4);
  opacity:0;transition:opacity .3s;}
.battle-banner.show{opacity:1;}

.aim-readout{position:absolute;left:50%;transform:translateX(-50%);bottom:120px;
  display:flex;gap:18px;background:rgba(13,16,24,.7);padding:8px 18px;border-radius:14px;
  font-size:15px;border:2px solid rgba(255,255,255,.15);pointer-events:none;}
.aim-readout b{color:var(--gold-l);}

.battle-bottom{position:absolute;bottom:0;left:0;right:0;padding:14px;
  display:flex;justify-content:center;
  background:linear-gradient(0deg,rgba(13,16,24,.55),transparent);}
.unit-bar{display:flex;gap:12px;}
.unit-slot{position:relative;background:linear-gradient(180deg,var(--panel-l),var(--panel-d));
  border-radius:18px;padding:6px;box-shadow:var(--shadow);border:3px solid rgba(255,255,255,.12);}
.unit-slot.sel{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),var(--shadow);}
.unit-slot.dead{filter:grayscale(1) brightness(.5);pointer-events:none;}
.unit-slot canvas{display:block;}
.unit-slot .uslvl{position:absolute;top:-6px;right:-6px;background:var(--gold);color:#5a3c00;
  font-size:11px;font-weight:800;padding:1px 6px;border-radius:9px;border:2px solid #fff3;}
.unit-slot .uscount{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  background:var(--panel-d);font-size:10px;padding:1px 6px;border-radius:8px;border:1px solid #fff2;}

.zoom-btn,.flee-btn{position:absolute;width:44px;height:44px;border-radius:50%;
  background:linear-gradient(180deg,var(--panel-l),var(--panel-d));font-size:18px;
  box-shadow:var(--shadow);border:2px solid rgba(255,255,255,.15);display:grid;place-items:center;}
.zoom-btn{bottom:120px;right:16px;}
.flee-btn{top:64px;right:16px;}

/* ---------- result ---------- */
#screen-result{background:rgba(8,10,16,.55);display:none;}
#screen-result.active{display:grid;place-items:center;}
.result-card{width:min(420px,90vw);text-align:center;
  background:linear-gradient(180deg,var(--panel-l),var(--panel-d));
  padding:26px 24px;border-radius:24px;box-shadow:var(--shadow);
  border:3px solid rgba(255,255,255,.14);animation:pop .35s cubic-bezier(.2,1.3,.5,1);}
@keyframes pop{from{transform:scale(.7);opacity:0;}to{transform:scale(1);opacity:1;}}
.result-title{font-size:46px;font-weight:900;letter-spacing:1px;}
.result-title.win{color:var(--gold-l);text-shadow:0 3px 0 var(--gold-d);}
.result-title.lose{color:var(--bad);text-shadow:0 3px 0 #7a2018;}
.result-sub{font-size:15px;opacity:.85;margin:6px 0 16px;}
.result-rewards{display:flex;justify-content:center;gap:18px;margin-bottom:20px;flex-wrap:wrap;}
.reward-item{display:flex;flex-direction:column;align-items:center;gap:2px;
  background:rgba(0,0,0,.25);padding:12px 18px;border-radius:16px;min-width:80px;}
.reward-item .ri-ico{font-size:26px;}
.reward-item b{font-size:18px;color:var(--gold-l);}
.result-buttons{display:flex;flex-direction:column;gap:10px;}
.result-buttons button{padding:14px;font-size:17px;}
.btn-primary{background:linear-gradient(180deg,#ff7a4a,#d83a22);box-shadow:0 5px 0 #8f2414;}
.btn-secondary{background:linear-gradient(180deg,var(--panel-l),var(--panel-d));
  border:2px solid rgba(255,255,255,.15);box-shadow:var(--shadow);}

/* ---------- leaderboard modal ---------- */
.modal{position:absolute;inset:0;background:rgba(8,10,16,.65);display:none;
  place-items:center;z-index:20;}
.modal.active{display:grid;}
.modal-card{width:min(400px,90vw);max-height:80vh;overflow-y:auto;
  background:linear-gradient(180deg,var(--panel-l),var(--panel-d));
  padding:22px;border-radius:22px;box-shadow:var(--shadow);
  border:3px solid rgba(255,255,255,.14);animation:pop .3s;}
.modal-card h2{margin:0 0 14px;text-align:center;}
.lb-list{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
.lb-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:12px;
  background:rgba(0,0,0,.22);font-size:15px;}
.lb-row.me{background:linear-gradient(90deg,rgba(255,207,74,.3),rgba(255,207,74,.1));
  border:1px solid var(--gold);}
.lb-rank{width:26px;font-weight:900;color:var(--gold-l);text-align:center;}
.lb-rank.top1{color:#ffd24a;} .lb-rank.top2{color:#cfd6e0;} .lb-rank.top3{color:#e0a050;}
.lb-name{flex:1;}
.lb-tro{color:var(--gold-l);font-weight:800;}
.modal-close{width:100%;padding:13px;background:linear-gradient(180deg,var(--panel-l),var(--panel-d));
  border:2px solid rgba(255,255,255,.15);box-shadow:var(--shadow);font-size:16px;}

/* toast */
.toast{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(13,16,24,.92);padding:14px 22px;border-radius:14px;font-size:16px;
  border:2px solid var(--bad);box-shadow:var(--shadow);z-index:30;
  animation:toastIn .25s, fadeOut .3s 1.1s forwards;pointer-events:none;}
@keyframes toastIn{from{transform:translate(-50%,-40%);opacity:0;}}
@keyframes fadeOut{to{opacity:0;}}

@media (max-width:560px){
  .nav-btn{min-width:62px;padding:9px 8px;font-size:11px;}
  .nav-ico{font-size:20px;}
  .big-btn.battle-btn{padding:16px 24px;font-size:20px;}
  .res{min-width:60px;padding:6px 10px;font-size:13px;}
}