/* ── Chess — Stylesheet ──── */

:root {
  --bg: #1a1410;
  --panel: #241e18;
  --accent: #b58863;
  --accent-hover: #d4a574;
  --accent-secondary: #f0d9b5;
  --muted: #9a8a7a;
  --font-display: "Bangers", cursive;
  --font-body: "Outfit", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%; overflow: hidden; background: var(--bg); color: #e8e0d8;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent; touch-action: none;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
}

.backdrop { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.backdrop--one { background: radial-gradient(ellipse at 20% 30%, rgba(181,136,99,0.08) 0%, transparent 60%); }
.backdrop--two { background: radial-gradient(ellipse at 80% 70%, rgba(240,217,181,0.05) 0%, transparent 55%); }

.shell { position: relative; z-index: 1; max-width: 1140px; margin: 0 auto; padding: 2rem 1.5rem; }
.hero { text-align: center; margin-bottom: 1.5rem; }
.eyebrow { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.15em; color: var(--accent-secondary); margin-bottom: 0.5rem; }
.hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); color: var(--accent); letter-spacing: 0.04em; line-height: 1.1; }
.subtitle { max-width: 600px; margin: 0.5rem auto 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

.game-frame { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.arena-wrap {
  position: relative; background: rgba(36,30,24,0.6); border: 1px solid rgba(181,136,99,0.2);
  border-radius: 18px; padding: 14px; box-shadow: 0 0 60px rgba(181,136,99,0.06); backdrop-filter: blur(6px);
}
.arena-topbar { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 10px; font-size: 0.85rem; }
#message-banner { color: var(--muted); font-weight: 600; }
.streak { color: var(--accent); font-weight: 700; }
.streak strong { font-family: var(--font-display); font-size: 1.1rem; margin-left: 4px; }

canvas {
  display: block; width: 100%; height: auto; aspect-ratio: 960 / 600;
  border-radius: 14px; border: 1px solid rgba(181,136,99,0.15); background: #120e0a;
}
.arena-bottom { padding: 10px 4px 0; font-size: 0.8rem; color: var(--muted); font-style: italic; }

@media (max-width: 767px) {
  .shell { width: 100%; padding: 0; }
  .hero { display: none; }
  .game-frame { grid-template-columns: 1fr; gap: 0; }
  .arena-wrap { padding: 0; border-radius: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
  .arena-topbar, .arena-bottom { display: none; }
  canvas { width: 100vw !important; height: calc(100vh - 140px) !important; height: calc(100dvh - 140px) !important; border-radius: 0; border: 0; aspect-ratio: auto; }
}

@media (orientation: landscape) and (max-height: 700px) {
  .shell { width: 100%; padding: 0; }
  .hero { display: none; }
  .game-frame { grid-template-columns: 1fr; gap: 0; }
  .arena-wrap { padding: 0; border-radius: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
  .arena-topbar, .arena-bottom { display: none; }
  canvas { width: 100vw !important; height: 100vh !important; height: 100dvh !important; border-radius: 0; border: 0; aspect-ratio: auto; }
}

.in-iframe .hero, .in-iframe .arena-topbar, .in-iframe .arena-bottom { display: none !important; }
.in-iframe .shell { width: 100% !important; padding: 0 !important; }
.in-iframe .game-frame { gap: 0 !important; }
.in-iframe .arena-wrap { padding: 0 !important; border-radius: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
.in-iframe canvas { width: 100vw !important; height: 100vh !important; height: 100dvh !important; border-radius: 0 !important; border: 0 !important; aspect-ratio: auto !important; }