[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 #auth-panel{display:none!important}body.account-authenticated .profile-shell{padding-top:30px}body.account-authenticated #account-panel{display:block!important}
.profile-shell{width:min(1240px,calc(100% - 40px));padding-top:34px}body.account-authenticated .profile-shell{padding-top:20px}
.profile-hero{max-width:none;margin:0 0 14px;text-align:left}.profile-hero h1{font-size:clamp(2rem,3vw,2.5rem);line-height:1.08;letter-spacing:-.035em;margin:3px 0 5px;color:var(--text)}.profile-hero p{max-width:760px;margin:0;color:var(--muted);font-size:.92rem;line-height:1.5}.profile-hero .status-banner{margin-top:9px;padding:8px 12px;border-radius:10px;font-size:.84rem}
.profile-shell .eyebrow{color:var(--cyan);font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.profile-card{border-color:rgba(99,230,255,.22);border-radius:20px;background:linear-gradient(145deg,rgba(14,19,39,.96),rgba(7,9,20,.97));box-shadow:0 18px 54px rgba(0,0,0,.26);transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease}
.profile-card:hover{border-color:rgba(99,230,255,.42);box-shadow:0 20px 58px rgba(0,0,0,.3),0 0 22px rgba(99,230,255,.08)}
.profile-card h2,.profile-card h3{letter-spacing:-.025em}
.profile-card :is(input,textarea,select,button,a):focus-visible,.account-overview-tile a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;box-shadow:0 0 0 5px rgba(99,230,255,.12)}
.profile-summary{position:relative;isolation:isolate;overflow:hidden;grid-template-columns:auto minmax(0,1fr) auto;padding:16px 22px;border-color:rgba(99,230,255,.34);background:linear-gradient(110deg,rgba(15,24,46,.98),rgba(8,13,28,.98) 72%);box-shadow:0 20px 60px rgba(0,0,0,.32),0 0 26px rgba(99,230,255,.07);margin-bottom:12px}
.profile-summary:after{position:absolute;z-index:-1;inset:0;content:"";pointer-events:none;opacity:.32;background:radial-gradient(circle at 8% 22%,rgba(99,230,255,.34) 0 1px,transparent 2px),radial-gradient(circle at 76% 26%,rgba(182,108,255,.38) 0 1px,transparent 2px),radial-gradient(circle at 92% 78%,rgba(99,230,255,.3) 0 1px,transparent 2px),radial-gradient(ellipse at 75% 0%,rgba(99,230,255,.11),transparent 52%);background-size:68px 68px,93px 93px,121px 121px,100% 100%;animation:account-drift 24s linear infinite}
.profile-summary h2{font-size:clamp(1.25rem,2vw,1.65rem);letter-spacing:-.04em;margin:2px 0}.profile-summary #profile-title{display:block;color:var(--muted);margin:1px 0 4px;text-transform:none;letter-spacing:.01em;font-size:.8rem}.profile-summary #profile-bio{max-width:56ch;font-size:.84rem;line-height:1.4}.profile-summary .avatar-badge{width:62px;height:62px;border-radius:17px;font-size:1.8rem}
.summary-actions{gap:9px;max-width:450px}.arcade-button{min-height:44px;padding:10px 16px;border-radius:10px;border-color:rgba(99,230,255,.34);font:inherit;font-size:.87rem;font-weight:850;transition:transform 160ms ease,border-color 160ms ease,background-color 160ms ease,box-shadow 160ms ease}.arcade-button:hover{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 0 18px rgba(99,230,255,.14)}.arcade-button.primary{color:#071019;background:linear-gradient(105deg,var(--cyan),#a5f5ff);box-shadow:0 8px 24px rgba(99,230,255,.16)}.arcade-button.ghost{background:rgba(255,255,255,.025)}.summary-actions .arcade-button{white-space:nowrap}
.account-operations{position:relative;isolation:isolate;overflow:hidden;margin:10px 0 0;padding:20px 22px;border-radius:22px;border-color:rgba(99,230,255,.32);background:linear-gradient(145deg,rgba(11,18,36,.98),rgba(6,10,22,.98));box-shadow:0 20px 64px rgba(0,0,0,.3),inset 0 1px rgba(255,255,255,.035)}
.account-operations:before{position:absolute;z-index:-1;inset:0;content:"";pointer-events:none;opacity:.4;background:radial-gradient(circle at 12% 28%,rgba(99,230,255,.7) 0 1px,transparent 1.8px),radial-gradient(circle at 85% 14%,rgba(182,108,255,.55) 0 1px,transparent 2px),radial-gradient(circle at 72% 83%,rgba(99,230,255,.48) 0 1px,transparent 1.8px);background-size:91px 91px,117px 117px,143px 143px;animation:account-drift 30s linear infinite}
.account-operations-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:12px}.account-operations-heading h2{margin:4px 0;font-size:clamp(1.4rem,2.3vw,1.8rem);letter-spacing:-.04em}.account-operations-heading p,.section-band p{max-width:68ch;margin:0;color:var(--muted);line-height:1.45;font-size:.88rem}.account-mark{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border:1px solid rgba(99,230,255,.44);border-radius:14px;color:var(--cyan);font-size:1.6rem;text-shadow:0 0 16px rgba(99,230,255,.55);background:linear-gradient(145deg,rgba(99,230,255,.11),rgba(182,108,255,.08));box-shadow:inset 0 0 20px rgba(99,230,255,.08),0 0 22px rgba(99,230,255,.08)}
.account-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.account-overview-tile{display:flex;align-items:flex-start;gap:11px;min-width:0;min-height:0;padding:14px;border:1px solid rgba(99,230,255,.23);border-radius:15px;background:linear-gradient(140deg,rgba(17,25,46,.92),rgba(9,13,27,.94));transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease}.account-overview-tile>div{flex:1;min-width:0}.account-overview-tile:hover{transform:translateY(-2px);border-color:rgba(99,230,255,.52);box-shadow:0 0 22px rgba(99,230,255,.1)}.account-glyph{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border:1px solid rgba(99,230,255,.32);border-radius:10px;color:var(--cyan);font-size:1rem;background:rgba(99,230,255,.07);text-shadow:0 0 12px rgba(99,230,255,.35)}.account-overview-tile h3{margin:2px 0 5px;font-size:.94rem}.account-overview-tile p{min-height:0;margin:0 0 4px;color:var(--muted);font-size:.81rem;line-height:1.35;overflow-wrap:anywhere}.account-overview-state{display:grid;gap:3px}.account-overview-item{display:flex;align-items:flex-start;gap:6px;color:var(--text);font-size:.8rem;line-height:1.32}.account-overview-detail{color:var(--muted);font-size:.76rem;line-height:1.3}.account-overview-link,.account-inline-link{display:inline-flex;align-items:center;gap:6px;color:var(--cyan);font-size:.8rem;font-weight:800;text-decoration:none}.account-overview-link:hover,.account-inline-link:hover{color:#c6f8ff;text-decoration:underline;text-underline-offset:3px}
.account-service-links{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:12px;margin-top:12px}.service-link{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:13px;min-width:0;min-height:72px;padding:12px 16px;border:1px solid rgba(99,230,255,.3);border-radius:14px;background:linear-gradient(135deg,rgba(12,20,39,.96),rgba(13,17,31,.94));color:var(--text);text-decoration:none;transition:border-color 170ms ease,background-color 170ms ease,box-shadow 170ms ease,transform 170ms ease}.service-link:hover{transform:translateY(-2px);border-color:var(--cyan);background:linear-gradient(135deg,rgba(18,34,54,.98),rgba(19,20,42,.98));box-shadow:0 0 22px rgba(99,230,255,.14)}.service-link-primary{border-color:rgba(99,230,255,.62);background:linear-gradient(110deg,rgba(99,230,255,.11),rgba(182,108,255,.08) 78%);box-shadow:inset 0 0 0 1px rgba(99,230,255,.12),0 0 20px rgba(99,230,255,.08)}.service-link-primary:hover{border-color:var(--cyan);box-shadow:inset 0 0 0 1px rgba(99,230,255,.18),0 0 25px rgba(99,230,255,.18)}.service-link>span:nth-child(2){display:block;min-width:0}.service-link strong,.service-link small{display:block}.service-link strong{font-size:.94rem;line-height:1.25;letter-spacing:.005em}.service-link small{margin-top:4px;color:var(--muted);font-size:.79rem;line-height:1.4}.service-glyph{display:grid;place-items:center;width:42px;height:42px;border:1px solid rgba(99,230,255,.36);border-radius:12px;background:rgba(99,230,255,.08);color:var(--cyan);font-size:1.1rem;text-shadow:0 0 12px rgba(99,230,255,.28)}.service-link-primary .service-glyph{border-color:rgba(99,230,255,.55);background:linear-gradient(145deg,rgba(99,230,255,.14),rgba(182,108,255,.12))}.service-arrow{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid rgba(99,230,255,.2);border-radius:9px;color:var(--cyan);font-size:.92rem}.service-link:hover .service-arrow{border-color:rgba(99,230,255,.52);background:rgba(99,230,255,.08)}.service-link:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.account-choice-note{margin:10px 0 0;color:var(--muted);font-size:.78rem;line-height:1.4}
@keyframes account-drift{to{background-position:91px 91px,-117px 117px,143px -143px,0 0}}
@media(max-width:900px){.account-overview-grid{grid-template-columns:1fr}.account-overview-tile{min-height:0}.account-overview-tile p{min-height:0}.account-overview-grid .account-overview-tile{padding:16px}.account-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.account-overview-tile:last-child{grid-column:1/-1}}
@media(max-width:720px){.profile-shell{width:min(100% - 24px,1240px)}.account-overview-grid,.account-operations-grid,.account-service-links{grid-template-columns:1fr}.account-overview-tile:last-child,.account-operations-grid .discord-card{grid-column:auto}.section-band{align-items:flex-start;flex-direction:column;gap:6px}.section-band p{text-align:left}.profile-summary{grid-template-columns:auto minmax(0,1fr)}.profile-summary .summary-actions{grid-column:1/-1;justify-content:flex-start;max-width:none}.summary-actions .arcade-button{flex:1 1 auto}.account-operation-card .staff-access-form .arcade-button{min-width:45%}}
@media(max-width:460px){.profile-shell{width:calc(100% - 20px);padding-top:24px}.profile-summary{grid-template-columns:1fr;padding:20px}.profile-summary .summary-actions{display:grid;grid-template-columns:1fr}.avatar-badge{width:58px;height:58px}.account-operations{padding:18px}.account-mark{flex-basis:46px;width:46px;height:46px}.account-operation-card{padding:18px}.account-operation-card .staff-access-form .arcade-button{min-width:100%}.service-link{padding:13px}.profile-grid{grid-template-columns:minmax(0,1fr)}}
.account-header-music{display:flex;align-items:center;flex:0 0 auto;margin-left:auto}
.arcade-header .header-inner>.arcade-nav{order:2}
.account-header-music{order:3}
@media(max-width:820px){.arcade-header .header-inner>.arcade-nav{order:3;flex:1 0 100%;justify-content:flex-start}.account-header-music{order:2;margin-left:auto}}
.account-fin-guide-slot{display:flex;justify-content:flex-end;margin:8px 0 14px}
.account-fin-guide-slot .fin-guide-reopen{position:static;right:auto;bottom:auto;min-height:44px;width:auto;justify-content:flex-start;padding:7px 12px;border-radius:999px;background:linear-gradient(135deg,rgba(17,21,34,.96),rgba(25,17,48,.94));box-shadow:inset 0 0 0 1px rgba(99,230,255,.1),0 8px 20px rgba(0,0,0,.22)}
.account-fin-guide-slot .fin-guide-reopen:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(99,230,255,.3),0 10px 24px rgba(0,0,0,.3)}
@media(prefers-reduced-motion:reduce){.profile-card,.arcade-button,.account-overview-tile,.service-link,.device-tabs button,.binding-row button{transition:none!important}.profile-summary:after,.account-operations:before{animation:none!important}.profile-card:hover,.arcade-button:hover,.account-overview-tile:hover,.service-link:hover{transform:none}}
.google-signin{display:flex;justify-content:center;text-decoration:none;background:#fff;color:#1f1f1f;border-color:#dadce0;margin:14px 0}.google-signin:hover{background:#f8faff;color:#111}.auth-divider{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.78rem;margin:12px 0}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:rgba(255,255,255,.13);flex:1}
.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}
}

#account-license-summary{max-height:180px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--cyan) transparent;padding-right:5px}
#account-license-summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
/* ---------------------------------------------------------------------------
   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;
  }
}
.binding-keys{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.binding-row button.binding-alt{min-width:0;padding:9px 10px;border-style:dashed;background:transparent;color:var(--muted)}@media(max-width:520px){.binding-keys{justify-content:stretch}.binding-keys button:first-child{flex:1}.binding-row button.binding-alt{width:auto}}
/* Arcade-only profile: the website account lives at /account. */
.account-link-row{margin:14px 0 18px}.arcade-settings-card{margin:24px 0}.arcade-settings-card label{display:grid;gap:8px;max-width:420px}