:root{
  --bg:#f2f2f7; --bg2:#e9e9f0; --card:rgba(255,255,255,.72); --line:rgba(60,60,67,.12);
  --text:#1c1c1e; --muted:#6e6e73; --accent:#0a84ff; --accent2:#5e5ce6;
  --green:#30d158; --red:#ff453a; --orange:#ff9f0a; --gold:#ffcc00; --mp:#64d2ff;
  --r:22px; --shadow:0 10px 30px rgba(0,0,0,.08);
  --gD:#8e8e93; --gC:#34c759; --gB:#0a84ff; --gA:#bf5af2; --gS:#ff9f0a;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#000; --bg2:#0d0d10; --card:rgba(28,28,30,.72); --line:rgba(255,255,255,.1);
  --text:#f5f5f7; --muted:#98989d; --shadow:0 10px 30px rgba(0,0,0,.5);
}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font:16px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{background:radial-gradient(1200px 600px at 10% -10%,rgba(94,92,230,.18),transparent 60%),
  radial-gradient(900px 500px at 110% 10%,rgba(10,132,255,.16),transparent 60%),var(--bg)}
#app{max-width:520px;margin:0 auto;min-height:100%;position:relative}
.hidden{display:none!important}
.glass{background:var(--card);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.card{border-radius:var(--r);padding:18px;margin:12px 16px}
.label{font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:6px 0 10px}
.sub{color:var(--muted)} .small{font-size:13px;margin:-4px 0 10px}
.btn{appearance:none;border:0;border-radius:14px;padding:13px 16px;font:600 16px/1 inherit;font-family:inherit;
  background:rgba(120,120,128,.16);color:var(--text);cursor:pointer;transition:transform .12s, background .2s, opacity .2s}
.btn:active{transform:scale(.96)} .btn:disabled{opacity:.4}
.btn.primary{background:linear-gradient(180deg,#2b95ff,#0a7aff);color:#fff;box-shadow:0 6px 18px rgba(10,132,255,.35)}
.btn.big{width:100%;padding:16px;font-size:17px;margin-top:14px}
.btn.toggle.on{background:var(--green);color:#fff}
input{width:100%;border:1px solid var(--line);background:rgba(120,120,128,.12);color:var(--text);
  border-radius:14px;padding:13px 14px;font:inherit;outline:none}
input:focus{border-color:var(--accent)}

/* создание */
#create{padding-top:max(28px,env(safe-area-inset-top))}
.hero-head{text-align:center;padding:24px 16px 6px}
.logo{font-size:44px;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(135deg,#5e5ce6,#0a84ff 45%,#64d2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{border:1px solid var(--line);background:rgba(120,120,128,.1);border-radius:999px;padding:9px 14px;font-weight:600;font-size:15px;cursor:pointer;transition:.15s}
.chip.on{background:var(--accent);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(10,132,255,.35)}
.preview{margin-top:14px;padding:14px;border-radius:16px;background:rgba(120,120,128,.08);font-size:14px;color:var(--muted);min-height:44px}
.preview b{color:var(--text)}

/* шапка */
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;margin:0;border-radius:0 0 var(--r) var(--r);
  padding:calc(10px + env(safe-area-inset-top)) 16px 12px;border-top:0}
.avatar{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(135deg,#5e5ce6,#0a84ff);box-shadow:0 6px 16px rgba(94,92,230,.35)}
.who{flex:1;min-width:0} .hname{font-weight:700;font-size:17px} .hmeta{font-size:12px;color:var(--muted);margin-bottom:5px}
.gold{display:flex;align-items:center;gap:6px;font-weight:700;background:rgba(255,204,0,.15);padding:7px 11px;border-radius:999px}
.coin{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6b0,#ffcc00 55%,#c79100)}
.bar{height:6px;border-radius:99px;background:rgba(120,120,128,.18);overflow:hidden;flex:1}
.bar i{display:block;height:100%;width:0;border-radius:99px;transition:width .25s ease}
.bar.xp i{background:linear-gradient(90deg,#5e5ce6,#0a84ff)}
.bar.hp i{background:linear-gradient(90deg,#ff453a,#ff6961)} .bar.hp.me i{background:linear-gradient(90deg,#30d158,#7ee787)}
.bar.mp i{background:linear-gradient(90deg,#0a84ff,#64d2ff)}

#pages{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
/* охота */
.locs{display:flex;gap:10px;overflow-x:auto;padding:14px 16px 2px;scrollbar-width:none}
.locs::-webkit-scrollbar{display:none}
.loc{flex:0 0 auto;border-radius:18px;padding:12px 14px;min-width:132px;border:1px solid var(--line);background:var(--card);cursor:pointer;transition:.15s}
.loc.on{border-color:var(--accent);box-shadow:0 0 0 3px rgba(10,132,255,.18)}
.loc.lock{opacity:.45}
.loc .ln{font-weight:700;font-size:15px} .loc .lv{font-size:12px;color:var(--muted)}
.loc-title{text-align:center;font-weight:700;color:var(--muted);font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.mob{position:relative;text-align:center;padding:16px 0 10px}
.mob-emoji{font-size:92px;line-height:1.1;transition:transform .12s;user-select:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))}
.mob.hit .mob-emoji{transform:scale(.9) rotate(-4deg)}
.mob.dead .mob-emoji{opacity:.2;transform:scale(.7)}
.mob-name{font-weight:700;margin:4px 0 8px} .mob .bar{max-width:240px;margin:0 auto;height:8px}
.floats{position:absolute;inset:0;pointer-events:none}
.fl{position:absolute;left:50%;top:38%;font-weight:800;font-size:22px;animation:up .9s ease-out forwards;text-shadow:0 2px 8px rgba(0,0,0,.25)}
.fl.crit{color:var(--orange);font-size:28px} .fl.miss{color:var(--muted)} .fl.dmg{color:var(--red)} .fl.heal{color:var(--green)}
@keyframes up{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-70px)}}
.you .row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);margin:6px 0}
.you .row span:first-child{width:24px;font-weight:700} .you .row span:last-child{width:70px;text-align:right}
.actions{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:8px;margin-top:12px}
.log{margin-top:12px;font-size:13px;color:var(--muted);max-height:96px;overflow:hidden}
.log div{padding:2px 0;border-top:1px solid var(--line)} .log div:first-child{border-top:0;color:var(--text)}

/* предметы */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.item{aspect-ratio:1;border-radius:16px;background:rgba(120,120,128,.1);display:grid;place-items:center;position:relative;
  font-size:30px;cursor:pointer;border:2px solid transparent;transition:.15s}
.item:active{transform:scale(.95)} .item.sel{border-color:var(--accent)}
.item .en{position:absolute;right:6px;top:4px;font-size:11px;font-weight:800;color:var(--accent)}
.item .gr{position:absolute;left:6px;bottom:4px;font-size:11px;font-weight:800}
.item.eq::after{content:"E";position:absolute;left:6px;top:4px;font-size:10px;font-weight:800;color:#fff;background:var(--green);border-radius:6px;padding:1px 4px}
.gD{color:var(--gD)} .gC{color:var(--gC)} .gB{color:var(--gB)} .gA{color:var(--gA)} .gS{color:var(--gS)}
.statrow{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.statrow:first-of-type{border-top:0} .statrow b{font-variant-numeric:tabular-nums}
.slot{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.slot .ic{width:44px;height:44px;border-radius:12px;background:rgba(120,120,128,.1);display:grid;place-items:center;font-size:24px}
.slot .nm{flex:1} .slot .nm small{display:block;color:var(--muted)}
.forge-slot{margin-top:14px;min-height:64px;border-radius:16px;border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;gap:10px;color:var(--muted);padding:12px;text-align:center}
.shoprow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.shoprow:first-child{border-top:0} .shoprow .ic{font-size:26px;width:40px;text-align:center} .shoprow .nm{flex:1} .shoprow .nm small{display:block;color:var(--muted)}
.shoprow .btn{padding:10px 12px;font-size:14px}
.rank{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:15px}
.rank:first-child{border-top:0} .rank .n{width:22px;color:var(--muted);font-weight:700} .rank .nm{flex:1} .rank.me{color:var(--accent);font-weight:700}

/* таббар */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));z-index:6;
  width:min(488px,calc(100% - 24px));border-radius:26px;display:grid;grid-template-columns:repeat(5,1fr);padding:6px}
.tabbar button{appearance:none;border:0;background:none;color:var(--muted);font:600 11px/1 inherit;font-family:inherit;padding:8px 0;border-radius:20px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;transition:.15s}
.tabbar button .ic{font-size:20px;line-height:1}
.tabbar button.on{color:var(--accent);background:rgba(10,132,255,.12)}

/* шторка и тост */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:10;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet-in{width:100%;max-width:520px;border-radius:26px 26px 0 0;padding:20px 18px calc(24px + env(safe-area-inset-bottom));animation:rise .25s ease-out}
.sheet-in h3{margin:0 0 4px;font-size:20px} .sheet-in .btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
@keyframes rise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}} @keyframes fade{from{opacity:0}}
.toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translate(-50%,-80px);z-index:20;
  background:rgba(30,30,32,.92);color:#fff;padding:11px 18px;border-radius:999px;font-weight:600;font-size:14px;transition:transform .3s cubic-bezier(.2,.9,.3,1.2);max-width:90%;text-align:center}
.toast.show{transform:translate(-50%,0)}