:root { --papel: #f3efe6; --tinta: #1d1a26; --acento: #e8a33a; --rojo: #c8423b; --suave: #6d6680; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--papel); color: var(--tinta);
  font: 15px/1.35 ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; overscroll-behavior: none; }
canvas.jw { display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
.jw-barra { position: fixed; top: 0; left: 0; right: 0; display: flex; gap: 6px; align-items: center;
  padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); z-index: 20; pointer-events: none; }
.jw-barra > * { pointer-events: auto; }
.jw-titulo { flex: 1; font-weight: 700; text-shadow: 0 1px 0 #fff8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jw-btn { display: inline-block; border: 2px solid var(--tinta); background: #fffdf7; color: var(--tinta); padding: 6px 10px;
  font: inherit; font-weight: 700; text-decoration: none; box-shadow: 3px 3px 0 var(--tinta); cursor: pointer; border-radius: 0; }
.jw-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.jw-ia { background: var(--acento); }
.jw-modal { position: fixed; inset: 0; background: #1d1a26cc; z-index: 50; display: grid; place-items: center; padding: 16px; }
.jw-caja { background: var(--papel); border: 3px solid var(--tinta); box-shadow: 6px 6px 0 var(--tinta); padding: 14px;
  width: min(560px, 100%); max-height: 100%; overflow: auto; }
.jw-caja h2 { margin: 0 0 8px; font-size: 18px; }
.jw-caja img { width: 100%; image-rendering: pixelated; border: 2px solid var(--tinta); }
.jw-caja textarea { width: 100%; height: 110px; font: 12px/1.3 inherit; font-family: inherit; border: 2px solid var(--tinta); padding: 6px; background: #fff; }
.jw-paso { font-size: 13px; color: var(--suave); }
.jw-fila { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.jw-gen .jw-btn { font-size: 13px; padding: 4px 8px; }
.jw-cerrar { width: 100%; margin-top: 6px; }
.jw-aviso { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); background: var(--tinta); color: #fff;
  padding: 10px 16px; font-weight: 700; z-index: 40; pointer-events: none; text-align: center; }
.jw-hud { position: fixed; z-index: 15; font-weight: 700; color: #fff; text-shadow: 2px 2px 0 #000; pointer-events: none; }
.jw-panel { position: fixed; inset: 0; display: grid; place-items: center; z-index: 30; background: #1d1a2699; padding: 16px; }
.jw-panel .jw-caja { text-align: center; }
.jw-panel p { margin: 6px 0 12px; }
.jw-ic { padding: 6px 7px; }
.jw-reglas ol { text-align: left; padding-left: 20px; margin: 10px 0; }
.jw-reglas li { margin-bottom: 6px; }
@media (max-width: 420px) { .jw-barra { gap: 4px; padding-left: 6px; padding-right: 6px; } .jw-btn { padding: 5px 7px; font-size: 13px; } .jw-titulo { font-size: 13px; } }
/* estilo estilizado en los juegos: color más rico, luz cálida y viñeta (el mapa tiene su propio dibujo) */
.jw-estilizado body:not(.jw-mapa) canvas { filter: saturate(1.18) contrast(1.06) brightness(1.03); }
.jw-estilizado body:not(.jw-mapa)::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  background: radial-gradient(ellipse at 30% 20%, rgba(255, 196, 120, .16), transparent 55%), radial-gradient(ellipse at center, transparent 55%, rgba(20, 14, 40, .38) 100%); }