*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#2b1b5a;color:#fff3fa;font-family:'Press Start 2P',monospace}canvas{position:fixed;inset:0;width:100%;height:100dvh;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}button{font:inherit;cursor:pointer;touch-action:manipulation;min-height:42px;color:#fff7fb;background:#2b1b5abf;border:2px solid #fff0f5a0;border-radius:2px;padding:9px 12px;box-shadow:0 3px 0 #6a285b;font-size:9px}button:hover,button[aria-pressed=true]{background:#86457c}button:active{transform:translateY(3px);box-shadow:none}button:focus-visible{outline:3px solid #ffe566;outline-offset:3px}.top{position:fixed;top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;display:flex;gap:8px;align-items:center}.top #sound{margin-left:auto}.top button{font-size:8px}#greeting{position:fixed;top:13%;left:5%;right:5%;text-align:center;pointer-events:none;text-shadow:3px 3px #4a1f5e,-2px 0 #4a1f5e,0 -2px #4a1f5e;line-height:1.8}#greeting>p{font-size:clamp(10px,2.5vw,16px);margin:0 0 14px}h1{font-size:clamp(20px,5vw,38px);color:#ffb3d1;line-height:1.6;margin:0 0 12px}#greeting #dedication{font-size:clamp(9px,2.2vw,13px);color:#ffe27a}#speech{position:fixed;left:7%;right:7%;top:38%;text-align:center;color:#fff6a8;font-size:clamp(11px,3vw,19px);line-height:1.8;text-shadow:2px 2px #a8204c,-2px 0 #a8204c,0 -2px #a8204c;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .25s;pointer-events:none}#speech.show{opacity:1;transform:translateY(0)}.bottom{position:fixed;bottom:calc(10px + env(safe-area-inset-bottom));left:8px;right:8px;text-align:center}#hint{font-size:clamp(8px,2vw,11px);line-height:1.7;margin:0 0 12px;text-shadow:2px 2px #4a1f5e}.actions,.extras{display:flex;gap:6px;justify-content:center}.actions button{background:#fff0f5;color:#4a1f5e;border:2px solid #55294f;box-shadow:0 3px 0 #e88cba}.extras{margin-top:7px}.extras button{min-height:32px;font-size:7px;padding:7px 12px}.bottom small{display:block;font-size:6px;line-height:1.6;color:#fff0e2b0;margin-top:10px}.sr-only{position:fixed;left:-10000px}.sr-only:focus-within{left:8px;top:60px;display:flex;flex-direction:column;gap:5px}dialog{background:#43267f;border:4px solid #ffb3d1;box-shadow:6px 6px #4a1f5e;color:#fff3fa;max-width:90vw;padding:40px 24px;text-align:center;font-size:11px;line-height:2.4}dialog h2{font-size:16px;color:#ffe27a}dialog::backdrop{background:#1b0f3bba}#note-close{position:absolute;right:8px;top:8px;min-height:30px;padding:6px;font-size:9px}@media(max-width:420px){.actions button{padding:8px;font-size:8px}.top{gap:5px}.top button{padding:8px;font-size:7px}#greeting{top:14%}#speech{top:37%;font-size:11px}.bottom small{font-size:5px}}@media(max-height:550px){#greeting{top:12%}#greeting>p{font-size:8px;margin-bottom:3px}h1{font-size:18px;margin-bottom:3px}#greeting #dedication{font-size:7px}.bottom{bottom:5px}.bottom #hint{display:none}.extras{position:fixed;right:8px;bottom:10px}.bottom small{font-size:5px}.actions button{min-height:32px}#speech{top:37%;font-size:10px}}@media(prefers-reduced-motion:reduce){#speech{transition:none}}

.extras{flex-wrap:wrap}.extras button{min-height:36px}.sr-only button{font-size:9px}@media(max-width:420px){.extras{gap:4px}.extras button{padding:7px 9px;font-size:7px}}

#greeting #audio-status{font-size:7px;color:#dce6ee;line-height:1.8;margin-top:16px}audio{display:none}.extras{max-width:650px;margin-left:auto;margin-right:auto}.extras button{font-size:7px;min-width:55px}#greeting h1{color:#ffe0a3}@media(max-width:420px){.extras{max-width:340px;display:grid;grid-template-columns:repeat(3,1fr)}.extras button{min-height:32px}#greeting #audio-status{font-size:6px}}

.actions{flex-wrap:wrap}.actions button[hidden]{display:none}#clear-smoke{background:#cbd4df;color:#293443}@media(max-width:420px){#clear-smoke{min-height:30px;flex-basis:160px}}

/* Embedded in the home page card (narrow frame): keep the two button rows in normal flow, one tidy row each, so they never overlap. */
@media(max-width:520px){
.bottom{bottom:6px}
.bottom #hint{display:block;font-size:7px;margin:0 0 6px}
.actions,.extras{display:flex;flex-wrap:nowrap;gap:4px;max-width:none;margin-left:auto;margin-right:auto;justify-content:center}
.actions button{min-height:30px;padding:6px 7px;font-size:7px}
.extras{position:static;right:auto;bottom:auto;margin-top:5px}
.extras button{min-height:26px;min-width:0;padding:5px 5px;font-size:6px}
.bottom small{font-size:5px;margin-top:6px}
}