@font-face{font-family:"Oswald";font-style:normal;font-weight:200 700;font-display:swap;
  src:url(fonts/oswald-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Oswald";font-style:normal;font-weight:200 700;font-display:swap;
  src:url(fonts/oswald-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#15100c;
  --ink:#140e0a;
  --steel:#2b2621;
  --steel2:#3a332c;
  --steel3:#4d443a;
  --edge:#7a6a58;
  --rust:#9c4b22;
  --rust2:#c4652b;
  --paint:#e8ab2f;
  --paint2:#c4871a;
  --red:#c8432a;
  --bone:#efe3c8;
  --bone2:#bcab8b;
  --bone3:#85775f;
  --teal:#64b3a0;
  --gold:#f2c46a;
  --orange:#f0a24a;
  --xp:#7fd6bf;
  --hp:#d8452c;
  --bad:#a24bd6;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --plate:var(--noise),
    radial-gradient(120% 90% at 88% 115%,rgba(156,75,34,.38),transparent 62%),
    radial-gradient(60% 50% at 8% -10%,rgba(255,236,200,.07),transparent 70%),
    linear-gradient(180deg,var(--steel2),var(--steel));
  --hazard:repeating-linear-gradient(-45deg,var(--paint) 0 7px,#1d150b 7px 14px);
  --rivet:radial-gradient(circle at 50% 50%,#a8977e 0 1.5px,#3a2e24 2px,rgba(0,0,0,.5) 2.6px,transparent 3.2px);
  --rivets:var(--rivet) 0 0/8px 8px no-repeat,var(--rivet) 100% 0/8px 8px no-repeat,
    var(--rivet) 0 100%/8px 8px no-repeat,var(--rivet) 100% 100%/8px 8px no-repeat;
  --cut:polygon(0 7px,7px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 5px),calc(100% - 5px) 100%,10px 100%,0 calc(100% - 10px));
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);
  font-family:"Oswald","Arial Narrow",Tahoma,sans-serif;color:var(--bone);font-weight:400;
  user-select:none;-webkit-user-select:none;touch-action:none}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;background:var(--bg)}
canvas#game.overlay{background:transparent}
canvas#game3d{position:fixed;inset:0;width:100%;height:100%;display:block}

.hidden{display:none !important}

.screen{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:18px;padding:env(safe-area-inset-top) 16px 18px;
  background:radial-gradient(ellipse 85% 75% at 50% 45%,rgba(21,16,12,.05),rgba(21,16,12,.6)),
    linear-gradient(180deg,rgba(21,16,12,.05),rgba(21,16,12,.45))}
.screen.overlay{background:rgba(20,14,9,.74);backdrop-filter:blur(2px) saturate(.7)}
#scrLoading{background:var(--noise),radial-gradient(ellipse at 50% 60%,#2a1f17,#120c08)}

.logo,.scr-title,.over-title,.lvl-title,.boss-banner span{
  -webkit-mask-image:linear-gradient(180deg,#000 0 46%,transparent 46% 53%,#000 53%);
  mask-image:linear-gradient(180deg,#000 0 46%,transparent 46% 53%,#000 53%)}
.logo{font-size:min(15vw,84px);font-weight:700;letter-spacing:.05em;line-height:1;
  color:var(--bone);transform:rotate(-2deg);
  text-shadow:0 0 1px rgba(239,227,200,.6),0 0 14px rgba(232,171,47,.18),3px 4px 0 rgba(0,0,0,.45)}
.logo span{color:var(--rust2);text-shadow:0 0 1px rgba(196,101,43,.7),0 0 18px rgba(196,101,43,.35),3px 4px 0 rgba(0,0,0,.45)}
.logo.small{font-size:min(11vw,56px)}

.scr-title{font-size:26px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--paint)}
.over-title{font-size:min(11vw,48px);font-weight:700;color:var(--red);letter-spacing:.08em;
  text-transform:uppercase;transform:rotate(-2deg);text-shadow:0 0 1px var(--red),2px 3px 0 rgba(0,0,0,.5)}

.btn,.big-btn{font:inherit;cursor:pointer;color:var(--bone);border:0;clip-path:var(--cut);
  background:var(--plate);padding:10px 20px;font-weight:600;font-size:16px;letter-spacing:.08em;
  text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,235,200,.14),inset 0 -3px 0 rgba(0,0,0,.35),
  inset 1px 0 0 rgba(255,235,200,.05),inset -1px 0 0 rgba(0,0,0,.3);transition:transform .07s,filter .15s}
.btn:active,.big-btn:active{transform:translateY(2px)}
.btn:hover,.big-btn:hover{filter:brightness(1.15)}
.big-btn{font-size:22px;padding:15px 52px;color:#1d150b;font-weight:700;letter-spacing:.16em;
  background:var(--noise),
    repeating-linear-gradient(-45deg,rgba(29,21,11,.92) 0 7px,transparent 7px 14px) 0 0/16px 100% no-repeat,
    repeating-linear-gradient(-45deg,rgba(29,21,11,.92) 0 7px,transparent 7px 14px) 100% 0/16px 100% no-repeat,
    radial-gradient(90% 120% at 80% 120%,rgba(140,70,20,.5),transparent 60%),
    linear-gradient(180deg,#f4bd4c,var(--paint2));
  text-shadow:0 1px 0 rgba(255,230,170,.35)}
.btn.ghost{background:none;box-shadow:none;color:var(--bone3);clip-path:none}
.btn.ghost:hover{color:var(--bone2)}
.btn.danger{background:var(--noise),linear-gradient(180deg,#8e3622,#5a1f12);color:#ffd9c8}
.btn.icon{padding:10px 15px}
.btn[disabled]{opacity:.4;cursor:default;filter:grayscale(.6)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.menu-btns{display:flex;flex-direction:column;gap:12px;align-items:center}

.quick-up{display:flex;gap:6px;justify-content:center;width:min(100%,560px)}
.quick-up:empty{display:none}
.qu{flex:1 1 0;min-width:0;max-width:108px;display:flex;flex-direction:column;align-items:center;gap:3px;
  font:inherit;color:var(--bone);cursor:pointer;border:0;padding:8px 4px 7px;background:var(--plate);clip-path:var(--cut);
  box-shadow:inset 0 1px 0 rgba(255,235,200,.12),inset 0 -3px 0 rgba(0,0,0,.35);transition:transform .07s,filter .15s}
.qu:hover{filter:brightness(1.15)}
.qu:active{transform:translateY(2px)}
.qu-ic{color:var(--paint);line-height:0}
.qu b{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;line-height:1.1;
  max-width:100%;text-align:center;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.qu .lvl-dots{gap:2px}
.qu .lvl-dots i{width:9px;height:5px}
.qu em{font-style:normal;font-size:13px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.35}
.qu s{text-decoration:none;font-size:10px;color:var(--bone3);line-height:1.1;text-align:center}
.qu.poor{filter:saturate(.35) brightness(.72)}
.qu.poor:hover{filter:saturate(.5) brightness(.85)}
.qu.poor em{color:var(--bone2)}
.qu.max{opacity:.7;cursor:default}
.qu.max:active{transform:none}
.qu.max em{color:var(--teal);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.qu.can{box-shadow:inset 0 0 0 2px var(--paint),inset 0 0 16px rgba(232,171,47,.28),inset 0 -3px 0 rgba(0,0,0,.35);
  animation:quCall 1.1s ease-in-out infinite alternate}
.qu.can em{color:#1d150b;background:var(--noise),linear-gradient(180deg,#f4bd4c,var(--paint2));padding:0 7px}
.qu.bought{animation:quBought .5s ease-out}
.qu.can.bought{animation:quBought .5s ease-out,quCall 1.1s .5s ease-in-out infinite alternate}
@keyframes quCall{to{box-shadow:inset 0 0 0 2px #ffd27d,inset 0 0 28px rgba(232,171,47,.55),inset 0 -3px 0 rgba(0,0,0,.35)}}
@keyframes quBought{from{filter:brightness(2)}}

.ad-btn{display:inline-flex;align-items:center;gap:9px}
.no-ads .ad-tag{display:none}
.ad-tag{font-style:normal;font-size:11px;font-weight:700;background:var(--bone);color:#1d150b;
  padding:1px 6px;letter-spacing:.1em;transform:rotate(-4deg);box-shadow:1px 1px 0 rgba(0,0,0,.35)}
.big-btn .ad-tag{background:#1d150b;color:var(--paint)}

.back-btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:14px;
  letter-spacing:.1em;text-transform:uppercase;color:#1d150b;cursor:pointer;white-space:nowrap;border:0;
  padding:8px 16px 8px 12px;clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);
  background:var(--noise),linear-gradient(180deg,#f4bd4c,var(--paint2))}
.back-btn:hover{filter:brightness(1.12)}
.back-btn span:first-child{font-size:16px;line-height:1}
.icon-btn{font:inherit;font-weight:700;color:var(--bone);cursor:pointer;width:36px;height:32px;border:0;
  clip-path:var(--cut);background:var(--plate);box-shadow:inset 0 1px 0 rgba(255,235,200,.14)}

.menu-mid{display:flex;gap:18px;align-items:stretch;flex-wrap:wrap;justify-content:center}
.hero-card,.menu-stats,.card,.item,.toast{position:relative}
.hero-card:before,.menu-stats:before,.card:before,.item:before{content:"";position:absolute;inset:5px;
  pointer-events:none;background:var(--rivets)}
.hero-card{display:flex;gap:14px;align-items:center;background:var(--plate);padding:16px 22px 16px 16px;
  clip-path:var(--cut);box-shadow:inset 0 1px 0 rgba(255,235,200,.12),inset 0 -3px 0 rgba(0,0,0,.35)}
#heroPreview{width:120px;height:120px;background:radial-gradient(circle,rgba(232,171,47,.12),transparent 65%)}
.hero-name{font-size:28px;font-weight:700;letter-spacing:.1em;line-height:1.05;text-transform:uppercase}
.hero-weapon{color:var(--paint);font-size:15px;margin-top:3px;letter-spacing:.06em;text-transform:uppercase}
.hero-perk{color:var(--bone2);font-size:14px;margin-top:6px;max-width:200px;line-height:1.3;font-weight:300}
.menu-stats{display:flex;flex-direction:column;justify-content:center;gap:7px;font-size:14px;color:var(--bone2);
  padding:14px 20px;background:var(--plate);clip-path:var(--cut);letter-spacing:.06em;text-transform:uppercase;
  box-shadow:inset 0 1px 0 rgba(255,235,200,.12),inset 0 -3px 0 rgba(0,0,0,.35)}
.menu-stats div{display:flex;justify-content:space-between;gap:18px;min-width:160px;
  border-bottom:1px solid rgba(0,0,0,.35);box-shadow:0 1px 0 rgba(255,235,200,.05);padding-bottom:4px}
.menu-stats b{color:var(--gold);font-weight:600}

.top-bar{position:absolute;top:0;left:0;right:0;height:58px;display:flex;align-items:center;
  justify-content:space-between;gap:8px;padding:0 10px;background:var(--plate);
  box-shadow:0 2px 0 rgba(0,0,0,.4)}
.top-bar:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:var(--hazard);opacity:.85}
.tabs{display:flex;gap:2px;overflow-x:auto}
.tab{background:none;border:0;color:var(--bone3);font:inherit;font-weight:600;font-size:15px;
  letter-spacing:.1em;text-transform:uppercase;padding:8px 11px;cursor:pointer;white-space:nowrap;
  border-bottom:3px solid transparent}
.tab:hover{color:var(--bone2)}
.tab.active{color:var(--paint);border-color:var(--paint)}
.coin-counter{padding-right:8px;color:var(--gold);font-weight:600;font-size:17px;letter-spacing:.05em}
.coin-counter b{font-weight:600}
.coin-counter b:before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;
  background:radial-gradient(circle at 35% 35%,#fff0c0,var(--gold) 45%,#8a6a20);
  clip-path:polygon(50% 0,100% 30%,85% 100%,15% 100%,0 30%)}

.grid-list{position:absolute;top:64px;bottom:0;left:0;right:0;overflow-y:auto;padding:16px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;align-content:start}
.item{background:var(--plate);padding:14px;clip-path:var(--cut);
  display:flex;flex-direction:column;gap:6px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,235,200,.12),inset 0 -3px 0 rgba(0,0,0,.35);transition:transform .08s,filter .15s}
.item:hover{filter:brightness(1.12);transform:translateY(-2px)}
.item.owned{background:linear-gradient(135deg,rgba(100,179,160,.5) 0 10px,transparent 10px),var(--plate)}
.item.active{box-shadow:inset 0 0 0 3px var(--paint),inset 0 -3px 0 rgba(0,0,0,.35)}
.item.locked{filter:saturate(.6) brightness(.85)}
.item.locked:hover{filter:saturate(.8) brightness(.95)}
.item h4{margin:0;font-size:19px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.item p{margin:0;font-size:13px;color:var(--bone2);line-height:1.35;flex:1;font-weight:300}
.item .price{align-self:flex-start;background:var(--noise),var(--bone);color:#1d150b;font-weight:600;font-size:13px;
  letter-spacing:.06em;padding:2px 10px;transform:rotate(-2deg);box-shadow:1px 2px 0 rgba(0,0,0,.4);text-transform:uppercase}
.item .price:empty{display:none}
.item .tag{position:absolute;top:10px;right:12px;font-size:11px;font-weight:700;letter-spacing:.12em;
  color:#1d150b;background:var(--paint);padding:1px 7px;transform:rotate(3deg);text-transform:uppercase}
.item canvas{align-self:center}
.item .stats{font-size:12px;color:var(--teal);line-height:1.35;letter-spacing:.02em}
.lvl-dots{display:flex;gap:3px}
.lvl-dots i{width:14px;height:7px;background:rgba(0,0,0,.45);box-shadow:inset 0 1px 0 rgba(0,0,0,.4)}
.lvl-dots i.on{background:var(--paint);box-shadow:0 0 6px rgba(232,171,47,.35)}

.prestige-box{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;gap:12px;
  justify-content:space-between;padding:14px 16px;background:var(--plate);box-shadow:0 -2px 0 rgba(0,0,0,.4)}
.prestige-box:before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:var(--hazard);opacity:.85}
.pb-text{display:flex;flex-direction:column;font-size:13px;color:var(--bone2);font-weight:300}
.pb-text b{color:var(--red);font-size:16px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}

.board-list{position:absolute;top:64px;bottom:60px;left:0;right:0;overflow-y:auto;padding:12px 16px}
.board-row{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:5px;font-size:16px;
  background:var(--plate);clip-path:var(--cut)}
.board-row.me{box-shadow:inset 4px 0 0 var(--paint)}
.board-row .rank{width:34px;color:var(--paint);font-weight:700}
.board-row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-row .sc{color:var(--gold);font-weight:600}
.board-row img{width:26px;height:26px;border-radius:50%}
#btnAuth{position:absolute;bottom:12px;left:14px;right:14px}

.settings-list{display:flex;flex-direction:column;gap:12px;min-width:280px;padding:18px 22px;
  background:var(--plate);clip-path:var(--cut)}
.sw{display:flex;justify-content:space-between;align-items:center;font-size:17px;letter-spacing:.06em;
  text-transform:uppercase;border-bottom:1px solid rgba(0,0,0,.35);padding-bottom:10px}
.sw input{width:22px;height:22px;accent-color:var(--paint)}
.sw.vol input{flex:1;width:auto;min-width:90px;margin:0 12px;cursor:pointer}
.sw.vol b{min-width:42px;text-align:right;font-weight:600;color:var(--paint);font-variant-numeric:tabular-nums}
.lang-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sw.q-sw{flex-wrap:wrap;gap:8px}
.q-row{display:flex;gap:5px;margin-left:auto}
.btn.q{padding:6px 9px;font-size:12px;letter-spacing:.05em}
.btn.q.active{color:#1d150b;background:var(--noise),linear-gradient(180deg,#f4bd4c,var(--paint2))}
.btn.lang.active{color:#1d150b;background:var(--noise),linear-gradient(180deg,#f4bd4c,var(--paint2))}
.ver{text-align:center;color:var(--bone3);font-size:12px;letter-spacing:.1em}

#hud{position:fixed;inset:0;z-index:10;pointer-events:none;
  padding:calc(env(safe-area-inset-top) + 8px) 10px 10px}
#hud button{pointer-events:auto}
.hud-top{display:flex;flex-direction:column;gap:6px}
.xp-wrap{display:flex;align-items:center;gap:8px}
.xp-bar{flex:1;height:9px;background:rgba(20,14,9,.75);box-shadow:inset 0 1px 2px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.5)}
.xp-bar i{display:block;height:100%;width:0;
  background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(0,0,0,.28) 10px 12px),linear-gradient(180deg,#9fe6d2,#4f9e8b)}
.xp-wrap span{font-weight:700;color:var(--xp);font-size:16px;min-width:20px;text-align:right;
  text-shadow:0 1px 2px #000}
.hud-row{display:flex;gap:6px;align-items:center}
.chip{background:var(--plate);clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%);
  padding:3px 11px 3px 10px;font-weight:600;font-size:16px;letter-spacing:.04em;font-variant-numeric:tabular-nums;
  box-shadow:inset 3px 0 0 var(--bone3),inset 0 1px 0 rgba(255,235,200,.12)}
.chip.coin{color:var(--gold);box-shadow:inset 3px 0 0 var(--paint),inset 0 1px 0 rgba(255,235,200,.12)}
.chip.kill{color:var(--bone2);box-shadow:inset 3px 0 0 var(--red),inset 0 1px 0 rgba(255,235,200,.12)}
.chip.kill:before{content:"x "}
.chip.score{color:var(--teal);letter-spacing:.03em;box-shadow:inset 3px 0 0 var(--teal),inset 0 1px 0 rgba(255,235,200,.12)}
.hud-bottom{position:absolute;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom) + 10px);
  display:flex;flex-direction:column;gap:8px}
.hp-wrap{position:relative;max-width:330px}
.hp-bar{height:18px;padding:3px;background:var(--plate);clip-path:var(--cut);
  box-shadow:inset 0 1px 0 rgba(255,235,200,.12)}
.hp-bar i{display:block;height:100%;width:100%;transition:width .12s linear;
  background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(0,0,0,.35) 9% 10%),linear-gradient(180deg,#f07a5a,var(--hp) 55%,#8e2414)}
.hp-wrap span{position:absolute;inset:0;text-align:center;font-size:12px;font-weight:600;line-height:18px;
  letter-spacing:.06em;text-shadow:0 1px 2px #000,0 0 3px #000}
.pause-skills{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-width:min(92vw,640px);margin:0 auto 16px;max-height:40vh;overflow:auto}
.pause-skills:empty{display:none}
.pause-mix{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;margin:0 auto 14px;max-width:min(92vw,420px)}
.pause-mix .sw{gap:10px}
.pause-mix .sw.vol{flex-basis:100%;gap:0}
.ps{display:grid;grid-template-columns:auto 1fr auto;column-gap:6px;align-items:center;width:min(44vw,200px);padding:6px 9px;
  background:rgba(20,14,8,.78);border:1px solid rgba(255,235,200,.18);border-radius:6px;font-size:12px;text-align:left}
.ps i{font-style:normal;font-size:16px}
.ps b{color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps span{color:var(--paint);font-weight:700}
.ps em{grid-column:1/4;font-style:normal;color:var(--bone3);font-size:11px}
#skillStrip{display:flex;gap:4px;flex-wrap:wrap;max-width:60vw}
#skillStrip div{background:var(--plate);font-size:13px;padding:2px 8px;color:var(--bone2);
  clip-path:polygon(0 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%)}
#skillStrip div i{font-style:normal}
#skillStrip div b{color:var(--paint);font-weight:600}
.touch-btn{position:absolute;right:22px;bottom:calc(env(safe-area-inset-bottom) + 70px);
  width:80px;height:80px;border-radius:50%;
  background:radial-gradient(circle,#3a332c 0 52%,#1d150b 53% 56%,transparent 57%),
    repeating-conic-gradient(var(--paint) 0 15deg,#1d150b 15deg 30deg);
  box-shadow:0 3px 8px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;letter-spacing:.12em;color:var(--bone);pointer-events:auto}
.touch-btn.cd{opacity:.35}
.touch-btn.left{right:auto;left:22px;bottom:calc(env(safe-area-inset-bottom) + 104px)}
.touch-only{display:none}
.touch .sw.touch-only{display:flex}

.lvl-title{font-size:24px;letter-spacing:.2em;text-transform:uppercase;color:var(--bone2);font-weight:600}
.lvl-title b{color:var(--paint);font-size:32px}
.card-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:840px}
.card{width:min(46vw,236px);min-height:168px;background:var(--plate);clip-path:var(--cut);
  padding:18px 16px 14px;cursor:pointer;display:flex;flex-direction:column;gap:7px;
  box-shadow:inset 0 5px 0 var(--bone3),inset 0 -3px 0 rgba(0,0,0,.35);transition:transform .08s,filter .15s}
.card:hover{transform:translateY(-5px);filter:brightness(1.14)}
.card .ic,#skillStrip div i{font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","DejaVu Sans",sans-serif}
.card .ic{font-size:22px;line-height:40px;width:40px;height:40px;display:block;text-align:center;
  border-radius:50%;background:radial-gradient(circle,rgba(0,0,0,.55),rgba(0,0,0,.25));
  box-shadow:inset 0 0 0 2px rgba(255,235,200,.12)}
.card h3{margin:0;font-size:20px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.card p{margin:0;font-size:14px;color:var(--bone2);line-height:1.32;flex:1;font-weight:300}
.card .stack{font-size:12px;color:var(--teal);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.card .next{font-size:12px;color:var(--gold);font-weight:500;letter-spacing:.04em}
.card-row.kb .card{position:relative}
.card .key{display:none;position:absolute;top:10px;right:12px;font-size:12px;font-weight:700;line-height:1;padding:3px 6px;
  border:1px solid var(--gold);border-radius:4px;color:var(--gold);opacity:.75}
.card-row.kb .card .key{display:block}
.card.rare{box-shadow:inset 0 5px 0 #4f86d8,inset 0 -3px 0 rgba(0,0,0,.35)}
.card.epic{box-shadow:inset 0 5px 0 var(--bad),inset 0 -3px 0 rgba(0,0,0,.35)}
.card.leg{box-shadow:inset 0 5px 0 var(--gold),inset 0 0 26px rgba(242,196,106,.16),inset 0 -3px 0 rgba(0,0,0,.35)}
.card.leg h3{color:var(--gold)}

.over-stats{display:flex;flex-direction:column;gap:6px;min-width:260px;font-size:17px;color:#2a2018;
  background:var(--noise),linear-gradient(180deg,#f1e6cc,#ddcca6);padding:16px 20px 10px;
  transform:rotate(-1deg);box-shadow:2px 4px 0 rgba(0,0,0,.45);position:relative}
.over-stats:before{content:"";position:absolute;top:-9px;left:50%;width:70px;height:18px;margin-left:-35px;
  background:rgba(232,220,180,.6);transform:rotate(3deg);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.over-stats div{display:flex;justify-content:space-between;border-bottom:1px dashed rgba(42,32,24,.35);padding-bottom:4px}
.over-stats span{letter-spacing:.06em;text-transform:uppercase;font-size:14px;font-weight:500}
.over-stats b{color:#1d150b;font-weight:600}
.over-stats .coin-line b{color:#a55c10;font-size:21px}
.score-break{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--bone2);
  min-width:260px;margin-top:-4px;padding:0 6px;font-weight:300}
.score-break div{display:flex;justify-content:space-between}
.score-break b{color:var(--teal);font-weight:600}
.new-best{color:var(--paint);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:18px;
  animation:pulse 1s infinite alternate}
@keyframes pulse{to{opacity:.45}}

.loading-bar{width:min(60vw,320px);height:10px;padding:2px;background:var(--plate);clip-path:var(--cut)}
.loading-bar i{display:block;height:100%;width:10%;background:var(--hazard);transition:width .2s}
.toast{position:fixed;left:50%;bottom:16%;transform:translateX(-50%) rotate(-1deg);z-index:60;
  background:var(--noise),linear-gradient(180deg,#f1e6cc,#ddcca6);color:#2a2018;padding:10px 20px;
  font-weight:500;font-size:16px;letter-spacing:.03em;max-width:80vw;text-align:center;
  box-shadow:2px 3px 0 rgba(0,0,0,.45)}
.toast:before{content:"";position:absolute;top:-8px;left:14px;width:46px;height:16px;
  background:rgba(232,220,180,.6);transform:rotate(-6deg)}
.ad-cover{position:fixed;inset:0;z-index:80;background:#0d0906;display:flex;align-items:center;justify-content:center}
.ad-spin{width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle,#0d0906 0 55%,transparent 56%),repeating-conic-gradient(var(--paint) 0 20deg,#1d150b 20deg 40deg);
  animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#game:focus{outline:none}
.screen.crash{z-index:90;cursor:pointer;background:rgba(20,14,9,.92)}
.crash-text{margin:0;max-width:420px;text-align:center;font-size:16px;color:var(--bone2)}
.focus-gate{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  background:rgba(13,9,6,.55);cursor:pointer}
.focus-gate span{font-size:22px;font-weight:600;letter-spacing:.06em;color:var(--paint);text-align:center;padding:14px 22px;
  background:var(--plate);clip-path:var(--cut);text-shadow:0 1px 3px #000;animation:pulse .8s ease-in-out infinite alternate}

.boss-bar{margin:10px auto 0;max-width:min(540px,calc(100% - 2 * clamp(92px,16vw,132px) - 16px));width:100%}
.bb-name{display:flex;justify-content:space-between;font-size:15px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--paint);margin-bottom:3px;
  text-shadow:0 1px 3px #000}
.bb-track{height:14px;padding:3px;background:var(--hazard);box-shadow:0 2px 4px rgba(0,0,0,.5)}
.bb-track i{display:block;height:100%;width:100%;transition:width .15s linear;
  background:repeating-linear-gradient(90deg,transparent 0 9%,rgba(0,0,0,.3) 9% 10%),linear-gradient(180deg,#ff7a5c,#b8301a)}
.stage-bar{margin:8px auto 0;max-width:min(420px,calc(100% - 2 * clamp(92px,16vw,132px) - 16px));width:100%}
.sb-goal{text-align:center;font-size:15px;font-weight:500;letter-spacing:.03em;color:var(--bone2);margin-bottom:5px;
  text-shadow:0 1px 3px #000,0 0 4px #000;transition:font-size .4s}
.stage-bar.intro .sb-goal{font-size:21px;color:#fff}
.stage-bar.soon .sb-goal{color:var(--paint);animation:pulse .5s ease-in-out infinite alternate}
.sb-row{display:flex;align-items:center;gap:7px}
.sb-num{min-width:24px;height:22px;line-height:22px;padding:0 4px;text-align:center;font-size:14px;font-weight:700;
  color:#1d150b;background:var(--teal);clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%)}
.sb-num.next{background:var(--paint)}
.sb-track{position:relative;flex:1;height:10px;background:rgba(20,14,9,.75);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.5)}
.sb-track i{display:block;height:100%;width:0;
  background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(0,0,0,.25) 10px 12px),linear-gradient(180deg,#f4bd4c,#b8741a)}
.sb-track u{position:absolute;top:-10px;width:3px;height:20px;margin-left:-1px;background:var(--bone2);box-shadow:0 0 2px #000}
.sb-track u:after{content:"";position:absolute;left:3px;top:0;width:11px;height:9px;background:var(--red);
  clip-path:polygon(0 0,100% 50%,0 100%)}
.sb-track u.done{background:var(--bone3)}
.sb-track u.done:after{background:var(--bone3)}
@media (max-width:479px){.stage-bar,.boss-bar{margin-left:0;max-width:calc(100% - 112px)}}
.boss-banner{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:55;text-align:center;
  pointer-events:none;animation:bannerIn .35s ease-out}
.boss-banner b{display:block;font-size:15px;letter-spacing:.3em;color:var(--bone2);text-transform:uppercase;
  font-weight:500;text-shadow:0 1px 3px #000}
.boss-banner{width:max-content;max-width:94vw}
.boss-banner span{display:block;font-size:min(8vw,52px,9vh);line-height:1.15;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--paint);text-shadow:0 0 1px var(--paint),0 0 24px rgba(232,171,47,.35),3px 4px 0 rgba(0,0,0,.6)}
@keyframes bannerIn{from{opacity:0;transform:translateX(-50%) translateY(-14px)}to{opacity:1}}
.trophy{filter:saturate(.3) brightness(.7)}
.trophy.done{filter:none;box-shadow:inset 0 0 0 3px var(--gold),inset 0 -3px 0 rgba(0,0,0,.35)}
.trophy .cnt{font-size:13px;font-weight:600;color:var(--gold);letter-spacing:.06em}

.ability-bar{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.ab{position:relative;display:flex;align-items:center;gap:7px;font:inherit;font-size:13px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;color:var(--bone);background:var(--plate);border:0;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,0 100%);padding:4px 10px 4px 5px;overflow:hidden}
.ab i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.08em;color:#1d150b;
  background:linear-gradient(180deg,var(--bone),var(--bone2));padding:1px 5px;box-shadow:0 2px 0 rgba(0,0,0,.45)}
.ab.dim{opacity:.6}
.ctrl-hint{position:absolute;left:50%;top:60%;transform:translate(-50%,0);display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:10px 16px;border-radius:12px;background:rgba(8,16,20,.6);border:1px solid rgba(255,255,255,.14);
  font-size:13px;color:var(--txt);text-align:center;pointer-events:none;transition:opacity .5s;
  width:max-content;max-width:90vw}
.ctrl-hint.fade{opacity:0}
.ctrl-hint .ch{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.ctrl-hint .pc,.ctrl-hint .touch{display:none}
.ctrl-hint.is-pc .pc{display:flex}
.ctrl-hint.is-touch .touch{display:flex}
.ctrl-hint:not(.hold) .ch.go{display:none}
.ctrl-hint .go{margin-top:2px;font-size:15px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paint);animation:chGo 1.1s ease-in-out infinite}
@keyframes chGo{50%{opacity:.45}}
.touch .ability-bar{display:none}
@media (pointer:coarse){.ability-bar{display:none}}
.ctrl-hint b{display:inline-flex;gap:3px}
.ctrl-hint i{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.06em;color:#0c1a1f;background:#e8f3f5;border-radius:4px;padding:3px 6px;min-width:12px}
.ctrl-hint .swipe{width:34px;height:34px;border-radius:50%;border:2px solid #e8f3f5;position:relative;overflow:visible}
.ctrl-hint .swipe:after{content:'';position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--orange);animation:chSwipe 1.4s ease-in-out infinite}
@keyframes chSwipe{0%,100%{transform:translate(-9px,0)}50%{transform:translate(9px,0)}}
.ab.act{cursor:pointer;pointer-events:auto}
.ab.act:hover{filter:brightness(1.15)}
.ab.cool{color:var(--bone3)}
.ab u{position:absolute;left:0;bottom:0;height:3px;background:var(--paint);width:0}
.buff-strip{display:flex;gap:6px;flex-wrap:wrap}
.buff-strip div{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-left:3px solid;background:var(--plate);pointer-events:auto}
.buff-strip div s{text-decoration:none;font-weight:300;opacity:.85;text-transform:none}
.btn.with-ic{display:inline-flex;align-items:center;gap:8px}
.tab.with-ic{display:inline-flex;align-items:center;gap:6px}
.ico{flex:none}
.u-ic{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--paint);
  background:radial-gradient(circle,rgba(0,0,0,.55),rgba(0,0,0,.25));box-shadow:inset 0 0 0 2px rgba(255,235,200,.12)}

@media (max-width:560px){
  .hero-card{padding:10px 14px 10px 10px}
  #heroPreview{width:86px;height:86px}
  .hero-name{font-size:22px}
  .hero-perk{max-width:150px;font-size:13px}
  .menu-stats{padding:10px 14px}
  .card{min-height:140px;padding:14px 11px 10px}
  .card p{font-size:13px}
  .card h3{font-size:17px}
  .big-btn{font-size:20px;padding:14px 40px}
  .btn{font-size:14px;padding:9px 14px}
  #skillStrip{max-width:52vw}
  .ability-bar{display:none}
  .tab{font-size:13px;padding:8px 8px}
  .qu b{font-size:10.5px;letter-spacing:0}
  .qu s{font-size:0}
  .qu s:after{content:attr(data-short);font-size:11px;font-weight:600;color:var(--bone2)}
  .qu-ic svg{width:18px;height:18px}
  #scrMenu{gap:12px}
  .menu-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px}
  .menu-stats div{min-width:0;gap:8px}
}
@media (max-width:560px) and (max-height:720px){
  #scrMenu .hero-perk{display:none}
  #scrMenu .logo{font-size:40px}
}
@media (max-width:560px) and (max-height:600px){
  #scrMenu{gap:8px}
  #scrMenu .logo{font-size:32px}
  #scrMenu #heroPreview{width:70px;height:70px}
  #scrMenu .hero-card{padding:6px 12px 6px 6px}
  #scrMenu .menu-stats{padding:7px 12px}
}

@media (orientation:landscape) and (max-height:560px){
  #scrMenu{display:grid;grid-template-columns:auto auto;grid-template-areas:"logo btns" "mid btns";
    align-content:center;justify-content:center;align-items:center;column-gap:20px;row-gap:8px;
    padding-top:max(env(safe-area-inset-top),8px);padding-bottom:8px}
  #scrMenu .logo{grid-area:logo;justify-self:center;font-size:38px}
  #scrMenu .menu-mid{grid-area:mid;flex-direction:column;flex-wrap:nowrap;gap:8px;align-items:stretch}
  #scrMenu .menu-btns{grid-area:btns;gap:8px}
  #scrMenu .hero-card{padding:8px 14px 8px 8px}
  #heroPreview{width:72px;height:72px}
  #scrMenu .hero-name{font-size:20px}
  #scrMenu .hero-perk{max-width:170px;font-size:12px;margin-top:3px}
  #scrMenu .menu-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;padding:8px 14px;font-size:12px}
  #scrMenu .menu-stats div{min-width:0;gap:8px}
  #scrMenu .big-btn{font-size:19px;padding:11px 40px}
  #scrMenu .btn{font-size:13px;padding:8px 12px}
  .quick-up{width:min(100%,420px)}
  .qu{padding:6px 3px 5px}
}

@media (max-height:520px) and (min-width:480px){
  #scrLevel{gap:8px;padding-top:max(env(safe-area-inset-top),6px);padding-bottom:6px}
  .lvl-title{font-size:17px}
  .lvl-title b{font-size:22px}
  .card-row{flex-wrap:nowrap;gap:8px;width:100%;max-width:760px}
  .card{flex:1 1 0;width:auto;min-width:0;max-width:236px;min-height:0;padding:12px 10px 9px;gap:4px}
  .card .ic{width:30px;height:30px;line-height:30px;font-size:18px}
  .card h3{font-size:15px;letter-spacing:.03em}
  .card p{font-size:12px;line-height:1.25}
  .card .stack,.card .next{font-size:11px}
  #btnReroll{padding:6px 12px;font-size:13px}
  .ctrl-hint{flex-direction:row;flex-wrap:wrap;justify-content:center;top:auto;bottom:44px;
    gap:3px 14px;padding:6px 14px;font-size:12px;max-width:calc(100% - 240px)}
  .ctrl-hint .go{flex-basis:100%;justify-content:center;font-size:13px}
}
@media (max-width:479px){
  .card-row{width:100%;gap:10px}
  .card{width:min(100%,340px);min-height:0;padding:12px 12px 10px;
    display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:4px;align-content:start}
  .card .ic{grid-row:1/span 4;align-self:start}
  .card h3{font-size:16px}
}
@media (max-height:340px) and (min-width:480px){
  .card .next{display:none}
  .card .ic{display:none}
}