/* A MOMENT SNAKE AND CHESS · PUPPEN-SCHACH — Spielbühne · ergänzt moment.css */
.spiel{border:1px solid var(--line2);background:var(--bg2)}
.spiel .stage{position:relative;aspect-ratio:16/9;max-height:78vh;width:100%;overflow:hidden;
  background:radial-gradient(ellipse 80% 70% at 50% 40%,#16161b 0%,#0a0a0e 55%,#050508 100%);touch-action:none}
.spiel canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;outline:none}
.spiel canvas:active{cursor:grabbing}
.spiel canvas:focus-visible{box-shadow:inset 0 0 0 2px var(--lake)}
.spiel .ov{position:absolute;left:0;right:0;pointer-events:none;padding:12px 16px;font-size:11px;letter-spacing:.08em;color:var(--ink2);display:flex;justify-content:space-between;gap:16px;text-shadow:0 1px 3px #000}
.spiel .ov.top{top:0}
.spiel .ov.bot{bottom:0;align-items:flex-end}
.spiel .ov b{color:var(--ink);font-weight:700}
.spiel .st{max-width:62%;color:var(--ink)}
.spiel .ct{text-align:right;font-variant-numeric:tabular-nums}
.spiel .bal{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(0,0,0,.6)}
.spiel .bal i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#c9a14a,#2fa79b,#c94f3d);transition:width .5s}
.spiel .bal::after{content:"";position:absolute;left:50%;top:-3px;bottom:0;width:1px;background:var(--ink)}
.spiel .clock{position:absolute;left:0;right:0;top:0;height:2px;display:none}
.spiel .stage.clocked .clock{display:block}
.spiel .clock i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink)}
.spiel .msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:min(560px,86%);text-align:center;
  font:300 clamp(15px,2.2vw,22px)/1.45 var(--disp);letter-spacing:.03em;color:var(--white);pointer-events:none;opacity:0;transition:opacity .6s;
  background:rgba(5,5,8,.72);padding:18px 22px;border:1px solid var(--line2)}
.spiel .msg:empty{display:none}
.spiel .stage.over .msg,.spiel .stage.nogl .msg{opacity:1}
/* Lid: schließt kurz am Spielende (Mandelform wie auf der Hauptseite) */
.spiel .lid{position:absolute;inset:0;pointer-events:none}
.spiel .lid::before,.spiel .lid::after{content:"";position:absolute;left:-10%;right:-10%;height:62%;background:#050508;transition:transform .26s cubic-bezier(.6,0,.4,1)}
.spiel .lid::before{top:0;border-radius:0 0 50% 50%/0 0 100% 100%;transform:translateY(-101%)}
.spiel .lid::after{bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0;transform:translateY(101%)}
.spiel .lid.shut::before,.spiel .lid.shut::after{transform:translateY(0)}
.spiel .ctl{padding:16px 18px;border-top:1px solid var(--line2);display:grid;gap:10px}
.spiel .ctl .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.spiel .ctl .lbl{font-size:11px;letter-spacing:.14em;color:var(--ink3);min-width:92px}
.spiel .b{padding:7px 11px;font-size:11px}
.spiel .b.go{border-color:var(--ink)}
.spiel .log{list-style:none;margin:0;padding:12px 18px;border-top:1px solid var(--line);max-height:150px;overflow:auto;font-size:12px;color:var(--ink2);white-space:pre;font-variant-numeric:tabular-nums}
.spiel .log li:first-child{color:var(--ink)}
.spiel noscript p{padding:20px}
.regeln{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px 34px}
.regeln p{margin:0}
.regeln b{color:var(--white)}
.legend{display:inline-block;width:11px;height:11px;border:2px solid;vertical-align:-1px;margin-right:4px}
@media (max-width:760px){
  .spiel .stage{aspect-ratio:4/5;max-height:none}
  .spiel .st{max-width:100%}
  .spiel .ov.top{flex-direction:column;gap:4px}
  .spiel .ct{text-align:left}
  .spiel .ctl .lbl{min-width:0;width:100%}
}