:root {
  color-scheme: dark;
  --bg: #0b1222;
  --bg-soft: #0f182b;
  --surface: #121d32;
  --surface-raised: #17243c;
  --surface-hover: #1d2c48;
  --surface-strong: #223350;
  --text: #f5f7fb;
  --text-soft: #c7d0df;
  --muted: #8f9bb1;
  --line: #26344d;
  --line-strong: #354663;
  --primary: #6d7cff;
  --primary-hover: #8190ff;
  --primary-soft: rgba(109, 124, 255, .15);
  --cyan: #38c7d5;
  --cyan-soft: rgba(56, 199, 213, .14);
  --green: #4ad28b;
  --green-soft: rgba(74, 210, 139, .14);
  --amber: #f6bd4b;
  --amber-soft: rgba(246, 189, 75, .14);
  --red: #f16978;
  --red-soft: rgba(241, 105, 120, .14);
  --violet: #a277ff;
  --violet-soft: rgba(162, 119, 255, .14);
  --shadow-sm: 0 8px 22px rgba(0, 0, 0, .18);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .28);
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --shell: 1180px;
  --header-h: 68px;
  --focus: 0 0 0 3px rgba(109, 124, 255, .38);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f7fb;
  --bg-soft: #edf1f7;
  --surface: #ffffff;
  --surface-raised: #f8faff;
  --surface-hover: #eef3fb;
  --surface-strong: #e8eef8;
  --text: #172033;
  --text-soft: #46536a;
  --muted: #718096;
  --line: #dce3ee;
  --line-strong: #c9d4e4;
  --primary: #5567e9;
  --primary-hover: #4354d5;
  --primary-soft: rgba(85, 103, 233, .10);
  --shadow-sm: 0 8px 26px rgba(37, 51, 78, .08);
  --shadow-lg: 0 22px 60px rgba(37, 51, 78, .12);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 360px;
  pointer-events: none;
  background: radial-gradient(circle at 50% -80px, rgba(109, 124, 255, .14), transparent 62%);
  z-index: -1;
}
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img { display: block; max-width: 100%; }
svg { display: block; }
.icon { width: 20px; height: 20px; flex: 0 0 auto; }
.icon-sm { width: 16px; height: 16px; }
.icon-xs { width: 13px; height: 13px; }
.shell { width: min(calc(100% - 32px), var(--shell)); margin-inline: auto; }
.prose-shell { width: min(calc(100% - 32px), 820px); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -90px; z-index: 1000; padding: 11px 16px; border-radius: var(--radius-sm); background: var(--amber); color: #17130a; font-weight: 800; }
.skip-link:focus { top: 16px; }
:focus-visible { outline: none; box-shadow: var(--focus); }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.035em; line-height: 1.12; }
h1 { font-size: clamp(2.25rem, 5vw, 4rem); margin-bottom: 16px; }
h2 { font-size: clamp(1.65rem, 3vw, 2.35rem); margin-bottom: 12px; }
h3 { font-size: 1.2rem; margin-bottom: 9px; }
p { color: var(--text-soft); }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; color: var(--cyan); font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.text-link { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 750; }
.text-link:hover { color: var(--primary-hover); }
.link-button { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }

.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--primary);
  color: #fff;
  font-weight: 760;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.button:hover { background: var(--primary-hover); transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button-small { min-height: 38px; padding: 8px 13px; font-size: .9rem; }
.button-secondary { background: var(--surface-raised); color: var(--text); border-color: var(--line); }
.button-secondary:hover { background: var(--surface-hover); border-color: var(--line-strong); }
.button-ghost { background: transparent; color: var(--text-soft); border-color: var(--line); }
.button-ghost:hover { background: var(--surface-raised); color: var(--text); }
.button-danger { background: var(--red); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  height: var(--header-h);
  background: rgba(11, 18, 34, .95);
  border-bottom: 1px solid var(--line);
}
html[data-theme="light"] .site-header { background: rgba(255, 255, 255, .94); }
@supports (backdrop-filter: blur(12px)) { .site-header { backdrop-filter: blur(14px); } }
.header-row { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; }
.brand-mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: white; background: var(--primary); }
.brand-mark .icon { width: 22px; height: 22px; }
.brand-text { display: flex; align-items: baseline; gap: 2px; line-height: 1; letter-spacing: -.035em; }
.brand-text strong { font-size: .97rem; }
.brand-text small { color: var(--muted); font-size: .72rem; font-weight: 800; }
.main-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.main-nav a { position: relative; padding: 9px 11px; border-radius: 9px; color: var(--muted); font-size: .92rem; font-weight: 720; }
.main-nav a:hover, .main-nav a.is-active { color: var(--text); background: var(--surface-raised); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-button, .language-menu > summary { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text-soft); cursor: pointer; list-style: none; }
.language-menu > summary { width: auto; min-width: 52px; grid-auto-flow: column; gap: 4px; padding: 0 9px; font-size: .82rem; font-weight: 800; }
.language-menu > summary::-webkit-details-marker, .profile-menu > summary::-webkit-details-marker { display: none; }
.language-menu, .profile-menu { position: relative; }
.header-popover { position: absolute; right: 0; top: calc(100% + 10px); min-width: 210px; padding: 7px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); box-shadow: var(--shadow-lg); }
.language-popover a, .profile-popover a, .profile-popover button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border: 0; border-radius: 8px; background: none; color: var(--text-soft); text-align: left; cursor: pointer; }
.language-popover a:hover, .language-popover a.is-current, .profile-popover a:hover, .profile-popover button:hover { color: var(--text); background: var(--surface-raised); }
.theme-icon-light { display: none; }
html[data-theme="light"] .theme-icon-dark { display: none; }
html[data-theme="light"] .theme-icon-light { display: block; }
.profile-menu > summary { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 5px 9px 5px 5px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; list-style: none; }
.profile-avatar, .mini-avatar { display: grid; place-items: center; border-radius: 50%; background: var(--primary-soft); color: var(--primary-hover); font-weight: 850; }
.profile-avatar { width: 29px; height: 29px; }
.profile-name { max-width: 105px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; font-weight: 760; }
.profile-popover { min-width: 220px; }
.profile-popover a, .profile-popover button { justify-content: flex-start; }
.profile-popover .icon { width: 17px; height: 17px; }
.menu-toggle { display: none; width: 42px; height: 42px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }

.home-hero { padding: 42px 0 30px; }
.home-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 36px; margin-bottom: 26px; }
.home-intro h1 { max-width: 760px; margin-bottom: 10px; }
.home-intro p { max-width: 680px; margin-bottom: 0; font-size: 1.08rem; }
.trust-list { display: grid; gap: 8px; min-width: 235px; padding-bottom: 5px; }
.trust-list span { display: flex; align-items: center; gap: 8px; color: var(--text-soft); font-size: .88rem; }
.trust-list .icon { color: var(--green); }

.game-widget { border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.game-widget-head { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.game-identity { min-width: 0; display: flex; align-items: center; gap: 11px; }
.game-identity-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--primary-soft); color: var(--primary-hover); }
.game-identity-icon .icon { width: 21px; height: 21px; }
.game-identity div { min-width: 0; display: grid; }
.game-identity strong { font-size: .98rem; }
.game-identity small { max-width: 520px; overflow: hidden; color: var(--muted); font-size: .79rem; text-overflow: ellipsis; white-space: nowrap; }
.keyboard-hint { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .76rem; }
.game-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 14px 18px; background: var(--surface-raised); border-bottom: 1px solid var(--line); }
.mode-group { min-width: 0; }
.mode-label { display: block; margin-bottom: 7px; color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mode-switcher { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mode-button, .custom-mode { min-height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text-soft); font-size: .84rem; font-weight: 760; }
.mode-button { min-width: 48px; padding: 7px 11px; cursor: pointer; }
.mode-button:hover { border-color: var(--line-strong); color: var(--text); }
.mode-button.active { border-color: var(--primary); background: var(--primary); color: #fff; }
.custom-mode { overflow: hidden; }
.custom-mode span { padding: 7px 9px; border-right: 1px solid var(--line); }
.custom-mode input { width: 54px; min-height: 34px; padding: 5px 7px; border: 0; border-radius: 0; background: transparent; color: var(--text); }
.live-stats { display: grid; grid-template-columns: repeat(3, minmax(78px, 1fr)); gap: 7px; }
.live-stats > span { min-width: 82px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.live-stats small { display: block; margin-bottom: 2px; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.live-stats strong { display: block; font-size: 1.12rem; font-variant-numeric: tabular-nums; }
.game-stage { position: relative; min-height: 390px; display: grid; place-items: center; margin: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; background: linear-gradient(145deg, #405bd7 0%, #5170e9 55%, #3eb4bd 120%); color: #fff; cursor: crosshair; user-select: none; touch-action: manipulation; isolation: isolate; }
.game-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, rgba(255,255,255,.15) 1.2px, transparent 1.2px); background-size: 30px 30px; mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); }
.game-stage::after { content: ""; position: absolute; inset: auto 0 0; height: 5px; background: rgba(0,0,0,.16); }
.stage-intro { max-width: 600px; display: grid; justify-items: center; padding: 38px 24px; text-align: center; }
.stage-intro .stage-icon { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 13px; border: 1px solid rgba(255,255,255,.24); border-radius: 16px; background: rgba(9, 18, 44, .18); }
.stage-intro .stage-icon .icon { width: 28px; height: 28px; }
.stage-intro > small { margin-bottom: 5px; color: rgba(255,255,255,.72); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.stage-intro > strong { font-size: clamp(2rem, 5vw, 3.35rem); letter-spacing: -.05em; line-height: 1.05; }
.stage-intro p { max-width: 500px; margin: 12px 0 20px; color: rgba(255,255,255,.82); }
.stage-intro .button { background: #fff; color: #27345d; }
.stage-intro .button:hover { background: #f5f7ff; }
.stage-surface { position: absolute; inset: 0; }
.stage-message { position: relative; z-index: 2; padding: 20px; color: #fff; font-size: clamp(2rem, 6vw, 4.6rem); font-weight: 850; letter-spacing: -.05em; text-align: center; }
.stage-message .button { margin-top: 22px; }
.stage-progress { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(0,0,0,.18); }
.stage-progress span { display: block; width: 0; height: 100%; background: var(--amber); transition: width .05s linear; }
.result-card { padding: 24px; border-top: 1px solid var(--line); background: var(--surface-raised); }
.result-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.result-heading h2 { margin: 0; font-size: 2.7rem; }
.result-heading h2 small { color: var(--muted); font-size: 1rem; letter-spacing: 0; }
.result-level { min-width: 130px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); text-align: right; }
.result-level span { display: block; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.result-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.result-grid > div { padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); }
.result-grid span { display: block; margin-bottom: 4px; color: var(--muted); font-size: .68rem; font-weight: 750; text-transform: uppercase; }
.result-grid strong { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.chart-card { margin-top: 12px; padding: 12px 12px 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.chart-card > span { color: var(--muted); font-size: .72rem; font-weight: 750; }
.result-chart { width: 100%; height: 135px; }
.result-note { margin-top: 12px; color: var(--text-soft); font-size: .88rem; }
.achievement-list { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.achievement-list span { padding: 6px 9px; border-radius: 8px; background: var(--amber-soft); color: var(--amber); font-size: .8rem; font-weight: 750; }
.result-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

/* Game engine elements */
.game-target { position: absolute; transform: translate(-50%, -50%); width: 62px; height: 62px; border: 6px solid rgba(255,255,255,.95); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 7px rgba(241,105,120,.28), 0 12px 30px rgba(0,0,0,.22); cursor: crosshair; }
.game-target::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: #fff; }
.game-target.decoy { opacity: .52; filter: saturate(.35); }
.tracking-target { position: absolute; width: 62px; height: 62px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 10px rgba(255,255,255,.2); transform: translate(-50%, -50%); }
.key-board { width: min(90%, 760px); display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; }
.key-board span { min-height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 9px; background: rgba(12,22,54,.27); color: rgba(255,255,255,.82); font-size: .77rem; font-weight: 800; }
.key-board span.active { background: #fff; color: #24335d; }
.mouse-board { grid-template-columns: repeat(4, 1fr); }
.typing-wrap { width: min(90%, 760px); display: grid; gap: 14px; }
.typing-card { padding: 20px; border-radius: 14px; background: rgba(10, 20, 50, .28); }
.typing-text { color: rgba(255,255,255,.74); font-size: clamp(1.1rem, 2.7vw, 1.55rem); line-height: 1.8; }
.typing-text .ok { color: #fff; }
.typing-text .bad { color: #ffb0b7; text-decoration: underline; }
.typing-wrap input { background: rgba(255,255,255,.96); color: #17213b; border-color: transparent; }
.reaction-pad { width: 100%; height: 100%; display: grid; place-items: center; padding: 20px; font-size: clamp(2rem, 6vw, 4rem); font-weight: 850; text-align: center; }
.reaction-pad.wait { background: rgba(241,105,120,.4); }
.reaction-pad.go { background: rgba(74,210,139,.46); }
.dino-canvas { width: 100%; height: 100%; }
.memory-grid, .sequence-grid { width: min(78vw, 420px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.memory-cell, .sequence-grid button { aspect-ratio: 1; border: 1px solid rgba(255,255,255,.23); border-radius: 11px; background: rgba(10, 20, 50, .24); }
.memory-cell.active, .memory-cell.selected, .sequence-grid button.active { background: #fff; }
.number-memory-box { padding: 28px; border-radius: 16px; background: rgba(10,20,50,.25); font-size: clamp(2.4rem, 8vw, 5rem); font-weight: 850; letter-spacing: .08em; }
.choice-box { display: grid; gap: 18px; justify-items: center; }
.choice-box > strong { font-size: 2.4rem; }
.color-buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.color-buttons button { min-width: 90px; min-height: 46px; border: 2px solid rgba(255,255,255,.35); border-radius: 10px; cursor: pointer; }
.maze-board { position: relative; width: min(88%, 720px); height: 300px; border: 2px solid rgba(255,255,255,.45); border-radius: 12px; background: rgba(10,20,50,.2); }
.maze-start, .maze-finish { position: absolute; z-index: 3; width: 36px; height: 36px; border-radius: 50%; }
.maze-start { background: var(--green); }
.maze-finish { background: var(--amber); }
.maze-wall { position: absolute; background: rgba(255,255,255,.82); border-radius: 5px; }

.section { padding: 72px 0; }
.section-compact { padding-top: 48px; }
.section-tinted { border-block: 1px solid var(--line); background: var(--bg-soft); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.section-heading h2 { margin-bottom: 7px; }
.section-heading p { margin-bottom: 0; }
.section-heading-inline { align-items: center; }
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.category-card { min-height: 92px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.category-card:hover { transform: translateY(-2px); border-color: var(--line-strong); background: var(--surface-raised); }
.category-icon, .test-card-icon { display: grid; place-items: center; border-radius: 12px; }
.category-icon { width: 48px; height: 48px; }
.category-icon--blue, .category-card--blue .category-icon, .test-card-icon--blue { color: #6f9dff; background: rgba(111,157,255,.14); }
.category-icon--violet, .category-card--violet .category-icon, .test-card-icon--violet { color: var(--violet); background: var(--violet-soft); }
.category-icon--amber, .category-card--amber .category-icon, .test-card-icon--amber { color: var(--amber); background: var(--amber-soft); }
.category-icon--green, .category-card--green .category-icon, .test-card-icon--green { color: var(--green); background: var(--green-soft); }
.category-copy { min-width: 0; display: grid; }
.category-copy strong { font-size: .98rem; }
.category-copy small { color: var(--muted); }
.category-arrow { width: 18px; color: var(--muted); }
.test-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.test-card { min-height: 220px; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.test-card:hover { transform: translateY(-2px); border-color: var(--line-strong); background: var(--surface-raised); }
.test-card-top { display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.test-card-icon { width: 36px; height: 36px; }
.test-card-icon .icon { width: 19px; height: 19px; }
.test-card-tag { color: var(--muted); font-size: .72rem; font-weight: 750; text-transform: uppercase; }
.test-card h3 { margin-bottom: 8px; }
.test-card p { flex: 1; margin-bottom: 18px; font-size: .91rem; }
.test-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); }
.daily-card { display: grid; grid-template-columns: 1fr 1.1fr; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); }
.daily-card-content { padding: 34px; }
.daily-card-content p { max-width: 520px; }
.daily-step-list { margin: 0; padding: 24px; list-style: none; display: grid; gap: 8px; background: var(--surface-raised); border-left: 1px solid var(--line); }
.daily-step-list li { display: grid; grid-template-columns: 48px 1fr; gap: 13px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.daily-step-list li > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary-hover); font-weight: 850; font-size: .78rem; }
.daily-step-list strong, .daily-step-list small { display: block; }
.daily-step-list small { color: var(--muted); }
.history-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.history-card { padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.history-card span, .history-card small { display: block; color: var(--muted); }
.history-card strong { display: block; margin: 5px 0; font-size: 1.5rem; }
.info-grid { display: grid; grid-template-columns: 1.4fr .8fr; gap: 22px; align-items: start; }
.guide-list { display: grid; gap: 9px; }
.guide-list > a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.guide-list > a:hover { border-color: var(--line-strong); background: var(--surface-raised); }
.guide-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary-hover); }
.guide-list p { margin: 4px 0 0; font-size: .86rem; }
.faq-panel { padding: 24px; border: 1px solid var(--line); border-radius: 17px; background: var(--surface); }
details > summary { cursor: pointer; }
.faq-panel details, .faq-section details { border-top: 1px solid var(--line); }
.faq-panel summary, .faq-section summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; font-weight: 720; list-style: none; }
.faq-panel summary::-webkit-details-marker, .faq-section summary::-webkit-details-marker { display: none; }
.faq-panel details[open] summary .icon, .faq-section details[open] summary .icon { transform: rotate(45deg); }
.faq-panel details p, .faq-section details p { padding-bottom: 14px; margin: 0; }
.method-strip { padding: 34px 0; border-top: 1px solid var(--line); background: var(--surface); }
.method-strip-grid { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; }
.method-icon { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; color: var(--green); background: var(--green-soft); }
.method-strip h2 { margin-bottom: 6px; font-size: 1.35rem; }
.method-strip p { margin: 0; }

.page-top { padding: 45px 0 24px; }
.compact-page-top { padding-bottom: 36px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.page-title-row { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.page-title-row h1 { margin-bottom: 10px; }
.page-title-row p { max-width: 700px; margin-bottom: 0; }
.catalog-count { min-width: 110px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: center; }
.catalog-count strong, .catalog-count span { display: block; }
.catalog-count strong { font-size: 1.8rem; }
.catalog-count span { color: var(--muted); font-size: .75rem; }
.catalog-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.search-field { min-width: min(100%, 360px); display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--muted); }
.search-field input { min-height: 44px; padding: 0; border: 0; background: transparent; }
.category-filter { display: flex; align-items: center; gap: 6px; overflow-x: auto; }
.category-filter button { min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text-soft); cursor: pointer; white-space: nowrap; }
.category-filter button:hover, .category-filter button.is-active { color: #fff; border-color: var(--primary); background: var(--primary); }
.catalog-section { padding-top: 52px; }
.category-heading-main { display: flex; align-items: center; gap: 13px; }
.category-heading h2, .category-heading p { margin: 0; }
.category-heading p { color: var(--muted); }
.mode-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 16px; }
.mode-chips small { padding: 4px 7px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); font-size: .68rem; }
.catalog-empty { padding: 70px 16px; text-align: center; }
.catalog-empty > span { width: 64px; height: 64px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 18px; background: var(--surface); color: var(--muted); }

.breadcrumbs { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; color: var(--muted); font-size: .82rem; }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs a[aria-current="page"] { color: var(--text-soft); }
.game-page-title { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; }
.game-page-title h1 { margin-bottom: 10px; }
.game-page-title p { max-width: 760px; margin-bottom: 0; }
.metric-chip { min-width: 180px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-align: right; }
.metric-chip small, .metric-chip strong { display: block; }
.metric-chip small { color: var(--muted); font-size: .67rem; text-transform: uppercase; }
.game-main-section { padding: 18px 0 58px; }
.game-shell { width: min(calc(100% - 32px), 1080px); }
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 26px; align-items: start; }
.content-article { display: grid; gap: 0; }
.content-article > section { display: grid; grid-template-columns: 54px 1fr; gap: 15px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.content-number { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: var(--surface); color: var(--muted); font-size: .72rem; font-weight: 800; }
.prose h2 { margin-top: 0; }
.prose p, .prose li { color: var(--text-soft); }
.prose a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { padding-left: 20px; }
.prose .lead { color: var(--text); font-size: 1.2rem; line-height: 1.7; }
.updated-line { color: var(--muted) !important; font-size: .83rem; }
.content-sidebar, .article-aside { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 13px; }
.sidebar-card { padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.sidebar-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.sidebar-card-head small, .sidebar-card-head strong { display: block; }
.sidebar-card-head small { color: var(--muted); font-size: .7rem; }
.sidebar-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); color: var(--primary-hover); }
.server-history { display: grid; }
.server-history > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.server-history > div span { display: flex; align-items: baseline; gap: 6px; }
.server-history small, .server-history time { color: var(--muted); font-size: .75rem; }
.server-history p { margin: 0; font-size: .86rem; }
.related-list { display: grid; }
.related-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); color: var(--text-soft); }
.related-list a:hover { color: var(--text); }

.filter-panel { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 11px; align-items: end; margin-bottom: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.filter-panel-title { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.filter-panel label, .stack-form label { display: grid; gap: 6px; color: var(--muted); font-size: .78rem; font-weight: 720; }
input, select, textarea { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-raised); color: var(--text); }
input::placeholder, textarea::placeholder { color: var(--muted); }
textarea { min-height: 110px; resize: vertical; }
.leaderboard-card { overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.leaderboard-card-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 17px; border-bottom: 1px solid var(--line); background: var(--surface-raised); }
.leaderboard-card-head > div { display: flex; align-items: baseline; gap: 9px; }
.leaderboard-card-head span, .leaderboard-card-head small { color: var(--muted); }
.verified-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 9px; background: var(--green-soft); color: var(--green); font-size: .78rem; font-weight: 760; }
.table-wrap { overflow: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.data-table th, .data-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.data-table th { color: var(--muted); font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.data-table tbody tr:hover { background: var(--surface-raised); }
.rank-number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-raised); font-weight: 800; }
.rank-number--1 { color: #4b3904; background: #f4c84f; }
.rank-number--2 { color: #354055; background: #c9d1de; }
.rank-number--3 { color: #4d2d18; background: #d89a6b; }
.player-cell { display: flex; align-items: center; gap: 10px; }
.mini-avatar { width: 34px; height: 34px; }
.player-cell span:last-child { display: grid; }
.player-cell small { color: var(--muted); }
.score-value { font-size: 1.12rem; }
.status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 8px; background: var(--surface-raised); color: var(--text-soft); font-size: .72rem; font-weight: 760; }
.status-ok, .status.ok { background: var(--green-soft); color: var(--green); }
.status-warn, .status.warn { background: var(--amber-soft); color: var(--amber); }
.status-error, .status.error { background: var(--red-soft); color: var(--red); }
.empty-state { padding: 44px !important; color: var(--muted); text-align: center !important; }
.empty-state > span { display: block; width: max-content; margin: 0 auto 10px; }
.privacy-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 13px; color: var(--muted); font-size: .82rem; }

.daily-page-grid { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; }
.daily-page-grid p { max-width: 700px; }
.daily-score-card { min-width: 180px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); text-align: center; }
.daily-score-card small, .daily-score-card span { display: block; color: var(--muted); }
.daily-score-card strong { display: block; margin: 3px 0; font-size: 2.4rem; }
.daily-stage-list { display: grid; gap: 10px; }
.daily-stage { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px; padding: 17px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.daily-stage-index { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); color: var(--primary-hover); font-weight: 850; }
.daily-stage-main h2 { margin: 2px 0 6px; font-size: 1.25rem; }
.daily-stage-main p { margin-bottom: 6px; font-size: .87rem; }
.stage-category { color: var(--muted); font-size: .7rem; font-weight: 750; text-transform: uppercase; }
.daily-stage-result { color: var(--muted); font-size: .78rem; }
.daily-stage-mode { min-width: 80px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; text-align: center; }
.daily-stage-mode small, .daily-stage-mode strong { display: block; }
.daily-stage-mode small { color: var(--muted); font-size: .66rem; }
.daily-actions { display: flex; gap: 9px; margin-top: 16px; }

.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.article-card { min-height: 260px; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.article-card--featured { grid-column: span 2; background: linear-gradient(145deg, var(--surface), var(--surface-raised)); }
.article-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 26px; color: var(--muted); font-size: .72rem; }
.article-card-meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-card h2 { font-size: 1.42rem; }
.article-card p { flex: 1; }
.article-page-head { padding: 55px 0 38px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.article-page-head h1 { font-size: clamp(2.45rem, 6vw, 4.4rem); }
.article-deck { font-size: 1.15rem; }
.article-meta { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.article-meta span:last-child { display: grid; }
.article-meta small { color: var(--muted); }
.article-layout { display: grid; grid-template-columns: minmax(0, 780px) 280px; justify-content: space-between; gap: 34px; }
.article-section { margin: 36px 0; scroll-margin-top: 90px; }
.article-aside nav { display: grid; gap: 8px; }
.article-aside nav a { padding: 8px 0; border-top: 1px solid var(--line); color: var(--text-soft); font-size: .85rem; }
.article-sources { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line); }
.static-prose { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }

.auth-section { min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; padding: 48px 16px; }
.auth-card { width: min(100%, 460px); padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.auth-card h1 { margin-bottom: 8px; font-size: 2rem; }
.auth-brand { margin-bottom: 24px; }
.stack-form { display: grid; gap: 14px; }
.stack-form small { color: var(--muted); font-weight: 500; }
.checkbox-label { display: flex !important; flex-direction: row !important; align-items: flex-start; gap: 9px !important; }
.checkbox-label input { width: auto; min-height: auto; margin-top: 4px; }
.auth-links { display: grid; gap: 8px; margin-top: 18px; color: var(--muted); }
.auth-links a { color: var(--cyan); }
.alert { margin: 14px 0; padding: 11px 13px; border-radius: 10px; }
.alert.success { background: var(--green-soft); color: var(--green); }
.alert.error { background: var(--red-soft); color: var(--red); }

.profile-head { display: flex; align-items: center; gap: 20px; }
.avatar-large { width: 92px; height: 92px; display: grid; place-items: center; overflow: hidden; border-radius: 24px; background: var(--primary-soft); color: var(--primary-hover); font-size: 2.4rem; font-weight: 850; }
.avatar-large img { width: 100%; height: 100%; object-fit: cover; }
.profile-tabs { position: sticky; top: var(--header-h); z-index: 20; display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; background: var(--bg); }
.profile-tabs a { padding: 8px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--text-soft); white-space: nowrap; }
.profile-panel { padding: 35px 0; border-bottom: 1px solid var(--line); }
.stat-card-grid, .achievement-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat-card, .achievement-card { padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); }
.stat-card span, .stat-card small { display: block; color: var(--muted); }
.stat-card strong { display: block; margin: 5px 0; font-size: 1.5rem; }
.achievement-card > span { color: var(--amber); }
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.panel-card { padding: 19px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.session-list { display: grid; gap: 8px; }
.session-list > div { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.danger-text { color: var(--red); }

.ad-slot { position: relative; min-height: var(--ad-h, 120px); display: grid; place-items: center; margin: 34px 0; border: 1px dashed var(--line-strong); border-radius: 13px; background: var(--surface); }
.ad-label { position: absolute; left: 9px; top: 6px; color: var(--muted); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; }

.site-footer { padding: 55px 0 24px; border-top: 1px solid var(--line); background: #080e1c; color: #f2f5fb; }
html[data-theme="light"] .site-footer { background: #11192a; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px; }
.footer-grid > div:not(.footer-brand-column) { display: grid; align-content: start; gap: 7px; }
.footer-grid h2 { margin: 0 0 9px; color: #8794ad; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-grid a, .footer-grid button, .footer-grid p { color: #aeb8ca; text-align: left; }
.footer-grid a:hover, .footer-grid button:hover { color: #fff; }
.footer-brand-column p { max-width: 310px; margin: 17px 0; }
.footer-trust { display: flex; gap: 8px; flex-wrap: wrap; }
.footer-trust span { display: inline-flex; align-items: center; gap: 5px; color: #8692a9; font-size: .75rem; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 38px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.09); color: #77839a; font-size: .78rem; }

.cookie-banner { position: fixed; z-index: 120; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(calc(100% - 24px), 1040px); display: grid; grid-template-columns: 1fr auto; gap: 16px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-lg); }
.cookie-copy { display: flex; align-items: flex-start; gap: 11px; }
.cookie-copy p { margin: 3px 0 0; font-size: .84rem; }
.cookie-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--green-soft); color: var(--green); }
.cookie-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.cookie-panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 9px; align-items: center; padding-top: 13px; border-top: 1px solid var(--line); }
.cookie-panel label { display: flex; align-items: center; gap: 7px; color: var(--text-soft); font-size: .82rem; }
.cookie-panel input { width: auto; min-height: auto; }

.error-page { min-height: 65vh; display: grid; place-items: center; padding: 70px 16px; text-align: center; }
.error-code { color: var(--primary); font-size: 7rem; font-weight: 900; line-height: 1; }

@media (max-width: 1040px) {
  .main-nav { position: fixed; left: 16px; right: 16px; top: calc(var(--header-h) + 8px); display: none; flex-direction: column; align-items: stretch; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg); }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 11px; }
  .menu-toggle { display: grid; margin-left: auto; }
  .header-actions { margin-left: 0; }
  .home-intro { grid-template-columns: 1fr; gap: 18px; }
  .trust-list { grid-template-columns: repeat(3, auto); min-width: 0; }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .result-grid { grid-template-columns: repeat(3, 1fr); }
  .content-layout, .article-layout { grid-template-columns: 1fr; }
  .content-sidebar, .article-aside { position: static; grid-template-columns: repeat(2, 1fr); }
  .article-aside { display: none; }
  .filter-panel { grid-template-columns: repeat(3, 1fr); }
  .filter-panel .button { grid-column: 1 / -1; }
  .daily-stage { grid-template-columns: auto 1fr auto; }
  .daily-stage .button { grid-column: 2 / -1; }
  .stat-card-grid, .achievement-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  :root { --header-h: 62px; }
  .shell, .prose-shell, .game-shell { width: min(calc(100% - 22px), var(--shell)); }
  .site-header { height: var(--header-h); }
  .header-row { gap: 9px; }
  .brand-mark { width: 33px; height: 33px; }
  .brand-text strong { font-size: .85rem; }
  .brand-text small { display: none; }
  .profile-name, .keyboard-hint, .sign-in-button { display: none; }
  .home-hero { padding-top: 28px; }
  .home-intro h1 { font-size: 2.45rem; }
  .trust-list { display: flex; overflow-x: auto; padding-bottom: 3px; }
  .trust-list span { min-width: max-content; }
  .game-widget { border-radius: 18px; }
  .game-widget-head { padding: 11px 12px; }
  .game-identity small { max-width: 210px; }
  .game-toolbar { align-items: stretch; flex-direction: column; padding: 11px 12px; }
  .mode-switcher { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; }
  .mode-button { min-width: 48px; }
  .custom-mode { min-width: 118px; }
  .live-stats { grid-template-columns: repeat(3, 1fr); }
  .live-stats > span { min-width: 0; }
  .game-stage { min-height: 360px; margin: 10px; }
  .stage-intro { padding: 28px 16px; }
  .result-card { padding: 16px; }
  .result-heading { align-items: flex-start; }
  .result-heading h2 { font-size: 2.1rem; }
  .result-level { min-width: 105px; }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
  .result-actions .button { flex: 1 1 100%; }
  .section { padding: 52px 0; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .category-grid, .test-grid, .article-grid, .history-grid, .settings-grid { grid-template-columns: 1fr; }
  .test-card { min-height: auto; }
  .daily-card { grid-template-columns: 1fr; }
  .daily-step-list { border-left: 0; border-top: 1px solid var(--line); }
  .info-grid { grid-template-columns: 1fr; }
  .method-strip-grid { grid-template-columns: auto 1fr; }
  .method-strip-grid .button { grid-column: 1 / -1; }
  .page-title-row, .game-page-title, .daily-page-grid { align-items: flex-start; grid-template-columns: 1fr; display: grid; }
  .metric-chip, .catalog-count, .daily-score-card { min-width: 0; width: max-content; text-align: left; }
  .catalog-tools { align-items: stretch; flex-direction: column; }
  .search-field { min-width: 100%; }
  .category-filter { padding-bottom: 3px; }
  .content-article > section { grid-template-columns: 1fr; }
  .content-number { width: max-content; min-width: 42px; padding: 0 10px; }
  .content-sidebar { grid-template-columns: 1fr; }
  .filter-panel { grid-template-columns: 1fr; }
  .filter-panel .button { grid-column: auto; }
  .daily-stage { grid-template-columns: auto 1fr; }
  .daily-stage-mode { grid-column: 1; grid-row: 2; }
  .daily-stage .button { grid-column: 2; }
  .article-card--featured { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .footer-brand-column { grid-column: 1 / -1; }
  .cookie-banner { bottom: 8px; grid-template-columns: 1fr; }
  .cookie-actions { align-items: stretch; }
  .cookie-actions .button { flex: 1; }
  .cookie-panel { grid-template-columns: 1fr; }
  .session-list > div { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .brand-text { display: none; }
  .language-menu > summary { min-width: 46px; }
  .category-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand-column { grid-column: auto; }
  .daily-stage { gap: 11px; padding: 13px; }
  .daily-stage-index { width: 42px; height: 42px; }
  .daily-stage .button { grid-column: 1 / -1; }
  .daily-stage-mode { grid-column: 1 / -1; grid-row: auto; width: 100%; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Profile */
.profile-cover{padding:54px 0 30px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(109,124,255,.09),transparent)}
.profile-cover-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}.profile-identity{display:flex;align-items:center;gap:20px}.profile-identity h1{margin:4px 0 3px;font-size:clamp(2.2rem,4vw,3.5rem)}.profile-identity p{margin:0}.avatar-large{width:92px;height:92px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line-strong);border-radius:26px;background:linear-gradient(145deg,var(--primary-soft),var(--cyan-soft));color:var(--primary-hover);font-size:2rem;font-weight:900;box-shadow:var(--shadow-sm)}.avatar-large img{width:100%;height:100%;object-fit:cover}.profile-cover-actions{display:flex;gap:10px}.profile-main{padding-top:0}.profile-tabs{top:var(--header-h);gap:8px;padding:13px 0;border-bottom:1px solid var(--line);background:rgba(11,18,34,.94);backdrop-filter:blur(15px)}html[data-theme=light] .profile-tabs{background:rgba(245,247,251,.94)}.profile-tabs a{display:inline-flex;align-items:center;gap:7px}.profile-tabs a:hover{border-color:var(--line-strong);background:var(--surface-hover);color:var(--text)}.profile-panel{padding:48px 0}.profile-section-heading{align-items:flex-end}.profile-period-form select{min-height:42px;padding:9px 34px 9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text)}.profile-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.profile-stat-card{position:relative;min-height:165px;display:flex;flex-direction:column;transition:transform .16s ease,border-color .16s ease,background .16s ease}.profile-stat-card:hover{transform:translateY(-2px);border-color:var(--line-strong);background:var(--surface-raised)}.profile-stat-icon{width:38px;height:38px;display:grid!important;place-items:center;margin-bottom:auto;border-radius:11px;background:var(--primary-soft);color:var(--primary-hover)}.profile-stat-icon .icon{width:19px;height:19px}.profile-stat-card>span:nth-child(2){margin-top:16px}.profile-empty-card{grid-column:1/-1;min-height:190px;display:grid;place-items:center;align-content:center;gap:12px;padding:24px;border:1px dashed var(--line-strong);border-radius:var(--radius);background:var(--surface);text-align:center}.profile-empty-card>.icon{width:28px;height:28px;color:var(--primary-hover)}.profile-history-table{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}.profile-history-table .data-table{min-width:780px}.profile-history-table td,.profile-history-table th{padding:14px}.mode-badge{display:inline-flex;padding:4px 8px;border-radius:999px;background:var(--primary-soft);color:var(--primary-hover);font-size:.75rem;font-weight:750}.profile-achievement-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.profile-achievement-grid .achievement-card{min-height:180px;display:flex;flex-direction:column}.achievement-icon{width:40px;height:40px;display:grid!important;place-items:center;margin-bottom:15px;border-radius:12px;background:var(--amber-soft);color:var(--amber)}.achievement-icon .icon{width:20px;height:20px}.profile-achievement-grid p{font-size:.88rem}.profile-achievement-grid small{margin-top:auto;color:var(--muted)}.profile-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-setting-card{position:relative;align-content:start}.profile-card-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--primary-soft);color:var(--primary-hover)}.profile-setting-card h3{margin:2px 0 8px}.profile-setting-card .button{width:100%}.profile-setting-card form .button{width:100%}.profile-danger-details{margin-top:5px;border-top:1px solid var(--line);padding-top:13px}.profile-danger-details summary{display:flex;align-items:center;gap:7px;cursor:pointer}.profile-danger-details form{margin-top:13px}.profile-sessions-head{display:flex;align-items:center;justify-content:space-between;margin:34px 0 12px}.profile-sessions-head h3{margin:0}.profile-sessions-head span{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:var(--surface);color:var(--muted);font-weight:750}.profile-session-list>div{grid-template-columns:1fr 1fr auto;align-items:center}.profile-session-list span{display:grid}.profile-session-list small{color:var(--muted)}.profile-session-list .status{display:inline-flex}
@media(max-width:900px){.profile-stat-grid,.profile-achievement-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-settings-grid{grid-template-columns:1fr}.profile-cover-inner{align-items:flex-start}.profile-cover-actions{display:none}}
@media(max-width:600px){.profile-cover{padding-top:34px}.profile-identity{align-items:flex-start;gap:14px}.avatar-large{width:68px;height:68px;border-radius:19px;font-size:1.45rem}.profile-identity h1{font-size:2rem}.profile-stat-grid,.profile-achievement-grid{grid-template-columns:1fr}.profile-panel{padding:36px 0}.profile-section-heading{align-items:flex-start}.profile-session-list>div{grid-template-columns:1fr}.profile-tabs{margin-inline:-16px;padding-inline:16px}}

/* Refined game-first landing: compact, controlled color, no decorative billboard */
.home-hero{padding:34px 0 26px}.home-intro{margin-bottom:20px}.home-intro h1{font-size:clamp(2.35rem,5vw,3.65rem);max-width:820px}.home-intro p{font-size:1rem}.game-widget--home{box-shadow:0 18px 48px rgba(0,0,0,.2)}
.game-stage{min-height:340px;border-color:#33435f;background:radial-gradient(circle at 50% 35%,rgba(109,124,255,.18),transparent 38%),linear-gradient(145deg,#121d34,#172846 62%,#163a45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.game-stage::before{background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent)}
.stage-intro .stage-icon{background:rgba(109,124,255,.12);border-color:rgba(142,154,255,.28);color:#a9b1ff}.stage-intro>strong{font-size:clamp(2rem,4vw,3rem)}.stage-intro .button{background:linear-gradient(135deg,#7482ff,#5d6ff1);color:#fff;box-shadow:0 12px 28px rgba(83,100,236,.27)}.stage-intro .button:hover{background:linear-gradient(135deg,#8491ff,#6879f6)}
@media(max-width:650px){.home-intro h1{font-size:2.3rem}.game-stage{min-height:320px}}