/* Just the ticket, one actual result line and manual return; no popup subtitles or rules. */
.lottery-stock { display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; touch-action:manipulation; }
.lottery-stock img { display:block; width:100%; height:auto; pointer-events:none; transition:filter .16s; }
.lottery-stock:hover img, .lottery-stock:focus-visible img { filter:drop-shadow(0 0 8px #ffe78a) drop-shadow(0 0 18px #ffce6680); }
.lottery-stock:focus-visible { outline:2px solid #ffe8a5; outline-offset:4px; border-radius:4px; }
#kioskLottery { position:absolute; left:51%; top:20.5371%; width:22%; height:10.6%; z-index:3; }
#kioskLottery .lottery-stock { position:relative; height:100%; min-width:0; min-height:0; padding:0; border:0; box-shadow:none; background:transparent; }
#kioskLottery .lottery-stock:is(:hover,:focus-visible,:active) { background:transparent; border:0; box-shadow:none; }
#kioskLottery .lottery-stock:focus-visible { outline:2px solid #ffe8a5; outline-offset:4px; }
#kioskLottery .lottery-stock img { width:100%; height:100%; object-fit:contain; object-position:center bottom; transform:translateY(11.274%); }
#kioskLottery .kiosk-price { top:calc(100% - 1px); }
#kioskLottery .lottery-stock[hidden] { display:none!important; }
#kioskLottery .lottery-stock:disabled { opacity:1; cursor:not-allowed; }

/* ---------- Scratch ticket (v0.42) ----------
   Only the ticket, the actual result and a manual return. Real rubbing: canvas layers per field
   (printed disc under silver latex); without canvas the plain cover image opens on a gesture.
   Every row has a fixed size, so nothing moves while rubbing or when the result appears. */
.lottery-overlay {
  --lotto-coin:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='a' cx='.36' cy='.3' r='.78'%3E%3Cstop offset='0' stop-color='%23fff7d1'/%3E%3Cstop offset='.5' stop-color='%23f1c24f'/%3E%3Cstop offset='1' stop-color='%239c6514'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='32' r='28' fill='url(%23a)' stroke='%235e3d0b' stroke-width='3'/%3E%3Ccircle cx='32' cy='32' r='20.5' fill='none' stroke='%238d5e16' stroke-width='2.4' stroke-dasharray='2.6 2.4'/%3E%3Cpath d='M27 21h8a6.5 6.5 0 0 1 0 13h-8zm0 13v11m-4-6h12' fill='none' stroke='%236b440d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-sizing:border-box; position:fixed; inset:0; margin:auto;
  width:min(820px, calc(100vw - 24px)); height:fit-content;
  max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px);
  padding:clamp(16px, 2.6vw, 28px) clamp(14px, 2.8vw, 30px) clamp(16px, 2.4vw, 24px);
  overflow:auto; overscroll-behavior:contain; scrollbar-width:thin;
  color:#f8e6bd; text-align:center; font:inherit; color-scheme:dark;
}
body .lottery-overlay.lottery-overlay {
  border:1px solid #c79d58; border-radius:24px;
  background:
    radial-gradient(120% 75% at 50% -16%, #7d5529 0%, #3f2a15 40%, transparent 72%),
    radial-gradient(80% 55% at 50% 118%, #3d140c 0%, transparent 70%),
    linear-gradient(180deg, #2b1c10, #150d07);
  box-shadow:0 34px 100px #000d, 0 0 0 1px #000a, inset 0 1px 0 #ffe9b04d, inset 0 0 0 5px #00000030, inset 0 -40px 70px #00000055;
}
body .lottery-overlay.lottery-overlay::backdrop { background:radial-gradient(ellipse at 50% 42%, #24160bd9, #050302f2 70%); backdrop-filter:blur(5px); }
.lottery-overlay[open] {
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 60px auto;
  gap:10px; align-content:center; justify-items:center;
}

/* The ticket: printed foil art, a glint, three fields and a crumbs layer. */
.lottery-ticket {
  position:relative; width:100%; aspect-ratio:8/3; margin:0; isolation:isolate;
  container-type:inline-size; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}
.lottery-back, .lottery-glint { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.lottery-back { object-fit:fill; user-select:none; filter:drop-shadow(0 16px 18px #000b) drop-shadow(0 3px 3px #0009); }
.lottery-glint {
  overflow:hidden;
  -webkit-mask:url("assets/shop/lotto/lotto-back.png") center/100% 100% no-repeat;
  mask:url("assets/shop/lotto/lotto-back.png") center/100% 100% no-repeat;
}
.lottery-glint::before {
  content:""; position:absolute; top:-12%; bottom:-12%; left:0; width:24%;
  background:linear-gradient(100deg, #fff6d000 15%, #fff6d06b 50%, #fff6d000 85%);
  translate:-130% 0; animation:lotto-glint 7s cubic-bezier(.45,0,.25,1) 1.4s infinite;
}
@keyframes lotto-glint { 0% { translate:-130% 0; } 32%, 100% { translate:540% 0; } }
.lottery-ticket::before, .lottery-ticket::after {
  position:absolute; z-index:1; pointer-events:none; white-space:nowrap;
  color:#6e490e; text-shadow:0 1px 0 #fff2b88c, 0 -1px 0 #5a38074d; rotate:-2.7deg;
}
.lottery-ticket::before {
  content:"КИРОВСКОЕ ЛОТО" / ""; left:0; right:0; top:16.6%;
  font:900 2.05cqw/1 "Arial Black", "Segoe UI Black", system-ui, sans-serif;
  letter-spacing:.55em; text-indent:.55em; opacity:.88;
}
.lottery-ticket::after {
  content:"№ " attr(data-serial) / ""; left:9.5%; bottom:13.6%;
  font:700 1.4cqw/1 ui-monospace, "Cascadia Mono", "Courier New", monospace; letter-spacing:.12em; opacity:.72;
}
.lottery-fields {
  position:absolute; inset:18% 13%; z-index:2;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; gap:6%;
}
.lottery-overlay .lottery-field {
  position:relative; display:block; width:100%; height:auto; min-width:0; min-height:0; margin:0; padding:0;
  border:0; border-radius:50%; background:transparent; box-shadow:none; aspect-ratio:1;
  cursor:crosshair; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
  transform:none;
}
/* The fields sit on the ticket's lean: the left disc a touch lower, the right one higher. */
.lottery-overlay .lottery-field:nth-child(1) { translate:0 5.7%; }
.lottery-overlay .lottery-field:nth-child(3) { translate:0 -5.7%; }
.lottery-field img { width:100%; height:100%; display:block; object-fit:contain; pointer-events:none; user-select:none; }
.lottery-field > canvas { position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.lottery-overlay .lottery-field:not(.is-ready) > canvas { visibility:hidden; }
.lottery-overlay.is-rubbing .lottery-field.is-ready > img { visibility:hidden; }
.lottery-overlay.is-rubbing .lottery-ticket { touch-action:none; cursor:var(--lotto-coin) 20 20, crosshair; }
.lottery-overlay.is-rubbing .lottery-field { cursor:inherit; }
.lottery-overlay.is-rubbing:not([data-kind="pending"]) .lottery-ticket,
.lottery-overlay .lottery-field.is-revealed { cursor:default; }
/* 0.43: only the reveal fades. A new ticket's latex is on at once — before, the cover faded and
   un-hid (visibility after .5s) while the fresh print under it was already visible. */
.lottery-cover { transition:none; }
.lottery-field.is-revealed .lottery-cover { opacity:0; scale:1.06; visibility:hidden; transition:opacity .5s ease, scale .5s ease, visibility 0s linear .5s; }
.lottery-field.is-popping .lottery-under { animation:lotto-pop .65s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes lotto-pop { 0% { scale:.93; filter:brightness(1.6); } 55% { scale:1.05; filter:brightness(1.15); } 100% { scale:1; filter:none; } }
.lottery-flakes { position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; }

/* Disc rings share the cover art geometry (centre 48.9%/48.3%, radius 44.7% of the field). */
.lottery-overlay .lottery-field::before,
.lottery-overlay .lottery-field::after {
  content:""; position:absolute; left:4.2%; top:3.6%; width:89.4%; height:89.4%;
  border-radius:50%; pointer-events:none; opacity:0;
}
.lottery-overlay .lottery-field::before { transition:opacity .35s ease; }
/* A sheen keeps sweeping over untouched latex, so it reads as something to scratch. */
.lottery-overlay .lottery-field::after {
  background:linear-gradient(115deg, #fff0 36%, #ffffff8c 50%, #fff0 64%) 100% 0 / 250% 100% no-repeat;
  mix-blend-mode:screen;
}
.lottery-overlay .lottery-field:not(.is-revealed):not(.is-touched)::after { opacity:.9; animation:lotto-sheen 4.4s ease-in-out infinite; }
.lottery-overlay .lottery-field:nth-child(2)::after { animation-delay:.4s; }
.lottery-overlay .lottery-field:nth-child(3)::after { animation-delay:.8s; }
@keyframes lotto-sheen { 0%, 58% { background-position:100% 0; } 100% { background-position:0 0; } }
/* The deciding pair or triple: a framed medal ring with a light running round it (red for a fine). */
.lottery-overlay .lottery-field.is-match::before {
  opacity:1; box-shadow:0 0 0 3px #fffbe8, 0 0 0 6px #7d4f0f, 0 0 24px 9px #fff4c4c0, 0 0 50px 16px #ffcf5a66;
  animation:lotto-match 1.3s ease-in-out infinite alternate;
}
.lottery-overlay[data-kind="fine"] .lottery-field.is-match::before {
  box-shadow:0 0 0 3px #ffe2d9, 0 0 0 6px #8e1c10, 0 0 24px 9px #ff6a4cc0, 0 0 50px 16px #ff2d2d66;
}
.lottery-overlay .lottery-field.is-match::after {
  opacity:1; left:-.8%; top:-1.4%; width:99.4%; height:99.4%; mix-blend-mode:normal;
  background:conic-gradient(from 0deg, #fff0 0deg, #fffdf0 26deg, #fff0 64deg, #fff0 180deg, #fffdf0 206deg, #fff0 244deg);
  -webkit-mask:radial-gradient(closest-side, #0000 89%, #000 91%, #000 98%, #0000 100%);
  mask:radial-gradient(closest-side, #0000 89%, #000 91%, #000 98%, #0000 100%);
  animation:lotto-spin 2.6s linear infinite;
}
@keyframes lotto-match { from { scale:.99; opacity:.78; } to { scale:1.03; opacity:1; } }
@keyframes lotto-spin { to { rotate:360deg; } }
.lottery-overlay .lottery-field.is-dim > :is(img, canvas) { filter:saturate(.45) brightness(.68); transition:filter .5s ease; }

/* Wordless hint: a coin rubs the first disc until the ticket is touched. */
.lottery-hint {
  position:absolute; left:33%; top:33%; width:34%; height:34%; z-index:3; pointer-events:none; opacity:0;
  background:var(--lotto-coin) center/contain no-repeat; filter:drop-shadow(0 5px 6px #000a); transition:opacity .3s ease;
}
/* 0.43: only on the very first ticket of the game (is-teaching); later tickets just get scratched. */
.lottery-overlay.is-fresh.is-teaching .lottery-hint { opacity:1; animation:lotto-rub 2.3s ease-in-out .5s infinite both; }
@keyframes lotto-rub {
  0%, 100% { translate:-58% -42%; rotate:-16deg; }
  22% { translate:56% -24%; rotate:10deg; }
  46% { translate:-52% 10%; rotate:-14deg; }
  70% { translate:52% 36%; rotate:12deg; }
  86% { translate:-22% 48%; rotate:-6deg; }
}

/* Result: one pill with an icon; its row is always reserved. */
.lottery-caption { display:none!important; }
.lottery-result {
  box-sizing:border-box; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%; min-height:0; margin:0; padding:0; overflow:visible;
}
.lottery-result-title {
  --pill-a:#3c2d1d; --pill-b:#271c12; --pill-edge:#ffffff26;
  --icon-a:#fff6cf; --icon-b:#e9bd57; --icon-c:#9a6418; --icon-ink:#3a2408;
  box-sizing:border-box; display:inline-flex; align-items:center; gap:.6em; max-width:100%;
  padding:.36em 1.2em .36em .4em; border:1px solid var(--pill-edge); border-radius:999px;
  background:linear-gradient(180deg, var(--pill-a), var(--pill-b));
  box-shadow:0 10px 26px #0008, inset 0 1px 0 #ffffff24;
  color:#ffe9b3; font-size:clamp(16px, 2.2vw, 21px); font-weight:800; line-height:1.25;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.lottery-result-title::before {
  content:"" / ""; flex:0 0 auto; display:grid; place-items:center; width:1.8em; height:1.8em; border-radius:50%;
  font-size:.8em; font-weight:900; line-height:1; color:var(--icon-ink);
  background:radial-gradient(circle at 34% 28%, var(--icon-a), var(--icon-b) 55%, var(--icon-c));
  box-shadow:inset 0 -2px 3px #0005, 0 2px 6px #0007;
}
.lottery-result[data-kind="pending"] .lottery-result-title { visibility:hidden; }
.lottery-result:not([data-kind="pending"]) .lottery-result-title { animation:lotto-result .55s cubic-bezier(.18,1.45,.4,1) both; }
@keyframes lotto-result { from { opacity:0; scale:.82; } to { opacity:1; scale:1; } }
.lottery-result[data-kind="win"] .lottery-result-title { --pill-a:#36522b; --pill-b:#1f3418; --pill-edge:#b8e08a59; color:#ecffd6; }
.lottery-result[data-kind="win"] .lottery-result-title::before { content:"₽" / ""; --icon-a:#f4ffd9; --icon-b:#9fd36b; --icon-c:#4b7a26; --icon-ink:#173008; }
.lottery-result[data-kind="large-win"] .lottery-result-title {
  --pill-a:#7f5714; --pill-b:#4a300a; --pill-edge:#ffd77a; color:#fff4cc;
  box-shadow:0 10px 26px #0008, 0 0 28px #ffc94a5e, inset 0 1px 0 #fff2c055;
}
.lottery-result[data-kind="large-win"] .lottery-result-title::before { content:"★" / ""; }
.lottery-result[data-kind="fine"] .lottery-result-title { --pill-a:#61231a; --pill-b:#3a120d; --pill-edge:#ff9b8459; color:#ffdcd0; }
.lottery-result[data-kind="fine"] .lottery-result-title::before { content:"!" / ""; --icon-a:#ffd9cf; --icon-b:#ef6a4f; --icon-c:#8e2414; --icon-ink:#fff; }
.lottery-result[data-kind="lose"] .lottery-result-title { color:#dfcca8; }
.lottery-result[data-kind="lose"] .lottery-result-title::before { content:"✕" / ""; --icon-a:#ece1cc; --icon-b:#ab9b7f; --icon-c:#5d5140; --icon-ink:#2c241a; }

/* Return: a gold pill; dark and inert until the ticket is settled. */
.lottery-actions { display:flex; justify-content:center; width:100%; margin:0; }
body .lottery-overlay.lottery-overlay .lottery-return {
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  min-width:min(300px, 100%)!important; max-width:100%; min-height:52px!important; margin:0; padding:12px 30px 12px 24px;
  border:1px solid #ffe3a3!important; border-radius:999px!important;
  background:linear-gradient(180deg, #ffecb4 0%, #f4ca70 46%, #d39a3e 100%)!important;
  color:#3b260c!important; font:inherit; font-size:16.5px; font-weight:800!important; line-height:1.2!important; letter-spacing:.01em;
  text-shadow:0 1px 0 #fff4cf99;
  box-shadow:0 8px 20px #0008, 0 2px 0 #7b5321, inset 0 1px 0 #fffbe6, inset 0 -3px 6px #a3692566!important;
  opacity:1!important; filter:none!important; transform:none; cursor:pointer; touch-action:manipulation;
  transition:transform .14s ease, filter .14s ease, box-shadow .14s ease!important;
}
body .lottery-overlay.lottery-overlay .lottery-return::before {
  content:""; flex:0 0 auto; width:1.05em; height:1.05em; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 5l-7 7 7 7' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
body .lottery-overlay.lottery-overlay .lottery-return:hover:not(:disabled) { filter:brightness(1.07)!important; transform:translateY(-1px); }
body .lottery-overlay.lottery-overlay .lottery-return:active:not(:disabled) {
  transform:translateY(1px);
  box-shadow:0 3px 10px #0007, 0 1px 0 #7b5321, inset 0 2px 6px #8a5a1e80!important;
}
body .lottery-overlay.lottery-overlay .lottery-return:focus-visible { outline:3px solid #fff2bc!important; outline-offset:4px; }
body .lottery-overlay.lottery-overlay .lottery-return:disabled {
  background:linear-gradient(180deg, #3b2d1e, #281d13)!important; border-color:#6d5536!important;
  color:#a68e69!important; text-shadow:none; cursor:not-allowed;
  box-shadow:inset 0 1px 0 #ffffff12, 0 2px 8px #0005!important;
}
.lottery-overlay:not([data-kind="pending"]) .lottery-return { animation:lotto-ready 1.1s ease-out .25s both; }
@keyframes lotto-ready {
  0% { box-shadow:0 8px 20px #0008, 0 2px 0 #7b5321, 0 0 0 0 #ffe7a0cc; }
  100% { box-shadow:0 8px 20px #0008, 0 2px 0 #7b5321, 0 0 0 16px #ffe7a000; }
}

/* Keep the shared dialog button skin (border, gradient, pressed inset, square focus ring)
   off the round scratch fields in every state. Keyboard focus is a soft round glow. */
body .lottery-overlay.lottery-overlay .lottery-field,
body .lottery-overlay.lottery-overlay .lottery-field:is(:hover,:active,:focus,:focus-visible,:disabled,.is-scratching,.is-revealed) {
  border:0!important;
  border-radius:50%!important;
  background:transparent!important;
  box-shadow:none!important;
  outline:none!important;
  -webkit-tap-highlight-color:transparent;
  -webkit-appearance:none;
  appearance:none;
}
body .lottery-overlay.lottery-overlay .lottery-field::-moz-focus-inner { border:0; }
body .lottery-overlay.lottery-overlay .lottery-field:is(:hover,:active,:focus,:focus-visible) { filter:none!important; }
body .lottery-overlay.lottery-overlay .lottery-field:not(.is-revealed):focus-visible { filter:drop-shadow(0 0 7px #fff2b0) drop-shadow(0 0 14px #ffd76680)!important; }
body .lottery-overlay.lottery-overlay:not(.is-rubbing) .lottery-field:not(.is-revealed):is(:hover,.is-scratching) { filter:drop-shadow(0 0 6px #fff2b0)!important; }
body .lottery-overlay.lottery-overlay .lottery-field img { outline:none; -webkit-user-drag:none; }

/* Short landscape (phones on their side): the ticket gets the full width, result + return share a row. */
@media (max-height:620px) and (min-width:481px) {
  body .lottery-overlay.lottery-overlay { width:min(940px, calc(100vw - 24px)); padding:10px 16px 12px; border-radius:18px; }
  .lottery-overlay[open] {
    grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto 50px;
    grid-template-areas:"ticket ticket" "result actions"; gap:6px 14px;
  }
  .lottery-ticket { grid-area:ticket; width:min(100%, calc((100dvh - 108px) * 8 / 3)); }
  .lottery-result { grid-area:result; }
  .lottery-actions { grid-area:actions; width:auto; }
  body .lottery-overlay.lottery-overlay .lottery-return { min-width:230px!important; min-height:46px!important; padding:10px 24px 10px 18px; font-size:15.5px; }
  .lottery-result-title { font-size:17px; }
}
/* Portrait phones: the ticket stands upright, so the discs are about twice as large to rub. */
@media (orientation:portrait) and (max-width:620px) {
  body .lottery-overlay.lottery-overlay {
    width:calc(100vw - 16px); max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px);
    padding:14px 12px 16px; border-radius:20px;
  }
  .lottery-overlay[open] { grid-template-rows:auto 56px auto; gap:8px; }
  .lottery-ticket { aspect-ratio:3/8; width:min(100%, 340px, calc((100dvh - 170px) * 3 / 8)); }
  .lottery-back, .lottery-glint { inset:auto; left:50%; top:50%; width:266.6667%; height:37.5%; translate:-50% -50%; rotate:90deg; }
  .lottery-back { filter:drop-shadow(16px 0 18px #000b) drop-shadow(3px 0 3px #0009); }
  .lottery-ticket::before { top:9.2%; font-size:4.4cqw; letter-spacing:.2em; text-indent:.2em; }
  .lottery-ticket::after { left:0; right:0; bottom:8.6%; text-align:center; font-size:3.8cqw; }
  .lottery-fields {
    inset:12.5% 18%; grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(3,minmax(0,1fr));
    gap:4% 0; justify-items:center;
  }
  .lottery-overlay .lottery-field { width:auto; height:100%; max-width:none; }
  .lottery-overlay .lottery-field:nth-child(1) { translate:-5.7% 0; }
  .lottery-overlay .lottery-field:nth-child(3) { translate:5.7% 0; }
  .lottery-result-title { font-size:16px; padding-right:1em; }
  body .lottery-overlay.lottery-overlay .lottery-return { width:100%; min-width:0!important; }
}
@media (prefers-reduced-motion:reduce) {
  .lottery-stock img, .lottery-field, .lottery-return, .lottery-cover { transition:none!important; }
  .lottery-glint::before, .lottery-overlay .lottery-field::after, .lottery-overlay .lottery-field.is-match::before,
  .lottery-overlay .lottery-field.is-match::after,
  .lottery-field.is-popping .lottery-under, .lottery-result-title, .lottery-return { animation:none!important; }
  .lottery-overlay.is-fresh .lottery-hint { animation:none; translate:-20% -10%; }
}
@media (forced-colors:active) {
  .lottery-overlay { border:2px solid CanvasText; }
  .lottery-overlay .lottery-field:focus-visible, .lottery-overlay .lottery-return:focus-visible { outline-color:Highlight; }
  .lottery-glint, .lottery-flakes, .lottery-hint { display:none; }
}