*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#1a0b3a;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;touch-action:none}
canvas{position:fixed;inset:0;width:100%;height:100%}
#ui{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;pointer-events:none}
#ui>*{pointer-events:auto}#ui:empty{display:none}
.panel{background:rgba(20,8,48,.88);border:3px solid #ffcc00;border-radius:20px;padding:18px;max-width:420px;width:100%}
h1{font-size:34px;margin:4px 0;color:#ffcc00;text-shadow:3px 3px 0 #e8322b}h2{color:#ffcc00;margin:6px 0}
p{margin:8px 0;line-height:1.35}
button{display:block;width:100%;margin:8px 0;padding:14px;font-size:18px;font-weight:800;border:0;border-radius:14px;background:#e8322b;color:#fff;box-shadow:0 4px 0 #8a1410}
button.alt{background:#3b2a80;box-shadow:0 4px 0 #1d1245}button:disabled{background:#555;box-shadow:none;opacity:.7}
.row{display:flex;gap:8px}.row button{flex:1}.small{font-size:13px;opacity:.8}
#ui{justify-content:flex-end;padding-bottom:max(20px,env(safe-area-inset-bottom))}
.panel{animation:pop .35s cubic-bezier(.2,1.6,.4,1)}@keyframes pop{from{transform:scale(.6) translateY(40px);opacity:0}to{transform:none;opacity:1}}
.menu h1{font-size:38px;line-height:.95;letter-spacing:1px;transform:rotate(-3deg)}
button{transition:transform .08s}button:active{transform:scale(.95) translateY(2px)}
button.big{font-size:20px;padding:16px}.seg button{padding:9px;font-size:15px}
.st,.stars{color:#ffcc00;letter-spacing:2px}.stars{font-size:40px;margin:2px 0;animation:pop .6s .3s both}
.pun{background:#e8322b;border-radius:12px;padding:10px;font-size:17px}
#result{margin-bottom:2vh}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-height:42vh;overflow-y:auto;margin:6px 0;touch-action:pan-y}
.grid button{margin:0;padding:8px 2px;font-size:17px;line-height:1.1}.grid .st{display:block;font-size:9px;letter-spacing:0}
#snd{position:fixed;top:8px;right:8px;z-index:20;display:flex;gap:6px}#snd button{padding:4px 8px;font-size:18px;min-width:0}
.code{font-size:44px;letter-spacing:8px;font-weight:900;color:#ffcc00}
