/* Aetholotl World arena hub and boss battles. Uses the app theme tokens so every theme works. */
.w-boss{position:absolute;inset:0;z-index:6;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:color-mix(in srgb,#000 38%,transparent);color:var(--ink)}
.w-boss[hidden]{display:none}
.wb-card{width:min(760px,100%);max-height:100%;display:flex;flex-direction:column;gap:var(--s3,12px);padding:var(--s4,16px);border-radius:22px;background:var(--bg);border:1px solid var(--edge);box-shadow:var(--raise);overflow:hidden}
.wb-card.fight{--bc:#6fcf5a}
.wb-head,.wb-fhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s3,12px)}
.wb-head h2{margin:0}
.wb-tabs,.wb-subtabs{display:flex;gap:6px;padding:5px;border-radius:16px;box-shadow:var(--inset-sm);overflow-x:auto;scrollbar-width:thin}
.wb-tabs button,.wb-subtabs button{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:12px;background:transparent;color:var(--muted);font-weight:800;font-size:13px;min-height:40px;padding:0 14px;white-space:nowrap}
.wb-tabs button.on,.wb-subtabs button.on{background:var(--bg);box-shadow:var(--raise-xs);color:var(--accent)}
.wb-body{overflow-y:auto;min-height:0;display:grid;gap:var(--s3,12px);align-content:start}
.wb-sub{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5}
.wb-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s3,12px)}
.wb-boss{display:flex;gap:12px;align-items:center;text-align:left;border:0;border-radius:18px;background:var(--bg);box-shadow:var(--raise-xs);color:var(--ink);padding:var(--s3,12px)}
.wb-boss:hover{box-shadow:var(--raise-sm)}
.wb-boss svg{width:76px;height:76px;flex-shrink:0;border-radius:14px;background:color-mix(in srgb,var(--bc) 18%,var(--bg));padding:4px;box-shadow:var(--inset-sm)}
.wb-info{display:grid;gap:2px;min-width:0}.wb-info strong{font-size:15px}.wb-info small{color:var(--muted)}
.wb-meta{font-size:11.5px;color:var(--muted)}.wb-meta b{color:var(--ink)}
.wb-won,.wb-new{font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;gap:4px}
.wb-won{color:var(--green)}.wb-new{color:var(--faint)}.wb-won .ico{width:14px;height:14px}
.wb-rows ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wb-rows li{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:12px;box-shadow:var(--inset-sm)}
.wb-rows li.me{box-shadow:var(--raise-xs),0 0 0 2px var(--accent)}
.wb-rows strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-place{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-weight:900;background:var(--track);font-size:13px}
.wb-actions{display:flex;flex-wrap:wrap;gap:var(--s2,8px)}
.wb-wallet{display:flex;flex-wrap:wrap;gap:var(--s2,8px)}
.wb-wallet span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:99px;box-shadow:var(--inset-sm);font-size:13px}
.wb-wallet i,.wb-cost i{width:12px;height:12px;border-radius:3px;background:var(--gc,var(--accent));transform:rotate(45deg);display:inline-block}
.wb-craft{display:flex;flex-wrap:wrap;gap:var(--s2,8px)}
.wb-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s3,12px)}
.wb-item{display:grid;gap:4px;padding:var(--s3,12px);border-radius:16px;box-shadow:var(--raise-xs)}
.wb-item small{color:var(--muted);font-size:12px;line-height:1.4}.wb-cost{display:flex;align-items:center;gap:4px;font-weight:800;font-size:13px}
/* Fight */
.wb-names{display:grid;text-align:center}.wb-names small{color:var(--muted)}
.wb-streak{display:inline-flex;align-items:center;gap:4px;font-weight:900;color:var(--coral);padding:6px 12px;border-radius:99px;box-shadow:var(--inset-sm)}
.wb-hud{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3,12px)}
.wb-bar{position:relative;height:22px;border-radius:99px;box-shadow:var(--inset-sm);overflow:hidden}
.wb-bar span{position:absolute;inset:0 auto 0 0;border-radius:inherit;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.wb-bar.boss span{background:linear-gradient(90deg,#e8455e,#ff8a3d)}.wb-bar.me span{background:linear-gradient(90deg,#2fbf9b,#6fe0b8)}
.wb-bar b{position:absolute;inset:0;display:grid;place-items:center;font-size:11.5px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.wb-arena{position:relative;height:clamp(150px,28vh,230px);border-radius:18px;overflow:hidden;box-shadow:var(--inset-sm);background:radial-gradient(ellipse at 50% 110%,color-mix(in srgb,var(--bc) 34%,var(--bg)),var(--bg) 70%)}
.wb-boss-art{position:absolute;left:6%;bottom:6%;width:34%;max-width:200px;animation:wbIdle 2.4s ease-in-out infinite}
.wb-boss-art svg{width:100%;display:block;filter:drop-shadow(0 6px 8px rgba(0,0,0,.28))}
.wb-me{position:absolute;right:8%;bottom:6%;width:26%;max-width:150px}
.wb-me .axo,.wb-lotl .axo{width:100%;display:block;overflow:visible}
.wb-lotl{position:absolute;right:30%;bottom:46%;width:15%;max-width:84px;animation:wbFloat 2.6s ease-in-out infinite}
.wb-fx{position:absolute;inset:0;pointer-events:none}
.wb-float{position:absolute;left:var(--x);top:30%;font-weight:900;font-size:24px;animation:wbRise 1s ease-out forwards;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.wb-float.dmg{color:#fff;-webkit-text-stroke:1px #c2314f}.wb-float.ouch{color:#ff6b81}
.wb-float.hyah{top:12%;font-size:34px;color:#ffe27a;-webkit-text-stroke:1.5px #a8440f;letter-spacing:1px;margin-left:-20px}
.wb-spark{position:absolute;left:var(--x);top:55%;width:7px;height:7px;border-radius:2px;animation:wbSpark .7s ease-out forwards}
.wb-slash{position:absolute;left:var(--x);top:50%;width:90px;height:5px;margin-left:-45px;background:linear-gradient(90deg,transparent,#fff,transparent);rotate:-35deg;animation:wbSlash .4s ease-out forwards;box-shadow:0 0 12px #fff}
.wb-q{display:grid;gap:var(--s2,8px);min-height:0;overflow-y:auto}
.wb-time{height:6px;border-radius:9px;box-shadow:var(--inset-sm);overflow:hidden}
.wb-time span{display:block;height:100%;background:var(--accent);transition:width .25s linear}
.wb-assist{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--violet)}.wb-assist .ico{width:14px;height:14px}
.wb-prompt{margin:0;font-size:clamp(15px,2.2vw,17px);font-weight:700;line-height:1.45}
.wb-opts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2,8px)}
.wb-opt{display:flex;gap:10px;align-items:flex-start;text-align:left;border:0;border-radius:14px;background:var(--bg);box-shadow:var(--raise-xs);color:var(--ink);padding:10px 12px;min-height:48px;font-size:14px}
.wb-opt b{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--track);flex-shrink:0;font-size:12px}
.wb-opt.right{background:var(--ok-bg);box-shadow:inset 0 0 0 2px var(--green)}.wb-opt.wrong{background:var(--bad-bg);box-shadow:inset 0 0 0 2px var(--red)}
.wb-opt:disabled{opacity:1;cursor:default}
.wb-over{display:grid;gap:var(--s2,8px);justify-items:center;text-align:center;padding:var(--s3,12px)}
.wb-over h3{margin:0;font-size:22px}.wb-over p{margin:0;color:var(--muted)}.wb-over.win h3{color:var(--green)}.wb-over.lose h3{color:var(--red)}
@media(max-width:560px){.wb-opts{grid-template-columns:1fr}.wb-hud{gap:var(--s2,8px)}.wb-card{padding:var(--s3,12px)}}
/* Animations */
@keyframes wbIdle{50%{translate:0 -5px}}@keyframes wbFloat{50%{translate:0 -8px}}
@keyframes wbRise{from{translate:0 0;opacity:1;scale:.7}20%{scale:1.15}to{translate:0 -60px;opacity:0}}
@keyframes wbSpark{to{translate:var(--dx) var(--dy);opacity:0;scale:.3}}
@keyframes wbSlash{from{scale:.2 1;opacity:1}to{scale:1.2 1;opacity:0}}
.wb-boss-art.hurt{animation:wbHurt .5s ease}
@keyframes wbHurt{0%{filter:brightness(2.4);translate:0 0}25%{translate:12px 0}50%{translate:-8px 0}100%{filter:none;translate:0 0}}
.wb-boss-art.strike{animation:wbStrike .6s ease}
@keyframes wbStrike{0%{translate:0 0}45%{translate:130% -6%;scale:1.12}100%{translate:0 0}}
.wb-me.lunge{animation:wbLunge .5s ease}
@keyframes wbLunge{45%{translate:-130% -8%}100%{translate:0 0}}
.wb-me.hurt{animation:wbMeHurt .5s ease}
@keyframes wbMeHurt{0%{filter:brightness(1.8) saturate(1.5)}30%{translate:10px 0}60%{translate:-6px 0}100%{filter:none}}
.wb-lotl.assist{animation:wbAssist 1.1s ease}
@keyframes wbAssist{0%{translate:0 0;rotate:0deg}30%{translate:20px -22px;rotate:-12deg}55%{translate:-310% 40%;rotate:-25deg;scale:1.25}75%{translate:-310% 40%;rotate:-25deg;scale:1.25}100%{translate:0 0;rotate:0deg;scale:1}}
.wb-arena.shake{animation:wbShake .4s}
@keyframes wbShake{25%{translate:-5px 2px}50%{translate:5px -2px}75%{translate:-3px 1px}}
@media(prefers-reduced-motion:reduce){.wb-boss-art,.wb-lotl{animation:none}.wb-boss-art.hurt,.wb-boss-art.strike,.wb-me.lunge,.wb-me.hurt,.wb-lotl.assist,.wb-arena.shake{animation:none}.wb-float{animation:none;opacity:1}.wb-bar span{transition:none}}