/* Goopiverse Online: phone polish (loaded last).
   - The Arcade is two compact tiles across instead of one tall tile per screen.
   - Toasts are smaller and sit just under the top bar, so they never cover buttons near your thumb. */
@media (max-width:640px){
  .grid.lg:has(> .gametile){ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
  .gametile{ border-radius:20px; }
  .gametile .art{ aspect-ratio:1 / 1; }
  .gametile .art img{ height:74%; bottom:16%; }
  .gametile .art b{ font-size:18px !important; line-height:1.02; left:10px; right:10px; bottom:9px; text-wrap:balance; }
  .gametile .tx{ padding:10px 11px 12px; gap:8px; }
  .gametile .tx > .muted{ font-size:12.5px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .gametile .tx .row.small{ gap:5px; }
  .gametile .tx .row.small .chip{ font-size:11px; padding:3px 8px; }
  .toast{ padding:9px 10px 11px 12px !important; gap:10px !important; font-size:13.5px !important; border-radius:14px !important; }
  .toast .ic-sm, .toast .ic-sm svg, .toast .ic-sm img{ width:26px !important; height:26px !important; }
  .toast .tclose{ width:26px; height:26px; }
  .gdock{ top:calc(var(--topbar, 64px) + env(safe-area-inset-top, 0px) + 8px) !important; bottom:auto !important; }
  .toast{ transform:translateY(-8px) scale(.98); }
  .toast.out{ transform:translateY(-8px); }
}

/* How to play, on a phone: shorter, and "Got it" always in reach at the bottom of the card */
@media (max-width:640px){
  .gstage .gs-how{ padding:10px; }
  .gstage .gs-howcard{ padding:14px 16px 0; gap:8px; }
  .gstage .gs-howcard h3{ font-size:25px; }
  .gstage .gs-howcard ul{ font-size:14px; gap:4px; padding-left:18px; }
  .gstage .gs-howcard p.small.dim{ display:none; }
  .gstage .gs-howcard > .btn{ position:sticky; bottom:10px; margin:6px 0 12px; min-height:50px; box-shadow:0 -14px 22px rgba(20,10,34,.92), 0 5px 0 var(--lime-d, #3fbf1a); }
}

/* A game's code loading for the first time (js/games-index.js) */
.gload{ display:grid; justify-items:center; gap:12px; padding:42px 20px; text-align:center; min-height:300px; align-content:center; }
.gload img{ width:120px; height:120px; object-fit:contain; animation:gload-bob 1.1s ease-in-out infinite; }
.gload-bar{ width:min(240px, 70%); height:8px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.gload-bar i{ display:block; height:100%; width:40%; border-radius:inherit; background:var(--lime, #9dff2e); animation:gload-slide 1s ease-in-out infinite; }
@keyframes gload-bob{ 50%{ transform:translateY(-8px) scale(1.03, .97); } }
@keyframes gload-slide{ 0%{ transform:translateX(-110%); } 100%{ transform:translateX(260%); } }
@media (prefers-reduced-motion: reduce){ .gload img, .gload-bar i{ animation:none; } }