:root{--bg:#14110f;--ink:#f4ead8;--mute:#a89c88;--hot:#ff4a1c;--amber:#ffb81f;--line:#2e2822}
*{box-sizing:border-box;margin:0}
html,body{background:var(--bg);color:var(--ink);font-family:"Avenir Next","Segoe UI",system-ui,sans-serif;overflow-x:hidden}
body{background:radial-gradient(120% 60% at 50% 0,#2a1a12 0,var(--bg) 60%) no-repeat;min-height:100vh}
main{max-width:560px;margin:0 auto;padding:28px 20px calc(36px + env(safe-area-inset-bottom))}
.tag{font:700 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--amber)}
h1{font:900 clamp(56px,17vw,104px)/.86 "Arial Black","Helvetica Neue",Impact,sans-serif;letter-spacing:-.03em;text-transform:uppercase;margin:14px 0 14px;transform:skew(-4deg)}
.sub{color:var(--mute);line-height:1.5;max-width:42ch}
.stage{display:flex;flex-direction:column;align-items:center;padding:34px 0 10px}
.horn{position:relative;width:min(72vw,300px);aspect-ratio:1;border-radius:50%;border:0;cursor:pointer;color:#fff;
  background:radial-gradient(circle at 35% 28%,#ff8a5c,var(--hot) 45%,#b3200a);
  box-shadow:0 14px 0 #7a1405,0 24px 50px #ff4a1c55,inset 0 -8px 20px #0004;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .06s,box-shadow .06s}
.horn.on{transform:translateY(12px);box-shadow:0 2px 0 #7a1405,0 0 80px #ff4a1cbb,inset 0 -8px 20px #0004}
.label{font:900 clamp(22px,7vw,30px)/1.05 "Arial Black",Impact,sans-serif;letter-spacing:.04em;position:relative;z-index:1;text-shadow:0 2px 0 #7a1405}
.ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--amber);opacity:0;pointer-events:none}
.horn.on .ring{animation:pulse .7s ease-out infinite}.horn.on .r2{animation-delay:.35s}
@keyframes pulse{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}
.meter{display:flex;gap:6px;align-items:flex-end;height:40px;margin-top:38px}
.meter i{width:12px;height:8px;background:var(--line);border-radius:2px;transition:background .1s}
.horn.on ~ .meter i{background:var(--amber);animation:eq .25s ease-in-out infinite alternate}
.meter i:nth-child(odd){animation-duration:.19s!important}
@keyframes eq{from{height:8px}to{height:40px}}
.hint{margin-top:16px;font-weight:600}.vol{color:var(--mute);font-size:14px;margin-top:6px}
.extras{margin-top:34px;border:1px solid var(--line);border-radius:18px;padding:20px;background:#1b1713}
.extras-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
h2{font:800 19px/1.2 "Avenir Next",system-ui,sans-serif}
.badge{font:700 11px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:99px;border:1px solid var(--amber);color:var(--amber);white-space:nowrap}
.badge.open{background:var(--amber);color:#14110f}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chip{font:700 14px/1.25 inherit;font-family:inherit;color:var(--ink);background:#262019;border:1px solid var(--line);border-radius:12px;padding:14px 10px;min-height:54px;cursor:pointer}
.chip:active,.chip.on{background:var(--amber);color:#14110f;border-color:var(--amber)}
.locked .chip[data-sound]{opacity:.45}
.unlock{margin-top:16px;color:var(--mute);line-height:1.5;font-size:15px}.unlock b{color:var(--ink)}
.pay{display:block;margin-top:14px;text-align:center;text-decoration:none;font-weight:800;background:var(--amber);color:#14110f;border-radius:12px;padding:15px}
.link{background:none;border:0;color:var(--mute);text-decoration:underline;margin-top:12px;font:inherit;font-size:14px;cursor:pointer}
.auto{margin-top:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
select{font:inherit;background:#262019;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px}
footer{margin-top:26px;color:var(--mute);font-size:13px;line-height:1.5}
.made{margin-top:10px;font-size:12px}.made a{color:var(--mute)}
[hidden]{display:none!important}