/* STYLES: AUSBRUCH — verstecktes Spiel */

body.ab-gesperrt{ overflow:hidden; }

.ab-overlay{
  position:fixed; inset:0; z-index:400;
  display:none; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(6,12,20,0.86); backdrop-filter:blur(6px);
}
.ab-overlay.ab-offen{ display:flex; }

.ab-box{
  width:min(560px,100%); max-height:min(760px,92svh); max-height:min(760px,92vh);
  overflow-y:auto;
  background:var(--bg); border:1px solid rgba(94,234,212,0.4);
  padding:20px 22px 22px;
  scrollbar-width:thin; scrollbar-color:var(--line-bright) transparent;
}
.ab-box::-webkit-scrollbar{ width:9px; }
.ab-box::-webkit-scrollbar-thumb{ background:var(--line-bright); border-radius:2px; }

/* Kopfzeile */
.ab-kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.ab-titel{
  font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:600;
  letter-spacing:0.06em; color:var(--accent);
}
.ab-untertitel{
  display:block; margin-top:5px;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:400;
  letter-spacing:0.08em; color:var(--text-muted);
}
.ab-schliessen{
  flex:0 0 auto; width:30px; height:30px; line-height:1;
  background:transparent; border:1px solid var(--border); border-radius:2px;
  color:var(--text-muted); font-size:18px; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.ab-schliessen:hover{ border-color:#FF7B72; color:#FF7B72; }

/* Spielfeld */
.ab-buehne{ margin-top:18px; display:flex; justify-content:center; }
.ab-brett{
  --ab-zelle: clamp(26px, 7.5vw, 42px);
  --ab-fuge: 3px;
  /* Ringsum Platz fuer die Ausbruchsluecke, die ausserhalb des Rasters
     liegt — sonst wuerde sie am Fensterrand abgeschnitten. */
  margin: calc(var(--ab-zelle) + 6px);
  position:relative;
  display:grid;
  grid-template-columns:16px repeat(var(--ab-spalten), var(--ab-zelle));
  grid-template-rows:14px repeat(var(--ab-zeilen), var(--ab-zelle));
  gap:var(--ab-fuge);
}
.ab-kopfspalte, .ab-kopfzeile{
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:9.5px; color:#4E6580;
}

.ab-zelle{
  background:var(--card-bg); border:1px solid var(--border); border-radius:1px;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace;
  font-size:calc(var(--ab-zelle) * 0.155); color:#FF7B72;
  overflow:hidden;
}
/* verbundene Zelle — nicht betretbar */
.ab-block{
  background:
    repeating-linear-gradient(45deg, rgba(143,169,192,0.16) 0 3px, transparent 3px 7px),
    #16283C;
  border-color:var(--line-bright);
}
/* zerbrochener Bezug — die eigene Spur */
.ab-spur{
  background:rgba(255,123,114,0.08); border-color:rgba(255,123,114,0.32);
}

/* Die Kachel: liegt über dem Raster und gleitet */
.ab-kachel, .ab-ausgang{
  position:absolute; width:var(--ab-zelle); height:var(--ab-zelle);
  left:calc(16px + var(--ab-fuge)); top:calc(14px + var(--ab-fuge));
  transform:translate(
    calc(var(--ab-x) * (var(--ab-zelle) + var(--ab-fuge))),
    calc(var(--ab-y) * (var(--ab-zelle) + var(--ab-fuge)))
  );
}
.ab-kachel{
  background:var(--accent); border-radius:2px; z-index:3;
  box-shadow:0 0 0 1px rgba(94,234,212,0.35), 0 6px 18px rgba(0,0,0,0.45);
  transition:transform 0.26s cubic-bezier(.3,.9,.35,1), opacity 0.3s ease;
}
.ab-kachel.ab-raus{ opacity:0; transition:transform 0.3s ease-in, opacity 0.3s ease-in 0.12s; }
.ab-kachel.ab-stoss{ animation:ab-stoss 0.24s ease; }
@keyframes ab-stoss{
  0%,100%{ box-shadow:0 0 0 1px rgba(94,234,212,0.35), 0 6px 18px rgba(0,0,0,0.45); }
  50%{ box-shadow:0 0 0 3px rgba(255,123,114,0.55), 0 6px 18px rgba(0,0,0,0.45); }
}

/* Ausbruchslücke im Rand */
.ab-ausgang{
  z-index:2; display:flex; align-items:center; justify-content:center;
  border:1px dashed rgba(94,234,212,0.7); border-radius:2px;
  background:rgba(94,234,212,0.07);
  font-family:'JetBrains Mono',monospace;
  font-size:calc(var(--ab-zelle) * 0.4); color:var(--accent);
  animation:ab-puls 1.9s ease-in-out infinite;
}
@keyframes ab-puls{ 0%,100%{ opacity:0.55; } 50%{ opacity:1; } }
/* Zum Raster hin ist die Luecke offen — dort fehlt die Kante */
.ab-ausgang-rechts{ border-left-color:transparent; }
.ab-ausgang-links{ border-right-color:transparent; }
.ab-ausgang-oben{ border-bottom-color:transparent; }
.ab-ausgang-unten{ border-top-color:transparent; }

/* Fußzeile */
.ab-fuss{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding-top:14px; border-top:1px solid var(--border);
}
.ab-zuege{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-muted); }
.ab-zuege strong{ color:var(--text); font-weight:500; }
.ab-par{ margin-left:10px; opacity:0.7; }
.ab-knoepfe{ display:flex; gap:8px; }
.ab-btn{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text);
  background:transparent; border:1px solid var(--border); border-radius:2px;
  padding:7px 13px; cursor:pointer; appearance:none; -webkit-appearance:none;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.ab-btn:hover{ border-color:var(--accent); background:var(--accent-soft); }
.ab-btn-haupt{
  margin-top:14px; color:var(--bg); background:var(--accent); border-color:var(--accent);
  padding:10px 20px; font-size:13px;
}
.ab-btn-haupt:hover{ background:var(--accent); border-color:var(--accent); }

/* Steuerkreuz */
.ab-kreuz{
  margin-top:16px;
  display:grid; grid-template-columns:repeat(3,40px); grid-template-rows:repeat(2,36px);
  gap:6px; justify-content:center;
}
.ab-pfeil{
  background:transparent; border:1px solid var(--border); border-radius:2px;
  color:var(--text-muted); font-size:15px; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.ab-pfeil:hover{ border-color:var(--accent); color:var(--accent); }
.ab-oben{ grid-column:2; grid-row:1; }
.ab-links{ grid-column:1; grid-row:2; }
.ab-unten{ grid-column:2; grid-row:2; }
.ab-rechts{ grid-column:3; grid-row:2; }

/* Legende und Hilfe */
.ab-legende{
  margin-top:16px; display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--text-muted);
}
.ab-legende span{ display:flex; align-items:center; gap:6px; }
.ab-legende i{ width:11px; height:11px; border-radius:1px; flex:0 0 auto; }
.ab-l-kachel{ background:var(--accent); }
.ab-l-block{ background:#16283C; border:1px solid var(--line-bright); }
.ab-l-spur{ background:rgba(255,123,114,0.14); border:1px solid rgba(255,123,114,0.4); }
.ab-l-raus{ border:1px dashed rgba(94,234,212,0.8); }

.ab-hilfe{
  margin-top:14px; font-size:12px; line-height:1.65; color:var(--text-muted);
  text-align:center; max-width:430px; margin-left:auto; margin-right:auto;
}

/* Meldung nach Sieg oder Sackgasse */
.ab-meldung{
  margin-top:16px; padding:18px 20px; text-align:center;
  border:1px solid rgba(94,234,212,0.4); background:var(--accent-soft);
}
.ab-meldung strong{
  font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:600; color:var(--text);
}
.ab-meldung p{ margin-top:9px; font-size:13px; line-height:1.6; color:var(--text-muted); }

/* Auf schmalen Geräten die Zellbeschriftung weglassen — sie wird unlesbar */
@media (max-width:520px){
  .ab-box{ padding:16px 14px 18px; }
  .ab-zelle{ font-size:0; }
  .ab-hilfe{ font-size:11.5px; }
}

@media (prefers-reduced-motion: reduce){
  .ab-kachel{ transition:none; }
  .ab-ausgang{ animation:none; opacity:0.9; }
  .ab-kachel.ab-stoss{ animation:none; }
}