/* =====================================================================
   Watchers Park — FIFA-themed stylesheet (mobile-first)
   Palette: pitch green, trophy gold, charcoal night
   ===================================================================== */
:root{
  --bg:#0b0e13;
  --bg-2:#11151d;
  --panel:#161b24;
  --panel-2:#1c2230;
  --line:#2a3140;
  --ink:#f4f6fb;
  --muted:#96a0b2;
  --green:#12b866;
  --green-d:#0b6b3a;
  --green-glow:rgba(18,184,102,.35);
  --gold:#e7c24a;
  --gold-d:#b8912a;
  --red:#ff5470;
  --radius:16px;
  --shadow:0 18px 40px -18px rgba(0,0,0,.8);
  --maxw:520px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(18,184,102,.18), transparent 60%),
    radial-gradient(800px 500px at 90% 10%, rgba(231,194,74,.10), transparent 55%),
    var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  line-height:1.5;
}
a{color:var(--gold);text-decoration:none}

.display{font-family:'Anton',Impact,sans-serif;font-weight:400;letter-spacing:.5px;text-transform:uppercase}

/* ---- shell ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:18px 16px 40px}
.wrap-wide{max-width:960px}

/* ---- top bar / brand ---- */
.brand{display:flex;align-items:center;gap:12px;padding:6px 2px 14px}
.brand-logo{height:46px;width:auto;max-width:min(70vw,260px);display:block;object-fit:contain}
.brand .ball{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:
    radial-gradient(circle at 32% 30%, #fff 0 30%, transparent 31%),
    conic-gradient(from 20deg,#141414 0 12%,#fff 12% 20%,#141414 20% 32%,#fff 32% 40%,#141414 40% 52%,#fff 52% 60%,#141414 60% 72%,#fff 72% 80%,#141414 80% 92%,#fff 92% 100%);
  box-shadow:0 0 0 2px #000, 0 6px 18px rgba(0,0,0,.5);
}
.brand .name{font-size:15px;font-weight:800;letter-spacing:.4px}
.brand .name small{display:block;color:var(--muted);font-weight:500;font-size:11px;letter-spacing:1.5px;text-transform:uppercase}

/* ---- hero match card ---- */
.hero{
  position:relative;border-radius:22px;overflow:hidden;
  background:linear-gradient(160deg,#0e3a24, #0a2b1b 55%, #0b0e13);
  border:1px solid #1f3a2c;
  box-shadow:var(--shadow);
}
.hero:before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 34px, transparent 34px 68px);
  pointer-events:none;
}
.hero-inner{position:relative;padding:20px 18px}
.hero .kicker{color:var(--gold);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;font-weight:700}
.hero h1{margin:6px 0 2px;font-size:clamp(22px,7vw,30px);line-height:1.05}
.hero .meta{color:#bfe7cf;font-size:13px}

.match{display:flex;align-items:center;justify-content:center;gap:14px;margin:18px 0 6px}
.team{flex:1;text-align:center}
.team .crest{
  width:56px;height:56px;margin:0 auto 8px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:22px;
  background:linear-gradient(145deg,#1c2230,#12161f);border:1px solid var(--line);color:var(--gold)
}
.team .tname{font-weight:800;font-size:15px}
.vs{font-family:'Anton',sans-serif;font-size:20px;color:var(--gold);opacity:.9;padding:0 2px}

/* ---- seats / progress ---- */
.seats{margin-top:14px}
.seats .row{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px}
.seats .row b{color:var(--ink)}
.bar{height:10px;border-radius:99px;background:#0a1712;overflow:hidden;border:1px solid #143024}
.bar>span{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--green),#7ef0b0);
  box-shadow:0 0 14px var(--green-glow);transition:width .5s ease}

/* ---- cards / panels ---- */
.card{background:linear-gradient(180deg,var(--panel),var(--bg-2));border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card+.card{margin-top:14px}
.section-title{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:22px 2px 10px;font-weight:700}

/* ---- forms ---- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:#c7cede;margin-bottom:7px;letter-spacing:.3px}
.field .req{color:var(--gold)}
input,select,textarea{
  width:100%;padding:14px 14px;border-radius:12px;border:1px solid var(--line);
  background:#0d121a;color:var(--ink);font-size:16px;font-family:inherit;outline:none;
  transition:border-color .15s, box-shadow .15s;
}
input::placeholder{color:#5c6577}
input:focus,select:focus,textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(18,184,102,.18)}
.hint{font-size:11.5px;color:var(--muted);margin-top:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.two{grid-template-columns:1fr}}

/* ---- searchable dropdown ---- */
.combo{position:relative}
.combo-list{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
  background:#0d121a;border:1px solid var(--line);border-radius:12px;max-height:240px;overflow:auto;
  box-shadow:0 20px 40px -12px rgba(0,0,0,.7);display:none
}
.combo-list.open{display:block}
.combo-opt{padding:12px 14px;font-size:15px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04)}
.combo-opt:last-child{border-bottom:0}
.combo-opt:hover,.combo-opt.active{background:rgba(18,184,102,.14)}
.combo-opt .mark{color:var(--green);font-weight:700}
.combo-empty{padding:14px;color:var(--muted);font-size:13px}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:15px 18px;border:0;border-radius:13px;font-size:16px;font-weight:800;cursor:pointer;
  font-family:inherit;letter-spacing:.3px;transition:transform .06s, filter .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(180deg,#ffd867,var(--gold-d));color:#241b00;box-shadow:0 10px 24px -10px rgba(231,194,74,.7)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-green{background:linear-gradient(180deg,#20d47c,var(--green-d));color:#03260f}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn-danger{background:linear-gradient(180deg,#ff6a83,#b3213a);color:#fff}
.btn-sm{width:auto;padding:9px 14px;font-size:13px;border-radius:10px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---- notices ---- */
.notice{border-radius:12px;padding:14px 16px;font-size:14px;margin-bottom:14px;border:1px solid}
.notice.warn{background:rgba(231,194,74,.08);border-color:rgba(231,194,74,.4);color:#f6e5ac}
.notice.err{background:rgba(255,84,112,.08);border-color:rgba(255,84,112,.4);color:#ffc2cd}
.notice.ok{background:rgba(18,184,102,.08);border-color:rgba(18,184,102,.4);color:#b8f5d4}
.notice.closed{background:rgba(255,84,112,.06);border-color:rgba(255,84,112,.35);color:#ffb3c0;text-align:center}

/* ---- price pill ---- */
.pricepill{display:inline-flex;align-items:baseline;gap:8px;background:#0d121a;border:1px solid var(--line);border-radius:99px;padding:8px 16px;margin-top:12px}
.pricepill .amt{font-family:'Anton',sans-serif;font-size:22px;color:var(--gold)}
.pricepill .lbl{font-size:11px;color:var(--muted);letter-spacing:1px;text-transform:uppercase}

/* ---- footer ---- */
.foot{text-align:center;color:#5b6472;font-size:11.5px;margin-top:26px;letter-spacing:.3px}

/* ---- ticket page ---- */
.ticket{text-align:center}
.ticket .qrbox{background:#fff;border-radius:18px;padding:18px;display:inline-block;margin:6px auto 10px}
.ticket .qrbox img{display:block;width:250px;height:250px;max-width:70vw}
.kv{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--muted)}
.badge{display:inline-block;padding:5px 12px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.badge.paid{background:rgba(18,184,102,.16);color:#7ef0b0;border:1px solid rgba(18,184,102,.5)}
.badge.used{background:rgba(255,84,112,.14);color:#ffb3c0;border:1px solid rgba(255,84,112,.5)}

/* ---- admin / scanner tables ---- */
.topnav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.topnav .links{display:flex;gap:8px;flex-wrap:wrap}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.stat .n{font-family:'Anton',sans-serif;font-size:30px;line-height:1}
.stat .l{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:6px}
.stat.green .n{color:var(--green)} .stat.gold .n{color:var(--gold)} .stat.red .n{color:var(--red)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th,table.tbl td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}
table.tbl th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}

/* ---- counter widget ---- */
.counter{display:flex;align-items:center;gap:10px}
.counter button{width:44px;height:44px;border-radius:12px;font-size:22px;font-weight:800;border:1px solid var(--line);background:#0d121a;color:var(--ink);cursor:pointer}
.counter input{width:96px;text-align:center;font-family:'Anton',sans-serif;font-size:20px}

/* ---- scanner result ---- */
#scanbox{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#000}
.scan-result{border-radius:16px;padding:22px;text-align:center;margin-top:14px;display:none}
.scan-result.show{display:block;animation:pop .25s ease}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.scan-result.success{background:linear-gradient(180deg,#0e3a24,#0a2016);border:1px solid var(--green)}
.scan-result.fail{background:linear-gradient(180deg,#3a0e1a,#200a10);border:1px solid var(--red)}
.scan-result .big{font-family:'Anton',sans-serif;font-size:26px;margin:6px 0}
.scan-result.success .big{color:#7ef0b0}
.scan-result.fail .big{color:#ffb3c0}
.scan-result .who{font-size:15px;font-weight:700}
.scan-result .sub{color:var(--muted);font-size:13px;margin-top:6px}

/* ------------------------------------------------------------------ */
/*  Virtual waiting room (public)                                     */
/* ------------------------------------------------------------------ */
.queue-card{text-align:center;padding:26px 20px}
.queue-card .q-tag{display:inline-block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold);border:1px solid rgba(231,194,74,.4);border-radius:999px;padding:4px 12px;margin-bottom:6px}
.queue-card .q-emoji{font-size:40px;margin-bottom:8px}
.q-pos{margin:18px auto 10px}
.q-pos-num{font-family:'Anton',sans-serif;font-size:64px;line-height:1;color:var(--green);letter-spacing:1px}
.q-pos-lbl{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.q-stats{display:flex;justify-content:center;gap:22px;margin:16px 0 4px;flex-wrap:wrap}
.q-stats > div{display:flex;flex-direction:column;min-width:70px}
.q-stats span{font-size:20px;font-weight:800}
.q-stats small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.q-note{font-size:12px;color:var(--muted);margin-top:14px}
.q-dots{display:flex;justify-content:center;gap:8px;margin:18px 0 4px}
.q-dots span{width:10px;height:10px;border-radius:50%;background:var(--green);opacity:.35;animation:qpulse 1.2s infinite}
.q-dots span:nth-child(2){animation-delay:.2s}
.q-dots span:nth-child(3){animation-delay:.4s}
@keyframes qpulse{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

/* Admin queue panel */
.qadmin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px;text-align:center}
.qadmin-grid > div{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px 6px}
.qadmin-num{font-family:'Anton',sans-serif;font-size:30px;line-height:1}
.qadmin-grid small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.qtoggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.qtoggle input{width:18px;height:18px}
@media (max-width:520px){.qadmin-grid{grid-template-columns:repeat(2,1fr)}}

/* Booking-window countdown (shown while holding a queue admission pass) */
.qtimer{position:sticky;top:8px;z-index:50;margin-top:14px;padding:12px 16px;border-radius:12px;text-align:center;
  font-size:14px;background:rgba(18,184,102,.12);border:1px solid rgba(18,184,102,.45);color:#bdf0d4}
.qtimer b{font-variant-numeric:tabular-nums}
.qtimer.urgent{background:rgba(220,60,60,.14);border-color:rgba(220,60,60,.55);color:#f6c1c1;animation:qtpulse 1s infinite}
@keyframes qtpulse{0%,100%{box-shadow:0 0 0 0 rgba(220,60,60,.25)}50%{box-shadow:0 0 0 6px rgba(220,60,60,0)}}

/* Participant-type / yes-no selector cards */
.ptype-row{display:flex;gap:10px;flex-wrap:wrap}
.ptype{flex:1;min-width:140px;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);transition:border-color .15s}
.ptype input{width:16px;height:16px;accent-color:var(--green)}
.ptype span{display:flex;flex-direction:column;line-height:1.25}
.ptype small{color:var(--muted);font-size:11px}
.ptype.sel{border-color:var(--green);background:rgba(18,184,102,.08)}

/* Events hub cards */
a.eventcard{display:block;text-decoration:none;color:inherit;margin-bottom:12px;transition:border-color .15s}
a.eventcard:hover{border-color:var(--green)}

/* Guided-help tooltips (hover or tap the "?") */

/* Photo capture widget */
.photo-cap{border:1px dashed rgba(255,255,255,.18);border-radius:14px;padding:14px;margin-bottom:6px}
.pc-btns{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.pc-video,.pc-preview{width:100%;max-width:320px;border-radius:12px;display:block;margin:8px auto}
.pc-checks{list-style:none;margin:8px 0 0;padding:0;font-size:12.5px}
.pc-checks li{padding:2px 0}
.pc-checks li.ok{color:var(--green)}
.pc-checks li.bad{color:#ff8a8a}
.pc-status{font-size:12px;color:var(--muted);margin-top:8px;text-align:center}


/* ===== v2 polish: public forms — clean, lucid, calm ===== */
.field label{font-weight:600;font-size:12.5px;letter-spacing:.01em}
input,select,textarea{border-radius:12px;padding:12px 14px;font-size:15px;border-width:1.5px;transition:border-color .15s, box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 4px rgba(37,99,235,.14)}
.field{margin-bottom:16px}
.hint{line-height:1.5}
.btn{border-radius:12px}
.btn-primary{box-shadow:0 3px 14px rgba(0,0,0,.18)}
form .field input[type=radio], form .field input[type=checkbox]{accent-color:var(--green,#2563eb)}
@media (max-width:760px){
  .wrap{padding:12px}
  .two{grid-template-columns:1fr !important}
  input,select,textarea,.btn{min-height:46px;font-size:16px}
  h1.display,h2.display{font-size:22px}
  .card{padding:16px;border-radius:16px}
}

/* Rendered rich text (About / Terms) on the public event page */
.richbody{font-size:14.5px;line-height:1.65;color:var(--ink)}
.richbody p{margin:0 0 10px}
.richbody ul,.richbody ol{margin:0 0 10px;padding-left:22px}
.richbody li{margin:2px 0}
.richbody h3{font-size:17px;margin:6px 0 8px}
.richbody h4{font-size:15px;margin:6px 0 6px}
.richbody a{color:var(--gold);text-decoration:underline}
.richbody b,.richbody strong{font-weight:700}

/* ============================================================
   PU Hangouts — vibrant public theme (regular events).
   Applied via <body class="puvibe">. Screenings keep the
   default cinema look.
   ============================================================ */
body.puvibe{ background:
  radial-gradient(1000px 460px at 100% -12%, rgba(255,255,255,.035), transparent 60%),
  var(--bg); }
body.puvibe .brand{ gap:0; padding:14px 2px 20px; justify-content:center; }
body.puvibe .brand .ball,body.puvibe .brand .name{ display:none; }
body.puvibe .brand-logo{ height:44px; }

/* Hero is a dark card consistent with the rest of the page; the vibe shows as
   a slim top accent bar + a faint corner glow, not a full gradient slab. */
body.puvibe .hero{
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 120px), var(--card, #12151c);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
body.puvibe .hero:before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;opacity:1;
  background:var(--hero-grad, linear-gradient(90deg,#ff8a3d,#f65c9a,#37b6b0));
}
body.puvibe .hero:after{
  content:"";position:absolute;right:-50px;top:-50px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle, var(--vibe-glow, rgba(255,138,61,.16)), transparent 70%);
  pointer-events:none;
}
body.puvibe .hero .kicker{ color:var(--vibe-bright, #ff9a5a); opacity:1; }
body.puvibe .hero h1{ color:#fff; }
body.puvibe .hero .meta{ color:var(--muted); }
body.puvibe .seats .row span{ color:var(--muted); }

body.puvibe .pricepill{
  background:rgba(255,255,255,.05); border:1px solid var(--line); box-shadow:none;
}
body.puvibe .pricepill .amt{ color:var(--vibe-bright, #ff9a5a); }
body.puvibe .pricepill .lbl{ color:var(--muted); }

body.puvibe .section-title{ color:var(--vibe-bright, #ff9a5a); }
body.puvibe .card{ border-radius:18px; }
body.puvibe .aboutcard{ border-color:var(--line); }
body.puvibe .btn-primary{
  background:var(--hero-grad, linear-gradient(135deg,#ff8a3d,#f65c9a)); color:#fff; border:none;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
}
body.puvibe a{ color:var(--vibe-bright, #37b6b0); }
body.puvibe .richbody a{ color:var(--vibe-bright, #ef6a2e); }

/* Home event cards: per-event vibe strip (decorative; text stays on the dark card) */
.eventcard{position:relative;overflow:hidden}
.eventcard .ec-vibe{position:absolute;left:0;top:0;right:0;height:5px}
.eventcard{padding-top:20px}