/* Signup v2 (role picker + invitation ticket) and a larger navbar.
   Revert: remove the <link> to this file in index.html. */

/* ---------- Role cards: a proper selection control ---------- */
body .role-options{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
body .role-card{position:relative;isolation:isolate;overflow:hidden;display:flex!important;flex-direction:column;align-items:flex-start;gap:0;min-height:0!important;padding:24px!important;text-align:left;cursor:pointer;
  border-radius:24px!important;background:linear-gradient(180deg,#18191b,#111213)!important;box-shadow:inset 0 0 0 1px #ffffff12,inset 0 1px 0 #ffffff0d!important;
  transition:box-shadow .35s var(--ease-settle),background .35s var(--ease-settle),transform .32s var(--ease-settle)!important;--mx:50%;--my:0%}
body .role-card::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(260px circle at var(--mx) var(--my),#cefa9114,transparent 65%);transition:opacity .4s var(--ease-settle)}
body .role-card:hover::before{opacity:1}
body .role-card:hover{box-shadow:inset 0 0 0 1px #ffffff26,inset 0 1px 0 #ffffff12!important}
body .role-card:active{transform:scale(.985)!important;transition-duration:.08s!important}
body .role-card:focus-visible{outline:2px solid var(--a-accent);outline-offset:3px}
body .role-card.selected{background:radial-gradient(120% 90% at 0% 0%,#cefa911c,transparent 55%),linear-gradient(180deg,#191d15,#111310)!important;
  box-shadow:inset 0 0 0 1.5px var(--a-accent),0 20px 50px -24px #cefa9155!important}
body .role-number,body .role-art,body .role-action{display:none!important}
.role-top{display:flex;align-items:flex-start;justify-content:space-between;width:100%;margin-bottom:28px}
.role-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#ffffff0a;box-shadow:inset 0 0 0 1px #ffffff14;color:var(--a-text);
  transition:background .35s var(--ease-settle),box-shadow .35s var(--ease-settle),color .35s var(--ease-settle)}
.role-icon .icon{width:22px;height:22px}
.selected .role-icon{background:#cefa911f;box-shadow:inset 0 0 0 1px #cefa9166,0 0 24px #cefa9133;color:var(--a-accent)}
.role-radio{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #ffffff33;transition:background .3s var(--ease-settle),box-shadow .3s var(--ease-settle)}
.role-radio svg{width:14px;height:14px;fill:none;stroke:#11170a;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;scale:.4;opacity:0;transition:scale .35s var(--ease-settle),opacity .2s var(--ease-settle)}
.selected .role-radio{background:var(--a-accent);box-shadow:inset 0 0 0 1.5px var(--a-accent)}
.selected .role-radio svg{scale:1;opacity:1}
body .role-card strong{font-size:21px!important;font-weight:650;letter-spacing:-.022em;color:var(--a-text);margin:0 0 6px}
body .role-card .role-description{font-size:15px!important;line-height:1.45;color:var(--a-secondary)!important}
.role-tag{margin-top:18px;padding:5px 11px;border-radius:999px;background:#ffffff0a;color:var(--a-tertiary);font-size:12px;letter-spacing:-.005em;transition:background .35s var(--ease-settle),color .35s var(--ease-settle)}
.selected .role-tag{background:#cefa9114;color:#d9f5b4}

/* ---------- Invitation ticket ---------- */
body .lobby-signup{position:relative;display:grid!important;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;gap:0!important;margin-top:20px!important;padding:0!important;
  border:1px solid transparent!important;border-radius:28px!important;
  background:linear-gradient(160deg,#1a1f15 0%,#131416 42%,#0e0f10 100%) padding-box,linear-gradient(135deg,#cefa9199,#ffffff1a 35%,#ffffff0a 65%,#cefa9155) border-box!important;
  box-shadow:0 40px 80px -36px #000,0 0 90px -30px #cefa9133!important}
/* Ticket notches at the perforation */
body .lobby-signup::before,body .lobby-signup::after{content:"";position:absolute;left:calc(41% - 13px);width:26px;height:26px;border-radius:50%;background:var(--a-tile);z-index:2}
body .lobby-signup::before{top:-14px;box-shadow:inset 0 -1px 0 #ffffff1a}
body .lobby-signup::after{bottom:-14px;box-shadow:inset 0 1px 0 #ffffff1a}
body .selection-summary{padding:clamp(28px,3.4vw,44px)!important;text-align:left}
body .step-label{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:#cefa9114;font-size:13px!important;font-weight:600!important}
body .step-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--a-accent);box-shadow:0 0 0 3px #cefa9133}
.invite-role{display:flex;align-items:center;gap:16px;margin:22px 0 0}
.invite-icon{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:linear-gradient(145deg,#2a3320,#161b11);
  box-shadow:inset 0 0 0 1px #cefa9155,0 10px 30px -8px #cefa9155,inset 0 1px 0 #ffffff26;color:var(--a-accent)}
.invite-icon .icon{display:none;width:26px;height:26px}
.lobby-signup[data-invite-role="deploy"] .invite-icon [data-for="deploy"],
.lobby-signup[data-invite-role="lend"] .invite-icon [data-for="lend"],
.lobby-signup[data-invite-role="both"] .invite-icon [data-for="both"]{display:block}
body #role-summary{font-size:clamp(24px,2.4vw,30px)!important;line-height:1.1;letter-spacing:-.03em;margin:0}
body #role-detail{margin:6px 0 0;font-size:15px;color:var(--a-secondary)}
.invite-perks{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.invite-perks li{display:flex;align-items:center;gap:10px;font-size:15px;color:#d2d2d7}
.invite-perks li::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:#cefa911f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cefa91' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}

body #beta-form{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3.4vw,44px)!important;border-left:1.5px dashed #ffffff1c}
body #beta-form>label{font-size:clamp(20px,1.9vw,24px)!important;font-weight:650!important;letter-spacing:-.025em;color:var(--a-text)!important;margin-bottom:18px}
body .signup-inline{display:flex!important;align-items:center;gap:6px!important;padding:6px;border-radius:999px;background:#08090a;box-shadow:inset 0 0 0 1px #ffffff1f;
  transition:box-shadow .3s var(--ease-settle)}
body .signup-inline:focus-within{box-shadow:inset 0 0 0 1px #cefa91aa,0 0 0 5px #cefa911f}
body .signup-inline:has(input:user-invalid){box-shadow:inset 0 0 0 1px #ff8a7aaa,0 0 0 5px #ff8a7a1a}
body .signup-inline #beta-email{flex:1;min-width:0;min-height:50px!important;padding:0 8px 0 20px!important;border:0!important;background:transparent!important;box-shadow:none!important;outline:none;font-size:17px;color:var(--a-text)}
body .signup-inline #beta-email::placeholder{color:#6e6e73}
/* Browser autofill paints its own box; keep the field seamless and the text readable. */
body .signup-inline #beta-email:-webkit-autofill,
body .signup-inline #beta-email:-webkit-autofill:hover,
body .signup-inline #beta-email:-webkit-autofill:focus{-webkit-text-fill-color:var(--a-text);caret-color:var(--a-text);
  -webkit-box-shadow:0 0 0 1000px #08090a inset!important;box-shadow:0 0 0 1000px #08090a inset!important;border-radius:999px;transition:background-color 99999s}
body .signup-inline #beta-email{text-overflow:ellipsis}
body .signup-inline #beta-email:focus{text-overflow:clip}
body .signup-inline .button{flex:none;width:auto!important;margin:0!important;min-height:50px!important;padding:0 20px!important;gap:10px!important;white-space:nowrap;font-size:16px!important;font-weight:600!important;
  box-shadow:0 8px 24px -8px #cefa9199!important}
body .signup-inline .button:hover{box-shadow:0 10px 30px -6px #cefa91bb!important}
body .signup-inline .button .icon{transition:transform .3s var(--ease-settle)}
body .signup-inline .button:hover .icon{transform:translateX(3px)}
body .signup-inline .button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none!important}
body #signup-status{margin:14px 0 0 6px;font-size:14px;color:var(--a-secondary)}
body .signup-data-note{margin:6px 0 0 6px;font-size:12px;color:var(--a-tertiary)}
body .signup-data-note a{color:var(--a-secondary)}
body .google-signin{margin-top:14px}

@media (max-width:860px){
  body .role-options{grid-template-columns:1fr!important}
  body .role-card{display:grid!important;grid-template-columns:auto 1fr;column-gap:16px;padding:18px!important}
  .role-top{display:contents}
  .role-icon{grid-row:1/4;width:44px;height:44px}
  .role-radio{position:absolute;top:18px;right:18px}
  body .role-card strong{padding-right:32px}
  .role-tag{justify-self:start;margin-top:12px}
  body .lobby-signup{grid-template-columns:1fr!important}
  body .lobby-signup::before,body .lobby-signup::after{display:none}
  body #beta-form{border-left:0;border-top:1.5px dashed #ffffff1c}
}
@media (max-width:520px){
  body .signup-inline{flex-direction:column;align-items:stretch;border-radius:20px}
  body .signup-inline #beta-email{padding:0 14px!important}
  body .signup-inline .button{width:100%!important;justify-content:center;border-radius:14px!important}
}
@media (prefers-reduced-motion:reduce){
  body .role-card::before{display:none}
}

/* ---------- Navbar: slightly larger presence ---------- */
body .header .nav{min-height:72px}
body .nav-emblem{width:36px;height:36px;border-radius:11px}
body .nav-emblem svg{width:24px;height:24px}
body .nav-wordmark{font-size:21px!important}
.nav-badge{font-size:12px;padding:2px 9px}
@media (min-width:701px){
  body .nav-links a{font-size:15px!important;padding:8px 18px!important}
}
body .nav-cta{min-height:42px!important;padding:7px 8px 7px 18px!important;font-size:15px!important;gap:10px!important}
body .nav-cta .nav-arrow{width:26px;height:26px}
body .nav-cta .nav-arrow .icon{width:13px;height:13px}
@media (max-width:420px){
  body .nav-cta{min-height:38px!important;padding:6px 6px 6px 14px!important;font-size:14px!important}
  .nav-badge{display:none}
}