:root{
  --bg:#100f0d; --panel:#1a1815; --line:#2b2823;
  --txt:#e6dccb; --dim:#8e8474; --ember:#ff9a3c;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
main{width:min(1600px,96vw)}

header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:12px}
h1{font:600 20px/1.2 ui-serif,Georgia,serif;margin:0;letter-spacing:.01em}
#roomHint{margin:2px 0 0;color:var(--dim);font-size:13px;font-style:italic}

.meters{text-align:right;flex:0 0 auto}
#burn{font-size:12px;color:var(--dim);letter-spacing:.04em;text-transform:lowercase}
.bar{width:150px;height:5px;background:#2a2620;border-radius:3px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#8a4a18,var(--ember));transition:width .18s linear}

/* THE STAGE IS THE HEIGHT AUTHORITY, NOT THE RAIL.
   Previously .row was a flex line with align-items:stretch, so the taller child set the row's
   cross size — and the rail grows as the chat log fills. The stage box then stretched past the
   canvas and the leftover box background read as a hard black band under the floor, with the
   playfield appearing to ride upward as the log filled.
   Now the stage is the ONLY in-flow child: it fixes the row height via aspect-ratio, and the rail
   is taken out of flow and pinned to that exact height. The bottom of the stage is the bottom of
   the row, at every window size and every log length. */
.row{position:relative;padding-right:202px}   /* 190 rail + 12 gutter */
.stage{min-width:0;aspect-ratio:2 / 1;border:1px solid var(--line);border-radius:10px;
       overflow:hidden;background:#000;line-height:0}
.stage canvas{width:100%;height:100%;display:block}
.rail{position:absolute;right:0;top:0;bottom:0;width:190px;
      display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);
      border-radius:10px;background:#141310;padding:10px 10px 12px;align-items:center;
      justify-content:flex-end;overflow:hidden}
.log{width:100%;flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;
     gap:7px;justify-content:flex-end;scrollbar-width:thin;scrollbar-color:#2f2b25 transparent}
.log p{margin:0;font:italic 400 11.5px/1.4 ui-serif,Georgia,serif;color:#6f665a;
       padding-left:8px;border-left:1px solid #2a2620}
.log p:last-child{color:#d8cdb9;border-left-color:var(--ember)}
.log p:nth-last-child(2){color:#8e8474}
/* the portrait yields before the rail does: shrink-to-fit, letterboxed, never stretched */
.rail canvas{width:100%;height:auto;display:block;flex:0 1 auto;min-height:0;object-fit:contain}
.mood{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
@media (max-width:900px){ .rail{display:none} .row{padding-right:0} }
canvas{width:100%;height:auto;display:block;image-rendering:auto}

#say{
  min-height:2.6em;margin:14px 2px 0;color:#d8cdb9;font:italic 400 16px/1.45 ui-serif,Georgia,serif;
  opacity:0;transition:opacity .35s ease;max-width:64ch;
}

footer{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;color:var(--dim);font-size:12px;align-items:center}
footer b{color:#bdb3a1;font-weight:600}
footer .note{margin-left:auto;font-style:italic;opacity:.8}

@media (prefers-reduced-motion: reduce){ .bar i{transition:none} #say{transition:none} }

/* the spoken line is drawn in-canvas as a bubble; this copy exists only for screen readers */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}