/* The four companion seals and the eight trigram array share one moonlit scene. */
body:has(.team-drawer.open) #overlay{
  background:linear-gradient(90deg,#05111ced,#061420c9 50%,#05111ced),url('./team-night-gate.webp') center 31%/cover;
}
.drawer.team-drawer{
  width:min(1120px,calc(100vw - 30px));max-height:calc(100dvh - 24px);
  padding:0 clamp(18px,3.5vw,44px) 37px;
  border:1px solid #b59056;border-radius:10px;
  background:
    linear-gradient(180deg,#07151dc5 0%,#091a24b8 19%,#0a1c28e6 37%,#091923f6 67%,#081721 100%),
    url('./team-night-gate.webp') center top/100% auto no-repeat,#081721;
  box-shadow:0 35px 105px #000e,inset 0 0 0 4px #071824,inset 0 0 0 6px #ba985f8c;
}
.team-drawer .drawer-head{
  min-height:196px;margin:0;padding:38px 68px 13px;
  align-items:flex-start;
}
.team-drawer .drawer-head h2{
  font-size:clamp(48px,6vw,78px);line-height:1.2;letter-spacing:.13em;
  color:#ffe5a4;text-shadow:0 3px 3px #221507,0 8px 20px #000,0 0 29px #daab5d6b;
}
.team-drawer .drawer-head .eyebrow{font-size:13px;letter-spacing:.32em;color:#e1c990}
.team-drawer .drawer-close{top:26px;right:15px}
.team-drawer .team-tabs{
  max-width:750px;margin:0 auto 19px;padding:0 0 17px;gap:9px;
  border-bottom:1px solid #bda16c59;
}
.team-drawer .team-tabs button{
  height:43px;padding:8px 12px;writing-mode:horizontal-tb;text-orientation:mixed;
  font:700 15px/1.2 var(--display);letter-spacing:.13em;
  border-radius:3px;background:linear-gradient(180deg,#17303bdb,#0b1c28dc);
  box-shadow:inset 0 0 0 2px #0b1c28,inset 0 0 0 3px #b89b5e52;
}
.team-drawer .team-tabs button::after{top:auto;bottom:-6px;width:5px;height:5px}
.team-drawer .team-tabs button[aria-pressed=true]{
  background:linear-gradient(180deg,#e6c983,#b48b48);color:#251c12;
  box-shadow:0 0 18px #f4d28a74,inset 0 0 0 2px #d1ab67;
}
.team-drawer .team-content{padding:0 7px 6px}
.team-drawer .team-content[data-team-view="party"] .team-intro{
  display:flex;align-items:center;min-height:78px;margin:0 0 15px;padding:5px 14px 13px;
  border-bottom:1px solid #d5b27686;
  background:linear-gradient(90deg,#0c1f2aba 0%,#0a1e2a5e 75%,transparent);
}
.team-drawer .team-content[data-team-view="party"] .team-intro h3{
  font-size:clamp(30px,3.4vw,42px);margin:0;
}
.team-drawer .team-intro h3 small{font-size:19px;color:#e4c287;white-space:nowrap}
.team-drawer .team-intro .eyebrow{display:block;margin-bottom:2px;font-size:13px;color:#eed49b}
.team-drawer .team-content[data-team-view="party"] .team-intro .team-button{
  min-width:212px;height:56px;padding:7px 28px;
  border:1px solid #f6dfa0;border-radius:4px;
  background:linear-gradient(165deg,#f4d991 0%,#d9a957 52%,#91632c 100%);
  color:#342013;font:700 25px/1.2 var(--display);letter-spacing:.1em;
  box-shadow:0 0 20px #dcb35c70,inset 0 0 0 3px #ffe9b27a,0 7px 16px #0009;
}
.team-drawer .team-content[data-team-view="party"] .team-intro .team-button:hover{
  transform:translateY(-2px);filter:brightness(1.14);box-shadow:0 0 29px #ffd581a6,inset 0 0 0 3px #ffe9b2;
}
.team-drawer .team-slots{gap:13px}
.team-drawer .team-slot,
.team-drawer .team-slot.empty{
  min-height:326px;padding:15px 13px 13px;align-items:center;gap:4px;
  border:1px solid #a58551;border-radius:5px;
  color:#e8d6af;text-align:center;
  background:linear-gradient(180deg,#122837e8 0%,#0b1c2bdc 66%,#12303bd9 100%);
  box-shadow:inset 0 0 0 3px #0b1e2d,inset 0 0 0 4px #bb995e86,0 12px 22px #0008;
}
.team-drawer .team-slot::before,.team-drawer .team-slot.empty::before{
  inset:0;background:url('./team-night-gate.webp') center 45%/auto 160% no-repeat;
  opacity:.15;filter:grayscale(.35);
}
.team-drawer .team-slot::after{
  content:"◇";position:absolute;left:50%;top:45%;width:94%;height:66%;
  display:grid;place-items:center;transform:translate(-50%,-50%);
  border:1px solid #c6a36622;border-radius:45% 45% 6px 6px;
  color:#d5b67613;font:190px/1 Georgia,serif;pointer-events:none;
}
.team-drawer .team-slot.self{
  border-color:#d7a569;
  background:linear-gradient(180deg,#3b2325e6 0%,#261b25e7 60%,#20202ae6 100%);
  box-shadow:inset 0 0 0 3px #251f27,inset 0 0 0 4px #d8a66a,0 0 19px #a737235c,0 12px 23px #0009;
}
.team-drawer .team-slot-number{
  align-self:stretch;min-height:30px;padding-bottom:7px;
  border-bottom:1px solid #bc996266;color:#e7c787;
  font:700 13px/1.4 Georgia,var(--display);letter-spacing:.05em;
}
.team-drawer .team-slot-hero{
  position:relative;z-index:1;margin-top:5px;color:#d9b878;
  font:700 16px/1.2 var(--display);white-space:nowrap;
}
.team-drawer .team-slot .team-avatar,
.team-drawer .team-slot.empty .team-avatar{
  position:relative;z-index:1;width:88px;height:88px;margin:11px auto 14px;
  border:1px solid #e6ca83;border-radius:50%;
  background:radial-gradient(circle,#25343b 0%,#0a1a28 75%);
  color:#ffeba9;font:50px/1 var(--display);
  text-shadow:0 0 13px currentColor;
  box-shadow:0 0 0 5px #a77f497c,0 0 0 8px #0e2632,0 0 0 9px #ba955c7a,0 0 22px 7px color-mix(in srgb,var(--companion-color,#b99558) 55%,transparent);
}
.team-drawer .team-slot .team-avatar::after{
  content:"";position:absolute;inset:-14px;border:1px dashed #dbbb7c52;border-radius:50%;pointer-events:none;
}
.team-drawer .team-slot.empty .team-avatar{color:#a9a086;box-shadow:0 0 0 4px #84755377,0 0 0 8px #0e2632,0 0 0 9px #8c795862}
.team-drawer .team-slot>b,
.team-drawer .team-slot.empty>b{position:relative;z-index:1;color:#f7e2ae;font-size:23px;line-height:1.28}
.team-drawer .team-slot p,
.team-drawer .team-slot.empty p{position:relative;z-index:1;margin:0;color:#c9b58f;font-size:13px}
.team-drawer .team-slot .team-token{
  position:relative;z-index:1;margin-top:6px;color:#dcc38e;
  font-size:14px;letter-spacing:.06em;
}
.team-drawer .team-slot .team-locked{
  position:relative;z-index:1;min-height:36px;margin-top:auto;color:#f0d496;
  font-size:13px;
}
.team-drawer .team-slot .team-button.quiet{
  position:relative;z-index:1;width:min(142px,100%);min-width:0;min-height:34px;margin-top:auto;
  background:linear-gradient(180deg,#5d4930,#2d2b2b);border-color:#c8aa71;color:#f5db9c;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);
  box-shadow:none;
}
.team-drawer .team-section.formation-section{
  margin-top:25px;padding:22px 12px 14px;
  border-top:1px solid #ba985d9c;
  background:linear-gradient(180deg,#0919239c,#10263570);
}
.team-drawer .formation-section>h3{
  margin:0 0 5px;color:#f4d692;font:700 30px/1.25 var(--display);
}
.team-drawer .formation-section>h3::before{
  content:"✦";margin-right:10px;color:#caa263;font:14px Georgia,serif;vertical-align:middle;
}
.team-drawer .formation-display{
  display:grid;grid-template-columns:minmax(340px,1fr) minmax(230px,.8fr);align-items:center;gap:36px;
  min-height:350px;
}
.team-drawer .formation-wheel{
  position:relative;width:min(100%,390px);aspect-ratio:1;margin:auto;
  background:radial-gradient(circle,#d3af6136 0 2%,transparent 3% 13%,#d3af6124 14% 15%,transparent 16% 30%,#c49f5d21 31% 32%,transparent 33%);
}
.team-drawer .formation-wheel::before{
  content:"";position:absolute;inset:16%;border:2px solid #9e8153;border-radius:50%;
  box-shadow:0 0 0 8px #ae915232,0 0 0 10px #a48b575f,0 0 0 17px #9d81512d,inset 0 0 22px #c7ad5b4b,0 0 22px #c4a35c35;
  background:repeating-conic-gradient(from 0deg,#c5a56e56 0deg 1deg,transparent 1deg 45deg),radial-gradient(circle,#0f2832 0%,#071721d9 74%);
}
.team-drawer .formation-wheel::after{
  content:"☰  ☱  ☲  ☳  ☴  ☵  ☶  ☷";position:absolute;inset:25%;
  display:grid;place-items:center;border:1px solid #c2a16a71;border-radius:50%;
  color:#d6b67572;font:20px/1.6 var(--display);text-align:center;
  transform:rotate(-12deg);pointer-events:none;
}
.team-drawer .formation-rings span{position:absolute;inset:24%;border:1px dashed #bc995752;border-radius:50%}
.team-drawer .formation-rings span:nth-child(2){inset:34%;border-style:solid;opacity:.75}
.team-drawer .formation-rings span:nth-child(3){inset:43%;border-style:solid;opacity:.9}
.team-drawer .formation-core{
  position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:87px;height:87px;border:1px solid #e7c778;border-radius:50%;
  color:#ffdfa0;background:radial-gradient(circle,#263341,#0c1a25 76%);
  box-shadow:0 0 0 5px #8c764b,0 0 20px #d5ad5988;
}
.team-drawer .formation-core b{font:700 34px/1 Georgia,serif}
.team-drawer .formation-core span{margin-top:3px;font-size:10px;letter-spacing:.06em}
.team-drawer .formation-wheel .token-counts{position:absolute;inset:0;display:block;margin:0}
.team-drawer .formation-wheel .token-count{
  position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  width:65px;height:61px;padding:2px;
  border:1px solid #a28c62;border-radius:6px;
  background:linear-gradient(155deg,#1d2b35,#0b1925);color:#ebd5a5;
  box-shadow:inset 0 0 0 2px #0a1c28,0 4px 12px #0009;
}
.team-drawer .formation-wheel .token-count.ready{border-color:#f3d18b;box-shadow:0 0 18px #e7bc7199,inset 0 0 0 2px #604525}
.team-drawer .formation-wheel .token-count:nth-child(1){left:50%;top:6%}
.team-drawer .formation-wheel .token-count:nth-child(2){left:82%;top:19%}
.team-drawer .formation-wheel .token-count:nth-child(3){left:93%;top:50%}
.team-drawer .formation-wheel .token-count:nth-child(4){left:82%;top:81%}
.team-drawer .formation-wheel .token-count:nth-child(5){left:50%;top:94%}
.team-drawer .formation-wheel .token-count:nth-child(6){left:18%;top:81%}
.team-drawer .formation-wheel .token-count:nth-child(7){left:7%;top:50%}
.team-drawer .formation-wheel .token-count:nth-child(8){left:18%;top:19%}
.team-drawer .token-glyph{font:24px/1 var(--display);color:#f8dc99}
.team-drawer .token-name{font:13px/1.2 var(--display);white-space:nowrap}
.team-drawer .token-name b{margin-left:2px;color:#f8d694}
.team-drawer .formation-copy{align-self:center;padding:23px 23px 23px 26px;border-left:1px solid #d3ac6d78;background:linear-gradient(90deg,#142d3870,transparent)}
.team-drawer .formation-copy h4{margin:8px 0 17px;color:#f7dda3;font:700 28px/1.2 var(--display)}
.team-drawer .formation-copy p,.team-drawer .formation-copy li{font-size:15px;line-height:1.9}
.team-drawer .formation-copy .team-note{margin-top:20px;padding-top:15px;border-top:1px solid #bc9a665a;font-size:12px!important;line-height:1.75!important}
.team-drawer .covenant-section{margin-top:14px;padding:20px 0 0}
.team-drawer .covenant-section>h3{
  margin:0;text-align:center;min-height:64px;padding:11px 14px;
  border:1px solid #bb9b63;border-radius:6px;color:#4a3019;
  background:linear-gradient(90deg,#a18553 0 3%,#dfd1ac 7%,#f3e8ca 50%,#dfd1ac 93%,#a18553 97%);
  box-shadow:0 5px 17px #0008,inset 0 0 0 3px #f5e9c887;
  font:700 32px/1.3 var(--display);
}
.team-drawer .covenant-copy{padding:18px 16px 3px;border-left:1px solid #b89a6280;border-right:1px solid #b89a6280;background:#0a1d29a6}
.team-drawer .team-content::after{text-align:center}
@media(max-width:820px){
  .drawer.team-drawer{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);padding:0 18px 24px}
  .team-drawer .drawer-head{min-height:160px;padding:35px 42px 4px}
  .team-drawer .drawer-head h2{font-size:clamp(38px,8vw,60px)}
  .team-drawer .team-tabs{margin-bottom:15px;gap:5px}
  .team-drawer .team-tabs button{font-size:13px;letter-spacing:0}
  .team-drawer .team-slots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .team-drawer .formation-display{grid-template-columns:1fr;gap:0}
  .team-drawer .formation-copy{margin-top:10px}
}
@media(max-width:520px){
  .team-drawer .drawer-head{min-height:145px;padding:35px 10px 4px}
  .team-drawer .drawer-head h2{font-size:32px;letter-spacing:.05em;white-space:nowrap}
  .team-drawer .drawer-close{top:10px;right:4px;width:32px;height:32px}
  .team-drawer .team-tabs button{padding:5px 2px;font-size:12px}
  .team-drawer .team-content[data-team-view="party"] .team-intro{display:block;text-align:center}
  .team-drawer .team-content[data-team-view="party"] .team-intro .team-button{width:100%;margin-top:9px}
  .team-drawer .team-slot,.team-drawer .team-slot.empty{min-height:292px;padding:12px 6px}
  .team-drawer .team-slot .team-avatar,.team-drawer .team-slot.empty .team-avatar{width:65px;height:65px;margin:8px auto 11px;font-size:38px}
  .team-drawer .team-slot-hero{font-size:13px}
  .team-drawer .team-slot>b,.team-drawer .team-slot.empty>b{font-size:19px}
  .team-drawer .team-slot p,.team-drawer .team-slot.empty p{font-size:12px}
  .team-drawer .formation-wheel{width:min(100%,320px)}
  .team-drawer .formation-wheel .token-count{width:53px;height:52px}
  .team-drawer .token-glyph{font-size:19px}
}
@media(prefers-reduced-motion:no-preference){
  .team-drawer .team-slot .team-avatar{animation:teamSealBreath 4s ease-in-out infinite alternate}
  .team-drawer .formation-wheel::before{animation:teamArrayPulse 5s ease-in-out infinite alternate}
  @keyframes teamSealBreath{to{filter:brightness(1.18);box-shadow:0 0 0 5px #a77f497c,0 0 0 8px #0e2632,0 0 0 9px #ba955c7a,0 0 32px 12px color-mix(in srgb,var(--companion-color,#b99558) 75%,transparent)}}
  @keyframes teamArrayPulse{to{filter:brightness(1.2);box-shadow:0 0 0 8px #ae915245,0 0 0 10px #c5a46b8c,0 0 0 17px #9d815141,inset 0 0 28px #dcb8666e,0 0 30px #c4a35c65}}
}