/*
  Echoes  -  City of the Unknown
  Created by Christopher Davidson
*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;900&family=Crimson+Text:ital,wght@0,400;1,400&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#07060a;color:#e8e0d0;font-family:'Crimson Text',Georgia,serif}
:root{
--gold:#c8a97e;--goldf:#c8a97e1a;--goldb:#c8a97e44;
--void:#8a9fe8;--voidf:#8a9fe81a;
--ember:#e8907c;--emberf:#e8907c1a;
--green:#7aca8a;--greenf:#7aca8a1a;
--stone:#e8e0d0;--dark:#07060a;--mid:#14120e;
}
/* == SHARED KEYFRAMES == */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes levelPop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse-blue{0%,100%{box-shadow:0 0 6px var(--voidf)}50%{box-shadow:0 0 16px var(--void)}}
@keyframes pulse-gold{0%,100%{box-shadow:0 0 8px var(--goldf)}50%{box-shadow:0 0 20px var(--gold)}}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
/* == LAYOUT == */
#app{display:flex;flex-direction:column;height:100vh;overflow:hidden}
/* == TOP BAR == */
#topbar{
flex-shrink:0;
display:flex;align-items:center;gap:8px;padding:8px 12px;
background:linear-gradient(180deg,#16110b,#0b0907);
border-bottom:1px solid #c8a97e22;box-shadow:0 2px 14px #000c;
flex-wrap:wrap;position:relative;z-index:30;
}
.res{
display:flex;align-items:center;gap:5px;padding:4px 10px;
border:1px solid #c8a97e1a;border-radius:3px;
background:linear-gradient(180deg,#1c1610,#0d0b08);
box-shadow:inset 0 1px 0 #ffffff0a,0 2px 6px #0008;
transition:transform .2s;
}
.res-ic{filter:drop-shadow(0 0 4px #c8a97e55)}
.res-v{font-family:'Cinzel',serif;font-size:12px;color:var(--gold);min-width:26px;text-align:right}
.res-r{font-size:9px;color:#4aaa5a;font-family:'Cinzel',serif}
.res-cap{color:#6a5d48}
.res.gain{animation:chipGain .6s ease}
.res.spend{animation:chipSpend .5s ease}
@keyframes chipGain{30%{border-color:#7aca8a77;box-shadow:0 0 12px #7aca8a44}}
@keyframes chipSpend{30%{border-color:#e8907c99;box-shadow:0 0 12px #e8907c55;transform:scale(.94)}}
#castle-badge{
font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--gold);
border:1px solid var(--goldb);padding:4px 10px;border-radius:3px;
background:linear-gradient(180deg,#2a2014,#140f09);
box-shadow:0 0 12px #c8a97e22,inset 0 1px 0 #ffffff14;
}
.spacer{flex:1}
.top-btn{font-family:'Cinzel',serif;font-size:9px;letter-spacing:1px;padding:5px 11px;border-radius:3px;cursor:pointer;transition:all .2s}
.top-btn:hover{transform:translateY(-1px)}
.top-daily{border:1px solid #3a4a7a;color:var(--void);background:var(--voidf);animation:pulse-blue 2.5s infinite}
.top-save{border:1px solid #4a7a4a;color:var(--green);background:var(--greenf)}
.top-save:hover{box-shadow:0 0 10px var(--greenf)}
/* == MAIN AREA == */
#main{flex:1;display:flex;overflow:hidden;position:relative}
/* == CITY VIEW == */
#city-view{
flex:1;position:relative;overflow:hidden;
background:radial-gradient(ellipse at 50% 40%,#1a1408 0%,#07060a 65%);
}
#city-view::after{
content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
background:radial-gradient(ellipse at 50% 45%,transparent 50%,#000000b0 100%);
}
#city-bg{position:absolute;inset:0;width:100%;height:100%}
/* == BUILDINGS IN THE SCENE ==
   The buildings are painted on the city canvas; each .bnode is an
   invisible hit area standing on its building, with a floating nameplate. */
#bmap{position:absolute;inset:0;z-index:2;pointer-events:none}
.bnode{
--bc:#c8a97e;
position:absolute;transform:translate(-50%,-100%);
pointer-events:auto;cursor:pointer;border-radius:6px 6px 2px 2px;
}
.bnode.locked{cursor:default}
.bnode-plate{
position:absolute;left:50%;bottom:calc(100% + 4px);transform:translate(calc(-50% + var(--px,0px)),var(--py,0px));
display:flex;align-items:center;gap:5px;white-space:nowrap;
padding:3px 9px 3px 7px;border-radius:12px;
font-family:'Cinzel',serif;font-size:9px;letter-spacing:.5px;color:var(--bc);
background:#0b0907d9;border:1px solid color-mix(in srgb,var(--bc) 38%,transparent);
box-shadow:0 3px 10px #000a;backdrop-filter:blur(3px);
transition:transform .2s,border-color .2s,box-shadow .2s,opacity .2s;
}
/* little stem pointing down at the building */
.bnode-plate::after{
content:'';position:absolute;left:calc(50% - var(--px,0px));top:100%;width:1px;height:calc(5px - var(--py,0px));
background:color-mix(in srgb,var(--bc) 50%,transparent);
}
.bnode-icon{font-size:12px;line-height:1}
.bnode.built .bnode-icon{filter:drop-shadow(0 0 4px var(--bc))}
.bnode-name{color:var(--bc);text-shadow:0 0 6px #000}
.bnode-lv{color:#8a7d68;font-size:8px;letter-spacing:1px}
.bnode.maxed .bnode-lv{color:var(--green)}
.bnode-pips{display:flex;gap:3px;margin:0 1px}
.pip{width:5px;height:5px;transform:rotate(45deg);background:#ffffff1a;display:block}
.pip.on{background:var(--bc);box-shadow:0 0 5px var(--bc)}
.pip.over.on{background:#fff4dc}
.bnode-pips.many{gap:2px}
.bnode-pips.many .pip{width:4px;height:4px}
.bnode-timer{color:var(--void);text-shadow:0 0 6px var(--void)}
.bnode-timer:empty{display:none}
.bnode-bar{display:none;position:absolute;left:10px;right:10px;bottom:2px;height:2px;background:#ffffff12;border-radius:1px;overflow:hidden}
.bnode-fill{height:100%;width:0;background:var(--void);transition:width .4s}
.bnode.upgrading .bnode-bar{display:block}
.bnode-ready{color:var(--green);font-size:9px;text-shadow:0 0 8px var(--green);animation:readyBob 1.2s ease-in-out infinite}
@keyframes readyBob{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(-2px);opacity:1}}
/* hover / selected: the plate lifts and glows (the canvas lights the building) */
.bnode:hover .bnode-plate,.bnode.selected .bnode-plate{
transform:translate(calc(-50% + var(--px,0px)),calc(var(--py,0px) - 3px));border-color:var(--bc);
box-shadow:0 6px 16px #000c,0 0 14px color-mix(in srgb,var(--bc) 35%,transparent);
z-index:5;
}
.bnode:hover,.bnode.selected{z-index:1000 !important}
.bnode.ready .bnode-plate{border-color:#7aca8a66}
.bnode.upgrading .bnode-plate{border-color:var(--void);animation:pulse-blue 1.5s infinite}
.bnode.upgrading .bnode-icon{animation:hammer .7s ease-in-out infinite;display:inline-block}
@keyframes hammer{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg) translateY(-1px)}}
/* a plot waiting to be built: dashed, quieter plate */
.bnode.unbuilt:not(.locked):not(.upgrading) .bnode-plate{border-style:dashed;background:#0b0907b0}
.bnode.unbuilt:not(.locked) .bnode-icon{color:var(--bc);font-size:13px;animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
.bnode.unbuilt .bnode-lv{color:var(--bc);opacity:.7}
/* locked plots: just rubble in the scene; the plate only shows on hover */
.bnode.locked .bnode-plate{opacity:0;color:#777;border-color:#ffffff14;pointer-events:none}
.bnode.locked:hover .bnode-plate{opacity:1}
.bnode.locked .bnode-name{color:#888}
/* narrow views: icon, pips and level only; the name appears on hover/selection */
#bmap.compact .bnode-name{display:none}
#bmap.compact .bnode:hover .bnode-name,#bmap.compact .bnode.selected .bnode-name,#bmap.compact .bnode.locked .bnode-name{display:inline}
#bmap.compact .bnode-plate{padding:2px 6px;gap:3px}
#bmap.compact .bnode-pips{display:none}
/* == RIGHT PANEL == */
#rpanel{
width:270px;flex-shrink:0;
display:flex;flex-direction:column;
border-left:1px solid #c8a97e18;
background:linear-gradient(180deg,#110e0a,#0a0806);
box-shadow:-6px 0 20px #0008;overflow:hidden;position:relative;z-index:3;
}
.panel-tabs{display:flex;border-bottom:1px solid #ffffff08;background:#00000033}
.ptab{
flex:1;padding:10px 4px;text-align:center;cursor:pointer;
font-family:'Cinzel',serif;font-size:9px;letter-spacing:1px;
color:#555;border-bottom:2px solid transparent;transition:all .2s;
}
.ptab:hover{color:#999;background:#ffffff04}
.ptab.active{color:var(--gold);border-bottom-color:var(--gold);background:linear-gradient(0deg,var(--goldf),transparent);text-shadow:0 0 8px var(--goldb)}
.ptab-badge{
display:none;width:6px;height:6px;border-radius:50%;
background:var(--ember);margin-left:4px;vertical-align:middle;
box-shadow:0 0 6px var(--ember);animation:blink 1s infinite;
}
.panel-content{flex:1;overflow-y:auto;padding:12px}
.panel-content::-webkit-scrollbar{width:2px}
.panel-content::-webkit-scrollbar-thumb{background:var(--goldb);border-radius:1px}
/* == QUEST CARDS == */
.quest-card{
border:1px solid #ffffff0a;border-radius:4px;padding:10px;position:relative;overflow:hidden;
margin-bottom:8px;background:linear-gradient(180deg,#ffffff06,#ffffff02);transition:all .2s;
}
.quest-card:hover{border-color:var(--goldb)}
.quest-card.complete{border-color:var(--green);background:var(--greenf);box-shadow:0 0 14px #7aca8a22;cursor:pointer}
.quest-card.complete:hover{transform:translateX(-2px)}
.quest-card.complete::after{
content:'';position:absolute;top:0;bottom:0;width:40%;left:-60%;pointer-events:none;
background:linear-gradient(100deg,transparent,#7aca8a2a,transparent);animation:shimmer 2.2s infinite;
}
@keyframes shimmer{to{left:120%}}
.quest-card.claimed{opacity:.35}
.q-title{font-family:'Cinzel',serif;font-size:10px;color:var(--gold);margin-bottom:3px;letter-spacing:.5px}
.q-desc{font-size:11px;color:#888;line-height:1.4;margin-bottom:6px}
.q-progress{height:4px;background:#ffffff0a;border-radius:2px;overflow:hidden;margin-bottom:5px}
.q-fill{height:100%;background:linear-gradient(90deg,#8a6a3a,var(--gold));border-radius:2px;transition:width .4s;box-shadow:0 0 6px var(--goldb)}
.quest-card.complete .q-fill{background:linear-gradient(90deg,#3a7a4a,var(--green))}
.q-reward{font-size:10px;color:var(--green);font-family:'Cinzel',serif}
.q-claim{font-size:9px;color:#0a1a0a;border:1px solid var(--green);padding:3px 9px;border-radius:2px;background:var(--green);cursor:pointer;font-family:'Cinzel',serif;letter-spacing:1px;font-weight:600;box-shadow:0 0 10px #7aca8a55}
/* == HERO CARDS == */
.hero-card{
--rc:#8a9fe8;
border:1px solid #ffffff0a;border-radius:4px;padding:10px;
margin-bottom:8px;background:linear-gradient(180deg,#ffffff06,#ffffff02);cursor:pointer;transition:all .2s;
display:flex;gap:10px;align-items:center;
}
.hero-card:hover{border-color:color-mix(in srgb,var(--rc) 50%,transparent);transform:translateX(-2px)}
.hero-card.selected{border-color:var(--gold);background:var(--goldf);box-shadow:0 0 14px var(--goldf)}
.hero-avatar{
width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;font-size:24px;line-height:1;
border-radius:50%;border:1px solid var(--rc);
background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--rc) 32%,transparent),#00000099);
box-shadow:0 0 12px color-mix(in srgb,var(--rc) 35%,transparent);
}
.hero-card.selected .hero-avatar{animation:bob 2.6s ease-in-out infinite}
.hero-info{flex:1;min-width:0}
.hero-name{font-family:'Cinzel',serif;font-size:10px;color:var(--gold);letter-spacing:.5px}
.hero-class{font-size:10px;color:#666;margin-bottom:4px}
.rarity{color:var(--rc);font-family:'Cinzel',serif;font-size:9px;letter-spacing:1px}
.hero-stats{display:flex;gap:8px}
.hstat{font-size:9px;font-family:'Cinzel',serif;color:#666}
.hstat span{color:var(--gold)}
.hero-xp-bar{height:3px;background:#ffffff0a;border-radius:2px;margin-top:5px;overflow:hidden}
.hero-xp-fill{height:100%;background:linear-gradient(90deg,var(--void),#c8e0ff);border-radius:2px;transition:width .4s;box-shadow:0 0 6px var(--void)}
/* == RAID CARDS == */
.raid-card{
--dc:#7aca8a;
border:1px solid #ffffff0a;border-left:2px solid var(--dc);border-radius:4px;padding:10px;margin-bottom:8px;
background:linear-gradient(90deg,color-mix(in srgb,var(--dc) 9%,transparent),#ffffff03 65%);
}
.raid-card.locked{opacity:.55}
.raid-icon{
display:inline-grid;place-items:center;width:32px;height:32px;font-size:18px;border-radius:50%;vertical-align:middle;
background:#00000077;border:1px solid color-mix(in srgb,var(--dc) 45%,transparent);
box-shadow:0 0 10px color-mix(in srgb,var(--dc) 25%,transparent);
animation:bob 3s ease-in-out infinite;
}
.raid-btn{
width:100%;padding:10px;font-family:'Cinzel',serif;
font-size:10px;letter-spacing:2px;border:1px solid var(--ember);
color:var(--ember);background:transparent;cursor:pointer;
transition:all .25s;text-transform:uppercase;border-radius:2px;
}
.raid-btn:hover:not(:disabled){background:var(--emberf);box-shadow:0 0 14px #e8907c44;letter-spacing:3px}
.raid-btn:disabled{opacity:.35;cursor:not-allowed}
/* == DETAIL MODAL == */
#modal{
display:none;position:fixed;inset:0;z-index:50;
background:#00000099;backdrop-filter:blur(6px);
align-items:center;justify-content:center;padding:16px;
}
#modal.open{display:flex;animation:fadeIn .25s ease}
.modal-box{
--bc:#c8a97e;
background:linear-gradient(180deg,#14100b,#0b0907);
border:1px solid color-mix(in srgb,var(--bc) 35%,transparent);border-top:2px solid var(--bc);border-radius:6px;
padding:22px;width:min(390px,100%);max-height:90vh;overflow-y:auto;
box-shadow:0 24px 60px #000d,0 0 40px color-mix(in srgb,var(--bc) 14%,transparent);
animation:modalIn .35s cubic-bezier(.2,1.3,.4,1);
}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.modal-box::-webkit-scrollbar{width:2px}
.modal-box::-webkit-scrollbar-thumb{background:var(--goldb)}
.modal-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.modal-icon{
width:58px;height:58px;flex-shrink:0;display:grid;place-items:center;font-size:30px;border-radius:8px;
border:1px solid color-mix(in srgb,var(--bc) 45%,transparent);
background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--bc) 30%,transparent),#00000099);
box-shadow:0 0 20px color-mix(in srgb,var(--bc) 30%,transparent);
animation:bob 3s ease-in-out infinite;
}
.modal-title{font-family:'Cinzel',serif;font-size:17px;color:var(--bc);margin-bottom:3px;text-shadow:0 0 12px color-mix(in srgb,var(--bc) 40%,transparent)}
.modal-sub{font-size:12px;color:#777}
.modal-head .bnode-pips{margin-top:6px}
.modal-lore{font-style:italic;font-size:13px;color:#a09070;line-height:1.6;padding:10px 12px;border-left:2px solid color-mix(in srgb,var(--bc) 50%,transparent);background:#ffffff04;margin-bottom:14px}
.modal-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}
.mstat{background:#ffffff05;border:1px solid #ffffff0a;border-radius:3px;padding:8px}
.mstat-l{font-family:'Cinzel',serif;font-size:8px;letter-spacing:2px;color:#555;margin-bottom:3px}
.mstat-v{font-family:'Cinzel',serif;font-size:14px;color:var(--gold)}
.mstat-n{font-size:10px;color:var(--green);margin-top:1px}
.req-row{display:flex;flex-wrap:wrap;justify-content:space-between;padding:6px 0;border-bottom:1px solid #ffffff06;font-size:12px}
.req-bar{flex-basis:100%;height:2px;background:#ffffff0a;margin-top:5px;border-radius:1px;overflow:hidden}
.req-bar i{display:block;height:100%;background:var(--green)}
.req-bar i.short{background:var(--ember)}
.ok{color:var(--green)}.no{color:var(--ember)}
.modal-actions{display:flex;gap:8px;margin-top:16px}
.mbtn{font-family:'Cinzel',serif;font-size:10px;letter-spacing:1.5px;border:1px solid;background:transparent;cursor:pointer;padding:10px 16px;border-radius:2px;text-transform:uppercase;transition:all .2s}
.mbtn-gold{color:#1a1408;border-color:var(--gold);background:var(--gold);flex:1;font-weight:600;animation:pulse-gold 2s infinite}
.mbtn-gold:hover:not(:disabled){background:#e0c294;transform:translateY(-1px)}
.mbtn-ghost{color:#555;border-color:#333}
.mbtn-ghost:hover{background:#ffffff06;color:#888}
.mbtn:disabled{opacity:.35;cursor:not-allowed;animation:none}
/* == COMBAT MODAL == */
#combat-modal{
display:none;position:fixed;inset:0;z-index:60;
background:radial-gradient(ellipse at 50% 50%,#2a0e08cc,#000000ee);backdrop-filter:blur(8px);
align-items:center;justify-content:center;padding:16px;
}
#combat-modal.open{display:flex;animation:fadeIn .3s ease}
.combat-box{
position:relative;overflow:hidden;
background:
  radial-gradient(ellipse at 50% 0%,#e8907c18,transparent 60%),
  linear-gradient(180deg,#140d0a,#0b0807);
border:1px solid #e8907c66;border-radius:6px;
padding:24px;width:min(420px,100%);
box-shadow:0 24px 70px #000e,0 0 50px #e8907c22;
animation:modalIn .4s cubic-bezier(.2,1.3,.4,1);
}
.combat-box.quake{animation:quake .38s ease}
@keyframes quake{0%,100%{transform:translate(0)}20%{transform:translate(-7px,3px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
.combat-round{font-family:'Cinzel',serif;font-size:9px;letter-spacing:4px;color:#e8907c88;margin-bottom:14px;text-align:center}
.vs-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.combatant{text-align:center;flex:1;position:relative}
.c-icon{
font-size:40px;width:74px;height:74px;margin:0 auto 6px;display:grid;place-items:center;border-radius:50%;
background:radial-gradient(circle at 50% 40%,#ffffff12,#00000088);
border:1px solid #ffffff14;animation:bob 2.8s ease-in-out infinite;
}
.combatant.hero .c-icon{box-shadow:0 0 18px #c8a97e33;border-color:#c8a97e44}
.combatant.enemy .c-icon{box-shadow:0 0 18px #e8907c44;border-color:#e8907c55;animation-delay:-1.4s}
@keyframes hit-shake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-8px) rotate(-4deg)}
  30%{transform:translateX(7px) rotate(3deg)}
  45%{transform:translateX(-6px) rotate(-3deg)}
  60%{transform:translateX(5px) rotate(2deg)}
  75%{transform:translateX(-3px) rotate(-1deg)}
}
.combatant.shake{animation:hit-shake .4s ease}
.combatant.shake .c-icon{filter:brightness(1.6) drop-shadow(0 0 8px #e87c7c)}
.c-name{font-family:'Cinzel',serif;font-size:11px;color:var(--gold)}
.c-hp-bar{position:relative;height:7px;background:#ffffff10;border-radius:4px;margin:5px 0;overflow:hidden;box-shadow:inset 0 1px 2px #000}
.c-hp-lag{position:absolute;left:0;top:0;bottom:0;background:#ffffffaa;border-radius:4px;transition:width .7s ease .3s}
.c-hp-fill{position:relative;z-index:1;height:100%;border-radius:4px;transition:width .3s ease,background .3s}
.c-hp-txt{font-family:'Cinzel',serif;font-size:10px}
.vs-divider{font-family:'Cinzel',serif;font-weight:900;font-size:22px;color:#e8907c55;padding:0 8px;text-shadow:0 0 12px #e8907c55}
.dmg-pop{
position:absolute;left:50%;top:6px;transform:translateX(-50%);pointer-events:none;z-index:3;white-space:nowrap;
font-family:'Cinzel',serif;font-weight:900;font-size:22px;color:#ff8a7a;
text-shadow:0 0 6px #000,0 0 14px #e8907c;animation:dmgPop 1.05s ease-out forwards;
}
.dmg-pop.big{font-size:30px;color:#ffd27a;text-shadow:0 0 6px #000,0 0 18px #ffb84a}
.dmg-pop.void{font-size:15px;color:#c8d4ff;text-shadow:0 0 6px #000,0 0 12px var(--void)}
@keyframes dmgPop{0%{opacity:0;transform:translate(-50%,12px) scale(.5)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.25)}100%{opacity:0;transform:translate(-50%,-46px) scale(1)}}
.combat-log{
background:#00000055;border:1px solid #ffffff0a;border-radius:3px;
padding:8px 10px;height:84px;overflow-y:auto;margin-bottom:12px;
}
.combat-log::-webkit-scrollbar{width:2px}
.combat-log::-webkit-scrollbar-thumb{background:var(--goldb)}
.clog-line{font-size:11px;color:#777;padding:1px 0;border-bottom:1px solid #ffffff04}
.clog-line:last-child{color:var(--stone);animation:slideIn .25s ease}
.combat-actions{display:flex;gap:8px;flex-wrap:wrap}
.cbtn{font-family:'Cinzel',serif;font-size:10px;letter-spacing:1px;border:1px solid;background:#00000033;cursor:pointer;padding:9px 14px;border-radius:2px;text-transform:uppercase;transition:all .15s;flex:1}
.cbtn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 14px #0008,0 0 12px currentColor}
.cbtn:active:not(:disabled){transform:translateY(0) scale(.97)}
.enemy-turn{font-family:'Cinzel',serif;font-size:11px;color:var(--ember);animation:blink .5s infinite;padding:9px;width:100%;text-align:center}
.combat-banner{
position:absolute;left:0;right:0;top:30%;z-index:5;pointer-events:none;text-align:center;
font-family:'Cinzel',serif;font-weight:900;font-size:34px;letter-spacing:8px;padding:12px 0;
animation:bannerIn .6s cubic-bezier(.2,1.6,.4,1) both;
}
.combat-banner span{display:block;font-size:10px;letter-spacing:2px;font-weight:400;margin-top:4px;opacity:.85}
.combat-banner.win{background:linear-gradient(90deg,transparent,#000000dd,transparent);color:var(--gold);text-shadow:0 0 22px var(--gold)}
.combat-banner.win span{color:var(--green);text-shadow:none}
.combat-banner.lose{background:linear-gradient(90deg,transparent,#200606ee,transparent);color:#e87c7c;text-shadow:0 0 22px #e87c7c}
@keyframes bannerIn{from{opacity:0;transform:scale(1.8);letter-spacing:22px}to{opacity:1;transform:scale(1)}}
/* == LEVEL UP == */
#levelup{
display:none;position:fixed;inset:0;z-index:70;
background:#00000099;backdrop-filter:blur(10px);
align-items:center;justify-content:center;
}
#levelup.open{display:flex;animation:fadeIn .4s ease}
.lu-box{
position:relative;overflow:hidden;
text-align:center;padding:36px;max-width:360px;
border:1px solid var(--gold);border-radius:6px;
background:#0e0c09;box-shadow:0 0 60px var(--goldf),0 0 120px #c8a97e22;
animation:modalIn .5s cubic-bezier(.2,1.3,.4,1);
}
.lu-box > *:not(.lu-rays){position:relative}
.lu-rays{
position:absolute;left:50%;top:22%;width:640px;height:640px;margin:-320px 0 0 -320px;pointer-events:none;
background:repeating-conic-gradient(from 0deg,#c8a97e1c 0deg 7deg,transparent 7deg 20deg);
-webkit-mask-image:radial-gradient(circle,#000 15%,transparent 60%);mask-image:radial-gradient(circle,#000 15%,transparent 60%);
animation:spin 20s linear infinite;
}
.lu-level{font-family:'Cinzel',serif;font-weight:900;font-size:32px;color:var(--gold);margin-bottom:6px;animation:levelPop .5s ease;text-shadow:0 0 20px var(--goldb)}
.lu-btn{width:100%;padding:11px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;border:1px solid var(--gold);color:#1a1408;background:var(--gold);cursor:pointer;border-radius:2px;font-weight:600;transition:all .2s}
.lu-btn:hover{background:#e0c294;box-shadow:0 0 20px var(--goldb)}
/* == DAILY REWARD == */
#daily{
display:none;position:fixed;inset:0;z-index:65;
background:#000000aa;backdrop-filter:blur(8px);
align-items:center;justify-content:center;
}
#daily.open{display:flex;animation:fadeIn .4s ease}
.daily-box{
position:relative;
text-align:center;padding:32px;max-width:340px;
border:1px solid var(--void);border-radius:6px;
background:radial-gradient(ellipse at 50% 0%,#8a9fe81a,transparent 60%),#0e0c09;
box-shadow:0 0 50px #8a9fe822;
animation:modalIn .4s cubic-bezier(.2,1.3,.4,1);
}
.daily-close{
position:absolute;top:8px;right:10px;
width:24px;height:24px;line-height:22px;
border:1px solid #ffffff1a;border-radius:3px;
background:transparent;color:#888;
font-size:16px;cursor:pointer;
transition:all .15s;
}
.daily-close:hover{color:var(--void);border-color:var(--void);background:var(--voidf)}
.reward-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:16px 0}
.reward-day{
border:1px solid #ffffff0a;border-radius:4px;padding:9px 4px;
text-align:center;transition:all .2s;background:#ffffff04;
}
.reward-day:last-child{grid-column:span 2;border-color:#c8a97e33;background:linear-gradient(135deg,#c8a97e14,transparent)}
.reward-day.claimed{border-color:var(--green);background:var(--greenf);opacity:.6}
.reward-day.today{border-color:var(--gold);background:var(--goldf);animation:pulse-gold 2s infinite;transform:scale(1.04)}
.reward-day.future{opacity:.35}
.daily-claim{width:100%;padding:11px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;border:1px solid var(--void);color:#0a0f1a;background:var(--void);cursor:pointer;border-radius:2px;font-weight:600;transition:all .2s}
.daily-claim:hover{background:#a8b8f0;box-shadow:0 0 18px #8a9fe866}
/* == EXPLORE TAB == */
.exp-hero{
--rc:#8a9fe8;
display:flex;align-items:center;gap:9px;padding:8px 9px;margin-bottom:6px;
border:1px solid #ffffff0a;border-radius:4px;background:linear-gradient(180deg,#ffffff06,#ffffff02);
}
.exp-hero.away{border-color:#8a9fe833}
.exp-hero.ready{border-color:var(--green);background:var(--greenf);box-shadow:0 0 12px #7aca8a22}
.hero-avatar.sm{width:34px;height:34px;font-size:18px}
.exp-hero.away .hero-avatar{opacity:.55;filter:grayscale(.4)}
.exp-hero-info{flex:1;min-width:0}
.exp-spec{font-size:9px;color:#777;font-family:'Cinzel',serif;letter-spacing:.5px;margin-top:1px}
.exp-bar{height:3px;background:#ffffff0a;border-radius:2px;margin-top:5px;overflow:hidden}
.exp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--void),#c8e0ff);box-shadow:0 0 6px var(--void);transition:width 1s linear}
.exp-st{font-family:'Cinzel',serif;font-size:9px;white-space:nowrap}
.exp-st.home{color:#6a5d48}
.exp-st.away{color:var(--void)}
.exp-collect{
font-family:'Cinzel',serif;font-size:9px;letter-spacing:1px;font-weight:600;cursor:pointer;
padding:5px 9px;border-radius:2px;border:1px solid var(--green);background:var(--green);color:#0a1a0a;
box-shadow:0 0 10px #7aca8a66;animation:readyBob 1.2s ease-in-out infinite;
}
.region{
--dc:#b0a888;
border:1px solid #ffffff0a;border-left:2px solid var(--dc);border-radius:4px;padding:10px;margin-bottom:8px;
background:linear-gradient(90deg,color-mix(in srgb,var(--dc) 9%,transparent),#ffffff03 65%);
}
.region.locked{opacity:.45;filter:grayscale(.6)}
.region-head{display:flex;gap:9px;align-items:center}
.region-name{font-family:'Cinzel',serif;font-size:11px;color:var(--stone)}
.region-meta{font-size:10px;color:var(--dc);margin-top:1px}
.region-desc{font-size:11px;font-style:italic;color:#8a7d68;line-height:1.4;margin:7px 0 5px}
.region-loot{font-size:10px;color:var(--green);margin-bottom:8px}
.region-send{display:flex;gap:5px}
.send-btn{
flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;
font-family:'Cinzel',serif;font-size:9px;color:var(--stone);cursor:pointer;
padding:5px 2px;border-radius:3px;border:1px solid color-mix(in srgb,var(--dc) 40%,transparent);
background:#00000044;transition:all .15s;
}
.send-btn em{font-style:normal;font-size:8px;color:#8a7d68}
.send-btn:hover:not(:disabled){border-color:var(--dc);background:color-mix(in srgb,var(--dc) 14%,transparent);transform:translateY(-1px)}
.send-btn:disabled{opacity:.3;cursor:not-allowed}
.echo{font-size:11px;font-style:italic;color:#3e3628;padding:6px 8px;margin-bottom:4px;border-left:2px solid #ffffff08}
.echo.found{color:#b8a8e0;border-left-color:#8a9fe866;background:#8a9fe80a;line-height:1.5}
.hero-away{font-size:10px;color:var(--void);margin-bottom:3px}
/* raid leader picker */
.leader-row{display:flex;align-items:center;gap:6px;font-size:11px;color:#666;margin-bottom:10px}
.leader-chip{
width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;
border:1px solid #ffffff1a;background:#00000055;transition:all .15s;
}
.leader-chip.on{border-color:var(--gold);box-shadow:0 0 10px var(--goldb);background:var(--goldf)}
.leader-chip:disabled{opacity:.3;cursor:not-allowed;filter:grayscale(1)}
.leader-warn{font-size:11px;color:var(--ember);font-style:italic;margin:-4px 0 10px}
/* == LORE ECHO POPUP == */
#lore-pop{
display:none;position:fixed;inset:0;z-index:75;cursor:pointer;
background:radial-gradient(ellipse at 50% 45%,#14183acc,#000000f0);backdrop-filter:blur(8px);
align-items:center;justify-content:center;padding:24px;
}
#lore-pop.open{display:flex;animation:fadeIn .8s ease}
.lore-box{max-width:420px;text-align:center;animation:modalIn .9s cubic-bezier(.2,1,.4,1)}
.lore-glyph{font-size:34px;margin-bottom:12px;filter:drop-shadow(0 0 14px var(--void));animation:float 3s ease-in-out infinite}
.lore-kicker{font-family:'Cinzel',serif;font-size:9px;letter-spacing:5px;color:var(--void);margin-bottom:16px}
.lore-text{font-style:italic;font-size:20px;line-height:1.6;color:#d8dcf5;text-shadow:0 0 18px #8a9fe866}
.lore-hint{font-family:'Cinzel',serif;font-size:8px;letter-spacing:3px;color:#444a66;margin-top:26px;text-transform:uppercase}
/* == PARTY BATTLE == */
.combat-box{width:min(560px,100%);padding:18px;max-height:96vh;overflow-y:auto}
.b-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px}
.b-head .combat-round{margin:0;text-align:left}
.b-order{display:flex;gap:3px;align-items:center;font-family:'Cinzel',serif;font-size:8px;letter-spacing:1px;color:#666}
.b-order span{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#00000066;border:1px solid #ffffff14;font-size:11px}
.b-order span.hero{border-color:#c8a97e66}
.b-order span.enemy{border-color:#e8907c66}
.b-order span:first-of-type{width:26px;height:26px;font-size:13px;box-shadow:0 0 8px #ffffff22}
.b-row{display:flex;gap:8px;justify-content:center}
.b-unit{
flex:1;max-width:160px;min-width:0;position:relative;text-align:center;
padding:8px 6px;border-radius:6px;border:1px solid #ffffff10;background:#00000040;
transition:transform .2s,border-color .2s,box-shadow .2s,opacity .3s;
}
.b-unit .c-icon{width:52px;height:52px;font-size:28px;margin:0 auto 5px}
.b-unit.hero .c-icon{box-shadow:0 0 14px #c8a97e33;border-color:#c8a97e44}
.b-unit.enemy .c-icon{box-shadow:0 0 14px #e8907c44;border-color:#e8907c55;animation-delay:-1.4s}
.b-unit.boss .c-icon{width:66px;height:66px;font-size:38px;box-shadow:0 0 26px #c08ae866;border-color:#c08ae888}
.b-unit.active{border-color:var(--gold);box-shadow:0 0 18px var(--goldb);transform:translateY(-3px)}
.b-unit.enemy.active{border-color:var(--ember);box-shadow:0 0 18px #e8907c55}
.b-unit.ko{opacity:.3;filter:grayscale(1)}
.b-unit.ko .c-icon{animation:none}
.b-unit.targetable{cursor:pointer;opacity:1;filter:none;--tc:var(--ember);border-color:var(--tc);animation:targetPulse 1s ease-in-out infinite}
.b-unit.hero.targetable{--tc:var(--green)}
.b-unit.targetable:hover{transform:translateY(-3px)}
@keyframes targetPulse{0%,100%{box-shadow:0 0 4px color-mix(in srgb,var(--tc) 30%,transparent)}50%{box-shadow:0 0 18px var(--tc)}}
.b-unit.shake{animation:hit-shake .4s ease}
.b-unit.shake .c-icon{filter:brightness(1.6) drop-shadow(0 0 8px #e87c7c)}
.b-name{font-family:'Cinzel',serif;font-size:9px;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.b-unit.enemy .b-name{color:#e8b0a0}
.b-bar{position:relative;height:6px;background:#ffffff10;border-radius:3px;margin:5px 0 3px;overflow:hidden;box-shadow:inset 0 1px 2px #000}
.b-mp{height:3px;background:#ffffff0a;border-radius:2px;margin:4px 0 2px;overflow:hidden}
.b-mp i{display:block;height:100%;background:linear-gradient(90deg,#5a6fd0,#a8c0ff);transition:width .4s}
.b-num{font-family:'Cinzel',serif;font-size:9px;color:#999}
.b-num.mp{color:#8a9fe8;font-size:8px}
.b-log{height:68px;margin:12px 0}
.b-turn{font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--gold);text-align:center;margin:12px 0 8px}
.b-turn.dim{color:#444}
.b-menu{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.b-menu.one{grid-template-columns:1fr;margin-top:12px}
.b-menu .cbtn{padding:10px 8px;line-height:1.3}
.b-menu .cbtn small{display:block;font-size:8px;letter-spacing:0;text-transform:none;opacity:.75;margin-top:2px;font-family:'Crimson Text',serif;font-size:11px}
.b-menu .cbtn:disabled{opacity:.3;cursor:not-allowed}
.b-menu .back{grid-column:1/-1}
.dmg-pop.heal{color:#9af0a8;text-shadow:0 0 6px #000,0 0 12px #4aaa5a}
.combat-banner{top:34%}
/* raid tab */
.leader-chip{display:inline-grid;place-items:center}
.leader-chip.off{opacity:.3;filter:grayscale(1)}
.supplies{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:#888;margin:-2px 0 12px}
.supplies b{color:var(--green);font-family:'Cinzel',serif;font-weight:400}
.raid-foes{display:flex;align-items:center;gap:3px;font-size:16px;margin-bottom:6px}
.raid-foes em{font-style:normal;font-size:10px;color:#666;margin-left:6px}
/* heroes tab skills */
.skill-row{font-size:11px;color:#8a7d68;padding:7px 10px;margin-bottom:5px;border-left:2px solid #8a9fe855;background:#8a9fe808}
.skill-row div{display:flex;justify-content:space-between;margin-bottom:2px}
.skill-row b{font-family:'Cinzel',serif;font-weight:400;font-size:10px;color:var(--void);letter-spacing:.5px}
.skill-row span{font-family:'Cinzel',serif;font-size:9px;color:#5a6fd0}
.skill-hint{font-size:10px;font-style:italic;color:#555;margin-top:8px}
@media(max-width:560px){
.combat-box{padding:14px 10px}
.b-row{gap:5px}
.b-unit{padding:7px 3px}
.b-unit .c-icon{width:44px;height:44px;font-size:24px}
.b-unit.boss .c-icon{width:54px;height:54px;font-size:30px}
.b-order span{width:18px;height:18px;font-size:9px}
.b-order span:first-of-type{width:22px;height:22px;font-size:11px}
}
/* == WORLD MAP == */
.top-world{border:1px solid #7a5a2a;color:var(--gold);background:var(--goldf)}
.top-world:hover{box-shadow:0 0 12px var(--goldb)}
#world{
display:none;position:fixed;inset:0;z-index:55;flex-direction:column;
background:#050405;
}
#world.open{display:flex;animation:fadeIn .5s ease}
.w-top{
display:flex;align-items:center;gap:10px;padding:8px 12px;flex-shrink:0;
background:linear-gradient(180deg,#16110b,#0b0907);border-bottom:1px solid #c8a97e22;
}
.w-head{min-width:0;flex:1}
.w-title{font-family:'Cinzel',serif;font-size:12px;letter-spacing:2px;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-zone{font-size:11px;font-style:italic;color:#8a7d68}
.w-party{display:flex;gap:6px}
.w-hero{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:16px;line-height:1}
.w-hero.down{opacity:.35;filter:grayscale(1)}
.w-hp{width:30px;height:3px;background:#ffffff14;border-radius:2px;overflow:hidden}
.w-hp i{display:block;height:100%;transition:width .4s}
.w-home{border:1px solid #7a5a2a;color:var(--gold);background:var(--goldf);white-space:nowrap}
.w-home:disabled{opacity:.4;cursor:not-allowed}
.w-stage{flex:1;position:relative;overflow:hidden;min-height:0}
#w-canvas{position:absolute;inset:0;display:block}
.w-toast{
position:absolute;left:50%;top:14px;transform:translate(-50%,-10px);opacity:0;pointer-events:none;
max-width:min(440px,90%);text-align:center;padding:9px 16px;border-radius:4px;
font-size:13px;font-style:italic;color:var(--stone);
background:#0e0c09ee;border:1px solid var(--goldb);box-shadow:0 8px 24px #000c;
transition:opacity .3s,transform .3s;
}
.w-toast.show{opacity:1;transform:translate(-50%,0)}
.w-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:#fff}
.w-flash.on{animation:encFlash .45s ease}
@keyframes encFlash{0%{opacity:0}15%{opacity:.85}30%{opacity:.1}45%{opacity:.7}100%{opacity:0}}
.w-bottom{
flex-shrink:0;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:4px 12px;align-items:center;
padding:8px 12px 12px;background:linear-gradient(0deg,#16110b,#0b0907);border-top:1px solid #c8a97e22;
}
.w-pack{font-size:12px;color:#8a7d68;line-height:1.5}
.w-pack b{font-family:'Cinzel',serif;font-weight:400;font-size:10px;letter-spacing:2px;color:var(--gold);margin-right:4px}
.w-items{display:block;font-size:12px;color:#aaa}
.w-hint{grid-column:1;font-size:10px;font-style:italic;color:#4a4030}
.w-pad{
grid-row:1/3;grid-column:2;display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:4px;
touch-action:none;user-select:none;-webkit-user-select:none;
}
.w-pad button{
border:1px solid #c8a97e44;border-radius:8px;background:linear-gradient(180deg,#221a12,#120e0a);
color:var(--gold);font-size:14px;cursor:pointer;touch-action:none;
}
.w-pad button:active{background:var(--goldf);border-color:var(--gold);transform:scale(.94)}
.pad-up{grid-column:2;grid-row:1}
.pad-left{grid-column:1;grid-row:2}
.pad-right{grid-column:3;grid-row:2}
.pad-down{grid-column:2;grid-row:3}
@media(max-width:560px){
.w-top{padding:8px 10px;gap:8px}
.w-hero{font-size:14px}
.w-hp{width:24px}
.w-pad{grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px)}
.w-hint{display:none}
}
/* == DESCENT == */
#descent{
display:none;position:fixed;inset:0;z-index:57;flex-direction:column;
background:radial-gradient(ellipse at 50% 35%,#1d1210 0%,#070506 70%);
}
#descent.open{display:flex;animation:fadeIn .5s ease}
.d-depth{display:flex;gap:5px;margin-top:5px}
.d-depth i{width:16px;height:4px;border-radius:2px;background:#ffffff14}
.d-depth i.done{background:var(--gold);box-shadow:0 0 6px var(--goldb)}
.d-depth i.here{background:var(--ember);box-shadow:0 0 8px var(--ember);animation:blink 1.2s infinite}
.d-depth i.boss{width:22px;background:#e8907c33}
.d-depth i.boss.done{background:var(--ember)}
.d-stage{flex:1;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 16px}
.d-big{font-size:54px;margin-bottom:10px;filter:drop-shadow(0 0 18px #e8907c55);animation:float 3s ease-in-out infinite}
.d-big.pulse{animation:blink 1s infinite}
.d-kicker{font-family:'Cinzel',serif;font-size:11px;letter-spacing:4px;color:var(--gold);text-transform:uppercase;margin-bottom:10px}
.d-text{font-size:16px;font-style:italic;color:#c8bba4;line-height:1.6;max-width:460px;margin-bottom:14px}
.d-sub{font-size:12px;color:#6a5d48;font-style:italic;margin:-4px 0 14px}
.d-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.d-btn{
font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;
padding:12px 22px;border-radius:3px;border:1px solid #c8a97e55;background:#00000044;color:var(--stone);transition:all .2s;
display:flex;flex-direction:column;align-items:center;gap:3px;
}
.d-btn small{font-family:'Crimson Text',serif;font-size:12px;letter-spacing:0;text-transform:none;color:#8a7d68}
.d-btn.gold{border-color:var(--gold);background:var(--gold);color:#1a1408;font-weight:600}
.d-btn.gold small{color:#3a2a14}
.d-btn.gold:hover{background:#e0c294;box-shadow:0 0 20px var(--goldb)}
.d-btn.ghost{border-color:#333;color:#666}
.d-btn:hover{transform:translateY(-1px)}
.d-doors{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;width:100%;max-width:620px}
.d-door{
flex:1;min-width:140px;max-width:190px;min-height:170px;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
border:1px solid #c8a97e44;border-radius:90px 90px 6px 6px;padding:22px 10px 16px;
background:linear-gradient(180deg,#1a1410,#0a0806);box-shadow:inset 0 0 30px #000,0 8px 22px #000a;
color:var(--stone);transition:all .2s;
}
.d-door:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:inset 0 0 30px #000,0 0 24px var(--goldb)}
.d-door.elite{border-color:#e8907c88;background:linear-gradient(180deg,#2a1210,#0a0606)}
.d-door.boss{border-color:var(--ember);box-shadow:inset 0 0 30px #000,0 0 30px #e8907c44;min-width:200px}
.d-door.boon{border-color:#8a9fe866}
.d-door-ic{font-size:36px;filter:drop-shadow(0 0 10px #c8a97e55)}
.d-door-label{font-family:'Cinzel',serif;font-size:12px;letter-spacing:1px;color:var(--gold)}
.d-door-sub{font-size:11px;font-style:italic;color:#8a7d68}
.d-door.elite .d-door-sub{color:var(--ember)}
.d-boon-pick{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:640px}
.d-boon-card{
flex:1;min-width:150px;max-width:200px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;
padding:16px 12px;border-radius:6px;border:1px solid #8a9fe866;
background:radial-gradient(ellipse at 50% 0%,#8a9fe822,transparent 70%),#0c0b10;color:#c8bba4;transition:all .2s;
}
.d-boon-card:hover{transform:translateY(-4px);border-color:var(--void);box-shadow:0 0 22px #8a9fe844}
.d-boon-card .ic{font-size:30px;filter:drop-shadow(0 0 10px var(--void))}
.d-boon-card b{font-family:'Cinzel',serif;font-weight:400;font-size:12px;color:var(--void);letter-spacing:1px}
.d-boon-card span:last-child{font-size:13px;font-style:italic;line-height:1.4}
.d-market{display:flex;flex-direction:column;gap:6px;width:100%;max-width:380px;margin-bottom:8px}
.d-offer{
display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:left;cursor:pointer;
padding:10px 12px;border-radius:4px;border:1px solid #e8d07c44;background:#00000044;color:var(--stone);transition:all .15s;
}
.d-offer span{font-size:14px}
.d-offer em{grid-column:1;font-size:11px;color:#8a7d68}
.d-offer b{grid-row:1/3;grid-column:2;align-self:center;font-family:'Cinzel',serif;font-weight:400;color:#e8d07c}
.d-offer:hover:not(:disabled){border-color:#e8d07c;background:#e8d07c11}
.d-offer:disabled{opacity:.35;cursor:not-allowed}
.d-foot{flex-shrink:0;padding:10px 14px 14px;border-top:1px solid #c8a97e22;background:linear-gradient(0deg,#16110b,#0b0907)}
.d-boons{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.d-boon{font-size:11px;padding:3px 8px;border-radius:10px;border:1px solid #8a9fe855;color:#b8c8ff;background:#8a9fe811}
.d-none{font-size:11px;font-style:italic;color:#4a4030}
/* entrance choice */
.w-choice{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#000000aa;backdrop-filter:blur(3px);z-index:3;padding:16px}
.w-choice.open{display:flex;animation:fadeIn .3s ease}
.w-choice-box{
display:flex;flex-direction:column;gap:10px;width:min(340px,100%);text-align:center;
padding:22px;border-radius:6px;border:1px solid var(--goldb);background:#0e0c09;box-shadow:0 20px 50px #000d;
}
.w-choice-box .d-btn{width:100%}
/* archive research */
.rs-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #ffffff08}
.rs-row.locked{opacity:.4}
.rs-ic{font-size:18px;width:26px;text-align:center}
.rs-info{flex:1;min-width:0}
.rs-name{font-family:'Cinzel',serif;font-size:10px;color:var(--void);letter-spacing:.5px;display:flex;align-items:center;gap:6px}
.rs-pips{display:inline-flex;gap:3px}
.rs-pips i{width:6px;height:6px;transform:rotate(45deg);background:#ffffff14}
.rs-pips i.on{background:var(--void);box-shadow:0 0 5px var(--void)}
.rs-desc{font-size:11px;color:#8a7d68}
.rs-buy{font-family:'Cinzel',serif;font-size:9px;white-space:nowrap;cursor:pointer;padding:6px 8px;border-radius:2px;border:1px solid var(--void);background:var(--voidf);color:var(--void)}
.rs-buy:disabled{opacity:.35;cursor:not-allowed}
.rs-lock,.rs-max{font-family:'Cinzel',serif;font-size:9px;color:#666;white-space:nowrap}
.rs-max{color:var(--green)}
@media(max-width:560px){
.d-doors{gap:8px}
.d-door{min-width:96px;min-height:140px;padding:18px 6px 12px}
.d-door-ic{font-size:28px}
.d-door.boss{min-width:160px}
.d-boon-card{min-width:100%}
.d-text{font-size:15px}
}
/* descent: route, stamina, events, extraction */
#d-depth{display:flex;gap:4px;margin-top:6px;align-items:flex-start}
.rt-floor{display:flex;flex-direction:column;gap:1px;align-items:center;padding:2px 3px;border-radius:4px;border:1px solid transparent;min-width:20px}
.rt-floor span{font-size:11px;line-height:1.2;opacity:.45;filter:grayscale(.6)}
.rt-floor.next{border-color:var(--gold);background:var(--goldf);box-shadow:0 0 8px var(--goldb)}
.rt-floor.next span{opacity:1;filter:none}
.rt-floor.done span.skip{opacity:.12}
.rt-floor.done span.picked{opacity:1;filter:none}
.rt-floor.boss{border-color:#e8907c55}
.d-log{font-size:13px;font-style:italic;color:#9fc8a8;max-width:460px;margin-bottom:14px;padding:8px 12px;border-left:2px solid #7aca8a66;background:#7aca8a0c;text-align:left}
.d-door-cost{font-family:'Cinzel',serif;font-size:9px;color:#e8c07c99;letter-spacing:1px}
.d-door.rest{border-color:#e8a05c66}
.d-door.shrine{border-color:#8a9fe866}
.d-door.event{border-color:#c8bba444}
.d-door.market{border-color:#e8d07c66}
.d-choices{display:flex;flex-direction:column;gap:8px;width:100%;max-width:360px}
.d-choices .d-btn{width:100%}
.d-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.d-tithe{display:flex;gap:8px;margin-bottom:12px}
.d-tithe button{
flex:1;display:flex;flex-direction:column;gap:2px;cursor:pointer;padding:8px 14px;border-radius:4px;
font-family:'Cinzel',serif;font-size:10px;letter-spacing:1px;color:#999;border:1px solid #333;background:#00000044;
}
.d-tithe button small{font-family:'Crimson Text',serif;font-size:11px;letter-spacing:0;color:#777}
.d-tithe button.on{color:var(--gold);border-color:var(--gold);background:var(--goldf)}
.d-tithe button:disabled{opacity:.3;cursor:not-allowed}
.d-extract{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:6px}
.d-extract .d-btn{border-color:#7aca8a88;color:var(--green)}
.d-extract .d-btn small{color:#9fc8a8}
.d-extract .d-sub{margin:0}
.d-stam{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.d-stam-bar{flex:1;max-width:160px;height:5px;border-radius:3px;background:#ffffff14;overflow:hidden}
.d-stam-bar i{display:block;height:100%;transition:width .4s}
.d-stam span{font-family:'Cinzel',serif;font-size:10px;color:#aaa}
.d-stam em{font-style:normal;color:var(--ember);font-family:'Crimson Text',serif;font-size:11px}
#d-pack b{font-family:'Cinzel',serif;font-weight:400;font-size:10px;letter-spacing:2px;color:var(--gold);margin-right:4px}
@media(max-width:560px){
.rt-floor{min-width:0;padding:2px 1px}
.rt-floor span{font-size:9px}
#d-depth{gap:2px}
}
/* 2.5D view: the pad turns 45deg so each arrow points along the diamond grid */
.w-view{border:1px solid #3a4a7a;color:var(--void);background:var(--voidf);white-space:nowrap}
#world.iso .w-pad{transform:rotate(45deg);margin:14px}
#world.iso .w-pad button{border-radius:10px}
.w-pad button i{display:inline-block;width:11px;height:11px;border-top:3px solid var(--gold);border-left:3px solid var(--gold);pointer-events:none}
.pad-up i{transform:translateY(3px) rotate(45deg)}
.pad-right i{transform:translateX(-3px) rotate(135deg)}
.pad-down i{transform:translateY(-3px) rotate(225deg)}
.pad-left i{transform:translateX(3px) rotate(-45deg)}
/* == PIXEL SPRITES == */
img.px{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
.hero-avatar img.px{width:20px;height:auto}
.hero-avatar.sm img.px{width:16px}
.leader-chip img.px{width:14px;margin:auto}
.w-hero span img.px{width:14px;height:auto}
.b-order span img.px{width:11px}
.b-unit.hero .c-icon{border-radius:8px;border-color:#c8a97e33;background:radial-gradient(ellipse at 50% 90%,#e8b06033,transparent 70%),#00000055;overflow:visible}
.b-unit.hero .c-icon img.px{width:34px;height:auto;filter:drop-shadow(0 3px 2px #000c)}
.champ-tag{font-family:'Cinzel',serif;font-size:7px;letter-spacing:1.5px;color:#1a1408;background:var(--gold);padding:1px 4px;border-radius:2px;vertical-align:middle}
/* == CHAMPION FORGE == */
#forge{
display:none;position:fixed;inset:0;z-index:95;overflow-y:auto;
background:radial-gradient(ellipse at 50% 40%,#1e1530 0%,#0a0710 55%,#040306 100%);
}
#forge.open{display:block;animation:fadeIn .8s ease}
.forge-panel{
width:980px;max-width:96vw;margin:24px auto;padding:26px 28px 22px;color:#dcd7ce;font-family:'Crimson Text',serif;
background:linear-gradient(180deg,#120e1a 0%,#07060a 100%);border:1px solid #3d3550;border-top:3px solid #c8a97e;border-radius:2px;
box-shadow:0 10px 40px rgba(0,0,0,.9),inset 0 0 20px rgba(138,159,232,.05);
}
.forge-panel h2{font-family:'Cinzel',serif;font-weight:900;font-size:24px;letter-spacing:3px;text-align:center;color:#c8a97e;text-shadow:0 0 18px #c8a97e44}
.fg-intro{text-align:center;font-style:italic;font-size:15px;color:#9a90b0;margin:4px 0 0}
.forge-layout{display:grid;grid-template-columns:1fr 240px 1fr;gap:22px;margin:20px 0}
.fg-col{min-width:0}
.fg-label{display:flex;align-items:center;gap:8px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:#c8a97e;margin:14px 0 7px}
.fg-label:first-child{margin-top:0}
.fg-label span{font-family:'Crimson Text',serif;letter-spacing:0;text-transform:none;font-size:12px;color:#ffb84a;font-style:italic}
#forge-name{width:100%;padding:9px 11px;font-family:'Crimson Text',serif;font-size:16px;color:#f0e6d0;background:#07060a;border:1px solid #3d3550;border-radius:2px;outline:none}
#forge-name:focus{border-color:#c8a97e;box-shadow:0 0 0 2px #c8a97e22}
.fg-classes{display:flex;flex-direction:column;gap:6px}
.fg-card,.fg-origin{cursor:pointer;text-align:left;color:#dcd7ce;font-family:'Crimson Text',serif;border:1px solid #3d3550;background:#14101f;border-radius:2px;transition:all .15s}
.fg-card{display:grid;grid-template-columns:32px 1fr;gap:1px 10px;align-items:center;padding:7px 10px}
.fg-card img.px{grid-row:1/3;width:26px;height:32px}
.fg-card b,.fg-origin b{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.5px;color:#e8d8b8}
.fg-card span{font-size:12px;line-height:1.25;color:#9a90b0}
.fg-card:hover,.fg-origin:hover{border-color:#c8a97e88;background:#1c1628}
.fg-card.on,.fg-origin.on{border-color:#c8a97e;background:#2b2238;box-shadow:0 0 14px #c8a97e33,inset 3px 0 0 #c8a97e}
.fg-card.on b,.fg-origin.on b{color:#c8a97e}
.fg-origins{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fg-origin{display:flex;flex-direction:column;gap:1px;padding:7px 9px}
.fg-origin span{font-size:12px;line-height:1.25;color:#9a90b0}
.fg-origin em{font-style:normal;font-family:'Cinzel',serif;font-size:9px;color:#7aca8a;margin-top:2px}
.fg-center{display:flex;flex-direction:column;align-items:center}
.forge-portrait{position:relative;width:100%;height:200px;background:#040306;border:1px solid #2a2238;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.depth-blur-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(232,144,124,.22) 0%,rgba(138,100,200,.08) 45%,transparent 72%);filter:blur(4px);animation:flicker 2.4s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:.85}40%{opacity:1}70%{opacity:.75}}
#forge-embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#forge-sprite{position:relative;z-index:2;width:96px;height:120px;margin-bottom:24px;filter:drop-shadow(0 0 1px #000) drop-shadow(0 8px 6px #000c);animation:float 3s ease-in-out infinite}
#forge-sprite.pop{animation:spritePop .45s cubic-bezier(.2,1.6,.4,1),float 3s ease-in-out .45s infinite}
@keyframes spritePop{from{transform:scale(.6);opacity:.2;filter:brightness(3)}to{transform:scale(1);opacity:1}}
.forge-plinth{position:absolute;bottom:12px;left:50%;width:120px;height:20px;margin-left:-60px;border-radius:50%;background:radial-gradient(ellipse,#3a2a48 0%,#120e1a 60%,transparent 72%)}
.forge-title{font-family:'Cinzel',serif;font-weight:900;font-size:18px;letter-spacing:4px;color:#c8a97e;text-shadow:0 0 16px #c8a97e44;margin-top:10px;text-align:center;word-break:break-word}
.forge-role{font-size:13px;font-style:italic;color:#9a90b0;margin:2px 0 10px;text-align:center}
#fg-stats{width:100%}
.fg-stat{display:grid;grid-template-columns:32px 1fr 52px;align-items:center;gap:8px;margin:5px 0;font-family:'Cinzel',serif;font-size:10px;color:#c8a97e}
.fg-bar{height:6px;background:#07060a;border:1px solid #2a2238;border-radius:3px;overflow:hidden;display:flex}
.fg-bar i{display:block;height:100%;background:linear-gradient(90deg,#5a4a70,#8a7aa8);transition:width .3s}
.fg-bar b{display:block;height:100%;background:#7aca8a;box-shadow:0 0 6px #7aca8a;transition:width .3s}
.fg-stat em{font-style:normal;font-size:13px;color:#f0e6d0;text-align:right}
.fg-stat small{color:#7aca8a;font-size:10px;margin-left:3px}
.fg-attr{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #2a2238}
.fg-attr>div{flex:1;min-width:0}
.fg-attr b{font-family:'Cinzel',serif;font-size:11px;display:block;color:#e8d8b8}
.fg-attr span{font-size:12px;color:#9a90b0}
.fg-attr i{font-style:normal;color:#ffb84a;letter-spacing:2px;font-size:12px;min-width:46px;text-align:center}
.fg-attr button{width:28px;height:28px;flex-shrink:0;border-radius:50%;border:1px solid #c8a97e;background:#14101f;color:#c8a97e;font-size:16px;cursor:pointer;line-height:1}
.fg-attr button:hover:not(:disabled){background:#c8a97e;color:#07060a}
.fg-attr button:disabled{opacity:.3;cursor:not-allowed}
.fg-skill{padding:6px 9px;margin-bottom:5px;background:#0c0a12;border-left:2px solid #3d3550;font-size:12px;color:#9a90b0;line-height:1.3}
.fg-skill b{display:flex;justify-content:space-between;font-family:'Cinzel',serif;font-weight:400;font-size:10px;color:#a8b8ff;margin-bottom:1px}
.fg-skill b em{font-style:normal;color:#6a7ab0}
.fg-skill.trait{border-left-color:#c8a97e66}
.fg-skill.trait b{color:#c8a97e}
.forge-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;border-top:1px solid #2a2238}
.fg-note{font-size:13px;font-style:italic;color:#6a6080}
.fg-confirm{padding:12px 30px;font-size:13px;letter-spacing:2px;white-space:nowrap}
@media(max-width:860px){
.forge-panel{margin:10px auto;padding:20px 16px 18px}
.forge-layout{grid-template-columns:1fr;gap:6px;margin:14px 0}
.fg-center{order:-1}
.forge-portrait{height:170px}
.forge-footer{flex-direction:column;align-items:stretch;text-align:center}
}
/* == HD-2D BATTLE STAGE == */
/* shared panel + button look (from the creator reference) */
.fantasy-panel{
background:linear-gradient(180deg,#120e1aee 0%,#07060aee 100%);
border:1px solid #3d3550;border-top:3px solid #c8a97e;
box-shadow:0 10px 40px rgba(0,0,0,.9),inset 0 0 20px rgba(138,159,232,.05);
color:#dcd7ce;border-radius:2px;
}
.btn-gilded{
background:linear-gradient(to bottom,#2b2238,#14101f);border:1px solid #c8a97e;color:#c8a97e;
font-family:'Cinzel',serif;letter-spacing:1px;cursor:pointer;transition:all .2s;
}
.btn-gilded:hover:not(:disabled){background:#c8a97e;color:#07060a;box-shadow:0 0 15px rgba(200,169,126,.4)}
#combat-modal{padding:0;background:#000}
#combat-modal.open{display:block}
.combat-box.stage{
position:fixed;inset:0;width:100%;height:100%;max-height:none;padding:0;border:none;border-radius:0;
background:#000;overflow:hidden;box-shadow:none;animation:fadeIn .5s ease;
}
.combat-box.stage.quake{animation:quake .38s ease}
#bt-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.bt-field{position:absolute;inset:0}
/* units */
.bu{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;transition:left .35s ease,filter .3s}
.bu::before{content:'';position:absolute;bottom:-6px;left:50%;width:70%;height:12px;margin-left:-35%;border-radius:50%;background:radial-gradient(ellipse,#000c,transparent 70%);z-index:-1}
.bu-body{position:relative;animation:bob 2.6s ease-in-out infinite}
.bu-spr{display:block;filter:drop-shadow(0 0 1px #000) drop-shadow(0 4px 3px #000a)}
.bu.hero .bu-spr{transform:scaleX(-1)}
.bu-emoji{line-height:1;filter:drop-shadow(0 4px 3px #000a)}
.bu.hero.acting .bu-body{transform:translateX(-26px);transition:transform .3s}
.bu.enemy.acting .bu-body{animation:lunge .6s ease}
@keyframes lunge{40%{transform:translateX(30px) scale(1.06)}}
.bu.hero.acting .bu-spr{filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 8px #ffd27a99)}
.bu.surge.s1 .bu-spr{filter:drop-shadow(0 0 6px #ffcf6a) drop-shadow(0 0 2px #fff)}
.bu.surge.s2 .bu-spr{filter:drop-shadow(0 0 10px #ffb84a) drop-shadow(0 0 3px #fff)}
.bu.surge.s3 .bu-spr{filter:drop-shadow(0 0 16px #ff9a2a) drop-shadow(0 0 4px #fff);animation:surgePulse .5s ease-in-out infinite}
@keyframes surgePulse{50%{filter:drop-shadow(0 0 22px #ffcf6a) drop-shadow(0 0 6px #fff)}}
.bu.ko{filter:grayscale(1) brightness(.5);opacity:.55}
.bu.ko .bu-body{animation:none;transform:rotate(-80deg) translateX(-10px)}
.bu.enemy.ko{opacity:0;transition:opacity .8s .3s}
.bu.shake .bu-body{animation:hit-shake .4s ease}
.bu.shake .bu-spr{filter:brightness(2.2) drop-shadow(0 0 6px #fff)}
.bu.broken .bu-spr{filter:grayscale(.6) brightness(.8) drop-shadow(0 0 8px #e87c7c);transform:rotate(-8deg)}
.bu.targetable{cursor:pointer}
.bu.targetable .bu-spr{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px #ffd27a)}
.bu-mark{position:absolute;top:-26px;color:#ffd27a;font-size:16px;text-shadow:0 0 8px #ffb84a;animation:readyBob .8s ease-in-out infinite;z-index:3}
.bu-info{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:6px;pointer-events:none}
.bu-wards{display:flex;align-items:center;gap:2px;padding:2px 4px;background:#07060acc;border:1px solid #3d3550;border-radius:2px}
.ward{
width:22px;height:24px;display:grid;place-items:center;margin-right:3px;
font-family:'Cinzel',serif;font-weight:900;font-size:12px;color:#fff;
background:linear-gradient(180deg,#6a7fd0,#2c3a80);clip-path:polygon(50% 0,100% 18%,92% 70%,50% 100%,8% 70%,0 18%);
text-shadow:0 1px 2px #000;
}
.ward.off{background:linear-gradient(180deg,#a03a30,#4a1410)}
.wk{width:17px;height:17px;display:grid;place-items:center;font-style:normal;font-size:10px;background:#1a1626;border:1px solid #4a4060;color:#777;font-family:'Cinzel',serif}
.wk.known{background:#2a2238;color:#fff;border-color:#c8a97e88}
.bu-broken{font-family:'Cinzel',serif;font-weight:900;font-size:10px;letter-spacing:2px;color:#ff8a7a;text-shadow:0 0 6px #e8504088;animation:blink 1s infinite}
.bu-hp{width:64px;height:3px;background:#00000099;border-radius:2px;overflow:hidden}
.bu-hp i{display:block;height:100%;background:linear-gradient(90deg,#c84a3a,#ff8a6a);transition:width .4s}
.bu-name{font-family:'Cinzel',serif;font-size:9px;color:#e8d8c8;text-shadow:0 1px 3px #000,0 0 6px #000;white-space:nowrap}
/* hit effects */
.fx-slash{
--c:#fff3c8;position:absolute;left:50%;top:45%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
border-top:7px solid var(--c);border-right:4px solid transparent;border-left:2px solid transparent;
filter:blur(.5px) drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 18px var(--c));
mix-blend-mode:screen;pointer-events:none;opacity:0;animation:slash .45s ease-out forwards;z-index:4;
}
.fx-slash.t-pierce{--c:#ffb070;border-top-width:4px;width:90px;height:90px;margin:-45px 0 0 -45px}
.fx-slash.t-void{--c:#b8c4ff;border-top-width:9px}
.fx-slash.t-fire{--c:#ff7a40;border-top-width:10px}
.fx-slash.t-enemy{--c:#ff5a4a;border-top-width:5px}
.fx-slash.t-troops{--c:#d8d0b8;border-top-width:3px}
@keyframes slash{0%{opacity:0;transform:rotate(calc(var(--rot) - 70deg)) scale(.6)}25%{opacity:1}100%{opacity:0;transform:rotate(calc(var(--rot) + 40deg)) scale(1.15)}}
.dmg-pop.weak{color:#ffe28a;text-shadow:0 0 6px #000,0 0 14px #ffb84a}
.dmg-pop.break{font-size:32px;color:#fff;letter-spacing:3px;text-shadow:0 0 6px #000,0 0 18px #ff6a4a,0 0 30px #ff6a4a}
.dmg-pop.surge{font-size:15px;color:#ffe9a8;text-shadow:0 0 6px #000,0 0 14px #ff9a2a}
/* HUD */
.bt-actor{position:absolute;top:12px;left:14px;display:flex;align-items:center;gap:10px;z-index:120;pointer-events:none}
.act-dia{
width:58px;height:58px;transform:rotate(45deg);display:grid;place-items:center;
background:linear-gradient(135deg,#2b2238,#0a0810);border:2px solid #c8a97e;box-shadow:0 0 14px #c8a97e55;
}
.act-dia.enemy{border-color:#e8907c;box-shadow:0 0 14px #e8907c55}
.act-dia img.px,.act-dia{font-size:24px}
.act-dia img.px{width:28px;height:auto;transform:rotate(-45deg)}
.act-txt small{display:block;font-family:'Cinzel',serif;font-size:8px;letter-spacing:3px;color:#c8a97e99}
.act-txt b{font-family:'Cinzel',serif;font-size:15px;color:#f0e6d0;text-shadow:0 2px 6px #000}
.bt-order{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:3px;z-index:120;pointer-events:none}
.bt-order small{font-family:'Cinzel',serif;font-size:8px;letter-spacing:2px;color:#c8a97e99;margin-right:6px}
.od{width:30px;height:30px;transform:rotate(45deg);display:grid;place-items:center;background:#0a0810dd;border:1px solid #4a4060}
.od.hero{border-color:#c8a97e88}
.od.enemy{border-color:#a05a50aa;background:#1a0a0add}
.od.now{width:36px;height:36px;border:2px solid #ffd27a;box-shadow:0 0 10px #ffd27a77}
.od img.px{width:14px;height:auto;transform:rotate(-45deg)}
.od{font-size:13px}
.bt-party{position:absolute;top:10px;right:12px;display:flex;flex-direction:column;gap:6px;z-index:120;width:240px}
.bp-row{padding:6px 10px 7px;background:linear-gradient(90deg,transparent,#07060acc 18%);border-right:2px solid #3d3550;transition:all .2s}
.bp-row.on{border-right-color:#ffd27a;background:linear-gradient(90deg,transparent,#2b2238ee 18%)}
.bp-row.ko{opacity:.45}
.bp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.bp-top b{font-family:'Cinzel',serif;font-size:11px;color:#f0e6d0;text-shadow:0 1px 3px #000}
.pips{display:inline-flex;gap:3px}
.pips i{width:7px;height:7px;transform:rotate(45deg);background:#2a2238;border:1px solid #5a5070}
.pips i.on{background:#ffb84a;border-color:#ffe3a0;box-shadow:0 0 5px #ff9a2a}
.pips i.rsv{background:#fff;border-color:#fff;box-shadow:0 0 8px #ffcf6a}
.bp-stat{display:grid;grid-template-columns:20px 1fr 66px;align-items:center;gap:6px}
.bp-stat em{font-family:'Cinzel',serif;font-style:normal;font-size:8px;color:#c8a97e}
.bp-bar{position:relative;height:5px;background:#00000099;border-radius:3px;overflow:hidden}
.bp-bar .c-hp-fill{position:relative;z-index:1;height:100%;border-radius:3px;transition:width .3s ease,background .3s}
.bp-mp{height:100%;background:linear-gradient(90deg,#4a5fd0,#a8c0ff);transition:width .4s}
.bp-stat span{font-family:'Cinzel',serif;font-size:13px;color:#fff;text-align:right;text-shadow:0 1px 3px #000}
.bp-stat span small{font-size:9px;color:#aaa}
.bp-stat.mp span{font-size:11px;color:#c8d4ff}
.bt-banner{
position:absolute;top:70px;left:50%;transform:translate(-50%,0);z-index:130;pointer-events:none;opacity:0;
padding:6px 22px;font-family:'Cinzel',serif;font-size:15px;letter-spacing:2px;color:#fff;
background:linear-gradient(90deg,transparent,#14101fee 20%,#14101fee 80%,transparent);border-top:1px solid #c8a97e66;border-bottom:1px solid #c8a97e66;
}
.bt-banner.show{animation:bannerShow 1.6s ease forwards}
@keyframes bannerShow{0%{opacity:0;transform:translate(-50%,-6px)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0}}
.bt-log{position:absolute;left:14px;bottom:14px;z-index:110;max-width:42%;font-size:12px;color:#d8ccb8;text-shadow:0 1px 3px #000,0 0 8px #000;pointer-events:none}
.bt-log div{opacity:.6}
.bt-log div:last-child{opacity:1}
/* command panel */
.bt-cmd{
position:absolute;right:14px;bottom:14px;width:300px;z-index:120;padding:12px;
background:linear-gradient(180deg,#120e1aee 0%,#07060aee 100%);border:1px solid #3d3550;border-top:3px solid #c8a97e;
box-shadow:0 10px 40px rgba(0,0,0,.9),inset 0 0 20px rgba(138,159,232,.05);border-radius:2px;
}
.cmd-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.cmd-head b{font-family:'Cinzel',serif;font-size:13px;color:#c8a97e;letter-spacing:1px}
.cmd-head span{font-size:12px;font-style:italic;color:#9a90b0}
.cmd-head.enemy b{color:#e8907c}
.cmd-head.dim span{color:#444}
.surge-ctl{display:flex;align-items:center;gap:5px}
.surge-ctl .lbl{font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;color:#ffb84a;font-style:normal}
.surge-ctl button{width:22px;height:22px;border-radius:50%;border:1px solid #c8a97e;background:#14101f;color:#c8a97e;cursor:pointer;line-height:1;font-size:13px}
.surge-ctl button:disabled{opacity:.3;cursor:not-allowed}
.surge-ctl .pips.big i{width:9px;height:9px}
.surge-ctl .pips i.avail{background:#5a4020;border-color:#ffb84a88}
.surge-ctl .pips i.sel{background:#fff;border-color:#fff;box-shadow:0 0 8px #ffb84a}
.surge-ctl .sv{font-family:'Cinzel',serif;font-size:10px;color:#ffe3a0;font-style:normal;min-width:20px}
.surge-ctl.dim .lbl{color:#666}
.cmd-list{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.cmd-list.sub,.cmd-list.one{grid-template-columns:1fr}
.cmd-btn{
background:linear-gradient(to bottom,#2b2238,#14101f);border:1px solid #c8a97e88;color:#e8d8b8;
font-family:'Cinzel',serif;font-size:11px;letter-spacing:1px;cursor:pointer;transition:all .15s;padding:10px 8px;text-align:center;
}
.cmd-btn:hover:not(:disabled){background:#c8a97e;color:#07060a;border-color:#c8a97e;box-shadow:0 0 15px rgba(200,169,126,.4)}
.cmd-btn:disabled{opacity:.35;cursor:not-allowed}
.cmd-btn em{font-style:normal;color:#ffb84a;font-size:10px}
.cmd-btn:hover:not(:disabled) em{color:#7a3a00}
.cmd-btn.gold{border-color:#c8a97e;color:#c8a97e;font-size:13px;padding:12px}
.cmd-btn.back{color:#9a90b0;border-color:#4a4060}
.cmd-btn.skill{display:grid;grid-template-columns:1fr auto;text-align:left;gap:1px 8px;padding:8px 10px}
.cmd-btn.skill span{font-size:11px}
.cmd-btn.skill small{grid-column:1;font-family:'Crimson Text',serif;font-size:12px;letter-spacing:0;color:#9a90b0}
.cmd-btn.skill:hover:not(:disabled) small{color:#3a2a14}
.cmd-btn.skill b{grid-row:1/3;grid-column:2;align-self:center;font-weight:400;font-size:10px;color:#a8b8ff}
.combat-box.stage .combat-banner{top:38%;z-index:140}
@media(max-width:700px){
.bt-party{width:auto;left:auto;right:6px;top:84px;gap:3px}
.bp-row{padding:4px 8px 5px;width:178px}
.bp-stat{grid-template-columns:16px 1fr 52px}
.bp-stat span{font-size:11px}
.bt-actor{top:10px;left:10px}
.act-dia{width:44px;height:44px}
.act-dia img.px{width:22px}
.bt-order{top:auto;bottom:calc(var(--cmdh,210px) + 10px);left:10px;transform:none}
.od{width:24px;height:24px}
.od.now{width:28px;height:28px}
.od img.px{width:11px}
.bt-banner{top:52px;font-size:13px}
.bt-cmd{left:8px;right:8px;bottom:8px;width:auto;padding:10px}
.bt-log{bottom:auto;top:62%;left:10px;max-width:90%;font-size:11px;display:none}
.bu-hp{width:44px}
.bu-name{display:none}
.wk{width:14px;height:14px;font-size:8px}
.ward{width:18px;height:20px;font-size:10px}
}
/* == HD-2D LIGHTING == */
/* bloom: bright pixels and rim light, blurred and screened over the crisp sprite */
.bu-glow{position:absolute;left:0;top:0;pointer-events:none;filter:blur(2.5px) brightness(1.25);mix-blend-mode:screen;opacity:.8}
.bu.hero .bu-glow{transform:scaleX(-1)}
.bu.ko .bu-glow{display:none}
.bu.shake .bu-glow{opacity:1;filter:blur(3px) brightness(2)}
/* color grading: deep indigo shadows up top, warm amber light below */
.bt-grade{position:absolute;inset:0;z-index:105;pointer-events:none;mix-blend-mode:soft-light;
background:linear-gradient(180deg,rgba(40,44,150,.55) 0%,rgba(50,36,110,.2) 45%,rgba(255,150,60,.28) 100%)}
.bt-grade-ruins{background:linear-gradient(180deg,rgba(40,30,90,.5) 0%,rgba(60,30,20,.15) 45%,rgba(255,140,50,.35) 100%)}
.bt-grade-rift{background:linear-gradient(180deg,rgba(70,40,170,.6) 0%,rgba(60,30,120,.25) 50%,rgba(200,120,255,.2) 100%)}
/* == PHONE READABILITY == */
@media(max-width:700px){
/* nothing important below ~9-10px on a phone */
.bnode-lv{font-size:9px}
.section-label{font-size:9px}
.ptab{font-size:10px;padding:12px 4px}
.res-r{font-size:9px}
.cp-txt{font-size:9px}
.b-num,.bu-name{font-size:9px}
.bp-stat em{font-size:9px}
.cmd-btn{font-size:12px;padding:12px 8px}
.cmd-btn.skill small{font-size:13px}
.fg-label{font-size:10px}
.rs-name,.rs-lock,.rs-max{font-size:10px}
.d-door-cost,.d-door-sub{font-size:11px}
/* thumb-sized tap targets */
.top-btn{min-height:36px;padding:8px 12px;font-size:10px}
.q-claim,.exp-collect,.send-btn{min-height:34px}
.w-pad button{min-width:52px;min-height:52px}
}
/* == NOTIFICATIONS == */
#notif-stack{position:fixed;top:56px;right:12px;z-index:80;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.notif{
display:flex;gap:8px;align-items:center;
padding:8px 14px;border-radius:3px;font-family:'Cinzel',serif;
font-size:9px;letter-spacing:1px;border:1px solid;border-left-width:3px;
box-shadow:0 6px 18px #000b;
animation:slideIn .3s ease;pointer-events:none;max-width:240px;
transition:opacity .4s,transform .4s;
}
.notif.out{opacity:0;transform:translateX(24px)}
.n-ic{font-size:12px}
.notif.success{background:#0a1a0a;border-color:#3a7a3a;color:var(--green)}
.notif.error{background:#1a0a0a;border-color:#7a3a3a;color:var(--ember)}
.notif.info{background:#0a0f1a;border-color:#3a4a7a;color:var(--void)}
.notif.reward{background:#1a1408;border-color:var(--goldb);color:var(--gold)}
/* == FX LAYER == */
#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:90;overflow:hidden}
.float-txt{
position:absolute;transform:translate(-50%,0);white-space:nowrap;
font-family:'Cinzel',serif;font-weight:600;font-size:11px;color:var(--green);
text-shadow:0 0 4px #000,0 0 10px currentColor;animation:floatUp 1.3s ease-out forwards;
}
.float-txt.gold{color:var(--gold);font-size:14px}
.float-txt.void{color:#b8c8ff}
.float-txt.down{animation-name:floatDown;font-size:10px}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,6px) scale(.8)}15%{opacity:1;transform:translate(-50%,-4px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-38px) scale(1)}}
@keyframes floatDown{0%{opacity:0;transform:translate(-50%,0)}20%{opacity:1;transform:translate(-50%,6px)}100%{opacity:0;transform:translate(-50%,24px)}}
.spark{
position:absolute;width:5px;height:5px;border-radius:50%;
transform:translate(-50%,-50%);animation:spark .85s cubic-bezier(.1,.7,.3,1) forwards;
}
@keyframes spark{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.15);opacity:0}}
/* == PROGRESS BAR == */
#castle-prog{
position:absolute;bottom:0;left:0;right:0;
padding:5px 12px;background:linear-gradient(0deg,#000000cc,#00000044);
display:flex;align-items:center;gap:8px;z-index:20;
}
.cp-bar{flex:1;height:5px;background:#ffffff0a;border-radius:3px;overflow:hidden}
.cp-fill{height:100%;background:linear-gradient(90deg,#8a6a3a,var(--gold),#fff8e0);border-radius:3px;transition:width .6s;box-shadow:0 0 8px var(--gold)}
.cp-txt{font-family:'Cinzel',serif;font-size:9px;color:#c8a97e99;white-space:nowrap;letter-spacing:1px}
/* == GENERAL == */
.section-label{font-family:'Cinzel',serif;font-size:8px;letter-spacing:3px;color:#5a4e3c;margin-bottom:8px;text-transform:uppercase}
.divider{height:1px;background:linear-gradient(90deg,transparent,#c8a97e22,transparent);margin:12px 0}
@media(max-width:560px){
#rpanel{width:100%;max-height:38vh;border-left:none;border-top:1px solid #ffffff08}
#main{flex-direction:column}
}
/* == TITLE / SPLASH SCREEN == */
#splash{
position:fixed;inset:0;z-index:100;
display:flex;align-items:center;justify-content:center;flex-direction:column;
background:radial-gradient(ellipse at 50% 38%,#241c0e 0%,#07060a 70%);
padding:24px;text-align:center;overflow:hidden;
transition:opacity .6s ease;
}
#splash.closed{opacity:0;pointer-events:none}
#splash::before{
content:'';position:absolute;inset:0;pointer-events:none;
background:
  radial-gradient(1px 1px at 12% 20%, #e8e0d0aa, transparent),
  radial-gradient(1px 1px at 28% 12%, #e8e0d088, transparent),
  radial-gradient(1px 1px at 45% 24%, #e8e0d0aa, transparent),
  radial-gradient(1px 1px at 62% 15%, #e8e0d066, transparent),
  radial-gradient(1px 1px at 78% 22%, #e8e0d0aa, transparent),
  radial-gradient(1px 1px at 90% 10%, #e8e0d088, transparent),
  radial-gradient(1px 1px at 20% 78%, #e8e0d066, transparent),
  radial-gradient(1px 1px at 85% 80%, #e8e0d088, transparent);
animation:splashTwinkle 4s ease-in-out infinite;
}
@keyframes splashTwinkle{0%,100%{opacity:.5}50%{opacity:1}}
.splash-inner{position:relative;max-width:480px;animation:fadeIn 1s ease}
.splash-crest{font-size:clamp(32px,6vw,44px);margin-bottom:14px;filter:drop-shadow(0 0 10px var(--goldf));animation:float 3.5s ease-in-out infinite}
.splash-title{
font-family:'Cinzel',serif;font-weight:900;
font-size:clamp(34px,7vw,58px);letter-spacing:10px;
background:linear-gradient(180deg,#f5e6c0 0%,var(--gold) 55%,#8a6a3a 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 0 18px var(--goldf));
animation:splashGlow 3.5s ease-in-out infinite;
}
@keyframes splashGlow{0%,100%{filter:drop-shadow(0 0 12px var(--goldf))}50%{filter:drop-shadow(0 0 26px var(--gold))}}
.splash-sub{
font-family:'Cinzel',serif;font-size:clamp(11px,2vw,14px);
letter-spacing:5px;color:var(--stone);opacity:.75;margin-top:6px;text-transform:uppercase;
}
.splash-divider{width:140px;height:1px;margin:26px auto;background:linear-gradient(90deg,transparent,var(--gold),transparent);position:relative}
.splash-divider::after{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;background:var(--gold);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 8px var(--gold)}
.splash-tagline{font-style:italic;font-size:13px;color:#a09070;line-height:1.8;margin-bottom:34px}
.splash-begin{
font-family:'Cinzel',serif;font-size:12px;letter-spacing:4px;text-transform:uppercase;
border:1px solid var(--gold);color:var(--gold);background:var(--goldf);
padding:13px 38px;border-radius:2px;cursor:pointer;transition:all .25s;
}
.splash-begin:hover{background:var(--gold);color:#1a1408;box-shadow:0 0 24px var(--goldf)}
.splash-foot{font-size:9px;color:#444;letter-spacing:2px;margin-top:22px;font-family:'Cinzel',serif}

/* Tilt-Shift / Depth of Field Effect */
.tilt-shift-viewport {
    /* must fill the map area: the map canvas sizes itself from this box */
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.tilt-shift-viewport::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 20;
    /* Soft top and bottom gradient blur simulation */
    background: linear-gradient(
        to bottom,
        rgba(5, 5, 15, 0.7) 0%,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, 0) 65%,
        rgba(5, 5, 15, 0.7) 100%
    );
    backdrop-filter: blur(1.5px);
    -webkit-backdrop-filter: blur(1.5px);
    mask-image: linear-gradient(to bottom, black 0%, transparent 30%, transparent 70%, black 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 30%, transparent 70%, black 100%);
}
/* sound toggle in the top bar */
.top-sound{border:1px solid #5a4a7a;color:#c9b6e8;background:#8a6fb81a;white-space:nowrap}
.top-sound:hover{box-shadow:0 0 10px #8a6fb833}
/* ---- late game: overcharged pips, Echo Altar, Endless ---- */
.bnode-pips.many{gap:2px}
.bnode-pips.many .pip{width:4px;height:4px}
.pip.over{background:#ffffff0c;outline:1px solid #c9b6e833}
.pip.over.on{background:#c9b6e8;box-shadow:0 0 5px #c9b6e8}
#castle-badge{cursor:pointer}
#castle-badge.can-rebirth{border-color:#c9b6e8;box-shadow:0 0 12px #8a6fb855;animation:altarPulse 2.8s ease-in-out infinite}
@keyframes altarPulse{0%,100%{box-shadow:0 0 6px #8a6fb833}50%{box-shadow:0 0 16px #8a6fb888}}
.altar-echoes{display:flex;align-items:baseline;gap:8px;padding:10px 12px;margin:10px 0 4px;border:1px solid #c9b6e844;background:#8a6fb814;border-radius:3px;font-family:'Cinzel',serif;color:#c9b6e8;font-size:11px;letter-spacing:1px;flex-wrap:wrap}
.altar-echoes b{font-size:22px;color:#efe4ff;text-shadow:0 0 12px #c9b6e8}
.altar-echoes small{flex-basis:100%;font-family:'Crimson Text',serif;letter-spacing:0;color:#8a7d98;font-size:12px}
.altar-echoes.small{justify-content:center}
.altar-echoes.small b{font-size:16px}
.rs-name.altar{color:#c9b6e8}
.rs-buy.altar{border-color:#c9b6e8;background:#8a6fb81a;color:#e4d8f8;min-width:52px}
.altar-note{font-size:13px;color:#a8998a;line-height:1.5;margin:4px 0 10px}
.altar-note ul{margin:6px 0 6px 18px}
.altar-note li{margin:3px 0}
.altar-note b.gold{color:var(--gold)}
.altar-note small{color:#7a6d60;font-style:italic}
.altar-go{width:100%;margin-bottom:6px}
.mbtn-danger{border:1px solid #e87c7c;background:#e87c7c22;color:#f0a0a0;animation:pulse-red 1.2s infinite}
@keyframes pulse-red{0%,100%{box-shadow:0 0 0 #e87c7c00}50%{box-shadow:0 0 14px #e87c7c66}}
.d-btn.void{border-color:#8a6fb8;background:#8a6fb822;color:#d8c8f0}
.d-btn.void small{color:#a898c0}
/* ================================================================
   GEAR & THE IRON FORGE
   ================================================================ */
.hstat em{font-style:normal;color:var(--green);font-size:8px;margin-left:2px}
.gear-item{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:6px;border:1px solid color-mix(in srgb,var(--rc) 35%,transparent);border-left:3px solid var(--rc);border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 9%,transparent),transparent 70%)}
.gear-ic{font-size:20px;filter:drop-shadow(0 0 6px var(--rc));flex:none}
.gear-info{flex:1;min-width:0}
.gear-name{font-family:'Cinzel',serif;font-size:11px;color:var(--rc);letter-spacing:.4px;line-height:1.3}
.gear-ilvl{font-size:8px;color:#6a6050;letter-spacing:1px;margin-left:4px}
.gear-rar{font-family:'Cinzel',serif;font-size:8px;letter-spacing:1.5px;text-transform:uppercase;color:#6a6050;margin:1px 0 3px}
.gear-stats{font-size:11px;color:#c8bba4;font-family:'Cinzel',serif;letter-spacing:.3px}
.gear-perk{font-size:11px;color:#e8c07c;font-style:italic;margin-top:3px;line-height:1.35}
.gear-perk.inline{display:inline;margin:0}
.gear-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.gear-diff{font-family:'Cinzel',serif;font-size:9px;text-align:right;line-height:1.5;max-width:110px}
.gear-diff .up{color:var(--green)}
.gear-diff .down{color:#e8907c}
.gear-btn{flex:none;font-family:'Cinzel',serif;font-size:9px;letter-spacing:1px;padding:6px 10px;border-radius:2px;cursor:pointer;border:1px solid var(--gold);background:var(--gold);color:#1a1408;font-weight:600;transition:all .15s}
.gear-btn:hover{background:#e0c294}
.gear-btn.ghost{background:transparent;color:#8a7d68;border-color:#3a3428;font-weight:400}
.gear-btn.ghost:hover{color:var(--gold);border-color:var(--goldb)}
.eq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.eq-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px 9px;min-height:92px;cursor:pointer;text-align:center;border:1px solid color-mix(in srgb,var(--rc) 55%,transparent);border-radius:3px;background:#00000033;color:inherit;font:inherit;transition:all .15s}
.eq-slot:hover{transform:translateY(-2px);border-color:var(--rc);box-shadow:0 0 14px color-mix(in srgb,var(--rc) 30%,transparent)}
.eq-slot.filled{background:linear-gradient(180deg,color-mix(in srgb,var(--rc) 14%,transparent),#00000033)}
.eq-ic{font-size:20px;filter:drop-shadow(0 0 6px var(--rc))}
.eq-slot:not(.filled) .eq-ic{opacity:.35;filter:grayscale(1)}
.eq-name{font-family:'Cinzel',serif;font-size:9px;color:var(--rc);line-height:1.25;letter-spacing:.3px}
.eq-slot:not(.filled) .eq-name{color:#5a5244}
.eq-sub{font-size:9px;color:#8a7d68;line-height:1.3}
.eq-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:pulse-gold 1.6s infinite}
.eq-total{font-size:10px;color:#8a7d68;line-height:1.6;margin-bottom:12px;font-family:'Cinzel',serif;letter-spacing:.3px}
.eq-total b{color:var(--gold);font-weight:400}
.fw-slots{display:flex;gap:6px;margin-bottom:8px}
.fw-slot{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;font-size:18px;cursor:pointer;border:1px solid #3a3428;border-radius:3px;background:transparent;color:inherit;transition:all .15s}
.fw-slot span{font-family:'Cinzel',serif;font-size:9px;letter-spacing:1px;color:#8a7d68}
.fw-slot.on{border-color:var(--gold);background:var(--goldf);box-shadow:0 0 12px var(--goldf)}
.fw-slot.on span{color:var(--gold)}
.fw-odds{font-family:'Cinzel',serif;font-size:9px;letter-spacing:.5px;display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:8px}
.fw-odds b{font-weight:400}
.fw-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;margin-bottom:6px;border:1px solid #ffffff0a;border-radius:3px;background:#ffffff04}
.fw-row b{display:block;font-family:'Cinzel',serif;font-weight:400;font-size:11px;color:var(--gold);letter-spacing:.5px}
.fw-row > div > span{display:block;font-size:11px;color:#8a7d68;font-style:italic}
.fw-cost{display:flex;flex-wrap:wrap;gap:8px;margin-top:3px;font-family:'Cinzel',serif;font-size:10px;color:#c8bba4}
.fw-cost .short{color:#e8907c}
.fw-hint{font-size:11px;color:#6a6050;font-style:italic;margin:2px 0 4px}

/* ================================================================
   BOUNTIES
   ================================================================ */
.b-head{display:flex;justify-content:space-between;align-items:baseline}
.b-head span{font-size:8px;letter-spacing:1px;color:#5a5244;text-transform:none}
.quest-card.bounty{border-left:2px solid var(--green)}
.quest-card.bounty.weekly{border-left-color:#c08ae8}
.quest-card.bounty.weekly .q-fill{background:linear-gradient(90deg,#5a3a7a,#c08ae8)}
.b-foot{display:flex;align-items:center;gap:8px}
.b-count{font-size:10px;color:#666;margin-right:auto}
.b-reroll{border:1px solid #3a3428;background:transparent;color:#8a7d68;border-radius:2px;font-size:11px;padding:1px 6px;cursor:pointer;line-height:1.4}
.b-reroll:hover{border-color:var(--goldb);color:var(--gold)}
.b-bonus{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:2px 0 8px;border:1px dashed #3a3428;border-radius:3px;font-size:11px;color:#6a6050}
.b-bonus span{font-size:18px;opacity:.4;filter:grayscale(1)}
.b-bonus small{display:block;font-size:10px;color:#5a5244;font-style:italic}
.b-bonus.ready{border-style:solid;border-color:var(--gold);color:var(--gold);background:var(--goldf);cursor:pointer;animation:pulse-gold 2s infinite}
.b-bonus.ready span{opacity:1;filter:none}
.b-bonus.got{opacity:.45}
.q-alldone{font-size:12px;color:#6a6050;font-style:italic;padding:4px 0 10px}

/* ================================================================
   STORY: chapter track, scenes, Chronicle
   ================================================================ */
.story-track{display:flex;gap:4px;margin:-2px 0 10px}
.story-track i{flex:1;height:3px;border-radius:2px;background:#ffffff0d}
.story-track i.on{background:var(--gold);box-shadow:0 0 5px var(--goldb)}
.story-track i.cur{background:linear-gradient(90deg,var(--gold),#ffffff10);animation:breathe 2.4s ease-in-out infinite}
.quest-card.story{border-left:2px solid var(--gold);background:linear-gradient(90deg,var(--goldf),transparent 80%)}
.q-chapter{font-family:'Cinzel',serif;font-size:8px;letter-spacing:3px;color:#7a6c55;text-transform:uppercase;margin-bottom:2px}
.quest-card.story .q-title{font-size:12px}
.act-done{border:1px solid var(--goldb);border-radius:3px;padding:12px;font-size:12px;font-style:italic;color:#a8998a;line-height:1.55;background:var(--goldf)}
.act-done b{display:block;font-family:'Cinzel',serif;font-style:normal;font-weight:400;font-size:11px;letter-spacing:2px;color:var(--gold);margin-bottom:4px;text-transform:uppercase}
.act-done small{display:block;margin-top:6px;font-size:11px;color:#6a6050}
.chron-btn{width:100%;margin:8px 0 4px;padding:9px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:var(--gold);background:transparent;border:1px solid #3a3428;border-radius:2px;cursor:pointer;transition:all .2s}
.chron-btn:hover{border-color:var(--goldb);background:var(--goldf)}
#story{
display:none;position:fixed;inset:0;z-index:80;
background:radial-gradient(ellipse at 50% 35%,#1e160ccc,#000000f2);backdrop-filter:blur(8px);
align-items:center;justify-content:center;padding:20px;
}
#story.open{display:flex;animation:fadeIn .7s ease}
.story-box{max-width:520px;width:100%;max-height:88vh;overflow-y:auto;padding:30px 30px 24px;border:1px solid var(--goldb);border-radius:6px;background:linear-gradient(180deg,#14100bf2,#0a0806f2);box-shadow:0 20px 60px #000c,0 0 40px #c8a97e14;animation:modalIn .8s cubic-bezier(.2,1,.4,1)}
.st-kicker{font-family:'Cinzel',serif;font-size:9px;letter-spacing:5px;color:#8a7d68;text-align:center;margin-bottom:8px}
.st-kicker:empty,.st-title:empty{display:none}
.st-title{font-family:'Cinzel',serif;font-size:22px;color:var(--gold);text-align:center;margin-bottom:18px;text-shadow:0 0 18px var(--goldb);letter-spacing:1px}
.st-text{font-size:16px;line-height:1.65;color:#d8cdb8;margin-bottom:14px;font-style:italic}
.st-line{display:flex;gap:12px;align-items:flex-start;margin:14px 0 4px;padding:10px 12px;border-left:2px solid var(--rc);background:linear-gradient(90deg,color-mix(in srgb,var(--rc) 10%,transparent),transparent)}
.st-av{width:34px;height:34px;flex:none;display:flex;align-items:center;justify-content:center}
.st-av img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.st-line b{display:block;font-family:'Cinzel',serif;font-weight:400;font-size:10px;letter-spacing:1px;color:var(--rc);margin-bottom:2px}
.st-line span{font-size:15px;line-height:1.5;color:#e8e0d0}
.st-end{margin-top:18px;padding-top:14px;border-top:1px solid var(--goldb);text-align:center;font-family:'Cinzel',serif;font-size:11px;letter-spacing:1.5px;color:#c9b6e8;line-height:1.6}
.st-btn{display:block;margin:22px auto 0;padding:10px 26px;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;color:#1a1408;background:var(--gold);border:1px solid var(--gold);border-radius:2px;cursor:pointer;font-weight:600;transition:all .2s}
.st-btn:hover{background:#e0c294}
.chron-entry{border:1px solid #ffffff0a;border-radius:3px;margin-bottom:6px;background:#ffffff03}
.chron-entry summary{cursor:pointer;padding:9px 12px;font-family:'Cinzel',serif;font-size:11px;letter-spacing:.5px;color:var(--gold);list-style:none}
.chron-entry summary::before{content:'\25B8  ';color:#7a6c55}
.chron-entry[open] summary::before{content:'\25BE  '}
.chron-entry > .st-text,.chron-entry > .st-line,.chron-entry > .st-end{margin-left:12px;margin-right:12px}
.chron-entry .st-text{font-size:14px}
.chron-next{font-size:12px;color:#8a7d68;font-style:italic;margin:10px 0 4px}
.chron-next b{color:var(--gold);font-style:normal;font-weight:400;font-family:'Cinzel',serif;font-size:11px}
@media(max-width:560px){.story-box{padding:22px 18px 18px}.st-title{font-size:18px}.st-text{font-size:15px}}

/* ================================================================
   OLD MAREN (the city's rebirth guide) and story buttons
   ================================================================ */
.st-btns{display:flex;justify-content:center;gap:10px;margin-top:22px}
.st-btns .st-btn{margin:0}
.st-btn.ghost{background:transparent;color:#8a7d68;border-color:#3a3428;font-weight:400}
.st-btn.ghost:hover{color:var(--gold);border-color:var(--goldb);background:transparent}
.st-line.npc .st-av{font-size:24px;filter:drop-shadow(0 0 8px #ffbe74)}
.bnode.npc .bnode-plate{border-style:solid;background:#120e16d9}
.bnode.npc.fresh .bnode-plate{border-color:var(--bc);animation:pulse-gold 1.8s infinite}
.bnode.npc.fresh .bnode-icon{animation:readyBob 1.2s ease-in-out infinite;display:inline-block}