@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--paper:#faf8f4;--ink:#34343b;--muted:#8a8790;--purple:#796492;--light-purple:#eee8f4;--line:#e9e5df;--sans:'DM Sans',sans-serif;--display:'Manrope',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #8f70ad;outline-offset:4px}button{border:0;background:none}svg{width:24px;height:24px}button>svg:not(:has(use)){fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.page-shell{max-width:1200px;margin:auto;padding:0 58px}.site-header{height:112px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:22px}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-family:var(--display);font-size:28px;font-weight:800;letter-spacing:-1.3px}.brand-icon{width:44px;height:44px;border-radius:15px;background:#ece5f2;display:grid;place-items:center}.brand-icon svg{width:35px;height:35px}.brand-dot{color:#b39acb}.header-note{color:#96909a;font-size:12px;letter-spacing:.2px}.site-header nav{margin-left:auto;display:flex;align-items:center;gap:17px}.nav-button{padding:10px 16px;border:1px solid #e4ded5;border-radius:12px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}.grid-icon{font-size:21px;line-height:1;color:#77717e}.icon-button{height:40px;width:40px;display:grid;place-items:center;border-radius:50%;color:#817889}.icon-button:hover,.nav-button:hover{background:var(--light-purple)}main{display:grid;grid-template-columns:minmax(275px,1fr) minmax(400px,510px);gap:65px;align-items:start;padding:57px 0 35px}.intro{padding-top:21px}.eyebrow,.section-label{font-size:9px;font-weight:700;letter-spacing:1.7px;color:#938398}.eyebrow{display:flex;gap:7px;align-items:center}.tiny-star{font-size:19px;color:#a88ab9}h1{font-family:var(--display);font-size:clamp(37px,4vw,47px);font-weight:800;line-height:1.26;letter-spacing:-2px;margin:20px 0 19px;position:relative}h1>span{color:#8d70a6}.title-flourish{width:123px;height:15px;position:absolute;bottom:-10px;left:182px;fill:none;stroke:#c6b3d5;stroke-width:2.5;stroke-linecap:round}.intro-copy{color:#8a8590;font-size:13px;line-height:1.9;margin-bottom:37px}.rules .section-label{color:#8d8890;font-size:9px;letter-spacing:1.5px}.rule{display:flex;align-items:center;gap:16px;margin-top:22px}.rule h2{font-size:12px;font-weight:600;margin:0 0 5px}.rule p{font-size:11px;color:#928c94;margin:0}.rule-illustration{width:43px;height:43px;flex-shrink:0;display:grid;gap:3px;padding:4px;background:#fff;border-radius:9px;transform:rotate(-4deg)}.rule-illustration i{font-style:normal;border-radius:3px;display:grid;place-items:center;font-size:11px}.color-rule{grid-template-columns:repeat(2,1fr)}.color-rule i{background:#cfb4e3}.color-rule i:nth-child(2){background:#f3ce81}.color-rule i:nth-child(3){background:#a9d4bd}.row-rule,.space-rule{grid-template-columns:repeat(3,1fr);transform:rotate(3deg)}.row-rule i{background:#e8e0ef}.row-rule i:nth-child(2),.row-rule i:nth-child(5),.row-rule i:nth-child(8){background:#bfa5d3}.row-rule i:nth-child(1),.row-rule i:nth-child(3){background:#bfa5d3}.space-rule{transform:rotate(-3deg)}.space-rule i{background:#eae4dc;color:#998a82;font-size:10px}.space-rule i:nth-child(5){background:#d5c1e5;color:#41404c}.journey{display:flex;gap:13px;margin-top:40px;padding:19px 17px;background:#f0ece7;border-radius:14px;max-width:315px}.journey-paw{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e6ddeb;color:#9a82ad;flex-shrink:0}.journey-paw svg{width:17px;height:17px}.journey>div{flex:1}.journey strong{font-size:11px;font-weight:600}.journey p{font-size:10px;color:#9b9098;margin:7px 0 13px}.journey-track{height:4px;background:#e0d9e3;border-radius:5px;overflow:hidden}.journey-track span{display:block;height:100%;background:#aa8fc0;transition:width .4s}.game-card{background:#fffdfb;border:1px solid #ede8e1;border-radius:23px;padding:26px;box-shadow:0 9px 32px #55403505}.game-heading{display:flex;align-items:center;justify-content:space-between}.game-heading .section-label{font-size:8px;letter-spacing:1.6px;color:#a69aa8}.level-title{font-family:var(--display);font-size:25px;font-weight:800;letter-spacing:-.8px;margin-top:7px;display:flex;align-items:center;gap:7px}.difficulty{font-family:var(--sans);font-size:9px;font-weight:500;letter-spacing:.1px;color:#648d76;background:#eaf3eb;padding:5px 9px;border-radius:20px;margin-left:7px}.reset-button{color:#9b929c;background:#f7f4ef;width:34px;height:34px}.reset-button svg{width:17px;height:17px}.game-stats{display:flex;align-items:center;justify-content:space-between;margin:24px 0 18px}.cats-count{display:flex;align-items:center;gap:6px}.cats-count>svg{width:30px;height:30px}.cats-count strong{font-size:18px;font-weight:600}.count-total{color:#b6aeb7;font-size:15px;font-weight:400}.stat-caption{color:#a29aa4;font-size:9px;letter-spacing:.2px}.cats-count>.stat-caption{margin-left:4px}.stat-right{display:flex;gap:22px}.stat-right>div{display:flex;flex-direction:column;gap:5px;align-items:flex-end}.stat-right .stat-caption{font-size:8px;letter-spacing:1px}.stat-right strong{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}.board-wrap{padding:6px;background:#f6f3ef;border-radius:15px}#board{display:grid;gap:4px;aspect-ratio:1}.cell{position:relative;width:100%;min-width:0;aspect-ratio:1;border-radius:7px;background:var(--region-color);display:grid;place-items:center;padding:0;transition:filter .13s,transform .15s}.cell:hover{filter:brightness(1.045);z-index:1;transform:scale(1.025)}.cell:focus-visible{outline:3px solid var(--ink);outline-offset:-4px;z-index:2}.cell .cat-icon{width:75%;height:75%;filter:drop-shadow(0 2px 1px #3332);animation:cat-pop .25s cubic-bezier(.2,1.5,.4,1)}.cell .mark{font-family:var(--display);font-size:28px;color:#55434b66;font-weight:400;line-height:1}.cell .region-letter{position:absolute;top:5px;left:7px;font-size:9px;color:#352c42b0}.cell.conflict{box-shadow:inset 0 0 0 3px #b24f61}.cell.hinted{animation:hint-pulse 1s ease-in-out 3}.board-feedback{min-height:39px;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;color:#9c919f;line-height:1.5;padding:8px 2px}.board-feedback.error{color:#b24f61}.board-feedback.success{color:#658d75}.game-controls{display:flex;align-items:center;gap:10px}.mode-switch{display:flex;background:#f2eef4;border-radius:10px;padding:4px;margin-right:auto}.mode-button{display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;padding:8px 10px;border-radius:7px;font-size:10px;color:#9d90a6}.mode-button svg{width:13px;height:13px}.mode-button.active{background:white;color:#806492;box-shadow:0 2px 6px #6153690b;font-weight:600}.x-icon{font-size:20px;line-height:12px}.control-button{display:flex;align-items:center;gap:6px;font-size:10px;color:#958897;padding:8px 4px}.control-button svg{width:15px;height:15px}.hint-button{display:flex;align-items:center;gap:6px;font-size:10px;color:#856c46;background:#f8f0dd;padding:11px 14px;border-radius:10px;font-weight:600}.hint-button:hover{background:#f2e6c6}.hint-button svg{width:15px;height:15px}.play-tip{text-align:center;font-size:10px;color:#a79aaa;margin:17px 0 20px}.play-tip>span{color:#bba4ca;margin-right:5px}.level-nav{display:flex;align-items:center;justify-content:center;gap:22px}.level-arrow{width:32px;height:32px;border-radius:50%;border:1px solid #e6e0d9;color:#91819c;font-size:16px}.level-arrow:hover{background:var(--light-purple)}.level-nav>div{text-align:center;min-width:140px}.level-nav>div>span{color:#9e919e;font-size:10px}.level-dots{display:flex;justify-content:center;gap:5px;margin-top:10px}.level-dot{width:5px;height:5px;border-radius:50%;background:#e4dce8}.level-dot.current{width:16px;border-radius:5px;background:#ac91c1}.level-dot.complete{background:#acccb8}footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:24px 0 26px;font-size:9px;color:#a9a0a6}.footer-right{display:flex;align-items:center;gap:9px}.footer-right svg{width:12px;height:12px;color:#b9a3c7}dialog{border:1px solid #eee7e0;border-radius:22px;padding:30px;width:min(520px,calc(100vw - 32px));color:var(--ink);background:var(--paper);box-shadow:0 20px 80px #31283f22}dialog::backdrop{background:#37304055;backdrop-filter:blur(5px)}.dialog-header{display:flex;align-items:center;justify-content:space-between}.dialog-header h2{font-family:var(--display);font-size:27px;letter-spacing:-1px;margin:12px 0}.close-button{width:32px;height:32px;border-radius:50%;font-size:24px;line-height:1;background:#eee8e2;color:#988998}.dialog-copy{color:#8e8394;font-size:12px;margin:0 0 22px}.dialog-footnote{font-size:10px;color:#9c929e;text-align:center;margin:24px 0 0}.picker-chapter{font-size:9px;letter-spacing:1px;color:#918299;margin:19px 0 9px;display:flex;justify-content:space-between}.picker-row{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.picker-level{aspect-ratio:1;border-radius:10px;background:#eee9f1;font-size:13px;color:#8b739b;position:relative}.picker-level.current{box-shadow:inset 0 0 0 2px #a286b6;background:#e6daee}.picker-level.done{background:#e2eee3;color:#6b8e74}.picker-level.done:after{content:'✓';position:absolute;right:5px;bottom:4px;font-size:9px}.picker-level:hover{filter:brightness(.96)}.setting{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--line)}.setting strong{display:block;font-size:13px;font-weight:500}.setting small{display:block;color:#9a8fa0;font-size:11px;margin-top:6px}.setting input{appearance:none;width:38px;height:22px;border-radius:20px;background:#d9d1db;cursor:pointer;position:relative;flex-shrink:0}.setting input:before{content:'';display:block;width:16px;height:16px;border-radius:50%;background:white;position:absolute;top:3px;left:3px;transition:left .2s}.setting input:checked{background:#a28ab5}.setting input:checked:before{left:19px}.keyboard-tip{margin-top:24px;font-size:12px}.keyboard-tip p{font-size:11px;color:#95899d;line-height:1.8}.win-dialog{text-align:center;max-width:410px;padding:35px}.win-dialog>.close-button{position:absolute;right:15px;top:15px}.win-cat{position:relative;margin:5px auto 20px;width:110px;height:110px;background:#eee4f5;border-radius:50%;display:grid;place-items:center}.win-cat svg{height:85px;width:85px}.win-cat>span{position:absolute;color:#c8aa6a;font-size:30px;top:5px;right:-14px}.win-cat>span:last-child{left:-14px;right:auto;top:60px}.win-dialog .eyebrow{justify-content:center;font-size:8px}.win-dialog h2{font-family:var(--display);letter-spacing:-1px;font-size:31px;margin:13px 0}.win-dialog>p{font-size:12px;color:#97899c;line-height:1.7}.win-stats{display:flex;justify-content:center;gap:50px;margin:24px 0}.win-stats>div{display:flex;flex-direction:column;gap:8px}.win-stats span{font-size:8px;letter-spacing:1.2px;color:#a391ac}.win-stats strong{font-size:23px;font-family:var(--display)}.primary-button{width:100%;padding:15px 18px;border-radius:12px;background:#8c71a0;color:white;font-size:12px;display:flex;justify-content:space-between}.primary-button:hover{background:#785d8b}.text-button{color:#9b87a9;font-size:11px;margin-top:18px}.no-motion *, .no-motion *:before{animation:none!important;transition:none!important}@keyframes cat-pop{from{transform:scale(.6)}to{transform:scale(1)}}@keyframes hint-pulse{50%{box-shadow:inset 0 0 0 4px #fff,0 0 0 3px #9d78b9}}@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}@media(min-width:1400px){.page-shell{padding-top:15px}main{padding-top:70px;padding-bottom:50px}}@media(max-width:1000px){.page-shell{padding:0 32px}main{gap:35px;grid-template-columns:minmax(235px,1fr) minmax(360px,460px)}h1{font-size:38px}.title-flourish{left:146px;width:110px}.game-card{padding:22px}.header-note{display:none}.cats-count>.stat-caption{font-size:8px}}@media(max-width:760px){.page-shell{max-width:540px;padding:0 20px}.site-header{height:83px}.brand{font-size:25px}.brand-icon{width:36px;height:36px;border-radius:12px}.brand-icon svg{width:29px;height:29px}.site-header nav{gap:6px}.nav-button{padding:8px 11px}.icon-button{width:34px;height:34px}main{display:flex;flex-direction:column;gap:26px;padding:27px 0}.intro{padding:0;width:100%}.intro>.eyebrow{font-size:8px}h1{font-size:35px;line-height:1.18;margin:13px 0 14px}h1 br{display:none}.title-flourish{left:auto;right:18px;width:102px;bottom:-10px}.intro-copy{font-size:12px;margin:0;line-height:1.7}.intro-copy br{display:none}.rules{margin-top:20px}.rules>.section-label{display:none}.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.rule{flex-direction:column;gap:7px;margin:0;background:#f0ece6;padding:10px 7px;border-radius:12px;text-align:center;align-items:center}.rule-illustration{width:30px;height:30px;padding:3px;gap:2px}.rule h2{font-size:9px;line-height:1.4;margin:0}.rule p{display:none}.rule-illustration i{font-size:7px}.journey{display:none}.game-area{width:100%}.game-card{padding:20px;border-radius:20px}.game-stats{margin:20px 0 16px}.cell{border-radius:6px}.play-tip{font-size:9px;line-height:1.6;margin:13px 0 17px}footer{font-size:8px;padding:18px 0;justify-content:center}.footer-right{display:none}#board{gap:4px}.game-controls{gap:8px}.mode-button{padding:8px 9px}.hint-button{padding:10px 12px}.control-button{padding:8px 3px}}@media(max-width:360px){.page-shell{padding:0 12px}h1{font-size:30px}.game-card{padding:15px}.cats-count>.stat-caption{display:none}.control-button span{display:none}.title-flourish{right:8px;width:90px}.rule h2{font-size:8px}}

/* Every cat has its own blink timing; existing cats keep animating between moves. */
.cell{touch-action:manipulation;user-select:none;-webkit-user-select:none}
.cat-eyes{transform-box:fill-box;transform-origin:center;animation:cat-blink 5s var(--blink-delay,0s) infinite}
.cat-placement{display:block;width:75%;height:75%;pointer-events:none;animation:cat-pop .25s cubic-bezier(.2,1.5,.4,1)}
.cell .cat-icon{width:100%;height:100%;animation:cat-idle 4s var(--idle-delay,0s) ease-in-out infinite}
.gesture-guide{display:flex;align-items:center;gap:6px;margin-right:auto;padding:11px 12px;border-radius:10px;background:#f2eef4;color:#8b729b;font-size:10px;white-space:nowrap}
.gesture-guide svg{width:13px;height:13px}.gesture-separator{padding:0 4px;color:#b4a3bf}
@keyframes cat-blink{0%,43%,47%,78%,82%,100%{transform:scaleY(1)}45%,80%{transform:scaleY(.08)}}
@keyframes cat-idle{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}50%{transform:translateY(-1.5px) rotate(-1deg) scale(1.025)}}
@media(max-width:390px){.gesture-guide{padding:10px 7px;gap:4px;font-size:9px}.gesture-separator{padding:0 1px}.game-controls{gap:6px}}
