:root {
  --bg: #0b100d;
  --panel: rgba(14, 22, 17, 0.86);
  --panel-strong: rgba(18, 31, 23, 0.94);
  --text: #edf7ec;
  --muted: #a8b8aa;
  --line: rgba(184, 235, 172, 0.18);
  --growth: #a9ff84;
  --danger: #ff8e59;
  --ash: #898f86;
  --gold: #ffd76a;
  --shadow: rgba(0, 0, 0, 0.45);
  --tile-size: 32px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at 20% 10%, rgba(67, 105, 56, 0.26), transparent 30%), radial-gradient(circle at 82% 18%, rgba(132, 80, 33, 0.22), transparent 28%), linear-gradient(180deg, #080b09 0%, #10150f 100%); color: var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body.stream-body { width: 100vw; height: 100vh; overflow: hidden; background: #050805; }
a { color: var(--growth); text-decoration: none; } a:hover { text-decoration: underline; }
.shell { width: min(1180px, calc(100vw - 28px)); margin: 0 auto; padding: 22px 0 40px; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo-mark { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, rgba(56, 88, 43, 0.55), rgba(56, 31, 22, 0.55)); box-shadow: 0 12px 30px var(--shadow); font-size: 27px; }
.brand h1 { margin: 0; font-size: 26px; line-height: 1; letter-spacing: 0.5px; }
.ticker { color: var(--gold); font-weight: 800; }
.brand p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.nav { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.nav a, .button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.035); color: var(--text); font-size: 13px; }
.nav a:hover, .button-link:hover { text-decoration: none; background: rgba(169, 255, 132, 0.1); }
.hero-grid { display: grid; grid-template-columns: 1.55fr 0.85fr; gap: 18px; }
.panel { border: 1px solid var(--line); background: var(--panel); border-radius: 22px; box-shadow: 0 20px 50px var(--shadow); overflow: hidden; }
.panel-pad { padding: 18px; }
.world-card { min-height: 620px; display: flex; flex-direction: column; }
.world-header, .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, 0.16); }
.world-header h2, .panel-header h2 { margin: 0; font-size: 16px; letter-spacing: 0.4px; }
.transport-pill { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); border:1px solid rgba(255,255,255,0.08); border-radius:999px; padding:7px 10px; background:rgba(0,0,0,0.16); }
.status-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; font-size: 12px; color: var(--muted); background: rgba(0,0,0,0.2); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ash); box-shadow: 0 0 10px var(--ash); }
.status-live .status-dot { background: var(--growth); box-shadow: 0 0 12px var(--growth); }
.status-error .status-dot { background: var(--danger); box-shadow: 0 0 12px var(--danger); }
.status-catchup .status-dot { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.world-stage { position: relative; flex: 1; min-height: 470px; padding: 18px; background: linear-gradient(rgba(255,255,255,0.02), rgba(0,0,0,0.1)), repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 26px), repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 26px); }
.pixel-world { position: relative; width: 100%; height: 100%; min-height: 430px; border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; background: linear-gradient(180deg, #172a25 0%, #1a2a1d 43%, #2a2719 100%); overflow: hidden; image-rendering: pixelated; isolation: isolate; }
.pixel-world.phase-ashlands { background: linear-gradient(180deg, #151313, #2d241e 55%, #191615); }
.pixel-world.phase-burned-forest { background: linear-gradient(180deg, #1b1714, #3a281d 55%, #181512); }
.pixel-world.phase-recovering-forest { background: linear-gradient(180deg, #172014, #2c2f1b 60%, #2c2317); }
.pixel-world.phase-healthy-forest { background: linear-gradient(180deg, #142316, #213c20 60%, #253018); }
.pixel-world.phase-ancient-forest { background: linear-gradient(180deg, #0d1f17, #153a26 52%, #22381d); }
.world-sky { position: absolute; inset: 0 0 auto 0; height: 42%; background: linear-gradient(180deg, rgba(21, 42, 40, 0.78), rgba(24, 39, 30, 0.22), transparent); z-index: 1; }
.moon { position: absolute; top: 34px; right: 54px; width: 22px; height: 22px; border-radius: 50%; background: #faeeb9; box-shadow: 0 0 28px rgba(255, 236, 157, 0.32); opacity: 0.86; }
.cloud { position: absolute; width: 84px; height: 18px; opacity: 0.18; background: rgba(226, 247, 222, 0.6); box-shadow: 22px -9px 0 5px rgba(226, 247, 222, 0.44), 48px 0 0 2px rgba(226, 247, 222, 0.36); filter: blur(1px); animation: cloud-drift 32s linear infinite; }
.cloud-a { top: 66px; left: -120px; } .cloud-b { top: 118px; left: 30%; animation-duration: 45s; opacity: 0.12; }
@keyframes cloud-drift { to { transform: translateX(125vw); } }
.horizon { position: absolute; left: 0; right: 0; bottom: 18%; height: 10px; background: rgba(0, 0, 0, 0.24); box-shadow: 0 12px 0 rgba(0,0,0,0.08), 0 -18px 60px rgba(169,255,132,0.08); z-index: 5; }
.tile-grid { position: absolute; inset: 28% 0 0 0; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr); z-index: 2; transform: perspective(650px) rotateX(9deg); transform-origin: center top; }
.tile { position: relative; border: 1px solid rgba(0,0,0,0.08); min-height: 20px; }
.tile::after { content: ""; position: absolute; inset: 0; opacity: 0.14; background-image: linear-gradient(45deg, rgba(255,255,255,0.3) 0 1px, transparent 1px 7px); }
.tile-grass { background: #2f6d2d; } .tile-grass-deep { background: #1f5429; } .tile-moss { background: #53733a; } .tile-grass-dry { background: #736b38; } .tile-dirt { background: #5a3d28; } .tile-ash { background: #4b4c47; } .tile-char { background: #242321; } .tile-smoke { background: #343332; }
.entity-layer { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.world-entity { position: absolute; width: 54px; height: 72px; transform: translate(-50%, -84%); user-select: none; pointer-events: none; animation: entity-pop 420ms steps(4, end) both; }
.entity-micro { transform: translate(-50%, -70%) scale(0.58); } .entity-small { transform: translate(-50%, -78%) scale(0.76); } .entity-medium { transform: translate(-50%, -84%) scale(1); } .entity-large { transform: translate(-50%, -88%) scale(1.22); } .entity-whale { transform: translate(-50%, -92%) scale(1.55); }
@keyframes entity-pop { from { opacity: 0; filter: brightness(1.8); } to { opacity: 1; filter: brightness(1); } }
.pixel-sprite { position: relative; display: block; width: 54px; height: 72px; }
.pixel-sprite i { position: absolute; display: block; image-rendering: pixelated; }
.stem, .trunk, .ancient-trunk { left: 24px; bottom: 7px; width: 8px; height: 26px; background: #8a5731; box-shadow: inset -3px 0 rgba(0,0,0,0.2); }
.ancient-trunk { left: 20px; width: 14px; height: 38px; background: #916139; }
.leaf { width: 16px; height: 16px; background: #70bf4c; box-shadow: inset -4px -4px rgba(0,0,0,0.12); }
.leaf-l { left: 15px; bottom: 31px; } .leaf-c { left: 23px; bottom: 40px; background: #8fe760; } .leaf-r { left: 28px; bottom: 31px; }
.crown { background: #2f9b43; box-shadow: inset -6px -6px rgba(0,0,0,0.14); }
.crown-a { left: 13px; bottom: 41px; width: 28px; height: 24px; } .crown-b { left: 5px; bottom: 28px; width: 44px; height: 24px; background: #287e38; } .crown-c { left: 17px; bottom: 20px; width: 30px; height: 18px; background: #3aa24b; }
.pine { left: 9px; width: 38px; height: 22px; background: #1f7b3f; clip-path: polygon(50% 0, 100% 100%, 0 100%); } .pine-a { bottom: 49px; } .pine-b { bottom: 34px; transform: scale(1.22); background: #206a36; } .pine-c { bottom: 18px; transform: scale(1.45); background: #174f2d; }
.ancient { background: #2ca24a; box-shadow: inset -8px -8px rgba(0,0,0,0.14); }
.ancient-a { left: 10px; bottom: 47px; width: 36px; height: 28px; } .ancient-b { left: 0; bottom: 31px; width: 56px; height: 30px; background: #1e803d; } .ancient-c { left: 9px; bottom: 18px; width: 42px; height: 26px; background: #3bb857; }
.glow { left: 0; bottom: 12px; width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle, rgba(169,255,132,0.22), transparent 68%); animation: glow-pulse 1.8s ease-in-out infinite alternate; }
@keyframes glow-pulse { to { opacity: 0.35; transform: scale(1.16); } }
.shadow { left: 8px; bottom: 4px; width: 40px; height: 8px; background: rgba(0,0,0,0.28); border-radius: 50%; }
.leafpile { bottom: 5px; width: 20px; height: 9px; background: #b77738; } .leafpile-a { left: 13px; } .leafpile-b { left: 25px; background: #8a6334; }
.dead-stem { left: 25px; bottom: 8px; width: 7px; height: 32px; background: #59443a; transform: rotate(-8deg); }
.dead-branch { width: 20px; height: 5px; background: #59443a; bottom: 29px; } .dead-branch-a { left: 12px; transform: rotate(23deg); } .dead-branch-b { left: 26px; transform: rotate(-26deg); }
.stump-top { left: 16px; bottom: 21px; width: 24px; height: 8px; background: #b57542; border: 2px solid rgba(0,0,0,0.2); } .stump-body { left: 17px; bottom: 7px; width: 22px; height: 18px; background: #815130; } .axe-mark { left: 22px; bottom: 16px; width: 12px; height: 4px; background: #e0c198; transform: rotate(-18deg); }
.flame { bottom: 5px; clip-path: polygon(50% 0, 95% 70%, 68% 100%, 30% 100%, 5% 70%); animation: fire-flicker 0.48s steps(2, end) infinite alternate; }
.flame-a { left: 15px; width: 28px; height: 46px; background: #ff6b2b; } .flame-b { left: 22px; width: 18px; height: 34px; background: #ffd04c; animation-delay: 0.1s; } .flame-c { left: 8px; width: 20px; height: 31px; background: #c74320; animation-delay: 0.18s; } .flame-d { left: 34px; width: 22px; height: 36px; background: #ff8e59; animation-delay: 0.24s; }
@keyframes fire-flicker { to { transform: translateY(-3px) scaleX(1.08); filter: brightness(1.22); } }
.ember { width: 6px; height: 6px; background: #ffd76a; bottom: 46px; animation: ember-rise 1.2s ease-in-out infinite; } .ember-a { left: 18px; } .ember-b { left: 38px; animation-delay: 0.4s; }
@keyframes ember-rise { to { transform: translateY(-22px); opacity: 0; } }
.smoke { left: 10px; bottom: 48px; width: 38px; height: 28px; border-radius: 50%; background: rgba(110, 112, 106, 0.28); filter: blur(3px); animation: smoke-rise 2s ease-in-out infinite; } .smoke-big { width: 58px; height: 42px; }
@keyframes smoke-rise { to { transform: translateY(-25px) scale(1.45); opacity: 0.05; } }
.weather-layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.smoke-puff { position: absolute; bottom: 14%; width: 72px; height: 34px; border-radius: 50%; background: rgba(120,120,116,0.14); filter: blur(8px); animation: ambient-smoke 6s ease-in-out infinite; }
@keyframes ambient-smoke { 0% { transform: translateY(0) scale(0.8); opacity: 0; } 40% { opacity: 0.55; } 100% { transform: translateY(-180px) scale(1.7); opacity: 0; } }
.firefly { position: absolute; width: 5px; height: 5px; background: #d9ff8a; box-shadow: 0 0 10px #d9ff8a; animation: firefly 3.5s ease-in-out infinite alternate; }
@keyframes firefly { to { transform: translate(22px, -18px); opacity: 0.35; } }
.world-vignette { position: absolute; inset: 0; z-index: 30; pointer-events: none; box-shadow: inset 0 0 80px rgba(0,0,0,0.46); }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stat { padding: 14px; border-radius: 16px; background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255,255,255,0.07); }
.stat .label { color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.stat .value { font-size: 24px; font-weight: 800; letter-spacing: 0.3px; }
.stat .value.good { color: var(--growth); } .stat .value.bad { color: var(--danger); } .stat .value.gold { color: var(--gold); }
.health-bar { height: 14px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; border: 1px solid rgba(255,255,255,0.08); }
.health-fill { height: 100%; width: 50%; background: linear-gradient(90deg, var(--danger), var(--gold), var(--growth)); transition: width 420ms ease; }
.event-list { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow: auto; padding-right: 4px; }
.event-item { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.07); background: rgba(0,0,0,0.18); }
.event-item.event-buy { border-color: rgba(169,255,132,0.16); } .event-item.event-sell { border-color: rgba(255,142,89,0.22); }
.event-icon { font-size: 23px; line-height: 1; } .event-title { font-weight: 750; font-size: 13px; } .event-meta { color: var(--muted); font-size: 12px; margin-top: 3px; }
.copy-block { padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(0,0,0,0.2); color: var(--muted); line-height: 1.55; }
.content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th, .table td { border-bottom: 1px solid rgba(255,255,255,0.08); padding: 10px 8px; text-align: left; } .table th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.footer-note { margin-top: 22px; color: var(--muted); font-size: 12px; text-align: center; }
.stream-frame { width: 100vw; height: 100vh; display: grid; grid-template-columns: 1fr 390px; gap: 0; background: #050805; }
.stream-world-wrap { padding: 18px; height: 100vh; } .stream-world-wrap .pixel-world { min-height: 0; height: 100%; border-radius: 18px; }
.stream-sidebar { height: 100vh; border-left: 1px solid var(--line); background: rgba(8, 13, 9, 0.94); padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.stream-title { font-size: 34px; margin: 0; line-height: 0.95; } .stream-title span { color: var(--gold); } .stream-claim { color: var(--muted); margin: 0; font-size: 14px; }
.stream-events { flex: 1; overflow: hidden; } .stream-events .event-list { max-height: none; height: 100%; overflow: hidden; }
.loading, .error-box { padding: 14px; border-radius: 14px; background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.08); color: var(--muted); }
.error-box { border-color: rgba(255,142,89,0.35); color: #ffd0bb; }
@media (max-width: 920px) { .hero-grid, .content-grid { grid-template-columns: 1fr; } .topbar { align-items: flex-start; flex-direction: column; } .nav { justify-content: flex-start; } .stream-frame { grid-template-columns: 1fr; grid-template-rows: 1fr auto; } .stream-sidebar { height: auto; max-height: 42vh; border-left: 0; border-top: 1px solid var(--line); } }
/* Explicit sprite markers used by STEP006 tests and future art overrides. */
.sprite-sprout {}
.sprite-sapling {}
.sprite-tree-medium {}
.sprite-pine-large {}
.sprite-ancient-tree {}
.sprite-fallen-leaves {}
.sprite-dead-sapling {}
.sprite-stump {}
.sprite-fire {}
.sprite-wildfire {}

/* STEP011 — OBS/Pump.fun stream polish. The /stream route is a 16:9 safe composition. */
.stream-polished { background: #030503; }
.stream-stage { width: 100vw; height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) 360px; background: radial-gradient(circle at 30% 8%, rgba(82, 123, 62, 0.16), transparent 28%), linear-gradient(180deg, #050805, #020302); overflow: hidden; }
.stream-main { position: relative; min-width: 0; height: 100vh; padding: 22px 20px 22px 24px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; }
.stream-top-hud { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 76px; }
.stream-brand-lockup { display: flex; align-items: center; gap: 14px; padding: 11px 15px; border: 1px solid rgba(255,255,255,0.09); border-radius: 18px; background: rgba(3, 8, 4, 0.72); box-shadow: 0 14px 38px rgba(0,0,0,0.34); }
.stream-logo { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(145deg, rgba(61, 105, 45, 0.65), rgba(88, 49, 27, 0.58)); border: 1px solid rgba(255,255,255,0.10); font-size: 30px; }
.stream-brand-lockup h1 { margin: 0; font-size: clamp(30px, 3vw, 52px); line-height: 0.92; letter-spacing: -0.04em; }
.stream-brand-lockup h1 span { color: var(--gold); }
.stream-brand-lockup p { margin: 5px 0 0; font-size: clamp(13px, 1.2vw, 18px); color: var(--muted); }
.stream-system-strip { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.stream-status, .stream-transport { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; background: rgba(0,0,0,0.35); }
.stream-world-card { position: relative; min-height: 0; border-radius: 24px; padding: 12px; background: linear-gradient(145deg, rgba(169,255,132,0.10), rgba(255,142,89,0.08)); border: 1px solid rgba(255,255,255,0.10); box-shadow: 0 24px 70px rgba(0,0,0,0.42); overflow: hidden; }
.stream-world-card::before { content: "LIVE MARKET FOREST"; position: absolute; left: 24px; top: 22px; z-index: 60; color: rgba(237,247,236,0.58); font-size: 11px; font-weight: 900; letter-spacing: 0.18em; text-shadow: 0 2px 12px rgba(0,0,0,0.6); pointer-events: none; }
.stream-pixel-world { min-height: 0; height: 100%; border-radius: 18px; }
.stream-lower-third { min-height: 112px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.55fr); gap: 14px; }
.latest-spotlight { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(255,255,255,0.10); border-radius: 20px; background: rgba(3, 8, 4, 0.78); box-shadow: 0 16px 42px rgba(0,0,0,0.34); overflow: hidden; }
.latest-spotlight.spotlight-buy { border-color: rgba(169,255,132,0.30); box-shadow: 0 0 36px rgba(169,255,132,0.08); }
.latest-spotlight.spotlight-sell { border-color: rgba(255,142,89,0.36); box-shadow: 0 0 36px rgba(255,96,42,0.08); }
.latest-spotlight.spotlight-whale { animation: spotlight-pulse 1.4s ease-in-out infinite alternate; }
@keyframes spotlight-pulse { to { filter: brightness(1.15); transform: translateY(-1px); } }
.spotlight-icon { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 17px; background: rgba(255,255,255,0.06); font-size: 35px; }
.spotlight-kicker { color: var(--gold); font-size: 12px; font-weight: 900; letter-spacing: 0.15em; }
.spotlight-title { margin-top: 4px; font-size: clamp(21px, 2.1vw, 34px); font-weight: 950; line-height: 1.02; letter-spacing: -0.04em; }
.spotlight-meta { margin-top: 6px; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stream-mini-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stream-mini-stats div { min-width: 0; padding: 13px 11px; border-radius: 17px; background: rgba(0,0,0,0.32); border: 1px solid rgba(255,255,255,0.08); }
.stream-mini-stats span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.10em; }
.stream-mini-stats strong { display: block; margin-top: 4px; color: var(--text); font-size: clamp(18px, 1.4vw, 26px); line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stream-side-panel { height: 100vh; padding: 22px 18px; border-left: 1px solid rgba(255,255,255,0.09); background: rgba(4, 8, 5, 0.94); display: flex; flex-direction: column; gap: 14px; box-shadow: -18px 0 55px rgba(0,0,0,0.34); }
.stream-side-header { padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.side-label { color: var(--text); font-weight: 950; font-size: 25px; letter-spacing: -0.04em; }
.side-subline { margin-top: 2px; color: var(--muted); font-size: 12px; }
.stream-health-block { padding: 13px; border-radius: 17px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.24); }
.health-label-row { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.stream-health-bar { height: 16px; }
.stream-score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.score { padding: 13px; border-radius: 17px; background: rgba(0,0,0,0.24); border: 1px solid rgba(255,255,255,0.08); }
.score span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.11em; }
.score strong { display: block; margin-top: 5px; font-size: 28px; line-height: 1; }
.score.buy strong { color: var(--growth); } .score.sell strong { color: var(--danger); }
.stream-event-rail { flex: 1; max-height: none; overflow: hidden; gap: 9px; }
.stream-event-rail .event-item { grid-template-columns: 39px 1fr; padding: 11px; border-radius: 16px; background: rgba(255,255,255,0.035); }
.stream-event-rail .event-icon { font-size: 28px; }
.stream-event-rail .event-title { font-size: 13px; line-height: 1.15; }
.stream-event-rail .event-meta { font-size: 11px; }
.stream-footer-badge { margin-top: auto; padding: 11px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.24); color: var(--muted); font-size: 11px; text-align: center; text-transform: uppercase; letter-spacing: 0.09em; }

@media (max-aspect-ratio: 4/3) {
  .stream-stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .stream-side-panel { display: none; }
  .stream-lower-third { grid-template-columns: 1fr; }
}
/* data-obs-safe-area marker: stream.html root safe composition target */

/* STEP021A — Final Brand Asset Integration */
.brand-logo-img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 14px 34px rgba(0,0,0,0.38);
  background: rgba(0,0,0,0.28);
}
.launch-nav .nav-buy,
.button-primary {
  border-color: rgba(255,215,106,0.36);
  background: linear-gradient(135deg, rgba(169,255,132,0.16), rgba(255,142,89,0.12));
  color: var(--text);
  font-weight: 800;
}

.brand-hero {
  position: relative;
  min-height: clamp(420px, 48vw, 560px);
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 18px;
  background: #050805;
  isolation: isolate;
}
.brand-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('/timberfall/assets/brand/hero_split_forest_art.png');
  background-size: cover;
  background-position: center center;
  filter: saturate(1.08) contrast(1.05) brightness(0.90);
  transform: scale(1.01);
}
.brand-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.78) 30%, rgba(0,0,0,0.42) 53%, rgba(0,0,0,0.14) 100%),
    radial-gradient(circle at 18% 48%, rgba(21, 50, 24, 0.54), transparent 38%),
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.10) 42%, rgba(0,0,0,0.36));
}
.brand-hero-copy {
  position: relative;
  z-index: 2;
  width: min(560px, 100%);
  padding: clamp(26px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.eyebrow {
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.70);
}
.brand-hero h2 {
  margin: 0;
  max-width: 560px;
  font-size: clamp(42px, 6vw, 78px);
  line-height: 0.92;
  letter-spacing: -0.07em;
  text-shadow: 0 4px 28px rgba(0,0,0,0.78);
}
.brand-hero p {
  max-width: 520px;
  margin: 18px 0 0;
  color: rgba(237,247,236,0.84);
  font-size: clamp(16px, 1.6vw, 21px);
  line-height: 1.35;
  text-shadow: 0 2px 18px rgba(0,0,0,0.72);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.brand-hero-art { display: none; }
@media (max-width: 920px) {
  .brand-hero { min-height: 560px; align-items: flex-end; }
  .brand-hero::before { background-position: 58% center; }
  .brand-hero::after {
    background:
      linear-gradient(180deg, rgba(0,0,0,0.16) 0%, rgba(0,0,0,0.50) 45%, rgba(0,0,0,0.92) 100%),
      linear-gradient(90deg, rgba(0,0,0,0.45), rgba(0,0,0,0.10));
  }
  .brand-hero-copy { width: 100%; padding: 28px; }
}

.launch-live-grid .world-card { min-height: 600px; }
.stream-logo-img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 30px rgba(0,0,0,0.38);
  background: rgba(0,0,0,0.32);
}
.about-launch-panel h2 {
  margin-top: 0;
  font-size: clamp(34px, 5vw, 70px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}
.about-launch-panel .copy-block p { margin: 0 0 14px; }
.about-launch-panel .copy-block p:last-child { margin-bottom: 0; }

@media (max-width: 920px) {
  .brand-hero { grid-template-columns: 1fr; }
  .brand-hero-art { min-height: 280px; }
}

/* STEP022A — Fast Launch Link Layer */
.token-panel h2 { margin: 0 0 12px; font-size: clamp(28px, 3.5vw, 48px); line-height: 0.98; letter-spacing: -0.05em; }
.token-panel .copy-block p { margin: 0 0 10px; }
.token-panel .copy-block p:last-child { margin-bottom: 0; }
.token-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.copy-button { min-height: 36px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,0.035); color: var(--text); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.copy-button:disabled { opacity: 0.52; cursor: not-allowed; }
.copy-button:not(:disabled):hover { background: rgba(169, 255, 132, 0.1); }
.ca-box { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.09); border-radius: 16px; background: rgba(0,0,0,0.24); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.ca-box span { color: var(--gold); font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: 0.16em; }
.ca-box code { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
[data-buy-link].is-coming-soon { opacity: 0.88; }
[data-buy-link].is-live { border-color: rgba(169,255,132,0.55); box-shadow: 0 0 26px rgba(169,255,132,0.08); }


/* STEP022B — Homepage hero cleanup + live view polish */
.world-header-pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hero-split-art { min-height: 430px; grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr); }
.hero-split-art .brand-hero-copy { padding-right: clamp(18px, 3vw, 44px); }
.hero-split-art .brand-hero-art { position: relative; min-height: 430px; border-left: 1px solid rgba(255,255,255,0.08); box-shadow: inset 22px 0 46px rgba(0,0,0,0.24); }
.hero-split-art .brand-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,5,0.20), transparent 24%, rgba(0,0,0,0.18)); pointer-events: none; }
.hero-split-art .hero-actions .button-primary { color: var(--gold); }

.stream-v2 .stream-stage { grid-template-columns: minmax(0, 1fr) 380px; background: radial-gradient(circle at 28% 8%, rgba(169,255,132,0.14), transparent 24%), radial-gradient(circle at 78% 22%, rgba(255,86,34,0.10), transparent 32%), #030503; }
.stream-v2 .stream-main { padding: 18px 18px 18px 22px; gap: 12px; }
.stream-v2 .stream-top-hud { min-height: 72px; }
.stream-v2 .stream-brand-lockup { border-radius: 20px; background: linear-gradient(135deg, rgba(4,10,5,0.84), rgba(8,14,8,0.70)); }
.stream-v2 .stream-world-card { padding: 10px; border-radius: 26px; background: linear-gradient(135deg, rgba(169,255,132,0.12), rgba(255,142,89,0.08)); }
.stream-v2 .stream-world-card::before { color: rgba(255,215,106,0.84); text-shadow: 0 2px 16px rgba(0,0,0,0.72); }
.stream-v2 .stream-side-panel { width: 380px; padding: 20px 16px; background: linear-gradient(180deg, rgba(5,10,6,0.98), rgba(3,6,4,0.96)); }
.stream-buy-button { min-height: 34px; padding: 8px 14px; border: 1px solid rgba(255,215,106,0.30); border-radius: 999px; background: linear-gradient(135deg, rgba(169,255,132,0.16), rgba(255,142,89,0.10)); color: var(--text); font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.stream-buy-button:hover { text-decoration: none; background: rgba(169,255,132,0.16); }
.stream-token-card { padding: 11px; border-radius: 15px; border: 1px solid rgba(255,255,255,0.08); background: rgba(0,0,0,0.24); display: grid; gap: 8px; }
.stream-token-card span { color: var(--gold); font-size: 10px; font-weight: 950; text-transform: uppercase; letter-spacing: 0.16em; }
.stream-token-card code { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.stream-token-card .copy-button { width: 100%; }
.stream-v2 .loading { color: var(--muted); }
.stream-v2 .stream-event-rail .loading { border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; background: rgba(0,0,0,0.22); padding: 14px; line-height: 1.35; }

@media (max-width: 920px) {
  .hero-split-art { grid-template-columns: 1fr; }
  .hero-split-art .brand-hero-art { min-height: 320px; border-left: 0; border-top: 1px solid rgba(255,255,255,0.08); }
  .hero-actions .button-link { flex: 1 1 180px; }
}


/* TIMBERFALL_PERSONAL_TREES_AND_WORLD_POLISH_V1 — frontend-only */
.world-entity.tree-linked { pointer-events: auto; cursor: pointer; }
.world-entity.tree-linked:hover .pixel-sprite { filter: brightness(1.22) drop-shadow(0 0 8px rgba(169,255,132,0.45)); }
.world-entity.tree-linked:focus-visible { outline: 2px solid rgba(255,215,106,0.8); outline-offset: 4px; border-radius: 999px; }
.event-item.event-clickable { cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.event-item.event-clickable:hover { background: rgba(169,255,132,0.08); border-color: rgba(169,255,132,0.36); transform: translateX(-2px); }
.event-item.event-clickable:focus-visible { outline: 2px solid rgba(255,215,106,0.75); outline-offset: 2px; }

.tree-finder-panel { padding: 11px; border-radius: 15px; border: 1px solid rgba(169,255,132,0.18); background: rgba(0,0,0,0.24); display: grid; gap: 8px; }
.tree-finder-label { color: var(--gold); font-size: 10px; font-weight: 950; text-transform: uppercase; letter-spacing: 0.16em; }
.tree-finder-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.tree-finder-row input { width: 100%; min-height: 34px; border: 1px solid rgba(255,255,255,0.10); border-radius: 12px; background: rgba(2,5,3,0.78); color: var(--text); padding: 8px 10px; font: inherit; font-size: 12px; outline: none; }
.tree-finder-row input:focus { border-color: rgba(169,255,132,0.45); box-shadow: 0 0 0 2px rgba(169,255,132,0.08); }
.tree-finder-row button { min-height: 34px; border: 1px solid rgba(169,255,132,0.28); border-radius: 12px; background: rgba(169,255,132,0.10); color: var(--text); font-weight: 900; cursor: pointer; }
.tree-finder-row button:hover { background: rgba(169,255,132,0.18); }
.tree-finder-hint { color: var(--muted); font-size: 11px; line-height: 1.25; }

.tree-highlight-marker { position: absolute; width: 72px; height: 34px; border: 2px solid rgba(255,215,106,0.95); border-radius: 50%; transform: translate(-50%, -50%); z-index: 900; pointer-events: none; box-shadow: 0 0 22px rgba(255,215,106,0.46), inset 0 0 18px rgba(169,255,132,0.20); animation: tree-highlight-pulse 1.15s ease-in-out infinite alternate; }
.tree-highlight-marker::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold); box-shadow: 0 0 16px var(--gold); }
@keyframes tree-highlight-pulse { to { transform: translate(-50%, -50%) scale(1.12); opacity: 0.46; } }
.tree-info-card { position: absolute; z-index: 920; width: 230px; padding: 12px; border-radius: 15px; border: 1px solid rgba(255,215,106,0.24); background: rgba(4,8,5,0.92); box-shadow: 0 18px 42px rgba(0,0,0,0.46); pointer-events: none; }
.tree-info-kicker { color: var(--gold); font-size: 10px; font-weight: 950; text-transform: uppercase; letter-spacing: 0.14em; }
.tree-info-wallet { margin-top: 4px; color: var(--text); font-size: 17px; font-weight: 950; }
.tree-info-grid { display: grid; grid-template-columns: 62px 1fr; gap: 5px 8px; margin-top: 9px; font-size: 11px; }
.tree-info-grid span { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.tree-info-grid strong { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.support-event-layer { position: absolute; inset: 0; z-index: 720; pointer-events: none; overflow: hidden; }
.support-animation { position: absolute; image-rendering: pixelated; pointer-events: none; }
.support-cleanup { left: -80px; top: 66%; width: 72px; height: 34px; animation: support-drive-across 6.4s linear both; }
.support-firetruck { left: -90px; top: 59%; width: 84px; height: 38px; animation: support-drive-to-fire 6.2s ease-in-out both; }
.support-rain { left: 48%; top: 33%; width: 108px; height: 90px; animation: support-rain-hover 5.2s ease-in-out both; }
.support-wildlife { left: -40px; top: 62%; width: 42px; height: 28px; animation: support-animal-cross 6s linear both; }
@keyframes support-drive-across { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 45% { transform: translateX(48vw); } 62% { transform: translateX(50vw); } 100% { transform: translateX(120vw); opacity: 0.96; } }
@keyframes support-drive-to-fire { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 44% { transform: translateX(42vw); } 64% { transform: translateX(42vw); } 100% { transform: translateX(118vw); opacity: 0.98; } }
@keyframes support-rain-hover { 0% { opacity: 0; transform: translateY(-12px); } 18% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(4px); } }
@keyframes support-animal-cross { 0% { transform: translateX(0) scale(0.9); opacity: 0; } 12% { opacity: 1; } 100% { transform: translateX(118vw) scale(0.9); opacity: 0.95; } }
.support-truck-body, .support-firetruck-body { position: absolute; left: 12px; bottom: 8px; width: 42px; height: 18px; background: #8a6334; box-shadow: inset -6px 0 rgba(0,0,0,0.18); }
.support-truck-cab { position: absolute; left: 47px; bottom: 11px; width: 18px; height: 15px; background: #b77738; }
.support-crate { position: absolute; left: 16px; bottom: 25px; width: 18px; height: 10px; background: #a06d3d; transform: rotate(-5deg); }
.support-firetruck-body { width: 48px; background: #c74320; }
.support-firetruck-cab { position: absolute; left: 58px; bottom: 11px; width: 20px; height: 16px; background: #ff6b2b; }
.support-siren { position: absolute; left: 55px; bottom: 29px; width: 9px; height: 5px; background: #ffd76a; box-shadow: 0 0 10px #ff6b2b; animation: support-siren 0.45s steps(2,end) infinite; }
@keyframes support-siren { to { opacity: 0.35; } }
.support-water { position: absolute; left: 78px; bottom: 23px; width: 70px; height: 12px; background: linear-gradient(90deg, rgba(126,211,255,0.0), rgba(126,211,255,0.75), rgba(126,211,255,0)); transform: rotate(-8deg); filter: blur(1px); animation: support-water 0.38s steps(2,end) infinite; }
@keyframes support-water { to { transform: rotate(-5deg) translateY(3px); opacity: 0.62; } }
.support-wheel { position: absolute; bottom: 3px; width: 11px; height: 11px; border-radius: 50%; background: #151515; border: 2px solid #4b4c47; }
.support-wheel-a { left: 18px; } .support-wheel-b { left: 52px; }
.support-rain-cloud { position: absolute; left: 12px; top: 0; width: 56px; height: 22px; border-radius: 18px; background: rgba(226,247,222,0.48); box-shadow: 22px -8px 0 4px rgba(226,247,222,0.38), 42px 2px 0 0 rgba(226,247,222,0.34); }
.support-rain-drops { position: absolute; left: 20px; top: 32px; width: 76px; height: 48px; background-image: linear-gradient(180deg, rgba(126,211,255,0.0) 0 20%, rgba(126,211,255,0.70) 20% 38%, transparent 38% 100%); background-size: 10px 18px; animation: support-rain-drops 0.45s linear infinite; }
@keyframes support-rain-drops { to { transform: translateY(9px); } }
.support-animal-body { position: absolute; left: 8px; bottom: 8px; width: 22px; height: 12px; background: #a06d3d; }
.support-animal-head { position: absolute; left: 28px; bottom: 14px; width: 11px; height: 10px; background: #b77738; }
.support-animal-leg { position: absolute; bottom: 2px; width: 4px; height: 10px; background: #6f4b2f; animation: support-leg 0.28s steps(2,end) infinite alternate; }
.leg-a { left: 12px; } .leg-b { left: 25px; animation-delay: 0.14s; }
@keyframes support-leg { to { transform: translateX(3px); } }
.support-debug-panel { position: fixed; left: 14px; bottom: 14px; z-index: 9999; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; max-width: 520px; padding: 10px; border: 1px solid rgba(255,215,106,0.35); border-radius: 14px; background: rgba(0,0,0,0.78); box-shadow: 0 18px 44px rgba(0,0,0,0.45); }
.support-debug-panel strong { color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: 0.10em; margin-right: 3px; }
.support-debug-panel button { border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; background: rgba(255,255,255,0.07); color: var(--text); padding: 6px 9px; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.support-debug-panel button:hover { background: rgba(169,255,132,0.14); }

/* TIMBERFALL_TERRAIN_FOUNDATION_V1 — controlled pixel terrain foundation.
   Frontend-only: replaces loud color-grid ground with quiet base material sprites + sparse overlays. */
.terrain-foundation-grid {
  gap: 0;
  background: linear-gradient(180deg, rgba(15, 27, 18, 0.22), rgba(8, 10, 8, 0.34));
  box-shadow: inset 0 24px 70px rgba(0,0,0,0.22);
}
.terrain-foundation-grid .tile,
.ground-tile {
  position: relative;
  min-height: 20px;
  border: 0 !important;
  outline: 0 !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  overflow: hidden;
}
.terrain-foundation-grid .tile::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.018;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.10)),
    radial-gradient(circle at 45% 55%, transparent 42%, rgba(0,0,0,0.10) 100%);
}
.terrain-foundation-grid .tile::before {
  content: "";
  position: absolute;
  inset: -1px;
  opacity: 0.035;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.045), transparent 40%, rgba(0,0,0,0.10));
  mix-blend-mode: soft-light;
}
.ground-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  opacity: 0.46;
  z-index: 2;
}
.terrain-healthy_grass { filter: saturate(0.82) brightness(0.84); }
.terrain-forest_floor { filter: saturate(0.74) brightness(0.82); }
.terrain-dry_ground { filter: saturate(0.68) brightness(0.82); }
.terrain-scorched_dirt { filter: saturate(0.66) brightness(0.76); }
.terrain-ash_field { filter: saturate(0.48) brightness(0.70); }
.terrain-recovery_ground { filter: saturate(0.78) brightness(0.82); }
.overlay-ash_specks { opacity: 0.30; }
.overlay-moss_specks,
.overlay-grass_tufts,
.overlay-recovery_sprouts { opacity: 0.42; }
.overlay-dry_weeds { opacity: 0.32; }

/* Make the world objects remain the visual priority over the new terrain layer. */
.entity-layer,
.weather-layer,
.support-event-layer,
.world-vignette,
.tree-highlight-marker,
.tree-info-card { image-rendering: pixelated; }

/* TIMBERFALL_EVENTS_DIAMOND_DEBUG_V1 — frontend-only visual patch.
   Scope: support-event restore, market impact polish, diamond tree visual marker,
   debug-only test panel, and closable tree info cards. */
.market-impact-layer {
  position: absolute;
  inset: 0;
  z-index: 760;
  pointer-events: none;
  overflow: hidden;
  image-rendering: pixelated;
}
.market-impact {
  position: absolute;
  width: 82px;
  height: 82px;
  transform: translate(-50%, -58%);
  pointer-events: none;
  opacity: 0;
  animation: market-impact-fade 2.45s ease-out both;
}
.market-impact .impact-ring,
.market-impact .impact-core,
.market-impact .impact-particles {
  position: absolute;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.market-impact .impact-ring {
  width: 34px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.36);
  animation: impact-ring-expand 1.2s ease-out both;
}
.market-impact .impact-core {
  width: 13px;
  height: 13px;
  box-shadow: 0 0 0 5px rgba(255,255,255,0.05);
  animation: impact-core-pop 0.72s steps(4,end) both;
}
.market-impact .impact-particles {
  width: 5px;
  height: 5px;
  box-shadow:
    -24px -9px 0 rgba(255,255,255,0.34),
    21px -13px 0 rgba(255,255,255,0.28),
    -17px 17px 0 rgba(255,255,255,0.24),
    25px 15px 0 rgba(255,255,255,0.20),
    0 -28px 0 rgba(255,255,255,0.30);
  animation: impact-particles-float 1.35s ease-out both;
}
.impact-buy .impact-ring { border-color: rgba(169,255,132,0.62); box-shadow: 0 0 20px rgba(169,255,132,0.28); }
.impact-buy .impact-core { background: rgba(169,255,132,0.92); box-shadow: 0 0 18px rgba(169,255,132,0.64); }
.impact-buy .impact-particles { color: rgba(169,255,132,0.95); box-shadow: -24px -9px 0 rgba(169,255,132,0.72), 21px -13px 0 rgba(169,255,132,0.50), -17px 17px 0 rgba(169,255,132,0.44), 25px 15px 0 rgba(169,255,132,0.34), 0 -28px 0 rgba(255,215,106,0.48); }
.impact-sell .impact-ring { border-color: rgba(255,142,89,0.70); box-shadow: 0 0 24px rgba(255,96,42,0.34); }
.impact-sell .impact-core { background: rgba(255,96,42,0.94); box-shadow: 0 0 20px rgba(255,96,42,0.70); }
.impact-sell .impact-particles { box-shadow: -24px -9px 0 rgba(255,142,89,0.70), 21px -13px 0 rgba(255,96,42,0.58), -17px 17px 0 rgba(107,72,54,0.58), 25px 15px 0 rgba(255,215,106,0.36), 0 -28px 0 rgba(92,92,88,0.50); }
.impact-medium { transform: translate(-50%, -58%) scale(1.15); }
.impact-large,
.impact-whale { transform: translate(-50%, -58%) scale(1.36); }
.impact-diamond .impact-ring { border-color: rgba(211,244,255,0.90); box-shadow: 0 0 24px rgba(126,211,255,0.62), 0 0 44px rgba(255,215,106,0.26); }
.impact-diamond .impact-core { background: #dff8ff; box-shadow: 0 0 18px rgba(211,244,255,0.88), 0 0 34px rgba(126,211,255,0.58); }
@keyframes market-impact-fade { 0% { opacity: 0; } 8% { opacity: 1; } 72% { opacity: 0.92; } 100% { opacity: 0; } }
@keyframes impact-ring-expand { from { transform: translate(-50%, -50%) scale(0.45); opacity: 0.96; } to { transform: translate(-50%, -50%) scale(2.25); opacity: 0; } }
@keyframes impact-core-pop { 0% { transform: translate(-50%, -50%) scale(0.45); } 55% { transform: translate(-50%, -50%) scale(1.35); } 100% { transform: translate(-50%, -50%) scale(0.72); } }
@keyframes impact-particles-float { from { transform: translate(-50%, -50%) scale(0.65); opacity: 0.95; } to { transform: translate(-50%, -76%) scale(1.2); opacity: 0; } }

.world-entity.diamond-tree { filter: drop-shadow(0 0 8px rgba(126,211,255,0.52)) drop-shadow(0 0 14px rgba(255,215,106,0.22)); }
.world-entity.diamond-tree .pixel-sprite::before {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: 6px;
  bottom: 2px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(211,244,255,0.20), transparent 66%);
  animation: diamond-tree-glow 1.8s ease-in-out infinite alternate;
  z-index: -1;
}
.world-entity.diamond-tree .pixel-sprite::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 8px;
  width: 4px;
  height: 4px;
  background: #dff8ff;
  box-shadow: 18px 5px 0 rgba(211,244,255,0.90), 30px 22px 0 rgba(255,215,106,0.70), 7px 35px 0 rgba(211,244,255,0.72), 39px 39px 0 rgba(126,211,255,0.64);
  animation: diamond-sparkle 1.1s steps(2,end) infinite;
}
.diamond-tree-aura {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 64px;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(211,244,255,0.46);
  box-shadow: 0 0 18px rgba(126,211,255,0.34), inset 0 0 12px rgba(255,215,106,0.12);
  pointer-events: none;
  animation: diamond-aura-pulse 1.35s ease-in-out infinite alternate;
}
@keyframes diamond-tree-glow { to { opacity: 0.45; transform: scale(1.08); } }
@keyframes diamond-sparkle { 50% { opacity: 0.35; transform: translateY(-2px); } }
@keyframes diamond-aura-pulse { to { opacity: 0.52; transform: translateX(-50%) scale(1.12); } }

.tree-info-card {
  pointer-events: auto;
  padding-top: 34px;
}
.tree-info-close {
  position: absolute;
  right: 9px;
  top: 8px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  line-height: 18px;
  font-weight: 900;
  cursor: pointer;
}
.tree-info-close:hover { background: rgba(255,142,89,0.18); border-color: rgba(255,142,89,0.42); }
.tree-info-badge {
  display: inline-flex;
  margin-top: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(211,244,255,0.38);
  background: rgba(126,211,255,0.10);
  color: #dff8ff;
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  box-shadow: 0 0 18px rgba(126,211,255,0.12);
}

.support-event-layer { z-index: 820; }
.support-animation { filter: drop-shadow(0 8px 8px rgba(0,0,0,0.38)); }
.support-rain { top: 29%; }
.support-firetruck { top: 63%; }
.support-cleanup { top: 72%; }
.support-wildlife { top: 69%; }
.support-debug-panel { max-width: 760px; }
.support-debug-panel button[data-clear-effects] { border-color: rgba(255,142,89,0.36); background: rgba(255,142,89,0.10); }

/* Heart Tree + Raid Events v1c — icon boost + better state readability */
.heart-world-status-panel {
  position: absolute;
  left: 28px;
  top: 48px;
  width: min(330px, calc(100% - 56px));
  z-index: 835;
  padding: 9px 12px 10px;
  border: 1px solid rgba(255,215,106,0.24);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(2, 10, 7, 0.82), rgba(0, 0, 0, 0.66));
  box-shadow: 0 14px 32px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06), 0 0 28px rgba(255,215,106,0.06);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.heart-status-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.heart-status-kicker { color: var(--gold); font-size: 10px; letter-spacing: 0.15em; }
.heart-status-row strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgba(255,255,255,0.96); }
.heart-defense-track { position: relative; margin-top: 7px; width: 100%; height: 6px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.075); }
.heart-defense-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff6042, #ffd76a 48%, #a9ff84); box-shadow: 0 0 12px rgba(169,255,132,0.24); }
.heart-raid-label { margin-top: 6px; color: #ffb18d; font-size: 9px; font-weight: 950; letter-spacing: 0.14em; text-transform: uppercase; }
.heart-tree-stage {
  position: absolute;
  left: 55%;
  top: 52%;
  width: 190px;
  height: 178px;
  transform: translate(-50%, -50%);
  z-index: 742;
  pointer-events: none;
  image-rendering: pixelated;
}
.heart-tree {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 116px;
  height: 148px;
  transform: translateX(-50%);
  filter: drop-shadow(0 13px 10px rgba(0,0,0,0.50));
}
.heart-aura {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 138px;
  height: 116px;
  transform: translateX(-50%);
  border-radius: 40%;
  background: radial-gradient(circle, rgba(127,205,91,0.20), rgba(70,140,72,0.07) 44%, transparent 74%);
  opacity: 0.54;
  animation: heart-aura-breathe 2.8s ease-in-out infinite alternate;
}
.heart-crown,
.heart-trunk,
.heart-root,
.heart-crack,
.heart-core,
.heart-fire,
.heart-ember,
.heart-smoke,
.heart-sparkle,
.heart-wave { position: absolute; display: block; }
.heart-crown {
  border-radius: 4px;
  background: linear-gradient(135deg, #3fa848, #23743a 54%, #164829);
  box-shadow: inset 0 -7px 0 rgba(0,0,0,0.25), inset 7px 0 0 rgba(190,255,143,0.08), 0 0 15px rgba(103,206,92,0.18);
}
.crown-back { left: 17px; top: 34px; width: 82px; height: 52px; opacity: 0.74; }
.crown-main { left: 3px; top: 20px; width: 106px; height: 70px; }
.crown-front { left: 25px; top: 60px; width: 72px; height: 41px; opacity: 0.94; }
.crown-chip { width: 15px; height: 15px; background: #2d8a42; box-shadow: inset 0 -4px 0 rgba(0,0,0,0.22), 0 0 8px rgba(169,255,132,0.10); }
.chip-a { left: 3px; top: 7px; }
.chip-b { right: 4px; top: 38px; opacity: 0.86; }
.chip-c { left: 42px; top: 3px; width: 18px; height: 11px; opacity: 0.90; background: #50b958; }
.crown-highlight { width: 10px; height: 8px; border-radius: 2px; background: rgba(190,255,143,0.70); box-shadow: 0 0 9px rgba(169,255,132,0.28); }
.hi-a { left: 24px; top: 28px; }
.hi-b { left: 78px; top: 55px; opacity: 0.58; }
.heart-trunk {
  left: 43px;
  top: 78px;
  width: 28px;
  height: 66px;
  border-radius: 4px 4px 3px 3px;
  background: linear-gradient(90deg, #24150f, #77502e 43%, #2b1a11 74%, #130c08);
  box-shadow: inset -5px 0 0 rgba(0,0,0,0.26), inset 5px 0 0 rgba(255,215,106,0.06), 0 0 12px rgba(255,215,106,0.07);
}
.heart-core {
  left: 53px;
  top: 99px;
  width: 9px;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(#fff1a2, #a9ff84 58%, #55b95f);
  box-shadow: 0 0 10px rgba(169,255,132,0.72), 0 0 18px rgba(255,215,106,0.24);
  z-index: 7;
  animation: heart-core-pulse 1.7s ease-in-out infinite alternate;
}
.heart-root { bottom: 0; height: 9px; background: #3d2518; border-radius: 3px; box-shadow: 0 6px 0 rgba(0,0,0,0.14), 0 0 10px rgba(255,215,106,0.04); }
.root-a { left: 14px; width: 63px; transform: rotate(-13deg); }
.root-b { left: 56px; width: 67px; transform: rotate(11deg); }
.root-c { left: 33px; width: 52px; bottom: 8px; transform: rotate(1deg); }
.heart-crack { width: 3px; height: 31px; top: 90px; background: linear-gradient(#ffb16b, #ff6042 42%, #351209); opacity: 0; box-shadow: 0 0 10px rgba(255,96,42,0.52); z-index: 8; }
.crack-a { left: 54px; transform: rotate(12deg); }
.crack-b { left: 68px; top: 101px; height: 24px; transform: rotate(-16deg); }
.heart-raid-field { position: absolute; inset: 0; z-index: 2; }
.heart-fire { width: 8px; height: 16px; border-radius: 9px 9px 3px 3px; background: linear-gradient(#ffd76a, #ff6042 62%, transparent); opacity: 0; filter: drop-shadow(0 0 8px rgba(255,96,42,0.72)); animation: heart-fire-flicker 0.46s steps(2,end) infinite; }
.f1 { left: 83px; top: 101px; }
.f2 { left: 108px; top: 112px; animation-delay: 0.12s; }
.f3 { left: 70px; top: 124px; animation-delay: 0.24s; }
.f4 { left: 95px; top: 132px; animation-delay: 0.18s; }
.heart-ember { width: 4px; height: 4px; background: #ff8e59; opacity: 0; box-shadow: 13px 13px 0 rgba(255,96,42,0.60), -16px 19px 0 rgba(255,215,106,0.46), 3px 30px 0 rgba(255,96,42,0.42); animation: heart-ember-rise 1.35s steps(3,end) infinite; }
.e1 { left: 86px; top: 88px; }
.e2 { left: 112px; top: 96px; animation-delay: 0.35s; }
.e3 { left: 65px; top: 105px; animation-delay: 0.7s; }
.heart-smoke { width: 26px; height: 16px; border-radius: 40%; background: rgba(190,200,184,0.20); opacity: 0; filter: blur(1px); animation: heart-smoke-drift 2.4s ease-in-out infinite; }
.sm1 { left: 62px; top: 31px; }
.sm2 { left: 104px; top: 50px; animation-delay: 0.7s; }
.heart-sparkle { width: 4px; height: 4px; background: #dff8ff; opacity: 0; box-shadow: 10px 15px 0 rgba(255,215,106,0.72), -12px 21px 0 rgba(211,244,255,0.66), 20px -7px 0 rgba(211,244,255,0.48); animation: heart-sparkle-twinkle 1.1s steps(2,end) infinite; }
.s1 { left: 50px; top: 36px; }
.s2 { left: 132px; top: 60px; animation-delay: 0.25s; }
.s3 { left: 103px; top: 24px; animation-delay: 0.5s; }
.s4 { left: 71px; top: 98px; animation-delay: 0.75s; }
.heart-wave { left: 50%; bottom: 15px; width: 72px; height: 22px; border-radius: 50%; border: 2px solid rgba(169,255,132,0.38); transform: translateX(-50%); opacity: 0; box-shadow: 0 0 12px rgba(169,255,132,0.10); }
.heart-under-attack .heart-crack,
.heart-burning .heart-crack,
.raid-fire-raid .heart-crack,
.raid-firestorm .heart-crack { opacity: 0.92; }
.heart-burning .heart-fire,
.raid-fire-raid .heart-fire,
.raid-firestorm .heart-fire,
.heart-burning .heart-ember,
.raid-fire-raid .heart-ember,
.raid-firestorm .heart-ember,
.heart-burning .heart-smoke,
.raid-fire-raid .heart-smoke,
.raid-firestorm .heart-smoke { opacity: 1; }
.heart-burning .heart-crown,
.heart-under-attack .heart-crown,
.raid-firestorm .heart-crown { background: linear-gradient(135deg, #575032, #352f23 58%, #171915); box-shadow: inset 0 -7px 0 rgba(0,0,0,0.34), 0 0 18px rgba(255,96,42,0.18); }
.heart-burning .heart-core,
.heart-under-attack .heart-core,
.raid-fire-raid .heart-core,
.raid-firestorm .heart-core { background: linear-gradient(#ffd76a, #ff8e59 58%, #ff6042); box-shadow: 0 0 12px rgba(255,96,42,0.84), 0 0 22px rgba(255,142,89,0.30); }
.heart-burning .heart-aura,
.heart-under-attack .heart-aura,
.raid-fire-raid .heart-aura,
.raid-firestorm .heart-aura { opacity: 0.76; background: radial-gradient(circle, rgba(255,96,42,0.16), rgba(255,142,89,0.06) 42%, transparent 72%); }
.heart-awakened .heart-crown,
.heart-growing .heart-crown { filter: brightness(1.16) saturate(1.14); }
.heart-awakened .heart-aura { opacity: 0.86; background: radial-gradient(circle, rgba(169,255,132,0.27), rgba(255,215,106,0.08) 44%, transparent 74%); }
.heart-awakened .heart-core,
.heart-growing .heart-core { box-shadow: 0 0 14px rgba(169,255,132,0.86), 0 0 25px rgba(255,215,106,0.30); }
.heart-rebirth .heart-wave,
.raid-rebirth-wave .heart-wave { animation: heart-wave-expand 1.9s ease-out infinite; opacity: 0.86; }
.heart-rebirth .heart-crown,
.raid-rebirth-wave .heart-crown { background: linear-gradient(135deg, #72ca61, #33964b 55%, #1f6438); }
.heart-rebirth .heart-core,
.raid-rebirth-wave .heart-core { background: linear-gradient(#fff6b8, #a9ff84 55%, #47cd64); }
.heart-diamond-bloom .heart-sparkle,
.raid-diamond-bloom .heart-sparkle { opacity: 1; }
.heart-diamond-bloom .heart-aura,
.raid-diamond-bloom .heart-aura { opacity: 0.88; background: radial-gradient(circle, rgba(211,244,255,0.25), rgba(126,211,255,0.10) 42%, transparent 74%); }
.heart-diamond-bloom .heart-core,
.raid-diamond-bloom .heart-core { background: linear-gradient(#ffffff, #dff8ff 48%, #7ed3ff); box-shadow: 0 0 14px rgba(211,244,255,0.92), 0 0 26px rgba(126,211,255,0.36); }
.heart-diamond-bloom .heart-crown,
.raid-diamond-bloom .heart-crown { box-shadow: inset 0 -7px 0 rgba(0,0,0,0.16), inset 7px 0 0 rgba(211,244,255,0.11), 0 0 20px rgba(126,211,255,0.28), 0 0 26px rgba(255,215,106,0.14); }
.heart-dormant .heart-crown { background: linear-gradient(135deg, #4a6038, #2d482a 58%, #1a281b); opacity: 0.92; }
.heart-dormant .heart-core { opacity: 0.72; filter: saturate(0.75); }
.heart-dormant .heart-aura { opacity: 0.28; }
.raid-firestorm::before,
.heart-burning::before { content: ""; position: absolute; inset: -20px; border-radius: 50%; background: radial-gradient(circle, rgba(255,96,42,0.13), transparent 68%); animation: heart-danger-pulse 1.4s ease-in-out infinite alternate; }
.heart-event-banner {
  position: absolute;
  left: 52%;
  top: 18%;
  transform: translateX(-50%);
  z-index: 940;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(0,0,0,0.74);
  color: var(--text);
  font-size: clamp(14px, 1.75vw, 22px);
  font-weight: 1000;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 16px 36px rgba(0,0,0,0.43), 0 0 24px rgba(255,215,106,0.12);
  animation: heart-banner-pop 3.6s ease-in-out both;
  white-space: nowrap;
}
.heart-banner-danger { border-color: rgba(255,96,42,0.42); color: #ffb18d; box-shadow: 0 16px 36px rgba(0,0,0,0.44), 0 0 26px rgba(255,96,42,0.22); }
.heart-banner-rebirth { border-color: rgba(169,255,132,0.34); color: #cfffbd; box-shadow: 0 16px 36px rgba(0,0,0,0.44), 0 0 26px rgba(169,255,132,0.18); }
.heart-banner-diamond { border-color: rgba(126,211,255,0.48); color: #dff8ff; box-shadow: 0 16px 36px rgba(0,0,0,0.44), 0 0 30px rgba(126,211,255,0.24); }
@keyframes heart-aura-breathe { to { transform: translateX(-50%) scale(1.07); opacity: 0.82; } }
@keyframes heart-core-pulse { to { transform: scale(1.18); opacity: 0.88; } }
@keyframes heart-fire-flicker { 50% { transform: translateY(-3px) scaleX(0.84); filter: drop-shadow(0 0 12px rgba(255,96,42,0.82)); } }
@keyframes heart-ember-rise { 50% { transform: translateY(-7px); opacity: 0.88; } 100% { transform: translateY(-14px); opacity: 0.18; } }
@keyframes heart-smoke-drift { 50% { transform: translate(8px, -7px); opacity: 0.50; } 100% { transform: translate(14px, -15px); opacity: 0.12; } }
@keyframes heart-sparkle-twinkle { 50% { opacity: 0.34; transform: translateY(-3px); } }
@keyframes heart-wave-expand { from { transform: translateX(-50%) scale(0.6); opacity: 0.70; } to { transform: translateX(-50%) scale(3.15); opacity: 0; } }
@keyframes heart-danger-pulse { to { transform: scale(1.1); opacity: 0.48; } }
@keyframes heart-banner-pop { 0% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.92); } 10% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(0.98); } }
@media (max-width: 780px) {
  .heart-world-status-panel { left: 18px; top: 42px; width: calc(100% - 36px); padding: 8px 10px; }
  .heart-status-row { font-size: 10px; gap: 6px; }
  .heart-tree-stage { width: 168px; height: 160px; left: 50%; top: 53%; transform: translate(-50%, -50%) scale(0.88); }
  .heart-event-banner { max-width: 92%; white-space: normal; font-size: 15px; top: 20%; }
}

/* Heart Tree Centerpiece Layout v1d — world center + no-reset ring migration */
.heart-world-status-panel {
  left: 30px;
  top: 48px;
  width: min(350px, calc(100% - 60px));
  border-color: rgba(255,215,106,0.30);
  background: linear-gradient(180deg, rgba(2, 10, 7, 0.86), rgba(0, 0, 0, 0.70));
}
.heart-tree-stage {
  left: 56%;
  top: 62%;
  width: 330px;
  height: 278px;
  transform: translate(-50%, -50%);
  z-index: 735;
}
.heart-tree-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 230px;
  height: 82px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgba(255,215,106,0.09), rgba(97,169,78,0.07) 39%, rgba(0,0,0,0.10) 58%, transparent 73%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 8px);
  box-shadow: inset 0 0 0 1px rgba(255,215,106,0.07), 0 0 38px rgba(169,255,132,0.08);
  opacity: 0.98;
  pointer-events: none;
}
.heart-tree {
  bottom: 24px;
  width: 116px;
  height: 148px;
  transform: translateX(-50%) scale(1.62);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 18px 12px rgba(0,0,0,0.54));
}
.heart-crown {
  border-radius: 2px;
  box-shadow: inset 0 -7px 0 rgba(0,0,0,0.23), inset 7px 0 0 rgba(190,255,143,0.10), 0 0 18px rgba(103,206,92,0.18);
}
.crown-main { left: -1px; top: 16px; width: 112px; height: 76px; }
.crown-back { left: 15px; top: 32px; width: 88px; height: 58px; }
.crown-front { left: 20px; top: 62px; width: 80px; height: 45px; }
.heart-trunk { top: 80px; height: 70px; width: 30px; }
.heart-core {
  left: 52px;
  top: 100px;
  width: 11px;
  height: 15px;
  box-shadow: 0 0 13px rgba(169,255,132,0.86), 0 0 25px rgba(255,215,106,0.34);
}
.heart-root { height: 10px; }
.root-a { left: 7px; width: 76px; }
.root-b { left: 54px; width: 81px; }
.root-c { left: 28px; width: 62px; }
.heart-aura {
  top: 0;
  width: 166px;
  height: 134px;
  opacity: 0.60;
}
.heart-wave {
  left: 50%;
  top: 64%;
  width: 130px;
  height: 58px;
}
.raid-rebirth-wave .heart-wave,
.heart-rebirth .heart-wave { animation: heart-wave-expand-v1d 2.05s ease-out infinite; }
.raid-firestorm::before,
.heart-burning::before {
  inset: -38px;
  background: radial-gradient(circle, rgba(255,96,42,0.15), rgba(255,96,42,0.05) 42%, transparent 70%);
}
.heart-event-banner {
  top: 16%;
  left: 55%;
}
.entity-layer .world-entity {
  transition: left 0.45s ease, top 0.45s ease;
}
@keyframes heart-wave-expand-v1d {
  from { transform: translateX(-50%) scale(0.50); opacity: 0.68; }
  to { transform: translateX(-50%) scale(4.25); opacity: 0; }
}
@media (max-width: 780px) {
  .heart-world-status-panel { left: 18px; top: 42px; width: calc(100% - 36px); }
  .heart-tree-stage { width: 340px; height: 300px; left: 50%; top: 59%; transform: translate(-50%, -50%) scale(0.92); }
  .heart-tree-stage::before { width: 220px; height: 84px; bottom: 18px; }
  .heart-tree { transform: translateX(-50%) scale(1.7); }
}

/* Heart Tree Sprite Foundation v2 — real pixel-art asset */
.heart-tree-stage {
  left: 50%;
  top: 56.8%;
  width: 760px;
  height: 620px;
  transform: translate(-50%, -50%);
  z-index: 736;
}
.heart-tree-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 94px;
  width: 430px;
  height: 165px;
  transform: translateX(-50%);
  background: url("/timberfall/assets/heart-tree/heart_tree_ground_base.png") center bottom / contain no-repeat;
  opacity: 0.92;
  pointer-events: none;
  animation: none !important;
}
.heart-tree-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 148px;
  width: 250px;
  height: 52px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px solid rgba(169,255,132,0.055);
  box-shadow: 0 0 18px rgba(169,255,132,0.055);
  opacity: 0.55;
  pointer-events: none;
}
.heart-tree {
  position: absolute;
  left: 50%;
  bottom: 168px;
  width: 430px;
  height: 462px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  background: url("/timberfall/assets/heart-tree/heart_tree_base.png") center bottom / contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 26px 18px rgba(0,0,0,0.56));
}
.heart-tree::before,
.heart-tree::after {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center bottom;
  background-size: contain;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
  opacity: 0;
}
.heart-tree::before {
  background-image: url("/timberfall/assets/heart-tree/heart_tree_burning_overlay.png");
}
.heart-tree::after {
  background-image: url("/timberfall/assets/heart-tree/heart_tree_diamond_overlay.png");
}
.heart-crown,
.heart-trunk,
.heart-root,
.heart-core,
.crown-chip,
.crown-highlight,
.heart-aura,
.heart-wave {
  display: none !important;
}
.heart-burning .heart-tree::before,
.heart-under-attack .heart-tree::before,
.raid-fire-raid .heart-tree::before,
.raid-firestorm .heart-tree::before {
  opacity: 1;
}
.heart-rebirth .heart-tree::after,
.raid-rebirth-wave .heart-tree::after {
  background-image: url("/timberfall/assets/heart-tree/heart_tree_rebirth_overlay.png");
  opacity: 0.86;
  animation: sprite-rebirth-pulse-v2 2.1s ease-in-out infinite alternate;
}
.heart-diamond-bloom .heart-tree::after,
.raid-diamond-bloom .heart-tree::after {
  background-image: url("/timberfall/assets/heart-tree/heart_tree_diamond_overlay.png");
  opacity: 1;
  animation: sprite-diamond-pulse-v2 1.6s ease-in-out infinite alternate;
}
.heart-dormant .heart-tree {
  filter: brightness(0.82) saturate(0.82) drop-shadow(0 20px 14px rgba(0,0,0,0.50));
}
.heart-burning .heart-tree,
.heart-under-attack .heart-tree,
.raid-firestorm .heart-tree {
  filter: brightness(0.82) saturate(0.9) drop-shadow(0 20px 14px rgba(0,0,0,0.55));
}
.heart-growing .heart-tree,
.heart-awakened .heart-tree {
  filter: brightness(1.06) saturate(1.10) drop-shadow(0 20px 14px rgba(0,0,0,0.48));
}
.heart-diamond-bloom .heart-tree,
.raid-diamond-bloom .heart-tree {
  filter: brightness(1.08) saturate(1.05) drop-shadow(0 20px 14px rgba(0,0,0,0.48)) drop-shadow(0 0 10px rgba(126,211,255,0.24));
}
.heart-fire { z-index: 14; }
.heart-smoke { z-index: 15; }
.heart-sparkle { z-index: 16; }
.raid-firestorm::before,
.heart-burning::before { display: none !important; animation: none !important; }
@keyframes sprite-diamond-pulse-v2 { to { opacity: 0.72; transform: scale(1.015); } }
@keyframes sprite-rebirth-pulse-v2 { to { opacity: 0.58; transform: scale(1.012); } }
@media (max-width: 780px) {
  .heart-tree-stage { width: 284px; height: 238px; left: 50%; top: 56.8%; transform: translate(-50%, -50%) scale(0.92); }
  .heart-tree-stage::before { width: 188px; height: 72px; bottom: 34px; }
  .heart-tree { width: 160px; height: 160px; bottom: 66px; }
}

/* v2m: respect radius tightened only; Heart Tree art/position unchanged from v2l. */

/* v2n: stable per-tree placement + anti-overlap spacing; Heart Tree art/position unchanged from v2m. */


/* v2q Safe Event Trigger Fix: no horizon changes, no recovery-wave layer */
.support-animation .support-label {
  position: absolute;
  left: 4px;
  bottom: 43px;
  padding: 3px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 215, 106, 0.38);
  background: rgba(0, 0, 0, 0.82);
  color: #fff4c9;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-transform: uppercase;
  text-shadow: 0 1px 0 #000;
}
.support-cleanup { top: 70%; width: 92px; height: 44px; animation: support-drive-across 6.6s linear both; }
.support-firetruck { top: 62%; width: 108px; height: 46px; animation: support-drive-to-fire 6.4s ease-in-out both; }
.support-vacuum {
  position: absolute;
  left: 70px;
  bottom: 10px;
  width: 34px;
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(179, 235, 152, 0.8), rgba(255,255,255,0));
  filter: blur(1px);
  animation: support-vacuum-pulse 0.35s steps(2,end) infinite;
}
.support-dust {
  position: absolute;
  left: 78px;
  bottom: 6px;
  width: 50px;
  height: 19px;
  background:
    radial-gradient(circle at 20% 70%, rgba(210, 173, 108, 0.60) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 55%, rgba(210, 173, 108, 0.42) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 65%, rgba(210, 173, 108, 0.46) 0 2px, transparent 3px);
  animation: support-clean-dust 0.55s steps(3,end) infinite;
}
@keyframes support-vacuum-pulse { to { opacity: 0.42; transform: translateX(4px); } }
@keyframes support-clean-dust { to { opacity: 0.48; transform: translateX(9px) translateY(-2px); } }
.support-foam {
  position: absolute;
  left: 80px;
  bottom: 13px;
  width: 96px;
  height: 18px;
  background:
    radial-gradient(circle, rgba(212, 247, 255, 0.84) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(212, 247, 255, 0.65) 0 2px, transparent 3px);
  background-size: 14px 8px, 18px 10px;
  opacity: 0.88;
  transform: rotate(-7deg);
  animation: support-foam-spray 0.44s steps(2,end) infinite;
}
@keyframes support-foam-spray { to { opacity: 0.58; transform: rotate(-4deg) translateY(3px); } }

.world-entity.support-cleanup-target { animation: support-target-cleaned 1.55s ease-in both; }
.world-entity.support-extinguish-target { animation: support-target-extinguished 1.7s ease-out both; }
@keyframes support-target-cleaned {
  0% { opacity: 1; filter: none; transform: translate(-50%, -100%) scale(1); }
  42% { opacity: 0.85; filter: brightness(1.45) saturate(0.65); }
  100% { opacity: 0; filter: blur(2px); transform: translate(-50%, -108%) scale(0.76); }
}
@keyframes support-target-extinguished {
  0% { filter: none; }
  50% { filter: saturate(0.40) brightness(1.25); }
  100% { filter: saturate(0.24) brightness(0.82); }
}
.fire-extinguished .flame,
.fire-extinguished .ember { display: none !important; }
.sprite-extinguished-fire .ash,
.sprite-extinguished-fire .steam {
  position: absolute;
  display: block;
}
.sprite-extinguished-fire .ash-a {
  left: 7px;
  bottom: 4px;
  width: 28px;
  height: 8px;
  border-radius: 50%;
  background: rgba(63, 64, 54, 0.88);
}
.sprite-extinguished-fire .ash-b {
  left: 18px;
  bottom: 8px;
  width: 18px;
  height: 7px;
  border-radius: 50%;
  background: rgba(98, 91, 76, 0.60);
}
.sprite-extinguished-fire .steam-a,
.sprite-extinguished-fire .steam-b {
  bottom: 14px;
  width: 11px;
  height: 24px;
  border-radius: 50%;
  background: rgba(207, 235, 231, 0.20);
  filter: blur(2px);
  animation: steam-rise 1.45s ease-in-out infinite;
}
.sprite-extinguished-fire .steam-a { left: 12px; }
.sprite-extinguished-fire .steam-b { left: 28px; animation-delay: 0.45s; }
@keyframes steam-rise {
  0% { opacity: 0; transform: translateY(4px); }
  35% { opacity: 0.60; }
  100% { opacity: 0; transform: translateY(-15px); }
}

/* Diamond Bloom upgrade retained from v2p, without the rejected horizon/recovery changes. */
.heart-tree-stage.raid-diamond-bloom .heart-tree {
  filter: brightness(1.18) saturate(1.35) drop-shadow(0 0 22px rgba(118, 255, 162, 0.52)) drop-shadow(0 0 34px rgba(255, 215, 106, 0.28));
}
.heart-tree-stage.raid-diamond-bloom .heart-aura,
.heart-world-status-panel.raid-diamond-bloom + .heart-tree-stage .heart-aura {
  opacity: 0.90;
  background: radial-gradient(circle, rgba(255,255,255,0.38), rgba(132,255,185,0.22) 32%, rgba(255,215,106,0.12) 55%, transparent 72%);
  animation: diamond-bloom-aura-v2q 2.2s ease-in-out infinite alternate;
}
.heart-tree-stage.raid-diamond-bloom .heart-sparkle {
  display: block;
  opacity: 1;
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff, 0 0 18px rgba(255, 215, 106, 0.8);
  animation: diamond-spark-v2q 1.15s ease-in-out infinite alternate;
}
.heart-tree-stage.raid-diamond-bloom .heart-wave {
  display: block;
  border-color: rgba(255, 255, 255, 0.52);
  box-shadow: 0 0 22px rgba(255,255,255,0.28), inset 0 0 22px rgba(132,255,185,0.20);
  animation: diamond-wave-v2q 3.6s ease-out infinite;
}
@keyframes diamond-bloom-aura-v2q {
  from { transform: scale(0.96); opacity: 0.58; }
  to { transform: scale(1.08); opacity: 0.95; }
}
@keyframes diamond-spark-v2q {
  from { transform: translateY(3px) scale(0.8); opacity: 0.55; }
  to { transform: translateY(-5px) scale(1.25); opacity: 1; }
}
@keyframes diamond-wave-v2q {
  0% { transform: scale(0.55); opacity: 0; }
  22% { opacity: 0.95; }
  100% { transform: scale(1.45); opacity: 0; }
}


/* v2r One-Pass Support Animation Fix
   Fixes the visible "1.5x" vehicle run by removing stop-and-go keyframes.
   Truck and firetruck now perform one simple left-to-right pass. */

.support-cleanup {
  left: -110px !important;
  top: 70% !important;
  width: 92px !important;
  height: 44px !important;
  animation: support-one-pass-cleanup-v2r 6.1s linear both !important;
}

.support-firetruck {
  left: -125px !important;
  top: 62% !important;
  width: 108px !important;
  height: 46px !important;
  animation: support-one-pass-firetruck-v2r 6.1s linear both !important;
}

@keyframes support-one-pass-cleanup-v2r {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100vw + 190px));
    opacity: 0;
  }
}

@keyframes support-one-pass-firetruck-v2r {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100vw + 205px));
    opacity: 0;
  }
}

/* Keep water/foam/vacuum visually attached to the vehicle.
   No independent second movement pulse that can look like a second vehicle run. */
.support-water {
  left: 78px !important;
  bottom: 23px !important;
  width: 76px !important;
  height: 12px !important;
  transform: rotate(-7deg) !important;
  animation: support-water-flicker-v2r 0.42s steps(2,end) infinite !important;
}

.support-foam {
  left: 80px !important;
  bottom: 13px !important;
  width: 82px !important;
  height: 17px !important;
  transform: rotate(-6deg) !important;
  animation: support-foam-flicker-v2r 0.42s steps(2,end) infinite !important;
}

.support-vacuum {
  left: 70px !important;
  bottom: 10px !important;
  width: 32px !important;
  height: 10px !important;
  transform: none !important;
  animation: support-vacuum-flicker-v2r 0.38s steps(2,end) infinite !important;
}

.support-dust {
  left: 77px !important;
  bottom: 6px !important;
  animation: support-dust-flicker-v2r 0.50s steps(3,end) infinite !important;
}

@keyframes support-water-flicker-v2r {
  0% { opacity: 0.86; filter: blur(1px); }
  100% { opacity: 0.58; filter: blur(1.3px); }
}

@keyframes support-foam-flicker-v2r {
  0% { opacity: 0.82; }
  100% { opacity: 0.55; }
}

@keyframes support-vacuum-flicker-v2r {
  0% { opacity: 0.78; }
  100% { opacity: 0.46; }
}

@keyframes support-dust-flicker-v2r {
  0% { opacity: 0.62; }
  100% { opacity: 0.36; }
}

/* Prevent labels from making the vehicle feel like a second element pass. */
.support-cleanup .support-label,
.support-firetruck .support-label {
  animation: none !important;
  transform: none !important;
}


/* v2u Targeted Support Action Fix
   Target-coupled support animations.
   Keeps v2s root fix: no renderWorld(...) during support animation. */
.support-event-layer { z-index: 720; }
.support-animation {
  position: absolute;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
  overflow: visible;
  --support-stop-x: 52vw;
  --support-top-y: 64%;
  --support-action-x: 60vw;
  --support-action-y: 70%;
}
.support-animation .support-label {
  left: 12px !important;
  bottom: 74px !important;
  padding: 5px 9px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 215, 106, 0.45) !important;
  background: linear-gradient(180deg, rgba(6,10,7,0.94), rgba(0,0,0,0.88)) !important;
  color: #fff2be !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.42) !important;
  z-index: 25;
}
.support-cleanup,
.support-firetruck {
  left: -210px !important;
  top: var(--support-top-y) !important;
  width: 230px !important;
  height: 105px !important;
}
.support-cleanup { animation: support-v2u-targeted-vehicle-run 7.45s linear both !important; }
.support-firetruck { animation: support-v2u-targeted-vehicle-run 7.55s linear both !important; }
@keyframes support-v2u-targeted-vehicle-run {
  0% { transform: translateX(0); opacity: 0; }
  7% { opacity: 1; }
  28% { transform: translateX(var(--support-stop-x)); opacity: 1; }
  67% { transform: translateX(var(--support-stop-x)); opacity: 1; }
  100% { transform: translateX(calc(100vw + 360px)); opacity: 0; }
}
.support-shadow {
  position: absolute;
  left: 24px;
  bottom: 8px;
  width: 128px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,0.38), rgba(0,0,0,0.07) 74%, transparent 100%);
  filter: blur(1px);
}
.support-pixel-vehicle { position: absolute; left: 18px; bottom: 10px; animation: support-v2u-vehicle-idle 0.46s steps(2,end) infinite; }
.support-cleanup-rig { width: 154px; height: 66px; }
.support-firetruck-rig { width: 170px; height: 66px; }
@keyframes support-v2u-vehicle-idle { 50% { transform: translateY(-2px); } }
.support-sprite-frame {
  position: absolute;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.32));
}
.support-cleanup-sprite {
  width: 132px;
  height: 64px;
  background-image: url("../support/cleanup_truck_pixel.svg");
}
.support-firetruck-sprite {
  width: 148px;
  height: 64px;
  background-image: url("../support/firetruck_pixel.svg");
}
.support-wheel {
  position: absolute !important;
  bottom: 0 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 50%, #dadbd7 0 2px, #444c4b 3px 7px, #101312 8px 100%) !important;
  box-shadow: inset 0 0 0 2px #6e7472, 0 0 0 2px #121413 !important;
  animation: support-v2u-wheel-spin 0.42s linear infinite !important;
}
.support-wheel::before,
.support-wheel::after {
  content: "";
  position: absolute;
  background: rgba(238,242,240,0.38);
}
.support-wheel::before { left: 8px; top: 2px; width: 2px; height: 14px; }
.support-wheel::after { left: 2px; top: 8px; width: 14px; height: 2px; }
@keyframes support-v2u-wheel-spin { to { transform: rotate(360deg); } }
.support-cleanup .support-wheel-a { left: 18px !important; }
.support-cleanup .support-wheel-b { left: 94px !important; }
.support-firetruck .support-wheel-a { left: 20px !important; }
.support-firetruck .support-wheel-b { left: 108px !important; }
.support-engine-smoke {
  position: absolute;
  left: -6px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(190, 205, 199, 0.30);
  filter: blur(1px);
  animation: support-v2u-engine-smoke 1.2s ease-out infinite;
}
.support-engine-smoke.smoke-b { left: 1px; top: 11px; width: 10px; height: 10px; animation-delay: 0.45s; }
@keyframes support-v2u-engine-smoke {
  0% { opacity: 0; transform: translate(0, 4px) scale(0.65); }
  32% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(-18px, -10px) scale(1.35); }
}
.support-vacuum-nozzle {
  position: absolute;
  left: 122px;
  top: 34px;
  width: 20px;
  height: 10px;
  background: #38412d;
  box-shadow: 0 0 0 2px rgba(15,20,14,0.5);
}
.support-vacuum-beam {
  position: absolute;
  left: 136px !important;
  top: 28px !important;
  width: 98px !important;
  height: 24px !important;
  background:
    radial-gradient(circle at 78% 50%, rgba(255, 247, 172, 0.88) 0 3px, transparent 4px),
    repeating-linear-gradient(90deg, rgba(176,255,170,0.0) 0 8px, rgba(176,255,170,0.82) 8px 13px, rgba(255,255,255,0.0) 13px 18px) !important;
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 66%) !important;
  filter: drop-shadow(0 0 6px rgba(176,255,170,0.45)) !important;
  opacity: 0;
  animation: support-v2u-action-beam 7.45s steps(2,end) both !important;
}
.support-fire-spray {
  position: absolute;
  left: 136px;
  top: 24px;
  width: 110px;
  height: 31px;
  background:
    radial-gradient(circle at 90% 50%, rgba(235,250,255,0.86) 0 4px, transparent 5px),
    repeating-linear-gradient(90deg, rgba(126,211,255,0.0) 0 7px, rgba(126,211,255,0.90) 7px 12px, rgba(222,248,255,0.0) 12px 18px);
  clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 62%);
  filter: drop-shadow(0 0 7px rgba(126,211,255,0.65));
  opacity: 0;
  animation: support-v2u-action-beam 7.55s steps(2,end) both;
}
@keyframes support-v2u-action-beam {
  0%, 28% { opacity: 0; transform: scaleX(0.55); }
  33%, 64% { opacity: 0.94; transform: scaleX(1); }
  68%, 100% { opacity: 0; transform: scaleX(0.72); }
}
.support-water-drops {
  position: absolute;
  left: 180px;
  top: 20px;
  width: 62px;
  height: 42px;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(236,250,255,0.92) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(126,211,255,0.75) 0 2px, transparent 3px);
  background-size: 14px 11px, 18px 13px;
  animation: support-v2u-water-drops 7.55s ease-out both;
}
@keyframes support-v2u-water-drops {
  0%, 30% { opacity: 0; transform: translateY(0); }
  34%, 62% { opacity: 0.95; transform: translateY(7px); }
  67%, 100% { opacity: 0; transform: translateY(13px); }
}
.support-siren-light {
  position: absolute;
  top: 7px;
  width: 14px;
  height: 6px;
  border-radius: 6px;
  background: #ffd76a;
  box-shadow: 0 0 14px rgba(255, 215, 106, 0.8);
  animation: support-v2u-siren 0.38s steps(2,end) infinite;
}
.support-siren-light.light-a { left: 112px; }
.support-siren-light.light-b { left: 127px; background: #7fd3ff; box-shadow: 0 0 14px rgba(127, 211, 255, 0.8); animation-delay: 0.19s; }
@keyframes support-v2u-siren { 50% { opacity: 0.35; } }
.support-action-marker {
  position: absolute;
  left: var(--support-action-x);
  top: var(--support-action-y);
  width: 78px;
  height: 58px;
  transform: translate(-50%, -54%);
  opacity: 0;
  z-index: 5;
}
.support-action-ring {
  position: absolute;
  left: 50%;
  top: 54%;
  width: 46px;
  height: 20px;
  border: 2px solid rgba(255,215,106,0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 14px rgba(255,215,106,0.24);
}
.cleanup-action,
.fire-action { animation: support-v2u-marker-window 7.55s linear both; }
@keyframes support-v2u-marker-window {
  0%, 27% { opacity: 0; }
  32%, 64% { opacity: 1; }
  69%, 100% { opacity: 0; }
}
.support-action-spark,
.support-action-dust,
.support-action-steam,
.support-action-foam {
  position: absolute;
}
.support-action-spark {
  left: 36px;
  top: 20px;
  width: 9px;
  height: 9px;
  background: #fff3a6;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  box-shadow: 0 0 8px rgba(255,242,153,0.65);
  animation: support-v2u-spark 0.46s steps(2,end) infinite;
}
.support-action-spark.spark-b { left: 48px; top: 32px; animation-delay: 0.22s; }
.support-action-dust {
  left: 20px;
  top: 34px;
  width: 16px;
  height: 12px;
  border-radius: 50%;
  background: rgba(210,173,108,0.58);
  filter: blur(1px);
  animation: support-v2u-dust 0.65s ease-out infinite;
}
.support-action-dust.dust-b { left: 45px; top: 28px; width: 13px; height: 10px; animation-delay: 0.25s; }
@keyframes support-v2u-spark { 50% { transform: scale(1.25); opacity: 0.58; } }
@keyframes support-v2u-dust {
  0% { opacity: 0.70; transform: translate(0,0) scale(0.8); }
  100% { opacity: 0; transform: translate(14px,-9px) scale(1.3); }
}
.support-action-steam {
  left: 24px;
  top: 4px;
  width: 14px;
  height: 32px;
  border-radius: 50%;
  background: rgba(214,238,234,0.32);
  filter: blur(2px);
  animation: support-v2u-steam-rise 0.9s ease-in-out infinite;
}
.support-action-steam.steam-b { left: 44px; top: 0; animation-delay: 0.34s; }
.support-action-foam {
  left: 22px;
  top: 31px;
  width: 18px;
  height: 13px;
  border-radius: 50%;
  background: rgba(235,250,255,0.86);
  animation: support-v2u-foam-pop 0.62s ease-out infinite;
}
.support-action-foam.foam-b { left: 45px; top: 36px; width: 14px; height: 10px; animation-delay: 0.28s; }
@keyframes support-v2u-steam-rise {
  0% { opacity: 0; transform: translateY(8px) scale(0.75); }
  35% { opacity: 0.72; }
  100% { opacity: 0; transform: translateY(-18px) scale(1.15); }
}
@keyframes support-v2u-foam-pop {
  0% { opacity: 0.80; transform: scale(0.72); }
  100% { opacity: 0; transform: translate(12px,-7px) scale(1.34); }
}
.support-wildlife {
  left: -130px !important;
  top: 69.5% !important;
  width: 132px !important;
  height: 64px !important;
  animation: support-v2u-wildlife-scout 7.1s ease-in-out both !important;
}
@keyframes support-v2u-wildlife-scout {
  0% { transform: translateX(0) scale(0.98); opacity: 0; }
  10% { opacity: 1; }
  34% { transform: translateX(32vw) scale(0.98); opacity: 1; }
  48% { transform: translateX(38vw) scale(0.98); opacity: 1; }
  62% { transform: translateX(43vw) scale(0.98); opacity: 1; }
  100% { transform: translateX(calc(100vw + 180px)) scale(0.98); opacity: 0; }
}
.support-wildlife .support-shadow { left: 18px; width: 78px; height: 12px; bottom: 5px; }
.support-pixel-animal {
  position: absolute;
  left: 12px;
  bottom: 6px;
  width: 106px;
  height: 52px;
  animation: support-v2u-animal-look 7.1s steps(2,end) both;
}
@keyframes support-v2u-animal-look {
  0%, 34%, 63%, 100% { transform: translateY(0); }
  40%, 46%, 54% { transform: translateY(-4px); }
}
.support-wildlife-sprite {
  width: 92px;
  height: 46px;
}
.support-wildlife-deer { background-image: url("../support/wildlife_deer_pixel.svg"); }
.support-wildlife-fox { background-image: url("../support/wildlife_fox_pixel.svg"); }
.support-wildlife-boar { background-image: url("../support/wildlife_boar_pixel.svg"); }
.support-animal-alert {
  position: absolute;
  left: 70px;
  top: 2px;
  width: 6px;
  height: 18px;
  background: linear-gradient(#fff2a4 0 10px, transparent 10px 13px, #fff2a4 13px 18px);
  filter: drop-shadow(0 0 5px rgba(255,242,164,0.55));
  opacity: 0;
  animation: support-v2u-animal-alert 7.1s steps(2,end) both;
}
@keyframes support-v2u-animal-alert {
  0%, 36%, 62%, 100% { opacity: 0; }
  41%, 54% { opacity: 1; }
}
.support-animal-dust,
.support-animal-leaf { position: absolute; }
.support-animal-dust {
  left: 20px;
  top: 34px;
  width: 10px;
  height: 8px;
  border-radius: 50%;
  background: rgba(187,153,110,0.50);
  filter: blur(1px);
  animation: support-v2u-animal-dust 0.72s ease-out infinite;
}
.support-animal-dust.dust-b { left: 34px; top: 36px; width: 8px; height: 6px; animation-delay: 0.28s; }
.support-animal-leaf {
  left: 76px;
  top: 12px;
  width: 8px;
  height: 6px;
  background: #9be56a;
  clip-path: polygon(0 50%, 45% 0, 100% 22%, 70% 100%, 20% 80%);
  animation: support-v2u-leaf 1s ease-in-out infinite;
}
.support-animal-leaf.leaf-b { left: 84px; top: 20px; background: #7ed84e; animation-delay: 0.34s; }
@keyframes support-v2u-animal-dust {
  0% { opacity: 0.52; transform: translate(0,0) scale(0.75); }
  100% { opacity: 0; transform: translate(-9px,-4px) scale(1.18); }
}
@keyframes support-v2u-leaf {
  50% { transform: translate(10px,-8px) rotate(18deg); opacity: 0.68; }
  100% { transform: translate(18px,-2px) rotate(34deg); opacity: 0; }
}


/* v2w Buy Recovery Feedback
   BUYs must visibly help the Heart Tree in both live and debug mode. */
.heart-world-status-panel.heart-recovering {
  border-color: rgba(169, 255, 132, 0.54);
  box-shadow: 0 0 22px rgba(169,255,132,0.12), inset 0 0 14px rgba(169,255,132,0.06);
}
.heart-world-status-panel.heart-recovering .heart-status-row strong {
  color: #b8ff8f;
  text-shadow: 0 0 10px rgba(169,255,132,0.45);
}
.heart-world-status-panel.heart-recovering .heart-defense-track {
  box-shadow: inset 0 0 0 1px rgba(169,255,132,0.18), 0 0 16px rgba(169,255,132,0.14);
}
.heart-world-status-panel.heart-recovering .heart-defense-track > span {
  background: linear-gradient(90deg, #78ff72, #d8ff89, #fff1a6);
  box-shadow: 0 0 14px rgba(169,255,132,0.68);
  animation: heart-v2w-recovery-bar-pulse 0.92s ease-in-out infinite alternate;
}
.heart-recovery-glint {
  position: absolute;
  top: -2px;
  left: 0;
  width: 36px;
  height: calc(100% + 4px);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.82), transparent);
  opacity: 0;
  pointer-events: none;
}
.heart-world-status-panel.heart-recovering .heart-recovery-glint {
  opacity: 1;
  animation: heart-v2w-recovery-glint 1.35s ease-in-out infinite;
}
.heart-recovery-label {
  color: #b8ff8f !important;
}
.heart-tree-stage.heart-recovering .heart-aura {
  opacity: 0.82;
  background: radial-gradient(circle, rgba(169,255,132,0.26), rgba(255,215,106,0.10) 48%, transparent 72%);
  animation: heart-v2w-recovery-aura 1.4s ease-in-out infinite alternate;
}
.heart-tree-stage.heart-recovering .heart-core {
  box-shadow: 0 0 12px rgba(169,255,132,0.62), 0 0 22px rgba(255,215,106,0.22);
}
.heart-tree-stage.heart-recovering .heart-sparkle {
  display: block;
  opacity: 0.9;
  background: #dfffab;
  box-shadow: 0 0 10px rgba(169,255,132,0.82);
  animation: heart-v2w-recovery-spark 0.9s ease-in-out infinite alternate;
}
@keyframes heart-v2w-recovery-bar-pulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.35); }
}
@keyframes heart-v2w-recovery-glint {
  0% { transform: translateX(-40px); opacity: 0; }
  18% { opacity: 0.84; }
  100% { transform: translateX(340px); opacity: 0; }
}
@keyframes heart-v2w-recovery-aura {
  from { transform: scale(0.98); opacity: 0.54; }
  to { transform: scale(1.07); opacity: 0.88; }
}
@keyframes heart-v2w-recovery-spark {
  from { transform: translateY(4px) scale(0.75); opacity: 0.45; }
  to { transform: translateY(-5px) scale(1.18); opacity: 1; }
}


/* Timberfall v2x — Fire Visual Animation Upgrade
   Scope: visual-only fire/smoke/ember/steam upgrade.
   Does not change world render, Heart Tree positioning, support timing, cleanup targeting or buy recovery logic. */
.sprite-fire,
.sprite-wildfire {
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0 10px rgba(255, 92, 36, 0.34));
}
.sprite-fire .fire-glow,
.sprite-wildfire .fire-glow {
  left: 1px;
  bottom: 0;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 72%, rgba(255, 116, 42, 0.40), rgba(255, 61, 30, 0.17) 38%, rgba(255, 180, 63, 0.08) 58%, transparent 74%);
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: timberfall-fire-glow-v2x 0.86s steps(4,end) infinite alternate;
  z-index: 0;
}
.sprite-wildfire .fire-glow-b {
  left: -9px;
  bottom: -5px;
  width: 72px;
  height: 66px;
  opacity: 0.56;
  animation-duration: 1.18s;
  animation-delay: 0.19s;
}
.sprite-fire .ash-bed,
.sprite-wildfire .ash-bed {
  left: 5px;
  bottom: 2px;
  width: 45px;
  height: 12px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 18% 62%, rgba(24,22,19,0.90) 0 5px, transparent 6px),
    radial-gradient(circle at 48% 55%, rgba(70,57,45,0.74) 0 6px, transparent 7px),
    radial-gradient(circle at 76% 66%, rgba(37,34,29,0.86) 0 5px, transparent 6px),
    linear-gradient(90deg, rgba(19,18,16,0.62), rgba(80,55,39,0.62), rgba(18,17,15,0.58));
  box-shadow: 0 0 10px rgba(255, 96, 42, 0.18);
  z-index: 1;
}
.sprite-wildfire .ash-bed-big {
  left: -3px;
  width: 62px;
  height: 15px;
  opacity: 0.95;
}
.sprite-fire .heat-shimmer,
.sprite-wildfire .heat-shimmer {
  left: 6px;
  bottom: 17px;
  width: 44px;
  height: 45px;
  border-radius: 42% 42% 48% 48%;
  background: linear-gradient(180deg, rgba(255, 238, 147, 0.08), rgba(255, 105, 42, 0.08), transparent 74%);
  filter: blur(1px);
  opacity: 0.55;
  animation: timberfall-heat-shimmer-v2x 0.72s steps(3,end) infinite alternate;
  z-index: 2;
}
.sprite-wildfire .heat-shimmer-big {
  left: -2px;
  bottom: 14px;
  width: 62px;
  height: 57px;
  opacity: 0.64;
}
.sprite-fire .flame,
.sprite-wildfire .flame {
  border-radius: 50% 50% 18% 18%;
  clip-path: polygon(50% 0%, 62% 15%, 78% 34%, 94% 62%, 83% 100%, 54% 91%, 32% 100%, 9% 72%, 20% 39%, 36% 18%);
  transform-origin: 50% 100%;
  animation-name: timberfall-fire-flicker-v2x;
  animation-timing-function: steps(4,end);
  animation-iteration-count: infinite;
  animation-direction: alternate;
  z-index: 4;
}
.sprite-fire .flame-back,
.sprite-wildfire .flame-back {
  left: 8px;
  bottom: 4px;
  width: 37px;
  height: 45px;
  background: linear-gradient(180deg, #9d2018 0%, #d73b1e 42%, #7a160e 100%);
  opacity: 0.90;
  animation-duration: 0.54s;
}
.sprite-fire .flame-main,
.sprite-wildfire .flame-main {
  left: 14px;
  bottom: 7px;
  width: 31px;
  height: 52px;
  background: linear-gradient(180deg, #fff0a3 0%, #ff9c2e 35%, #f34f21 75%, rgba(112,17,9,0.72) 100%);
  animation-duration: 0.42s;
  animation-delay: 0.06s;
}
.sprite-fire .flame-core,
.sprite-wildfire .flame-core {
  left: 22px;
  bottom: 10px;
  width: 18px;
  height: 35px;
  background: linear-gradient(180deg, #fffbe1 0%, #ffd76a 42%, #ff7b31 100%);
  opacity: 0.94;
  animation-duration: 0.36s;
  animation-delay: 0.13s;
  z-index: 5;
}
.sprite-wildfire .flame-side {
  bottom: 4px;
  width: 24px;
  height: 41px;
  background: linear-gradient(180deg, #ffc15d, #ff5f2b 48%, #9f2115 100%);
  opacity: 0.88;
  animation-duration: 0.50s;
}
.sprite-wildfire .flame-d { left: 31px; animation-delay: 0.22s; }
.sprite-wildfire .flame-e { left: 0; height: 34px; animation-delay: 0.31s; opacity: 0.76; }
.sprite-fire .ember,
.sprite-wildfire .ember {
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #ffd76a;
  box-shadow: 0 0 7px rgba(255,215,106,0.58), 7px 8px 0 rgba(255,96,42,0.46);
  animation-name: timberfall-ember-rise-v2x;
  animation-timing-function: steps(6,end);
  animation-iteration-count: infinite;
  z-index: 7;
}
.sprite-fire .ember-a, .sprite-wildfire .ember-a { left: 15px; bottom: 39px; animation-duration: 1.16s; }
.sprite-fire .ember-b, .sprite-wildfire .ember-b { left: 34px; bottom: 35px; animation-duration: 1.42s; animation-delay: 0.28s; }
.sprite-fire .ember-c, .sprite-wildfire .ember-c { left: 25px; bottom: 49px; animation-duration: 1.62s; animation-delay: 0.48s; }
.sprite-wildfire .ember-d { left: 44px; bottom: 45px; animation-duration: 1.28s; animation-delay: 0.72s; }
.sprite-fire .smoke,
.sprite-wildfire .smoke {
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132, 127, 114, 0.24), rgba(72, 70, 66, 0.15) 54%, transparent 72%);
  filter: blur(3px);
  animation-name: timberfall-smoke-rise-v2x;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  z-index: 3;
}
.sprite-fire .smoke-a, .sprite-wildfire .smoke-a { left: 6px; bottom: 42px; width: 35px; height: 23px; animation-duration: 2.25s; }
.sprite-fire .smoke-b, .sprite-wildfire .smoke-b { left: 24px; bottom: 48px; width: 34px; height: 25px; animation-duration: 2.75s; animation-delay: 0.52s; }
.sprite-wildfire .smoke-big { left: -1px; bottom: 52px; width: 64px; height: 44px; animation-duration: 3.2s; animation-delay: 0.22s; opacity: 0.86; }
.entity-large .sprite-fire,
.entity-whale .sprite-wildfire { filter: drop-shadow(0 0 14px rgba(255, 92, 36, 0.43)) drop-shadow(0 0 24px rgba(255, 149, 42, 0.16)); }
.fire-extinguished .fire-glow,
.fire-extinguished .heat-shimmer,
.fire-extinguished .flame,
.fire-extinguished .ember { display: none !important; }
.sprite-extinguished-fire .ash-c {
  left: 1px;
  bottom: 2px;
  width: 48px;
  height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 48% 64%, rgba(41, 41, 36, 0.72), rgba(96, 84, 67, 0.28) 48%, transparent 70%);
  box-shadow: 0 0 12px rgba(180, 164, 130, 0.10);
}
.sprite-extinguished-fire .steam-c {
  left: 22px;
  bottom: 11px;
  width: 14px;
  height: 30px;
  border-radius: 50%;
  background: rgba(218, 243, 239, 0.16);
  filter: blur(2px);
  animation: steam-rise 1.65s ease-in-out infinite;
  animation-delay: 0.78s;
}
.support-target-extinguished .sprite-fire .smoke,
.support-target-extinguished .sprite-wildfire .smoke { animation-duration: 1.25s; }
@keyframes timberfall-fire-glow-v2x {
  0% { transform: scale(0.92); opacity: 0.48; filter: brightness(0.92); }
  50% { transform: scale(1.05); opacity: 0.78; filter: brightness(1.18); }
  100% { transform: scale(0.98) translateY(-1px); opacity: 0.64; filter: brightness(1.02); }
}
@keyframes timberfall-heat-shimmer-v2x {
  0% { transform: translateX(-2px) skewX(-4deg) scaleY(0.96); opacity: 0.30; }
  50% { transform: translateX(3px) skewX(5deg) scaleY(1.04); opacity: 0.58; }
  100% { transform: translateX(-1px) skewX(-2deg) scaleY(1.00); opacity: 0.40; }
}
@keyframes timberfall-fire-flicker-v2x {
  0% { transform: translateY(0) scaleX(0.92) scaleY(1.02) rotate(-1deg); filter: brightness(0.96) saturate(1.05); }
  33% { transform: translateY(-2px) scaleX(1.08) scaleY(0.95) rotate(1deg); filter: brightness(1.18) saturate(1.15); }
  66% { transform: translateY(-4px) scaleX(0.86) scaleY(1.10) rotate(-2deg); filter: brightness(1.32) saturate(1.22); }
  100% { transform: translateY(-1px) scaleX(1.03) scaleY(1.00) rotate(1deg); filter: brightness(1.08) saturate(1.10); }
}
@keyframes timberfall-ember-rise-v2x {
  0% { opacity: 0; transform: translate(0, 6px) scale(0.7); }
  22% { opacity: 0.90; }
  58% { opacity: 0.62; transform: translate(5px, -13px) scale(1); }
  100% { opacity: 0; transform: translate(-3px, -31px) scale(0.4); }
}
@keyframes timberfall-smoke-rise-v2x {
  0% { opacity: 0; transform: translate(0, 8px) scale(0.62); }
  34% { opacity: 0.48; }
  72% { opacity: 0.22; transform: translate(9px, -17px) scale(1.22); }
  100% { opacity: 0; transform: translate(17px, -35px) scale(1.58); }
}

/* Timberfall v2x.1 — Heart Tree Fire Visual Fix
   Scope: Heart Tree burning/firestorm visuals only.
   Fixes the main gimmick: center Heart Tree fire now uses the upgraded flame language too.
   No position, world render, support timing, cleanup targeting, buy recovery or server logic changes. */
.heart-burning .heart-raid-field,
.heart-under-attack .heart-raid-field,
.raid-fire-raid .heart-raid-field,
.raid-firestorm .heart-raid-field {
  z-index: 18;
  pointer-events: none;
}
.heart-burning .heart-raid-field::before,
.heart-under-attack .heart-raid-field::before,
.raid-fire-raid .heart-raid-field::before,
.raid-firestorm .heart-raid-field::before {
  content: "";
  position: absolute;
  left: 56px;
  top: 124px;
  width: 116px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 24% 62%, rgba(255, 122, 43, 0.35) 0 8px, transparent 11px),
    radial-gradient(circle at 54% 54%, rgba(255, 215, 106, 0.26) 0 10px, transparent 14px),
    radial-gradient(circle at 78% 64%, rgba(255, 76, 35, 0.28) 0 8px, transparent 12px),
    radial-gradient(ellipse at 50% 65%, rgba(255, 91, 37, 0.30), rgba(101, 24, 13, 0.16) 58%, transparent 76%);
  filter: blur(1px);
  mix-blend-mode: screen;
  opacity: 0.86;
  animation: heart-tree-fire-bed-v2x1 0.9s steps(4,end) infinite alternate;
}
.heart-burning .heart-raid-field::after,
.heart-under-attack .heart-raid-field::after,
.raid-fire-raid .heart-raid-field::after,
.raid-firestorm .heart-raid-field::after {
  content: "";
  position: absolute;
  left: 41px;
  top: 83px;
  width: 142px;
  height: 94px;
  border-radius: 48%;
  background:
    radial-gradient(circle at 30% 75%, rgba(255, 95, 37, 0.18), transparent 34%),
    radial-gradient(circle at 55% 70%, rgba(255, 215, 106, 0.12), transparent 36%),
    radial-gradient(circle at 76% 78%, rgba(255, 70, 31, 0.14), transparent 34%);
  filter: blur(7px);
  mix-blend-mode: screen;
  opacity: 0.72;
  animation: heart-tree-fire-glow-v2x1 1.15s ease-in-out infinite alternate;
}
.heart-burning .heart-fire,
.heart-under-attack .heart-fire,
.raid-fire-raid .heart-fire,
.raid-firestorm .heart-fire {
  width: 21px;
  height: 45px;
  border-radius: 54% 54% 20% 20%;
  clip-path: polygon(50% 0%, 66% 17%, 84% 39%, 94% 66%, 78% 100%, 55% 90%, 35% 100%, 10% 70%, 19% 38%, 35% 16%);
  background: linear-gradient(180deg, #fff8bc 0%, #ffd76a 20%, #ff8e34 53%, #ef451f 78%, rgba(95, 16, 8, 0.58) 100%);
  opacity: 1;
  filter: drop-shadow(0 0 7px rgba(255, 214, 94, 0.68)) drop-shadow(0 0 16px rgba(255, 84, 35, 0.42));
  transform-origin: 50% 100%;
  animation: heart-tree-flame-v2x1 0.38s steps(4,end) infinite alternate;
  z-index: 22;
}
.heart-burning .heart-fire::before,
.heart-under-attack .heart-fire::before,
.raid-fire-raid .heart-fire::before,
.raid-firestorm .heart-fire::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  width: 10px;
  height: 24px;
  border-radius: 50% 50% 20% 20%;
  clip-path: inherit;
  background: linear-gradient(180deg, #fffde5, #ffd86c 48%, #ff7c30 100%);
  opacity: 0.96;
  animation: heart-tree-inner-flame-v2x1 0.31s steps(3,end) infinite alternate;
}
.heart-burning .heart-fire::after,
.heart-under-attack .heart-fire::after,
.raid-fire-raid .heart-fire::after,
.raid-firestorm .heart-fire::after {
  content: "";
  position: absolute;
  left: -5px;
  bottom: -5px;
  width: 29px;
  height: 15px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 92, 36, 0.45), rgba(255, 215, 106, 0.14) 42%, transparent 70%);
  filter: blur(1px);
  mix-blend-mode: screen;
}
.heart-burning .f1,
.heart-under-attack .f1,
.raid-fire-raid .f1,
.raid-firestorm .f1 { left: 79px; top: 104px; width: 24px; height: 54px; animation-delay: 0.00s; }
.heart-burning .f2,
.heart-under-attack .f2,
.raid-fire-raid .f2,
.raid-firestorm .f2 { left: 106px; top: 111px; width: 22px; height: 48px; animation-delay: 0.13s; }
.heart-burning .f3,
.heart-under-attack .f3,
.raid-fire-raid .f3,
.raid-firestorm .f3 { left: 62px; top: 122px; width: 20px; height: 42px; animation-delay: 0.25s; opacity: 0.92; }
.heart-burning .f4,
.heart-under-attack .f4,
.raid-fire-raid .f4,
.raid-firestorm .f4 { left: 93px; top: 133px; width: 19px; height: 38px; animation-delay: 0.18s; opacity: 0.88; }
.heart-burning .heart-ember,
.heart-under-attack .heart-ember,
.raid-fire-raid .heart-ember,
.raid-firestorm .heart-ember {
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #ffd76a;
  opacity: 1;
  box-shadow:
    10px 11px 0 rgba(255, 96, 42, 0.80),
    -14px 20px 0 rgba(255, 215, 106, 0.66),
    22px 30px 0 rgba(255, 96, 42, 0.58),
    -24px 40px 0 rgba(255, 142, 89, 0.44),
    4px 51px 0 rgba(255, 215, 106, 0.38);
  filter: drop-shadow(0 0 5px rgba(255, 196, 78, 0.55));
  animation: heart-tree-ember-rise-v2x1 1.18s steps(6,end) infinite;
  z-index: 25;
}
.heart-burning .e1,
.heart-under-attack .e1,
.raid-fire-raid .e1,
.raid-firestorm .e1 { left: 83px; top: 86px; animation-duration: 1.08s; }
.heart-burning .e2,
.heart-under-attack .e2,
.raid-fire-raid .e2,
.raid-firestorm .e2 { left: 116px; top: 94px; animation-duration: 1.32s; animation-delay: 0.29s; }
.heart-burning .e3,
.heart-under-attack .e3,
.raid-fire-raid .e3,
.raid-firestorm .e3 { left: 64px; top: 103px; animation-duration: 1.48s; animation-delay: 0.54s; }
.heart-burning .heart-smoke,
.heart-under-attack .heart-smoke,
.raid-fire-raid .heart-smoke,
.raid-firestorm .heart-smoke {
  width: 48px;
  height: 31px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(130, 126, 113, 0.22), rgba(75, 73, 68, 0.15) 56%, transparent 74%);
  opacity: 0.86;
  filter: blur(4px);
  animation: heart-tree-smoke-drift-v2x1 2.7s ease-in-out infinite;
  z-index: 19;
}
.heart-burning .sm1,
.heart-under-attack .sm1,
.raid-fire-raid .sm1,
.raid-firestorm .sm1 { left: 56px; top: 48px; animation-delay: 0.00s; }
.heart-burning .sm2,
.heart-under-attack .sm2,
.raid-fire-raid .sm2,
.raid-firestorm .sm2 { left: 103px; top: 61px; width: 54px; height: 35px; animation-delay: 0.64s; }
.heart-burning .heart-tree,
.heart-under-attack .heart-tree,
.raid-fire-raid .heart-tree,
.raid-firestorm .heart-tree {
  filter: brightness(0.78) saturate(0.9) drop-shadow(0 20px 14px rgba(0,0,0,0.55)) drop-shadow(0 0 16px rgba(255, 84, 35, 0.24));
}
.heart-burning .heart-tree::before,
.heart-under-attack .heart-tree::before,
.raid-fire-raid .heart-tree::before,
.raid-firestorm .heart-tree::before {
  opacity: 1;
  animation: heart-tree-burn-overlay-pulse-v2x1 0.95s steps(4,end) infinite alternate;
}
@keyframes heart-tree-fire-bed-v2x1 {
  0% { transform: scaleX(0.92); opacity: 0.58; }
  50% { transform: scaleX(1.05) translateY(-1px); opacity: 0.88; }
  100% { transform: scaleX(0.98); opacity: 0.70; }
}
@keyframes heart-tree-fire-glow-v2x1 {
  to { transform: scale(1.08) translateY(-2px); opacity: 0.86; }
}
@keyframes heart-tree-flame-v2x1 {
  0% { transform: translateY(0) scaleX(0.88) scaleY(1.05) rotate(-1deg); filter: brightness(0.98) saturate(1.05); }
  33% { transform: translateY(-4px) scaleX(1.12) scaleY(0.95) rotate(1.5deg); filter: brightness(1.24) saturate(1.18); }
  66% { transform: translateY(-7px) scaleX(0.82) scaleY(1.13) rotate(-2deg); filter: brightness(1.42) saturate(1.28); }
  100% { transform: translateY(-2px) scaleX(1.05) scaleY(1.01) rotate(1deg); filter: brightness(1.12) saturate(1.13); }
}
@keyframes heart-tree-inner-flame-v2x1 {
  to { transform: translateY(-3px) scaleX(0.78) scaleY(1.12); opacity: 0.82; }
}
@keyframes heart-tree-ember-rise-v2x1 {
  0% { opacity: 0; transform: translate(0, 8px) scale(0.65); }
  20% { opacity: 0.95; }
  60% { opacity: 0.66; transform: translate(7px, -19px) scale(1); }
  100% { opacity: 0; transform: translate(-4px, -46px) scale(0.35); }
}
@keyframes heart-tree-smoke-drift-v2x1 {
  0% { transform: translate(0, 10px) scale(0.82); opacity: 0; }
  35% { opacity: 0.58; }
  70% { transform: translate(13px, -13px) scale(1.10); opacity: 0.30; }
  100% { transform: translate(24px, -31px) scale(1.28); opacity: 0; }
}
@keyframes heart-tree-burn-overlay-pulse-v2x1 {
  to { filter: brightness(1.16) saturate(1.18); opacity: 0.86; }
}


/* Timberfall v2x.2 — Dedicated Heart Tree Fire Stage
   Scope: Heart Tree burning visuals only.
   Goal: remove the tiny off-position mini flames and replace them with a centered, clearly visible boss-event fire stage at the Heart Tree base. */
.heart-burning .heart-sparkle,
.heart-under-attack .heart-sparkle,
.raid-fire-raid .heart-sparkle,
.raid-firestorm .heart-sparkle {
  display: none !important;
}
.heart-burning .heart-raid-field,
.heart-under-attack .heart-raid-field,
.raid-fire-raid .heart-raid-field,
.raid-firestorm .heart-raid-field {
  z-index: 18;
  overflow: visible;
}
.heart-burning .heart-raid-field::before,
.heart-under-attack .heart-raid-field::before,
.raid-fire-raid .heart-raid-field::before,
.raid-firestorm .heart-raid-field::before {
  left: 50%;
  top: auto;
  bottom: 148px;
  width: 270px;
  height: 78px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 20% 60%, rgba(255, 122, 43, 0.45) 0 12px, transparent 16px),
    radial-gradient(circle at 40% 52%, rgba(255, 215, 106, 0.28) 0 16px, transparent 22px),
    radial-gradient(circle at 60% 50%, rgba(255, 156, 58, 0.24) 0 14px, transparent 20px),
    radial-gradient(circle at 80% 62%, rgba(255, 88, 35, 0.40) 0 12px, transparent 17px),
    radial-gradient(ellipse at 50% 56%, rgba(255, 92, 36, 0.34), rgba(128, 28, 15, 0.16) 58%, transparent 80%);
  filter: blur(2px);
  mix-blend-mode: screen;
  opacity: 0.95;
  animation: heart-tree-fire-bed-v2x2 0.9s steps(4,end) infinite alternate;
}
.heart-burning .heart-raid-field::after,
.heart-under-attack .heart-raid-field::after,
.raid-fire-raid .heart-raid-field::after,
.raid-firestorm .heart-raid-field::after {
  left: 50%;
  top: auto;
  bottom: 146px;
  width: 360px;
  height: 210px;
  transform: translateX(-50%);
  border-radius: 48%;
  background:
    radial-gradient(circle at 30% 82%, rgba(255, 95, 37, 0.22), transparent 35%),
    radial-gradient(circle at 52% 76%, rgba(255, 215, 106, 0.15), transparent 37%),
    radial-gradient(circle at 74% 84%, rgba(255, 70, 31, 0.20), transparent 34%),
    radial-gradient(circle at 50% 55%, rgba(255, 100, 42, 0.10), transparent 48%);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: 0.82;
  animation: heart-tree-fire-glow-v2x2 1.15s ease-in-out infinite alternate;
}
.heart-burning .heart-fire,
.heart-under-attack .heart-fire,
.raid-fire-raid .heart-fire,
.raid-firestorm .heart-fire {
  top: auto;
  width: 54px;
  height: 112px;
  border-radius: 56% 56% 20% 20%;
  clip-path: polygon(50% 0%, 67% 16%, 84% 38%, 95% 67%, 82% 100%, 56% 90%, 34% 100%, 11% 72%, 19% 38%, 34% 16%);
  background: linear-gradient(180deg, #fffad6 0%, #ffe07c 18%, #ffb14b 36%, #ff7d2d 56%, #ef451f 78%, rgba(91, 14, 8, 0.72) 100%);
  filter: drop-shadow(0 0 8px rgba(255, 219, 99, 0.78)) drop-shadow(0 0 18px rgba(255, 84, 35, 0.55));
  transform-origin: 50% 100%;
  animation: heart-tree-flame-v2x2 0.42s steps(4,end) infinite alternate;
  z-index: 23;
}
.heart-burning .heart-fire::before,
.heart-under-attack .heart-fire::before,
.raid-fire-raid .heart-fire::before,
.raid-firestorm .heart-fire::before {
  left: 13px;
  top: 21px;
  width: 25px;
  height: 57px;
  border-radius: 50% 50% 20% 20%;
  background: linear-gradient(180deg, #fffde9, #ffe18d 46%, #ff9537 100%);
  opacity: 0.98;
  animation: heart-tree-inner-flame-v2x2 0.31s steps(3,end) infinite alternate;
}
.heart-burning .heart-fire::after,
.heart-under-attack .heart-fire::after,
.raid-fire-raid .heart-fire::after,
.raid-firestorm .heart-fire::after {
  left: -10px;
  bottom: -10px;
  width: 74px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 92, 36, 0.52), rgba(255, 215, 106, 0.18) 42%, transparent 72%);
  filter: blur(2px);
}
.heart-burning .f1,
.heart-under-attack .f1,
.raid-fire-raid .f1,
.raid-firestorm .f1 { left: 250px; bottom: 160px; width: 60px; height: 126px; animation-delay: 0.00s; }
.heart-burning .f2,
.heart-under-attack .f2,
.raid-fire-raid .f2,
.raid-firestorm .f2 { left: 314px; bottom: 148px; width: 74px; height: 146px; animation-delay: 0.12s; }
.heart-burning .f3,
.heart-under-attack .f3,
.raid-fire-raid .f3,
.raid-firestorm .f3 { left: 390px; bottom: 152px; width: 66px; height: 132px; animation-delay: 0.24s; opacity: 0.98; }
.heart-burning .f4,
.heart-under-attack .f4,
.raid-fire-raid .f4,
.raid-firestorm .f4 { left: 458px; bottom: 162px; width: 54px; height: 114px; animation-delay: 0.18s; opacity: 0.94; }
.heart-burning .heart-ember,
.heart-under-attack .heart-ember,
.raid-fire-raid .heart-ember,
.raid-firestorm .heart-ember {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: #ffd76a;
  box-shadow:
    18px 16px 0 rgba(255, 96, 42, 0.84),
    -18px 26px 0 rgba(255, 215, 106, 0.72),
    28px 38px 0 rgba(255, 96, 42, 0.62),
    -32px 46px 0 rgba(255, 142, 89, 0.52),
    8px 58px 0 rgba(255, 215, 106, 0.40),
    46px 30px 0 rgba(255, 188, 80, 0.58),
    -44px 36px 0 rgba(255, 92, 36, 0.48);
  filter: drop-shadow(0 0 6px rgba(255, 196, 78, 0.65));
  animation: heart-tree-ember-rise-v2x2 1.18s steps(6,end) infinite;
  z-index: 25;
}
.heart-burning .e1,
.heart-under-attack .e1,
.raid-fire-raid .e1,
.raid-firestorm .e1 { left: 302px; top: auto; bottom: 224px; animation-duration: 1.08s; }
.heart-burning .e2,
.heart-under-attack .e2,
.raid-fire-raid .e2,
.raid-firestorm .e2 { left: 376px; top: auto; bottom: 238px; animation-duration: 1.32s; animation-delay: 0.29s; }
.heart-burning .e3,
.heart-under-attack .e3,
.raid-fire-raid .e3,
.raid-firestorm .e3 { left: 444px; top: auto; bottom: 216px; animation-duration: 1.48s; animation-delay: 0.54s; }
.heart-burning .heart-smoke,
.heart-under-attack .heart-smoke,
.raid-fire-raid .heart-smoke,
.raid-firestorm .heart-smoke {
  width: 78px;
  height: 46px;
  background: radial-gradient(circle, rgba(130, 126, 113, 0.25), rgba(75, 73, 68, 0.17) 56%, transparent 74%);
  opacity: 0.90;
  filter: blur(5px);
  animation: heart-tree-smoke-drift-v2x2 2.8s ease-in-out infinite;
  z-index: 19;
}
.heart-burning .sm1,
.heart-under-attack .sm1,
.raid-fire-raid .sm1,
.raid-firestorm .sm1 { left: 246px; top: auto; bottom: 270px; animation-delay: 0.00s; }
.heart-burning .sm2,
.heart-under-attack .sm2,
.raid-fire-raid .sm2,
.raid-firestorm .sm2 { left: 398px; top: auto; bottom: 288px; width: 90px; height: 54px; animation-delay: 0.64s; }
.heart-burning .heart-tree,
.heart-under-attack .heart-tree,
.raid-fire-raid .heart-tree,
.raid-firestorm .heart-tree {
  filter: brightness(0.80) saturate(0.9) drop-shadow(0 20px 14px rgba(0,0,0,0.56)) drop-shadow(0 0 22px rgba(255, 84, 35, 0.28));
}
@keyframes heart-tree-fire-bed-v2x2 {
  0% { opacity: 0.85; transform: translateX(-50%) scaleX(0.94); }
  100% { opacity: 1; transform: translateX(-50%) scaleX(1.05); }
}
@keyframes heart-tree-fire-glow-v2x2 {
  0% { opacity: 0.72; transform: translateX(-50%) scale(0.97); }
  100% { opacity: 0.90; transform: translateX(-50%) scale(1.04); }
}
@keyframes heart-tree-flame-v2x2 {
  0% { transform: translateY(0) scaleX(0.92) scaleY(1.02) rotate(-1deg); filter: brightness(0.98) saturate(1.08); }
  33% { transform: translateY(-4px) scaleX(1.08) scaleY(0.95) rotate(1deg); filter: brightness(1.20) saturate(1.15); }
  66% { transform: translateY(-8px) scaleX(0.86) scaleY(1.12) rotate(-2deg); filter: brightness(1.36) saturate(1.24); }
  100% { transform: translateY(-2px) scaleX(1.03) scaleY(1.00) rotate(1deg); filter: brightness(1.10) saturate(1.12); }
}
@keyframes heart-tree-inner-flame-v2x2 {
  0% { transform: translateY(0) scale(0.96); opacity: 0.92; }
  100% { transform: translateY(-4px) scale(1.05); opacity: 1; }
}
@keyframes heart-tree-ember-rise-v2x2 {
  0% { opacity: 0; transform: translate(0, 10px) scale(0.72); }
  24% { opacity: 0.96; }
  60% { opacity: 0.68; transform: translate(10px, -22px) scale(1); }
  100% { opacity: 0; transform: translate(-6px, -52px) scale(0.42); }
}
@keyframes heart-tree-smoke-drift-v2x2 {
  0% { opacity: 0; transform: translate(0, 10px) scale(0.62); }
  34% { opacity: 0.58; }
  72% { opacity: 0.28; transform: translate(14px, -24px) scale(1.22); }
  100% { opacity: 0; transform: translate(22px, -54px) scale(1.58); }
}
@media (max-width: 780px) {
  .heart-burning .heart-raid-field::before,
  .heart-under-attack .heart-raid-field::before,
  .raid-fire-raid .heart-raid-field::before,
  .raid-firestorm .heart-raid-field::before { bottom: 64px; width: 110px; height: 32px; }
  .heart-burning .heart-raid-field::after,
  .heart-under-attack .heart-raid-field::after,
  .raid-fire-raid .heart-raid-field::after,
  .raid-firestorm .heart-raid-field::after { bottom: 58px; width: 150px; height: 90px; }
  .heart-burning .f1,
  .heart-under-attack .f1,
  .raid-fire-raid .f1,
  .raid-firestorm .f1 { left: 78px; bottom: 58px; width: 22px; height: 48px; }
  .heart-burning .f2,
  .heart-under-attack .f2,
  .raid-fire-raid .f2,
  .raid-firestorm .f2 { left: 102px; bottom: 54px; width: 26px; height: 56px; }
  .heart-burning .f3,
  .heart-under-attack .f3,
  .raid-fire-raid .f3,
  .raid-firestorm .f3 { left: 128px; bottom: 56px; width: 24px; height: 52px; }
  .heart-burning .f4,
  .heart-under-attack .f4,
  .raid-fire-raid .f4,
  .raid-firestorm .f4 { left: 150px; bottom: 60px; width: 20px; height: 42px; }
  .heart-burning .e1, .heart-under-attack .e1, .raid-fire-raid .e1, .raid-firestorm .e1 { left: 98px; bottom: 90px; }
  .heart-burning .e2, .heart-under-attack .e2, .raid-fire-raid .e2, .raid-firestorm .e2 { left: 126px; bottom: 96px; }
  .heart-burning .e3, .heart-under-attack .e3, .raid-fire-raid .e3, .raid-firestorm .e3 { left: 148px; bottom: 88px; }
  .heart-burning .sm1, .heart-under-attack .sm1, .raid-fire-raid .sm1, .raid-firestorm .sm1 { left: 76px; bottom: 106px; width: 28px; height: 18px; }
  .heart-burning .sm2, .heart-under-attack .sm2, .raid-fire-raid .sm2, .raid-firestorm .sm2 { left: 126px; bottom: 118px; width: 34px; height: 22px; }
}


/* Timberfall v2x.3 — Integrated Heart Tree Fire
   Scope: Heart Tree burning visuals only.
   Purpose: remove the ugly giant foreground flames and old orange stick artifacts.
   Visual direction: integrated low fireline / root-fire / ember-bed around the trunk, not four huge candles in front. */

/* Remove the two orange stick artifacts from old procedural Heart Tree cracks. */
.heart-burning .heart-crack,
.heart-under-attack .heart-crack,
.raid-fire-raid .heart-crack,
.raid-firestorm .heart-crack,
.heart-tree-stage .heart-crack {
  display: none !important;
  opacity: 0 !important;
}

/* Remove the separate flame sprites at the Heart Tree.
   They looked like pasted-on campfire candles and blocked the tree. */
.heart-burning .heart-fire,
.heart-under-attack .heart-fire,
.raid-fire-raid .heart-fire,
.raid-firestorm .heart-fire {
  display: none !important;
  opacity: 0 !important;
}

/* Remove mixed decorative sparkles during burn states. */
.heart-burning .heart-sparkle,
.heart-under-attack .heart-sparkle,
.raid-fire-raid .heart-sparkle,
.raid-firestorm .heart-sparkle {
  display: none !important;
  opacity: 0 !important;
}

.heart-burning .heart-raid-field,
.heart-under-attack .heart-raid-field,
.raid-fire-raid .heart-raid-field,
.raid-firestorm .heart-raid-field {
  z-index: 18;
  overflow: visible;
  pointer-events: none;
}

/* Main integrated fire bed: sits at roots/trunk, wide and low.
   Built from layered gradients instead of separate huge sprites. */
.heart-burning .heart-raid-field::before,
.heart-under-attack .heart-raid-field::before,
.raid-fire-raid .heart-raid-field::before,
.raid-firestorm .heart-raid-field::before {
  content: "";
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 158px;
  width: 260px;
  height: 105px;
  transform: translateX(-50%);
  border-radius: 44% 44% 52% 52%;
  background:
    /* flame tongues, intentionally low and clustered */
    radial-gradient(ellipse at 18% 72%, rgba(255, 68, 24, 0.92) 0 10px, rgba(255, 122, 35, 0.65) 11px 18px, transparent 20px),
    radial-gradient(ellipse at 30% 58%, rgba(255, 229, 111, 0.88) 0 8px, rgba(255, 135, 39, 0.74) 9px 20px, rgba(221, 47, 19, 0.48) 21px 28px, transparent 31px),
    radial-gradient(ellipse at 43% 76%, rgba(255, 92, 28, 0.90) 0 12px, rgba(255, 146, 42, 0.64) 13px 23px, transparent 27px),
    radial-gradient(ellipse at 54% 54%, rgba(255, 246, 166, 0.86) 0 9px, rgba(255, 159, 48, 0.74) 10px 24px, rgba(232, 54, 20, 0.52) 25px 34px, transparent 38px),
    radial-gradient(ellipse at 66% 73%, rgba(255, 83, 25, 0.88) 0 12px, rgba(255, 130, 40, 0.62) 13px 25px, transparent 29px),
    radial-gradient(ellipse at 80% 60%, rgba(255, 220, 96, 0.78) 0 8px, rgba(255, 111, 34, 0.70) 9px 22px, rgba(209, 43, 17, 0.48) 23px 31px, transparent 35px),
    /* root burn glow */
    radial-gradient(ellipse at 50% 88%, rgba(255, 73, 26, 0.50), rgba(117, 24, 12, 0.22) 52%, transparent 78%);
  filter: drop-shadow(0 0 10px rgba(255, 88, 32, 0.50)) drop-shadow(0 0 22px rgba(255, 52, 20, 0.24));
  mix-blend-mode: screen;
  opacity: 0.94;
  animation: heart-tree-integrated-fire-flicker-v2x3 0.68s steps(4,end) infinite alternate;
}

/* Heat/glow field hugging the tree base and lower trunk. */
.heart-burning .heart-raid-field::after,
.heart-under-attack .heart-raid-field::after,
.raid-fire-raid .heart-raid-field::after,
.raid-firestorm .heart-raid-field::after {
  content: "";
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 132px;
  width: 390px;
  height: 190px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(255, 82, 31, 0.30), rgba(161, 35, 16, 0.14) 38%, transparent 68%),
    radial-gradient(ellipse at 50% 54%, rgba(255, 150, 52, 0.10), transparent 50%);
  filter: blur(9px);
  mix-blend-mode: screen;
  opacity: 0.74;
  animation: heart-tree-integrated-glow-v2x3 1.2s ease-in-out infinite alternate;
}

/* Embers remain, but repositioned around the base, not floating random sticks. */
.heart-burning .heart-ember,
.heart-under-attack .heart-ember,
.raid-fire-raid .heart-ember,
.raid-firestorm .heart-ember {
  display: block !important;
  width: 4px;
  height: 4px;
  border-radius: 1px;
  background: #ffd76a;
  opacity: 0.95;
  box-shadow:
    14px 10px 0 rgba(255, 96, 42, 0.70),
    -18px 18px 0 rgba(255, 215, 106, 0.55),
    30px 26px 0 rgba(255, 96, 42, 0.46),
    -31px 32px 0 rgba(255, 142, 89, 0.36),
    7px 45px 0 rgba(255, 215, 106, 0.28);
  filter: drop-shadow(0 0 5px rgba(255, 196, 78, 0.52));
  animation: heart-tree-ember-rise-v2x3 1.45s steps(6,end) infinite;
  z-index: 25;
}
.heart-burning .e1,
.heart-under-attack .e1,
.raid-fire-raid .e1,
.raid-firestorm .e1 { left: 305px; top: auto; bottom: 230px; animation-duration: 1.2s; }
.heart-burning .e2,
.heart-under-attack .e2,
.raid-fire-raid .e2,
.raid-firestorm .e2 { left: 378px; top: auto; bottom: 244px; animation-duration: 1.55s; animation-delay: 0.22s; }
.heart-burning .e3,
.heart-under-attack .e3,
.raid-fire-raid .e3,
.raid-firestorm .e3 { left: 450px; top: auto; bottom: 224px; animation-duration: 1.75s; animation-delay: 0.46s; }

/* Smoke should rise from behind the roots, soft and broad. */
.heart-burning .heart-smoke,
.heart-under-attack .heart-smoke,
.raid-fire-raid .heart-smoke,
.raid-firestorm .heart-smoke {
  display: block !important;
  width: 82px;
  height: 44px;
  background: radial-gradient(circle, rgba(125, 121, 112, 0.22), rgba(72, 70, 65, 0.14) 58%, transparent 76%);
  opacity: 0.74;
  filter: blur(5px);
  animation: heart-tree-smoke-drift-v2x3 3s ease-in-out infinite;
  z-index: 19;
}
.heart-burning .sm1,
.heart-under-attack .sm1,
.raid-fire-raid .sm1,
.raid-firestorm .sm1 { left: 262px; top: auto; bottom: 282px; animation-delay: 0s; }
.heart-burning .sm2,
.heart-under-attack .sm2,
.raid-fire-raid .sm2,
.raid-firestorm .sm2 { left: 404px; top: auto; bottom: 294px; width: 98px; height: 52px; animation-delay: 0.62s; }

/* Lower tree tint only. Do not darken the full tree too hard. */
.heart-burning .heart-tree,
.heart-under-attack .heart-tree,
.raid-fire-raid .heart-tree,
.raid-firestorm .heart-tree {
  filter: brightness(0.88) saturate(0.95) drop-shadow(0 20px 14px rgba(0,0,0,0.56)) drop-shadow(0 0 16px rgba(255, 84, 35, 0.22));
}

@keyframes heart-tree-integrated-fire-flicker-v2x3 {
  0% { opacity: 0.86; transform: translateX(-50%) translateY(1px) scaleX(0.96) scaleY(0.98); filter: drop-shadow(0 0 8px rgba(255,88,32,0.42)) drop-shadow(0 0 18px rgba(255,52,20,0.18)); }
  35% { opacity: 0.98; transform: translateX(-50%) translateY(-2px) scaleX(1.03) scaleY(1.04); filter: drop-shadow(0 0 12px rgba(255,120,42,0.55)) drop-shadow(0 0 24px rgba(255,62,20,0.25)); }
  70% { opacity: 0.92; transform: translateX(-50%) translateY(-1px) scaleX(0.99) scaleY(1.02); }
  100% { opacity: 1; transform: translateX(-50%) translateY(-3px) scaleX(1.06) scaleY(1.05); }
}
@keyframes heart-tree-integrated-glow-v2x3 {
  0% { opacity: 0.58; transform: translateX(-50%) scale(0.96); }
  100% { opacity: 0.82; transform: translateX(-50%) scale(1.04); }
}
@keyframes heart-tree-ember-rise-v2x3 {
  0% { opacity: 0; transform: translate(0, 10px) scale(0.7); }
  24% { opacity: 0.90; }
  60% { opacity: 0.55; transform: translate(8px, -22px) scale(1); }
  100% { opacity: 0; transform: translate(-5px, -48px) scale(0.42); }
}
@keyframes heart-tree-smoke-drift-v2x3 {
  0% { opacity: 0; transform: translate(0, 10px) scale(0.62); }
  34% { opacity: 0.46; }
  72% { opacity: 0.22; transform: translate(14px, -24px) scale(1.20); }
  100% { opacity: 0; transform: translate(24px, -54px) scale(1.55); }
}

@media (max-width: 780px) {
  .heart-burning .heart-raid-field::before,
  .heart-under-attack .heart-raid-field::before,
  .raid-fire-raid .heart-raid-field::before,
  .raid-firestorm .heart-raid-field::before { bottom: 66px; width: 120px; height: 46px; }
  .heart-burning .heart-raid-field::after,
  .heart-under-attack .heart-raid-field::after,
  .raid-fire-raid .heart-raid-field::after,
  .raid-firestorm .heart-raid-field::after { bottom: 56px; width: 168px; height: 86px; }
  .heart-burning .e1, .heart-under-attack .e1, .raid-fire-raid .e1, .raid-firestorm .e1 { left: 98px; bottom: 94px; }
  .heart-burning .e2, .heart-under-attack .e2, .raid-fire-raid .e2, .raid-firestorm .e2 { left: 126px; bottom: 100px; }
  .heart-burning .e3, .heart-under-attack .e3, .raid-fire-raid .e3, .raid-firestorm .e3 { left: 148px; bottom: 92px; }
  .heart-burning .sm1, .heart-under-attack .sm1, .raid-fire-raid .sm1, .raid-firestorm .sm1 { left: 78px; bottom: 112px; width: 32px; height: 18px; }
  .heart-burning .sm2, .heart-under-attack .sm2, .raid-fire-raid .sm2, .raid-firestorm .sm2 { left: 128px; bottom: 122px; width: 38px; height: 22px; }
}


/* Timberfall v2x.4 — Smoldering Heart Tree Base
   Fix: remove the remaining 4 triangle-like flame tongues at the trunk.
   Direction: low ember bed + side root-burn, no candle/triangle cluster in the stem center. */

/* Hide the v2x.3 integrated fire drawing and replace it with a flatter smoldering bed. */
.heart-burning .heart-raid-field::before,
.heart-under-attack .heart-raid-field::before,
.raid-fire-raid .heart-raid-field::before,
.raid-firestorm .heart-raid-field::before {
  content: "";
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 154px;
  width: 248px;
  height: 72px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 14% 68%, rgba(255, 118, 40, 0.42) 0 10px, rgba(161, 38, 18, 0.10) 11px 19px, transparent 20px),
    radial-gradient(ellipse at 28% 58%, rgba(255, 196, 88, 0.26) 0 11px, rgba(255, 98, 32, 0.18) 12px 22px, transparent 23px),
    radial-gradient(ellipse at 42% 74%, rgba(255, 92, 28, 0.34) 0 12px, rgba(150, 35, 18, 0.12) 13px 22px, transparent 24px),
    radial-gradient(ellipse at 56% 60%, rgba(255, 208, 104, 0.24) 0 10px, rgba(255, 92, 28, 0.18) 11px 21px, transparent 22px),
    radial-gradient(ellipse at 70% 72%, rgba(255, 88, 27, 0.34) 0 12px, rgba(150, 35, 18, 0.12) 13px 22px, transparent 24px),
    radial-gradient(ellipse at 84% 62%, rgba(255, 180, 82, 0.24) 0 11px, rgba(255, 96, 32, 0.18) 12px 22px, transparent 24px),
    linear-gradient(180deg, rgba(255, 136, 48, 0.10), rgba(255, 88, 29, 0.14) 34%, rgba(92, 22, 12, 0.18) 70%, transparent 100%),
    radial-gradient(ellipse at 50% 88%, rgba(255, 84, 30, 0.40), rgba(120, 28, 14, 0.18) 48%, transparent 76%);
  filter: blur(1px) drop-shadow(0 0 10px rgba(255, 95, 38, 0.38)) drop-shadow(0 0 20px rgba(255, 50, 20, 0.14));
  opacity: 0.96;
  mix-blend-mode: screen;
  animation: heart-tree-smolder-bed-v2x4 1.1s steps(4,end) infinite alternate;
}

.heart-burning .heart-raid-field::after,
.heart-under-attack .heart-raid-field::after,
.raid-fire-raid .heart-raid-field::after,
.raid-firestorm .heart-raid-field::after {
  content: "";
  position: absolute;
  left: 50%;
  top: auto;
  bottom: 132px;
  width: 380px;
  height: 170px;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 84%, rgba(255, 82, 31, 0.22), rgba(161, 35, 16, 0.10) 38%, transparent 66%),
    radial-gradient(ellipse at 18% 74%, rgba(255, 128, 46, 0.08), transparent 40%),
    radial-gradient(ellipse at 82% 76%, rgba(255, 128, 46, 0.08), transparent 40%);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: 0.68;
  animation: heart-tree-smolder-glow-v2x4 1.4s ease-in-out infinite alternate;
}

/* Explicitly keep all individual flame sprites hidden. */
.heart-burning .heart-fire,
.heart-under-attack .heart-fire,
.raid-fire-raid .heart-fire,
.raid-firestorm .heart-fire,
.heart-burning .f1,
.heart-burning .f2,
.heart-burning .f3,
.heart-burning .f4,
.heart-under-attack .f1,
.heart-under-attack .f2,
.heart-under-attack .f3,
.heart-under-attack .f4,
.raid-fire-raid .f1,
.raid-fire-raid .f2,
.raid-fire-raid .f3,
.raid-fire-raid .f4,
.raid-firestorm .f1,
.raid-firestorm .f2,
.raid-firestorm .f3,
.raid-firestorm .f4 {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Keep embers but soften them. */
.heart-burning .heart-ember,
.heart-under-attack .heart-ember,
.raid-fire-raid .heart-ember,
.raid-firestorm .heart-ember {
  width: 3px;
  height: 3px;
  box-shadow:
    12px 9px 0 rgba(255, 96, 42, 0.54),
    -14px 16px 0 rgba(255, 215, 106, 0.42),
    24px 22px 0 rgba(255, 96, 42, 0.30),
    -22px 27px 0 rgba(255, 142, 89, 0.24);
  filter: drop-shadow(0 0 4px rgba(255, 196, 78, 0.42));
}

@keyframes heart-tree-smolder-bed-v2x4 {
  0% { opacity: 0.84; transform: translateX(-50%) scaleX(0.98) scaleY(0.98); }
  50% { opacity: 0.94; transform: translateX(-50%) scaleX(1.02) scaleY(1.02); }
  100% { opacity: 0.90; transform: translateX(-50%) scaleX(1.00) scaleY(1.04); }
}
@keyframes heart-tree-smolder-glow-v2x4 {
  0% { opacity: 0.56; transform: translateX(-50%) scale(0.98); }
  100% { opacity: 0.76; transform: translateX(-50%) scale(1.03); }
}

@media (max-width: 780px) {
  .heart-burning .heart-raid-field::before,
  .heart-under-attack .heart-raid-field::before,
  .raid-fire-raid .heart-raid-field::before,
  .raid-firestorm .heart-raid-field::before { bottom: 66px; width: 116px; height: 34px; }
  .heart-burning .heart-raid-field::after,
  .heart-under-attack .heart-raid-field::after,
  .raid-fire-raid .heart-raid-field::after,
  .raid-firestorm .heart-raid-field::after { bottom: 56px; width: 164px; height: 74px; }
}


/* Timberfall v2x.5 — Heart Tree Base Replacement
   Root cause fix: legacy <span class="heart-fire f1..f4"> nodes removed from JS.
   These were the 4 triangle flames still sitting in the trunk area.
   Keep the low smolder bed from v2x.4 and slightly darken the root/trunk base while burning. */
.heart-burning .heart-trunk,
.heart-under-attack .heart-trunk,
.raid-fire-raid .heart-trunk,
.raid-firestorm .heart-trunk {
  background: linear-gradient(90deg, #180d09, #5b351f 43%, #21120c 74%, #0f0906);
  box-shadow: inset -5px 0 0 rgba(0,0,0,0.34), inset 4px 0 0 rgba(255,134,58,0.08), 0 0 10px rgba(255,92,36,0.16);
}
.heart-burning .heart-root,
.heart-under-attack .heart-root,
.raid-fire-raid .heart-root,
.raid-firestorm .heart-root {
  background: #2f1a12;
  box-shadow: 0 6px 0 rgba(0,0,0,0.14), 0 0 10px rgba(255,128,46,0.08);
}
/* Safety: if any stale fire nodes survive cache issues, hide them hard. */
.heart-tree-stage .heart-fire,
.heart-tree-stage .f1,
.heart-tree-stage .f2,
.heart-tree-stage .f3,
.heart-tree-stage .f4 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}


/* Timberfall v2y — subtle audio toggle */
.timberfall-audio-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(169,255,132,0.32);
  background: rgba(8, 18, 11, 0.74);
  color: #dfffd4;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 0 18px rgba(124,255,92,0.08);
}
.timberfall-audio-toggle:hover {
  border-color: rgba(255,215,106,0.55);
  color: #ffe08a;
}
.timberfall-audio-muted .timberfall-audio-toggle {
  border-color: rgba(255,132,90,0.36);
  color: #ffb08a;
}
@media (max-width: 780px) {
  .timberfall-audio-toggle {
    padding: 7px 10px;
    font-size: 10px;
  }
}


/* Timberfall v3.0a — Community Defense Totem UI */
.totem-defense-panel{position:absolute;left:18px;bottom:104px;width:min(435px,calc(100% - 36px));z-index:910;padding:10px;border-radius:16px;border:1px solid rgba(169,255,132,.18);background:linear-gradient(180deg,rgba(7,17,10,.88),rgba(2,6,4,.78)),radial-gradient(circle at 12% 0%,rgba(169,255,132,.10),transparent 42%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 16px 40px rgba(0,0,0,.32);backdrop-filter:blur(5px)}
.totem-panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;text-transform:uppercase}.totem-panel-head span{color:#ffdc78;font-size:10px;font-weight:900;letter-spacing:.16em}.totem-panel-head strong{color:#dfffd4;font-size:12px;letter-spacing:.12em}
.totem-panel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.totem-card{min-width:0;padding:8px;border-radius:13px;border:1px solid rgba(169,255,132,.14);background:rgba(2,8,5,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}.totem-card.is-ready{border-color:rgba(255,220,120,.44);box-shadow:0 0 18px rgba(255,197,87,.10),inset 0 0 0 1px rgba(255,255,255,.035)}.totem-card.is-active{border-color:rgba(125,255,122,.55);box-shadow:0 0 24px rgba(125,255,122,.16),inset 0 0 0 1px rgba(255,255,255,.04)}
.totem-card-top{display:flex;align-items:center;gap:6px;min-height:30px}.totem-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,.06);font-size:14px}.totem-card strong{display:block;color:#f2ffe9;font-size:10px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.totem-card small{display:block;margin-top:2px;color:rgba(225,255,211,.64);font-size:7px;font-weight:900;letter-spacing:.12em}
.totem-energy-track{height:6px;margin:8px 0;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(0,0,0,.22)}.totem-energy-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#65ff7a,#ffe078);box-shadow:0 0 10px rgba(169,255,132,.28);transition:width .35s ease}
.totem-actions{display:grid;grid-template-columns:1fr;gap:4px}.totem-actions button{padding:5px;border-radius:9px;border:1px solid rgba(169,255,132,.18);background:rgba(10,24,13,.76);color:#dfffd4;font:inherit;font-size:8px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}.totem-actions button:hover:not(:disabled){border-color:rgba(255,220,120,.54);color:#ffe078}.totem-actions button:disabled{opacity:.38;cursor:not-allowed}
.totem-pulse-charged{animation:totem-card-charge-pulse .45s ease-out}.totem-pulse-activated{animation:totem-card-activate-pulse .72s ease-out}.totem-world-banner{position:absolute;left:50%;top:19%;transform:translateX(-50%);z-index:980;padding:10px 16px;border-radius:14px;border:1px solid rgba(255,220,120,.46);background:linear-gradient(180deg,rgba(9,18,10,.94),rgba(2,5,3,.86));color:#ffe08a;font-size:15px;font-weight:950;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 0 28px rgba(255,198,70,.18),0 18px 42px rgba(0,0,0,.45);animation:totem-banner-rise 4.1s ease-out forwards;pointer-events:none}.totem-world-effect{position:absolute;inset:0;z-index:760;pointer-events:none;overflow:hidden}
.rain-drop{position:absolute;top:-40px;width:2px;height:18px;border-radius:999px;background:linear-gradient(180deg,rgba(182,229,255,0),rgba(182,229,255,.70));animation:totem-rain-fall 1.2s linear infinite}.rain-drop:nth-child(3n){height:12px;opacity:.64;animation-duration:1.45s}.rain-drop:nth-child(4n){height:22px;opacity:.82;animation-duration:1.08s}.totem-steam{position:absolute;width:96px;height:40px;border-radius:50%;background:radial-gradient(circle,rgba(200,225,211,.22),transparent 70%);filter:blur(6px);animation:totem-steam-drift 3.4s ease-in-out infinite}.steam-a{left:32%;top:54%}.steam-b{left:53%;top:50%;animation-delay:.7s}.steam-c{left:67%;top:57%;animation-delay:1.25s}
.r0{left:4%;animation-delay:.02s}.r1{left:8%;animation-delay:.22s}.r2{left:11%;animation-delay:.5s}.r3{left:15%;animation-delay:.15s}.r4{left:18%;animation-delay:.72s}.r5{left:22%;animation-delay:.32s}.r6{left:26%;animation-delay:.58s}.r7{left:30%;animation-delay:.05s}.r8{left:34%;animation-delay:.86s}.r9{left:38%;animation-delay:.42s}.r10{left:42%;animation-delay:.18s}.r11{left:46%;animation-delay:.62s}.r12{left:50%;animation-delay:.34s}.r13{left:54%;animation-delay:.76s}.r14{left:58%;animation-delay:.12s}.r15{left:62%;animation-delay:.48s}.r16{left:66%;animation-delay:.92s}.r17{left:70%;animation-delay:.24s}.r18{left:74%;animation-delay:.68s}.r19{left:78%;animation-delay:.36s}.r20{left:82%;animation-delay:.82s}.r21{left:86%;animation-delay:.16s}.r22{left:90%;animation-delay:.54s}.r23{left:94%;animation-delay:.74s}.r24{left:6%;animation-delay:.96s}.r25{left:28%;animation-delay:1.05s}.r26{left:44%;animation-delay:1.18s}.r27{left:60%;animation-delay:1.3s}.r28{left:72%;animation-delay:1.1s}.r29{left:88%;animation-delay:1.24s}.r30{left:13%;animation-delay:1.38s}.r31{left:36%;animation-delay:1.45s}.r32{left:57%;animation-delay:1.52s}.r33{left:81%;animation-delay:1.62s}
.root-shield{position:absolute;left:50%;top:48%;width:280px;height:180px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(155,255,132,.42);box-shadow:0 0 30px rgba(125,255,122,.18),inset 0 0 34px rgba(125,255,122,.08);animation:totem-root-shield 2.1s ease-in-out infinite}.root-wave{position:absolute;left:50%;top:57%;width:140px;height:56px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid rgba(125,255,122,.30);animation:totem-root-wave 2.4s ease-out infinite}.wave-b{animation-delay:.85s}.root-spark{position:absolute;width:7px;height:7px;border-radius:2px;background:#a9ff84;box-shadow:0 0 12px rgba(169,255,132,.65);animation:totem-root-spark 1.6s ease-in-out infinite alternate}.s-a{left:44%;top:44%}.s-b{left:54%;top:38%;animation-delay:.45s}.s-c{left:60%;top:55%;animation-delay:.9s}
.wildlife-runner{position:absolute;bottom:26%;width:34px;height:20px;image-rendering:pixelated;filter:drop-shadow(0 4px 3px rgba(0,0,0,.34));animation:totem-wildlife-run 8s linear forwards}.wildlife-runner:before,.wildlife-runner:after{content:"";position:absolute;background:currentColor;box-shadow:inset 0 -4px 0 rgba(0,0,0,.22)}.wildlife-runner:before{left:4px;top:5px;width:22px;height:12px;border-radius:4px}.wildlife-runner:after{left:23px;top:2px;width:8px;height:8px;border-radius:3px}.deer{color:#a77a45;left:-50px;animation-duration:9s}.fox{color:#c56b32;left:-90px;bottom:33%;animation-duration:7.4s;animation-delay:.7s}.boar{color:#6d5b4c;left:-130px;bottom:22%;animation-duration:8.6s;animation-delay:1.25s}.life-particle{position:absolute;width:6px;height:6px;border-radius:2px;background:#a9ff84;opacity:0;box-shadow:0 0 10px rgba(169,255,132,.55);animation:totem-life-float 3.5s ease-in-out infinite}.p-a{left:31%;top:58%;animation-delay:.1s}.p-b{left:47%;top:42%;animation-delay:.65s}.p-c{left:64%;top:55%;animation-delay:1.1s}.p-d{left:73%;top:46%;animation-delay:1.55s}
.ash-pulse{position:absolute;left:50%;top:60%;width:300px;height:92px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(255,220,120,.18),rgba(110,80,45,.13) 52%,transparent 72%);animation:totem-ash-pulse 2.2s ease-in-out infinite}.ash-chip{position:absolute;width:10px;height:7px;border-radius:2px;background:#9b6e42;box-shadow:inset 0 -2px 0 rgba(0,0,0,.28);animation:totem-ash-chip 2.8s ease-in-out infinite}.c-a{left:42%;top:62%}.c-b{left:56%;top:58%;animation-delay:.55s}.c-c{left:67%;top:64%;animation-delay:1.05s}.ash-sweep{position:absolute;left:35%;top:60%;width:180px;height:2px;background:linear-gradient(90deg,transparent,rgba(255,220,120,.58),transparent);animation:totem-ash-sweep 2.4s ease-in-out infinite}.sweep-b{top:66%;animation-delay:.7s}
@keyframes totem-card-charge-pulse{50%{transform:translateY(-2px);border-color:rgba(255,220,120,.58)}}@keyframes totem-card-activate-pulse{40%{transform:scale(1.04);filter:brightness(1.25)}}@keyframes totem-banner-rise{0%{opacity:0;transform:translate(-50%,10px) scale(.96)}14%{opacity:1;transform:translate(-50%,0) scale(1)}84%{opacity:1}100%{opacity:0;transform:translate(-50%,-22px) scale(.98)}}@keyframes totem-rain-fall{to{transform:translateY(760px);opacity:.12}}@keyframes totem-steam-drift{0%{opacity:0;transform:translateY(14px) scale(.7)}35%{opacity:.7}100%{opacity:0;transform:translate(28px,-50px) scale(1.45)}}@keyframes totem-root-shield{50%{transform:translate(-50%,-50%) scale(1.06);opacity:.72}}@keyframes totem-root-wave{from{opacity:.72;transform:translate(-50%,-50%) scale(.6)}to{opacity:0;transform:translate(-50%,-50%) scale(3.6)}}@keyframes totem-root-spark{to{transform:translateY(-12px) scale(1.2);opacity:.56}}@keyframes totem-wildlife-run{from{transform:translateX(0)}to{transform:translateX(115vw)}}@keyframes totem-life-float{0%{opacity:0;transform:translateY(16px)}35%{opacity:.86}100%{opacity:0;transform:translateY(-44px)}}@keyframes totem-ash-pulse{50%{opacity:.88;transform:translate(-50%,-50%) scale(1.08)}}@keyframes totem-ash-chip{50%{transform:translateY(-14px) rotate(8deg);opacity:.65}100%{opacity:0;transform:translateY(-28px) rotate(-6deg)}}@keyframes totem-ash-sweep{0%{opacity:0;transform:translateX(-70px)}35%{opacity:.78}100%{opacity:0;transform:translateX(140px)}}
@media (max-width:900px){.totem-defense-panel{left:10px;right:10px;bottom:88px;width:auto}.totem-panel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* Timberfall v3.0a1 — Compact Totem Panel Polish
   Scope: CSS-only UI polish for v3.0a Community Defense.
   Goal: keep Totems functional but reduce stream obstruction and debug-box feeling. */
.totem-defense-panel {
  left: 18px !important;
  bottom: 92px !important;
  width: 365px !important;
  padding: 7px 8px !important;
  border-radius: 13px !important;
  background:
    linear-gradient(180deg, rgba(4, 12, 7, 0.78), rgba(1, 4, 3, 0.66)),
    radial-gradient(circle at 10% 0%, rgba(169,255,132,0.07), transparent 45%) !important;
  border-color: rgba(169,255,132,0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 10px 28px rgba(0,0,0,0.24) !important;
  backdrop-filter: blur(4px) !important;
}
.totem-panel-head {
  margin-bottom: 5px !important;
}
.totem-panel-head span {
  font-size: 8px !important;
  letter-spacing: 0.15em !important;
}
.totem-panel-head strong {
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  opacity: 0.88;
}
.totem-panel-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 5px !important;
}
.totem-card {
  padding: 6px !important;
  border-radius: 10px !important;
  background: rgba(2, 8, 5, 0.62) !important;
}
.totem-card-top {
  gap: 5px !important;
  min-height: 23px !important;
}
.totem-icon {
  width: 18px !important;
  height: 18px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
}
.totem-card strong {
  font-size: 8px !important;
  line-height: 1 !important;
}
.totem-card small {
  margin-top: 1px !important;
  font-size: 6px !important;
  letter-spacing: 0.08em !important;
  opacity: 0.72;
}
.totem-energy-track {
  height: 4px !important;
  margin: 5px 0 !important;
}
.totem-actions {
  grid-template-columns: 1fr 1fr !important;
  gap: 3px !important;
}
.totem-actions button {
  padding: 4px 3px !important;
  border-radius: 7px !important;
  font-size: 6px !important;
  letter-spacing: 0.04em !important;
}
.totem-actions button[data-totem-charge] {
  color: #bfffb7 !important;
}
.totem-actions button[data-totem-activate] {
  color: #ffe08a !important;
}
.totem-card.is-ready {
  box-shadow: 0 0 12px rgba(255, 197, 87, 0.10), inset 0 0 0 1px rgba(255,255,255,0.03) !important;
}
.totem-card.is-active {
  box-shadow: 0 0 16px rgba(125, 255, 122, 0.14), inset 0 0 0 1px rgba(255,255,255,0.035) !important;
}
.totem-world-banner {
  top: 17% !important;
  padding: 8px 13px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
}

/* Keep effect layers strong enough to read, but avoid covering the whole scene. */
.root-shield {
  width: 220px !important;
  height: 142px !important;
  opacity: 0.72;
}
.root-wave {
  width: 116px !important;
  height: 44px !important;
}
.ash-pulse {
  width: 240px !important;
  height: 74px !important;
}
.totem-steam {
  width: 76px !important;
  height: 32px !important;
}
.wildlife-runner {
  transform: scale(0.86);
  transform-origin: left bottom;
}

/* Small screens: move the panel into a thin two-row overlay. */
@media (max-width: 900px) {
  .totem-defense-panel {
    left: 10px !important;
    right: 10px !important;
    bottom: 82px !important;
    width: auto !important;
  }
  .totem-panel-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}


/* Timberfall v3.0a2 — Corner Anchor Totem Panel
   Goal: anchor Community Defense panel cleanly into the lower-left corner of the world frame. */
.totem-defense-panel {
  left: 12px !important;
  bottom: 12px !important;
  width: 338px !important;
  padding: 6px 7px !important;
  border-radius: 12px !important;
  background:
    linear-gradient(180deg, rgba(4, 12, 7, 0.74), rgba(1, 4, 3, 0.60)),
    radial-gradient(circle at 12% 0%, rgba(169,255,132,0.06), transparent 44%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 8px 20px rgba(0,0,0,0.20) !important;
}
.totem-panel-head {
  margin-bottom: 4px !important;
}
.totem-panel-head span {
  font-size: 8px !important;
}
.totem-panel-head strong {
  font-size: 9px !important;
}
.totem-panel-grid {
  gap: 4px !important;
}
.totem-card {
  padding: 5px !important;
}
.totem-card-top {
  min-height: 21px !important;
}
.totem-icon {
  width: 17px !important;
  height: 17px !important;
  font-size: 10px !important;
}
.totem-card strong {
  font-size: 7px !important;
}
.totem-card small {
  font-size: 5px !important;
}
.totem-energy-track {
  margin: 4px 0 !important;
  height: 4px !important;
}
.totem-actions {
  gap: 2px !important;
}
.totem-actions button {
  padding: 3px 2px !important;
  font-size: 5px !important;
  border-radius: 6px !important;
}
@media (max-width: 900px) {
  .totem-defense-panel {
    left: 8px !important;
    bottom: 8px !important;
    width: min(320px, calc(100% - 16px)) !important;
  }
}


/* Timberfall v3.0b — Totem Anti-Spam Preview Polish */
.totem-card.is-cooling,
.totem-card.is-recovering {
  border-color: rgba(255, 176, 96, 0.22) !important;
  filter: saturate(0.88);
}
.totem-note {
  min-height: 8px;
  margin: -1px 0 3px;
  color: rgba(225,255,211,0.48);
  font-size: 5px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.totem-live-preview-mode .totem-panel-head span::after {
  content: " preview";
  color: rgba(255,220,120,0.72);
}
.totem-debug-mode .totem-panel-head span::after {
  content: " debug";
  color: rgba(255,128,96,0.82);
}
.totem-pulse-blocked {
  animation: totem-card-blocked-pulse 0.38s ease-out;
}
.totem-card.is-recovering .totem-energy-track span {
  background: linear-gradient(90deg, rgba(255,128,96,0.55), rgba(255,220,120,0.72)) !important;
}
.totem-card.is-cooling .totem-actions button[data-totem-charge],
.totem-card.is-recovering .totem-actions button {
  border-color: rgba(255,128,96,0.22) !important;
  color: rgba(255,180,140,0.58) !important;
}
@keyframes totem-card-blocked-pulse {
  0% { transform: translateX(0); border-color: rgba(255, 96, 64, 0.26); }
  35% { transform: translateX(-2px); border-color: rgba(255, 96, 64, 0.58); }
  70% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}


/* Timberfall v3.0c — Auto-Trigger Totem UI Polish */
.totem-auto-trigger-mode .totem-panel-head strong::after {
  content: " auto";
  color: rgba(255,220,120,0.78);
}
.totem-actions-auto button[data-totem-activate] {
  color: rgba(255, 220, 120, 0.48) !important;
  border-color: rgba(255, 220, 120, 0.16) !important;
}
.totem-card.is-ready .totem-note {
  color: rgba(255,220,120,0.88);
}
.totem-card.is-ready .totem-energy-track span {
  animation: totem-auto-ready-pulse 0.7s ease-in-out infinite alternate;
}
@keyframes totem-auto-ready-pulse {
  from { filter: brightness(1); box-shadow: 0 0 10px rgba(169,255,132,0.25); }
  to { filter: brightness(1.35); box-shadow: 0 0 15px rgba(255,220,120,0.42); }
}


/* Timberfall v3.1a — Community Totem Backend Foundation UI */
.totem-backend-mode .totem-panel-head span::before {
  content: "GLOBAL ";
  color: rgba(169,255,132,0.72);
}
.totem-backend-online .totem-panel-head strong::after {
  content: " server";
  color: rgba(169,255,132,0.74);
}
.totem-backend-offline .totem-panel-head strong::after {
  content: " local";
  color: rgba(255,176,96,0.74);
}
.totem-backend-online .totem-card {
  box-shadow: inset 0 0 0 1px rgba(169,255,132,0.05), 0 10px 24px rgba(0,0,0,0.18);
}
.totem-backend-online .totem-note {
  color: rgba(202,255,176,0.52);
}


/* Timberfall v3.1b — server-trigger visual feedback */
.totem-card.totem-pulse-activated {
  box-shadow: 0 0 0 1px rgba(255,220,120,0.42), 0 0 18px rgba(169,255,132,0.30) !important;
}


/* Timberfall v3.2d — Stable Cinematic Totem Events */
.totem-cinematic-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 42;
  image-rendering: pixelated;
  contain: layout paint style;
}
.totem-cinematic-event {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: cinematic-event-life 3.6s ease-out forwards;
  contain: layout paint style;
}
.totem-cinematic-event *,
.totem-cinematic-event i {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
}
.totem-cinematic-event i {
  display: block;
  left: var(--x);
  top: var(--y);
  width: calc(3px * var(--s));
  height: calc(3px * var(--s));
}

/* Water: short extinguish pulse, no huge screen stripes */
.cinematic-water-burst {
  left: 48%;
  top: 58%;
  width: 120px;
  height: 78px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(126,225,255,.38), rgba(70,170,255,.14) 55%, transparent 74%);
  animation: cinematic-water-burst 1.05s steps(5) forwards;
}
.cinematic-water-ring {
  left: 48%;
  top: 59%;
  width: 14px;
  height: 8px;
  border: 2px solid rgba(130,225,255,.78);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: cinematic-ring-wide 2.1s ease-out forwards;
}
.cinematic-water-mist {
  left: 28%;
  right: 25%;
  top: 44%;
  height: 28%;
  background:
    radial-gradient(circle at 20% 65%, rgba(226,248,255,.20), transparent 24%),
    radial-gradient(circle at 55% 52%, rgba(226,248,255,.18), transparent 26%),
    radial-gradient(circle at 84% 65%, rgba(226,248,255,.14), transparent 22%);
  filter: blur(3px);
  animation: cinematic-mist 2.8s ease-out forwards;
}
.cinematic-water-dim {
  left: 18%;
  right: 18%;
  bottom: 15%;
  height: 38%;
  background: radial-gradient(ellipse at center, rgba(70,160,255,.12), transparent 68%);
  animation: cinematic-soft-fade 2.6s ease-out forwards;
}
.cinematic-water-drop {
  background: rgba(142,232,255,.86);
  box-shadow: 0 0 5px rgba(142,232,255,.38);
  animation: cinematic-water-drop 1.8s ease-out var(--d) forwards;
}

/* Root: direct Heart Tree defense pulse */
.cinematic-root-core {
  left: 50%;
  top: 58%;
  width: 90px;
  height: 120px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(154,255,118,.42), rgba(72,190,78,.14) 48%, transparent 74%);
  animation: cinematic-root-core 1s steps(5) 4;
}
.cinematic-root-ring {
  left: 50%;
  top: 60%;
  width: 12px;
  height: 8px;
  border: 2px solid rgba(151,255,116,.78);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: cinematic-ring-wide 2.2s ease-out forwards;
}
.cinematic-root-line {
  left: 50%;
  top: 61%;
  width: 5px;
  height: 94px;
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(142,255,104,.86), rgba(72,130,42,.26) 58%, transparent);
  box-shadow: 0 0 5px rgba(120,255,100,.24);
  animation: cinematic-root-grow 1.9s steps(6) forwards;
}
.root-line-a { transform: rotate(46deg); }
.root-line-b { transform: rotate(118deg); animation-delay: .08s; }
.root-line-c { transform: rotate(242deg); animation-delay: .16s; }
.root-line-d { transform: rotate(312deg); animation-delay: .24s; }
.cinematic-root-bit {
  background: rgba(168,255,125,.82);
  box-shadow: 0 0 5px rgba(120,255,100,.36);
  animation: cinematic-rise-bit 2.2s ease-out var(--d) forwards;
}

/* Wildlife: no running DOM animals; stable nature response */
.cinematic-wildlife-aura {
  left: 20%;
  right: 20%;
  top: 42%;
  height: 34%;
  background:
    radial-gradient(circle at 40% 58%, rgba(130,255,136,.18), transparent 35%),
    radial-gradient(circle at 62% 55%, rgba(210,255,142,.11), transparent 30%);
  animation: cinematic-wild-aura 2.8s ease-out forwards;
}
.cinematic-wildlife-bird {
  left: 35%;
  top: 24%;
  width: 92px;
  height: 26px;
  opacity: .78;
  background:
    linear-gradient(90deg, transparent 0 7%, rgba(210,255,190,.80) 8% 13%, transparent 14% 22%, rgba(210,255,190,.80) 23% 28%, transparent 29% 43%, rgba(210,255,190,.74) 44% 49%, transparent 50% 58%, rgba(210,255,190,.74) 59% 64%, transparent 65% 100%);
  filter: drop-shadow(0 0 4px rgba(150,255,130,.22));
  animation: cinematic-birds 2.8s ease-out forwards;
}
.cinematic-wildlife-ground {
  left: 26%;
  right: 24%;
  bottom: 14%;
  height: 18%;
  background: radial-gradient(ellipse at center, rgba(128,255,118,.16), transparent 68%);
  animation: cinematic-soft-fade 2.9s ease-out forwards;
}
.cinematic-firefly {
  background: rgba(214,255,126,.92);
  box-shadow: 0 0 6px rgba(214,255,126,.56);
  animation: cinematic-firefly 2.6s ease-in-out var(--d) forwards;
}

/* Ashbreaker: clean recovery wave */
.cinematic-ash-flash {
  inset: 0;
  background: rgba(255,218,120,.10);
  animation: cinematic-flash 0.9s steps(4) forwards;
}
.cinematic-ash-wave {
  left: 50%;
  top: 62%;
  width: 14px;
  height: 8px;
  border: 2px solid rgba(255,220,125,.78);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: cinematic-ash-ring 2.1s ease-out forwards;
}
.cinematic-ash-ground {
  left: 20%;
  right: 20%;
  bottom: 9%;
  height: 22%;
  background: radial-gradient(ellipse at center, rgba(255,218,118,.24), transparent 70%);
  animation: cinematic-ground-heal 2.8s steps(6) forwards;
}
.cinematic-ash-gold {
  background: rgba(255,225,126,.94);
  box-shadow: 0 0 6px rgba(255,210,90,.50);
  animation: cinematic-rise-bit 2.35s ease-out var(--d) forwards;
}

/* Keyframes */
@keyframes cinematic-event-life { 0%{opacity:0} 12%{opacity:1} 82%{opacity:1} 100%{opacity:0} }
@keyframes cinematic-flash { 0%{opacity:.95} 100%{opacity:0} }
@keyframes cinematic-soft-fade { 0%{opacity:0} 20%{opacity:1} 100%{opacity:0} }
@keyframes cinematic-water-burst { 0%{opacity:.15; transform:translate(-50%,-50%) scale(.75)} 55%{opacity:.9} 100%{opacity:0; transform:translate(-50%,-50%) scale(1.12)} }
@keyframes cinematic-ring-wide { 0%{width:14px;height:8px;opacity:.95} 100%{width:360px;height:170px;opacity:0} }
@keyframes cinematic-mist { 0%{opacity:0; transform:translateY(10px)} 25%{opacity:.84} 100%{opacity:0; transform:translateY(-24px)} }
@keyframes cinematic-water-drop { 0%{transform:translateY(18px) scale(.6); opacity:0} 18%{opacity:1} 100%{transform:translateY(-38px) scale(1.15); opacity:0} }
@keyframes cinematic-root-core { 0%{opacity:.32; transform:translate(-50%,-50%) scale(.82)} 100%{opacity:.86; transform:translate(-50%,-50%) scale(1.08)} }
@keyframes cinematic-root-grow { 0%{height:0;opacity:0} 18%{opacity:.9} 100%{height:110px;opacity:0} }
@keyframes cinematic-rise-bit { 0%{transform:translateY(10px) scale(.6); opacity:0} 20%{opacity:1} 100%{transform:translateY(-42px) scale(1.25); opacity:0} }
@keyframes cinematic-wild-aura { 0%{opacity:0; transform:scale(.86)} 22%{opacity:.92} 100%{opacity:0; transform:scale(1.08)} }
@keyframes cinematic-birds { 0%{transform:translate3d(-40px, 12px, 0);opacity:0} 20%{opacity:.85} 100%{transform:translate3d(125px, -16px, 0);opacity:0} }
@keyframes cinematic-firefly { 0%{transform:translateY(12px) scale(.5); opacity:0} 20%{opacity:1} 100%{transform:translateY(-28px) translateX(12px) scale(1.15); opacity:0} }
@keyframes cinematic-ash-ring { 0%{width:12px;height:8px;opacity:.96} 100%{width:410px;height:190px;opacity:0} }
@keyframes cinematic-ground-heal { 0%{opacity:0;filter:brightness(1)} 24%{opacity:1;filter:brightness(1.25)} 100%{opacity:0;filter:brightness(1)} }


/* Timberfall v3.2e — Cinematic Totem Event Polish */

.cinematic-polish-water,
.cinematic-polish-root,
.cinematic-polish-wildlife,
.cinematic-polish-ashbreaker {
  animation-duration: 4.3s !important;
}

/* shared stronger but contained pulse */
.cinematic-water-screen-pulse,
.cinematic-root-screen-pulse {
  inset: 0;
  opacity: 0;
  animation: cinematic-polish-screen-pulse 1.05s steps(4) forwards;
}

/* WATER polish */
.cinematic-polish-water .cinematic-water-screen-pulse {
  background: radial-gradient(circle at 49% 58%, rgba(118,218,255,.18), transparent 38%);
}
.cinematic-polish-water .cinematic-water-burst {
  width: 168px !important;
  height: 104px !important;
  background: radial-gradient(ellipse at center, rgba(145,235,255,.48), rgba(68,170,255,.20) 52%, transparent 76%) !important;
  animation: cinematic-polish-water-burst 1.25s steps(5) forwards !important;
}
.cinematic-water-core {
  left: 48%;
  top: 58%;
  width: 58px;
  height: 38px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(225,250,255,.56), rgba(92,190,255,.22) 55%, transparent 72%);
  animation: cinematic-polish-core-pop 1.15s steps(5) forwards;
}
.cinematic-polish-water .water-ring-main {
  animation: cinematic-polish-water-ring 2.45s ease-out forwards !important;
}
.cinematic-polish-water .water-ring-second {
  animation: cinematic-polish-water-ring 2.75s ease-out .35s forwards !important;
  opacity: .72;
}
.cinematic-water-steam-bit {
  background: rgba(232,248,255,.26);
  border-radius: 50%;
  width: calc(6px * var(--s)) !important;
  height: calc(6px * var(--s)) !important;
  animation: cinematic-polish-steam 2.8s ease-out var(--d) forwards;
}

/* ROOT polish */
.cinematic-polish-root .cinematic-root-screen-pulse {
  background: radial-gradient(circle at 50% 58%, rgba(142,255,116,.18), transparent 38%);
}
.cinematic-polish-root .cinematic-root-core {
  width: 118px !important;
  height: 148px !important;
  background: radial-gradient(circle, rgba(164,255,122,.52), rgba(74,194,78,.20) 48%, transparent 74%) !important;
  animation: cinematic-polish-root-core 1.08s steps(5) 4 !important;
}
.cinematic-root-halo {
  left: 50%;
  top: 58%;
  width: 160px;
  height: 142px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(146,255,112,.34);
  box-shadow: 0 0 18px rgba(110,255,90,.18);
  animation: cinematic-polish-halo 2.2s ease-out forwards;
}
.cinematic-polish-root .root-ring-main {
  animation: cinematic-polish-root-ring 2.55s ease-out forwards !important;
}
.cinematic-polish-root .root-ring-second {
  animation: cinematic-polish-root-ring 2.9s ease-out .42s forwards !important;
  opacity: .7;
}
.cinematic-polish-root .cinematic-root-line {
  width: 6px !important;
  height: 112px !important;
  background: linear-gradient(180deg, rgba(154,255,106,.96), rgba(74,136,42,.34) 62%, transparent) !important;
}
.root-line-e {
  transform: rotate(78deg);
  animation-delay: .12s;
}
.root-line-f {
  transform: rotate(282deg);
  animation-delay: .20s;
}

/* WILDLIFE polish: no running animals, more atmosphere */
.cinematic-polish-wildlife .cinematic-wildlife-aura {
  left: 16% !important;
  right: 16% !important;
  top: 38% !important;
  height: 42% !important;
  background:
    radial-gradient(circle at 38% 58%, rgba(128,255,136,.24), transparent 34%),
    radial-gradient(circle at 66% 55%, rgba(215,255,142,.16), transparent 32%),
    linear-gradient(90deg, transparent, rgba(132,255,132,.10), transparent) !important;
  animation: cinematic-polish-wild-aura 3.35s ease-out forwards !important;
}
.cinematic-wildlife-pulse {
  left: 50%;
  top: 61%;
  width: 12px;
  height: 8px;
  border: 2px solid rgba(168,255,128,.56);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: cinematic-polish-wild-ring 2.55s ease-out forwards;
}
.cinematic-polish-wildlife .cinematic-wildlife-ground {
  left: 20% !important;
  right: 20% !important;
  bottom: 12% !important;
  height: 24% !important;
  background: radial-gradient(ellipse at center, rgba(130,255,118,.24), transparent 70%) !important;
}
.cinematic-polish-wildlife .cinematic-wildlife-bird {
  width: 126px !important;
  height: 34px !important;
  opacity: .9 !important;
}
.bird-pack-a {
  left: 25% !important;
  top: 20% !important;
  animation: cinematic-polish-birds-a 3.35s ease-out forwards !important;
}
.bird-pack-b {
  left: 61% !important;
  top: 27% !important;
  transform: scaleX(-1);
  animation: cinematic-polish-birds-b 3.55s ease-out .18s forwards !important;
}
.cinematic-leaf-bit {
  color: rgba(146,255,108,.78);
  font-size: calc(7px * var(--s));
  background: transparent !important;
  width: auto !important;
  height: auto !important;
  animation: cinematic-polish-leaf 3.2s ease-out var(--d) forwards;
}
.cinematic-leaf-bit::before {
  content: "◆";
}

/* ASHBREAKER polish */
.cinematic-polish-ashbreaker .cinematic-ash-flash {
  background: rgba(255,218,120,.16) !important;
  animation: cinematic-polish-ash-flash 1.05s steps(5) forwards !important;
}
.cinematic-ash-core {
  left: 50%;
  top: 61%;
  width: 96px;
  height: 64px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(255,226,130,.38), rgba(255,190,72,.14) 56%, transparent 75%);
  animation: cinematic-polish-core-pop 1.2s steps(5) forwards;
}
.cinematic-polish-ashbreaker .ash-wave-main {
  animation: cinematic-polish-ash-ring 2.55s ease-out forwards !important;
}
.cinematic-polish-ashbreaker .ash-wave-second {
  animation: cinematic-polish-ash-ring 2.85s ease-out .42s forwards !important;
  opacity: .70;
}
.cinematic-ash-sweep {
  left: 22%;
  right: 22%;
  top: 57%;
  height: 13%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,224,128,.46), transparent);
  animation: cinematic-polish-clean-sweep 2.2s ease-out forwards;
}
.cinematic-ash-clean-bit {
  background: rgba(255,235,154,.86);
  box-shadow: 0 0 6px rgba(255,220,120,.42);
  animation: cinematic-polish-clean-bit 2.7s ease-out var(--d) forwards;
}

/* keyframes v3.2e */
@keyframes cinematic-polish-screen-pulse {
  0% { opacity: 0; }
  22% { opacity: .9; }
  100% { opacity: 0; }
}
@keyframes cinematic-polish-water-burst {
  0% { opacity: .18; transform: translate(-50%, -50%) scale(.72); }
  50% { opacity: .94; transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.22); }
}
@keyframes cinematic-polish-core-pop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  24% { opacity: .92; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}
@keyframes cinematic-polish-water-ring {
  0% { width: 14px; height: 8px; opacity: .96; }
  100% { width: 430px; height: 205px; opacity: 0; }
}
@keyframes cinematic-polish-steam {
  0% { opacity: 0; transform: translateY(12px) scale(.45); }
  20% { opacity: .72; }
  100% { opacity: 0; transform: translateY(-52px) scale(1.45); }
}
@keyframes cinematic-polish-root-core {
  0% { opacity: .28; transform: translate(-50%, -50%) scale(.78); }
  100% { opacity: .92; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes cinematic-polish-halo {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.72); }
  18% { opacity: .86; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.28); }
}
@keyframes cinematic-polish-root-ring {
  0% { width: 12px; height: 8px; opacity: .96; }
  100% { width: 480px; height: 230px; opacity: 0; }
}
@keyframes cinematic-polish-wild-aura {
  0% { opacity: 0; transform: scale(.78); }
  22% { opacity: .95; }
  100% { opacity: 0; transform: scale(1.16); }
}
@keyframes cinematic-polish-wild-ring {
  0% { width: 12px; height: 8px; opacity: .9; }
  100% { width: 390px; height: 180px; opacity: 0; }
}
@keyframes cinematic-polish-birds-a {
  0% { transform: translate3d(-44px, 14px, 0); opacity: 0; }
  18% { opacity: .92; }
  100% { transform: translate3d(125px, -22px, 0); opacity: 0; }
}
@keyframes cinematic-polish-birds-b {
  0% { transform: translate3d(50px, 12px, 0) scaleX(-1); opacity: 0; }
  18% { opacity: .72; }
  100% { transform: translate3d(-116px, -18px, 0) scaleX(-1); opacity: 0; }
}
@keyframes cinematic-polish-leaf {
  0% { opacity: 0; transform: translateY(-8px) rotate(0deg); }
  18% { opacity: .78; }
  100% { opacity: 0; transform: translateY(58px) rotate(170deg); }
}
@keyframes cinematic-polish-ash-flash {
  0% { opacity: .88; }
  100% { opacity: 0; }
}
@keyframes cinematic-polish-ash-ring {
  0% { width: 12px; height: 8px; opacity: .96; }
  100% { width: 460px; height: 215px; opacity: 0; }
}
@keyframes cinematic-polish-clean-sweep {
  0% { opacity: 0; transform: scaleX(.35); }
  24% { opacity: .9; }
  100% { opacity: 0; transform: scaleX(1.12); }
}
@keyframes cinematic-polish-clean-bit {
  0% { opacity: 0; transform: translateY(12px) scale(.55); }
  18% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-46px) scale(1.2); }
}


/* Timberfall v3.3a — Forest Power / Holder Balance Foundation */
.forest-power-panel {
  position: absolute;
  left: 10px;
  bottom: 118px;
  width: 205px;
  z-index: 55;
  padding: 7px;
  border: 1px solid rgba(169,255,132,0.22);
  border-radius: 10px;
  background: rgba(7, 18, 10, 0.74);
  color: rgba(232,255,218,0.92);
  font-size: 8px;
  line-height: 1.15;
  box-shadow: 0 0 18px rgba(0,0,0,0.34);
  backdrop-filter: blur(3px);
}
.forest-power-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 5px;
}
.forest-power-head strong {
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.forest-power-head span {
  color: rgba(220,255,190,0.52);
  font-size: 6px;
  white-space: nowrap;
}
.forest-power-body {
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 4px;
}
.forest-power-input {
  min-width: 0;
  height: 20px;
  border: 1px solid rgba(169,255,132,0.20);
  border-radius: 6px;
  background: rgba(0,0,0,0.34);
  color: rgba(238,255,226,0.92);
  font-size: 7px;
  padding: 0 6px;
  outline: none;
}
.forest-power-input:focus {
  border-color: rgba(169,255,132,0.48);
  box-shadow: 0 0 0 1px rgba(169,255,132,0.12);
}
.forest-power-check {
  height: 20px;
  border: 1px solid rgba(169,255,132,0.26);
  border-radius: 6px;
  background: rgba(42,96,38,0.38);
  color: rgba(236,255,224,0.92);
  font-size: 7px;
  font-weight: 800;
  cursor: pointer;
}
.forest-power-check:hover {
  background: rgba(54,126,48,0.46);
}
.forest-power-result {
  margin-top: 5px;
  display: grid;
  gap: 1px;
  padding: 5px;
  border-radius: 7px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);
}
.forest-power-result b {
  color: rgba(178,255,132,0.95);
  font-size: 8px;
  letter-spacing: 0.03em;
}
.forest-power-result span {
  color: rgba(225,255,211,0.62);
  font-size: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forest-power-panel.has-power {
  border-color: rgba(169,255,132,0.40);
  box-shadow: 0 0 18px rgba(76,255,82,0.12), 0 0 18px rgba(0,0,0,0.34);
}
.forest-power-panel.has-error {
  border-color: rgba(255,190,94,0.30);
}
.forest-power-panel.is-loading .forest-power-result b {
  color: rgba(255,220,130,0.92);
}
@media (max-width: 760px) {
  .forest-power-panel {
    left: 8px;
    bottom: 106px;
    width: 190px;
    transform: scale(0.92);
    transform-origin: left bottom;
  }
}


/* Timberfall v3.3b — Forest Power weighted contribution polish */
.forest-power-panel {
  width: 230px !important;
  bottom: 124px !important;
}
.forest-power-body {
  grid-template-columns: 1fr 50px !important;
}
.forest-power-input {
  font-size: 8px !important;
}
.forest-power-result b::after {
  content: " active";
  color: rgba(255,220,120,0.68);
  font-size: 6px;
  margin-left: 4px;
}
.forest-power-result span {
  font-size: 7px !important;
}
.totem-card .totem-note::after {
  content: "";
}