/* tower_town_v1 · town live layer (see town_live.js)
 * World Hunt = event RAIL sticker (storm-cloud golem) + full-screen strike view · Adventures road walkers.
 * The storm cloud over the town is the one allowed event on the painted map (Brandon 2026-09-30 exception to the TOWN_MAP.md lock). */

/* ---- Adventures road: tiny heroes walk from the plaza road over the bridge and out of town ---- */
.adv-walkers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.adv-walker {
  position: absolute; left: 39%; top: 66%; width: 12px; height: 18px; margin: -18px 0 0 -6px; opacity: 0; transform: scale(1.3); transform-origin: 50% 100%;
  animation: advWalk 12.4s linear infinite;
}
.adv-walker i { display: block; animation: advBob .42s ease-in-out infinite; transform-origin: 50% 100%; }
.adv-walker svg { display: block; transform: scaleX(-1); } /* facing left, down the road */
@keyframes advWalk {
  0%   { left: 38.5%; top: 64.5%; opacity: 0; }
  6%   { opacity: 1; }
  30%  { left: 33.6%; top: 75.8%; }
  58%  { left: 23.0%; top: 81.2%; }
  80%  { left: 19.6%; top: 90%; opacity: 1; }
  92%  { left: 17.6%; top: 97%; opacity: 0; }
  100% { left: 17.6%; top: 97%; opacity: 0; }
}
@keyframes advBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-1.5px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) {
  .adv-walker { animation: none; opacity: 1; }
  .adv-walker:nth-child(1) { left: 30%; top: 77%; } .adv-walker:nth-child(2) { left: 26%; top: 79.5%; }
  .adv-walker:nth-child(n+3) { display: none; }
  .boss-storm .bs-bolt { animation: none; }
}

/* small painted-style signpost so the road reads as a place (non-interactive; the hotspot is on the bridge) */
.adv-sign {
  position: absolute; left: 31.2%; top: 71.2%; transform: translate(-50%, -100%); z-index: 2; pointer-events: none;
  padding: 2px 8px 3px 7px; font: 700 10.5px/1.1 Georgia, serif; color: #fbe7bf; white-space: nowrap;
  background: linear-gradient(180deg, #7a4e2c, #4a2c16); border: 1.5px solid #d9b25c; border-radius: 3px 10px 10px 3px;
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%); padding-right: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,.5); opacity: .92;
}
.adv-sign::after { content: ""; position: absolute; left: 10px; top: 100%; width: 3px; height: 9px; background: #4a2c16; }

/* ---- World Hunt storm cloud over the town: the ONE allowed event on the painted map (Brandon 2026-09-30, TOWN_MAP.md) ---- */
/* ---- storm cloud with the Fire Demon ---- */
.boss-storm {
  position: absolute; z-index: 4; left: 84%; top: 17.5%;
  width: 180px; height: 110px; transform: translate(-50%, -50%);
  padding: 0; border: 0; background: none; cursor: pointer; overflow: visible;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.5));
}
.boss-storm .bs-cloud {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle at 42% 34%, #85828f 0%, #55525f 32%, #2f2c38 62%, #1b1922 100%);
  box-shadow: inset 0 -10px 16px rgba(0,0,0,.5), inset 0 6px 10px rgba(255,255,255,.08);
  filter: blur(1.4px);
}
/* dark storm haze behind everything */
.boss-storm::before { content: ""; position: absolute; left: -14%; top: 4%; width: 128%; height: 100%; z-index: 0; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 55%, rgba(20,18,28,.55) 0%, rgba(20,18,28,.3) 45%, transparent 70%); pointer-events: none; }
/* back puffs (behind the demon) */
.boss-storm .c4 { left: 30%; top: 14%; width: 40%; height: 52%; z-index: 0; }
.boss-storm .c4::before, .boss-storm .c4::after { content: ""; position: absolute; border-radius: 50%; background: inherit; box-shadow: inherit; }
.boss-storm .c4::before { left: -48%; top: 30%; width: 70%; height: 80%; }
.boss-storm .c4::after { left: 78%; top: 24%; width: 72%; height: 84%; }
/* front puffs (in front of the demon's legs) */
.boss-storm .c1 { left: 0; top: 50%; width: 36%; height: 42%; z-index: 2; }
.boss-storm .c2 { left: 64%; top: 46%; width: 36%; height: 46%; z-index: 2; }
.boss-storm .c3 { left: 12%; top: 60%; width: 76%; height: 38%; z-index: 2; border-radius: 50% 50% 46% 46%;
  background: radial-gradient(ellipse at 50% 30%, #6a6776 0%, #3d3a48 45%, #1d1b24 100%); }
.boss-storm .c3::before, .boss-storm .c3::after { content: ""; position: absolute; border-radius: 50%; background: inherit; }
.boss-storm .c3::before { left: 14%; top: -34%; width: 36%; height: 80%; }
.boss-storm .c3::after { left: 50%; top: -28%; width: 34%; height: 74%; }
.boss-storm .bs-golem {
  position: absolute; z-index: 1; left: 25%; top: -30%; width: 50%; height: 100%;
  background: url("assets/world_hunt/_saved/battle_fire_demon.png") 56% 8% / 320% auto no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 50% 54% at 50% 44%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 54% at 50% 44%, #000 58%, transparent 100%);
  filter: saturate(.85) brightness(.8) contrast(1.15) drop-shadow(0 0 6px rgba(255,90,30,.55));
  transition: filter .4s, transform .4s;
}
.boss-storm .bs-bolt {
  position: absolute; z-index: 3; left: 62%; top: 74%; width: 16px; height: 34px;
  fill: #ffe98a; filter: drop-shadow(0 0 6px #fff3b0); opacity: 0;
  animation: bsFlash 5.5s infinite;
}
.boss-storm .bs-rain {
  position: absolute; z-index: 1; left: 14%; right: 14%; top: 82%; height: 26px; opacity: .45;
  background: repeating-linear-gradient(105deg, rgba(190,200,220,.7) 0 1px, transparent 1px 7px);
  -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent);
}
@keyframes bsFlash { 0%, 86%, 100% { opacity: 0; } 88% { opacity: 1; } 90% { opacity: .2; } 92% { opacity: 1; } }
.boss-storm.live .bs-golem { filter: saturate(1.15) brightness(1) contrast(1.1); transform: translateY(-4px); }
.boss-storm.live .bs-bolt { animation-duration: 2.6s; }
.boss-storm.live .bs-cloud { background: radial-gradient(circle at 40% 35%, #7a5a60 0%, #43303a 45%, #1d1419 80%); }
.boss-storm:hover .bs-golem, .boss-storm:focus-visible .bs-golem { filter: saturate(1.1) brightness(.95); }
.boss-storm:focus-visible { outline: 2px solid #f5c542; outline-offset: 4px; border-radius: 30px; }
/* countdown plaque sits under the cloud (.evt-cd from events.css, camp18 badge style) */
.boss-storm .evt-cd { top: calc(100% - 4px); z-index: 5; font-size: 11px; min-width: 70px; }
.boss-storm .evt-cd small { font-size: 9px; }
.boss-storm .evt-cd::before { content: "Fire Demon"; display: block; font-size: 8.5px; letter-spacing: .04em; color: #ffd9a0; }

/* phones: the sky is under the HUD, so the storm hangs over the open grass behind the training yard (visible at load, no hotspot under it) */
@media (orientation: portrait) and (max-width: 699px) {
  .boss-storm { left: 47%; top: 19.5%; /* night2: clears the Training + Healers pins */ width: 100px; height: 62px; }
  .boss-storm .bs-golem { top: -16%; }
  .boss-storm .evt-cd { font-size: 9.5px; min-width: 60px; }
}
.boss-storm .bs-fight { display: none; position: absolute; left: 50%; top: -4px; transform: translateX(-50%); z-index: 6; white-space: nowrap;
  padding: 2px 8px 3px; border-radius: 8px; border: 1.5px solid #ffe39a; background: linear-gradient(#d8402e, #8e1818); color: #fff4d6;
  font: 900 11px/1.1 "Source Sans 3", sans-serif; letter-spacing: .06em; box-shadow: 0 2px 5px rgba(0,0,0,.55); }
.boss-storm.live .bs-fight { display: block; }
.boss-storm.hunt-done .bs-fight { background: linear-gradient(#4f6b3a, #2b4020); }

/* ---- World Hunt rail sticker: the demon golem riding a storm cloud ---- */
.medal.storm-sticker { background: #1d1720; }
.medal.storm-sticker > img, .medal.storm-sticker > .fb { display: none; }
.storm-sticker .ss-art { position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #6a3a2a 0%, #3a2430 45%, #151016 100%); }
.storm-sticker .ss-golem { position: absolute; left: 6%; top: 0; width: 88%; height: 84%;
  background: url(assets/world_hunt/_saved/battle_fire_demon.png) 50% 3% / 560% auto no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 50% 58% at 50% 42%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 50% 58% at 50% 42%, #000 58%, transparent 100%);
  filter: saturate(1.2) contrast(1.15) brightness(1.3); }
.storm-sticker .ss-cloud { position: absolute; left: -10%; right: -10%; bottom: -10%; height: 42%;
  background:
    radial-gradient(circle at 18% 60%, #4b4150 0 22%, transparent 23%),
    radial-gradient(circle at 42% 45%, #5a4e60 0 26%, transparent 27%),
    radial-gradient(circle at 66% 52%, #4e4454 0 24%, transparent 25%),
    radial-gradient(circle at 86% 64%, #3f3646 0 20%, transparent 21%),
    linear-gradient(#302834, #231c27) 0 70% / 100% 40% no-repeat; filter: blur(.4px); }
.storm-sticker .ss-bolt { position: absolute; right: 12%; bottom: 14%; width: 22%; fill: #ffe98a; filter: drop-shadow(0 0 3px #ffd34d); opacity: 0; animation: bsFlash 4.2s infinite; }
@keyframes bsFlash { 0%, 86%, 100% { opacity: 0; } 88% { opacity: 1; } 90% { opacity: .2; } 92% { opacity: 1; } }
.storm-sticker .ss-fight { display: none; position: absolute; left: 50%; top: -9px; transform: translateX(-50%); z-index: 3; white-space: nowrap;
  padding: 1px 6px 2px; border-radius: 7px; border: 1.5px solid #ffe39a; background: linear-gradient(#d8402e, #8e1818); color: #fff4d6;
  font: 900 9.5px/1.1 "Source Sans 3", sans-serif; letter-spacing: .06em; box-shadow: 0 2px 4px rgba(0,0,0,.5); }
.storm-sticker.hunt-live { box-shadow: 0 0 0 3px #ff8a3c, 0 0 16px rgba(255,120,40,.85), 0 4px 12px rgba(0,0,0,.35); }
.storm-sticker.hunt-live .ss-fight { display: block; }
.storm-sticker.hunt-live .ss-bolt { animation-duration: 2.2s; }
.storm-sticker.hunt-done .ss-fight { background: linear-gradient(#4f6b3a, #2b4020); }
@media (prefers-reduced-motion: reduce) { .storm-sticker .ss-bolt { animation: none; opacity: .8; } }

/* ---- Hunt panel button (town.js openHunt) ---- */
.hunt-fight-cta .hunt-join { font-size: 1.15rem; padding: 12px 22px; width: 100%; }

/* ---- the fight screen: live boss bar + other hunters, your single big strike ---- */
.hunt-arena { position: fixed; inset: 0; z-index: 150; background: #0e0806; overflow: hidden; color: #fbe7bf; font-family: Georgia, "Times New Roman", serif; }
.hunt-arena .hs-bg { position: absolute; inset: -3%; background-size: cover; background-position: 55% 30%; transform: scale(1.02); transition: transform 1.1s ease-in, filter .6s; }
@media (orientation: landscape) { .hunt-arena .hs-bg { background-size: auto 118%; background-position: 55% 100%; } } /* crops the plate's printed title */
/* storm overhead in the fight screen: dark cloud band + lightning flashes over the battle plate */
.hunt-arena .hs-storm { position: absolute; left: -5%; right: -5%; top: -6%; height: 34%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 30% 60% at 15% 30%, rgba(30,24,34,.95), transparent 70%), radial-gradient(ellipse 34% 70% at 50% 20%, rgba(38,30,44,.95), transparent 70%),
    radial-gradient(ellipse 30% 60% at 85% 30%, rgba(30,24,34,.95), transparent 70%), linear-gradient(rgba(16,12,20,.9), transparent); filter: blur(2px); }
.hunt-arena .hs-storm::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 40% 60% at 60% 30%, rgba(255,240,200,.55), transparent 70%); opacity: 0; animation: bsFlash 5.5s infinite; }
.hunt-arena .hs-dark { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 35%, rgba(0,0,0,.65) 100%); transition: background .8s; pointer-events: none; }
.hs-top { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: min(620px, calc(100% - 110px)); z-index: 4; text-align: center; }
.hs-name { font-weight: 700; font-size: 1.15rem; text-shadow: 0 2px 4px #000; }
.hs-name small { display: block; font: 600 .75rem "Source Sans 3", sans-serif; color: #ffd9a0; }
.hs-hp { position: relative; height: 22px; margin-top: 5px; border-radius: 11px; border: 2px solid #d9b25c; background: rgba(20,8,6,.85); overflow: hidden; box-shadow: 0 3px 10px rgba(0,0,0,.6); }
.hs-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#ff6a3a, #b21e12 60%, #7a0e08); transition: width .45s ease-out; }
.hs-chunk { position: absolute; top: 0; bottom: 0; width: 0; background: #fff3c4; opacity: 0; }
.hs-chunk.drop { animation: hsChunk 1.1s ease-in forwards; }
@keyframes hsChunk { 0% { opacity: 1; transform: none; } 25% { opacity: 1; background: #ffb347; } 100% { opacity: 0; transform: translateY(26px) rotate(4deg); } }
.hs-hp span { position: relative; z-index: 2; font: 800 .78rem/18px "Source Sans 3", sans-serif; color: #fff; text-shadow: 0 1px 2px #000; }
/* other hunters: scrolling feed + small numbers popping off the boss */
.hs-feed { position: absolute; left: 10px; top: 104px; z-index: 3; width: 200px; margin: 0; padding: 0; list-style: none; font: 600 .8rem/1.25 "Source Sans 3", sans-serif; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.hs-feed li { margin: 0 0 3px; padding: 2px 8px; border-radius: 8px; background: rgba(20,10,6,.62); animation: hsFeedIn .35s ease-out; }
.hs-feed li b { color: #ffcf7a; }
.hs-feed li.me { background: rgba(140,40,20,.8); } .hs-feed li.me b { color: #fff; }
@keyframes hsFeedIn { from { opacity: 0; transform: translateY(-8px); } }
.hs-pops { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hs-pop { position: absolute; font: 800 .95rem "Source Sans 3", sans-serif; color: #ffd27a; text-shadow: 0 2px 3px #000, 0 0 6px rgba(255,90,20,.8); animation: hsPop 1.25s ease-out forwards; }
@keyframes hsPop { 0% { opacity: 0; transform: translateY(6px) scale(.7); } 15% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: translateY(-40px) scale(.9); } }
/* your strike */
.hs-bottom { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4; text-align: center; width: min(420px, calc(100% - 24px)); }
.hs-bottom[hidden] { display: none; }
.hs-power { display: flex; justify-content: center; margin-bottom: 8px; }
.hs-ring { --p: 0; position: relative; display: grid; place-items: center; align-content: center; width: 92px; height: 92px; border-radius: 50%;
  background: conic-gradient(#ffb347 calc(var(--p) * 1%), rgba(255,255,255,.15) 0) border-box; box-shadow: 0 0 0 3px #d9b25c, 0 6px 16px rgba(0,0,0,.6); }
.hs-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(#3a1a10, #1a0a06); }
.hs-ring b, .hs-ring small { position: relative; } .hs-ring b { font-size: 1.1rem; } .hs-ring small { font: 700 .62rem "Source Sans 3", sans-serif; color: #ffd9a0; }
.hs-strike { font: 700 1.35rem Georgia, serif; color: #fff4d6; padding: 12px 34px; border-radius: 14px; border: 2.5px solid #ffe39a; cursor: pointer; min-width: 220px;
  background: radial-gradient(circle at 30% 25%, #e0503e, #a81e1e 55%, #5a0e0e); box-shadow: 0 5px 0 #3d0a0a, 0 10px 18px rgba(0,0,0,.5); }
.hs-strike:disabled { filter: grayscale(.6) brightness(.8); cursor: default; font-size: 1.05rem; }
.hs-note { margin: 8px 0 0; font: 600 .82rem "Source Sans 3", sans-serif; text-shadow: 0 1px 3px #000; }
.hunt-arena.windup .hs-bg { transform: scale(1.1); filter: brightness(.7) saturate(1.2); }
.hunt-arena.windup .hs-dark { background: radial-gradient(ellipse at 50% 45%, transparent 20%, rgba(0,0,0,.85) 100%); }
.hunt-arena.windup .hs-ring { animation: hsCharge 1.15s ease-in forwards; }
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes hsCharge { to { --p: 100; box-shadow: 0 0 0 3px #ffe39a, 0 0 34px 10px rgba(255,160,60,.95); transform: scale(1.12); } }
.hs-slash { position: absolute; left: 20%; top: 40%; width: 60%; height: 10px; z-index: 3; opacity: 0; pointer-events: none; border-radius: 50%;
  background: linear-gradient(90deg, transparent, #fff 40%, #ffe39a 60%, transparent); transform: rotate(-24deg) scaleX(.2); box-shadow: 0 0 24px 8px rgba(255,200,120,.8); }
.hs-flash { position: absolute; inset: 0; z-index: 3; background: #fff; opacity: 0; pointer-events: none; }
.hunt-arena.impact .hs-slash { animation: hsSlash .5s ease-out forwards; }
.hunt-arena.impact .hs-flash { animation: hsFlash .45s ease-out; }
.hunt-arena.impact .hs-bg { animation: hsShake .45s linear; }
@keyframes hsSlash { 0% { opacity: 0; transform: rotate(-24deg) scaleX(.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(-24deg) scaleX(1.2); } }
@keyframes hsFlash { 0% { opacity: .85; } 100% { opacity: 0; } }
@keyframes hsShake { 0%, 100% { translate: 0 0; } 20% { translate: -14px 6px; } 40% { translate: 12px -8px; } 60% { translate: -8px 4px; } 80% { translate: 5px -2px; } }
.hs-dmg { position: absolute; left: 50%; top: 36%; z-index: 4; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; text-align: center;
  font: 900 clamp(2.6rem, 9vw, 5rem) Georgia, serif; color: #fff1c9; -webkit-text-stroke: 2px #6a1a08; text-shadow: 0 6px 0 #3d0a0a, 0 0 30px rgba(255,120,40,.9); }
.hs-dmg small { display: block; font-size: .35em; letter-spacing: .1em; color: #ffd34d; -webkit-text-stroke: 0; }
.hs-dmg.pop { animation: hsDmg 2.2s ease-out forwards; }
@keyframes hsDmg { 0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(.92); } 22% { transform: translate(-50%, -50%) scale(1.05); } 75% { opacity: 1; } 100% { opacity: .0; transform: translate(-50%, -80%) scale(1); } }
.hunt-arena.settled .hs-dmg.pop { animation-fill-mode: forwards; }
/* result card */
.hs-result { position: absolute; left: 50%; bottom: 14px; z-index: 5; width: min(440px, calc(100% - 20px)); transform: translate(-50%, 30px); opacity: 0; transition: transform .35s ease-out, opacity .35s;
  padding: 12px 16px 14px; border-radius: 16px; border: 2px solid #d9b25c; background: rgba(30,16,8,.93); box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.hs-result.in { transform: translate(-50%, 0); opacity: 1; }
.hs-result[hidden] { display: none; }
.hs-result h3 { margin: 0 0 8px; text-align: center; font-size: 1.25rem; color: #ffe39a; }
.hr-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px dashed rgba(217,178,92,.3); font: 600 .9rem "Source Sans 3", sans-serif; }
.hr-row b { font-size: 1rem; color: #fff4d6; }
.hr-rew { margin-top: 8px; font: 600 .85rem "Source Sans 3", sans-serif; } .hr-rew > span { color: #ffd9a0; }
.hr-rew ul { margin: 4px 0; padding-left: 18px; } .hr-rew small { display: block; opacity: .75; font-size: .72rem; }
.hr-left { margin: 8px 0; text-align: center; font: 700 .92rem "Source Sans 3", sans-serif; }
.hr-btns { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.hr-btns .btn:disabled { opacity: .6; }
.hunt-x { position: absolute; z-index: 6; top: 12px; left: 10px; width: 38px; height: 38px; border-radius: 50%; border: 2px solid #d9b25c; background: rgba(40, 24, 10, .85); color: #fbe7bf; font-size: 1.1rem; cursor: pointer; }
body.in-hunt .chat-dock { display: none; }
@media (max-width: 699px) {
  .hs-top { width: calc(100% - 64px); left: calc(50% + 22px); }
  .hs-feed { top: auto; bottom: 214px; width: 170px; font-size: .72rem; }
  .hs-result { bottom: 8px; padding: 10px 12px 12px; }
}
@media (prefers-reduced-motion: reduce) { .hunt-arena * { animation-duration: .01s !important; transition: none !important; } }

/* Bounty Office popup (town.js openBounty): name over title (was running together, "SheriffBounty Office") */
.clerk-meta strong, .clerk-meta span { display: block; }
.clerk-meta span { font-size: .85rem; opacity: .8; }
/* phone: the storm's top edge sits under the Ruler bar, so the FIGHT! tag hangs off the cloud's left side instead */
@media (orientation: portrait) and (max-width: 699px) {
  .boss-storm .bs-fight { left: -6px; top: 42%; transform: translateX(-60%); font-size: 10px; }
}