:root {
  --bg: #120d0a;
  --ink: #f3e6d4;
  --muted: #b49a82;
  --line: #3a2418;
  --ember: #d4521a;
  --gold: #e2b15a;
  --panel: #1d1410;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font: 15px/1.45 "Segoe UI", Tahoma, sans-serif; }
a { color: var(--gold); text-decoration: none; }
.top {
  display: flex; gap: 24px; align-items: center;
  padding: 16px 22px; border-bottom: 1px solid var(--line); background: #1a100c;
}
.logo { color: var(--ink); font-weight: 800; letter-spacing: .04em; }
.top nav { display: flex; gap: 16px; flex-wrap: wrap; }
.wrap { padding: 22px; max-width: 1200px; margin: 0 auto; }
.hero h1 { margin: 0 0 6px; }
.hero p, .muted { color: var(--muted); }
.block { margin-top: 28px; }
.block-head { display: flex; justify-content: space-between; align-items: baseline; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 14px;
  display: grid;
  gap: 8px;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
}
.card:hover { border-color: var(--gold); }
.thumb {
  height: 140px; position: relative; overflow: hidden;
  background: #2a1710; color: var(--ember); font-size: 28px; font-weight: 800;
  border-radius: 4px;
}
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card span { color: var(--muted); font-size: 12px; }
.play-bar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px;
}
.play-frame {
  width: 100%; height: calc(100vh - 130px); border: 0; background: #000;
}
body:has(.play-frame) .wrap { max-width: none; padding: 12px 16px 0; }