:root {
  --glow: #d7ff3a;
  --ink: #1f1d24;
  --ink2: #d8432a;
  --split: 1px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; cursor: none; user-select: none; -webkit-user-select: none; }
canvas { display: block; }

#title, #hud, #help { position: fixed; z-index: 2; pointer-events: none; transition: color .6s, opacity .6s; }
#title { top: 18px; left: 22px; }
#hud { left: 22px; bottom: 18px; }
#help { right: 22px; bottom: 18px; text-align: right; max-width: 44vw; }

/* ── MOSH: pixel type, RGB split ─────────────────────── */
body.mosh #title {
  font: 22px/1 'Silkscreen', monospace; letter-spacing: 3px; color: var(--glow);
  text-shadow: var(--split) 0 rgba(255, 0, 70, .85), calc(var(--split) * -1) 0 rgba(0, 220, 255, .85);
}
body.mosh #title .b { opacity: .28; }
body.mosh #title .sep { margin: 0 .35em; opacity: .5; }
body.mosh #hud, body.mosh #help { font: 18px/1 'VT323', monospace; color: var(--glow); opacity: .75; letter-spacing: 1px; white-space: pre; }
body.mosh #help { white-space: normal; }

/* ── WASH: brush lettering that bleeds ───────────────── */
body.wash #title {
  font: 40px/1 'Caveat Brush', cursive; color: var(--ink); filter: url(#ink);
  transform-origin: left; rotate: -3deg;
}
body.wash #title .a { opacity: .25; }
body.wash #title .b { color: var(--ink2); }
body.wash #title .sep { margin: 0 .2em; opacity: .4; }
body.wash #hud, body.wash #help { font: 24px/1.1 'Caveat Brush', cursive; color: var(--ink); opacity: .8; filter: url(#ink); }

/* ── start screen ────────────────────────────────────── */
#start {
  position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; cursor: pointer;
  background: rgba(0, 0, 0, .82); color: var(--glow); text-align: center; padding: 16px;
  font-family: 'VT323', monospace; transition: opacity .5s;
}
#start.gone { opacity: 0; pointer-events: none; }
#start h1 {
  font: clamp(40px, 9vw, 110px)/1 'Silkscreen', monospace; margin: 0 0 .3em; letter-spacing: .06em;
  text-shadow: 3px 0 rgba(255, 0, 70, .85), -3px 0 rgba(0, 220, 255, .85);
  animation: jit 2.2s steps(1) infinite;
}
#start h1 span { opacity: .4; }
#start p { font-size: clamp(18px, 2.4vw, 26px); margin: .3em 0; opacity: .85; }
#start .cta { margin-top: 1.4em; animation: blink 1s steps(2) infinite; }
#start .small { font-size: 17px; opacity: .5; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes jit { 0%, 92% { transform: none; } 93% { transform: translate(-6px, 2px) skewX(12deg); } 95% { transform: translate(5px, -1px); } 97% { transform: translate(-2px, 0) skewX(-8deg); } }

@media (max-width: 600px) {
  #help { display: none; }
  #hud { font-size: 15px !important; }
}
@media (prefers-reduced-motion: reduce) {
  #start h1, #start .cta { animation: none; }
}

/* ── tools bar + record button ───────────────────────── */
#tools {
  position: fixed; top: 14px; right: 18px; z-index: 3;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: calc(100vw - 260px);
}
#tools button {
  cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  background: transparent; border: 1px solid currentColor; border-radius: 0; opacity: .55; transition: opacity .2s;
}
#tools button:hover, #tools button.on, #tools #rec { opacity: 1; }
#tools button[hidden] { display: none; }
body.recording #tools button:not(#rec) { display: none; }   /* only REC while recording */
body.frozen #t-save { animation: blink 1s steps(2) infinite; }
#note { position: fixed; top: 56px; right: 18px; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .35s; text-align: right; }
#note.on { opacity: .9; }
#rec .dot { width: 9px; height: 9px; background: #ff2a3d; }
body.recording #rec .dot { animation: blink 1s steps(2) infinite; }
body.recording #rec { border-color: #ff2a3d; }
body.recording #help { opacity: 0 !important; }
body.mosh #tools button, body.mosh #note { font: 18px/1 'VT323', monospace; color: var(--glow); letter-spacing: 1px; }
body.wash #tools button, body.wash #note { font: 22px/1 'Caveat Brush', cursive; color: var(--ink); text-transform: lowercase; }
body.wash #tools button { border-radius: 40% 55% 45% 60% / 60% 40% 55% 45%; filter: url(#ink); }
body.wash #rec .dot { border-radius: 50%; }

/* ── clip window ─────────────────────────────────────── */
#clip { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px; cursor: auto; background: rgba(0,0,0,.7); }
#clip[hidden] { display: none; }
#clip .panel { width: min(860px, 100%); padding: 14px; }
#clip video { display: block; width: 100%; max-height: 62vh; object-fit: contain; background: #000; }
#clip .bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 12px; }
#clip .btns { display: flex; flex-wrap: wrap; gap: 8px; }
#clip button { cursor: pointer; padding: 8px 14px; background: transparent; color: inherit; border: 1px solid currentColor; font: inherit; }
#clip button.primary { background: var(--c-accent); color: var(--c-panel); border-color: var(--c-accent); }
#clip-lock { margin-top: 14px; }
#clip-lock p { margin: 6px 0; }
.keyrow { display: flex; gap: 8px; }
#clip-key { flex: 1; min-width: 0; padding: 8px 12px; font: inherit; letter-spacing: 3px; background: transparent; color: inherit; border: 1px solid currentColor; outline: none; }
#clip-msg { color: #ff2a3d; min-height: 1em; }
#clip-hint { opacity: .55; }
#clip-ask { margin-top: 16px; padding-top: 14px; border-top: 1px dashed currentColor; }
#clip-ask .keyrow button { cursor: pointer; padding: 8px 14px; background: transparent; color: inherit; border: 1px solid currentColor; font: inherit; }
#clip-email { flex: 1; min-width: 0; padding: 8px 12px; font: inherit; background: transparent; color: inherit; border: 1px solid currentColor; outline: none; }
#clip-email::placeholder { color: inherit; opacity: .4; }
#clip-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }   /* honeypot: humans never see it */
#clip-ask-msg { min-height: 1em; margin: 8px 0 4px; }
#clip-ask-msg.bad { color: #ff2a3d; }
#clip-ask .fine { font-size: .72em; opacity: .5; margin: 4px 0 0; }
.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

body.mosh #clip .panel { --c-accent: var(--glow); --c-panel: #07070a; background: #07070a; color: var(--glow); border: 1px solid var(--glow); font: 20px/1.1 'VT323', monospace; letter-spacing: 1px; box-shadow: 6px 6px 0 rgba(255,0,70,.5), -6px -6px 0 rgba(0,220,255,.35); }
body.mosh #clip-key::placeholder { color: var(--glow); opacity: .4; }
body.wash #clip .panel { --c-accent: var(--ink); --c-panel: #eee7d8; background: #eee7d8; color: var(--ink); font: 24px/1.1 'Caveat Brush', cursive; border-radius: 6px; box-shadow: 0 20px 60px rgba(40,30,10,.35); rotate: -.6deg; }
body.wash #clip button, body.wash #clip-key { border-radius: 30px 40px 35px 45px / 45px 35px 40px 30px; text-transform: lowercase; }
body.wash #clip-key::placeholder { color: var(--ink); opacity: .35; }

@media (max-width: 600px) {
  #tools { top: 10px; right: 10px; gap: 6px; max-width: 72vw; }
  #tools button { padding: 9px 10px; }
  #note { top: auto; bottom: 50px; right: 10px; }
}

/* ── PUNK: neon LED type ─────────────────────────────── */
:root { --neon: #ff2bd6; }
body.punk #title {
  font: 22px/1 'Silkscreen', monospace; letter-spacing: 3px; color: #fff;
  text-shadow: 0 0 6px var(--neon), 0 0 18px var(--neon), 0 0 36px var(--neon);
}
body.punk #title .a, body.punk #title .b { opacity: .9; }
body.punk #title .sep { margin: 0 .35em; color: var(--neon); }
body.punk #hud, body.punk #help { font: 18px/1 'VT323', monospace; color: #fff; letter-spacing: 1px; text-shadow: 0 0 8px var(--neon); opacity: .85; }
body.punk #tools button { font: 18px/1 'VT323', monospace; color: #fff; border-color: var(--neon); box-shadow: 0 0 12px var(--neon); }
body.punk #note { font: 18px/1 'VT323', monospace; color: #fff; text-shadow: 0 0 8px var(--neon); }
body.punk #clip .panel { --c-accent: #fff; --c-panel: #000; background: #000; color: #fff; border: 1px solid var(--neon); font: 20px/1.1 'VT323', monospace; box-shadow: 0 0 30px var(--neon); }
body.punk #clip-key::placeholder { color: #fff; opacity: .4; }

/* ── DESI: rice paste on a mud wall, Devanagari type ───── */
:root { --paint: #f3e9d6; --accent: #f0b23a; --wall: #9a3d24; }
body.desi { background: var(--wall); }
body.desi #title { font: 26px/1 'Yatra One', serif; color: var(--paint); letter-spacing: 1px; }
body.desi #title .a { opacity: .45; }
body.desi #title .sep { margin: 0 .3em; opacity: .5; }
body.desi #title .b { font-size: 0; }
body.desi #title .b::after { content: 'देसी'; font-size: 34px; color: var(--accent); }
body.desi #hud, body.desi #help, body.desi #note { font: 20px/1.05 'VT323', 'Yatra One', monospace; color: var(--paint); opacity: .85; letter-spacing: 1px; }
body.desi #tools button { font: 19px/1 'VT323', monospace; color: var(--paint); border-radius: 999px; padding: 7px 14px; }
body.desi #clip .panel { --c-accent: var(--paint); --c-panel: var(--wall); background: var(--wall); color: var(--paint); border: 2px solid var(--paint); border-radius: 14px; font: 20px/1.1 'VT323', monospace; }
body.desi #clip button, body.desi #clip-key { border-radius: 999px; }
body.desi #clip-key::placeholder { color: var(--paint); opacity: .4; }