/* ===== Kota (one dog for every page) + the picture dock — crossword.formedlabs.co ===== */
:root{--kp-pink:#ff3d9a;--kp-violet:#a97dff;--kp-green:#3dff8f;--kp-pearl:#fff6fc;--kp-rose:#ff9bd6;--kp-sheet:rgba(16,22,74,.97);--kp-line:rgba(169,200,255,.28);
  --kp-pearl-g:linear-gradient(115deg,#fff 0%,#ffe1f3 22%,#f4f0ff 40%,#e9e0ff 58%,#fff 72%,#ffd9f0 88%,#fff 100%);--kp-font:'Chakra Petch','Barlow','Arial Narrow',system-ui,sans-serif}

/* ---------- the dock ---------- */
#gdock{position:relative;z-index:30;display:block;width:100%;box-sizing:border-box;padding:6px clamp(8px,2.4vw,40px) 2px;font-family:var(--kp-font)}
#gdock .gd-row{display:flex;align-items:center;gap:6px;max-width:1700px;margin:0 auto}
#gdock .gd-row::before{content:'';flex:0 0 56px}
#gdock .gd-scroll{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:clamp(2px,.5vw,8px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:3px 4px 18px;scroll-behavior:smooth}
#gdock .gd-scroll::-webkit-scrollbar{display:none}
#gdock .gd-scroll>:first-child{margin-left:auto}
#gdock .gd-scroll>:last-child{margin-right:auto}
#gdock .gd-i{position:relative;flex:0 0 auto;width:50px;height:50px;display:grid;place-items:center;border-radius:14px;color:#cfd6ff;text-decoration:none;outline:none;
  transition:transform .18s cubic-bezier(.3,1.5,.5,1),color .18s;-webkit-tap-highlight-color:transparent}
#gdock .gd-i svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(169,125,255,.55));transition:filter .18s}
#gdock .gd-g img{width:40px;height:40px;border-radius:11px;object-fit:cover;display:block;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 8px 16px -8px rgba(0,0,0,.9);transition:box-shadow .2s,transform .2s}
#gdock .gd-i:hover,#gdock .gd-i:focus-visible{transform:translateY(-2px);color:#fff}
#gdock .gd-i:hover svg,#gdock .gd-i:focus-visible svg{filter:drop-shadow(0 0 6px var(--kp-pink)) drop-shadow(0 0 12px rgba(169,125,255,.8))}
#gdock .gd-g:hover img,#gdock .gd-g:focus-visible img{box-shadow:0 0 0 2px var(--kp-violet),0 0 18px -2px var(--kp-violet)}
#gdock .gd-i[aria-current]{color:#fff}
#gdock .gd-i[aria-current] svg{filter:drop-shadow(0 0 6px var(--kp-pink)) drop-shadow(0 0 14px rgba(255,61,154,.7))}
#gdock .gd-g[aria-current] img{transform:scale(1.06);box-shadow:0 0 0 2px var(--kp-pearl),0 0 0 4px var(--kp-pink),0 0 24px var(--kp-pink)}
#gdock .gd-i::after{content:'';position:absolute;left:13px;right:13px;bottom:-4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--kp-pink),var(--kp-violet));opacity:0;transition:opacity .2s}
#gdock .gd-i[aria-current]::after{opacity:1;box-shadow:0 0 10px var(--kp-pink)}
#gdock .gd-i span{position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);font:700 9.5px/1 var(--kp-font);letter-spacing:.16em;white-space:nowrap;color:var(--kp-pearl);opacity:0;pointer-events:none;transition:opacity .15s;text-shadow:0 0 8px rgba(255,61,154,.85)}
#gdock .gd-i[aria-current] span,#gdock .gd-i:hover span,#gdock .gd-i:focus-visible span{opacity:1}
#gdock .gd-sep{flex:0 0 auto;width:1px;height:30px;margin:0 clamp(4px,1vw,12px);background:linear-gradient(180deg,transparent,rgba(255,61,154,.6),rgba(169,125,255,.6),transparent)}
#gdock .gd-kota{flex:0 0 56px;width:56px;height:56px;align-self:flex-start}
@media (max-width:720px){
  #gdock{padding:4px 6px 0}
  #gdock .gd-row::before{display:none}
  #gdock .gd-i{width:44px;height:44px}
  #gdock .gd-i svg{width:23px;height:23px}
  #gdock .gd-g img{width:34px;height:34px;border-radius:10px}
  #gdock .gd-scroll{padding-bottom:17px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 14px),transparent)}
  #gdock .gd-kota{flex-basis:48px;width:48px;height:48px}
}
/* phones: two tidy rows (pages, then games), nothing hidden off the side */
@media (max-width:560px){
  #gdock .gd-scroll{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));justify-items:center;row-gap:4px;column-gap:0;overflow:visible;padding:2px 0 6px;-webkit-mask-image:none;mask-image:none}
  #gdock .gd-scroll>:first-child,#gdock .gd-scroll>:last-child{margin:0}
  #gdock .gd-sep{display:none}
  #gdock .gd-i span{display:none}
  #gdock .gd-i::after{bottom:-1px}
  #gdock .gd-kota{align-self:center}
}
/* the app's old word menu: the dock replaces it */
#root div:has(> a[role="link"][aria-label="GROUPS"]){display:none!important}

/* ---------- perches ---------- */
.kp-perch{pointer-events:none}
.kp-pside{width:clamp(96px,8vw,132px);height:clamp(96px,8vw,132px);margin:22px auto 0}
.kp-psub{flex:0 0 46px;width:46px;height:46px;margin-left:auto;align-self:center}
@media (min-width:1000px){.kp-psub{display:none}}
@media (max-width:999.98px){.kp-pside{display:none}}
.kp-corner{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));width:96px;height:96px;z-index:-1}
@media (max-width:720px){.kp-corner{width:72px;height:72px}}
.kp-cameo{position:fixed;right:18px;bottom:18px;width:120px;height:120px;z-index:-1}

/* ---------- Kota ---------- */
.kpal{position:fixed;z-index:1030;left:0;top:0;width:56px;height:56px;--ks:56px;pointer-events:auto;cursor:pointer;will-change:transform;
  transition:transform .5s cubic-bezier(.3,1.2,.4,1),width .3s,height .3s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;font-family:var(--kp-font)}
.kpal[hidden]{display:none!important}
.kpal.running{transition:none;pointer-events:none}
.kpal:focus-visible{outline:2px solid var(--kp-violet);outline-offset:3px;border-radius:50%}
.kpal .kp-flip{position:absolute;inset:0;transition:transform .25s}
.kpal.left .kp-flip{transform:scaleX(-1)}
.kpal .kb2{position:absolute;inset:0;transform-origin:50% 96%;animation:kpBreathe 3.2s ease-in-out infinite}
.kpal img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;user-select:none;-webkit-user-drag:none}
.kpal .tail{transform-origin:77.7% 47.7%;animation:kpWag 1.1s ease-in-out infinite}
.kpal .heart{position:absolute;left:29.5%;top:59.5%;width:7%;height:7%;border-radius:50%;background:radial-gradient(circle,rgba(255,120,200,.95),rgba(255,79,139,0) 70%);transform:translate(-50%,-50%) scale(2.4);animation:kpHeart 2.4s ease-in-out infinite;mix-blend-mode:screen;pointer-events:none}
.kpal.t-happy .tail,.kpal.running .tail,.kpal.skate .tail{animation-duration:.26s}
.kpal.t-happy .kb2{animation:kpBounce .35s ease-in-out 4}
.kpal.sleep .kb2{animation:none;transform:translateY(6%) scaleY(.94);filter:saturate(.85)}
.kpal.sleep .tail{animation:none;transform:rotate(10deg)}
.kpal.running .kb2{animation:kpTrot .26s ease-in-out infinite}
.kpal.skate .kb2{animation:kpSkate .6s ease-in-out infinite}
.kpal.skate .kp-flip::after{content:'🛹';position:absolute;left:12%;bottom:-24%;font-size:calc(var(--ks) * .5);line-height:1}
.kpal.t-hop .kb2{animation:kpHop .6s cubic-bezier(.3,1.4,.5,1) 2}
.kpal.t-spin .kb2{animation:kpSpin .8s ease-in-out}
.kpal.t-sit .kb2{animation:kpSit 1.7s ease-in-out}
.kpal.t-howl .kb2{animation:kpHowl 1.8s ease-in-out}
.kpal.t-beg .kb2{animation:kpBeg 1.8s ease-in-out}
.kpal.t-roll .kb2{animation:kpRoll 1.3s ease-in-out}
.kpal.t-bow .kb2{animation:kpBow 1.4s ease-in-out}
.kpal.t-chase .kb2{animation:kpSpin .5s linear 3}
.kpal.t-flip .kb2{animation:kpFlip 1s cubic-bezier(.3,.9,.4,1)}
.kpal.t-dead .kb2{animation:kpDead 2.6s ease-in-out}
.kpal.t-shake .kb2{animation:kpShake .13s linear 10}
.kpal.t-sneeze .kb2{animation:kpSneeze .9s ease-in-out}
.kpal.t-dance .kb2{animation:kpDance .5s ease-in-out 5}
.kpal.t-leap .kb2{animation:kpLeap .9s cubic-bezier(.3,1.2,.5,1)}
.kpal.t-chomp .kb2{animation:kpChomp .3s ease-in-out 3}
.kpal.t-hoop .kb2{animation:kpHoop 1.1s ease-in-out}
.kpal.t-peek .kb2{animation:kpPeek 2.3s ease-in-out}
.kpal.t-moon .kb2{animation:kpMoon 2.2s linear}
.kpal.t-dig .kb2{animation:kpDig .24s ease-in-out 7}
.kpal.t-cart .kb2{animation:kpCart 1.3s ease-in-out}
.kpal.t-balance .kb2{animation:kpBalance .5s ease-in-out 4}
.kpal.t-tilt .kb2{animation:kpTilt 1.4s ease-in-out}
.kpal.t-shiver .kb2{animation:kpShiver .12s linear 10}
.kpal.t-sad .kb2{animation:kpSad 1.6s ease-in-out}
.kpal.t-crown .kb2{animation:kpSpin .9s ease-in-out}
.kpal.t-crown .kp-crown{animation:kpCrown 1.5s ease-in-out}
.kpal.t-tagglow .heart{animation:kpTag 2.6s ease-in-out}

/* speech: beside her, never on a picture */
.kpal .say{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) scale(.6);transform-origin:50% 100%;opacity:0;pointer-events:none;z-index:2;
  width:max-content;max-width:min(240px,70vw);white-space:normal;text-align:center;background:var(--kp-sheet);color:var(--kp-pearl);font:700 13px/1.25 var(--kp-font);letter-spacing:.02em;
  padding:7px 11px;border-radius:13px;box-shadow:inset 0 0 0 1px rgba(255,61,154,.55),0 0 18px -4px rgba(255,61,154,.6),0 8px 18px rgba(0,0,0,.4);transition:opacity .2s,transform .25s cubic-bezier(.2,1.5,.4,1)}
.kpal .say.in{opacity:1;transform:translateX(-50%) scale(1)}
.kpal .say::after{content:'';position:absolute;left:50%;bottom:-5px;width:10px;height:10px;background:var(--kp-sheet);transform:translateX(-50%) rotate(45deg);box-shadow:1px 1px 0 rgba(255,61,154,.55)}
.kpal .say.down{bottom:auto;top:calc(100% + 8px);transform-origin:50% 0}
.kpal .say.down::after{bottom:auto;top:-5px;box-shadow:-1px -1px 0 rgba(255,61,154,.55)}
.kpal .say.r{left:auto;right:0;transform:scale(.6);transform-origin:100% 100%}
.kpal .say.r.in{transform:none}
.kpal .say.r::after{left:auto;right:22%}
.kpal .say.l{left:0;transform:scale(.6);transform-origin:0 100%}
.kpal .say.l.in{transform:none}
.kpal .say.l::after{left:22%}
.kpal.mama .say{background:linear-gradient(135deg,rgba(80,10,60,.97),rgba(40,14,90,.97));box-shadow:inset 0 0 0 1px var(--kp-pink),0 0 22px -2px rgba(255,61,154,.9),0 8px 18px rgba(0,0,0,.4)}
.kpal.mama .say::after{background:rgba(70,12,70,.97)}

/* little things around her */
.kpal .kp-fx{position:absolute;inset:0;pointer-events:none;overflow:visible}
.kpal .kp-fx i{position:absolute;font-style:normal;font-size:max(15px,calc(var(--ks) * .26));animation:kpFloat 1.7s ease-out forwards}
.kpal .kp-fx i.bub{animation:kpBubble 2.2s ease-out forwards}
.kpal .kp-fx i.dirt{top:auto!important;bottom:2%;font-size:max(9px,calc(var(--ks) * .12));animation:kpDirt .9s ease-out forwards}
.kpal .kp-held{position:absolute;font-style:normal;font-weight:400;line-height:1;pointer-events:none;font-size:max(16px,calc(var(--ks) * .3))}
.kpal .kp-held.paw{right:-28%;top:18%;animation:kpPop .9s ease-out forwards}
.kpal .kp-held.mouth{left:6%;top:52%;font-size:max(12px,calc(var(--ks) * .2))}
.kpal.left .kp-held.mouth{left:auto;right:6%}
.kpal .kp-held.hoopring{right:-62%;top:6%;font-size:max(26px,calc(var(--ks) * .6));animation:kpPop 1.5s ease-out forwards}
.kpal .kp-held.found{left:40%;top:-30%;animation:kpFloat 1.5s ease-out forwards}
.kpal .kp-held.gift{right:-36%;top:28%;font-size:max(20px,calc(var(--ks) * .38));animation:kpPop 2.6s ease-out forwards}
.kpal .kp-held.pops{left:28%;top:-34%;width:calc(var(--ks) * .16);height:calc(var(--ks) * .3);animation:kpWobble .5s ease-in-out 4}
.kpal .kp-held.pops::before{content:'';position:absolute;left:0;top:0;width:100%;height:72%;border-radius:40% 40% 18% 18%;background:linear-gradient(180deg,#ff8fc8,#ff3d9a 55%,#a97dff);box-shadow:0 0 10px rgba(255,61,154,.8)}
.kpal .kp-held.pops::after{content:'';position:absolute;left:38%;bottom:0;width:24%;height:34%;border-radius:2px;background:#e3b981}
.kpal .kp-crown{display:none;position:absolute;left:52%;top:-17%;transform:translateX(-50%) rotate(-8deg);font-size:max(14px,calc(var(--ks) * .3));line-height:1;pointer-events:none;filter:drop-shadow(0 0 6px rgba(255,215,120,.9))}
.kpal.mama .kp-crown{display:block}
.kpal.mama .kb2{filter:drop-shadow(0 0 8px rgba(255,61,154,.75)) drop-shadow(0 0 18px rgba(169,125,255,.5))}
.kpal.mama.sleep .kb2{filter:saturate(.85) drop-shadow(0 0 8px rgba(255,61,154,.6))}

/* screen-wide props */
.kp-stage{position:fixed;inset:0;pointer-events:none;z-index:2090;overflow:hidden}
.kp-prop{position:absolute;left:0;top:0;font-size:30px;line-height:1;will-change:transform}
.kp-prop.drop{animation:kpDrop .65s ease-in forwards}
.kp-burst{position:absolute;font-size:24px;line-height:1;transform:translate(-50%,-50%);animation:kpBurst 1.7s cubic-bezier(.2,.7,.4,1) forwards}
.kp-trail{position:absolute;font-size:22px;line-height:1;transform:translate(-50%,-50%);animation:kpTrail 1.5s ease-out forwards}
.kp-letter{position:fixed;z-index:2100;width:48px;height:48px;border:0;background:none;padding:0;font-size:32px;line-height:48px;cursor:pointer;animation:kpBob 1s ease-in-out infinite;filter:drop-shadow(0 0 10px rgba(255,61,154,.9))}

/* ---------- full-screen moments (tricks list, Mama T, the note) ---------- */
.kp-layer{position:fixed;inset:0;z-index:2200;display:grid;place-items:center;overflow:auto;padding:64px 16px 32px;box-sizing:border-box;
  background:radial-gradient(900px 600px at 50% 20%,rgba(169,125,255,.2),transparent 60%),rgba(4,8,36,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-family:var(--kp-font);color:var(--kp-pearl);animation:kpFade .25s ease-out}
.kp-layer.out{opacity:0;transition:opacity .4s}
.kp-x{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));width:48px;height:48px;border:0;background:none;color:var(--kp-pearl);font-size:24px;cursor:pointer;z-index:2;border-radius:50%}
.kp-x:hover,.kp-x:focus-visible{color:#fff;text-shadow:0 0 10px var(--kp-pink);outline:none}
.kp-mwrap{width:min(860px,100%);text-align:center}
.kp-mwrap h2,.kp-mt{margin:0;font:700 clamp(26px,5vw,44px)/1.05 var(--kp-font);letter-spacing:.12em;background:var(--kp-pearl-g);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 2px rgba(255,255,255,.8)) drop-shadow(0 0 12px rgba(255,61,154,.85)) drop-shadow(0 0 24px rgba(169,125,255,.6))}
.kp-sub{margin:10px 0 22px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--kp-rose)}
.kp-tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px 10px}
.kp-t{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px 10px;border:0;background:none;color:var(--kp-pearl);cursor:pointer;font:700 12.5px/1.15 var(--kp-font);letter-spacing:.08em;text-transform:uppercase;position:relative;-webkit-tap-highlight-color:transparent}
.kp-t .ic{font-size:30px;line-height:1;transition:transform .18s cubic-bezier(.3,1.5,.5,1)}
.kp-t::after{content:'';position:absolute;left:24%;right:24%;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--kp-pink),var(--kp-violet));opacity:0;transition:opacity .18s;box-shadow:0 0 10px var(--kp-pink)}
.kp-t:hover .ic,.kp-t:focus-visible .ic{transform:translateY(-3px) scale(1.12)}
.kp-t:hover::after,.kp-t:focus-visible::after{opacity:1}
.kp-t:focus-visible{outline:none}
.kp-t.mama .nm{color:var(--kp-rose);text-shadow:0 0 10px rgba(255,61,154,.8)}
.kp-t.lock{opacity:.32;cursor:default}
.kp-mfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px;margin-top:22px;font-size:12px;letter-spacing:.1em;color:#c8bfe8;text-transform:uppercase}
.kp-snd{border:0;background:none;color:var(--kp-green);font:700 13px var(--kp-font);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:10px 6px;text-shadow:0 0 10px rgba(61,255,143,.6)}
.kp-snd[aria-pressed="false"]{color:#c8bfe8;text-shadow:none}
.kp-mama{background:radial-gradient(700px 500px at 50% 35%,rgba(255,61,154,.32),transparent 65%),radial-gradient(900px 600px at 50% 80%,rgba(169,125,255,.25),transparent 60%),rgba(20,4,40,.92)}
.kp-mstage{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.kp-mk{position:relative;width:min(240px,46vw);height:min(240px,46vw);animation:kpEnter 1.4s cubic-bezier(.3,1.3,.5,1) both}
.kp-mk .kb2{position:absolute;inset:0;transform-origin:50% 96%;animation:kpBreathe 3.2s ease-in-out infinite;filter:drop-shadow(0 0 16px rgba(255,61,154,.9)) drop-shadow(0 0 40px rgba(169,125,255,.6))}
.kp-mk img{position:absolute;inset:0;width:100%;height:100%}
.kp-mk .tail{transform-origin:77.7% 47.7%;animation:kpWag .26s ease-in-out infinite}
.kp-mk .heart{position:absolute;left:29.5%;top:59.5%;width:7%;height:7%;border-radius:50%;background:radial-gradient(circle,rgba(255,120,200,.95),rgba(255,79,139,0) 70%);transform:translate(-50%,-50%) scale(3);animation:kpHeart 1s ease-in-out infinite;mix-blend-mode:screen}
.kp-mk .kp-crown{position:absolute;left:52%;top:-20%;transform:translateX(-50%) rotate(-8deg);font-size:min(70px,13vw);animation:kpCrown 2s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(255,215,120,.9))}
.kp-mt{margin-top:18px!important;font-size:clamp(30px,7vw,64px)!important}
.kp-mtag{margin:4px 0 10px;font:700 clamp(15px,3vw,22px) var(--kp-font);letter-spacing:.18em;color:var(--kp-rose);text-shadow:0 0 12px rgba(255,61,154,.9);animation:kpPulse 1.4s ease-in-out infinite}
.kp-go{margin-top:8px;border:0;background:none;padding:14px 22px;color:var(--kp-pearl);font:700 16px var(--kp-font);letter-spacing:.2em;cursor:pointer;border-radius:999px;box-shadow:inset 0 0 0 2px var(--kp-pink),0 0 22px -4px var(--kp-pink);text-shadow:0 0 10px rgba(255,61,154,.8)}
.kp-go:hover,.kp-go:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--kp-pearl),0 0 30px -2px var(--kp-pink)}
.kp-nwrap{max-width:560px;text-align:center}
.kp-ntext{margin:0;font:600 clamp(20px,4vw,30px)/1.5 var(--kp-font);letter-spacing:.03em;color:var(--kp-pearl);text-shadow:0 0 14px rgba(255,61,154,.6)}
.kp-nsig{margin-top:22px;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--kp-rose)}

/* ---------- motion ---------- */
@keyframes kpBreathe{0%,100%{transform:none}50%{transform:scaleY(1.025) translateY(-1%)}}
@keyframes kpWag{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(14deg)}}
@keyframes kpHeart{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(2.2)}50%{opacity:1;transform:translate(-50%,-50%) scale(3)}}
@keyframes kpTag{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(2.4)}30%,70%{opacity:1;transform:translate(-50%,-50%) scale(6)}}
@keyframes kpBounce{0%,100%{transform:none}50%{transform:translateY(-6%)}}
@keyframes kpTrot{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7%) rotate(2deg)}}
@keyframes kpSkate{0%,100%{transform:translateY(-14%) rotate(-3deg)}50%{transform:translateY(-18%) rotate(3deg)}}
@keyframes kpHop{0%,100%{transform:none}40%{transform:translateY(-26%) scale(1.04,.98)}70%{transform:translateY(0) scale(1.06,.92)}}
@keyframes kpSpin{to{transform:rotate(360deg)}}
@keyframes kpSit{0%,100%{transform:none}25%,80%{transform:translateY(5%) scaleY(.86)}}
@keyframes kpHowl{0%,100%{transform:none}20%,80%{transform:rotate(-16deg) translateY(-6%) scaleY(1.06)}}
@keyframes kpBeg{0%,100%{transform:none}20%{transform:translateY(-10%) scaleY(1.14)}40%{transform:translateY(-10%) scaleY(1.14) rotate(-5deg)}60%{transform:translateY(-10%) scaleY(1.14) rotate(5deg)}80%{transform:translateY(-8%) scaleY(1.1)}}
@keyframes kpRoll{0%{transform:none}50%{transform:translateX(30%) rotate(200deg) translateY(4%)}100%{transform:rotate(360deg)}}
@keyframes kpBow{0%,100%{transform:none}25%,75%{transform:rotate(9deg) scale(1.06,.84) translateY(6%)}}
@keyframes kpFlip{0%{transform:none}20%{transform:translateY(4%) scaleY(.88)}55%{transform:translateY(-70%) rotate(-200deg)}85%{transform:translateY(-6%) rotate(-360deg)}100%{transform:rotate(-360deg)}}
@keyframes kpDead{0%{transform:none}15%,80%{transform:rotate(180deg) translateY(-14%)}88%{transform:rotate(0) translateY(-22%)}100%{transform:none}}
@keyframes kpShake{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes kpSneeze{0%,100%{transform:none}35%{transform:rotate(-12deg) translateY(-4%)}55%{transform:rotate(12deg) translateX(6%)}}
@keyframes kpDance{0%,100%{transform:translateX(-10%) rotate(-8deg)}50%{transform:translateX(10%) rotate(8deg) translateY(-8%)}}
@keyframes kpLeap{0%,100%{transform:none}45%{transform:translateY(-55%) rotate(-10deg)}}
@keyframes kpChomp{0%,100%{transform:none}50%{transform:scale(1.07,.93)}}
@keyframes kpHoop{0%,100%{transform:none}25%{transform:translate(45%,-45%) rotate(-25deg)}50%{transform:translate(110%,-20%) rotate(-10deg)}75%{transform:translate(55%,-30%)}}
@keyframes kpPeek{0%{transform:none}20%,55%{transform:translateY(105%) scaleY(.9);opacity:0}70%{transform:translateY(55%);opacity:1}80%{transform:translateY(60%)}100%{transform:none}}
@keyframes kpMoon{0%{transform:scaleX(-1)}50%{transform:scaleX(-1) translateX(40%)}50.1%{transform:translateX(-40%)}100%{transform:none}}
@keyframes kpDig{0%,100%{transform:rotate(10deg) translateY(4%)}50%{transform:rotate(16deg) translateY(8%)}}
@keyframes kpCart{0%{transform:none}50%{transform:translateX(40%) translateY(-30%) rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes kpBalance{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes kpTilt{0%,100%{transform:none}30%,70%{transform:rotate(-12deg)}}
@keyframes kpShiver{0%,100%{transform:translateX(-3%)}50%{transform:translateX(3%)}}
@keyframes kpSad{0%,100%{transform:none;filter:none}25%,80%{transform:translateY(5%) rotate(6deg) scaleY(.94);filter:saturate(.6) brightness(.9)}}
@keyframes kpCrown{0%,100%{transform:translateX(-50%) rotate(-8deg)}40%{transform:translateX(-50%) translateY(-40%) rotate(352deg) scale(1.3)}}
@keyframes kpFloat{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-120%) scale(1.1)}}
@keyframes kpBubble{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:.95}100%{opacity:0;transform:translate(30%,-260%) scale(1.3)}}
@keyframes kpDirt{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(-160%,-160%) rotate(200deg)}}
@keyframes kpPop{0%{opacity:0;transform:scale(.3)}20%{opacity:1;transform:scale(1.2)}35%{transform:scale(1)}85%{opacity:1}100%{opacity:0}}
@keyframes kpWobble{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes kpDrop{to{transform:translate(var(--dx,0),var(--fall,150px))}}
@keyframes kpBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2) rotate(40deg)}}
@keyframes kpTrail{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-120%) scale(.4)}}
@keyframes kpBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes kpFade{from{opacity:0}}
@keyframes kpEnter{0%{transform:translateY(60vh) rotate(-30deg) scale(.4)}60%{transform:translateY(-6%) rotate(-370deg) scale(1.08)}100%{transform:rotate(-360deg)}}
@keyframes kpPulse{0%,100%{opacity:.85}50%{opacity:1;text-shadow:0 0 22px rgba(255,61,154,1)}}
@media (prefers-reduced-motion:reduce){.kpal .kb2,.kpal .tail,.kpal .heart,.kp-mk,.kp-mk .kb2{animation:none!important}.kpal{transition:none}}



/* gdock-12 */
/* every dock item shows its name under it, in the theme's pink-to-violet neon */
#gdock .gd-scroll{padding-bottom:8px}
#gdock .gd-i{width:auto;min-width:50px;height:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;padding:4px 2px 2px}
#gdock .gd-i svg{margin:7.5px 0}
#gdock .gd-i span{position:static;transform:none;opacity:1;display:block;font:800 9.5px/1 var(--kp-font);letter-spacing:.1em;white-space:nowrap;pointer-events:none;
  color:transparent;background:linear-gradient(90deg,#FF7BD9,var(--kp-pink) 45%,var(--kp-violet));-webkit-background-clip:text;background-clip:text;
  text-shadow:none;filter:drop-shadow(0 0 4px rgba(255,61,154,.55));transition:filter .15s}
#gdock .gd-i:hover span,#gdock .gd-i:focus-visible span{filter:drop-shadow(0 0 6px rgba(255,61,154,.95)) drop-shadow(0 0 10px rgba(169,125,255,.7))}
#gdock .gd-i[aria-current] span{background:none;color:var(--kp-pearl);filter:none;text-shadow:0 0 8px rgba(255,61,154,.95),0 0 14px rgba(255,61,154,.6)}
#gdock .gd-i::after{left:8px;right:8px;bottom:-5px}
@media (min-width:721px) and (max-width:1360px){
  #gdock .gd-row::before{display:none}
  #gdock .gd-scroll{flex-wrap:wrap;justify-content:center;overflow:visible;row-gap:10px;column-gap:4px;padding-bottom:10px;-webkit-mask-image:none;mask-image:none}
  #gdock .gd-scroll>:first-child,#gdock .gd-scroll>:last-child{margin-left:0;margin-right:0}
  #gdock .gd-sep{flex:0 0 100%;width:100%;height:1px;margin:0;background:linear-gradient(90deg,transparent 10%,rgba(255,61,154,.45),rgba(169,125,255,.45),transparent 90%)}
  #gdock .gd-i{min-width:46px}
  #gdock .gd-i span{font-size:8.5px;letter-spacing:.06em}
}
@media (min-width:561px) and (max-width:720px){
  #gdock .gd-scroll{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));justify-items:center;row-gap:8px;column-gap:0;overflow:visible;padding:2px 0 6px;-webkit-mask-image:none;mask-image:none}
  #gdock .gd-scroll>:first-child,#gdock .gd-scroll>:last-child{margin:0}
  #gdock .gd-sep{display:none}
  #gdock .gd-i{min-width:0;width:100%}
}
@media (max-width:720px){
  #gdock .gd-i{min-width:44px;gap:4px}
  #gdock .gd-i svg{margin:5.5px 0}
  #gdock .gd-i span{font-size:8.5px;letter-spacing:.06em}
}
@media (max-width:560px){
  #gdock .gd-scroll{row-gap:8px;padding-bottom:6px}
  #gdock .gd-i{min-width:0;width:100%;padding:2px 0 0}
  #gdock .gd-i span{display:block;font-size:7.5px;letter-spacing:.04em}
  #gdock .gd-i::after{bottom:-4px}
}
/* /gdock-12 */

/* ===== game text colors (theme): labels rose, numbers mint, body lavender, titles pearl with a pink glow — no blue text ===== */
:root{--kp-lav:#e4d0ff;--kp-mute:#b99ce8;--kp-dim:#8a6fa8;--kp-mint:#5bffa8}
html[data-game]:not([data-game="kota"]){--ink-2:#e4d0ff;--ink-3:#b99ce8;--ink-4:#8a6fa8}
html[data-game]:not([data-game="kota"]) .lv{color:var(--kp-lav)}
html[data-game]:not([data-game="kota"]) .lv:hover{color:var(--kp-rose)}
html[data-game]:not([data-game="kota"]) .lv small{color:var(--kp-mint)}
html[data-game]:not([data-game="kota"]) .subline .sep{color:var(--kp-pink);opacity:.6}
html[data-game]:not([data-game="kota"]) .subline b{text-shadow:0 0 12px rgba(255,61,154,.55)}
html[data-game]:not([data-game="kota"]) .subline button,html[data-game]:not([data-game="kota"]) .subline .code,html[data-game]:not([data-game="kota"]) .subline .restart{color:var(--kp-rose)}
html[data-game]:not([data-game="kota"]) .timer{text-shadow:0 0 10px rgba(255,61,154,.75),0 0 22px rgba(169,125,255,.5)}
html[data-game]:not([data-game="kota"]) .ib{color:var(--kp-lav)}
html[data-game]:not([data-game="kota"]) .tb{color:var(--kp-lav)}
html[data-game]:not([data-game="kota"]) .tb.check:not(:disabled){color:var(--kp-mint)}
html[data-game]:not([data-game="kota"]) .tb.new:not(:disabled){color:var(--kp-rose)}
html[data-game]:not([data-game="kota"]) .legend{color:var(--kp-rose)}
html[data-game]:not([data-game="kota"]) .legend b{color:var(--kp-pearl)}
html[data-game]:not([data-game="kota"]) .legend i.o{color:var(--kp-mint)}
html[data-game]:not([data-game="kota"]) .progress .lbl,html[data-game]:not([data-game="kota"]) .progress .big small{color:var(--kp-rose)}
html[data-game]:not([data-game="kota"]) .foot{color:var(--kp-mute)}
html[data-game]:not([data-game="kota"]) .foot a{color:var(--kp-rose)}
html[data-game]:not([data-game="kota"]) .foot a:hover,html[data-game]:not([data-game="kota"]) .foot a:focus-visible{color:var(--kp-pearl)}
html[data-game]:not([data-game="kota"]) .lay .sub{color:var(--kp-lav)}
html[data-game]:not([data-game="kota"]) .nums span{color:var(--kp-rose)}
html[data-game]:not([data-game="kota"]) .nums .bl,html[data-game]:not([data-game="kota"]) .nums .lm,html[data-game]:not([data-game="kota"]) .act.bl,html[data-game]:not([data-game="kota"]) .act.lm{color:var(--kp-mint)}
html[data-game]:not([data-game="kota"]) .seg button[aria-pressed="true"]{color:var(--kp-pink)}
html[data-game]:not([data-game="kota"]) .codein .go{color:var(--kp-mint)}
html[data-game]:not([data-game="kota"]) .settings h3{color:var(--kp-rose)}
html[data-game]:not([data-game="kota"]) #eggCount span{color:var(--kp-rose)}
/* DEDUCE: category colors are pearl / pink / violet / rose + mint (was blue); clue numbers rose, "=" mint, AM/PM rose */
html[data-game="logic"] .gh{--blue:var(--kp-mint)}
html[data-game="logic"] .clue .sym.eq{color:var(--kp-mint)}
html[data-game="logic"] .no{color:var(--kp-rose)}
html[data-game="logic"] .u{color:var(--kp-rose)}
html[data-game="logic"] .spin{color:var(--kp-violet)}
/* MOSAIC */
html[data-game="mosaic"] .node.ink::after{color:var(--kp-mint)}
html[data-game="mosaic"] .slot small{color:var(--kp-rose)}
/* BLOCKS */
html[data-game="blocks"] .scorebar .best span,html[data-game="blocks"] .combo span{color:var(--kp-rose)}
html[data-game="blocks"] #best{color:var(--kp-mint)}
html[data-game="blocks"] #comboX{color:var(--kp-pink)}
html[data-game="blocks"] .mini span{color:var(--kp-rose)}
html[data-game="blocks"] .mini b{color:var(--kp-mint)}
html[data-game="blocks"] .goal{color:var(--kp-lav)}
/* GROUPS */
html[data-game="groups"] .mist span,html[data-game="groups"] .found span{color:var(--kp-rose)}
html[data-game="groups"] .gmini span{color:var(--kp-rose)}
html[data-game="groups"] .gmini b{color:var(--kp-mint)}
html[data-game="groups"] .gtrail h4{color:var(--kp-rose)}
html[data-game="groups"] #bSubmit:not(:disabled){color:var(--kp-mint)}

/* ===== Kota's dream: lie down, dots float up, a cloud with a clear picture (never words on it) ===== */
.kpal.t-lie .kb2{animation:kpLie 1.2s ease-out forwards}
.kpal.t-lie .tail{animation:kpWag 2.4s ease-in-out infinite}
@keyframes kpLie{to{transform:translateY(16%) scale(1.08,.74) rotate(-3deg);filter:saturate(.95)}}
.kp-tdot{position:fixed;z-index:2094;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#ffe1f3 60%,#f4d6ff);box-shadow:0 0 12px rgba(255,61,154,.7),0 0 0 2px rgba(255,255,255,.6);opacity:0;transform:scale(.3);animation:kpDot .5s cubic-bezier(.3,1.5,.5,1) forwards;pointer-events:none}
.kp-dream{position:fixed;z-index:2095;box-sizing:border-box;padding:14px;border-radius:48px;background:linear-gradient(160deg,#fff,#ffeaf6 55%,#f1e6ff);box-shadow:0 0 0 3px rgba(255,255,255,.75),0 0 34px rgba(255,61,154,.75),0 0 70px rgba(169,125,255,.55),0 18px 40px rgba(0,0,0,.45);
  opacity:0;transform:scale(.4);transform-origin:50% 100%;animation:kpCloud .7s cubic-bezier(.3,1.4,.5,1) 1.6s forwards;pointer-events:none}
.kp-dream .kp-dimg{display:block;width:100%;height:auto;border-radius:34px;image-rendering:auto}
.kp-dream .pf{position:absolute;border-radius:50%;aspect-ratio:1;z-index:-1;background:radial-gradient(circle at 40% 35%,#fff,#fff3fa 60%,#f6ecff);box-shadow:0 0 18px rgba(255,61,154,.35)}
.kp-dream .p1{width:20%;left:-4%;top:-6%}
.kp-dream .p2{width:23%;left:18%;top:-10%}
.kp-dream .p3{width:21%;left:44%;top:-9%}
.kp-dream .p4{width:19%;right:4%;top:-7%}
.kp-dream .p5{width:16%;right:-4%;top:30%}
.kp-dream .p6{width:20%;right:12%;bottom:-8%}
.kp-dream .p7{width:18%;left:8%;bottom:-7%}
.kp-dream.out,.kp-tdot.out{opacity:0!important;transition:opacity .45s}
@keyframes kpDot{to{opacity:1;transform:scale(1)}}
@keyframes kpCloud{to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.kp-dream,.kp-tdot{animation:none;opacity:1;transform:none}}

/* ===================== Kota: layered body, real-dog motion, wardrobe, friends, extras ===================== */
.kpal .kp-shadow{position:absolute;left:14%;right:10%;bottom:-1%;height:6.5%;border-radius:50%;background:radial-gradient(closest-side,rgba(4,1,14,.5),rgba(4,1,14,0));pointer-events:none;transform-origin:50% 50%}
.kpal.in-dock .kp-shadow{opacity:.55}
.kpal .kp-head,.kpal .kp-hd2{position:absolute;inset:0;transform-origin:28.75% 37.5%;pointer-events:none}
.kpal .kp-head{transform:translate(var(--hx,0%),var(--hy,0%)) rotate(var(--hr,0deg));transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.kpal .kp-wear,.kpal .kp-wear>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.kpal.kp-nohead .kp-lid{display:none}
/* eyelids: blink, sleepy half-lids, closed while sleeping or dreaming */
.kpal .kp-lid{position:absolute;top:15.6%;width:7.6%;height:6.4%;border-radius:50% 50% 44% 44%;background:linear-gradient(180deg,#b5763b,#cb8d4b 72%,#6e4119 90%,#3a210c);transform:scaleY(0);transform-origin:50% 0;transition:transform .08s ease-in;pointer-events:none}
.kpal .kp-lid.l{left:21.7%}.kpal .kp-lid.r{left:34.7%}
.kpal.blink .kp-lid,.kpal.sleep .kp-lid,.kpal.dreaming .kp-lid,.kpal.t-dead .kp-lid{transform:scaleY(1)}
.kpal.sleepy:not(.blink):not(.sleep) .kp-lid{transform:scaleY(.42);transition-duration:.7s}
/* head moves that go with her tricks (the body keeps breathing) */
.kpal.t-tilt .kb2{animation:kpBreathe 3.2s ease-in-out infinite}
.kpal.t-tilt .kp-hd2{animation:kpHeadCock 1.4s ease-in-out}
.kpal.t-howl .kp-hd2{animation:kpHeadHowl 1.8s ease-in-out}
.kpal.t-happy .kp-hd2{animation:kpHeadBob .35s ease-in-out 4}
.kpal.t-dig .kp-hd2{animation:kpHeadDown 1.7s ease-in-out}
.kpal.t-sad .kp-hd2{animation:kpHeadSad 1.6s ease-in-out}
.kpal.t-beg .kp-hd2{animation:kpHeadCock 1.8s ease-in-out reverse}
.kpal.t-sneeze .kp-hd2{animation:kpHeadSneeze .9s ease-in-out}
.kpal.running .kp-hd2{animation:kpHeadRun .32s linear infinite}
@keyframes kpHeadCock{0%,100%{transform:none}25%,75%{transform:rotate(15deg) translate(1%,1%)}}
@keyframes kpHeadHowl{0%,100%{transform:none}20%,80%{transform:rotate(-17deg) translate(-2%,-3%)}}
@keyframes kpHeadBob{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg) translateY(-1%)}}
@keyframes kpHeadDown{0%,100%{transform:none}20%,80%{transform:rotate(9deg) translate(1%,5%)}}
@keyframes kpHeadSad{0%,100%{transform:none}25%,75%{transform:rotate(7deg) translateY(5%)}}
@keyframes kpHeadSneeze{0%,100%{transform:none}25%{transform:rotate(-10deg) translateY(-3%)}40%{transform:rotate(9deg) translateY(4%)}}
@keyframes kpHeadRun{0%,100%{transform:rotate(-2deg) translateY(1%)}50%{transform:rotate(2deg) translateY(-1%)}}
/* a real gallop: lean into it, push off, land, stretch */
.kpal.running .kb2{animation:kpGallop .32s linear infinite}
@keyframes kpGallop{0%{transform:translateY(0) rotate(-4deg) scale(1.05,.95)}30%{transform:translateY(-11%) rotate(1deg) scale(.97,1.04)}60%{transform:translateY(-5%) rotate(4deg) scale(1,1)}100%{transform:translateY(0) rotate(-4deg) scale(1.05,.95)}}
.kpal.running .kp-shadow{animation:kpShRun .32s linear infinite}
@keyframes kpShRun{0%,100%{transform:scale(1);opacity:1}30%{transform:scale(.72);opacity:.55}}
.kpal.t-hop .kp-shadow{animation:kpShHop .6s cubic-bezier(.3,1.4,.5,1) 2}
.kpal.t-happy .kp-shadow,.kpal.t-dance .kp-shadow{animation:kpShHop .35s ease-in-out 4}
.kpal.t-flip .kp-shadow,.kpal.t-leap .kp-shadow,.kpal.t-hoop .kp-shadow{animation:kpShHop 1s ease-in-out}
@keyframes kpShHop{0%,100%{transform:scale(1);opacity:1}45%{transform:scale(.62);opacity:.45}}
.kp-dust{position:absolute;left:0;top:0;border-radius:50%;background:radial-gradient(circle,rgba(236,224,255,.6),rgba(236,224,255,0) 70%);pointer-events:none;animation:kpDust .6s ease-out forwards}
@keyframes kpDust{from{opacity:.9;transform:translate(var(--x),var(--y)) scale(.6)}to{opacity:0;transform:translate(calc(var(--x) + var(--dx)),calc(var(--y) - 10px)) scale(2.3)}}

/* outfits cut to her shape (the picture of her body is the pattern's mask) */
.kpal .kp-coat,.kpal-doll .kp-coat{position:absolute;inset:0;pointer-events:none;display:none;-webkit-mask:url(/assets/pal/kota-m-coat.webp) 0 0/100% 100% no-repeat;mask:url(/assets/pal/kota-m-coat.webp) 0 0/100% 100% no-repeat}
.kp-coat.kp-fab-rain,.kp-coat.kp-fab-pjs,.kp-coat.kp-fab-knit,.kp-coat.kp-fab-pump{display:block;mix-blend-mode:hard-light;opacity:.93}
.kp-coat.kp-fab-rain{background:radial-gradient(60% 40% at 34% 46%,rgba(255,255,255,.55),rgba(255,255,255,0) 60%),radial-gradient(circle at 43% 50%,#fff 0 1.1%,rgba(255,255,255,0) 1.4%),radial-gradient(circle at 44% 60%,#fff 0 1.1%,rgba(255,255,255,0) 1.4%),linear-gradient(160deg,#ff9ad5,#ff3d9a 45%,#a3125f)}
.kp-coat.kp-fab-pjs{-webkit-mask-image:url(/assets/pal/kota-m-pjs.webp);mask-image:url(/assets/pal/kota-m-pjs.webp);background:radial-gradient(circle,rgba(255,246,194,.95) 0 14%,rgba(255,246,194,0) 18%) 0 0/9% 9%,repeating-linear-gradient(90deg,#6d3fd0 0 4%,#a585f5 4% 6%)}
.kp-coat.kp-fab-knit{background:repeating-linear-gradient(90deg,rgba(0,0,0,.1) 0 .8%,rgba(0,0,0,0) .8% 2.4%),repeating-linear-gradient(0deg,#2fe6a0 0 6%,#ff4fa8 6% 9%,#2fe6a0 9% 15%)}
.kp-coat.kp-fab-pump{-webkit-mask-image:url(/assets/pal/kota-m-pump.webp);mask-image:url(/assets/pal/kota-m-pump.webp);background:radial-gradient(22% 46% at 52% 55%,rgba(120,40,0,0) 60%,rgba(120,40,0,.35) 100%),radial-gradient(22% 46% at 68% 55%,rgba(120,40,0,0) 60%,rgba(120,40,0,.35) 100%),radial-gradient(22% 46% at 84% 55%,rgba(120,40,0,0) 60%,rgba(120,40,0,.35) 100%),radial-gradient(40% 40% at 58% 44%,#ffc46b,#ff8a12 60%,#b44800)}
.kp-fab{display:block;width:70%;height:70%;margin:auto;border-radius:50%}
.kp-fab-rain{background:linear-gradient(160deg,#ff9ad5,#ff3d9a 45%,#a3125f)}
.kp-fab-pjs{background:repeating-linear-gradient(90deg,#6d3fd0 0 5px,#a585f5 5px 8px)}
.kp-fab-knit{background:repeating-linear-gradient(0deg,#2fe6a0 0 6px,#ff4fa8 6px 9px)}
.kp-fab-pump{background:radial-gradient(circle at 40% 35%,#ffc46b,#ff8a12 55%,#b44800)}

/* neon buttons used by her extras */
.kp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 18px;border:1.5px solid var(--kp-pink);border-radius:999px;background:rgba(255,61,154,.08);color:var(--kp-pearl);
  font:700 13px/1 var(--kp-font);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-shadow:0 0 8px rgba(255,61,154,.9);box-shadow:0 0 14px -3px var(--kp-pink),inset 0 0 12px -6px var(--kp-pink);transition:box-shadow .15s,transform .15s}
.kp-btn:hover,.kp-btn:focus-visible{outline:none;box-shadow:0 0 22px -2px var(--kp-pink),0 0 0 2px rgba(255,61,154,.35),inset 0 0 14px -5px var(--kp-pink);transform:translateY(-1px)}
.kp-btn[disabled]{opacity:.4;cursor:default;transform:none}
.kp-no{border:0;background:none;color:#c8bfe8;font:700 12px var(--kp-font);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;min-height:44px;padding:8px 12px}
.kp-no:hover,.kp-no:focus-visible{color:#fff;outline:none;text-shadow:0 0 10px var(--kp-violet)}
.kp-orow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;margin-top:14px}

/* her trick menu: how she's doing */
.kp-xrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 18px;margin:-6px 0 6px}
.kp-ring{position:relative;width:62px;text-align:center}
.kp-ring svg{width:56px;height:56px;display:block;margin:0 auto}
.kp-ring span{position:absolute;left:0;right:0;top:15px;font-size:20px;line-height:1}
.kp-ring b{display:block;margin-top:3px;font:700 10px var(--kp-font);letter-spacing:.12em;color:var(--kp-rose)}
.kp-nums{display:flex;gap:16px;font:700 11px var(--kp-font);letter-spacing:.1em;text-transform:uppercase;color:#d9cdf7}
.kp-nums b{display:block;font-size:24px;line-height:1.1;color:#5bffa8;text-shadow:0 0 12px rgba(91,255,168,.55)}
.kp-bonetip{margin:4px 0 0;font:700 12px var(--kp-font);letter-spacing:.08em;color:var(--kp-rose);text-transform:uppercase}
.kp-bonetip b{color:#fff;text-shadow:0 0 10px var(--kp-pink)}
.kp-xbtns{margin:12px 0 18px}

/* on the run the bubble just follows her (no sliding animation that could swing it off the screen) */
.kpal.running .say{transition:opacity .2s}

/* the squeaky toy */
.kp-toy{position:fixed;left:0;top:0;z-index:1031;width:22px;height:22px;padding:0;border:0;background:none;cursor:grab;touch-action:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));-webkit-tap-highlight-color:transparent}
.kp-toy[hidden]{display:none}
.kp-toy:focus-visible{outline:2px solid var(--kp-violet);outline-offset:2px;border-radius:50%}
.kp-toy svg{display:block;width:100%;height:100%}
.kp-toy.wig svg{animation:kpWobble .5s ease-in-out 2}
.kpal .kp-held.kp-toyheld{left:4%;top:44%;width:24%;height:24%}
.kpal.left .kp-held.kp-toyheld{left:auto;right:4%}
.kp-held.kp-toyheld svg{width:100%;height:100%}

/* Gus */
.kp-gus{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}
.kp-gus svg{display:block;overflow:visible}
.kp-gus.run svg{animation:kpGusBob .16s linear infinite}
.kp-gus.run .gus-legs-f{animation:kpGusLegs .16s linear infinite}
.kp-gus.run .gus-legs-b{animation:kpGusLegs .16s linear infinite reverse}
.kp-gus .gus-stink path{animation:kpStink 1.3s ease-in-out infinite}
.kp-gus .gus-stink path:nth-child(2){animation-delay:.35s}.kp-gus .gus-stink path:nth-child(3){animation-delay:.7s}
.kp-gus.sniff svg{animation:kpGusSniff .25s ease-in-out infinite}
.kp-gus .kp-eep{position:absolute;left:-14%;top:-30%;font:900 15px var(--kp-font);color:#fff;text-shadow:0 0 8px var(--kp-pink);opacity:0;transform:scaleX(var(--f,1))}
.kp-gus.flee .kp-eep{opacity:1;transform:scaleX(-1);animation:kpPop .6s ease-out}
@keyframes kpGusBob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6%) rotate(2deg)}}
@keyframes kpGusLegs{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
@keyframes kpGusSniff{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg) translateY(-2%)}}
@keyframes kpStink{0%,100%{opacity:.25;transform:translateY(4px)}50%{opacity:.95;transform:translateY(-4px)}}

/* the daily bone */
.kp-bone{position:fixed;left:0;top:0;z-index:1029;width:34px;height:32px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.kp-bone .kp-mound{position:absolute;left:0;right:0;bottom:0;height:42%;border-radius:50% 50% 30% 30%;background:radial-gradient(70% 90% at 50% 20%,#a8743f,#6d4520 70%,#4a2c12)}
.kp-bone .kp-bn{position:absolute;left:12%;top:-6%;font-size:22px;font-style:normal;line-height:1;transform:rotate(-28deg);filter:drop-shadow(0 0 6px rgba(255,246,194,.7));animation:kpBoneWig 4s ease-in-out infinite}
.kp-bone:hover .kp-bn,.kp-bone:focus-visible .kp-bn{filter:drop-shadow(0 0 10px var(--kp-pink))}
.kp-bone:focus-visible{outline:2px solid var(--kp-violet);outline-offset:2px;border-radius:8px}
.kp-bone.dug{animation:kpBoneUp .6s ease-out forwards;pointer-events:none}
@keyframes kpBoneWig{0%,86%,100%{transform:rotate(-28deg)}90%{transform:rotate(-14deg) translateY(-8%)}95%{transform:rotate(-36deg)}}
@keyframes kpBoneUp{to{opacity:0;transform:var(--t,none) translateY(-30px) scale(1.4)}}

/* letters */
.kp-missed .kp-lface{margin:0;font-size:64px;line-height:1}
.kp-missed .kp-ntext b{color:#5bffa8}
.kp-lnote{margin:10px 0 0;font:700 12px var(--kp-font);letter-spacing:.1em;text-transform:uppercase;color:var(--kp-rose)}
.kp-missed .kp-btn{margin-top:14px}

/* dig-a-letter offer and the win-photo button */
.kp-offer{position:fixed;z-index:2150;padding:14px 16px 6px;border-radius:18px;background:var(--kp-sheet);color:var(--kp-pearl);font:700 14px/1.3 var(--kp-font);box-shadow:inset 0 0 0 1px rgba(255,61,154,.55),0 0 26px -6px var(--kp-pink),0 10px 24px rgba(0,0,0,.45);animation:kpFade .25s ease-out}
.kp-offer p{margin:0}
.kp-offer .kp-osub{margin-top:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--kp-rose)}
.kp-offer .kp-orow{margin-top:8px;justify-content:flex-start}
.kp-snap{position:fixed;z-index:2100;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px 6px 10px;border:1.5px solid var(--kp-pink);border-radius:999px;background:rgba(16,22,74,.9);color:var(--kp-pearl);font:700 12px var(--kp-font);letter-spacing:.12em;cursor:pointer;
  box-shadow:0 0 16px -3px var(--kp-pink);animation:kpBob 1.2s ease-in-out infinite}
.kp-snap{font-size:22px}.kp-snap span{font-size:12px}
.kp-photo .kp-pwrap{text-align:center;width:min(440px,100%)}
.kp-pimg{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 0 40px -8px var(--kp-pink)}

/* the talent show */
.kp-show{background:radial-gradient(ellipse 60% 45% at 50% 62%,rgba(255,236,250,.18),transparent 70%),linear-gradient(180deg,#0b0624,#1c0838 70%,#2b0a3e);overflow:hidden}
.kp-show .kp-curt{position:absolute;top:0;bottom:0;width:15%;background:repeating-linear-gradient(90deg,#7a0f45 0 14px,#b0185f 14px 26px,#7a0f45 26px 40px);box-shadow:inset 0 0 40px rgba(0,0,0,.6);animation:kpCurtIn 1.1s cubic-bezier(.3,1,.4,1) both}
.kp-show .kp-curt.l{left:0}.kp-show .kp-curt.r{right:0;animation-name:kpCurtInR}
.kp-show .kp-beam{position:absolute;left:50%;top:-10%;width:60vmin;height:110%;transform:translateX(-50%);background:linear-gradient(180deg,rgba(255,240,252,.22),rgba(255,240,252,0) 85%);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);pointer-events:none}
.kp-swrap{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;width:min(720px,100%)}
.kp-swrap h2{margin:0;font:700 clamp(24px,5vw,42px)/1.05 var(--kp-font);letter-spacing:.12em;background:var(--kp-pearl-g);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 2px rgba(255,255,255,.8)) drop-shadow(0 0 12px rgba(255,61,154,.85))}
.kp-act{min-height:1.4em;margin:12px 0 6px;font:700 clamp(14px,2.6vw,18px) var(--kp-font);letter-spacing:.12em;color:#5bffa8;text-shadow:0 0 12px rgba(91,255,168,.6)}
.kp-spot{width:min(230px,52vw);height:min(230px,52vw);margin-top:min(14vh,90px)}
.kp-floor{display:block;width:min(420px,80vw);height:18px;margin-top:-4px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,200,240,.35),rgba(255,200,240,0))}
.kp-clap b{min-width:2ch;color:#5bffa8}
@keyframes kpCurtIn{from{transform:translateX(0);width:50%}to{width:15%}}
@keyframes kpCurtInR{from{width:50%}to{width:15%}}

/* the closet */
.kp-cwrap{display:grid;grid-template-columns:minmax(200px,300px) minmax(0,520px);gap:20px 34px;align-items:start;width:min(900px,100%)}
.kp-cprev{position:sticky;top:0;display:grid;place-items:center;padding-top:30px}
.kpal-doll{position:relative;width:min(260px,60vw);height:min(260px,60vw);--ks:260px}
.kpal-doll .kp-flip,.kpal-doll .kb2,.kpal-doll .kp-head,.kpal-doll .kp-hd2{position:absolute;inset:0}
.kpal-doll img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.kpal-doll .kb2{transform-origin:50% 96%;animation:kpBreathe 3.2s ease-in-out infinite}
.kpal-doll .tail{transform-origin:77.7% 47.7%;animation:kpWag .9s ease-in-out infinite}
.kpal-doll .kp-head,.kpal-doll .kp-hd2{transform-origin:28.75% 37.5%}
.kpal-doll .kp-wear,.kpal-doll .kp-wear>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.kpal-doll .kp-shadow{position:absolute;left:14%;right:10%;bottom:-1%;height:6.5%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0))}
.kpal-doll .kp-lid,.kpal-doll .heart{display:none}
.kp-cside{text-align:center}
.kp-cside h2{margin:0;font:700 clamp(24px,4.6vw,40px)/1.05 var(--kp-font);letter-spacing:.12em;background:var(--kp-pearl-g);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 2px rgba(255,255,255,.8)) drop-shadow(0 0 12px rgba(255,61,154,.85))}
.kp-ctabs{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;margin:-8px 0 12px}
.kp-ctabs button{border:0;background:none;color:#c8bfe8;font:700 12.5px var(--kp-font);letter-spacing:.1em;cursor:pointer;min-height:44px;padding:8px 10px;position:relative}
.kp-ctabs button[aria-selected="true"]{color:#fff;text-shadow:0 0 10px var(--kp-pink)}
.kp-ctabs button[aria-selected="true"]::after{content:'';position:absolute;left:18%;right:18%;bottom:4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--kp-pink),var(--kp-violet));box-shadow:0 0 10px var(--kp-pink)}
.kp-cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:4px 8px}
.kp-ci{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border:0;background:none;color:var(--kp-pearl);cursor:pointer;font:700 11.5px/1.15 var(--kp-font);letter-spacing:.06em;text-transform:uppercase;border-radius:14px;-webkit-tap-highlight-color:transparent}
.kp-ci .th{display:grid;place-items:center;width:64px;height:58px;font-size:30px;line-height:1}
.kp-ci .th svg{width:100%;height:100%}
.kp-ci .lk{font-size:9.5px;letter-spacing:.06em;color:var(--kp-rose);text-transform:none}
.kp-ci{position:relative}.kp-ci[aria-pressed="true"] .th{filter:drop-shadow(0 0 10px rgba(255,61,154,.9))}.kp-ci[aria-pressed="true"] .nm{color:#fff;text-shadow:0 0 10px var(--kp-pink)}
.kp-ci[aria-pressed="true"]::after{content:'';position:absolute;left:22%;right:22%;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--kp-pink),var(--kp-violet));box-shadow:0 0 10px var(--kp-pink)}
.kp-ci:hover:not([disabled]) .th,.kp-ci:focus-visible .th{transform:translateY(-2px) scale(1.06);filter:drop-shadow(0 0 8px rgba(255,61,154,.7))}
.kp-ci:focus-visible{outline:none}.kp-ci:focus-visible .nm{text-shadow:0 0 10px var(--kp-violet)}
.kp-ci.lock{opacity:.4;cursor:default}
@media (max-width:640px){.kp-cwrap{grid-template-columns:1fr}.kp-cprev{position:relative;padding-top:0}.kpal-doll{width:190px;height:190px}.kp-cgrid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}}
@media (prefers-reduced-motion:reduce){.kpal .kp-head{transition:none}.kpal .kp-hd2,.kpal .kp-shadow,.kp-bone .kp-bn,.kp-gus *,.kp-snap,.kp-show .kp-curt,.kpal-doll .kb2,.kpal-doll .tail{animation:none!important}}

/* ===== nav colors v2 (2026-10-01): every nav word in its own neon, crisp (no blur) ===== */
/* top bar: PLAY green, LEARN hot pink, TRAIN yellow, SHOP neon blue */
#flbar.fl-sites .fs b{font-weight:900;font-size:13.5px;letter-spacing:.2em;color:var(--c);
  text-shadow:0 0 1px var(--c),0 0 8px var(--g),0 0 18px var(--g)}
#flbar.fl-sites .fs-play{--c:#3DFF8F;--g:rgba(61,255,143,.6)}
#flbar.fl-sites .fs-learn{--c:#FF3DA8;--g:rgba(255,61,168,.65)}
#flbar.fl-sites .fs-train{--c:#FFE84D;--g:rgba(255,232,77,.55)}
#flbar.fl-sites .fs-shop{--c:#3DB8FF;--g:rgba(61,184,255,.65)}
/* one standard on all four: label AND address in that site's neon; the current site is marked only by its underline */
#flbar.fl-sites .fs span{color:var(--c);text-shadow:0 0 8px var(--g)}
#flbar.fl-sites .fs:hover span,#flbar.fl-sites .fs:focus-visible span{color:#fff;text-shadow:0 0 6px var(--c),0 0 14px var(--g)}
#flbar.fl-sites .fs-on::after{height:3px;background:var(--c);box-shadow:0 0 8px var(--g),0 0 16px var(--g)}

/* dock pages: each page its own neon; icons sharp — thicker line, no glow haze */
#gdock .gd-i{--c:#FF3DA8}
#gdock .gd-i[data-p="/"]{--c:#FF3DA8}
#gdock .gd-i[data-p="/play"]{--c:#3DFF8F}
#gdock .gd-i[data-p="/league"]{--c:#FFE84D}
#gdock .gd-i[data-p="/chat"]{--c:#B47CFF}
#gdock .gd-i[data-p="/deck"]{--c:#FF8F3D}
#gdock .gd-i[data-p="/shop"]{--c:#3DB8FF}
#gdock .gd-i:not(.gd-g){color:var(--c)}
#gdock .gd-i:not(.gd-g) svg,#gdock .gd-i:not(.gd-g):hover svg,#gdock .gd-i:not(.gd-g):focus-visible svg,#gdock .gd-i:not(.gd-g)[aria-current] svg{stroke:var(--c);stroke-width:2.2;filter:none}
#gdock .gd-i:not(.gd-g) span,#gdock .gd-i:not(.gd-g):hover span,#gdock .gd-i:not(.gd-g):focus-visible span{background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--c);filter:none;text-shadow:0 0 6px color-mix(in srgb,var(--c) 55%,transparent)}
#gdock .gd-i:not(.gd-g)[aria-current] span{color:#fff;text-shadow:0 0 6px var(--c),0 0 12px var(--c)}
#gdock .gd-i:not(.gd-g)[aria-current] svg{stroke:#fff}
#gdock .gd-i:not(.gd-g)[aria-current]::after{background:var(--c);box-shadow:0 0 8px var(--c)}
/* game icons: no haze — clean edge */
#gdock .gd-g img{image-rendering:auto;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 4px 10px -4px rgba(0,0,0,.8)}
/* /nav colors v2 */

/* kp-clear-2026-10-02: the bubble sits wherever it covers nothing (pal.js sayPos), or waits unseen */
.kpal .say.kp-free{left:var(--sx)!important;top:var(--sy)!important;right:auto!important;bottom:auto!important;transform:scale(.6)!important;transform-origin:50% 50%!important}
.kpal .say.kp-free.in{transform:none!important}
.kpal .say.kp-free::after{left:var(--tx,50%)!important;right:auto!important}
.kpal .say.kp-free.kp-a::after{top:auto!important;bottom:-5px!important;box-shadow:1px 1px 0 rgba(255,61,154,.55)!important}
.kpal .say.kp-free.kp-b::after{bottom:auto!important;top:-5px!important;box-shadow:-1px -1px 0 rgba(255,61,154,.55)!important}
.kpal .say.kp-free.kp-s::after{display:none!important}
.kpal .say.kp-mute,.kpal .say.kp-mute.in{opacity:0!important;visibility:hidden!important}
/* QUIET KOTA button (2026-10-02): big, neon, part of the sheet */
.kp-menu .kp-quiet{display:block;margin:10px auto 6px;min-height:52px;padding:0 28px;border:2px solid #5BFFA8;border-radius:999px;background:transparent;color:#5BFFA8;
  font:900 18px/1 var(--kp-font);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;text-shadow:0 0 10px rgba(91,255,168,.7);box-shadow:inset 0 0 14px rgba(91,255,168,.25),0 0 16px rgba(91,255,168,.35)}
.kp-menu .kp-quiet:hover,.kp-menu .kp-quiet:focus-visible{background:rgba(91,255,168,.14);outline:none}
.kp-menu .kp-quiet[aria-pressed="true"]{border-color:#FF3D9A;color:#FF7BD9;text-shadow:0 0 10px rgba(255,61,154,.8);box-shadow:inset 0 0 14px rgba(255,61,154,.25),0 0 16px rgba(255,61,154,.4)}

/* gdock-play-2026-10-04: on a game page the board gets the screen. The dock stays one swipe row at every width
   (it used to stack two or three rows above the board on phones, tablets and small laptops). Other pages keep the full grid. */
@media (max-width:1360px){
  #gdock:has(.gd-g[aria-current]){padding-top:4px;padding-bottom:0}
  #gdock:has(.gd-g[aria-current]) .gd-scroll{display:flex;flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;row-gap:0;column-gap:2px;padding:2px 4px 8px;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 14px),transparent)}
  #gdock:has(.gd-g[aria-current]) .gd-scroll>:first-child{margin-left:auto}
  #gdock:has(.gd-g[aria-current]) .gd-scroll>:last-child{margin-right:auto}
  #gdock:has(.gd-g[aria-current]) .gd-i{flex:0 0 auto;width:auto;min-width:50px}
  #gdock:has(.gd-g[aria-current]) .gd-sep{display:block;flex:0 0 1px;width:1px;height:30px;margin:0 6px;background:linear-gradient(180deg,transparent,rgba(255,61,154,.6),rgba(169,125,255,.6),transparent)}
}
/* /gdock-play */

/* gdock-short-2026-10-05: short laptop windows and landscape tablets on a game page: the dock is one slim row
   (smaller icons, no labels) so the board gets about 30 px more height. Every other page keeps the full dock. */
@media (min-width:980px) and (max-height:860px){
  #gdock:has(.gd-g[aria-current]){padding-top:2px}
  #gdock:has(.gd-g[aria-current]) .gd-scroll{padding:1px 4px 3px}
  #gdock:has(.gd-g[aria-current]) .gd-i{width:36px;height:36px;min-height:0}
  #gdock:has(.gd-g[aria-current]) .gd-i svg{width:20px;height:20px}
  #gdock:has(.gd-g[aria-current]) .gd-g img{width:28px;height:28px;border-radius:8px}
  #gdock:has(.gd-g[aria-current]) .gd-i span{display:none}
  #gdock:has(.gd-g[aria-current]) .gd-i::after{bottom:-2px}
  #gdock:has(.gd-g[aria-current]) .gd-kota{flex-basis:40px;width:40px;height:40px}
  #gdock:has(.gd-g[aria-current]) .gd-sep{height:22px}
}

/* gdock-fit-2026-10-05b: on 1361-1560 px laptops the one-row dock ran a few px too wide and the last game (GROUPS) slid out of
   sight under Kota's seat. Drop the left spacer and tighten the gaps there so every item shows. */
@media (min-width:1361px) and (max-width:1560px){
  #gdock .gd-row::before{display:none}
  #gdock .gd-scroll{gap:2px}
  #gdock .gd-sep{margin:0 6px}
}