:root {
  --cs-ui-root:v1;
  --cs-bg:#050817;
  --cs-panel:rgba(8,15,36,.84);
  --cs-border:rgba(53,232,255,.66);
  --cs-ready:#35e8ff;
  --cs-select:#ffd23d;
  --app-sat:0px;
  --app-sab:0px;
  --app-sal:0px;
  --app-sar:0px;
  --sat:max(env(safe-area-inset-top, 0px),var(--app-sat));
  --sar:max(env(safe-area-inset-right, 0px),var(--app-sar));
  --sab:max(env(safe-area-inset-bottom, 0px),var(--app-sab));
  --sal:max(env(safe-area-inset-left, 0px),var(--app-sal));
  --cs-safe-top:var(--sat);
  --cs-safe-right:var(--sar);
  --cs-safe-bottom:var(--sab);
  --cs-safe-left:var(--sal);
  --cs-navy:#09131e;
  --cs-gunmetal:#152433;
  --cs-cyan:#69ddeb;
  --cs-gold:#edd08c;
  --cs-cta:linear-gradient(180deg,#f0d56a,#c9a227);
  --cs-cta-text:#1a1400;
  --cs-font:Inter, "Segoe UI", system-ui, sans-serif;
  --cs-type-body:16px;
  --cs-type-helper:14px;
  --cs-type-title:clamp(24px, 3.2vw, 32px);
  --cs-touch:48px;
  --cs-gap:8px;
  --cs-inset:16px;
  --cs-inset-desktop:24px;
}

@media (min-width:900px) {
  :root { --cs-inset:var(--cs-inset-desktop); }
}

.cs-btn {
  box-sizing:border-box;
  min-height:var(--cs-touch);
  min-width:var(--cs-touch);
  padding:8px 16px;
  border:1px solid #355465;
  border-radius:8px;
  background:var(--cs-gunmetal);
  color:#d6ecf4;
  font:700 var(--cs-type-body)/1.2 var(--cs-font);
  letter-spacing:.04em;
  cursor:pointer;
}
.cs-btn:hover { filter:brightness(1.08); }
.cs-btn:active { transform:translateY(1px); filter:brightness(.88); }
.cs-btn:focus-visible { outline:2px solid #a6f3ff; outline-offset:3px; }
.cs-btn:disabled,
.cs-btn[aria-disabled="true"] { opacity:.45; cursor:default; pointer-events:none; filter:none; transform:none; }
.cs-btn[aria-busy="true"] { opacity:.7; cursor:progress; }
.cs-btn-primary {
  background:var(--cs-cta);
  color:var(--cs-cta-text);
  border-color:var(--cs-gold);
}


html.game-webview-shell,
html.game-webview-shell body,
html.game-fullscreen-active,
html.game-fullscreen-active body,
html:fullscreen,
html:-webkit-full-screen,
body:fullscreen,
body:-webkit-full-screen,
#game-container,
#game-container button,
#game-container .hud-overlay,
#game-container .menu-screen,
#game-container .modal-overlay {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

body { overscroll-behavior:none; }


html, body { font-family:var(--cs-font); }

#titleOverlay {
  --landing-dock:clamp(148px, 20vw, 196px);
  padding:0;
  background:radial-gradient(ellipse 46% 62% at 42% 54%, transparent 0 28%,
    rgba(8,14,38,.42) 68%, #050817ee 100%);
}

.logo {
  font-family:"Arial Black", Impact, sans-serif;
  font-size:clamp(36px, 11vw, 160px);
}

#shopOverlay {
  background:linear-gradient(180deg, rgba(5,8,23,.08) 0 28%, rgba(5,8,23,.56) 62%, rgba(5,8,23,.86) 100%);
}

#shopPanel {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-top-color:var(--cs-border);
  background:linear-gradient(180deg, rgba(12,19,45,.88), rgba(8,13,34,.96));
  backdrop-filter:blur(12px);
}

#shopHead {
  flex:0 0 auto;
  margin-bottom:4px;
}

#workshopStatus {
  color:#cfe8ff;
  font:700 12px/1.35 system-ui,sans-serif;
  letter-spacing:.3px;
  padding:2px 4px 8px;
}

#workshopTools {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:0 0 10px;
}

#stormLodBar {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0 0 10px;
  color:#9bdff7;
  font:700 11px system-ui,sans-serif;
}

#stormLodBar[hidden] { display:none; }

#stormLodBar button {
  min-height:34px;
  min-width:44px;
  border:1px solid #3c829c;
  border-radius:4px;
  background:#133448;
  color:#edfaff;
  padding:6px 9px;
  font:inherit;
  cursor:pointer;
}

#stormLodBar button[aria-pressed=true] {
  background:#1d6379;
  border-color:#88e6ff;
}

#stormLodMeta {
  color:#ffe97a;
  letter-spacing:.2px;
}

.cardState {
  color:#8fb0ff;
  font-size:9px;
  letter-spacing:1px;
  margin:2px 0 4px;
}

.beycard.sel .cardState { color:#37e08a; }
.beycard.previewing:not(.sel) .cardState { color:#ffe44d; }

#shopHead .jpban {
  padding-inline:clamp(8px,3vw,18px);
  font-size:clamp(12px,4vw,17px);
  white-space:nowrap;
}

#shopScroll {
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding-bottom:21px;
  scrollbar-color:rgba(53,232,255,.6) rgba(8,15,36,.45);
}

#beyCards {
  gap:12px;
}

#fightBtn {
  flex:0 0 auto;
  position:relative;
  bottom:auto;
  min-height:64px;
  padding:8px 12px;
  font-size:clamp(20px, 4vw, 24px);
  line-height:1;
}

.ctaMain,
.ctaMeta {
  display:block;
}

.ctaMeta {
  max-width:100%;
  margin-top:3px;
  padding:0 8px;
  font-size:clamp(10px, 2.4vw, 13px);
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tabbtn,
.arenaSelectBtn,
.cardbtn {
  min-height:45px;
}

.beycard {
  width:144px;
  padding:6px 8px;
}

.beyimg {
  width:48px;
  height:48px;
}

.swatch {
  width:36px;
  height:36px;
  margin-bottom:3px;
}

.bname {
  min-height:24px;
}

.btype {
  margin:1px 0 2px;
}

.bskills {
  min-height:14px;
  margin-bottom:1px;
}

.stat {
  height:8px;
  margin-bottom:1px;
  line-height:1;
}

.cardbtn {
  margin-top:3px;
  padding:6px 2px;
}

.lvlchip {
  min-height:45px;
  padding:4px 8px;
}

.beycard.sel,
.beycard.t2.sel,
.beycard.leg.sel {
  border-color:var(--cs-select);
  box-shadow:0 0 18px rgba(255,210,61,.5);
}

#launchOverlay {
  justify-content:flex-end;
  background:linear-gradient(180deg, rgba(4,8,24,.18), rgba(4,8,24,.72));
}

#launchOverlay #launchTitle {
  font-size:clamp(20px, 4vw, 48px);
}

#cordTrack {
  width:min(58vw, 320px);
  height:12px;
}

#pullMsg {
  width:min(92vw, 660px);
  max-width:calc(100vw - 32px);
  white-space:normal;
  overflow-wrap:normal;
  font-size:clamp(17px, 4.2vw, 36px);
}

@media (max-height:500px) {
  #launchOverlay #launchTitle {
    font-size:clamp(16px, 4.2vh, 22px);
    padding:4px 12px;
    margin-bottom:0;
  }
  #pullMsg {
    font-size:clamp(14px, 4vh, 20px);
    margin-top:8px;
  }
}

@media (max-width:900px) {
  #beyCards { gap:8px; }
}

@media (max-width:500px) {
  #beyCards { gap:10px; }
}

/* Battle: keep live information in compact, safe-area edge clusters. */
#hud {
  top:calc(var(--cs-safe-top) + 10px);
  padding:0 calc(var(--cs-safe-right) + 12px) 0 calc(var(--cs-safe-left) + 12px);
}

#spinWrap,
#hudRight {
  pointer-events:auto;
  box-sizing:border-box;
  padding:10px 12px;
  border:1px solid var(--cs-border);
  border-radius:12px;
  background:linear-gradient(145deg, rgba(10,21,48,.88), rgba(6,12,30,.65));
  backdrop-filter:blur(10px);
}

#spinWrap { width:min(44vw, 260px); }

#hudRight {
  max-width:min(48vw, 280px);
  margin-top:46px;
  padding-right:8px;
}

/* Center the live wave, currency, and opponent readout at the top of battle. */
#spinWrap { width:min(22vw, 220px); }

#hudRight {
  position:fixed;
  left:50%;
  top:calc(var(--cs-safe-top) + 8px);
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  justify-items:center;
  column-gap:8px;
  row-gap:4px;
  width:max-content;
  max-width:min(48vw, 320px);
  margin:0;
  padding:6px 9px;
  z-index:12;
}

#hudRight #waveLabel { text-align:center; }

#hudRight #enemyPips {
  grid-column:1 / -1;
  justify-content:center;
}

@media (max-height:450px) {
  #hudRight { top:calc(var(--cs-safe-top) + 6px); }
}

#waveLabel {
  color:#d9f4ff;
  font-size:11px;
  font-weight:900;
  letter-spacing:1px;
  text-align:right;
  text-shadow:1px 1px 0 #000;
}

#enemyPips {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-height:72px;
  overflow:hidden;
}

.pip.primary { width:64px; }
.pip.compact { width:22px; }
.pip.compact .pipName { display:none; }

#tutMsg {
  top:calc(var(--cs-safe-top) + 76px);
  left:50%;
  transform:translateX(-50%);
  max-width:min(72vw, 420px);
  font-size:clamp(12px, 2.6vw, 16px);
  z-index:21;
  pointer-events:none;
}

#arenaStateIcon {
  left:calc(var(--cs-safe-left) + 12px);
  top:calc(var(--cs-safe-top) + 84px);
}

#arenaTitleCard {
  top:calc(var(--cs-safe-top) + clamp(180px, 22vh, 204px));
  max-width:calc(100vw - var(--cs-safe-left) - var(--cs-safe-right) - 24px);
}

/* Clearing the title must not leave its bordered shell during the fade-out. */
#arenaTitleCard:empty { display:none; }

#hintText {
  left:calc(var(--cs-safe-left) + 12px);
  right:calc(var(--cs-safe-right) + 104px);
  bottom:calc(var(--cs-safe-bottom) + 24px);
}

.skillBtn {
  position:fixed;
  right:calc(var(--cs-safe-right) + 18px);
  bottom:calc(var(--cs-safe-bottom) + 18px);
  width:96px;
  height:96px;
  border:3px solid #fff;
  border-radius:50%;
  overflow:visible;
}

.skillBtn.ready {
  border-color:var(--cs-ready);
  box-shadow:0 0 20px rgba(53,232,255,.65);
}

.skillGo {
  display:block;
  font-size:18px;
  line-height:1;
}

.skillName {
  display:block;
  max-width:64px;
  margin:0 auto;
  font-size:8px;
  line-height:1.05;
}

.skillWarn {
  top:-24px;
}

/* Ability artwork stays inside the existing touch target and energy ring. */
.skillBtn .skillArt {
  position:absolute; inset:4px; width:calc(100% - 8px); height:calc(100% - 8px);
  object-fit:cover; border-radius:50%; z-index:1; pointer-events:none;
}
.skillBtn .skillLbl {
  position:absolute; left:5px; right:5px; bottom:5px; z-index:3;
  padding:3px 0 4px; border-radius:0 0 22px 22px;
  background:linear-gradient(transparent,rgba(3,9,22,.96) 24%);
  pointer-events:none; letter-spacing:0;
}
.skillBtn .skillName { font-size:9px; line-height:1.1; text-shadow:0 1px 3px #000; }
.skillBtn .skillGo {
  position:absolute; bottom:49px; left:18px; right:18px;
  font-size:9px; line-height:13px; border-radius:5px; color:#071724;
  background:#7ffff0; text-shadow:none;
}
.skillBtn .skillGo:empty { display:none; }
.skillBtn .skillCd { z-index:2; font-size:22px; font-style:normal; text-shadow:0 2px 3px #000; }
.skillBtn .skillWarn, .skillBtn .skillState { z-index:4; }
.skillBtn:has(.skillCreature) { width:96px; height:96px; }
.skillBtn:has(.skillCreature) .skillFill { mask:radial-gradient(transparent 63%,#000 65%); -webkit-mask:radial-gradient(transparent 63%,#000 65%); }
.skillBtn:has(.skillCreature) .skillArt { inset:0 9% auto; width:82%; height:82%; object-fit:contain; border-radius:50%; filter:saturate(.3) brightness(.8); }
.skillBtn.ready:has(.skillCreature[data-animated="true"]) .skillArt { visibility:hidden; }
.skillBtn.ready .skillArt { filter:none; }
.skillBtn .skillCreature { position:absolute; inset:0 9% auto; width:82%; height:82%; border-radius:50%; z-index:2; pointer-events:none; filter:saturate(.35) brightness(.8); }
.skillBtn.ready .skillCreature { filter:saturate(1.1) brightness(1.1); }
.skillBtn .skillCd { z-index:3; }
.skillBtn:has(.skillCreature) .skillGo { bottom:60px; left:24px; right:24px; }
.skillBtn.ready:has(.skillCreature) { border-color:var(--skill-accent,#63f5e8); box-shadow:0 0 14px color-mix(in srgb,var(--skill-accent,#63f5e8) 55%,transparent); }
.skillBtn:has(.skillCreature) .skillGo { background:var(--skill-accent,#63f5e8); }
.skillBtn.insufficient .skillArt,
.skillBtn.insufficient .skillCreature { filter:saturate(.25) brightness(.55); }
.skillBtn.cooldown .skillArt,
.skillBtn.cooldown .skillCreature { filter:saturate(.35) brightness(.7); }
.skillBtn.in-use .skillArt { filter:saturate(.9) brightness(1); }
.skillBtn .skillLbl { display:none; }
.skillBtn:has(.skillCreature) .skillArt,
.skillBtn .skillCreature { inset:7%; width:86%; height:86%; }

#ripBanner {
  top:calc(var(--cs-safe-top) + 18px);
  max-width:calc(100vw - var(--cs-safe-left) - var(--cs-safe-right) - 24px);
  box-sizing:border-box;
  padding:8px 18px;
  border-width:2px;
  font-size:clamp(16px, 3vw, 26px);
  line-height:1;
}

@media (max-width:360px) {
  #ripBanner {
    padding:6px 10px;
    font-size:13px;
    letter-spacing:1px;
  }
}

/* Result: keep every live outcome inside one narrow, readable glass column. */
#resultOverlay {
  padding:calc(var(--cs-safe-top) + 16px) calc(var(--cs-safe-right) + 16px)
    calc(var(--cs-safe-bottom) + 16px) calc(var(--cs-safe-left) + 16px);
}

#resultCard {
  width:min(88vw, 440px);
  max-width:440px;
  max-height:calc(100dvh - var(--cs-safe-top) - var(--cs-safe-bottom) - 32px);
  padding:clamp(20px, 4vw, 34px);
  overflow:auto;
}

/* Results arrive in a readable order: outcome, stage, reward, then actions. */
#resultOverlay.result-sequence-ready #resultCard > * {
  opacity:0;
  transform:translateY(12px);
  animation:resultReveal .38s cubic-bezier(.2,.8,.25,1) forwards;
}
#resultOverlay.result-sequence-ready #resultTitle { animation-delay:.05s; }
#resultOverlay.result-sequence-ready #resultStage { animation-delay:.18s; }
#resultOverlay.result-sequence-ready #resultLines { animation-delay:.3s; }
#resultOverlay.result-sequence-ready #resultTotal { animation-delay:.42s; }
#resultOverlay.result-sequence-ready #resultActions { animation-delay:.56s; }
@keyframes resultReveal { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) {
  #resultOverlay.result-sequence-ready #resultCard > * { animation:none; opacity:1; transform:none; }
}

#resultTitle {
  width:100%;
  max-width:100%;
  padding-inline:12px;
  font-size:clamp(36px, 9vw, 64px);
  line-height:.95;
  text-align:center;
  overflow-wrap:anywhere;
}

#resultLines { width:100%; }

.rline {
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:16px;
}

#resultStage {
  width:100%;
  margin:0 0 8px;
  color:#cfe0ff;
  font:600 var(--cs-type-body,16px)/1.3 system-ui;
  text-align:center;
}

#resultActions {
  display:flex;
  flex-direction:column;
  gap:var(--cs-gap,8px);
  width:100%;
}

#resultActions .btn,
#resultActions .cs-btn {
  min-height:var(--cs-touch,48px);
  width:100%;
  font-family:var(--cs-font);
}

#resultBtn,
#resultActions [data-result-primary="true"],
#resultOverlay .btn.gold {
  min-height:var(--cs-touch,48px);
  width:100%;
  background:var(--cs-cta);
  color:var(--cs-cta-text);
  border:1px solid var(--cs-gold);
  box-shadow:none;
}

@media (max-height:480px) {
  #resultCard { padding:20px 24px; }
  #resultTitle {
    margin-bottom:8px;
    padding:6px 16px;
    font-size:clamp(36px, 9vw, 48px);
  }
  .rline { padding:2px 4px; }
  #resultTotal { margin:8px 0 10px; font-size:22px; }
  #resultBtn { padding:12px 24px; }
  #resultActions {
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  #resultActions [data-result-primary="true"],
  #resultBtn {
    grid-column:1 / -1;
  }
}

#portraitHero, #portraitDetails, #portraitPager, #portraitLevelToggle { display:none; }
@media (max-width:600px) and (orientation:portrait) {
  #shopOverlay {
    --sat:max(env(safe-area-inset-top,0px),var(--app-sat,0px));
    --sab:max(env(safe-area-inset-bottom,0px),var(--app-sab,0px));
    --sal:max(env(safe-area-inset-left,0px),var(--app-sal,0px));
    --sar:max(env(safe-area-inset-right,0px),var(--app-sar,0px));
    color:#eaf6ff;
    padding:0;
    background:linear-gradient(90deg,rgba(2,9,18,.45),transparent 25% 75%,rgba(2,9,18,.45));
  }
  #shopOverlay #shopPanel {
    height:100dvh; max-height:none; width:100%; box-sizing:border-box;
    padding:calc(var(--sat) + 8px) calc(var(--sar) + 12px) calc(var(--sab) + 10px) calc(var(--sal) + 12px);
    border:0; border-radius:0; background:transparent; backdrop-filter:none;
  }
  #shopOverlay #shopHead { min-height:44px; margin:0 0 6px; gap:8px; }
  #shopOverlay #workshopStatus { font-size:14px; line-height:1.35; }
  #shopOverlay #stormLodBar button { min-height:44px; }
  #shopOverlay #shopHead .jpban { background:none; border:0; transform:none; padding:0; font-size:19px; letter-spacing:1px; box-shadow:none; text-shadow:none; }
  #shopOverlay .moneyChip { font-size:16px; padding:8px 12px; }
  #shopOverlay #shopScroll { display:flex; flex-direction:column; gap:10px; padding:0 0 12px; overflow:auto; touch-action:pan-y; transform:translateZ(0); }
  #shopOverlay #shopScroll > * { flex-shrink:0; }
  #shopOverlay #portraitHero {
    display:block; position:relative;
    height:35vh; min-height:32vh; max-height:38vh;
    border-bottom:1px solid #21728a; pointer-events:auto;
    background:radial-gradient(ellipse at 50% 82%,rgba(0,174,224,.12),transparent 65%);
  }
  #portraitHeroLabel { position:absolute; bottom:8px; left:0; width:100%; text-align:center; text-shadow:0 2px 5px #000; transform:translateZ(0); }
  #portraitHeroLabel strong { display:block; font-size:22px; line-height:1.15; text-transform:uppercase; }
  #portraitHeroLabel span { display:block; margin-top:4px; font-size:14px; color:#56e8ff; }
  #shopOverlay #portraitLevelToggle { display:block; width:100%; min-height:54px; text-align:left; padding:10px 12px; border:1px solid #39748c; border-radius:6px; background:linear-gradient(120deg,#142b3b,#071320); color:#e4f7ff; font:600 14px/1.4 inherit; font-size:14px; }
  #shopOverlay #shopTabs { display:none; }
  #shopOverlay:not(.portraitLevelsOpen) #levelBar, #shopOverlay:not(.portraitLevelsOpen) #arenaSelector { display:none; }
  #shopOverlay #levelBar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; white-space:normal; touch-action:pan-y; }
  #shopOverlay .lvlchip { min-width:44px; min-height:44px; box-sizing:border-box; white-space:normal; }
  #shopOverlay .lvlnum, #shopOverlay .lvlname, #shopOverlay .lvlarena { font-size:14px; line-height:1.3; white-space:normal; overflow-wrap:anywhere; }
  #shopOverlay #arenaSelector { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); overflow:visible; white-space:normal; touch-action:pan-y; }
  #shopOverlay #arenaSelector.hide { display:none; }
  #shopOverlay .arenaSelectLabel { grid-column:1 / -1; }
  #shopOverlay .arenaSelectBtn { font-size:14px; min-width:44px; min-height:45px; box-sizing:border-box; white-space:normal; overflow-wrap:anywhere; }
  #shopOverlay #arenaSelector small, #shopOverlay #arenaSelector span { font-size:14px; }
  #shopOverlay #beyCards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; overflow:visible; padding:0; }
  #shopOverlay .beycard { width:auto; min-width:0; min-height:126px; margin:0; padding:8px 4px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:5px; border:1px solid #37596e; border-radius:6px; background:linear-gradient(145deg,#132637,#06111f); color:#ecfaff; font:inherit; opacity:1; box-shadow:none; }
  #shopOverlay .beycard.sel { border-color:#37596e; box-shadow:none; }
  #shopOverlay .beycard.previewing { border:2px solid #47eaff; padding:7px 3px; box-shadow:inset 0 0 14px #1c78954d,0 0 9px #28c9ef55; }
  #shopOverlay .beyimg { width:68px; height:68px; object-fit:contain; margin:0; }
  #shopOverlay .swatch { width:58px; height:58px; margin:5px; border:3px double #7dcfdf; border-radius:50%; }
  #shopOverlay .bname { display:block; min-height:0; font-size:14px; line-height:1.15; white-space:normal; overflow-wrap:anywhere; }
  #shopOverlay .portraitOwned { font-size:14px; line-height:1.2; color:#a0c0cc; margin-top:auto; }
  #shopOverlay #portraitPager { display:flex; align-items:center; gap:10px; font-size:14px; min-height:44px; }
  #portraitPager > span:first-child { margin-right:auto; letter-spacing:1px; color:#a7c7d4; }
  #portraitPager button { min-width:44px; min-height:44px; border:1px solid #3b7e92; border-radius:5px; background:#102535; color:#63e8ff; font-size:28px; }
  #portraitPager button:disabled { opacity:.35; }
  #shopOverlay #portraitDetails { display:block; padding:12px; border:1px solid #37697f; border-radius:6px; background:linear-gradient(125deg,#102434,#06111f); transform:translateZ(0); }
  .portraitDetailHead { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
  .portraitDetailHead h2 { margin:0; font-size:20px; line-height:1.15; }
  #shopOverlay .portraitDetailHead .cardbtn { width:auto; min-height:44px; max-width:100%; padding:8px 12px; font-size:14px; white-space:normal; overflow-wrap:anywhere; }
  .portraitStats { display:grid; grid-template-columns:1fr 1fr; margin:12px 0 8px; border:1px solid #2b485b; }
  .portraitStats > div { display:flex; justify-content:space-between; padding:8px; font-size:14px; border:1px solid #233d4d; }
  .portraitStats strong { color:#5de4fc; font-size:16px; }
  #shopOverlay #portraitDetails .bskills { font-size:14px; line-height:1.5; text-align:left; white-space:normal; }
  #shopOverlay #fightBtn { min-height:68px; margin:8px 0 0; border:2px solid #ffe49a; border-radius:8px; background:linear-gradient(#ffc936,#f49b0a); color:#211700; box-shadow:0 0 0 3px #774b13; }
  #shopOverlay .ctaMain { font-size:24px; font-weight:900; }
  #shopOverlay .ctaMeta { font-size:14px; white-space:normal; padding:0; line-height:1.2; }
  #shopOverlay button:focus-visible { outline:3px solid #fff; outline-offset:2px; }
  #shopOverlay #shopPreviewBadge { display:none; }
}

/* Transparent actual-model card animation. */
#beyCards .beyimg[hidden]{display:none!important}
#beyCards .bey-card-motion{background:transparent;object-fit:contain;width:80px;height:80px;max-width:100%;border:0;box-shadow:none;pointer-events:none}


.skillState { position:absolute; bottom:calc(100% + 8px); right:0; width:max-content; max-width:min(260px,65vw); padding:6px 9px; border:1px solid #4aa6c4; border-radius:6px; background:rgba(8,18,35,.94); color:#c5f4ff; font:600 10px/1.4 sans-serif; text-align:right; pointer-events:none; }

.skillInfo{background:transparent;border:0;color:#95e8ff;font:600 11px system-ui;text-decoration:underline;cursor:pointer;padding:5px}.skillDetailsDialog{max-width:min(460px,85vw);max-height:80vh;overflow:auto;background:#111e32;color:#e1f2fa;border:1px solid #5ebedb;border-radius:12px;padding:22px;font:14px/1.6 system-ui}.skillDetailsDialog::backdrop{background:#030a16b8}.skillDetailsDialog h2{font-size:20px}.skillDetailsDialog button{padding:8px 22px;background:#1c657e;color:white;border:1px solid #72dcfa;border-radius:6px}

.skillTargetLayer{position:fixed;inset:0;pointer-events:none;z-index:12;overflow:hidden}.skillTargetStatus{position:absolute;max-width:150px;padding:4px 7px;border:1px solid #8bdcff;border-radius:5px;background:rgba(5,13,27,.92);color:#e8f8ff;font:600 11px/1.4 sans-serif;text-align:center;box-shadow:0 2px 5px #0008}.skillTargetStatus[hidden]{display:none}

.skillTargetLeader{position:absolute;height:1px;background:#8bdcff;transform-origin:0 50%;opacity:.7;z-index:-1}.skillTargetLeader[hidden]{display:none}