/* style2.css — пиксельная кожа: бевелы, дизеринг, пиксель-шрифт, рамки редкости */
:root{
  --bg:#080a0e; --panel:#161b24; --panel2:#111519; --cellbg:#0d1116;
  --line:#2b3444; --line-hi:#4a5a72; --ink:#05070a;
  --accent:#ff6b35; --accent2:#ff8c5a; --accent-d:#a63f18;
  --text:#f0f2f7; --muted:#8b93a3; --dim:#5d6675;
  --ok:#45e08a; --bad:#e03b52; --gold:#ffb020; --cyan:#4fe3d6;
  --t1:#9aa0ac; --t2:#45e08a; --t3:#3fa7ff; --t4:#a45cf0; --t5:#ffb020; --t6:#ff6b35;
  --cell:56px; --gap:6px;
  --f:'Handjet','Courier New',monospace;
  --bev-in: inset 0 2px 0 #ffffff1f, inset 0 -2px 0 #00000080, inset 2px 0 0 #ffffff12, inset -2px 0 0 #00000059;
  --bev-out: 0 2px 0 #00000073, 0 0 0 2px #05070a;
  --dither: repeating-linear-gradient(45deg, #ffffff08 0 1px, transparent 1px 2px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);
  font-family:var(--f);font-weight:500;font-size:15px;letter-spacing:.3px;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
  background-image:radial-gradient(circle at 50% 0%,#1a2130 0%,#0a0d12 55%,#05070a 100%)}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:var(--dither);mix-blend-mode:overlay}
#app{position:fixed;inset:0;display:flex;flex-direction:column;z-index:1;
  padding:env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 4px)}

/* ---------- header ---------- */
#hdr{flex:0 0 46px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;
  background:linear-gradient(180deg,#1b2230,#121721);
  border-bottom:2px solid var(--ink);box-shadow:inset 0 2px 0 #ffffff12, 0 2px 0 #00000059}
.brand{display:flex;align-items:center;gap:6px;font-size:17px;letter-spacing:1px;text-transform:uppercase}
.brand b{color:var(--text);text-shadow:0 2px 0 #000}
.brand i{color:var(--accent);font-style:normal;font-size:12px;letter-spacing:2px}
.ghost-mini{width:22px;height:22px;display:inline-block;image-rendering:pixelated;
  background-size:contain;background-repeat:no-repeat;filter:drop-shadow(0 2px 0 #0008)}
.hud{display:flex;gap:6px;align-items:center;font-size:16px}
.hud-item{background:var(--panel);border:2px solid var(--ink);box-shadow:var(--bev-in);
  padding:3px 8px 2px;line-height:1;color:var(--text);letter-spacing:1px}
.hud-item .sub{color:var(--dim);font-size:12px}
.hud-item.gold{color:var(--gold);text-shadow:0 1px 0 #000}
.hud-item.gold i{font-style:normal;margin-right:4px}

/* ---------- hero ---------- */
#heroZone{flex:0 0 auto;display:flex;gap:9px;align-items:center;padding:6px 12px 2px}
#heroArt{width:44px;height:44px;image-rendering:pixelated;background:radial-gradient(circle at 50% 35%,#212b3a,#0d1117);
  border:2px solid var(--ink);box-shadow:var(--bev-in),0 0 0 2px #00000040;padding:1px}
.heroStats{flex:1;display:flex;flex-direction:column;gap:5px;min-width:0}
.hpRow{display:flex;align-items:center;gap:7px}
.hpLabel{font-size:12px;color:var(--muted);letter-spacing:2px}
.hpBar{flex:1;height:14px;background:#0a0e13;border:2px solid var(--ink);box-shadow:inset 0 2px 0 #0000008c;overflow:hidden}
.hpFill{height:100%;width:100%;background:linear-gradient(180deg,#6ef2a8,#2fbf6d 55%,#1d8a4d);
  box-shadow:inset 0 2px 0 #ffffff45, inset 0 -2px 0 #00000033;transition:width .18s ease-out;
  background-size:100% 100%;position:relative}
.hpFill::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#00000026 0 1px,transparent 1px 7px)}
.hpNum{font-size:13px;color:var(--text);min-width:64px;text-align:right;letter-spacing:.5px;text-shadow:0 1px 0 #000}
.statRow{display:flex;gap:4px;flex-wrap:wrap}
.st{background:var(--panel2);border:2px solid var(--ink);box-shadow:inset 0 1px 0 #ffffff14;
  padding:1px 5px 0;font-size:13px;color:var(--muted);letter-spacing:.5px}
.st i{font-style:normal;color:var(--accent);margin-right:3px;filter:drop-shadow(0 1px 0 #000)}
.st b{color:var(--text);font-weight:700}

/* ---------- grid ---------- */
#gridWrap{flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center;min-height:0}
#grid{position:relative;display:grid;grid-template-columns:repeat(5,var(--cell));grid-auto-rows:var(--cell);
  gap:var(--gap);padding:var(--gap);background:
    linear-gradient(180deg,#1a212c,#12171f);
  border:3px solid var(--ink);
  box-shadow:inset 0 0 0 2px #00000059, inset 0 3px 0 #ffffff10, 0 6px 0 #00000059, 0 0 30px #00000073}
.cell{width:var(--cell);height:var(--cell);background:var(--cellbg);position:relative;
  box-shadow:inset 0 2px 0 #000000a6, inset 0 0 0 1px #ffffff0d}
.cell::after{content:'';position:absolute;inset:0;background-image:var(--dither);opacity:.6}
.cell:empty::before{content:'';position:absolute;inset:3px;border:1px dashed #ffffff12;opacity:.9}
.cell:empty::after{content:'';position:absolute;inset:0;background-image:var(--dither);opacity:.35;
  box-shadow:inset 0 0 0 2px #00000059}
.cell.hot{background:#241505;box-shadow:inset 0 0 0 2px var(--accent), inset 0 0 14px #ff6b3559}
.cell.bad{background:#2a0d12;box-shadow:inset 0 0 0 2px var(--bad)}
#itemsLayer{position:absolute;pointer-events:none}
.item{position:absolute;pointer-events:auto;background:linear-gradient(160deg,#222b38,#141922);
  box-shadow:0 3px 0 #00000073, inset 0 2px 0 #ffffff1a, inset 0 -3px 0 #00000066, inset 0 0 0 2px var(--t1);
  overflow:hidden;transition:transform .1s ease-out}
.item canvas{width:100%;height:100%;image-rendering:pixelated;display:block}
.item .badge{position:absolute;top:2px;right:2px;min-width:17px;height:15px;background:#05070ad9;
  color:var(--text);font-size:12px;display:flex;align-items:center;justify-content:center;padding:0 3px;
  border:1px solid #000;letter-spacing:.5px}
.item .pair{position:absolute;top:0;left:0;width:0;height:0;
  border-top:14px solid var(--accent);border-right:14px solid transparent;animation:pulse 900ms infinite}
.item .syn{position:absolute;bottom:1px;left:2px;font-size:11px;color:var(--accent);
  background:#05070acc;padding:0 3px;letter-spacing:.5px}
.item.dragging{opacity:.3;transform:scale(.92)}
.item.merging{animation:mergePop 320ms cubic-bezier(.2,1.6,.4,1)}
.item.shake{animation:shake 200ms}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes mergePop{0%{transform:scale(1)}50%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.t1{box-shadow:0 3px 0 #00000073, inset 0 2px 0 #ffffff1a, inset 0 0 0 2px var(--t1)}
.t2{box-shadow:0 3px 0 #00000073, inset 0 2px 0 #ffffff1a, inset 0 0 0 2px var(--t2), 0 0 8px #45e08a33}
.t3{box-shadow:0 3px 0 #00000073, inset 0 2px 0 #ffffff1a, inset 0 0 0 2px var(--t3), 0 0 10px #3fa7ff40}
.t4{box-shadow:0 3px 0 #00000073, inset 0 2px 0 #ffffff1a, inset 0 0 0 2px var(--t4), 0 0 12px #a45cf04d}
.t5{box-shadow:0 3px 0 #00000073, inset 0 2px 0 #ffffff1a, inset 0 0 0 2px var(--t5), 0 0 14px #ffb02059}
.t6{box-shadow:0 3px 0 #00000073, inset 0 2px 0 #ffffff33, inset 0 0 0 2px var(--t6), 0 0 18px #ff6b3573}
#dragGhost{position:fixed;pointer-events:none;z-index:60;opacity:.92;display:none;
  filter:drop-shadow(0 10px 12px #000c)}

/* ---------- shop ---------- */
#shopWrap{flex:0 0 auto;padding:6px 10px 2px}
.shopHead{display:flex;justify-content:space-between;align-items:center;font-size:13px;
  color:var(--muted);letter-spacing:2px;margin-bottom:5px}
.mini{background:linear-gradient(180deg,#232c3a,#161c25);border:2px solid var(--ink);color:var(--text);
  box-shadow:var(--bev-in),0 2px 0 #00000073;padding:2px 8px;font-family:var(--f);font-size:13px;
  letter-spacing:1px;text-transform:uppercase}
.mini:active{transform:translateY(2px);box-shadow:inset 0 2px 0 #000000a6}
.shopRow{display:flex;gap:6px;justify-content:space-between}
.card{flex:1 1 0;min-width:0;background:linear-gradient(180deg,#1c2431,#12171f);border:2px solid var(--ink);
  box-shadow:var(--bev-in),0 3px 0 #00000073;padding:3px 3px 2px;display:flex;flex-direction:column;
  align-items:center;gap:2px;transition:transform .08s;position:relative;overflow:hidden}
.card:active{transform:translateY(2px);box-shadow:inset 0 2px 0 #000000a6}
.card .art{width:100%;aspect-ratio:1;max-height:88px;background:radial-gradient(circle at 50% 30%,#222c3b,#0c1015);display:block;
  box-shadow:inset 0 0 0 1px #ffffff0f, inset 0 2px 0 #0000008c}
.card .nm{font-size:11px;color:var(--muted);letter-spacing:.3px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:100%;line-height:14px;height:14px;display:flex;align-items:center;justify-content:center}
.card .pr{font-size:13px;color:var(--gold);text-shadow:0 1px 0 #000;letter-spacing:.5px;
  background:#0a0e13;width:100%;text-align:center;padding:0 0 1px;box-shadow:inset 0 1px 0 #ffffff0f}
.card.cant{filter:saturate(.35) brightness(.72)}
.card.sold{opacity:.18}
.card.sold::after{content:'ПРОДАНО';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;color:var(--muted);letter-spacing:1px;background:#05070ab3}
.card.empty{opacity:.25;justify-content:center;font-size:11px;color:var(--muted)}

/* ---------- battle ---------- */
#battleWrap{flex:0 0 auto;padding:3px 10px 0}
#battleStage{position:relative;height:150px;display:flex;align-items:flex-end;justify-content:space-between;
  padding:16px 10px 16px;background:
    radial-gradient(ellipse at 50% 108%,#2a3446 0%,#151c27 42%,#0a0f16 78%);
  border:2px solid var(--ink);box-shadow:inset 0 2px 0 #ffffff0d,inset 0 -14px 22px #000000a6,0 4px 0 #00000073;overflow:hidden}
#battleStage::after{content:'';position:absolute;left:0;right:0;bottom:0;height:14px;
  background:repeating-linear-gradient(90deg,#1c2431 0 8px,#111823 8px 16px);opacity:.85;z-index:0}
#battleStage .ground{position:absolute;left:0;right:0;bottom:14px;height:3px;background:#2b3444;opacity:.55}
.stageTop{position:absolute;top:4px;left:8px;right:8px;display:flex;justify-content:space-between;
  font-size:13px;letter-spacing:2px;z-index:2;pointer-events:none}
.stageTop .vs{color:var(--dim)}
.stageTop .enemyName{color:#ffb0b8;text-shadow:0 1px 0 #000,0 0 10px #e03b5266}
.fighter{display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .08s;z-index:1}
.fighter canvas{width:88px;height:88px;image-rendering:pixelated;
  filter:drop-shadow(0 6px 4px #000000a6) drop-shadow(0 0 10px #00000059)}
.fighter.right canvas{transform:scaleX(-1)}
.fighter.lunge{transform:translateX(12px)}
.fighter.right.lunge{transform:translateX(-12px)}
.fighter.hurt{filter:brightness(2.4) saturate(0)}
.fhp{width:88px;height:7px;background:#0a0e13;border:1px solid #000;overflow:hidden;
  box-shadow:inset 0 1px 0 #000000a6}
.fhpFill{height:100%;width:100%;background:linear-gradient(180deg,#6ef2a8,#2fbf6d);transition:width .12s linear}
.fhpFill.enemy{background:linear-gradient(180deg,#ff8090,#c8243a)}
#fightFx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2}
.dmg{position:absolute;font-family:var(--f);font-size:19px;font-weight:800;color:#fff;
  text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000;
  animation:dmgUp 640ms ease-out forwards;letter-spacing:.5px}
.dmg.crit{color:var(--gold);font-size:24px}
.dmg.dot{color:#ff8c5a;font-size:15px}
.dmg.heal{color:var(--ok)}
.dmg.block{color:#9fc4ff;font-size:15px}
@keyframes dmgUp{0%{opacity:1;transform:translateY(0) scale(.8)}30%{transform:translateY(-8px) scale(1.1)}
  100%{opacity:0;transform:translateY(-30px) scale(1)}}
#battleLog{height:36px;overflow:hidden;font-size:12px;color:var(--dim);line-height:1.25;padding:3px 2px;
  display:flex;flex-direction:column;justify-content:flex-end;letter-spacing:.4px}
#battleLog div:first-child{color:#b9c2d2}

/* ---------- cta ---------- */
#ctaWrap{flex:0 0 auto;padding:5px 12px 0}
#btnStart{width:100%;height:52px;border:3px solid var(--ink);
  background:linear-gradient(180deg,#ff8c5a,#ff6b35 55%,#d9501f);
  color:#1a0d05;font-family:var(--f);font-size:22px;font-weight:800;letter-spacing:3px;
  box-shadow:inset 0 3px 0 #ffffff59, inset 0 -4px 0 #a63f18, 0 6px 0 #5c230c, 0 8px 16px #000a;
  text-transform:uppercase;text-shadow:0 1px 0 #ffffff40}
#btnStart:active{transform:translateY(3px);box-shadow:inset 0 3px 0 #ffffff33,0 2px 0 #5c230c}
#btnStart:disabled{background:linear-gradient(180deg,#2a3140,#1a2029);color:var(--dim);
  box-shadow:inset 0 2px 0 #ffffff0f,0 3px 0 #05070a;text-shadow:none}

/* ---------- sheet / lobby ---------- */
.sheet{position:fixed;inset:0;z-index:50;background:#05070ac9;display:flex;align-items:flex-end;
  backdrop-filter:blur(3px)}
.sheet.hidden{display:none}
.sheetCard{width:100%;background:linear-gradient(180deg,#1c2432,#12171f);border-top:3px solid var(--ink);
  box-shadow:inset 0 3px 0 #ffffff14, 0 -10px 30px #000a;
  padding:16px 16px calc(16px + env(safe-area-inset-bottom));animation:slideUp .2s ease-out;
  position:relative}
.sheetCard::before{content:'';position:absolute;inset:4px;border:2px solid #ffffff0a;pointer-events:none}
@keyframes slideUp{from{transform:translateY(46px);opacity:.3}to{transform:none;opacity:1}}
.sheetCard h2{margin:0 0 10px;font-size:24px;letter-spacing:2px;text-align:center;text-transform:uppercase;
  color:var(--text);text-shadow:0 2px 0 #000,0 0 18px #ff6b3540}
#sheetBody{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:14px;letter-spacing:.4px}
#sheetBody b{color:var(--text)}
.sheetBtns{display:flex;gap:8px}
.primary{flex:1;height:50px;border:3px solid var(--ink);background:linear-gradient(180deg,#ff8c5a,#ff6b35 55%,#d9501f);
  color:#1a0d05;font-family:var(--f);font-weight:800;font-size:20px;letter-spacing:2px;text-transform:uppercase;
  box-shadow:inset 0 2px 0 #ffffff59,0 5px 0 #5c230c}
.primary:active{transform:translateY(3px);box-shadow:inset 0 2px 0 #ffffff33,0 2px 0 #5c230c}
.ghostBtn{flex:0 0 36%;height:50px;border:2px solid var(--line);background:linear-gradient(180deg,#1b2230,#121721);
  color:var(--muted);font-family:var(--f);font-size:16px;letter-spacing:1px;text-transform:uppercase;
  box-shadow:inset 0 2px 0 #ffffff0f,0 4px 0 #05070a}
.overlay{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:24px;
  background:radial-gradient(circle at 50% 28%,#1e2736 0%,#0b0f15 45%,#05070a 80%)}
.overlay::before{content:'';position:absolute;inset:0;background-image:var(--dither);opacity:.5;pointer-events:none}
.overlay.hidden{display:none}
.ghostFrame{position:relative;z-index:1;width:168px;height:168px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,#25334a 0%,#101720 65%,#0a0e14 100%);
  border:3px solid var(--ink);box-shadow:var(--bev-in),0 6px 0 #00000073,0 0 34px #4fe3d62e;
  margin-bottom:2px}
.ghostFrame::before,.ghostFrame::after{content:'';position:absolute;width:8px;height:8px;background:var(--line-hi);
  box-shadow:0 0 0 2px #05070a}
.ghostFrame::before{top:-3px;left:-3px} .ghostFrame::after{bottom:-3px;right:-3px}
.ghostFrame canvas{width:132px;height:132px;image-rendering:pixelated}
.lobbyChips{display:flex;gap:5px;position:relative;z-index:1;margin:-2px 0 2px}
.lobbyChips span{font-size:11px;letter-spacing:1.5px;color:var(--muted);background:#0e141c;
  border:2px solid #05070a;box-shadow:inset 0 1px 0 #ffffff12;padding:1px 6px 0;text-transform:uppercase}
.lobbyShow{display:flex;gap:6px;position:relative;z-index:1;margin-top:4px}
.lslot{width:46px;height:46px;padding:2px;background:radial-gradient(circle at 50% 35%,#232e3f,#0c1015);
  border:2px solid #05070a;box-shadow:inset 0 2px 0 #ffffff14,0 3px 0 #00000073}
.lslot canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:4;opacity:.35;
  background:repeating-linear-gradient(180deg,#00000040 0 1px,transparent 1px 3px)}
#lobbyGhost{width:128px;height:128px;image-rendering:pixelated;animation:float 2.6s ease-in-out infinite;
  filter:drop-shadow(0 12px 10px #0009) drop-shadow(0 0 22px #4fe3d633);position:relative;z-index:1}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.overlay h1{margin:0;text-align:center;font-size:44px;line-height:.95;letter-spacing:3px;position:relative;z-index:1;
  text-transform:uppercase;text-shadow:0 3px 0 #000,0 0 26px #ffffff1a}
.overlay h1 span{display:block;font-size:16px;color:var(--accent);letter-spacing:7px;margin-top:6px;
  text-shadow:0 2px 0 #000,0 0 18px #ff6b354d}
.tag{margin:0;color:var(--muted);font-size:14px;text-align:center;max-width:280px;line-height:1.4;
  position:relative;z-index:1;letter-spacing:.5px}
.overlay .primary{width:220px;flex:0 0 auto;position:relative;z-index:1;margin-top:4px}
.lobbyFoot{display:flex;gap:18px;font-size:13px;color:var(--muted);position:relative;z-index:1;letter-spacing:.5px}
.lobbyFoot b{color:var(--text)}
.toast{position:fixed;left:50%;bottom:104px;transform:translate(-50%,16px);background:#1b2230f2;
  border:2px solid var(--ink);box-shadow:var(--bev-in),0 4px 0 #00000073;
  color:var(--text);font-size:14px;padding:6px 12px;opacity:0;pointer-events:none;transition:.18s;z-index:70;
  letter-spacing:.5px;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* экран меньше 700px по высоте — ужимаем */
@media (max-height:700px){
  #heroArt{width:52px;height:52px}
  #battleStage{height:68px}
  #battleLog{height:30px}
  #btnStart{height:48px;font-size:20px}
  .card .nm{font-size:10px}
}

/* ---------- фидбек: готов к мержу / максимум / удары ---------- */
.item.ready{animation:readyPulse 1.1s ease-in-out infinite}
@keyframes readyPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22) drop-shadow(0 0 7px #ff6b35aa)}}
.item.ready::after{content:'+';position:absolute;top:-4px;right:-4px;width:14px;height:14px;line-height:12px;
  text-align:center;font-size:12px;font-weight:700;color:#0a0b0e;background:linear-gradient(180deg,#ffa678,#ff6b35);
  border:1px solid #000;box-shadow:0 1px 0 #000000a6;border-radius:2px;z-index:4;animation:pulse 900ms infinite}
.item.maxed::after{content:'★';position:absolute;bottom:-1px;right:2px;font-size:11px;line-height:1;
  color:#ffd98a;text-shadow:0 1px 0 #000}
#battleStage.hit{animation:stageHit .16s linear}
@keyframes stageHit{0%,100%{transform:translate(0,0)}25%{transform:translate(-3px,2px)}70%{transform:translate(3px,-1px)}}
#battleStage.critFlash::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(circle at 30% 50%,#ffd08a80,#ff6b3500 70%);animation:critFade .22s ease-out forwards}
@keyframes critFade{from{opacity:1}to{opacity:0}}
.fhpFill{position:relative}
.fhpFill::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,#0000002e 0 1px,transparent 1px 5px)}