*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0b0a0a;color:#eee;display:grid;place-items:center;min-height:100svh;padding:16px}
.wrap{width:min(92vw,900px)}
.board{position:relative;aspect-ratio:700/499;width:100%;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.board-img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.05) saturate(0.9)}
.planchette{position:absolute;left:78%;top:45%;width:18%;transform:translate(-50%,-50%) rotate(-4deg);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.msg{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);font-size:clamp(18px,3vw,28px);background:rgba(0,0,0,.55);padding:.35em .6em;border-radius:10px;backdrop-filter:blur(4px);opacity:0;transition:opacity .4s ease}
.start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.65);color:#fff;border:1px solid rgba(255,255,255,.25);padding:.6rem 1rem;border-radius:999px;cursor:pointer}
.start:disabled{opacity:.2;cursor:default}
/* moving class gives a tiny bob for life */
.moving{animation:float 2.4s ease-in-out infinite alternate}
@keyframes float{from{transform:translate(-50%,-48%) rotate(-5deg)}to{transform:translate(-50%,-52%) rotate(-3deg)}}