/* ─────────────────────────────────────────────────────────────────────
   spin-auth-panel.css — shared inline auth surface
   Used by:
     - resources/views/public/ping-landing.blade.php (homepage spin/intro modals)
     - resources/views/public/live-enrichment.blade.php (live.gamifeye.com win modal)
   Driven by: public/js/spin-auth-panel.js
   Markup:    resources/views/public/partials/spin-auth-panel.blade.php

   Originally lived in public/css/ping-landing.css ~lines 2105-2451; lifted out
   so live.gamifeye.com and the homepage share a single source of truth and
   future spam-hardening passes only need to be applied once.

   The .spin-body.is-authpanel hide-siblings + reveal rules below were
   originally scoped to #spinModal / #spinIntroModal; they have been
   generalised to any .spin-body.is-authpanel container so the same
   wrapper works inside live-enrichment's #win-modal too. Behaviour on
   the homepage is unchanged because the homepage's only .is-authpanel
   wrappers live inside those two modals.
   ───────────────────────────────────────────────────────────────────── */

/* Inline auth tabs + form (reused inside .spin-auth-panel — the
   retired #msAuthModal "You win!" green modal used to host these
   too, but its markup and id-scoped rules have been removed). */
.ms-auth-tabs{display:flex;gap:0;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,0.1);}
.ms-auth-tabs button{
    flex:1;padding:10px 0;
    font-family:'Fredoka',sans-serif;
    font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
    background:none;border:none;border-bottom:2px solid transparent;
    color:rgba(255,255,255,0.55);cursor:pointer;transition:all .2s;
}
.ms-auth-tabs button.active{color:#00ffd5;border-bottom-color:#00ffd5;}
.ms-auth-form{display:none;}
.ms-auth-form.active{display:block;}
.ms-auth-form input{
    display:block;width:100%;box-sizing:border-box;
    margin-bottom:10px;padding:11px 14px;
    font-family:'Fredoka',sans-serif;font-size:14px;color:#fff;
    background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
    border-radius:8px;outline:none;transition:border-color .2s;
}
.ms-auth-form input:focus{border-color:#00ffd5;}
.ms-auth-form input::placeholder{color:rgba(255,255,255,0.4);}
.ms-auth-error{color:#ff5a5a;font-size:12px;margin-bottom:10px;min-height:14px;}
.ms-auth-form button[type="submit"]{
    width:100%;margin-top:6px;padding:11px 18px;border-radius:10px;border:none;cursor:pointer;
    font-family:'Fredoka',sans-serif;
    font-size:12px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;
    background:#00ffd5;color:#0a0a1a;transition:transform .15s,filter .2s;
}
.ms-auth-form button[type="submit"]:hover{filter:brightness(1.1);}
.ms-auth-form button[type="submit"]:active{transform:scale(0.98);}

/* ── Inline auth panel (intro + spin-result + live-page win modals) ──
   Rendered once per modal via public/partials/spin-auth-panel.blade.php.
   Hidden by default. When the pill's Login or Register item is clicked,
   JS adds .is-authpanel to the enclosing .spin-body; the rules below
   then hide every native sibling in that body and reveal the panel.

   The forms share structural (.ms-auth-tabs, .ms-auth-form, .ms-auth-
   error) classes with the Minesweeper win-gate so layout + show/hide
   behaviour stay in sync, but every visual property (accent colour,
   font family, spacing) is overridden below so the panel matches the
   magenta/Fredoka brand of the intro modal instead of the win-gate's
   teal/Fredoka arcade aesthetic. */
.spin-auth-panel{
    display:none;
    flex:1 1 auto;
    text-align:left;
    padding-top:8px;
    gap:14px;
}
/* When the body is in auth-panel mode, every direct child except the
   panel itself is removed from layout. Generalised from the original
   #spinModal / #spinIntroModal scoping so any modal hosting a
   .spin-body.is-authpanel (homepage spin modal, intro modal, live page
   win modal) gets the same hide-siblings + reveal behaviour. */
.spin-body.is-authpanel > *:not(.spin-auth-panel){
    display:none !important;
}
.spin-body.is-authpanel > .spin-auth-panel{
    display:flex;flex-direction:column;
}

/* ── Panel-scoped overrides: magenta + Fredoka + more breathing room ──
   Each selector is scoped under .spin-auth-panel so the Minesweeper
   win-gate (which reuses the same .ms-auth-* classes but is themed
   arcade/teal on purpose) is unaffected. */

/* Tabs: wider gap from the card top, Fredoka, magenta active state. */
.spin-auth-panel .ms-auth-tabs{
    margin-top:6px;margin-bottom:22px;
    border-bottom:1px solid rgba(255,255,255,0.12);
}
.spin-auth-panel .ms-auth-tabs button{
    font-family:'Fredoka',sans-serif;
    font-size:13px;
    letter-spacing:0.3px;
    text-transform:none;
    font-weight:500;
    padding:12px 0;
    color:rgba(255,255,255,0.55);
}
.spin-auth-panel .ms-auth-tabs button.active{
    color:#ff2bd6;
    border-bottom-color:#ff2bd6;
    font-weight:600;
}
/* Pulse the "Register Free" text only. Targets the inner span
   so the button itself keeps its normal tab styling — no border,
   background, or transform weirdness on the button frame. */
.spin-auth-panel-tab-pulse-text{
    display:inline-block;
    animation:spinAuthTabTextPulse 1.2s ease-in-out infinite;
}
@keyframes spinAuthTabTextPulse{
    0%,100%{opacity:1;transform:scale(1);}
    50%    {opacity:0.55;transform:scale(1.08);}
}

/* Per-form heading: magenta title + muted description. Lives at
   the top of each .ms-auth-form and is visible only in the default
   (non-MS-win) view — the winhead takes over that role when the
   panel is opened from the minesweeper claim flow, so we suppress
   this head in .is-mswin mode further down. Title/description copy
   comes straight from the Blade partial; no sizing differences
   between Login and Register so the two tabs stay pixel-identical
   up to the error row. */
.spin-auth-panel .ms-auth-form .spin-auth-panel-formhead{
    margin:0 0 14px;
    text-align:center;
}
.spin-auth-panel .ms-auth-form .spin-auth-panel-formtitle{
    margin:0 0 4px;
    font-family:'Fredoka',sans-serif;
    font-size:18px;
    font-weight:600;
    line-height:1.2;
    color:#ff2bd6;
    letter-spacing:0.2px;
}
.spin-auth-panel .ms-auth-form .spin-auth-panel-formdesc{
    margin:0;
    font-family:'Fredoka',sans-serif;
    font-size:13px;
    line-height:1.35;
    color:rgba(255,255,255,0.7);
}
.spin-auth-panel.is-mswin .ms-auth-form .spin-auth-panel-formhead{
    display:none;
}

/* Inputs: taller, Fredoka, magenta focus ring. */
.spin-auth-panel .ms-auth-form input{
    margin-bottom:14px;
    padding:13px 16px;
    font-family:'Fredoka',sans-serif;
    font-size:15px;
    border-radius:10px;
}
.spin-auth-panel .ms-auth-form input:focus{
    border-color:#ff2bd6;
    box-shadow:0 0 0 3px rgba(255,43,214,0.18);
}

/* Paired-input row: Login puts email + password together, Register
   puts first-name + email together. The row owns the vertical cadence
   so its children can drop their individual bottom margins, and
   min-width:0 stops the inputs from overflowing their flex cell on
   narrow cards (flex items default to min-content, which is wider than
   the column when placeholder text is long). Stacks again under 500px
   so the form stays usable on phones. */
.spin-auth-panel .ms-auth-form .spin-auth-row{
    display:flex;
    gap:10px;
    margin-bottom:14px;
}
.spin-auth-panel .ms-auth-form .spin-auth-row > input{
    flex:1 1 0;
    min-width:0;
    margin-bottom:0;
}
@media(max-width:500px){
    .spin-auth-panel .ms-auth-form .spin-auth-row{
        flex-direction:column;
        gap:0;
    }
    .spin-auth-panel .ms-auth-form .spin-auth-row > input{
        margin-bottom:14px;
    }
}

/* Errors: slightly bigger so they don't get lost under the taller
   inputs; Fredoka keeps the whole panel in one typographic voice. */
.spin-auth-panel .ms-auth-error{
    font-family:'Fredoka',sans-serif;
    font-size:13px;
    margin-bottom:12px;
    min-height:16px;
}

/* Terms-of-service consent row on the Register tab. Added when this
   form was hardened against bot signups — the server requires
   terms=accepted, so the checkbox is mandatory. Sized to read as
   "fine print" rather than a primary input, with the same Fredoka
   voice and magenta link accent the rest of the panel uses. The
   checkbox itself is styled with `accent-color` (modern browsers)
   so it picks up the panel's magenta without needing a custom
   replacement element. */
.spin-auth-panel .ms-auth-form .spin-auth-panel-terms{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:12px;
    font-family:'Fredoka',sans-serif;
    font-size:12px;
    line-height:1.45;
    color:rgba(255,255,255,0.78);
    cursor:pointer;
}
.spin-auth-panel .ms-auth-form .spin-auth-panel-terms input[type="checkbox"]{
    flex:0 0 auto;
    width:16px;
    height:16px;
    margin:2px 0 0;
    accent-color:#ff2bd6;
    cursor:pointer;
}
.spin-auth-panel .ms-auth-form .spin-auth-panel-terms a{
    color:#ff2bd6;
    text-decoration:none;
    font-weight:600;
}
.spin-auth-panel .ms-auth-form .spin-auth-panel-terms a:hover{
    text-decoration:underline;
}

/* Registration notice that replaces the password + confirm row. Sets
   the expectation that the server will email a password, in the same
   Fredoka/magenta voice as the rest of the panel. A thin magenta left
   rule makes it read as "informational" rather than a plain paragraph,
   and the soft glass background ties it to the rest of the card. */
.spin-auth-panel .ms-auth-form .spin-auth-panel-notice{
    margin:4px 0 16px;
    padding:12px 14px;
    border-radius:10px;
    border-left:3px solid #ff2bd6;
    background:rgba(255,43,214,0.08);
    font-family:'Fredoka',sans-serif;
    font-size:13px;
    line-height:1.5;
    letter-spacing:0.1px;
    color:rgba(255,255,255,0.88);
}

/* Primary submit: magenta fill with a soft glow, Fredoka, more top
   margin so it doesn't crowd the last input. White text because
   magenta + near-black would be lower contrast than white on magenta. */
.spin-auth-panel .ms-auth-form button[type="submit"]{
    margin-top:10px;
    padding:13px 20px;
    border-radius:12px;
    font-family:'Fredoka',sans-serif;
    font-size:14px;
    letter-spacing:0.4px;
    text-transform:none;
    font-weight:600;
    background:#ff2bd6;
    color:#fff;
    box-shadow:0 6px 20px rgba(255,43,214,0.3);
}
.spin-auth-panel .ms-auth-form button[type="submit"]:hover{
    filter:brightness(1.08);
    box-shadow:0 8px 26px rgba(255,43,214,0.42);
}

/* Back: low-emphasis, Fredoka, roomier click target so it reads as
   navigation rather than a system button. */
.spin-auth-panel-back{
    align-self:center;
    margin-top:10px;
    padding:10px 16px;
    background:none;border:none;cursor:pointer;
    font-family:'Fredoka',sans-serif;
    font-size:13px;
    letter-spacing:0.2px;
    font-weight:500;
    color:rgba(255,255,255,0.55);
    transition:color .15s ease;
}
.spin-auth-panel-back:hover{color:#fff;}
.spin-auth-panel-back > span:first-child{margin-right:6px;}

/* ── Win-mode heading + Spin Again button ──
   Hidden by default; revealed when JS adds .is-mswin to the panel
   root (see showWinAuthModal() in public/js/ping-landing.js). Used
   to give the post-minesweeper-win auth flow context — "Login Or
   Register / To Add [Place] To Your Territories" — and swap the
   subtle Back link for a prominent Spin Again CTA that matches the
   result modal's own primary button styling. */
.spin-auth-panel-winhead{display:none;}
.spin-auth-panel-winagain{display:none;}
.spin-auth-panel.is-mswin .spin-auth-panel-winhead{
    display:block;
    text-align:center;
    margin-top:2px;
    margin-bottom:10px;
}
.spin-auth-panel.is-mswin .spin-auth-panel-wintitle{
    font-family:'Fredoka',sans-serif;
    font-weight:600;
    font-size:17px;
    line-height:1.22;
    color:#ff2bd6;
    margin:0 0 4px;
    letter-spacing:0.2px;
}
.spin-auth-panel.is-mswin .spin-auth-panel-wintitle [data-spin-auth-winplace]{
    color:#fff;
}
.spin-auth-panel.is-mswin .spin-auth-panel-winsub{
    font-family:'Fredoka',sans-serif;
    font-size:12px;
    color:rgba(255,255,255,0.6);
    margin:0;
}
/* In win-mode, compact the inline form so the heading + tabs +
   fields + notice + submit + Spin Again all fit on a ~640px-tall
   body without clipping. Each rule here shaves a handful of pixels
   off the vertical rhythm the non-win panel uses. */
.spin-auth-panel.is-mswin .ms-auth-tabs{
    margin-top:2px;
    margin-bottom:14px;
}
.spin-auth-panel.is-mswin .ms-auth-form input{
    margin-bottom:10px;
}
/* The auto-generated-password notice is redundant in the win-gate
   (the user already has context from the heading and is mid-claim),
   and removing it also tightens the card vertically so the Spin
   Again CTA sits close to Create Account instead of separated by
   a full paragraph block. The notice stays in the pill's normal
   Login/Register flow where the explanation is still useful. */
.spin-auth-panel.is-mswin .ms-auth-form .spin-auth-panel-notice{
    display:none;
}
.spin-auth-panel.is-mswin .ms-auth-form button[type="submit"]{
    margin-top:4px;
}
/* Swap the subtle Back link for the primary Spin Again pill so the
   "walk away without signing up" affordance is first-class rather
   than a footer afterthought. Kept tight to the submit button above
   so the two CTAs read as a paired "finish claim / skip to next
   spin" row rather than two unrelated footer actions. */
.spin-auth-panel.is-mswin .spin-auth-panel-back{display:none;}
.spin-auth-panel.is-mswin .spin-auth-panel-winagain{
    display:block;
    align-self:stretch;
    width:100%;
    margin-top:4px;
}
@media(max-width:500px){
    .spin-auth-panel.is-mswin .spin-auth-panel-wintitle{font-size:16px;}
    .spin-auth-panel.is-mswin .spin-auth-panel-winsub{font-size:11px;}
}