@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@600;700;800;900&display=swap');

:root{
  --bg-void:   #292C29;
  --bg-app:    #323632;
  --bg-app-b:  #292C29;

  --surface-1: #3B403B;
  --surface-2: #454A45;
  --surface-3: #505650;
  --sunk:      #242824;

  --edge:      #626862;
  --edge-hi:   #747A74;
  --edge-soft: #555B55;

  --shadow-hard: #1B1E1B;

  --gold:#f2c15a;
  --gold-hi:#ffd979;
  --gold-dk:#8f5f1c;

  --red:#e0483c;
  --red-hi:#ff8a7a;
  --red-dk:#8d2820;
  --green:#5fc357;
  --green-hi:#95e77e;
  --blue:#4ca5dd;
  --blue-hi:#84cdf5;
  --purple:#9567c9;
  --purple-hi:#c1a1ef;

  --rar-common:#8a7a63;
  --rar-rare:#2f7fd6;
  --rar-epic:#1fae94;
  --rar-legendary:#f6b23e;
  --rar-mythic:#e0342a;

  --text:#eef3f8;
  --muted:#8b95a8;
  --faint:#637085;

  --font-head:'Baloo 2', system-ui, sans-serif;
  --font-ui:'Nunito', system-ui, sans-serif;

  --r-s:10px;
  --r-m:14px;
  --r-l:20px;

  --gutter:10px;

  --bevel:0 3px 0 var(--shadow-hard), 0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  --bevel-sm:0 2px 0 var(--shadow-hard), inset 0 1px 0 rgba(255,255,255,.05);
}

*{ box-sizing:border-box; }

html,body{
  width:100%;
  min-height:100%;
  margin:0;
  background:var(--bg-void);
}

body{
  font-family:var(--font-ui);
  font-size:11px;
  font-weight:700;
  line-height:1.35;
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

button,input,select,textarea{ font:inherit; color:inherit; }
img{ -webkit-user-drag:none; user-select:none; }

body:lang(ar), .content[dir="rtl"]{ direction:rtl; text-align:right; }

.hidden{ display:none !important; }
.text-justify{ text-align:justify; }
.text-left{ text-align:left; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

*{ scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar{ display:none; }

.app{
  position:relative;
  width:100%;
  max-width:480px;
  height:100dvh;
  min-height:560px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--bg-app);
  isolation:isolate;
}

.app::before{ content:none; }

.header{
  position:fixed;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  width:min(468px, calc(100% - 12px));
  z-index:300;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding: 5px 10px;

  border:1.5px solid var(--edge);
  border-radius:12px;
  background: var(--surface-1);
  box-shadow:0 6px 18px rgba(0,0,0,.55);
}

.header::after{ content:none; }

.header-user{ display:flex; align-items:center; gap:10px; min-width:0; }

.header-avatar-wrap{ position:relative; width:50px; height:50px; flex:0 0 50px; }

.header-avatar{
  width:100%; height:100%;
  object-fit:cover;
  border:2.5px solid var(--ring, var(--gold));
  border-radius:50%;
  background:#141d2c;
  box-shadow:0 0 0 2px #0b1220, 0 3px 8px rgba(0,0,0,.5);
}
.header-avatar[data-rarity="common"]{ --ring:var(--rar-common); }
.header-avatar[data-rarity="rare"]{ --ring:var(--rar-rare); }
.header-avatar[data-rarity="epic"]{ --ring:var(--rar-epic); }
.header-avatar[data-rarity="legendary"]{ --ring:var(--rar-legendary); }
.header-avatar[data-rarity="mythic"]{ --ring:var(--rar-mythic); }

.header-online-dot{
  position:absolute; right:1px; bottom:2px;
  width:12px; height:12px;
  border:2px solid #0b1220;
  border-radius:50%;
  background:#76c943;
}

.header-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }

.header-name{
  max-width:132px;
  font-family:var(--font-head);
  font-size:16px;
  font-weight:800;
  line-height:1.05;
  color:#fff;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.header-level-row{ display:flex; align-items:center; gap:5px; min-height:16px; }

.header-level-badge{
  display:flex; align-items:center; justify-content:center;
  width:16px; height:16px;
  border:0;
  border-radius:5px;
  font-size:9px;
  color:#fff;
  background:linear-gradient(180deg, #a97ce0, #7c4fbe);
}

.header-id{
  font-family:var(--font-head);
  font-size:13px;
  font-weight:800;
  color:var(--gold-hi);
  letter-spacing:.2px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.header-right{ display:flex; align-items:center; gap:7px; flex-shrink:0; }

.header-currency{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:88px;
  height:38px;
  padding:0 5px 0 6px;
  border:1.5px solid var(--edge);
  border-radius:12px;
  background:var(--surface-2);
  cursor:pointer;
}

.header-currency-icon{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  flex-shrink:0;
}
.header-currency-icon img,
.header-currency > img{
  width:22px; height:22px;
  object-fit:contain;
}

.header-currency > span:not(.hud-plus){
  font-family:var(--font-head);
  font-size:14px;
  font-weight:800;
  line-height:1;
  color:#fff;
  white-space:nowrap;
}

.hud-plus{
  display:flex; align-items:center; justify-content:center;
  width:22px; height:22px;
  margin-left:auto;
  border:1.5px solid var(--edge-hi);
  border-radius:8px;
  font-family:var(--font-head);
  font-size:14px;
  line-height:1;
  color:#c3cddb;
  background:var(--surface-3);
}

.hud-icon-button{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  padding:0;
  border:1.5px solid var(--edge);
  border-radius:12px;
  background:var(--surface-2);
  cursor:pointer;
}
.hud-icon-button:active{ transform:translateY(1px); }

.hud-burger{ display:flex; flex-direction:column; align-items:center; gap:3px; width:100%; }
.hud-burger i{ display:block; width:16px; height:2px; border-radius:2px; background:#dbe3ec; }

.lang-dropdown{ position:relative; }

.lang-menu{
  position:absolute;
  top:46px; right:0;
  min-width:168px;
  padding:5px;
  z-index:400;
  border:1.5px solid var(--edge-hi);
  border-radius:14px;
  background:var(--surface-2);
  box-shadow:0 14px 30px rgba(0,0,0,.7);
}
.lang-menu-sep{ height:1px; margin:4px 6px; background:rgba(255,255,255,.07); }

.lang-option{
  display:flex; align-items:center; gap:8px;
  width:100%;
  padding:9px 10px;
  border:0;
  border-radius:9px;
  font-size:11px;
  color:#e8eef4;
  text-align:left;
  background:transparent;
  cursor:pointer;
}
.lang-option:hover{ background:rgba(242,193,90,.1); color:var(--gold-hi); }
.lang-option.active{ color:var(--gold-hi); }
.lang-code{ font-family:var(--font-head); font-size:12px; min-width:20px; }
.lang-name{ font-size:10px; font-weight:600; color:var(--muted); }
.lang-option:hover .lang-name{ color:#cfd9e3; }

.content{
  position:relative;
  z-index:2;
  flex:1;
  margin-top:0;
  padding:0 0 104px;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

.content > .panel-main:not(.hb-screen){ padding:98px var(--gutter) 0; }

.panel-main{ padding:0; }

.nav{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:100%;
  max-width:480px;
  height:88px;
  z-index:100;

  display:flex;
  align-items:flex-start;
  gap:6px;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:transparent;
}

.nav::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0; bottom:-12px;
  z-index:-1;
  pointer-events:none;
  border-top:1.5px solid var(--edge-soft);
  border-radius:22px 22px 0 0;
  background: var(--surface-1);
}

.nav-item{
  position:relative;
  flex:1;
  min-width:0;
  height:70px;
  padding:6px 2px 5px;
  border:1.5px solid var(--edge);
  border-radius:16px;
  background:var(--surface-2);
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  transition:transform .1s ease, border-color .15s ease, background .15s ease;
}
.nav-item::before{ content:none; }
.nav-item:active{ transform:translateY(2px); }

.nav-item.active{
  transform:none;
  border-color:var(--gold);
  background:#3c413c;
  box-shadow:0 0 0 1px rgba(242,193,90,.25), 0 0 16px rgba(242,193,90,.18);
}

.nav-art{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px;
}
.nav-icon{
  width: 100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));
  transition:transform .15s ease;
}
.nav-item.active .nav-icon{ transform:scale(1.06); }

.nav-icon-badge{
  display:contents;
  background:none !important;
  box-shadow:none !important;
}

.nav-item span[data-nav]{
  position:relative; z-index:2;
  margin-top:0;
  font-family:var(--font-head);
  font-size:10px;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:#aab5c4;
}
.nav-item.active span[data-nav]{ color:var(--gold-hi); }

.nav-item.has-dot .nav-art::after{
  content:"";
  position:absolute;
  top:-1px; right:-1px;
  width:9px; height:9px;
  border:2px solid #0e1524;
  border-radius:50%;
  background:var(--red);
}

.btn{
  display:block;
  width:100%;
  min-height:48px;
  margin:6px 0 10px;
  padding:12px 14px;
  border:1.5px solid var(--edge-hi);
  border-radius:14px;
  font-family:var(--font-head);
  font-size:14px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#f2f6fa;
  background:var(--surface-3);
  box-shadow:0 3px 0 var(--shadow-hard);
  cursor:pointer;
  transition:transform .08s ease, filter .12s ease;
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:translateY(3px); box-shadow:0 0 0 var(--shadow-hard); }

.btn-glow{
  border-color:#f0c45d;
  color:#3a260d;
  background:linear-gradient(180deg, #ffd86f, #d99a2e);
  text-shadow:0 1px 0 rgba(255,255,255,.28);
  box-shadow:0 3px 0 #8a5c1c;
}
.btn-glow:active{ box-shadow:0 0 0 #8a5c1c; }

.btn-war{
  border-color:#f08274;
  color:#fff3f0;
  background:linear-gradient(180deg, #e86a5c, #c0392e);
  box-shadow:0 3px 0 #6e211b;
}
.btn-war:active{ box-shadow:0 0 0 #6e211b; }

.btn:disabled,
.btn-notallowed{
  cursor:not-allowed;
  color:#6f7c90;
  border-color:var(--edge);
  background:#151d2c;
  box-shadow:0 3px 0 var(--shadow-hard);
  filter:none;
  text-shadow:none;
}
.btn:disabled:active,
.btn-notallowed:active{ transform:none; }

.game-icon-btn{
  position:relative;
  width:50px; height:50px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  transition:transform .08s ease;
}
.game-icon-btn img{ width:100%; height:100%; display:block; pointer-events:none; }
.game-icon-btn:active{ transform:translateY(3px) scale(.94); }
.game-icon-btn:disabled{ opacity:.45; transform:none; cursor:default; }

.ad-cooldown-badge{
  position:absolute;
  bottom:-6px; left:50%;
  transform:translateX(-50%);
  padding:2px 7px;
  border:1.5px solid #fff;
  border-radius:999px;
  font-family:var(--font-head);
  font-size:9px;
  color:#3a260d;
  background:linear-gradient(180deg, var(--gold-hi), var(--gold-dk));
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}

.hb-screen{ display:flex; flex-direction:column; }

.hb-arena{
  position:relative;
  width:100%;
  margin:0 0 16px;
}

.hb-arena-top{
  position:absolute;
  top:85px; left:8px; right:8px;
  z-index:45;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  pointer-events:none;
}

.hb-wave-pill{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  height:32px;
  min-width:92px;
  padding:0 12px 0 34px;
  background:url(images/ui/bar_wave.png) no-repeat center / 100% 100%;
  font-family:var(--font-head);
  font-size:12px;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
#hb-wave-num{ line-height:1; }
.hb-wave-track{
  position:relative;
  width:min(320px, 88%);
  height:9px;
  border-radius:999px;
  background:#05080f;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.9);
}
.hb-wave-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg, #c0392e, #e0483c 55%, #ff8a72);
  transition:width .35s ease;
}
.hb-wave-marker{
  position:absolute;
  top:50%;
  left:0%;
  width:9px; height:9px;
  transform:translate(-50%,-50%) rotate(45deg);
  border-radius:2px;
  background:var(--gold-hi);
  transition:left .35s ease;
}

.bf-stage{ display:block; }

.bf-field{
  position:relative;
  width:100%;
  height:400px;
  aspect-ratio:var(--bf-aspect, 1.45);
  overflow:hidden;
}

.bf-bg{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  pointer-events:none;
}

.bf-haze{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(6,10,18,.72) 0%, rgba(6,10,18,.28) 12%, transparent 26%);
}

.bf-vignette{
  position:absolute;
  inset:0;
  z-index:40;
  pointer-events:none;
  box-shadow:inset 0 0 40px rgba(0,0,0,.45), inset 0 -16px 26px rgba(0,0,0,.4);
}

.bf-field--hit{ animation:bfFieldHit .22s ease; }
@keyframes bfFieldHit{
  0%,100%{ filter:none; transform:translate(0,0); }
  35%{ filter:brightness(1.3) saturate(1.25); transform:translate(-2px,1px); }
  70%{ transform:translate(2px,-1px); }
}

.bf-wall-tube{
  position:absolute;
  z-index:3;
  min-width:7px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  border-radius:999px;
  background:rgb(15 18 25);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.6);
}
.bf-wall-fill{
  width:100%; height:100%;
  border-radius:999px;
  background:linear-gradient(180deg, #b8ef64, #4e9e24);
  transition:height .25s ease;
}
.bf-wall-fill--low{
  background:linear-gradient(180deg, #ff8a72, #c52e25);
  animation:bfWallLow .8s ease-in-out infinite;
}
.bf-wall-fill--instant{ transition:none !important; }
@keyframes bfWallLow{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.35); } }

.bf-cats-layer,
.bf-zombies-layer{ position:absolute; inset:0; z-index:4; }
.bf-chips-layer{ position:absolute; inset:0; z-index:12; pointer-events:none; }
.bf-fx-layer{ position:absolute; inset:0; z-index:30; pointer-events:none; }

.bf-shadow{
  position:absolute;
  left:50%; bottom:1%;
  width:62%; height:9%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(0,0,0,.55), transparent 78%);
  pointer-events:none;
}
.bf-shadow--cat{ width:52%; height:8%; bottom:3%; }

.bf-chip{
  position:absolute;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.bf-chip-badge{ position:relative; width:100%; aspect-ratio:1; }
.bf-chip-rarity{
  width:100%; height:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.65));
}
.bf-chip-level{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-size:12px;
  font-weight:800;
  line-height:1;
  color:#fff;
  -webkit-text-stroke:.5px rgba(0,0,0,.8);
  text-shadow:0 1px 2px rgba(0,0,0,.9);
}

.bf-chip--pop{ animation:bfChipPop .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes bfChipPop{
  0%{ transform:translateY(-50%) scale(1); }
  45%{ transform:translateY(-50%) scale(1.24); }
  100%{ transform:translateY(-50%) scale(1); }
}

.bf-cat{
  position:absolute;
  animation:bfCatIdle 2.6s ease-in-out infinite;
  animation-delay:var(--bob-delay, 0s);
}
.bf-cat-sprite{
  position:relative;
  width:100%; height:100%;
  object-fit:contain;
  object-position:bottom center;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.5));
  transition:filter .1s ease, transform .08s ease;
}
.bf-cat--firing .bf-cat-sprite{
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(255,214,86,.9));
  transform:translateX(-2px);
}

@keyframes bfCatIdle{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-1.5%); }
}

.bf-muzzle{
  position:absolute;
  width:26%; height:26%;
  transform:translate(-30%,-50%) scale(0);
  border-radius:50%;
  background:radial-gradient(circle, #fffbe6 0%, #ffd75e 40%, rgba(255,150,40,0) 72%);
  opacity:0;
  pointer-events:none;
}
.bf-muzzle--on{ animation:bfMuzzle .13s ease-out; }
.bf-muzzle--crit{ background:radial-gradient(circle, #ffffff 0%, #ffe07a 38%, rgba(255,110,40,0) 74%); }
@keyframes bfMuzzle{
  0%{ opacity:1; transform:translate(-30%,-50%) scale(.35); }
  100%{ opacity:0; transform:translate(-30%,-50%) scale(1.3); }
}

.bf-zombie{
  position:absolute;
  transform:translateX(-50%);
  transform-origin:bottom center;
  will-change:left;
}
.bf-zombie-sprite{
  width:100%; height:100%;
  object-fit:contain;
  object-position:bottom center;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.5));
}
.bf-zombie--attacking{ animation:bfZombieLunge .25s ease-in-out; }
@keyframes bfZombieLunge{
  0%,100%{ transform:translateX(-50%) scale(1); }
  50%{ transform:translateX(-56%) scale(1.05); }
}
.bf-zombie--hurt .bf-zombie-sprite{ animation:bfZombieHurt .16s ease-out; }
@keyframes bfZombieHurt{
  0%{ filter:drop-shadow(0 5px 5px rgba(0,0,0,.5)) brightness(2.4) saturate(0); }
  100%{ filter:drop-shadow(0 5px 5px rgba(0,0,0,.5)) brightness(1) saturate(1); }
}
.bf-zombie--gone{ opacity:0; transform:translateX(-50%) translateY(6px); transition:opacity .3s ease, transform .3s ease; }

.bf-hpbar{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  height:5px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.3);
  border-radius:999px;
  background:#08101a;
  z-index:5;
}
.bf-hpbar-fill{
  height:100%;
  width:100%;
  border-radius:999px;
  background:linear-gradient(90deg, #ff796a, #c52e25);
  transition:width .15s ease;
}
.bf-hpbar-fill--low{ background:linear-gradient(90deg, #ffb15c, #c52e25); }

.bf-projectile{
  position:absolute;
  width:16px; height:4px;
  border-radius:2px;
  transform-origin:left center;
  background:linear-gradient(90deg, rgba(255,240,150,0), #fff6b0 42%, #ffd54e 100%);
  box-shadow:0 0 8px 2px rgba(255,214,78,.85);
}
.bf-projectile--crit{
  height:5px;
  background:linear-gradient(90deg, rgba(255,255,255,0), #ffffff 40%, #ffb43c 100%);
  box-shadow:0 0 12px 3px rgba(255,180,60,.9);
}

.bf-impact{
  position:absolute;
  width:22px; height:22px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,213,78,.6) 45%, transparent 70%);
}
.bf-impact--crit{ width:32px; height:32px; }

.bf-dmg-popup{
  position:absolute;
  font-family:var(--font-head);
  font-size:14px;
  font-weight:800;
  color:#fff0a7;
  -webkit-text-stroke:.4px #61200f;
  text-shadow:0 2px 4px rgba(0,0,0,.85);
  white-space:nowrap;
  pointer-events:none;
}
.bf-dmg-popup--crit{
  font-size:19px;
  color:#ffe178;
  -webkit-text-stroke:.6px #5d3a10;
  text-shadow:0 0 10px rgba(242,193,90,.85), 0 2px 4px rgba(0,0,0,.8);
}

.hb-cta{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:60;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:6px 16px 6px 30px;
  border:0;
  border-radius:14px;
  background:url(images/ui/btn_bg_green.png) no-repeat center / 100% 100%;
  cursor:pointer;
  transition:transform .1s ease, filter .12s ease;
}
.hb-cta:active{ transform:translateY(2px); }
.hb-cta:disabled{ cursor:default; }

.hb-cta--ready{ background-image:url(images/ui/btn_bg_green.png); }
.hb-cta--repair{ background-image:url(images/ui/btn_bg_orange.png); }
.hb-cta--disabled{ background-image:url(images/ui/btn_bg_gray.png); }

.hb-cta-icon{
  position:absolute;
  left:-14px;
  top:50%;
  transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  flex-shrink:0;
  pointer-events:none;
}
.hb-cta-icon img{
  width:100%; height:100%;
  object-fit:contain;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.55));
}

.hb-cta-text{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.2; }
.hb-cta-label{
  font-family:var(--font-head);
  font-size:13px;
  font-weight:800;
  letter-spacing:.2px;
  color:#1c2233;
  white-space:nowrap;
}
.hb-cta-sub{
  display:flex; align-items:center; gap:4px;
  font-family:var(--font-head);
  font-size:12px;
  font-weight:800;
  color:#1c2233;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.hb-cta-gold{ width:13px; height:13px; }

.hb-cta--disabled .hb-cta-label,
.hb-cta--disabled .hb-cta-sub{ color:#5b6272; }

.hb-panel{
  margin:0 var(--gutter);
  padding:12px 10px 11px;
  border:1.5px solid var(--edge-soft);
  border-radius:var(--r-l);
  background:var(--surface-1);
  box-shadow:none;
}

.hb-boost-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:9px;
  margin:6px 0 15px;
}

.hb-boost-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:15px 5px 6px;
  border:2.5px solid var(--card-edge);
  border-radius:16px;
  background:linear-gradient(180deg, var(--card-a), var(--card-b));
  box-shadow:0 4px 0 var(--card-shadow), inset 0 2px 0 rgba(255,255,255,.32);
}

.hb-boost-card--common{    --card-a:#b1a690; --card-b:#8a7a63; --card-edge:#4a3b2a; --card-shadow:#2e2419; }
.hb-boost-card--rare{      --card-a:#6fabec; --card-b:#2f7fd6; --card-edge:#1a3a63; --card-shadow:#0f2540; }
.hb-boost-card--epic{      --card-a:#5cd2bb; --card-b:#1fae94; --card-edge:#0d4f43; --card-shadow:#073830; }
.hb-boost-card--legendary{ --card-a:#ffcf74; --card-b:#f6b23e; --card-edge:#8a5c1c; --card-shadow:#5c3c10; }
.hb-boost-card--mythic{    --card-a:#ff6f63; --card-b:#e0342a; --card-edge:#7a1f18; --card-shadow:#4a100c; }
.hb-boost-card--empty{     --card-a:#4a504a; --card-b:#3b403b; --card-edge:#2a2e2a; --card-shadow:#1b1e1b; }

.hb-boost-card--mythic{
  animation:hbMythicGlow 2.4s ease-in-out infinite;
}
@keyframes hbMythicGlow{
  0%,100%{ box-shadow:0 4px 0 var(--card-shadow), inset 0 2px 0 rgba(255,255,255,.32), 0 0 10px -2px rgba(224,52,42,.7); }
  50%    { box-shadow:0 4px 0 var(--card-shadow), inset 0 2px 0 rgba(255,255,255,.32), 0 0 20px 1px rgba(224,52,42,.95); }
}

.hb-boost-rank{
  position:absolute;
  top:-9px; left:50%;
  transform:translateX(-50%);
  z-index:4;
  padding:2px 8px;
  border:2px solid var(--card-edge);
  border-radius:999px;
  font-family:var(--font-head);
  font-size:7.5px;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
  white-space:nowrap;
  color:#fff;
  background:var(--card-shadow);
  text-shadow:0 1px 0 rgba(0,0,0,.6);
  box-shadow:0 2px 0 rgba(0,0,0,.35);
}

.hb-boost-art{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  aspect-ratio:1;
  border:2px solid var(--card-edge);
  border-radius:12px;
  background:rgba(0,0,0,.2);
  box-shadow:inset 0 3px 5px rgba(0,0,0,.4);
}
.hb-boost-art img{
  width:80%; height:80%;
  object-fit:contain;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.5));
}

.hb-boost-add{
  display:flex; align-items:center; justify-content:center;
  width:70%; height:70%;
  border:2.5px dashed rgba(255,255,255,.25);
  border-radius:12px;
  font-family:var(--font-head);
  font-size:24px;
  font-weight:800;
  line-height:1;
  color:rgba(255,255,255,.35);
}

.hb-boost-wave{
  position:absolute;
  right:-7px; bottom:-7px;
  z-index:3;
  display:flex; align-items:center; justify-content:center;
  min-width:23px; height:19px;
  padding:0 5px;
  border:2px solid #fff;
  border-radius:999px;
  font-family:var(--font-head);
  font-size:9px;
  font-weight:800;
  line-height:1;
  color:#fff;
  background:var(--card-shadow);
  box-shadow:0 2px 0 rgba(0,0,0,.4);
  font-variant-numeric:tabular-nums;
}

.hb-boost-stat{
  display:flex; align-items:center; justify-content:center; gap:3px;
  width:100%;
  margin-top:7px;
  padding:3px 5px;
  border-radius:999px;
  background:var(--card-shadow);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);
}
.hb-boost-stat-icon{ font-size:10px; line-height:1; }
.hb-boost-stat-val{
  font-family:var(--font-head);
  font-size:14px;
  font-weight:800;
  line-height:1.15;
  color:#fff6e0;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
  font-variant-numeric:tabular-nums;
}
.hb-boost-card--empty .hb-boost-stat-val{ color:#7b837b; }

.hb-boost-hint{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
}
.hb-boost-hint i{
  width:7px; height:7px;
  transform:rotate(45deg);
  border-radius:1px;
  background:var(--gold);
  opacity:.7;
}

@media (max-width:390px){
  .hb-boost-row{ gap:7px; }
  .hb-boost-card{ padding:13px 3px 5px; }
  .hb-boost-rank{ font-size:7px; padding:2px 6px; }
  .hb-boost-stat-val{ font-size:12.5px; }
  .hb-boost-wave{ min-width:20px; height:17px; font-size:8px; }
}

.hb-quick-panel{
  margin:0 var(--gutter) 16px;
}
.hb-quick-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:9px;
}
.hb-quick-btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:8px 14px;
  border:0;
  border-radius:14px;
  background:url(images/ui/btn_bg_orange.png) no-repeat center / 100% 100%;
  cursor:pointer;
  transition:transform .1s ease, filter .12s ease;
}
.hb-quick-btn:active{ transform:translateY(2px); }

.hb-quick-icon{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  flex-shrink:0;
  pointer-events:none;
}
.hb-quick-icon img{
  width:100%; height:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));
}

.hb-quick-label{
  flex:1;
  font-family:var(--font-head);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:#3d2405;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.screen-hero{ padding:6px 6px 16px; text-align:center; }

.screen-crest{
  width:70px; height:70px;
  margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
  font-size:30px;
  border:0;
  border-radius:50%;
  background:linear-gradient(160deg, #ffd86f, #b8801f);
  box-shadow:0 0 0 3px #16203000, 0 6px 14px rgba(0,0,0,.5);
}
.screen-crest img{ width:78%; }

.screen-hero-title{
  font-family:var(--font-head);
  font-size:17px;
  font-weight:800;
  color:var(--gold-hi);
  margin-bottom:4px;
}
.screen-hero-sub{
  max-width:270px;
  margin:0 auto;
  font-size:11px;
  font-weight:600;
  line-height:1.45;
  color:var(--muted);
}

.screen-hero-icon{
    height: 40%;
    display: block;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .5));
    transform: translateY(-20%);
}
.screen-hero-ribbon{
  position:relative;
  width:min(280px, 92%);
  aspect-ratio:490/148;
  margin:0 auto;
  background:url(images/ui/title_ribbon.png) no-repeat center / 100% 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.screen-hero-ribbon span{
  font-family:var(--font-head);
  font-size:15px;
  font-weight:800;
  letter-spacing:.3px;
  color:#fff3e0;
  text-shadow:0 2px 0 rgba(0,0,0,.35);
  text-align:center;
  transform: translateY(-20%);
}

.screen-divider{
  height:1px;
  margin:16px 4px 18px;
  background:linear-gradient(90deg, transparent, rgba(242,193,90,.45), transparent);
}

.screen-section-label{
  margin:0 2px 8px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.4px;
  color:var(--muted);
}

.screen-stats{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:16px; }

.screen-card,
.screen-stat-card,
.building-card,
.task-card,
.cats-header,
.cat-slot,
.pvp-vs-card{
  position:relative;
  border:1.5px solid var(--edge-soft);
  border-radius:var(--r-l);
  background:var(--surface-1);
  box-shadow:none;
}

.screen-stat-card{ padding:13px 10px 12px; text-align:center; }
.screen-stat-icon{ font-size:18px; margin-bottom:4px; }
.screen-stat-icon img{ height:20px; }
.screen-stat-value{ font-family:var(--font-head); font-size:19px; font-weight:800; color:#fff; }
.screen-stat-value--accent{ color:var(--gold-hi); }
.screen-stat-label{ margin-top:3px; font-size:9px; font-weight:700; letter-spacing:.3px; color:var(--faint); }

.screen-card{ padding:14px; margin-bottom:14px; }
.screen-card-label{ margin-bottom:8px; font-size:10px; font-weight:800; color:var(--muted); }
.screen-card-badge-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.screen-card-badge-row .screen-card-label{ margin-bottom:0; }

.screen-card--gold, .screen-card--green, .screen-card--blue, .screen-card--purple,
.task-card--gold, .task-card--green, .task-card--blue{
  overflow:hidden;
}
.screen-card--gold, .task-card--gold{ --accent:var(--gold); }
.screen-card--green, .task-card--green{ --accent:var(--green); }
.screen-card--blue, .task-card--blue{ --accent:var(--blue); }
.screen-card--purple{ --accent:var(--purple); }
.screen-card--gold::before, .screen-card--green::before, .screen-card--blue::before, .screen-card--purple::before,
.task-card--gold::before, .task-card--green::before, .task-card--blue::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:4px;
  background:var(--accent);
  border-radius:var(--r-l) 0 0 var(--r-l);
}
.screen-card--gold, .screen-card--green, .screen-card--blue, .screen-card--purple{ padding-left:17px; }
.task-card--gold, .task-card--green, .task-card--blue{ padding-left:18px; }

.screen-row{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px;
  margin-bottom:8px;
  border:1.5px solid var(--edge);
  border-radius:14px;
  background:var(--surface-2);
}
.screen-row-info{ flex:1; min-width:0; }
.screen-row-name{
  margin-bottom:2px;
  font-family:var(--font-head);
  font-size:13px;
  font-weight:700;
  color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.screen-row-level{ font-size:9px; font-weight:700; letter-spacing:.3px; color:var(--muted); }

.screen-row-value{
  flex-shrink:0;
  display:flex; align-items:center; gap:5px;
  font-family:var(--font-head);
  font-size:13px;
  color:var(--gold-hi);
  white-space:nowrap;
}
.screen-row-value img{ width:14px; height:14px; }
.screen-row-value--ton{ color:var(--blue-hi); }

.screen-copy-row{ display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.screen-copy-text{
  position:relative;
  flex:1; min-width:0;
  padding:11px 38px 11px 11px;
  border:1.5px solid var(--edge);
  border-radius:12px;
  font-size:11px;
  color:#dbe4ed;
  background:var(--sunk);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.screen-copy-text--mono{ font-family:'Courier New', monospace; font-weight:800; }

.screen-copy-btn{
  position:absolute;
  right:6px; top:50%;
  transform:translateY(-50%);
  width:26px; height:26px;
  padding:0;
  border:1px solid var(--edge-hi);
  border-radius:8px;
  font-size:11px;
  color:#c3cddb;
  background:var(--surface-3);
  cursor:pointer;
}
.screen-copy-btn:active{ transform:translateY(-50%) scale(.92); }

.screen-copy-action{
  flex-shrink:0;
  width:108px;
  aspect-ratio:240/119;
  padding:0 6px;
  border:0;
  background-repeat:no-repeat; background-position:center; background-size:100% 100%;
  font-family:var(--font-head);
  font-size:9.5px;
  line-height:1.15;
  letter-spacing:.2px;
  text-transform:uppercase;
  text-align:center;
  cursor:pointer;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  box-shadow: none;
  background-color: transparent;
}
.screen-copy-action--green{ background-image:url(images/ui/btn_bg_green.png); color:#1d3306; }
.screen-copy-action--orange{ background-image:url(images/ui/btn_bg_orange.png); color:#3d2405; }
.screen-copy-action--gray{ background-image:url(images/ui/btn_bg_gray.png); color:#3a4048; }
.screen-copy-action:active{ transform:translateY(2px); }

.screen-tabs{ display:flex; gap:6px; margin-bottom:10px; }
.screen-tab{
  flex:1;
  padding:10px 4px;
  border:1.5px solid var(--edge);
  border-radius:12px;
  font-family:var(--font-head);
  font-size:11px;
  color:var(--muted);
  background:var(--surface-2);
  box-shadow:none;
  cursor:pointer;
}
.screen-tab.active{
  border-color:#f0c45d;
  color:#3a260d;
  background:linear-gradient(180deg, #ffd86f, #d99a2e);
}

.screen-loading,
.screen-empty,
.screen-error{ padding:30px 10px; text-align:center; font-size:11px; font-weight:700; color:var(--muted); }
.screen-error{ color:var(--red-hi); }

.popup{
  position:fixed;
  inset:0;
  z-index:1500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(3,6,12,.8);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.popup-box{
  position:relative;
  width:min(420px, 92%);
  max-height:min(82vh, 680px);
  padding:24px 18px 18px;
  overflow:auto;
  border:1.5px solid var(--edge-hi);
  border-radius:20px;
  text-align:center;
  background:var(--surface-1);
  box-shadow:0 18px 40px rgba(0,0,0,.7);
  animation:popupIn .28s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes popupIn{
  0%{ transform:scale(.88); opacity:0; }
  100%{ transform:scale(1); opacity:1; }
}
.popup-box::before{ content:none; }

.popup-text{
  margin-bottom:16px;
  font-family:var(--font-head);
  font-size:14px;
  line-height:1.6;
  color:#f2f6fa;
}
.popup-text img{ height:15px; vertical-align:middle; margin-left:3px; }
.popup-actions{ display:flex; gap:10px; }
.popup-actions .btn{ margin:0; }

.popup-close-btn{
  position:absolute;
  top:8px; right:8px;
  width:28px; height:28px;
  z-index:10;
  padding:0;
  border:1.5px solid var(--edge-hi);
  border-radius:50%;
  font-size:13px;
  line-height:1;
  color:#fff;
  background:var(--surface-3);
  cursor:pointer;
}
.popup-close-btn:hover{ background:var(--red); border-color:var(--red-dk); }

.popup, .loading-overlay{
  left:50%; right:auto;
  transform:translateX(-50%);
  width:100%; max-width:480px;
}

.wr-flash{
  position:fixed;
  left:50%;
  width:min(480px, 100%);
  transform:translateX(-50%);
  z-index:400;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  animation:wrFlashIn .45s cubic-bezier(.2,.9,.3,1.5);
}
.wr-flash--out{
  opacity:0;
  transform:translateX(-50%) scale(.94);
  transition:opacity .4s ease, transform .4s ease;
}

@keyframes wrFlashIn{
  0%  { opacity:0; transform:translateX(-50%) scale(.6); }
  60% { opacity:1; transform:translateX(-50%) scale(1.06); }
  100%{ opacity:1; transform:translateX(-50%) scale(1); }
}

.wr-flash-inner{
  position:relative;
  width:88%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.wr-flash-banner{
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.65));
}

.wr-flash-pill{
  position:absolute;
  left:50%;
  bottom:-6%;
  width:52%;
  transform:translateX(-50%);
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.6));
  animation:wrPillIn .4s .28s backwards cubic-bezier(.2,.9,.3,1.6);
}
.wr-flash-pill img{
  width:100%;
  height:auto;
  display:block;
}
.wr-flash-pill span{
  position:absolute;
  inset:0;
  padding-left:16%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-head);
  font-size:19px;
  font-weight:800;
  color:#fff;
  text-shadow:0 2px 3px rgba(0,0,0,.75);
  font-variant-numeric:tabular-nums;
}

@keyframes wrPillIn{
  0%  { opacity:0; transform:translateX(-50%) translateY(10px) scale(.7); }
  100%{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
}

.wr-flash--win .wr-flash-pill{ bottom:2%; width:46%; }

@media (max-width:390px){
  .wr-flash-pill span{ font-size:16px; }
}

.loading-overlay{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(3,7,12,.8);
  backdrop-filter:blur(5px);
}
.loading-box{
  min-width:180px;
  padding:22px 20px;
  text-align:center;
  border:1.5px solid var(--edge-hi);
  border-radius:16px;
  background:var(--surface-1);
  box-shadow:0 16px 32px rgba(0,0,0,.6);
}
.loading-spinner{
  width:38px; height:38px;
  margin:0 auto 12px;
  border:4px solid #222c40;
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading-text{ font-family:var(--font-head); font-size:13px; color:#e7edf1; }

.reward-toast{
  position:fixed;
  left:50%; top:40%;
  z-index:500;
  display:flex; align-items:center; gap:6px;
  padding:10px 20px;
  transform:translate(-50%, 10px);
  border:1.5px solid #f0c45d;
  border-radius:999px;
  font-family:var(--font-head);
  font-size:18px;
  color:#3a260d;
  background:linear-gradient(180deg, #ffd86f, #d99a2e);
  box-shadow:0 8px 24px rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
.reward-toast img{ width:18px; height:18px; }
.reward-toast--in{ opacity:1; transform:translate(-50%, 0); }

.cats-header{ display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:14px; }
.cats-header-icon{
  flex-shrink:0;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  border-radius:50%;
  background:linear-gradient(160deg, #ffd86f, #c98a29);
}
.cats-header-text{ flex:1; min-width:0; }
.cats-header-title{ font-family:var(--font-head); font-size:15px; color:#fff; margin-bottom:2px; }
.cats-header-sub{ font-size:10px; font-weight:600; line-height:1.35; color:var(--muted); }
.cats-header-count{
  flex-shrink:0;
  padding:6px 11px;
  border:1.5px solid rgba(242,193,90,.4);
  border-radius:999px;
  font-family:var(--font-head);
  font-size:13px;
  color:var(--gold-hi);
  background:rgba(242,193,90,.1);
  white-space:nowrap;
}

.cats-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
.cats-grid > *{ min-width:0; }

.cat-slot{
  position:relative;
  width:100%;
  aspect-ratio:372/114;
  display:flex;
  align-items:center;
  padding:6% 8px 6% 42%;
  border-radius:14px;
  cursor:pointer;
  overflow:visible;
  transition:transform .1s ease;
  border:2px solid var(--card-edge, #a9895a);
  background:linear-gradient(180deg, var(--card-a, #f4e4c6), var(--card-b, #e0c795));
  box-shadow:0 3px 0 var(--card-shadow, #7c5e34), inset 0 1px 0 rgba(255,255,255,.35);
}
.cat-slot:active{ transform:translateY(2px); }

.cat-slot--common{    --card-a:#b1a690; --card-b:#8a7a63; --card-edge:#4a3b2a; --card-shadow:#2e2419; }
.cat-slot--rare{      --card-a:#6fabec; --card-b:#2f7fd6; --card-edge:#1a3a63; --card-shadow:#0f2540; }
.cat-slot--epic{      --card-a:#5cd2bb; --card-b:#1fae94; --card-edge:#0d4f43; --card-shadow:#073830; }
.cat-slot--legendary{ --card-a:#ffcf74; --card-b:#f6b23e; --card-edge:#8a5c1c; --card-shadow:#5c3c10; }
.cat-slot--mythic{    --card-a:#ff6f63; --card-b:#e0342a; --card-edge:#7a1f18; --card-shadow:#4a100c; }

.cat-slot--selected{
  border-color:var(--gold-hi);
  box-shadow:0 3px 0 var(--card-shadow, #7c5e34), 0 0 0 2px rgba(255,217,121,.55), 0 0 14px rgba(255,217,121,.4);
}
.cat-slot-select-arrow{
  position:absolute;
  left:-10px; top:50%;
  transform:translateY(-50%);
  z-index:3;
  font-size:14px;
  color:var(--gold-hi);
  filter:drop-shadow(0 0 3px rgba(0,0,0,.5));
}

.cat-slot--locked-img{ display:block; width:100%; height:auto; cursor:default; }
.cat-slot-portrait{
  position:absolute;
  left:-4%;
  bottom:-8%;
  width:48%;
  aspect-ratio:1;
  z-index:2;
  pointer-events:none;
}
.cat-slot-portrait img{
  width:100%; height:100%;
  object-fit:contain;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.45));
}

.cat-slot-mid{ flex:1; min-width:0; }
.cat-slot-level{
  margin-bottom:4px;
  font-family:var(--font-head);
  font-size:clamp(10px, 3.2vw, 13px);
  font-weight:800;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.cat-slot-bar-img{ display:block; width:92%; height:auto; }

.cat-slot-action{
  flex-shrink:0;
  width:40%;
  aspect-ratio:94/97;
  margin-left:6px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.cat-slot-action img{ width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.cat-slot-action:active{ transform:scale(.92); }
.cat-slot-action:disabled{ filter:grayscale(.7) brightness(.75); cursor:default; }
.cat-slot-action:disabled:active{ transform:none; }

.cu-name{
  font-family:var(--font-head);
  font-size:16px;
  font-weight:800;
  color:#fff;
  margin-bottom:2px;
}
.cu-sub{
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  margin-bottom:14px;
}
.cu-cost{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 20px;
  margin-bottom:6px;
  border-radius:999px;
  font-family:var(--font-head);
  font-size:18px;
  color:#3a260d;
  background:linear-gradient(180deg, #ffd86f, #d99a2e);
  box-shadow:0 3px 0 #8a5c1c;
}
.cu-cost img{ width:18px; height:18px; }

.tasks-list{ display:flex; flex-direction:column; gap:10px; }

.task-card{ display:flex; align-items:center; gap:12px; padding:12px 14px; }
.task-card--done{ opacity:.6; }

.task-card-icon{
  flex-shrink:0;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  border:1.5px solid var(--edge);
  border-radius:50%;
  background:var(--surface-2);
}
.task-card-icon img { height: 75%; }
.task-card-body{ flex:1; min-width:0; }

.task-card-tag{
  display:block;
  margin-bottom:4px;
  font-family:var(--font-head);
  font-size:8px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--accent, var(--gold-hi));
}

.task-card-title{ margin-bottom:2px; font-family:var(--font-head); font-size:13px; color:#fff; }
.task-card-desc{ margin-bottom:6px; font-size:10px; font-weight:600; line-height:1.35; color:var(--muted); }
.task-card-reward{ display:flex; align-items:center; gap:4px; font-family:var(--font-head); font-size:13px; color:var(--gold-hi); }
.task-card-reward img{ width:14px; height:14px; }

.task-card-progress-bar{ height:6px; margin-bottom:6px; overflow:hidden; border-radius:999px; background:#222c40; }
.task-card-progress-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--gold-hi), var(--gold)); transition:width .25s ease; }

.task-card-link{ display:inline-block; margin-bottom:6px; font-family:var(--font-head); font-size:10px; color:var(--gold-hi); text-decoration:none; }

.task-card-action{
  flex-shrink:0;
  width:84px;
  aspect-ratio:240/119;
  padding:0;
  border:0;
  border-radius:0;
  background-repeat:no-repeat; background-position:center; background-size:100% 100%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head);
  font-size:10.5px;
  letter-spacing:.2px;
  text-transform:uppercase;
  cursor:pointer;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  outline: none;
  box-shadow: none;
  background-color: transparent;
}
.task-card-action--claim{
  background-image:url(images/ui/btn_bg_green.png);
  color:#1d3306;
}
.task-card-action--claim:active{ transform:translateY(2px); }
.task-card-action--claim:disabled{ filter:brightness(.85); cursor:default; }
.task-card-action--claimed{
  width:auto; aspect-ratio:auto; background-image:none;
  padding:10px 12px; border-radius:12px;
  border:1.5px solid var(--green); color:var(--green-hi); background-color:rgba(95,195,87,.12); cursor:default;
}
.task-card-action--open{
  background-image:url(images/ui/btn_bg_orange.png);
  color:#3d2405;
}
.task-card-action--open:active{ transform:translateY(2px); }
.task-card-action--locked,
.task-card-action--cooldown{
  width:auto; aspect-ratio:auto; background-image:none;
  padding:10px 12px; border-radius:12px;
  border:1.5px solid var(--edge); color:var(--faint); background-color: var(--sunk); cursor:default;
  font-variant-numeric:tabular-nums;
}

.task-card-action--gray{
  background-image:url(images/ui/btn_bg_gray.png);
  color:#3a4048;
}
.task-card-action--gray:active{ transform:translateY(2px); }

.task-card-delete{
  position:absolute;
  top:-6px; right:-6px;
  z-index:2;
  width:22px; height:22px;
  border:2px solid #0e1524;
  border-radius:50%;
  font-size:10px;
  line-height:1;
  color:#fff;
  background:var(--red);
  cursor:pointer;
}
.task-card-delete:active{ transform:scale(.9); }

.ref-rates{ display:flex; gap:8px; margin-bottom:18px; }
.ref-rate-pill{
  flex:1;
  padding:11px 4px;
  text-align:center;
  border:1.5px solid var(--edge);
  border-radius:var(--r-m);
  background:var(--surface-2);
}
.ref-rate-pill-label{ font-size:9px; font-weight:700; letter-spacing:.3px; color:var(--muted); }
.ref-rate-pill-value{ margin-top:3px; font-family:var(--font-head); font-size:16px; color:var(--gold-hi); }

.ref-medal{
  flex-shrink:0;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  border:0;
  border-radius:50%;
  font-family:var(--font-head);
  font-size:11px;
  color:#fff;
}
.ref-medal--lvl1{ background:linear-gradient(180deg, #ffd86f, #c98a29); color:#3a260d; }
.ref-medal--lvl2{ background:linear-gradient(180deg, #b9c6d4, #6c7d8f); color:#1d2833; }
.ref-medal--lvl3{ background:linear-gradient(180deg, #cd9a6a, #7d4f2c); }

input, select, textarea{
  border:1.5px solid var(--edge);
  border-radius:12px;
  font-family:var(--font-ui);
  font-weight:800;
  color:#fff;
  background:var(--sunk);
  box-shadow:none;
}

.exchange-input{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  margin-bottom:10px;
  font-size:14px;
}
input::placeholder, textarea::placeholder{ color:#5f6b7d; font-weight:700; }
.exchange-input:focus{ outline:none; border-color:var(--gold); }

.exch-input-group{ position:relative; margin-bottom:10px; }
.exch-input-group .exchange-input{ padding-left:40px; margin-bottom:0; }
.exch-input-icon{
  position:absolute;
  left:13px; top:50%;
  width:18px; height:18px;
  transform:translateY(-50%);
  pointer-events:none;
}
.exch-input-icon img{ width:100%; height:100%; display:block; }
.exch-input-suffix{
  position:absolute;
  right:14px; top:50%;
  transform:translateY(-50%);
  font-size:10px; font-weight:900;
  color:var(--muted);
  pointer-events:none;
}

.exch-input-row{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.exch-input-row .exchange-input{ margin-bottom:0; }
.exch-input-row .exch-input-group{ flex:1; min-width:0; margin-bottom:0; }

.exchange-breakdown{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.exchange-breakdown-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 11px;
  border:1.5px solid var(--edge-soft);
  border-radius:12px;
  background:var(--surface-2);
}
.exchange-breakdown-row span:first-child{ font-size:10px; font-weight:700; color:var(--muted); }
.exchange-breakdown-row span:last-child{ font-family:var(--font-head); font-size:13px; color:#fff; }
.exchange-breakdown-row--highlight span:last-child{ color:var(--gold-hi); }

.exchange-badge{
  display:flex; align-items:center; gap:5px;
  padding:3px 9px;
  border-radius:999px;
  font-size:9px; font-weight:900; letter-spacing:.3px;
  text-transform:uppercase;
}
.exchange-badge--on{ background:rgba(95,195,87,.14); color:var(--green-hi); }
.exchange-badge--on::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--green); }
.exchange-badge--off{ background:rgba(224,72,60,.12); color:var(--red-hi); }
.exchange-badge--off::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--red); }

.exch-hist-icon{
  flex-shrink:0;
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border:0;
  border-radius:50%;
  font-size:12px;
}
.exch-hist-icon--in{ background:linear-gradient(180deg, var(--green-hi), var(--green)); color:#0d2a12; }
.exch-hist-icon--out{ background:linear-gradient(180deg, #ffd86f, #c98a29); color:#3a260d; }

.exch-warn-box{
  display:flex; align-items:flex-start; gap:8px;
  padding:10px 12px; margin-bottom:10px;
  border:1.5px solid rgba(232,91,80,.35);
  border-radius:12px;
  background:rgba(217,71,62,.08);
}
.exch-warn-box span:first-child{ font-size:14px; flex-shrink:0; }
.exch-warn-box span:last-child{ font-size:10px; font-weight:600; line-height:1.4; color:#ffb3aa; }

.exch-watch{ padding:14px 8px 6px; text-align:center; }
.exch-spinner{
  width:34px; height:34px;
  margin:0 auto 12px;
  border:3px solid #222c40;
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
.exch-watch-title{ margin-bottom:4px; font-family:var(--font-head); font-size:13px; color:var(--gold-hi); }
.exch-watch-sub{ max-width:240px; margin:0 auto 8px; font-size:10px; font-weight:600; line-height:1.4; color:var(--muted); }
.exch-watch-timer{ font-size:11px; font-weight:900; color:var(--muted); }
.exch-watch-step{ margin-bottom:4px; font-size:10px; font-weight:900; letter-spacing:.3px; text-transform:uppercase; color:var(--gold-hi); }
.exch-breakdown-icon{ width:13px; height:13px; vertical-align:-2px; margin-right:4px; }

.building-card{ display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:10px; }
.building-card-icon{ width:60px; height:60px; flex-shrink:0; object-fit:contain; filter:drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.building-card-body{ flex:1; min-width:0; }
.building-card-title{ margin-bottom:4px; font-family:var(--font-head); font-size:13px; color:var(--gold-hi); }
.building-card-meta{ display:flex; align-items:center; gap:8px; font-size:10px; color:var(--muted); }
.building-card-meta img{ height:12px; }

.popup-box--picker{ width:min(460px, 95%); }
.bpicker-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; }
.bpicker-card{ position:relative; width:100%; aspect-ratio:240/311; border-radius:14px; cursor:pointer; filter:drop-shadow(0 6px 8px rgba(0,0,0,.4)); transition:transform .12s ease; }
.bpicker-card:active{ transform:scale(.95); }
.bpicker-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; border-radius:14px; pointer-events:none; }
.bpicker-card--rare{ filter:drop-shadow(0 0 8px rgba(242,193,90,.5)); }
.bpicker-card--epic{ filter:drop-shadow(0 0 8px rgba(149,103,201,.5)); }
.bpicker-card--legendary{ animation:legendaryPulse 2.2s ease-in-out infinite; }
@keyframes legendaryPulse{
  0%,100%{ filter:drop-shadow(0 0 7px rgba(245,197,66,.5)); }
  50%{ filter:drop-shadow(0 0 16px rgba(245,197,66,.9)); }
}
.bpicker-card--locked{ filter:grayscale(.85) brightness(.72) !important; animation:none !important; }
.bpicker-name{ position:absolute; left:0; right:0; top:70.5%; padding:0 12%; z-index:2; text-align:center; font-family:var(--font-head); font-size:10px; color:#3a2410; }
.bpicker-cost{ position:absolute; left:34%; right:8%; top:86.5%; height:8.5%; z-index:2; display:flex; align-items:center; justify-content:center; gap:4px; }
.bpicker-cost img{ width:11px; height:11px; }
.bpicker-cost span{ font-family:var(--font-head); font-size:11px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.bpicker-rarity-tag,
.bpicker-rarity-mini{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:8px; font-weight:900; letter-spacing:.4px; text-transform:uppercase; color:#fff; }
.bpicker-rarity-tag--rare{ background:linear-gradient(180deg, #efc864, #b87825); color:#3a260d; }
.bpicker-rarity-tag--epic{ background:linear-gradient(180deg, #b18ad9, #7047a1); }
.bpicker-rarity-tag--legendary{ background:linear-gradient(180deg, #ffe18a, #ae7723); color:#3a260d; }

.bconfirm-img{ width:84px; margin-bottom:8px; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.bconfirm-name{ margin-bottom:2px; font-family:var(--font-head); font-size:14px; color:#fff; }
.bconfirm-sub{ margin-bottom:12px; font-size:9px; letter-spacing:.3px; color:var(--muted); }
.bstat-row{
  display:flex; align-items:center; gap:8px;
  padding:9px 10px; margin-bottom:6px;
  border:1.5px solid var(--edge-soft);
  border-radius:12px;
  background:var(--surface-2);
  text-align:left;
}
.bstat-row img{ width:18px; height:18px; }
.bstat-label{ flex:1; font-size:9px; letter-spacing:.3px; color:var(--muted); }
.bstat-value{ display:flex; align-items:center; gap:4px; font-family:var(--font-head); font-size:13px; color:#fff; }
.bstat-arrow{ color:var(--green); font-size:11px; }
.bstat-value-next{ color:var(--green-hi); }
.bconfirm-minor{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:10px 0 12px; }
.bconfirm-minor-stat{ padding:7px 4px; border:1.5px solid var(--edge-soft); border-radius:12px; background:var(--surface-2); text-align:center; }
.bconfirm-minor-label{ font-size:8px; color:var(--muted); }
.bconfirm-minor-value{ margin-top:1px; font-family:var(--font-head); font-size:11px; }
.bconfirm-desc{ margin:2px 2px 14px; font-size:10px; line-height:1.4; text-align:left; color:var(--muted); }
.bconfirm-cost-row{ display:flex; align-items:center; justify-content:center; gap:6px; margin:4px 0 14px; font-family:var(--font-head); font-size:14px; color:var(--gold-hi); }
.bconfirm-cost-row img{ width:15px; height:15px; }
.bconfirm-actions{ display:flex; gap:10px; }
.bconfirm-actions .btn{ margin:0; }

.pvp-hero-panel{ padding:18px 10px 22px; text-align:center; }
.pvp-power-ring{
  position:relative;
  width:132px; height:132px;
  margin:0 auto 10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:3px solid var(--gold);
  border-radius:50%;
  background:var(--surface-2);
}
.pvp-power-value{ font-family:var(--font-head); font-size:27px; color:var(--gold-hi); line-height:1; }
.pvp-power-label{ margin-top:3px; font-size:9px; letter-spacing:1px; color:var(--muted); }
.pvp-rank-pill{
  display:inline-block; margin-bottom:12px; padding:6px 16px;
  border-radius:999px;
  font-family:var(--font-head); font-size:11px; color:#3a260d;
  background:linear-gradient(180deg, #ffd86f, #d99a2e);
}
.pvp-stats-row{ display:flex; justify-content:center; gap:10px; }
.pvp-stat-chip{
  display:flex; align-items:center; gap:5px;
  padding:7px 14px;
  border:1.5px solid var(--edge);
  border-radius:999px;
  font-family:var(--font-head); font-size:13px;
  background:var(--surface-2);
}
.pvp-stat-chip--atk{ color:var(--red-hi); }
.pvp-stat-chip--def{ color:var(--green-hi); }
.pvp-roster-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:8px; }
.pvp-roster-item{
  position:relative;
  aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border:1.5px solid var(--edge);
  border-radius:16px;
  background:var(--surface-2);
}
.pvp-roster-item--rare{ border-color:var(--rar-rare); }
.pvp-roster-item--epic{ border-color:var(--rar-epic); }
.pvp-roster-item--legendary{ border-color:var(--rar-legendary); }
.pvp-roster-empty{ grid-column:1/-1; padding:14px 10px; text-align:center; font-size:10px; color:var(--muted); }
.pvp-roster-title{ margin:4px 2px 8px; font-family:var(--font-head); font-size:11px; letter-spacing:.4px; color:var(--muted); }
.pvp-cta-btn{ min-height:52px; font-size:15px; }
.pvp-vs-wrap{ display:flex; align-items:center; justify-content:center; gap:14px; padding-top:50px; }
.pvp-vs-card{ width:130px; padding:16px 10px; text-align:center; }
.pvp-vs-card--enemy{ border-color:var(--red-dk); }
.pvp-vs-avatar{ font-size:30px; margin-bottom:6px; }
.pvp-vs-tag{ font-size:9px; letter-spacing:.4px; color:var(--muted); }
.pvp-vs-name{ margin:4px 0; font-family:var(--font-head); font-size:12px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pvp-vs-power{ font-family:var(--font-head); font-size:17px; color:var(--gold-hi); }
.pvp-vs-card--enemy .pvp-vs-power{ color:var(--red-hi); }
.pvp-result-banner{ margin-bottom:4px; font-family:var(--font-head); font-size:21px; }
.pvp-result-banner--win{ color:var(--gold-hi); }
.pvp-result-banner--lose{ color:var(--red-hi); }
.pvp-result-sub{ margin-bottom:16px; font-size:10px; color:var(--muted); }
.pvp-reward-grid{ display:flex; justify-content:center; gap:28px; margin-bottom:20px; }
.pvp-reward-item{ text-align:center; }
.pvp-reward-item img{ width:20px; height:20px; margin-bottom:4px; }
.pvp-reward-value{ font-family:var(--font-head); font-size:19px; }
.pvp-reward-value--gold{ color:var(--gold-hi); }
.pvp-reward-value--ton{ color:var(--blue-hi); }

@media (max-width:390px){
  :root{ --gutter:8px; }
  .header{ padding:8px 8px; }
  .header-avatar-wrap{ width:44px; height:44px; flex-basis:44px; }
  .header-name{ font-size:14px; max-width:104px; }
  .header-currency{ min-width:72px; height:34px; }
  .header-currency-icon,
  .header-currency-icon img,
  .header-currency > img{ width:18px; height:18px; }
  .header-currency > span:not(.hud-plus){ font-size:12px; }
  .hud-plus{ width:19px; height:19px; font-size:13px; }
  .hud-icon-button{ width:34px; height:34px; }
  .content > .panel-main:not(.hb-screen){ padding-top:90px; }
  .hb-boost-title{ font-size:12px; }
  .hb-boost-row{ gap:7px; }
  .bf-chip-level{ font-size:11px; }
  .hb-cta{ right:8px; bottom:8px; min-height:40px; padding:5px 12px 5px 26px; }
  .hb-cta-icon{ width:38px; height:38px; left:-12px; }
  .nav{ height:82px; }
  .nav-item{ height:66px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

.bf-wall-fill--repair{
  background:linear-gradient(180deg, #d8ff9a, #4e9e24);
  transition:height .28s linear;
  animation:bfWallRepair 1.2s ease-in-out infinite;
}
@keyframes bfWallRepair{
  0%,100%{ filter:brightness(1); }
  50%{ filter:brightness(1.3); }
}

.btn-art{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  width:100%;
  min-height:56px;
  margin:0;
  padding:4px 10px 8px;

  border:14px solid transparent;
  border-image-slice:34 fill;
  border-image-width:14px;
  border-image-repeat:stretch;

  background:transparent;
  appearance:none;
  -webkit-appearance:none;
  outline:none;
  box-shadow:none;

  font-family:var(--font-head);
  font-size:14px;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  line-height:1.1;
  text-align:center;

  cursor:pointer;
  transition:transform .1s ease, filter .12s ease;
}

.btn-art--green{  border-image-source:url(images/ui/btn_bg_green.png);  color:#1d3306; }
.btn-art--orange{ border-image-source:url(images/ui/btn_bg_orange.png); color:#3d2405; }
.btn-art--gray{   border-image-source:url(images/ui/btn_bg_gray.png);   color:#3a4048; }

.btn-art:active{ transform:translateY(2px); }
.btn-art:hover{ filter:brightness(1.05); }

.btn-art:disabled{
  border-image-source:url(images/ui/btn_bg_gray.png);
  color:#6c7480;
  cursor:default;
  filter:saturate(.6) brightness(.92);
}
.btn-art:disabled:active{ transform:none; }

.btn-art img{ width:16px; height:16px; }

.btn-art--sm{ min-height:44px; border-width:11px; border-image-width:11px; font-size:12px; }

.sr-card, .sr-mini, .sk-tile{
  --card-a:#4a504a; --card-b:#3b403b; --card-edge:#2a2e2a; --card-shadow:#1b1e1b;
}
.sr-card--common,.sr-mini--common,.sk-tile--common{       --card-a:#b1a690; --card-b:#8a7a63; --card-edge:#4a3b2a; --card-shadow:#2e2419; }
.sr-card--rare,.sr-mini--rare,.sk-tile--rare{               --card-a:#6fabec; --card-b:#2f7fd6; --card-edge:#1a3a63; --card-shadow:#0f2540; }
.sr-card--epic,.sr-mini--epic,.sk-tile--epic{               --card-a:#5cd2bb; --card-b:#1fae94; --card-edge:#0d4f43; --card-shadow:#073830; }
.sr-card--legendary,.sr-mini--legendary,.sk-tile--legendary{ --card-a:#ffcf74; --card-b:#f6b23e; --card-edge:#8a5c1c; --card-shadow:#5c3c10; }
.sr-card--mythic,.sr-mini--mythic,.sk-tile--mythic{       --card-a:#ff6f63; --card-b:#e0342a; --card-edge:#7a1f18; --card-shadow:#4a100c; }

.shop-ov{
  position:fixed;
  inset:0;
  z-index:900;
  display:flex;
  align-items:flex-start;
  justify-content:center;

  padding:
    calc(14px + env(safe-area-inset-top))
    12px
    calc(14px + env(safe-area-inset-bottom));

  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;

  background:rgba(3,6,12,.78);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .2s ease;
}
.shop-ov--in{ opacity:1; }

.shop-panel{
  position:relative;
  width:100%;
  max-width:456px;
  margin:auto;
  padding:16px 12px 18px;
  border:1.5px solid var(--edge-hi);
  border-radius:22px;
  background:var(--surface-1);
  box-shadow:0 14px 40px rgba(0,0,0,.7);
  transform:translateY(14px);
  transition:transform .22s cubic-bezier(.2,.9,.3,1.2);
}
.shop-ov--in .shop-panel{ transform:translateY(0); }

.shop-head{ display:flex; justify-content:center; margin-bottom:10px; }
.shop-tabs{ margin-bottom:12px; }

.shop-slots{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 12px;
  margin-bottom:10px;
  border:1.5px solid var(--edge);
  border-radius:12px;
  background:var(--surface-2);
  font-size:10px;
  color:var(--muted);
}
.shop-slots b{ font-family:var(--font-head); font-size:13px; color:#fff; }
.shop-slots--full b{ color:var(--red-hi); }

.sp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:12px;
}

.sp-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:14px 10px 11px;
  border:1.5px solid var(--edge);
  border-radius:var(--r-m);
  background:var(--surface-2);
  box-shadow:0 3px 0 var(--shadow-hard);
  cursor:pointer;
  transition:transform .1s ease, border-color .15s ease;
}
.sp-card:active{ transform:translateY(3px); box-shadow:0 0 0 var(--shadow-hard); }
.sp-card--best{ border-color:var(--gold); }
.sp-card--poor{ opacity:.72; }

.sp-save{
  position:absolute;
  top:-8px; right:8px;
  padding:2px 8px;
  border-radius:999px;
  font-family:var(--font-head);
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.3px;
  text-transform:uppercase;
  white-space:nowrap;
  color:#3a260d;
  background:var(--gold);
  box-shadow:0 2px 0 var(--gold-dk);
}

.sp-art{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  aspect-ratio:1.3;
  border:1.5px solid var(--edge-soft);
  border-radius:var(--r-s);
  background:var(--sunk);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5);
}
.sp-art img{
  width:58%; height:58%;
  object-fit:contain;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.55));
}

.sp-title{
  margin:9px 0 7px;
  font-family:var(--font-head);
  font-size:13px;
  font-weight:800;
  color:#fff;
}

.sp-price{
  display:flex; align-items:center; justify-content:center; gap:5px;
  width:100%;
  min-height:42px;
  padding:2px 6px 5px;
  border:11px solid transparent;
  border-image-source:url(images/ui/btn_bg_green.png);
  border-image-slice:34 fill;
  border-image-width:11px;
  border-image-repeat:stretch;
  background:transparent;
}
.sp-price img{ width:14px; height:14px; }
.sp-price span{
  font-family:var(--font-head);
  font-size:13px;
  font-weight:800;
  color:#1d3306;
  font-variant-numeric:tabular-nums;
}
.sp-card--poor .sp-price{ border-image-source:url(images/ui/btn_bg_gray.png); }
.sp-card--poor .sp-price span{ color:#3a4048; }

.sp-odds{
  padding:12px 12px 11px;
  border:1.5px solid var(--edge-soft);
  border-radius:var(--r-m);
  background:var(--surface-2);
}

.sp-odds-bar{
  display:flex;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:var(--sunk);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7);
}
.sp-odds-bar i{ display:block; min-width:3px; }

.sp-odds-legend{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:4px;
  margin-top:10px;
  text-align:center;
}
.sp-odds-item b{
  display:block;
  font-family:var(--font-head);
  font-size:13px;
  font-weight:800;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.sp-odds-item span{
  display:block;
  margin-top:2px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.2px;
  text-transform:uppercase;
  color:var(--faint);
}

.sp-odds-note{
  margin-top:11px;
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:9.5px;
  font-weight:700;
  line-height:1.45;
  text-align:center;
  color:var(--muted);
}

.shop-convert{
  padding:14px;
  margin-bottom:12px;
  border:1.5px solid var(--edge-soft);
  border-radius:var(--r-l);
  background:var(--surface-2);
}
.shop-rate-row{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin-bottom:12px;
  font-family:var(--font-head);
  font-size:17px;
  color:#fff;
}
.shop-rate-row img{ width:20px; height:20px; }
.shop-rate-arrow{ color:var(--gold); margin:0 3px; }

.shop-quick-row{ display:flex; gap:6px; margin:8px 0 10px; }
.shop-quick{
  flex:1;
  padding:8px 2px;
  border:1.5px solid var(--edge);
  border-radius:10px;
  font-family:var(--font-head);
  font-size:10px;
  color:#cfd9e3;
  background:var(--surface-3);
  cursor:pointer;
}
.shop-quick:active{ transform:translateY(1px); }

.sr-ov{
  position:fixed;
  inset:0;
  z-index:1100;
  display:flex;
  align-items:flex-start;
  justify-content:center;

  padding:
    calc(16px + env(safe-area-inset-top))
    12px
    calc(16px + env(safe-area-inset-bottom));

  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;

  background:rgba(3,6,12,.9);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.sr-stage{ width:100%; max-width:456px; margin:auto; }

.sr-count{
  margin-bottom:10px;
  text-align:center;
  font-family:var(--font-head);
  font-size:13px;
  font-weight:800;
  letter-spacing:1px;
  color:var(--gold-hi);
  font-variant-numeric:tabular-nums;
}

.sr-window{
  position:relative;
  width:100%;
  height:128px;
  overflow:hidden;
  border:2px solid var(--edge-hi);
  border-radius:16px;
  background:var(--sunk);
  box-shadow:inset 0 4px 10px rgba(0,0,0,.65);
  transition:height .3s ease, opacity .3s ease;
}
.sr-window--shrunk{ height:96px; opacity:.55; }

.sr-strip{
  display:flex;
  align-items:center;
  height:100%;
  padding-left:0;
  will-change:transform;
}

.sr-card{
  position:relative;
  flex:0 0 92px;
  width:92px;
  height:106px;
  margin-right:8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:10px 4px 5px;
  border:2px solid var(--card-edge);
  border-radius:12px;
  background:linear-gradient(180deg, var(--card-a), var(--card-b));
  box-shadow:0 3px 0 var(--card-shadow), inset 0 1px 0 rgba(255,255,255,.28);
}
.sr-card-rank{
  position:absolute;
  top:-7px; left:50%;
  transform:translateX(-50%);
  padding:1px 7px;
  border:1.5px solid var(--card-edge);
  border-radius:999px;
  font-family:var(--font-head);
  font-size:6.5px;
  font-weight:900;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:#fff;
  background:var(--card-shadow);
  white-space:nowrap;
}
.sr-card-art{ flex:1; width:100%; display:flex; align-items:center; justify-content:center; min-height:0; }
.sr-card-art img{ max-width:88%; max-height:100%; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.sr-card-name{
  font-family:var(--font-head);
  font-size:9px;
  font-weight:800;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}

.sr-card--winner{
  animation:srWinner .5s cubic-bezier(.2,.9,.3,1.5) forwards;
  z-index:3;
}
@keyframes srWinner{
  0%{ transform:scale(1); }
  55%{ transform:scale(1.14); }
  100%{ transform:scale(1.08); filter:drop-shadow(0 0 14px rgba(255,255,255,.55)); }
}

.sr-marker{
  position:absolute;
  left:50%; top:0; bottom:0;
  width:2px;
  margin-left:-1px;
  z-index:6;
  background:linear-gradient(180deg, var(--gold-hi), var(--gold-dk));
  box-shadow:0 0 10px 2px rgba(242,193,90,.65);
  pointer-events:none;
}
.sr-marker::before,
.sr-marker::after{
  content:"";
  position:absolute;
  left:50%;
  width:9px; height:9px;
  transform:translateX(-50%) rotate(45deg);
  border-radius:2px;
  background:var(--gold-hi);
}
.sr-marker::before{ top:-4px; }
.sr-marker::after{ bottom:-4px; }

.sr-fade{
  position:absolute; top:0; bottom:0;
  width:52px;
  z-index:5;
  pointer-events:none;
}
.sr-fade--l{ left:0;  background:linear-gradient(90deg, var(--sunk), transparent); }
.sr-fade--r{ right:0; background:linear-gradient(270deg, var(--sunk), transparent); }

.sr-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:6px;
  margin-top:14px;
}
.sr-mini{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:6px 2px 4px;
  border:2px solid var(--card-edge);
  border-radius:10px;
  background:linear-gradient(180deg, var(--card-a), var(--card-b));
  box-shadow:0 2px 0 var(--card-shadow), inset 0 1px 0 rgba(255,255,255,.25);
  opacity:0;
  animation:srMiniIn .34s cubic-bezier(.2,.9,.3,1.4) forwards;
}

.sr-mini--empty{
  aspect-ratio:.86;
  border:2px dashed rgba(255,255,255,.14);
  background:rgba(0,0,0,.25);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4);
  opacity:1;
  animation:none;
}
@keyframes srMiniIn{
  0%{ opacity:0; transform:translateY(10px) scale(.75) rotate(-6deg); }
  100%{ opacity:1; transform:none; }
}
.sr-mini-art{ width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.sr-mini-art img{ max-width:92%; max-height:92%; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.sr-mini-name{
  font-family:var(--font-head);
  font-size:7.5px;
  font-weight:800;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

.sr-actions{ margin-top:16px; }
.sr-actions .btn-art{ margin:0; }
.sr-skip{ min-height:46px; border-width:12px; border-image-width:12px; font-size:12px; opacity:.85; }

.sk-ov{
  position:fixed;
  inset:0;
  z-index:1200;
  display:flex;
  align-items:flex-start;
  justify-content:center;

  padding:
    calc(14px + env(safe-area-inset-top))
    12px
    calc(14px + env(safe-area-inset-bottom));

  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;

  background:rgba(3,6,12,.88);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.sk-panel{
  width:100%;
  max-width:456px;
  margin:auto;
  padding:16px 12px 18px;
  border:1.5px solid var(--edge-hi);
  border-radius:22px;
  background:var(--surface-1);
  animation:popupIn .26s cubic-bezier(.2,.9,.3,1.3);
}

.sk-head{ text-align:center; margin-bottom:10px; }
.sk-title{ font-family:var(--font-head); font-size:16px; color:var(--gold-hi); }
.sk-sub{ margin-top:3px; font-size:10.5px; font-weight:700; color:var(--muted); }

.sk-scroll{ padding-right:2px; }

.sk-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:7px; }

.sk-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:9px 3px 5px;
  border:2px solid var(--card-edge);
  border-radius:12px;
  background:linear-gradient(180deg, var(--card-a), var(--card-b));
  box-shadow:0 3px 0 var(--card-shadow), inset 0 1px 0 rgba(255,255,255,.28);
  cursor:pointer;
  transition:transform .1s ease, filter .12s ease;
}
.sk-tile:active{ transform:translateY(2px); }

.sk-tile-rank{
  position:absolute;
  top:-7px; left:50%;
  transform:translateX(-50%);
  padding:1px 6px;
  border:1.5px solid var(--card-edge);
  border-radius:999px;
  font-family:var(--font-head);
  font-size:6px;
  font-weight:900;
  text-transform:uppercase;
  color:#fff;
  background:var(--card-shadow);
  white-space:nowrap;
}
.sk-tile-art{ width:100%; aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
.sk-tile-art img{ max-width:90%; max-height:90%; object-fit:contain; filter:drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.sk-tile-name{
  font-family:var(--font-head); font-size:8px; font-weight:800; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.sk-tile-lv{ font-size:7.5px; font-weight:800; color:rgba(0,0,0,.5); }
.sk-tile-tag{
  position:absolute; inset:auto 0 4px;
  font-size:6.5px; font-weight:900; letter-spacing:.3px;
  text-transform:uppercase; color:#fff;
}

.sk-tile-x{
  position:absolute;
  top:-7px; right:-6px;
  z-index:3;
  display:none;
  align-items:center; justify-content:center;
  width:20px; height:20px;
  border:2px solid #0e1524;
  border-radius:50%;
  font-size:9px; line-height:1; color:#fff;
  background:var(--red);
}
.sk-tile--drop{ filter:grayscale(.85) brightness(.6); }
.sk-tile--drop .sk-tile-x{ display:flex; }
.sk-tile--locked{ filter:grayscale(.9) brightness(.55); cursor:default; }
.sk-tile--locked .sk-tile-name,
.sk-tile--locked .sk-tile-lv{ opacity:.6; }

.sk-confirm{ margin:12px 0 0; }

@media (max-width:390px){
  .sr-window{ height:118px; }
  .sr-card{ height:98px; }
  .sr-grid{ gap:5px; }
  .sk-grid{ grid-template-columns:repeat(3, 1fr); }
  .sp-odds-item b{ font-size:12px; }
  .sp-odds-item span{ font-size:7.5px; }
}

.popup-actions .btn-art{ flex:1; min-width:0; }