/* Oopsie Doodles games: shared frame */
#activity-screen{position:absolute;inset:0;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#fff6fb 0%,#eef7ff 50%,#fff4dc 100%);display:flex;flex-direction:column}
.ga-bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:max(10px,env(safe-area-inset-top)) 12px 6px;padding-right:calc(12px + 190px)}
.ga-title{flex:1;margin:0;text-align:center;font:700 clamp(18px,2.8vw,28px)/1.1 Poppins,system-ui,sans-serif;color:#2a2350;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ga-right{display:flex;align-items:center;gap:8px}
.ga-pill{border:0;border-radius:999px;background:#fff;color:#2a2350;font:700 14px/1 Poppins,system-ui,sans-serif;padding:10px 16px 10px 10px;min-height:46px;display:flex;align-items:center;gap:6px;cursor:pointer;box-shadow:0 2px 8px rgba(42,35,80,.14)}
.ga-pill svg,.ga-round svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ga-round{width:48px;height:48px;border:0;border-radius:50%;background:#fff;color:#2a2350;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(42,35,80,.14);padding:0}
.ga-round:first-of-type svg{stroke:#e6a400}
.ga-round[hidden],.ga-prog[hidden]{display:none}
.ga-prog{font:700 15px/1 Poppins,system-ui,sans-serif;color:#2a2350;background:#fff;border-radius:999px;padding:12px 14px;box-shadow:0 2px 8px rgba(42,35,80,.14);white-space:nowrap}
.ga-pill:hover,.ga-round:hover{background:#f6f2ff}
.ga-pill:focus-visible,.ga-round:focus-visible,.ga-btn:focus-visible{outline:4px solid #1f6dff;outline-offset:3px}
.ga-body{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
.ga-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}
.ga-starli{position:absolute;left:50%;bottom:16%;width:clamp(110px,18vw,190px);z-index:31;pointer-events:none;filter:drop-shadow(0 8px 16px rgba(60,40,120,.3))}
.ga-starli[hidden]{display:none}
.ga-banner{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:32;pointer-events:none;font:800 clamp(28px,6.5vw,72px)/1.1 Poppins,system-ui,sans-serif;color:#fff;text-align:center;white-space:normal;width:max-content;max-width:92vw;
  -webkit-text-stroke:2px #7b2ff7;text-shadow:0 4px 0 #7b2ff7,0 8px 22px rgba(80,30,160,.45)}
.ga-end{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(255,250,245,.6);padding:16px}
.ga-end[hidden]{display:none}
.ga-card{background:#fff;border-radius:28px;box-shadow:0 18px 50px rgba(42,35,80,.25);padding:26px 28px;max-width:min(520px,94vw);text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.ga-msg{font:800 clamp(24px,5vw,40px)/1.1 Poppins,system-ui,sans-serif;color:#7b2ff7}
.ga-stars{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.ga-star svg{width:clamp(30px,6vw,44px);height:auto;fill:#e7e2f3;stroke:#c9c0e0;stroke-width:1}
.ga-star.on svg{fill:#ffc21a;stroke:#e09a00;filter:drop-shadow(0 0 8px rgba(255,200,40,.8))}
.ga-star.on{animation:ga-pop .5s ease-out both}
@keyframes ga-pop{0%{transform:scale(.2);opacity:0}70%{transform:scale(1.2);opacity:1}100%{transform:scale(1)}}
.ga-btns{display:flex;flex-direction:column;gap:10px;width:100%}
.ga-btn{border:0;border-radius:999px;background:#7b2ff7;color:#fff;font:700 16px/1 Poppins,system-ui,sans-serif;padding:15px 22px;min-height:52px;cursor:pointer;box-shadow:0 4px 0 #5a19c9}
.ga-btn:hover{background:#8a45ff}
.ga-btn.alt{background:#f1ecff;color:#2a2350;box-shadow:0 4px 0 #d8cff5}
html.calm .ga-star.on{animation:none}
@media (max-width:700px){
  .ga-bar{flex-wrap:wrap;padding-right:12px;padding-top:calc(max(10px,env(safe-area-inset-top)) + 56px)}
  .ga-pill span{display:none}.ga-pill{padding:10px 12px}
  .ga-title{order:3;flex-basis:100%;font-size:18px}
  .ga-right{margin-left:auto}
}
@media (orientation:landscape) and (max-height:520px){
  .ga-bar{padding-top:max(8px,env(safe-area-inset-top));padding-right:calc(12px + 170px)}.ga-title{font-size:17px}
}

/* Game 1: What's wrong */
.gw-stage{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 8px 26px rgba(42,35,80,.2);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.gw-img,.gw-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.gw-svg{pointer-events:none}
.gw-key{position:absolute;border:0;background:transparent;padding:0;pointer-events:none;border-radius:16px}
.gw-key:focus-visible{outline:4px solid #1f6dff;outline-offset:2px;pointer-events:auto}

/* Game 2: Jigsaw */
.gj-pick{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2vh,18px);width:100%;height:100%;padding:10px;overflow:auto}
.gj-sizes{display:flex;gap:10px;justify-content:center;flex:0 0 auto}
.gj-size{border:0;border-radius:999px;background:#fff;box-shadow:0 4px 14px rgba(42,35,80,.14);padding:8px 18px;min-height:48px;display:flex;align-items:baseline;gap:6px;cursor:pointer;color:#4a4470;transition:transform .15s,background .15s}
.gj-size:hover{transform:translateY(-2px)}
.gj-size.on{background:#7b2ff7;color:#fff;box-shadow:0 6px 18px rgba(123,47,247,.4)}
.gj-sz-n{font:800 22px/1 Poppins,system-ui,sans-serif}
.gj-sz-l{font:600 14px/1 Poppins,system-ui,sans-serif}
.gj-size:focus-visible,.gj-pic:focus-visible{outline:4px solid #1f6dff;outline-offset:3px}
.gj-pics{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:clamp(10px,1.6vw,18px);width:100%;max-width:1100px}
.gj-pic{border:0;border-radius:20px;background:#fff;box-shadow:0 8px 22px rgba(42,35,80,.16);padding:8px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;position:relative;transition:transform .15s}
.gj-pic:hover{transform:translateY(-4px)}
.gj-pic img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;display:block;pointer-events:none}
.gj-pic strong{font:800 clamp(14px,1.6vw,17px)/1.15 Poppins,system-ui,sans-serif;color:#7b2ff7;text-align:center}
.gj-pstar{position:absolute;top:2px;right:2px}
.gj-pstar svg{width:38px;height:38px;fill:#ffc21a;stroke:#e09a00;filter:drop-shadow(0 0 6px rgba(255,200,40,.8))}
.gj-ref{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;opacity:0;transition:opacity .6s}
.gj-ref.on{opacity:1}
.gj-ref-l{font:800 15px/18px Poppins,system-ui,sans-serif;color:#7b2ff7;white-space:nowrap}
.gj-ref img{flex:1 1 auto;min-height:0;max-width:100%;border-radius:10px;border:3px solid #fff;box-shadow:0 4px 14px rgba(42,35,80,.22);object-fit:contain}
.gj-outline{position:absolute;pointer-events:none;z-index:1;opacity:0;transition:opacity .6s}
.gj-outline.on{opacity:1}
.gj-endnote{font:700 16px/1.3 Poppins,system-ui,sans-serif;color:#4a4470;margin:4px 0 0;display:flex;flex-direction:column;align-items:center;gap:8px}
.gj-nextpic{width:min(220px,60vw);border-radius:12px;box-shadow:0 4px 14px rgba(42,35,80,.2)}
.gj-field{position:absolute;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
.gj-tray{position:absolute;border-radius:20px;background:rgba(123,47,247,.07);border:3px dashed rgba(123,47,247,.25)}
.gj-board{position:absolute;border-radius:6px;background:#fff;box-shadow:0 8px 26px rgba(42,35,80,.2)}
.gj-guide,.gj-full{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.gj-guide{opacity:0;transition:opacity .6s}
.gj-guide.on{opacity:.3}
.gj-full{opacity:1;transition:opacity .6s;z-index:2}
.gj-piece{position:absolute;left:0;top:0;transform-origin:0 0;cursor:grab;filter:drop-shadow(0 3px 4px rgba(40,25,70,.35));-webkit-tap-highlight-color:transparent;transition:opacity .5s}
.gj-piece.lift{cursor:grabbing;filter:drop-shadow(0 10px 12px rgba(40,25,70,.4))}
.gj-piece.sel{filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 7px #7b2ff7) drop-shadow(0 0 3px #fff)}
.gj-piece.locked{cursor:default;filter:none;pointer-events:none}
.gj-piece.hinted{animation:gj-wig .5s ease-in-out 3}
.gj-piece:focus-visible{outline:4px solid #1f6dff}
@keyframes gj-wig{0%,100%{rotate:0deg}30%{rotate:-5deg}70%{rotate:5deg}}
.gj-slot{position:absolute;border:0;background:transparent;padding:0;pointer-events:none;z-index:3}
.gj-slot:focus-visible{outline:4px solid #1f6dff;outline-offset:-4px}
.gj-hint{position:absolute;z-index:4;pointer-events:none;border-radius:8px;background:rgba(255,245,170,.35);box-shadow:0 0 0 4px rgba(255,220,90,.95),0 0 26px rgba(255,220,90,.9);animation:gj-glow 1.1s ease-in-out 2}
@keyframes gj-glow{0%,100%{opacity:.35}50%{opacity:1}}
.gj-crown{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:33;display:flex;gap:4px;align-items:flex-end;pointer-events:none}
.gj-crown span:nth-child(2){margin-bottom:22px}
.gj-crown svg{width:clamp(60px,10vw,110px);height:auto;fill:#ffc21a;stroke:#e09a00;stroke-width:.8;filter:drop-shadow(0 0 16px rgba(255,200,40,.95))}
html.calm .gj-piece.hinted,html.calm .gj-hint{animation:none}

/* Game 3: Mazes */
.gz-pick{display:grid;grid-template-columns:repeat(3,minmax(0,250px));gap:clamp(10px,2vw,22px);justify-content:center;align-content:center;width:100%;height:100%;padding:10px}
.gz-card{border:0;border-radius:24px;background:#fff;box-shadow:0 8px 22px rgba(42,35,80,.16);padding:12px 12px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;position:relative;transition:transform .15s}
.gz-card:hover{transform:translateY(-4px)}
.gz-card:focus-visible{outline:4px solid #1f6dff;outline-offset:3px}
.gz-card img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px}
.gz-card strong{font:800 clamp(14px,1.9vw,19px)/1.1 Poppins,system-ui,sans-serif;color:#7b2ff7}
.gz-card.locked img{filter:grayscale(.85) brightness(1.1);opacity:.6}
.gz-lock{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 4px 12px rgba(42,35,80,.25)}
.gz-lock svg{width:32px;height:32px;fill:none;stroke:#7b2ff7;stroke-width:2.4;stroke-linecap:round}
@media (max-width:700px){.gz-pick{grid-template-columns:minmax(0,260px);align-content:start;overflow:auto}.gz-card img{aspect-ratio:2}}
.gz-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;height:100%;justify-content:center}
.gz-wrap.land{flex-direction:row}
.gz-stage{position:relative;flex:0 0 auto;border-radius:18px;overflow:hidden;box-shadow:0 8px 26px rgba(42,35,80,.2);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.gz-bg,.gz-fx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.gz-hero{position:absolute;transform:translate(-50%,-62%);width:auto;pointer-events:none;filter:drop-shadow(0 5px 6px rgba(30,20,60,.45)) drop-shadow(0 0 3px #fff);transition:filter .2s;z-index:3}
.gz-hero.held{filter:drop-shadow(0 8px 10px rgba(30,20,60,.45)) drop-shadow(0 0 10px #fff6a0)}
.gz-pad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:4px;flex:0 0 auto}
.gz-arrow{border:0;border-radius:16px;background:#fff;color:#7b2ff7;box-shadow:0 3px 8px rgba(42,35,80,.18);display:grid;place-items:center;padding:0;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
.gz-arrow svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.gz-arrow:active{background:#f1ecff;transform:scale(.94)}
.gz-arrow:focus-visible{outline:4px solid #1f6dff;outline-offset:2px}
.gz-up{grid-column:2;grid-row:1}.gz-left{grid-column:1;grid-row:2}.gz-right{grid-column:3;grid-row:2}.gz-down{grid-column:2;grid-row:3}
.gz-wrap:not(.land) .gz-pad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,40px)}
.gz-goalglow{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:2;background:radial-gradient(circle,rgba(255,255,255,.85) 0,rgba(255,170,220,.55) 35%,rgba(255,170,220,0) 70%);animation:gz-bloom 1.2s ease-out both}
.gz-goalglow.gz-candy{background:radial-gradient(circle,rgba(255,255,255,.8) 0,rgba(255,220,120,.5) 35%,rgba(255,220,120,0) 70%)}
.gz-goalglow.gz-starry{background:radial-gradient(circle,rgba(200,140,255,.85) 0,rgba(150,60,255,.55) 40%,rgba(150,60,255,0) 72%);animation:gz-door 1.6s ease-in-out infinite}
.gz-goalglow.gz-starry.open{background:radial-gradient(circle,rgba(255,255,255,1) 0,rgba(255,236,160,.9) 30%,rgba(190,120,255,.5) 55%,rgba(190,120,255,0) 75%);animation:gz-open 1.4s ease-out both}
@keyframes gz-bloom{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}60%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}}
@keyframes gz-door{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(.95)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes gz-open{0%{opacity:.6;transform:translate(-50%,-50%) scale(.9)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.45)}}
.gz-goalglow:not(.gz-starry){display:none}
.gz-goalglow.gz-garden,.gz-goalglow.gz-candy{display:block}
.gz-flyer{position:absolute;left:0;top:0;width:clamp(50px,7vw,80px);z-index:31;pointer-events:none}
.gz-trophy svg{width:clamp(70px,14vw,110px);height:auto;filter:drop-shadow(0 0 14px rgba(255,200,40,.9))}
html.calm .gz-goalglow{animation:none}

/* Save Mama's Corn! */
.corn-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.corn-cv{display:block;border-radius:18px;box-shadow:0 6px 24px rgba(42,35,80,.2);touch-action:none;cursor:pointer;-webkit-user-select:none;user-select:none}
.corn-turn{display:none;position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:#7b2ff7;color:#fff;font:700 16px/1.2 Poppins,system-ui,sans-serif;padding:10px 16px;border-radius:999px;white-space:nowrap;pointer-events:none}
@media (orientation:portrait) and (max-width:700px){.corn-turn{display:block}}
/* Mikey's Sled Run runs in its own page inside the game frame */
.sled-box{position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;box-shadow:0 6px 24px rgba(42,35,80,.2);background:#018ffe}
.sled-frame{display:block;width:100%;height:100%;border:0}
/* Save Mama's Corn! on a sideways phone: the bar becomes a thin strip on the left and the site buttons stand up on the right,
   so the field can use the whole height of the screen. (Only while the corn game is open.) */
@media (orientation:landscape) and (max-height:520px){
  #activity-screen.active:has(.corn-stage){flex-direction:row}
  #activity-screen.active:has(.corn-stage) .ga-bar{flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;gap:8px;padding:max(6px,env(safe-area-inset-top)) 4px 6px max(6px,env(safe-area-inset-left))}
  #activity-screen.active:has(.corn-stage) .ga-title,#activity-screen.active:has(.corn-stage) .ga-prog{display:none}
  #activity-screen.active:has(.corn-stage) .ga-back{padding:0;width:46px;min-height:46px;justify-content:center}
  #activity-screen.active:has(.corn-stage) .ga-back span{display:none}
  #activity-screen.active:has(.corn-stage) .ga-right{flex-direction:column;margin:0}
  #activity-screen.active:has(.corn-stage) .ga-round{width:46px;height:46px}
  #activity-screen.active:has(.corn-stage) .ga-body{padding:4px 0;padding-right:calc(56px + env(safe-area-inset-right))}
  #activity-screen.active:has(.corn-stage) .corn-cv{border-radius:12px}
  body:has(#activity-screen.active .corn-stage) .toolbar{flex-direction:column;flex-wrap:nowrap;top:max(6px,env(safe-area-inset-top))}
}
/* Nana V's Word Wonders: styled like the rest of the site (her pictures on white cards, purple lettering, the site's purple buttons) */
.ww-wrap{width:100%;height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:clamp(12px,2.2vh,20px);padding:clamp(8px,3vh,30px) 12px 24px}
.ww-head{font:700 clamp(20px,2.6vw,28px)/1.2 Poppins,system-ui,sans-serif;color:#7b2ff7;margin:0;text-align:center}
.ww-sub,.ww-tip{font:600 clamp(15px,1.7vw,17px)/1.35 Poppins,system-ui,sans-serif;color:#4a4470;margin:0;text-align:center}
.ww-stories,.ww-acts{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;width:100%;max-width:880px}
.ww-story,.ww-act{border:0;border-radius:24px;background:#fff;box-shadow:0 8px 24px rgba(42,35,80,.14);padding:12px 12px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;position:relative;transition:transform .15s,box-shadow .15s;width:min(100%,250px)}
.ww-story:hover,.ww-act:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(42,35,80,.18)}
.ww-story img,.ww-act img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;display:block;pointer-events:none}
.ww-story strong,.ww-act strong{font:700 clamp(15px,1.7vw,18px)/1.2 Poppins,system-ui,sans-serif;color:#7b2ff7;text-align:center}
.ww-acttx{display:flex;flex-direction:column;align-items:center;gap:4px}
.ww-actsub{font:600 14px/1.25 Poppins,system-ui,sans-serif;color:#6b6590;text-align:center}
.ww-sstars{display:flex;gap:4px}
.ww-mini svg{width:26px;height:26px;fill:#ece7f7;stroke:#d3c9ea}
.ww-mini.on svg{fill:#ffc21a;stroke:#e09a00;filter:drop-shadow(0 0 5px rgba(255,200,40,.8))}
.ww-act .ww-mini{position:absolute;top:18px;right:18px}
.ww-act .ww-mini svg{width:34px;height:34px;filter:drop-shadow(0 1px 3px rgba(0,0,0,.25))}
.ww-act .ww-mini:not(.on) svg{fill:rgba(255,255,255,.88);stroke:#d3c9ea}
.ww-mtop{display:flex;align-items:center;gap:16px;max-width:760px}
.ww-mtop .ww-head{text-align:left}.ww-mtop .ww-sub{text-align:left;margin-top:4px}
.ww-mcover{width:clamp(70px,10vw,104px);border-radius:12px;box-shadow:0 4px 14px rgba(42,35,80,.2)}
@media (max-width:640px){.ww-acts .ww-act{width:min(100%,340px);flex-direction:row;padding:10px;gap:14px}.ww-acts .ww-act img{width:92px;flex:0 0 auto}.ww-acttx{align-items:flex-start}.ww-act strong,.ww-actsub{text-align:left}.ww-act .ww-mini{top:auto;bottom:6px;left:76px;right:auto}.ww-act .ww-mini svg{width:28px;height:28px}}
.ww-card{display:flex;gap:clamp(14px,3vw,30px);align-items:center;background:#fff;border-radius:24px;box-shadow:0 8px 24px rgba(42,35,80,.14);padding:clamp(12px,2vw,20px);width:100%;max-width:860px}
@media (max-width:640px){.ww-card{flex-direction:column}}
.ww-pic{width:min(46%,340px);aspect-ratio:1;object-fit:cover;border-radius:16px;flex:0 0 auto}
@media (max-width:640px){.ww-pic{width:min(100%,300px)}}
.ww-text{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
@media (max-width:640px){.ww-text{align-items:center;text-align:center}}
.ww-word{font:700 clamp(32px,5vw,52px)/1.05 Poppins,system-ui,sans-serif;color:#7b2ff7}
.ww-mean{font:600 clamp(18px,2.2vw,22px)/1.4 Poppins,system-ui,sans-serif;color:#2a2350;margin:0}
.ww-sent{font:500 italic clamp(16px,1.9vw,19px)/1.5 Poppins,system-ui,sans-serif;color:#4a4470;margin:0;border-left:4px solid #d8cff5;padding:2px 0 2px 14px}
@media (max-width:640px){.ww-sent{border-left:0;padding:0}}
.ww-sent b{color:#7b2ff7;font-style:normal;font-weight:700}
.ww-hear{display:inline-flex;align-items:center;gap:8px;border:3px solid #fff;border-radius:999px;background:#8b45f0;color:#fff;font:700 16px/1 Poppins,system-ui,sans-serif;padding:10px 18px;min-height:48px;cursor:pointer;box-shadow:0 4px 12px rgba(42,35,80,.2)}
.ww-hear svg{width:22px;height:22px;fill:#fff;stroke:#fff;stroke-width:1.6;stroke-linecap:round}
.ww-hear svg path+path{fill:none}
.ww-dots{display:flex;gap:8px}
.ww-dot{width:14px;height:14px;border-radius:50%;border:0;background:#ddd3f5;cursor:pointer;padding:0}
.ww-dot.on{background:#7b2ff7}
.ww-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.ww-big{border:3px solid #fff;border-radius:999px;background:#8b45f0;color:#fff;font:700 17px/1 Poppins,system-ui,sans-serif;padding:14px 26px;min-height:52px;cursor:pointer;box-shadow:0 6px 16px rgba(42,35,80,.18);transition:transform .15s}
.ww-big:hover{transform:translateY(-2px)}
.ww-big.alt{background:#fff;color:#7b2ff7;border-color:#e4dcf7}
.ww-big:disabled{opacity:.35;cursor:default;transform:none}
.ww-nav{display:flex;gap:10px;justify-content:center}
.ww-navbtn{border:0;border-radius:999px;background:transparent;color:#7b2ff7;font:700 15px/1 Poppins,system-ui,sans-serif;padding:10px 16px;min-height:44px;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.ww-hear:focus-visible,.ww-big:focus-visible,.ww-navbtn:focus-visible,.ww-story:focus-visible,.ww-act:focus-visible,.ww-dot:focus-visible,.ww-wbtn:focus-visible,.ww-pbtn:focus-visible,.ww-choice:focus-visible{outline:4px solid #1f6dff;outline-offset:3px}
.ww-board{position:relative;display:flex;justify-content:space-between;align-items:stretch;gap:clamp(40px,12vw,180px);width:100%;max-width:820px;flex:1 1 auto;min-height:0;touch-action:none;user-select:none;-webkit-user-select:none}
.ww-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.ww-live{fill:none;stroke:#8b45f0;stroke-width:5;stroke-linecap:round;stroke-dasharray:2 11}
.ww-link{fill:none;stroke-width:6;stroke-linecap:round}
.ww-col{display:flex;flex-direction:column;justify-content:space-around;gap:12px;flex:1 1 0;min-width:0}
.ww-wbtn,.ww-pbtn{position:relative;border:0;cursor:pointer;touch-action:none;transition:transform .12s,box-shadow .12s}
.ww-wbtn{border-radius:999px;background:#fff;color:#7b2ff7;font:700 clamp(17px,2.2vw,22px)/1.1 Poppins,system-ui,sans-serif;padding:16px 28px 16px 18px;min-height:60px;box-shadow:0 6px 18px rgba(42,35,80,.14);overflow-wrap:anywhere}
.ww-pbtn{border-radius:20px;background:#fff;padding:6px;box-shadow:0 6px 18px rgba(42,35,80,.14);align-self:flex-end;width:min(100%,190px);aspect-ratio:1}
.ww-pbtn img{width:100%;height:100%;object-fit:cover;border-radius:15px;display:block;pointer-events:none}
.ww-knob{position:absolute;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px #d8cff5;pointer-events:none}
.ww-wbtn .ww-knob{right:-12px}.ww-pbtn .ww-knob{left:-12px}
.ww-hold,.ww-sel,.ww-over{transform:scale(1.05);box-shadow:0 0 0 4px #8b45f0,0 10px 22px rgba(123,47,247,.25)}
.ww-done{cursor:default}.ww-done .ww-knob{background:var(--c);box-shadow:0 0 0 4px #fff}
.ww-wbtn.ww-done,.ww-pbtn.ww-done{box-shadow:0 0 0 4px var(--c),0 6px 18px rgba(42,35,80,.14)}
.ww-qcard{display:flex;flex-direction:column;align-items:center;gap:14px;background:#fff;border-radius:24px;box-shadow:0 8px 24px rgba(42,35,80,.14);padding:clamp(20px,3vw,34px);width:100%;max-width:820px}
.ww-q{font:600 clamp(21px,2.8vw,30px)/1.55 Poppins,system-ui,sans-serif;color:#2a2350;margin:0;text-align:center}
.ww-blank{display:inline-block;min-width:4.5em;border-bottom:4px solid #8b45f0;margin:0 4px;color:#7b2ff7;font-weight:700;transition:color .2s}
.ww-blank.ok{border-color:#3fbf4a}
.ww-choices{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.ww-choice{border:0;border-radius:999px;background:#fff;color:#7b2ff7;font:700 clamp(19px,2.4vw,24px)/1 Poppins,system-ui,sans-serif;padding:18px 30px;min-height:62px;cursor:pointer;box-shadow:0 6px 18px rgba(42,35,80,.14);transition:transform .12s,box-shadow .12s}
.ww-choice:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(42,35,80,.18)}
.ww-choice.no{opacity:.35;cursor:default;transform:none}
.ww-choice.ok{box-shadow:0 0 0 4px #3fbf4a,0 6px 18px rgba(42,35,80,.14);transform:scale(1.06)}
.bk-btn.bk-words{background:#8b45f0!important;color:#fff!important}
@media (hover:hover){.bk-btn.bk-words:hover{background:#8b45f0!important;border-color:#fff!important;color:#fff!important}}
@media (max-width:520px){.ww-wbtn{font-size:15px;padding:12px 20px 12px 12px;overflow-wrap:normal;word-break:keep-all}.ww-board{gap:28px}}