:root {
  --maxw: 1200px;
  --frame-h: 500px;
  --canvas-h: 800px;
  --scroll-track: #111;
  --scroll-thumb: #777;
  --scroll-border: #777;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #111;
  background: #f8f8f8;
}

.wrap {
  max-width: var(--maxw);
  margin: 40px auto;
  padding: 0 16px;
  text-align: center;
}

h1 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3vw, 48px);
  letter-spacing: 0.02em;
}

.lead {
  margin: 0 auto 24px;
  max-width: 60ch;
  line-height: 1.5;
  color: #333;
}

/* Marco con scroll vertical */
.prisma-frame {
  width: var(--maxw);
  height: var(--frame-h);       /* 500px visible */
  margin: 0 auto 24px;
  border: 2px solid #000;       /* borde negro */
  overflow-y: auto;             /* forzar scroll vertical cuando excede */
  overflow-x: hidden;
  background: #fff;             /* contraste con el mapa */
}

/* Canvas sin reescalado (1:1) */
.prisma-frame canvas {
  display: block;
  width: var(--maxw);
  height: var(--canvas-h);      /* 800px por defecto, luego JS ajusta a 17.500 */
}

/* ===== Scrollbar (scoped al frame) ===== */
/* Firefox */
.prisma-frame {
  scrollbar-color: var(--scroll-thumb) var(--scroll-track); /* thumb gris, track negro */
  scrollbar-width: auto; /* mayor grosor en FF */
}

/* WebKit/Blink */
.prisma-frame::-webkit-scrollbar {
  width: 18px;                          /* más ancha */
  background: var(--scroll-track);      /* negro */
}

.prisma-frame::-webkit-scrollbar-track {
  background: var(--scroll-track);      /* negro */
  border-left: none;                    /* sin “borde” */
}

.prisma-frame::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);      /* gris */
  border: none;                         /* sin bordes */
  border-radius: 0;                     /* sin redondeo */
}

.prisma-frame::-webkit-scrollbar-thumb:hover {
  filter: brightness(0.9);              /* leve feedback al hover */
}

.actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 8px auto 40px;
}

.actions button {
  appearance: none;
  border: 2px solid #111;
  background: #fff;
  padding: 10px 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}

.actions button:hover {
  transform: translateY(-1px);
  background: #f0f0f0;
}

@media (max-width: 1240px) {
  /* Mantener 1200px de ancho; permitir scroll horizontal de página si no entra */
  .wrap { padding: 0; }
  body { overflow-x: auto; }
  .prisma-frame { width: 1200px; }
}

/* Barra de estado */
.status {
  margin: 8px auto 24px;
  max-width: var(--maxw);
  text-align: left;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: #555;
}
.status--secondary {
  margin-top: -12px;
  color: #333;
  opacity: .85;
}

/* ===== INFO ===== */
.info-view { max-width: var(--maxw); margin: 24px auto; text-align: left; }
.info-controls { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font: 14px/1.4 system-ui, sans-serif; flex-wrap: wrap; }
.info-controls input { width: 160px; padding: 6px 8px; }

.info-dpad { display: grid; gap: 6px; place-items: center; }
.info-dpad .hrow { display: flex; gap: 6px; }
.info-controls button { padding: 6px 10px; border: 1px solid #000; background: #eee; cursor: pointer; }
.info-controls button:active { transform: translateY(1px); }

.info-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0,1fr));
  gap: 8px;
}
.info-cell {
  border: 1px solid #000; aspect-ratio: 1/1; position: relative; outline: none; cursor: pointer;
}
.info-cell::after {
  content: attr(data-id);
  position: absolute; left: 6px; bottom: 6px;
  font: 11px/1 ui-monospace,monospace; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.info-cell[aria-disabled="true"] { filter: grayscale(1) brightness(.5); }
.info-cell:focus { box-shadow: 0 0 0 3px #09f inset; }

/* Tooltip que sigue al mouse */
.hover-tip {
  position: fixed;
  top: 0; left: 0; /* se reposiciona por JS */
  transform: translate(14px, 14px);
  padding: 8px 10px;
  background: rgba(20,20,20,.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  pointer-events: none;          /* no interfiere con el mouse */
  z-index: 9999;
  max-width: 280px;
  white-space: nowrap;
}

/* Flechita (opcional) */
.hover-tip::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  background: inherit;
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
  transform: rotate(45deg);
  left: 6px; top: 6px;
}

/* Cuando el tooltip se invierte (para no salir de la pantalla) */
.hover-tip[data-pos="left"] { transform: translate(-14px, 14px); }
.hover-tip[data-pos="left"]::after { left: auto; right: 6px; transform: rotate(225deg); }

.hover-tip .muted { opacity: .75; }

@media (max-width: 640px) {
  .hover-tip {
    padding: 10px 12px;
    font-size: 13px;
    max-width: 70vw;
    transform: translate(18px, 18px);
  }
  .hover-tip::after {
    width: 10px; height: 10px;
    left: 8px; top: 8px;
  }
}

/* ===== Pantalla completa ARTE + Minimapa ===== */
body.is-full-arte { overflow: hidden; } /* evitar scroll del fondo */

.arte-full-overlay {
  position: fixed; inset: 0;
  background: #000; color: #fff;
  z-index: 99999; display: grid;
  grid-template-columns: 1fr 80px; /* lienzo + minimapa */
  grid-template-rows: 48px 1fr;     /* barra superior + contenido */
}

.arte-full-topbar {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid #222;
  background: rgba(10,10,10,.9);
  -webkit-user-select: none; user-select: none;
}
.arte-full-topbar button {
  appearance: none; border: 1px solid #666; background: #111; color: #fff;
  padding: 6px 10px; cursor: pointer; border-radius: 6px;
}
.arte-full-topbar button[aria-pressed="true"] { border-color: #0af; box-shadow: 0 0 0 2px rgba(0,160,255,.25) inset; }

.arte-full-stage {
  grid-column: 1; grid-row: 2;
  position: relative; overflow: hidden; /* el contenedor NO scrollea */
  background: #000;
}
/* en full, el que scrollea es el frame como siempre */
.arte-full-stage .prisma-frame { overflow-y: auto; }

/* modos de escala */
.arte-full-stage.pixel-true .prisma-frame {
  width: 1200px; margin: 0 auto; height: calc(100vh - 48px);
}
.arte-full-stage.pixel-true .prisma-frame canvas { width: 1200px; }

.arte-full-stage.fit-width .prisma-frame {
  width: 100vw; height: calc(100vh - 48px);
}
.arte-full-stage.fit-width .prisma-frame canvas { width: 100vw; }

.arte-full-minimap {
  grid-column: 2; grid-row: 2;
  position: relative; background: #0a0a0a; border-left: 1px solid #222;
  display: flex; align-items: center; justify-content: center;
}
.arte-full-minimap .mini-track {
  position: relative; width: 24px; height: 80vh; background: #111;
  border: 1px solid #333; border-radius: 8px;
}
.arte-full-minimap .mini-handle {
  position: absolute; left: 2px; width: 20px; height: 40px;
  background: #09f; border-radius: 6px; cursor: grab; box-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.arte-full-minimap .mini-handle:active { cursor: grabbing; }

/* Sutil: desenfocar el fondo para enfatizar overlay */
@media (min-width: 1241px) {
  body.is-full-arte .wrap { filter: blur(1px); }
}
.thumb-view {
  max-width: var(--maxw);
  margin: 24px auto;
  text-align: center;
}
.thumb-view img {
  display: block;
  margin: 0 auto;
}
  /* botones donación*/
  /* por defecto oculto */
  #donate-modal[hidden] { display: none; }
  /* visible cuando NO está hidden */
  #donate-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.6);
    display: grid; place-items: center;
    z-index: 9999;
  }
  #donate-modal .box {
    background:#111; color:#fff; padding:20px 24px;
    border-radius:12px; max-width:360px; text-align:center
  }
  #btn-bep20, #btn-ln { padding:.45rem .9rem; border-radius:10px; border:1px solid #333; background:#222; color:#fff; cursor:pointer; }
  #btn-bep20:hover, #btn-ln:hover { background:#2a2a2a; }