/* 遊戲風 UI:石板 + 金邊 + 立體按鈕。類別/ID 與 game.js、skilltree-ui.js 共用,改名請同步修改。 */
:root {
  --ink:#0d0a16; --stone-1:#2a2547; --stone-2:#1a1630; --stone-3:#100d20;
  --gold-hi:#ffe9a3; --gold:#f2b73a; --gold-lo:#9a5f12; --gold-dk:#4b2a06;
  --edge:#7a5a22; --green:#58e07f; --green-dk:#1c7a3c; --red:#ff5a5a; --pink:#d84fd0; --cyan:#4fd6ff;
  --card:#2a2650;
  --font:"Cinzel","Palatino Linotype","Microsoft JhengHei","Noto Sans TC",serif;
  --bevel:inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.35);
}
* { box-sizing:border-box; user-select:none; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:#0d0a16; color:#fff; font-family:var(--font); font-weight:700; overflow:hidden; }
canvas#c { position:fixed; inset:0; width:100%; height:100%; display:block; }
.hidden { display:none !important; }
.purple-gem { display:inline-block; filter:hue-rotate(65deg) saturate(1.8) brightness(1.05); }
button { font:inherit; color:inherit; cursor:pointer; border:0; }
b { font-weight:900; }

/* ───────── 通用:金屬立體按鈕 ───────── */
.big, .card .buy, .tree-tabs button, .skill button, .tree-reset {
  position:relative; text-shadow:0 1px 0 rgba(255,255,255,.35);
  transition:transform .08s, filter .15s, box-shadow .08s;
}
.big {
  padding:12px 40px; margin:8px 6px; border-radius:12px; font-size:20px; letter-spacing:2px;
  color:var(--gold-dk); background:linear-gradient(#ffe08a,#f2b73a 55%,#d68f1c);
  border:2px solid var(--gold-lo); box-shadow:var(--bevel), 0 5px 0 #6b3d08, 0 10px 18px rgba(0,0,0,.45);
}
.big:hover { filter:brightness(1.12); transform:translateY(-1px); }
.big:active { transform:translateY(4px); box-shadow:var(--bevel), 0 1px 0 #6b3d08, 0 3px 8px rgba(0,0,0,.4); }
.green { color:#053a19; background:linear-gradient(#a5ffbf,#58e07f 55%,#2fb85b); border-color:var(--green-dk); box-shadow:var(--bevel), 0 5px 0 #0f4d25, 0 10px 18px rgba(0,0,0,.45); }
.green:active { box-shadow:var(--bevel), 0 1px 0 #0f4d25, 0 3px 8px rgba(0,0,0,.4); }

/* ───────── 戰鬥 HUD ───────── */
#hud { position:fixed; inset:0; pointer-events:none; }
#hud button { pointer-events:auto; }
#res { position:absolute; left:12px; top:12px; display:flex; flex-direction:column; gap:8px; }
.pill {
  position:relative; display:flex; align-items:center; gap:8px; min-width:118px; height:34px;
  padding:0 16px 0 40px; font-size:17px; border-radius:18px;
  background:linear-gradient(#1a1630,#0d0a1c); border:2px solid var(--gold-lo);
  box-shadow:0 3px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
}
.pill .ico {
  position:absolute; left:-6px; top:50%; transform:translateY(-50%);
  width:42px; height:42px; line-height:38px; font-size:22px; text-align:center; border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff3b8,#f2b73a 55%,#9a5f12); border:2px solid #5a3507;
  box-shadow:0 2px 6px rgba(0,0,0,.6), inset 0 -3px 0 rgba(0,0,0,.25);
}
.pill b { margin-left:auto; text-shadow:0 2px 0 #000; color:var(--gold-hi); }

#wavebox { position:absolute; right:12px; top:86px; text-align:center; min-width:210px; filter:drop-shadow(0 6px 8px rgba(0,0,0,.55)); }
.wave-title {
  position:relative; padding:5px 26px 6px; font-size:20px; letter-spacing:3px; text-shadow:0 2px 0 #000;
  background:linear-gradient(#4a2f78,#2a1a52 60%,#1b1038); border:2px solid var(--gold); border-bottom:0; border-radius:12px 12px 0 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.wave-title b { color:var(--gold-hi); font-size:24px; }
.tier { font-size:12px; letter-spacing:0; opacity:.9; color:#d8c9ff; margin-left:6px; }
.wave-bar { height:13px; background:#0b0818; border:2px solid var(--gold); border-top:2px solid var(--gold-lo); border-radius:0 0 10px 10px; overflow:hidden; }
.wave-bar i { display:block; height:100%; width:0; background:linear-gradient(#ffd070,#ff8a2a 60%,#d9541a); box-shadow:inset 0 2px 0 rgba(255,255,255,.4); }

#speed { position:absolute; right:12px; top:12px; display:flex; align-items:center; gap:6px; padding:4px 8px; border-radius:14px; background:linear-gradient(#1a1630,#0d0a1c); border:2px solid var(--gold-lo); box-shadow:0 3px 8px rgba(0,0,0,.55); }
#speed button { width:28px; height:26px; border-radius:7px; background:linear-gradient(#ffe08a,#d68f1c); color:var(--gold-dk); border:1px solid var(--gold-lo); box-shadow:var(--bevel); }
#speed button:active { transform:translateY(2px); }
#speed span { min-width:38px; text-align:center; color:var(--gold-hi); }
#goal { position:absolute; right:12px; top:56px; font-size:13px; padding:3px 12px; border-radius:10px; background:#0b0818cc; border:1px solid var(--gold-lo); letter-spacing:1px; }
#goal b { color:var(--gold-hi); }

#towerhp { position:absolute; left:50%; top:10px; width:min(420px,44vw); height:26px; background:#0b0818; border:3px solid var(--gold); border-radius:14px; overflow:hidden; transform:translateX(-50%); box-shadow:0 3px 8px rgba(0,0,0,.6); }
#towerhp i { position:absolute; inset:0; width:100%; background:linear-gradient(#ff7a8a,#d8283f 60%,#8f1226); transition:width .1s; box-shadow:inset 0 2px 0 rgba(255,255,255,.35); }
#towerhp span { position:absolute; inset:0; text-align:center; font-size:16px; line-height:20px; letter-spacing:1px; text-shadow:0 1px 2px #000,0 0 3px #000; }

#floaters .f { position:absolute; font-weight:900; font-size:16px; -webkit-text-stroke:.6px #000; text-shadow:0 2px 0 #000,0 0 6px #000; animation:rise .75s ease-out forwards; transform:translate(-50%,-50%); }
#floaters .f.dmg { color:#fff; font-size:28px; -webkit-text-stroke:1.2px #000; }
#floaters .f.crit { color:#ffd84a; font-size:42px; -webkit-text-stroke:1.5px #5a1a00; text-shadow:0 3px 0 #000,0 0 12px #ff8a00; }
#floaters .f.gold { color:#ffd84a; }
@keyframes rise { to { transform:translate(-50%,-200%); opacity:0; } }

/* ───────── 法術欄 ───────── */
#spellbar { position:absolute; right:14px; bottom:calc(var(--panel-h,200px) + 14px); display:flex; flex-direction:column; gap:12px; pointer-events:auto; }
.spell {
  position:relative; width:68px; height:68px; border-radius:50%; overflow:hidden; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%,#4a3a7c,#1a1230 70%); border:3px solid var(--gold);
  box-shadow:0 0 0 2px #3b2208, 0 6px 14px rgba(0,0,0,.65), inset 0 0 12px rgba(190,140,255,.35);
  transition:transform .12s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
}
.spell .ico { font-size:32px; filter:drop-shadow(0 2px 4px rgba(0,0,0,.8)); transition:transform .15s; pointer-events:none; }
.spell:hover:not(.on-cd) { transform:scale(1.1) translateY(-2px); }
.spell:hover:not(.on-cd) .ico { transform:scale(1.15); }
.spell:active:not(.on-cd) { transform:scale(.94); }
.spell.ready { animation:spellPulse 2s infinite ease-in-out; }
.spell.on-cd { cursor:not-allowed; filter:grayscale(.5) brightness(.85); }
.spell .cd { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(to top,rgba(8,6,16,.95),rgba(20,14,34,.85)); pointer-events:none; display:flex; align-items:center; justify-content:center; border-top:2px solid rgba(255,190,80,.8); }
.spell .cd-sec { font-size:13px; font-weight:900; color:#ffe2a8; text-shadow:0 1px 3px #000; }
.spell small { position:absolute; right:7px; bottom:3px; font-size:11px; font-weight:900; color:#fff; text-shadow:0 1px 3px #000,0 0 3px #000; pointer-events:none; z-index:2; }
.spell-inferno { border-color:#ff9a3c; box-shadow:0 0 0 2px #3b1a08, 0 6px 14px rgba(0,0,0,.65), 0 0 16px rgba(255,110,30,.5), inset 0 0 12px rgba(255,120,40,.4); }
.spell-meteor { border-color:#ff6666; box-shadow:0 0 0 2px #3b0e0e, 0 6px 14px rgba(0,0,0,.65), 0 0 16px rgba(255,60,60,.5), inset 0 0 12px rgba(255,80,80,.4); }
.spell-lightning { border-color:#6ccdff; box-shadow:0 0 0 2px #0c2a3b, 0 6px 14px rgba(0,0,0,.65), 0 0 16px rgba(70,180,255,.5), inset 0 0 12px rgba(100,200,255,.4); }
@keyframes spellPulse { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.35) drop-shadow(0 0 8px rgba(255,220,140,.9)); } }
.spell.cast-flash { animation:spellFlash .3s cubic-bezier(.1,.9,.2,1); }
@keyframes spellFlash { 0% { transform:scale(.92); filter:brightness(2.4); } 100% { transform:scale(1); filter:brightness(1); } }

/* ───────── 底部升級面板 ───────── */
#panel {
  position:fixed; left:0; right:0; bottom:0; height:var(--panel-h,200px); padding:0 10px 10px;
  background:linear-gradient(#241c40f2,#120d24f8); border-top:4px solid var(--gold);
  box-shadow:0 -4px 0 #3b2208, 0 -10px 26px rgba(0,0,0,.55);
}
#panel::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,transparent,#fff6c8,transparent); opacity:.7; }
#tabs { display:flex; gap:4px; margin-top:-40px; padding-left:6px; }
.tab {
  min-width:116px; padding:9px 16px 8px; border-radius:12px 12px 0 0; font-size:15px; letter-spacing:1px;
  background:linear-gradient(#3a3166,#201a3c); border:2px solid #6a5420; border-bottom:0; color:#cfc6ee; text-shadow:0 1px 2px #000;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18);
}
.tab:hover { filter:brightness(1.2); }
.tab.on { color:#fff; border-color:var(--gold); background:linear-gradient(#37c5ea,#1b84a8); box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 -3px 10px rgba(80,200,240,.4); }
.tab[data-tab="attack"].on { background:linear-gradient(#ff7a8e,#c22b47); box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 -3px 10px rgba(255,90,110,.4); }
.tab[data-tab="recruit"].on { background:linear-gradient(#b987ff,#7a3fd0); box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 -3px 10px rgba(170,110,255,.4); }
#cards { display:flex; flex-wrap:wrap; gap:10px; padding:12px 4px 4px; overflow:auto; max-height:calc(100% - 4px); }
.card {
  width:182px; padding:7px 9px; display:flex; flex-direction:column; gap:5px; border-radius:10px;
  background:linear-gradient(#34305e,#1e1a3a); border:2px solid #6a5420;
  box-shadow:0 4px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15);
  transition:transform .1s, border-color .15s;
}
.card:hover { transform:translateY(-2px); border-color:var(--gold); }
.card .t { font-size:14px; color:#e6dcff; text-shadow:0 1px 2px #000; }
.card .v { display:flex; justify-content:space-between; align-items:center; font-size:19px; text-shadow:0 2px 0 #000; }
.card .buy { min-width:72px; padding:4px 10px; border-radius:8px; font-weight:900; color:var(--gold-dk); background:linear-gradient(#ffe08a,#f2b73a 55%,#d68f1c); border:2px solid var(--gold-lo); box-shadow:var(--bevel), 0 3px 0 #6b3d08; }
.card .buy:not(:disabled):hover { filter:brightness(1.12); }
.card .buy:not(:disabled):active { transform:translateY(3px); box-shadow:var(--bevel), 0 0 0 #6b3d08; }
.card .buy:disabled { background:linear-gradient(#8f8ba3,#5d5a70); color:#2d2b3b; border-color:#3b3950; box-shadow:var(--bevel), 0 3px 0 #2a2838; cursor:not-allowed; text-shadow:none; }

/* ───────── 全螢幕面板(主選單 / 技能樹 / 獎勵 / 結算) ───────── */
.overlay {
  position:fixed; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; overflow-x:hidden; overflow-y:auto;
  background:radial-gradient(ellipse at 50% 40%, rgba(40,26,80,.55), rgba(5,3,12,.88) 75%);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  animation:fadeIn .25s ease-out;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.box {
  position:relative; width:min(580px,94vw); margin:auto; padding:26px 30px 22px; text-align:center; border-radius:18px;
  background:linear-gradient(#2e2758,#1a1534 60%,#120e28);
  border:4px solid var(--gold);
  box-shadow:0 0 0 3px #3b2208, 0 0 0 5px var(--gold-lo), 0 24px 60px rgba(0,0,0,.75), inset 0 0 40px rgba(120,90,220,.18), inset 0 2px 0 rgba(255,255,255,.2);
  animation:popIn .3s cubic-bezier(.2,1.2,.3,1);
}
@keyframes popIn { from { transform:scale(.88) translateY(14px); opacity:0; } to { transform:none; opacity:1; } }
.box::before, .box::after { content:"◆"; position:absolute; top:-15px; font-size:22px; color:var(--gold-hi); text-shadow:0 0 10px var(--gold), 0 2px 0 #3b2208; }
.box::before { left:22px; } .box::after { right:22px; }
.box.wide { width:min(780px,96vw); }
h1 {
  margin:0 0 6px; font-size:38px; letter-spacing:5px; font-weight:900;
  background:linear-gradient(#fff6c8,#ffd45a 45%,#e08a14); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 3px 0 #4b2a06) drop-shadow(0 0 14px rgba(255,170,40,.5));
}
h2 { margin:6px 0 12px; font-size:22px; letter-spacing:3px; color:var(--gold-hi); text-shadow:0 2px 0 #000, 0 0 12px rgba(255,190,70,.5); }
.sub { margin:0 0 14px; opacity:.85; font-size:14px; font-weight:600; }
.row {
  display:flex; justify-content:center; gap:10px 14px; align-items:center; flex-wrap:wrap; margin:10px 0; padding:8px 12px; font-size:16px;
  background:linear-gradient(#0b0818,#17122e); border:2px solid #4a3a16; border-radius:12px; box-shadow:inset 0 2px 8px rgba(0,0,0,.6);
}
.row span { opacity:.85; font-size:14px; }
.row b { color:var(--gold-hi); font-size:20px; text-shadow:0 2px 0 #000; }
.hint { font-size:12px; opacity:.65; margin:14px 0 0; font-weight:600; line-height:1.6; }

/* 獎勵卡 */
#reward-cards { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin:14px 0; }
.rcard {
  width:200px; min-height:260px; padding:14px 12px; border-radius:14px; display:flex; flex-direction:column; align-items:center; gap:9px; font-size:14px; cursor:pointer;
  border:3px solid var(--gold); box-shadow:0 0 0 2px #3b2208, 0 10px 20px rgba(0,0,0,.55), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -30px 40px rgba(0,0,0,.25);
  transition:transform .12s, filter .15s;
}
.rcard:hover { transform:translateY(-8px) scale(1.04); filter:brightness(1.12); border-color:var(--gold-hi); }
.rcard .tag { font-size:12px; font-weight:900; letter-spacing:1px; background:#000a; padding:2px 14px; border-radius:10px; border:1px solid #fff4; }
.rcard .name { font-size:21px; text-shadow:0 2px 0 #000; }
.rcard .big-ico { font-size:58px; filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.rcard .desc { white-space:pre-line; font-size:13px; font-weight:600; opacity:.96; text-shadow:0 1px 2px #000; }
.rcard.spell { background:linear-gradient(#f0843a,#a63e10); }
.rcard.cur { background:linear-gradient(#3a8ae0,#16407f); }

#loading { position:fixed; inset:0; background:radial-gradient(ellipse at center,#2a1f52,#0d0a16); display:flex; align-items:center; justify-content:center; font-size:24px; letter-spacing:6px; color:var(--gold-hi); text-shadow:0 0 14px var(--gold); z-index:50; }

/* 結算評級 */
.rank { font-size:104px; font-weight:900; line-height:1; margin:4px 0 8px; -webkit-text-stroke:3px #000; paint-order:stroke fill; text-shadow:0 6px 0 #0008; animation:rankIn .6s cubic-bezier(.2,1.5,.3,1); }
@keyframes rankIn { from { transform:scale(2.6) rotate(-12deg); opacity:0; } to { transform:none; opacity:1; } }
.rank[data-rank="S"] { color:#ffd84a; text-shadow:0 0 30px #ffb300, 0 6px 0 #0008; }
.rank[data-rank="A"] { color:#7be07b; } .rank[data-rank="B"] { color:#5aa8ff; }
.rank[data-rank="C"] { color:#c8b0ff; } .rank[data-rank="D"] { color:#a4a4b4; }

/* 技能樹 */
.tree-box { text-align:left; }
.tree-box h2 { text-align:center; font-size:26px; }
.tree-sp { margin-left:14px; font-size:16px; padding:2px 14px; border-radius:14px; background:#0b0818; border:2px solid var(--gold-lo); color:var(--gold-hi); letter-spacing:1px; }
.tree-tabs { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:8px 0 14px; }
.tree-tabs button { padding:8px 16px; border-radius:10px; font-size:14px; color:#cfc6ee; background:linear-gradient(#3a3166,#201a3c); border:2px solid #6a5420; box-shadow:var(--bevel), 0 3px 0 #120c24; }
.tree-tabs button:hover { filter:brightness(1.2); }
.tree-tabs button.on { color:#fff; border-color:var(--gold); background:linear-gradient(#d86ee0,#8a2f9a); box-shadow:var(--bevel), 0 3px 0 #3d1046, 0 0 14px rgba(216,110,224,.5); }
.tree-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(214px,1fr)); gap:10px; max-height:52vh; overflow:auto; padding:4px; }
.skill {
  display:flex; flex-direction:column; gap:6px; padding:10px 11px; font-size:13px; border-radius:12px;
  background:linear-gradient(#34305e,#1e1a3a); border:2px solid #6a5420; box-shadow:0 4px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15);
}
.skill.locked { opacity:.5; filter:grayscale(.6); }
.skill .sk-name { font-size:15px; color:var(--gold-hi); text-shadow:0 1px 2px #000; }
.skill .sk-name small { color:#d8c9ff; font-size:11px; margin-left:4px; }
.skill .sk-desc { opacity:.82; font-weight:600; }
.skill .sk-val { color:#9fe8a8; }
.skill button { padding:5px; border-radius:8px; font-weight:900; color:#fff; background:linear-gradient(#d86ee0,#8a2f9a); border:2px solid #4a1556; box-shadow:var(--bevel), 0 3px 0 #3d1046; text-shadow:0 1px 2px #000; }
.skill button:not(:disabled):hover { filter:brightness(1.15); }
.skill button:not(:disabled):active { transform:translateY(3px); box-shadow:var(--bevel), 0 0 0 #3d1046; }
.skill button:disabled { background:linear-gradient(#8f8ba3,#5d5a70); border-color:#3b3950; box-shadow:var(--bevel), 0 3px 0 #2a2838; color:#d5d3de; cursor:not-allowed; }
.tree-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:14px; }
.tree-reset { display:block; margin:12px auto 0; padding:6px 16px; border-radius:10px; font-size:13px; color:#ffc4c4; background:linear-gradient(#6a2a3a,#3d1522); border:2px solid #8a3a4a; box-shadow:var(--bevel), 0 3px 0 #200a12; }
.tree-reset:hover { filter:brightness(1.2); }

/* 設定:語言 */
.gear { position:absolute; left:16px; top:14px; width:40px; height:40px; border-radius:50%; font-size:22px; line-height:36px; color:var(--gold-hi); background:linear-gradient(#3a3166,#201a3c); border:2px solid var(--gold); box-shadow:var(--bevel), 0 3px 0 #120c24; }
.gear:hover { filter:brightness(1.25); }
.lang-row { flex-direction:column; gap:10px; }
#lang-buttons { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.lang-btn { padding:9px 18px; border-radius:10px; font-size:15px; color:#cfc6ee; background:linear-gradient(#3a3166,#201a3c); border:2px solid #6a5420; box-shadow:var(--bevel), 0 3px 0 #120c24; }
.lang-btn:hover { filter:brightness(1.2); }
.lang-btn.on { color:#fff; border-color:var(--gold); background:linear-gradient(#37c5ea,#1b84a8); }

/* ───────── 手機 / 窄螢幕(RWD) ───────── */
button { touch-action:manipulation; }
@media (max-width:640px) {
  h1 { font-size:30px; letter-spacing:3px; }
  h2 { font-size:19px; }
  .box { padding:22px 14px 16px; }
  .big { padding:10px 22px; font-size:17px; margin:6px 4px; }
  .row { font-size:14px; padding:6px 8px; }
  .row b { font-size:17px; }
  /* HUD:城堡血條橫跨最上方,其餘項目往下排,避免互相重疊 */
  #towerhp { left:8px; right:8px; top:max(8px, env(safe-area-inset-top)); width:auto; transform:none; height:22px; }
  #towerhp span { font-size:13px; line-height:16px; }
  #res { left:8px; top:42px; gap:5px; }
  .pill { min-width:96px; height:28px; font-size:14px; padding:0 12px 0 34px; }
  .pill .ico { width:34px; height:34px; line-height:30px; font-size:18px; }
  #speed { right:8px; top:40px; padding:3px 6px; }
  #speed button { width:26px; height:24px; }
  #goal { right:8px; top:74px; font-size:12px; padding:2px 8px; }
  #wavebox { right:8px; top:98px; min-width:150px; }
  .wave-title { font-size:15px; padding:3px 12px 4px; letter-spacing:1px; }
  .wave-title b { font-size:18px; }
  .wave-bar { height:10px; }
  #spellbar { right:8px; gap:8px; bottom:calc(var(--panel-h,200px) + 8px); }
  .spell { width:56px; height:56px; }
  .spell .ico { font-size:26px; }
  /* 底部面板:分頁平分寬度,卡片兩欄 */
  #panel { padding:0 6px max(8px, env(safe-area-inset-bottom)); }
  #tabs { margin-top:-34px; padding-left:0; gap:3px; }
  .tab { flex:1; min-width:0; padding:8px 4px; font-size:13px; letter-spacing:0; }
  #cards { gap:6px; padding-top:8px; }
  .card { width:calc(50% - 3px); padding:5px 7px; }
  .card .t { font-size:12px; }
  .card .v { font-size:16px; }
  .card .buy { min-width:0; padding:3px 7px; font-size:13px; }
  #reward-cards { gap:10px; }
  .rcard { width:100%; min-height:0; flex-direction:row; flex-wrap:wrap; justify-content:center; padding:10px; }
  .rcard .big-ico { font-size:40px; }
  .tree-grid { grid-template-columns:1fr; max-height:48vh; }
  .rank { font-size:80px; }
  .gear { left:10px; top:10px; width:36px; height:36px; line-height:32px; }
}
/* 手機橫向:高度很矮,縮小 HUD、面板與按鈕 */
@media (max-height:520px) {
  #res { top:8px; gap:3px; }
  .pill { height:26px; font-size:13px; min-width:90px; }
  .pill .ico { width:30px; height:30px; line-height:27px; font-size:16px; }
  #towerhp { top:6px; left:50%; right:auto; transform:translateX(-50%); width:min(300px,36vw); height:20px; }
  #wavebox { left:50%; right:auto; top:32px; transform:translateX(-50%); min-width:170px; }
  .wave-title { font-size:15px; padding:2px 14px 3px; }
  #speed { top:6px; right:8px; }
  #goal { top:48px; right:8px; }
  #spellbar { flex-direction:row; right:8px; gap:8px; }
  .spell { width:50px; height:50px; }
  #tabs { margin-top:-30px; }
  .tab { padding:6px 12px; min-width:0; font-size:13px; }
  .card { width:150px; }
  .box { padding:14px 18px 12px; }
  h1 { font-size:26px; margin-bottom:2px; }
  .rank { font-size:56px; margin:0; }
  .big { padding:7px 22px; font-size:16px; }
  .tree-grid { max-height:38vh; }
  .rcard { min-height:0; width:170px; }
}
#settings { z-index:11; background:radial-gradient(ellipse at 50% 40%, rgba(30,20,60,.96), rgba(5,3,12,.98) 80%); }