:root {
  --soil: #3d2a18;
  --soil-light: #5c3f24;
  --grass: #4a7c3f;
  --sky-top: #7eb8d4;
  --sky-bot: #c8e4f0;
  --night-top: #1a2433;
  --night-bot: #2d3f55;
  --ink: #1c140e;
  --cream: #f3ebe0;
  --accent: #e85d04;
  --hud: #1c140e;
}

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

html, body {
  min-height: 100%;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--soil);
}

.sky {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 70% 10%, rgba(255, 220, 140, 0.35), transparent 55%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 48%, #8fbc6e 48%, var(--grass) 52%, var(--soil-light) 70%, var(--soil) 100%);
  z-index: 0;
  transition: background 0.6s ease;
}

body.is-night .sky {
  background:
    radial-gradient(ellipse 40% 30% at 80% 12%, rgba(240, 230, 180, 0.2), transparent 50%),
    linear-gradient(180deg, var(--night-top) 0%, var(--night-bot) 48%, #2a4a28 48%, #1e3520 52%, #2a1c10 70%, #1a120c 100%);
}

body.is-night {
  color: var(--cream);
}

.shell {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(0.75rem, 2.5vw, 1.75rem) 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  min-height: 100dvh;
  justify-content: center;
}

.brand {
  text-align: center;
}

.logo {
  font-family: Bungee, cursive;
  font-size: clamp(2.4rem, 8vw, 4rem);
  line-height: 0.9;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-shadow: 3px 3px 0 var(--ink);
  animation: bob 2.4s ease-in-out infinite;
}

body.is-night .logo {
  text-shadow: 3px 3px 0 #0a0806;
}

.tagline {
  margin-top: 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.85;
}

.tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.85rem;
  max-width: 100%;
}

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.2rem;
  padding: 0.4rem 0.65rem;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  font-family: Bungee, cursive;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink);
  background: rgba(243, 235, 224, 0.85);
  box-shadow: 3px 3px 0 rgba(28, 20, 14, 0.18);
  transition: transform 0.1s ease, background 0.15s ease;
}

.tab:hover {
  transform: translateY(-1px);
}

.tab.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 3px 3px 0 rgba(28, 20, 14, 0.28);
}

body.is-night .tab {
  border-color: #0a0806;
  color: var(--cream);
  background: rgba(36, 52, 71, 0.85);
}

body.is-night .tab.is-active {
  background: var(--accent);
  color: #fff;
}

body.theme-sheep {
  --accent: #2a9d8f;
  --sky-top: #6fa8c4;
  --sky-bot: #d2e8ef;
}

body.theme-sheep .touch-btn-jump {
  background: #a8dadc;
}

body.theme-sheep .touch-btn-peck {
  background: #b7e4c7;
}

body.theme-hero {
  --accent: #e63946;
  --sky-top: #1e3a5f;
  --sky-bot: #7eb6d9;
  --soil: #1a2740;
  --soil-light: #243656;
  --grass: #2d4a6f;
}

body.theme-hero .sky {
  background:
    radial-gradient(ellipse 50% 35% at 75% 15%, rgba(255, 220, 140, 0.25), transparent 55%),
    linear-gradient(180deg, #1e3a5f 0%, #3d6ea5 42%, #7eb6d9 55%, #2d4a6f 70%, #1a2740 100%);
}

body.theme-bug {
  --accent: #2a9d8f;
  --sky-top: #87b56c;
  --sky-bot: #b7d48a;
  --soil: #2d4a1e;
  --soil-light: #3d5c28;
  --grass: #4a6f2e;
}

body.theme-bug .sky {
  background:
    radial-gradient(ellipse 60% 40% at 20% 20%, rgba(255, 240, 180, 0.3), transparent 50%),
    linear-gradient(180deg, #87b56c 0%, #b7d48a 45%, #6b9a45 55%, #3d5c28 75%, #2d4a1e 100%);
}

body.theme-fish {
  --accent: #ff7a22;
  --sky-top: #4da3ff;
  --sky-bot: #5ad6e8;
  --soil: #0f6f96;
  --soil-light: #1a8fb8;
  --grass: #2eb8d9;
}

body.theme-fish .sky {
  background:
    radial-gradient(ellipse 55% 40% at 70% 12%, rgba(255, 250, 220, 0.45), transparent 55%),
    linear-gradient(180deg, #4da3ff 0%, #7ec8ff 35%, #5ad6e8 55%, #1a8fb8 78%, #0f6f96 100%);
}

body.theme-fish .logo {
  color: #ff7a22;
  text-shadow: 3px 3px 0 #0b3d4a;
}

body.theme-fish .canvas-wrap {
  background: #7ec8ff;
}

body.theme-space {
  --accent: #69db7c;
  --sky-top: #0a0a1a;
  --sky-bot: #1a1040;
  --soil: #0a0a1a;
  --soil-light: #1a1040;
  --grass: #1a1040;
}

body.theme-space .sky {
  background:
    radial-gradient(ellipse 40% 30% at 80% 20%, rgba(120, 80, 200, 0.35), transparent 55%),
    linear-gradient(180deg, #0a0a1a 0%, #1a1040 55%, #0a0a1a 100%);
}

body.theme-space .logo {
  color: #69db7c;
  text-shadow: 3px 3px 0 #050510;
}

body.theme-space .canvas-wrap {
  background: #0a0a1a;
}

body.theme-space .touch-btn-attack {
  background: #ffd166;
  color: #1c140e;
}

body.theme-ball {
  --accent: #ff6b6b;
  --sky-top: #1a2744;
  --sky-bot: #2d4a6f;
  --soil: #1a2744;
  --soil-light: #2d4a6f;
  --grass: #2d4a6f;
}

body.theme-ball .sky {
  background:
    radial-gradient(ellipse 50% 40% at 30% 20%, rgba(255, 107, 107, 0.2), transparent 55%),
    linear-gradient(180deg, #1a2744 0%, #2d4a6f 55%, #1a2744 100%);
}

body.theme-ball .logo {
  color: #ff6b6b;
  text-shadow: 3px 3px 0 #0a1528;
}

body.theme-ball .canvas-wrap {
  background: #1a2744;
}

body.theme-frog {
  --accent: #69db7c;
  --sky-top: #1a5c4a;
  --sky-bot: #2a8f6e;
  --soil: #1a5c4a;
  --soil-light: #2a8f6e;
  --grass: #2a8f6e;
}

body.theme-frog .sky {
  background:
    radial-gradient(ellipse 50% 40% at 70% 15%, rgba(105, 219, 124, 0.25), transparent 55%),
    linear-gradient(180deg, #1a5c4a 0%, #2a8f6e 55%, #145040 100%);
}

body.theme-frog .logo {
  color: #69db7c;
  text-shadow: 3px 3px 0 #0a2a20;
}

body.theme-frog .canvas-wrap {
  background: #1a5c4a;
}

body.theme-mole {
  --accent: #c08457;
  --sky-top: #3d2a18;
  --sky-bot: #5c3f24;
  --soil: #3d2a18;
  --soil-light: #5c3f24;
  --grass: #4a7c3f;
}

body.theme-mole .sky {
  background:
    radial-gradient(ellipse 45% 35% at 40% 20%, rgba(255, 200, 120, 0.2), transparent 55%),
    linear-gradient(180deg, #7eb8d4 0%, #c8e4f0 40%, #8fbc6e 48%, #5c3f24 100%);
}

body.theme-mole .logo { color: #c08457; }

body.theme-memory {
  --accent: #748ffc;
  --sky-top: #2b2d42;
  --sky-bot: #4a4e69;
  --soil: #2b2d42;
  --soil-light: #4a4e69;
  --grass: #4a4e69;
}

body.theme-memory .sky {
  background: linear-gradient(180deg, #2b2d42 0%, #4a4e69 55%, #2b2d42 100%);
}

body.theme-memory .logo { color: #748ffc; text-shadow: 3px 3px 0 #12131c; }
body.theme-memory .canvas-wrap { background: #2b2d42; }

body.theme-snake {
  --accent: #51cf66;
  --sky-top: #1b4332;
  --sky-bot: #2d6a4f;
  --soil: #1b4332;
  --soil-light: #2d6a4f;
  --grass: #2d6a4f;
}

body.theme-snake .sky {
  background: linear-gradient(180deg, #1b4332 0%, #2d6a4f 55%, #081c15 100%);
}

body.theme-snake .logo { color: #51cf66; text-shadow: 3px 3px 0 #081c15; }
body.theme-snake .canvas-wrap { background: #081c15; }

body.theme-flappy {
  --accent: #ffd43b;
  --sky-top: #74c0fc;
  --sky-bot: #a5d8ff;
  --soil: #74c0fc;
  --soil-light: #a5d8ff;
  --grass: #69db7c;
}

body.theme-flappy .sky {
  background:
    radial-gradient(ellipse 40% 30% at 80% 15%, rgba(255, 255, 255, 0.45), transparent 50%),
    linear-gradient(180deg, #74c0fc 0%, #a5d8ff 55%, #69db7c 100%);
}

body.theme-flappy .logo { color: #ffd43b; text-shadow: 3px 3px 0 #1c140e; }
body.theme-flappy .canvas-wrap { background: #74c0fc; }

body.theme-catch {
  --accent: #ff922b;
  --sky-top: #fff3bf;
  --sky-bot: #ffe8a3;
  --soil: #fff3bf;
  --soil-light: #ffe8a3;
  --grass: #94d82d;
}

body.theme-catch .sky {
  background: linear-gradient(180deg, #74c0fc 0%, #fff3bf 45%, #94d82d 100%);
}

body.theme-catch .logo { color: #ff922b; }
body.theme-catch .canvas-wrap { background: #fff8e1; }

body.theme-connect {
  --accent: #339af0;
  --sky-top: #1c7ed6;
  --sky-bot: #339af0;
  --soil: #1c7ed6;
  --soil-light: #339af0;
  --grass: #1864ab;
}

body.theme-connect .sky {
  background: linear-gradient(180deg, #1c7ed6 0%, #339af0 55%, #1864ab 100%);
}

body.theme-connect .logo { color: #ffd43b; text-shadow: 3px 3px 0 #0b3d6e; }
body.theme-connect .canvas-wrap { background: #1c7ed6; }

body.theme-mines {
  --accent: #868e96;
  --sky-top: #343a40;
  --sky-bot: #495057;
  --soil: #343a40;
  --soil-light: #495057;
  --grass: #495057;
}

body.theme-mines .sky {
  background: linear-gradient(180deg, #343a40 0%, #495057 55%, #212529 100%);
}

body.theme-mines .logo { color: #fcc419; text-shadow: 3px 3px 0 #121416; }
body.theme-mines .canvas-wrap { background: #212529; }

body.theme-pong {
  --accent: #f8f9fa;
  --sky-top: #000;
  --sky-bot: #111;
  --soil: #000;
  --soil-light: #111;
  --grass: #111;
}

body.theme-pong .sky {
  background: #000;
}

body.theme-pong .logo { color: #f8f9fa; text-shadow: 3px 3px 0 #333; }
body.theme-pong .canvas-wrap { background: #000; }

body.theme-react {
  --accent: #ff6b6b;
  --sky-top: #212529;
  --sky-bot: #343a40;
  --soil: #212529;
  --soil-light: #343a40;
  --grass: #343a40;
}

body.theme-react .sky {
  background: linear-gradient(180deg, #212529 0%, #343a40 100%);
}

body.theme-react .logo { color: #ff6b6b; text-shadow: 3px 3px 0 #0a0a0a; }
body.theme-react .canvas-wrap { background: #1a1b1e; }

body.theme-backgammon {
  --accent: #e8590c;
  --sky-top: #5c3d2e;
  --sky-bot: #7c5a42;
  --soil: #5c3d2e;
  --soil-light: #7c5a42;
  --grass: #7c5a42;
}

body.theme-backgammon .sky {
  background:
    radial-gradient(ellipse 50% 40% at 50% 20%, rgba(255, 200, 120, 0.15), transparent 55%),
    linear-gradient(180deg, #5c3d2e 0%, #7c5a42 55%, #3d2918 100%);
}

body.theme-backgammon .logo { color: #ffd8a8; text-shadow: 3px 3px 0 #2a1810; }
body.theme-backgammon .canvas-wrap { background: #3d2918; }

body.theme-checkers {
  --accent: #e03131;
  --sky-top: #1a3a2a;
  --sky-bot: #2f6b45;
  --soil: #1a3a2a;
  --soil-light: #2f6b45;
  --grass: #2f6b45;
}

body.theme-checkers .sky {
  background:
    radial-gradient(ellipse 45% 35% at 60% 15%, rgba(255, 168, 168, 0.18), transparent 55%),
    linear-gradient(180deg, #1a3a2a 0%, #2f6b45 55%, #12261c 100%);
}

body.theme-checkers .logo { color: #e03131; text-shadow: 3px 3px 0 #0f1f16; }
body.theme-checkers .canvas-wrap { background: #1a2e22; }

body.theme-ninja {
  --accent: #fa5252;
  --sky-top: #2b1d14;
  --sky-bot: #5c3d2e;
  --soil: #2b1d14;
  --soil-light: #5c3d2e;
  --grass: #3d2918;
}

body.theme-ninja .sky {
  background:
    radial-gradient(ellipse 50% 40% at 50% 20%, rgba(255, 80, 80, 0.18), transparent 55%),
    linear-gradient(180deg, #2b1d14 0%, #5c3d2e 55%, #1a120c 100%);
}

body.theme-ninja .logo { color: #fa5252; text-shadow: 3px 3px 0 #120c08; }
body.theme-ninja .canvas-wrap { background: #2b1d14; }

body.theme-rope {
  --accent: #7cb342;
  --sky-top: #4fc3f7;
  --sky-bot: #81c784;
  --soil: #4fc3f7;
  --soil-light: #81c784;
  --grass: #81c784;
}

body.theme-rope .sky {
  background: linear-gradient(180deg, #4fc3f7 0%, #81c784 100%);
}

body.theme-rope .logo { color: #7cb342; text-shadow: 3px 3px 0 #1b5e20; }
body.theme-rope .canvas-wrap { background: #87ceeb; }

body.theme-pacman {
  --accent: #ffd43b;
  --sky-top: #000;
  --sky-bot: #111;
  --soil: #000;
  --soil-light: #111;
  --grass: #111;
}

body.theme-pacman .sky {
  background: #000;
}

body.theme-pacman .logo { color: #ffd43b; text-shadow: 3px 3px 0 #1c7ed6; }
body.theme-pacman .canvas-wrap { background: #000; }

body.theme-tetris { --accent:#66d9e8; --sky-top:#0b1020; --sky-bot:#1a1a40; --soil:#0b1020; --soil-light:#1a1a40; --grass:#1a1a40; }
body.theme-tetris .sky { background: linear-gradient(180deg,#0b1020,#1a1a40); }
body.theme-tetris .logo { color:#66d9e8; text-shadow:3px 3px 0 #050510; }
body.theme-tetris .canvas-wrap { background:#0b1020; }

body.theme-g2048 { --accent:#f2b179; --sky-top:#faf8ef; --sky-bot:#eee4da; --soil:#faf8ef; --soil-light:#eee4da; --grass:#bbada0; }
body.theme-g2048 .sky { background: linear-gradient(180deg,#faf8ef,#eee4da); }
body.theme-g2048 .logo { color:#776e65; text-shadow:3px 3px 0 #bbada0; }
body.theme-g2048 .canvas-wrap { background:#faf8ef; }

body.theme-asteroids { --accent:#ced4da; --sky-top:#050510; --sky-bot:#111; --soil:#050510; --soil-light:#111; --grass:#111; }
body.theme-asteroids .sky { background:#050510; }
body.theme-asteroids .logo { color:#fff; text-shadow:3px 3px 0 #333; }
body.theme-asteroids .canvas-wrap { background:#050510; }

body.theme-breakout { --accent:#b197fc; --sky-top:#1a1040; --sky-bot:#2b1d6e; --soil:#1a1040; --soil-light:#2b1d6e; --grass:#2b1d6e; }
body.theme-breakout .sky { background: linear-gradient(180deg,#1a1040,#2b1d6e); }
body.theme-breakout .logo { color:#b197fc; text-shadow:3px 3px 0 #0a0618; }
body.theme-breakout .canvas-wrap { background:#1a1040; }

body.theme-sudoku { --accent:#748ffc; --sky-top:#eef2ff; --sky-bot:#dbe4ff; --soil:#eef2ff; --soil-light:#dbe4ff; --grass:#dbe4ff; }
body.theme-sudoku .sky { background: linear-gradient(180deg,#eef2ff,#dbe4ff); }
body.theme-sudoku .logo { color:#364fc7; text-shadow:3px 3px 0 #adb5bd; }
body.theme-sudoku .canvas-wrap { background:#eef2ff; }

body.theme-simon { --accent:#e03131; --sky-top:#111; --sky-bot:#222; --soil:#111; --soil-light:#222; --grass:#222; }
body.theme-simon .sky { background:#111; }
body.theme-simon .logo { color:#ff8787; text-shadow:3px 3px 0 #000; }
body.theme-simon .canvas-wrap { background:#111; }

body.theme-hockey { --accent:#ff6b6b; --sky-top:#0b7285; --sky-bot:#15aabf; --soil:#0b7285; --soil-light:#15aabf; --grass:#15aabf; }
body.theme-hockey .sky { background: linear-gradient(180deg,#0b7285,#15aabf); }
body.theme-hockey .logo { color:#fff; text-shadow:3px 3px 0 #0b4b57; }
body.theme-hockey .canvas-wrap { background:#0b7285; }

body.theme-racing { --accent:#e03131; --sky-top:#212529; --sky-bot:#495057; --soil:#212529; --soil-light:#495057; --grass:#495057; }
body.theme-racing .sky { background: linear-gradient(180deg,#212529,#495057); }
body.theme-racing .logo { color:#e03131; text-shadow:3px 3px 0 #000; }
body.theme-racing .canvas-wrap { background:#212529; }

body.theme-platform { --accent:#e03131; --sky-top:#74c0fc; --sky-bot:#d8f5a2; --soil:#74c0fc; --soil-light:#d8f5a2; --grass:#2f9e44; }
body.theme-platform .sky { background: linear-gradient(180deg,#74c0fc,#d8f5a2); }
body.theme-platform .logo { color:#e03131; text-shadow:3px 3px 0 #1c140e; }
body.theme-platform .canvas-wrap { background:#74c0fc; }

body.theme-solitaire { --accent:#ffd43b; --sky-top:#0b3d2e; --sky-bot:#1b5e40; --soil:#0b3d2e; --soil-light:#1b5e40; --grass:#1b5e40; }
body.theme-solitaire .sky { background: linear-gradient(180deg,#0b3d2e,#1b5e40); }
body.theme-solitaire .logo { color:#ffd43b; text-shadow:3px 3px 0 #06281e; }
body.theme-solitaire .canvas-wrap { background:#0b3d2e; }

body.theme-chess { --accent:#f0d9b5; --sky-top:#5c3d2e; --sky-bot:#7c5a42; --soil:#5c3d2e; --soil-light:#7c5a42; --grass:#7c5a42; }
body.theme-chess .sky { background: linear-gradient(180deg,#5c3d2e,#7c5a42); }
body.theme-chess .logo { color:#f0d9b5; text-shadow:3px 3px 0 #2a1810; }
body.theme-chess .canvas-wrap { background:#5c3d2e; }

body.theme-word { --accent:#6aaa64; --sky-top:#121213; --sky-bot:#212214; --soil:#121213; --soil-light:#212214; --grass:#212214; }
body.theme-word .sky { background:#121213; }
body.theme-word .logo { color:#6aaa64; text-shadow:3px 3px 0 #000; }
body.theme-word .canvas-wrap { background:#121213; }

body.theme-xmd {
  --accent: #ff6b4a;
  --ink: #fff8eb;
  --cream: #fff8eb;
  --soil: #0b3d3a;
}

body.theme-xmd .sky {
  display: none;
}

.hub-nav {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  padding: 0.75rem 1rem 0;
}

body.theme-xmd .hub-nav .tabs {
  margin-top: 0;
}

body.theme-xmd .hub-nav .tab {
  color: #1c140e;
  background: rgba(255, 248, 235, 0.9);
}

body.theme-xmd .hub-nav .tab.is-active {
  background: #ff6b4a;
  color: #fff;
}

.bug-controls {
  display: none;
  width: min(100%, 1100px);
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bug-controls .dpad {
  display: block;
  margin: 0;
  flex-shrink: 0;
}

.touch-btn-attack {
  flex: 0 0 auto;
  width: 110px;
  min-height: 110px;
  border-radius: 50%;
  background: #e85d04;
  color: #fff;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 rgba(28, 20, 14, 0.2);
  font-family: Bungee, cursive;
  font-size: 0.75rem;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}

.touch-btn-attack:active,
.touch-btn-attack.is-pressed {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(28, 20, 14, 0.2);
}

.dpad {
  display: none;
  width: min(100%, 220px);
  height: 180px;
  margin-top: 0.25rem;
  position: relative;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.dpad-btn {
  position: absolute;
  width: 64px;
  height: 64px;
  border: 3px solid var(--ink);
  border-radius: 14px;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ink);
  background: #ffd166;
  box-shadow: 4px 4px 0 rgba(28, 20, 14, 0.2);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.dpad-btn:active,
.dpad-btn.is-pressed {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(28, 20, 14, 0.2);
}

.dpad-up { top: 0; left: 50%; transform: translateX(-50%); background: #a8dadc; }
.dpad-down { bottom: 0; left: 50%; transform: translateX(-50%); background: #a8dadc; }
.dpad-left { top: 50%; left: 0; transform: translateY(-50%); background: #f4a261; }
.dpad-right { top: 50%; right: 0; transform: translateY(-50%); background: #f4a261; }

.dpad-up:active,
.dpad-up.is-pressed { transform: translate(-50%, 2px); }
.dpad-down:active,
.dpad-down.is-pressed { transform: translate(-50%, 2px); }
.dpad-left:active,
.dpad-left.is-pressed { transform: translate(2px, -50%); }
.dpad-right:active,
.dpad-right.is-pressed { transform: translate(-2px, -50%); }

@media (max-width: 640px), (pointer: coarse) {
  .overlay-keys { display: none; }
  .touch-pad { display: flex; }
  .dpad { display: block; }
  .bug-controls { display: flex; }
  .touch-btn-attack { display: flex; }
}

.hud {
  display: flex;
  gap: 1.5rem;
  font-family: Bungee, cursive;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}

.hud-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}

.hud-label {
  font-family: "DM Sans", sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.55;
}

.canvas-wrap {
  position: relative;
  width: min(100%, 1100px);
  border: 3px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 6px 6px 0 rgba(28, 20, 14, 0.25);
  background: #dceef5;
  animation: frame-in 0.5s ease-out;
}

#game {
  display: block;
  width: 100%;
  height: auto;
  min-height: min(52vh, 520px);
  aspect-ratio: 1100 / 520;
  vertical-align: middle;
  cursor: pointer;
  touch-action: none;
}

body.is-night .canvas-wrap {
  background: #243447;
  border-color: #0a0806;
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.4);
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(220, 238, 245, 0.72);
  backdrop-filter: blur(2px);
  padding: 1rem;
  text-align: center;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

body.is-night .overlay {
  background: rgba(36, 52, 71, 0.78);
}

.overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.overlay-title {
  font-family: Bungee, cursive;
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  color: var(--accent);
}

.overlay-hint {
  font-weight: 700;
  font-size: 1rem;
}

.overlay-keys {
  list-style: none;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  opacity: 0.8;
  line-height: 1.6;
}

kbd {
  display: inline-block;
  padding: 0.1em 0.4em;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.8em;
  font-weight: 700;
}

.touch-pad {
  display: none;
  width: min(100%, 1100px);
  gap: 0.75rem;
  padding: 0.25rem 0 env(safe-area-inset-bottom, 0);
}

.touch-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 72px;
  border: 3px solid var(--ink);
  border-radius: 12px;
  font-family: Bungee, cursive;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--cream);
  box-shadow: 4px 4px 0 rgba(28, 20, 14, 0.2);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}

.touch-btn:active,
.touch-btn.is-pressed {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 rgba(28, 20, 14, 0.2);
}

.touch-btn-jump {
  background: #ffd166;
}

.touch-btn-peck {
  background: #e9c46a;
}

.touch-icon {
  font-size: 1.4rem;
  line-height: 1;
}

body.is-night .touch-btn {
  border-color: #0a0806;
  color: #1c140e;
}

@media (max-width: 640px), (pointer: coarse) {
  .overlay-keys { display: none; }
  .touch-pad { display: flex; }
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes frame-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}