/* Farbpalette: eine Akzentfarbe pro Rolle */
:root { --accent: #7fe0a0; --primary: #2f8f5c; --primary-dark: #24714a; --gold: #ffd23f; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: radial-gradient(circle at 50% 25%, #17251a 0%, #0d1410 50%, #050705 100%);
  color: #e8e8e8;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  touch-action: manipulation;
}
@supports (height: 100dvh) {
  html, body { height: 100dvh; }
}
#app {
  display: flex; flex-direction: column; align-items: center;
  height: 100%; max-width: 480px; margin: 0 auto; padding: 8px;
  justify-content: center;
}
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 4px 6px 8px;
}
.topbar h1 { font-family: 'Orbitron', 'Space Grotesk', sans-serif; font-size: 18px; font-weight: 800; margin: 0; letter-spacing: 2px; color: var(--accent); text-shadow: 0 0 12px rgba(127,224,160,0.55); cursor: pointer; }
.topbar h1:active { color: #a8f0c4; }
.stats { display: flex; gap: 8px; font-size: 12px; }
.stat { position: relative; background: #17201a; border-radius: 8px; padding: 4px 8px; min-width: 50px; text-align: center; }
.stat span { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.main {
  display: flex; width: 100%; flex: 1 1 auto; min-height: 0;
  align-items: center; justify-content: center; overflow: hidden;
}
#board-wrap {
  position: relative; background: #0a0f0b; border-radius: 10px;
  padding: 4px; border: 2px solid #35452f; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(127,224,160,0.08), 0 8px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
canvas#board { display: block; border-radius: 6px; border: 1px solid #263420; transition: filter 0.4s ease; }
#overlay {
  position: absolute; inset: 0; background: rgba(9,12,10,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 8px; gap: 8px; text-align: center; padding: 14px;
  opacity: 1; transform: scale(1);
  transition: opacity 0.35s ease, transform 0.35s ease;
  overflow-y: auto;
}
#overlay.hidden { opacity: 0; transform: scale(0.96); pointer-events: none; }
#deathFlash {
  position: absolute; inset: 0; border-radius: 8px;
  background: #fff; opacity: 0; pointer-events: none; z-index: 60;
}
@keyframes deathFlashAnim {
  0% { opacity: 0.8; }
  100% { opacity: 0; }
}
#deathFlash.active { animation: deathFlashAnim 0.45s ease-out; }
#board-wrap.dimming canvas#board { filter: brightness(0.35) saturate(0.6); }
#overlay h2 { margin: 0; font-family: 'Orbitron', 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 800; letter-spacing: 1px; color: var(--accent); text-shadow: 0 0 14px rgba(127,224,160,0.5); }
#overlay p { margin: 0; font-size: 12px; color: #bbb; max-width: 260px; white-space: pre-line; line-height: 1.45; }
#overlayText.hidden { display: none; }
button.primary {
  background: var(--primary); color: #fff; border: none; border-radius: 8px;
  padding: 10px 22px; font-size: 15px; font-weight: 600; margin-top: 4px;
}
button.primary:active { background: var(--primary-dark); }
.controls {
  width: 100%; display: grid; grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px; margin-top: 8px; flex: 0 0 auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.btn {
  background: #17201a; border: 1px solid #2c3a27; border-radius: 12px;
  color: #e8e8e8; font-size: var(--btn-font, 24px); height: var(--btn-h, 52px); display: flex;
  align-items: center; justify-content: center;
}
.btn:active { background: #24312b; }
.btn.up { grid-column: 2; grid-row: 1; }
.btn.left { grid-column: 1; grid-row: 2; }
.btn.down { grid-column: 2; grid-row: 2; }
.btn.right { grid-column: 3; grid-row: 2; }
.btn.pausecell {
  grid-column: 1; grid-row: 1; font-size: 16px; color: #888;
  position: relative; overflow: hidden;
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease, font-size 0.25s ease;
}
#pauseGlyph { position: relative; z-index: 2; display: block; }
.cashFill {
  position: absolute; inset: 0; border-radius: 12px; overflow: hidden;
  pointer-events: none; z-index: 1;
}
.cashFill::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--fill, 0%); background: rgba(47,143,92,0.55);
  transition: height 0.25s ease;
}
/* Auszahlung bereit: der Knopf soll den Blick ziehen - grosser Geldsack,
   goldener Rahmen, atmender Schein. Der Rest der Leiste bleibt ruhig. */
.btn.pausecell.cashReady {
  color: var(--gold); border-color: var(--gold);
  background: linear-gradient(165deg, #3d3113 0%, #241c09 100%);
  font-size: calc(var(--btn-font, 24px) * 1.1);
  animation: cashPulse 2.6s linear infinite;
  z-index: 3;
}
.btn.pausecell.cashReady #pauseGlyph {
  animation: coinBob 2.6s linear infinite;
  filter: drop-shadow(0 0 7px rgba(255,210,63,0.9));
}
.btn.pausecell.cashReady .cashFill::after { background: rgba(255,210,63,0.42); }
@keyframes coinBob {
  0% { transform: translateY(-0.00px) scaleX(1.0000) scaleY(1.0000); }
  3.173% { transform: translateY(-0.20px) scaleX(0.9955) scaleY(1.0045); }
  6.293% { transform: translateY(-0.40px) scaleX(1.0090) scaleY(0.9910); }
  9.357% { transform: translateY(-0.61px) scaleX(1.0270) scaleY(0.9730); }
  12.367% { transform: translateY(-0.66px) scaleX(1.0146) scaleY(0.9854); }
  15.32% { transform: translateY(-0.66px) scaleX(0.9852) scaleY(1.0148); }
  18.217% { transform: translateY(-0.67px) scaleX(0.9700) scaleY(1.0300); }
  21.057% { transform: translateY(-0.68px) scaleX(0.9848) scaleY(1.0152); }
  23.838% { transform: translateY(-0.69px) scaleX(1.0154) scaleY(0.9846); }
  26.561% { transform: translateY(-0.70px) scaleX(1.0313) scaleY(0.9687); }
  29.223% { transform: translateY(-0.71px) scaleX(1.0159) scaleY(0.9841); }
  31.825% { transform: translateY(-0.72px) scaleX(0.9839) scaleY(1.0161); }
  34.365% { transform: translateY(-0.74px) scaleX(0.9672) scaleY(1.0328); }
  36.843% { transform: translateY(-0.75px) scaleX(0.9833) scaleY(1.0167); }
  39.257% { transform: translateY(-0.76px) scaleX(1.0170) scaleY(0.9830); }
  41.605% { transform: translateY(-0.78px) scaleX(1.0346) scaleY(0.9654); }
  43.888% { transform: translateY(-0.79px) scaleX(1.0176) scaleY(0.9824); }
  46.103% { transform: translateY(-0.81px) scaleX(0.9820) scaleY(1.0180); }
  48.249% { transform: translateY(-0.82px) scaleX(0.9632) scaleY(1.0368); }
  50.325% { transform: translateY(-0.84px) scaleX(0.9812) scaleY(1.0188); }
  52.328% { transform: translateY(-0.86px) scaleX(1.0193) scaleY(0.9807); }
  54.258% { transform: translateY(-0.89px) scaleX(1.0396) scaleY(0.9604); }
  56.113% { transform: translateY(-0.91px) scaleX(1.0203) scaleY(0.9797); }
  57.889% { transform: translateY(-0.94px) scaleX(0.9790) scaleY(1.0210); }
  59.585% { transform: translateY(-0.97px) scaleX(0.9567) scaleY(1.0433); }
  61.199% { transform: translateY(-1.00px) scaleX(0.9776) scaleY(1.0224); }
  62.726% { transform: translateY(-1.04px) scaleX(1.0233) scaleY(0.9767); }
  64.165% { transform: translateY(-1.09px) scaleX(1.0486) scaleY(0.9514); }
  65.511% { transform: translateY(-1.14px) scaleX(1.0255) scaleY(0.9745); }
  66.759% { transform: translateY(-1.20px) scaleX(0.9732) scaleY(1.0268); }
  67.905% { transform: translateY(-1.28px) scaleX(0.9429) scaleY(1.0571); }
  68.941% { transform: translateY(-1.38px) scaleX(0.9693) scaleY(1.0307); }
  69.859% { transform: translateY(-1.51px) scaleX(1.0336) scaleY(0.9664); }
  70.649% { transform: translateY(-1.69px) scaleX(1.0754) scaleY(0.9246); }
  71.294% { transform: translateY(-1.99px) scaleX(1.0443) scaleY(0.9557); }
  71.767% { transform: translateY(-2.00px) scaleX(0.9554) scaleY(1.0446); }
  72% { transform: translateY(-2.00px) scaleX(0.9107) scaleY(1.0893); }
  74% { transform: translateY(-1.53px) scaleX(0.9709) scaleY(1.0291); }
  76% { transform: translateY(-1.17px) scaleX(1.0334) scaleY(0.9666); }
  78% { transform: translateY(-0.90px) scaleX(1.0388) scaleY(0.9612); }
  80% { transform: translateY(-0.69px) scaleX(1.0058) scaleY(0.9942); }
  82% { transform: translateY(-0.53px) scaleX(0.9810) scaleY(1.0190); }
  84% { transform: translateY(-0.40px) scaleX(0.9842) scaleY(1.0158); }
  86% { transform: translateY(-0.31px) scaleX(1.0009) scaleY(0.9991); }
  88% { transform: translateY(-0.24px) scaleX(1.0098) scaleY(0.9902); }
  90% { transform: translateY(-0.18px) scaleX(1.0059) scaleY(0.9941); }
  92% { transform: translateY(-0.14px) scaleX(0.9981) scaleY(1.0019); }
  94% { transform: translateY(-0.11px) scaleX(0.9953) scaleY(1.0047); }
  96% { transform: translateY(-0.07px) scaleX(0.9984) scaleY(1.0016); }
  98% { transform: translateY(-0.02px) scaleX(1.0006) scaleY(0.9994); }
  100% { transform: translateY(-0.00px) scaleX(1.0000) scaleY(1.0000); }
  100% { transform: translateY(0) scaleX(1) scaleY(1); }
}
@keyframes readyFlash {
  0%   { transform: scale(1);    filter: brightness(1);   box-shadow: 0 0 0 rgba(255,255,255,0); }
  30%  { transform: scale(1.12); filter: brightness(2.1); box-shadow: 0 0 18px rgba(255,255,255,0.6); }
  60%  { transform: scale(0.99); filter: brightness(1.25); box-shadow: 0 0 8px rgba(255,255,255,0.25); }
  100% { transform: scale(1);    filter: brightness(1);   box-shadow: 0 0 0 rgba(255,255,255,0); }
}
.btn.justReady,
.btn.pausecell.cashReady.justReady { animation: readyFlash 0.5s ease-out; }
/* Chirp einer Verschmelzung: Inspiral mit steigender Frequenz, Merger-Blitz,
   Ringdown. Die Verformung ist quadrupolar - was in x gedehnt wird, staucht sich
   in y - und die Wellenfronten laufen als Schatten nach aussen. Die Stuetzstellen
   liegen phasengleichmaessig, nicht zeitgleichmaessig: kurz vor dem Merger steigt
   die Frequenz so stark, dass gleiche Zeitschritte das Signal untertasten wuerden. */
@keyframes cashPulse {
  0% { transform: scale(1.0000) scaleX(1.0000) scaleY(1.0000) skewX(0.00deg);
        box-shadow: 0 0 7px 0.0px rgba(255,210,63,0.000), 0 0 9px 13.0px rgba(255,190,90,0.000), 0 0 10.0px rgba(255,225,140,0.180), inset 0 0 6.0px rgba(255,235,180,0.000); }
  3.173% { transform: scale(1.0035) scaleX(1.0053) scaleY(0.9947) skewX(0.23deg);
        box-shadow: 0 0 7px 4.3px rgba(255,210,63,0.041), 0 0 9px 17.3px rgba(255,190,90,0.007), 0 0 12.0px rgba(255,225,140,0.242), inset 0 0 7.2px rgba(255,235,180,0.035); }
  6.293% { transform: scale(1.0070) scaleX(0.9894) scaleY(1.0106) skewX(0.45deg);
        box-shadow: 0 0 7px 8.7px rgba(255,210,63,0.058), 0 0 9px 21.7px rgba(255,190,90,0.005), 0 0 14.0px rgba(255,225,140,0.305), inset 0 0 8.4px rgba(255,235,180,0.070); }
  9.357% { transform: scale(1.0106) scaleX(0.9682) scaleY(1.0318) skewX(0.00deg);
        box-shadow: 0 0 7px 13.0px rgba(255,210,63,0.055), 0 0 9px 0.0px rgba(255,190,90,0.125), 0 0 16.1px rgba(255,225,140,0.368), inset 0 0 9.6px rgba(255,235,180,0.106); }
  12.367% { transform: scale(1.0115) scaleX(0.9828) scaleY(1.0172) skewX(-0.74deg);
        box-shadow: 0 0 7px 17.3px rgba(255,210,63,0.031), 0 0 9px 4.3px rgba(255,190,90,0.101), 0 0 16.6px rgba(255,225,140,0.383), inset 0 0 9.9px rgba(255,235,180,0.115); }
  15.32% { transform: scale(1.0116) scaleX(1.0174) scaleY(0.9826) skewX(-0.75deg);
        box-shadow: 0 0 7px 21.7px rgba(255,210,63,0.010), 0 0 9px 8.7px rgba(255,190,90,0.072), 0 0 16.6px rgba(255,225,140,0.386), inset 0 0 10.0px rgba(255,235,180,0.116); }
  18.217% { transform: scale(1.0118) scaleX(1.0353) scaleY(0.9647) skewX(-0.00deg);
        box-shadow: 0 0 7px 0.0px rgba(255,210,63,0.185), 0 0 9px 13.0px rgba(255,190,90,0.046), 0 0 16.7px rgba(255,225,140,0.388), inset 0 0 10.0px rgba(255,235,180,0.118); }
  21.057% { transform: scale(1.0119) scaleX(1.0179) scaleY(0.9821) skewX(0.77deg);
        box-shadow: 0 0 7px 4.3px rgba(255,210,63,0.140), 0 0 9px 17.3px rgba(255,190,90,0.024), 0 0 16.8px rgba(255,225,140,0.391), inset 0 0 10.1px rgba(255,235,180,0.119); }
  23.838% { transform: scale(1.0121) scaleX(0.9819) scaleY(1.0181) skewX(0.78deg);
        box-shadow: 0 0 7px 8.7px rgba(255,210,63,0.099), 0 0 9px 21.7px rgba(255,190,90,0.008), 0 0 16.9px rgba(255,225,140,0.394), inset 0 0 10.1px rgba(255,235,180,0.121); }
  26.561% { transform: scale(1.0123) scaleX(0.9632) scaleY(1.0368) skewX(0.00deg);
        box-shadow: 0 0 7px 13.0px rgba(255,210,63,0.064), 0 0 9px 0.0px rgba(255,190,90,0.145), 0 0 17.0px rgba(255,225,140,0.397), inset 0 0 10.2px rgba(255,235,180,0.123); }
  29.223% { transform: scale(1.0125) scaleX(0.9813) scaleY(1.0187) skewX(-0.80deg);
        box-shadow: 0 0 7px 17.3px rgba(255,210,63,0.034), 0 0 9px 4.3px rgba(255,190,90,0.110), 0 0 17.1px rgba(255,225,140,0.401), inset 0 0 10.3px rgba(255,235,180,0.125); }
  31.825% { transform: scale(1.0127) scaleX(1.0190) scaleY(0.9810) skewX(-0.81deg);
        box-shadow: 0 0 7px 21.7px rgba(255,210,63,0.011), 0 0 9px 8.7px rgba(255,190,90,0.078), 0 0 17.2px rgba(255,225,140,0.404), inset 0 0 10.3px rgba(255,235,180,0.127); }
  34.365% { transform: scale(1.0129) scaleX(1.0386) scaleY(0.9614) skewX(-0.00deg);
        box-shadow: 0 0 7px 0.0px rgba(255,210,63,0.202), 0 0 9px 13.0px rgba(255,190,90,0.050), 0 0 17.4px rgba(255,225,140,0.408), inset 0 0 10.4px rgba(255,235,180,0.129); }
  36.843% { transform: scale(1.0131) scaleX(1.0196) scaleY(0.9804) skewX(0.84deg);
        box-shadow: 0 0 7px 4.3px rgba(255,210,63,0.154), 0 0 9px 17.3px rgba(255,190,90,0.027), 0 0 17.5px rgba(255,225,140,0.412), inset 0 0 10.5px rgba(255,235,180,0.131); }
  39.257% { transform: scale(1.0133) scaleX(0.9800) scaleY(1.0200) skewX(0.86deg);
        box-shadow: 0 0 7px 8.7px rgba(255,210,63,0.109), 0 0 9px 21.7px rgba(255,190,90,0.009), 0 0 17.6px rgba(255,225,140,0.416), inset 0 0 10.6px rgba(255,235,180,0.133); }
  41.605% { transform: scale(1.0136) scaleX(0.9593) scaleY(1.0407) skewX(0.00deg);
        box-shadow: 0 0 7px 13.0px rgba(255,210,63,0.070), 0 0 9px 0.0px rgba(255,190,90,0.160), 0 0 17.8px rgba(255,225,140,0.420), inset 0 0 10.7px rgba(255,235,180,0.136); }
  43.888% { transform: scale(1.0138) scaleX(0.9792) scaleY(1.0208) skewX(-0.89deg);
        box-shadow: 0 0 7px 17.3px rgba(255,210,63,0.037), 0 0 9px 4.3px rgba(255,190,90,0.122), 0 0 17.9px rgba(255,225,140,0.425), inset 0 0 10.7px rgba(255,235,180,0.138); }
  46.103% { transform: scale(1.0141) scaleX(1.0212) scaleY(0.9788) skewX(-0.91deg);
        box-shadow: 0 0 7px 21.7px rgba(255,210,63,0.013), 0 0 9px 8.7px rgba(255,190,90,0.087), 0 0 18.1px rgba(255,225,140,0.430), inset 0 0 10.8px rgba(255,235,180,0.141); }
  48.249% { transform: scale(1.0144) scaleX(1.0433) scaleY(0.9567) skewX(-0.00deg);
        box-shadow: 0 0 7px 0.0px rgba(255,210,63,0.227), 0 0 9px 13.0px rgba(255,190,90,0.056), 0 0 18.2px rgba(255,225,140,0.436), inset 0 0 10.9px rgba(255,235,180,0.144); }
  50.325% { transform: scale(1.0148) scaleX(1.0221) scaleY(0.9779) skewX(0.95deg);
        box-shadow: 0 0 7px 4.3px rgba(255,210,63,0.173), 0 0 9px 17.3px rgba(255,190,90,0.030), 0 0 18.4px rgba(255,225,140,0.442), inset 0 0 11.1px rgba(255,235,180,0.148); }
  52.328% { transform: scale(1.0151) scaleX(0.9773) scaleY(1.0227) skewX(0.97deg);
        box-shadow: 0 0 7px 8.7px rgba(255,210,63,0.124), 0 0 9px 21.7px rgba(255,190,90,0.010), 0 0 18.6px rgba(255,225,140,0.448), inset 0 0 11.2px rgba(255,235,180,0.151); }
  54.258% { transform: scale(1.0155) scaleX(0.9534) scaleY(1.0466) skewX(0.00deg);
        box-shadow: 0 0 7px 13.0px rgba(255,210,63,0.080), 0 0 9px 0.0px rgba(255,190,90,0.183), 0 0 18.9px rgba(255,225,140,0.455), inset 0 0 11.3px rgba(255,235,180,0.155); }
  56.113% { transform: scale(1.0160) scaleX(0.9761) scaleY(1.0239) skewX(-1.03deg);
        box-shadow: 0 0 7px 17.3px rgba(255,210,63,0.043), 0 0 9px 4.3px rgba(255,190,90,0.140), 0 0 19.1px rgba(255,225,140,0.463), inset 0 0 11.5px rgba(255,235,180,0.160); }
  57.889% { transform: scale(1.0164) scaleX(1.0247) scaleY(0.9753) skewX(-1.06deg);
        box-shadow: 0 0 7px 21.7px rgba(255,210,63,0.015), 0 0 9px 8.7px rgba(255,190,90,0.101), 0 0 19.4px rgba(255,225,140,0.471), inset 0 0 11.6px rgba(255,235,180,0.164); }
  59.585% { transform: scale(1.0170) scaleX(1.0509) scaleY(0.9491) skewX(-0.00deg);
        box-shadow: 0 0 7px 0.0px rgba(255,210,63,0.267), 0 0 9px 13.0px rgba(255,190,90,0.066), 0 0 19.7px rgba(255,225,140,0.481), inset 0 0 11.8px rgba(255,235,180,0.170); }
  61.199% { transform: scale(1.0176) scaleX(1.0264) scaleY(0.9736) skewX(1.13deg);
        box-shadow: 0 0 7px 4.3px rgba(255,210,63,0.206), 0 0 9px 17.3px rgba(255,190,90,0.036), 0 0 20.0px rgba(255,225,140,0.491), inset 0 0 12.0px rgba(255,235,180,0.176); }
  62.726% { transform: scale(1.0183) scaleX(0.9726) scaleY(1.0274) skewX(1.17deg);
        box-shadow: 0 0 7px 8.7px rgba(255,210,63,0.150), 0 0 9px 21.7px rgba(255,190,90,0.012), 0 0 20.4px rgba(255,225,140,0.503), inset 0 0 12.3px rgba(255,235,180,0.183); }
  64.165% { transform: scale(1.0190) scaleX(0.9429) scaleY(1.0571) skewX(0.00deg);
        box-shadow: 0 0 7px 13.0px rgba(255,210,63,0.099), 0 0 9px 0.0px rgba(255,190,90,0.224), 0 0 20.9px rgba(255,225,140,0.517), inset 0 0 12.5px rgba(255,235,180,0.190); }
  65.511% { transform: scale(1.0200) scaleX(0.9701) scaleY(1.0299) skewX(-1.28deg);
        box-shadow: 0 0 7px 17.3px rgba(255,210,63,0.054), 0 0 9px 4.3px rgba(255,190,90,0.176), 0 0 21.4px rgba(255,225,140,0.534), inset 0 0 12.8px rgba(255,235,180,0.200); }
  66.759% { transform: scale(1.0211) scaleX(1.0316) scaleY(0.9684) skewX(-1.35deg);
        box-shadow: 0 0 7px 21.7px rgba(255,210,63,0.019), 0 0 9px 8.7px rgba(255,190,90,0.130), 0 0 22.0px rgba(255,225,140,0.553), inset 0 0 13.2px rgba(255,235,180,0.211); }
  67.905% { transform: scale(1.0224) scaleX(1.0672) scaleY(0.9328) skewX(-0.00deg);
        box-shadow: 0 0 7px 0.0px rgba(255,210,63,0.352), 0 0 9px 13.0px rgba(255,190,90,0.087), 0 0 22.8px rgba(255,225,140,0.577), inset 0 0 13.7px rgba(255,235,180,0.224); }
  68.941% { transform: scale(1.0241) scaleX(1.0361) scaleY(0.9639) skewX(1.55deg);
        box-shadow: 0 0 7px 4.3px rgba(255,210,63,0.283), 0 0 9px 17.3px rgba(255,190,90,0.049), 0 0 23.8px rgba(255,225,140,0.607), inset 0 0 14.3px rgba(255,235,180,0.241); }
  69.859% { transform: scale(1.0263) scaleX(0.9605) scaleY(1.0395) skewX(1.69deg);
        box-shadow: 0 0 7px 8.7px rgba(255,210,63,0.216), 0 0 9px 21.7px rgba(255,190,90,0.018), 0 0 25.1px rgba(255,225,140,0.647), inset 0 0 15.0px rgba(255,235,180,0.263); }
  70.649% { transform: scale(1.0296) scaleX(0.9113) scaleY(1.0887) skewX(0.00deg);
        box-shadow: 0 0 7px 13.0px rgba(255,210,63,0.153), 0 0 9px 0.0px rgba(255,190,90,0.348), 0 0 26.9px rgba(255,225,140,0.703), inset 0 0 16.1px rgba(255,235,180,0.296); }
  71.294% { transform: scale(1.0348) scaleX(0.9479) scaleY(1.0521) skewX(-2.24deg);
        box-shadow: 0 0 7px 17.3px rgba(255,210,63,0.094), 0 0 9px 4.3px rgba(255,190,90,0.306), 0 0 29.9px rgba(255,225,140,0.796), inset 0 0 17.9px rgba(255,235,180,0.348); }
  71.767% { transform: scale(1.0350) scaleX(1.0525) scaleY(0.9475) skewX(-2.25deg);
        box-shadow: 0 0 7px 21.7px rgba(255,210,63,0.031), 0 0 9px 8.7px rgba(255,190,90,0.216), 0 0 30.0px rgba(255,225,140,0.800), inset 0 0 18.0px rgba(255,235,180,0.350); }
  72% { transform: scale(1.0350) scaleX(1.1050) scaleY(0.8950) skewX(-0.00deg);
        box-shadow: 0 0 7px 0.0px rgba(255,210,63,0.550), 0 0 9px 13.0px rgba(255,190,90,0.136), 0 0 30.0px rgba(255,225,140,0.800), inset 0 0 18.0px rgba(255,235,180,0.350); }
  74% { transform: scale(1.0268) scaleX(1.0342) scaleY(0.9658) skewX(1.80deg);
        box-shadow: 0 0 7px 4.7px rgba(255,210,63,0.307), 0 0 9px 17.7px rgba(255,190,90,0.051), 0 0 25.3px rgba(255,225,140,0.655), inset 0 0 15.2px rgba(255,235,180,0.268); }
  76% { transform: scale(1.0205) scaleX(0.9607) scaleY(1.0393) skewX(1.18deg);
        box-shadow: 0 0 7px 9.4px rgba(255,210,63,0.158), 0 0 9px 22.4px rgba(255,190,90,0.010), 0 0 21.7px rgba(255,225,140,0.544), inset 0 0 13.0px rgba(255,235,180,0.205); }
  78% { transform: scale(1.0157) scaleX(0.9543) scaleY(1.0457) skewX(-0.29deg);
        box-shadow: 0 0 7px 14.0px rgba(255,210,63,0.071), 0 0 9px 1.0px rgba(255,190,90,0.174), 0 0 19.0px rgba(255,225,140,0.459), inset 0 0 11.4px rgba(255,235,180,0.157); }
  80% { transform: scale(1.0120) scaleX(0.9932) scaleY(1.0068) skewX(-0.88deg);
        box-shadow: 0 0 7px 18.7px rgba(255,210,63,0.025), 0 0 9px 5.7px rgba(255,190,90,0.095), 0 0 16.9px rgba(255,225,140,0.393), inset 0 0 10.1px rgba(255,235,180,0.120); }
  82% { transform: scale(1.0092) scaleX(1.0224) scaleY(0.9776) skewX(-0.40deg);
        box-shadow: 0 0 7px 23.4px rgba(255,210,63,0.004), 0 0 9px 10.4px rgba(255,190,90,0.048), 0 0 15.3px rgba(255,225,140,0.343), inset 0 0 9.2px rgba(255,235,180,0.092); }
  84% { transform: scale(1.0071) scaleX(1.0186) scaleY(0.9814) skewX(0.25deg);
        box-shadow: 0 0 7px 2.1px rgba(255,210,63,0.097), 0 0 9px 15.1px rgba(255,190,90,0.021), 0 0 14.0px rgba(255,225,140,0.305), inset 0 0 8.4px rgba(255,235,180,0.071); }
  86% { transform: scale(1.0054) scaleX(0.9990) scaleY(1.0010) skewX(0.40deg);
        box-shadow: 0 0 7px 6.8px rgba(255,210,63,0.053), 0 0 9px 19.8px rgba(255,190,90,0.007), 0 0 13.1px rgba(255,225,140,0.276), inset 0 0 7.9px rgba(255,235,180,0.054); }
  88% { transform: scale(1.0041) scaleX(0.9884) scaleY(1.0116) skewX(0.11deg);
        box-shadow: 0 0 7px 11.4px rgba(255,210,63,0.026), 0 0 9px 24.4px rgba(255,190,90,0.001), 0 0 12.4px rgba(255,225,140,0.253), inset 0 0 7.4px rgba(255,235,180,0.041); }
  90% { transform: scale(1.0032) scaleX(0.9931) scaleY(1.0069) skewX(-0.16deg);
        box-shadow: 0 0 7px 16.1px rgba(255,210,63,0.011), 0 0 9px 3.1px rgba(255,190,90,0.030), 0 0 11.8px rgba(255,225,140,0.236), inset 0 0 7.1px rgba(255,235,180,0.032); }
  92% { transform: scale(1.0024) scaleX(1.0023) scaleY(0.9977) skewX(-0.17deg);
        box-shadow: 0 0 7px 20.8px rgba(255,210,63,0.003), 0 0 9px 7.8px rgba(255,190,90,0.016), 0 0 11.4px rgba(255,225,140,0.223), inset 0 0 6.8px rgba(255,235,180,0.024); }
  94% { transform: scale(1.0019) scaleX(1.0055) scaleY(0.9945) skewX(-0.02deg);
        box-shadow: 0 0 7px 25.5px rgba(255,210,63,0.000), 0 0 9px 12.5px rgba(255,190,90,0.008), 0 0 11.1px rgba(255,225,140,0.213), inset 0 0 6.6px rgba(255,235,180,0.019); }
  96% { transform: scale(1.0011) scaleX(1.0018) scaleY(0.9982) skewX(0.07deg);
        box-shadow: 0 0 7px 4.2px rgba(255,210,63,0.014), 0 0 9px 17.2px rgba(255,190,90,0.002), 0 0 10.7px rgba(255,225,140,0.200), inset 0 0 6.4px rgba(255,235,180,0.011); }
  98% { transform: scale(1.0004) scaleX(0.9993) scaleY(1.0007) skewX(0.03deg);
        box-shadow: 0 0 7px 8.8px rgba(255,210,63,0.004), 0 0 9px 21.8px rgba(255,190,90,0.000), 0 0 10.2px rgba(255,225,140,0.188), inset 0 0 6.1px rgba(255,235,180,0.004); }
  100% { transform: scale(1.0000) scaleX(1.0000) scaleY(1.0000) skewX(-0.00deg);
        box-shadow: 0 0 7px 13.5px rgba(255,210,63,0.000), 0 0 9px 0.5px rgba(255,190,90,0.000), 0 0 10.0px rgba(255,225,140,0.180), inset 0 0 6.0px rgba(255,235,180,0.000); }
  100% { transform: scale(1) scaleX(1) scaleY(1) skewX(0deg);
        box-shadow: 0 0 7px 0px rgba(255,210,63,0), 0 0 9px 13px rgba(255,190,90,0), 0 0 10px rgba(255,225,140,0.18), inset 0 0 6px rgba(255,235,180,0); }
}
.btn.info {
  grid-column: 3; grid-row: 1; font-size: 13px; font-weight: 700; color: #f5d347;
  position: relative; overflow: hidden;
}
.btn.info:active { background: #24312b; }
.btn.info.empty { color: #5c5a3f; }
#infoGlyph { position: relative; z-index: 2; }
#boosts { margin-left: 3px; }
.boostFill {
  position: absolute; inset: 0; border-radius: 12px; overflow: hidden;
  pointer-events: none; z-index: 1;
}
.boostFill::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--fill, 100%); background: rgba(245,211,71,0.28);
  transition: height 0.25s ease;
}
.btn.gadget {
  grid-column: 4; grid-row: 1;
  background: #16232e; border-color: #274257; color: #7fc4e0;
  font-size: var(--btn-font, 24px); position: relative;
}
.btn.gadget:active { background: #1f3040; }
.btn.gadget.oncooldown { color: #3c5464; }
.gadgetSweep {
  position: absolute; inset: 0; border-radius: 12px; overflow: hidden; pointer-events: none;
}
.gadgetSweep::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(6,10,8,0.72); height: var(--cd, 0%);
  transition: height 0.08s linear;
}
.btn.shoot {
  grid-column: 4; grid-row: 2;
  background: #3a1414; border-color: #6b2a24; color: #ff8a6e;
  font-size: var(--btn-font, 24px); position: relative;
}
.btn.shoot.oncooldown { color: #7a4235; }
.btn.shoot:active { background: #522019; }
.btn.shoot:active .crosshairIcon { transform: scale(0.88); }
.crosshairIcon { display: block; filter: drop-shadow(0 0 3px rgba(255,138,110,0.55)); transition: transform 0.08s ease; }
@keyframes comboPulse {
  0% { transform: scale(1); }
  30% { transform: scale(1.28); }
  60% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
#achievementBanner {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%) translateY(-70px);
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #2a2f22, #1c2016);
  border: 1px solid #4a5a2f;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 800;
  color: #e8e8e8;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 0 14px rgba(255,210,63,0.35);
  transition: transform 0.4s ease, opacity 0.4s ease;
  z-index: 50;
  white-space: nowrap;
}
#achievementBanner.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
#achEmoji { font-size: 20px; }
.comboBadgePill {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  color: #1a1200;
  background: linear-gradient(135deg, var(--gold), #ff8a3d);
  box-shadow: 0 0 10px rgba(255, 154, 61, 0.85), 0 0 2px rgba(255,255,255,0.6);
  animation: comboPulse 0.45s ease-out;
  white-space: nowrap;
  z-index: 5;
}
#splash {
  position: fixed; inset: 0; z-index: 200;
  background: radial-gradient(circle at 50% 42%, #16241a 0%, #0a100b 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#splash.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#splashLogo {
  font-family: 'Orbitron', sans-serif; font-weight: 800;
  font-size: 52px; letter-spacing: 8px; color: var(--accent);
  text-shadow: 0 0 22px rgba(127,224,160,0.65), 0 0 60px rgba(127,224,160,0.25);
  opacity: 0; transform: scale(0.85);
  animation: splashIn 0.8s cubic-bezier(.2,.9,.3,1.3) forwards;
}
#splashSub {
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 3px;
  color: #6c8578; text-transform: uppercase; opacity: 0;
  animation: splashFadeIn 0.8s ease forwards 0.5s;
}
#splashGrid {
  position: absolute; inset: 0; opacity: 0.35;
  background-image: linear-gradient(rgba(127,224,160,0.07) 1px, transparent 1px),
                     linear-gradient(90deg, rgba(127,224,160,0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at 50% 45%, black 0%, transparent 72%);
}
@keyframes splashIn {
  0% { opacity: 0; transform: scale(0.85); }
  60% { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes splashFadeIn {
  to { opacity: 1; }
}
@keyframes scorePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); color: var(--gold); }
  100% { transform: scale(1); }
}
.scorePopAnim { animation: scorePop 0.32s ease-out; }
#onboarding { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 260px; }
#onboarding.hidden { display: none; }
.onboardIcon { font-size: 40px; line-height: 1; margin-bottom: 2px; }
.onboardStepTitle { font-family: 'Orbitron', sans-serif; font-size: 15px; font-weight: 700; color: var(--gold); letter-spacing: 0.5px; }
.onboardStepText { font-size: 12.5px; color: #bbb; line-height: 1.5; }
.legendRow { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: #ccc; line-height: 1.9; }
.dotSwatch { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: 0 0 6px currentColor; }
.onboardDots { display: flex; gap: 6px; margin-top: 8px; }
.onboardDots .dot { width: 6px; height: 6px; border-radius: 50%; background: #2c3a27; transition: background 0.25s, transform 0.25s; }
.onboardDots .dot.active { background: var(--accent); transform: scale(1.3); }
#skipBtn, #modeBtn, #quitCancelBtn, #tutorialBtn {
  background: none; border: none; color: #6c8578; font-size: 12px;
  margin-top: 2px; padding: 6px 10px; text-decoration: underline;
  text-underline-offset: 2px; font-family: 'Space Grotesk', sans-serif;
}
#skipBtn.hidden, #modeBtn.hidden, #quitCancelBtn.hidden, #tutorialBtn.hidden { display: none; }
#skipBtn:active, #modeBtn:active, #quitCancelBtn:active, #tutorialBtn:active { color: #9ab5a2; }
#startBtn.hidden { display: none; }
#tutorialBar {
  width: 100%; flex: 0 0 auto; margin-top: 8px;
  background: #101a13; border: 1px solid #2f6b48; border-radius: 10px;
  padding: 7px 10px; text-align: center;
}
#tutorialBar.hidden { display: none; }
#tutorialStep {
  font-family: 'Orbitron', sans-serif; font-size: 9px; letter-spacing: 1.5px;
  text-transform: uppercase; color: #6c8578; margin-bottom: 2px;
}
#tutorialHint { font-size: 12px; color: #e8e8e8; line-height: 1.4; }
#tutorialBar.done { border-color: var(--accent); }
#tutorialBar.done #tutorialHint { color: var(--accent); font-weight: 700; }
#tutorialSkipBtn {
  background: none; border: none; color: #6c8578; font-size: 11px;
  text-decoration: underline; margin-top: 4px; font-family: inherit;
}
#tutorialSkipBtn:active { color: #9ab5a2; }
#tutorialBtn { color: var(--accent); text-decoration: none; border: 1px solid #2f6b48; border-radius: 8px; padding: 7px 14px; }
#shop { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 300px; }
#shop.hidden { display: none; }
#shopRow { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.card {
  background: #17201a; border: 1px solid #2c3a27; border-radius: 12px;
  padding: 9px 12px; text-align: left; color: #e8e8e8;
  font-family: 'Space Grotesk', sans-serif; width: 100%;
  display: flex; gap: 10px; align-items: center;
}
.card:active { background: #24312b; border-color: var(--accent); }
.cardIcon { font-size: 20px; line-height: 1; }
.cardName { font-size: 13px; font-weight: 700; color: var(--accent); }
.cardDesc { font-size: 11px; color: #bbb; line-height: 1.35; }
#modeSelect { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 260px; }
#modeSelect.hidden { display: none; }
.selectLabel {
  font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 2px;
  text-transform: uppercase; color: #6c8578; margin-top: 4px;
}
.pillRow { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.pill {
  background: #17201a; border: 1px solid #2c3a27; border-radius: 999px;
  color: #9ab5a2; font-size: 13px; font-weight: 600; padding: 7px 14px;
  font-family: 'Space Grotesk', sans-serif;
}
.pill.active {
  background: var(--primary); border-color: var(--accent); color: #fff;
  box-shadow: 0 0 10px rgba(127,224,160,0.35);
}
.selectDesc { font-size: 11.5px; color: #bbb; line-height: 1.4; min-height: 32px; margin-top: 6px; }
.modeBadge {
  font-family: 'Space Grotesk', sans-serif; font-size: 9px; letter-spacing: 1px;
  text-transform: uppercase; color: #6c8578; display: block; margin-top: -2px;
}

/* 2-Spieler-Versus */
#vsBtn {
  color: var(--accent); background: none; border: 1px solid var(--primary); border-radius: 8px;
  padding: 9px 22px; font-size: 15px; font-weight: 600; font-family: 'Space Grotesk', sans-serif;
}
#vsBtn:active { background: rgba(47,143,92,0.18); }
#vsBtn.hidden, #vsPanel.hidden, #vsQr.hidden { display: none; }
#overlay .vsHide { display: none !important; }
#vsPanel { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 300px; }
#vsQr { background: #fff; border-radius: 8px; padding: 6px; width: min(220px, 60vw); height: auto; image-rendering: pixelated; }
#vsButtons { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#vsStatus { font-size: 11px; color: #6c8578; min-height: 14px; max-width: 280px; }
.vsLink { background: none; border: none; color: #6c8578; font-size: 12px; padding: 6px 10px; text-decoration: underline; text-underline-offset: 2px; font-family: 'Space Grotesk', sans-serif; }

/* Hauptmenue: Spielerwahl oben, Einstellungen eingeklappt unten */
#modeSelect { order: 5; margin-top: 6px; }
#optionsToggle {
  background: none; border: none; color: #6c8578; font-size: 12px; padding: 6px 10px;
  font-family: 'Space Grotesk', sans-serif; text-decoration: underline; text-underline-offset: 2px;
}
#optionsToggle:active { color: #9ab5a2; }
#runOptions { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#runOptions.hidden { display: none; }

/* --- Uebergaenge und Menues --- */
@keyframes overlayItemIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
#overlay.enter > * { animation: overlayItemIn 0.34s cubic-bezier(.2,.8,.3,1.15) both; }
#overlayScore {
  font-family: 'Orbitron', 'Space Grotesk', sans-serif; font-size: 28px; font-weight: 800;
  color: var(--gold); text-shadow: 0 0 16px rgba(255,210,63,0.45); font-variant-numeric: tabular-nums;
}
#overlayScore.hidden, #overlayPops.hidden { display: none; }
@keyframes scoreDone { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
#overlayScore.done { animation: scoreDone 0.35s ease-out; }
#overlayPops { display: flex; flex-direction: column; gap: 4px; min-height: 1em; }
#overlayPops .pop { font-size: 13px; font-weight: 700; color: #cfe9d8; opacity: 0; transform: scale(0.6); }
@keyframes popIn { 0% { opacity: 0; transform: scale(0.6); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
#overlayPops .pop.in { animation: popIn 0.32s ease-out forwards; }
#levelWipe {
  position: absolute; inset: 0; pointer-events: none; z-index: 55; border-radius: 8px; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(127,224,160,0.35) 45%, rgba(9,12,10,0.95) 50%, rgba(127,224,160,0.35) 55%, transparent 70%);
  background-size: 300% 100%; background-position: 100% 0;
}
@keyframes levelWipeAnim {
  0% { opacity: 1; background-position: 100% 0; }
  100% { opacity: 1; background-position: 0% 0; }
}
#levelWipe.active { animation: levelWipeAnim 0.55s ease-in-out; }
#overlay button { transition: transform 0.12s ease, filter 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; }
@media (hover: hover) {
  #overlay button:hover, .card:hover, .pill:hover { filter: brightness(1.15); transform: translateY(-1px); }
  button.primary:hover { box-shadow: 0 4px 14px rgba(47,143,92,0.45); }
}
#overlay button:active, .card:active, .pill:active { transform: scale(0.96); filter: brightness(0.95); }
@media (prefers-reduced-motion: reduce) {
  #overlay.enter > *, #overlayScore.done, #levelWipe.active { animation: none; }
  #overlayPops .pop { opacity: 1; transform: none; }
}
/* Feine Koernung ueber dem Feld: statische Ebene, kostet pro Frame nichts */
#boardGrain {
  position: absolute; inset: 4px; pointer-events: none; border-radius: 6px; opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}