site/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="A silent local party game: perform a scene and emotion without words, then let your group guess.">
  <title>Soundless Karaoke — Silent performance party game</title>
  <style>
    :root{color-scheme:dark;--bg:#111019;--card:#211f31;--ink:#fffaf0;--muted:#c8c4d6;--hot:#ffcc4d;--pink:#ff6b9d;--line:#55506f}
    *{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#30254b 0,var(--bg) 52%);color:var(--ink);font:18px/1.5 system-ui,sans-serif;min-height:100vh}
    main{width:min(720px,calc(100% - 32px));margin:auto;padding:40px 0 60px}h1{font-size:clamp(2.4rem,9vw,5rem);line-height:.92;margin:.2em 0;color:var(--hot)}h2{font-size:clamp(1.5rem,5vw,2.2rem)}p{max-width:60ch}.tag{color:var(--pink);font-weight:800;letter-spacing:.08em;text-transform:uppercase}.card{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:clamp(20px,5vw,36px);box-shadow:0 18px 50px #0006;margin:28px 0}.prompt{font-size:clamp(1.7rem,7vw,3rem);font-weight:850;line-height:1.1;margin:.3em 0}.emotion{color:var(--hot)}button{border:0;border-radius:999px;background:var(--hot);color:#18131e;font:inherit;font-weight:850;padding:14px 22px;cursor:pointer;margin:6px 8px 6px 0}button.secondary{background:transparent;color:var(--ink);border:2px solid var(--line)}button:focus-visible{outline:4px solid #fff;outline-offset:3px}.hidden{display:none}.rules li{margin:.6em 0}.status{color:var(--muted);font-size:.95rem}.pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:4px 10px;margin:3px;font-size:.85rem}.footer{color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);padding-top:18px}@media(prefers-reduced-motion:no-preference){.card{animation:arrive .35s ease-out}@keyframes arrive{from{transform:translateY(8px);opacity:.4}}}
  </style>
</head>
<body><main>
  <div class="tag">No sound. No singing. All performance.</div>
  <h1>Soundless Karaoke</h1>
  <p>One player silently performs an everyday scene with a secret emotion. Everyone else guesses the scene <em>and</em> the emotion.</p>
  <section id="intro" class="card">
    <h2>How to play</h2>
    <ol class="rules"><li>Gather 3 or more people around this screen.</li><li>Choose one performer. Everyone else looks away.</li><li>The performer reveals a private prompt, memorizes it, then hides it.</li><li>Perform silently for 30 seconds. No words, mouthing, writing, or sound effects.</li><li>The group gets one scene guess and one emotion guess.</li></ol>
    <p><span class="pill">3–10 players</span><span class="pill">5–15 minutes</span><span class="pill">one screen</span></p>
    <button id="start">Start a round</button>
  </section>
  <section id="pass" class="card hidden" aria-live="polite">
    <div class="tag">Private prompt</div><h2>Pass the screen to the performer</h2><p>Everyone else: look away now.</p><button id="reveal">Reveal prompt</button>
  </section>
  <section id="play" class="card hidden" aria-live="polite">
    <div class="tag">Perform this scene</div><div id="scene" class="prompt"></div><div class="tag">with this emotion</div><div id="emotion" class="prompt emotion"></div>
    <p class="status">Memorize both. Then hide the prompt and perform without any sound.</p><button id="hide">Hide & perform</button>
  </section>
  <section id="guess" class="card hidden" aria-live="polite">
    <div class="tag">30 seconds</div><h2>What was the scene—and the emotion?</h2><p>Agree on one guess for each. The performer can reveal the answer when the group is ready.</p><button id="answer">Reveal answer</button>
  </section>
  <section id="result" class="card hidden" aria-live="polite">
    <div class="tag">The answer</div><div id="answerText" class="prompt"></div><p>Got both? Two points. Got one? One point. The best part is the performance, so zero points still counts as a great round.</p><button id="again">Another round</button><button id="feedback" class="secondary">Copy playtest result</button><p id="copied" class="status" role="status"></p>
  </section>
  <p class="footer">Free playtest edition · 20 original combinations · No audio, camera, login, tracking, or personal-data upload. “Accessible” is a design goal, not a certified outcome; feedback from disabled players is welcomed without asking anyone to disclose personal information.</p>
</main><script>
const scenes=['opening an umbrella that will not open','carrying a cake across a crowded room','trying to fold a fitted sheet','waiting for a toaster to pop','assembling a chair with one piece left','watering a plant that keeps leaning away','taking a group photo with an invisible camera','catching a bus that is slowly leaving','wrapping a gift shaped like a triangle','searching every pocket for a key','serving soup on a moving train','walking a dog that sees a squirrel','building a tower from slippery books','trying on shoes that are far too large','rescuing a balloon from the ceiling','entering a room and forgetting why','balancing groceries while opening a door','discovering the floor is unexpectedly sticky','untangling headphones in a hurry','meeting a tiny animal on your desk'];
const emotions=['secretly delighted','dramatically suspicious','trying not to panic','ridiculously proud','deeply offended','overwhelmingly curious','quietly jealous','heroically determined','pleasantly surprised','completely exhausted'];
const $=id=>document.getElementById(id);let scene='',emotion='',rounds=0;
function show(id){['intro','pass','play','guess','result'].forEach(x=>$(x).classList.toggle('hidden',x!==id));$(id).focus?.()}
$('start').onclick=()=>show('pass');$('reveal').onclick=()=>{scene=scenes[Math.floor(Math.random()*scenes.length)];emotion=emotions[Math.floor(Math.random()*emotions.length)];$('scene').textContent=scene;$('emotion').textContent=emotion;show('play')};$('hide').onclick=()=>show('guess');$('answer').onclick=()=>{$('answerText').textContent=scene+' — '+emotion;rounds++;show('result')};$('again').onclick=()=>{$('copied').textContent='';show('pass')};$('feedback').onclick=async()=>{const text=`Soundless Karaoke playtest: ${rounds} round${rounds===1?'':'s'} completed with our group.`;try{await navigator.clipboard.writeText(text);$('copied').textContent='Result copied. Share it only where you choose.'}catch{$('copied').textContent=text}};
  </script></body>
</html>