/* The companion drawer is a moonlit destination, with readable controls laid over the scene. */
body:has(.team-drawer.open) #overlay{
  background:linear-gradient(90deg,#07141edf,#081a26ae 48%,#06131de8),url('./scene-benming.webp') center/cover;
  backdrop-filter:blur(5px);
}
.drawer.team-drawer{
  left:50%;right:auto;top:clamp(10px,2vh,22px);bottom:clamp(10px,2vh,22px);
  width:min(780px,calc(100vw - 28px));height:auto;max-height:calc(100dvh - 20px);
  padding:0 clamp(18px,3.2vw,42px) 28px;
  border:1px solid #b99b66;border-radius:13px;
  color:#f4e7c9;
  background:
    linear-gradient(180deg,#0717228a 0%,#0a1b29af 24%,#0b1e2bdd 45%,#0b1d29f5 72%,#091a27fa 100%),
    url('./team-night-gate.webp') center top/100% auto no-repeat,#0b1c29;
  box-shadow:0 32px 95px #020910ed,inset 0 0 0 4px #0a1b29,inset 0 0 0 6px #c5a66c8a;
  transform:translate(-50%,105%);
  overscroll-behavior:contain;
  scrollbar-color:#ae8b54 #0a1b29;
}
.drawer.team-drawer.open{transform:translate(-50%,0)}
.drawer.team-drawer::before{
  content:"";position:absolute;z-index:0;inset:11px 10px auto;height:95px;
  border-top:1px solid #d4b77d82;border-left:1px solid #d4b77d70;border-right:1px solid #d4b77d70;
  border-radius:10px 10px 0 0;pointer-events:none;
  background:radial-gradient(circle at 8% 42%,#e7c17d 0 2px,transparent 3px),radial-gradient(circle at 92% 42%,#e7c17d 0 2px,transparent 3px);
}
.drawer.team-drawer::after{
  content:"";position:absolute;z-index:0;top:104px;left:23px;right:23px;height:1px;
  background:linear-gradient(90deg,transparent,#c9aa70b3 22%,#f4d996 50%,#c9aa70b3 78%,transparent);
  box-shadow:0 0 14px #d7ba7099;pointer-events:none;
}
.team-drawer .drawer-head,.team-drawer #drawerContent{position:relative;z-index:1}
.team-drawer .drawer-head{
  min-height:210px;margin:0 0 2px;padding:44px 58px 13px;
  display:flex;justify-content:center;align-items:flex-start;text-align:center;
  border:0;
}
.team-drawer .drawer-head>div{display:flex;flex-direction:column;align-items:center;gap:4px}
.team-drawer .drawer-head .eyebrow{
  order:2;color:#dbbd83;letter-spacing:.28em;font:600 12px/1.4 Georgia,serif;
  text-shadow:0 2px 7px #06141b;
}
.team-drawer .drawer-head h2{
  order:1;margin:0;color:#f5d792;font:700 clamp(38px,4.4vw,61px)/1.26 var(--display);
  letter-spacing:.08em;text-shadow:0 4px 13px #040e19,0 0 23px #d4a75c55;
}
.team-drawer .drawer-close{
  position:absolute;top:27px;right:8px;z-index:4;width:39px;height:39px;
  background:#0b2230dc;border:1px solid #c5a66b9c;border-radius:50%;color:#e3c996;
  box-shadow:0 0 0 3px #09202cc9;
}
.team-drawer .drawer-close:hover{background:#274453;color:#fff2ce}
.team-drawer .team-tabs{
  max-width:590px;margin:0 auto 27px;padding:0 0 16px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2vw,22px);
  border-bottom:1px solid #b99b6655;
}
.team-drawer .team-tabs button{
  position:relative;display:grid;place-items:center;min-width:0;height:107px;
  padding:10px 7px;border:1px solid #c5a66b8a;border-radius:8px;
  background:linear-gradient(150deg,#18303cdb,#0a1c2aec);
  color:#e6d3a8;font:700 18px/1.12 var(--display);writing-mode:vertical-rl;text-orientation:upright;
  letter-spacing:.1em;box-shadow:inset 0 0 0 3px #0a1c28,inset 0 0 0 4px #c6a66b4f,0 7px 18px #0008;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.team-drawer .team-tabs button::after{
  content:"";position:absolute;top:8px;left:50%;width:6px;height:6px;
  transform:translateX(-50%) rotate(45deg);border:1px solid #c4a46899;
}
.team-drawer .team-tabs button:hover{transform:translateY(-4px);border-color:#ead093;box-shadow:0 0 18px #e9c77b55,inset 0 0 0 3px #0a1c28}
.team-drawer .team-tabs button[aria-pressed=true]{
  color:#362916;border-color:#ffe3a2;
  background:linear-gradient(145deg,#fff0bd,#d4ad63 74%,#a98142);
  box-shadow:0 0 24px #ffd277b3,0 8px 22px #000b,inset 0 0 0 3px #f8e1a2,inset 0 0 0 4px #8f6a31;
}
.team-drawer .team-tabs button[aria-pressed=true]::after{border-color:#76562d}
.team-drawer .team-content{padding:0 7px 6px}
.team-drawer .team-intro{
  align-items:end;gap:14px;margin:0 0 12px;padding:0 2px 12px;
  border-bottom:1px solid #c9a56d63;
}
.team-drawer .team-intro h3{margin:5px 0 0;color:#f6dfad;font:700 clamp(27px,3vw,36px)/1.25 var(--display);text-shadow:0 3px 10px #010b14}
.team-drawer .team-intro h3 small,.team-drawer .team-section h3 small{color:#cdb782;font-size:13px}
.team-drawer .eyebrow{color:#d2b475;letter-spacing:.14em}
.team-drawer .team-lead{margin:9px 2px 18px;color:#e2d5bc;font-size:14px;line-height:1.8}
.team-drawer .team-pill{
  border-color:#c3a2639e;border-radius:20px;background:#102d38c4;color:#e3c78e;
  box-shadow:inset 0 0 9px #d5b4741c;
}
.team-drawer .team-button{
  border-color:#d9b87b;border-radius:6px;
  background:linear-gradient(135deg,#e2c283,#ac7d3e);color:#2e2618;
  box-shadow:inset 0 1px #fff3c7a8,0 4px 12px #08131ab3;
  font-weight:700;
}
.team-drawer .team-button:hover{background:linear-gradient(135deg,#f4dba2,#ba8c49);transform:translateY(-2px)}
.team-drawer .team-button.quiet{
  min-width:112px;white-space:nowrap;
  border-color:#9ebcaa;border-radius:3px;
  background:linear-gradient(135deg,#d6efe0,#75a997 52%,#528678);color:#12392f;
  clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);
  box-shadow:inset 0 0 0 2px #e8f5dd,0 4px 12px #0719239c;
}
.team-drawer .team-button:disabled{opacity:1;cursor:default;filter:saturate(.82)}
.team-drawer .team-button:disabled:hover{transform:none}
.team-drawer .companion-list{gap:13px}
.team-drawer .companion-card,.team-drawer .record-card,.team-drawer .team-slot{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid #b79861;border-radius:8px;
  background:linear-gradient(110deg,#f5efdf 0%,#eae3d2 62%,#d7d2c5 100%);
  box-shadow:inset 0 0 0 3px #fdf6e8af,inset 0 0 0 4px #ad9566a1,0 8px 20px #010b15ac;
}
.team-drawer .companion-card::before,.team-drawer .record-card::before,.team-drawer .team-slot::before{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:url('./team-night-gate.webp') right 27%/auto 200% no-repeat;
  opacity:.065;filter:grayscale(1);
}
.team-drawer .companion-card{min-height:111px;padding:16px 17px;gap:20px}
.team-drawer .team-avatar{
  width:67px;height:67px;flex:none;border-radius:50%;
  border:1px solid #d3b874;
  background:radial-gradient(circle at 50% 32%,#344851,#101b27 74%);
  color:#f7e7b3;font:37px/1 var(--display);
  text-shadow:0 0 11px #f6e5a2;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--companion-color,#b89b5e) 65%,#c6a373),0 0 0 7px #f3e0b7,0 0 18px 9px color-mix(in srgb,var(--companion-color,#b89b5e) 43%,transparent);
}
.team-drawer .companion-card>div{position:relative;z-index:1}
.team-drawer .companion-card b,.team-drawer .record-head>b,.team-drawer .team-slot>b{
  color:#342718;font:700 25px/1.3 var(--display);
}
.team-drawer .companion-card p,.team-drawer .team-slot p,.team-drawer .record-card p{color:#68543a}
.team-drawer .companion-card small{color:#547769;font-weight:700}
.team-drawer .companion-card .team-button{position:relative;z-index:1}
.team-drawer .team-section{padding:20px 4px;border-top:1px solid #c4a36c6b;color:#e7d7b7}
.team-drawer .team-section h3{color:#f0d7a3;font:700 24px/1.3 var(--display)}
.team-drawer .team-section p,.team-drawer .team-section li,.team-drawer .team-note{color:#d6c7a7!important}
.team-drawer .team-section li b,.team-drawer .team-section li span{color:#f4dfb3}
.team-drawer .team-slot{padding:16px;color:#3d2f1c}
.team-drawer .team-slot.empty{border-style:dashed;background:linear-gradient(140deg,#162f3bd9,#0a202ee3);color:#d9cba9}
.team-drawer .team-slot.empty>b,.team-drawer .team-slot.empty p{color:#e0cda9}
.team-drawer .team-slot-number,.team-drawer .team-token,.team-drawer .team-locked{color:#735c3b}
.team-drawer .team-slot.empty .team-slot-number{color:#d1b67e}
.team-drawer .team-slot .team-avatar{width:59px;height:59px;font-size:31px}
.team-drawer .team-slot.empty .team-avatar{border-radius:50%;background:#142a36;color:#d9c395;box-shadow:0 0 0 3px #bd9d64}
.team-drawer .token-count{background:#17313bcf;border-color:#b39968;color:#dec997}
.team-drawer .token-count.ready{background:#23483edb;border-color:#8dbb9d;color:#c8ead7}
.team-drawer .record-card{padding:20px;color:#493a25}
.team-drawer .record-card p,.team-drawer .record-numbers{color:#6b563b}
.team-drawer .team-empty{background:#102934c7;border-color:#bb9b69;color:#ecdbb9}
.team-drawer .team-empty p,.team-drawer .bond-path p,.team-drawer .team-timeline span{color:#d5c4a5}
.team-drawer .bond-path li{border-color:#ba9c665c}
.team-drawer .bond-path b{color:#f2d6a0}
.team-drawer .bond-path li>span,.team-drawer .team-timeline small{color:#d6b97d}
.team-drawer .meeting-record{background:#ecdcb580;color:#634b2c}
.team-drawer .meeting-record p{color:#634b2c}
.team-drawer .team-content::after{
  content:"队伍 · 同行有信";display:block;margin:25px 0 2px;text-align:right;
  color:#d7ba7b;font:17px/1.3 var(--display);letter-spacing:.14em;
}
@media(max-width:760px){
  .drawer.team-drawer{top:6px;bottom:6px;width:calc(100vw - 10px);max-height:calc(100dvh - 12px);padding:0 17px 22px;border-radius:9px}
  .team-drawer .drawer-head{min-height:173px;padding:38px 41px 8px}
  .team-drawer .drawer-head h2{font-size:clamp(34px,9vw,49px)}
  .team-drawer .drawer-close{top:20px;right:4px}
  .team-drawer .team-tabs{gap:7px;margin-bottom:19px}
  .team-drawer .team-tabs button{height:93px;font-size:16px}
  .team-drawer .team-content{padding:0}
  .team-drawer .team-intro{flex-wrap:wrap}
  .team-drawer .companion-card{gap:12px;padding:14px;min-height:100px}
  .team-drawer .companion-card .team-avatar{width:49px;height:49px;font-size:27px;box-shadow:0 0 0 3px #c3a465,0 0 10px #90b29d}
  .team-drawer .companion-card b{font-size:21px}
  .team-drawer .companion-card .team-button{width:calc(100% - 61px);margin-left:61px}
  .team-drawer .team-slot .team-button{margin-left:0}
}
@media(prefers-reduced-motion:reduce){.team-drawer .team-tabs button,.team-drawer .team-button{transition:none}}