[hidden]{display:none!important}
.profile-shell{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:64px 0 90px}.profile-hero{max-width:820px;margin-bottom:28px}.profile-hero h1{font-size:clamp(2.6rem,7vw,5.8rem);line-height:.92;margin:8px 0 18px}.profile-hero p{font-size:1.08rem;color:var(--muted);line-height:1.75}.status-banner{margin-top:20px;padding:13px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(98,231,255,.08)}.status-banner.error{border-color:rgba(255,92,124,.5);background:rgba(255,92,124,.1)}.auth-grid,.profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.profile-grid{grid-template-columns:1.15fr .85fr}.profile-card{padding:24px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(16,22,47,.95),rgba(7,10,24,.96));box-shadow:0 24px 70px rgba(0,0,0,.28)}.profile-card h2{margin:7px 0 18px;font-size:1.55rem}.profile-card label{display:grid;gap:7px;margin:13px 0;color:#dfe7ff;font-weight:700}.profile-card input,.profile-card textarea,.profile-card select{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:#080d20;color:#fff;font:inherit}.profile-card input:focus,.profile-card textarea:focus,.profile-card select:focus{outline:2px solid var(--cyan);outline-offset:1px}.profile-card small,.form-status{color:var(--muted)}.form-status{min-height:1.4em;margin:12px 0 0}.form-status.error{color:#ff8ea5}.profile-summary{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin-bottom:20px}.avatar-badge{display:grid;place-items:center;width:82px;height:82px;border-radius:22px;background:linear-gradient(135deg,var(--cyan),var(--purple));color:#050711;font-size:2.2rem;font-weight:950}.profile-summary h2{margin:3px 0}.profile-summary p{margin:0;color:var(--muted)}.summary-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stat-grid div{padding:13px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}.stat-grid span{display:block;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.stat-grid strong{font-size:1.3rem}.progress-list{margin-top:14px}.progress-entry{padding:12px 0;border-top:1px solid var(--line)}.discord-card{grid-column:1/-1}.device-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.device-tabs button{padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:transparent;color:#fff;font-weight:800;cursor:pointer}.device-tabs button.active{background:linear-gradient(135deg,var(--cyan),var(--purple));color:#050711}.controls-card{margin-top:20px}.binding-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.binding-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.binding-row button{min-width:130px;padding:9px 11px;border:1px solid rgba(98,231,255,.4);border-radius:10px;background:rgba(98,231,255,.08);color:#fff;cursor:pointer}.touch-settings{grid-template-columns:repeat(3,1fr);gap:14px}.touch-settings:not([hidden]){display:grid}.control-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}.arcade-button{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;border-radius:12px;border:1px solid var(--line);font-weight:850;cursor:pointer;text-decoration:none}.arcade-button.primary{background:linear-gradient(135deg,var(--cyan),var(--purple));color:#050711;border:0}.arcade-button.ghost{background:transparent;color:#fff}@media(max-width:820px){.auth-grid,.profile-grid{grid-template-columns:1fr}.profile-summary{grid-template-columns:auto 1fr}.summary-actions{grid-column:1/-1;justify-content:flex-start}.binding-grid{grid-template-columns:1fr}.touch-settings:not([hidden]){grid-template-columns:1fr}.arcade-header nav.arcade-nav{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;width:100%;padding:0 0 12px;gap:4px}}@media(max-width:520px){.profile-shell{width:min(100% - 20px,1180px);padding-top:36px}.profile-card{padding:18px}.profile-summary{grid-template-columns:1fr}.avatar-badge{width:64px;height:64px}.binding-row{grid-template-columns:1fr}.binding-row button{width:100%}}

/* Signed-in view: put the player card directly below the Arcade header. */
body.account-authenticated .profile-hero,body.account-authenticated #auth-panel{display:none!important}body.account-authenticated .profile-shell{padding-top:30px}body.account-authenticated #account-panel{display:block!important}
.card-note{margin:0 0 12px;color:var(--muted);font-size:.92rem;line-height:1.6}
.game-stat-list,.device-list{display:grid;gap:0}
.game-stat-entry{padding:12px 0;border-top:1px solid var(--line)}.game-stat-entry:first-child{border-top:0}
.device-list{margin-bottom:16px}
.device-entry{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.device-entry:first-child{border-top:0}.device-entry strong{display:block;word-break:break-word}.device-entry .arcade-button{flex:0 0 auto}
@media(max-width:520px){.device-entry{align-items:flex-start;flex-direction:column}.device-entry .arcade-button{width:100%}}

/* --- Rider card designer ---------------------------------------------------
   The editor for a player's saved card. The preview is rendered by the shared
   rider-card module, so these rules only style the controls around it. */

.card-designer { display: grid; gap: 14px; }
.card-designer .card-note { margin: 0; color: var(--muted); font-size: 0.86rem; }
.card-preview { margin: 4px 0 2px; }
.field-hint { display: block; margin-top: 4px; color: var(--muted); font-size: 0.74rem; text-align: right; }

.choice-field { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255, 255, 255, 0.025); }
.choice-field legend { padding: 0 8px; color: var(--muted); font-size: 0.72rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.choice-help{margin:0 0 12px;color:var(--muted);font-size:.8rem;line-height:1.5}
.dual-colour-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dual-colour-row .inline-field{justify-content:space-between}
.gradient-theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;margin-bottom:12px}
.gradient-theme{min-height:54px;padding:7px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:#fff;font-size:.7rem;font-weight:800;cursor:pointer}
.gradient-theme::before{content:"";display:block;height:22px;margin-bottom:5px;border-radius:7px;background:linear-gradient(90deg,var(--theme-a),var(--theme-b))}
.gradient-theme.selected{border-color:var(--cyan);box-shadow:0 0 16px -6px var(--cyan)}
.inline-field { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 0.82rem; }
.inline-field input[type="color"] { width: 46px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }

.swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--swatch);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.swatch.selected { border-color: #f7f8ff; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 0 14px var(--swatch); }

.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; }
.choice-field [data-avatar-choices] { max-height: 290px; overflow-y: auto; padding-right: 5px; scrollbar-gutter: stable; }
.emoji-choice, .avatar-badge, #profile-bio, textarea[name="bio"] { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Symbol", sans-serif; }

.avatar-badge { background: none; color: inherit; font-size: inherit; font-weight: inherit; }
.avatar-badge > .rider-avatar { width: 100%; height: 100%; }
.brand-avatar-access { margin: 0 0 10px; padding: 10px 12px; border: 1px solid rgba(255,184,97,.38); border-radius: 12px; background: rgba(255,184,97,.08); color: #ffd7a3; font-size: .82rem; line-height: 1.45; }
.brand-avatar-access.authorized { border-color: rgba(92,230,180,.45); background: rgba(92,230,180,.09); color: #9ff4d2; }
.brand-avatar-choice { grid-column: span 3; display: grid !important; grid-template-columns: 48px minmax(0,1fr); align-items: center; gap: 10px; min-height: 62px; padding: 7px 12px !important; text-align: left; }
.brand-avatar-choice img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 9px rgba(98,231,255,.42)); }
.brand-avatar-choice span { display: grid; gap: 2px; min-width: 0; }
.brand-avatar-choice strong { color: #fff; font-size: .82rem; }
.brand-avatar-choice small { color: var(--muted); font-size: .68rem; line-height: 1.25; }
.brand-avatar-choice.locked { cursor: not-allowed; opacity: .62; filter: saturate(.65); }
.brand-avatar-choice.selected { box-shadow: 0 0 0 2px var(--cyan), 0 0 24px rgba(98,231,255,.24); }
.custom-emoji-row, .staff-access-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; margin-top: 12px; }
.custom-emoji-row label, .staff-access-form label { margin: 0; }
.custom-emoji-row .arcade-button, .staff-access-form .arcade-button { min-height: 46px; }
.profile-card .consent-field { display: flex; align-items: flex-start; gap: 10px; font-weight: 650; }
.profile-card .consent-field input { width: 20px; height: 20px; flex: 0 0 20px; margin: 2px 0 0; }
.choice {
  min-height: 46px; padding: 6px; cursor: pointer;
  display: grid; place-items: center; gap: 4px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit; font-size: 1.15rem; line-height: 1;
}
.choice:hover { border-color: var(--cyan); }
.choice.selected { border-color: var(--cyan); background: rgba(98, 231, 255, 0.14); box-shadow: 0 0 16px -6px var(--cyan); }

.style-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.style-choice { font-size: 0.76rem; font-weight: 800; }
.style-swatch {
  width: 100%; height: 30px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background-color: rgba(8, 12, 27, 0.9);
  background-blend-mode: screen;
}

@media (max-width: 620px) {
  .choice-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); }
  .style-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .custom-emoji-row, .staff-access-form { grid-template-columns: 1fr; }
  .dual-colour-row{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   Shared brand texture

   The Infin8 nebula screened over every page, so the site and the audio plugin
   artwork share one surface. It is a fixed layer behind all content rather than
   a body background so it does not scroll, repeat, or shift as sections change
   height. `screen` lifts the dark page toward the texture's magentas without
   ever darkening text, and the low opacity keeps body copy at full contrast.
   --------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../../assets/infin8-texture.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0.16;
}

/* Reduced transparency preferences and print both want the texture gone. */
@media (prefers-reduced-transparency: reduce) {
  body::before { opacity: 0.07; }
}
@media print {
  body::before { display: none; }
}

/* ---------------------------------------------------------------------------
   Phone tap targets

   Standalone links (footer navigation, "read more" style links, card links)
   render at their text height, which is around 23px. That is well under a
   comfortable thumb target, so on phones they get a minimum height and become
   inline-flex so the extra height is actually tappable rather than just extra
   line box. Links inside running paragraphs are deliberately left alone:
   padding them out would break the paragraph's rhythm.
   --------------------------------------------------------------------------- */
@media (max-width: 860px) and (pointer: coarse) {
  .text-link,
  .contact-link,
  .side-link,
  footer a,
  .board-footer a,
  .arcade-footer a,
  nav a,
  .arcade-links a,
  .board-header nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}