/* Page-specific styles for vram.html. */
.page-vram main{ max-width:1100px; }
/* VRAM visualizer */
.page-vram .lead{ max-width:941px; }
.page-vram .demo{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  align-items:flex-start;   /* don't pad the screen card out to the taller side column */
  justify-content:center;   /* keep the screen card centered when it wraps onto its own row */
  margin-top:22px;
}
.page-vram .stage,
.page-vram .side{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0;
}
.page-vram .stage{ flex:0 1 auto; max-width:100%; }   /* hug the screen so its left/right margins match */
.page-vram .side{ flex:1 1 460px; max-width:100%; }
.page-vram .panel{
  padding:12px 14px;
  max-width:100%;
  min-width:0;
  overflow:auto;
}
.page-vram .ptitle{
  margin-bottom:8px;
  color:var(--muted);
  font:600 11px/1 ui-monospace, monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.page-vram canvas#screen{
  display:block;
  max-width:100%;
  height:auto;
  background:#000;
  border-radius:4px;
  image-rendering:pixelated;
  touch-action:none;   /* swipe-to-steer instead of scrolling the page under the canvas */
}
.page-vram.vram-fail-flash canvas#screen{
  box-shadow:0 0 0 2px #ff3b30, 0 0 28px rgba(255,59,48,.9);
}
.page-vram.vram-fail-flash .mem{
  border-color:#ff3b30;
  box-shadow:0 0 22px rgba(255,59,48,.55);
}
.page-vram .mem{
  display:grid;
  gap:1px;
  width:min(100%, 507px);
  max-width:100%;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
}
.page-vram .mc{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  height:20px;
  background:var(--codebg);
  color:var(--empty);
  cursor:default;
  font:600 8.5px/1 ui-monospace, monospace;
}
.page-vram .mc.snake{ color:var(--green); }
.page-vram .mc.head{
  color:var(--greenhi);
  background:color-mix(in srgb, var(--green) 16%, var(--codebg));
}
.page-vram .mc.heart{ color:var(--red); }
.page-vram .mc.wall{ color:var(--wall); }
.page-vram .mc.club{ color:var(--club); }
.page-vram .mc.smiley{ color:var(--smiley); }
.page-vram .mc.stone{ color:var(--stone); }
.page-vram .mc.arrow{ color:var(--arrow); }
.page-vram .mc.room{ color:var(--room); }
.page-vram .mc.hl{
  outline:2px solid var(--accent);
  outline-offset:-2px;
  z-index:1;
}
@keyframes flash{
  from{ background:var(--accent); color:#fff; }
  to{}
}
.page-vram .mc.flash{ animation:flash .55s ease-out; }
.page-vram .sxo{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  gap:14px;
  flex:1 1 auto;
  width:0;
  min-width:100%;
}
.page-vram .sxo > .steer-panel{ flex:0 0 auto; }
.page-vram .sxo > .ops-panel{
  flex:1 1 220px;
  min-width:0;
}
.page-vram .pad{
  display:grid;
  grid-template-columns:repeat(3, 44px);
  grid-template-rows:repeat(2, 44px);
  gap:6px;
  justify-content:start;
}
.page-vram .pad button{
  font:inherit;
  font-size:16px;
  color:var(--text);
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
  transition:color .12s, border-color .12s, box-shadow .12s, background .12s;
}
.page-vram .pad .up{ grid-column:2; }
.page-vram .pad .left{ grid-column:1; grid-row:2; }
.page-vram .pad .down{ grid-column:2; grid-row:2; }
.page-vram .pad .right{ grid-column:3; grid-row:2; }
@media (max-width:520px){
  .page-vram .demo{ gap:14px; }
  .page-vram .panel{ padding:10px; }
  .page-vram .mc{
    height:18px;
    font-size:7px;
  }
}
.page-vram .btns{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.page-vram .btns button{
  font:inherit;
  padding:7px 12px;
  color:var(--text);
  background:var(--button);
  border:1px solid var(--border);
  border-radius:7px;
  cursor:pointer;
  transition:color .12s, border-color .12s, box-shadow .12s, background .12s;
}
.page-vram .log{
  height:190px;
  overflow-y:auto;
  background:var(--codebg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  font:12px/1.55 ui-monospace, monospace;
}
.page-vram .log .mv{
  margin-top:6px;
  color:var(--accent);
  font-weight:600;
}
.page-vram .log .op{ color:var(--text); }
.page-vram .log .op .a{ color:var(--green); }
.page-vram .log .op .b{ color:var(--muted); }
.page-vram .log .blk{ color:var(--red); }

.page-vram button:hover{ color:var(--accent); border-color:var(--accent); }

/* ---- CP437 font explorer (the second half of the page) ---- */
.page-vram .font-explorer{
  margin-top:48px;
  padding-top:36px;
  border-top:1px solid var(--border);
}
.page-vram .fontwrap{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  align-items:flex-start;
  margin-top:22px;
}
.page-vram .fontgrid-panel{ flex:0 1 auto; max-width:100%; }
.page-vram .glyph-panel{ flex:1 1 320px; min-width:0; }
.page-vram canvas#fontgrid{
  display:block;
  width:min(100%, 384px);
  height:auto;
  background:#000;
  border-radius:4px;
  image-rendering:pixelated;
  cursor:pointer;
  touch-action:manipulation;
}
.page-vram canvas#fontgrid:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.page-vram .glyph-detail{
  display:flex;
  gap:16px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.page-vram canvas#glyphbig{
  flex:0 0 auto;
  width:96px;
  height:192px;       /* 64x128 internal, scaled up and kept pixelated */
  background:#000;
  border-radius:4px;
  image-rendering:pixelated;
}
.page-vram .glyph-meta{
  margin:0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:5px 12px;
  align-content:start;
  font-size:13px;
}
.page-vram .glyph-meta dt{ color:var(--muted); }
.page-vram .glyph-meta dd{ margin:0; color:var(--heading); font-family:ui-monospace, monospace; }
.page-vram .glyph-bytes-title{
  margin:16px 0 6px;
  color:var(--muted);
  font:600 11px/1 ui-monospace, monospace;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.page-vram .glyph-bytes{
  font:12px/1.4 ui-monospace, monospace;
  white-space:nowrap;
  overflow-x:auto;
}
.page-vram .glyph-bytes .bh{ color:var(--muted); margin-right:6px; }
.page-vram .glyph-bytes i{ font-style:normal; }
.page-vram .glyph-bytes .on{ color:var(--accent); }
.page-vram .glyph-bytes .off{ color:var(--border); }