/* ============================================================
   pikammmmm — interactive terminal portfolio
   Windows Terminal aesthetic · Campbell palette
   ============================================================ */
:root{
  --bg:#0c0c0c;
  --bar:#1b1b1b;
  --fg:#ffffff;
  --white:#ffffff;
  --dim:#9a9a9a;
  --dim2:#bdbdbd;
  --cmd:#f2e9b8;        /* PSReadLine command yellow */
  --accent:#ff4d5a;     /* crimson brand accent */
  --accent-soft:#ff8a93;
  --blue:#3b8eea;
  --cyan:#56b6c2;
  --green:#39d353;
  --ok:#13a10e;
  --yellow:#c19c00;
  --mono:'Cascadia Code','Cascadia Mono',Consolas,'JetBrains Mono',ui-monospace,monospace;
  --cell:13px;          /* contribution cell size */
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:#000; }
html{ -webkit-text-size-adjust:100%; }
body{ overflow:hidden; font-family:var(--mono); }
::selection{ background:rgba(255,77,90,.32); color:#fff; }

/* ---------- Window ---------- */
.wt{
  position:fixed; inset:0; display:flex; flex-direction:column;
  background:var(--bg);
  background-image:radial-gradient(120% 80% at 80% -10%, rgba(255,77,90,.07), transparent 60%);
}

/* ---------- Tab / title bar ---------- */
.wt-bar{ height:38px; flex:none; display:flex; align-items:stretch; justify-content:space-between; background:var(--bar); padding-left:8px; user-select:none; }
.wt-tabs{ display:flex; align-items:center; gap:3px; min-width:0; }
.wt-tab{ display:flex; align-items:center; gap:9px; height:30px; padding:0 9px 0 12px; border-radius:6px 6px 0 0; color:#cfcfcf; min-width:0; }
.wt-tab.active{ background:var(--bg); height:36px; align-self:flex-end; }
.wt-ico{ width:15px; height:15px; display:inline-flex; flex:none; }
.wt-name{ font-size:12.5px; letter-spacing:.005em; color:#e6e6e6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wt-x{ color:#9a9a9a; width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:4px; margin-left:2px; cursor:default; flex:none; }
.wt-x:hover{ background:rgba(255,255,255,.08); color:#ddd; }
.wt-new,.wt-dd{ appearance:none; background:transparent; border:0; color:#cfcfcf; height:30px; width:30px; align-self:center; cursor:default; display:inline-flex; align-items:center; justify-content:center; border-radius:5px; padding:0; flex:none; }
.wt-new{ font-size:17px; font-weight:300; line-height:1; }
.wt-new:hover,.wt-dd:hover{ background:rgba(255,255,255,.06); }
.wt-ctl{ display:flex; flex:none; }
.wt-ctl span{ width:46px; display:inline-flex; align-items:center; justify-content:center; color:#dcdcdc; cursor:default; }
.wt-ctl span:hover{ background:rgba(255,255,255,.06); }
.wt-ctl .wt-cls:hover{ background:#c42b1c; color:#fff; }

/* ---------- Screen ---------- */
.wt-body{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:8px 14px 18px; background:var(--bg);
  font-size:15px; line-height:1.5; color:var(--fg); cursor:text; scrollbar-width:thin; scrollbar-color:#333 transparent; }
.wt-body::-webkit-scrollbar{ width:11px; }
.wt-body::-webkit-scrollbar-thumb{ background:#2f2f2f; border:3px solid var(--bg); border-radius:8px; }
.wt-body::-webkit-scrollbar-thumb:hover{ background:#444; }

#out{ white-space:pre-wrap; word-break:break-word; }
.ln{ white-space:pre-wrap; word-break:break-word; }
.ln a{ color:var(--blue); text-decoration:none; border-bottom:1px solid rgba(59,142,234,.3); }
.ln a:hover{ border-bottom-color:var(--blue); }

/* tokens */
.t-white{ color:var(--white); }
.t-dim{ color:var(--dim); }
.t-dim2{ color:var(--dim2); }
.t-cmd{ color:var(--cmd); }
.t-accent{ color:var(--accent); }
.t-green{ color:var(--green); }
.t-ok{ color:var(--ok); }
.t-blue{ color:var(--blue); }
.t-cyan{ color:var(--cyan); }
.t-yellow{ color:var(--yellow); }
.b{ font-weight:700; color:var(--white); }
.t-accent.b{ color:var(--accent); }
.banner{ color:var(--accent); display:block; line-height:1.05; font-size:clamp(7px,1.7vw,13px); text-shadow:0 0 18px rgba(255,77,90,.4); }

/* prompt + input */
.prompt{ color:var(--fg); }
.prompt .ps{ color:var(--fg); }
.prompt .path{ color:var(--fg); }
.prompt .gt{ color:var(--fg); }
.input-line{ display:block; position:relative; white-space:pre-wrap; word-break:break-word; }
.typed{ color:var(--cmd); }
.curs{ display:inline-block; width:8px; height:1.05em; vertical-align:text-bottom; background:var(--fg); margin-left:1px; animation:blink 1.05s steps(1) infinite; }
.input-line.busy .curs{ animation:none; }
@keyframes blink{ 50%{ opacity:0; } }
#cmd{ position:absolute; left:0; top:0; width:1px; height:1px; opacity:0; border:0; padding:0; margin:0; background:transparent; color:transparent; outline:none; }

/* command echo line */
.echo{ color:var(--fg); }
.echo .typed{ color:var(--cmd); }

/* ---------- Lists / tables in output ---------- */
.kv{ display:grid; grid-template-columns:auto 1fr; gap:2px 18px; }
.kv .k{ color:var(--accent); }
.kv .v{ color:var(--fg); }
.cols{ display:flex; flex-wrap:wrap; gap:8px 40px; }
.col h5{ margin:0 0 4px; font-size:15px; font-weight:700; color:var(--accent); }
.col ul{ list-style:none; margin:0 0 6px; padding:0; }
.col li{ color:var(--fg); }
.col li .n{ color:var(--dim); margin-right:10px; }

/* project card */
.proj{ margin:2px 0 4px; }
.proj .h{ color:var(--white); font-weight:700; }
.proj .meta{ color:var(--dim); }
.proj .desc{ color:var(--dim2); }
.proj .tech b{ color:var(--cyan); font-weight:400; }

/* ---------- neofetch ---------- */
.neo{ display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start; }
.neo .logo{ color:var(--accent); white-space:pre; font-size:clamp(8px,1.5vw,12px); line-height:1.1; text-shadow:0 0 16px rgba(255,77,90,.35); }
.neo .info{ min-width:240px; }
.neo .info > div{ white-space:nowrap; }
.neo .info .hdr{ color:var(--accent); font-weight:700; }
.neo .info .rule{ color:var(--dim); }
.neo .info .k{ color:var(--accent); }
.neo .info .v{ color:var(--fg); }
.neo .swatches{ margin-top:6px; letter-spacing:2px; }

/* ---------- Contribution graph ---------- */
.cg{ margin:6px 0 4px; max-width:100%; }
.cg .cg-top{ color:var(--dim2); margin-bottom:8px; }
.cg .cg-top b{ color:var(--white); }
.cg-scroll{ overflow-x:auto; padding-bottom:6px; scrollbar-width:thin; scrollbar-color:#333 transparent; }
.cg-scroll::-webkit-scrollbar{ height:8px; }
.cg-scroll::-webkit-scrollbar-thumb{ background:#2f2f2f; border-radius:8px; }
.cg-months{ display:flex; margin-left:30px; color:var(--dim); font-size:11px; height:14px; overflow:visible; }
.cg-months span{ flex:none; white-space:nowrap; overflow:visible; }
.cg-body{ display:flex; gap:6px; }
.cg-days{ display:grid; grid-template-rows:repeat(7, var(--cell)); gap:3px; font-size:10px; color:var(--dim); width:26px; }
.cg-days span{ height:var(--cell); line-height:var(--cell); }
.cg-grid{ display:grid; grid-template-rows:repeat(7, var(--cell)); grid-auto-flow:column; grid-auto-columns:var(--cell); gap:3px; }
.cg-cell{ width:var(--cell); height:var(--cell); border-radius:2px; background:#161b22; outline:1px solid rgba(255,255,255,.02); outline-offset:-1px; }
.cg-cell[data-l="1"]{ background:#0e4429; }
.cg-cell[data-l="2"]{ background:#006d32; }
.cg-cell[data-l="3"]{ background:#26a641; }
.cg-cell[data-l="4"]{ background:#39d353; }
.cg-legend{ display:flex; align-items:center; gap:6px; margin-top:10px; margin-left:30px; color:var(--dim); font-size:12px; }
.cg-legend .cg-cell{ display:inline-block; }

/* ---------- Quick command bar ---------- */
.wt-foot{ flex:none; display:flex; align-items:center; gap:7px; padding:8px 12px;
  background:#141414; border-top:1px solid #232323; overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; user-select:none; }
.wt-foot::-webkit-scrollbar{ display:none; }
.foot-label{ color:var(--dim); font-size:12px; flex:none; letter-spacing:.04em; }
.qbtn{ flex:none; appearance:none; font-family:var(--mono); font-size:12.5px; color:var(--dim2);
  background:#1f1f1f; border:1px solid #2c2c2c; border-radius:6px; padding:5px 12px; cursor:pointer;
  transition:color .16s ease, border-color .16s ease, background .16s ease, transform .12s ease; }
.qbtn:hover{ color:var(--white); border-color:var(--accent); background:#241416; }
.qbtn:active{ transform:translateY(1px); }

/* clickable command tokens inside output */
.runcmd{ cursor:pointer; border-bottom:1px dotted rgba(242,233,184,.35); }
.runcmd:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.cmds .c.runcmd{ border-bottom:1px dotted rgba(242,233,184,.25); }

/* ---------- easter egg: nuke ---------- */
.wt.nuke{ animation:nukeShake .5s steps(10) 1; }
@keyframes nukeShake{ 0%{transform:translate(0,0)} 20%{transform:translate(-4px,2px)} 40%{transform:translate(4px,-3px)} 60%{transform:translate(-3px,-1px)} 80%{transform:translate(2px,3px)} 100%{transform:translate(0,0)} }
.wt.nuke::after{ content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:rgba(224,22,43,.18); animation:nukeFade .7s ease forwards; }
@keyframes nukeFade{ from{opacity:1} to{opacity:0} }

/* ---------- easter egg: matrix + konami ---------- */
#matrix{ position:fixed; inset:0; z-index:300; background:#000; }
#matrixHint{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:301;
  color:#39d353; font-family:var(--mono); font-size:13px; letter-spacing:.12em;
  text-shadow:0 0 10px rgba(57,211,83,.6); animation:blink 1.2s steps(1) infinite; }
.wt.party{ animation:party 2.6s linear; }
@keyframes party{ 0%,100%{filter:none} 25%{filter:hue-rotate(60deg) saturate(1.5)} 50%{filter:hue-rotate(-40deg) saturate(1.6)} 75%{filter:hue-rotate(30deg) saturate(1.4)} }
.wt.glitch{ animation:glitchA .9s steps(2) ; }
@keyframes glitchA{ 0%,100%{transform:translate(0,0);filter:none} 10%{transform:translate(-3px,1px);filter:hue-rotate(40deg)} 20%{transform:translate(3px,-2px)} 30%{transform:translate(-2px,0);filter:saturate(2)} 45%{transform:translate(2px,2px)} 60%{transform:translate(-3px,-1px);filter:hue-rotate(-30deg)} 80%{transform:translate(1px,1px)} }

/* hint chips for help */
.cmds{ display:grid; grid-template-columns:auto 1fr; gap:2px 20px; }
.cmds .c{ color:var(--cmd); }
.cmds .d{ color:var(--dim2); }

/* link buttons row (contact) */
.lk{ color:var(--blue); cursor:pointer; text-decoration:none; border-bottom:1px solid rgba(59,142,234,.3); }
.lk:hover{ border-bottom-color:var(--blue); }
.lk.copy{ color:var(--accent); border-bottom-color:rgba(255,77,90,.3); }
.lk.copy:hover{ border-bottom-color:var(--accent); }

/* boot caret while typing intro */
.typing-caret{ display:inline-block; width:8px; height:1.05em; vertical-align:text-bottom; background:var(--fg); margin-left:1px; animation:blink 1.05s steps(1) infinite; }

/* toast */
#toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); opacity:0; z-index:50;
  display:inline-flex; align-items:center; gap:9px; padding:10px 15px; border-radius:8px;
  background:#161616; border:1px solid #2a2a2a; color:var(--fg); font-size:13px;
  box-shadow:0 12px 40px -10px rgba(0,0,0,.8); transition:opacity .28s ease, transform .36s ease; pointer-events:none; }
#toast.show{ opacity:1; transform:translate(-50%,0); }
#toast .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }

@media (max-width:600px){
  .wt-body{ font-size:13.5px; padding:8px 11px 16px; }
  .wt-name{ font-size:11.5px; }
  .wt-ctl span{ width:40px; }
  :root{ --cell:11px; }
  .neo{ gap:14px; }
}
@media (prefers-reduced-motion: reduce){
  .curs,.typing-caret{ animation:none; }
}