/* A House Divided — Team Login page */

/* ════════════════ OVERSEER ACCENT ════════════════ */
/* This file only loads on the login page, so the override is page-scoped.
   Repaints everything gold here — Overseers card, veil, pass panel, signed-in card.
   Must be :root (not html) to match main.css's :root specificity and win by load order. */
:root{--gold:#ff6f00;--gold-rgb:255,111,0}

/* ════════════════ LAYOUT ════════════════ */
.login-wrap{max-width:860px;margin:0 auto;padding-bottom:40px}

/* ════════════════ FOOTER (same as other pages) ════════════════ */
.footer{margin-top:50px;padding-top:24px;border-top:1px solid var(--line);text-align:center;color:var(--txt-3);font-size:12.5px}
.footer b{color:var(--txt-2);font-family:'Oswald';font-weight:600;letter-spacing:.05em}

/* ════════════════ GOLD VEIL (overseer selected) ════════════════ */
.gold-veil{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s var(--ease);
  background:radial-gradient(60% 70% at 50% -10%, rgba(var(--gold-rgb),.28) 0%, transparent 60%),
             radial-gradient(50% 60% at 50% 110%, rgba(var(--gold-rgb),.14) 0%, transparent 55%)}
html.overseer-pick .gold-veil{opacity:1}
html.overseer-pick .ambient{--red-amt:.06;--blue-amt:.06}

/* ════════════════ SIDE PICK CARDS ════════════════ */
.pick-duel{margin-bottom:22px}
.pick-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}

.pick{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:30px 22px 26px;
  border:1px solid var(--line);overflow:hidden;cursor:pointer;text-align:center;width:100%;
  scale:1;transition:scale .4s var(--spring),box-shadow .4s var(--ease),opacity .5s var(--ease),filter .5s var(--ease),border-color .3s var(--ease)}
.pick > *{position:relative;z-index:2}

.pick--red{--fc-rgb:var(--red-rgb);--fc:var(--red);--fc-lt:var(--red-lt);
  border-radius:var(--r-xl) 0 0 var(--r-xl);border:1.5px solid rgba(var(--red-rgb),.5);border-right:none;
  background:linear-gradient(100deg,rgba(var(--red-rgb),.15),rgba(var(--red-rgb),.02) 72%)}
.pick--blue{--fc-rgb:var(--blue-rgb);--fc:var(--blue);--fc-lt:var(--blue-lt);
  border-radius:0 var(--r-xl) var(--r-xl) 0;border:1.5px solid rgba(var(--blue-rgb),.5);border-left:none;
  background:linear-gradient(260deg,rgba(var(--blue-rgb),.15),rgba(var(--blue-rgb),.02) 72%)}

/* cursor spotlight */
.pick::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%), rgba(var(--fc-rgb),.16), transparent 60%)}
.pick:hover::after{opacity:1}
.pick:hover{scale:1.015;box-shadow:0 18px 50px rgba(0,0,0,.45)}

.pick-watermark{position:absolute;font-family:'Oswald';font-weight:700;font-size:220px;line-height:.7;bottom:-46px;
  opacity:.05;z-index:0;pointer-events:none;user-select:none}
.pick--red .pick-watermark{right:-8px;color:var(--red)}
.pick--blue .pick-watermark{left:-8px;color:var(--blue)}

.pick-crest{position:relative;flex-shrink:0;width:clamp(58px,8vw,84px);height:clamp(58px,8vw,84px);border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;margin-bottom:4px;
  background:radial-gradient(120% 120% at 50% 0%, rgba(var(--fc-rgb),.22), var(--bg-3) 72%);
  border:2px solid rgba(var(--fc-rgb),.5);
  box-shadow:0 0 22px rgba(var(--fc-rgb),.16), inset 0 0 18px rgba(var(--fc-rgb),.1)}
.pick-crest img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pick-crest i{font-size:clamp(22px,3vw,32px);color:rgba(var(--fc-rgb),.9)}

.pick-flag{display:inline-block;font-family:'JetBrains Mono';font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 12px;border-radius:100px;color:var(--fc-lt);background:rgba(var(--fc-rgb),.16)}
.pick-name{font-family:'Oswald';font-weight:600;font-size:clamp(18px,2.6vw,24px);letter-spacing:.04em;text-transform:uppercase;color:var(--fc-lt)}

.pick-check{position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:50%;z-index:3;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;
  background:rgba(var(--fc-rgb),.9);opacity:0;transform:scale(.5);transition:all .3s var(--spring)}
.pick--blue .pick-check{right:auto;left:14px}
.pick.selected .pick-check{opacity:1;transform:scale(1)}
.pick.selected{border-color:rgba(var(--fc-rgb),.85);box-shadow:0 0 0 1px rgba(var(--fc-rgb),.5), 0 0 40px rgba(var(--fc-rgb),.18), 0 18px 50px rgba(0,0,0,.45)}

/* dim the losers when one side is chosen */
.pick-duel.has-selection .pick:not(.selected){opacity:.38;filter:grayscale(.5)}
.pick-duel.has-selection .pick:not(.selected):hover{opacity:.7;filter:grayscale(.15)}

.pick-vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;font-family:'Oswald';font-weight:700;
  font-size:clamp(22px,4vw,38px);letter-spacing:.04em;color:var(--txt);opacity:.16;line-height:1;pointer-events:none;
  text-shadow:0 2px 14px rgba(0,0,0,.5)}

/* overseer card */
.pick--overseer{--fc-rgb:var(--gold-rgb);--fc:var(--gold);--fc-lt:var(--gold);
  flex-direction:row;justify-content:center;gap:16px;text-align:left;margin-top:14px;padding:18px 22px;
  border-radius:var(--r-lg);border:1.5px dashed rgba(var(--gold-rgb),.35);
  background:linear-gradient(100deg,rgba(var(--gold-rgb),.07),rgba(var(--gold-rgb),.015) 70%)}
.pick--overseer:hover{border-style:solid}
.pick--overseer.selected{border-style:solid}
.pick-crest--sm{width:46px;height:46px;margin-bottom:0}
.pick-crest--sm i{font-size:18px}
.pick-overseer-text{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.pick--overseer .pick-name{font-size:17px}
.pick--overseer .pick-check{top:50%;right:18px;left:auto;transform:translateY(-50%) scale(.5)}
.pick--overseer.selected .pick-check{transform:translateY(-50%) scale(1)}

/* ════════════════ PASSWORD PANEL ════════════════ */
.pass-panel{--pk-rgb:var(--accent-rgb);--pk:var(--accent);
  max-width:520px;margin:0 auto;border-radius:var(--r-lg);padding:26px 26px 28px;position:relative;overflow:hidden;
  background:rgba(15,15,24,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-2);
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--spring),box-shadow .45s var(--ease)}
.pass-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(var(--pk-rgb),.9),transparent);transition:background .4s var(--ease)}
.pass-panel.show{opacity:1;transform:translateY(0);pointer-events:auto;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.pass-panel[data-side="red"]{--pk-rgb:var(--red-rgb);--pk:var(--red-lt)}
.pass-panel[data-side="blue"]{--pk-rgb:var(--blue-rgb);--pk:var(--blue-lt)}
.pass-panel[data-side="overseer"]{--pk-rgb:var(--gold-rgb);--pk:var(--gold)}

.pass-identity{display:flex;align-items:baseline;gap:10px;margin-bottom:18px}
.pass-identity-label{font-family:'Oswald';font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3)}
.pass-identity-name{font-family:'Oswald';font-weight:600;font-size:17px;letter-spacing:.05em;text-transform:uppercase;color:var(--pk);transition:color .3s}

.login-error{display:flex;align-items:center;gap:10px;padding:11px 14px;margin-bottom:16px;border-radius:var(--r-md);
  font-size:13.5px;color:#f2a29a;background:rgba(var(--red-rgb),.1);border:1px solid rgba(var(--red-rgb),.3)}
.login-error i{color:var(--red-lt)}

.pass-field{margin-bottom:18px}
.pass-label{display:block;font-family:'Oswald';font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt-2);margin-bottom:9px}
.pass-label i{margin-right:7px;color:rgba(var(--pk-rgb),.7);font-size:10.5px}
.pass-input{width:100%;padding:13px 15px;font-size:15px;font-family:'DM Sans';color:var(--txt);
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--r-md);transition:all .2s var(--ease)}
.pass-input::placeholder{color:var(--txt-3)}
.pass-input:focus{outline:none;border-color:rgba(var(--pk-rgb),.8);box-shadow:0 0 0 3px rgba(var(--pk-rgb),.15)}

.pass-submit{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:14px 20px;
  border-radius:var(--r-md);font-family:'Oswald';font-weight:600;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(135deg, rgba(var(--pk-rgb),1), rgba(var(--pk-rgb),.75));
  position:relative;overflow:hidden;transition:all .25s var(--ease)}
.pass-submit::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12) 0%,transparent 55%);pointer-events:none}
.pass-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px rgba(var(--pk-rgb),.35)}
.pass-submit:active:not(:disabled){transform:translateY(0)}
.pass-submit:disabled{opacity:.55;cursor:default}

/* ════════════════ SIGNED-IN CARD ════════════════ */
.signed-card{--pk-rgb:var(--accent-rgb);--pk:var(--accent);
  max-width:560px;margin:0 auto;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border-radius:var(--r-lg);padding:24px 26px;background:rgba(15,15,24,.55);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line-2)}
.signed-card[data-side="red"]{--pk-rgb:var(--red-rgb);--pk:var(--red-lt)}
.signed-card[data-side="blue"]{--pk-rgb:var(--blue-rgb);--pk:var(--blue-lt)}
.signed-card[data-side="overseer"]{--pk-rgb:var(--gold-rgb);--pk:var(--gold)}
.signed-icon{font-size:30px;color:var(--pk)}
.signed-text{flex:1;min-width:140px}
.signed-label{font-family:'Oswald';font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3);margin-bottom:2px}
.signed-name{font-family:'Oswald';font-weight:600;font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:var(--pk)}
.signed-actions{display:flex;gap:10px}
.btn-accent{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:var(--r-md);
  font-family:'Oswald';font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#fff;
  background:rgba(var(--pk-rgb),.85);transition:all .2s var(--ease)}
.btn-accent:hover{background:rgba(var(--pk-rgb),1);transform:translateY(-1px)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:var(--r-md);
  font-family:'Oswald';font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-2);border:1px solid var(--line-2);transition:all .2s var(--ease)}
.btn-ghost:hover{color:var(--txt);background:var(--bg-3)}

/* ════════════════ RESPONSIVE ════════════════ */
@media(max-width:720px){
  .pick-grid{grid-template-columns:1fr;gap:12px}
  .pick--red,.pick--blue{border-radius:var(--r-lg);border:1.5px solid rgba(var(--fc-rgb),.5)}
  .pick-vs{display:none}
  .pick--blue .pick-check{left:auto;right:14px}
  .signed-actions{width:100%}
  .signed-actions .btn-accent,.signed-actions .btn-ghost{flex:1;justify-content:center}
}