/* ── RESET & VARIABLES ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg: #1a1a2e;
  --desktop: #0d0d1a;
  --taskbar: #0a0a14;
  --win-bg: #0d0d1a;
  --win-title: #1a1aff;
  --win-title-text: #fff;
  --win-border: #3333aa;
  --text: #c8c8ff;
  --text-dim: #6666aa;
  --accent: #ffff00;
  --accent2: #ff6600;
  --green: #00ff41;
  --pixel: 'VT323', monospace;
  --mono: 'Share Tech Mono', monospace;
  --cur-normal: url('../src/lol-gauntlet/normal%20cursor.cur');
  --cur-link: url('../src/lol-gauntlet/link%20select.cur');
  --cur-text: url('../src/lol-gauntlet/text.cur');
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--desktop);
  font-family: var(--mono);
  color: var(--text);
  user-select: none;
  cursor: default;
}

/* ── SCANLINES ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.08) 0px,
    rgba(0, 0, 0, 0.08) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── CUSTOM CURSORS ── */
body {
  cursor: var(--cur-normal), default;
}

.icon, .start-btn, .tb-item, .win-btn, .menu-item, .sm-item, .c-link, button {
  cursor: var(--cur-link), pointer;
}

.win-titlebar {
  cursor: var(--cur-normal), move;
}

.win-resize {
  cursor: var(--cur-normal), se-resize;
}

.term-input, .win-body {
  cursor: var(--cur-text), text;
}

.win-body input,
.win-body textarea,
.win-body [contenteditable="true"] {
  cursor: var(--cur-text), text;
}

/* ── DESKTOP ── */
#desktop {
  position: fixed;
  inset: 0;
  bottom: 36px;
  overflow: hidden;
  background-image:
    linear-gradient(rgba(26, 26, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 26, 255, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* ── DESKTOP ICONS ── */
.icon-grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 10px;
  max-height: calc(100vh - 52px);
  align-content: flex-start;
}

.icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 72px;
  padding: 6px 4px;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: var(--cur-link), pointer;
  transition: background 0.1s, border-color 0.1s;
}

.icon:hover,
.icon.selected {
  background: rgba(26, 26, 255, 0.25);
  border-color: rgba(100, 100, 255, 0.5);
}

.icon:active {
  background: rgba(26, 26, 255, 0.45);
}

.icon-glyph {
  font-family: var(--pixel);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.icon[data-app="about"]    .icon-glyph { color: #00ccff; }
.icon[data-app="projects"] .icon-glyph { color: #ff6600; }
.icon[data-app="skills"]   .icon-glyph { color: #00ff41; }
.icon[data-app="contact"]  .icon-glyph { color: #ff66ff; }
.icon[data-app="terminal"] .icon-glyph { color: #ffff00; }
.icon[data-app="readme"]   .icon-glyph { color: #ffaa00; }

.icon-label {
  font-size: 0.62rem;
  color: var(--text);
  text-align: center;
  line-height: 1.2;
  text-shadow: 1px 1px 2px #000;
  word-break: break-word;
}

/* ── TASKBAR ── */
#taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: var(--taskbar);
  border-top: 2px solid var(--win-border);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 6px;
  z-index: 1000;
}

.start-btn {
  font-family: var(--pixel);
  font-size: 1.1rem;
  background: var(--win-title);
  color: #fff;
  padding: 3px 10px;
  border: 1px solid #5555ff;
  cursor: var(--cur-link), pointer;
  letter-spacing: 0.05em;
  transition: background 0.1s;
  flex-shrink: 0;
}
.start-btn:hover  { background: #2222cc; }
.start-btn:active { background: #0000aa; }

.taskbar-clock {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text);
  border: 1px solid var(--win-border);
  padding: 2px 10px;
  background: rgba(0, 0, 0, 0.3);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.taskbar-items {
  display: flex;
  gap: 4px;
  flex: 1;
  overflow: hidden;
}

.tb-item {
  font-family: var(--mono);
  font-size: 0.62rem;
  background: rgba(26, 26, 255, 0.2);
  border: 1px solid var(--win-border);
  color: var(--text);
  padding: 2px 10px;
  cursor: var(--cur-link), pointer;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s;
}
.tb-item:hover   { background: rgba(26, 26, 255, 0.4); }
.tb-item.focused { background: rgba(26, 26, 255, 0.5); border-color: #7777ff; }

/* ── WINDOWS ── */
.win {
  position: absolute;
  min-width: 280px;
  min-height: 160px;
  background: var(--win-bg);
  border: 2px solid var(--win-border);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(100, 100, 255, 0.1);
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.win.focused {
  border-color: #6666ff;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.8), 0 0 20px rgba(26, 26, 255, 0.15), inset 0 0 0 1px rgba(150, 150, 255, 0.15);
}

.win-titlebar {
  background: linear-gradient(90deg, #0000aa, #1a1aff);
  padding: 3px 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: var(--cur-normal), move;
  flex-shrink: 0;
  border-bottom: 1px solid #3333cc;
}
.win.focused .win-titlebar { background: linear-gradient(90deg, #0000cc, #2222ff); }

.win-icon-sm    { font-family: var(--pixel); font-size: 1rem; line-height: 1; }
.win-title-text { font-size: 0.72rem; color: #fff; letter-spacing: 0.05em; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.win-btns { display: flex; gap: 3px; flex-shrink: 0; }

.win-btn {
  width: 16px;
  height: 14px;
  background: #aaaaaa;
  border: 1px solid #888;
  border-top-color: #ccc;
  border-left-color: #ccc;
  cursor: var(--cur-link), pointer;
  font-size: 0.55rem;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: bold;
  line-height: 1;
}
.win-btn:hover  { background: #cccccc; }
.win-btn:active { border-top-color: #888; border-left-color: #888; border-bottom-color: #ccc; border-right-color: #ccc; }
.win-btn.close  { background: #cc4444; border-color: #aa2222; }
.win-btn.close:hover { background: #ff4444; }

.win-menubar {
  background: #0a0a1a;
  border-bottom: 1px solid var(--win-border);
  padding: 1px 6px;
  display: flex;
  flex-shrink: 0;
}

.menu-item {
  font-size: 0.65rem;
  color: var(--text);
  padding: 2px 8px;
  cursor: var(--cur-link), pointer;
  letter-spacing: 0.04em;
}
.menu-item:hover { background: var(--win-title); color: #fff; }

.win-body {
  flex: 1;
  overflow: auto;
  padding: 12px;
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--text);
  cursor: var(--cur-text), text;
  user-select: text;
}

.win-body::-webkit-scrollbar       { width: 10px; }
.win-body::-webkit-scrollbar-track { background: #0a0a14; }
.win-body::-webkit-scrollbar-thumb { background: #3333aa; border: 2px solid #0a0a14; }

.win-statusbar {
  background: #0a0a14;
  border-top: 1px solid var(--win-border);
  padding: 2px 8px;
  font-size: 0.6rem;
  color: var(--text-dim);
  flex-shrink: 0;
  display: flex;
  gap: 1rem;
}

.win-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: var(--cur-normal), se-resize;
  background: linear-gradient(135deg, transparent 50%, #3333aa 50%);
}

/* ── CONTENT COLOUR HELPERS ── */
.c-head  { font-family: var(--pixel); font-size: 1.5rem; color: var(--accent); letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.c-label { color: var(--accent2); font-size: 0.68rem; letter-spacing: 0.12em; margin-top: 1rem; margin-bottom: 0.2rem; }
.c-val   { color: var(--text); }
.c-dim   { color: var(--text-dim); }
.c-green  { color: var(--green); }
.c-yellow { color: var(--accent); }
.c-orange { color: var(--accent2); }
.c-pink   { color: #ff66ff; }
.c-blue   { color: #00ccff; }
.c-link   { color: #00ccff; cursor: var(--cur-link), pointer; text-decoration: underline; }
.c-link:hover { color: var(--accent); }
.c-sep  { border: none; border-top: 1px solid var(--win-border); margin: 0.75rem 0; }

/* ── PROJECT ENTRIES ── */
.proj      { margin-bottom: 1rem; padding: 0.75rem; border: 1px solid var(--win-border); background: rgba(0, 0, 30, 0.4); }
.proj-name { font-family: var(--pixel); font-size: 1.1rem; color: var(--accent2); }
.proj-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.35rem; }
.proj-tag  { font-size: 0.6rem; border: 1px solid var(--win-border); padding: 1px 7px; color: var(--text-dim); }

/* ── SKILL BARS ── */
.skill-bar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.sb-name   { width: 100px; font-size: 0.7rem; color: var(--text-dim); flex-shrink: 0; }
.sb-track  { flex: 1; height: 8px; background: #0a0a1a; border: 1px solid var(--win-border); }
.sb-fill   { height: 100%; transition: width 0.5s ease; }
.sb-pct    { font-size: 0.65rem; color: var(--text-dim); width: 32px; text-align: right; flex-shrink: 0; }

/* ── TERMINAL ── */
.term-output    { margin-bottom: 0.5rem; }
.term-line      { margin: 0; padding: 0; line-height: 1.6; }
.term-prompt    { color: var(--green); }
.term-input-row { display: flex; align-items: center; margin-top: 0.25rem; }
.term-ps        { color: var(--green); white-space: nowrap; font-size: 0.78rem; }

.term-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--green);
  font-family: var(--mono);
  font-size: 0.78rem;
  flex: 1;
  caret-color: var(--green);
  user-select: text;
}

/* ── BOOT SCREEN ── */
#boot {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 3rem;
  z-index: 9998;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--green);
  transition: opacity 0.5s;
}
#boot.fade { opacity: 0; pointer-events: none; }

.boot-line      { margin: 0.1rem 0; opacity: 0; transition: opacity 0.3s; }
.boot-line.show { opacity: 1; }

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.blink { animation: blink 1s step-end infinite; }

/* ── START MENU ── */
#startMenu {
  display: none;
  position: fixed;
  bottom: 36px;
  left: 0;
  width: 200px;
  background: #0a0a14;
  border: 2px solid var(--win-border);
  border-bottom: none;
  z-index: 2000;
  box-shadow: 4px -4px 0 rgba(0, 0, 0, 0.5);
}
#startMenu.open { display: block; }

.sm-header {
  background: linear-gradient(180deg, #2222ff, #0000aa);
  padding: 0.75rem 0.6rem;
  font-family: var(--pixel);
  font-size: 1.4rem;
  color: #fff;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #3333aa;
}
.sm-header span { color: var(--accent); font-size: 1rem; }

.sm-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.72rem;
  color: var(--text);
  cursor: var(--cur-link), pointer;
  letter-spacing: 0.03em;
}
.sm-item:hover { background: var(--win-title); color: #fff; }
.sm-item .sm-icon { font-family: var(--pixel); font-size: 1.1rem; width: 20px; text-align: center; }
.sm-sep { border-top: 1px solid var(--win-border); margin: 0.2rem 0; }

/* ══════════════════════════════════════
   MOBILE / RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width: 600px) {
  /* disable custom cursors on touch */
  body,
  .icon, .start-btn, .tb-item, .win-btn, .menu-item, .sm-item, .c-link, button,
  .win-titlebar, .win-resize, .term-input, .win-body,
  .win-body input, .win-body textarea, .win-body [contenteditable="true"] {
    cursor: default !important;
  }

  /* boot screen */
  #boot { padding: 1.5rem; font-size: 0.75rem; }

  /* icon grid: horizontal row */
  .icon-grid {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    max-height: none;
    gap: 4px;
    padding: 12px 8px;
    justify-content: center;
  }
  .icon { width: 64px; padding: 8px 4px; }
  .icon-glyph { font-size: 2rem; }
  .icon-label { font-size: 0.58rem; }

  /* taskbar */
  #taskbar { height: 40px; padding: 0 4px; gap: 3px; }
  .start-btn { font-size: 0.9rem; padding: 4px 8px; }
  .taskbar-items { display: none; }
  .taskbar-clock { font-size: 0.65rem; padding: 2px 6px; }

  /* windows go full-screen on mobile */
  .win {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100% - 40px) !important;
    min-width: 0;
    min-height: 0;
    border: none;
    box-shadow: none;
  }
  .win.focused { box-shadow: none; border: none; }

  /* bigger window buttons for touch */
  .win-btn { width: 28px; height: 24px; font-size: 0.7rem; }
  .win-btns { gap: 4px; }
  .win-titlebar { padding: 4px 8px; }

  /* hide resize handle on mobile */
  .win-resize { display: none; }

  /* body padding */
  .win-body { padding: 10px; font-size: 0.75rem; }

  /* start menu full width */
  #startMenu { width: 100%; }
  .sm-item { padding: 0.5rem 0.75rem; font-size: 0.8rem; }
  .sm-header { font-size: 1.2rem; }

  /* desktop adjusts for taskbar height */
  #desktop { bottom: 40px; }

  /* skill bar text */
  .sb-name { width: 80px; font-size: 0.65rem; }

  /* project entries */
  .proj { padding: 0.5rem; }

  /* c-head smaller on mobile */
  .c-head { font-size: 1.2rem; }
}