:root {
  --gold:#ffc83d; --gold2:#ff9d1c; --red:#e8443a; --red2:#b3221b; --green:#3fd46b; --blue:#3fa9ff; --purple:#b46cff; --star:#ffb400;
  --panel:rgba(24,16,12,.82); --panel2:rgba(46,32,22,.9); --line:rgba(255,200,61,.28); --text:#fff6e6; --dim:#d2bfa3; --dim2:#a08b70;
  --r-common:#a7b0be; --r-uncommon:#4cd964; --r-rare:#3fa9ff; --r-epic:#b46cff; --r-legendary:#ffb020;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; color:var(--text); background:#120b07; font:15px/1.35 -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; overscroll-behavior:none; }
body { overflow:hidden; user-select:none; -webkit-user-select:none; }
input { user-select:text; -webkit-user-select:text; }
img { -webkit-user-drag:none; user-select:none; }
#bg { position:fixed; inset:0; background:url(assets/arena_bg_web.jpg) center 30%/cover no-repeat; z-index:-2; }
#bg::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,10,6,.55) 0%, rgba(18,10,6,.72) 40%, rgba(14,8,5,.92) 100%); }
#app { max-width:520px; margin:0 auto; height:100%; display:flex; flex-direction:column; position:relative; }
.hidden { display:none !important; }
.dim { color:var(--dim); font-size:13px; }
.dim2 { color:var(--dim2); font-size:12px; }
.grow { flex:1; min-width:0; }
.row { display:flex; align-items:center; gap:10px; }
.center { text-align:center; }
b, strong { font-weight:800; }

/* ---------- boot ---------- */
.boot { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; }
.boot img { width:200px; animation:float 2.4s ease-in-out infinite; filter:drop-shadow(0 12px 18px #000a); }
.boot-title { font-size:30px; font-weight:900; letter-spacing:.02em; color:var(--gold); text-shadow:0 3px 0 #7a3d00, 0 6px 16px #000; }

/* ---------- demo banner ---------- */
#demo-banner { background:linear-gradient(90deg,#5b2bb5,#9b3fd6); color:#fff; font-size:12.5px; padding:6px 12px; display:flex; gap:8px; align-items:center; justify-content:space-between; }
#demo-banner a { color:#fff; font-weight:800; background:#0003; padding:3px 10px; border-radius:10px; text-decoration:none; white-space:nowrap; }

/* ---------- top bar ---------- */
#top { padding:8px 10px 6px; background:linear-gradient(180deg, rgba(20,12,8,.95), rgba(20,12,8,.75)); border-bottom:1px solid var(--line); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.tb1 { display:flex; align-items:center; gap:9px; }
.ava { width:44px; height:44px; border-radius:12px; border:2px solid var(--gold); overflow:hidden; flex:none; box-shadow:0 0 0 2px #0008, 0 4px 10px #0008; position:relative; background:#3a2614; }
.ava img { width:100%; height:100%; object-fit:cover; display:block; }
.ava .lv { position:absolute; right:-1px; bottom:-1px; background:linear-gradient(180deg,var(--gold),var(--gold2)); color:#3a1d00; font-size:10px; font-weight:900; padding:0 4px; border-radius:7px 0 9px 0; }
.who { flex:1; min-width:0; }
.who .nm { font-weight:900; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 2px 3px #000; }
.who .sub { font-size:11px; color:var(--dim); display:flex; align-items:center; gap:6px; }
.xpbar { height:6px; background:#0009; border-radius:4px; overflow:hidden; flex:1; max-width:120px; border:1px solid #fff1; }
.xpbar > i { display:block; height:100%; background:linear-gradient(90deg,#7bdcff,#3fa9ff); }
.shopbtn { flex:none; border:0; border-radius:14px; padding:7px 10px; font-weight:900; font-size:12px; color:#3a1d00; background:linear-gradient(180deg,#ffe27a,#ffb400); box-shadow:0 3px 0 #a86400, 0 6px 12px #0007; cursor:pointer; position:relative; }
.shopbtn .sp { position:absolute; top:-5px; right:-5px; background:var(--red); color:#fff; font-size:9px; border-radius:8px; padding:1px 5px; box-shadow:0 0 0 2px #1a1008; animation:pulse 1.4s infinite; }
.tb2 { display:flex; gap:6px; margin-top:7px; }
.chip { display:flex; align-items:center; gap:5px; background:rgba(0,0,0,.45); border:1px solid #ffffff1c; border-radius:12px; padding:3px 8px 3px 4px; font-weight:800; font-size:13px; white-space:nowrap; min-width:0; }
.chip .ic { width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; flex:none; }
.chip img.ic { object-fit:contain; }
.chip.en { flex:1; padding-right:6px; }
.enbar { flex:1; height:8px; border-radius:5px; background:#000a; overflow:hidden; min-width:30px; border:1px solid #fff1; }
.enbar > i { display:block; height:100%; background:linear-gradient(90deg,#ffe34d,#ff9d1c); box-shadow:0 0 8px #ffb40088; }
.chip .tm { font-size:11px; color:var(--dim); font-weight:700; }
.chip.plus { cursor:pointer; }
.chip .add { background:var(--green); color:#04210d; width:16px; height:16px; border-radius:6px; font-size:13px; line-height:16px; text-align:center; font-weight:900; flex:none; }

/* ---------- main / nav ---------- */
main { flex:1; overflow-y:auto; overflow-x:hidden; padding:12px 12px 18px; -webkit-overflow-scrolling:touch; }
nav { display:flex; background:linear-gradient(180deg, rgba(30,19,12,.96), rgba(16,10,6,.98)); border-top:1px solid var(--line); padding:4px 4px calc(4px + var(--safe-b)); }
nav button { flex:1; background:none; border:0; color:var(--dim2); padding:5px 0 4px; font-size:11px; font-weight:800; cursor:pointer; position:relative; border-radius:12px; }
nav button .ni { display:block; font-size:24px; line-height:28px; filter:grayscale(.6) brightness(.8); transition:transform .15s; }
nav button.on { color:var(--gold); background:linear-gradient(180deg,#ffc83d22,#ffc83d05); }
nav button.on .ni { filter:none; transform:translateY(-2px) scale(1.12); }
nav button .dot { position:absolute; top:3px; right:calc(50% - 20px); min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--red); color:#fff; font-size:10px; line-height:16px; box-shadow:0 0 0 2px #1a1008; }

/* ---------- panels ---------- */
.card { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:12px; margin-bottom:12px; box-shadow:0 8px 20px #0006, inset 0 1px 0 #ffffff12; }
.card.glow { border-color:#ffc83d88; box-shadow:0 0 0 1px #ffc83d33, 0 8px 24px #0008, inset 0 0 30px #ffc83d14; }
.h { font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; color:var(--gold); margin:4px 2px 8px; text-shadow:0 2px 3px #000; display:flex; align-items:center; gap:8px; }
.h .dim { text-transform:none; letter-spacing:0; font-weight:600; margin-left:auto; }
.title { font-size:22px; font-weight:900; text-shadow:0 3px 6px #000; margin:2px 2px 10px; }

/* ---------- buttons ---------- */
.btn { position:relative; border:0; border-radius:14px; padding:10px 16px; font-weight:900; font-size:15px; cursor:pointer; color:#3a1d00; background:linear-gradient(180deg,#ffe27a,#ffb400 60%,#f09000); box-shadow:0 4px 0 #9a5800, 0 8px 14px #0007, inset 0 1px 0 #fff8; text-shadow:0 1px 0 #fff6; transition:transform .08s, box-shadow .08s, filter .2s; }
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 #9a5800, 0 3px 8px #0007, inset 0 1px 0 #fff8; }
.btn:disabled { filter:grayscale(.85) brightness(.7); cursor:default; }
.btn.red { color:#fff; text-shadow:0 2px 0 #7a1010; background:linear-gradient(180deg,#ff7a5c,#e8443a 55%,#b3221b); box-shadow:0 5px 0 #7a1410, 0 10px 18px #0008, inset 0 1px 0 #fff6; }
.btn.red:active { box-shadow:0 1px 0 #7a1410; }
.btn.green { color:#032b10; text-shadow:0 1px 0 #fff6; background:linear-gradient(180deg,#8ff5a8,#3fd46b 60%,#22a64a); box-shadow:0 4px 0 #136b2c, 0 8px 14px #0007, inset 0 1px 0 #fff8; }
.btn.blue { color:#fff; text-shadow:0 1px 0 #0b3a6b; background:linear-gradient(180deg,#7cc8ff,#3fa9ff 60%,#1f7fd6); box-shadow:0 4px 0 #0e4f8a, 0 8px 14px #0007, inset 0 1px 0 #fff8; }
.btn.dark { color:var(--text); text-shadow:none; background:linear-gradient(180deg,#4a3526,#2e2017); box-shadow:0 3px 0 #150d08, 0 6px 12px #0006, inset 0 1px 0 #ffffff1a; }
.btn.star { color:#3a1d00; background:linear-gradient(180deg,#fff0a8,#ffcf3d 55%,#ffa800); }
.btn.sm { padding:7px 11px; font-size:13px; border-radius:11px; box-shadow:0 3px 0 #9a5800, 0 5px 10px #0006, inset 0 1px 0 #fff8; }
.btn.sm.dark { box-shadow:0 3px 0 #150d08; }
.btn.sm.green { box-shadow:0 3px 0 #136b2c; }
.btn.sm.blue { box-shadow:0 3px 0 #0e4f8a; }
.btn.wide { width:100%; }
.btn .sub { display:block; font-size:12px; font-weight:800; opacity:.85; }
.link { color:var(--gold); cursor:pointer; text-decoration:underline; text-underline-offset:2px; }

/* ---------- arena tab ---------- */
.stage { position:relative; border-radius:22px; overflow:hidden; border:1px solid #ffc83d55; margin-bottom:12px; box-shadow:0 10px 26px #0009; background:url(assets/arena_bg_web.jpg) center 62%/cover; min-height:250px; }
.stage::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#0000 30%,#000a 100%), radial-gradient(ellipse at 50% 85%, #ffb40033, #0000 60%); }
.fighters { position:relative; display:grid; grid-template-columns:1fr 46px 1fr; align-items:end; padding:10px 6px 0; min-height:200px; }
.fighter { text-align:center; position:relative; }
.fighter img.body { height:165px; max-width:100%; object-fit:contain; filter:drop-shadow(0 10px 8px #000c); }
.fighter.foe img.body { transform:scaleX(-1); }
.fighter .shadow { position:absolute; left:15%; right:15%; bottom:2px; height:14px; border-radius:50%; background:radial-gradient(#000a,#0000 70%); z-index:-1; }
.vs { align-self:center; font-size:30px; font-weight:900; font-style:italic; color:var(--gold); text-shadow:0 3px 0 #7a1010, 0 0 18px #ff6a00, 0 6px 10px #000; transform:translateY(-30px); animation:pulse 1.6s infinite; }
.plates { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:6px 8px 10px; }
.plate { background:#000b; border:1px solid #ffffff22; border-radius:12px; padding:6px 8px; min-width:0; }
.plate .pn { font-weight:900; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plate .ps { font-size:11.5px; color:var(--dim); display:flex; gap:8px; flex-wrap:wrap; }
.plate.foe { text-align:right; } .plate.foe .ps { justify-content:flex-end; }
.reroll { position:absolute; top:8px; right:8px; z-index:2; background:#000a; color:var(--text); border:1px solid #ffffff33; border-radius:10px; padding:4px 8px; font-size:12px; font-weight:800; cursor:pointer; }
.fightbtn { width:100%; font-size:26px; letter-spacing:.06em; padding:14px 10px 12px; border-radius:20px; margin:2px 0 6px; }
.fightbtn .sub { font-size:13px; letter-spacing:0; margin-top:2px; }
.fightbtn.go { animation:breathe 1.8s ease-in-out infinite; }
.cprog { display:flex; align-items:center; gap:10px; }
.cprog img { width:54px; height:44px; object-fit:contain; filter:drop-shadow(0 4px 6px #000a); }
.pips { display:flex; gap:5px; margin-top:4px; }
.pips i { flex:1; height:9px; border-radius:5px; background:#000a; border:1px solid #fff2; }
.pips i.on { background:linear-gradient(90deg,var(--gold),var(--gold2)); box-shadow:0 0 8px #ffb40099; }
.banner { display:flex; align-items:center; gap:10px; cursor:pointer; }
.banner .bi { font-size:30px; width:44px; text-align:center; flex:none; }
.banner .bi img { width:46px; height:40px; object-fit:contain; }
.banner.offer { background:linear-gradient(100deg, rgba(120,40,160,.9), rgba(200,60,90,.88)); border-color:#ff9ad580; }
.banner.daily { background:linear-gradient(100deg, rgba(30,110,60,.92), rgba(30,80,40,.88)); border-color:#7dffa580; }
.banner.tip { background:linear-gradient(100deg, rgba(30,70,130,.9), rgba(25,45,90,.9)); border-color:#7cc8ff80; }
.timer { font-variant-numeric:tabular-nums; font-weight:800; }
.tag { display:inline-block; font-size:10px; font-weight:900; padding:1px 6px; border-radius:6px; background:#0007; border:1px solid #fff3; vertical-align:middle; }
.tag.bot { background:#3a4a66; }
.tag.hot { background:var(--red); border-color:#fff5; }
.tag.prem { background:linear-gradient(90deg,#ffcf3d,#ff9d1c); color:#3a1d00; border:0; }

/* ---------- hero tab ---------- */
.herobox { display:grid; grid-template-columns:64px 1fr 64px; gap:6px; align-items:center; }
.herocol { display:flex; flex-direction:column; gap:8px; }
.heroimg { position:relative; text-align:center; min-height:220px; display:flex; align-items:flex-end; justify-content:center; }
.heroimg::before { content:''; position:absolute; left:8%; right:8%; top:12%; bottom:6%; border-radius:50%; background:radial-gradient(circle, #ffc83d44 0%, #ff8a0022 45%, #0000 70%); }
.heroimg img { position:relative; width:100%; max-height:230px; object-fit:contain; filter:drop-shadow(0 10px 10px #000c); }
.slot { width:64px; height:64px; border-radius:14px; position:relative; display:flex; align-items:center; justify-content:center; font-size:30px; cursor:pointer; background:radial-gradient(circle at 50% 35%, #ffffff22, #0000 60%), var(--rc, #3a2a1f); border:2px solid var(--rb, #ffffff33); box-shadow:inset 0 0 14px #0009, 0 4px 8px #0008; }
.slot.empty { background:#0006; border:2px dashed #ffffff33; font-size:22px; filter:grayscale(1); opacity:.75; }
.slot .sl { position:absolute; bottom:-1px; left:0; right:0; font-size:9px; font-weight:800; color:#fffc; text-shadow:0 1px 2px #000; text-align:center; }
.slot .ilv { position:absolute; top:-6px; right:-6px; background:#000c; border:1px solid var(--rb, #fff5); color:#fff; font-size:10px; font-weight:900; border-radius:8px; padding:0 4px; }
.r-common { --rc:linear-gradient(160deg,#59606b,#2e3238); --rb:var(--r-common); }
.r-uncommon { --rc:linear-gradient(160deg,#2f8a49,#174526); --rb:var(--r-uncommon); }
.r-rare { --rc:linear-gradient(160deg,#2a6fb5,#15365c); --rb:var(--r-rare); }
.r-epic { --rc:linear-gradient(160deg,#7a3fc0,#3a1d63); --rb:var(--r-epic); }
.r-legendary { --rc:linear-gradient(160deg,#d98a10,#6b3a05); --rb:var(--r-legendary); box-shadow:inset 0 0 14px #0009, 0 0 14px #ffb02088, 0 4px 8px #0008; }
.rt { font-weight:900; } .rt.common { color:var(--r-common); } .rt.uncommon { color:var(--r-uncommon); } .rt.rare { color:var(--r-rare); } .rt.epic { color:var(--r-epic); } .rt.legendary { color:var(--r-legendary); }
.namebar { display:flex; align-items:center; gap:8px; justify-content:center; margin-top:4px; }
.namebar .nm { font-size:22px; font-weight:900; text-shadow:0 3px 5px #000; max-width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.edit { background:#0008; border:1px solid #ffffff33; color:#fff; border-radius:10px; width:32px; height:32px; font-size:16px; cursor:pointer; }
.stat { display:flex; align-items:center; gap:10px; padding:7px 2px; border-bottom:1px solid #ffffff12; }
.stat:last-child { border-bottom:0; }
.stat .si { width:30px; height:30px; border-radius:9px; background:#0007; display:flex; align-items:center; justify-content:center; font-size:17px; flex:none; }
.stat .sv { font-weight:900; font-size:16px; min-width:58px; text-align:right; font-variant-numeric:tabular-nums; }
.plusbtn { width:34px; height:30px; border-radius:9px; border:0; font-weight:900; font-size:18px; cursor:pointer; color:#032b10; background:linear-gradient(180deg,#8ff5a8,#3fd46b); box-shadow:0 3px 0 #136b2c; }
.plusbtn:active { transform:translateY(2px); box-shadow:0 1px 0 #136b2c; }
.sp-badge { background:linear-gradient(90deg,#3fd46b,#22a64a); color:#032b10; font-weight:900; border-radius:10px; padding:2px 8px; font-size:12px; animation:pulse 1.4s infinite; }
.inv { display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; }
.inv .slot { width:auto; aspect-ratio:1; height:auto; font-size:26px; }
.power { display:inline-flex; align-items:center; gap:4px; background:#0008; border:1px solid #ffc83d55; border-radius:12px; padding:3px 10px; font-weight:900; color:var(--gold); }

/* ---------- item modal ---------- */
.itemhead { display:flex; gap:12px; align-items:center; }
.itemhead .slot { width:72px; height:72px; font-size:36px; flex:none; cursor:default; }
.stline { display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px dashed #ffffff1a; font-weight:700; }
.up { color:var(--green); } .down { color:#ff6b6b; }
.btns { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.btns .btn { flex:1; }

/* ---------- chests ---------- */
.chestcard { display:grid; grid-template-columns:110px 1fr; gap:10px; align-items:center; }
.chestimg { position:relative; text-align:center; }
.chestimg img { width:110px; height:94px; object-fit:contain; filter:drop-shadow(0 8px 8px #000b); }
.chestimg .cnt { position:absolute; top:-2px; right:-2px; background:var(--red); color:#fff; font-weight:900; border-radius:11px; padding:1px 8px; font-size:13px; box-shadow:0 0 0 2px #1a1008; }
.tint-wood { filter:sepia(.7) saturate(.8) hue-rotate(-12deg) brightness(.85) drop-shadow(0 8px 8px #000b) !important; }
.tint-legend { filter:hue-rotate(235deg) saturate(1.4) drop-shadow(0 0 14px #b46cffaa) !important; }
.tint-gold { filter:drop-shadow(0 0 12px #ffc83d88) drop-shadow(0 8px 8px #000b) !important; }
.odds { display:flex; flex-direction:column; gap:3px; margin-top:6px; }
.odd { display:grid; grid-template-columns:86px 1fr 40px; align-items:center; gap:6px; font-size:11.5px; font-weight:700; }
.odd .ob { height:7px; border-radius:4px; background:#0009; overflow:hidden; }
.odd .ob i { display:block; height:100%; border-radius:4px; }
.odd .op { text-align:right; font-variant-numeric:tabular-nums; }
.legal { font-size:11.5px; color:var(--dim); line-height:1.45; }
.prod { display:flex; gap:10px; align-items:center; }
.prod .pi { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:28px; background:#0007; border:1px solid #ffffff22; flex:none; overflow:hidden; }
.prod .pi img { width:54px; height:46px; object-fit:contain; }
.starter { background:linear-gradient(135deg, rgba(150,40,190,.92), rgba(220,70,70,.9)); border-color:#ffb3e6aa; position:relative; overflow:hidden; }
.starter::after { content:''; position:absolute; top:-50%; left:-30%; width:40%; height:200%; background:linear-gradient(90deg,#fff0,#fff3,#fff0); transform:rotate(20deg); animation:shine 3.2s infinite; }
.premium { background:linear-gradient(135deg, rgba(110,70,10,.95), rgba(60,35,10,.95)); border-color:#ffc83daa; }
.ribbon { position:absolute; top:10px; right:-30px; transform:rotate(35deg); background:var(--gold); color:#3a1d00; font-weight:900; font-size:11px; padding:2px 34px; box-shadow:0 2px 6px #0008; }

/* ---------- quests ---------- */
.days { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.day { background:#0007; border:1px solid #ffffff22; border-radius:11px; text-align:center; padding:5px 2px; font-size:10.5px; font-weight:800; position:relative; min-height:62px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; }
.day .dr { font-size:18px; line-height:22px; }
.day .dr img { width:24px; height:22px; object-fit:contain; vertical-align:middle; }
.day.done { opacity:.5; } .day.done::after { content:'✔'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--green); text-shadow:0 2px 3px #000; }
.day.now { border-color:var(--gold); background:linear-gradient(180deg,#ffc83d44,#0007); box-shadow:0 0 12px #ffc83d66; animation:pulse 1.6s infinite; }
.quest { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #ffffff12; }
.quest:last-child { border-bottom:0; }
.quest .qi { width:38px; height:38px; border-radius:11px; background:#0007; display:flex; align-items:center; justify-content:center; font-size:20px; flex:none; }
.qbar { height:8px; background:#0009; border-radius:5px; overflow:hidden; margin-top:4px; border:1px solid #fff1; }
.qbar i { display:block; height:100%; background:linear-gradient(90deg,#7dffa5,#3fd46b); }
.rw { font-size:12px; color:var(--gold); font-weight:800; display:inline-flex; gap:6px; align-items:center; flex-wrap:wrap; }
.rw img { width:16px; height:16px; object-fit:contain; vertical-align:-3px; }

/* ---------- top ---------- */
.lb { display:flex; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px solid #ffffff10; }
.lb.me { background:linear-gradient(90deg,#ffc83d33,#ffc83d08); border-radius:12px; border-bottom-color:transparent; }
.lb .rk { width:30px; text-align:center; font-weight:900; color:var(--dim); font-size:15px; }
.lb .fa { position:relative; width:36px; height:36px; border-radius:10px; overflow:hidden; border:1px solid #ffffff33; flex:none; display:flex; align-items:center; justify-content:center; background:#5a3a1f; }
.lb .fa .mono { font-weight:900; font-size:17px; color:#fff; text-shadow:0 1px 2px #0008; }
.lb .fa img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lb .rt2 { font-weight:900; color:var(--gold); }
.myrank { display:flex; align-items:center; gap:12px; }
.myrank .big { font-size:34px; font-weight:900; color:var(--gold); text-shadow:0 3px 0 #7a3d00; }
.reflink { background:#0009; border:1px dashed #ffc83d77; border-radius:12px; padding:8px 10px; font-size:12.5px; word-break:break-all; user-select:text; -webkit-user-select:text; }

/* ---------- overlay layer ---------- */
#layer > div { position:fixed; inset:0; z-index:50; }
.modal-bg { background:rgba(0,0,0,.72); display:flex; align-items:center; justify-content:center; padding:18px; animation:fadein .18s; }
.modal { background:linear-gradient(180deg,#3a2718,#22160e); border:1px solid #ffc83d66; border-radius:22px; padding:16px; width:100%; max-width:420px; max-height:86vh; overflow:auto; box-shadow:0 20px 50px #000c, inset 0 1px 0 #ffffff1a; animation:pop .22s cubic-bezier(.2,1.4,.5,1); }
.modal .mt { font-size:19px; font-weight:900; margin-bottom:8px; text-shadow:0 2px 3px #000; }
.modal pre { white-space:pre-wrap; font:inherit; font-size:13.5px; margin:0; color:var(--dim); }
.inp { width:100%; font:inherit; font-size:18px; font-weight:800; padding:12px 14px; border-radius:14px; border:2px solid #ffc83d88; background:#0009; color:#fff; outline:none; }
.inp:focus { border-color:var(--gold); box-shadow:0 0 0 3px #ffc83d33; }

/* ---------- battle ---------- */
.battle { background:url(assets/arena_bg_web.jpg) center 55%/cover #120b07; display:flex; flex-direction:column; }
.battle::before { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#000a 0%,#0003 35%,#0005 70%,#000d 100%); pointer-events:none; }
.bt-top { position:relative; display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; padding:12px 12px 6px; padding-top:calc(12px + env(safe-area-inset-top,0px)); max-width:520px; width:100%; margin:0 auto; }
.hpw .hn { font-weight:900; font-size:14px; text-shadow:0 2px 3px #000; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hpw.r { text-align:right; }
.hpbar { position:relative; height:18px; border-radius:9px; background:#000c; border:2px solid #ffffff44; overflow:hidden; margin-top:3px; }
.hpbar > i { position:absolute; inset:0; transform-origin:left; background:linear-gradient(180deg,#8ff5a8,#22a64a); transition:transform .35s ease-out; }
.hpbar > b { position:absolute; inset:0; transform-origin:left; background:#fff6; transition:transform .9s ease-out .25s; }
.hpw.r .hpbar > i, .hpw.r .hpbar > b { transform-origin:right; background:linear-gradient(180deg,#ff9a8a,#e8443a); }
.hpw.r .hpbar > b { background:#fff6; }
.hpbar > span { position:absolute; inset:0; text-align:center; font-size:11px; font-weight:900; line-height:14px; text-shadow:0 1px 2px #000; }
.bt-round { font-weight:900; color:var(--gold); font-size:13px; text-align:center; text-shadow:0 2px 3px #000; }
.bt-stage { position:relative; flex:1; display:grid; grid-template-columns:1fr 1fr; gap:4px; align-items:end; max-width:520px; width:100%; margin:0 auto; padding:0 10px 6%; }
.bf { position:relative; text-align:center; }
.bf img { width:118%; margin-left:-9%; max-height:46vh; object-fit:contain; filter:drop-shadow(0 14px 10px #000c); transition:transform .14s ease-out, filter .14s; }
.bf.foe img { transform:scaleX(-1); }
.bf.lunge img { transform:translateX(28%) scale(1.06); }
.bf.foe.lunge img { transform:scaleX(-1) translateX(28%) scale(1.06); }
.bf.hit img { animation:shake .3s; filter:drop-shadow(0 14px 10px #000c) brightness(1.6) sepia(1) hue-rotate(-40deg) saturate(4); }
.bf.foe.hit img { animation:shakef .3s; }
.bf.dodge img { transform:translateX(-18%) rotate(-6deg); opacity:.7; }
.bf.foe.dodge img { transform:scaleX(-1) translateX(-18%) rotate(-6deg); opacity:.7; }
.bf.dead img { filter:grayscale(1) brightness(.5) drop-shadow(0 14px 10px #000c); transform:rotate(-8deg) translateY(10px); }
.bf.foe.dead img { transform:scaleX(-1) rotate(-8deg) translateY(10px); }
.bf .shadow { position:absolute; left:15%; right:15%; bottom:-4px; height:18px; border-radius:50%; background:radial-gradient(#000c,#0000 70%); z-index:-1; }
.fl { position:absolute; left:50%; top:20%; transform:translateX(-50%); font-weight:900; font-size:30px; color:#fff; pointer-events:none; white-space:nowrap; text-shadow:0 3px 0 #000, 0 0 10px #000; animation:floatup 1s ease-out forwards; z-index:3; }
.fl.crit { color:#ffb400; font-size:38px; }
.fl.block { color:#7cc8ff; }
.fl.miss { color:#ddd; font-size:24px; }
.bt-log { position:relative; max-width:520px; width:100%; margin:0 auto; padding:0 12px; height:76px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:2px; font-size:12.5px; }
.bt-log div { background:#0009; border-radius:8px; padding:2px 8px; animation:fadein .2s; }
.bt-bot { position:relative; display:flex; gap:8px; justify-content:center; padding:10px 12px calc(12px + var(--safe-b)); max-width:520px; width:100%; margin:0 auto; }
.result { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:18px; background:#000a; animation:fadein .25s; z-index:5; }
.result .rbox { width:100%; max-width:400px; text-align:center; background:linear-gradient(180deg,#3a2718f2,#1c120bf2); border:2px solid var(--gold); border-radius:24px; padding:18px 16px 16px; box-shadow:0 0 40px #ffb40055, 0 20px 50px #000; animation:pop .35s cubic-bezier(.2,1.5,.5,1); }
.result .rt3 { font-size:40px; font-weight:900; letter-spacing:.04em; text-shadow:0 4px 0 #0008, 0 0 24px currentColor; }
.result.win .rt3 { color:var(--gold); } .result.lose .rt3 { color:#ff7a6a; }
.rewards { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:12px 0; }
.rwd { background:#0008; border:1px solid #ffffff22; border-radius:14px; padding:8px 10px; min-width:76px; animation:pop .4s cubic-bezier(.2,1.5,.5,1) backwards; }
.rwd .rv { font-size:18px; font-weight:900; display:flex; align-items:center; gap:4px; justify-content:center; }
.rwd .rv img { width:22px; height:22px; object-fit:contain; }
.rwd .rl { font-size:10.5px; color:var(--dim); font-weight:700; }
.lvup { margin:6px 0; padding:8px; border-radius:14px; background:linear-gradient(90deg,#3fa9ff44,#b46cff44); border:1px solid #7cc8ff88; font-weight:900; }

/* ---------- chest opening ---------- */
.opening { background:radial-gradient(circle at 50% 45%, #5a3a12 0%, #1a1008 60%, #0a0604 100%); display:flex; flex-direction:column; align-items:center; padding:20px 12px; overflow-x:hidden; overflow-y:auto; }
.raysclip { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.opbox { position:relative; width:100%; max-width:520px; margin:auto; display:flex; flex-direction:column; align-items:center; }
.ophint { position:relative; z-index:3; margin-top:12px; width:100%; max-width:360px; text-align:center; }
.opbtns { flex-wrap:nowrap; justify-content:center; }
.opbtns .btn { flex:1 1 0; min-width:0; white-space:nowrap; padding-left:10px; padding-right:10px; }
.rays { position:absolute; width:150vmax; height:150vmax; left:50%; top:42%; margin:-75vmax 0 0 -75vmax; background:repeating-conic-gradient(from 0deg, #ffc83d22 0deg 8deg, #0000 8deg 20deg); animation:spin 14s linear infinite; opacity:0; transition:opacity .6s; pointer-events:none; }
.opening.burst .rays { opacity:1; }
.bigchest { width:min(70vw,300px); position:relative; z-index:1; filter:drop-shadow(0 20px 20px #000c); }
.bigchest.shake { animation:wobble .5s infinite; }
.bigchest.pop { animation:chestpop .5s forwards; }
.flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:2; }
.flash.on { animation:flash .6s; }
.loot { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; position:relative; z-index:3; margin-top:10px; max-width:100%; }
.lootcard { width:104px; max-width:calc((100% - 16px) / 3); min-width:92px; border-radius:16px; padding:10px 6px; text-align:center; background:linear-gradient(180deg,#000a,#000d); border:2px solid var(--rb); box-shadow:0 0 22px var(--rb); animation:cardin .55s cubic-bezier(.2,1.4,.5,1) backwards; }
.lootcard .slot { margin:0 auto 6px; cursor:default; }
.lootcard .ln { font-size:12px; font-weight:800; min-height:30px; }
.lootcard .lr { font-size:11px; font-weight:900; }
.optitle { position:relative; z-index:3; font-size:24px; font-weight:900; color:var(--gold); text-shadow:0 3px 0 #7a3d00, 0 6px 12px #000; margin-bottom:10px; text-align:center; }

/* ---------- tutorial ---------- */
.tut { position:absolute; inset:0; overflow:hidden; z-index:40; pointer-events:none; }
.tut .hole { position:absolute; border-radius:20px; box-shadow:0 0 0 9999px rgba(0,0,0,.72), 0 0 0 3px var(--gold), 0 0 24px 6px #ffc83daa; transition:all .3s; animation:holepulse 1.4s infinite; }
.tut .tip { position:absolute; left:10px; right:10px; pointer-events:auto; background:linear-gradient(180deg,#3a2718,#22160e); border:2px solid var(--gold); border-radius:18px; padding:12px 14px; box-shadow:0 14px 40px #000c; display:flex; gap:10px; align-items:flex-start; animation:pop .3s cubic-bezier(.2,1.4,.5,1); }
.tut .tip img { width:58px; height:58px; border-radius:14px; object-fit:cover; border:2px solid var(--gold); flex:none; }
.tut .tip .tt { font-weight:900; font-size:16px; margin-bottom:2px; }
.tut .tip .tx { font-size:13.5px; color:var(--dim); }
.tut .tipfoot { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 8px; margin-top:8px; }
.tut .tipfoot .btn { white-space:nowrap; }
.tut .skip { pointer-events:auto; background:none; color:var(--dim2); border:0; padding:4px 0; font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:2px; cursor:pointer; white-space:nowrap; margin-left:auto; }
.tut .steps { font-size:11px; font-weight:900; color:var(--gold); letter-spacing:.06em; }
.tut .finger { position:absolute; line-height:1; font-size:38px; pointer-events:none; animation:tap 1s infinite; filter:drop-shadow(0 4px 4px #000); }
.welcome { text-align:center; }
.welcome img { width:190px; margin:-10px auto 0; display:block; filter:drop-shadow(0 12px 12px #000b); animation:float 2.4s ease-in-out infinite; }
.welcome .wskip { display:block; margin:10px auto 0; padding:8px 14px; background:none; border:0; font:inherit; font-size:15px; font-weight:800; color:var(--gold); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }

/* ---------- toast ---------- */
#toast { position:fixed; left:50%; width:max-content; max-width:90vw !important; bottom:calc(86px + var(--safe-b)); transform:translateX(-50%); background:rgba(20,12,8,.96); border:1px solid #ffc83d77; padding:10px 16px; border-radius:14px; z-index:100; max-width:90%; text-align:center; font-weight:700; box-shadow:0 10px 30px #000a; animation:pop .2s; }

/* ---------- animations ---------- */
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.06); } }
@keyframes breathe { 0%,100% { transform:scale(1); box-shadow:0 5px 0 #7a1410, 0 10px 18px #0008, 0 0 0 0 #ff6a0066; } 50% { transform:scale(1.02); box-shadow:0 5px 0 #7a1410, 0 10px 18px #0008, 0 0 0 10px #ff6a0000; } }
@keyframes shine { 0% { left:-40%; } 60%,100% { left:130%; } }
@keyframes fadein { from { opacity:0; } to { opacity:1; } }
@keyframes pop { from { transform:scale(.7); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes floatup { 0% { opacity:0; transform:translate(-50%,10px) scale(.6); } 15% { opacity:1; transform:translate(-50%,0) scale(1.15); } 100% { opacity:0; transform:translate(-50%,-60px) scale(1); } }
@keyframes shake { 0%,100% { translate:0; } 25% { translate:-10px; } 50% { translate:8px; } 75% { translate:-5px; } }
@keyframes shakef { 0%,100% { translate:0; } 25% { translate:10px; } 50% { translate:-8px; } 75% { translate:5px; } }
@keyframes wobble { 0%,100% { transform:rotate(0) scale(1); } 25% { transform:rotate(-6deg) scale(1.03); } 75% { transform:rotate(6deg) scale(1.03); } }
@keyframes chestpop { 0% { transform:scale(1); } 40% { transform:scale(1.25); } 100% { transform:scale(.55) translateY(-40%); opacity:.35; } }
@keyframes flash { 0% { opacity:0; } 20% { opacity:.9; } 100% { opacity:0; } }
@keyframes cardin { from { transform:translateY(60px) rotateY(90deg) scale(.6); opacity:0; } to { transform:none; opacity:1; } }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes holepulse { 0%,100% { box-shadow:0 0 0 9999px rgba(0,0,0,.72), 0 0 0 3px var(--gold), 0 0 24px 6px #ffc83daa; } 50% { box-shadow:0 0 0 9999px rgba(0,0,0,.72), 0 0 0 5px var(--gold), 0 0 34px 12px #ffc83dcc; } }
@keyframes tap { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-4px,-8px) scale(.9); } }
@media (max-height:640px) { .fighter img.body { height:130px; } .stage { min-height:210px; } .fightbtn { font-size:22px; padding:11px; } }
img.ic { width:18px; height:18px; object-fit:contain; vertical-align:-4px; display:inline-block; }
.chip img.ic { width:20px; height:20px; }
.btn img.ic { width:18px; height:18px; margin:0 1px; }
.dim img.ic, .rw img.ic { width:15px; height:15px; vertical-align:-3px; }

/* ---------- Telegram Stars icon (SVG, без emoji-шрифта) ---------- */
img.ic.star { width:1.05em; height:1.05em; vertical-align:-.16em; margin:0 1px; }
.stars { display:inline-flex; align-items:center; gap:2px; white-space:nowrap; vertical-align:middle; }
.stars img.ic.star { vertical-align:0; }
.btn img.ic.star { width:1.05em; height:1.05em; }
.shopbtn img.ic.star { width:14px; height:14px; vertical-align:-2px; }
img.ic.big { width:24px; height:24px; vertical-align:-4px; }
.banner .bi img.ic.big { width:34px; height:34px; }
.quest .qi img.ic.big { width:22px; height:22px; vertical-align:0; }

/* ---------- VS intro (сразу после «В БОЙ») ---------- */
.vsintro { background:radial-gradient(circle at 50% 45%, #5a2a12ee 0%, #1a1008f2 60%, #0a0604 100%); display:flex; align-items:center; justify-content:center; animation:fadein .15s; }
.vsbox { width:100%; max-width:520px; padding:0 12px; text-align:center; }
.vsrow { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:4px; }
.vsside img { width:100%; max-width:170px; max-height:34vh; object-fit:contain; filter:drop-shadow(0 12px 10px #000c); animation:vsl .45s cubic-bezier(.2,1.3,.5,1) both; }
.vsside.foe img { transform:scaleX(-1); animation-name:vsr; }
.vsn { font-weight:900; font-size:15px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 2px 3px #000; }
.vsbig { font-size:54px; font-weight:900; font-style:italic; color:var(--gold); text-shadow:0 4px 0 #7a1010, 0 0 24px #ff6a00, 0 8px 12px #000; animation:vspop .5s cubic-bezier(.2,1.6,.5,1) both .1s; }
.vsload { margin-top:18px; display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--dim); }
.spin { width:16px; height:16px; border-radius:50%; border:3px solid #ffc83d44; border-top-color:var(--gold); animation:spin .7s linear infinite; }
@keyframes vsl { from { transform:translateX(-60%); opacity:0; } to { transform:none; opacity:1; } }
@keyframes vsr { from { transform:scaleX(-1) translateX(-60%); opacity:0; } to { transform:scaleX(-1); opacity:1; } }
@keyframes vspop { from { transform:scale(2.4); opacity:0; } to { transform:scale(1); opacity:1; } }