/* Shell for the festival arcade pages (block-blast, target-ravan, tower-stack).
   The game draws on one canvas; menus are DOM overlays over it. */
:root { --bg:#21070f; --ink:#fff6e6; --gold:#ffd75e; --card:#3a1220; --card2:#561a2b;
  /* Android's WebView only reports cutouts through env(); pz.js / Arcade.tsx publish the real bars as --sai-* */
  --sa-t:max(env(safe-area-inset-top),var(--sai-top,0px)); --sa-b:max(env(safe-area-inset-bottom),var(--sai-bottom,0px)); }
html,body { margin:0; height:100%; background:var(--bg); color:var(--ink);
  font:600 16px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif; overflow:hidden;
  touch-action:none; user-select:none; -webkit-user-select:none; }
#wrap { position:fixed; inset:0; display:grid; place-items:center;
  padding:var(--sa-t) 0 var(--sa-b); box-sizing:border-box; }
canvas { display:block; border-radius:18px; box-shadow:0 10px 40px #0008; }
.ov { position:fixed; inset:0; display:none; place-items:center; background:#000a; z-index:3;
  padding:calc(8px + var(--sa-t)) 0 calc(8px + var(--sa-b)); box-sizing:border-box; }   /* never under the status / nav bars */
.ov.on { display:grid; animation:fade .18s ease-out; }
.panel { background:var(--card); border:2px solid var(--gold); border-radius:22px; padding:16px;
  width:min(380px,92vw); max-height:100%; overflow:auto; text-align:center; box-sizing:border-box;
  animation:pop .34s cubic-bezier(.34,1.4,.5,1); }
.panel h1 { margin:0; font-size:22px; color:var(--gold); }
.panel p { margin:4px 0 12px; opacity:.85; font-weight:500; }
button { font:inherit; color:var(--ink); background:var(--card2); border:2px solid #ffd75e55;
  border-radius:14px; min-height:48px; min-width:48px; padding:8px 12px; cursor:pointer;
  transition:transform .12s ease-out, border-color .2s; }
button:hover:not(:disabled) { border-color:var(--gold); }
button:active:not(:disabled) { transform:scale(.95); }
button:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
button:disabled { opacity:.4; cursor:default; }
.gold { background:var(--gold); color:#3a0d16; border-color:var(--gold); }
/* round HUD buttons; the app's full-screen toggle copies this class */
.icon { width:48px; height:48px; padding:0; border-radius:50%; display:inline-grid; place-items:center; background:#0008; font-size:20px; }
.head { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.head h1 { flex:1; text-align:left; font-size:20px; }
.row { display:flex; gap:8px; justify-content:center; margin:10px 0 2px; flex-wrap:wrap; }
.row button[aria-pressed="true"] { background:var(--gold); color:#3a0d16; }
.lv { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:12px 0 4px; }
.lv button { padding:6px 0; display:flex; flex-direction:column; align-items:center; font-size:18px; }
.stars { color:var(--gold); letter-spacing:1px; font-size:12px; }
.total { font-size:13px; opacity:.75; margin:6px 0 0; }
.how { text-align:left; display:grid; gap:10px; margin:12px 0; }
.how div { display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:center; background:#ffffff0d; border-radius:14px; padding:8px; }
.how img { width:46px; height:46px; object-fit:contain; }
.how b { color:var(--gold); }
.num { font-size:12px; opacity:.6; }
.bigstars { font-size:40px; letter-spacing:6px; margin:6px 0; }
.bigstars span { display:inline-block; opacity:.25; }
.bigstars span.on { opacity:1; color:var(--gold); animation:star .45s cubic-bezier(.34,1.6,.5,1) both; }
.bigstars span.on:nth-child(2) { animation-delay:.09s } .bigstars span.on:nth-child(3) { animation-delay:.18s }
#lbList { text-align:left; padding:0; margin:6px 0 10px; }
.hudb { position:fixed; top:calc(8px + var(--sa-t)); display:none; z-index:2; }
#back { left:8px } #help { right:8px } #mute2 { right:64px }
@keyframes fade { from { opacity:0 } }
@keyframes pop { from { transform:scale(.86); opacity:0 } }
@keyframes star { from { transform:scale(0) rotate(-40deg) } }
@media (prefers-reduced-motion: reduce) { * { animation-duration:0s !important; animation-delay:0s !important; transition:none !important; } }
#themes button { font-size:14px; padding:6px 9px; }   /* three festivals on one line at 320px+ */
/* the leaderboard rows pz.js paints (same recipe as the other arcade pages) */
.pz-row { display:flex; align-items:center; gap:10px; padding:8px 12px; margin-bottom:6px; list-style:none;
  border-radius:12px; background:#ffffff10; border:2px solid transparent; }
.pz-row.pz-me { border-color:var(--gold); }
.pz-nm { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pz-sc { flex:none; color:var(--gold); font-variant-numeric:tabular-nums; }
.stars i { font-style:normal; color:#ffffff33; }   /* stars still to win */
/* portrait-only card for phones held sideways; sits over everything */
#rotate { z-index:9; background:var(--bg); }
#rotate .phone { width:44px; height:72px; margin:6px auto 14px; border:4px solid var(--gold); border-radius:10px;
  animation:turn 1.8s cubic-bezier(.34,1.4,.5,1) infinite; }
@keyframes turn { 0%,20% { transform:rotate(-90deg); } 60%,100% { transform:rotate(0); } }