/* ═══════════════════════════════════════════════════════════════════════
   GLOBAL COLOR PALETTE (CSS VARIABLES)
   Dark mode = default. Light mode only overrides what changes.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
    --font-display:         'Playfair Display', 'Georgia', serif;
    --font-control:         'Georgia', serif;
    /* ── Accent & text ── */
    --color-primary:        #d4b87e;
    --color-secondary:      #a68a5a;
    --color-muted:          #8b7355;
    --color-accent:         #c9a96e;
    --color-text-light:     #f8f6f3;
    --color-text-warm:      #f4e4c1;       
    --color-text-dim:       #b29a7d;
    --color-text-rank:      #6b4e2a;
    --color-text-dark:      #5a3e1b;      

    /* ── Backgrounds ── */
    --bg-base:              #2d2318;       
    --bg-deep:              #1f1812;      
    --bg-deeper:            #1a1410;       
    --bg-darkest:           #0f0a08;       
    --bg-card:              #2c2318;      
    --bg-card-dark:         #221a12;      
    --bg-inset:             #2a1f16;      
    --bg-raised:            #3d2f1f;       
    --bg-victory:           #3d3027;       
    --bg-panel-subtle:      rgba(61, 47, 31, 0.30);  
    --bg-panel:             rgba(61, 47, 31, 0.50);  
    --bg-panel-medium:      rgba(61, 47, 31, 0.40);  
    --bg-panel-strong:      rgba(61, 47, 31, 0.60);   
    --bg-panel-dark:        rgba(42, 31, 22, 0.30);   
    --bg-panel-darker:      rgba(42, 31, 22, 0.60);   
    --bg-panel-darkest:     rgba(42, 31, 22, 0.70);   
    --bg-input:             rgba(61, 47, 31, 0.80);   
    --bg-input-hover:       rgba(74, 56, 41, 0.90);   

    /* ── Borders ── */
    --border-base:          #4a3829;       
    --border-subtle:        #5d4a36;       
    --border-inner:         #3d2f1f;       
    --border-hover:         #6b5d52;      

    /* ── Status: success ── */
    --color-success:        #5a9c6b;
    --color-success-dark:   #4a7c59;
    --color-success-deeper: #2d6b3f;
    --color-success-text:   #c8e6c9;
    --color-success-bg:     rgba(74, 124, 89, 0.20);
    --color-success-bg-alt: rgba(74, 124, 89, 0.25);

    /* ── Status: danger ── */
    --color-danger:         #c06040;
    --color-danger-dark:    #8b3a2a;
    --color-danger-bg:      rgba(139, 58, 42, 0.20);
    --color-danger-text:    #c9614a;
    --color-danger-light:   #e8a090;

    /* ── Status: warning ── */
    --color-warning:        #e2a64e;
    --color-warning-bg:     rgba(226, 166, 78, 0.12);

    /* ── Tree nodes (already existed, kept as-is) ── */
    --tree-ancestor-bg:     rgba(166, 97, 37, 0.84);
    --tree-ancestor-border: #e6b374;
    --tree-ancestor-hover-bg: rgba(189, 113, 46, 0.92);
    --tree-hint-bg:         rgba(172, 134, 34, 0.82);
    --tree-hint-border:     #edce79;
    --tree-leaf-bg:         rgba(48, 122, 136, 0.82);
    --tree-leaf-border:     #87cbd5;
    --tree-leaf-hover-bg:   rgba(55, 142, 158, 0.90);
    --tree-leaf-border-hover:#a9e3ec;
    --tree-target-bg:       rgba(53, 150, 88, 0.88);
    --tree-target-border:   #94e7b1;
    --tree-gaveup-bg:       rgba(180, 77, 54, 0.86);
    --tree-gaveup-border:   #f99c7c;
    --tree-leaf-hint-bg:    rgba(222, 184, 112, 0.18);
    --tree-leaf-hint-border:#deb870;

    /* ── Tree lines & circles ── */
    --tree-line:            #8b7355;
    --tree-line-revealed:   #c9a96e;
    --tree-line-guess:      #74b7c3;
    --tree-line-hint:       #d3aa64;
    --tree-circle-bg:       #2a1f16;
    --tree-circle-revealed-fill:  #c9a96e;
    --tree-circle-revealed-stroke:#f4e4c1;
    --tree-circle-guess-fill:     #8b6f47;
    --tree-circle-guess-stroke:   #a68a5a;
    --tree-circle-hint-fill:      #a68a5a;
    --tree-circle-ancestor-stroke:#c9a96e;

    /* ── Tree labels ── */
    --tree-label:           #f4e4c1;
    --tree-label-revealed:  #f6fbf3;
    --tree-label-guess:     #eaf8fb;
    --tree-label-hint:      #8b7355;
    --tree-label-ancestor:  #f4e4c1;

    /* ── Difficulty buttons ── */
    --diff-very-easy-border:        #3d9c6b;
    --diff-very-easy-border-hover:  #5abf8a;
    --diff-very-easy-bg-hover:      linear-gradient(180deg, #2f4a3a 0%, #243528 100%);
    --diff-easy-border:             #5a9c6b;
    --diff-easy-border-hover:       #7abf8a;
    --diff-easy-bg-hover:           linear-gradient(180deg, #2a3d2f 0%, #1f2a22 100%);
    --diff-normal-border:           #c9a96e;
    --diff-normal-border-hover:     #e6c896;
    --diff-normal-bg-hover:         linear-gradient(180deg, #3d3520 0%, #2a2416 100%);
    --diff-hard-border:             #c06040;
    --diff-hard-border-hover:       #e08060;
    --diff-hard-bg-hover:           linear-gradient(180deg, #3d2520 0%, #2a1a16 100%);
    --diff-very-hard-border:        #b04030;
    --diff-very-hard-border-hover:  #d05040;
    --diff-very-hard-bg-hover:      linear-gradient(180deg, #3d1f18 0%, #2a1612 100%);

    /* ── Buttons ── */
    --button-primary-bg:        linear-gradient(180deg, #dcc58f 0%, #bd9a60 100%);
    --button-primary-bg-hover:  linear-gradient(180deg, #ead5a4 0%, #c9a76d 100%);
    --button-primary-color:     #1a1410;
    --button-primary-border:    #a88752;
    --button-secondary-bg:      rgba(61, 47, 31, 0.72);
    --button-secondary-hover:   rgba(78, 61, 42, 0.94);
    --button-secondary-color:   #e0c994;
    --button-secondary-border:  #6b5540;
    --button-shadow:            0 2px 6px rgba(0, 0, 0, 0.28);
    --button-shadow-hover:      0 5px 12px rgba(0, 0, 0, 0.32);
    --btn-new-game-bg:      linear-gradient(180deg, #3d4a2f 0%, #2d3a1f 100%);
    --btn-new-game-bg-hover:linear-gradient(180deg, #4a5d36 0%, #3d4a2f 100%);
    --btn-new-game-color:   #d4e5c9;
    --btn-new-game-border:  #4a5d36;
    --btn-guess-color:      #1a1410;      /* dark text on gold button            */

    /* ── Misc ── */
    --color-accent-faint:   rgba(201, 169, 110, 0.05);
    --glass-surface:        rgba(24, 18, 13, 0.66);
    --glass-surface-soft:   rgba(36, 27, 20, 0.50);
    --glass-border:         rgba(244, 228, 193, 0.17);
    --glass-highlight:      rgba(255, 255, 255, 0.09);
    --glass-shadow:         rgba(0, 0, 0, 0.30);
    --glass-sheet:          linear-gradient(160deg, rgba(62, 47, 33, 0.60) 0%, rgba(24, 18, 13, 0.72) 100%);
    --glass-sheet-solid:    linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-dark) 100%);
    --glass-glow:           rgba(255, 236, 200, 0.10);
    --glass-edge:           rgba(244, 228, 193, 0.22);
    --glass-sheen:          rgba(255, 244, 220, 0.18);
    --glass-veil:           rgba(10, 7, 5, 0.45);
    --glass-filter:         blur(22px) saturate(150%);
    --glass-depth:          0 24px 60px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
    --field-bg:             linear-gradient(180deg, var(--bg-darkest) 0%, var(--bg-deeper) 100%);
    --field-border:         var(--border-inner);
    --field-shadow:         inset 0 2px 5px rgba(0, 0, 0, 0.55);
    --field-ring:           0 0 0 3px rgba(201, 169, 110, 0.22);
    --card-raised-bg:       linear-gradient(180deg, #463526 0%, #30241b 100%);
    --card-raised-bg-hover: linear-gradient(180deg, #57432f 0%, #3a2c20 100%);
    --card-raised-border:   #8b7355;
    --card-raised-border-hover: #a68a5a;
    --card-raised-shadow:   0 6px 16px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --card-raised-shadow-hover: 0 10px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.09);
    --card-raised-text:     var(--color-text-light);
    --card-raised-text-hover: var(--color-text-light);
    --card-art-bg:          #17110d;
    --card-art-border:      #594331;
    --card-art-inset:       inset 0 3px 8px rgba(0, 0, 0, 0.45);
    --toast-bg:             linear-gradient(150deg, rgba(74, 93, 54, 0.74) 0%, rgba(37, 49, 25, 0.80) 100%);
    --toast-solid-bg:       linear-gradient(135deg, #3d4a2f 0%, #2d3a1f 100%);
    --toast-border:         rgba(160, 196, 120, 0.38);
    --toast-text:           #d4e5c9;
    --toast-kicker:         #a68a5a;
    --color-accent-subtle:  rgba(201, 169, 110, 0.15);
    --color-bg-panel-login: rgba(61, 47, 31, 0.35);
    --elev-1:               0 2px 6px rgba(0, 0, 0, 0.30);
    --elev-2:               0 4px 12px rgba(0, 0, 0, 0.36);
    --elev-3:               0 10px 24px rgba(0, 0, 0, 0.40);
    --elev-4:               0 20px 48px rgba(0, 0, 0, 0.50);
    --control-sm:           38px;
    --control-md:           44px;
    --control-lg:           48px;
    --radius-sm:            6px;
    --radius-md:            10px;
    --radius-lg:            16px;
    --radius-control:       var(--radius-sm);
    --radius-card:          var(--radius-md);
    --radius-button:        var(--radius-sm);
    --focus-ring:           var(--color-accent);
    --motion-fast:          180ms;
    --motion-standard:      300ms;
    --motion-screen:        420ms;
    --motion-ease:          cubic-bezier(0.22, 0.8, 0.35, 1);
    --motion-spring:        cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE - only overrides what actually changes
   ═══════════════════════════════════════════════════════════════════════ */
body.light-mode,
html[data-theme="light"] body {
    --bg-base:              #e8dcc8;
    --bg-card:              #f5f0e8;
    --bg-card-dark:         #e8dcc8;
    --bg-deep:              #f5f0e8;
    --bg-deeper:            #f5f0e8;
    --bg-darkest:           #ffffff;
    --bg-inset:             #ffffff;
    --bg-raised:            #f5f0e8;
    --bg-victory:           #f5f0e8;
    --bg-panel-subtle:      rgba(139, 115, 85, 0.15);
    --bg-panel:             rgba(255, 255, 255, 0.60);
    --bg-panel-medium:      rgba(255, 255, 255, 0.60);
    --bg-panel-strong:      rgba(255, 255, 255, 0.50);
    --bg-panel-dark:        rgba(232, 220, 200, 0.40);
    --bg-panel-darker:      rgba(255, 255, 255, 0.50);
    --bg-panel-darkest:     rgba(201, 169, 110, 0.15);
    --glass-surface:        rgba(255, 255, 255, 0.70);
    --glass-surface-soft:   rgba(255, 255, 255, 0.52);
    --glass-border:         rgba(93, 74, 54, 0.18);
    --glass-highlight:      rgba(255, 255, 255, 0.78);
    --glass-shadow:         rgba(62, 48, 31, 0.20);
    --glass-sheet:          linear-gradient(160deg, rgba(255, 255, 255, 0.80) 0%, rgba(245, 240, 232, 0.64) 100%);
    --glass-sheet-solid:    linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-dark) 100%);
    --glass-glow:           rgba(255, 255, 255, 0.65);
    --glass-edge:           rgba(93, 74, 54, 0.20);
    --glass-sheen:          rgba(255, 255, 255, 0.90);
    --glass-veil:           rgba(62, 48, 31, 0.22);
    --glass-depth:          0 24px 60px rgba(62, 48, 31, 0.22), 0 2px 8px rgba(62, 48, 31, 0.10);
    --field-bg:             linear-gradient(180deg, var(--bg-darkest) 0%, var(--bg-deeper) 100%);
    --field-border:         var(--border-inner);
    --field-shadow:         inset 0 1px 3px rgba(62, 48, 31, 0.12);
    --field-ring:           0 0 0 3px rgba(139, 115, 85, 0.22);
    --card-raised-bg:       linear-gradient(180deg, #e3d4ba 0%, #cdb994 100%);
    --card-raised-bg-hover: linear-gradient(180deg, #ecdfca 0%, #d8c4a0 100%);
    --card-raised-border:   #8b6f47;
    --card-raised-border-hover: #5c4033;
    --card-raised-shadow:   0 6px 16px rgba(74, 56, 41, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 -2px 4px rgba(74, 56, 41, 0.08);
    --card-raised-shadow-hover: 0 10px 24px rgba(74, 56, 41, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.82), inset 0 -2px 4px rgba(74, 56, 41, 0.08);
    --card-raised-text:     #3d2f1f;
    --card-raised-text-hover: #2d2318;
    --card-art-bg:          #f8f3ea;
    --card-art-border:      #9d8562;
    --card-art-inset:       inset 0 2px 6px rgba(74, 56, 41, 0.12);
    --toast-bg:             linear-gradient(150deg, rgba(232, 242, 220, 0.86) 0%, rgba(206, 224, 186, 0.78) 100%);
    --toast-solid-bg:       linear-gradient(135deg, #e8f2dc 0%, #cfe0ba 100%);
    --toast-border:         rgba(74, 93, 54, 0.32);
    --toast-text:           #2d3a1f;
    --toast-kicker:         #5c4033;
    --focus-ring:           #8b5e3c;
    --elev-1:               0 2px 7px rgba(62, 48, 31, 0.16);
    --elev-2:               0 5px 14px rgba(62, 48, 31, 0.19), 0 1px 3px rgba(62, 48, 31, 0.08);
    --elev-3:               0 12px 28px rgba(62, 48, 31, 0.22), 0 2px 6px rgba(62, 48, 31, 0.08);
    --elev-4:               0 22px 52px rgba(62, 48, 31, 0.26);
    --color-danger:         #a8452a;
    --color-danger-text:    #9a3b24;
    --color-danger-light:   #9a3b24;
    --color-danger-bg:      rgba(168, 69, 42, 0.12);
    --bg-input:             linear-gradient(180deg, #e8dcc8 0%, #d4c4a0 100%);
    --bg-input-hover:       linear-gradient(180deg, #d4c4a0 0%, #c4b080 100%);

    --border-base:          #c9a96e;
    --border-subtle:        #c9a96e;
    --border-inner:         #e8dcc8;
    --border-hover:         #8b6f47;

    /* High Contrast Typography Overrides */
    --color-text-light:     #2d2318;       /* Very dark coffee brown */
    --color-text-warm:      #4a3829;       /* Rich dark chocolate brown */
    --color-text-dim:       #4a3829;       
    --color-text-dark:      #2d2318;      
    --color-primary:        #4a3829;       /* Deep coffee tone for titles */
    --color-secondary:      #5c4033;       /* Dark warm wood tone for subtitles */
    --color-muted:          #5c4033;       /* Dark wood tone for muted labels */
    --color-accent:         #8b5e3c;       /* Rich dark caramel for highlights & rows */
    --text-value:           #4a3829;       /* FIXES: Microscopic white/gold numbers! */

    /* Success & Achievements Contrast */
    --color-success-deeper: #1b4d22;       /* Dark forest green */
    --color-success-text:   #1b4d22;       /* FIXES: Microscopic light green achievement titles! */
    --color-success-bg:     rgba(144, 238, 144, 0.15);
    --color-success-bg-alt: rgba(144, 238, 144, 0.15);

    --tree-label:           #2d2318;
    --tree-ancestor-bg:     rgba(164, 93, 26, 0.94);
    --tree-ancestor-border: #6b3909;
    --tree-ancestor-hover-bg: rgba(184, 106, 32, 0.97);
    --tree-hint-bg:         rgba(173, 129, 18, 0.94);
    --tree-hint-border:     #724e00;
    --tree-leaf-bg:         rgba(210, 238, 243, 0.94);
    --tree-leaf-border:     #347d8b;
    --tree-leaf-hover-bg:   rgba(224, 247, 251, 0.98);
    --tree-leaf-border-hover:#0c606d;
    --tree-target-bg:       rgba(38, 137, 76, 0.95);
    --tree-target-border:   #0a562b;
    --tree-gaveup-bg:       rgba(176, 69, 45, 0.95);
    --tree-gaveup-border:   #7b2815;
    --tree-leaf-hint-bg:    rgba(222, 184, 112, 0.26);
    --tree-leaf-hint-border:#876125;
    --tree-label-guess:     #003f4b;
    --tree-label-hint:      #5a4a30;
    --tree-label-ancestor:  #f8eedb;
    --tree-line-revealed:         #8b5e3c;
    --tree-line-guess:            #438592;
    --tree-line-hint:             #6b5340;
    --tree-circle-revealed-fill:  #8b5e3c;

    --diff-very-easy-border:      #2d8a5a;
    --diff-easy-border:           #4a9a6a;
    --diff-normal-border:         #8b6f47;
    --diff-hard-border:           #b05030;
    --diff-very-hard-border:      #a03020;

    --btn-new-game-bg:      linear-gradient(180deg, #5a8a4a 0%, #3d6b2f 100%);
    --btn-new-game-bg-hover:linear-gradient(180deg, #6a9a5a 0%, #4a7a3a 100%);
    --btn-new-game-color:   #ffffff;
    --btn-new-game-border:  #4a7a3a;
    --btn-guess-color:      #1a1410;
    --button-primary-bg:        linear-gradient(180deg, #966744 0%, #754a2f 100%);
    --button-primary-bg-hover:  linear-gradient(180deg, #a8754f 0%, #855638 100%);
    --button-primary-color:     #ffffff;
    --button-primary-border:    #684128;
    --button-secondary-bg:      rgba(255, 255, 255, 0.64);
    --button-secondary-hover:   rgba(255, 255, 255, 0.92);
    --button-secondary-color:   #4a3829;
    --button-secondary-border:  #b79b70;
    --button-shadow:            0 2px 7px rgba(74, 56, 41, 0.20);
    --button-shadow-hover:      0 6px 15px rgba(74, 56, 41, 0.26);
    --color-warning:            #a8661c;
    --color-warning-bg:         rgba(168, 102, 28, 0.10);

    --color-accent-faint:   rgba(201, 169, 110, 0.05);
    --color-accent-subtle:  rgba(201, 169, 110, 0.15);
    --color-bg-panel-login: rgba(201, 169, 110, 0.15);
}

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

html {
    scroll-behavior: smooth;
    }

body {
  font-family: var(--font-display);
  background: var(--bg-base);
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(139, 115, 85, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(201, 169, 110, 0.1) 0%, transparent 50%),
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,.1) 2px, rgba(0,0,0,.1) 4px),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.1) 2px, rgba(0,0,0,.1) 4px);
  min-height: 100vh;
  min-height: 100dvh;
  padding: 20px;
  color: var(--color-text-light);
  transition: all var(--motion-standard) ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.light-mode,
html[data-theme="light"] body {
  background: var(--bg-base);
  background-image: 
    repeating-linear-gradient(90deg, transparent, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px),
    repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,.03) 2px, rgba(0,0,0,.03) 4px);
  color: var(--color-text-light);
}

.tab-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid var(--border-base);
  margin: -40px -40px 36px;
}

.tab-btn {
  padding: 16px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--color-text-dim);
  font-family: var(--font-control);
  font-size: 0.85em;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.25s;
  margin-bottom: -2px;
}

@media (hover: hover) {
  .tab-btn:hover { color: var(--color-secondary); }
}

.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-accent);
  background: var(--color-accent-faint);
}

.login-form-panel { display: none; animation: panelSlide var(--motion-standard) var(--motion-ease); }
.login-form-panel.active { display: block; }

@keyframes panelSlide {
from { opacity: 0; transform: translateX(16px); }
to   { opacity: 1; transform: translateX(0); }
}

.login-field { margin-bottom: 20px; }

.login-field label {
  display: block;
  color: var(--color-muted);
  font-size: 0.78em;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.login-field input {
  width: 100%;
  padding: 13px 16px;
  font-size: 16px;
  font-family: var(--font-control);
  background: linear-gradient(180deg, var(--bg-darkest) 0%, var(--bg-deeper) 100%);
  border: 2px solid var(--border-inner);
  border-radius: var(--radius-sm);
  color: var(--color-text-light);
  outline: none;
  transition: border-color var(--motion-fast), box-shadow 0.2s;
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.7);
}

.login-field input::placeholder { color: var(--color-muted); }

.login-field input:focus {
  border-color: var(--color-muted);
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.6), 0 0 0 3px rgba(139,115,85,0.2);
}

.login-field input.input-error {
  border-color: var(--color-danger-dark);
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.6), 0 0 0 3px rgba(139,58,42,0.2);
}

.login-field-error {
  color: var(--color-danger-text);
  font-size: 0.78em;
  margin-top: 6px;
  font-style: italic;
  display: none;
}

.login-field-error.visible { display: block; }

.login-forgot {
  display: block;
  text-align: right;
  color: var(--color-text-dim);
  font-size: 0.85em;
  font-style: italic;
  margin-top: -12px;
  margin-bottom: 20px;
  cursor: pointer;
  transition: color var(--motion-fast);
}

@media (hover: hover) {
  .login-forgot:hover { color: var(--color-secondary); }
}

.login-text-action {
  width: auto;
  min-height: 44px;
  padding: 6px 0;
  color: var(--color-text-dim);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: inherit;
  font-size: 0.85em;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
}

@media (hover: hover) {
  .login-text-action:hover {
    color: var(--color-secondary);
    background: transparent;
    box-shadow: none;
    transform: none;
  }
}

.login-text-action.login-forgot {
  margin-left: auto;
}

.login-back-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 20px;
}

.login-card {
  width: min(480px, 100%);
  margin: 40px auto;
  padding: 40px;
}

.login-modal-box {
  width: min(480px, 100%);
}

.password-update-card {
  text-align: left;
}

.password-update-title {
  margin-bottom: 12px;
  text-align: left;
}

.password-update-copy {
  margin-bottom: 28px;
}

.login-card .tab-row,
.login-modal-box .tab-row {
  margin: -40px -40px 36px;
}

.login-field-last {
  margin-bottom: 28px;
}

.login-reset-title {
  margin-bottom: 10px;
  color: var(--color-primary);
  font-size: 1.1em;
  letter-spacing: 2px;
}

.login-reset-copy {
  margin-bottom: 24px;
  color: var(--color-muted);
  font-size: 0.85em;
  font-style: italic;
  line-height: 1.7;
}

.login-guest-action {
  margin-top: 20px;
  text-align: center;
}

.login-global-error {
  margin-bottom: 18px;
  padding: 13px 16px;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-dark);
  border-radius: var(--radius-sm);
  color: var(--color-danger-light);
  font-size: 0.85em;
  text-align: center;
  display: none;
}

.login-global-error.visible { display: block; }

.login-global-success {
  margin-bottom: 18px;
  padding: 13px 16px;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-dark);
  border-radius: var(--radius-sm);
  color: var(--color-success-text);
  font-size: 0.85em;
  text-align: center;
  display: none;
}

.login-global-success.visible { display: block; }

.btn-loading { position: relative; color: transparent !important; }

.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  border: 2px solid rgba(26,20,16,0.3);
  border-top-color: var(--bg-deeper);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

.suggestion-item.highlighted {
  background: var(--border-inner);
  color: var(--color-accent);
}

@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.achievement-card {
  padding: 18px;
  border-radius: 6px;
  border: 2px solid;
  transition: all var(--motion-standard);
}

.achievements-panel {
  margin-bottom: 30px;
  padding: 25px;
  background: var(--bg-panel);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-card);
}

.achievements-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border-subtle);
}

.achievements-heading h3 {
  color: var(--color-text-light);
  font-size: 1.3em;
}

.achievements-heading span {
  color: var(--color-muted);
  font-size: 0.78em;
  letter-spacing: 0.02em;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 15px;
}

.achievement-locked {
  background: var(--bg-panel-dark);
  border-color: var(--border-subtle);
  opacity: 0.6;
}

.achievement-unlocked {
  background: var(--color-success-bg-alt);
  border-color: var(--color-success);
  opacity: 1;
}

.achievement-title {
  font-weight: 600;
  margin: 0;
  font-size: 1em;
  letter-spacing: 1px;
  color: var(--color-success-text);
  transition: all var(--motion-standard);
}

.achievement-card-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.achievement-card-clade {
  position: relative;
  overflow: hidden;
}

.achievement-card-clade::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 100%;
  background: var(--color-accent);
  opacity: 0.7;
}

.achievement-category {
  margin-bottom: 3px;
  color: var(--color-accent);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.achievement-medal {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--color-muted);
  border: 2px solid currentColor;
  border-radius: 50%;
}

.achievement-medal::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.achievement-medal::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 12px;
  height: 9px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 78% 100%, 50% 68%, 22% 100%);
  transform: translateX(-50%);
}

.achievement-unlocked .achievement-medal {
  color: var(--color-success);
  background: var(--color-success-bg);
  box-shadow: 0 0 0 3px var(--color-success-bg);
}

.achievement-locked .achievement-title {
  color: var(--color-muted);
}

.achievement-desc {
  font-size: 0.85em;
  color: var(--color-secondary);
  font-style: italic;
  line-height: 1.4;
}

.achievement-progress {
  display: grid;
  gap: 7px;
  margin-top: 14px;
}

.achievement-progress-track {
  height: 5px;
  overflow: hidden;
  background: var(--border-inner);
  border-radius: 999px;
}

.achievement-progress-fill {
  height: 100%;
  background: var(--color-muted);
  border-radius: inherit;
  transition: width 0.35s ease;
}

.achievement-unlocked .achievement-progress-fill {
  background: var(--color-success);
}

.achievement-progress > span {
  color: var(--color-muted);
  font-size: 0.78em;
  letter-spacing: 0.02em;
  text-align: right;
}

.achievement-notification-stack {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  z-index: 10000;
  display: grid;
  gap: 10px;
  width: min(340px, calc(100vw - 28px));
  pointer-events: none;
}

.achievement-notification {
  padding: 17px 20px;
  color: var(--toast-text);
  background: var(--toast-solid-bg);
  border: 1px solid var(--toast-border);
  border-radius: var(--radius-card);
  box-shadow: var(--elev-3);
  font-family: var(--font-control);
  animation: achievementToastIn 0.4s ease-out both;
}

.achievement-notification.is-leaving {
  animation: achievementToastOut 0.35s ease-in both;
}

.achievement-notification-kicker {
  margin-bottom: 5px;
  color: var(--toast-kicker);
  font-size: 0.78em;
  letter-spacing: 0.02em;
}

.achievement-notification-title {
  font-size: 1.1em;
  font-weight: 600;
  letter-spacing: 1px;
}

@keyframes achievementToastIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes achievementToastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(30px); }
}

.difficulty-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.diff-name {
  color: var(--color-text-light);
  font-size: 1em;
  letter-spacing: 1px;
}

.diff-stats {
  text-align: right;
}

.diff-record {
  color: var(--color-success);
  margin-right: 20px;
  font-weight: 600;
}

.diff-winrate {
  color: var(--color-primary);
  margin-right: 15px;
}

.diff-avg {
  color: var(--color-secondary);
  font-size: 0.92em;
}

.empty-stats {
  color: var(--color-muted);
  font-style: italic;
  padding: 20px;
  text-align: center;
}

.btn-header {
  min-height: var(--control-sm);
  padding: 8px 14px;
  font-size: 13px;
  letter-spacing: 0.5px;
}

.btn-with-icon,
.login-back-link,
.museum-entry-read-more {
  align-items: center;
  gap: 8px;
}

.btn-with-icon {
  display: inline-flex;
  justify-content: center;
}

.login-back-link {
  justify-content: flex-start;
}

.ui-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 0.9em;
  height: 0.9em;
  color: currentColor;
  font-size: 1em;
  font-style: normal;
  line-height: 1;
  vertical-align: -0.08em;
}

.ui-icon-arrow-left::before {
  content: '';
  position: absolute;
  left: 0.14em;
  top: 0.32em;
  width: 0.66em;
  height: 0;
  border-top: 2px solid currentColor;
}

.ui-icon-arrow-left::after {
  content: '';
  position: absolute;
  left: 0.13em;
  top: 0.13em;
  width: 0.38em;
  height: 0.38em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.ui-icon-external::before {
  content: '';
  position: absolute;
  left: 0.04em;
  bottom: 0.02em;
  width: 0.58em;
  height: 0.58em;
  border: 2px solid currentColor;
  border-radius: 1px;
}

.ui-icon-external::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 0.48em;
  height: 0.48em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  background: linear-gradient(
    45deg,
    transparent 42%,
    currentColor 43%,
    currentColor 56%,
    transparent 57%
  );
}

.difficulty-info-text {
  color: var(--color-accent);
  font-size: 0.92em;
  line-height: 1.8;
}

.container {
  max-width: 1600px;
  margin: 0 auto;
}

.site-header {
  position: relative;
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 30px;
  background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-deeper) 100%);
  border: 2px solid var(--border-base);
  border-radius: var(--radius-sm);
  box-shadow: var(--elev-2);
  transition: all var(--motion-standard) ease;
}

.site-header-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 2fr) minmax(0, 1fr);
  align-items: center;
  width: 100%;
}

.site-brand {
  min-width: 0;
  text-align: center;
}

.site-header-utility {
  display: grid;
  justify-self: end;
  justify-items: end;
  gap: 4px;
  min-width: 0;
}

.header-theme-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
  min-height: 44px;
}

.language-picker {
  display: inline-flex;
  align-items: center;
  order: 1;
}

.language-picker select {
  min-height: var(--control-sm);
  padding: 7px 28px 7px 10px;
  color: var(--color-text-light);
  background: var(--bg-card);
  border: 1px solid var(--border-base);
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
}

.language-picker select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

#header-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

#header-controls:empty {
  display: none;
}

/* All screens share the same responsive header dimensions, regardless of account or navigation state. */
#header-controls.stable-header-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.header-controls-reserve,
.header-controls-visible {
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  justify-content: inherit;
  gap: inherit;
  min-width: 0;
}

.header-controls-reserve {
  visibility: hidden;
  pointer-events: none;
}

.header-account-reserve {
  width: 40px;
  max-width: 100%;
}

.stable-header-controls .btn-account {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-theme-switch {
  position: static;
  order: 2;
}

.site-header::before,
.site-header::after {
display: none;
}

.site-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.6), transparent);
}

h1 {
  font-size: 3.5em;
  margin-bottom: 10px;
  color: var(--color-primary);
  font-weight: 900;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

.subtitle {
  font-size: 1.1em;
  color: var(--color-secondary);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 3px;
}

#theme-toggle {
  padding: 10px 20px;
  font-size: 14px;
}

.game-card {
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-dark) 100%);
  border: 2px solid var(--border-base);
  border-radius: var(--radius-sm);
  padding: 40px;
  box-shadow: var(--elev-3);
  margin-bottom: 20px;
  transition: all var(--motion-standard) ease;
}

.game-card::before,
.game-card::after {
display: none;
}

.game-mode-context {
  margin: -4px 0 20px;
  color: var(--color-muted);
  font-size: 0.85em;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-align: center;
}

.input-section {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  position: relative;
}

.guess-primary-row {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 10px;
}

.guess-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.guess-secondary-row {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}

.guess-feedback {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  margin: 0;
  color: var(--color-danger-light);
  font-size: 0.85em;
  font-style: italic;
}

.guess-feedback.is-shaking {
  animation: guessShake var(--motion-standard) var(--motion-ease);
}

.guess-feedback-suggestion {
  min-height: 0;
  padding: 0;
  color: var(--color-primary);
  background: none;
  border: 0;
  box-shadow: none;
  font: inherit;
  font-style: italic;
  letter-spacing: 0;
  text-decoration: underline;
  text-transform: none;
}

@keyframes guessShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

#dino-input {
  width: 100%;
  padding: 14px 18px;
  font-size: 16px;
  font-family: var(--font-control);
  border: 2px solid var(--border-inner);
  border-radius: var(--radius-sm);
  outline: none;
  transition: all var(--motion-fast);
  background: linear-gradient(180deg, var(--bg-darkest) 0%, var(--bg-deeper) 100%);
  color: var(--color-text-light);
  box-shadow: 
    inset 0 3px 6px rgba(0,0,0,0.8),
    inset 0 1px 2px rgba(0,0,0,0.6),
    inset 0 -1px 0 rgba(255,255,255,0.03),
    0 1px 0 rgba(255,255,255,0.05);
}

#dino-input:focus {
  border-color: var(--color-muted);
  background: linear-gradient(180deg, var(--bg-deeper) 0%, var(--bg-inset) 100%);
  box-shadow: 
    inset 0 3px 6px rgba(0,0,0,0.7),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 0 0 3px rgba(139, 115, 85, 0.25),
    0 1px 0 rgba(255,255,255,0.08);
}

button {
  min-height: 44px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-control);
  border: 1px solid;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: background var(--motion-fast) ease, border-color 0.18s ease, color 0.18s ease,
              box-shadow 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

button::before {
  display: none;
}

.btn-guess,
.btn-hint,
.btn-new-game,
.modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-guess,
.modal-btn-primary {
  background: var(--button-primary-bg);
  color: var(--button-primary-color);
  border-color: var(--button-primary-border);
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), var(--button-shadow);
}

@media (hover: hover) {
  .btn-guess:hover:not(:disabled),
  .modal-btn-primary:hover:not(:disabled) {
    background: var(--button-primary-bg-hover);
    border-color: var(--color-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), var(--button-shadow-hover);
    transform: translateY(-2px);
  }
}

.btn-guess:active:not(:disabled),
.btn-hint:active:not(:disabled),
.btn-new-game:active:not(:disabled),
.modal-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--elev-1);
}

.btn-hint,
.modal-btn-secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-color);
  border-color: var(--button-secondary-border);
  box-shadow: var(--button-shadow);
}

@media (hover: hover) {
  .btn-hint:hover:not(:disabled),
  .modal-btn-secondary:hover:not(:disabled) {
    background: var(--button-secondary-hover);
    color: var(--color-primary);
    border-color: var(--color-muted);
    box-shadow: var(--button-shadow-hover);
    transform: translateY(-2px);
  }
}

.btn-giveup {
  min-height: var(--control-sm);
  padding: 10px 16px;
  color: var(--color-danger-light);
  background: var(--bg-panel-dark);
  border-color: color-mix(in srgb, var(--color-danger-dark) 72%, transparent);
  box-shadow: none;
  font-size: 12px;
  letter-spacing: 0.03em;
  opacity: 0.62;
}

.btn-giveup:hover:not(:disabled) {
  color: var(--color-danger-light);
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
  opacity: 1;
}

.btn-new-game {
  background: var(--btn-new-game-bg);
  color: var(--btn-new-game-color);
  border-color: var(--btn-new-game-border);
  width: 100%;
  margin-top: 20px;
  padding: 16px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), var(--button-shadow);
}

@media (hover: hover) {
  .btn-new-game:hover:not(:disabled) {
    background: var(--btn-new-game-bg-hover);
    border-color: var(--color-success);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), var(--button-shadow-hover);
    transform: translateY(-2px);
  }
}

button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: saturate(0.55);
}

.btn-block {
  width: 100%;
}

.btn-large {
  min-height: 52px;
  padding: 15px 28px;
  font-size: 14px;
  letter-spacing: 0.03em;
}

.btn-menu-action {
  min-width: 190px;
}

.btn-spaced {
  margin-top: 16px;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-inset);
  border: 2px solid var(--border-subtle);
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  box-shadow: var(--elev-2);
}

.suggestion-item {
  padding: 12px 18px;
  cursor: pointer;
  transition: background var(--motion-fast);
  border-bottom: 1px solid var(--border-inner);
  font-family: var(--font-control);
  font-style: italic;
  color: var(--color-text-light);
}

@media (hover: hover) {
  .suggestion-item:hover {
    background: var(--border-inner);
    color: var(--color-accent);
  }
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.game-session-stats {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.game-session-stat-main {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.game-session-stat-sidebar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.game-session-stats .stat {
  min-width: 0;
  padding: 15px 10px;
  background: linear-gradient(145deg, var(--glass-surface), var(--glass-surface-soft));
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 4px 12px var(--glass-shadow);
  transition: background var(--motion-fast) ease, border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: default;
}

.game-session-stats .stat::before {
  top: 1px;
  left: 1px;
  right: 1px;
  height: 45%;
  background: linear-gradient(180deg, var(--glass-highlight), transparent);
  border-radius: 5px 5px 0 0;
  pointer-events: none;
}

@media (hover: hover) {
  .game-session-stats .stat:hover {
    background: linear-gradient(145deg, var(--glass-surface), var(--glass-surface));
    border-color: var(--color-accent);
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 7px 18px var(--glass-shadow);
    text-transform: none;
    letter-spacing: normal;
    transform: none;
  }
}

.game-session-stats .stat-value {
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgba(212, 184, 126, 0.18);
}

.game-session-stats .stat-label {
  margin-top: 5px;
  font-size: 0.78rem;
  line-height: 1.3;
  letter-spacing: 0.08em;
}

.stat {
  text-align: center;
  padding: 12px 8px;
  background: linear-gradient(180deg, var(--border-base) 0%, var(--bg-raised) 50%, var(--bg-inset) 100%);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: all var(--motion-fast);
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -3px 6px rgba(0,0,0,0.5),
    0 4px 12px rgba(0,0,0,0.6),
    0 1px 3px rgba(0,0,0,0.4);
  position: relative;
}

.stat::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
  border-radius: 2px 2px 0 0;
  pointer-events: none;
}

@media (hover: hover) {
  .stat:hover {
    border-color: var(--border-hover);
    box-shadow: 
      inset 0 1px 0 rgba(255,255,255,0.2),
      inset 0 -3px 6px rgba(0,0,0,0.4),
      0 6px 16px rgba(0,0,0,0.7),
      0 2px 4px rgba(0,0,0,0.5);
    transform: translateY(-1px);
  }
}

.stat-value {
  font-size: 2.5em;
  font-weight: 400;
  color: var(--color-primary);
  font-family: var(--font-control);
  text-shadow: 
    0 1px 0 var(--bg-deeper),
    0 2px 4px rgba(0,0,0,0.6);
  transition: all var(--motion-standard) ease;
}

.stat-label {
  font-size: 0.85em;
  color: var(--color-secondary);
  margin-top: 8px;
  letter-spacing: 0.02em;
  font-weight: 300;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  transition: all var(--motion-standard) ease;
}

@media (max-width: 768px) {
    h1 { font-size: 1.6em; letter-spacing: 4px; }
    .site-brand h1 {
        font-size: clamp(2.35rem, 10vw, 3rem);
        line-height: 1;
        letter-spacing: 3px;
        margin-bottom: 12px;
    }
    .game-card { padding: 20px; }
    #dino-input:focus {
        /* Avoid a touch-focus halo that makes the input look enlarged on mobile. */
        box-shadow:
            inset 0 3px 6px rgba(0,0,0,0.7),
            inset 0 -1px 0 rgba(255,255,255,0.05),
            0 1px 0 rgba(255,255,255,0.08);
    }
    #dino-input:focus-visible {
        /* Keep keyboard focus clear without drawing outside the field. */
        outline: 2px solid var(--focus-ring);
        outline-offset: -4px;
    }
    .stats { 
        width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important; 
        gap: 10px !important; 
    }
    .stat { 
        padding: 10px !important; 
    }
    .stat-value { 
        font-size: 1.6em !important; 
    }
    .stat-label {
        font-size: 0.78em !important;
        letter-spacing: 1px !important;
        word-break: break-word !important;
        hyphens: auto !important;
    }
    .stat:nth-child(5) {
        grid-column: span 2 !important;
    }
    .clade-content { flex-direction: row; }
    .clade-image { max-width: 100%; }
    .input-section { 
        flex-direction: column !important; 
        gap: 10px !important; 
    }

    .guess-primary-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .guess-primary-row .btn-guess {
        width: 100% !important;
        padding: 14px 18px;
        font-size: 13px;
        letter-spacing: 0.03em;
    }

    .guess-secondary-row {
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .guess-secondary-row .btn-game-hint {
        flex: 0 0 auto;
        width: auto !important;
        padding: 10px 18px;
        font-size: 12px;
        letter-spacing: 0.03em;
    }

    .guess-secondary-row .btn-giveup {
        flex: 0 0 auto;
        width: auto !important;
        padding: 9px 4px;
        color: var(--color-danger-light);
        background: transparent;
        border-color: transparent;
        box-shadow: none;
        opacity: 0.58;
        text-decoration: underline;
        text-decoration-color: transparent;
        text-underline-offset: 4px;
    }

    .guess-secondary-row .btn-giveup:hover:not(:disabled),
    .guess-secondary-row .btn-giveup:focus-visible {
        background: transparent;
        border-color: transparent;
        opacity: 1;
        text-decoration-color: currentColor;
    }
    .site-header-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .site-header-spacer { display: none; }
    .site-header-utility {
        justify-self: stretch;
        justify-items: stretch;
        width: 100%;
        gap: 6px;
    }
    .header-theme-row {
        justify-content: flex-end;
    }
    #header-controls {
        justify-content: center;
        gap: 6px;
    }
    #header-controls button {
        padding: 6px 10px;
        font-size: 12px;
        letter-spacing: 0.5px;
    }
        }

#tree-container {
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 22px;
  min-height: 300px;
  max-height: 70vh;
  overflow: auto;
  position: relative;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 14px 34px var(--glass-shadow);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;
  cursor: grab;
}

#tree-container:active {
  cursor: grabbing;
}

#tree-container.tree-result-active {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  cursor: default;
  touch-action: auto;
  overscroll-behavior: auto;
}

#tree-container.tree-result-active:active {
  cursor: default;
}

#tree-container.tree-result-active #tree-scroll-wrapper {
  display: none;
}

#tree-container.tree-result-active .victory {
  margin-bottom: 0;
}

.tree-frame:has(> #tree-container.tree-result-active) + #clade-info {
  display: none;
}

.tree-review-return {
  display: none;
}

#tree-container.tree-result-active.tree-review-active {
  min-height: 300px;
  max-height: 70vh;
  padding: 20px;
  overflow: auto;
  background: var(--glass-surface);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 14px 34px var(--glass-shadow);

  cursor: grab;
  touch-action: pan-x pan-y;
  overscroll-behavior: contain;
}

#tree-container.tree-result-active.tree-review-active:active {
  cursor: grabbing;
}

#tree-container.tree-result-active.tree-review-active .victory {
  display: none;
}

#tree-container.tree-result-active.tree-review-active #tree-scroll-wrapper {
  position: relative;
  inset: auto;
  display: inline-block;
  visibility: visible;
  pointer-events: auto;
}

#tree-container.tree-result-active.tree-review-active .tree-review-return {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 20;
  display: inline-flex;
  margin: 0 0 14px;
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 10px 24px var(--glass-shadow);
  color: var(--color-text-light);
  background: var(--glass-surface);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}

.tree-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
  padding: 12px 14px;
  background: var(--glass-surface-soft);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 10px 24px var(--glass-shadow);
  border-radius: var(--radius-card);
}

.tree-toolbar-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.tree-toolbar-kicker {
  color: var(--color-muted);
  font-size: 0.78em;
  letter-spacing: 0.02em;
}

.tree-toolbar-clade {
  overflow: hidden;
  color: var(--color-primary);
  font-size: 1em;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.tree-toolbar-btn {
  min-height: var(--control-sm);
  padding: 8px 11px;
  color: var(--color-secondary);
  background: var(--bg-panel-darker);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
  font-size: 12px;
  letter-spacing: 0.03em;
}

@media (hover: hover) {
  .tree-toolbar-btn:hover:not(:disabled) {
    color: var(--color-primary);
    background: var(--bg-panel-strong);
    border-color: var(--color-accent);
  }
}

.tree-toolbar-btn::before {
  display: none;
}

.tree-frame {
  position: relative;
  min-width: 0;
}

.tree-zoom-dock {
  position: absolute;
  top: 14px;
  right: 22px;
  z-index: 20;
}

.tree-zoom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  border-radius: 999px;
}

.tree-zoom-btn {
  width: 38px;
  min-width: 38px;
  min-height: 36px;
  padding: 0;
  color: var(--color-secondary);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 15px;
  letter-spacing: 0;
}

.tree-zoom-btn.tree-zoom-value {
  min-height: 26px;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  border-block: 1px solid var(--glass-edge);
}

@media (hover: hover) {
  .tree-zoom-btn:hover:not(:disabled) {
    color: var(--color-primary);
    background: var(--color-accent-subtle);
  }
}

.tree-zoom-btn:focus-visible {
  outline-offset: -3px;
}

.tree-frame:has(> #tree-container.tree-result-active:not(.tree-review-active)) .tree-zoom-dock {
  display: none;
}

.clade-content { flex-direction: column; }
.clade-image   { max-width: 100%; }

#tree-scroll-wrapper {
position: relative;
z-index: 1;
display: inline-block;
min-width: 100%;
}

#tree-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tree-node-group {
  cursor: pointer;
  transition: all var(--motion-standard) cubic-bezier(0.4, 0, 0.2, 1);
}

@media (hover: hover) {
  .tree-node-group:hover rect {
    fill: var(--tree-ancestor-hover-bg);
    stroke: var(--tree-ancestor-border);
    stroke-width: 2;
    filter: drop-shadow(0 0 12px rgba(201, 169, 110, 0.6));
  }
}

@media (hover: hover) {
  .tree-node-group:hover text {
    fill: var(--tree-label-ancestor);
  }
}

.tree-node-group:focus-visible,
.tree-leaf-group:focus-visible,
.tree-collapse-toggle:focus-visible {
  outline: none;
}

.tree-node-group:focus-visible > rect,
.tree-leaf-group:focus-visible > rect {
  stroke: var(--focus-ring);
  stroke-width: 4;
  filter: drop-shadow(0 0 8px var(--focus-ring));
}

.tree-collapse-toggle:focus-visible text {
  fill: var(--focus-ring);
  font-size: 18px;
}

.tree-line {
  stroke: var(--tree-line);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  transition: all var(--motion-standard);
}

.tree-line-revealed {
  stroke: var(--tree-line-revealed);
  stroke-width: 3;
}

.tree-line.tree-line-best {
  stroke: var(--tree-circle-revealed-stroke);
  stroke-width: 4.5;
  filter: drop-shadow(0 0 4px var(--tree-line-revealed));
}

.tree-node-best rect,
.tree-best-destination rect {
  stroke: var(--tree-circle-revealed-stroke);
  stroke-width: 3.5;
  filter: drop-shadow(0 0 5px var(--tree-line-revealed));
}

.tree-node-best text,
.tree-best-destination text {
  font-weight: 700;
}

/* Dark mode: keep the best-trail cue warm and restrained, not neon. */
body:not(.light-mode) .tree-node-best rect,
body:not(.light-mode) .tree-best-destination rect {
  stroke: var(--tree-line-revealed);
  stroke-width: 3;
  filter: drop-shadow(0 0 2px rgba(201, 169, 110, 0.32));
}

@media (hover: hover) {
  body:not(.light-mode) .tree-node-group:hover rect {
    filter: drop-shadow(0 0 5px rgba(201, 169, 110, 0.38));
  }
}

.tree-line-guess {
  stroke: var(--tree-line-guess);
  stroke-width: 2.5;
  stroke-dasharray: 6,4;
}

.tree-line-hint {
  stroke: var(--tree-line-hint);
  stroke-width: 2;
  stroke-dasharray: 3,3;
}

.tree-node-label {
  font-family: var(--font-control);
  font-size: 16px;
  fill: var(--tree-label);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  transition: all var(--motion-standard) ease;
}

.tree-node-label-revealed {
  fill: var(--tree-label-revealed);
  font-weight: 600;
}

.tree-node-label-guess {
  fill: var(--tree-label-guess);
  font-style: italic;
  font-weight: 600;
}

.tree-leaf-guess rect {
  transition: fill var(--motion-fast) ease, stroke 0.18s ease, filter 0.18s ease;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22));
}

@media (hover: hover) {
  .tree-leaf-guess:hover rect {
    fill: var(--tree-leaf-hover-bg);
    stroke: var(--tree-leaf-border-hover);
    stroke-width: 3;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.30));
  }
}

.tree-node-label-hint {
  fill: var(--tree-label-hint);
  font-style: italic;
  font-weight: 500;
}

.tree-node-label-ancestor {
  fill: var(--tree-label-ancestor);
  font-weight: 600;
  paint-order: stroke;
  stroke: rgba(20, 12, 8, 0.65);
  stroke-width: 1px;
}

.empty-state {
  text-align: center;
  color: var(--color-muted);
  padding: 60px 20px;
  font-style: italic;
  font-size: 1.1em;
  transition: all var(--motion-standard) ease;
}

.victory {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  padding: 38px;
  background: linear-gradient(135deg, var(--bg-victory) 0%, var(--bg-card) 100%);
  color: var(--color-text-light);
  animation: celebrate 0.6s ease-out;
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--color-success);
  border-radius: var(--radius-card);
  margin-bottom: 20px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 8px 24px rgba(0,0,0,0.28);
  transition: all var(--motion-standard) ease;
}

.victory::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, var(--color-accent-subtle), transparent 45%);
  opacity: 0.65;
}

.victory > * {
  position: relative;
  z-index: 1;
}

.victory--revealed {
  border-top-color: var(--color-danger);
  background: linear-gradient(135deg, var(--bg-panel) 0%, var(--bg-card) 100%);
}

.victory--revealed h2 {
  color: var(--color-danger);
}

.victory-heading h2 {
  margin: 0;
  color: var(--color-success-text);
  font-size: clamp(1.15rem, 4vw, 1.65rem);
  letter-spacing: 0.16em;
  line-height: 1.2;
}

.victory-dino {
  font-size: clamp(2rem, 7vw, 3.15rem);
  margin: 16px 0 14px;
  font-style: italic;
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-success-text);
  overflow-wrap: anywhere;
}

.victory-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.victory-summary span {
  padding: 7px 11px;
  color: var(--color-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-inner);
  border-radius: 999px;
  font-size: 0.78em;
  letter-spacing: 0.02em;
}

.victory-mode-note {
  margin-bottom: 22px;
  padding: 12px 14px;
  color: var(--color-accent);
  background: var(--color-accent-faint);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  font-size: 0.85em;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.victory-media {
  max-width: 440px;
  margin: 24px auto 0;
}

.victory-media-loading,
.home-curiosity {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  min-height: 0;
  padding: 0;
  line-height: 1;
  color: var(--color-muted);
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 50%;
  box-shadow: none;
  font-size: 14px;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

.home-curiosity[aria-busy="true"] {
  color: var(--color-primary);
  border-color: var(--color-accent);
}

@media (hover: hover) {
  .home-curiosity:hover:not(:disabled) {
    color: var(--color-primary);
    border-color: var(--color-accent);
  }
}

.victory-goal-slot {
  margin: 12px auto 0;
  color: var(--color-muted);
  font-size: 0.85em;
  font-style: italic;
  letter-spacing: 0.4px;
  text-align: center;
}

.victory-save-status {
  margin: 18px auto 0;
  color: var(--color-muted);
  font-size: 0.78em;
  font-style: italic;
  letter-spacing: 0.8px;
}

.victory-media-loading::after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 8px;
  vertical-align: -1px;
  border: 2px solid var(--border-inner);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: resultMediaSpin 0.8s linear infinite;
}

@keyframes resultMediaSpin {
  to { transform: rotate(360deg); }
}

.victory-media-image-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  cursor: zoom-in;
}

.victory-media-image-button:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}

.victory-media-image {
  display: block;
  width: 100%;
  max-height: 55vh;
  object-fit: contain;
  background: var(--bg-darkest);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-3);
  cursor: zoom-in;
  transition: transform var(--motion-fast), box-shadow 0.2s, border-color 0.2s;
}

@media (hover: hover) {
  .victory-media-image:hover {
    transform: scale(1.01);
    border-color: var(--color-accent);
    box-shadow: var(--elev-3);
  }
}

.victory-media-credit {
  margin-top: 9px;
  color: var(--border-subtle);
  font-size: 0.78em;
  font-style: italic;
  line-height: 1.45;
  letter-spacing: 0.6px;
}

.victory-media-credit a {
  color: var(--color-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

@media (hover: hover) {
  .victory-media-credit a:hover {
    color: var(--color-secondary);
    border-bottom-color: var(--border-subtle);
  }
}

.victory-actions {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.victory-actions .btn-hint,
.victory-actions .btn-new-game {
  width: 100%;
  min-height: var(--control-lg);
  margin: 0;
  padding: 13px 16px;
}

.victory-action-secondary {
  font-size: 0.85em;
  letter-spacing: 0.02em;
}

.victory-discovery {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding: 16px;
  color: var(--color-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  text-align: left;
}

.victory-discovery--new {
  background:
    linear-gradient(135deg, var(--color-accent-subtle), transparent 60%),
    var(--bg-panel);
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent-faint), var(--button-shadow);
  animation: museumDiscoveryReveal 0.55s cubic-bezier(0.22, 0.8, 0.35, 1) both;
}

.victory-discovery-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--color-accent);
  background: var(--bg-card-dark);
  border: 1px solid var(--color-muted);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px var(--color-accent-faint);
}

.victory-discovery-footprint {
  width: 37px;
  height: 37px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 28px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 var(--color-accent-faint));
}

.victory-discovery-copy {
  min-width: 0;
}

.victory-discovery-kicker {
  margin-bottom: 4px;
  color: var(--color-accent);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.victory-discovery-copy strong,
.victory-discovery-copy span {
  display: block;
}

.victory-discovery-copy strong {
  color: var(--color-text-light);
  font-size: 0.92em;
  line-height: 1.4;
}

.victory-discovery-copy span {
  margin-top: 3px;
  color: var(--color-muted);
  font-size: 0.78em;
  line-height: 1.45;
}

.victory-discovery-action {
  min-height: 40px;
  padding: 10px 14px;
  font-size: 0.78em;
  white-space: nowrap;
}

.victory-field-notes {
  margin-top: 24px;
  padding: 18px;
  background:
    linear-gradient(145deg, var(--color-accent-faint), transparent 55%),
    var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  text-align: left;
  animation: museumDiscoveryReveal 0.55s cubic-bezier(0.22, 0.8, 0.35, 1) both;
}

.victory-field-notes-kicker {
  margin-bottom: 14px;
  color: var(--color-accent);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.victory-field-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
}

.victory-field-note {
  min-width: 0;
}

.victory-field-note--wide {
  grid-column: 1 / -1;
}

.victory-field-note-label {
  margin-bottom: 3px;
  color: var(--color-muted);
  font-size: 0.74em;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.victory-field-note strong {
  display: block;
  color: var(--color-text-light);
  font-family: var(--font-control);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.victory-field-note span {
  display: block;
  margin-top: 3px;
  color: var(--color-secondary);
  font-size: 0.84em;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .victory-field-notes-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@keyframes museumDiscoveryReveal {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.streak-celebration {
  margin-top: 24px;
  padding: 18px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}

.streak-celebration--milestone {
  padding: 22px;
  background: linear-gradient(135deg, var(--color-accent-subtle), var(--bg-panel));
  border-color: var(--color-warning);
}

.streak-title,
.streak-milestone-title {
  margin-bottom: 8px;
  color: var(--color-warning);
  line-height: 1.25;
}

.streak-title {
  font-size: 1.45em;
}

.streak-milestone-title {
  margin-bottom: 12px;
  font-size: 1.7em;
}

.streak-current {
  margin-bottom: 7px;
  color: var(--color-primary);
  font-size: 1.05em;
}

.streak-best {
  color: var(--color-secondary);
  font-size: 0.85em;
}

.victory-achievements {
  margin-top: 24px;
  padding: 18px;
  background: var(--color-success-bg);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-card);
  text-align: left;
}

.victory-achievements-kicker {
  margin-bottom: 12px;
  color: var(--color-success-text);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.victory-achievements-list {
  display: grid;
  gap: 10px;
}

.victory-achievement-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-light);
  font-weight: 600;
}

.victory-achievement-item .achievement-medal {
  width: 24px;
  height: 24px;
  color: var(--color-success);
  background: var(--color-success-bg);
}

.victory-achievement-item .achievement-medal::before {
  inset: 4px;
}

@media (max-width: 600px) {
  .login-card {
    margin: 16px auto;
    padding: 22px 16px;
  }

  .login-card .login-tab-row,
  .login-modal-box .login-tab-row {
    margin: -22px -16px 28px;
  }

  .login-tab-row .tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 54px;
    padding: 12px 8px;
    font-size: clamp(0.72rem, 3.4vw, 0.82rem);
    line-height: 1.2;
    letter-spacing: 0.7px;
    text-align: center;
    white-space: normal;
  }

  .login-form-panel {
    text-align: left;
  }

  .login-guest-action {
    margin-bottom: 0;
  }

  .victory {
    padding: 24px 14px;
  }

  .victory-discovery {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 14px;
  }

  .victory-discovery-mark {
    width: 44px;
    height: 44px;
  }

  .victory-discovery-action {
    grid-column: 1 / -1;
    width: 100%;
  }

  .achievements-panel {
    padding: 18px 14px;
  }

  .achievements-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .achievements-grid {
    grid-template-columns: 1fr;
  }

  .streak-celebration {
    padding: 16px 10px;
  }

  .streak-milestone-title {
    font-size: clamp(1.05rem, 5.5vw, 1.4rem);
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .streak-title {
    font-size: clamp(1.15rem, 6vw, 1.45rem);
    line-height: 1.25;
  }

  .victory-media-image {
    max-height: 42vh;
  }

  .victory-media-credit {
    font-size: 0.78em;
  }
}

.tier-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 3px;
  border: 1px solid currentColor;
  background: transparent;
}

.tier-indicator.filled {
  background: currentColor;
}

.difficulty-btn {
  background: linear-gradient(180deg, var(--bg-raised) 0%, var(--bg-inset) 100%);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-card);
  color: var(--color-text-light);
  transition: all 0.25s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.1),
    0 4px 12px rgba(0,0,0,0.5);
}

.difficulty-btn::after,
.difficulty-btn::before {
  display: none;
}

.difficulty-btn > div {
  position: relative;
  z-index: 1;
}

.stat {
  position: relative;
}

.stat::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, transparent, rgba(201,169,110,0.2), transparent);
  border-radius: var(--radius-sm);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--motion-standard) ease;
}

@media (hover: hover) {
  .stat:hover::after {
    animation: shimmer 2s infinite;
  }
}

.difficulty-completed {
  border-color: var(--color-success) !important;
  box-shadow: 0 0 20px rgba(90, 156, 107, 0.3) !important;
}

.difficulty-completion-mark {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: #fff;
  background: var(--color-success);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}

.difficulty-home {
  text-align: center;
}

.screen-title {
  color: var(--color-primary);
  margin: 0 0 12px;
  font-size: clamp(1.65rem, 4vw, 2.15rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: clamp(1.2px, 0.2vw, 2px);
  text-align: center;
}

.screen-subtitle {
  margin: 0 0 30px;
  color: var(--color-secondary);
  font-size: 0.92em;
  line-height: 1.55;
  letter-spacing: 1px;
  text-align: center;
}

.difficulty-home-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  color: var(--color-secondary);
  margin-bottom: 30px;
  font-size: 0.92em;
  letter-spacing: 1px;
}

.difficulty-home-countdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--color-text-dim);
  margin-top: 8px;
  padding: 8px 14px;
  background: var(--bg-panel-subtle);
  border: 1px solid var(--border-inner);
  border-radius: 999px;
  font-size: 0.85em;
  font-style: italic;
  letter-spacing: 0.6px;
}

.difficulty-home-countdown #countdown-timer {
  color: var(--color-primary);
  font-weight: 600;
}

.difficulty-home-levels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 30px 0;
}

.difficulty-home .difficulty-btn {
  position: relative;
  flex: 0 1 260px;
  padding: 30px;
  font-size: 1.2em;
}

.difficulty-level-name {
  margin-bottom: 10px;
  font-size: 1.3em;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.difficulty-level-tiers {
  margin: 8px 0;
}

.difficulty-level-description {
  color: var(--color-muted);
  font-size: 0.78em;
  font-style: italic;
}

.difficulty-home-actions-wrap {
  margin-top: 30px;
  text-align: center;
}

.difficulty-home-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.difficulty-home-about {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 10px;
  padding: 8px 12px;
  color: var(--color-muted);
  font-size: 0.85rem;
  letter-spacing: 0.7px;
  text-decoration: underline;
  text-decoration-color: var(--border-subtle);
  text-underline-offset: 4px;
  transition: color var(--motion-fast) ease, text-decoration-color 0.18s ease;
}

@media (hover: hover) {
  .difficulty-home-about:hover {
    color: var(--color-primary);
    text-decoration-color: currentColor;
  }
}

@keyframes shimmer {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes celebrate {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.game-card {
  animation: fadeInUp var(--motion-screen) var(--motion-ease);
}

.stat {
  animation: fadeInUp var(--motion-screen) var(--motion-ease);
  animation-fill-mode: both;
}

.stat:nth-child(1) { animation-delay: 0.1s; }
.stat:nth-child(2) { animation-delay: 0.2s; }
.stat:nth-child(3) { animation-delay: 0.3s; }
.stat:nth-child(4) { animation-delay: 0.4s; }
.stat:nth-child(5) { animation-delay: 0.5s; }

.difficulty-btn {
  animation: fadeInUp var(--motion-screen) var(--motion-ease);
  animation-fill-mode: both;
}

.difficulty-btn:nth-child(1) { animation-delay: 0.1s; }
.difficulty-btn:nth-child(2) { animation-delay: 0.2s; }
.difficulty-btn:nth-child(3) { animation-delay: 0.3s; }
.difficulty-btn:nth-child(4) { animation-delay: 0.4s; }
.difficulty-btn:nth-child(5) { animation-delay: 0.5s; }

@keyframes modalAppear {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.victory {
  animation: victoryAppear 0.6s ease-out;
}

@keyframes victoryAppear {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.victory h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
  font-weight: 400;
  letter-spacing: 3px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
  backdrop-filter: blur(4px);
  padding: 12px;
}

.modal-box {
  animation: modalAppear var(--motion-standard) var(--motion-ease);
  border-radius: var(--radius-lg);
  padding: 40px;
  max-width: 500px;
  width: 90%;
  position: relative;
  max-height: 85vh;
  max-height: calc(100dvh - 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-scroll-region {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 2px 4px 0;
}

.modal-title {
  font-size: 1.8em;
  color: var(--color-primary);
  margin-bottom: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.modal-message {
  color: var(--color-text-light);
  font-size: 1.05em;
  line-height: 1.8;
  margin-bottom: 30px;
  text-align: center;
}

.modal-info {
  background: var(--bg-panel);
  border-left: 3px solid var(--color-muted);
  padding: 15px 20px;
  margin: 20px 0;
  border-radius: var(--radius-sm);
}

.modal-info-item {
  color: var(--color-accent);
  font-size: 0.92em;
  margin: 8px 0;
  display: flex;
  justify-content: space-between;
}

.modal-info-label {
  color: var(--color-muted);
}

.modal-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  margin-top: 25px;
}

.modal-btn {
  padding: 14px 28px;
  font-size: 14px;
  min-width: 140px;
}

.modal-btn-primary {
  color: var(--button-primary-color);
}

.modal-btn-secondary {
  color: var(--button-secondary-color);
}

.loading {
  text-align: center;
  padding: 60px;
  color: var(--color-accent);
  font-size: 1.1em;
  font-style: italic;
  transition: all var(--motion-standard) ease;
}

.clade-info {
  margin-top: 30px;
  padding: 30px;
  background: var(--glass-surface-soft);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 14px 34px var(--glass-shadow);
  transition: all var(--motion-standard) ease;
}

.clade-info h3 {
  color: var(--color-text-warm);
  margin-bottom: 20px;
  font-size: 1.4em;
  font-weight: 400;
  font-style: normal;
  border-bottom: 2px solid var(--border-subtle);
  padding-bottom: 12px;
  transition: all var(--motion-standard) ease;
}

.clade-content {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.clade-image {
  max-width: 220px;
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-2);
}

.clade-text {
  flex: 1;
  font-size: 1em;
  line-height: 1.8;
  color: var(--color-text-light);
}

.clade-empty-copy {
  color: var(--color-secondary);
  font-style: italic;
}

.clade-link {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 24px;
  background: var(--bg-victory);
  color: var(--color-text-light);
  text-decoration: none;
  transition: all var(--motion-standard);
  font-size: 0.92em;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  border: 2px solid var(--bg-victory);
}

@media (hover: hover) {
  .clade-link:hover {
    background: var(--bg-card);
    transform: translateY(-2px);
    box-shadow: var(--elev-2);
  }
}

.game-session-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "input"
    "history"
    "toolbar"
    "tree"
    "clade";
  gap: 14px;
  margin-bottom: 20px;
}

.game-session-main,
.game-session-sidebar { display: contents; }

.input-section { grid-area: input; }
#guess-history { grid-area: history; min-width: 0; }
#tree-toolbar-host { grid-area: toolbar; min-width: 0; }
#tree-container { grid-area: tree; min-width: 0; }
.tree-frame { grid-area: tree; }
#clade-info { grid-area: clade; }

.latest-guess {
  margin-bottom: 10px;
  padding: 13px 15px;
  background: var(--glass-surface-soft);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 10px 24px var(--glass-shadow);
  border-left: 4px solid var(--tree-leaf-border);
  border-radius: 6px;
}

.latest-guess-kicker {
  margin-bottom: 5px;
  color: var(--color-muted);
  font-size: 0.78em;
  letter-spacing: 0.02em;
}

.latest-guess-main {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px 12px;
}

.latest-guess-name {
  min-width: 0;
  color: var(--color-text-light);
  font-size: 1.08em;
  font-style: italic;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.latest-guess-match {
  color: var(--color-accent);
  font-size: 0.85em;
  font-weight: 600;
}

.latest-guess-clade {
  margin-top: 6px;
  color: var(--color-text-dim);
  font-size: 0.85em;
  line-height: 1.4;
}

.guess-explain-button.latest-guess-explain {
  min-height: 40px;
  margin-top: 9px;
  padding: 7px 12px;
  color: var(--color-primary);
  background: var(--bg-panel-darker);
  border-color: var(--border-subtle);
  font-size: 0.78rem;
}

@media (hover: hover) {
  .guess-explain-button.latest-guess-explain:hover {
    color: var(--color-text-dark);
    background: var(--color-primary);
    border-color: var(--color-primary);
  }
}

.guess-history-details {
  overflow: hidden;
  background: var(--glass-surface-soft);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 10px 24px var(--glass-shadow);
  border-radius: var(--radius-card);
}

.guess-history-details > summary {
  display: flex;
  min-height: var(--control-lg);
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  color: var(--color-text-warm);
  cursor: pointer;
  list-style: none;
}

.guess-history-details > summary::-webkit-details-marker { display: none; }
.guess-history-details > summary::after {
  color: var(--color-muted);
  content: "+";
  font-size: 1.2em;
}
.guess-history-details[open] > summary::after { content: "−"; }
.guess-history-details > summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -3px;
}

.guess-history-title {
  font-size: 0.85em;
  font-weight: 600;
}

.guess-history-count {
  margin-left: auto;
  padding: 3px 8px;
  color: var(--color-text-dim);
  background: var(--bg-panel-darker);
  border: 1px solid var(--border-inner);
  border-radius: 999px;
  font-size: 0.78em;
  white-space: nowrap;
}

.guess-history-list {
  max-height: 38dvh;
  overflow: auto;
  padding: 0 11px 10px;
  overscroll-behavior: contain;
}

.guess-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 7px 0;
  padding: 9px 10px;
  background: var(--bg-panel-darker);
  border-left: 3px solid var(--tree-leaf-border);
  border-radius: var(--radius-sm);
}

.guess-item-hint {
  border-left-color: var(--color-secondary);
  opacity: 0.82;
}

.guess-name {
  min-width: 0;
  color: var(--color-text-light);
  font-size: 0.85em;
  font-style: italic;
  overflow-wrap: anywhere;
}

.guess-match {
  flex: 0 0 auto;
  color: var(--color-accent);
  font-size: 0.78em;
  font-weight: 500;
  text-align: right;
}

.guess-explain-button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 6px 10px;
  color: var(--color-muted);
  background: transparent;
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  letter-spacing: 0.2px;
}

@media (hover: hover) {
  .guess-explain-button:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
  }
}

@media (min-width: 1100px) {
  .stats.game-session-stats {
    grid-template-columns: minmax(0, 2.65fr) minmax(230px, 0.62fr);
    gap: 18px;
    align-items: stretch;
  }

  .game-session-layout {
    grid-template-columns: minmax(0, 2.65fr) minmax(230px, 0.62fr);
    grid-template-areas: "main sidebar";
    align-items: start;
    gap: 18px;
  }

  .game-session-stat-main { gap: 12px; }

  .game-session-main {
    grid-area: main;
    display: flex;
    min-width: 0;
    flex-direction: column;
  }

  .game-session-sidebar {
    position: sticky;
    top: 16px;
    grid-area: sidebar;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
    align-self: start;
  }

  .tree-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 0;
    padding: 10px 11px;
  }

  .tree-toolbar-copy { text-align: left; }
  .tree-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tree-toolbar-btn {
    width: 100%;
    min-height: 40px;
    padding-inline: 6px;
  }

  .tree-zoom-btn { min-width: 38px; min-height: var(--control-sm); }

  .latest-guess { padding: 10px 12px; }

  .guess-history-details > summary {
    min-height: 42px;
    padding: 8px 10px;
  }

  .guess-history-list {
    max-height: min(58vh, 520px);
    padding: 0 8px 8px;
  }

  .guess-item {
    margin: 6px 0;
    padding: 7px 8px;
  }

  #tree-container:not(.tree-result-active) {
    min-height: clamp(380px, 54vh, 680px);
    max-height: 78vh;
  }
}

@media (max-width: 768px) {
  .game-session-layout {
    grid-template-areas:
      "input"
      "tree"
      "clade"
      "toolbar"
      "history";
    gap: 11px;
  }
  .latest-guess { padding: 11px 12px; }
  .guess-history-list { max-height: 34dvh; }
  .guess-item { flex-wrap: wrap; }
  .guess-item .guess-match { margin-left: auto; }
  .guess-item .guess-explain-button { min-height: 40px; }
}

@media (hover: hover) {
  .difficulty-btn:hover {
    border-color: var(--color-accent);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.15),
      0 6px 18px rgba(0,0,0,0.6);
    transform: translateY(-2px);
  }
}

.difficulty-very-easy  { border-color: var(--diff-very-easy-border); }
@media (hover: hover) {
  .difficulty-very-easy:hover { border-color: var(--diff-very-easy-border-hover); background: var(--diff-very-easy-bg-hover); }
}
.difficulty-easy  { border-color: var(--diff-easy-border); }
@media (hover: hover) {
  .difficulty-easy:hover { border-color: var(--diff-easy-border-hover); background: var(--diff-easy-bg-hover); }
}
.difficulty-normal { border-color: var(--diff-normal-border); }
@media (hover: hover) {
  .difficulty-normal:hover { border-color: var(--diff-normal-border-hover); background: var(--diff-normal-bg-hover); }
}
.difficulty-hard  { border-color: var(--diff-hard-border); }
@media (hover: hover) {
  .difficulty-hard:hover { border-color: var(--diff-hard-border-hover); background: var(--diff-hard-bg-hover); }
}
.difficulty-very-hard  { border-color: var(--diff-very-hard-border); }
@media (hover: hover) {
  .difficulty-very-hard:hover { border-color: var(--diff-very-hard-border-hover); background: var(--diff-very-hard-bg-hover); }
}

@keyframes branchGrow {
  from { stroke-dashoffset: 1; opacity: 0; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes nodeAppear {
  0%   { opacity: 0; transform: scale(0.82); }
  70%  { transform: scale(1.025); }
  100% { opacity: 1; transform: scale(1); }
}

.new-node {
  transform-box: fill-box;
  transform-origin: center;
  animation: nodeAppear 0.32s cubic-bezier(0.22, 0.8, 0.35, 1) 0.12s both;
}

.new-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: branchGrow 0.72s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Let the connecting branch finish before the newly guessed genus arrives. */
.new-node.tree-guess-arrival {
  animation-delay: 0.72s;
}

@keyframes hintArrivalGlow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  45% { filter: drop-shadow(0 0 8px var(--tree-hint-border)); }
}

@keyframes victoryPathGlow {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  45% { filter: drop-shadow(0 0 7px var(--tree-target-border)); }
}

@keyframes revealTargetPulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 8px var(--tree-gaveup-border)); }
}

@keyframes statValuePulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); color: var(--color-accent); }
  100% { transform: scale(1); }
}

.tree-hint-arrival {
  animation: hintArrivalGlow 0.75s ease-out;
}

.new-node.tree-hint-arrival {
  animation: nodeAppear 0.32s cubic-bezier(0.22, 0.8, 0.35, 1) 0.12s both,
             hintArrivalGlow 0.75s ease-out 0.12s;
}

.tree-victory-path,
.tree-victory-node {
  animation: victoryPathGlow 0.9s ease-in-out 2;
}

.new-line.tree-victory-path {
  animation: branchGrow 0.72s cubic-bezier(0.4, 0, 0.2, 1) both,
             victoryPathGlow 0.9s ease-in-out 0.72s 2;
}

.new-node.tree-victory-node {
  animation: nodeAppear 0.32s cubic-bezier(0.22, 0.8, 0.35, 1) 0.12s both,
             victoryPathGlow 0.9s ease-in-out 0.44s 2;
}

.new-node.tree-victory-node.tree-guess-arrival {
  animation: nodeAppear 0.32s cubic-bezier(0.22, 0.8, 0.35, 1) 0.72s both,
             victoryPathGlow 0.9s ease-in-out 1.08s 2;
}

.tree-reveal-target {
  animation: revealTargetPulse 0.8s ease-in-out 2;
}

.stat-value-updated {
  animation: statValuePulse 0.35s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .new-node,
  .new-line,
  .tree-hint-arrival,
  .tree-victory-path,
  .tree-victory-node,
  .tree-reveal-target,
  .stat-value-updated {
    animation: none !important;
  }
}

.theme-switch {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    position: relative;
}

.theme-switch::before,
.theme-switch::after {
    display: none !important;
}

.theme-switch-track {
    display: block;
    width: 36px;
    height: 18px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-muted);
    position: relative;
    transition: border-color 0.25s ease;
}

.theme-switch-thumb {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-muted);
    position: absolute;
    top: 2.5px;
    left: 3px; 
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease;
}

body.light-mode .theme-switch-track {
    border-color: var(--color-primary);
}

body.light-mode .theme-switch-thumb {
    background-color: var(--color-primary);
    transform: translateX(17px);
}

/* ═══════════════════════════════════════════════════════════════════════
   DISCOVERY MUSEUM GALLERY
   ═══════════════════════════════════════════════════════════════════════ */
.museum-progress-container {
    background: var(--bg-panel);
    border: 2px solid var(--border-base);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 24px;
    text-align: center;
}

.museum-progress-bar {
    width: 100%;
    height: 12px;
    background: var(--bg-darkest);
    border-radius: 6px;
    margin: 12px 0;
    overflow: hidden;
    border: 1px solid var(--border-inner);
}

.museum-progress-fill {
    height: 100%;
    background: var(--color-success);
    width: 0%; /* Adjusted dynamically by JS */
    transition: width 0.5s ease-out;
}

.museum-view-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(460px, 100%);
    margin: 0 auto 24px;
    padding: 4px;
    background: var(--bg-darkest);
    border: 1px solid var(--border-inner);
    border-radius: 999px;
}

.museum-view-switch button {
    min-height: 44px;
    padding: 9px 18px;
    color: var(--color-muted);
    background: transparent;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
    cursor: pointer;
    transition: color var(--motion-fast) ease, background 0.18s ease, box-shadow 0.18s ease;
}

@media (hover: hover) {
  .museum-view-switch button:hover {
      color: var(--color-text-light);
  }
}

.museum-view-switch button.active {
    color: var(--button-primary-color);
    background: var(--color-primary);
    box-shadow: var(--elev-2);
}

.museum-view-switch button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

#museum-atlas-panel[hidden],
#museum-specimens-panel[hidden] {
    display: none;
}

.museum-clade-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    padding: 12px 15px;
    color: var(--color-secondary);
    background: var(--color-accent-subtle);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-card);
    font-size: 0.85em;
}

.museum-clade-filter[hidden] {
    display: none;
}

.museum-clade-filter strong {
    color: var(--color-text-light);
    font-style: italic;
}

.museum-clade-filter button {
    flex: 0 0 auto;
    padding: 8px 12px;
    color: var(--color-text-light);
    background: var(--bg-panel);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-control);
    font: inherit;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.museum-atlas {
    display: grid;
    gap: 22px;
}

.museum-atlas-intro {
    padding: 18px 20px;
    background: var(--bg-panel);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-card);
}

.museum-atlas-intro h3 {
    margin: 0 0 7px;
    color: var(--color-text-light);
    font-size: 1.25rem;
    font-weight: 600;
}

.museum-atlas-intro p {
    max-width: 720px;
    margin: 0;
    color: var(--color-secondary);
    font-size: 0.92em;
    line-height: 1.55;
}

.museum-atlas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.museum-atlas-card {
    --atlas-accent: var(--color-primary);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px;
    overflow: hidden;
    color: var(--color-text-light);
    background: var(--bg-panel);
    border: 1px solid var(--border-base);
    border-left: 4px solid var(--atlas-accent);
    border-radius: var(--radius-card);
    box-shadow: var(--elev-2);
    font: inherit;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    cursor: pointer;
    transition: border-color var(--motion-fast) ease, background 0.18s ease;
}

.museum-atlas-theropoda { --atlas-accent: #b86843; }
.museum-atlas-sauropodomorpha { --atlas-accent: #6f8d55; }
.museum-atlas-ornithischia { --atlas-accent: #9a784e; }

.museum-atlas-card:focus-visible {
    background: var(--bg-card);
    border-color: var(--atlas-accent);
}

@media (hover: hover) {
  .museum-atlas-card:hover {
      background: var(--bg-card);
      border-color: var(--atlas-accent);
  }
}

.museum-atlas-card:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.museum-atlas-card-title {
    display: block;
    margin: 0 0 8px;
    color: var(--color-text-light);
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3vw, 1.75rem);
    font-weight: 600;
}

.museum-atlas-card-description {
    display: block;
    min-height: 5.2em;
    color: var(--color-secondary);
    font-size: 0.85em;
    line-height: 1.55;
}

.museum-atlas-count {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 3px 8px;
}

.museum-atlas-count > strong {
    color: var(--atlas-accent);
    font-size: 1.75em;
    line-height: 1;
}

.museum-atlas-count > span {
    color: var(--color-text-light);
    font-size: 0.85em;
    font-weight: 600;
}

.museum-atlas-count > small {
    grid-column: 1 / -1;
    color: var(--color-muted);
    font-size: 0.78em;
    letter-spacing: 0;
}

.museum-atlas-progress {
    display: block;
    height: 7px;
    margin: 10px 0 14px;
    overflow: hidden;
    background: var(--bg-darkest);
    border: 1px solid var(--border-inner);
    border-radius: 999px;
}

.museum-atlas-progress > span {
    display: block;
    height: 100%;
    background: var(--atlas-accent);
    border-radius: inherit;
}

.museum-atlas-subclades-label {
    display: block;
    margin-bottom: 5px;
    color: var(--color-muted);
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0;
}

.museum-atlas-subclades {
    display: grid;
    margin-bottom: 15px;
    border-top: 1px solid var(--border-inner);
}

.museum-atlas-subclades > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    color: var(--color-secondary);
    border-bottom: 1px solid var(--border-inner);
    font-size: 0.78em;
}

.museum-atlas-subclades small {
    color: var(--color-muted);
}

.museum-atlas-achievement {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    padding: 10px;
    color: var(--color-secondary);
    background: var(--bg-panel);
    border: 1px solid var(--border-inner);
    border-radius: var(--radius-control);
    font-size: 0.78em;
}

.museum-atlas-achievement > span {
    overflow: hidden;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.museum-atlas-achievement > strong {
    color: var(--color-text-light);
}

.museum-atlas-achievement > i {
    grid-column: 1 / -1;
    height: 4px;
    overflow: hidden;
    background: var(--bg-darkest);
    border-radius: 999px;
}

.museum-atlas-achievement > i > span {
    display: block;
    height: 100%;
    background: var(--color-accent);
}

.museum-atlas-achievement.is-complete {
    color: var(--color-success-text);
    border-color: var(--color-success);
}

.museum-atlas-achievement.is-complete > i > span {
    background: var(--color-success);
}

.museum-atlas-open {
    display: block;
    margin-top: auto;
    padding-top: 14px;
    color: var(--atlas-accent);
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0;
}

.museum-atlas-note {
    margin: 0;
    padding: 12px 15px;
    color: var(--color-muted);
    background: var(--bg-panel);
    border-left: 3px solid var(--border-base);
    border-radius: var(--radius-control);
    font-size: 0.78em;
    line-height: 1.55;
}

.museum-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(170px, 220px));
    align-items: end;
    gap: 14px;
    margin-bottom: 18px;
}

.museum-toolbar-filter {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--color-secondary);
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.museum-toolbar-filter select {
    width: 100%;
    min-height: var(--control-lg);
    padding: 10px 13px;
    color: var(--color-text-light);
    background: var(--bg-input);
    border: 2px solid var(--border-base);
    border-radius: var(--radius-control);
    font: inherit;
    font-family: var(--font-control);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.museum-toolbar-filter select:focus-visible {
    border-color: var(--color-primary);
    outline: 3px solid rgba(201, 169, 110, 0.25);
    outline-offset: 2px;
}

.museum-search {
    display: grid;
    gap: 7px;
    max-width: none;
    width: 100%;
    margin: 0;
    color: var(--color-secondary);
    font-size: 0.85em;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.museum-search input {
    width: 100%;
    min-height: var(--control-lg);
    padding: 11px 15px;
    color: var(--color-text-light);
    background: var(--bg-input);
    border: 2px solid var(--border-base);
    border-radius: var(--radius-control);
    font: inherit;
    font-size: 1rem;
    font-family: var(--font-control);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    transition: border-color var(--motion-fast) ease, box-shadow 0.18s ease, background 0.18s ease;
}

.museum-search input:focus {
    border-color: var(--color-primary);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.18);
}

.museum-filter-summary {
    margin-bottom: 15px;
    color: var(--color-secondary);
    font-size: 1em;
    font-weight: 600;
    text-align: center;
}

.museum-empty-state {
    grid-column: 1 / -1;
    padding: 34px 20px;
    color: var(--color-muted);
    background: var(--bg-panel);
    border: 1px dashed var(--border-base);
    border-radius: var(--radius-card);
    text-align: center;
}

/* Responsive Grid */
.museum-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

/* Individual genus-entry cards */
.museum-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 290px;
    background: var(--bg-card);
    border: 2px solid var(--border-base);
    border-radius: var(--radius-card);
    padding: 12px;
    text-align: center;
    transition: transform var(--motion-fast), border-color 0.2s, background 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

.museum-card[hidden] {
    display: none;
}

.museum-card.difficulty-very-easy { border-top: 5px solid var(--diff-very-easy-border); }
.museum-card.difficulty-easy { border-top: 5px solid var(--diff-easy-border); }
.museum-card.difficulty-normal { border-top: 5px solid var(--diff-normal-border); }
.museum-card.difficulty-hard { border-top: 5px solid var(--diff-hard-border); }
.museum-card.difficulty-very-hard { border-top: 5px solid var(--diff-very-hard-border); }

@media (hover: hover) {
  .museum-card.unlocked:hover {
      transform: translateY(-2px);
      border-color: var(--color-accent);
  }
}

.museum-card.unlocked {
    cursor: pointer;
}

.museum-grid-pending {
    display: block;
}

.museum-grid-pending .app-state {
    min-height: 180px;
}

.museum-card.unlocked:focus-visible {
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.museum-card-art-container {
    width: 100%;
    height: 200px;
    background: var(--bg-darkest);
    border-radius: var(--radius-control);
    margin-bottom: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-inner);
    position: relative;
}

.museum-card-art {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    opacity: 0;
    transition: opacity var(--motion-standard) ease-in;
}

.museum-card-art.loaded {
    opacity: 1;
}

.museum-card-name {
    font-size: 1.1em;
    font-weight: bold;
    font-style: italic;
    color: var(--color-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.museum-card-clade {
    font-size: 0.78em;
    color: var(--color-secondary);
    letter-spacing: 0.02em;
}

.museum-card-discovery {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 0;
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px solid var(--border-inner);
    color: var(--color-muted);
    font-size: 0.65em;
    line-height: 1.3;
}

/* Locked Card Styling */
.museum-card.locked {
    opacity: 0.55;
    border-style: dashed;
}

.museum-card-lock-icon {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 34px;
    height: 27px;
    margin-top: 15px;
    color: var(--color-muted);
    border: 2px solid currentColor;
    border-radius: var(--radius-control);
    opacity: 0.84;
}

.museum-card-lock-icon::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -19px;
    width: 20px;
    height: 19px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 11px 11px 0 0;
    transform: translateX(-50%);
}

.museum-card-lock-icon::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 7px;
    width: 5px;
    height: 9px;
    background: currentColor;
    border-radius: var(--radius-sm);
    transform: translateX(-50%);
}

/* Raised cards: Museum genera and level selection share one material */
.museum-card.unlocked,
.difficulty-btn {
    background: var(--card-raised-bg);
    border-color: var(--card-raised-border);
    border-top-width: 5px;
    box-shadow: var(--card-raised-shadow);
}

.difficulty-btn {
    color: var(--card-raised-text);
}

@media (hover: hover) {
  .museum-card.unlocked:hover,
  .difficulty-btn:hover {
      background: var(--card-raised-bg-hover);
      border-color: var(--card-raised-border-hover);
      box-shadow: var(--card-raised-shadow-hover);
      transform: translateY(-4px);
  }
}

@media (hover: hover) {
  .difficulty-btn:hover {
      color: var(--card-raised-text-hover);
  }
}

.museum-card.unlocked.difficulty-very-easy, .difficulty-btn.difficulty-very-easy { border-top-color: var(--diff-very-easy-border); }
.museum-card.unlocked.difficulty-easy, .difficulty-btn.difficulty-easy { border-top-color: var(--diff-easy-border); }
.museum-card.unlocked.difficulty-normal, .difficulty-btn.difficulty-normal { border-top-color: var(--diff-normal-border); }
.museum-card.unlocked.difficulty-hard, .difficulty-btn.difficulty-hard { border-top-color: var(--diff-hard-border); }
.museum-card.unlocked.difficulty-very-hard, .difficulty-btn.difficulty-very-hard { border-top-color: var(--diff-very-hard-border); }

@media (hover: hover) {
  .museum-card.unlocked.difficulty-very-easy:hover,
  .difficulty-btn.difficulty-very-easy:hover { border-top-color: var(--diff-very-easy-border-hover); }
}
@media (hover: hover) {
  .museum-card.unlocked.difficulty-easy:hover,
  .difficulty-btn.difficulty-easy:hover { border-top-color: var(--diff-easy-border-hover); }
}
@media (hover: hover) {
  .museum-card.unlocked.difficulty-normal:hover,
  .difficulty-btn.difficulty-normal:hover { border-top-color: var(--diff-normal-border-hover); }
}
@media (hover: hover) {
  .museum-card.unlocked.difficulty-hard:hover,
  .difficulty-btn.difficulty-hard:hover { border-top-color: var(--diff-hard-border-hover); }
}
@media (hover: hover) {
  .museum-card.unlocked.difficulty-very-hard:hover,
  .difficulty-btn.difficulty-very-hard:hover { border-top-color: var(--diff-very-hard-border-hover); }
}

.museum-card.unlocked:focus-visible,
.difficulty-btn:focus-visible {
    border-color: var(--card-raised-border-hover);
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    box-shadow: var(--card-raised-shadow-hover);
}

.museum-card.unlocked .museum-card-art-container {
    background: var(--card-art-bg);
    border-color: var(--card-art-border);
    box-shadow: var(--card-art-inset);
}

body.light-mode .museum-card.unlocked .museum-card-name {
    color: #3d2f1f;
}

body.light-mode .museum-card.unlocked .museum-card-clade {
    color: #5c4033;
}

body.light-mode .museum-card.unlocked .museum-card-discovery {
    border-top-color: rgba(74, 56, 41, 0.3);
    color: #5c4033;
}

body.light-mode .difficulty-btn .tier-indicator {
    border-color: #5c4033;
}

body.light-mode .difficulty-btn .tier-indicator.filled {
    background: #5c4033;
}

/* Museum compendium */
.museum-entry-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 5, 3, 0.88);
    backdrop-filter: blur(7px);
    animation: fadeIn 0.2s ease;
}

.museum-entry-dialog {
    position: relative;
    width: min(1080px, 96vw);
    max-height: 92vh;
    overflow-y: auto;
    padding: 36px;
    color: var(--color-text-light);
    background:
        linear-gradient(135deg, var(--color-accent-faint), transparent 38%),
        linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card-dark) 100%);
    border: 2px solid var(--border-base);
    border-radius: var(--radius-md);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.78),
        inset 0 0 0 1px var(--border-inner);
}

.museum-entry-overlay.is-closing {
    animation: museumEntryFadeOut 180ms ease forwards;
}

.museum-entry-overlay.is-closing .museum-entry-dialog {
    animation: museumEntrySlideOut 180ms ease forwards;
}

@keyframes museumEntryFadeOut {
    to { opacity: 0; }
}

@keyframes museumEntrySlideOut {
    to { transform: translateY(12px) scale(0.985); }
}

@media (prefers-reduced-motion: reduce) {
    .museum-entry-overlay,
    .museum-entry-overlay.is-closing,
    .museum-entry-overlay.is-closing .museum-entry-dialog {
        animation: none;
    }
}

.museum-entry-close,
.museum-image-viewer-close {
    position: absolute;
    z-index: 2;
    top: 13px;
    right: 16px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--color-secondary);
    background: var(--bg-panel-darker);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
}

.museum-entry-close::before,
.museum-entry-close::after,
.museum-image-viewer-close::before,
.museum-image-viewer-close::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    margin: -1px 0 0 -9px;
    background: currentColor;
    border-radius: 999px;
    transform-origin: center;
}

.museum-entry-close::before,
.museum-image-viewer-close::before {
    transform: rotate(45deg);
}

.museum-entry-close::after,
.museum-image-viewer-close::after {
    transform: rotate(-45deg);
}

@media (hover: hover) {
  .museum-entry-close:hover,
  .museum-image-viewer-close:hover {
      color: var(--color-text-light);
      border-color: var(--color-accent);
  }
}

.image-lightbox .image-lightbox-close,
.museum-image-viewer .museum-image-viewer-close {
    color: #fff;
    background: rgba(22, 18, 14, 0.42);
    border-color: var(--border-subtle);
    -webkit-backdrop-filter: blur(5px) saturate(120%);
    backdrop-filter: blur(5px) saturate(120%);
    box-shadow: var(--elev-3);
}

.museum-entry-loading {
    padding: 80px 20px;
    text-align: center;
    color: var(--color-secondary);
    font-style: italic;
}

.museum-entry-header {
    position: relative;
    margin: 0 0 22px;
    padding: 15px 18px 17px;
    background: var(--bg-panel-subtle);
    border: 1px solid var(--border-inner);
    border-radius: var(--radius-control);
    text-align: center;
    border-bottom: 1px solid var(--border-subtle);
}

.museum-entry-kicker {
    margin-bottom: 7px;
    color: var(--color-muted);
    font-size: 0.78em;
    letter-spacing: 0.02em;
}

.museum-entry-header h2 {
    margin: 0 0 5px;
    color: var(--color-primary);
    font-size: clamp(1.65rem, 5vw, 3.25rem);
    line-height: 1.2;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 1px;
}

.museum-entry-first-discovery {
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 0.78em;
    letter-spacing: 0.5px;
}

.museum-entry-meta {
    color: var(--color-secondary);
    font-size: 0.78em;
    letter-spacing: 0.02em;
}

.museum-entry-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(300px, 1.05fr) minmax(320px, 0.95fr);
    gap: 28px;
    align-items: start;
}

.museum-entry-figure {
    margin: 0;
}

.museum-entry-image-button {
    width: 100%;
    padding: 12px;
    background:
        repeating-linear-gradient(0deg, transparent 0 18px, rgba(201, 169, 110, 0.025) 18px 19px),
        var(--bg-darkest);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.5);
    text-transform: none;
    letter-spacing: normal;
}

.museum-entry-image-button::before {
    display: none;
}

@media (hover: hover) {
  .museum-entry-image-button:not(:disabled):hover {
      border-color: var(--color-accent);
  }
}

.museum-entry-image-button img {
    display: block;
    width: 100%;
    height: min(58vh, 600px);
    object-fit: contain;
}

.museum-entry-image-button span {
    display: block;
    margin-top: 8px;
    color: var(--color-muted);
    font-size: 12px;
    letter-spacing: 0.02em;
}

.museum-entry-figure figcaption {
    margin-top: 7px;
    color: var(--color-muted);
    font-size: 0.78em;
    line-height: 1.5;
    text-align: center;
}

.museum-entry-figure figcaption a,
.museum-image-viewer-caption a {
    color: var(--color-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-subtle);
}

.museum-entry-media-note {
    display: block;
    margin-top: 7px;
    padding: 7px 9px;
    color: var(--color-secondary);
    background: var(--bg-panel-darker);
    border-left: 2px solid var(--border-subtle);
    font-size: 0.92em;
    font-style: italic;
    text-align: left;
}

.museum-entry-copy {
    padding: 4px 4px 10px;
}

.museum-entry-ornament {
    margin-bottom: 17px;
    color: var(--color-muted);
    text-align: center;
    letter-spacing: 8px;
}

.museum-entry-description {
    color: var(--color-text-light);
    font-size: 1.02em;
    line-height: 1.85;
    text-align: left;
}

.museum-entry-section-loading {
    padding: 18px;
    color: var(--color-muted);
    background: var(--bg-panel-subtle);
    border: 1px solid var(--border-inner);
    border-radius: var(--radius-control);
    font-size: 0.85rem;
    font-style: italic;
    text-align: center;
}

.museum-entry-read-more-slot:empty {
    display: none;
}

.museum-entry-paleodata {
    margin-top: 26px;
}

.museum-entry-paleo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.museum-entry-paleo-card {
    min-width: 0;
    padding: 16px;
    background:
        linear-gradient(145deg, var(--color-accent-faint), transparent 55%),
        var(--bg-panel);
    border: 1px solid var(--border-inner);
    border-radius: var(--radius-sm);
}

.museum-entry-paleo-label {
    margin-bottom: 8px;
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.museum-entry-paleo-card > strong {
    display: block;
    color: var(--color-primary);
    font-family: var(--font-control);
    font-size: 1em;
    font-weight: 600;
    line-height: 1.35;
}

.museum-entry-paleo-card > span {
    display: block;
    margin-top: 4px;
    color: var(--color-secondary);
    font-size: 0.78em;
    line-height: 1.45;
}

.museum-time-scale {
    margin-top: 15px;
}

.museum-time-periods,
.museum-time-track {
    display: grid;
    grid-template-columns: 27.16fr 31.36fr 41.48fr;
}

.museum-time-periods span {
    padding-bottom: 5px;
    color: var(--color-muted);
    font-size: 0.78rem;
    letter-spacing: 0.2px;
    text-align: center;
}

.museum-time-track {
    position: relative;
    height: 13px;
    overflow: visible;
    background: var(--bg-darkest);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.museum-time-segment {
    opacity: 0.42;
}

.museum-time-segment.triassic {
    background: #8f5d66;
    border-radius: 7px 0 0 7px;
}

.museum-time-segment.jurassic {
    background: #6f8c68;
}

.museum-time-segment.cretaceous {
    background: #aa8a55;
    border-radius: 0 7px 7px 0;
}

.museum-time-range {
    position: absolute;
    z-index: 1;
    top: -4px;
    height: 19px;
    min-width: 7px;
    background: var(--color-primary);
    border: 2px solid var(--color-text-light);
    border-radius: var(--radius-md);
    box-shadow: 0 0 9px var(--color-accent-faint);
}

.museum-time-ages {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    color: var(--color-muted);
    font-size: 0.78rem;
}

.museum-paleo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 11px;
}

.museum-paleo-chips span {
    padding: 4px 7px;
    color: var(--color-secondary);
    background: var(--bg-panel-darker);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    letter-spacing: 0.4px;
}

.museum-paleo-formations {
    margin-top: 12px;
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.museum-paleo-formations b {
    display: block;
    margin-bottom: 2px;
    color: var(--color-secondary);
    font-size: 0.92em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.museum-entry-paleo-note {
    margin: 9px 3px 0;
    color: var(--color-muted);
    font-size: 0.78em;
    font-style: italic;
    line-height: 1.45;
}

.museum-entry-paleo-scope {
    margin: 10px 3px 0;
    padding: 9px 11px;
    color: var(--color-secondary);
    background: var(--bg-panel-darker);
    border-left: 2px solid var(--border-subtle);
    font-size: 0.78em;
    line-height: 1.5;
}

.museum-entry-paleo-scope strong {
    color: var(--color-primary);
    font-weight: 600;
}

.museum-entry-paleo-sources {
    margin: 11px 3px 0;
    color: var(--color-muted);
    font-size: 0.78em;
    line-height: 1.55;
}

.museum-entry-paleo-sources > strong {
    display: block;
    margin-bottom: 4px;
    color: var(--color-secondary);
    font-size: 0.92em;
    letter-spacing: 0.02em;
}

.museum-entry-paleo-sources div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.museum-entry-paleo-sources a,
.museum-entry-paleo-sources span {
    color: var(--color-muted);
}

.museum-entry-paleo-sources a {
    text-decoration: none;
    border-bottom: 1px solid var(--border-subtle);
}

@media (hover: hover) {
  .museum-entry-paleo-sources a:hover {
      color: var(--color-primary);
      border-color: var(--color-accent);
  }
}

.museum-entry-paleo-sources b {
    color: var(--border-subtle);
    font-weight: normal;
}

.museum-entry-copy h3 {
    margin: 28px 0 13px;
    padding-bottom: 8px;
    color: var(--color-primary);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.92em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.museum-entry-lineage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.museum-entry-lineage span {
    padding: 5px 8px;
    color: var(--color-secondary);
    background: var(--bg-panel);
    border: 1px solid var(--border-inner);
    border-radius: var(--radius-sm);
    font-size: 0.78em;
}

.museum-entry-lineage b {
    color: var(--color-muted);
    font-weight: normal;
}

.museum-entry-read-more {
    display: inline-flex;
    margin-top: 28px;
    padding: 11px 18px;
    color: var(--color-text-light);
    background: var(--bg-panel-strong);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: 0.78em;
    letter-spacing: 0.02em;
    text-decoration: none;
}

@media (hover: hover) {
  .museum-entry-read-more:hover {
      color: var(--color-primary);
      border-color: var(--color-accent);
  }
}

.museum-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 30000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(0, 0, 0, 0.96);
    overflow-y: auto;
}

.museum-image-viewer img {
    display: block;
    max-width: 94vw;
    max-height: 82vh;
    object-fit: contain;
}

.museum-image-viewer-caption {
    max-width: min(1000px, 92vw);
    margin-top: 14px;
    color: var(--color-secondary);
    font-size: 0.85em;
    line-height: 1.6;
    text-align: center;
}

.museum-image-viewer-caption em {
    display: block;
    margin-bottom: 5px;
    color: var(--color-primary);
    font-size: 1.35em;
}

.museum-image-viewer-taxonomy {
    color: var(--color-secondary);
    font-size: 0.85em;
    letter-spacing: 0.02em;
}

.museum-image-viewer-discovery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 12px;
    margin-top: 6px;
    color: var(--color-muted);
    font-size: 0.78em;
}

.museum-image-viewer-credit {
    margin-top: 10px;
}

body.light-mode .museum-entry-overlay {
    background: rgba(45, 35, 24, 0.74);
}

body.light-mode .museum-entry-read-more {
    background: var(--bg-darkest);
    border-color: var(--border-subtle);
    box-shadow: 0 2px 8px rgba(74, 56, 41, 0.14);
}

body.light-mode .museum-time-range {
    border-color: #fff8e8;
    box-shadow: 0 0 8px rgba(92, 64, 51, 0.22);
}

@media (max-width: 780px) {
    .museum-entry-overlay {
        align-items: flex-start;
        padding: 10px;
    }

    .museum-entry-dialog {
        width: 100%;
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        /* Reserve a separate close-control row above the genus heading. */
        padding: 68px 18px 28px;
    }

    .museum-entry-close {
        top: 14px;
        right: 18px;
    }

    .museum-entry-header {
        margin: 0 0 20px;
        padding: 14px 12px 16px;
    }

    .museum-entry-header h2 {
        overflow-wrap: anywhere;
    }

    .museum-entry-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .museum-entry-image-button img {
        height: min(48vh, 460px);
    }

    .museum-entry-description {
        font-size: 0.96em;
        line-height: 1.7;
    }

    .museum-entry-paleo-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .museum-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Forces 2 columns on phones */
        gap: 10px !important;
    }

    .museum-card-art-container {
        height: 180px;
    }

    .museum-card-name {
        white-space: normal;
        overflow-wrap: anywhere;
        hyphens: auto;
        line-height: 1.2;
    }
}

@media (max-width: 380px) {
    .museum-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 900px) {
    .museum-atlas-grid {
        grid-template-columns: 1fr;
    }

    .museum-atlas-card-description {
        min-height: 0;
    }

    }

@media (max-width: 600px) {
    .museum-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .museum-search {
        grid-column: 1 / -1;
    }

    .museum-atlas-intro {
        grid-template-columns: 1fr;
        padding: 17px;
    }

    .museum-atlas-root {
        display: none;
    }

    .museum-atlas-card {
        padding: 17px;
    }

    .museum-clade-filter {
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }

    .museum-clade-filter button {
        width: 100%;
    }

    }

@media (max-width: 380px) {
    .museum-toolbar {
        grid-template-columns: 1fr;
    }

    .museum-search {
        grid-column: auto;
    }
}

/* Small-screen usability refinements */
@media (max-width: 600px) {
    body {
        padding-top: calc(10px + env(safe-area-inset-top, 0px));
        padding-right: calc(8px + env(safe-area-inset-right, 0px));
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        padding-left: calc(8px + env(safe-area-inset-left, 0px));
    }

    .site-header {
        margin-bottom: 16px;
        padding: 64px 14px 18px;
    }

    .site-header-layout {
        gap: 10px;
    }

    .subtitle {
        max-width: 310px;
        margin: 0 auto;
        font-size: 0.96em;
        line-height: 1.45;
        letter-spacing: 2.2px;
    }

    .site-header-utility {
        gap: 2px;
    }

    .header-theme-row {
        position: absolute;
        top: 12px;
        right: 12px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        width: auto;
        min-height: 0;
    }

    .header-theme-switch {
        order: 2;
    }

    .language-picker {
        order: 1;
    }

    .language-picker select {
        min-width: 68px;
        min-height: 34px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .game-card {
        padding: 18px;
    }

    .game-card.difficulty-home {
        padding: 22px 14px;
    }

    .screen-title {
        margin-bottom: 8px;
    }

    .difficulty-home-date {
        margin-bottom: 12px;
        font-size: 0.85em;
        line-height: 1.45;
    }

    .difficulty-home-countdown {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        margin: 0;
        padding: 7px 11px;
        color: var(--color-muted);
        background: var(--bg-panel-subtle);
        border: 1px solid var(--border-inner);
        border-radius: 999px;
        font-size: 0.78em;
        letter-spacing: 0.4px;
    }

    .difficulty-home-countdown #countdown-timer {
        color: var(--color-primary);
    }

    .difficulty-home-levels {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin: 22px 0;
    }

    .difficulty-home .difficulty-btn {
        width: 100%;
        min-height: 94px;
        padding: 18px 16px;
        font-size: 1em;
    }

    .difficulty-home .difficulty-level-name {
        margin-bottom: 6px;
        font-size: 1.28em;
        letter-spacing: 0.03em;
    }

    .difficulty-home .difficulty-level-tiers {
        margin: 4px 0 0;
    }

    .difficulty-home .difficulty-completion-mark {
        top: 8px;
        right: 8px;
        width: 22px;
        height: 22px;
        font-size: 13px;
    }

    .difficulty-home-actions-wrap {
        margin-top: 22px;
    }

    .difficulty-home-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .difficulty-home-actions .btn-menu-action {
        width: 100%;
        min-width: 0;
        min-height: 50px;
        padding: 12px 8px;
        font-size: clamp(0.72rem, 3.2vw, 0.84rem);
        letter-spacing: 0.03em;
    }

    .difficulty-home-actions .btn-friends {
        grid-column: 1 / -1;
    }

    .difficulty-home-about {
        margin-top: 8px;
    }

    #main-container:has(.difficulty-home) > .site-header {
        margin-bottom: 14px;
        padding: 64px 12px 15px;
    }

    .game-card.difficulty-home {
        padding: 18px 12px;
        box-shadow: var(--elev-3);
    }

    .difficulty-home .screen-title {
        margin-bottom: 6px;
        font-size: clamp(1.5rem, 7.2vw, 1.85rem);
        letter-spacing: 1px;
    }

    .difficulty-home .difficulty-home-date {
        margin-bottom: 8px;
        font-size: 0.85em;
        letter-spacing: 0.5px;
    }

    .difficulty-home .difficulty-home-countdown {
        gap: 4px;
        padding: 6px 9px;
        font-size: 0.78em;
    }

    .difficulty-home .difficulty-home-levels {
        gap: 10px;
        margin: 16px 0;
    }

    .difficulty-home .difficulty-btn {
        min-height: 72px;
        padding: 12px 14px;
    }

    .difficulty-home .difficulty-level-name {
        margin-bottom: 3px;
        font-size: 1.08em;
        letter-spacing: 0.03em;
    }

    .difficulty-home .difficulty-level-tiers {
        margin: 2px 0 0;
    }

    .difficulty-home .difficulty-home-actions-wrap {
        margin-top: 16px;
    }

    .difficulty-home .difficulty-home-actions {
        gap: 8px;
    }

    .difficulty-home .difficulty-home-actions .btn-menu-action {
        min-height: 44px;
        padding: 10px 7px;
        font-size: clamp(0.75rem, 3vw, 0.8rem);
        letter-spacing: 0.5px;
    }

    .difficulty-home .difficulty-home-about {
        min-height: 40px;
        margin-top: 4px;
    }

    #header-controls {
        justify-content: center;
        margin-top: 2px;
    }

    #header-controls button:not(.theme-switch),
    .guess-secondary-row button {
        min-height: 44px;
    }

    #header-controls .btn-account {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .stat-label {
        font-size: clamp(0.75rem, 3vw, 0.78rem) !important;
        letter-spacing: 0.6px !important;
    }

    .game-session-stats {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 0;
    }

    .game-session-stat-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .game-session-stats .stat {
        padding: 9px 6px !important;
    }

    .game-session-stats .stat-value {
        font-size: 1.3em !important;
        line-height: 1.1;
    }

    .game-session-stats .stat-label {
        margin-top: 4px;
        font-size: 0.75rem !important;
        letter-spacing: 0.45px !important;
    }

    #tree-container {
        padding: 12px;
        max-height: 65vh;
        max-height: 65dvh;
    }

    #tree-container.tree-result-active.tree-review-active {
        padding: 12px;
        max-height: 65vh;
        max-height: 65dvh;
    }

        .guess-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        overflow-wrap: anywhere;
    }

    .guess-match {
        align-self: flex-end;
        text-align: right;
    }

    .guess-explain-button {
        min-height: 40px;
        align-self: flex-start;
    }

    .modal-box {
        width: 100%;
        max-height: calc(100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        padding: 22px 16px 16px;
        border-radius: var(--radius-md);
    }

    .modal-overlay {
        padding-top: calc(24px + env(safe-area-inset-top, 0px));
        padding-right: calc(16px + env(safe-area-inset-right, 0px));
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        padding-left: calc(16px + env(safe-area-inset-left, 0px));
    }

    .modal-scroll-region {
        padding: 2px 5px 0;
    }

    .modal-title {
        font-size: clamp(1.25rem, 7vw, 1.65rem);
        letter-spacing: 1.5px;
        overflow-wrap: anywhere;
    }

    .modal-message {
        font-size: 1em;
        line-height: 1.6;
    }

    .modal-info-item {
        flex-wrap: wrap;
        gap: 4px 12px;
    }

    .modal-buttons {
        flex-direction: column;
        width: 100%;
        flex: 0 0 auto;
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--glass-edge);
        background: transparent;
    }

    .modal-btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 420px) {
    .site-header {
        padding: 64px 10px 16px;
    }

    .game-card {
        padding: 14px;
    }

    .game-card:not(.difficulty-home) .difficulty-btn {
        flex-basis: 100% !important;
        padding: 22px 16px !important;
    }

    .museum-entry-dialog {
        padding: 68px 12px 24px;
    }

    .museum-entry-close {
        right: 12px;
    }

    .museum-entry-header {
        margin: 0 0 22px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   LIGHT MODE - STATISTICS CATALOG CARDS
   Quiet paper-like records instead of glossy raised controls.
   ═══════════════════════════════════════════════════════════════════════ */
body.light-mode .stat {
    background: linear-gradient(
        180deg,
        rgba(255, 253, 248, 0.88) 0%,
        rgba(245, 238, 226, 0.78) 100%
    );
    border-color: rgba(139, 94, 60, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 -2px 5px rgba(90, 62, 38, 0.06),
        0 3px 10px rgba(74, 56, 41, 0.10);
}

body.light-mode .stat::before {
    top: 1px;
    left: 1px;
    right: 1px;
    height: 42%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.32) 0%,
        transparent 100%
    );
    border-radius: 2px 2px 0 0;
}

body.light-mode .stat::after {
    display: none;
}

@media (hover: hover) {
  body.light-mode .stat:hover {
      border-color: rgba(90, 62, 38, 0.42);
      box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.90),
          inset 0 -2px 5px rgba(90, 62, 38, 0.07),
          0 5px 13px rgba(74, 56, 41, 0.13);
      transform: translateY(-1px);
  }
}

body.light-mode .game-session-stats .stat {
    background: linear-gradient(145deg, var(--glass-surface), var(--glass-surface-soft));
    border-color: var(--glass-border);
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 4px 12px var(--glass-shadow);
}

body.light-mode .game-session-stats .stat::before {
    display: block;
    background: linear-gradient(180deg, var(--glass-highlight), transparent);
}

@media (hover: hover) {
  body.light-mode .game-session-stats .stat:hover {
      background: linear-gradient(145deg, var(--glass-surface), var(--glass-surface));
      border-color: var(--color-accent);
      box-shadow: inset 0 1px 0 var(--glass-highlight), 0 7px 18px var(--glass-shadow);
      transform: none;
  }
}

body.light-mode .stat-value {
    color: #4a3829;
    text-shadow: none;
}

body.light-mode .stat-label {
    color: #6b5340;
    text-shadow: none;
}

@media (hover: none), (pointer: coarse) {
    .game-session-stats .stat,
    .game-session-stats .stat:hover,
    .game-session-stats .stat:active,
    body.light-mode .game-session-stats .stat:hover,
    body.light-mode .game-session-stats .stat:active {
        background: linear-gradient(145deg, var(--glass-surface), var(--glass-surface-soft));
        border-color: var(--glass-border);
        box-shadow: inset 0 1px 0 var(--glass-highlight), 0 4px 12px var(--glass-shadow);
        transform: none;
        transition: none;
        cursor: default;
    }

    .game-session-stats .stat:hover::after {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   FRIEND CHALLENGES
   ═══════════════════════════════════════════════════════════════════════ */
.friends-hub {
    max-width: 980px;
    margin-inline: auto;
}

.friends-heading {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: center;
}

.friends-heading h2 {
    margin: 4px 0 12px;
}

.friends-heading p,
.friends-note {
    color: var(--color-secondary);
    line-height: 1.7;
}

.friends-kicker {
    color: var(--color-muted);
    font-size: 0.78em;
    letter-spacing: 0.02em;
}

.friends-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.friend-panel {
    padding: 26px;
    background: var(--bg-panel);
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-md);
    text-align: left;
}

.friend-panel h3 {
    margin-bottom: 22px;
    color: var(--color-text-warm);
    font-size: 1.25em;
    font-weight: 500;
    text-align: center;
}

.friend-label {
    display: block;
    margin: 16px 0 7px;
    color: var(--color-muted);
    font-size: 0.78em;
    letter-spacing: 0.02em;
}

.friend-input {
    width: 100%;
    min-height: var(--control-lg);
    padding: 12px 14px;
    color: var(--color-text-light);
    background: var(--bg-input);
    border: 2px solid var(--border-inner);
    border-radius: var(--radius-sm);
    font: 16px var(--font-control);
    outline: none;
}

.friend-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.challenge-code-input {
    text-align: center;
    font-size: 1.45em;
    font-weight: 600;
    letter-spacing: 7px;
    text-transform: uppercase;
}

.friend-action {
    width: 100%;
    margin-top: 24px;
}

.friends-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-muted);
    font-style: italic;
}

.friends-divider::before,
.friends-divider::after {
    content: '';
    width: 1px;
    height: 36%;
    background: var(--border-subtle);
}

.friends-divider span {
    margin: 12px 0;
    writing-mode: vertical-rl;
}

.friends-note {
    margin-top: 26px;
    font-size: 0.85em;
    font-style: italic;
    text-align: center;
}

.challenge-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 15px 18px;
    background: var(--bg-panel-strong);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
    flex-wrap: wrap;
}

.challenge-banner > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.challenge-banner span {
    color: var(--color-muted);
    font-size: 0.78em;
    letter-spacing: 0.02em;
}

.challenge-banner strong,
.challenge-code-inline {
    color: var(--color-primary);
    font-size: 1.45em;
    letter-spacing: 5px;
}

.challenge-banner-actions {
    display: flex;
    gap: 8px;
}

.challenge-race-progress {
    flex: 1 0 100%;
    padding-top: 10px;
    color: var(--color-muted);
    border-top: 1px solid var(--border-inner);
    font-size: 0.78em;
    letter-spacing: 0.02em;
    text-align: center;
}

.challenge-result-note {
    margin-bottom: 20px;
    padding: 14px;
    color: var(--color-accent);
    background: var(--bg-panel);
    border: 2px solid var(--color-muted);
    border-radius: 6px;
    font-size: 0.92em;
    letter-spacing: 0.8px;
}

.race-placement-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 480px;
    margin: 20px auto;
    padding: 16px 20px;
    color: var(--color-secondary);
    background: var(--bg-panel-strong);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
    line-height: 1.45;
    text-align: left;
}

.race-placement-card strong {
    color: var(--color-primary);
    font-size: 2.3em;
    font-weight: 600;
    line-height: 1;
}

.race-placement-card span {
    max-width: 320px;
}

.standings-list {
    display: grid;
    gap: 8px;
    text-align: left;
}

.standing-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    background: var(--bg-panel-darker);
    border: 1px solid var(--border-inner);
    border-radius: var(--radius-sm);
}

.standing-row.is-you {
    border-color: var(--color-accent);
}

.standing-rank {
    color: var(--color-primary);
    text-align: center;
}

.standing-name {
    color: var(--color-text-light);
    overflow-wrap: anywhere;
}

.standing-result {
    color: var(--color-secondary);
    font-size: 0.85em;
    text-align: right;
}

.standings-lock {
    margin-top: 15px;
    color: var(--color-muted);
    font-size: 0.78em;
    font-style: italic;
    line-height: 1.5;
}

@media (max-width: 720px) {
    .friends-grid {
        grid-template-columns: 1fr;
    }

    .friends-divider {
        gap: 12px;
    }

    .friends-divider::before,
    .friends-divider::after {
        width: 32%;
        height: 1px;
    }

    .friends-divider span {
        margin: 0;
        writing-mode: horizontal-tb;
    }

    .challenge-banner {
        align-items: stretch;
        flex-direction: column;
    }

    .challenge-banner > div:first-child {
        justify-content: center;
    }

    .challenge-banner-actions button {
        flex: 1;
        min-height: 44px;
    }

    .race-placement-card {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .friend-panel {
        padding: 20px 15px;
    }

    .challenge-code-input {
        font-size: 1.25em;
        letter-spacing: 5px;
    }

    .challenge-banner > div:first-child {
        align-items: center;
        flex-direction: column;
        gap: 4px;
    }

    .standing-row {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .standing-result {
        grid-column: 2;
        text-align: left;
    }
}

/* Private analytics dashboard */
.analytics-dashboard {
    max-width: 1280px;
    margin-inline: auto;
}

.analytics-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
}

.analytics-header h2 {
    margin: 5px 0 8px;
    color: var(--color-primary);
    font-size: clamp(1.8rem, 5vw, 2.7rem);
}

.analytics-header p {
    max-width: 700px;
    color: var(--color-secondary);
    line-height: 1.6;
}

.analytics-range {
    display: flex;
    gap: 6px;
}

.analytics-range button.active {
    color: var(--button-primary-color);
    background: var(--button-primary-bg);
    border-color: var(--button-primary-border);
    box-shadow: var(--button-shadow);
}

.analytics-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.analytics-metric {
    min-height: 125px;
    padding: 18px 14px;
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    text-align: center;
}

.analytics-metric-value {
    color: var(--color-primary);
    font-size: 2em;
}

.analytics-metric-label {
    margin-top: 7px;
    color: var(--color-text-light);
    font-size: 0.78em;
    letter-spacing: 0.02em;
}

.analytics-metric-detail {
    margin-top: 6px;
    color: var(--color-muted);
    font-size: 0.78em;
    line-height: 1.35;
}

.analytics-section {
    margin-top: 20px;
    padding: 20px;
    background: var(--bg-panel-subtle);
    border: 1px solid var(--border-inner);
    border-radius: var(--radius-sm);
}

.analytics-section h3 {
    margin-bottom: 18px;
    color: var(--color-text-warm);
    font-size: 0.92em;
    letter-spacing: 0.02em;
}

.analytics-chart {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 230px;
    padding-top: 24px;
    overflow-x: auto;
}

.analytics-chart-column {
    display: grid;
    grid-template-rows: 20px minmax(0, 1fr) 40px;
    align-items: end;
    flex: 1 0 32px;
    min-width: 32px;
    height: 100%;
    text-align: center;
}

.analytics-chart-value {
    color: var(--color-muted);
    font-size: 0.78rem;
}

.analytics-chart-bar {
    width: 100%;
    min-height: 3px;
    background: linear-gradient(180deg, var(--color-primary), var(--color-muted));
    border-radius: 3px 3px 0 0;
}

.analytics-chart-date {
    padding-top: 7px;
    color: var(--color-muted);
    font-size: 0.78rem;
    white-space: nowrap;
    transform: rotate(-45deg);
}

.analytics-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.analytics-breakdown,
.analytics-activity,
.analytics-players {
    display: grid;
    gap: 7px;
}

.analytics-breakdown-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 55px 110px;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    background: var(--bg-panel);
    border-radius: var(--radius-sm);
    color: var(--color-secondary);
    font-size: 0.85em;
}

.analytics-breakdown-row strong {
    color: var(--color-primary);
    text-align: center;
}

.analytics-activity-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-inner);
}

.analytics-activity-row > span {
    color: var(--color-muted);
}

.analytics-activity-row strong {
    display: block;
    color: var(--color-text-light);
    font-size: 0.85em;
}

.analytics-activity-row small,
.analytics-activity-row time,
.analytics-generated {
    color: var(--color-muted);
    font-size: 0.78rem;
}

.analytics-activity-row small {
    display: block;
    margin-top: 3px;
}

.analytics-player-row {
    display: grid;
    grid-template-columns: 34px minmax(130px, 0.8fr) minmax(190px, 1.35fr) minmax(145px, 0.8fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    color: var(--color-secondary);
    background: var(--bg-panel);
    border-radius: var(--radius-sm);
    font-size: 0.78em;
}

.analytics-player-rank {
    color: var(--color-muted);
    text-align: center;
}

.analytics-player-row strong {
    overflow: hidden;
    color: var(--color-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-player-row time,
.analytics-section-note,
.analytics-data-warning {
    color: var(--color-muted);
    font-size: 0.78rem;
}

.analytics-section-note {
    margin-top: 12px;
    font-style: italic;
}

.analytics-data-warning {
    margin-top: 18px;
    padding: 10px 12px;
    color: var(--color-warning);
    background: var(--bg-panel-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.analytics-generated {
    margin-top: 22px;
    text-align: right;
    font-style: italic;
}

@media (max-width: 720px) {
    .analytics-header {
        align-items: stretch;
        flex-direction: column;
    }

    .analytics-range button {
        flex: 1;
        min-height: 44px;
    }

    .analytics-two-column {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .analytics-breakdown-row {
        grid-template-columns: minmax(0, 1fr) 42px 92px;
    }

    .analytics-activity-row {
        grid-template-columns: 20px minmax(0, 1fr);
    }

    .analytics-activity-row time {
        grid-column: 2;
    }

    .analytics-player-row {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .analytics-player-row > span:not(.analytics-player-rank),
    .analytics-player-row time {
        grid-column: 2;
    }
}

@media (max-width: 720px) {
  .tree-toolbar {
    align-items: stretch;
    flex-direction: column;
    gap: 9px;
  }

  .tree-toolbar-copy {
    text-align: center;
  }

  .tree-toolbar-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tree-toolbar-btn {
    width: 100%;
    min-height: 42px;
    padding-inline: 6px;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   SHAREABLE RESULT
   ══════════════════════════════════════════════════════════════════════ */
.share-result-intro {
  margin-bottom: 12px;
  color: var(--color-muted);
  font-size: 0.85em;
  line-height: 1.5;
}

.share-result-preview {
  margin: 0;
  padding: 18px;
  overflow-x: auto;
  color: var(--color-text-light);
  background: var(--bg-darkest);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font: 0.82em/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.share-result-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 12px;
  margin-top: 12px;
  color: var(--color-muted);
  font-size: 0.78em;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   FIRST-RUN INTERACTIVE TUTORIAL
   ══════════════════════════════════════════════════════════════════════ */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 40000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(8, 5, 3, 0.9);
  backdrop-filter: blur(7px);
  animation: fadeIn 0.2s ease;
}

.tutorial-fake-input {
  padding: 13px 16px;
  color: var(--color-text-light);
  background: var(--bg-darkest);
  border: 2px solid var(--border-inner);
  border-radius: var(--radius-sm);
  font-family: var(--font-control);
  text-align: left;
}

.tutorial-levels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(460px, 100%);
  gap: 8px;
}

.tutorial-levels > span {
  display: grid;
  place-items: center;
  min-height: 70px;
  color: var(--color-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 1.2em;
}

.tutorial-levels small {
  color: var(--color-success);
  font-size: 0.78rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  letter-spacing: 0.3px;
}

@media (max-width: 600px) {
  .tutorial-overlay {
    align-items: start;
    padding: 8px;
  }

              .tutorial-levels {
    gap: 4px;
  }

  .tutorial-levels > span {
    min-height: 58px;
  }

    }
.info-page a {
    color: var(--color-accent);
    text-decoration-color: var(--border-subtle);
    text-underline-offset: 4px;
}

@media (hover: hover) {
  .info-page a:hover {
      color: var(--color-primary);
      text-decoration-color: currentColor;
  }
}

.info-shell {
    width: min(940px, 100%);
    margin: 0 auto;
}

.info-header {
    margin-bottom: 40px;
    padding: 40px 30px;
    background: linear-gradient(180deg, var(--bg-deep) 0%, var(--bg-deeper) 100%);
    border: 2px solid var(--border-base);
    border-radius: var(--radius-sm);
    box-shadow: var(--elev-2);
    text-align: center;
}

.info-header h1 {
    margin-bottom: 10px;
    color: var(--color-primary);
    font-size: 3.5em;
    font-weight: 900;
    letter-spacing: normal;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

.info-header p {
    color: var(--color-secondary);
    font-size: 1.1em;
    font-style: italic;
    letter-spacing: 3px;
}

.about-screen {
    max-width: 900px;
    margin-inline: auto;
}

.about-screen-body {
    color: var(--color-text-light);
    font-size: 1.02em;
    line-height: 1.85;
    text-align: left;
}

.info-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 22px 0 30px;
    flex-wrap: wrap;
}

.info-nav a {
    padding: 10px 18px;
    color: var(--color-secondary);
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    text-decoration: none;
}

.info-nav a:first-child {
    color: var(--btn-guess-color);
    background: var(--color-accent);
    border-color: var(--color-muted);
    font-weight: 700;
}

.info-page {
    padding: clamp(26px, 6vw, 54px);
    color: var(--color-text-light);
    background: linear-gradient(180deg, var(--bg-card), var(--bg-card-dark));
    border: 2px solid var(--border-base);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.36), inset 0 0 0 1px var(--border-inner);
    line-height: 1.8;
}

.info-page h2,
.about-screen-body h2 {
    margin: 42px 0 18px;
    padding-bottom: 10px;
    color: var(--color-accent);
    border-bottom: 1px solid var(--border-subtle);
    font-size: clamp(1.35rem, 4vw, 1.8rem);
    font-weight: 600;
}

.info-page h2:first-child {
    margin-top: 0;
}

.info-page p,
.about-screen-body p {
    margin-bottom: 20px;
}

.info-page .info-lead,
.about-screen-body .info-lead {
    color: var(--color-secondary);
    font-size: 1.08rem;
}

.info-page ul,
.about-screen-body ul {
    margin: 0 0 24px 22px;
}

.info-page li,
.about-screen-body li {
    margin-bottom: 8px;
}

.info-note {
    margin: 28px 0;
    padding: 18px 20px;
    color: var(--color-secondary);
    background: var(--bg-panel-subtle);
    border-left: 4px solid var(--color-muted);
}

.info-quote {
    margin: 30px 0;
    padding: 22px;
    color: var(--color-secondary);
    background: var(--bg-panel-subtle);
    border-left: 4px solid var(--color-muted);
    font-style: italic;
}

.info-quote p {
    margin-bottom: 12px;
}

.info-quote cite {
    display: block;
    color: var(--color-muted);
    font-size: 0.85rem;
    font-style: normal;
}

.info-equation {
    margin: 26px 0;
    padding: 20px;
    overflow-x: auto;
    color: var(--color-text-light);
    background: var(--bg-panel-subtle);
    border: 1px solid var(--border-inner);
    border-radius: var(--radius-sm);
    text-align: center;
    -webkit-overflow-scrolling: touch;
}

.info-references {
    margin: 30px 0;
    padding: 22px;
    color: var(--color-secondary);
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.info-references h3 {
    margin-bottom: 14px;
    color: var(--color-primary);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.info-references ul {
    margin-bottom: 0;
}

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

.info-footer a {
    display: inline-block;
    min-width: 210px;
    padding: 13px 22px;
    color: var(--button-primary-color);
    background: var(--button-primary-bg);
    border: 1px solid var(--button-primary-border);
    border-radius: var(--radius-button);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), var(--button-shadow);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    transition: transform var(--motion-fast) ease, background 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease;
}

@media (hover: hover) {
  .info-footer a:hover {
      color: var(--button-primary-color);
      background: var(--button-primary-bg-hover);
      border-color: var(--color-primary);
      text-decoration: none;
      transform: translateY(-2px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), var(--button-shadow-hover);
  }
}

.info-footer a:focus-visible {
    outline: 3px solid var(--color-text-warm);
    outline-offset: 4px;
}

.info-footer a:active {
    transform: translateY(0);
    box-shadow: var(--elev-1);
}

@media (max-width: 600px) {
    .btn-menu-action {
        width: 100%;
        min-width: 0;
    }

    .info-page {
        padding: 24px 18px;
    }

    .info-header {
        margin-bottom: 20px;
        padding: 30px 16px;
    }

    .info-header h1 {
        margin-bottom: 12px;
        font-size: clamp(2.35rem, 10vw, 3rem);
        line-height: 1;
        letter-spacing: 3px;
    }

    .info-header p {
        font-size: 0.92em;
        line-height: 1.45;
    }

    .info-nav {
        display: grid;
        grid-template-columns: 1fr;
    }

    .info-nav a {
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.app-state {
  display: grid;
  justify-items: center;
  gap: 12px;
  min-height: 150px;
  padding: 34px 20px;
  color: var(--color-secondary);
  text-align: center;
}

.practice-menu {
  text-align: center;
}

.stats-dashboard {
  width: 100%;
}

.stats-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 30px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.stats-header .screen-title {
  margin-bottom: 8px;
  text-align: left;
}

.stats-kicker,
.stats-section-kicker {
  margin-bottom: 7px;
  color: var(--color-accent);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.stats-subtitle {
  max-width: 660px;
  margin: 0;
  text-align: left;
}

.stats-player-badge {
  display: grid;
  justify-items: end;
  min-width: 180px;
  padding: 14px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
}

.stats-player-badge span {
  color: var(--color-muted);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

.stats-player-badge strong {
  max-width: 260px;
  color: var(--color-primary);
  font-size: 1.05em;
  overflow-wrap: anywhere;
}

.stats-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.stats-overview .stat {
  min-height: 116px;
}

.stats-highlights {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

.stats-highlights .stat {
  display: grid;
  align-content: center;
  min-height: 104px;
}

.stats-highlights .stat-value {
  font-size: 1.7em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.stats-insights-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(340px, 1.25fr);
  align-items: start;
  gap: 18px;
  margin-bottom: 30px;
}

.stats-insights-grid .streak-card,
.stats-insights-grid .stats-section {
  min-width: 0;
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .stats-insights-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats-header {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
  }

  .stats-player-badge {
    min-width: 0;
    max-width: 100%;
    justify-items: start;
  }
}

.stats-section {
  margin-bottom: 30px;
  padding: 25px;
  background: var(--bg-panel);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-card);
}

.stats-section:last-child { margin-bottom: 0; }

.stats-section-title {
  margin: 0;
  padding: 0;
  color: var(--color-text-light);
  font-size: 1.3em;
}

.stats-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-subtle);
}

.stats-section-heading > span {
  color: var(--color-muted);
  font-size: 0.78em;
  letter-spacing: 0.02em;
}

.stats-histogram-section {
  min-width: 0;
}

.stats-histogram {
  display: grid;
  gap: 7px;
}

.stats-histogram-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 9px;
  min-height: 24px;
}

.stats-histogram-label,
.stats-histogram-row strong {
  color: var(--color-secondary);
  font-size: 0.78em;
  font-weight: 600;
  text-align: center;
}

.stats-histogram-track {
  height: 18px;
  overflow: hidden;
  background: var(--bg-darkest);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-sm);
}

.stats-histogram-fill {
  display: block;
  width: var(--histogram-width);
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  border-radius: var(--radius-sm);
  transition: width var(--motion-standard) var(--motion-ease);
}

.difficulty-stats-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.difficulty-stat-row {
  display: grid;
  gap: 11px;
  padding: 16px;
  background: var(--bg-panel-darker);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-control);
}

.difficulty-stat-heading,
.diff-stats {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.diff-record {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.78em;
  font-weight: 400;
}

.difficulty-stat-meter {
  height: 7px;
  overflow: hidden;
  background: var(--bg-darkest);
  border-radius: 999px;
}

.difficulty-stat-meter span {
  display: block;
  width: var(--difficulty-stat-width);
  height: 100%;
  background: var(--color-success);
  border-radius: inherit;
}

.diff-stats {
  color: var(--color-secondary);
  font-size: 0.78em;
  text-align: left;
}

.diff-winrate {
  margin: 0;
  color: var(--color-primary);
}

.diff-avg {
  font-size: 1em;
}

.recent-games-list {
  display: grid;
  gap: 10px;
}

.recent-game-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 15px 16px;
  background: var(--bg-panel-darker);
  border: 1px solid var(--border-inner);
  border-left: 4px solid var(--border-base);
  border-radius: var(--radius-control);
}

.recent-game-card.recent-game-won {
  border-left-color: var(--color-success);
}

.recent-game-primary {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
}

.recent-game-status {
  flex: 0 0 auto;
  width: 24px;
  color: var(--color-warning);
  font-size: 1.05em;
  font-weight: 700;
  text-align: center;
}

.recent-game-won .recent-game-status {
  color: var(--color-success);
}

.recent-game-identification {
  min-width: 0;
}

.recent-game-name {
  display: block;
  color: var(--color-text-light);
  overflow-wrap: anywhere;
}

.recent-game-name-hidden {
  color: var(--color-muted);
  font-style: italic;
}

.recent-game-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 7px;
  margin-top: 5px;
  color: var(--color-muted);
  font-size: 0.78em;
}

.recent-game-result {
  display: grid;
  justify-items: end;
  color: var(--color-secondary);
  font-size: 0.78em;
}

.recent-game-result strong {
  color: var(--color-accent);
  font-size: 1.25em;
  font-weight: 600;
}

.screen-title[tabindex="-1"]:focus,
.analytics-header h2[tabindex="-1"]:focus {
  outline: none;
}

@media (max-width: 600px) {
  .stats-dashboard {
    padding: 22px 14px;
  }

  .stats-header {
    align-items: stretch;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 22px;
    padding-bottom: 20px;
  }

  .stats-header .screen-title,
  .stats-subtitle {
    text-align: center;
  }

  .stats-player-badge {
    justify-items: center;
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .stats-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .stats-overview .stat {
    min-height: 96px;
  }

  .stats-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-highlights .stat-value {
    font-size: 1.35em;
  }

  .stats-insights-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats-section {
    padding: 18px 14px;
  }

  .stats-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .difficulty-stats-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats-histogram-row {
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    gap: 7px;
  }

  .recent-game-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  .recent-game-result {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
    padding-top: 9px;
    border-top: 1px solid var(--border-inner);
  }
}

.streak-card {
  margin-bottom: 30px;
  padding: 30px;
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-card);
  text-align: center;
}

.streak-card-empty { background: var(--bg-panel-subtle); }
.streak-card-active { background: var(--color-warning-bg); border-color: var(--color-warning); }
.streak-empty-title { margin-bottom: 10px; color: var(--color-muted); font-size: 1.5em; }
.streak-value { margin-bottom: 15px; color: var(--color-warning); font-size: 2.5em; }
.streak-heading { margin-bottom: 8px; color: var(--color-primary); font-size: 1.2em; font-weight: 600; letter-spacing: 0.02em; }
.streak-copy { color: var(--color-secondary); font-size: 0.92em; }
.streak-meta { margin-top: 20px; color: var(--color-muted); font-size: 0.85em; font-style: italic; }

.how-to-play-content { text-align: left; line-height: 2; }
.how-to-play-intro { margin-bottom: 16px; }
.how-to-play-step { margin-bottom: 12px; padding: 12px; background: var(--bg-panel-medium); border-radius: var(--radius-control); }
.how-to-play-step strong { color: var(--color-primary); }
.how-to-play-tip { margin-bottom: 0; }
.how-to-play-note { color: var(--color-muted); font-size: 0.92em; font-style: italic; }

.app-state-compact {
  min-height: 90px;
  padding: 20px 14px;
}

.app-state-icon {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: appStateSpin 0.75s linear infinite;
}

.app-state-error .app-state-icon,
.app-state-empty .app-state-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid currentColor;
  animation: none;
}

.app-state-error .app-state-icon::before { content: '!'; }
.app-state-empty .app-state-icon::before { content: '—'; }
.app-state-error { color: var(--color-danger-light); }
.app-state-message { max-width: 560px; line-height: 1.6; }
.app-state-detail { color: var(--color-muted); font-size: 0.85em; }
.app-state-action { width: auto; margin-top: 4px; padding-inline: 28px; }

@keyframes appStateSpin {
  to { transform: rotate(360deg); }
}

.site-brand-home {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .site-brand-home:hover {
    color: var(--color-primary);
    text-decoration: none;
  }
}

.encyclopedia-language-note {
    color: var(--color-muted);
    font-size: 0.85em;
    line-height: 1.4;
}

.museum-card-related-taxon {
    display: block;
    color: var(--color-secondary);
}

.tutorial-coach {
    margin: 0 0 28px;
    border: 2px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--bg-raised) 0%, var(--bg-inset) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.tutorial-coach-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-inner);
    background: var(--bg-panel-dark);
}

.tutorial-coach-progress {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.tutorial-coach-label {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.tutorial-coach-count {
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.2;
}

.tutorial-coach-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.tutorial-coach-action {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 0.78rem;
    letter-spacing: 0.03em;
    box-shadow: none;
}

.tutorial-coach-skip {
    color: var(--color-muted);
    background: transparent;
    border-color: var(--border-inner);
}

.tutorial-coach-body {
    padding: 20px 22px 22px;
}

.tutorial-coach-body h2 {
    margin: 0;
    color: var(--color-text-light);
    font-size: clamp(1.2rem, 2.3vw, 1.5rem);
    font-weight: 600;
    line-height: 1.25;
    text-shadow: none;
}

.tutorial-coach-body p {
    max-width: 760px;
    margin: 9px 0 0;
    color: var(--color-secondary);
    font-size: 0.96rem;
    line-height: 1.65;
}

.tutorial-coach-body em {
    color: var(--color-primary);
    font-style: italic;
}

.tutorial-coach-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 7px;
    margin-top: 20px;
}

.tutorial-coach-track span {
    height: 4px;
    border-radius: 1px;
    background: var(--border-inner);
}

.tutorial-coach-track span.is-complete {
    background: var(--color-secondary);
}

.tutorial-coach-track span.is-current {
    background: var(--color-primary);
    box-shadow: 0 0 7px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

.tutorial-focus {
    border-radius: var(--radius-sm);
    outline: 2px solid color-mix(in srgb, var(--color-primary) 64%, transparent);
    outline-offset: 4px;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-primary) 9%, transparent);
}

.tutorial-completion {
    margin: 0 0 20px;
}

.tutorial-completion .tutorial-coach-progress {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tutorial-completion p {
    max-width: 650px;
    margin: 14px auto 22px;
    color: var(--color-secondary);
    line-height: 1.65;
}

.tutorial-completion .victory-dino em {
    font-style: inherit;
}

.tutorial-completion-actions {
    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.tutorial-completion-actions .btn-new-game,
.tutorial-completion-actions .btn-hint {
    width: auto;
    min-width: 160px;
    margin-top: 0;
}

@media (max-width: 680px) {
    .tutorial-coach {
        margin-bottom: 22px;
    }

    .tutorial-coach-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }

    .tutorial-coach-actions {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tutorial-coach-action {
        width: 100%;
        padding-inline: 8px;
    }

    .tutorial-coach-body {
        padding: 18px 16px 20px;
    }

    .tutorial-coach-body p {
        font-size: 0.92rem;
    }

    .tutorial-completion {
        padding: 24px 16px;
    }

    .tutorial-completion-actions {
        flex-direction: column;
    }

    .tutorial-completion-actions .btn-new-game,
    .tutorial-completion-actions .btn-hint {
        width: 100%;
    }
}
/* ═══════════════════════════════════════════════════════════════════════
   LIQUID GLASS - floating surfaces that sit over moving content
   ═══════════════════════════════════════════════════════════════════════ */
.modal-box,
#suggestions,
.tree-zoom {
  background: radial-gradient(120% 70% at 50% -20%, var(--glass-glow) 0%, transparent 60%), var(--glass-sheet);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--glass-depth);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}

.modal-overlay {
  background: var(--glass-veil);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}

#suggestions {
  margin-top: 6px;
  border-radius: var(--radius-md);
}

#suggestions .suggestion-item {
  border-bottom-color: var(--glass-edge);
  background: transparent;
}

#suggestions .suggestion-item:last-child {
  border-bottom: 0;
}

#suggestions .suggestion-item.highlighted {
  background: var(--color-accent-subtle);
}

@media (hover: hover) {
  #suggestions .suggestion-item:hover {
    background: var(--color-accent-subtle);
  }
}

.tree-zoom {
  box-shadow: inset 0 1px 0 var(--glass-sheen), 0 10px 26px var(--glass-shadow);
}

.achievement-notification {
  background:
    radial-gradient(120% 70% at 50% -20%, rgba(214, 240, 190, 0.14) 0%, transparent 60%),
    var(--toast-bg);
  border: 1px solid var(--toast-border);
  box-shadow: inset 0 1px 0 rgba(230, 250, 210, 0.22), 0 18px 40px rgba(0, 0, 0, 0.40);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal-box,
  #suggestions,
  .tree-zoom {
    background: var(--glass-sheet-solid);
  }

  .modal-overlay {
    background: rgba(0, 0, 0, 0.85);
  }

  .achievement-notification {
    background: var(--toast-solid-bg);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .modal-box,
  #suggestions,
  .tree-zoom {
    background: var(--glass-sheet-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .modal-overlay {
    background: rgba(0, 0, 0, 0.85);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .achievement-notification {
    background: var(--toast-solid-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
.countdown-local {
  display: inline-block;
  margin-left: 4px;
  color: var(--color-muted);
  font-size: 0.85em;
  font-style: italic;
}

.app-state-retry {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.update-toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 28px);
  padding: 12px 14px 12px 18px;
  color: var(--color-text-light);
  background: radial-gradient(120% 70% at 50% -20%, var(--glass-glow) 0%, transparent 60%), var(--glass-sheet);
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--glass-depth);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  transform: translateX(-50%);
  animation: fadeIn var(--motion-standard) var(--motion-ease);
}

.update-toast .btn-hint {
  min-height: 0;
  padding: 8px 14px;
  border-radius: 999px;
}

@media (prefers-reduced-transparency: reduce) {
  .update-toast {
    background: var(--glass-sheet-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (max-width: 600px) {
  .site-header,
  #main-container:has(.difficulty-home) > .site-header {
    margin-bottom: 12px;
    padding: 12px 12px 12px 14px;
    text-align: left;
  }

  .site-header-layout {
    gap: 8px;
  }

  .site-brand {
    min-height: 38px;
    padding-right: 160px;
    text-align: left;
  }

  .site-brand h1 {
    margin: 2px 0 0;
    font-size: clamp(1.5rem, 7vw, 1.85rem);
    line-height: 1.15;
    letter-spacing: 1px;
  }

  .subtitle {
    display: none;
  }

  #main-container:has(.difficulty-home) .subtitle {
    display: block;
    max-width: none;
    margin: 2px 0 0;
    font-size: 0.78em;
    line-height: 1.3;
    letter-spacing: 1px;
    text-align: left;
  }

  #main-container:has(.difficulty-home) .site-brand {
    padding-right: 0;
  }

  #main-container:has(.difficulty-home) .site-brand h1 {
    padding-right: 160px;
  }

  #header-controls {
    justify-content: flex-start;
    margin-top: 0;
  }

  .header-controls-reserve {
    display: none;
  }

  #header-controls button:not(.theme-switch) {
    min-height: 40px;
    padding: 6px 12px;
  }
}
@media (max-width: 600px) {
  .stats.game-session-stats {
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 14px;
  }

  .game-session-stats .game-session-stat-main {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .game-session-stats .stat {
    display: grid;
    align-content: center;
    padding: 8px 2px !important;
  }

  .game-session-stats .stat-value {
    font-size: 1.15em !important;
  }

  .tree-zoom-dock {
    top: auto;
    right: 10px;
    bottom: 10px;
  }

  .game-session-stats .stat-label {
    margin-top: 3px;
    font-size: 0.64rem !important;
    line-height: 1.15;
    letter-spacing: 0.2px !important;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}
.header-glyph {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#header-controls .btn-header {
  border-radius: 999px;
}

#header-controls .btn-header.btn-with-icon {
  gap: 7px;
}

#header-controls button.btn-header-icon:not(.theme-switch) {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
}

.btn-header-icon .header-glyph {
  width: 22px;
  height: 22px;
}

#header-controls button.btn-header-back:not(.theme-switch) {
  position: absolute;
  top: calc(50% - 20px);
  left: 30px;
}

.btn-header-back .header-glyph {
  stroke-width: 2.2;
}

#header-controls .btn-account {
  justify-content: flex-start;
  min-width: 0;
  max-width: 150px;
  overflow: hidden;
}

#header-controls .btn-account > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .site-header .site-brand h1 {
    letter-spacing: 0.5px;
  }

  .site-header .header-theme-row {
    gap: 8px;
  }
}

.login-field input,
#dino-input,
.museum-search input,
.museum-toolbar-filter select,
.friend-input {
  color: var(--color-text-light);
  background: var(--field-bg);
  border: 2px solid var(--field-border);
  border-radius: var(--radius-md);
  box-shadow: var(--field-shadow);
}

.login-field input:focus,
#dino-input:focus,
.museum-search input:focus,
.museum-toolbar-filter select:focus-visible,
.friend-input:focus {
  background: var(--field-bg);
  border-color: var(--color-muted);
  outline: none;
  box-shadow: var(--field-shadow), var(--field-ring);
}

.login-field input.input-error {
  border-color: var(--color-danger-dark);
}

.friend-panel h3 {
  color: var(--color-primary);
  font-weight: 600;
}

.modal-title {
  font-weight: 600;
}

.difficulty-level-name,
.difficulty-home .difficulty-level-name {
  letter-spacing: 0.04em;
}

body.light-mode h1,
html[data-theme="light"] body h1 {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(62, 48, 31, 0.16);
}

.language-picker select {
  color: var(--color-primary);
}

.site-header {
  background: radial-gradient(120% 90% at 50% -30%, var(--glass-glow) 0%, transparent 60%), var(--glass-sheet);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--elev-2);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}

.museum-progress-container,
.friend-panel {
  background: radial-gradient(120% 80% at 50% -20%, var(--glass-glow) 0%, transparent 55%), var(--glass-surface-soft);
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--elev-1);
}

.museum-toolbar {
  padding: 14px 16px;
  background: var(--glass-sheet);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--elev-1);
}

@media (min-width: 601px) {
  .museum-toolbar {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    z-index: 30;
    -webkit-backdrop-filter: var(--glass-filter);
    backdrop-filter: var(--glass-filter);
    box-shadow: inset 0 1px 0 var(--glass-sheen), var(--elev-2);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .museum-toolbar {
    background: var(--glass-sheet-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.museum-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  margin-bottom: 15px;
}

.museum-filter-row .museum-filter-summary {
  margin-bottom: 0;
}

.museum-unlocked-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 6px 14px 6px 10px;
  color: var(--color-secondary);
  background: var(--glass-surface-soft);
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  font-family: var(--font-control);
  font-size: 0.9em;
  cursor: pointer;
}

.museum-unlocked-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-success);
  cursor: pointer;
}

.museum-unlocked-toggle:has(input:checked) {
  color: var(--color-text-light);
  border-color: var(--color-success);
}

.museum-unlocked-toggle:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.museum-card.locked {
  opacity: 1;
  background: var(--bg-panel-subtle);
  border: 1px solid var(--glass-edge);
  border-top-width: 3px;
  box-shadow: none;
}

.museum-card.locked .museum-card-art-container {
  background: transparent;
  border: 1px dashed var(--glass-edge);
}

.museum-card.locked .museum-card-lock-icon {
  opacity: 0.5;
}

.museum-card.locked .museum-card-name,
.museum-card.locked .museum-card-clade {
  color: var(--color-muted);
  opacity: 0.75;
}

.friend-identity {
  display: grid;
  width: min(420px, 100%);
  margin: -8px auto 26px;
  text-align: center;
}

.friend-identity .friend-label {
  margin-top: 0;
}

.friends-divider span {
  margin: 10px 0;
  padding: 5px 11px;
  writing-mode: horizontal-tb;
  background: var(--glass-surface-soft);
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  font-size: 0.85em;
}

.stats-skeleton {
  display: grid;
  gap: 24px;
}

.stats-skeleton-block {
  display: block;
  background: linear-gradient(90deg, var(--bg-panel-subtle) 0%, var(--glass-glow) 50%, var(--bg-panel-subtle) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-md);
  animation: statsSkeletonShimmer 1.4s ease-in-out infinite;
}

.stats-skeleton-header {
  display: grid;
  gap: 10px;
}

.stats-skeleton-title {
  width: min(260px, 70%);
  height: 34px;
}

.stats-skeleton-line {
  width: min(420px, 90%);
  height: 14px;
}

.stats-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
}

.stats-skeleton-card {
  height: 96px;
}

.stats-skeleton-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}

.stats-skeleton-panel {
  height: 220px;
}

@keyframes statsSkeletonShimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stats-skeleton-block {
    animation: none;
  }
}

@media (max-width: 600px) {
  .difficulty-home-countdown {
    flex-wrap: wrap;
    row-gap: 1px;
    border-radius: var(--radius-lg);
  }

  .difficulty-home-countdown .countdown-local {
    flex-basis: 100%;
    margin-left: 0;
    text-align: center;
  }

  .site-brand,
  #main-container:has(.difficulty-home) .site-brand h1 {
    padding-right: 96px;
  }

  #main-container:has(.difficulty-home) .site-brand {
    padding-right: 0;
  }

  .site-header .site-brand h1 {
    font-size: clamp(1.75rem, 8.4vw, 2.15rem);
  }

  #header-controls button.btn-header-back:not(.theme-switch) {
    position: absolute;
    top: 12px;
    left: 12px;
  }

  .site-header:has(.btn-header-back) .site-brand {
    padding-left: 50px;
  }

  #header-controls:has(.header-controls-visible > .btn-header-back:only-child) {
    display: block;
    height: 0;
  }

  .site-header-layout:has(.header-controls-visible > .btn-header-back:only-child) {
    gap: 0;
  }
}

@media (max-width: 340px) {
  .site-header .site-brand h1 {
    font-size: 1.5rem;
  }
}
@media (min-width: 721px) {
  .friends-divider {
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  .museum-toolbar-filter select {
    padding-inline: 10px 6px;
    font-size: 0.95rem;
  }
}
.glass-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

.glass-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: var(--control-lg);
  padding: 10px 12px 10px 15px;
  color: var(--color-text-light);
  background: radial-gradient(120% 90% at 50% -40%, var(--glass-glow) 0%, transparent 60%), var(--glass-surface-soft);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--elev-1);
  font: 500 1rem var(--font-control);
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease, color var(--motion-fast) ease;
}

.glass-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.glass-select-chevron {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--motion-fast) var(--motion-ease);
}

.glass-select-trigger[aria-expanded="true"] {
  border-color: var(--color-accent);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--field-ring);
}

.glass-select-trigger[aria-expanded="true"] .glass-select-chevron {
  transform: rotate(180deg);
}

@media (hover: hover) {
  .glass-select-trigger:hover:not(:disabled) {
    color: var(--color-primary);
    border-color: var(--color-muted);
  }
}

.language-picker .glass-select-trigger {
  width: auto;
  min-height: var(--control-sm);
  padding: 7px 10px 7px 14px;
  color: var(--color-primary);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.language-picker .glass-select-chevron {
  width: 15px;
  height: 15px;
}

.glass-select-menu {
  position: fixed;
  z-index: 10050;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: radial-gradient(120% 70% at 50% -20%, var(--glass-glow) 0%, transparent 60%), var(--glass-sheet);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--glass-depth);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  font-family: var(--font-control);
  animation: glassSelectIn var(--motion-fast) var(--motion-ease);
}

.glass-select-menu.opens-up {
  animation-name: glassSelectInUp;
}

.glass-select-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  color: var(--color-text-light);
  border-bottom: 1px solid var(--glass-edge);
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
}

.glass-select-option:last-child {
  border-bottom: 0;
}

.glass-select-option.is-active {
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.glass-select-option[aria-selected="true"] {
  color: var(--color-primary);
  font-weight: 600;
}

.glass-select-option[aria-selected="true"]::after {
  content: '\2713';
  color: var(--color-accent);
  font-size: 0.9em;
}

.glass-select-option[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

@keyframes glassSelectIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes glassSelectInUp {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .glass-select-menu {
    animation: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass-select-menu {
    background: var(--glass-sheet-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-select-menu {
    background: var(--glass-sheet-solid);
  }
}
body.light-mode .stat-value,
html[data-theme="light"] body .stat-value {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 2px 6px rgba(74, 56, 41, 0.12);
}

body.light-mode .game-session-stats .stat,
html[data-theme="light"] body .game-session-stats .stat {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(239, 229, 212, 0.72) 100%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -2px 5px rgba(74, 56, 41, 0.06), 0 4px 12px var(--glass-shadow);
}

body.light-mode #tree-container,
html[data-theme="light"] body #tree-container {
  box-shadow: inset 0 2px 12px rgba(62, 48, 31, 0.08), 0 6px 18px rgba(62, 48, 31, 0.10);
}

body.light-mode .game-card,
html[data-theme="light"] body .game-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), var(--elev-3);
}

body.light-mode .clade-link,
html[data-theme="light"] body .clade-link {
  background: #4a3829;
  border-color: #4a3829;
  color: #f8f6f3;
}

@media (hover: hover) {
  body.light-mode .clade-link:hover,
  html[data-theme="light"] body .clade-link:hover {
    background: var(--bg-card);
    color: #2d2318;
  }
}

.site-header .language-picker {
  position: relative;
}

.site-header .language-picker .glass-select-trigger {
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
}

.site-header .language-picker .glass-select-value,
.site-header .language-picker .glass-select-chevron {
  display: none;
}

.site-header .language-picker::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 20px;
  height: 20px;
  margin: auto;
  background: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.4 2.4 3.6 5.2 3.6 8.5s-1.2 6.1-3.6 8.5c-2.4-2.4-3.6-5.2-3.6-8.5s1.2-6.1 3.6-8.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17M12 3.5c2.4 2.4 3.6 5.2 3.6 8.5s-1.2 6.1-3.6 8.5c-2.4-2.4-3.6-5.2-3.6-8.5s1.2-6.1 3.6-8.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

#header-controls .btn-header-avatar {
  justify-content: center;
}

.header-avatar {
  color: var(--color-primary);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.game-session-stat-sidebar .stat {
  animation-delay: 0.5s;
}

@media (min-width: 781px) {
  .site-header-utility {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }

  .header-theme-row {
    order: 2;
    width: auto;
    min-height: 0;
    padding-left: 12px;
    border-left: 1px solid var(--glass-edge);
  }

  #header-controls,
  #header-controls.stable-header-controls {
    order: 1;
    width: auto;
  }
}
@media (min-width: 781px) {
  .site-header-utility:not(:has(.header-controls-visible > :not(.btn-header-back))) .header-theme-row {
    border-left-color: transparent;
  }
}
html {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 780px) {
  .guess-primary-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .guess-primary-row .btn-guess {
    width: auto !important;
    min-width: 92px;
    padding: 0 18px;
  }
}
.tree-sheen {
  fill: url(#tree-sheen-gradient) !important;
  stroke: none !important;
  filter: none !important;
  pointer-events: none;
}

.tree-sheen-start {
  stop-color: #fff6e4;
  stop-opacity: 0.28;
}

.tree-sheen-end {
  stop-color: #fff6e4;
  stop-opacity: 0;
}

body.light-mode .tree-sheen-start,
html[data-theme="light"] body .tree-sheen-start {
  stop-opacity: 0.32;
}

.tree-node-rect,
.tree-leaf-rect {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.30));
}

body.light-mode .tree-node-rect,
body.light-mode .tree-leaf-rect,
html[data-theme="light"] body .tree-node-rect,
html[data-theme="light"] body .tree-leaf-rect {
  filter: drop-shadow(0 3px 6px rgba(62, 48, 31, 0.18));
}

.tree-node-rect-hint {
  stroke-dasharray: 5 3;
}
body.light-mode .modal-title,
html[data-theme="light"] body .modal-title {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 6px rgba(62, 48, 31, 0.14);
}

body.light-mode .tree-line.tree-line-best,
html[data-theme="light"] body .tree-line.tree-line-best {
  stroke: var(--tree-line-revealed);
  filter: drop-shadow(0 0 3px rgba(139, 94, 60, 0.30));
}
.tree-leaf-target .tree-leaf-rect {
  filter: drop-shadow(0 0 9px rgba(110, 210, 140, 0.35)) drop-shadow(0 3px 6px rgba(0, 0, 0, 0.30));
}
.stats-dashboard .stat {
  display: grid;
  align-content: center;
  padding: 16px 10px;
  background: linear-gradient(145deg, var(--glass-surface), var(--glass-surface-soft));
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 4px 12px var(--glass-shadow);
}

body.light-mode .stats-dashboard .stat,
html[data-theme="light"] body .stats-dashboard .stat {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(239, 229, 212, 0.72) 100%);
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight), inset 0 -2px 5px rgba(74, 56, 41, 0.06), 0 4px 12px var(--glass-shadow);
}

.stats-dashboard .stat-value {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgba(212, 184, 126, 0.18);
}

.stats-dashboard .stats-highlights .stat-value {
  font-size: clamp(1.2rem, 1.9vw, 1.5rem);
}

.stats-dashboard .stat-label {
  margin-top: 6px;
  font-size: 0.8rem;
  line-height: 1.3;
}

@media (max-width: 600px) {
  .achievements-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .achievement-card {
    padding: 10px;
    border-width: 1px;
  }

  .achievement-card-heading {
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
  }

  .achievement-medal {
    width: 22px;
    height: 22px;
  }

  .achievement-medal::before {
    inset: 4px;
  }

  .achievement-medal::after {
    bottom: -6px;
    width: 9px;
    height: 7px;
  }

  .achievement-title {
    font-size: 0.86rem;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .achievement-category {
    font-size: 0.7rem;
  }

  .achievement-desc {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.76rem;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .achievement-progress {
    gap: 4px;
    margin-top: 8px;
  }

  .achievement-progress > span {
    font-size: 0.7rem;
  }
}

.btn-hint,
.btn-guess,
.btn-new-game,
.modal-btn,
.btn-header,
.glass-select-trigger,
.difficulty-btn,
.museum-card.unlocked,
.tree-zoom-btn,
.home-curiosity,
.museum-unlocked-toggle {
  transition: transform 0.45s var(--motion-spring), background var(--motion-fast) ease,
              border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease,
              color var(--motion-fast) ease, opacity var(--motion-fast) ease, filter var(--motion-fast) ease;
}

.btn-hint:active:not(:disabled),
.btn-guess:active:not(:disabled),
.btn-new-game:active:not(:disabled),
.modal-btn:active:not(:disabled),
.btn-header:active:not(:disabled),
.glass-select-trigger:active:not(:disabled),
.difficulty-btn:active:not(:disabled),
.museum-card.unlocked:active,
.tree-zoom-btn:active:not(:disabled),
.home-curiosity:active,
.museum-unlocked-toggle:active {
  transform: scale(0.95);
  transition-duration: 0.12s;
}

@keyframes glassSelectIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.94); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes glassSelectInUp {
  from { opacity: 0; transform: translateY(6px) scale(0.94); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

.glass-select-menu {
  transform-origin: top center;
  animation-duration: 0.32s;
  animation-timing-function: var(--motion-spring);
}

.glass-select-menu.opens-up {
  transform-origin: bottom center;
}

@media (prefers-reduced-motion: reduce) {
  .btn-hint:active:not(:disabled),
  .btn-guess:active:not(:disabled),
  .btn-new-game:active:not(:disabled),
  .modal-btn:active:not(:disabled),
  .btn-header:active:not(:disabled),
  .glass-select-trigger:active:not(:disabled),
  .difficulty-btn:active:not(:disabled),
  .museum-card.unlocked:active,
  .tree-zoom-btn:active:not(:disabled),
  .home-curiosity:active,
  .museum-unlocked-toggle:active {
    transform: none;
  }
}
#header-controls .btn-header[aria-current="page"] {
  color: var(--color-primary);
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
}

@media (max-width: 600px) {
  .stats.game-session-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .game-session-stats .game-session-stat-main,
  .game-session-stats .game-session-stat-sidebar {
    display: contents;
  }

  .game-session-stats .stat {
    grid-column: span 2;
    padding: 10px 6px !important;
  }

  .game-session-stats .game-session-stat-sidebar .stat {
    order: 1;
  }

  .game-session-stats .game-session-stat-main .stat:nth-child(3),
  .game-session-stats .game-session-stat-main .stat:nth-child(4) {
    grid-column: span 3;
    order: 2;
  }

  .game-session-stats .stat-value {
    font-size: 1.4em !important;
  }

  .game-session-stats .stat-label {
    font-size: 0.74rem !important;
    letter-spacing: 0 !important;
  }
}
.account-card {
  max-width: 760px;
  margin-inline: auto;
}

.account-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 10px;
}

.account-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 64px;
  height: 64px;
  color: var(--color-primary);
  background: radial-gradient(120% 90% at 50% -30%, var(--glass-glow) 0%, transparent 60%), var(--glass-surface-soft);
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--elev-1);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
}

.account-identity {
  min-width: 0;
}

.account-identity .screen-title {
  margin-bottom: 2px;
  text-align: left;
}

.account-name {
  color: var(--color-text-light);
  font-size: 1.05em;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.account-email {
  color: var(--color-muted);
  font-family: var(--font-control);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

.account-subtitle {
  margin-bottom: 22px;
  color: var(--color-secondary);
  font-style: italic;
}

.account-section {
  margin-top: 18px;
  padding: 20px;
  background: radial-gradient(120% 80% at 50% -20%, var(--glass-glow) 0%, transparent 55%), var(--glass-surface-soft);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--glass-sheen), var(--elev-1);
}

.account-section h3 {
  margin-bottom: 14px;
  color: var(--color-primary);
  font-size: 1.15em;
  font-weight: 600;
}

.account-password-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 14px;
}

.account-section .btn-guess {
  width: 100%;
}

.account-reset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-edge);
  color: var(--color-secondary);
  font-size: 0.92em;
}

.account-reset-row p {
  flex: 1 1 240px;
}

.account-faq-item {
  border-bottom: 1px solid var(--glass-edge);
}

.account-faq-item:last-child {
  border-bottom: 0;
}

.account-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 2px;
  color: var(--color-text-light);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.account-faq-item summary::-webkit-details-marker {
  display: none;
}

.account-faq-item summary::after {
  content: '+';
  flex: 0 0 auto;
  color: var(--color-accent);
  font-size: 1.2em;
  transition: transform var(--motion-fast) var(--motion-ease);
}

.account-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.account-faq-item summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.account-faq-item p {
  padding: 0 2px 14px;
  color: var(--color-secondary);
  line-height: 1.65;
}

.account-faq-item a {
  color: var(--color-accent);
}

.account-signout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 18px;
  color: var(--color-secondary);
}

.account-signout p {
  flex: 1 1 260px;
}

.btn-account-signout {
  color: var(--color-danger-light);
  border-color: var(--color-danger-dark);
}

@media (max-width: 600px) {
  .account-header {
    gap: 14px;
  }

  .account-avatar {
    width: 52px;
    height: 52px;
    font-size: 23px;
  }

  .account-password-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-section {
    padding: 16px 14px;
  }

  .account-reset-row .btn-hint,
  .account-signout .btn-hint {
    width: 100%;
  }
}
.account-name-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 14px;
}

.account-name-row .btn-hint {
  margin-top: 26px;
  min-height: var(--control-lg);
}

.account-field-hint {
  margin-top: 6px;
  color: var(--color-muted);
  font-size: 0.85em;
}

.account-danger {
  border-color: rgba(192, 96, 64, 0.38);
}

.account-danger h3 {
  color: var(--color-danger-light);
}

.account-danger > p {
  margin-bottom: 14px;
  color: var(--color-secondary);
  line-height: 1.6;
}

.btn-account-delete {
  color: var(--color-danger-light);
  border-color: var(--color-danger-dark);
}

@media (max-width: 600px) {
  .account-name-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-name-row .btn-hint {
    width: 100%;
    margin-top: 4px;
  }
}