/* Keep the game, header balance and footer aligned in the available space. */
html:has(> body > .site-layout) { scrollbar-gutter:stable; }
body:has(> .site-layout) { --game-shell-width:1680px; --game-shell-gutter:clamp(20px,2.5vw,40px); }
.site-layout { display:grid; grid-template-columns:248px minmax(0,1fr); gap:24px; flex:1; width:100%; max-width:var(--game-shell-width); margin:0 auto; padding:0 var(--game-shell-gutter); align-items:start; }
.site-layout>.flip-page { grid-column:2; grid-row:1; }
.site-layout>.flip-page.is-signed-in { grid-template-columns:minmax(0,1fr); }
.site-layout>.flip-page.is-signed-in .games-hub[data-active-game] { max-width:none; }
.site-layout~.site-footer { max-width:var(--game-shell-width); padding-inline:var(--game-shell-gutter); }
.site-layout>.flip-page { min-width:0; width:100%; padding:28px 0 32px; }
.activity-feed { grid-column:1; grid-row:1; position:sticky; top:20px; align-self:start; min-width:0; margin-top:28px; border:1px solid #284b68; border-radius:18px; background:linear-gradient(155deg,#0e2338ed,#081625e8); box-shadow:inset 0 1px 0 #b8e5ff0b,0 12px 40px #01071144; backdrop-filter:blur(14px); overflow:hidden; z-index:1; }
.activity-feed-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 14px; border-bottom:1px solid var(--line); }
.activity-feed-toggle { display:flex; align-items:center; gap:8px; min-height:44px; padding:0; border:0; background:transparent; color:var(--ink); font-size:12px; font-weight:700; }
.activity-feed-dot { width:6px; height:6px; flex:none; border-radius:50%; background:var(--accent); box-shadow:0 0 10px #59c9ff44; }
.activity-feed[data-connection="unavailable"] .activity-feed-dot,.activity-feed[data-connection="paused"] .activity-feed-dot { background:var(--muted); box-shadow:none; }
.activity-feed-toggle svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.6; }
.activity-feed-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.activity-feed-pause { min-height:44px; min-width:44px; max-width:70px; padding:0; border:0; background:transparent; color:var(--muted); font-size:9px; line-height:1.5; text-align:right; }
.activity-feed-pause:hover { color:var(--ink); }
.activity-feed-panel { max-height:min(650px,calc(100svh - 180px)); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#3d6485 transparent; }
.activity-feed-status { margin:0; padding:17px 14px; color:var(--muted); font-size:11px; line-height:1.6; }
.activity-feed-list { list-style:none; margin:0; padding:0 12px; }
.activity-row { display:grid; grid-template-columns:25px minmax(0,1fr) auto; gap:8px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }
.activity-row:last-child { border-bottom:0; }
.activity-avatar { display:grid; place-items:center; width:25px; height:25px; border:1px solid #356b94; border-radius:8px; background:#153b58; color:var(--lavender); font-size:10px; font-weight:700; }
.activity-row-body,.activity-amount { display:grid; gap:4px; min-width:0; }
.activity-username { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; font-weight:600; }
.activity-event { color:var(--muted); font-size:9px; line-height:1.4; }
.activity-time { color:#839ab3; font-size:8px; }
.activity-amount { max-width:90px; text-align:right; }
.activity-delta { color:#b8cee3; font-size:12px; font-weight:700; overflow-wrap:anywhere; }
.activity-win .activity-delta,.activity-win .activity-event { color:var(--positive); }
.activity-loss .activity-delta,.activity-loss .activity-event,.activity-even .activity-delta,.activity-even .activity-event { color:var(--activity-neutral,#9ca3af); }
:root[data-theme="light"] .activity-feed { --activity-neutral:#6b7280; }
.activity-currency { color:var(--muted); font-size:8px; line-height:1.4; }
.activity-arriving { animation:activity-arrive .35s ease-out; }
@keyframes activity-arrive { from { opacity:.25; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1101px) and (max-height:820px) {
  .site-layout>.flip-page { padding-top:20px; }
  .activity-feed { margin-top:20px; }
  .site-layout .game-tabs { margin-bottom:14px; }
  .game-header { padding-block:20px; }
  .game-header .header-usd-balance { min-height:64px; padding-block:10px; }
  .game-header .header-usd-total:not(.is-unavailable) { font-size:24px; }
}
@media(min-width:1101px) and (max-width:1250px) { .site-layout { grid-template-columns:220px minmax(0,1fr); gap:20px; } }
@media(max-width:1100px) {
  .site-layout { grid-template-columns:minmax(0,1fr); gap:0; }
  .site-layout>.flip-page { grid-column:1; grid-row:1; }
  .activity-feed { grid-column:1; grid-row:2; position:relative; top:auto; width:100%; justify-self:center; margin:0 0 24px; border-radius:14px; }
  .activity-feed-heading { padding:10px 14px; }
  .activity-feed-pause { max-width:none; font-size:10px; }
  .activity-feed-panel { max-height:300px; }
  .site-layout>.flip-page { padding-top:22px; }
  .activity-username { font-size:12px; }
  .activity-event { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .activity-arriving { animation:none; } }
