/* =========================================================
   Хэллоуин в офисе · Сенсум-Урал
   Общие стили, главное меню, соло-игра, финал, attract
   ========================================================= */
:root{
  --orange:#ff8a3d;
  --amber:#ffc46b;
  --pink:#ff2d78;
  --violet:#a855f7;
  --green:#2eb08e;
  --mint:#5ef2b8;
  --ink:#f7eeff;
  --muted:#b7a6cf;
  --card:rgba(28,15,48,.72);
  --line:rgba(255,170,110,.22);
}
*{box-sizing:border-box}
html,body{height:100%}
html{touch-action:manipulation}
.sprite-bank{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.sprite-icon{display:inline-block;width:1em;height:1em;vertical-align:middle;overflow:visible}
body{
  margin:0; min-height:100%; color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 760px at 82% -12%, #3d1d61 0%, transparent 62%),
    radial-gradient(1000px 700px at 8% 112%, #5d1743 0%, transparent 58%),
    linear-gradient(180deg,#0c0717 0%,#150b26 55%,#090510 100%);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* ---------- фон ---------- */
.moon{
  position:fixed; top:-20vmin; right:-14vmin; width:48vmin; height:48vmin; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #fff4d6, #ffd98a 42%, #f0a24c 60%, rgba(240,162,76,0) 72%);
  filter:blur(.4vmin); opacity:.3; pointer-events:none;
}
.fog{
  position:fixed; inset:-20% -10%; pointer-events:none; opacity:.5;
  background:
    radial-gradient(45% 30% at 20% 78%, rgba(160,90,255,.18), transparent 70%),
    radial-gradient(40% 28% at 78% 88%, rgba(255,90,160,.14), transparent 70%);
  animation:fogDrift 24s ease-in-out infinite alternate;
}
@keyframes fogDrift{from{transform:translate3d(-2%,1%,0) scale(1)} to{transform:translate3d(3%,-2%,0) scale(1.06)}}
.floaty{
  position:fixed; font-size:5.5vmin; opacity:.09; pointer-events:none;
  filter:drop-shadow(0 0 3vmin rgba(255,140,60,.45));
  animation:floaty 14s ease-in-out infinite;
}
.floaty.a{left:3vw; bottom:10vh; animation-delay:-2s}
.floaty.b{right:6vw; bottom:16vh; animation-delay:-6s; font-size:4.6vmin}
.floaty.c{left:12vw; top:10vh; animation-delay:-9s; font-size:4vmin}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-4vh) rotate(6deg)}}

.app{position:relative; z-index:2; height:100dvh; width:100vw; overflow:hidden}

.screen{
  position:absolute; inset:0; display:none;
  flex-direction:column; align-items:center; justify-content:center;
  padding:2.4vmin 3vmin;
}
.screen.active{display:flex; animation:screenIn .35s ease both}
@keyframes screenIn{from{opacity:0; transform:translateY(1.2vmin)} to{opacity:1; transform:none}}

/* ---------- общие элементы ---------- */
.btn{
  font:inherit; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  border:0; border-radius:2.2vmin; cursor:pointer;
  padding:2.2vmin 3.2vmin; font-size:clamp(15px,2.2vmin,32px);
  color:#1a0a0a;
  background:linear-gradient(180deg,#ffd08a,var(--orange) 60%,#e2661f);
  box-shadow:0 1.4vmin 3.2vmin rgba(255,110,40,.3), inset 0 -.6vmin 0 rgba(120,40,0,.35);
  transition:transform .12s ease, box-shadow .12s ease;
  touch-action:manipulation; min-height:60px;
}
.btn:active{transform:translateY(.5vmin) scale(.985); box-shadow:0 .6vmin 1.4vmin rgba(255,110,40,.3), inset 0 -.4vmin 0 rgba(120,40,0,.35)}
.btn.big{padding:2.6vmin 3.2vmin; font-size:clamp(18px,2.7vmin,40px)}
.btn.ghost{background:rgba(255,255,255,.07); color:var(--ink); box-shadow:inset 0 0 0 2px rgba(255,255,255,.14)}
.btn.green{background:linear-gradient(180deg,#9dffd4,var(--green) 60%,#1b8a6c); color:#04241b}
@media (hover:hover) and (pointer:fine){ .btn:hover{transform:translateY(-.3vmin)} }

.row{display:flex; gap:1.6vmin; flex-wrap:wrap; justify-content:center; margin-top:1vmin}

.icon-btn{
  display:grid; place-items:center;
  width:7vmin; height:7vmin; min-width:54px; min-height:54px; border-radius:50%;
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07);
  color:var(--ink); font-size:clamp(18px,2.6vmin,34px); cursor:pointer; touch-action:manipulation;
}
.icon-btn:active{transform:scale(.94)}
.icon-btn.off{opacity:.45}

.home{
  position:absolute; top:2vmin; left:2vmin; z-index:20; display:grid; place-items:center;
  width:7vmin; height:7vmin; min-width:56px; min-height:56px; border-radius:50%;
  border:1px solid rgba(255,255,255,.16); background:rgba(20,10,34,.75);
  color:var(--ink); font-size:clamp(20px,2.8vmin,38px); cursor:pointer; touch-action:manipulation;
  backdrop-filter:blur(6px);
}
.home:active{transform:scale(.94)}
.home-labeled{width:auto; min-width:0; height:clamp(48px,6vmin,72px); padding:0 1.8vmin 0 1.2vmin; display:flex; align-items:center; justify-content:center; gap:.8vmin; border-radius:999px; font-size:clamp(13px,1.7vmin,22px); font-weight:800; letter-spacing:.04em; white-space:nowrap}
.home-labeled .sprite-icon{width:1.3em; height:1.3em}

.brand{display:flex; align-items:center; gap:1.4vmin; flex-wrap:wrap}
.logo{height:clamp(18px,3vmin,40px); width:auto; filter:drop-shadow(0 0 2.4vmin rgba(46,176,142,.32))}
.brand-sep{color:var(--muted); opacity:.6; font-size:clamp(14px,1.8vmin,24px)}
.brand-txt{font-size:clamp(10px,1.4vmin,18px); letter-spacing:.26em; text-transform:uppercase; color:var(--muted)}

.hint{
  position:absolute; bottom:1.8vmin; left:0; right:0; text-align:center;
  color:var(--muted); font-size:clamp(10px,1.3vmin,16px); opacity:.5; letter-spacing:.14em;
  text-transform:uppercase; pointer-events:none;
}

/* ---------- ГЛАВНОЕ МЕНЮ ---------- */
.hub-wrap{
  width:min(1700px,94vw); display:flex; flex-direction:column; gap:1.8vmin;
}
.hub-top{display:flex; align-items:center; justify-content:space-between; gap:2vmin; flex-wrap:wrap}
.hub-id{display:flex; align-items:center; gap:1.2vmin}
.hub-id input{
  font:inherit; font-size:clamp(14px,1.9vmin,26px); font-weight:700; color:var(--ink);
  background:rgba(10,5,20,.55); border:2px solid rgba(255,170,110,.24); border-radius:1.6vmin;
  padding:1.1vmin 1.8vmin; outline:none; width:clamp(150px,17vmin,260px);
  transition:border-color .2s, box-shadow .2s;
}
.hub-id input:focus{border-color:var(--orange); box-shadow:0 0 0 .5vmin rgba(255,138,61,.16)}
.dice{
  display:grid; place-items:center;
  width:6.4vmin; height:6.4vmin; min-width:50px; min-height:50px;
  border-radius:1.6vmin; border:2px solid rgba(255,170,110,.24);
  background:rgba(10,5,20,.55); color:var(--ink); font-size:clamp(20px,2.8vmin,38px);
  cursor:pointer; touch-action:manipulation;
}
.dice:active{transform:scale(.94)}

.hub-title{
  margin:0; font-size:clamp(38px,7.2vmin,104px); line-height:.92; font-weight:900;
  text-transform:uppercase; letter-spacing:.01em;
}
.hub-title span{
  background:linear-gradient(180deg,#ffe6bd 0%,var(--orange) 48%,var(--pink) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 4vmin rgba(255,110,60,.3));
}
.hub-sub{margin:0; color:var(--muted); font-size:clamp(13px,1.9vmin,26px)}

.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:1.8vmin}
.tile{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1vmin; padding:3.2vmin 2vmin 2.8vmin; min-height:30vmin;
  border-radius:2.6vmin; border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(40,21,68,.8), rgba(14,8,26,.9));
  color:var(--ink); font:inherit; text-align:center; cursor:pointer;
  box-shadow:0 2vmin 5vmin rgba(0,0,0,.4), inset 0 0 6vmin rgba(140,70,255,.07);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  touch-action:manipulation;
}
.tile:active{transform:scale(.975)}
.tile-badge{
  position:absolute; top:1.6vmin; left:50%; transform:translateX(-50%);
  font-size:clamp(9px,1.15vmin,15px); letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap; opacity:.9;
}
.tile-emoji{
  font-size:clamp(38px,8vmin,96px); line-height:1; margin-top:1.2vmin;
  filter:drop-shadow(0 0 3.4vmin rgba(255,140,60,.32));
  transition:transform .2s ease;
}
.tile-name{font-size:clamp(15px,2.3vmin,34px); font-weight:900; line-height:1.1}
.tile-desc{font-size:clamp(10px,1.4vmin,19px); color:var(--muted); line-height:1.35; max-width:22ch}
.t-solo{border-color:rgba(255,138,61,.34)}
.t-duel{border-color:rgba(168,85,247,.36)}
.t-cauldron{border-color:rgba(46,176,142,.4)}
.t-wheel{border-color:rgba(255,45,120,.34)}
.t-solo .tile-name{color:#ffd6a6}
.t-duel .tile-name{color:#dcc0ff}
.t-cauldron .tile-name{color:#a8f5da}
.t-wheel .tile-name{color:#ffb6d0}
@media (hover:hover) and (pointer:fine){
  .tile:hover{transform:translateY(-.6vmin); box-shadow:0 2.6vmin 6vmin rgba(0,0,0,.5), inset 0 0 6vmin rgba(140,70,255,.12)}
  .tile:hover .tile-emoji{transform:scale(1.08)}
}

.hub-foot{display:flex; align-items:center; justify-content:space-between; gap:2vmin}
.best{font-size:clamp(12px,1.6vmin,22px); color:var(--muted)}
.best b{color:var(--amber); font-size:1.15em}
.hub-tools{display:flex; gap:1.2vmin}

/* ---------- ИГРА 1: СОЛО ---------- */
#screen-solo{justify-content:flex-start; padding:2vmin 2.4vmin 2.4vmin; gap:1.4vmin}
.game-top{width:var(--bw,min(1400px,94vw)); display:flex; gap:1.4vmin; align-items:stretch; justify-content:space-between}
#screen-solo .game-top{padding-left:clamp(150px,14vmin,210px)}
.pill{
  display:flex; align-items:baseline; gap:1.2vmin;
  background:rgba(28,15,48,.66); border:1px solid var(--line); border-radius:2vmin;
  padding:1.2vmin 2.2vmin; min-width:15vmin;
  font-variant-numeric:tabular-nums;
}
.pill-k{font-size:clamp(10px,1.3vmin,18px); letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.pill b{font-size:clamp(22px,3.4vmin,52px); font-weight:900; line-height:1}
.pill.combo b{color:var(--amber)}
.pill.combo i{font-style:normal; font-weight:900; font-size:clamp(14px,1.9vmin,28px); color:var(--pink); opacity:0; transition:opacity .15s}
.pill.combo.on i{opacity:1}
.pill i.planTag{font-style:normal; font-weight:800; font-size:clamp(12px,1.7vmin,24px); color:var(--muted); opacity:.8; letter-spacing:.04em}
.pill i.planTag.done{color:var(--mint); opacity:1}

.timer{width:var(--bw,min(1400px,94vw)); height:1.5vmin; min-height:9px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden}
.timer i{
  display:block; height:100%; width:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--orange),var(--pink) 60%,var(--violet));
  box-shadow:0 0 2vmin rgba(255,60,120,.6);
}
.timer.low i{animation:lowPulse .45s ease-in-out infinite alternate}
@keyframes lowPulse{from{filter:brightness(1)} to{filter:brightness(1.9)}}
#time.low{color:#ff5d8f}

.board-wrap{flex:1; min-height:0; width:100%; display:flex; align-items:center; justify-content:center}
.board{
  position:relative; width:min(96vw,1500px); aspect-ratio:5 / 3;
  display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(3,1fr);
  gap:.9vmin; padding:1.1vmin; border-radius:3vmin;
  border:1px solid rgba(255,160,90,.22);
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(255,138,61,.12), transparent 62%),
    linear-gradient(180deg, rgba(38,20,64,.85), rgba(11,6,22,.92));
  box-shadow:inset 0 0 8vmin rgba(120,60,220,.28), 0 3vmin 8vmin rgba(0,0,0,.55);
  overflow:hidden; touch-action:none; container-type:size;
}
.cell{
  border-radius:2vmin; display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(255,255,255,.055);
  background:radial-gradient(circle at 50% 130%, rgba(255,138,61,.08), transparent 72%);
  position:relative;
}
.item{
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
  font-size:var(--emoji,9vmin); line-height:1;
  border:0; background:transparent; padding:0; cursor:pointer; touch-action:none;
  filter:drop-shadow(0 1vmin 1.6vmin rgba(0,0,0,.55));
  transform:scale(.25) rotate(-14deg); opacity:0;
  transition:transform .16s cubic-bezier(.2,1.6,.4,1), opacity .16s ease;
  will-change:transform,opacity;
  -webkit-user-select:none; user-select:none;
}
.item.in{transform:scale(1) rotate(0deg); opacity:1}
.item.out{transform:scale(.35) rotate(16deg); opacity:0; transition:transform .22s ease-in, opacity .22s ease-in}
.item.hit{animation:itemHit .22s ease-out forwards; pointer-events:none}
@keyframes itemHit{to{transform:scale(1.75); opacity:0}}
.item.good{text-shadow:0 0 3vmin rgba(255,190,120,.3)}

.float{
  position:absolute; transform:translate(-50%,-50%); pointer-events:none;
  font-weight:900; font-size:var(--flt,3vmin); letter-spacing:.02em;
  animation:rise .8s ease-out forwards;
  text-shadow:0 .4vmin 1.6vmin rgba(0,0,0,.7);
  white-space:nowrap;
}
.float.good{color:#9dffb0}
.float.time{color:#8fd8ff; font-size:calc(var(--flt,3vmin) * .82)}
.float.bad{color:#ff6b8f; font-size:calc(var(--flt,3vmin) * 1.12)}
@keyframes rise{from{opacity:1; transform:translate(-50%,-50%) scale(.8)} to{opacity:0; transform:translate(-50%,-190%) scale(1.15)}}

.spark{
  position:absolute; pointer-events:none;
  width:calc(var(--emoji,9vmin) * .16); height:calc(var(--emoji,9vmin) * .16);
  border-radius:50%; background:var(--amber);
  animation:sparkle .7s ease-out forwards;
}
.spark.emoji{width:auto; height:auto; background:none; font-size:calc(var(--emoji,9vmin) * .42); line-height:1}
@keyframes sparkle{
  from{opacity:1; transform:translate(0,0) scale(1)}
  to{opacity:0; transform:translate(var(--dx),var(--dy)) scale(.3)}
}

.board.shake{animation:shake .32s ease}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-1.1vmin,.6vmin) rotate(-.4deg)}
  45%{transform:translate(1vmin,-.6vmin) rotate(.4deg)}
  70%{transform:translate(-.6vmin,0) rotate(-.2deg)}
}
.toast{
  position:absolute; left:50%; top:3.5%; transform:translate(-50%,-2vmin);
  background:rgba(255,45,120,.92); color:#fff; font-weight:800;
  padding:1vmin 2.2vmin; border-radius:99px; font-size:var(--toast,2.2vmin);
  opacity:0; pointer-events:none; white-space:nowrap; z-index:3;
  box-shadow:0 1.6vmin 4vmin rgba(255,45,120,.35);
}
.toast.show{animation:toastIn 1.1s ease forwards}
@keyframes toastIn{
  0%{opacity:0; transform:translate(-50%,-2vmin)}
  15%{opacity:1; transform:translate(-50%,0)}
  75%{opacity:1}
  100%{opacity:0; transform:translate(-50%,-1vmin)}
}

/* ---------- ФИНАЛ СОЛО ---------- */
.over-card{width:min(1050px,94vw); display:flex; flex-direction:column; align-items:center; gap:1.6vmin; text-align:center}
.over-kicker{letter-spacing:.4em; text-transform:uppercase; color:var(--amber); font-size:clamp(11px,1.5vmin,20px)}
.big-score{display:flex; align-items:baseline; gap:1.6vmin; line-height:.9}
.big-score span{
  font-size:clamp(58px,13vmin,170px); font-weight:900;
  background:linear-gradient(180deg,#fff1cf,var(--orange) 55%,var(--pink));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 4vmin rgba(255,110,60,.3));
  font-variant-numeric:tabular-nums;
}
.big-score small{font-size:clamp(13px,1.9vmin,26px); color:var(--muted); letter-spacing:.14em; text-transform:uppercase}
.rank{font-size:clamp(18px,2.8vmin,40px); font-weight:800; color:var(--amber)}
.plan-line{font-size:clamp(11px,1.6vmin,22px); letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.plan-line.ok{color:var(--mint)}
.over-stats{display:flex; gap:4vmin; flex-wrap:wrap; justify-content:center}
.over-stats div{display:flex; flex-direction:column; gap:.3vmin}
.over-stats b{font-size:clamp(18px,2.6vmin,36px); font-weight:900; font-variant-numeric:tabular-nums}
.over-stats span{font-size:clamp(10px,1.3vmin,17px); color:var(--muted); letter-spacing:.1em; text-transform:uppercase}
#lbOver{width:min(720px,90vw)}

.lb{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.8vmin}
.lb li{
  display:grid; grid-template-columns:4.4vmin 1fr auto; gap:1.2vmin; align-items:center;
  font-size:clamp(13px,1.8vmin,24px);
  padding:.9vmin 1.4vmin; border-radius:1.4vmin;
  background:rgba(255,255,255,.045);
}
.lb li.empty{display:block}
.lb li .pos{color:var(--muted); font-weight:800; font-variant-numeric:tabular-nums}
.lb li .nm{font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left}
.lb li .sc{font-weight:900; color:var(--amber); font-variant-numeric:tabular-nums}
.lb li.top1{background:linear-gradient(90deg,rgba(255,196,107,.22),rgba(255,45,120,.08)); box-shadow:inset 0 0 0 1.5px rgba(255,196,107,.35)}
.lb li.fresh{animation:fresh 1.6s ease-in-out infinite alternate}
@keyframes fresh{from{box-shadow:inset 0 0 0 2px rgba(255,45,120,.4)} to{box-shadow:inset 0 0 0 2px rgba(255,196,107,.9)}}
.lb .empty{color:var(--muted); opacity:.7; font-size:clamp(12px,1.6vmin,20px); padding:1.6vmin 0}

/* ---------- ATTRACT ---------- */
.attract{
  position:fixed; inset:0; z-index:30; display:none;
  align-items:center; justify-content:center; text-align:center;
  background:radial-gradient(circle at 50% 45%, rgba(70,30,110,.72), rgba(6,3,12,.94) 68%);
  backdrop-filter:blur(4px);
}
.attract.on{display:flex; animation:screenIn .4s ease both}
.attract-inner{display:flex; flex-direction:column; align-items:center; gap:1.8vmin; padding:4vmin}
.attract-brand{
  font-size:clamp(10px,1.4vmin,18px); letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted); opacity:.85;
}
.attract-pump{font-size:12vmin; line-height:1; animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-2vmin) rotate(4deg)}}
.attract-h{
  font-size:clamp(34px,7vmin,104px); font-weight:900; text-transform:uppercase; letter-spacing:.02em; line-height:.95;
  background:linear-gradient(180deg,#ffe9c4,#ff8a3d 55%,#ff2d78);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 5vmin rgba(255,100,60,.35));
}
.attract-p{color:#d9c9ef; font-size:clamp(14px,2vmin,28px); margin:0}
.attract-tap{
  margin-top:1.6vmin; padding:2vmin 4vmin; border-radius:99px;
  background:linear-gradient(180deg,#ffd08a,var(--orange) 60%,#e2661f);
  color:#1a0a0a; font-weight:900; letter-spacing:.2em; text-transform:uppercase;
  font-size:clamp(14px,2vmin,28px);
  animation:tapPulse 1.5s ease-in-out infinite;
}
@keyframes tapPulse{0%,100%{transform:scale(1); box-shadow:0 0 0 0 rgba(255,138,61,.5)}50%{transform:scale(1.035); box-shadow:0 0 0 2.4vmin rgba(255,138,61,0)}}

/* =========================================================
   ИГРА 2: ДУЭЛЬ
   ========================================================= */
#screen-duel{padding:0; overflow:hidden; touch-action:none}
#screen-duel::before{
  content:''; position:absolute; left:50%; top:8%; bottom:8%; width:2px;
  background:linear-gradient(transparent, rgba(255,255,255,.2), transparent);
  z-index:2; pointer-events:none;
}
.duel-side{position:absolute; top:0; bottom:0; width:50%; touch-action:none}
.duel-left{
  left:0;
  background:
    radial-gradient(65% 70% at 18% 62%, rgba(255,138,61,.2), transparent 72%),
    radial-gradient(50% 40% at 0% 0%, rgba(255,45,120,.12), transparent 70%);
}
.duel-right{
  right:0;
  background:
    radial-gradient(65% 70% at 82% 62%, rgba(168,85,247,.24), transparent 72%),
    radial-gradient(50% 40% at 100% 0%, rgba(94,242,184,.1), transparent 70%);
}
.duel-left.live{background-color:rgba(255,138,61,.14)}
.duel-right.live{background-color:rgba(168,85,247,.16)}
.duel-side.flash{animation:duelFlash .45s ease}
@keyframes duelFlash{0%{filter:brightness(1.6)}100%{filter:brightness(1)}}

.duel-scores{
  position:absolute; top:2.6vmin; left:0; right:0; z-index:4;
  display:flex; justify-content:space-between; padding:0 6vmin 0 12vmin; pointer-events:none;
}
.duel-score{display:flex; flex-direction:column; gap:.4vmin}
.duel-score span{font-size:clamp(11px,1.5vmin,20px); letter-spacing:.3em; text-transform:uppercase; color:var(--muted)}
.duel-score b{font-size:clamp(34px,7vmin,96px); font-weight:900; line-height:1; font-variant-numeric:tabular-nums}
.duel-score.p1 b{color:var(--amber)}
.duel-score.p2 b{color:#c9a2ff}
.duel-score.p2{align-items:flex-end; text-align:right}

.duel-center{
  position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1.4vmin; text-align:center;
  pointer-events:none; padding:0 6vmin;
}
.duel-ghost{
  font-size:clamp(60px,17vmin,220px); line-height:1;
  opacity:0; transform:scale(.4) rotate(-8deg);
  transition:opacity .12s ease, transform .18s cubic-bezier(.2,1.7,.4,1);
  filter:drop-shadow(0 0 5vmin rgba(255,150,80,.45));
}
.duel-ghost.on{opacity:1; transform:scale(1) rotate(0)}
.duel-msg{
  font-size:clamp(24px,4.4vmin,64px); font-weight:900; text-transform:uppercase;
  letter-spacing:.03em; line-height:1.05;
  text-shadow:0 1vmin 3vmin rgba(0,0,0,.6);
}
.duel-sub{font-size:clamp(12px,1.7vmin,24px); color:var(--muted); max-width:40ch}
.duel-center .btn{pointer-events:auto}
.duel-end{
  display:flex; flex-direction:column; align-items:center; gap:1.4vmin;
  background:rgba(12,6,22,.86); border:1px solid var(--line); border-radius:3vmin;
  padding:3.4vmin 4vmin; box-shadow:0 3vmin 8vmin rgba(0,0,0,.6);
  pointer-events:auto;
}
.duel-end-title{font-size:clamp(22px,3.6vmin,52px); font-weight:900; color:var(--amber); text-transform:uppercase}
#screen-duel .home{z-index:6; opacity:.5}

/* =========================================================
   ИГРА 3: ЗЕЛЬЕВАРНЯ
   ========================================================= */
#screen-cauldron{
  padding:1.4vmin 2.2vmin 1.6vmin; justify-content:flex-start; gap:1.2vmin;
  overflow:hidden; touch-action:none;
}
#screen-cauldron .home{opacity:.55; z-index:30}

.brew-top{width:100%; display:flex; align-items:center; justify-content:flex-start; gap:3.4vmin; padding-left:10vmin}
.brew-head{display:flex; flex-direction:column; gap:.2vmin}
.brew-kicker{font-size:clamp(9px,1.15vmin,15px); letter-spacing:.3em; text-transform:uppercase; color:var(--muted); opacity:.85}
.brew-title{
  margin:0; font-size:clamp(22px,3.4vmin,48px); font-weight:900; text-transform:uppercase;
  letter-spacing:.03em; line-height:1;
  background:linear-gradient(180deg,#ffe9c4,#ffb066 60%,var(--orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 3vmin rgba(255,140,60,.25));
}
.brew-meters{display:flex; gap:1.2vmin}
.brew-meters .pill{min-width:13vmin; padding:.9vmin 1.8vmin}
.brew-meters .pill b{font-size:clamp(20px,2.9vmin,44px)}

.brew-main{
  flex:1; min-height:0; width:100%;
  display:grid; grid-template-columns:25% 40% 35%; gap:1.6vmin; align-items:stretch;
}

/* ---------- полки ---------- */
.shelf-col{display:flex; flex-direction:column; gap:.8vmin; min-height:0; justify-content:center}
.shelf-sign{
  font-size:clamp(9px,1.15vmin,15px); letter-spacing:.26em; text-transform:uppercase;
  color:var(--amber); opacity:.8; text-align:center;
}
.shelf{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.2vmin 1vmin;
  padding:2vmin 1.4vmin 1.6vmin;
  border-radius:2.4vmin;
  background:
    linear-gradient(180deg, rgba(92,55,26,.35), rgba(32,17,10,.5)),
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 2px, transparent 2px 26px);
  border:1px solid rgba(190,130,70,.28);
  box-shadow:inset 0 0 6vmin rgba(0,0,0,.45);
}
.jar{
  display:flex; flex-direction:column; align-items:center; gap:.5vmin;
  background:none; border:0; padding:0; cursor:grab; touch-action:none;
  -webkit-user-select:none; user-select:none;
}
.jar-glass{
  position:relative; width:clamp(68px,10.4vmin,138px); height:clamp(84px,13.6vmin,180px);
  border-radius:1.4vmin 1.4vmin 2.2vmin 2.2vmin;
  border:2px solid rgba(255,255,255,.32);
  background:
    linear-gradient(150deg, rgba(255,255,255,.28), rgba(255,255,255,.05) 42%, rgba(255,255,255,.16)),
    radial-gradient(circle at 50% 78%, rgba(94,242,184,.28), rgba(94,242,184,.04) 70%);
  box-shadow:inset 0 -1.4vmin 2.4vmin rgba(94,242,184,.22), 0 1vmin 2vmin rgba(0,0,0,.45);
  display:grid; place-items:center; overflow:hidden;
  transition:transform .16s ease;
}
.jar-glass::before{
  content:''; position:absolute; top:-2px; left:-2px; right:-2px; height:1.5vmin; min-height:9px;
  background:linear-gradient(180deg,#d29a5c,#8a5527);
  border-radius:1.2vmin 1.2vmin 0 0;
  box-shadow:0 .3vmin 0 rgba(0,0,0,.3);
}
.jar-glass::after{
  content:''; position:absolute; top:12%; left:10%; width:16%; height:58%;
  border-radius:99px; background:rgba(255,255,255,.3); filter:blur(.2vmin);
}
.jar-emoji{
  font-size:clamp(32px,5.6vmin,76px); line-height:1; margin-top:.6vmin;
  filter:drop-shadow(0 .5vmin 1vmin rgba(0,0,0,.45));
  pointer-events:none;
}
.jar-name{
  font-size:clamp(9px,1.1vmin,15px); letter-spacing:.04em; color:var(--muted);
  text-transform:lowercase; pointer-events:none;
}
.jar:active .jar-glass{transform:scale(.96)}
.jar.grabbed{opacity:.4}
.jar.grabbed .jar-glass{transform:scale(.92)}
.shelf-hint{
  text-align:center; font-size:clamp(9px,1.2vmin,16px); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); opacity:.6;
}

/* ---------- котёл ---------- */
.cauldron-col{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1vmin; min-height:0; min-width:0}
.pot-chips{
  display:flex; gap:1vmin; height:5.4vmin; min-height:38px; align-items:center; justify-content:center;
}
.pot-chip{
  font-size:clamp(20px,3vmin,42px); line-height:1;
  filter:drop-shadow(0 0 .6vmin rgba(94,242,184,.4));
  animation:chipIn .3s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes chipIn{from{transform:scale(.4) translateY(1vmin); opacity:0} to{transform:none; opacity:1}}
.cauldron-wrap{
  position:relative; width:100%; flex:1; min-height:0;
  display:flex; align-items:flex-end; justify-content:center;
  transition:transform .16s ease;
}
.cauldron-svg{
  width:100%; max-width:min(58vmin,720px); height:auto; max-height:100%;
  filter:drop-shadow(0 2vmin 4vmin rgba(0,0,0,.55));
  transition:filter .2s ease;
}
.cauldron-wrap.over{transform:scale(1.03)}
.cauldron-wrap.over .cauldron-svg{
  filter:drop-shadow(0 0 5vmin rgba(94,242,184,.75)) drop-shadow(0 2vmin 4vmin rgba(0,0,0,.5));
}
.cauldron-wrap.splash .cauldron-svg{animation:potSplash .38s ease}
@keyframes potSplash{0%{transform:scale(1)}40%{transform:scale(1.05,.96)}70%{transform:scale(.99,1.03)}100%{transform:none}}
.cauldron-wrap.shake .cauldron-svg{animation:potShake .4s ease}
@keyframes potShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-1.2vmin) rotate(-1deg)}55%{transform:translateX(1vmin) rotate(1deg)}80%{transform:translateX(-.5vmin)}}

.fire{transform-origin:230px 360px; animation:fireFlicker 1.4s ease-in-out infinite alternate}
@keyframes fireFlicker{from{opacity:.8; transform:scaleY(.94)} to{opacity:1; transform:scaleY(1.06)}}
.brew-bubbles circle{animation:potBubble 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center}
.brew-bubbles circle:nth-child(2){animation-delay:-.8s}
.brew-bubbles circle:nth-child(3){animation-delay:-1.6s}
.brew-bubbles circle:nth-child(4){animation-delay:-2.2s}
@keyframes potBubble{0%{transform:translateY(0) scale(.6); opacity:0}25%{opacity:.85}100%{transform:translateY(-3vmin) scale(1.05); opacity:0}}
.steam{opacity:.35; animation:steamFloat 3.4s ease-in-out infinite alternate}
.steam path{animation:steamPuff 3.4s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:-1.1s}
.steam path:nth-child(3){animation-delay:-2.2s}
@keyframes steamFloat{from{transform:translateY(.4vmin)} to{transform:translateY(-.8vmin)}}
@keyframes steamPuff{0%,100%{opacity:.25}50%{opacity:.6}}

.drop-hint{
  position:absolute; left:50%; bottom:2%; transform:translate(-50%,1vmin);
  padding:.8vmin 2vmin; border-radius:99px;
  background:rgba(94,242,184,.18); border:1px solid rgba(94,242,184,.5); color:var(--mint);
  font-size:clamp(10px,1.35vmin,18px); letter-spacing:.16em; text-transform:uppercase;
  opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease;
  white-space:nowrap;
}
.cauldron-wrap.over .drop-hint{opacity:1; transform:translate(-50%,0)}

/* ---------- ведьма ---------- */
.witch-col{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; min-height:0; gap:.4vmin}
.witch-stage{
  position:relative; width:100%; flex:1; min-height:0;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:.4vmin;
}
.witch{
  position:absolute; bottom:0; left:50%; height:100%; width:auto; max-width:100%;
  transform:translateX(-50%);
  display:none;
  filter:drop-shadow(0 1.6vmin 3vmin rgba(0,0,0,.5));
  transition:transform .45s cubic-bezier(.2,1.5,.4,1), opacity .6s ease, filter .5s ease;
  transform-origin:50% 100%;
}
.witch-stage[data-form="witch"] .witch-main{display:block}
.witch-stage[data-form="frog"] .witch-frog{display:block}
.witch-stage[data-form="human"] .witch-human{display:block}
.witch-stage[data-form="elephant"] .witch-elephant{display:block}
.witch-stage[data-form="skeleton"] .witch-skeleton{display:block}

.witch-stage.fx-invisible .witch{opacity:.14; filter:blur(.25vmin) drop-shadow(0 0 2.8vmin rgba(220,200,255,.7))}
.witch-stage.fx-giant .witch{transform:translateX(-50%) scale(1.14)}
.witch-stage.fx-tiny .witch{transform:translateX(-50%) scale(.62)}
.witch-stage.fx-levitate .witch{animation:witchFloat 2.9s ease-in-out infinite}
@keyframes witchFloat{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-2.2vmin)}}
.witch-stage.fx-glow .witch{filter:brightness(1.22) saturate(1.1) drop-shadow(0 0 6vmin rgba(255,214,120,.95))}
.witch-stage.fx-freeze .witch{filter:brightness(1.18) saturate(.82) drop-shadow(0 0 5vmin rgba(120,220,255,.9))}
.witch-stage.fx-dizzy .witch{animation:witchDizzy 1.15s ease-in-out infinite}
@keyframes witchDizzy{0%,100%{transform:translateX(-50%) rotate(-4deg)}50%{transform:translateX(-50%) rotate(4deg)}}
.witch-stage.shift .witch{animation:witchShift .55s ease}
@keyframes witchShift{0%{filter:brightness(2.6) saturate(1.5)}100%{filter:brightness(1) saturate(1)}}
.witch-stage.fx-rainbow .witch{animation:witchRainbowGlow 3.2s ease-in-out infinite}
@keyframes witchRainbowGlow{
  0%,100%{filter:brightness(1.08) drop-shadow(0 0 3vmin rgba(255,120,190,.75))}
  33%{filter:brightness(1.12) drop-shadow(0 0 3vmin rgba(120,220,255,.75))}
  66%{filter:brightness(1.1) drop-shadow(0 0 3vmin rgba(255,220,120,.75))}
}

/* ---------- слои эффектов: ореолы и искры ---------- */
.witch-stage::before,
.witch-stage::after{
  content:''; position:absolute; left:50%; pointer-events:none; opacity:0;
  transition:opacity .45s ease; z-index:0;
}
.witch{z-index:1}
.hat-gem-halo{transform-box:fill-box; transform-origin:center; animation:gemHalo 2.2s ease-in-out infinite}
.hat-gem{transform-box:fill-box; transform-origin:center; animation:gemTwinkle 2.2s ease-in-out infinite}
@keyframes gemHalo{0%,100%{opacity:.14; transform:scale(.82)}50%{opacity:.5; transform:scale(1.28)}}
@keyframes gemTwinkle{0%,100%{fill:#ffc46b}50%{fill:#fff1b8}}

.witch-stage.fx-frog .witch{filter:drop-shadow(0 0 2.8vmin rgba(115,255,140,.42))}
.witch-stage.fx-frog::before{
  bottom:2%; width:94%; height:78%; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 72%, rgba(108,246,148,.26), rgba(44,190,122,.1) 42%, transparent 70%);
  opacity:1; animation:fxPulse 2.8s ease-in-out infinite;
}
.witch-stage.fx-frog::after{
  content:'◦'; bottom:17%; color:#a5ffd6; font-size:4vmin; line-height:1;
  transform:translateX(-50%);
  text-shadow:6vmin 5vmin 0 #74e5c2, -7vmin 2vmin 0 #b8ffe6, 4vmin -8vmin 0 #74e5c2,
              -5vmin -12vmin 0 #b8ffe6, 10vmin -4vmin 0 #74e5c2;
  animation:fxSpecks 4.6s ease-in-out infinite; opacity:.9;
}
.witch-stage.fx-human .witch{filter:drop-shadow(0 0 2.4vmin rgba(255,210,150,.42))}
.witch-stage.fx-human::before{
  bottom:3%; width:88%; height:90%; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 48%, rgba(255,220,164,.24), rgba(255,170,100,.08) 48%, transparent 72%);
  opacity:1; animation:fxPulse 3.2s ease-in-out infinite;
}
.witch-stage.fx-human::after{
  content:'✧'; bottom:19%; color:#fff0ca; font-size:2.8vmin; line-height:1;
  transform:translateX(-50%);
  text-shadow:8vmin 7vmin 0 #ffd48b, -7vmin 1vmin 0 #fff0ca, 5vmin -8vmin 0 #ffd48b,
              -4vmin -11vmin 0 #fff0ca, 11vmin -3vmin 0 #ffd48b;
  animation:fxSpecks 5s ease-in-out infinite; opacity:.9;
}
.witch-stage.fx-elephant .witch{filter:drop-shadow(0 0 3vmin rgba(183,177,255,.52))}
.witch-stage.fx-elephant::before{
  bottom:0; width:110%; height:90%; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 58%, rgba(199,190,255,.28), rgba(130,110,255,.08) 48%, transparent 72%);
  opacity:1; animation:fxPulse 3.4s ease-in-out infinite;
}
.witch-stage.fx-elephant::after{
  content:'✧'; bottom:14%; color:#e6ddff; font-size:2.6vmin; line-height:1;
  transform:translateX(-50%);
  text-shadow:8vmin 6vmin 0 #bcb0ff, -8vmin 1vmin 0 #f3eeff, 5vmin -9vmin 0 #bcb0ff,
              -5vmin -12vmin 0 #f3eeff, 11vmin -4vmin 0 #bcb0ff;
  animation:fxSpecks 4.8s ease-in-out infinite; opacity:.9;
}
.witch-stage.fx-skeleton .witch{filter:drop-shadow(0 0 3vmin rgba(178,230,255,.7))}
.witch-stage.fx-skeleton::before{
  bottom:0; width:100%; height:96%; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 54%, rgba(185,232,255,.3), rgba(120,196,255,.12) 44%, transparent 72%);
  opacity:1; animation:fxPulse 2.8s ease-in-out infinite;
}
.witch-stage.fx-skeleton::after{
  content:'✦'; bottom:18%; color:#e5f8ff; font-size:2.8vmin; line-height:1;
  transform:translateX(-50%);
  text-shadow:7vmin 6vmin 0 #a8dcff, -8vmin 2vmin 0 #f1fbff, 4vmin -8vmin 0 #a8dcff,
              -4vmin -13vmin 0 #f1fbff, 11vmin -4vmin 0 #a8dcff;
  animation:fxSpecks 4.4s ease-in-out infinite; opacity:.9;
}

.witch-stage.fx-glow::before{
  bottom:-6%; width:118%; height:112%; transform:translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 56%, rgba(255,224,150,.3), rgba(255,180,90,.1) 40%, transparent 66%),
    repeating-conic-gradient(from 0deg, rgba(255,232,172,.46) 0 2.6deg, transparent 2.6deg 15deg);
  -webkit-mask:radial-gradient(ellipse at 50% 56%, #000 6%, rgba(0,0,0,.5) 32%, transparent 62%);
  mask:radial-gradient(ellipse at 50% 56%, #000 6%, rgba(0,0,0,.5) 32%, transparent 62%);
  opacity:1; animation:fxRaySpin 28s linear infinite, fxPulse 2.8s ease-in-out infinite;
}
.witch-stage.fx-glow::after{
  content:'✦'; bottom:14%; font-size:2.6vmin; line-height:1; color:#ffe9b0;
  transform:translateX(-50%);
  text-shadow:8vmin 5vmin 0 #ffd27a, -9vmin 2vmin 0 #fff3c4, 5vmin -8vmin 0 #ffcf6b,
              -6vmin -12vmin 0 #fff3c4, 12vmin -3vmin 0 #ffd27a, -2vmin 10vmin 0 #ffcf6b;
  animation:fxSpecks 4.2s ease-in-out infinite; opacity:1;
}

.witch-stage.fx-freeze::before{
  bottom:-4%; width:112%; height:104%; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 56%, rgba(150,225,255,.4), rgba(90,170,255,.14) 46%, transparent 70%);
  opacity:1; animation:fxPulse 3.6s ease-in-out infinite;
}
.witch-stage.fx-freeze::after{
  bottom:0; width:100%; height:94%; transform:translateX(-50%);
  background-image:
    radial-gradient(circle, rgba(226,247,255,.95) 0 2px, transparent 2.6px),
    radial-gradient(circle, rgba(186,233,255,.85) 0 1.6px, transparent 2.2px),
    radial-gradient(circle, rgba(244,253,255,.95) 0 2.4px, transparent 3px);
  background-size:92px 118px, 68px 96px, 124px 152px;
  background-position:12px 8px, 44px 56px, 70px 28px;
  opacity:.85; animation:fxSpecks 6s ease-in-out infinite;
}

.witch-stage.fx-rainbow::before{
  bottom:0; width:94%; height:100%; transform:translateX(-50%);
  background:conic-gradient(from 0deg,#ff5d8f,#ffb347,#ffe56b,#6ef2a8,#58d7ff,#a78bfa,#ff5d8f);
  border-radius:50%;
  -webkit-mask:radial-gradient(ellipse at 50% 52%, transparent 42%, #000 55%, #000 70%, transparent 80%);
  mask:radial-gradient(ellipse at 50% 52%, transparent 42%, #000 55%, #000 70%, transparent 80%);
  filter:blur(1vmin); opacity:.8;
  animation:fxRaySpin 9s linear infinite, fxPulse 2.6s ease-in-out infinite;
}
.witch-stage.fx-rainbow::after{
  content:'✦'; bottom:16%; font-size:2.6vmin; line-height:1; color:#fff;
  transform:translateX(-50%);
  text-shadow:6vmin 5vmin 0 #ffe56b, -8vmin 2vmin 0 #6ef2a8, 4vmin -7vmin 0 #58d7ff,
              -5vmin -11vmin 0 #ff5d8f, 10vmin -2vmin 0 #a78bfa, -10vmin 7vmin 0 #ffb347;
  animation:fxSpecks 3.8s ease-in-out infinite; opacity:1;
}

.witch-stage.fx-levitate::before{
  bottom:0; width:76%; height:14%; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%, rgba(178,138,255,.55), transparent 70%);
  filter:blur(1.4vmin); opacity:1; animation:fxGround 2.9s ease-in-out infinite;
}
.witch-stage.fx-levitate::after{
  content:'✦'; bottom:2%; font-size:2.1vmin; line-height:1; color:#e2d0ff;
  transform:translateX(-50%);
  text-shadow:5vmin -7vmin 0 #c9a8ff, -6vmin -11vmin 0 #efe6ff, 2vmin -15vmin 0 #c9a8ff,
              9vmin -6vmin 0 #efe6ff, -3vmin -19vmin 0 #b98cff;
  animation:fxSpecks 4.4s ease-in-out infinite; opacity:1;
}

.witch-stage.fx-invisible::before{
  bottom:4%; width:66%; height:74%; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%, rgba(196,160,255,.4), rgba(120,80,200,.12) 45%, transparent 72%);
  filter:blur(2.2vmin); opacity:1; animation:fxPulse 3s ease-in-out infinite;
}
.witch-stage.fx-invisible::after{
  content:'·'; bottom:30%; font-size:3.4vmin; line-height:1; color:#e6d4ff;
  transform:translateX(-50%);
  text-shadow:5vmin 3vmin 0 #cdb2ff, -6vmin -2vmin 0 #efe4ff, 3vmin -8vmin 0 #cdb2ff,
              -4vmin -12vmin 0 #efe4ff, 9vmin -5vmin 0 #cdb2ff;
  animation:fxSpecks 4.8s ease-in-out infinite; opacity:1;
}

.witch-stage.fx-dizzy::after{
  content:''; bottom:64%; width:4.4vmin; height:4.4vmin;
  background:url('assets/sprites/2728.svg') center/contain no-repeat;
  transform:translateX(-50%);
  animation:fxDizzy 2.6s linear infinite; opacity:1;
}

.witch-stage.fx-giant::before{
  bottom:-2%; width:118%; height:15%; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%, rgba(150,100,220,.45), transparent 72%);
  filter:blur(1.8vmin); opacity:1; animation:fxPulse 2.4s ease-in-out infinite;
}
.witch-stage.fx-tiny::before{
  bottom:2%; width:52%; height:10%; transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%, rgba(255,190,120,.4), transparent 72%);
  filter:blur(1.2vmin); opacity:1; animation:fxPulse 2s ease-in-out infinite;
}

@keyframes fxRaySpin{from{transform:translateX(-50%) rotate(0)} to{transform:translateX(-50%) rotate(360deg)}}
@keyframes fxPulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes fxSpecks{0%,100%{transform:translate(-50%,0); opacity:.45}50%{transform:translate(-50%,-2.6vmin); opacity:1}}
@keyframes fxGround{0%,100%{transform:translateX(-50%) scale(1); opacity:.6}50%{transform:translateX(-50%) scale(1.14); opacity:1}}
@keyframes fxDizzy{
  0%{transform:translate(-50%,0) rotate(0deg)}
  50%{transform:translate(-50%,-2vmin) rotate(180deg)}
  100%{transform:translate(-50%,0) rotate(360deg)}
}

.witch-name{
  font-size:clamp(9px,1.25vmin,16px); letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); opacity:.75; text-align:center; white-space:nowrap;
}
.fx-banner{
  position:absolute; top:0; left:50%; transform:translate(-50%,-.6vmin); z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.3vmin;
  padding:1.2vmin 2.4vmin; border-radius:2vmin;
  background:rgba(20,10,34,.9); border:1px solid rgba(94,242,184,.4);
  box-shadow:0 2vmin 5vmin rgba(0,0,0,.5);
  opacity:0; pointer-events:none; text-align:center; min-width:26vmin;
}
.fx-banner.on{animation:bannerIn 2.8s ease forwards}
.fx-banner b{
  font-size:clamp(14px,2.1vmin,30px); font-weight:900; text-transform:uppercase;
  letter-spacing:.06em; color:var(--mint);
}
.fx-banner span{font-size:clamp(10px,1.35vmin,18px); color:var(--muted)}
@keyframes bannerIn{
  0%{opacity:0; transform:translate(-50%,1vmin) scale(.9)}
  10%,78%{opacity:1; transform:translate(-50%,0) scale(1)}
  100%{opacity:0; transform:translate(-50%,-.6vmin) scale(.98)}
}

/* ---------- рецепты ---------- */
.recipe-strip{
  width:100%; display:grid; grid-template-columns:repeat(6,1fr); gap:.8vmin;
}
.recipe{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.1vmin;
  padding:.55vmin .5vmin; border-radius:1.2vmin;
  border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.045);
  opacity:.6; transition:opacity .25s, border-color .25s, background .25s, transform .25s;
  text-align:center; min-width:0; min-height:6.4vmin;
}
.recipe.done{
  opacity:1; border-color:rgba(94,242,184,.45);
  background:linear-gradient(180deg, rgba(94,242,184,.16), rgba(94,242,184,.05));
  box-shadow:inset 0 0 2vmin rgba(94,242,184,.15);
}
.rec-ings{font-size:clamp(15px,2.3vmin,32px); line-height:1.1; letter-spacing:.02em}
.rec-ings{display:flex; align-items:center; justify-content:center; gap:.45vmin}
.recipe-plus{font-style:normal; font-size:.55em; color:var(--muted); opacity:.8}
.rec-name{
  font-size:clamp(10px,1.55vmin,21px); font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.recipe.done .rec-name{color:var(--mint)}
.rec-pts{font-size:clamp(8px,1.1vmin,15px); color:var(--muted); letter-spacing:.06em}
.recipe.locked{opacity:.4; border-style:dashed}
.recipe.locked .rec-ings{font-size:clamp(14px,2vmin,26px); font-weight:900; color:var(--muted); letter-spacing:.12em}
.recipe.locked .rec-name{color:var(--muted); opacity:.8}
.recipe.just{animation:recReveal .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes recReveal{
  0%{transform:scale(.78); opacity:.15}
  55%{transform:scale(1.07); opacity:1}
  100%{transform:none; opacity:1}
}

/* ---------- перетаскивание ---------- */
.drag-ghost{
  position:fixed; z-index:80; left:0; top:0; pointer-events:none;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
  font-size:clamp(44px,8vmin,92px); line-height:1;
  transform:translate(-50%,-50%) rotate(-6deg) scale(1.05);
  filter:drop-shadow(0 1.4vmin 2vmin rgba(0,0,0,.65));
  will-change:left,top,transform;
}
.drag-ghost.melt{transform:translate(-50%,-50%) rotate(10deg) scale(.35); opacity:0; transition:transform .2s ease, opacity .2s ease}

/* =========================================================
   ИГРА 4: КОЛЕСО
   ========================================================= */
#screen-wheel{padding:0}
.wheel-wrap{display:flex; align-items:center; justify-content:center; gap:6vmin; width:min(1600px,94vw)}
.wheel-col{position:relative; display:flex; align-items:center; justify-content:center}
.wheel-pointer{
  position:absolute; top:-3.4vmin; left:50%; transform:translateX(-50%);
  font-size:clamp(26px,4.4vmin,52px); color:var(--amber); z-index:4;
  filter:drop-shadow(0 0 2vmin rgba(255,196,107,.8));
}
.wheel{
  width:min(52vmin,560px); height:min(52vmin,560px); border-radius:50%;
  position:relative; transform:rotate(0deg);
  background:repeating-conic-gradient(from -15deg, #3a1d5c 0 30deg, #231038 30deg 60deg);
  box-shadow:
    0 0 0 .9vmin rgba(255,196,107,.14),
    0 0 8vmin rgba(168,85,247,.28),
    inset 0 0 8vmin rgba(0,0,0,.6);
  transition:transform 4.2s cubic-bezier(.15,.85,.2,1);
  touch-action:manipulation;
}
.wheel::after{
  content:''; position:absolute; inset:6%; border-radius:50%;
  border:1px solid rgba(255,255,255,.09); pointer-events:none;
}
.sector{position:absolute; inset:0; display:flex; justify-content:center; pointer-events:none}
.sector span{display:block; margin-top:3.4%; font-size:clamp(18px,3.4vmin,44px); line-height:1}
.wheel-hub{
  position:absolute; width:16vmin; height:16vmin; min-width:96px; min-height:96px; border-radius:50%;
  display:grid; place-items:center; font-size:7vmin;
  background:radial-gradient(circle at 40% 35%, #4a2a70, #180d2a 70%);
  border:1px solid rgba(255,196,107,.35);
  box-shadow:0 0 4vmin rgba(0,0,0,.7);
  pointer-events:none;
}
.wheel-text{flex-direction:column; gap:1.6vmin; text-align:center; max-width:42vw}
.wheel-kicker{font-size:clamp(10px,1.4vmin,18px); letter-spacing:.34em; text-transform:uppercase; color:var(--amber)}
.wheel-emoji{font-size:clamp(40px,9vmin,110px); line-height:1; filter:drop-shadow(0 0 4vmin rgba(255,140,60,.35))}
.wheel-result{
  font-size:clamp(17px,2.7vmin,38px); font-weight:700; line-height:1.25;
  min-height:3.2em; display:flex; align-items:center; justify-content:center;
  color:var(--ink);
}
.wheel-result.pop{animation:resPop .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes resPop{from{opacity:0; transform:scale(.92)} to{opacity:1; transform:none}}

/* =========================================================
   АДАПТАЦИЯ
   ========================================================= */
@media (max-width:1200px){
  .brew-top{padding-left:10vmin; gap:2.2vmin}
  .brew-meters .pill{min-width:11vmin; padding:.7vmin 1.2vmin}
  .brew-main{grid-template-columns:31% 37% 32%; gap:1.2vmin}
  .shelf{grid-template-columns:repeat(2,1fr); gap:1vmin; padding:1.6vmin 1.2vmin 1.2vmin}
  .jar-glass{width:clamp(56px,9vmin,104px); height:clamp(70px,11.2vmin,130px)}
  .jar-emoji{font-size:clamp(28px,4.6vmin,58px)}
  .recipe-strip{grid-template-columns:repeat(4,1fr); gap:.6vmin}
  .recipe{min-height:5vmin; padding:.4vmin}
  .rec-ings{font-size:clamp(13px,2vmin,26px)}
  .rec-name{font-size:clamp(9px,1.3vmin,18px)}
  .fx-banner{min-width:22vmin; padding:1vmin 1.8vmin}
}
@media (orientation:portrait){
  .hub-title{font-size:clamp(34px,9vmin,64px)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile{min-height:26vmin}
  .tile-emoji{font-size:clamp(32px,10vmin,64px)}
  .hub-id input{width:clamp(120px,30vmin,220px)}
  .duel-ghost{font-size:20vmin}
  .wheel-wrap{flex-direction:column; gap:3vmin}
  .wheel{width:min(74vmin,70vw); height:min(74vmin,70vw)}
  .wheel-text{max-width:88vw}
  .vat{width:min(60vmin,70vw); height:min(60vmin,70vw)}
  .lgghost{display:none}
}
@media (max-height:860px){
  .hub-sub{display:none}
  .tile{min-height:26vmin; padding:2.4vmin 1.6vmin 2vmin}
  .tile-desc{display:none}
  .hub-title{font-size:clamp(30px,6.4vmin,80px)}
  .hub-wrap{gap:1.2vmin}
  .over-stats{margin-top:-.4vmin}
  .big-score span{font-size:clamp(52px,11vmin,140px)}
}
@media (max-height:620px){
  .tile-desc,.tile-badge{display:none}
  .tile-emoji{font-size:clamp(28px,7vmin,56px)}
  .tile-name{font-size:clamp(13px,2vmin,26px)}
  .brew-title{display:none}
  .hint{display:none}
}

/* ---------- СЛУЖЕБНОЕ ---------- */
[hidden]{display:none !important}