:root{--edge: #15173a;--card: #f4ecdb;--card-2: #e9dec6;--ink: #2b2433;--dim: #6d6272;--accent: #c9483b;--shadow: 0 2px 0 rgba(0, 0, 0, .08), 0 6px 14px rgba(10, 6, 22, .35);--ui: 1;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--edge);color:var(--ink);font-family:Patrick Hand,Comic Sans MS,system-ui,sans-serif;overflow:hidden;transition:background-color 1.2s ease}#app{position:fixed;inset:0;overflow:hidden}canvas.stage{position:absolute;left:0;top:0;will-change:transform;touch-action:none;-webkit-tap-highlight-color:transparent;display:block}.tag{background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.35),transparent 60%),linear-gradient(170deg,var(--card),var(--card-2));box-shadow:var(--shadow);clip-path:polygon(.6% 3%,20% .5%,48% 2%,76% 0%,99.4% 2.5%,100% 50%,99% 97%,70% 100%,41% 98%,14% 100%,0% 97%,1% 52%)}.top{position:fixed;top:max(14px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));display:flex;justify-content:space-between;pointer-events:none;font-size:calc(17px * var(--ui));transition:opacity .6s ease}.top .tag{padding:3px 12px 4px;transform:rotate(-1.2deg)}.top .clock{transform:rotate(1.5deg)}.hud{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:20px max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));transition:opacity .6s ease;pointer-events:none}.hud>*{pointer-events:auto}body.idle .hud,body.idle .top{opacity:0}body.idle{cursor:none}.label{min-width:0;padding:8px 18px 10px;transform:rotate(-1.5deg);transform-origin:left bottom}.label .num{font-size:calc(14px * var(--ui));color:var(--accent);letter-spacing:.5px}.label .title{font-family:Caveat,cursive;font-weight:700;font-size:calc(clamp(24px,3.2vw,34px) * var(--ui));line-height:1;margin:1px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.label .mood{font-size:calc(15px * var(--ui));color:var(--dim)}.controls{display:flex;align-items:center;gap:2px;padding:6px 8px;flex-shrink:0;transform:rotate(1deg)}.btn{appearance:none;border:0;background:transparent;color:var(--ink);width:calc(40px * var(--ui));height:calc(40px * var(--ui));display:grid;place-items:center;cursor:pointer;padding:0;border-radius:50%}.btn:hover,.btn:focus-visible{background:#2b243314;outline:none}.btn.on{color:var(--accent)}svg{width:calc(22px * var(--ui));height:calc(22px * var(--ui));fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}svg .solid{fill:currentColor}.vol{display:flex;align-items:center;gap:6px;padding:0 6px;color:var(--ink)}.vol input{width:calc(80px * var(--ui));accent-color:var(--accent)}.start{position:fixed;inset:0;display:grid;place-items:center;background:#0a081a73;transition:opacity .8s ease,visibility .8s;cursor:pointer;padding:16px}.start.gone{opacity:0;visibility:hidden;pointer-events:none}.start .card{background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.45),transparent 55%),linear-gradient(165deg,var(--card),var(--card-2));box-shadow:0 4px #0000000f,0 22px 50px #0604148c;clip-path:polygon(1% 2%,30% 0%,62% 1.5%,99% 0%,100% 40%,98.5% 99%,64% 100%,33% 98.5%,0% 100%,1.2% 55%);padding:calc(30px * var(--ui)) calc(40px * var(--ui)) calc(26px * var(--ui));text-align:center;max-width:460px;transform:rotate(-1deg)}.start h1{font-family:Caveat,cursive;font-weight:700;font-size:calc(clamp(40px,7vw,56px) * var(--ui));line-height:.9;margin:0 0 10px}.start p{margin:0 0 18px;color:var(--dim);font-size:calc(18px * var(--ui))}.start .play{appearance:none;border:0;font:inherit;font-size:calc(20px * var(--ui));display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff7ea;padding:8px 22px 9px 16px;cursor:pointer;clip-path:polygon(2% 6%,50% 0%,98% 4%,100% 94%,50% 100%,0% 96%);box-shadow:inset 0 -3px #00000026}.start .hint{display:block;margin-top:16px;color:var(--dim);font-size:calc(14px * var(--ui))}@media(max-width:640px){.hud{flex-direction:column;align-items:stretch}.controls{justify-content:space-between}.vol input{width:70px}.top .clock{display:none}}a.credit{color:inherit;text-decoration:none;pointer-events:auto}a.credit:hover{color:var(--accent)}.start .made{display:inline-block;margin-top:10px;color:var(--accent);font-size:calc(15px * var(--ui));text-decoration:none;border-bottom:1px dashed currentColor}body.still .hud,body.still .top,body.still .start{display:none}