.f2f-account-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;overflow:auto;overscroll-behavior:contain;border:0;border-radius:0;padding:0;color:#edf4fa;background:#0a2238;background-image:radial-gradient(120% 60% at 50% 0%,#123c5c 0%,transparent 62%);font-family:'Archivo',system-ui,sans-serif}.f2f-account-dialog::backdrop{background:rgba(0,10,18,.78);backdrop-filter:blur(8px)}.f2f-account-inner{position:relative;width:100%;max-width:620px;margin:0 auto;padding:26px 22px calc(64px + env(safe-area-inset-bottom,0px))}@media(min-width:700px){.f2f-account-inner{padding-top:40px}}.f2f-account-close{position:fixed;right:16px;top:calc(14px + env(safe-area-inset-top,0px));width:42px;height:42px;border:1px solid rgba(145,167,185,.26);border-radius:50%;background:rgba(6,22,36,.82);backdrop-filter:blur(8px);color:#edf4fa;font-size:22px;cursor:pointer;z-index:5;display:grid;place-items:center;line-height:1}.f2f-account-close:hover{border-color:#27d3f2;color:#27d3f2}.f2f-account-kicker{color:#27d3f2;font:700 9px 'Chivo Mono',monospace;letter-spacing:.15em;text-transform:uppercase}.f2f-account-dialog h2{font-size:31px;font-style:italic;letter-spacing:-.045em;margin:7px 0}.f2f-account-dialog p{color:#91a7b9;font-size:12px;line-height:1.55}.f2f-account-dialog label{display:block;margin-top:17px;color:#91a7b9;font:700 8px 'Chivo Mono',monospace;letter-spacing:.09em}.f2f-account-dialog input{width:100%;height:49px;margin-top:8px;border:1px solid rgba(145,167,185,.26);border-radius:10px;background:rgba(1,12,21,.4);color:#edf4fa;padding:0 15px;font-weight:800;outline:none}.f2f-account-dialog input:focus{border-color:#27d3f2;box-shadow:0 0 0 3px rgba(39,211,242,.1)}.f2f-account-dialog small{display:block;min-height:18px;margin-top:8px;color:#ff7b8d;font:600 8px 'Chivo Mono',monospace}.f2f-account-submit,.f2f-account-secondary{width:100%;height:51px;border-radius:10px;margin-top:12px;font:800 10px 'Chivo Mono',monospace;letter-spacing:.08em;cursor:pointer}.f2f-account-submit{border:0;background:#27d3f2;color:#061624}.f2f-account-secondary{border:1px solid rgba(145,167,185,.24);background:transparent;color:#edf4fa}.f2f-account-submit:disabled{opacity:.5}.f2f-profile-head{display:flex;align-items:center;gap:14px;margin:15px 0}.f2f-profile-head h2{font-size:25px;margin:0}.f2f-profile-head p{margin:2px 0 0;word-break:break-all}.f2f-profile-avatar{display:grid;place-items:center;width:62px;height:62px;flex:0 0 auto;border-radius:18px;border:1px solid rgba(39,211,242,.38);background:rgba(39,211,242,.08);font-size:30px;cursor:pointer}.f2f-wallet{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.f2f-wallet>div{padding:15px;border:1px solid rgba(39,211,242,.22);border-radius:13px;background:rgba(39,211,242,.055)}.f2f-wallet span{display:block;color:#91a7b9;font:700 8px 'Chivo Mono',monospace;letter-spacing:.08em}.f2f-wallet b{display:block;color:#27d3f2;font:900 23px 'Chivo Mono',monospace;margin-top:5px}.f2f-avatar-grid{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-top:8px}.f2f-avatar{aspect-ratio:1;border:1px solid rgba(145,167,185,.22);border-radius:10px;background:rgba(1,12,21,.4);font-size:19px;cursor:pointer}.f2f-avatar.selected{border-color:#27d3f2;background:rgba(39,211,242,.16);box-shadow:0 0 0 2px rgba(39,211,242,.12)}.f2f-coin-toast{position:fixed;z-index:99999;right:18px;top:18px;display:flex;flex-direction:column;gap:3px;min-width:220px;padding:14px 17px;border:1px solid rgba(231,185,60,.55);border-radius:13px;background:#0a2238;color:#edf4fa;box-shadow:0 18px 50px rgba(0,0,0,.5);transform:translateY(-20px);opacity:0;pointer-events:none;transition:.25s}.f2f-coin-toast.show{transform:none;opacity:1}.f2f-coin-toast b{color:#e7b93c;font:800 14px 'Chivo Mono',monospace}.f2f-coin-toast span{color:#91a7b9;font-size:10px}.header-cta[data-f2f-account],.accountbtn[data-f2f-account],[data-f2f-account]{cursor:pointer}.f2f-buy-coins{margin:16px 0;padding:15px;border:1px solid rgba(231,185,60,.3);border-radius:13px;background:rgba(231,185,60,.06)}.f2f-buy-coins>span{display:block;color:#91a7b9;font:700 8px 'Chivo Mono',monospace;letter-spacing:.08em;margin-bottom:10px}.f2f-buy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.f2f-buy-pkg{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px;border:1px solid rgba(231,185,60,.32);border-radius:10px;background:rgba(1,12,21,.4);color:#edf4fa;cursor:pointer;font-family:'Chivo Mono',monospace}.f2f-buy-pkg:hover:not(:disabled){border-color:#e7b93c;background:rgba(231,185,60,.14)}.f2f-buy-pkg:disabled{opacity:.5;cursor:default}.f2f-buy-pkg b{font-size:15px;color:#e7b93c}.f2f-buy-pkg span{font-size:8px;color:#91a7b9;letter-spacing:.04em}.f2f-buy-pkg em{font-style:normal;font-size:11px;font-weight:800;margin-top:3px}.f2f-buy-pkg i{font-style:normal;font-size:7px;letter-spacing:.06em;text-transform:uppercase;color:#e7b93c;margin-top:2px}.f2f-buy-coins small{color:#ff7b8d;font:600 8px 'Chivo Mono',monospace;display:block;min-height:0;margin-top:8px}
@media(max-width:520px){.f2f-account-inner{padding:26px 20px}.f2f-account-dialog h2{font-size:27px}.f2f-avatar-grid{grid-template-columns:repeat(5,1fr)}.f2f-coin-toast{left:12px;right:12px;top:12px}.f2f-wallet b{font-size:19px}}

/* ---- native sign in box: email + password, with Google underneath ---- */
.f2f-auth-or{display:flex;align-items:center;gap:12px;margin:16px 0 12px;color:rgba(255,255,255,.4);
  font:700 10px/1 'Barlow Condensed',sans-serif;letter-spacing:.22em}
.f2f-auth-or::before,.f2f-auth-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.16)}
.f2f-account-google{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;
  background:#fff;color:#1f1f1f;border:0;border-radius:10px;padding:13px 14px;cursor:pointer;
  font:700 13px/1 'Barlow Condensed',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  transition:filter .12s ease,transform .12s ease}
.f2f-account-google:hover{filter:brightness(.96)}
.f2f-account-google:active{transform:translateY(1px)}
.f2f-account-google svg{flex:0 0 auto}
.f2f-account-switch{width:100%;margin-top:14px;background:none;border:0;cursor:pointer;
  color:rgba(255,255,255,.55);font:500 12.5px/1.4 system-ui,sans-serif}
.f2f-account-switch b{color:var(--f2f-accent,#2AC4F2);font-weight:700}
.f2f-account-switch:hover{color:#fff}
#f2fAuthForm label{display:block;margin-bottom:11px}
/* display:block above beats the browser default for [hidden], so the username
   field stayed visible in sign in mode. Put the guard back explicitly. */
#f2fAuthForm label[hidden],.f2f-account-dialog [hidden]{display:none !important}
#f2fAuthError{display:block;min-height:16px;margin:2px 0 8px;color:#FF5C6C;font-size:12.5px;line-height:1.4}

/* ---- v4.15 account additions ---------------------------------------------
   Password visibility, strength hint, live username availability, email
   verification prompt and the cross-game stats block. */
.f2f-pw-wrap{position:relative;display:block}
.f2f-pw-wrap input{padding-right:66px}
.f2f-pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);height:33px;padding:0 11px;border:1px solid rgba(145,167,185,.26);border-radius:8px;background:rgba(1,12,21,.5);color:#91a7b9;font:700 8px 'Chivo Mono',monospace;letter-spacing:.08em;cursor:pointer}
.f2f-pw-toggle:hover{color:#27d3f2;border-color:rgba(39,211,242,.5)}
.f2f-pw-meter{display:flex;align-items:center;gap:9px;margin-top:9px}
.f2f-pw-meter i{flex:1;height:4px;border-radius:3px;background:rgba(145,167,185,.2);position:relative;overflow:hidden}
.f2f-pw-meter i:after{content:"";position:absolute;left:0;top:0;bottom:0;width:12%;background:#ff7b8d;transition:width .2s,background .2s}
.f2f-pw-meter[data-score="1"] i:after{width:35%;background:#ff9d5c}
.f2f-pw-meter[data-score="2"] i:after{width:58%;background:#e7b93c}
.f2f-pw-meter[data-score="3"] i:after{width:80%;background:#5ad19a}
.f2f-pw-meter[data-score="4"] i:after{width:100%;background:#38d98a}
.f2f-pw-meter span{font:600 8px 'Chivo Mono',monospace;color:#91a7b9;white-space:nowrap}
.f2f-field-hint{display:block;margin-top:7px;font:600 8px 'Chivo Mono',monospace;color:#91a7b9;min-height:11px}
.f2f-field-hint.good{color:#38d98a}
.f2f-field-hint.bad{color:#ff7b8d}
.f2f-account-link{display:block;width:100%;margin-top:11px;padding:0;border:0;background:none;color:#91a7b9;font:600 9px 'Chivo Mono',monospace;letter-spacing:.05em;text-decoration:underline;cursor:pointer}
.f2f-account-link:hover{color:#27d3f2}
.f2f-account-note{display:block;margin-top:8px;font:600 8px 'Chivo Mono',monospace;color:#91a7b9;min-height:11px}
.f2f-account-note.good{color:#38d98a}
.f2f-verify{margin:15px 0;padding:13px 15px;border:1px solid rgba(231,185,60,.4);border-radius:12px;background:rgba(231,185,60,.07)}
.f2f-verify p{margin:0 0 9px;color:#e7b93c;font-size:11.5px}
.f2f-verify button{height:38px;padding:0 14px;border:1px solid rgba(231,185,60,.5);border-radius:9px;background:transparent;color:#e7b93c;font:800 8px 'Chivo Mono',monospace;letter-spacing:.08em;cursor:pointer}
.f2f-verify button:disabled{opacity:.5}
.f2f-verify small{display:block;margin-top:8px;color:#91a7b9;font:600 8px 'Chivo Mono',monospace}
.f2f-stats{margin:16px 0;padding:15px;border:1px solid rgba(39,211,242,.2);border-radius:13px;background:rgba(39,211,242,.05)}
.f2f-stats>span{display:block;color:#91a7b9;font:700 8px 'Chivo Mono',monospace;letter-spacing:.08em;margin-bottom:11px}
.f2f-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.f2f-stats-grid>div{padding:10px 6px;border:1px solid rgba(145,167,185,.18);border-radius:10px;background:rgba(1,12,21,.32);text-align:center}
.f2f-stats-grid b{display:block;color:#27d3f2;font:900 16px 'Archivo',sans-serif;line-height:1.1}
.f2f-stats-grid span{display:block;margin-top:3px;color:#91a7b9;font:600 7.5px 'Chivo Mono',monospace;letter-spacing:.03em;line-height:1.3}
.f2f-stats small{display:block;margin-top:10px;color:#91a7b9;font:600 8px 'Chivo Mono',monospace}
.f2f-avatar-grid{grid-template-columns:repeat(8,1fr)}
/* The panel is full-screen everywhere now, so a phone only needs tighter gutters -
   the width and height are already the viewport and must not be clawed back here. */
@media (max-width:520px){
  .f2f-account-inner{padding:22px 16px calc(72px + env(safe-area-inset-bottom,0px))}
  .f2f-stats-grid{grid-template-columns:repeat(2,1fr)}
  .f2f-avatar-grid{grid-template-columns:repeat(6,1fr)}
  .f2f-buy-grid{grid-template-columns:1fr}
}
/* A full-screen panel wants a little more air between its blocks than a small dialog did.
   Deliberately not touching h2 here - .f2f-profile-head h2 already sets the username size
   at equal specificity, and a rule this late would silently win that fight. */
.f2f-wallet,.f2f-stats,.f2f-buy-coins{margin-top:18px}
/* Level-up notice. Louder than a coin toast because it happens far less often. */
.f2f-levelup{position:fixed;z-index:99999;left:50%;bottom:24px;translate:-50% 0;
  display:flex;flex-direction:column;gap:3px;min-width:250px;max-width:88vw;
  padding:16px 20px;border-radius:14px;cursor:pointer;
  background:linear-gradient(150deg,#123c5c,#0a2238);
  box-shadow:inset 0 0 0 1px rgba(231,185,60,.6),0 20px 50px rgba(0,0,0,.55);
  opacity:0;transform:translateY(16px);transition:.28s;pointer-events:none;
  font-family:'Archivo',system-ui,sans-serif;text-align:center}
.f2f-levelup.show{opacity:1;transform:none;pointer-events:auto}
.f2f-levelup .lvl{font:800 8px 'Chivo Mono',monospace;letter-spacing:.22em;color:#e7b93c}
.f2f-levelup b{font:900 19px 'Archivo',sans-serif;font-style:italic;color:#edf4fa;
  letter-spacing:-.02em}
.f2f-levelup em{font-style:normal;font:600 10px 'Chivo Mono',monospace;color:#91a7b9;
  letter-spacing:.04em;line-height:1.5}

/* The identity row on the profile-creation step. Shows which account a new profile is
   about to be attached to, so someone with two Google logins can see they arrived on
   the right one before committing to a username. */
.f2f-signedas{display:flex;align-items:center;gap:12px;margin:16px 0 4px;padding:12px 14px;
  border:1px solid rgba(39,211,242,.24);border-radius:12px;background:rgba(39,211,242,.06)}
.f2f-signedas-av{display:grid;place-items:center;flex:0 0 auto;width:38px;height:38px;
  border-radius:11px;border:1px solid rgba(39,211,242,.34);background:rgba(39,211,242,.1);
  background-size:cover;background-position:center;
  color:#27d3f2;font:900 15px 'Chivo Mono',monospace}
.f2f-signedas-av.photo{border-color:rgba(39,211,242,.5)}
.f2f-signedas-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.f2f-signedas-t small{margin:0;min-height:0;color:#91a7b9;
  font:700 8px 'Chivo Mono',monospace;letter-spacing:.09em}
.f2f-signedas-t b{color:#edf4fa;font:800 12px 'Archivo',sans-serif;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- account dialog: fill the viewport by pinning, never by sizing ----------
   It used to be width:100vw/height:100dvh and let the browser's default margin:auto
   centre it. That only lands flush when 100vw happens to equal the dialog's containing
   block, and it often does not: a classic desktop scrollbar makes vw wider than the
   block, and on narrow viewports the two can diverge badly enough to push half the
   dialog off screen. Pinning all four edges with no margin removes the guesswork -
   the dialog is exactly its containing block, whatever that turns out to be. */
.f2f-account-dialog{position:fixed;inset:0;margin:0;
  width:auto;max-width:none;height:auto;max-height:none}
.f2f-account-inner{box-sizing:border-box;
  padding-left:max(22px,env(safe-area-inset-left,0px));
  padding-right:max(22px,env(safe-area-inset-right,0px))}
.f2f-account-dialog *{min-width:0}
/* Long unbroken strings - emails, team names - wrap instead of widening the layout. */
.f2f-account-dialog h2{overflow-wrap:anywhere}
.f2f-account-close{right:max(16px,env(safe-area-inset-right,0px))}

@media(max-width:420px){
  .f2f-account-inner{padding-left:max(16px,env(safe-area-inset-left,0px));
                     padding-right:max(16px,env(safe-area-inset-right,0px))}
  .f2f-account-dialog h2{font-size:24px}
  /* Three coin packages side by side stop being readable well before this width. */
  .f2f-buy-grid{grid-template-columns:repeat(2,1fr)}
  .f2f-avatar-grid{grid-template-columns:repeat(6,1fr)}
  .f2f-signedas{padding:11px 12px;gap:10px}
  .f2f-signedas-t b{font-size:11px}
}
@media(max-width:340px){
  .f2f-wallet{grid-template-columns:1fr}
  .f2f-buy-grid{grid-template-columns:1fr}
  .f2f-avatar-grid{grid-template-columns:repeat(5,1fr)}
}

/* ---- the site-wide XP bar -------------------------------------------------
   One track across the whole site, so it appears on every page. It sits under the
   nav on its own row: beside the account button it would be a few pixels wide on a
   phone, which is no use to anyone. Signed out it still renders, at zero, with the
   invitation - an empty space tells a new visitor nothing about what there is to earn. */
.f2fxp{display:block;width:100%;box-sizing:border-box;cursor:pointer;
  padding:7px max(14px,env(safe-area-inset-left,0px)) 8px;
  background:linear-gradient(180deg,rgba(4,18,28,.92),rgba(4,18,28,.72));
  border-bottom:1px solid rgba(255,255,255,.07);
  font-family:'Chivo Mono',monospace;-webkit-tap-highlight-color:transparent}
.f2fxp-t{display:flex;align-items:baseline;gap:9px}
.f2fxp-lvl{font-weight:800;font-size:10px;letter-spacing:.1em;color:#27d3f2;flex:0 0 auto}
.f2fxp-n{font-weight:700;font-size:10px;letter-spacing:.06em;color:#edf4fa}
.f2fxp-c{margin-left:auto;font-weight:800;font-size:10px;color:#e7b93c;flex:0 0 auto}
.f2fxp-track{position:relative;height:5px;margin:5px 0 4px;border-radius:100px;
  background:rgba(255,255,255,.1);overflow:hidden}
.f2fxp-track i{display:block;height:100%;border-radius:100px;
  background:linear-gradient(90deg,#27d3f2,#7ce7ff);
  box-shadow:0 0 10px rgba(39,211,242,.5);transition:width .45s ease}
.f2fxp-sub{font-size:9px;letter-spacing:.04em;color:#91a7b9}
.f2fxp-sub b{color:#e7b93c}
/* The fuller version inside the profile dialog. */
.f2fxp-big{margin:16px 0 0;padding:14px 15px;border-radius:13px;border:1px solid rgba(39,211,242,.22);
  background:rgba(39,211,242,.06);cursor:default}
.f2fxp-big .f2fxp-lvl,.f2fxp-big .f2fxp-n,.f2fxp-big .f2fxp-c{font-size:11px}
.f2fxp-big .f2fxp-track{height:8px;margin:9px 0 6px}
.f2fxp-big .f2fxp-sub{font-size:10px}
@media (max-width:420px){
  .f2fxp{padding-left:14px;padding-right:14px}
  .f2fxp-n{font-size:9.5px}
}

/* ---- the wallet ------------------------------------------------------------
   Where the FanCoins went. Three columns that stay aligned however long the label
   is: what happened, how much, and the balance it left you on - so the history
   reads as a running account rather than a list of events. */
.f2f-txs{margin:18px 0;padding:15px;border:1px solid rgba(145,167,185,.2);
  border-radius:13px;background:rgba(1,12,21,.35)}
.f2f-txs>span{display:block;color:#91a7b9;font:700 8px 'Chivo Mono',monospace;
  letter-spacing:.08em;margin-bottom:10px}
.f2f-txlist{display:flex;flex-direction:column;gap:5px}
.f2f-tx{display:flex;align-items:baseline;gap:10px;padding:9px 11px;border-radius:9px;
  background:rgba(255,255,255,.035);font-family:'Chivo Mono',monospace}
.f2f-tx-l{flex:1 1 auto;min-width:0;font-size:11px;font-weight:700;color:#edf4fa;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f2f-tx-l em{display:block;font-style:normal;font-size:8.5px;font-weight:600;color:#91a7b9;
  margin-top:2px}
.f2f-tx-a{flex:0 0 auto;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.f2f-tx.in .f2f-tx-a{color:#42d98b}
.f2f-tx.out .f2f-tx-a{color:#ff7b8d}
.f2f-tx-b{flex:0 0 auto;min-width:52px;text-align:right;font-size:10px;font-weight:700;
  color:#91a7b9;font-variant-numeric:tabular-nums}
.f2f-txempty{margin:0;color:#91a7b9;font-size:11px;text-align:center;padding:14px 0}
.f2f-txmore{width:100%;min-height:38px;margin-top:9px;border:1px solid rgba(145,167,185,.24);
  border-radius:9px;background:transparent;color:#edf4fa;cursor:pointer;
  font:800 8px 'Chivo Mono',monospace;letter-spacing:.08em}
.f2f-txmore:hover{border-color:#27d3f2;color:#27d3f2}
/* Four packages need two rows on a phone rather than four cramped columns. */
@media (max-width:520px){
  .f2f-buy-grid{grid-template-columns:repeat(2,1fr)}
  .f2f-tx-b{display:none}
}