html, body { margin: 0; height: 100%; background: #000; overflow: hidden; font-family: "Courier New", monospace; color: #e8d9b0; }
body { position: fixed; inset: 0; touch-action: none; -webkit-user-select: none; user-select: none; }

canvas#game {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: #000;
}

/* Overlays DOM: se muestran según body[data-state] */
#overlays .ov {
  display: none; position: absolute; inset: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: rgba(0, 0, 0, 0.55); text-shadow: 2px 2px 0 #000;
}
body[data-state="loading"] #ov-loading,
body[data-state="title"] #ov-title,
body[data-state="pause"] #ov-pause,
body[data-state="dead"] #ov-dead,
body[data-state="win"] #ov-win { display: flex; }
body.portrait #ov-rotate { display: flex; z-index: 20; background: #000; }

.ov h1 { font-size: clamp(32px, 8vw, 72px); letter-spacing: 0.3em; margin: 0; color: #f2c94c; }
.ov h2 { font-size: clamp(22px, 5vw, 40px); margin: 0 0 8px; }
.ov .sub { margin: 4px 0 18px; opacity: 0.8; }
.ov .hint { margin: 8px 0; font-size: clamp(12px, 2.2vw, 18px); opacity: 0.85; }
.char-select { display: flex; gap: 18px; align-items: center; font-size: clamp(18px, 4vw, 30px); }
.char-select .arrow { opacity: 0.6; }
#btn-fs {
  margin-top: 14px; padding: 10px 22px; font: inherit; font-size: clamp(14px, 2.5vw, 20px);
  background: #3a2a1a; color: #f2c94c; border: 3px solid #f2c94c; border-radius: 6px; cursor: pointer;
}
#btn-fs[hidden] { display: none; }
.gp { font-size: clamp(11px, 2vw, 16px); opacity: 0.7; }
.gp.ok { color: #7ee787; opacity: 1; }

/* UI pixel art generada (PixelLab): se activa con clases has-font / has-panel / has-button */
body.has-font { font-family: "Duongeon", "Courier New", monospace; }
body.has-font .ov h1 { letter-spacing: 0.12em; font-weight: normal; }
body.has-font .ov h2, body.has-font .hint, body.has-font .char-select, body.has-font #btn-fs { font-weight: normal; }
.panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 24px 36px; }
body.has-panel .panel {
  width: min(88vw, 70vh * (var(--ui-panel-ar)), 640px);
  aspect-ratio: var(--ui-panel-ar);
  background: var(--ui-panel) center / 100% 100% no-repeat;
  image-rendering: pixelated; image-rendering: crisp-edges;
  padding: 7% 9%; box-sizing: border-box;
}
body.has-panel .panel.small { width: min(70vw, 50vh * (var(--ui-panel-ar)), 480px); }
/* el título lleva mucho contenido: usa la ventana alta si se generó */
body.has-window #ov-title .panel {
  width: min(88vw, 94vh * (var(--ui-window-ar)), 560px);
  height: min(94vh, 88vw / (var(--ui-window-ar)), calc(560px / (var(--ui-window-ar))));
  aspect-ratio: auto; overflow: hidden;
  background: var(--ui-window) center / 100% 100% no-repeat;
  padding: 6% 10%; gap: 0;
}
body.has-window #ov-title .emblem { height: clamp(32px, 13vh, 72px); margin-bottom: 0; }
body.has-font .ov h1 { font-size: clamp(26px, 6vw, 52px); line-height: 1; margin: 0; }
body.has-font .ov .sub { margin: 2px 0 8px; font-size: clamp(10px, 1.8vw, 14px); }
body.has-font .ov .hint { font-size: clamp(10px, 1.7vw, 14px); margin: 4px 0; line-height: 1.3; }
body.has-font .char-select { font-size: clamp(16px, 3.4vw, 26px); }
body.has-button #btn-fs {
  color: #f2c94c; text-shadow: 1px 1px 0 #000; white-space: nowrap;
  min-width: 240px; font-size: clamp(12px, 2vw, 16px); margin-top: 8px;
}
body.has-font .gp { font-size: clamp(10px, 1.6vw, 13px); }
body.has-panel #overlays .ov { background: rgba(0, 0, 0, 0.35); }
.emblem { display: block; height: clamp(48px, 14vh, 96px); image-rendering: pixelated; margin-bottom: 4px; }
.emblem[hidden] { display: none; }
body.has-button #btn-fs {
  background: var(--ui-button) center / 100% 100% no-repeat; border: 0; border-radius: 0;
  image-rendering: pixelated; aspect-ratio: var(--ui-button-ar); min-width: 180px; padding: 0 28px;
  color: #2a1a0a; text-shadow: 0 1px 0 #f2c94c;
}
body.has-button #btn-fs:active { filter: brightness(0.8); transform: translateY(2px); }
#gp-icon { height: 1.2em; vertical-align: middle; margin-right: 6px; image-rendering: pixelated; }
#gp-icon[hidden] { display: none; }

/* Botones táctiles de respaldo */
#touch { position: absolute; inset: 0; pointer-events: none; }
#touch[hidden] { display: none; }
#touch .pad { position: absolute; bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; gap: 12px; pointer-events: auto; }
#touch .pad.left { left: calc(16px + env(safe-area-inset-left)); }
#touch .pad.right { right: calc(16px + env(safe-area-inset-right)); }
#touch button {
  width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(242, 201, 76, 0.7);
  background: rgba(0, 0, 0, 0.35); color: #f2c94c; font: inherit; font-size: 22px; touch-action: none;
}
#touch button:active { background: rgba(242, 201, 76, 0.35); }