/* ── LEGEND ── */
/* Kingdom selector hidden — may be re-enabled later */
#legend{display:none;position:fixed;bottom:4.5rem;left:1.2rem;z-index:var(--z-nav);
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);
  padding:0.7rem 0.9rem;pointer-events:auto;box-shadow:var(--shadow-1);backdrop-filter:var(--glass-blur);}
.leg-title{font-size:var(--text-2xs);letter-spacing:0.18em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:0.25rem;font-weight:600;}
.leg-row{display:flex;align-items:center;gap:0.45rem;font-size:var(--text-2xs);color:var(--text-secondary);margin-top:0.2rem;
  padding:3px 6px;border-radius:6px;transition:opacity 0.3s ease,background 0.3s ease,font-weight 0.15s ease;}
.leg-row.active{background:rgba(255,255,255,0.08);font-weight:600;color:var(--text-primary);}
.leg-row.dimmed{opacity:0.35;}
.leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:box-shadow 0.3s ease;}
.leg-row.active .leg-dot{box-shadow:0 0 6px 2px currentColor;}
#leg-show-all{font-size:var(--text-xs);padding:3px 10px;border-radius:9999px;border:1px solid var(--border);
  background:transparent;color:var(--text-secondary);cursor:pointer;margin-top:8px;
  font-family:var(--font-sans);transition:all 0.3s ease;}
#leg-show-all:hover{border-color:var(--accent-primary);color:var(--text-primary);}
#leg-show-all.filtering{border-color:var(--accent-primary);color:var(--accent-primary);font-weight:600;}

/* ── ZOOM CONTROLS ── */
#zoom-ctrl{position:fixed;bottom:4.5rem;right:1.2rem;z-index:var(--z-nav);display:flex;flex-direction:column;gap:0.35rem;}
.zbtn{width:32px;height:32px;background:var(--glass-bg,rgba(26,29,35,0.75));backdrop-filter:var(--glass-blur,blur(12px));
  border:1px solid var(--glass-border,var(--border));border-radius:var(--radius-sm);color:var(--text-secondary);
  font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all var(--transition-fast);box-shadow:var(--shadow-1,none);}
.zbtn:hover{background:var(--surface-raised);border-color:var(--accent-primary);color:var(--text-primary);
  transform:scale(1.05);}
.zbtn:active{transform:scale(0.97);}



/* ── TOOLTIP ── */
#tooltip{position:fixed;pointer-events:none !important;z-index:var(--z-splash);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:8px 12px;font-family:var(--font-sans);
  font-size:var(--text-sm);color:var(--text-primary);box-shadow:var(--shadow-2);
  max-width:280px;line-height:1.4;opacity:0;visibility:hidden;
  transition:opacity 150ms ease;transform:translate(16px,-50%);white-space:nowrap;}
.tip-fact-line{font-size:var(--text-xs);font-style:italic;color:var(--text-secondary);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;}

/* ── DISCOVERY FACT TOAST ── */
#fact-toast{position:fixed;top:5rem;left:50%;transform:translateX(-50%) translateY(-20px);
  z-index:var(--z-toast);background:var(--surface);border:1px solid var(--accent-primary, var(--accent));
  border-radius:12px;padding:14px 20px;max-width:420px;width:90vw;
  box-shadow:0 8px 32px rgba(0,0,0,0.25);font-family:var(--font-sans);
  opacity:0;visibility:hidden;transition:opacity 300ms ease,transform 300ms ease,visibility 300ms;}
#fact-toast.visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
#fact-toast .ft-label{font-size:var(--text-2xs);font-weight:700;color:var(--accent-primary, var(--accent));
  letter-spacing:0.1em;margin-bottom:6px;}
#fact-toast .ft-text{font-size:var(--text-sm);line-height:1.5;color:var(--text-primary);font-style:italic;}
#fact-toast .ft-link{font-size:var(--text-xs);color:var(--accent-primary, var(--accent));cursor:pointer;
  margin-top:6px;display:inline-block;text-decoration:underline;}
#tooltip.visible{opacity:1;visibility:visible;}
#tooltip.tip-enhanced{white-space:normal;}
#tooltip .tip-funfact{font-size:var(--text-xs);color:var(--text-secondary);margin-top:6px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
#tooltip .tip-dyk{font-size:var(--text-2xs);font-weight:600;color:var(--accent-primary,var(--accent));
  letter-spacing:0.05em;margin-top:4px;}

/* ── PROGRESS BADGE ── */
#progress-badge{position:fixed;top:11.5rem;left:1.5rem;z-index:var(--z-controls);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);
  padding:4px 12px;font-family:var(--font-sans);font-size:var(--text-xs);color:var(--text-secondary);
  display:flex;align-items:center;gap:4px;cursor:default;user-select:none;
  transition:transform 200ms ease,box-shadow 200ms ease;}
#progress-badge.pulse{animation:badgePulse 400ms ease;}
@keyframes badgePulse{0%{transform:scale(1)}50%{transform:scale(1.12);box-shadow:0 0 8px var(--accent-dim)}100%{transform:scale(1)}}

/* ── ACHIEVEMENT TOAST ── */
#achievement-container{position:fixed;bottom:80px;right:20px;z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.achievement-toast{background:var(--surface);border:1px solid var(--accent-primary,var(--accent));
  border-radius:var(--radius-lg);padding:12px 20px;display:flex;align-items:center;gap:12px;
  box-shadow:var(--shadow-3);pointer-events:auto;min-width:260px;
  animation:toastSlideIn 0.3s ease,toastSlideOut 0.3s ease 2.7s forwards;}
.at-icon{font-size:28px;flex-shrink:0;}
.at-body{display:flex;flex-direction:column;gap:2px;}
.at-title{font-size:var(--text-2xs);font-weight:700;color:var(--accent-primary,var(--accent));
  letter-spacing:0.08em;text-transform:uppercase;}
.at-name{font-size:var(--text-base);font-weight:600;color:var(--text-primary);font-family:var(--font-sans);}
.at-desc{font-size:var(--text-xs);color:var(--text-secondary);}
@keyframes toastSlideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastSlideOut{from{transform:translateX(0);opacity:1}to{transform:translateX(100%);opacity:0}}

/* ── GAME MODE SELECTOR ── */
.game-modes{display:flex;flex-direction:column;gap:0.6rem;margin:1rem 0;}
.game-mode-card{
  display:flex;align-items:center;gap:1rem;text-align:left;
  padding:1rem 1.2rem;border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface-raised);cursor:pointer;transition:all var(--transition-fast);
  font-family:var(--font-sans);color:var(--text-primary);
}
.game-mode-card:hover{border-color:var(--accent-primary);background:var(--accent-primary-dim);}
.game-mode-icon{font-size:1.8rem;flex-shrink:0;}
.game-mode-info{display:flex;flex-direction:column;gap:0.1rem;}
.game-mode-name{font-weight:600;font-size:var(--text-base);color:var(--text-primary);}
.game-mode-desc{font-size:var(--text-xs);color:var(--text-secondary);margin-top:0.15rem;}
.game-mode-meta{font-size:var(--text-2xs);color:var(--accent-primary);font-family:var(--font-mono);margin-top:0.2rem;}

/* ── GAMES BUTTON (formerly hidden Quiz pill, now main Games entry point) ── */
#btn-quiz:hover{border-color:var(--accent-primary,var(--accent));color:var(--text-primary);}

/* ── ANIMATIONS ── */
@keyframes rootPulse{0%,100%{opacity:0.4;transform:scale(1)}50%{opacity:0.8;transform:scale(1.06)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes livingPulse{0%,100%{opacity:0.25}50%{opacity:0.55}}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes searchHighlight{0%{stroke-width:0;opacity:0}50%{opacity:1}100%{stroke-width:0;opacity:0}}

/* ── SPECIES IMAGE ── */
.p-img{width:100%;border-radius:var(--radius-md);margin-bottom:0.6rem;object-fit:cover;max-height:175px;border:1px solid var(--border);display:block;}
.p-img-attr{font-size:var(--text-2xs);color:var(--text-secondary);margin-bottom:0.9rem;text-align:right;font-style:italic;}
[data-theme="light"] .p-img{border-color:var(--border);}

/* ── TOP-RIGHT CONTROLS CONTAINER ── */
#top-right-controls{position:fixed;top:0.5rem;right:0.5rem;z-index:var(--z-panel);
  display:flex;align-items:center;gap:0.5rem;pointer-events:all;}

/* ── VIEW TOGGLE ── */
#view-toggle{position:fixed;top:17rem;left:1rem;z-index:var(--z-nav);
  display:flex;flex-direction:column;gap:0;
  background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:8px;
  overflow:hidden;backdrop-filter:var(--glass-blur);box-shadow:var(--shadow-1);pointer-events:all;}
.view-btn{padding:0.4rem 0.75rem;border:none;background:transparent;color:var(--text-secondary);
  font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-body);
  display:flex;align-items:center;gap:0.3rem;letter-spacing:0.04em;white-space:nowrap;}
.view-btn:hover{color:var(--accent);background:var(--accent-primary-dim);}
.view-btn.active{background:var(--accent-primary-dim);color:var(--accent-light);}
.view-btn:active{transform:scale(0.97);}
.view-btn+.view-btn{border-left:none;border-top:1px solid var(--border);}
[dir="rtl"] #top-right-controls{right:auto;left:0.5rem;}
[dir="rtl"] #view-toggle{left:auto;right:1rem;}

/* ══════════════════════════════════════════════════════ */
/* DNA SIMILARITY CALCULATOR                              */
/* ══════════════════════════════════════════════════════ */
.dna-panel{
  position:fixed;inset:0;z-index:var(--z-overlay);display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
}
.dna-panel.open{display:flex;}
.dna-panel-inner{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  width:min(440px,92vw);max-height:90vh;overflow-y:auto;padding:1.5rem;
  box-shadow:var(--shadow-3);
}
[data-theme="light"] .dna-panel-inner{background:#fff;box-shadow:0 8px 32px rgba(0,0,0,0.12);}
.dna-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.dna-panel-title{font-family:var(--font-head);font-size:var(--text-md);font-weight:600;color:var(--accent);}
.dna-panel-header .btn-back{font-size:1rem;width:28px;height:28px;display:flex;align-items:center;justify-content:center;}

/* Presets */
.dna-presets{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1.2rem;}
.dna-preset{
  padding:0.3rem 0.7rem;border-radius:var(--radius-full);
  border:1px solid var(--border);background:transparent;
  color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-2xs);
  cursor:pointer;transition:all var(--transition-fast);
}
.dna-preset:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}

/* Species selectors */
.dna-selectors{display:flex;align-items:center;gap:0.6rem;margin-bottom:1rem;}
.dna-slot{
  flex:1;padding:0.8rem;border-radius:var(--radius-md);
  border:1px solid var(--border);cursor:pointer;text-align:center;
  transition:all var(--transition-fast);
}
.dna-slot:hover{border-color:var(--accent);background:var(--accent-dim);}
.dna-slot.filled{border-style:solid;border-color:var(--accent);background:var(--accent-dim);}
.dna-slot-icon{font-size:1.6rem;margin-bottom:0.3rem;}
.dna-slot-label{font-size:var(--text-xs);color:var(--text-secondary);font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dna-vs{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-secondary);font-weight:600;}

/* Search overlay */
.dna-search-overlay{margin-bottom:1rem;}
#dna-search-input{
  width:100%;padding:0.5rem 0.8rem;border-radius:var(--radius-md);
  border:1px solid var(--border);background:var(--surface-raised);
  color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-sm);
  outline:none;margin-bottom:0.4rem;
}
#dna-search-input:focus{border-color:var(--accent);}
.dna-search-results{max-height:180px;overflow-y:auto;}
.dna-search-item{
  padding:0.4rem 0.6rem;cursor:pointer;display:flex;align-items:center;gap:0.5rem;
  border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-primary);
  font-family:var(--font-sans);transition:background var(--transition-fast);
}
.dna-search-item:hover{background:var(--accent-dim);}
.dna-search-item-icon{font-size:1rem;flex-shrink:0;}
.dna-search-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dna-search-item-latin{font-size:var(--text-2xs);color:var(--text-secondary);font-style:italic;}

/* Results */
.dna-results{text-align:center;padding:0.5rem 0;}
.dna-percent-display{font-family:var(--font-mono);font-weight:700;line-height:1;}
.dna-percent-num{font-size:var(--text-3xl);color:var(--accent);transition:color var(--transition-normal);}
.dna-percent-sign{font-size:var(--text-xl);color:var(--accent);opacity:0.7;}
.dna-similarity-label{font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:0.8rem;font-family:var(--font-sans);text-transform:uppercase;letter-spacing:0.08em;}
.dna-bar-wrapper{margin:0 auto 1rem;max-width:300px;}
.dna-bar-track{height:8px;background:var(--surface-raised);border-radius:var(--radius-full);overflow:hidden;}
.dna-bar-fill{height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));transition:width 1s ease-out;}
.dna-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:0.6rem;margin-bottom:0.6rem;}
.dna-divergence{font-size:var(--text-sm);color:var(--text-secondary);font-family:var(--font-sans);}
.dna-method-badge{
  font-size:var(--text-2xs);padding:0.15rem 0.5rem;border-radius:var(--radius-full);
  font-family:var(--font-sans);font-weight:500;
}
.dna-method-badge.known{background:rgba(91,154,107,0.15);color:var(--sage);border:1px solid rgba(91,154,107,0.3);}
.dna-method-badge.estimated{background:rgba(200,136,58,0.15);color:var(--accent);border:1px solid rgba(var(--accent-rgb),0.3);}
.dna-method-badge.identical{background:var(--accent-secondary-dim);color:var(--accent-secondary);border:1px solid rgba(91,154,139,0.3);}
.dna-source{font-size:var(--text-2xs);color:var(--text-secondary);margin-bottom:0.4rem;font-style:italic;}
.dna-ancestor{font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:0.6rem;}
.dna-ancestor a{color:var(--accent);cursor:pointer;text-decoration:underline;}
.dna-ancestor a:hover{color:var(--accent-light);}
.dna-fun-fact{
  font-size:var(--text-sm);color:var(--text-primary);background:var(--accent-dim);
  border-radius:var(--radius-md);padding:0.6rem 0.8rem;
  font-family:var(--font-sans);line-height:1.4;margin-top:0.4rem;
}

/* ── PLAYBACK MODE ── */
.node-locked{fill:var(--parchment);fill-opacity:0.15;stroke:var(--parchment);stroke-width:1.5;stroke-dasharray:4 3;cursor:pointer;transition:fill-opacity 0.3s,transform 0.2s;}
.node-locked:hover{fill-opacity:0.3;transform:scale(1.12);}
@keyframes nodeRevealBurst{0%{transform:scale(0.3);opacity:0;}50%{transform:scale(1.25);opacity:1;}100%{transform:scale(1);opacity:1;}}
.node-revealing{animation:nodeRevealBurst 0.6s cubic-bezier(.34,1.56,.64,1) forwards;}
.branch-pb-grow{transition:stroke-dashoffset 0.8s cubic-bezier(.4,0,.2,1)!important;}
.discovery-card{position:fixed;z-index:var(--z-search);background:var(--surface);border:1px solid var(--accent);border-radius:12px;padding:1rem 1.2rem;max-width:280px;backdrop-filter:blur(12px);animation:panelSlideUp 0.35s ease forwards;pointer-events:auto;box-shadow:0 8px 32px rgba(0,0,0,0.4);}
.discovery-card .dc-icon{font-size:2rem;margin-bottom:0.3rem;}
.discovery-card .dc-name{font-family:var(--font-head);font-weight:600;font-size:var(--text-md);color:var(--text);}
.discovery-card .dc-latin{font-family:var(--font-body);font-size:var(--text-sm);color:var(--parchment);font-style:italic;}
.discovery-card .dc-era{font-family:'JetBrains Mono',monospace;font-size:var(--text-xs);color:var(--parchment);margin-top:0.15rem;}
.discovery-card .dc-desc{font-size:var(--text-sm);color:var(--parchment);margin-top:0.5rem;line-height:1.4;}
.discovery-card .dc-fact{font-size:var(--text-sm);color:var(--accent);margin-top:0.5rem;font-style:italic;}
@keyframes extinctionFlash{0%{opacity:0;}20%{opacity:0.35;}100%{opacity:0;}}
.extinction-flash{position:fixed;inset:0;z-index:calc(var(--z-controls) + 80);background:radial-gradient(circle,rgba(224,82,82,0.4),rgba(224,82,82,0.1));pointer-events:none;animation:extinctionFlash 1.8s ease forwards;}
.extinction-info{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:calc(var(--z-controls) + 85);pointer-events:none;text-align:center;animation:extinctionFlash 2.5s ease forwards;}
.extinction-info h3{font-family:var(--font-head);font-size:var(--text-xl);color:var(--error);margin:0;text-shadow:0 2px 12px rgba(0,0,0,0.6);}
.extinction-info p{font-family:'JetBrains Mono',monospace;font-size:var(--text-base);color:var(--parchment);margin-top:0.3rem;}
.playback-controls{display:flex;align-items:center;justify-content:center;gap:0.4rem;margin-top:0.3rem;flex-wrap:wrap;}
.pb-btn{font-size:var(--text-2xs);padding:3px 10px;border-radius:9999px;border:1px solid var(--accent);background:transparent;color:var(--parchment);cursor:pointer;font-family:var(--font-body);transition:all 0.15s ease;}
.pb-btn:hover{background:var(--accent);color:var(--bg);}
.pb-btn.active{background:var(--accent);color:var(--bg);}
.pb-era-badge{position:fixed;top:45%;left:50%;transform:translate(-50%,-50%);z-index:calc(var(--z-controls) + 80);pointer-events:none;font-family:var(--font-head);font-size:var(--text-xl);font-weight:700;color:var(--text);opacity:0;transition:opacity 0.5s;text-shadow:0 2px 16px rgba(0,0,0,0.7);}
.pb-era-badge.show{opacity:0.7;}

/* ══════════════════════════════════════════════════════ */
/* EVOLUTIONARY PATH FINDER                               */
/* ══════════════════════════════════════════════════════ */
.evo-panel{
  position:fixed;inset:0;z-index:var(--z-overlay);display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
}
.evo-panel.open{display:flex;}
.evo-panel-inner{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  width:min(480px,92vw);max-height:90vh;overflow-y:auto;padding:1.5rem;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
[data-theme="light"] .evo-panel-inner{background:#fff;box-shadow:0 8px 32px rgba(0,0,0,0.12);}
.evo-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.evo-panel-title{font-family:var(--font-head);font-size:var(--text-md);font-weight:600;color:var(--accent-secondary);}
.evo-panel-header .btn-back{font-size:1rem;width:28px;height:28px;display:flex;align-items:center;justify-content:center;}

.evo-presets{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1.2rem;}
.evo-preset{
  padding:0.3rem 0.7rem;border-radius:var(--radius-full);
  border:1px solid var(--border);background:transparent;
  color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-2xs);
  cursor:pointer;transition:all var(--transition-fast);
}
.evo-preset:hover{border-color:var(--accent-secondary);color:var(--accent-secondary);background:rgba(var(--accent-rgb),0.1);}

.evo-selectors{display:flex;align-items:center;gap:0.6rem;margin-bottom:1rem;}
.evo-slot{
  flex:1;padding:0.8rem;border-radius:var(--radius-md);
  border:1px dashed var(--border);cursor:pointer;text-align:center;
  transition:all var(--transition-fast);
}
.evo-slot:hover{border-color:var(--accent-secondary);background:rgba(var(--accent-rgb),0.1);}
.evo-slot.filled{border-style:solid;border-color:var(--accent-secondary);background:rgba(var(--accent-rgb),0.1);}
.evo-slot-icon{font-size:1.6rem;margin-bottom:0.3rem;}
.evo-slot-label{font-size:var(--text-xs);color:var(--text-secondary);font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.evo-arrow{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-secondary);font-weight:600;}

.evo-search-overlay{margin-bottom:1rem;}
#evo-search-input{
  width:100%;padding:0.5rem 0.8rem;border-radius:var(--radius-md);
  border:1px solid var(--border);background:var(--surface-raised);
  color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-sm);
  outline:none;margin-bottom:0.4rem;
}
#evo-search-input:focus{border-color:var(--accent-secondary);}
.evo-search-results{max-height:180px;overflow-y:auto;}
.evo-search-item{
  padding:0.4rem 0.6rem;cursor:pointer;display:flex;align-items:center;gap:0.5rem;
  border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-primary);
  font-family:var(--font-sans);transition:background var(--transition-fast);
}
.evo-search-item:hover{background:rgba(var(--accent-rgb),0.1);}
.evo-search-item-icon{font-size:1rem;flex-shrink:0;}
.evo-search-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.evo-search-item-latin{font-size:var(--text-2xs);color:var(--text-secondary);font-style:italic;}

.evo-results{padding:0.5rem 0;}
.evo-results-header{display:flex;justify-content:center;gap:1.2rem;margin-bottom:0.8rem;}
.evo-stat{text-align:center;}
.evo-stat-value{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:700;color:var(--accent-secondary);line-height:1;}
.evo-stat-label{font-size:var(--text-2xs);color:var(--text-secondary);font-family:var(--font-sans);text-transform:uppercase;letter-spacing:0.06em;}

.evo-chain{
  display:flex;align-items:center;gap:0.3rem;
  overflow-x:auto;padding:0.6rem 0;margin-bottom:0.8rem;
  scrollbar-width:thin;
}
.evo-chain-node{
  display:flex;flex-direction:column;align-items:center;gap:0.15rem;
  padding:0.3rem 0.5rem;border-radius:var(--radius-sm);cursor:pointer;
  transition:background var(--transition-fast);flex-shrink:0;
  border:1px solid transparent;
}
.evo-chain-node:hover{background:rgba(var(--accent-rgb),0.1);}
.evo-chain-node.lca{border-color:var(--accent-secondary);background:rgba(var(--accent-rgb),0.1);}
.evo-chain-node-icon{font-size:var(--text-lg);}
.evo-chain-node-name{font-size:var(--text-2xs);color:var(--text-secondary);font-family:var(--font-sans);max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
.evo-chain-sep{color:var(--text-secondary);font-size:var(--text-xs);opacity:0.5;flex-shrink:0;}

.evo-ancestor-card{
  background:var(--surface-raised);border-radius:var(--radius-md);padding:0.8rem;
  margin-bottom:0.8rem;text-align:left;
}
.evo-ancestor-title{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:0.08em;color:var(--accent-secondary);font-family:var(--font-sans);margin-bottom:0.3rem;}
.evo-ancestor-name{font-size:var(--text-base);font-weight:600;color:var(--text-primary);font-family:var(--font-head);}
.evo-ancestor-era{font-size:var(--text-2xs);color:var(--text-secondary);font-family:var(--font-mono);margin-bottom:0.3rem;}
.evo-ancestor-desc{font-size:var(--text-xs);color:var(--text-secondary);line-height:1.4;font-family:var(--font-sans);}

.evo-actions{display:flex;gap:0.5rem;justify-content:center;}
.evo-btn{
  padding:0.5rem 1rem;border-radius:var(--radius-full);
  font-family:var(--font-sans);font-size:var(--text-sm);font-weight:500;
  cursor:pointer;transition:all var(--transition-fast);border:none;
}
.evo-btn-primary{background:var(--accent-secondary);color:#fff;}
.evo-btn-primary:hover{filter:brightness(1.1);}
.evo-btn-secondary{background:transparent;color:var(--text-secondary);border:1px solid var(--border);}
.evo-btn-secondary:hover{border-color:var(--text-secondary);color:var(--text-primary);}

.evo-slot-photo{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--border);}
.evo-slot.filled .evo-slot-photo{border-color:var(--accent-secondary);}
.evo-vs{font-family:var(--font-mono);font-size:var(--text-base);color:var(--text-secondary);font-weight:600;flex-shrink:0;}

.evo-narrative{
  font-size:var(--text-sm);color:var(--text-secondary);font-family:var(--font-sans);
  text-align:center;margin-bottom:0.8rem;font-style:italic;line-height:1.5;
}
.evo-narrative strong{color:var(--accent-secondary);font-style:normal;}

.evo-chain-node{animation:evoReveal 0.4s ease both;animation-delay:calc(var(--i,0) * 100ms);position:relative;}
.evo-chain-node:hover{transform:translateY(-2px);}
.evo-chain-photo{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--border);background:var(--surface-raised);}
.evo-chain-node.lca .evo-chain-photo{border-color:var(--accent-secondary);box-shadow:0 0 8px rgba(var(--accent-rgb),0.3);}
.evo-chain-emoji{position:absolute;bottom:16px;right:2px;font-size:10px;background:var(--surface);border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);line-height:1;}
.evo-chain-lca-label{font-size:var(--text-2xs);color:var(--accent-secondary);font-family:var(--font-sans);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;}
@keyframes evoReveal{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.evo-timeline{position:relative;margin:0.6rem 0 1rem;padding:0 0.2rem;}
.evo-timeline-bar{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--error) 0%,var(--warning) 25%,var(--iucn-vu) 50%,var(--success) 100%);position:relative;}
.evo-timeline-marker{position:absolute;top:-4px;width:14px;height:14px;border-radius:50%;background:var(--accent-secondary);border:2px solid var(--surface);box-shadow:0 0 6px rgba(var(--accent-rgb),0.5);transform:translateX(-50%);transition:left 0.6s ease;}
.evo-timeline-labels{display:flex;justify-content:space-between;margin-top:4px;font-size:var(--text-2xs);color:var(--text-secondary);font-family:var(--font-mono);}

.evo-divergence{text-align:center;margin-bottom:0.6rem;}
.evo-divergence-value{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:700;color:var(--accent-secondary);line-height:1;}
.evo-divergence-label{font-size:var(--text-2xs);color:var(--text-secondary);font-family:var(--font-sans);text-transform:uppercase;letter-spacing:0.06em;}

.evo-ancestor-card{display:flex;gap:0.8rem;align-items:flex-start;}
.evo-ancestor-photo{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-secondary);flex-shrink:0;}
.evo-ancestor-info{flex:1;min-width:0;}

.evo-fun-fact{
  background:rgba(var(--accent-rgb),0.08);border:1px solid rgba(var(--accent-rgb),0.2);
  border-radius:var(--radius-md);padding:0.7rem 0.8rem;margin-bottom:1rem;
  display:flex;align-items:flex-start;gap:0.5rem;
}
.evo-fun-fact-icon{font-size:1.1rem;flex-shrink:0;line-height:1.3;}
.evo-fun-fact-text{font-size:var(--text-xs);color:var(--text-secondary);font-family:var(--font-sans);line-height:1.5;font-style:italic;}

#evo-clear-overlay{
  position:fixed;top:5rem;left:50%;transform:translateX(-50%);z-index:var(--z-search);
  padding:0.45rem 1rem;border-radius:var(--radius-full);
  border:1px solid var(--accent-secondary);background:var(--surface);
  color:var(--accent-secondary);font-family:var(--font-sans);font-size:var(--text-xs);
  cursor:pointer;box-shadow:0 4px 16px rgba(var(--accent-rgb),0.2);
  display:none;align-items:center;gap:0.4rem;
  animation:evoReveal 0.3s ease both;
}
#evo-clear-overlay:hover{background:rgba(var(--accent-rgb),0.1);}
#evo-clear-overlay.show{display:inline-flex;}

/* ══════════════════════════════════════════════════════ */
/* SPECIES COMPARE PANEL (unified DNA + Evo Path)         */
/* ══════════════════════════════════════════════════════ */
.compare-panel{
  position:fixed;inset:0;z-index:var(--z-overlay);display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
}
.compare-panel.open{display:flex;}
.compare-panel-inner{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  width:min(500px,92vw);max-height:90vh;overflow-y:auto;padding:1.5rem;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
[data-theme="light"] .compare-panel-inner{background:#fff;box-shadow:0 8px 32px rgba(0,0,0,0.12);}
.compare-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.compare-panel-title{font-family:var(--font-head);font-size:var(--text-md);font-weight:600;color:var(--accent);}
.compare-panel-header .btn-back{font-size:1rem;width:28px;height:28px;display:flex;align-items:center;justify-content:center;}

.compare-presets{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1.2rem;}
.compare-preset{
  padding:0.3rem 0.7rem;border-radius:var(--radius-full);
  border:1px solid var(--border);background:transparent;
  color:var(--text-secondary);font-family:var(--font-sans);font-size:var(--text-2xs);
  cursor:pointer;transition:all var(--transition-fast);
}
.compare-preset:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);}

.compare-slots{display:flex;align-items:center;gap:0.5rem;margin:0.8rem 0;}
.compare-slot{
  flex:1;padding:0.8rem;border-radius:var(--radius-md);
  border:1px dashed var(--border);cursor:pointer;text-align:center;
  background:transparent;transition:all var(--transition-fast);
}
.compare-slot:hover{border-color:var(--accent);background:var(--accent-dim);}
.compare-slot.filled{border-style:solid;border-color:var(--accent);background:var(--accent-dim);}
.compare-slot-icon{font-size:1.6rem;margin-bottom:0.3rem;display:block;}
.compare-slot-label{font-size:var(--text-xs);color:var(--text-secondary);font-family:var(--font-sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;}
.compare-vs{font-weight:700;color:var(--accent-primary);font-family:var(--font-mono);font-size:var(--text-base);flex-shrink:0;}
.compare-dice{font-size:1.2rem;flex-shrink:0;}
.compare-slot-photo{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--border);}
.compare-slot.filled .compare-slot-photo{border-color:var(--accent);}

.compare-search-overlay{margin-bottom:1rem;}
#compare-search-input{
  width:100%;padding:0.5rem 0.8rem;border-radius:var(--radius-md);
  border:1px solid var(--border);background:var(--surface-raised);
  color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-sm);
  outline:none;margin-bottom:0.4rem;box-sizing:border-box;
}
#compare-search-input:focus{border-color:var(--accent);}
#compare-search-results{max-height:180px;overflow-y:auto;}
.compare-search-item{
  padding:0.4rem 0.6rem;cursor:pointer;display:flex;align-items:center;gap:0.5rem;
  border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text-primary);
  font-family:var(--font-sans);transition:background var(--transition-fast);
}
.compare-search-item:hover{background:var(--accent-dim);}
.compare-search-item-icon{font-size:1rem;flex-shrink:0;}
.compare-search-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.compare-search-item-latin{font-size:var(--text-2xs);color:var(--text-secondary);font-style:italic;}

/* Results section */
.compare-results{padding:0.5rem 0;}
.compare-dna-section{text-align:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border);}
.compare-dna-pct-row{font-family:var(--font-mono);font-weight:700;line-height:1;}
.compare-dna-pct{font-size:var(--text-3xl);color:var(--accent);transition:color var(--transition-normal);}
.compare-dna-pct-sign{font-size:var(--text-xl);color:var(--accent);opacity:0.7;}
.compare-dna-label{font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:0.8rem;font-family:var(--font-sans);text-transform:uppercase;letter-spacing:0.08em;}
.compare-bar-wrapper{margin:0 auto 0.8rem;max-width:300px;}
.compare-bar-track{height:8px;background:var(--surface-raised);border-radius:var(--radius-full);overflow:hidden;}
.compare-bar-fill{height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));transition:width 1s ease-out;}
.compare-dna-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem;margin-bottom:0.4rem;align-items:center;}
.compare-method-badge{font-size:var(--text-2xs);padding:0.15rem 0.4rem;border-radius:var(--radius-full);font-family:var(--font-sans);font-weight:500;}
.compare-method-badge.known{background:rgba(39,174,96,0.2);color:#27ae60;border:1px solid rgba(39,174,96,0.3);}
.compare-method-badge.estimated{background:rgba(243,156,18,0.2);color:#f39c12;border:1px solid rgba(243,156,18,0.3);}
.compare-method-badge.identical{background:var(--accent-secondary-dim);color:var(--accent-secondary);border:1px solid rgba(91,154,139,0.3);}
.compare-source{font-size:var(--text-2xs);color:var(--text-secondary);font-style:italic;}
.compare-note{font-size:var(--text-xs);color:var(--text-secondary);margin-top:0.3rem;font-style:italic;}

.compare-divtime{text-align:center;margin:0.8rem 0 0.4rem;}
.compare-divtime-value{font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:700;color:var(--accent-secondary);line-height:1;}
.compare-divtime-label{font-size:var(--text-2xs);color:var(--text-secondary);font-family:var(--font-sans);text-transform:uppercase;letter-spacing:0.06em;}
.compare-scale-time{font-size:var(--text-xs);color:var(--text-secondary);font-style:italic;margin-top:0.3rem;font-family:var(--font-sans);padding:0 0.5rem;}

.compare-timeline{position:relative;margin:0.6rem 0 1rem;padding:0 0.2rem;}
.compare-timeline-bar{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--error) 0%,var(--warning) 25%,var(--iucn-vu) 50%,var(--success) 100%);position:relative;}
.compare-timeline-marker{position:absolute;top:-4px;width:14px;height:14px;border-radius:50%;background:var(--accent-secondary);border:2px solid var(--surface);box-shadow:0 0 6px rgba(var(--accent-rgb),0.5);transform:translateX(-50%);transition:left 0.6s ease;}
.compare-timeline-labels{display:flex;justify-content:space-between;margin-top:4px;font-size:var(--text-2xs);color:var(--text-secondary);font-family:var(--font-mono);}

.compare-narrative{font-size:var(--text-sm);color:var(--text-secondary);font-family:var(--font-sans);text-align:center;margin-bottom:0.8rem;font-style:italic;}
.compare-narrative strong{color:var(--accent);font-style:normal;}

.compare-chain{display:flex;align-items:center;gap:0.3rem;overflow-x:auto;padding:0.6rem 0;margin-bottom:0.8rem;scrollbar-width:thin;}
.compare-chain-node{
  display:flex;flex-direction:column;align-items:center;gap:0.15rem;
  padding:0.3rem 0.5rem;border-radius:var(--radius-sm);cursor:pointer;
  transition:background var(--transition-fast);flex-shrink:0;border:1px solid transparent;
  animation:evoReveal 0.4s ease both;animation-delay:calc(var(--i,0) * 80ms);position:relative;
}
.compare-chain-node:hover{background:var(--accent-dim);}
.compare-chain-node.lca{border-color:var(--accent-secondary);background:rgba(var(--accent-rgb),0.1);}
.compare-chain-photo{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--border);background:var(--surface-raised);}
.compare-chain-node.lca .compare-chain-photo{border-color:var(--accent-secondary);}
.compare-chain-emoji{position:absolute;bottom:16px;right:2px;font-size:10px;background:var(--surface);border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);line-height:1;}
.compare-chain-lca-label{font-size:var(--text-2xs);color:var(--accent-secondary);font-family:var(--font-sans);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;}
.compare-chain-node-name{font-size:var(--text-2xs);color:var(--text-secondary);font-family:var(--font-sans);max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;}
.compare-chain-sep{color:var(--text-secondary);font-size:var(--text-xs);opacity:0.5;flex-shrink:0;}

.compare-ancestor-card{
  display:flex;gap:0.8rem;align-items:flex-start;
  background:var(--surface-raised);border-radius:var(--radius-md);padding:0.8rem;
  margin-bottom:0.8rem;
}
.compare-ancestor-photo{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--accent-secondary);flex-shrink:0;}
.compare-ancestor-info{flex:1;min-width:0;}
.compare-ancestor-title{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:0.08em;color:var(--accent-secondary);font-family:var(--font-sans);margin-bottom:0.3rem;}
.compare-ancestor-name{font-size:var(--text-base);font-weight:600;color:var(--text-primary);font-family:var(--font-head);}
.compare-ancestor-era{font-size:var(--text-2xs);color:var(--text-secondary);font-family:var(--font-mono);margin-bottom:0.3rem;}
.compare-ancestor-desc{font-size:var(--text-xs);color:var(--text-secondary);line-height:1.4;font-family:var(--font-sans);}

.compare-fun-fact{
  background:rgba(var(--accent-rgb),0.08);border:1px solid rgba(var(--accent-rgb),0.2);
  border-radius:var(--radius-md);padding:0.7rem 0.8rem;margin-bottom:1rem;
  display:flex;align-items:flex-start;gap:0.5rem;
}
.compare-fun-fact-icon{font-size:1.1rem;flex-shrink:0;line-height:1.3;}
.compare-fun-fact-text{font-size:var(--text-xs);color:var(--text-secondary);font-family:var(--font-sans);line-height:1.5;font-style:italic;}

#compare-clear-overlay{
  position:fixed;top:5rem;left:50%;transform:translateX(-50%);z-index:var(--z-search);
  padding:0.45rem 1rem;border-radius:var(--radius-full);
  border:1px solid var(--accent-secondary);background:var(--surface);
  color:var(--accent-secondary);font-family:var(--font-sans);font-size:var(--text-xs);
  cursor:pointer;box-shadow:0 4px 16px rgba(var(--accent-rgb),0.2);
  align-items:center;gap:0.4rem;
}
#compare-clear-overlay:hover{background:rgba(var(--accent-rgb),0.1);}

/* ── TRIVIA GAME ── */
.trivia-panel{
  position:fixed;inset:0;z-index:var(--z-overlay);display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);
}
.trivia-panel.open{display:flex;}
.trivia-panel-inner{
  width:min(460px,92vw);max-height:90vh;overflow-y:auto;
  background:var(--surface);border-radius:var(--radius-lg);
  box-shadow:0 8px 32px rgba(0,0,0,0.4);padding:1.5rem;
  position:relative;
}
.trivia-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.trivia-title{font-family:var(--font-head);font-size:var(--text-md);font-weight:600;color:var(--accent-primary);}
.trivia-subtitle{font-size:var(--text-sm);color:var(--text-secondary);margin-bottom:1rem;text-align:center;}

/* Start screen */
.trivia-rules{
  background:var(--surface-raised);border-radius:var(--radius-md);padding:0.8rem 1rem;
  margin-bottom:1rem;font-size:var(--text-sm);color:var(--text-secondary);line-height:1.6;text-align:center;
}
.trivia-difficulty-preview{display:flex;justify-content:center;gap:0.5rem;margin-bottom:1.2rem;flex-wrap:wrap;}
.trivia-start-btn{
  display:block;width:100%;padding:0.8rem;border:none;border-radius:var(--radius-md);
  background:var(--accent-primary);color:#fff;font-family:var(--font-head);font-size:var(--text-base);
  font-weight:600;cursor:pointer;transition:all var(--transition-fast);letter-spacing:0.03em;
}
.trivia-start-btn:hover{filter:brightness(1.15);transform:translateY(-1px);}

/* Question screen */
.trivia-status{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.6rem;font-size:var(--text-sm);}
.trivia-lives{display:flex;gap:2px;}
.trivia-lives span{transition:opacity var(--transition-fast);}
.trivia-lives span.lost{opacity:0.2;}
.trivia-score-display{font-family:var(--font-mono);color:var(--accent-primary);font-weight:500;}
.trivia-progress{height:4px;background:var(--surface-raised);border-radius:var(--radius-full);margin-bottom:1rem;overflow:hidden;}
.trivia-progress-fill{height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));transition:width 0.4s ease;}

.trivia-diff-badge{
  display:inline-block;font-size:var(--text-2xs);padding:0.15rem 0.5rem;border-radius:var(--radius-full);
  font-family:var(--font-sans);font-weight:600;letter-spacing:0.05em;text-transform:uppercase;
}
.trivia-diff-badge.easy{background:rgba(74,154,91,0.15);color:var(--diff-easy);border:1px solid rgba(74,154,91,0.3);}
.trivia-diff-badge.medium{background:rgba(var(--accent-rgb),0.15);color:var(--diff-medium);border:1px solid rgba(var(--accent-rgb),0.3);}
.trivia-diff-badge.hard{background:rgba(212,136,58,0.15);color:var(--diff-hard);border:1px solid rgba(212,136,58,0.3);}
.trivia-diff-badge.expert{background:rgba(196,92,74,0.15);color:var(--diff-expert);border:1px solid rgba(196,92,74,0.3);}
.trivia-diff-badge.master{background:rgba(154,106,191,0.15);color:var(--diff-master);border:1px solid rgba(154,106,191,0.3);}

.trivia-question-text{font-size:var(--text-base);font-weight:500;color:var(--text-primary);margin:0.8rem 0 1rem;line-height:1.5;}

.trivia-options{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:0.8rem;}
.trivia-option{
  padding:0.7rem 1rem;border:1px solid var(--border);border-radius:var(--radius-md);
  background:var(--surface-raised);color:var(--text-primary);font-family:var(--font-body);
  font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);text-align:left;
  min-height:44px;display:flex;align-items:center;gap:0.6rem;line-height:1.4;
}
.trivia-option:hover:not(.answered){border-color:var(--accent-primary);background:var(--accent-primary-dim);}
.trivia-option .opt-letter{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-xs);font-weight:600;background:var(--surface);border:1px solid var(--border);
}
.trivia-option.correct{background:rgba(74,154,91,0.15);border-color:var(--success);color:var(--success);}
.trivia-option.correct .opt-letter{background:var(--success);color:#fff;border-color:var(--success);}
.trivia-option.wrong{background:rgba(224,82,82,0.15);border-color:var(--error);color:var(--error);}
.trivia-option.wrong .opt-letter{background:var(--error);color:#fff;border-color:var(--error);}
.trivia-option.answered{cursor:default;pointer-events:none;}
.trivia-option.reveal{border-color:rgba(74,154,91,0.5);}

.trivia-feedback{margin-top:0.6rem;display:none;}
.trivia-feedback.show{display:block;}
.trivia-funfact{
  font-size:var(--text-sm);color:var(--text-primary);background:var(--accent-dim);
  border-radius:var(--radius-md);padding:0.6rem 0.8rem;line-height:1.4;margin-bottom:0.5rem;
}
.trivia-learn-more{font-size:var(--text-xs);}
.trivia-learn-more a{color:var(--accent-primary);text-decoration:none;}
.trivia-learn-more a:hover{text-decoration:underline;}

.trivia-points-popup{
  position:absolute;right:1.5rem;top:3.5rem;font-family:var(--font-mono);font-size:var(--text-md);
  font-weight:700;color:var(--success);pointer-events:none;opacity:0;
  animation:trivia-points 1s ease forwards;
}
.trivia-streak-badge{
  display:inline-flex;align-items:center;gap:4px;font-size:var(--text-xs);font-weight:600;
  color:var(--warning);padding:0.15rem 0.5rem;border-radius:var(--radius-full);
  background:rgba(var(--accent-rgb),0.12);animation:trivia-pulse 1.5s ease infinite;
}

.trivia-next-btn{
  display:block;width:100%;padding:0.65rem;border:1px solid var(--accent-primary);
  border-radius:var(--radius-md);background:transparent;color:var(--accent-primary);
  font-family:var(--font-head);font-size:var(--text-base);font-weight:500;cursor:pointer;
  margin-top:0.8rem;transition:all var(--transition-fast);
}
.trivia-next-btn:hover{background:var(--accent-primary-dim);}

/* Results screen */
.trivia-result-emoji{font-size:3rem;text-align:center;margin:0.5rem 0;}
.trivia-result-score{
  font-family:var(--font-mono);font-size:var(--text-2xl);font-weight:700;
  color:var(--accent-primary);text-align:center;margin-bottom:0.3rem;
}
.trivia-result-label{font-size:var(--text-sm);color:var(--text-secondary);text-align:center;margin-bottom:0.8rem;}
.trivia-result-stats{
  display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;margin-bottom:1rem;
}
.trivia-stat{
  background:var(--surface-raised);border-radius:var(--radius-md);padding:0.6rem;text-align:center;
}
.trivia-stat-value{font-family:var(--font-mono);font-size:var(--text-md);font-weight:600;color:var(--text-primary);}
.trivia-stat-label{font-size:var(--text-2xs);color:var(--text-secondary);margin-top:0.15rem;}
.trivia-result-actions{display:flex;gap:0.5rem;}
.trivia-result-actions button{flex:1;}

@keyframes trivia-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes trivia-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes trivia-points{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-30px)}}
@keyframes trivia-fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.trivia-shake{animation:trivia-shake 0.35s ease;}
.trivia-fadein{animation:trivia-fadein 0.3s ease;}

[data-theme="light"] .trivia-panel-inner{background:#fff;}
[data-theme="light"] .trivia-option{background:var(--surface-raised);}
[data-theme="light"] .trivia-option:hover:not(.answered){background:rgba(var(--accent-rgb),0.08);}

/* ── ACCESSIBILITY ── */

/* Skip-to-content link */
.skip-link{
  position:fixed;top:-100%;left:50%;transform:translateX(-50%);
  z-index:var(--z-tour);padding:0.6rem 1.2rem;
  background:var(--accent-primary);color:#fff;
  font-family:var(--font-sans);font-size:var(--text-base);font-weight:600;
  border-radius:0 0 var(--radius-md) var(--radius-md);
  text-decoration:none;outline:none;
  transition:top 0.15s ease;
}
.skip-link:focus{top:0;}

/* Focus-visible rings */
:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;}
button:focus-visible,.zbtn:focus-visible,.nav-btn:focus-visible,
.lang-btn:focus-visible,.view-btn:focus-visible,.hom-filter:focus-visible,
.era-preset:focus-visible,.dna-preset:focus-visible,.dna-slot:focus-visible,
.p-close:focus-visible,#theme-btn:focus-visible,.btn-back:focus-visible,
.search-pill:focus-visible,.fab:focus-visible,.leg-row:focus-visible{
  outline:2px solid var(--accent-primary);outline-offset:2px;
  box-shadow:0 0 0 4px var(--accent-primary-dim);
}
/* SVG node focus ring — outline doesn't work on SVG, use stroke */
.node-group:focus-visible{outline:none;}
.node-group:focus-visible .node-border{
  stroke:var(--accent-primary) !important;stroke-width:3 !important;stroke-opacity:1 !important;
}

/* Search result keyboard highlight */
.sr-item.a11y-active{background:var(--accent-primary-dim);color:var(--text-primary);}

/* ── LIVE REGION (screen reader announcements) ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── Guided Tour ── */
.tour-overlay{position:fixed;inset:0;z-index:var(--z-tour);pointer-events:none;}
.tour-overlay>.tour-card{pointer-events:auto;}
.tour-spotlight{
  position:fixed;z-index:var(--z-tour);pointer-events:none;
  border:2px solid var(--accent);border-radius:var(--radius-md);
  box-shadow:0 0 0 9999px rgba(0,0,0,0.7);
  transition:left 350ms cubic-bezier(0.16,1,0.3,1),top 350ms cubic-bezier(0.16,1,0.3,1),width 350ms cubic-bezier(0.16,1,0.3,1),height 350ms cubic-bezier(0.16,1,0.3,1);
  animation:tourPulse 2s ease infinite;
}
@keyframes tourPulse{
  0%,100%{box-shadow:0 0 0 9999px rgba(0,0,0,0.7),0 0 0 0 rgba(var(--accent-rgb),0.4);}
  50%{box-shadow:0 0 0 9999px rgba(0,0,0,0.7),0 0 12px 4px rgba(var(--accent-rgb),0.2);}
}
.tour-target{z-index:var(--z-tour-target) !important;}
.tour-card{
  position:fixed;z-index:var(--z-tour-content);max-width:320px;
  background:var(--surface-raised);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1rem 1.25rem;
  font-family:var(--font-body);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  opacity:0;transition:opacity 200ms ease;
}
.tour-card.visible{opacity:1;}
.tour-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem;}
.tour-step-num{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--accent);letter-spacing:0.05em;}
.tour-close{background:none;border:none;color:var(--text-secondary);font-size:var(--text-lg);cursor:pointer;padding:0 0.2rem;line-height:1;}
.tour-close:hover{color:var(--text-primary);}
.tour-card-title{font-size:var(--text-base);font-weight:600;color:var(--text-primary);margin:0 0 0.4rem;}
.tour-card-desc{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.65;margin:0 0 1rem;}
.tour-card-foot{display:flex;justify-content:space-between;align-items:center;}
.tour-card-nav{display:flex;gap:0.5rem;}
.tour-btn{
  border-radius:var(--radius-full);font-family:var(--font-sans);font-size:var(--text-sm);
  padding:0.35rem 0.9rem;cursor:pointer;transition:all 150ms ease;line-height:1.4;
}
.tour-btn-next{background:var(--accent);color:#fff;border:none;}
.tour-btn-next:hover{filter:brightness(1.15);}
.tour-btn-prev,.tour-btn-skip{background:transparent;border:1px solid var(--border);color:var(--text-secondary);}
.tour-btn-prev:hover,.tour-btn-skip:hover{border-color:var(--accent);color:var(--text-primary);}
/* ── FLOATING ACTION BUTTONS (FAB) ── */
.fab-group{
  position:fixed;bottom:16rem;left:1.2rem;z-index:var(--z-nav);
  display:flex;flex-direction:column;gap:0.5rem;
  pointer-events:none;
}
[dir="rtl"] .fab-group{left:auto;right:1.2rem;}
.fab{
  pointer-events:all;display:inline-flex;align-items:center;gap:0.45rem;
  padding:0.5rem 1rem;border-radius:var(--radius-full);
  border:1px solid var(--glass-border);background:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  color:var(--text-primary);font-family:var(--font-sans);
  font-size:var(--text-sm);font-weight:500;letter-spacing:0.02em;
  cursor:pointer;white-space:nowrap;
  box-shadow:var(--shadow-1);transition:all var(--transition-normal);
}
.fab:hover{
  border-color:var(--accent-primary);color:var(--accent-primary);
  background:var(--accent-dim);
  box-shadow:var(--shadow-2),0 0 12px rgba(var(--accent-rgb),0.15);
  transform:translateY(-1px);
}
.fab:active{transform:scale(0.97);}
.fab:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;}
[data-theme="light"] .fab{
  background:var(--glass-bg);border-color:var(--glass-border);
  color:var(--text-secondary);box-shadow:var(--shadow-1);
}
[data-theme="light"] .fab:hover{
  border-color:var(--accent-primary);color:var(--accent-primary);
  background:var(--accent-primary-dim);
}
.fab-icon{font-size:1rem;line-height:1;flex-shrink:0;}
.fab--tour{
  width:38px;height:38px;padding:0;justify-content:center;
  border-radius:50%;font-weight:700;font-size:1rem;
}
[data-theme="light"] .tour-spotlight{box-shadow:0 0 0 9999px rgba(0,0,0,0.5);animation:tourPulseLight 2s ease infinite;}
@keyframes tourPulseLight{
  0%,100%{box-shadow:0 0 0 9999px rgba(0,0,0,0.5),0 0 0 0 rgba(var(--accent-rgb),0.4);}
  50%{box-shadow:0 0 0 9999px rgba(0,0,0,0.5),0 0 12px 4px rgba(var(--accent-rgb),0.2);}
}
[dir="rtl"] .tour-card-foot{flex-direction:row-reverse;}
[dir="rtl"] .tour-card-nav{flex-direction:row-reverse;}

/* ── TOUR SELECTOR ── */
.tour-selector-overlay{
  position:fixed;inset:0;z-index:var(--z-tour-content);
  background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;
  padding:1rem;
}
.tour-selector{
  background:var(--surface-raised);border-radius:16px;padding:2rem;
  max-width:520px;width:100%;text-align:center;border:1px solid var(--border);
}
.tour-selector-title{
  font-family:var(--font-head);font-size:var(--text-xl);font-weight:700;
  color:var(--text-primary);margin:0 0 0.4rem;
}
.tour-selector-subtitle{
  font-family:var(--font-body);font-size:var(--text-base);color:var(--text-secondary);
  margin:0 0 1.5rem;
}
.tour-selector-cards{display:flex;gap:0.75rem;margin-bottom:1.25rem;}
.tour-selector-card{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:0.4rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:1.25rem 0.75rem;cursor:pointer;
  transition:all 150ms ease;font-family:var(--font-body);
}
.tour-selector-card:hover{
  border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.tour-selector-card-icon{font-size:2rem;line-height:1;}
.tour-selector-card-name{font-size:var(--text-base);font-weight:600;color:var(--text-primary);}
.tour-selector-card-desc{font-size:var(--text-xs);color:var(--text-secondary);line-height:1.4;}
.tour-selector-card-meta{
  font-size:var(--text-xs);color:var(--accent);font-weight:500;
  margin-top:0.25rem;
}
.tour-selector-later{
  background:none;border:none;color:var(--text-muted);
  font-family:var(--font-body);font-size:var(--text-sm);cursor:pointer;
  padding:0.5rem 1rem;border-radius:8px;transition:color 150ms ease;
}
.tour-selector-later:hover{color:var(--text-secondary);}
[data-theme="light"] .tour-selector{background:var(--surface-raised);border-color:var(--border);}
[data-theme="light"] .tour-selector-card{background:var(--surface);border-color:var(--border);}
[data-theme="light"] .tour-selector-overlay{background:rgba(0,0,0,0.5);}

/* ── KEYBOARD HELP OVERLAY ── */
#kbd-help{
  position:fixed;inset:0;z-index:var(--z-overlay);display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,0.6);opacity:0;pointer-events:none;transition:opacity 0.2s ease;
}
#kbd-help.visible{opacity:1;pointer-events:auto;}
.kbd-panel{
  background:var(--surface-raised);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:1.5rem 2rem;max-width:340px;width:90vw;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.kbd-panel h3{
  font-family:var(--font-head);font-size:var(--text-md);font-weight:700;color:var(--text-primary);
  margin:0 0 1rem;display:flex;align-items:center;gap:0.5rem;
}
.kbd-row{display:flex;justify-content:space-between;align-items:center;padding:0.4rem 0;border-bottom:1px solid var(--divider);}
.kbd-row:last-child{border-bottom:none;}
.kbd-row span:first-child{font-family:var(--font-body);font-size:var(--text-sm);color:var(--text-secondary);}
.kbd-keys{display:flex;gap:0.3rem;}
kbd{
  display:inline-block;font-family:var(--font-mono,'JetBrains Mono',monospace);font-size:var(--text-xs);
  background:var(--surface);border:1px solid var(--border);
  border-radius:4px;padding:2px 7px;color:var(--accent);line-height:1.6;
}
[data-theme="light"] .kbd-panel{background:var(--surface-raised);box-shadow:0 8px 32px rgba(0,0,0,0.12);}
[data-theme="light"] kbd{background:var(--surface);color:var(--accent);}

/* ── JS-EXTRACTED UTILITY CLASSES ── */
.compare-banner{
  position:fixed;top:60px;left:50%;transform:translateX(-50%);
  z-index:var(--z-nav);background:var(--surface-overlay);
  border:1px solid var(--accent-primary);border-radius:12px;
  padding:8px 20px;font-family:Inter,sans-serif;font-size:var(--text-sm);
  color:var(--accent-primary);display:none;align-items:center;
  gap:12px;box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.compare-banner.visible{display:flex;}
.intro-overlay{
  position:fixed;inset:0;z-index:999;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;pointer-events:none;transition:background 0s;
}
.offline-banner{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-splash);
  text-align:center;padding:6px 12px;font-family:Inter,sans-serif;
  font-size:var(--text-sm);font-weight:500;background:var(--error);color:#fff;
  transform:translateY(-100%);transition:transform 0.3s ease;pointer-events:none;
}
.offline-banner.visible{transform:translateY(0);}
.node-img-wrap{border-radius:50%;overflow:hidden;}
.node-img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 0.35s ease;}
.node-img.loaded{opacity:1;}
.chip-badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 14px;
  border-radius:9999px;font-size:var(--text-xs);font-weight:600;
  font-family:Inter,sans-serif;letter-spacing:0.04em;cursor:pointer;
  transition:all 0.2s;white-space:nowrap;user-select:none;
  width:100%;justify-content:center;box-sizing:border-box;
}
.compare-panel-open{display:flex;flex-direction:column;}

/* Dice button spin animation */
#btn-random {
  transition: transform 0.4s ease;
}

.p-time-context {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--text-muted);
  margin-top: 0.2rem;
  opacity: 0.85;
}

/* Scale of Time context line */
.p-time-context {
  font-size: var(--text-xs);
  font-style: italic;
  color: var(--text-muted);
  margin-top: 0.2rem;
  opacity: 0.85;
}

/* Who Appeared First? cards */
.wf-cards {
  display: flex;
  gap: 0.8rem;
  align-items: stretch;
  margin: 0.5rem 0;
}
.wf-card {
  flex: 1;
  background: var(--surface-raised);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem 0.6rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.2s, transform 0.15s;
  font-family: inherit;
  color: var(--text-primary);
}
.wf-card:hover:not(:disabled) { border-color: var(--accent-primary); transform: translateY(-2px); }
.wf-card.correct { border-color: #27ae60; background: rgba(39,174,96,0.1); }
.wf-card.wrong { border-color: #e74c3c; background: rgba(231,76,60,0.1); }
.wf-card-img {
  width: 80px; height: 80px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 0.5rem;
  display: block;
}
.wf-card-icon { font-size: 1.8rem; margin-bottom: 0.3rem; }
.wf-card-name { font-weight: 600; font-size: var(--text-sm); }
.wf-card-latin { font-size: var(--text-xs); color: var(--text-muted); font-style: italic; }
.wf-vs {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 700; color: var(--accent-primary);
  min-width: 2rem;
}
.wf-reveal {
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: 0.8rem;
  margin: 0.5rem 0;
}
.wf-reveal-header { font-weight: 600; font-size: var(--text-base); margin-bottom: 0.4rem; }
.wf-reveal-dates { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: 0.4rem; }
.wf-bridge-fact { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; }

/* Family or Foe? target card */
.ff-target {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  background: var(--surface-raised);
  border: 2px solid var(--accent-primary);
  border-radius: var(--radius-lg);
  padding: 0.8rem 1rem;
  margin: 0.5rem 0;
}
.ff-target-img {
  width: 56px; height: 56px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}
.ff-target-name {
  font-weight: 700;
  font-size: var(--text-base);
}

/* Species of the Day badge */
#sotd-badge {
  position: fixed;
  top: 4.4rem;
  left: 1rem;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--surface-raised, var(--surface));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: var(--text-xs);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
  color: var(--text);
}
#sotd-badge:hover { border-color: var(--gold, var(--accent-primary)); transform: translateY(-1px); }

/* Daily Challenge mode card */
.game-mode-card.daily-active {
  border: 2px solid var(--gold, var(--accent-primary));
  animation: dailyPulse 2s ease-in-out infinite;
}
.game-mode-card.daily-done { opacity: 0.6; }
@keyframes dailyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,136,58,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(200,136,58,0); }
}