:root {
  color-scheme: dark;
  --ink: #f6fbff;
  --muted: #a9bac9;
  --cyan: #37e4ff;
  --blue: #167dff;
  --orange: #ff6b2c;
  --navy: #08131f;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #03080e;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  touch-action: none;
  user-select: none;
}

body { display: grid; place-items: center; }

#game-shell {
  position: relative;
  width: min(100vw, 540px);
  height: 100dvh;
  max-height: 960px;
  overflow: hidden;
  background: var(--navy);
  isolation: isolate;
}

#game { width: 100%; height: 100%; display: block; }

#hud {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  padding: max(16px, env(safe-area-inset-top)) 17px 0;
  pointer-events: none;
  background: linear-gradient(#07111fd9 0%, transparent 100%);
}
#hud.hidden { opacity: 0; visibility: hidden; }

.top-row, .stat-row { display: flex; align-items: center; gap: 10px; }
.top-row { height: 35px; }
.brand { display: flex; align-items: baseline; gap: 5px; min-width: 80px; }
.brand span, .stat span, .weapon-chip span { font-size: 9px; letter-spacing: .14em; color: var(--muted); font-weight: 800; }
.brand strong { font-size: 20px; font-style: italic; }
.progress { height: 7px; flex: 1; border-radius: 99px; overflow: hidden; background: #ffffff1d; box-shadow: inset 0 0 0 1px #ffffff12; }
.progress i { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, var(--blue), var(--cyan)); box-shadow: 0 0 12px var(--cyan); transition: width .15s; }
.stage-wallet { position: relative; z-index: 8; min-width: 176px; height: 30px; padding: 0 7px; display: flex !important; flex: 0 0 auto; align-items: center; justify-content: center; gap: 5px; overflow: visible; visibility: visible !important; opacity: 1 !important; white-space: nowrap; border: 1px solid #ffc85266; border-radius: 99px; background: #091829f2; box-shadow: inset 0 1px #ffffff12,0 3px 12px #0005; }
.coin-pill { min-width: 0; height: auto; padding: 0; display: flex !important; flex: 0 0 auto; gap: 3px; align-items: center; visibility: visible !important; opacity: 1 !important; border: 0; border-radius: 0; background: transparent; color: #ffd360; font-size: 10px; font-weight: 950; }
.coin-pill span { font-size: 9px; }
.stage-wallet .coin-pill:first-child,.stage-wallet .coin-pill:first-child span,.stage-wallet #coin-count { display: flex; opacity: 1; color: #ffd360; }
.stage-wallet #coin-count { position: relative; z-index: 1; }
.coin-pill.gold-bar-pill { padding-left: 6px; color: #fff1a0; border-left: 1px solid #fff2a638; }
.coin-pill.gold-bar-pill span { font-size: 10px; }
.coin-pill.silver-stone-pill { padding-left: 6px; color: #dcecff; border-left: 1px solid #b8d9ff38; }
.coin-pill.silver-stone-pill span { color: #b8d9ff; font-size: 10px; }
.coin-pill.pet-shard-pill { padding-left: 6px; color: #ffaef0; border-left: 1px solid #ff8de338; }
.coin-pill.pet-shard-pill span { color: #ff82dc; font-size: 10px; }
.icon-button { width: 34px; height: 34px; border: 1px solid #ffffff20; border-radius: 50%; color: white; background: #ffffff12; pointer-events: auto; font-size: 17px; }
.icon-button.muted { opacity: .45; }
.leave-stage-button { display: none; min-width: 47px; height: 30px; padding: 0 9px; border: 1px solid #ff795d88; border-radius: 8px 3px; color: #ffb29e; background: #30121bd9; pointer-events: auto; font: 950 9px/1 inherit; letter-spacing: .08em; box-shadow: 0 0 16px #ff4c3622; }
.leave-stage-button.visible { display: block; }
.leave-stage-button:active { transform: translateY(1px); background: #5a1921; }

.stat-row { margin-top: 11px; align-items: stretch; }
.stat, .weapon-chip { min-width: 84px; padding: 8px 11px; border: 1px solid #ffffff18; background: #091829c9; backdrop-filter: blur(8px); border-radius: 9px; display: flex; flex-direction: column; }
.stat strong, .weapon-chip strong { font-size: 19px; line-height: 1; margin-top: 3px; }
.stat.damage strong { color: var(--cyan); }
.stat.hp { min-width:67px; }
.stat.hp strong { color: #7ef0a2; }
.stat.damage.claim { animation: damage-claim .62s cubic-bezier(.2,.8,.2,1); }
.stat.damage.claim strong { color: #fff; text-shadow: 0 0 14px var(--cyan); }
@keyframes damage-claim {
  0% { transform: scale(1); border-color: #ffffff18; }
  35% { transform: scale(1.14); border-color: var(--cyan); box-shadow: 0 0 28px #35e2ff66, inset 0 0 18px #35e2ff26; }
  100% { transform: scale(1); border-color: #ffffff18; }
}
.weapon-chip { margin-left: auto; text-align: right; }
.weapon-chip strong { font-size: 12px; color: #dbe8f5; }
.weapon-chip.unlocked { border-color: #ff8d44aa; box-shadow: 0 0 20px #ff6b2c33; }
.weapon-chip.unlocked strong { color: #ff9a55; }

.compact-xp { width: 100%; margin-top: 8px; padding: 7px 10px 8px; border: 1px solid #7e6dff46; border-radius: 8px 3px; background: #091528d9; box-shadow: 0 5px 18px #02091599; }
.compact-xp > div,.home-xp > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.compact-xp span,.home-xp span { color: #b9afd9; font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.compact-xp span b,.home-xp span b { color: #d8d0ff; font-size: 12px; }
.compact-xp strong,.home-xp strong { color: #d9d4ff; font-size: 10px; }
.compact-xp > i,.home-xp > i { height: 6px; margin-top: 6px; display: block; overflow: hidden; border-radius: 99px; background: #ffffff17; }
.compact-xp > i b,.home-xp > i b { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#7658ff,#d064ff,#62e8ff); box-shadow: 0 0 13px #bd5eff; transition: width .32s ease; }
.compact-xp.gain,.home-xp.gain { animation: xp-bar-gain .65s ease-out; }
.stage-buffs { width: 100%; margin-top: 7px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.stage-buffs[hidden] { display: none; }
.stage-buffs span { min-width: 66px; padding: 5px 8px; border: 1px solid #63f0b555; border-radius: 7px 2px; color: #8affcb; background: #08251edb; box-shadow: 0 4px 13px #0008, inset 0 1px #ffffff12; font-size: 9px; font-weight: 950; letter-spacing: .04em; text-align: center; }
.stage-buffs span b { color: white; }
.stage-buffs span.debuff { color: #ff8292; border-color: #ff536466; background: #32121bdb; }
@keyframes xp-bar-gain { 35% { transform: scale(1.025); border-color: #d66cff; box-shadow: 0 0 25px #a75cff77,inset 0 0 14px #b256ff2b; } }

.panel {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0 28px max(48px, calc(env(safe-area-inset-bottom) + 28px));
  text-align: center;
  background: linear-gradient(180deg, #06111a1c 20%, #06111ad9 63%, #050b12 100%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: .35s ease;
}

.panel.visible { opacity: 1; visibility: visible; transform: none; }
.logo-mark { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 14px; transform: skew(-8deg); border: 2px solid var(--cyan); border-radius: 13px 4px 13px 4px; color: var(--cyan); font-weight: 950; font-style: italic; font-size: 23px; box-shadow: inset 0 0 24px #1ddfff22, 0 0 30px #1ddfff1f; }
.eyebrow { margin: 0 0 7px; color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .24em; }
.panel h1, .panel h2 { margin: 0; font-size: clamp(52px, 14vw, 76px); line-height: .82; letter-spacing: -.06em; font-style: italic; font-weight: 1000; filter: drop-shadow(0 5px 0 #001524); }
.panel h1 em, .panel h2 em { color: var(--orange); font-style: inherit; }
.intro { max-width: 380px; margin: 22px 0 24px; color: #c0ced9; font-size: 14px; line-height: 1.55; }
.primary-button { width: min(100%, 345px); min-height: 59px; border: 0; border-radius: 12px 4px 12px 4px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; color: white; background: linear-gradient(100deg, #087cf2, #26cee9); box-shadow: 0 11px 34px #009ee555, inset 0 1px #ffffff66; font: 950 italic 17px/1 inherit; letter-spacing: .04em; cursor: pointer; }
.primary-button:active { transform: translateY(2px); }
.primary-button span { font-size: 20px; }
.hint { margin: 14px 0 0; color: #728596; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

.result-stats { width: min(100%, 345px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 24px 0 16px; }
.result-stats div { padding: 12px 5px; background: #ffffff0b; border: 1px solid #ffffff14; border-radius: 8px; }
.result-stats span { display: block; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.result-stats strong { display: block; margin-top: 5px; color: white; font-size: 16px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; }
.result-leave-button { width: min(100%,345px); min-height: 54px; margin-top: 10px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #ff8b6a88; border-radius: 11px 4px; color: #ffd0c2; background: linear-gradient(100deg,#4c1d1caa,#18202add); box-shadow: inset 0 1px #ffffff18; font: 950 15px/1 inherit; letter-spacing: .06em; }
.result-leave-button span { color: #ff8b6a; font-size: 21px; }
.result-leave-button:active { transform: translateY(2px); }

.complete-panel { justify-content: center; padding-top: max(36px, env(safe-area-inset-top)); background: radial-gradient(circle at 50% 34%, #0d716d55, transparent 34%), linear-gradient(180deg, #04111bd9, #041019f5); }
.complete-panel::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, transparent 0 36px, #4df6c008 37px 38px); }
.complete-panel > * { position: relative; z-index: 1; }
.complete-badge { width: 66px; height: 66px; margin-bottom: 18px; display: grid; place-items: center; border: 2px solid #65f4bd; border-radius: 50%; color: #07151f; background: linear-gradient(145deg,#baffde,#3ee6ae); box-shadow: 0 0 0 9px #52edb31a,0 0 44px #39eeb46b; font-size: 34px; font-weight: 1000; animation: complete-badge-in .55s cubic-bezier(.2,1.35,.4,1) both; }
.complete-panel h2 em { color: #62f1ae; }
.complete-rewards { width: min(100%,365px); margin: 20px 0 17px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.complete-rewards div { min-height: 78px; padding: 10px 9px; display: grid; grid-template-columns: 29px 1fr; align-items: center; column-gap: 7px; border: 1px solid #5fe8b64d; border-radius: 11px 4px; background: linear-gradient(145deg,#123043dd,#091724e8); box-shadow: inset 0 1px #ffffff14; }
.complete-rewards i { grid-row: 1/3; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: #07151f; background: #67f1b8; font: 1000 11px/1 system-ui; box-shadow: 0 0 15px #67f1b855; }
.complete-rewards span { display: block; color: #9db4c2; font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.complete-rewards strong { display: block; color: #67f1b8; font-size: 19px; line-height: 1; }
.complete-rewards .loot-gold { border-color: #ffc94e66; }
.complete-rewards .loot-gold i { background: #ffd35b; box-shadow: 0 0 15px #ffc43c77; }
.complete-rewards .loot-gold strong { color: #ffd45b; }
.complete-rewards .loot-silver { border-color: #a5c9ea66; }
.complete-rewards .loot-silver i { background: #c8e7ff; box-shadow: 0 0 15px #8acbff66; }
.complete-rewards .loot-silver strong { color: #c8e7ff; }
.complete-rewards .loot-pet { border-color: #ff8bd866; }
.complete-rewards .loot-pet i { background: #ff83d8; box-shadow: 0 0 15px #ff55c477; }
.complete-rewards .loot-pet strong { color: #ffb8e9; }
.complete-rewards .loot-xp i { color: white; background: #8b66ff; box-shadow: 0 0 15px #8b66ff66; }
.complete-rewards .loot-soon { opacity: .55; border-style: dashed; }
.complete-rewards .loot-soon i { color: #8fa4b4; background: #223444; box-shadow: none; }
.complete-rewards .loot-soon strong { color: #8fa4b4; font-size: 10px; letter-spacing: .06em; }
.complete-actions { width: min(100%,345px); display: grid; gap: 9px; }
.complete-actions .primary-button,.complete-actions .result-leave-button { width: 100%; margin: 0; }
.complete-replay-button { width: 100%; min-height: 54px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #4ce5ff99; border-radius: 11px 4px; color: #baf6ff; background: linear-gradient(100deg,#0b3c54e8,#0b2538e8); box-shadow: inset 0 1px #ffffff1c; font: 950 15px/1 inherit; letter-spacing: .05em; }
.complete-replay-button span { color: #52e8ff; font-size: 22px; }
.complete-actions button:active { transform: translateY(2px); }
.complete-actions button:disabled { cursor: default; opacity: .42; filter: grayscale(.8); box-shadow: none; }
.complete-home-button { border-color: #ffffff2c; color: #c6d2da; background: #0b1721d9; }
.complete-home-button span { color: #a5b7c3; }
@keyframes complete-badge-in { from { opacity: 0; transform: scale(.3) rotate(-18deg); } to { opacity: 1; transform: scale(1); } }

#toast { position: absolute; z-index: 8; top: 150px; left: 50%; width: max-content; max-width: 88%; padding: 10px 15px; border-radius: 7px; color: white; background: #071522de; border: 1px solid #43dcff66; font-size: 12px; font-weight: 850; letter-spacing: .04em; transform: translate(-50%, -12px); opacity: 0; transition: .2s; pointer-events: none; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { border-color: #ff604f88; }

#claim-banner { position: absolute; z-index: 8; left: 50%; top: 58%; min-width: 210px; padding: 11px 22px 10px; text-align: center; transform: translate(-50%, 30px) scale(.75); opacity: 0; pointer-events: none; border-radius: 10px 3px; background: #051521e8; border: 1px solid var(--cyan); box-shadow: 0 0 40px #28dcff44; }
#claim-banner strong { display: block; color: var(--cyan); font-size: 25px; line-height: 1; font-weight: 1000; font-style: italic; }
#claim-banner span { display: block; margin-top: 5px; color: #fff; font-size: 9px; font-weight: 900; letter-spacing: .14em; }
#claim-banner.negative { border-color: var(--orange); box-shadow: 0 0 40px #ff6b2c44; }
#claim-banner.negative strong { color: var(--orange); }
#claim-banner.show { animation: clean-claim .9s cubic-bezier(.2,.75,.2,1) both; }
.monster-loot-popup { position:absolute; z-index:9; top:calc(100% + 7px); left:50%; min-width:200px; padding:7px 11px; opacity:0; visibility:hidden; transform:translate(-50%,-10px) scale(.94); pointer-events:none; border:1px solid #9be8ff55; border-radius:10px 3px; background:#06152170; box-shadow:0 0 18px #4ccfff24; text-align:center; transition:.2s ease; }
.monster-loot-popup.show { opacity:1; visibility:visible; transform:translate(-50%,0) scale(1); }
.monster-loot-popup small { color:#c6efff; font-size:9px; font-weight:950; letter-spacing:.18em; }
.monster-loot-popup div { display:flex; justify-content:center; gap:10px; margin-top:4px; }
.monster-loot-popup span { color:#b8d9ff; font-size:10px; font-weight:900; }
.monster-loot-popup span:last-child { color:#ff9ce5; }
.monster-loot-popup b { margin-left:3px; color:white; font-size:13px; }
.xp-gain { position: absolute; z-index: 12; top: 166px; left: 50%; min-width: 150px; padding: 8px 16px; opacity: 0; transform: translate(-50%,18px) scale(.72); text-align: center; pointer-events: none; border: 1px solid #c66cff; border-radius: 9px 3px; background: linear-gradient(110deg,#28135feb,#10162bea); box-shadow: 0 0 28px #a84dff77,inset 0 1px #ffffff3d; }
.xp-gain strong { display: block; color: #ead7ff; font-size: 18px; line-height: 1; font-weight: 1000; font-style: italic; text-shadow: 0 0 12px #c15cff; }
.xp-gain span { display: block; margin-top: 4px; color: #89eaff; font-size: 8px; font-weight: 950; letter-spacing: .14em; }
.xp-gain.show { animation: xp-gain-pop 1.15s cubic-bezier(.2,.8,.2,1) both; }
@keyframes xp-gain-pop { 0% { opacity: 0; transform: translate(-50%,18px) scale(.72); } 18%,70% { opacity: 1; transform: translate(-50%,0) scale(1); } 100% { opacity: 0; transform: translate(-50%,-25px) scale(.92); } }
.level-stats-popup { position: absolute; z-index: 19; top: 225px; left: 50%; width: min(88%,340px); padding: 11px 13px; opacity: 0; visibility: hidden; transform: translate(-50%,12px) scale(.78); pointer-events: none; text-align: center; border: 1px solid #72f6bd; border-radius: 11px 4px; background: linear-gradient(120deg,#071724f2,#102d2af2); box-shadow: 0 0 32px #4ff2a966,inset 0 1px #fff4; }
.level-stats-popup > strong { color: #fff3a0; font-size: 11px; font-weight: 1000; letter-spacing: .12em; }
.level-stats-popup > div { margin-top: 8px; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.level-stats-popup span { padding: 6px 8px; color: #c6d5dd; border: 1px solid #ffffff1e; border-radius: 6px 2px; background: #ffffff0a; font-size: 10px; font-weight: 950; }
.level-stats-popup del { color: #ff6675; text-decoration: none; }.level-stats-popup b { color: #61f3a9; font-size: 12px; }
.level-stats-popup.show { visibility: visible; animation: level-stats-show 4s cubic-bezier(.18,.8,.2,1) both; }
@keyframes level-stats-show { 0% { opacity: 0; transform: translate(-50%,12px) scale(.78); } 5%,88% { opacity: 1; transform: translate(-50%,0) scale(1); } 100% { opacity: 0; transform: translate(-50%,-18px) scale(.92); } }
.critical-hit { position: absolute; z-index: 10; left: 50%; top: 41%; width: max-content; padding: 7px 12px 6px; text-align: center; opacity: 0; transform: translate(-50%,-50%) scale(.6) rotate(-4deg); pointer-events: none; border: 1px solid #ff9a91; border-radius: 9px 3px; background: radial-gradient(circle at 50% 0,#ff5a4f66,#310609ed 68%); box-shadow: 0 0 13px #ff332fbb,0 0 30px #ff174f66,inset 0 1px #fff7; }
.critical-hit strong { display: block; color: #fff0ed; font-size: 19px; line-height: .9; font-weight: 1000; font-style: italic; letter-spacing: -.01em; text-shadow: 0 1px #7b0010,0 0 10px #ff3a3a; }
.critical-hit span { display: block; margin-top: 5px; color: #ff8279; font-size: 9px; font-weight: 1000; letter-spacing: .11em; }

.critical-hit.show { animation: critical-pop .62s cubic-bezier(.16,.78,.2,1) both; }
.damage-number-layer { position: absolute; inset: 0; z-index: 11; overflow: hidden; pointer-events: none; }
.damage-float { position: absolute; min-width: 46px; padding: 2px 6px; transform: translate(-50%,-50%); color: #ff5e58; text-align: center; font: 1000 italic 13px/1 inherit; letter-spacing: -.02em; text-shadow: 0 2px #52000c,0 0 8px #ff394f; animation: damage-float .7s cubic-bezier(.18,.75,.25,1) both; }
.damage-float.critical { padding: 4px 7px; color: #fff3b0; border: 1px solid #ffbd4d99; border-radius: 6px 2px; background: #5c160bdc; box-shadow: 0 0 13px #ff653f88; font-size: 15px; }
.damage-float.critical::before { content: 'CRIT '; color: #ffb43d; font-size: 9px; letter-spacing: .06em; }
.damage-float.enemy { color: #ff4864; text-shadow: 0 2px #50000d,0 0 10px #ff174f; }
@keyframes damage-float { 0% { opacity: 0; transform: translate(-50%,4px) scale(.72); } 18% { opacity: 1; transform: translate(-50%,-3px) scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-30px) scale(.92); } }

.boss-zone { position: absolute; z-index: 18; top: 37%; left: 50%; width: 122%; display: flex; align-items: center; gap: 13px; opacity: 0; visibility: hidden; transform: translate(-50%,-50%) rotate(-3deg) scale(1.25); pointer-events: none; }
.boss-zone i { height: 4px; flex: 1; background: linear-gradient(90deg,transparent,#ff174d); box-shadow: 0 0 14px #ff174d; }
.boss-zone i:last-child { background: linear-gradient(90deg,#ff174d,transparent); }
.boss-zone div { min-width: 280px; padding: 13px 22px 14px; text-align: center; border-block: 3px solid #ff315d; background: linear-gradient(100deg,#19040bea,#50091aee,#19040bea); box-shadow: 0 0 38px #ff174d88,inset 0 0 24px #ff174d24; clip-path: polygon(5% 0,100% 0,95% 100%,0 100%); }
.boss-zone small,.boss-zone strong,.boss-zone span { display: block; }
.boss-zone small { color: #ff8da3; font-size: 9px; font-weight: 950; letter-spacing: .34em; }
.boss-zone strong { margin-top: 3px; color: white; font-size: 44px; line-height: .9; font-weight: 1000; font-style: italic; letter-spacing: -.05em; text-shadow: 4px 4px #960022,0 0 18px #ff174d; }
.boss-zone span { margin-top: 8px; color: #ffdbe2; font-size: 10px; font-weight: 900; letter-spacing: .11em; }
.boss-zone.show { visibility: visible; animation: boss-zone-anime 1.65s cubic-bezier(.16,.8,.25,1) both; }
@keyframes boss-zone-anime { 0% { opacity: 0; transform: translate(-80%,-50%) rotate(-7deg) scale(1.5); } 18%,68% { opacity: 1; transform: translate(-50%,-50%) rotate(-3deg) scale(1); } 100% { opacity: 0; transform: translate(-20%,-50%) rotate(2deg) scale(.9); } }

.boss-reward { position: absolute; z-index: 17; top: 42%; left: 50%; width: min(88%,390px); padding: 17px 18px 16px; opacity: 0; visibility: hidden; transform: translate(-50%,-50%) scale(.74); text-align: center; pointer-events: none; border: 1px solid #ffd25c; border-radius: 14px 4px; background: radial-gradient(circle at 50% 0,#7b5a1955,#071522f2 62%); box-shadow: 0 0 45px #ffc83d66,inset 0 1px #fff7; }
.boss-reward > small { color: #69efbd; font-size: 10px; font-weight: 950; letter-spacing: .2em; }
.boss-reward > strong { display: block; margin-top: 4px; color: #fff4b0; font-size: 28px; font-style: italic; }
.boss-reward > div { margin-top: 13px; display: grid; grid-template-columns: repeat(2,1fr); gap: 6px; }
.boss-reward span { padding: 9px 4px; color: white; border: 1px solid #ffd25c3d; border-radius: 7px 2px; background: #ffffff0b; font-size: 10px; font-weight: 950; }
.boss-reward.show { visibility: visible; animation: boss-reward-show 2s ease both; }
@keyframes boss-reward-show { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.7); } 12%,82% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-56%) scale(.94); } }
@keyframes critical-pop { 0% { opacity: 0; transform: translate(-50%,-42%) scale(.45) rotate(-5deg); } 22% { opacity: 1; transform: translate(-50%,-58%) scale(1.12) rotate(2deg); } 58% { opacity: 1; transform: translate(-50%,-64%) scale(1) rotate(-1deg); } 100% { opacity: 0; transform: translate(-50%,-115%) scale(.9) rotate(0); } }
@keyframes clean-claim { 0% { opacity: 0; transform: translate(-50%, 30px) scale(.75); } 20%, 65% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -22px) scale(.94); } }

#drag-hint { position: absolute; z-index: 6; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); padding: 8px 14px; color: #d8edf6; background: #061421b8; border-radius: 99px; border: 1px solid #ffffff1c; font-size: 10px; font-weight: 900; letter-spacing: .12em; opacity: 0; transition: opacity .3s; pointer-events: none; }
#drag-hint.visible { opacity: 1; }
#drag-hint span { color: var(--cyan); font-size: 17px; vertical-align: -1px; margin-right: 6px; }

.shop-panel { justify-content: center; padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom)); background: #030a11e8; }
.shop-card { width: 100%; max-height: 100%; overflow-y: auto; padding: 18px; text-align: left; border: 1px solid #ffffff16; border-radius: 18px 5px; background: linear-gradient(155deg,#0b1c2cf5,#06111df8); box-shadow: 0 24px 80px #000a; scrollbar-width: none; }
.shop-card::-webkit-scrollbar { display: none; }
.shop-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.shop-heading h2 { font-size: 42px; line-height: .9; }
.shop-heading .eyebrow { text-align: left; }
.shop-coins { min-width: 84px; padding: 9px 12px; text-align: right; border: 1px solid #ffc85255; border-radius: 9px 3px; background: #ffc8520d; }
.shop-coins span { display: block; color: #aebdca; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.shop-coins strong { display: block; margin-top: 2px; color: #ffd360; font-size: 19px; }
.profile-row { display: flex; gap: 10px; margin-top: 17px; }
.level-orb { width: 78px; min-width: 78px; height: 78px; display: grid; place-content: center; text-align: center; border: 1px solid #36e4ff77; border-radius: 50%; background: #21d7ff12; box-shadow: inset 0 0 20px #2cdfff17; }
.level-orb span,.level-orb small { color: #8da5b5; font-size: 7px; font-weight: 900; letter-spacing: .12em; }
.level-orb strong { color: var(--cyan); font-size: 25px; line-height: 1; }
.profile-stats { flex: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.profile-stats div { display: grid; place-content: center; padding: 6px; text-align: center; background: #ffffff08; border: 1px solid #ffffff10; border-radius: 8px; }
.profile-stats span { color: #8fa3b2; font-size: 7px; text-transform: uppercase; }
.profile-stats strong { margin-top: 4px; font-size: 13px; }
.cp-summary { margin-top: 11px; padding: 11px 12px; display: grid; grid-template-columns: minmax(130px,.9fr) 1.4fr; gap: 12px; align-items: center; border: 1px solid #ffd45b66; border-radius: 12px 4px; background: radial-gradient(circle at 5% 50%,#ffd45b1d,transparent 42%),linear-gradient(110deg,#161b2f,#071725); box-shadow: inset 0 1px #fff2,0 7px 22px #0004; }
.cp-summary div span,.cp-summary div strong { display: block; }
.cp-summary div span { color: #ffe28b; font-size: 8px; font-weight: 1000; letter-spacing: .12em; }
.cp-summary div strong { margin-top: 4px; color: white; font-size: 23px; line-height: 1; text-shadow: 0 0 18px #ffd45b55; }
.cp-summary section { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.cp-summary section span { padding: 7px 4px; color: #8fa8b9; text-align: center; border: 1px solid #ffffff10; border-radius: 7px 2px; background: #ffffff07; font-size: 7px; font-weight: 900; }
.cp-summary section b { margin-top: 3px; display: block; color: #70eaff; font-size: 10px; }
.cp-summary.compact { margin-top: 12px; padding: 9px 10px; }
.upgrade-button { width: 100%; height: 42px; margin-top: 9px; padding: 0 13px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #36e4ff55; border-radius: 8px 3px; color: white; background: #20cfea15; font: 900 10px/1 inherit; letter-spacing: .06em; }
.upgrade-button strong { color: #ffd360; }
.upgrade-button:disabled { opacity: .4; }
.stats-copy { margin-top: 12px; }
.level-progress { margin-top: 12px; padding: 10px 12px; border: 1px solid #44ddff33; border-radius: 10px 3px; background: #081a29b8; }
.level-progress > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.level-progress span { color: #91aaba; font-size: 9px; font-weight: 950; letter-spacing: .1em; }.level-progress strong { color: #c9f8ff; font-size: 11px; }.level-progress > i { height: 7px; margin-top: 8px; display: block; overflow: hidden; border-radius: 99px; background: #ffffff16; }.level-progress > i b { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg,#1688ff,#3ee8ff,#64f1bb); box-shadow: 0 0 12px #3de8ff; transition: width .25s; }
.stat-point-bank { min-height: 51px; margin-top: 9px; padding: 8px 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; border: 1px solid #63f0bf66; border-radius: 10px 3px; background: linear-gradient(110deg,#0c3b354f,#081725); }.stat-point-bank span { color: #a9c7c1; font-size: 10px; font-weight: 950; letter-spacing: .08em; }.stat-point-bank strong { grid-row: 1/3; grid-column: 2; color: #6af3c1; font-size: 27px; }.stat-point-bank small { margin-top: 3px; color: #6eb9a2; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.stat-batch-controls { margin-top: 9px; padding: 5px; display: grid; grid-template-columns: auto repeat(5,1fr); gap: 4px; align-items: center; border: 1px solid #ffffff13; border-radius: 10px 3px; background: #020b14a6; }.stat-batch-controls > span { padding: 0 5px; color: #8298a8; font-size: 8px; font-weight: 950; letter-spacing: .08em; }.stat-batch-controls button { height: 32px; border: 1px solid transparent; border-radius: 7px 2px; color: #9cb0bd; background: #ffffff08; font: 950 9px/1 inherit; }.stat-batch-controls button.active { color: #04151d; border-color: #bafff0; background: linear-gradient(120deg,#3ee8ff,#65f1b8); }
.stat-upgrades { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.stat-upgrade { width: 100%; min-height: 64px; padding: 9px 10px 9px 13px; display: grid; grid-template-columns: minmax(0,1fr) 76px 116px; gap: 9px; align-items: center; text-align: left; border: 1px solid #2edfff35; border-radius: 12px 4px; color: white; background: linear-gradient(110deg,#163047,#0a1a29 68%); box-shadow: inset 0 1px #ffffff0b; }
.stat-upgrade.premium { border-color: #ffc85255; background: linear-gradient(110deg,#392b1438,#0a1a29 70%); }
.stat-copy b,.stat-copy small,.stat-progress strong,.stat-progress small { display: block; }
.stat-copy b { color: #f4fbff; font-size: 13px; font-weight: 1000; letter-spacing: .055em; }
.stat-copy small { margin-top: 5px; color: #91aaba; font-size: 9px; line-height: 1.25; }
.stat-progress { text-align: right; }
.stat-progress strong { color: var(--cyan); font-size: 13px; }
.premium .stat-progress strong { color: #ffd360; }
.stat-progress small { margin-top: 4px; color: #728b9b; font-size: 8px; font-weight: 900; }
.stat-buy { min-height: 40px; padding: 8px 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid #39dfff66; border-radius: 9px 3px; color: white; background: linear-gradient(135deg,#078ee6,#1dcddd); font-size: 9px; font-weight: 1000; letter-spacing: .06em; text-align: center; }
.stat-buy b { color: #fff5b0; font-size: 9px; }
.premium .stat-buy { border-color: #ffd56d88; background: linear-gradient(135deg,#815900,#d89300); }
.stat-upgrade:disabled { opacity: .64; }
.stat-upgrade:disabled .stat-buy { filter: grayscale(.75); }
.reset-button { width: 100%; margin-top: 7px; padding: 8px 10px; display: flex; justify-content: space-between; border: 1px solid #ff765133; border-radius: 8px 3px; color: #ffb19a; background: #ff6b2c0c; font: 850 8px/1 inherit; letter-spacing: .09em; }
.reset-button:disabled { opacity: .3; }
.reset-button strong { color: #ffd360; }

/* Stats uses a larger, phone-first type scale than the dense equipment shop. */
#stats-panel .shop-card { padding: 20px; }
#stats-panel .shop-heading .eyebrow { font-size: 12px; }
#stats-panel .shop-heading h2 { font-size: 48px; }
#stats-panel .shop-coins { min-width: 92px; padding: 11px 13px; }
#stats-panel .shop-coins span { font-size: 10px; }
#stats-panel .shop-coins strong { font-size: 22px; }
#stats-panel .level-orb { width: 86px; min-width: 86px; height: 86px; }
#stats-panel .level-orb span,#stats-panel .level-orb small { font-size: 9px; }
#stats-panel .level-orb strong { font-size: 29px; }
#stats-panel .profile-stats span { font-size: 9px; font-weight: 800; }
#stats-panel .profile-stats strong { font-size: 16px; }
#stats-panel .stats-copy { font-size: 15px; line-height: 1.55; }
#stats-panel .stat-upgrades { gap: 10px; }
#stats-panel .stat-upgrade { min-height: 76px; padding: 11px 11px 11px 14px; grid-template-columns: minmax(0,1fr) 86px 128px; gap: 11px; }
#stats-panel .stat-copy b { font-size: 16px; letter-spacing: .045em; }
#stats-panel .stat-copy small { margin-top: 6px; font-size: 11px; line-height: 1.35; }
#stats-panel .stat-progress strong { font-size: 16px; }
#stats-panel .stat-progress small { margin-top: 5px; font-size: 10px; }
#stats-panel .stat-buy { min-height: 50px; padding: 9px 8px; font-size: 12px; }
#stats-panel .stat-buy b { font-size: 11px; }
#stats-panel .reset-button { min-height: 48px; margin-top: 10px; padding: 10px 12px; font-size: 12px; }
#stats-panel .secondary-button { min-height: 50px; font-size: 12px; }

@media (max-width: 420px) {
  .top-row { gap: 6px; }
  .brand { min-width: 66px; gap: 3px; }
  .brand span { font-size: 8px; }
  .brand strong { font-size: 17px; }
  .stage-wallet { min-width: 153px; height: 28px; padding: 0 4px; gap: 3px; }
  .coin-pill { gap: 2px; font-size: 8px; }
  .coin-pill.gold-bar-pill,.coin-pill.silver-stone-pill,.coin-pill.pet-shard-pill { padding-left: 3px; }
  .leave-stage-button { min-width: 42px; padding: 0 7px; }
  .icon-button { width: 31px; height: 31px; }
  #stats-panel .shop-card { padding: 16px; }
  #stats-panel .stats-copy { font-size: 12px; }
  #stats-panel .stat-upgrade { grid-template-columns: minmax(0,1fr) 68px 104px; gap: 7px; padding-left: 11px; }
  #stats-panel .stat-copy b { font-size: 15px; }
  #stats-panel .stat-copy small { font-size: 10px; }
  #stats-panel .stat-progress strong { font-size: 14px; }
  #stats-panel .stat-buy { font-size: 11px; }
}
.shop-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-top: 14px; padding: 4px; border: 1px solid #ffffff10; border-radius: 12px 4px; background: #020b14a6; }
.shop-tab { height: 35px; border: 0; border-radius: 8px 3px; color: #8298a8; background: transparent; font: 950 9px/1 inherit; letter-spacing: .11em; }
.shop-tab.active { color: #06121c; background: linear-gradient(110deg,var(--cyan),#68f5d0); box-shadow: 0 5px 20px #24ddff33; }
.shop-tab-panel { display: none; }
.shop-tab-panel.active { display: block; animation: tab-in .2s ease-out; }
@keyframes tab-in { from { opacity: 0; transform: translateY(4px); } }
.shop-section { margin-top: 17px; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.section-title span { font-size: 10px; font-weight: 950; letter-spacing: .16em; }
.section-title small { color: #8295a4; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.item-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; max-height: 178px; overflow-y: auto; padding: 1px 2px 5px 1px; scrollbar-width: thin; scrollbar-color: #35dfff44 transparent; }
.item-list::-webkit-scrollbar { display: none; }
.shop-item { min-height: 78px; padding: 9px; text-align: left; border: 1px solid #ffffff13; border-radius: 11px 3px; color: white; background: linear-gradient(145deg,#ffffff09,#ffffff03); }
.shop-item span { display: block; color: #9db0be; font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.shop-item strong { display: block; margin: 3px 0 8px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-item em { color: #ffd360; font: 900 9px/1 inherit; }
.shop-item.owned em { color: #8da5b5; }
.shop-item.equipped { border-color: var(--cyan); background: #2adfff14; box-shadow: inset 0 0 17px #31dfff10; }
.shop-item:disabled { opacity: .42; }
.shop-card .primary-button { width: 100%; margin-top: 18px; min-height: 52px; }
.privacy-link { position: relative; z-index: 2; display: inline-block; margin-top: 8px; color: #8ca6b6; font-size: 10px; letter-spacing: .08em; pointer-events: auto; }

.home-panel { justify-content: initial; padding: 0; background: radial-gradient(circle at 50% 42%,#20cfe21d 0 19%,transparent 38%),linear-gradient(180deg,#061521dd 0%,transparent 25%,#06111a20 56%,#020a12f5 88%); }
.home-brand { position: absolute; z-index: 4; top: max(18px,env(safe-area-inset-top)); left: 17px; right: 17px; display: flex; align-items: flex-start; gap: 11px; text-align: left; }
.home-brand .logo-mark { width: 43px; height: 43px; margin: 0; font-size: 17px; border-radius: 10px 3px; }
.home-brand > div:nth-child(2) { min-width: 0; padding-top: 2px; }
.home-brand .eyebrow { margin-bottom: 4px; font-size: 10px; }
.home-brand h1 { font-size: clamp(23px,6.5vw,29px); line-height: .9; letter-spacing: -.04em; filter: none; white-space: nowrap; }
.home-brand h1 em { color: var(--orange); }
.home-wallet { width: 150px; margin-left: auto; flex: 0 0 150px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.home-currency { min-width: 0; padding: 7px 9px; color: #ffd360; text-align: right; border: 1px solid #ffc85255; border-radius: 99px; background: #071827dc; font-size: 10px; }
.home-currency strong { font-size: 12px; }
.home-currency.gold-bar { color: #fff1a0; border-color: #fff2a666; background: linear-gradient(100deg,#332900dd,#171506dd); }
.home-currency.silver-stone { color: #dcecff; border-color: #b8d9ff77; background: linear-gradient(100deg,#28394add,#101925dd); }
.home-currency.pet-shard { color: #ffc2f0; border-color: #ff88dd77; background: linear-gradient(100deg,#462244dd,#15101ddd); }
.hero-card { position: absolute; left: 50%; bottom: 142px; width: min(72%,300px); transform: translateX(-50%); padding: 10px 15px; text-align: center; border: 1px solid #43e7ff3d; border-radius: 11px 3px; background: #061624d9; box-shadow: 0 12px 36px #0008; }
.hero-card span { display: block; color: white; font-size: 21px; font-weight: 1000; font-style: italic; }
.hero-card strong { display: block; margin-top: 4px; color: var(--cyan); font-size: 10px; letter-spacing: .11em; }
.home-xp { position: absolute; z-index: 3; top: calc(max(18px,env(safe-area-inset-top)) + 106px); left: 50%; width: min(calc(100% - 42px),370px); padding: 10px 13px; transform: translateX(-50%); border: 1px solid #9b75ff55; border-radius: 11px 4px; background: linear-gradient(105deg,#121733e8,#091a2ae8); box-shadow: 0 8px 26px #0007,inset 0 1px #ffffff12; }
.home-xp.gain { animation: home-xp-gain .65s ease-out; }
@keyframes home-xp-gain { 35% { transform: translateX(-50%) scale(1.025); border-color: #d66cff; box-shadow: 0 0 25px #a75cff77; } }
.home-cp { position: absolute; z-index: 3; top: calc(max(18px,env(safe-area-inset-top)) + 170px); left: 50%; width: min(calc(100% - 78px),330px); min-height: 49px; padding: 8px 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; transform: translateX(-50%); text-align: left; border: 1px solid #ffd45b70; border-radius: 11px 4px; background: linear-gradient(105deg,#30260de8,#101928eb); box-shadow: 0 8px 25px #0007,0 0 20px #ffd45b18,inset 0 1px #fff2; }
.home-cp span { color: #ffe28b; font-size: 8px; font-weight: 1000; letter-spacing: .14em; }
.home-cp strong { color: white; font-size: 18px; text-shadow: 0 0 15px #ffd45b77; }
.home-cp small { grid-column: 1/-1; margin-top: 3px; color: #99b0c0; font-size: 7px; font-weight: 850; letter-spacing: .05em; }
.stage-select-open { position: absolute; z-index: 4; left: 50%; bottom: 300px; min-width: 178px; min-height: 40px; padding: 0 17px; transform: translateX(-50%); border: 1px solid #7ceeff88; border-radius: 99px; color: #eafbff; background: #071b2be8; box-shadow: 0 8px 24px #0008,0 0 18px #42e7ff22; font: 950 11px/1 inherit; letter-spacing: .09em; }
.stage-select-open span { margin-right: 7px; color: var(--cyan); font-size: 15px; vertical-align: -1px; }
.fast-sweep-button { position: absolute; z-index: 4; left: 50%; bottom: 226px; width: min(calc(100% - 34px),390px); min-height: 64px; padding: 10px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transform: translateX(-50%); text-align: left; border: 1px solid #ffd76888; border-radius: 13px 4px; color: white; background: linear-gradient(110deg,#4e3500e8,#b27600e8 58%,#492e00e8); box-shadow: 0 10px 30px #0009,0 0 20px #ffc43d22,inset 0 1px #fff5; }
.fast-sweep-button[hidden] { display: none; }
.fast-sweep-button span,.fast-sweep-button strong,.fast-sweep-button b,.fast-sweep-button small { display: block; }
.fast-sweep-button > span b { color: #fff5b1; font-size: 14px; font-weight: 1000; font-style: italic; }
.fast-sweep-button > span small { margin-top: 6px; color: #ffdda1; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.fast-sweep-button > strong { min-width: 125px; text-align: right; }
.fast-sweep-button > strong b { color: white; font-size: 13px; }
.fast-sweep-button > strong small { margin-top: 6px; color: #fff0b7; font-size: 9px; letter-spacing: .08em; }
.fast-sweep-button:disabled { opacity: .48; filter: grayscale(.7); }
.home-nav { position: absolute; z-index: 3; left: 12px; right: 12px; bottom: max(18px,env(safe-area-inset-bottom)); height: 86px; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); align-items: center; gap: 4px; padding: 7px; border: 1px solid #66dcff2e; border-radius: 20px; background: linear-gradient(180deg,#0b1d2bf7,#06111df8); box-shadow: 0 14px 44px #000b,0 0 24px #1bdcff12,inset 0 1px #ffffff12; }
.nav-button { position: relative; height: 64px; min-width: 0; padding: 5px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 13px; color: #a8c0cf; background: transparent; font-family: Inter,ui-sans-serif,system-ui,sans-serif; }
.nav-button i { width: 27px; height: 27px; display: grid; place-items: center; color: #d9edf7; border-radius: 9px; background: #ffffff08; font: 900 18px/1 system-ui; font-style: normal; }
.nav-button span,.nav-button strong { max-width: 100%; font-size: 9px; line-height: 1; font-weight: 900; letter-spacing: .07em; white-space: nowrap; }
.nav-button.inactive { opacity: .34; }
.nav-button.equipment-nav { color: #e7ccff; border-color: #b468ff2e; background: linear-gradient(180deg,#a558ff16,transparent); }
.nav-button.equipment-nav i { color: #e2b5ff; background: #a65cff20; box-shadow: 0 0 14px #b255ff30; }
.nav-button.pets-nav { color: #ffc1eb; border-color: #ff67cd2e; background: linear-gradient(180deg,#ff4cbd16,transparent); }
.nav-button.pets-nav i { color: #ffb4e5; background: #ff55bd20; box-shadow: 0 0 14px #ff55bd30; }
.nav-button.pets-nav:disabled { opacity: .35; filter: grayscale(.7); }
.nav-button small { color: #7792a3; font-size: 7px; line-height: 1; font-weight: 900; letter-spacing: .08em; }
.nav-button.stage-button { height: 76px; margin: 0; color: white; border: 2px solid #b9f8ff; border-radius: 18px; background: linear-gradient(145deg,#087fe8,#22cadf); box-shadow: 0 7px 22px #16bce05c,inset 0 1px #fff6; transform: translateY(-7px); }
.stage-button i { width: 31px; height: 31px; color: white; background: #ffffff1c; font-size: 17px; }
.stage-button strong { font-size: 10px; letter-spacing: .1em; }
.stage-button small { color: #eaffff; font-size: 9px; }
.home-panel .privacy-link { position: absolute; bottom: 8px; margin: 0; }
.stage-select-modal[hidden] { display: none; }
.stage-select-modal { position: absolute; inset: 0; z-index: 30; padding: max(18px,env(safe-area-inset-top)) 15px max(18px,env(safe-area-inset-bottom)); display: grid; place-items: center; text-align: left; background: #01060de8; backdrop-filter: blur(8px); }
.stage-select-card { width: min(100%,480px); max-height: 92%; overflow: hidden; padding: 20px; display: flex; flex-direction: column; border: 1px solid #47dfff66; border-radius: 20px 6px; color: white; background: linear-gradient(150deg,#10263a,#06111d 72%); box-shadow: 0 28px 90px #000d,0 0 38px #2ce5ff1b; }
.stage-select-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.stage-select-heading span { color: var(--cyan); font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.stage-select-heading h2 { margin-top: 4px; font-size: 35px; line-height: .95; }
#stage-select-close { width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid #ffffff38; border-radius: 50%; color: white; background: #ffffff0e; font-size: 25px; }
.current-stage-entry { width: 100%; min-height: 62px; margin-top: 15px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; text-align: left; border: 1px solid #61ebff88; border-radius: 12px 4px; color: white; background: linear-gradient(105deg,#0d5674,#0e9bb3); box-shadow: 0 8px 25px #19dcff22,inset 0 1px #fff3; }
.current-stage-entry small,.current-stage-entry strong { display: block; }.current-stage-entry small { color: #b8f7ff; font-size: 9px; font-weight: 950; letter-spacing: .12em; }.current-stage-entry strong { margin-top: 4px; font-size: 18px; }.current-stage-entry > b { color: #eaffff; font-size: 14px; }
.world-tabs { margin-top: 14px; padding-bottom: 7px; display: flex; flex: 0 0 auto; gap: 6px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #4de8ff66 transparent; }
.world-tabs button { min-width: 94px; height: 43px; padding: 0 9px; border: 1px solid #ffffff1d; border-radius: 9px 3px; color: #a9bfce; background: #ffffff08; font: 900 10px/1 inherit; letter-spacing: .05em; }
.world-tabs button span { display: block; margin-bottom: 3px; color: #6edfff; font-size: 8px; }.world-tabs button.active { color: #04131d; border-color: #aef8ff; background: linear-gradient(120deg,#4de5ff,#70f4c6); }.world-tabs button.active span { color: #075169; }.world-tabs button:disabled { opacity: .3; }
.stage-grid { margin-top: 8px; padding: 2px 3px 5px 1px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #43e7ff55 transparent; }
.stage-choice { min-height: 68px; padding: 8px 5px; border: 1px solid #ffffff1c; border-radius: 10px 3px; color: white; background: linear-gradient(145deg,#13283a,#081521); text-align: center; }
.stage-choice small,.stage-choice strong,.stage-choice span { display: block; }.stage-choice small { overflow: hidden; color: #7f9aaa; font-size: 7px; text-overflow: ellipsis; }.stage-choice strong { margin-top: 3px; font-size: 17px; }.stage-choice span { margin-top: 4px; color: #62eec1; font-size: 7px; font-weight: 950; letter-spacing: .08em; }.stage-choice.current { border-color: #ffd563; box-shadow: inset 0 0 18px #ffcc3d15; }.stage-choice.current span { color: #ffd563; }.stage-choice:disabled { opacity: .28; filter: grayscale(.6); }.stage-choice:disabled span { color: #8b99a3; }
.stage-select-note { margin: 12px 2px 0; color: #8fa8b8; font-size: 10px; line-height: 1.4; text-align: center; }

.sub-panel .shop-card { max-width: 480px; }
.page-copy { margin: 14px 0 4px; color: #a9bfce; font-size: 13px; line-height: 1.5; }
.secondary-button { width: 100%; min-height: 44px; margin-top: 15px; border: 1px solid #46ddff3d; border-radius: 9px 3px; color: #b9edfa; background: #17cce814; font: 900 10px/1 inherit; letter-spacing: .1em; }
.character-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 9px; max-height: 310px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #35dfff66 transparent; }
.character-list:has(.character-card:only-child) { grid-template-columns: 1fr; }
.character-list:has(.character-card:only-child) .character-card { min-height: 148px; grid-template-columns: 92px 1fr; }
.character-list:has(.character-card:only-child) .character-aura { margin-inline: auto; }
.character-card { position: relative; min-height: 132px; padding: 12px 10px; display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; text-align: left; border: 1px solid #ffffff20; border-radius: 12px 3px; color: white; background: linear-gradient(145deg,#132739,#071523); }
.character-card > i { width: 42px; height: 65px; display: block; border-radius: 50% 50% 32% 32%; background: radial-gradient(circle at 50% 20%,#fff7 0 12%,transparent 13%),var(--character-color); box-shadow: 0 0 20px color-mix(in srgb,var(--character-color),transparent 55%); }
.character-card span strong,.character-card span small,.character-card em,.character-card mark { display: block; }
.character-card span strong { font-size: 14px; }
.character-card span strong b { color: var(--cyan); font-size: 11px; }
.character-card span small { margin-top: 5px; color: #bbccd6; font-size: 10px; line-height: 1.45; }
.character-card em { margin-top: 7px; color: #ffd360; font: 900 11px/1.3 inherit; }
.character-card .character-cp { width: fit-content; margin-top: 7px; padding: 4px 6px; display: block; color: #fff4b0; border: 1px solid #ffd45b40; border-radius: 5px 2px; background: #ffd45b0d; font: 1000 10px/1 inherit; text-decoration: none; }
.character-card.substats-2 { min-height: 148px; }
.character-card.substats-3 { min-height: 166px; }
.character-card.substats-2 em,.character-card.substats-3 em { line-height: 1.55; }
.character-card mark { position: absolute; right: 8px; top: 7px; padding: 4px 7px; color: #b8cbd7; background: #ffffff0f; border-radius: 99px; font-size: 8px; font-weight: 950; }
.character-card.selected { border-color: var(--cyan); background: #24dfff13; box-shadow: inset 0 0 24px #24ddff13; }
.character-card.selected mark { color: #06131c; background: var(--cyan); }
.character-card.rarity-rare { border-color: #638cff55; }
.character-card.rarity-epic { border-color: #c455ff66; }
.character-card.rarity-legendary { border-color: #ffc83d77; box-shadow: inset 0 0 20px #ffc83d0c; }
.character-card.rarity-mythic { border-color: #fff; box-shadow: inset 0 0 24px #55eaff20,0 0 14px #fff2; }
.character-card.rarity-ascended,.equipment-slot.rarity-ascended,.compare-equipment-card.rarity-ascended { border-color:#63fff1aa; box-shadow:inset 0 0 24px #63fff118; }
.character-card.rarity-celestial,.equipment-slot.rarity-celestial,.compare-equipment-card.rarity-celestial { border-color:#70baffbb; box-shadow:inset 0 0 25px #70baff20,0 0 12px #70baff20; }
.character-card.rarity-divine,.equipment-slot.rarity-divine,.compare-equipment-card.rarity-divine { border-color:#ffe680cc; box-shadow:inset 0 0 28px #ffe68020,0 0 14px #ffe68026; }
.character-card.rarity-eternal,.equipment-slot.rarity-eternal,.compare-equipment-card.rarity-eternal { border-color:#ff75dfdd; box-shadow:inset 0 0 30px #ff75df25,0 0 16px #ff75df30; }
.character-card.rarity-transcendent,.equipment-slot.rarity-transcendent,.compare-equipment-card.rarity-transcendent { border-color:#fff; box-shadow:inset 0 0 34px #baffda36,0 0 22px #baffda55; }
.character-card:disabled { opacity: .43; }

/* Aura collection: rarity controls scale and flame complexity; tier drives the inline glow/speed variables. */
.character-card { grid-template-columns: 68px 1fr; overflow: hidden; }
.character-card > i.character-aura { position: relative; width: 62px; height: 88px; display: block; overflow: visible; border-radius: 0; background: none; box-shadow: none; transform: scale(var(--aura-size)); transform-origin: 50% 70%; filter: drop-shadow(0 0 var(--aura-glow) var(--character-color)); isolation: isolate; }
.character-aura::before { content: ''; position: absolute; inset: 17% 10% 7%; z-index: -2; border-radius: 48% 52% 44% 56%; background: radial-gradient(ellipse at 50% 70%,#fff 0 8%,var(--character-color) 24%,color-mix(in srgb,var(--character-color),transparent 65%) 52%,transparent 72%); filter: blur(7px); animation: aura-breathe var(--aura-speed) ease-in-out infinite alternate; }
.character-aura::after { content: ''; position: absolute; left: 13%; right: 13%; bottom: 4%; height: 11px; z-index: 4; border: 2px solid color-mix(in srgb,var(--character-color),white 42%); border-radius: 50%; background: color-mix(in srgb,var(--character-color),transparent 60%); box-shadow: 0 0 12px var(--character-color),inset 0 0 10px var(--character-color); animation: aura-ring calc(var(--aura-speed) * .8) linear infinite; }
.character-aura > b,.character-aura > s { position: absolute; bottom: 10px; display: block; text-decoration: none; transform-origin: 50% 100%; border-radius: 52% 48% 44% 56% / 72% 68% 32% 28%; background: radial-gradient(ellipse at 50% 82%,#fff 0 9%,color-mix(in srgb,var(--character-color),white 22%) 26%,var(--character-color) 58%,transparent 76%); filter: blur(.8px); mix-blend-mode: screen; }
.character-aura > b { left: 14%; width: 72%; height: 76%; z-index: 2; opacity: .88; animation: aura-flame var(--aura-speed) ease-in-out infinite alternate; }
.character-aura > s { width: 42%; height: 55%; z-index: 1; opacity: .58; animation: aura-side calc(var(--aura-speed) * .72) ease-in-out infinite alternate; }
.character-aura > s:nth-of-type(1) { left: 1%; transform: rotate(-15deg); }
.character-aura > s:nth-of-type(2) { right: 1%; transform: rotate(15deg); animation-delay: calc(var(--aura-speed) * -.45); }
.rarity-rare .character-aura > b { height: 81%; }
.rarity-epic .character-aura > b { height: 88%; filter: brightness(1.18); }
.rarity-legendary .character-aura > b { height: 96%; filter: brightness(1.35) saturate(1.2); }
.rarity-mythic .character-aura { filter: drop-shadow(0 0 var(--aura-glow) white) drop-shadow(0 0 14px var(--character-color)); }
.rarity-mythic .character-aura > b { height: 104%; background: linear-gradient(180deg,transparent 0%,#fff 28%,var(--character-color) 59%,#fff 100%); filter: brightness(1.5); }
.character-card.selected .character-aura { animation: selected-aura .9s ease-in-out infinite alternate; }
@keyframes aura-flame { 0% { transform: scale(.9,1) skewX(-2deg); } 45% { transform: scale(1.08,.92) skewX(3deg); } 100% { transform: scale(.95,1.1) skewX(-4deg); } }
@keyframes aura-side { from { scale: .85 1; translate: 0 2px; } to { scale: 1.15 .84; translate: 0 -5px; } }
@keyframes aura-breathe { from { opacity: .58; transform: scale(.88,1); } to { opacity: 1; transform: scale(1.12,.94); } }
@keyframes aura-ring { 50% { transform: scaleX(1.22); opacity: .55; } }
@keyframes selected-aura { to { filter: drop-shadow(0 0 calc(var(--aura-glow) * 1.35) var(--character-color)); } }
.currency-stack { display: flex; gap: 5px; }
.currency-stack .shop-coins { min-width: 75px; }
.bar-wallet { border-color: #fff0a455; }
.bar-wallet strong { color: #fff1a0; }
.pet-wallet { border-color: #ff78d566; background: linear-gradient(120deg,#ff5ac417,#3e18380a); }
.pet-wallet strong { color: #ffb8e9; }
.pets-card { border-color: #ff73d84f; box-shadow: 0 24px 70px #000b,0 0 35px #ff4fc817; }
.pet-cp-summary section { grid-template-columns: repeat(4,1fr); }
.pet-summon-row { margin-top: 11px; }
.pet-summon-row .pet-roll { margin-top: 0; }
.pet-auto-summon { border-color: #ff70d9aa; background: linear-gradient(160deg,#301143,#8d247f); box-shadow: inset 0 1px #fff3,0 0 22px #ff55cc30; }
.pet-auto-summon[aria-pressed="true"] { border-color: #ff8093; background: linear-gradient(160deg,#791b3b,#d93a6a); box-shadow: 0 0 22px #ff315b55,inset 0 1px #fff4; }
.pet-loadout-heading { margin-top: 5px; }
.pet-intro { border-left-color: #ff68cf; }
.pet-roll { margin-top: 11px; background: linear-gradient(110deg,#912b8d,#ef4eb8); box-shadow: 0 8px 26px #e849bc35,inset 0 1px #fff4; }
.pet-list { margin-top: 10px; display: grid; gap: 8px; max-height: 360px; overflow-y: auto; }
.pet-card { min-height: 92px; padding: 11px; display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; border: 1px solid #ff74d044; border-radius: 12px 4px; color: white; background: linear-gradient(130deg,#1d1c36,#0a1524); }
.pet-card.selected { border-color: #65f4bd; box-shadow: inset 0 0 24px #48e9a91a; }
.pet-card i { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50% 50% 44% 44%; color: #fff; background: radial-gradient(circle at 38% 30%,#fff 0 7%,transparent 8%),linear-gradient(145deg,var(--pet-color),#151f38); box-shadow: 0 0 20px color-mix(in srgb,var(--pet-color),transparent 42%); font: 1000 26px/1 system-ui; font-style: normal; }
.pet-card section { display: grid; gap: 4px; }
.pet-card small { color: #9fb3c1; font-size: 8px; font-weight: 900; }
.pet-card strong { font-size: 15px; }
.pet-card b { color: #72eaff; font-size: 10px; }
.pet-card em { color: #ffd66b; font-size: 10px; line-height: 1.4; }
.pet-card mark { padding: 5px 7px; border-radius: 99px; color: #83f4cb; background: #48e9aa16; font-size: 8px; font-weight: 950; }
.pet-reveal-wallet { border-color: #ff76dca0; background: #2d1029e8; box-shadow: 0 0 24px #ff51c460; }
.summon-tier { margin-top: 12px; padding: 11px; display: grid; grid-template-columns: 82px 1fr 110px; gap: 8px; align-items: center; border: 1px solid #8e6cff55; border-radius: 12px 4px; background: linear-gradient(120deg,#6038b422,#091827); }
.summon-tier > div:first-child span { display: block; color: #c3b2ff; font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.summon-tier > div:first-child strong { display: block; color: white; font-size: 25px; line-height: 1; }
.summon-tier > div:first-child small { color: #8095a4; font-size: 9px; }
.summon-odds-button { min-height: 42px; padding: 7px 10px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #9d83ff66; border-radius: 9px 3px; color: #e3dfff; background: #9c60ff14; }
.summon-odds-button span { font-size: 10px; font-weight: 950; letter-spacing: .08em; }
.summon-odds-button b { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid #d7cbff; border-radius: 50%; color: white; background: #8e6cff55; font: 1000 14px/1 system-ui; }
.auto-sell-filter-button { width: 100%; min-height: 44px; margin: 10px 0; padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #f5bc3d66; border-radius: 10px 3px; color: white; background: linear-gradient(105deg,#49340d99,#111d2d); box-shadow: inset 0 1px #fff1; }
.auto-sell-filter-button span { font-size: 11px; font-weight: 950; letter-spacing: .06em; }
.auto-sell-filter-button strong { color: #ffd45b; font-size: 9px; letter-spacing: .06em; text-align: right; }
.auto-sell-card > p:not(.eyebrow) { color: #a8bdcb; font-size: 11px; line-height: 1.5; }
.auto-sell-list { margin: 14px 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.auto-sell-type-list { margin-bottom: 12px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.auto-sell-type-list .auto-sell-option { min-width: 0; padding-inline: 8px; }
.auto-sell-type-list .auto-sell-option span { min-width: 0; }
.auto-sell-divider { display: flex; align-items: center; gap: 10px; color: #8299aa; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.auto-sell-divider::before,.auto-sell-divider::after { content: ''; height: 1px; flex: 1; background: #37516a; }
.auto-sell-divider + .auto-sell-list { margin-top: 12px; }
.auto-sell-option { min-height: 48px; padding: 9px 10px; display: flex; align-items: center; gap: 9px; border: 1px solid #37516a; border-radius: 9px 3px; background: #0a1725; cursor: pointer; }
.auto-sell-option:has(input:checked) { border-color: #ffbd3d; background: #3b2b0e; box-shadow: 0 0 18px #ffb52a22; }
.auto-sell-option input { width: 18px; height: 18px; margin: 0; accent-color: #ffc23e; }
.auto-sell-option span { display: grid; gap: 2px; color: white; font-size: 11px; font-weight: 950; }
.auto-sell-option small { color: #8ea5b5; font-size: 8px; font-weight: 800; }
.auto-sell-card .secondary-button { width: 100%; }
.equipment-summon-row { display: grid; grid-template-columns: minmax(0,1fr) 54px; gap: 8px; align-items: stretch; }
.equipment-summon-row .equipment-roll { width: 100%; margin-right: 0; }
.auto-summon-button { min-width: 54px; margin: 0; padding: 6px 3px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid #b968f1aa; border-radius: 10px 3px; color: #e6c6ff; background: linear-gradient(150deg,#492269,#15172d); box-shadow: inset 0 1px #fff2,0 0 18px #ad43ef22; }
.auto-summon-button i { font: 1000 24px/1 system-ui; font-style: normal; }
.auto-summon-button span { font-size: 8px; font-weight: 1000; letter-spacing: .08em; }
.auto-summon-button[aria-pressed="true"] { color: white; border-color: #58edff; background: linear-gradient(145deg,#087c9c,#5932a1); box-shadow: 0 0 22px #36ddff66,inset 0 1px #fff4; }
.auto-summon-button[aria-pressed="true"] i { animation: auto-summon-spin .8s linear infinite; }
.auto-summon-button:disabled { opacity: .4; filter: grayscale(.5); }
@keyframes auto-summon-spin { to { transform: rotate(360deg); } }
.auto-summon-floating-stop[hidden] { display: none; }
.auto-summon-floating-stop { position: absolute; z-index: 40; left: 50%; bottom: max(22px,env(safe-area-inset-bottom)); width: min(76%,290px); min-height: 50px; padding: 8px 16px; display: flex; align-items: center; justify-content: center; gap: 10px; transform: translateX(-50%); border: 1px solid #ff6a7d; border-radius: 25px 8px; color: white; background: linear-gradient(110deg,#8f1733,#df3b5d); box-shadow: 0 10px 35px #000b,0 0 28px #ff315b66,inset 0 1px #fff5; pointer-events: auto; touch-action: manipulation; }
.auto-summon-floating-stop i { font: 1000 22px/1 system-ui; font-style: normal; animation: auto-summon-spin .8s linear infinite; }
.auto-summon-floating-stop span { font-size: 11px; font-weight: 1000; letter-spacing: .08em; }
.auto-summon-floating-stop:active { transform: translateX(-50%) scale(.96); }
.summon-odds-modal[hidden] { display: none; }
.summon-odds-modal { position: absolute; inset: 0; z-index: 24; padding: 18px; display: grid; place-items: center; background: #01060ddb; backdrop-filter: blur(7px); }
.summon-odds-card { width: min(100%,470px); max-height: min(90vh,740px); overflow-y: auto; padding: 21px; border: 1px solid #9d83ff88; border-radius: 20px 7px; color: white; background: linear-gradient(150deg,#182945,#08131f 72%); box-shadow: 0 24px 90px #000c,0 0 38px #704bff2e; scrollbar-width: thin; scrollbar-color: #8d7dffaa #162538; }
.summon-odds-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.summon-odds-heading span { color: #b9aaff; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.summon-odds-heading h3 { margin-top: 5px; font: 1000 italic 30px/.95 Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing: -.02em; }
#summon-odds-close,#equipment-odds-close,#pet-odds-close { width: 42px; height: 42px; flex: 0 0 42px; border: 1px solid #ffffff38; border-radius: 50%; color: white; background: #ffffff0e; font-size: 25px; line-height: 1; }
.summon-odds-card > p { margin: 15px 0; color: #d0dee7; font: 600 13px/1.55 Inter,ui-sans-serif,system-ui,sans-serif; }
.summon-odds-list { display: grid; gap: 8px; }
.summon-odds-row { min-height: 76px; padding: 12px 13px; display: grid; grid-template-columns: minmax(120px,1fr) minmax(170px,.82fr); gap: 13px; align-items: center; border: 1px solid #ffffff20; border-left-width: 4px; border-radius: 12px 4px; background: linear-gradient(110deg,#ffffff09,#07142070); }
.summon-odds-row > div { min-width: 0; }
.summon-odds-row .odds-copy > strong { display: block; color: #f4f9fc; font: 900 15px/1.1 Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing: .04em; }
.summon-odds-row .odds-copy > small { display: block; margin-top: 6px; color: #b7cbd7; font: 600 10px/1.45 Inter,ui-sans-serif,system-ui,sans-serif; }
.odds-values { display: grid; grid-template-columns: 1fr 14px 1fr; gap: 5px; align-items: center; }
.odds-values > span { min-width: 0; padding: 7px 5px; border: 1px solid #ffffff17; border-radius: 8px 3px; background: #050d17a8; text-align: center; }
.odds-values small { display: block; margin: 0 0 4px; color: #8198a8; font: 800 7px/1 Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing: .08em; }
.odds-values b { display: block; color: #edf7fc; font: 900 13px/1 Inter,ui-sans-serif,system-ui,sans-serif; white-space: nowrap; }
.odds-values > i { color: #6d8798; font: 900 15px/1 system-ui; font-style: normal; text-align: center; }
.odds-values .up { border-color: #59edab42; background: #0d392b80; }.odds-values .up small,.odds-values .up b { color: #69f3b0; }
.odds-values .down { border-color: #ff66733d; background: #43152270; }.odds-values .down small,.odds-values .down b { color: #ff8994; }
.odds-values .same b { color: #b5c7d2; }
.summon-odds-row.rarity-common { border-left-color: #58dff5; }.summon-odds-row.rarity-rare { border-left-color: #638cff; }.summon-odds-row.rarity-epic { border-left-color: #c455ff; }.summon-odds-row.rarity-legendary { border-left-color: #ffc83d; }.summon-odds-row.rarity-mythic { border-left-color: #fff; }
.summon-odds-row.rarity-ascended{border-left-color:#63fff1}.summon-odds-row.rarity-celestial{border-left-color:#70baff}.summon-odds-row.rarity-divine{border-left-color:#ffe680}.summon-odds-row.rarity-eternal{border-left-color:#ff75df}.summon-odds-row.rarity-transcendent{border-left-color:#baffda}
.summon-odds-row.unavailable { opacity: .58; }
.summon-odds-total { margin-top: 12px; padding: 12px 13px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #ffffff24; }
.summon-odds-total span { color: #afc2cf; font-size: 11px; font-weight: 900; letter-spacing: .08em; }.summon-odds-total strong { color: #66f0be; font-size: 19px; }
#upgrade-summon-tier,#upgrade-pet-tier { min-width: 0; min-height: 43px; padding: 6px 8px; display: grid; place-content: center; border: 1px solid #b99aff55; border-radius: 8px 3px; color: white; background: #9c60ff18; overflow: hidden; }
#upgrade-summon-tier span,#upgrade-summon-tier strong,#upgrade-pet-tier span,#upgrade-pet-tier strong { display: block; min-width: 0; font-size: 9px; font-weight: 950; line-height: 1.05; text-align: center; white-space: nowrap; }
#upgrade-summon-tier strong,#upgrade-pet-tier strong { margin-top: 4px; color: #ffd360; }
#upgrade-summon-tier:disabled,#upgrade-pet-tier:disabled { opacity: .35; }
.roll-button { width: 100%; min-height: 58px; margin-top: 9px; padding: 9px 16px; display: grid; grid-template-columns: 1fr auto; text-align: left; border: 1px solid #fff3a477; border-radius: 12px 4px; color: white; background: linear-gradient(105deg,#745000,#e6a900,#7e4b00); box-shadow: 0 8px 25px #ffbd2733,inset 0 1px #fff6; }
.roll-button span { font-size: 13px; font-weight: 1000; font-style: italic; }
.roll-button strong { color: #fff6b6; font-size: 15px; }
.roll-button strong b { font-size: inherit; }
.roll-button small { grid-column: 1/-1; margin-top: 4px; color: #fff0b8; font-size: 10px; letter-spacing: .09em; }
.roll-button:disabled { opacity: .35; filter: grayscale(.8); }
.collection-title { margin-top: 11px; color: var(--cyan); font-size: 10px; font-weight: 950; letter-spacing: .07em; }
.roll-reveal { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; visibility: hidden; opacity: 0; background: radial-gradient(circle,#7961ff55,#020712f8 55%); transition: .2s; }
.roll-reveal.visible { visibility: visible; opacity: 1; }
.reveal-wallet { position: absolute; z-index: 2; top: max(24px,env(safe-area-inset-top)); left: 50%; min-width: 190px; padding: 10px 16px; transform: translateX(-50%); text-align: center; border: 1px solid #ffffff30; border-radius: 12px 4px; background: linear-gradient(120deg,#0c1b2bee,#10152cee); box-shadow: 0 10px 35px #0009,inset 0 1px #fff3; }
.reveal-wallet > span { display: block; color: #a9c5d5; font: 900 9px/1 Inter,ui-sans-serif,system-ui,sans-serif; letter-spacing: .1em; }
.reveal-wallet > strong { margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 7px; font: 1000 22px/1 Inter,ui-sans-serif,system-ui,sans-serif; }
.reveal-wallet strong i { color: #d9c7ff; font-style: normal; text-shadow: 0 0 14px #9b67ff; }.reveal-wallet strong b { color: white; }
.aura-reveal-wallet { border-color: #ffd45b66; background: linear-gradient(120deg,#372805ee,#171526ee); }.aura-reveal-wallet strong i { color: #ffe368; text-shadow: 0 0 14px #ffc82e; }
.summon-circles { width:min(92%,520px); min-height:150px; display:grid; grid-template-columns:repeat(var(--summon-columns,1),minmax(0,1fr)); align-items:center; justify-items:center; align-content:center; gap:clamp(6px,1.6vw,12px); }
.summon-orb { --orb-size:150px; width: var(--orb-size); height: var(--orb-size); flex: 0 0 var(--orb-size); display: grid; place-items: center; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 35px #62eaff,0 0 90px #9854ff; animation: summon-spin .65s linear infinite; }
.summon-circles[data-count="2"] .summon-orb { --orb-size:clamp(112px,31vw,142px); }
.summon-circles[data-count="3"] .summon-orb { --orb-size:clamp(82px,23vw,112px); }
.summon-circles[data-count="4"] .summon-orb,.summon-circles[data-count="5"] .summon-orb { --orb-size:clamp(64px,18vw,88px); }
.summon-circles[data-count="6"] .summon-orb,.summon-circles[data-count="7"] .summon-orb,.summon-circles[data-count="8"] .summon-orb,.summon-circles[data-count="9"] .summon-orb,.summon-circles[data-count="10"] .summon-orb { --orb-size:clamp(52px,14vw,72px); }
.summon-circles[data-count="11"] .summon-orb,.summon-circles[data-count="12"] .summon-orb,.summon-circles[data-count="13"] .summon-orb { --orb-size:clamp(42px,11vw,58px); }
.summon-orb:nth-child(5n+2) { animation-delay:-.18s; }.summon-orb:nth-child(5n+3) { animation-delay:-.36s; }.summon-orb:nth-child(5n+4) { animation-delay:-.12s; }.summon-orb:nth-child(5n+5) { animation-delay:-.28s; }
.summon-orb i { width: 48%; height: 48%; border-radius: 28% 72% 55% 45%; background: white; box-shadow: 0 0 34px white; animation: summon-morph .42s ease-in-out infinite alternate; }
.roll-reveal p { margin: 26px 0 6px; color: #86f0ff; font-size: 11px; font-weight: 950; letter-spacing: .2em; }
.roll-reveal strong { max-width: 84%; color: white; text-align: center; font-size: 17px; }
.roll-reveal strong small { color: #ffd768; font-size: 11px; line-height: 1.55; }
.roll-reveal.revealed .summon-orb { animation: reveal-pop .55s ease-out both; border-color: #ffd45b; box-shadow: 0 0 55px #ffd45b,0 0 120px #fff; }
.roll-reveal.featured-reveal { --feature-color:#ffd45b; --feature-glow:#ff9d18; background: radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--feature-color) 34%,transparent),#080611f5 48%,#02050cfb 72%); }
.roll-reveal.featured-reveal.rarity-common{--feature-color:#58dff5;--feature-glow:#168fff}.roll-reveal.featured-reveal.rarity-rare{--feature-color:#638cff;--feature-glow:#284cff}.roll-reveal.featured-reveal.rarity-epic{--feature-color:#c455ff;--feature-glow:#741dff}.roll-reveal.featured-reveal.rarity-legendary{--feature-color:#ffd45b;--feature-glow:#ff8a00}.roll-reveal.featured-reveal.rarity-mythic{--feature-color:#fff;--feature-glow:#a66cff}.roll-reveal.featured-reveal.rarity-ascended{--feature-color:#63fff1;--feature-glow:#00bfae}.roll-reveal.featured-reveal.rarity-celestial{--feature-color:#70baff;--feature-glow:#3268ff}.roll-reveal.featured-reveal.rarity-divine{--feature-color:#ffe680;--feature-glow:#ff9f1c}.roll-reveal.featured-reveal.rarity-eternal{--feature-color:#ff75df;--feature-glow:#c51b91}.roll-reveal.featured-reveal.rarity-transcendent{--feature-color:#baffda;--feature-glow:#37e98d}
.featured-reveal .summon-circles { min-height: 240px; overflow: visible; }
.featured-reveal .summon-orb { position: relative; isolation: isolate; cursor: pointer; border: 3px solid var(--feature-color); background: radial-gradient(circle,#fff 0 8%,var(--feature-color) 22%,transparent 62%); box-shadow: 0 0 28px var(--feature-color),0 0 95px var(--feature-glow),0 0 170px color-mix(in srgb,var(--feature-color) 50%,transparent); animation: featured-orb-pulse 1.05s ease-in-out infinite; }
.featured-reveal .summon-orb::before,.featured-reveal .summon-orb::after { content:""; position:absolute; z-index:-1; width:72%; height:100%; bottom:13%; border-radius:55% 45% 62% 38%; background:linear-gradient(to top,var(--feature-glow),var(--feature-color) 58%,#fff 86%,transparent); filter:blur(7px); transform-origin:50% 100%; animation:featured-flame .7s ease-in-out infinite alternate; }
.featured-reveal .summon-orb::after { width:55%; height:82%; animation-delay:-.34s; animation-duration:.52s; transform:translateX(25%) rotate(18deg); opacity:.78; }
.featured-reveal .summon-orb i { width:42%; height:58%; background:linear-gradient(to top,var(--feature-glow),#fff 75%); box-shadow:0 0 30px var(--feature-color),0 0 65px var(--feature-glow); animation:featured-core .48s ease-in-out infinite alternate; }
.featured-reveal p { color:var(--feature-color); font-size:13px; text-shadow:0 0 18px var(--feature-glow); }
.featured-reveal > strong { color:white; font-size:15px; letter-spacing:.08em; text-shadow:0 0 14px var(--feature-color); }
.featured-reveal .summon-orb:focus-visible { outline:3px solid white; outline-offset:8px; }
.featured-reveal.featured-open .summon-orb { animation:featured-open .62s ease-out both; }
@keyframes featured-orb-pulse { 50% { transform:translateY(-9px) scale(1.08); filter:brightness(1.24); } }
@keyframes featured-flame { to { transform:translateX(-16%) rotate(-18deg) scale(.84,1.18); border-radius:38% 62% 35% 65%; } }
@keyframes featured-core { to { transform:scale(.78,1.24) rotate(12deg); border-radius:65% 35% 48% 52%; } }
@keyframes featured-open { 45% { transform:scale(1.75); filter:brightness(2.2); } 100% { transform:scale(.12); opacity:0; } }
.equipment-result.featured-result { --feature-color:#ffd45b; --feature-glow:#ff8a00; background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--feature-color) 28%,transparent),#030712f7 58%); }
.equipment-result.featured-result.rarity-common{--feature-color:#58dff5;--feature-glow:#168fff}.equipment-result.featured-result.rarity-rare{--feature-color:#638cff;--feature-glow:#284cff}.equipment-result.featured-result.rarity-epic{--feature-color:#c455ff;--feature-glow:#741dff}.equipment-result.featured-result.rarity-legendary{--feature-color:#ffd45b;--feature-glow:#ff8a00}.equipment-result.featured-result.rarity-mythic{--feature-color:#fff;--feature-glow:#a66cff}.equipment-result.featured-result.rarity-ascended{--feature-color:#63fff1;--feature-glow:#00bfae}.equipment-result.featured-result.rarity-celestial{--feature-color:#70baff;--feature-glow:#3268ff}.equipment-result.featured-result.rarity-divine{--feature-color:#ffe680;--feature-glow:#ff9f1c}.equipment-result.featured-result.rarity-eternal{--feature-color:#ff75df;--feature-glow:#c51b91}.equipment-result.featured-result.rarity-transcendent{--feature-color:#baffda;--feature-glow:#37e98d}
.featured-result .equipment-result-card { position:relative; border-color:var(--feature-color); box-shadow:0 0 30px color-mix(in srgb,var(--feature-color) 55%,transparent),0 24px 90px #000d; animation:featured-card-arrive .7s cubic-bezier(.2,.9,.25,1.2) both; }
.featured-result .equipment-result-card::before { content:attr(data-featured-rarity) " ENERGY REVEAL"; position:absolute; top:-13px; left:50%; z-index:2; padding:6px 13px; transform:translateX(-50%); border:1px solid var(--feature-color); border-radius:99px; color:#071018; background:var(--feature-color); box-shadow:0 0 22px var(--feature-glow); font-size:9px; font-weight:1000; letter-spacing:.12em; white-space:nowrap; }
.featured-result .compare-equipment-card.candidate { border-color:var(--feature-color); box-shadow:inset 0 0 25px color-mix(in srgb,var(--feature-color) 14%,transparent),0 0 28px color-mix(in srgb,var(--feature-color) 32%,transparent); }
@keyframes featured-card-arrive { from { opacity:0; transform:scale(.72) translateY(36px); filter:brightness(2.4); } 70% { filter:brightness(1.2); } to { opacity:1; transform:scale(1) translateY(0); filter:brightness(1); } }
@keyframes summon-spin { to { transform: rotate(360deg); } }
@keyframes summon-morph { to { transform: scale(1.35) rotate(45deg); border-radius: 50%; } }
@keyframes reveal-pop { 50% { transform: scale(1.45); } 100% { transform: scale(.9); } }
.daily-shop { margin-top: 14px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #ffc85255; border-radius: 12px 4px; background: linear-gradient(110deg,#ffbb2418,#ff6b2c0b); }
.daily-shop span,.daily-shop strong,.daily-shop small { display: block; }
.daily-shop span { color: #ffd360; font-size: 8px; font-weight: 950; letter-spacing: .14em; }
.daily-shop strong { margin-top: 4px; font-size: 14px; }
.daily-shop small { margin-top: 3px; color: #8fa5b4; font-size: 8px; }
.daily-shop > b { padding: 7px 9px; border-radius: 99px; color: #07131d; background: #ffd360; font-size: 8px; }
.premium-placeholder { margin-top: 14px; padding: 12px; text-align: center; border: 1px dashed #b778ff45; border-radius: 10px; background: #9f50ff09; }
.premium-placeholder span,.premium-placeholder strong,.premium-placeholder small { display: block; }
.premium-placeholder span { color: #ba8cff; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.premium-placeholder strong { margin-top: 3px; font-size: 13px; }
.premium-placeholder small { margin-top: 4px; color: #8195a4; font-size: 8px; }

/* Equipment forge: a focused summon, compare, equip-or-sell loop. */
.equipment-card { overflow-y: auto; padding: 20px; border-color: #a866ff33; background: radial-gradient(circle at 20% 0,#42236655,transparent 42%),linear-gradient(155deg,#101b31f7,#060d18fb); }
.equipment-card .shop-heading h2 { font-size: clamp(34px,8.5vw,46px); letter-spacing: -.045em; }
.equipment-intro { margin: 16px 0 0; padding: 12px 14px; color: #c8d9e7; font-size: 13px; line-height: 1.45; border-left: 3px solid #b96cff; border-radius: 4px; background: #ffffff08; }
.silver-wallet { border-color: #b8d9ff66; background: linear-gradient(120deg,#d5e9ff17,#839fba0a); }
.silver-wallet strong { color: #dcebff; }
.equipment-character-stats { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.equipment-character-stats div { min-height: 48px; padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #ffffff15; border-radius: 9px 3px; background: linear-gradient(110deg,#ffffff0a,#ffffff03); }
.equipment-character-stats span { color: #91a8ba; font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.equipment-character-stats strong { color: #69eaff; font-size: 15px; }
.equipment-character-stats .equipment-cp-total { grid-column: 1/-1; min-height: 59px; display: grid; grid-template-columns: 1fr auto; border-color: #ffd45b55; background: radial-gradient(circle at 5% 50%,#ffd45b1b,transparent 45%),linear-gradient(110deg,#23230d55,#091827); }
.equipment-character-stats .equipment-cp-total span { color: #ffe28b; }
.equipment-character-stats .equipment-cp-total strong { color: white; font-size: 20px; text-shadow: 0 0 16px #ffd45b55; }
.equipment-character-stats .equipment-cp-total small { grid-column: 1/-1; color: #8fa7b8; font-size: 8px; font-weight: 850; }
.equipment-tier { margin-top: 12px; padding: 12px; display: grid; grid-template-columns: 78px 1fr 112px; align-items: center; gap: 8px; border: 1px solid #a86dff66; border-radius: 14px 5px; background: linear-gradient(115deg,#7638be2e,#0a1727); box-shadow: inset 0 1px #fff1; }
.equipment-tier > .summon-odds-button { min-width: 0; }
.equipment-odds-card .summon-odds-row small { color: #9fb4c4; }
.equipment-tier > div:first-child span { display: block; color: #caa8ff; font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.equipment-tier > div:first-child strong { display: block; color: white; font-size: 27px; line-height: 1; }
.equipment-tier > div:first-child small { color: #8296a6; font-size: 9px; }
.equipment-odds { display: flex; flex-wrap: wrap; gap: 4px; }
.equipment-odds[hidden] { display: none; }
.equipment-odds span { padding: 4px 6px; color: #cbd9e4; border: 1px solid #ffffff14; border-radius: 99px; background: #02091388; font-size: 8px; font-weight: 850; }
.equipment-odds b { margin-right: 3px; color: white; }
#upgrade-equipment-tier { min-height: 43px; padding: 6px; color: white; border: 1px solid #c397ff66; border-radius: 9px 3px; background: #9b5cff20; }
#upgrade-equipment-tier span,#upgrade-equipment-tier strong { display: block; font-size: 9px; font-weight: 950; }
#upgrade-equipment-tier strong { margin-top: 4px; color: #ffd360; }
#upgrade-equipment-tier:disabled { opacity: .38; }
.equipment-roll { min-height: 67px; margin-top: 12px; background: linear-gradient(105deg,#49126d,#c244e6,#5f1a98); box-shadow: 0 10px 30px #b349ed45,inset 0 1px #fff7; }
.loadout-heading { margin-top: 17px; display: flex; justify-content: space-between; align-items: end; }
.loadout-heading span,.loadout-heading strong { display: block; }
.loadout-heading span { color: #65eaff; font-size: 10px; font-weight: 1000; letter-spacing: .13em; }
.loadout-heading strong { margin-top: 3px; font-size: 15px; }
.loadout-heading small { color: #8499aa; font-size: 9px; }
.equipment-loadout { margin-top: 8px; display: grid; gap: 8px; }
.equipment-slot { min-height: 77px; padding: 10px; display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; border: 1px solid #ffffff18; border-radius: 12px 4px; background: linear-gradient(105deg,#ffffff0b,#ffffff03); }
.equipment-slot > div { display: grid; place-items: center; gap: 3px; }
.equipment-slot > div i { width: 42px; height: 42px; display: grid; place-items: center; color: white; font: 1000 20px/1 inherit; font-style: normal; border: 1px solid #fff4; border-radius: 12px 4px; background: linear-gradient(145deg,#20bde8,#7655e7); box-shadow: 0 0 20px #39cfff30; }
.equipment-slot > div span,.equipment-slot section small { color: #91a7b7; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.equipment-slot section strong,.equipment-slot section b,.equipment-slot section em,.equipment-slot section u { display: block; }
.equipment-slot section strong { color: white; font-size: 14px; }
.equipment-item-name { margin-top:2px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.equipment-item-name strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.equipment-item-name .equipment-enhancement-badge { flex:0 0 auto; margin:0; padding:2px 5px; color:#65f2a9; border:1px solid #54eaa74a; border-radius:5px 2px; background:#3ce99e10; box-shadow:0 0 11px #3ce99e20; font-size:11px; font-weight:1000; }
.equipment-item-name .equipment-enhancement-badge.zero { color:#6f8291; border-color:#ffffff12; background:#ffffff07; box-shadow:none; }
.equipment-slot-icon { position:relative; isolation:isolate; }
.equipment-slot-icon > i { position:relative; z-index:2; }
.equipment-slot-icon.burning::before { content:""; position:absolute; z-index:1; left:50%; bottom:15px; width:var(--fire-width); height:var(--fire-height); transform:translateX(-50%); opacity:var(--fire-opacity); border-radius:55% 45% 58% 42% / 72% 70% 30% 28%; background:radial-gradient(ellipse at 50% 92%,#fff3a8 0 8%,#ff6a20 15%,#ff172f 36%,#a70018 55%,transparent 72%),radial-gradient(ellipse at 25% 65%,#ff3c20 0 18%,transparent 52%),radial-gradient(ellipse at 76% 56%,#ff1f38 0 16%,transparent 49%); filter:blur(.7px) drop-shadow(0 0 var(--fire-glow) #ff1c28); transform-origin:50% 100%; animation:equipment-fire-breathe var(--fire-speed) ease-in-out infinite alternate; pointer-events:none; }
.equipment-slot-icon.burning::after { content:""; position:absolute; z-index:3; left:10px; right:10px; top:var(--spark-top); height:var(--spark-height); opacity:var(--spark-opacity); background:radial-gradient(circle at 18% 75%,#ffdb7a 0 1px,transparent 2px),radial-gradient(circle at 72% 43%,#ff3a35 0 1.5px,transparent 2.5px),radial-gradient(circle at 44% 12%,#ff7a37 0 1px,transparent 2px),radial-gradient(circle at 88% 82%,#ff2337 0 1px,transparent 2px); filter:drop-shadow(0 0 4px #ff263c); animation:equipment-fire-sparks var(--spark-speed) linear infinite; pointer-events:none; }
@keyframes equipment-fire-breathe { from{transform:translateX(-50%) scale(.9,1) rotate(-2deg)} to{transform:translateX(-50%) scale(1.08,1.16) rotate(3deg)} }
@keyframes equipment-fire-sparks { from{transform:translateY(10px) scale(.75);background-position:0 8px,0 10px,0 5px,0 12px} to{transform:translateY(-13px) scale(1.05);background-position:3px -7px,-2px -12px,2px -16px,-3px -9px} }
.equipment-slot section b { margin-top: 3px; color: #63eaff; font-size: 11px; }
.equipment-slot section em { margin-top: 3px; color: #ffd05a; font-size: 9px; line-height: 1.35; }
.equipment-slot section u { width: fit-content; margin-top: 4px; padding: 3px 5px; color: #fff2a5; border-radius: 4px 2px; background: #ffd45b12; font-size: 9px; font-weight: 1000; text-decoration: none; }
.equipment-slot mark { padding: 5px 7px; color: #5ff0bc; border: 1px solid #5ff0bc44; border-radius: 99px; background: #5ff0bc0d; font-size: 8px; font-weight: 950; }
.equipment-slot-actions { display:grid; justify-items:end; gap:6px; }
.equipment-slot-actions button { min-width:68px; padding:7px 8px; color:#fff4ad; border:1px solid #ffd45b77; border-radius:8px 3px; background:linear-gradient(135deg,#5d370d,#c47b08); box-shadow:0 0 16px #ffbd2630; font-size:8px; font-weight:1000; cursor:pointer; }
.equipment-slot-actions button b { display:block; margin-top:2px; color:white; font-size:11px; }
.equipment-slot-actions mark { display:block; }
.equipment-slot.rarity-rare { border-color: #638cff66; }.equipment-slot.rarity-epic { border-color: #c455ff77; }.equipment-slot.rarity-legendary { border-color: #ffc83d88; box-shadow: inset 0 0 22px #ffc83d0c; }.equipment-slot.rarity-mythic { border-color: #fff; box-shadow: inset 0 0 26px #55eaff20,0 0 15px #fff2; }
.equipment-enhance-modal[hidden] { display:none; }
.equipment-enhance-modal { position:absolute; inset:0; z-index:28; padding:18px; display:grid; place-items:center; background:#01050ce8; backdrop-filter:blur(9px); }
.equipment-enhance-card { position:relative; width:min(100%,390px); max-height:calc(100% - 12px); padding:22px 18px 18px; overflow-x:hidden; overflow-y:auto; text-align:center; border:1px solid #ffd45b88; border-radius:20px 6px; background:radial-gradient(circle at 50% 31%,#8a520d30,transparent 36%),linear-gradient(160deg,#172238,#080d17); box-shadow:0 28px 90px #000e,0 0 50px #ffb32524,inset 0 1px #fff3; scrollbar-width:none; }
.equipment-enhance-card::-webkit-scrollbar { display:none; }
.equipment-enhance-card h3 { margin:4px 0 0; color:white; font-size:27px; }
.equipment-enhance-item { margin:6px 0 0; color:#a9bdcc; font-size:11px; font-weight:900; }
.equipment-enhance-level { margin:16px auto 0; display:flex; align-items:center; justify-content:center; gap:16px; }
.equipment-enhance-level span,.equipment-enhance-level strong { min-width:70px; padding:9px; border:1px solid #ffffff1d; border-radius:9px 3px; background:#050d18aa; color:#93a6b5; font-size:22px; }
.equipment-enhance-level strong { color:#ffe36e; border-color:#ffd45b66; box-shadow:0 0 18px #ffc13a1d; }
.equipment-enhance-level i { color:#65eaff; font-style:normal; font-weight:1000; }
.equipment-forge-stage { position:relative; height:116px; margin:8px 0 0; display:grid; place-items:center; }
.forge-stone { position:absolute; top:55px; color:#b889ff; font-size:55px; line-height:1; filter:drop-shadow(0 0 16px #824cff); transform:scaleX(1.25); }
.forge-hammer { position:absolute; z-index:2; top:10px; left:calc(50% + 12px); font-size:52px; transform:rotate(-34deg); transform-origin:80% 80%; filter:drop-shadow(0 0 9px #ffd45b66); }
.forge-flare { position:absolute; top:64px; width:18px; height:18px; opacity:0; border-radius:50%; background:white; box-shadow:0 0 16px #fff,0 0 36px #ffd45b,0 0 75px #ff8a00; }
.forge-fragment { position:absolute; top:71px; color:#b889ff; opacity:0; font-size:13px; }.forge-fragment.one{left:42%;--n:-1}.forge-fragment.two{left:50%;--n:.2}.forge-fragment.three{left:57%;--n:1}
.equipment-enhance-card.forging .forge-hammer { animation:forge-hammer-strike 1s ease-in-out both; }
.equipment-enhance-card.forging .forge-stone { animation:forge-stone-charge 1s ease-in-out both; }
.equipment-enhance-card.forging .forge-flare { animation:forge-impact .55s .43s ease-out both; }
.equipment-enhance-card.success { border-color:#77ffc6; box-shadow:0 28px 90px #000e,0 0 60px #3dffac55,inset 0 0 38px #3dffac18; animation:forge-success-card .8s ease-out; }
.equipment-enhance-card.success .forge-stone { color:#fff4a6; filter:drop-shadow(0 0 14px #fff) drop-shadow(0 0 32px #55ffc0); animation:forge-success-stone .8s ease-out; }
.equipment-enhance-card.success .forge-flare { opacity:1; background:#caffea; box-shadow:0 0 24px #fff,0 0 60px #3dffac,0 0 110px #ffd45b; animation:forge-success-flare 1.2s ease-out both; }
.equipment-enhance-card.failed { border-color:#ff657488; animation:forge-fail-card .5s ease-out; }
.equipment-enhance-card.failed .forge-hammer { animation:forge-broken-hammer .8s ease-in both; }
.equipment-enhance-card.failed .forge-stone { color:#6c7280; filter:grayscale(1) drop-shadow(0 0 8px #ff4350); animation:forge-broken-stone .65s ease-out both; }
.equipment-enhance-card.failed .forge-fragment { animation:forge-fragment .8s ease-out both; }
.equipment-enhance-card.failed .forge-fragment.two { animation-delay:.06s }.equipment-enhance-card.failed .forge-fragment.three { animation-delay:.1s }
.equipment-enhance-result { display:block; min-height:18px; color:#a7b9c6; font-size:11px; letter-spacing:.12em; }.success .equipment-enhance-result{color:#6dffc1;text-shadow:0 0 14px #34ff9c}.failed .equipment-enhance-result{color:#ff8090}
.equipment-enhance-details { margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.equipment-enhance-details div { padding:10px 8px; text-align:left; border:1px solid #ffffff15; border-radius:8px 3px; background:#030a14a8; }
.equipment-enhance-details span,.equipment-enhance-details strong { display:block; }.equipment-enhance-details span{color:#8fa5b5;font-size:8px;font-weight:950;letter-spacing:.07em}.equipment-enhance-details strong{margin-top:4px;color:#fff;font-size:13px}.equipment-enhance-details div:nth-child(2) strong{color:#6effbc}.equipment-enhance-details div:nth-child(3) strong{color:#ffe071}.equipment-enhance-details div:nth-child(4) strong{color:#c19cff}
.equipment-enhance-action { width:100%; min-height:58px; margin-top:12px; color:white; border:1px solid #ffd45baa; border-radius:11px 4px; background:linear-gradient(135deg,#a85a00,#e7a600); box-shadow:0 10px 30px #e9960038,inset 0 1px #fff5; cursor:pointer; }.equipment-enhance-action span,.equipment-enhance-action strong{display:block;font-size:12px;font-weight:1000}.equipment-enhance-action strong{margin-top:3px;color:#fff1ae;font-size:9px}.equipment-enhance-action:disabled{opacity:.42;cursor:default}
.equipment-enhance-note { margin:10px 4px 0; color:#7f94a4; font-size:9px; line-height:1.45; }
@keyframes forge-hammer-strike{0%,25%{transform:rotate(-38deg) translate(0,0)}48%{transform:rotate(9deg) translate(-21px,27px)}62%{transform:rotate(-10deg) translate(-8px,8px)}100%{transform:rotate(-28deg)}}
@keyframes forge-stone-charge{0%{filter:drop-shadow(0 0 8px #824cff)}45%{filter:drop-shadow(0 0 28px #c79cff);transform:scaleX(1.25) scale(1.1)}100%{filter:drop-shadow(0 0 18px #ffd45b)}}
@keyframes forge-impact{0%{opacity:0;transform:scale(.2)}35%{opacity:1;transform:scale(3)}100%{opacity:0;transform:scale(6)}}
@keyframes forge-success-card{35%{transform:scale(1.025)}100%{transform:none}}@keyframes forge-success-stone{45%{transform:scale(1.35) rotate(180deg)}100%{transform:scaleX(1.25)}}@keyframes forge-success-flare{0%{transform:scale(.3);opacity:1}100%{transform:scale(8);opacity:0}}
@keyframes forge-fail-card{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}100%{transform:none}}@keyframes forge-broken-hammer{35%{transform:rotate(12deg) translate(-20px,28px)}100%{transform:rotate(65deg) translate(30px,42px);opacity:.35}}@keyframes forge-broken-stone{40%{transform:scaleX(1.25) scale(1.1)}100%{transform:scaleX(1.5) scaleY(.55) translateY(18px);opacity:.4}}@keyframes forge-fragment{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(calc((var(--n,1))*24px),35px) rotate(240deg)}}
.equipment-result { position: absolute; inset: 0; z-index: 24; display: grid; place-items: center; padding: 22px; visibility: hidden; opacity: 0; pointer-events: none; background: radial-gradient(circle,#6b31a45e,#01060ded 58%); backdrop-filter: blur(7px); transition: .22s; }
.equipment-result[hidden] { display: none; }
.equipment-result.visible { visibility: visible; opacity: 1; pointer-events: auto; }
.equipment-result-card { position: relative; z-index: 2; width: min(100%,420px); max-height: calc(100% - 20px); overflow-y: auto; padding: 18px; text-align: center; pointer-events: auto; border: 1px solid #c276ff88; border-radius: 20px 6px; background: linear-gradient(160deg,#17233a,#080d18); box-shadow: 0 28px 85px #000d,0 0 48px #b446ff3d,inset 0 1px #fff3; transform: translateY(16px) scale(.94); transition: .25s; scrollbar-width: none; }
.equipment-result.visible .equipment-result-card { transform: none; }
.equipment-result-card::-webkit-scrollbar { display: none; }
.equipment-compare-heading > span { color: #65eaff; font-size: 9px; font-weight: 1000; letter-spacing: .17em; }
.equipment-compare-heading h3 { margin-top: 4px; font-size: 25px; }
.equipment-compare-heading p { margin-top: 5px; color: #94a9b8; font-size: 10px; }
.compare-equipment-card { margin-top: 12px; padding: 12px; text-align: left; border: 1px solid #ffffff1e; border-radius: 13px 4px; background: linear-gradient(120deg,#ffffff0c,#ffffff03); }
.compare-equipment-card.equipped { border-color: #58eebc77; box-shadow: inset 0 0 24px #43eeb814; }
.compare-equipment-card.rarity-rare { border-color: #638cff88; }.compare-equipment-card.rarity-epic { border-color: #c455ffaa; }.compare-equipment-card.rarity-legendary { border-color: #ffc83dcc; box-shadow: inset 0 0 24px #ffc83d15; }.compare-equipment-card.rarity-mythic { border-color: white; box-shadow: inset 0 0 26px #55eaff20,0 0 15px #fff2; }
.compare-card-top { display: flex; justify-content: space-between; align-items: center; }
.compare-card-top mark { padding: 4px 7px; color: #61efbc; border: 1px solid #61efbc44; border-radius: 99px; background: #61efbc0d; font-size: 8px; font-weight: 950; }
.candidate .compare-card-top mark { color: #d8c3ff; border-color: #b879ff55; background: #b879ff0d; }
.compare-card-body { margin-top: 9px; display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; }
.compare-card-body > i { width: 52px; height: 52px; display: grid; place-items: center; color: white; border: 1px solid #ffffff44; border-radius: 14px 4px; background: linear-gradient(145deg,#178dc1,#624ccc); font: 1000 10px/1 inherit; font-style: normal; }
.compare-card-body small,.compare-card-body strong,.compare-card-body em,.compare-card-body u { display: block; }
.compare-card-body small { color: #8fa6b7; font-size: 8px; font-weight: 900; letter-spacing: .08em; }
.compare-card-body strong { margin-top: 2px; color: white; font-size: 17px; }
.compare-card-body em { margin-top: 3px; color: #64eaff; font-size: 11px; font-weight: 900; }
.compare-card-body u { width: fit-content; margin-top: 5px; padding: 4px 6px; color: #fff2a5; border: 1px solid #ffd45b38; border-radius: 5px 2px; background: #ffd45b0d; font-size: 10px; font-weight: 1000; text-decoration: none; }
.compare-card-affixes { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.compare-card-affixes span { padding: 5px 7px; color: #ffd45b; border: 1px solid #ffd45b2b; border-radius: 5px; background: #ffd45b0a; font-size: 9px; font-weight: 850; }
.compare-card-deltas { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.compare-card-deltas b { padding: 5px 7px; border-radius: 5px; font-size: 9px; }
.compare-card-deltas .positive { color: #64f0b9; background: #32d69b17; }.compare-card-deltas .negative { color: #ff8093; background: #ff385418; }.compare-card-deltas .neutral { color: #9db0bf; background: #ffffff0a; }
.equipment-swap-divider { height: 24px; margin: 1px 0 -7px; display: flex; align-items: center; justify-content: center; gap: 7px; color: #bd82ff; }
.equipment-swap-divider span { font-size: 19px; }.equipment-swap-divider b { font-size: 8px; letter-spacing: .13em; }
.equipment-rarity { display: inline-block; padding: 5px 10px; color: #07111b; border-radius: 99px; background: #6de6ff; font-size: 9px; font-weight: 1000; letter-spacing: .13em; }
.equipment-rarity.rarity-rare { background: #638cff; color: white; }.equipment-rarity.rarity-epic { background: #c455ff; color: white; }.equipment-rarity.rarity-legendary { background: #ffc83d; }.equipment-rarity.rarity-mythic { color: #091019; background: white; box-shadow: 0 0 20px white; }
.equipment-rarity.rarity-ascended{background:#63fff1}.equipment-rarity.rarity-celestial{background:#70baff;color:white}.equipment-rarity.rarity-divine{background:#ffe680}.equipment-rarity.rarity-eternal{background:#ff75df;color:white}.equipment-rarity.rarity-transcendent{background:linear-gradient(90deg,#baffda,#fff,#95e4ff);box-shadow:0 0 22px #baffda}
.equipment-result-icon { width: 92px; height: 92px; margin: 18px auto 12px; display: grid; place-items: center; color: white; border: 2px solid #ffffff55; border-radius: 28px 8px; background: linear-gradient(145deg,#1e96c9,#5544bd); box-shadow: 0 0 36px #3ddfff44; font-size: 18px; font-weight: 1000; }
.equipment-result-icon.rarity-epic { background: linear-gradient(145deg,#6d2cb0,#d044db); }.equipment-result-icon.rarity-legendary { background: linear-gradient(145deg,#a65a00,#ffc83d); }.equipment-result-icon.rarity-mythic { background: linear-gradient(145deg,#48dbea,#fff,#b97aff); color: #171527; }
.equipment-result-card > small { color: #91a8b8; font-size: 9px; font-weight: 950; letter-spacing: .14em; }
.equipment-result-card h3 { margin-top: 5px; color: white; font-size: 27px; line-height: 1; }
.equipment-result-stats { margin-top: 15px; padding: 13px; display: grid; gap: 5px; border: 1px solid #ffffff17; border-radius: 10px 3px; background: #02091399; }
.equipment-result-stats strong { color: #68eaff; font-size: 15px; }.equipment-result-stats span { color: #ffd45b; font-size: 12px; font-weight: 850; }
.equipment-compare { margin: 10px 0 0; color: #5ff0bc; font-size: 10px; font-weight: 950; }.equipment-compare.worse { color: #ff7b8f; }
.equipment-result-actions { position: relative; z-index: 5; margin-top: 16px; display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; pointer-events: auto; }
.equipment-result-actions button { position: relative; z-index: 6; min-height: 58px; color: white; border: 1px solid #ffffff33; border-radius: 11px 4px; background: #ffffff0a; cursor: pointer; touch-action: manipulation; pointer-events: auto; }
.equipment-result-actions button:last-child { border-color: #62efff99; background: linear-gradient(135deg,#078cdb,#26d3d8); box-shadow: 0 8px 24px #22cddd33; }
.equipment-result-actions span,.equipment-result-actions strong { display: block; font-size: 11px; font-weight: 1000; }.equipment-result-actions strong { margin-top: 3px; color: #ffe071; font-size: 10px; }.equipment-result-actions button:last-child strong { color: white; }
.aura-result-card { border-color: #ffb24d88; background: radial-gradient(circle at 50% 12%,#ff8a3424,transparent 30%),linear-gradient(160deg,#1d2135,#080d18); }
.aura-compare-body { margin-top: 10px; display: grid; grid-template-columns: 72px 1fr; gap: 12px; align-items: center; }
.aura-compare-body > .character-aura { margin: 0 auto; transform: scale(calc(var(--aura-size) * .82)); }
.aura-compare-body section small,.aura-compare-body section strong,.aura-compare-body section em,.aura-compare-body section u { display: block; }
.aura-compare-body section small { color: #98adbb; font-size: 8px; font-weight: 950; letter-spacing: .08em; }
.aura-compare-body section strong { margin-top: 3px; color: white; font-size: 18px; }
.aura-compare-body section em { margin-top: 4px; color: #65eaff; font-size: 10px; font-weight: 850; line-height: 1.35; }
.aura-compare-body section u { width: fit-content; margin-top: 6px; padding: 4px 7px; color: #fff1a0; border: 1px solid #ffd45b44; border-radius: 5px 2px; background: #ffd45b0e; font-size: 11px; font-weight: 1000; text-decoration: none; }
.aura-queue-note { margin: 10px 0 0; color: #a78fc2; font-size: 9px; font-weight: 950; letter-spacing: .1em; }
@media (max-width:430px){.equipment-tier{grid-template-columns:70px 1fr 98px}.equipment-card{padding:15px}.equipment-intro{font-size:12px}.equipment-slot{grid-template-columns:44px 1fr auto}.equipment-slot-actions mark{display:none}.equipment-slot-actions button{min-width:62px;padding:6px}}
@media (prefers-reduced-motion:reduce){.equipment-slot-icon.burning::before,.equipment-slot-icon.burning::after{animation:none}}
@media (max-width:430px){.equipment-result{padding:8px}.equipment-result-card{padding:13px}.compare-equipment-card{padding:10px}.compare-card-body{grid-template-columns:44px 1fr}.compare-card-body>i{width:43px;height:43px}.equipment-character-stats div{min-height:43px;padding:7px 9px}.equipment-character-stats strong{font-size:13px}}
@media (max-width:430px){.summon-odds-modal{padding:10px}.summon-odds-card{padding:17px 14px}.summon-odds-row{grid-template-columns:minmax(100px,.8fr) minmax(162px,1fr);gap:8px;padding:10px 9px}.summon-odds-row .odds-copy>strong{font-size:13px}.summon-odds-row .odds-copy>small{font-size:9px}.odds-values b{font-size:12px}.home-brand{left:12px;right:12px;gap:8px}.home-brand .logo-mark{width:38px;height:38px;font-size:15px}.home-brand .eyebrow{font-size:8px}.home-wallet{width:124px;flex-basis:124px;gap:3px}.home-currency{padding:6px;font-size:8px}.home-currency strong{font-size:10px}.home-nav{left:8px;right:8px;gap:2px;padding:6px 4px}.nav-button span,.nav-button strong{font-size:8px;letter-spacing:.035em}.nav-button i{width:25px;height:25px;font-size:16px}}

@media (min-width: 541px) {
  #game-shell { border-radius: 18px; box-shadow: 0 0 0 1px #ffffff16, 0 20px 80px #000; }
}

@media (max-height: 680px) {
  .panel { padding-bottom: 22px; }
  .logo-mark { width: 42px; height: 42px; margin-bottom: 8px; font-size: 18px; }
  .panel h1, .panel h2 { font-size: 48px; }
  .intro { margin: 14px 0; }
  .primary-button { min-height: 52px; }
  .fast-sweep-button { bottom: 213px; min-height: 58px; }
  .stage-select-open { bottom: 278px; }
  .stage-select-card { max-height: 96%; padding: 15px; }
  .stage-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
/* Player account and cloud-save controls */
.account-button{position:absolute;top:calc(max(18px,env(safe-area-inset-top)) + 58px);left:18px;right:auto;z-index:6;display:flex;align-items:center;gap:10px;max-width:220px;padding:6px 10px;border:1px solid #45dffc55;border-radius:10px;background:#061725cc;color:#dff9ff;text-align:left;box-shadow:0 8px 22px #00101aaa;cursor:pointer}
.account-button span{display:grid;min-width:0}.account-button small{font-size:7px;letter-spacing:1.1px;color:#62eaff}.account-button strong{max-width:120px;overflow:hidden;text-overflow:ellipsis;font-size:9px;white-space:nowrap}.account-button b{font-size:7px;letter-spacing:.7px;color:#98a9b7;white-space:nowrap}.account-button.synced b{color:#62efbd}.account-button.syncing b{color:#ffd45b}.account-button.error b{color:#ff7d91}
.account-modal{position:absolute;inset:0;z-index:90;display:grid;place-items:center;padding:22px;background:#020a11d9;backdrop-filter:blur(8px)}.account-modal[hidden]{display:none}
.account-card{position:relative;width:min(360px,100%);padding:28px 24px 24px;border:1px solid #42defc66;border-radius:20px;background:linear-gradient(165deg,#102d3d 0%,#071522 62%,#07101a 100%);box-shadow:0 24px 80px #000c,0 0 36px #22dffc20;color:#eefcff}
.account-card h2{margin:2px 0 8px;font-size:25px;font-style:italic}.account-copy{margin:0 0 20px;color:#a9bdc9;font-size:11px;line-height:1.55}.account-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;background:transparent;color:#b9d3de;font-size:25px;cursor:pointer}
.account-form{display:grid;gap:12px}.account-form label{display:grid;gap:6px}.account-form label span,.account-session>span{font-size:8px;font-weight:800;letter-spacing:1.2px;color:#5fe7ff}.account-form input{width:100%;box-sizing:border-box;padding:13px 14px;border:1px solid #31566b;border-radius:10px;outline:none;background:#06131f;color:#fff;font:inherit}.account-form input:focus{border-color:#42dffc;box-shadow:0 0 0 3px #42dffc18}.account-form button,.account-session button{min-height:44px;border:1px solid #4be9ff;border-radius:11px;background:linear-gradient(135deg,#0aaee1,#20d7ed);color:#fff;font-size:10px;font-weight:900;letter-spacing:1px;cursor:pointer}.account-form button:disabled,.account-session button:disabled{opacity:.5;cursor:wait}.account-form .account-secondary{background:#0a1d2d;color:#bff7ff}.account-session{display:grid;gap:10px;padding:15px;border:1px solid #2d5267;border-radius:12px;background:#06131f}.account-session strong{overflow-wrap:anywhere;font-size:13px}.account-session small{color:#70e8be}.account-session button{margin-top:4px;border-color:#ff728866;background:#28121c;color:#ffadba}.account-message{min-height:16px;margin:13px 0 0;color:#8ca8b6;font-size:9px;line-height:1.45}.account-message.error{color:#ff8da0}.account-message.success{color:#6ff2bd}
.account-form[hidden],.account-session[hidden]{display:none}
.account-conflict{display:grid;gap:11px;padding:16px;border:1px solid #ffb84d77;border-radius:12px;background:#21170c}.account-conflict[hidden]{display:none}.account-conflict p{margin:0;color:#ffc564;font-size:9px;font-weight:900;letter-spacing:1.4px}.account-conflict strong{font-size:20px;color:#fff}.account-conflict small{color:#e6cda6;font-size:10px;line-height:1.5}.account-conflict button{min-height:44px;border:1px solid #4be9ff;border-radius:11px;background:linear-gradient(135deg,#0aaee1,#20d7ed);color:#fff;font-size:10px;font-weight:900;letter-spacing:1px;cursor:pointer}.account-conflict button:disabled{opacity:.5;cursor:wait}.account-conflict #account-use-cloud{border-color:#ff7b65;background:linear-gradient(135deg,#d54444,#f16a4f)}.account-conflict .account-secondary{background:#0a1d2d;color:#bff7ff}

/* Compact navigation and menu layout */
html,body,#game-shell{overscroll-behavior:none}
#game-shell{overflow:clip}
button{touch-action:manipulation}
#game{touch-action:none}
.persistent-nav{z-index:34;height:70px;bottom:max(8px,env(safe-area-inset-bottom));padding:5px 6px;border-radius:16px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
.persistent-nav.visible{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.persistent-nav .nav-button{height:52px;gap:3px;padding:3px 2px;border-radius:10px}
.persistent-nav .nav-button i{width:22px;height:22px;border-radius:7px;font-size:14px}
.persistent-nav .nav-button span,.persistent-nav .nav-button strong{font-size:8px;letter-spacing:.035em}
.persistent-nav .nav-button small{font-size:7px}
.persistent-nav .nav-button.stage-button{height:60px;border-radius:14px;transform:translateY(-4px)}
.persistent-nav .stage-button i{width:24px;height:24px;font-size:14px}
.persistent-nav .nav-button.active{border-color:#77eaff80;background:linear-gradient(180deg,#2bdfff24,#07152255);box-shadow:inset 0 1px #fff2,0 0 14px #28ddff20}
.global-home-button{position:absolute;z-index:35;top:max(9px,env(safe-area-inset-top));left:14px;min-width:82px;height:34px;padding:0 12px;opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;border:1px solid #5ce7ff69;border-radius:9px 3px;color:#d8f9ff;background:#071827e8;box-shadow:0 6px 20px #0008;font:950 9px/1 inherit;letter-spacing:.08em;transition:.18s ease}
.global-home-button.visible{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.shop-panel{justify-content:flex-start;padding:max(50px,calc(env(safe-area-inset-top) + 42px)) 10px max(88px,calc(env(safe-area-inset-bottom) + 78px))}
.shop-card{max-height:100%;padding:13px;touch-action:pan-y;overscroll-behavior:contain;border-radius:14px 4px}
.shop-card>.home-back{display:none}
.shop-heading{gap:8px;align-items:center}
.shop-heading h2,#stats-panel .shop-heading h2,.equipment-card .shop-heading h2{font-size:clamp(29px,7vw,36px);line-height:.92}
.shop-heading .eyebrow,#stats-panel .shop-heading .eyebrow{font-size:8px;line-height:1.1}
.currency-stack{gap:4px}
.shop-coins,#stats-panel .shop-coins,.currency-stack .shop-coins{min-width:67px;padding:6px 8px}
.shop-coins span,#stats-panel .shop-coins span{font-size:7px;letter-spacing:.08em}
.shop-coins strong,#stats-panel .shop-coins strong{font-size:15px}
.equipment-card,#stats-panel .shop-card{padding:13px}
.equipment-character-stats{margin-top:9px;gap:5px}
.equipment-character-stats div{min-height:36px;padding:5px 8px}
.equipment-character-stats .equipment-cp-total{min-height:45px}
.equipment-character-stats .equipment-cp-total strong{font-size:17px}
.equipment-character-stats span{font-size:8px}.equipment-character-stats strong{font-size:13px}
.equipment-intro{margin-top:9px;padding:8px 10px;font-size:11px;line-height:1.35}
.equipment-tier{margin-top:8px;padding:8px;grid-template-columns:67px 1fr 96px;gap:6px;border-radius:10px 3px}
.auto-sell-filter-button{margin-top:7px;min-height:39px}
.equipment-summon-row{margin-top:7px}
.loadout-heading{margin-top:10px}
#stats-panel .profile-row{margin-top:9px}
#stats-panel .level-orb{width:62px;min-width:62px;height:62px}
#stats-panel .cp-summary{margin-top:7px;padding:8px 9px}
#stats-panel .level-progress{margin-top:7px;padding:7px 9px}
#stats-panel .stat-point-bank{min-height:43px;margin-top:7px}
#stats-panel .stat-batch-controls{margin-top:7px}
#stats-panel .stats-copy{margin:8px 0 4px;font-size:10px;line-height:1.3}

/* Two-row in-stage HUD: stage + character XP, then combat essentials. */
#hud{padding:max(7px,env(safe-area-inset-top)) 9px 0;background:linear-gradient(#07111fc7 0%,#07111f66 70%,transparent 100%)}
.top-row{height:32px;gap:5px}
.brand{min-width:52px;gap:3px}.brand span{font-size:7px}.brand strong{font-size:15px}
.stage-xp-inline{min-width:92px;flex:1;width:auto;margin:0;padding:4px 7px 5px;border-radius:7px 2px}
.stage-xp-inline>div{gap:6px}.stage-xp-inline span{font-size:7px}.stage-xp-inline span b{font-size:10px}.stage-xp-inline strong{font-size:8px;white-space:nowrap}
.stage-xp-inline>i{height:4px;margin-top:3px}
.stage-wallet{min-width:126px;height:27px;padding:0 5px;gap:3px}.coin-pill{gap:2px;font-size:8px}.coin-pill span{font-size:8px}.coin-pill.gold-bar-pill,.coin-pill.silver-stone-pill,.coin-pill.pet-shard-pill{padding-left:3px}
.leave-stage-button{min-width:40px;height:28px;padding:0 6px;font-size:8px}
.icon-button{width:28px;height:28px;font-size:13px}.fullscreen-button{font-size:15px}
.stat-row{margin-top:5px;gap:5px}
.stat,.weapon-chip{min-width:0;flex:1;padding:5px 7px;border-radius:7px 2px}
.stat.hp{min-width:0}.stat span,.weapon-chip span{font-size:7px;letter-spacing:.08em}.stat strong{font-size:14px}.weapon-chip strong{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.weapon-chip{flex:1.45;margin-left:0}
.stage-buffs{margin-top:4px;gap:3px}.stage-buffs span{min-width:56px;padding:3px 5px;font-size:7px}

/* Combat messages stay readable without hiding enemies. */
.level-stats-popup{top:138px;width:min(82%,310px);padding:8px 10px;border-color:#72f6bd99;background:linear-gradient(120deg,#07172480,#102d2a73);box-shadow:0 0 20px #4ff2a933;backdrop-filter:blur(1px)}
.level-stats-popup>strong{font-size:10px}.level-stats-popup>div{margin-top:5px;gap:4px}.level-stats-popup span{padding:4px 6px;background:#0715225c;font-size:8px}.level-stats-popup b{font-size:10px}
@keyframes level-stats-show{0%{opacity:0;transform:translate(-50%,8px) scale(.86)}5%,88%{opacity:.72;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-12px) scale(.94)}}
.monster-loot-popup{top:calc(100% + 4px);min-width:0;width:max-content;max-width:94%;padding:5px 8px;background:#06152199}
.monster-loot-popup small{display:none}.monster-loot-popup div{margin:0;gap:7px;flex-wrap:wrap}.monster-loot-popup span{font-size:8px;white-space:nowrap}.monster-loot-popup span:first-child{color:#c9a9ff}.monster-loot-popup b{font-size:10px}

@media(max-width:430px){
  .account-button{top:calc(max(18px,env(safe-area-inset-top)) + 58px);left:12px;right:auto;max-width:190px;min-height:28px;padding:4px 8px;gap:7px}
  .account-button small{font-size:6px;letter-spacing:.9px}.account-button strong{max-width:108px;font-size:8px}.account-button b{font-size:6px}
  .persistent-nav{left:6px;right:6px;gap:1px;padding-inline:3px}
  .persistent-nav .nav-button span,.persistent-nav .nav-button strong{font-size:7px}
  .shop-panel{padding-left:7px;padding-right:7px}
  .shop-heading h2,#stats-panel .shop-heading h2,.equipment-card .shop-heading h2{font-size:28px}
  .shop-coins,#stats-panel .shop-coins,.currency-stack .shop-coins{min-width:59px;padding:5px 6px}
  .top-row{gap:3px}.brand{min-width:43px}.brand span{display:none}.brand strong{font-size:13px}
  .stage-xp-inline{min-width:78px;padding-inline:5px}.stage-xp-inline span{font-size:6px}.stage-xp-inline strong{font-size:7px}
  .stage-wallet{min-width:105px;padding-inline:3px}.coin-pill{font-size:7px}.coin-pill span{font-size:7px}
  .leave-stage-button{min-width:35px;padding-inline:4px}.icon-button{width:26px;height:26px}
}

/* iOS game input: never turn a drag gesture into text selection or a callout. */
#game-shell,#game,#hud,#claim-banner,.damage-number-layer{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game-shell{-webkit-tap-highlight-color:transparent}

/* Active tabs close themselves; auto-summon temporarily owns the bottom edge. */
.persistent-nav .nav-button.active span{color:#ffcad3}
.persistent-nav .nav-button.active i{color:#ff95a8;background:#ff506b1c}
.persistent-nav.summoning-hidden{display:none}
.auto-summon-floating-stop{bottom:max(14px,env(safe-area-inset-bottom));width:min(88%,360px);min-height:48px}
.shop-panel{padding-top:max(12px,env(safe-area-inset-top))}

/* Reveal balances: summon material and current Coins in one compact header. */
.reveal-wallet{min-width:min(340px,88%);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(92px,.7fr);padding:8px 10px;text-align:left}
.reveal-balance{min-width:0;padding:2px 10px;text-align:center}
.reveal-balance>span{display:block;color:#a9c5d5;font:900 8px/1 Inter,ui-sans-serif,system-ui,sans-serif;letter-spacing:.08em;white-space:nowrap}
.reveal-balance>strong{margin-top:5px;display:flex;align-items:center;justify-content:center;gap:6px;font:1000 19px/1 Inter,ui-sans-serif,system-ui,sans-serif}
.reveal-balance strong i{color:#d9c7ff;font-style:normal;text-shadow:0 0 14px #9b67ff}.reveal-balance strong b{color:white}
.reveal-coins{border-left:1px solid #ffffff24}.reveal-coins strong i,.aura-reveal-wallet .reveal-coins strong i,.pet-reveal-wallet .reveal-coins strong i{color:#ffd360;text-shadow:0 0 14px #ffc83d}
@media(max-width:390px){.reveal-wallet{min-width:92%;grid-template-columns:minmax(0,1.2fr) minmax(82px,.8fr);padding-inline:6px}.reveal-balance{padding-inline:6px}.reveal-balance>span{font-size:7px}.reveal-balance>strong{font-size:17px}}