:root { --red: #c8322a; --red-dark: #9e231d; --cream: #efe6d2; --glow: #ff8a3d; --ink: #2a1a12; --bg: #e9e4dc; }
@media (prefers-color-scheme: dark) { :root { --bg: #16120f; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); font: 14px/1.3 ui-monospace, Menlo, monospace; color: var(--ink);
       display: grid; place-items: center; gap: 24px; padding: 16px; }
#start { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 9; cursor: pointer; }
#stage { width: min(960px, 100%); perspective: 1200px; }
#clock { background: linear-gradient(var(--red), var(--red-dark)); border-radius: 28px; padding: 36px 28px; position: relative;
         transition: transform .8s cubic-bezier(.6,0,.2,1); box-shadow: 0 30px 50px -20px #0007; }
#clock.flipped { transform: rotate(180deg); }
#face { transition: transform .8s cubic-bezier(.6,0,.2,1); }
#clock.flipped #face { transform: rotate(180deg); } /* the body flips, the display re-rights itself */
.emboss { position: absolute; left: 0; right: 0; text-align: center; font: 700 22px/1 system-ui; letter-spacing: .3em;
          color: var(--red-dark); text-shadow: 0 1px 0 #ffffff30; text-transform: lowercase; }
.emboss.top { top: 6px; } .emboss.bottom { bottom: 6px; transform: rotate(180deg); }
#face { background: var(--cream); border-radius: 14px; padding: 16px; box-shadow: inset 0 2px 6px #0003; }
#screen { position: relative; aspect-ratio: 3 / 1; background: #1a0d06; border-radius: 6px; overflow: hidden; }
#screen > * { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#digits { z-index: 2; }
#dream { z-index: 1; opacity: 0; transition: opacity 1.5s; image-rendering: pixelated; }
#screen.dreaming #dream { opacity: 1; } #screen.dreaming #digits { opacity: 0; }
#noise { z-index: 3; opacity: 0; image-rendering: pixelated; mix-blend-mode: screen; }
#screen.developing #noise { opacity: .85; }
#screen::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
                 background: linear-gradient(#ff8a3d14, #ff8a3d28); box-shadow: inset 0 0 40px #000a; }
#divider { display: none; z-index: 5; left: calc(50% - 8px) !important; width: 16px !important; background: var(--cream); }
#face.pair #divider { display: block; }
#face.pair #screen { background: #1a0d06; }
#labels { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; letter-spacing: .08em; }
#msg { color: var(--red-dark); }
#controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
#controls button { font: inherit; padding: 8px 12px; border-radius: 8px; border: 1px solid #0003; background: #fff8; cursor: pointer; }
#controls button.on { background: var(--glow); }
#typeForm { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
#typeForm input { font: inherit; width: min(560px, 70vw); padding: 8px 12px; border-radius: 8px; border: 1px solid #0003; background: #fff8; }
#typeForm button { font: inherit; padding: 8px 12px; border-radius: 8px; border: 1px solid #0003; background: #fff8; cursor: pointer; }