[hidden]{display:none!important}
:root{
  --night:#1b1430; --plum:#2c1f4a; --ink:#120d22; --gold:#ffc46b; --amber:#ff9a3c; --rose:#f6a6c1;
  --frost:#a9d8ff; --text:#fff6ea; --muted:#cbbfe0; --card:#2a1d47f2; --tile:#fff3dfd9; --tile2:#f6e3c4d9;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --cell: 50px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;background:var(--ink);color:var(--text);
  font-family:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;overflow:hidden;touch-action:none;overscroll-behavior:none}
#app{position:relative;margin:0 auto;height:100%;max-width:520px;overflow:hidden;background:var(--night)}
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.active{display:flex}
img{-webkit-user-drag:none;user-drag:none;pointer-events:none}

/* ---------- заставка ---------- */
#title-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.title-veil{position:absolute;inset:0;background:linear-gradient(180deg,#120d2200 25%,#120d22cc 68%,#120d22 100%)}
.title-box{position:absolute;left:0;right:0;bottom:calc(7% + var(--safe-b));text-align:center;padding:0 24px}
h1{font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:58px;line-height:1;margin:0 0 12px;
  color:var(--gold);text-shadow:0 0 28px #ff9a3caa,0 3px 0 #7a3b12}
.tagline{margin:0 0 24px;font-size:17px;line-height:1.35;opacity:.95}
.hint{margin:14px 0 0;color:#e9defa;font-size:15px;font-weight:700}

/* ---------- кнопки ---------- */
.btn{border:0;border-radius:18px;padding:13px 22px;font:inherit;font-weight:800;color:#3b1d06;
  background:linear-gradient(180deg,#ffe3a3,#ffb34d);box-shadow:0 5px 0 #b8641c,0 10px 24px #0007;cursor:pointer;transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #b8641c,0 6px 14px #0007}
.btn.big{font-size:22px;min-width:220px}
.btn.small{padding:8px 14px;font-size:14px}
.btn.ghost{background:#ffffff18;color:var(--text);box-shadow:inset 0 0 0 2px #ffffff35}
.btn.blue{background:linear-gradient(180deg,#bfe6ff,#6cb8ff);box-shadow:0 5px 0 #2f6db0,0 10px 24px #0007;color:#08264a}
.btn.glow{animation:pulse 2.2s ease-in-out infinite}
.btn[disabled]{filter:grayscale(1);opacity:.5}
@keyframes pulse{0%,100%{box-shadow:0 5px 0 #b8641c,0 0 0 0 #ffc46b77}50%{box-shadow:0 5px 0 #b8641c,0 0 0 14px #ffc46b00}}

/* ---------- мир на фоне: кадр серии, серый пока не «оживлён» ---------- */
.world{position:absolute;inset:0;overflow:hidden}
.world img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.55) contrast(.9) blur(1.5px);transform:scale(1.06);
  transition:filter 2.4s ease}
.world.alive img{filter:grayscale(0) brightness(.62) blur(1.5px)}
.world::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#120d2299,#120d2240 30%,#120d2266 70%,#120d22dd)}

/* ---------- верхняя панель ---------- */
.topbar{position:relative;display:flex;align-items:center;gap:6px;padding:calc(8px + var(--safe-t)) 10px 4px}
.res{position:relative;display:flex;align-items:center;gap:5px;background:#120d22b8;border:0;color:var(--text);font:inherit;
  border-radius:999px;padding:5px 11px 5px 7px;font-weight:800;font-size:16px;box-shadow:inset 0 0 0 1px #ffffff26;flex:1;min-width:0}
.res .ico{font-size:17px;width:22px;text-align:center;color:#ffd54d}
.res .gem{color:#7fd4ff}
.res small{font-size:11px;color:var(--muted);font-weight:700}
.res .plus{font-style:normal;margin-left:auto;background:#5fd16b;color:#06300c;border-radius:50%;width:18px;height:18px;
  display:grid;place-items:center;font-size:14px;line-height:1}
.res.icon{flex:0 0 40px;justify-content:center;padding:5px;font-size:20px;cursor:pointer}
#res-energy{flex:1.5;cursor:pointer}

/* ---------- заказы ---------- */
.orders{position:relative;display:flex;gap:6px;padding:6px 10px 4px;min-height:96px}
.order{flex:1;min-width:0;background:var(--card);border-radius:16px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:4px;
  box-shadow:inset 0 0 0 1px #ffffff20,0 6px 16px #0006;position:relative;animation:pop-in .35s ease-out}
.order .face{width:34px;height:34px;border-radius:50%;object-fit:cover;position:absolute;left:-4px;top:-6px;box-shadow:0 0 0 2px var(--gold)}
.order .needs{display:flex;gap:2px;justify-content:center;margin-top:2px}
.order .need{position:relative;width:46px;height:46px;border-radius:12px;background:#ffffff14}
.order .need img{width:100%;height:100%}
.order .need.ok::after{content:"✓";position:absolute;right:-3px;bottom:-3px;background:#5fd16b;color:#06300c;border-radius:50%;
  width:18px;height:18px;font-size:12px;font-weight:900;display:grid;place-items:center}
.order .reward{font-size:12px;font-weight:800;color:var(--gold);white-space:nowrap}
.order.ready{box-shadow:inset 0 0 0 2px #5fd16b,0 0 18px #5fd16b88;cursor:pointer}
.order .go{border:0;font:inherit;font-weight:900;font-size:13px;border-radius:10px;padding:4px 10px;color:#06300c;
  background:linear-gradient(180deg,#a6f0a0,#4fc45c);box-shadow:0 3px 0 #2b7a34;cursor:pointer}
.order.empty{opacity:.7;background:#ffffff0a;box-shadow:inset 0 0 0 1px #ffffff14;justify-content:center;color:var(--muted);font-size:12px;text-align:center}
@keyframes pop-in{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

/* ---------- поле ---------- */
#board-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
#board{position:relative;display:grid;grid-template-columns:repeat(7,var(--cell));grid-auto-rows:var(--cell);gap:3px;padding:6px;
  background:#120d2288;border-radius:18px;box-shadow:inset 0 0 0 1px #ffffff1f,0 10px 30px #0008;touch-action:none}
.cell{position:relative;border-radius:11px;background:var(--tile);box-shadow:inset 0 -3px 0 #d9bf98a8}
.cell:nth-child(odd){background:var(--tile2)}
.cell img{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);object-fit:contain;transition:transform .12s;filter:drop-shadow(0 1px 0 #0000004d)}
.cell .lv{position:absolute;right:1px;bottom:1px;min-width:14px;height:14px;padding:0 3px;border-radius:7px;background:#2c1f4acc;color:#fff;font-size:9px;font-weight:900;line-height:14px;text-align:center;z-index:2}
.cell.max::before{content:"";position:absolute;inset:0;border-radius:11px;box-shadow:inset 0 0 0 2px #ffb84d,0 0 10px #ffb84d88}
.cell.sel{box-shadow:inset 0 0 0 3px #fff,0 0 12px #fff8}
.cell.target{box-shadow:inset 0 0 0 3px #5fd16b,0 0 14px #5fd16b}
.cell.dragging img{opacity:.25}
.cell.gen{background:radial-gradient(circle,#fff5d6,#ffd98a);box-shadow:inset 0 0 0 2px #ffb84d,inset 0 -3px 0 #c8862b}
.cell.gen::after{content:"⚡";position:absolute;right:1px;top:-2px;font-size:11px}
.cell.frost{background:linear-gradient(160deg,#dff3ff,#9fcdf0)}
.cell.frost img{filter:saturate(.75) drop-shadow(0 0 1px #2a5b86)}
.cell.frost::after{content:"";position:absolute;inset:0;border-radius:11px;
  background:linear-gradient(135deg,#ffffff70,#ffffff00 35%,#ffffff00 65%,#ffffff45 85%);box-shadow:inset 0 0 0 3px #e8f7ff,inset 0 0 10px #7fc2f0}
.cell.box{background:linear-gradient(160deg,#d9a46a,#b47b45);box-shadow:inset 0 -3px 0 #7e5128}
.cell.box::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;background:#f2d27a;box-shadow:0 0 0 1px #9b6b2a}
.cell.box::after{content:"?";position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:20px;color:#fff3d0;text-shadow:0 2px 0 #6b4220}
.cell.box img{display:none}
.cell.bubble img{animation:bob 1.6s ease-in-out infinite;filter:drop-shadow(0 0 6px #8fd3ff)}
.cell.bubble .bub-in{position:absolute;inset:12px;width:auto;height:auto;opacity:.9}
.cell.bubble .t{position:absolute;left:0;right:0;bottom:-1px;text-align:center;font-size:10px;font-weight:900;color:#0b3b66}
.cell.chest img{animation:wiggle 1.8s ease-in-out infinite}
.cell.hint img{animation:hint 0.9s ease-in-out infinite}
.cell.pop img{animation:merge-pop .42s ease-out}
.cell.spawn img{animation:spawn .32s ease-out}
.cell.unbox{animation:unbox .45s ease-out}
.cell.thaw::after{animation:thaw .6s ease-out forwards}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-8deg)}90%{transform:rotate(8deg)}95%{transform:rotate(-4deg)}}
@keyframes hint{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
@keyframes merge-pop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes spawn{0%{transform:scale(.2) translateY(10px);opacity:.3}100%{transform:none;opacity:1}}
@keyframes unbox{0%{transform:scale(1)}40%{transform:scale(1.15) rotate(4deg)}100%{transform:none}}
@keyframes thaw{from{opacity:1}to{opacity:0}}
.spark{position:absolute;width:8px;height:8px;border-radius:50%;background:#ffd36b;box-shadow:0 0 8px #ffb84d;pointer-events:none;z-index:5;
  animation:spark .6s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
.flyer{position:absolute;z-index:30;pointer-events:none;transition:transform .55s cubic-bezier(.5,-0.3,.6,1),opacity .55s}
.flyer img{width:100%;height:100%}
.ghost{position:absolute;z-index:40;width:60px;height:60px;pointer-events:none;transform:translate(-50%,-60%);filter:drop-shadow(0 8px 10px #0008)}
.ghost img{width:100%;height:100%}
.hand{position:absolute;z-index:20;font-size:34px;pointer-events:none;filter:drop-shadow(0 3px 4px #000a);transition:left .8s ease,top .8s ease}

/* ---------- инфо и кадр ---------- */
.info{position:relative;min-height:46px;margin:4px 10px 0;padding:6px 10px;border-radius:14px;background:#120d22c4;display:flex;align-items:center;gap:8px;
  font-size:14px;box-shadow:inset 0 0 0 1px #ffffff1c}
.info img{width:34px;height:34px}
.info .txt{flex:1;line-height:1.2}
.info .txt b{display:block;font-size:15px}
.info .txt small{color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.info .chain{display:flex;gap:1px}
.info .chain img{width:22px;height:22px;opacity:.35}
.info .chain img.have{opacity:1}
.shot-bar{position:relative;display:flex;align-items:center;gap:10px;margin:6px 10px calc(10px + var(--safe-b));padding:6px;border:0;border-radius:16px;
  background:var(--card);color:var(--text);font:inherit;text-align:left;box-shadow:inset 0 0 0 1px #ffffff22;cursor:pointer}
.shot-bar .thumb{width:84px;height:48px;border-radius:10px;object-fit:cover;filter:grayscale(1) brightness(.75)}
.shot-bar .t{flex:1;min-width:0}
.shot-bar .t b{display:block;font-size:13px;line-height:1.2}
.shot-bar .bar{height:8px;border-radius:6px;background:#ffffff1c;margin-top:5px;overflow:hidden}
.shot-bar .bar i{display:block;height:100%;background:linear-gradient(90deg,#ffb34d,#ffe08a);border-radius:6px;transition:width .5s}
.shot-bar .cta{font-weight:900;font-size:14px;padding:8px 10px;border-radius:12px;background:#ffffff14;white-space:nowrap}
.shot-bar.ready{box-shadow:inset 0 0 0 2px var(--gold),0 0 22px #ffb84d99;animation:glowbar 1.6s ease-in-out infinite}
.shot-bar.ready .cta{background:linear-gradient(180deg,#ffe3a3,#ffb34d);color:#3b1d06}
.shot-bar.ready .thumb{filter:grayscale(.3)}
@keyframes glowbar{50%{box-shadow:inset 0 0 0 2px var(--gold),0 0 4px #ffb84d55}}
.shot-dots{display:flex;gap:3px;margin-top:4px}
.shot-dots i{width:8px;height:8px;border-radius:50%;background:#ffffff26}
.shot-dots i.on{background:var(--gold);box-shadow:0 0 6px var(--gold)}

/* ---------- тост, модалки, кино ---------- */
.toast{position:absolute;left:50%;bottom:calc(150px + var(--safe-b));transform:translateX(-50%);z-index:50;max-width:88%;background:#fff6ea;color:#3b1d06;
  padding:10px 16px;border-radius:16px;font-weight:800;font-size:15px;text-align:center;box-shadow:0 10px 28px #000a;animation:toast-in .25s ease-out;
  display:flex;align-items:center;gap:8px;pointer-events:none}
.toast img{width:36px;height:36px;border-radius:50%;object-fit:cover}
@keyframes toast-in{from{transform:translate(-50%,12px);opacity:0}}
.modal{position:absolute;inset:0;z-index:60;background:#0b071699;display:grid;place-items:center;padding:20px;backdrop-filter:blur(3px)}
.modal-card{width:100%;max-width:360px;background:linear-gradient(180deg,#3a2a63,#241842);border-radius:24px;padding:20px 18px 18px;text-align:center;
  box-shadow:inset 0 0 0 1px #ffffff2a,0 20px 50px #000c;animation:pop-in .25s ease-out}
.modal-card h2{margin:0 0 8px;font-family:Georgia,serif;color:var(--gold);font-size:25px}
.modal-card p{margin:6px 0 12px;line-height:1.35;color:#fff}
.modal-card .row{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.modal-card .big-ico{width:96px;height:96px;margin:4px auto}
.modal-card .loot{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin:8px 0}
.modal-card .loot img{width:52px;height:52px;background:#ffffff14;border-radius:12px}
.modal-card .frame{width:100%;border-radius:14px;margin:4px 0 6px;box-shadow:0 6px 18px #0008}
.modal-card ul{text-align:left;margin:8px 0;padding-left:20px;line-height:1.45;color:#f3e8ff;font-size:14px}
.cinema{position:absolute;inset:0;z-index:70;background:#000;display:flex;align-items:center;justify-content:center}
.cinema video{width:100%;max-height:100%}
.cinema-caption{position:absolute;left:14px;right:14px;bottom:calc(76px + var(--safe-b));text-align:center;font-size:17px;font-weight:700;
  text-shadow:0 2px 6px #000;line-height:1.35}
#cinema-skip{position:absolute;right:14px;bottom:calc(20px + var(--safe-b))}

@media (max-height:740px){ :root{--cell:44px} .orders{min-height:86px} .order .need{width:40px;height:40px} .shot-bar .thumb{height:40px;width:70px} }
@media (max-height:640px){ :root{--cell:38px} }
@media (min-height:880px){ :root{--cell:54px} }