/* ============================================================
   Boot sequence + content-specific styles
   ============================================================ */

#boot {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #000;
  color: #d8d8d8;
  font-family: var(--ff-mono);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#boot.hidden { display: none; }

.bios-screen {
  padding: 22px 28px;
  line-height: 1.45;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.bios-screen .bios-head {
  display: flex; align-items: flex-start; gap: 18px;
  border-bottom: 1px solid #444;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.bios-logo {
  font-family: var(--ff-title);
  font-size: 28px;
  color: #3bd63b;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(59,214,59,0.5);
  letter-spacing: 1px;
}
.bios-head small { color: #9aa; display: block; font-size: 12px; margin-top: 2px; }
.bios-lines { font-size: 13px; line-height: 1.5; }
.bios-lines .ok { color: #3bd63b; }
.bios-lines .dot { color: #f2c94c; }
.bios-lines .dim { color: #777; }
.bios-lines .line { opacity: 0; }
.bios-foot {
  margin-top: auto;
  color: #777;
  font-size: 11px;
  border-top: 1px solid #333;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
}

.splash {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, #14407c 0%, #060d1c 80%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  font-family: var(--ff-title);
}
.splash.on { pointer-events: auto; }
.splash h1 {
  font-size: 56px;
  margin: 0;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  background: linear-gradient(180deg, #fff 0%, #93c3ff 70%, #5ea5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 900;
}
.splash .tag {
  margin-top: 4px;
  color: #9dc7ff;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 13px;
}
.splash .splash-logo {
  margin: 22px 0 30px;
  filter: drop-shadow(0 0 16px rgba(59, 214, 59, 0.45)) drop-shadow(2px 4px 0 rgba(0,0,0,0.5));
}

.splash .progress {
  width: 280px; height: 14px;
  background: #060d1c;
  border: 1px solid #2a4a7a;
  border-radius: 7px;
  overflow: hidden;
  display: flex;
  gap: 2px;
  padding: 2px;
}
.splash .progress .block {
  flex: 0 0 16px;
  background: linear-gradient(180deg, #3bd6ff, #1170c8);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(80,180,255,0.8);
  opacity: 0;
  transform: translateX(-20px);
}
.splash .hint {
  margin-top: 14px;
  font-family: var(--ff-ui);
  font-size: 11px;
  color: #8fb4e6;
  opacity: 0.7;
}

/* ============================================================
   About window
   ============================================================ */
.about-layout { display: grid; grid-template-columns: 130px 1fr; gap: 14px; }
.pixel-avatar {
  width: 128px; height: 128px;
  border: 2px solid #444;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
  object-fit: cover;
  display: block;
}

.marquee {
  background: #0a2a7a;
  color: #fff;
  padding: 4px 0;
  overflow: hidden;
  position: relative;
  margin: 8px 0;
  font-family: var(--ff-mono);
  font-size: 12px;
  border: 1px solid #000;
}
.marquee-inner {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: marquee 24s linear infinite;
}
@keyframes marquee { to { transform: translateX(-100%); } }

.kv { display: grid; grid-template-columns: 90px 1fr; gap: 4px 10px; font-size: 12px; }
.kv dt { font-weight: 700; color: #444; }
[data-theme="crt"] .kv dt { color: #9dff9d; }

.badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.badge {
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(180deg, #fff, #dfdcc8);
  border: 1px solid #807a62;
  border-radius: 3px;
  font-size: 11px;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.1);
}
[data-theme="crt"] .badge { background: #0f1a13; color: #8fff8f; border-color: #2a4d32; }

/* ============================================================
   Skills window
   ============================================================ */
.skill-group { margin-bottom: 14px; }
.skill-group h3 {
  font-family: var(--ff-title);
  font-size: 13px;
  border-bottom: 1px solid #c0bba0;
  padding-bottom: 2px;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #444;
}
[data-theme="crt"] .skill-group h3 { color: #9dff9d; border-bottom-color: #2a4d32; }
.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 10px;
}
.skill-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--ff-ui);
  font-size: 11px;
  font-weight: 600;
  background: linear-gradient(180deg, #ffffff, #e4e0cc);
  border: 1px solid #999;
  border-radius: 2px;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.8);
  cursor: default;
  user-select: none;
  transition: background 0.1s, border-color 0.1s;
}
.skill-tag:hover {
  background: linear-gradient(180deg, #ddeeff, #b8d8ff);
  border-color: var(--tb-a);
}
.skill-tag[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e;
  color: #fff;
  font-family: var(--ff-ui);
  font-size: 10px;
  font-weight: 400;
  padding: 4px 8px;
  border-radius: 2px;
  white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 9999;
}
.skill-tag[data-tooltip]:hover::after {
  opacity: 1;
}
[data-theme="crt"] .skill-tag {
  background: #0a130d;
  border-color: #2a4d32;
  color: #6cff6c;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.4), 0 0 4px rgba(108,255,108,0.1);
}
[data-theme="crt"] .skill-tag:hover {
  background: #0f2512;
  border-color: #6cff6c;
}
[data-theme="crt"] .skill-tag[data-tooltip]::after {
  background: #050a06;
  border: 1px solid #2a4d32;
  color: #6cff6c;
}

/* ============================================================
   Project windows
   ============================================================ */
.proj-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.proj-head h2 { margin: 0; font-size: 15px; }
.proj-head small { color: #666; font-size: 11px; }
[data-theme="crt"] .proj-head small { color: #9dff9d; }

.proj-frame-wrap {
  position: relative;
  background: #000;
  border: 1px solid #555;
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.3);
  overflow: hidden;
  margin-bottom: 8px;
}
.proj-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fff;
}
.proj-placeholder {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, #1a1a1a 0 12px, #202020 12px 24px);
  color: #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 20px;
  font-family: var(--ff-mono);
}
.proj-placeholder .big {
  font-family: var(--ff-title);
  font-size: 22px;
  color: #f2c94c;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}
.proj-placeholder .small { font-size: 11px; color: #bbb; max-width: 320px; line-height: 1.4; }
.proj-placeholder .actions { display: flex; gap: 8px; }

.explorer-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 10px;
  padding: 4px;
}
.explorer-list .ex-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: 3px;
  gap: 4px;
  font-size: 11px;
  text-align: center;
}
.explorer-list .ex-item:hover { background: rgba(49,106,197,0.2); }
.explorer-list .ex-item .ex-ico { width: 32px; height: 32px; }

/* ============================================================
   Explorer toolbar + address bar
   ============================================================ */
.ex-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  margin: -8px -10px 8px;
  padding-left: 10px;
  padding-right: 10px;
  background: linear-gradient(180deg, #fff, #e5e1c8);
  border-bottom: 1px solid #acaa96;
  font-size: 11px;
}
.ex-toolbar button {
  padding: 2px 6px;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ex-toolbar button:hover { background: #fff; border-color: #acaa96; }
.address-bar {
  flex: 1;
  padding: 2px 6px;
  background: #fff;
  border: 1px inset #888;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: #333;
  margin-left: 6px;
}
[data-theme="crt"] .ex-toolbar { background: #0a130d; border-bottom-color: #2a4d32; }
[data-theme="crt"] .ex-toolbar button { color: #8fff8f; }
[data-theme="crt"] .address-bar { background: #050a06; color: #8fff8f; border-color: #2a4d32; }

/* ============================================================
   Terminal / cmd.exe
   ============================================================ */
.cmd-win .win-body {
  background: #000;
  color: #d8d8d8;
  font-family: var(--ff-mono);
  font-size: 13px;
  padding: 8px 10px;
}
.cmd-output { white-space: pre-wrap; line-height: 1.4; }
.cmd-output .prompt { color: #3bd63b; }
.cmd-output .ok { color: #3bd63b; }
.cmd-output .warn { color: #f2c94c; }
.cmd-output .err { color: #ff5a5a; }
.cmd-output a { color: #8fc3ff; }
.cmd-prompt-line { display: flex; gap: 6px; align-items: center; padding-top: 4px; }
.cmd-prompt-line .prompt { color: #3bd63b; white-space: pre; }
.cmd-prompt-line input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: #d8d8d8;
  font: inherit;
  caret-color: #3bd63b;
}
.cmd-cursor {
  display: inline-block;
  width: 8px; height: 14px;
  background: #3bd63b;
  vertical-align: middle;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ============================================================
   Guestbook
   ============================================================ */
.gb-form { display: grid; grid-template-columns: 140px 1fr auto; gap: 4px; margin-bottom: 10px; }
.gb-form input, .gb-form textarea {
  font: inherit;
  padding: 4px 6px;
  border: 1px inset #999;
  background: #fff;
  font-family: var(--ff-mono);
  font-size: 12px;
}
.gb-form textarea { grid-column: 1 / 3; min-height: 52px; resize: vertical; }
.gb-form button { grid-column: 3 / 4; grid-row: 1 / 3; }
.gb-entry {
  border: 1px solid #b6b095;
  background: #fdfcf0;
  padding: 6px 8px;
  margin-bottom: 6px;
  font-family: var(--ff-mono);
  font-size: 12px;
  position: relative;
}
.gb-entry .who { font-weight: 700; color: #c44a00; }
.gb-entry .when { color: #888; font-size: 10.5px; margin-left: 6px; }
[data-theme="crt"] .gb-entry { background: #050a06; border-color: #2a4d32; color: #8fff8f; }
[data-theme="crt"] .gb-form input, [data-theme="crt"] .gb-form textarea {
  background: #050a06; color: #8fff8f; border-color: #2a4d32;
}

/* ============================================================
   Contact window
   ============================================================ */
.contact-grid { display: grid; gap: 8px; }
.contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: #fff;
  border: 1px solid #b6b095;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}
.contact-row:hover { transform: translateX(3px); background: #fffbe0; }
.contact-row .cr-ico { width: 32px; height: 32px; flex: 0 0 32px; }
.contact-row b { display: block; font-size: 13px; }
.contact-row small { color: #666; }
[data-theme="crt"] .contact-row { background: #050a06; border-color: #2a4d32; color: #8fff8f; }
[data-theme="crt"] .contact-row:hover { background: #0f1a13; }

/* ============================================================
   Mobile responsive
   ============================================================ */
@media (max-width: 860px) {
  .win {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    width: calc(100% - 16px) !important;
    height: auto !important;
    max-height: none !important;
    margin: 8px auto;
    transform: none;
  }
  .win .win-body { max-height: 72vh; }
  .titlebar { cursor: default; }
  .tb-btn.min, .tb-btn.max { display: none; }
  #tweaks-panel { width: calc(100% - 30px); right: 15px; }

  .about-layout { grid-template-columns: 1fr; justify-items: center; }
  .skill-row    { grid-template-columns: 110px 1fr 36px; }
  .gb-form      { grid-template-columns: 1fr; }
  .gb-form input, .gb-form textarea { grid-column: 1; }
  .gb-form button { grid-column: 1; grid-row: auto; width: 100%; }

  .bios-screen { padding: 14px 16px; font-size: 12px; }
  .splash h1   { font-size: 40px; }
  .splash .tag { font-size: 11px; letter-spacing: 2px; }
}

@media (max-width: 480px) {
  .skill-row  { grid-template-columns: 90px 1fr 30px; font-size: 11px; }
  .splash h1  { font-size: 30px; }
  .bios-screen { font-size: 11px; }
  .about-layout .kv { grid-template-columns: 80px 1fr; font-size: 11px; }
}

/* ============================================================
   chitOS Arcade — Game Center
   ============================================================ */
.game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.game-card {
  border: 1px solid var(--win-line);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}
.game-card:hover {
  transform: translateY(-3px);
  box-shadow: 3px 5px 0 rgba(0,0,0,0.18);
}
.game-cover {
  height: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  gap: 4px;
  position: relative;
}
.game-cover-ico {
  width: 36px; height: 36px;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.5));
}
.game-cover-name {
  color: #fff;
  font-family: var(--ff-title);
  font-weight: 700;
  font-size: 12px;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
  text-align: center;
  line-height: 1.1;
}
.game-cover-year {
  color: rgba(255,255,255,0.65);
  font-family: var(--ff-mono);
  font-size: 9.5px;
}
.game-info {
  padding: 8px;
  background: var(--win-body);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.game-desc {
  font-size: 10.5px;
  color: #555;
  line-height: 1.3;
}
[data-theme="crt"] .game-desc { color: #6cff6c; }
.game-play {
  font-size: 11px;
  padding: 3px 6px;
  width: 100%;
  font-family: var(--ff-title);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* DOS game window — body must be zero-padding, game fills it */
.dos-win .win-body {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

/* Loading state inside DOS window */
.dos-loader {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  color: #3bd63b;
  font-family: var(--ff-mono);
  font-size: 13px;
}
.dos-loader-text { text-align: center; }
.dos-blink {
  animation: blink-cursor 0.8s step-end infinite;
}
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* js-dos overrides to fit our window chrome */
.dos-win .jsdos { flex: 1; min-height: 0; }

@media (max-width: 600px) {
  .game-grid { grid-template-columns: 1fr 1fr; }
}