/* ═══════════════════════════════════════════
   MULTIVERSE HALLWAY — vibe theming + DEI support
   ═══════════════════════════════════════════ */

/* ── RESET / BASE ── */
:root{
  --bg:#050505; --panel:#0a0a0f; --ink:#e8e8ee; --muted:#7a7a8c;
  --accent:#00ffaa; --glow:rgba(0,255,170,.35);
  --panel-glass:rgba(12,12,20,.72);
  --card-bg:rgba(18,18,30,.75); --card-border:rgba(255,255,255,.07);
  --shadow:0 0 18px rgba(0,255,170,.12);
}
[data-theme="neon"]{
  --bg:#02020a; --panel:#060614; --ink:#ffffff; --muted:#a0a0c0;
  --accent:#00ffd5; --glow:rgba(0,255,213,.25);
  --panel-glass:rgba(8,8,24,.72); --card-bg:rgba(16,16,40,.78);
  --card-border:rgba(255,255,255,.08); --shadow:0 0 12px rgba(0,255,213,.10);
}
[data-theme="satire"]{
  --bg:#100a02; --panel:#1c1206; --ink:#ffecd2; --muted:#d0a882;
  --accent:#ffb703; --glow:rgba(255,183,3,.3);
  --panel-glass:rgba(32,20,8,.78); --card-bg:rgba(40,26,10,.8);
  --card-border:rgba(255,200,100,.10); --shadow:0 0 14px rgba(255,160,0,.12);
}
[data-theme="flicker"]{
  --bg:#080308; --panel:#14080e; --ink:#f2e6ff; --muted:#d0b8e0;
  --accent:#ff2bd6; --glow:rgba(255,43,214,.25);
  --panel-glass:rgba(30,10,26,.78); --card-bg:rgba(40,16,34,.82);
  --card-border:rgba(255,120,220,.10); --shadow:0 0 12px rgba(255,43,214,.10);
}
[data-theme="neon-drkb"]{
  --bg:#0a0a02; --panel:#1a1406; --ink:#ffd6a0; --muted:#c4a882;
  --accent:#ff8c00; --glow:rgba(255,140,0,.3);
  --panel-glass:rgba(26,20,6,.78); --card-bg:rgba(40,32,10,.8);
  --card-border:rgba(255,160,60,.10); --shadow:0 0 14px rgba(255,140,0,.12);
}[data-theme="neon-PAM"]{
  --bg:#0a0202; --panel:#1a0606; --ink:#ffc0b0; --muted:#e0a090;
  --accent:#ff3030; --glow:rgba(255,48,48,.3);
  --panel-glass:rgba(26,6,6,.78); --card-bg:rgba(40,10,10,.8);
  --card-border:rgba(255,80,60,.10); --shadow:0 0 14px rgba(255,48,48,.12);
}[data-theme="neo-Dab"]{
  --bg:#06020a; --panel:#0e0614; --ink:#e0ffc0; --muted:#a0d090;
  --accent:#39ff14; --glow:rgba(57,255,20,.3);
  --panel-glass:rgba(14,6,20,.78); --card-bg:rgba(22,10,34,.8);
  --card-border:rgba(57,255,20,.10); --shadow:0 0 14px rgba(57,255,20,.12);
}[data-theme="satire-drkb"]{
  --bg:#0a0802; --panel:#1a1206; --ink:#ffd6a0; --muted:#c4a882;
  --accent:#ff8c00; --glow:rgba(255,140,0,.3);
  --panel-glass:rgba(26,18,6,.78); --card-bg:rgba(40,28,10,.8);
  --card-border:rgba(255,160,60,.10); --shadow:0 0 14px rgba(255,140,0,.12);
}[data-theme="satire-PAM"]{
  --bg:#0a0202; --panel:#1a0606; --ink:#ffc0b0; --muted:#e0a090;
  --accent:#ff3030; --glow:rgba(255,48,48,.3);
  --panel-glass:rgba(26,6,6,.78); --card-bg:rgba(40,10,10,.8);
  --card-border:rgba(255,80,60,.10); --shadow:0 0 14px rgba(255,48,48,.12);
}[data-theme="satire-Dab"]{
  --bg:#06020a; --panel:#0e0614; --ink:#e0ffc0; --muted:#a0d090;
  --accent:#39ff14; --glow:rgba(57,255,20,.3);
  --panel-glass:rgba(14,6,20,.78); --card-bg:rgba(22,10,34,.8);
  --card-border:rgba(57,255,20,.10); --shadow:0 0 14px rgba(57,255,20,.12);
}[data-theme="flicker-red"]{
  --bg:#050505; --panel:#0a0a0a; --ink:#ff4d4d; --muted:#ff8080;
  --accent:#ff4d4d; --glow:rgba(255,77,77,.28);
  --panel-glass:rgba(10,0,0,.78); --card-bg:rgba(20,10,10,.8);
  --card-border:rgba(255,77,77,.10); --shadow:0 0 14px rgba(255,77,77,.12);
}[data-theme="flicker-red-drkb"]{
  --bg:#0a0a02; --panel:#1a1406; --ink:#ff8080; --muted:#ffb0a0;
  --accent:#ff4d4d; --glow:rgba(255,77,77,.3);
  --panel-glass:rgba(26,20,6,.78); --card-bg:rgba(40,32,10,.8);
  --card-border:rgba(255,120,80,.10); --shadow:0 0 14px rgba(255,77,77,.12);
}[data-theme="flicker-red-PAM"]{
  --bg:#0a0202; --panel:#1a0606; --ink:#ffb0b0; --muted:#ffc0c0;
  --accent:#ff4d4d; --glow:rgba(255,77,77,.3);
  --panel-glass:rgba(26,6,6,.78); --card-bg:rgba(40,10,10,.8);
  --card-border:rgba(255,80,80,.10); --shadow:0 0 14px rgba(255,77,77,.12);
}[data-theme="flicker-red-Dab"]{
  --bg:#06020a; --panel:#0e0614; --ink:#e0ffc0; --muted:#a0d090;
  --accent:#39ff14; --glow:rgba(57,255,20,.3);
  --panel-glass:rgba(14,6,20,.78); --card-bg:rgba(22,10,34,.8);
  --card-border:rgba(57,255,20,.10); --shadow:0 0 14px rgba(57,255,20,.12);
}[data-theme="neonvomit"]{
  --bg:#000; --panel:#0a0a14; --ink:#0ff; --muted:#80e0ff;
  --accent:#f0f; --glow:rgba(255,0,255,.28);
  --panel-glass:rgba(10,10,20,.78); --card-bg:rgba(20,20,40,.8);
  --card-border:rgba(0,255,255,.10); --shadow:0 0 14px rgba(255,0,255,.12);
}[data-theme="neonvomit-drkb"]{
  --bg:#0a0a02; --panel:#1a1406; --ink:#80e0ff; --muted:#a0f0ff;
  --accent:#f0f; --glow:rgba(255,0,255,.3);
  --panel-glass:rgba(26,20,6,.78); --card-bg:rgba(40,32,10,.8);
  --card-border:rgba(0,255,255,.10); --shadow:0 0 14px rgba(255,0,255,.12);
}[data-theme="neonvomit-PAM"]{
  --bg:#0a0202; --panel:#1a0606; --ink:#ffb0ff; --muted:#ffc0ff;
  --accent:#f0f; --glow:rgba(255,0,255,.3);
  --panel-glass:rgba(26,6,6,.78); --card-bg:rgba(40,10,10,.8);
  --card-border:rgba(255,0,255,.10); --shadow:0 0 14px rgba(255,0,255,.12);
}[data-theme="neonvomit-Dab"]{
  --bg:#06020a; --panel:#0e0614; --ink:#e0ffc0; --muted:#a0d090;
  --accent:#39ff14; --glow:rgba(57,255,20,.3);
  --panel-glass:rgba(14,6,20,.78); --card-bg:rgba(22,10,34,.8);
  --card-border:rgba(57,255,20,.10); --shadow:0 0 14px rgba(57,255,20,.12);
}[data-theme="darksatire"]{
  --bg:#111; --panel:#1a1a1a; --ink:#ffff00; --muted:#e0e000;
  --accent:#ffff00; --glow:rgba(255,255,0,.25);
  --panel-glass:rgba(17,17,17,.78); --card-bg:rgba(30,30,30,.8);
  --card-border:rgba(255,255,0,.10); --shadow:0 0 14px rgba(255,255,0,.12);
}[data-theme="darksatire-drkb"]{
  --bg:#0a0802; --panel:#1a1206; --ink:#ffd6a0; --muted:#c4a882;
  --accent:#ff8c00; --glow:rgba(255,140,0,.3);
  --panel-glass:rgba(26,18,6,.78); --card-bg:rgba(40,28,10,.8);
  --card-border:rgba(255,160,60,.10); --shadow:0 0 14px rgba(255,140,0,.12);
}[data-theme="darksatire-PAM"]{
  --bg:#0a0202; --panel:#1a0606; --ink:#ffc0b0; --muted:#e0a090;
  --accent:#ff3030; --glow:rgba(255,48,48,.3);
  --panel-glass:rgba(26,6,6,.78); --card-bg:rgba(40,10,10,.8);
  --card-border:rgba(255,80,60,.10); --shadow:0 0 14px rgba(255,48,48,.12);
}[data-theme="darksatire-Dab"]{
  --bg:#06020a; --panel:#0e0614; --ink:#e0ffc0; --muted:#a0d090;
  --accent:#39ff14; --glow:rgba(57,255,20,.3);
  --panel-glass:rgba(14,6,20,.78); --card-bg:rgba(22,10,34,.8);
  --card-border:rgba(57,255,20,.10); --shadow:0 0 14px rgba(57,255,20,.12);
}[data-theme="voidterminal"]{
  --bg:#000; --panel:#080808; --ink:#ff3333; --muted:#aa4444;
  --accent:#ff0000; --glow:rgba(255,0,0,.25);
  --panel-glass:rgba(8,0,0,.8); --card-bg:rgba(16,8,8,.85);
  --card-border:rgba(255,40,40,.08); --shadow:0 0 14px rgba(255,0,0,.10);
}[data-theme="voidterminal-drkb"]{
  --bg:#0a0a02; --panel:#1a1406; --ink:#ffd6a0; --muted:#c4a882;
  --accent:#ff8c00; --glow:rgba(255,140,0,.3);
  --panel-glass:rgba(26,20,6,.78); --card-bg:rgba(40,32,10,.8);
  --card-border:rgba(255,160,60,.10); --shadow:0 0 14px rgba(255,140,0,.12);
}[data-theme="voidterminal-PAM"]{
  --bg:#0a0202; --panel:#1a0606; --ink:#ffc0b0; --muted:#e0a090;
  --accent:#ff3030; --glow:rgba(255,48,48,.3);
  --panel-glass:rgba(26,6,6,.78); --card-bg:rgba(40,10,10,.8);
  --card-border:rgba(255,80,60,.10); --shadow:0 0 14px rgba(255,48,48,.12);
}[data-theme="voidterminal-Dab"]{
  --bg:#06020a; --panel:#0e0614; --ink:#e0ffc0; --muted:#a0d090;
  --accent:#39ff14; --glow:rgba(57,255,20,.3);
  --panel-glass:rgba(14,6,20,.78); --card-bg:rgba(22,10,34,.8);
  --card-border:rgba(57,255,20,.10); --shadow:0 0 14px rgba(57,255,20,.12);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
.bg-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:48px 48px;
}

/* ── FLOATING RABBIT-HOLE ── */
.rabbit-hole{
  position:fixed;left:50%;transform:translateX(-50%);z-index:8;
  display:flex;gap:12px;align-items:flex-start;justify-content:center;
  padding:8px 12px;border-radius:999px;max-width:96vw;
  background:var(--panel-glass);
  border:1px solid var(--card-border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(10px) saturate(140%);
}
.rabbit-hole.top{top:10px}
.rabbit-hole.bottom{bottom:10px}
.brand-stack{display:flex;flex-direction:column;align-items:center;gap:0;line-height:1.1;flex-shrink:0}
.brand-stack .tag{white-space:nowrap;font-size:11px;color:var(--ink);letter-spacing:.1em;padding:0 4px}
.nav-right{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;gap:6px;align-items:center;justify-content:end;flex-shrink:1;min-width:0}
.nav-slot{display:flex;align-items:center;justify-content:center;text-align:center}
.theme-picker{grid-column:auto;grid-row:auto;display:flex;align-items:center;justify-content:center}
.rabbit-hole a{
  color:var(--ink);text-decoration:none;font-size:11px;padding:4px 8px;border-radius:999px;
  border:1px solid var(--card-border);background:rgba(255,255,255,.03);
  transition:transform .15s ease,background .2s ease,border-color .2s ease;
  flex-shrink:0;white-space:nowrap;
}
.rabbit-hole a:hover{background:rgba(255,255,255,.08);border-color:var(--accent)}
.theme-picker{padding:4px 6px;font-size:10px}
.theme-picker label{color:var(--muted);font-size:10px;letter-spacing:.1em}
.theme-picker select{
  background:transparent;color:var(--ink);border:none;outline:none;font:inherit;cursor:pointer;
  font-size:10px;
}
.theme-picker option{
  background:var(--panel);
  color:var(--ink);
}
.theme-picker option:hover,
.theme-picker option:checked{
  background:var(--accent);
  color:var(--bg);
}

/* ── HALLWAY LAYOUT ── */
.hallway{
  position:relative;z-index:1;
  max-width:1100px;margin:0 auto;
  padding:110px 22px 80px;
}
.grid{
  display:grid;gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  align-content:start;
}
.card{
  position:relative;min-height:180px;padding:18px;border-radius:14px;
  background:var(--card-bg);border:1px solid var(--card-border);
  box-shadow:var(--shadow);overflow:hidden;cursor:pointer;
  transition:transform .25s ease,border-color .25s ease;
  transform-style:preserve-3d;perspective:800px;
}
.card:hover{transform:translateY(-4px);border-color:var(--accent)}
.card .front,.card .back{backface-visibility:hidden}
.card .back{display:none}
.card.flipped .front{display:none}
.card.flipped .back{display:block}
.card .icon{font-size:26px;margin-bottom:10px;filter:drop-shadow(0 0 8px var(--glow))}
.card h2{margin:0 0 6px;font-size:16px;color:var(--ink)}
.card p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.card .meta{margin-top:10px;font-size:11px;color:var(--muted);letter-spacing:.08em}

/* ── AMBIENT DRIFT (respects reduced motion) ── */
@media (prefers-reduced-motion: no-preference){
  .card{animation:drift 10s ease-in-out infinite alternate}
  .card:nth-child(2){animation-duration:12s;animation-delay:-2s}
  .card:nth-child(3){animation-duration:11s;animation-delay:-4s}
  .card:nth-child(4){animation-duration:13s;animation-delay:-6s}
  .card:nth-child(5){animation-duration:9s;animation-delay:-1s}
  @keyframes drift{
    0%{transform:translateY(0)}
    50%{transform:translateY(-6px)}
    100%{transform:translateY(3px)}
  }
}
@media (prefers-reduced-motion: reduce){
  .card{animation:none !important}
}

.footer{
  position:fixed;bottom:14px;right:18px;z-index:5;
  font-size:11px;color:var(--muted);letter-spacing:.18em;
}
.debug-log{
  position:fixed;bottom:40px;left:18px;z-index:6;
  font-size:11px;color:var(--muted);opacity:.8;
}

/* ── FOCUS PANEL ── */
.focus-panel{
  position:relative;z-index:1;
  max-width:900px;margin:0 auto;
  padding:110px 22px 80px;
}
.focus-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-template-rows:repeat(5,auto);
  gap:12px;
}
.fp-msg{
  background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:8px;padding:10px 14px;font-size:12px;
  color:var(--muted);letter-spacing:.08em;
}
.fp-screen{
  background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:64px;min-height:200px;
}
.fp-attr{
  background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:8px;padding:10px 14px;font-size:11px;
  color:var(--muted);display:flex;align-items:center;
}
.fp-btn{
  background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:8px;color:var(--ink);font:inherit;font-size:12px;
  cursor:pointer;padding:10px;letter-spacing:.1em;
  transition:border-color .2s;width:100%;
}
.fp-btn:hover{border-color:var(--accent)}
.fp-emoji{display:flex;align-items:center;justify-content:center;font-size:20px}