@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --primary: #6B9362;
  --secondary: #3d5c35;
  --background: #14201A;
  --text: #e8ead4;
  --text-muted: #9aab8a;
  --accent-cyan: #4ecdc4;
  --accent-violet: #8b5cf6;
  --accent-amber: #d4a84b;
  --surface: #1c2e24;
  --surface-raised: #223329;
  --border: #2e4835;
  --border-accent: #6B9362;
  --radius: 6px;
  --ta-header-height: 72px;
  --font-heading: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --transition-base: 0.25s ease;
  --transition-slow: 0.6s ease;
  --glow-cyan: 0 0 18px rgba(78, 205, 196, 0.35);
  --glow-primary: 0 0 18px rgba(107, 147, 98, 0.4);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--background);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--accent-cyan);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover, a:focus {
  color: var(--primary);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.15;
  color: var(--text);
}

/* ─── CONTAINER ─────────────────────────────────────────── */

.ta-ortous {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.ta-ortous--wide {
  max-width: 1440px;
}

.ta-ortous--narrow {
  max-width: 780px;
}

/* ─── GRID ───────────────────────────────────────────────── */

.ta-laimel {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

.ta-laimel--two {
  grid-template-columns: 1fr;
}

.ta-laimel--three {
  grid-template-columns: 1fr;
}

.ta-laimel--four {
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .ta-laimel--three {
    grid-template-columns: repeat(2, 1fr);
  }
  .ta-laimel--four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .ta-laimel--two {
    grid-template-columns: repeat(2, 1fr);
  }
  .ta-laimel--three {
    grid-template-columns: repeat(3, 1fr);
  }
  .ta-laimel--four {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ─── HEADER ─────────────────────────────────────────────── */

.ta-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: var(--ta-header-height);
  background: rgba(20, 32, 26, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

.ta-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  max-width: 1440px;
  margin-inline: auto;
}

.ta-pifo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  flex-shrink: 0;
}

.ta-katoag {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1;
}

.ta-pifo img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

/* ─── NAV ────────────────────────────────────────────────── */

.ta-vagefu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ta-vagefu__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}

.ta-vagefu__item {
  list-style: none;
}

.ta-vagefu__link {
  display: block;
  padding: 0.4rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius);
  letter-spacing: 0.01em;
  transition: color var(--transition-base), background var(--transition-base);
}

.ta-vagefu__link:hover,
.ta-vagefu__link:focus {
  color: var(--text);
  background: rgba(107, 147, 98, 0.12);
}

.ta-vagefu--scrolled {
  background: rgba(20, 32, 26, 0.98);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

/* ─── HAMBURGER ──────────────────────────────────────────── */

.ta-tefemi {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0.35rem;
  flex-shrink: 0;
}

.ta-tefemi__line {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 9999px;
  transition: transform var(--transition-base), opacity var(--transition-base);
  transform-origin: center;
}

/* ─── HERO ───────────────────────────────────────────────── */

.ta-urobgu {
  position: relative;
  overflow: hidden;
  min-height: clamp(560px, 90vh, 900px);
  display: flex;
  align-items: flex-end;
  padding-top: var(--ta-header-height);
}

.ta-urobgu--immersive-hero {
  min-height: clamp(620px, 92vh, 960px);
}

.ta-viumug {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ta-media--poif {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: unset;
  z-index: 0;
  pointer-events: none;
}

.ta-media--poif::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(20, 32, 26, 0.3) 0%, rgba(20, 32, 26, 0.55) 60%, rgba(20, 32, 26, 0.92) 100%),
    url('../assets/images/ta-poif.webp'),
    linear-gradient(135deg, #08110d, #1c3020);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.ta-ifeg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 30% 60%, rgba(78, 205, 196, 0.06) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 30%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
}

.ta-uzen {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    160deg,
    rgba(20, 32, 26, 0.1) 0%,
    rgba(20, 32, 26, 0.4) 50%,
    rgba(20, 32, 26, 0.85) 100%
  );
  pointer-events: none;
}

.ta-obugfa {
  position: relative;
  z-index: 2;
  padding-inline: clamp(1.25rem, 5vw, 4rem);
  padding-block: clamp(3rem, 6vh, 5rem);
  max-width: 780px;
}

.ta-zekeem {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  background: rgba(78, 205, 196, 0.1);
  border: 1px solid rgba(78, 205, 196, 0.3);
  border-radius: var(--radius);
  padding: 0.25rem 0.75rem;
  margin-bottom: 1.25rem;
}

.ta-roid {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

.ta-ummu {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.4;
}

.ta-ozsaom {
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: rgba(232, 234, 212, 0.75);
  max-width: 560px;
  line-height: 1.75;
  margin-bottom: 2rem;
}

.ta-ezrinu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* ─── STATS ──────────────────────────────────────────────── */

.ta-neze {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.ta-damu {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ta-damu__value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent-cyan);
  line-height: 1;
}

.ta-damu__label {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ─── BUTTONS ────────────────────────────────────────────── */

.ta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base), color var(--transition-base), border-color var(--transition-base);
  text-decoration: none;
  border: 2px solid transparent;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.ta-btn:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
}

.ta-btn--primary {
  background: var(--primary);
  color: #0a1a0e;
  border-color: var(--primary);
  box-shadow: 0 0 0 rgba(107, 147, 98, 0);
  animation: ta-pulse-glow 3s infinite;
}

@keyframes ta-pulse-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(107, 147, 98, 0.3); }
  50% { box-shadow: 0 0 22px rgba(107, 147, 98, 0.6), 0 0 40px rgba(107, 147, 98, 0.2); }
}

.ta-btn--primary:hover,
.ta-btn--primary:focus {
  background: #7aad70;
  border-color: #7aad70;
  box-shadow: var(--glow-primary);
  transform: translateY(-1px);
}

.ta-btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-accent);
}

.ta-btn--secondary:hover,
.ta-btn--secondary:focus {
  background: rgba(107, 147, 98, 0.1);
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.ta-btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}

.ta-btn--ghost:hover,
.ta-btn--ghost:focus {
  color: var(--text);
  border-color: var(--text-muted);
  background: rgba(232, 234, 212, 0.05);
}

.ta-zoruos {
  pointer-events: none;
}

.ta-dugo {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  pointer-events: none;
}

/* ─── SECTIONS ───────────────────────────────────────────── */

.ta-zuvenu {
  padding-block: clamp(4rem, 8vh, 7rem);
  position: relative;
  overflow: hidden;
}

.ta-zuvenu--alt {
  background: var(--surface);
}

.ta-zuvenu--mycel-doctrine {
  background: var(--background);
  position: relative;
}

.ta-zuvenu--depth-atlas {
  background: var(--surface);
  position: relative;
}

.ta-zuvenu--spore-mechanics {
  background: var(--background);
  position: relative;
}

.ta-zuvenu--decay-codex {
  background: var(--surface);
  position: relative;
}

.ta-zuvenu--network-signals {
  background: var(--background);
  position: relative;
}

.ta-zuvenu--biolum-index {
  background: var(--surface);
  position: relative;
}

.ta-zuvenu--final-cta {
  background: var(--background);
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* ─── SECTION HEADER ─────────────────────────────────────── */

.ta-liregu {
  margin-bottom: clamp(2.5rem, 5vh, 4rem);
}

.ta-erlodo {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 0.875rem;
  padding: 0.2rem 0.625rem;
  border-left: 2px solid var(--accent-cyan);
}

.ta-diuvol {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.875rem;
}

.ta-izsi {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 300;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.ta-doob {
  font-size: 0.975rem;
  color: rgba(232, 234, 212, 0.7);
  max-width: 640px;
  line-height: 1.8;
}

/* ─── SECTION MEDIA ──────────────────────────────────────── */

.ta-vitese {
  position: relative;
  overflow: hidden;
  min-height: clamp(220px, 40vh, 520px);
  border-radius: var(--radius);
}

.ta-vitese--bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  pointer-events: none;
  min-height: unset;
}

/* ─── MEDIA BACKGROUNDS (contract slots) ─────────────────── */

.ta-media--teredu::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(20, 32, 26, 0.8) 0%, rgba(20, 32, 26, 0.3) 50%, rgba(20, 32, 26, 0.6) 100%),
    url('../assets/images/ta-teredu.webp'),
    linear-gradient(135deg, #08110d, #162218);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.ta-media--efisod::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(20, 32, 26, 0.4), rgba(20, 32, 26, 0.6)),
    url('../assets/images/ta-efisod.webp'),
    linear-gradient(135deg, #08110d, #1c2e24);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.ta-media--elapus::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(20, 32, 26, 0.4), rgba(20, 32, 26, 0.5)),
    url('../assets/images/ta-elapus.webp'),
    linear-gradient(135deg, #0a0e1a, #141c2e);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.ta-media--suki::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(20, 32, 26, 0.2), rgba(20, 32, 26, 0.6)),
    url('../assets/images/ta-suki.webp'),
    linear-gradient(135deg, #101a0d, #1a2a14);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.ta-media--poum::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(20, 32, 26, 0.2), rgba(20, 32, 26, 0.6)),
    url('../assets/images/ta-poum.webp'),
    linear-gradient(135deg, #08110d, #1c2010);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.ta-media--ebre::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(20, 32, 26, 0.2), rgba(20, 32, 26, 0.6)),
    url('../assets/images/ta-ebre.webp'),
    linear-gradient(135deg, #0e0814, #1a1028);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.ta-media--ombi::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(20, 32, 26, 0.2), rgba(20, 32, 26, 0.6)),
    url('../assets/images/ta-ombi.webp'),
    linear-gradient(135deg, #12100a, #20180c);
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.ta-media--ropi::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(20, 32, 26, 0.15), rgba(20, 32, 26, 0.5)),
    url('../assets/images/ta-ropi.webp'),
    linear-gradient(135deg, #080e1a, #101828);
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

.ta-media--odte::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(20, 32, 26, 0.15), rgba(20, 32, 26, 0.5)),
    url('../assets/images/ta-odte.webp'),
    linear-gradient(135deg, #100814, #1e0e28);
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

.ta-media--eforis::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgba(20, 32, 26, 0.15), rgba(20, 32, 26, 0.5)),
    url('../assets/images/ta-eforis.webp'),
    linear-gradient(135deg, #0c1210, #161e1a);
  background-size: cover;
  background-position: center top;
  z-index: 0;
}

/* ─── CARDS ──────────────────────────────────────────────── */

.ta-card {
  position: relative;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.ta-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 24px rgba(107, 147, 98, 0.15), 0 0 0 1px rgba(107, 147, 98, 0.1);
  transform: translateY(-2px);
}

.ta-card--spore {
  border-color: rgba(78, 205, 196, 0.25);
}

.ta-card--spore:hover {
  border-color: var(--accent-cyan);
  box-shadow: 0 4px 24px rgba(78, 205, 196, 0.15);
}

.ta-card--depth {
  border-color: rgba(107, 147, 98, 0.25);
}

.ta-card--signal {
  border-color: rgba(139, 92, 246, 0.2);
}

.ta-card--codex {
  border-color: rgba(212, 168, 75, 0.2);
}

.ta-card--doctrine {
  border-color: rgba(107, 147, 98, 0.2);
  background: rgba(28, 46, 36, 0.6);
}

.ta-igimap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(135deg, rgba(107, 147, 98, 0.04) 0%, transparent 60%);
}

.ta-upnu {
  position: relative;
  z-index: 1;
  padding: 1.5rem;
}

.ta-giup {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.ta-ozza {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.65;
}

.ta-okkuna {
  font-size: 1.5rem;
  margin-bottom: 0.875rem;
  display: block;
  line-height: 1;
}

.ta-ilil {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: calc(var(--radius)/2);
  background: rgba(78, 205, 196, 0.12);
  color: var(--accent-cyan);
  border: 1px solid rgba(78, 205, 196, 0.25);
  margin-bottom: 0.75rem;
}

.ta-bias {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: calc(var(--radius)/2);
  background: rgba(107, 147, 98, 0.1);
  color: var(--primary);
  border: 1px solid rgba(107, 147, 98, 0.2);
}

/* ─── CARD MEDIA ZONES ───────────────────────────────────── */

.ta-depth-zone {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.ta-depth-zone:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 20px rgba(107, 147, 98, 0.12);
}

.ta-depth-zone__media {
  position: relative;
  min-height: clamp(180px, 28vh, 280px);
  overflow: hidden;
}

.ta-depth-zone__level {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  background: rgba(20, 32, 26, 0.8);
  border: 1px solid rgba(78, 205, 196, 0.3);
  padding: 0.2rem 0.5rem;
  border-radius: calc(var(--radius)/2);
}

.ta-depth-zone__name {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.5rem;
}

.ta-depth-zone__description {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

.ta-depth-zone__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.25rem;
}

.ta-depth-zone__danger {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e05c5c;
  background: rgba(224, 92, 92, 0.1);
  border: 1px solid rgba(224, 92, 92, 0.25);
  padding: 0.2rem 0.5rem;
  border-radius: calc(var(--radius)/2);
}

.ta-depth-zone__spore {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  background: rgba(78, 205, 196, 0.08);
  border: 1px solid rgba(78, 205, 196, 0.2);
  padding: 0.2rem 0.5rem;
  border-radius: calc(var(--radius)/2);
}

/* zone meta full padding override */
.ta-depth-zone > .ta-depth-zone__meta {
  padding: 1.25rem;
  flex-direction: column;
  gap: 0.75rem;
}

/* ─── STEPS ──────────────────────────────────────────────── */

.ta-dita {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  counter-reset: steps;
}

.ta-kutate {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 1rem;
  align-items: start;
}

.ta-kutate__number {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(107, 147, 98, 0.12);
  border: 1px solid var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--primary);
  flex-shrink: 0;
  box-shadow: var(--glow-primary);
}

.ta-kutate__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.ta-kutate__body {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ─── RULES LIST ─────────────────────────────────────────── */

.ta-beguri {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ta-beguri__item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: rgba(232, 234, 212, 0.8);
  line-height: 1.65;
  padding-left: 0;
}

.ta-beguri__item::before {
  content: '⟶';
  color: var(--primary);
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* ─── CODEX ──────────────────────────────────────────────── */

.ta-gabanu {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ta-codex-entry {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition-base);
  position: relative;
}

.ta-codex-entry--unlocked {
  border-left: 3px solid var(--primary);
}

.ta-codex-entry--unlocked:hover {
  border-color: var(--primary);
}

.ta-codex-entry--locked {
  opacity: 0.5;
  border-left: 3px solid var(--border);
}

.ta-codex-entry__id {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  flex-shrink: 0;
  min-width: 3rem;
  text-transform: uppercase;
}

.ta-codex-entry__title {
  font-family: var(--font-heading);
  font-size: 0.975rem;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.ta-codex-entry__preview {
  font-size: 0.8rem;
  color: var(--text-muted);
  flex: 2;
  line-height: 1.5;
  display: none;
}

.ta-codex-entry__lock {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  opacity: 0.6;
}

@media (min-width: 640px) {
  .ta-codex-entry__preview {
    display: block;
  }
}

/* ─── SIGNALS ────────────────────────────────────────────── */

.ta-kuzemi {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ta-pafo {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 3px solid transparent;
  transition: border-color var(--transition-base);
}

.ta-pafo--discovery {
  border-left-color: var(--accent-cyan);
}

.ta-pafo--warning {
  border-left-color: #e05c5c;
}

.ta-pafo--event {
  border-left-color: var(--accent-violet);
}

.ta-pafo--legacy {
  border-left-color: var(--accent-amber);
}

.ta-pafo__icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
  line-height: 1;
}

.ta-pafo__message {
  flex: 1;
  font-size: 0.875rem;
  color: rgba(232, 234, 212, 0.85);
  line-height: 1.6;
}

.ta-pafo__timestamp {
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-shrink: 0;
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
  white-space: nowrap;
}

/* ─── PILLARS ────────────────────────────────────────────── */

.ta-busu {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (min-width: 640px) {
  .ta-busu {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .ta-busu {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ta-kivepa {
  padding: 1.25rem;
  background: rgba(28, 46, 36, 0.5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition-base);
}

.ta-kivepa:hover {
  border-color: var(--primary);
}

.ta-kivepa__icon {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  display: block;
  line-height: 1;
}

.ta-kivepa__title {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.ta-kivepa__text {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ─── BODY TEXT ──────────────────────────────────────────── */

.ta-pame {
  max-width: 640px;
  position: relative;
  z-index: 1;
}

.ta-pame__paragraph {
  font-size: 0.975rem;
  color: rgba(232, 234, 212, 0.78);
  line-height: 1.85;
  margin-bottom: 1.25rem;
}

.ta-pame__paragraph:last-child {
  margin-bottom: 0;
}

/* ─── SPORE TRAITS ───────────────────────────────────────── */

.ta-ligu,
.ta-gize {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  margin-top: 0.35rem;
}

.ta-ligu {
  color: var(--primary);
}

.ta-gize {
  color: #e05c5c;
}

.ta-ligu::before {
  content: '+';
  font-weight: 700;
}

.ta-gize::before {
  content: '−';
  font-weight: 700;
}

/* ─── CTA BLOCK ──────────────────────────────────────────── */

.ta-mose {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  align-items: center;
  margin-top: 2.5rem;
}

.ta-mose--final {
  justify-content: center;
}

/* ─── FOOTNOTE ───────────────────────────────────────────── */

.ta-bukabo {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 1.25rem;
  opacity: 0.7;
}

/* ─── FOOTER ─────────────────────────────────────────────── */

.ta-mosusi {
  background: #0d1810;
  border-top: 1px solid var(--border);
  padding-block: clamp(2.5rem, 5vh, 4rem);
}

.ta-mosusi__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  .ta-mosusi__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.ta-mosusi__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

.ta-mosusi__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  list-style: none;
}

.ta-mosusi__nav-link {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-base);
  padding: 0.25rem 0;
}

.ta-mosusi__nav-link:hover {
  color: var(--text);
}

.ta-kutaku {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-muted);
  opacity: 0.7;
  margin-top: 0.25rem;
}

.ta-afalas {
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.55;
  margin-top: 1rem;
}

/* ─── COOKIE BANNER ──────────────────────────────────────── */

#ta-ruziri {
  display: none;
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 1000;
}

#ta-ruziri.ta-devo {
  display: block;
}

.ta-ruziri__inner {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  max-width: 720px;
  margin-inline: auto;
}

@media (min-width: 640px) {
  .ta-ruziri__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.ta-ruziri__text {
  font-size: 0.875rem;
  color: rgba(232, 234, 212, 0.85);
  line-height: 1.6;
  flex: 1;
}

.ta-ruziri__link {
  color: var(--accent-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: inherit;
}

.ta-ruziri__link:hover {
  color: var(--primary);
}

.ta-ruziri__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ─── SCROLL REVEAL ──────────────────────────────────────── */

[data-ta-kena] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

[data-ta-kena].ta-kena--in {
  opacity: 1;
  transform: none;
}

/* ─── SPORE CARD MEDIA AREAS ─────────────────────────────── */

.ta-card--spore .ta-igimap {
  top: 0;
  left: 0;
  right: 0;
  height: clamp(160px, 22vh, 240px);
  position: relative;
  min-height: clamp(160px, 22vh, 240px);
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  flex-shrink: 0;
}

.ta-card--spore {
  display: flex;
  flex-direction: column;
}

.ta-card--spore .ta-upnu {
  flex: 1;
}

/* ─── DEPTH ZONE CARD META LAYOUT ────────────────────────── */

.ta-depth-zone > .ta-depth-zone__media {
  position: relative;
  min-height: clamp(180px, 28vh, 280px);
  overflow: hidden;
}

.ta-depth-zone > .ta-depth-zone__meta {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

/* ─── FINAL CTA SECTION ──────────────────────────────────── */

.ta-zuvenu--final-cta .ta-vitese--bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(78, 205, 196, 0.07) 0%, transparent 60%),
    linear-gradient(to bottom, var(--background), rgba(20, 32, 26, 0.95));
}

.ta-zuvenu--final-cta .ta-roid {
  font-size: clamp(2rem, 5vw, 4rem);
}

/* ─── MOBILE ─────────────────────────────────────────────── */

@media (max-width: 899px) {
  .ta-tefemi {
    display: flex;
  }

  .ta-vagefu__list {
    display: none;
  }

  .ta-vagefu--open .ta-vagefu__list {
    position: fixed;
    left: max(0px, env(safe-area-inset-left));
    right: max(0px, env(safe-area-inset-right));
    top: var(--ta-header-height, 72px);
    width: auto;
    max-width: 100vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    overflow-y: auto;
    max-height: calc(100vh - var(--ta-header-height, 72px));
    max-height: calc(100dvh - var(--ta-header-height, 72px));
    background: rgba(20, 32, 26, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem;
    gap: 0.25rem;
  }

  .ta-vagefu--open .ta-vagefu__item {
    width: 100%;
  }

  .ta-vagefu--open .ta-vagefu__link {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    border-radius: var(--radius);
  }

  .ta-vagefu--open .ta-vagefu__link:hover {
    background: rgba(107, 147, 98, 0.12);
  }

  .ta-tefemi--open .ta-tefemi__line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .ta-tefemi--open .ta-tefemi__line:nth-child(2) {
    opacity: 0;
  }

  .ta-tefemi--open .ta-tefemi__line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .ta-obugfa {
    padding-inline: 1.25rem;
  }
}

/* ─── DECORATIVE PATTERNS ────────────────────────────────── */

.ta-zuvenu--mycel-doctrine::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: radial-gradient(ellipse at right center, rgba(78, 205, 196, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.ta-zuvenu--biolum-index::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(78, 205, 196, 0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.ta-zuvenu--biolum-index > * {
  position: relative;
  z-index: 1;
}

/* ─── FOCUS STATES ───────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--accent-cyan);
  outline-offset: 3px;
  border-radius: calc(var(--radius)/2);
}

/* ─── SELECTION ──────────────────────────────────────────── */

::selection {
  background: rgba(107, 147, 98, 0.35);
  color: var(--text);
}

/* ─── SCROLLBAR ──────────────────────────────────────────── */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--background);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* ─── MISC SIGNAL SECTION LAYOUT ─────────────────────────── */

.ta-zuvenu--network-signals .ta-kuzemi {
  position: relative;
  z-index: 1;
}

/* ─── BIOLUM SPORE CARD IMAGE AREAS ──────────────────────── */

.ta-card--spore .ta-igimap {
  height: clamp(160px, 22vh, 240px);
  min-height: clamp(160px, 22vh, 240px);
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* Assign spore card images via order if wrapping in grid */
.ta-card--spore:nth-child(1) .ta-igimap { background-color: #08111a; }
.ta-card--spore:nth-child(2) .ta-igimap { background-color: #12081a; }
.ta-card--spore:nth-child(3) .ta-igimap { background-color: #0c120e; }

/* ─── BIOLUM INDEX AMBIENT SECTION BG ────────────────────── */

.ta-zuvenu--biolum-index .ta-vitese--bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.ta-media--bait {
  width: 36px;
  height: 36px;
}

/* ─── LEGAL PAGES ────────────────────────────────────────── */

.ta-legal-page {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding-block: clamp(5rem, 10vh, 7rem);
  padding-top: calc(var(--ta-header-height) + clamp(2rem, 4vh, 3rem));
}

.ta-legal-page h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: 0.5rem;
}

.ta-legal-page h2 {
  font-size: 1.3rem;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  color: var(--text);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

.ta-legal-page h3 {
  font-size: 1.05rem;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.ta-legal-page p {
  font-size: 0.9rem;
  color: rgba(232, 234, 212, 0.75);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.ta-legal-page ul, .ta-legal-page ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.ta-legal-page li {
  font-size: 0.9rem;
  color: rgba(232, 234, 212, 0.75);
  line-height: 1.75;
  margin-bottom: 0.35rem;
}

.ta-legal-page a {
  color: var(--accent-cyan);
  word-break: break-all;
}

.ta-legal-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

/* ─── DEMO PAGE ──────────────────────────────────────────── */

.ta-demo-page {
  padding-top: calc(var(--ta-header-height) + clamp(1.5rem, 3vh, 2.5rem));
  padding-bottom: clamp(3rem, 6vh, 5rem);
  min-height: 100vh;
}

.ta-demo-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.ta-demo-header h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  margin-bottom: 0.5rem;
}

.ta-demo-header p {
  color: var(--text-muted);
  font-size: 0.975rem;
  max-width: 560px;
  margin-inline: auto;
}

.ta-game-shell {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.ta-game-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}

.ta-game-hud__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.ta-game-hud__val {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-cyan);
  line-height: 1;
}

.ta-game-hud__lbl {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ta-game-hud__actions {
  display: flex;
  gap: 0.5rem;
}

.ta-game-board {
  display: grid;
  gap: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-top: 2px solid var(--primary);
  overflow: hidden;
}

.ta-game-cell {
  aspect-ratio: 1;
  border: 1px solid rgba(46, 72, 53, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.8rem, 2vw, 1.1rem);
  transition: background var(--transition-base), box-shadow var(--transition-base), transform 0.1s ease;
  position: relative;
  overflow: hidden;
  background: rgba(20, 32, 26, 0.4);
  user-select: none;
  -webkit-user-select: none;
}

.ta-game-cell:hover:not(.ta-game-cell--empty):not(.ta-game-cell--blocked) {
  background: rgba(107, 147, 98, 0.08);
  box-shadow: inset 0 0 0 1px rgba(107, 147, 98, 0.3);
}

.ta-game-cell--mycel {
  background: rgba(107, 147, 98, 0.15);
  box-shadow: inset 0 0 8px rgba(107, 147, 98, 0.2);
}

.ta-game-cell--spore {
  background: rgba(78, 205, 196, 0.08);
  cursor: pointer;
}

.ta-game-cell--spore:hover {
  background: rgba(78, 205, 196, 0.15) !important;
  box-shadow: inset 0 0 12px rgba(78, 205, 196, 0.25) !important;
  transform: scale(1.03);
}

.ta-game-cell--obstacle {
  background: rgba(28, 16, 16, 0.6);
  cursor: not-allowed;
}

.ta-game-cell--selected {
  box-shadow: inset 0 0 0 2px var(--primary), 0 0 12px rgba(107, 147, 98, 0.4) !important;
  background: rgba(107, 147, 98, 0.2) !important;
  z-index: 2;
}

.ta-game-cell--pulsing {
  animation: ta-cell-pulse 0.8s ease;
}

@keyframes ta-cell-pulse {
  0% { box-shadow: inset 0 0 0 2px var(--accent-cyan), 0 0 0 0 rgba(78, 205, 196, 0.6); }
  50% { box-shadow: inset 0 0 0 2px var(--accent-cyan), 0 0 0 12px rgba(78, 205, 196, 0); }
  100% { box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent; }
}

.ta-game-log {
  margin-top: 0;
  padding: 0.875rem 1.25rem;
  background: rgba(13, 24, 16, 0.8);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ta-game-log__message {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
}

.ta-game-log__message--success {
  color: var(--primary);
}

.ta-game-log__message--warning {
  color: var(--accent-amber);
}

.ta-game-log__message--error {
  color: #e05c5c;
}

.ta-game-log__message--info {
  color: var(--accent-cyan);
}

.ta-game-controls {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
}

.ta-game-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.ta-legend-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.ta-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: calc(var(--radius)/2);
  flex-shrink: 0;
}

.ta-legend-dot--mycel { background: rgba(107, 147, 98, 0.5); border: 1px solid var(--primary); }
.ta-legend-dot--spore { background: rgba(78, 205, 196, 0.3); border: 1px solid var(--accent-cyan); }
.ta-legend-dot--obstacle { background: rgba(80, 40, 40, 0.6); border: 1px solid rgba(200, 80, 80, 0.3); }
.ta-legend-dot--empty { background: rgba(20, 32, 26, 0.4); border: 1px solid var(--border); }

.ta-game-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(20, 32, 26, 0.60);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1.5rem;
  z-index: 10;
  border-radius: var(--radius);
  text-align: center;
  padding: 2rem;
}

.ta-game-overlay--visible {
  display: flex;
}

.ta-game-overlay__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--text);
}

.ta-game-overlay__body {
  font-size: 0.975rem;
  color: var(--text-muted);
  max-width: 360px;
}

.ta-game-wrap {
  position: relative;
}

/* ─── RULES PAGE ─────────────────────────────────────────── */

.ta-rules-page {
  padding-top: calc(var(--ta-header-height) + clamp(2rem, 4vh, 3rem));
  padding-bottom: clamp(3rem, 6vh, 5rem);
}

.ta-rules-section {
  padding-block: 2rem;
  border-bottom: 1px solid var(--border);
}

.ta-rules-section:last-child {
  border-bottom: none;
}

.ta-rules-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

@media (min-width: 640px) {
  .ta-rules-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .ta-rules-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ta-rule-card {
  padding: 1.25rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  border-left: 3px solid var(--primary);
}

.ta-rule-card h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--text);
}

.ta-rule-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ─── HIGH-SCORE TABLE ───────────────────────────────────── */

.ta-score-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.875rem;
}

.ta-score-table th {
  text-align: left;
  padding: 0.6rem 0.875rem;
  background: var(--surface);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}

.ta-score-table td {
  padding: 0.6rem 0.875rem;
  color: rgba(232, 234, 212, 0.8);
  border-bottom: 1px solid rgba(46, 72, 53, 0.4);
}

.ta-score-table tr:last-child td {
  border-bottom: none;
}

.ta-score-table tr:hover td {
  background: rgba(107, 147, 98, 0.04);
}

/* ─── PROGRESS BAR ───────────────────────────────────────── */

.ta-progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 0.35rem;
}

.ta-progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent-cyan));
  border-radius: 9999px;
  transition: width 0.6s ease;
  box-shadow: 0 0 8px rgba(78, 205, 196, 0.4);
}

/* ─── RESPONSIVE TOUCH ───────────────────────────────────── */

@media (hover: none) and (pointer: coarse) {
  .ta-game-cell {
    font-size: clamp(1rem, 3vw, 1.4rem);
  }

  .ta-btn {
    padding: 0.875rem 1.75rem;
    min-height: 48px;
  }
}

/* ─── PRINT ──────────────────────────────────────────────── */

@media print {
  .ta-header, .ta-mosusi, #ta-ruziri, .ta-tefemi {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }
}

/* A+ CSS coverage repair (bounded) */
`.ta-demo-page-header{display:flex;flex-direction:column;align-items:flex-start;padding:4rem 2rem 2rem;background:#14201A;border-bottom:2px solid #6B9362;min-height:18rem;position:relative;overflow:hidden}
.ta-demo-page-header::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 80%,rgba(107,147,98,0.12) 0%,transparent 60%);pointer-events:none}
.ta-demo-intro-kicker{font-family:'Inter',sans-serif;font-size:0.75rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:#6B9362;margin-bottom:0.75rem}
.ta-demo-intro-h1{font-family:'Fraunces',serif;font-size:clamp(2.2rem,6vw,4.5rem);font-weight:700;color:#e8ead4;line-height:1.05;margin:0 0 1rem;max-width:36ch}
.ta-demo-intro-sub{font-family:'Inter',sans-serif;font-size:1rem;color:#a8b89a;line-height:1.6;max-width:54ch;margin:0 0 0.75rem}
.ta-demo-intro-note{font-family:'Inter',sans-serif;font-size:0.8rem;color:#5a7a52;font-style:italic;margin:0}
.ta-mibefu{display:flex;flex-direction:column;gap:2.5rem;padding:2.5rem 2rem;background:#14201A}
.ta-demo-start-wrap{display:flex;flex-direction:column;gap:1.25rem;padding:2rem;background:#1a2b22;border:1.5px solid #3d5c35;position:relative}
.ta-demo-start-wrap::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%233d5c35' stroke-width='0.4' opacity='0.25'%3E%3Cpath d='M30 0 Q35 15 50 20 Q35 25 30 60 Q25 25 10 20 Q25 15 30 0Z'/%3E%3C/g%3E%3C/svg%3E") repeat;pointer-events:none}
.ta-demo-start-title{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:600;color:#e8ead4;margin:0}
.ta-demo-start-body{font-family:'Inter',sans-serif;font-size:0.9rem;color:#a8b89a;line-height:1.65;margin:0;max-width:60ch}
.ta-kufafa{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem}
.ta-kekadi{display:flex;flex-direction:column;gap:0.35rem;padding:1rem 1.25rem;background:#111c16;border:1.5px solid #3d5c35;border-left:3px solid #6B9362;position:relative}
.ta-kekadi__label{font-family:'Inter',sans-serif;font-size:0.7rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:#5a7a52}
.ta-kekadi__value{font-family:'Fraunces',serif;font-size:1.5rem;font-weight:700;color:#6B9362;line-height:1}
.ta-dake{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.ta-ilos{display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem 0}
.ta-demo-spore-select{display:flex;flex-wrap:wrap;gap:0.5rem}
.ta-spore-btn{font-family:'Inter',sans-serif;font-size:0.8rem;font-weight:500;padding:0.45rem 1rem;background:transparent;border:1.5px solid #3d5c35;color:#a8b89a;cursor:pointer;transition:background 0.2s,border-color 0.2s,color 0.2s;letter-spacing:0.04em}
.ta-spore-btn:hover{background:#1f3328;border-color:#6B9362;color:#e8ead4}
.ta-spore-active{background:#1f3328;border:1.5px solid #6B9362;color:#6B9362;font-weight:600}
.ta-kete{display:flex;flex-direction:column;gap:2rem;padding:1.5rem 0}
.ta-demo-legend{display:flex;flex-wrap:wrap;gap:0.75rem 1.5rem;padding:0.75rem 0}
.ta-demo-legend-item{display:flex;align-items:center;gap:0.5rem;font-family:'Inter',sans-serif;font-size:0.78rem;color:#a8b89a}
.ta-muma{display:flex;flex-direction:column;gap:1.5rem;padding:2rem;background:#111c16;border:1.5px solid #3d5c35}
.ta-gezusa{position:fixed;inset:0;background:rgba(10,16,12,0.88);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:1rem}
.ta-overlay-title{font-family:'Fraunces',serif;font-size:1.75rem;font-weight:700;color:#e8ead4;margin:0 0 0.75rem}
.ta-overlay-body{font-family:'Inter',sans-serif;font-size:0.9rem;color:#a8b89a;line-height:1.65;margin:0 0 1rem}
.ta-overlay-score{font-family:'Fraunces',serif;font-size:3rem;font-weight:900;color:#6B9362;line-height:1;margin:0.5rem 0}
.ta-feda{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;background:#14201A;border:1.5px solid #3d5c35;max-width:36rem;width:100%}
.ta-demo-info-section{padding:3rem 2rem;background:#14201A;border-top:1px solid #2a3d2e}
.ta-demo-info-kicker{font-family:'Inter',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:#6B9362;margin-bottom:0.6rem}
.ta-demo-info-heading{font-family:'Fraunces',serif;font-size:clamp(1.6rem,4vw,2.8rem);font-weight:700;color:#e8ead4;margin:0 0 0.75rem;line-height:1.1}
.ta-demo-info-sub{font-family:'Inter',sans-serif;font-size:0.95rem;color:#a8b89a;line-height:1.6;max-width:58ch;margin:0 0 2rem}
.ta-demo-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.25rem}
.ta-demo-info-card{display:flex;flex-direction:column;gap:0.75rem;padding:1.5rem;background:#111c16;border:1.5px solid #3d5c35;border-top:3px solid #6B9362;position:relative;overflow:hidden}
.ta-demo-info-card::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(107,147,98,0.04) 0%,transparent 60%);pointer-events:none}
.ta-demo-info-card__heading{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:600;color:#e8ead4;margin:0}
.ta-demo-info-card__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.4rem}
.ta-demo-info-card__list li{font-family:'Inter',sans-serif;font-size:0.82rem;color:#a8b89a;padding-left:1rem;position:relative;line-height:1.5}
.ta-demo-info-card__list li::before{content:'';position:absolute;left:0;top:0.55em;width:5px;height:5px;background:#6B9362}
.ta-pifo__img{display:block;width:100%;max-width:12rem;height:auto;opacity:0.75;filter:saturate(0.6) brightness(0.85)}
.ta-mosusi__bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 2rem;border-top:1px solid #2a3d2e;background:#0e1912}
.ta-ruziri{font-family:'Inter',sans-serif;font-size:0.75rem;color:#4a6644;letter-spacing:0.06em}
.ta-gofi{display:flex;align-items:center;justify-content:center;min-height:100vh;width:100%;background:#14201A;padding:1rem}