:root {
  --pagina-fondo: #eaded3;
  --pagina-texto: #3b2928;
  --pagina-luz-1: rgba(201, 87, 80, 0.13);
  --pagina-luz-2: rgba(229, 140, 125, 0.16);
  --pagina-gradiente-1: #fffaf2;
  --pagina-gradiente-2: #eadbd0;
  --juego-fondo: #f7eee5;
  --juego-borde: rgba(151, 73, 65, 0.25);
  --juego-sombra: rgba(78, 39, 33, 0.2);
  --estado-texto: #6f4d49;
  --estado-destacado: #a83d3f;
  --estado-acento: #c95750;
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background: var(--pagina-fondo);
  color: var(--pagina-texto);
}

:root[data-tema="moderno"] {
  --pagina-fondo: #d8ebee;
  --pagina-texto: #173a4a;
  --pagina-luz-1: rgba(82, 199, 184, 0.2);
  --pagina-luz-2: rgba(38, 103, 201, 0.16);
  --pagina-gradiente-1: #f6fcfc;
  --pagina-gradiente-2: #c5dfe4;
  --juego-fondo: #e7f4f6;
  --juego-borde: rgba(22, 140, 145, 0.34);
  --juego-sombra: rgba(7, 27, 44, 0.24);
  --estado-texto: #4d6e78;
  --estado-destacado: #0f6f78;
  --estado-acento: #168c91;
}

:root[data-tema="nocturno"] {
  --pagina-fondo: #061321;
  --pagina-texto: #eff6fb;
  --pagina-luz-1: rgba(46, 211, 216, 0.18);
  --pagina-luz-2: rgba(36, 92, 180, 0.24);
  --pagina-gradiente-1: #0b2134;
  --pagina-gradiente-2: #020912;
  --juego-fondo: #081a2a;
  --juego-borde: rgba(92, 215, 222, 0.42);
  --juego-sombra: rgba(0, 7, 16, 0.72);
  --estado-texto: #b8cedb;
  --estado-destacado: #f5f9fc;
  --estado-acento: #48d4da;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 12%, var(--pagina-luz-1), transparent 28%),
    radial-gradient(circle at 86% 82%, var(--pagina-luz-2), transparent 30%),
    linear-gradient(150deg, var(--pagina-gradiente-1) 0%, var(--pagina-gradiente-2) 100%);
}

.game-shell {
  width: calc(100vw - 20px);
  max-width: min(1500px, calc(177.77778vh - 72px));
  padding: 0;
}

#juego {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--juego-borde);
  border-radius: 14px;
  background: var(--juego-fondo);
  box-shadow:
    0 24px 70px var(--juego-sombra),
    0 0 0 1px rgba(255, 255, 255, 0.65) inset;
}

:root[data-tema="nocturno"] #juego {
  box-shadow:
    0 28px 90px rgba(0, 4, 12, 0.82),
    0 0 42px rgba(30, 170, 187, 0.2),
    0 0 0 1px rgba(176, 235, 243, 0.22) inset;
}

#juego canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.boot-status {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px;
  color: var(--estado-texto);
  text-align: center;
  background: var(--juego-fondo);
}

.boot-status[hidden] {
  display: none;
}

.boot-status strong {
  color: var(--estado-destacado);
  font-size: clamp(19px, 2vw, 26px);
}

.boot-status span {
  font-size: clamp(13px, 1.4vw, 16px);
}

.boot-status__pulse {
  width: 44px;
  height: 44px;
  border: 4px solid color-mix(in srgb, var(--estado-acento) 20%, transparent);
  border-top-color: var(--estado-acento);
  border-radius: 50%;
  animation: boot-spin 0.8s linear infinite;
}

.boot-status--error {
  background: #fff8f1;
}

.boot-status--error button {
  margin-top: 8px;
  padding: 11px 22px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  background: #c95750;
}

@keyframes boot-spin {
  to {
    transform: rotate(360deg);
  }
}

.file-launch-warning {
  width: min(620px, calc(100% - 40px));
  margin: clamp(42px, 11vh, 120px) auto 0;
  padding: clamp(24px, 5vw, 46px);
  border: 1px solid rgba(201, 87, 80, 0.35);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 250, 243, 0.98), rgba(244, 222, 211, 0.98));
  box-shadow: 0 20px 60px rgba(78, 39, 33, 0.18);
}

.file-launch-warning__tag {
  margin-bottom: 12px;
  color: #a83d3f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.file-launch-warning h1 {
  margin: 0 0 14px;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.05;
}

.file-launch-warning p,
.file-launch-warning li {
  color: #6f5b56;
  font-size: clamp(14px, 2vw, 17px);
  line-height: 1.55;
}

.file-launch-warning p {
  margin: 0 0 18px;
}

.file-launch-warning ol {
  margin: 0;
  padding-left: 24px;
}

.file-launch-warning strong {
  color: #54282c;
}

.game-shell__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 28px;
  padding-top: 5px;
}

.game-shell__notice {
  margin: 0;
  color: var(--pagina-texto);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  opacity: 0.76;
  text-align: center;
}

.game-shell__ai-link {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--estado-acento) 48%, transparent);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--pagina-texto);
  background: color-mix(in srgb, var(--juego-fondo) 78%, transparent);
  font: inherit;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.game-shell__ai-link:hover,
.game-shell__ai-link:focus-visible {
  border-color: var(--estado-acento);
  color: var(--estado-destacado);
  outline: 2px solid color-mix(in srgb, var(--estado-acento) 45%, transparent);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .game-shell {
    width: 100vw;
    max-width: min(100vw, 177.77778vh);
    padding: 0;
  }

  .game-shell__footer {
    position: fixed;
    right: 52px;
    bottom: 8px;
    z-index: 17000;
    min-height: 0;
    padding: 0;
  }

  .game-shell__notice {
    display: none;
  }

  .game-shell__ai-link {
    border-color: rgba(87, 221, 225, 0.72);
    color: #effbff;
    background: rgba(5, 27, 42, 0.94);
    box-shadow: 0 8px 24px rgba(0, 8, 18, 0.38);
  }

  #juego {
    max-height: 100vh;
    border-radius: 0;
  }

  .file-launch-warning {
    margin-top: 20px;
  }
}