:root{--bg:#020713;--panel:#071024;--line:#7433b7;--purple:#bd45ff;--cyan:#15d5ff;--text:#f4f4fa;--muted:#aaa9bd}
*{box-sizing:border-box}
html,body{width:100%;height:100%;min-width:0;min-height:0;margin:0;overflow:hidden}
body{display:grid;place-items:center;background:radial-gradient(circle at 50% 0,#14133d 0,#020713 62%);color:var(--text);font-family:"Space Grotesk",sans-serif;overflow:hidden}
/* One locked canvas: width : height = 1.2 : 1.  Nothing inside may resize it or create scrollbars. */
.hud-shell{position:relative;width:min(94vw,112.8vh);height:auto;aspect-ratio:1.2/1;display:grid;grid-template-columns:31% minmax(0,1fr);grid-template-rows:minmax(0,1fr) 23%;gap:1.7%;padding:2%;border:1px solid #7a2abe;border-radius:2.4%;background:linear-gradient(135deg,#06091cee,#030b1fdd);box-shadow:0 0 42px #771cbe66;overflow:hidden;contain:layout paint}
.panel{min-width:0;min-height:0;border:1px solid #2e254f;border-radius:4%;background:linear-gradient(130deg,#071126f2,#030817e8);box-shadow:inset 0 0 25px #081e4a55}
.portrait-panel{grid-row:1;display:flex;min-height:0;padding:5%;flex-direction:column;gap:2.2%}
.portrait-ring{position:relative;display:grid;flex:1 1 auto;min-height:0;place-items:center;overflow:hidden;border:1px solid #8f32dd;border-radius:50%;box-shadow:inset 0 0 40px #4c159c,0 0 18px #46149b}
.portrait-ring:before,.portrait-ring:after{content:"";position:absolute;border:1px solid #bb4fff;border-radius:50%;inset:5%;opacity:.65}
.portrait-ring:after{inset:10%;border-color:#1dd9ff55}
.portrait-ring img{position:relative;width:108%;height:108%;object-fit:contain;z-index:2;filter:drop-shadow(0 12px 14px #000)}
.hex-grid{position:absolute;bottom:-5%;left:0;width:100%;height:32%;background:linear-gradient(transparent,#5510ac88),linear-gradient(30deg,#7626ca44 12%,transparent 12.5%,transparent 87%,#7626ca44 87.5%),linear-gradient(150deg,#7626ca44 12%,transparent 12.5%,transparent 87%,#7626ca44 87.5%);background-size:17px 31px;z-index:1}
.creature-name{min-height:8%;font:700 clamp(9px,1.55vw,25px) Rajdhani;letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.creature-name small{float:right;margin-top:.35em;color:#57f8a5;font-size:.43em}
.status-dot{display:inline-block;width:.45em;height:.45em;margin-right:.15em;border-radius:50%;background:#57f8a5;box-shadow:0 0 10px #57f8a5}
.trait-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%;min-height:11%}
.trait-grid div{min-width:0;padding:6% 3%;border:1px solid #35265e;border-radius:10%;background:#071027cc;text-align:center}
.trait-grid span{display:block;color:#a95aff;font:700 clamp(6px,.72vw,12px) Rajdhani;letter-spacing:.05em}
.trait-grid b{display:block;overflow:hidden;color:#e7edff;font:700 clamp(8px,.92vw,15px) Rajdhani;text-overflow:ellipsis;white-space:nowrap}
.trait-grid div:nth-child(2) b{color:#36dfff}
.trait-grid div:nth-child(3) b{color:#ff9fd1}
.level-card{display:grid;grid-template-columns:1fr 2.7fr;min-height:16%;padding:6%;border:1px solid #302754;border-radius:10%}
.level-card span{display:block;color:var(--purple);font:700 clamp(7px,.95vw,16px) Rajdhani}
.level-card strong{font:clamp(20px,3.2vw,52px) Rajdhani}
.stage{padding-left:10%;border-left:1px solid #514770}
.stage-gems{display:grid;grid-template-columns:repeat(4,1fr);gap:4%;margin-top:8%;width:100%}
.stage-gems i{justify-self:center;width:clamp(11px,1.45vw,24px);aspect-ratio:1;transform:rotate(45deg);border:1px solid #9a84c7;background:#0a1022;box-shadow:0 0 7px #7142bb88}
.stage-gems .active{background:linear-gradient(135deg,#d671ff,#251060);box-shadow:0 0 13px #bc35ff}
.dashboard{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:2%;min-width:0;min-height:0}
.dashboard-traits{min-height:0;gap:2%;padding:0}
.dashboard-traits div{display:grid;place-items:center;padding:5% 3%;border-radius:8%;background:linear-gradient(145deg,#0a1530,#050a1d)}
.dashboard-traits span{font-size:clamp(9px,1.1vw,18px);letter-spacing:.08em}
.dashboard-traits b{font-size:clamp(13px,1.65vw,27px);line-height:1.05}
#rarityValue{overflow:visible;max-width:100%;color:#ffd75a;text-shadow:0 0 5px #ffb000,0 0 12px #8f3bff;letter-spacing:.08em;white-space:nowrap}
#rarityValue[data-rarity="RARE"]{color:#5fc9ff;text-shadow:0 0 8px #167dff}
#rarityValue[data-rarity="EPIC"]{color:#c875ff;text-shadow:0 0 9px #972cff}
#rarityValue[data-rarity="LEGENDARY"]{color:#ffb33f;text-shadow:0 0 9px #ff6a00}
#rarityValue[data-rarity="MYTHIC"]{color:#ff5d91;text-shadow:0 0 10px #ff165d}
.element-icon{display:block;width:clamp(38px,5.2vw,82px);height:clamp(38px,5.2vw,82px);background-image:url("assets/element-sprite40.png");background-repeat:no-repeat;background-size:400% 200%;filter:drop-shadow(0 0 8px #31dfff88);transform:scale(.88)}
.element-icon[data-element="FIRE"]{background-position:0 0}.element-icon[data-element="ICE"]{background-position:33.333% 0}.element-icon[data-element="WATER"]{background-position:66.667% 0}.element-icon[data-element="ELECTRIC"]{background-position:100% 0}.element-icon[data-element="EARTH"]{background-position:0 100%}.element-icon[data-element="WIND"]{background-position:33.333% 100%}.element-icon[data-element="DARK"]{background-position:66.667% 100%}.element-icon[data-element="LIGHT"]{background-position:100% 100%}.element-icon[data-element="UNKNOWN"]{background-image:none;position:relative}.element-icon[data-element="UNKNOWN"]::after{content:"?";display:grid;width:100%;height:100%;place-items:center;color:#9b8bbd;font:700 clamp(18px,2.5vw,38px) Rajdhani}
.vitals{padding:3.5% 4.5%}
.vital-row{display:grid;grid-template-columns:11% 24% minmax(0,1fr) 14%;align-items:center;min-height:33.333%;gap:2%;border-bottom:1px solid #192541}
.vital-row:last-child{border:0}
.vital-icon{font-size:clamp(10px,1.7vw,27px);color:#ff4f83;text-align:center;text-shadow:0 0 15px currentColor}
.vital-row b,.wallet b{font:700 clamp(8px,1.38vw,23px) Rajdhani;letter-spacing:.02em;white-space:nowrap}
.track,.mini-track{height:clamp(8px,1.7vw,28px);overflow:hidden;border:1px solid #2b2948;border-radius:999px;background:#010510}
.track i,.mini-track i{display:block;height:100%;border-radius:inherit;box-shadow:0 0 14px currentColor}
.health{background:linear-gradient(90deg,#86dc2c,#b8ff55);color:#b8ff55}
.hunger{background:linear-gradient(90deg,#ff7625,#ffd64b);color:#ffd64b}
.xp{background:linear-gradient(90deg,#7d3dff,#29d7ff);color:#29d7ff}
.bond{background:linear-gradient(90deg,#ff4f94,#ff88c5);color:#ff88c5}
.vital-row strong{overflow:hidden;font-size:clamp(7px,1.1vw,18px);text-align:right;white-space:nowrap}
.wallet{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr) 1px minmax(0,1fr);align-items:center;gap:2%;padding:3% 4%;min-height:0}
.wallet>div{display:grid;grid-template-columns:36% minmax(0,1fr);grid-template-rows:1fr auto;align-items:center;column-gap:6%;min-height:0}
.wallet b{align-self:end;color:var(--purple);font-size:clamp(7px,.86vw,14px);line-height:1.05}
.wallet>div:nth-of-type(2) b{color:var(--cyan)}.wallet>div:last-child b{color:#ffc45c}
.wallet strong{align-self:start;color:#fff;font:700 clamp(15px,2.05vw,34px) Rajdhani;line-height:1;text-shadow:0 0 12px #a95aff77}
.wallet>div:last-child strong{text-shadow:0 0 12px #15d5ff77}
.wallet hr{height:72%;margin:0;border:0;border-left:1px solid #49366f}
.wallet .crystal{grid-row:1/-1;width:88%;max-height:82%;justify-self:center;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 0 14px #b750ff) brightness(1.15)}
.wallet .gem{filter:drop-shadow(0 0 14px #16d9ff) brightness(1.15)}
.action-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:.8%}
.action-grid button{position:relative;min-width:0;padding:0;overflow:hidden;border:0;border-radius:10%;background:transparent;color:transparent;font-size:0;cursor:pointer;transition:.2s}
.action-icon{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}
.action-grid button:hover{transform:translateY(-3px);filter:brightness(1.15);box-shadow:0 8px 20px #7723bf66}
.action-grid button:active{transform:scale(.97);filter:brightness(1.3)}
.action-grid button[data-action="forge"]{display:flex;align-items:center;justify-content:flex-start;flex-direction:column;border:1px solid #8b35c9;border-radius:10%;background:radial-gradient(circle at 50% 35%,#32105c88 0,#070b1d 56%,#030713 100%);color:#f5f0ff;font-size:0;box-shadow:inset 0 0 18px #55168d55}
.action-grid button[data-action="forge"] .action-icon{width:78%;height:76%;margin-top:2%;object-fit:contain;filter:drop-shadow(0 0 10px #7c35ff)}
.action-grid button[data-action="forge"]::after{content:"CRYSTAL FORGE";position:absolute;left:4%;right:4%;bottom:8%;color:#f4f0ff;font:600 clamp(6px,.72vw,12px) "Space Grotesk",sans-serif;letter-spacing:.08em;text-align:center;white-space:nowrap}
.modal{width:min(400px,80vw);border:1px solid #7c3bc4;border-radius:14px;background:linear-gradient(140deg,#111333,#040713);color:var(--text);box-shadow:0 0 38px #7e27bf88;padding:14px 18px 22px}
.modal::backdrop,.battle-modal::backdrop{background:#000b}
.modal h2{text-align:center;margin:0 -18px 14px;padding:8px;color:#f3a2ff;font:700 25px Rajdhani;border-bottom:1px solid #493069}
.close{position:absolute;right:10px;top:6px;border:0;background:transparent;color:#efa1ff;font-size:32px;cursor:pointer}
.command-list button{width:100%;border:0;border-bottom:1px solid #272946;background:transparent;color:#eee;font:600 20px Rajdhani;padding:11px;text-align:left;cursor:pointer}
.command-list button:hover{color:#4eeaff;background:#11213a}
#battleModeToggle,#floatingTextToggle{display:grid;gap:2px;margin:0 0 9px;border:1px solid;border-radius:10px;padding:11px 13px;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
#battleModeToggle span,#floatingTextToggle span{font-weight:700;letter-spacing:.045em}
#battleModeToggle small,#floatingTextToggle small{font-size:12px;color:#c8d0dc;letter-spacing:.02em}
#battleModeToggle[data-battle-mode="AUTO"],#floatingTextToggle[data-text-mode="FULL"]{color:#8dff9b;border-color:#36d85b;background:linear-gradient(90deg,#0b3d20cc,#071826cc);box-shadow:inset 0 0 18px #24d75622,0 0 12px #24d75644}
#battleModeToggle[data-battle-mode="MANUAL"],#floatingTextToggle[data-text-mode="NAME_ONLY"]{color:#ffb04d;border-color:#ff842c;background:linear-gradient(90deg,#4a210dcc,#171221cc);box-shadow:inset 0 0 18px #ff7b2022,0 0 12px #ff7b2044}
#battleModeToggle:hover,#floatingTextToggle:hover{transform:translateY(-1px);filter:brightness(1.12)}
.modal-note{color:var(--muted);font-size:13px;margin-top:-6px}
.stat-row{display:grid;grid-template-columns:90px 1fr 70px 42px;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid #252642;font:600 17px Rajdhani}
.stat-row button{height:36px;border:1px solid #8d6c85;border-radius:7px;background:#1b1c2d;color:#fff;font-size:26px;cursor:pointer}
.battle-modal{width:min(860px,92vw);border:1px solid #6d46b5;border-radius:18px;background:#02050b;color:white;overflow:hidden;padding:0;box-shadow:0 0 45px #48248599}
.battle-scene{position:relative;min-height:500px;background-image:linear-gradient(90deg,#01040bf2 0%,#020614bd 35%,#0002 72%),url("assets/wild-wolf-battle.png");background-position:center;background-size:cover;transition:background-image .3s ease}
.battle-top{position:absolute;left:28px;right:58px;top:22px;display:flex;justify-content:space-between;align-items:center;color:#b5cfff;font:700 14px Space Grotesk;letter-spacing:.14em;text-shadow:0 2px 8px #000}
.battle-top strong{padding:7px 13px;border:1px solid #4e8ccd;border-radius:999px;background:#06142ed9;color:#70dfff;letter-spacing:.08em}
.battle-top strong.waiting{border-color:#ffbf45;color:#ffd36b;animation:battlePulse 1s infinite alternate}
.battle-top strong.win{border-color:#61ff8b;color:#76ff9a}.battle-top strong.lose{border-color:#ff536b;color:#ff7085}
.enemy-card{position:absolute;left:32px;top:85px;width:48%;text-align:left;text-shadow:0 3px 8px #000}
.enemy-card>span{color:#63dbff;font:700 13px Space Grotesk;letter-spacing:.12em}
.enemy-card h2{font:700 42px Rajdhani;margin:4px 0 2px;line-height:1;color:#fff}
.enemy-card p{margin:0;color:#c8d5e9;font:600 15px Rajdhani}
.battle-round{display:inline-block;margin-top:16px;padding:6px 10px;border-left:3px solid #a949ff;background:#090d21d9;color:#dfb9ff;font:700 15px Rajdhani}
.battle-moves{min-height:22px;margin-top:10px;color:#fff;font:700 17px Rajdhani}
.battle-damage{display:flex;gap:10px;min-height:30px;margin-top:8px}.battle-damage span{opacity:0;padding:5px 9px;border-radius:6px;background:#5c0b1bcc;color:#ff90a1;font:700 15px Rajdhani;transition:.2s}.battle-damage span.enemy-hit{background:#083d5ecc;color:#70e3ff}.battle-damage span.show{opacity:1;transform:translateY(-2px)}
.enemy-reward{margin-top:10px;padding:8px 11px;border:1px solid #668ecc;border-radius:8px;background:#060d20d9;color:#9fddff;font:700 14px Rajdhani}
.battle-footer{position:absolute;bottom:0;width:100%;display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;padding:17px 28px;border-top:1px solid #5b3990;background:#020817ed}
.fighter>div:first-child{display:flex;justify-content:space-between;gap:12px;font:700 14px Rajdhani}.fighter span{color:#b8c6da}.fighter.enemy{text-align:right}.battle-auto{text-align:center;display:flex;flex-direction:column;gap:2px;color:#69ddff;font:700 13px Rajdhani}.battle-auto small{color:#879bb8;font-size:10px;letter-spacing:.08em}.battle-auto.manual b{color:#ffce5d}.battle-auto.manual small{color:#e4c784}
.mini-track{height:13px;margin-top:7px;overflow:hidden;border:1px solid #233454;border-radius:999px;background:#020711}.mini-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#28d86e,#9cff3d);box-shadow:0 0 12px #4cff7a;transition:width .45s ease}.mini-track.enemy i{background:linear-gradient(90deg,#ff334f,#ff8c48);box-shadow:0 0 12px #ff3b61}
@keyframes battlePulse{from{box-shadow:0 0 4px #ffbe3b55}to{box-shadow:0 0 18px #ffbe3bcc}}
#toast{position:fixed;bottom:22px;left:50%;z-index:10;padding:13px 22px;border:1px solid #4de3ff;border-radius:9px;background:#07172be8;color:#d9faff;transform:translate(-50%,100px);transition:.25s}
#toast.show{transform:translate(-50%,0)}
.forge-modal{width:min(680px,86vw);padding:20px 24px 26px}.forge-balances{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.forge-balances span{display:flex;align-items:center;justify-content:center;gap:9px;padding:8px;border:1px solid #3b3264;border-radius:10px;background:#071027}.forge-balances img,.recipe-flow img{width:44px;height:44px;object-fit:contain}.forge-balances b{font:700 22px Rajdhani}.forge-recipes{display:grid;gap:12px}.forge-recipes article{display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;padding:13px;border:1px solid #4e3478;border-radius:12px;background:linear-gradient(120deg,#0b1530,#08091b)}.recipe-flow{display:flex;align-items:center;justify-content:center;gap:14px}.recipe-flow span{display:grid;grid-template-columns:auto auto;align-items:center;gap:7px}.recipe-flow b{font:700 17px Rajdhani;white-space:nowrap}.recipe-flow i{color:#4de7ff;font-style:normal;font-size:26px}.forge-recipes article>div:last-child{display:grid;gap:6px}.forge-recipes button{min-width:104px;padding:8px 10px;border:1px solid #b64dff;border-radius:8px;background:linear-gradient(135deg,#35115d,#09265a);color:#fff;font:700 15px Rajdhani;cursor:pointer}.forge-recipes button:last-child{border-color:#38dfff;color:#83f2ff}

/* Commands and Status replace the whole upper-right dashboard, not a small pop-up. */
.modal.panel-modal{position:fixed;max-width:none;max-height:none;margin:0;padding:3%;border-radius:4%;overflow:hidden;background:linear-gradient(135deg,#09152dfc,#030817fc);box-shadow:inset 0 0 34px #151c5b88,0 0 32px #6e22b77a}
.modal.panel-modal::backdrop{background:transparent}
.modal.panel-modal h2{margin:0 0 2%;padding:0 0 2%;font-size:clamp(20px,2.3vw,34px)}
.panel-modal .command-list{display:grid;height:calc(100% - 12%);grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:2%}
.panel-modal .command-list button{display:grid;place-items:center;border:1px solid #30255b;border-radius:10px;background:linear-gradient(135deg,#101a36,#071024);font-size:clamp(16px,2vw,31px);text-align:center}
.panel-modal .command-list button:last-child{grid-column:1/-1}
.panel-modal .modal-note{font-size:clamp(10px,1.15vw,16px)}
.panel-modal #statRows{display:grid;height:calc(100% - 15%);grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:3%}
.panel-modal .stat-row{grid-template-columns:28% 1fr auto 13%;gap:3%;padding:5%;border:1px solid #282856;border-radius:9px;background:#071128aa;font-size:clamp(13px,1.55vw,22px)}
.panel-modal .stat-row button{height:100%;min-height:34px;font-size:clamp(20px,2.5vw,38px)}

/* Persistent online features: compact tabs do not change the locked 1.2:1 canvas. */
.social-dock{position:absolute;right:3.2%;top:1.1%;z-index:8;display:flex;gap:7px}
.social-dock button{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:5px;border:1px solid #4d4f9e;border-radius:12px;background:#050b1fe8;color:#dceaff;padding:5px 10px;font:700 clamp(8px,.85vw,13px) Rajdhani;letter-spacing:.07em;cursor:pointer;box-shadow:0 0 12px #153c8955}.social-dock button small{grid-column:1/-1;text-align:right;font-size:.72em;color:#ffb14d;letter-spacing:.04em}.social-dock button[data-state="online"] small{color:#61ffb5}.social-dock button[data-state="error"] small{color:#ff6d78}
.social-dock .raid-tab{min-width:96px;border-color:#d55072;color:#ff98ad}.social-dock .raid-tab small{font-size:.82em;color:#ffcb67}.social-dock .chat-tab{border-color:#1ecde5;color:#72efff}
.live-dot{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#ff405f;box-shadow:0 0 9px #ff405f;animation:battlePulse .8s infinite alternate}
#chatUnread:not(:empty){display:inline-grid;place-items:center;min-width:15px;height:15px;margin-right:5px;border-radius:99px;background:#24d8ee;color:#001018;font-size:10px}
.social-modal{position:fixed;max-width:none;max-height:none;margin:0;padding:0;border:1px solid #5e47ae;border-radius:16px;background:radial-gradient(circle at 80% 0,#111d46,#030713 60%);color:#edf5ff;overflow:hidden;box-shadow:0 0 44px #5419a488}
.social-modal::backdrop{background:#000a}
.social-modal>header{height:15%;display:flex;align-items:center;justify-content:space-between;padding:2.2% 4%;border-bottom:1px solid #28305d;background:#081029dd;box-sizing:border-box}
.social-modal header small{color:#58dff2;font:700 clamp(8px,.9vw,13px) Rajdhani;letter-spacing:.14em}.social-modal h2{margin:0;font:700 clamp(22px,3vw,44px) Rajdhani;line-height:1}
.connection-badge{padding:7px 12px;border:1px solid #536284;border-radius:999px;color:#9aaccc;font:700 clamp(9px,1vw,14px) Rajdhani}.connection-badge.online,.connection-badge.active{border-color:#35e49a;color:#61ffb5;box-shadow:0 0 13px #21dc8a44}.connection-badge.ended{border-color:#ff607d;color:#ff91a5}
.chat-messages{height:70%;padding:2% 4%;overflow-y:auto;box-sizing:border-box;scrollbar-width:none}.chat-messages::-webkit-scrollbar{display:none}
.chat-message{display:grid;grid-template-columns:minmax(90px,25%) 1fr;gap:2%;padding:1.2% 0;border-bottom:1px solid #20294b;font:600 clamp(11px,1.25vw,18px) Rajdhani}.chat-message b{color:#66e8fa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-message b small{display:block;color:#997fe0;font-size:.72em}.chat-message p{margin:0;overflow-wrap:anywhere;unicode-bidi:plaintext}.empty-message{color:#7484a3;text-align:center;margin-top:20%}
.chat-form{height:15%;display:grid;grid-template-columns:1fr 18%;gap:1.5%;padding:2%;box-sizing:border-box;border-top:1px solid #28305d}.chat-form input{min-width:0;border:1px solid #39416c;border-radius:9px;background:#030817;color:white;padding:0 14px;font:600 clamp(12px,1.3vw,19px) Rajdhani;outline:none}.chat-form input:focus{border-color:#37dced;box-shadow:0 0 12px #20d4e633}.chat-form button,.raid-controls button{border:1px solid #2ed5eb;border-radius:9px;background:linear-gradient(135deg,#073052,#10206a);color:#9af5ff;font:700 clamp(11px,1.25vw,18px) Rajdhani;cursor:pointer}.chat-form :disabled{opacity:.42;cursor:not-allowed}
.raid-hero{height:48%;display:grid;grid-template-columns:42% 58%;align-items:center;padding:1.5% 4%;box-sizing:border-box;background:radial-gradient(circle at 25% 45%,#60177c88,transparent 52%),linear-gradient(120deg,#030713,#11194a)}.raid-boss-visual{height:100%;display:grid;place-items:center;overflow:hidden;filter:drop-shadow(0 0 18px #7947ff)}.raid-boss-visual img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;transform:scale(1.12)}.raid-core{width:100%;padding-left:4%;box-sizing:border-box;text-align:center}.raid-core>span{color:#ff87c8;font:700 clamp(10px,1.1vw,16px) Rajdhani;letter-spacing:.13em}.raid-core>strong{display:block;margin:2% 0;font:700 clamp(24px,3vw,45px) Rajdhani;text-shadow:0 0 13px #f02dff88}.raid-health-track{height:20px;border:1px solid #58304e;border-radius:99px;background:#04050c;overflow:hidden}.raid-health-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#c5124b,#ff375f,#ffb34d);box-shadow:0 0 17px #ff275d;transition:width .25s}.raid-meta{display:grid;grid-template-columns:1fr auto;gap:2% 4%;align-items:center;margin-top:2%;color:#9db0d6;font:700 clamp(9px,1vw,15px) Rajdhani}.raid-meta b:first-child{text-align:left;color:#75eaff}.raid-meta b:nth-child(2){text-align:right}.raid-meta b:last-child{grid-column:1/-1;overflow:hidden;color:#f0a4ff;text-align:center;text-overflow:ellipsis;white-space:nowrap}#raidTimer{grid-column:1/-1;padding:1.5% 3%;border:1px solid #35d5ef;border-radius:10px;background:linear-gradient(90deg,#071a3ddd,#1a0d48dd,#071a3ddd);color:#9af5ff;font:700 clamp(22px,2.8vw,42px) Rajdhani;letter-spacing:.08em;text-align:center;text-shadow:0 0 14px #27dfff;box-shadow:inset 0 0 18px #155ab655,0 0 13px #26d9ef44}.raid-last-hit{margin-top:3%;color:#bfc8e8;font:600 clamp(10px,1.05vw,15px) Rajdhani;text-align:center}
.raid-controls{height:13%;display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:1.5%;padding:1.5% 4%;box-sizing:border-box}.raid-controls button:first-child{border-color:#ff4d78;background:linear-gradient(135deg,#54112d,#8b1738);color:#ffd5df}.raid-controls button:disabled{opacity:.35;cursor:not-allowed}.raid-board{height:24%;padding:1% 5% 3%;box-sizing:border-box;border-top:1px solid #222b51;overflow:hidden}.raid-board h3{margin:.5% 0;color:#ae8cff;font:700 clamp(11px,1.3vw,19px) Rajdhani}.raid-board ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 7%;margin:0;padding-left:24px;font:600 clamp(10px,1.05vw,15px) Rajdhani}.raid-board li span{float:right;color:#ff8ca8}