/* ============================================================================
   Before You Pop™ — SITEWIDE DESIGN SYSTEM  (byp-design.css)
   ----------------------------------------------------------------------------
   The approved BYP visual language, shared across EVERY customer-facing page.
   True black base · white primary text · neon pink / electric blue / violet ·
   lime (Harmony / positive / success only). Gold reserved for special.

   Loaded globally (after styles-entry / gameplay / checkflow) so these rules
   win regardless of which page renders. It is the single source of truth for:

     • section headings (accent line + glow + generous spacing)
     • page cards / content blocks (dark card, subtle border, glow, padding)
     • the button system (hover / focus / pressed / selected, context colors)
     • form fields + labels (readable, high-contrast, not tiny grey)
     • the guided Event Setup sections + progress nav
     • typography spacing on desktop / tablet / mobile

   All component classes are additive and safe with existing markup.
   ========================================================================= */

/* ---------- shared brand mini icon (balloon-burst) ---------- */
:root{
  /* typography scale */
  --h1:clamp(26px,6vw,40px);          /* page title */
  --h2:clamp(19px,4vw,26px);          /* page intro / big section step number */
  --h3:clamp(15px,3.4vw,19px);          /* section title */
  --label:12.5px;                     /* field label */
  --body:15px;
  --support:12.5px;                   /* help / description text */
  /* glow + edge tokens */
  --glow-pink:0 0 22px rgba(255,46,196,.35);
  --glow-blue:0 0 22px rgba(0,229,255,.32);
  --glow-violet:0 0 22px rgba(168,85,255,.32);
  --glow-lime:0 0 18px rgba(200,255,0,.28);
  --card-bg:#080808;
  --card-bg2:#0d0d0d;
  --line:#1e1e1e;
  --line-strong:#2e2e2e;
  --support:rgba(255,255,255,.17);    /* faint section stroke */
  --shell-r:18px;                     /* card radius */
  --press:scale(.985);
}

/* ============================================================================
   1. SECTION HEADINGS — immediately scannable, guarded with accent + spacing
   ========================================================================= */
/* Default containers added on every page get consistent breathing room. */
#gamePlayView.gp, .checkflow, #matchView, #liveView, #enterGameView{
  padding-bottom:140px;                 /* clear the persistent bottom nav/chips */
}

/* ---- section heading component (drop-in) ---- */
.gp-sec{
  display:flex;align-items:flex-start;gap:12px;
  margin:30px 0 14px;
}
.gp-sec-badge{
  flex:none;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;font-family:'Archivo';font-weight:900;font-size:15px;
  color:#000;background:linear-gradient(135deg,var(--pink),var(--violet));
  box-shadow:0 0 16px rgba(255,46,196,.28);
}
.gp-sec-txt{flex:1;min-width:0}
.gp-sec-title{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:var(--h3);letter-spacing:.01em;line-height:1.2;color:#fff;
  text-transform:uppercase;
}
.gp-sec-rule{
  margin-top:7px;height:2px;border-radius:2px;width:min(120px,42%);
  background:linear-gradient(90deg,var(--pink),var(--blue));
  box-shadow:0 0 10px rgba(255,46,196,.45);
}
.gp-sec :is(.gp-label-help,.gp-sec-sub,.gp-sub,.gp-muted){
  margin-top:6px;
}

/* ---- theme variants for section accent lines ---- */
.gp-sec.blue .gp-sec-badge{background:linear-gradient(135deg,#7ce9ff,#00c2e0)}
.gp-sec.blue .gp-sec-rule{background:linear-gradient(90deg,var(--blue),var(--violet))}
.gp-sec.violet .gp-sec-badge{background:linear-gradient(135deg,#c79bff,#8a3dff)}
.gp-sec.violet .gp-sec-rule{background:linear-gradient(90deg,var(--violet),var(--pink))}
.gp-sec.lime .gp-sec-badge{background:linear-gradient(135deg,#e4ff8f,#b4e000)}
.gp-sec.lime .gp-sec-rule{background:linear-gradient(90deg,var(--lime),var(--blue))}

/* ---- legacy .gp-pane-title / .pane-title upgraded to the same system ---- */
.gp-pane-title, .pane-title, .flow-card .label-head{
  display:flex;align-items:center;gap:9px;
  font-size:var(--label);letter-spacing:.22em;text-transform:uppercase;
  color:#fff;font-weight:800;
}
.gp-pane-title::before, .pane-title::before, .flow-card .label-head::before{
  content:'';flex:none;width:10px;height:10px;border-radius:3px;
  background:linear-gradient(135deg,var(--pink),var(--blue));
  box-shadow:0 0 8px rgba(255,46,196,.5);
}
/* Fancy divider under pane titles living at the top of a card body. */
.gp-pane-headline{font-weight:800;color:#fff;font-size:var(--h3);text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}

/* ============================================================================
   2. PAGE CARDS / CONTENT BLOCKS
   Dark card interior + subtle border + rounded corners + soft glow + padding.
   ========================================================================= */
.gp-pane, .flow-card{
  background:linear-gradient(180deg,var(--card-bg2),var(--card-bg));
  border:1px solid var(--line-strong);
  border-radius:var(--shell-r);
  padding:18px;
  margin:16px 0;
  box-shadow:0 10px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02) inset;
}
.gp-pane{position:relative;overflow:hidden}
/* very subtle top-edge brand glow on cards */
.gp-pane::after, .flow-card::after{
  content:'';position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,46,196,.55),rgba(0,229,255,.55),transparent);
  opacity:.5;pointer-events:none;
}
.gp-pane.pane-active, .gp-setup-step{box-shadow:0 0 0 1px rgba(255,46,196,.28),0 0 26px rgba(255,46,196,.10),0 10px 34px rgba(0,0,0,.5)}

/* ============================================================================
   3. BUTTON SYSTEM — clear hover / focus / pressed / selected states.
   Default: black bg + white text + white/light border. Active intent uses a
   brand accent, chosen by context (pink primary, blue secondary, violet,
   lime success). Never one flat color for everything.
   ========================================================================= */
.gp-btn, .cbtn{
  position:relative;overflow:hidden;
  min-height:44px;padding:12px 22px;
  border-radius:999px;
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.5);
  background:transparent;color:#fff;cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.gp-btn:not(:disabled):hover, .cbtn:not(:disabled):hover{transform:translateY(-1px)}
.gp-btn:active, .cbtn:active{transform:var(--press)}
.gp-btn:focus-visible, .cbtn:focus-visible{outline:2px solid var(--gpx, var(--blue));outline-offset:2px}
.gp-btn:disabled, .cbtn:disabled{opacity:.4;cursor:not-allowed}

/* default / unselected — black, white text, light border */
.gp-btn.ghost, .cbtn.ghost{
  background:#000;color:#fff;border-color:rgba(255,255,255,.38);
}
.gp-btn.ghost:not(:disabled):hover{background:#0c0c0c;border-color:rgba(255,255,255,.72)}

/* active/important — pink */
.gp-btn.primary, .cbtn.primary{
  background:var(--pink);border-color:var(--pink);color:#000;
  box-shadow:var(--glow-pink);
}
.gp-btn.primary:not(:disabled):hover, .cbtn.primary:not(:disabled):hover{box-shadow:0 0 30px rgba(255,46,196,.6);background:#ff4dd0}

/* secondary — electric blue (e.g. GAME PLAY, universal, info actions) */
.gp-btn.blue, .cbtn.blue, .gp-btn.info{
  background:var(--blue);border-color:var(--blue);color:#00171a;
  box-shadow:var(--glow-blue);
}
.gp-btn.blue:not(:disabled):hover{background:#31ecff;box-shadow:0 0 28px rgba(0,229,255,.55)}

/* violet */
.gp-btn.violet, .cbtn.violet{
  background:var(--violet);border-color:var(--violet);color:#fff;
  box-shadow:var(--glow-violet);
}
.gp-btn.violet:not(:disabled):hover{background:#b66dff}

/* success / affirmative — lime (Harmony, positive status only) */
.gp-btn.green, .cbtn.green, .gp-btn.lime, .cbtn.lime{
  background:var(--lime);border-color:var(--lime);color:#000;
  box-shadow:var(--glow-lime);
}
.gp-btn.green:not(:disabled):hover{background:#d4ff3a}

/* danger / destructive — red outline */
.gp-btn.warn, .cbtn.danger, .gp-btn.danger{
  background:transparent;border-color:rgba(255,92,92,.7);color:#ff7b7b;
}
.gp-btn.warn:not(:disabled):hover, .cbtn.danger:not(:disabled):hover{background:rgba(255,92,92,.08);border-color:#ff7b7b;color:#ff9a9a}
.gp-btn.warn:active{transform:var(--press)}

/* ============================================================================
   4. FORMS — visible labels above fields, larger inputs, real pickers.
   ========================================================================= */
.gp-form, .flow-form{display:flex;flex-direction:column;gap:8px}
.gp-form label, .checkflow .flow-card label, .flow-card label, .gp-field label{
  font-size:var(--label);letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.9);font-weight:700;
  margin:6px 0  4px;display:block;
}
.gp-form label:first-child, .flow-card label:first-child{margin-top:0}
.gp-form label .req, .flow-card label .req{color:var(--pink)}

/* large readable fields — never tiny grey */
.gp-form input:not([type=file]):not([type=checkbox]), .gp-form textarea,
.gp-code-box input, .checkflow input[type=text], .checkflow input[type=date],
.checkflow input[type=time], .checkflow input[type=email], .checkflow input[type=tel],
.checkflow input[type=password], .checkflow select,
.gp-field input[type=text], .gp-field input[type=date], .gp-field input[type=time], .gp-field select{
  width:100%;background:#0d0d0d;border:1px solid var(--line-strong);
  border-radius:12px;color:#fff;padding:14px 15px;
  font-size:16px;font-family:inherit;
  transition:border-color .16s, box-shadow .16s;
}
.gp-form input:focus, .gp-form textarea:focus, .gp-code-box input:focus,
.checkflow input:focus, .checkflow select:focus,
.gp-field input:focus, .gp-field select:focus{
  outline:none;border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(255,46,196,.14), var(--glow-pink);
}
input[type=date], input[type=time]{color-scheme:dark}

/* readable helper / description text — smaller but high contrast */
.gp-form .hint, .gp-form ul.hint, .gp-help, .gp-muted, .muted{
  font-size:var(--support);color:rgba(255,255,255,.72);line-height:1.55;
}
.gp-form .hint b, .gp-help b, .muted b{color:#fff}

/* field grouped blocks */
.gp-field{display:flex;flex-direction:column;gap:4px}
.gp-grid2, .gp-setup-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gp-setup-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* ============================================================================
   5. GUIDED EVENT SETUP  — sectioned, progress-aware, expand/collapse.
   ========================================================================= */
.gp-setup-wrap{position:relative}
.gp-progress{
  display:flex;gap:6px;align-items:center;margin:6px 0 18px;
}
.gp-prog-seg{height:5px;flex:1;border-radius:3px;background:var(--line-strong);transition:background .25s}
.gp-prog-seg.done{background:linear-gradient(90deg,var(--pink),var(--violet));box-shadow:0 0 8px rgba(255,46,196,.4)}
.gp-prog-seg.now{background:linear-gradient(90deg,var(--pink),var(--blue));box-shadow:0 0 10px rgba(255,46,196,.55)}
.gp-prog-num{font-family:Consolas,monospace;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.55);white-space:nowrap}

.gp-setup-step{
  background:linear-gradient(180deg,var(--card-bg2),var(--card-bg));
  border:1px solid var(--line-strong);border-radius:var(--shell-r);
  overflow:hidden;margin-bottom:16px;
  box-shadow:0 10px 34px rgba(0,0,0,.45);
}
.gp-step-head{
  width:100%;display:flex;align-items:center;gap:14px;text-align:left;
  background:transparent;border:none;color:inherit;cursor:pointer;
  padding:18px 18px;
}
.gp-step-num{
  flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-family:'Archivo';font-weight:900;font-size:15px;
  background:#161616;border:1px solid var(--line-strong);color:rgba(255,255,255,.6);
  transition:all .2s;
}
.gp-setup-step.open .gp-step-num{background:linear-gradient(135deg,var(--pink),var(--violet));color:#000;border-color:transparent;box-shadow:var(--glow-pink)}
.gp-step-title{flex:1;min-width:0}
.gp-step-title .t{font-family:'Archivo';font-weight:800;font-size:var(--h3);text-transform:uppercase;letter-spacing:.01em;color:#fff}
.gp-step-title .s{display:block;font-size:var(--support);color:rgba(255,255,255,.6);margin-top:2px;font-weight:400;letter-spacing:0;text-transform:none}
.gp-step-state{
  flex:none;font-size:10.5px;letter-spacing:.2em;color:var(--lime);font-weight:800;
  text-transform:uppercase;display:none;align-items:center;gap:4px;
}
.gp-step-state.ok{display:inline-flex}
.gp-step-chev{
  flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line-strong);color:rgba(255,255,255,.7);font-size:14px;transition:transform .2s;
}
.gp-setup-step.open .gp-step-chev{transform:rotate(180deg)}
.gp-step-body{display:none;padding:4px 18px 20px}
.gp-setup-step.open .gp-step-body{display:block}

.gp-setup-nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.gp-setup-nav .spacer{flex:1}

/* REVIEW summary rows */
.gp-review-card{
  background:#0c0c0c;border:1px solid var(--line-strong);border-radius:14px;padding:14px 16px;
  display:flex;flex-direction:column;gap:8px;
}
.gp-review-row{display:flex;gap:10px;font-size:14px;line-height:1.5}
.gp-review-row .k{flex:none;width:130px;color:rgba(255,255,255,.55);font-size:12.5px;letter-spacing:.06em}
.gp-review-row .v{color:#fff;word-break:break-word}
.gp-review-row .v .gp-chip{margin:0}

/* ============================================================================
   6. PEOPLE / MEMBER PRESENCE + EMPTY STATE
   ========================================================================= */
.gp-empty{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,rgba(255,46,196,.09),rgba(0,229,255,.08) 60%);
  border:1px dashed rgba(255,255,255,.28);
  border-radius:var(--shell-r);padding:32px 20px;text-align:center;
}
.gp-empty .gp-empty-glow{position:absolute;left:50%;top:-40%;transform:translateX(-50%);width:300px;height:300px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,46,196,.28),transparent);filter:blur(6px);pointer-events:none}
.gp-empty .gp-empty-emoji{position:relative;font-size:44px;margin-bottom:8px;animation:softPulse 3s ease-in-out infinite}
.gp-empty .gp-empty-title{position:relative;font-family:'Archivo';font-weight:800;font-size:16px;letter-spacing:.04em;color:#fff}
.gp-empty .gp-empty-sub{position:relative;font-size:13px;color:rgba(255,255,255,.66);margin-top:6px;max-width:360px;margin-left:auto;margin-right:auto;line-height:1.5}

/* People "here" table header — strong, count badge */
.gp-count{color:var(--pink);border-color:rgba(255,46,196,.5);background:rgba(255,46,196,.08);padding:2px 10px;border-radius:999px;font-size:12.5px}

/* refined participant card */
.gp-member-card{
  background:linear-gradient(180deg,#121212,#0a0a0a);
  border:1px solid var(--line-strong);border-radius:14px;
  padding:14px;
}
.gp-member-card:hover{border-color:var(--blue);box-shadow:0 4px 18px rgba(0,229,255,.12)}
.gp-member-name{font-family:'Archivo';font-weight:800;font-size:15.5px}
.gp-member-code{font-size:12px}

/* single preset button — black + white + subtle outline, pink/blue states */
.gp-preset{
  background:#000;border:1px solid rgba(255,255,255,.34);color:#fff;
  border-radius:999px;padding:9px 16px;font-size:13px;cursor:pointer;
  transition:transform .12s,border-color .16s, box-shadow .16s, background .16s;
}
.gp-preset:hover{transform:translateY(-1px);border-color:var(--pink);color:#fff;background:rgba(255,46,196,.1)}
.gp-preset:active{transform:var(--press)}

/* preset subgroup heading */
.gp-preset-group{
  width:100%;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.9);font-weight:800;margin:14px 0 6px;
  display:flex;align-items:center;gap:8px;
}
.gp-preset-group:first-child{margin-top:0}
.gp-preset-group::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,46,196,.4),transparent);opacity:.5}

/* ============================================================================
   7. GUIDED choice cards (WHERE ARE YOU GOING?) — pink & blue families
   ========================================================================= */
.gp-choice-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.gp-choice{
  position:relative;overflow:hidden;
  background:linear-gradient(165deg,#101010,#050505);
  border:1px solid var(--line);
  border-radius:22px;padding:30px 20px;text-align:center;cursor:pointer;
  transition:transform .2s,border-color .2s,box-shadow .2s;
  min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.gp-choice::after{content:'';position:absolute;left:12%;right:12%;bottom:-30px;height:60px;border-radius:50%;filter:blur(10px);pointer-events:none;opacity:.9}
.gp-choice:hover{transform:translateY(-6px)}
.gp-choice .gp-choice-art{font-size:54px;width:80px;height:80px;display:grid;place-items:center;line-height:1}
/* EVENT ROOM — neon pink family */
.gp-choice.event{border-color:rgba(255,46,196,.45)}
.gp-choice.event::after{background:radial-gradient(closest-side,rgba(255,46,196,.4),transparent)}
.gp-choice.event:hover{border-color:var(--pink);box-shadow:0 0 30px rgba(255,46,196,.24),0 12px 30px rgba(0,0,0,.5)}
.gp-choice.event .gp-choice-name{color:#fff}
/* UNIVERSAL ROOM — electric cool-blue family */
.gp-choice.universal{border-color:rgba(0,229,255,.45)}
.gp-choice.universal::after{background:radial-gradient(closest-side,rgba(0,229,255,.4),transparent)}
.gp-choice.universal:hover{border-color:var(--blue);box-shadow:0 0 30px rgba(0,229,255,.24),0 12px 30px rgba(0,0,0,.5)}
.gp-choice.universal .gp-choice-name{color:#fff}
.gp-choice .gp-choice-hint{color:rgba(255,255,255,.66);font-size:13px;max-width:250px;line-height:1.5}

/* ============================================================================
   8. ROOM HEADER (universal / event) — mini icon + title + ME chip
   ========================================================================= */
.gp-room-head{
  display:flex;align-items:center;gap:14px;
  padding:18px 16px;margin-bottom:4px;
  background:linear-gradient(180deg,#0d0d0d,#070707);
  border:1px solid var(--line-strong);border-radius:var(--shell-r);
}
.gp-room-mark{
  flex:none;width:52px;height:52px;border-radius:15px;
  display:grid;place-items:center;font-size:26px;color:#000;
  background:linear-gradient(135deg,var(--pink),var(--violet));
  box-shadow:0 0 22px rgba(255,46,196,.45);
}
.gp-room-mark img{width:36px;height:36px;object-fit:contain;display:block}
.gp-room-head.blue .gp-room-mark{background:linear-gradient(135deg,#58dcff,#0090b3);box-shadow:0 0 22px rgba(0,229,255,.4)}
.gp-room-txt{flex:1;min-width:0}
.gp-room-eyebrow{font-size:10.5px;letter-spacing:.42em;color:var(--pink);text-transform:uppercase;font-weight:800}
.gp-room-head.blue .gp-room-eyebrow{color:var(--blue)}
.gp-room-title{font-family:'Archivo';font-weight:900;font-size:clamp(17px,4.5vw,24px);letter-spacing:.01em;color:#fff;margin-top:2px;text-transform:uppercase}
.gp-room-sub{font-size:12.5px;color:rgba(255,255,255,.66);margin-top:2px}

/* ============================================================================
   9. RESPONSIVE — don't simply shrink desktop screens.
   ========================================================================= */
.gp-setup-grid2,.gp-setup-grid3{grid-template-columns:1fr 1fr}
@media(max-width:640px){
  .gp-setup-grid2,.gp-setup-grid3{grid-template-columns:1fr}
  .gp-choice-grid{grid-template-columns:1fr}
  .gp-room-head{padding:14px}
  .gp-review-row{flex-direction:column;gap:2px}
  .gp-review-row .k{width:auto}
  .gp-step-head{flex-wrap:wrap}
  .gp-setup-nav .spacer{display:none}
  .gp-setup-nav{justify-content:stretch}
  .gp-setup-nav .gp-btn{flex:1}
}
@media(max-width:420px){
  .gp-sec-badge{width:30px;height:30px;font-size:13px}
  .gp-upload-actions{flex-direction:column;align-items:stretch}
}

/* ============================================================================
   10. GLOBAL MINI ICON — small site / compact member branding points
   ========================================================================= */
.gp-miniicon{
  display:inline-flex;align-items:center;gap:8px;color:#fff;
  font-family:'Archivo';font-weight:900;font-size:13px;letter-spacing:.04em;
}
.gp-miniicon .gp-mini-mark{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--pink),var(--violet));box-shadow:0 0 12px rgba(255,46,196,.4)}
.gp-miniicon .gp-mini-mark img{width:22px;height:22px;object-fit:contain}