/* ==========================================================================
   RJay Retro Web OS (static Neocities site)
   - Edit themes in: assets/css/themes.css
   - Edit layout + components in: assets/css/base.css and windows.css
   - Edit content (name, links, projects) in: assets/js/site-data.js
   ========================================================================== */

:root{
  /* Theme variables (defaults; overridden by [data-theme]) */
  --bg0:#0a0f18;
  --bg1:#0d1a2a;
  --panel:#0f2238cc;
  --panel-solid:#102742;
  --text:#e8f7ff;
  --muted:#a6c7dd;
  --accent:#00ffd1;
  --accent2:#ff4fd8;
  --accent3:#ffd24a;
  --danger:#ff3b3b;
  --ok:#7dff7a;
  --border:#1f4a6b;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --radius:14px;

  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

  --noise:url("../img/noise.png");
  --cursor:url("../img/cursor_default.png") 2 2, auto;
  --cursor-pointer:url("../img/cursor_pointer.png") 10 6, pointer;
}

/* Basic reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-ui);
  color:var(--text);
  background:
    radial-gradient(1100px 700px at 20% 10%, rgba(0,255,209,.18), transparent 55%),
    radial-gradient(900px 600px at 90% 20%, rgba(255,79,216,.15), transparent 50%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden; /* desktop vibe */
  cursor:var(--cursor);
}
a,button,input,select,textarea{cursor:var(--cursor-pointer)}
a{color:inherit}
img{max-width:100%; height:auto}

::selection{background:rgba(0,255,209,.25)}

/* subtle film grain overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:var(--noise);
  opacity:.08;
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* CRT option */
body[data-crt="on"]::after{
  content:"";
  position:fixed; inset:0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0,0,0,.0) 0px,
      rgba(0,0,0,.0) 2px,
      rgba(0,0,0,.12) 3px,
      rgba(0,0,0,.12) 4px
    );
  opacity:.55;
  pointer-events:none;
}

/* Utility */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}
.hr{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,255,209,.35), transparent);
  margin:10px 0;
}

/* Desktop canvas background */
#bg-canvas{
  position:fixed; inset:0;
  width:100%; height:100%;
  pointer-events:none;
  opacity:.65;
  filter: blur(.2px) saturate(1.2);
}

/* Desktop layout */
.desktop{
  position:relative;
  height:100%;
}
.desktop__icons{
  position:absolute;
  top:18px; left:16px;
  display:grid;
  grid-template-columns: 96px;
  gap:10px;
  z-index:2;
}
.desktop-icon{
  border:0;
  background:transparent;
  color:var(--text);
  text-align:center;
  padding:8px 6px;
  border-radius:12px;
  outline:1px solid transparent;
}
.desktop-icon:hover{background:rgba(255,255,255,.07); outline-color:rgba(255,255,255,.14)}
.desktop-icon:focus-visible{outline-color:var(--accent)}
.desktop-icon img{
  width:44px; height:44px;
  display:block; margin:0 auto 6px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.35));
}
.desktop-icon span{display:block; font-size:12px; line-height:1.2; text-shadow:0 2px 10px rgba(0,0,0,.55)}

/* Taskbar */
.taskbar{
  position:absolute; left:0; right:0; bottom:0;
  height:44px;
  display:flex; align-items:center; gap:10px;
  padding:6px 10px;
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  border-top:1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  z-index:50;
}
.start-btn{
  display:flex; align-items:center; gap:8px;
  height:32px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(180deg, rgba(0,255,209,.22), rgba(0,255,209,.08));
  color:var(--text);
  font-weight:700;
  letter-spacing:.3px;
}
.start-btn:hover{filter:brightness(1.06)}
.start-btn img{width:18px; height:18px}
.taskbar__tray{
  margin-left:auto;
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  color:rgba(232,247,255,.9);
}
.tray-pill{
  height:28px;
  display:flex; align-items:center; gap:8px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(10,15,24,.35);
}
.tray-pill button{
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
}

/* Start menu */
.start-menu{
  position:absolute;
  left:10px; bottom:54px;
  width:330px;
  max-height:70vh;
  overflow:auto;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(16,39,66,.92), rgba(10,15,24,.92));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:var(--shadow);
  backdrop-filter: blur(14px);
  z-index:80;
  transform-origin: bottom left;
  transform: scale(.96);
  opacity:0;
  pointer-events:none;
  transition: transform .12s ease, opacity .12s ease;
}
.start-menu[data-open="true"]{transform:scale(1); opacity:1; pointer-events:auto}
.start-menu__header{
  padding:12px 12px 10px;
  display:flex; gap:10px; align-items:center;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.avatar{
  width:44px; height:44px;
  border-radius:12px;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.8), rgba(255,255,255,.12)),
             linear-gradient(135deg, rgba(0,255,209,.35), rgba(255,79,216,.22));
  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 10px 30px rgba(0,0,0,.35) inset;
}
.start-menu__name{font-weight:800}
.start-menu__tag{font-size:12px; color:var(--muted)}
.start-menu__body{padding:10px 12px 12px}
.search{
  width:100%;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);
  color:var(--text);
  padding:0 12px;
  outline:none;
}
.search:focus{border-color:rgba(0,255,209,.6); box-shadow:0 0 0 3px rgba(0,255,209,.12)}
.app-list{margin-top:10px; display:grid; gap:8px}
.app{
  display:flex; align-items:center; gap:10px;
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  padding:10px;
}
.app:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18)}
.app img{width:26px; height:26px}
.app small{display:block; color:var(--muted); margin-top:2px}

/* Toasts */
.toasts{
  position:absolute; right:14px; bottom:60px;
  display:grid; gap:10px;
  z-index:90;
}
.toast{
  width:320px;
  border-radius:16px;
  background:rgba(16,39,66,.92);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:var(--shadow);
  padding:12px 12px 10px;
}
.toast__title{font-weight:800}
.toast__msg{color:var(--muted); font-size:13px; margin-top:4px}
.toast__actions{display:flex; gap:8px; margin-top:10px}
.btn{
  height:30px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:var(--text);
}
.btn:hover{filter:brightness(1.06)}
.btn--accent{border-color:rgba(0,255,209,.5); background:rgba(0,255,209,.14)}
.btn--danger{border-color:rgba(255,59,59,.55); background:rgba(255,59,59,.14)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; scroll-behavior:auto !important}
  #bg-canvas{display:none}
}

/* Mobile fallback: if user opens on a phone, show a tip in #mobile-hint */
@media (max-width: 860px){
  body{overflow:auto}
  .desktop{min-height:100vh; padding-bottom:56px}
  .desktop__icons{position:relative; grid-template-columns:repeat(3, 1fr); max-width:560px; margin:14px auto; left:auto; top:auto}
  #bg-canvas{position:absolute}
}


/* Command palette (Ctrl+K) */
.cmdk{
  width:min(720px, 92vw);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(16,39,66,.92), rgba(10,15,24,.92));
  box-shadow:var(--shadow);
  color:var(--text);
  padding:0;
}
.cmdk::backdrop{background:rgba(0,0,0,.55)}
.cmdk__head{
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.12);
  display:flex; gap:10px; align-items:center;
}
.cmdk__head input{
  flex:1;
  height:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);
  color:var(--text);
  padding:0 12px;
  outline:none;
}
.cmdk__head input:focus{border-color:rgba(0,255,209,.6); box-shadow:0 0 0 3px rgba(0,255,209,.12)}
.cmdk__list{max-height:52vh; overflow:auto; padding:10px; display:grid; gap:8px}
.cmdk__item{
  width:100%;
  text-align:left;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  padding:10px;
  color:var(--text);
}
.cmdk__item:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.18)}
.cmdk__item small{display:block; color:var(--muted); margin-top:2px}