/* 81 Classic — tmavá retro stránka v barvách automatu (červená, zlatá, rastr obrazovky). */
.retro81-body {
  --bg: #100B0B;
  --surface: #1C1212;
  --text: #F7EDDA;
  --muted: #B8AAA0;
  --accent: #F0C76B;
  --accent-strong: #F0C76B;
  --border: rgba(247, 237, 218, .12);
  --rt-red: #E3231D;
  --rt-red-dark: #8F1513;
  --rt-gold: #F0C76B;
  color-scheme: dark;
}
.retro81-body .site-header { background: var(--bg); }
.retro81-body .logo { color: var(--text); }
.retro81-body .logo-paw, .retro81-body .logo-text b { color: var(--rt-red); }
.retro81-body .lang-switch a:not([aria-current="page"]) { color: var(--muted); }
.retro81-body .lang-switch a[aria-current="page"] { background: var(--rt-gold); color: #241509; }
.retro81-body .site-footer { margin-top: 0; }

.rt-serif { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.03em; }
.rt-eyebrow { margin: 0 0 12px; color: var(--rt-gold); font-size: .8rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.rt-red { color: var(--rt-red); }

.rt-hero { background: radial-gradient(ellipse at 75% 40%, #3A1513 0, var(--bg) 65%); }
.rt-hero-inner { display: grid; gap: 32px; align-items: center; grid-template-columns: 1fr; padding-top: 48px; padding-bottom: 48px; }
.rt-icon { display: block; width: clamp(96px, 22vw, 140px); height: auto; margin: 0 0 16px; filter: drop-shadow(0 8px 24px rgba(227, 35, 29, .35)); }
.rt-title { margin: 0 0 16px; font-size: clamp(2.8rem, 10vw, 4.6rem); line-height: .95; }
.rt-tagline { margin: 0 0 24px; max-width: 30rem; color: var(--muted); font-size: 1.15rem; }
.rt-note { margin: 14px 0 0; color: var(--muted); font-size: .85rem; }
.rt-hero-shot { margin: 0; border: 1px solid rgba(227, 35, 29, .5); border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 6px rgba(227, 35, 29, .06), 0 20px 60px rgba(0, 0, 0, .5); }
.rt-hero-shot img { display: block; width: 100%; height: auto; }
@media (min-width: 48rem) {
  .rt-hero-inner { grid-template-columns: 1fr 1.15fr; }
}

.rt-btn { display: inline-block; font-weight: 800; font-size: 1.1rem; color: #FFFFFF; background: var(--rt-red); border-radius: 6px; padding: 12px 24px; text-decoration: none; box-shadow: 0 4px 0 var(--rt-red-dark); }
.rt-btn:hover { background: #F2382F; transform: translateY(1px); box-shadow: 0 3px 0 var(--rt-red-dark); }
.retro81-body .rt-btn:focus-visible { outline-color: var(--rt-gold); }

.rt-notice { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; margin-bottom: 8px; padding: 18px 20px; border: 1px solid rgba(240, 199, 107, .4); border-radius: 10px; background: rgba(240, 199, 107, .07); }
.rt-notice-icon { flex: 0 0 26px; height: 26px; display: grid; place-items: center; border: 1px solid var(--rt-gold); border-radius: 50%; color: var(--rt-gold); font-family: Georgia, serif; font-weight: 700; }
.rt-notice h2 { margin: 0 0 4px; font-size: 1.05rem; color: var(--rt-gold); }
.rt-notice p { margin: 0; color: var(--muted); }

.rt-section { padding-top: 24px; padding-bottom: 24px; }
.rt-section h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.1; margin: 0 0 16px; }
.rt-features { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.rt-features li { display: flex; gap: 12px; align-items: baseline; }
.rt-features b { color: var(--rt-red); font-size: .8rem; letter-spacing: .08em; }

.rt-controls { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.rt-controls li { position: relative; padding: 20px 18px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(145deg, #241717, var(--surface)); }
.rt-control-symbol { display: block; height: 48px; margin-bottom: 12px; color: var(--rt-red); font-size: 2.6rem; line-height: 1; }
.rt-controls h3 { margin: 0 0 6px; font-family: Georgia, "Times New Roman", serif; }
.rt-controls p { margin: 0 0 12px; color: var(--muted); font-size: .95rem; }
.rt-controls kbd { display: inline-block; padding: 4px 9px; border: 1px solid rgba(247, 237, 218, .2); border-bottom-width: 2px; border-radius: 4px; color: var(--text); font: 700 .8rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.rt-small { color: var(--muted); font-size: .9rem; }