/* Illustrated details use the same asset family as More Features. */
.select-goons-page .selection-hero{
  position:relative;isolation:isolate;min-height:146px;margin-bottom:18px;padding:22px 18px;
  border:1px solid color-mix(in srgb,var(--ds-accent) 20%,transparent);border-radius:20px;overflow:hidden;
  background:radial-gradient(ellipse at 100% 0,#b4d7ff55,transparent 68%),radial-gradient(ellipse at 0 100%,#f4c8e444,transparent 65%),var(--ds-surface);
  box-shadow:0 6px 20px #15283b06;
}
.select-goons-page .selection-hero::before{content:'';position:absolute;z-index:-1;top:-50px;right:-32px;width:180px;height:180px;border:1px solid #95bce02b;border-radius:50%;box-shadow:0 0 0 24px #99bfe00b,0 0 0 48px #99bfe008}
.select-goons-page .selection-hero::after{content:'';position:absolute;bottom:16px;right:130px;width:6px;height:6px;border-radius:50%;background:#a7d9c7;box-shadow:14px -76px 0 -1px #ebbe71,-40px -94px 0 -1px #b8a6e4,80px -4px 0 -1px #e1a4bd}
.select-goons-page .selection-hero-copy{max-width:64%;z-index:1}
.select-goons-page .selection-hero-title{font-size:25px;line-height:34px;letter-spacing:.5px}
.select-goons-page .selection-title-lead{display:block}
.select-goons-page .selection-title-accent{display:inline;font-size:14px;line-height:24px;font-weight:600;color:var(--ds-text);letter-spacing:1px}
.select-goons-page .selection-hero-subtitle{margin-top:5px;font-size:10px;line-height:17px;white-space:nowrap}
.select-goons-page .selection-hero-note{display:inline-flex;gap:5px;height:22px;margin-top:10px;padding:0 8px;border:1px solid color-mix(in srgb,var(--ds-accent) 22%,transparent);border-radius:6px;background:var(--ds-surface);color:var(--ds-text);font-size:9px;line-height:20px;letter-spacing:0}
.select-goons-page .selection-hero-note::before{width:5px;height:5px;background:#69b99e;box-shadow:0 0 0 3px #69b99e16}
.select-goons-page .selection-hero-art{position:absolute;right:19px;top:32px;width:90px;height:90px;margin:0;transform:rotate(7deg);background:url('/h5/static/icons/feature-tile-service.svg') center/74px 74px no-repeat;filter:drop-shadow(0 7px 9px #24473712)}
.select-goons-page .selection-hero-art::before{content:'';display:block;position:absolute;inset:auto;right:-10px;top:-11px;width:39px;height:39px;border:3px solid var(--ds-surface);border-radius:12px;background:url('/h5/static/icons/feature-tile-profile.svg') center/contain no-repeat;transform:rotate(8deg)}
.select-goons-page .selection-hero-art .selection-art-spark{display:block;position:absolute;left:-13px;bottom:-9px;right:auto;top:auto;width:42px;height:42px;border:3px solid var(--ds-surface);border-radius:13px;clip-path:none;background:url('/h5/static/icons/feature-tile-ranking.svg') center/contain no-repeat;transform:rotate(-20deg)}
.select-goons-page .selection-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;margin:0 auto 24px;border:0}
.select-goons-page .selection-stat{--stat-color:#508dbb;--stat-fill:#eaf3ff;display:flex;justify-content:center;align-items:center;gap:8px;padding:12px 5px;border:1px solid color-mix(in srgb,var(--stat-color) 13%,transparent);border-radius:12px;background:linear-gradient(140deg,color-mix(in srgb,var(--stat-fill) 70%,var(--ds-surface)),var(--ds-surface));box-shadow:0 3px 10px #20304903}
.select-goons-page .selection-stat.levels{--stat-color:#9675ba;--stat-fill:#f4ecff}
.select-goons-page .selection-stat.voices{--stat-color:#439c80;--stat-fill:#e5f8ef}
.select-goons-page .selection-stat-icon{display:block;flex:0 0 30px;width:30px;height:30px;border-radius:0;background:url('/h5/static/icons/feature-tile-profile.svg') center/contain no-repeat}
.select-goons-page .selection-stat-icon.levels{background-image:url('/h5/static/icons/feature-tile-level.svg')}
.select-goons-page .selection-stat-icon.voices{background-image:url('/h5/static/icons/feature-tile-service.svg')}
.select-goons-page .selection-stat-icon::before,.select-goons-page .selection-stat-icon::after{content:none}
.select-goons-page .selection-stat-copy{display:block}
.select-goons-page .selection-stat-value{font-size:18px;font-weight:750;line-height:22px}
.select-goons-page .selection-stat-label{font-size:10px;line-height:16px}
.select-goons-page .selection-intro-title{font-size:18px}
.select-goons-page .selection-browse{gap:7px;padding:0 10px;height:29px;border:1px solid var(--community-line);border-radius:7px;background:var(--ds-surface);font-size:11px}
.select-goons-page .level-section{
  --selection-photo-height:calc((min(100vw - 56px,500px) - 12px)/2 * 1.06);--selection-info-height:104px;--selection-grid-gap:12px;
  padding:14px 11px 12px;border:1px solid color-mix(in srgb,var(--section-accent) 19%,transparent);border-radius:19px;
  background:linear-gradient(155deg,color-mix(in srgb,var(--section-tint) 60%,var(--ds-surface)) 0,var(--ds-surface) 280px);
  box-shadow:0 5px 18px #25334c05;
}
.select-goons-page .level-heading{min-height:44px;gap:9px;margin:0 0 14px}
.select-goons-page .level-mark{flex:0 0 39px;width:39px;height:39px;transform:rotate(-5deg);filter:drop-shadow(0 3px 3px #33415c0a)}
.select-goons-page .level-title{font-size:18px;line-height:25px;letter-spacing:.3px}
.select-goons-page .level-subtitle{display:block;margin-top:1px;font-size:9px;line-height:16px;color:var(--ds-muted);letter-spacing:0}
.select-goons-page .level-count{padding:2px 7px;border:1px solid color-mix(in srgb,var(--section-accent) 18%,transparent);border-radius:20px;background:var(--ds-surface);color:var(--section-accent);font-size:10px;line-height:20px}
.select-goons-page .goon-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--selection-grid-gap)}
.select-goons-page .goon-card{position:relative;height:calc(var(--selection-photo-height) + var(--selection-info-height) + 2px);border:1px solid color-mix(in srgb,var(--section-accent) 13%,transparent);border-radius:13px;background:var(--ds-surface);box-shadow:0 4px 10px #1b284a09}
.select-goons-page .goon-photo{height:var(--selection-photo-height);background:var(--ds-soft)}
.select-goons-page .goon-photo::after{content:'';display:block;position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#11172370);pointer-events:none}
.select-goons-page .goon-photo::before{content:'';display:block;position:absolute;z-index:1;left:8px;top:8px;width:13px;height:13px;border-top:1.5px solid #fff9;border-left:1.5px solid #fff9;border-top-left-radius:4px;pointer-events:none}
.select-goons-page .goon-level-badge{left:7px;bottom:8px;max-width:calc(100% - 14px);padding:1px 6px;border:1px solid #ffffff48;border-radius:5px;background:#1b202859;color:#fff;font-size:10px;line-height:18px;backdrop-filter:blur(6px)}
.select-goons-page .goon-level-badge::before{content:'✦';margin-right:3px;color:#f6d681}
.select-goons-page .goon-audio-badge{display:inline-flex;right:7px;top:7px;height:20px;padding:0 6px 0 8px;gap:6px;border:1px solid #ffffff65;border-radius:6px;background:#f2fcf2e8;backdrop-filter:blur(6px);color:#32775b;font-size:9px;line-height:20px}
.select-goons-page .goon-audio-icon,.select-goons-page .goon-audio-icon::before,.select-goons-page .goon-audio-icon::after{background:currentColor}
.select-goons-page .goon-card-info{height:var(--selection-info-height);padding:9px 9px 7px;background:linear-gradient(150deg,var(--ds-surface) 45%,color-mix(in srgb,var(--section-tint) 35%,var(--ds-surface)))}
.select-goons-page .goon-name-strip{gap:5px;margin-bottom:7px;height:23px}
.select-goons-page .goon-name-text{font-size:14px;line-height:23px;font-weight:700}
.select-goons-page .goon-gender{padding:0 4px;border-radius:4px;font-size:9px;line-height:17px}
.select-goons-page .voice-bar,.select-goons-page .voice-bar.female{height:29px;padding:0 7px;gap:6px;border:1px solid color-mix(in srgb,var(--section-accent) 16%,transparent);border-radius:7px;background:color-mix(in srgb,var(--section-tint) 75%,var(--ds-surface));color:var(--section-accent);box-shadow:inset 0 1px 0 #ffffff42}
.select-goons-page .voice-play{width:17px;height:17px;flex-basis:17px;border-radius:50%;background:var(--section-accent);color:var(--ds-surface)}
.select-goons-page .voice-play-icon{border-left-color:currentColor;border-left-width:4px;margin-left:1px}
.select-goons-page .voice-wave{gap:3px}
.select-goons-page .voice-wave-line{width:2px;opacity:.65}
.select-goons-page .voice-duration{font-size:10px}
.select-goons-page .voice-bar.muted{box-shadow:none;background:color-mix(in srgb,var(--ds-muted) 7%,transparent);border-color:transparent;color:var(--ds-muted)}
.select-goons-page .goon-card-footer{margin-top:7px;padding-top:5px;border-top:1px dashed color-mix(in srgb,var(--section-accent) 16%,transparent);line-height:16px}
.select-goons-page .goon-card-id{padding:0;font-size:9px;color:var(--ds-muted)}
.select-goons-page .goon-profile-hint{gap:3px;color:var(--section-accent);font-size:10px;font-weight:500}
.select-goons-page .goon-profile-arrow{width:15px;height:15px;border-radius:50%;background:color-mix(in srgb,var(--section-tint) 65%,var(--ds-surface));font-size:12px}
.select-goons-page .more-button{height:34px;padding:0 18px;border:1px solid color-mix(in srgb,var(--section-accent) 20%,transparent);border-radius:18px;background:color-mix(in srgb,var(--section-tint) 55%,var(--ds-surface));color:var(--section-accent)}
.select-goons-page .selection-more-button{border-radius:12px;background:var(--ds-soft);color:var(--ds-text)}
html[data-ds-dark="true"] .select-goons-page .selection-hero{background:radial-gradient(ellipse at 100% 0,#4b618735,transparent 68%),radial-gradient(ellipse at 0 100%,#9a4c7828,transparent 65%),var(--ds-surface)}
html[data-ds-dark="true"] .select-goons-page .selection-stat{--stat-color:#91bfee;--stat-fill:#213a50}
html[data-ds-dark="true"] .select-goons-page .selection-stat.levels{--stat-color:#bda0e4;--stat-fill:#362b4c}
html[data-ds-dark="true"] .select-goons-page .selection-stat.voices{--stat-color:#89cfb3;--stat-fill:#1b3c30}
html[data-ds-dark="true"] .select-goons-page .goon-card{box-shadow:0 4px 12px #0002}
html[data-ds-dark="true"] .select-goons-page .voice-play{color:#17251f}

/* Catalogue and messages gain color in the headers and entry illustrations. */
.category-container[data-v-64370f3f] .category-page-heading{position:relative;isolation:isolate;min-height:104px;margin:14px 0 17px;padding:18px 15px;border:1px solid var(--community-line);border-radius:17px;overflow:hidden;background:radial-gradient(ellipse at 100% 0,#b0cfff3b,transparent 70%),var(--ds-surface)}
.category-container[data-v-64370f3f] .category-page-heading::after{content:'';position:absolute;z-index:-1;right:-21px;top:-42px;width:135px;height:135px;border:1px solid #9bbade20;border-radius:50%;box-shadow:0 0 0 15px #9bbade08,0 0 0 30px #9bbade06}
.category-container[data-v-64370f3f] .category-heading-icon{width:56px;height:56px;flex-basis:56px;transform:rotate(6deg);filter:drop-shadow(0 4px 5px #365d9615)}
.category-container[data-v-64370f3f] .category-page-title{font-size:23px;line-height:32px}
html[data-ds-theme] .category-container[data-v-64370f3f] .toggle-btn::before{width:28px;height:28px;flex-basis:28px}
html[data-ds-theme] .category-container[data-v-64370f3f] .toggle-btn.active{border-color:color-mix(in srgb,var(--ds-accent) 30%,transparent);background:color-mix(in srgb,var(--ds-soft) 45%,var(--ds-surface))!important}
@media(max-width:360px){
  .select-goons-page .selection-hero{padding:18px 14px;min-height:145px}
  .select-goons-page .selection-hero-art{right:10px;top:35px;width:77px;height:77px;background-size:65px}
  .select-goons-page .selection-hero-art::before{right:-3px;width:33px;height:33px}
  .select-goons-page .selection-hero-art .selection-art-spark{left:-6px;width:34px;height:34px}
  .select-goons-page .selection-hero-subtitle{font-size:9px}
  .select-goons-page .selection-stat{gap:5px;padding:10px 3px}
  .select-goons-page .selection-stat-icon{width:24px;height:24px;flex-basis:24px}
  .select-goons-page .selection-stat-value{font-size:16px}
  .select-goons-page .selection-stat-label{font-size:9px}
  .select-goons-page .level-title{font-size:16px}
  .select-goons-page .level-count{padding:1px 5px;font-size:9px}
  .select-goons-page .goon-name-text{font-size:13px}
  .select-goons-page .goon-card-info{padding-left:7px;padding-right:7px}
  .select-goons-page .voice-wave{gap:2px}
  html[data-ds-theme] .category-container[data-v-64370f3f] .toggle-btn{padding:0 7px;gap:4px}
}