/* ═══════════════════════════════════════════
   ESP Training — Design System
   Dark aesthetic · Cormorant Garamond · Accent #7B2FBE
   ═══════════════════════════════════════════ */

:root {
  --bg: #000000;
  --bg2: #050505;
  --bg3: #111112;
  --surface: #000000;
  --surface2: #121214;
  --border: #ffffff;
  --border2: #333333;
  --text: #ffffff;
  --text2: #e0e0e0;
  --text3: #888888;
  --accent: #8b5cf6;
  --accent2: #7c3aed;
  --accent-dim: rgba(139,92,246,0.12);
  --accent-glow: rgba(139,92,246,0.06);
  --success: #34D399;
  --success-dim: rgba(52,211,153,0.12);
  --error: #F87171;
  --error-dim: rgba(248,113,113,0.1);
  --gold: #c9a96e;
  --terracotta: #C4725A;
  --sage: #7BA383;
  --peri: #8B9FD1;
  --mustard: #C9A84C;
  --serif: 'Cormorant Garamond', Georgia, 'Noto Serif SC', serif;
  --sans: 'Plus Jakarta Sans', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace;
  --r: 0px;
  --r-sm: 0px;
  --r-lg: 0px;
  --tab-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;font-family:var(--sans);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}

/* ═══ CANVASES ═══ */
#site-canvas-container{position:fixed;inset:0;z-index:0;pointer-events:none}
#bg-canvas{display:none !important}
#fx-canvas{position:fixed;inset:0;z-index:500;pointer-events:none}

/* ═══ FLASH OVERLAY ═══ */
.flash-overlay{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
.flash-overlay.show{opacity:1;pointer-events:auto}
.flash-overlay img{border-radius:var(--r-lg);box-shadow:0 8px 40px rgba(0,0,0,.8);border:1px solid var(--border);max-width:90vw;max-height:80vh;object-fit:cover}
.flash-score{position:fixed;top:48px;right:16px;font-family:var(--mono);font-size:18px;font-weight:600;color:var(--success);opacity:0;pointer-events:none;z-index:601;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.flash-score.score-fly{animation:scoreFloatUp .9s ease-out forwards}
@keyframes scoreFloatUp{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-24px)}}

/* ═══ TOAST ═══ */
.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--surface2);border:1px solid var(--border);color:var(--text);padding:10px 20px;border-radius:var(--r);font-size:13px;z-index:700;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ═══ PAGER ═══ */
.pager{position:relative;width:100%;height:100%;z-index:1}
.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow:hidden;background:transparent}
.screen.active{display:flex}

/* ═══ LOADING / WELCOME SCREEN ═══ */
#s-loading{align-items:center;justify-content:center;background:transparent;cursor:pointer}
.load-wrap{
  text-align:left;
  pointer-events:none;
  background: rgba(5, 5, 5, 0.75);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  outline: 1px solid rgba(255, 255, 255, 0.05);
  outline-offset: 5px;
  padding: 16px 16px;
  width: fit-content;
  max-width: 90%;
  position: relative;
  margin: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(139, 92, 246, 0.08);
}
.welcome-title-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  gap: 2px;
  margin-bottom: 8px;
  font-family: var(--sans);
  font-size: clamp(38px, 9vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.welcome-word {
  color: var(--text);
}
.welcome-word strong {
  color: var(--accent);
  font-weight: 900;
}
.welcome-sub { font-family: var(--serif); font-size: 16px; font-weight: 400; color: var(--text2); letter-spacing: 0.05em; margin-top: 3px; }
.welcome-click-prompt { font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--text3); letter-spacing: 0.05em; margin-top: 10px; animation: pulseFade 2s infinite ease-in-out; }
@keyframes pulseFade { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
@keyframes pulsePrompt {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ═══ ONBOARDING ═══ */
#s-onboarding{align-items:center;justify-content:center;padding:40px 32px;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.onboard-slides{position:relative;width:100%;max-width:360px}
.onboard-slide{display:none;text-align:left}
.onboard-slide.active{display:block;animation:fadeUp .4s ease}
.onboard-icon{width:100px;height:100px;margin:0 0 28px}
.onboard-icon svg{width:100%;height:100%}
.onboard-slide h2{font-family:var(--serif);font-size:26px;font-weight:600;margin-bottom:12px}
.onboard-slide p{font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--text2)}
.onboard-dots{display:flex;gap:8px;justify-content:flex-start;margin:28px 0 24px}
.onboard-dots .dot{width:8px;height:8px;border-radius:50%;background:var(--border2);transition:all .3s}
.onboard-dots .dot.active{background:var(--accent);width:24px;border-radius:4px}

#onboard-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.onboard-card{position:relative;background:rgba(5,5,5,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.15);outline:1px solid rgba(255,255,255,0.05);outline-offset:5px;padding:36px 28px;max-width:400px;width:100%;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,0.8),inset 0 0 15px rgba(139,92,246,0.08);border-radius:0}
.onboard-title{font-family:var(--serif);font-size:28px;font-weight:600;margin-bottom:16px;color:var(--text)}
.onboard-body{font-family:var(--serif);font-size:20px;color:var(--text2);margin-bottom:28px;line-height:1.5}
.onboard-buttons{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.onboard-buttons .ctrl-btn{font-size:16px;padding:14px}
.onboard-note{font-family:var(--sans);font-size:13px;color:var(--text3);margin-bottom:0;letter-spacing:0.02em}

/* ═══ TOP BAR ═══ */
.top-bar{display:flex;align-items:center;justify-content:space-between;padding:48px 20px 12px;flex-shrink:0;gap:12px;min-height:0}
.tb-side{flex:1;display:flex;align-items:center;min-width:0}
.tb-left{justify-content:flex-start}
.tb-right{justify-content:flex-end}
.tb-center{flex:0 1 auto;display:flex;align-items:center;justify-content:center;min-width:0}
.home-title{font-family:var(--serif);font-size:26px;font-weight:500;color:var(--text);letter-spacing:0.04em;white-space:nowrap;line-height:1;pointer-events:none}
.top-bar-logo{height:36px;width:auto;opacity:.85;pointer-events:none;display:block;filter:drop-shadow(0 0 0 transparent);transition:opacity .2s}
.top-bar-logo:hover{opacity:1}
.top-bar-icon{height:32px;width:auto;opacity:.85;display:block;filter:drop-shadow(0 2px 8px rgba(139,92,246,0.3));transition:opacity .2s;cursor:pointer}
.top-bar-icon:hover{opacity:1}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{color:var(--accent);font-size:18px}
.brand-name{font-family:var(--serif);font-size:28px;font-weight:700;color:#fff;letter-spacing:1px}
.icon-btn{background:none;border:none;color:var(--text2);padding:8px;cursor:pointer;transition:all .2s}
.icon-btn:active{background:var(--surface2);color:var(--accent)}
.icon-btn svg{width:22px;height:22px}

/* ═══ TAB BAR ═══ */
.tab-bar{position:fixed;bottom:0;left:0;right:0;height:calc(var(--tab-h) + var(--safe-b));padding-bottom:var(--safe-b);background:rgba(0,0,0,0.75);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border2);display:flex;z-index:100}
.author-name{color:var(--accent);font-weight:600;letter-spacing:.02em}
.article-cite{font-family:var(--mono);font-size:10px;color:var(--text3);line-height:1.5;padding-top:10px;border-top:1px solid rgba(255,255,255,.05);margin-top:12px;letter-spacing:.01em}
/* Defensive: tab bar is only inside home/stats/learn/settings HTML. Even if a leak occurs, never show it on exercise / modal screens. */
#s-loading .tab-bar,
#s-onboarding .tab-bar,
#s-training .tab-bar,
#s-presentiment .tab-bar,
#s-ganzfeld .tab-bar,
#s-remoteview .tab-bar,
#s-complete .tab-bar{display:none !important}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;color:var(--text3);cursor:pointer;padding:8px 0;transition:color .2s;font-family:var(--sans)}
.tab svg{width:22px;height:22px}
.tab span{font-size:10px;letter-spacing:.03em}
.tab .tab-icon{font-size:24px;line-height:1;margin-bottom:2px}
.tab.active{color:var(--accent);border-top:2px solid var(--accent);margin-top:-1px}

/* ═══ BUTTONS ═══ */
.btn-primary{display:block;width:100%;max-width:340px;margin:0 auto 12px;padding:16px;background:var(--accent);color:#fff;border:1px solid var(--border);outline:1px solid rgba(139, 92, 246, 0.3);outline-offset:3px;border-radius:var(--r);font-family:var(--sans);font-size:16px;font-weight:600;cursor:pointer;transition:all .15s;letter-spacing:.05em;text-transform:uppercase}
.btn-primary:hover{background:var(--accent2);outline-color:var(--accent)}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{display:block;width:100%;max-width:340px;margin:0 auto;padding:14px;background:none;color:var(--text2);border:none;font-family:var(--sans);font-size:15px;cursor:pointer}
.btn-outline{display:block;width:100%;padding:14px;margin-bottom:8px;background:none;color:var(--text);border:1px solid rgba(255, 255, 255, 0.15);outline:1px solid rgba(255, 255, 255, 0.04);outline-offset:3px;border-radius:var(--r-sm);font-family:var(--sans);font-size:14px;cursor:pointer;transition:all .2s}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);outline-color:rgba(139, 92, 246, 0.2)}
.btn-outline:active{background:var(--surface2)}
.btn-outline.danger{color:var(--error);border-color:var(--error);outline-color:rgba(248, 113, 113, 0.1)}
.btn-outline.danger:hover{color:var(--error);border-color:var(--error);background:var(--error-dim)}

/* ═══ STREAK BANNER ═══ */
.streak-banner{display:flex;align-items:center;justify-content:space-between;margin:8px 20px 16px;padding:14px 18px;background:rgba(5, 5, 5, 0.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255, 255, 255, 0.15);outline:1px solid rgba(255, 255, 255, 0.05);outline-offset:3px;border-radius:var(--r);box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 10px rgba(139, 92, 246, 0.05)}
.streak-left{display:flex;align-items:center;gap:14px}
.streak-flame{width:48px;height:48px;border-radius:0px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:20px;font-weight:700;color:#fff;transition:all .3s;border:1px solid var(--border)}
.streak-flame.fire{box-shadow:0 0 12px rgba(255,107,53,.3);background:linear-gradient(135deg,#FF6B35,#FF4500)}
.streak-flame.blazing{box-shadow:0 0 16px rgba(255,69,0,.4);background:linear-gradient(135deg,#FF4500,#FF2400)}
.streak-flame.inferno{box-shadow:0 0 20px rgba(255,36,0,.5);background:linear-gradient(135deg,#FF2400,#CC0000)}
.streak-flame.supernova{box-shadow:0 0 24px var(--accent-glow);background:linear-gradient(135deg,var(--accent),#E040FB)}
.streak-meta{display:flex;flex-direction:column}
.streak-label{font-size:14px;font-weight:500}
.streak-best{font-size:11px;color:var(--text3)}
.streak-right{display:flex;gap:20px}
.mini-stat{text-align:center}
.ms-val{display:block;font-family:var(--mono);font-size:16px;font-weight:500;color:var(--accent)}
.ms-lbl{display:block;font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}

/* ═══ SECTION LABEL ═══ */
.section-label{padding:0 20px;margin:12px 0 8px;font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;font-weight:500}

/* ═══ PROTOCOL CARDS ═══ */
.proto-cards{padding:0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.proto-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 12px;
  background: 
    radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(139, 92, 246, 0.15) 0%, transparent 60%),
    rgba(6, 6, 8, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(139, 92, 246, 0.22);
  outline: 1px solid transparent;
  outline-offset: 3px;
  border-radius: var(--r);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  text-align: center;
  font-family: var(--sans);
  color: var(--text);
}
.proto-card[data-proto="zener"]{grid-column: 1 / -1; min-height: 242px; padding: 28px 24px 14px; display: flex; flex-direction: column; align-items: center;}
.proto-card[data-proto="zener"] .pc-preview{width: 100%; max-width: 330px; height: 82.5px; display: flex; align-items: center; justify-content: center; margin-top: 10px;}
.proto-card[data-proto="zener"] .pc-info{margin-top: auto; display: flex; flex-direction: column; align-items: center;}
.proto-card[data-proto="zener"] .pc-name{font-size: 22px; font-weight: 600;}
.proto-card[data-proto="zener"] .pc-desc{font-size: 15px; margin-top: 2px;}
.proto-card:hover, .proto-card:focus {
  border-color: rgba(139, 92, 246, 0.6);
  outline-color: rgba(139, 92, 246, 0.2);
  background: 
    radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(139, 92, 246, 0.25) 0%, transparent 55%),
    rgba(10, 10, 12, 0.85);
  box-shadow: 
    0 0 25px rgba(139, 92, 246, 0.12),
    inset 0 0 10px rgba(139, 92, 246, 0.06);
}
.proto-card:active{transform:scale(.98)}
.pc-preview{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:0;border:none;transition:transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.pc-grid-mini{display:grid;grid-template-columns:1fr 1fr;gap:3px;width:28px}
.pc-grid-mini span{width:10px;height:10px;border-radius:0px;opacity:.7}
.pc-ganzfeld{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,rgba(255,100,100,.3),rgba(255,50,50,.1));border:1px solid rgba(255,100,100,.3)}
.pc-info{flex:1;display:flex;flex-direction:column;align-items:center}
.pc-name{font-weight:500;font-size:14px}
.pc-desc{font-size:11px;color:var(--text3);margin-top:4px;line-height:1.2}
.pc-arrow{display:none}

/* ═══ CONFIG ROW ═══ */
.home-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.quick-config-section {
  margin-top: auto;
  padding-top: 14px;
  padding-bottom: 6px;
}
.quick-config-section .config-row {
  padding: 6px 20px;
}
.quick-config-section .cfg-label {
  font-size: 12px;
  color: var(--text3);
}
.quick-config-section .seg-control button {
  padding: 5px 10px;
  font-size: 11px;
}

.config-row{display:flex;align-items:center;justify-content:space-between;padding:10px 20px}
.cfg-label{font-size:13px;color:var(--text2)}
.seg-control{display:flex;border:1px solid var(--border2);border-radius:var(--r-sm);overflow:hidden}
.seg-control button{padding:8px 14px;font-size:12px;font-weight:500;border:none;background:var(--surface);color:var(--text3);cursor:pointer;transition:all .2s;font-family:var(--sans);border-right:1px solid var(--border2)}
.seg-control button:last-child{border-right:none}
.seg-control button.active{background:var(--accent);color:#fff;border-right-color:var(--accent)}

/* ═══ TRAINING HEADER ═══ */
.train-header{display:flex;align-items:center;justify-content:space-between;padding:48px 16px 8px;flex-shrink:0}
.train-stats{display:flex;gap:12px;font-size:14px;color:var(--text2);font-weight:500}
.ts-divider{color:var(--text3)}
.train-score{font-family:var(--mono);font-size:18px;font-weight:500;color:var(--accent)}

/* ═══ GRID ═══ */
.grid-wrap{flex:1; display:flex; flex-direction:column; align-items:stretch; padding:0 16px; min-height:0; overflow:hidden}
.grid-area{flex:6; display:flex; align-items:center; justify-content:center; min-height:0; width:100%; container-type:size}
.bar-area{flex:4; display:flex; align-items:center; justify-content:center; min-height:0; width:100%; padding-bottom:env(safe-area-inset-bottom,0px); container-type:size}
.grid{display:grid; gap:8px; width:min(75cqi, 75cqh); aspect-ratio:1; margin:15cqh 0 0 0; place-content:stretch}
.grid.g4{grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr)}
.grid.g9{grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr)}
.grid.g16{grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr)}
.grid.locked{pointer-events:none;cursor:default}

.tile{aspect-ratio:1;border-radius:var(--r);border:1px solid rgba(255, 255, 255, 0.15);background:rgba(5, 5, 5, 0.7);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s cubic-bezier(0.175, 0.885, 0.32, 1.275);position:relative;overflow:visible}
.tile:hover{border-color:var(--accent);box-shadow:0 0 12px rgba(139, 92, 246, 0.15), inset 0 0 8px rgba(139, 92, 246, 0.1)}
.tile:active{transform:scale(.90); filter: brightness(1.2); }
.tile .t-shape{width:42%;height:42%;opacity:1;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;pointer-events:none}
.tile .t-shape svg{width:100%;height:100%;display:block}
.tile.hit{
  border-color:var(--success) !important;
  background: radial-gradient(circle at center, rgba(52, 211, 153, 0.28) 0%, rgba(52, 211, 153, 0.04) 100%) !important;
  animation: tileHit 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  z-index: 10;
}
.tile.hit .t-shape{
  opacity:1;
  color: var(--success);
  animation: tileShapeHit 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.tile.miss{
  border-color:var(--error) !important;
  background: radial-gradient(circle at center, rgba(248, 113, 113, 0.2) 0%, rgba(248, 113, 113, 0.02) 100%) !important;
  animation: tileMiss .4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
.tile.reveal{border-color:var(--accent);background:var(--accent-dim);animation:tileReveal .6s ease}
@keyframes tileHit{
  0%{transform:scale(1)}
  35%{transform:scale(1.12); box-shadow: 0 0 25px rgba(52, 211, 153, 0.5), inset 0 0 10px rgba(52, 211, 153, 0.3); }
  65%{transform:scale(0.96)}
  100%{transform:scale(1); box-shadow: 0 0 12px rgba(52, 211, 153, 0.2); }
}
@keyframes tileShapeHit {
  0% { transform: scale(1) rotate(0deg); }
  35% { transform: scale(1.45) rotate(15deg); filter: drop-shadow(0 0 8px var(--success)); }
  100% { transform: scale(1.15) rotate(0deg); filter: drop-shadow(0 0 4px var(--success)); }
}
@keyframes tileMiss{
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
@keyframes tileReveal{0%{transform:scale(1)}50%{transform:scale(1.04);box-shadow:0 0 20px var(--accent-glow)}100%{transform:scale(1)}}

.tile.tile-ripple {
  animation: tileRipple 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation-delay: var(--ripple-delay, 0s);
}
@keyframes tileRipple {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
  30% {
    transform: scale(1.04);
    box-shadow: 0 0 15px 2px var(--ripple-color, rgba(139, 92, 246, 0.4));
    border-color: var(--ripple-color, rgba(139, 92, 246, 0.6)) !important;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/*  TRAINING BOTTOM  */
.train-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;width:75cqi;margin:0;padding:0;flex-shrink:0;position:relative;z-index:105}
.train-bottom .progress-track{flex:1;min-width:40px;height:3px;background:rgba(255,255,255,0.1);border-radius:2px;position:relative;overflow:hidden}
.train-bottom .progress-fill{position:absolute;top:0;left:0;bottom:0;width:0%;background:linear-gradient(to right, #FFFFFF, var(--accent));transition:width 0.3s ease}
.reticula-bar{flex:0 0 auto;color:rgba(255,255,255,.28);font-family:var(--mono);font-size:18px;line-height:1;user-select:none;padding:0 4px}
.bar-text-btn{background:none;border:none;color:var(--text);font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;padding:8px 6px;transition:color .2s;flex-shrink:0}
.bar-text-btn:hover{color:var(--accent)}
.bar-text-btn.primary{color:var(--accent);font-weight:600}

.ctrl-btn{display:flex;align-items:center;justify-content:center;gap:6px;background:none;border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:10px 14px;color:var(--text);font-size:12px;font-family:var(--sans);cursor:pointer;transition:all .2s;white-space:nowrap;min-height:40px;flex-shrink:0}
.ctrl-btn:active{background:var(--surface2);border-color:var(--accent)}
#t-rate { filter: blur(5px); cursor: pointer; user-select: none; transition: filter 0.3s ease; }
#t-rate:active, #t-rate:hover { filter: none; }

/* ═══ PRESENTIMENT ═══ */
.pres-stage{flex:1; display:flex; flex-direction:column; align-items:stretch; padding:0 16px; min-height:0; overflow:hidden; gap:0}
.pres-area{flex:6; display:flex; align-items:center; justify-content:center; min-height:0; width:100%; position:relative; container-type:size}
.bar-area{flex:4; display:flex; align-items:center; justify-content:center; min-height:0; width:100%}
.pres-wrap{width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:0; margin:0; position:relative}
.pres-phase{width:100%; flex:1; min-height:0; max-height:380px; display:flex; align-items:center; justify-content:center; position:relative}
.pres-fixation{text-align:center;-webkit-user-select:none;user-select:none;touch-action:none}
.fix-cross{font-size:48px;color:var(--text3);font-weight:200;margin-bottom:16px;font-family:var(--mono)}
.pres-fixation p{font-family:var(--serif);font-size:28px;font-weight:500;color:var(--text2)}
.pres-images{display:flex;width:100%;height:100%;position:absolute;inset:0;align-items:stretch;justify-content:center;gap:0;padding:0}
.pres-img{flex:1;height:100%;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.4s ease;position:relative;overflow:hidden}
.pres-img:hover{transform:none;box-shadow:none}
.pres-img:active{transform:none}
#pres-left{border-right:1px solid rgba(255,255,255,0.04);background:radial-gradient(circle at center, rgba(139, 92, 246, 0.05) 0%, transparent 75%)}
#pres-right{background:radial-gradient(circle at center, rgba(139, 92, 246, 0.05) 0%, transparent 75%)}
#pres-left:hover{background:radial-gradient(circle at center, rgba(139, 92, 246, 0.12) 0%, transparent 80%)}
#pres-right:hover{background:radial-gradient(circle at center, rgba(139, 92, 246, 0.12) 0%, transparent 80%)}
#pres-left.hit, #pres-right.hit{border-color:transparent !important;background:radial-gradient(circle at center, rgba(52, 211, 153, 0.18) 0%, transparent 80%) !important;box-shadow:none !important}
#pres-left.miss, #pres-right.miss{border-color:transparent !important;background:radial-gradient(circle at center, rgba(248, 113, 113, 0.18) 0%, transparent 80%) !important;box-shadow:none !important}
.pres-img .t-shape{width:72px;height:72px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2;transition:all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275)}
.pres-img .t-shape svg{width:100%;height:100%;display:block}

/* Presentiment shape states & animations */
.t-shape.neutral {
  opacity: 1;
  animation: shapeBreathe 3s ease-in-out infinite;
}
@keyframes shapeBreathe {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.35)); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
}

.t-shape.active-hit {
  animation: shapeHitActive 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  opacity: 1 !important;
}
.t-shape.active-hit svg * {
  stroke: var(--success) !important;
}
@keyframes shapeHitActive {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(52, 211, 153, 0)); }
  50% { transform: scale(1.3); filter: drop-shadow(0 0 15px rgba(52, 211, 153, 0.8)); }
  100% { transform: scale(1.1); filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.5)); }
}

.t-shape.active-miss {
  animation: shapeMissActive 0.5s ease-in-out forwards;
}
.t-shape.active-miss svg * {
  stroke: var(--error) !important;
}
@keyframes shapeMissActive {
  0% { transform: scale(1) translateX(0); }
  20%, 60% { transform: scale(0.9) translateX(-5px); filter: drop-shadow(0 0 8px rgba(248, 113, 113, 0.6)); }
  40%, 80% { transform: scale(0.9) translateX(5px); filter: drop-shadow(0 0 8px rgba(248, 113, 113, 0.6)); }
  100% { transform: scale(0.85); opacity: 0.25; filter: drop-shadow(0 0 2px rgba(248, 113, 113, 0.2)); }
}

.pres-or{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);pointer-events:none;z-index:15;background:#0A0A0B;width:38px;height:38px;border-radius:50%;border:1px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--text3);font-family:var(--serif)}
.pres-hint{font-family:var(--serif);margin-top:24px;font-size:26px;font-weight:500;color:var(--text2);text-align:center}

.pendulum-sonar{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;pointer-events:none;z-index:5;opacity:0;transition:opacity 0.3s}
.pendulum-sonar.active{opacity:1}
.pendulum-sonar .sonar-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(139,92,246,0.3);animation:sonarPulse 2s ease-out infinite}
.pendulum-sonar .sonar-ring:nth-child(1){width:60px;height:60px;animation-delay:0s}
.pendulum-sonar .sonar-ring:nth-child(2){width:110px;height:110px;animation-delay:0.5s}
.pendulum-sonar .sonar-ring:nth-child(3){width:160px;height:160px;animation-delay:1s}
.pendulum-sonar .sonar-dot{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:rgba(139,92,246,0.6);animation:sonarDotPulse 1.5s ease-in-out infinite alternate}
@keyframes sonarPulse{0%{opacity:0.6;transform:translate(-50%,-50%) scale(0.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}
@keyframes sonarDotPulse{0%{opacity:0.4;transform:translate(-50%,-50%) scale(1)}100%{opacity:0.8;transform:translate(-50%,-50%) scale(1.4)}}
.pres-fixation.pendulum-mode{touch-action:none;-webkit-user-select:none;user-select:none}
.pres-fixation.pendulum-mode p{color:var(--accent);font-style:italic}
.pendulum-touch-zone{display:none;margin-top:24px;width:100%;max-width:280px;aspect-ratio:2/1;margin-left:auto;margin-right:auto;position:relative;touch-action:none;-webkit-user-select:none;user-select:none}
.pendulum-touch-zone.visible{display:block}
.ptz-inner{width:100%;height:100%;border:1.5px dashed rgba(139,92,246,0.35);border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:radial-gradient(ellipse at center,rgba(139,92,246,0.06) 0%,transparent 70%);transition:border-color 0.3s,background 0.3s}
.pendulum-touch-zone.touching .ptz-inner{border-color:rgba(139,92,246,0.6);background:radial-gradient(ellipse at center,rgba(139,92,246,0.12) 0%,transparent 70%)}
.ptz-fingerprint{color:var(--text3);opacity:0.5;transition:opacity 0.3s}
.pendulum-touch-zone.touching .ptz-fingerprint{opacity:0.8;color:var(--accent)}
.ptz-label{font-family:var(--serif);font-size:15px;font-weight:400;color:var(--text3);letter-spacing:0.02em;transition:color 0.3s}
.pendulum-touch-zone.touching .ptz-label{color:var(--accent)}
.pendulum-sonar{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;pointer-events:none;z-index:5;opacity:0;transition:opacity 0.3s}
.pendulum-sonar.active{opacity:1}

/* ═══ GANZFELD ═══ */
.gf-label{font-family:var(--serif);font-size:28px;font-weight:500}
.gf-timer{font-family:var(--mono);font-size:14px;color:var(--accent)}
.gf-phase{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.gf-prep-content{width:100%;max-width:480px;margin:0 auto;padding:32px 24px calc(24px + var(--safe-b));display:flex;flex-direction:column;gap:24px}
.gf-prep-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 0 0;text-align:center}
.gf-prep-orb{display:none}
.gf-prep-hero h2{font-family:var(--serif);font-size:30px;font-weight:500;color:var(--text);margin:0;line-height:1.1}
.gf-prep-duration{font-family:var(--mono);font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.2em}
.gf-prep-body{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--text2);text-align:center;margin:0;max-width:380px;align-self:center}
.gf-prep-steps{display:flex;flex-direction:column;gap:0}
.gf-prep-steps h4{font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text3);margin:8px 0 6px;padding-left:4px}
.gf-step{display:flex;align-items:flex-start;gap:14px;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,0.04)}
.gf-step:last-child{border-bottom:none}
.gf-step-icon{font-size:18px;color:var(--accent);flex-shrink:0;line-height:1.3;opacity:.9}
.gf-step-text{display:flex;flex-direction:column;gap:4px;font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--text2);min-width:0}
.gf-step-text strong{color:var(--text);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:2px}
.btn-gf-start{display:block;width:100%;max-width:340px;margin:16px auto 0;padding:18px;background:transparent;border:none;font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;cursor:pointer;animation:btnGfPulse 2.4s ease-in-out infinite;transition:transform .15s}
.btn-gf-start:hover{transform:scale(1.03)}
.btn-gf-start:active{transform:scale(.97)}
@keyframes btnGfPulse{0%,100%{color:var(--accent)}50%{color:#fff}}
#gf-canvas{width:100%;height:100%}
/* When Ganzfeld running, the .gf-running-fill class hides the regular header — the overlay handles nav/timer */
body.gf-running #s-ganzfeld > .train-header { display: none; }

.gf-status{position:absolute;left:0;right:0;bottom:max(40px, calc(var(--safe-b) + 24px));font-family:var(--serif);padding:0 24px;font-size:24px;font-weight:500;color:rgba(255,255,255,.9);text-align:center;text-shadow:0 2px 12px rgba(0,0,0,.6);pointer-events:none}
#gf-running{position:relative;flex:1;display:block;background:#000;overflow:hidden}
#gf-running canvas{display:block;width:100%;height:100%;touch-action:none}
.gf-overlay-top{position:absolute;top:max(20px, env(safe-area-inset-top, 0px));left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:rgba(255,255,255,.85);font-family:var(--mono);font-size:14px;text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none}
.gf-overlay-top > *{pointer-events:auto}
.gf-overlay-top button{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.18);color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.gf-overlay-top button:active{background:rgba(0,0,0,.7)}
.gf-setup-tips{background:rgba(255,80,80,.06);border:1px solid rgba(255,80,80,.25);border-radius:var(--r-sm);padding:14px 16px;margin:18px 0 0;font-size:13px;color:var(--text2);line-height:1.5}
.gf-setup-tips h4{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.gf-setup-tips ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.gf-setup-tips li{display:flex;gap:8px;align-items:flex-start}
.gf-setup-tips li::before{content:'·';color:var(--accent);font-weight:700;flex-shrink:0;margin-top:-1px}
.gf-choose-title{font-family:var(--serif);font-size:32px;font-weight:600;margin-bottom:20px;text-align:center}
.gf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:340px;margin:0 auto}
.gf-opt{aspect-ratio:1;border-radius:var(--r);border:2px solid var(--border);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;overflow:hidden}
.gf-opt:active{transform:scale(.95)}
.gf-opt canvas{width:100%;height:100%;border-radius:12px}
.gf-opt.hit{border-color:var(--success)}
.gf-opt.miss{border-color:var(--error)}

/* ═══ REMOTE VIEW ═══ */
.rv-phase{flex:1;display:flex;flex-direction:column;align-items:stretch;padding:16px;min-height:0;overflow:hidden}
.rv-canvas-wrap{flex:1;min-height:0;position:relative;overflow:hidden;background:var(--bg2);margin-bottom:14px}
.rv-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
.rv-bar{display:flex;align-items:center;gap:6px;width:100%;flex-shrink:0}
.rv-colors{display:flex;align-items:center;gap:5px;flex:1;min-width:0}
.rv-color{flex:1;height:44px;min-width:0;border-radius:999px;border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:transform .15s, border-color .15s;padding:0;position:relative}
.rv-color:hover{transform:scale(1.04)}
.rv-color.active{border-color:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 0 10px rgba(255,255,255,.25)}
.rv-target-reveal{width:200px;height:200px;border-radius:var(--r);border:2px solid var(--accent);margin:20px auto}
.rv-target-reveal canvas{width:100%;height:100%;border-radius:12px}
.rv-rank{text-align:center;margin-top:20px}
.rv-rank p{font-family:var(--serif);font-size:28px;font-weight:500;color:var(--text);margin-bottom:12px}
.rv-stars{display:flex;gap:8px;justify-content:center}
.rv-stars.locked{pointer-events:none;opacity:0.8}
.rv-star{font-size:34px;color:var(--border2);cursor:pointer;transition:transform 0.15s ease, color 0.15s ease;padding:0 4px}
.rv-star.active{color:#fbbf24;filter:drop-shadow(0 0 8px rgba(251,191,36,0.4))}
.rv-star.selected{transform:scale(1.15)}
.rv-stars:not(.locked) .rv-star:hover{transform:scale(1.1)}

/* ═══ COMPLETE ═══ */
.complete-wrap{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:32px 24px;text-align:left;max-width:360px;margin:0 auto}
.complete-orb{width:80px;height:80px;border-radius:0px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:32px;font-weight:700;color:#fff;margin:0 0 24px;box-shadow:0 0 40px var(--accent-glow);border:1px solid var(--border)}
.complete-title{font-family:var(--serif);font-size:26px;margin-bottom:24px;text-align:left}
.complete-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;width:100%;max-width:340px;margin:0 0 28px}
.c-stat{text-align:left}
.c-val{display:block;font-family:var(--mono);font-size:18px;font-weight:500;color:var(--accent)}
.c-lbl{display:block;font-size:10px;color:var(--text3);margin-top:2px;text-transform:uppercase;letter-spacing:.05em}
.complete-msg{font-family:var(--serif);font-size:26px;font-weight:500;color:var(--text);margin-bottom:28px;max-width:90%;line-height:1.4}

/* ═══ STATS ═══ */
.stats-scroll,.learn-scroll,.settings-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 20px}
.stats-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}
.sc{background:rgba(5, 5, 5, 0.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255, 255, 255, 0.12);outline:1px solid rgba(255, 255, 255, 0.04);outline-offset:3px;border-radius:var(--r);padding:16px;text-align:center;box-shadow:inset 0 0 10px rgba(139, 92, 246, 0.03)}
.sc-v{display:block;font-family:var(--mono);font-size:24px;font-weight:500;color:var(--accent)}
.sc-l{display:block;font-size:11px;color:var(--text3);margin-top:4px}
.chart-card{background:rgba(5, 5, 5, 0.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255, 255, 255, 0.12);outline:1px solid rgba(255, 255, 255, 0.04);outline-offset:3px;border-radius:var(--r);padding:16px;margin-bottom:14px;box-shadow:inset 0 0 10px rgba(139, 92, 246, 0.03)}
.chart-card h4{font-family:var(--serif);font-size:15px;margin-bottom:12px}
.chart-card canvas{width:100%;height:140px}
.hist-list{display:flex;flex-direction:column;gap:6px}
.hist-item{display:flex;justify-content:space-between;padding:10px 14px;background:rgba(5, 5, 5, 0.5);border:1px solid rgba(255, 255, 255, 0.08);border-radius:var(--r-sm);font-size:12px}
.hi-date{color:var(--text3);font-family:var(--mono);font-size:11px}
.hi-proto{color:var(--text2)}
.hi-rate{font-weight:600;font-family:var(--mono)}
.hi-rate.above{color:var(--success)}
.hi-rate.below{color:var(--error)}

/* ═══ LEARN ═══ */
.article{margin-bottom:28px}
.article h3{font-family:var(--sans);font-size:24px;font-weight:600;color:#fff;margin-bottom:12px}
.article p{font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.6;color:var(--text2);margin-bottom:14px}
.article ul{padding-left:20px;margin:8px 0}
.article li{font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.6;color:var(--text2);margin-bottom:8px}
.code-block{font-family:var(--mono);font-size:13px;background:rgba(5, 5, 5, 0.65);border:1px solid rgba(255, 255, 255, 0.08);outline:1px solid rgba(255, 255, 255, 0.03);outline-offset:3px;padding:10px 14px;border-radius:var(--r-sm);color:var(--accent)}
.ref-link{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s;font-weight:500}
.ref-link:hover{border-bottom-color:var(--accent)}

/* ═══ SETTINGS ═══ */
.set-group{margin-bottom:24px}
.set-group-title{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;font-weight:500}
.set-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;font-size:14px;color:var(--text2)}
.switch{position:relative;width:44px;height:26px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.sw-track{position:absolute;inset:0;background:#2a2a2a;border-radius:26px;transition:.3s;cursor:pointer}
.sw-track::before{content:'';position:absolute;width:20px;height:20px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
input:checked+.sw-track{background:var(--accent)}
input:checked+.sw-track::before{transform:translateX(18px)}
.range{-webkit-appearance:none;width:120px;height:3px;border-radius:2px;background:var(--border);outline:none}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);cursor:pointer}
.set-info{font-family:var(--serif);font-size:22px;font-weight:500;color:var(--text2);line-height:1.4}
.set-row-stack{flex-direction:column;align-items:stretch;gap:8px;padding:8px 0 12px}
.set-row-label{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:.1em;font-weight:500}
.freq-list{display:flex;flex-direction:column;gap:4px}
.freq-opt{display:flex;align-items:center;gap:10px;padding:9px 14px;background:rgba(5,5,5,0.4);border:1px solid var(--border2);border-radius:var(--r-sm);cursor:pointer;transition:all .2s;font-family:var(--sans);color:var(--text3);text-align:left}
.freq-opt:hover{border-color:rgba(139,92,246,0.4);color:var(--text)}
.freq-opt.active{border-color:var(--accent);background:var(--accent-dim);color:var(--text)}
.fo-name{font-size:13px;font-weight:600;min-width:50px;letter-spacing:.05em}
.fo-hz{font-family:var(--mono);font-size:11px;color:var(--text3);min-width:50px;flex:0 0 auto}
.fo-state{font-family:var(--serif);font-size:14px;color:var(--accent);font-style:italic;margin-left:auto;text-align:right}
.freq-opt.active .fo-hz{color:var(--text2)}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ═══ RESPONSIVE ═══ */
@media(min-width:500px){
  .stats-cards{grid-template-columns:repeat(4,1fr)}
}


/* --- CUSTOM RETICULA FRAMES --- */
.custom-frame, .proto-card, .streak-banner {
  --rx: 0deg;
  --ry: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, outline-color 0.2s ease;
}
.custom-frame > *, .proto-card > *, .streak-banner > * {
  transform: translateZ(12px);
}
.custom-frame {
  position: relative;
  background: 
    radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(139, 92, 246, 0.18) 0%, transparent 55%),
    rgba(5, 5, 5, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-sm);
  /* overflow: hidden; */
}
.custom-frame::before,
.custom-frame::after {
  border-radius: inherit;
  content: '';
  position: absolute;
  pointer-events: none;
  top: 6px; left: 6px; right: 6px; bottom: 6px;
  z-index: 5;
}
.custom-frame::before {
  background: 
    linear-gradient(var(--accent), var(--accent)) top left / 12px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top left / 2px 12px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 12px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom right / 2px 12px no-repeat;
}
.custom-frame::after {
  background: 
    linear-gradient(var(--accent), var(--accent)) top right / 12px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) top right / 2px 12px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / 12px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) bottom left / 2px 12px no-repeat;
}

/* ============================================================
   ESP Training — Enhanced Micro-Animations & UI/UX Subtleties
   ============================================================ */

/* --- 1. Hover Preview Lift --- */
.proto-card:hover .pc-preview {
  transform: scale(1.08) translateZ(18px);
}

/* --- 2. Zener Grid Icon Animations --- */
.pc-zener-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.pc-zener-svg .z-shape {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.4s ease;
}
/* Explicit coordinate-based origins to prevent overlapping / stacking in SVGs */
.z-circle {
  transform-origin: 30px 30px;
}
.z-cross {
  transform-origin: 90px 30px;
}
.z-triangle {
  transform-origin: 150px 30px;
}
.z-square {
  transform-origin: 210px 30px;
}
/* Idle Zener breath */
@keyframes zener-idle-pulse {
  0%, 100% { transform: scale(1); opacity: 0.75; }
  50% { transform: scale(1.03); opacity: 1; }
}
.pc-zener-svg {
  animation: zener-idle-pulse 5s ease-in-out infinite;
}
/* Active Hover Zener shapes - gently animated */
.proto-card[data-proto="zener"]:hover .z-circle {
  animation: z-circle-active 2.5s ease-in-out infinite alternate;
}
.proto-card[data-proto="zener"]:hover .z-cross {
  animation: z-cross-active 6s linear infinite;
}
.proto-card[data-proto="zener"]:hover .z-triangle {
  animation: z-triangle-active 3s ease-in-out infinite alternate;
}
.proto-card[data-proto="zener"]:hover .z-square {
  animation: z-square-active 4.5s ease-in-out infinite alternate;
}
@keyframes z-circle-active {
  0% { transform: scale(0.95); filter: drop-shadow(0 0 1px var(--terracotta)); }
  100% { transform: scale(1.15); filter: drop-shadow(0 0 6px var(--terracotta)); }
}
@keyframes z-cross-active {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes z-triangle-active {
  0% { transform: translateY(0); filter: drop-shadow(0 0 1px var(--peri)); }
  100% { transform: translateY(-3px); filter: drop-shadow(0 0 6px var(--peri)); }
}
@keyframes z-square-active {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(10deg); }
}

/* --- 3. Presentiment Icon Wave Animations --- */
.pc-pres-svg {
  width: 50px;
  height: 24px;
  overflow: visible;
}
.pc-pres-svg .pres-path {
  stroke-dasharray: 60;
  stroke-dashoffset: 0;
  transition: stroke 0.4s ease;
}
.pc-pres-svg .pres-pulse {
  stroke-dasharray: 12 36;
  animation: pres-scan 3.5s linear infinite;
}
.pc-pres-svg .pres-stimulus {
  transform-origin: 48px 3px;
  animation: stimulus-glow 3s ease-in-out infinite alternate;
}
@keyframes pres-scan {
  from { stroke-dashoffset: 48; }
  to { stroke-dashoffset: 0; }
}
@keyframes stimulus-glow {
  0%, 100% { transform: scale(1); opacity: 0.6; filter: drop-shadow(0 0 1px var(--error)); }
  50% { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 6px var(--error)); }
}
/* Presentiment Hover State - smoothed out speed */
.proto-card[data-proto="presentiment"]:hover .pres-pulse {
  animation: pres-scan 1.8s linear infinite;
  stroke: #ffffff;
}
.proto-card[data-proto="presentiment"]:hover .pres-stimulus {
  animation: stimulus-burst 2s ease-in-out infinite alternate;
}
@keyframes stimulus-burst {
  0% { transform: scale(1); filter: drop-shadow(0 0 1px var(--error)); }
  100% { transform: scale(1.5); filter: drop-shadow(0 0 10px #FF5252); }
}

/* --- 4. Ganzfeld Glowing Orb Animations --- */
.pc-gf-svg {
  width: 44px;
  height: 44px;
  overflow: visible;
}
.pc-gf-svg .gf-aura-outer {
  transform-origin: 20px 20px;
  animation: gf-breathe-outer 6s ease-in-out infinite;
}
.pc-gf-svg .gf-aura-inner {
  transform-origin: 20px 20px;
  animation: gf-breathe-inner 4.5s ease-in-out infinite alternate;
}
.pc-gf-svg .gf-core {
  transform-origin: 20px 20px;
  animation: gf-core-glow 3s ease-in-out infinite alternate;
}
@keyframes gf-breathe-outer {
  0%, 100% { transform: scale(0.9); opacity: 0.35; }
  50% { transform: scale(1.1); opacity: 0.7; }
}
@keyframes gf-breathe-inner {
  0%, 100% { transform: scale(0.85); opacity: 0.65; }
  50% { transform: scale(1.05); opacity: 0.9; }
}
@keyframes gf-core-glow {
  0%, 100% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; }
}
/* Ganzfeld Hover State - slowed down for calming feel */
.proto-card[data-proto="ganzfeld"]:hover .gf-aura-outer {
  animation: gf-ripple-active 3s ease-in-out infinite alternate;
}
.proto-card[data-proto="ganzfeld"]:hover .gf-aura-inner {
  animation: gf-ripple-inner-active 2.2s ease-in-out infinite alternate;
}
.proto-card[data-proto="ganzfeld"]:hover .gf-core {
  animation: gf-core-active 1.6s ease-in-out infinite alternate;
}
@keyframes gf-ripple-active {
  0% { transform: scale(0.9) rotate(0deg); opacity: 0.75; }
  100% { transform: scale(1.25) rotate(90deg); opacity: 1; filter: saturate(1.3); }
}
@keyframes gf-ripple-inner-active {
  0% { transform: scale(0.8); }
  100% { transform: scale(1.2); }
}
@keyframes gf-core-active {
  0% { transform: scale(0.85); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 1; }
}

/* --- 5. Remote View Wavy Node Animations --- */
.pc-rv-svg {
  width: 44px;
  height: 44px;
  overflow: visible;
}
.pc-rv-svg .rv-wave-bg {
  transition: opacity 0.5s ease;
}
.proto-card[data-proto="remoteview"]:hover .rv-wave-bg {
  opacity: 0.25;
}
.pc-rv-svg .rv-wave-signal {
  stroke-dasharray: 4 22; /* Faint signal pulse segment and gap */
  stroke-dashoffset: 26;
  transition: stroke 0.5s ease, opacity 0.5s ease, stroke-width 0.5s ease;
  animation: rv-signal-pulse 5s linear infinite;
}
@keyframes rv-signal-pulse {
  0% { stroke-dashoffset: 26; }
  100% { stroke-dashoffset: 0; }
}

/* Remote View Hover Wave transmission flow - glows and speeds up slightly */
.proto-card[data-proto="remoteview"]:hover .rv-wave-signal {
  stroke: #FFFFFF;
  opacity: 0.85;
  stroke-width: 1.4px;
  filter: drop-shadow(0 0 3px var(--accent));
  animation: rv-signal-pulse-hover 2.2s linear infinite;
}
@keyframes rv-signal-pulse-hover {
  0% { stroke-dashoffset: 26; }
  100% { stroke-dashoffset: 0; }
}

/* Node glow structures */
.pc-rv-svg .node-a {
  transform-origin: 10px 20px;
}
.pc-rv-svg .node-b {
  transform-origin: 30px 20px;
}
.pc-rv-svg .node-a .node-ring {
  transform-origin: 10px 20px;
  animation: rv-node-glow 6s ease-in-out infinite;
}
.pc-rv-svg .node-b .node-ring {
  transform-origin: 30px 20px;
  animation: rv-node-glow 6s ease-in-out infinite;
  animation-delay: 3s;
}
@keyframes rv-node-glow {
  0%, 100% { transform: scale(1); opacity: 0.25; }
  50% { transform: scale(1.35); opacity: 0.55; }
}

/* Active Hover node glows */
.proto-card[data-proto="remoteview"]:hover .node-a .node-ring {
  animation: rv-node-glow-hover 2.5s ease-in-out infinite alternate;
}
.proto-card[data-proto="remoteview"]:hover .node-b .node-ring {
  animation: rv-node-glow-hover 2.5s ease-in-out infinite alternate;
  animation-delay: 1.25s;
}
@keyframes rv-node-glow-hover {
  0% { transform: scale(1.1); opacity: 0.4; stroke-width: 0.8px; }
  100% { transform: scale(1.6); opacity: 0.9; stroke-width: 1.4px; filter: drop-shadow(0 0 4px var(--accent)); }
}

/* --- 6. Layered Animated Day Streak Flame --- */
.streak-flame {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  cursor: pointer;
  user-select: none;
  transform: scale(var(--flame-scale, 0.6));
  transform-origin: center bottom;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.streak-flame-svg {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(139, 92, 246, 0.3));
  transition: filter 0.4s ease;
  animation: flame-ignite 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.flame-layer {
  transform-origin: 24px 44px;
  transition: fill 0.4s ease, transform 0.4s ease;
}
/* Base Violet Ember Colors (streak 0-2) */
.flame-back {
  fill: rgba(139, 92, 246, 0.18);
  transform: scale(1);
  animation: flame-sway-back 5.5s ease-in-out infinite;
}
.flame-mid {
  fill: rgba(139, 92, 246, 0.42);
  transform: scale(0.65);
  animation: flame-sway-mid 4.2s ease-in-out infinite;
}
.flame-front {
  fill: rgba(255, 255, 255, 0.85);
  transform: scale(0.42);
  animation: flame-sway-front 3s ease-in-out infinite;
}
/* Fire Tier (streak 7+) */
.streak-flame.fire .flame-back { fill: rgba(255, 107, 53, 0.25); }
.streak-flame.fire .flame-mid { fill: rgba(255, 69, 0, 0.55); }
.streak-flame.fire .flame-front { fill: rgba(255, 215, 0, 0.95); }
.streak-flame.fire .streak-flame-svg { filter: drop-shadow(0 0 12px rgba(255, 69, 0, 0.55)); }

/* Blazing Tier (streak 14+) */
.streak-flame.blazing .flame-back { fill: rgba(255, 69, 0, 0.35); }
.streak-flame.blazing .flame-mid { fill: rgba(255, 36, 0, 0.65); }
.streak-flame.blazing .flame-front { fill: rgba(255, 235, 59, 0.95); }
.streak-flame.blazing .streak-flame-svg { filter: drop-shadow(0 0 16px rgba(255, 36, 0, 0.65)); }

/* Inferno Tier (streak 30+) */
.streak-flame.inferno .flame-back { fill: rgba(255, 36, 0, 0.45); }
.streak-flame.inferno .flame-mid { fill: rgba(204, 0, 0, 0.75); }
.streak-flame.inferno .flame-front { fill: rgba(255, 255, 255, 0.98); }
.streak-flame.inferno .streak-flame-svg { filter: drop-shadow(0 0 22px rgba(255, 36, 0, 0.8)); }

/* Supernova Tier (streak 60+) */
.streak-flame.supernova .flame-back { fill: rgba(224, 64, 251, 0.35); }
.streak-flame.supernova .flame-mid { fill: rgba(139, 92, 246, 0.65); }
.streak-flame.supernova .flame-front { fill: rgba(0, 229, 255, 0.98); }
.streak-flame.supernova .streak-flame-svg { filter: drop-shadow(0 0 28px rgba(139, 92, 246, 0.85)); }

/* Sway cycles */
@keyframes flame-sway-back {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50% { transform: scale(1.08) rotate(2deg); }
}
@keyframes flame-sway-mid {
  0%, 100% { transform: scale(0.68) rotate(2.5deg); }
  50% { transform: scale(0.62) rotate(-3deg); }
}
@keyframes flame-sway-front {
  0%, 100% { transform: scale(0.40) rotate(-1.5deg); }
  50% { transform: scale(0.45) rotate(1.5deg); }
}
@keyframes flame-ignite {
  0% { transform: scale(0) rotate(-15deg); opacity: 0; }
  55% { transform: scale(1.2) rotate(8deg); }
  75% { transform: scale(0.92) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Wobble click effect */
.streak-flame.wobble {
  animation: flame-wobble-anim 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes flame-wobble-anim {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.15) rotate(-10deg); }
  50% { transform: scale(0.9) rotate(8deg); }
  75% { transform: scale(1.05) rotate(-4deg); }
}

/* --- 7. Interactive Stats Card Enhancements --- */
.sc {
  cursor: pointer;
  transform-style: preserve-3d;
  user-select: none;
}
.sc.bounce-click {
  animation: card-bounce 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes card-bounce {
  0%, 100% { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1); }
  35% { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(0.97); }
  70% { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.015); }
}


/* Target Reveal on Miss */
.tile.target-reveal {
  background: rgba(52, 211, 153, 0.1) !important;
  border-color: var(--success) !important;
  animation: tileRevealCorrect 1.5s ease-in-out infinite alternate !important;
}
@keyframes tileRevealCorrect {
  0% { transform: scale(1); box-shadow: 0 0 4px rgba(52, 211, 153, 0.15); }
  100% { transform: scale(1.06); box-shadow: 0 0 18px rgba(52, 211, 153, 0.4); }
}

.ctrl-text-btn { background: none; border: none; font-family: var(--sans); font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; padding: 8px 0; transition: all 0.2s; }
#btn-skip { color: var(--text); }
#btn-reset { color: var(--text); }
#btn-skip:hover { color: var(--accent); }
#btn-reset:hover { color: var(--accent); }
#btn-skip { color: var(--accent); }
#btn-reset { color: #FF2A2A; }
#btn-skip:hover { opacity: 0.8; }
#btn-reset:hover { opacity: 0.8; }

.reticula-bar { color: rgba(255,255,255,0.3); font-family: var(--mono); font-size: 16px; line-height: 1; padding: 0 8px; }

/* Resonance Ambient Screen Vignette */
.resonance-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2; /* Behind the grid/buttons, in front of WebGL background morphs */
  opacity: 0;
  background: radial-gradient(circle, transparent 45%, rgba(139, 92, 246, 0.05) 75%, rgba(139, 92, 246, 0.15) 100%);
  transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.resonance-overlay.active {
  opacity: 1;
  animation: resonance-vignette-pulse 4s ease-in-out infinite alternate;
}
@keyframes resonance-vignette-pulse {
  0% {
    background: radial-gradient(circle, transparent 48%, rgba(139, 92, 246, 0.04) 78%, rgba(139, 92, 246, 0.12) 100%);
  }
  100% {
    background: radial-gradient(circle, transparent 40%, rgba(139, 92, 246, 0.08) 72%, rgba(139, 92, 246, 0.22) 100%);
  }
}

/* Resonance Badge styling - refined, sharp-edged reticula styling */
.resonance-badge {
  position: absolute;
  top: 96px;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: rgba(5, 5, 5, 0.85);
  border: 1px solid rgba(139, 92, 246, 0.35);
  outline: 1px solid rgba(139, 92, 246, 0.08);
  outline-offset: 4px;
  color: #FFFFFF;
  text-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
  padding: 8px 18px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0px; /* Sharp corners to match ESP design style! */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), inset 0 0 10px rgba(139, 92, 246, 0.06);
  z-index: 100;
}
.resonance-badge.active {
  opacity: 1 !important;
  transform: translateX(-50%) scale(1);
  animation: resonance-badge-pulse 2s ease-in-out infinite alternate;
}
@keyframes resonance-badge-pulse {
  0% {
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), inset 0 0 10px rgba(139, 92, 246, 0.06);
    border-color: rgba(139, 92, 246, 0.35);
    outline-color: rgba(139, 92, 246, 0.08);
  }
  100% {
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.2), inset 0 0 15px rgba(139, 92, 246, 0.12);
    border-color: var(--accent);
    outline-color: rgba(139, 92, 246, 0.25);
  }
}

/* ═══════════════════════════════════════════
   I18N — Language picker + per-lang fonts + RTL
   ═══════════════════════════════════════════ */
.lang-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;padding:10px 36px 10px 14px;background:rgba(5,5,5,0.4);border:1px solid var(--border2);border-radius:var(--r-sm);color:var(--text);font-family:var(--sans);font-size:14px;cursor:pointer;transition:border-color .2s;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b5cf6'><path d='M7 10l5 5 5-5z'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:18px}
.lang-select:hover,.lang-select:focus{border-color:var(--accent);outline:none}
.lang-select option{background:#161618;color:var(--text);padding:8px;font-family:var(--sans)}
html[dir="rtl"] .lang-select{background-position:left 12px center;padding:10px 14px 10px 36px}

/* Per-language font fallbacks (non-Latin scripts) */
html[lang="zh"] body, html[lang="zh"] .font-serif, html[lang="zh"] .set-info{font-family:'Noto Sans SC','Cormorant Garamond',Georgia,serif}
html[lang="ja"] body, html[lang="ja"] .font-serif, html[lang="ja"] .set-info{font-family:'Noto Sans JP','Cormorant Garamond',Georgia,serif}
html[lang="hi"] body, html[lang="hi"] .font-serif, html[lang="hi"] .set-info{font-family:'Noto Sans Devanagari','Cormorant Garamond',Georgia,serif}
html[lang="ar"] body, html[lang="ar"] .font-serif, html[lang="ar"] .set-info{font-family:'Noto Sans Arabic','Cormorant Garamond',Georgia,serif}
html[lang="ru"] body, html[lang="ru"] .font-serif, html[lang="ru"] .set-info{font-family:'Noto Sans','Cormorant Garamond',Georgia,serif}

/* RTL adjustments (Arabic) */
html[dir="rtl"] .tb-left{order:3}
html[dir="rtl"] .tb-center{order:2}
html[dir="rtl"] .tb-right{order:1}
html[dir="rtl"] .pc-arrow{transform:scaleX(-1)}
html[dir="rtl"] .sw-track::before{left:auto;right:3px}
html[dir="rtl"] input:checked+.sw-track::before{transform:translateX(-18px)}
html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .config-row{text-align:right}
html[dir="rtl"] .article{text-align:right}
html[dir="rtl"] .freq-opt{flex-direction:row-reverse}


/* --- Guided Tour spotlight and popover styles --- */
.tour-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: transparent;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.tour-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.tour-highlight {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8), 0 0 15px rgba(139, 92, 246, 0.5);
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  border: 2px solid var(--accent);
}
.tour-tooltip {
  position: absolute;
  background: #161618;
  border: 1px solid rgba(255, 255, 255, 0.15);
  outline: 1px solid rgba(255, 255, 255, 0.05);
  outline-offset: 3px;
  border-radius: 12px;
  padding: 20px;
  width: 290px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.8), inset 0 0 10px rgba(139, 92, 246, 0.05);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tour-tooltip h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--accent);
  margin: 0;
}
.tour-tooltip p {
  font-size: 14px;
  color: var(--text2);
  margin: 0;
  line-height: 1.45;
}
.tour-tooltip-btns {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}
.tour-tooltip-btns button {
  padding: 8px 16px;
  font-size: 12px;
}