/* ==========================================================
   plaza.css — 游戏广场专用样式
   ========================================================== */

main { overflow-x: clip; }

/* ---------- 标题区 ---------- */
.plaza-hero { display: grid; justify-items: start; gap: 24px; padding-block: clamp(40px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.tiles { display: flex; flex-wrap: wrap; gap: clamp(8px, 1.4vw, 16px); margin-top: 8px; }
.tile {
  display: grid; place-items: center;
  width: clamp(64px, 12vw, 150px); aspect-ratio: 1;
  font: 800 clamp(2.4rem, 1rem + 6.6vw, 6.4rem) / 1 var(--font-display); color: var(--on-accent);
  background: var(--c); border: var(--border); border-radius: clamp(14px, 2vw, 24px); box-shadow: var(--pop);
  transform: rotate(var(--r));
  animation: drop 0.7s var(--ease-spring) both; animation-delay: calc(var(--i) * 70ms);
  transition: transform var(--duration-normal) var(--ease-spring);
}
.tile:hover { transform: rotate(0deg) translateY(-8px) scale(1.06); }
:lang(en) .tile { width: clamp(46px, 9.5vw, 118px); font-size: clamp(2rem, 0.8rem + 5.4vw, 5.2rem); }
@keyframes drop { from { opacity: 0; transform: translateY(-60px) rotate(0deg); } }
.plaza-sub { font-size: var(--text-lg); color: var(--muted); max-width: 40ch; }

.stats { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.stats li {
  display: flex; align-items: baseline; gap: 8px; padding: 8px 18px;
  font-weight: 600; background: var(--card); border: var(--border); border-radius: 999px;
}
.stats b { font: 800 1.5rem var(--font-display); color: var(--tomato); }

/* ---------- 游戏卡片 ---------- */
.games { padding-bottom: var(--space-section); }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 32px; }
.game-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--pop);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-out-expo), box-shadow var(--duration-normal) var(--ease-out-expo);
}
.game-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr auto; }
.game-card:has(.game-link:hover), .game-card:has(.game-link:focus-visible) { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 var(--c); }
.game-card:has(.game-link:active) { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--shadow); }
.game-link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.game-link:focus-visible { outline-offset: -6px; }

.game-cover { position: relative; background: #0d0a14; border-bottom: var(--border); overflow: hidden; }
.game-card:first-child .game-cover { grid-row: 1 / -1; border-bottom: 0; border-right: var(--border); }
.game-cover img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.6s var(--ease-out-expo); }
.game-card:has(.game-link:hover) .game-cover img { transform: scale(1.06); }

.burst {
  position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 78px; height: 78px;
  font: 800 1rem var(--font-display); color: var(--on-accent); background: var(--lemon);
  clip-path: polygon(50% 0, 61% 18%, 82% 10%, 80% 32%, 100% 42%, 84% 57%, 94% 78%, 71% 79%, 62% 100%, 47% 84%, 29% 97%, 25% 75%, 3% 70%, 15% 51%, 2% 32%, 23% 26%, 22% 4%, 40% 15%);
  animation: wobble 2.4s ease-in-out infinite;
}
@keyframes wobble { 50% { transform: rotate(12deg) scale(1.08); } }

.game-body { display: flex; flex-direction: column; gap: 14px; padding: 26px 26px 20px; }
.game-body h3 { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem); font-weight: 800; }
.game-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.game-blurb { color: var(--muted); }
.game-meta { display: flex; gap: 28px; margin: 0; }
.game-meta dt { font: 700 0.75rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.game-meta dd { margin: 0; font-weight: 700; }

.game-play {
  display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px;
  font: 800 1.25rem var(--font-display); color: var(--on-accent); background: var(--c); border-top: var(--border);
}
.game-card:first-child .game-play { grid-column: 2; }
.tri { width: 0; height: 0; border-block: 9px solid transparent; border-left: 14px solid currentColor; transition: transform var(--duration-normal) var(--ease-spring); }
.game-card:has(.game-link:hover) .tri { transform: translateX(4px) scale(1.2); }

/* 制作中的卡片 */
.game-card.is-soon { background: transparent; border-style: dashed; box-shadow: none; }
.soon-screen {
  display: grid; place-items: center; align-content: center; gap: 14px; aspect-ratio: 16 / 9;
  font: 800 1.1rem var(--font-mono); letter-spacing: 0.3em; color: var(--mint);
  background: #0d0a14; border-bottom: 3px dashed var(--line);
}
.soon-screen span::after { content: "_"; animation: blink 0.9s steps(2) infinite; }
.soon-screen i { width: 60%; height: 12px; border: 2px solid var(--mint); border-radius: 999px; background: linear-gradient(90deg, var(--mint) 0 40%, transparent 40%); background-size: 250% 100%; animation: load 2.2s ease-in-out infinite; }
@keyframes load { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* ---------- 窄屏 ---------- */
@media (max-width: 860px) {
  .game-card:first-child { display: flex; }
  .game-card:first-child .game-cover { border-right: 0; border-bottom: var(--border); }
}
@media (prefers-reduced-motion: reduce) {
  .tile, .burst { animation: none; }
}