/* ==========================================================================
   小玩场 PLAY YARD — site.css
   首页布局与组件
   ========================================================================== */

/* ---------- 顶栏 ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--paper);
  border-bottom: var(--bw) solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  padding: var(--sp-2) 0;
  min-height: 48px;
}
.brand__mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: var(--accent);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
  color: #121211;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.brand:hover .brand__mark { transform: translate(-2px, -2px) rotate(-3deg); box-shadow: var(--shadow); }
.brand__mark svg { width: 22px; height: 22px; }
.brand__text { display: grid; line-height: 1.15; }
.brand__name { font-family: var(--f-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; }
.brand__sub { font-family: var(--f-mono); font-size: .625rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }

.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  border: var(--bw) solid transparent;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav a:hover { background: var(--accent); color: #121211; border-color: var(--line); }
.header-tools { display: flex; align-items: center; gap: var(--sp-2); }

@media (max-width: 860px) {
  .nav { display: none; }
}

/* ---------- 首屏 ---------- */
.hero { padding-block: clamp(48px, 9vw, 104px) clamp(40px, 6vw, 72px); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
.hero__title { margin-top: var(--sp-4); }
.hero__lead { margin-top: var(--sp-5); }
.hero__actions { margin-top: var(--sp-6); }

.hero__aside { display: grid; gap: var(--sp-4); }
.stat-panel { padding: var(--sp-5); }
.stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}
.stat + .stat { border-top: var(--bw) solid var(--line-soft); }
.stat__num { font-family: var(--f-display); font-weight: 700; font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.stat__label { font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); text-align: right; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; align-items: start; }
}

/* ---------- 滚动字幕条 ---------- */
.ticker {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border-block: var(--bw) solid var(--line);
  background: var(--accent);
  color: #121211;
  overflow: hidden;
}
.ticker__track {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-3);
  padding-right: var(--sp-5);
  animation: ticker-scroll 28s linear infinite;
  will-change: transform;
}
.ticker__group span { font-family: var(--f-mono); font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.ticker__group span::after { content: ' ✱'; opacity: .55; }
.ticker[data-paused='true'] .ticker__group { animation-play-state: paused; }
.ticker__toggle { flex-shrink: 0; margin-right: var(--sp-3); background: var(--paper); color: var(--ink); }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ---------- 游戏区 ---------- */
.section { padding-block: clamp(48px, 7vw, 88px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
  border-bottom: var(--bw) solid var(--line);
  margin-bottom: var(--sp-6);
}
.section-head__title { display: grid; gap: var(--sp-2); }
.section-head__meta { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

/* 筛选栏 */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex: 1 1 auto; }
.chip {
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--surface);
  color: var(--ink);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.chip:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.chip:active { transform: translate(1px, 1px); box-shadow: none; }
.chip[aria-pressed='true'] { background: var(--accent); color: #121211; box-shadow: inset 0 0 0 0 var(--line); transform: translate(2px, 2px); }
.filters .search { flex: 0 1 300px; }

/* 游戏网格 */
.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.game-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.game-card:hover,
.game-card:focus-within { transform: translate(-4px, -4px); box-shadow: var(--shadow-lg); }

.game-card__cover {
  position: relative;
  aspect-ratio: 16 / 10;
  display: grid;
  place-items: center;
  background-color: var(--cover, var(--surface-2));
  background-image: var(--cover-pattern, none);
  background-size: 18px 18px;
  border-bottom: var(--bw) solid var(--line);
  color: #121211;
  overflow: hidden;
}
.game-card__cover svg { width: clamp(56px, 8vw, 76px); height: clamp(56px, 8vw, 76px); transition: transform var(--t) var(--ease-pop); }
.game-card:hover .game-card__cover svg { transform: scale(1.08) rotate(-4deg); }

.game-card__index {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  background: #121211;
  color: #F1EEE6;
  padding: 2px var(--sp-2);
  border-radius: var(--r-xs);
}
.game-card__status { position: absolute; top: var(--sp-3); right: var(--sp-3); }
.game-card__status .badge { background: #FFFFFF; color: #121211; border-color: #121211; box-shadow: 2px 2px 0 #121211; }
.game-card__status .badge--soon { background: #121211; color: #F1EEE6; border-color: #121211; box-shadow: none; }

.game-card__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: var(--sp-3); padding: var(--sp-5); }
.game-card__title { font-size: 1.25rem; }
.game-card__desc { color: var(--ink-2); font-size: .9375rem; flex: 1 1 auto; }
.game-card__tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.game-card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding-top: var(--sp-3); border-top: 1.5px dashed var(--line-soft); }

/* 卡片整体可点击（点击热区覆盖整卡） */
.game-card--playable .game-card__link { position: absolute; inset: 0; z-index: 1; }
.game-card--playable { position: relative; }
.game-card--playable:focus-within { outline: 3px solid var(--ink); outline-offset: 4px; }
.game-card__cta { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--f-mono); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.game-card__cta svg { width: 16px; height: 16px; transition: transform var(--t-fast) var(--ease); }
.game-card:hover .game-card__cta svg { transform: translateX(4px); }
.game-card--soon { box-shadow: var(--shadow-sm); }
.game-card--soon .game-card__cover { --cover-pattern: none; filter: saturate(.35); }
.game-card--soon .game-card__cover svg { opacity: .55; }
.game-card--soon .game-card__cta { color: var(--ink-2); }

/* 空状态 */
.empty-state {
  display: none;
  place-items: center;
  text-align: center;
  gap: var(--sp-3);
  padding: clamp(40px, 8vw, 72px) var(--sp-5);
  border: var(--bw) dashed var(--line-soft);
  border-radius: var(--r-sm);
}
.empty-state[data-visible='true'] { display: grid; }
.empty-state svg { width: 40px; height: 40px; color: var(--ink-2); }

/* ---------- 关于 ---------- */
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-5); }
.about-card { padding: var(--sp-5); display: grid; gap: var(--sp-3); align-content: start; }
.about-card h3 { font-size: 1.125rem; }
.about-card p { color: var(--ink-2); font-size: .9375rem; }
.about-card svg { width: 24px; height: 24px; color: var(--ink); }

/* ---------- 页脚 ---------- */
.site-footer { border-top: var(--bw) solid var(--line); background: var(--ink); color: var(--paper); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-6); }
.site-footer a { color: var(--paper); }
.site-footer .mono { color: var(--paper); opacity: .74; }
.site-footer .btn { --btn-bg: transparent; --btn-fg: var(--paper); --btn-bd: var(--paper); }
.top-link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; }