@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@600;700;800;900&display=swap');
:root{--ink:#173f45;--pink:#ef2c7b;--paper:#fff9ec;--mint:#d6efe5;--yellow:#ffd75c}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;background:var(--paper);color:var(--ink);font:700 14px 'Nunito',system-ui,sans-serif}button,a{touch-action:manipulation}button{font:800 14px 'Nunito',system-ui;color:inherit;cursor:pointer;border:0}button:disabled{opacity:.42;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid var(--pink);outline-offset:2px}button:active:not(:disabled){transform:translateY(2px)}[hidden]{display:none!important}main{height:100%;max-width:500px;margin:auto;overflow:hidden;background:var(--paper)}.screen{height:100%;padding:calc(12px + env(safe-area-inset-top)) 19px calc(12px + env(safe-area-inset-bottom));overflow:hidden}header{display:flex;align-items:center;justify-content:space-between;min-height:48px;gap:10px}.iconbtn{width:36px;height:36px;min-width:36px;border-radius:50%;background:#e9ecdf;font-size:23px;display:grid;place-items:center}.sound{font-size:19px}.sound.muted{color:#a26878;text-decoration:line-through}.header-actions{display:flex;gap:6px}.logo{font:800 clamp(76px,23vw,110px)/.9 'Baloo 2',system-ui;letter-spacing:-6px;transform:rotate(-5deg);text-shadow:2px 3px 0 #fff,4px 5px 0 #143c4120}.logo span{color:var(--pink)}.logo.small{font-size:48px;letter-spacing:-3px;line-height:1}.home{display:flex;flex-direction:column;align-items:center;background:radial-gradient(ellipse at center,#fff9ea,#f5eedc);gap:12px;padding-bottom:calc(24px + env(safe-area-inset-bottom))}.brandline{text-align:center;font-size:clamp(8px,2.2vw,11px);letter-spacing:1.3px;white-space:nowrap;flex-shrink:0;margin-top:8px}.titleblock{text-align:center;padding-top:10px;flex-shrink:0}h1{font:800 clamp(20px,6vw,28px)/1.15 'Baloo 2',sans-serif;margin:15px 0 0;letter-spacing:-.4px}h2{font:800 30px/1.05 'Baloo 2',sans-serif;letter-spacing:-.6px;margin:0}h3{font:800 15px 'Nunito';margin:0}.hero{flex:1;min-height:0;position:relative;width:calc(100% + 26px)}.hero img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:contain;pointer-events:none;filter:drop-shadow(0 10px 10px #193f3c18);animation:heroFloat 6s ease-in-out infinite}.wide{width:100%}.primary{background:var(--pink);color:white;border-radius:14px;padding:12px 18px;box-shadow:0 4px 0 #b51b5d;font-size:17px;display:flex;justify-content:space-between;align-items:center;min-height:48px;flex-shrink:0}.home .primary{max-width:360px}.secondary{border:1px solid #b0cbbf;background:#e7f1e7;border-radius:12px;padding:10px 14px;min-height:40px;display:flex;align-items:center;justify-content:space-between}.secondary span{color:var(--pink)}.menu{display:flex;flex-direction:column;gap:10px}.menu-title{flex-shrink:0;margin:4px 0}.menu-title h2{font-size:30px}.sectionlabel{display:flex;justify-content:space-between;align-items:center;margin-top:3px;font-size:11px}.level-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;flex:1;min-height:135px;max-height:245px}.level-tile{border:1px solid #d8dfcf;border-bottom:3px solid #d8dfcf;background:#fff;border-radius:12px;font:800 25px/1 'Baloo 2';position:relative;min-height:0;padding:3px}.level-tile small{display:block;font:700 9px 'Nunito';margin-top:3px;color:#7d8b7e}.level-tile.solved{background:#dbefe4;border-color:#a9cdb9}.level-tile.current{outline:2px solid var(--pink);outline-offset:1px}.level-tile.solved:after{content:'✓';position:absolute;right:5px;top:4px;font:900 11px 'Nunito';color:#478366}.level-tile:disabled{background:#e9eade;color:#8d9888;opacity:1}.level-tile:disabled small{letter-spacing:1px;font-size:8px}.pages{display:flex;justify-content:center;align-items:center;gap:20px;flex-shrink:0}.pages .iconbtn{width:30px;height:28px;min-width:30px;font-size:22px}.pages span{font-size:11px}.menu-guide{display:flex;align-items:center;min-height:67px;flex-shrink:0;margin-top:auto}.menu-guide .francis{width:76px;height:76px;flex-shrink:0}.menu-guide p{font-size:12px;line-height:1.4;margin:0}.menu-guide b{display:block;color:var(--pink);font-size:10px;margin-top:4px}.menu footer{display:flex;justify-content:center;gap:20px;align-items:center;font-size:12px;flex-shrink:0}.menu footer a{color:inherit;text-decoration:none;border-bottom:1px solid #789588;padding-bottom:3px}.menu footer span{color:var(--pink)}.textbutton{padding:4px 0;background:none;font-size:11px;text-decoration:underline;text-underline-offset:3px}.erase{align-self:center;font-size:10px;flex-shrink:0;color:#7d8175}.game{display:grid;grid-template-rows:46px 47px minmax(0,1fr) 43px 47px 83px 46px;gap:8px;padding-inline:15px}.gameheading{display:flex;align-items:center;justify-content:space-between;gap:10px}.gameheading h2{font-size:26px;margin-top:2px}.eyebrow{font-size:9px;letter-spacing:1px;color:#598077}.pill{font-size:11px;border:1px solid #b8c5b9;background:#e5eee0;padding:6px 9px;border-radius:30px;white-space:nowrap}.board-area{min-height:0;min-width:0;display:flex;justify-content:center;align-items:center}.board-shell{background:#b2d0bd;border:1px solid #8ba894;border-bottom:5px solid #77998b;border-radius:18px;padding:9px;box-shadow:0 5px 12px #193d3f12;position:relative;width:var(--board-size,100%);height:var(--board-size,auto);max-width:100%;max-height:100%}#board{display:grid;gap:4px;width:100%;height:100%}.clue{font:800 clamp(13px,4vw,18px) 'Baloo 2';display:grid;place-items:center;color:#406355;border-radius:6px;min-height:0}.clue.done{background:#e2f5cf;color:#1b564c}.clue.over{background:#ffd2dc;color:#a12048}.cell{padding:0;min-width:0;min-height:0;border-radius:8px;background:#edf3de;box-shadow:inset 0 -2px 0 #6a97751c;border:1px solid #a3bc9f;position:relative;display:grid;place-items:center;overflow:visible}.cell:nth-child(3n){background:#e6eed7}.cell.mark:after{content:'×';color:#7f9d83;font-size:24px;font-weight:500}.cell.cat{background:#d1e3c4;border-color:#92b18e}.cell.cat:before{content:'';position:absolute;bottom:4%;width:62%;height:11%;background:#6a806437;filter:blur(1px);border-radius:50%}.cat-sprite{background-image:var(--atlas);background-size:600% 500%;background-position:calc(var(--sx,0)*100%/5) calc(var(--sy,0)*100%/4);background-repeat:no-repeat;pointer-events:none;width:100%;height:100%}.cat-motion{position:absolute;width:122%;height:133%;left:-11%;top:-29%;z-index:5;pointer-events:none;transform-origin:50% 80%;animation:breathe 4s ease-in-out infinite;animation-delay:var(--delay,0s)}.cat-motion.happy{animation:happy .9s ease-in-out}.cat-motion.looking{rotate:var(--tilt,0deg);transition:rotate .3s}.francis{background:url('assets/francis-guide.webp') no-repeat;background-size:300% 200%;background-position:calc(var(--fx,0)*50%) calc(var(--fy,0)*100%);pointer-events:none;aspect-ratio:1;width:90px;height:90px}.crate{position:absolute;width:83%;height:64%;left:8.5%;top:24%;pointer-events:none;animation:boxDrop .3s ease-out}.crate-back{position:absolute;inset:0 6% 5%;background:#815337;border:1px solid #694832;border-radius:3px}.crate-front{position:absolute;left:4%;right:4%;top:38%;bottom:0;background:linear-gradient(115deg,#edc086,#dba362);border:1px solid #a97742;border-radius:2px 2px 4px 4px;display:grid;place-items:center}.crate-front:before{content:'♥';font-size:11px;color:#9c6737;opacity:.7}.crate-front:after{content:'';position:absolute;top:0;bottom:0;right:18%;width:11%;background:#f6dbab70;border-inline:1px dashed #c2956660}.flap{position:absolute;top:12%;width:48%;height:33%;background:#f0c995;border:1px solid #a97742}.flap.left{left:-8%;transform:rotate(-23deg) skewX(-12deg)}.flap.right{right:-8%;transform:rotate(23deg) skewX(12deg)}.box-lip{position:absolute;left:12%;right:12%;top:48%;height:40%;background:linear-gradient(115deg,#edc086,#dba362);border:1px solid #a97742;border-radius:2px 2px 4px 4px;z-index:10;display:grid;place-items:center;pointer-events:none}.box-lip:after{content:'♥';font-size:11px;color:#9c6737}.resident{position:absolute;width:91%;height:102%;left:4.5%;top:-29%;z-index:7;pointer-events:none;clip-path:inset(0 0 16% 0);animation:peek 1.8s ease-in-out infinite}#flightLayer{position:absolute;inset:0;pointer-events:none;z-index:20;overflow:visible}.flyer{position:absolute;pointer-events:none;transform-origin:50% 100%}.modes{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:3px;background:#e7e9dd;border-radius:12px}.modes button{border-radius:9px;font-size:12px;background:transparent;padding:5px 3px}.modes .selected{background:var(--ink);color:white}.actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.actions button{background:#fffdf6;border:1px solid #d9dfcd;border-bottom:3px solid #d2d9c5;border-radius:11px;padding:4px 3px;font-size:19px}.actions span{display:block;font-size:10px;line-height:1}.guide{display:flex;align-items:center;min-height:0;gap:3px}.guide .francis{width:78px;height:78px;margin-left:-8px;flex-shrink:0;animation:guideBob 4s infinite}.speech{background:white;border:1px solid #e0e4d6;border-radius:13px;padding:9px;flex:1;min-width:0;box-shadow:0 3px 0 #d3dccd44}.speech>span{font-size:8px;letter-spacing:1px;color:var(--pink)}.speech p{font-size:11px;line-height:1.4;margin:3px 0 0;text-wrap:pretty}.phrase{display:block}.guide.error .speech{background:#fff0f2;border-color:#f3c7cf}.guide.win .speech{background:#e6f7db;border-color:#bbd5aa}.gamebottom{display:flex;align-items:center;min-height:0}#bottomInfo{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:10px;color:#7e8b7c}.gamebottom .primary{min-height:40px;padding:8px 14px;font-size:14px}.error-cell{outline:2px solid #ed5d82;animation:shake .4s}.hint-cell{outline:3px solid #f7c84d;z-index:3}.confetti{position:fixed;top:-20px;left:var(--x);background:var(--c);width:7px;height:11px;pointer-events:none;z-index:40;animation:confetti 2.5s var(--d) ease-in forwards}dialog{border:0;border-radius:23px;background:var(--paper);color:var(--ink);padding:20px;max-width:380px;width:calc(100% - 28px);max-height:calc(100dvh - 28px);box-shadow:0 20px 100px #102b4966;text-align:center;overflow:hidden}dialog::backdrop{background:#123b40b3;backdrop-filter:blur(5px)}dialog .francis{width:108px;height:108px;margin:-3px auto 1px}dialog .close{position:absolute;right:12px;top:10px;background:#e7e9dc;border-radius:50%;width:32px;height:32px;font-size:22px}dialog h2{font-size:26px;margin:10px 0}#modalBody{font-size:13px;line-height:1.5;margin:8px 0 17px;text-wrap:pretty}#modalBody p{margin:8px 0}.stepdots{font-size:10px;letter-spacing:5px;color:var(--pink)}.tutorial-board{width:min(220px,31dvh);height:min(220px,31dvh);display:grid;grid-template-columns:22px repeat(4,1fr);grid-template-rows:22px repeat(4,1fr);gap:3px;background:#b2d0bd;border-radius:12px;padding:6px;margin:10px auto}.tutorial-board .cell{pointer-events:none}.tutorial-board .clue{font-size:14px}.tutorial-board .demo-lit{outline:3px solid #f1bd33;z-index:2}.tutorial-board .demo-zero{background:#f6dfa4}.tutorial-board .crate{animation:boxDrop .5s ease-out}.tutorial-board .demo-bad{outline:2px solid #ed5d82}.tutorial-board .pointer{position:absolute;width:18px;height:18px;right:-2px;bottom:-3px;border-radius:50%;background:#f5b93c80;border:2px solid #fff;animation:tap .7s infinite;z-index:10}.chapter-toast{color:var(--pink);font-size:12px}.menu-guide p,.speech p{hyphens:none;overflow-wrap:normal}.clue,.cell,.cat-motion{touch-action:manipulation}@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}@keyframes happy{0%,100%{transform:translateY(0) rotate(0deg)}30%{transform:translateY(-6px) rotate(-5deg)}65%{transform:translateY(-3px) rotate(5deg)}}@keyframes boxDrop{0%{transform:translateY(-10px) scale(.7);opacity:0}75%{transform:translateY(2px) scale(1.06)}100%{transform:none;opacity:1}}@keyframes peek{0%,100%{transform:translateY(1px)}50%{transform:translateY(-2px)}}@keyframes guideBob{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-4px) rotate(.5deg)}}@keyframes confetti{to{transform:translateY(105dvh) rotate(540deg);opacity:0}}@keyframes shake{25%,75%{transform:translateX(-2px)}50%{transform:translateX(2px)}}@keyframes tap{to{transform:scale(1.4);opacity:.4}}@media(max-height:720px){.screen{padding-top:calc(7px + env(safe-area-inset-top));padding-bottom:calc(7px + env(safe-area-inset-bottom))}.home{gap:8px;padding-bottom:calc(18px + env(safe-area-inset-bottom))}.home .logo{font-size:80px}.home h1{font-size:22px;margin-top:9px}.menu{gap:6px}.menu-title h2{font-size:25px}.menu-title br{display:none}.menu-guide{min-height:56px}.menu-guide .francis{width:58px;height:58px}.menu-guide p{font-size:11px}.level-grid{gap:6px;min-height:120px}.game{grid-template-rows:40px 40px minmax(0,1fr) 38px 43px 72px 37px;gap:6px}.logo.small{font-size:43px}.guide .francis{width:65px;height:65px}.speech{padding:7px}.speech p{font-size:10px}.board-shell{padding:6px;border-radius:14px}#board{gap:3px}dialog .francis{width:75px;height:75px}dialog h2{font-size:23px}.tutorial-board{width:min(195px,28dvh);height:min(195px,28dvh)}#modalBody{font-size:12px;margin-bottom:12px}.primary{min-height:43px;padding:10px 14px}}@media(max-height:590px){.menu{gap:4px}.menu-title h2{font-size:22px}.menu header{min-height:38px}.menu .primary{min-height:37px;padding:7px 13px}.secondary{min-height:33px;padding:6px 12px}.level-tile{font-size:19px}.level-tile small{font-size:8px}.level-grid{min-height:105px}.menu-guide{min-height:48px}.menu-guide .francis{width:48px;height:48px}.pages .iconbtn{height:22px}.game{grid-template-rows:34px 35px minmax(0,1fr) 34px 38px 64px 31px;gap:4px}.game .iconbtn{width:30px;height:30px;min-width:30px;font-size:19px}.game .logo.small{font-size:35px}.speech p{font-size:9px}.guide .francis{width:55px;height:55px}.gamebottom .primary{min-height:30px;font-size:12px}.home .logo{font-size:67px}.home h1{font-size:19px}.brandline{font-size:8px}.home .titleblock{padding-top:3px}dialog{padding:14px}.tutorial-board{width:150px;height:150px;margin:6px auto}dialog .francis{width:55px;height:55px}dialog h2{font-size:20px}#modalBody{font-size:11px}dialog .primary{min-height:37px;font-size:13px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.menu-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;flex-shrink:0}.menu-options .secondary{font-size:12px;gap:5px}.collection,.profile{display:flex;flex-direction:column;gap:14px}.collection h2{font-size:36px;margin-top:6px}.collection-intro{font-size:12px;margin:5px 0}.character-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:9px;flex:1;min-height:0}.character-card{background:#fffef8;border:1px solid #d2ddcd;border-bottom:3px solid #c4d6c3;border-radius:15px;position:relative;display:grid;grid-template-columns:46% 54%;grid-template-rows:1fr 1fr;text-align:left;padding:3px;min-height:0;overflow:hidden}.character-card .portrait{grid-row:1/3;height:100%;min-height:0;align-self:center}.portrait>.francis{height:100%;width:100%;aspect-ratio:auto}.character-card b{align-self:end;font:800 21px/1 'Baloo 2';margin-bottom:3px}.character-card small{font-size:9px;align-self:start}.character-card.locked{opacity:1;background:#e8e9de;color:#758475}.character-card.locked .portrait{filter:brightness(0) opacity(.25)}.collection-note{font-size:10px;line-height:1.5;text-align:center;margin:0}.profile-art{flex:1;min-height:0;max-height:420px;width:100%;display:flex;justify-content:center}.profile-art>.cat-sprite{height:100%;width:100%;max-width:350px}.profile-art>.francis{height:100%;width:100%;aspect-ratio:auto}.profile-copy{text-align:center}.profile-copy h2{font-size:49px;margin:5px 0 12px}.profile-copy p{font-size:15px;line-height:1.6;max-width:360px;margin:0 auto 12px;text-wrap:pretty}.profile .primary{margin-bottom:8px}@media(max-height:650px){.collection,.profile{gap:7px}.collection h2{font-size:29px}.character-card b{font-size:19px}.profile-copy h2{font-size:38px;margin:3px 0 6px}.profile-copy p{font-size:12px;line-height:1.45}.collection-note{font-size:9px}}

/* Let the grid grow into the available space, with Francis beside the links. */
.cat-sprite{clip-path:inset(var(--top-cut,0%) 0 0)}
.menu .level-grid{max-height:none}
.menu .menu-guide{
  margin-top:0;
  min-height:88px;
  padding:4px 10px 4px 2px;
  gap:7px;
  background:#e4f3e8;
  border:1px solid #c6dfcf;
  border-radius:16px;
}
.menu .menu-guide .francis{width:90px;height:90px}
.menu .menu-guide p{font-size:14px;line-height:1.35}
.menu .menu-guide b{font-size:11px}
.menu footer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.menu footer a{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  min-height:49px;
  padding:3px;
  border:1px solid #d9e5d7;
  border-radius:11px;
  background:#fffaf0;
  color:var(--ink);
  font-weight:800;
  font-size:clamp(9px,2.75vw,12px);
  line-height:1.15;
  text-align:center;
}
.menu footer a:nth-child(2){background:#f4e8f3;border-color:#ead2e7}
.menu footer a span{color:inherit}
.link-cat{width:34px;height:34px;flex:none}
@media(max-height:720px){
  .menu .menu-guide{min-height:66px;padding-block:2px}
  .menu .menu-guide .francis{width:67px;height:67px}
  .menu .menu-guide p{font-size:12px}
  .menu footer a{min-height:43px}
  .link-cat{width:28px;height:28px}
}
@media(max-height:590px){
  .menu .menu-guide{min-height:51px}
  .menu .menu-guide .francis{width:50px;height:50px}
  .menu .menu-guide p{font-size:11px}
  .menu footer a{min-height:35px}
  .link-cat{width:24px;height:24px}
}