*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:linear-gradient(#1f4e79,#2b6fa8);font-family:-apple-system,"SF Pro Rounded",system-ui,"Segoe UI",sans-serif;color:#fff;touch-action:none;user-select:none;-webkit-user-select:none}
#stage{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden;border-radius:calc(var(--u,1px)*10);box-shadow:0 8px 40px #0006;background:#79c7ff}
canvas{display:block;width:100%;height:100%}
#topbtns{position:absolute;right:calc(var(--u)*10);top:calc(var(--u)*8);display:none;gap:calc(var(--u)*6)}
#topbtns button{width:calc(var(--u)*38);height:calc(var(--u)*38);border-radius:50%;border:0;background:#0003;color:#fff;font-size:calc(var(--u)*17);cursor:pointer;backdrop-filter:blur(4px)}
#topbtns button:hover{background:#0005}
body.play #topbtns{display:flex}
#touch{display:none;position:absolute;left:0;right:0;bottom:calc(var(--u)*14);padding:0 calc(var(--u)*18);justify-content:space-between;align-items:flex-end;pointer-events:none}
body.play.touch #touch{display:flex}
#touch .grp{display:flex;gap:calc(var(--u)*12)}
#touch button{pointer-events:auto;width:calc(var(--u)*78);height:calc(var(--u)*78);border-radius:50%;border:calc(var(--u)*2) solid #fff7;background:#ffffff2e;color:#fff;font-size:calc(var(--u)*30);backdrop-filter:blur(3px)}
#touch button.on{background:#ffffff7a}
#touch #bu{width:calc(var(--u)*96);height:calc(var(--u)*96);background:#ff9f4344;border-color:#ffd9a8}
#menu{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#0b2a4577;backdrop-filter:blur(3px);font-size:calc(var(--u)*16)}
#menu.show{display:flex}
.card{width:min(92%,calc(var(--u)*520));max-height:96%;overflow:auto;background:linear-gradient(#fffdf6,#ffeed2);color:#35261a;border-radius:calc(var(--u)*22);padding:calc(var(--u)*14) calc(var(--u)*24);text-align:center;box-shadow:0 10px 40px #0007}
.card img{width:calc(var(--u)*72);height:calc(var(--u)*72);border-radius:calc(var(--u)*22);box-shadow:0 4px 14px #0004}
.card h1{margin:calc(var(--u)*2) 0 0;font-size:calc(var(--u)*34);letter-spacing:.5px;color:#c4411f}
.card h2{margin:0;font-size:calc(var(--u)*32);color:#c4411f}
.card p{margin:calc(var(--u)*6) 0}
.tag{font-size:calc(var(--u)*17);color:#6b4b2c}
.how{text-align:left;font-size:calc(var(--u)*13);line-height:1.35;margin:calc(var(--u)*6) 0;padding:calc(var(--u)*7) calc(var(--u)*12);background:#fff8;border-radius:calc(var(--u)*12)}
.how div{margin:calc(var(--u)*3) 0}
.btn{display:inline-block;margin:calc(var(--u)*6) calc(var(--u)*4);padding:calc(var(--u)*11) calc(var(--u)*34);font:inherit;font-weight:700;font-size:calc(var(--u)*20);color:#fff;background:linear-gradient(#ff8a3d,#e5541c);border:0;border-radius:calc(var(--u)*30);cursor:pointer;box-shadow:0 4px 0 #a73a12,0 8px 16px #0003}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #a73a12}
.btn.alt{background:linear-gradient(#8fb3d1,#5f89ab);box-shadow:0 4px 0 #3f6482,0 8px 16px #0003;font-size:calc(var(--u)*16);padding:calc(var(--u)*9) calc(var(--u)*22)}
.row{display:flex;justify-content:center;align-items:center;gap:calc(var(--u)*8);flex-wrap:wrap}
.chip{font:inherit;font-size:calc(var(--u)*14);font-weight:700;padding:calc(var(--u)*4) calc(var(--u)*12);border-radius:calc(var(--u)*14);border:2px solid #c4411f55;background:#fff9;color:#6b4b2c;cursor:pointer}
.chip.on{background:#c4411f;color:#fff;border-color:#c4411f}
.stat{font-size:calc(var(--u)*17)}.stat b{font-size:calc(var(--u)*30);color:#c4411f}
.small{font-size:calc(var(--u)*12);color:#7a6248}
.small a{color:#7a6248}
.new{color:#1c9a4b;font-weight:800}