/* ===== тема, глубина, общие элементы, экраны игры и итога ===== */

:root{
  --bg:#F7F5F1;
  --bg-2:#FAF9F6;
  --ink:#1C1C1E;
  --muted:#77767B;
  --accent:#2C7A7B;
  --accent-2:#37918F;
  --card:#FFFFFF;
  --card-2:#F6F4F0;
  --track:#EEECE6;
  --ring:#C9C8CC;
  --pc:44,122,123;
  --mark:.14;
  /* слоистая глубина: близкая тень + мягкий ореол */
  --sh-1:0 1px 2px rgba(28,28,30,.07), 0 1px 1px rgba(28,28,30,.04);
  --sh-2:0 2px 4px rgba(28,28,30,.06), 0 8px 20px rgba(28,28,30,.09);
  --sh-3:0 4px 8px rgba(28,28,30,.09), 0 16px 36px rgba(28,28,30,.14);
  --sh-in:inset 0 2px 6px rgba(28,28,30,.12);
  --hl:inset 0 1px 0 rgba(255,255,255,.92);
  --spring:cubic-bezier(.34,1.4,.5,1);
  --press:cubic-bezier(.2,.8,.3,1);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#131315;
    --bg-2:#171719;
    --ink:#F0EFEC;
    --muted:#9C9BA0;
    --accent:#4CA8A9;
    --accent-2:#5FBDBC;
    --card:#26262A;
    --card-2:#202024;
    --track:#2C2C31;
    --ring:#4A4A4E;
    --mark:.26;
    --sh-1:0 1px 2px rgba(0,0,0,.45);
    --sh-2:0 2px 6px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.4);
    --sh-3:0 6px 14px rgba(0,0,0,.55), 0 20px 44px rgba(0,0,0,.5);
    --sh-in:inset 0 2px 7px rgba(0,0,0,.55);
    --hl:inset 0 1px 0 rgba(255,255,255,.07);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(120% 60% at 50% 0%, var(--bg-2), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.35;
  -webkit-text-size-adjust:100%;
}
.wrap{
  max-width:560px;margin:0 auto;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
}
[hidden]{display:none!important}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}

/* ---------- поверхности ---------- */
.raised{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  box-shadow:var(--sh-2),var(--hl);
}
input{
  font:inherit;font-size:16px;color:inherit;
  border:0;border-radius:14px;padding:13px 15px;min-height:54px;width:100%;
  background:var(--track);
  box-shadow:var(--sh-in);
  transition:box-shadow .16s ease;
}
input::placeholder{color:var(--ring)}
input:focus{outline:none;box-shadow:var(--sh-in),0 0 0 3px rgba(var(--pc),.28)}
input.num{text-align:right;font-variant-numeric:tabular-nums}

.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
h1{font-size:24px;font-weight:650;letter-spacing:-.02em;margin:0}
.hint{font-size:14px;color:var(--muted);margin:10px 0 0}
.warn{font-size:14px;color:#A64B2A;margin:0 0 10px;min-height:20px;text-align:center}
.lbl-row{font-size:14px;color:var(--muted);margin:18px 0 8px}

/* ---------- кнопки: нажатие продавливает ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:64px;padding:0 20px;border-radius:18px;
  font-size:18px;font-weight:550;letter-spacing:-.01em;
  background:linear-gradient(180deg,#2E2E31,var(--ink));
  color:var(--bg-2);
  box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .13s var(--press),box-shadow .13s var(--press),opacity .13s ease;
}
.btn:active{
  transform:translateY(2px) scale(.99);
  box-shadow:var(--sh-1),inset 0 2px 5px rgba(0,0,0,.28);
}
.btn.ghost{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  color:var(--ink);
  box-shadow:var(--sh-2),var(--hl);
}
.btn.ghost:active{
  transform:translateY(2px) scale(.99);
  box-shadow:var(--sh-1),var(--sh-in);
}
.btn.accent{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:#fff;
  box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.28);
}
.btn[disabled]{opacity:.45;pointer-events:none}

/* сегменты: активный сегмент физически поднят над утопленной дорожкой */
.seg{
  display:flex;gap:4px;padding:4px;border-radius:15px;
  background:var(--track);box-shadow:var(--sh-in);
}
.seg button{
  flex:1;min-height:50px;border-radius:11px;padding:0 14px;
  color:var(--muted);font-size:15px;white-space:nowrap;
  transition:transform .13s var(--press),box-shadow .13s var(--press),color .16s ease;
}
.seg button:active{transform:scale(.96)}
.seg button.active{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  color:var(--ink);font-weight:550;
  box-shadow:var(--sh-1),var(--hl);
}
.seg.sm{flex:0 0 auto;padding:3px}
.seg.sm button{flex:0 0 auto;min-height:38px;padding:0 11px;font-size:13px;letter-spacing:.02em}
.currow{display:grid;grid-template-columns:1fr;gap:10px}
.currow.custom{grid-template-columns:1fr 96px}

@keyframes pulse{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
.pulse{animation:pulse .32s ease}
@keyframes pop{0%{transform:scale(.94)}55%{transform:scale(1.03)}100%{transform:scale(1)}}
.pop{animation:pop .3s var(--spring)}

/* ---------- игра: игроки ---------- */
.who{display:flex;gap:12px;overflow-x:auto;padding:4px 4px 14px;margin:0 -4px;scrollbar-width:none}
.who::-webkit-scrollbar{display:none}
.av-btn{
  position:relative;flex:0 0 auto;width:64px;height:64px;border-radius:50%;
  background:linear-gradient(180deg,var(--card),var(--card-2));
  box-shadow:var(--sh-2),var(--hl);
  font-size:29px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:transform .16s var(--press),box-shadow .16s var(--press),background .16s ease;
}
.av-btn:active{transform:translateY(2px) scale(.96);box-shadow:var(--sh-1)}
.av-btn.active{
  background:
    linear-gradient(180deg,rgba(var(--pc),.26),rgba(var(--pc),.16)),
    linear-gradient(180deg,var(--card),var(--card-2));
  box-shadow:0 0 0 3px rgb(var(--pc)),var(--sh-3);
  transform:translateY(-1px);
}
.av-btn .n{
  position:absolute;right:-3px;bottom:-3px;min-width:24px;height:24px;padding:0 6px;
  border-radius:12px;
  background:linear-gradient(180deg,var(--card),var(--card-2));
  box-shadow:var(--sh-1),var(--hl);
  font-size:12px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center;
}
.av-btn.active .n{color:var(--accent)}

/* ---------- игра: касса ---------- */
.till{
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border-radius:20px;box-shadow:var(--sh-2),var(--hl);
  padding:16px 22px;margin:0 0 16px;
}
.sumrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.till .lbl{font-size:16px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.till .sum{
  font-size:42px;font-weight:680;letter-spacing:-.03em;color:var(--accent);
  font-variant-numeric:tabular-nums;white-space:nowrap;
  transition:transform .2s var(--spring);transform-origin:right center;
}
.till.bump .sum{transform:scale(1.07)}
.goalbar{
  height:8px;border-radius:4px;background:var(--track);
  box-shadow:var(--sh-in);overflow:hidden;margin-top:12px;
}
.goalbar .fill{
  height:100%;width:0;border-radius:4px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  transition:width .5s var(--press);
}
.goalcap{
  margin-top:7px;font-size:13px;color:var(--muted);
  display:flex;justify-content:space-between;gap:10px;font-variant-numeric:tabular-nums;
}
.goalcap.done{color:var(--accent);font-weight:550}

/* ---------- игра: сетка ---------- */
.gridwrap{position:relative}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.cell{
  position:relative;min-height:108px;padding:11px 8px;
  background:linear-gradient(180deg,var(--card),var(--card-2));
  border-radius:18px;box-shadow:var(--sh-2),var(--hl);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  text-align:center;
  transition:transform .16s var(--press),box-shadow .2s var(--press),background .22s ease;
}
.cell:active{transform:translateY(2px) scale(.985);box-shadow:var(--sh-1)}
.cell .em{font-size:31px;line-height:1.1;height:35px;display:flex;align-items:center}
.cell .lb{font-size:15px;line-height:1.2}
.cell .pr{
  position:absolute;left:9px;top:9px;font-size:12px;color:var(--muted);
  font-variant-numeric:tabular-nums;transition:opacity .2s ease;
}
/* закрытая клетка вдавлена в бумагу */
.cell.on{
  background:linear-gradient(180deg,rgba(var(--pc),var(--mark)),rgba(var(--pc),calc(var(--mark) - .04)));
  box-shadow:var(--sh-in);
  transform:translateY(1px);
}
.cell.on .pr{opacity:0}
.cell.free{
  background:linear-gradient(180deg,rgba(var(--pc),.09),rgba(var(--pc),.05));
  box-shadow:var(--sh-in);cursor:default;
}
.cell.free:active{transform:none}
.cell .check{
  position:absolute;top:9px;right:10px;width:20px;height:20px;
  opacity:0;transform:scale(.5);transition:opacity .18s ease,transform .22s var(--spring);
}
.cell .check path{stroke:rgb(var(--pc));stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;fill:none}
.cell.on .check,.cell.free .check{opacity:1;transform:scale(1)}
.cell.pop{animation:stamp .32s var(--spring)}
@keyframes stamp{0%{transform:scale(.93) translateY(2px)}55%{transform:scale(1.02) translateY(0)}100%{transform:scale(1) translateY(1px)}}

.lines{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.lines line{
  stroke:var(--accent);stroke-width:4;stroke-linecap:round;opacity:.9;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
@keyframes draw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.lines line.new{stroke-dasharray:var(--len);animation:draw .45s ease-out}

/* ---------- игра: редкости и счётчик ---------- */
.extras{margin-top:16px;display:flex;flex-direction:column;gap:11px}
.rares{display:flex;flex-wrap:wrap;gap:9px}
.rares:empty{display:none}
.rare{
  display:flex;align-items:center;gap:9px;min-height:60px;padding:9px 16px 9px 13px;
  border-radius:17px;font-size:15px;
  background:linear-gradient(180deg,var(--card),var(--card-2));
  box-shadow:var(--sh-2),var(--hl);
  transition:transform .16s var(--press),box-shadow .18s var(--press),background .22s ease;
}
.rare:active{transform:translateY(2px) scale(.98);box-shadow:var(--sh-1)}
.rare .em{font-size:23px;line-height:1}
.rare .pr{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.rare.mine{
  background:linear-gradient(180deg,rgba(var(--pc),var(--mark)),rgba(var(--pc),calc(var(--mark) - .04)));
  box-shadow:var(--sh-in);
}
.rare.mine .pr{color:rgb(var(--pc));font-weight:650}
.rare.theirs{box-shadow:var(--sh-in);opacity:.75}
.rare.theirs .pr{font-size:21px;line-height:1}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}60%{transform:translateX(5px)}}
.rare.shake{animation:shake .3s ease}

.counter{
  display:flex;align-items:center;gap:11px;padding:11px 13px;
  border-radius:20px;
  background:linear-gradient(180deg,var(--card),var(--card-2));
  box-shadow:var(--sh-2),var(--hl);
}
.counter .c-em{font-size:25px;line-height:1;padding-left:5px}
.counter .c-lb{flex:1;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.counter .c-n{
  min-width:38px;text-align:center;font-size:24px;font-weight:650;
  font-variant-numeric:tabular-nums;
}
.counter .c-btn{
  width:60px;height:60px;border-radius:17px;
  background:linear-gradient(180deg,var(--card),var(--card-2));
  box-shadow:var(--sh-1),var(--hl),0 0 0 1px rgba(0,0,0,.03);
  font-size:27px;line-height:1;color:var(--muted);
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s var(--press),box-shadow .12s var(--press);
}
.counter .c-btn:active{transform:translateY(2px) scale(.96);box-shadow:var(--sh-in)}
.counter .c-btn.plus{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:#fff;font-weight:650;
  box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.3);
}

.footrow{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:20px}
.footrow .btn{min-height:56px;font-size:16px}

/* ---------- монетка / бинго ---------- */
.coin{
  position:fixed;z-index:40;pointer-events:none;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));color:#fff;
  font-size:14px;font-weight:650;font-variant-numeric:tabular-nums;
  padding:6px 12px;border-radius:999px;white-space:nowrap;
  box-shadow:var(--sh-2),inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .58s cubic-bezier(.45,0,.55,1),opacity .58s ease;
}
.cf{
  position:fixed;top:-48px;z-index:50;font-size:26px;line-height:1;
  pointer-events:none;animation:fall var(--d) ease-in forwards;
}
@keyframes fall{to{transform:translate(var(--dx),108vh) rotate(var(--r))}}
.bingo{
  position:fixed;left:50%;top:38%;z-index:51;pointer-events:none;
  transform:translate(-50%,-50%) scale(.6);
  background:linear-gradient(180deg,var(--card),var(--card-2));color:var(--accent);
  font-size:36px;font-weight:750;letter-spacing:.06em;
  padding:20px 38px;border-radius:26px;
  box-shadow:var(--sh-3),var(--hl);
  animation:bpop .5s var(--spring) forwards;
  transition:opacity .4s ease;
}
.bingo.out{opacity:0}
@keyframes bpop{to{transform:translate(-50%,-50%) scale(1)}}

/* ---------- итог ---------- */
.rows{margin-bottom:24px}
.row{
  display:flex;align-items:center;gap:13px;
  padding:15px 20px 15px 13px;border-radius:20px;margin-bottom:11px;
  background:linear-gradient(180deg,var(--card),var(--card-2));
  box-shadow:var(--sh-2),var(--hl);
}
.row .av{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(180deg,rgba(var(--pc),.22),rgba(var(--pc),.12));
  box-shadow:var(--sh-in);
  font-size:23px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.row .nm{flex:1;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .val{font-size:23px;font-weight:680;color:var(--accent);font-variant-numeric:tabular-nums}
.stack{display:flex;flex-direction:column;gap:11px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}