/* ===== Themes (4 options) ===== */
:root{
  --mono: ui-monospace, "JetBrainsMono NF", "Fira Code", "SFMono-Regular",
          Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --radius: 12px;
}
/* ===== Kali Dark Theme ===== */
html[data-theme="kali-dark"] {
  --syntax-blue:  #45b1d5;  /* Kali Bright Blue */
  --blue-strong:  #32acee;  /* Normal Blue for hover/underline */
  --header-green: #32acee;  /* Kali Green */
}

/* ===== Dracula Theme ===== */
html[data-theme="dracula"] {
  --syntax-blue:  #58A6FF;  /* Dracula Cyan */
  --blue-strong:  #EF2929;  /* Dracula Purple accent */
  --header-green: #23a944;  /* Dracula Green */
}
html[data-theme="kali-dark"]{
  --bg:#0F111A; --panel:#14171F; --panel2:#0F111A; --fg:#FFFFFF; --muted:#8da1b2;
  --acc1:#3aa6ff; --acc2:#c40606; --acc3:#4E9A06; --err:#EF2929; --link:#729FCF;
  --divider:#12202a; --shadow:rgba(0,0,0,.35);--glow:0 0 20px rgba(52, 101, 164, .35);
}
html[data-theme="dracula"]{
  --bg:#282a36; --panel:#2f3241; --panel2:#1e1f29; --fg:#f8f8f2; --muted:#b6b6c1;
  --acc1:#bd93f9; --acc2:#c40606; --acc3:#50fa7b; --err:#ff5555; --link:#8be9fd;
  --divider:#3a3d4f; --shadow:rgba(0,0,0,.35);
}


/* ===== Base layout ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:linear-gradient(180deg, var(--bg) 0%, #06080a 120%);
  color:var(--fg); font-family:var(--mono); overflow:hidden;
}

/* Header */
.site-header{
  position:fixed; left:0; right:0; top:0; height:66px; z-index:6;
  display:flex; align-items:center; padding:0 18px;
  border-bottom:1px solid var(--divider);
  background: linear-gradient(180deg, color-mix(in oklab, var(--panel), transparent 40%), transparent);
  backdrop-filter: blur(4px);
}
.brand-name{ margin:0; font-size:28px; font-weight:600; letter-spacing:.02em; color:var(--header-green); text-shadow:0 0 8px rgba(0, 166, 255, 0.15); }
.brand-role{ margin:0; margin-top:2px; color:var(--muted); font-size:11px; letter-spacing:.12em; text-transform:uppercase; }

/* Bottom helpers */
.shell-tag{
  position:fixed; left:28px; bottom:24px; z-index:5; color:var(--muted);
  font-weight:300; letter-spacing:.02em; font-size:14px; user-select:none;
}
.dock{
  position:fixed; right:12px; bottom:10px; z-index:5; display:flex; align-items:center;
  background:rgba(10,10,10,.18); border:1px solid var(--divider); border-radius:999px;
  padding:4px 6px; backdrop-filter: blur(6px);
}
.dock select{
  appearance:none; border:1px solid var(--divider); background:var(--panel); color:var(--fg);
  border-radius:999px; padding:4px 20px 4px 8px; font:600 11px/1 var(--mono);
}

/* Grid */
.app{
  display:grid; height:100%;
  grid-template-columns: 44% 1fr;
  grid-template-rows: 1fr 28px;
  gap:18px; padding:18px; padding-top:96px;
}
@media (max-width:1100px){ .app{ grid-template-columns: 42% 1fr; } }
@media (max-width:900px){ .app{ grid-template-columns:1fr; grid-template-rows: 46vh 1fr 28px; padding-top:86px; } }

/* ===== Badge (static ID) ===== */
.badge{
  position:relative; background:radial-gradient(120% 120% at 10% 10%, var(--panel) 0%, var(--panel2) 70%);
  border:1px solid var(--divider); border-radius:12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 40px var(--shadow), inset 0 0 0 1px rgba(255,255,255,.03);
  user-select:none;
}
.lanyard{
  position:absolute; top:-26px; left:50%; width:12px; height:110px; transform:translateX(-50%);
  background:linear-gradient(var(--panel), var(--panel2)); border-radius:6px; border:1px solid var(--divider);
}
.card{
  position:relative; width:180px; height:260px;
  background:var(--panel2); border:1px solid var(--divider); border-radius:10px;
  box-shadow: 0 14px 50px var(--shadow), 0 0 22px rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:center; padding:10px;
}
.pfp{ width:100%; height:100%; border-radius:8px; overflow:hidden; position:relative; }
.pfp img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.9) contrast(1.05) }

/* overlay meta on the card */
.id-meta{
  position:absolute; left:12px; bottom:12px; right:12px;
  background: linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.45));
  padding:10px 10px 8px; border-radius:8px;
}
.id-name{ font-weight:800; letter-spacing:.3px; font-size:16px; color:#dffbe8; text-shadow:0 0 8px rgba(0,0,0,.6); }
.id-role{ margin-top:4px; font-size:11px; text-transform:uppercase; letter-spacing:.18em; color: #bfe8cc; }

.play-hint{
  position:absolute; right:12px; bottom:10px; z-index:2; color:var(--acc2);
  font-size:11px; opacity:.9; background:rgba(10,10,10,.18);
  border:1px solid var(--divider); border-radius:999px; padding:4px 10px; text-align:right;
}

/* ===== Terminal ===== */
.terminal{
  background:var(--panel2); border:1px solid var(--divider); border-radius:8px;
  display:flex; flex-direction:column; overflow:hidden; min-width:0;
  box-shadow: 0 10px 40px var(--shadow);
}
.term-header{ height:10px; border-bottom:1px solid var(--divider); background:var(--panel); }

/* quick links — blue syntax */
.menu{
  display:flex; flex-wrap:wrap; gap:10px; padding:8px 12px; border-bottom:1px solid var(--divider);
}
.menu a{ color:var(--syntax-blue); text-decoration:none; font-size:14px; position:relative; padding-bottom:2px; }
.menu a::after{ content:""; position:absolute; left:0; right:100%; bottom:-1px; height:2px; background:var(--blue-strong); transition:right .25s ease; }
.menu a:hover::after{ right:0; }

/* terminal IO */
.term-body{
  flex:1; padding:14px; overflow:auto; font-size:13px; line-height:1.55;
  scrollbar-width:thin; scrollbar-color:var(--divider) transparent;
}
.term-body::-webkit-scrollbar{width:10px}
.term-body::-webkit-scrollbar-thumb{background:var(--divider); border-radius:8px}

.prompt-block{ display:flex; flex-direction:column; gap:2px; }
.prompt-line{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ps1-top{ color:#bcd0de; }
.ps1-top .user{ color:#ff6b6b; }
.ps1-top .host{ color:var(--acc2); }
.ps1-top .path{ color:var(--acc3); }
.ps1-bottom{ color:#a9b8c2; display:flex; align-items:center; gap:8px; }
.input{ flex:1; outline:none; border:none; background:transparent; color:var(--fg); font:inherit; min-width:60px; caret-color:var(--acc2); }

/* outputs */
.output{ white-space:pre-wrap }
.output a{ color:var(--link); text-decoration:none; border-bottom:1px dotted rgba(88,166,255,.45) }
.output a:hover{ border-bottom-color:var(--link) }

/* fixed blue syntax for commands */
.cmd-syntax{ color:var(--syntax-blue); font-weight:700 }

.err{ color:#ff6b6b }
.success{ color:var(--acc3) }
.muted{ color:var(--muted) }

.footer{
  display:flex; align-items:center; justify-content:space-between;
  color:var(--muted); font-size:12px; letter-spacing:.03em; padding:6px 10px;
  border-top:1px solid var(--divider); background:var(--panel);
}
.kbd{ display:inline-block; border:1px solid var(--divider); border-bottom-width:2px; padding:1px 6px; border-radius:6px; color:var(--muted); background:var(--panel2); font-size:11px }

/* selection */
::selection{ background:rgba(88,166,255,.25); color:var(--fg); }


/* =========================
   ORIENTATION-BASED LAYOUT
   ========================= */

/* use a CSS variable for header height so math is easy */
:root { --header-h: 66px; }

/* Default (desktop/laptop): keep your existing two-column grid */
.app{
  /* keep your existing grid values here */
  height: 100dvh;               /* use dynamic viewport so mobile bars don't break height */
  padding-top: calc(var(--header-h) + 18px);
}

/* --- Portrait: show ONLY header + terminal --- */
@media (orientation: portrait) {
  /* full-height canvas using dynamic viewport */
  html, body { height: 100dvh; }
  body { overflow: hidden; } /* terminal body will scroll, not page */

  /* hide the badge/ID card area entirely */
  .badge { display: none !important; }

  /* single column: terminal fills the screen below header */
  .app{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    gap: 0;
    padding: 12px; /* comfy side padding */
    padding-top: calc(var(--header-h) + 8px);
    height: 100dvh;
  }

  /* terminal stretches to available height; its own body scrolls */
  .terminal{
    height: calc(100dvh - var(--header-h) - 24px); /* 24 = top/bottom padding sum */
    min-height: 0; /* allow flex children to shrink */
  }

  /* keep quick menu visible but compact */
  .menu{ gap: 8px; padding: 8px 10px; }

  /* ensure inner log scrolls nicely on small screens */
  .term-body{
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* --- Landscape: force desktop layout (even on phones/tablets) --- */
@media (orientation: landscape) {
  .badge { display: flex; } /* re-show badge */
  .app{
    grid-template-columns: 44% 1fr;  /* your desktop proportions */
    grid-template-rows: 1fr;
    gap: 18px;
    padding: 18px;
    padding-top: calc(var(--header-h) + 18px);
    height: 100dvh;
  }
}

/* optional: tiny devices in landscape — give terminal a minimum width feel */
@media (orientation: landscape) and (max-height: 420px) {
  .menu a{ font-size: 13px; }
  .term-body{ font-size: 14px; }
}