/* GENERADO: editar src/ o styles/ y ejecutar npm run build. Orden: sources.manifest.json. */
/* Bordes y tipografía pixel, con lectura cómoda y áreas de interacción claras. */
/* El menú encaja sus dos columnas: los nombres largos no fuerzan desplazamiento lateral. */
body.pixel-system .menu {
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--pixel-edge) var(--pixel-panel);
}
body.pixel-system .menu__apps {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.pixel-system .menu__apps button {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
body.pixel-system .menu__apps button > span {
  flex-shrink: 0;
}
@media (min-width: 640px) {
  body.pixel-system .menu {
    width: 380px;
    max-width: calc(100vw - 24px);
  }
}
.login .boot-skip {
  opacity: 1;
  color: #b9ffce;
  border: 2px solid #80c998;
  font: 17px var(--font-mono);
  padding: 12px 16px;
}
@media (max-height: 500px) {
  .login .boot-skip {
    bottom: 12px;
    padding: 8px 12px;
  }
}
/* Los textos secundarios conservan contraste con la paleta activa. */
body.pixel-system :is(.folder small, .clink small, #clock__date) {
  color: var(--pixel-muted);
}
.project-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0;
}
.project-facts > div {
  padding: 14px;
  border: 2px solid var(--pixel-edge);
  background: var(--pixel-raised);
}
.project-facts dt {
  font: 15px/1.4 var(--font-ui);
  color: var(--pixel-muted);
}
.project-facts dd {
  font: 32px/1.3 var(--font-mono);
  color: var(--accent);
  margin: 4px 0 0;
}
.project-demo {
  margin: 28px 0 0;
}
.project-demo video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  background: #0a181c;
  border: 2px solid var(--pixel-edge);
}
.project-demo figcaption {
  font: 16px/1.6 var(--font-ui);
  margin-top: 12px;
  color: var(--pixel-ink);
}
.project-demo a {
  color: var(--accent);
  text-underline-offset: 4px;
}
@media (max-width: 420px) {
  .project-facts {
    grid-template-columns: 1fr;
  }
  .project-facts > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .project-facts dd {
    margin: 0;
  }
}
body.pixel-system .win__body {
  font-size: 17px;
  line-height: 1.55;
}
body.pixel-system
  .win__body
  :is(
    .card-kicker,
    .app-title,
    small,
    .game-card__bottom,
    .game-card__bottom span,
    .wall-tile small,
    .wallpaper-option small,
    .vault-status,
    .vault-lock-caption,
    .pref-row,
    .tag,
    .chip
  ) {
  font-family: var(--font-mono);
  font-size: 17px !important;
  line-height: 1.35;
  letter-spacing: 0.025em;
}
body.pixel-system .win__body :is(.bio, p) {
  line-height: 1.65;
}
body.pixel-system .win__body :is(h2, h3) {
  line-height: 1.3;
}
body.pixel-system .win__body :is(.btn, .jg-chip, .cursor-option) {
  font-size: 15px;
  line-height: 1.3;
}
body.pixel-system .win-btn.max::after {
  content: "";
  display: block;
  width: 11px;
  height: 10px;
  border: 2px solid currentColor;
  position: static;
  transform: none;
  margin: auto;
  box-sizing: border-box;
}
body.pixel-system .win-btn.max {
  display: grid;
  place-items: center;
}
body.pixel-system .window.maximized .win-btn.max::after {
  box-shadow:
    3px -3px 0 -1px var(--pixel-panel),
    3px -3px 0 0 currentColor;
}
body.pixel-system .window :is(.os-icon, .folder .os-icon) {
  image-rendering: pixelated;
}
body.pixel-system .icons {
  inset: 58px 20px 115px 20px !important;
  width: calc(100% - 40px) !important;
  display: grid !important;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--desktop-rows, 5), 99px);
  grid-auto-columns: 106px;
  align-content: start;
  justify-content: start;
  gap: 5px 10px;
  overflow: auto;
  scrollbar-width: thin;
}
body.pixel-system .icons .icon {
  display: flex !important;
  min-height: 96px;
  width: 106px !important;
  height: 96px;
}
body.pixel-system .icon .lbl {
  font-size: 14px;
  line-height: 1.25;
  max-width: 106px;
}
body.pixel-system .window .universe-projects {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
body.pixel-system .universe-projects .folder {
  color: var(--pixel-ink);
  text-align: left;
  text-decoration: none;
  min-height: 230px;
  align-items: flex-start;
  padding: 20px;
  gap: 9px;
}
.universe-projects .g {
  height: 76px;
  display: flex;
  align-items: center;
}
body.pixel-system .universe-projects .g .os-icon {
  width: 72px;
  height: 72px;
}
.universe-projects .n {
  font-size: 21px;
}
.project-go {
  font: 17px var(--font-mono);
  color: var(--accent);
  margin-top: auto;
}
.pixel-project-detail {
  max-width: 720px;
  margin: auto;
}
.project-large-art {
  display: block;
  margin: 0 0 24px;
}
.project-large-art .os-icon {
  width: 96px;
  height: 96px;
}
.pixel-study-line {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 30px;
  font: 17px var(--font-mono);
  color: var(--accent);
  flex-wrap: wrap;
}
.pixel-study-line i {
  width: 16px;
  height: 3px;
  background: var(--pixel-edge);
}
.game-card__number .os-icon {
  width: 66px;
  height: 66px;
  display: block;
}
body.pixel-system .game-card {
  gap: 10px;
}
.arcade-heading h2 {
  font-size: 30px;
}
.arcade-entry {
  position: relative;
  min-height: 510px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  padding: 8px 12px 22px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 65%, #47306544, transparent 65%);
}
.arcade-entry-heading h2 {
  font-size: 26px;
  margin: 8px 0;
}
.arcade-entry-heading p {
  font: 19px var(--font-mono);
  margin: 0;
  color: var(--pixel-muted);
}
.arcade-machine-stage {
  position: relative;
  width: 235px;
  flex-shrink: 0;
  aspect-ratio: 180/240;
  margin: 4px 0 0;
}
.coin-machine {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(6px 8px 0 #0006);
}
.coin-target {
  position: absolute;
  left: 54%;
  top: 73%;
  width: 27%;
  height: 11%;
  border: 2px dashed #ffdf8b;
  z-index: 2;
  box-shadow: 0 0 0 4px #ffd06c15;
  animation: coin-slot 1s steps(2) infinite;
}
.arcade-floor {
  position: absolute;
  inset: 77% -100% -6%;
  background: repeating-conic-gradient(#60447922 0% 25%, #202d3c11 0% 50%) 0/22px 22px;
  transform: perspective(110px) rotateX(40deg);
  z-index: 0;
}
.arcade-coin {
  touch-action: none;
  position: relative;
  z-index: 4;
  background: none;
  border: 0;
  width: 54px;
  height: 54px;
  padding: 0;
  cursor: grab;
  filter: drop-shadow(4px 4px 0 #17111a);
  flex-shrink: 0;
}
.arcade-coin .os-icon {
  width: 100%;
  height: 100%;
}
.arcade-coin.dragging {
  cursor: grabbing;
  transition: none;
}
.arcade-coin:not(.dragging) {
  transition: transform 0.25s steps(5);
}
.coin-instruction {
  font: 17px var(--font-mono);
  letter-spacing: 0.03em;
  margin: 0;
  color: #f4d794;
}
.arcade-entry .coin-accessible {
  font-size: 14px !important;
  margin: 0;
}
.machine-stars {
  animation: machine-spark 1.8s steps(2) infinite;
}
.coin-over .coin-target {
  background: #ffdb7044;
  box-shadow: 0 0 24px #ffd56b;
}
.coin-inserted .coin-target {
  animation: none;
  border-color: #8ce6ac;
  background: #8ce6ac55;
}
.coin-inserted .arcade-coin {
  animation: coin-consumed 0.45s steps(6) forwards;
  pointer-events: none;
}
.coin-inserted .coin-machine {
  animation: machine-boot 1s steps(6) both;
}
.arcade-revealed {
  animation: arcade-reveal 0.45s steps(6) both;
}
@keyframes coin-slot {
  50% {
    border-color: #ad6c3c;
  }
}
@keyframes machine-spark {
  50% {
    opacity: 0.5;
    transform: translateY(-2px);
  }
}
@keyframes coin-consumed {
  to {
    opacity: 0;
    scale: 0.2;
  }
}
@keyframes machine-boot {
  30% {
    filter: brightness(2) drop-shadow(0 0 8px #8ce6ac);
  }
  70% {
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}
@keyframes arcade-reveal {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.vault-opening {
  display: none !important;
}
.vault-engine {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 28px;
  padding: 16px;
  border: 2px solid var(--pixel-edge);
  background: linear-gradient(90deg, #112c36, #091b24);
  overflow: hidden;
}
.vault-engine > span {
  font: 17px var(--font-mono);
  color: #d6dfbb;
  max-width: 160px;
}
.vault-pixel-door {
  width: 240px;
  max-width: 55%;
  flex-shrink: 0;
}
.vault-door-half,
.vault-wheel {
  transition:
    transform 1.3s steps(12),
    opacity 0.8s;
  transform-box: fill-box;
  transform-origin: center;
}
.vault-engine-open .vault-wheel {
  transform: rotate(270deg);
  opacity: 0;
}
.vault-engine-open .vault-door-left {
  transform: translateX(-52px);
}
.vault-engine-open .vault-door-right {
  transform: translateX(52px);
}
body.pixel-system .vault-lock {
  position: relative;
  min-height: 180px;
  background: linear-gradient(135deg, var(--pixel-raised), var(--pixel-panel));
}
.vault-lock pre {
  display: none !important;
}
.vault-lock-pixel {
  display: block;
  position: relative;
  width: 86px;
  height: 86px;
  margin: 12px auto 18px;
}
.vault-lock-pixel .os-icon {
  width: 86px;
  height: 86px;
  filter: drop-shadow(4px 4px 0 #061316);
  transition: transform 0.6s steps(6);
}
.vault-lock:hover .os-icon {
  transform: translateY(-5px);
}
.vault-lock.unlocked .os-icon {
  transform: translateY(-6px) rotate(-12deg);
}
.vault-lock.unlocked .vault-lock-pixel i {
  position: absolute;
  display: block;
  width: 5px;
  height: 5px;
  background: var(--accent);
  animation: vault-spark 2.4s steps(8) infinite;
}
.vault-lock-pixel i:nth-of-type(1) {
  left: -8px;
  top: 10px;
}
.vault-lock-pixel i:nth-of-type(2) {
  right: -8px;
  top: 30px;
  animation-delay: 0.6s !important;
}
.vault-lock-pixel i:nth-of-type(3) {
  left: 8px;
  bottom: -4px;
  animation-delay: 1.2s !important;
}
.vault-lock-pixel i:nth-of-type(4) {
  right: 3px;
  top: -8px;
  animation-delay: 1.8s !important;
}
@keyframes vault-spark {
  0%,
  100% {
    opacity: 0;
    transform: translateY(8px);
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
    transform: translateY(-15px);
  }
}
#pixel-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 2;
  image-rendering: pixelated;
}
body.has-pixel-wallpaper #ascii-wall {
  display: none !important;
}
body.has-pixel-wallpaper #ascii-wall[hidden] {
  display: none !important;
}
body.pixel-system.universe-photo.has-god-of-war #bg {
  background:
    linear-gradient(#08142022, #08142044),
    url("assets/wallpapers/god-of-war-ragnarok.jpg") center/cover no-repeat !important;
  image-rendering: auto !important;
}
body.universe-photo #bg::before {
  display: none !important;
}
.gow-preview {
  background: url("assets/wallpapers/god-of-war-ragnarok.jpg") center/cover no-repeat;
}
body.pixel-system .ascii-stage,
body.pixel-system #os-screensaver .saver-art {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: #c7f5d7 !important;
  color: #c7f5d7 !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  text-shadow: 2px 2px 0 #051912 !important;
  letter-spacing: 0 !important;
}
body.pixel-system .ascii-stage {
  min-height: 230px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.12 !important;
  padding: 25px 0;
  background: #071a22 !important;
  border: 2px solid var(--pixel-edge);
  overflow: hidden;
}
body.pixel-system #os-screensaver {
  background: #031014 !important;
  z-index: 10000;
}
.saver-field {
  opacity: 0.6 !important;
}
#os-screensaver .saver-stage {
  inset: 12% 2% 18%;
  gap: 30px;
}
#os-screensaver .saver-art {
  line-height: 1.05 !important;
  filter: drop-shadow(0 0 6px #75e4c344);
}
#os-screensaver
  :is(.saver-subtitle, .saver-notes, .saver-scene, .saver-command, .saver-exit, .saver-meta) {
  font: 18px/1.4 var(--font-mono) !important;
  color: #c4e6d7 !important;
  letter-spacing: 0.04em !important;
}
.milo-extra-face {
  display: none;
}
#mascot-button[data-mood="happy"] .milo-extra-face {
  display: block;
}
#mascot-button[data-mood="happy"] .milo-extra-face :not(.milo-happy-eyes) {
  display: none;
}
#mascot-button[data-mood="surprised"] .milo-extra-face {
  display: block;
}
#mascot-button[data-mood="surprised"] .milo-extra-face :not(.milo-surprised-mouth) {
  display: none;
}
#mascot-button[data-mood="thinking"] .milo-extra-face {
  display: block;
}
#mascot-button[data-mood="thinking"] .milo-extra-face :not(.milo-thinking) {
  display: none;
}
@media (max-width: 820px) {
  body.pixel-system .icons {
    inset: 56px 12px 106px 12px !important;
    width: calc(100% - 24px) !important;
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 99px;
    overflow: auto;
    gap: 7px;
  }
  body.pixel-system .icons .icon {
    width: 100% !important;
  }
  .arcade-machine-stage {
    width: 200px;
  }
  .arcade-entry-heading h2 {
    font-size: 21px;
  }
  .arcade-entry {
    min-height: 480px;
    padding: 0 0 12px;
  }
  .arcade-heading h2 {
    font-size: 25px;
  }
  .vault-engine {
    gap: 12px;
    padding: 10px;
  }
  .vault-engine > span {
    font-size: 15px;
  }
  .universe-projects {
    gap: 12px;
  }
}
@media (max-width: 480px) {
  body.pixel-system .window .universe-projects {
    grid-template-columns: 1fr;
  }
  body.pixel-system .universe-projects .folder {
    min-height: 205px;
    padding: 18px;
  }
  .arcade-machine-stage {
    width: 175px;
  }
  .arcade-entry {
    min-height: 450px;
  }
  .arcade-entry-heading p {
    font-size: 17px;
  }
  .arcade-entry .coin-instruction {
    font-size: 15px;
  }
  .vault-engine > span {
    font-size: 14px;
  }
  .vault-locks {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .vault-lock-pixel,
  .vault-lock-pixel .os-icon {
    width: 64px;
    height: 64px;
  }
  body.pixel-system .vault-lock {
    min-height: 150px;
    padding: 12px 5px;
  }
  #os-screensaver .saver-terminal-head {
    flex-direction: column;
    align-items: start;
    gap: 7px;
  }
  #os-screensaver
    :is(.saver-subtitle, .saver-notes, .saver-scene, .saver-command, .saver-exit, .saver-meta) {
    font-size: 15px !important;
  }
}
.pixel-lock-shackle {
  transform-origin: 7px 15px;
  transition: transform 0.8s steps(8);
}
.unlocked .pixel-lock-shackle {
  transform: translateY(-3px) rotate(-22deg);
}
#mascot-button[data-mood="happy"] .milo-base-eyes {
  display: none;
}
/* Un único lenguaje visual: la luz sigue la silueta de Milo. */
body.pixel-system #mascot-button,
body.pixel-system #mascot-button:is(:hover, :focus, :focus-visible, :active) {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
  border-radius: 0;
}
body.pixel-system #mascot-button:is(:hover, :focus-visible) .mascot-svg {
  filter: drop-shadow(2px 0 0 #f5b8d7) drop-shadow(-2px 0 0 #f5b8d7) drop-shadow(0 2px 0 #f5b8d7)
    drop-shadow(0 -2px 0 #f5b8d7) !important;
}
.pixel-home-launchers > button > .mascot-svg {
  width: 52px;
  height: 44px;
  flex-shrink: 0;
  image-rendering: pixelated;
  filter: drop-shadow(2px 2px 0 #0006);
}
.home-computer .pixel-portrait {
  background: none;
  border: 0;
  box-shadow: none;
}
.home-computer .pixel-portrait .os-icon {
  width: 114px;
  height: 114px;
}
body.pixel-system .pixel-home h1 {
  font-size: 34px;
  line-height: 1.18;
}
body.pixel-system .pixel-home-hero {
  padding: 28px 0;
}
body.pixel-system .pixel-home-launchers > button {
  min-height: 134px;
}
/* Ajustes permanece visible en el dock; las ventanas abiertas tienen su zona. */
body.pixel-system .taskbar {
  max-width: calc(100vw - 150px);
}
body.pixel-system .taskbar__apps {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
body.pixel-system .taskbar__apps:empty {
  display: none;
}
body.pixel-system #launch-settings {
  display: none;
}
.wallpaper-motion-note {
  font: 16px/1.45 var(--font-mono);
  color: var(--pixel-muted);
  margin: 8px 0 16px;
  max-width: 650px;
}
body.pixel-system select:disabled {
  opacity: 0.65;
  cursor: default;
}
body.pixel-system .icons {
  grid-template-columns: repeat(2, 104px);
  grid-template-rows: repeat(3, 99px);
  grid-auto-flow: row;
  align-content: start;
  width: 228px !important;
}
@media (max-width: 820px) {
  body.pixel-system .icons {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(2, 99px);
    width: calc(100% - 24px) !important;
  }
  body.pixel-system .taskbar {
    width: calc(100% - 16px);
    max-width: none;
    height: 68px;
    bottom: 8px;
    gap: 4px;
    padding: 4px;
  }
  body.pixel-system .taskbar__start {
    width: 38px;
    min-width: 38px;
    height: 48px;
  }
  body.pixel-system .pixel-pinned {
    gap: 2px;
    flex-shrink: 0;
  }
  body.pixel-system .pixel-pinned > button {
    width: 44px;
    min-width: 44px;
    height: 52px;
  }
  body.pixel-system .pixel-pinned > button .os-icon {
    width: 29px;
    height: 29px;
  }
  body.pixel-system .taskbar__apps {
    max-width: 80px;
    flex: 1 1 40px;
  }
  body.pixel-system .taskbar__tray {
    padding-left: 5px;
    flex-shrink: 0;
  }
  body.pixel-system #clock__time {
    font-size: 18px;
  }
  body.pixel-system #clock__date {
    display: none;
  }
  body.pixel-system #desktop-tools {
    display: none;
  }
  body.pixel-system #mascot-button {
    bottom: 86px;
  }
  body.pixel-system .pixel-home h1 {
    font-size: 29px;
  }
  body.pixel-system .pixel-home-launchers > button {
    min-height: 82px;
  }
  body.pixel-system .pixel-home-footer > span {
    max-width: 190px;
  }
}
body.reduce-motion :is(.machine-stars, .coin-target, .vault-lock-pixel i) {
  animation: none !important;
}
.reduce-motion .vault-door-half,
.reduce-motion .vault-wheel {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .machine-stars,
  .coin-target,
  .vault-lock-pixel i {
    animation: none !important;
  }
}
.home-brand-section {
  padding: 24px 0;
  border-top: 2px solid var(--pixel-edge);
}
.home-brand-section h2 {
  font: 600 23px/1.3 var(--font-ui);
  margin: 9px 0 13px;
}
.home-brand-section h3 {
  font: 600 18px/1.3 var(--font-ui);
  margin: 0 0 10px;
}
.home-brand-section p {
  font: 16px/1.7 var(--font-ui);
  color: var(--pixel-ink);
  max-width: 68ch;
  margin: 0 0 16px;
}
.home-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.home-proof-grid article {
  padding: 18px;
  border: 2px solid var(--pixel-edge);
  background: var(--pixel-raised);
}
.home-interest-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.home-interest-list li {
  border: 2px solid var(--pixel-edge);
  padding: 9px 12px;
  font: 16px var(--font-ui);
  background: var(--pixel-raised);
}
.home-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.home-contact-links a {
  color: var(--accent);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
  font: 16px/1.6 var(--font-ui);
}
@media (max-width: 600px) {
  .home-proof-grid {
    grid-template-columns: 1fr;
  }
  .home-brand-section {
    padding: 20px 0;
  }
}