/* Isolated onboarding presentation. Per-lottery ball tokens come from the existing game palette. */
.onboarding-game{flex-direction:column;gap:6px;line-height:1.25;overflow-wrap:anywhere;text-align:center}
.onboarding-game-icon{font-size:25px;line-height:1.1;flex:none}
.onboarding-back{display:flex;align-items:center;gap:6px;min-height:44px;margin:0 44px 10px 0;padding:8px 10px;border:1px solid rgba(255,255,255,.55);border-radius:12px;background:rgba(0,0,0,.16);color:#fff;font:700 13px/1.3 'Manrope',sans-serif;cursor:pointer;text-align:left}
.onboarding-back:focus-visible{outline:3px solid #fff1b8;outline-offset:3px}
.onboarding-ball-legend{margin:0 0 3px;font-size:11px;line-height:1.3;color:#fff}
.onboarding-unknown-ball{background:radial-gradient(circle at 32% 25%,var(--gm-hi),var(--gm) 55%,var(--gm-lo));color:var(--gm-txt);border-color:var(--gm-hi)}
.onboarding-unknown-ball.bonus{background:radial-gradient(circle at 32% 25%,var(--gb-hi),var(--gb) 55%,var(--gb-lo));color:var(--gb-txt);border:3px double var(--gb-hi);margin-left:3px}
.rb-extra-placeholder{border:3px double var(--gb-hi)!important;background:var(--gb)!important;color:var(--gb-txt)!important}
.onboarding-discovery-header{background:linear-gradient(145deg,var(--bg2),var(--bg3));color:var(--fg);border-bottom-color:var(--border)}
.onboarding-discovery-heading p{color:var(--sub2)}
.onboarding-discovery-header .onboarding-close{background:var(--bg3);color:var(--fg);border-color:var(--border);width:44px;height:44px}
.onboarding-tool-cta{min-height:44px;white-space:normal;text-align:left;line-height:1.35}
.onboarding-scroll-cue{position:static;background:none;margin-bottom:0;padding-top:10px;padding-bottom:0}
.tool-first-use{margin:10px 0 14px;padding:14px;border:1px solid var(--gold);border-radius:14px;background:var(--bg3);color:var(--fg);scroll-margin-block:60px}
.tool-first-use strong{font-size:14px}.tool-first-use p{font-size:13px;line-height:1.5;margin:5px 0;color:var(--sub2)}
.tool-first-use .tool-first-use-row{color:var(--fg);font-weight:800}.tool-first-use .tool-first-use-gate{font-size:12px}
.tool-first-use>div{margin-top:10px}
.tool-first-use .tool-first-use-next{min-width:132px;border-color:rgba(255,240,191,.64);background:linear-gradient(150deg,#FFE49A,#E9B44C 58%,#B8860B);color:#28180A;font-weight:900}
.tool-first-use>div{display:flex;flex-wrap:wrap;gap:8px}
.tool-first-use button{min-height:44px;padding:9px 14px;border:1px solid var(--gold);border-radius:11px;background:var(--bg2);color:var(--fg);font:700 13px 'Manrope',sans-serif;cursor:pointer}
.tool-first-use button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(max-width:400px){.onboarding-game-icon{font-size:23px}.onboarding-games{grid-template-columns:repeat(3,minmax(0,1fr))}.onboarding-game{padding:9px 5px;min-height:74px}}


/* The chosen lottery heads «Начните здесь» with the same icon as its picker button. */
.onboarding-selected-game{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:fit-content;max-width:100%;box-sizing:border-box;margin:0 auto 6px;padding:7px 18px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(7,18,20,.3);color:#fff;font:900 clamp(17px,4.8vw,22px)/1.2 'Manrope',sans-serif;overflow-wrap:anywhere}
.onboarding-selected-icon{font-size:clamp(24px,7vw,30px);line-height:1;flex:none}
.onboarding-welcome .onboarding-sheet:focus,.onboarding-sheet:focus{outline:none}
.onboarding-discovery-heading .onboarding-discovery-row{margin:0 0 3px;color:var(--fg);font-size:13px;font-weight:700;line-height:1.4}
.onboarding-discovery-row b{display:block;color:var(--gold-ink);font-weight:900}
@media(min-width:521px){.onboarding-discovery-row b{display:inline}}

/* ONE contour on every ✕: keyboard focus thickens its own border instead of drawing a second, offset frame. */
.onboarding-close:focus-visible{outline:none!important;border-color:#fff1b8!important;box-shadow:0 0 0 2px #fff1b8!important}
.onboarding-discovery-header .onboarding-close:focus-visible,.modal-static-close:focus-visible,.ct-x:focus-visible,.ct-back:focus-visible,.calan-x:focus-visible,.about-x:focus-visible,.life-close:focus-visible,.lnc-close:focus-visible{outline:none!important;border-color:var(--gold)!important;box-shadow:0 0 0 2px var(--gold)!important}

/* The guided next step: the existing gold light; with keyboard focus its ring turns solid (one frame, no outline). */
/* «Ряды готовы» lights every tool button the same way; keyboard focus uses the same solid ring. */
.guide-next:focus-visible,.onboarding-tool-cta.pro-next-glow:focus-visible{outline:none!important}
.guide-next:focus-visible::before,.onboarding-tool-cta.pro-next-glow:focus-visible::before{inset:-3px;padding:4px;animation:none;background:linear-gradient(135deg,#FFC62E,#D68A00 50%,#FFC62E)}

/* Models: the launch button stays in reach below the model list. */
#court-body .ct-actions-dock{position:sticky;bottom:0;z-index:4;margin:12px calc(-1*var(--ct-gutter,16px)) 0;padding:12px var(--ct-gutter,16px);border-top:1px solid var(--border);background:var(--modal-bg,var(--bg2));box-shadow:0 -10px 18px -12px rgba(0,0,0,.35)}
.guide-note,#wheel-next-hint{margin:0;color:var(--fg);font-size:12.5px;font-weight:800;line-height:1.4;text-align:center}
/* Wheel constructor after «Автопул»: «Сгенерировать wheel» pulses three times with the favourites' landing
   ring, then carries .pro-next-glow (index.html wheelNextStart); the hint below it reads like a guide note. */
#wheel-next-hint{margin-top:10px}
/* Phones: the floating ↑/↓ page anchor (.scroll-anchors, fixed 14px from the right edge, 42–44px wide) passes
   over the constructor; the hint keeps its text clear of that lane on both sides so it stays centred. */
@media(max-width:699px){#wheel-next-hint{padding:0 34px}}
#wheel-build-btn.wheel-next-pulse{animation:fw-landed .9s ease-out 3}
#wheel-build-btn.pro-next-glow::before{border-radius:13.5px}#wheel-build-btn.pro-next-glow::after{border-radius:20px}

/* «Как это работает?» — replays the walkthrough (Home + About). */
.mine-tall{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px}
.mine-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.guide-replay.guide-intro:before{content:"★"}
/* Home «Приветствие»: the cosmic splash again, in its manual mode (cosmos-ui.js, the About entry's handler). */
.guide-replay.guide-cosmos:before{content:"✦"}
/* Home «Джекпот»: the entry to the DEMO ceremony (jackpot-ceremony.js). An outline trophy in the same
   gold disc as its neighbours' signs, drawn in their ink — and nothing else: no glow, no pulse, so it
   never reads as a win that already happened. */
.guide-replay.guide-jackpot:before{content:"";background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328180A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h10v5.5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 5.5H4.2a2.8 2.8 0 0 0 3.3 4.3M17 5.5h2.8a2.8 2.8 0 0 1-3.3 4.3M12 14v3.5M8 20.5h8M9.5 17.5h5'/%3E%3C/svg%3E") center/14px 14px no-repeat}
/* Home «Предложить улучшение»: the improvement form (suggestions.js, lazy). A light bulb in the same gold disc
   and ink as its neighbours' signs. */
.guide-replay.guide-suggest:before{content:"";background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2328180A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21.5h4M8 13.5a6 6 0 1 1 8 0c-1.3 1-1.5 2-1.5 3h-5c0-1-.2-2-1.5-3Z'/%3E%3C/svg%3E") center/14px 14px no-repeat}
.favorite-combos-card{scroll-margin-top:96px}
.favorite-combos-card.fw-landed{animation:fw-landed 1.6s ease-out}
@keyframes fw-landed{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--gold) 70%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@media(prefers-reduced-motion:reduce){.favorite-combos-card.fw-landed,#wheel-build-btn.wheel-next-pulse{animation:none}}
.guide-replay,#about-ov .about-guide,#about-ov .about-math{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 14px;border:1px solid color-mix(in srgb,var(--gold) 65%,var(--border));border-radius:999px;background:var(--bg2);color:var(--fg);font:800 13px/1.2 'Manrope',sans-serif;cursor:pointer;white-space:normal;text-align:center}
.guide-replay:before,#about-ov .about-guide:before,#about-ov .about-math:before{content:"?";display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#28180A;font:900 13px/1 'Manrope',sans-serif}
#about-ov .about-guide,#about-ov .about-math{width:100%;margin:6px 0 8px;min-height:48px;border-radius:14px}
.guide-replay:focus-visible,#about-ov .about-guide:focus-visible,#about-ov .about-math:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:360px){.guide-replay{padding:8px 10px;font-size:12px}}

/* Court actions without a lottery colour fell back to the platform button (iOS: system-blue text,
   dark theme: a light-grey slab). Give them the app's own surface so the guided light reads on it. */
#court-ov .btn-draw:not(.lotto):not(.viking):not(.euro){background:var(--bg3);color:var(--fg);border:1px solid var(--border);-webkit-appearance:none;appearance:none}
#court-ov .btn-draw:not(.lotto):not(.viking):not(.euro):disabled{opacity:.55;cursor:default}

/* While a walkthrough dialog is open the busy layer (z 700) sits UNDER it (z 850) and is never seen,
   yet its full-screen backdrop blur stacked on the dialog's own cost WebKit one ~1 s frame on large
   viewports during «Создать первые 5 рядов». The dialog's disabled, aria-busy CTA is the indicator. */
body.loto-onboarding-open .busy-ov{-webkit-backdrop-filter:none;backdrop-filter:none}
/* «Ряды готовы» — the action centre over the generated rows (action-center.js). One selector
   for any row count: a row of chips up to ten rows, a bounded checklist beyond that. */
.onboarding-discovery-heading .ac-question{margin:3px 0 0;color:var(--fg);font-size:14px;font-weight:800;line-height:1.35}
.onboarding-discovery-heading .ac-count{margin:2px 0 0;color:var(--gold-ink);font-size:13px;font-weight:800}
.ac-select{margin:0 0 14px;padding:12px;border:1px solid var(--border);border-radius:17px;background:var(--bg3)}
.ac-explain{margin:0 0 10px;color:var(--sub2);font-size:12.5px;line-height:1.45}
.ac-chips{display:flex;flex-wrap:wrap;gap:8px}
.ac-chip{min-width:52px;min-height:44px;padding:8px 14px;border:1.5px solid var(--border);border-radius:999px;background:var(--bg2);color:var(--fg);font:800 13.5px 'Manrope',sans-serif;cursor:pointer;touch-action:manipulation}
.ac-chip[aria-pressed="true"],.ac-chip-more.on{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 20%,var(--bg2));box-shadow:0 0 0 1px var(--gold)}
.ac-chip-more[aria-expanded="true"]{border-color:var(--gold)}
.ac-chip:focus-visible,.ac-link:focus-visible,.ac-save:focus-visible,.ac-x:focus-visible,.rows-ready:focus-visible,.ct-cta:focus-visible{outline:3px solid var(--gold-ink);outline-offset:3px}
.ac-status{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin-top:6px;min-height:8px}
.ac-single{margin:0;color:var(--gold-ink);font-size:13px;font-weight:900;overflow-wrap:anywhere}
.ac-link{min-height:44px;padding:6px 4px;border:0;background:none;color:var(--gold-ink);font:800 13px 'Manrope',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ac-list{margin-top:10px;border:1px solid var(--border);border-radius:14px;background:var(--bg2)}
.ac-list[hidden]{display:none}
.ac-list-tools{display:flex;flex-wrap:wrap;gap:4px 18px;padding:2px 12px;border-bottom:1px solid var(--border)}
.ac-list-rows{max-height:min(42vh,330px);overflow-y:auto;overscroll-behavior:contain;padding:4px}
.ac-list-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:5px 8px;border-radius:10px;cursor:pointer}
.ac-list-row:hover{background:var(--bg3)}
.ac-list-row input{flex:none;width:22px;height:22px;margin:0;accent-color:var(--gold)}
.ac-list-n{flex:none;min-width:42px;color:var(--fg);font-size:13px;font-weight:800}
.ac-list-balls{min-width:0;flex-wrap:nowrap;overflow:hidden}
.ac-list-balls .if-rball,.ac-myrow .if-rball{width:28px;height:28px;font-size:11.5px}
.ac-gap{display:inline-block;flex:none;width:6px}
.onboarding-tool-cta:disabled{opacity:.5;cursor:not-allowed}
.onboarding-tool-cta:disabled::before,.onboarding-tool-cta:disabled::after{display:none}
.ac-after{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.ac-save{min-height:48px;padding:10px 14px;border:1.5px solid var(--border);border-radius:14px;background:var(--bg3);color:var(--fg);font:800 14px 'Manrope',sans-serif;cursor:pointer}
.ac-save:disabled{opacity:.5;cursor:not-allowed}
.ac-note{margin:4px 0;color:var(--sub2);font-size:12px;line-height:1.45}
/* Rows against real draws: Calendar sample and Analytics history share this block. */
.ac-myrows{display:flex;flex-direction:column;gap:8px;margin:8px 0;padding:0;list-style:none}
.ac-myrow{padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--bg2)}
.ac-next-row{display:flex;justify-content:flex-end;margin:10px 0}.ac-next-row .ac-next{width:auto;min-height:44px;margin:0;padding:8px 20px}
.ac-report-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:22px 0 10px}
.ac-report-head .calan-h3{flex:1 1 12em;min-width:0;margin:0;overflow-wrap:anywhere}.ac-report-head .ac-next-row{margin:0 0 0 auto}
.ac-myrow-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:6px}
.ac-myrow-head b{color:var(--fg);font-size:13px}
.ac-myrow-head .if-rowballs{flex-wrap:wrap}
.ac-myrow-stats{display:flex;flex-direction:column;gap:3px;color:var(--sub2);font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}
.ac-dim{opacity:.8}
.ac-history-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ac-history-head .card-t{margin:0}
.ac-x{flex:none;width:44px;height:44px;border:1px solid var(--border);border-radius:12px;background:var(--bg3);color:var(--fg);font-size:22px;line-height:1;cursor:pointer}
.fav-just-saved{border-radius:14px;box-shadow:0 0 0 2px var(--gold),0 0 0 6px color-mix(in srgb,var(--gold) 28%,transparent);transition:box-shadow .3s}
/* «Ряды готовы» under the ticket: the entry to the same centre after any generation. */
.rows-ready{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin:10px 0 6px;padding:10px 14px;border:1.5px solid color-mix(in srgb,var(--gold) 70%,var(--border));border-radius:16px;background:linear-gradient(150deg,var(--bg2),var(--bg3));color:var(--fg);font:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
.rows-ready[hidden]{display:none}
.rows-ready-n{flex:none;display:grid;place-items:center;min-width:38px;height:38px;padding:0 6px;border-radius:12px;background:var(--gold);color:#201506;font:900 15px 'Unbounded',sans-serif}
.rows-ready-t{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.rows-ready-t b{font:800 14px 'Manrope',sans-serif}
.rows-ready-t span{color:var(--sub2);font-size:12.5px;line-height:1.35}
.rows-ready-go{flex:none;color:var(--gold-ink);font-size:20px;font-weight:900}
/* «Ваши ряды готовы!» — a finished set in the same place: its two next steps, side by side where
   they fit (each at least 44 px tall), stacked under the title on a phone. */
.rows-done{flex-wrap:wrap;cursor:default}
.rows-done-btns{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:8px}
.rows-done-btn{position:relative;isolation:isolate;flex:1 1 200px;min-height:44px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--gold) 65%,transparent);border-radius:14px;background:linear-gradient(150deg,var(--bg2),var(--bg3));color:var(--fg);font:800 13px/1.25 'Manrope',sans-serif;text-align:center;cursor:pointer;touch-action:manipulation}
.rows-done-btn:focus-visible{outline:3px solid var(--gold-ink);outline-offset:3px}
.rows-done-btn.pro-next-glow::before{border-radius:14px}.rows-done-btn.pro-next-glow::after{border-radius:20px}
/* The feedback dialog's ✕, shown only for a dialog that may simply be closed. */
.fb-box{position:relative}
.fb-x{position:absolute;top:8px;right:8px;width:44px;height:44px;border:0;border-radius:12px;background:var(--bg3);color:var(--fg);font-size:16px;font-weight:900;cursor:pointer}
.fb-x[hidden]{display:none}
.fb-x:focus-visible{outline:3px solid var(--gold-ink);outline-offset:2px}
/* The simulation result's ✕ (top right): folds it back to the idle card; nothing stored changes. */
#pg-sim #win-banner{position:relative}
.wb-x{position:absolute;top:10px;right:10px;z-index:2;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:1.5px solid var(--border);border-radius:12px;background:var(--bg3);color:var(--fg);font-size:17px;font-weight:900;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.wb-x[hidden]{display:none}
.wb-x:focus-visible{outline:3px solid var(--gold-ink);outline-offset:2px}
#win-banner:not(.none) .wb-top{padding-right:46px}
@media (min-width:1080px){#pg-sim #win-banner:not(.none) .wb-top{padding-left:46px}}
/* A replacement the Calendar / History review proposes is a button (a tap takes it): a thin gold
   outline with a soft glow says so, a little finer than the guide's gold light. */
.rec-review .pdx-swap:not(.on){border:1px solid color-mix(in srgb,var(--gold) 75%,transparent);color:var(--fg);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 12%,transparent),0 0 9px color-mix(in srgb,var(--gold) 24%,transparent)}
@media (hover:hover){.rec-review .pdx-swap:not(.on):hover{box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 22%,transparent),0 0 12px color-mix(in srgb,var(--gold) 34%,transparent)}}
.rec-review .pdx-swap:focus-visible{outline:3px solid var(--gold-ink);outline-offset:2px}/* The court's bulk actions are real calls to action, in both themes and every state. */
.ct-cta{min-height:48px;padding:11px 16px;border:2px solid var(--gold);border-radius:14px;background:color-mix(in srgb,var(--gold) 16%,var(--bg2));color:var(--fg);font:800 14px/1.3 'Manrope',sans-serif;cursor:pointer;box-shadow:0 3px 12px color-mix(in srgb,var(--gold) 22%,transparent);transition:background-color .15s,box-shadow .15s,transform .1s;touch-action:manipulation}
.ct-cta:hover{background:color-mix(in srgb,var(--gold) 27%,var(--bg2));box-shadow:0 4px 16px color-mix(in srgb,var(--gold) 32%,transparent)}
.ct-cta:active{transform:translateY(1px);background:color-mix(in srgb,var(--gold) 36%,var(--bg2));box-shadow:none}
.ct-cta:disabled{border-style:dashed;background:var(--bg3);color:var(--sub2);box-shadow:none;cursor:not-allowed;transform:none}
.ct-selection-run .ct-actions{margin:10px 0 0}
.ct-selection-run .ct-summary{margin-top:8px}
@media (prefers-reduced-motion:reduce){.ct-cta{transition:none}.ct-cta:active{transform:none}}
.ac-myrow .if-rowballs{justify-content:flex-start;margin:0}
.ac-history{scroll-margin-top:84px}
@media (max-width:420px){.ac-list-row{gap:8px;padding:5px 4px}.ac-list-n{min-width:36px;font-size:12px}.ac-list-balls .if-rball{width:23px;height:23px;font-size:10px}}

/* Models: FREE / PRO is stated on every card before any action; the run area repeats it for the
   current selection (never shown to PRO/Owner). Text stays --fg so it reads in both themes. */
#court-body .ct-model-tier{display:flex;align-items:baseline;gap:6px;font-size:12px;font-weight:800;line-height:1.4;color:var(--fg)}
#court-body .ct-model-tier:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#2FBF6B;transform:translateY(-1px)}
#court-body .ct-model-tier-pro:before{background:#7B7BFF}
#court-body .ct-model-gate{margin:0;font-size:12.5px;font-weight:800;line-height:1.4;text-align:center;color:var(--fg)}

/* Models walkthrough: «can be chosen» ≠ «chosen». Every selectable card carries the running gold
   light and a dashed gold empty box; a chosen card has NO light, its solid gold frame and the
   filled ✓ box. The blurred halo is dropped here: one light per card, not two layers × 19. */
#court-body .ct-model-card.guide-selectable{box-shadow:0 0 10px rgba(240,166,20,.18)}
#court-body .ct-model-card.guide-selectable::before{border-radius:15.5px}
#court-body .ct-model-card.guide-selectable::after{display:none}
#court-body .ct-model-card.guide-selectable .ct-model-box{border-style:dashed;border-color:var(--gold)}
/* «Как это работает?» over rows already on screen: the tabs' overwrite question answers above the walkthrough. */
body.loto-onboarding-open .ws-ov{z-index:860}

/* «Исследуйте мир лотерей бесплатно!»: the welcome before the tool choice (first run, replay, and
   again from the catalog). The frame carries the chosen lottery's palette ([data-ball-game]) and a
   thin highlight travelling clockwise around it; everything animates once and never under reduced motion. */
@property --fw-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.fw-frame{--fw-a:0deg;position:relative;width:min(100%,680px);max-height:100%;display:flex;padding:1.5px;border-radius:27px;box-sizing:border-box;background:conic-gradient(from var(--fw-a),color-mix(in srgb,var(--gold2,#E9B44C) 34%,transparent) 0 68%,#FFE49A 80%,var(--gold,#E9B44C) 86%,color-mix(in srgb,var(--gold2,#E9B44C) 34%,transparent) 100%);box-shadow:0 24px 80px rgba(0,0,0,.45),0 0 48px var(--game-glow,rgba(233,180,76,.28))}
.onboarding-free-welcome{width:100%;max-width:none;padding:0 0 20px;border:0;border-radius:26px;text-align:center;background:var(--bg2);overflow-x:hidden}
.onboarding-free-welcome .onboarding-close{top:14px;right:14px;background:rgba(7,18,20,.3);color:#fff;border-color:rgba(255,255,255,.4)}
.fw-hero{position:relative;padding:30px 22px 22px;background:linear-gradient(150deg,var(--hdr-a,#0E7A50),var(--hdr-b,#0E4B4E) 48%,var(--hdr-c,#123A44));color:#fff}
.fw-hero::after{content:"";position:absolute;inset:auto 0 0;height:40px;background:linear-gradient(transparent,rgba(0,0,0,.14));pointer-events:none}
.fw-hero h2{margin:14px 0 8px;font:900 clamp(21px,4.6vw,27px)/1.2 'Unbounded','Manrope',sans-serif;letter-spacing:.2px;text-wrap:balance}
.fw-lede{margin:0 auto;max-width:480px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.86)}
.fw-icons{display:flex;justify-content:center;gap:10px}
.fw-icon{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(255,240,191,.5);border-radius:15px;background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(255,255,255,.08));color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.3)}
.fw-icon svg{width:26px;height:26px}
.fw-h3{margin:0 0 10px;font:900 15px/1.3 'Manrope',sans-serif;letter-spacing:.02em;color:var(--fg)}
.fw-free{padding:18px 18px 4px}
.fw-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;text-align:left}
.fw-hint{margin:-4px 0 10px;font-size:12px;line-height:1.4;color:var(--sub2)}
.fw-card{display:grid;grid-template-columns:36px minmax(0,1fr) 14px;gap:0 10px;align-items:center;min-width:0;width:100%;padding:10px 11px;border:1px solid var(--border);border-radius:15px;background:var(--bg3);color:var(--fg);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--card-shadow);-webkit-tap-highlight-color:transparent;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.fw-card-go{font-size:20px;line-height:1;color:var(--gold-ink);opacity:.55;transition:opacity .18s ease,transform .18s ease}
.fw-card b{display:block;margin:1px 0 3px;font-size:13px;line-height:1.3;color:var(--fg)}
.fw-card-text>span{display:block;font-size:11.5px;line-height:1.4;color:var(--sub2)}
.fw-pro-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-top:10px}
.fw-save{margin:12px 18px 0;padding:9px 12px;border:1px dashed color-mix(in srgb,var(--gold-ink) 50%,transparent);border-radius:12px;background:var(--bg3);font-size:12px;line-height:1.45;color:var(--fg)}
.fw-save[hidden]{display:none}
/* Interaction states: the chosen lottery's colour on hover, a soft lift, a clear keyboard ring,
   a plain press on touch — and nothing moves under reduced motion. */
.fw-card:focus-visible,.fw-actions button:focus-visible,.fw-link:focus-visible,.attempts-row .acc-btn:focus-visible,#attempts-ov .acc-btn:focus-visible{outline:3px solid #fff1b8;outline-offset:3px}
.fw-card:focus-visible{outline-color:var(--gold)}
.onboarding-free-welcome .onboarding-close:focus-visible{outline:3px solid #fff1b8;outline-offset:3px}
.fw-card:active{transform:scale(.99)}
@media(hover:hover){
  .fw-card:hover{border-color:color-mix(in srgb,var(--gm,var(--gold)) 70%,var(--border));background:color-mix(in srgb,var(--gm,var(--gold)) 7%,var(--bg3));box-shadow:0 10px 26px rgba(0,0,0,.18),0 0 22px var(--game-glow,rgba(233,180,76,.25));transform:translateY(-2px)}
  .fw-card:hover .fw-card-go{opacity:1;transform:translateX(2px)}
  .fw-card:hover .fw-card-icon{border-color:color-mix(in srgb,var(--gm,var(--gold)) 85%,var(--border))}
  .fw-actions .onboarding-tool-cta:hover,.fw-link:hover{border-color:color-mix(in srgb,var(--gm,var(--gold)) 70%,var(--border));box-shadow:0 0 18px var(--game-glow,rgba(233,180,76,.25))}
  .fw-link:hover{box-shadow:none;color:var(--fg)}
  .attempts-row:hover{border-color:color-mix(in srgb,var(--gm,var(--gold)) 60%,var(--border));box-shadow:0 8px 22px rgba(0,0,0,.14),0 0 18px var(--game-glow,rgba(233,180,76,.2));transform:translateY(-1px)}
  .attempts-row .acc-btn:hover:not(:disabled),#attempts-signin:hover,#attempts-retry:hover{border-color:color-mix(in srgb,var(--gm,var(--gold)) 75%,var(--gold-ink));box-shadow:0 0 14px var(--game-glow,rgba(233,180,76,.25))}
}
.attempts-row{cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.attempts-row:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.attempts-row .acc-btn,#attempts-signin,#attempts-retry{transition:transform .12s ease,border-color .18s ease,box-shadow .18s ease,filter .12s ease}
.attempts-row .acc-btn:active:not(:disabled),#attempts-signin:active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){.fw-card,.fw-card-go,.attempts-row,.attempts-row .acc-btn,#attempts-signin,#attempts-retry{transition:none}.fw-card:hover,.attempts-row:hover,.fw-card:active{transform:none}}
.fw-card-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid color-mix(in srgb,var(--gm,var(--gold)) 55%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--gm,var(--gold)) 14%,var(--bg2));color:var(--gold-ink);transition:border-color .18s ease}
.fw-card-icon svg{width:21px;height:21px}
.fw-card-text{min-width:0}
.fw-pro{margin:14px 18px 0;padding:16px 14px 14px;border:1px solid color-mix(in srgb,var(--gold-ink) 45%,transparent);border-radius:20px;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--gold) 18%,transparent),transparent 65%),var(--bg3)}
.fw-pro .fw-h3{color:var(--gold-ink)}
.fw-pro-lede{margin:0 auto 12px;max-width:520px;font-size:12.5px;line-height:1.5;color:var(--fg)}
.fw-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin:0 0 12px}
.fw-stat{padding:10px 6px 8px;border:1px solid var(--border);border-radius:14px;background:var(--bg2);min-width:0}
.fw-stat b{display:block;font:900 clamp(24px,5.6vw,32px)/1.2 'Manrope',sans-serif;font-variant-numeric:tabular-nums;color:var(--gold-ink)}
.fw-stat span{display:block;margin-top:2px;font-size:11px;line-height:1.35;color:var(--sub2);overflow-wrap:anywhere}
.fw-stat[data-free-stat="remaining"] b{color:var(--fg)}
.fw-rule{margin:0 auto 6px;max-width:520px;font-size:12px;line-height:1.5;color:var(--sub2)}
.fw-keep{margin:0 auto;max-width:520px;font-size:12.5px;font-weight:800;line-height:1.5;color:var(--fg)}
.fw-account{margin:10px auto 0;max-width:520px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--gold-ink) 45%,transparent);border-radius:12px;background:var(--bg2);font-size:12.5px;font-weight:700;line-height:1.45;color:var(--fg)}
.fw-account[hidden]{display:none}
.fw-actions{display:flex;flex-direction:column;align-items:center;gap:10px;margin:18px 18px 0}
.fw-actions .onboarding-cta{width:min(100%,380px)}
.fw-actions .onboarding-tool-cta{width:min(100%,380px);justify-content:center;text-align:center}
.fw-link{border:0;padding:6px 2px;background:none;color:var(--gold-ink);font:800 13px/1.3 'Manrope',sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fw-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.fw-actions [hidden]{display:none}
/* A sticky offset is measured from the sheet's content edge, i.e. above its 20px bottom padding:
   bottom:0 left a 20px strip under the cue where the scrolling text showed cut off. */
.fw-cue{position:sticky;bottom:-20px;margin:0 0 -20px;padding:26px 18px 10px;background:linear-gradient(transparent,var(--bg2) 55%);pointer-events:none}
.fw-cue[hidden]{display:none}
@media(prefers-reduced-motion:no-preference){
  /* backwards, not both: a filled transform kept the frame a composited layer for as long as it was open.
     The light holds still while the sheet scrolls: its per-frame repaint of the frame (and its blurred
     shadow) competed with painting the content scrolled in, which a phone left blank. */
  .fw-frame{animation:fw-in .42s cubic-bezier(.2,.8,.2,1) backwards,fw-spin 11s linear infinite}
  .fw-frame.fw-scrolling{animation-play-state:running,paused}
  .fw-icon{animation:fw-pop .5s cubic-bezier(.2,.8,.2,1) both}
  .fw-icon:nth-child(2){animation-delay:.06s}.fw-icon:nth-child(3){animation-delay:.12s}.fw-icon:nth-child(4){animation-delay:.18s}.fw-icon:nth-child(5){animation-delay:.24s}
  .fw-card,.fw-pro,.fw-actions{animation:fw-up .45s ease-out both}
  .fw-card:nth-child(2){animation-delay:.05s}.fw-card:nth-child(3){animation-delay:.1s}.fw-card:nth-child(4){animation-delay:.15s}.fw-card:nth-child(5){animation-delay:.2s}.fw-card:nth-child(6){animation-delay:.25s}.fw-card:nth-child(7){animation-delay:.3s}.fw-card:nth-child(8){animation-delay:.35s}
  .fw-pro{animation-delay:.3s}.fw-actions{animation-delay:.4s}
  .fw-stat{animation:fw-up .45s ease-out both}
  .fw-stat:nth-child(2){animation-delay:.08s}.fw-stat:nth-child(3){animation-delay:.16s}.fw-stat:nth-child(4){animation-delay:.24s}.fw-stat:nth-child(5){animation-delay:.32s}
}
@keyframes fw-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fw-spin{to{--fw-a:360deg}}
@keyframes fw-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes fw-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:560px){.fw-grid{grid-template-columns:minmax(0,1fr)}.fw-card{padding:9px 10px}.fw-save{margin:12px 12px 0}}
@media(max-width:420px){.fw-hero{padding:26px 14px 18px}.fw-free{padding:14px 12px 2px}.fw-pro{margin:12px 12px 0;padding:14px 10px 12px}.fw-actions{margin:16px 12px 0}.fw-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.fw-icon{width:40px;height:40px}.fw-icon svg{width:22px;height:22px}}
/* «Бесплатные попытки инструментов»: the catalog sheet, its cards, the home reminder and the toast. */
#attempts-ov{padding:max(10px,var(--loto-safe-top,env(safe-area-inset-top,0px))) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));align-items:center}
.attempts-sheet{background:var(--modal-bg);color:var(--fg);border:1px solid var(--border);border-radius:24px;padding:18px;width:100%;max-width:680px;max-height:100%;max-height:calc(96dvh - var(--loto-safe-top,0px));overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.attempts-header{display:flex;align-items:center;gap:12px;justify-content:space-between;position:sticky;top:-18px;background:var(--modal-bg);padding:10px 0;z-index:1}
.attempts-header h2{margin:0;font-size:20px;line-height:1.35;overflow-wrap:anywhere}
.attempts-close.acc-btn{flex:none;width:44px;min-height:44px;padding:8px}
.attempts-list{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.attempts-group{grid-column:1/-1;margin:8px 0 0;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-ink)}
.attempts-group:first-child{margin-top:0}
.attempts-row{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;gap:4px 10px;align-items:start;align-content:start;min-width:0;border:1px solid var(--border);border-radius:14px;padding:11px 12px;background:var(--bg2)}
.attempts-info{min-width:0}.attempts-name{margin:0;font-size:13.5px;line-height:1.35;overflow-wrap:anywhere;color:var(--fg)}
.attempts-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.attempts-count{color:var(--fg);font-weight:800;font-variant-numeric:tabular-nums;font-size:13px}
.attempts-chip{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid var(--border);background:var(--bg3);color:var(--sub2);font-size:11px;font-weight:800;line-height:1.4}
.attempts-chip[data-state="exhausted"]{border-color:color-mix(in srgb,var(--gold-ink) 55%,transparent);color:var(--gold-ink)}
.attempts-chip[hidden]{display:none}
.attempts-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.attempts-actions:empty,.attempts-actions:not(:has(:not([hidden]))){display:none}
.attempts-others{border:0;min-height:40px;padding:6px 4px;background:none;color:var(--gold-ink);font:800 12px/1.3 inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.attempts-others:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}
.attempts-summary{padding:18px;border:1px solid var(--gold-ink);border-radius:18px;background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--gold) 16%,transparent),transparent 75%),var(--bg2);box-shadow:0 8px 28px color-mix(in srgb,var(--gold) 8%,transparent)}
.attempts-summary[hidden],#home-attempts[hidden]{display:none}
.attempts-totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:center}
.attempts-totals b{display:block;font:900 clamp(24px,5vw,36px)/1.3 'Manrope',sans-serif;font-variant-numeric:tabular-nums;color:var(--gold-ink)}
.attempts-totals span{font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.attempts-progress{display:block;appearance:none;-webkit-appearance:none;border:0;border-radius:10px;overflow:hidden;background:var(--bg3);color:var(--gold);height:8px;width:100%;margin:16px 0 0}
.attempts-progress::-webkit-progress-bar{background:var(--bg3)}
.attempts-progress::-webkit-progress-value{background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .45s ease}
.attempts-progress::-moz-progress-bar{background:var(--gold)}
.attempts-icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border:1px solid color-mix(in srgb,var(--gold-ink) 45%,transparent);border-radius:11px;background:color-mix(in srgb,var(--gold) 8%,var(--bg2));color:var(--gold-ink);font:800 17px/1 serif}
.attempts-icon svg{width:22px;height:22px}#prev-ov .pro-crown-icon svg{width:30px;height:30px}
.attempts-icon span{max-width:100%;font-size:clamp(10px,2.6vw,16px);overflow-wrap:anywhere}
.attempts-row[data-exhausted="true"]{border-style:dashed}.attempts-row[data-exhausted="true"] .attempts-icon{opacity:.65}
#home-attempts{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(calc(100% - 28px),1120px);margin:22px auto 10px;padding:16px;border:1px solid var(--border);border-radius:18px;background:var(--bg2);box-sizing:border-box}
#home-attempts p{margin:6px 0 0;font-variant-numeric:tabular-nums;color:var(--gold-ink);font-weight:800}
@media(max-width:540px){#home-attempts{flex-wrap:wrap}.attempts-list{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.attempts-progress::-webkit-progress-value{transition:none}}
.attempts-note{margin:8px 0 0;font-size:13px;line-height:1.55;color:var(--fg);overflow-wrap:anywhere}
.attempts-row .attempts-note{margin-top:4px;font-size:12px;line-height:1.45;color:var(--sub2)}
.attempts-row .acc-btn{flex:none;white-space:normal;overflow-wrap:anywhere;min-height:40px;padding:8px 14px;font-size:13px}
.attempts-row .acc-btn:disabled{opacity:1;color:var(--fg);border-style:dashed;cursor:default}
/* Keep foreground and background in sync during a theme switch. */
#attempts-ov .acc-btn,#prev-ov .btn-exp,#prev-ov .btn-draw,#fb-ov .fb-btn-secondary{transition:transform .1s ease,filter .1s ease,box-shadow .1s ease}
.attempts-row .acc-btn:hover:not(:disabled){border-color:var(--gold-ink)}
.attempts-toast{position:fixed;bottom:calc(92px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:750;max-width:calc(100vw - 28px);width:max-content;box-sizing:border-box;padding:12px 16px;border-radius:14px;border:1px solid var(--gold-ink);background:var(--modal-bg);color:var(--fg);font-size:14px;font-weight:800;line-height:1.5;pointer-events:none}
.attempts-toast[hidden]{display:none}
@media(max-width:380px){.attempts-row .acc-btn{width:100%}.attempts-header h2{font-size:18px}}
/* Generator sheet: every method is a raised card with its own buttons — «Создать новые ряды» (what choosing
   the method does) and «Совет». Only a method reached from a prize match lights its button. */
#sg-ov .sg-algo{flex-wrap:wrap}
#sg-ov .sg-algo:not(.sel):not(.wm-from):not(.pro-next-glow){background:var(--bg2);box-shadow:0 2px 10px rgba(0,0,0,.08)}
#sg-ov .sg-algo>div:nth-child(2){flex:1 1 calc(100% - 52px);min-width:0}
#sg-ov .sg-pick,#sg-ov .sg-adv{flex:1 1 0;min-width:0;min-height:44px;margin:0;padding:8px 12px;border-radius:12px;font:800 13.5px/1.25 'Manrope',sans-serif;overflow-wrap:anywhere;cursor:pointer}
#sg-ov .sg-pick{flex-grow:1.6;border:1.5px solid var(--gold);background:rgba(233,180,76,.16);color:var(--fg);box-shadow:0 2px 8px rgba(0,0,0,.1)}
#sg-ov .sg-adv{border:1.5px solid var(--sub);background:var(--bg3);color:var(--fg)}
#sg-ov .sg-algo.sel .sg-pick{background:var(--gold);border-color:var(--gold);color:#2A1608}
#sg-ov .sg-pick:hover,#sg-ov .sg-adv:hover{filter:brightness(1.06)}
#sg-ov .sg-pick:focus-visible,#sg-ov .sg-adv:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
/* FREE-attempt dial (commercial-runtime.js attemptDialHtml / setAttemptDial): ONE seven-segment display
   for every balance — dark glass with soft amber light, the same in the light and the dark theme, so the
   digits read like an instrument. A digit's class (c0…c9, cx = dash) lights its segments; the unlit ones
   stay a faint «8» as on a real display. The text the digits stand for is in .seg-sr. */
.seg{--seg-h:22px;--seg-on:#ffbf57;--seg-glow:rgba(255,166,43,.7);--seg-off:rgba(255,196,120,.085);position:relative;display:inline-flex;align-items:center;flex:none;vertical-align:middle;box-sizing:border-box;margin:0;padding:calc(var(--seg-h)*.2) calc(var(--seg-h)*.34);border-radius:calc(var(--seg-h)*.3);background-color:#110d08;background-image:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,0) 46%),radial-gradient(120% 90% at 50% 125%,rgba(255,160,40,.17),transparent 62%);box-shadow:inset 0 1px 2px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,200,120,.13),0 0 0 1px var(--border,rgba(0,0,0,.18)),0 2px 10px rgba(0,0,0,.16);color:var(--seg-on);font:800 12px/1 'Manrope',sans-serif;direction:ltr;unicode-bidi:isolate}
.seg.seg-sm{--seg-h:19px}.seg.seg-md{--seg-h:32px}.seg.seg-lg{--seg-h:42px}
.seg>.seg-face{display:inline-flex;align-items:center;gap:calc(var(--seg-h)*.09);margin:0;transform:skewX(-6deg);filter:drop-shadow(0 0 1.4px var(--seg-glow)) drop-shadow(0 0 calc(var(--seg-h)*.22) rgba(255,150,30,.32))}
.seg .seg-d{display:block;flex:none;width:calc(var(--seg-h)*.571);height:var(--seg-h);overflow:visible}
.seg .seg-d path{fill:var(--seg-off);transition:fill .3s ease}
.seg .seg-d:is(.c0,.c2,.c3,.c5,.c6,.c7,.c8,.c9) .sa,.seg .seg-d:is(.c0,.c1,.c2,.c3,.c4,.c7,.c8,.c9) .sb,
.seg .seg-d:is(.c0,.c1,.c3,.c4,.c5,.c6,.c7,.c8,.c9) .sc,.seg .seg-d:is(.c0,.c2,.c3,.c5,.c6,.c8,.c9) .sd,
.seg .seg-d:is(.c0,.c2,.c6,.c8) .se,.seg .seg-d:is(.c0,.c4,.c5,.c6,.c8,.c9) .sf,
.seg .seg-d:is(.c2,.c3,.c4,.c5,.c6,.c8,.c9,.cx) .sg{fill:var(--seg-on)}
/* Between the balance and the allowance: a clock colon, two lit dots in the digits' amber. */
.seg .seg-sep{position:relative;display:block;flex:none;width:calc(var(--seg-h)*.14);height:var(--seg-h);margin:0 calc(var(--seg-h)*.1)}
.seg .seg-sep::before,.seg .seg-sep::after{content:'';position:absolute;left:0;width:calc(var(--seg-h)*.14);height:calc(var(--seg-h)*.14);border-radius:50%;background:var(--seg-on)}
.seg .seg-sep::before{top:21%}.seg .seg-sep::after{bottom:21%}
/* None left: the display rests, dimmed — no red, no alarm. Unknown: dashes, just as dim. */
.seg[data-seg="empty"],.seg[data-seg="wait"]{--seg-on:rgba(255,191,87,.44);--seg-glow:transparent}
.seg[data-seg="empty"]>.seg-face,.seg[data-seg="wait"]>.seg-face{filter:none}
.seg>.seg-sr{position:absolute;display:block;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.seg .seg-d path{transition:none}}
@media(forced-colors:active){.seg{forced-color-adjust:none}}
/* Where the dial stands: catalog cards, totals, home reminder, success notice, preview offer, welcome. */
.attempts-meta{gap:6px 8px}
.attempts-count.seg{font-size:12px}
.attempts-cap{min-width:0;font-size:11.5px;font-weight:700;line-height:1.35;color:var(--sub2);overflow-wrap:anywhere}
.attempts-row[data-exhausted="true"] .attempts-cap{color:var(--fg)}
.attempts-totals>div{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0}
.attempts-totals b.seg{display:inline-flex;color:var(--seg-on)}
#attempts-buy{margin:8px 0 0}
#attempts-ov [hidden],#prev-ov [hidden]{display:none!important}
.home-attempts-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
#home-attempts [data-attempt-reminder-cap]{font-size:13px;line-height:1.4;color:var(--fg)}
.attempts-toast{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.attempts-toast .seg{margin-right:4px}
#prev-ov .prev-state[data-prev-state]{display:flex;flex-direction:column;align-items:center;gap:9px;padding:0;border:0;background:none;font:800 14.5px/1.45 'Manrope',sans-serif;color:var(--fg);max-width:420px}
#prev-ov .prev-cap{overflow-wrap:anywhere}
/* Exhausted: other trial attempts, the free features, then PRO. */
#prev-ov[data-exhausted="true"] [data-prev-attempts]{order:1}#prev-ov[data-exhausted="true"] [data-prev-free]{order:2}#prev-ov[data-exhausted="true"] [data-prev-buy]{order:3}
.fw-stat b.seg{display:inline-flex;font-size:12px;color:var(--seg-on)}
@media(max-width:420px){.seg.seg-md{--seg-h:28px}.seg.seg-lg{--seg-h:36px}}
/* Home tool cards + simulator buttons + bottom bar: coloured by the selected lottery, through the game's
   own tokens on body[data-game] (--hdr-a/b/c, --game-glow) — selLot() recolours live, a restart restores.
   Tint = translucent theme surface over the game gradient (padding-box); border = that gradient
   (border-box). Text centred on the card: equal side padding, the decorative arrow/glyph hidden (it stays
   in the DOM: court-ui reads the wheel's ⠿ from it). Readability first: dark scrims under white ink. */
#pg-sim .ndb,#btn-draw,#chk-btn,.bnav{--tc-a:var(--hdr-a,var(--curtain-a));--tc-b:var(--hdr-b,var(--curtain-a));--tc-c:var(--hdr-c,var(--curtain-b));--tc-glow:var(--game-glow,var(--curtain-glow));--tc-ease:cubic-bezier(.2,.7,.2,1)}
#pg-sim .ndb{--tc-surf:rgba(255,255,255,.9);--tc-edge:rgba(255,255,255,.5);--tc-side:24px;--on:0;--up:0;--fill:.24;--halo:0 0 6px rgba(255,255,255,calc(var(--on)*.9));--ring:0 0 0 1px var(--tc-glow),0 12px 26px -14px var(--tc-glow);position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:72px;margin-top:10px;padding:14px var(--tc-side);border:1px solid transparent;border-radius:18px;color:var(--fg);text-align:center;background:linear-gradient(var(--tc-surf),var(--tc-surf)) padding-box,linear-gradient(150deg,var(--tc-a),var(--tc-b) 55%,var(--tc-c)) padding-box,linear-gradient(var(--tc-edge),var(--tc-edge)) border-box,linear-gradient(150deg,var(--tc-a),var(--tc-c)) border-box;box-shadow:0 1px 2px rgba(40,20,30,.05),0 6px 18px -14px var(--tc-glow);transform:translateY(calc(var(--up)*-1.5px));transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body.dark #pg-sim .ndb{--tc-surf:rgba(22,9,18,.78);--tc-edge:rgba(22,9,18,.18);--fill:.36;--halo:0 1px 3px rgba(0,0,0,calc(var(--on)*.85));box-shadow:0 10px 24px -16px rgba(0,0,0,.75)}
/* Hover/press, after the language picker: the card fills diagonally in its game's colours (::before,
   opacity only), the edge takes a game-tinted ring, a 1.5px lift and one sheen (::after); touch gets a
   short :active flash. The description ink switches to full --fg BEFORE the fill rises and back only
   AFTER it has faded, so contrast holds through the whole animation, not just at its ends. */
#pg-sim .ndb::before,#pg-sim .ndb::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none}
#pg-sim .ndb::before{background:linear-gradient(135deg,var(--tc-a),var(--tc-b) 50%,var(--tc-c));opacity:calc(var(--on)*var(--fill));transition:opacity .26s}
#pg-sim .ndb::after{opacity:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.34) 50%,transparent 62%) 130% 0/260% 100% no-repeat}
body.dark #pg-sim .ndb::after{background-image:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%)}
#pg-sim .ndb-l>*{text-shadow:var(--halo);transition:text-shadow .25s}
#pg-sim .ndb .ndb-sub{transition:text-shadow .25s,color 0s .26s}
#pg-sim .ndb-l{flex:1 1 auto;min-width:0;align-items:center;gap:3px;text-align:center}
/* A single compound longer than the column (fi «Puolustusasianajajat») is hyphenated in its own language
   (html[lang] follows the UI language); ordinary words are never split. */
#pg-sim .ndb-l>*{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 6 6;-webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:6}
#pg-sim .ndb-title{font-size:15.5px;line-height:1.28;color:inherit;text-wrap:balance;overflow-wrap:break-word}
#pg-sim .ndb-sub{font-size:12.5px;line-height:1.42;color:var(--sub2);opacity:1;text-wrap:pretty;overflow-wrap:break-word}
#pg-sim .ndb>.ndb-l+div{display:none}
#pg-sim .calan-btn-left{color:var(--gold-ink)}
@media (max-width:520px){#pg-sim .ndb-title :is(.if-badge,.qa-badge){display:table;margin:5px auto 0}}
/* Primary: the generator takes the game gradient (the header's) under a flat scrim, white ink. */
#pg-sim #ndb{color:#fff;background:linear-gradient(rgba(0,0,0,.24),rgba(0,0,0,.24)) padding-box,linear-gradient(150deg,var(--tc-a),var(--tc-b) 55%,var(--tc-c)) padding-box,linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.12)) border-box,linear-gradient(150deg,var(--tc-a),var(--tc-c)) border-box;box-shadow:0 10px 24px -16px var(--tc-glow)}
#pg-sim #ndb .ndb-sub{color:rgba(255,255,255,.96)}
#pg-sim #ndb{--fill:1}
#pg-sim #ndb::before{background:linear-gradient(rgba(0,0,0,.24),rgba(0,0,0,.24)),linear-gradient(315deg,var(--tc-a),var(--tc-b) 50%,var(--tc-c))}
#pg-sim #ndb .ndb-l>*{text-shadow:0 1px 3px rgba(0,0,0,calc(var(--on)*.5))}
#pg-sim #ndb::after{display:none}
/* Premium (Quantum-astral): violet identity, a quiet gold edge — gold stays for premium only. */
#pg-sim .qa-card{background:linear-gradient(var(--tc-surf),var(--tc-surf)) padding-box,linear-gradient(150deg,#6A46C4,#4A2B7A 50%,var(--tc-b)) padding-box,linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.25)) border-box,linear-gradient(150deg,#D9B65F,#9B7BD8 60%,#B07E1F) border-box!important;border-color:transparent!important}
body.dark #pg-sim .qa-card{background:linear-gradient(var(--tc-surf),var(--tc-surf)) padding-box,linear-gradient(150deg,#6A46C4,#4A2B7A 50%,var(--tc-b)) padding-box,linear-gradient(150deg,#F5CE7B,#B07E1F 55%,#7A4B2B) border-box!important}
#pg-sim .qa-card .ndb-title{color:var(--fg)}#pg-sim .qa-card .ndb-sub{color:var(--sub2)}
#pg-sim .qa-card::before{background:linear-gradient(135deg,#6A46C4,#4A2B7A 50%,#B07E1F)}
/* Jury | Defense: two equal columns, everything centred. */
#pg-sim .court-duo{gap:10px;margin-top:10px}
#pg-sim .court-duo::before{top:-10px;height:10px;background:var(--hdr-a,var(--gold));opacity:.5}
#pg-sim .court-duo .ndb{height:100%;min-height:76px;margin-top:0;padding:14px 10px;justify-content:center;text-align:center}
#pg-sim .court-duo .ndb-title{font-size:14px;line-height:1.25}
#pg-sim .court-duo .ndb-sub{font-size:12px}
/* Simulator buttons: the game gradient under the same flat scrim, centred both ways. */
#btn-draw,#chk-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;text-align:center;border:1px solid rgba(255,255,255,.2);color:#fff;background:linear-gradient(rgba(0,0,0,.24),rgba(0,0,0,.24)),linear-gradient(150deg,var(--tc-a),var(--tc-b) 55%,var(--tc-c));box-shadow:0 10px 22px -16px var(--tc-glow);transition:transform .2s var(--tc-ease),box-shadow .2s ease;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
#chk-btn{min-height:46px}
@media (hover:hover) and (pointer:fine){
#pg-sim .ndb:hover{--on:1;--up:1;box-shadow:var(--ring)}
#pg-sim .ndb:hover::after{animation:tc-sheen .7s cubic-bezier(.3,.6,.4,1) .05s both}
#pg-sim .ndb:hover .ndb-sub{color:var(--fg);transition-delay:0s}
#pg-sim .ndb:hover:active{transform:scale(.985)}
#btn-draw:hover,#chk-btn:hover{transform:translateY(-1.5px);box-shadow:0 0 0 1px var(--tc-glow),0 12px 24px -14px var(--tc-glow)}}
@keyframes tc-sheen{from{opacity:1;background-position:130% 0}to{opacity:1;background-position:-30% 0}}
#pg-sim .ndb:active{--on:1;transform:scale(.985)}
#pg-sim .ndb:active::before{transition-duration:.06s}
#pg-sim .ndb:is(:active,:focus-visible) .ndb-sub{color:var(--fg);transition-delay:0s}
#pg-sim #ndb .ndb-sub,#pg-sim #ndb:is(:hover,:active,:focus-visible) .ndb-sub{color:rgba(255,255,255,.96)}
#btn-draw:active,#chk-btn:active{transform:scale(.985);filter:none;transition-duration:.06s}
#pg-sim .ndb:focus-visible{--on:1;--up:1;box-shadow:var(--ring);outline:2px solid var(--fg);outline-offset:3px}
#btn-draw:focus-visible,#chk-btn:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
/* Phones: the floating ↑/↓ anchor (.scroll-anchors) runs over the cards' right edge: it shows 36px (a 46px hit pad) 8px from the edge,
   both sides keep that lane free, so the text stays centred and never passes under it. */
@media (max-width:699px){#pg-sim .ndb{--tc-side:32px}#pg-sim .court-duo .ndb{padding:13px 8px}#pg-sim .court-duo #defense-btn{padding-inline:32px}
.scroll-anchors{right:max(8px,calc(env(safe-area-inset-right,0px) + 8px));bottom:calc(110px + env(safe-area-inset-bottom,0px))}
.scroll-anchors .sa-btn{position:relative;width:36px;height:36px;min-width:36px;min-height:36px;font-size:16px}
.scroll-anchors .sa-btn::before{content:"";position:absolute;inset:-5px;border-radius:50%}}
@media (max-width:400px){#pg-sim .ndb{min-height:68px;padding-block:12px}#pg-sim .ndb-title{font-size:14.5px}#pg-sim .ndb-sub{font-size:12px}#pg-sim .court-duo .ndb-title{font-size:13.5px}}
.sa-btn{color:var(--gold-ink);border-color:var(--gold-ink)}
/* Bottom bar: the game gradient under a scrim dark enough for white ink on every palette; the active
   route = a darker pill with a light ring and solid white — never gold on gold. */
.bnav{background:linear-gradient(rgba(12,6,10,.42),rgba(12,6,10,.42)),linear-gradient(100deg,var(--tc-a) 0%,var(--tc-b) 52%,var(--tc-c) 100%)}
.bnav .bn-icon,.bnav .bn-lbl{color:rgba(255,255,255,.86)}
.bnav .bn.on .bn-icon,.bnav .bn.on .bn-lbl{color:#fff}
.bnav .bn.on::after{background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.62)}
@media (min-width:700px){.bnav .bn.on{background:rgba(0,0,0,.34);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.62)}}
.bnav .bn:focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:reduce){#pg-sim .ndb::after{animation:none!important}#pg-sim .ndb,#pg-sim .ndb:hover,#pg-sim .ndb:active,#pg-sim .ndb:focus-visible,#btn-draw,#btn-draw:hover,#btn-draw:active,#chk-btn,#chk-btn:hover,#chk-btn:active{transform:none}}
@media (prefers-contrast:more){#pg-sim .ndb,#pg-sim #ndb,#pg-sim .qa-card{color:var(--fg)!important;background:var(--bg2)!important;border:2px solid var(--fg)!important}#pg-sim .ndb::before{display:none}#pg-sim .ndb .ndb-sub,#pg-sim #ndb .ndb-sub{color:var(--fg)}}
@media (forced-colors:active){#pg-sim .ndb,#btn-draw,#chk-btn{border:1px solid ButtonText}}

/* Required choices share the active lottery's header gradient and the current theme's surfaces.
   A finite pulse draws attention; the solid contour remains until the condition is fulfilled. */
.required-choice{outline:2px solid var(--hdr-a);outline-offset:3px;border-radius:12px;scroll-margin-block:calc(100px + var(--loto-safe-top,env(safe-area-inset-top,0px))) calc(90px + env(safe-area-inset-bottom,0px));animation:requiredChoicePulse .85s ease-in-out 3}
.required-choice-note{box-sizing:border-box;display:block;flex:0 0 100%;grid-column:1/-1;min-width:0;max-width:100%;margin:0 0 10px;padding:10px 12px;border:2px solid transparent;border-inline-start-width:5px;border-radius:10px;background:var(--bg3);background:linear-gradient(var(--bg3),var(--bg3)) padding-box,linear-gradient(135deg,var(--hdr-a),var(--hdr-b),var(--hdr-c)) border-box;color:var(--fg);font:700 13px/1.5 'Manrope',sans-serif;white-space:normal;overflow-wrap:anywhere;text-align:start}
@keyframes requiredChoicePulse{50%{box-shadow:0 0 0 6px var(--game-glow)}}
@media(prefers-reduced-motion:reduce){.required-choice{animation:none}}
@media(forced-colors:active){.required-choice{outline-color:Highlight}.required-choice-note{border-color:CanvasText}}

.required-choice-host{flex-wrap:wrap}
body.dark .required-choice{outline-color:var(--gm-hi)}