/* ============================================================
   TMPSOFT — TMP-OS 97
   identidade: Win9x honesto, teal, cinza-chumbo, caos alegre
   ============================================================ */
@font-face {
  font-family: 'Plex Mono';
  src: url('../assets/fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../assets/fonts/plexmono-700.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

:root {
  --teal: #007f7f;
  --chrome: #c0c0c0;
  --chrome-hi: #ffffff;
  --chrome-lo: #808080;
  --chrome-dk: #404040;
  --title1: #000080;
  --title2: #1084d0;
  --ink: #0a0a12;
  --mono: 'Plex Mono', 'Courier New', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--mono);
  background: #000;
  color: var(--ink);
  user-select: none;
}

/* bordas 3D win9x */
.bevel-out { border: 2px solid; border-color: var(--chrome-hi) var(--chrome-dk) var(--chrome-dk) var(--chrome-hi); }
.bevel-in  { border: 2px solid; border-color: var(--chrome-dk) var(--chrome-hi) var(--chrome-hi) var(--chrome-dk); }

/* ============ BIOS ============ */
#bios {
  position: fixed; inset: 0; z-index: 500;
  background: #000; color: #b8b8b8;
  padding: 4vh 4vw;
  font-size: clamp(12px, 1.6vw, 16px);
  line-height: 1.7;
  cursor: pointer;
}
#bios-log { white-space: pre-wrap; font-family: var(--mono); }
#bios-log .y { color: #ffe95e; }
#bios-log .g { color: #6fff6f; }
#bios-skip {
  position: absolute; bottom: 4vh; left: 4vw;
  color: #6fff6f; animation: biosblink 1s steps(2) infinite;
}
@keyframes biosblink { 50% { opacity: 0; } }

/* ============ DESKTOP ============ */
#os { position: fixed; inset: 0; }
#desktop {
  position: absolute; inset: 0 0 40px 0;
  background:
    radial-gradient(ellipse 140% 100% at 50% -10%, rgba(255,255,255,0.10), transparent 60%),
    repeating-conic-gradient(rgba(0,0,0,0.045) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px,
    var(--teal);
  overflow: hidden;
}

/* ícones */
#icons {
  position: absolute; inset: 18px;
  display: flex; flex-direction: column; flex-wrap: wrap;
  align-content: flex-start; gap: 22px 26px;
  pointer-events: none;
}
.icon {
  width: 96px; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: var(--mono); font-size: 12px; color: #fff;
  text-shadow: 1px 1px 0 #003c3c;
}
.icon .ic { width: 48px; height: 48px; image-rendering: pixelated; }
.icon span { padding: 1px 4px; line-height: 1.3; text-align: center; }
.icon:focus span, .icon.sel span { background: #000080; outline: 1px dotted #fff; }
.icon:active { transform: translateY(1px); }

/* ============ JANELAS ============ */
.win {
  position: absolute; min-width: 300px;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-dk) var(--chrome-dk) var(--chrome-hi);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column;
  animation: winopen 0.14s steps(3);
}
@keyframes winopen { from { transform: scale(0.86); opacity: 0.4; } }
.win.closing { animation: winclose 0.12s steps(3) forwards; }
@keyframes winclose { to { transform: scale(0.86); opacity: 0; } }
.win-title {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, var(--title1), var(--title2));
  color: #fff; padding: 4px 6px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  cursor: grab; touch-action: none;
}
.win.unfocused .win-title { background: linear-gradient(90deg, #5f5f66, #8a8a92); }
.win-title:active { cursor: grabbing; }
.win-title .wt-ic { width: 16px; height: 16px; image-rendering: pixelated; }
.win-title .wt-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-btn {
  width: 22px; height: 20px; font-family: var(--mono); font-size: 12px; font-weight: 700;
  background: var(--chrome); color: #000; cursor: pointer;
  border: 2px solid; border-color: var(--chrome-hi) var(--chrome-dk) var(--chrome-dk) var(--chrome-hi);
  display: grid; place-items: center; line-height: 1;
}
.win-btn:active { border-color: var(--chrome-dk) var(--chrome-hi) var(--chrome-hi) var(--chrome-dk); }
.win-body {
  margin: 3px; padding: 12px; background: var(--chrome);
  font-size: 13px; line-height: 1.65; overflow: auto;
  max-height: min(62vh, 560px);
}
.win-body.paper { background: #fff; border: 2px solid; border-color: var(--chrome-dk) var(--chrome-hi) var(--chrome-hi) var(--chrome-dk); }

/* botões genéricos */
.btn97 {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  background: var(--chrome); padding: 7px 18px; cursor: pointer;
  border: 2px solid; border-color: var(--chrome-hi) var(--chrome-dk) var(--chrome-dk) var(--chrome-hi);
  box-shadow: 1px 1px 0 #000;
}
.btn97:active { border-color: var(--chrome-dk) var(--chrome-hi) var(--chrome-hi) var(--chrome-dk); transform: translate(1px, 1px); box-shadow: none; }
.btn97.primary { background: #ffe95e; }

/* ============ MEUS JOGOS ============ */
.games-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; width: min(76vw, 640px);
}
.game-card {
  background: #fff; padding: 8px;
  border: 2px solid; border-color: var(--chrome-dk) var(--chrome-hi) var(--chrome-hi) var(--chrome-dk);
  text-align: center; cursor: pointer;
}
.game-card:hover { outline: 2px dashed #000080; outline-offset: -6px; }
.game-card canvas { width: 100%; image-rendering: pixelated; display: block; }
.game-card .g-name { font-weight: 700; font-size: 12px; margin-top: 6px; line-height: 1.35; }
.game-card .g-meta { font-size: 11px; color: #444; margin-top: 2px; }
.game-card .g-price { display: inline-block; margin-top: 5px; background: #000080; color: #ffe95e; font-size: 11px; font-weight: 700; padding: 2px 8px; }

/* ficha do jogo */
.game-sheet { display: flex; gap: 14px; width: min(78vw, 560px); }
.game-sheet canvas { width: 180px; flex: 0 0 auto; image-rendering: pixelated; border: 2px solid #000; }
.game-sheet h3 { font-size: 16px; margin-bottom: 6px; }
.game-sheet .g-tags { font-size: 11px; color: #005f5f; font-weight: 700; margin-bottom: 8px; }
.game-sheet p { font-size: 12.5px; margin-bottom: 8px; }
.game-sheet .g-review { font-style: italic; color: #444; font-size: 12px; border-left: 3px solid #ffe95e; padding-left: 8px; }

/* ============ GERADOR ============ */
.gen-wrap { width: min(78vw, 520px); text-align: center; }
.gen-slot {
  background: #fff; min-height: 150px; padding: 18px 14px; margin-bottom: 14px;
  border: 2px solid; border-color: var(--chrome-dk) var(--chrome-hi) var(--chrome-hi) var(--chrome-dk);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.gen-slot .gen-title { font-size: 19px; font-weight: 700; }
.gen-slot .gen-genre { font-size: 11px; font-weight: 700; color: #005f5f; letter-spacing: 0.1em; }
.gen-slot .gen-pitch { font-size: 12.5px; max-width: 420px; }
.gen-slot .gen-price { background: #000080; color: #ffe95e; font-weight: 700; font-size: 12px; padding: 2px 10px; }
.gen-count { font-size: 11px; color: #555; margin-top: 8px; }

/* ============ NOTEPAD ============ */
.notepad { width: min(80vw, 480px); white-space: pre-wrap; font-size: 13px; line-height: 1.8; }

/* ============ LIXEIRA ============ */
.trash-list { width: min(78vw, 440px); }
.trash-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 8px; cursor: pointer;
  border-bottom: 1px dotted #999; background: #fff;
}
.trash-item:hover { background: #000080; color: #fff; }
.trash-item .ti-ic { width: 20px; height: 20px; image-rendering: pixelated; flex: 0 0 auto; }
.trash-item small { margin-left: auto; opacity: 0.6; font-size: 10px; }

/* arquivo corrompido (nightmares) */
.corrupt {
  width: min(78vw, 460px); background: #000; color: #ff4455; padding: 18px;
  font-size: 13px; line-height: 1.9; text-align: center;
  animation: corruptshake 0.08s steps(2) infinite;
}
.corrupt a { color: #c6ff3e; font-weight: 700; }
@keyframes corruptshake { 50% { transform: translateX(1px); } }

/* ============ TMP MESSENGER ============ */
.msn-wrap { display: flex; gap: 8px; width: min(76vw, 520px); height: 320px; }
.msn-lista {
  width: 172px; flex: 0 0 auto; overflow-y: auto; background: #fff;
  border: 2px solid; border-color: var(--chrome-dk) var(--chrome-hi) var(--chrome-hi) var(--chrome-dk);
}
.msn-head { font-size: 11px; font-weight: 700; padding: 6px; background: linear-gradient(90deg, #22a7f0, #7ed321); color: #fff; }
.msn-contato {
  display: flex; gap: 6px; width: 100%; text-align: left; align-items: center;
  font-family: var(--mono); font-size: 11px; padding: 7px 6px;
  background: none; border: none; border-bottom: 1px dotted #ccc; cursor: pointer; line-height: 1.3;
}
.msn-contato small { color: #777; font-size: 9.5px; }
.msn-contato:hover, .msn-contato.sel { background: #000080; color: #fff; }
.msn-contato:hover small, .msn-contato.sel small { color: #bcd; }
.msn-contato.off { opacity: 0.75; }
.msn-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.msn-msgs {
  flex: 1; overflow-y: auto; background: #fff; padding: 8px;
  border: 2px solid; border-color: var(--chrome-dk) var(--chrome-hi) var(--chrome-hi) var(--chrome-dk);
  font-size: 12px; line-height: 1.6;
}
.msn-m { margin-bottom: 4px; word-wrap: break-word; }
.msn-sys { color: #888; font-size: 10.5px; font-style: italic; margin-bottom: 4px; }
.msn-bar { display: flex; gap: 6px; margin-top: 6px; }
.msn-inp {
  flex: 1; font-family: var(--mono); font-size: 12px; padding: 7px;
  border: 2px solid; border-color: var(--chrome-dk) var(--chrome-hi) var(--chrome-hi) var(--chrome-dk);
  background: #fff; outline: none; min-width: 0;
}
.win.zumbido { animation: zumbido 0.5s linear; }
@keyframes zumbido {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-6px, 3px); } 20% { transform: translate(5px, -4px); }
  30% { transform: translate(-4px, -3px); } 40% { transform: translate(6px, 4px); }
  50% { transform: translate(-5px, 2px); } 60% { transform: translate(4px, -3px); }
  70% { transform: translate(-6px, -2px); } 80% { transform: translate(5px, 3px); }
  90% { transform: translate(-3px, -4px); }
}
@media (max-width: 640px) {
  .msn-wrap { flex-direction: column; height: 380px; }
  .msn-lista { width: 100%; max-height: 120px; }
}

/* ============ TASKBAR ============ */
#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: var(--chrome);
  border-top: 2px solid var(--chrome-hi);
  display: flex; align-items: center; gap: 6px; padding: 4px 6px;
  z-index: 300;
}
.tb-start {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  background: var(--chrome); cursor: pointer; padding: 3px 10px; height: 30px;
  border: 2px solid; border-color: var(--chrome-hi) var(--chrome-dk) var(--chrome-dk) var(--chrome-hi);
}
.tb-start:active, .tb-start.open { border-color: var(--chrome-dk) var(--chrome-hi) var(--chrome-hi) var(--chrome-dk); }
#tb-windows { flex: 1; display: flex; gap: 5px; overflow: hidden; }
.tb-win {
  font-family: var(--mono); font-size: 12px; height: 30px; padding: 0 12px;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--chrome); cursor: pointer;
  border: 2px solid; border-color: var(--chrome-hi) var(--chrome-dk) var(--chrome-dk) var(--chrome-hi);
}
.tb-win.active { border-color: var(--chrome-dk) var(--chrome-hi) var(--chrome-hi) var(--chrome-dk); background: #d6d6d6; font-weight: 700; }
.tb-tray {
  display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 10px;
  border: 2px solid; border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  font-size: 12px;
}
#tb-sound { background: none; border: none; font-size: 14px; cursor: pointer; opacity: 0.9; }
#tb-sound.off { opacity: 0.35; text-decoration: line-through; }

/* ============ START MENU ============ */
#start-menu {
  position: absolute; left: 6px; bottom: 44px; z-index: 400;
  width: 280px; background: var(--chrome);
  border: 2px solid; border-color: var(--chrome-hi) var(--chrome-dk) var(--chrome-dk) var(--chrome-hi);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.35);
  display: flex;
}
.sm-side {
  width: 34px; background: linear-gradient(0deg, #000080, #1084d0);
  color: #fff; writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; padding: 10px 0;
  font-weight: 700; letter-spacing: 0.12em; font-size: 15px;
}
.sm-side b { color: #ffe95e; }
#sm-list { list-style: none; flex: 1; padding: 6px 0; }
#sm-list button, #sm-list a {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font-family: var(--mono); font-size: 13px; text-align: left;
  background: none; border: none; padding: 9px 12px; cursor: pointer;
  color: var(--ink); text-decoration: none;
}
#sm-list button:hover, #sm-list a:hover { background: #000080; color: #fff; }
#sm-list img, #sm-list svg { width: 20px; height: 20px; image-rendering: pixelated; }
#sm-list li.sep { border-top: 1px solid var(--chrome-lo); border-bottom: 1px solid var(--chrome-hi); margin: 5px 0; }

/* elementos com [hidden] SEMPRE somem (vence display flex/grid abaixo) */
#bsod[hidden], #shutdown[hidden], #start-menu[hidden], #os[hidden] { display: none !important; }

/* ============ BSOD ============ */
#bsod {
  position: fixed; inset: 0; z-index: 900; background: #0000aa; color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.bsod-inner { width: min(720px, 88vw); font-size: clamp(13px, 1.6vw, 16px); line-height: 1.9; white-space: pre-wrap; }
.bsod-title { display: inline-block; background: #c0c0c0; color: #0000aa; font-weight: 700; padding: 2px 14px; margin-bottom: 26px; }
.bsod-inner p { margin-bottom: 18px; }
.bsod-key { animation: biosblink 1s steps(2) infinite; }

/* ============ SHUTDOWN ============ */
#shutdown {
  position: fixed; inset: 0; z-index: 950; background: #000; color: #ffb84d;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  font-size: clamp(16px, 2.4vw, 24px); text-align: center; padding: 20px;
}
.sd-actions { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
#shutdown button, #shutdown a {
  font-family: var(--mono); font-size: 14px; background: none; border: none;
  color: #6fff6f; cursor: pointer; text-decoration: none;
}
#shutdown a { color: #c6ff3e; }
#shutdown button:hover, #shutdown a:hover { text-decoration: underline; }

/* ============ CRT ============ */
#tmp-crt {
  position: fixed; inset: 0; z-index: 980; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.13) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}
#tmp-crt::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 110% 95% at 50% 50%, transparent 62%, rgba(0,0,0,0.42) 100%);
}

/* sparkles do cursor */
.spark {
  position: fixed; z-index: 970; pointer-events: none;
  width: 6px; height: 6px; image-rendering: pixelated;
  animation: sparkfall 0.7s linear forwards;
}
@keyframes sparkfall {
  to { transform: translateY(26px) rotate(140deg); opacity: 0; }
}

@media (max-width: 640px) {
  .icon { width: 78px; font-size: 11px; }
  .win { min-width: 260px; }
  .win-body { max-height: 56vh; }
}