* { box-sizing: border-box; }
:root {
  --paper: #f6f1e8;
  --paper-2: #eee7dc;
  --card: #fffaf2;
  --ink: #211b30;
  --muted: #716b78;
  --plum: #251b37;
  --plum-2: #3a2852;
  --coral: #ff654b;
  --purple: #8e72ef;
  --cyan: #55dbe0;
  --lime: #d9f36f;
  --yellow: #ffca65;
  --line: #ded5c9;
  --shadow: 0 18px 48px rgba(45, 30, 49, .12);
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
  --serif: "Songti SC", "Noto Serif SC", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 22px;
}
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); font: 14px/1.65 var(--sans); background-color: var(--paper); background-image: radial-gradient(rgba(37,27,55,.055) .7px, transparent .7px); background-size: 10px 10px; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(85,219,224,.8); outline-offset: 3px; }
::selection { color: var(--plum); background: var(--lime); }
.boot-screen { min-height: 100vh; display: grid; place-items: center; color: var(--muted); font-family: var(--mono); }
.topline { min-height: 30px; display: flex; justify-content: center; align-items: center; padding: 5px 12px; color: #f4e9d4; background: var(--plum); text-align: center; font: 9px var(--mono); letter-spacing: .08em; }
.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(37,27,55,.1); background: rgba(246,241,232,.94); backdrop-filter: blur(14px); }
.header-inner { max-width: 1280px; min-height: 75px; margin: 0 auto; padding: 12px 34px; display: flex; align-items: center; gap: 27px; }
.brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 11px; }
.brand-mark { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: var(--plum); background: var(--lime); box-shadow: 4px 4px 0 var(--coral); font: 23px/1 var(--serif); transform: rotate(-4deg); }
.brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.brand-copy strong { font: 800 19px var(--serif); letter-spacing: .05em; }
.brand-copy small { margin-top: 5px; color: #837986; font: 8px var(--mono); letter-spacing: .14em; }
.desktop-nav { display: flex; align-items: center; gap: 22px; margin-left: 11px; }
.desktop-nav a { padding: 8px 0; color: #5f5668; font-size: 11px; transition: color .15s ease; }
.desktop-nav a:hover, .desktop-nav a.active { color: var(--plum); }
.desktop-nav a.active { border-bottom: 2px solid var(--coral); }
.header-spacer { flex: 1; }
.search-form { width: min(236px, 23vw); height: 39px; display: flex; align-items: center; padding: 3px 4px 3px 13px; border: 1px solid #d8cec4; border-radius: 99px; background: rgba(255,255,255,.62); }
.search-form input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 10px; }
.search-form input::placeholder { color: #9a9095; }
.search-form button { width: 30px; height: 30px; flex: 0 0 auto; border: 0; border-radius: 50%; color: var(--plum); background: var(--coral); cursor: pointer; transition: transform .16s ease, background .16s ease; }
.search-form button:hover { background: var(--lime); transform: rotate(-9deg); }
.menu-toggle { display: none; width: 39px; height: 39px; border: 1px solid #d8cec4; border-radius: 50%; background: transparent; cursor: pointer; }
.mobile-nav { display: none; }
.page-shell { max-width: 1280px; margin: 0 auto; padding: 0 34px 78px; }
.hero { min-height: 495px; position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; margin: 24px 0 52px; border-radius: 28px; color: #fff8ed; background: var(--plum); box-shadow: var(--shadow); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .2; background-image: radial-gradient(circle at 1px 1px, var(--cyan) 1px, transparent 1.4px); background-size: 23px 23px; mask-image: linear-gradient(90deg, #000 0%, transparent 77%); }
.hero::after { content: ''; position: absolute; z-index: -1; width: 270px; height: 270px; left: -110px; bottom: -170px; border: 1px solid rgba(255,101,75,.5); border-radius: 50%; box-shadow: 0 0 0 20px rgba(255,101,75,.04), 0 0 0 42px rgba(255,101,75,.04); }
.hero-copy { position: relative; z-index: 2; max-width: 650px; padding: 62px 0 56px 62px; }
.hero-kicker, .eyebrow { color: #b9afc2; font: 9px var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.hero-kicker b { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 14px var(--coral); }
.hero h1 { margin: 18px 0 15px; font: 800 clamp(43px, 5.2vw, 67px)/1.2 var(--serif); letter-spacing: -.055em; }
.hero h1 em { color: var(--lime); font-style: normal; }
.hero-lede { max-width: 410px; margin: 0; color: #d4cbd8; font-size: 14px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 27px; }
.button { min-height: 44px; display: inline-flex; justify-content: center; align-items: center; gap: 9px; padding: 0 19px; border: 1px solid transparent; border-radius: 99px; font-size: 11px; font-weight: 800; cursor: pointer; transition: transform .16s ease, box-shadow .18s ease, background .18s ease; }
.button:active { transform: scale(.97); }
.button-primary { color: var(--plum); background: var(--lime); box-shadow: 0 8px 18px rgba(217,243,111,.16); }
.button-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(217,243,111,.23); }
.button-ghost { color: #f3eaf0; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); }
.button-ghost:hover { background: rgba(255,255,255,.14); }
.hero-proof { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; color: #c0b4c7; font: 9px var(--mono); }
.hero-proof span::before { content: '✦'; margin-right: 6px; color: var(--cyan); }
.hero-art { min-height: 445px; position: relative; align-self: stretch; overflow: hidden; display: grid; place-items: center; }
.hero-art img { width: 100%; height: 100%; min-height: 445px; object-fit: cover; object-position: 61% center; }
.hero-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--plum) 0%, rgba(37,27,55,.05) 42%, rgba(37,27,55,.12) 100%); pointer-events: none; }
.hero-badge { position: absolute; z-index: 2; right: 26px; bottom: 24px; max-width: 200px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.22); border-radius: 14px; color: #fff8ed; background: rgba(37,27,55,.78); backdrop-filter: blur(10px); }
.hero-badge small { display: block; color: var(--cyan); font: 8px var(--mono); letter-spacing: .12em; }
.hero-badge strong { display: block; margin-top: 3px; font: 700 14px var(--serif); }
.hero-figure { position: absolute; top: 24px; right: 25px; z-index: 2; color: rgba(255,255,255,.58); font: 8px var(--mono); letter-spacing: .13em; writing-mode: vertical-rl; }
.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 13px 22px; margin: -25px 0 47px; padding: 13px 17px; border: 1px solid #ded5c9; border-radius: 14px; color: #62586a; background: rgba(255,250,242,.8); font-size: 10px; }
.trust-strip strong { color: #b44437; }
.trust-strip span::before { content: '•'; margin-right: 7px; color: var(--coral); }
.section { margin-top: 59px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.eyebrow { color: #84788c; }
.section-title { margin: 6px 0 0; font: 800 clamp(25px,3.2vw,35px)/1.35 var(--serif); letter-spacing: -.045em; }
.section-sub { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.text-link { display: inline-flex; gap: 8px; align-items: center; color: #5d5068; font-size: 10px; font-weight: 800; }
.text-link:hover { color: #bc4c3b; }
.category-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }
.category-card { min-height: 146px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 17px; border: 1px solid #ddd4c8; border-radius: 17px; background: rgba(255,250,242,.88); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.category-card:hover { transform: translateY(-4px); border-color: #f1a99a; box-shadow: 0 12px 25px rgba(51,32,54,.1); }
.category-card::after { content: ''; position: absolute; right: -18px; bottom: -35px; width: 86px; height: 86px; border: 1px solid rgba(37,27,55,.09); border-radius: 50%; box-shadow: 0 0 0 12px rgba(37,27,55,.025), 0 0 0 25px rgba(37,27,55,.02); }
.cat-icon { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 10px; color: var(--plum); background: var(--cat-accent,var(--lime)); font: 16px var(--mono); }
.cat-type { position: absolute; right: 15px; top: 16px; color: #8e8491; font: 8px var(--mono); }
.category-card strong { display: block; font: 800 15px var(--serif); }
.category-card small { display: block; margin-top: 3px; color: #7d7480; font-size: 9px; }
.game-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 15px; }
.game-card { min-width: 0; overflow: hidden; border: 1px solid #ddd4c8; border-radius: 18px; background: var(--card); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.game-card:hover { transform: translateY(-5px); border-color: #eea89b; box-shadow: var(--shadow); }
.game-cover { height: 178px; position: relative; overflow: hidden; background: var(--art-bg,var(--plum)); }
.game-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.23,1,.32,1); }
.game-card:hover .game-cover img { transform: scale(1.04); }
.cover-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--lime); font: 48px var(--serif); }
.cover-tag { position: absolute; left: 12px; top: 12px; padding: 5px 9px; border: 1px solid rgba(255,255,255,.2); border-radius: 99px; color: #fffaf2; background: rgba(37,27,55,.78); font: 8px var(--mono); backdrop-filter: blur(8px); }
.game-card-body { padding: 14px 15px 15px; }
.card-title-row { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.card-title-row h3 { margin: 0; font: 800 17px/1.4 var(--serif); }
.game-card p { min-height: 36px; margin: 7px 0 11px; color: #69616f; font-size: 10px; line-height: 1.7; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 3px 8px; border: 1px solid #e5ddd2; border-radius: 99px; color: #5f5867; background: #f6f0e7; font: 8px var(--mono); }
.tag.mode-competitive { color: #913b34; border-color: #f1d4ca; background: #fff0e8; }
.tag.mode-coop { color: #246961; border-color: #cbe9de; background: #e8f6ee; }
.tag.mode-turn { color: #5d4b91; border-color: #ddd4f5; background: #f1edfc; }
.tag.device-tag { color: #3d5866; border-color: #d1e4e8; background: #ecf7f6; }
.level-card { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.level-panel { position: relative; overflow: hidden; padding: 18px 19px; border: 1px solid #ded5c9; border-radius: 16px; background: rgba(255,250,242,.85); }
.level-panel::after { content: attr(data-index); position: absolute; top: -20px; right: 9px; color: rgba(37,27,55,.055); font: 77px var(--serif); }
.level-panel h3 { margin: 0; font: 800 15px var(--serif); }
.level-panel p { margin: 7px 0 0; color: #716978; font-size: 10px; }
.level-panel small { display: inline-block; margin-top: 9px; color: #8c818b; font: 8px var(--mono); }
.tip-banner { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 20px 22px; border: 1px solid #ddd4c8; border-radius: 18px; background: #eee8dc; }
.tip-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 14px; color: var(--plum); background: var(--coral); font: 20px var(--serif); }
.tip-banner h3 { margin: 0 0 4px; font: 800 16px var(--serif); }
.tip-banner p { margin: 0; color: #6e6572; font-size: 10px; }
.tip-note { max-width: 170px; color: #776f79; font: 8px var(--mono); text-align: right; }
.page-intro { position: relative; overflow: hidden; margin: 25px 0 32px; padding: 32px 36px; border: 1px solid #ddd4c8; border-radius: 21px; background: linear-gradient(115deg,#fffaf2,#f0e9df); }
.page-intro::after { content: '✦'; position: absolute; right: 34px; top: -37px; color: rgba(255,101,75,.12); font: 150px var(--serif); }
.breadcrumb { display: flex; gap: 8px; color: #867c89; font: 8px var(--mono); }
.breadcrumb a:hover { color: #b94639; }
.page-intro .eyebrow { margin-top: 17px; }
.page-intro h1 { position: relative; z-index: 1; margin: 10px 0 7px; font: 800 clamp(30px,4vw,43px)/1.25 var(--serif); letter-spacing: -.045em; }
.page-intro p { position: relative; z-index: 1; max-width: 710px; margin: 0; color: #6d6472; font-size: 11px; }
.intro-stats { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 13px; margin-top: 15px; color: #766d78; font: 8px var(--mono); }
.intro-stats span::before { content: '•'; margin-right: 5px; color: var(--coral); }
.filter-panel { margin: 20px 0 17px; padding: 15px 17px; border: 1px solid #ded5c9; border-radius: 16px; background: rgba(255,250,242,.9); }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 0; }
.filter-row + .filter-row { border-top: 1px solid #ebe3d9; }
.filter-label { width: 53px; color: #897f8a; font: 8px var(--mono); letter-spacing: .06em; }
.filter-chip { min-height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 99px; color: #6e6572; background: transparent; font-size: 9px; cursor: pointer; transition: all .15s ease; }
.filter-chip:hover { color: var(--ink); background: #f4eee6; }
.filter-chip.active { color: #6f332e; border-color: #f4c9be; background: #fff0e8; font-weight: 800; }
.filter-chip.disabled-chip { color: #9a9297; cursor: default; }
.filter-row select { min-height: 29px; margin-left: auto; padding: 0 24px 0 9px; border: 1px solid #e1d9ce; border-radius: 99px; color: #5e5663; background: #fffaf2; font-size: 9px; }
.result-line { display: flex; justify-content: space-between; gap: 12px; margin: 17px 0 12px; color: #827884; font: 8px var(--mono); }
.result-line strong { color: var(--ink); font-weight: 600; }
.empty-state { grid-column: 1/-1; padding: 29px; border: 1px dashed #d5c9c4; border-radius: 15px; color: #746b77; text-align: center; }
.empty-state strong { display: block; color: var(--ink); font: 800 17px var(--serif); }
.detail-top { margin: 24px 0 17px; }
.detail-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-top: 16px; }
.detail-head h1 { margin: 0; font: 800 clamp(33px,4vw,47px)/1.2 var(--serif); letter-spacing: -.05em; }
.detail-head p { margin: 7px 0 0; color: #6b6370; font-size: 11px; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(250px,.72fr); gap: 16px; align-items: start; margin-top: 19px; }
.demo-panel { overflow: hidden; border: 1px solid #ded5c9; border-radius: 19px; background: var(--card); box-shadow: 0 12px 32px rgba(45,30,49,.08); }
.demo-header { display: flex; justify-content: space-between; gap: 10px; padding: 12px 15px; border-bottom: 1px solid #e9e1d7; color: #7a717d; font: 8px var(--mono); }
.demo-header strong { color: #a34439; font-weight: 500; }
.demo-body { min-height: 300px; display: grid; place-items: center; padding: 24px; background: linear-gradient(145deg,#fff9ef,#f3ece2); }
.demo-foot { display: flex; justify-content: space-between; gap: 10px; padding: 10px 15px; border-top: 1px solid #e9e1d7; color: #8b818a; font: 8px var(--mono); }
.game-facts { padding: 19px; border: 1px solid #ded5c9; border-radius: 17px; background: rgba(255,250,242,.9); }
.game-facts h3 { margin: 0 0 11px; font: 800 16px var(--serif); }
.fact-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid #ebe3d9; font-size: 9px; }
.fact-row span { color: #827985; }
.fact-row strong { color: #332b40; text-align: right; font-weight: 700; }
.truth-note { margin: 12px 0 0; padding: 10px; border-radius: 10px; color: #63586b; background: #f4ecdf; font-size: 9px; }
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 14px; }
.rule-card { padding: 16px; border: 1px solid #ded5c9; border-radius: 14px; background: rgba(255,250,242,.86); }
.rule-card small { color: #ba5142; font: 8px var(--mono); letter-spacing: .12em; }
.rule-card h3 { margin: 5px 0; font: 800 14px var(--serif); }
.rule-card p { margin: 0; color: #716976; font-size: 9px; line-height: 1.8; }
.keymap { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.player-card { padding: 13px 14px; border: 1px solid #e4dacf; border-radius: 13px; background: #fffaf2; }
.player-card h4 { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 7px; font: 800 11px var(--serif); }
.player-card h4 span { color: #817787; font: 8px var(--mono); }
.key-list { display: flex; flex-wrap: wrap; gap: 5px; }
.kbd { min-width: 25px; min-height: 23px; display: inline-grid; place-items: center; padding: 0 6px; border: 1px solid #d7cdda; border-bottom-width: 3px; border-radius: 6px; color: var(--plum); background: #f5eef7; font: 9px var(--mono); }
.start-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 14px; }
.step-card { padding: 12px; border-radius: 12px; color: #6e6573; background: #f2ebe1; font-size: 9px; }
.step-card b { display: block; margin-bottom: 4px; color: #bb4b3d; font: 9px var(--mono); }
.tip-detail { margin-top: 13px; padding: 17px 19px; border-radius: 14px; color: #fbf2e9; background: var(--plum); }
.tip-detail small { color: var(--cyan); font: 8px var(--mono); letter-spacing: .14em; }
.tip-detail p { margin: 6px 0 0; color: #d3c9d7; font-size: 9px; }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; }
.demo-inner { width: min(100%,560px); text-align: center; }
.demo-kicker { color: #877b8b; font: 8px var(--mono); letter-spacing: .15em; text-transform: uppercase; }
.demo-inner h2 { margin: 7px 0 4px; font: 800 23px var(--serif); }
.demo-inner p { margin: 5px auto 14px; max-width: 480px; color: #756b79; font-size: 10px; }
.demo-status { min-height: 26px; margin: 10px 0 0; color: #3d7569; font-size: 10px; font-weight: 800; }
.demo-status.error { color: #b84e3f; }
.demo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 11px; }
.demo-actions .button { min-height: 36px; font-size: 9px; }
.button-dark { color: #fff7ef; background: var(--plum); }
.button-dark:hover { background: var(--plum-2); }
.button-outline { color: #564a60; border-color: #d8ccc4; background: rgba(255,255,255,.35); }
.button-outline:hover { border-color: #efa697; background: #fffaf2; }
.race-track { margin: 20px 0 14px; text-align: left; }
.racer { display: grid; grid-template-columns: 79px 1fr 36px; gap: 8px; align-items: center; margin: 10px 0; color: #514859; font-size: 9px; }
.race-lane { height: 18px; overflow: hidden; border: 1px solid #e2d7ce; border-radius: 99px; background: #eee7dc; }
.race-fill { height: 100%; width: 0; border-radius: inherit; background: var(--coral); transition: width .08s linear; }
.racer.p2 .race-fill { background: var(--purple); }
.race-score { color: #7a7180; font: 10px var(--mono); text-align: right; }
.press-hint { color: #6d6372; font: 9px var(--mono); }
.maze-grid { width: min(100%,320px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; margin: 15px auto; padding: 7px; border-radius: 14px; background: var(--plum); }
.maze-cell { position: relative; display: grid; place-items: center; border-radius: 7px; background: #fff9ef; color: var(--plum); font: 16px var(--mono); }
.maze-cell.wall { background: #b6aabd; box-shadow: inset 0 0 0 2px rgba(37,27,55,.15); }
.maze-cell.goal { background: var(--lime); box-shadow: 0 0 18px rgba(217,243,111,.35); }
.maze-token { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: white; font: 700 9px var(--mono); box-shadow: 0 4px 9px rgba(37,27,55,.2); }
.maze-token.p1 { background: var(--coral); }
.maze-token.p2 { background: var(--purple); }
.turn-display { width: min(100%,450px); margin: 14px auto; padding: 20px; border: 1px solid #e4dacf; border-radius: 17px; background: #fffaf2; }
.turn-count { color: var(--plum); font: 800 58px/1 var(--mono); }
.turn-target { margin-top: 6px; color: #887d8b; font: 8px var(--mono); }
.turn-players { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 13px 0; }
.turn-player { padding: 5px 9px; border: 1px solid #e2d8ce; border-radius: 99px; color: #786f7d; background: #f7f1e8; font-size: 8px; }
.turn-player.active { color: #60332f; border-color: #f3b6a7; background: #fff0e8; font-weight: 800; }
.turn-select { min-height: 31px; margin-top: 4px; padding: 0 8px; border: 1px solid #dfd4c9; border-radius: 99px; color: #5b5260; background: #fffaf2; font-size: 9px; }
.buzzer-arena { width: min(100%,440px); margin: 16px auto; }
.buzzer-signal { min-height: 118px; display: grid; place-items: center; border: 1px solid #e1d7ce; border-radius: 17px; color: var(--plum); background: #f0e8df; font: 800 24px var(--serif); transition: background .15s ease,color .15s ease; }
.buzzer-signal.go { color: var(--plum); background: var(--lime); box-shadow: 0 0 0 5px rgba(217,243,111,.17); }
.buzzer-signal.false { color: #fff6ed; background: var(--coral); }
.buzzer-scores { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 12px; }
.buzzer-score { padding: 8px 4px; border: 1px solid #e5dacf; border-radius: 10px; color: #675e6c; background: #fffaf2; font: 8px var(--mono); }
.buzzer-score strong { display: block; margin-top: 3px; color: var(--plum); font: 800 15px var(--mono); }
.key-guide { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 11px 0; }
.key-guide span { display: inline-flex; align-items: center; gap: 5px; color: #766d79; font: 8px var(--mono); }
.site-footer { margin-top: 62px; padding: 28px 34px 32px; color: #d1c4d5; background: var(--plum); }
.footer-inner { max-width: 1212px; margin: 0 auto; display: flex; justify-content: space-between; align-items: start; gap: 24px; }
.footer-brand { color: #fff8ed; font: 800 16px var(--serif); }
.footer-copy { max-width: 430px; color: #c8bbc9; font-size: 9px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 14px; color: #e7d9e6; font-size: 9px; }
.footer-nav a:hover { color: var(--lime); }
.footer-note { margin-top: 15px; color: #95879b; font: 8px var(--mono); }

@media (max-width: 1040px) {
  .header-inner { gap: 18px; padding-inline: 24px; }
  .desktop-nav { gap: 14px; }
  .page-shell { padding-inline: 24px; }
  .hero-copy { padding-left: 43px; }
  .category-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 760px) {
  .topline { min-height: 27px; font-size: 8px; }
  .header-inner { min-height: 66px; gap: 10px; padding: 10px 16px; }
  .brand { gap: 8px; }
  .brand-mark { width: 34px; height: 34px; font-size: 20px; }
  .brand-copy strong { font-size: 16px; }
  .brand-copy small { font-size: 7px; }
  .desktop-nav { display: none; }
  .search-form { width: min(42vw,200px); height: 35px; padding-left: 10px; }
  .search-form input { font-size: 9px; }
  .search-form button { width: 27px; height: 27px; }
  .menu-toggle { display: block; }
  .mobile-nav { grid-template-columns: repeat(4,1fr); gap: 6px; padding: 0 16px 12px; }
  .mobile-nav.open { display: grid; }
  .mobile-nav a { padding: 8px 5px; border: 1px solid #e2d8ce; border-radius: 10px; color: #564b61; background: #fffaf2; text-align: center; font-size: 9px; }
  .page-shell { padding: 0 16px 54px; }
  .hero { min-height: auto; grid-template-columns: 1fr; margin: 15px 0 37px; border-radius: 21px; }
  .hero-copy { padding: 31px 23px 12px; }
  .hero h1 { margin: 14px 0 11px; font-size: clamp(37px,9vw,55px); }
  .hero-lede { max-width: 460px; font-size: 12px; }
  .hero-actions { margin-top: 19px; }
  .hero-proof { gap: 9px; margin-top: 16px; font-size: 8px; }
  .hero-art { min-height: 245px; max-height: 290px; }
  .hero-art img { min-height: 250px; object-position: 60% center; }
  .hero-art::after { background: linear-gradient(180deg,var(--plum) 0%,rgba(37,27,55,0) 25%,rgba(37,27,55,.1) 100%); }
  .hero-badge { right: 13px; bottom: 13px; padding: 9px 11px; }
  .hero-badge strong { font-size: 12px; }
  .hero-figure { right: 14px; top: 14px; }
  .trust-strip { justify-content: flex-start; gap: 8px 13px; margin: -19px 0 36px; padding: 12px; font-size: 9px; }
  .section { margin-top: 44px; }
  .section-head { align-items: start; margin-bottom: 16px; }
  .section-title { font-size: 26px; }
  .category-grid { gap: 9px; }
  .category-card { min-height: 119px; padding: 13px; }
  .game-grid,.related-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .game-cover { height: 145px; }
  .game-card-body { padding: 11px; }
  .card-title-row h3 { font-size: 14px; }
  .game-card p { min-height: 39px; font-size: 9px; }
  .tag { min-height: 22px; padding: 2px 6px; font-size: 7px; }
  .level-card { grid-template-columns: 1fr; }
  .level-panel { padding: 15px; }
  .tip-banner { grid-template-columns: auto 1fr; gap: 11px; padding: 16px; }
  .tip-note { grid-column: 2; max-width: none; text-align: left; }
  .page-intro { margin: 16px 0 24px; padding: 24px 20px; }
  .page-intro::after { right: 4px; top: -20px; font-size: 105px; }
  .filter-panel { padding: 11px; }
  .filter-row { gap: 4px; }
  .filter-label { width: 43px; font-size: 7px; }
  .filter-chip { padding-inline: 8px; font-size: 8px; }
  .filter-row select { margin-left: 0; }
  .result-line { margin: 14px 0 10px; }
  .detail-head { display: block; }
  .detail-head>.button { margin-top: 12px; }
  .detail-layout { grid-template-columns: 1fr; gap: 11px; margin-top: 15px; }
  .demo-body { min-height: 280px; padding: 18px 12px; }
  .game-facts { padding: 16px; }
  .rules-grid { gap: 8px; }
  .rule-card { padding: 13px; }
  .keymap { gap: 7px; }
  .player-card { padding: 11px; }
  .start-steps { gap: 6px; }
  .step-card { padding: 9px; font-size: 8px; }
  .site-footer { margin-top: 43px; padding: 24px 16px 28px; }
  .footer-inner { flex-direction: column; gap: 12px; }
  .footer-nav { gap: 11px; }
}
@media (max-width: 440px) {
  .search-form { width: min(40vw,150px); }
  .search-form input::placeholder { font-size: 8px; }
  .game-grid,.related-grid { grid-template-columns: 1fr; }
  .game-card { display: grid; grid-template-columns: 116px 1fr; }
  .game-cover { height: 100%; min-height: 144px; }
  .game-card-body { display: flex; flex-direction: column; justify-content: center; }
  .game-card p { min-height: 0; margin: 5px 0 8px; }
  .category-card { min-height: 111px; }
  .racer { grid-template-columns: 66px 1fr 29px; }
  .demo-inner h2 { font-size: 20px; }
  .buzzer-scores { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.touch-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px auto 0; }
.touch-player { padding: 10px; border: 1px solid #e4dacf; border-radius: 12px; background: rgba(255,250,242,.75); }
.touch-player strong { display: block; margin-bottom: 7px; color: #6a5f70; font: 8px var(--mono); }
.touch-pad { display: grid; grid-template-columns: repeat(2,36px); justify-content: center; gap: 5px; }
.touch-pad button { width: 36px; height: 31px; border: 1px solid #d8cddd; border-radius: 8px; color: var(--plum); background: #f3edf6; font: 14px var(--mono); cursor: pointer; }
.touch-pad button:hover { border-color: var(--coral); background: #fff0e8; }
.buzzer-touch { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; margin-top: 9px; }
.buzzer-touch-key { min-height: 47px; padding: 6px 3px; border: 1px solid color-mix(in srgb,var(--touch-color) 52%, white); border-radius: 10px; color: var(--plum); background: color-mix(in srgb,var(--touch-color) 18%, white); cursor: pointer; transition: transform .14s ease,background .14s ease; }
.buzzer-touch-key:hover { transform: translateY(-2px); background: color-mix(in srgb,var(--touch-color) 31%, white); }
.buzzer-touch-key b,.buzzer-touch-key small { display: block; }
.buzzer-touch-key b { font: 800 12px var(--mono); }
.buzzer-touch-key small { margin-top: 2px; color: #655b6a; font: 7px var(--mono); }
@media (max-width: 440px) { .touch-controls { gap: 6px; } .touch-player { padding: 8px 4px; } .buzzer-touch { grid-template-columns: repeat(2,1fr); } }