/* Graysen HQ — "game wall": a drifting grid of in-game action shots behind the page.
   Loaded by bg/wall.js on the dashboard and on the login page. */
.gwall{position:fixed; inset:-4vh -4vw; z-index:0; pointer-events:none; overflow:hidden;
  display:grid; gap:10px; padding:10px;
  grid-template-columns:repeat(auto-fill, minmax(min(360px, 46vw), 1fr)); grid-auto-rows:auto; align-content:start;
  opacity:var(--gwall-opacity, .9); background:#04060c;
  transform:rotate(-2.2deg) scale(1.08); transform-origin:50% 50%}
.gwall .gt{position:relative; overflow:hidden; border-radius:12px; border:1px solid rgba(120,190,255,.14);
  background:#070b17; aspect-ratio:16/9; animation:gt-bob var(--d, 14s) ease-in-out var(--o, 0s) infinite alternate}
.gwall .gt img{position:absolute; inset:-6%; width:112%; height:112%; object-fit:cover; filter:saturate(1.2) contrast(1.06);
  opacity:0; transition:opacity 1.6s ease; animation:gt-pan var(--p, 26s) ease-in-out var(--o, 0s) infinite alternate}
.gwall .gt img.on{opacity:1}
.gwall .gt::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 64%, rgba(4,6,12,.78)), linear-gradient(90deg, rgba(61,232,255,.05), transparent 40%)}
.gwall .gt b{position:absolute; left:12px; right:12px; bottom:10px; z-index:1; font:600 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing:.22em; text-transform:uppercase; color:#8ad8ff; text-shadow:0 0 12px rgba(61,232,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gwall .gt b em{display:block; font:800 15px/1.2 "Orbitron","Chakra Petch",system-ui,sans-serif; letter-spacing:.08em; color:#fff; margin-top:3px}
.gwall .gt i{position:absolute; inset:0; z-index:1; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(61,232,255,.0);
  animation:gt-glow var(--d, 14s) ease-in-out var(--o, 0s) infinite alternate}
.gwall-veil{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(4,6,12,var(--gwall-veil-top, .4)), rgba(4,6,12,var(--gwall-veil, .65)) 70%),
    linear-gradient(180deg, rgba(4,6,12,.08), rgba(4,6,12,.42))}
@keyframes gt-pan{from{transform:translate(-2.5%,-2%) scale(1)} to{transform:translate(2.5%,2%) scale(1.06)}}
@keyframes gt-bob{from{transform:translateY(0)} to{transform:translateY(-6px)}}
@keyframes gt-glow{0%,70%{box-shadow:inset 0 0 0 1px rgba(61,232,255,0)} 85%{box-shadow:inset 0 0 0 1px rgba(61,232,255,.6), 0 0 22px rgba(61,232,255,.25)} 100%{box-shadow:inset 0 0 0 1px rgba(61,232,255,0)}}
@media (max-width:640px){
  .gwall{grid-template-columns:repeat(2, 1fr); gap:6px; padding:6px}
  .gwall .gt b{font-size:8.5px; left:8px; bottom:6px} .gwall .gt b em{font-size:11px}
}
@media (prefers-reduced-motion:reduce){ .gwall, .gwall .gt, .gwall .gt img, .gwall .gt i{animation:none!important; transform:none!important} }
