/* Site chrome, built on styles/rednut-tokens.css.
   Rule: no colour, font or radius values in here -- only var(--rn-*) tokens
   (and colour-mix() of them). If you need a new value, it belongs in tokens. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--rn-bg);
  color: var(--rn-text);
  font-family: var(--rn-font-body);
  font-weight: var(--rn-weight-body);
  line-height: var(--rn-leading-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#app { position: fixed; inset: 0; }

canvas#view {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

:focus-visible {
  outline: var(--rn-border-w) solid var(--rn-accent);
  outline-offset: 3px;
}

/* Shared "press" button: chunky border + hard offset shadow that the button
   pushes into. Extends .rn-btn's hover lift with an active press. */
.pill,
.zone-close,
#enter-btn {
  font-family: var(--rn-font-display);
  font-weight: var(--rn-weight-display);
  border: var(--rn-border-line);
  color: var(--rn-text);
  background: var(--rn-surface);
  box-shadow: 3px 3px 0 var(--rn-border);
  cursor: pointer;
  transition:
    transform var(--rn-dur-fast) var(--rn-ease-standard),
    box-shadow var(--rn-dur-fast) var(--rn-ease-standard);
}
.pill:hover,
.zone-close:hover,
#enter-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--rn-border);
}
.pill:active,
.zone-close:active,
#enter-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--rn-border);
}

/* --- input layer ---------------------------------------------------------- */

#touch-zone {
  position: absolute;
  inset: 0;
  touch-action: none;
  pointer-events: none;
}
#touch-zone.enabled { pointer-events: auto; }

.stick {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity var(--rn-dur-fast) var(--rn-ease-standard);
  pointer-events: none;
}
.stick.visible { opacity: 0.75; }
.stick.visible.active { opacity: 1; }

.stick-base,
.stick-knob {
  position: absolute;
  border-radius: var(--rn-radius-pill);
  transform: translate(-50%, -50%);
  left: 0;
  top: 0;
}
.stick-base {
  width: 132px;
  height: 132px;
  border: var(--rn-border-line);
  background-color: color-mix(in srgb, var(--rn-surface) 70%, transparent);
  background-image: radial-gradient(color-mix(in srgb, var(--rn-text) 22%, transparent) 1px, transparent 1.6px);
  background-size: 7px 7px;
}
.stick-knob {
  width: 62px;
  height: 62px;
  background: var(--rn-brand);
  border: var(--rn-border-line);
  box-shadow: 3px 3px 0 var(--rn-border);
  transition: transform 90ms var(--rn-ease-stamp);
}
.stick.active .stick-knob { transition: none; }

/* --- world HUD ------------------------------------------------------------ */

.hud-corner {
  position: absolute;
  top: var(--rn-space-4);
  left: var(--rn-space-4);
  color: var(--rn-text);
  pointer-events: none;
}

.hint {
  position: absolute;
  left: 50%;
  bottom: var(--rn-space-5);
  transform: translateX(-50%);
  padding: var(--rn-space-2) var(--rn-space-4);
  border-radius: var(--rn-radius-pill);
  background: color-mix(in srgb, var(--rn-surface) 82%, transparent);
  border: var(--rn-border-line);
  pointer-events: none;
  transition: opacity var(--rn-dur-slow) var(--rn-ease-standard);
  text-align: center;
  white-space: nowrap;
}
.hint.gone { opacity: 0; }

.topbar {
  position: absolute;
  top: var(--rn-space-3);
  right: var(--rn-space-4);
  display: flex;
  gap: var(--rn-space-2);
}
.pill {
  font-size: var(--rn-text-xs);
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--rn-radius-pill);
  display: inline-flex;
  align-items: center;
}

/* Zone enter prompt: anchored to the zone, positioned from JS. */
#prompt {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  padding: 6px 14px 6px 6px;
  border-radius: var(--rn-radius-pill);
  background: var(--rn-surface);
  border: var(--rn-border-line);
  box-shadow: 3px 3px 0 var(--rn-border);
  display: flex;
  align-items: center;
  gap: var(--rn-space-2);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
#prompt.show {
  opacity: 1;
  animation: prompt-stamp 520ms var(--rn-ease-stamp) both;
}
/* rn-stamp, but keeping the anchor translate the prompt needs. */
@keyframes prompt-stamp {
  0%   { transform: translate(-50%, -100%) scale(1.7) rotate(-9deg); opacity: 0; }
  10%  { opacity: 1; }
  18%  { transform: translate(-50%, -100%) scale(.94) rotate(2deg); }
  26%  { transform: translate(-50%, -100%) scale(1) rotate(0); }
  100% { transform: translate(-50%, -100%) scale(1); opacity: 1; }
}
#prompt .key {
  font-family: var(--rn-font-display);
  font-weight: var(--rn-weight-display);
  font-size: var(--rn-text-xs);
  min-width: 28px;
  text-align: center;
  padding: 3px 8px;
  border-radius: var(--rn-radius-pill);
  background: var(--rn-brand);
  color: var(--rn-on-brand);
  border: var(--rn-border-line);
}
#prompt .label {
  font-family: var(--rn-font-display);
  font-weight: var(--rn-weight-display);
  font-size: var(--rn-text-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Mobile enter button */
#enter-btn {
  position: absolute;
  right: 28px;
  bottom: 42px;
  width: 92px;
  height: 92px;
  border-radius: var(--rn-radius-pill);
  background: var(--rn-brand);
  color: var(--rn-on-brand);
  font-size: var(--rn-text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: none;
  align-items: center;
  justify-content: center;
}
#enter-btn.visible {
  display: flex;
  animation: rn-stamp 520ms var(--rn-ease-stamp) both;
}

/* --- zone overlay --------------------------------------------------------- */

#overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 20px;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--rn-dur-base) var(--rn-ease-standard),
    background-color var(--rn-dur-base) var(--rn-ease-standard);
}
#overlay.open {
  opacity: 1;
  pointer-events: auto;
  background: color-mix(in srgb, var(--rn-bg) 74%, transparent);
  backdrop-filter: blur(3px);
}

.zone-card {
  --zone-ink: var(--rn-brand);
  position: relative;
  width: min(880px, 100%);
  max-height: min(760px, 100%);
  overflow: auto;
  padding: var(--rn-space-6) clamp(22px, 5vw, 48px) var(--rn-space-6);
  border-radius: var(--rn-radius-lg);
  background: var(--rn-surface);
  border: var(--rn-border-line);
  box-shadow: 8px 8px 0 var(--rn-border);
  transform: translate(10px, 10px);
  transition:
    transform var(--rn-dur-base) var(--rn-ease-stamp),
    box-shadow var(--rn-dur-base) var(--rn-ease-stamp);
}
#overlay.open .zone-card { transform: none; }
/* A strip of the zone's ink down the card edge, like a spot-colour bleed. */
.zone-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 10px;
  background: var(--zone-ink);
  border-right: var(--rn-border-line);
}

.zone-kicker {
  display: flex;
  align-items: center;
  gap: var(--rn-space-2);
  font-weight: var(--rn-weight-strong);
  font-size: var(--rn-text-xs);
  letter-spacing: var(--rn-tracking-label);
  text-transform: uppercase;
  color: var(--rn-text-muted);
}
.zone-chip {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--zone-ink);
  border: var(--rn-border-line);
}

.zone-title {
  margin: var(--rn-space-3) 0 var(--rn-space-3);
  font-family: var(--rn-font-display);
  font-weight: var(--rn-weight-display);
  font-size: clamp(var(--rn-text-xl), 5vw, var(--rn-text-3xl));
  line-height: var(--rn-leading-snug);
  letter-spacing: var(--rn-tracking-display);
  transform-origin: 12% 60%;
  width: fit-content;
  max-width: calc(100% - 56px);
}
.zone-title:hover { animation: rn-reg 360ms steps(4) 1; }
/* Highlighter band in the zone's ink, sitting under the words line by line. */
.zone-title-text {
  background-image: linear-gradient(
    transparent 56%,
    color-mix(in srgb, var(--zone-ink) 55%, transparent) 56%,
    color-mix(in srgb, var(--zone-ink) 55%, transparent) 92%,
    transparent 92%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.stamp { animation: rn-stamp 700ms var(--rn-ease-stamp) both; }

.zone-blurb {
  margin: var(--rn-space-4) 0 0;
  max-width: 62ch;
  color: var(--rn-text-muted);
  font-size: var(--rn-text-base);
  line-height: var(--rn-leading-body);
}

.zone-slot {
  margin-top: var(--rn-space-5);
  min-height: 220px;
  border-radius: var(--rn-radius-md);
  border: var(--rn-border-w) dashed var(--rn-border);
  background-image: radial-gradient(color-mix(in srgb, var(--zone-ink) 45%, transparent) 1.2px, transparent 1.8px);
  background-size: 9px 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--rn-space-5);
  font-weight: var(--rn-weight-medium);
  font-size: var(--rn-text-sm);
  color: var(--rn-text);
}

.zone-slot.has-app {
  flex-direction: column;
  align-items: stretch;
  gap: var(--rn-space-3);
  padding: 0;
  border-style: solid;
  background: var(--rn-surface);
  overflow: hidden;
}
.zone-app {
  display: block;
  width: 100%;
  height: min(60vh, 520px);
  border: 0;
  background: var(--rn-surface);
}
.zone-app-open {
  align-self: flex-end;
  margin: 0 var(--rn-space-4) var(--rn-space-3);
  color: var(--rn-text);
}

.zone-close {
  position: absolute;
  top: var(--rn-space-4);
  right: var(--rn-space-4);
  width: 42px;
  height: 42px;
  border-radius: var(--rn-radius-pill);
  font-size: var(--rn-text-lg);
  line-height: 1;
}

.zone-exit-hint {
  margin-top: var(--rn-space-4);
  font-weight: var(--rn-weight-strong);
  font-size: var(--rn-text-xs);
  letter-spacing: var(--rn-tracking-label);
  text-transform: uppercase;
  color: var(--rn-text-muted);
}

/* --- transition wipe (rn-wipe in, continues off the far edge) ------------- */

#wipe {
  --wipe-ink: var(--rn-brand);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--wipe-ink);
  background-image: radial-gradient(color-mix(in srgb, var(--rn-ink) 28%, transparent) 1.7px, transparent 2.3px);
  background-size: 10px 10px;
  clip-path: inset(0 100% 0 0);
}
#wipe.in { animation: rn-wipe 420ms var(--rn-ease-stamp) both; }
#wipe.out { animation: rn-wipe-out 300ms var(--rn-ease-standard) both; }
@keyframes rn-wipe-out {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}

/* Grain sits over canvas and chrome alike -- it's the paper, not a layer. */
#app.rn-grain::after { z-index: 10; }

/* --- small screens -------------------------------------------------------- */

@media (max-width: 720px), (pointer: coarse) {
  .hud-corner { display: none; }
  .hint {
    bottom: 172px;
    max-width: 80vw;
    white-space: normal;
    line-height: var(--rn-leading-snug);
    border-radius: var(--rn-radius-md);
  }
  .stick-base { width: 108px; height: 108px; }
  .stick-knob { width: 50px; height: 50px; }
  #enter-btn {
    right: 20px;
    bottom: 34px;
    width: 80px;
    height: 80px;
    font-size: var(--rn-text-xs);
  }
  #prompt .label { font-size: var(--rn-text-xs); }
  .topbar { top: var(--rn-space-2); right: var(--rn-space-2); }
  .zone-card {
    padding: var(--rn-space-5) var(--rn-space-5) var(--rn-space-6) calc(var(--rn-space-5) + 10px);
    box-shadow: 5px 5px 0 var(--rn-border);
  }
  .zone-slot { min-height: 160px; }
}

@media (max-height: 560px) {
  .hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  #overlay, .zone-card, .pill, .zone-close, #enter-btn, .stick { transition: none; }
}