/* Army Ants UI - chunky 80s toy-commercial cartoon style */
:root {
  --ink: #2a1430;
  --cream: #fff6dc;
  --red: #e0322b;
  --red-d: #8e1611;
  --green: #5fae2e;
  --green-d: #2e6612;
  --gold: #ffd23a;
  --panel: #3b2a1c;
  --font: 'Bangers', 'Impact', 'Arial Black', sans-serif;
  --body: 'Fredoka', 'Trebuchet MS', system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1d1636; color: var(--cream); font-family: var(--body); user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
#app { position: fixed; inset: 0; }
#game { position: absolute; inset: 0; touch-action: none; display: block; }
button { font-family: var(--font); cursor: pointer; color: inherit; touch-action: manipulation; }
svg { display: block; width: 100%; height: 100%; }

/* ---------- HUD ---------- */
#hud { position: absolute; left: 0; right: 0; top: 0; padding: calc(8px + var(--safe-t)) 10px 0; display: flex; align-items: flex-start; gap: 10px; pointer-events: none; z-index: 5; }
#hud .ico { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.hud-xp { display: flex; align-items: center; position: relative; }
.hud-xp .lvl { position: absolute; left: 0; top: 0; width: 30px; height: 30px; display: grid; place-items: center; font: 15px var(--font); color: transparent; }
.bar { position: relative; height: 22px; border-radius: 12px; background: rgba(20,10,25,.75); border: 2.5px solid var(--ink); box-shadow: inset 0 2px 0 rgba(255,255,255,.12), 0 3px 0 rgba(0,0,0,.35); overflow: hidden; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; transition: width .3s; }
.bar.xp { width: 110px; margin-left: -6px; }
.bar.xp > i { background: linear-gradient(#7cc6ff, #2f8fe8); }
.hud-mid { flex: 1; display: flex; justify-content: center; gap: 8px; }
.pill { display: flex; align-items: center; gap: 4px; background: rgba(20,10,25,.75); border: 2.5px solid var(--ink); border-radius: 14px; padding: 1px 4px 1px 2px; box-shadow: 0 3px 0 rgba(0,0,0,.35); }
.pill b, .bar b { font: 19px var(--font); letter-spacing: 1px; text-shadow: 0 2px 0 var(--ink); }
.pill em { font: 16px var(--font); font-style: normal; background: var(--green); color: #fff; border-radius: 6px; width: 18px; height: 18px; display: grid; place-items: center; border: 2px solid var(--green-d); }
.hud-right { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.hud-right .bar { width: 128px; display: flex; align-items: center; overflow: visible; }
.hud-right .bar .ico { margin-left: -8px; width: 28px; height: 28px; position: relative; z-index: 1; }
.hud-right .bar b { position: relative; z-index: 1; margin-left: auto; margin-right: 8px; font-size: 17px; }
.bar.ants { background: linear-gradient(#e8463a, #a51c14); }
.bar.syrup > i { background: linear-gradient(#ffe27a, #f2a91c); border-radius: 10px; }
#btn-mute { pointer-events: auto; position: absolute; right: 10px; top: calc(68px + var(--safe-t)); width: 34px; height: 34px; border-radius: 50%; border: 2.5px solid var(--ink); background: rgba(20,10,25,.7); font-size: 16px; line-height: 1; }

/* ---------- generic ---------- */
#layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.screen { position: absolute; inset: 0; pointer-events: none; }
.screen > * { pointer-events: auto; }
#toast { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -10px); background: rgba(20,10,25,.9); border: 3px solid var(--ink); padding: 8px 16px; border-radius: 14px; font: 20px var(--font); letter-spacing: 1px; opacity: 0; transition: .25s; pointer-events: none; z-index: 30; white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.banner { position: absolute; left: 0; right: 0; top: 24%; text-align: center; pointer-events: none; z-index: 20; animation: bannerIn .45s cubic-bezier(.2,1.6,.4,1); }
.banner.out { opacity: 0; transform: translateY(-20px); transition: .5s; }
.banner-title { font: clamp(34px, 8vw, 64px) var(--font); letter-spacing: 2px; color: var(--gold); -webkit-text-stroke: 2px var(--ink); text-shadow: 0 5px 0 var(--ink), 0 8px 20px rgba(0,0,0,.5); transform: rotate(-3deg); }
.banner-sub { font: 600 clamp(14px, 3.5vw, 20px) var(--body); text-shadow: 0 2px 0 var(--ink); margin-top: 4px; }
@keyframes bannerIn { from { transform: scale(.3) rotate(-12deg); opacity: 0; } }
.pill-btn { background: linear-gradient(#5a4a6a, #3a2a48); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 14px; font-size: 18px; letter-spacing: 1px; box-shadow: 0 4px 0 var(--ink); }
.pill-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.pill-btn.danger { background: linear-gradient(#e8463a, #a51c14); }
.pill-btn.go { background: linear-gradient(#7cd03e, #3f8a1a); }
.pill-btn.pulse { animation: glow 1s infinite; background: linear-gradient(#ffcf4a, #e0901a); color: var(--ink); text-shadow: none; }
@keyframes glow { 50% { box-shadow: 0 4px 0 var(--ink), 0 0 0 5px rgba(255,210,58,.55); } }
@keyframes pulse { 50% { transform: scale(1.08); } }
.big-btn { font-size: 26px; letter-spacing: 2px; padding: 10px 22px; border-radius: 18px; border: 4px solid var(--ink); background: linear-gradient(#6d5a80, #43325a); box-shadow: 0 6px 0 var(--ink); text-shadow: 0 2px 0 var(--ink); }
.big-btn.go { background: linear-gradient(#ff6a50, #d0261c); }
.big-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(132px + var(--safe-b)); background: rgba(20,10,25,.75); padding: 6px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; white-space: nowrap; pointer-events: none !important; transition: opacity .5s; max-width: 94vw; overflow: hidden; text-overflow: ellipsis; }
.hint.gone { opacity: 0; }
.stars i { font-style: normal; color: rgba(0,0,0,.35); -webkit-text-stroke: 1px var(--ink); }
.stars i.on { color: var(--gold); }
.stars.big { font-size: 46px; display: flex; justify-content: center; gap: 6px; line-height: 1; }
.stars.big i.on { animation: starPop .5s backwards cubic-bezier(.2,1.8,.4,1); text-shadow: 0 4px 0 var(--ink); }
@keyframes starPop { from { transform: scale(0) rotate(-90deg); } }

/* ---------- map ---------- */
.logo { position: absolute; left: 50%; top: calc(54px + var(--safe-t)); transform: translateX(-50%) rotate(-4deg); font: clamp(38px, 9vw, 64px)/0.85 var(--font); text-align: center; color: #ff6a2a; -webkit-text-stroke: 2.5px #4a0c08; text-shadow: 0 5px 0 #4a0c08, 0 9px 18px rgba(0,0,0,.5); pointer-events: none !important; z-index: 2; }
.logo span { display: block; }
.logo span:last-child { color: #ffb12a; margin-left: .6em; }
.map-board { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: min(94vw, 900px); height: min(62vh, 520px); border-radius: 26px; border: 5px solid var(--ink);
  background: linear-gradient(rgba(0,0,0,.0), rgba(0,0,0,.25)), repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px), radial-gradient(ellipse at 35% 55%, #3f8a3a, #1f4a24 60%, #18301c);
  box-shadow: 0 10px 0 var(--ink), 0 20px 40px rgba(0,0,0,.5); }
.map-path { position: absolute; inset: 0; pointer-events: none; }
.map-path path { fill: none; stroke: #f4e6a8; stroke-width: .8; stroke-dasharray: 1.6 1.4; vector-effect: non-scaling-stroke; stroke-width: 5px; stroke-dasharray: 10 9; stroke-linecap: round; opacity: .85; }
.node { position: absolute; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--ink); background: radial-gradient(circle at 35% 30%, #7fd0ff, #1f7fd8); box-shadow: 0 5px 0 var(--ink); display: grid; place-items: center; padding: 0; }
.node:active { transform: translate(-50%, -46%); }
.node .num { font-size: 32px; text-shadow: 0 3px 0 var(--ink); width: 30px; height: 30px; display: grid; place-items: center; line-height: 1; }
.node .lbl { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 18px; white-space: nowrap; font: 600 13px var(--body); background: rgba(20,10,25,.8); padding: 2px 8px; border-radius: 8px; }
.node .stars { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 0; font-size: 17px; white-space: nowrap; }
.node.done { background: radial-gradient(circle at 35% 30%, #ffe27a, #e09a10); }
.node.locked { background: radial-gradient(circle at 35% 30%, #8a8f96, #4a4f56); }
.node.home { background: radial-gradient(circle at 35% 30%, #ffb27a, #c25a1a); width: 70px; height: 70px; }
.node.home svg { width: 40px; height: 40px; }
.map-home .node { left: 0; top: 0; }
.map-home { position: absolute; width: 0; height: 0; }
.corner-btns { position: absolute; right: 12px; bottom: calc(12px + var(--safe-b)); display: flex; gap: 10px; align-items: flex-end; }
.round-btn, .square-btn { width: 84px; height: 84px; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0; }
.round-btn { border-radius: 50%; }
.square-btn { border-radius: 18px; width: 72px; height: 72px; background: linear-gradient(#7cd03e, #3f8a1a); }
.round-btn.attack { background: radial-gradient(circle at 40% 30%, #ff7a5a, #c0201a); }
.round-btn.build { background: radial-gradient(circle at 40% 30%, #ffc27a, #b8601a); }
.round-btn span, .square-btn span { font-size: 30px; line-height: 1; height: 34px; display: grid; place-items: center; }
.round-btn span svg { width: 34px; height: 34px; }
.round-btn b, .square-btn b { font-weight: normal; font-size: 16px; letter-spacing: 1px; text-shadow: 0 2px 0 var(--ink); }
.round-btn:active, .square-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }

/* ---------- modal cards ---------- */
.modal-wrap { position: absolute; inset: 0; background: rgba(15,8,20,.55); display: grid; place-items: center; pointer-events: auto; z-index: 10; animation: fade .2s; padding: 12px; }
@keyframes fade { from { opacity: 0; } }
.card { position: relative; width: min(440px, 94vw); max-height: 92vh; overflow: auto; background: linear-gradient(#5b4330, #3b2a1c); border: 5px solid var(--ink); border-radius: 24px; padding: 18px 18px 22px; text-align: center; box-shadow: 0 10px 0 var(--ink), 0 20px 50px rgba(0,0,0,.6); animation: pop .35s cubic-bezier(.2,1.5,.4,1); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.card .x { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--ink); background: var(--red); font-size: 18px; }
.card-title { font: 32px var(--font); letter-spacing: 1px; color: var(--gold); text-shadow: 0 3px 0 var(--ink); padding: 0 34px; }
.card p { margin: 8px 0 12px; font-weight: 600; }
.intel { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.intel span { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.25); padding: 3px 8px; border-radius: 8px; }
.intel svg { width: 16px; height: 16px; }
.army-title { margin-top: 14px; font: 20px var(--font); letter-spacing: 1px; color: #bff28a; }
.army { display: flex; justify-content: center; gap: 8px; margin: 6px 0 16px; flex-wrap: wrap; }
.army-ant { width: 84px; background: rgba(0,0,0,.25); border-radius: 14px; padding: 4px; display: flex; flex-direction: column; align-items: center; }
.army-ant b { font: 20px var(--font); }
.army-ant small { font-size: 11px; line-height: 1.1; }

/* ---------- battle ---------- */
.battle-top { position: absolute; left: 50%; transform: translateX(-50%); top: calc(48px + var(--safe-t)); display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none !important; }
.timer { font: 30px var(--font); letter-spacing: 2px; text-shadow: 0 3px 0 var(--ink); }
.timer.low { color: #ff6a5a; animation: pulse .6s infinite; }
.destroy { display: flex; align-items: center; gap: 6px; font: 600 12px var(--body); text-shadow: 0 1px 0 var(--ink); }
.destroy .bar { width: 120px; height: 14px; }
.destroy .bar i { background: linear-gradient(#ffb27a, #e0502a); }
.battle-side { position: absolute; right: 10px; top: calc(110px + var(--safe-t)); display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.battle-side .pill-btn { font-size: 16px; padding: 5px 12px; }
.tray { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(8px + var(--safe-b)); display: flex; gap: 8px; padding: 8px; background: linear-gradient(rgba(59,42,28,.95), rgba(40,28,18,.95)); border: 4px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); max-width: 98vw; overflow-x: auto; touch-action: none; }
.ant-card { position: relative; width: 82px; height: 104px; flex: none; border-radius: 14px; border: 3px solid var(--ink); background: radial-gradient(circle at 50% 35%, #8ac850, #3f7a22); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; cursor: grab; touch-action: none; transition: transform .12s; }
.ant-card .ic canvas { width: 60px; height: 60px; display: block; margin-top: 2px; pointer-events: none; }
.ant-card .cnt { position: absolute; top: -8px; right: -8px; background: var(--red); border: 3px solid var(--ink); border-radius: 12px; min-width: 32px; padding: 0 4px; font: 18px var(--font); text-align: center; }
.ant-card small { font: 600 11px/1.05 var(--body); text-align: center; text-shadow: 0 1px 0 var(--ink); padding: 0 2px; }
.ant-card.sel { transform: translateY(-8px); box-shadow: 0 0 0 3px var(--gold), 0 8px 16px rgba(0,0,0,.5); }
.ant-card.empty { filter: grayscale(1) brightness(.6); cursor: not-allowed; }
.drag-ghost { position: fixed; width: 72px; height: 72px; transform: translate(-50%, -80%); pointer-events: none; z-index: 50; filter: drop-shadow(0 6px 4px rgba(0,0,0,.5)); }
.drag-ghost.bad { filter: drop-shadow(0 0 6px #ff3a2a) grayscale(.6); }

/* ---------- build ---------- */
.build-top { position: absolute; left: 50%; transform: translateX(-50%); top: calc(48px + var(--safe-t)); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; width: max-content; max-width: 96vw; }
.build-title { font: 26px var(--font); letter-spacing: 1px; color: var(--gold); text-shadow: 0 3px 0 var(--ink); padding: 0 6px; }
.build-panel { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(8px + var(--safe-b)); width: min(98vw, 760px); background: linear-gradient(rgba(59,42,28,.96), rgba(40,28,18,.96)); border: 4px solid var(--ink); border-radius: 20px; box-shadow: 0 6px 0 var(--ink); padding: 8px; }
.mats { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 6px; }
.mat { display: flex; align-items: center; gap: 5px; border: 2.5px solid var(--ink); border-radius: 10px; background: rgba(0,0,0,.3); padding: 3px 9px; font-size: 15px; letter-spacing: 1px; }
.mat i { width: 16px; height: 16px; border-radius: 4px; border: 2px solid; }
.mat.sel { background: var(--gold); color: var(--ink); }
.mat:disabled { opacity: .35; }
.mat.tool.sel { background: #ff6a5a; color: #fff; }
.sep { width: 6px; }
.palette { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px; }
.part { flex: none; width: 74px; border: 3px solid var(--ink); border-radius: 12px; background: rgba(255,255,255,.08); padding: 3px 2px; display: flex; flex-direction: column; align-items: center; }
.part canvas { width: 56px; height: 56px; display: block; }
.part small { font: 600 11px var(--body); white-space: nowrap; }
.part.sel { background: rgba(255,210,58,.35); box-shadow: 0 0 0 3px var(--gold); }
.build-ui .hint { bottom: auto; top: calc(96px + var(--safe-t)); }

/* ---------- results ---------- */
.result-card.win { background: linear-gradient(#4a6a2a, #2a3e16); }
.result-card.lose { background: linear-gradient(#6a2a2a, #3e1616); }
.result-title { font: 54px var(--font); letter-spacing: 3px; color: var(--gold); -webkit-text-stroke: 2px var(--ink); text-shadow: 0 5px 0 var(--ink); transform: rotate(-3deg); }
.result-card.lose .result-title { color: #ff8a7a; }
.result-sub { font-weight: 600; margin-bottom: 6px; }
.result-ant canvas { width: 90px; height: 90px; margin: -4px auto -8px; display: block; }
.stats { margin: 6px auto 10px; border-collapse: collapse; font-weight: 600; }
.stats td { padding: 3px 10px; }
.stats td:first-child { text-align: left; opacity: .85; }
.stats td:last-child { text-align: right; font: 20px var(--font); letter-spacing: 1px; }
.rewards { display: flex; justify-content: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.rewards span { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.3); padding: 4px 10px; border-radius: 12px; }
.rewards svg { width: 22px; height: 22px; }
.rewards b { font: 20px var(--font); letter-spacing: 1px; }
.result-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.result-btns .big-btn { font-size: 22px; padding: 8px 16px; }

#rotate-tip { display: none; }
body.portrait.in-battle #rotate-tip { display: block; position: absolute; left: 50%; transform: translateX(-50%); top: calc(118px + var(--safe-t)); font: 600 12px var(--body); background: rgba(20,10,25,.7); padding: 3px 10px; border-radius: 10px; white-space: nowrap; pointer-events: none; z-index: 3; opacity: .85; }
body.portrait .battle-side { top: calc(150px + var(--safe-t)); }

@media (max-width: 520px) {
  .bar.xp { width: 70px; }
  .hud-right .bar { width: 100px; }
  .ant-card { width: 70px; height: 92px; }
  .ant-card .ic canvas { width: 50px; height: 50px; }
  .tray { gap: 6px; padding: 6px; }
  .hint { bottom: calc(118px + var(--safe-b)); font-size: 12px; }
  .node { width: 54px; height: 54px; }
  .node .lbl { font-size: 11px; }
  .round-btn { width: 72px; height: 72px; }
  .square-btn { width: 62px; height: 62px; }
  .part { width: 64px; }
  .part canvas { width: 46px; height: 46px; }
  .build-title { font-size: 20px; }
  .build-ui .hint { top: calc(140px + var(--safe-t)); }
  .pill-btn { font-size: 15px; padding: 5px 10px; }
}
@media (max-height: 500px) {
  .logo { font-size: 30px; top: 6px; left: 22%; }
  .map-board { height: 70vh; top: 55%; }
  .ant-card { height: 84px; width: 68px; }
  .ant-card .ic canvas { width: 46px; height: 46px; }
  .hint { bottom: calc(104px + var(--safe-b)); }
  .build-panel { padding: 5px; }
  .part canvas { width: 38px; height: 38px; }
  .build-ui .hint { display: none; }
}