/* ==========================================================================
   LAB 95 — apps.css
   Aparência específica de cada programa. Cada bloco é autocontido e usa
   apenas as variáveis de base.css.
   ========================================================================== */

/* Assistente: preserva a proporção do recorte de Clippit. */
img.classic-icon[src*="clippy-agent"] { object-fit: contain; image-rendering: auto; }

/* ============================== Winamp ==================================== */
.winamp {
  background: #272737;
  color: #00f75c;
  padding: 8px;
  border: 2px inset #777;
  font: 11px var(--font-mono);
  user-select: none;
  min-width: 0;
  overflow: auto;
}
.winamp-head { color: #dedeca; text-align: center; font-weight: bold; letter-spacing: 3px; margin-bottom: 8px; }
.winamp-screen { display: flex; gap: 12px; background: #050805; border: 2px inset #666; padding: 9px; }
.winamp-screen > * { min-width: 0; }
.winamp-time { font: 32px var(--font-mono); letter-spacing: -2px; }
.winamp-meta { font-size: 10px; color: #9c9; }
.winamp-title { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.winamp-kbps { font-size: 10px; }
.equalizer { height: 42px; display: flex; align-items: flex-end; gap: 3px; margin-top: 6px; }
.equalizer i {
  display: block;
  width: 7px;
  background: linear-gradient(#e7e83e, #05b832);
  height: 20%;
  animation: eq .7s steps(4) infinite alternate;
  animation-play-state: paused;
}
.winamp.playing .equalizer i { animation-play-state: running; }
@keyframes eq { to { height: 100%; } }
.playlist { background: #050805; padding: 7px; margin-top: 8px; line-height: 1.8; max-height: 110px; overflow: auto; }
.playlist button {
  display: block;
  background: transparent;
  color: #00f75c;
  border: 0;
  box-shadow: none;
  width: 100%;
  text-align: left;
  margin: 0;
  padding: 3px;
  font: 11px var(--font-mono);
}
.playlist button:hover { color: #fff; }
.playlist button.selected { color: #fff; background: #000080; }
.winamp-controls { display: flex; gap: 3px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.winamp-controls button { margin: 0; min-height: 21px; padding: 2px 6px; font-size: 11px; }
.winamp-volume { width: 70%; }
.winamp input[type="range"]::-webkit-slider-runnable-track { border-color: #555 #aaa #aaa #555; background: #050805; }
.winamp input[type="range"]::-moz-range-track { border-color: #555 #aaa #aaa #555; background: #050805; }
.winamp-marquee { color: #0f0; font-size: 11px; overflow: hidden; white-space: nowrap; }

/* ============================== Bloco de Notas ============================ */
.notepad-editor {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  resize: none;
  font: 13px "Lucida Console", "Courier New", var(--font-mono);
  line-height: 1.25;
  white-space: pre;
  overflow: auto;
}

/* ================================= Paint =================================== */
#paint-canvas, .paint-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
  border: 2px inset #aaa;
}
.paint-workspace { overflow: auto; flex: 1; min-height: 0; background: #808080; padding: 8px; }
.paint-status { display: flex; gap: 3px; font-size: 11px; }

/* ============================== Paciência ================================= */
.solitaire-board {
  background: #08723b;
  color: #fff;
  flex: 1;
  min-height: 0;
  padding: 12px;
  overflow: auto;
  user-select: none;
  border: 2px inset #ddd;
}
.sol-top, .sol-tableau { display: flex; gap: 10px; }
.sol-top { margin-bottom: 25px; }
.sol-top .space { flex: 1; }
.solitaire-board .pile {
  width: 72px;
  min-width: 72px;
  height: 99px;
  border: 2px solid #ffffff65;
  border-radius: 0;
  position: relative;
  text-align: center;
}
.solitaire-board .column { height: 300px; border-color: #ffffff30; }
.solitaire-board .card {
  position: absolute;
  left: 0;
  top: 0;
  width: 68px;
  height: 96px;
  border-radius: 0;
  border: 1px solid #333;
  background: #fff;
  color: #111;
  box-shadow: none;
  padding: 5px;
  font-weight: bold;
  font-size: 18px;
  font-family: "Times New Roman", serif;
  cursor: default;
}
.solitaire-board .card.red { color: #bd1515; }
.solitaire-board .card.back {
  background: repeating-linear-gradient(45deg, #1d4ba1 0 5px, #fff 5px 7px, #17408e 7px 12px);
  border: 3px solid #fff;
}
.solitaire-board .card.selected { outline: 3px solid #ffd700; outline-offset: 1px; }
.solitaire-board .card .suit { font-size: 27px; display: block; text-align: center; }
.solitaire-board .pile.stock:empty::after { content: "↻"; font-size: 35px; color: #fff9; line-height: 90px; }
.solitaire-board .pile.drop-target { outline: 3px solid #ffd700; }
.solitaire-board .foundation { border: 2px dashed #ffffff80; }
.solitaire-board .waste { border-style: solid; }
.solitaire-win { position: absolute; inset: 0; background: #0009; display: grid; place-items: center; z-index: 20; }
.solitaire-win > div { background: var(--silver); padding: 20px; text-align: center; border: 2px solid; border-color: var(--bevel-out); }

/* ============================== Campo Minado ============================== */
.mine-board { display: grid; grid-template-columns: repeat(9, 25px); width: max-content; border: 3px inset #eee; margin: auto; }
.mine-board button { width: 25px; height: 25px; min-height: 25px; margin: 0; padding: 0; font: bold 14px var(--font-mono); }
.mine-board button.revealed { border: 1px solid #999; box-shadow: none; background: var(--silver); }
.mine-board button.mine { background: #f00; }
.mine-board button.flag { color: #c00; }
.mine-header {
  width: min(231px, 100%);
  margin: 0 auto 8px;
  padding: 5px;
  border: 2px inset #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.led { background: #000; color: #f22; font: 23px var(--font-mono); padding: 1px 4px; }
.mine-header button { margin: 0; }

/* ============================== Calculadora =============================== */
.calc-display {
  text-align: right;
  background: #fff;
  font: 23px var(--font-mono);
  padding: 8px;
  margin: 5px 0;
  border: 2px inset #eee;
  overflow: hidden;
}
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.calc-keys button { margin: 0; min-height: 35px; font-size: 16px; color: var(--navy); }
.calc-keys button.operator { color: #900; }

/* ============================== MS-DOS ==================================== */
.dos-shell {
  background: #000;
  color: #c0c0c0;
  font: 14px var(--font-mono);
  padding: 12px;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow: auto;
  user-select: text;
}
.dos-shell > div, .dos-shell .dos-line { white-space: pre-wrap; overflow-wrap: anywhere; }
.dos-shell .dos-input-line { display: flex; align-items: baseline; gap: 0; }
.dos-shell input {
  color: #c0c0c0 !important;
  background: #000 !important;
  border: 0 !important;
  padding: 0 !important;
  outline: 0;
  flex: 1;
  min-width: 30px;
  caret-color: #c0c0c0;
}
.dos-shell .dos-prompt { white-space: pre; }
.dos-shell .err { color: #f66; }
.dos-shell .ok { color: #6f6; }
.dos-shell .dim { color: #888; }

/* ============================== Explorer ================================== */
.folder-view { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.file-tile { width: 84px; }

/* ============================== Portal / Web ============================== */
.portal-logo { font: bold 39px Arial; letter-spacing: -2px; color: #06498c; text-align: center; margin: 10px; }
.portal-grid { display: grid; grid-template-columns: minmax(100px, 130px) minmax(0, 1fr); gap: 12px; }
.portal-links { background: #e7e7ff; padding: 8px; }
.portal-links button {
  display: block;
  text-align: left;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #00c;
  text-decoration: underline;
  width: 100%;
  margin: 0;
  min-height: 19px;
  padding: 2px;
}
.web-box { border: 1px solid #777; margin-bottom: 12px; padding: 8px; }
.web-box h3 { background: var(--navy); color: #fff; font: bold 13px Arial; padding: 5px; margin: -8px -8px 8px; }
.construction { background: repeating-linear-gradient(135deg, #ffd900 0 8px, #111 8px 16px); height: 13px; margin: 12px 0; }
.counter { background: #000; color: #0f0; font: bold 16px var(--font-mono); letter-spacing: 4px; padding: 3px 8px; display: inline-block; }
.badge88 { display: inline-block; border: 2px outset #ddd; background: #ddd; color: #000; font: bold 9px Arial; padding: 6px; margin: 4px; }

.geocities {
  background-color: #00002a;
  color: #ffff9c;
  text-align: center;
  min-height: 100%;
  padding: 20px;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 31px 37px;
}
.geocities h1 { color: #0ff; text-shadow: 2px 2px #f0f; }
.geocities a, .geocities .fake-link { color: #0ff; }

/* ============================== Kazaa / Napster =========================== */
.kazaa { background: #1a1a2e; color: #b8c6ff; padding: 0; }
.kazaa-tabs { display: flex; gap: 2px; border-bottom: 1px solid #445; padding: 2px 2px 0; flex-wrap: nowrap; overflow-x: auto; }
.kazaa-tabs button { border: 1px solid #445; border-bottom: 0; background: #2a2a44; color: #9af; margin: 0; padding: 3px 10px; min-height: 21px; flex: 0 0 auto; }
.kazaa-tabs button[aria-selected="true"] { background: #3a3a5e; color: #fff; }
.kazaa-body { padding: 8px; }
.speedbar { font: 10px var(--font-mono); color: #6f9; }
.napster-results { flex: 0 1 170px; min-height: 120px; }

/* ============================== Desfragmentador =========================== */
.defrag-screen { border: 2px inset #555; background: #000; padding: 3px; display: grid; gap: 1px; grid-template-columns: repeat(24, 1fr); }
.defrag-screen i { height: 11px; background: #d0d0d0; }
.defrag-screen i.moved { background: #0000a8; }
.defrag-screen i.fragmented { background: #a80000; }
.defrag-screen i.free { background: #101010; }
.defrag-legend { display: flex; gap: 10px; font-size: 10px; margin-top: 6px; flex-wrap: wrap; }
.defrag-legend b { display: inline-block; width: 10px; height: 10px; border: 1px solid #000; margin-right: 3px; vertical-align: -1px; }

/* ============================== Conexão discada =========================== */
.dialup-stages { flex: 1 1 120px; min-height: 60px; font: 12px var(--font-mono); background: #fff; border: 2px inset #aaa; padding: 8px; overflow: auto; }
.dialup-stages:empty { display: none; }
.dialup-stages .stage-ok::before { content: "✓ "; color: #006400; }
.dialup-stages .stage-fail::before { content: "✗ "; color: #c00; }
.dialup-modem { font: 11px var(--font-mono); color: #060; background: #000; padding: 4px 6px; overflow: hidden; white-space: nowrap; }
.dialup-speed { font: bold 16px var(--font-mono); }

/* ============================== Tucows / Cadê? ============================ */
.tucows-downloads { background: #fff; font: 12px Arial; }
.tucows-header { background: #d8dde7; color: #123b70; padding: 8px; font: bold 22px Arial; letter-spacing: -1px; border-bottom: 2px solid #8192ad; }
.tucows-menu { background: #e5e9ef; padding: 5px; font-size: 11px; }
.tucows-menu a { margin-right: 8px; }
.program-list { background: #fff; }
.program-item { border-bottom: 1px dotted #aaa; padding: 8px 4px; }
.program-item b { color: #00448c; }
.program-item .meta { font-size: 10px; color: #666; }
.installer-wizard { background: var(--silver); padding: 10px; border: 2px solid; border-color: var(--bevel-out); margin-top: 8px; }

.cade-page { background: #fff; font: 12px Arial; padding: 12px; }
.cade-logo { font: bold 38px Georgia, serif; color: #0066aa; text-align: center; letter-spacing: -1px; }
.cade-result { margin: 8px 0; }
.cade-result b { color: #00c; }
.cade-result small { color: #008000; }

/* ============================== Nero / WinZip / RealPlayer ================ */
.nero-flame { color: #ff5b00; font-weight: bold; }
.real-stage { background: #080808; color: #ccc; text-align: center; padding: 22px; }
.real-stage .big-play { font: 40px var(--font-mono); color: #4488cc; }
.zip-contents { font: 12px var(--font-mono); background: #fff; border: 2px inset #aaa; padding: 8px; min-height: 120px; }
.zip-contents { min-width: 0; overflow: auto; }

/* ============================== Outlook Express =========================== */
.mail-list { background: #fff; border: 2px inset #aaa; min-width: 0; min-height: 0; }
.mail-row { display: flex; gap: 8px; text-align: left; width: 100%; border: 0 !important; background: #fff !important; box-shadow: none !important; margin: 0 !important; padding: 6px !important; min-height: 28px; }
.mail-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mail-row.unread { font-weight: bold; }
.mail-row:hover { background: navy !important; color: #fff; }
.mail-preview { background: #fff; border: 2px inset #aaa; padding: 8px; min-height: 110px; overflow: auto; font: 12px var(--font-mono); white-space: pre-wrap; }

/* ============================== Norton AntiVirus ========================== */
.norton { background: #f5f00010; }
.scan-line { font: 11px var(--font-mono); }

/* Assistente de instalação: a faixa lateral encolhe sem pressionar o texto. */
.setup-stage { flex: 1 1 auto; min-height: 0; }
.setup-mark {
  flex: 0 0 96px;
  min-height: 120px;
  background: #000080;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font: bold 44px Arial;
}
.setup-copy { min-width: 0; padding: 14px; overflow: auto; }
.setup-copy h2 { margin-top: 0; }
.paint-file-picker { display: flex; flex: 1; min-width: 0; min-height: 0; flex-direction: column; gap: 6px; }
.paint-file-list { flex: 1; min-height: 90px; }
.paint-file-list .file-row[aria-selected="true"] { background: navy !important; color: #fff; }
.paint-file-list .file-row[aria-selected="true"] small { color: #fff; }
.paint-file-picker > .row { flex-shrink: 0; }
.paint-file-picker .button-row { flex-shrink: 0; }

@container (max-width: 380px) {
  .setup-stage { flex-direction: column; }
  .setup-mark { flex: 0 0 50px; min-height: 50px; font-size: 32px; }
  .setup-copy { padding: 8px; }
  .button-row { justify-content: flex-start; }
  .app-banner { gap: 8px; align-items: flex-start; }
  .app-banner > svg, .app-banner > .classic-icon { width: 32px; height: 32px; }
}

/* ============================== Tabela de museu =========================== */
.museum-table td:first-child { font-weight: bold; width: 33%; }
.museum-card { border-bottom: 1px dotted #aaa; padding: 8px 0; }

/* ============================== Tela azul ================================= */
#bsod {
  position: fixed;
  inset: 0;
  font: 16px var(--font-mono);
  background: #0000aa;
  color: #fff;
  padding: 12vh max(20px, 12vw);
  line-height: 1.6;
  cursor: default;
  z-index: 100001;
  overflow: auto;
}
#bsod b { background: #aaa; color: #0000aa; padding: 3px 12px; }
#bsod p { margin: 8px 0; }
#bsod button { background: #aaa; color: #0000aa; border: 0; padding: 5px 12px; margin: 8px 8px 0 0; font: inherit; }
#bsod .bsod-cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

#power-screen {
  position: fixed;
  inset: 0;
  background: #000;
  color: #ed8b2d;
  z-index: 100010;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font: 24px Arial;
  text-align: center;
  padding: 20px;
}
#power-screen small { font-size: 13px; color: #a55; margin-top: 8px; }
#power-screen button { margin-top: 35px; font: 13px Arial; padding: 8px 20px; }

@container (max-width: 650px) {
  .portal-grid { grid-template-columns: 1fr; }
  .portal-links { display: flex; flex-wrap: wrap; }
  .portal-links button { width: auto; }
  .browser-page { padding: 8px; }
  .sidebar { width: 105px; }
  .solitaire-board { padding: 6px; }
  .sol-top, .sol-tableau { gap: 4px; }
  .sol-top { margin-bottom: 14px; }
  .solitaire-board .pile { width: 54px; min-width: 54px; height: 76px; }
  .solitaire-board .card { width: 50px; height: 73px; padding: 3px; font-size: 14px; }
  .solitaire-board .card .suit { font-size: 21px; }
  .solitaire-board .pile.stock:empty::after { line-height: 70px; font-size: 27px; }
  .sol-top, .sol-tableau { min-width: 420px; }
}

@container (max-width: 440px) {
  .portal-grid { grid-template-columns: minmax(0, 1fr); }
  .kazaa-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .kazaa-tabs button { flex: 0 0 auto; }
  .solitaire-board { overflow: auto; }
}

/* Fallback para navegadores sem consultas de container. */
@media (max-width: 650px) {
  .portal-grid { grid-template-columns: 1fr; }
  .portal-links { display: flex; flex-wrap: wrap; }
  .portal-links button { width: auto; }
  .browser-page { padding: 8px; }
  .sidebar { width: 105px; }
  .solitaire-board { padding: 6px; }
  .sol-top, .sol-tableau { gap: 4px; }
  .sol-top { margin-bottom: 14px; }
  .solitaire-board .pile { width: 54px; min-width: 54px; height: 76px; }
  .solitaire-board .card { width: 50px; height: 73px; padding: 3px; font-size: 14px; }
  .solitaire-board .card .suit { font-size: 21px; }
  .solitaire-board .pile.stock:empty::after { line-height: 70px; font-size: 27px; }
  .sol-top, .sol-tableau { min-width: 420px; }
}
@media (max-width: 440px) {
  .portal-grid { grid-template-columns: minmax(0, 1fr); }
  .kazaa-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .kazaa-tabs button { flex: 0 0 auto; }
  .solitaire-board { overflow: auto; }
}