/* Towers scene themes. The theme class (t-moon, t-fire, ...) sits on .tower-area next to .themed;
   ids match GAME_THEMES in app.py. Scene layers are injected by static/js/towers-themes.js. */

.tws-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.tws{position:absolute;inset:0;pointer-events:none;}
.tws-far{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;aspect-ratio:8/3;z-index:1;}
.tws-fx{z-index:2;}
.tws-fx i{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%;}
.tws-ground{position:absolute;left:0;right:0;bottom:0;width:100%;height:92px;z-index:3;}
.tws-vig{z-index:3;background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 55%,rgba(0,0,0,.45));}

.tower-area.themed .tower-wrap{justify-content:flex-end;padding-bottom:34px;position:relative;z-index:4;}
.tower-area.themed .keep{position:relative;}
.tower-area.themed .keep::after{content:'';position:absolute;left:-6%;right:-6%;bottom:-14px;height:24px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);z-index:-1;}
.tower-area.themed .keep-torch::before{content:'';position:absolute;left:50%;top:-8px;width:56px;height:56px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,var(--fg) 0,transparent 65%);opacity:.28;animation:twsGlow 2.4s ease-in-out infinite;}
@keyframes twsGlow{50%{opacity:.4;transform:translateX(-50%) scale(1.08);}}

/* ================= Moonlit Siege ================= */
.tower-area.t-moon{
  --sh:#26314f;--sh2:#313e64;--open:#0c1226;--act:rgba(170,195,255,.14);--act-hover:rgba(170,195,255,.22);--act-ring:rgba(170,195,255,.45);
  --rows-tint:rgba(9,14,32,.8);
  --cr:#4c5880;--cr-r:#3d486b;--cr-s:#0c1226;
  --keep-brick:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='16'><rect width='24' height='16' fill='%23101830'/><rect x='1' y='1' width='22' height='6' rx='1' fill='%233b4a70'/><rect x='1' y='1' width='22' height='1' fill='%23586a9a'/><rect x='-11' y='9' width='22' height='6' rx='1' fill='%23344266'/><rect x='13' y='9' width='22' height='6' rx='1' fill='%23344266'/><rect x='-11' y='9' width='22' height='1' fill='%234b5b88'/><rect x='13' y='9' width='22' height='1' fill='%234b5b88'/></svg>");
  background:linear-gradient(#050817 0%,#0c1435 45%,#1a2658 80%,#25336a 100%);
}
.t-moon .moon{position:absolute;top:6%;right:18px;width:62px;height:62px;border-radius:50%;z-index:1;
  background:radial-gradient(circle at 38% 36%,#fbfcff 0,#dfe6f8 45%,#b9c4e2 100%);
  box-shadow:0 0 40px 8px rgba(200,215,255,.25),0 0 120px 40px rgba(140,165,255,.12);}
.t-moon .moon::before,.t-moon .moon::after{content:'';position:absolute;border-radius:50%;background:rgba(140,155,195,.35);}
.t-moon .moon::before{width:13px;height:13px;left:34px;top:15px;}
.t-moon .moon::after{width:8px;height:8px;left:18px;top:37px;}
.t-moon .fog{position:absolute;left:-20%;right:-20%;bottom:70px;height:70px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(170,190,255,.10) 30%,rgba(170,190,255,.06) 60%,transparent);filter:blur(10px);animation:twsFog 18s ease-in-out infinite alternate;}
@keyframes twsFog{to{transform:translateX(12%);}}
.t-moon .tws-fx i{background:#fff;animation:twsTwinkle var(--d) ease-in-out infinite;animation-delay:var(--dl);}
@keyframes twsTwinkle{0%,100%{opacity:.15;}50%{opacity:.95;}}

/* ================= Dragon's Peak ================= */
.tower-area.t-fire{
  --sh:#2b2125;--sh2:#382a2f;--open:#110a0c;--act:rgba(255,120,40,.16);--act-hover:rgba(255,120,40,.26);--act-ring:rgba(255,130,50,.55);
  --rows-tint:rgba(14,7,9,.82);
  --f1:#fff3c0;--f2:#ff9a1f;--f3:#ff3b0a;--fg:rgba(255,90,20,.95);
  --cr:#3d3034;--cr-r:#30262a;--cr-s:#110a0c;
  --keep-brick:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='16'><rect width='24' height='16' fill='%23571a09'/><rect x='1' y='1' width='22' height='6' rx='1' fill='%232a2226'/><rect x='1' y='1' width='22' height='1' fill='%233e3338'/><rect x='-11' y='9' width='22' height='6' rx='1' fill='%23241d21'/><rect x='13' y='9' width='22' height='6' rx='1' fill='%23241d21'/><rect x='-11' y='9' width='22' height='1' fill='%23372d32'/><rect x='13' y='9' width='22' height='1' fill='%23372d32'/></svg>");
  background:linear-gradient(#0d0407 0%,#240a0e 40%,#521811 72%,#8c3412 100%);
}
.t-fire .smk circle{transform-box:fill-box;transform-origin:center;animation:twsSmoke 9s ease-in-out infinite alternate;}
.t-fire .smk circle:nth-child(2){animation-delay:-3s;}
.t-fire .smk circle:nth-child(3){animation-delay:-6s;}
@keyframes twsSmoke{to{transform:translate(18px,-12px) scale(1.15);}}
.t-fire .heat{z-index:2;top:auto;height:40%;background:radial-gradient(ellipse 70% 100% at 50% 100%,rgba(255,90,20,.28),transparent 70%);}
.t-fire .tws-fx i{background:#ffb347;box-shadow:0 0 6px 1px rgba(255,120,30,.9);opacity:0;animation:twsRise var(--d) linear infinite;animation-delay:var(--dl);}
@keyframes twsRise{0%{transform:translate(0,0);opacity:0;}10%{opacity:1;}100%{transform:translate(var(--dx),-520px);opacity:0;}}

/* ================= Frost Citadel ================= */
.tower-area.t-ice{
  --sh:#24465f;--sh2:#2d5675;--open:#09192a;--act:rgba(140,230,255,.16);--act-hover:rgba(140,230,255,.25);--act-ring:rgba(140,230,255,.55);
  --rows-tint:rgba(7,22,38,.8);
  --f1:#f2fdff;--f2:#7fdcff;--f3:#2f7dff;--fg:rgba(90,190,255,.95);
  --cr:#7aa4bd;--cr-r:#6690aa;--cr-s:#163049;
  --keep-brick:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='16'><rect width='24' height='16' fill='%23224762'/><rect x='1' y='1' width='22' height='6' rx='1' fill='%237bb0cc'/><rect x='1' y='1' width='22' height='1' fill='%23d2f1fc'/><rect x='-11' y='9' width='22' height='6' rx='1' fill='%236c9fbd'/><rect x='13' y='9' width='22' height='6' rx='1' fill='%236c9fbd'/><rect x='-11' y='9' width='22' height='1' fill='%23b6e0f2'/><rect x='13' y='9' width='22' height='1' fill='%23b6e0f2'/></svg>");
  background:linear-gradient(#030d18 0%,#08203a 50%,#103a58 85%,#174866 100%);
}
.t-ice .keep-torch .stick{background:linear-gradient(to right,#9fb8c8,#5b7486);}
.t-ice .keep-torch .cup{background:#3d5a70;}
.t-ice .aurora{position:absolute;left:-15%;right:-15%;top:2%;height:42%;z-index:1;}
.t-ice .aurora::before,.t-ice .aurora::after{content:'';position:absolute;left:0;right:0;height:46%;border-radius:50%;filter:blur(22px);mix-blend-mode:screen;}
.t-ice .aurora::before{top:18%;background:linear-gradient(90deg,transparent 5%,rgba(60,255,170,.45) 30%,rgba(70,210,255,.35) 60%,transparent 90%);transform:rotate(-6deg) skewX(-20deg);animation:twsAur1 10s ease-in-out infinite alternate;}
.t-ice .aurora::after{top:40%;background:linear-gradient(90deg,transparent 15%,rgba(150,120,255,.28) 45%,rgba(60,255,200,.3) 70%,transparent 95%);transform:rotate(4deg);animation:twsAur2 13s ease-in-out infinite alternate;}
@keyframes twsAur1{to{transform:rotate(-2deg) skewX(10deg) translateX(6%);opacity:.7;}}
@keyframes twsAur2{to{transform:rotate(8deg) translateX(-8%);opacity:.6;}}
.t-ice .tws-fx{top:-40px;}
.t-ice .tws-fx i{background:#fff;opacity:.8;animation:twsFall var(--d) linear infinite;animation-delay:var(--dl);}
@keyframes twsFall{0%{transform:translate(0,-40px);}100%{transform:translate(var(--dx),760px);}}
.t-ice .frost-edge{z-index:3;box-shadow:inset 0 0 60px rgba(180,230,255,.12);}

/* ================= Enchanted Grove ================= */
.tower-area.t-grove{
  --sh:#22372b;--sh2:#2b4636;--open:#0a150e;--act:rgba(170,255,110,.14);--act-hover:rgba(170,255,110,.22);--act-ring:rgba(170,255,110,.5);
  --rows-tint:rgba(7,17,11,.8);
  --f1:#f6ffd8;--f2:#b6ff5c;--f3:#25b85a;--fg:rgba(140,255,90,.9);
  --cr:#4d5e48;--cr-r:#3f4e3b;--cr-s:#0a150e;
  --keep-brick:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='16'><rect width='24' height='16' fill='%230d1710'/><rect x='1' y='1' width='22' height='6' rx='1' fill='%23414c3e'/><rect x='1' y='1' width='22' height='2' fill='%23628a45'/><rect x='-11' y='9' width='22' height='6' rx='1' fill='%23394437'/><rect x='13' y='9' width='22' height='6' rx='1' fill='%23394437'/><rect x='-11' y='9' width='22' height='1' fill='%23567c3e'/><rect x='13' y='9' width='22' height='2' fill='%23567c3e'/></svg>");
  background:linear-gradient(#030a07 0%,#08190f 45%,#0f2b1e 80%,#163a28 100%);
}
.t-grove .keep-torch .cup{background:#2c3a2a;}
.t-grove .glowmoon{position:absolute;top:8%;left:16%;width:150px;height:150px;border-radius:50%;z-index:1;
  background:radial-gradient(circle,rgba(210,255,200,.22),rgba(150,220,160,.06) 45%,transparent 70%);}
.t-grove .rays{z-index:2;background:
  linear-gradient(115deg,transparent 30%,rgba(190,255,190,.05) 34%,transparent 40%),
  linear-gradient(115deg,transparent 48%,rgba(190,255,190,.04) 52%,transparent 57%);}
.t-grove .tws-fx i{background:#e6ff7a;box-shadow:0 0 8px 3px rgba(200,255,90,.55);
  animation:twsFly var(--d) ease-in-out infinite alternate,twsBlink 2.6s ease-in-out infinite;animation-delay:var(--dl),var(--dl);}
@keyframes twsFly{to{transform:translate(var(--dx),var(--dy));}}
@keyframes twsBlink{0%,100%{opacity:.15;}50%{opacity:1;}}

@media(max-width:900px){
  .tower-area.themed .tower-wrap{padding-bottom:26px;}
  .tws-ground{height:70px;}
  .t-moon .moon{width:52px;height:52px;}
  .t-moon .moon::before{left:28px;top:12px;width:11px;height:11px;}
  .t-moon .moon::after{left:15px;top:31px;width:7px;height:7px;}
}

@media (prefers-reduced-motion:reduce){
  .tws-scene *,.tws-scene *::before,.tws-scene *::after,.tower-area.themed .keep-torch::before{animation:none!important;}
  .t-fire .tws-fx i{opacity:.7;}
}