/* Personal profiles share BITR's arcade palette; the objects belong to the member. */
.arcade:has(.details:not([hidden])) .hud { grid-template-columns: minmax(0, 1500px); margin-top: 0; }
.arcade:has(.details:not([hidden])) .hud-box { display: flex; gap: 14px; border: 0; box-shadow: none; padding: 2px 0; font-size: 12px; background: none; }
.arcade:has(.details:not([hidden])) .hud-score,
.arcade:has(.details:not([hidden])) .hud-lives,
.arcade:has(.details:not([hidden])) .hud-bar { display: none; }
.details-card {
  position: relative;
  border-width: 2px;
  border-radius: 4px 18px 4px 4px;
  box-shadow: 0 0 0 2px var(--blue-deep), inset 0 0 0 1px #14245e;
  padding: clamp(16px, 2.3dvh, 28px);
  grid-template-columns: minmax(230px, 27%) minmax(0, 1fr);
  gap: 24px 34px;
  background: radial-gradient(ellipse at 0 0, color-mix(in srgb, var(--c) 10%, #000), #000 65%);
}
.details-card::before { content: ''; position: absolute; top: -5px; right: 24px; width: 36px; height: 8px; background: var(--c); box-shadow: -9px 0 #000, 9px 0 #000; }
.details-side { gap: 14px; align-self: start; }
.details-portrait { width: 64px; border-width: 2px; box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--blue-deep); }
.details-name { font-size: clamp(18px, 1.7vw, 25px); margin: 0 0 8px; }
.details-home { font-size: 15px; }
.details-home img { width: 20px; height: 15px; }
.details-card.no-feed { grid-template-columns: minmax(180px, 22%) minmax(0, 1fr); }
.no-feed .details-side { flex-direction: row; align-items: center; max-width: none; }
.details-body { gap: clamp(18px, 3dvh, 32px); }
.profile-bio { margin: 0; padding: 4px 0 14px; white-space: pre-line; font-size: clamp(18px, 1.45vw, 24px); line-height: 1.6; border-bottom: 1px solid #1a2d55; }
.profile-content { min-width: 0; }
.profile-content.has-personal-art { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: start; }
.personal-art { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.personal-art:has(> :only-child) { grid-template-columns: 1fr; }
.personal-art .club-card { padding: 0; background: none; box-shadow: none; text-align: center; }
.personal-art .club-art { width: auto; max-width: 100%; max-height: clamp(128px, 21dvh, 216px); margin: 0 auto 12px; }
.personal-art .club-name { font-size: 14px; line-height: 1.6; text-shadow: none; }
.personal-art .club-nick { font-size: 10px; line-height: 1.8; font-family: var(--text); }
.personal-art .club-ground { font-size: 13px; color: #b7c1d5; }
.photo { position: relative; padding-top: 6px; transform: rotate(2deg); margin: 0 5px 0 0; }
.photo::before { content: ''; position: absolute; top: 0; left: 30%; width: 38%; height: 13px; transform: rotate(-7deg); background: #b7c8e478; z-index: 1; }
.photo img { max-width: 240px; border: 4px solid #c8dcff; box-shadow: 3px 4px #07153b; }
.stat-cols { column-width: 180px; column-gap: 24px; }
.stat-cols > .stat { margin-bottom: 24px; }
.stat-title { font-size: 11px; line-height: 1.7; border-bottom: 1px dashed #2a3566; padding-bottom: 5px; margin-bottom: 10px; }
.stat .list, .stat .links, .stat .track { font-size: 16px; }
.stat .links { gap: 8px 14px; }
.stat .links a { border: 0; padding: 2px 0; background: none; color: #b5cfff; text-decoration: underline; text-underline-offset: 4px; }
.stat .links a:hover, .stat .links a:focus-visible { color: #fff; }
.details-feed { align-self: start; width: 100%; }
.details-feed > .stat-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.feed-account { font: 12px var(--text); color: #9cbdff; white-space: nowrap; text-decoration: none; }
.feed-account:hover, .feed-account:focus-visible { color: #fff; text-decoration: underline; }
.latest-track, .ticker-list { list-style: none; padding: 0; margin: 0; }
.latest-track .feed-item { margin-bottom: 12px; }
.feed-art { width: 56px; height: 56px; }
.feed-more { margin: 12px 0 0; padding: 0; }
.feed-more a { font-size: 9px; }
.feed-note { margin: 0; padding-left: 0; }
.feed-item { font-size: 15px; gap: 8px; }
.feed-artist { font-size: 14px; }
.feed-time { font-family: var(--text); font-size: 12px; color: #9ca6c4; }
.ticker-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; color: #8596bd; font-size: 11px; letter-spacing: 1px; }
.ticker-controls > span { margin-right: auto; }
.ticker-controls button { border: 0; background: none; color: #a9c8ff; cursor: pointer; padding: 4px; font-size: 13px; }
.ticker-window { position: relative; height: clamp(84px, 16dvh, 144px); overflow: auto; scrollbar-width: none; overscroll-behavior: contain; }
.ticker-window::-webkit-scrollbar { display: none; }
.ticker-list { position: relative; padding-bottom: 44px; }
.ticker-list .feed-item { min-height: 70px; padding: 9px 2px; border-bottom: 1px dotted #1c2550; }
.ticker-window:focus-visible { outline: 2px solid #ffd84a; outline-offset: 2px; }
.ticker-window .feed-link:focus-visible { outline: 2px solid #ffd84a; outline-offset: 2px; }
.quiet-button { border: 0; background: none; color: #a7b9db; padding: 6px 0; cursor: pointer; font: 13px var(--text); }
.quiet-button:hover { color: #fff; }
.quiet-button:focus-visible, .ticker-controls button:focus-visible { outline: 2px solid #ffd84a; outline-offset: 3px; }
button:disabled { cursor: default; opacity: .5; }
.badge-strip { flex-basis: 100%; }
.badge-rack { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding: 3px 0; }
.badge-rack:empty { display: none; }
#badge-rack { max-height: 146px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #4b69aa #060c22; padding: 5px 4px; gap: 8px 4px; }
#badge-rack .web-badge { width: 99px; height: 56px; }
#badge-rack .pin-surface img { max-height: 56px; }
.badge-case-meta { color: #9eafd0; font-size: 12px; margin: 4px 0 6px; }
.badge-status { font-size: 13px; color: #b7c5e3; margin: 2px 0 0; }
.badge-status:empty { display: none; }
.interest-badge {
  --shine-x: 25%; --shine-y: 15%; --tilt-x: 0deg; --tilt-y: 0deg;
  display: inline-grid; place-items: center; position: relative; flex: none;
  width: 54px; height: 58px; padding: 4px;
  border-radius: 15px 15px 21px 21px;
  background: linear-gradient(135deg, #fff8dc, #6d7184 25%, #f4e7b4 48%, #596174 71%, #eee2be);
  box-shadow: 0 3px 0 #090b14, 0 4px 7px #000b;
  transform: perspective(250px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(-4deg);
  transition: transform .15s, filter .15s;
}
.interest-badge[data-icon="football"], .interest-badge[data-icon="rhythm"] { border-radius: 50%; width: 56px; height: 56px; }
.interest-badge[data-icon="music"] { border-radius: 8px 16px 8px 16px; transform: perspective(250px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(4deg); }
.interest-badge[data-icon="book"], .interest-badge[data-icon="camera"] { width: 62px; height: 50px; border-radius: 8px; }
.pin-surface { display: grid; place-items: center; width: 100%; height: 100%; position: relative; border-radius: inherit; overflow: hidden; background: linear-gradient(140deg, color-mix(in srgb, var(--pin) 70%, #fff), var(--pin) 42%, color-mix(in srgb, var(--pin) 45%, #000)); color: #fff; box-shadow: inset 0 1px 1px #fff9, inset 0 -3px 4px #0008; }
.pin-surface svg { width: 31px; height: 31px; filter: drop-shadow(1px 2px 0 #0008); }
.pin-surface img { width: 90%; height: 90%; object-fit: contain; }
.pin-surface::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--shine-x) var(--shine-y), #fff9, transparent 45%); opacity: .35; pointer-events: none; transition: opacity .15s; }
.interest-badge:hover .pin-surface::after, .interest-badge:focus-visible .pin-surface::after { opacity: .9; }
.interest-badge[data-finish="foil"] .pin-surface::after { background: linear-gradient(125deg, #ff5376aa, #f4eb77aa, #67ffc3aa, #72b6ffaa, #de80ffaa); mix-blend-mode: color-dodge; background-size: 220% 220%; background-position: var(--shine-x) var(--shine-y); }
.pin-label { display: none; position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); padding: 4px 8px; color: #fff; background: #0b1450; border: 1px solid #c8dcff; font: 14px var(--text); white-space: nowrap; z-index: 4; }
.interest-badge:hover .pin-label, .interest-badge:focus-visible .pin-label { display: block; }
.interest-badge:focus-visible { outline: 2px solid #ffd84a; outline-offset: 4px; }
.badge-dialog { width: min(800px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 24px; overflow-y: auto; color: #fff; background: linear-gradient(135deg, #111d4c, #050a20); border: 2px solid #c8dcff; border-radius: 4px 18px 4px 4px; box-shadow: 0 0 0 3px #213e9b, 8px 10px 0 #0009; }
.badge-dialog::backdrop { background: #000b; }
.badge-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
#badge-dialog { width: min(1000px, calc(100vw - 32px)); }
#badge-workshop { display: flex; flex-direction: column; min-height: 0; }
.workshop-head, .workshop-intro, .badge-preview-head, .badge-preview, #badge-search, .badge-filters, .badge-results, .badge-picker-foot, .badge-message { flex-shrink: 0; }
.workshop-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.workshop-head h2 { margin: 0; font: 16px/1.6 var(--pixel); }
.workshop-head .quiet-button { font-size: 28px; padding: 0 8px; }
.badge-dialog label { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: #c9d7ef; }
.badge-dialog input, .badge-dialog select { max-width: 100%; min-width: 0; min-height: 40px; border: 1px solid #5677bb; border-radius: 3px; background: #050b23; color: #fff; padding: 7px; font: 16px var(--text); }
.badge-dialog input:focus-visible, .badge-dialog select:focus-visible { outline: 2px solid #ffd84a; outline-offset: 2px; }
.unlock-row { display: flex; gap: 12px; margin-top: 8px; }
.unlock-row input { width: 100%; }
.badge-dialog .pad-btn { font: 12px var(--pixel); }
.workshop-intro { font-size: 16px; color: #b9c8e4; margin: 0 0 16px; }
.badge-empty { color: #9eadd0; font-size: 14px; }
.badge-preview-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; color: #b9c8e4; font-size: 13px; margin-bottom: 8px; }
.badge-preview-head > span:first-child { color: #ffd884; }
.badge-preview-tray { flex: none; margin-bottom: 10px; font-size: 13px; color: #ffd884; }
.badge-preview-tray summary { cursor: pointer; padding: 6px 0; }
.badge-preview-tray summary:focus-visible { outline: 2px solid #ffd84a; outline-offset: 2px; }
.badge-preview-tray .badge-preview { margin-bottom: 0; }
.badge-preview { list-style: none; margin: 0 0 12px; padding: 8px 3px; min-height: 48px; max-height: none; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; border-bottom: 1px solid #2a3a65; scrollbar-width: thin; }
.badge-preview:empty { display: block; }
.badge-preview:empty::before { content: 'Your chosen badges will appear here.'; color: #899abd; font-size: 14px; }
.preview-pin { display: flex; flex: none; flex-direction: column; align-items: center; gap: 4px; }
.preview-order { display: flex; align-items: center; gap: 4px; color: #b9c8e4; font-size: 12px; }
.preview-order button { min-width: 28px; min-height: 28px; border: 1px solid #3a548d; background: #091437; color: #d6e4ff; cursor: pointer; }
.preview-order button:focus-visible { outline: 2px solid #ffd84a; outline-offset: 2px; }
.badge-exit { font-size: 17px; color: #d1dcf3; }
.badge-exit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.web-badge { width: 106px; height: 64px; padding: 0; border-radius: 0; background: none; box-shadow: none; transform: perspective(250px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
.web-badge .pin-surface { background: none; border-radius: 0; box-shadow: none; }
.web-badge .pin-surface img { max-width: 100%; max-height: 64px; width: auto; height: auto; }
.web-badge .pin-surface::after { opacity: 0; }
#badge-search { width: 100%; margin-bottom: 8px; }
.badge-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.badge-filters label { flex: 1 1 160px; min-width: 0; }
.badge-filters select { width: 100%; min-height: 34px; font-size: 14px; }
.badge-filters button { min-height: 34px; border: 1px solid #5677bb; padding: 6px 10px; font-size: 14px; }
.badge-filters button[aria-pressed="true"] { border-color: #73e8a0; color: #9fffbf; background: #0a2a22; }
.badge-results { color: #9eafd0; font-size: 12px; margin: 7px 0; }
.badge-catalog { flex: 1; min-height: 0; max-height: 50dvh; overflow-y: auto; scrollbar-gutter: stable; padding: 3px 12px 3px 3px; }
.badge-category + .badge-category { margin-top: 24px; }
.badge-category h3 { position: sticky; top: -3px; z-index: 1; margin: 0 0 12px; padding: 5px 0; background: #101a3d; font: 11px/1.8 var(--pixel); color: #ffd884; }
.badge-category h3 span { font: 12px var(--text); color: #a8b9d8; }
.badge-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 16px 10px; }
.badge-option { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.badge-option button { position: relative; display: grid; place-items: center; width: 112px; max-width: 100%; height: 70px; padding: 5px; background: #040819; border: 1px solid #263a69; border-radius: 3px; cursor: pointer; }
.badge-option img { display: block; max-width: 100%; max-height: 56px; width: auto; height: auto; }
.web-badge .pin-surface img.stamp-art, .badge-option img.stamp-art {
  width: 99px; height: 56px; max-width: 99px; max-height: 56px;
  object-fit: contain; border: 3px solid #f7f4e9;
  background: repeating-linear-gradient(0deg, #d50a10 0 1px, #ed171b 1px 2px);
  -webkit-mask: url('../assets/badges/stamp-mask.svg') center / 100% 100% no-repeat;
  mask: url('../assets/badges/stamp-mask.svg') center / 100% 100% no-repeat;
}
.badge-option button:hover { border-color: #829bd0; background: #12214a; }
.badge-option button:focus-visible { outline: 2px solid #ffd84a; outline-offset: 3px; }
.badge-option button[aria-pressed="true"] { border-color: #73e8a0; box-shadow: 0 0 0 2px #73e8a0; background: #0a2a22; }
.badge-check { display: none; position: absolute; right: 2px; top: 0; color: #83ffae; background: #0a2a22; padding: 0 3px; }
[aria-pressed="true"] > .badge-check { display: block; }
.catalog-label { margin-top: 5px; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.badge-credit { font-size: 10px; color: #8b9bbf; }
.badge-picker-foot { display: flex; flex-wrap: wrap; gap: 12px 18px; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 14px; border-top: 1px solid #2a3a65; font-size: 14px; }
#badge-dirty { color: #ffd884; font-size: 13px; }
#badge-save { margin-left: auto; }
.badge-message { font-size: 14px; color: #ffd884; margin: 14px 0 0; min-height: 1.5em; }
@media (min-width: 761px) {
  .details-feed { display: flex; flex-direction: column; align-self: stretch; }
  .details-feed > .stat-title, .latest-track, .ticker-controls, .feed-more, .feed-note { flex-shrink: 0; }
  #details-feed, .listening-ticker { display: flex; flex-direction: column; min-height: 0; }
  #details-feed { flex: 1; }
  .listening-ticker { flex: 0 1 auto; min-height: calc(70px + 2.5em); }
  .ticker-window { flex-shrink: 1; min-height: 70px; }
}
@media (min-width: 761px) and (max-height: 760px) {
  #badge-rack { max-height: 130px; }
  #badge-dialog .workshop-head { margin-bottom: 12px; }
  #badge-dialog .workshop-intro { margin-bottom: 10px; }
  #badge-dialog .badge-picker-foot { margin-top: 10px; padding-top: 10px; }
  .details-side { gap: 8px; }
  .badge-rack { row-gap: 8px; }
  .web-badge { width: 99px; height: 56px; }
  .web-badge .pin-surface img { max-height: 56px; }
  .latest-track .feed-item { margin-bottom: 8px; padding: 6px; }
  .details-feed > .stat-title { margin-bottom: 8px; }
  .ticker-controls { margin-bottom: 4px; }
  .feed-more { margin-top: 6px; font-size: 9px; line-height: 1.5; }
}
@media (max-width: 1100px) {
  .profile-content.has-personal-art { grid-template-columns: 1fr; }
  .personal-art { max-width: 440px; }
  .details-card { gap: 22px; }
}
@media (max-width: 760px) {
  .badge-filters label { flex-basis: calc(50% - 4px); }
  .badge-filters button { width: 100%; }
  #badge-dialog .workshop-intro { font-size: 14px; margin-bottom: 10px; }
  #badge-dialog .workshop-head { margin-bottom: 12px; }
  .details-card, .details-card.no-feed { grid-template-columns: 1fr; grid-template-areas: 'side' 'feed' 'body'; }
  .details-side { gap: 14px; }
  .details-portrait { width: 56px; }
  .profile-content.has-personal-art { grid-template-columns: 1fr; }
  .details-body { overflow: visible; }
  .profile-bio { font-size: 19px; }
  .stat-cols { column-count: 1; }
  .badge-dialog { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .interest-badge, .interest-badge[data-icon="music"] { transform: none; }
  .pin-surface::after { transition: none; }
  .photo { transform: none; }
}

/* Pins occupy the card width and grow with the page, including on short screens. */
.arcade:has(.details:not([hidden])) { height: auto; min-height: 100dvh; }
.details { justify-content: flex-start; }
.details-card, .details-card.no-feed { flex: none; grid-template-rows: auto auto; grid-template-areas: 'sidebar body' 'badges badges'; }
.profile-sidebar { grid-area: sidebar; min-width: 0; display: flex; flex-direction: column; gap: 24px; align-self: start; }
.profile-sidebar .details-feed { flex: none; }
.details-body, .details-feed { overflow: visible; max-height: none; }
.details-card > .badge-strip { grid-area: badges; min-width: 0; border-top: 1px solid #1a2d55; padding-top: 12px; }
#badge-rack { max-height: none; overflow: visible; gap: 12px; }
#badge-rack > [hidden] { display: none; }
#badge-rack .web-badge { flex: 0 0 99px; width: 99px; height: 56px; }
#badge-expand { margin-top: 6px; }
.details-card img { max-width: 100%; }
.details-card .links a { overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .details-card, .details-card.no-feed { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: 'sidebar' 'body' 'badges'; }
}