:root {
  --bg: #060608;
  --panel: #101014;
  --panel-2: #17171d;
  --line: #26262f;
  --text: #ededf2;
  --dim: #8b8b9a;
  --acid: #d4ff3a;
  --acid-dim: #6d8418;
  --hot: #ff3b5c;
  --uv: #8b5cff;
  --ok: #3aff9c;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  --r: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); touch-action: manipulation; -webkit-text-size-adjust: 100%; }
.pad, .lp, .key, .seq .c, .hold { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body { min-height: 100dvh; overflow-x: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.acid { color: var(--acid); }
.hot { color: var(--hot); }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
.hud {
  position: sticky; top: 0; z-index: 20;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 10px;
  background: linear-gradient(var(--bg) 70%, transparent);
}
.hud-row { display: flex; justify-content: space-between; align-items: baseline; max-width: 560px; margin: 0 auto; }
.logo { font-family: var(--mono); font-weight: 700; letter-spacing: .28em; font-size: 13px; }
.logo b { color: var(--acid); }
.room { font-family: var(--mono); font-size: 12px; color: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.progress { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; max-width: 560px; margin: 10px auto 0; }
.progress i { height: 3px; background: var(--line); border-radius: 2px; transition: background .4s; }
.progress i.done { background: var(--acid); }
.progress i.now { background: var(--acid); animation: blink 1s steps(2) infinite; }
.net { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); display: inline-block; margin-left: 8px; vertical-align: middle; }
.net.off { background: var(--hot); }

/* ---------- Stage ---------- */
.stage { max-width: 560px; margin: 0 auto; padding: 8px 16px calc(env(safe-area-inset-bottom) + 40px); }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; color: var(--acid); text-transform: uppercase; margin: 14px 0 6px; }
h1 { font-size: clamp(30px, 9vw, 44px); line-height: 1; margin: 0 0 14px; letter-spacing: -.02em; }
h2 { font-size: 20px; margin: 0 0 8px; }
p { line-height: 1.5; }
.lead { color: #c9c9d4; font-size: 16px; margin: 0 0 20px; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: var(--panel-2); border-radius: 999px;
  padding: 12px 18px; font-weight: 600; font-size: 15px; transition: transform .08s, background .2s, border-color .2s;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn.primary { background: var(--acid); color: #0b0d00; border-color: var(--acid); }
.btn.danger { border-color: var(--hot); color: var(--hot); }
.btn.big { width: 100%; padding: 18px; font-size: 18px; }
.btn.sm { padding: 8px 12px; font-size: 13px; }
.btn.on { border-color: var(--acid); color: var(--acid); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > .btn { flex: 1; }

/* ---------- Gate ---------- */
.gate {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse at 50% 120%, #1a2200 0%, var(--bg) 60%);
  text-align: center;
}
.gate { overflow-y: auto; place-items: start center; }
.gate .inner { max-width: 380px; width: 100%; padding: 20px 0 calc(env(safe-area-inset-bottom) + 24px); }
.gate .vinyl { width: 120px; height: 120px; margin-bottom: 18px; }
.loud { margin: 18px 0; padding: 18px 16px; border-radius: var(--r); border: 2px solid var(--hot); background: rgba(255,59,92,.08); animation: loudPulse 1.2s ease-in-out infinite; }
.loud-icon { font-size: 46px; line-height: 1; animation: thump .6s ease-out infinite; }
.loud-t { font-family: var(--mono); font-weight: 700; font-size: 24px; letter-spacing: .06em; color: var(--hot); margin: 8px 0 6px; line-height: 1.15; }
.loud p { color: #e6e6ee !important; font-size: 14px; margin: 0 0 12px; }
.loud .btn.on { border-color: var(--hot); color: var(--hot); }
.mailfield { display: block; text-align: left; margin-top: 6px; }
.mailfield span { display: block; font-weight: 600; margin-bottom: 6px; }
.mailfield small { font-weight: 400; color: var(--dim); }
.mailfield input { width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px; font-size: 16px; }
.mailfield input:focus { outline: none; border-color: var(--acid); }
@keyframes loudPulse { 50% { box-shadow: 0 0 30px rgba(255,59,92,.35); } }
.gate h1 { font-family: var(--mono); letter-spacing: .12em; font-size: 38px; }
.gate p { color: var(--dim); }
.vinyl {
  width: 170px; height: 170px; border-radius: 50%; margin: 0 auto 28px;
  background:
    radial-gradient(circle, var(--acid) 0 15%, #111 15.5% 17%, transparent 17.5%),
    repeating-radial-gradient(circle, #111 0 2px, #1c1c1c 2px 3px);
  box-shadow: 0 0 0 2px #000, 0 20px 60px rgba(212,255,58,.12);
  animation: spin 1.8s linear infinite;
  position: relative;
}
.vinyl::after { content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 20%, rgba(255,255,255,.09) 25%, transparent 30% 70%, rgba(255,255,255,.06) 75%, transparent 80%); }

/* ---------- Overlay / Toast ---------- */
.flash {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; text-align: center;
  background: var(--acid); color: #0b0d00; animation: flashIn .25s ease-out;
}
.flash .t1 { font-family: var(--mono); letter-spacing: .3em; font-size: 13px; }
.flash .t2 { font-size: clamp(40px, 13vw, 72px); font-weight: 700; line-height: .95; margin-top: 10px; letter-spacing: -.03em; }
.toasts { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 14px); z-index: 80; display: grid; gap: 8px; padding: 0 16px; pointer-events: none; }
.toast {
  max-width: 528px; margin: 0 auto; width: 100%; pointer-events: auto;
  background: #15171a; border: 1px solid var(--acid-dim); border-left: 4px solid var(--acid);
  border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 40px rgba(0,0,0,.6); animation: up .3s ease-out;
}
.toast small { display: block; font-family: var(--mono); font-size: 11px; color: var(--acid); letter-spacing: .12em; margin-bottom: 4px; text-transform: uppercase; }

/* ---------- Tür ---------- */
.door-wrap { display: grid; place-items: center; margin: 52px 0 24px; }
.door {
  width: 200px; height: 290px; background: linear-gradient(90deg, #0d0d10, #16161b 50%, #0d0d10);
  border: 2px solid #222; border-radius: 6px 6px 0 0; position: relative; box-shadow: 0 30px 80px rgba(255,59,92,.08);
}
.door::before { content: ''; position: absolute; left: -26px; right: -26px; top: -30px; height: 6px; background: var(--hot); border-radius: 3px; box-shadow: 0 0 22px var(--hot), 0 0 60px var(--hot); animation: neon 4s infinite; }
.door .slot { position: absolute; top: 70px; left: 50%; width: 90px; height: 16px; margin-left: -45px; background: #000; border: 1px solid #333; overflow: hidden; }
.door .slot::after { content: '👀'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, 120%); font-size: 12px; transition: transform .4s; }
.door.peek .slot::after { transform: translate(-50%, -50%); }
.door .handle { position: absolute; right: 18px; top: 150px; width: 8px; height: 40px; background: #333; border-radius: 4px; }
.door.thump { animation: thump .3s ease-out; }
.bubble { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-bottom: 18px; font-size: 16px; }
.bubble b { color: var(--hot); font-family: var(--mono); font-size: 12px; letter-spacing: .15em; display: block; margin-bottom: 4px; }

/* ---------- BPM ---------- */
.readout { text-align: center; margin: 8px 0 14px; }
.readout .num { font-family: var(--mono); font-size: clamp(64px, 22vw, 110px); font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.readout .unit { font-family: var(--mono); color: var(--dim); letter-spacing: .3em; font-size: 12px; }
.dots { display: flex; justify-content: center; gap: 8px; margin: 12px 0 20px; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--line); transition: background .15s; }
.dots i.on { background: var(--acid); box-shadow: 0 0 12px var(--acid); }
.pad {
  width: min(78vw, 280px); aspect-ratio: 1; border-radius: 50%; margin: 0 auto; display: grid; place-items: center;
  background: radial-gradient(circle, #1b1d12, #0c0d08); border: 2px solid var(--acid-dim);
  font-family: var(--mono); font-weight: 700; letter-spacing: .3em; font-size: 22px; color: var(--acid);
  user-select: none; -webkit-user-select: none; touch-action: none; transition: transform .05s;
}
.pad.hit { transform: scale(.95); background: radial-gradient(circle, #3a4a00, #0c0d08); }
.pad.beat { box-shadow: 0 0 0 6px rgba(212,255,58,.12); }
.pad.locked { border-color: var(--acid); background: var(--acid); color: #0b0d00; }

/* ---------- Drum Machine ---------- */
.seq { display: grid; grid-template-columns: 34px repeat(4, 1fr); gap: 5px; margin: 10px 0 16px; }
.seq .hd { font-family: var(--mono); font-size: 11px; text-align: center; color: var(--dim); letter-spacing: .08em; padding: 6px 0; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.seq .hd.ok { color: var(--ok); border-color: var(--ok); }
.seq .hd.bad { color: var(--hot); border-color: var(--hot); }
.seq .n { font-family: var(--mono); font-size: 11px; color: #555; display: grid; place-items: center; }
.seq .n.beat { color: var(--dim); }
.seq .c { height: 26px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); padding: 0; }
.seq .c.beat { background: #1c1c24; }
.seq .c.on { background: var(--acid); border-color: var(--acid); box-shadow: 0 0 10px rgba(212,255,58,.35); }
.seq .c.ph { outline: 2px solid #fff; outline-offset: -2px; }
.seq .n.ph { color: #fff; }
.seqbar { position: sticky; top: 58px; z-index: 5; background: var(--bg); padding: 8px 0 2px; }
.seqbar .btn { white-space: nowrap; padding: 11px 10px; }
.abtag { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-align: center; height: 18px; margin: 4px 0 8px; }

/* ---------- Beatmatching (CDJ) ---------- */
:root { --d1: #2d8cff; --d2: #ff9a2e; }
.cdj-screen { background: #050507; border: 1px solid #22222b; border-radius: 12px; padding: 8px; margin-bottom: 12px; box-shadow: inset 0 0 30px rgba(0,0,0,.8); }
.wf { display: block; width: 100%; height: 62px; border-radius: 4px; }
.wf + .wf { margin-top: 3px; }
.wf-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: .06em; padding: 3px 2px 5px; }
.cdj-screen .wf-head:last-child { padding: 5px 2px 2px; }
.leds { display: flex; gap: 10px; justify-content: center; margin: 4px 0 8px; }
.led { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line); color: #555; }
.led.on { color: var(--ok); border-color: var(--ok); box-shadow: 0 0 10px rgba(58,255,156,.3); }
.matchbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 0 0 16px; }
.matchbar i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .2s; }
.cdj { display: grid; grid-template-columns: 1fr 86px; gap: 12px; align-items: center; padding: 14px; border-radius: 18px;
  background: linear-gradient(160deg, #1d1d23, #111115); border: 1px solid #2c2c35; box-shadow: 0 20px 50px rgba(0,0,0,.5); transition: box-shadow .4s; }
.cdj.locked { box-shadow: 0 0 0 2px var(--ok), 0 0 50px rgba(58,255,156,.3); }
.jogwrap { text-align: center; }
.jog { width: 100%; max-width: 220px; aspect-ratio: 1; margin: 0 auto; border-radius: 50%; padding: 7%; touch-action: none; cursor: grab;
  background: radial-gradient(circle, #2a2a31 0 60%, #17171b 61% 100%); box-shadow: 0 0 0 3px #0b0b0e, 0 0 0 5px #34343d, inset 0 2px 6px rgba(255,255,255,.06), 0 12px 30px rgba(0,0,0,.6); }
.jog.touch { box-shadow: 0 0 0 3px #0b0b0e, 0 0 0 5px var(--d2), 0 0 30px rgba(255,154,46,.35); cursor: grabbing; }
.jog-inner { width: 100%; height: 100%; border-radius: 50%; position: relative;
  background: repeating-conic-gradient(from 0deg, #1b1b20 0 4deg, #232329 4deg 8deg); box-shadow: inset 0 0 0 2px #0e0e11, inset 0 0 20px rgba(0,0,0,.7); }
.jog-mark { position: absolute; top: 5%; left: 50%; width: 5px; height: 18%; margin-left: -2.5px; border-radius: 3px; background: var(--d2); box-shadow: 0 0 10px var(--d2); }
.jog-center { position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, #202026, #0d0d10); border: 1px solid #333; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: var(--d2); }
.jog-hint { font-family: var(--mono); font-size: 10px; color: var(--dim); margin-top: 10px; letter-spacing: .05em; }
.tempo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tempo-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; color: var(--dim); text-align: center; }
.tempo-lbl b { font-size: 14px; color: var(--text); letter-spacing: 0; }
.fader-track { position: relative; width: 44px; height: 190px; border-radius: 8px; background: #0b0b0e; border: 1px solid #2a2a33; touch-action: none; }
.fader-track::before { content: ''; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 4px; margin-left: -2px; background: #000; border-radius: 2px; }
.ft-m, .ft-p { position: absolute; left: -16px; font-family: var(--mono); font-size: 13px; color: var(--dim); }
.ft-m { top: 2px; } .ft-p { bottom: 2px; }
.ft-0 { position: absolute; left: -8px; right: -8px; top: 50%; height: 2px; background: var(--ok); opacity: .7; }
.fader-knob { position: absolute; left: -6px; right: -6px; height: 30px; margin-top: -15px; border-radius: 5px;
  background: linear-gradient(#4a4a55, #2a2a31 45%, #1b1b20 55%, #3a3a44); border: 1px solid #55555f; box-shadow: 0 4px 10px rgba(0,0,0,.6); }
.fader-knob::after { content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; margin-top: -1px; background: #fff; border-radius: 1px; }
.fine { display: flex; gap: 6px; }
.fine .btn { padding: 6px 10px; }

/* ---------- Track-ID ---------- */
.tt { position: relative; aspect-ratio: 1.25; max-width: 380px; margin: 4px auto 14px; border-radius: 16px; padding: 18px;
  background: linear-gradient(150deg, #26262d, #141418); border: 1px solid #33333c; box-shadow: 0 20px 50px rgba(0,0,0,.6); overflow: hidden; }
.tt-platter { position: absolute; left: 7%; top: 9%; width: 64%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--uv) 0 17%, #111 17.5% 19%, transparent 19.5%), repeating-radial-gradient(circle, #111 0 2px, #1c1c1c 2px 3px);
  box-shadow: 0 0 0 4px #0b0b0e, 0 10px 30px rgba(0,0,0,.7); display: grid; place-items: center; }
.tt-platter.spin { animation: spin 1.8s linear infinite; }
.tt-label { font-family: var(--mono); font-weight: 700; font-size: 13px; color: #fff; letter-spacing: .1em; }
.tt-arm { position: absolute; right: 12%; top: 8%; width: 6px; height: 58%; background: linear-gradient(#bbb, #777); border-radius: 3px;
  transform-origin: 50% 4%; transform: rotate(-4deg); transition: transform .8s cubic-bezier(.4,1.4,.5,1); box-shadow: 2px 4px 8px rgba(0,0,0,.5); }
.tt-arm::before { content: ''; position: absolute; top: -10px; left: -9px; width: 24px; height: 24px; border-radius: 50%; background: #444; border: 2px solid #777; }
.tt-arm::after { content: ''; position: absolute; bottom: -6px; left: -5px; width: 16px; height: 22px; border-radius: 3px; background: #333; border: 1px solid #888; transform: rotate(20deg); }
.tt-arm.on { transform: rotate(24deg); }
.tt-spec { position: absolute; right: 5%; bottom: 7%; width: 22%; height: 30%; }
.tid { display: grid; gap: 10px; }
.tid label { display: grid; grid-template-columns: 74px 1fr 24px; align-items: center; gap: 8px; }
.tid span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--dim); text-transform: uppercase; }
.tid input { width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; font-size: 16px; }
.tid input:focus { outline: none; border-color: var(--acid); }
.tid i { font-style: normal; font-weight: 700; text-align: center; }
.tid i.ok { color: var(--ok); } .tid i.bad { color: var(--hot); }
.tid .btn { margin-top: 6px; }

/* ---------- Launchpad ---------- */
.lpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(84vw, 320px); margin: 6px auto 20px; padding: 12px; background: #0c0c10; border: 1px solid var(--line); border-radius: 18px; }
.lp { aspect-ratio: 1; border-radius: 12px; border: 1px solid #2a2a33; background: #16161c; padding: 0; transition: background .12s, box-shadow .12s, transform .06s; touch-action: none; }
.lp:active { transform: scale(.95); }
.lp.lit { background: var(--c); border-color: var(--c); box-shadow: 0 0 30px var(--c), inset 0 0 12px rgba(255,255,255,.5); }
.lpad.wrong { animation: shake .4s; }

/* ---------- Tresor ---------- */
.safe { max-width: 330px; margin: 8px auto 16px; padding: 18px; border-radius: 22px;
  background: linear-gradient(145deg, #2a2a31, #141418); border: 1px solid #34343d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px rgba(0,0,0,.6); transition: box-shadow .4s; }
.safe.wrong { animation: shake .4s; }
.safe.opened { box-shadow: 0 0 0 2px var(--ok), 0 0 60px rgba(58,255,156,.35); }
.lcd { font-family: var(--mono); font-size: 34px; font-weight: 700; letter-spacing: .12em; text-align: center; padding: 14px 8px; margin-bottom: 16px;
  border-radius: 10px; background: #0d1400; color: var(--acid); border: 1px solid #26330a; text-shadow: 0 0 12px rgba(212,255,58,.6); }
.lcd.err { color: var(--hot); background: #1a0006; border-color: #4a0014; text-shadow: 0 0 12px rgba(255,59,92,.6); }
.lcd.open { color: var(--ok); background: #00150a; border-color: #0a4a26; text-shadow: 0 0 12px rgba(58,255,156,.6); }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.key { aspect-ratio: 1.35; border-radius: 12px; border: 1px solid #3a3a44; background: linear-gradient(#26262d, #1b1b21);
  font-family: var(--mono); font-size: 24px; font-weight: 700; box-shadow: 0 3px 0 #0c0c0f; touch-action: none; }
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 #0c0c0f; }
.key.ok { background: var(--acid); color: #0b0d00; border-color: var(--acid); font-size: 18px; }

/* ---------- Drop ---------- */
.djlamps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; }
.djlamp { border: 2px solid var(--line); border-radius: var(--r); padding: 18px 10px; text-align: center; font-family: var(--mono); letter-spacing: .2em; font-weight: 700; color: #555; transition: all .15s; }
.djlamp.on { border-color: var(--acid); color: #0b0d00; background: var(--acid); box-shadow: 0 0 40px rgba(212,255,58,.5); }
.buildbar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin: 18px 0; }
.buildbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--uv), var(--hot), var(--acid)); }
.shake { animation: shakeHard .1s infinite; }
body.strobe { animation: strobe .12s steps(2) infinite; }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

/* ---------- Set ---------- */
.setcard { margin-top: 28px; }
.setcard h2 { font-size: 22px; line-height: 1.2; margin-bottom: 12px; }
.yt { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line);
  background: #000 url('https://i.ytimg.com/vi/DomObS9staI/hqdefault.jpg') center / cover; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ytplay { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(0,0,0,.35); color: var(--acid); font-size: 54px; }

/* ---------- Ticket ---------- */
.ticket { position: relative; margin: 16px 0 20px; filter: drop-shadow(0 30px 60px rgba(212,255,58,.15)); animation: ticketIn .9s cubic-bezier(.2,.9,.2,1.1); }
.ticket .top { background: var(--acid); color: #0b0d00; border-radius: 18px 18px 0 0; padding: 20px 22px 26px; }
.ticket .bot { background: #f3f3ec; color: #0b0d00; border-radius: 0 0 18px 18px; padding: 24px 22px 20px; position: relative; }
.ticket .bot::before { content: ''; position: absolute; top: -1px; left: 16px; right: 16px; border-top: 2px dashed #0b0d00; opacity: .35; }
.ticket .top::after, .ticket .top::before { content: ''; position: absolute; top: calc(100% - 13px); width: 26px; height: 26px; border-radius: 50%; background: var(--bg); }
.ticket .top { position: relative; }
.ticket .top::before { left: -13px; } .ticket .top::after { right: -13px; }
.ticket .label { font-family: var(--mono); font-size: 11px; letter-spacing: .25em; font-weight: 700; }
.ticket .name { font-size: 48px; font-weight: 700; letter-spacing: -.03em; line-height: 1; margin: 10px 0 4px; }
.ticket .plus { font-family: var(--mono); font-size: 13px; }
.ticket .value { font-size: 64px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.ticket .what { font-size: 17px; font-weight: 600; margin: 6px 0 16px; }
.ticket .fine { font-size: 13px; line-height: 1.45; opacity: .75; }
.barcode { height: 46px; margin-top: 16px; background: repeating-linear-gradient(90deg, #0b0d00 0 2px, transparent 2px 4px, #0b0d00 4px 7px, transparent 7px 8px, #0b0d00 8px 9px, transparent 9px 12px); }
.barcode + .mono { font-size: 11px; letter-spacing: .3em; margin-top: 6px; text-align: center; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: .2; } }
@keyframes neon { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: .3; } 95% { opacity: 1; } 96% { opacity: .4; } }
@keyframes thump { 0% { transform: scale(1.012); } 30% { transform: scale(1); } }
@keyframes flashIn { from { opacity: 0; transform: scale(1.05); } }
@keyframes up { from { opacity: 0; transform: translateY(20px); } }
@keyframes shake { 20%, 60% { transform: translateX(-12px); } 40%, 80% { transform: translateX(12px); } }
@keyframes shakeHard { 25% { transform: translate(2px, -1px); } 75% { transform: translate(-2px, 1px); } }
@keyframes eq { 0%, 100% { height: 15%; } 50% { height: 100%; } }
@keyframes strobe { 0% { background: #fff; } 100% { background: var(--bg); } }
@keyframes ticketIn { from { opacity: 0; transform: translateY(80px) rotate(-4deg) scale(.9); } }

@media (prefers-reduced-motion: reduce) {
  body.strobe { animation: none; }
  .shake { animation: none; }
}