/* Rozcestník: hlavička, karty her (každá v barvách své hry), vysvětlení názvu. */

.portal { max-width: 1080px; }

/* ---------- Hlavička ---------- */

.portal-head { text-align: center; margin: 4px auto 30px; }
.portal-logo { width: 72px; height: 72px; margin: 0 auto 4px; }
.portal-head .page-title { margin-bottom: 0.1em; letter-spacing: 0.04em; }
.portal-subtitle { margin: 0 0 6px; font-size: 1.2rem; font-style: italic; color: var(--highlight); }
.portal-tagline { margin: 0; font-size: 1.05rem; color: var(--muted); }

/* ---------- Karty her ---------- */

.games { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; }
.game-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid var(--edge);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--surface-effect);
}
.game-image { display: block; overflow: hidden; }
.game-image img { width: 100%; height: auto; aspect-ratio: 20 / 7; object-fit: cover; transition: transform 0.5s ease; }
.game-card:hover .game-image img { transform: scale(1.04); }
.game-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 18px 22px 22px; }
.game-body p { margin: 0; }
.game-title { margin: 0; font-size: 1.45rem; line-height: 1.2; color: var(--heading); }
.game-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.game-facts li { padding: 1px 10px; border: 1px solid var(--edge); border-radius: 999px; font-size: 0.82rem; color: var(--muted); }
.game-actions { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.game-request { font-size: 0.95rem; }

/* Záhada vody: podmořský svět (barvy z apps/zahada-vody/public/css/theme.css). */
.game-aqua {
  --surface: linear-gradient(180deg, #08385c 0%, #021a2e 100%);
  --surface-effect: inset 0 0 28px rgba(110, 220, 255, 0.16), 0 10px 30px rgba(2, 26, 46, 0.35);
  --edge: rgba(150, 228, 255, 0.42);
  --text: #eaf8ff;
  --muted: #a6cde0;
  --heading: #c8f6ff;
  --accent: #7fe9ff;
  --btn-hover-effect: 0 0 16px rgba(127, 233, 255, 0.45);
  --btn-primary-bg: linear-gradient(180deg, #4fd9ff 0%, #1696cf 55%, #0b6aa0 100%);
  --btn-primary-border: #bff5ff;
  --btn-primary-text: #fff;
  --btn-primary-text-shadow: 0 1px 3px rgba(0, 40, 70, 0.7);
  --btn-primary-effect: inset 0 2px 4px rgba(255, 255, 255, 0.5), 0 0 18px rgba(79, 217, 255, 0.45);
}
.game-aqua .game-title { text-shadow: 0 0 10px rgba(127, 233, 255, 0.55); }

/* Cuprum: pergamen a měď (barvy z apps/cuprum/public/css/theme.css). */
.game-cuprum {
  --surface: linear-gradient(180deg, #fbf4e2 0%, #f3e6c9 100%);
  --surface-effect: inset 0 0 36px rgba(150, 100, 40, 0.16), 0 8px 26px rgba(70, 40, 10, 0.22);
  --edge: #967446;
  --text: #3b2a1a;
  --muted: #69503a;
  --heading: #4a2410;
  --accent: #8a3f12;
  --btn-hover-effect: 0 0 0 3px rgba(154, 84, 24, 0.25);
  --btn-primary-bg: linear-gradient(180deg, #a85a22 0%, #8a4513 60%, #73370c 100%);
  --btn-primary-border: #5c2a08;
  --btn-primary-text: #fff8ec;
  --btn-primary-text-shadow: 0 1px 1px rgba(50, 20, 0, 0.6);
  --btn-primary-effect: inset 0 1px 0 rgba(255, 214, 170, 0.55), 0 3px 8px rgba(80, 40, 10, 0.35);
  border-radius: 6px;
}
.game-cuprum .game-title { font-family: var(--font-heading); }

/* ---------- Pro učitele ---------- */

.teachers { margin-top: 28px; }
.teachers h2 { margin: 0 0 6px; font-size: 1.2rem; color: var(--heading); }
.teachers p { margin: 0; }

/* ---------- Proč Chemia ludus ---------- */

.about { margin-top: 28px; padding: 30px clamp(20px, 5vw, 52px) 34px; }
.about .headline { margin: 0 0 4px; text-align: center; font-size: clamp(1.45rem, 3.6vw, 2.1rem); }
.about-lead { margin: 0 0 22px; text-align: center; font-size: 1.1rem; font-style: italic; color: var(--highlight); }
.about-text { max-width: 68ch; margin: 0 auto; }
.about-text p { margin: 0 0 1em; hyphens: auto; }
/* Iniciála přes tři řádky textu. */
.drop-cap::first-letter { float: left; margin: 2px 10px 0 0; font-family: var(--font-heading); font-size: 4.2em; line-height: 0.88; color: var(--highlight); }
.motto { max-width: 600px; margin: 26px auto 0; padding: 18px 12px; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); text-align: center; }
.motto blockquote { margin: 0; font-family: var(--font-heading); font-size: clamp(1.05rem, 2.6vw, 1.35rem); line-height: 1.4; color: var(--heading); }
.motto figcaption { margin-top: 8px; font-style: italic; color: var(--muted); }
.motto figcaption span { font-size: 0.8rem; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }

.more { margin: 26px 0 0; text-align: center; font-size: 0.85rem; color: var(--muted); }