*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#101016;color:#f6f6f8}header,main{max-width:1100px;margin:auto;padding:24px}header{display:flex;justify-content:space-between;gap:20px;align-items:center}.eyebrow{color:#e53935;text-transform:uppercase;font-size:.75rem;letter-spacing:.12em}h1{margin:.1em 0;font-size:clamp(2rem,7vw,4rem);display:flex;align-items:center;gap:.22em}.site-logo{width:.92em;height:.92em;object-fit:contain;flex:0 0 auto;border-radius:18%}h2{margin-top:32px}.hero{background:linear-gradient(135deg,#252534,#17171f);padding:28px;border-radius:24px;display:flex;justify-content:space-between;gap:24px;align-items:center}.monitor{min-width:150px;text-align:center;background:#0b0b10;padding:18px;border-radius:18px}.monitor strong{display:block;font-size:1.5rem;color:#e53935;margin-top:6px}.games{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.card{background:#1c1c26;border:1px solid #30303e;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:12px}.ready{border-color:#e53935}.game-icon{font-size:2.2rem}.badge{display:inline-block;background:#e53935;color:#171717;padding:5px 9px;border-radius:999px;font-size:.75rem;font-weight:800}.planned{background:#353544;color:#ddd}.play,button{border:0;border-radius:12px;padding:12px 16px;font-weight:750;text-decoration:none;cursor:pointer}.play{background:#e53935;color:#111;text-align:center;margin-top:auto}.secondary{background:#292936;color:#fff}.modal{position:fixed;inset:0;background:#000b;display:grid;place-items:center;padding:20px}.modal[hidden]{display:none}.dialog{position:relative;background:#20202b;padding:24px;border-radius:20px;max-width:620px;width:100%}.close{position:absolute;right:12px;top:10px;background:transparent;color:#fff;font-size:1.7rem}table{width:100%;border-collapse:collapse}th,td{text-align:left;border-bottom:1px solid #3b3b48;padding:12px 6px}.mobile-controls{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);display:none;grid-template-columns:repeat(3,58px);gap:6px}.mobile-controls button{height:52px;background:#292936;color:#fff}.mobile-controls button:first-child{grid-column:2}.mobile-controls .action{grid-column:3;grid-row:1;background:#d93636}.mobile-controls button:nth-child(3){grid-column:1}.mobile-controls button:nth-child(4){grid-column:2}.mobile-controls button:nth-child(5){grid-column:3}@media(max-width:700px){header{align-items:flex-start}.hero{align-items:stretch;flex-direction:column}.mobile-controls{display:grid}body{padding-bottom:140px}}

/* ############################################################
   ZENTRALE STEUERUNG / GYRO
   ############################################################ */
.gyro-control {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
#gyroStatus {
  font-weight: 700;
}
.mobile-controls button {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* ############################################################
   SPIELFENSTER
   ############################################################ */
.game-dialog{width:min(94vw,760px);max-height:92vh;overflow:auto}
.game-stage{display:flex;justify-content:center;align-items:center;min-height:330px;overflow:auto}
.game-stage canvas{max-width:100%;height:auto;border-radius:14px}
.game-status{text-align:center;font-weight:800;min-height:1.5em}
.game-help{text-align:center;opacity:.7;font-size:.9rem}
.rhythm-box,.dice-result{white-space:pre-line;text-align:center;font-size:clamp(2rem,8vw,5rem);font-weight:900;padding:2rem}
button.play{border:0;cursor:pointer}

.header-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}.debug-link{text-decoration:none;display:inline-block}


/* ############################################################
   BUZZ WEBSPIELE V4 – ROTER BUZZ ALS LEITFARBE
   ############################################################ */
:root { --buzz-red:#e53935; --buzz-red-dark:#b71c1c; }
.brand-gamepad { font-size:2.25rem; line-height:1; margin:.2rem 0 .35rem; }
.game-options { display:flex; justify-content:center; gap:.7rem; flex-wrap:wrap; margin:.4rem 0 1rem; }
.tetris-wrap { display:flex; gap:1rem; align-items:flex-start; justify-content:center; flex-wrap:wrap; }
.tetris-side { min-width:110px; text-align:center; }
.battle-wrap { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; width:100%; text-align:center; }
.battle-wrap canvas { width:100%; max-width:342px; }
.battle-legend { grid-column:1/-1; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:.7rem; font-size:.9rem; }
.battle-legend span { display:flex; align-items:center; gap:.35rem; }
.battle-legend i { width:18px; height:18px; display:inline-block; box-sizing:border-box; }
.legend-ship { background:white; }
.legend-select { border:3px solid #e53935; }
.legend-hit { border:3px solid #e53935; }
@media (max-width:720px) { .battle-wrap { grid-template-columns:1fr; } }


/* ############################################################
   V5 FEINSCHLIFF
   ############################################################ */
.coordination-icon { font-size:2.2rem; font-weight:900; }
.rhythm-box { min-width:min(90vw,520px); padding:1rem; }
.coord-symbol {
  font-size:clamp(8rem,28vw,18rem);
  line-height:.9;
  font-weight:900;
  color:#e53935;
  text-align:center;
}
.coord-label {
  margin-top:1rem;
  font-size:clamp(1.6rem,6vw,3rem);
  font-weight:900;
  letter-spacing:.06em;
  text-align:center;
}
.turn-info {
  width:100%;
  text-align:center;
  font-size:clamp(1.2rem,4vw,2rem);
  font-weight:900;
  color:#e53935;
  margin:.25rem 0 .8rem;
}
.ship-placement { width:100%; text-align:center; margin-bottom:1rem; }
.placement-title { font-weight:900; margin-bottom:.5rem; }
.ship-choice-row,.orientation-row {
  display:flex; justify-content:center; align-items:center; gap:.5rem; flex-wrap:wrap;
}
.ship-choice {
  border:2px solid transparent; border-radius:10px; padding:.55rem .7rem; cursor:pointer;
}
.ship-choice.selected { border-color:#e53935; }
.ship-choice:disabled { opacity:.4; cursor:not-allowed; }
.legend-water { background:#9bd8f5; border-radius:50%; transform:scale(.45); }
.legend-sunk { background:#e53935; border:3px double white; }


/* BUZZ-CONTROLLER EINSTEIGERHINWEIS */
.buzz-guide{margin:0 0 24px;padding:20px 22px;border:1px solid #3a3a49;border-left:5px solid var(--buzz-red,#e53935);border-radius:18px;background:linear-gradient(135deg,#20202b,#17171f);display:flex;gap:18px;align-items:flex-start}
.buzz-guide-icon{width:46px;height:46px;flex:0 0 46px;border-radius:50%;display:grid;place-items:center;background:#e53935;color:#fff;font-size:1.45rem;box-shadow:0 0 0 7px #e5393520}
.buzz-guide h2{margin:0 0 .55rem;font-size:1.25rem}
.buzz-guide p{margin:.45rem 0;line-height:1.55;color:#e7e7ec}
.buzz-guide-note{font-size:.92rem;color:#bdbdc8!important}
@media(max-width:700px){.buzz-guide{padding:18px;gap:14px}.buzz-guide-icon{width:38px;height:38px;flex-basis:38px}}


/* ############################################################
   BUZZ MEMORY
   ############################################################ */
.memory-setup{display:grid;gap:.65rem;justify-items:center;width:100%}.memory-choice-row{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.memory-choice-row .selected{outline:3px solid #e53935;background:#3a2830}.memory-scoreboard{display:flex;gap:.55rem;justify-content:center;flex-wrap:wrap;width:100%;margin:.25rem 0 .8rem}.memory-player-score{min-width:100px;padding:.55rem .75rem;border:1px solid #3b3b48;border-radius:12px;text-align:center;background:#17171f}.memory-player-score span,.memory-player-score strong{display:block}.memory-player-score.active{border-color:#e53935;box-shadow:0 0 0 2px #e5393540}.memory-player-score.active span{color:#e53935;font-weight:900}.memory-board{--memory-cols:4;display:grid;grid-template-columns:repeat(var(--memory-cols),minmax(48px,86px));gap:8px;justify-content:center;width:100%}.memory-card{aspect-ratio:1/1;padding:0;background:linear-gradient(145deg,#292936,#17171f);border:2px solid #3a3a49;color:white;font-size:clamp(1.35rem,5vw,2.5rem);display:grid;place-items:center;transition:transform .18s,border-color .12s,background .18s}.memory-card.cursor{border:4px solid #e53935;box-shadow:0 0 0 2px #fff2}.memory-card.face-up{transform:rotateY(180deg);background:#f0f0f4;color:#111}.memory-card.face-up span{transform:rotateY(180deg)}.memory-card.matched{background:#28392e;border-color:#66bb6a;opacity:.82}

/* ############################################################
   BUZZ JUKEBOX / RETRO-VISUALIZER
   ############################################################ */
.music-hub{margin:28px 0;padding:24px;border-radius:24px;border:1px solid #30303e;background:radial-gradient(circle at 15% 0,#2e1838 0,#1c1c26 35%,#15151c 100%)}.music-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.music-head h2{margin:.35rem 0}.music-now{min-width:220px;background:#0b0b10;padding:14px 16px;border-radius:14px}.music-now small,.music-now strong{display:block}.music-now strong{margin-top:.3rem;color:#e53935;overflow:hidden;text-overflow:ellipsis}.music-modes,.music-controls{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:1rem 0}.music-mode.active{outline:2px solid #e53935}.music-player{background:#101016;border-radius:18px;padding:16px}.volume-control{display:flex;align-items:center;gap:.5rem;margin-left:auto;font-size:.9rem}.jukebox-toolbar{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.6rem}.music-list{max-height:280px;overflow:auto;border:1px solid #30303e;border-radius:12px}.music-track{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;border-radius:0;background:#1c1c26;color:#f6f6f8;border-bottom:1px solid #30303e}.music-track:last-child{border-bottom:0}.music-track:hover,.music-track.active{background:#2b2330}.music-track.active{color:#ff8a80}.music-track small{opacity:.65}.random-panel{text-align:center;padding:1.5rem}.random-disc{width:120px;height:120px;margin:auto;border-radius:50%;display:grid;place-items:center;font-size:3rem;background:repeating-radial-gradient(circle,#15151c 0 10px,#292936 11px 18px);border:4px solid #555;animation:spinDisc 5s linear infinite}.random-panel[hidden] .random-disc{animation:none}@keyframes spinDisc{to{transform:rotate(360deg)}}.visualizer-panel{position:relative;background:#050508;border:1px solid #3b3b48;border-radius:14px;overflow:hidden}.visualizer-panel canvas{display:block;width:100%;height:auto;max-height:55vh}.visualizer-note{position:absolute;left:12px;bottom:8px;margin:0;font-size:.8rem;opacity:.6}.music-status{font-size:.85rem;opacity:.75;margin-bottom:0}.music-status code{word-break:break-all}@media(max-width:700px){.music-head{flex-direction:column}.music-now{width:100%}.volume-control{width:100%;margin-left:0}.music-list{max-height:220px}}

.memory-wrap{display:flex;flex-direction:column;align-items:center;width:100%;gap:.35rem}.music-track span{min-width:0;overflow:hidden;text-overflow:ellipsis}.track-path{display:block;margin-top:.18rem;opacity:.5;font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* Memory v2: Foto-Karten und deutliches Controller-Feedback */
.memory-game-card .memory-thumb{width:100%;height:150px;border-radius:14px;overflow:hidden;background:#111;margin-bottom:.25rem}
.memory-game-card .memory-thumb img{width:100%;height:100%;display:block;object-fit:cover}
.memory-setup-help{display:grid;gap:.2rem;text-align:center;padding:.65rem .9rem;border:1px solid #3b3b48;border-radius:12px;background:#17171f}
.memory-setup-help span{font-size:.82rem;opacity:.8}
.memory-selection-feedback{font-weight:900;color:#fff;background:#e53935;padding:.45rem .8rem;border-radius:999px;box-shadow:0 0 18px #e5393566}
.memory-setup-summary{padding:.45rem .8rem;border-radius:10px;background:#11131b;border:1px solid #4b4b5b;font-weight:800}
.memory-choice-row .memory-player.selected,.memory-choice-row .memory-size.selected{outline:4px solid #ff3b3b;outline-offset:2px;background:#5b2028;box-shadow:0 0 22px #ff2b2b88;transform:scale(1.06)}
.memory-card{position:relative;overflow:hidden}
.memory-card.cursor{border:6px solid #ff2020!important;outline:4px solid #fff;outline-offset:2px;box-shadow:0 0 0 7px #ff202055,0 0 28px 10px #ff2020cc!important;transform:scale(1.08);z-index:4;animation:memoryCursorPulse .8s ease-in-out infinite alternate}
.memory-card.face-up.cursor{transform:rotateY(180deg) scale(1.08)}
.memory-card img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.memory-card.face-up img{transform:rotateY(180deg)}
.memory-back{font-size:2rem;font-weight:1000;color:#ff4a4a;text-shadow:0 0 12px #ff2020}
@keyframes memoryCursorPulse{from{filter:brightness(1)}to{filter:brightness(1.35)}}

/* Foto-Memory: 36 Paare / 72 Karten */
.memory-board-full{grid-template-columns:repeat(9,minmax(54px,92px));gap:7px;max-width:900px;margin-inline:auto}
.memory-board-full .memory-card{width:100%;min-width:0;border-radius:9px}
.memory-player-score{min-width:132px}
.memory-player-score strong{font-size:1.35rem;line-height:1.1;margin-top:.15rem}
.memory-player-score strong small{font-size:.68rem;font-weight:800;opacity:.72}
.memory-player-score.active{border:2px solid #ff3030;box-shadow:0 0 0 3px #ff303044,0 0 22px #ff303066;transform:translateY(-2px)}
.memory-game-card .memory-thumb{height:160px;max-height:160px;aspect-ratio:16/9}
.memory-game-card .memory-thumb img{width:100%;height:100%;max-width:100%;max-height:160px;object-fit:cover;object-position:center}
.memory-game-card .memory-thumb.missing::after{content:'Foto-Memory';display:grid;place-items:center;height:100%;font-weight:900;color:#fff;background:linear-gradient(135deg,#2a2228,#101018)}
.memory-game-card .memory-thumb.missing img{display:none}
@media (max-width:900px){.memory-board-full{grid-template-columns:repeat(9,minmax(36px,1fr));gap:5px}.memory-card.cursor{border-width:4px!important;outline-width:2px;outline-offset:1px;transform:scale(1.04)}.memory-card.face-up.cursor{transform:rotateY(180deg) scale(1.04)}}


/* Musik bleibt auch bei geöffnetem Spiel bedienbar */
.game-mini-player{position:sticky;bottom:0;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:.7rem 0 .2rem;padding:.65rem .8rem;border:1px solid #3b3b48;border-radius:12px;background:#11111beF;backdrop-filter:blur(8px);font-size:.84rem}
.game-mini-player span{min-width:0;display:flex;gap:.4rem;align-items:center}
.game-mini-player strong{display:block;max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ff8a80}
.game-mini-player>div{display:flex;gap:.35rem;flex:0 0 auto}
.game-mini-player button{padding:.45rem .65rem;min-width:42px}
@media(max-width:700px){.game-mini-player strong{max-width:52vw}}


/* 2026-08-17: Memory gross, Thumbnail vollständig, Visualizer einzeln */
.game-fullscreen{position:absolute;right:54px;top:12px;padding:8px 11px;z-index:3}
.game-dialog.memory-expanded{width:min(98vw,1180px);max-width:1180px;max-height:97vh;padding:18px 22px}
.game-dialog:fullscreen{width:100vw;max-width:none;height:100vh;max-height:none;border-radius:0;overflow:auto;background:#15151d}
.game-dialog:fullscreen .memory-wrap{min-height:calc(100vh - 190px);justify-content:center}
.memory-board-full{--card-size:min(calc((94vw - 90px)/9),calc((88vh - 220px)/8),104px);grid-template-columns:repeat(9,var(--card-size));gap:7px;max-width:none}
.memory-board-full .memory-card{width:var(--card-size);height:var(--card-size)}
.memory-game-card .memory-thumb{width:160px;height:160px;max-height:none;aspect-ratio:1/1;margin:.1rem auto .35rem;border-radius:16px;display:grid;place-items:center;padding:8px;background:#101016}
.memory-game-card .memory-thumb img{width:100%;height:100%;max-height:none;object-fit:contain;object-position:center;border-radius:10px}
.visualizer-toolbar{position:absolute;top:10px;left:10px;z-index:2;display:flex;gap:.4rem;padding:.35rem;border-radius:12px;background:#050508cc;backdrop-filter:blur(5px)}
.visualizer-mode{padding:8px 11px}.visualizer-mode.active{outline:2px solid #e53935;background:#3a2028}
.visualizer-panel canvas{min-height:360px}
@media(max-width:900px){.memory-board-full{--card-size:min(calc((96vw - 55px)/9),calc((88vh - 210px)/8),82px);gap:4px}.game-fullscreen{right:48px}.memory-game-card .memory-thumb{width:140px;height:140px}}


/* Jukebox: 4.000+ Titel performant durchsuchen statt komplett in den DOM zu laden */
.music-search{display:flex;align-items:center;gap:.65rem;margin:.7rem 0 .8rem;color:var(--muted,#aab2c5);font-size:.9rem}
.music-search input{flex:1;min-width:0;padding:.72rem .85rem;border-radius:.7rem;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.26);color:inherit;font:inherit;outline:none}
.music-search input:focus{border-color:rgba(90,200,255,.8);box-shadow:0 0 0 3px rgba(90,200,255,.12)}
.music-list-hint{padding:.9rem 1rem;text-align:center;color:var(--muted,#aab2c5);font-size:.9rem}

/* Memory v4: wählbare Kartenzahl, dynamisches Raster, größere Karten im Vollbild */
.memory-size-row{max-width:620px}
.memory-size-feedback{background:#26324a;box-shadow:0 0 18px #4e8cff55}
.memory-board-adaptive{
  --memory-cols:6;
  --memory-rows:4;
  --memory-gap:clamp(5px,.7vw,10px);
  --memory-card-size:min(
    calc((min(92vw,1080px) - (var(--memory-cols) - 1)*var(--memory-gap))/var(--memory-cols)),
    calc((72vh - (var(--memory-rows) - 1)*var(--memory-gap))/var(--memory-rows)),
    132px
  );
  grid-template-columns:repeat(var(--memory-cols),var(--memory-card-size))!important;
  gap:var(--memory-gap)!important;
  max-width:none!important;
  width:auto;
}
.memory-board-adaptive .memory-card{width:var(--memory-card-size)!important;height:var(--memory-card-size)!important;min-width:0}
.game-dialog:fullscreen .memory-board-adaptive{
  --memory-card-size:min(
    calc((96vw - (var(--memory-cols) - 1)*var(--memory-gap))/var(--memory-cols)),
    calc((82vh - (var(--memory-rows) - 1)*var(--memory-gap))/var(--memory-rows)),
    170px
  );
}
.game-dialog.memory-expanded .memory-board-adaptive{
  --memory-card-size:min(
    calc((94vw - (var(--memory-cols) - 1)*var(--memory-gap))/var(--memory-cols)),
    calc((76vh - (var(--memory-rows) - 1)*var(--memory-gap))/var(--memory-rows)),
    145px
  );
}
@media(max-width:700px){
  .memory-board-adaptive{--memory-gap:4px;--memory-card-size:min(calc((96vw - (var(--memory-cols) - 1)*4px)/var(--memory-cols)),calc((68vh - (var(--memory-rows) - 1)*4px)/var(--memory-rows)),110px)}
  .memory-scoreboard{gap:.35rem}.memory-player-score{min-width:88px;padding:.4rem .5rem}
}


/* Memory v5: Platz vollständig nutzen, kleine Modi groß, 72 Karten breit */
.game-dialog{width:min(96vw,760px);max-width:760px;max-height:96vh;overflow:auto}
.game-dialog.memory-expanded{width:min(98vw,1500px)!important;max-width:1500px!important;max-height:98vh!important;padding:14px 18px!important}
.game-dialog.memory-expanded #gameTitle{margin:.2rem 0 .5rem;text-align:center}
.game-dialog.memory-expanded .game-stage{width:100%;display:flex;justify-content:center;align-items:flex-start;overflow:visible}
.game-dialog.memory-expanded .memory-wrap{width:100%;gap:.45rem}
.game-dialog.memory-expanded .memory-scoreboard{margin:.1rem 0 .4rem}
.game-dialog.memory-expanded .game-status{margin:.5rem 0;text-align:center}
.game-dialog.memory-expanded .game-mini-player{margin:.4rem 0 .1rem}
.memory-board-adaptive{width:100%!important;justify-content:center;align-content:center}
.memory-board-adaptive[data-cards="16"]{--memory-card-size:min(16vw,18vh,170px)}
.memory-board-adaptive[data-cards="24"]{--memory-card-size:min(13.5vw,17vh,150px)}
.memory-board-adaptive[data-cards="36"]{--memory-card-size:min(12vw,14.5vh,130px)}
.memory-board-adaptive[data-cards="48"]{--memory-card-size:min(10.5vw,13vh,115px)}
.memory-board-adaptive[data-cards="72"]{--memory-card-size:min(7.3vw,12.5vh,102px)}
.game-dialog:fullscreen .memory-board-adaptive[data-cards="16"]{--memory-card-size:min(21vw,20vh,205px)}
.game-dialog:fullscreen .memory-board-adaptive[data-cards="24"]{--memory-card-size:min(15vw,18vh,175px)}
.game-dialog:fullscreen .memory-board-adaptive[data-cards="36"]{--memory-card-size:min(13.5vw,15vh,145px)}
.game-dialog:fullscreen .memory-board-adaptive[data-cards="48"]{--memory-card-size:min(11.5vw,13.8vh,125px)}
.game-dialog:fullscreen .memory-board-adaptive[data-cards="72"]{--memory-card-size:min(7.7vw,13.3vh,112px)}
.memory-card img{object-fit:cover}
@media(max-width:900px){
  .game-dialog.memory-expanded{width:99vw!important;padding:10px!important}
  .memory-board-adaptive[data-cards="72"]{--memory-card-size:min(7.1vw,11vh,78px)}
}

/* Bowling v2: größerer Arcade-Canvas */
.game-stage canvas{max-width:100%;height:auto}


/* ############################################################
   BATTLESHIPS / CONNECT4 FEINSCHLIFF V17
   ############################################################ */
.game-dialog.battle-expanded{width:min(96vw,1040px);max-width:1040px;max-height:96vh;padding:18px 24px}
.battle-stage{flex-direction:column!important;justify-content:flex-start!important;align-items:center!important;min-height:0!important;overflow:visible!important;width:100%}
.battle-stage .turn-info{font-size:clamp(.9rem,1.8vw,1.15rem);line-height:1.1;margin:.1rem 0 .45rem;padding:.28rem .8rem;width:auto;min-width:0;border-radius:999px;background:#181821;color:#ff4545;letter-spacing:.02em}
.battle-stage .battle-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3vw,34px);width:min(100%,900px);align-items:start;justify-items:center;margin:0 auto}
.battle-stage .battle-wrap>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.35rem;width:100%}
.battle-stage .battle-wrap>div>strong{min-height:1.3em;line-height:1.3;text-align:center}
.battle-stage .battle-wrap canvas{display:block;width:min(100%,402px);max-width:402px;height:auto;aspect-ratio:1/1}
.battle-stage .battle-legend{display:flex!important;grid-column:auto;gap:.7rem 1.1rem;justify-content:center;align-items:center;flex-wrap:wrap;margin:.65rem 0 .15rem;padding:.45rem .75rem;border:1px solid #3a3a48;border-radius:12px;background:#17171f;width:min(100%,900px);font-size:.82rem}
.battle-stage .ship-placement{margin:.15rem 0 .55rem}
.game-dialog.battle-expanded .game-status{margin:.35rem 0 .2rem}
.game-dialog.battle-expanded .game-mini-player{margin:.35rem 0 .1rem}
@media(max-width:760px){.battle-stage .battle-wrap{grid-template-columns:1fr}.game-dialog.battle-expanded{width:99vw;padding:12px}.battle-stage .battle-wrap canvas{width:min(88vw,402px)}}


/* BATTLESHIPS V18 - feste, synchrone Zweispalten-Anordnung */
.game-dialog.battle-expanded{width:min(98vw,1120px)!important;max-width:1120px!important}
.battle-stage{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;min-height:0!important;width:100%!important}
.battle-stage .battle-shell{width:100%!important;margin:0 auto!important}
.battle-stage .battle-turn-info{position:static!important;transform:none!important;float:none!important;font-size:16px!important;margin:0 auto 2px!important;padding:4px 12px!important}
.battle-stage .battle-wrap-fixed{width:min(100%,940px)!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:28px!important;align-items:start!important;justify-items:center!important;margin:0 auto!important}
.battle-stage .battle-board{width:100%!important;display:grid!important;grid-template-rows:auto 1fr!important;gap:6px!important;justify-items:center!important;align-items:start!important}
.battle-stage .battle-board>strong{display:block!important;height:26px!important;line-height:26px!important;margin:0!important;text-align:center!important}
.battle-stage .battle-wrap-fixed canvas{display:block!important;width:min(100%,420px)!important;max-width:420px!important;height:auto!important;aspect-ratio:1/1!important;margin:0 auto!important}
.battle-stage .battle-legend-fixed{width:min(100%,940px)!important;display:flex!important;justify-content:center!important;align-items:center!important;gap:10px 18px!important;flex-wrap:wrap!important;margin:2px auto 0!important;padding:8px 12px!important}
@media(max-width:800px){.battle-stage .battle-wrap-fixed{grid-template-columns:1fr!important;width:min(100%,460px)!important}.battle-stage .battle-wrap-fixed canvas{width:min(90vw,420px)!important}}


/* ############################################################
   V2.1.3 · BUZZ-FARB-NAVIGATION / MEMORY-LERNMODUS
   ############################################################ */
.buzz-color-guide{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
  width:100%;
  margin:.15rem auto .55rem;
}
.buzz-key{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  min-width:92px;
  padding:.48rem .68rem;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.38);
  font-size:1.05rem;
  font-weight:1000;
  box-shadow:0 5px 16px rgba(0,0,0,.26);
}
.buzz-key b{font-size:.78rem;letter-spacing:.02em}
.buzz-up{color:#fff!important;background:#1976d2!important;text-shadow:0 1px 2px #0007}
.buzz-down{color:#fff!important;background:#f57c00!important;text-shadow:0 1px 2px #0007}
.buzz-left{color:#fff!important;background:#2e9b48!important;text-shadow:0 1px 2px #0007}
.buzz-right{color:#171717!important;background:#ffd52a!important;text-shadow:none!important}
.buzz-action{color:#fff!important;background:#e53935!important;text-shadow:0 1px 2px #0007}

.memory-board-shell{position:relative;width:100%;display:grid;place-items:center}
.memory-turn-banner{
  position:absolute;
  z-index:30;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.82);
  min-width:min(72vw,520px);
  padding:1rem 1.5rem;
  border:4px solid #fff;
  border-radius:18px;
  background:rgba(13,13,20,.94);
  color:#fff;
  text-align:center;
  font-size:clamp(2.1rem,7vw,5rem);
  line-height:1;
  font-weight:1000;
  letter-spacing:.06em;
  box-shadow:0 0 0 7px #e5393570,0 16px 55px #000b;
  opacity:0;
  pointer-events:none;
}
.memory-turn-banner.show{animation:memoryTurnRound 1.05s ease both}
@keyframes memoryTurnRound{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}
  14%,72%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}
}

.coord-symbol.buzz-up,.coord-symbol.buzz-down,.coord-symbol.buzz-left,.coord-symbol.buzz-right,.coord-symbol.buzz-action{
  display:inline-grid;
  place-items:center;
  min-width:1.15em;
  min-height:1.15em;
  padding:.08em .14em;
  border-radius:24px;
  border:5px solid rgba(255,255,255,.92);
  box-shadow:0 12px 35px #0008;
}
.rhythm-box .buzz-color-guide{margin-bottom:1rem}
.connect4-color-guide{margin:.2rem auto .75rem}
@media(max-width:720px){
  .buzz-key{min-width:70px;padding:.4rem .52rem;font-size:.95rem}
  .buzz-key b{font-size:.68rem}
  .memory-turn-banner{min-width:76vw;padding:.8rem 1rem}
}


/* Buzz Webgames 2.1.4 – direkte Farbnavigation */
.memory-card.cursor{overflow:visible!important}
.memory-nav-arrows{position:absolute;inset:0;pointer-events:none;z-index:20;transform:none!important}
.memory-nav-arrows>span{position:absolute;display:grid;place-items:center;width:34px;height:34px;border-radius:999px;border:3px solid #fff;font-size:23px;font-weight:1000;line-height:1;box-shadow:0 4px 14px #000a;text-shadow:0 1px 2px #0008}
.memory-nav-up{left:50%;top:-43px;transform:translateX(-50%)!important;background:#1976d2;color:#fff}
.memory-nav-down{left:50%;bottom:-43px;transform:translateX(-50%)!important;background:#f57c00;color:#fff}
.memory-nav-left{left:-43px;top:50%;transform:translateY(-50%)!important;background:#2e9b48;color:#fff}
.memory-nav-right{right:-43px;top:50%;transform:translateY(-50%)!important;background:#ffd52a;color:#171717;text-shadow:none!important}
.memory-card.face-up .memory-nav-arrows{transform:rotateY(180deg)!important}
@media(max-width:720px){.memory-nav-arrows>span{width:28px;height:28px;font-size:18px;border-width:2px}.memory-nav-up{top:-34px}.memory-nav-down{bottom:-34px}.memory-nav-left{left:-34px}.memory-nav-right{right:-34px}}


/* ============================================================
   V2.1.5 · VIER GEWINNT · GEWINNERANZEIGE
   ============================================================ */
.connect4-shell{
  position:relative;
  display:grid;
  place-items:center;
}
.connect4-shell canvas{display:block}
.connect4-result-banner{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.82);
  width:min(88%,430px);
  padding:1rem 1.25rem;
  border:4px solid #fff;
  border-radius:18px;
  background:rgba(12,12,18,.94);
  color:#fff;
  font-size:clamp(1.15rem,4.4vw,2rem);
  line-height:1.08;
  text-align:center;
  font-weight:1000;
  letter-spacing:.02em;
  text-shadow:0 2px 4px #000;
  box-shadow:0 12px 35px #000c,0 0 0 6px #ffffff22;
  z-index:30;
  pointer-events:none;
}
.connect4-result-banner.red{
  color:#ff5b5b;
  box-shadow:0 12px 35px #000c,0 0 26px #e53935cc,0 0 0 6px #e5393533;
}
.connect4-result-banner.yellow{
  color:#ffe35a;
  box-shadow:0 12px 35px #000c,0 0 26px #f5c928cc,0 0 0 6px #f5c92833;
}
.connect4-result-banner.draw{color:#fff}
.connect4-result-banner.show{
  animation:connect4WinnerPop .38s cubic-bezier(.2,1.45,.45,1) both;
}
@keyframes connect4WinnerPop{
  from{opacity:0;transform:translate(-50%,-50%) scale(.68)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}


/* ============================================================
   V2.2.0 · PAULINAS BEWEGUNGSSPIEL
   ============================================================ */
.movement-setup{
  width:min(92vw,640px);margin:auto;padding:2rem;text-align:center;
  border:1px solid #3a3a48;border-radius:22px;background:#11111a;
}
.movement-setup strong{font-size:1.35rem}
.movement-player-count{font-size:clamp(3rem,10vw,6rem);font-weight:1000;color:#ff5b82;margin:1rem}
.movement-setup-help,.movement-legend{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap}
.movement-wrap{width:min(96vw,900px);margin:auto;display:grid;gap:.8rem}
.movement-turn-banner{
  text-align:center;font-weight:1000;font-size:clamp(1.5rem,5vw,2.7rem);
  padding:.55rem 1rem;border-radius:16px;background:#251528;color:#ff8bb5;
  border:2px solid #ff5b82;
}
.movement-task-card{
  position:relative;text-align:center;padding:1.2rem 1rem 1.4rem;border-radius:24px;
  background:linear-gradient(160deg,#22132d,#121722 58%,#142417);
  border:1px solid #4e3c58;min-height:280px;overflow:hidden;
}
.movement-task-icon{font-size:clamp(4rem,12vw,7rem);filter:drop-shadow(0 8px 16px #0008)}
.movement-task-cat{text-transform:uppercase;letter-spacing:.12em;font-weight:900;color:#ffd75f;margin-top:.2rem}
.movement-task-text{font-size:clamp(1.15rem,3.7vw,1.65rem);font-weight:800;max-width:680px;margin:.4rem auto}
.movement-countdown{font-size:clamp(2rem,8vw,4rem);font-weight:1000;margin:.5rem 0;color:#fff}
.movement-reaction{
  min-height:2.7rem;font-size:clamp(1.35rem,5vw,2.4rem);font-weight:1000;
  display:grid;place-items:center;
}
.movement-reaction.go{color:#6ee7ff}.movement-reaction.waiting{color:#ffd75f}
.movement-reaction.now{color:#ff3f52;animation:movementPulse .42s ease-in-out infinite alternate}
.movement-reaction.early{color:#ff9f43}.movement-reaction.win{color:#74f28b}
.movement-reaction.lose{color:#ffd75f}.movement-reaction.finish{color:#fff}
@keyframes movementPulse{to{transform:scale(1.16);text-shadow:0 0 28px #ff3f52}}
.movement-track{display:grid;gap:.55rem;padding:.9rem;border-radius:18px;background:#0d0f15;border:1px solid #303441}
.movement-lane-label{display:flex;justify-content:space-between;font-size:.88rem;margin-bottom:.22rem}
.movement-lane-bar{height:24px;position:relative;border-radius:999px;background:#242733;overflow:visible}
.movement-lane-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7b61ff,#ff5b82)}
.movement-lane.croc .movement-lane-bar i{background:linear-gradient(90deg,#367b41,#7aca45)}
.movement-lane-bar span{position:absolute;top:50%;transform:translateY(-50%);font-size:1.45rem;transition:left .45s ease}
.movement-legend{padding:.5rem;font-size:.86rem;opacity:.9}

/* ============================================================
   V2.2.0 · 2000er VISUALIZER
   ============================================================ */
.visualizer-panel{background:#01040c}
.visualizer-toolbar{max-width:calc(100% - 20px);overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
.visualizer-mode{flex:0 0 auto}
.visualizer-mode.active{outline:2px solid #45b8ff;background:#102b4b}
#musicVisualizer{background:#01040c}

/* V2.2.1 · Bewegungsspiel Spielerwahl */
.buzz-blue{background:#1479ff!important;color:#fff!important}
.buzz-orange{background:#ff8a1f!important;color:#111!important}
.buzz-green{background:#2bbf5a!important;color:#fff!important}
.buzz-yellow{background:#ffd52e!important;color:#111!important}
.movement-setup-help .buzz-key{font-weight:900}

/* V2.2.2 · Bewegungsspiel Basisspiel */
.movement-base-note{
  margin-top:1rem;
  padding:.7rem 1rem;
  border-radius:14px;
  background:#16251a;
  border:1px solid #3f7b49;
  color:#bff4c7;
  font-weight:800;
}


/* V2.2.4 · Bewegungsspiel – klare Zuganzeige */
.movement-wrap{position:relative}
.movement-turn-overlay{
  position:absolute;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%) scale(.82);
  z-index:50;
  width:min(86%,620px);
  padding:1.1rem 1.3rem;
  border-radius:20px;
  border:4px solid #fff;
  background:rgba(10,11,17,.95);
  color:#fff;
  text-align:center;
  font-size:clamp(1.5rem,6vw,3rem);
  font-weight:1000;
  line-height:1.05;
  letter-spacing:.02em;
  box-shadow:0 16px 40px #000c;
  pointer-events:none;
}
.movement-turn-overlay.player{
  color:#fff;
  border-color:#ff5b82;
  box-shadow:0 16px 40px #000c,0 0 30px #ff5b8266;
}
.movement-turn-overlay.croc{
  color:#cfff95;
  border-color:#63c949;
  box-shadow:0 16px 40px #000c,0 0 30px #63c94977;
}
.movement-turn-overlay.winner{
  color:#ffe56d;
  border-color:#ffd23f;
  box-shadow:0 16px 40px #000c,0 0 34px #ffd23f88;
}
.movement-turn-overlay.show{
  animation:movementTurnPop .28s cubic-bezier(.2,1.35,.4,1) both;
}
@keyframes movementTurnPop{
  from{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}


/* ============================================================
   V2.3.0 · BEWEGUNGSSPIEL – Wettbewerb, TTS, Modi
   ============================================================ */
.movement-setup-subtitle{
  margin:.7rem 0 1rem;
  color:#cfd4df;
  font-weight:800;
}
.movement-setup-choices{
  display:grid;
  gap:.65rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.movement-choice{
  border:0;
  border-radius:16px;
  padding:.85rem 1rem;
  font:inherit;
  font-weight:1000;
  cursor:pointer;
  box-shadow:inset 0 -3px 0 #0003;
}
.movement-choice.blue{background:#1479ff;color:#fff}
.movement-choice.orange{background:#ff8a1f;color:#111}
.movement-choice.green{background:#2bbf5a;color:#fff}
.movement-choice.yellow{background:#ffd52e;color:#111}
.movement-setup-footer{
  margin-top:1rem;
  display:flex;
  justify-content:center;
}
.movement-selected{
  margin:.75rem 0;
  font-weight:900;
  color:#ffe46c;
}
.movement-listen{
  margin:.85rem auto .45rem;
  display:block;
  border:1px solid #4c75c9;
  background:#10285a;
  color:#fff;
  border-radius:14px;
  padding:.65rem 1rem;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
.movement-action-hint{
  display:flex;
  justify-content:center;
  gap:.6rem;
  flex-wrap:wrap;
  margin:.65rem 0;
}
.movement-result{
  min-height:2.8rem;
  display:grid;
  place-items:center;
  font-size:clamp(1.25rem,4vw,2rem);
  font-weight:1000;
  text-align:center;
}
.movement-result.win{color:#7cff9d}
.movement-result.lose{color:#ffd15f}
.movement-result.finish{color:#ffe86a}
.movement-turn-overlay.win{
  color:#fff7a5;
  border-color:#ffe36b;
  background:rgba(20,24,18,.96);
  box-shadow:0 16px 45px #000d,0 0 34px #ffe36b88;
}
.movement-turn-overlay.lose{
  color:#d6ffad;
  border-color:#72d34f;
  background:rgba(11,27,15,.96);
  box-shadow:0 16px 45px #000d,0 0 34px #72d34f88;
}
.movement-overlay-emoji{
  font-size:clamp(2.2rem,9vw,4.8rem);
  line-height:1;
  margin-bottom:.35rem;
  animation:movementEmojiPop .7s ease-in-out infinite alternate;
}
@keyframes movementEmojiPop{
  from{transform:scale(.95) rotate(-3deg)}
  to{transform:scale(1.12) rotate(3deg)}
}


/* ============================================================
   V2.4.0 · Spielernamen + deutliches TTS
   ============================================================ */
.movement-name-grid,.memory-name-grid{
  display:grid;
  gap:.65rem;
  width:100%;
}
.movement-name-row,.memory-name-row{
  display:grid;
  grid-template-columns:110px 1fr;
  gap:.65rem;
  align-items:center;
  text-align:left;
  font-weight:900;
}
.movement-name-row input,.memory-name-row input,.connect4-name-row input{
  width:100%;
  box-sizing:border-box;
  border:2px solid #4b5366;
  border-radius:12px;
  background:#0d1119;
  color:#fff;
  padding:.68rem .78rem;
  font:inherit;
  font-weight:800;
}
.memory-name-details{
  margin:.5rem 0 .8rem;
  padding:.65rem;
  border:1px solid #343847;
  border-radius:12px;
  background:#11141c;
}
.memory-name-details summary{
  cursor:pointer;
  font-weight:900;
}
.memory-name-grid{margin-top:.7rem}
.connect4-name-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
  width:min(92vw,560px);
  margin:0 auto .7rem;
}
.connect4-name-row label{
  display:grid;
  gap:.3rem;
  font-weight:900;
}
.movement-listen{
  font-size:1.08rem;
  border:2px solid #2f8cff;
  background:#0c326e;
  box-shadow:0 0 20px #1684ff55;
}


/* ============================================================
   V2.6.0 · TOUCH-CONTROLLER / PAIRING
   ============================================================ */
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:.55rem;flex-wrap:wrap}
.controller-link{display:inline-flex;align-items:center;justify-content:center}
.remote-controller-box{
  margin:1rem 0 .65rem;
  padding:1rem;
  border:1px solid #39465a;
  border-radius:16px;
  background:linear-gradient(160deg,#151c28,#10141d);
}
.remote-controller-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}
.remote-controller-head>div{display:grid;gap:.15rem}
.remote-controller-head strong{font-size:1.08rem}
.remote-controller-head small{opacity:.7}
.remote-controller-lamp{
  width:14px;
  height:14px;
  flex:0 0 14px;
  border-radius:50%;
  background:#666;
  box-shadow:0 0 0 4px #ffffff0b;
}
.remote-controller-lamp.waiting{
  background:#ffc83d;
  box-shadow:0 0 17px #ffc83d99;
}
.remote-controller-lamp.connected{
  background:#45e272;
  box-shadow:0 0 18px #45e272aa;
}
.remote-controller-lamp.error{
  background:#ff5964;
  box-shadow:0 0 18px #ff596499;
}
.remote-controller-actions{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  margin:.75rem 0;
}
.remote-controller-actions a{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.remote-controller-pairing{
  margin:.7rem 0;
  padding:.8rem;
  text-align:center;
  border-radius:14px;
  border:2px solid #278fff;
  background:#08182d;
  box-shadow:0 0 22px #168cff33;
}
.remote-controller-pairing small,
.remote-controller-pairing span{
  display:block;
}
.remote-controller-pairing strong{
  display:block;
  margin:.25rem 0;
  color:#fff;
  font-size:clamp(2.2rem,9vw,4rem);
  line-height:1;
  letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
}
.remote-controller-status{
  margin:.6rem 0;
  font-weight:900;
  color:#cdd8ea;
}
.remote-controller-note{
  margin:.5rem 0 0;
  font-size:.84rem;
  line-height:1.45;
  opacity:.78;
}
@media(max-width:700px){
  .header-actions{justify-content:flex-start}
  .remote-controller-actions>*{flex:1 1 180px;text-align:center;justify-content:center}
}


/* ============================================================
   V2.6.1 · MOBILE STEUERUNG / MODAL-FIX
   ============================================================ */

/* Das alte mobile Bildschirm-D-Pad ist vollständig deaktiviert. */
.mobile-controls{
  display:none!important;
}

/* Bei geöffnetem Steuerungsdialog darf der Seitenhintergrund nicht scrollen. */
body.controls-open{
  overflow:hidden!important;
  overscroll-behavior:none;
}

/* Das Modal selbst fängt Scrollen ab; nur der Dialoginhalt scrollt. */
#controls{
  z-index:1200;
  overflow:hidden;
  overscroll-behavior:contain;
}

#controls .dialog{
  width:min(94vw,620px);
  max-height:min(88dvh,760px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
  scrollbar-gutter:stable;
}

/* Schließen bleibt auch beim Scrollen erreichbar. */
#controls .close{
  position:sticky;
  top:0;
  z-index:5;
  float:right;
  margin:-10px -8px 0 8px;
  background:#20202bee;
  backdrop-filter:blur(4px);
}

/* Mobil etwas mehr Platz und klare Reihenfolge. */
@media(max-width:700px){
  body{
    padding-bottom:0!important;
  }

  #controls{
    place-items:start center;
    padding:
      max(10px,env(safe-area-inset-top))
      10px
      max(10px,env(safe-area-inset-bottom));
  }

  #controls .dialog{
    margin:0;
    width:100%;
    max-width:none;
    max-height:calc(100dvh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom)));
    border-radius:16px;
    padding:18px;
  }

  #controls table{
    font-size:.92rem;
  }

  #controls th,
  #controls td{
    padding:9px 5px;
    vertical-align:top;
  }

  .remote-controller-box{
    margin-bottom:1rem;
  }

  .remote-controller-pairing strong{
    font-size:clamp(2rem,13vw,3.6rem);
  }
}

/* V2.6.2 · alte mobile Bildschirmsteuerung endgültig deaktiviert */
.mobile-controls{display:none!important}

/* V2.6.2 · mobile Steuerungshinweise */
.mobile-control-hint{
  display:none;
  margin:.75rem 0;
  padding:.8rem 1rem;
  border-radius:12px;
  background:#111a28;
  border:1px solid #334d6c;
  line-height:1.45;
}
.mobile-control-hint strong,
.mobile-control-hint span{display:block}
.mobile-control-hint span{margin-top:.2rem;opacity:.82}

@media(max-width:700px){
  .desktop-control-table{display:none!important}
  .mobile-control-hint{display:block}
}

/* V2.6.2 · robustes Scrollen im Steuerungsdialog */
body.controls-open{
  overflow:hidden!important;
  overscroll-behavior:none;
}
#controls{
  z-index:1200;
  overflow:hidden;
  overscroll-behavior:contain;
}
#controls .dialog{
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}


/* ============================================================
   V2.7.0 · SPIELINTERNE TOUCH-STEUERUNG
   ============================================================ */
.game-touch-controls{
  display:none;
  width:min(100%,520px);
  margin:.85rem auto 0;
  gap:.55rem;
  align-items:center;
  justify-content:center;
}
.game-touch-controls button{
  min-width:64px;
  min-height:54px;
  border:2px solid #4b5669;
  border-radius:15px;
  background:linear-gradient(180deg,#263043,#151b27);
  color:#fff;
  font:900 1.35rem/1 system-ui,sans-serif;
  box-shadow:inset 0 -4px 0 #0005,0 6px 14px #0005;
  touch-action:manipulation;
}
.game-touch-controls button:active{
  transform:translateY(2px) scale(.97);
}
.game-touch-controls .touch-action{
  background:linear-gradient(180deg,#ef4e59,#a91829);
  border-color:#ff8790;
}
.memory-touch-controls{
  grid-template-columns:1fr;
  justify-items:center;
}
.memory-touch-controls>.touch-middle{
  display:flex;
  gap:.55rem;
}
.connect4-touch-controls{
  grid-template-columns:auto minmax(150px,1fr) auto;
}
.connect4-touch-controls .touch-action{
  font-size:1rem;
  padding:0 .9rem;
}
.memory-card,
.connect4-shell canvas{
  touch-action:manipulation;
}

@media (pointer:coarse), (max-width:800px){
  .game-touch-controls{
    display:grid;
  }
}


/* ============================================================
   V2.8.0 · BUZZ QUARTETT
   ============================================================ */
.quartett-cover{
  display:grid!important;
  place-items:center;
  font-size:clamp(4rem,9vw,7rem);
  background:radial-gradient(circle at 35% 25%,#325f91,#121b29 62%,#090d14);
}
.quartett-shell{width:min(1180px,100%);margin:auto}
.quartett-intro,.quartett-error,.quartett-finish{
  max-width:680px;margin:1rem auto;padding:1.4rem;border:1px solid #38475d;
  border-radius:20px;background:#131a26;text-align:center
}
.quartett-intro-icon,.quartett-finish>div{font-size:5rem}
.quartett-score{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin:.5rem 0 1rem;padding:.65rem 1rem;border-radius:14px;background:#111722}
.quartett-board{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:1rem;align-items:start}
.quartett-board>section>h3{text-align:center;margin:.2rem 0 .55rem}
.quartett-vs{align-self:center;font-weight:1000;font-size:1.5rem;opacity:.6}
.quartett-card{overflow:hidden;border:2px solid #3f4c62;border-radius:22px;background:linear-gradient(180deg,#171e2a,#10151e);box-shadow:0 16px 30px #0007}
.quartett-picture{position:relative;aspect-ratio:16/9;display:grid;place-items:center;background:radial-gradient(circle,#274869,#101722);overflow:hidden}
.quartett-picture{
  background:#fff;
}

.quartett-picture img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  background:#fff;
  padding:6px;
}
.quartett-emoji{font-size:clamp(5rem,15vw,9rem)}
.quartett-card-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.85rem 1rem}
.quartett-card-head h3{margin:0;font-size:1.35rem}
.quartett-card-head small{opacity:.68;font-style:italic}
.quartett-name-speak,.quartett-actions button{min-height:44px;border:1px solid #45536a;border-radius:12px;background:#202938;color:#fff;font-weight:800}
.quartett-values{display:grid;gap:.35rem;padding:0 .75rem .8rem}
.quartett-value{display:grid;gap:.25rem;width:100%;padding:.65rem .75rem;border:1px solid #354157;border-radius:13px;background:#121925;color:#f7f8fb;text-align:left}
.quartett-value.selectable{cursor:pointer;border-color:#52759d}
.quartett-value.selectable:hover{background:#19263a}
.quartett-value-main{display:flex;justify-content:space-between;gap:.7rem;align-items:center}
.quartett-value-main small{opacity:.72}
.quartett-strength{display:flex;justify-content:space-between;align-items:center;color:#ffc84d}
.quartett-bars{letter-spacing:.09em}
.quartett-speak{float:right}
.quartett-facts{margin:.1rem .75rem .8rem;padding:.7rem;border:1px solid #344052;border-radius:13px}
.quartett-facts summary{cursor:pointer;font-weight:900}
.quartett-fact{display:block;width:100%;margin:.45rem 0 0;padding:.55rem;border:0;border-radius:10px;background:#172235;color:#eaf1fb;text-align:left}
.quartett-credit{display:block;padding:0 .9rem .8rem;opacity:.62}
.quartett-back{min-height:480px;display:grid;place-items:center;align-content:center;gap:.6rem;background:repeating-linear-gradient(45deg,#111827,#111827 12px,#18243a 12px,#18243a 24px)}
.quartett-back-icon{font-size:6rem}
.quartett-round-message{margin:.5rem auto 1rem;padding:.8rem 1rem;border-radius:14px;background:#253652;text-align:center;font-weight:1000}
.quartett-actions{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;margin:1rem 0}
.quartett-actions button{padding:.65rem 1rem}
.quartett-finish h2{margin:.3rem 0}
#quartettDeck,#quartettMode{min-height:42px}

@media(max-width:760px){
  .quartett-board{grid-template-columns:1fr}
  .quartett-vs{display:none}
  .quartett-card{max-width:560px;margin:auto;width:100%}
  .quartett-back{min-height:220px}
  .quartett-value{min-height:60px}
}

/* V2.9.0 Quartett – Buzz/Touch-Navigation + Multiplayer */
.quartett-value.selected{outline:4px solid #ff3b4d;outline-offset:2px;background:#26374f}
.quartett-value.selectable.selected{box-shadow:0 0 22px #ff3b4d66}
.buzz-focus{outline:4px solid #ff3b4d!important;outline-offset:2px}
.quartett-lobby,.quartett-online-card{max-width:680px;margin:1rem auto}
.quartett-lobby{padding:1.2rem;border:1px solid #40506a;border-radius:18px;background:#121a27;text-align:center}
.quartett-lobby>div{display:grid;gap:.45rem;margin:1rem 0}
.quartett-lobby>div>div{padding:.6rem;border-radius:10px;background:#1b2638}
.quartett-score .me{color:#ffd24a;font-weight:1000}
.quartett-pot{text-align:center;font-weight:900;margin:.8rem}
.quartett-join{display:flex;gap:.45rem;align-items:end}
.quartett-join input{min-height:42px;max-width:150px;font-size:1.15rem;letter-spacing:.18em;text-align:center}
@media(max-width:700px){.quartett-score{flex-wrap:wrap}.quartett-join{width:100%}.quartett-join input{flex:1}}


/* BUZZ GAME GENERIC FULLSCREEN 2.9.1 */

.game-dialog.game-expanded{
  position:fixed !important;
  inset:8px !important;
  width:auto !important;
  max-width:none !important;
  height:calc(100dvh - 16px) !important;
  max-height:none !important;
  margin:0 !important;
  z-index:99999 !important;
  display:flex !important;
  flex-direction:column !important;
}

.game-dialog.game-expanded #gameStage{
  flex:1 1 auto;
  min-height:0;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.game-dialog.game-expanded #gameStage canvas{
  max-width:100%;
  max-height:calc(100dvh - 190px);
  width:auto;
  height:auto;
}

.game-dialog:fullscreen{
  width:100vw;
  height:100vh;
  max-width:none;
  max-height:none;
  padding:18px;
  overflow:auto;
}

.game-dialog:fullscreen #gameStage{
  min-height:calc(100vh - 190px);
  display:flex;
  justify-content:center;
  align-items:center;
}

.game-dialog:fullscreen #gameStage canvas{
  max-width:100%;
  max-height:calc(100vh - 190px);
  width:auto;
  height:auto;
}

@media(max-width:700px){
  .game-dialog.game-expanded{
    inset:0 !important;
    height:100dvh !important;
    border-radius:0 !important;
  }

  .game-dialog.game-expanded #gameStage canvas{
    max-height:calc(100dvh - 165px);
  }
}


/* ==========================================================
   YETI SPORTS + GENERISCHER SPIEL-VOLLBILDMODUS
   Plattform 3.0
   ========================================================== */

.yeti-sports-shell{
  width:100%;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.yeti-sports-canvas{
  display:block;
  width:100%;
  max-width:1500px;
  height:auto;
  max-height:calc(100vh - 210px);
  aspect-ratio:16/9;
  object-fit:contain;
  border-radius:18px;
  box-shadow:
    0 12px 40px rgba(0,0,0,.28),
    inset 0 0 0 1px rgba(255,255,255,.3);
  background:#8edfff;
  touch-action:none;
}

.yeti-sports-help{
  text-align:center;
  font-weight:800;
  line-height:1.3;
}

/* Echtes Fullscreen */
.game-dialog:fullscreen{
  box-sizing:border-box;
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  border-radius:0 !important;
  display:flex !important;
  flex-direction:column;
}

/* Browser-Fallback */
.game-dialog.game-expanded{
  position:fixed !important;
  inset:0 !important;
  box-sizing:border-box;
  width:100vw !important;
  height:100vh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  border-radius:0 !important;
  z-index:10000 !important;
  display:flex !important;
  flex-direction:column;
}

.game-dialog:fullscreen #gameStage,
.game-dialog.game-expanded #gameStage{
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100% !important;
  max-width:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

.game-dialog:fullscreen #gameStage canvas,
.game-dialog.game-expanded #gameStage canvas{
  width:100% !important;
  max-width:min(1700px,96vw) !important;
  height:auto !important;
  max-height:calc(100vh - 190px) !important;
  object-fit:contain !important;
}

.game-dialog:fullscreen .yeti-sports-shell,
.game-dialog.game-expanded .yeti-sports-shell{
  flex:1;
  width:100%;
}

.game-dialog:fullscreen .yeti-sports-canvas,
.game-dialog.game-expanded .yeti-sports-canvas{
  width:min(1700px,96vw) !important;
  max-width:none !important;
  max-height:calc(100vh - 180px) !important;
}



/* ============================================================
   CONNECT4 PLATTFORM 3.0
   Board im Mittelpunkt
   ============================================================ */

.connect4-stage{
  width:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
}

.connect4-shell{
  width:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  position:relative;
}

.connect4-board{
  display:block;
  width:min(72vw,620px);
  max-width:100%;
  height:auto;
  aspect-ratio:7 / 6;
  margin-inline:auto;
  border-radius:18px;
  border:5px solid #3157c8;
  box-shadow:
    0 16px 42px rgba(0,0,0,.45),
    0 0 0 3px rgba(255,255,255,.10);
  background:#173b8f;
  touch-action:none;
}

.connect4-player-bar{
  width:min(100%,720px);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:0 auto 4px;
}

.connect4-player{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 14px;
  border:2px solid #3b3b49;
  border-radius:999px;
  background:#15151d;
  color:#ddd;
  font-weight:900;
  font-size:clamp(.95rem,2vw,1.25rem);
  opacity:.7;
  transition:
    transform .15s,
    opacity .15s,
    border-color .15s,
    box-shadow .15s;
}

.connect4-player.active{
  opacity:1;
  transform:scale(1.035);
}

.connect4-player-red.active{
  border-color:#e53935;
  box-shadow:0 0 22px #e5393560;
}

.connect4-player-yellow.active{
  border-color:#f5c928;
  box-shadow:0 0 22px #f5c92855;
}

.connect4-player-disc{
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.65);
  box-shadow:
    inset 0 -3px 5px rgba(0,0,0,.28),
    0 2px 6px rgba(0,0,0,.4);
}

.connect4-player-disc.red{
  background:#e53935;
}

.connect4-player-disc.yellow{
  background:#f5c928;
}

.connect4-name-row{
  order:-1;
  width:min(92vw,560px);
}


/* ------------------------------------------------------------
   Vollbild / vergrößerter Modus
   ------------------------------------------------------------ */

.game-dialog.connect4-expanded.game-expanded,
.game-dialog.connect4-expanded:fullscreen{
  overflow:hidden !important;
}

.game-dialog.connect4-expanded.game-expanded #gameStage,
.game-dialog.connect4-expanded:fullscreen #gameStage{
  flex:1 1 auto !important;
  width:100% !important;
  min-height:0 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  overflow:hidden !important;
  padding:4px 12px !important;
}

.game-dialog.connect4-expanded.game-expanded .connect4-stage,
.game-dialog.connect4-expanded:fullscreen .connect4-stage{
  flex:1 1 auto !important;
  justify-content:center !important;
}

.game-dialog.connect4-expanded.game-expanded .connect4-board,
.game-dialog.connect4-expanded:fullscreen .connect4-board{
  /*
   * 7:6 Seitenverhältnis.
   * Höhe ist entscheidend, damit Spielerleiste + Controls
   * noch vollständig sichtbar bleiben.
   */
  width:min(
    88vw,
    calc((100dvh - 245px) * 7 / 6),
    980px
  ) !important;

  max-width:none !important;
  max-height:calc(100dvh - 245px) !important;
  height:auto !important;
}

.game-dialog.connect4-expanded.game-expanded .connect4-player-bar,
.game-dialog.connect4-expanded:fullscreen .connect4-player-bar{
  width:min(88vw,900px);
  flex:0 0 auto;
}


/*
 * Die Namenseingabe ist für die Einrichtung da.
 * Im Vollbild soll sie nicht das eigentliche Spiel verdrängen.
 */
.game-dialog.connect4-expanded.game-expanded .connect4-name-row,
.game-dialog.connect4-expanded:fullscreen .connect4-name-row{
  margin:0 auto 3px;
  max-height:58px;
}


/* Touch-Steuerung direkt unter dem Board */
.connect4-touch-controls{
  flex:0 0 auto;
  margin:2px auto 0 !important;
}


/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */

@media(max-width:900px){

  .connect4-board{
    width:min(90vw,620px);
  }

  .game-dialog.connect4-expanded.game-expanded .connect4-board,
  .game-dialog.connect4-expanded:fullscreen .connect4-board{
    width:min(
      94vw,
      calc((100dvh - 225px) * 7 / 6)
    ) !important;

    max-height:calc(100dvh - 225px) !important;
  }

  .connect4-player-bar{
    width:min(94vw,720px);
  }
}


/* ------------------------------------------------------------
   Handy
   ------------------------------------------------------------ */

@media(max-width:600px){

  .connect4-stage{
    gap:6px !important;
  }

  .connect4-player-bar{
    gap:6px;
  }

  .connect4-player{
    padding:6px 8px;
    font-size:.88rem;
  }

  .connect4-player-disc{
    width:18px;
    height:18px;
    flex-basis:18px;
  }

  .connect4-name-row{
    grid-template-columns:1fr 1fr;
    gap:5px;
    width:96vw;
  }

  .connect4-name-row label{
    font-size:.78rem;
  }

  .connect4-name-row input{
    padding:.45rem .5rem;
  }

  .game-dialog.connect4-expanded.game-expanded .connect4-board,
  .game-dialog.connect4-expanded:fullscreen .connect4-board{
    width:min(
      96vw,
      calc((100dvh - 205px) * 7 / 6)
    ) !important;

    max-height:calc(100dvh - 205px) !important;
    border-width:3px;
    border-radius:12px;
  }
}


/* ============================================================
   CONNECT4 3.0.1
   Vollbild: Spielfeld nach HÖHE skalieren, UI groß lassen
   ============================================================ */

.game-dialog.connect4-expanded.game-expanded .connect4-stage,
.game-dialog.connect4-expanded:fullscreen .connect4-stage{
  justify-content:center !important;
  gap:8px !important;
  overflow:hidden !important;
}

/* Spieleranzeige bewusst groß lassen */
.game-dialog.connect4-expanded.game-expanded .connect4-player-bar,
.game-dialog.connect4-expanded:fullscreen .connect4-player-bar{
  width:min(900px,90vw) !important;
  flex:0 0 auto !important;
  margin:0 auto 6px !important;
}

.game-dialog.connect4-expanded.game-expanded .connect4-player,
.game-dialog.connect4-expanded:fullscreen .connect4-player{
  font-size:clamp(1.05rem,1.5vw,1.4rem) !important;
  min-height:46px !important;
  padding:8px 18px !important;
}

/*
 * Entscheidend:
 * Nicht mehr anhand der BildschirmBREITE riesig skalieren.
 * Die verfügbare HÖHE bestimmt die Brettgröße.
 */
.game-dialog.connect4-expanded.game-expanded .connect4-board,
.game-dialog.connect4-expanded:fullscreen .connect4-board{
  height:min(
    56dvh,
    calc(100dvh - 390px)
  ) !important;

  width:auto !important;

  max-height:none !important;
  max-width:92vw !important;

  aspect-ratio:7 / 6 !important;
  object-fit:contain !important;

  flex:0 0 auto !important;
  margin:0 auto !important;
}

/* Touch-Steuerung bleibt lesbar */
.game-dialog.connect4-expanded.game-expanded .connect4-touch-controls,
.game-dialog.connect4-expanded:fullscreen .connect4-touch-controls{
  flex:0 0 auto !important;
  margin:6px auto 0 !important;
}

.game-dialog.connect4-expanded.game-expanded .connect4-touch-controls button,
.game-dialog.connect4-expanded:fullscreen .connect4-touch-controls button{
  min-height:46px !important;
  font-size:1rem !important;
}

/* 1080p Desktop gezielt optimieren */
@media (min-width:1000px) and (min-height:800px){
  .game-dialog.connect4-expanded.game-expanded .connect4-board,
  .game-dialog.connect4-expanded:fullscreen .connect4-board{
    height:min(
      58dvh,
      calc(100dvh - 400px)
    ) !important;
  }
}

/* Tablet */
@media(max-width:900px){
  .game-dialog.connect4-expanded.game-expanded .connect4-board,
  .game-dialog.connect4-expanded:fullscreen .connect4-board{
    height:min(
      52dvh,
      calc(100dvh - 330px)
    ) !important;

    max-width:94vw !important;
  }
}

/* Handy */
@media(max-width:600px){
  .game-dialog.connect4-expanded.game-expanded .connect4-board,
  .game-dialog.connect4-expanded:fullscreen .connect4-board{
    height:min(
      48dvh,
      calc(100dvh - 300px)
    ) !important;

    max-width:96vw !important;
  }

  .game-dialog.connect4-expanded.game-expanded .connect4-player,
  .game-dialog.connect4-expanded:fullscreen .connect4-player{
    font-size:.95rem !important;
    min-height:40px !important;
    padding:6px 9px !important;
  }
}


/* ============================================================
   CONNECT4 3.0.2
   Korrektes 7:6-Vollbild ohne horizontales Strecken
   ============================================================ */

/*
 * Wichtig:
 * Die generische Vollbildregel setzt Canvas auf width:100%.
 * Vier gewinnt MUSS diese Regel unabhängig von connect4-expanded
 * überschreiben.
 */
.game-dialog.game-expanded .connect4-board,
.game-dialog:fullscreen .connect4-board{
  display:block !important;

  width:auto !important;
  height:min(54dvh,560px) !important;

  max-width:90vw !important;
  max-height:54dvh !important;

  aspect-ratio:7 / 6 !important;
  object-fit:contain !important;

  margin:0 auto !important;

  flex:none !important;
}

/* Stage wirklich vertikal organisieren */
.game-dialog.game-expanded .connect4-stage,
.game-dialog:fullscreen .connect4-stage{
  width:100% !important;
  height:auto !important;
  flex:1 1 auto !important;

  display:flex !important;
  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  gap:8px !important;
  overflow:hidden !important;
}

/* Spieler bleiben groß sichtbar */
.game-dialog.game-expanded .connect4-player-bar,
.game-dialog:fullscreen .connect4-player-bar{
  display:grid !important;

  grid-template-columns:1fr 1fr !important;

  width:min(860px,88vw) !important;

  flex:none !important;

  margin:0 auto 6px !important;
}

.game-dialog.game-expanded .connect4-player,
.game-dialog:fullscreen .connect4-player{
  min-height:46px !important;
  padding:8px 16px !important;

  font-size:clamp(1.05rem,1.5vw,1.35rem) !important;
}

/*
 * Namensfelder sind nur Einrichtung.
 * Im Vollbild brauchen wir den Platz fürs Spiel.
 */
.game-dialog.game-expanded .connect4-name-row,
.game-dialog:fullscreen .connect4-name-row{
  display:none !important;
}

/* Mode-Auswahl kompakt */
.game-dialog.game-expanded #gameOptions,
.game-dialog:fullscreen #gameOptions{
  flex:0 0 auto !important;
  margin:0 auto 4px !important;
  padding:0 !important;
}

/* Touchleiste darf nicht das Board verdrängen */
.game-dialog.game-expanded .connect4-touch-controls,
.game-dialog:fullscreen .connect4-touch-controls{
  flex:none !important;
  margin:4px auto 0 !important;
}

/* Status und Musik bleiben kompakt */
.game-dialog.game-expanded .game-status,
.game-dialog:fullscreen .game-status{
  flex:none !important;
  margin:3px 0 !important;
}

.game-dialog.game-expanded .game-mini-player,
.game-dialog:fullscreen .game-mini-player{
  flex:none !important;
  margin:4px 0 !important;
}

/* 1080p Desktop */
@media(min-width:1000px) and (min-height:800px){

  .game-dialog.game-expanded .connect4-board,
  .game-dialog:fullscreen .connect4-board{
    height:min(56dvh,570px) !important;
    max-height:56dvh !important;
  }
}

/* Tablet */
@media(max-width:900px){

  .game-dialog.game-expanded .connect4-board,
  .game-dialog:fullscreen .connect4-board{
    height:min(50dvh,500px) !important;
    max-height:50dvh !important;
    max-width:94vw !important;
  }
}

/* Handy */
@media(max-width:600px){

  .game-dialog.game-expanded .connect4-board,
  .game-dialog:fullscreen .connect4-board{
    height:min(44dvh,430px) !important;
    max-height:44dvh !important;
    max-width:96vw !important;
  }

  .game-dialog.game-expanded .connect4-player-bar,
  .game-dialog:fullscreen .connect4-player-bar{
    width:96vw !important;
    gap:6px !important;
  }

  .game-dialog.game-expanded .connect4-player,
  .game-dialog:fullscreen .connect4-player{
    font-size:.9rem !important;
    min-height:40px !important;
    padding:6px 8px !important;
  }
}


/* ============================================================
   CONNECT4 3.0.3
   Spezifitäts-Fix gegen generische #gameStage canvas-Regel
   ============================================================ */

.game-dialog.game-expanded #gameStage .connect4-board,
.game-dialog:fullscreen #gameStage .connect4-board{
  display:block !important;

  width:auto !important;
  height:min(54dvh,560px) !important;

  max-width:90vw !important;
  max-height:54dvh !important;

  aspect-ratio:7 / 6 !important;
  object-fit:contain !important;

  margin:0 auto !important;
  flex:0 0 auto !important;
}

/* Connect4-Stage ebenfalls stärker als generischer Fullscreen */
.game-dialog.game-expanded #gameStage.connect4-stage,
.game-dialog:fullscreen #gameStage.connect4-stage{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  width:100% !important;
  min-height:0 !important;

  overflow:hidden !important;
  gap:8px !important;
}

/* Spieleranzeige oben */
.game-dialog.game-expanded #gameStage .connect4-player-bar,
.game-dialog:fullscreen #gameStage .connect4-player-bar{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;

  width:min(860px,88vw) !important;
  margin:0 auto 6px !important;

  flex:0 0 auto !important;
}

/* Namenseingaben nur im Fenstermodus */
.game-dialog.game-expanded #gameStage .connect4-name-row,
.game-dialog:fullscreen #gameStage .connect4-name-row{
  display:none !important;
}

/* 1920×1080 / Desktop */
@media(min-width:1000px) and (min-height:800px){
  .game-dialog.game-expanded #gameStage .connect4-board,
  .game-dialog:fullscreen #gameStage .connect4-board{
    height:min(54dvh,560px) !important;
    max-height:54dvh !important;
    width:auto !important;
  }
}

/* Tablet */
@media(max-width:900px){
  .game-dialog.game-expanded #gameStage .connect4-board,
  .game-dialog:fullscreen #gameStage .connect4-board{
    height:min(48dvh,500px) !important;
    max-height:48dvh !important;
    max-width:94vw !important;
    width:auto !important;
  }
}

/* Handy */
@media(max-width:600px){
  .game-dialog.game-expanded #gameStage .connect4-board,
  .game-dialog:fullscreen #gameStage .connect4-board{
    height:min(42dvh,430px) !important;
    max-height:42dvh !important;
    max-width:96vw !important;
    width:auto !important;
  }
}


/* ============================================================
   CONNECT4 3.0.4
   Fenstermodus: Board kompakter, UI bleibt groß
   ============================================================ */

/*
 * Nur NORMALMODUS.
 * Vollbild / game-expanded wird von 3.0.3 weiter geregelt.
 */
.game-dialog:not(.game-expanded):not(:fullscreen) #gameStage .connect4-board{
  display:block !important;

  width:auto !important;
  height:min(44vh,410px) !important;

  max-width:min(92%,480px) !important;
  max-height:410px !important;

  aspect-ratio:7 / 6 !important;

  margin:0 auto !important;
}

/* Stage im Fenstermodus kompakt halten */
.game-dialog:not(.game-expanded):not(:fullscreen) #gameStage.connect4-stage{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;

  gap:8px !important;

  width:100% !important;
}

/* Spielerleiste bleibt gut lesbar */
.game-dialog:not(.game-expanded):not(:fullscreen) #gameStage .connect4-player-bar{
  width:min(100%,560px) !important;
  margin:0 auto 4px !important;
}

.game-dialog:not(.game-expanded):not(:fullscreen) #gameStage .connect4-player{
  font-size:1rem !important;
  min-height:44px !important;
  padding:7px 12px !important;
}

/* Namen nicht mitskalieren */
.game-dialog:not(.game-expanded):not(:fullscreen) #gameStage .connect4-name-row{
  width:min(100%,560px) !important;
}

/* Touchleiste ebenfalls normal lesbar */
.game-dialog:not(.game-expanded):not(:fullscreen) #gameStage .connect4-touch-controls{
  margin:4px auto 0 !important;
}

/* Kleinere Notebook-/Tablet-Höhen */
@media(max-height:850px){
  .game-dialog:not(.game-expanded):not(:fullscreen) #gameStage .connect4-board{
    height:min(39vh,360px) !important;
    max-height:360px !important;
  }
}


/* ============================================================
   MEMORY 3.0
   Vollbild: Setup raus, Karten komplett sichtbar
   ============================================================ */

/*
 * Im Vollbild brauchen Spielerzahl/Kartenzahl-Auswahl keinen Platz.
 * Das Setup bleibt im normalen Modus vollständig erhalten.
 */
.game-dialog.game-expanded #gameOptions,
.game-dialog:fullscreen #gameOptions{
  display:none !important;
}

/* Memory-Stage darf die volle Resthöhe nutzen */
.game-dialog.game-expanded #gameStage .memory-wrap,
.game-dialog:fullscreen #gameStage .memory-wrap{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;

  gap:6px !important;
  overflow:hidden !important;
}

/* Spieleranzeige kompakt, aber weiterhin groß lesbar */
.game-dialog.game-expanded #gameStage .memory-scoreboard,
.game-dialog:fullscreen #gameStage .memory-scoreboard{
  flex:0 0 auto !important;

  width:min(100%,1100px) !important;
  margin:0 auto 4px !important;

  gap:6px !important;
}

.game-dialog.game-expanded #gameStage .memory-player-score,
.game-dialog:fullscreen #gameStage .memory-player-score{
  min-width:110px !important;
  padding:6px 10px !important;
  font-size:.95rem !important;
}

/*
 * Rastergröße bestimmt sich aus Kartenanzahl.
 * Alle Karten müssen innerhalb der verfügbaren Höhe bleiben.
 */
.game-dialog.game-expanded #gameStage .memory-board-adaptive,
.game-dialog:fullscreen #gameStage .memory-board-adaptive{
  --memory-gap:6px;

  width:auto !important;
  max-width:96vw !important;
  max-height:calc(100dvh - 245px) !important;

  margin:auto !important;
  gap:var(--memory-gap) !important;

  justify-content:center !important;
  align-content:center !important;
}

/* 16 Karten = 4 × 4 */
.game-dialog.game-expanded #gameStage .memory-board-adaptive[data-cards="16"],
.game-dialog:fullscreen #gameStage .memory-board-adaptive[data-cards="16"]{
  --memory-card-size:min(
    calc((92vw - 18px)/4),
    calc((72dvh - 18px)/4),
    150px
  ) !important;
}

/* 24 Karten = 6 × 4 */
.game-dialog.game-expanded #gameStage .memory-board-adaptive[data-cards="24"],
.game-dialog:fullscreen #gameStage .memory-board-adaptive[data-cards="24"]{
  --memory-card-size:min(
    calc((92vw - 30px)/6),
    calc((72dvh - 18px)/4),
    135px
  ) !important;
}

/* 36 Karten = 6 × 6 */
.game-dialog.game-expanded #gameStage .memory-board-adaptive[data-cards="36"],
.game-dialog:fullscreen #gameStage .memory-board-adaptive[data-cards="36"]{
  --memory-card-size:min(
    calc((92vw - 30px)/6),
    calc((70dvh - 30px)/6),
    118px
  ) !important;
}

/* 48 Karten = 8 × 6 */
.game-dialog.game-expanded #gameStage .memory-board-adaptive[data-cards="48"],
.game-dialog:fullscreen #gameStage .memory-board-adaptive[data-cards="48"]{
  --memory-card-size:min(
    calc((94vw - 42px)/8),
    calc((69dvh - 30px)/6),
    105px
  ) !important;
}

/* 72 Karten = 9 × 8 */
.game-dialog.game-expanded #gameStage .memory-board-adaptive[data-cards="72"],
.game-dialog:fullscreen #gameStage .memory-board-adaptive[data-cards="72"]{
  --memory-card-size:min(
    calc((96vw - 48px)/9),
    calc((67dvh - 42px)/8),
    88px
  ) !important;
}

/* Karten selbst nicht zusätzlich skalieren */
.game-dialog.game-expanded #gameStage .memory-card,
.game-dialog:fullscreen #gameStage .memory-card{
  width:var(--memory-card-size) !important;
  height:var(--memory-card-size) !important;

  min-width:0 !important;
  min-height:0 !important;
}

/* Navigation darf keine zusätzlichen Layout-Abstände erzeugen */
.game-dialog.game-expanded #gameStage .memory-nav-arrows,
.game-dialog:fullscreen #gameStage .memory-nav-arrows{
  pointer-events:none !important;
}

/* Status unten kompakt halten */
.game-dialog.game-expanded .game-status,
.game-dialog:fullscreen .game-status{
  flex:0 0 auto !important;
  margin:3px 0 !important;
}

/* Tablet */
@media(max-width:900px){

  .game-dialog.game-expanded #gameStage .memory-scoreboard,
  .game-dialog:fullscreen #gameStage .memory-scoreboard{
    gap:4px !important;
  }

  .game-dialog.game-expanded #gameStage .memory-player-score,
  .game-dialog:fullscreen #gameStage .memory-player-score{
    min-width:88px !important;
    font-size:.86rem !important;
    padding:5px 7px !important;
  }

  .game-dialog.game-expanded #gameStage .memory-board-adaptive,
  .game-dialog:fullscreen #gameStage .memory-board-adaptive{
    --memory-gap:4px;
    max-width:98vw !important;
    max-height:calc(100dvh - 215px) !important;
  }
}

/* Handy */
@media(max-width:600px){

  .game-dialog.game-expanded #gameStage .memory-scoreboard,
  .game-dialog:fullscreen #gameStage .memory-scoreboard{
    max-height:54px !important;
    overflow:auto !important;
  }

  .game-dialog.game-expanded #gameStage .memory-player-score,
  .game-dialog:fullscreen #gameStage .memory-player-score{
    min-width:76px !important;
    padding:4px 6px !important;
    font-size:.78rem !important;
  }

  .game-dialog.game-expanded #gameStage .memory-board-adaptive,
  .game-dialog:fullscreen #gameStage .memory-board-adaptive{
    max-height:calc(100dvh - 185px) !important;
  }
}


/* ============================================================
   MEMORY 3.0.1
   Vollbild = reiner Spielmodus ohne Setup / Scrollen
   ============================================================ */

/*
 * Der Memory-Dialog besitzt bereits memory-expanded.
 * Im Vollbild bzw. vergrößerten Modus wird der komplette
 * Einrichtungsbereich aus dem Layout genommen.
 */
.game-dialog.memory-expanded.game-expanded #gameOptions,
.game-dialog.memory-expanded:fullscreen #gameOptions,

.game-dialog.memory-expanded.game-expanded .memory-setup,
.game-dialog.memory-expanded:fullscreen .memory-setup,

.game-dialog.memory-expanded.game-expanded .memory-setup-help,
.game-dialog.memory-expanded:fullscreen .memory-setup-help,

.game-dialog.memory-expanded.game-expanded .memory-choice-row,
.game-dialog.memory-expanded:fullscreen .memory-choice-row,

.game-dialog.memory-expanded.game-expanded .memory-name-details,
.game-dialog.memory-expanded:fullscreen .memory-name-details,

.game-dialog.memory-expanded.game-expanded .memory-name-grid,
.game-dialog.memory-expanded:fullscreen .memory-name-grid,

.game-dialog.memory-expanded.game-expanded .memory-setup-summary,
.game-dialog.memory-expanded:fullscreen .memory-setup-summary,

.game-dialog.memory-expanded.game-expanded .memory-selection-feedback,
.game-dialog.memory-expanded:fullscreen .memory-selection-feedback{
  display:none !important;
}

/* Dialog darf im Spielmodus nicht mehr hoch/runter scrollen */
.game-dialog.memory-expanded.game-expanded,
.game-dialog.memory-expanded:fullscreen{
  overflow:hidden !important;
}

/* Stage nimmt den kompletten freigewordenen Bereich ein */
.game-dialog.memory-expanded.game-expanded #gameStage,
.game-dialog.memory-expanded:fullscreen #gameStage{
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100% !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  overflow:hidden !important;
}

/* Memory selbst sauber mittig */
.game-dialog.memory-expanded.game-expanded #gameStage .memory-wrap,
.game-dialog.memory-expanded:fullscreen #gameStage .memory-wrap{
  flex:1 1 auto !important;

  width:100% !important;
  height:100% !important;
  min-height:0 !important;

  display:flex !important;
  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  margin:0 !important;
  padding:4px !important;

  overflow:hidden !important;
}

/* Spielerstand bleibt sichtbar, beansprucht aber wenig Höhe */
.game-dialog.memory-expanded.game-expanded .memory-scoreboard,
.game-dialog.memory-expanded:fullscreen .memory-scoreboard{
  flex:0 0 auto !important;

  width:min(1100px,94vw) !important;

  margin:0 auto 5px !important;
  padding:0 !important;
}

/*
 * Das Board selbst bekommt den Mittelpunkt.
 * Die bestehenden data-cards-Größen aus MEMORY 3.0
 * bleiben aktiv.
 */
.game-dialog.memory-expanded.game-expanded .memory-board-adaptive,
.game-dialog.memory-expanded:fullscreen .memory-board-adaptive{
  flex:0 0 auto !important;

  margin:auto !important;

  justify-content:center !important;
  align-content:center !important;

  max-width:96vw !important;
  max-height:calc(100dvh - 175px) !important;
}

/* Status kompakt */
.game-dialog.memory-expanded.game-expanded .game-status,
.game-dialog.memory-expanded:fullscreen .game-status{
  flex:0 0 auto !important;

  margin:2px 0 !important;
  min-height:1.2em !important;
}

/* Musikleiste ebenfalls kompakt am unteren Rand */
.game-dialog.memory-expanded.game-expanded .game-mini-player,
.game-dialog.memory-expanded:fullscreen .game-mini-player{
  flex:0 0 auto !important;

  margin:3px 0 0 !important;
}


/* ============================================================
   Desktop / 1080p
   ============================================================ */

@media(min-width:1000px) and (min-height:800px){

  .game-dialog.memory-expanded.game-expanded .memory-board-adaptive,
  .game-dialog.memory-expanded:fullscreen .memory-board-adaptive{
    max-height:calc(100dvh - 160px) !important;
  }

}


/* ============================================================
   Tablet
   ============================================================ */

@media(max-width:900px){

  .game-dialog.memory-expanded.game-expanded .memory-board-adaptive,
  .game-dialog.memory-expanded:fullscreen .memory-board-adaptive{
    max-width:98vw !important;
    max-height:calc(100dvh - 150px) !important;
  }

}


/* ============================================================
   Handy
   ============================================================ */

@media(max-width:600px){

  .game-dialog.memory-expanded.game-expanded .memory-board-adaptive,
  .game-dialog.memory-expanded:fullscreen .memory-board-adaptive{
    max-width:99vw !important;
    max-height:calc(100dvh - 135px) !important;
  }

  .game-dialog.memory-expanded.game-expanded .memory-scoreboard,
  .game-dialog.memory-expanded:fullscreen .memory-scoreboard{
    max-height:48px !important;
    overflow:hidden !important;
  }

}


/* ============================================================
   PLATTFORM 3.0 – HIDDEN MUSS IMMER HIDDEN BEDEUTEN
   ============================================================ */

[hidden]{
  display:none !important;
}



/* ============================================================
   SNAKE 3.0
   Vollbild: groß, mittig, quadratisch
   ============================================================ */

.snake-stage{
  width:100% !important;
  min-height:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.snake-board{
  display:block;
  width:min(78vw,560px);
  height:auto;
  aspect-ratio:1 / 1;
  margin:0 auto;
  border:5px solid #3a3a48;
  border-radius:16px;
  box-shadow:
    0 16px 42px rgba(0,0,0,.45),
    0 0 0 3px rgba(255,255,255,.08);
  background:#15151c;
}

/* Vollbild / vergrößert */
.game-dialog.game-expanded #gameStage .snake-board,
.game-dialog:fullscreen #gameStage .snake-board{
  width:auto !important;
  height:min(66dvh,680px) !important;
  max-width:92vw !important;
  max-height:66dvh !important;
  aspect-ratio:1 / 1 !important;
  object-fit:contain !important;
  margin:0 auto !important;
  flex:0 0 auto !important;
}

.game-dialog.game-expanded #gameStage.snake-stage,
.game-dialog:fullscreen #gameStage.snake-stage{
  width:100% !important;
  min-height:0 !important;
  flex:1 1 auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

/* Status kompakt halten */
.game-dialog.snake-expanded.game-expanded .game-status,
.game-dialog.snake-expanded:fullscreen .game-status{
  flex:0 0 auto !important;
  margin:3px 0 !important;
  font-size:1.05rem !important;
}

/* Musikleiste nicht unnötig aufblasen */
.game-dialog.snake-expanded.game-expanded .game-mini-player,
.game-dialog.snake-expanded:fullscreen .game-mini-player{
  flex:0 0 auto !important;
  margin:4px 0 !important;
}

/* Desktop 1080p */
@media(min-width:1000px) and (min-height:800px){
  .game-dialog.game-expanded #gameStage .snake-board,
  .game-dialog:fullscreen #gameStage .snake-board{
    height:min(68dvh,700px) !important;
    max-height:68dvh !important;
  }
}

/* Tablet */
@media(max-width:900px){
  .game-dialog.game-expanded #gameStage .snake-board,
  .game-dialog:fullscreen #gameStage .snake-board{
    height:min(60dvh,600px) !important;
    max-height:60dvh !important;
    max-width:94vw !important;
  }
}

/* Handy */
@media(max-width:600px){
  .game-dialog.game-expanded #gameStage .snake-board,
  .game-dialog:fullscreen #gameStage .snake-board{
    height:min(54dvh,520px) !important;
    max-height:54dvh !important;
    max-width:96vw !important;
  }
}


/* ============================================================
   TETRIS 3.0
   Klarer Rahmen um das eigentliche Spielfeld
   ============================================================ */

.tetris-board{
  display:block;
  border:6px solid #50566b !important;
  border-radius:10px;
  box-shadow:
    0 14px 36px rgba(0,0,0,.48),
    0 0 0 3px rgba(255,255,255,.10),
    inset 0 0 0 2px rgba(255,255,255,.08);
  background:#15151c;
}

/* Im Vollbild etwas kräftiger */
.game-dialog.game-expanded #gameStage .tetris-board,
.game-dialog:fullscreen #gameStage .tetris-board{
  border-width:7px !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.55),
    0 0 0 4px rgba(255,255,255,.10),
    inset 0 0 0 2px rgba(255,255,255,.08);
}


/* ============================================================
   TETRIS 3.1
   Farbige Tetrominos + Next-Block rechts im Vollbild
   ============================================================ */

.tetris-stage{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tetris-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.tetris-side{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  font-weight:800;
}

.tetris-preview{
  display:block;
  width:100px;
  height:100px;
  border:2px solid #50566b;
  border-radius:8px;
  background:#15151c;
}


/* ------------------------------------------------------------
   VOLLBILD
   ------------------------------------------------------------ */

.game-dialog.game-expanded #gameStage.tetris-stage,
.game-dialog:fullscreen #gameStage.tetris-stage{
  flex:1 1 auto !important;
  width:100% !important;
  min-height:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  overflow:hidden !important;
}

/*
 * Spielfeld + Vorschau nebeneinander,
 * wie beim klassischen Tetris.
 */
.game-dialog.game-expanded #gameStage .tetris-wrap,
.game-dialog:fullscreen #gameStage .tetris-wrap{
  display:flex !important;
  flex-direction:row !important;

  align-items:flex-start !important;
  justify-content:center !important;

  gap:34px !important;

  width:auto !important;
  height:auto !important;

  margin:0 auto !important;
}


/*
 * Nur Tetris überschreibt die generische Fullscreen-Canvas-Regel.
 * Wirkung ungefähr wie die gewünschte ~75%-Ansicht.
 */
.game-dialog.game-expanded #gameStage .tetris-board,
.game-dialog:fullscreen #gameStage .tetris-board{
  width:auto !important;
  height:min(62dvh,620px) !important;

  max-width:none !important;
  max-height:62dvh !important;

  aspect-ratio:3 / 5 !important;
  object-fit:contain !important;

  flex:0 0 auto !important;
  margin:0 !important;
}


/*
 * Next-Block rechts auf Höhe des oberen Spielfeldbereichs.
 */
.game-dialog.game-expanded #gameStage .tetris-side,
.game-dialog:fullscreen #gameStage .tetris-side{
  display:flex !important;

  width:150px !important;
  min-width:150px !important;

  margin-top:18px !important;

  padding:12px !important;

  border:2px solid #50566b;
  border-radius:12px;

  background:rgba(21,21,28,.84);

  box-shadow:
    0 10px 28px rgba(0,0,0,.35);
}

.game-dialog.game-expanded #gameStage .tetris-preview,
.game-dialog:fullscreen #gameStage .tetris-preview{
  width:120px !important;
  height:120px !important;

  max-width:none !important;
  max-height:none !important;
}


/* Desktop 1080p */
@media(min-width:1000px) and (min-height:800px){

  .game-dialog.game-expanded #gameStage .tetris-board,
  .game-dialog:fullscreen #gameStage .tetris-board{
    height:min(64dvh,640px) !important;
    max-height:64dvh !important;
  }

}


/* Tablet */
@media(max-width:900px){

  .game-dialog.game-expanded #gameStage .tetris-wrap,
  .game-dialog:fullscreen #gameStage .tetris-wrap{
    gap:18px !important;
  }

  .game-dialog.game-expanded #gameStage .tetris-board,
  .game-dialog:fullscreen #gameStage .tetris-board{
    height:min(57dvh,550px) !important;
    max-height:57dvh !important;
  }

  .game-dialog.game-expanded #gameStage .tetris-side,
  .game-dialog:fullscreen #gameStage .tetris-side{
    width:120px !important;
    min-width:120px !important;
  }

  .game-dialog.game-expanded #gameStage .tetris-preview,
  .game-dialog:fullscreen #gameStage .tetris-preview{
    width:95px !important;
    height:95px !important;
  }

}


/* Handy: wegen schmalem Display wieder untereinander */
@media(max-width:600px){

  .game-dialog.game-expanded #gameStage .tetris-wrap,
  .game-dialog:fullscreen #gameStage .tetris-wrap{
    flex-direction:column !important;
    gap:7px !important;
  }

  .game-dialog.game-expanded #gameStage .tetris-board,
  .game-dialog:fullscreen #gameStage .tetris-board{
    height:min(50dvh,470px) !important;
    max-height:50dvh !important;
  }

  .game-dialog.game-expanded #gameStage .tetris-side,
  .game-dialog:fullscreen #gameStage .tetris-side{
    width:auto !important;
    min-width:0 !important;

    flex-direction:row !important;

    margin-top:0 !important;
    padding:6px 10px !important;
  }

  .game-dialog.game-expanded #gameStage .tetris-preview,
  .game-dialog:fullscreen #gameStage .tetris-preview{
    width:65px !important;
    height:65px !important;
  }

}


/* ============================================================
   ZWORX 3.0
   ============================================================ */

.zworx-stage{
  width:100%;
  display:flex;
  justify-content:center;
}

.zworx-wrap{
  width:min(100%,720px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.zworx-hud{
  width:min(100%,640px);

  display:flex;
  justify-content:center;
  gap:24px;

  padding:8px 14px;

  border:2px solid #4b4b57;
  border-radius:10px;

  background:#18151d;

  font-size:1.05rem;
}

.zworx-board{
  display:block;

  width:min(94vw,640px);
  height:auto;

  aspect-ratio:4 / 3;

  border:5px solid #4b4b57;
  border-radius:12px;

  image-rendering:pixelated;

  box-shadow:
    0 14px 40px rgba(0,0,0,.45);
}


/* Vollbild */

.game-dialog.game-expanded #gameStage.zworx-stage,
.game-dialog:fullscreen #gameStage.zworx-stage{
  flex:1 1 auto !important;

  min-height:0 !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  overflow:hidden !important;
}

.game-dialog.game-expanded #gameStage .zworx-wrap,
.game-dialog:fullscreen #gameStage .zworx-wrap{
  width:auto !important;
  height:auto !important;
}

.game-dialog.game-expanded #gameStage .zworx-board,
.game-dialog:fullscreen #gameStage .zworx-board{
  width:auto !important;
  height:min(68dvh,720px) !important;

  max-width:94vw !important;
  max-height:68dvh !important;

  aspect-ratio:4 / 3 !important;

  flex:0 0 auto !important;
}

@media(max-width:700px){

  .zworx-hud{
    gap:12px;
    font-size:.9rem;
  }

  .game-dialog.game-expanded #gameStage .zworx-board,
  .game-dialog:fullscreen #gameStage .zworx-board{
    height:auto !important;
    width:96vw !important;
    max-height:62dvh !important;
  }
}



/* ============================================================
   MOORHUHN-FÜTTERSPIEL 3.0
   ============================================================ */

.moorfeed-stage{
  width:100%;
  min-height:0;

  display:flex;
  justify-content:center;
}

.moorfeed-wrap{
  width:min(100%,1020px);

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:8px;
}

.moorfeed-hud{
  width:min(96vw,960px);

  display:flex;
  flex-wrap:wrap;

  justify-content:center;
  align-items:center;

  gap:10px 24px;

  padding:8px 14px;

  border:2px solid #4d5964;
  border-radius:12px;

  background:#17191d;

  font-size:1rem;
}

.moorfeed-board{
  display:block;

  width:min(96vw,960px);
  height:auto;

  aspect-ratio:16 / 9;

  border:5px solid #4d5964;
  border-radius:14px;

  box-shadow:
    0 16px 44px rgba(0,0,0,.45);
}


/* ============================================================
   VOLLBILD
   ============================================================ */

.game-dialog.game-expanded #gameStage.moorfeed-stage,
.game-dialog:fullscreen #gameStage.moorfeed-stage{
  flex:1 1 auto !important;

  width:100% !important;
  min-height:0 !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  overflow:hidden !important;
}

.game-dialog.game-expanded #gameStage .moorfeed-wrap,
.game-dialog:fullscreen #gameStage .moorfeed-wrap{
  width:auto !important;
  height:auto !important;

  max-width:98vw !important;
}

.game-dialog.game-expanded #gameStage .moorfeed-board,
.game-dialog:fullscreen #gameStage .moorfeed-board{
  width:auto !important;
  height:min(70dvh,760px) !important;

  max-width:96vw !important;
  max-height:70dvh !important;

  aspect-ratio:16 / 9 !important;

  flex:0 0 auto !important;

  margin:0 auto !important;
}

.game-dialog.game-expanded #gameStage .moorfeed-hud,
.game-dialog:fullscreen #gameStage .moorfeed-hud{
  width:min(96vw,1100px) !important;

  flex:0 0 auto !important;

  font-size:1.05rem !important;
}


/* Tablet */

@media(max-width:900px){

  .moorfeed-hud{
    gap:6px 14px;
    font-size:.9rem;
  }

  .game-dialog.game-expanded #gameStage .moorfeed-board,
  .game-dialog:fullscreen #gameStage .moorfeed-board{
    width:96vw !important;
    height:auto !important;

    max-height:66dvh !important;
  }
}


/* Handy */

@media(max-width:600px){

  .moorfeed-hud{
    gap:5px 10px;

    padding:6px 8px;

    font-size:.78rem;
  }

  .game-dialog.game-expanded #gameStage .moorfeed-board,
  .game-dialog:fullscreen #gameStage .moorfeed-board{
    width:98vw !important;
    height:auto !important;

    max-height:62dvh !important;
  }
}



/* ============================================================
   BUZZ-GAMES 3.4
   Sortierung + Filter
   ============================================================ */

.buzz-game-browser{
  grid-column:1 / -1;

  width:100%;

  display:flex;
  flex-wrap:wrap;

  align-items:center;

  gap:10px 14px;

  margin:4px 0 18px;
  padding:12px 14px;

  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;

  background:
    rgba(20,20,27,.78);

  box-shadow:
    0 8px 24px rgba(0,0,0,.20);
}


.buzz-browser-sort label{
  display:flex;

  align-items:center;

  gap:8px;

  font-weight:700;
}


.buzz-browser-sort select{
  min-height:42px;

  padding:7px 34px 7px 12px;

  border:1px solid
    rgba(255,255,255,.20);

  border-radius:10px;

  background:#20212a;

  color:#fff;

  font:inherit;

  cursor:pointer;
}


.buzz-browser-filter{
  display:flex;
  flex-wrap:wrap;

  gap:6px;
}


.buzz-browser-filter button{
  min-height:42px;

  padding:7px 13px;

  border:1px solid
    rgba(255,255,255,.18);

  border-radius:999px;

  background:#282a34;

  color:#fff;

  font:inherit;
  font-weight:700;

  cursor:pointer;

  transition:
    transform .12s ease,
    background .12s ease,
    border-color .12s ease;
}


.buzz-browser-filter button:hover{
  transform:translateY(-1px);

  background:#333642;
}


.buzz-browser-filter button.active{
  background:#ffd52a;

  color:#16171c;

  border-color:#ffd52a;
}


.buzz-browser-count{
  margin-left:auto;

  min-width:76px;

  text-align:right;

  opacity:.78;

  font-weight:700;
}


/*
 * Wichtig:
 * hidden darf niemals durch Card/Grid-CSS
 * wieder sichtbar gemacht werden.
 */
.card[hidden]{
  display:none !important;
}


/* Tablet / Handy */

@media(max-width:700px){

  .buzz-game-browser{
    align-items:stretch;
  }

  .buzz-browser-sort{
    width:100%;
  }

  .buzz-browser-sort label{
    width:100%;

    justify-content:space-between;
  }

  .buzz-browser-sort select{
    flex:1 1 auto;

    max-width:230px;
  }

  .buzz-browser-filter{
    width:100%;
  }

  .buzz-browser-filter button{
    flex:1 1 auto;
  }

  .buzz-browser-count{
    width:100%;

    margin-left:0;

    text-align:left;
  }

}



/* ============================================================
   FRUIT NINJA 3.0
   ============================================================ */

.fruit-stage{
  width:100%;
  min-height:0;

  display:flex;
  justify-content:center;
}

.fruit-wrap{
  width:min(100%,1020px);

  display:flex;
  flex-direction:column;

  align-items:center;
  justify-content:center;

  gap:8px;
}

.fruit-hud{
  width:min(96vw,960px);

  display:flex;
  flex-wrap:wrap;

  justify-content:center;
  align-items:center;

  gap:10px 24px;

  padding:8px 14px;

  border:2px solid #505766;
  border-radius:12px;

  background:#17191f;

  font-size:1rem;
}

.fruit-board{
  display:block;

  width:min(96vw,960px);
  height:auto;

  aspect-ratio:16 / 9;

  border:5px solid #505766;
  border-radius:14px;

  box-shadow:
    0 16px 44px rgba(0,0,0,.45);
}


/* ============================================================
   VOLLBILD
   ============================================================ */

.game-dialog.game-expanded #gameStage.fruit-stage,
.game-dialog:fullscreen #gameStage.fruit-stage{
  flex:1 1 auto !important;

  width:100% !important;
  min-height:0 !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  overflow:hidden !important;
}

.game-dialog.game-expanded #gameStage .fruit-wrap,
.game-dialog:fullscreen #gameStage .fruit-wrap{
  width:auto !important;
  height:auto !important;

  max-width:98vw !important;
}

.game-dialog.game-expanded #gameStage .fruit-board,
.game-dialog:fullscreen #gameStage .fruit-board{
  width:auto !important;
  height:min(70dvh,760px) !important;

  max-width:96vw !important;
  max-height:70dvh !important;

  aspect-ratio:16 / 9 !important;

  flex:0 0 auto !important;

  margin:0 auto !important;
}

.game-dialog.game-expanded #gameStage .fruit-hud,
.game-dialog:fullscreen #gameStage .fruit-hud{
  width:min(96vw,1100px) !important;

  flex:0 0 auto !important;

  font-size:1.05rem !important;
}


/* Tablet */

@media(max-width:900px){

  .fruit-hud{
    gap:6px 14px;
    font-size:.9rem;
  }

  .game-dialog.game-expanded #gameStage .fruit-board,
  .game-dialog:fullscreen #gameStage .fruit-board{
    width:96vw !important;
    height:auto !important;

    max-height:66dvh !important;
  }
}


/* Handy */

@media(max-width:600px){

  .fruit-hud{
    gap:5px 10px;

    padding:6px 8px;

    font-size:.78rem;
  }

  .game-dialog.game-expanded #gameStage .fruit-board,
  .game-dialog:fullscreen #gameStage .fruit-board{
    width:98vw !important;
    height:auto !important;

    max-height:62dvh !important;
  }
}



/* ============================================================
   MOORHUHN-FÜTTERSPIEL 3.1
   Arcade-Fadenkreuz / 8 Maisladungen / 90 Sekunden
   ============================================================ */

.moorfeed-stage{
  width:100% !important;
  min-height:0 !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;
}

.moorfeed-wrap{
  width:min(100%,1320px) !important;

  display:flex !important;
  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  gap:8px !important;
}

.moorfeed-hud{
  width:min(97vw,1280px) !important;

  display:flex !important;
  flex-wrap:wrap !important;

  align-items:center !important;
  justify-content:space-between !important;

  gap:8px 18px !important;

  min-height:48px !important;

  padding:7px 16px !important;

  border:2px solid rgba(255,255,255,.18) !important;
  border-radius:12px !important;

  background:rgba(18,20,23,.94) !important;

  font-size:1.05rem !important;
  font-weight:750 !important;
}

.moorfeed-ammo{
  letter-spacing:3px;
  white-space:nowrap;
  font-size:1.15rem;
}

.moorfeed-board{
  display:block !important;

  width:min(97vw,1280px) !important;
  height:auto !important;

  aspect-ratio:16 / 9 !important;

  margin:0 auto !important;

  border:5px solid #454b55 !important;
  border-radius:14px !important;

  background:#9cc0dd;

  box-shadow:
    0 18px 48px rgba(0,0,0,.48) !important;

  cursor:crosshair;

  touch-action:none;
}

.game-dialog.game-expanded #gameStage.moorfeed-stage,
.game-dialog:fullscreen #gameStage.moorfeed-stage{
  flex:1 1 auto !important;

  width:100% !important;
  min-height:0 !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  overflow:hidden !important;
}

.game-dialog.game-expanded #gameStage .moorfeed-wrap,
.game-dialog:fullscreen #gameStage .moorfeed-wrap{
  width:auto !important;
  height:auto !important;

  max-width:99vw !important;
  max-height:100% !important;

  gap:6px !important;
}

.game-dialog.game-expanded #gameStage .moorfeed-board,
.game-dialog:fullscreen #gameStage .moorfeed-board{
  width:auto !important;

  height:min(72dvh,790px) !important;

  max-width:97vw !important;
  max-height:72dvh !important;

  aspect-ratio:16 / 9 !important;

  flex:0 0 auto !important;
}

.game-dialog.game-expanded #gameStage .moorfeed-hud,
.game-dialog:fullscreen #gameStage .moorfeed-hud{
  width:min(97vw,1400px) !important;

  flex:0 0 auto !important;
}

@media(max-width:900px){

  .moorfeed-hud{
    font-size:.9rem !important;
    gap:5px 12px !important;
    padding:6px 10px !important;
  }

  .moorfeed-ammo{
    font-size:.95rem;
    letter-spacing:1px;
  }

  .game-dialog.game-expanded #gameStage .moorfeed-board,
  .game-dialog:fullscreen #gameStage .moorfeed-board{
    width:97vw !important;
    height:auto !important;

    max-height:67dvh !important;
  }
}

@media(max-width:600px){

  .moorfeed-hud{
    justify-content:center !important;

    font-size:.76rem !important;

    gap:4px 9px !important;

    min-height:38px !important;

    padding:5px 7px !important;
  }

  .moorfeed-ammo{
    width:100%;

    text-align:center;

    font-size:.85rem;
  }

  .game-dialog.game-expanded #gameStage .moorfeed-board,
  .game-dialog:fullscreen #gameStage .moorfeed-board{
    width:98vw !important;
    height:auto !important;

    max-height:62dvh !important;
  }
}



/* ============================================================
   TAUBENSCHLAG 3.0
   Pflege-Simulation / saisonale Nestereignisse
   ============================================================ */

.pigeon-stage{
  width:100% !important;
  min-height:0 !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;
}

.pigeon-wrap{
  width:min(100%,1240px) !important;

  display:flex !important;
  flex-direction:column !important;

  align-items:center !important;
  justify-content:center !important;

  gap:8px !important;
}

.pigeon-hud{
  width:min(98vw,1200px) !important;

  display:flex !important;
  flex-wrap:wrap !important;

  justify-content:center !important;
  align-items:center !important;

  gap:7px 18px !important;

  padding:8px 14px !important;

  border:2px solid rgba(255,255,255,.16) !important;
  border-radius:12px !important;

  background:rgba(19,21,27,.94) !important;

  font-weight:750 !important;
  font-size:.96rem !important;
}

.pigeon-board{
  display:block !important;

  width:min(98vw,1200px) !important;
  height:auto !important;

  aspect-ratio:5 / 3 !important;

  margin:0 auto !important;

  border:5px solid #4a4e58 !important;
  border-radius:14px !important;

  background:#9fc2d6;

  box-shadow:
    0 18px 48px rgba(0,0,0,.48) !important;

  touch-action:none;
}

.pigeon-help{
  width:min(98vw,1200px) !important;

  padding:7px 12px !important;

  border-radius:10px !important;

  background:rgba(22,24,30,.88) !important;

  color:#d8d8de !important;

  text-align:center !important;

  font-size:.9rem !important;
}

.game-dialog.game-expanded #gameStage.pigeon-stage,
.game-dialog:fullscreen #gameStage.pigeon-stage{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  overflow:hidden !important;
}

.game-dialog.game-expanded #gameStage .pigeon-wrap,
.game-dialog:fullscreen #gameStage .pigeon-wrap{
  width:auto !important;
  height:auto !important;

  max-width:99vw !important;
  max-height:100% !important;

  gap:5px !important;
}

.game-dialog.game-expanded #gameStage .pigeon-board,
.game-dialog:fullscreen #gameStage .pigeon-board{
  width:auto !important;

  height:min(71dvh,760px) !important;

  max-width:98vw !important;
  max-height:71dvh !important;

  aspect-ratio:5 / 3 !important;

  flex:0 0 auto !important;
}

.game-dialog.game-expanded #gameStage .pigeon-hud,
.game-dialog:fullscreen #gameStage .pigeon-hud{
  width:min(98vw,1400px) !important;

  flex:0 0 auto !important;
}

.game-dialog.game-expanded #gameStage .pigeon-help,
.game-dialog:fullscreen #gameStage .pigeon-help{
  width:min(98vw,1400px) !important;

  flex:0 0 auto !important;
}

@media(max-width:900px){

  .pigeon-hud{
    font-size:.82rem !important;

    gap:5px 10px !important;

    padding:6px 9px !important;
  }

  .pigeon-help{
    font-size:.78rem !important;
  }

  .game-dialog.game-expanded #gameStage .pigeon-board,
  .game-dialog:fullscreen #gameStage .pigeon-board{
    width:98vw !important;
    height:auto !important;

    max-height:66dvh !important;
  }
}

@media(max-width:600px){

  .pigeon-hud{
    font-size:.72rem !important;

    gap:4px 7px !important;

    padding:5px 7px !important;
  }

  .pigeon-help{
    font-size:.7rem !important;

    padding:5px 7px !important;
  }

  .game-dialog.game-expanded #gameStage .pigeon-board,
  .game-dialog:fullscreen #gameStage .pigeon-board{
    width:99vw !important;
    height:auto !important;

    max-height:61dvh !important;
  }
}



/* ============================================================
   BUZZ WEBGAMES 3.8
   Kompakter Portal-Kopf / Controller-Intro / Jukebox
   ============================================================ */


/* ------------------------------------------------------------
   HERO KOMPAKTER
   ------------------------------------------------------------ */

.hero{
  padding:20px 24px !important;
  min-height:0 !important;
}

.hero h2{
  margin:0 0 .35rem !important;
}

.hero p{
  margin:.25rem 0 0 !important;
}

.hero .monitor{
  display:none !important;
}


/* ------------------------------------------------------------
   CONTROLLER INTRO
   ------------------------------------------------------------ */

body.buzz-intro-open{
  overflow:hidden !important;
}

.buzz-intro-modal{
  z-index:15000 !important;
  backdrop-filter:blur(8px);
}

.buzz-intro-dialog{
  width:min(92vw,650px) !important;
  max-width:650px !important;

  padding:30px 30px 26px !important;

  text-align:center;

  border:2px solid rgba(255,255,255,.13);
  border-radius:24px !important;

  background:
    radial-gradient(
      circle at 50% 0,
      #313343 0,
      #20202b 45%,
      #17171f 100%
    ) !important;

  box-shadow:
    0 28px 90px rgba(0,0,0,.65);
}

.buzz-intro-dialog .close{
  position:absolute !important;
  top:10px !important;
  right:12px !important;
  float:none !important;

  font-size:1.8rem;
}

.buzz-intro-controller{
  font-size:3.5rem;
  line-height:1;

  margin:.1rem auto .7rem;
}

.buzz-intro-dialog .eyebrow{
  margin:.2rem 0 .4rem;
}

.buzz-intro-dialog h2{
  margin:.25rem auto .6rem;

  max-width:560px;

  font-size:
    clamp(
      1.45rem,
      4vw,
      2rem
    );
}

.buzz-intro-lead{
  margin:.35rem 0 1.1rem;

  font-size:
    clamp(
      1.05rem,
      3vw,
      1.3rem
    );

  font-weight:900;
}

.buzz-intro-actions{
  display:grid;

  grid-template-columns:
    repeat(
      5,
      minmax(70px,1fr)
    );

  gap:8px;

  width:100%;

  margin:1rem auto;
}

.buzz-intro-key{
  display:grid;
  place-items:center;

  min-height:78px;

  padding:8px 5px;

  border:3px solid rgba(255,255,255,.82);
  border-radius:16px;

  color:#fff;

  font-size:1.75rem;
  font-weight:1000;

  box-shadow:
    inset 0 -5px 0 rgba(0,0,0,.20),
    0 7px 16px rgba(0,0,0,.28);
}

.buzz-intro-key small{
  display:block;

  margin-top:3px;

  font-size:.72rem;
  line-height:1;
  font-weight:900;
}

.buzz-intro-up{
  background:#1976d2;
}

.buzz-intro-down{
  background:#f57c00;
}

.buzz-intro-left{
  background:#2e9b48;
}

.buzz-intro-right{
  background:#e9c72b;
  color:#171717;
}

.buzz-intro-action{
  background:#e53935;
}

.buzz-intro-text{
  margin:1rem auto;

  max-width:540px;

  color:#d8d8df;

  line-height:1.5;
}

.buzz-intro-accept{
  display:block;

  width:min(100%,280px);

  margin:1rem auto 0;

  font-size:1rem;
}


/* ------------------------------------------------------------
   JUKEBOX EINKLAPPBAR
   ------------------------------------------------------------ */

.music-hub{
  transition:
    padding .18s ease,
    margin .18s ease;
}

.music-head{
  align-items:center !important;
}

.music-collapse-btn{
  flex:0 0 auto;

  min-width:160px;

  white-space:nowrap;
}


/*
 * Im geschlossenen Zustand bleibt nur Kopf + aktueller Titel.
 */
.music-hub.music-collapsed{
  padding:14px 18px !important;
}

.music-hub.music-collapsed .music-head h2{
  margin:.15rem 0 !important;
}

.music-hub.music-collapsed .music-head p{
  display:none !important;
}

.music-hub.music-collapsed .music-source,
.music-hub.music-collapsed .music-modes,
.music-hub.music-collapsed .music-player{
  display:none !important;
}


/* ------------------------------------------------------------
   ALTER CONTROLLER-GUIDE FALLS NOCH IM DOM
   ------------------------------------------------------------ */

.buzz-guide{
  display:none !important;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media(max-width:700px){

  .buzz-intro-dialog{
    width:100% !important;

    padding:
      24px
      14px
      18px !important;
  }

  .buzz-intro-actions{
    grid-template-columns:
      repeat(
        5,
        1fr
      );

    gap:5px;
  }

  .buzz-intro-key{
    min-width:0;
    min-height:64px;

    border-width:2px;

    border-radius:12px;

    font-size:1.35rem;
  }

  .buzz-intro-key small{
    font-size:.58rem;
  }

  .music-head{
    display:grid !important;

    grid-template-columns:1fr !important;

    gap:8px !important;
  }

  .music-now{
    min-width:0 !important;
    width:100% !important;
  }

  .music-collapse-btn{
    width:100%;
  }

  .music-hub.music-collapsed .music-now{
    display:none !important;
  }

}



/* ============================================================
   TAUBENSCHLAG 4.0
   Rundum-Patch
   ============================================================ */

.pigeon-hud{
  min-height:38px !important;

  padding:6px 14px !important;

  gap:10px 28px !important;

  font-size:.95rem !important;
}

.pigeon-help{
  font-weight:750 !important;
}

.pigeon-board{
  cursor:pointer;
  touch-action:none;
}

.game-dialog.pigeon-expanded.game-expanded #gameStage,
.game-dialog.pigeon-expanded:fullscreen #gameStage{
  overflow:hidden !important;
}

.game-dialog.pigeon-expanded.game-expanded #gameStage .pigeon-board,
.game-dialog.pigeon-expanded:fullscreen #gameStage .pigeon-board{
  height:min(74dvh,780px) !important;

  width:auto !important;

  max-height:74dvh !important;
  max-width:98vw !important;
}

@media(max-width:900px){

  .game-dialog.pigeon-expanded.game-expanded #gameStage .pigeon-board,
  .game-dialog.pigeon-expanded:fullscreen #gameStage .pigeon-board{
    width:98vw !important;
    height:auto !important;

    max-height:68dvh !important;
  }

}



/* ============================================================
   ZWORX 4.0
   Wachen / Vampire / Zwiebel / Knoblauch
   ============================================================ */

.zworx-hud{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;

  gap:8px 20px;

  min-height:46px;

  padding:7px 12px;

  font-size:.95rem;
}

.zworx-board{
  image-rendering:auto;
}

.game-dialog.zworx-expanded.game-expanded #gameStage .zworx-board,
.game-dialog.zworx-expanded:fullscreen #gameStage .zworx-board{
  width:auto !important;

  height:min(76dvh,720px) !important;

  max-width:96vw !important;
  max-height:76dvh !important;
}



/* ============================================================
   FISCHADLER BUZZ PORT
   ============================================================ */

.buzz-fa-game{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:0;
}

.buzz-fa-game .fa-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin:4px 0 8px;
}

.buzz-fa-game .fa-top-right{
  display:flex;
  align-items:center;
  gap:7px;
}

.buzz-fa-game .fa-btn{
  padding:8px 14px;
  border-radius:10px;
  border:1px solid #cfcfcf;
  background:#fff;
  color:#000;
  cursor:pointer;
  font-weight:700;
}

.buzz-fa-game .fa-select{
  padding:6px 9px;
  border-radius:7px;
}

.buzz-fa-game .fa-stage{
  position:relative;
}

.buzz-fa-game #fischadler-canvas{
  display:block;
  width:100%;
  height:auto;
  border:1px solid #ddd;
  border-radius:8px;
  background:#87c6e6;
  image-rendering:pixelated;
}

.buzz-fa-game .fa-hud{
  position:absolute;
  left:10px;
  top:10px;
  z-index:2;
  display:flex;
  gap:12px;
  padding:6px 9px;
  border-radius:7px;
  background:rgba(255,255,255,.92);
  color:#111;
  font:600 14px system-ui,sans-serif;
}

.buzz-fa-game .fa-overlay{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
}

.buzz-fa-game .fa-overlay .panel{
  width:min(560px,92%);
  padding:16px 19px;
  border-radius:11px;
  background:#2f3338;
  color:#fff;
  text-align:center;
  box-shadow:0 10px 28px rgba(0,0,0,.3);
}

.buzz-fa-game .fa-badge{
  display:inline-block;
  padding:6px 11px;
  border-radius:9px;
  background:#fff;
  color:#111;
  font-weight:800;
}

.buzz-fa-game .fa-btn-light{
  background:transparent !important;
  color:#fff !important;
  border-color:#fff !important;
}

.buzz-fa-game .fa-countdown{
  position:absolute;
  inset:0;
  z-index:5;
  display:none;
  align-items:center;
  justify-content:center;
  color:#fff;
  font:800 64px/1 system-ui,sans-serif;
  text-shadow:0 2px 5px rgba(0,0,0,.5);
}

.game-dialog.fischadler-expanded{
  width:min(1100px,98vw);
}



/* ==========================================================
   AMMERSEE QUIZ – BUZZ
   ========================================================== */

.aq-buzz-expanded,
.knigge-buzz-expanded{
  width:min(1180px,96vw)!important;
  max-width:none!important;
}

.aq-buzz,
.knigge-buzz{
  width:100%;
  color:#111;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.aqb-card,
.kgb-card{
  width:min(1050px,100%);
  margin:0 auto;
  padding:22px;
  background:#fff;
  border-radius:18px;
}

.aqb-card h2,
.kgb-card h2{
  margin:0 0 10px;
  text-align:center;
}

.aqb-lead{
  text-align:center;
  color:#555;
}

.aqb-setting{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin:12px auto;
  padding:18px 22px;
  max-width:520px;
  border:2px solid #ddd;
  border-radius:14px;
}

.aqb-focus{
  border-color:#111;
}

.aqb-progress{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.aqb-answers{
  display:grid;
  gap:10px;
}

.aqb-answer{
  display:flex;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border:2px solid #ddd;
  border-radius:12px;
}

.aqb-answer.is-focus{
  border-color:#111;
  box-shadow:0 0 0 3px rgba(0,0,0,.12);
}

.aqb-answer.is-right{
  border-color:#16a34a;
  background:#ecfdf5;
}

.aqb-answer.is-wrong{
  border-color:#dc2626;
  background:#fef2f2;
}

.aqb-key{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-weight:900;
}

.aqb-feedback{
  margin-top:15px;
  padding:13px;
  background:#f3f4f6;
  border-radius:12px;
}

.aqb-hint{
  margin-top:18px;
  text-align:center;
  color:#555;
  font-weight:700;
}

.aqb-result{
  text-align:center;
}

.aqb-result-score{
  font-size:58px;
  line-height:1;
  font-weight:900;
  margin:25px 0 8px;
}


/* ==========================================================
   FOTOKNIGGE – BUZZ
   ========================================================== */

.kgb-tabs{
  display:flex;
  justify-content:center;
  gap:10px;
  margin:12px 0 18px;
}

.kgb-tabs div{
  padding:8px 18px;
  border-radius:999px;
  background:#ddd;
  font-weight:800;
}

.kgb-tabs .is-active{
  background:#111;
  color:#fff;
}

.kgb-board{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.kgb-cell{
  min-height:86px;
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:12px;
  border:2px solid #ddd;
  border-radius:12px;
  background:#fff;
}

.kgb-cell.is-focus{
  border-color:#111;
  box-shadow:0 0 0 3px rgba(0,0,0,.14);
}

.kgb-cell.is-checked{
  background:#ecfdf5;
  border-color:#16a34a;
}

.kgb-check{
  width:25px;
  height:25px;
  flex:0 0 25px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #555;
  border-radius:6px;
  font-weight:900;
}

.kgb-cell.is-checked .kgb-check{
  color:#fff;
  background:#16a34a;
  border-color:#16a34a;
}

.kgb-footer{
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-top:16px;
  padding-top:12px;
  border-top:1px solid #ddd;
}

@media(max-width:760px){

  .kgb-board{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .kgb-footer{
    flex-direction:column;
  }
}



/* Controller-Fokus Fotoknigge Tabs */
.kgb-tabs .is-focus{
  outline:4px solid #111;
  outline-offset:4px;
}


/* Fotoknigge Auswertung */
.kgb-scorebox{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.kgb-rating{
  color:#555;
  font-size:.95rem;
  font-weight:700;
}


/* ==========================================================
   QUARTETT – BILDQUELLE / LIZENZ
   ========================================================== */

.quartett-credit{
  display:block;
  padding:.55rem .9rem .75rem;
  font-size:.72rem;
  line-height:1.35;
  color:#aeb7c6;
  overflow-wrap:anywhere;
}

.quartett-credit a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}



/* ==========================================================
   QUARTETT 4.5.1 – CHAOS + COMPACT
   ========================================================== */

.quartett-shell{
  width:min(1240px,100%);
}

.quartett-score{
  margin:.2rem 0 .45rem;
  padding:.42rem .75rem;
}

.quartett-board{
  gap:.6rem;
}

.quartett-board>section>h3{
  margin:.05rem 0 .3rem;
  font-size:1rem;
}

.quartett-card{
  border-radius:16px;
}

.quartett-picture{
  position:relative;
  aspect-ratio:auto;
  height:clamp(150px,22vh,220px);
}

.quartett-picture img{
  padding:4px;
}

.quartett-picture-credit{
  position:absolute;
  z-index:5;
  left:4px;
  right:4px;
  bottom:4px;

  padding:.20rem .35rem;

  border-radius:5px;

  background:rgba(12,16,22,.72);
  color:#b8bec8;

  font-size:.60rem;
  line-height:1.15;

  overflow-wrap:anywhere;
}

.quartett-picture-credit a{
  color:inherit;
  text-decoration:none;
}

.quartett-picture-credit a:hover{
  text-decoration:underline;
}

.quartett-card-head{
  padding:.36rem .58rem .30rem;
}

.quartett-title-line{
  display:flex;
  align-items:center;
  gap:.38rem;
}

.quartett-title-line h3{
  margin:0;
  font-size:1.14rem;
  line-height:1.15;
}

.quartett-name-speak{
  min-height:28px;
  min-width:30px;
  padding:.1rem .28rem;
}

.quartett-origin{
  display:block;
  margin-top:.05rem;
  color:#8db9ed;
  font-style:normal!important;
  font-weight:800;
}

.quartett-values{
  gap:.18rem;
  padding:0 .46rem .36rem;
}

.quartett-value{
  display:grid;

  grid-template-columns:
    minmax(105px,1.35fr)
    minmax(105px,.85fr)
    auto
    30px;

  align-items:center;

  gap:.35rem;

  min-height:38px;

  padding:.30rem .43rem;

  border-radius:9px;
}

.quartett-value-label{
  display:flex;
  align-items:center;
  gap:.25rem;

  min-width:0;
  line-height:1.05;
}

.quartett-number{
  font-size:1.14rem;
  line-height:1;
  font-weight:950;

  text-align:right;
  white-space:nowrap;
}

.quartett-number small{
  font-size:.68rem;
  font-weight:700;
  opacity:.72;
}

.quartett-strength{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.28rem;

  white-space:nowrap;
}

.quartett-bars{
  font-size:.77rem;
  letter-spacing:.04em;
}

.quartett-strength small{
  font-size:.66rem;
}

.quartett-speak{
  display:grid;
  place-items:center;

  width:30px;
  height:27px;

  font-size:.9rem;
}

.quartett-facts{
  margin:.04rem .46rem .34rem;
  padding:.32rem .44rem;
}

.quartett-facts summary{
  font-size:.80rem;
}

.quartett-fact{
  margin:.25rem 0 0;
  padding:.36rem .42rem;
  font-size:.77rem;
}

.quartett-credit{
  display:none!important;
}

.quartett-actions{
  margin:.36rem 0 .15rem;
  gap:.38rem;
}

.quartett-actions button{
  min-height:34px;
  padding:.35rem .6rem;
  font-size:.78rem;
}

.quartett-round-message{
  margin:.2rem auto .35rem;
  padding:.42rem .65rem;
}

.quartett-chaos-result{
  display:block;
  margin-top:.2rem;
  opacity:.75;
  font-weight:700;
}

@media(max-height:850px) and (min-width:761px){

  .quartett-picture{
    height:clamp(135px,19vh,180px);
  }

  .quartett-value{
    min-height:34px;
    padding:.24rem .40rem;
  }

  .quartett-values{
    gap:.14rem;
  }

  .quartett-card-head{
    padding:.26rem .5rem;
  }

  .quartett-number{
    font-size:1.06rem;
  }
}

@media(max-width:900px){

  .quartett-value{
    grid-template-columns:
      minmax(95px,1.2fr)
      minmax(85px,.8fr)
      auto
      28px;
  }

  .quartett-bars{
    font-size:.69rem;
  }
}



/* ==========================================================
   BUZZ QUARTETT 4.6.0
   Kartenstapel / Tendenz / Zuganzeige
   ========================================================== */

.quartett-score{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.65rem;
}

.quartett-score-side{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.32rem;
  min-width:0;
  font-variant-numeric:tabular-nums;
}

.quartett-score-side strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.quartett-score-side b{
  min-width:1.6rem;
  text-align:center;
  font-size:1.08rem;
  font-weight:950;
}

.quartett-score-person{
  flex:0 0 auto;
}

.quartett-score-round{
  opacity:.72;
  white-space:nowrap;
}


/* Drei versetzte Rechtecke = Kartenstapel.
   Kein Burger-Menü, damit keine Navigation suggeriert wird. */
.quartett-stack-icon{
  position:relative;
  display:inline-block;
  flex:0 0 auto;
  width:20px;
  height:18px;
}

.quartett-stack-icon i{
  position:absolute;
  width:12px;
  height:15px;
  border:1.5px solid currentColor;
  border-radius:2px;
  background:var(--panel,#18202b);
}

.quartett-stack-icon i:nth-child(1){
  left:0;
  top:0;
  opacity:.38;
}

.quartett-stack-icon i:nth-child(2){
  left:3px;
  top:1px;
  opacity:.65;
}

.quartett-stack-icon i:nth-child(3){
  left:6px;
  top:2px;
}


.quartett-trend{
  display:inline-block;
  min-width:18px;
  font-size:1.2rem;
  font-weight:1000;
  line-height:1;
  animation:quartett-trend-pop .2s ease-out;
}

.quartett-trend-up{
  color:#35c46a;
}

.quartett-trend-down{
  color:#ef5350;
}

@keyframes quartett-trend-pop{
  from{
    opacity:0;
    transform:scale(.55);
  }

  to{
    opacity:1;
    transform:scale(1);
  }
}


.quartett-round-message{
  min-height:2.2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-weight:850;
}


/* Auf kleinen Displays weiterhin kompakt. */
@media(max-width:700px){

  .quartett-score{
    gap:.25rem;
  }

  .quartett-score-side{
    gap:.18rem;
    font-size:.78rem;
  }

  .quartett-score-round{
    font-size:.72rem;
  }

  .quartett-stack-icon{
    transform:scale(.82);
  }

}



/* ==========================================================
   QUARTETT 4.6.3 – FULLSCREEN SETUP
   ========================================================== */

/*
 * Eine ältere generische Memory-Vollbildregel blendet
 * #gameOptions im Vollbild grundsätzlich aus.
 *
 * Für Quartett muss das Setup sichtbar bleiben, solange
 * es nicht über das hidden-Attribut abgeschaltet wurde.
 */
.game-dialog.game-expanded
  #gameOptions:not([hidden]):has(#qDeck),

.game-dialog:fullscreen
  #gameOptions:not([hidden]):has(#qDeck){

  display:flex !important;
  flex-wrap:wrap !important;
  align-items:end !important;
  justify-content:center !important;

  gap:.45rem !important;

  max-height:34dvh !important;
  overflow-y:auto !important;

  margin:0 auto .45rem !important;
  padding:.35rem !important;
}


/* Setup-Felder im Vollbild kompakt halten. */
.game-dialog.game-expanded
  #gameOptions:not([hidden]):has(#qDeck) label,

.game-dialog:fullscreen
  #gameOptions:not([hidden]):has(#qDeck) label{

  flex:1 1 180px !important;
  min-width:150px !important;
  max-width:260px !important;
}


/* Spielbutton muss auch bei 100 % sichtbar bleiben. */
.game-dialog.game-expanded
  #gameOptions:not([hidden]):has(#qDeck) #qStart,

.game-dialog:fullscreen
  #gameOptions:not([hidden]):has(#qDeck) #qStart{

  flex:0 0 auto !important;
  min-height:42px !important;
}


/* Laufende Quartett-Aktionsleiste kompakt. */
.game-dialog.game-expanded .quartett-actions,
.game-dialog:fullscreen .quartett-actions{

  margin:.25rem 0 !important;
  gap:.3rem !important;
}

.game-dialog.game-expanded .quartett-actions button,
.game-dialog:fullscreen .quartett-actions button{

  padding:.32rem .55rem !important;
  min-height:34px !important;
  font-size:.76rem !important;
}



/* ==========================================================
   BUZZ QUARTETT 4.7.0
   Ergebnis bleibt offen bis ACTION
   ========================================================== */

.quartett-count-lead{
  color:#39d56f;
}

.quartett-count-trail{
  color:#f05b5b;
}

.quartett-count-tie{
  color:inherit;
}


#qContinue{
  font-weight:900;
}


/*
 * Während beide Karten offen liegen soll die Vergleichsphase
 * bewusst ruhig wirken.
 */
.quartett-card .quartett-value.selected{
  position:relative;
  z-index:2;
}


/*
 * Aktuell verglichener Wert bleibt auf beiden Karten
 * deutlich sichtbar.
 */
.quartett-card .quartett-value.selected{
  outline:3px solid rgba(239,68,68,.92);
  outline-offset:-2px;
}


/*
 * Der Weiter-Button ist nur eine Maus-/Touch-Alternative.
 * Am Buzz-Controller bleibt ACTION die einzige notwendige Taste.
 */
.quartett-actions #qContinue{
  min-width:130px;
}



/* ==========================================================
   BUZZ QUARTETT 4.7.1 – CONTROLLER-FOKUS
   ========================================================== */

/*
 * Befindet sich der Controller-Fokus auf dem Kartennamen,
 * wird der Name klar rot hervorgehoben.
 */
.quartett-shell.quartett-focus-name
.quartett-card.player
.quartett-card-name,
.quartett-shell.quartett-focus-name
.quartett-card.player
.quartett-name{
  outline:3px solid #ef4444;
  outline-offset:3px;
  border-radius:8px;
}



/* ==========================================================
   BUZZ QUARTETT 4.7.2
   Sichtbarer Controller-Fokus
   ========================================================== */

/*
 * Fokus auf Kartenname:
 * nicht nur intern, sondern klar sichtbar um den gesamten
 * Titelbereich herum.
 */
.quartett-title-line.controller-focus-name{
  position:relative;

  border-radius:9px;

  outline:3px solid #ef4444;
  outline-offset:3px;

  padding:.18rem .30rem;

  background:
    rgba(239,68,68,.06);
}


/*
 * RIGHT = Vorlesen:
 * Lautsprecher bekommt kurzfristig den roten Rahmen.
 */
.quartett-name-speak.controller-focus-speaker,
.quartett-speak.controller-focus-speaker{
  position:relative;

  border-radius:7px;

  outline:3px solid #ef4444 !important;
  outline-offset:2px !important;

  box-shadow:
    0 0 0 5px rgba(239,68,68,.16) !important;
}


/*
 * Der normale Kategorie-Fokus bleibt bestehen.
 * Speaker-Impuls darf ihn optisch kurz überlagern,
 * verändert aber selectedCat nicht.
 */
.quartett-speak{
  transition:
    outline .12s ease,
    box-shadow .12s ease;
}



/* ==========================================================
   BUZZ QUARTETT 4.7.3 – PAUSE / CONTROLLER-HILFE
   ========================================================== */

.quartett-controller-help{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;

  gap:.28rem .72rem;

  margin:.3rem auto .15rem;
  padding:.38rem .55rem;

  max-width:980px;

  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;

  background:rgba(8,14,25,.58);

  font-size:.72rem;
  line-height:1.25;

  color:rgba(255,255,255,.68);
}

.quartett-controller-help span{
  white-space:nowrap;
}


/*
 * Pausenstatus bewusst deutlich sichtbar.
 */
.quartett-shell.quartett-paused
.quartett-round-message{
  border-color:
    rgba(250,204,21,.45);

  background:
    rgba(250,204,21,.09);

  color:#fde68a;
}


/*
 * Während Pause sollen fokussierbare Kartenbereiche
 * nicht wie aktive Bedienelemente wirken.
 */
.quartett-shell.quartett-paused
.quartett-value.selectable{
  cursor:default;
}


/* Kleine Displays */
@media(max-width:700px){

  .quartett-controller-help{
    gap:.18rem .45rem;
    padding:.28rem .4rem;
    font-size:.64rem;
  }

}



/* CIRCUIT SCRAMBLE BASIC 1.0 START */

/* ============================================================
   CIRCUIT SCRAMBLE BASIC
   ============================================================ */

.circuit-shell{
  width:min(100%,1100px);
  margin:auto;
  display:grid;
  gap:10px;
}

.circuit-hud{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.circuit-hud>div{
  padding:7px 12px;
  border:1px solid #3b4350;
  border-radius:10px;
  background:#151a22;
}

.circuit-hud strong{
  color:#fff;
}

.circuit-stars,
.circuit-success-stars{
  color:#ffd166;
  letter-spacing:.15em;
  font-size:1.25rem;
}

.circuit-info{
  display:grid;
  gap:3px;
  text-align:center;
}

.circuit-info strong{
  font-size:1.15rem;
}

.circuit-info span{
  opacity:.78;
  font-size:.9rem;
}

.circuit-board-shell{
  position:relative;

  width:min(100%,1000px);

  aspect-ratio:1000 / 620;

  margin:auto;

  overflow:hidden;

  border:1px solid #3a4654;
  border-radius:16px;

  background:
    radial-gradient(
      circle at 50% 50%,
      #202936 0,
      #151b23 55%,
      #0f1318 100%
    );
}

.circuit-board,
.circuit-wires{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.circuit-wires{
  z-index:1;
}

.circuit-board{
  z-index:2;
}

.circuit-wire{
  fill:none;
  stroke:#44505e;
  stroke-width:8;
  stroke-linecap:round;
}

.circuit-wire.on{
  stroke:#ffd166;
  filter:
    drop-shadow(
      0 0 5px #ffd166
    );
}

.circuit-node{
  position:absolute;

  transform:
    translate(
      -50%,
      -50%
    );

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  user-select:none;
}

.circuit-input{
  width:66px;
  height:66px;

  border:4px solid #687586;
  border-radius:50%;

  background:#28313c;

  font-weight:1000;
  font-size:1.05rem;
}

.circuit-input.on{
  color:#171717;
  border-color:#ffd166;
  background:#c58a16;
}

.circuit-input.selected{
  outline:5px solid #e53935;
  outline-offset:6px;

  box-shadow:
    0 0 28px
    rgba(229,57,53,.7);
}

.circuit-gate{
  width:88px;
  height:54px;

  padding:4px;

  border:3px solid #687586;
  border-radius:12px;

  background:#222b35;

  font-weight:1000;
  font-size:.92rem;
}

.circuit-output{
  width:68px;
  height:68px;

  border:5px solid #59636e;
  border-radius:50%;

  background:#292e34;

  font-size:1.55rem;
}

.circuit-output.on{
  color:#161616;
  border-color:#ffe49b;
  background:#ffd166;

  box-shadow:
    0 0 32px
    rgba(255,209,102,.85);
}

.circuit-success{
  position:absolute;
  inset:0;
  z-index:10;

  place-items:center;

  background:
    rgba(
      5,
      8,
      12,
      .82
    );
}

.circuit-success:not([hidden]){
  display:grid;
}

.circuit-success>div{
  min-width:min(80%,380px);

  padding:24px 30px;

  text-align:center;

  border:1px solid #596575;
  border-radius:18px;

  background:#202832;

  box-shadow:
    0 18px 50px #0009;
}

.circuit-success-check{
  display:block;

  font-size:3.5rem;
  line-height:1;

  margin-bottom:.25rem;
}

.circuit-success strong{
  display:block;
  font-size:1.4rem;
}

.circuit-success-stars{
  margin:.55rem 0;
  font-size:1.8rem;
}

.circuit-success p{
  margin:.4rem 0;
}

.circuit-success small{
  opacity:.7;
}

.circuit-help{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:7px 12px;

  font-size:.86rem;
  opacity:.78;
}


/* Spielmodal für Circuit größer */
.game-dialog.circuit-expanded{
  width:min(96vw,1180px);
  max-width:1180px;
}


/* Vollbild */
.game-dialog.circuit-expanded.game-expanded #gameStage,
.game-dialog.circuit-expanded:fullscreen #gameStage{
  flex:1 1 auto;

  width:100%;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}

.game-dialog.circuit-expanded.game-expanded .circuit-shell,
.game-dialog.circuit-expanded:fullscreen .circuit-shell{
  height:100%;

  align-content:center;
}

.game-dialog.circuit-expanded.game-expanded .circuit-board-shell,
.game-dialog.circuit-expanded:fullscreen .circuit-board-shell{
  width:auto;

  height:min(
    66dvh,
    720px
  );

  max-width:94vw;

  aspect-ratio:1000 / 620;
}


/* Mobil */
@media(max-width:700px){

  .circuit-input{
    width:52px;
    height:52px;

    border-width:3px;

    font-size:.85rem;
  }

  .circuit-input.selected{
    outline-width:4px;
    outline-offset:4px;
  }

  .circuit-gate{
    width:68px;
    height:44px;

    border-width:2px;

    font-size:.72rem;
  }

  .circuit-output{
    width:52px;
    height:52px;

    border-width:4px;
  }

  .circuit-wire{
    stroke-width:6;
  }

  .circuit-help{
    font-size:.75rem;
  }

  .game-dialog.circuit-expanded{
    width:99vw;
  }
}

/* CIRCUIT SCRAMBLE BASIC 1.0 END */



/* ============================================================
   CIRCUIT SCRAMBLE – VERTIKALER STROMFLUSS
   ============================================================ */

/*
 * Eingänge werden als echte Schalter visualisiert.
 * A/B/C/D bleiben zur eindeutigen Zuordnung erhalten.
 */
.circuit-input{
  flex-direction:column;
  gap:0;
  line-height:1;
}

.circuit-switch-symbol{
  display:block;
  font-size:1.35rem;
  line-height:1;
}

.circuit-input-label{
  display:block;
  margin-top:3px;
  font-size:.72rem;
  font-weight:1000;
  opacity:.9;
}


/*
 * Ausgang ist jetzt eine Lampe.
 */
.circuit-output{
  font-size:2rem;
  filter:grayscale(1);
  opacity:.72;
}

.circuit-output.on{
  filter:none;
  opacity:1;
  transform:
    translate(
      -50%,
      -50%
    )
    scale(1.12);

  box-shadow:
    0 0 20px rgba(255,209,102,.75),
    0 0 48px rgba(255,209,102,.45);
}


/*
 * Leitungen wirken etwas stärker wie ein Strompfad.
 */
.circuit-wire{
  transition:
    stroke .15s ease,
    filter .15s ease;
}

.circuit-wire.on{
  filter:
    drop-shadow(0 0 4px #ffd166)
    drop-shadow(0 0 8px rgba(255,209,102,.55));
}


@media(max-width:700px){

  .circuit-switch-symbol{
    font-size:1.05rem;
  }

  .circuit-input-label{
    margin-top:2px;
    font-size:.62rem;
  }

  .circuit-output{
    font-size:1.55rem;
  }

}

/* ============================================================
   BUZZ WEBGAMES · PAULINAS AUFZUG · 2026-09-01
   ============================================================ */

.elevator-shell{
  width:100%;
  max-width:980px;
  margin:0 auto;
}

.elevator-top{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
  margin-bottom:1rem;
}

.elevator-top h3{
  margin:.2rem 0;
  font-size:clamp(1.7rem,4vw,2.7rem);
}

.elevator-badge{
  display:inline-block;
  padding:.3rem .65rem;
  border-radius:999px;
  background:#e53935;
  color:#111;
  font-weight:900;
}

.elevator-task{
  font-size:clamp(1.15rem,2.5vw,1.6rem);
  font-weight:850;
}

.elevator-game{
  display:grid;
  grid-template-columns:minmax(220px,.85fr) minmax(300px,1.15fr);
  gap:clamp(16px,3vw,32px);
  align-items:stretch;
}

.elevator-building,
.elevator-panel{
  background:#191922;
  border:1px solid #363645;
  border-radius:20px;
  padding:18px;
}

.elevator-display{
  background:#08080c;
  border:2px solid #555;
  border-radius:12px;
  padding:.65rem;
  text-align:center;
}

.elevator-display span{
  display:block;
  font-size:.72rem;
  letter-spacing:.16em;
  opacity:.65;
}

.elevator-display strong{
  display:block;
  margin-top:.2rem;
  color:#ff4040;
  font:900 clamp(2.4rem,6vw,4rem)/1 monospace;
}

.elevator-shaft{
  position:relative;
  height:440px;
  max-height:52vh;
  min-height:300px;
  margin:1rem auto;
  width:min(100%,230px);
  background:
    repeating-linear-gradient(
      to bottom,
      #0c0c11 0,
      #0c0c11 calc(9.09% - 1px),
      #343442 calc(9.09% - 1px),
      #343442 9.09%
    );
  border:4px solid #5c5c68;
  border-radius:12px;
  overflow:hidden;
}

.elevator-car{
  position:absolute;
  left:14%;
  width:72%;
  height:48px;
  display:grid;
  place-items:center;
  border:3px solid #aaa;
  border-radius:8px;
  background:
    linear-gradient(90deg,#86868c,#d7d7dc,#86868c);
  transition:bottom .6s ease;
  font-size:1.65rem;
}

.elevator-reward{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.45rem;
  flex-wrap:wrap;
}

.elevator-reward span{
  font-size:1.8rem;
}

.elevator-reward strong{
  font-size:1.55rem;
}

.elevator-reward small{
  opacity:.7;
}

.elevator-floor-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.elevator-floor-button{
  min-height:72px;
  padding:.5rem .65rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.7rem;
  color:#fff;
  background:linear-gradient(#383843,#22222b);
  border:2px solid #70707b;
  border-radius:9px;
  box-shadow:
    inset 0 1px 0 #ffffff24,
    0 3px 5px #0007;
  touch-action:manipulation;
}

.elevator-floor-button:active{
  transform:translateY(2px);
}

.elevator-floor-button.ground{
  border-color:#ff3131;
  box-shadow:
    0 0 0 3px #ff313144,
    inset 0 1px 0 #ffffff24;
}

.elevator-floor-number{
  font-size:clamp(1.7rem,4vw,2.5rem);
  font-weight:950;
  line-height:1;
}

.elevator-floor-button small{
  display:block;
  font-size:.7rem;
  opacity:.72;
}

.elevator-dice{
  width:36px;
  height:36px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:2px;
}

.elevator-dice i{
  width:7px;
  height:7px;
  place-self:center;
  border-radius:50%;
  background:transparent;
}

.elevator-dice i.on{
  background:#fff;
  box-shadow:0 0 3px #fff8;
}

.elevator-decoration-row{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr 1.15fr 1fr;
  gap:10px;
  align-items:stretch;
}

.elevator-decoration-row .elevator-floor-button{
  width:100%;
}

.elevator-fake-button,
.elevator-emergency{
  display:grid;
  place-items:center;
  min-height:72px;
  border:2px solid #6b6b74;
  border-radius:9px;
  background:#262630;
  color:#aaa;
  font-size:1.25rem;
  user-select:none;
  pointer-events:none;
}

.elevator-emergency{
  grid-column:1 / -1;
  width:72px;
  min-height:58px;
  justify-self:center;
  border-radius:50%;
  color:#f2c94c;
}

.elevator-new-trip{
  display:block;
  width:100%;
  margin-top:1rem;
  font-size:1.15rem;
}

@media(max-width:760px){
  .elevator-game{
    grid-template-columns:1fr;
  }

  .elevator-building{
    display:grid;
    grid-template-columns:120px 1fr;
    gap:12px;
    align-items:center;
  }

  .elevator-display{
    grid-column:1;
  }

  .elevator-shaft{
    grid-column:2;
    grid-row:1 / span 2;
    height:260px;
    min-height:260px;
    margin:0 auto;
  }

  .elevator-reward{
    grid-column:1;
  }

  .elevator-floor-button{
    min-height:66px;
  }
}


/* ============================================================
   PAULINAS AUFZUG · STARTMODI 4.0
   ============================================================ */

.elevator-start-actions{
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
}

.elevator-start-actions .play{
  flex:1 1 150px;
}

/*
 * Zahlen lernen:
 * nur Bedienpanel, keine Hotel-/Schachtvisualisierung.
 */
.elevator-game.learning-mode{
  display:block;
}

.elevator-game.learning-mode .elevator-building{
  display:none !important;
}

.elevator-game.learning-mode .elevator-panel{
  width:min(100%,560px);
  margin:0 auto;
}

/*
 * Volles Aufzugspiel:
 * beide Bereiche sichtbar.
 */
.elevator-game.full-mode .elevator-building{
  display:block;
}

/*
 * Mobile:
 * learning bleibt reduziert,
 * full bleibt bewusst vollständig.
 */
@media(max-width:760px){

  .elevator-game.learning-mode{
    display:block;
  }

  .elevator-game.learning-mode .elevator-building{
    display:none !important;
  }

  .elevator-game.learning-mode .elevator-panel{
    width:100%;
    max-width:520px;
    margin:0 auto;
  }

  .elevator-game.full-mode{
    display:grid;
    grid-template-columns:1fr;
  }

  .elevator-game.full-mode .elevator-building{
    display:block !important;
  }

  .elevator-game.full-mode .elevator-panel{
    width:100%;
    max-width:520px;
    margin:0 auto;
  }
}


/* ============================================================
   PAULINAS AUFZUG · FAHRTANZEIGE 6.0
   ============================================================ */

/* aktuelle Etage während der Fahrt */
.elevator-floor-button.current-floor{
  border-color:#ff3030 !important;

  background:
    linear-gradient(
      #563034,
      #2e2024
    ) !important;

  box-shadow:
    0 0 0 4px #ff303055,
    0 0 18px #ff303088,
    inset 0 1px 0 #ffffff30 !important;
}

.elevator-floor-button.current-floor
.elevator-floor-number{
  color:#ff6666 !important;
}

/* Ziel erreicht */
.elevator-floor-button.target-reached{
  border-color:#39d66a !important;

  background:
    linear-gradient(
      #245a35,
      #173c25
    ) !important;

  box-shadow:
    0 0 0 4px #39d66a55,
    0 0 20px #39d66a88,
    inset 0 1px 0 #ffffff30 !important;
}

.elevator-floor-button.target-reached
.elevator-floor-number{
  color:#72ff9a !important;
}


/* ============================================================
   PAULINAS AUFZUG · MOBILE KELLERPOSITION
   -1 exakt zentriert unter 0 / Erdgeschoss
   ============================================================ */

@media(max-width:760px){

  .elevator-floor-grid >
  .elevator-floor-button[data-floor="-1"]{
    grid-column:1 / -1;

    /*
     * Die 0 liegt in der mittleren Spalte der
     * 1fr / 1.15fr / 1fr-Türzeile.
     */
    width:36.5%;
    min-width:0;

    justify-self:center;
  }
}


/* ============================================================
   PAULINAS AUFZUG · MOBILE -1 FIX
   ============================================================ */

@media(max-width:760px){

  .elevator-floor-grid >
  .elevator-floor-button[data-floor="-1"]{
    grid-column:1 / -1 !important;
    justify-self:center !important;

    width:50% !important;
    max-width:220px;
    min-width:140px;

    margin-left:auto !important;
    margin-right:auto !important;
  }
}