:root {
  --night: #0a1233;
  --ice: #eaf2ff;
  --paper: #f3e6c4;
  --paper-hi: #fffaf0;
  --ink: #2d1d0b;
  --ink-soft: #6b4d22;
  --rose: #dba89c;
  --olive: #b3a45a;
  --olive-ink: #4a4520;
  --sea: #a9c3d3;
  --medal: #3f7fc4;
  --medal-dark: #1f4f8a;
  --red-ink: #a8321f;
  --aurora: #5ef2c4;
  --serif: Alegreya, Georgia, "Times New Roman", serif;
  --caps: "Alegreya SC", Alegreya, Georgia, serif;
  --focus: 0 0 0 3px #fffaf0, 0 0 0 6px var(--medal);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: var(--serif);
  font-variant-numeric: lining-nums;
  color: var(--ice);
  background: var(--night);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
.in-tg #logout-btn { display: none; }
button { font: inherit; touch-action: manipulation; }
:focus-visible { outline: none; box-shadow: var(--focus); }

/* ---------- небо ---------- */
.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background: linear-gradient(180deg, #060b24 0%, #101d52 34%, #2a4591 60%, #7288cb 78%, #e7bd8e 92%, #f6d9ae 100%);
}
.sky::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(1.2px 1.2px at 8% 9%, #fff, transparent), radial-gradient(1px 1px at 17% 24%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 29% 6%, #fff, transparent), radial-gradient(1px 1px at 41% 17%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 53% 4%, #fff, transparent), radial-gradient(1px 1px at 62% 21%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 71% 11%, #fff, transparent), radial-gradient(1px 1px at 83% 5%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 92% 19%, #fff, transparent), radial-gradient(1px 1px at 4% 33%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 36% 36%, #fff, transparent), radial-gradient(1px 1px at 77% 34%, #fff, transparent),
    radial-gradient(ellipse 45% 16% at 50% 100%, rgba(255, 216, 150, .85), transparent 70%);
}
.aurora {
  position: absolute; inset: 0 0 38% 0; mix-blend-mode: screen; opacity: .9;
  transition: filter .6s;
}
/* мягкие края масками, без blur: он слишком тяжёлый для телефонов */
.aurora i {
  position: absolute; left: -25%; width: 150%; height: 36%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 20%, rgba(0, 0, 0, .5) 50%, transparent 72%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 20%, rgba(0, 0, 0, .5) 50%, transparent 72%);
  animation: drift 24s ease-in-out infinite alternate;
  will-change: transform;
}
.aurora i:nth-child(1) {
  top: 8%;
  background: linear-gradient(90deg, transparent 6%, rgba(94, 242, 196, .6) 30%, rgba(94, 200, 255, .45) 55%, rgba(170, 120, 255, .38) 76%, transparent 94%);
}
.aurora i:nth-child(2) {
  top: 26%; height: 24%;
  background: linear-gradient(90deg, transparent 12%, rgba(150, 110, 255, .35) 36%, rgba(94, 242, 196, .5) 62%, transparent 90%);
  animation-duration: 31s; animation-delay: -9s;
}
.aurora i:nth-child(3) {
  top: -4%; height: 28%;
  background: linear-gradient(90deg, transparent 20%, rgba(94, 242, 196, .32) 50%, transparent 80%);
  animation-duration: 19s; animation-delay: -5s;
}
.aurora::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(210, 255, 240, 0) 0 5px, rgba(210, 255, 240, .13) 6px, rgba(210, 255, 240, 0) 9px);
  -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 22%, #000 50%, transparent 80%);
  mask-image: linear-gradient(180deg, transparent 2%, #000 22%, #000 50%, transparent 80%);
  animation: curtain 14s linear infinite;
}
@keyframes drift {
  0% { transform: translateX(-7%) rotate(-6deg) scaleY(1); }
  100% { transform: translateX(7%) rotate(-1deg) scaleY(1.4); }
}
@keyframes curtain { to { background-position: 180px 0; } }
.party .aurora { filter: brightness(1.7) saturate(1.3); }
.city { position: absolute; left: 0; bottom: 0; width: 100%; height: 36vh; min-height: 190px; }
.snow { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- бумага карты ---------- */
.paper {
  color: var(--ink);
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .08 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.3'/></svg>"),
    radial-gradient(ellipse 60% 50% at 22% 14%, rgba(255, 252, 240, .6), transparent 70%),
    radial-gradient(ellipse 55% 45% at 88% 90%, rgba(150, 100, 40, .24), transparent 70%),
    radial-gradient(circle at 10% 82%, rgba(150, 100, 40, .14) 0 2.5%, transparent 5%),
    radial-gradient(circle at 94% 12%, rgba(150, 100, 40, .12) 0 2%, transparent 4.5%),
    linear-gradient(160deg, #f6eacb, #ecdcb2 55%, #e1ca94);
  box-shadow: 0 0 0 1px #5d421c, 0 0 0 7px var(--rose), 0 0 0 8px #5d421c, 0 40px 90px rgba(3, 8, 30, .7);
}

/* ---------- кнопки ---------- */
.btn {
  border: none; border-radius: 10px; padding: 13px 18px; cursor: pointer;
  font: 800 17px/1.1 var(--caps); letter-spacing: .03em;
  transition: transform .08s, box-shadow .08s, filter .2s;
}
.btn:active { transform: translateY(3px); }
.btn:disabled { filter: grayscale(.7) brightness(.8); cursor: not-allowed; }
.btn-wide { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: 15px; border-radius: 999px; }
.btn-ink {
  color: #f6ecd2; background: linear-gradient(180deg, #3a5aa8, #1f3576);
  box-shadow: 0 4px 0 #111d45, 0 10px 22px rgba(17, 29, 69, .35);
}
.btn-ink:active { box-shadow: 0 1px 0 #111d45; }
.btn-amber {
  color: var(--ink); background: linear-gradient(180deg, #ffe9ae, #f0b44a 55%, #c47a12);
  box-shadow: 0 0 0 1px #7a4a0c, 0 4px 0 #7a4a0c, 0 10px 24px rgba(240, 180, 74, .3);
}
.btn-amber:active { box-shadow: 0 0 0 1px #7a4a0c, 0 1px 0 #7a4a0c; }

.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; color: var(--ice);
  background: rgba(16, 29, 82, .45); border: 1px solid rgba(255, 255, 255, .26);
  transition: background .2s;
}
.icon-btn:hover { background: rgba(255, 255, 255, .18); }
.icon-btn.is-off { color: rgba(234, 242, 255, .45); }

.link-btn {
  background: none; border: none; padding: 2px; cursor: pointer;
  color: var(--medal-dark); font: italic 700 14px var(--serif);
  text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
}

/* ---------- заголовок ---------- */
.title {
  margin: 0; text-align: center;
  font: 800 clamp(30px, 5.4vw, 56px)/1 var(--caps); letter-spacing: .09em;
  color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
.subtitle {
  margin: 6px 0 0; text-align: center;
  font: italic 600 clamp(14px, 1.7vw, 18px)/1.2 var(--serif); color: var(--ink-soft);
}

/* ---------- вход ---------- */
.auth {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; padding: 28px 16px 36vh;
}
.auth-head { text-align: center; }
.auth-rose {
  width: 76px; height: 76px; color: rgba(234, 242, 255, .85);
  --rose-a: rgba(234, 242, 255, .9); --rose-b: rgba(94, 242, 196, .7);
  filter: drop-shadow(0 0 12px rgba(94, 242, 196, .5));
  animation: slowturn 90s linear infinite;
}
@keyframes slowturn { to { transform: rotate(360deg); } }
.auth .title { color: #f4f8ff; font-size: clamp(38px, 8vw, 72px); text-shadow: 0 0 26px rgba(94, 242, 196, .55), 0 2px 0 rgba(0, 0, 0, .35); }
.auth .subtitle { color: rgba(234, 242, 255, .85); }
.auth-card { width: min(400px, 100%); padding: 24px; display: grid; gap: 14px; border-radius: 3px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 10px; background: rgba(45, 29, 11, .09); }
.tab {
  border: none; background: none; cursor: pointer; padding: 10px; border-radius: 8px;
  color: var(--ink-soft); font: 700 16px var(--serif);
}
.tab.is-active { background: var(--paper-hi); color: var(--ink); box-shadow: 0 1px 2px rgba(45, 29, 11, .2); }
.field { display: grid; gap: 6px; }
.field span { font: 700 15px var(--serif); color: var(--ink-soft); }
.field input {
  width: 100%; padding: 12px 14px; border-radius: 8px;
  background: var(--paper-hi); border: 1px solid #b8a276;
  color: var(--ink); font: 500 17px var(--serif); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder { color: rgba(107, 77, 34, .5); }
.field input:focus { border-color: var(--medal); box-shadow: 0 0 0 3px rgba(63, 127, 196, .25); }
.form-error { margin: 0; color: var(--red-ink); font: 700 15px var(--serif); }
.form-error:empty { display: none; }
.fineprint { margin: 0; text-align: center; font: italic 500 14px var(--serif); color: var(--ink-soft); }
.disclaimer {
  margin: 18px auto 0; max-width: 60ch; text-align: center;
  font: italic 500 14px/1.5 var(--serif); color: rgba(234, 242, 255, .8);
  text-shadow: 0 1px 6px rgba(6, 11, 36, .8);
}

/* ---------- верхняя панель ---------- */
.topbar {
  max-width: 980px; margin: 0 auto; padding: 14px 16px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.player { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font: 800 17px var(--caps); color: #fff;
  background: radial-gradient(circle at 35% 30%, #6fa7e3, var(--medal-dark));
  box-shadow: 0 0 0 2px #e9c46a;
}
.player-name { font: 700 17px var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px rgba(6, 11, 36, .7); }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.balance {
  display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px;
  background: linear-gradient(180deg, #f8eed4, #e8d4a4); color: var(--ink);
  box-shadow: 0 0 0 1px #8a6a30, 0 6px 18px rgba(0, 0, 0, .35);
}
.chip-ico { width: 30px; height: 30px; }
.balance-num { font: 800 20px var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.balance.gain { animation: gain .5s ease-out; }
@keyframes gain { 40% { transform: scale(1.1); box-shadow: 0 0 0 1px #8a6a30, 0 0 26px rgba(255, 210, 110, .85); } }

/* ---------- автомат: лист карты ---------- */
.stage { max-width: min(900px, calc(100vh - 20px)); margin: 0 auto; padding: 8px 16px 40px; }
.machine {
  position: relative; border-radius: 3px;
  padding: clamp(24px, 3.4vw, 38px) clamp(22px, 3.6vw, 44px) clamp(22px, 2.8vw, 30px);
}
/* оливковая рамка с завитками */
.machine::before {
  content: ""; position: absolute; inset: 7px; padding: 10px; pointer-events: none;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><path d='M3 22c0-9 6-15 13-15 5 0 8 3 8 7s-3 6-6 6-4-2-4-4 1-3 3-3' fill='none' stroke='%234a4520' stroke-width='1.5' stroke-linecap='round'/><circle cx='6' cy='6' r='1.5' fill='%234a4520'/></svg>") 0 0 / 28px 28px,
    linear-gradient(135deg, #c4b66c, #a39447 50%, #c1b267);
  box-shadow: inset 0 0 0 1px var(--olive-ink);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.machine > * { position: relative; }

.medallion {
  --d: 120px;
  width: var(--d); height: var(--d); border-radius: 50%; flex: none;
  background: radial-gradient(circle closest-side, var(--paper-hi) 0 74%, var(--medal-dark) 74% 76.5%, #6aa5e0 76.5% 83%, var(--medal) 83% 91%, var(--medal-dark) 91% 94%, var(--ink) 94% 97%, transparent 98%);
  filter: drop-shadow(0 5px 8px rgba(60, 40, 10, .3));
}
.med-tl, .med-tr { position: absolute !important; top: 16px; --d: clamp(0px, 12vw, 112px); display: grid; place-items: center; }
.med-tl { left: 16px; }
.med-tr { right: 16px; }
.med-tl svg, .med-tr svg { width: 66%; height: 66%; }
.med-tl svg { color: var(--ink); --rose-a: #f3e6c4; --rose-b: #2d1d0b; }

.cartouche { margin: 0 auto 16px; max-width: 60%; }

.fs-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: fit-content; margin: -4px auto 12px; padding: 5px 6px 5px 16px; border-radius: 999px;
  background: linear-gradient(180deg, #1d7a69, #0f4a40); color: #eafff8;
  box-shadow: 0 0 0 1px #0a3a31, 0 0 22px rgba(94, 242, 196, .55);
  font: 700 16px var(--serif);
}
.fs-banner strong { font: 800 22px var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.fs-mult { padding: 3px 10px; border-radius: 999px; background: #ffe7a3; color: var(--ink); font: 800 15px var(--serif); }

/* рамка с градусной шкалой, как на старых картах */
.frame {
  --tick: 6px;
  position: relative; padding: calc(var(--tick) + 7px);
  border: 1.5px solid var(--ink);
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 20px, #f7eed6 20px 40px) top / 100% var(--tick) no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 20px, #f7eed6 20px 40px) bottom / 100% var(--tick) no-repeat,
    repeating-linear-gradient(180deg, var(--ink) 0 20px, #f7eed6 20px 40px) left / var(--tick) 100% no-repeat,
    repeating-linear-gradient(180deg, var(--ink) 0 20px, #f7eed6 20px 40px) right / var(--tick) 100% no-repeat,
    radial-gradient(rgba(45, 29, 11, .2) .8px, transparent 1.3px) 0 0 / 7px 7px,
    linear-gradient(180deg, #9db9cb, #88a8bf);
  transition: box-shadow .4s;
}
.frame::before { content: ""; position: absolute; inset: var(--tick); border: 1px solid var(--ink); pointer-events: none; }
.bonus-mode .frame { box-shadow: 0 0 0 3px var(--aurora), 0 0 34px rgba(94, 242, 196, .7); }

.reels { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.reel {
  position: relative; overflow: hidden; aspect-ratio: 1 / 2.52; border-radius: 3px;
  background: linear-gradient(90deg, #b7cae8, #edf3ff 26%, #f8fbff 50%, #edf3ff 74%, #b7cae8);
  box-shadow: 0 0 0 1.2px var(--ink);
  transition: box-shadow .3s;
}
.reel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(16, 29, 82, .5), rgba(16, 29, 82, 0) 20%, rgba(16, 29, 82, 0) 80%, rgba(16, 29, 82, .5));
}
.reel.anticipate {
  box-shadow: 0 0 0 2px var(--aurora), 0 0 26px 6px rgba(94, 242, 196, .85);
  animation: antic .35s ease-in-out infinite alternate;
}
@keyframes antic { to { box-shadow: 0 0 0 2px #e6fff8, 0 0 40px 12px rgba(94, 242, 196, 1); } }
.strip { will-change: transform; }
.cell { position: relative; aspect-ratio: 1 / .84; display: grid; place-items: center; }
.cell svg {
  position: relative; z-index: 1; width: 82%; height: 82%;
  filter: drop-shadow(0 2px 1.5px rgba(20, 30, 70, .3));
  transition: opacity .3s;
}
.strip.spinning .cell svg { filter: none; }
.reels.showing .cell svg { opacity: .3; }
.reels.showing .cell.hit svg { opacity: 1; animation: hit .8s ease-in-out infinite; }
.cell.hit::before {
  content: ""; position: absolute; inset: 5%; border-radius: 8px;
  background: radial-gradient(circle, rgba(255, 220, 130, .75), rgba(255, 220, 130, 0) 72%);
  box-shadow: inset 0 0 0 2.5px #c9962e, 0 0 16px rgba(240, 190, 80, .7);
  animation: glow .8s ease-in-out infinite;
}
@keyframes hit { 50% { transform: scale(1.13) rotate(-2deg); } }
@keyframes glow { 50% { opacity: .55; } }

.paylines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; overflow: visible; }
.pl { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.pl-under { stroke: #fbf4e0; stroke-width: 8; opacity: .9; }
.pl-color { stroke-width: 4; }
.pl-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw .45s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.meter {
  margin: 12px 0 10px; min-height: 1.5em; text-align: center;
  font: italic 600 17px/1.5 var(--serif); color: var(--ink-soft);
}
.meter.is-win { color: var(--red-ink); }

.controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; gap: 12px; }
.ctl { --d: clamp(108px, 16vw, 144px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; }
.ctl-label { font: 700 14px/1.1 var(--serif); color: var(--ink-soft); }
.ctl-value { font: 800 clamp(19px, 2.6vw, 26px)/1.15 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.ctl-win .ctl-value { color: var(--red-ink); }
.bet-row { display: flex; gap: 8px; margin-top: 3px; }
.round-btn {
  width: 28px; height: 28px; border-radius: 50%; cursor: pointer; flex: none; padding: 0;
  font: 800 18px/1 var(--serif); color: var(--ink);
  background: linear-gradient(180deg, #fff0bf, #e0b45a 60%, #b07d22);
  border: 1px solid #5d421c; box-shadow: 0 2px 0 #5d421c;
}
.round-btn:active { transform: translateY(2px); box-shadow: 0 0 0 #5d421c; }
.round-btn:disabled { filter: grayscale(.9) brightness(.85); opacity: .55; cursor: not-allowed; }

/* кнопка-компас */
.spin-wrap { display: grid; place-items: center; }
.spin {
  --s: clamp(100px, min(19vw, 18vh), 148px);
  position: relative; width: var(--s); height: var(--s); padding: 0; border: none; border-radius: 50%; cursor: pointer;
  background: conic-gradient(from 210deg, #fff0bf, #b78a2f, #f3d27e, #7d5818, #f7e2a3, #9a6d1f, #fff0bf);
  box-shadow: 0 0 0 1.5px var(--ink), 0 8px 0 #5d421c, 0 14px 28px rgba(40, 25, 5, .45);
  transition: transform .08s, box-shadow .08s;
}
.spin:active { transform: translateY(6px); box-shadow: 0 0 0 1.5px var(--ink), 0 2px 0 #5d421c, 0 6px 12px rgba(40, 25, 5, .45); }
.spin-ring {
  position: absolute; inset: 5%; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(45, 29, 11, .85) 0 .9deg, transparent .9deg 7.5deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 79%, #000 80% 100%);
  mask: radial-gradient(circle closest-side, transparent 0 79%, #000 80% 100%);
}
.spin.is-spinning .spin-ring { animation: slowturn 1.3s linear infinite; }
.spin-face {
  position: absolute; inset: 17%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 42% 35%, #fff7dc, #ffd36a 38%, #e89a2c 72%, #a8561a);
  box-shadow: inset 0 0 0 1.5px var(--ink), inset 0 -6px 12px rgba(120, 50, 0, .35), 0 0 22px rgba(255, 190, 80, .5);
  font: 800 clamp(15px, 2vw, 19px) var(--caps); letter-spacing: .03em; color: var(--ink);
}
.spin.is-spinning .spin-face { background: radial-gradient(circle at 42% 35%, #fffbe8, #ffe39a 40%, #f0b44a 75%, #b8661f); }
.spin.is-free .spin-face { background: radial-gradient(circle at 42% 35%, #effffa, #7ff0d4 40%, #2aa58a 75%, #0f5f52); }
.spin:disabled { filter: grayscale(.6) brightness(.8); cursor: not-allowed; }

.dep-big {
  position: relative; overflow: hidden;
  padding: 22px 26px; border-radius: 999px; font-size: 20px;
  animation: depPulse 1.6s ease-in-out infinite;
}
.dep-big::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .85), transparent);
  animation: shine 2.4s ease-in-out infinite;
}
@keyframes shine { 60%, 100% { left: 130%; } }
@keyframes depPulse { 50% { box-shadow: 0 0 0 1px #7a4a0c, 0 4px 0 #7a4a0c, 0 0 40px 6px rgba(255, 200, 80, .6); } }

/* ---------- WIN ---------- */
.win-overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: radial-gradient(ellipse at 50% 45%, rgba(24, 44, 120, .6), rgba(4, 8, 28, .94));
  animation: fadeIn .25s ease-out;
}
.win-overlay.out { animation: fadeOut .35s ease-in forwards; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
.rays {
  position: absolute; left: 50%; top: 45%; width: 160vmax; height: 90vmax; margin: -45vmax 0 0 -80vmax;
  background: conic-gradient(from 0deg, rgba(94, 242, 196, 0), rgba(94, 242, 196, .3) 8%, rgba(150, 110, 255, .22) 16%, rgba(94, 242, 196, 0) 28%,
    rgba(94, 200, 255, .26) 45%, rgba(94, 242, 196, 0) 60%, rgba(170, 120, 255, .24) 78%, rgba(94, 242, 196, .2) 90%, rgba(94, 242, 196, 0));
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  animation: slowturn 26s linear infinite;
  will-change: transform;
}
.rose-big {
  position: absolute; left: 50%; top: 50%; width: min(120vmin, 980px); height: min(120vmin, 980px);
  color: rgba(233, 196, 106, .3); --rose-a: rgba(255, 240, 200, .06); --rose-b: rgba(233, 185, 73, .16);
  animation: roseTurn 70s linear infinite;
}
@keyframes roseTurn { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.win-stack { position: relative; z-index: 1; text-align: center; padding: 0 12px; animation: winIn .85s cubic-bezier(.2, 1.35, .4, 1) both; }
@keyframes winIn {
  0% { transform: scale(.15) rotate(-10deg); opacity: 0; }
  55% { transform: scale(1.12) rotate(2deg); opacity: 1; }
  78% { transform: scale(.97) rotate(-1deg); }
  100% { transform: none; }
}
.win-tier {
  font: 800 clamp(26px, 6.2vw, 60px)/1 var(--caps); letter-spacing: .14em;
  color: #effdff; text-shadow: 0 0 18px rgba(94, 242, 196, .95), 0 0 44px rgba(94, 200, 255, .6);
}
.win-tier:empty { display: none; }
.win-tier.is-long { font-size: clamp(22px, 4.4vw, 44px); letter-spacing: .04em; margin-bottom: .25em; }
.win-word {
  display: grid; justify-content: center;
  font: 900 clamp(104px, 26vw, 280px)/.95 var(--caps); letter-spacing: .02em;
  animation: breathe 1.1s ease-in-out .85s infinite alternate;
}
.win-word.is-long { font-size: clamp(80px, 20vw, 230px); }
@keyframes breathe { to { transform: scale(1.04); } }
.ww { grid-area: 1 / 1; white-space: nowrap; }
.ww-depth {
  color: #4a2a08;
  text-shadow:
    0 .008em 0 #6b4210, 0 .016em 0 #633c0e, 0 .024em 0 #5a350c, 0 .032em 0 #512f0a,
    0 .04em 0 #472808, 0 .048em 0 #3d2206, 0 .056em 0 #321b04,
    0 .09em .12em rgba(0, 0, 0, .7), 0 0 .35em rgba(94, 242, 196, .35);
}
.ww-face {
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .95) 50%, transparent 62%) -160% 0 / 60% 100% no-repeat,
    linear-gradient(180deg, #fff8dc 0%, #ffe08a 26%, #e9b040 48%, #a8661a 66%, #f2c865 84%, #fff0bf 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: faceShine 2.2s ease-in-out .6s infinite;
}
@keyframes faceShine { 0% { background-position: -160% 0, 0 0; } 55%, 100% { background-position: 260% 0, 0 0; } }
.ww-dots { -webkit-background-clip: text; background-clip: text; color: transparent; }
/* снежная шапка на буквах */
.ww-dots-a { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 9%, #fff 14%, #eef6ff 20%, rgba(255, 255, 255, 0) 27%); }
/* иней */
.ww-dots-b {
  background-image:
    radial-gradient(circle, #fff 0 .007em, rgba(255, 255, 255, 0) .018em),
    radial-gradient(circle, #fff 0 .005em, rgba(255, 255, 255, 0) .014em);
  background-size: .17em .23em, .11em .29em;
  background-position: 0 0, .05em .09em;
  animation: twinkle .9s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .1; } to { opacity: .55; } }
.win-amount {
  margin-top: .12em;
  font: 800 clamp(36px, 8vw, 78px)/1.1 var(--serif); font-variant-numeric: lining-nums tabular-nums;
  color: #fff8e6; text-shadow: 0 0 24px rgba(255, 200, 90, .85), 0 3px 0 #7a4a0c;
}
.win-amount:empty { display: none; }
.win-sub { margin-top: 10px; font: italic 600 18px var(--serif); color: rgba(234, 242, 255, .88); }
.win-sub:empty { display: none; }

.fly-chip { position: fixed; left: 0; top: 0; width: 30px; height: 30px; z-index: 70; pointer-events: none; }

/* ---------- модалки ---------- */
.modal {
  border: none; padding: 0; background: transparent; color: var(--ink); overflow: visible;
  width: 100%; max-width: min(470px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
}
.modal-wide { max-width: min(800px, calc(100% - 32px)); }
.modal::backdrop { background: rgba(4, 8, 28, .8); }
.modal[open] { animation: popIn .32s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes popIn { from { transform: scale(.88) translateY(20px); opacity: 0; } }
.modal-body { position: relative; padding: 26px 24px 20px; border-radius: 3px; }
.modal-wide .modal-body { max-height: calc(100dvh - 40px); overflow-y: auto; }
.modal h2 { margin: 0 44px 6px 0; font: 800 30px/1.1 var(--caps); letter-spacing: .04em; color: var(--ink); }
.modal h3 { margin: 22px 0 10px; font: 800 20px var(--caps); letter-spacing: .04em; color: var(--ink); }
.modal-lead { margin: 0 0 18px; font: 500 16px/1.5 var(--serif); color: var(--ink-soft); max-width: 66ch; }
.modal-lead b { color: var(--ink); }
.modal-x {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  border: 1px solid #b8a276; background: var(--paper-hi); color: var(--ink);
  font: 400 24px/1 var(--serif);
}

.dep-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.dep-opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
  padding: 12px 6px; border-radius: 10px; color: var(--ink);
  background: var(--paper-hi); border: 1.5px solid #c9b48a;
  transition: border-color .2s, background .2s, transform .15s;
}
.dep-opt:hover { transform: translateY(-2px); }
.dep-opt[aria-checked="true"] { border-color: var(--medal); background: #eef4ff; box-shadow: 0 0 0 4px rgba(63, 127, 196, .2); }
.dep-stack { position: relative; width: 46px; height: 64px; }
.dep-stack svg { position: absolute; left: 0; width: 46px; height: 46px; filter: drop-shadow(0 2px 1px rgba(45, 29, 11, .4)); }
.dep-amt { font: 800 20px var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.dep-free { font: italic 700 14px var(--serif); color: #1f7a62; }
.dep-wait { text-align: center; margin: 4px 0 16px; }
.dep-wait p { margin: 0 0 6px; color: var(--ink-soft); font-size: 16px; }
.countdown { font: 800 46px var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
#dep-go { margin: 6px 0 12px; font-size: 19px; padding: 16px; }

.paytable { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pt {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px;
  background: rgba(255, 250, 240, .7); border: 1px solid #d3bf93;
}
.pt-sym { width: 60px; height: 60px; flex: none; border-radius: 6px; background: #eef4ff; box-shadow: inset 0 0 0 1px rgba(45, 29, 11, .35); display: grid; place-items: center; }
.pt-sym svg { width: 86%; height: 86%; }
.pt-rows { display: grid; gap: 1px; font-size: 15px; }
.pt-rows div { display: flex; gap: 8px; align-items: baseline; }
.pt-rows span { color: var(--ink-soft); min-width: 2.2em; }
.pt-rows b { font: 800 16px var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--red-ink); }
.rules-text { margin-top: 16px; font: 500 16px/1.55 var(--serif); color: var(--ink-soft); }
.rules-text p { margin: 0 0 8px; max-width: 70ch; }
.rules-text b { color: var(--ink); }
.lines-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.line-mini {
  padding: 6px; border-radius: 6px; text-align: center;
  background: rgba(255, 250, 240, .7); border: 1px solid #d3bf93;
  font: 700 13px var(--serif); color: var(--ink-soft);
}
.line-mini svg { display: block; width: 100%; height: auto; margin-top: 4px; }

.toast {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 80;
  transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); text-align: center;
  padding: 12px 20px; border-radius: 10px;
  background: #f8eed4; color: var(--ink); border: 1px solid #8a6a30;
  font: 700 16px var(--serif); box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
  animation: toastIn .3s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes toastIn { from { transform: translate(-50%, 20px); opacity: 0; } }

/* ---------- узкие экраны ---------- */
@media (max-width: 720px) {
  .med-tl, .med-tr { display: none !important; }
  .cartouche { max-width: none; }
}
@media (max-width: 600px) {
  .topbar { padding: 10px 12px 8px; }
  .player-name { max-width: 30vw; font-size: 15px; }
  .balance-num { font-size: 17px; }
  .icon-btn { width: 36px; height: 36px; }
  .stage { padding: 6px 12px 28px; }
  .paper { box-shadow: 0 0 0 1px #5d421c, 0 0 0 5px var(--rose), 0 0 0 6px #5d421c, 0 30px 60px rgba(3, 8, 30, .7); }
  .machine { padding: 22px 16px 18px; }
  .machine::before { inset: 5px; padding: 7px; }
  .cartouche { margin-bottom: 12px; }
  .frame { --tick: 4px; padding: calc(var(--tick) + 5px); }
  .reels { gap: 4px; }
  .controls { gap: 6px; }
  .ctl { --d: 108px; padding: 0 16px; }
  .ctl-label { font-size: 12px; }
  .ctl-value { font-size: 18px; }
  .round-btn { width: 26px; height: 26px; font-size: 16px; }
  .dep-big { padding: 18px 16px; font-size: 17px; }
  .meter { font-size: 15px; margin: 10px 0 8px; }
  .modal-body { padding: 22px 16px 16px; }
}
@media (max-width: 380px) {
  #dep-top { display: none !important; }
  .dep-amt { font-size: 16px; }
  .ctl { --d: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .aurora i, .aurora::after, .auth-rose, .rays, .rose-big, .ww-dots-b, .ww-face, .win-word, .dep-big, .dep-big::after,
  .reel.anticipate, .cell.hit::before, .reels.showing .cell.hit svg, .spin.is-spinning .spin-ring { animation: none; }
  .rose-big { transform: translate(-50%, -50%); }
  .win-stack { animation: fadeIn .2s both; }
}