@font-face{font-family:Nunito;src:url(/cards/assets/nunito-400.woff2?v=54c9bffd6e);font-weight:400;font-display:swap}@font-face{font-family:Nunito;src:url(/cards/assets/nunito-700.woff2?v=5fb1d80c10);font-weight:700;font-display:swap}@font-face{font-family:Nunito;src:url(/cards/assets/nunito-800.woff2?v=0b6d53ddd9);font-weight:800;font-display:swap}
:root{font-family:Nunito,sans-serif;color:#191a22;background:#e9eaee;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:default;opacity:.55}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #3048ff;outline-offset:3px}[hidden]{display:none!important}.sheet{max-width:440px;min-height:calc(100dvh - 12px);margin:12px auto 0;background:#fff;border-radius:28px 28px 0 0;padding:12px 20px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column}.handle{width:42px;height:5px;border-radius:9px;background:#acadb5;margin:0 auto 18px}header{height:44px;display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.icon{width:44px;height:44px;border:0;border-radius:50%;background:#f5f5f7;display:grid;place-items:center;text-decoration:none;font:32px/1 Nunito}.close{margin-left:auto}#content{display:flex;flex-direction:column;flex:1}h1{font-size:30px;line-height:1.14;letter-spacing:-.7px;font-weight:800;margin:0 0 14px}h1:focus{outline:0}.intro{font-size:16px;line-height:1.5;color:#626878;margin:0 0 28px}.topic{border:1px solid #e1e3eb;border-radius:20px;padding:22px;margin-bottom:24px}.eyebrow{font-size:13px;color:#626878;margin:0 0 10px}.topic h2{font-size:23px;margin:0 0 10px;font-weight:800}.topic p:last-child{font-size:15px;color:#626878;line-height:1.5;margin:0}.topic-graphic{display:flex;align-items:center;justify-content:center;height:122px;margin:12px 0 24px;position:relative}.paper{width:98px;height:112px;background:#f8f3e9;border:1px solid #e5dfd3;border-radius:12px;display:grid;place-items:center;font-size:36px;font-weight:800;box-shadow:0 7px 14px #1514120a}.paper:first-child{transform:rotate(-12deg);margin-right:-22px;color:#9ba183}.paper:last-child{transform:rotate(8deg);color:#191a22}.actions{margin-top:auto;padding-top:24px;display:grid;gap:10px}.primary,.secondary{width:100%;min-height:54px;border:0;border-radius:17px;padding:14px;font-weight:800;font-size:17px;text-align:center;text-decoration:none;display:block}.primary{background:#ceff50;color:#191a22}.secondary{background:#f4f5f7;color:#353a49}.text-action{background:none;border:0;min-height:44px;padding:9px 0;font-size:15px;text-decoration:underline;text-underline-offset:4px;color:#626878}.note{font-size:13px;line-height:1.5;color:#626878;margin:14px 0 0}.result{display:grid;grid-template-columns:repeat(3,1fr);border-radius:20px;background:#f5f9e9;padding:22px 4px;margin:0 0 22px;text-align:center}.result div+div{border-left:1px solid #dce2cc}.result strong{display:block;font-size:30px}.result span{font-size:13px;color:#626878}.success{display:grid;place-items:center;width:48px;height:48px;background:#ceff50;border-radius:50%;margin:0 0 22px;font-size:27px}.field{display:grid;gap:9px;font-size:15px;font-weight:700}.field input{min-height:56px;min-width:0;width:100%;border:1px solid #d8dce8;border-radius:14px;padding:14px;font-size:17px;background:#fff;color:#191a22}.field input[aria-invalid=true]{border-color:#cc233c;background:#fff9fa}.code{letter-spacing:10px;font-size:27px!important;text-align:center;font-variant-numeric:tabular-nums}.error{color:#be1b34;font-size:14px;line-height:1.5;margin:10px 0;min-height:21px}.test-code{background:#f5f5f7;border-radius:14px;padding:16px;margin:22px 0 4px;font-size:14px;line-height:1.5;color:#626878}.test-code strong{display:block;letter-spacing:5px;color:#191a22;font-size:24px;margin-top:4px}.email{overflow-wrap:anywhere;font-weight:700}.form{display:flex;flex-direction:column;flex:1}.storage-alert,#storage-error{color:#be1b34;font-size:14px}#play{position:fixed;inset:0;background:#f8f3e9}#play iframe{border:0;display:block;width:100%;height:100%}.loading{margin:30vh 24px;text-align:center}.loading .secondary{max-width:300px;margin:20px auto} @media(min-width:600px){.sheet{margin:24px auto;min-height:780px;border-radius:28px}}@media(max-width:360px){.sheet{padding-left:16px;padding-right:16px}h1{font-size:27px}.intro{font-size:15px}.topic{padding:18px}.topic-graphic{height:100px;margin-bottom:20px}.paper{height:94px;width:82px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

#storage-error{position:fixed;z-index:20;top:90px;left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:400px;margin:0;background:#fff8f8;border:1px solid #cc233c;border-radius:16px;padding:16px;box-shadow:0 8px 24px #191a2215;line-height:1.5}#storage-return{display:block;border:0;background:none;color:inherit;text-decoration:underline;font-weight:700;min-height:44px;padding:8px 0}

/* Hosted by the same sliding sheet as booking; standalone URL remains usable. */
html.embedded,html.embedded body{background:#fff}
html.embedded .sheet{margin:0 auto;min-height:100dvh;border-radius:0}
html.embedded #play{max-width:none;box-shadow:none}

html.embedded .handle{visibility:hidden}
#play{background:#16151a;color:#ede7e7}

/* Welcome (app first launch): offer on top, the game's own card stack in the middle, one action + «Вже є акаунт? Увійти».
   Card geometry copies the game (classic-reference.html) at a 344px reference width; --cw scales every measure. */
.welcome{display:flex;flex-direction:column;flex:1;min-height:0}
.welcome-copy{text-align:center;padding:0 4px}
.welcome-copy h1{font-size:28px;line-height:1.15;letter-spacing:-.03em;margin:0;text-wrap:balance}
.welcome-copy .intro{margin:12px 0 0;font-size:17px;line-height:1.45}
.welcome-hero{position:relative;flex:1;min-height:300px;margin:16px -20px 0;perspective:1200px;background:radial-gradient(56% 44% at 50% 50%,rgba(206,255,80,.28),rgba(206,255,80,0) 72%)}
.wd-deck{position:absolute;left:50%;top:50%;width:var(--cw,260px);aspect-ratio:10/13;transform:translate(-50%,calc(-50% - var(--cw,260px) * 16 / 344))}
.wd-card{position:absolute;inset:0;transform-origin:50% 65%}
.wd-flip{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.wd-face{position:absolute;inset:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;border-radius:calc(var(--cw) * 30 / 344);overflow:hidden;
 background:linear-gradient(168deg,#fff,#eef0f3);box-shadow:0 calc(var(--cw) * 22 / 344) calc(var(--cw) * 46 / 344) calc(var(--cw) * -14 / 344) rgba(25,25,40,.30),0 2px 6px rgba(25,25,40,.06);
 backface-visibility:hidden;-webkit-backface-visibility:hidden}
.wd-face::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 70% at 12% 0%,rgba(65,32,248,.10),transparent 46%),radial-gradient(120% 80% at 100% 100%,rgba(65,32,248,.05),transparent 52%)}
.wd-front{transform:rotateY(0deg) translateZ(.1px);padding:calc(var(--cw) * 13 / 344) calc(var(--cw) * 14 / 344) calc(var(--cw) * 20 / 344)}
.wd-media{position:relative;z-index:1;width:100%;aspect-ratio:316/234;border-radius:calc(var(--cw) * 18 / 344);overflow:hidden;background:#e7e6f5}
.wd-media img{display:block;width:100%;height:100%;object-fit:cover}
.wd-caption{position:absolute;left:calc(var(--cw) * 9 / 344);right:calc(var(--cw) * 9 / 344);bottom:calc(var(--cw) * 9 / 344);display:grid;place-items:center;height:calc(var(--cw) * 32 / 344);padding:0 4%;border-radius:calc(var(--cw) * 12 / 344);background:#fff;color:#191920;font-size:calc(var(--cw) * 14 / 344);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wd-q{position:relative;z-index:1;flex:1;display:grid;place-items:center;padding:0 4%;font-size:calc(var(--cw) * 26 / 344);line-height:1.2;font-weight:800;letter-spacing:-.01em;color:#191920;text-align:center;text-wrap:balance}
.wd-hint{position:relative;z-index:1;font-size:calc(var(--cw) * 12.5 / 344);font-weight:600;line-height:1;color:rgba(25,25,32,.55);transition:opacity .3s ease}
.wd-tap{position:absolute;left:50%;bottom:calc(var(--cw) * 8 / 344);z-index:2;width:calc(var(--cw) * 46 / 344);aspect-ratio:1;border-radius:50%;background:rgba(65,32,248,.22);opacity:0;transform:translate(-50%,-50%);pointer-events:none}
.wd-back{transform:rotateY(180deg) translateZ(.1px);justify-content:center;gap:calc(var(--cw) * 14 / 344);padding:calc(var(--cw) * 30 / 344) calc(var(--cw) * 28 / 344);text-align:center}
.wd-label{position:relative;z-index:1;font-size:calc(var(--cw) * 15 / 344);font-weight:700;color:#5b52b8}
.wd-a{position:relative;z-index:1;font-size:calc(var(--cw) * 25 / 344);line-height:1.18;font-weight:900;letter-spacing:-.015em;color:#191920;text-wrap:balance}
.wd-stamp{position:absolute;z-index:2;top:calc(var(--cw) * 20 / 344);left:calc(var(--cw) * 20 / 344);display:inline-flex;align-items:center;gap:.3em;height:calc(var(--cw) * 38 / 344);padding:0 calc(var(--cw) * 14 / 344);border-radius:999px;background:#ceff50;color:#191920;font-size:calc(var(--cw) * 16 / 344);font-weight:800;opacity:0;transform:rotate(-7deg)}
.wd-stamp svg{width:1.1em;height:1.1em}
/* Lower cards: the game dims them with a scrim; on the white sheet a light tint gives the same layered edges. */
.wd-scrim{position:absolute;inset:0;z-index:6;border-radius:calc(var(--cw) * 30 / 344);background:#0c0b11;opacity:0;pointer-events:none;transition:opacity .5s ease}
.wd-card[data-depth="1"] .wd-scrim{opacity:.06}
.wd-card[data-depth="2"] .wd-scrim{opacity:.11}
.wd-card:not([data-depth="0"]) .wd-hint{opacity:0}
/* Actions: one pill, then a quiet text link — the app first-launch pattern. */
.welcome+.actions{padding-top:20px;gap:6px}
.welcome+.actions .primary{border-radius:999px;min-height:56px}
.text-link{display:block;width:100%;min-height:44px;border:0;background:none;padding:10px;font-size:15px;line-height:1.4;color:#626878;text-align:center}
.text-link b{font-weight:800;color:#191920;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
@media(max-width:360px){.welcome-hero{margin-left:-16px;margin-right:-16px}.welcome-copy h1{font-size:26px}}
@media(max-height:700px){.welcome-hero{min-height:230px;margin-top:12px}.welcome-copy h1{font-size:25px}.welcome-copy .intro{font-size:16px;margin-top:8px}}
@media(max-height:620px){.welcome-hero{min-height:170px}.welcome-copy h1{font-size:23px}.welcome-copy .intro{font-size:15px;margin-top:6px}.welcome+.actions{padding-top:12px}header{margin-bottom:8px}}
/* Premium pass (09.10.2026): quieter stage, smaller card with air around it, black primary action. */
.welcome-eyebrow{margin:0 0 10px;font-size:12px;line-height:1;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#6e66a6}
.welcome-copy h1{font-size:30px;line-height:1.1;letter-spacing:-.035em}
.welcome-copy .intro{font-size:16px;color:#6b7080;margin-top:12px}
.welcome-hero{background:radial-gradient(46% 38% at 50% 46%,rgba(65,32,248,.07),rgba(65,32,248,0) 72%)}
.wd-deck::after{content:"";position:absolute;z-index:-1;left:6%;right:6%;bottom:calc(var(--cw) * -60 / 344);height:calc(var(--cw) * 46 / 344);border-radius:50%;background:radial-gradient(closest-side,rgba(25,25,40,.20),rgba(25,25,40,0));filter:blur(4px)}
.wd-face{box-shadow:0 calc(var(--cw) * 18 / 344) calc(var(--cw) * 40 / 344) calc(var(--cw) * -16 / 344) rgba(25,25,40,.26),0 1px 3px rgba(25,25,40,.08)}
.welcome+.actions .primary{background:#191920;color:#fff;border-radius:999px;min-height:56px;font-size:17px;letter-spacing:.005em;box-shadow:0 10px 24px -12px rgba(25,25,32,.55);transition:transform .15s ease,background .2s ease}
.welcome+.actions .primary:active{transform:scale(.98);background:#000}
.welcome+.actions .primary:focus-visible{outline:3px solid #4120f8;outline-offset:3px}
@media(max-height:700px){.welcome-copy h1{font-size:26px}.welcome-eyebrow{margin-bottom:8px}}
@media(max-height:620px){.welcome-copy h1{font-size:24px}.welcome-eyebrow{display:none}}
/* Grid pass: no empty header row on the welcome screen. Close floats top-right; the hidden embedded handle takes no space;
   copy → 24 → stack (fills the rest, 24 above/below) → 24 → actions. */
#flow{position:relative}
#flow:is([data-page="welcome"],[data-page="result"]) header{position:absolute;top:8px;right:12px;margin:0;z-index:5}
html.embedded #flow:is([data-page="welcome"],[data-page="result"]) .handle{display:none}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-copy{padding-top:36px}
.welcome-hero{margin-top:24px}
.welcome+.actions{padding-top:24px}
@media(max-height:700px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-copy{padding-top:32px}.welcome-hero{margin-top:16px}.welcome+.actions{padding-top:16px}}
/* Optical centring of the stack: the two lower edges add ~7/344 of card width below, so lift by half of that only. */
.wd-deck{transform:translate(-50%,calc(-50% - var(--cw,260px) * 7 / 344))}
/* Close sits 4–48px; copy starts at 48px, so the title never touches it, even with the eyebrow hidden. */
#flow:is([data-page="welcome"],[data-page="result"]) header{top:4px}
@media(max-height:700px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-copy{padding-top:36px}}
#flow:is([data-page="welcome"],[data-page="result"]) header{top:2px;right:16px}
/* Cohesion pass: one nav row under the grabber — «ФЛЕШКАРТКИ» centred, close 16px from the right edge, both on the
   same 44px line (centre 44px from the sheet top). Title starts 32px under that line; rhythm below stays 24px. */
html.embedded #flow:is([data-page="welcome"],[data-page="result"]) .handle,#flow:is([data-page="welcome"],[data-page="result"]) .handle{display:none}
#flow:is([data-page="welcome"],[data-page="result"]) header{top:22px;right:16px}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-copy{padding-top:26px}
.welcome-eyebrow{height:12px;margin:0 0 26px;line-height:12px}
@media(max-height:700px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-copy{padding-top:26px}.welcome-eyebrow{margin-bottom:22px}}
@media(max-height:620px){.welcome-eyebrow{display:block;margin-bottom:18px}}
/* Close shares the content's right edge (sheet side padding), so it lines up with the button below. */
#flow:is([data-page="welcome"],[data-page="result"]) header{right:20px}
@media(max-width:360px){#flow:is([data-page="welcome"],[data-page="result"]) header{right:16px}}
/* Group pass: eyebrow sits on the title (8px), the stack follows the subtitle (20px); the group is top-aligned (A) or
   centred (B, .welcome[data-layout="center"]). Close keeps the nav row alone. */
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-copy{padding-top:48px}
.welcome-eyebrow{margin:0 0 8px}
.welcome-hero{flex:0 0 auto;min-height:0;margin-top:20px}
.welcome[data-layout="center"]{justify-content:center}
@media(max-height:700px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-copy{padding-top:44px}.welcome-eyebrow{margin-bottom:6px}.welcome-hero{margin-top:16px}}
@media(max-height:620px){.welcome-eyebrow{margin-bottom:6px}}
/* The card's top edge is the group's next line: 24px under the subtitle; edges and floor shadow use the room below. */
.wd-deck{top:0;transform:translateX(-50%)}
.welcome-hero{margin-top:24px}
@media(max-height:700px){.welcome-hero{margin-top:16px}}
/* Ring of 5 (09.10.2026): positions by depth, CSS transitions; depths 3–4 wait invisibly behind depth 2,
   so the stack edges never jump. Leaving/flip/stamp are class states; recycling happens with transitions off. */
.wd-card{transition:transform .68s cubic-bezier(.34,1.18,.64,1),opacity .45s ease;will-change:transform}
.wd-card[data-depth="0"]{z-index:10;transform:translate3d(0,0,0) scale(1)}
.wd-card[data-depth="1"]{z-index:9;transform:translate3d(0,calc(var(--cw) * 16 / 344),0) scale(.945)}
.wd-card[data-depth="2"],.wd-card[data-depth="3"],.wd-card[data-depth="4"]{z-index:8;transform:translate3d(0,calc(var(--cw) * 32 / 344),0) scale(.89)}
.wd-card[data-depth="3"]{z-index:7;opacity:0}
.wd-card[data-depth="4"]{z-index:6;opacity:0}
.wd-card.is-leaving{z-index:20;transform:translate3d(140%,-4%,0) rotate(14deg);opacity:0;transition:transform .58s cubic-bezier(.55,0,.8,.25),opacity .45s ease .1s}
.wd-flip{transition:transform .76s cubic-bezier(.22,1,.36,1)}
.wd-card.is-flipped .wd-flip{transform:rotateY(180deg)}
.wd-stamp{opacity:0;transform:scale(.5) rotate(-16deg);transition:transform .42s cubic-bezier(.34,1.45,.64,1),opacity .25s ease}
.wd-card.is-known .wd-stamp{opacity:1;transform:scale(1) rotate(-7deg)}
.wd-card.no-anim,.wd-card.no-anim *{transition:none!important}
/* Rise-in (once): from below, staggered top-last. */
.wd-deck.is-intro .wd-card{transform:translate3d(0,calc(var(--cw) * .5),0) scale(.86);opacity:0;transition:none}
.wd-deck.is-rising .wd-card{transition:transform .82s cubic-bezier(.34,1.3,.64,1),opacity .5s ease}
.wd-deck.is-rising .wd-card[data-depth="1"]{transition-delay:.14s}
.wd-deck.is-rising .wd-card[data-depth="0"]{transition-delay:.28s}

/* Game loading «Тасування колоди» (flash-loading.js): its own stage in the game's world (same background, lime/blue light,
   Nunito), between the white welcome and the game. The white sheet dissolves into it; it dissolves into the game. */
.fl-load{position:absolute;inset:0;z-index:2;display:grid;place-items:center;overflow:hidden;color:#f4f0e7;
  background:radial-gradient(125% 85% at 50% 8%,#17161b 0%,#131218 46%,#100f16 100%);font-variant-numeric:tabular-nums;isolation:isolate}
/* фон завантаження = фон гри (.bg у classic-reference.html): ті самі світла за кутами й віньєтка (Vlad 14.10.2026) */
.fl-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.fl-bg::after{content:"";position:absolute;width:60vmax;height:60vmax;right:-24vmax;bottom:-30vmax;border-radius:50%;background:radial-gradient(circle,rgba(var(--acc,65,32,248),.20),rgba(var(--acc,65,32,248),.07) 45%,transparent 70%)}
.fl-bg .vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.55))}
.fl-bg .grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* The welcome has the same background, so only the contents fade in; the background is opaque from the first frame
   (the game is already loading underneath and must never show through). */
.fl-body{animation:fl-in .26s ease-out both}
@keyframes fl-in{from{opacity:0;transform:scale(.97)}}
.fl-body{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:6vh}
.fl-deck{position:relative;width:168px;height:218px}
.fl-back{position:absolute;inset:0;border-radius:20px;overflow:hidden;
  background:radial-gradient(120% 80% at 20% 0%,#7f6bff 0%,transparent 55%),linear-gradient(160deg,#5236ff,#3014cf);
  box-shadow:0 22px 44px -18px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.25);transition:transform .36s cubic-bezier(.22,1,.36,1)}
.fl-back::before{content:"";position:absolute;inset:9px;border-radius:13px;border:1.5px solid rgba(255,255,255,.22);
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 8px,transparent 8px 16px)}
.fl-back img{position:absolute;left:50%;top:50%;width:62%;transform:translate(-50%,-50%);opacity:.95}
.fl-back[data-d="0"]{transform:translate(0,0) rotate(-2deg);z-index:3}
.fl-back[data-d="1"]{transform:translate(-10px,8px) rotate(-7deg);z-index:2}
.fl-back[data-d="2"]{transform:translate(10px,12px) rotate(5deg);z-index:1}
.fl-back.out{transform:translate(122px,-6px) rotate(12deg);transition-duration:.3s}
.fl-cap{margin:48px 0 0;text-align:center}
.fl-cap b{display:block;font-size:20px;font-weight:800;letter-spacing:-.01em}
.fl-cap span{display:block;margin-top:6px;font-size:14px;font-weight:700;color:rgba(244,240,231,.5)}
.fl-err{position:relative;width:min(100% - 48px,340px);text-align:center;margin-bottom:6vh}
.fl-err-ic{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 20px;border-radius:50%;background:rgba(244,240,231,.08);color:#ffb4b4}
.fl-err-ic svg{width:30px;height:30px}
.fl-err h2{margin:0;font-size:22px;font-weight:800}
.fl-err p{margin:8px 0 0;font-size:15px;color:rgba(244,240,231,.66)}
.fl-retry{display:block;width:100%;height:56px;margin-top:28px;border:0;border-radius:999px;background:#caff4f;color:#191920;font-size:17px;font-weight:800}
.fl-backbtn{display:block;width:100%;height:44px;margin-top:8px;border:0;background:none;color:rgba(244,240,231,.66);font-size:15px;font-weight:700}
.fl-load :focus-visible{outline:3px solid #caff4f;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.fl-back{transition:none}.fl-body{animation:none}}

/* Dark welcome (09.10.2026): the welcome lives in the game's world — the same background as the loading screen and the
   game, light type, the same white cards — so welcome → loading → game never jumps from white to dark.
   Email / code / verified stay on the white sheet. */
:root:has(#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"],[data-page="card"])),:root:has(#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"],[data-page="card"])) body,
html.embedded:has(#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"],[data-page="card"])),html.embedded:has(#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"],[data-page="card"])) body{background:#16151a}
#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"],[data-page="card"]){color:#f4f0e7;
  background:radial-gradient(circle 220px at 10px 30px,rgba(202,255,79,.11),transparent 64%),
    radial-gradient(circle 220px at calc(100% + 10px) calc(100% - 50px),rgba(65,32,248,.24),transparent 64%),
    radial-gradient(125% 85% at 50% 8%,#17161b 0%,#131218 46%,#100f16 100%)}
#flow:is([data-page="welcome"],[data-page="result"]) .close{background:rgba(244,240,231,.08);color:#f4f0e7}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-eyebrow{color:#caff4f}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-copy .intro{color:rgba(244,240,231,.66)}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-hero{background:radial-gradient(46% 38% at 50% 46%,rgba(65,32,248,.18),rgba(65,32,248,0) 72%)}
#flow:is([data-page="welcome"],[data-page="result"]) .wd-face{box-shadow:0 calc(var(--cw) * 24 / 344) calc(var(--cw) * 52 / 344) calc(var(--cw) * -16 / 344) rgba(0,0,0,.62),0 2px 8px rgba(0,0,0,.3)}
#flow:is([data-page="welcome"],[data-page="result"]) .wd-deck::after{background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0))}
#flow:is([data-page="welcome"],[data-page="result"]) .wd-card[data-depth="1"] .wd-scrim{opacity:.16}
#flow:is([data-page="welcome"],[data-page="result"]) .wd-card[data-depth="2"] .wd-scrim{opacity:.3}
#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"]) .welcome+.actions .primary{background:#4120f8;color:#fff;box-shadow:0 12px 28px -12px rgba(65,32,248,.75)}
#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"]) .welcome+.actions .primary:active{background:#3415d9}
#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"]) .text-link{color:rgba(244,240,231,.66)}
#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"]) .text-link b{color:#f4f0e7}
#flow:is([data-page="welcome"],[data-page="result"]) :is(button,a):focus-visible{outline-color:#caff4f}

/* Tap hint (09.10.2026, from «Easy — картки (темна тема)»): hand icon + lowercase bold line, same as the game card. */
.wd-hint{display:inline-flex;align-items:center;gap:calc(var(--cw) * 7 / 344);font-weight:800;color:rgba(25,25,32,.62)}
.wd-hint svg{flex:none;width:calc(var(--cw) * 15 / 344);height:calc(var(--cw) * 15 / 344)}

/* Final card face in the demo (09.10.2026): layout comes from flash-card-face.css in 344-units of --cw. */
.wd-deck .ef{--ef-w:var(--cw)}
.wd-face.ef{background:linear-gradient(168deg,#fff,#eef0f3)}
.wd-face.ef::before{background:radial-gradient(120% 70% at 12% 0%,rgba(65,32,248,.10),transparent 46%)}
.wd-back .wd-stamp{top:calc(var(--cw) * 46 / 344);left:calc(var(--cw) * 18 / 344)}
/* No lime on white (it barely shows): the «✓ Знаю» stamp on the white card is brand blue with white type. */
.wd-back .wd-stamp{background:#4120f8;color:#fff}
.wd-card:not([data-depth="0"]) .ef-hint{opacity:0}

/* Airier welcome (09.10.2026): a smaller card (flash-welcome.js: ~68% of the width, ≤ 280px), more air around the copy,
   and the copy + card group centred between the close row and the button, so the free space is not all at the bottom. */
#flow:is([data-page="welcome"],[data-page="result"]) .welcome{justify-content:center}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-eyebrow{margin-bottom:12px}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-copy .intro{margin-top:14px}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-hero{margin-top:36px}
@media(max-height:700px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-eyebrow{margin-bottom:8px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-copy .intro{margin-top:10px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-hero{margin-top:24px}}
@media(max-height:620px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-copy{padding-top:40px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-eyebrow{margin-bottom:6px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-copy .intro{margin-top:6px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-hero{margin-top:14px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome+.actions{padding-top:12px}}

/* Welcome «Онбординг» (09.10.2026, variant 1 of Дизайн/…/вітальний-екран-варіанти.html): live cards fanned in the upper
   part (flash-welcome.js), then a topic chip, the offer and the facts, then the actions at the thumb. No lime on white. */
#flow:is([data-page="welcome"],[data-page="result"]) .welcome.welcome-fan{display:flex;flex-direction:column;justify-content:flex-start;flex:1;min-height:0}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-hero{position:relative;flex:1 1 auto;min-height:190px;height:auto;margin:40px -20px 0;background:none;perspective:1200px}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-copy{padding:18px 4px 0;text-align:center}
.welcome-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:999px;background:rgba(244,240,231,.08);border:1px solid rgba(244,240,231,.12);font-size:14px;font-weight:800;line-height:1;color:#f4f0e7}
.welcome-chip svg{width:16px;height:16px;color:#caff4f}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan h1{margin:14px 0 0;font-size:31px;line-height:1.08;letter-spacing:-.035em;color:#fff;text-wrap:balance}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .intro{margin:10px 0 0;font-size:16px;line-height:1.4;color:rgba(244,240,231,.62)}
.wf{position:absolute;inset:0}
.wf-glow{position:absolute;left:50%;top:var(--fy,50%);width:calc(var(--cw,200px) * 2.1);height:calc(var(--cw,200px) * 1.8);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(65,32,248,.42),rgba(65,32,248,.12) 55%,transparent);pointer-events:none}
.wf-floor{position:absolute;left:50%;top:calc(var(--fy,50%) + var(--cw,200px) * .7);width:calc(var(--cw,200px) * 1.5);height:calc(var(--cw,200px) * .15);transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent);pointer-events:none}
.wf-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .76s cubic-bezier(.22,1,.36,1)}
.wf-face{position:absolute;inset:0;overflow:hidden;border-radius:calc(var(--cw,200px) * 30 / 344);background:linear-gradient(168deg,#fff,#eef0f3);
  box-shadow:0 calc(var(--cw,200px) * 24 / 344) calc(var(--cw,200px) * 52 / 344) calc(var(--cw,200px) * -16 / 344) rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.3);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.wf-face::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 70% at 12% 0%,rgba(65,32,248,.10),transparent 46%)}
.wf-back{transform:rotateY(180deg)}
@media(max-height:700px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-hero{margin-top:30px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan h1{font-size:27px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-copy{padding-top:12px}}
@media(max-height:620px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-hero{margin-top:24px;min-height:150px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan h1{font-size:24px;margin-top:10px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .intro{font-size:15px;margin-top:6px}}

/* Audit pass (09.10.2026). Rhythm on an 8-pt scale: chip → title 16, title → facts 12, facts → button 32, button → «Увійти» 8.
   The fan is centred between the close row and the chip (equal space above and below), so no dead band at the top. */
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-hero{margin-top:54px}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-copy{padding-top:0}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan h1{margin-top:16px}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .intro{margin-top:12px}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan+.actions{padding-top:32px;gap:8px}
.wf{--fy:calc(50% - var(--cw,200px) * .047)}   /* the fan's visual middle (main top … side-card bottom) = the hero's middle */
/* Demo cards show only what reads at this size: picture + question, then the answer. */
.wf .ef-bhead,.wf .ef-xp{display:none}
@media(max-height:700px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-hero{margin-top:50px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan h1{margin-top:12px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .intro{margin-top:8px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan+.actions{padding-top:24px}}
@media(max-height:620px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-hero{margin-top:48px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan h1{margin-top:10px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .intro{margin-top:6px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan+.actions{padding-top:16px;gap:4px}}

/* The fan as a hand of cards (09.10.2026): every card element has a place (data-slot) and moves between places —
   never a fade on the spot. The cards live in one 3D space (.wf-cards): the centre card is really nearer and the side cards
   farther, so they always overlap in the right order while moving, with no z-index jumps. All cards are full size; the
   distance (and a little scale) makes the side ones smaller, so the faces render the same in every place. */
.wf-cards{position:absolute;inset:0;transform-style:preserve-3d;perspective:1200px}
.wf-card{position:absolute;left:50%;top:var(--fy,50%);width:var(--cw,200px);aspect-ratio:10/13;--ef-w:var(--cw,200px);transform-style:preserve-3d;
  transition:transform .72s cubic-bezier(.22,1,.36,1),opacity .45s ease}
.wf-card.no-anim,.wf-card.no-anim::after{transition:none}
.wf-card.is-flipped .wf-flip{transform:rotateY(180deg)}
.wf-shirt{overflow:hidden;border-radius:calc(var(--cw,200px) * 30 / 344);background:rgb(var(--acc));background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.28) 0%,transparent 55%),linear-gradient(160deg,rgb(var(--acc)),color-mix(in srgb,rgb(var(--acc)) 68%,#0b0a14));box-shadow:0 22px 44px -18px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.25)}
.wf-shirt::before{content:"";position:absolute;inset:calc(var(--cw,200px) * .054);border-radius:calc(var(--cw,200px) * .077);border:1.5px solid rgba(255,255,255,.26);background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 8px,transparent 8px 16px)}
.wf-shirt i{position:absolute;left:50%;top:50%;width:62%;aspect-ratio:600/376;transform:translate(-50%,-50%);background:#fff;opacity:.95;-webkit-mask:url(/cards/assets/logo-boot.webp?v=37199ab233) center/contain no-repeat;mask:url(/cards/assets/logo-boot.webp?v=37199ab233) center/contain no-repeat}
/* side cards are dimmed by a veil, not a filter (a filter would flatten the 3D flip) */
.wf-card::after{content:"";position:absolute;inset:0;border-radius:calc(var(--cw,200px) * 30 / 344);background:#0c0b11;opacity:0;transform:translateZ(1px);pointer-events:none;transition:opacity .5s ease}
.wf-card[data-slot="stack"]{transform:translate(-50%,-50%) translateZ(-40px)}
.wf-card[data-slot="0"]{transform:translate(-50%,-50%) translateZ(0)}
.wf-card[data-slot="-1"]{transform:translate(calc(-50% - var(--cw,200px) * .37),calc(-50% + var(--cw,200px) * .17)) translateZ(-90px) rotate(-10deg) scale(.85)}
.wf-card[data-slot="1"]{transform:translate(calc(-50% + var(--cw,200px) * .37),calc(-50% + var(--cw,200px) * .17)) translateZ(-90px) rotate(10deg) scale(.85)}
.wf-card[data-slot="-1"]::after,.wf-card[data-slot="1"]::after{opacity:.14}
.wf-card[data-slot="-2"]{transform:translate(calc(-50% - var(--cw,200px) * .7),calc(-50% + var(--cw,200px) * .42)) translateZ(-180px) rotate(-22deg) scale(.7);opacity:0}
.wf-card[data-slot="2"]{transform:translate(calc(-50% + var(--cw,200px) * .12),calc(-50% + var(--cw,200px) * .08)) translateZ(-180px) rotate(4deg) scale(.8);opacity:0}
/* Side cards: the picture on the right, the answer on the left; questions only on the centre card. */
.wf-card:not([data-slot="0"]) .ef-front .ef-q{visibility:hidden}
@media(prefers-reduced-motion:reduce){.wf-card{transition:none}}

/* Offer + first game, two meanings apart (10.10.2026).
   Offer: what this is — a flashcards game for the НМТ in Ukrainian (title + how it works).
   First game: its own plate right above the button — deck icon, «Перша гра без реєстрації», the topic, the size (or progress). */
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-copy{padding-top:24px}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan h1{margin-top:0;font-size:31px}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .intro{margin-top:10px;text-wrap:balance}
.first-game{display:flex;align-items:center;gap:12px;margin-top:24px;padding:12px 14px 12px 12px;border-radius:18px;background:rgba(244,240,231,.06);border:1px solid rgba(244,240,231,.1);text-align:left}
.fg-icon{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:rgba(202,255,79,.12);color:#caff4f}
.fg-icon svg{width:22px;height:22px}
.fg-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.fg-text small{font-size:12.5px;line-height:1.2;font-weight:700;color:rgba(244,240,231,.6)}
.fg-text b{font-size:17px;line-height:1.2;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fg-count{flex:none;padding:7px 12px;border-radius:999px;background:rgba(244,240,231,.08);font-size:14px;line-height:1;font-weight:800;color:#f4f0e7;white-space:nowrap}
.fg-count:empty{display:none}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan+.actions{padding-top:12px}
@media(max-height:700px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-copy{padding-top:16px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan h1{font-size:27px}.first-game{margin-top:16px;padding:9px 12px 9px 10px}.fg-icon{width:36px;height:36px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan+.actions{padding-top:10px}}
@media(max-height:620px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-copy{padding-top:12px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan h1{font-size:24px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .intro{font-size:14.5px;margin-top:6px}.first-game{margin-top:12px}.fg-text small{font-size:11.5px}.fg-text b{font-size:15.5px}}
/* Balance: the fan is centred in the hero, so the copy starts right at the hero's edge (equal air above and below the fan). */
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-copy{padding-top:8px}
@media(max-height:700px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-copy{padding-top:4px}}
/* Very short screens (iPhone SE): the title + the first-game plate carry the meaning; the how-it-works line steps aside. */
@media(max-height:620px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .intro{display:none}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-hero{margin-top:46px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .welcome-copy{padding-top:2px}}
.wf{--fy:calc(50% - var(--cw,200px) * .047 + 9px)}   /* optical: equal air above and below the floating fan */

/* Welcome «Світи» (11.10.2026, variant C). «Флешкартки» — quiet centred title on the close button's line; each subject is a
   world in a swipeable pager (flash-welcome.js); the first-game plate and the button follow the current world (--acc). */
#flow:is([data-page="welcome"],[data-page="result"]){--acc:65,32,248;
  background:radial-gradient(circle 240px at calc(100% + 10px) calc(100% - 50px),rgba(var(--acc),.26),transparent 64%),radial-gradient(125% 85% at 50% 8%,#17161b 0%,#131218 46%,#100f16 100%)}
.welcome-brand{position:absolute;left:72px;right:72px;top:35px;margin:0;text-align:center;font-size:18px;line-height:18px;font-weight:800;letter-spacing:-.01em;color:rgba(244,240,231,.66);z-index:4;pointer-events:none}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-worlds .welcome-hero{margin:58px -20px 0;min-height:260px}
.ww{position:absolute;inset:0;display:flex;flex-direction:column}
.ww-track{flex:1;min-height:0;position:relative;touch-action:pan-y}
.ww-page{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0;will-change:transform;backface-visibility:hidden}
.ww-stage{position:relative;flex:1;min-height:0}
.ww-stage .wf-glow{background:radial-gradient(closest-side,rgba(var(--acc),.42),rgba(var(--acc),.1) 55%,transparent)}
/* Світло предмета не ширше за свою сторінку (Влад 15.10.2026): було cw·2.1 ≈ 462 px на 440-px смузі — край світла поточного й сусідніх
   предметів обрізався рівною лінією по краю .ww на широких екранах. Тепер градієнт гасне до краю сторінки, сусіди нічого не заносять. */
.ww-stage .wf-glow{width:min(calc(var(--cw,200px) * 2.1),100%)}
.ww-name{flex:none;padding:6px 24px 0;text-align:center}
.ww-name h1{margin:0;font-size:30px;line-height:1.08;font-weight:800;letter-spacing:-.03em;color:#fff}
.ww-name h1:focus{outline:0}
.ww-name p{margin:6px 0 0;font-size:15px;line-height:1.3;color:rgba(244,240,231,.6)}
.ww-arrow{position:absolute;top:calc(50% - 56px);width:36px;height:36px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;background:rgba(244,240,231,.08);color:#fff;z-index:3}
.ww-arrow svg{width:18px;height:18px}
.ww-prev{left:10px}.ww-next{right:10px}
.ww-dots{flex:none;display:flex;justify-content:center;gap:10px;padding:14px 0 0}
.ww-dots button{width:30px;height:30px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;background:rgba(244,240,231,.08);opacity:.6;transition:transform .3s,opacity .3s,background .3s}
.ww-dots button svg{width:15px;height:15px;color:#fff}
.ww-dots button[aria-selected=true]{background:var(--c);opacity:1;transform:scale(1.15)}
.ww .wf-card{--ef-w:var(--cw,200px)}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-worlds .first-game{margin-top:18px}
.fg-icon{background:rgba(var(--acc),.2);color:color-mix(in srgb,rgb(var(--acc)) 78%,#fff)}   /* матова плитка кольору предмета (Vlad 14.10.2026); знак трохи висвітлено, щоб фірмовий синій читався на темному */
.first-game.is-soon .fg-count{background:rgba(255,207,92,.16);color:#ffcf5c}
#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"]) .welcome+.actions .primary.is-soon{background:rgba(244,240,231,.12);color:rgba(244,240,231,.7);box-shadow:none;opacity:1}
@media(max-height:700px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-worlds .welcome-hero{margin-top:52px;min-height:220px}.ww-name h1{font-size:25px}.ww-name p{font-size:14px;margin-top:4px}.ww-dots{padding-top:10px}.ww-dots button{width:26px;height:26px}#flow:is([data-page="welcome"],[data-page="result"]) .welcome-worlds .first-game{margin-top:12px}}
@media(max-height:620px){.ww-name p{display:none}.ww-dots{padding-top:8px}}
@media(prefers-reduced-motion:reduce){.ww-dots button{transition:none}}
/* Subjects without cards (11.10.2026): same structure; the one action is a white «Повідомити, коли буде». */
#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"]) .welcome+.actions .primary.is-notify{background:#fff;color:#191920;box-shadow:0 12px 28px -14px rgba(255,255,255,.35)}
#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"]) .welcome+.actions .primary.is-notify:active{background:#ececf1}
#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"]) .welcome+.actions .primary.is-notify:disabled{background:rgba(244,240,231,.12);color:rgba(244,240,231,.7);box-shadow:none;opacity:1}
#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"]) .welcome+.actions .primary.is-notify:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* the «done» check on the white sheet is brand blue, not lime (no lime on white) */
.success.notify-done{background:#4120f8;color:#fff}
/* Notify pages are on the white sheet: the main action is brand blue (no lime on white). */
#flow:is([data-page="notify"],[data-page="notified"]) .actions .primary{background:#4120f8;color:#fff;border-radius:999px}
/* 7 subjects: the icon row stays one line on narrow phones */
.ww-dots{gap:8px}
@media(max-width:360px){.ww-dots{gap:6px}.ww-dots button{width:27px;height:27px}.ww-dots button svg{width:14px;height:14px}.ww-name h1{font-size:25px}}
/* the off-screen worlds of the pager must not widen the page (horizontal scroll on narrow phones) */
.ww{overflow-x:clip}
@media(max-width:360px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-worlds .welcome-hero{margin-left:-16px;margin-right:-16px}}   /* sheet side padding is 16px here */
/* Subject symbols as glyphs (Ї, π, En) next to drawn ones (тризуб, компас, ДНК, перо) */
.glyph{display:block;font-family:Georgia,'Times New Roman',serif;font-weight:700;line-height:1;letter-spacing:-.02em}
.ww-dots .glyph{font-size:16px}
.fg-icon .glyph{font-size:22px}
/* Paging without flicker: the subject buttons switch instantly (no scale, opacity or colour transitions, no extra layers);
   the current one is marked by its colour and a ring. */
.ww-dots button{transition:none;opacity:1;background:rgba(244,240,231,.08);color:rgba(244,240,231,.55)}
.ww-dots button svg{color:currentColor}
.ww-dots button[aria-selected=true]{transform:none;background:var(--c);color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.14)}

/* Welcome «Світи», layout M1 (12.10.2026): the fan keeps its place; the world block (name, line, subject buttons)
   sits midway between the fan and the first-game plate. flash-welcome.js sets --sp, --fan-y and --arrow-y. */
.ww::after{content:'';flex:0 0 var(--sp,0px)}
.ww .wf{--fy:var(--fan-y,calc(50% - var(--cw,200px) * .047 + 9px))}
.ww-arrow{top:var(--arrow-y,calc(50% - 56px))}
.ww-dots{padding-top:16px}
@media(max-height:700px){.ww-dots{padding-top:10px}}
@media(max-height:620px){.ww-dots{padding-top:8px}}
/* The world's name stays on one line: the longest («Українська література») is ~10.5 font-sizes wide. */
.ww-page{container-type:inline-size}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .ww-name h1{font-size:min(31px,calc((100cqi - 48px) / 10.6))}
@media(max-height:700px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .ww-name h1{font-size:min(27px,calc((100cqi - 48px) / 10.6))}}
@media(max-height:620px){#flow:is([data-page="welcome"],[data-page="result"]) .welcome-fan .ww-name h1{font-size:min(24px,calc((100cqi - 48px) / 10.6))}}
/* Sign-in step (12.10.2026), minimal: one step for signing in and signing up, on the app's dark background like the welcome.
   Only «×» (returns to where the person came from); a title, one pill field, the button right under it, a quiet note and the
   «Вхід ↔ Новий акаунт» switch; on the code step the help (spam, resend) sits right under the cells. Everything lives in the
   top ~320 px of the sheet, because the keyboard covers the rest. The code is six cells over one input, so autofill and paste
   keep working, and it sends itself on the sixth digit. */
:root:has(#flow[data-layout="form"]),:root:has(#flow[data-layout="form"]) body{background:#16151a}
#flow[data-layout="form"]{color:#f4f0e7;
  background:radial-gradient(circle 240px at calc(100% + 10px) calc(100% - 50px),rgba(65,32,248,.26),transparent 64%),radial-gradient(125% 85% at 50% 8%,#17161b 0%,#131218 46%,#100f16 100%)}
/* «×» stays exactly where it was on the welcome (22 px from the top, 20 px from the right), and the title shares its row,
   centred on it (Vlad 12.10.2026): nothing jumps when the screens change. */
#flow[data-layout="form"] header{position:absolute;top:22px;right:20px;margin:0;z-index:5}
#flow[data-layout="form"] .handle{display:none}
#flow[data-layout="form"] .handle{background:rgba(244,240,231,.24)}
#flow[data-layout="form"] .close{background:rgba(244,240,231,.08);color:#f4f0e7}
#flow[data-layout="form"] :is(button,a,input):focus-visible{outline-color:#caff4f}
#flow[data-layout="form"] h1{color:#fff;font-size:28px;line-height:32px;letter-spacing:-.03em;margin:16px 60px 24px 0}
#flow[data-page="code"] h1{margin-bottom:10px}
#flow[data-page="code"] .intro{color:rgba(244,240,231,.66);font-size:16px;line-height:1.45;margin:0 0 20px}
#flow[data-page="code"] .intro .email{color:#fff;font-weight:700}
.auth .pill{display:block;width:100%;min-width:0;height:54px;border-radius:999px;border:1px solid transparent;padding:0 22px;background:rgba(244,240,231,.08);color:#fff;font-size:17px;font-weight:700}
.auth .pill::placeholder{color:rgba(244,240,231,.45);font-weight:400}
.auth .pill:focus{border-color:rgb(var(--acc,65,32,248));box-shadow:0 0 0 4px rgba(var(--acc,65,32,248),.28);outline:0}
.auth .pill[aria-invalid=true]{border-color:#ff8a80}
.auth .error{color:#ff9a8f;font-size:14px;margin:10px 6px 0;min-height:0}
.auth .error:empty{display:none}
.auth .error.is-hint{color:rgba(244,240,231,.8)}
.auth .actions{margin-top:12px;padding-top:0}
.auth .actions .primary{background:#4120f8;color:#fff;border-radius:999px;min-height:54px;box-shadow:0 12px 28px -12px rgba(65,32,248,.75)}
.auth .actions .primary:active{background:#3415d9}
.auth .note{color:rgba(244,240,231,.62);text-align:center;margin:12px 0 0}
.auth .switch{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;margin:6px 0 0;font-size:15px;color:rgba(244,240,231,.72)}
.auth .switch .inline-link{min-height:44px}
.inline-link{background:none;border:0;padding:0;font:inherit;font-weight:700;color:#fff;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.otp{position:relative;display:block}
.otp input{position:absolute;inset:0;width:100%;height:100%;opacity:1;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent;border:0;font-size:16px;z-index:1}
.otp-cells{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.otp-cells span{height:60px;border-radius:16px;background:rgba(244,240,231,.08);border:1px solid transparent;display:grid;place-items:center;font-size:27px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;transition:border-color .15s,box-shadow .15s,background-color .15s}
.otp-cells span.is-filled{background:rgba(244,240,231,.12)}
.otp.is-focus .otp-cells span.is-active{border-color:rgb(var(--acc,65,32,248));box-shadow:0 0 0 4px rgba(var(--acc,65,32,248),.28)}
.otp.is-invalid .otp-cells span{border-color:#ff8a80}
#flow[data-page="code"] .auth .error{text-align:center;margin:12px 0 0}
#flow[data-page="code"] .sent{margin:12px 0 0;text-align:center;font-size:14px;line-height:1.45;color:#b9f6c9}
#flow[data-page="code"] .sent:empty{display:none}
#flow[data-page="code"] .hint{margin:16px 0 0;text-align:center;font-size:14px;line-height:1.45;color:rgba(244,240,231,.72)}
#flow[data-page="code"] .wait{margin:6px 0 0;text-align:center;font-size:14px;color:rgba(244,240,231,.62);font-variant-numeric:tabular-nums}
#flow[data-page="code"] .resend{align-self:center;display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:10px;padding:0 18px;border-radius:999px;border:1px solid rgba(244,240,231,.28);background:none;color:#fff;font-weight:800;font-size:15px}
#flow[data-page="code"] .resend svg{width:18px;height:18px}
#flow[data-page="code"] .resend:active{background:rgba(244,240,231,.08)}
@media(max-width:360px){.otp-cells{gap:6px}.otp-cells span{height:54px;font-size:24px}}
/* A short visible area (small phone, keyboard open; the sheet follows it): the title row stays put, only the gaps tighten. */
@media(max-height:480px){#flow[data-layout="form"] h1{margin-bottom:18px}#flow[data-page="code"] .intro{margin-bottom:14px}.auth .note{margin-top:8px}}
.toast{position:fixed;left:50%;top:calc(72px + var(--sat,env(safe-area-inset-top)));transform:translate(-50%,-12px);opacity:0;z-index:60;pointer-events:none;
  background:#f4f0e7;color:#16151a;padding:11px 18px;border-radius:999px;font-weight:800;font-size:15px;box-shadow:0 12px 30px -12px rgba(0,0,0,.6);transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.toast{transition:none}}
/* Quick fill (12.10.2026): once a name is typed, common domains as chips under the field; a tap completes the address. */
.auth .domains{display:flex;gap:8px;margin:10px 0 0;overflow-x:auto;scrollbar-width:none}
.auth .domains::-webkit-scrollbar{display:none}
.auth .domain{flex:none;min-height:44px;padding:0 14px;border:0;border-radius:999px;background:rgba(244,240,231,.1);color:#fff;font-size:14px;font-weight:700}
.auth .domain:active{background:rgba(244,240,231,.18)}
/* Mail entry and exit share animateMail in flashcards.js; header controls remain stationary. */
@media(max-width:360px){#flow[data-layout="form"] header{right:16px}}
/* Sign-in top row (Vlad 12.10.2026): «←» on the left goes one step back, «×» on the right closes the window; the title follows
   the arrow on the same line. Both buttons sit where the game's «←» and «⚙» sit (22 px from the top, 20 px from the sides). */
#flow[data-layout="form"] header{left:20px;right:20px;justify-content:space-between;pointer-events:none}
#flow[data-layout="form"] header .icon{pointer-events:auto}
#flow[data-layout="form"] #back{background:rgba(244,240,231,.08);color:#f4f0e7}
#flow[data-layout="form"] h1{margin-left:56px}
@media(max-width:360px){#flow[data-layout="form"] header{left:16px;right:16px}#flow[data-layout="form"] h1{margin-left:52px}}
/* Leaving sign-in (12.10.2026): the mirror of the opening — lines sink and fade, last first; «←» fades with them, «×» stays.
   The welcome then surfaces: a short fade and rise (opacity only on the card fan, so its 3D is never flattened). */
#flow.is-leaving #back{transition:opacity .2s;opacity:0}
@keyframes welcome-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes welcome-fade{from{opacity:0}to{opacity:1}}
#content.is-returning>*{animation:welcome-in .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
#content.is-returning>.welcome{animation-name:welcome-fade}
@media(prefers-reduced-motion:reduce){#flow.is-leaving #content *,#content.is-returning>*{animation:none}}
/* Titles centred like «Флешкартки» on the welcome (Vlad 12.10.2026): 18 px, centred between «←» and «×» on their line
   (centre 44 px from the top); white, since here it names the step. The code step's «Надіслали на …» centres with it. */
#flow[data-layout="form"] h1{font-size:18px;line-height:32px;letter-spacing:-.01em;text-align:center;margin:16px 56px 28px}
#flow[data-page="code"] h1{margin-bottom:28px}
#flow[data-page="code"] .intro{text-align:center}
@media(max-width:360px){#flow[data-layout="form"] h1{margin-left:52px;margin-right:52px}}
@media(max-height:480px){#flow[data-layout="form"] h1{margin-bottom:20px}}
/* The address is the «change» control (Vlad 12.10.2026): a centred pill «address ✎» under «Надіслали код на», in the style
   of the domain chips; a tap goes back to «Вхід» with the same address. A long address is cut with «…», never wrapped. */
#flow[data-page="code"] .intro{margin-bottom:8px}
#flow[data-page="code"] .email-chip{align-self:center;display:inline-flex;align-items:center;gap:8px;max-width:100%;min-height:40px;margin:0 0 22px;padding:0 14px 0 16px;border:0;border-radius:999px;background:rgba(244,240,231,.1);color:#fff;font-size:15px}
#flow[data-page="code"] .email-chip .email{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}
#flow[data-page="code"] .email-chip svg{flex:none;width:16px;height:16px;color:rgba(244,240,231,.72)}
#flow[data-page="code"] .email-chip:active{background:rgba(244,240,231,.18)}
@media(max-height:480px){#flow[data-page="code"] .email-chip{margin-bottom:14px}}
/* Every button answers a press (Vlad 12.10.2026): a little growth that springs back, no colour change — the separate `scale`
   property adds to a button's own transform (the chosen subject keeps its 1.15). Icons 1.08, wide buttons 1.03.
   Text links («Вже є акаунт? Увійти», «Створити акаунт», «Змінити») are left out. */
:is(.ww-arrow,.ww-dots button,.domain,.fl-retry,.fl-backbtn,.primary,.secondary,.resend,.email-chip){transition:scale .45s cubic-bezier(.2,1.3,.35,1),transform .3s ease,opacity .3s ease,background-color .2s ease}
:is(.ww-arrow,.ww-dots button,.domain,.fl-retry,.fl-backbtn):not(:disabled):active{scale:1.08;transition:scale .14s cubic-bezier(.2,.9,.3,1)}
:is(.primary,.secondary,.resend,.email-chip):not(:disabled):active{scale:1.03;transition:scale .14s cubic-bezier(.2,.9,.3,1)}
#flow .primary:active{transform:none}
#flow .primary{transition:scale .45s cubic-bezier(.2,1.3,.35,1),background-color .3s ease,color .3s ease,box-shadow .3s ease!important}
#flow .primary:not(:disabled):active{transition:scale .14s cubic-bezier(.2,.9,.3,1)!important}
#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"]) .welcome+.actions .primary:active,.auth .actions .primary:active{background:#4120f8}
#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"]) .welcome+.actions .primary.is-notify:active{background:#fff}
.auth .domain:active,#flow[data-page="code"] .email-chip:active{background:rgba(244,240,231,.1)}
#flow[data-page="code"] .resend:active{background:none}
@media(prefers-reduced-motion:reduce){:is(.ww-arrow,.ww-dots button,.domain,.fl-retry,.fl-backbtn,.primary,.secondary,.resend,.email-chip):active{scale:none}}
/* Subject switch (12.10.2026): the plate's icon and the «Скоро» pill blend to the new colours instead of jumping. */
.fg-icon,.fg-count{transition:background-color .3s ease,color .3s ease}
#start .lbl{display:inline-block}
/* ===== iOS components — values from /ios-tokens.css, read out of Apple's iOS 27 UI Kit (Vlad 12.10.2026: 1:1) =====
   Liquid Glass control (welcome «×», sign-in «←» / «×», carousel arrows): #999 17 % fill, frost 6, hairline rim, light inner
   edges, soft shadow, vibrant label; on touch it scales, bounces and shimmers. Titles: Headline, white, centred. */
#flow :is(.close,#back):not(#_),.ww-arrow:not(#_){background:var(--ios-glass-fill);-webkit-backdrop-filter:var(--ios-glass-frost);backdrop-filter:var(--ios-glass-frost);
  border:0;box-shadow:var(--ios-glass-shadow),var(--ios-glass-rim),var(--ios-glass-edges);color:var(--ios-vibrant-label)}
#flow :is(.close,#back):not(#_){position:relative;width:var(--ios-glass-size);height:var(--ios-glass-size);margin:0;border-radius:50%;transition:transform .55s var(--ios-spring),background-color .3s ease}
#flow :is(.close,#back):not(#_) svg{width:var(--ios-glass-icon);height:var(--ios-glass-icon);transform:none}
#flow :is(.close,#back):not(#_):active{transform:scale(var(--ios-press-scale));background:var(--ios-glass-fill-pressed);transition:transform .16s cubic-bezier(.2,.9,.3,1),background-color .12s ease}
#flow[data-layout="form"] h1:not(#_){font:var(--ios-headline) Nunito,sans-serif;line-height:32px;letter-spacing:var(--ios-headline-ls);color:var(--ios-label)}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-brand:not(#_){font:var(--ios-headline) Nunito,sans-serif;line-height:18px;letter-spacing:var(--ios-headline-ls);color:var(--ios-label)}
/* Grey capsules — domain chips and the address pill: Fills/Secondary */
:is(.auth .domain,#flow[data-page="code"] .email-chip):not(#_),:is(.auth .domain,#flow[data-page="code"] .email-chip):not(#_):active{background:var(--ios-secondary-fill);color:var(--ios-label)}
@media(prefers-reduced-motion:reduce){#flow :is(.close,#back):not(#_):active{transform:none}}
/* No text selection in the flashcards flow (Vlad 12.10.2026); the e-mail and code fields stay editable */
html,body,body *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
:is(input,textarea){-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
/* «Повідомити, коли буде» in the sign-in style (Vlad 12.10.2026): same dark sheet, centred title, pill field, blue button */
#flow[data-page="notified"] .intro{color:rgba(244,240,231,.66);font-size:16px;line-height:1.45;margin:-14px 0 20px;text-align:center}
#flow[data-page="notified"] .intro .email{color:#fff;font-weight:700}
#flow[data-page="notified"] .notify-done{margin:18px auto 0;background:rgba(202,255,79,.14);color:#caff4f}
#flow[data-page="notified"] .text-link{color:rgba(244,240,231,.7)}
/* ===== Night batch (Vlad 12.10.2026) ===== */
/* screen transitions: the old content leaves as a ghost while the new one rises in */
.screen-ghost{position:absolute;pointer-events:none;z-index:1;display:flex;flex-direction:column}
/* «Вхід ↔ Новий акаунт»: words roll inside their own box */
.is-rolling{position:relative;overflow:hidden}
.roll-now{display:inline-block}
.roll-was{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;white-space:nowrap;pointer-events:none}
/* a remembered e-mail appears in place — the field fades in, it does not slide up with its text */
/* no focus rings on things focused by the code (titles, sheets); keyboard focus still shows */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
:focus:not(:focus-visible){outline:none}

/* ===== Responsive grid contract — flashcards flow =====
   One rail, one gutter, one vertical rhythm. Values scale with viewport size;
   fixed pixels remain only for touch targets and icon optical sizes. */
:root{
  --flow-gutter:clamp(16px,5vw,24px);
  --flow-bottom:max(20px,env(safe-area-inset-bottom));
  --flow-gap:clamp(8px,2dvh,20px);
}
#flow.sheet:not(#_){
  width:100%;
  max-width:440px;
  min-width:0;
  margin:0 auto;
  padding-inline:var(--flow-gutter);
  padding-block-start:max(12px,var(--sat,env(safe-area-inset-top)));
  padding-block-end:var(--flow-bottom);
  overflow-x:clip;
}
#flow.sheet:not(#_) #content{width:100%;min-width:0}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-worlds,
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-worlds .welcome-fan,
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-worlds .welcome-copy,
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-worlds+.actions{min-width:0}
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-worlds .welcome-hero{
  width:auto;
  margin-inline:calc(-1 * var(--flow-gutter));
  min-height:clamp(220px,38dvh,360px);
}
#flow:is([data-page="welcome"],[data-page="result"]) .first-game,
#flow:is([data-page="welcome"],[data-page="result"]) .welcome-worlds+.actions{width:100%;min-width:0}
#flow:is([data-page="welcome"],[data-page="result"]) .first-game{gap:clamp(8px,3vw,12px);padding-inline:clamp(10px,3.5vw,14px)}
#flow:is([data-page="welcome"],[data-page="result"]) .fg-text{min-width:0}
#flow:is([data-page="welcome"],[data-page="result"]) .fg-count{max-width:42%;overflow:hidden;text-overflow:ellipsis}
#flow:is([data-page="welcome"],[data-page="result"]) .ww-dots{width:100%;max-width:100%;overflow:clip}
#flow:is([data-page="welcome"],[data-page="result"]) .ww-arrow{width:clamp(36px,10vw,48px);height:clamp(36px,10vw,48px)}
@media(max-width:360px){
  #flow.sheet:not(#_){--flow-gutter:16px}
  #flow:is([data-page="welcome"],[data-page="result"]) .first-game{margin-top:clamp(12px,3dvh,18px)}
  #flow:is([data-page="welcome"],[data-page="result"]) .fg-count{max-width:38%;font-size:clamp(12px,3.7vw,14px);padding-inline:10px}
}
@media(min-width:600px){
  html:not(.embedded) #flow.sheet:not(#_){margin:24px auto;min-height:min(900px,calc(100dvh - 48px));border-radius:28px 28px 0 0}
  html.embedded #flow.sheet:not(#_){margin:0 auto;min-height:100dvh;border-radius:0}
}


/* Embedded flow: let the parent sheet own the viewport-wide background so the
   440px content rail and the outer gutters share one continuous surface. */
html.embedded:has(#flow:is([data-page="welcome"],[data-page="result"])),
html.embedded:has(#flow:is([data-page="welcome"],[data-page="result"])) body,
html.embedded:has(#flow[data-layout="form"]),
html.embedded:has(#flow[data-layout="form"]) body{
  background:transparent!important;
}
html.embedded:has(#flow:is([data-page="welcome"],[data-page="result"])) #flow,
html.embedded:has(#flow[data-layout="form"]) #flow{
  background:transparent;
}

/* Shared navigation rail (14.10.2026): welcome and mail screens use the same
   top row as the classic game. The content stays in its 440px reading rail;
   only the navigation row expands to the game's measured 688px rail on wide
   screens, then contracts to the viewport gutter on phones. */
#flow:is([data-page="welcome"],[data-page="result"]) header,
#flow[data-layout="form"] header{
  left:50%;
  right:auto;
  width:min(688px,calc(100vw - 32px));
  transform:translateX(-50%);
}
#flow:is([data-page="welcome"],[data-page="result"]) header{right:auto}
@media(max-width:360px){
  #flow:is([data-page="welcome"],[data-page="result"]) header,
  #flow[data-layout="form"] header{width:calc(100vw - 32px)}
}
/* Welcome has one action in its shared top row; keep it on the game header's right anchor. */
#flow:is([data-page="welcome"],[data-page="result"]) header{justify-content:flex-end}
/* The shared nav rail intentionally reaches beyond the reading rail; do not clip its touch targets. */
#flow:is([data-page="welcome"],[data-page="result"]),
#flow[data-layout="form"]{overflow-x:visible}
/* Keep the wide navigation row visible after the responsive rail's clip rule. */
#flow.sheet:is([data-page="welcome"],[data-page="result"]),
#flow.sheet[data-layout="form"]{overflow-x:visible!important}

/* Рамка фокусу — лише для клавіатури (Vlad 14.10.2026): автоматичний фокус (вікно виходу, перелінк) на телефоні малював лаймову рамку.
   Клас .kbd ставить Tab, знімає будь-який дотик чи клік; поля вводу свій фокус зберігають. */
html:not(.kbd) :focus-visible:not(input,textarea,select){outline:none!important}

/* Один фон для всього світу флешкарток (Vlad 14.10.2026): вітальний екран, вхід/код/«Повідомити», завантаження й гра —
   той самий шар, що .bg у грі: основа, віньєтка, зерно і ОДНЕ світло за нижнім правим кутом у кольорі предмета (--acc).
   Лайм прибрано з фону: у грі він — сигнал «Знаю», у фоні він розмивав би цей сигнал. Шар живе тут, а не в шторці
   перелінку, тож однаковий і в шторці, і на окремій сторінці. Розміри — від довшої сторони екрана (vmax). */
:root:has(#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"],[data-page="card"])),:root:has(#flow[data-layout="form"]){background:radial-gradient(125% 85% at 50% 8%,#17161b 0%,#131218 46%,#100f16 100%) fixed #100f16!important}
:root:has(#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"],[data-page="card"])) body,:root:has(#flow[data-layout="form"]) body,
#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"],[data-page="card"]):not(#_),#flow[data-layout="form"]:not(#_){background:transparent!important}
.fx-bg{display:none;position:fixed}
:root:has(#flow:is([data-page="welcome"],[data-page="result"],[data-page="home"],[data-page="topic"],[data-page="card"])) .fx-bg,:root:has(#flow[data-layout="form"]) .fx-bg{display:block}
:root .fx-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
/* Без filter:blur — на iPhone розмиття такого шару перераховується на кожному кадрі будь-якої анімації; м'який край дає сам градієнт.
   Два шари світла: колір предмета перетікає прозорістю, а не перемальовуванням (Vlad 14.10.2026). */
:root .fx-bg .glow{position:absolute;width:60vmax;height:60vmax;right:-24vmax;bottom:-30vmax;border-radius:50%;background:radial-gradient(circle,rgba(var(--gc,65,32,248),.20),rgba(var(--gc,65,32,248),.07) 45%,transparent 70%);opacity:0;transition:opacity .55s ease;will-change:opacity}
:root .fx-bg .glow.on{opacity:1}
/* Головна: те саме синє світло і розташування, що в завантаженні/грі; працює й після прямого входу без welcome. */
:root:has(#flow[data-page="home"]) .fx-bg .glow:first-child{--gc:65,32,248!important;opacity:1}
:root:has(#flow[data-page="home"]) .fx-bg .glow:nth-child(2){opacity:0}
:root .fx-bg .vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.55))}
:root .fx-bg .grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Іконки предметів (Vlad 14.10.2026): вибір змінюється миттєво, без перетікання кольору (залишається лише відгук натиску);
   кільце вибраної іконки (3px) не обрізається рядком — 4px запасу, компенсовані від'ємним відступом, тож розкладка не зсувається.
   Іконка плашки «Перша гра» перефарбовується разом із заміною (--acc на .first-game), без власного переходу кольору. */
.ww-dots button:not(#_){transition:scale .45s cubic-bezier(.2,1.3,.35,1)}
#flow:is([data-page="welcome"],[data-page="result"]) .ww-dots:not(#_){padding-inline:4px;padding-bottom:4px;margin-bottom:-4px}
.fg-icon:not(#_){transition:none}
.ww-dots button:not(#_):not(:disabled):active{transition:scale .14s cubic-bezier(.2,.9,.3,1)}
.first-game>*,#start .lbl{will-change:transform,opacity}
/* Плашка «Перша гра» однієї висоти для всіх предметів (Vlad 14.10.2026): «Перша гра без реєстрації» займає два рядки, «Картки готуються» —
   один, і все над плашкою стрибало на 8–11 px при перегортанні. Текстовий блок завжди резервує два рядки підпису + назву. */
#flow:is([data-page="welcome"],[data-page="result"]) .fg-text:not(#_){justify-content:center;min-height:calc(2 * 1.2 * 12.5px + 3px + 1.2 * 17px)}
@media(max-height:620px){#flow:is([data-page="welcome"],[data-page="result"]) .fg-text:not(#_){min-height:calc(2 * 1.2 * 11.5px + 3px + 1.2 * 15.5px)}}
/* Екран «Повідомити, коли буде» — у кольорі свого предмета, без фірмового синього: кнопка біла (як «Повідомити, коли буде»),
   поле у фокусі — колір предмета. «Грати українську» на екрані «Ви в списку» лишається синьою — це колір української. */
#flow[data-page="notify"] .actions .primary:not(#_){background:#fff;color:#191920;box-shadow:0 12px 28px -14px rgba(255,255,255,.35)}
#flow[data-page="notify"] .actions .primary:not(#_):active{background:#ececf1;color:#191920}
#flow[data-page="notify"] .pill{caret-color:rgb(var(--acc,65,32,248))}
/* Основа фону без синього відливу (Vlad 14.10.2026: поруч із кольоровим світлом центр читався як синьо-біла пляма): #17161b→#131218→#100f16
   замість #1b1922→#161520 — у links.css (шторка), тут (.fx-bg, .fl-load) і в грі (easy-brand.css) однаково. */
#flow[data-page="notify"] .pill:focus:not(#_){border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.22);caret-color:#fff}   /* обводка в колір кнопки — біла */
html{overscroll-behavior:none}   /* no scroll chaining into the page that hosts the sheet (14.10.2026) */
/* iOS: no scroll chaining from any nested area into the page (React Aria: applied before touchstart, iOS 26). */
@layer{*{overscroll-behavior:contain}}
#flow:focus{outline:none}
/* «★ Збережене (N)» на вітальному екрані — тихий рядок над «Увійти» (специфікація ядра, 15.10.2026) */
#flow:is([data-page="welcome"],[data-page="result"]) .saved-link{min-height:40px;padding:6px 10px 0}
#flow:is([data-page="welcome"],[data-page="result"]) .saved-link b{color:#f4f0e7;text-decoration:none}

/* Екран результатів (Влад 15.10.2026) — сторінка оболонки, та сама розмітка, що вітальний екран: .welcome-brand, .welcome-hero,
   .ww-name, плашка .first-game, .actions .primary. Усі правила вітального екрана вище поширено на [data-page="result"].
   Тут лише те, чого на вітальному екрані немає: стос сорочок у героя (той самий .fl-deck, що на екрані завантаження) і два факти. */
#flow[data-page="result"] .ww-stage>.fl-deck{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.result-facts{display:flex;justify-content:center;gap:8px;margin:10px 0 0}
#flow[data-page="result"] .result-facts .fg-count{max-width:none}
.result-facts b{font-weight:800}.result-facts .is-know b{color:#caff4f}.result-facts .is-rep b{color:#a99bff}
#flow[data-page="result"] .first-game .fg-text b{white-space:normal}
#flow[data-page="result"] .first-game .fg-text small{font-weight:600;line-height:1.3}
#flow[data-page="result"] .actions .note{color:rgba(244,240,231,.62);text-align:center;margin:12px 0 0}

/* Екран після гри (Влад 15.10.2026; реф — «Реф дизайн/Воронка демо/результат-рулетка.html»). Ритм: «Гру завершено» на місці назви «Флешкартки» (той самий стиль) + результат 14 →
   карусель (одна картка в фокусі) → індикатор → «150 карток» 36 + підпис 16 → кнопка → «Вхід за кодом з пошти». Один акцент — кнопка. */
#flow[data-page="result"] .rs{justify-content:flex-start;min-height:0}
#flow[data-page="result"] .rs-head{flex:none;padding-top:23px;text-align:center}
#flow[data-page="result"] .rs-head h1:not(#_){margin:0;font:var(--ios-headline) Nunito,sans-serif;line-height:18px;letter-spacing:var(--ios-headline-ls);color:var(--ios-label)}
#flow[data-page="result"] .rs-facts{margin:8px 0 0;font-size:15px;line-height:20px;font-weight:700;color:rgba(244,240,231,.62)}
#flow[data-page="result"] .rs-facts b{color:#f4f0e7;font-weight:800}
#flow[data-page="result"] .rs-stage{--cw:214px;position:relative;flex:1 1 auto;min-height:250px;margin:0 calc(var(--flow-gutter,20px) * -1);overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
#flow[data-page="result"] .rs-stage:active{cursor:grabbing}
/* Тінь під карткою не обрізається (Влад 02.11.2026): карусель обрізаємо лише з боків, униз тінь лягає вільно. */
@supports(overflow:clip){#flow[data-page="result"] .rs-stage{overflow-x:clip;overflow-y:visible}}
.rc-slot{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:10/13;transform:translate3d(0,0,0);margin:0;translate:-50% -50%;will-change:transform,opacity}
.rc-card{position:absolute;inset:0;--u:calc(var(--cw) / 344);border-radius:calc(var(--u) * 30);overflow:hidden;color:#191920;
  background:radial-gradient(120% 70% at 12% 0%,rgba(65,32,248,.10),transparent 46%),linear-gradient(168deg,#fff,#eef0f3);box-shadow:0 18px 40px -18px rgba(0,0,0,.55);
  display:flex;flex-direction:column;padding:calc(var(--u) * 13) calc(var(--u) * 14) 0}
.rc-md{position:relative;flex:none;aspect-ratio:316/234;border-radius:calc(var(--u) * 18);overflow:hidden}
.rc-md svg{display:block;width:100%;height:100%}
.rc-tag{position:absolute;right:0;top:0;padding:calc(var(--u) * 7) calc(var(--u) * 12) calc(var(--u) * 8) calc(var(--u) * 13);border-radius:0 0 0 calc(var(--u) * 14);background:#f7f7f9;
  font-size:calc(var(--u) * 13);font-weight:800;color:#191920;display:flex;align-items:center;gap:calc(var(--u) * 4)}
.rc-tag svg{width:calc(var(--u) * 13);height:calc(var(--u) * 13)}
.rc-q{flex:1;display:grid;place-items:center;text-align:center;padding:0 7%;font-size:calc(var(--u) * 25);line-height:1.2;font-weight:800}
.rc-q em{font-style:normal;color:#4120f8}
.rc-h{flex:none;padding-bottom:calc(var(--u) * 20);text-align:center;font-size:calc(var(--u) * 12.5);font-weight:800;color:rgba(25,25,32,.5)}
/* справжня картка з колоди (27.10.2026): та сама лицьова сторона, що в грі (EasyCardFace), розмір — від ширини слота */
.rc-real{--ef-w:var(--cw);--u:calc(var(--cw) / 344);font-family:EasyNunito,Nunito,system-ui,sans-serif}
#flow[data-page="result"] .rs-dots{flex:none;display:flex;justify-content:center;gap:6px;margin-top:4px}
#flow[data-page="result"] .rs-dots i{width:6px;height:6px;border-radius:3px;background:rgba(244,240,231,.22);transition:width .45s cubic-bezier(.22,.7,.3,1),background-color .45s}
#flow[data-page="result"] .rs-dots i.on{width:20px;background:rgba(244,240,231,.85)}
#flow[data-page="result"] .rs-150{flex:none;margin-top:20px;text-align:center}
#flow[data-page="result"] .rs-150 b{display:block;font-size:36px;line-height:1;font-weight:900;letter-spacing:-.03em;color:#f4f0e7}
#flow[data-page="result"] .rs-150 span{display:block;margin-top:6px;font-size:16px;font-weight:700;color:rgba(244,240,231,.62)}
#flow[data-page="result"] .welcome+.actions{padding-top:24px}
#flow:is([data-page="result"],[data-page="home"],[data-page="topic"]) .welcome+.actions .note{margin-top:12px;text-align:center;font-size:13.5px;font-weight:700;color:rgba(244,240,231,.42)}
@media(max-height:700px){#flow[data-page="result"] .rs-stage{min-height:200px}#flow[data-page="result"] .rs-150 b{font-size:30px}}
@media(prefers-reduced-motion:reduce){#flow[data-page="result"] .rs-dots i{transition:none}}


/* Кабінет (Влад 15.10.2026; flash-app.js): головна /cards — предмет і профіль у рядку навігації (той самий рядок, що «Флешкартки» і ✕),
   параметри гри, теми; тема — картки; перегляд картки поза грою. Корінь — .welcome, тож кнопка внизу, примітка й відступи —
   ті самі правила, що на вітальному екрані й результаті. Значення — з ios-tokens.css і плашки .first-game. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#flow:is([data-page="home"],[data-page="topic"],[data-page="card"]) .handle{display:none}
#flow[data-page="home"] header{display:none}
#flow:is([data-page="topic"],[data-page="card"]) header{position:absolute;top:22px;left:20px;right:20px;display:flex;justify-content:space-between;margin:0;z-index:5;pointer-events:none}
#flow:is([data-page="topic"],[data-page="card"]) header .icon{pointer-events:auto}
#flow:is([data-page="topic"],[data-page="card"]) #back{background:rgba(244,240,231,.08);color:#f4f0e7}
@media(max-width:360px){#flow:is([data-page="topic"],[data-page="card"]) header{left:16px;right:16px}}
.ap{color:#f4f0e7}
.ap-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 calc(var(--flow-gutter,24px) * -1);padding:0 var(--flow-gutter,24px) 12px;scrollbar-width:none;-webkit-mask:linear-gradient(#000 calc(100% - 18px),transparent);mask:linear-gradient(#000 calc(100% - 18px),transparent)}
.ap-scroll::-webkit-scrollbar{display:none}
.ap-scroll:focus{outline:none}
/* рядок навігації: предмет ліворуч (плитка — .fg-icon), профіль праворуч (скляна кнопка 44, як ✕) */
.ap-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 14px}
.ap-subj{display:flex;align-items:center;gap:12px;min-width:0;min-height:52px;margin-left:-6px;padding:4px 10px 4px 6px;border:0;border-radius:16px;background:none;color:#f4f0e7;text-align:left;transition:background-color .2s ease}
.ap-subj:active{background:rgba(244,240,231,.06)}
.ap-subj>svg{flex:none;width:18px;height:18px;color:rgba(244,240,231,.6)}
.ap-subj-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ap-subj-t b{font-size:17px;line-height:20px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-subj-t small{font-size:13px;line-height:16px;font-weight:700;color:rgba(244,240,231,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:rgba(var(--acc),.2);color:color-mix(in srgb,rgb(var(--acc)) 78%,#fff)}
.ap-ic svg{width:22px;height:22px}
.ap-me{flex:none;display:grid;place-items:center;width:var(--ios-glass-size);height:var(--ios-glass-size);border:0;border-radius:50%;padding:0;background:var(--ios-glass-fill);-webkit-backdrop-filter:var(--ios-glass-frost);backdrop-filter:var(--ios-glass-frost);
  box-shadow:var(--ios-glass-rim),var(--ios-glass-edges),var(--ios-glass-shadow);color:var(--ios-vibrant-label);font-size:17px;font-weight:800;line-height:1;transition:transform .55s var(--ios-spring),background-color .3s ease}
.ap-me:active{transform:scale(var(--ios-press-scale));background:var(--ios-glass-fill-pressed);transition:transform .16s cubic-bezier(.2,.9,.3,1),background-color .12s ease}
.ap-me.big{width:52px;height:52px;font-size:21px}
/* параметри гри — плашка .first-game: сегменти iOS (нейтральні: один кольоровий елемент — кнопка) */
.ap-setup{display:flex;flex-direction:column;gap:14px;padding:14px;border:1px solid rgba(244,240,231,.1);border-radius:18px;background:rgba(244,240,231,.06)}
.ap-field{display:flex;flex-direction:column;gap:8px}
.ap-label{font-size:13px;line-height:16px;font-weight:700;color:rgba(244,240,231,.6)}
.ap-seg{display:flex;gap:2px;padding:2px;border-radius:12px;background:var(--ios-tertiary-fill)}
.ap-seg button{flex:1 1 0;min-width:0;min-height:40px;padding:0 6px;border:0;border-radius:10px;background:none;color:rgba(244,240,231,.78);font-size:15px;line-height:1;font-weight:800;white-space:nowrap;transition:background-color .25s ease,color .25s ease}
.ap-seg button[aria-checked="true"]{background:var(--ios-gray2);color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.ap-picks{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;margin-top:-4px;padding:0 12px 0 14px;border:0;border-radius:12px;background:rgba(244,240,231,.06);color:#f4f0e7;font-size:15px;font-weight:800;text-align:left}
.ap-picks svg{width:16px;height:16px;color:rgba(244,240,231,.5)}
/* теми */
.ap-h2{display:flex;align-items:baseline;gap:8px;margin:24px 0 10px;font-size:20px;line-height:24px;font-weight:900;letter-spacing:-.01em}
.ap-h2 span{font-size:15px;font-weight:800;color:rgba(244,240,231,.5)}
.ap-list,.ap-cards,.ap-sheet-list,.ap-group,.rs-rep-list{list-style:none;margin:0;padding:0}
.ap-list{display:flex;flex-direction:column;gap:8px}
.ap-row{display:flex;align-items:center;gap:12px;width:100%;min-height:68px;padding:12px 12px 12px 14px;border:1px solid rgba(244,240,231,.08);border-radius:16px;background:rgba(244,240,231,.04);color:#f4f0e7;text-align:left;transition:background-color .2s ease}
.ap-row:active{background:rgba(244,240,231,.09)}
.ap-row>svg{flex:none;width:16px;height:16px;color:rgba(244,240,231,.4)}
.ap-row-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ap-row-t b{font-size:16px;line-height:20px;font-weight:800;text-wrap:pretty}
.ap-row-t small{font-size:13px;line-height:16px;font-weight:700;color:rgba(244,240,231,.55)}
.ap-meter{display:block;height:4px;margin-top:5px;border-radius:2px;background:rgba(244,240,231,.1);overflow:hidden}
.ap-meter i{display:block;height:100%;border-radius:2px;background:rgba(244,240,231,.7)}
/* предмет без карток */
.ap-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:0 8px}
.ap-empty-ic{display:grid;place-items:center;width:88px;height:88px;border-radius:26px;background:rgba(var(--acc),.2);color:color-mix(in srgb,rgb(var(--acc)) 78%,#fff)}
.ap-empty-ic svg{width:44px;height:44px}
.ap-empty h1{margin:8px 0 0;font-size:26px;line-height:1.15;font-weight:900;letter-spacing:-.02em;text-wrap:balance}
.ap-empty p{margin:0;font-size:16px;line-height:1.4;font-weight:700;color:rgba(244,240,231,.6);text-wrap:balance}
/* тема: заголовок під рядком навігації, картки списком */
.ap-head{padding:64px 0 16px}
.ap-eyebrow{margin:0 0 6px;font-size:13px;line-height:16px;font-weight:800;color:rgba(244,240,231,.55)}
.ap-head h1{margin:0;font-size:28px;line-height:1.12;font-weight:900;letter-spacing:-.02em;text-wrap:balance}
.ap-head h1:focus{outline:none}
.ap-sub{margin:8px 0 0;font-size:15px;line-height:20px;font-weight:700;color:rgba(244,240,231,.6)}
.ap-cards{display:flex;flex-direction:column;gap:8px}
.ap-card{position:relative;display:flex;flex-direction:column;gap:4px;width:100%;padding:13px 40px 13px 14px;border:1px solid rgba(244,240,231,.08);border-radius:16px;background:rgba(244,240,231,.04);color:#f4f0e7;text-align:left;transition:background-color .2s ease}
.ap-card:active{background:rgba(244,240,231,.09)}
.ap-card-q{font-size:16px;line-height:21px;font-weight:800;text-wrap:pretty}
.ap-card-q em{font-style:normal;color:#fff;text-decoration:underline;text-decoration-color:rgba(244,240,231,.35);text-underline-offset:3px}
.ap-card-a{font-size:14px;line-height:19px;font-weight:700;color:rgba(244,240,231,.58)}
.ap-card-star{position:absolute;right:14px;top:14px;width:18px;height:18px;color:#f4f0e7}
.ap-card-star svg{width:100%;height:100%;fill:currentColor}
/* закриті картки теми (27.10.2026): лише запитання й замок; не натискаються */
.ap-locked-h{display:flex;justify-content:space-between;align-items:baseline;margin:24px 2px 10px;font-size:15px;line-height:20px;font-weight:800;color:rgba(244,240,231,.62)}
.ap-locked-h span{font-variant-numeric:tabular-nums}
.ap-card.is-locked{cursor:default;background:rgba(244,240,231,.02)}
.ap-card.is-locked:active{background:rgba(244,240,231,.02)}
.ap-card.is-locked .ap-card-q{color:rgba(244,240,231,.62)}
.ap-card-lock{position:absolute;right:14px;top:50%;width:17px;height:17px;margin-top:-8.5px;color:rgba(244,240,231,.38)}
.ap-card-lock svg{width:100%;height:100%}
/* перегляд картки: картка гри (EasyCardFace) на всю доступну висоту, перевертається; пояснення — під нею */
.ap-view{flex:1;min-height:0;display:flex;flex-direction:column}
.cv-count{flex:none;margin:0;height:88px;padding-top:34px;text-align:center;font:var(--ios-headline) Nunito,sans-serif;line-height:20px;color:rgba(244,240,231,.8);font-variant-numeric:tabular-nums}
.cv-stage{position:relative;flex:1;min-height:220px;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.cv-card{position:absolute;left:50%;top:50%;width:var(--ef-w,300px);aspect-ratio:10/13;margin:calc(var(--ef-w,300px) * -.65) 0 0 calc(var(--ef-w,300px) * -.5);perspective:1400px}
.cv-flip{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .62s cubic-bezier(.22,1,.36,1)}
.cv-card.is-flipped .cv-flip{transform:rotateY(180deg)}
.cv-face{position:absolute;inset:0;border-radius:calc(var(--u) * 30);overflow:hidden;background:linear-gradient(168deg,#fff,#eef0f3);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 calc(var(--u) * 18) calc(var(--u) * 40) calc(var(--u) * -16) rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.2)}
.cv-face.ef-back{transform:rotateY(180deg)}
.cv-face .ef-xp{display:none}   /* пояснення читаємо під карткою — у ній йому тісно */
.cv-xp{flex:none;max-height:28vh;overflow-y:auto;margin:14px 0 0;padding:12px 14px;border:1px solid rgba(244,240,231,.1);border-radius:16px;background:rgba(244,240,231,.06)}
.cv-xp-l{margin:0 0 4px;font-size:13px;line-height:16px;font-weight:800;color:rgba(244,240,231,.55)}
.cv-xp-t{margin:0;font-size:15px;line-height:1.45;font-weight:700;color:#f4f0e7}
.cv-nav{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px}
.cv-btn{display:grid;place-items:center;width:var(--ios-glass-size);height:var(--ios-glass-size);border:0;border-radius:50%;background:rgba(244,240,231,.08);color:#f4f0e7}
.cv-btn svg{width:20px;height:20px}
#cv-prev svg{transform:scaleX(-1)}
.cv-btn:disabled{opacity:.3}
.cv-flipbtn{flex:1;min-height:var(--ios-glass-size);border:0;border-radius:999px;background:rgba(244,240,231,.08);color:#f4f0e7;font-size:16px;font-weight:800}
.cv-flipbtn:active,.cv-btn:not(:disabled):active{background:rgba(244,240,231,.14)}
/* результат в акаунті: без офера; картки на повторення списком */
#flow[data-page="result"] .rs-acc{justify-content:flex-start}
.rs-rep{flex:1;min-height:0;overflow-y:auto;margin:28px calc(var(--flow-gutter,24px) * -1) 0;padding:0 var(--flow-gutter,24px)}
.rs-rep-l{margin:0 0 10px;font-size:13px;line-height:16px;font-weight:800;color:rgba(244,240,231,.55)}
.rs-rep-list{display:flex;flex-direction:column;gap:8px}
.rs-rep-list li{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border:1px solid rgba(244,240,231,.08);border-radius:16px;background:rgba(244,240,231,.04)}
.rs-rep-list b{font-size:15px;line-height:20px;font-weight:800;color:#f4f0e7}
.rs-rep-list span{font-size:14px;line-height:19px;font-weight:700;color:rgba(244,240,231,.58)}
/* шторки кабінету — як шторки гри (§9а): повна ширина колонки, радіус 38, грабер 60×4 на 6 px, жест — тягнення за грабер або шапку */
.ap-scrim{position:fixed;inset:0;z-index:40;background:var(--ios-overlay);opacity:0;transition:opacity .44s ease}
.ap-scrim.show{opacity:1}
.ap-sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;width:100%;max-width:440px;max-height:min(84dvh,calc(100dvh - 16px));margin:0 auto;display:flex;flex-direction:column;
  border-radius:var(--ios-sheet-radius) var(--ios-sheet-radius) 0 0;background:var(--ios-sheet-bg);color:#f4f0e7;box-shadow:0 -10px 40px rgba(0,0,0,.4);
  padding:0 20px calc(20px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .44s cubic-bezier(.22,.7,.3,1)}
.ap-sheet.show{transform:none}
.ap-grab{position:relative;flex:none;width:var(--ios-grabber-w);height:var(--ios-grabber-h);margin:var(--ios-grabber-top) auto 0;border-radius:999px;background:var(--ios-grabber);touch-action:none}
.ap-grab::before{content:"";position:absolute;left:-200px;right:-200px;top:-6px;height:44px}
.ap-sheet-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--ios-hit);margin:6px 0 8px;touch-action:none;position:relative;z-index:1}   /* шапка лежить над невидимим полем грабера (як у шторках гри, §9а): ✕ не перехоплюється */
.ap-sheet-head h3{margin:0;font-size:20px;line-height:24px;font-weight:900;letter-spacing:-.01em}
.ap-x{display:grid;place-items:center;width:var(--ios-glass-size);height:var(--ios-glass-size);border:0;border-radius:50%;background:var(--ios-glass-fill);color:var(--ios-vibrant-label)}
.ap-x svg{width:var(--ios-glass-icon);height:var(--ios-glass-icon)}
.ap-sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:none;margin:0 -20px;padding:2px 20px 4px;scrollbar-width:none}
.ap-sheet-body::-webkit-scrollbar{display:none}
.ap-sheet-list{display:flex;flex-direction:column;gap:6px}
.ap-srow,.ap-pick{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--ios-row-min);padding:8px 12px 8px 8px;border:0;border-radius:16px;background:none;color:#f4f0e7;text-align:left;transition:background-color .2s ease}
.ap-srow:active,.ap-pick:active{background:rgba(244,240,231,.06)}
.ap-srow.is-cur{background:var(--ios-cell-bg)}
.ap-srow-t,.ap-pick-t,.ap-grow-t,.ap-who-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:is(.ap-srow-t,.ap-pick-t,.ap-grow-t,.ap-who-t) b{font-size:16px;line-height:20px;font-weight:800}
:is(.ap-srow-t,.ap-pick-t,.ap-grow-t,.ap-who-t) small{font-size:13px;line-height:17px;font-weight:700;color:rgba(244,240,231,.55)}
.ap-who-t b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-chip{flex:none;padding:6px 10px;border-radius:999px;background:var(--ios-tertiary-fill);font-size:12.5px;line-height:1;font-weight:800;color:rgba(244,240,231,.85)}
.ap-chip.is-active{background:rgba(244,240,231,.9);color:#191920}
.ap-chip.is-soon{color:rgba(244,240,231,.55)}
.ap-tick{flex:none;width:20px;height:20px;color:#f4f0e7}
.ap-tick svg{width:100%;height:100%}
.ap-who{display:flex;align-items:center;gap:14px;padding:6px 0 4px}
.ap-sec{margin:20px 4px 8px;font-size:13px;line-height:16px;font-weight:800;color:rgba(244,240,231,.55)}
.ap-group{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--ios-list-radius);background:var(--ios-cell-bg)}
.ap-group+.ap-group{margin-top:12px}
.ap-grow{display:flex;align-items:center;gap:12px;min-height:var(--ios-row-min);padding:10px 14px 10px 10px}
.ap-grow.is-soon{padding-left:16px}
.ap-group>*+*{border-top:.5px solid var(--ios-separator)}
.ap-foot{margin:8px 4px 0;font-size:13px;line-height:17px;font-weight:700;color:rgba(244,240,231,.5)}
.ap-sw{display:flex;align-items:center;gap:12px;width:100%;min-height:var(--ios-row-min);padding:10px 14px 10px 16px;border:0;background:none;color:#f4f0e7;text-align:left}
.ap-sw-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:16px;line-height:20px;font-weight:800}
.ap-sw-t small{font-size:13px;line-height:17px;font-weight:700;color:rgba(244,240,231,.55)}
.ap-switch{position:relative;flex:none;width:var(--ios-switch-w);height:var(--ios-switch-h);border-radius:999px;background:var(--ios-switch-off);transition:background-color .3s ease}
.ap-switch::after{content:"";position:absolute;top:2px;left:2px;width:var(--ios-knob-w);height:var(--ios-knob-h);border-radius:999px;background:#fff;transition:transform .35s var(--ios-spring)}
.ap-sw[aria-checked="true"] .ap-switch{background:var(--ios-accent)}
.ap-sw[aria-checked="true"] .ap-switch::after{transform:translateX(calc(var(--ios-switch-w) - var(--ios-knob-w) - 4px))}
.ap-out{width:100%;min-height:var(--ios-row-min);border:0;background:none;color:#ff453a;font-size:16px;font-weight:800}
.ap-pick-tools{display:flex;gap:16px;margin:0 4px 8px}
.ap-link{min-height:36px;padding:0;border:0;background:none;color:rgba(244,240,231,.8);font-size:15px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.ap-box{display:grid;place-items:center;flex:none;width:26px;height:26px;margin-left:4px;border-radius:8px;border:2px solid rgba(244,240,231,.35);color:transparent;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.ap-box svg{width:16px;height:16px}
.ap-pick[aria-checked="true"] .ap-box{background:#f4f0e7;border-color:#f4f0e7;color:#191920}
.ap-sheet-actions{flex:none;padding-top:12px}
.ap-sheet-actions .primary{width:100%;min-height:54px;border:0;border-radius:999px;background:#4120f8;color:#fff;font-size:17px;font-weight:800;box-shadow:0 12px 28px -12px rgba(65,32,248,.75)}
.ap-sheet .ap-sheet-actions{order:3}
@media(prefers-reduced-motion:reduce){.ap-sheet,.ap-scrim,.cv-flip,.ap-switch::after{transition:none}}
/* кабінет — рівно на висоту екрана: список прокручується всередині, кнопка «Грати» завжди внизу (як на вітальному екрані) */
#flow.sheet:is([data-page="home"],[data-page="topic"],[data-page="card"]){height:100dvh;min-height:0}
#flow:is([data-page="home"],[data-page="topic"],[data-page="card"]) #content{min-height:0}
@media(min-width:600px){html:not(.embedded) #flow.sheet:is([data-page="home"],[data-page="topic"],[data-page="card"]):not(#_){height:min(900px,calc(100dvh - 48px))}}
.rs-rep{-webkit-mask:linear-gradient(transparent,#000 14px,#000 calc(100% - 18px),transparent);mask:linear-gradient(transparent,#000 14px,#000 calc(100% - 18px),transparent);padding-top:14px;padding-bottom:12px;margin-top:14px;scrollbar-width:none}
.rs-rep::-webkit-scrollbar{display:none}
.rs-rep-l span{color:rgba(244,240,231,.4)}
.rs-rep-list+.rs-rep-l{margin-top:20px}
/* Тост в один рядок: left:50% лишав йому половину ширини екрана, і «Прогрес збережено» ламався на два рядки (360 px) */
.toast{white-space:nowrap;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}
/* Перегляд картки: переворот — точно як у грі (classic-premium.css, T-119; Влад 18.10.2026: «у грі плавно, а тут ні»). Обидва боки — окремі
   шари заздалегідь (will-change), розведені translateZ, тож backface-visibility ховає зворот разом зі сценою всередині. Раніше невидимий бік
   вмикався (visibility) посеред повороту — браузер малював його саме в мить ребра, і переворот смикався. */
.cv-flip:not(#_){transition:transform .36s cubic-bezier(.22,.65,.3,1);will-change:transform}
.cv-face{will-change:transform}
.cv-face.ef-front{transform:translateZ(.4px)}
.cv-face.ef-back:not(#_){transform:rotateY(180deg) translateZ(.4px)}
/* Шапка головної (Влад 16.10.2026; реф — «Реф дизайн/Кабінет/головна-конструктор.html»): плитка предмета з міні-значком вибору ⌃⌄,
   назва і смуга прогресу на всю ширину до профілю. Меню предметів — як меню iOS: скляне вікно виростає з плитки. */
.ap-bar{gap:14px}
.ap-subj{flex:1;gap:12px;padding:4px;margin-left:-4px}
.ap-subj-t{flex:1;gap:8px}
.ap-icw{position:relative;flex:none}
.ap-sel{position:absolute;right:-5px;bottom:-5px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#3a3a3f;color:#f4f0e7;box-shadow:0 0 0 2.5px #141319;transition:transform .3s var(--ios-spring)}
.ap-sel svg{width:11px;height:11px}
.ap-subj:active .ap-sel,#flow.ap-menu-open .ap-sel{transform:scale(1.12)}
.ap-prog{display:block;width:100%;height:6px;border-radius:3px;background:rgba(244,240,231,.1);overflow:hidden}
.ap-prog i{display:block;height:100%;border-radius:3px;background:rgba(244,240,231,.78);transition:width .5s cubic-bezier(.22,.8,.28,1)}
#flow.ap-menu-open .ap-bar{position:relative;z-index:31}
#flow.ap-menu-open .ap-me{opacity:.35;transition:opacity .3s ease}
.ap-pscrim{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.35);opacity:0;transition:opacity .3s ease}
.ap-pscrim.show{opacity:1}
.ap-pop{position:absolute;z-index:32;left:12px;right:12px;padding:6px;border-radius:22px;background:rgba(44,44,48,.84);-webkit-backdrop-filter:blur(30px) saturate(1.6);backdrop-filter:blur(30px) saturate(1.6);
  box-shadow:0 0 0 .5px rgba(255,255,255,.12),0 24px 60px rgba(0,0,0,.55);transform:scale(.3);opacity:0;transition:transform .42s cubic-bezier(.34,1.4,.64,1),opacity .2s ease}
.ap-pop.show{transform:none;opacity:1}
.ap-prow{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:6px 10px 6px 6px;border:0;border-radius:14px;background:none;color:#f4f0e7;text-align:left}
.ap-prow:active,.ap-prow:focus-visible{background:rgba(244,240,231,.08)}
.ap-prow .ap-ic{width:36px;height:36px;border-radius:10px}.ap-prow .ap-ic svg{width:19px;height:19px}
.ap-prow-t{flex:1;min-width:0;display:flex;flex-direction:column}
.ap-prow-t b{font-size:15.5px;font-weight:800;line-height:19px}
.ap-prow-t small{font-size:12.5px;font-weight:700;line-height:16px;color:rgba(244,240,231,.6)}
.ap-prow .ap-tick{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.ap-pop,.ap-pscrim,.ap-sel{transition:none}}
/* Головна «Наступна гра» (Влад 16.10.2026; реф — «Реф дизайн/Кабінет/головна-простір.html»): колода з першою карткою гри,
   блок «Наступна гра», низ — квадратна кнопка налаштувань + «Грати» (заокруглення 18, як у Chess.com). */
.ap-home{display:flex;flex-direction:column;min-height:0}
.ap-stage{position:relative;flex:1;min-height:180px;display:grid;place-items:center}
.ap-stage::before{content:"";position:absolute;left:50%;top:48%;width:min(380px,110%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(var(--acc),.34),rgba(var(--acc),.1) 42%,transparent 68%);pointer-events:none}
.ap-deck{position:relative;width:var(--ef-w,220px);aspect-ratio:10/13;--u:calc(var(--ef-w,220px) / 344)}
.ap-dc{position:absolute;inset:0;border-radius:calc(var(--u) * 30);background:linear-gradient(168deg,#fff,#eef0f3);box-shadow:0 calc(var(--u) * 18) calc(var(--u) * 40) calc(var(--u) * -16) rgba(0,0,0,.6)}
.ap-dc.c2{transform:translateY(calc(var(--u) * 16)) scale(.94);filter:brightness(.8)}
.ap-dc.c3{transform:translateY(calc(var(--u) * 32)) scale(.88);filter:brightness(.62)}
.ap-dc.ap-top{overflow:hidden}
.ap-top .ef-media{position:relative}
.ap-ctag{position:absolute;right:0;top:0;padding:calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 9) calc(var(--u) * 13);border-radius:0 0 0 calc(var(--u) * 14);background:#fff;color:#191920;font-size:calc(var(--u) * 14);font-weight:800;line-height:1}
.ap-next{flex:none;margin-top:12px;padding:14px 16px;border-radius:var(--ios-list-radius);background:#1c1c1e}
.ap-nhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.ap-nhead span{font-size:13px;font-weight:800;color:rgba(235,235,245,.68)}
.ap-nhead b{font-size:17px;font-weight:900}
.ap-nrow{display:flex;align-items:center;gap:10px;min-height:32px;font-size:15px;font-weight:700}
.ap-nrow .tx{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-nrow b{font-size:15px;font-weight:900}
.ap-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#f4f0e7}
.ap-dot.is-rep{background:transparent;box-shadow:inset 0 0 0 2px #f4f0e7}
.ap-nempty{margin:0;font-size:15px;font-weight:700;color:rgba(235,235,245,.68)}
#flow[data-page="home"] .ap-dock{display:flex;flex-direction:row;gap:10px;padding-top:12px}
#flow[data-page="home"] .ap-dock .primary{flex:1;margin:0;border-radius:18px!important;min-height:56px}
.ap-sq{flex:none;width:56px;height:56px;display:grid;place-items:center;border:0;border-radius:18px;background:rgba(118,118,128,.24);color:#f4f0e7;transition:transform .15s ease,background-color .2s ease}
.ap-sq:active{transform:scale(.96);background:rgba(118,118,128,.34)}
.ap-sq svg{width:24px;height:24px}
.ap-sheet .ap-setup{margin-top:4px}
/* Шторки кабінету = шторки гри 1:1 (Влад 16.10.2026). Значення — з flash-game/easy-brand.css, розділи «Sheets», «Settings»,
   «Switch», «Shared quiet action» (body.pp-classic #sheet): ті самі токени ios-tokens.css, та сама будова рядків. */
.ap-sheet.fx-sheet{max-width:480px;height:min(84dvh,calc(100dvh - 16px));max-height:min(84dvh,calc(100dvh - 16px));padding:0 16px 24px;background:var(--ios-sheet-bg);border-radius:var(--ios-sheet-radius) var(--ios-sheet-radius) 0 0;
  box-shadow:0 -12px 40px -8px rgba(0,0,0,.45);color:var(--ios-label)}
.fx-sheet .sheet-handle{position:relative;flex:none;width:var(--ios-grabber-w);height:var(--ios-grabber-h);margin:var(--ios-grabber-top) auto 6px;border-radius:999px;background:var(--ios-grabber);touch-action:none}
.fx-sheet .sheet-handle::before{content:"";position:absolute;left:-210px;right:-210px;top:-6px;height:44px}
.fx-sheet .sheet-head{position:relative;z-index:1;flex:none;display:flex;justify-content:flex-end;align-items:center;min-height:var(--ios-hit);margin:0 0 4px;touch-action:none}
.fx-sheet .sheet-head h3{position:absolute;left:56px;right:56px;top:50%;transform:translateY(-50%);margin:0;text-align:center;font:var(--ios-headline) EasyNunito,Nunito,sans-serif;letter-spacing:var(--ios-headline-ls);color:var(--ios-label);pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-sheet .sheet-x{display:grid;place-items:center;width:var(--ios-glass-size);height:var(--ios-glass-size);margin:0;padding:0;border:0;border-radius:50%;background:var(--ios-glass-fill);-webkit-backdrop-filter:var(--ios-glass-frost);backdrop-filter:var(--ios-glass-frost);
  box-shadow:var(--ios-glass-shadow),var(--ios-glass-rim),var(--ios-glass-edges);color:var(--ios-vibrant-label);transition:transform .55s var(--ios-spring),background-color .3s ease}
.fx-sheet .sheet-x:active{transform:scale(var(--ios-press-scale));background:var(--ios-glass-fill-pressed);transition:transform .16s cubic-bezier(.2,.9,.3,1),background-color .12s ease}
.fx-sheet .sheet-x svg{width:var(--ios-glass-icon);height:var(--ios-glass-icon)}
.fx-sheet .sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:none;scrollbar-width:none;margin:0 -16px;padding:0 16px 8px}
.fx-sheet .sheet-body::-webkit-scrollbar{display:none}
.fx-sheet .set-group{background:var(--ios-cell-bg);border:0;border-radius:var(--ios-list-radius);padding:0 var(--ios-list-inset);margin:6px 0 4px;overflow:hidden}
.fx-sheet .set-group+.set-group{margin-top:16px}
.fx-sheet .saved-row{position:relative;box-sizing:border-box;display:flex;align-items:center;gap:12px;width:calc(100% + 2 * var(--ios-list-inset));min-height:var(--ios-row-min);margin:0 calc(-1 * var(--ios-list-inset));padding:11px var(--ios-list-inset);
  border:0;border-radius:0;background:transparent;color:var(--ios-label);text-align:left;font:inherit;transition:background-color .25s ease}
.fx-sheet a.saved-row{text-decoration:none}
.fx-sheet #ap-pf-feedback .sr-v{font-size:13px}
.fx-sheet .saved-row::before{content:"";position:absolute;top:0;left:var(--ios-list-inset);right:var(--ios-list-inset);border-top:.5px solid var(--ios-separator)}
.fx-sheet .saved-row:first-child::before{display:none}
.fx-sheet .saved-row:not(.is-static):active{background:var(--ios-cell-highlight);transition:background-color .05s ease}
.fx-sheet .saved-row.is-static{cursor:default}
.fx-sheet .sr-t{flex:1;min-width:0;display:flex;flex-direction:column;font:var(--ios-body) EasyNunito,Nunito,sans-serif;letter-spacing:var(--ios-body-ls);color:var(--ios-label)}
.fx-sheet .sr-t small{display:block;margin:4px 0 0;font-size:11px;line-height:1.4;font-weight:400;letter-spacing:-.43px;color:rgba(244,240,231,.66)}   /* як у грі: 11 px, 66 % */
.fx-sheet .sr-v{flex:none;font:var(--ios-body) EasyNunito,Nunito,sans-serif;letter-spacing:var(--ios-body-ls);color:var(--ios-secondary-label)}
.fx-sheet .sr-ck{flex:none;width:20px;height:20px;color:var(--ios-label)}.fx-sheet .sr-ck svg{width:100%;height:100%}
.fx-sheet .sr-chev{flex:none;width:16px;height:16px;color:var(--ios-tertiary-label)}.fx-sheet .sr-chev svg{width:100%;height:100%}
.fx-sheet .switch{position:relative;flex:none;width:var(--ios-switch-w);height:var(--ios-switch-h);border-radius:999px;background:var(--ios-switch-off);transition:background-color .3s ease}
.fx-sheet .switch::after{content:"";position:absolute;top:2px;left:2px;width:var(--ios-knob-w);height:var(--ios-knob-h);border-radius:999px;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);
  transition:transform .3s cubic-bezier(.32,.72,0,1),width .2s cubic-bezier(.32,.72,0,1),height .2s cubic-bezier(.32,.72,0,1),top .2s cubic-bezier(.32,.72,0,1),background-color .2s ease,box-shadow .2s ease}   /* крива UIKit, .3 с (UISwitch) */
.fx-sheet .swap-row.on .switch{background:var(--ios-accent)}
.fx-sheet .swap-row.on .switch::after{transform:translateX(calc(var(--ios-switch-w) - var(--ios-knob-w) - 4px))}
.fx-sheet .swap-row:is(:active,.is-press) .switch::after{top:-5px;width:var(--ios-knob-pressed-w);height:var(--ios-knob-pressed-h);transform:translateX(-10px);background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 .5px #ccc,0 7px 12px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}   /* натиснута — скляна лінза 58×38 (Apple iOS 26 UI Kit, ios-tokens.css) */
.fx-sheet .swap-row.on:is(:active,.is-press) .switch::after{transform:translateX(12px)}
.fx-sheet .set-reset{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin:16px 0 0;padding:12px 18px;border:0;border-radius:999px;background:rgba(255,255,255,.06);box-shadow:none;
  font:700 16px/1.3 EasyNunito,Nunito,sans-serif;letter-spacing:var(--ios-body-ls);color:#d5d5da;text-align:center;transition:background .2s,color .2s}
.fx-sheet .set-reset:active{background:rgba(255,255,255,.14)}
.fx-sheet .set-reset.is-primary{margin:0;background:var(--ios-accent);color:#fff}
.fx-sheet .set-label{margin:20px 16px 0;font:400 13px/18px EasyNunito,Nunito,sans-serif;letter-spacing:var(--ios-footnote-ls);color:var(--ios-secondary-label)}
.fx-sheet .set-label:first-child{margin-top:6px}
.fx-sheet .set-note{margin:8px 16px 0;font:400 13px/18px EasyNunito,Nunito,sans-serif;letter-spacing:var(--ios-footnote-ls);color:var(--ios-secondary-label)}
.fx-sheet .ap-sheet-actions{flex:none;padding-top:12px}
/* Налаштування гри — компактно й послідовно (Влад 16.10.2026): шторка за висотою вмісту; кнопка «назад» — та сама скляна, що ✕;
   кількість карток — сегменти iOS в одному рядку групи. */
.ap-sheet.fx-sheet.is-auto{height:auto}
.fx-sheet .sheet-back{position:absolute;left:0;top:0;bottom:0;margin:auto 0}   /* центр без transform — інакше :active scale зриває позицію (16.10.2026) */
.fx-sheet .sheet-back[hidden]{display:none}
.fx-sheet .set-seg-row{padding-top:8px;padding-bottom:8px}
.fx-sheet .set-seg{flex:1;display:flex;gap:2px;padding:2px;border-radius:9px;background:var(--ios-tertiary-fill)}
.fx-sheet .set-seg button{flex:1;min-height:36px;border:0;border-radius:7px;background:none;color:var(--ios-label);font:600 15px/20px EasyNunito,Nunito,sans-serif;letter-spacing:var(--ios-subhead-ls)}
.fx-sheet .set-seg button[aria-checked="true"]{background:var(--ios-gray2);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
.fx-sheet .sr-v{margin-left:auto}
/* Налаштування гри — стек екранів як у iOS (16.10.2026): в'їзд справа (вперед) / зліва (назад), неактивний рядок, рядок-дія. */
.fx-sheet #ap-setup-body{touch-action:pan-y}
.fx-sheet .saved-row.is-off .sr-t{color:var(--ios-tertiary-label)}
.fx-sheet .saved-row.is-link .sr-t{color:var(--ios-label);font-weight:600}
.fx-sheet .sr-ck:empty{width:0}
.fx-sheet .sr-ck+.sr-chev{margin-left:8px}
.fx-sheet .sr-v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
/* Повзунок «Карток у грі» (16.10.2026): iOS-слайдер — доріжка 4 px, заповнення фірмовим синім, біла кулька 28 px. */
.fx-sheet .set-slide{flex-direction:column;align-items:stretch;gap:10px;padding-top:13px;padding-bottom:16px}
.fx-sheet .sl-top{display:flex;align-items:center;gap:12px}
.fx-sheet .sl-range{--p:0%;-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;touch-action:none;cursor:pointer}
.fx-sheet .sl-range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,#4120f8 var(--p),var(--ios-tertiary-fill) var(--p))}
.fx-sheet .sl-range::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(to right,#4120f8 var(--p),var(--ios-tertiary-fill) var(--p))}
.fx-sheet .sl-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-12px;border-radius:50%;background:#fff;box-shadow:0 .5px 4px rgba(0,0,0,.12),0 6px 13px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
.fx-sheet .sl-range::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#fff;box-shadow:0 .5px 4px rgba(0,0,0,.12),0 6px 13px rgba(0,0,0,.12)}
.fx-sheet .sl-range:focus-visible{outline:2px solid #4120f8;outline-offset:4px;border-radius:14px}
/* Тип гри + повзунок кроками (16.10.2026): заливка світла (синій — лише CTA), велике значення праворуч, підписи країв. */
.fx-sheet .sl-range::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--ios-label) var(--p),var(--ios-tertiary-fill) var(--p))}
.fx-sheet .sl-range::-moz-range-track{background:linear-gradient(to right,var(--ios-label) var(--p),var(--ios-tertiary-fill) var(--p))}
.fx-sheet .sl-range:focus-visible{outline-color:var(--ios-label)}
.fx-sheet .sl-val{margin-left:auto;font:600 17px/22px EasyNunito,Nunito,sans-serif;font-variant-numeric:tabular-nums;color:var(--ios-label)}
.fx-sheet .sl-ends{display:flex;justify-content:space-between;margin-top:-4px;font:400 13px/18px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.fx-sheet .saved-row.is-off small{color:var(--ios-tertiary-label)}
.fx-sheet .set-seg-top{margin:2px 0 4px}
/* «Що грати»: перемикач у мові шторки — капсула з тим самим тлом і радіусом, що групи; заголовок списку з компактною дією (16.10.2026). */
.fx-sheet .set-seg.set-seg-top{margin:6px 0 4px;padding:4px;gap:4px;border-radius:999px;background:var(--ios-cell-bg)}
.fx-sheet .set-seg-top button{min-height:40px;border-radius:999px;color:var(--ios-secondary-label);transition:background-color .2s ease,color .2s ease}
.fx-sheet .set-seg-top button[aria-checked="true"]{background:var(--ios-gray2);color:var(--ios-label)}
.fx-sheet .set-lhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 16px 0;min-height:22px}
.fx-sheet .set-lhead span{font:400 13px/18px EasyNunito,Nunito,sans-serif;letter-spacing:var(--ios-footnote-ls);color:var(--ios-secondary-label)}
.fx-sheet .set-lact{position:relative;padding:0;border:0;background:none;color:var(--ios-label);font:600 15px/20px EasyNunito,Nunito,sans-serif;cursor:pointer}
.fx-sheet .set-lact::after{content:"";position:absolute;inset:-12px -10px}
.fx-sheet .set-lact:active{opacity:.5}
/* Повзунок v2 (16.10.2026): поділки замість підписів країв, значення як в інших рядках, світліша доріжка, нижчий блок. */
.fx-sheet .set-slide{gap:4px;padding-bottom:10px}
.fx-sheet .sl-val{font:var(--ios-body) EasyNunito,Nunito,sans-serif;letter-spacing:var(--ios-body-ls);color:var(--ios-secondary-label)}
.fx-sheet .sl-range::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--ios-label) var(--p),rgba(235,235,245,.18) var(--p))}
.fx-sheet .sl-range::-moz-range-track{background:linear-gradient(to right,var(--ios-label) var(--p),rgba(235,235,245,.18) var(--p))}
.fx-sheet .sl-ticks{display:flex;justify-content:space-between;padding:0 12px}
.fx-sheet .sl-ticks i{width:4px;height:4px;border-radius:50%;background:rgba(235,235,245,.3)}
.fx-sheet .set-label+.set-seg-top{margin-top:8px}
.fx-sheet .set-group{overflow:hidden;overflow:clip}   /* clip, а не hidden: hidden робить групу окремою областю прокрутки — вона ловила гортання, і список у шторці не гортався (16.10.2026) */
/* Шторки кабінету (16.10.2026), як шторки iOS:
   1) шапка напівпрозора — вміст гортається під грабер і заголовок, під шапкою розмиття з плавним згасанням;
   2) два положення — середнє і на повну висоту (жест угору за грабер/шапку), висота анімується;
   3) «Готово» внизу — фірмова капсула, вимкнена, поки нема вибору. */
.ap-sheet.fx-sheet{transition:transform .44s cubic-bezier(.22,.7,.3,1),height .44s cubic-bezier(.22,.7,.3,1),max-height .44s cubic-bezier(.22,.7,.3,1)}
.ap-sheet.fx-sheet.is-full{height:calc(100dvh - 12px);max-height:calc(100dvh - 12px)}
.fx-sheet .sheet-handle{z-index:2}
.fx-sheet .sheet-head{z-index:2}
.fx-sheet .sheet-body{margin-top:-64px;padding-top:64px}
.ap-sheet.fx-sheet::before{content:"";position:absolute;left:0;right:0;top:0;z-index:1;height:84px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to bottom,rgba(28,28,30,.82),rgba(28,28,30,.55) 62%,rgba(28,28,30,0));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(#000 58%,transparent);mask-image:linear-gradient(#000 58%,transparent)}
.fx-sheet .ap-sheet-actions{position:relative;z-index:2}
.fx-sheet .ap-sheet-actions[hidden]{display:none}
.fx-sheet .set-reset.is-primary{min-height:54px;font:700 17px/22px EasyNunito,Nunito,sans-serif}
.fx-sheet .set-reset.is-primary:disabled{background:rgba(255,255,255,.08);color:var(--ios-tertiary-label)}
/* Кнопка внизу шторки — плаває над списком (16.10.2026): список гортається під неї, над кнопкою розмиття зі згасанням
   (дзеркально до шапки), кнопка з фірмовою тінню. */
.fx-sheet .ap-sheet-actions{margin-top:-44px;padding-top:44px;position:relative;z-index:2}
.fx-sheet .ap-sheet-actions::before{content:"";position:absolute;left:-16px;right:-16px;top:0;bottom:-24px;z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(28,28,30,0),rgba(28,28,30,.72) 42%,rgba(28,28,30,.94));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);-webkit-mask-image:linear-gradient(transparent,#000 40%);mask-image:linear-gradient(transparent,#000 40%)}
.fx-sheet:has(.ap-sheet-actions:not([hidden])) .sheet-body{padding-bottom:52px}
.fx-sheet .set-reset.is-primary{box-shadow:0 12px 28px -12px rgba(65,32,248,.75),0 2px 6px rgba(0,0,0,.25)}
.fx-sheet .set-reset.is-primary:disabled{box-shadow:none}
/* «Готово» — біла капсула з темним текстом (Влад 16.10.2026), тінь нейтральна. */
.fx-sheet .set-reset.is-primary{background:#fff;color:#1c1c1e;box-shadow:0 12px 28px -12px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.3)}
.fx-sheet .set-reset.is-primary:active{background:rgba(255,255,255,.82)}
.fx-sheet .set-reset.is-primary:disabled{background:rgba(255,255,255,.08);color:var(--ios-tertiary-label);box-shadow:none}
.ap-sheet.fx-sheet{overflow:clip}   /* вміст, що гортається під шапку, обрізається заокругленими кутами шторки — не виходить за її рамки (16.10.2026) */
/* Список не виходить за рамки шторки (Влад 16.10.2026): замість розмитої плашки — маска на самому тілі. Під шапкою вміст
   напівпрозоро згасає і повністю зникає до грабера; над «Готово» — так само. Розмиття-плашки прибрано (давали «смугу»). */
.ap-sheet.fx-sheet::before,.fx-sheet .ap-sheet-actions::before{content:none}
.fx-sheet .sheet-body{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 22px,rgba(0,0,0,.35) 44px,#000 64px,#000 calc(100% - 8px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,transparent 22px,rgba(0,0,0,.35) 44px,#000 64px,#000 calc(100% - 8px),transparent 100%)}
.fx-sheet:has(.ap-sheet-actions:not([hidden])) .sheet-body{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 22px,rgba(0,0,0,.35) 44px,#000 64px,#000 calc(100% - 96px),transparent calc(100% - 44px));
  mask-image:linear-gradient(to bottom,transparent 0,transparent 22px,rgba(0,0,0,.35) 44px,#000 64px,#000 calc(100% - 96px),transparent calc(100% - 44px));padding-bottom:60px}
/* Заголовок модуля над групою тем (16.10.2026): назва модуля — заголовок, під нею «4 теми» / «2 з 4»; праворуч «Вибрати всі» модуля. */
.fx-sheet .set-mhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:22px 16px 8px}
.fx-sheet .set-mtext{display:flex;flex-direction:column;min-width:0}
.fx-sheet .set-mname{font:700 20px/25px EasyNunito,Nunito,sans-serif;letter-spacing:-.01em;color:var(--ios-label)}
.fx-sheet .set-mcount{margin-top:2px;font:400 13px/18px EasyNunito,Nunito,sans-serif;letter-spacing:var(--ios-footnote-ls);color:var(--ios-secondary-label)}
.fx-sheet .set-mhead .set-lact{flex:none;margin-bottom:1px}
.fx-sheet .set-mhead+.set-group{margin-top:0}
/* Заголовок модуля — у стилі «17 тем» (Влад 16.10.2026): дрібний сірий підпис ліворуч, «Вибрати всі» праворуч. */
.fx-sheet .set-lhead.set-mhead{align-items:center;margin:18px 16px 0}
.fx-sheet .set-lhead.set-mhead+.set-group{margin-top:6px}
/* Заголовок модуля — стилі навпаки (Влад 16.10.2026): назва модуля жирна біла, «Вибрати всі» дрібна сіра. */
.fx-sheet .set-lhead.set-mhead span{font:600 15px/20px EasyNunito,Nunito,sans-serif;letter-spacing:var(--ios-subhead-ls);color:var(--ios-label)}
.fx-sheet .set-lhead.set-mhead .set-lact{font:400 13px/18px EasyNunito,Nunito,sans-serif;letter-spacing:var(--ios-footnote-ls);color:var(--ios-secondary-label)}
/* Згасання над «Готово» — коротке, як «scroll edge effect» iOS 26 (Влад 16.10.2026: «занадто велика тінь»): вміст видно майже до кнопки,
   згасає за 24 px, 12 px чистого поля над кнопкою. Було ~96 px порожньої смуги. */
.fx-sheet .ap-sheet-actions{margin-top:-16px;padding-top:16px}
.fx-sheet:has(.ap-sheet-actions:not([hidden])) .sheet-body{padding-bottom:28px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 22px,rgba(0,0,0,.35) 44px,#000 64px,#000 calc(100% - 36px),transparent calc(100% - 12px));
  mask-image:linear-gradient(to bottom,transparent 0,transparent 22px,rgba(0,0,0,.35) 44px,#000 64px,#000 calc(100% - 36px),transparent calc(100% - 12px))}
.fx-sheet .set-hint{margin:10px 0 0;text-align:center;font:400 13px/18px EasyNunito,Nunito,sans-serif;letter-spacing:var(--ios-footnote-ls);color:var(--ios-secondary-label)}
.fx-sheet .set-reset.is-primary:disabled{font-weight:600;color:var(--ios-secondary-label)}   /* текст-підказка в неактивній кнопці має читатися */
.fx-sheet .set-cnt{font-style:normal;font-weight:400;color:var(--ios-secondary-label)}   /* кількість карток у дужках — вторинна */
/* Під шапкою більше розмиття (Влад 16.10.2026: «текст накладається»): шар розмиття за шапкою + вміст згасає довше —
   під заголовком лише ледь видна розмита тінь списку, без смуги (шар сам згасає донизу). */
.ap-sheet.fx-sheet::before{content:"";position:absolute;left:0;right:0;top:0;z-index:1;height:84px;border-radius:inherit;pointer-events:none;
  background:rgba(28,28,30,.72);-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);
  -webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
.fx-sheet .sheet-body{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 26px,rgba(0,0,0,.25) 52px,#000 80px,#000 calc(100% - 8px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,transparent 26px,rgba(0,0,0,.25) 52px,#000 80px,#000 calc(100% - 8px),transparent 100%)}
.fx-sheet:has(.ap-sheet-actions:not([hidden])) .sheet-body{-webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 26px,rgba(0,0,0,.25) 52px,#000 80px,#000 calc(100% - 36px),transparent calc(100% - 12px));
  mask-image:linear-gradient(to bottom,transparent 0,transparent 26px,rgba(0,0,0,.25) 52px,#000 80px,#000 calc(100% - 36px),transparent calc(100% - 12px))}
/* Як у шторці застосунку Claude (Влад 16.10.2026): без матового тла й тонування — шторка лишається своєю; під шапкою вміст
   просто сильно розмитий (прогресивне розмиття: найсильніше вгорі, згасає донизу), і плавно тане біля верхнього краю. */
.ap-sheet.fx-sheet::before{background:none;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);height:88px;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.fx-sheet .sheet-body{-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.6) 40px,#000 64px,#000 calc(100% - 8px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.6) 40px,#000 64px,#000 calc(100% - 8px),transparent 100%)}
.fx-sheet:has(.ap-sheet-actions:not([hidden])) .sheet-body{-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.6) 40px,#000 64px,#000 calc(100% - 36px),transparent calc(100% - 12px));
  mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.6) 40px,#000 64px,#000 calc(100% - 36px),transparent calc(100% - 12px))}
.ap-sheet.fx-sheet::before{height:64px;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}   /* розмиття лише в зоні шапки: вміст у спокої (перемикач) під нього не потрапляє й не «світлить» шапку */
/* М'який край як на скріншоті Claude (Влад 16.10.2026): під шапкою вміст лишається видимою розмитою сірою тінню,
   повністю зникає лише біля грабера (перші ~10 px). */
.fx-sheet .sheet-body{-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.45) 14px,rgba(0,0,0,.7) 40px,#000 64px,#000 calc(100% - 8px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.45) 14px,rgba(0,0,0,.7) 40px,#000 64px,#000 calc(100% - 8px),transparent 100%)}
.fx-sheet:has(.ap-sheet-actions:not([hidden])) .sheet-body{-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.45) 14px,rgba(0,0,0,.7) 40px,#000 64px,#000 calc(100% - 36px),transparent calc(100% - 12px));
  mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.45) 14px,rgba(0,0,0,.7) 40px,#000 64px,#000 calc(100% - 36px),transparent calc(100% - 12px))}
/* Під шапкою — ТІНЬ, не матовість (Влад 16.10.2026): темний градієнт кольору шторки зверху вниз, без розмиття.
   Вміст під заголовком затінюється й зникає в тіні; маска лише прибирає вміст біля самого краю. */
.ap-sheet.fx-sheet::before{height:88px;background:linear-gradient(to bottom,#1c1c1e 0,rgba(28,28,30,.92) 30%,rgba(28,28,30,.6) 62%,rgba(28,28,30,0) 100%);
  -webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none}
.fx-sheet .sheet-body{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20px,#000 calc(100% - 8px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 20px,#000 calc(100% - 8px),transparent 100%)}
.fx-sheet:has(.ap-sheet-actions:not([hidden])) .sheet-body{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20px,#000 calc(100% - 36px),transparent calc(100% - 12px));
  mask-image:linear-gradient(to bottom,transparent 0,#000 20px,#000 calc(100% - 36px),transparent calc(100% - 12px))}
.ap-sheet.fx-sheet::before{height:112px;background:linear-gradient(to bottom,#1c1c1e 0,rgba(28,28,30,.94) 30%,rgba(28,28,30,.78) 52%,rgba(28,28,30,.4) 76%,rgba(28,28,30,0) 100%)}   /* тінь під шапкою більша — як у шторці Claude (Влад 16.10.2026) */
.ap-sheet.fx-sheet::before{opacity:0;transition:opacity .2s ease}.ap-sheet.fx-sheet.is-scrolled::before{opacity:1}   /* тінь лише під час прокрутки */
/* Тінь над «Готово» — така сама, як під шапкою «Що грати», дзеркально (Влад 16.10.2026): темний градієнт кольору шторки
   знизу вгору, 112 px, без розмиття; лише коли під кнопкою ще є вміст. Маска тіла внизу — тільки край. */
.fx-sheet .ap-sheet-actions::before{content:"";position:absolute;left:-16px;right:-16px;bottom:-24px;top:-64px;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,#1c1c1e 0,rgba(28,28,30,.94) 30%,rgba(28,28,30,.78) 52%,rgba(28,28,30,.4) 76%,rgba(28,28,30,0) 100%);
  -webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none;opacity:0;transition:opacity .2s ease}
.ap-sheet.fx-sheet.is-more .ap-sheet-actions::before{opacity:1}
.fx-sheet:has(.ap-sheet-actions:not([hidden])) .sheet-body{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20px,#000 calc(100% - 8px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 20px,#000 calc(100% - 8px),transparent 100%)}
.fx-sheet .ap-sheet-actions::before{top:-96px;background:linear-gradient(to top,#1c1c1e 0,rgba(28,28,30,.94) 45%,rgba(28,28,30,.78) 62%,rgba(28,28,30,.4) 82%,rgba(28,28,30,0) 100%)}   /* над кнопкою така сама глибина тіні, як під шапкою: ~112 px від верху кнопки */
.fx-sheet .ap-sheet-actions::before{top:-24px;background:linear-gradient(to top,#1c1c1e 0,rgba(28,28,30,.9) 50%,rgba(28,28,30,.55) 72%,rgba(28,28,30,0) 100%)}   /* тінь над кнопкою коротка — ~40 px над кнопкою, середина списку чиста (Влад 16.10.2026: «занадто велика тінь») */
.ap-sheet.fx-sheet::before{height:84px;background:linear-gradient(to bottom,#1c1c1e 0,rgba(28,28,30,.94) 42%,rgba(28,28,30,.6) 72%,rgba(28,28,30,0) 100%)}   /* тінь під шапкою — до ~20 px нижче шапки, рядки посередині не затінює */
.ap-sel{box-shadow:none}   /* без темного кільця навколо значка «+» (Влад 16.10.2026) */
/* «Наступна гра» — кнопка (16.10.2026): уся плашка натискається, у заголовку шеврон, натиск — легке стиснення. */
.ap-next.is-tap{display:block;width:100%;border:0;text-align:left;color:inherit;font:inherit;cursor:pointer;transition:transform .16s cubic-bezier(.2,.9,.3,1),background-color .12s ease}
.ap-next.is-tap:active{transform:scale(.98);background:#242426}
.ap-next.is-tap .ap-nhead{display:flex}
.ap-next.is-tap .ap-nhead b{display:inline-flex;align-items:center;gap:6px}
.ap-next.is-tap .sr-chev{width:14px;height:14px;color:rgba(235,235,245,.45)}.ap-next.is-tap .sr-chev svg{width:100%;height:100%}
.ap-next.is-tap .ap-nrow{display:flex}
/* «Мої картки» (16.10.2026): значок у шапці біля профілю; сторінка — групи рядків як у шторках налаштувань. */
.ap-mine svg{width:20px;height:20px}
.ap-bar .ap-mine{margin-left:auto}
.ap-bar .ap-mine+.ap-me{margin-left:-4px}
.ap-mhead{margin:20px 16px 6px;font:700 15px/20px EasyNunito,Nunito,sans-serif;color:#f4f0e7}.ap-mhead i{font-style:normal;font-weight:400;color:rgba(235,235,245,.6)}
.ap-mgrp{list-style:none;margin:0;padding:0 16px;border-radius:22px;background:#1c1c1e}
.ap-mgrp li+li .ap-mrow{border-top:.5px solid rgba(84,84,88,.6)}
.ap-mrow{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:11px 0;border:0;background:none;color:#f4f0e7;text-align:left;font:inherit;cursor:pointer}
.ap-mrow .tx{flex:1;min-width:0;font:600 16px/21px EasyNunito,Nunito,sans-serif}
.ap-mrow small{display:block;margin-top:3px;font:400 11px/1.4 EasyNunito,Nunito,sans-serif;color:rgba(235,235,245,.66)}
.ap-mrow>svg{flex:none;width:16px;height:16px;color:rgba(235,235,245,.3)}
.ap-mrow:active{opacity:.6}
.ap-mrow.is-off{cursor:default}.ap-mrow.is-off .tx{color:rgba(235,235,245,.45)}.ap-mrow.is-off:active{opacity:1}
.ap-mstar{flex:none;width:34px;height:34px;border-radius:10px;background:rgba(244,240,231,.08);display:grid;place-items:center}.ap-mstar svg{width:18px;height:18px;fill:currentColor}
.ap-minepg .ap-head{padding-bottom:10px}
.fx-sheet .sr-star{flex:none;width:16px;height:16px;color:var(--ios-label)}.fx-sheet .sr-star svg{width:100%;height:100%;fill:currentColor}
.fx-sheet .saved-row .sr-t em{font-style:normal;color:#8f7bff}   /* ключове слово в питанні — у списку карток «Моїх карток» */
/* «Мої картки» (16.10.2026): предмет дрібно під заголовком шторки; зірочка в рядку «Збережене». */
.fx-sheet .sheet-head h3 small{display:block;margin-top:1px;font:400 12px/15px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label);overflow:hidden;text-overflow:ellipsis}
.fx-sheet .saved-row .ap-mstar{flex:none;width:32px;height:32px;margin-right:12px;border-radius:9px;background:rgba(244,240,231,.08);display:grid;place-items:center;color:var(--ios-label)}
.fx-sheet .saved-row .ap-mstar svg{width:17px;height:17px;fill:currentColor}
.fx-sheet .saved-row.is-off .ap-mstar{color:var(--ios-tertiary-label)}
/* «Мої картки» v2 (Влад 16.10.2026; реф «мої-картки-прогрес.html» A): під заголовком — дропдаун предмета; загальний прогрес;
   теми — кільце прогресу (✓ коли пройдена), назва в один рядок, «зіграно / усього»; меню предметів усередині шторки. */
.fx-sheet .sheet-head h3 .ap-msubj{pointer-events:auto;display:inline-flex;align-items:center;gap:4px;margin:3px auto 0;padding:2px 8px 2px 10px;border:0;border-radius:999px;
  background:rgba(118,118,128,.24);color:var(--ios-secondary-label);font:600 12px/18px EasyNunito,Nunito,sans-serif;cursor:pointer}
.fx-sheet .sheet-head h3 .ap-msubj svg{width:11px;height:11px}
.fx-sheet .sheet-head h3 .ap-msubj:active{background:rgba(118,118,128,.4)}
.fx-sheet .sheet-head h3:has(.ap-msubj){display:flex;flex-direction:column;align-items:center}
.ap-msum{margin:6px 0 4px;padding:14px 16px;border-radius:var(--ios-list-radius);background:var(--ios-cell-bg)}
.ap-msum .a{display:flex;justify-content:space-between;align-items:baseline}.ap-msum .a b{font:800 22px/28px EasyNunito,Nunito,sans-serif;color:var(--ios-label)}
.ap-msum .a span{font:600 13px/18px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.ap-mbar{height:8px;margin-top:10px;border-radius:4px;background:rgba(118,118,128,.35);overflow:hidden}.ap-mbar i{display:block;height:100%;width:var(--p,0%);border-radius:4px;background:var(--ios-label)}
.fx-sheet .saved-row.is-topic{min-height:52px}
.fx-sheet .saved-row .one{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-sheet .saved-row.is-topic .sr-v{max-width:none;margin-right:6px;font-size:15px}
.ap-ring{flex:none;position:relative;width:28px;height:28px;margin-right:12px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--ios-label) var(--p,0%),rgba(118,118,128,.38) 0)}
.ap-ring::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--ios-cell-solid)}
.ap-ring.is-done{background:var(--ios-label);color:var(--ios-cell-bg)}.ap-ring.is-done::after{content:none}
.ap-ring.is-done svg{position:relative;width:15px;height:15px}
.fx-sheet .set-mhead .set-cnt{font-size:13px}
.ap-pop.is-sheet{position:absolute;z-index:32;left:16px;right:16px}
.ap-pscrim.is-sheet{position:absolute;z-index:31;border-radius:inherit}
.ap-msoon{margin-top:24px;text-align:center}
/* «Мої картки» v3 — плитки предметів з прогресом (Влад 16.10.2026, реф C): обрана — стримано, без яскравої рамки. */
.ap-mtiles{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:4px -16px 6px;padding:2px 16px 4px;scroll-snap-type:x mandatory;scroll-padding:0 16px}
.ap-mtiles::-webkit-scrollbar{display:none}
.ap-mtile{flex:none;width:148px;display:flex;flex-direction:column;align-items:flex-start;padding:12px;border:0;border-radius:20px;background:var(--ios-cell-bg);color:var(--ios-label);text-align:left;scroll-snap-align:start;cursor:pointer;
  box-shadow:inset 0 0 0 1px transparent;transition:background-color .2s ease,box-shadow .2s ease}
.ap-mtile.is-on{background:#3a3a3e;box-shadow:inset 0 0 0 1px rgba(235,235,245,.22)}
.ap-mtile:active{transform:scale(.98)}
.ap-mtile .ap-ic{width:34px;height:34px;border-radius:10px;margin-bottom:10px}.ap-mtile .ap-ic svg{width:18px;height:18px}
.ap-mtile b{display:block;width:100%;font:800 14px/18px EasyNunito,Nunito,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-mtile small{display:block;margin-top:2px;font:700 12px/16px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.ap-tbar{display:block;width:100%;height:4px;margin-top:10px;border-radius:2px;background:rgba(118,118,128,.35);overflow:hidden}
.ap-tbar i{display:block;height:100%;width:var(--p,0%);border-radius:2px;background:var(--ios-label)}
.ap-mtile:not(.is-on) .ap-tbar i{background:rgba(244,240,231,.7)}
.fx-sheet .saved-row.is-topic .sr-t{min-width:0}
.fx-sheet .saved-row.is-topic .ap-tbar{margin-top:8px}
.fx-sheet .saved-row.is-topic .sr-v{font:700 13px/18px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
/* Гортання в шторках (16.10.2026): overflow:hidden робить елемент окремою областю прокрутки — назва теми (.one), смужки, значення
   ловили коліщатко/жест, і список «Моїх карток» не гортався. Обрізання — через clip (вигляд той самий, … працює). */
.fx-sheet .saved-row .one,.fx-sheet .sr-v,.ap-mtile b,.ap-tbar,.ap-mbar{overflow:clip}
/* Без затінення внизу, коли кнопки немає (Влад 16.10.2026): маска тіла — лише зверху під шапкою. */
.fx-sheet:not(:has(.ap-sheet-actions:not([hidden]))) .sheet-body{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20px);mask-image:linear-gradient(to bottom,transparent 0,#000 20px)}
.fx-sheet .saved-row.is-topic .ap-ring{width:26px;height:26px;margin-right:12px}.fx-sheet .saved-row.is-topic .ap-ring::after{inset:4px}   /* кільце прогресу теми: світла дуга на сірому колі, пройдена — повне коло */
.fx-sheet .saved-row.is-topic .sr-ck{margin-left:4px}   /* «Що грати»: галочка після «зіграно / усього» */
.fx-sheet .saved-row.is-topic .sr-ck:empty{width:20px}   /* місце під галочку завжди — «x / n» стоять рівною колонкою */
/* Прогрес теми — контур картки 10:13 (16.10.2026): сіра доріжка + світла лінія від лівого верхнього кута за годинниковою стрілкою. */
.ap-cprog{flex:none;width:22px;height:28px;margin:0 14px 0 2px}
.ap-cprog rect,.ap-cprog path{fill:none;stroke-width:2.6}
.ap-cprog .t{stroke:rgba(118,118,128,.38)}
.ap-cprog .p{stroke:var(--ios-label);stroke-linecap:round;stroke-linejoin:round}
/* Без «блоку обрізання» внизу (Влад 16.10.2026): коли кнопки немає, список іде до самого низу шторки — нижній відступ шторки
   переноситься всередину прокрутки (останній рядок не прилипає до краю). */
.ap-sheet.fx-sheet:not(:has(.ap-sheet-actions:not([hidden]))){padding-bottom:0}
.fx-sheet:not(:has(.ap-sheet-actions:not([hidden]))) .sheet-body{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
/* «Мої картки» (Влад 16.10.2026): фіолетове підсвічення шторки (як у макеті сторінки) + пошук. */
.ap-sheet.fx-sheet.ap-minesh{background:radial-gradient(110% 42% at 50% 30%,rgba(65,32,248,.16),transparent 70%),var(--ios-sheet-bg)}
.fx-sheet .sheet-find[hidden]{display:none}
.fx-sheet .sheet-find svg{width:20px;height:20px}
.ap-msearch{display:flex;align-items:center;gap:8px;height:40px;margin:6px 0 4px;padding:0 12px;border-radius:12px;background:rgba(118,118,128,.24);color:var(--ios-secondary-label)}
.ap-msearch svg{flex:none;width:18px;height:18px}
.ap-msearch input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;color:var(--ios-label);font:400 17px/22px EasyNunito,Nunito,sans-serif;-webkit-appearance:none;appearance:none}
.ap-msearch input::placeholder{color:var(--ios-secondary-label)}
.ap-msearch input::-webkit-search-cancel-button{filter:invert(1) opacity(.5)}
.ap-msearch:focus-within{box-shadow:inset 0 0 0 1px rgba(235,235,245,.22)}
/* «Мої картки» — заповнення як у макеті сторінки й зернистість як у грі (Влад 16.10.2026): темне тло сторінки кабінету
   (#17161b → #100f16) з фіолетовим світлом посередині, групи — #1c1c1e, поверх — те саме зерно, що в .fx-bg гри. */
.ap-sheet.fx-sheet.ap-minesh{background:radial-gradient(110% 48% at 50% 36%,rgba(65,32,248,.17),transparent 70%),radial-gradient(125% 85% at 50% 8%,#17161b 0%,#131218 46%,#100f16 100%)}
.ap-sheet.fx-sheet.ap-minesh::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.fx-sheet.ap-minesh .set-group,.fx-sheet.ap-minesh .ap-mtile{background:#1c1c1e}
.fx-sheet.ap-minesh .ap-mtile.is-on{background:#2a2a2e}
.fx-sheet.ap-minesh .ap-msearch{background:rgba(118,118,128,.2)}
.ap-sheet.fx-sheet.ap-minesh::before{background:linear-gradient(to bottom,#17161b 0,rgba(23,22,27,.94) 42%,rgba(23,22,27,.6) 72%,rgba(23,22,27,0) 100%)}
.fx-sheet.ap-minesh .ap-sheet-actions::before{background:linear-gradient(to top,#100f16 0,rgba(16,15,22,.9) 50%,rgba(16,15,22,.55) 72%,rgba(16,15,22,0) 100%)}
/* Поле пошуку — у стилі шторки (Влад 16.10.2026): капсула кольору груп, як перемикач «Теми | Збережене»; нейтральне «Пошук». */
.ap-msearch{height:44px;margin:6px 0 4px;padding:0 16px;border-radius:999px;background:var(--ios-cell-bg);gap:10px}
.fx-sheet.ap-minesh .ap-msearch{background:#1c1c1e}
.ap-msearch:focus-within{box-shadow:none}
.ap-msearch input{font:400 17px/22px EasyNunito,Nunito,sans-serif}
/* Перегляд картки в шторці «Мої картки» (16.10.2026): крок стеку — тіло не гортається, картка на всю висоту, «1 з 6» під назвою теми. */
.fx-sheet.is-viewing .sheet-body{overflow:hidden;display:flex;flex-direction:column;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
.fx-sheet.is-viewing #ap-mine-body{flex:1;min-height:0;display:flex;flex-direction:column}
.ap-view.in-sheet{flex:1;min-height:0;padding-top:8px}
.ap-view.in-sheet .cv-stage{min-height:200px}
.fx-sheet .sheet-head h3 small.cv-count{height:auto;padding:0;margin-top:1px;font:400 12px/15px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label);text-align:center}
/* Програма НМТ у «Моїх картках» (16.10.2026): теми й модулі без карток — приглушені, із замком справа; група «Скоро». */
.fx-sheet .ap-lock{flex:none;width:18px;height:18px;color:var(--ios-tertiary-label)}.fx-sheet .ap-lock svg{width:100%;height:100%}
.fx-sheet .saved-row.is-off.is-topic .sr-t,.fx-sheet .saved-row.is-lockmod .sr-t{color:var(--ios-tertiary-label)}
.fx-sheet .saved-row.is-lockmod small{color:var(--ios-tertiary-label)}
.fx-sheet .set-lhead.set-mhead>.set-cnt{flex:none;white-space:nowrap}.fx-sheet .set-lhead.set-mhead>span{min-width:0}   /* «33 / 119» не переноситься біля довгої назви модуля */
.fx-sheet .ap-lock{width:17px;height:17px;color:rgba(235,235,245,.38)}
.fx-sheet .ap-lock{width:18px;height:18px;color:var(--ios-tertiary-label)}   /* повернуто розмір і колір контурного замка */
/* Перегляд картки в «Моїх картках» без нижньої панелі (16.10.2026) + вікно «Пояснення» поверх шторки, як «Деталі» в грі. */
.ap-view.in-sheet{padding-bottom:8px}
.ap-xp-scrim{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,.42);opacity:0;transition:opacity .3s ease;border-radius:inherit}
.ap-xp-scrim.show{opacity:1}
.ap-xp{position:absolute;left:0;right:0;bottom:0;z-index:21;max-height:72%;display:flex;flex-direction:column;padding:0 20px calc(24px + env(safe-area-inset-bottom));
  border-radius:var(--ios-sheet-radius) var(--ios-sheet-radius) 0 0;background:var(--ios-sheet-bg);box-shadow:0 -12px 40px -8px rgba(0,0,0,.5);
  transform:translateY(105%);transition:transform .42s cubic-bezier(.22,.7,.3,1)}
.ap-xp.show{transform:none}
.ap-xp-grab{flex:none;width:var(--ios-grabber-w);height:var(--ios-grabber-h);margin:var(--ios-grabber-top) auto 6px;border-radius:999px;background:var(--ios-grabber)}
.ap-xp-head{flex:none;position:relative;display:flex;justify-content:flex-end;align-items:center;min-height:44px;margin:0 -4px 6px}
.ap-xp-head h4{position:absolute;left:56px;right:56px;margin:0;text-align:center;font:var(--ios-headline) EasyNunito,Nunito,sans-serif;color:var(--ios-label)}
.ap-xp-ctx{flex:none;margin:0 0 10px;font:600 13px/18px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.ap-xp-text{overflow-y:auto;overscroll-behavior:contain;padding:16px;border-radius:var(--ios-list-radius);background:var(--ios-cell-bg)}
.ap-xp-text p{margin:0;font:600 17px/25px EasyNunito,Nunito,sans-serif;color:var(--ios-label)}
.ap-xp-text p+p{margin-top:12px}
.ap-xp-text .ef-stx{color:#8f7bff}
@media (prefers-reduced-motion:reduce){.ap-xp,.ap-xp-scrim{transition:none}}
/* «Пояснення» як «Деталі» в грі (16.10.2026, з easy-brand.css #detailSheet): окрема шторка поверх «Моїх карток». */
.ap-scrim.ap-xpbd{z-index:42}
.ap-sheet.fx-sheet.ap-xpsheet{z-index:43}
.ap-xpsheet .sheet-body.ap-dtbody{display:flex;flex-direction:column;min-height:0;margin-top:0;padding:0 8px calc(32px + env(safe-area-inset-bottom));-webkit-mask-image:none;mask-image:none}
.ap-xpsheet .dt-context{flex:none;margin:14px 0 16px;font:600 13px/1.45 EasyNunito,Nunito,sans-serif;color:#a6a6b2}
.ap-xpsheet .dt-lead{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0;padding:22px 22px 24px;border-radius:26px;
  background:radial-gradient(ellipse at 100% 0,rgba(65,32,248,.06),transparent 65%),linear-gradient(145deg,#fff,#f5f5f8);box-shadow:0 10px 30px rgba(0,0,0,.28);
  color:#191920;font:600 18px/1.6 EasyNunito,Nunito,sans-serif;letter-spacing:0;white-space:pre-line;hyphens:manual;overflow-wrap:normal;word-break:normal;text-wrap:wrap}
.ap-xpsheet .dt-lead.dt-empty{color:#6b6b78;font-weight:500}
.ap-xpsheet .dt-par{display:block}.ap-xpsheet .dt-par+.dt-par{margin-top:14px}
.ap-xpsheet .dt-stx{color:#4120f8;font-weight:800}
.fx-sheet.detail-open .ef-xp-btn svg{transform:rotate(180deg)}
.ap-xpsheet .sheet-body.ap-dtbody{padding-left:24px;padding-right:24px}   /* як у грі: 16 px шторки + 8 px тіла */
.ap-sheet.fx-sheet.ap-xpsheet .sheet-body.ap-dtbody.ap-dtbody{padding-bottom:calc(32px + env(safe-area-inset-bottom))}   /* низ — як у грі (32 px) */
.ap-view.in-sheet .cv-face .ef-xp{display:flex}   /* у «Моїх картках» «Деталі ⌄» на звороті — як у грі, відкриває «Пояснення» (Влад 16.10.2026) */
/* Бічні стрілки перегляду в «Моїх картках» — як .ww-arrow онбордингу: скляні кружки посередині висоти картки (16.10.2026). */
.ap-view.in-sheet .cv-stage{overflow:clip;margin:0 -16px}
.cv-arrow{position:absolute;top:50%;z-index:3;width:40px;height:40px;margin-top:-20px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;color:#fff;
  background:var(--ios-glass-fill);-webkit-backdrop-filter:var(--ios-glass-frost);backdrop-filter:var(--ios-glass-frost);box-shadow:var(--ios-glass-shadow),var(--ios-glass-rim);
  transition:scale .45s cubic-bezier(.2,1.3,.35,1),opacity .2s ease}
.cv-arrow svg{width:18px;height:18px}
.cv-arrow.is-prev{left:12px}.cv-arrow.is-next{right:12px}
.cv-arrow:not(:disabled):active{scale:1.08;transition:scale .14s cubic-bezier(.2,.9,.3,1)}
.cv-arrow:disabled{opacity:0;pointer-events:none}
/* Іконка засвоєння — «яскравість картки» (16.10.2026): картка 10:13 світлішає з міцністю; нова — контур; без карток — порожнє місце. */
.fx-sheet .ap-str{flex:none;width:18px;height:23px;margin-right:14px;border-radius:5px;background:rgba(244,240,231,var(--o,.1))}
.fx-sheet .ap-str.is-new{background:none;box-shadow:inset 0 0 0 1.8px rgba(118,118,128,.6)}
.fx-sheet .ap-str.is-none{background:none}
/* Міцність картки під нею в перегляді «Моїх карток» (16.10.2026): іконка «яскравість картки» + текст, нейтрально. */
.ap-view.in-sheet .cv-str{flex:none;display:flex;align-items:center;justify-content:center;gap:0;margin:10px 0 0;font:700 15px/20px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.ap-view.in-sheet .cv-str .ap-str{width:14px;height:18px;margin-right:8px;border-radius:4px}
.ap-view.in-sheet .cv-str{position:absolute;left:0;right:0;top:calc(50% + var(--ef-w,300px) * .65 + 18px);margin:0;pointer-events:none}   /* одразу під карткою */
/* Шкала теми — сегменти по картці під назвою (16.10.2026): яскравість = міцність картки; нова — порожній сегмент. */
.fx-sheet .ap-segs{display:flex;gap:2px;height:4px;margin-top:7px}
.fx-sheet .ap-segs b{flex:1;min-width:2px;border-radius:2px;background:rgba(244,240,231,var(--o,.1))}
.fx-sheet .ap-segs b.is-new{background:rgba(118,118,128,.35)}
.fx-sheet .ap-segs b{background:rgba(244,240,231,calc(var(--o,.1) * .72 + .28))}.fx-sheet .ap-segs b.is-new{background:rgba(118,118,128,.22)}   /* зіграні помітно світліші за нові навіть на рівні 0–1 */
/* Шкала теми — одна лінія (Влад 16.10.2026): світле заповнення на темній доріжці, частка = засвоєння теми. */
.fx-sheet .ap-mline{display:block;height:4px;margin-top:7px;border-radius:2px;background:rgba(118,118,128,.28);overflow:clip}
.fx-sheet .ap-mline i{display:block;height:100%;width:calc(var(--o,0) * 100%);border-radius:2px;background:#f4f0e7}
/* Рядок теми A (16.10.2026): назва + «6 / 6» в одному рядку, лінія засвоєння під ними на всю ширину до шеврона/галочки. */
.fx-sheet .ap-ttop{display:flex;align-items:baseline;gap:10px;min-width:0}
.fx-sheet .ap-ttop .one{flex:1;min-width:0}
.fx-sheet .ap-tnum{flex:none;font:700 13px/18px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label);font-variant-numeric:tabular-nums}
.fx-sheet .saved-row.is-topic .ap-mline{margin-top:8px}
.fx-sheet .saved-row.is-topic .sr-chev,.fx-sheet .saved-row.is-topic .sr-ck{margin-left:10px}
/* «Мої картки» — верх D + фільтр (Влад 16.10.2026, реф «мої-картки-верх.html» D/E). */
.ap-mhero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 0 6px;margin-top:-8px}
.ap-mhero .ap-ic{width:56px;height:56px;border-radius:16px}.ap-mhero .ap-ic svg{width:28px;height:28px}
.ap-msubj2{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:2px 6px;border:0;background:none;color:var(--ios-label);font:900 22px/28px EasyNunito,Nunito,sans-serif;letter-spacing:-.01em;cursor:pointer}
.ap-msubj2 svg{width:13px;height:13px;color:var(--ios-secondary-label)}
.ap-msubj2:active{opacity:.6}
.fx-sheet .ap-mline.ap-mhbar{width:180px;height:5px;margin-top:10px;border-radius:3px}
/* смуга паку: знаю (біле) | вчу (сіре) | нові (порожнє) — Влад 19.10.2026 */
.fx-sheet .ap-mline.ap-pack{display:flex}
.fx-sheet .ap-mline.ap-pack i{flex:none;border-radius:0}
.fx-sheet .ap-mline.ap-pack i.k{background:#8f7bff}
.fx-sheet .ap-mline.ap-pack i.w{background:#f4f0e7}
.fx-sheet .saved-row.is-topic:has(.ap-pack){padding-bottom:22px}
.fx-sheet .saved-row.is-topic .ap-mline.ap-pack{position:absolute;left:var(--ios-list-inset);right:calc(var(--ios-list-inset) + 36px);bottom:11px;height:3px;margin:0}   /* до правого краю числа (виміряно у WebKit: від краю рядка 36px — стрілка й проміжки) */
.fx-sheet .ap-mhcap b{color:var(--ios-label);font-weight:900}
.fx-sheet .ap-mhcap b.k{color:#8f7bff}
.ap-mhcap{margin-top:6px;font:700 13px/18px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.fx-sheet .ap-mfilter{margin:12px 0 4px}
.fx-sheet .ap-mfilter button{display:inline-flex;align-items:center;justify-content:center;gap:5px}
.fx-sheet .ap-mfilter button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.fx-sheet .ap-mfilter button[aria-checked="true"] svg{fill:currentColor}
.ap-mempty{margin-top:22px;text-align:center}
.ap-mhero{margin-top:16px}   /* блок предмета — нижче від шапки «Мої картки» (Влад 16.10.2026) */
/* Свайп предмета в «Моїх картках» (16.10.2026): блок рухається за пальцем; крапки — скільки предметів і де ти. */
.ap-mhero{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.ap-mdots{display:flex;gap:6px;margin-top:10px}.ap-mdots i{width:6px;height:6px;border-radius:50%;background:rgba(235,235,245,.22)}.ap-mdots i.on{background:var(--ios-label)}
.ap-mdots{display:none}
/* Вигляд «Модулі | Картки» під фільтром (16.10.2026): підпис ліворуч, дві маленькі іконки-перемикачі праворуч. */
.ap-mview{display:flex;align-items:center;justify-content:space-between;margin:12px 4px 0 16px}
.ap-mview-l{font:700 13px/18px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.ap-mview-t{display:flex;gap:2px;padding:3px;border-radius:999px;background:#1c1c1e}
.ap-mview-t button{display:grid;place-items:center;width:38px;height:30px;border:0;border-radius:999px;background:none;color:var(--ios-secondary-label);cursor:pointer}
.ap-mview-t button svg{width:18px;height:18px}
.ap-mview-t button[aria-checked="true"]{background:#3a3a3e;color:var(--ios-label)}
.fx-sheet .ap-mview+.set-lhead.set-mhead{margin-top:10px}
/* Фільтр-меню в рядку вигляду (16.10.2026): «Усі ⌄» ліворуч, іконки вигляду праворуч; великий перемикач фільтра прибрано. */
.ap-mview{margin:16px 4px 0 6px}
.ap-mfbtn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:0;border-radius:999px;background:none;color:var(--ios-label);font:800 17px/22px EasyNunito,Nunito,sans-serif;cursor:pointer}
.ap-mfbtn i{font-style:normal;font-weight:600;color:var(--ios-secondary-label)}
.ap-mfbtn svg{width:13px;height:13px;color:var(--ios-secondary-label)}
.ap-mfbtn:active{background:rgba(118,118,128,.2)}
.ap-pop.ap-fpop{right:auto;width:250px}
.ap-mview{margin:20px 4px 0;padding-top:14px;border-top:.5px solid rgba(84,84,88,.65)}   /* лінія-розмежування між верхом (предмет, міцність) і списком тем (Влад 16.10.2026) */
/* Рядок «Усі, за програмою [⋯]» і меню «⋯» з розділами (16.10.2026), як «Вигляд» у Файлах iOS. */
.ap-mview .ap-mfbtn{font:700 15px/20px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label);padding:6px 4px;max-width:calc(100% - 56px);white-space:nowrap;overflow:clip;text-overflow:ellipsis}
.ap-mopt{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:rgba(118,118,128,.22);color:var(--ios-label);cursor:pointer}
.ap-mopt svg{width:20px;height:20px}
.ap-mopt:active{background:rgba(118,118,128,.36)}
.ap-pop.ap-opop{left:auto;right:16px;width:250px;padding:4px 6px 6px}
.ap-psec{margin:10px 10px 2px;font:700 12px/16px EasyNunito,Nunito,sans-serif;letter-spacing:.02em;color:rgba(244,240,231,.5)}
.ap-orow{min-height:40px}
.ap-orow .ap-prow-t b{font-size:15.5px}
/* Інструменти списку (16.10.2026): фільтр, сортування, вигляд — праворуч у рядку; змінене — підсвічене. */
.ap-mtools{flex:none;display:flex;align-items:center;gap:6px}
.ap-mic{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:#1c1c1e;color:var(--ios-secondary-label);cursor:pointer}
.ap-mic svg{width:18px;height:18px}
.ap-mic.is-set{background:#3a3a3e;color:var(--ios-label)}
.ap-mic:active{background:#2c2c2e}
.ap-mview .ap-mfbtn{max-width:none;flex:1;min-width:0;padding:2px 0;line-height:24px;overflow-x:clip;overflow-y:visible}   /* верх великих літер Nunito не зрізається (Влад 28.10.2026: «обрізається Усі») */
/* Одна іконка «Сортувати й фільтрувати» без контейнера (16.10.2026); підменю в тому ж вікні. */
.ap-mic{background:none;width:36px;height:36px;color:var(--ios-label)}
.ap-mic.is-set{background:none;color:#fff}
.ap-mic.is-set::after{content:"";position:absolute;width:7px;height:7px;margin:-14px -16px 0 0;border-radius:50%;background:#f4f0e7}
.ap-mic{position:relative}.ap-mic svg{width:22px;height:22px}
.ap-mic:active{background:rgba(118,118,128,.2)}
.ap-oval{flex:none;margin-left:auto;font:400 15px/20px EasyNunito,Nunito,sans-serif;color:rgba(244,240,231,.6)}
.ap-orow>svg{flex:none;width:14px;height:14px;margin-left:6px;color:rgba(244,240,231,.4)}
.ap-oback{gap:6px;min-height:40px;color:#f4f0e7}.ap-oback>svg{width:14px;height:14px;transform:scaleX(-1);color:rgba(244,240,231,.6)}
.ap-oback b{font-size:15.5px;font-weight:800}
.ap-mic.is-set::after{top:5px;right:4px;margin:0}   /* крапка — змінено сортування чи фільтр */
/* Перемикач вигляду — знову в капсулі (Влад 16.10.2026: «це стосується вигляду»); іконки тонкі (1.6), як сортування поруч, яке без підкладки. */
.ap-mview-t button svg{width:20px;height:20px}
.ap-mtools{gap:2px}
/* «Позначити як засвоєну» і підтвердження — як у грі (easy-brand.css #detailSheet .dt-learned / .dt-confirm), 16.10.2026. */
.ap-xpsheet .dt-learned{flex:none;display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin:16px 0 calc(12px + env(safe-area-inset-bottom));padding:12px 18px;border:0;border-radius:999px;
  background:rgba(255,255,255,.06);box-shadow:0 8px 20px rgba(0,0,0,.18);font:700 16px/1.3 EasyNunito,Nunito,sans-serif;letter-spacing:var(--ios-body-ls);color:#d5d5da;cursor:pointer}
.ap-xpsheet .dt-learned:active{background:rgba(255,255,255,.14)}
.ap-xpsheet .dt-learned.is-done{box-shadow:none;background:none;color:#8e8e96;cursor:default}
/* Унизу перегляду картки «Мої картки» (19.10.2026): та сама кнопка; натиснута — «Засвоєна» світліше, повторний тап знімає позначку. */
.fx-sheet .ap-sheet-actions .dt-learned{flex:none;display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin:0;padding:12px 18px;border:0;border-radius:999px;
  background:rgba(255,255,255,.06);box-shadow:0 8px 20px rgba(0,0,0,.18);font:700 16px/1.3 EasyNunito,Nunito,sans-serif;letter-spacing:var(--ios-body-ls);color:#d5d5da;cursor:pointer;-webkit-tap-highlight-color:transparent}
.fx-sheet .ap-sheet-actions .dt-learned[hidden]{display:none}
.fx-sheet .ap-sheet-actions .dt-learned:active{background:rgba(255,255,255,.14)}
.fx-sheet .ap-sheet-actions .dt-learned.is-on{background:rgba(255,255,255,.14);color:#fff}
.fx-sheet .ap-sheet-actions .dt-learned.is-done{box-shadow:none;background:none;color:#8e8e96;cursor:default}
.fx-sheet .ap-mlearn-note{margin:8px 0 0;text-align:center;font:600 13px/18px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.fx-sheet .ap-mlearn-note[hidden]{display:none}
.ap-xpsheet .dt-confirm{padding:30px 8px 8px;text-align:center}
.ap-xpsheet .dt-confirm-q{margin:0;color:#eeedf3;font:700 21px/1.35 EasyNunito,Nunito,sans-serif;letter-spacing:-.01em}
.ap-xpsheet .dt-confirm-actions{display:flex;gap:12px;margin:24px 0 0}
.ap-xpsheet .dt-confirm-actions button{flex:1;min-height:52px;border:0;border-radius:999px;font:700 16px/1.2 EasyNunito,Nunito,sans-serif;cursor:pointer}
.ap-xpsheet .dt-confirm-yes{background:rgba(255,255,255,.06);color:#a6a6b2}
.ap-xpsheet .dt-confirm-no{background:rgba(255,255,255,.14);color:#eeedf3}
.ap-xpsheet .dt-confirm-actions button:active{transform:scale(.98)}
.ap-xpsheet .dt-confirm-note{margin:18px 8px 0;color:#a6a6b2;font:600 13px/1.45 EasyNunito,Nunito,sans-serif}
/* Шапка перегляду: міцність з іконкою; під карткою — номер «3 з 6» (16.10.2026). */
.fx-sheet .sheet-head h3 small.cv-count{display:flex;align-items:center;justify-content:center;gap:6px}
.fx-sheet .sheet-head h3 small.cv-count .ap-str{width:10px;height:13px;margin:0;border-radius:3px}
.ap-view.in-sheet .cv-str{font-variant-numeric:tabular-nums}
.fx-sheet .sheet-head h3 small.cv-count.is-solo{margin:0;font:var(--ios-headline) EasyNunito,Nunito,sans-serif;color:var(--ios-label)}.fx-sheet .sheet-head h3 small.cv-count.is-solo .ap-str{width:13px;height:17px;border-radius:4px}   /* лише міцність — як заголовок */
/* Міцність у куті картки — 5 крапок (16.10.2026). */
.ap-ctag.is-dots{display:flex;align-items:center;gap:calc(var(--u) * 5);padding:calc(var(--u) * 11) calc(var(--u) * 13) calc(var(--u) * 11) calc(var(--u) * 14)}
.ap-ctag.is-dots i{width:calc(var(--u) * 9);height:calc(var(--u) * 9);border-radius:50%;background:rgba(25,25,32,.14)}
.ap-ctag.is-dots i.on{background:#191920}
/* Крапки міцності в рядку картки (16.10.2026): після відповіді в другому рядку. */
.fx-sheet .saved-row .sr-t small:has(.ap-sdots){display:flex;align-items:center;gap:10px}
.fx-sheet .ap-sdots{flex:none;display:inline-flex;gap:3px}
.fx-sheet .ap-sdots i{width:6px;height:6px;border-radius:50%;background:rgba(235,235,245,.2)}
.fx-sheet .ap-sdots i.on{background:var(--ios-label)}
.fx-sheet .ap-sdots.is-new{font:700 11px/1 EasyNunito,Nunito,sans-serif;color:rgba(235,235,245,.55)}
/* «Картка наповнюється» в рядках карток (16.10.2026): контур + світла заливка, при показі один раз піднімається (0,9 с). */
.fx-sheet .ap-fill{flex:none;width:20px;height:26px;margin-right:14px;overflow:visible}
.fx-sheet .ap-fill-rise{transform-box:fill-box;transform-origin:bottom;animation:apFillRise .9s cubic-bezier(.22,1,.36,1) both}
@keyframes apFillRise{from{transform:translateY(100%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.fx-sheet .ap-fill-rise{animation:none}}
/* Кут картки в перегляді «Моїх карток»: мініатюра з заливкою міцності (16.10.2026); анімація підйому — та сама. */
.ap-ctag.is-fill{display:grid;place-items:center;padding:calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 9) calc(var(--u) * 13)}
.ap-ctag.is-fill svg{width:calc(var(--u) * 17);height:calc(var(--u) * 22);overflow:visible}
.ap-ctag .ap-fill-rise{transform-box:fill-box;transform-origin:bottom;animation:apFillRise .9s cubic-bezier(.22,1,.36,1) both}
@media (prefers-reduced-motion:reduce){.ap-ctag .ap-fill-rise{animation:none}}
/* Стрік — бейдж на краю аватарки профілю (16.10.2026): синій, коли сьогодні вже грав, інакше сірий (0 — теж показується). */
.ap-prof{position:relative}
.ap-sbadge{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);white-space:nowrap;display:inline-flex;align-items:center;gap:1px;height:20px;padding:0 7px 0 4px;border-radius:999px;background:#2a2930;color:rgba(235,235,245,.72);font:900 12px/1 EasyNunito,Nunito,sans-serif;font-variant-numeric:tabular-nums;pointer-events:none}
.ap-sbadge svg{width:14px;height:14px;display:block}
.ap-sbadge .fl-o{fill:currentColor}.ap-sbadge .fl-i{fill:#2a2930}
.ap-sbadge.is-on{background:#2b47e6;color:#fff}.ap-sbadge.is-on .fl-i{fill:#2b47e6}
/* Кольорова аватарка профілю (16.10.2026): перша літера пошти на градієнті; колір сталий — з хешу пошти (data-av 0–5). */
.ap-prof[data-av]{background:var(--av);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.18)}
.ap-prof[data-av]:active{background:var(--av)}
.ap-prof[data-av="0"]{--av:linear-gradient(160deg,#ff9a6b,#ec5a5f)}
.ap-prof[data-av="1"]{--av:linear-gradient(160deg,#ffc56b,#f08a45)}
.ap-prof[data-av="2"]{--av:linear-gradient(160deg,#62d6a6,#2b9f78)}
.ap-prof[data-av="3"]{--av:linear-gradient(160deg,#66ccff,#2f86ea)}
.ap-prof[data-av="4"]{--av:linear-gradient(160deg,#b896ff,#7657ee)}
.ap-prof[data-av="5"]{--av:linear-gradient(160deg,#ff8ec0,#de4f90)}
/* Профіль (16.10.2026, реф — профіль Claude iOS): велика аватарка, «Редагувати фото», поля «Псевдонім» / «Пошта». */
.ap-av-img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.ap-prof:has(.ap-av-img){background:none;box-shadow:none}
.fx-sheet .ap-pf-top{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;margin:8px 0 22px}
.fx-sheet .ap-pf-av{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;background:var(--av);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);color:#fff;font:800 44px/1 EasyNunito,Nunito,sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.18)}
.fx-sheet .ap-pf-av:has(.ap-av-img){background:none;box-shadow:none}
.ap-pf-av[data-av="0"]{--av:linear-gradient(160deg,#ff9a6b,#ec5a5f)}
.ap-pf-av[data-av="1"]{--av:linear-gradient(160deg,#ffc56b,#f08a45)}
.ap-pf-av[data-av="2"]{--av:linear-gradient(160deg,#62d6a6,#2b9f78)}
.ap-pf-av[data-av="3"]{--av:linear-gradient(160deg,#66ccff,#2f86ea)}
.ap-pf-av[data-av="4"]{--av:linear-gradient(160deg,#b896ff,#7657ee)}
.ap-pf-av[data-av="5"]{--av:linear-gradient(160deg,#ff8ec0,#de4f90)}
.fx-sheet .ap-pf-edit{min-height:36px;padding:0 16px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:transparent;color:var(--ios-label);font:800 15px/1 EasyNunito,Nunito,sans-serif;cursor:pointer}
.fx-sheet .ap-pf-edit:active{background:rgba(255,255,255,.06)}
.fx-sheet .ap-pf-menu{position:absolute;top:calc(100% - 4px);left:50%;z-index:3;min-width:220px;padding:6px;border-radius:16px;background:#2c2c2e;box-shadow:0 12px 32px rgba(0,0,0,.45);transform:translate(-50%,-6px) scale(.96);opacity:0;transition:opacity .18s ease,transform .22s cubic-bezier(.2,.9,.3,1)}
.fx-sheet .ap-pf-menu.show{opacity:1;transform:translate(-50%,0)}
.fx-sheet .ap-pf-menu button{display:block;width:100%;padding:12px 14px;border:0;border-radius:10px;background:none;color:var(--ios-label);font:400 16px/1.2 EasyNunito,Nunito,sans-serif;text-align:left;cursor:pointer}
.fx-sheet .ap-pf-menu button:active{background:rgba(255,255,255,.08)}
.fx-sheet .ap-pf-menu .is-del{color:#ff8a80}
.fx-sheet .ap-pf-row{display:flex;align-items:center;gap:16px;min-height:54px;padding:0 16px;font:400 17px/22px EasyNunito,Nunito,sans-serif;color:var(--ios-label)}
.fx-sheet .ap-pf-row+.ap-pf-row{box-shadow:inset 0 .5px 0 var(--ios-separator,rgba(84,84,88,.6))}
.fx-sheet .ap-pf-row>span{flex:none;width:96px;color:var(--ios-secondary-label)}
.fx-sheet .ap-pf-row input{flex:1;min-width:0;height:54px;padding:0;border:0;background:none;color:var(--ios-label);font:inherit;outline:none}
.fx-sheet .ap-pf-row input::placeholder{color:var(--ios-tertiary-label,rgba(235,235,245,.3))}
.fx-sheet .ap-pf-row b{flex:1;min-width:0;font-weight:400;white-space:nowrap;overflow:clip;text-overflow:ellipsis}
/* Колода на головній = «Грати» (16.10.2026): рука підказки ворушиться, як у грі; натиск — легке стискання. */
.ap-deck[role="button"]{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .5s var(--ios-spring,cubic-bezier(.2,.9,.3,1))}
.ap-deck[role="button"]:active{transform:scale(.97);transition-duration:.16s}
.ap-deck[role="button"]:focus-visible{outline:2px solid rgba(255,255,255,.7);outline-offset:6px;border-radius:calc(var(--u) * 40)}
.ap-top .ef-hint svg{animation:ef-tap 4s ease-in-out 1.5s infinite}
@media (prefers-reduced-motion:reduce){.ap-top .ef-hint svg{animation:none}}
/* Головна D (16.10.2026): шапка — профіль | «Флешкартки» | «Мої картки»; колода, під нею предмет як підпис; свайп — сусідній предмет. */
.ap-bar.ap-bar-d{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:8px;margin:6px 0 10px}
.ap-bar-d .ap-mine{margin:0}
.ap-bar-d .ap-title{text-align:center;font:800 17px/22px EasyNunito,Nunito,sans-serif;letter-spacing:-.01em;color:#f4f0e7;white-space:nowrap}
.ap-swipe{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;touch-action:pan-y;overflow:clip;overflow-clip-margin:16px}
.ap-swipe>.ap-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.ap-swipe>.ap-empty{flex:1}
.ap-side{position:absolute;top:calc(50% - 30px);width:min(46%,190px);aspect-ratio:10/13;translate:0 -50%;border-radius:22px;background:linear-gradient(#e9e8f0,#d8d7e2);opacity:.08;pointer-events:none}
.ap-side.l{right:calc(100% - 10px)}.ap-side.r{left:calc(100% - 10px)}
.ap-sblock{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.ap-swipe>.ap-sblock{margin:0 0 18px}
.ap-sname{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:4px 8px 4px 14px;border:0;border-radius:999px;background:none;color:#f4f0e7;font:800 20px/1.2 EasyNunito,Nunito,sans-serif;letter-spacing:-.01em;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s ease}
.ap-sname:active{background:rgba(244,240,231,.06)}
.ap-sname>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw}
.ap-sname>i{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.1);transition:transform .3s var(--ios-spring,ease)}
.ap-sname>i svg{width:12px;height:12px}
#flow.ap-menu-open .ap-sname>i{transform:rotate(180deg)}
#flow.ap-menu-open .ap-sblock{position:relative;z-index:31}
.ap-sline{display:flex;align-items:center;gap:10px;font:800 13px/1 EasyNunito,Nunito,sans-serif;color:rgba(244,240,231,.6);font-variant-numeric:tabular-nums}
.ap-sline .ap-prog{width:120px;height:5px}
.ap-pop.is-up{top:auto}
.ap-empty>.ap-sblock{margin-top:14px}
/* Сусідні предмети по боках (16.10.2026): справжні картки, у спокої видно лише край; під час свайпу виїжджають за пальцем. */
.ap-reel{position:relative;flex:none}
.ap-peek{position:absolute;left:0;top:0;width:var(--ef-w,220px);aspect-ratio:10/13;--u:calc(var(--ef-w,220px) / 344);opacity:.14;pointer-events:none}
.ap-peek.l{transform:translateX(calc(var(--po,400px) * -1))}.ap-peek.r{transform:translateX(var(--po,400px))}
.ap-swipe:not(.is-drag) .ap-reel{transition:transform .34s cubic-bezier(.22,1,.36,1)}
.ap-swipe:not(.is-drag) :is(.ap-peek,.ap-deck,.ap-sblock){transition:opacity .34s ease}
.ap-swipe.is-go .ap-reel{transition-timing-function:cubic-bezier(.4,0,.2,1)}
.ap-cover{position:relative;display:grid;place-items:center;background:rgba(var(--acc),.16)}
.ap-cover-ic{display:grid;place-items:center;width:42%;aspect-ratio:1;border-radius:24%;background:rgba(var(--acc),.22);color:rgb(var(--acc))}
.ap-cover-ic svg{width:56%;height:56%}
.ap-cover .ap-ctag{color:rgba(25,25,32,.62)}
.ap-snote{flex:none;margin:0 0 6px;padding:0 12px;text-align:center;font:700 15px/1.4 EasyNunito,Nunito,sans-serif;color:rgba(244,240,231,.6);text-wrap:balance}
@media (prefers-reduced-motion:reduce){.ap-swipe .ap-reel,.ap-swipe :is(.ap-peek,.ap-deck,.ap-sblock){transition:none}}
/* Головна з порталом (16.10.2026; реф «Реф дизайн/Кабінет/головна-портал.html»): стос із 3 карток виходить з порталу гри. */
.ap-pstage{position:relative;flex:1;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;--ef-w:220px;--u:calc(var(--ef-w) / 344);--pc:65,32,248;--pc2:138,120,255;--pcw:232,226,255}
.ap-pbox{position:relative;align-self:stretch;flex:none;height:calc(var(--ef-w) * 1.3 * .94)}
.ap-pclip{position:absolute;z-index:1;left:-16px;right:-16px;top:0;bottom:2px;clip-path:inset(-100vh 0 0 0)}   /* ріже лише знизу (лінія порталу), зверху задні картки не обрізаються */
.ap-pcard{position:absolute;left:50%;bottom:0;width:var(--ef-w);aspect-ratio:10/13;margin-left:calc(var(--ef-w) / -2);border-radius:calc(var(--u) * 30);
  background:linear-gradient(168deg,#fff,#eef0f3);box-shadow:0 calc(var(--u) * 18) calc(var(--u) * 40) calc(var(--u) * -12) rgba(0,0,0,.55);overflow:hidden;transform:translateY(102%)}
.ap-pcard.is-back{background:radial-gradient(120% 80% at 20% 0%,#7f6bff 0%,transparent 55%),linear-gradient(160deg,#5236ff,#3014cf);box-shadow:0 22px 44px -18px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.25)}   /* сорочка — як на заставці гри (.fl-back) */
.ap-pcard.is-back::before{content:"";position:absolute;inset:calc(var(--u) * 14);border-radius:calc(var(--u) * 20);border:1.5px solid rgba(255,255,255,.22);background:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 8px,transparent 8px 16px)}
.ap-pcard.is-back img{position:absolute;left:50%;top:42%;width:62%;transform:translate(-50%,-50%);opacity:.95}
.ap-pcard.pc3,.ap-pcard.pc2{filter:brightness(.72)}   /* задні — симетричні й однаково притемнені */
.ap-pcard.pc1{cursor:pointer;-webkit-tap-highlight-color:transparent}
.ap-pcard.pc1 .ef-media{position:relative}
.ap-pstage.is-up .pc3{animation:apUp3 .9s cubic-bezier(.2,1.25,.35,1) .2s both}
.ap-pstage.is-up .pc2{animation:apUp2 .9s cubic-bezier(.2,1.25,.35,1) .36s both}
.ap-pstage.is-up .pc1{animation:apUp1 .95s cubic-bezier(.2,1.2,.35,1) .52s both,apBob 3.6s ease-in-out 1.6s infinite}
@keyframes apUp3{from{transform:translateY(102%)}to{transform:translate(-26px,3%) rotate(-7deg)}}
@keyframes apUp2{from{transform:translateY(102%)}to{transform:translate(26px,3%) rotate(7deg)}}
@keyframes apUp1{from{transform:translateY(102%)}to{transform:translateY(14%)}}
@keyframes apBob{0%,100%{translate:0 0}50%{translate:0 -5px}}
/* портал — як у грі (classic-reference .portal, вид «aurora»), лінія = низ сцени */
.ap-portal{position:absolute;z-index:3;left:50%;bottom:0;width:calc(var(--ef-w) + 40px);height:0;transform:translateX(-50%);pointer-events:none}
.ap-portal .p-halo{position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);width:130%;height:70px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(var(--pc),.5),rgba(var(--pc2),.16) 46%,transparent 72%);filter:blur(12px);animation:apBreathe 2.8s ease-in-out infinite}
.ap-portal .p-dissolve{position:absolute;left:0;right:0;bottom:-10px;height:30px;
  background:linear-gradient(90deg,transparent,rgba(var(--pc2),.42) 15%,rgba(var(--pcw),.9) 50%,rgba(var(--pc2),.42) 85%,transparent);filter:blur(5px);animation:apBreathe 2.8s ease-in-out infinite}
.ap-portal .p-line{position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(var(--pcw),.62) 17%,#fff 50%,rgba(var(--pcw),.62) 83%,transparent);box-shadow:0 0 18px rgba(var(--pc2),1),0 1px 24px rgba(var(--pc),.7)}
.ap-portal .p-flash{position:absolute;left:50%;bottom:-44px;transform:translateX(-50%);width:90%;height:96px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--pcw),.9),rgba(var(--pc2),.34) 42%,transparent 72%);opacity:0}
.ap-portal.flash .p-flash{animation:apFlash .55s ease-out}
@keyframes apBreathe{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes apFlash{0%{opacity:0;transform:translateX(-50%) scale(.7)}18%{opacity:1}100%{opacity:0;transform:translateX(-50%) scale(1.25)}}
.ap-pstage>.ap-sblock{margin:0}
/* блок «Наступна гра» в один ряд */
.ap-next.ap-next-a{display:flex;align-items:center;gap:14px;width:100%;border:0;text-align:left;color:inherit;font:inherit;cursor:pointer;margin-top:8px;padding:12px 16px}
.ap-next.ap-next-a:active{transform:scale(.98);background:#242426}
.ap-cic{position:relative;flex:none;width:52px;height:60px}
.ap-cic i{position:absolute;border-radius:9px;font-style:normal}
.ap-cic .k2{left:12px;top:0;width:38px;height:50px;background:rgba(244,240,231,.26);transform:rotate(9deg)}
.ap-cic .k1{left:2px;bottom:0;width:38px;height:50px;background:#f4f0e7;color:#191920;display:grid;place-items:center;font:900 18px EasyNunito,Nunito,sans-serif;box-shadow:0 3px 8px rgba(0,0,0,.35)}
.ap-nbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ap-nbody>small{font:800 12px EasyNunito,Nunito,sans-serif;color:rgba(235,235,245,.6)}
.ap-n3s{display:flex;gap:22px}
.ap-n3{display:flex;flex-direction:column;gap:2px}.ap-n3 b{font:900 20px/1 EasyNunito,Nunito,sans-serif;color:#f4f0e7}.ap-n3 small{font:700 12px EasyNunito,Nunito,sans-serif;color:rgba(235,235,245,.6)}
.ap-next-a .sr-chev{flex:none;width:14px;height:14px;color:rgba(235,235,245,.45)}.ap-next-a .sr-chev svg{width:100%;height:100%}
.ap-next-a .ap-nempty{font:700 14px EasyNunito,Nunito,sans-serif;color:#f4f0e7}
/* «Грати»: меню сходить */
.ap-phome :is(.ap-bar,.ap-sblock,.ap-next){transition:opacity .3s ease,transform .45s cubic-bezier(.55,0,.75,.2)}
.ap-phome.is-going :is(.ap-sblock,.ap-next){opacity:0;transform:translateY(40px)}.ap-phome.is-going .ap-bar{opacity:0}
.ap-dock{transition:opacity .3s ease,transform .45s cubic-bezier(.55,0,.75,.2)}.ap-dock.is-going{opacity:0;transform:translateY(60px)}
@media (prefers-reduced-motion:reduce){.ap-pstage.is-up .ap-pcard{animation:none!important}.ap-pstage .pc1{transform:translateY(14%)}.ap-pstage .pc2{transform:translate(26px,3%) rotate(7deg)}.ap-pstage .pc3{transform:translate(-26px,3%) rotate(-7deg)}.ap-portal :is(.p-halo,.p-dissolve){animation:none}}
/* Одна картка + «Тягни, щоб почати» (16.10.2026) */
.ap-pcard.pc1{touch-action:none;cursor:grab}
.ap-pstage.is-pulling .pc1{cursor:grabbing}
.ap-pull{flex:none;display:inline-flex;align-items:center;gap:6px;margin:0;font:800 14px/1 EasyNunito,Nunito,sans-serif;color:rgba(235,235,245,.62);transition:opacity .25s ease}
.ap-pull svg{width:15px;height:15px;animation:apPullNudge 1.8s ease-in-out infinite}
@keyframes apPullNudge{0%,100%{transform:translateY(-2px);opacity:.6}50%{transform:translateY(3px);opacity:1}}
.ap-pstage:is(.is-pulling,.is-going) .ap-pull{opacity:0}
@media (prefers-reduced-motion:reduce){.ap-pull svg{animation:none}}

.ap-pcard.pc1{cursor:grab}   /* тягни — не тап (16.10.2026) */

.ef-media:has(+ .ap-ctag.is-out){border-top-right-radius:0}
/* Плашка кута — на картці, над кутом картинки (16.10.2026): не всередині обрізаної картинки, тож край картинки під нею не просвічує сірим контуром; біла облямівка перекриває межу. */
.ap-ctag.is-out{top:calc(var(--u) * 13 - 1px);right:calc(var(--u) * 14 - 1px);z-index:2;box-shadow:0 0 0 1px #fff}

/* Блок «Наступна гра» B (16.10.2026): тип гри в куті, числа сіткою, смужка й список тем, розгортання на місці. */
.ap-next.ap-next-b{position:relative;display:block;margin-top:8px;padding:14px 16px 6px}
.ap-gtype{position:absolute;top:13px;right:14px;padding:3px 9px;border-radius:999px;background:rgba(155,139,255,.18);color:#c9c0ff;font:800 11.5px/1.2 EasyNunito,Nunito,sans-serif;white-space:nowrap}
.ap-gtype.is-own{background:rgba(255,255,255,.1);color:#f4f0e7}
.ap-nhrow{display:flex;align-items:center;gap:14px}
.ap-g3{display:grid;grid-template-columns:repeat(3,1fr);margin-top:8px}
.ap-g3 span{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}.ap-g3 span+span{border-left:.5px solid rgba(84,84,88,.55)}
.ap-g3 b{font:900 21px/1 EasyNunito,Nunito,sans-serif;color:#f4f0e7}.ap-g3 small{font:700 12px EasyNunito,Nunito,sans-serif;color:rgba(235,235,245,.6)}
.ap-tbar{display:flex;gap:2px;height:7px;margin-top:12px;border-radius:4px;overflow:hidden}
.ap-tbar i{display:block;height:100%;background:var(--c);flex:1 1 0}
.ap-tlist{margin-top:4px}
.ap-trow{display:flex;align-items:center;gap:10px;min-height:42px;border-bottom:.5px solid rgba(84,84,88,.5);font:700 15px EasyNunito,Nunito,sans-serif;color:#f4f0e7}
.ap-trow .sw{flex:none;width:10px;height:10px;border-radius:3px;background:var(--c)}
.ap-trow .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-trow .rep{flex:none;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.08);font:800 11.5px EasyNunito,Nunito,sans-serif;color:rgba(235,235,245,.62)}
.ap-trow .rep svg{width:11px;height:11px}
.ap-trow>b{flex:none;font:800 15px EasyNunito,Nunito,sans-serif}
.ap-tmore{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.2,.8,.2,1)}.ap-tmore>div{overflow:hidden}
.ap-next-b.is-open .ap-tmore{grid-template-rows:1fr}
.ap-tlist>.ap-trow:last-child,.ap-tmore .ap-trow:last-child{border-bottom:0}
.ap-tmore-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:40px;border:0;border-top:.5px solid rgba(84,84,88,.5);background:none;color:rgba(235,235,245,.62);font:800 14px EasyNunito,Nunito,sans-serif;cursor:pointer}
.ap-tmore-btn i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.1);transition:transform .3s ease}.ap-tmore-btn i svg{width:10px;height:10px}
.ap-next-b.is-open .ap-tmore-btn i{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.ap-tmore{transition:none}}
.ap-next-b.is-open .ap-tmore-btn{border-top-color:transparent}   /* розгорнуто — під останньою темою лінії немає */
/* Розгортання поверх (16.10.2026): слот тримає згорнуту висоту, блок прикріплений до низу слоту й росте вгору над карткою й назвою. */
.ap-nslot{position:relative;flex:none;margin-top:8px}
.ap-nslot>.ap-next.ap-next-b{position:absolute;left:0;right:0;bottom:0;margin:0;z-index:5;transition:box-shadow .3s ease}
.ap-nslot>.ap-next-b.is-open{box-shadow:0 -18px 40px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.06)}
.ap-next.ap-next-b{padding-bottom:4px}
.ap-tmore-btn{margin-top:10px}
.ap-next-b.is-open .ap-tlist{margin-top:6px}
.ap-tmore-btn{border-top:0}   /* під смужкою тем лінії немає (16.10.2026) */
/* Спокійне розгортання тем (16.10.2026): висота й прозорість списку разом, плавно в обидва боки. */
.ap-tmore{transition:grid-template-rows .42s cubic-bezier(.32,.72,0,1)}
.ap-tmore>div{opacity:0;transition:opacity .25s ease}
.ap-next-b.is-open .ap-tmore>div{opacity:1;transition:opacity .3s ease .08s}
.ap-nslot>.ap-next.ap-next-b{transition:box-shadow .42s ease}
.ap-tlist{margin-top:0;transition:margin-top .42s cubic-bezier(.32,.72,0,1)}
.ap-next-b.is-open .ap-tlist,.ap-tlist{margin-top:0}
.ap-tmore>div>.ap-trow:first-child{margin-top:6px}   /* відступ — усередині списку, щоб місце блоку не змінювалось */
.ap-tmore .ap-tbar{margin:12px 0 4px}
.ap-tmore>div>.ap-trow:first-of-type{margin-top:0}
.ap-tmore-btn{margin-top:6px}
/* Блок без іконки (16.10.2026): напис типу гри по центру, три числа на всю ширину по центру колонок. */
.ap-nhead-b{display:flex;justify-content:center}
.ap-nhead-b .ap-gtype{position:static;font-size:12.5px;padding:4px 11px}
.ap-next-b .ap-g3{margin-top:12px}
/* Матовий блок «Наступна гра» (16.10.2026): напівпрозоре скло з розмиттям — розгорнутий, він розмиває картку під собою. */
.ap-nslot>.ap-next.ap-next-b{background:rgba(44,44,50,.42);-webkit-backdrop-filter:blur(24px) saturate(1.5);backdrop-filter:blur(24px) saturate(1.5);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.08)}
.ap-nslot>.ap-next-b.is-open{box-shadow:0 -18px 40px rgba(0,0,0,.45),inset 0 0 0 .5px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.08)}
.ap-pcard .ef-hint{visibility:hidden}   /* на головній підказка лежить у порталі — не видно й не заважає назві предмета */
.fx-sheet .ap-pf-row b{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}   /* довга пошта переноситься, не обрізається */
.ap-pcard:has(.ap-cover) .ef-q{flex:none;margin-top:calc(var(--u) * 12);font-size:calc(var(--u) * 22)}   /* «Скоро»: напис над порталом, не в ньому */
/* Без білого спалаху на старті (17.10.2026): поки скрипт не показав перший екран (#flow ще без data-page), сторінка вже темна,
   а старий світлий контейнер схований — на сайті модулі вантажаться довше, і раніше спершу видно було білу «шторку». */
:root:not(:has(#flow[data-page])),:root:not(:has(#flow[data-page])) body{background:#16151a}
:root:not(:has(#flow[data-page])) .fx-bg{display:block}
#flow:not([data-page]){visibility:hidden}
/* Стандартизація вибору (17.10.2026): «Що грати» = список «Моїх карток» у режимі вибору; назви тем — повністю, з переносом, скрізь. */
.fx-sheet .saved-row.is-topic .one{white-space:normal;overflow:visible;text-overflow:clip}
.fx-sheet .saved-row.is-topic .ap-ttop{align-items:baseline}
.ap-trow .nm{white-space:normal;overflow:visible;text-overflow:clip;padding:10px 0}
.ap-trow{align-items:center}
.ap-setsh .ap-mview{margin-top:6px;padding-top:0;border-top:0}
.fx-sheet .ap-phead{align-items:center}
.fx-sheet .ap-phead .ap-phr{display:inline-flex;align-items:center;gap:14px;flex:none}
.fx-sheet .ap-phead>span:first-child{min-width:0}
.fx-sheet .saved-row.is-pick .sr-ck{margin-left:10px}
.fx-sheet .saved-row.is-pick .sr-ck:empty{width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(235,235,245,.28)}   /* не обрано — порожнє коло, щоб було видно: тут можна обрати */
.fx-sheet .sr-ck.is-part{color:var(--ios-label)}

/* Портал головної = портал гри (Влад 17.10.2026; classic-reference .portal + easy-brand.css): білий, без дихання; розкривається на вході
   й лишається відкритим — з нього виглядає ~86 % картки (низ картки — у горловині). */
.ap-pstage{--pc:255,255,255;--pc2:255,255,255;--pcw:255,255,255}
.ap-portal{opacity:0;transition:opacity .45s ease-out}
.ap-portal :is(.p-halo,.p-dissolve){animation:none}
.ap-portal .p-halo{bottom:-8px;width:110%;height:28px;background:radial-gradient(ellipse,rgba(255,255,255,.3),transparent 70%);filter:blur(11px)}
.ap-portal .p-dissolve{bottom:-2px;height:16px;background:radial-gradient(ellipse,rgba(255,255,255,.55),transparent 70%)}
.ap-portal .p-line{transform:scaleX(.58);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7) 20%,#fff 50%,rgba(255,255,255,.7) 80%,transparent);
  box-shadow:0 0 12px rgba(255,255,255,.85),0 1px 14px rgba(255,255,255,.5);transition:transform 120ms ease-out,box-shadow 120ms ease-out}
.ap-portal.active .p-line{transform:scaleX(1);box-shadow:0 0 18px #fff,0 1px 24px rgba(255,255,255,.7)}
@media (prefers-reduced-motion:reduce){.ap-portal,.ap-portal .p-line{transition:none}}

/* Порожня «Своя гра» (17.10.2026): три рядки списку вибору; галочки з'являються в 1-му й 3-му (вибір, не «все»), потім знімаються — по колу. */
.ap-pcard.pc1.is-pick{cursor:pointer;touch-action:manipulation}
.ap-pcard.pc1.is-pick:active{scale:.98}
.ap-pk{display:flex;flex-direction:column;gap:calc(var(--u) * 12);width:70%}
.ap-pk i{display:flex;align-items:center;gap:calc(var(--u) * 12);height:calc(var(--u) * 46);padding:0 calc(var(--u) * 14);border-radius:calc(var(--u) * 14);
  background:rgba(255,255,255,.72);box-shadow:0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(var(--acc),.12)}
.ap-pk b{position:relative;flex:none;width:calc(var(--u) * 22);height:calc(var(--u) * 22);border-radius:50%;box-shadow:inset 0 0 0 calc(var(--u) * 2.4) rgba(var(--acc),.4)}
.ap-pk b::after{content:"";position:absolute;inset:0;border-radius:50%;scale:0;
  background:rgb(var(--acc)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/64% no-repeat}
.ap-pk s{flex:1;height:calc(var(--u) * 9);border-radius:99px;background:rgba(25,25,32,.13);text-decoration:none}
.ap-pk i:nth-child(2) s{flex:none;width:46%}
.ap-pk i:nth-child(3) s{flex:none;width:62%}
.ap-pk i:nth-child(1) b::after{animation:apPk1 4.2s cubic-bezier(.3,1.5,.5,1) 1.4s infinite}
.ap-pk i:nth-child(3) b::after{animation:apPk3 4.2s cubic-bezier(.3,1.5,.5,1) 1.4s infinite}
.ap-pk i:nth-child(1){animation:apPkRow1 4.2s ease 1.4s infinite}
.ap-pk i:nth-child(3){animation:apPkRow3 4.2s ease 1.4s infinite}
@keyframes apPk1{0%,6%{scale:0}14%,84%{scale:1}92%,100%{scale:0}}
@keyframes apPk3{0%,30%{scale:0}38%,84%{scale:1}92%,100%{scale:0}}
@keyframes apPkRow1{0%,6%,92%,100%{background:rgba(255,255,255,.72)}14%,84%{background:#fff}}
@keyframes apPkRow3{0%,30%,92%,100%{background:rgba(255,255,255,.72)}38%,84%{background:#fff}}
@media (prefers-reduced-motion:reduce){.ap-pk i,.ap-pk b::after{animation:none!important}.ap-pk i:is(:nth-child(1),:nth-child(3)) b::after{scale:1}}

/* «Що грати» (Влад 17.10.2026): кружечок вибору — зліва, перед назвою (замок замкненої теми — на тому ж місці), кількість — справа;
   роздільник починається від тексту, як у списках iOS з лівим елементом. Угорі — пошук. */
.fx-sheet .saved-row.is-pick .sr-ck,.fx-sheet .saved-row.is-pick.is-topic .sr-ck{margin:0}
.fx-sheet .saved-row.is-pick .ap-lock{display:grid;place-items:center;width:20px;height:20px}.fx-sheet .saved-row.is-pick .ap-lock svg{width:18px;height:18px}
.fx-sheet .saved-row.is-pick::before{left:calc(var(--ios-list-inset) + 32px)}
.fx-sheet .ap-psearch{margin:4px 0 8px}
/* Обране в «Що грати» (Влад 17.10.2026): кружечок зліва — заповнене коло з галочкою (частково — з рискою); нейтральне світле, не акцент (акцент — лише кнопка). */
.fx-sheet .saved-row.is-pick .sr-ck:not(:empty){display:grid;place-items:center;border-radius:50%;background:var(--ios-label);color:#1c1c1e}
.fx-sheet .saved-row.is-pick .sr-ck:not(:empty) svg{width:13px;height:13px;stroke-width:3.4}
/* Рядок теми в «Що грати» (17.10.2026, варіант Б): рядок відкриває тему («N ›»), кружечок — прозора кнопка поверх лівої зони (вся висота рядка),
   без підсвітки при натисканні — змінюється лише кружечок. */
.fx-sheet .ap-pkrow{position:relative}
.fx-sheet .ap-pkrow:not(:first-child)>.saved-row::before{display:block}
.fx-sheet .ap-pck{position:absolute;top:0;bottom:0;left:calc(-1 * var(--ios-list-inset));z-index:1;width:calc(var(--ios-list-inset) + 40px);margin:0;padding:0;border:0;
  background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.fx-sheet .ap-pck:focus{outline:none}
.fx-sheet .ap-pck:focus-visible{outline:2px solid rgba(235,235,245,.6);outline-offset:-4px;border-radius:12px}
.fx-sheet .ap-pkrow .saved-row .sr-chev{margin-left:8px}
.fx-sheet .ap-pkrow .ap-tnum:empty{display:none}
.fx-sheet .ap-pkrow .ap-pnum{flex:none;font:800 15px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
/* Проти місклік (Влад 17.10.2026): межа двох дотиків = початок тексту. Кружечок відсунуто від назви на 16 px; зона «обрати» — від краю групи
   до тексту (16 + 20 + 16 = 52 px ≥ 44 px HIG, на всю висоту рядка), усе від тексту праворуч — «відкрити тему». Центр кружечка на 26 px від краю:
   палець, що цілить у кружечок, з похибкою ±20 px лишається в його зоні. Те саме вирівнювання — в усіх рядках вибору (замки, картки). */
.fx-sheet .saved-row.is-pick{gap:16px}
.fx-sheet .saved-row.is-pick::before{left:calc(var(--ios-list-inset) + 36px)}
.fx-sheet .ap-pck{width:calc(var(--ios-list-inset) + 36px)}
/* Мерехтіння «Обери хоча б одну картку» (Влад 17.10.2026): неактивна кнопка була прозорою двічі — фон 8 % білого і opacity .55
   (загальне button:disabled) — під час в'їзду «Що грати» крізь неї пропливали рядки списку й проявлялася тінь, кнопка світлішала й темнішала.
   Тепер непрозора, з тими самими кольорами, що виходили на тлі шторки: фон #262628, текст — 33 % світлого. */
.fx-sheet .set-reset.is-primary:disabled,.fx-sheet .set-reset.is-primary:disabled:active{opacity:1;background:#262628;color:rgba(235,235,245,.33)}
/* Зміна вигляду: переходи кольорів — у flash-win-light.css (генерує win-light.py: лише там, де властивість задана). */
/* «Тягни, щоб почати» ближче до картки (Влад 17.10.2026: «цілісно, але не дуже близько»): було 33–39 px, стало ~19–25 px; 11 px (setup-163) — заблизько. */
.ap-pstage .ap-pull{margin-bottom:-14px}
/* «Тягни, щоб почати» — лише після того, як картка вийшла з порталу (Влад 17.10.2026): картка виходить 0,52 + 0,95 с (apUp1);
   оболонка ставить .is-ready через 1,35 с — підпис проявляється. Потягнув / «Грати» — ховається (правило нижче), відпустив — одразу повертається. */
.ap-pstage .ap-pull{opacity:0;transform:translateY(6px);transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1)}
.ap-pstage.is-ready .ap-pull{opacity:1;transform:none}
.ap-pstage.is-ready:is(.is-pulling,.is-going) .ap-pull{opacity:0;transition-duration:.25s}
/* Риска порталу головної — поява як у грі (Влад 17.10.2026; easy-brand.css #portal): 0,16 с. Розмір і вигляд — як були (картка + 40 px). */
.ap-portal{transition:opacity .16s ease-out}
/* Риска гасне, як у грі (easy-brand.css #portal.closing): стягується до 35 % і зникає за 0,32 с. */
.ap-portal.closing{opacity:0!important;transition:opacity .32s ease-out}
.ap-portal.closing .p-line{transform:scaleX(.35);transition:transform .32s ease-in}
.ap-pcard.is-pick .ef-q{flex:1;margin-top:0;font-size:calc(var(--u) * 25)}   /* порожня «Своя гра»: напис як на картках гри, не притиснутий під картинку («Скоро» — як був) */

/* ===== Кінець гри в акаунті (Влад 17.10.2026; реф «Реф дизайн/Кабінет/кінець-гри-кроки.html», сценарій 1): стрік → результат з печаткою.
   Шар на весь екран: список гортається, кнопки закріплені внизу; ✕ — останнім. ===== */
.rs2{position:fixed;inset:0;z-index:30;color:#f4f0e7;font-family:EasyNunito,Nunito,sans-serif;
  background:radial-gradient(120% 70% at 50% 0%,#1b1922 0%,#131218 46%,#0f0e14 100%)}
.rs2-scr{position:absolute;inset:0;display:flex;flex-direction:column;visibility:hidden}
.rs2-scr.is-on{visibility:visible}
.rs2-scr.is-out{animation:rs2Out .36s cubic-bezier(.5,0,.75,0) forwards}
@keyframes rs2Out{to{opacity:0;transform:translateY(-24px) scale(.98)}}
.rs2-rise{opacity:0;transform:translateY(14px)}
.is-play .rs2-rise{animation:rs2Rise .5s cubic-bezier(.2,.9,.25,1) forwards}
.is-play .rs2-r1{animation-delay:var(--d1)}.is-play .rs2-r2{animation-delay:calc(var(--d1) + .12s)}.is-play .rs2-r3{animation-delay:calc(var(--d1) + .24s)}.is-play .rs2-r4{animation-delay:calc(var(--d1) + .36s)}
.rs2-st{--d1:1s}.rs2-res{--d1:1.05s}
@keyframes rs2Rise{to{opacity:1;transform:none}}
@keyframes rs2Fade{to{opacity:1}}
/* ✕ — скляна, як у шторках; з'являється останнім (кнопки внизу закінчують на d1 + .86 с) */
.rs2-x{position:absolute;top:max(14px,var(--sat,env(safe-area-inset-top)));right:16px;z-index:6;width:var(--ios-glass-size);height:var(--ios-glass-size);border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--ios-vibrant-label);background:var(--ios-glass-fill);-webkit-backdrop-filter:var(--ios-glass-frost);backdrop-filter:var(--ios-glass-frost);box-shadow:var(--ios-glass-shadow),var(--ios-glass-rim),var(--ios-glass-edges);opacity:0;
  transition:transform .55s var(--ios-spring)}
.rs2-x svg{width:18px;height:18px}
.rs2-x:active{transform:scale(var(--ios-press-scale))}
.is-play .rs2-x{animation:rs2Fade .35s ease calc(var(--d1) + .9s) forwards}
.rs2-dock{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:34px 18px max(18px,env(safe-area-inset-bottom));background:linear-gradient(to top,#0f0e14 58%,rgba(15,14,20,0))}
.rs2-dock.rs2-rise{transform:translateY(40px)}
.rs2-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:56px;border:0;border-radius:999px;background:#4120f8;color:#fff;font:800 17px EasyNunito,Nunito,sans-serif;cursor:pointer;
  box-shadow:0 10px 26px -10px rgba(65,32,248,.8);transition:scale .14s ease}
.rs2-cta:active{scale:.98}
.rs2-cta small{display:block;margin-top:1px;font:700 12px EasyNunito,Nunito,sans-serif;color:rgba(255,255,255,.76)}
.rs2-alt{display:block;width:100%;min-height:44px;margin-top:6px;border:0;background:none;color:rgba(235,235,245,.7);font:800 15px EasyNunito,Nunito,sans-serif;cursor:pointer}
/* 1) стрік */
.rs2-st-in{flex:1;display:flex;flex-direction:column;align-items:center;padding:max(70px,calc(var(--sat,env(safe-area-inset-top)) + 56px)) 22px 0}
.rs2-fire{display:flex;flex-direction:column;align-items:center}
.rs2-fire svg{width:118px;height:118px;transform:scale(.3);opacity:0;filter:drop-shadow(0 0 22px rgba(43,71,230,.8))}
.rs2-fire svg .fl-o{fill:#2b47e6}.rs2-fire svg .fl-i{fill:#9fb0ff}
.is-play .rs2-fire svg{animation:rs2Flame .7s cubic-bezier(.3,1.5,.5,1) .15s forwards,rs2Flick 1.8s ease-in-out .95s infinite}
@keyframes rs2Flame{to{transform:scale(1);opacity:1}}
@keyframes rs2Flick{0%,100%{transform:scale(1)}50%{transform:scale(1.04) translateY(-2px)}}
.rs2-flip{margin-top:-14px;height:84px;overflow:hidden;font:900 80px/84px EasyNunito,Nunito,sans-serif;color:#fff;text-align:center;opacity:0}
.rs2-flip span{display:block}
.is-play .rs2-flip{animation:rs2Fade .3s ease .45s forwards}
.is-play .rs2-flip span{animation:rs2Flip .6s cubic-bezier(.5,0,.2,1.3) 1.05s forwards}
@keyframes rs2Flip{to{transform:translateY(-84px)}}
.rs2-days{margin:8px 0 0;font:900 22px EasyNunito,Nunito,sans-serif;color:#c9cfff}
.rs2-wk{display:flex;justify-content:space-between;width:100%;max-width:300px;margin-top:30px;padding:16px 14px 14px;border-radius:22px;background:#1c1c1e}
.rs2-wk div{display:flex;flex-direction:column;align-items:center;gap:8px;width:30px}
.rs2-wk small{font:800 12px EasyNunito,Nunito,sans-serif;color:rgba(235,235,245,.5)}
.rs2-wk b{position:relative;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#2c2c30}
.rs2-wk b.ok{background:#2b47e6}
.rs2-wk b.ok::after,.is-play .rs2-wk .is-today b::after{content:"";width:11px;height:6px;margin-top:-3px;border:solid #fff;border-width:0 0 2.6px 2.6px;transform:rotate(-45deg)}
.rs2-wk .is-today small{color:#c9cfff}
.is-play .rs2-wk .is-today b{animation:rs2Today .5s cubic-bezier(.3,1.6,.5,1) 1.3s forwards}
.is-play .rs2-wk .is-today b::after{transform:rotate(-45deg) scale(0);animation:rs2Chk .3s ease 1.45s forwards}
@keyframes rs2Today{0%{transform:scale(1)}50%{transform:scale(1.25);background:#2b47e6;box-shadow:0 0 0 6px rgba(43,71,230,.25)}100%{transform:scale(1);background:#2b47e6}}
@keyframes rs2Chk{to{transform:rotate(-45deg) scale(1)}}
.rs2-hint{margin:14px 0 0;max-width:280px;text-align:center;font:700 14px/1.4 EasyNunito,Nunito,sans-serif;color:rgba(235,235,245,.7)}.rs2-hint b{color:#c9cfff}
/* 2) результат */
.rs2-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 18px 170px;scrollbar-width:none}.rs2-scroll::-webkit-scrollbar{display:none}
.rs2-seg{display:flex;gap:4px;padding:4px;margin:18px 0 10px;border-radius:999px;background:#1c1c1e;position:sticky;top:8px;z-index:3;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.rs2-seg button{flex:1;min-height:40px;border:0;border-radius:999px;background:none;color:rgba(235,235,245,.7);font:800 15px EasyNunito,Nunito,sans-serif;cursor:pointer;transition:background-color .2s,color .2s}
.rs2-seg button i{font-style:normal;margin-left:6px;color:rgba(235,235,245,.45)}
.rs2-seg button[aria-checked="true"]{background:#636366;color:#f4f0e7}.rs2-seg button[aria-checked="true"] i{color:rgba(235,235,245,.7)}
.rs2-gap{height:18px}
.rs2-list{border-radius:22px;background:#1c1c1e;padding:0 16px}
.rs2-row{padding:12px 0;border-bottom:.5px solid rgba(84,84,88,.55)}.rs2-row:last-child{border-bottom:0}
.rs2-row b{display:block;font:700 15.5px/1.3 EasyNunito,Nunito,sans-serif}.rs2-row b em{font-style:normal;color:#8f7bff}
.rs2-row small{display:block;margin-top:3px;font:700 13px EasyNunito,Nunito,sans-serif;color:rgba(235,235,245,.7)}
.rs2-list.is-swap{animation:rs2Swap .28s ease forwards}   /* forwards: інакше після перемикання список повертається до прихованого стану появи (.rs2-rise) */
@keyframes rs2Swap{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rs2 *,.rs2 *::before,.rs2 *::after{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}}

/* Результат — вікно на весь екран (Влад 17.10.2026, реф «Реф дизайн/Кабінет/результат-вікно.html», B): стилістика вікна (фон, шапка, ✕, клітинки),
   без краю шторки й грабера; у шапці лише «Гру завершено», під нею лічильники, далі картки. Печатку прибрано. Підтримує «Світлі вікна» (.rs2-res — вікно в win-light.py). */
.rs2-res{--d1:.1s;background:var(--ios-sheet-bg);color:var(--ios-label)}
.rs2-head{position:relative;flex:none;display:flex;align-items:center;justify-content:center;min-height:calc(72px + var(--sat,env(safe-area-inset-top)));padding:max(14px,var(--sat,env(safe-area-inset-top))) 72px 0}
.rs2-head h1{margin:0;text-align:center;font:var(--ios-headline) EasyNunito,Nunito,sans-serif;font-weight:800;letter-spacing:var(--ios-headline-ls);outline:none}
.rs2-res .rs2-x{top:max(14px,var(--sat,env(safe-area-inset-top)))}
.rs2-res .rs2-scroll{padding-top:0}
.rs2-facts{margin:2px 0 14px;text-align:center;font:700 15px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.rs2-facts b{color:var(--ios-label);font-weight:900}
.rs2-res .rs2-seg{margin:4px 0 12px;top:0;background:var(--ios-cell-bg);box-shadow:0 6px 18px rgba(0,0,0,.3)}
.rs2-res .rs2-seg button{color:var(--ios-secondary-label)}
.rs2-res .rs2-seg button[aria-checked="true"]{background:var(--ios-gray2);color:var(--ios-label)}
.rs2-res .rs2-list{background:var(--ios-cell-bg)}
.rs2-res .rs2-row{border-bottom-color:var(--ios-separator)}
.rs2-res .rs2-row small{color:var(--ios-secondary-label)}
.rs2-res .rs2-dock{background:linear-gradient(to top,#1c1c1e 58%,rgba(28,28,30,0))}
.rs2-res .rs2-alt{color:var(--ios-secondary-label)}
.rs2-cta.is-white{background:#fff;color:#1c1c1e;box-shadow:0 12px 28px -12px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.3)}   /* своя гра — вихід білий, як «Готово» у вікнах */
.rs2-cta.is-white:active{background:rgba(255,255,255,.82)}
/* Кінець гри на широкому екрані (Влад 17.10.2026: «странна фігня з адаптом»): з 600 px кабінет — картка 440 px по центру, тож стрік і результат
   займають рівно її (а не все вікно браузера); висота картки — як у головної. На телефоні — весь екран, як і було. */
@media(min-width:600px){
  html:not(.embedded) #flow.sheet[data-page="result"]:has(.rs2):not(#_){height:min(900px,calc(100dvh - 48px))}
  html:not(.embedded) .rs2{position:absolute;inset:0;border-radius:var(--ios-list-radius,26px);overflow:hidden}   /* кути — як у вікон кабінету */
}

/* Фон кінця гри — як у грі (Влад 17.10.2026: «не годиться, коли вікном»): без фону вікна; на ≥ 600 px — без картки, колонка на тлі гри (.fx-bg), як головна.
   Клітинки й перемикач — темні, як на головній; «Світлі вікна» результат не чіпають (це не вікно). Своя гра — вихід білий, як і був. */
.rs2-res{background:none;color:#f4f0e7}
.rs2-facts{color:rgba(235,235,245,.7)}.rs2-facts b{color:#f4f0e7}
.rs2-res .rs2-seg{background:#1c1c1e;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.rs2-res .rs2-seg button{color:rgba(235,235,245,.7)}
.rs2-res .rs2-seg button[aria-checked="true"]{background:#636366;color:#f4f0e7}
.rs2-res .rs2-list{background:#1c1c1e}
.rs2-res .rs2-row{border-bottom-color:rgba(84,84,88,.55)}
.rs2-res .rs2-row small,.rs2-res .rs2-alt{color:rgba(235,235,245,.7)}
.rs2-res .rs2-dock{background:linear-gradient(to top,#0f0e14 58%,rgba(15,14,20,0))}
@media(min-width:600px){html:not(.embedded) .rs2:not(#_){background:none;border-radius:0;overflow:visible}}
/* «Тягни, щоб почати» на iPhone (Влад 17.10.2026, відео IMG_0996): власний шар (iOS перемальовує його і під час дотику), зникнення — ще й видимістю
   (після згасання), стрілка не анімується, поки тягнеш / «Грати». Правило з досвіду: те, що має зникати під час дотику, не ховати лише плавною прозорістю класу. */
.ap-pstage .ap-pull{will-change:opacity;transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s}
.ap-pstage.is-ready:is(.is-pulling,.is-going) .ap-pull{visibility:hidden;transition:opacity .25s ease,transform .45s ease,visibility 0s .25s}
.ap-pstage:is(.is-pulling,.is-going) .ap-pull svg{animation:none}
/* Розгорнутий блок «Наступна гра» (Влад 17.10.2026: «занадто сильно просвічується»): у розгорнутому стані майже непрозорий — інформацію добре видно. */
.ap-nslot>.ap-next-b.is-open{background:rgba(28,28,32,.92)}
.ap-nslot>.ap-next.ap-next-b{transition:box-shadow .42s ease,background-color .42s ease}   /* фон розгортання — плавно */
/* Головна не гортається (Влад 17.10.2026, відео IMG_1001): на iPhone одразу після завантаження 100dvh інколи більший за видиму область, і сторінка
   «їздила» на ~30 px; після повернення з іншого застосунку — ні. Сторінки кабінету тепер зафіксовані: документ без прокрутки, висота — реальна
   висота вікна (--app-h з window.innerHeight, оновлюється на resize / pageshow / повернення). Гортаються лише списки всередині. */
html:not(.embedded):has(#flow:is([data-page="home"],[data-page="topic"],[data-page="card"],[data-page="result"])),
html:not(.embedded):has(#flow:is([data-page="home"],[data-page="topic"],[data-page="card"],[data-page="result"])) body{height:100%;overflow:hidden;overscroll-behavior:none}
@media(max-width:599px){html:not(.embedded) #flow.sheet:is([data-page="home"],[data-page="topic"],[data-page="card"]):not(#_){height:var(--app-h,100dvh)}}
/* Результат (Влад 17.10.2026): кнопка внизу біла завжди; шапка — стандарт шторок («Мої картки», «Що грати»): коли список прокручено, під шапкою
   тінь кольору фону гри (до ~24 px нижче шапки) — картки не обрізаються різко. */
.rs2-cta.is-white small{color:rgba(28,28,30,.6)}
.rs2-cta.is-white{box-shadow:0 12px 28px -12px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.3)}
.rs2-res .rs2-head{z-index:3}
.rs2-res .rs2-head::after{content:"";position:absolute;left:0;right:0;top:100%;height:24px;pointer-events:none;opacity:0;transition:opacity .2s ease;
  background:linear-gradient(to bottom,rgba(24,23,30,.94),rgba(24,23,30,0))}
.rs2-res.is-scrolled .rs2-head::after{opacity:1}
.rs2-res .rs2-seg{z-index:4}   /* закріплений перемикач — над тінню шапки, лишається чітким; тінь лягає лише на картки під ним */
/* перемикач закріплений угорі списку — тінь стоїть під ним (там, де картки зникають), а не під шапкою */
.rs2-res .rs2-head::after{content:none}
.rs2-res .rs2-seg::after{content:"";position:absolute;left:-18px;right:-18px;top:-8px;bottom:-28px;z-index:-1;pointer-events:none;opacity:0;transition:opacity .2s ease;
  background:linear-gradient(to bottom,rgba(22,21,28,1) 0,rgba(22,21,28,.94) calc(100% - 28px),rgba(22,21,28,0) 100%)}
.rs2-res.is-scrolled .rs2-seg::after{opacity:1}

/* Зміна «Світлі вікна» — один плавний перехід усього екрана (FlashSheet.themeFade, View Transitions), 0,45 с. */
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:ease}
a[x-apple-data-detectors]{color:inherit!important;text-decoration:none!important;font:inherit!important;pointer-events:none}   /* iOS: розпізнані дані не підкреслювати (разом із meta format-detection) */
/* Кількість карток теми — праворуч по центру рядка, поруч зі стрілочкою, в усіх списках тем (Влад 17.10.2026) */
.fx-sheet .ap-ttop .ap-tnum:empty{display:none}
.fx-sheet .saved-row .ap-pnum{flex:none;font:800 15px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.fx-sheet .saved-row .ap-pnum+.sr-chev{margin-left:8px}
/* Положення шторки — від ОДНІЄЇ висоти екрана (Влад 17.10.2026, відео IMG_1008: «припригування»): --app-h (window.innerHeight, flashcards.js), як і жест
   (flash-sheet.js); раніше CSS брав 100dvh / 84dvh, а жест — innerHeight, і на телефоні після відпускання шторка доїжджала на кілька px. */
.ap-sheet.fx-sheet{height:min(calc(var(--app-h,100dvh) * .84),calc(var(--app-h,100dvh) - 16px));max-height:min(calc(var(--app-h,100dvh) * .84),calc(var(--app-h,100dvh) - 16px))}
.ap-sheet.fx-sheet.is-full{height:calc(var(--app-h,100dvh) - 12px);max-height:calc(var(--app-h,100dvh) - 12px)}
/* Зміна вигляду: власні переходи елементів вимкнено на час переходу всього екрана (FlashSheet.themeFade) */

/* Поле нижче верхньої зони — тимчасовий запас знизу, щоб вміст підняв поле під шапку перед клавіатурою (flashcards.js lift, Влад 17.10.2026). */
.sheet-body.kb-room{padding-bottom:calc(var(--app-h,100dvh) * .6)!important}
/* Версія внизу профілю (бета) — дрібно, третинним кольором. */
.ap-ver{margin:20px 0 4px;text-align:center;font-size:12px;line-height:16px;color:var(--ios-tertiary-label)}

/* Блок «Наступна гра» — ОДИН матеріал у обох станах (Влад 18.10.2026: «повинно зберігати один вигляд матовості та прозорості»): раніше згорнутий був
   склом (.42), розгорнутий — щільним (.92), і колір перетікав 0,42 с — поки блок ріс угору, крізь нього проступали назва предмета й низ картки.
   Тепер завжди щільний мат з тим самим розмиттям; на темному тлі згорнутий виглядає як і був (заміри 27·27·31 в обох станах). Тінь угору — лише розгорнутому. */
/* Повністю щільний: на початку розгортання WebKit на кадр-два не застосовує розмиття, і 8 % прозорості показували назву предмета. Колір = той, що видно (27·27·31). */
.ap-nslot>.ap-next.ap-next-b,.ap-nslot>.ap-next-b.is-open{background:#1b1b1f;-webkit-backdrop-filter:none;backdrop-filter:none}
.ap-nslot>.ap-next.ap-next-b{transition:box-shadow .42s ease}

/* Капсула-перемикач як UISegmentedControl (Влад 18.10.2026; flash-sheet.js segment): обране — окрема плашка .fs-thumb під кнопками, перебігає кривою UIKit;
   затиснута — стискається до 0,95 і тягнеться пальцем. Кнопки самі вже не фарбують обране — лише колір тексту. */
.fs-seg{position:relative;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.fs-seg>button{position:relative;z-index:1}
.fs-seg>button[aria-checked="true"]:not(#_),.fs-seg>button[aria-selected="true"]:not(#_){background:transparent!important;box-shadow:none!important}
.fs-seg>button.is-press:not([aria-checked="true"]){opacity:.55}
.fs-thumb{position:absolute;left:0;z-index:0;pointer-events:none;transform-origin:center;will-change:transform;
  transition:transform .3s cubic-bezier(.32,.72,0,1),width .3s cubic-bezier(.32,.72,0,1),opacity .2s ease}
.fx-sheet .fs-seg>.fs-thumb{background:var(--ios-gray2);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
/* світлі вікна — плашка біла: правило в win-light.py FIXES (генератор інакше перевертає його колір) */
.rs2-seg.fs-seg>.fs-thumb{background:#636366}
@media(prefers-reduced-motion:reduce){.fs-thumb{transition:none}}

/* Перемикач вигляду «Модулі | Картки» — одна капсула (Влад 18.10.2026: «один контейнер повинен бути, оскільки це перемикач»): доріжка видима (як «Карток у грі»),
   обране — та сама плашка .fs-thumb. Раніше доріжка мала колір фону вікна, і видно було лише плашку обраного. */
.fx-sheet .ap-mview-t{background:var(--ios-cell-bg)}
.fx-sheet .ap-mview-t>button[aria-checked="true"]{color:var(--ios-label)}
.fx-sheet .ap-mview+.fs-swap>.set-lhead.set-mhead:first-child{margin-top:10px}   /* список у блоці .fs-swap — той самий відступ, що був без обгортки */

/* Контроли за правилами iOS (Влад 18.10.2026, «стандартизація»): два види. Капсула (UISegmentedControl) — тап і тягнути; повзунок (UISwitch) — тап.
   В обох натиснуте — скляна лінза (iOS 26): біле 9 %, обідок 0,5 pt, м'яка тінь — та сама, що в повзунка гри (easy-brand.css). */
.fs-thumb{transition:transform .3s cubic-bezier(.32,.72,0,1),width .3s cubic-bezier(.32,.72,0,1),opacity .2s ease,background-color .2s ease,box-shadow .2s ease}
/* Натиснута / у русі — скляна лінза, як кнопка повзунка (Apple iOS 26 UI Kit: thumb під час взаємодії — Liquid Glass). */
.fs-seg>.fs-thumb.is-lens:not(#_){background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 .5px #ccc,0 7px 12px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}

/* Списки вікон — без пружини на краю (overscroll-behavior:none): як у UISheet, біля верху тягнеш — їде шторка, вміст не пружинить; тож і touchmove скасовувати не треба — тап не губиться (18.10.2026). */

/* Капсула, переробка (18.10.2026): лінза росте розміром (width/height/top — та сама крива, що рух), підписи міняють колір разом із плашкою. */
.fs-thumb:not(#_){transition:transform .3s cubic-bezier(.32,.72,0,1),width .3s cubic-bezier(.32,.72,0,1),height .3s cubic-bezier(.32,.72,0,1),top .3s cubic-bezier(.32,.72,0,1),
  opacity .2s ease,background-color .2s ease,box-shadow .2s ease}
.fs-seg>button:not(#_){transition:color .3s cubic-bezier(.32,.72,0,1),opacity .2s ease}
.fs-seg>button.is-press:not([aria-checked="true"]):not(#_){opacity:.5}

/* Перегляд карток у «Моїх картках» (Влад 18.10.2026): картка — угорі вікна (12 px), стрілки — по її центру, «N з M» — одразу під нею.
   Гортання плавне: бічні (заздалегідь готові) картки — без анімацій сцен, поки картки їдуть — сцени на паузі; шар картки — окремий (will-change). */
/* Уточнення (Влад 18.10.2026: «не повністю доверху, а трішки вище середини, там де прикуті очі»): центр картки — на 42 % висоти вікна перегляду
   (оптичний центр, трохи вище геометричного), але не ближче 12 px до шапки. */
.ap-view.in-sheet .cv-card{--cv-top:max(12px,calc(42% - var(--ef-w,300px) * .65));top:var(--cv-top);margin-top:0;will-change:transform}
.ap-view.in-sheet .cv-arrow{top:max(calc(12px + var(--ef-w,300px) * .65),42%)}
.ap-view.in-sheet .cv-str{top:calc(max(12px,calc(42% - var(--ef-w,300px) * .65)) + var(--ef-w,300px) * 1.3 + 16px)}
.cv-card.is-side .ef-media *,.cv-stage.is-moving .cv-card .ef-media *{animation-play-state:paused!important}

/* Док головної (Влад 18.10.2026, «Реф дизайн/Кабінет/візуал-головна-вибір.html»): налаштування гри — скло, як ✕ і кнопки гри (2A), 18 px — пара до «Грати»;
   «Грати» — синя зі скляним обідком: світло зверху й тонкий обідок, значок ▶ (4A). */
.ap-sq:not(#_){background:var(--ios-glass-fill);-webkit-backdrop-filter:var(--ios-glass-frost);backdrop-filter:var(--ios-glass-frost);
  box-shadow:var(--ios-glass-rim),var(--ios-glass-edges),var(--ios-glass-shadow);color:var(--ios-vibrant-label);transition:transform .5s var(--ios-spring),background-color .3s ease}
.ap-sq:not(#_):active{transform:scale(1.06);background:var(--ios-glass-fill-pressed);transition-duration:.16s,.12s}
#flow[data-page="home"] .ap-dock .ap-playbtn:not(#_){display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 .5px rgba(255,255,255,.2),0 10px 24px -10px rgba(65,32,248,.9)}
.ap-playbtn svg{width:16px;height:16px;flex:none}

/* Знак «Інтервальна гра» у чипі (18.10.2026) */
.ap-gtype:not(.is-own){display:inline-flex;align-items:center;gap:6px}
.ap-gtype svg{width:14px;height:14px;flex:none}

/* Google sign-in stays separate from the mail form; the official button owns its branding. */
.google-auth{width:100%;max-width:400px;margin:1.25rem auto 0;text-align:center}
.google-button{display:flex;justify-content:center;align-items:center;min-height:44px}
.google-status{font-size:.875rem;line-height:1.4;margin:.5rem 0;color:inherit}
.google-status:empty{display:none}
.google-or{font-size:.875rem;line-height:1.4;opacity:.8;margin:1rem 0}

.auth-privacy{margin:.5rem 0;text-align:center;font-size:.875rem}.auth-privacy a{display:inline-flex;align-items:center;min-height:44px;color:#96949f;text-decoration:none}

/* Uniform scaling preserves the official Google button proportions and a 44px touch target. */
.google-button{width:calc(100% / 1.1);min-height:40px;margin:2px auto;transform:scale(1.1);transform-origin:center}

/* Account actions share sheet spacing; Google belongs to sign-in, linking is a profile setting. */
#flow[data-page="email"] > #content > .google-auth{margin-top:0}
#flow[data-page="email"] .google-or{margin:12px 0 16px}
.auth .switch{margin-top:12px}
.auth .auth-privacy{margin-top:4px}
.fx-sheet .ap-delete-link{display:block;min-height:44px;width:100%;margin:8px 0 0;padding:10px 16px;border:0;background:none;color:var(--ios-secondary-label);font:400 14px/20px EasyNunito,Nunito,sans-serif}
.fx-sheet .ap-account-copy{margin:0 16px;color:var(--ios-label);font:400 17px/1.5 EasyNunito,Nunito,sans-serif;overflow-wrap:anywhere}
.fx-sheet .ap-account-copy p{margin:0 0 16px}
.fx-sheet .ap-account-email{overflow-wrap:anywhere}
.fx-sheet .ap-account-error{margin:12px 16px;color:#ff9a8f;font:400 14px/1.45 EasyNunito,Nunito,sans-serif}
.fx-sheet .ap-account-error:empty{display:none}
.fx-sheet .set-reset.is-destructive{background:#ff453a;color:#fff}
.fx-sheet .ap-account-code-label{display:block;margin:20px 16px 8px;color:var(--ios-secondary-label);font-size:14px}
.fx-sheet .ap-account-code{display:block;width:100%;min-height:54px;border:1px solid var(--ios-separator);border-radius:16px;padding:12px 16px;background:var(--ios-cell-bg);color:var(--ios-label);font:700 22px/1.3 EasyNunito,Nunito,sans-serif;letter-spacing:8px;text-align:center}
.fx-sheet .saved-row.is-static:disabled{opacity:1}

/* Keep the topic count visible independently of truncation of its name. */
.fx-sheet .sheet-head .ap-topic-heading{display:flex;align-items:baseline;justify-content:center;gap:5px;min-width:0;max-width:100%}
.fx-sheet .sheet-head .ap-topic-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-sheet .sheet-head .ap-topic-heading>.set-cnt{flex:none;white-space:nowrap}
.fx-sheet .ap-phead>span:first-child>.set-cnt{white-space:nowrap}

.fx-sheet .ap-account-address{font-size:17px;letter-spacing:normal;text-align:left}
/* Shared login OTP inside account sheets; colours follow the existing window theme. */
.fx-sheet .otp-cells span{background:var(--ios-cell-bg);color:var(--ios-label)}
.fx-sheet .otp-cells span.is-filled{background:var(--ios-cell-highlight)}
.fx-sheet .otp input{padding:0;border:0;border-radius:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:transparent}
/* Focus is shown on the active digit, including keyboard navigation. */
:root .fx-sheet .otp input:focus-visible,.otp input:focus-visible{outline:none;box-shadow:none}

/* ---------- Індикатор дня (Влад 19.10.2026, реф «Реф дизайн/Кабінет/індикатор-вогонь.html») ----------
   Картка 30×39 у слоті 44 px шапки; розміри в em (1em = 1px), у вікні «Сьогодні» та сама розмітка більша (.gi-big).
   Лице — темно-синє, як зворот; рівень — #4120f8. Ціль — переворот (підйом), синій перетікає у вогонь, номер дня перескакує. */
.ap-bar-d .ap-goal{margin:0}
.gi{position:relative;font-size:1px;width:44em;height:44em;border:0;padding:0;background:none;cursor:pointer;perspective:240em;-webkit-tap-highlight-color:transparent;display:block;flex:none}
.gi:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:12px}
.gi-flip{position:absolute;left:7em;top:2.5em;width:30em;height:39em;transform-style:preserve-3d}
.gi.is-done .gi-flip{animation:giFlip .76s cubic-bezier(.45,0,.25,1) both}
@keyframes giFlip{0%{transform:rotateY(0) scale(1)}45%{transform:rotateY(85deg) scale(1.14)}75%{transform:rotateY(180deg) scale(1.06)}100%{transform:rotateY(180deg) scale(1)}}
.gi-face{position:absolute;inset:0;border-radius:4.4em;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* WebKit не ховає зворот, якщо в ньому фільтри, — боки перемикаються видимістю рівно на середині повороту */
.gi-front{overflow:hidden;background:linear-gradient(180deg,#120763,#22109c);transform:translateZ(.3em);transition:visibility 0s linear .33s}
.gi-front::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .75em #5a3dff;pointer-events:none}
.gi-back{transform:rotateY(180deg) translateZ(.3em);visibility:hidden;transition:visibility 0s linear .33s}
.gi.is-done .gi-front{visibility:hidden}.gi.is-done .gi-back{visibility:visible}
.gi-fill{position:absolute;left:0;right:0;bottom:0;height:0;background:#4120f8;transition:height .75s cubic-bezier(.32,.72,0,1)}
.gi-wave{position:absolute;left:0;top:-2.6em;width:200%;height:3em;animation:giWave 2.4s linear infinite}
.gi-wave path{fill:#4120f8}
@keyframes giWave{to{transform:translateX(-50%)}}
.gi-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2em;line-height:1;pointer-events:none}
.gi-num{font-family:EasyNunito,Nunito,sans-serif;font-weight:900;font-size:15em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em;text-shadow:0 .07em .14em rgba(5,0,40,.35)}
.gi-num.d3{font-size:11.5em;letter-spacing:-.04em}
.gi-of{font-family:EasyNunito,Nunito,sans-serif;font-weight:800;font-size:8.5em;line-height:1;color:rgba(235,235,245,.8);white-space:nowrap}
.gi-of.d3{font-size:7.4em}
.gi-art{position:absolute;left:-10em;top:-15em;width:50em;height:60em;overflow:visible}
/* осіла: після перевороту 3D знято — вогонь горить на пласкому шарі */
.gi.is-settled .gi-flip{animation:none;transform:none}
.gi.is-settled .gi-front{display:none}
.gi.is-settled .gi-back{transform:none;transition:none}
.gi.gi-settle:not(.is-done) .gi-flip{animation:giSettle .45s cubic-bezier(.32,.72,0,1)}
@keyframes giSettle{35%{scale:1.06}100%{scale:1}}
.gi.gi-hit .gi-flip{animation:giHit .46s cubic-bezier(.32,.72,0,1)}   /* удар «+N» (v2): і для палаючої картки — .is-settled не гасить scale */
@keyframes giHit{0%{scale:1}28%{scale:1.09}62%{scale:.98}100%{scale:1}}
.gi.gi-hit.is-lit .gi-back{animation:giFlare .5s cubic-bezier(.32,.72,0,1)}
@keyframes giFlare{30%{filter:brightness(1.35) saturate(1.15)}100%{filter:none}}
.gi-ring{position:absolute;left:7em;top:2.5em;width:30em;height:39em;border-radius:5em;opacity:0;pointer-events:none}
.gi.gi-burst .gi-ring{animation:giRing 1.1s cubic-bezier(.32,.72,0,1) both}
@keyframes giRing{0%{opacity:0;box-shadow:0 0 0 0 rgba(90,61,255,.75)}25%{opacity:1}100%{opacity:0;box-shadow:0 0 0 15em rgba(90,61,255,0)}}
.gi-pt{transform-box:fill-box;transform-origin:50% 50%;animation:giRise var(--t) cubic-bezier(.35,.05,.75,.95) var(--d) infinite}
@keyframes giRise{0%{transform:translate(0,0) scale(.25)}15%{transform:translate(calc(var(--dx) * .1),calc(var(--dy) * .12)) scale(1)}100%{transform:translate(var(--dx),var(--dy)) scale(.08)}}
.gi-layer{transform-box:view-box;transform-origin:50% 92%;transition:transform .9s cubic-bezier(.3,1.25,.5,1),opacity .4s}
.gi:not(.is-lit) .gi-layer{transform:scaleY(0);opacity:0;transition:none}
.fx-sheet.is-paging .gi-pt{animation-play-state:paused}   /* гортання періодів у «Сьогодні» — вогонь стоїть, перехід плавний */
.fx-sheet.is-paging :is(.gt-ds,.gt-dots i){box-shadow:none!important}   /* світіння штампів і точок — дороге в кожному кадрі переходу */
.fx-sheet .gt-pager{overflow:hidden;overflow:clip;touch-action:pan-y;transition:height .38s cubic-bezier(.32,.72,0,1)}   /* стрічка періодів: іде за пальцем */
.fx-sheet .gt-track{display:flex;align-items:flex-start;will-change:transform}
.fx-sheet .gt-pager{margin:-5px}   /* кільце «сьогодні» виходить за клітинку на 3,5 px: стрічка ширша на цей запас, тому край місяця його не обрізає (Влад 02.11.2026) */
.fx-sheet .gt-page{flex:0 0 100%;min-width:0;padding:5px;user-select:none;-webkit-user-select:none}
body:has(.ap-sheet.show) #ap-goal .gi-pt{animation-play-state:paused}   /* вікно відкрите — вогонь у шапці під ним стоїть (не перемальовує екран щокадру) */
.gi.gi-instant :is(.gi-layer,.gi-glow,.gi-ffill,.gi-fill,.gi-front,.gi-back){transition:none!important}   /* миттєвий стан (giSet) */
.gi-glow{transition:opacity .7s}.gi:not(.is-lit) .gi-glow{opacity:0}
.gi:not(.is-lit) .gi-pt,body:has(#play:not([hidden])) .gi-pt{animation-play-state:paused}   /* до займання й під час гри частинки стоять */
.gi-ffill{transition:opacity .9s cubic-bezier(.32,.72,0,1) .1s}.gi.is-lit .gi-ffill{opacity:0}   /* синій заливки перетікає у вогонь */
.gi-day-text{transform-box:view-box;transform-origin:100px 138px}
.gi.gi-tick .gi-day-text{animation:giTick .55s cubic-bezier(.32,.72,0,1)}
@keyframes giTick{0%{transform:none}35%{transform:scale(1.15)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.gi-fill,.gi-layer,.gi-glow,.gi-ffill{transition:none}.gi-wave,.gi.is-done .gi-flip,.gi.gi-settle .gi-flip,.gi.gi-burst .gi-ring,.gi.gi-tick .gi-day-text,.gi.gi-hit .gi-flip,.gi.gi-hit .gi-back{animation:none}.gi.is-done .gi-flip{transform:rotateY(180deg)}.gi-pt{animation-play-state:paused}}
/* «Мої картки» під колодою: іконка карток перед назвою предмета (Влад 19.10.2026), без стрілки меню предметів */
.ap-sname.ap-smine{padding:4px 14px 4px 10px}
.ap-sname.ap-smine>i.ap-smine-ic{width:26px;height:26px;background:none;color:#fff}
.ap-sname.ap-smine>i.ap-smine-ic svg{width:24px;height:24px}
/* Воронка цілі (Влад 19.10.2026, реф «Реф дизайн/Кабінет/воронка-цілі.html») */
/* картка «+N» після гри: з'являється в центрі екрана й летить в індикатор (WAAPI, transform з JS) */
.gi-fly{position:fixed;left:0;top:0;z-index:2147483000;width:60px;height:78px;border-radius:9px;background:#4120f8;box-shadow:inset 0 0 0 1.5px #7a63ff,0 10px 26px rgba(65,32,248,.55);display:grid;place-items:center;color:#fff;font:900 24px/1 EasyNunito,Nunito,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums;pointer-events:none;opacity:0;will-change:transform,opacity}
/* повзунок цілі (iOS): доріжка 6 px, пройдене — #4120f8, біла кулька 28 px */
.gt-range{display:block;width:100%;height:30px;margin:0;-webkit-appearance:none;appearance:none;background:none;--p:0%}
.gt-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#4120f8 var(--p),var(--ios-fill) var(--p))}
.gt-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.3),0 0 0 .5px rgba(0,0,0,.04)}
.gt-range::-moz-range-track{height:6px;border-radius:3px;background:var(--ios-fill)}.gt-range::-moz-range-progress{height:6px;border-radius:3px;background:#4120f8}
.gt-range::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:#fff}
/* «Сьогодні»: зверху ціль, окремо внизу аналітика */
.fx-sheet .gt{display:flex;flex-direction:column;gap:14px;padding:2px 0 16px}
.fx-sheet .gt-sec{border-radius:22px;background:var(--ios-cell-bg,#2c2c2e);padding:16px}
.fx-sheet .gt-h{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:28px;margin:0 2px 12px;font:900 13px/1.2 EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.fx-sheet .gt-h b{color:#c9c0ff;font-weight:900}
.fx-sheet .gt-main{display:flex;align-items:center;gap:14px}
.fx-sheet .gt-main .gi-mid{font-size:1.7px;cursor:default}
.fx-sheet .gt-big{display:block;font:900 30px/1.05 EasyNunito,Nunito,sans-serif;color:var(--ios-label);font-variant-numeric:tabular-nums}
.fx-sheet .gt-big span{font-size:17px;color:var(--ios-secondary-label)}
.fx-sheet .gt-line{display:block;margin-top:4px;font:700 13.5px/1.35 EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.fx-sheet .gt-set{margin-top:14px;padding-top:12px;border-top:.5px solid var(--ios-separator)}
.fx-sheet .gt-lbl{display:flex;justify-content:space-between;margin-bottom:6px;font:800 14px/1.2 EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.fx-sheet .gt-lbl b{color:var(--ios-label);font-variant-numeric:tabular-nums}
.fx-sheet .gt-view{width:auto;margin:0;flex:none}
.fx-sheet .gt-view button{position:relative;min-height:24px;height:24px;padding:0 12px;font-size:12.5px}
/* Compact 28px surface; the transparent touch target remains 44px tall. */
.fx-sheet .gt-view button::after{content:"";position:absolute;inset:-10px 0}
.fx-sheet .gt-wk{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.fx-sheet .gt-wk.is-month{gap:5px}
.fx-sheet .gt-dy{display:flex;flex-direction:column;align-items:center;gap:6px;font:800 11.5px/1 EasyNunito,Nunito,sans-serif;color:var(--ios-tertiary-label)}
.fx-sheet .gt-dy.is-today{color:var(--ios-label)}
.fx-sheet .gt-ds{position:relative;width:100%;max-width:36px;aspect-ratio:10/13;border-radius:7px;background:linear-gradient(180deg,#120763,#22109c);box-shadow:inset 0 0 0 1px #5a3dff;overflow:hidden;overflow:clip;display:grid;place-items:center}   /* штамп дня = картка-індикатор із шапки (Влад 19.10.2026): темно-синя, рівень #4120f8, біле число */
.fx-sheet .gt-ds i{position:absolute;left:0;right:0;bottom:0;height:0;background:#4120f8}
.fx-sheet .gt-ds b{position:relative;font:900 12px/1 EasyNunito,Nunito,sans-serif;color:#fff;font-variant-numeric:tabular-nums}
.fx-sheet .gt-ds.is-met{background:#4120f8;box-shadow:0 0 10px rgba(65,32,248,.45)}.fx-sheet .gt-ds.is-met b{color:#fff}
.fx-sheet .gt-ds.is-future{background:none;box-shadow:inset 0 0 0 1px var(--ios-separator)}
.fx-sheet .gt-dy.is-today .gt-ds{box-shadow:inset 0 0 0 1px #5a3dff,0 0 0 2px var(--ios-cell-bg,#2c2c2e),0 0 0 3.5px rgba(155,139,255,.75)}   /* сьогодні — кільце навколо, як фокус, не всередині картки */
.fx-sheet .gt-wk.is-month .gt-ds{max-width:none;border-radius:4px}.fx-sheet .gt-wk.is-month .gt-ds b{font-size:9.5px}
.fx-sheet .gt-trend{margin-top:16px;padding-top:12px;border-top:.5px solid var(--ios-separator)}
.fx-sheet .gt-trend .gt-h{margin-bottom:10px;min-height:0}
/* динаміка: шкала зліва, сітка, лінія нашим синім, точки поверх (HTML — не розтягуються разом з viewBox) */
.fx-sheet .gt-line-chart{position:relative;padding-left:30px;padding-right:8px}
.fx-sheet .gt-line-chart svg{display:block;width:100%;height:96px;overflow:visible}
.fx-sheet .gt-axis{position:absolute;left:0;top:0;width:24px;height:96px}
.fx-sheet .gt-axis span{position:absolute;right:0;transform:translateY(-50%);font:800 10.5px/1 EasyNunito,Nunito,sans-serif;color:var(--ios-tertiary-label);font-variant-numeric:tabular-nums}
.fx-sheet .gt-grid{stroke:rgba(235,235,245,.12);stroke-width:1;stroke-dasharray:3 4}
.fx-sheet .gt-l{stroke:#5a3dff}
.fx-sheet .gt-dots{position:absolute;left:30px;right:8px;top:0;height:96px;pointer-events:none}
.fx-sheet .gt-dots i{position:absolute;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:#4120f8;box-shadow:0 0 0 1.5px #1c1c1e}
.fx-sheet .gt-dots i.is-now{width:11px;height:11px;margin:-5.5px;background:#fff;box-shadow:0 0 0 2.5px #4120f8}
.fx-sheet .gt-cmp{margin:12px 2px 0;font:700 13px/1.4 EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.fx-sheet .gt-cmp:empty{display:none}
/* період: ‹ назва › — гортання тижнів і місяців; край даних — стрілка неактивна */
.fx-sheet .gt-per{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.fx-sheet .gt-per b{font:900 15px/1.2 EasyNunito,Nunito,sans-serif;color:var(--ios-label)}
.fx-sheet .gt-arr{position:relative;width:44px;height:44px;border:0;border-radius:50%;background:var(--ios-fill);cursor:pointer;-webkit-tap-highlight-color:transparent}
.fx-sheet .gt-arr::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-left:2.4px solid var(--ios-label);border-bottom:2.4px solid var(--ios-label);border-radius:1px;transform:translate(-35%,-50%) rotate(45deg)}
.fx-sheet .gt-arr.is-next::before{transform:translate(-65%,-50%) rotate(-135deg)}
.fx-sheet .gt-arr:disabled{opacity:.28;cursor:default}
.fx-sheet .gt-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.fx-sheet .gt-tiles>div{border-radius:14px;background:var(--ios-fill);padding:10px 10px 9px}
.fx-sheet .gt-tiles b{display:block;font:900 19px/1.1 EasyNunito,Nunito,sans-serif;color:var(--ios-label);font-variant-numeric:tabular-nums}
.fx-sheet .gt-tiles small{display:block;margin-top:2px;font:800 11.5px/1.25 EasyNunito,Nunito,sans-serif;color:var(--ios-tertiary-label)}
/* Перший вхід у гру: питання вгорі, картка з числом — по центру, повзунок — у зоні пальця над «Почати» (відступи кратні 8) */
.fx-sheet.ap-goalsh .sheet-head h3{display:none}
.fx-sheet.ap-goalsh .sheet-body{display:flex;flex-direction:column}
.fx-sheet .gq{flex:1;display:flex;flex-direction:column;min-height:100%;padding:8px 8px 8px;text-align:center}
.fx-sheet .gq-head h2{margin:8px 0 8px;font:900 28px/1.15 EasyNunito,Nunito,sans-serif;letter-spacing:-.01em;color:var(--ios-label)}
.fx-sheet .gq-head p{margin:0;font:700 15.5px/1.4 EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.fx-sheet .gq-mid{flex:1;display:grid;place-items:center;min-height:200px}
.fx-sheet .gq-card{width:132px;height:172px;border-radius:19px;background:linear-gradient(180deg,#120763,#22109c);box-shadow:inset 0 0 0 3px #5a3dff,0 18px 40px rgba(65,32,248,.35);display:grid;place-items:center}
.fx-sheet .gq-card b{font:900 64px/1 EasyNunito,Nunito,sans-serif;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.fx-sheet .gq-card b.is-d3{font-size:50px}
.fx-sheet .gq-ctl{padding:0 4px 8px}
.fx-sheet .gq-ticks{display:flex;justify-content:space-between;margin-top:8px;padding:0 4px;font:800 12.5px/1 EasyNunito,Nunito,sans-serif;color:var(--ios-tertiary-label)}
.fx-sheet .gq-note{margin:16px 0 0;font:700 13.5px/1.4 EasyNunito,Nunito,sans-serif;color:var(--ios-tertiary-label)}
/* Кінець гри: «Ціль на сьогодні» — число й шкала, що доростає на цю гру; виконано — світло пробігає, спалах, число підстрибує */
.rs2-lbl{margin:4px 4px 8px;font:900 13px/1.2 EasyNunito,Nunito,sans-serif;color:rgba(235,235,245,.5)}
/* без цілі й без повторення — підсумок посередині (Влад 19.10.2026) */
.rs2-res.is-solo .rs2-scroll{display:flex;flex-direction:column;justify-content:center}
.rs2-solo{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:40px}
.rs2-solo>b{font:900 84px/1 EasyNunito,Nunito,sans-serif;letter-spacing:-.03em;color:#f4f0e7;font-variant-numeric:tabular-nums}
.rs2-solo>span{margin-top:8px;font:900 19px/1.2 EasyNunito,Nunito,sans-serif;color:rgba(235,235,245,.7)}
.rs2-solo>small{margin-top:22px;padding:8px 14px;border-radius:999px;background:#1c1c1e;font:800 14px/1.2 EasyNunito,Nunito,sans-serif;color:rgba(235,235,245,.7)}
.rs2-solo>small b{color:#f4f0e7}
.rs2-goal{margin:0 0 16px;padding:16px 16px 18px;border-radius:22px;background:#1c1c1e}
.rs2-gh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.rs2-gh small{font:800 13px/1.2 EasyNunito,Nunito,sans-serif;color:rgba(235,235,245,.5)}
.rs2-gh b{font:900 22px/1 EasyNunito,Nunito,sans-serif;color:#f4f0e7;font-variant-numeric:tabular-nums}.rs2-gh b span{font-size:15px;color:rgba(235,235,245,.7)}
.rs2-gn{display:inline-block;font-style:normal}
.rs2-gbar{position:relative;display:flex;height:10px;border-radius:5px;background:rgba(120,120,128,.24);overflow:hidden}
.rs2-gbar i{display:block;height:100%;width:0}.rs2-gbar .old{background:#4120f8}   /* одна смуга одного кольору — без меж між іграми (Влад 19.10.2026) */.rs2-gbar .new{background:#4120f8;transition:width .75s cubic-bezier(.32,.72,0,1)}
.rs2-gbar::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%);transform:translateX(-110%);pointer-events:none}
.rs2-goal.is-met .rs2-gbar{animation:rsGoalGlow 1.1s cubic-bezier(.32,.72,0,1)}
.rs2-goal.is-met .rs2-gbar::after{animation:rsGoalSweep .9s cubic-bezier(.32,.72,0,1) .05s}
.rs2-goal.is-met .rs2-gbar .old{background:#4120f8;transition:background .4s}
.rs2-goal.is-met .rs2-gn{animation:rsGoalPop .5s cubic-bezier(.32,.72,0,1)}
@keyframes rsGoalSweep{to{transform:translateX(110%)}}
@keyframes rsGoalGlow{0%{box-shadow:0 0 0 0 rgba(90,61,255,0)}30%{box-shadow:0 0 18px 3px rgba(90,61,255,.75)}100%{box-shadow:0 0 0 0 rgba(90,61,255,0)}}
@keyframes rsGoalPop{40%{transform:scale(1.18)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.rs2-gbar .new{transition:none}.rs2-goal.is-met .rs2-gbar,.rs2-goal.is-met .rs2-gbar::after,.rs2-goal.is-met .rs2-gn{animation:none}}


/* One persistent viewer action, matching the game button response. */
.fx-sheet .ap-fill.is-known rect[clip-path]{fill:#8f7bff}
.fx-sheet .ap-card-actions{display:flex;flex-direction:column;gap:10px}
.fx-sheet .ap-card-actions[hidden]{display:none}
.fx-sheet .ap-card-actions p{margin:0;min-height:40px;display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:center;font:600 13px/18px EasyNunito,Nunito,sans-serif;color:var(--ios-secondary-label)}
.fx-sheet .ap-card-actions p strong{font-size:14px;font-weight:800;color:var(--ios-label);font-style:normal}
.fx-sheet .ap-card-actions.is-known p strong{color:#8f7bff}
.fx-sheet .ap-sheet-actions .ap-card-actions .dt-learned{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;margin:0;padding:12px 18px;border:0;border-radius:999px;background:rgba(255,255,255,.06);color:#d5d5da;box-shadow:none;transform:none;transition:background .2s,color .2s}
.fx-sheet .ap-card-actions .dt-learned svg{display:block;width:19px;height:19px}
.fx-sheet .ap-sheet-actions .ap-card-actions .dt-learned:not(:disabled):active{background:rgba(255,255,255,.14);transform:none;scale:1.03}
.fx-sheet .ap-ctag.is-dots i{transition:background-color .25s ease}
.fx-sheet .ap-ctag.is-known i.on{background:#4120f8}
@media(prefers-reduced-motion:reduce){.fx-sheet .ap-ctag.is-dots i,.fx-sheet .ap-card-actions .dt-learned{transition:none!important}}
/* П25 (24.10.2026): пояснення в аркуші — ліворуч */
.ap-xpsheet .dt-lead{text-align:left}
/* Мітка статусу на картці «Де наголос у слові X?» з зображенням (24.10.2026): відступ картки 14, кут — радіус зображення 7 */
.ef-media:not(.ef-band) + .ap-ctag.is-out:has(~ .ef-q2){top:calc(var(--u) * 14 - 1px);border-radius:0 0 0 calc(var(--u) * 7)}

/* Багато тем (Влад 26.10.2026): розгорнутий список — до верху екрана, гортається всередині; --tmax рахує flash-app.js */
.ap-next-b.is-open .ap-tmore>div{max-height:var(--tmax,none);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ap-next-b.is-open .ap-tmore>div::-webkit-scrollbar{display:none}

/* Subject controls align with the first-game panel (26.10.2026). */
#flow:is([data-page="welcome"],[data-page="result"]) .ww-dots{align-self:center;width:calc(100% - 2 * var(--flow-gutter,20px));max-width:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(4px,1.5vw,8px);overflow:visible;padding-bottom:3px}
#flow:is([data-page="welcome"],[data-page="result"]) .ww-dots button{width:100%;height:auto;aspect-ratio:1;min-height:44px;border-radius:50%;position:relative}
#flow:is([data-page="welcome"],[data-page="result"]) .ww-dots button svg{width:52%;height:52%;max-width:30px;max-height:30px}
#flow:is([data-page="welcome"],[data-page="result"]) .ww-dots .glyph{font-size:clamp(20px,6vw,28px)}
@media(max-width:360px){#flow:is([data-page="welcome"],[data-page="result"]) .ww-dots{gap:2px}#flow:is([data-page="welcome"],[data-page="result"]) .ww-dots button{min-height:0}#flow:is([data-page="welcome"],[data-page="result"]) .ww-dots button::after{content:'';position:absolute;inset:-4px 0;min-height:44px}}

/* Match the existing close control surface; carousel uses bare chevrons. */
#flow:is([data-page="welcome"],[data-page="result"]) .ww-dots button:not([aria-selected="true"]){background:var(--ios-glass-fill);-webkit-backdrop-filter:var(--ios-glass-frost);backdrop-filter:var(--ios-glass-frost);box-shadow:var(--ios-glass-shadow),var(--ios-glass-rim),var(--ios-glass-edges);color:var(--ios-vibrant-label);opacity:1}
#flow:is([data-page="welcome"],[data-page="result"]) .ww-dots button:not([aria-selected="true"]):active{background:var(--ios-glass-fill-pressed)}
#flow:is([data-page="welcome"],[data-page="result"]) .ww-arrow:not(#_){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border:0;width:44px;height:44px;color:#fff}
#flow:is([data-page="welcome"],[data-page="result"]) .ww-arrow svg{width:24px;height:24px}

/* Standalone welcome: one login action, in the brand header. */
#flow[data-page="welcome"] .welcome-entry-header{position:absolute;top:24px;left:var(--flow-gutter,20px);right:var(--flow-gutter,20px);display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:5}
.welcome-entry-header img{display:block;width:64px;height:44px;object-fit:contain}
#flow .welcome-login{min-width:92px;min-height:44px;padding:8px 20px;border:0;border-radius:24px;background:var(--ios-glass-fill);color:var(--ios-vibrant-label);-webkit-backdrop-filter:var(--ios-glass-frost);backdrop-filter:var(--ios-glass-frost);box-shadow:var(--ios-glass-shadow),var(--ios-glass-rim),var(--ios-glass-edges);font:700 16px Nunito,sans-serif;cursor:pointer}
#flow .welcome-login:focus-visible{outline:2px solid #b6a9ff;outline-offset:4px}
#flow .welcome-login:active{background:var(--ios-glass-fill-pressed)}
@media(max-height:620px){#flow[data-page="welcome"] .welcome-entry-header{top:16px}.welcome-entry-header img{width:56px}}

/* Keep subject choices next to the first-game panel, without moving the fan. */
#flow:is([data-page="welcome"],[data-page="result"]) .ww-dots{
 position:relative;top:var(--sp,0px)
}

/* Standalone entrance: headline, cards, subject choice and first game form one compact stack. */
html:not(.embedded) #flow[data-page="welcome"] .welcome-entry-header{
 position:relative;top:auto;left:auto;right:auto;flex:none;margin:12px 0 24px
}
html:not(.embedded) #flow[data-page="welcome"] .welcome-worlds{flex:1 0 auto}
html:not(.embedded) #flow[data-page="welcome"] .welcome-entry-title{
 margin:0 0 12px;text-align:center;font-size:clamp(26px,7.7vw,34px);line-height:1.12;
 font-weight:800;letter-spacing:-.03em;color:#fff
}
.welcome-entry-title span{display:block;color:inherit}
html:not(.embedded) #flow[data-page="welcome"] .welcome-worlds .welcome-hero{
 flex:1 0 auto;margin-top:0;height:auto;min-height:clamp(330px,47dvh,410px)
}
html:not(.embedded) #flow[data-page="welcome"] .ww::after{flex-basis:0}
html:not(.embedded) #flow[data-page="welcome"] .ww-dots{top:0;padding-top:16px}
html:not(.embedded) #flow[data-page="welcome"] .welcome-worlds+.actions{margin-top:0}

/* Approved welcome hierarchy (27.10.2026). */
html:not(.embedded) #flow[data-page="welcome"] .ww-name h1{
 font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.015em
}
html:not(.embedded) #flow[data-page="welcome"] .ww-name p{
 display:block;font-size:13px;line-height:1.3;margin-top:4px;color:#aaa7b2
}
html:not(.embedded) #flow[data-page="welcome"] .ww-dots{padding-top:12px}
html:not(.embedded) #flow[data-page="welcome"] .ww-name{padding-top:8px}

/* Навігація — «квадратність» (Влад 28.10.2026): блоки й списки з кутами 16 і тонкою рамкою замість сірої заливки, як картки.
   Кнопки, пошук і перемикачі-капсули лишаються круглими. Світлі вікна — без рамки (там білі блоки на сірому). */
:root:not([data-win="light"]) :is(.ap-group,.fx-sheet .set-group,.ap-msum,.ap-xp-text,.fx-sheet .gt-sec,.ap-mtile,.ap-msearch,.fx-sheet .set-seg.set-seg-top,.fx-sheet .ap-mview-t,.rs2-res .rs2-list){box-shadow:inset 0 0 0 1px var(--ios-cell-border)}
:is(.fx-sheet .gt-sec,.ap-mtile){border-radius:var(--ios-list-radius)}
:root:not([data-win="light"]) .fx-sheet .gt-tiles>div{background:var(--ios-cell-bg);box-shadow:inset 0 0 0 1px var(--ios-cell-border)}   /* плитки «Сьогодні» — теж не сірі */

/* Кінець демо: «Нова» — колекційний кут як у грі (виріз картинки, розміри з --cc-u, що їх рахує newCorner() у flash-result.js; 29.10.2026) */
.rc-real .cc-tag{position:absolute;z-index:4;display:flex;align-items:center;justify-content:center;gap:calc(var(--cc-u,1) * 5px);box-sizing:border-box;padding:0 calc(var(--cc-u,1) * 10px) calc(var(--cc-u,1) * 2px) calc(var(--cc-u,1) * 11px);color:#191920;white-space:nowrap;pointer-events:none;font-family:EasyNunito,Nunito,sans-serif}
.rc-real .cc-tag .w{font-weight:900;font-size:calc(var(--cc-u,1) * 14px);line-height:1;letter-spacing:.01em}
.rc-real .cc-tag .ic{display:block;width:calc(var(--cc-u,1) * 16px);height:calc(var(--cc-u,1) * 16px);margin:0}
.rc-slot{transition:none}
/* Вхід у Telegram (02.11.2026): одна кнопка «Продовжити як …» зі значком Telegram, пошта — посиланням під нею. */
#tg-continue{display:inline-flex;align-items:center;justify-content:center;gap:10px}
#tg-continue svg{width:22px;height:22px;flex:none}
/* Весь екран у Telegram (02.11.2026): шторка на всю висоту починається під годинником і кнопками Telegram (--sat), а не під ними. */
html.host-full .ap-sheet.fx-sheet.is-full{height:calc(var(--app-h,100dvh) - var(--sat) - 8px);max-height:calc(var(--app-h,100dvh) - var(--sat) - 8px)}