style.css

:root { --orange:#F96001; --glow:249,96,1; --bg:#0b0604; --ink:#ffe6d2; }
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; background:var(--bg); color:var(--ink); font-family:'Space Mono','Courier New',monospace; }
body.party { animation:party 3s linear infinite; }
@keyframes party { to { filter:hue-rotate(360deg); } }

body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px); mix-blend-mode:multiply; }
body::after { content:""; position:fixed; inset:0; pointer-events:none; z-index:49;
  background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.65) 100%); }

.stage { position:relative; width:100vw; height:100dvh; }
#floats { position:absolute; inset:0; overflow:hidden; }
.float { position:absolute; white-space:nowrap; letter-spacing:.1em; color:var(--orange); pointer-events:none; animation:drift linear infinite; }
@keyframes drift {
  0%{transform:translate(0,0) rotate(0)} 25%{transform:translate(var(--dx),calc(var(--dy)*.6)) rotate(calc(var(--dr)*.4))}
  50%{transform:translate(calc(var(--dx)*1.4),var(--dy)) rotate(var(--dr))} 75%{transform:translate(calc(var(--dx)*.3),calc(var(--dy)*1.5)) rotate(calc(var(--dr)*-.5))}
  100%{transform:translate(0,0) rotate(0)} }

.face-wrap { position:absolute; top:46%; left:50%; width:min(70vh,92vw); aspect-ratio:1; transform:translate(-50%,-50%); cursor:pointer; touch-action:manipulation; }
.face { width:100%; height:100%; animation:pulse 6s ease-in-out infinite; }
.face svg { width:100%; height:100%; display:block; overflow:visible; }
@keyframes pulse {
  0%,100%{ filter:drop-shadow(0 0 14px rgba(var(--glow),.45)) drop-shadow(0 0 60px rgba(var(--glow),.25)); }
  50%{ filter:drop-shadow(0 0 26px rgba(var(--glow),.8)) drop-shadow(0 0 110px rgba(var(--glow),.4)); } }

#eye-l,#eye-r { transform-box:fill-box; transform-origin:center; transition:transform .08s; }
.blink #eye-l,.blink #eye-r { transform:scaleY(.08); }

.cap { position:absolute; left:4%; right:4%; text-align:center; font-family:Impact,'Arial Black',sans-serif; text-transform:uppercase;
  font-size:clamp(1.1rem,4.6vh,2.6rem); line-height:1.05; color:#fff; letter-spacing:.02em; pointer-events:none; z-index:5;
  -webkit-text-stroke:.09em #000; paint-order:stroke fill; text-shadow:0 .06em .12em rgba(0,0,0,.6); }
.cap.top { top:6%; } .cap.bot { bottom:6%; }

.bar { position:absolute; left:0; right:0; bottom:max(14px,env(safe-area-inset-bottom)); display:flex; gap:10px; justify-content:center; flex-wrap:wrap; z-index:60; padding:0 16px; }
.bar button,.bar a { font:inherit; font-size:.72rem; letter-spacing:.16em; text-transform:lowercase; color:var(--ink); background:rgba(11,6,4,.7);
  border:1px solid rgba(var(--glow),.6); padding:.7em 1.1em; border-radius:2px; cursor:pointer; text-decoration:none; user-select:auto; transition:background .15s,color .15s; }
.bar button:hover,.bar a:hover,.bar button:focus-visible,.bar a:focus-visible { background:var(--orange); color:#150a04; outline:none; }


.tagline { position:fixed; top:14px; right:16px; z-index:60; font-size:.7rem; letter-spacing:.2em; color:rgba(255,230,210,.75); transition:opacity 1.2s; pointer-events:none; }
.tagline.hidden { opacity:0; }

@media (prefers-reduced-motion:reduce) { .float,.face,body.party { animation:none; } .float { opacity:.08 !important; } }
@media (max-width:520px) { .face-wrap { top:44%; } }

/* background chaos */
.tape { position:absolute; left:0; white-space:nowrap; font-size:clamp(1.4rem,6vh,3.4rem); font-weight:700; letter-spacing:.08em; color:transparent;
  -webkit-text-stroke:1px rgba(var(--glow),.22); pointer-events:none; animation:tape linear infinite; will-change:transform; }
.tape.rev { animation-direction:reverse; }
@keyframes tape { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.flyby { position:absolute; left:0; white-space:nowrap; color:var(--orange); pointer-events:none; z-index:2; font-weight:700; }
.log { position:fixed; left:16px; bottom:16px; z-index:60; font-size:.66rem; letter-spacing:.1em; color:rgba(255,230,210,.5); pointer-events:none; line-height:1.5; }
@media (max-width:700px) { .log { display:none; } }
@media (prefers-reduced-motion:reduce) { .tape,.flyby { animation:none; } .tape { display:none; } }

/* actions: reroll on top, save + share below */
.bar-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:min(340px,100%); }
.bar-grid .wide { grid-column:1 / -1; }
.bar-grid button { text-align:center; white-space:nowrap; }