/* Shared control and type roles. Keep gameplay geometry, effects and brand artwork intact. */
/* Manrope variable, OFL-1.1. Self-hosted Latin + Cyrillic total 39.3KB. */
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url('./fonts/manrope-cyrillic-wght-normal.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url('./fonts/manrope-latin-wght-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root {
  font-family:Manrope,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none;
  --control-accent: #7944d4;
  --control-accent-end: #8953e0;
  --control-best-end: #8d622b;
  --control-strongest: #b34a31;
  --control-strongest-end: #923222;
  --control-text: #fff;
  --text-secondary: #b8b2c8;
  --text-label: #cbbce5;
  --touch-target: 2.75rem;
  --control-radius: .875rem;
  --type-caption: .75rem;
  --type-label: .875rem;
  --type-body: 1rem;
}

.topbar { grid-template-columns: var(--touch-target) minmax(0,1fr) var(--touch-target); }
.header-actions { gap: 0; }
.icon-button { width: var(--touch-target); height: var(--touch-target); }
.primary-button { background: linear-gradient(125deg,var(--control-accent),var(--control-accent-end)); color: var(--control-text); }
.primary-button.best-primary { background: linear-gradient(125deg,var(--control-accent),var(--control-best-end)); }
.primary-button.strongest-primary { background: linear-gradient(125deg,var(--control-strongest),var(--control-strongest-end)); }
.series-filter button.active,.selection-order { background: var(--control-accent); color: var(--control-text); }
.series-filter button,.pick-switch button,.global-mode-tabs button,.profile-theme-options button {
  min-height: var(--touch-target);
  font-size: var(--type-caption);
}
.series-filter button:not(.active),.pick-switch button:not(.active),.global-mode-tabs button:not(.active) { color: var(--text-secondary); }
.pick-switch button { letter-spacing: .025em; }
.mode-copy small { color: #d1c6e5; font-size: var(--type-label); line-height: 1.4; }
.mode-copy strong { line-height: 1.25; }
.mode-card { border-radius: var(--control-radius); }
.screen-note { font-size: var(--type-body); line-height: 1.5; text-wrap: pretty; }
.home-intro h1 { letter-spacing: -.035em; line-height: 1.04; }

/* Keep the existing nav height/safe-area contract used by the app shell. */
.app-nav button { color: var(--text-secondary); }
.app-nav button strong { font-size: var(--type-caption); letter-spacing: .015em; }
.app-nav button small { font-size: var(--type-caption); line-height: 1.15; color: var(--text-secondary); }
.app-nav button[aria-disabled="true"] { cursor: default; gap: .2rem; }
.app-nav button[aria-disabled="true"] strong { color: var(--text-secondary); }
.app-nav button.active { color: #dfceff; }

/* Names stay complete. Two columns on phones; three only with enough reading room. */
.top-select-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.top-select-copy { padding: .625rem; }
.top-select-copy strong {
  min-height: 2.6em;
  font-size: var(--type-label);
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}
.top-select-copy small { font-size: var(--type-caption); line-height: 1.4; color: var(--text-secondary); }
.selection-counter { font-size: var(--type-label); font-variant-numeric: tabular-nums; }
.top-sort-item { grid-template-columns: var(--touch-target) 3.7rem minmax(0,1fr) auto; gap: .45rem; }
.sort-handle { min-width: var(--touch-target); min-height: var(--touch-target); padding: 0; }
.sort-controls { grid-template-columns: 1fr; }
.sort-controls button { width: var(--touch-target); height: var(--touch-target); border-radius: var(--control-radius); }
.sort-copy { min-width: 0; overflow-wrap: anywhere; }
.sort-copy strong { font-size: var(--type-label); line-height: 1.3; }
.sort-copy small { font-size: var(--type-caption); color: var(--text-secondary); }
@media (min-width: 30rem) {
  .top-select-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .sort-controls { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 23rem) {
  .round-head { flex-wrap: wrap; gap: .6rem; }
  .top-sort-item { grid-template-columns: var(--touch-target) 2.75rem minmax(0,1fr) var(--touch-target); }
  .top-sort-item .sort-thumb,.top-sort-item .best-sort-art { width: 2.75rem; height: 3.5rem; }
  .app-nav button strong { font-size: .6875rem; }
}

.profile-hero { display: flex; flex-direction: column; flex-shrink: 0; overflow: clip; }
.profile-showcase-copy { position: relative; left: auto; bottom: auto; margin-top: auto; padding-top: 1.5rem; }
.profile-hero.is-empty { min-height: 17rem; }
.profile-hero.is-empty .profile-identity,.profile-hero.is-empty .profile-status-row { max-width: 100%; }
.profile-hero.is-empty .profile-showcase-copy { width: 100%; }
.profile-pick.is-empty { aspect-ratio: auto; min-height: 7rem; }
.profile-pick.is-empty .profile-pick-placeholder { display: none; }
.profile-pick-copy small { font-size: .6875rem; letter-spacing: .025em; }
.profile-pick-copy strong { font-size: var(--type-caption); line-height: 1.35; overflow-wrap: anywhere; }
.profile-mini-button,.profile-theme-options button { min-height: var(--touch-target); }
.profile-mini-button { font-size: var(--type-caption); }
/* Keep the status action beside the copy, at its original compact size. */
.profile-status-row { flex-wrap: nowrap; }
.profile-status-row .profile-mini-button { min-height: 0; font-size: .65rem; }
.profile-status-editor { grid-template-columns: minmax(0,1fr); }
.profile-status-editor input { font-size: var(--type-body); }
.profile-status-editor>div { flex-wrap: wrap; }
/* Original compact chips; scroll only at extreme text zoom/narrow widths. */
.profile-top5-filter { flex-wrap: nowrap; gap: .22rem; max-width: 100%; overflow-x: auto; }
.profile-top5-filter button { flex: 0 0 auto; white-space: nowrap; }
.profile-progress-controls { border-top: 1px solid var(--line); padding-block: .5rem; }
.profile-progress-controls summary { min-height: var(--touch-target); padding-block: .8rem; font-size: var(--type-label); color: var(--text-secondary); cursor: pointer; }
.profile-progress-controls p { font-size: var(--type-label); line-height: 1.5; color: var(--text-secondary); text-wrap: pretty; }
.reset-progress-button { color: #ffb7bf; border-color: #79434d; }
.guide-body p { font-size: var(--type-body); }
.guide-mode p { font-size: var(--type-label); }
.guide-secondary button { min-height: var(--touch-target); padding-inline: .65rem; }

button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible { outline: 3px solid #c4a1ff; outline-offset: 3px; }
::selection { background: #7944d4; color: #fff; }

/* Same type hierarchy across PICK, result screens, rankings and PROFILE. */
body{color:var(--text);background:radial-gradient(circle at 82% 4%,rgba(136,83,255,.14),transparent 27rem),radial-gradient(circle at 0 85%,rgba(255,69,151,.06),transparent 24rem),var(--bg)}
input,textarea,select{font:inherit;caret-color:#cfadff}
h1,h2,h3{font-weight:800;letter-spacing:-.035em}p{letter-spacing:0;text-wrap:pretty}
.eyebrow{font-weight:700;letter-spacing:.1em;color:var(--text-secondary)}
.home-intro h1{font-size:clamp(2.25rem,10.7vw,3.5rem);line-height:1.08}
.round-head h2,.result-intro h2{line-height:1.15;letter-spacing:-.03em}
.result-heading h2{letter-spacing:-.035em;line-height:1.12}
.gesture-hint,#profileTrophyCount{font-size:.75rem}
.mode-copy strong{font-weight:750}.mode-copy small{font-weight:450;font-size:.8125rem;line-height:1.5}
.mode-grid{gap:.65rem}.mode-card{min-height:5.3rem;padding:.85rem}.mode-arrow{font-size:1.15rem;color:#cbb5e9}
.pick-switch{border-radius:.9rem;background:#15101f}.pick-switch button{position:relative;font-weight:750;letter-spacing:.035em;border-radius:.65rem}
.pick-switch button.active{background:#30203f;border-color:#735097;color:#f0dcff;box-shadow:none}
.pick-switch button.active::after{content:'';position:absolute;left:30%;right:30%;bottom:4px;height:2px;border-radius:2px;background:#c097ff}
.series-filter,.global-mode-tabs{background:#13101b;border-radius:.875rem}
.series-filter button,.global-mode-tabs button{font-weight:700;border-radius:.65rem}
.series-filter button.active{background:#6740ae;box-shadow:none}
.primary-button,.secondary-button{font-weight:700;letter-spacing:0;line-height:1.4}
.primary-button:disabled{filter:none;opacity:.5;cursor:not-allowed}
.app-nav button strong{font-weight:750;letter-spacing:.035em}.app-nav button.active{background:#251a37;color:#e6d2ff}
.app-nav button[aria-disabled="true"]{opacity:.65}.app-nav button[aria-disabled="true"] small{font-size:.6875rem}
.profile-user-copy h1{font-weight:800;letter-spacing:-.035em;line-height:1.08}.profile-summary-copy h3{font-weight:800;letter-spacing:-.03em;line-height:1.15}
.profile-pick-copy strong{font-weight:750}.profile-status-row p{font-weight:650}.profile-mini-button{font-weight:700}
.profile-summary-copy>p,.profile-type-result>small{color:var(--text-secondary);line-height:1.4}
.global-character-copy>strong{font-size:.875rem;line-height:1.3;white-space:normal;overflow-wrap:anywhere}.global-character-copy small{font-size:.75rem;color:var(--text-secondary)}
.global-character-copy i{font-size:.625rem}.global-score-copy span{font-size:.6875rem;color:var(--text-secondary)}.global-score-copy strong{font-size:.8125rem;font-variant-numeric:tabular-nums}
.global-ranking-row:nth-child(-n+3) .global-rank{border-radius:50%;font-size:1rem;aspect-ratio:1;display:grid;place-items:center;background:#3a2d1c;color:#ffd385}
.global-ranking-row:nth-child(2) .global-rank{background:#2a2935;color:#d7d5e9}.global-ranking-row:nth-child(3) .global-rank{background:#35241e;color:#e9b08d}
.top-sort-item .sort-copy strong,.top-select-copy strong{font-weight:750}.top-select-copy small{font-weight:450}
.progress-copy,.profile-stat-grid strong{font-variant-numeric:tabular-nums}
:where(.profile-history-item,.guide-body,.profile-decor-editor){scrollbar-width:thin;scrollbar-color:#69547d transparent}
@media(hover:hover){.profile-choice:hover>span,.profile-mini-button:hover,.series-filter button:not(.active):hover{border-color:#9870cb}.mode-card:hover{background-color:#21192f}}
@media(prefers-reduced-motion:no-preference){.profile-choice>span,.profile-mini-button,.series-filter button,.pick-switch button{transition:background-color .16s ease-out,border-color .16s ease-out,color .16s ease-out}}