/* === YOH AD MODE v6 — static left brand, changing right scenes === */
body.yohAdMode{ overflow:hidden; background:#07000f; }
body.yohAdMode .speakingFaceOverlay.speaking svg.faceChar{ animation:none !important; }
body.yohAdMode .speakingFaceOverlay.speaking .face-blush{ opacity:0.5 !important; }
body.yohAdMode.yohAdRunning #pageGry .gamePage > *,
body.yohAdMode.yohAdRunning .topBar,
body.yohAdMode.yohAdRunning .tabBar,
body.yohAdMode.yohAdRunning .menuAudioDock,
body.yohAdMode.yohAdRunning .iosInstallHint{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body.yohAdMode.yohAdRunning #pageGry .gamePage{
  background:transparent !important;
}
body.yohAdMode #nameSelectScreen, body.yohAdMode .iosInstallHint{ display:none !important; }
.yohAdStart{ position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center; justify-content:center; padding:24px; color:white; background:radial-gradient(circle at 15% 24%, rgba(255,212,0,.32), transparent 34%), radial-gradient(circle at 82% 65%, rgba(255,0,184,.30), transparent 34%), linear-gradient(135deg, #100018 0%, #25003e 46%, #04172e 100%); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.yohAdStart[hidden]{ display:none !important; }
.yohAdStartCard{ width:min(780px,94vw); border-radius:32px; padding:34px 28px; text-align:center; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.25); box-shadow:0 30px 90px rgba(0,0,0,.46), inset 0 0 60px rgba(255,255,255,.08); }
.yohAdStartBadge{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); font-weight:1000; letter-spacing:.08em; text-transform:uppercase; font-size:13px; }
.yohAdStartTitle{ margin:18px 0 10px; font-size:clamp(34px,7vw,76px); line-height:.95; font-weight:1000; text-transform:uppercase; letter-spacing:-.055em; text-shadow:0 10px 30px rgba(0,0,0,.35); }
.yohAdStartText{ margin:0 auto 24px; max-width:620px; color:rgba(255,255,255,.88); font-size:clamp(15px,2.2vw,20px); line-height:1.42; font-weight:750; }
.yohAdStartBtn{ appearance:none; border:0; cursor:pointer; border-radius:999px; padding:17px 30px; font-size:18px; font-weight:1000; letter-spacing:.03em; color:#170021; background:linear-gradient(135deg,#fff45c,#ffbd00 45%,#ff56d9); box-shadow:0 18px 40px rgba(255,86,217,.30),0 8px 0 rgba(0,0,0,.16); }
.yohAdOverlay{ position:fixed; inset:0; z-index:2147482500; pointer-events:none; display:none; overflow:hidden; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
body.yohAdMode.yohAdRunning .yohAdOverlay{ display:block; }
.yohAdCinematicBg{ position:absolute; inset:0; background:radial-gradient(circle at 18% 50%, rgba(255,244,92,.16), transparent 28%), radial-gradient(circle at 73% 34%, rgba(255,86,217,.14), transparent 28%), linear-gradient(90deg, rgba(7,0,18,.92) 0%, rgba(8,0,18,.80) 36%, rgba(5,6,18,.95) 66%, rgba(2,2,10,.99) 100%); }
.yohAdSoftNoise{ position:absolute; inset:-20%; opacity:.22; background:repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 7px); transform:rotate(-3deg); mix-blend-mode:overlay; }
.yohAdPresenterGlow{ position:absolute; right:-4vw; top:9vh; width:48vw; height:82vh; background:radial-gradient(ellipse at 52% 48%, rgba(255,244,92,.16), rgba(255,86,217,.10) 40%, transparent 72%); filter:blur(2px); }
.yohAdFlash{ position:absolute; inset:0; opacity:0; background:white; }
body.yohAdFlashOn .yohAdFlash{ animation:yohAdFlash .28s ease-out both; }
@keyframes yohAdFlash{ 0%{opacity:0;} 35%{opacity:.78;} 100%{opacity:0;} }
.yohAdLightSweep{ position:absolute; inset:-20%; opacity:0; background:linear-gradient(105deg, transparent 0 42%, rgba(255,255,255,.55) 49%, transparent 58% 100%); transform:translateX(-45%) skewX(-8deg); }
body.yohAdSweepOn .yohAdLightSweep{ animation:yohSweep .92s ease-out both; }
@keyframes yohSweep{ 0%{opacity:0; transform:translateX(-55%) skewX(-8deg);} 18%{opacity:.9;} 100%{opacity:0; transform:translateX(55%) skewX(-8deg);} }
body.yohAdCutOn .yohAdCinematicBg::after{ content:""; position:absolute; inset:-15%; background:repeating-linear-gradient(110deg, transparent 0 22px, rgba(255,244,92,.16) 24px 28px, transparent 30px 72px); animation:yohCutLines .52s ease-out both; }
@keyframes yohCutLines{ 0%{opacity:0; transform:translateX(-18%) scale(1.04);} 25%{opacity:1;} 100%{opacity:0; transform:translateX(18%) scale(1.1);} }

.yohAdLeftBrand{ position:absolute; left:4vw; top:50%; transform:translateY(-50%); width:min(470px, 30vw); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; color:white; }
.yohAdBrandKicker{ display:inline-flex; padding:10px 16px; margin-bottom:18px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:#fff45c; text-transform:uppercase; font-weight:1000; letter-spacing:.12em; font-size:clamp(12px,1.3vw,16px); }
.yohAdBrandTitle{ font-size:clamp(72px,8vw,146px); line-height:.82; font-weight:1000; letter-spacing:-.075em; text-transform:uppercase; text-shadow:0 18px 44px rgba(0,0,0,.50),0 0 42px rgba(255,86,217,.34); }
.yohAdBrandWords{ display:flex; align-items:center; gap:15px; margin-top:22px; color:#fff45c; text-transform:uppercase; font-size:clamp(24px,2.55vw,42px); font-weight:1000; letter-spacing:-.035em; }
.yohAdBrandWords i{ width:10px; height:10px; border-radius:50%; background:#ff56d9; box-shadow:0 0 22px rgba(255,86,217,.85); }

.yohAdRightBlock{ position:absolute; left:calc(8vw + min(470px, 30vw)); right:1.2vw; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; }
.yohAdRightTitle, .yohAdRightDesc, .yohAdRightBottom{ width:min(1000px,100%); max-width:min(1000px,100%); margin-inline:auto; text-align:center; color:white; opacity:0; transform:translateY(14px); }
.yohAdRightTitle{ font-size:clamp(26px,2.8vw,44px); line-height:1; font-weight:1000; text-transform:uppercase; letter-spacing:-.04em; text-shadow:0 10px 26px rgba(0,0,0,.42); }
.yohAdRightDesc{ font-size:clamp(18px,1.6vw,28px); line-height:1.1; font-weight:900; color:rgba(255,255,255,.96); padding:0 8px; white-space:nowrap; letter-spacing:-.01em; min-height:1.4em; display:flex; align-items:center; justify-content:center; text-align:center; }
.yohAdTranscriptWord{ display:inline-block; transform-origin:center bottom; transition:transform .12s ease, color .12s ease, text-shadow .12s ease; }
.yohAdTranscriptWord.isCurrent{ transform:scale(1.12); color:#fff45c; text-shadow:0 0 18px rgba(255,244,92,.42); }
.yohAdRightBottom{ font-size:clamp(14px,1.35vw,19px); line-height:1.2; font-weight:950; color:#fff45c; text-transform:uppercase; letter-spacing:.05em; }
.yohAdRightTitle.show, .yohAdRightDesc.show, .yohAdRightBottom.show{ animation:yohNarrationIn .46s ease-out both; }
@keyframes yohNarrationIn{ 0%{opacity:0; transform:translateY(22px); filter:blur(5px);} 100%{opacity:1; transform:translateY(0); filter:blur(0);} }

.yohAdShowcase{ position:relative; width:min(1000px,100%); height:min(580px,64vh); transform:translateX(70px) scale(.88); opacity:0; border-radius:34px; overflow:hidden; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.26); box-shadow:0 28px 80px rgba(0,0,0,.52),0 0 0 7px rgba(255,255,255,.045), inset 0 0 50px rgba(255,255,255,.05); }
.yohAdShowcase.show{ animation:yohShowcaseIn .72s cubic-bezier(.18,1.22,.32,1) both; }
.yohAdShowcase.swap{ animation:yohShowcaseSwap .72s cubic-bezier(.18,1.22,.32,1) both; }
.yohAdShowcaseTop{ height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 16px; background:rgba(5,3,12,.82); color:white; border-bottom:1px solid rgba(255,255,255,.16); }
.yohAdShowcaseLabel{ font-size:13px; font-weight:1000; text-transform:uppercase; letter-spacing:.08em; color:#fff45c; }
.yohAdShowcaseDots{ display:flex; gap:7px; }
.yohAdShowcaseDots span{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.72); }
.yohAdShowcaseDots span:nth-child(1){background:#ff5f57;} .yohAdShowcaseDots span:nth-child(2){background:#ffbd2e;} .yohAdShowcaseDots span:nth-child(3){background:#28c840;}
.yohAdShowcaseInner{ height:calc(100% - 42px); position:relative; overflow:hidden; }
@keyframes yohShowcaseIn{ 0%{opacity:0; transform:translateX(120px) scale(.78); filter:blur(10px);} 58%{opacity:1; transform:translateX(-8px) scale(1.02); filter:blur(0);} 100%{opacity:1; transform:translateX(0) scale(1); filter:blur(0);} }
@keyframes yohShowcaseSwap{ 0%{opacity:0; transform:translateX(70px) scale(.88); filter:blur(8px);} 52%{opacity:1; transform:translateX(-10px) scale(1.03); filter:blur(0);} 100%{opacity:1; transform:translateX(0) scale(1); filter:blur(0);} }

.yohAdProgressDots{ position:absolute; left:4.9vw; bottom:6.2vh; display:flex; gap:8px; align-items:center; max-width:34vw; flex-wrap:wrap; }
.yohAdProgressDots span{ width:9px; height:9px; border-radius:999px; background:rgba(255,255,255,.28); box-shadow:0 0 0 1px rgba(255,255,255,.14) inset; transition:width .25s ease, background .25s ease; }
.yohAdProgressDots span.isActive{ width:26px; background:#fff45c; box-shadow:0 0 24px rgba(255,244,92,.45); }

body.yohAdMode #speakingFaceOverlay.yohAdFace{ z-index:2147482800 !important; pointer-events:none !important; opacity:1 !important; filter:drop-shadow(0 22px 34px rgba(0,0,0,.46)) drop-shadow(0 0 30px rgba(255,86,217,.35)); }
body.yohAdMode #speakingFaceOverlay.yohAdFace .speakBubble{ display:none !important; }
body.yohAdMode #speakingFaceOverlay.yohAdFace .faceSprite{ animation:yohPresenterFloat .9s ease-in-out infinite alternate; }
body.yohAdMode #speakingFaceOverlay.yohAdFaceTalking .faceSprite{ animation:yohPresenterTalk .34s ease-in-out infinite alternate; }
@keyframes yohPresenterFloat{ from{transform:translateY(0) rotate(-1.5deg);} to{transform:translateY(-10px) rotate(1.5deg);} }
@keyframes yohPresenterTalk{ from{transform:translateY(0) rotate(-2deg) scale(1);} to{transform:translateY(-7px) rotate(2deg) scale(1.025);} }

.adPreview{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:white; overflow:hidden; text-align:center; }
.adPreview::before{ content:""; position:absolute; inset:-20%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 24%), radial-gradient(circle at 72% 62%, rgba(255,86,217,.18), transparent 28%); }

.adPreviewRealScene{ background:linear-gradient(135deg, rgba(10,10,32,.85), rgba(10,10,32,.55)); }
.adPreviewRealImage{ width:100%; height:100%; object-fit:cover; display:block; }

.adPreviewOverview{ background:linear-gradient(135deg,#151351,#6428f8 52%,#ff56d9); }
.tileRun{ position:relative; z-index:2; display:flex; gap:14px; width:max-content; animation:tileRunMove 11s linear infinite; }
.tileRunItem{ min-width:126px; min-height:138px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; border-radius:24px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24); box-shadow:0 18px 36px rgba(0,0,0,.24); font-size:44px; }
.tileRunItem span{ font-size:14px; font-weight:1000; text-transform:uppercase; }
@keyframes tileRunMove{ 0%{ transform:translateX(22%);} 100%{ transform:translateX(-36%);} }

.miniWindows{ position:relative; z-index:2; width:min(540px, 90%); display:grid; gap:14px; }
.miniWindows.twoCols{ grid-template-columns:repeat(2,1fr); }
.miniWindows.threeCols{ grid-template-columns:repeat(3,1fr); }
.miniGameWindow{ min-height:164px; border-radius:24px; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.18); box-shadow:0 16px 32px rgba(0,0,0,.22); padding:12px; display:flex; flex-direction:column; }
.miniWindowTitle{ text-align:left; font-size:12px; font-weight:1000; color:#fff45c; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.adPreviewAir{ background:linear-gradient(135deg,#18002e,#4b27ff 48%,#00d4ff); }
.airPad, .drivePad, .coloringPad, .palettePad, .drumMini, .numMini, .abcMini, .colorMini, .puzzleMini, .memoryMini, .runnerMini{ flex:1; border-radius:18px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); position:relative; overflow:hidden; }
.airTarget{ position:absolute; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); }
.airTarget.a{ left:18%; top:22%; } .airTarget.b{ right:15%; top:35%; } .airTarget.c{ left:42%; bottom:12%; }
.airHand{ position:absolute; left:12%; top:18%; font-size:34px; animation:handMove 2.2s ease-in-out infinite; }
.airCursor{ position:absolute; left:26%; top:28%; width:14px; height:14px; border-radius:50%; background:#fff45c; box-shadow:0 0 18px rgba(255,244,92,.7); animation:cursorMove 2.2s ease-in-out infinite; }
@keyframes handMove{ 0%{ transform:translate(0,0) rotate(-8deg);} 33%{ transform:translate(82px,12px) rotate(6deg);} 66%{ transform:translate(50px,64px) rotate(-4deg);} 100%{ transform:translate(0,0) rotate(-8deg);} }
@keyframes cursorMove{ 0%{ transform:translate(0,0);} 33%{ transform:translate(78px,10px);} 66%{ transform:translate(46px,60px);} 100%{ transform:translate(0,0);} }
.driveRoad{ position:absolute; inset:0; background:repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 45px, transparent 45px 90px), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.0)); }
.driveCar{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); font-size:34px; animation:carSteer 2s ease-in-out infinite; }
.driveHand{ position:absolute; top:10px; left:12px; font-size:30px; animation:handSteer 2s ease-in-out infinite; }
@keyframes carSteer{ 0%,100%{ transform:translateX(-50%) translateX(-48px);} 50%{ transform:translateX(-50%) translateX(48px);} }
@keyframes handSteer{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(82px);} }
.adPreviewColoring{ background:linear-gradient(135deg,#270023,#ff4d88 54%,#ffd400); }
.coloringPad{ display:grid; place-items:center; }
.drawFlower{ position:relative; width:110px; height:110px; }
.petal{ position:absolute; width:36px; height:48px; border-radius:30px; opacity:.92; animation:petalGlow 1.5s ease-in-out infinite alternate; }
.p1{ left:37px; top:0; background:#ff5f57; } .p2{ right:6px; top:22px; background:#ffbd2e; animation-delay:.12s; } .p3{ right:8px; bottom:22px; background:#ffd60a; animation-delay:.24s; } .p4{ left:37px; bottom:0; background:#32d74b; animation-delay:.36s; } .p5{ left:6px; bottom:22px; background:#0a84ff; animation-delay:.48s; } .p6{ left:6px; top:22px; background:#bf5af2; animation-delay:.60s; }
.flowerMid{ position:absolute; left:50%; top:50%; width:34px; height:34px; transform:translate(-50%,-50%); border-radius:50%; background:#fff45c; }
.flowerStem{ position:absolute; left:50%; bottom:-16px; width:8px; height:38px; transform:translateX(-50%); border-radius:99px; background:#32d74b; }
@keyframes petalGlow{ from{ transform:scale(1);} to{ transform:scale(1.08);} }
.palettePad{ display:flex; align-items:center; justify-content:center; gap:10px; }
.palettePad b{ width:28px; height:28px; border-radius:50%; display:block; animation:paletteBounce 1.2s ease-in-out infinite alternate; }
.palettePad b:nth-child(1){ background:#ff3b30;} .palettePad b:nth-child(2){ background:#ffcc00; animation-delay:.12s;} .palettePad b:nth-child(3){ background:#32d74b; animation-delay:.24s;} .palettePad b:nth-child(4){ background:#0a84ff; animation-delay:.36s;} .palettePad b:nth-child(5){ background:#bf5af2; animation-delay:.48s;}
@keyframes paletteBounce{ to{ transform:translateY(-8px) scale(1.08);} }
.adPreviewInstruments{ background:linear-gradient(135deg,#1a0040,#4931ff 46%,#00d4ff); }
.drumMini{ display:flex; align-items:center; justify-content:center; gap:12px; font-size:42px; }
.drumMini span{ animation:drumHit 1s ease-in-out infinite alternate; }
.drumMini span:nth-child(2){ animation-delay:.14s; } .drumMini span:nth-child(3){ animation-delay:.28s; }
@keyframes drumHit{ to{ transform:translateY(-10px) rotate(-6deg) scale(1.08);} }
.waveBars{ display:flex; align-items:end; justify-content:center; gap:8px; }
.waveBars i{ width:12px; height:18px; border-radius:999px; background:#fff45c; animation:barDance .62s ease-in-out infinite alternate; }
.waveBars i:nth-child(2){animation-delay:.08s;height:38px;} .waveBars i:nth-child(3){animation-delay:.16s;height:28px;} .waveBars i:nth-child(4){animation-delay:.24s;height:52px;} .waveBars i:nth-child(5){animation-delay:.32s;height:36px;} .waveBars i:nth-child(6){animation-delay:.40s;height:46px;} .waveBars i:nth-child(7){animation-delay:.48s;height:24px;}
@keyframes barDance{ to{ height:58px; filter:hue-rotate(60deg);} }
.adPreviewScience{ background:linear-gradient(135deg,#180027,#ef4e8f 44%,#ffbf00); }
.numMini, .abcMini, .colorMini{ display:flex; align-items:center; justify-content:center; gap:6px; }
.numMini b, .abcMini b{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:#fff45c; color:#17001f; font-size:22px; font-weight:1000; animation:cardPop 1s ease-in-out infinite alternate; }
.numMini b:nth-child(2), .abcMini b:nth-child(2){ animation-delay:.14s; } .numMini b:nth-child(3), .abcMini b:nth-child(3){ animation-delay:.28s; }
.abcMini b{ background:white; }
.colorMini i{ width:30px; height:30px; border-radius:50%; display:block; animation:paletteBounce 1.2s ease-in-out infinite alternate; }
.colorMini i:nth-child(1){ background:#ff3b30; } .colorMini i:nth-child(2){ background:#0a84ff; animation-delay:.18s; } .colorMini i:nth-child(3){ background:#32d74b; animation-delay:.36s; }
@keyframes cardPop{ to{ transform:translateY(-8px) scale(1.07);} }
.adPreviewLogic{ background:linear-gradient(135deg,#08142c,#1450ff 48%,#ff56d9); }
.puzzleMini, .memoryMini, .runnerMini{ display:grid; place-items:center; }
.puzzleMini{ grid-template-columns:repeat(2, 42px); gap:8px; align-content:center; justify-content:center; }
.puzzleMini i{ width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg, rgba(255,244,92,.9), rgba(255,86,217,.85)); box-shadow:0 12px 22px rgba(0,0,0,.22); animation:puzzleFlip 1.2s ease-in-out infinite alternate; }
.puzzleMini i:nth-child(2n){ animation-delay:.16s; background:linear-gradient(135deg, rgba(0,245,255,.9), rgba(123,92,255,.85)); }
@keyframes puzzleFlip{ to{ transform:translateY(-8px) rotate(5deg);} }
.memoryMini{ grid-template-columns:repeat(2, 42px); gap:8px; }
.memoryMini b{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.22); font-size:20px; animation:cardPop 1s ease-in-out infinite alternate; }
.memoryMini b:nth-child(2){ animation-delay:.16s; } .memoryMini b:nth-child(3){ animation-delay:.28s; } .memoryMini b:nth-child(4){ animation-delay:.44s; }
.runnerMini span{ position:absolute; left:18px; right:18px; height:6px; border-radius:99px; background:rgba(255,255,255,.12); }
.runnerMini span:nth-child(1){ top:28px; } .runnerMini span:nth-child(2){ top:60px; } .runnerMini span:nth-child(3){ top:92px; }
.runnerMini b{ position:absolute; left:16px; top:48px; padding:6px 10px; border-radius:999px; background:#fff45c; color:#17001f; font-weight:1000; text-transform:uppercase; animation:runnerDash 1.8s ease-in-out infinite; }
@keyframes runnerDash{ 0%{ transform:translateX(0);} 50%{ transform:translateX(72px);} 100%{ transform:translateX(0);} }
.adPreviewFinalCards{ background:linear-gradient(135deg,#080014,#4a1fff 43%,#ff56d9 76%,#fff45c); }
.finalCardStack{ position:relative; z-index:2; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; max-width:84%; }
.finalCardStack b{ min-width:146px; min-height:88px; display:grid; place-items:center; border-radius:24px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.25); color:white; font-size:22px; font-weight:1000; box-shadow:0 18px 42px rgba(0,0,0,.30); animation:previewPop 1s ease-in-out infinite alternate; }
.finalCardStack b:nth-child(2){animation-delay:.16s;} .finalCardStack b:nth-child(3){animation-delay:.32s;}
.finalMiniLogo{ position:relative; z-index:2; margin-top:20px; padding:11px 18px; border-radius:999px; background:#fff45c; color:#17001f; font-size:22px; font-weight:1000; text-transform:uppercase; }
@keyframes previewPop{ from{transform:translateY(0) scale(1);} to{transform:translateY(-7px) scale(1.03);} }

.yohAdFinalPanel{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; padding:0 5vw; color:white; opacity:0; transform:scale(.94); text-align:left; text-shadow:0 16px 44px rgba(0,0,0,.55); z-index:18; }
.yohAdFinalPanel.show{ animation:yohFinalShow .72s cubic-bezier(.18,1.34,.32,1) both; }
.yohAdFinalWrap{ width:min(1500px, 92vw); display:grid; grid-template-columns:minmax(320px, 1fr) minmax(360px, .95fr); gap:3vw; align-items:center; }
.yohAdFinalLeft{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.yohAdFinalTitle{ font-size:clamp(72px, 8vw, 160px); line-height:.92; font-weight:1000; letter-spacing:-.03em; text-transform:uppercase; }
.yohAdFinalSubtitle{ margin-top:1.2vh; font-size:clamp(26px, 2.45vw, 52px); line-height:1.06; font-weight:900; color:#ffe34e; text-transform:uppercase; }
.yohAdFinalWords{ margin-top:1.5vh; font-size:clamp(22px, 2.2vw, 46px); line-height:1.08; font-weight:900; color:#fff36a; text-transform:uppercase; }
.yohAdFinalArt{ display:flex; align-items:center; justify-content:center; min-height:52vh; }
.yohAdFinalArt img{ width:min(100%, 620px); max-height:70vh; height:auto; object-fit:contain; filter:drop-shadow(0 22px 44px rgba(0,0,0,.45)); }
.yohAdFinalTitle{ font-size:clamp(62px,11vw,160px); line-height:.82; letter-spacing:-.075em; font-weight:1000; text-transform:uppercase; }
.yohAdFinalSubtitle{ margin-top:16px; color:#fff45c; font-size:clamp(22px,3.4vw,48px); font-weight:1000; text-transform:uppercase; }
.yohAdFinalNote{ margin-top:18px; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.24); font-size:clamp(13px,1.4vw,17px); font-weight:900; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.82); }
@keyframes yohFinalShow{ 0%{opacity:0; transform:scale(.78) translateX(-55px); filter:blur(10px);} 100%{opacity:1; transform:scale(1) translateX(0); filter:blur(0);} }

@media (max-width: 1100px){ .yohAdLeftBrand{ width:30vw; } .yohAdRightBlock{ left:calc(8vw + 30vw); right:1.2vw; } .yohAdShowcase{ width:min(860px,100%); height:min(500px,55vh); } .yohAdRightTitle, .yohAdRightDesc, .yohAdRightBottom{ width:min(860px,100%); max-width:min(860px,100%); } .yohAdBrandTitle{ font-size:clamp(64px,7vw,120px);} }
@media (max-width: 900px){ .yohAdLeftBrand{ left:4vw; width:34vw; } .yohAdRightBlock{ left:calc(8vw + 34vw); right:0.8vw; } .yohAdShowcase{ width:min(760px,100%); height:min(430px,44vh); } .yohAdRightTitle, .yohAdRightDesc, .yohAdRightBottom{ width:min(760px,100%); max-width:min(760px,100%); } .miniWindows.threeCols{ grid-template-columns:repeat(2,1fr); } .yohAdBrandWords{ font-size:clamp(20px,2.2vw,32px); } }
@media (max-width: 700px){ .yohAdCinematicBg{ background:linear-gradient(180deg, rgba(7,0,18,.94), rgba(8,0,18,.58)); } .yohAdLeftBrand{ left:50%; top:20vh; width:88vw; transform:translate(-50%,-50%); align-items:center; text-align:center; } .yohAdBrandWords{ justify-content:center; } .yohAdRightBlock{ left:50%; right:auto; top:62%; width:90vw; transform:translate(-50%,-50%); } .yohAdShowcase{ width:90vw; height:38vh; } .yohAdProgressDots{ left:50%; bottom:1.6vh; transform:translateX(-50%); max-width:88vw; justify-content:center; } .miniWindows.twoCols, .miniWindows.threeCols{ grid-template-columns:1fr; } .miniGameWindow{ min-height:120px; } .yohAdFinalPanel{ align-items:center; text-align:center; padding:5vw 6vw; } .yohAdFinalWrap{ grid-template-columns:1fr; gap:2.5vh; text-align:center; } .yohAdFinalLeft{ align-items:center; } .yohAdFinalArt{ min-height:auto; } .yohAdFinalArt img{ width:min(82vw, 420px); max-height:42vh; } }


/* v8: real live game inside the right mini-window */
.adPreviewLiveGame{
  background:#060012;
}
.adLiveGameFrame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#080015;
  pointer-events:none;
}
.adLiveGlass{
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10), inset 0 0 60px rgba(0,0,0,.24);
  background:linear-gradient(135deg, rgba(255,255,255,.05), transparent 42%, rgba(255,255,255,.04));
  mix-blend-mode:screen;
}
.adLiveHandDemo{
  position:absolute;
  left:8%;
  top:14%;
  width:130px;
  height:130px;
  z-index:5;
  pointer-events:none;
}
.adLiveHandDemo span{
  position:absolute;
  left:0;
  top:10px;
  font-size:48px;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));
  animation:adLiveHandMove 2.2s ease-in-out infinite;
}
.adLiveHandDemo i{
  position:absolute;
  left:88px;
  top:46px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff45c;
  box-shadow:0 0 24px rgba(255,244,92,.85);
  animation:adLiveDotMove 2.2s ease-in-out infinite;
}
@keyframes adLiveHandMove{
  0%,100%{ transform:translate(0,0) rotate(-8deg); }
  50%{ transform:translate(150px,85px) rotate(8deg); }
}
@keyframes adLiveDotMove{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(150px,85px); }
}

body.yohMiniPreview{
  background:#080015 !important;
}

/* === Final ad frame: only background + centered screen window === */
.yohAdFinalScreenOnly{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(18px,4vw,60px);
  box-sizing:border-box;
}
.yohAdFinalBrowser{
  width:min(1180px,86vw);
  max-height:82vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:34px;
  background:rgba(6,3,14,.94);
  border:1px solid rgba(255,86,217,.58);
  box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 0 7px rgba(255,255,255,.035),0 0 54px rgba(255,86,217,.20), inset 0 0 45px rgba(255,255,255,.045);
}
.yohAdFinalBrowserTop{
  height:42px;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  background:rgba(5,3,12,.88);
  border-bottom:2px solid rgba(255,0,255,.82);
  box-sizing:border-box;
}
.yohAdFinalBrowserLabel{
  color:#fff45c;
  font-size:13px;
  line-height:1;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.09em;
  text-shadow:0 0 16px rgba(255,244,92,.28);
}
.yohAdFinalBrowserScreen{
  width:100%;
  aspect-ratio:16/9;
  max-height:calc(82vh - 42px);
  background:#05000f;
  overflow:hidden;
}
.yohAdFinalBrowserScreen img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.yohAdFinalFooter{
  position:absolute;
  left:50%;
  bottom:clamp(14px,3.2vh,38px);
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.5vw,18px);
  flex-wrap:wrap;
  width:min(1120px,92vw);
  pointer-events:auto;
}
.yohAdSoonText{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 22px;
  border-radius:999px;
  background:rgba(5,3,12,.72);
  border:1px solid rgba(255,244,92,.55);
  color:#fff45c;
  font-size:clamp(16px,2.1vw,34px);
  line-height:1.05;
  font-weight:1000;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-align:center;
  text-shadow:0 0 18px rgba(255,244,92,.28),0 10px 28px rgba(0,0,0,.58);
  box-shadow:0 18px 44px rgba(0,0,0,.34), inset 0 0 28px rgba(255,255,255,.045);
}
.yohAdReplayBtn{
  appearance:none;
  border:0;
  cursor:pointer;
  min-height:48px;
  padding:12px 24px;
  border-radius:999px;
  color:#170021;
  background:linear-gradient(135deg,#fff45c,#ffbd00 48%,#ff56d9);
  box-shadow:0 18px 40px rgba(255,86,217,.30),0 7px 0 rgba(0,0,0,.22), inset 0 0 20px rgba(255,255,255,.22);
  font-size:clamp(15px,1.35vw,20px);
  line-height:1;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;
  pointer-events:auto;
}
.yohAdReplayBtn:hover{ transform:translateY(-2px); filter:brightness(1.05); }
.yohAdReplayBtn:active{ transform:translateY(2px); box-shadow:0 10px 24px rgba(255,86,217,.24),0 3px 0 rgba(0,0,0,.24), inset 0 0 20px rgba(255,255,255,.22); }

@media (max-width:900px){
  .yohAdFinalBrowser{width:94vw;border-radius:24px;}
  .yohAdFinalBrowserTop{height:36px;min-height:36px;padding:0 13px;}
  .yohAdFinalBrowserLabel{font-size:11px;}
  .yohAdFinalBrowserScreen{max-height:calc(78vh - 36px);}
  .yohAdFinalFooter{bottom:10px;gap:8px;width:94vw;}
  .yohAdSoonText{min-height:38px;padding:8px 14px;}
  .yohAdReplayBtn{min-height:40px;padding:10px 16px;}
}


/* === v39 final-screen centering fix === */
.yohAdFinalScreenOnly{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:clamp(18px,4vw,44px) clamp(18px,4vw,60px);
  box-sizing:border-box;
}
.yohAdFinalMainTitle{
  width:100%;
  text-align:center;
  color:#ffffff;
  font-size:clamp(34px,4.4vw,76px);
  line-height:.95;
  font-weight:1000;
  letter-spacing:-.04em;
  text-transform:uppercase;
  text-shadow:0 18px 44px rgba(0,0,0,.55);
  margin:0 0 clamp(10px,2vh,18px);
}
.yohAdFinalCenterStack{
  flex:1;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,2vh,24px);
}
.yohAdFinalBrowser{
  width:min(1180px,86vw);
  max-height:none;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:34px;
  background:rgba(6,3,14,.94);
  border:1px solid rgba(255,86,217,.58);
  box-shadow:0 34px 90px rgba(0,0,0,.62),0 0 0 7px rgba(255,255,255,.035),0 0 54px rgba(255,86,217,.20), inset 0 0 45px rgba(255,255,255,.045);
  margin:0 auto;
}
.yohAdFinalBrowserScreen{
  width:100%;
  aspect-ratio:16/9;
  max-height:calc(72vh - 42px);
  background:#05000f;
  overflow:hidden;
}
.yohAdFinalTranscript{
  width:min(1120px,92vw);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 22px;
  border-radius:999px;
  background:rgba(5,3,12,.72);
  border:1px solid rgba(255,244,92,.55);
  color:#fff45c;
  font-size:clamp(16px,2.1vw,34px);
  line-height:1.05;
  font-weight:1000;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-align:center;
  text-shadow:0 0 18px rgba(255,244,92,.28),0 10px 28px rgba(0,0,0,.58);
  box-shadow:0 18px 44px rgba(0,0,0,.34), inset 0 0 28px rgba(255,255,255,.045);
  margin:0 auto;
}
.yohAdFinalFooter{ display:none !important; }
.yohAdReplayBtn{
  align-self:center;
}
@media (max-width:900px){
  .yohAdFinalMainTitle{font-size:clamp(28px,7vw,54px); margin-bottom:10px;}
  .yohAdFinalBrowser{width:94vw;border-radius:24px;}
  .yohAdFinalBrowserTop{height:36px;min-height:36px;padding:0 13px;}
  .yohAdFinalBrowserLabel{font-size:11px;}
  .yohAdFinalBrowserScreen{max-height:calc(56vh - 36px);}
  .yohAdFinalCenterStack{gap:12px;}
  .yohAdFinalTranscript{width:94vw;min-height:38px;padding:8px 14px;}
  .yohAdReplayBtn{min-height:40px;padding:10px 16px;}
}


/* === v40 transcript below game window === */
.yohAdRightTitle{ order:1; }
.yohAdShowcase{ order:2; }
.yohAdRightDesc{
  order:3;
  margin-top:2px;
  min-height:1.6em;
}
.yohAdRightBottom{ order:4; }


/* === v41 bigger final browser after centering === */
.yohAdFinalCenterStack{ gap:clamp(12px,1.6vh,18px); }


/* === v42 final-screen spacing balance === */
.yohAdFinalScreenOnly{
  padding-top:clamp(28px,4.2vh,42px);
  padding-bottom:clamp(28px,4.2vh,42px);
}
.yohAdFinalMainTitle{
  margin-top:clamp(6px,1vh,12px);
  margin-bottom:clamp(14px,2vh,24px);
}
.yohAdFinalCenterStack{
  justify-content:center;
  gap:clamp(8px,1.2vh,14px);
}
.yohAdFinalTranscript{
  margin-top:clamp(-2px,-0.2vh,0px);
  margin-bottom:0;
}
.yohAdReplayBtn{
  margin-top:clamp(4px,0.8vh,8px);
}
@media (max-width:900px){
  .yohAdFinalScreenOnly{
    padding-top:22px;
    padding-bottom:22px;
  }
  .yohAdFinalMainTitle{
    margin-top:4px;
    margin-bottom:12px;
  }
  .yohAdFinalCenterStack{ gap:10px; }
}


/* === v43 final music fade + test game button === */
.yohAdFinalButtons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.4vw,18px);
  flex-wrap:wrap;
}
#yohAdTestGameBtn{
  background:linear-gradient(135deg,#00f5ff,#fff45c 52%,#ff56d9);
}


/* === v44 centered final screen + portrait mobile ad === */
.yohAdFinalScreenOnly{
  justify-content:center;
  gap:clamp(10px,1.4vh,16px);
  padding:clamp(18px,2.8vh,28px) clamp(18px,4vw,48px);
}
.yohAdFinalMainTitle{
  margin:0;
}
.yohAdFinalCenterStack{
  flex:none;
  justify-content:flex-start;
  gap:clamp(8px,1vh,12px);
}
.yohAdFinalTranscript{
  margin-top:-2px;
}
.yohAdFinalButtons{
  margin-top:2px;
}

@media (orientation: portrait) and (max-width: 900px){
  .yohAdStartCard{ width:min(92vw, 560px); padding:24px 18px; border-radius:24px; }
  .yohAdStartTitle{ font-size:clamp(28px,9vw,54px); }
  .yohAdStartText{ font-size:clamp(14px,4vw,18px); }

  .yohAdLeftBrand{
    left:50% !important;
    top:15.5vh !important;
    width:90vw !important;
    transform:translate(-50%,-50%) !important;
    align-items:center !important;
    text-align:center !important;
  }
  .yohAdBrandKicker{ margin-bottom:10px; }
  .yohAdBrandTitle{ font-size:clamp(52px,14vw,100px); }
  .yohAdBrandWords{ justify-content:center; margin-top:12px; font-size:clamp(18px,5.2vw,28px); gap:10px; }

  .yohAdRightBlock{
    left:50% !important;
    right:auto !important;
    top:60% !important;
    width:94vw !important;
    transform:translate(-50%,-50%) !important;
    gap:12px !important;
  }
  .yohAdRightTitle,
  .yohAdRightDesc,
  .yohAdRightBottom{
    width:94vw !important;
    max-width:94vw !important;
  }
  .yohAdRightTitle{ font-size:clamp(24px,7.6vw,42px); line-height:1.02; }
  .yohAdRightDesc{ font-size:clamp(15px,4.4vw,22px); white-space:normal; line-height:1.14; min-height:2.6em; padding:0 10px; }
  .yohAdShowcase{
    width:94vw !important;
    height:min(44vh, 380px) !important;
    transform:none !important;
    border-radius:22px !important;
  }
  .yohAdShowcaseTop{ height:34px; padding:0 12px; }
  .yohAdShowcaseLabel{ font-size:11px; }
  .yohAdShowcaseInner{ height:calc(100% - 34px); }
  .yohAdProgressDots{ left:50% !important; bottom:1.2vh !important; transform:translateX(-50%) !important; max-width:88vw; justify-content:center; }

  .yohAdFinalScreenOnly{
    justify-content:center;
    gap:10px;
    padding:18px 14px;
  }
  .yohAdFinalMainTitle{
    font-size:clamp(26px,9vw,54px) !important;
    line-height:.95;
  }
  .yohAdFinalCenterStack{ width:100%; gap:10px !important; }
  .yohAdFinalBrowser{ width:94vw !important; border-radius:22px !important; }
  .yohAdFinalBrowserTop{ height:34px !important; min-height:34px !important; padding:0 12px !important; }
  .yohAdFinalBrowserLabel{ font-size:11px !important; }
  .yohAdFinalBrowserScreen{ max-height:calc(42vh - 34px) !important; }
  .yohAdFinalTranscript{ width:94vw !important; font-size:clamp(14px,4.6vw,22px) !important; padding:8px 12px !important; min-height:38px !important; }
  .yohAdFinalButtons{ width:94vw; gap:10px; }
  .yohAdReplayBtn{ min-height:42px; padding:10px 16px; font-size:clamp(14px,4.2vw,18px); }
}


/* === v46 final screen 10px higher === */
.yohAdFinalScreenOnly{
  transform: translateY(-5px);
}


/* === v48 left brand 20px higher === */
.yohAdLeftBrand{
  top:calc(50% - 15px);
}
@media (orientation: portrait) and (max-width: 900px){
  .yohAdLeftBrand{
    top:calc(15.5vh - 15px) !important;
  }
}


/* === v50 equal left/right spacing + 30 percent ad music === */
.yohAdLeftBrand{
  left:4vw;
}
.yohAdRightBlock{
  left:calc(8vw + min(470px, 30vw));
}
@media (max-width: 1100px){
  .yohAdRightBlock{ left:calc(8vw + 30vw); }
}
@media (max-width: 900px){
  .yohAdLeftBrand{ left:4vw; }
  .yohAdRightBlock{ left:calc(8vw + 34vw); }
}


/* === v51 reduce visual gap between brand and game window === */
.yohAdRightBlock{
  left:calc(4vw + min(470px, 30vw) - 10px);
}
@media (max-width: 1100px){
  .yohAdRightBlock{ left:calc(4vw + 30vw - 10px); }
}
@media (max-width: 900px){
  .yohAdRightBlock{ left:calc(4vw + 34vw - 10px); }
}


/* === v52 shift ad layout right 20px and hide test button === */
.yohAdLeftBrand{
  left:calc(4vw + 20px);
}
.yohAdRightBlock{
  left:calc((4vw + min(470px, 30vw) - 10px) + 20px);
}
.yohAdProgressDots{
  left:calc(4.9vw + 20px);
}
body.yohAdMode #speakingFaceOverlay.yohAdFace{
  margin-left:20px !important;
}
#yohAdTestGameBtn{
  display:none !important;
}
@media (max-width: 1100px){
  .yohAdRightBlock{ left:calc((4vw + 30vw - 10px) + 20px); }
}
@media (max-width: 900px){
  .yohAdLeftBrand{ left:calc(4vw + 20px); }
  .yohAdRightBlock{ left:calc((4vw + 34vw - 10px) + 20px); }
}
@media (orientation: portrait) and (max-width: 900px){
  body.yohAdMode #speakingFaceOverlay.yohAdFace{
    margin-left:0 !important;
  }
  .yohAdLeftBrand,
  .yohAdRightBlock,
  .yohAdProgressDots{
    left:50% !important;
  }
}


/* === v58: index.html jest reklamą + całość 15px bardziej w prawo === */
.yohAdLeftBrand{
  left:calc(4vw + 35px);
}
.yohAdRightBlock{
  left:calc((4vw + min(470px, 30vw) - 10px) + 35px);
}
.yohAdProgressDots{
  left:calc(4.9vw + 35px);
}
body.yohAdMode #speakingFaceOverlay.yohAdFace{
  margin-left:35px !important;
}
.yohAdFinalScreenOnly{
  transform:translate(0, -5px);
}
@media (max-width: 1100px){
  .yohAdRightBlock{ left:calc((4vw + 30vw - 10px) + 35px); }
}
@media (max-width: 900px){
  .yohAdLeftBrand{ left:calc(4vw + 35px); }
  .yohAdRightBlock{ left:calc((4vw + 34vw - 10px) + 35px); }
}
@media (orientation: portrait) and (max-width: 900px){
  body.yohAdMode #speakingFaceOverlay.yohAdFace{ margin-left:0 !important; }
  .yohAdLeftBrand,
  .yohAdRightBlock,
  .yohAdProgressDots{ left:50% !important; }
  .yohAdFinalScreenOnly{ transform:translateY(-5px) !important; }
}


/* === v60: pasek "Bezdotykowe sterowanie" na ekranie początkowym === */
.yohAdFinalBrowserScreen{
  position:relative;
}
.yohAdFinalTouchlessBar{
  position:absolute;
  left:0;
  bottom:0;
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  min-height:54px;
  max-width:min(62%, 420px);
  padding:0 22px;
  border-radius:0 18px 0 0;
  background:linear-gradient(135deg, rgba(255,244,92,.98), rgba(255,189,0,.98) 48%, rgba(255,86,217,.95));
  color:#170021;
  font-size:clamp(14px, 1.25vw, 21px);
  font-weight:1000;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.02em;
  box-shadow:0 -8px 22px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.16) inset;
  text-shadow:none;
  z-index:4;
  pointer-events:none;
}
@media (max-width: 900px){
  .yohAdFinalTouchlessBar{
    min-height:42px;
    max-width:min(74%, 340px);
    padding:0 14px;
    font-size:clamp(11px, 2.1vw, 16px);
    border-radius:0 14px 0 0;
  }
}
@media (orientation: portrait) and (max-width: 900px){
  .yohAdFinalTouchlessBar{
    max-width:82%;
    min-height:38px;
    font-size:clamp(10px, 3.6vw, 14px);
  }
}


/* === v61: ekran początkowo-końcowy 15px w lewo, bez ruszania reszty === */

/* === v62: napis "Bezdotykowe sterowanie" bez osobnego tła === */
.yohAdFinalTouchlessBar{
  background:transparent !important;
  box-shadow:none !important;
  border-radius:0 !important;
  min-height:auto !important;
  padding:0 0 16px 18px !important;
  max-width:none !important;
  color:#fff45c !important;
  font-size:clamp(16px, 1.45vw, 24px) !important;
  font-weight:1000 !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  letter-spacing:.025em !important;
  text-shadow:0 4px 14px rgba(0,0,0,.78), 0 0 18px rgba(255,244,92,.34) !important;
}
@media (max-width: 900px){
  .yohAdFinalTouchlessBar{
    padding:0 0 12px 14px !important;
    font-size:clamp(12px, 2.4vw, 17px) !important;
  }
}
@media (orientation: portrait) and (max-width: 900px){
  .yohAdFinalTouchlessBar{
    padding:0 0 10px 12px !important;
    font-size:clamp(11px, 3.7vw, 15px) !important;
  }
}


/* === v63: delikatniejszy napis bez rażącego tła === */
.yohAdFinalTouchlessText{
  position:absolute;
  left:0;
  bottom:0;
  display:inline-flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:0 0 16px 18px;
  background:none;
  box-shadow:none;
  border:0;
  color:#f5efad;
  font-size:clamp(16px,1.42vw,24px);
  font-weight:1000;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.025em;
  text-shadow:0 4px 14px rgba(0,0,0,.78), 0 0 16px rgba(255,244,92,.18);
  z-index:4;
  pointer-events:none;
}
@media (max-width: 900px){
  .yohAdFinalTouchlessText{
    padding:0 0 12px 14px;
    font-size:clamp(12px,2.3vw,17px);
  }
}
@media (orientation: portrait) and (max-width: 900px){
  .yohAdFinalTouchlessText{
    padding:0 0 10px 12px;
    font-size:clamp(11px,3.7vw,15px);
  }
}


/* === v64: wycentrowanie napisu względem szerokości "Nauka • Ruch • Zabawa" === */
.yohAdFinalTouchlessText{
  left:2.2% !important;
  width:min(48%, 620px) !important;
  justify-content:center !important;
  text-align:center !important;
  padding:0 0 16px 0 !important;
}
@media (max-width: 900px){
  .yohAdFinalTouchlessText{
    left:1.5% !important;
    width:52% !important;
    padding:0 0 12px 0 !important;
  }
}
@media (orientation: portrait) and (max-width: 900px){
  .yohAdFinalTouchlessText{
    left:0 !important;
    width:100% !important;
    padding:0 0 10px 0 !important;
  }
}


/* === v65: przeniesienie napisu pod pigułkę z iOS/Windows === */
.yohAdFinalTouchlessBelowPill{
  width:min(92vw, 1120px);
  margin:10px auto 0;
  text-align:center;
  color:#f5efad;
  font-size:clamp(16px, 1.42vw, 23px);
  font-weight:1000;
  line-height:1.08;
  text-transform:uppercase;
  letter-spacing:.025em;
  text-shadow:0 4px 14px rgba(0,0,0,.78), 0 0 16px rgba(255,244,92,.18);
}
@media (max-width: 900px){
  .yohAdFinalTouchlessBelowPill{
    width:94vw;
    margin-top:8px;
    font-size:clamp(12px,2.2vw,17px);
  }
}
@media (orientation: portrait) and (max-width: 900px){
  .yohAdFinalTouchlessBelowPill{
    margin-top:8px;
    font-size:clamp(11px,3.5vw,15px);
  }
}


/* === v66: bezdotykowe sterowanie obok przycisku, po prawej pod pigułką === */
.yohAdFinalTouchlessBelowPill{
  display:none !important;
}
.yohAdFinalButtons{
  width:min(92vw, 1120px);
  justify-content:flex-end !important;
  gap:clamp(12px,1.2vw,18px);
}
.yohAdFinalTouchlessInline{
  display:inline-flex;
  align-items:center;
  color:#f5efad;
  font-size:clamp(15px,1.18vw,21px);
  font-weight:1000;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.025em;
  text-shadow:0 4px 14px rgba(0,0,0,.78), 0 0 16px rgba(255,244,92,.18);
  white-space:nowrap;
  margin-right:2px;
}
@media (max-width: 900px){
  .yohAdFinalButtons{
    width:94vw;
    justify-content:center !important;
    gap:10px;
  }
  .yohAdFinalTouchlessInline{
    font-size:clamp(12px,2vw,16px);
  }
}
@media (orientation: portrait) and (max-width: 900px){
  .yohAdFinalButtons{
    justify-content:center !important;
  }
  .yohAdFinalTouchlessInline{
    width:100%;
    justify-content:center;
    order:1;
    font-size:clamp(11px,3.5vw,15px);
  }
  #yohAdReplayBtn{ order:2; }
}


/* === v67: bezdotykowe sterowanie w czarnym pasku u góry + przycisk na środku === */
.yohAdFinalTopCenterLabel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  color:#f5efad;
  font-size:clamp(13px, 1.05vw, 18px);
  font-weight:1000;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.03em;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.yohAdFinalTouchlessInline, .yohAdFinalTouchlessBelowPill{
  display:none !important;
}
.yohAdFinalButtons{
  width:min(92vw, 1120px);
  justify-content:center !important;
  gap:clamp(10px,1.4vw,18px);
}
@media (max-width: 900px){
  .yohAdFinalTopCenterLabel{
    font-size:clamp(10px, 1.9vw, 14px);
    max-width:56%;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .yohAdFinalButtons{
    width:94vw;
    justify-content:center !important;
  }
}
@media (orientation: portrait) and (max-width: 900px){
  .yohAdFinalTopCenterLabel{
    font-size:clamp(9px, 2.9vw, 12px);
    max-width:58%;
  }
}


/* === v68: naprawa widoczności napisu w górnym pasku === */
.yohAdFinalBrowserTop{
  position:relative;
}
.yohAdFinalBrowserLabel,
.yohAdShowcaseDots{
  position:relative;
  z-index:2;
}
.yohAdFinalTopCenterLabel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  display:block;
  width:max-content;
  max-width:60%;
  color:#fff4a8;
  font-size:clamp(13px,1.05vw,18px);
  font-weight:1000;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.03em;
  text-align:center;
  white-space:nowrap;
  opacity:1 !important;
  visibility:visible !important;
}

/* === v69: twarde wbicie napisu w środek czarnego paska okna === */
.yohAdFinalBrowserTop{
  position:relative !important;
}
.yohAdFinalTopCenterLabel{
  display:none !important;
}
.yohAdFinalBrowserTop::after{
  content:"BEZDOTYKOWE STEROWANIE";
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  transform:translate(-50%, -50%) !important;
  z-index:999999 !important;
  display:block !important;
  color:#fff45c !important;
  font-size:clamp(13px, 1.05vw, 18px) !important;
  font-weight:1000 !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  letter-spacing:.04em !important;
  text-align:center !important;
  white-space:nowrap !important;
  pointer-events:none !important;
  opacity:1 !important;
  visibility:visible !important;
  text-shadow:0 2px 10px rgba(0,0,0,.8), 0 0 14px rgba(255,244,92,.35) !important;
}
@media (max-width: 900px){
  .yohAdFinalBrowserTop::after{
    font-size:clamp(10px, 1.9vw, 14px) !important;
    max-width:56% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}


/* === v70: pionowe miniokno na telefonie + płynne przewijanie podświetlanych gier === */
.yohMiniHighlightScroller{
  position:absolute;
  inset:18% 5% 8% 5%;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.yohMiniHighlightViewport{
  width:min(560px, 72%);
  height:132px;
  overflow:hidden;
  border-radius:28px;
  background:rgba(9, 0, 22, .72);
  border:2px solid rgba(255, 244, 92, .72);
  box-shadow:0 20px 52px rgba(0,0,0,.48), 0 0 44px rgba(255,244,92,.24), inset 0 0 34px rgba(255,255,255,.055);
  backdrop-filter:blur(4px);
}
.yohMiniHighlightTrack{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:10px;
  animation:yohMiniHighlightedGamesScroll var(--miniScrollDuration, 7.2s) linear infinite;
  will-change:transform;
}
.yohMiniHighlightScroller.single .yohMiniHighlightTrack{
  animation:none;
}
.yohMiniHighlightScrollCard{
  height:112px;
  min-height:112px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  color:#fff45c;
  background:linear-gradient(135deg, rgba(255,86,217,.92), rgba(125,56,255,.76) 44%, rgba(0,245,255,.58));
  border:2px solid rgba(255,255,255,.76);
  box-shadow:0 14px 28px rgba(0,0,0,.34), inset 0 0 24px rgba(255,255,255,.11);
  text-shadow:0 4px 14px rgba(0,0,0,.58);
}
.yohMiniHighlightIcon{
  font-size:48px;
  line-height:1;
  filter:drop-shadow(0 0 16px rgba(255,244,92,.45));
}
.yohMiniHighlightTitle{
  font-size:clamp(24px, 3vw, 42px);
  line-height:1;
  font-weight:1000;
  letter-spacing:-.035em;
  white-space:nowrap;
}
@keyframes yohMiniHighlightedGamesScroll{
  from{ transform:translateY(0); }
  to{ transform:translateY(calc(-126px * var(--miniScrollCount, 1))); }
}
body.yohMiniPreview.miniHighlightScrollerOn.hasMiniHighlight .gamesMenuGrid{
  opacity:.30;
  filter:saturate(.55) brightness(.62);
}
body.yohMiniPreview.miniHighlightScrollerOn.hasMiniHighlight .gameCard.yohMiniHighlight{
  animation:none !important;
}

@media (orientation: portrait) and (max-width: 900px){
  .yohAdRightBlock{
    top:61.5% !important;
    gap:10px !important;
  }
  .yohAdRightTitle{
    font-size:clamp(22px, 7.2vw, 39px) !important;
  }
  .yohAdShowcase{
    width:min(76vw, 430px) !important;
    height:min(50vh, 560px) !important;
    aspect-ratio:9 / 16 !important;
    border-radius:26px !important;
  }
  .yohAdShowcaseTop{
    height:34px !important;
    min-height:34px !important;
  }
  .yohAdShowcaseInner{
    height:calc(100% - 34px) !important;
  }
  .adPreviewLiveGame,
  .adLiveGameFrame{
    width:100% !important;
    height:100% !important;
  }
  .yohAdRightDesc{
    font-size:clamp(14px, 4.2vw, 21px) !important;
    min-height:2em !important;
  }
}

body.yohMiniPreview.yohMiniPortrait .gamePage{
  padding:10px 10px !important;
}
body.yohMiniPreview.yohMiniPortrait .gameTitle{
  margin-top:4px !important;
  font-size:clamp(26px, 9vw, 42px) !important;
  line-height:.95 !important;
}
body.yohMiniPreview.yohMiniPortrait .gameSubtitle{
  font-size:clamp(13px, 4vw, 19px) !important;
  line-height:1.05 !important;
}
body.yohMiniPreview.yohMiniPortrait .gamesMenuGrid{
  grid-template-columns:1fr !important;
  width:min(78vw, 330px) !important;
  max-width:min(78vw, 330px) !important;
  margin:8px auto 0 !important;
  gap:10px !important;
  transform:none !important;
  transform-origin:center top !important;
}
body.yohMiniPreview.yohMiniPortrait .gameCard{
  min-height:72px !important;
  border-radius:20px !important;
}
body.yohMiniPreview.yohMiniPortrait .gameCard .gi{ font-size:27px !important; }
body.yohMiniPreview.yohMiniPortrait .gameCard .gt{ font-size:20px !important; }
body.yohMiniPreview.yohMiniPortrait.miniManyHighlights .gamesMenuGrid,
body.yohMiniPreview.yohMiniPortrait.miniScrollGames .gamesMenuGrid{
  transform:none !important;
}
body.yohMiniPreview.yohMiniPortrait .yohMiniHighlightScroller{
  inset:30% 0 9% 0;
}
body.yohMiniPreview.yohMiniPortrait .yohMiniHighlightViewport{
  width:min(74vw, 320px);
  height:118px;
  border-radius:24px;
}
body.yohMiniPreview.yohMiniPortrait .yohMiniHighlightTrack{
  gap:10px;
  padding:9px;
}
body.yohMiniPreview.yohMiniPortrait .yohMiniHighlightScrollCard{
  height:100px;
  min-height:100px;
  border-radius:20px;
  gap:12px;
}
body.yohMiniPreview.yohMiniPortrait .yohMiniHighlightIcon{ font-size:40px; }
body.yohMiniPreview.yohMiniPortrait .yohMiniHighlightTitle{ font-size:clamp(22px, 7vw, 32px); }
body.yohMiniPreview.yohMiniPortrait .yohMiniHighlightTrack{
  animation-name:yohMiniHighlightedGamesScrollPortrait;
}
@keyframes yohMiniHighlightedGamesScrollPortrait{
  from{ transform:translateY(0); }
  to{ transform:translateY(calc(-110px * var(--miniScrollCount, 1))); }
}


/* === v71: większe okno z grami w poziomym widoku telefonu === */
@media (orientation: landscape) and (max-height: 600px){
  .yohAdLeftBrand{
    left:calc(3.2vw + 14px) !important;
    top:49% !important;
    width:35vw !important;
    transform:translateY(-50%) !important;
  }
  .yohAdBrandKicker{
    margin-bottom:10px !important;
    padding:8px 14px !important;
    font-size:clamp(11px,2.7vh,15px) !important;
  }
  .yohAdBrandTitle{
    font-size:clamp(58px,13.2vh,94px) !important;
    line-height:.84 !important;
  }
  .yohAdBrandWords{
    margin-top:16px !important;
    gap:clamp(8px,1.2vw,14px) !important;
    font-size:clamp(22px,5.2vh,34px) !important;
    white-space:nowrap !important;
  }
  .yohAdBrandWords i{
    width:9px !important;
    height:9px !important;
  }

  .yohAdRightBlock{
    left:39.5vw !important;
    right:1.4vw !important;
    top:50% !important;
    width:auto !important;
    transform:translateY(-50%) !important;
    gap:8px !important;
  }
  .yohAdRightTitle,
  .yohAdRightDesc,
  .yohAdRightBottom{
    width:100% !important;
    max-width:100% !important;
  }
  .yohAdRightTitle{
    font-size:clamp(22px,6vh,38px) !important;
    line-height:.95 !important;
    margin-bottom:0 !important;
  }
  .yohAdShowcase{
    width:100% !important;
    height:58vh !important;
    max-height:430px !important;
    min-height:255px !important;
    border-radius:24px !important;
    transform:none !important;
  }
  .yohAdShowcaseTop{
    height:32px !important;
    min-height:32px !important;
    padding:0 12px !important;
  }
  .yohAdShowcaseLabel{
    font-size:11px !important;
  }
  .yohAdShowcaseInner{
    height:calc(100% - 32px) !important;
  }
  .yohAdRightDesc{
    font-size:clamp(17px,4.8vh,28px) !important;
    line-height:1.05 !important;
    min-height:1.2em !important;
    white-space:normal !important;
    margin-top:0 !important;
  }
  .yohAdRightBottom{
    font-size:clamp(12px,2.9vh,17px) !important;
  }
  .yohAdProgressDots{
    left:calc(3.2vw + 14px) !important;
    bottom:5vh !important;
    max-width:35vw !important;
  }
  body.yohAdMode #speakingFaceOverlay.yohAdFace{
    margin-left:0 !important;
  }
}

/* Bardziej czytelne skalowanie samego mini-podglądu gry w poziomej ramce telefonu */
body.yohMiniPreview.yohMiniLandscape .gamePage{
  padding:10px 22px !important;
}
body.yohMiniPreview.yohMiniLandscape .gameTitle{
  margin-top:2px !important;
  font-size:clamp(26px,5.2vw,48px) !important;
  line-height:.98 !important;
}
body.yohMiniPreview.yohMiniLandscape .gameSubtitle{
  font-size:clamp(13px,2.2vw,20px) !important;
  line-height:1.05 !important;
}
body.yohMiniPreview.yohMiniLandscape .gamesMenuGrid{
  margin-top:2px !important;
  transform:scale(.86) !important;
  transform-origin:center top !important;
  gap:14px !important;
}
body.yohMiniPreview.yohMiniLandscape.miniManyHighlights .gamesMenuGrid{
  transform:scale(.74) !important;
  gap:12px !important;
}
body.yohMiniPreview.yohMiniLandscape .gameCard{
  min-height:96px !important;
}
body.yohMiniPreview.yohMiniLandscape .gameCard .gi{
  font-size:34px !important;
}
body.yohMiniPreview.yohMiniLandscape .gameCard .gt{
  font-size:20px !important;
}
body.yohMiniPreview.yohMiniLandscape .yohMiniHighlightScroller{
  inset:16% 4% 6% 4%;
}
body.yohMiniPreview.yohMiniLandscape .yohMiniHighlightViewport{
  width:min(620px, 76%);
  height:128px;
}
body.yohMiniPreview.yohMiniLandscape .yohMiniHighlightScrollCard{
  height:108px;
  min-height:108px;
}

/* === v72: realne przewijanie kafelków w głównym oknie, bez dodatkowego okna w oknie === */
html.yohAdBoot body > .nameSelectScreen,
html.yohAdBoot body > .topBar,
html.yohAdBoot body > .tabBar,
html.yohAdBoot body > .page,
html.yohAdBoot body > .menuAudioControls,
html.yohAdBoot body > .iosInstallHint{
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
html.yohAdBoot body{
  background:#07000f !important;
}
html.yohAdBoot body::before{
  opacity:0 !important;
}

body.yohMiniPreview .yohMiniHighlightScroller{
  display:none !important;
}
body.yohMiniPreview .gamePage.gamesMenu{
  width:100% !important;
  max-width:none !important;
  min-height:100vh !important;
  height:100vh !important;
  overflow:hidden !important;
  background:
    radial-gradient(900px 640px at 16% 15%, rgba(255, 42, 218, .42), transparent 60%),
    radial-gradient(840px 580px at 90% 18%, rgba(132, 52, 255, .34), transparent 58%),
    radial-gradient(900px 650px at 56% 100%, rgba(0, 245, 255, .13), transparent 62%),
    linear-gradient(135deg, #06000f 0%, #0a0016 42%, #07000f 100%) !important;
}
body.yohMiniPreview .gamePage.gamesMenu::before,
body.yohMiniPreview .gamePage.gamesMenu::after{
  content:"" !important;
  position:absolute !important;
  pointer-events:none !important;
  opacity:.42 !important;
  inset:-18% !important;
  background:
    linear-gradient(130deg, transparent 0 18%, rgba(255,255,255,.9) 19% 20%, transparent 21% 72%, rgba(255,255,255,.82) 73% 74%, transparent 75%),
    linear-gradient(130deg, transparent 0 12%, rgba(160,45,255,.75) 13% 24%, transparent 25% 76%, rgba(160,45,255,.70) 77% 90%, transparent 91%) !important;
  transform:none !important;
  animation:none !important;
  mix-blend-mode:screen !important;
}
body.yohMiniPreview .gamesMenuGrid{
  --miniScale: .92;
  transform:translateY(0) scale(var(--miniScale)) !important;
  will-change:transform;
}
body.yohMiniPreview.miniRealGridScroll .gamesMenuGrid{
  animation:yohMiniRealGridScroll var(--miniGridScrollDuration, 7s) ease-in-out infinite alternate !important;
}
@keyframes yohMiniRealGridScroll{
  from{ transform:translateY(0) scale(var(--miniScale, .92)); }
  to{ transform:translateY(calc(-1 * var(--miniGridScrollDistance, 0px))) scale(var(--miniScale, .92)); }
}
body.yohMiniPreview.hasMiniHighlight .gameCard.yohMiniHighlight{
  z-index:4 !important;
}
body.yohMiniPreview.hasMiniHighlight .gameCard.yohMiniDim{
  opacity:.28 !important;
  filter:saturate(.58) brightness(.60) !important;
}
body.yohMiniPreview.hasMiniHighlight .gameCard.yohMiniHighlight{
  opacity:1 !important;
  filter:saturate(1.25) brightness(1.15) !important;
  border-color:#fff45c !important;
  box-shadow:0 0 0 2px rgba(255,244,92,.85), 0 0 28px rgba(255,244,92,.44), inset 0 0 24px rgba(255,244,92,.11) !important;
}

/* Telefon pionowo: wewnątrz okna pokazujemy prawdziwą aplikację w dwóch kolumnach */
body.yohMiniPreview.yohMiniPortrait .gamePage{
  padding:8px 7px !important;
}
body.yohMiniPreview.yohMiniPortrait .gameTitle{
  margin-top:4px !important;
  font-size:clamp(24px, 8.0vw, 38px) !important;
  line-height:.94 !important;
  white-space:nowrap !important;
}
body.yohMiniPreview.yohMiniPortrait .gameSubtitle{
  font-size:clamp(12px, 3.5vw, 17px) !important;
  line-height:1.05 !important;
  margin-top:4px !important;
}
body.yohMiniPreview.yohMiniPortrait .gamesMenuGrid{
  --miniScale: 1;
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  width:min(94vw, 560px) !important;
  max-width:min(94vw, 560px) !important;
  margin:10px auto 0 !important;
  padding:0 8px 18px !important;
  gap:10px !important;
  transform:translateY(0) scale(var(--miniScale)) !important;
}
body.yohMiniPreview.yohMiniPortrait .gameCard{
  min-height:104px !important;
  border-radius:20px !important;
  padding:10px 6px !important;
  gap:7px !important;
}
body.yohMiniPreview.yohMiniPortrait .gameCard .gi{ font-size:27px !important; }
body.yohMiniPreview.yohMiniPortrait .gameCard .gt{
  font-size:clamp(13px, 4.5vw, 18px) !important;
  line-height:1.02 !important;
  text-align:center !important;
  word-break:normal !important;
}
body.yohMiniPreview.yohMiniPortrait.miniManyHighlights .gamesMenuGrid,
body.yohMiniPreview.yohMiniPortrait.miniScrollGames .gamesMenuGrid{
  transform:translateY(0) scale(var(--miniScale)) !important;
}

/* Telefon poziomo: też bez dodatkowej karty, przewijamy prawdziwą siatkę w większym oknie */
body.yohMiniPreview.yohMiniLandscape .gamesMenuGrid{
  --miniScale:.86;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  width:min(1120px, 96vw) !important;
  max-width:min(1120px, 96vw) !important;
  margin-top:4px !important;
  padding-bottom:20px !important;
  gap:14px !important;
  transform:translateY(0) scale(var(--miniScale)) !important;
}
body.yohMiniPreview.yohMiniLandscape.miniManyHighlights .gamesMenuGrid{
  --miniScale:.82;
  transform:translateY(0) scale(var(--miniScale)) !important;
}


/* === v73: favicon/browser-color + real scroll-to-highlight + landscape final fit === */
body.yohMiniPreview .gamesMenuGrid{
  transition:transform .95s cubic-bezier(.18,.88,.2,1) !important;
  animation:none !important;
}
body.yohMiniPreview.miniRealGridScroll .gamesMenuGrid{
  animation:none !important;
}
.yohAdFinalBrowserScreen img{
  object-fit:contain !important;
  object-position:center center !important;
  background:#05000f !important;
}
@media (orientation: landscape) and (max-height: 600px){
  .yohAdFinalScreenOnly{
    transform:none !important;
    padding:6px 3vw 8px !important;
    gap:5px !important;
    justify-content:center !important;
  }
  .yohAdFinalMainTitle{
    font-size:clamp(26px, 9.2vh, 56px) !important;
    line-height:.9 !important;
    margin:0 0 4px !important;
  }
  .yohAdFinalCenterStack{
    gap:5px !important;
    justify-content:center !important;
  }
  .yohAdFinalBrowser{
    width:min(86vw, 1220px) !important;
    border-radius:18px !important;
  }
  .yohAdFinalBrowserTop{
    height:28px !important;
    min-height:28px !important;
    padding:0 10px !important;
  }
  .yohAdFinalBrowserLabel{ font-size:9px !important; }
  .yohAdFinalBrowserTop::after{ font-size:clamp(9px,2.4vh,13px) !important; max-width:62% !important; }
  .yohAdFinalBrowserScreen{
    aspect-ratio:16/9 !important;
    max-height:calc(62vh - 28px) !important;
    background:#05000f !important;
  }
  .yohAdFinalTranscript{
    min-height:34px !important;
    padding:6px 14px !important;
    font-size:clamp(13px,3.4vh,22px) !important;
    line-height:1 !important;
  }
  .yohAdReplayBtn{
    min-height:36px !important;
    padding:8px 18px !important;
    font-size:clamp(12px,3vh,18px) !important;
  }
}


/* === v74: kropki wyżej + łagodny zjazd siatki w mini-podglądzie === */
@media (min-width: 901px) and (min-height: 560px){
  .yohAdProgressDots{
    bottom:18vh !important;
  }
}
@media (orientation: portrait) and (max-width: 900px){
  .yohAdProgressDots{
    left:50% !important;
    top:32.2vh !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
    max-width:82vw !important;
    justify-content:center !important;
    z-index:2147482850 !important;
  }
  .yohAdProgressDots span{ width:10px !important; height:10px !important; }
  .yohAdProgressDots span.isActive{ width:28px !important; }
  .yohAdRightBlock{ top:62.5% !important; }
}
@media (orientation: landscape) and (max-height: 540px){
  .yohAdProgressDots{
    bottom:5.2vh !important;
  }
}


/* === v75: ciemny kolor pasków przeglądarki + kropki wyżej w telefonie poziomo === */
html, body{
  background-color:#080015 !important;
  color-scheme:dark;
}
body.yohAdMode, body.yohAdMode::before{
  background-color:#080015 !important;
}
@keyframes yohMiniGridTravel{
  from{ transform:translateY(var(--miniGridStart, 0px)) scale(var(--miniScale, .92)); }
  to{ transform:translateY(var(--miniGridEnd, 0px)) scale(var(--miniScale, .92)); }
}
@media (orientation: landscape) and (max-height: 600px){
  .yohAdProgressDots{
    bottom:22vh !important;
    left:calc(3.2vw + 14px) !important;
    max-width:35vw !important;
    z-index:2147482850 !important;
  }
  .yohAdProgressDots span{ width:10px !important; height:10px !important; }
  .yohAdProgressDots span.isActive{ width:30px !important; }
}
@media (orientation: landscape) and (max-height: 430px){
  .yohAdProgressDots{ bottom:20vh !important; }
}


/* === v76: osobne skalowanie fullscreen vs zwykła przeglądarka + powrót kropek w pionie === */
/* Pion telefonu: przywrócone kropki na dół, tak jak było wcześniej. */
@media (orientation: portrait) and (max-width: 900px){
  .yohAdProgressDots{
    top:auto !important;
    bottom:1.2vh !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    max-width:88vw !important;
    justify-content:center !important;
    z-index:2147482850 !important;
  }
  .yohAdProgressDots span{ width:9px !important; height:9px !important; }
  .yohAdProgressDots span.isActive{ width:26px !important; }
}

/* Zwykły widok poziomy z paskiem adresu Chrome/telefonu: mniej wysokie okno gry i niżej kropki.
   Fullscreen/PWA zostaje bez tej korekty, bo tam układ był już dobry. */
@media (orientation: landscape) and (max-height: 720px){
  body.yohAdBrowserChrome .yohAdRightBlock{
    top:51.5% !important;
    gap:6px !important;
  }
  body.yohAdBrowserChrome .yohAdRightTitle{
    font-size:clamp(20px,5.1vh,34px) !important;
    line-height:.92 !important;
    min-height:0 !important;
    margin:0 !important;
  }
  body.yohAdBrowserChrome .yohAdShowcase{
    height:44vh !important;
    min-height:190px !important;
    max-height:320px !important;
    border-radius:22px !important;
  }
  body.yohAdBrowserChrome .yohAdShowcaseTop{
    height:29px !important;
    min-height:29px !important;
  }
  body.yohAdBrowserChrome .yohAdShowcaseInner{
    height:calc(100% - 29px) !important;
  }
  body.yohAdBrowserChrome .yohAdRightDesc{
    font-size:clamp(15px,4.1vh,24px) !important;
    line-height:1 !important;
    min-height:1.05em !important;
    margin-top:1px !important;
  }
  body.yohAdBrowserChrome .yohAdProgressDots{
    bottom:5.4vh !important;
    top:auto !important;
    left:calc(3.2vw + 14px) !important;
    max-width:35vw !important;
    transform:none !important;
    z-index:2147482850 !important;
  }
  body.yohAdBrowserChrome .yohAdProgressDots span{ width:9px !important; height:9px !important; }
  body.yohAdBrowserChrome .yohAdProgressDots span.isActive{ width:28px !important; }
}

/* Gdy pasek adresu jest bardzo wysoki / viewport mocno niski, jeszcze ciaśniej. */
@media (orientation: landscape) and (max-height: 560px){
  body.yohAdBrowserChrome .yohAdShowcase{
    height:41vh !important;
    min-height:176px !important;
    max-height:285px !important;
  }
  body.yohAdBrowserChrome .yohAdRightBlock{
    top:52.5% !important;
  }
  body.yohAdBrowserChrome .yohAdProgressDots{
    bottom:4.6vh !important;
  }
}


/* === v77: mini podgląd - kafelki zawsze widoczne, scroll po podświetlonych wierszach === */
body.yohMiniPreview .gamesMenuGrid{
  transition:transform .85s cubic-bezier(.20,.78,.18,1) !important;
  animation:none !important;
}
body.yohMiniPreview.hasMiniHighlight .gameCard.yohMiniHighlight{
  outline:0 !important;
  box-shadow:0 0 0 2px rgba(255,244,92,.96), 0 0 30px rgba(255,244,92,.46), inset 0 0 22px rgba(255,244,92,.12) !important;
}

/* Bardzo niski iframe w telefonie poziomo z paskiem adresu: zmniejszamy UI wewnętrznej aplikacji,
   żeby pełne żółte obramowania kafelków nie były ucinane na dole. */
@media (orientation:landscape) and (max-height:260px){
  body.yohMiniPreview.yohMiniLandscape .gamePage{ padding:2px 14px !important; }
  body.yohMiniPreview.yohMiniLandscape .gameTitle{ margin-top:0 !important; font-size:clamp(20px,10.2vh,30px) !important; line-height:.88 !important; }
  body.yohMiniPreview.yohMiniLandscape .gameSubtitle{ margin-top:1px !important; font-size:clamp(10px,5.2vh,15px) !important; line-height:1 !important; }
  body.yohMiniPreview.yohMiniLandscape .gamesMenuGrid,
  body.yohMiniPreview.yohMiniLandscape.miniManyHighlights .gamesMenuGrid{
    --miniScale:.74;
    margin-top:2px !important;
    gap:8px !important;
    padding-bottom:58px !important;
  }
  body.yohMiniPreview.yohMiniLandscape .gameCard{ min-height:76px !important; border-radius:18px !important; padding:5px 8px !important; gap:4px !important; }
  body.yohMiniPreview.yohMiniLandscape .gameCard .gi{ font-size:25px !important; }
  body.yohMiniPreview.yohMiniLandscape .gameCard .gt{ font-size:clamp(14px,7vh,20px) !important; line-height:.96 !important; }
}
@media (orientation:landscape) and (max-height:205px){
  body.yohMiniPreview.yohMiniLandscape .gameTitle{ font-size:clamp(18px,9.5vh,25px) !important; }
  body.yohMiniPreview.yohMiniLandscape .gameSubtitle{ font-size:clamp(9px,4.8vh,13px) !important; }
  body.yohMiniPreview.yohMiniLandscape .gamesMenuGrid,
  body.yohMiniPreview.yohMiniLandscape.miniManyHighlights .gamesMenuGrid{
    --miniScale:.68;
    gap:7px !important;
    padding-bottom:72px !important;
  }
  body.yohMiniPreview.yohMiniLandscape .gameCard{ min-height:68px !important; border-radius:16px !important; }
  body.yohMiniPreview.yohMiniLandscape .gameCard .gi{ font-size:22px !important; }
  body.yohMiniPreview.yohMiniLandscape .gameCard .gt{ font-size:clamp(12px,6.4vh,17px) !important; }
}

/* Zwykły widok poziomy z paskiem adresu: zostawiamy fullscreen bez zmian, ale w przeglądarce
   podgląd ma minimalnie więcej miejsca na zawartość, bez rozwalania lewej strony. */
@media (orientation: landscape) and (max-height: 720px){
  body.yohAdBrowserChrome .yohAdShowcase{
    height:45vh !important;
    min-height:185px !important;
    max-height:315px !important;
  }
}
@media (orientation: landscape) and (max-height: 560px){
  body.yohAdBrowserChrome .yohAdShowcase{
    height:43vh !important;
    min-height:178px !important;
    max-height:295px !important;
  }
}


/* === v78: fullscreen phone landscape window bigger + safer card scroll + title scroll === */
body.yohMiniPreview .gameTitle,
body.yohMiniPreview .gameSubtitle{
  will-change:transform, opacity !important;
  pointer-events:none !important;
}

/* Fullscreen/PWA landscape: powiększamy tylko ten wariant, bez ruszania zwykłej przeglądarki z paskiem adresu. */
@media (orientation: landscape) and (max-height: 720px){
  body.yohAdFullscreenLike .yohAdRightBlock{
    left:38.2vw !important;
    right:.7vw !important;
    top:50% !important;
    gap:6px !important;
  }
  body.yohAdFullscreenLike .yohAdShowcase{
    height:66vh !important;
    min-height:285px !important;
    max-height:520px !important;
    border-radius:24px !important;
  }
  body.yohAdFullscreenLike .yohAdShowcaseTop{
    height:31px !important;
    min-height:31px !important;
  }
  body.yohAdFullscreenLike .yohAdShowcaseInner{
    height:calc(100% - 31px) !important;
  }
  body.yohAdFullscreenLike .yohAdProgressDots{
    bottom:calc(22vh + 30px) !important;
    left:calc(3.2vw + 14px) !important;
    max-width:35vw !important;
  }
}
@media (orientation: landscape) and (max-height: 430px){
  body.yohAdFullscreenLike .yohAdShowcase{
    height:69vh !important;
    min-height:250px !important;
    max-height:390px !important;
  }
  body.yohAdFullscreenLike .yohAdRightTitle{
    font-size:clamp(21px,7vh,40px) !important;
  }
  body.yohAdFullscreenLike .yohAdProgressDots{
    bottom:calc(20vh + 30px) !important;
  }
}

/* Mini-preview: przy scrollu kafelków nagłówek aplikacji ma odjeżdżać razem z siatką,
   więc nie przykrywa podświetlonych gier. */
body.yohMiniPreview.hasMiniHighlight .gamesMenu .gameTitle,
body.yohMiniPreview.hasMiniHighlight .gamesMenu .gameSubtitle{
  transform-origin:center top !important;
}

/* Gdy iframe jest bardzo płytki, zostawiamy dodatkowy bufor pod siatką,
   ale JS zatrzymuje scroll 10px poniżej dolnej krawędzi aktywnego kafelka. */
@media (orientation:landscape) and (max-height:260px){
  body.yohMiniPreview.yohMiniLandscape .gamesMenuGrid,
  body.yohMiniPreview.yohMiniLandscape.miniManyHighlights .gamesMenuGrid{
    padding-bottom:34px !important;
  }
}
@media (orientation:portrait) and (max-width:900px){
  body.yohMiniPreview.yohMiniPortrait .gamesMenuGrid{
    padding-bottom:32px !important;
  }
}


/* === v80: telefon pionowo — kropki w jednej linii + układ 20/30px wyżej === */
@media (orientation: portrait) and (max-width: 900px){
  /* Cała górna marka 20px wyżej względem v79. */
  .yohAdLeftBrand{
    top:calc(15.5vh - 35px) !important;
  }

  /* Wszystko po napisie „Nauka • Ruch • Zabawa” łącznie 30px wyżej. */
  .yohAdRightBlock{
    top:calc(62.5% - 30px) !important;
  }

  /* Kropki strony: jedna linia, lekko wyżej, bez zawijania pod spód. */
  .yohAdProgressDots{
    top:auto !important;
    bottom:calc(1.2vh + 20px) !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:auto !important;
    max-width:96vw !important;
    flex-wrap:nowrap !important;
    gap:7px !important;
    justify-content:center !important;
    align-items:center !important;
    white-space:nowrap !important;
    z-index:2147482850 !important;
  }
  .yohAdProgressDots span{
    flex:0 0 auto !important;
    width:8px !important;
    height:8px !important;
  }
  .yohAdProgressDots span.isActive{
    width:24px !important;
  }
}

/* Niskie telefony w pionie: trochę ciaśniej, ale dalej jedna linia kropek. */
@media (orientation: portrait) and (max-width: 900px) and (max-height: 760px){
  .yohAdLeftBrand{ top:calc(15.5vh - 39px) !important; }
  .yohAdRightBlock{ top:calc(62.5% - 34px) !important; }
  .yohAdProgressDots{
    bottom:calc(.8vh + 20px) !important;
    gap:6px !important;
  }
  .yohAdProgressDots span{ width:7px !important; height:7px !important; }
  .yohAdProgressDots span.isActive{ width:22px !important; }
}


/* === v81: tytuł „Gry Edukacyjne” zawsze widoczny jako część przewijanej zawartości miniokna === */
body.yohMiniPreview .gamesMenu .gameTitle,
body.yohMiniPreview .gamesMenu .gameSubtitle,
body.yohMiniPreview.miniScrollGames .gamesMenu .gameTitle,
body.yohMiniPreview.miniScrollGames .gamesMenu .gameSubtitle{
  visibility:visible !important;
  opacity:1 !important;
  transform-origin:center top !important;
  pointer-events:none !important;
}
body.yohMiniPreview.hasMiniHighlight .gamesMenu .gameTitle,
body.yohMiniPreview.hasMiniHighlight .gamesMenu .gameSubtitle{
  transition:transform .95s cubic-bezier(.20,.78,.18,1), opacity .45s ease !important;
}


/* === v82: przyciski prezentacji, strzałki + klikane segmenty, X, przesunięcie YOH o 3px w poziomie === */
.yohAdProgressDots{
  pointer-events:auto !important;
  display:flex !important;
  align-items:center !important;
}
.yohAdProgressDots span{ display:none !important; }
.yohAdProgressDot,
.yohAdProgressArrow{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  flex:0 0 auto;
  cursor:pointer;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}
.yohAdProgressDot{
  width:9px;
  height:9px;
  border-radius:999px;
  background:rgba(255,255,255,.28);
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset;
  transition:width .25s ease, background .25s ease, transform .18s ease, box-shadow .18s ease;
}
.yohAdProgressDot.isActive{
  width:26px;
  background:#fff45c;
  box-shadow:0 0 24px rgba(255,244,92,.45), 0 0 0 1px rgba(255,255,255,.22) inset;
}
.yohAdProgressDot:hover,
.yohAdProgressArrow:hover{ transform:translateY(-1px) scale(1.06); }
.yohAdProgressArrow{
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#fff45c;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  font-size:19px;
  line-height:1;
  font-weight:1000;
  text-shadow:0 0 14px rgba(255,244,92,.55);
  box-shadow:0 8px 22px rgba(0,0,0,.24);
}
.yohAdProgressArrow:disabled{
  opacity:.32;
  cursor:default;
  transform:none !important;
}
.yohAdExitBtn{
  position:absolute;
  top:clamp(10px,2vh,22px);
  right:clamp(10px,2vw,24px);
  z-index:2147482860;
  width:38px;
  height:38px;
  display:none;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(8,0,20,.54);
  color:white;
  font-size:28px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 16px 34px rgba(0,0,0,.34), inset 0 0 18px rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.yohAdExitBtn:hover{ transform:translateY(-1px); background:rgba(255,86,217,.22); }
body.yohAdRunning .yohAdExitBtn{ display:grid; }
body.yohAdHomeFinal .yohAdExitBtn{ display:none !important; }
.yohAdReplayBtn, .yohAdStartBtn{ white-space:nowrap; }
@media (orientation: landscape){
  .yohAdBrandTitle,
  .yohAdFinalMainTitle{ transform:translateX(3px) !important; }
}
@media (orientation: portrait) and (max-width:900px){
  .yohAdProgressDots{
    gap:6px !important;
    max-width:96vw !important;
    flex-wrap:nowrap !important;
  }
  .yohAdProgressDot{ width:7px !important; height:7px !important; }
  .yohAdProgressDot.isActive{ width:22px !important; }
  .yohAdProgressArrow{ width:18px !important; height:18px !important; font-size:16px !important; }
  .yohAdExitBtn{ width:34px; height:34px; font-size:24px; top:max(10px, env(safe-area-inset-top)); right:max(10px, env(safe-area-inset-right)); }
}
@media (orientation: landscape) and (max-height:600px){
  .yohAdProgressDots{ gap:7px !important; }
  .yohAdProgressDot{ width:9px !important; height:9px !important; }
  .yohAdProgressDot.isActive{ width:27px !important; }
  .yohAdProgressArrow{ width:20px !important; height:20px !important; font-size:18px !important; }
  .yohAdExitBtn{ width:32px; height:32px; font-size:23px; top:max(8px, env(safe-area-inset-top)); right:max(8px, env(safe-area-inset-right)); }
}

/* === v83: fullscreen top background fix ===
   Przy desktopowym fullscreen Chrome potrafi przez chwilę pokazać czarny pas
   u góry, gdy tło było malowane tylko wewnątrz overlay'a. Teraz ten sam
   cinematic background jest malowany także na html/body/overlay, więc góra
   ekranu nie spada do czerni. */
html.yohAdFullscreenLike,
html:fullscreen,
html:-webkit-full-screen,
body.yohAdFullscreenLike,
body:fullscreen,
body:-webkit-full-screen,
body.yohAdMode.yohAdRunning{
  background-color:#07000f !important;
  background-image:
    radial-gradient(circle at 18% 50%, rgba(255,244,92,.16), transparent 28%),
    radial-gradient(circle at 73% 34%, rgba(255,86,217,.14), transparent 28%),
    linear-gradient(90deg, rgba(7,0,18,.92) 0%, rgba(8,0,18,.80) 36%, rgba(5,6,18,.95) 66%, rgba(2,2,10,.99) 100%) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
}
body.yohAdMode.yohAdRunning .yohAdOverlay,
body.yohAdMode.yohAdRunning .yohAdCinematicBg{
  background-color:#07000f !important;
  background-image:
    radial-gradient(circle at 18% 50%, rgba(255,244,92,.16), transparent 28%),
    radial-gradient(circle at 73% 34%, rgba(255,86,217,.14), transparent 28%),
    linear-gradient(90deg, rgba(7,0,18,.92) 0%, rgba(8,0,18,.80) 36%, rgba(5,6,18,.95) 66%, rgba(2,2,10,.99) 100%) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
}
html.yohAdFullscreenLike body::before,
html:fullscreen body::before,
html:-webkit-full-screen body::before{
  background-color:#07000f !important;
  background-image:
    radial-gradient(circle at 18% 50%, rgba(255,244,92,.16), transparent 28%),
    radial-gradient(circle at 73% 34%, rgba(255,86,217,.14), transparent 28%),
    linear-gradient(90deg, rgba(7,0,18,.92) 0%, rgba(8,0,18,.80) 36%, rgba(5,6,18,.95) 66%, rgba(2,2,10,.99) 100%) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
}


/* === v84: tło responsywne bez fioletowego pasa + widoczne kontrolki prezentacji ===
   Używamy tych samych tapet, co gra: desktop / telefon pion / telefon poziom.
   Overlay prezentacji dostaje własne tło, więc fullscreen nie pokazuje ani czarnego,
   ani fioletowego paska w safe-area / na szerokich ekranach. */
:root{
  --yohAdBgDesktop:url('../img/palmasvg.svg');
  --yohAdBgLandscape:url('../img/palmasvgpoziom.svg');
  --yohAdBgPhoneLandscape:url('../img/palmasvgtele1.svg');
  --yohAdBgPhonePortrait:url('../img/palmasvgtele3.svg');
}
html,
body,
html:fullscreen,
html:-webkit-full-screen,
body:fullscreen,
body:-webkit-full-screen{
  background-color:#080015 !important;
}
body.yohAdMode::before,
body.yohAdMode.yohAdRunning::before,
html.yohAdFullscreenLike body::before,
html:fullscreen body::before,
html:-webkit-full-screen body::before{
  content:"" !important;
  position:fixed !important;
  inset:-2px !important;
  z-index:-2 !important;
  pointer-events:none !important;
  opacity:1 !important;
  background-color:#080015 !important;
  background-image:var(--yohAdBgDesktop) !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:100% 100% !important;
  transform:none !important;
}
@media (orientation:landscape){
  body.yohAdMode::before,
  body.yohAdMode.yohAdRunning::before,
  html.yohAdFullscreenLike body::before,
  html:fullscreen body::before,
  html:-webkit-full-screen body::before{ background-image:var(--yohAdBgLandscape) !important; }
}
@media (orientation:portrait) and (max-width:900px){
  body.yohAdMode::before,
  body.yohAdMode.yohAdRunning::before,
  html.yohAdFullscreenLike body::before,
  html:fullscreen body::before,
  html:-webkit-full-screen body::before{ background-image:var(--yohAdBgPhonePortrait) !important; }
}
@media (orientation:landscape) and (max-width:900px){
  body.yohAdMode::before,
  body.yohAdMode.yohAdRunning::before,
  html.yohAdFullscreenLike body::before,
  html:fullscreen body::before,
  html:-webkit-full-screen body::before{ background-image:var(--yohAdBgPhoneLandscape) !important; }
}
body.yohAdMode.yohAdRunning .yohAdOverlay{
  background-color:#080015 !important;
  background-image:var(--yohAdBgDesktop) !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:100% 100% !important;
}
@media (orientation:landscape){
  body.yohAdMode.yohAdRunning .yohAdOverlay{ background-image:var(--yohAdBgLandscape) !important; }
}
@media (orientation:portrait) and (max-width:900px){
  body.yohAdMode.yohAdRunning .yohAdOverlay{ background-image:var(--yohAdBgPhonePortrait) !important; }
}
@media (orientation:landscape) and (max-width:900px){
  body.yohAdMode.yohAdRunning .yohAdOverlay{ background-image:var(--yohAdBgPhoneLandscape) !important; }
}
body.yohAdMode.yohAdRunning .yohAdCinematicBg{
  background-color:transparent !important;
  background-image:
    radial-gradient(circle at 18% 50%, rgba(255,244,92,.10), transparent 30%),
    radial-gradient(circle at 76% 36%, rgba(255,86,217,.08), transparent 31%),
    linear-gradient(90deg, rgba(7,0,18,.36) 0%, rgba(8,0,18,.25) 38%, rgba(5,6,18,.38) 68%, rgba(2,2,10,.50) 100%) !important;
  background-repeat:no-repeat !important;
  background-size:100% 100% !important;
}

/* Kontrolki segmentów mają być zawsze widoczne i klikalne. */
body.yohAdMode.yohAdRunning .yohAdProgressDots{
  pointer-events:auto !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  flex-wrap:nowrap !important;
  gap:8px !important;
  z-index:2147483001 !important;
}
.yohAdProgressArrow{
  display:grid !important;
  place-items:center !important;
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  border-radius:999px !important;
  background:rgba(8,0,20,.72) !important;
  border:1px solid rgba(255,244,92,.62) !important;
  color:#fff45c !important;
  font-size:24px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  box-shadow:0 0 22px rgba(255,244,92,.22), 0 10px 28px rgba(0,0,0,.34) !important;
  opacity:1 !important;
}
.yohAdProgressArrow:disabled{ opacity:.46 !important; }
.yohAdProgressDot{
  display:block !important;
  width:10px !important;
  height:10px !important;
  min-width:10px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.30) !important;
}
.yohAdProgressDot.isActive{
  width:30px !important;
  min-width:30px !important;
  background:#fff45c !important;
}
body.yohAdMode.yohAdRunning .yohAdExitBtn{
  display:grid !important;
  pointer-events:auto !important;
  z-index:2147483002 !important;
  top:18px !important;
  right:18px !important;
  width:44px !important;
  height:44px !important;
  border:1px solid rgba(255,244,92,.55) !important;
  background:rgba(8,0,20,.78) !important;
  color:#fff !important;
  font-size:32px !important;
  box-shadow:0 0 24px rgba(255,244,92,.22), 0 18px 40px rgba(0,0,0,.45) !important;
}
body.yohAdHomeFinal .yohAdExitBtn{ display:none !important; }
@media (orientation:portrait) and (max-width:900px){
  body.yohAdMode.yohAdRunning .yohAdExitBtn{
    top:max(10px, env(safe-area-inset-top)) !important;
    right:max(10px, env(safe-area-inset-right)) !important;
    width:38px !important;
    height:38px !important;
    font-size:28px !important;
  }
  .yohAdProgressArrow{ width:22px !important; height:22px !important; min-width:22px !important; font-size:19px !important; }
  .yohAdProgressDot{ width:8px !important; height:8px !important; min-width:8px !important; }
  .yohAdProgressDot.isActive{ width:24px !important; min-width:24px !important; }
}
@media (orientation:landscape) and (max-height:600px){
  body.yohAdMode.yohAdRunning .yohAdExitBtn{
    top:10px !important;
    right:10px !important;
    width:36px !important;
    height:36px !important;
    font-size:26px !important;
  }
  .yohAdProgressArrow{ width:24px !important; height:24px !important; min-width:24px !important; font-size:20px !important; }
}


/* === v85: pełne tło bez czarnych pasów + subtelne kontrolki bez ramek ===
   Tło jest generowane w 3 wersjach SVG (wide / phone landscape / portrait),
   zawsze kryje cały viewport w trybie fullscreen i normalnym. */
:root{
  --yohAdBgDesktop:url('../img/ad/bg-yoh-wide.svg');
  --yohAdBgLandscape:url('../img/ad/bg-yoh-wide.svg');
  --yohAdBgPhoneLandscape:url('../img/ad/bg-yoh-phone-landscape.svg');
  --yohAdBgPhonePortrait:url('../img/ad/bg-yoh-portrait.svg');
}
html, body,
html:fullscreen, html:-webkit-full-screen,
body:fullscreen, body:-webkit-full-screen{
  background:#080015 !important;
  min-height:100% !important;
}
body.yohAdMode,
body.yohAdMode.yohAdRunning,
body.yohAdMode.yohAdRunning .yohAdOverlay,
html.yohAdFullscreenLike body,
html.yohAdFullscreenLike body.yohAdMode.yohAdRunning,
html:fullscreen body,
html:-webkit-full-screen body{
  background-color:#080015 !important;
  background-image:
    radial-gradient(circle at 18% 42%, rgba(255,244,92,.10), transparent 35%),
    radial-gradient(circle at 72% 16%, rgba(255,86,217,.13), transparent 34%),
    var(--yohAdBgDesktop) !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
body.yohAdMode.yohAdRunning::before,
body.yohAdMode.yohAdRunning .yohAdOverlay::before{
  content:"" !important;
  position:fixed !important;
  inset:-3px !important;
  z-index:-1 !important;
  pointer-events:none !important;
  background-color:#080015 !important;
  background-image:
    radial-gradient(circle at 18% 42%, rgba(255,244,92,.10), transparent 35%),
    radial-gradient(circle at 72% 16%, rgba(255,86,217,.13), transparent 34%),
    var(--yohAdBgDesktop) !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
  transform:none !important;
  opacity:1 !important;
}
body.yohAdMode.yohAdRunning .yohAdOverlay{
  overflow:hidden !important;
  isolation:isolate !important;
}
body.yohAdMode.yohAdRunning .yohAdCinematicBg{
  background:
    radial-gradient(circle at 18% 50%, rgba(255,244,92,.07), transparent 34%),
    radial-gradient(circle at 75% 38%, rgba(255,86,217,.08), transparent 35%),
    linear-gradient(90deg, rgba(5,0,13,.22) 0%, rgba(5,0,13,.07) 42%, rgba(2,2,9,.24) 100%) !important;
  background-size:100% 100% !important;
}
@media (orientation:landscape){
  body.yohAdMode,
  body.yohAdMode.yohAdRunning,
  body.yohAdMode.yohAdRunning .yohAdOverlay,
  html.yohAdFullscreenLike body,
  html:fullscreen body,
  html:-webkit-full-screen body,
  body.yohAdMode.yohAdRunning::before,
  body.yohAdMode.yohAdRunning .yohAdOverlay::before{
    background-image:
      radial-gradient(circle at 18% 42%, rgba(255,244,92,.10), transparent 35%),
      radial-gradient(circle at 72% 16%, rgba(255,86,217,.13), transparent 34%),
      var(--yohAdBgLandscape) !important;
  }
}
@media (orientation:portrait) and (max-width:900px){
  body.yohAdMode,
  body.yohAdMode.yohAdRunning,
  body.yohAdMode.yohAdRunning .yohAdOverlay,
  html.yohAdFullscreenLike body,
  html:fullscreen body,
  html:-webkit-full-screen body,
  body.yohAdMode.yohAdRunning::before,
  body.yohAdMode.yohAdRunning .yohAdOverlay::before{
    background-image:
      radial-gradient(circle at 18% 42%, rgba(255,244,92,.10), transparent 35%),
      radial-gradient(circle at 72% 16%, rgba(255,86,217,.13), transparent 34%),
      var(--yohAdBgPhonePortrait) !important;
  }
}
@media (orientation:landscape) and (max-width:900px){
  body.yohAdMode,
  body.yohAdMode.yohAdRunning,
  body.yohAdMode.yohAdRunning .yohAdOverlay,
  html.yohAdFullscreenLike body,
  html:fullscreen body,
  html:-webkit-full-screen body,
  body.yohAdMode.yohAdRunning::before,
  body.yohAdMode.yohAdRunning .yohAdOverlay::before{
    background-image:
      radial-gradient(circle at 18% 42%, rgba(255,244,92,.10), transparent 35%),
      radial-gradient(circle at 72% 16%, rgba(255,86,217,.13), transparent 34%),
      var(--yohAdBgPhoneLandscape) !important;
  }
}

/* Strzałki w pasku segmentów: bez kółek, bez tła, w tej samej linii co kropki. */
body.yohAdMode.yohAdRunning .yohAdProgressDots{
  align-items:center !important;
  gap:7px !important;
}
.yohAdProgressArrow{
  width:17px !important;
  min-width:17px !important;
  height:16px !important;
  min-height:16px !important;
  padding:0 !important;
  margin:0 1px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#fff45c !important;
  font-size:23px !important;
  line-height:.72 !important;
  font-weight:1000 !important;
  text-shadow:0 0 13px rgba(255,244,92,.72), 0 0 24px rgba(255,244,92,.35) !important;
  transform:none !important;
}
.yohAdProgressArrow:hover{ transform:translateY(-1px) scale(1.08) !important; }
.yohAdProgressArrow:disabled{
  opacity:.34 !important;
  filter:grayscale(.3) !important;
  cursor:default !important;
}
.yohAdProgressDot{
  border:0 !important;
  outline:0 !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset !important;
}
.yohAdProgressDot.isActive{
  box-shadow:0 0 20px rgba(255,244,92,.48), 0 0 0 1px rgba(255,255,255,.18) inset !important;
}

/* X do wyjścia: czysty znak bez obwódki i bez tła. */
body.yohAdMode.yohAdRunning .yohAdExitBtn{
  display:grid !important;
  place-items:center !important;
  width:34px !important;
  height:34px !important;
  top:16px !important;
  right:18px !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:#fff !important;
  font-size:34px !important;
  line-height:.8 !important;
  font-weight:1000 !important;
  text-shadow:0 0 10px rgba(255,255,255,.55), 0 0 22px rgba(255,244,92,.46) !important;
}
body.yohAdMode.yohAdRunning .yohAdExitBtn:hover{
  transform:scale(1.08) !important;
  color:#fff45c !important;
  background:transparent !important;
}
body.yohAdHomeFinal .yohAdExitBtn{ display:none !important; }
@media (orientation:portrait) and (max-width:900px){
  .yohAdProgressArrow{ width:14px !important; min-width:14px !important; height:14px !important; font-size:20px !important; }
  body.yohAdMode.yohAdRunning .yohAdExitBtn{ width:30px !important; height:30px !important; font-size:30px !important; top:10px !important; right:10px !important; }
}
@media (orientation:landscape) and (max-height:600px){
  .yohAdProgressArrow{ width:16px !important; min-width:16px !important; height:15px !important; font-size:22px !important; }
  body.yohAdMode.yohAdRunning .yohAdExitBtn{ width:32px !important; height:32px !important; font-size:32px !important; top:10px !important; right:12px !important; }
}


/* === v86: Beta wersja + czyste kontrolki / pełne tło === */
.yohAdStartActions{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:12px !important;
  flex-wrap:wrap !important;
}
.yohAdBetaBtn{
  background:linear-gradient(135deg,#4fffd5 0%,#35a9ff 48%,#8c5bff 100%) !important;
  color:#050017 !important;
  box-shadow:0 14px 34px rgba(53,169,255,.25),0 4px 0 rgba(0,0,0,.24), inset 0 0 22px rgba(255,255,255,.24) !important;
}
.yohAdBetaBtn:hover{ filter:brightness(1.08) !important; }

/* Kontrolki prezentacji bez obwodów i tła, jak elementy segmentów. */
.yohAdProgressArrow,
body.yohAdMode.yohAdRunning .yohAdExitBtn{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Dociągnięcie tła na całą wysokość także po wejściu w fullscreen z Chrome. */
html:fullscreen,
html:-webkit-full-screen,
body:fullscreen,
body:-webkit-full-screen,
:fullscreen .yohAdOverlay,
:-webkit-full-screen .yohAdOverlay{
  background-color:#080015 !important;
  background-image:
    radial-gradient(circle at 18% 42%, rgba(255,244,92,.10), transparent 35%),
    radial-gradient(circle at 72% 16%, rgba(255,86,217,.13), transparent 34%),
    var(--yohAdBgDesktop) !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
@media (orientation:landscape) and (max-width:900px){
  html:fullscreen,
  html:-webkit-full-screen,
  body:fullscreen,
  body:-webkit-full-screen,
  :fullscreen .yohAdOverlay,
  :-webkit-full-screen .yohAdOverlay{
    background-image:
      radial-gradient(circle at 18% 42%, rgba(255,244,92,.10), transparent 35%),
      radial-gradient(circle at 72% 16%, rgba(255,86,217,.13), transparent 34%),
      var(--yohAdBgPhoneLandscape) !important;
  }
}
@media (orientation:portrait) and (max-width:900px){
  html:fullscreen,
  html:-webkit-full-screen,
  body:fullscreen,
  body:-webkit-full-screen,
  :fullscreen .yohAdOverlay,
  :-webkit-full-screen .yohAdOverlay{
    background-image:
      radial-gradient(circle at 18% 42%, rgba(255,244,92,.10), transparent 35%),
      radial-gradient(circle at 72% 16%, rgba(255,86,217,.13), transparent 34%),
      var(--yohAdBgPhonePortrait) !important;
  }
}
@media (max-width:720px){
  .yohAdFinalButtons{ gap:8px !important; }
  .yohAdFinalButtons .yohAdReplayBtn{ font-size:clamp(12px,3.7vw,16px) !important; padding:10px 13px !important; }
}


/* === v87: beta tylko desktop + równe strzałki + X tylko w trakcie prezentacji + pełne tło fullscreen === */
@media (min-width:901px) and (orientation:landscape){
  .yohAdFinalButtons,
  .yohAdStartActions{
    justify-content:center !important;
    align-items:center !important;
    gap:clamp(14px,1.2vw,20px) !important;
  }
  .yohAdBetaBtn{
    min-width:clamp(210px,15vw,280px) !important;
    text-align:center !important;
  }
}
@media (max-width:900px), (orientation:portrait){
  .yohAdBetaBtn{
    min-width:0 !important;
  }
}

/* Strzałki bez tła/obramowań, geometrycznie w tej samej linii co kropki. */
body.yohAdMode.yohAdRunning .yohAdProgressDots{
  align-items:center !important;
  gap:7px !important;
}
.yohAdProgressArrow{
  position:relative !important;
  width:18px !important;
  min-width:18px !important;
  height:12px !important;
  min-height:12px !important;
  padding:0 !important;
  margin:0 1px !important;
  font-size:0 !important;
  line-height:0 !important;
  color:transparent !important;
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:none !important;
}
.yohAdProgressArrow::before{
  content:"" !important;
  display:block !important;
  width:0 !important;
  height:0 !important;
  filter:drop-shadow(0 0 7px rgba(255,244,92,.72)) drop-shadow(0 0 14px rgba(255,244,92,.40)) !important;
}
.yohAdProgressArrow--prev::before{
  border-top:6px solid transparent !important;
  border-bottom:6px solid transparent !important;
  border-right:9px solid #fff45c !important;
}
.yohAdProgressArrow--next::before{
  border-top:6px solid transparent !important;
  border-bottom:6px solid transparent !important;
  border-left:9px solid #fff45c !important;
}
.yohAdProgressArrow:hover{ transform:translateY(-1px) scale(1.07) !important; }
.yohAdProgressArrow:disabled{ opacity:.28 !important; transform:none !important; }
.yohAdProgressDot{
  align-self:center !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* X jest potrzebny tylko w trakcie segmentów prezentacji, nie na ekranie startowym/końcowym. */
body.yohAdMode.yohAdRunning:not(.yohAdSceneActive) .yohAdExitBtn,
body.yohAdMode.yohAdRunning.yohAdHomeFinal .yohAdExitBtn,
body.yohAdHomeFinal .yohAdExitBtn{
  display:none !important;
  opacity:0 !important;
  pointer-events:none !important;
}
body.yohAdMode.yohAdRunning.yohAdSceneActive .yohAdExitBtn{
  display:grid !important;
  opacity:1 !important;
  pointer-events:auto !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

/* Pełne tło także w fullscreen: tło elementu, jego backdrop i delikatny górny pas z tej samej stylistyki. */
:fullscreen::backdrop,
:-webkit-full-screen::backdrop{
  background-color:#080015 !important;
  background-image:
    linear-gradient(100deg, rgba(111,27,178,.72) 0%, rgba(34,0,50,.44) 18%, rgba(8,0,21,.18) 42%, rgba(8,0,21,.52) 100%),
    radial-gradient(circle at 18% 42%, rgba(255,244,92,.10), transparent 35%),
    radial-gradient(circle at 72% 16%, rgba(255,86,217,.13), transparent 34%),
    var(--yohAdBgDesktop) !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
body.yohAdMode.yohAdRunning .yohAdOverlay,
html:fullscreen body.yohAdMode.yohAdRunning .yohAdOverlay,
html:-webkit-full-screen body.yohAdMode.yohAdRunning .yohAdOverlay,
:fullscreen .yohAdOverlay,
:-webkit-full-screen .yohAdOverlay{
  background-color:#080015 !important;
  background-image:
    linear-gradient(100deg, rgba(111,27,178,.72) 0%, rgba(34,0,50,.44) 18%, rgba(8,0,21,.18) 42%, rgba(8,0,21,.52) 100%),
    radial-gradient(circle at 18% 42%, rgba(255,244,92,.10), transparent 35%),
    radial-gradient(circle at 72% 16%, rgba(255,86,217,.13), transparent 34%),
    var(--yohAdBgDesktop) !important;
  background-repeat:no-repeat !important;
  background-position:center center !important;
  background-size:cover !important;
}
body.yohAdMode.yohAdRunning .yohAdOverlay::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  top:0 !important;
  height:max(86px, 9vh) !important;
  pointer-events:none !important;
  z-index:0 !important;
  background:linear-gradient(100deg, rgba(112,25,181,.64) 0%, rgba(59,0,86,.28) 32%, rgba(6,0,17,.04) 75%) !important;
  mix-blend-mode:screen !important;
  opacity:.82 !important;
}
.yohAdCinematicBg,
.yohAdSoftNoise,
.yohAdLightSweep,
.yohAdFlash,
.yohAdPresenterGlow,
.yohAdLeftBrand,
.yohAdRightBlock,
.yohAdProgressDots,
.yohAdExitBtn,
.yohAdFinalPanel,
#yohAdEndScreen{
  z-index:1;
}
.yohAdProgressDots,
.yohAdExitBtn,
#yohAdEndScreen{ z-index:2147483002 !important; }
@media (orientation:landscape) and (max-width:900px){
  :fullscreen::backdrop,
  :-webkit-full-screen::backdrop,
  body.yohAdMode.yohAdRunning .yohAdOverlay,
  :fullscreen .yohAdOverlay,
  :-webkit-full-screen .yohAdOverlay{
    background-image:
      linear-gradient(100deg, rgba(111,27,178,.72) 0%, rgba(34,0,50,.44) 18%, rgba(8,0,21,.18) 42%, rgba(8,0,21,.52) 100%),
      radial-gradient(circle at 18% 42%, rgba(255,244,92,.10), transparent 35%),
      radial-gradient(circle at 72% 16%, rgba(255,86,217,.13), transparent 34%),
      var(--yohAdBgPhoneLandscape) !important;
  }
}
@media (orientation:portrait) and (max-width:900px){
  :fullscreen::backdrop,
  :-webkit-full-screen::backdrop,
  body.yohAdMode.yohAdRunning .yohAdOverlay,
  :fullscreen .yohAdOverlay,
  :-webkit-full-screen .yohAdOverlay{
    background-image:
      linear-gradient(100deg, rgba(111,27,178,.72) 0%, rgba(34,0,50,.44) 18%, rgba(8,0,21,.18) 42%, rgba(8,0,21,.52) 100%),
      radial-gradient(circle at 18% 42%, rgba(255,244,92,.10), transparent 35%),
      radial-gradient(circle at 72% 16%, rgba(255,86,217,.13), transparent 34%),
      var(--yohAdBgPhonePortrait) !important;
  }
}