/* License to Earn: Ace on the license sections (lic-ace-v2.css: Ace in the page flow below 1500px wide).
   Copied from the real estate flashcards: the Ace layer, the layered rig (ace-rig), the clickable
   rig and side bubble (v21-ace), the bubble colour fix and the in-flow phone dock (v45).
   Only the colour variables are new, because these pages use the section theme. */
#aceDock{--card:#FFFFFF; --ink:#0A1626; --gold:#DDD4C3; --bubble-bg:#FFFFFF;}
html[data-theme="dark"] #aceDock{--card:#1F2D3F; --ink:#E8EDF3; --gold:#33445A; --bubble-bg:#1F2D3F;}
/* ---------------- Ace layer (flashcards) ---------------- */
#mascot{position:fixed;left:14px;bottom:14px;z-index:60;width:132px;pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.45));}
#mascot svg{width:100%;height:auto;display:block;}
#bubble{position:fixed;left:16px;bottom:118px;z-index:60;max-width:230px;background:var(--card);
  color:var(--ink);font-size:13.5px;line-height:1.45;padding:9px 12px;border-radius:12px;
  border:2px solid var(--gold);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;
  pointer-events:none;}
#bubble:after{content:'';position:absolute;left:26px;bottom:-9px;border:9px solid transparent;
  border-top-color:var(--gold);border-bottom:0;}
#bubble.show{opacity:1;transform:none;}
@media (max-width:640px){#mascot{width:96px;}#bubble{bottom:88px;max-width:180px;font-size:12.5px;}}
/* owl moods */
#mascot .lid{transform-origin:center;transform-box:fill-box;transform:scaleY(0);transition:transform .15s;}
#mascot.blink .lid{transform:scaleY(1);}
#mascot .browL,#mascot .browR{transition:transform .2s;transform-origin:center;}
#mascot.m-happy .browL{transform:rotate(-10deg) translateY(-2px);}
#mascot.m-happy .browR{transform:rotate(10deg) translateY(-2px);}
#mascot.m-sad .browL{transform:rotate(14deg) translateY(1px);}
#mascot.m-sad .browR{transform:rotate(-14deg) translateY(1px);}
#mascot.m-wow .pupilL,#mascot.m-wow .pupilR{r:7;}
#mascot .cheek{opacity:0;transition:opacity .3s;}
#mascot.m-happy .cheek{opacity:1;}
#mascot .earL,#mascot .earR{transform-origin:center bottom;transform-box:fill-box;transition:transform .25s;}
#mascot .tail{transform-origin:0% 100%;transform-box:fill-box;}
#mascot .tongue{opacity:0;transition:opacity .25s;}
#mascot.m-happy .tongue{opacity:1;}
#mascot.m-happy .earL{transform:rotate(-10deg);}
#mascot.m-happy .earR{transform:rotate(10deg);}
#mascot.m-sad .earL{transform:rotate(-24deg) translateY(3px);}
#mascot.m-sad .earR{transform:rotate(24deg) translateY(3px);}
#mascot.m-wow .earL{transform:translateY(-3px);}
#mascot.m-wow .earR{transform:translateY(-3px);}
#mascot.flap .tail{animation:wag .45s ease-in-out 3;}
#mascot.howl{animation:howlUp 1.6s ease;}
#mascot.howl .tail{animation:wag .45s ease-in-out 3;}
@keyframes howlUp{15%,68%{transform:rotate(-12deg) translateY(-5px);}}
@keyframes wag{50%{transform:rotate(-18deg);}}
#mascot.zoom{animation:zoomies 1.6s ease-in-out;}
#mascot.zoom .tail{animation:wag .3s ease-in-out 5;}
@keyframes zoomies{0%{transform:translateX(0) scaleX(1);}10%{transform:translateX(4vw) translateY(-8px);}20%{transform:translateX(9vw);}30%{transform:translateX(14vw) translateY(-8px);}42%{transform:translateX(18vw) scaleX(1);}50%{transform:translateX(18vw) scaleX(-1);}60%{transform:translateX(14vw) translateY(-8px) scaleX(-1);}70%{transform:translateX(9vw) scaleX(-1);}82%{transform:translateX(4vw) translateY(-8px) scaleX(-1);}94%{transform:translateX(0) scaleX(-1);}100%{transform:translateX(0) scaleX(1);}}
#mascot.bounce{animation:mbounce .55s ease;}
@keyframes mbounce{0%,100%{transform:translateY(0);}35%{transform:translateY(-16px);}60%{transform:translateY(0);}80%{transform:translateY(-6px);}}
#mascot.wiggle{animation:mwig .5s ease;}
@keyframes mwig{25%{transform:rotate(-6deg);}75%{transform:rotate(6deg);}}
.pt{position:fixed;z-index:70;pointer-events:none;font-size:20px;animation:ptUp .9s ease-out forwards;}
@keyframes ptUp{to{transform:translateY(-70px) scale(1.3);opacity:0;}}
.cf{position:fixed;z-index:65;top:-14px;width:9px;height:14px;pointer-events:none;
  animation:cfFall linear forwards;}
@keyframes cfFall{to{transform:translateY(110vh) rotate(720deg);}}
@media (prefers-reduced-motion: reduce){
  #mascot.bounce,#mascot.wiggle,#mascot.zoom,#mascot.zoom .tail,#mascot.flap .tail,#mascot.howl,#mascot.howl .tail{animation:none;}
  .cf,.pt{display:none;}
}

  
#bubble{ background:var(--bubble-bg); box-shadow:0 6px 18px rgba(0,0,0,.18); }

/* Layered Ace. The page's own mascot CSS (.blink .lid, .flap .tail,
   .m-happy .earL, .bounce/.wiggle/.zoom) drives these directly; idle motion
   sits on inner wrappers so it composes instead of fighting them. */
#mascot{width:176px !important;}
#mascot .rig{position:relative;width:100%;aspect-ratio:356/498;}
#mascot .normal,#mascot .lay{position:absolute;inset:0;}
#mascot .lay img{width:100%;height:auto;display:block;}
#mascot .tail{transform-origin:77.5% 86.7%;}
/* each ear turns on its own base; pivoting on the skull made them splay like antennae */
#mascot .earL{transform-origin:31.59% 16.69%;}
#mascot .earR{transform-origin:69.39% 16.95%;}

/* idle life */
#mascot .tailIdle{animation:aceTail 3.4s ease-in-out infinite;transform-origin:77.5% 86.7%;}
@keyframes aceTail{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(7deg)}}
#mascot .breathe{animation:aceBreathe 3.9s ease-in-out infinite;transform-origin:50% 96%;}
@keyframes aceBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018,1.012)}}
#mascot .earIdleL{animation:aceFlickL 7s ease-in-out infinite;transform-origin:31.59% 16.69%;}
#mascot .earIdleR{animation:aceFlickR 7s ease-in-out infinite .8s;transform-origin:69.39% 16.95%;}
@keyframes aceFlickL{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(-11deg)}92%{transform:rotate(3deg)}}
@keyframes aceFlickR{0%,84%,100%{transform:rotate(0)}88%{transform:rotate(11deg)}92%{transform:rotate(-3deg)}}

/* eyelids; driven by the page's existing .blink */
#mascot .lid{position:absolute;width:7.6%;height:3.6%;border-radius:50%;
  background:#EFE9DC;border:1.5px solid #22344A;box-sizing:border-box;}
#mascot .lidL{left:39.2%;top:19.7%;}
#mascot .lidR{left:54.1%;top:19.7%;}

/* mouth; opens on bark (.flap), pants during the zoomies (.zoom) */
#mascot .mouth{position:absolute;left:44.85%;top:34.0%;width:11.6%;height:6.6%;
  background:#3A2A28;border:1.6px solid #22344A;box-sizing:border-box;
  border-radius:14% 14% 52% 52% / 10% 10% 100% 100%;
  transform:scaleY(0);transform-origin:50% 0;}
@keyframes aceBark{0%,100%{transform:scaleY(0)}12%{transform:scaleY(1)}28%{transform:scaleY(.12)}
  44%{transform:scaleY(.92)}62%{transform:scaleY(0)}}
#mascot.flap .mouth{animation:aceBark .82s ease-in-out 2;}
@keyframes acePantMouth{0%,100%{transform:scaleY(.5)}50%{transform:scaleY(.95)}}
#mascot.zoom .mouth{animation:acePantMouth .3s ease-in-out 9;}

/* tongue; lolls out and bobs while he pants. The page's older rule sets
   opacity:0 on .tongue, so re-assert it here and drive visibility by scale. */
#mascot .tongue{position:absolute;left:47.85%;top:35.6%;width:5.6%;height:6.0%;
  opacity:1;background:#DE7A90;border:1.5px solid #B0506A;box-sizing:border-box;
  border-radius:30% 30% 52% 52% / 12% 12% 100% 100%;
  transform:scaleY(0);transform-origin:50% 0;transition:transform .25s;}
@keyframes acePantTongue{0%,100%{transform:scaleY(.9)}50%{transform:scaleY(1.16)}}
#mascot.zoom .tongue{animation:acePantTongue .3s ease-in-out 9;}
/* the tongue only ever shows with the mouth open; never on its own */

/* howl; swap to the drawn head-back pose, then return on its own */
#mascot .howlPose{opacity:0;}
@keyframes aceHowlIn{0%{opacity:0}10%{opacity:1}78%{opacity:1}100%{opacity:0}}
@keyframes aceHowlOut{0%{opacity:1}10%{opacity:0}78%{opacity:0}100%{opacity:1}}
#mascot.howl .howlPose{animation:aceHowlIn 2.6s ease both;}
#mascot.howl .normal{animation:aceHowlOut 2.6s ease both;}

@media (prefers-reduced-motion:reduce){
  #mascot .tailIdle,#mascot .breathe,#mascot .earIdleL,#mascot .earIdleR{animation:none;}
}
@media (max-width:640px){#mascot{width:124px !important;}}

/* Ace, clickable. The bubble sits beside him instead of over him, and the rig
   itself stays pointer-events:none so only the hit zones take clicks. */
#bubble{left:calc(176px + 22px); bottom:152px; max-width:252px;}
#bubble:before{content:''; position:absolute; right:100%; left:auto; top:19px; bottom:auto;
  border:10px solid transparent; border-right-color:#DDD4C3; border-left:0;}
#bubble:after{right:100%; left:auto; top:20px; bottom:auto;
  border:9px solid transparent; border-top-color:transparent;
  border-right-color:#FFFFFF; border-left:0;}
#mascot .hit{position:absolute; background:transparent; border:0; padding:0; margin:0;
  pointer-events:auto; cursor:pointer; border-radius:50%; min-height:0 !important;
  -webkit-tap-highlight-color:transparent;}
#mascot .hit:focus-visible{outline:2px solid #C8102E; outline-offset:2px;}
#mascot .hitBody{left:20%; top:40%; width:58%; height:56%;}
#mascot .hitTail{left:64%; top:56%; width:36%; height:42%;}
#mascot .hitHead{left:28%; top:11%; width:46%; height:32%;}
#mascot .hitEarL{left:19%; top:1%; width:23%; height:18%;}
#mascot .hitEarR{left:58%; top:1%; width:23%; height:18%;}
#mascot .rig{transition:transform .18s ease;}
#mascot:has(.hit:hover) .rig{transform:translateY(-3px);}
@media (max-width:640px){
  #bubble{left:calc(124px + 14px); bottom:104px; max-width:min(58vw,212px); font-size:12.5px;}
  #bubble:before{top:16px;} #bubble:after{top:17px;}
}
@media (prefers-reduced-motion:reduce){ #mascot .rig{transition:none;} }

html[data-theme="dark"] #bubble:after{border-right-color:#1F2D3F;}
html[data-theme="dark"] #bubble:before{border-right-color:#33445A;}
/* desktop: Ace is fixed bottom-left, so the last row of content must clear him */
@media (min-width:1500px){ body.ace-on{ padding-bottom:150px; } }
/* phones and tablets: Ace sits in the page flow under the tool, never over a control */
@media (max-width:1499px){
  #aceDock{display:flex; direction:ltr; align-items:flex-end; gap:10px; padding:20px 16px 0; min-height:150px;}
  #aceDock #mascot{position:relative; left:auto; bottom:auto; flex:0 0 auto; width:92px !important; z-index:1;}
  #aceDock #bubble{position:relative; left:auto; bottom:auto; align-self:center; flex:0 1 auto; max-width:none; min-width:0; z-index:1;}
}
html[data-ace="off"] #aceDock{display:none !important;}
/* sound toggle in the section top bar */
.ace-snd{min-width:44px; min-height:40px; border:1px solid currentColor; background:transparent; color:inherit; border-radius:2px; cursor:pointer; font-size:17px; line-height:1;}
.streak-badge{display:inline-block; margin-inline-start:10px; border:1px solid #C8102E; color:#C8102E; border-radius:999px; padding:1px 10px; font-size:12.5px; font-weight:700;}