.top{display:grid;gap:5px;max-width:500px;margin:0 auto;padding:9px 11px;background:#fffaf1;border:1px solid #d9b487;border-radius:18px;box-shadow:var(--shadow)}.brand{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 2px}.brand>span{font-size:clamp(22px,6vw,30px);font-weight:1000;line-height:1;letter-spacing:-1px;white-space:nowrap}.brand small{font-weight:900;font-size:clamp(12px,3.4vw,15px);white-space:nowrap}.status{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px;border-top:1px solid #e6ccb0;padding-top:5px}.status span,.status button{border:0;background:transparent;color:var(--ink);font:inherit;font-weight:900}.status span{display:flex;align-items:baseline;gap:3px;font-size:11px}.status strong{font-size:18px}.status button{padding:3px 2px;cursor:pointer;font-size:12px}
:root{--ink:#4b1d0e;--cream:#fff9ef;--tan:#efd0a1;--line:#b8753d;--shadow:0 10px 28px #5a35191d;--raz:#f7c989;--whiskey:#cfe5fa;--catniss:#d9efc8;--daisy:#ffd1dc}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}html,body{margin:0;min-height:100%;background:#f4dfc0;color:var(--ink);font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif}body{min-height:100dvh}.app{width:100%;min-height:100dvh;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));background:radial-gradient(circle at 10% 4%,#fff8e9 0 8%,transparent 18%),linear-gradient(#f8e5c8,#f0d1a5)}
.top{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;align-items:stretch;max-width:500px;margin:0 auto}.brand,.status,.goal,.how,.today,.controls{background:#fffaf1;border:1px solid #d9b487;border-radius:22px;box-shadow:var(--shadow)}.brand{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px;background:linear-gradient(#f2c784,#dda05a);border-color:#a86331}.brand span{font-size:clamp(30px,9vw,56px);font-weight:1000;line-height:.95;letter-spacing:-2px}.brand small{font-weight:800;text-align:center;margin-top:5px}.status{padding:10px;text-align:center}.status>b{display:block;font-size:clamp(13px,3.8vw,19px);margin-bottom:8px}.status>div{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px}.status span,.status button{border:0;background:transparent;font:inherit;font-weight:900}.status span{display:flex;flex-direction:column;font-size:12px}.status strong{font-size:23px}.goal{max-width:500px;margin:10px auto;padding:9px 14px;text-align:center;font-size:clamp(16px,4.4vw,21px);font-weight:950}.game-wrap{width:100%;max-width:500px;margin:0 auto}.board{width:100%;aspect-ratio:1/1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:3px;padding:6px;border:7px solid #9d6236;border-radius:20px;background:#bd8250;box-shadow:inset 0 0 0 2px #e8b878,var(--shadow);touch-action:none}.cell{position:relative;min-width:0;min-height:0;width:100%;height:100%;aspect-ratio:1/1;overflow:hidden;border:1px solid #c8945f;border-radius:7px;background:linear-gradient(135deg,#f3d6a7,#e7bd88)}.asset{position:absolute;inset:4%;width:92%;height:92%;object-fit:contain;object-position:center bottom;pointer-events:none}.awake{inset:2%;width:96%;height:96%;z-index:3}.bed{z-index:1}.sleep{inset:0;width:100%;height:100%;z-index:4}.plant{z-index:2;filter:drop-shadow(0 3px 2px #0002)}
.how,.today{max-width:500px;margin:10px auto 0;padding:10px}.how h2,.today h2{margin:0 0 8px;font-size:20px}.how>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.how p{margin:0;padding:8px;border-right:1px solid #e6ccb0;font-size:clamp(11px,3.2vw,15px);line-height:1.25}.how p:last-child{border-right:0}.how p b{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e3b980;margin-right:4px}.cat-cards{display:flex;gap:7px}.cat-card{flex:1 1 0;min-width:0;overflow:hidden;border:1px solid #ead4bc;border-radius:18px;background:#fff}.cat-card img{display:block;width:100%;height:clamp(92px,27vw,175px);object-fit:contain;object-position:center bottom;padding:4px}.name-pill{display:flex;justify-content:center;align-items:center;gap:5px;padding:7px 4px;font-weight:1000;font-size:clamp(13px,4vw,18px)}.cat-card.whiskey .name-pill{background:var(--whiskey)}.cat-card.catniss .name-pill{background:var(--catniss)}.cat-card.daisy .name-pill{background:var(--daisy)}.cat-card.raz .name-pill{background:var(--raz)}
#gameScreen{padding-bottom:calc(110px + env(safe-area-inset-bottom))}.controls{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr auto;gap:10px;max-width:500px;margin:0 auto;padding:10px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));border-radius:22px 22px 0 0;border-bottom:0;box-shadow:0 -8px 20px #5a35191d}.arrows{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.arrows button,.undo{border:1px solid #d2ad83;border-radius:14px;background:#fffaf1;color:var(--ink);font:inherit;font-weight:1000;box-shadow:0 4px 0 #d4ad7f;font-size:clamp(30px,9vw,44px);min-height:60px}.undo{padding:0 14px;font-size:clamp(16px,4.4vw,20px)}.motto{text-align:right;max-width:500px;margin:8px auto 0;font-weight:900}dialog{border:0;border-radius:24px;width:min(92vw,520px);padding:20px;text-align:center;color:var(--ink)}dialog::backdrop{background:#3c241c88;backdrop-filter:blur(3px)}dialog h2{font-size:32px;margin:0}.sleeping{display:flex;gap:6px}.sleeping img{flex:1 1 0;min-width:0;aspect-ratio:1;object-fit:contain}
@media(max-width:430px){.app{padding-left:0;padding-right:0}.intro{padding-left:5px;padding-right:5px}.top{grid-template-columns:1fr}.brand{padding:8px}.brand small{font-size:11px}.status{padding:7px}.goal{margin-block:7px}.board{gap:2px;padding:4px;border-width:5px}.how{padding:8px}.how>div{gap:3px}.how p{padding:4px;font-size:12px}.how p b{width:22px;height:22px}.controls{grid-template-columns:1fr}.undo{min-height:50px}.motto{text-align:center}#gameScreen{padding-left:5px;padding-right:5px;padding-bottom:calc(190px + env(safe-area-inset-bottom))}}
 @media(max-width:430px){.top{padding:8px}.brand small{font-size:11px}.status{gap:2px}.status span{font-size:10px}.status strong{font-size:16px}.status button{font-size:11px}.goal{margin-block:7px}.board{gap:2px;padding:4px;border-width:5px}.how{padding:8px}.how>div{gap:3px}.how p{padding:4px;font-size:11px}.how p b{width:22px;height:22px}.controls{grid-template-columns:1fr}.undo{min-height:50px}.motto{text-align:center}#gameScreen{padding-bottom:calc(190px + env(safe-area-inset-bottom))}}
@media(max-width:340px){.app{padding-left:5px;padding-right:5px}.cat-card img{height:84px}.name-pill{font-size:12px}.arrows button{min-height:50px}.how h2,.today h2{font-size:17px}}

.intro{max-width:520px;margin:0 auto;height:100dvh;min-height:100dvh;display:flex;flex-direction:column;gap:14px}
.hero{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;background:radial-gradient(circle at 50% 0,#fff8e9 0 20%,transparent 55%),linear-gradient(#f8e5c8,#f0d1a5);border:1px solid #d9b487;border-radius:24px;box-shadow:var(--shadow);padding:22px 14px 0;text-align:center;overflow:hidden}
.brand-logo{font-size:clamp(38px,13vw,62px);font-weight:1000;line-height:.92;letter-spacing:-2px;color:#1c3a63;flex:0 0 auto}
.tagline{font-weight:800;margin:8px 0 14px;flex:0 0 auto}
.hero-cats{flex:1 1 auto;min-height:0;display:flex;justify-content:center;align-items:flex-end;gap:0}
.hero-cats figure{margin:0;flex:1 1 0;min-height:0;max-width:170px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px}
.hero-cats img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;object-position:center bottom}
.hero-cats figcaption{flex:0 0 auto;font-weight:900;font-size:clamp(11px,3.2vw,15px);padding-bottom:6px}
.difficulty-picker{background:#fffaf1;border:1px solid #d9b487;border-radius:22px;box-shadow:var(--shadow);padding:14px}
.difficulty-picker h2{margin:0 0 10px;text-align:center;font-size:19px}
.diff-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.diff-option{display:flex;flex-direction:column;gap:6px}
.diff-btn{border:2px solid #d2ad83;border-radius:16px;background:#fff;color:var(--ink);font:inherit;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.diff-btn .diff-label{font-weight:1000;font-size:clamp(14px,4vw,17px)}
.diff-btn .diff-sub{font-size:12px;font-weight:700;opacity:.75}
.diff-btn .diff-sub.completed{display:flex;flex-direction:column;align-items:center;gap:1px}.diff-btn .done-stars{font-size:14px;line-height:1}.diff-btn .done-label{font-size:11px;line-height:1}
.diff-btn.selected{background:linear-gradient(#f2c784,#dda05a);border-color:#a86331;box-shadow:0 4px 0 #a86331}
.diff-share-btn{border:0;border-radius:12px;background:#1c3a63;color:#fff;font:inherit;font-weight:800;font-size:12px;padding:6px 4px;cursor:pointer}
.intro-actions{display:flex;flex-direction:column;gap:10px}
.intro-secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.intro-secondary-actions button{min-width:0}
.play-btn,.stats-btn{border:0;border-radius:16px;font:inherit;font-weight:1000;padding:16px;cursor:pointer;box-shadow:var(--shadow)}
.play-btn{background:#1c3a63;color:#fff;font-size:18px;display:flex;justify-content:center;align-items:center;gap:8px}
.stats-btn{background:#e9e2d6;color:var(--ink)}
.stars{display:flex;justify-content:center;gap:6px;font-size:34px;line-height:1;margin:4px 0}
.stars .filled{color:#e8a300}.stars .empty{color:#e3d4bc}
.result-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px}
#shareBtn{border:0;border-radius:16px;background:#1c3a63;color:#fff;font:inherit;font-weight:1000;font-size:clamp(16px,4.4vw,19px);padding:16px;cursor:pointer;box-shadow:0 5px 0 #0e2340}
.secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.secondary-actions button{border:1px solid #d2ad83;border-radius:14px;background:#fffaf1;color:var(--ink);font:inherit;font-weight:1000;box-shadow:0 4px 0 #d4ad7f;font-size:clamp(12px,3.4vw,15px);padding:10px 4px;cursor:pointer;min-height:48px}
#closeStats{display:block;width:100%;border:0;border-radius:16px;background:#1c3a63;color:#fff;font:inherit;font-weight:1000;box-shadow:0 5px 0 #0e2340;font-size:clamp(12px,3.4vw,15px);padding:10px 4px;cursor:pointer;min-height:48px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.stats-grid .stat{background:#fdf3e2;border:1px solid #ead4bc;border-radius:14px;padding:10px}
.stats-grid .stat strong{display:block;font-size:26px}
.stats-grid .stat span{font-size:12px;font-weight:800}
.tutorial-progress{margin:4px 0 10px;font-size:12px;font-weight:900;opacity:.7}.tutorial-step{display:flex;flex-direction:column;gap:5px;min-height:62px;padding:10px;border-radius:14px;background:#fdf3e2;border:1px solid #ead4bc;text-align:left}.tutorial-step b{font-size:16px}.tutorial-step span{font-size:13px;line-height:1.25}.tutorial-board-wrap{width:min(100%,320px);margin:12px auto 0}.tutorial-board-wrap .board{border-width:5px;border-radius:16px}.tutorial-controls{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}.tutorial-controls button{border:1px solid #d2ad83;border-radius:10px;background:#fffaf1;color:var(--ink);font:inherit;font-size:28px;font-weight:1000;min-height:44px;box-shadow:0 3px 0 #d4ad7f;cursor:pointer}.tutorial-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.tutorial-actions button,#tutorialClose{border:1px solid #d2ad83;border-radius:14px;background:#fffaf1;color:var(--ink);font:inherit;font-weight:1000;box-shadow:0 4px 0 #d4ad7f;font-size:clamp(12px,3.4vw,15px);padding:10px 4px;cursor:pointer;min-height:48px}.tutorial-actions .primary-action{border:0;background:#1c3a63;color:#fff;box-shadow:0 5px 0 #0e2340}.tutorial-actions button:disabled{opacity:.5;cursor:default}.tutorial-actions+#tutorialClose{display:block;width:100%;margin-top:10px}
.how summary{display:flex;align-items:center;justify-content:space-between;margin:0;font-size:20px;font-weight:1000;cursor:pointer;list-style:none}.how summary::-webkit-details-marker{display:none}.how summary::after{content:'+';font-size:24px;line-height:.8}.how[open] summary{margin-bottom:8px}.how[open] summary::after{content:'−'}.how>div{display:flex;flex-direction:column;gap:0}.how p{display:flex;align-items:center;margin:0;padding:10px 4px;border-right:0;border-bottom:1px solid #e6ccb0;font-size:clamp(13px,3.4vw,16px)}.how p:last-child{border-bottom:0}.how p b{display:inline-grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:#e3b980;margin-right:10px}
.top{grid-template-columns:1fr;align-items:initial}.top .brand{display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;padding:0 2px;background:transparent;border:0}.top .brand>span{font-size:clamp(22px,6vw,30px);line-height:1;letter-spacing:-1px}.top .brand small{margin-top:0;font-size:clamp(12px,3.4vw,15px);white-space:nowrap}.top .brand small span{font-size:inherit;letter-spacing:0}.top .status{padding:5px 0 0;text-align:left}.top .status>div{display:contents}.top .status span{display:flex;flex-direction:row;align-items:baseline;gap:3px;font-size:11px}.top .status strong{font-size:18px}.top .status button{padding:3px 2px;font-size:12px}
.top .brand{justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;background:transparent;border:0;box-shadow:none}.top .status{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-content:initial;gap:4px;padding:5px 0 0;background:transparent;border:0;box-shadow:none}.top .status span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:38px;padding:5px 2px;text-align:center;line-height:1.1;font-size:10px}.top .status strong{font-size:16px}.top .status button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:38px;padding:5px 2px;border:1px solid #d2ad83;border-radius:10px;background:#fdf3e2;box-shadow:0 2px 0 #d4ad7f;cursor:pointer;text-align:center;line-height:1.1;font-size:10px;white-space:normal}
.how>div{display:flex;flex-direction:column;gap:0}.how p{display:flex;align-items:center;margin:0;padding:10px 4px;border-right:0;border-bottom:1px solid #e6ccb0}.how p:last-child{border-bottom:0}
@media(max-width:380px){.hero{padding-top:16px}.diff-btn{padding:8px 2px}}
@media(max-height:700px){.hero-cats figure{max-width:130px}}