/* Shared presentation layer. Layouts and application behavior stay in their page files. */
:root {
  --bg:#0c0e14; --bg2:#14171f; --panel:#171a23; --panel2:#212530;
  --text:#f5f5f7; --muted:#a4a9b7; --disabled:#747b8d;
  --border:rgba(217,225,255,.09); --border2:rgba(217,225,255,.17);
  --accent:#a18aff; --green:#64dba4; --danger:#ff8f99; --inf:#f5f5f7; --plus:#b9a8ff;
  --font-hd:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-bd:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-body:var(--font-bd);
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --shadow-sm:0 2px 8px rgba(0,0,0,.12);
  --shadow-md:0 16px 48px rgba(0,0,0,.18);
}
html { scroll-padding-top:100px; }
body { font-family:var(--font-bd); -webkit-font-smoothing:antialiased; font-optical-sizing:auto; line-height:1.5; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
::selection { background:rgba(161,138,255,.32); color:var(--text); }
:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
h1,h2,h3,.stat-val,.stat-card-val { letter-spacing:-.035em; }
h1,h2,h3 { text-wrap:balance; }
.top-nav { background:rgba(15,18,26,.82); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%); box-shadow:0 1px 0 rgba(255,255,255,.02); }
.top-nav-inner { min-height:76px; }
.top-nav-logo { display:inline-flex; align-items:center; gap:10px; letter-spacing:-.035em; font-size:18px; }
.top-nav-logo::before { content:'M'; display:grid; place-items:center; width:30px; height:30px; border-radius:10px; background:#a18aff; color:#171226; -webkit-text-fill-color:#171226; font-size:17px; font-weight:750; letter-spacing:-.07em; box-shadow:inset 0 1px 0 rgba(255,255,255,.22); }
.top-nav-link,.nav-dropdown-btn { border-radius:12px; font-size:14px; font-weight:500; }
.top-nav-link.active,.nav-dropdown-btn.active { color:var(--text); background:rgba(161,138,255,.13); }
.top-nav-link.active::after,.nav-dropdown-btn.active::after { content:none; }
.nav-dropdown-inner { border-radius:18px; padding:7px; background:rgba(31,35,47,.97); box-shadow:var(--shadow-md); }
.nav-drop-item { font-size:14px; border-radius:11px; }
.language-switcher { background:rgba(255,255,255,.035); border-color:var(--border); border-radius:11px; }
.language-switcher a { border-radius:8px; }
.language-switcher a[aria-current=true] { background:var(--panel2); box-shadow:0 1px 4px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.08); color:var(--text); }
.btn,.profile-search-btn,.player-own-profile,.account-delete-button { min-height:44px; border-radius:13px; font-size:14px; font-weight:600; }
.btn-primary,.profile-search-btn,.login-btn,.username-confirm,.search-btn { color:#171226; background:var(--accent); box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 4px 16px rgba(134,102,235,.12); }
.btn-ghost { color:var(--text); background:rgba(255,255,255,.035); border:1px solid var(--border2); }
.btn-primary:hover,.profile-search-btn:hover,.login-btn:hover,.username-confirm:hover,.search-btn:hover { background:#b09dff; box-shadow:0 6px 22px rgba(134,102,235,.18); }
.btn-ghost:hover { background:rgba(255,255,255,.075); border-color:var(--border2); }
.page-home .home-hero { padding:88px 32px; text-align:left; }
.page-home .home-hero::before { background:radial-gradient(ellipse at 70% 45%,rgba(134,102,235,.13),transparent 65%); }
.page-home .home-hero-inner { max-width:1136px; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,420px); align-items:center; gap:80px; }
.page-home .home-eyebrow { display:inline-flex; color:var(--muted); font-size:12px; letter-spacing:.08em; margin-bottom:24px; }
.page-home .home-title { font-size:clamp(48px,6.2vw,82px); line-height:1.04; font-weight:650; letter-spacing:-.065em; margin-bottom:24px; }
.page-home .home-desc { margin:0 0 32px; font-size:19px; line-height:1.65; letter-spacing:-.015em; }
.home-actions { justify-content:flex-start; }
.page-home .home-actions .btn { padding:15px 23px; font-size:15px; border-radius:15px; }
.home-shortcuts { margin:32px 0 0; width:100%; max-width:360px; gap:24px; }
.home-shortcuts a { font-size:14px; border-color:var(--border2); padding-bottom:14px; }
.home-progress-card { position:relative; padding:28px; border:1px solid var(--border2); border-radius:28px; background:linear-gradient(155deg,rgba(43,45,65,.8),rgba(23,26,35,.95)); box-shadow:0 32px 90px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05); }
.home-player-identity { display:flex; align-items:center; gap:13px; margin-bottom:36px; min-width:0; }
.home-player-identity img { border-radius:15px; image-rendering:pixelated; background:var(--panel2); flex-shrink:0; }
.home-player-identity > div { min-width:0; flex:1; }
.home-player-identity strong { display:block; font-size:16px; font-weight:600; overflow-wrap:anywhere; letter-spacing:-.02em; }
.home-card-eyebrow { display:block; color:var(--muted); font-size:12px; line-height:1.8; }
.home-profile-link { display:grid; place-items:center; min-width:44px; height:44px; border:1px solid var(--border); border-radius:14px; color:var(--muted); text-decoration:none; }
.home-progress-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:12px; }
.home-progress-heading h2 { font-size:19px; font-weight:600; }
.home-progress-heading > span { padding:4px 9px; border-radius:8px; color:#cfbfff; background:rgba(161,138,255,.12); font-size:12px; font-variant-numeric:tabular-nums; }
.home-progress-number { font-size:64px; font-weight:600; letter-spacing:-.065em; line-height:1.15; font-variant-numeric:tabular-nums; margin-bottom:5px; }
.home-progress-number > span { font-size:22px; color:var(--muted); font-weight:400; letter-spacing:-.03em; }
#home-progress { display:block; appearance:none; width:100%; height:7px; margin:16px 0 24px; border:0; border-radius:9px; overflow:hidden; background:rgba(255,255,255,.07); accent-color:var(--accent); }
#home-progress::-webkit-progress-bar { background:rgba(255,255,255,.07); border-radius:9px; }
#home-progress::-webkit-progress-value { background:var(--accent); border-radius:9px; }
#home-progress::-moz-progress-bar { background:var(--accent); border-radius:9px; }
.home-coins-summary { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:18px 0; border-top:1px solid var(--border); color:var(--muted); font-size:13px; }
.home-coins-summary strong { font-size:22px; letter-spacing:-.035em; color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.home-resume-link { display:flex; justify-content:space-between; align-items:center; min-height:44px; margin-top:6px; padding:12px 14px; background:rgba(255,255,255,.045); border:1px solid var(--border); border-radius:12px; color:var(--text); font-size:13px; text-decoration:none; }
.page-tracker .hero-inner,.page-leaderboard .hero-inner { padding-top:56px; padding-bottom:56px; }
.hero-title,.profile-name { font-weight:650; letter-spacing:-.045em; }
.page-tracker .top-stats { border-radius:22px; background:rgba(23,26,35,.8); padding-top:22px; padding-bottom:22px; }
.page-tracker .stat-val,.stat-val,.stat-card-val { font-size:26px; line-height:1.3; font-weight:600; }
.stat-label,.stat-sub,.card-land { color:var(--muted); line-height:1.5; }
.card,.stat-card,.chart-card,.history-card,.achiev-card,.lb-card,.table-card,.grade-card { border-radius:22px; border-color:var(--border); background:var(--panel); }
.card,.stat-card,.chart-card,.lb-card { box-shadow:var(--shadow-sm); }
.page-tracker .grid { gap:20px; }
.page-tracker .card { padding:24px; gap:18px; }
.page-tracker .card-title { font-size:17px; line-height:1.35; letter-spacing:-.025em; font-weight:600; }
.coin-val { font-size:20px; font-weight:600; letter-spacing:-.035em; }
.card-info-row { border-color:var(--border); }
.t-btn { width:44px; height:44px; min-width:44px; border-radius:13px; font-size:13px; background:rgba(255,255,255,.025); }
.t-btn.done { color:#e0d7ff; border-color:rgba(161,138,255,.45); background:rgba(161,138,255,.2); box-shadow:inset 0 0 0 1px rgba(161,138,255,.08); }
.card.complete { border-color:rgba(100,219,164,.3); background:linear-gradient(155deg,rgba(100,219,164,.055),var(--panel)); }
.card.complete .card-title::after { color:var(--green); }
.toggle-all-btn,.warp-cmd { border-radius:11px; }
.search-input,.profile-search-input,.sort-select,.field-select,.table-input,#account-delete-name { border-radius:13px; border-color:var(--border2); }
.pills,.view-tabs { gap:4px; padding:4px; border:1px solid var(--border); border-radius:15px; background:rgba(255,255,255,.025); }
.pill-btn,.view-tab { border-radius:11px; border-color:transparent; }
.pill-btn.active,.view-tab.active { color:var(--text); background:var(--panel2); border-color:rgba(255,255,255,.06); box-shadow:0 2px 5px rgba(0,0,0,.15); }
.profile-search-card { border-radius:22px; background:var(--panel); }
.player-selector-menu { background:rgba(33,37,48,.98); border-radius:16px; box-shadow:var(--shadow-md); }
.player-selector-option { border-radius:11px; }
.page-profile .profile-hero { padding-top:48px; padding-bottom:48px; }
.page-profile .avatar { border-radius:22px; }
.page-profile .profile-name { font-size:clamp(28px,4vw,46px); }
.profile-eyebrow { letter-spacing:.08em; font-size:11px; }
.today-card { border-radius:20px; background:var(--panel); border-color:var(--border); }
.today-val { font-size:22px; font-weight:600; }
.achiev-icon { font-size:26px; }
.achiev-name { font-size:13px; }
.achiev-card.locked { background:rgba(23,26,35,.45); }
.page-admin .sidebar { background:rgba(18,21,29,.9); border-color:var(--border); }
.page-admin .topbar { background:rgba(15,18,26,.9); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-color:var(--border); }
.page-admin .nav-btn { border-radius:12px; font-size:13px; }
.page-admin .nav-btn.active { background:rgba(161,138,255,.13); color:#d2c5ff; }
.page-admin .content { padding-top:32px; }
.login-card,.complete-box,.username-box,.error-panel { border-radius:28px; background:var(--panel); border-color:var(--border2); box-shadow:var(--shadow-md); }
.account-delete-dialog,.mod-link-dialog,.player-details { border-radius:24px; background:var(--panel); border-color:var(--border2); box-shadow:0 32px 100px rgba(0,0,0,.45); }
dialog::backdrop { background:rgba(3,5,12,.7); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.account-delete-button { color:#ffb2b9; }
.site-footer,.home-footer { color:var(--muted); }
/* Current computed transforms are the starting point when an interaction reverses. */
@media(prefers-reduced-motion:no-preference) {
  .btn,.t-btn,.pill-btn,.view-tab,.profile-search-btn,.player-own-profile,.home-resume-link,.home-profile-link,.nav-drop-item { transition:transform 180ms var(--ease-out),background-color 180ms var(--ease-out),border-color 180ms var(--ease-out),box-shadow 180ms var(--ease-out); }
  .btn:active:not(:disabled),.t-btn:active,.profile-search-btn:active,.home-resume-link:active { transform:scale(.97); }
  .nav-dropdown { transition:opacity 180ms var(--ease-out),visibility 180ms var(--ease-out); }
  .card { transition:background-color 200ms var(--ease-out),border-color 200ms var(--ease-out),box-shadow 200ms var(--ease-out); }
  @media(hover:hover) { .card:hover { background:#1b1f2a; border-color:var(--border2); box-shadow:0 10px 32px rgba(0,0,0,.13); } }
}
@media(max-width:1000px) {
  .page-home .home-hero-inner { gap:40px; grid-template-columns:minmax(0,1fr) minmax(300px,360px); }
  .page-tracker .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .page-home .home-hero { padding:48px 24px; }
  .page-home .home-hero-inner { max-width:520px; grid-template-columns:minmax(0,1fr); gap:40px; }
  .page-home .home-title { font-size:clamp(46px,10vw,64px); }
  .page-home .home-desc { font-size:17px; }
  .home-shortcuts { max-width:none; }
  .home-progress-card { padding:24px; border-radius:24px; }
}
@media(max-width:640px) {
  html { scroll-padding-top:130px; }
  .top-nav-inner { min-height:68px; }
  .top-nav-logo { font-size:16px; }
  .top-nav-link,.nav-dropdown-btn { font-size:13px; }
  .page-tracker .grid { grid-template-columns:minmax(0,1fr); }
  .page-tracker .card { padding:20px; }
  .page-tracker .controls { gap:12px; }
  .page-tracker .top-stats { border-radius:20px; }
  .page-home .home-actions .btn { width:auto; max-width:none; }
  .home-player-identity { margin-bottom:28px; }
  .home-progress-number { font-size:56px; }
  .page-home .home-footer { gap:12px; }
  .page-profile .stat-val { font-size:24px; }
  .page-profile .profile-hero { padding-top:36px; padding-bottom:36px; }
}
@media(prefers-reduced-transparency:reduce) {
  .top-nav,.page-admin .topbar { background:var(--bg); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@media(max-width:360px) {
  .page-tracker .card { padding:16px 12px; }
  .tours-grid { gap:2px; }
  .t-sum { flex-basis:100%; margin-top:8px; text-align:right; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}