*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overscroll-behavior:none}
body{
  background:
    radial-gradient(80% 50% at 50% -12%, #17233d 0%, transparent 62%),
    #080e19;
  color:#e6edf7;
  font:16px/1.45 system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  user-select:none;-webkit-user-select:none;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:2px solid #38bdf8;outline-offset:3px}
[hidden]{display:none !important}
.app{
  position:relative;display:flex;flex-direction:column;
  width:100%;max-width:540px;margin:0 auto;
  height:100vh;height:100dvh;
  padding:0 0 env(safe-area-inset-bottom);
}

/* ── Шапка ─────────────────────────────────────────── */
.bar{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:calc(8px + env(safe-area-inset-top)) 12px 4px;
}
html.native .bar{padding-top:calc(24px + env(safe-area-inset-top))}
.bar h1{
  flex:1;text-align:center;font-size:20px;font-weight:900;letter-spacing:.04em;
  color:#f3f8ff;text-shadow:0 2px 18px rgba(56,189,248,.22);
}
.bar h1 span{color:#34d399}
.icon{
  width:40px;height:40px;border-radius:12px;background:#141e33;
  border:1px solid #22304b;display:grid;place-items:center;color:#b9cae6;
  transition:background .15s, transform .08s;
}
.icon:active{background:#223053;transform:scale(.95)}
.icon.small{width:34px;height:34px;font-size:15px;border-radius:10px}

/* ── Счёт ──────────────────────────────────────────── */
#scorebar{
  flex:0 0 auto;display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:8px;
  padding:2px 12px 6px;
}
#scorebar.many{gap:6px}
#scorebar.many .pcard{padding:6px 9px 7px;border-radius:12px}
#scorebar.many .pscore{font-size:20px}
#scorebar.many .pname{font-size:9.5px;letter-spacing:.04em}
.pcard{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#141f34,#101a2c);
  border:1px solid #22304b;border-radius:14px;
  padding:7px 12px 9px;
  transition:border-color .25s, box-shadow .25s;
}
.pcard.active{
  border-color:#2f7d5b;
  box-shadow:0 0 0 1px rgba(34,197,94,.22), 0 4px 20px rgba(22,163,74,.16);
}
.pcard.active::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 26px rgba(34,197,94,.14);
}
.pcard.barrel{border-color:#6b4a12;box-shadow:0 0 0 1px rgba(245,158,11,.18)}
.pcard.barrel.active{border-color:#a97a17}
.pname{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  font-size:10.5px;font-weight:700;color:#8fa3c4;
  text-transform:uppercase;letter-spacing:.07em;
  white-space:nowrap;overflow:hidden;
}
.pcard.active .pname{color:#9fe6c1}
.pname b{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.pscore{
  font-size:25px;font-weight:800;line-height:1.12;letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.tag{
  font-size:9px;font-weight:800;letter-spacing:.08em;color:#0b1220;
  background:#f59e0b;border-radius:5px;padding:2px 5px;flex:0 0 auto;
}
.pbar{height:3px;background:#1c2a44;border-radius:3px;margin-top:4px;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#16803f,#34d399);border-radius:3px;transition:width .55s cubic-bezier(.2,.8,.2,1)}
.pcard.barrel .pbar i{background:linear-gradient(90deg,#b45309,#fbbf24)}

/* ── Стол ──────────────────────────────────────────── */
#table{
  flex:1 1 auto;min-height:206px;margin:2px 12px;position:relative;
  border-radius:20px;overflow:hidden;perspective:900px;
  touch-action:manipulation;
  box-shadow:0 12px 34px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.06);
  isolation:isolate;
}
#table::after{
  content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;z-index:4;
  box-shadow:inset 0 0 100px rgba(0,0,0,.5);
}
#diceLayer{position:absolute;inset:0;z-index:2}

#tableMark{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  z-index:0;display:grid;place-items:center;pointer-events:none;
}
#tableMark::before{
  content:'';position:absolute;width:min(78%,340px);aspect-ratio:2.1;
  border:1px solid rgba(255,255,255,.055);border-radius:50%;
  box-shadow:inset 0 0 46px rgba(255,255,255,.025);
}
#tableMark span{
  font-size:clamp(68px,21vw,128px);font-weight:900;letter-spacing:.04em;
  color:rgba(255,255,255,.045);text-shadow:0 3px 10px rgba(0,0,0,.22);
  line-height:1;
}

#trayGuide{
  position:absolute;z-index:0;left:9px;right:9px;top:9px;height:92px;
  border:1px dashed rgba(255,255,255,.10);border-radius:16px;
  pointer-events:none;transition:border-color .3s, background .3s;
}
#trayGuide span{
  position:absolute;left:50%;bottom:7px;transform:translateX(-50%);
  font-size:9px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.24);white-space:nowrap;transition:color .3s;
}
#trayGuide.has{border-color:rgba(74,222,128,.22);background:rgba(8,20,14,.14)}
#trayGuide.has span{color:rgba(167,243,208,.65)}

/* поверхности */
.surface-felt{background:radial-gradient(120% 120% at 50% 0%, #1c7444, #0d4226 66%, #072b18)}
.surface-wood{background:
  repeating-linear-gradient(92deg,#7b4a20 0 26px,#8a562a 26px 40px,#734418 40px 72px,#925c2d 72px 90px)}
.surface-marble{background:
  linear-gradient(160deg,#eef2f5,#cdd6de 38%,#f2f5f8 55%,#d9e1e8 78%,#eef2f5)}
.surface-night{background:
  radial-gradient(1.2px 1.2px at 18% 26%, rgba(255,255,255,.8), transparent 55%),
  radial-gradient(1px 1px at 66% 18%, rgba(255,255,255,.7), transparent 55%),
  radial-gradient(1.4px 1.4px at 42% 62%, rgba(255,255,255,.55), transparent 55%),
  radial-gradient(1px 1px at 82% 71%, rgba(255,255,255,.7), transparent 55%),
  radial-gradient(1px 1px at 30% 84%, rgba(255,255,255,.5), transparent 55%),
  radial-gradient(1px 1px at 88% 40%, rgba(255,255,255,.6), transparent 55%),
  radial-gradient(120% 120% at 70% 15%, #1c2747, #0d1329 62%, #070a18)}
.surface-leather{background:radial-gradient(120% 120% at 50% 8%, #5c3c22, #402a17 65%, #261608)}

/* ── Кости ─────────────────────────────────────────── */
.die{
  position:absolute;left:0;top:0;
  width:var(--s);height:var(--s);
  margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  will-change:transform;z-index:3;
}
.die.kept{z-index:2}
.die.sel{z-index:5}
.cube{
  position:relative;width:var(--s);height:var(--s);
  transform-style:preserve-3d;will-change:transform;
}
.face{
  position:absolute;inset:0;border-radius:calc(var(--s) * .2);
  border:2px solid rgba(0,0,0,.26);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:calc(var(--s) * .13);
  box-shadow:inset 0 0 calc(var(--s) * .18) rgba(0,0,0,.16);
  backface-visibility:hidden;
}
.face::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,255,255,.34),rgba(255,255,255,0) 42%,rgba(0,0,0,.055));
}
.f1{transform:rotateY(0deg) translateZ(calc(var(--s) / 2))}
.f6{transform:rotateY(180deg) translateZ(calc(var(--s) / 2))}
.f3{transform:rotateY(90deg) translateZ(calc(var(--s) / 2))}
.f4{transform:rotateY(-90deg) translateZ(calc(var(--s) / 2))}
.f5{transform:rotateX(90deg) translateZ(calc(var(--s) / 2))}
.f2{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2))}
.pip{place-self:center;width:64%;height:64%;border-radius:50%}
.pip.on{box-shadow:inset 0 -2px 2px rgba(0,0,0,.28)}

.skin-classic .face{background:linear-gradient(145deg,#ffffff,#dde2ea)}
.skin-classic .pip.on{background:#171c26}
.skin-noir .face{background:linear-gradient(145deg,#3a3f47,#0d0e12);border-color:#000}
.skin-noir .pip.on{background:#f4f6fa}
.skin-ruby .face{background:linear-gradient(145deg,#ef6a6f,#7c1d22)}
.skin-ruby .pip.on{background:#fff}
.skin-gold .face{background:linear-gradient(145deg,#f6d98c,#b8862f)}
.skin-gold .pip.on{background:#47330a}
.skin-jade .face{background:linear-gradient(145deg,#8fdcbb,#2f8058)}
.skin-jade .pip.on{background:#0c3b26}
.skin-ice .face{background:linear-gradient(145deg,#f0f9ff,#a9cce9)}
.skin-ice .pip.on{background:#1d5fa8}

.dshadow{
  position:absolute;left:0;top:0;
  width:calc(var(--s) * .92);height:calc(var(--s) * .26);
  margin:calc(var(--s) * -.13) 0 0 calc(var(--s) * -.46);
  border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(closest-side,rgba(0,0,0,.52),rgba(0,0,0,0));
  will-change:transform,opacity;opacity:0;
}
.ring{
  position:absolute;left:50%;top:50%;
  width:calc(var(--s) * 1.22);height:calc(var(--s) * 1.22);
  margin:calc(var(--s) * -.61);
  border-radius:26%;border:2px dashed transparent;pointer-events:none;
  transition:border-color .16s, box-shadow .16s;
}
.die.sel .ring{
  border-color:rgba(74,222,128,.9);
  box-shadow:0 0 20px rgba(74,222,128,.55), inset 0 0 16px rgba(74,222,128,.22);
  animation:ringpulse 1.3s ease-in-out infinite;
}
@keyframes ringpulse{50%{box-shadow:0 0 26px rgba(74,222,128,.8), inset 0 0 18px rgba(74,222,128,.3)}}
.check{
  position:absolute;right:calc(var(--s) * -.12);top:calc(var(--s) * -.12);
  width:calc(var(--s) * .42);height:calc(var(--s) * .42);border-radius:50%;
  background:#16a34a;color:#fff;font-size:calc(var(--s) * .24);font-weight:900;
  display:grid;place-items:center;opacity:0;transform:scale(.4);
  transition:opacity .2s, transform .25s cubic-bezier(.2,1.5,.4,1);
  box-shadow:0 2px 8px rgba(0,0,0,.4);pointer-events:none;
}
.die.kept .check{opacity:1;transform:scale(1)}

/* ── Чипы на столе ─────────────────────────────────── */
#tableChips{
  position:absolute;left:10px;right:10px;bottom:9px;z-index:6;
  display:flex;justify-content:space-between;gap:8px;pointer-events:none;
}
.tchip{
  font-size:11px;font-weight:700;letter-spacing:.02em;
  background:rgba(6,12,22,.58);border:1px solid rgba(255,255,255,.12);
  color:#dbe7f7;border-radius:999px;padding:5px 11px;
  backdrop-filter:blur(6px);white-space:nowrap;
  transition:opacity .2s, color .2s;
}
.tchip.on{color:#a7f3d0;border-color:rgba(74,222,128,.4)}
.tchip.ghost{background:rgba(6,12,22,.35);color:#b7c6df}
.tchip:empty{display:none}

#tableMsg{
  position:absolute;left:0;right:0;top:27%;z-index:8;
  display:flex;justify-content:center;
  pointer-events:none;opacity:0;transition:opacity .18s;
}
#tableMsg.show{opacity:1}
#tableMsg b{
  display:block;padding:12px 24px;border-radius:16px;
  font-size:clamp(26px,8vw,40px);font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(5,10,19,.62);border:1px solid rgba(255,255,255,.14);
  box-shadow:0 14px 40px rgba(0,0,0,.5);backdrop-filter:blur(6px);
  animation:msgpop .28s cubic-bezier(.2,1.4,.4,1);
  text-align:center;line-height:1.1;
}
#tableMsg.good b{color:#86efac;border-color:rgba(74,222,128,.45);text-shadow:0 0 26px rgba(74,222,128,.4)}
#tableMsg.bad b{color:#fca5a5;border-color:rgba(248,113,113,.45);text-shadow:0 0 26px rgba(248,113,113,.4)}
#tableMsg.warn b{color:#fcd34d;border-color:rgba(251,191,36,.45);text-shadow:0 0 26px rgba(251,191,36,.35)}
#tableMsg.info b{font-size:clamp(20px,6vw,30px);color:#dbeafe;letter-spacing:.02em}
@keyframes msgpop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}

/* ── Панель хода ───────────────────────────────────── */
#panel{
  flex:0 0 auto;padding:7px 12px calc(10px + env(safe-area-inset-bottom));
}
.turnrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.turnwho{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8fa3c4;
}
.turnwho b{color:#a7f3d0}
.goal{
  font-size:11px;font-weight:700;color:#9fb4d4;
  background:#141e33;border:1px solid #22304b;border-radius:999px;
  padding:5px 10px;white-space:nowrap;
}
.goal.barrel{color:#fcd34d;border-color:#5c4311;background:#241b0b}
.goal.entry{color:#7dd3fc;border-color:#1f4c66;background:#0c2230}
.scorerow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-height:43px}
.turnscore{
  font-size:38px;font-weight:900;line-height:1.02;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:#f2f8ff;
  transition:color .2s;
}
.turnscore small{font-size:11px;font-weight:700;color:#7e93b3;letter-spacing:.06em;margin-left:7px;text-transform:uppercase}
.gain{
  font-size:14px;font-weight:800;color:#4ade80;opacity:0;transform:translateY(4px);
  transition:opacity .2s, transform .2s;
}
.gain.show{opacity:1;transform:translateY(0)}
#hint{
  min-height:31px;font-size:12.5px;line-height:1.35;color:#8497b6;
  margin:1px 1px 6px;
}
#hint b{color:#c7d6ec;font-weight:700}
.actions{display:flex;gap:9px}
.btn{
  flex:1;height:54px;border-radius:16px;font-size:16px;font-weight:800;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .08s, background .15s, opacity .15s, box-shadow .15s;
  position:relative;overflow:hidden;
}
.btn:active:not(:disabled){transform:scale(.97)}
.btn.primary{
  background:linear-gradient(180deg,#24c463,#149844);color:#fff;
  box-shadow:0 6px 18px rgba(34,197,94,.32), inset 0 1px 0 rgba(255,255,255,.22);
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}
.btn.primary:active:not(:disabled){background:linear-gradient(180deg,#1cad56,#0f8138)}
.btn.ghost{background:#182338;border:1px solid #2b3d5f;color:#d8e4f5}
.btn.ghost:active:not(:disabled){background:#22304d}
.btn.big{height:52px;font-size:15.5px}
.btn:disabled{opacity:.38;box-shadow:none;filter:saturate(.45);cursor:default}
/* Кнопки прямо в карточке (вне flex-колонки) иначе сжимаются по тексту. */
.card .btn{width:100%}
.card .btn.smallbtn{width:auto}
.btn.risk{background:linear-gradient(180deg,#f0a52c,#c77708);box-shadow:0 6px 18px rgba(245,158,11,.3), inset 0 1px 0 rgba(255,255,255,.22)}

/* ── Модальные окна ────────────────────────────────── */
.modal{
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  padding:18px;background:rgba(4,9,19,.78);
  backdrop-filter:blur(5px);
  animation:fadein .18s ease;
}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.card{
  width:100%;max-width:430px;max-height:86dvh;overflow:auto;
  background:linear-gradient(180deg,#16223a,#101a2c);
  border:1px solid #2a3b5c;border-radius:20px;padding:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  animation:cardin .22s cubic-bezier(.2,.9,.3,1);
}
@keyframes cardin{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.card::-webkit-scrollbar{width:6px}
.card::-webkit-scrollbar-thumb{background:#2c3e5f;border-radius:3px}
.card h2{font-size:19px;font-weight:800;letter-spacing:.01em}
.cardhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card h3{
  font-size:11px;color:#8fa3c4;margin:18px 0 9px;
  text-transform:uppercase;letter-spacing:.1em;font-weight:800;
}
.card p{font-size:13.5px;line-height:1.55;color:#b9c8de;margin:10px 0}
.card p b{color:#e6eefb}
.card h2 + p{margin-top:12px}
.vstack{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.vstack .btn{flex:0 0 auto}
.btns{display:flex;gap:9px;margin-top:18px}
.btns .btn{flex:1}
.fineprint{font-size:11.5px;color:#7288a8;text-align:center;margin-top:14px !important}

/* правила */
.rules h3{margin-top:20px}
.ruletlist,.rulelist{font-size:13.5px;color:#c3d1e5;padding-left:20px;line-height:1.65}
.ruletlist li::marker{color:#34d399}
.rulelist li{padding-left:2px;margin-bottom:6px}
.rulelist li::marker{color:#34d399;font-weight:800}
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;margin:4px 0 6px;overflow:hidden;border-radius:11px;border:1px solid #263753}
.tbl th,.tbl td{padding:7px 8px;text-align:center;border-bottom:1px solid #1e2c45}
.tbl th{background:#1b2942;color:#8fa3c4;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.tbl td{color:#dbe6f5;font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:800;color:#a7f3d0}
.note{
  font-size:13px !important;background:#0e1a2d;border:1px solid #22304b;
  border-radius:11px;padding:10px 12px;line-height:1.55;
}

/* оформление */
.picker{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  justify-items:center;align-items:center;
}
#surfPicker{grid-template-columns:repeat(5,1fr);gap:7px}
.swatch{border-radius:12px;border:2px solid transparent;display:grid;place-items:center;padding:4px;transition:border-color .15s, background .15s}
.swatch.sel{border-color:#38bdf8;background:#1d4266}
.swatch:active{transform:scale(.95)}
.die-mini{
  width:44px;height:44px;border-radius:10px;border:2px solid rgba(0,0,0,.3);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:6px;box-shadow:inset 0 0 6px rgba(0,0,0,.12);
}
.die-mini .pip{width:70%;height:70%}
.surf-mini{width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.14)}
.mini-classic{background:linear-gradient(145deg,#fff,#dde2ea)}
.mini-classic .pip.on{background:#171c26}
.mini-noir{background:linear-gradient(145deg,#3a3f47,#0d0e12)}
.mini-noir .pip.on{background:#f4f6fa}
.mini-ruby{background:linear-gradient(145deg,#ef6a6f,#7c1d22)}
.mini-ruby .pip.on{background:#fff}
.mini-gold{background:linear-gradient(145deg,#f6d98c,#b8862f)}
.mini-gold .pip.on{background:#47330a}
.mini-jade{background:linear-gradient(145deg,#8fdcbb,#2f8058)}
.mini-jade .pip.on{background:#0c3b26}
.mini-ice{background:linear-gradient(145deg,#f0f9ff,#a9cce9)}
.mini-ice .pip.on{background:#1d5fa8}
.mini-felt{background:radial-gradient(120% 120% at 50% 0%,#19683c,#0d4226 70%,#072b18)}
.mini-wood{background:repeating-linear-gradient(92deg,#7b4a20 0 8px,#8a562a 8px 12px,#734418 12px 20px,#925c2d 20px 26px)}
.mini-marble{background:linear-gradient(160deg,#eef2f5,#cdd6de 55%,#f2f5f8)}
.mini-night{background:radial-gradient(120% 120% at 70% 15%,#1c2747,#0d1329 62%,#070a18)}
.mini-leather{background:radial-gradient(120% 120% at 50% 8%,#5c3c22,#402a17 65%,#261608)}

.toggles{display:flex;gap:8px}
.toggle{
  flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:#0e1a2d;border:1px solid #22304b;border-radius:12px;
  padding:9px 11px;font-size:12.5px;font-weight:700;color:#b9cae6;cursor:pointer;
}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle i{
  width:36px;height:21px;border-radius:999px;background:#26354f;position:relative;
  transition:background .18s;flex:0 0 auto;
}
.toggle i::after{
  content:'';position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;
  background:#8fa3c4;transition:transform .18s, background .18s;
}
.toggle input:checked + i{background:#16803f}.toggle input:checked + i::after{transform:translateX(15px);background:#fff}

.accountbox{
  background:#0b1526;border:1px solid #22304b;border-radius:14px;
  padding:12px;margin:10px 0 12px;
}
.accountbox h3{margin:0 0 8px}
.accountbox .field{margin-bottom:8px}
.accountwho{margin:0 0 8px;color:#b9cae6;font-size:13px}
.accountwho b{color:#e8eefb}

/* ── Стартовый экран ───────────────────────────────── */
.screen{
  position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  padding:24px 20px calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(70% 55% at 50% 18%, rgba(22,163,74,.16), transparent 62%),
    radial-gradient(90% 70% at 50% 100%, rgba(29,78,216,.12), transparent 60%),
    #080e19;
  overflow:auto;
  animation:fadein .25s ease;
}
.screen::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 75%);
}
.start-inner{position:relative;width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center}
.logo-dice{display:flex;align-items:center;justify-content:center;gap:13px;height:92px;margin-bottom:6px}
.ldie{
  width:54px;height:54px;border-radius:13px;border:1px solid rgba(255,255,255,.6);
  background:linear-gradient(145deg,#ffffff,#ccd6e2);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  padding:8px;box-shadow:0 16px 30px rgba(0,0,0,.45), inset 0 -3px 7px rgba(0,0,0,.14);
  transform:rotate(-9deg);
}
.ldie:nth-child(2){transform:translateY(-11px) rotate(6deg) scale(1.08)}
.ldie:nth-child(3){transform:rotate(13deg)}
.ldie .pip{width:70%;height:70%}
.ldie .pip.on{background:#111a28;box-shadow:inset 0 -1px 2px rgba(0,0,0,.4)}
.logo-title{
  font-size:clamp(76px,22vw,104px);font-weight:900;line-height:.9;letter-spacing:-.055em;
  background:linear-gradient(180deg,#ffffff 10%,#c7f9dd 46%,#22c55e 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 10px 26px rgba(34,197,94,.24));
}
.logo-sub{
  font-size:12px;font-weight:800;letter-spacing:.52em;text-transform:uppercase;
  color:#8fa3c4;margin:8px 0 0 .52em;
}
.logo-lead{text-align:center;font-size:13px;line-height:1.5;color:#7f93b2;margin:18px 0 0}
.start-btns{display:flex;flex-direction:column;gap:9px;width:100%;margin-top:30px}
.start-foot{display:flex;align-items:center;gap:9px;margin-top:20px;font-size:11.5px;color:#647896}
.dot{color:#38bdf8}
.linkbtn{color:#9fc4e8;font-size:11.5px;border-bottom:1px dashed rgba(159,196,232,.4);padding-bottom:1px}
.linkbtn:active{color:#dbeafe}

/* ── Победа ────────────────────────────────────────── */
.card.over{text-align:center;padding-top:26px}
.winner-die{
  width:64px;height:64px;border-radius:16px;margin:0 auto 14px;
  background:linear-gradient(145deg,#f6d98c,#b8862f);
  box-shadow:0 14px 34px rgba(245,158,11,.25), inset 0 -4px 10px rgba(0,0,0,.25);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:9px;
  transform:rotate(-10deg);
}
.winner-die .pip{width:70%;height:70%}
.winner-die .pip.on{background:#47330a}
.over h2{font-size:26px;margin-bottom:4px}
.over-sub{color:#8fa3c4 !important;font-size:13px !important;margin-top:2px !important}
.final{display:flex;flex-direction:column;gap:6px;margin:18px 0 2px}
.frow{display:flex;justify-content:space-between;align-items:center;background:#0e1a2d;border:1px solid #22304b;border-radius:10px;padding:8px 12px;font-size:13.5px}
.frow b{font-size:16px;font-variant-numeric:tabular-nums}
.frow.win{border-color:#2f7d5b;background:#0e2419}
.frow.win b{color:#86efac}

/* ── Тост и конфетти ───────────────────────────────── */
#toast{
  position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));z-index:60;
  transform:translate(-50%,-18px);opacity:0;pointer-events:none;
  background:rgba(17,28,47,.96);border:1px solid #2e4367;border-radius:999px;
  padding:9px 16px;font-size:12.5px;font-weight:700;color:#e3edf9;
  box-shadow:0 10px 30px rgba(0,0,0,.5);white-space:nowrap;max-width:92vw;
  overflow:hidden;text-overflow:ellipsis;
  transition:opacity .2s, transform .2s;
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#confetti{position:fixed;inset:0;z-index:35;pointer-events:none;overflow:hidden}
#confetti i{position:absolute;top:-16px;width:8px;height:13px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translate3d(var(--dx,0),108vh,0) rotate(760deg)}}

/* ── Адаптив ───────────────────────────────────────── */
@media (max-height:700px){
  .bar{padding-top:calc(5px + env(safe-area-inset-top));padding-bottom:2px}
  .bar h1{font-size:18px}
  #scorebar{padding-bottom:4px}
  .pcard{padding-top:5px;padding-bottom:7px}
  .pscore{font-size:22px}
  .turnscore{font-size:32px}
  .btn{height:50px}
  #hint{min-height:27px;font-size:12px;margin-bottom:4px}
  #panel{padding-top:5px}
  .logo-dice{height:78px}
  .ldie{width:48px;height:48px;padding:7px}
  .logo-title{font-size:clamp(62px,19vw,84px)}
  .logo-lead{display:none}
  .start-btns{margin-top:18px}
  .start-foot{margin-top:14px}
  .screen{padding-top:16px;padding-bottom:24px}
}
@media (max-height:600px){
  .turnscore{font-size:28px}
  .scorerow{min-height:34px}
  .btn{height:46px;font-size:15px}
  #hint{min-height:0;font-size:11.5px}
  #table{min-height:170px}
  .logo-dice{display:none}
  .logo-title{font-size:64px}
}
@media (min-width:560px){
  #table{margin-left:16px;margin-right:16px}
  .bar{padding-left:16px;padding-right:16px}
  #scorebar{padding-left:16px;padding-right:16px}
  #panel{padding-left:16px;padding-right:16px}
}
@media (max-height:520px) and (orientation:landscape){
  .app{max-width:820px}
  .bar{display:none}
  #scorebar{padding-top:8px}
  #table{min-height:120px;margin-top:0}
  #panel{padding-bottom:6px}
  .turnscore{font-size:26px}
  .scorerow{min-height:30px}
  #hint{display:none}
  .btn{height:44px}
  #tableChips{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* ── Новые правила и сеть ─────────────────────────── */
.tag.pit{background:#38bdf8;color:#062033}
.tag.bolts{background:#f87171;color:#2a0505}
.pcard.pit{border-color:#1d5b78;box-shadow:0 0 0 1px rgba(56,189,248,.14)}
.pcard.pit.active{border-color:#38bdf8}
.goal.pit{color:#7dd3fc;border-color:#1f4c66;background:#0c2230}
.rulegrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.field{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;color:#8fa3c4;letter-spacing:.04em;text-transform:uppercase}
.field input,.field select{
  width:100%;height:40px;border-radius:10px;border:1px solid #2b3d5f;
  background:#0b1628;color:#e6eefb;padding:0 10px;font:600 14px/1.2 system-ui,sans-serif;
  outline:none;appearance:none;
}
.field select{background-image:linear-gradient(45deg,transparent 50%,#8fa3c4 50%),linear-gradient(135deg,#8fa3c4 50%,transparent 50%);background-position:calc(100% - 15px) 17px,calc(100% - 10px) 17px;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field input:focus,.field select:focus{border-color:#2f7d5b;box-shadow:0 0 0 2px rgba(34,197,94,.16)}
.field input:disabled{opacity:.4}
.modal .toggle{margin:8px 0}
.netcode{display:flex;align-items:center;gap:10px;margin:4px 0 10px}
.netcode b{font:800 30px/1 ui-monospace,Consolas,monospace;letter-spacing:.16em;color:#9fe6c1}
.smallbtn{flex:0 0 auto;height:36px;padding:0 12px;font-size:12px;border-radius:10px}
.netmode{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:12px 0 14px;padding:4px;border:1px solid #22304b;border-radius:12px;background:#0b1628}
.netmode button{height:36px;border-radius:9px;font:800 12px/1 system-ui,sans-serif;color:#8fa3c4;letter-spacing:.02em}
.netmode button.on{background:#1b2a44;color:#e6eefb;box-shadow:inset 0 0 0 1px #2b3d5f}
.netmode button:active{background:#22304d}
.signal{width:100%;min-height:78px;max-height:150px;resize:vertical;border-radius:10px;border:1px solid #2b3d5f;background:#0b1628;color:#cfe0f5;padding:9px 10px;font:11px/1.45 ui-monospace,Consolas,monospace;word-break:break-all;outline:none}
.signal:focus{border-color:#2f7d5b;box-shadow:0 0 0 2px rgba(34,197,94,.16)}
.signal[readonly]{color:#9fe6c1}
.netbtns{display:flex;gap:8px;margin:8px 0 4px;flex-wrap:wrap}
.netbtns .btn{flex:1;min-width:118px}
.netreset{margin-top:10px;color:#8fa3c4}
.fairlog{max-height:190px;overflow:auto;display:flex;flex-direction:column;gap:6px;margin:6px 0}
.fairrow{background:#0e1a2d;border:1px solid #22304b;border-radius:10px;padding:8px 10px;font-size:11.5px;color:#a9bcd7}
.fairrow b{color:#e6eefb;font-size:12px}
.fairrow code{display:block;color:#7dd3fc;font:10.5px/1.4 ui-monospace,Consolas,monospace;word-break:break-all;margin-top:3px}
.fairrow .fairline{display:flex;justify-content:space-between;gap:8px;align-items:center}
.fairrow .ok{color:#4ade80;font-weight:800}
.fairrow .bad{color:#f87171;font-weight:800}
.fairrow button{background:#182338;border:1px solid #2b3d5f;border-radius:7px;color:#d8e4f5;font-size:10.5px;padding:3px 7px}
.confirm{max-width:360px}
.confirm h2{font-size:21px}
.confirm p{margin:8px 0 0;color:#b9c8de}
.confirm .btns{margin-top:16px}
.note.good{border-color:#2f7d5b;color:#b6f0cf}
.note.bad{border-color:#8a3434;color:#fecaca}
#setupMsg.bad{border-color:#8a3434;color:#fecaca}
.btn.danger{background:linear-gradient(180deg,#e2564f,#b32d27);color:#fff;box-shadow:0 6px 18px rgba(220,38,38,.28), inset 0 1px 0 rgba(255,255,255,.18)}
.btn.danger:active:not(:disabled){background:linear-gradient(180deg,#cf4842,#98221d)}
.rulegrid .btn{height:46px;font-size:13.5px}

/* ── Настройка компании и лобби ───────────────────── */
.setupcount{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 10px;font-size:11px;font-weight:700;color:#8fa3c4;letter-spacing:.04em;text-transform:uppercase}
.countbtns{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.countbtns button{min-width:38px;height:34px;padding:0 8px;border-radius:9px;border:1px solid #22304b;background:#0b1628;color:#8fa3c4;font:800 13px/1 system-ui,sans-serif}
.countbtns button.on{background:#1b2a44;color:#e6eefb;border-color:#2f7d5b;box-shadow:inset 0 0 0 1px rgba(34,197,94,.22)}
.setupnames{display:flex;flex-direction:column;gap:7px;margin:4px 0 8px}
.setupnames .field{gap:3px}
.setupnames .field input{height:38px}
.setupnames .who{display:flex;align-items:center;gap:7px;font-size:11px;color:#7288a8}
.setupnames .who b{color:#b9cae6}
.netlobby{display:flex;flex-direction:column;gap:5px;margin:4px 0 8px}
.netlobby .lp{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#0e1a2d;border:1px solid #22304b;border-radius:9px;padding:6px 9px;font-size:12px;color:#b9cae6}
.netlobby .lp.me{border-color:#2f7d5b;color:#d8f5e5}
.netlobby .lp span:last-child{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#7288a8}
.pcard.out{opacity:.5;filter:saturate(.45)}
.tag.out{background:#64748b;color:#e2e8f0}