/* ==========================================================================
   IEEE Sports 2026 — Community Photo Wall — Design System
   Palette: near-black court + neon IEEE blue + arcade gold pellet accent
   Type: Press Start 2P (pixel display, used sparingly) + Space Grotesk (body)
         + JetBrains Mono (counters / timestamps / utility)
   Signature: the Pac-Man dot-trail divider — used as a section break, a
   "checking for new photos" live pulse, and the upload progress track.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:            #07070c;
  --surface:       #12121c;
  --surface-2:     #1a1a29;
  --surface-3:     #22223a;
  --line:          #2a2a40;

  --blue:          #00d9ff;
  --blue-deep:     #0047ab;
  --blue-dim:      #0a3a56;

  --gold:          #ffd23f;
  --danger:        #ff5468;
  --success:       #3ee08a;

  --white:         #f5f7fb;
  --muted:         #8b8fa3;
  --muted-2:       #5c5f72;

  --font-display:  'Press Start 2P', monospace;
  --font-body:     'Space Grotesk', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  --radius-lg:     22px;
  --radius-md:     16px;
  --radius-sm:     10px;

  --shadow-glow:   0 0 0 1px rgba(0,217,255,.15), 0 12px 40px rgba(0,217,255,.10);
  --shadow-card:   0 10px 30px rgba(0,0,0,.45);

  --max-w:         560px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(0,217,255,.10), transparent 60%),
    radial-gradient(ellipse 700px 400px at 100% 110%, rgba(0,71,171,.14), transparent 60%),
    var(--bg);
  color:var(--white);
  font-family:var(--font-body);
  min-height:100svh;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
a{ color:inherit; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* -------------------------------------------------------------------- */
/* Layout shell                                                          */
/* -------------------------------------------------------------------- */
.page{
  max-width:var(--max-w);
  margin:0 auto;
  padding:28px 20px 56px;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
.page--wide{ max-width:1400px; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--blue);
  text-transform:uppercase;
  text-align:center;
  margin:0 0 6px;
}
.brand{
  font-family:var(--font-display);
  font-size:15px;
  line-height:1.7;
  letter-spacing:.06em;
  text-align:center;
  color:var(--white);
  text-shadow:0 0 18px rgba(0,217,255,.35);
  margin:0;
}
.brand small{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.2em;
  color:var(--muted);
  margin-top:6px;
}

/* -------------------------------------------------------------------- */
/* Signature element — Pac-Man dot trail divider                        */
/* Used between header/content, as a live-poll pulse, and (variant) as  */
/* the upload progress bar.                                             */
/* -------------------------------------------------------------------- */
.pac-trail{
  --dot-color: var(--blue);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  height:34px;
  margin:22px 0;
  overflow:hidden;
}
.pac-trail .dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--dot-color);
  box-shadow:0 0 8px var(--dot-color);
  animation:pac-dot-fade 1.8s ease-in-out infinite;
}
.pac-trail .dot:nth-child(1){ animation-delay:0s; }
.pac-trail .dot:nth-child(2){ animation-delay:.15s; }
.pac-trail .dot:nth-child(3){ animation-delay:.3s; }
.pac-trail .dot:nth-child(4){ animation-delay:.45s; }
.pac-trail .dot:nth-child(5){ animation-delay:.6s; }
@keyframes pac-dot-fade{
  0%,100%{ opacity:.25; transform:scale(.8); }
  35%{ opacity:1; transform:scale(1.15); }
}
.pac-trail .pac{
  position:absolute;
  left:-24px;
  width:20px; height:20px;
  animation:pac-run 3.2s linear infinite;
}
.pac-trail .pac svg{ width:100%; height:100%; }
.pac-trail .pac .mouth{ animation:pac-chomp .28s steps(1) infinite; transform-origin:10px 10px; }
@keyframes pac-run{
  0%{ left:-24px; }
  100%{ left:calc(100% + 4px); }
}
@keyframes pac-chomp{
  0%{ transform:rotate(0deg); }
  50%{ transform:rotate(0deg); }
  51%{ transform:rotate(0deg) scaleY(.35); }
  100%{ transform:rotate(0deg); }
}

/* Compact variant used as a live status pulse (gallery header) */
.pac-trail--tiny{ height:20px; gap:8px; margin:0; }
.pac-trail--tiny .dot{ width:5px; height:5px; }
.pac-trail--tiny .pac{ width:14px; height:14px; }

/* -------------------------------------------------------------------- */
/* Hero                                                                   */
/* -------------------------------------------------------------------- */
.hero{ text-align:center; margin-top:6px; }
.hero h1{
  font-size:clamp(26px,7vw,36px);
  line-height:1.15;
  margin:0 0 10px;
  font-weight:700;
}
.hero h1 .em{ color:var(--gold); }
.hero p{
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
  max-width:38ch;
  margin:0 auto;
}

/* -------------------------------------------------------------------- */
/* CTA cards / buttons                                                   */
/* -------------------------------------------------------------------- */
.stack{ display:flex; flex-direction:column; gap:14px; margin-top:26px; }

.cta{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  padding:20px 22px;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  color:var(--white);
  font-family:var(--font-body);
  font-weight:600;
  font-size:16px;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.cta:active{ transform:scale(.98); }
.cta .ic{ font-size:22px; line-height:1; }

.cta--primary{
  border-color:rgba(0,217,255,.4);
  background:linear-gradient(180deg, var(--blue-dim), var(--surface));
  box-shadow:var(--shadow-glow);
}
.cta--primary:hover{ border-color:var(--blue); }

.cta--gold{
  border-color:rgba(255,210,63,.5);
  color:#1a1406;
  background:linear-gradient(180deg, var(--gold), #e6b800);
  font-weight:700;
}
.cta--gold:hover{ filter:brightness(1.05); }

.cta--ghost{
  background:transparent;
  border-color:var(--line);
  color:var(--muted);
  font-size:14px;
  padding:14px 18px;
}
.cta--ghost:hover{ border-color:var(--muted-2); color:var(--white); }

.cta--danger-outline{
  background:transparent;
  border-color:rgba(255,84,104,.4);
  color:var(--danger);
}

.cta[disabled]{ opacity:.5; pointer-events:none; }

.link-row{ text-align:center; margin-top:22px; }
.link-cta{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--blue);
  text-decoration:none;
  letter-spacing:.04em;
}
.link-cta:hover{ text-decoration:underline; }

/* -------------------------------------------------------------------- */
/* Section label                                                         */
/* -------------------------------------------------------------------- */
.section-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 12px;
  text-align:center;
}

/* Recent moments strip */
.recent-strip{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:2px 2px 8px;
  scrollbar-width:none;
}
.recent-strip::-webkit-scrollbar{ display:none; }
.recent-strip img{
  width:74px; height:74px;
  object-fit:cover;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  flex:0 0 auto;
}
.recent-strip .ph{
  width:74px; height:74px;
  border-radius:var(--radius-sm);
  border:1px dashed var(--line);
  flex:0 0 auto;
}

/* -------------------------------------------------------------------- */
/* Preview / camera step                                                 */
/* -------------------------------------------------------------------- */
.preview-frame{
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-card);
}
.preview-frame img{ width:100%; max-height:62vh; object-fit:contain; background:#000; }

.consent{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:18px 2px 6px;
  padding:14px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--line);
}
.consent input[type="checkbox"]{
  width:20px; height:20px;
  accent-color:var(--blue);
  margin-top:1px;
  flex:0 0 auto;
}
.consent label{ font-size:13px; color:var(--muted); line-height:1.55; }

/* Upload progress — variant of the pac-trail signature */
.progress-track{
  position:relative;
  height:10px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--line);
  overflow:hidden;
  margin:16px 0 4px;
  display:none;
}
.progress-track.is-active{ display:block; }
.progress-fill{
  position:absolute; inset:0 auto 0 0;
  width:0%;
  background:linear-gradient(90deg, var(--blue-deep), var(--blue));
  box-shadow:0 0 10px var(--blue);
  transition:width .25s ease;
}
.progress-note{
  text-align:center;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
}

/* -------------------------------------------------------------------- */
/* Success screen                                                        */
/* -------------------------------------------------------------------- */
.success{ text-align:center; padding:20px 6px 0; }
.success .badge{
  width:88px; height:88px;
  margin:0 auto 18px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:40px;
  background:radial-gradient(circle at 35% 30%, var(--gold), #b88a00 70%);
  box-shadow:0 0 40px rgba(255,210,63,.35);
}
.success h2{ font-size:22px; margin:0 0 8px; }
.success p{ color:var(--muted); font-size:14px; margin:0 0 26px; }

/* -------------------------------------------------------------------- */
/* Toast / error                                                         */
/* -------------------------------------------------------------------- */
.toast{
  position:fixed;
  left:50%; bottom:20px;
  transform:translateX(-50%) translateY(120%);
  background:var(--surface-3);
  border:1px solid var(--line);
  color:var(--white);
  padding:12px 18px;
  border-radius:var(--radius-md);
  font-size:13px;
  max-width:calc(100% - 32px);
  box-shadow:var(--shadow-card);
  transition:transform .25s ease;
  z-index:80;
}
.toast.is-visible{ transform:translateX(-50%) translateY(0); }
.toast.is-error{ border-color:rgba(255,84,104,.5); color:#ffd7dc; }

/* -------------------------------------------------------------------- */
/* Gallery page                                                          */
/* -------------------------------------------------------------------- */
.gallery-header{
  max-width:1400px;
  margin:0 auto;
  padding:26px 20px 10px;
  text-align:center;
}
.gallery-header h1{
  font-size:clamp(22px,4.4vw,34px);
  margin:6px 0 4px;
}
.live-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(0,217,255,.35);
  background:rgba(0,217,255,.06);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--blue);
  text-transform:uppercase;
  margin-top:10px;
}
.live-pill .lp-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--success);
  box-shadow:0 0 8px var(--success);
  animation:pac-dot-fade 1.4s ease-in-out infinite;
}

.masonry{
  columns:2 220px;
  column-gap:12px;
  max-width:1400px;
  margin:18px auto 40px;
  padding:0 14px;
}
@media (min-width:640px){ .masonry{ columns:3 260px; column-gap:16px; } }
@media (min-width:1000px){ .masonry{ columns:4 280px; } }
@media (min-width:1400px){ .masonry{ columns:5 280px; } }

.tile{
  break-inside:avoid;
  margin:0 0 12px;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface);
  cursor:zoom-in;
  position:relative;
}
@media (min-width:640px){ .tile{ margin-bottom:16px; } }
.tile img{
  width:100%; height:auto; display:block;
  transition:transform .35s ease;
}
.tile:hover img{ transform:scale(1.035); }
.tile.is-new::after{
  content:'NEW';
  position:absolute; top:8px; right:8px;
  font-family:var(--font-mono);
  font-size:9px; letter-spacing:.1em;
  background:var(--gold); color:#1a1406;
  padding:3px 7px; border-radius:6px;
  animation:pac-dot-fade 1.6s ease-in-out 3;
}

.gallery-empty{
  text-align:center;
  color:var(--muted);
  padding:60px 20px;
  font-size:14px;
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  background:rgba(4,4,8,.92);
  display:none;
  align-items:center; justify-content:center;
  padding:28px;
  z-index:90;
  backdrop-filter:blur(6px);
}
.lightbox.is-open{ display:flex; }
.lightbox img{ max-width:100%; max-height:88vh; border-radius:var(--radius-md); box-shadow:0 20px 60px rgba(0,0,0,.6); }
.lightbox-close{
  position:absolute; top:20px; right:22px;
  width:40px; height:40px;
  border-radius:50%;
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--white);
  font-size:18px;
  cursor:pointer;
}

/* -------------------------------------------------------------------- */
/* QR page (screen + print)                                              */
/* -------------------------------------------------------------------- */
.qr-card{
  margin:26px auto 0;
  padding:36px 28px 30px;
  max-width:420px;
  text-align:center;
  border-radius:28px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow:var(--shadow-card);
}
.qr-box{
  width:min(78vw,260px);
  height:min(78vw,260px);
  margin:22px auto;
  padding:14px;
  background:#fff;
  border-radius:18px;
  display:flex; align-items:center; justify-content:center;
}
.qr-box canvas, .qr-box img{ width:100%; height:100%; }
.qr-steps{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--blue);
  text-transform:uppercase;
  margin:18px 0 0;
}
.qr-url{
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--muted-2);
  word-break:break-all;
}

@media print{
  body{ background:#fff !important; }
  .no-print{ display:none !important; }
  .qr-card{
    box-shadow:none;
    border:2px solid #000;
    background:#fff;
    color:#000;
  }
  .brand, .qr-steps{ color:#000 !important; text-shadow:none !important; }
  .qr-url{ color:#333 !important; }
  .pac-trail .dot{ background:#000; box-shadow:none; }
}

/* -------------------------------------------------------------------- */
/* Utility                                                                */
/* -------------------------------------------------------------------- */
.hidden{ display:none !important; }
.visually-hidden{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }