/* R15 game: inert until the original paddle is selected. No site-wide layout changes. */
.ttfg[open]{position:fixed;inset:0;display:block;box-sizing:border-box;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#071018;color:#f4f8ff;font-family:inherit;--g-safe-top:env(safe-area-inset-top,0px);--g-safe-bottom:env(safe-area-inset-bottom,0px);--g-blue:#5fbfff;overscroll-behavior:contain}
.ttfg::backdrop{background:transparent}
.ttfg [hidden]{display:none!important}
.ttfg-bg,.ttfg-canvas{position:absolute;display:block;max-width:none;pointer-events:none}
.ttfg-bg{object-fit:contain;transition:opacity .3s linear}
.ttfg-canvas{z-index:2}
.ttfg-input{position:absolute;inset:0;z-index:3;touch-action:none;user-select:none;-webkit-user-select:none;outline:none}
.ttfg-input:focus-visible{outline:2px solid #9cd7ff;outline-offset:-5px}
.ttfg-chrome{position:absolute;z-index:5;inset:0;pointer-events:none}
.ttfg button{font:inherit;cursor:pointer;touch-action:manipulation;color:inherit;pointer-events:auto}
.ttfg button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ttfg-top{position:absolute;top:calc(12px + var(--g-safe-top));left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.ttfg-icon{min-width:44px;min-height:44px;padding:10px;border:1px solid #739cba40;border-radius:50%;background:#091d2dcc;display:grid;place-items:center;box-shadow:0 3px 15px #0002}
.ttfg-icon svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}
.ttfg-brand{position:absolute;top:calc(32px + var(--g-safe-top));left:65px;right:65px;text-align:center;font-size:21px;font-weight:750;letter-spacing:-.045em;line-height:1.1;margin:0}
.ttfg-brand small{display:block;font-size:9px;letter-spacing:.2em;font-weight:500;color:#afc6d9;margin-top:8px}
.ttfg-score{position:absolute;top:calc(104px + var(--g-safe-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:22px;padding:13px 23px;border:1px solid #7aaed329;background:linear-gradient(140deg,#153552db,#071827df);border-radius:16px;box-shadow:0 8px 30px #0003;font-variant-numeric:tabular-nums;min-width:206px}
.ttfg-score span{display:flex;flex-direction:column;gap:5px;text-align:center;font-size:9px;letter-spacing:.16em;color:#a9c9e0;white-space:nowrap}
.ttfg-score b{font-size:30px;line-height:1;font-weight:680;letter-spacing:-.025em;color:#fff}
.ttfg-score i{font-size:16px;opacity:.35;font-style:normal}
.ttfg-rally{position:absolute;top:calc(190px + var(--g-safe-top));left:12px;right:12px;text-align:center;font-size:11px;color:#8eabc1;letter-spacing:.02em}
.ttfg-feedback{position:absolute;top:calc(220px + var(--g-safe-top));left:20px;right:20px;text-align:center;font-size:17px;line-height:1.3;font-weight:600;text-shadow:0 2px 8px #000;min-height:23px}
.ttfg-feedback[data-tone=good]{color:#a3e6ff}
.ttfg-bottom{position:absolute;left:16px;right:16px;bottom:calc(16px + var(--g-safe-bottom));display:flex;align-items:center;justify-content:space-between;gap:14px}
.ttfg-swipe{font-size:11px;line-height:1.45;color:#aac5d9;text-shadow:0 1px 5px #000;max-width:215px}
.ttfg-swipe b{display:block;font-weight:550;color:#e1f2ff;font-size:12px}
.ttfg-power{display:flex;align-items:end;gap:3px;height:16px;margin-top:6px}
.ttfg-power i{display:block;width:13px;height:7px;border-radius:2px;background:#7bb1d42c;transition:background .1s}
.ttfg-power i:nth-child(2){height:9px}.ttfg-power i:nth-child(3){height:11px}.ttfg-power i:nth-child(4){height:13px}.ttfg-power i:nth-child(5){height:16px}
.ttfg-power i.on{background:#72d4ff;box-shadow:0 0 9px #64cfff30}
.ttfg-panel{position:absolute;z-index:6;top:calc(119px + var(--g-safe-top));left:50%;transform:translateX(-50%);width:min(330px,calc(100% - 40px));box-sizing:border-box;padding:19px 21px;text-align:center;background:linear-gradient(145deg,#12324cf2,#0a1929f5);border:1px solid #87b7d83d;border-radius:18px;box-shadow:0 10px 40px #0003;pointer-events:auto}
.ttfg-panel h2{margin:0 0 9px;font-size:20px;font-weight:650;letter-spacing:-.025em;line-height:1.15}
.ttfg-panel p{margin:0 0 14px;font-size:12px;line-height:1.55;color:#afc7d9}
.ttfg-primary{width:100%;padding:12px 16px;min-height:46px;background:#cceaff;color:#082034!important;border:0;border-radius:9px;font-weight:650!important;font-size:13px!important;box-shadow:0 2px 12px #0002}
.ttfg-secondary{padding:10px 15px;margin-top:7px;min-height:44px;background:transparent;border:0;color:#b7cfe2!important;font-size:12px!important}
.ttfg[data-mode=welcome] .ttfg-score,.ttfg[data-mode=welcome] .ttfg-rally,.ttfg[data-mode=welcome] .ttfg-feedback{visibility:hidden}
.ttfg[data-mode=paused] .ttfg-panel,.ttfg[data-mode=over] .ttfg-panel,.ttfg[data-mode=error] .ttfg-panel{top:calc(208px + var(--g-safe-top))}
.ttfg[data-mode=over] .ttfg-feedback,.ttfg[data-mode=paused] .ttfg-feedback{visibility:hidden}
@media(max-height:690px) and (orientation:portrait){
.ttfg-brand{top:calc(23px + var(--g-safe-top));font-size:18px}.ttfg-brand small{font-size:8px;margin-top:5px}
.ttfg-top{top:calc(8px + var(--g-safe-top))}.ttfg-score{top:calc(77px + var(--g-safe-top));padding:8px 20px;border-radius:12px}.ttfg-score b{font-size:26px}
.ttfg-rally{top:calc(148px + var(--g-safe-top))}.ttfg-feedback{top:calc(171px + var(--g-safe-top));font-size:14px}
.ttfg-panel{top:calc(88px + var(--g-safe-top));padding:13px 16px;width:calc(100% - 40px)}.ttfg-panel h2{font-size:17px;margin-bottom:6px}.ttfg-panel p{font-size:11px;margin-bottom:9px;line-height:1.4}.ttfg-primary{min-height:44px;padding:10px}
.ttfg[data-mode=paused] .ttfg-panel,.ttfg[data-mode=over] .ttfg-panel,.ttfg[data-mode=error] .ttfg-panel{top:calc(170px + var(--g-safe-top))}
.ttfg-bottom{bottom:calc(9px + var(--g-safe-bottom));left:13px;right:13px}.ttfg-swipe{font-size:10px}.ttfg-swipe b{font-size:11px}
}
@media(orientation:landscape){
.ttfg-brand{top:calc(21px + var(--g-safe-top));left:70px;right:auto;width:170px;font-size:17px}
.ttfg-score{top:calc(90px + var(--g-safe-top));left:24px;transform:none;min-width:140px;padding:12px 16px;gap:18px}.ttfg-rally{top:calc(177px + var(--g-safe-top));left:24px;right:auto;width:176px}.ttfg-feedback{top:calc(202px + var(--g-safe-top));left:24px;right:auto;width:176px;font-size:13px}
.ttfg-panel,.ttfg[data-mode=paused] .ttfg-panel,.ttfg[data-mode=over] .ttfg-panel,.ttfg[data-mode=error] .ttfg-panel{top:calc(80px + var(--g-safe-top));left:auto;right:16px;transform:none;width:210px;padding:16px}.ttfg-panel h2{font-size:17px}.ttfg-panel p{font-size:11px}.ttfg-bottom{left:24px;right:16px;bottom:calc(12px + var(--g-safe-bottom))}.ttfg-swipe{max-width:178px;font-size:10px}.ttfg-swipe b{font-size:11px}
}
@media(min-height:691px) and (orientation:portrait){.ttfg[data-mode=welcome] .ttfg-panel{top:calc(112px + min(var(--g-safe-top),16px));padding:16px 21px}}
/* Only the entry state fades copy; the registered table image never moves. */
.r14-heading,.r7-copy,.r14-table-ui,.r14-paddle,.r16-training-paddle,.r16-training-direct,.dock,.site-header{transition:opacity .19s ease}
.r16-entering-game .r14-heading,.r16-entering-game .r7-copy,.r16-entering-game .r14-table-ui,.r16-entering-game .r14-paddle,.r16-entering-game .r16-training-paddle,.r16-entering-game .r16-training-direct,.r16-entering-game .dock,.r16-entering-game .site-header{opacity:0!important;pointer-events:none!important}
.ttfg-wait[open]{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
.ttfg-wait::backdrop{background:transparent}
.ttfg-wait-controls,.ttfg-flight-controls{position:absolute;z-index:8;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;align-items:center;gap:14px;justify-content:center;width:min(360px,calc(100% - 30px));box-sizing:border-box;padding:11px 15px;background:#081c30eb;border:1px solid #85b4d55c;border-radius:13px;font-family:inherit;font-weight:600;font-size:13px;line-height:1.4;box-shadow:0 8px 30px #0007}
.ttfg-wait-controls span,.ttfg-flight-controls span{flex:1}
.ttfg-wait-controls button,.ttfg-flight-controls button{min-height:44px;padding:6px 12px;border:1px solid #aac8df88;border-radius:8px;color:#fff;background:#183d5d;font:inherit;cursor:pointer}
.ttfg-wait-controls button:focus-visible,.ttfg-flight-controls button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.ttfg-flight-controls{pointer-events:auto}
.ttfg-sprite{position:absolute;z-index:3;display:block;max-width:none;pointer-events:none;object-fit:fill}
.ttfg[data-mode=entering] .ttfg-chrome,.ttfg[data-mode=entering] .ttfg-panel,.ttfg[data-mode=entering] .ttfg-input{visibility:hidden}
.ttfg:not([data-mode=entering]) .ttfg-flight-controls,.ttfg:not([data-mode=entering]) .ttfg-sprite{display:none}
@media(prefers-reduced-motion:reduce){.ttfg-bg,.ttfg-power i,.r14-heading,.r7-copy,.r14-table-ui,.r14-paddle,.r16-training-paddle,.r16-training-direct,.dock,.site-header{transition:none}}

/* Load after game.css. Only the effects-equipped game gets HUD layout adjustments. */
.ttfg .ttfg-item{--ttfg-item-color:#9bc4df;--ttfg-item-pop:1;--ttfg-item-glint:0;--ttfg-item-shot:0;position:absolute;top:calc(104px + var(--g-safe-top,0px));right:12px;box-sizing:border-box;width:148px;min-height:78px;display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto 9px;gap:7px 8px;align-items:center;padding:10px 11px 8px;border:1px solid #8db9d53d;border-radius:14px;background:linear-gradient(140deg,#16344ce8,#081724ed);box-shadow:0 5px 22px #0003;pointer-events:none;isolation:isolate;transform:scale(var(--ttfg-item-pop));transform-origin:80% 50%;color:#f3f8ff;font-variant-numeric:tabular-nums;contain:layout style}
.ttfg .ttfg-item::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,transparent 15%,#fff 47%,transparent 75%);opacity:var(--ttfg-item-glint);pointer-events:none}
.ttfg .ttfg-item::after{content:"";position:absolute;inset:0;border:1px solid var(--ttfg-item-color);border-radius:inherit;opacity:var(--ttfg-item-shot);pointer-events:none}
.ttfg .ttfg-item-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid #d1eaff40;border-radius:10px;background:#081521b3;color:var(--ttfg-item-color);font:750 27px/1 system-ui,sans-serif;text-shadow:0 0 14px var(--ttfg-item-color);box-shadow:inset 0 0 12px #ffffff08;white-space:nowrap}
.ttfg .ttfg-item-icon{overflow:hidden;perspective:100px}
.ttfg .ttfg-item-symbol{display:block;will-change:transform,opacity}
.ttfg .ttfg-item-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.ttfg .ttfg-item-eyebrow{font-size:8px;font-weight:650;line-height:1.1;letter-spacing:.11em;color:#a7c2d7;white-space:nowrap}
.ttfg .ttfg-item-label{font-size:12px;line-height:1.15;font-weight:700;letter-spacing:-.015em;white-space:nowrap}
.ttfg .ttfg-item-cue{font-size:8px;line-height:1.2;color:#b6ccdc;white-space:nowrap;letter-spacing:-.02em}
.ttfg .ttfg-item-charges{grid-column:1/-1;display:flex;justify-content:flex-end;align-items:center;gap:5px;height:7px}
.ttfg .ttfg-item-charges i{width:20px;flex:1 1 0;max-width:20px;min-width:0;height:4px;border-radius:3px;display:block;background:#7494ab30}
.ttfg .ttfg-item-charges i.on{background:var(--ttfg-item-color);box-shadow:0 0 8px color-mix(in srgb,var(--ttfg-item-color) 40%,transparent)}
.ttfg .ttfg-item-progress{position:absolute;left:11px;right:11px;bottom:8px;height:3px;border-radius:2px;overflow:hidden;background:#90abc42b}
.ttfg .ttfg-item-progress i{display:block;width:100%;height:100%;background:var(--ttfg-item-color);transform:scaleX(0);transform-origin:left center;will-change:transform}
.ttfg .ttfg-item[data-phase=rolling] .ttfg-item-charges{visibility:hidden}
.ttfg .ttfg-item[data-phase=empty] .ttfg-item-icon{font-size:23px;text-shadow:none;color:#a6c4d8;border-style:dashed}
.ttfg .ttfg-item[data-phase=empty] .ttfg-item-charges{opacity:.6}
.ttfg .ttfg-item[data-phase=active]{border-color:color-mix(in srgb,var(--ttfg-item-color) 38%,#416176)}
.ttfg .ttfg-item-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
/* Reserve two separate columns rather than placing the card on the centered score. */
.ttfg.ttfg-effects .ttfg-score{left:12px;transform:none;box-sizing:border-box;width:calc(100% - 184px);max-width:206px;min-width:0;padding:13px 12px;gap:18px}
.ttfg.ttfg-effects .ttfg-rally{top:calc(196px + var(--g-safe-top,0px))}
/* Start/pause/result/error panels are intentionally the only focus while open. */
.ttfg:is([data-mode=welcome],[data-mode=paused],[data-mode=over],[data-mode=error],[data-mode=entering],[data-mode=closing]) .ttfg-item{visibility:hidden}
@media(max-width:359px) and (orientation:portrait){
  .ttfg .ttfg-item{width:126px;padding:9px 8px 7px;grid-template-columns:27px minmax(0,1fr);gap:6px}
  .ttfg .ttfg-item-icon{width:27px;height:31px;font-size:24px;border-radius:8px}
  .ttfg .ttfg-item-label{font-size:11px}
  .ttfg .ttfg-item-cue{font-size:7px}
  .ttfg .ttfg-item-eyebrow{font-size:7px}
  .ttfg.ttfg-effects .ttfg-score{width:calc(100% - 162px);gap:14px;padding-left:8px;padding-right:8px}
}
@media(max-height:690px) and (orientation:portrait){
  .ttfg .ttfg-item{top:calc(77px + var(--g-safe-top,0px));min-height:69px;padding-top:8px;padding-bottom:6px;border-radius:12px}
  .ttfg.ttfg-effects .ttfg-score{top:calc(77px + var(--g-safe-top,0px));padding-top:8px;padding-bottom:8px}
  .ttfg.ttfg-effects .ttfg-rally{top:calc(158px + var(--g-safe-top,0px))}
  .ttfg.ttfg-effects .ttfg-feedback{top:calc(181px + var(--g-safe-top,0px))}
}
@media(orientation:landscape){
  .ttfg .ttfg-item{top:calc(80px + var(--g-safe-top,0px));right:16px;width:148px}
  .ttfg.ttfg-effects .ttfg-score{top:calc(90px + var(--g-safe-top,0px));left:24px;width:176px;min-width:0;padding:12px 16px;gap:18px}
  .ttfg.ttfg-effects .ttfg-rally{top:calc(177px + var(--g-safe-top,0px));left:24px;right:auto;width:176px}
}
@media(prefers-reduced-motion:reduce){
  .ttfg .ttfg-item{transform:none}
  .ttfg .ttfg-item::before{opacity:0}
}
.ttfg .ttfg-item[data-reduced=true]{transform:none}
.ttfg .ttfg-item[data-reduced=true]::before{opacity:0}

/* DK 01.10.: Schwierigkeitsstufen */
.ttfg-levels{display:flex;gap:6px;margin:0 0 10px;padding:4px;border-radius:11px;background:#ffffff12;border:1px solid #ffffff1f}
.ttfg-levels button{flex:1 1 0;min-height:40px;padding:0 6px;border:0;border-radius:8px;background:transparent;color:#d9e6f0!important;
  font:650 13px/1 inherit!important;letter-spacing:.01em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ttfg-levels button[aria-checked=true]{background:#f7d020;color:#141310!important;box-shadow:0 2px 10px #0004}
.ttfg-levels button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ttfg:not([data-mode=welcome]) .ttfg-levels{display:none}

/* DK 08.10.: Spielende – Auswahl Nochmal / Probetraining */
.ttfg-end{display:grid;gap:8px;margin-top:4px}
.ttfg-end[hidden]{display:none}
.ttfg:not([data-mode=over]) .ttfg-end{display:none}

/* BEGIN TTF DESKTOP V1 */
/* TTF desktop game v1: scoped to the desktop instance, never the mobile game. */
@media(min-width:961px){
.ttfg.ttfg-desktop[open]{background:transparent}
.ttfg-desktop .ttfg-bg{transition:none;object-fit:fill}
.ttfg-desktop .ttfg-top{top:24px;left:28px;right:28px;justify-content:flex-start;gap:12px}
.ttfg-desktop .ttfg-icon{width:48px;height:48px;background:#091d2de8}
.ttfg-desktop .ttfg-icon svg{width:22px;height:22px}
.ttfg-desktop .ttfg-brand{top:30px;left:152px;right:auto;width:auto;text-align:left;font-size:24px}
.ttfg-desktop .ttfg-brand small{font-size:10px;margin-top:7px}
.ttfg.ttfg-desktop .ttfg-score{top:22px;left:50%;right:auto;transform:translateX(-50%);width:256px;max-width:none;min-width:0;padding:10px 24px;gap:30px;border-radius:16px;background:#091d2deb}
.ttfg-desktop .ttfg-score b{font-size:38px}
.ttfg-desktop .ttfg-score span{font-size:11px}
.ttfg.ttfg-desktop .ttfg-rally{top:115px;left:50%;right:auto;transform:translateX(-50%);width:400px;font-size:14px;color:#ecf4fb;text-shadow:0 2px 8px #000}
.ttfg.ttfg-desktop .ttfg-feedback{top:147px;left:50%;right:auto;transform:translateX(-50%);width:560px;font-size:19px}
.ttfg.ttfg-desktop .ttfg-panel{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);width:460px;padding:30px 34px;border-radius:22px;background:linear-gradient(140deg,#14354bf7,#081929fa);box-shadow:0 18px 70px #0007}
.ttfg-desktop .ttfg-panel h2{font-size:30px;margin-bottom:16px}
.ttfg-desktop .ttfg-panel p{font-size:16px;line-height:1.6;margin-bottom:22px}
.ttfg-desktop .ttfg-primary{font-size:17px!important;min-height:50px}
.ttfg-desktop .ttfg-secondary{font-size:15px!important;min-height:44px}
.ttfg-desktop .ttfg-levels{margin-bottom:16px;gap:7px;padding:5px}
.ttfg-desktop .ttfg-levels button{font-size:16px!important;min-height:45px}
.ttfg-desktop .ttfg-bottom{left:28px;right:28px;bottom:22px;align-items:end}
.ttfg-desktop .ttfg-swipe{max-width:none;font-size:13px;line-height:1.25;background:#081929e8;border:1px solid #87b7d83d;border-radius:13px;padding:8px 14px}
.ttfg-desktop .ttfg-swipe b{font-size:15px}
.ttfg-desktop .ttfg-power{margin-top:4px;height:12px}
.ttfg-desktop .ttfg-power i{height:5px}
.ttfg-desktop .ttfg-power i:nth-child(2){height:7px}
.ttfg-desktop .ttfg-power i:nth-child(3){height:9px}
.ttfg-desktop .ttfg-power i:nth-child(4){height:10px}
.ttfg-desktop .ttfg-power i:nth-child(5){height:12px}
.ttfg.ttfg-desktop .ttfg-item{top:24px;right:28px;width:210px;min-height:87px;grid-template-columns:40px minmax(0,1fr);padding:13px}
.ttfg-desktop .ttfg-item-icon{width:40px;height:40px}
.ttfg-desktop .ttfg-item-eyebrow{font-size:10px}
.ttfg-desktop .ttfg-item-label{font-size:16px}
.ttfg-desktop .ttfg-item-cue{font-size:10px}
.ttfg-desktop .ttfg-flight-controls{font-size:16px;width:410px;bottom:26px}
.ttfg-desktop[data-mode=closing] .ttfg-input{pointer-events:none}
@media(min-width:1920px){
.ttfg-desktop .ttfg-brand{font-size:28px}
.ttfg.ttfg-desktop .ttfg-panel{width:510px;padding:36px 40px}
.ttfg-desktop .ttfg-panel h2{font-size:34px}
.ttfg-desktop .ttfg-panel p{font-size:18px}
}
}

/* END TTF DESKTOP V1 */

/* DK 08.10.: Desktop – die Maus IST der Schläger (kein Systemcursor über dem Spielfeld).
   Buttons heben sich beim Darüberfahren sichtbar nach vorn, der Schläger blendet dann aus. */
.ttfg-desktop[data-mode=playing] .ttfg-input{cursor:none}
.ttfg-desktop .ttfg-chrome button{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease}
.ttfg-desktop .ttfg-chrome button:hover,.ttfg-desktop .ttfg-chrome button:focus-visible{transform:translateY(-3px) scale(1.14);background:#163a58;border-color:#e2c46a;box-shadow:0 0 0 3px #e2c46a66,0 12px 28px #000a;color:#fff;position:relative;z-index:3}
.ttfg-desktop .ttfg-chrome button:active{transform:translateY(-1px) scale(1.06)}
@media (prefers-reduced-motion:reduce){.ttfg-desktop .ttfg-chrome button{transition:none}.ttfg-desktop .ttfg-chrome button:hover{transform:none}}