@font-face{font-family:'Optima';src:url('../fonts/Optima.ttf') format('truetype');font-weight:normal;font-style:normal;font-display:swap;}
/* ====================================================================
   MAJOR FOOTBALL CHALLENGE — v2
   Locked visual direction: premium Black / White / Silver.
   Major Black #050505 · Pure White #FFFFFF · Premium Silver #C7C9CC
   Dark Graphite #111111 · Light Platinum #E8EAED
   Fonts: Optima (primary), Helvetica Neue (secondary)
   ==================================================================== */

:root{
  --black:#050505;
  --white:#ffffff;
  --silver:#c7c9cc;
  --graphite:#111111;
  --platinum:#e8eaed;
  --line:rgba(255,255,255,.14);
  --panel:rgba(255,255,255,.045);
  --panel-2:rgba(255,255,255,.07);
  --muted:#8b8f95;
  --serif:'Optima','Optima nova','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sans:'Optima','Helvetica Neue',Helvetica,Arial,system-ui,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);background:#000;color:var(--white);
  overflow:hidden;user-select:none;-webkit-user-select:none;
}

#stage{
  position:relative;width:100%;height:100%;
  max-width:480px;max-height:920px;margin:0 auto;overflow:hidden;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(199,201,204,.16), rgba(199,201,204,0) 60%),
    linear-gradient(180deg,#0a0a0b 0%, #050505 55%, #020202 100%);
}
/* subtle floodlight glows */
#stage::before{
  content:"";position:absolute;top:-12%;left:0;right:0;height:42%;
  background:
    radial-gradient(40% 80% at 18% 0%, rgba(232,234,237,.18), transparent 70%),
    radial-gradient(40% 80% at 82% 0%, rgba(232,234,237,.18), transparent 70%),
    radial-gradient(34% 70% at 50% -6%, rgba(255,255,255,.10), transparent 70%);
  pointer-events:none;z-index:0;
}
/* faint Major brand watermark */
#stage::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('../assets/logo-white.png') no-repeat center 64%;
  background-size:74% auto;opacity:.035;
}
@media(min-width:481px){
  body{display:flex;align-items:center;justify-content:center;background:#000}
  #stage{height:920px;border-radius:30px;box-shadow:0 40px 100px rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.06)}
}

.screen{position:absolute;inset:0;display:none;flex-direction:column;padding:26px;z-index:1;animation:fade .4s ease;overflow-y:auto}
.screen.active{display:flex}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- brand / logo ---- */
.brandlogo{height:46px;margin:0 auto;display:block;object-fit:contain}
.brandlogo.lg{height:72px}
.eyebrow{font-size:11px;color:var(--silver);text-transform:uppercase;letter-spacing:4px;text-align:center}
.tagline-brand{font-size:10px;color:var(--muted);letter-spacing:3px;text-transform:uppercase;text-align:center;margin-top:8px}

h1{font-family:var(--serif);font-weight:600;font-size:34px;line-height:1.04;text-align:center;letter-spacing:.5px}
h1 .accent{color:var(--silver)}
.tagline{color:var(--silver);text-align:center;font-size:15px;line-height:1.55;font-weight:300}

.btn{
  appearance:none;border:0;cursor:pointer;width:100%;
  padding:17px;border-radius:6px;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  background:linear-gradient(180deg,#ffffff,#e8eaed);color:var(--black);
  box-shadow:0 10px 26px rgba(255,255,255,.10);transition:transform .08s,filter .15s;font-family:var(--sans);
}
.btn:active{transform:scale(.98)}
.btn.secondary{background:transparent;color:var(--white);border:1px solid var(--line);box-shadow:none;background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0))}
.btn[disabled]{filter:grayscale(1) brightness(.55);cursor:not-allowed}

.spacer{flex:1}
.center-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;flex:1}
/* form: keep fields at top, centre the Start Match button in the empty space below */
#s-name .center-col{flex:0 0 auto;justify-content:flex-start}
#s-name #nameNext{margin-top:auto;margin-bottom:auto}
/* form scrolls freely (incl. while the keyboard is up); focused field scrolls clear of the top */
#s-name{-webkit-overflow-scrolling:touch}
#s-name input.name{scroll-margin-top:84px;scroll-margin-bottom:24px}
#s-name.kb-open{padding-bottom:60vh}          /* room to scroll the lower fields above the keyboard */
#s-name.kb-open #nameNext{margin-top:18px;margin-bottom:0}

.panel{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}

/* ---- ambassador cards ---- */
.cards{display:flex;flex-direction:column;gap:14px;width:100%}
.card{display:flex;align-items:center;gap:16px;padding:12px;border-radius:14px;cursor:pointer;background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);transition:.18s;position:relative;overflow:hidden}
.card:active{transform:scale(.985)}
.card.selected{border-color:var(--white);background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05))}
.card .avatar{width:86px;height:86px;border-radius:12px;flex:none;overflow:hidden;position:relative;background:var(--graphite);border:1px solid var(--line)}
.card .avatar img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.05)}
.card .meta{flex:1}
.card .meta .pn{font-family:var(--serif);font-size:21px;font-weight:600;letter-spacing:.3px}
.card .meta .pd{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45}
.card .pick{width:24px;height:24px;border-radius:50%;border:1px solid var(--silver);flex:none;display:flex;align-items:center;justify-content:center;color:transparent;font-size:13px;font-weight:900}
.card.selected .pick{background:var(--white);border-color:var(--white);color:var(--black)}

label.fld{font-size:11px;color:var(--muted);align-self:flex-start;margin-bottom:-8px;letter-spacing:2px;text-transform:uppercase}
input.name{width:100%;padding:16px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;font-size:18px;text-align:center;font-weight:600;font-family:var(--serif);letter-spacing:.5px}
input.name:focus{outline:none;border-color:var(--white)}
/* phone field: a fixed, non-editable "+" locked on the left */
.phone-wrap{position:relative;width:100%}
.phone-wrap .phone-plus{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:#fff;font-size:18px;font-weight:600;font-family:var(--serif);pointer-events:none;z-index:2}
input.name.phone-input{text-align:left;padding-left:38px}
input.name.phone-input::placeholder{text-align:left}
input.name::placeholder{color:#5c6066;font-weight:400;font-family:var(--sans)}

/* ---- HUD ---- */
#hud{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;pointer-events:none}
.pill{background:rgba(8,8,9,.62);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:8px;padding:8px 13px;font-weight:700;display:flex;align-items:center;gap:7px;font-size:15px;letter-spacing:.5px}
.pill .lbl{font-size:9px;color:var(--silver);font-weight:700;letter-spacing:1.5px}
#timePill.low{background:rgba(255,255,255,.92);color:var(--black);border-color:#fff;animation:pulse .6s infinite}
#timePill.low .lbl{color:#444}
@keyframes pulse{50%{transform:scale(1.05)}}

/* POWER balls — vertical stack on the left side; dim by default, light up when earned, vanish when used */
#powerBalls{position:absolute;left:14px;top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;align-items:center;gap:13px;pointer-events:none;
  background:rgba(3,5,7,.32);padding:13px 9px;border-radius:30px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
#powerBalls .plbl{font-size:10px;letter-spacing:2px;color:#fff;writing-mode:vertical-rl;transform:rotate(180deg);margin-bottom:4px;opacity:.95;text-shadow:0 1px 5px rgba(0,0,0,.8)}
#powerBalls i{width:24px;height:24px;border-radius:50%;display:block;border:2px solid var(--silver);
  background:radial-gradient(circle at 34% 30%,#fff 0%,#cfd2d5 45%,#7e8488 100%);
  box-shadow:0 2px 7px rgba(0,0,0,.65);transition:opacity .3s,transform .3s,box-shadow .3s}
#powerBalls i.dim{opacity:.85;filter:grayscale(.45) brightness(.95)}   /* disabled but clearly visible */
#powerBalls i.lit{opacity:1;border-color:var(--green);box-shadow:0 0 14px rgba(63,174,99,.95),inset 0 0 6px rgba(63,174,99,.45);animation:plpulse 1.4s ease-in-out infinite}
#powerBalls i.used{opacity:0;transform:scale(.2)}
@keyframes plpulse{50%{box-shadow:0 0 22px rgba(63,174,99,1),inset 0 0 8px rgba(63,174,99,.6)}}

/* phones: drop the score/balls/time bar clearly below the top nav MINIMIZE button (below the notch) */
@media (max-width:600px){
  #hud{ top:max(13vh,108px); }       /* clearly below the MAJOR logo / nav */
  .screen{ padding-top:92px; }
  #powerBalls i{width:22px;height:22px}
  /* leaderboard: sit it lower with black space top & bottom; pin the header, only the list scrolls */
  #s-leaderboard{ overflow:hidden; padding-top:max(15vh,108px); padding-bottom:max(5vh,28px); }
  #s-leaderboard .lb-list{ max-height:none; }
}

#gameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

.prizelink{color:var(--green);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font-weight:700}
.attempts-note{display:block;font-size:10px;letter-spacing:.5px;color:var(--silver);text-transform:none;font-weight:600;margin-bottom:3px;opacity:.9}

/* pause overlay */
#pauseOverlay{position:absolute;inset:0;z-index:8;display:none;align-items:center;justify-content:center;background:rgba(3,4,5,.72);backdrop-filter:blur(4px)}
#pauseOverlay.show{display:flex}
#pauseOverlay .pbox{text-align:center}
#pauseOverlay .pttl{font-family:var(--serif);font-size:40px;letter-spacing:3px;color:#fff;margin-bottom:22px}
#pauseOverlay .resumebtn{background:var(--green);color:#04140a;border:0;cursor:pointer;font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:13px;padding:15px 40px;border-radius:30px}

#startOverlay{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(3,3,4,.5);backdrop-filter:blur(2px);text-align:center;padding:30px}
#countdown{font-family:var(--serif);font-size:130px;font-weight:600;color:#fff;text-shadow:0 8px 40px rgba(0,0,0,.6)}
.hint{color:var(--silver);font-size:15px;line-height:1.55;max-width:290px;font-weight:300}

#flash{position:absolute;left:50%;top:36%;transform:translate(-50%,-50%) scale(.6);z-index:7;font-family:var(--serif);font-size:56px;font-weight:700;letter-spacing:2px;pointer-events:none;opacity:0;text-shadow:0 6px 30px rgba(0,0,0,.7)}
#flash.show{animation:pop .75s ease}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}22%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}70%{opacity:1;transform:translate(-50%,-54%) scale(1)}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}

/* ---- intro video (Evra) ---- */
#videoOverlay{position:absolute;inset:0;z-index:30;background:#000;display:none;align-items:center;justify-content:center}
#videoOverlay.active{display:flex}
#introVideo{width:100%;height:100%;object-fit:cover}
#skipVideo{position:absolute;bottom:22px;right:18px;z-index:31;background:rgba(0,0,0,.55);border:1px solid var(--line);color:#fff;padding:9px 16px;border-radius:6px;font-size:12px;letter-spacing:2px;text-transform:uppercase;cursor:pointer}

/* ---- results ---- */
.bigscore{font-family:var(--serif);font-size:104px;font-weight:600;color:#fff;text-align:center;line-height:1}
.scorelbl{text-align:center;color:var(--silver);letter-spacing:3px;text-transform:uppercase;font-size:12px}
.result-card{padding:20px;text-align:center;width:100%;border-radius:14px}
.result-card .who{font-family:var(--serif);font-size:19px;font-weight:600}
.result-card .rank{color:var(--white);font-weight:700;margin-top:8px;letter-spacing:.5px}
.result-card .rank b{color:var(--silver)}

/* ---- leaderboard ---- */
.lb-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.lb-title{font-family:var(--serif);font-size:24px;font-weight:600}
.lb-title .accent{color:var(--silver)}
.lb-list{flex:1;min-height:0;max-height:58vh;overflow-y:auto;display:flex;flex-direction:column;gap:7px;margin:6px 0;-webkit-overflow-scrolling:touch}
.lb-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--panel);border:1px solid rgba(255,255,255,.06)}
.lb-row.me{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5)}
.lb-row .pos{width:30px;font-weight:800;color:var(--muted);text-align:center;font-size:16px}
.lb-row.top1 .pos,.lb-row.top2 .pos,.lb-row.top3 .pos{color:var(--white)}
.lb-row .who{flex:1;font-weight:600}
.lb-row .who small{display:block;color:var(--muted);font-weight:500;font-size:11px;margin-top:2px;letter-spacing:.5px}
.lb-row .sc{font-family:var(--serif);font-weight:600;font-size:20px;color:#fff}

.raffle-note{font-size:11.5px;color:var(--silver);text-align:center;line-height:1.6;background:var(--panel);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:12px;margin-top:6px}
.raffle-note b{color:#fff}
.backend-flag{position:absolute;top:7px;left:50%;transform:translateX(-50%);font-size:9px;color:#4a4e54;letter-spacing:2px;z-index:8;text-transform:uppercase}
small.disclaim{color:var(--muted);font-size:10.5px;text-align:center;line-height:1.6;letter-spacing:.5px}