/* ═══════════════════════════════════════════════════════════════════════
 * Terminal Era Skins — Hackers Journey
 * ─────────────────────────────────────────────────────────────────────
 * Each of 13 eras gets a distinct visual identity for the battle
 * terminal panel. Activated by body[data-era="<key>"] on QUICKPLAY boot.
 *
 * Scope per era: border, panel background, header chrome, accent.
 * Era→terminal MAPPING is NOT touched here (see protocol-breach-game.html:20894).
 *
 * Phase 1 fully skinned: eridu, worldwars, breach.
 * Phase 2: remaining 10 eras have accent+border differentiation only,
 * can be upgraded in-place without breaking layout.
 *
 * File owned by MANTIS. Integration (link tag + data-era setter) is
 * proposed separately per docs/HANDSHAKE-PROTOCOL.md.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─── SHARED TOKENS ─── */
:root{
  --tm-radius: 10px;
  --tm-pad: 16px;
  --tm-header-gap: 4px;
  --tm-border-w: 1px;
}

/* Base terminal panel (applies to all eras unless overridden) */
body[data-era] .terminal-panel{
  border-radius: var(--tm-radius);
  padding: var(--tm-pad);
  transition: border-color 0.4s, background 0.4s;
  font-family: 'Inter', system-ui, sans-serif;
}
body[data-era] .terminal-panel-header{
  font-family: 'Orbitron', monospace;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 11px;
  opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════════════
 * ERA 1 · ERIDU (3500 BC) · clay + reed light
 * Full Phase 1 skin.
 * ═════════════════════════════════════════════════════════════════════ */
body[data-era="eridu"] .terminal-panel{
  background:
    radial-gradient(ellipse at 20% 20%, rgba(218,165,32,0.08) 0%, transparent 60%),
    linear-gradient(160deg, rgba(62,42,20,0.85) 0%, rgba(38,24,10,0.90) 100%);
  border: 2px solid rgba(218,165,32,0.35);
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.45),
    0 8px 22px rgba(0,0,0,0.5);
}
body[data-era="eridu"] .terminal-panel-header{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  text-transform: none;
  letter-spacing: 5px;
  color: #E8C27A;
}
body[data-era="eridu"] .terminal-panel::before{
  content: '';position:absolute;inset:6px;
  border: 1px dashed rgba(218,165,32,0.20);
  pointer-events:none;border-radius: 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * ERA 2 · EGYPT (1550 BC) · hieroglyphic gold + linen
 * ═════════════════════════════════════════════════════════════════════ */
body[data-era="egypt"] .terminal-panel{
  background: linear-gradient(180deg, rgba(40,28,6,0.88) 0%, rgba(20,14,4,0.92) 100%);
  border: 2px solid rgba(255,215,0,0.40);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.5);
}
body[data-era="egypt"] .terminal-panel-header{ color: #FFD700; letter-spacing: 6px; }

/* ═══════════════════════════════════════════════════════════════════════
 * ERA 3 · CLASSICAL (500 BC) · marble + crimson
 * ═════════════════════════════════════════════════════════════════════ */
body[data-era="classical"] .terminal-panel{
  background: linear-gradient(180deg, rgba(28,18,18,0.90) 0%, rgba(14,8,8,0.94) 100%);
  border: 2px solid rgba(255,99,71,0.35);
  box-shadow: inset 0 0 26px rgba(0,0,0,0.55);
}
body[data-era="classical"] .terminal-panel-header{
  font-family: 'Cormorant Garamond', serif;
  color: #FF8470; letter-spacing: 4px; text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════
 * ERA 4 · BAGHDAD / ISLAMIC GOLDEN AGE (800 AD) · cyan + geometric
 * ═════════════════════════════════════════════════════════════════════ */
body[data-era="baghdad"] .terminal-panel{
  background:
    repeating-linear-gradient(45deg, rgba(0,206,209,0.015) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, rgba(4,12,22,0.92) 0%, rgba(2,8,16,0.96) 100%);
  border: 2px solid rgba(0,206,209,0.40);
  box-shadow: inset 0 0 30px rgba(0,206,209,0.05), 0 0 24px rgba(0,206,209,0.06);
}
body[data-era="baghdad"] .terminal-panel-header{ color: #00CED1; letter-spacing: 5px; }

/* ═══════════════════════════════════════════════════════════════════════
 * ERA 5 · CRUSADER (1100 AD) · dark cowl + dagger red
 * ═════════════════════════════════════════════════════════════════════ */
body[data-era="crusader"] .terminal-panel{
  background: linear-gradient(180deg, rgba(22,8,10,0.94) 0%, rgba(10,2,4,0.97) 100%);
  border: 2px solid rgba(196,30,58,0.40);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.7);
}
body[data-era="crusader"] .terminal-panel-header{ color: #E85A6E; letter-spacing: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
 * ERA 6 · SILK ROAD (1250 AD) · dust + leather
 * ═════════════════════════════════════════════════════════════════════ */
body[data-era="silkroad"] .terminal-panel{
  background: linear-gradient(180deg, rgba(30,18,6,0.88) 0%, rgba(16,10,4,0.94) 100%);
  border: 2px solid rgba(230,126,34,0.36);
  box-shadow: inset 0 0 26px rgba(0,0,0,0.55);
}
body[data-era="silkroad"] .terminal-panel-header{ color: #F4A261; letter-spacing: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
 * ERA 7 · RENAISSANCE (1450 AD) · velvet purple + candle
 * ═════════════════════════════════════════════════════════════════════ */
body[data-era="renaissance"] .terminal-panel{
  background: linear-gradient(180deg, rgba(28,8,36,0.92) 0%, rgba(12,4,18,0.96) 100%);
  border: 2px solid rgba(170,68,255,0.38);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.6), 0 0 18px rgba(170,68,255,0.08);
}
body[data-era="renaissance"] .terminal-panel-header{
  font-family: 'Cormorant Garamond', serif;
  color: #C68EFF; letter-spacing: 4px; text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════
 * ERA 8 · EMPIRE (1650 AD) · ship's navy + gold braid
 * ═════════════════════════════════════════════════════════════════════ */
body[data-era="empire"] .terminal-panel{
  background: linear-gradient(180deg, rgba(8,20,38,0.92) 0%, rgba(4,10,22,0.96) 100%);
  border: 2px solid rgba(46,134,193,0.40);
  box-shadow: inset 0 0 28px rgba(0,0,0,0.6);
}
body[data-era="empire"] .terminal-panel-header{ color: #6BB6FF; letter-spacing: 5px; }

/* ═══════════════════════════════════════════════════════════════════════
 * ERA 9 · INDUSTRIAL (1850 AD) · brass gears + soot
 * ═════════════════════════════════════════════════════════════════════ */
body[data-era="industrial"] .terminal-panel{
  background: linear-gradient(180deg, rgba(30,24,18,0.92) 0%, rgba(16,12,8,0.96) 100%);
  border: 2px solid rgba(86,101,115,0.50);
  box-shadow: inset 0 0 28px rgba(0,0,0,0.6);
}
body[data-era="industrial"] .terminal-panel-header{
  font-family: 'Cormorant Garamond', serif;
  color: #C8A674; letter-spacing: 4px; text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════
 * ERA 10 · WORLD WARS / BLETCHLEY (1940) · WAR GRID · Phase 1 featured
 * ═════════════════════════════════════════════════════════════════════ */
body[data-era="worldwars"] .terminal-panel{
  background:
    repeating-linear-gradient(0deg, rgba(255,140,0,0.025) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, rgba(255,140,0,0.02) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, rgba(20,14,4,0.94) 0%, rgba(8,4,2,0.97) 100%);
  border: 2px solid rgba(255,140,0,0.45);
  box-shadow:
    inset 0 0 32px rgba(0,0,0,0.7),
    0 0 20px rgba(255,140,0,0.10);
  position: relative;
}
body[data-era="worldwars"] .terminal-panel::after{
  content: '■ ■ ■';position: absolute; top: 6px; right: 10px;
  font-family: monospace; font-size: 8px;
  color: rgba(255,140,0,0.55); letter-spacing: 3px;
  pointer-events: none;
}
body[data-era="worldwars"] .terminal-panel-header{
  font-family: 'Courier New', monospace;
  color: #FFB347; letter-spacing: 5px;
  border-bottom: 1px dashed rgba(255,140,0,0.3);
  padding-bottom: 6px; margin-bottom: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * ERA 11 · COLD WAR (1962) · sodium-lamp amber + concrete
 * ═════════════════════════════════════════════════════════════════════ */
body[data-era="coldwar"] .terminal-panel{
  background: linear-gradient(180deg, rgba(30,10,8,0.94) 0%, rgba(14,4,4,0.97) 100%);
  border: 2px solid rgba(231,76,60,0.42);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.7);
}
body[data-era="coldwar"] .terminal-panel-header{
  font-family: 'Courier New', monospace;
  color: #FF7B6A; letter-spacing: 5px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * ERA 12 · CRYPTO WARS (1991) · CRT green + dial-up
 * ═════════════════════════════════════════════════════════════════════ */
body[data-era="cryptowars"] .terminal-panel{
  background:
    repeating-linear-gradient(0deg, rgba(52,152,219,0.04) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(4,10,20,0.94) 0%, rgba(2,6,14,0.97) 100%);
  border: 2px solid rgba(52,152,219,0.45);
  box-shadow: inset 0 0 28px rgba(0,0,0,0.7);
}
body[data-era="cryptowars"] .terminal-panel-header{
  font-family: 'Courier New', monospace;
  color: #7EC8FF; letter-spacing: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * ERA 13 · AGE OF BREACH (2010+) · SOC GLASS · Phase 1 featured
 * ═════════════════════════════════════════════════════════════════════ */
body[data-era="breach"] .terminal-panel{
  background:
    linear-gradient(135deg, rgba(0,255,136,0.03) 0%, transparent 40%, rgba(255,68,68,0.03) 100%),
    linear-gradient(180deg, rgba(6,10,8,0.95) 0%, rgba(2,6,4,0.98) 100%);
  border: 1px solid rgba(0,255,136,0.45);
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.7),
    0 0 30px rgba(0,255,136,0.10),
    0 0 2px rgba(0,255,136,0.3);
  position: relative;
  backdrop-filter: blur(4px);
}
body[data-era="breach"] .terminal-panel::before{
  content: '';position: absolute; inset: 0;
  border-left: 3px solid rgba(0,255,136,0.7);
  pointer-events: none; border-radius: inherit;
}
body[data-era="breach"] .terminal-panel::after{
  content: 'REC ●';position: absolute; top: 6px; right: 10px;
  font-family: 'Courier New', monospace; font-size: 9px;
  color: rgba(255,68,68,0.85); letter-spacing: 2px;
  animation: breachBlink 1.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breachBlink{ 0%,100%{opacity:1} 50%{opacity:0.3} }
body[data-era="breach"] .terminal-panel-header{
  font-family: 'Orbitron', monospace;
  color: #4FF8A8; letter-spacing: 5px;
  font-weight: 700;
}

/* ─── Accessibility: reduced motion ─── */
@media (prefers-reduced-motion: reduce){
  body[data-era="breach"] .terminal-panel::after{ animation: none; }
  body[data-era] .terminal-panel{ transition: none; }
}