/* Visual polish layer: hierarchy and interaction feedback only. */
:root {
  --focus-ring: 0 0 0 3px #6956e833;
}

body { background: linear-gradient(135deg, #f4f5fa 0%, #f8f8fc 45%, #f3f4f9 100%); }
html { scroll-behavior: smooth; }
#app { animation: page-enter .18s ease-out; }
@keyframes page-enter { from { opacity: .72; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.rail { border-right: 1px solid #252c4b; }
nav a, .rail-bottom a { transition: color .16s ease, background .16s ease, transform .16s ease; }
nav a:hover, .rail-bottom a:hover { color: #fff; background: #202746; transform: translateX(2px); }
.topbar { position: sticky; top: 0; z-index: 10; box-shadow: 0 3px 18px #20274608; }
.content { position: relative; }
.content::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, #ddd8fa, transparent); }
.hero h1, .section-heading h2 { text-wrap: balance; }
.hero p, .section-heading > p { text-wrap: pretty; }
.card h2, .card h3 { text-wrap: balance; }
.list-item { transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.list-item:hover { border-color: #d8d3fa; background: #fcfbff; }
.input, .textarea { transition: border-color .16s ease, box-shadow .16s ease; }
.input:hover, .textarea:hover { border-color: #c9c3f5; }
.input:focus, .textarea:focus { border-color: var(--violet); box-shadow: var(--focus-ring); }
.secondary-action { box-shadow: inset 0 0 0 1px #ddd8ff; }
.secondary-action:hover { background: #e9e6ff; }
.wizard-progress { position: relative; }
.wizard-dots i { transition: background .16s ease, box-shadow .16s ease; }
.wizard-task .task-number { box-shadow: 0 8px 18px #6956e822; }
.raid-progress .stat strong { color: var(--violet); }
.raid-campaign > .row .secondary-action { flex: none; }

button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.primary, .ghost, .outline, .secondary-action { transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.primary:hover, .ghost:hover, .outline:hover, .secondary-action:hover { transform: translateY(-1px); }
.primary:active, .ghost:active, .outline:active, .secondary-action:active { transform: translateY(0); }
.primary:disabled, .ghost:disabled, .outline:disabled { opacity: .55; cursor: wait; transform: none; }
.card { transition: border-color .16s ease, box-shadow .16s ease; }
.card:hover { border-color: #d8d3fa; }
.hero { max-width: 1120px; }
.hero-art { box-shadow: 0 16px 34px #252b591c; }
.section-heading { max-width: 1120px; }
.section-heading > p { font-size: 14px; }
.track-card, .journey-grid > div { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.track-card:hover, .journey-grid > div:hover { transform: translateY(-2px); border-color: #d8d3fa; box-shadow: 0 16px 32px #1e255016; }
.raid-progress { border: 1px solid #ddd8ff; background: linear-gradient(135deg, #fbfaff, #fff); }
.raid-progress > b { display: block; font-size: 15px; letter-spacing: -.02em; }
.raid-progress .grid { margin-top: 14px; }
.raid-campaign { border-color: #e0e2ee; }
.raid-campaign > .row h2 { font-size: 22px; }
.raid-campaign > small { display: block; margin-top: 10px; }
.raid-action { transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.raid-action:hover { border-color: #d8d3fa; background: #fcfbff; box-shadow: 0 8px 20px #1e255009; }
.raid-action .grow > b { font-size: 14px; }
.raid-action .grow > small:last-of-type { color: #69728f; }
.raid-action .queue-meta { align-self: flex-start; }
.raid-evidence, .raid-appeal-form { padding: 12px; border-radius: 12px; background: #f8f8fc; border: 1px solid #e8e9f2; }
.raid-evidence label { font-weight: 750; }
.raid-evidence small, .raid-appeal-form small { line-height: 1.45; }
.raid-evidence .input, .raid-appeal-form .textarea { background: #fff; }
.notice { border-left: 3px solid var(--gold); }
.empty { min-height: 84px; display: grid; place-items: center; }
.pill.danger { background: #ffe8ed; color: #b5264e; }
.pill.green { box-shadow: inset 0 0 0 1px #b9edd7; }
.content > .hero { padding-bottom: 4px; }
.content > .hero + .card, .content > .hero + .grid, .content > .hero + .list { margin-top: 4px; }
.wizard-card { border-top: 4px solid var(--violet); }
.wizard-progress b { color: var(--ink); }
.wizard-task .secondary-action { box-shadow: inset 0 0 0 1px #ddd8ff; }
.form { gap: 15px; }
.form .primary { justify-self: start; }
.waiting-card, .badge-banner, .mission-intro { box-shadow: 0 10px 24px #1e255008; }
.link-list a, .secondary-action { transition: color .16s ease, background .16s ease, transform .16s ease; }
.link-list a:hover { color: #4f3ed0; }
.raid-action .queue-meta button { min-height: 38px; }
.raid-appeal-form .primary { width: fit-content; }
.account button:hover { color: var(--violet); }
.card-kicker { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.studio-grid, .commons-grid, .appeal-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .7fr); gap: 16px; }
.studio-form-card, .appeal-grid > .card { min-width: 0; }
.studio-guide, .appeal-guide { align-self: start; background: linear-gradient(145deg, #fbfaff, #fff); }
.studio-guide ul, .appeal-guide ul { color: var(--muted); line-height: 1.7; padding-left: 20px; }
.studio-guide .ghost { margin-top: 8px; }
.leaderboard-intro { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; background: #fbfaff; border-color: #ddd8ff; }
.leaderboard-intro h2 { margin-bottom: 4px; }
.page-end { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.passport-card .identity-banner > .pill { margin-left: auto; }
.gate-note { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 4px; color: var(--muted); font-size: 12px; font-weight: 700; }
.gate-note span::before { content: '•'; color: var(--mint); margin-right: 6px; }
.today-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.today-guide > div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.today-guide .guide-number { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #eeeaff; color: var(--violet); font-size: 11px; font-weight: 900; }
.today-guide b { font-size: 13px; }
.today-guide small { color: var(--muted); line-height: 1.35; }
.mission-item { align-items: flex-start; }
.mission-item .icon { flex: none; }
.mission-heading { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mission-heading .pill { font-size: 9px; padding: 4px 7px; }
.mission-status { display: inline-flex; }
.mission-actions { margin-top: 12px; }
.mission-actions .ghost { padding: 8px 11px; font-size: 12px; }
.mission-panel { margin-top: 10px; padding: 12px; border-radius: 12px; background: #f7f6ff; border: 1px solid #ddd8ff; }
.mission-panel .field-hint { margin: 0 0 9px; }
.mission-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 9px; color: var(--muted); font-size: 10px; text-transform: capitalize; }
.mission-meta span + span::before { content: '·'; margin-right: 12px; color: #c1c6d6; }
.mission-proof { display: flex; gap: 8px; margin-top: 13px; max-width: 640px; }
.mission-proof .input { min-width: 0; }
.mission-proof .primary { white-space: nowrap; }
.mission-empty { display: grid; gap: 7px; }
.mission-empty b { color: var(--ink); }
.mission-kind-gameplay { background: #eeeaff; color: var(--violet); }
.mission-kind-creator { background: #e2f8ef; color: #158a61; }
.mission-kind-community { background: #fff5d9; color: #a17008; }
.mission-kind-feedback { background: #ffe7ef; color: #bf416a; }
.checkin-card { display: flex; align-items: center; gap: 13px; padding: 15px; margin-bottom: 10px; border: 1px solid #ddd8ff; border-radius: 14px; background: linear-gradient(135deg, #fbfaff, #fff); }
.checkin-card .primary { flex: none; padding: 10px 14px; }
.checkin-card.claimed { background: #f4fbf7; border-color: #c6eedb; }
.checkin-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: #eeeaff; color: var(--violet); font-weight: 900; font-size: 18px; }
.checkin-card.claimed .checkin-icon { background: #dff7eb; color: #168b61; }
.proof-links-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; }
.proof-links-heading .ghost { flex: none; padding: 8px 11px; font-size: 11px; }
.proof-links { display: grid; gap: 9px; }
.proof-link-row { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.proof-link-row .ghost { padding: 9px 10px; font-size: 11px; }
.field-hint { color: var(--muted); font-size: 11px; line-height: 1.4; }
.passport-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(230px, .6fr); gap: 16px; }
.passport-card { position: relative; overflow: hidden; min-height: 310px; padding: 28px; color: #fff; background: linear-gradient(135deg, #20274e, #6956e8); border: 0; }
.passport-mark { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 24px; border-radius: 14px; background: #ffd25d; color: #20274e; font-weight: 900; }
.passport-title h2 { margin: 8px 0 5px; font-size: 30px; }
.passport-title p { margin: 0; color: #dfe3f5; }
.passport-points { margin: 30px 0 22px; }
.passport-points span, .passport-facts span { display: block; color: #dfe3f5; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.passport-points strong { display: block; margin: 5px 0; font-size: 48px; }
.passport-points small { color: #dfe3f5; }
.passport-facts { display: flex; gap: 36px; }
.passport-facts b { display: block; margin-top: 5px; font-size: 22px; }
.passport-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.passport-card .ghost { color: #fff; border-color: #ffffff55; background: #ffffff12; }
.passport-note { align-self: start; }
.passport-note h3 { margin-top: 0; }
.wallet-form { display: grid; gap: 9px; margin-top: 14px; }
.wallet-form .primary { width: 100%; }
@media(max-width:600px){
  .mission-proof { display: grid; }
  .mission-proof .primary { width: 100%; }
  .mission-meta { gap: 5px 9px; }
  .mission-meta span + span::before { margin-right: 9px; }
  .checkin-card { align-items: flex-start; flex-wrap: wrap; }
  .checkin-card .primary { width: 100%; }
  .proof-links-heading { align-items: flex-start; flex-direction: column; }
  .proof-links-heading .ghost { width: 100%; }
  .proof-link-row { grid-template-columns: 1fr; }
  .proof-link-row .ghost { width: 100%; }
  .passport-layout { grid-template-columns: 1fr; }
  .passport-card { padding: 20px; }
  .passport-facts { gap: 20px; }
}
.page-footer a { color: var(--violet); font-weight: 750; }
.page-footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; padding: 18px 0 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; }
.page-footer > span { display: inline-flex; align-items: center; gap: 6px; }
.builder-timeline { position: relative; gap: 0; margin-top: 17px; padding-left: 2px; }
.builder-timeline .step { position: relative; min-height: 56px; padding-bottom: 17px; }
.builder-timeline .step:last-child { min-height: 25px; padding-bottom: 0; }
.builder-timeline .step:not(:last-child)::after { content: ''; position: absolute; top: 25px; bottom: 0; left: 12px; width: 2px; background: #dfe2ed; }
.builder-timeline .step.done:not(:last-child)::after { background: var(--mint); }
.builder-timeline .step > div { min-width: 0; }
.builder-timeline .step b { display: block; font-size: 13px; line-height: 1.3; }
.builder-timeline .step small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.identity-id { white-space: nowrap; }
.badge-banner p { color: var(--muted); margin: 4px 0 0; }
.identity-copy { padding: 8px 10px; font-size: 11px; white-space: nowrap; }
.next .row { align-items: flex-start; }
.next .primary { flex: none; }
.rail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nav-close, .menu-toggle, .nav-backdrop { display: none; }
.public-mode #nav a:not([data-view="city-hall"]) { display: none; }
.application-mode #nav a:not([data-view="city-hall"]) { display: none; }
.application-mode .rail-label { margin-bottom: 12px; }
.public-mode .rail-label { margin-bottom: 12px; }
.gate-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 4px; }
.gate-links a { padding: 0; color: var(--violet); font-size: 12px; font-weight: 800; }
.gate-links a:hover { background: none; transform: none; text-decoration: underline; }
.public-preview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; margin-top: 14px; padding: 14px 16px; border: 1px solid #ddd8ff; border-radius: 13px; background: #f7f6ff; color: var(--ink); }
.public-preview b { font-size: 13px; }
.public-preview span { color: var(--muted); font-size: 12px; line-height: 1.4; }
.public-preview .ghost { padding: 8px 11px; font-size: 11px; }
.track-card { display: block; color: inherit; }
.track-action { display: block; margin-top: 17px; color: var(--violet); font-size: 11px; font-weight: 850; }
.track-card:hover .track-action { text-decoration: underline; }
.reward-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 13px; color: #c8cee2; font-size: 12px; font-weight: 750; }
.reward-facts span::before { content: '•'; color: var(--gold); margin-right: 6px; }
.rules-link { display: inline-block; margin-top: 15px; color: #fff; font-size: 12px; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }
.gate-flow section { scroll-margin-top: 96px; }
.map-district { text-decoration: none; transition: transform .16s ease, box-shadow .16s ease; }
.map-district small { color: var(--muted); font-size: 10px; font-weight: 650; }
.map-district:hover, .map-district:focus-visible { transform: translateY(-3px); box-shadow: 0 14px 28px #24305235; }
.treasury-callout { scroll-margin-top: 96px; }
.identity-context { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 -10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); font-size: 12px; }
.identity-context b { color: var(--ink); }
.wizard-task .identity-banner { display: flex; align-items: center; gap: 12px; }
.wizard-task .identity-banner > div:nth-child(2) { min-width: 0; flex: 1; }
.wizard-task .identity-banner small { display: block; margin-top: 4px; color: var(--muted); }
.wizard-task .identity-banner .ghost { flex: none; padding: 8px 10px; font-size: 11px; }
.identity-loading { border: 1px solid #ddd8ff; }
.identity-status { margin-top: 10px; }
.wizard-card { padding: clamp(18px, 3vw, 30px); }
.wizard-progress { margin-bottom: 24px; }
.wizard-task .task-number { margin-bottom: 16px; }
.wizard-task > p { margin-bottom: 18px; }
.wizard-task > .primary { margin-top: 18px; }
.wizard-task > .primary:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.confirm-line input:disabled + span { color: #9aa2bb; }

@media (max-width: 700px) {
  .hero-art { box-shadow: none; }
  .raid-progress .grid { gap: 8px; }
  .raid-campaign > .row h2 { font-size: 20px; }
  .raid-action:hover { transform: none; box-shadow: none; }
  .form .primary, .raid-appeal-form .primary { width: 100%; }
  .wizard-card { border-top-width: 3px; }
  .topbar { position: sticky; }
  .content::before { display: none; }
  .row { flex-wrap: wrap; }
  .row > .grow { flex: 1 1 100%; }
  .studio-grid, .commons-grid, .appeal-grid { grid-template-columns: 1fr; }
  .card-kicker { align-items: flex-start; flex-direction: column; gap: 6px; }
  .leaderboard-intro { align-items: flex-start; }
  .passport-card .identity-banner > .pill { margin-left: 0; }
  .page-end { align-items: flex-start; flex-direction: column; }
  .today-guide { grid-template-columns: 1fr; }
  .gate-flow { display: flex; flex-direction: column; }
  .gate-flow .gate-actions { order: 1; }
  .gate-flow .gate-note { order: 2; }
  .gate-flow .gate-links { order: 3; }
  .gate-flow .reward-strip { order: 4; }
  .gate-flow #journey { order: 5; }
  .gate-flow .map-slot { order: 6; }
  .gate-flow #tracks { order: 7; }
  .gate-flow #rewards { order: 8; }
  .gate-links { gap: 7px 14px; font-size: 11px; }
  .public-preview { grid-template-columns: 1fr; gap: 6px; }
  .public-preview .ghost { width: 100%; }
  .track-action { margin-top: 13px; }
  .reward-facts { display: grid; gap: 6px; }
  .treasury-callout h2 { font-size: 22px; }
  .treasury-callout p { font-size: 13px; }
  .page-footer { display: grid; gap: 4px; margin-top: 22px; padding-bottom: 18px; }
  .page-footer > span { display: block; }
  .hero-art { min-width: 0; height: 104px; margin-top: 16px; border-radius: 20px; }
  .content:has(.wizard-card) .hero-art { height: 72px; margin-top: 10px; }
  .reward-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; margin: 20px 0; }
  .reward-strip .stat { grid-column: auto !important; min-height: 0; padding: 13px; }
  .reward-strip .stat:first-child { grid-column: 1 / -1 !important; }
  .reward-strip .stat strong { font-size: 20px; }
  .reward-strip .stat small { font-size: 10px; }
  .city-map { margin-top: 18px; }
  .map-district small { display: none; }
  .badge-banner { display: grid; grid-template-columns: auto minmax(0, 1fr); padding: 15px; gap: 10px; }
  .builder-badge { width: 44px; height: 44px; font-size: 20px; }
  .badge-banner h2 { font-size: 18px; }
  .badge-banner p { font-size: 12px; }
  .identity-copy { grid-column: 2; justify-self: start; margin-left: 0; }
  .badge-banner .pill { grid-column: 2; justify-self: start; }
  .accountName { display: block; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0; }
  .accountName::after { content: attr(data-short); font-size: 10px; }
  .stat { padding: 16px; }
  .stat .label { font-size: 10px; line-height: 1.25; }
  .stat strong { margin: 6px 0; }
  .next .row { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  .next .primary { grid-column: 1 / -1; width: 100%; }
  .identity-context { align-items: flex-start; flex-direction: column; gap: 3px; }
  .wizard-task .identity-banner { align-items: flex-start; flex-wrap: wrap; }
  .wizard-task .identity-banner .ghost { margin-left: 54px; }
}

@media (max-width: 850px) {
  body.nav-open { overflow: hidden; }
  .shell { display: block; }
  .main { width: 100%; margin-left: 0; }
  .rail { position: fixed; inset: 0 auto 0 0; width: min(82vw, 300px); height: 100vh; min-height: 100vh; padding: 24px 17px 20px; z-index: 40; transform: translateX(-105%); transition: transform .2s ease; box-shadow: 18px 0 42px #11162d38; }
  .rail.open { transform: translateX(0); }
  .rail-head { margin-bottom: 4px; }
  .brand { justify-content: flex-start; }
  .brand > span:last-child { display: inline; font-size: 11px; }
  .brand > span:last-child b { font-size: 13px; }
  .rail-label { display: block; font-size: 10px; margin: 42px 13px 15px; }
  nav a, .rail-bottom a { justify-content: flex-start; min-height: 44px; height: auto; padding: 12px 13px; font-size: 14px; }
  nav a span, .rail-bottom a span { font-size: 19px; }
  nav a:not(.active)::after { display: none; }
  .rail-bottom { margin-top: auto; }
  .rail-bottom small { display: block; font-size: 11px; padding: 0 13px; }
  .nav-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: #252c4b; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
  .menu-toggle { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1px solid #d7d9e7; border-radius: 10px; background: #fff; color: var(--ink); font-size: 18px; cursor: pointer; }
  .account button { min-width: 40px; min-height: 40px; }
  .nav-backdrop { position: fixed; inset: 0; z-index: 30; border: 0; background: #11162d66; cursor: pointer; }
  .nav-backdrop.open { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 500px) {
  #accountName { display: none; }
  .topbar { padding-left: 10px; padding-right: 10px; }
  .topbar .outline { min-height: 40px; padding: 8px 10px; font-size: 11px; white-space: nowrap; }
  .menu-toggle { width: 40px; height: 40px; font-size: 16px; }
  .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crumb b { letter-spacing: .08em; }
  .section { margin-top: 40px; }
  .studio-guide, .appeal-guide { padding: 17px; }
  .gate-note { gap: 6px 12px; font-size: 11px; }
}