/* Cubo Blocks — Full-screen menus on phones, tab slide, small screens. */
/* ---------- full-screen menus (phones) ---------- */
/* Hubs and menu screens (.screen) fill the phone: no floating card, the tab bar docks to the bottom edge.
   Content stays in a centered column on wider phones. Dialogs and sheets keep their card. */
@media (max-width: 600px) {
  .overlay.screen { padding: 0; place-items: stretch; background: var(--panel); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .overlay.screen .card {
    width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; border: 0;
    padding: max(16px, calc(env(safe-area-inset-top) + 10px)) max(16px, calc((100% - 480px) / 2)) 24px;
    animation: screen-in 240ms cubic-bezier(.2,.8,.2,1);
  }
  .overlay.screen.show { animation: none; }
  .overlay.hub.screen { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .overlay.hub.screen .card { height: 100%; max-height: none; }
  #tabbar {
    left: 0; bottom: 0; transform: none; width: 100%; border-radius: 0;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 6px max(8px, calc((100% - 480px) / 2)) calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -1px 0 var(--hairline), 0 -6px 18px rgba(0,0,0,.06);
  }
}
/* Wide screens: menu cards float over the equipped theme's decor (drawn on the canvas), no scrim. */
@media (min-width: 601px) {
  .overlay.screen { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* The run's DOM controls hide with it (body class set by the frame loop). */
  body.menu-decor :is(#wallet, #undo, #menu-open, #missions-open, #inventory, #trash, #give-up, #coach, #hand, #tip) { visibility: hidden; }
}
/* Changing tab by swipe or tap: the new hub slides in from the side it lives on. */
.overlay.hub.from-right .card { animation: slide-r 240ms cubic-bezier(.2,.8,.2,1); }
.overlay.hub.from-left .card { animation: slide-l 240ms cubic-bezier(.2,.8,.2,1); }
@media (max-width: 600px) {
  /* Full-screen hubs move as whole pages: the new one slides over the old one, no fade. */
  .overlay.hub.from-right, .overlay.hub.from-left { z-index: 2; }
  .overlay.hub.from-right { animation: page-r 260ms cubic-bezier(.2,.8,.2,1); }
  .overlay.hub.from-left { animation: page-l 260ms cubic-bezier(.2,.8,.2,1); }
  .overlay.hub.from-right .card, .overlay.hub.from-left .card { animation: none; }
  .overlay.hub.out-left, .overlay.hub.out-right { z-index: 1; pointer-events: none; }
  .overlay.hub.out-left { animation: page-out-l 260ms cubic-bezier(.2,.8,.2,1) forwards; }
  .overlay.hub.out-right { animation: page-out-r 260ms cubic-bezier(.2,.8,.2,1) forwards; }
  .overlay.hub.out-left .card, .overlay.hub.out-right .card { animation: none; }
}
@keyframes page-r { from { transform: translateX(100%); } }
@keyframes page-l { from { transform: translateX(-100%); } }
@keyframes page-out-l { to { transform: translateX(-30%); } }
@keyframes page-out-r { to { transform: translateX(30%); } }
@keyframes screen-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes slide-r { from { opacity: 0; transform: translateX(48px); } }
@keyframes slide-l { from { opacity: 0; transform: translateX(-48px); } }
@media (prefers-reduced-motion: reduce) {
  .overlay.screen .card, .overlay.hub.from-right .card, .overlay.hub.from-left .card { animation: none; }
}


@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(24px) scale(.96); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .card, .mission.new, .btn.ad.show, .overlay.show, .stage-stars .star, .sticker.fresh .badge { animation: none; }
}
@media (max-width: 380px), (max-height: 720px) {
  .card { padding: 20px 16px 16px; }
  .card h2 { font-size: 26px; }
  .score { font-size: 56px; margin-top: 6px; }
  .brand { font-size: 36px; margin-bottom: 14px; }
  .btn { font-size: 19px; padding: 13px 10px 11px; }
  .actions { margin-top: 14px; }
  .seg button { font-size: 16px; padding: 10px 6px 9px; }
  .missions, .earn { margin-top: 12px; }
  .skins { gap: 8px; }
}