: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: 44px; height: 44px; 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: 44px; 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: 44px; height: 44px; 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-summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-raised); }
.result-summary > div { display: grid; gap: 2px; }
.result-summary span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .76rem; font-weight: 780; text-transform: uppercase; }
.result-summary strong { color: var(--text); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.result-summary strong small { color: var(--muted); font-size: .78rem; }
body.has-result-dialog { overflow: hidden; }
.result-dialog { width: min(980px, calc(100% - 24px)); max-width: none; max-height: 94dvh; padding: 0; border: 0; border-radius: var(--radius-lg); background: transparent; color: var(--text); overflow: visible; opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .16s ease, transform .16s ease; }
.result-dialog.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.result-dialog::backdrop { background: rgba(2, 7, 18, .78); backdrop-filter: blur(7px); }
.result-dialog-shell { position: relative; max-height: 94dvh; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: 0 34px 100px rgba(0,0,0,.48); scrollbar-gutter: stable; }
.result-close { position: sticky; z-index: 5; top: 14px; float: right; margin: 14px 14px -54px 0; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(8px); }
.result-card { position: relative; overflow: hidden; padding: clamp(22px, 4vw, 38px); background: radial-gradient(circle at 8% 0, rgba(109,124,255,.14), transparent 36%), var(--surface-raised); }
.result-celebration { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: .7; }
.result-celebration i { position: absolute; width: 7px; height: 18px; border-radius: 3px; background: var(--amber); transform: rotate(22deg); animation: result-confetti 1.2s ease-out both; }
.result-celebration i:nth-child(1){left:8%;top:6%;background:var(--cyan);animation-delay:.05s}.result-celebration i:nth-child(2){left:24%;top:2%;background:var(--violet);animation-delay:.14s}.result-celebration i:nth-child(3){left:46%;top:7%;animation-delay:.02s}.result-celebration i:nth-child(4){right:34%;top:3%;background:var(--green);animation-delay:.18s}.result-celebration i:nth-child(5){right:17%;top:8%;background:var(--red);animation-delay:.09s}.result-celebration i:nth-child(6){right:6%;top:2%;background:var(--cyan);animation-delay:.22s}
@keyframes result-confetti { from { opacity: 0; transform: translateY(-28px) rotate(0); } 45% { opacity: 1; } to { opacity: .12; transform: translateY(120px) rotate(220deg); } }
.result-hero { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 22px; padding-bottom: 22px; }
.result-score-block h2 { margin: 0; font-size: clamp(3.15rem, 8vw, 5.4rem); letter-spacing: -.065em; line-height: .92; font-variant-numeric: tabular-nums; }
.result-score-block h2 small { color: var(--muted); font-size: clamp(.92rem, 2vw, 1.2rem); letter-spacing: 0; }
.result-record-row { min-height: 28px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 13px; }
.result-record-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: .76rem; font-weight: 820; }
.result-record-badge .icon { width: 15px; height: 15px; }
.result-comparison { color: var(--muted); font-size: .86rem; }
.result-percentile-ring { --percentile: 0; width: 126px; aspect-ratio: 1; display: grid; place-items: center; padding: 9px; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--percentile) * 1%), var(--surface-strong) 0); transition: background .45s ease; box-shadow: inset 0 0 0 1px var(--line); }
.result-percentile-ring > div { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; border-radius: 50%; background: var(--surface); text-align: center; }
.result-percentile-ring strong { font-size: 1.55rem; line-height: 1; font-variant-numeric: tabular-nums; }
.result-percentile-ring span { margin-top: 6px; color: var(--muted); font-size: .62rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.result-level { min-width: 132px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); text-align: right; }
.result-level span { display: block; color: var(--muted); font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.result-level strong { font-size: 1.08rem; }
.result-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
.result-grid > div { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.result-grid span { display: block; margin-bottom: 5px; overflow: hidden; color: var(--muted); font-size: .65rem; font-weight: 780; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.result-grid strong { font-size: 1.16rem; font-variant-numeric: tabular-nums; }
.chart-card { margin-top: 13px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.chart-card-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.chart-card-head span { color: var(--text); font-size: .82rem; font-weight: 780; }
.chart-card-head small { color: var(--muted); font-size: .72rem; }
.result-chart-wrap { position: relative; margin-top: 6px; }
.result-chart { width: 100%; height: 160px; touch-action: none; }
.result-chart-tooltip { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 10px)); padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-strong); color: var(--text); box-shadow: var(--shadow-sm); font-size: .72rem; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
.result-status-row { display: grid; gap: 8px; margin-top: 12px; }
.result-note { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--text-soft); background: var(--surface); font-size: .86rem; }
.result-note.is-saving { color: var(--muted); }
.result-note.is-verified { border-color: color-mix(in srgb, var(--green) 45%, var(--line)); background: var(--green-soft); color: var(--green); }
.result-note.is-review { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); background: var(--amber-soft); color: var(--amber); }
.result-note.is-local, .result-note.is-saved { color: var(--text-soft); }
.achievement-list { display: flex; gap: 7px; flex-wrap: wrap; }
.achievement-list:empty { display: none; }
.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; }
.result-share-panel { margin-top: 18px; padding: 18px; border: 1px solid var(--line-strong); border-radius: 15px; background: var(--surface); animation: result-panel-in .18s ease-out both; }
@keyframes result-panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.result-share-copy h3 { margin-bottom: 6px; }
.result-share-copy p { max-width: 720px; margin-bottom: 14px; font-size: .9rem; }
.result-share-link { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.result-share-link input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); color: var(--text-soft); }
.result-share-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.share-network, .share-card-link { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); color: var(--text-soft); font-size: .82rem; font-weight: 760; cursor: pointer; }
.share-network:hover, .share-card-link:hover { border-color: var(--line-strong); background: var(--surface-hover); color: var(--text); }
.share-network:disabled { opacity: .45; cursor: not-allowed; }
.result-share-status { min-height: 20px; margin-top: 9px; color: var(--muted); font-size: .78rem; }

/* 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-dialog { width: calc(100% - 12px); max-height: 97dvh; }
  .result-dialog-shell { max-height: 97dvh; border-radius: 18px; }
  .result-card { padding: 18px 15px 16px; }
  .result-close { top: 9px; margin: 9px 9px -48px 0; }
  .result-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 14px; }
  .result-score-block h2 { font-size: clamp(2.8rem, 16vw, 4.35rem); }
  .result-percentile-ring { width: 104px; }
  .result-level { grid-column: 1 / -1; min-width: 0; display: flex; align-items: center; justify-content: space-between; text-align: left; }
  .result-grid { grid-template-columns: repeat(2, 1fr); }
  .chart-card-head { align-items: flex-start; flex-direction: column; gap: 3px; }
  .result-chart { height: 138px; }
  .result-actions .button { flex: 1 1 100%; }
  .result-share-link { grid-template-columns: 1fr; }
  .result-share-buttons > * { flex: 1 1 calc(50% - 8px); }
  .result-summary { align-items: stretch; flex-direction: column; }
  .result-summary .button { width: 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; }
  .result-percentile-ring { width: 88px; }
  .result-grid > div { padding: 10px; }
  .result-share-buttons > * { flex-basis: 100%; }
}

@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}}

/* 1.3.0: search, social sharing, public profiles and HTML sitemap */
.site-search-dialog {
  width: min(92vw, 680px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.site-search-dialog::backdrop { background: rgba(2, 7, 18, .76); backdrop-filter: blur(5px); }
.site-search-dialog > div { padding: 34px; }
.dialog-close-form { position: absolute; right: 14px; top: 14px; z-index: 1; }
.site-search-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; margin-top: 21px; }
.site-search-form label { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft); }
.site-search-form label:focus-within { border-color: var(--primary); box-shadow: var(--focus); }
.site-search-form input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); }
.search-quick-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.search-quick-links a { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-soft); font-size: .82rem; }
.search-quick-links a:hover { border-color: var(--line-strong); background: var(--surface-raised); color: var(--text); }
.search-page-form { max-width: 760px; }
.search-results { display: grid; gap: 52px; }
.search-results > section { min-width: 0; }
.search-page-links { display: grid; gap: 9px; }
.search-page-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.search-page-links a:hover { border-color: var(--line-strong); background: var(--surface-raised); }
.search-page-links span { display: grid; gap: 3px; }
.search-page-links small { color: var(--muted); }
.site-toast { position: fixed; right: 18px; bottom: 18px; z-index: 150; max-width: min(420px, calc(100vw - 36px)); padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-lg); font-weight: 700; }
.site-toast.is-success { border-color: rgba(74,210,139,.45); }
.site-toast.is-error { border-color: rgba(241,105,120,.55); }

.share-shell { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 24px; align-items: start; }
.share-result-card, .share-aside { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.share-result-card { position: relative; overflow: hidden; padding: clamp(24px,5vw,52px); }
.share-result-card::before { content:""; position:absolute; inset:0 0 auto; height:170px; pointer-events:none; background: radial-gradient(circle at 85% 20%,rgba(109,124,255,.25),transparent 46%); }
.share-card-top { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 44px; }
.share-brand { display: inline-flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 850; }
.share-brand .brand-mark { width: 31px; height: 31px; border-radius: 9px; }
.share-score { display: flex; align-items: baseline; gap: 12px; margin: 28px 0; }
.share-score strong { font-size: clamp(4rem,10vw,7.2rem); line-height: .88; letter-spacing: -.07em; }
.share-score span { color: var(--amber); font-size: 1.45rem; font-weight: 850; text-transform: uppercase; }
.share-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 0 0 24px; }
.share-metrics > div { padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); }
.share-metrics dt { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.share-metrics dd { margin: 5px 0 0; font-weight: 800; }
.share-aside { position: sticky; top: calc(var(--header-h) + 18px); padding: 28px; }
.share-aside .check-list { display: grid; gap: 10px; padding: 0; list-style: none; }
.share-aside .check-list li { position: relative; padding-left: 25px; color: var(--text-soft); }
.share-aside .check-list li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:900; }

.public-profile-hero { padding: 48px 0 24px; border-bottom: 1px solid var(--line); }
.public-profile-card { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.public-profile-card .profile-identity { min-width: 0; }
.public-profile-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.public-profile-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.public-result-card { min-height: 160px; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.public-result-card small { color: var(--muted); }
.public-result-card strong { margin-top: auto; font-size: 2rem; letter-spacing: -.04em; }
.player-profile-link:hover strong { color: var(--primary-hover); }
.mini-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.sitemap-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.sitemap-card { padding: 21px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.sitemap-card h2 { margin-bottom: 14px; font-size: 1.2rem; }
.sitemap-card ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sitemap-card a { color: var(--text-soft); }
.sitemap-card a:hover { color: var(--primary-hover); }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.footer-social a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--text-soft); }
.footer-social a:hover { background: var(--surface-raised); color: var(--text); }

@media (max-width: 900px) {
  .share-shell { grid-template-columns: 1fr; }
  .share-aside { position: static; }
  .share-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .public-profile-grid, .sitemap-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 620px) {
  .site-search-dialog > div { padding: 26px 18px; }
  .site-search-form { grid-template-columns: 1fr; }
  .share-card-top, .public-profile-card { align-items: flex-start; flex-direction: column; }
  .share-score { align-items: flex-start; flex-direction: column; }
  .share-metrics, .public-profile-grid, .sitemap-grid { grid-template-columns: 1fr; }
  .site-toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}
.profile-public-layout { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:24px; align-items:start; }
.public-profile-sidebar { position:sticky; top:calc(var(--header-h) + 18px); }
.public-achievement-list { display:grid; gap:8px; margin-top:16px; }
.public-achievement-list>div { display:flex; align-items:center; gap:9px; padding:9px 0; border-top:1px solid var(--line); color:var(--text-soft); }
@media(max-width:900px){.profile-public-layout{grid-template-columns:1fr}.public-profile-sidebar{position:static}}

/* 1.3.0: explicit social sharing */
.social-share-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.social-share-links a{display:inline-flex;align-items:center;min-height:38px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel-soft);color:var(--muted);font-size:.78rem;font-weight:800;text-decoration:none}
.social-share-links a:hover{border-color:var(--accent);color:var(--text);transform:translateY(-1px)}
.article-meta-row{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.profile-setting-note{margin:0;color:var(--muted);font-size:.8rem;line-height:1.5}.profile-setting-note strong{color:var(--text);overflow-wrap:anywhere}

/* 1.3.0: contact form */
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,520px);gap:42px;align-items:start}.contact-form-card{padding:28px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:var(--shadow)}.contact-form-card>h2{margin:14px 0 8px}.contact-form-card>p{margin:0 0 20px;color:var(--muted);line-height:1.6}.contact-form-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--accent-soft);color:var(--accent)}.contact-form-icon .icon{width:24px;height:24px}.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.contact-copy{padding-top:10px}@media(max-width:900px){.contact-layout{grid-template-columns:1fr}.contact-form-card{order:-1}}

.profile-verification-alert{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.profile-verification-alert>span{display:flex;align-items:center;gap:.6rem;max-width:58rem}.profile-verification-alert form{margin:0}.button-small{min-height:2.35rem;padding:.55rem .85rem;font-size:.9rem}

.public-profile-social-stats{display:flex;gap:1.2rem;margin-top:.8rem;color:var(--muted)}.public-profile-social-stats span{display:flex;align-items:baseline;gap:.35rem}.public-profile-social-stats strong{color:var(--text);font-size:1.05rem}.public-profile-actions form{margin:0}

.daily-share-date{margin:-.35rem 0 1rem;color:var(--muted);font-variant-numeric:tabular-nums}.daily-share-result-card .share-score{margin-top:1rem}

.pagination { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 30px; }
.pagination > :last-child { justify-self: end; }
.pagination > strong { color: var(--muted); font-size: .9rem; text-align: center; }
@media (max-width: 640px) { .pagination { grid-template-columns: 1fr 1fr; } .pagination > strong { grid-column: 1 / -1; grid-row: 1; } }

/* v1.4 game feedback and per-test interactions */
.game-stage {
  --fx-primary: #8b96ff;
  --fx-cyan: #54e6ee;
  --fx-green: #6bf0a8;
  --fx-amber: #ffd66b;
  --fx-red: #ff7a88;
  --fx-violet: #bc92ff;
  contain: layout paint;
  transition: box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}
.game-stage::after {
  opacity: calc(.45 + var(--live-intensity, 0) * .35);
  background: linear-gradient(90deg, var(--primary), var(--cyan), var(--green), var(--amber));
  transform: scaleX(calc(.2 + var(--live-intensity, 0) * .8));
  transform-origin: left;
  transition: transform .16s ease, opacity .16s ease;
}
.game-stage.is-pulsing { animation: game-stage-pulse .4s ease-out; }
.game-stage.is-shaking { animation: game-shake .28s ease-in-out; }
.game-stage.is-shaking-hard { animation: game-shake-hard .36s ease-in-out; }
.game-stage[data-pulse="green"] { --pulse-color: rgba(74,210,139,.42); }
.game-stage[data-pulse="red"] { --pulse-color: rgba(241,105,120,.42); }
.game-stage[data-pulse="amber"] { --pulse-color: rgba(246,189,75,.44); }
.game-stage[data-pulse="cyan"] { --pulse-color: rgba(56,199,213,.42); }
.game-stage[data-pulse="primary"] { --pulse-color: rgba(109,124,255,.42); }

.game-fx-layer { position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; border-radius: inherit; }
.game-ripple, .game-trail, .game-particle, .tracking-spark, .game-miss-mark, .game-float-text, .game-key-pop {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  transform: translate(-50%, -50%);
  color: var(--fx-primary);
}
[data-tone="cyan"] { color: var(--fx-cyan); }
[data-tone="green"] { color: var(--fx-green); }
[data-tone="amber"] { color: var(--fx-amber); }
[data-tone="red"] { color: var(--fx-red); }
[data-tone="violet"] { color: var(--fx-violet); }
.game-ripple {
  width: var(--fx-size, 92px); height: var(--fx-size, 92px);
  border: 3px solid currentColor; border-radius: 50%; opacity: .8;
  box-shadow: 0 0 24px color-mix(in srgb, currentColor 40%, transparent);
  animation: game-ripple .7s cubic-bezier(.16,.84,.38,1) forwards;
}
.game-trail, .tracking-spark {
  width: var(--fx-size, 16px); height: var(--fx-size, 16px); border-radius: 50%;
  background: currentColor; box-shadow: 0 0 18px currentColor;
  animation: game-trail .5s ease-out forwards;
}
.game-particle {
  width: var(--fx-size, 7px); height: var(--fx-size, 7px); border-radius: 2px;
  background: currentColor; box-shadow: 0 0 12px currentColor;
  animation: game-particle .78s cubic-bezier(.12,.65,.2,1) forwards;
}
.game-float-text, .game-miss-mark {
  padding: 4px 9px; border: 1px solid color-mix(in srgb, currentColor 48%, transparent);
  border-radius: 999px; background: rgba(8,15,34,.82); color: currentColor;
  font-size: clamp(.8rem,2vw,1rem); font-weight: 900; letter-spacing: .02em;
  box-shadow: 0 8px 22px rgba(0,0,0,.24), 0 0 20px color-mix(in srgb, currentColor 18%, transparent);
  animation: game-float .82s ease-out forwards;
  white-space: nowrap;
}
.game-miss-mark { animation-name: game-miss; }
.game-key-pop {
  min-width: 54px; padding: 10px 16px; border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  border-bottom-width: 5px; border-radius: 12px; background: rgba(9,18,42,.9); color: currentColor;
  font-weight: 900; text-align: center; box-shadow: 0 18px 32px rgba(0,0,0,.28);
  animation: game-key-pop .48s ease-out forwards;
}

.game-target {
  isolation: isolate;
  transition: filter .12s ease, opacity .12s ease;
  animation: target-spawn .24s cubic-bezier(.17,.89,.32,1.35) both;
}
.game-target::before {
  content: ""; position: absolute; inset: -14px; border: 2px solid rgba(255,255,255,.4); border-radius: 50%;
  animation: target-ring 1.05s linear infinite;
}
.game-target.active-target { background: linear-gradient(135deg,#ff697a,#ec425d); }
.game-target.active-target::after { box-shadow: inset 0 0 0 5px rgba(255,255,255,.42); }
.game-target.decoy { transform: translate(-50%,-50%) scale(.9); }
.game-target.decoy::before { animation-duration: 1.7s; opacity: .35; }
.game-target.is-hit { animation: target-destroy .16s ease-in forwards; pointer-events: none; }
.game-target.is-wrong { animation: target-wrong .28s ease-in-out; filter: saturate(1.5) brightness(.7); }
.game-target.memory-target { border-color: rgba(255,255,255,.8); background: linear-gradient(135deg,#8a76ff,#50c7df); }
.game-target.memory-target::after { background: rgba(255,255,255,.95); }
.game-target.memory-target.is-vanishing { animation: target-vanish .24s ease-in forwards; }
.memory-hit-marker { position:absolute; width:22px; height:22px; border:3px solid var(--fx-green); border-radius:50%; transform:translate(-50%,-50%); animation: marker-pop .5s ease-out both; box-shadow:0 0 22px rgba(74,210,139,.55); }
.disappearing-status, .tracking-hint { position:absolute; z-index:3; top:14px; left:50%; transform:translateX(-50%); padding:7px 12px; border:1px solid rgba(255,255,255,.15); border-radius:999px; background:rgba(6,13,31,.5); color:rgba(255,255,255,.82); font-size:.78rem; font-weight:800; backdrop-filter:blur(8px); }

.tracking-target {
  display:grid; place-items:center; border:3px solid rgba(255,255,255,.92);
  background:conic-gradient(var(--fx-green) calc(var(--tracking-progress,0)*1%), rgba(255,255,255,.18) 0);
  box-shadow:0 0 0 9px rgba(255,255,255,.11),0 18px 34px rgba(0,0,0,.22);
  transition:box-shadow .12s ease,filter .12s ease;
}
.tracking-target::before { content:""; position:absolute; inset:8px; border-radius:50%; background:#fff; }
.tracking-target i { position:relative; z-index:2; width:10px; height:10px; border-radius:50%; background:#15203c; }
.tracking-target.is-tracked { box-shadow:0 0 0 12px rgba(74,210,139,.2),0 0 36px rgba(74,210,139,.58); filter:saturate(1.2); }

.mouse-visual, .key-rate-visual, .keyboard-tester-wrap, .sequence-wrap, .rhythm-stage {
  width:min(92%,760px); height:100%; margin:auto; display:grid; place-content:center; justify-items:center; gap:18px; text-align:center;
}
.mouse-shell { position:relative; width:110px; height:162px; border:3px solid rgba(255,255,255,.75); border-radius:58px 58px 48px 48px; background:rgba(8,16,38,.26); box-shadow:inset 0 0 24px rgba(255,255,255,.08),0 18px 45px rgba(0,0,0,.2); }
.mouse-shell::before { content:""; position:absolute; left:50%; top:0; bottom:86px; width:2px; background:rgba(255,255,255,.45); }
.mouse-shell i:nth-child(1), .mouse-shell i:nth-child(2) { position:absolute; top:0; width:50%; height:72px; border-bottom:2px solid rgba(255,255,255,.38); }
.mouse-shell i:nth-child(1){left:0}.mouse-shell i:nth-child(2){right:0}.mouse-shell i:nth-child(3){position:absolute;left:50%;top:26px;width:13px;height:29px;border:2px solid rgba(255,255,255,.72);border-radius:8px;transform:translateX(-50%)}
.key-board span.tested { background:rgba(56,199,213,.2); border-color:rgba(84,230,238,.65); color:#fff; }
.key-board span.pressed, .key-board span.active { transform:translateY(3px) scale(.96); background:var(--fx-cyan); color:#102039; box-shadow:0 0 20px rgba(84,230,238,.5); }
.keyboard-tester-wrap p { margin:0; max-width:520px; color:rgba(255,255,255,.68); font-size:.85rem; }

.key-rate-visual kbd { min-width:min(78vw,440px); padding:24px 38px; border:1px solid rgba(255,255,255,.42); border-bottom:9px solid rgba(6,12,28,.42); border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(220,228,255,.92)); color:#17213d; font-size:clamp(1.4rem,5vw,3rem); font-weight:900; box-shadow:0 22px 0 rgba(7,13,30,.28),0 34px 56px rgba(0,0,0,.2); transform:translateY(-8px); }
.key-rate-visual kbd.is-pressed { animation:key-cap .22s ease-out; }
.key-rate-visual > span { color:rgba(255,255,255,.75); font-weight:700; }
.key-rate-meter { width:min(72vw,420px); height:9px; border-radius:999px; background:rgba(0,0,0,.22); overflow:hidden; }
.key-rate-meter i { display:block; width:4%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--primary),var(--cyan),var(--amber)); transition:width .12s ease; }

.typing-card { position:relative; overflow:hidden; box-shadow:0 22px 60px rgba(0,0,0,.16); }
.typing-progress { position:absolute; inset:0 0 auto; height:5px; background:rgba(0,0,0,.18); }
.typing-progress i { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--primary),var(--cyan),var(--green)); transition:width .12s ease; }
.typing-text span { position:relative; border-radius:3px; transition:background .08s ease,color .08s ease; }
.typing-text span.current { background:rgba(255,255,255,.18); box-shadow:inset 2px 0 #fff; }
.typing-text span.ok { color:#fff; background:rgba(74,210,139,.08); }
.typing-text span.bad { color:#ffd0d4; background:rgba(241,105,120,.22); text-decoration:none; }
.typing-card textarea { width:100%; min-height:88px; margin-top:16px; padding:13px 14px; border:1px solid rgba(255,255,255,.2); border-radius:12px; background:rgba(255,255,255,.95); color:#17213b; resize:none; outline:none; }
.typing-card textarea:focus { box-shadow:0 0 0 3px rgba(109,124,255,.35); }
.typing-live { display:flex; justify-content:space-between; gap:12px; margin-top:10px; color:rgba(255,255,255,.68); font-size:.78rem; font-weight:800; }

.reaction-pad { position:relative; overflow:hidden; }
.reaction-pad::before, .reaction-pad::after { content:""; position:absolute; left:50%; top:50%; width:180px; height:180px; border:2px solid rgba(255,255,255,.17); border-radius:50%; transform:translate(-50%,-50%); animation:reaction-orbit 2.2s linear infinite; }
.reaction-pad::after { width:300px;height:300px;animation-duration:3.1s;animation-direction:reverse; }
.reaction-pad.wait { background:radial-gradient(circle at 50% 45%,rgba(241,105,120,.23),transparent 42%),rgba(20,31,61,.2); }
.reaction-pad.go { background:radial-gradient(circle at 50% 45%,rgba(74,210,139,.5),transparent 48%),rgba(13,46,47,.25); animation:reaction-go .4s ease-out; }
.reaction-pad.too-soon { background:radial-gradient(circle,rgba(241,105,120,.5),transparent 55%); }
.reaction-pad.result { background:radial-gradient(circle,rgba(109,124,255,.42),transparent 55%); }
.reaction-core { position:relative; z-index:2; display:grid; justify-items:center; gap:12px; }
.reaction-core > strong { font-size:clamp(2.4rem,10vw,6rem); line-height:1; text-shadow:0 14px 35px rgba(0,0,0,.22); }
.reaction-core > small { color:rgba(255,255,255,.72); font-weight:800; }
.reaction-color { width:110px; height:110px; border-radius:50%; background:var(--reaction-color); box-shadow:0 0 0 14px color-mix(in srgb,var(--reaction-color) 20%,transparent),0 0 45px color-mix(in srgb,var(--reaction-color) 58%,transparent); animation:reaction-color-pop .35s cubic-bezier(.17,.89,.32,1.35); }
.reaction-choices { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.reaction-choices button { min-width:62px; min-height:48px; padding:8px 13px; border:1px solid rgba(255,255,255,.3); border-radius:12px; background:color-mix(in srgb,var(--choice-color,#ffffff) 24%,rgba(10,20,50,.72)); color:#fff; font-weight:900; cursor:pointer; box-shadow:0 8px 20px rgba(0,0,0,.15); transition:transform .12s ease,background .12s ease; }
.reaction-choices button:hover { transform:translateY(-2px); background:color-mix(in srgb,var(--choice-color,#ffffff) 38%,rgba(10,20,50,.68)); }

.memory-level, .sequence-level { margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; gap:20px; color:rgba(255,255,255,.78); font-weight:850; }
.memory-level strong { min-width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:rgba(255,255,255,.12); }
.memory-grid { grid-template-columns:repeat(var(--grid,4),1fr); }
.memory-cell, .sequence-grid button { position:relative; overflow:hidden; transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease; }
.memory-cell::after, .sequence-grid button::after { content:""; position:absolute; inset:16%; border-radius:inherit; background:rgba(255,255,255,.88); opacity:0; transform:scale(.4); transition:opacity .16s ease,transform .16s ease; }
.memory-cell.flash, .sequence-grid button.flash { background:rgba(255,255,255,.9); border-color:#fff; transform:scale(1.06); box-shadow:0 0 30px rgba(255,255,255,.42); }
.memory-cell.flash::after, .sequence-grid button.flash::after { opacity:1; transform:scale(1); }
.memory-cell.correct, .sequence-grid button.correct { background:rgba(74,210,139,.48); border-color:var(--fx-green); transform:scale(.94); box-shadow:0 0 24px rgba(74,210,139,.44); }
.memory-cell.wrong, .sequence-grid button.wrong { background:rgba(241,105,120,.55); border-color:var(--fx-red); animation:target-wrong .3s ease-in-out; }
.memory-grid.is-complete .memory-cell { animation:memory-complete .42s ease-out both; animation-delay:var(--delay,0ms); }
.sequence-wrap { width:min(90%,480px); }
.sequence-grid button[data-tone="violet"]{background:rgba(162,119,255,.2)}
.sequence-grid button[data-tone="cyan"]{background:rgba(56,199,213,.2)}
.sequence-grid button[data-tone="green"]{background:rgba(74,210,139,.2)}
.sequence-grid button[data-tone="amber"]{background:rgba(246,189,75,.2)}

.number-memory-box { display:grid; justify-items:center; gap:14px; min-width:min(84vw,520px); }
.number-memory-box small { color:rgba(255,255,255,.66); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }
.number-memory-box strong { display:flex; justify-content:center; flex-wrap:wrap; }
.number-memory-box strong i { font-style:normal; animation:digit-in .35s cubic-bezier(.17,.89,.32,1.35) both; animation-delay:var(--digit-delay,0ms); }
.number-memory-box input { width:min(78vw,420px); padding:15px 18px; border:1px solid rgba(255,255,255,.22); border-radius:14px; background:#fff; color:#17213b; font-size:clamp(1.8rem,7vw,3.4rem); font-weight:900; text-align:center; letter-spacing:.12em; }
.number-countdown { width:min(72vw,420px); height:7px; border-radius:999px; overflow:hidden; background:rgba(0,0,0,.22); }
.number-countdown i { display:block; width:100%; height:100%; background:linear-gradient(90deg,var(--green),var(--amber),var(--red)); transition-property:width; transition-timing-function:linear; }

.rhythm-stage { gap:14px; }
.rhythm-stage > strong { font-size:clamp(1.5rem,5vw,2.6rem); }
.rhythm-stage > span { color:rgba(255,255,255,.7); font-weight:800; }
.rhythm-orb { position:relative; width:150px; height:150px; display:grid; place-items:center; border:2px solid rgba(255,255,255,.35); border-radius:50%; background:radial-gradient(circle,rgba(109,124,255,.44),rgba(56,199,213,.12)); box-shadow:0 0 0 18px rgba(109,124,255,.08),0 22px 50px rgba(0,0,0,.2); }
.rhythm-orb::before, .rhythm-orb::after { content:""; position:absolute; inset:-1px; border:2px solid rgba(255,255,255,.42); border-radius:50%; opacity:0; }
.rhythm-orb i { width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 0 22px #fff; }
.rhythm-orb.beat { animation:rhythm-beat .22s ease-out; }
.rhythm-orb.beat::before { animation:rhythm-ring .5s ease-out; }
.rhythm-orb.beat::after { animation:rhythm-ring .68s .06s ease-out; }
.rhythm-orb.tap-ready { cursor:pointer; border-color:var(--fx-amber); }

.color-match-box { position:relative; text-align:center; overflow:hidden; }
.color-match-box small { display:block; margin-bottom:12px; color:rgba(255,255,255,.7); font-weight:750; }
.color-match-box strong { display:block; font-size:clamp(3rem,12vw,6rem)!important; text-shadow:0 16px 38px rgba(0,0,0,.24); }
.color-match-box.is-entering strong { animation:color-card-in .28s cubic-bezier(.17,.89,.32,1.35); }
.color-match-box.is-correct { box-shadow:inset 0 0 0 3px rgba(74,210,139,.58); }
.color-match-box.is-wrong { box-shadow:inset 0 0 0 3px rgba(241,105,120,.62); }
.color-buttons button { transition:transform .12s ease,filter .12s ease; }
.color-buttons button:active { transform:scale(.95); }

.maze-board { overflow:hidden; cursor:none; touch-action:none; }
.maze-start, .maze-finish { display:grid; place-items:center; border:3px solid rgba(255,255,255,.72); box-shadow:0 0 0 8px rgba(255,255,255,.08),0 10px 22px rgba(0,0,0,.2); }
.maze-start { left:12px; bottom:12px; }
.maze-finish { right:12px; top:12px; }
.maze-start span, .maze-finish span { color:#14213a; font-weight:950; }
.maze-wall { box-shadow:0 0 0 1px rgba(255,255,255,.16),0 8px 16px rgba(0,0,0,.14); transition:background .12s ease,box-shadow .12s ease; }
.maze-wall.is-hit { background:var(--fx-red); box-shadow:0 0 24px rgba(241,105,120,.7); }
.maze-pointer { position:absolute; z-index:8; left:0; top:0; width:16px; height:16px; margin:-8px 0 0 -8px; border:3px solid #fff; border-radius:50%; background:var(--fx-cyan); box-shadow:0 0 18px var(--fx-cyan); pointer-events:none; }
.maze-trail-layer { position:absolute; inset:0; pointer-events:none; }
.maze-trail-layer i { position:absolute; width:8px; height:8px; border-radius:50%; background:rgba(84,230,238,.7); transform:translate(-50%,-50%); animation:maze-trail 1s ease-out forwards; }
.maze-board.is-running { box-shadow:inset 0 0 0 2px rgba(84,230,238,.25); }
.maze-board.is-finished { box-shadow:inset 0 0 0 3px rgba(246,189,75,.55),0 0 35px rgba(246,189,75,.3); }

.result-dialog.is-record .result-dialog-shell { box-shadow:0 34px 100px rgba(0,0,0,.48),0 0 0 2px rgba(246,189,75,.42),0 0 70px rgba(246,189,75,.2); }
.result-dialog.is-record .result-score-block h2 { color:var(--amber); }

@keyframes game-ripple { 0%{transform:translate(-50%,-50%) scale(.15);opacity:.9} 100%{transform:translate(-50%,-50%) scale(1.25);opacity:0} }
@keyframes game-trail { 0%{transform:translate(-50%,-50%) scale(1);opacity:.8}100%{transform:translate(-50%,-50%) scale(.2);opacity:0} }
@keyframes game-particle { 0%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}100%{transform:translate(calc(-50% + var(--fx-dx)),calc(-50% + var(--fx-dy))) scale(.2) rotate(var(--fx-rot));opacity:0} }
@keyframes game-float { 0%{transform:translate(-50%,-20%) scale(.78);opacity:0}20%{opacity:1}100%{transform:translate(-50%,-150%) scale(1.04);opacity:0} }
@keyframes game-miss { 0%{transform:translate(-50%,-50%) scale(.5) rotate(-8deg);opacity:0}30%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(4deg)}100%{transform:translate(-50%,-110%) scale(.85);opacity:0} }
@keyframes game-key-pop { 0%{transform:translate(-50%,-35%) scale(.72);opacity:0}45%{transform:translate(-50%,-55%) scale(1.05);opacity:1}100%{transform:translate(-50%,-92%) scale(.88);opacity:0} }
@keyframes game-stage-pulse { 0%{box-shadow:inset 0 0 0 0 var(--pulse-color),0 0 0 0 var(--pulse-color)}45%{box-shadow:inset 0 0 70px var(--pulse-color),0 0 28px var(--pulse-color)}100%{box-shadow:inset 0 0 0 0 transparent,0 0 0 transparent} }
@keyframes game-shake { 0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}55%{transform:translateX(4px)}75%{transform:translateX(-2px)} }
@keyframes game-shake-hard { 0%,100%{transform:translate(0)}20%{transform:translate(-8px,3px)}40%{transform:translate(7px,-2px)}60%{transform:translate(-5px,-3px)}80%{transform:translate(4px,2px)} }
@keyframes target-spawn { 0%{transform:translate(-50%,-50%) scale(.2) rotate(-18deg);opacity:0}100%{transform:translate(-50%,-50%) scale(1);opacity:1} }
@keyframes target-ring { from{transform:scale(.75);opacity:.65}to{transform:scale(1.3);opacity:0} }
@keyframes target-destroy { to{transform:translate(-50%,-50%) scale(.1) rotate(28deg);opacity:0;filter:blur(3px)} }
@keyframes target-wrong { 0%,100%{transform:translate(-50%,-50%)}30%{transform:translate(calc(-50% - 7px),-50%)}65%{transform:translate(calc(-50% + 7px),-50%)} }
@keyframes target-vanish { to{transform:translate(-50%,-50%) scale(1.5);opacity:0;filter:blur(5px)} }
@keyframes marker-pop { 0%{transform:translate(-50%,-50%) scale(.2);opacity:0}50%{opacity:1}100%{transform:translate(-50%,-50%) scale(1.7);opacity:0} }
@keyframes key-cap { 0%{transform:translateY(-8px)}50%{transform:translateY(9px);border-bottom-width:2px;box-shadow:0 6px 0 rgba(7,13,30,.28)}100%{transform:translateY(-8px)} }
@keyframes reaction-orbit { from{transform:translate(-50%,-50%) rotate(0) scale(.85)}50%{opacity:.45}to{transform:translate(-50%,-50%) rotate(360deg) scale(1.18)} }
@keyframes reaction-go { from{filter:brightness(.7)}to{filter:brightness(1)} }
@keyframes reaction-color-pop { from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1} }
@keyframes memory-complete { 0%{transform:scale(1)}50%{transform:scale(.88);background:rgba(74,210,139,.4)}100%{transform:scale(1)} }
@keyframes digit-in { from{transform:translateY(16px) scale(.5);opacity:0;filter:blur(5px)}to{transform:translateY(0) scale(1);opacity:1;filter:none} }
@keyframes rhythm-beat { 0%{transform:scale(.84)}60%{transform:scale(1.12)}100%{transform:scale(1)} }
@keyframes rhythm-ring { from{transform:scale(.5);opacity:.8}to{transform:scale(1.8);opacity:0} }
@keyframes color-card-in { from{transform:translateY(-18px) scale(.85);opacity:0}to{transform:none;opacity:1} }
@keyframes maze-trail { from{opacity:.75;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.15)} }

@media (max-width: 650px) {
  .game-float-text,.game-miss-mark{font-size:.72rem;padding:3px 7px}
  .reaction-choices button{min-width:54px;min-height:44px;padding:6px 9px;font-size:.76rem}
  .reaction-color{width:82px;height:82px}
  .mouse-shell{width:86px;height:128px}.mouse-shell::before{bottom:68px}.mouse-shell i:nth-child(1),.mouse-shell i:nth-child(2){height:58px}
  .key-rate-visual kbd{padding:18px 24px;border-bottom-width:7px}
  .typing-card{padding:16px}.typing-text{font-size:1rem;line-height:1.7}
  .memory-grid,.sequence-grid{width:min(88vw,380px)}
  .maze-board{width:94%;height:280px}
}

@media (prefers-reduced-motion: reduce) {
  .game-stage,.game-target,.memory-cell,.sequence-grid button,.tracking-target,.color-buttons button{transition:none!important}
  .game-stage.is-pulsing,.game-stage.is-shaking,.game-stage.is-shaking-hard,.game-target,.game-target::before,.reaction-pad::before,.reaction-pad::after,.rhythm-orb,.memory-cell,.sequence-grid button,.number-memory-box strong i{animation:none!important}
  .game-fx-layer{display:none!important}
}
.game-stage[data-game-type="aim"], .game-stage[data-game-type="accuracy"], .game-stage[data-game-type="target-switch"], .game-stage[data-game-type="tracking"], .game-stage[data-game-type="maze"], .game-stage[data-game-type="dino"] { touch-action: none; }

.category-title-link{display:inline-flex;align-items:center;gap:.45rem;color:inherit;text-decoration:none}
.category-title-link:hover{text-decoration:underline;text-underline-offset:.2em}

.article-hero-figure{margin:28px 0 0}.article-hero-image{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line);border-radius:24px;background:var(--panel);box-shadow:var(--shadow)}

/* x-default root: a distinct crawlable language selector, not a duplicate /en/ home. */
.root-language-hero{padding-bottom:2rem}.root-language-intro{max-width:780px;margin-bottom:1.5rem}.root-language-intro h1{margin:.45rem 0 .75rem}.root-language-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.75rem}.root-language-card{display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);text-decoration:none;color:var(--text)}.root-language-card strong{flex:1}.root-language-card span{color:var(--muted);font-size:.82rem}.root-language-card:focus-visible,.root-language-card:hover{border-color:var(--accent);transform:translateY(-1px)}.root-resource-links{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}