*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
html,body{height:100%;background:#1b1035;overflow:hidden;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;touch-action:none}
#app{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;background:radial-gradient(circle at 50% 0%,#3a1f6e 0%,#1b1035 70%)}
#hud{width:100%;max-width:520px;display:flex;gap:8px;padding:8px 10px;padding-top:max(8px,env(safe-area-inset-top));align-items:center}
.box{flex:1;background:rgba(255,255,255,.08);border-radius:12px;padding:4px 8px;text-align:center;min-height:52px;display:flex;flex-direction:column;justify-content:center}
.box small{font-size:10px;opacity:.7;letter-spacing:1px}.box b{font-size:22px}
.box.next{flex:0 0 72px;align-items:center}.box.next canvas{width:36px;height:36px}
.icon{width:44px;height:44px;border-radius:12px;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:20px;cursor:pointer}
#game{flex:1;width:100%;max-width:520px;display:block;touch-action:none}
.overlay{position:absolute;inset:0;background:rgba(10,5,25,.72);display:none;align-items:center;justify-content:center;z-index:10;backdrop-filter:blur(4px)}
.overlay.show{display:flex;animation:fade .25s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.card{background:linear-gradient(160deg,#3b2470,#24154a);border-radius:22px;padding:24px 22px;width:min(88vw,360px);text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:10px;max-height:90vh;overflow:auto}
h1{font-size:44px;font-weight:900;letter-spacing:-1px}h1 span{color:#ffcf3f}
h2{font-size:28px}.sub{opacity:.85}.tiny{font-size:12px;opacity:.65}
button{font:inherit;color:#fff;border:0;border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.12);cursor:pointer}
button:active{transform:scale(.96)}
.big{font-size:22px;font-weight:800;padding:14px;background:linear-gradient(180deg,#ffd84d,#ff9f1c);color:#3a1f00;box-shadow:0 4px 0 #b86a00}
.big.alt{background:linear-gradient(180deg,#6ee7b7,#10b981);color:#053b2a;box-shadow:0 4px 0 #067a55}
.row{display:flex;gap:8px}.row button{flex:1;font-size:14px}
.hidden{display:none!important}
.skin,.goal{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(255,255,255,.07);padding:10px;border-radius:12px;text-align:left}
.skin.sel{outline:2px solid #ffcf3f}.skin .sw{display:flex;gap:2px}.skin .sw i{width:14px;height:14px;border-radius:50%;display:inline-block}
.goal.done{opacity:.6}.bar{height:6px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden;margin-top:4px}.bar i{display:block;height:100%;background:#ffcf3f}
#toast{position:absolute;top:80px;left:50%;transform:translateX(-50%);background:#ffcf3f;color:#3a1f00;font-weight:800;padding:8px 16px;border-radius:20px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:20}
#toast.show{opacity:1}