/* Bowling 2000 — Online-Spiele: Online-Bahn (bowling-game.js) und
   Online-Darts (darts-game.js). Beide Dialoge teilen Grundgerüst, Anzeige,
   Hinweis, Button-Leiste, Callouts und Endkarte (Klassen .bg-*); Darts
   ergänzt eigene Teile (.dg-*). Geladen auf /walkthrough und /social-darts. */

.bg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* =========================================================================
   ONLINE-BAHN (bowling-game.js)
   ========================================================================= */
html.bg-open,html.bg-open body{overflow:hidden}
.bg{position:fixed;inset:0;z-index:3000;background:#000;color:var(--white);overscroll-behavior:contain;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bg-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.bg-canvas.is-grab{cursor:grabbing}
.bg-hud{position:absolute;left:0;right:0;top:0;pointer-events:none;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 18px max(12px,env(safe-area-inset-left));
  background:linear-gradient(rgba(0,0,0,.9),rgba(0,0,0,.6) 70%,rgba(0,0,0,0))}
.bg-top{display:flex;align-items:center;gap:clamp(8px,1.4vw,16px);pointer-events:auto}
.bg-logo{height:clamp(26px,3vw,34px);width:auto;flex:0 0 auto}
.bg-frameinfo{margin-left:auto;font-family:var(--font-tech);font-weight:600;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;opacity:.75;white-space:nowrap}
.bg-total{display:flex;align-items:baseline;gap:6px;font-family:var(--font-tech);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase}
.bg-total small{opacity:.6}
.bg-total b{font-family:var(--font-head);font-weight:400;font-size:clamp(26px,3vw,36px);color:var(--candy);letter-spacing:0;
  line-height:1;min-width:2ch;text-align:right}
.bg-btn{flex:0 0 auto;width:40px;height:40px;border:0;background:rgba(255,255,255,.1);color:var(--white);
  display:grid;place-items:center;cursor:pointer;transition:background .2s}
.bg-btn:hover{background:rgba(255,255,255,.2)}
.bg-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bg-btn[aria-pressed="true"] .bg-snd-off,.bg-btn[aria-pressed="false"] .bg-snd-on{display:none}
.bg-board{display:grid;grid-template-columns:repeat(9,minmax(0,1fr)) minmax(0,1.5fr);gap:3px;margin-top:10px;
  max-width:760px;margin-inline:auto}
.bg-f{background:rgba(255,255,255,.07);display:flex;flex-direction:column;min-width:0;transition:box-shadow .3s,background .3s}
.bg-f.cur{box-shadow:inset 0 0 0 2px var(--candy);background:rgba(255,185,255,.1)}
.bg-f-no{font-family:var(--font-tech);font-weight:600;font-size:9px;letter-spacing:.1em;opacity:.5;text-align:center;padding-top:3px}
.bg-f-rolls{display:flex;justify-content:flex-end}
.bg-f-rolls span{flex:0 0 auto;width:16px;height:16px;display:grid;place-items:center;font-family:var(--font-tech);
  font-weight:600;font-size:11px;border-left:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.bg-f-rolls span.x,.bg-f-rolls span.s{color:var(--candy)}
.bg-f-tot{font-family:var(--font-head);font-size:clamp(14px,1.8vw,19px);text-align:center;min-height:20px;line-height:20px}
@media (max-width:480px){
  /* Mobil ohne Rundenanzeige: Punkte exakt mittig, Ton und X am rechten Rand */
  .bg-frameinfo{display:none}
  .bg-top{position:relative}
  .bg-total{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
  .bg-top [data-bg-sound],.bg-top [data-dg-sound]{margin-left:auto}
  .bg-f-rolls span{width:12px;height:13px;font-size:9px}
  .bg-f-no{font-size:8px}
}
/* Hinweis auf der Bahn zwischen Pins und Kugel – unten steht die Button-Leiste */
.bg-hint{position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:12px;padding:12px 18px;background:rgba(0,0,0,.72);pointer-events:none;
  font-family:var(--font-tech);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,185,255,.45);transition:opacity .4s}
.bg-hint.is-hidden{opacity:0}
.bg-hand{position:relative;width:18px;height:26px}
.bg-hand::before{content:"";position:absolute;left:5px;bottom:0;width:8px;height:8px;border-radius:50%;background:var(--candy);
  animation:bg-swipe 1.6s var(--ease) infinite}
.bg-hand::after{content:"";position:absolute;left:8px;top:0;width:2px;height:22px;background:linear-gradient(transparent,rgba(255,185,255,.8));
  animation:bg-swipe-trail 1.6s var(--ease) infinite}
/* Button-Leiste unten: links zur echten Reservierung, rechts Spiel beenden.
   Die Leiste selbst lässt Berührungen durch (pointer-events:none), damit das
   Greifen der Kugel darüber nicht blockiert wird – nur die Buttons fangen sie. */
.bg-bar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;
  gap:10px;pointer-events:none;
  padding:34px max(16px,env(safe-area-inset-right)) max(16px,calc(env(safe-area-inset-bottom) + 8px)) max(16px,env(safe-area-inset-left));
  background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72))}
.bg-bar[hidden]{display:none}
.bg-bar .btn{pointer-events:auto;padding:16px 24px;font-size:12px;white-space:nowrap}
.bg-quit{gap:10px;background:rgba(0,0,0,.78);color:var(--white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.bg-quit:hover{background:var(--white);color:var(--black);box-shadow:inset 0 0 0 2px var(--white)}
.bg-quit svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
@media (max-width:480px){
  .bg-bar{gap:8px}
  .bg-bar .btn{padding:14px 14px;font-size:11px;letter-spacing:.12em;gap:8px}
  .bg-bar .btn-candy{flex:1 1 auto}
}
@keyframes bg-swipe{0%{transform:translateY(0);opacity:0}15%{opacity:1}70%{transform:translateY(-18px);opacity:1}100%{transform:translateY(-18px);opacity:0}}
@keyframes bg-swipe-trail{0%,20%{opacity:0}70%{opacity:1}100%{opacity:0}}
/* Ansagen (Strike, Spare, Bullseye, 180, Summen) auf dunklem Label mit
   Candy-Rand – über heller Bahn und heller Scheibe wäre freie Schrift kaum
   lesbar. Zentriert über margin-inline, weil transform der Animation gehört. */
.bg-callout{position:absolute;top:34%;left:0;right:0;width:fit-content;max-width:calc(100% - 32px);margin-inline:auto;
  padding:16px clamp(22px,4vw,40px) 18px;text-align:center;pointer-events:none;opacity:0;
  background:rgba(10,10,12,.95);box-shadow:inset 0 0 0 2px var(--candy),0 24px 60px -18px rgba(0,0,0,.9)}
.bg-callout.show{animation:bg-pop 1.7s var(--ease) forwards}
.bg-callout b{display:block;font-family:var(--font-script);font-weight:400;color:var(--candy);
  font-size:clamp(58px,11vw,128px);line-height:.9;transform:rotate(-5deg)}
.bg-callout b.num{font-family:var(--font-head);font-size:clamp(64px,10vw,124px);line-height:.85;transform:none;letter-spacing:-.01em}
.bg-callout small{display:block;margin-top:10px;font-family:var(--font-tech);font-weight:600;font-size:13px;
  letter-spacing:.3em;text-transform:uppercase}
@keyframes bg-pop{0%{opacity:0;transform:scale(.55)}14%{opacity:1;transform:scale(1.06)}24%{transform:scale(1)}
  78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08) translateY(-18px)}}
.bg-end{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.74);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:bg-fade .5s ease}
.bg-end[hidden]{display:none}
@keyframes bg-fade{from{opacity:0}to{opacity:1}}
.bg-end-card{width:100%;max-width:540px;background:var(--black);box-shadow:inset 0 0 0 2px var(--candy);
  padding:clamp(28px,4.4vw,56px);text-align:center}
.bg-end-card .eyebrow{justify-content:center;color:var(--candy);opacity:1}
.bg-end-score{margin:6px 0 0}
.bg-end-score b{display:block;font-family:var(--font-head);font-weight:400;font-size:clamp(96px,17vw,176px);
  color:var(--candy);line-height:.84}
.bg-end-score small{font-family:var(--font-tech);font-weight:600;font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.7}
.bg-end-text{margin:18px auto 0;max-width:34ch;font-size:16px;line-height:1.5}
.bg-end-best{margin:8px 0 0;font-family:var(--font-tech);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
.bg-end-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:28px}
.bg-btn-outline{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.bg-btn-outline:hover{background:var(--white);color:var(--black);box-shadow:inset 0 0 0 2px var(--white)}
@media (prefers-reduced-motion:reduce){
  .bg-hand::before,.bg-hand::after{animation:none}
  .bg-callout.show{animation:bg-fade .3s ease forwards;opacity:1}
}

/* =========================================================================
   ONLINE-DARTS (darts-game.js)
   ========================================================================= */
/* Verschwommenes Lounge-Foto hinter der Holzwand des Canvas */
.dg-backdrop{position:absolute;inset:0;overflow:hidden}
.dg-backdrop img{width:100%;height:100%;object-fit:cover;filter:blur(18px) brightness(.32) saturate(1.2);transform:scale(1.12)}
.dg .bg-canvas{background:transparent}
/* Rundentafel: zehn gleich breite Felder, nur Rundensumme */
.dg .bg-board{grid-template-columns:repeat(10,minmax(0,1fr))}
.dg .bg-f-tot{padding-bottom:2px}
/* Die drei Pfeile der laufenden Runde */
.dg-throws{display:flex;justify-content:center;gap:6px;margin-top:8px}
.dg-throws span{min-width:58px;padding:6px 10px;background:rgba(255,255,255,.08);text-align:center;
  font-family:var(--font-tech);font-weight:600;font-size:12px;letter-spacing:.1em;transition:box-shadow .3s,background .3s}
.dg-throws span.cur{box-shadow:inset 0 0 0 2px var(--candy)}
.dg-throws span.hit{background:var(--candy);color:var(--black)}
.dg-throws span.miss{opacity:.5}
/* Darts: Ansage etwas höher, mittig über der Scheibe */
.dg .bg-callout{top:30%}
/* Hinweis sitzt zwischen Board und Pfeil – top setzt darts-game.js */
.dg .bg-hint{top:auto;white-space:normal;width:max-content;max-width:calc(100% - 32px);text-align:center;line-height:1.5}

/* Einstieg ins Spiel auf der Social-Darts-Seite */
.game-teaser{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(18px,3vw,40px);
  margin-top:clamp(44px,5vw,72px);padding:clamp(22px,3vw,40px);background:#050505;
  box-shadow:inset 0 0 0 2px var(--mint),0 0 50px -14px rgba(105,215,200,.6)}
.game-teaser .miniboard{flex:0 0 auto;width:clamp(76px,8vw,108px);height:auto;transition:transform .6s var(--ease)}
.game-teaser:hover .miniboard{transform:rotate(-12deg) scale(1.04)}
.game-teaser-body{flex:1 1 280px;min-width:0}
.game-teaser-tag{display:block;margin-bottom:10px;font-family:var(--font-tech);font-weight:600;font-size:12px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--mint)}
.game-teaser-body .headline{margin-bottom:10px}
.game-teaser-body p{margin:0;max-width:54ch}
.game-teaser .btn{flex:0 0 auto}
@media (max-width:600px){.game-teaser .btn{width:100%}}