/* ============================================================
   JollyZap - landing / game launcher UI (full-bleed tile art)
   Polished, dark, performant "native game app" look.
   (Structure & ids are preserved for landing.js.)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --text: #eaeefb;
  --muted: #9aa4c2;
  --gold: #ffce54;
  --stroke: rgba(255, 255, 255, .09);
  --card-grad: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  --radius: 20px;
  --ff: "Fredoka", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;   /* headings */
  --fb: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;              /* body */
  --violet: #7c5cff;
  --tile-ar: 3 / 2;   /* the banner art is generated at 1536x1024 */
}

html, body { margin: 0; }
body {
  min-height: 100vh;
  color: var(--text);
  font-family: var(--fb);
  background: #080b16;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
/* fixed aurora backdrop - painted once; doesn't repaint while scrolling (mobile-friendly) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(124, 92, 255, .28), transparent 60%),
    radial-gradient(820px 520px at 88% 6%, rgba(58, 208, 255, .15), transparent 55%),
    radial-gradient(760px 600px at 8% 24%, rgba(236, 72, 153, .12), transparent 55%),
    linear-gradient(180deg, #0a0e1f 0%, #0a0d1c 45%, #080b16 100%);
}
img { -webkit-user-drag: none; user-select: none; }
.hidden { display: none !important; }

/* ---------------- top app bar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 5px clamp(12px, 4vw, 28px);
  background: linear-gradient(180deg, rgba(9, 12, 24, .92), rgba(9, 12, 24, .55));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke);
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 60px; display: block; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .45)); }

/* ---------------- auth controls ---------------- */
#auth-bar { display: flex; align-items: center; gap: 8px; }
.auth-signin {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none; white-space: nowrap;
  padding: 9px 17px; border-radius: 999px; color: #1a1206; font: 700 14px var(--ff);
  background: linear-gradient(180deg, #ffd86c, #ffb13c);
  box-shadow: 0 6px 16px rgba(255, 170, 50, .32);
  transition: transform .15s, box-shadow .15s;
}
.auth-signin:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(255, 170, 50, .42); }
.auth-signin:active { transform: translateY(0) scale(.97); }

#auth-user {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 7px 5px 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--stroke);
}
.auth-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff; font: 800 14px var(--ff);
  background: linear-gradient(135deg, #7c5cff, #37c6ff);
}
.auth-avatar.has-img {
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.auth-username {
  font: 700 13px var(--fb); color: var(--text);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-coins {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 206, 84, .15); color: var(--gold); font: 800 13px var(--fb);
}
#auth-user button, #auth-settings-btn {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 12px;
  border: 1px solid var(--stroke); background: rgba(255, 255, 255, .05); color: var(--muted);
  display: grid; place-items: center; text-decoration: none;
  transition: background .15s, color .15s;
}
#auth-user button:hover, #auth-settings-btn:hover { background: rgba(255, 255, 255, .12); color: var(--text); }
/* dim the friends-widget divider - its default near-white is too bright on the dark header */
.jz-soc-div { background: rgba(255, 255, 255, .16) !important; }

/* ---------------- hero ---------------- */
.landing-container { max-width: 1140px; margin: 0 auto; padding: 0 clamp(12px, 3vw, 22px) 48px; }
.logo-container { display: none; }   /* logo now lives in the top bar */
.hero { text-align: center; padding: 28px 10px 8px; }
.hero-title {
  margin: 0; font: 800 clamp(26px, 6vw, 40px)/1.05 var(--ff); letter-spacing: .3px;
  background: linear-gradient(180deg, #ffffff, #c9d2f5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(124, 92, 255, .35));
}
.tagline { margin: 9px 0 0; color: var(--muted); font: 600 clamp(13px, 3.4vw, 15px) var(--fb); }

/* ---------------- category filter pills ----------------
   The pills scroll sideways rather than wrapping: seven of them wrap to two
   ragged rows on a phone, which reads as a broken layout, and a single row the
   thumb can flick is the pattern every store uses. The row is bled out to the
   container's padding so the last pill runs off the edge and the row is
   visibly scrollable. */
.cat-pills {
  display: flex; gap: 8px; margin: 16px 0 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 2px clamp(12px, 3vw, 22px) 4px;
  margin-left: calc(-1 * clamp(12px, 3vw, 22px));
  margin-right: calc(-1 * clamp(12px, 3vw, 22px));
  scroll-padding-inline: clamp(12px, 3vw, 22px);
}
.cat-pills::-webkit-scrollbar { display: none; }
.cat-pills button {
  flex: 0 0 auto; cursor: pointer; white-space: nowrap;
  padding: 9px 16px; border-radius: 999px;
  font: 700 13.5px var(--fb); color: #b9c2e0;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--stroke);
  transition: background .16s, color .16s, border-color .16s, transform .12s;
}
.cat-pills button .n { opacity: .55; font-weight: 700; margin-left: 5px; }
.cat-pills button:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.cat-pills button:active { transform: scale(.96); }
.cat-pills button.sel {
  color: #1a1206; border-color: transparent;
  background: linear-gradient(180deg, #ffd86c, #ffb13c);
  box-shadow: 0 6px 16px rgba(255, 170, 50, .28);
}
.cat-pills button.sel .n { opacity: .6; }
/* a filter that matches nothing must say so rather than showing a blank page */
.cat-empty {
  margin: 28px 0 0; text-align: center; color: var(--muted); font: 600 14px var(--fb);
}

/* ---------------- ongoing games (resume bars) ---------------- */
#ongoing-games { display: flex; flex-direction: column; gap: 10px; margin: 18px auto 0; }
#ongoing-games.hidden { display: none; }
.ongoing-title {
  margin: 0 0 -2px; color: #c8f26a; font: 800 13px var(--fb);
  letter-spacing: .12em; text-transform: uppercase;
}
.ongoing-bar {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 16px; background: var(--card-grad);
  border: 1px solid rgba(200, 242, 106, .35);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .4), 0 0 0 1px rgba(200, 242, 106, .08) inset;
  animation: rise .5s both;
}
.ongoing-bar img {
  width: 52px; height: 52px; border-radius: 12px; object-fit: contain; flex: none;
  background: rgba(255, 255, 255, .06); padding: 4px; box-sizing: border-box;
}
.ongoing-info { flex: 1; min-width: 0; }
.ongoing-info .g-name { font: 800 15px var(--ff); color: #fff; }
.ongoing-info .g-sub {
  font: 600 12.5px var(--fb); color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ongoing-info .g-sub .pot { color: #ffd166; font-weight: 800; }
.ongoing-resume {
  flex: none; cursor: pointer; border: none; border-radius: 999px;
  padding: 10px 18px; font: 800 13px var(--fb); letter-spacing: .06em; color: #1e2b06;
  background: linear-gradient(180deg, #c8f26a, #a4e340 60%, #8fce2f);
  box-shadow: 0 4px 14px rgba(164, 227, 64, .4), inset 0 1px 0 rgba(255, 255, 255, .5);
  transition: transform .15s;
}
.ongoing-resume:hover { transform: scale(1.05); }
.ongoing-resume:active { transform: scale(.97); }
@media (max-width: 560px) {
  .ongoing-bar img { width: 44px; height: 44px; }
  .ongoing-resume { padding: 9px 14px; }
}

/* ---------------- games grid (full-bleed banner tiles) ----------------
   The art runs to the tile's top, left and right edges; only the title and
   blurb underneath carry padding. --tile-ar is the one place the banner's
   shape is stated - the generated art is cut to match it. */
.app-options {
  display: grid; gap: clamp(10px, 2.4vw, 16px);
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  margin: 20px auto 0;
}
.app-option {
  position: relative; isolation: isolate; cursor: pointer;
  display: flex; flex-direction: column; text-align: left;
  padding: 0; overflow: hidden;                /* clips the art to the radius */
  border-radius: var(--radius);
  background: var(--card-grad); border: 1px solid var(--stroke);
  /* the coloured aura is a shadow rather than a blurred pseudo-element: a
     full-bleed tile has to clip its own corners, and overflow:hidden would
     have eaten a child sitting outside the box */
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 8px 24px -12px var(--g, #7c5cff);
  transition: transform .18s cubic-bezier(.2, .7, .2, 1), box-shadow .18s, border-color .18s;
  animation: rise .5s both;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.app-option:hover {
  transform: translateY(-5px); border-color: rgba(255, 255, 255, .22);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .55), 0 14px 32px -10px var(--g, #7c5cff);
}
.app-option:active { transform: translateY(-1px) scale(.985); }
.app-option:hover h2 { color: #fff; }
/* rotating accent palette so every tile gets its own glow */
.app-option:nth-child(8n+1) { --g: #7c5cff; }
.app-option:nth-child(8n+2) { --g: #37c6ff; }
.app-option:nth-child(8n+3) { --g: #22c55e; }
.app-option:nth-child(8n+4) { --g: #f59e0b; }
.app-option:nth-child(8n+5) { --g: #ec4899; }
.app-option:nth-child(8n+6) { --g: #ef4444; }
.app-option:nth-child(8n+7) { --g: #14b8a6; }
.app-option:nth-child(8n+8) { --g: #a855f7; }

.tile-art {
  position: relative; width: 100%; aspect-ratio: var(--tile-ar);
  overflow: hidden; background: #0d1226;
}
.tile-art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.app-option:hover .tile-art img { transform: scale(1.06); }
/* until a game's banner lands the square launcher icon stands in; letting it
   fill the frame crops a third of it away, so it is contained on its own tint */
.tile-art img.is-fallback {
  object-fit: contain; padding: 6px;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .07), transparent 70%);
}
/* the art fades into the body rather than stopping on a hard line */
.tile-art::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 13, 28, 0), rgba(10, 13, 28, .55));
}

.tile-body { padding: 9px 11px 12px; }
.app-option h2 {
  margin: 0 0 3px; font: 700 14.5px/1.2 var(--ff); color: var(--text); letter-spacing: .2px;
  transition: color .18s;
}
.app-option p {
  margin: 0; color: var(--muted); font: 500 11.5px/1.35 var(--fb);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.7em;
}

/* ---------------- footer ---------------- */
.site-footer {
  margin: 44px auto 0; padding: 26px 16px 6px; text-align: center;
  border-top: 1px solid var(--stroke);
}
.footer-logo { display: block; height: 46px; width: auto; margin: 0 auto 12px; opacity: .9; }
.footer-tag { margin: 0; color: var(--muted); font: 600 12.5px var(--fb); }
.footer-links { margin: 12px 0 0; }
.footer-links a {
  color: #b9c2e0; font: 700 12.5px var(--fb); text-decoration: none;
  padding: 6px 10px; border-radius: 999px; transition: background .15s, color .15s;
}
.footer-links a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.footer-copy { margin: 12px 0 0; color: #5d678a; font: 600 11.5px var(--fb); }

/* ---------------- modals (auth) ---------------- */
/* the icon sprite lives in the page but must never take up space */
.auth-icons { position: absolute; width: 0; height: 0; overflow: hidden; }

#auth-modal {
  position: fixed; inset: 0; z-index: 100; padding: 16px;
  display: flex; align-items: flex-start; justify-content: center; overflow-y: auto;
  background: rgba(4, 6, 14, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: authFade .18s ease both;
}
@keyframes authFade { from { opacity: 0; } to { opacity: 1; } }
/* flex-start + margin:auto keeps the card centred but still scrollable when a
   short screen (landscape phone, keyboard open) makes it taller than the view */
.auth-modal-card {
  position: relative; width: min(400px, 100%); margin: auto;
  padding: 26px 24px 24px; border-radius: 26px;
  background:
    radial-gradient(120% 78% at 50% -18%, rgba(124, 92, 255, .30), transparent 62%),
    linear-gradient(180deg, #1b2140, #12172b);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: authPop .26s cubic-bezier(.2, .9, .25, 1.05) both;
}
@keyframes authPop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

.auth-head { text-align: center; margin-bottom: 16px; }
.auth-logo { display: block; height: 82px; width: auto; margin: 0 auto 12px; filter: drop-shadow(0 5px 16px rgba(0, 0, 0, .5)); }
.auth-modal-card h3 { margin: 0; font: 800 22px/1.2 var(--ff); color: #fff; letter-spacing: .2px; }
.auth-modal-sub { margin: 6px 0 0; text-align: center; color: var(--muted); font: 600 13px/1.45 var(--fb); }
.auth-modal-sub b { color: var(--gold); }
.auth-modal-sub .fa-coins { color: var(--gold); }

/* segmented Log In / Sign Up control with a pill that slides between them */
.auth-tabs {
  position: relative; display: flex; padding: 5px; margin-bottom: 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06);
}
.auth-tabs::before {
  content: ""; position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px);
  border-radius: 10px; background: linear-gradient(180deg, #8b6dff, #5b3ff0);
  box-shadow: 0 6px 16px rgba(124, 92, 255, .38);
  transition: transform .24s cubic-bezier(.3, .8, .3, 1);
}
.auth-tabs.t-signup::before { transform: translateX(100%); }
.auth-tabs button {
  position: relative; z-index: 1; flex: 1; padding: 10px 8px; border: none; cursor: pointer;
  border-radius: 10px; background: transparent; color: var(--muted); font: 700 14.5px var(--ff);
  transition: color .2s;
}
.auth-tabs button.sel { color: #fff; }
.auth-tabs button:not(.sel):hover { color: var(--text); }

/* ---- fields ---- */
.auth-field { position: relative; display: flex; align-items: center; }
.auth-field + .auth-field { margin-top: 10px; }
.auth-modal-card input {
  width: 100%; padding: 14px 14px 14px 44px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .045); color: var(--text);
  font: 600 16px var(--fb); outline: none;            /* 16px: anything smaller makes iOS zoom in on focus */
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.auth-modal-card input:focus {
  border-color: #8b6dff; background: rgba(124, 92, 255, .10); box-shadow: 0 0 0 3px rgba(124, 92, 255, .18);
}
.auth-modal-card input::placeholder { color: #6b7596; font-weight: 500; }
/* Chrome paints autofilled fields near-white, which looked broken on the dark card */
.auth-modal-card input:-webkit-autofill,
.auth-modal-card input:-webkit-autofill:hover,
.auth-modal-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text); caret-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #1d2442 inset;
  transition: background-color 9999s ease-in-out 0s;
}
.auth-field-icon {
  position: absolute; left: 15px; width: 17px; height: 17px; pointer-events: none;
  color: #6b7596; transition: color .16s;
}
.auth-field:focus-within .auth-field-icon { color: #a58fff; }
.auth-field.has-eye input { padding-right: 48px; }
.auth-eye {
  position: absolute; right: 5px; width: 38px; height: 38px; padding: 0; border: none;
  display: grid; place-items: center; border-radius: 11px; cursor: pointer;
  background: none; color: #6b7596; transition: color .15s, background .15s;
}
.auth-eye:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.auth-eye.on { color: #a58fff; }
.auth-eye svg { width: 19px; height: 19px; display: block; }
.auth-eye .eye-off, .auth-eye.on .eye-on { display: none; }
.auth-eye.on .eye-off { display: block; }

.auth-hint { margin: 10px 4px 0; color: #7d87a8; font: 600 12px/1.45 var(--fb); text-align: center; }
.auth-link {
  display: block; width: fit-content; margin: 8px 2px 0 auto; padding: 4px 2px;
  background: none; border: none; cursor: pointer; color: #9aa4c2; font: 700 12.5px var(--fb);
  transition: color .15s;
}
.auth-link:hover { color: #c6b6ff; text-decoration: underline; }

/* ---- buttons ---- */
.auth-cta {
  position: relative; width: 100%; margin-top: 14px; padding: 14px 16px; border: none; cursor: pointer;
  border-radius: 14px; color: #fff; font: 800 15.5px var(--ff);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, #8b6dff, #5b3ff0);
  box-shadow: 0 10px 24px rgba(124, 92, 255, .42), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .12s, box-shadow .16s, filter .16s;
}
.auth-cta:hover { filter: brightness(1.06); box-shadow: 0 14px 30px rgba(124, 92, 255, .52), inset 0 1px 0 rgba(255, 255, 255, .25); }
.auth-cta:active { transform: scale(.985); }
.auth-cta:disabled { cursor: default; filter: saturate(.65) brightness(.85); box-shadow: none; }
.auth-cta.loading > * { visibility: hidden; }
.auth-cta.loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .32); border-top-color: #fff;
  animation: authSpin .7s linear infinite;
}
@keyframes authSpin { to { transform: rotate(360deg); } }
.bonus {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 206, 84, .18); color: var(--gold); font: 800 12px var(--fb);
}
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin: 16px 0 12px;
  color: #606b90; font: 700 11.5px var(--fb); text-transform: uppercase; letter-spacing: .1em;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .17), transparent);
}
#auth-google-btn {
  position: relative; width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px; border-radius: 14px; cursor: pointer; color: #1a2236; font: 700 14.5px var(--ff);
  background: #fff; border: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  transition: transform .12s, box-shadow .16s, background .16s;
}
#auth-google-btn:hover { background: #f4f6fb; box-shadow: 0 10px 24px rgba(0, 0, 0, .34); }
#auth-google-btn:active { transform: scale(.985); }
#auth-google-btn:disabled { cursor: default; }
#auth-google-btn.loading > * { visibility: hidden; }
#auth-google-btn.loading::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(26, 34, 54, .25); border-top-color: #1a2236;
  animation: authSpin .7s linear infinite;
}
#auth-close-btn {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .06); color: #9aa4c2;
  transition: background .15s, color .15s, transform .2s;
}
#auth-close-btn svg { width: 15px; height: 15px; display: block; }
#auth-close-btn:hover { background: rgba(255, 255, 255, .14); color: #fff; transform: rotate(90deg); }

#auth-error, #auth-claim-error {
  display: block; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px;
  text-align: center; font: 700 13px/1.35 var(--fb);
  background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .28); color: #ffa4a4;
  animation: authShake .3s;
}
#auth-error.ok {
  background: rgba(52, 211, 153, .13); border-color: rgba(52, 211, 153, .3); color: #7ff0c4;
  animation: none;
}
@keyframes authShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ---------------- responsive ---------------- */
@media (max-width: 560px) {
  .app-options { grid-template-columns: repeat(2, 1fr); }
  .auth-username { display: none; }
  /* On a 375px phone the account chip ran past the header's right edge and
     clipped the log-out button. Tighten the row and give the two icon
     buttons a proper thumb-sized target while they are at it. */
  .topbar { gap: 8px; padding: 5px 12px; }
  .brand img { height: 48px; }
  #auth-bar { min-width: 0; }
  #auth-user { gap: 6px; padding: 4px 6px 4px 4px; min-width: 0; }
  .auth-coins { padding: 5px 9px; font: 800 12.5px var(--fb); }
  #auth-user button, #auth-settings-btn { width: 40px; height: 40px; font-size: 13px; }
  #auth-modal { padding: 12px; }
  .auth-modal-card { padding: 22px 18px 20px; border-radius: 22px; }
  .auth-modal-card h3 { font-size: 20px; }
  .auth-logo { height: 72px; }
}
/* landscape phones / short windows: drop the decoration so the CTA still fits */
@media (max-height: 640px) {
  .auth-logo { display: none; }
  .auth-head { margin-bottom: 12px; }
  .auth-modal-card { padding-top: 22px; }
}
/* 320px phones squeeze the tile to ~143px, where the longest blurbs clipped
   again; a touch less type buys the two lines back without reflowing anything */
@media (max-width: 360px) {
  .tile-body { padding: 8px 8px 10px; }
  .app-option p { font-size: 10.7px; }
}
@media (min-width: 1000px) {
  .app-options { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .app-option { animation: none; }
  .app-option:hover .tile-art img { transform: none; }
  * { transition: none !important; }
  /* the CTA spinner stays - it is a status indicator, not decoration */
  #auth-modal, .auth-modal-card, #auth-error, #auth-claim-error { animation: none !important; }
}