:root{--paper: #f8f0e0;--paper-2: #f1e5cc;--ink: #4a3b2f;--ink-soft: #7a6654;--sage: #7f9e8a;--sage-d: #5f7f6b;--terra: #c66a4a;--mustard: #d9a441;--rose: #e48a9a;--shadow: rgba(60, 40, 25, .28);--hand: "Patrick Hand", "Comic Sans MS", cursive;--script: "Caveat", "Patrick Hand", cursive;--round: "Fredoka", "Patrick Hand", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#1c1a18;color:var(--ink);font-family:var(--hand);user-select:none;-webkit-user-select:none}canvas#game{position:fixed;inset:0;width:100vw;height:100vh;display:block;outline:none;cursor:grab}canvas#game:active{cursor:grabbing}.hidden{display:none!important}.paper{background:radial-gradient(120% 90% at 20% 10%,#ffffff8c,#fff0 60%),repeating-linear-gradient(0deg,#785a3c06 0 2px,#0000 2px 4px),var(--paper);border:2px solid rgba(74,59,47,.85);border-radius:14px;box-shadow:5px 6px 0 var(--shadow)}.paper.inset{box-shadow:inset 0 2px 8px #503c281f;border-width:1.5px}.tilt-l{transform:rotate(-1.2deg)}.tilt-r{transform:rotate(1deg)}.key{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 7px;border:2px solid var(--ink);border-radius:8px;background:#fff8ec;box-shadow:2px 3px 0 var(--shadow);font-family:var(--round);font-weight:600;font-size:15px;color:var(--ink)}.key.small{min-width:22px;height:22px;font-size:12px;border-radius:6px;box-shadow:1px 2px 0 var(--shadow)}.btn{font-family:var(--hand);font-size:20px;color:var(--ink);background:#fff7e8;border:2px solid var(--ink);border-radius:12px;padding:8px 18px;box-shadow:3px 4px 0 var(--shadow);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .2s}.btn:hover{transform:translate(-1px,-2px) rotate(-.6deg);box-shadow:4px 6px 0 var(--shadow);background:#fffaf0}.btn:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--shadow)}.btn.big{font-size:24px;padding:12px 22px;width:100%}.btn.alt{background:#e8f0e2}.btn.small{font-size:16px;padding:4px 12px}.btn.ghost{background:transparent;box-shadow:none}.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:50}#loading{background:radial-gradient(circle at 50% 40%,#f8efdf,#e9dcc3 70%,#d9c7a6);z-index:100;transition:opacity .8s ease}#loading.fade-out{opacity:0;pointer-events:none}.loading-inner{text-align:center}.paw-loader{font-size:56px;animation:bob 1.2s ease-in-out infinite}.loading-text{font-family:var(--script);font-size:38px;margin-top:8px}.dots:after{content:"";animation:dots 1.4s steps(4) infinite}.loading-bar{width:260px;height:14px;border:2px solid var(--ink);border-radius:10px;margin:18px auto 0;overflow:hidden;background:#fff8ec}#loading-fill{height:100%;width:0%;background:repeating-linear-gradient(45deg,var(--sage) 0 10px,var(--sage-d) 10px 20px);transition:width .3s ease}@keyframes bob{0%,to{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-10px) rotate(6deg)}}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}#title{background:linear-gradient(180deg,#1e181400,#1e181440)}.title-card{padding:34px 44px 26px;width:min(480px,calc(100vw - 32px));text-align:center;animation:pop-in .6s cubic-bezier(.2,1.4,.4,1) both}.title-kicker{font-family:var(--script);font-size:28px;color:var(--ink-soft)}.title-card h1{font-family:var(--script);font-weight:700;font-size:74px;margin:0;line-height:.95;color:var(--ink);text-shadow:3px 3px 0 rgba(217,164,65,.35)}.title-sub{font-size:20px;color:var(--ink-soft);margin:6px 0 22px;letter-spacing:1px}.title-buttons{display:flex;flex-direction:column;gap:12px}.title-hint{margin-top:18px;font-size:15px;color:var(--ink-soft)}@keyframes pop-in{0%{opacity:0;transform:translateY(20px) scale(.92) rotate(-3deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(-1.2deg)}}#hud{position:fixed;inset:0;pointer-events:none;z-index:10}#hud>*{pointer-events:auto}#hud .prompt,#hud #crosshair{pointer-events:none}.prompt{position:fixed;left:0;top:0;display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;background:#f8f0e0f0;border:2px solid var(--ink);border-radius:999px;box-shadow:3px 4px 0 var(--shadow);font-size:19px;white-space:nowrap;transform:translate(-50%,-100%);transition:opacity .15s}.prompt.alt{background:#e8f0e2f0}.prompt.alt .key{background:#eaf3e4}#crosshair{position:fixed;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:2px solid rgba(255,250,240,.9);box-shadow:0 0 0 1.5px #3c281e80}#crosshair.active{width:18px;height:18px;margin:-9px 0 0 -9px;border-color:#ffd6e0}#side-buttons{position:fixed;right:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}.side-btn{width:50px;height:50px;font-size:24px;background:var(--paper);border:2px solid var(--ink);border-radius:12px;box-shadow:3px 4px 0 var(--shadow);cursor:pointer;transition:transform .12s ease}.side-btn:nth-child(odd){transform:rotate(-2deg)}.side-btn:nth-child(2n){transform:rotate(1.5deg)}.side-btn:hover{transform:rotate(0) translateY(-2px) scale(1.06)}.side-btn.on{background:#e5efdc}.mode-badge{position:fixed;left:16px;top:16px;padding:6px 16px;font-family:var(--script);font-size:30px;transform:rotate(-2deg)}.panel{position:fixed;padding:14px 18px}#joys{left:16px;top:74px;width:260px}#joys h3{font-family:var(--script);font-size:28px;margin:0 0 6px}#joys ul{list-style:none;padding:0;margin:0}#joys li{font-size:18px;padding:3px 0 3px 28px;position:relative}#joys li:before{content:"";position:absolute;left:2px;top:7px;width:16px;height:16px;border:2px solid var(--ink);border-radius:5px;background:#fff8ec}#joys li.done{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:var(--terra)}#joys li.done:before{background:var(--sage)}#joys li.done:after{content:"✓";position:absolute;left:5px;top:1px;color:#fff;font-family:var(--round);font-weight:600;font-size:15px}.drink-hud{position:fixed;left:16px;bottom:16px;padding:10px 14px;width:220px;transform:rotate(-1deg)}.drink-name{font-family:var(--script);font-size:26px;line-height:1}.drink-meter{margin:8px 0;height:12px;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:#fff8ec}.drink-fill{height:100%;width:100%;background:linear-gradient(90deg,#9cc77a,#b8d99a);transition:width .4s ease}.drink-help{font-size:15px;color:var(--ink-soft)}#toast-wrap{position:fixed;top:18px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none!important}.toast{padding:8px 18px;background:var(--paper);border:2px solid var(--ink);border-radius:12px;box-shadow:3px 4px 0 var(--shadow);font-size:20px;animation:toast-in .4s cubic-bezier(.2,1.4,.4,1) both}.toast.out{animation:toast-out .4s ease both}@keyframes toast-in{0%{opacity:0;transform:translateY(-14px) scale(.9)}to{opacity:1;transform:none}}@keyframes toast-out{to{opacity:0;transform:translateY(-10px) scale(.95)}}.dialogue{position:fixed;left:50%;bottom:28px;transform:translate(-50%);width:min(720px,calc(100vw - 32px))}.dialogue-name{display:inline-block;margin-left:22px;padding:4px 18px 6px;background:#8fb0c9;color:#fff;border:2px solid var(--ink);border-bottom:none;border-radius:10px 10px 0 0;font-family:var(--round);font-weight:600;font-size:20px;letter-spacing:1px;transform:rotate(-1.5deg) translateY(4px);box-shadow:3px 0 0 var(--shadow)}.dialogue-box{position:relative;padding:18px 64px 18px 24px;min-height:92px;transform:rotate(.4deg)}.dialogue-text{font-size:23px;line-height:1.35;min-height:32px}.dialogue-choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.dialogue-choices .btn{font-size:18px;padding:6px 14px}.dialogue-next{position:absolute;right:14px;bottom:14px;width:40px;height:40px;font-size:18px;border:2px solid var(--ink);border-radius:10px;background:#fff;color:#5d8fc4;box-shadow:2px 3px 0 var(--shadow);cursor:pointer;animation:nudge 1.2s ease-in-out infinite}@keyframes nudge{0%,to{transform:translate(0)}50%{transform:translate(3px)}}.pet-card{position:fixed;right:84px;bottom:18px;width:230px;padding:12px 14px;transform:rotate(1deg)}.pet-name{font-family:var(--script);font-size:32px;line-height:1}.pet-breed{font-size:16px;color:var(--ink-soft);margin:2px 0 8px}.pet-mood{display:flex;align-items:center;gap:8px;font-size:15px}.meter{flex:1;height:10px;border:2px solid var(--ink);border-radius:6px;overflow:hidden;background:#fff8ec}.meter-fill{height:100%;width:50%;background:linear-gradient(90deg,#f4a3b8,#e48a9a);transition:width .3s}.pet-actions{margin-top:8px;font-size:15px;color:var(--ink-soft);line-height:1.5}.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:#1e161052;backdrop-filter:blur(2px)}.modal-card{position:relative;width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow-y:auto;padding:20px 26px 24px;animation:pop-in .45s cubic-bezier(.2,1.3,.4,1) both}.modal-card.small{width:min(460px,calc(100vw - 32px))}.modal-card h2{font-family:var(--script);font-size:42px;margin:0 0 10px}.modal-card h3{font-family:var(--script);font-size:30px;margin:14px 0 8px}.modal-close{position:absolute;right:14px;top:10px;width:38px;height:38px;font-size:26px;line-height:1;border:2px solid var(--ink);border-radius:10px;background:#fff8ec;cursor:pointer;box-shadow:2px 3px 0 var(--shadow)}.field{margin:10px 0}.field>label{display:block;font-size:18px;margin-bottom:6px;color:var(--ink-soft)}.field.row{display:flex;align-items:center;justify-content:space-between}.field.row>label{margin:0}.field input[type=text],.field input:not([type]){font-family:var(--hand);font-size:20px;padding:6px 12px;border:2px solid var(--ink);border-radius:10px;background:#fffaf0;color:var(--ink);width:220px}.field input[type=range]{width:100%;accent-color:var(--sage-d)}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{font-family:var(--hand);font-size:17px;padding:5px 12px;border:2px solid var(--ink);border-radius:999px;background:#fffaf0;color:var(--ink);cursor:pointer;box-shadow:2px 2px 0 var(--shadow);display:inline-flex;align-items:center;gap:6px}.chip.active{background:var(--sage);color:#fff}.chip .swatch{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ink);display:inline-block}.toggle{font-family:var(--round);font-weight:600;min-width:64px;padding:4px 12px;border:2px solid var(--ink);border-radius:999px;background:#fffaf0;cursor:pointer;color:var(--ink)}.toggle.on{background:var(--sage);color:#fff}.controls-help{margin-top:14px;font-size:16px;color:var(--ink-soft);line-height:1.6}.pet-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:16px}.pet-tile{position:relative;padding:10px 12px;border:2px solid var(--ink);border-radius:12px;background:#fffaf0;box-shadow:2px 3px 0 var(--shadow)}.pet-tile:nth-child(odd){transform:rotate(-.8deg)}.pet-tile:nth-child(2n){transform:rotate(.8deg)}.pet-tile .t-name{font-family:var(--script);font-size:28px;line-height:1}.pet-tile .t-breed{font-size:15px;color:var(--ink-soft)}.pet-tile .t-swatches{display:flex;gap:4px;margin-top:6px}.pet-tile .t-swatches span{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink)}.pet-tile .t-buttons{position:absolute;right:8px;top:8px;display:flex;gap:4px}.pet-tile .t-buttons button{border:1.5px solid var(--ink);border-radius:8px;background:#fff;cursor:pointer;font-size:14px;padding:2px 6px}.pet-editor{padding:14px 18px}.editor-buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:12px}#focus-ui{position:fixed;inset:0;z-index:20;pointer-events:none;transition:opacity .8s ease}#focus-ui.idle{opacity:0}#focus-ui.idle *{cursor:none}#focus-ui>*{pointer-events:auto}.focus-top{position:fixed;left:28px;top:22px;color:#fff8ec;text-shadow:0 2px 10px rgba(0,0,0,.35);pointer-events:none!important}.focus-clock{font-family:var(--round);font-weight:500;font-size:54px;line-height:1}.focus-place{font-family:var(--script);font-size:28px;opacity:.9}.focus-widget{position:fixed;right:24px;bottom:24px;width:270px;padding:14px 16px;text-align:center;transform:rotate(-.8deg)}.pomo-label{font-family:var(--script);font-size:26px;color:var(--ink-soft);line-height:1}.pomo-time{font-family:var(--round);font-size:52px;font-weight:500;line-height:1.1}.pomo-buttons{display:flex;justify-content:center;gap:8px;margin:6px 0 8px}.pomo-modes{display:flex;justify-content:center;gap:6px}.pomo-modes .chip{font-size:14px;padding:3px 9px}.focus-row{display:flex;justify-content:space-between;margin-top:12px}.icon-btn{width:36px;height:36px;font-size:17px;border:2px solid var(--ink);border-radius:10px;background:#fffaf0;cursor:pointer;box-shadow:2px 2px 0 var(--shadow)}.icon-btn.on{background:#e5efdc}.now-playing{margin-top:10px;font-size:15px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#fade{position:fixed;inset:0;background:#f8f0e0;opacity:0;pointer-events:none;z-index:60;transition:opacity .6s ease}#fade.on{opacity:1}.emote{position:fixed;pointer-events:none;font-size:26px;transform:translate(-50%,-50%);animation:float-up 1.6s ease-out forwards;z-index:9;text-shadow:0 2px 4px rgba(0,0,0,.15)}@keyframes float-up{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}to{opacity:0;transform:translate(-50%,-260%) scale(.9)}}@media (max-width: 640px){.title-card h1{font-size:54px}#side-buttons{right:8px;gap:6px}.side-btn{width:42px;height:42px;font-size:20px}.focus-widget{right:12px;bottom:12px;width:calc(100vw - 24px)}#joys{width:calc(100vw - 100px)}.pet-card{right:60px}}#touch-controls{position:fixed;inset:auto 0 0;height:0;pointer-events:none}#touch-controls.hidden,body:not(.touch-mode) #touch-controls{display:none}.touch-stick{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));width:150px;height:150px;display:flex;align-items:center;justify-content:center;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none}.touch-stick.left{left:calc(14px + env(safe-area-inset-left))}.touch-stick.right{right:calc(14px + env(safe-area-inset-right))}.touch-base{width:118px;height:118px;border-radius:50%;background:#f8f0e06b;border:2px solid rgba(74,59,47,.55);box-shadow:2px 3px 0 var(--shadow),inset 0 0 18px #fffaf059;display:flex;align-items:center;justify-content:center;transition:background .15s}.touch-stick.active .touch-base{background:#f8f0e099}.touch-knob{width:54px;height:54px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);box-shadow:2px 3px 0 var(--shadow)}.touch-stick.active .touch-knob{background:#fff8ec}.touch-label{position:absolute;bottom:-2px;font-size:14px;color:var(--paper);text-shadow:0 1px 2px rgba(40,25,15,.8);pointer-events:none}.touch-hint{display:none}body.touch-mode .touch-hint{display:block}body.touch-mode .title-hint:not(.touch-hint){display:none}body.touch-mode #hud .prompt.tappable{pointer-events:auto;cursor:pointer;padding:9px 18px 9px 9px;font-size:21px}.drink-btn{font:inherit;font-size:17px;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:10px;padding:6px 14px;margin-right:8px;box-shadow:2px 3px 0 var(--shadow)}body.touch-mode #side-buttons{top:calc(64px + env(safe-area-inset-top));right:10px;left:10px;transform:none;flex-direction:row;justify-content:flex-end;flex-wrap:wrap;gap:6px}body.touch-mode .side-btn{width:40px;height:40px;font-size:19px}