/* ------------------------------------------------------------------
   Overworld: page chrome. Tokens, the chamfer, the logo mark come from
   ../core.css. The game itself is a 256 x 224 pixel-art canvas, scaled up
   in whole pixels when the window allows; it is the one place on the site
   that is drawn as filled pixel art rather than wireframe, because that is
   the point of it (A Link to the Past). The chrome around it follows
   STYLE-GUIDE.md: square corners, mono labels, volt for the active thing.
   ------------------------------------------------------------------ */

body.ow {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--screen);
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  display: grid;
  grid-template-rows: 60px 1fr auto;
}

kbd {
  display: inline-block;
  min-width: 20px; padding: 3px 5px; margin: 0 2px 0 0;
  border: 1px solid var(--line-2);
  font: 500 11px/1 var(--font-mono);
  text-align: center; text-transform: uppercase;
  color: var(--text);
  background: var(--bg-2);
}

/* ---------- Top bar ---------- */
.ow-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(14px, 3vw, 32px);
  font: 500 12px/1 var(--font-mono);
  letter-spacing: .08em; text-transform: uppercase;
  z-index: 5;
}
.ow-toggles { display: flex; gap: 8px; }
.ow-toggle {
  padding: 9px 11px;
  border: 1px solid var(--line-2);
  background: rgba(6, 7, 11, .7);
  color: var(--muted);
  font: inherit; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.ow-toggle:hover { color: var(--volt); border-color: var(--volt); }
.ow-toggle[aria-pressed="false"] { color: var(--dim); text-decoration: line-through; }

/* ---------- The screen ---------- */
.ow-stage {
  position: relative;
  min-height: 0;
  display: grid; place-items: center;
  padding: 8px clamp(8px, 2vw, 24px);
}
.ow-screen {
  position: relative;
  line-height: 0;
  /* A thin bezel: the screen sits in the page like a monitor in a dark room. */
  outline: 1px solid var(--line-2);
  outline-offset: 6px;
  box-shadow: 0 0 0 6px #030407, 0 0 80px rgba(34, 227, 238, .06);
}
#screen {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #05060a;
}
.ow-scan {
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0, 0, 0, .28) 3px 4px);
  mix-blend-mode: multiply;
}
body.no-scan .ow-scan { display: none; }

/* Touch stick: appears where the thumb lands. */
.ow-stick {
  --kx: 0px; --ky: 0px;
  position: fixed; z-index: 20;
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  border: 1px solid rgba(230, 255, 43, .5);
  background: rgba(6, 7, 11, .35);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  pointer-events: none;
}
.ow-stick i {
  position: absolute; left: 50%; top: 50%;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  background: var(--volt);
  opacity: .8;
  transform: translate(var(--kx), var(--ky));
}

/* ---------- Key strip ---------- */
.ow-keys {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  padding: 10px 16px 14px;
  font: 500 11px/1.6 var(--font-mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.ow-pad { color: var(--dim); }
@media (pointer: coarse) {
  .ow-keys { display: none; }
  body.ow { grid-template-rows: 60px 1fr; }
}

/* ---------- Loader ---------- */
.ow-loader {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  background: rgba(3, 4, 7, .92);
  transition: opacity .3s steps(3);
}
.ow-loader.is-done { opacity: 0; }
.ow-loader-box { --c: 22px; --bd: var(--line-2); padding: 26px 30px 24px; width: min(420px, calc(100vw - 32px)); }
.ow-loader-eyebrow { margin: 0 0 10px; font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ow-loader-title { margin: 0 0 18px; font: 600 26px/1.1 var(--font-display); color: var(--volt); text-transform: uppercase; letter-spacing: .02em; }
.ow-loader-track { height: 6px; background: var(--line); }
.ow-loader-track i { display: block; height: 100%; width: 0; background: var(--volt); box-shadow: 0 0 12px rgba(230, 255, 43, .5); transition: width .12s steps(2); }
.ow-loader-stage { margin: 12px 0 0; font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.ow-loader-stage::after { content: '_'; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.ow-noscript { position: fixed; inset: auto 16px 16px; color: var(--hot); font: 500 13px/1.4 var(--font-mono); }

@media (max-width: 560px) {
  .brand-name em { display: none; }
  .ow-toggle { padding: 8px 8px; }
  .ow-toggles { gap: 6px; }
}