*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#1A1638;overflow:hidden;font-family:Fredoka,ui-rounded,system-ui,sans-serif;color:#F4F0FF;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#app{position:fixed;inset:0;touch-action:manipulation}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
button{touch-action:manipulation;font-family:inherit}
[hidden]{display:none!important}
.hud{position:absolute;left:0;right:0;top:0;padding:calc(env(safe-area-inset-top,0px) + 12px) 14px 0;display:flex;align-items:flex-start;justify-content:space-between;pointer-events:none}
.score{font-size:52px;font-weight:700;line-height:1;text-shadow:0 3px 0 rgba(20,14,50,.45);min-width:80px;text-align:center}
.pill{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:6px 12px;display:flex;flex-direction:column;align-items:center;min-width:64px;font-weight:600;font-size:18px}
.pill .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-weight:500}
.pill.hot{background:rgba(255,190,140,.22);border-color:rgba(255,200,150,.5)}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(22,18,52,.35)}
.card{width:100%;max-width:340px;background:linear-gradient(180deg,rgba(60,50,120,.92),rgba(38,32,86,.94));border:1px solid rgba(255,255,255,.14);border-radius:28px;padding:26px 22px 20px;text-align:center;box-shadow:0 20px 50px rgba(8,4,30,.45)}
.logo{font-size:50px;font-weight:700;line-height:1;letter-spacing:-.01em;color:#FFE7A3}
.logo span{color:#B9A8FF;margin-left:6px}
.tag{margin:12px 0 14px;font-size:16px;line-height:1.35;color:#DCD4FF;font-weight:500}
.howto{display:grid;gap:6px;margin-bottom:14px}
.howto div{background:rgba(255,255,255,.07);border-radius:14px;padding:8px 10px;font-size:15px;color:#E9E3FF}
.howto b{color:#FFC8A8}
.best-line{font-size:16px;opacity:.85;margin-bottom:14px}
.best-line b{color:#FFE7A3;font-size:20px}
.btn{display:block;width:100%;border:0;border-radius:20px;padding:16px;font-size:22px;font-weight:700;cursor:pointer;margin-top:10px}
.btn.primary{background:linear-gradient(180deg,#FFC8A8,#FF9E86);color:#3A1F3D;box-shadow:0 6px 0 #C8697A}
.btn.primary:active{transform:translateY(3px);box-shadow:0 3px 0 #C8697A}
.btn.ghost{background:rgba(255,255,255,.1);color:#E9E3FF;font-size:18px;padding:12px}
.btn[disabled]{opacity:.55}
.over-title{font-size:20px;color:#DCD4FF;font-weight:600}
.big{font-size:72px;font-weight:700;line-height:1.05;color:#FFE7A3}
.stats{display:flex;gap:8px;justify-content:center;margin:10px 0 6px}
.stats div{flex:1;background:rgba(255,255,255,.08);border-radius:14px;padding:8px 4px;display:flex;flex-direction:column;font-size:20px}
.stats span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.hint{font-size:14px;color:#CFC6FF;min-height:18px;margin:6px 0 2px}
.newbest{display:inline-block;background:linear-gradient(90deg,#FFE7A3,#FFC8A8,#C9B8FF);color:#3A1F3D;font-weight:700;font-size:22px;padding:6px 16px;border-radius:999px;margin-bottom:8px;animation:pop .5s ease-out}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.newbest{animation:none}.btn.primary:active{transform:none}}