/* ============================================================
   POEM·MATIC — a cel-shaded handheld in a dark room.
   The device body is Three.js (scene.js): flat toon materials,
   the blue matrix is the light source, heavy bloom, faint
   camera drift. This DOM face (#device, 1000×1320px == 100×132
   world units) rides a CSS3DObject so the textarea, LCD canvas,
   and printed legends stay pixel-registered with the 3D body —
   native clicks/selection keep working. Knobs, keys, and the
   red button are meshes; their legends are printed here.
   ============================================================ */
:root {
  --void: #080706; /* not pure black — the room reads at night */
  --phos: #4db8ff;
  --phos-hi: #a8e0ff;
  --phos-dim: rgba(77, 184, 255, .55);
  --engrave: #756f5e; /* print on yellow-grey plastic */
  --engrave-dim: #55503f;
  --screen: #04070a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--void);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow: hidden;
}
/* (film-grain overlay removed — the void is TOTAL black) */

/* ---------- renderer layers ---------- */
#webgl { position: fixed; inset: 0; z-index: 1; }
#webgl canvas { display: block; }
#css3d { position: fixed; inset: 0; z-index: 2; pointer-events: none; }

/* ---------- the face plane ---------- */
.face {
  position: absolute;
  width: 1000px;
  height: 1320px;
  pointer-events: none; /* only the live controls catch the pointer */
}
.face .poem, .face .gutter > * { pointer-events: auto; }

/* printed legends are part of the backlight circuit: dark until boot
   (the LCD canvas stays visible — it draws its own dark boot state) */
.booting .backlit { opacity: 0; }
.warming .backlit, .warming .lcd { animation: warmup 1.05s steps(5) both; }
@keyframes warmup {
  0% { opacity: 0; }
  35% { opacity: .38; }
  50% { opacity: .1; }
  70% { opacity: .8; }
  85% { opacity: .45; }
  100% { opacity: 1; }
}

/* ---------- the display glass (px box registered to the 3D screen) ---------- */
.crt {
  position: absolute;
  left: 80px; top: 75px; /* centered in the bezel cavity (world y −9.5…58.5) */
  width: 840px; height: 680px;
  padding: 20px 24px 70px 78px;
}
/* no fake glass wash — the only light on the glass is its own lit cells */
.screen { display: none; }
/* the emulated dot-matrix panel — every cell drawn by app.js.
   scene.js also samples this canvas as an emissive texture + light source */
.lcd {
  position: absolute;
  inset: 0;
  width: 100%;   /* canvas is a replaced element: without these it would */
  height: 100%;  /* size to its bitmap and feedback-loop on resize */
  z-index: 2;
  pointer-events: none;
}
.lcd.working { opacity: .9; animation: flicker .85s steps(3) infinite; }
@keyframes flicker { 50% { opacity: .85; } 75% { opacity: .92; } }

/* metrics are set inline by app.js so the invisible text grid aligns
   exactly with the drawn LCD cells */
.poem {
  font-family: "Courier New", monospace;
  letter-spacing: 0;
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: block;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  overflow: hidden; /* the glass holds exactly 19 lines — never scrolls */
}
.poem::selection { background: transparent; color: transparent; }
.poem::placeholder { color: transparent; }

/* (no guidance input — hardline: the knobs and the poem are the interface) */

/* dimmed maker's credit, fixed to the bottom-right of the BROWSER WINDOW.
   container passes clicks through; only the links catch them */
.credit {
  position: fixed;
  right: 20px; bottom: 16px;
  z-index: 60;
  pointer-events: none;
  font-family: "DotGothic16", monospace;
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(77, 184, 255, .26);
  text-shadow: 0 0 7px rgba(77, 184, 255, .22);
  white-space: nowrap;
  user-select: none;
}
.credit a {
  color: rgba(77, 184, 255, .4);
  text-decoration: none;
  pointer-events: auto;
  transition: color .15s, text-shadow .15s;
}
.credit a:hover { color: #d6efff; text-shadow: 0 0 18px rgba(168, 224, 255, 1), 0 0 34px rgba(77, 184, 255, .8); }

/* line lamps & stanza rails: INVISIBLE hitboxes — the pips/rails are
   drawn as matrix cells by renderLCD (hover repaints via JS) */
.gutter { position: absolute; inset: 20px auto 70px 10px; width: 68px; overflow: hidden; pointer-events: none; z-index: 3; }
.gline {
  position: absolute;
  width: 17px; height: 16px;
  cursor: pointer;
}
.gstanza {
  position: absolute;
  width: 11px;
  cursor: pointer;
}

/* ---------- printed legends (knobs & keys are 3D meshes) ---------- */
.klabel {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .18em;
  text-indent: .18em;
  color: var(--engrave);
  text-shadow: 0 0 6px rgba(77,184,255,.3), 0 1px 0 rgba(0,0,0,.9); /* backlit print */
  text-transform: uppercase;
  user-select: none;
  white-space: nowrap;
}
/* the WRITE legend over the red key: same print, warmed by the key below */
.rlabel {
  color: #8a5158;
  text-shadow: 0 0 6px rgba(255, 60, 40, .3), 0 1px 0 rgba(0,0,0,.9);
}

/* ---------- toast ---------- */
.toast {
  position: fixed;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #050505;
  box-shadow: inset 0 0 0 1px rgba(77,184,255,.3), 0 0 20px rgba(77,184,255,.1), 0 14px 30px rgba(0,0,0,.8);
  color: var(--phos);
  padding: 10px 18px;
  border-radius: 4px;
  font-family: "DotGothic16", monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  max-width: 560px;
  z-index: 40;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }