/* ============================================================================
   Burger-Turm — game.css   (Hochformat-Vollbild, Safe-Area, keine Zoom-/Scrollgesten)
   ============================================================================ */
[hidden] { display: none !important; }   /* sonst ueberschreibt display:flex/grid das hidden-Attribut */
:root { --bg: #160a0e; --cream: #fff4dc; --gold: #f2c24b; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; overscroll-behavior: none; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--cream);
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; touch-action: manipulation;
}
#bt-app { position: fixed; inset: 0; overflow: hidden; }
#bt-canvas { position: absolute; inset: 0; display: block; touch-action: none; cursor: pointer; }

/* ---------- Kopfleiste ---------- */
.bt-hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5; pointer-events: none;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) calc(env(safe-area-inset-right, 0px) + 12px) 0 calc(env(safe-area-inset-left, 0px) + 12px);
}
.bt-btn {
  pointer-events: auto; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(22, 10, 14, .38); color: #fff;
  display: grid; place-items: center; text-decoration: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.bt-btn svg { width: 22px; height: 22px; }
.bt-scorebox { text-align: center; transition: opacity .35s ease; }
.bt-score {
  font-size: 56px; font-weight: 900; line-height: 1; color: #fff; font-variant-numeric: tabular-nums;
  /* dunkle Kontur + Schein: bleibt auf hellem Tageshimmel UND auf Nachthimmel lesbar */
  text-shadow: 0 2px 0 rgba(70, 25, 10, .45), 0 0 2px rgba(40, 14, 8, .6), 0 4px 18px rgba(0, 0, 0, .4);
}
.bt-score.pop { animation: btpop .3s ease-out; }
@keyframes btpop { 0% { transform: scale(1); } 35% { transform: scale(1.2); } 100% { transform: scale(1); } }
/* Perfekt-Serie: 3 Punkte, gefuellt = Treffer in Folge; bei 3 Aufleuchten (Schicht waechst) */
.bt-streak { display: flex; justify-content: center; gap: 7px; margin-top: 7px; height: 10px; }
.bt-streak i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .3);
  box-shadow: inset 0 0 0 1.5px rgba(40, 14, 8, .35), 0 1px 3px rgba(0, 0, 0, .25); transition: background .18s ease, transform .18s ease; }
.bt-streak i.on { background: #ffd24a; box-shadow: 0 0 7px rgba(255, 210, 74, .85), inset 0 0 0 1.5px rgba(120, 60, 0, .35); transform: scale(1.12); }
.bt-streak.full i { animation: btpip .65s ease-out; }
@keyframes btpip { 0% { transform: scale(1.1); } 40% { transform: scale(1.7); background: #fff3b0; } 100% { transform: scale(1.1); } }
.bt-level {
  display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: rgba(22, 10, 14, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bt-best { margin-top: 4px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(40, 14, 8, .7), 0 1px 8px rgba(0, 0, 0, .45); }
/* nur fuer Test-Screenshots (?notrans=1, lokal): keine Uebergaenge -> stabile Bilder */
.bt-notrans *, .bt-notrans *::before, .bt-notrans *::after { transition: none !important; animation: none !important; }
.is-start .bt-scorebox, .is-over .bt-scorebox { opacity: 0; }   /* Ende: Punktzahl steht in der Karte */

/* ---------- Level-Banner ---------- */
.bt-banner {
  position: absolute; left: 50%; top: 23%; z-index: 6; pointer-events: none; text-align: center; white-space: nowrap;
  transform: translate(-50%, -12px) scale(.86); opacity: 0;
  transition: opacity .3s ease, transform .45s cubic-bezier(.2, 1.5, .35, 1);
  padding: 14px 26px 16px; border-radius: 18px; background: rgba(24, 10, 16, .58);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(242, 194, 75, .5); box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.bt-banner.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.bt-banner .k { font-size: 12px; font-weight: 900; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.bt-banner .n { font-size: 28px; font-weight: 900; margin: 2px 0 4px; color: #fff; }
.bt-banner .b { font-size: 13px; font-weight: 700; color: #cdf5b6; }

/* ---------- Karten (Start / Ende) ---------- */
.bt-card {
  position: absolute; left: 50%; transform: translateX(-50%); width: min(92vw, 400px); z-index: 7;
  padding: 18px 20px 14px; text-align: center; border-radius: 22px;
  background: rgba(22, 10, 14, .74); border: 1px solid rgba(255, 244, 220, .14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
}
.bt-start { top: calc(env(safe-area-inset-top, 0px) + 64px); }
.bt-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 244, 220, .7); }
.bt-title {
  margin: 4px 0 2px; font-size: 44px; font-weight: 900; line-height: 1.02;
  background: linear-gradient(180deg, #ffe9a8 0%, #f2c24b 45%, #d9822b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(90, 30, 10, .55));
}
.bt-sub { margin: 6px 0 14px; font-size: 15px; color: rgba(255, 244, 220, .92); }
.bt-cta {
  display: inline-flex; align-items: center; justify-content: center; min-width: 200px; height: 54px; padding: 0 26px;
  border: 0; border-radius: 999px; cursor: pointer; color: #2a1206;
  font: 900 19px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .02em;
  background: linear-gradient(180deg, #ffd66b, #f2a93b); box-shadow: 0 6px 0 #b45f1d, 0 12px 26px rgba(0, 0, 0, .35);
}
.bt-cta:active { transform: translateY(4px); box-shadow: 0 2px 0 #b45f1d, 0 6px 16px rgba(0, 0, 0, .35); }
.bt-how { list-style: none; margin: 16px 0 6px; padding: 0; font-size: 13px; line-height: 1.45; color: rgba(255, 244, 220, .86); text-align: left; }
.bt-how li { position: relative; padding-left: 20px; margin: 4px 0; }
.bt-how li::before { content: ''; position: absolute; left: 4px; top: .5em; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); }
.bt-how b { color: #fff; }
.bt-legal { margin: 10px 0 0; font-size: 11px; opacity: .6; }
.bt-legal a, .bt-link { color: inherit; }

/* bottom 54 px: Platz fuer die festen Spielhallen-Knoepfe unten (Zahnrad rechts, "Mein Gewinncode" links, hs-play.js) */
.bt-over { bottom: calc(env(safe-area-inset-bottom, 0px) + 54px); padding-bottom: 16px; animation: btup .45s cubic-bezier(.2, 1.2, .4, 1); }
@keyframes btup { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.bt-over-k { font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 244, 220, .7); }
.bt-over-score { font-size: 64px; font-weight: 900; line-height: 1.05; color: #fff; font-variant-numeric: tabular-nums; }
.bt-over-meta { font-size: 13px; color: rgba(255, 244, 220, .82); margin-bottom: 2px; }
.bt-over-level { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: rgba(255, 214, 140, .8); margin-bottom: 8px; }
.bt-over-best { font-size: 14px; font-weight: 800; color: rgba(255, 244, 220, .75); margin-bottom: 14px; }
.bt-over-best.is-new { color: var(--gold); animation: btglow 1.2s ease-in-out infinite alternate; }
@keyframes btglow { from { text-shadow: 0 0 0 rgba(242, 194, 75, 0); } to { text-shadow: 0 0 14px rgba(242, 194, 75, .85); } }
.bt-link { display: block; margin-top: 12px; font-size: 13px; opacity: .75; }
/* Ergebnis teilen (Bild mit Burgerhoehe, /teilen.js): zweiter, leiserer Knopf unter "Nochmal" */
.bt-share {
  display: inline-flex; align-items: center; justify-content: center; min-width: 200px; height: 44px; margin-top: 12px; padding: 0 20px;
  border: 2px solid rgba(242, 194, 75, .85); border-radius: 999px; cursor: pointer; background: rgba(242, 194, 75, .12);
  color: #ffe9a6; font: 800 16px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.bt-share:active { transform: translateY(2px); background: rgba(242, 194, 75, .22); }
/* Endkarte: "Eintragen" + "Teilen" nebeneinander (V0.5) — sichtbar ist, was es fuer diesen Lauf gibt */
.bt-row2 { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.bt-row2 .bt-share { flex: 1 1 0; min-width: 0; margin-top: 0; padding: 0 10px; font-size: 15px; white-space: nowrap; }
.bt-row2:not(:has(.bt-share:not([hidden]))) { display: none; }
.bt-linkbtn { display: inline-block; margin-top: 10px; padding: 6px 10px; border: 0; background: none; cursor: pointer;
  color: #ffe9a6; font: 800 14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Bestenliste (Dialog) ---------- */
.bt-hs { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: 16px;
  background: rgba(12, 6, 8, .62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.bt-hs-card { width: min(92vw, 380px); max-height: calc(100vh - 32px); overflow: auto; padding: 14px 16px 16px; border-radius: 20px;
  background: rgba(30, 14, 18, .96); border: 1px solid rgba(242, 194, 75, .45); box-shadow: 0 18px 60px rgba(0, 0, 0, .5); text-align: left; }
.bt-hs-kopf { display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 900; color: var(--gold); }
.bt-hs-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; font: 700 17px system-ui; cursor: pointer; }
.bt-hs-form { margin-top: 8px; }
.bt-hs-deins { margin: 4px 0 8px; font-size: 15px; }
.bt-hs-deins b { color: #fff; font-size: 20px; }
.bt-hs-lbl { display: block; font-size: 12.5px; color: rgba(255, 244, 220, .8); margin-bottom: 5px; }
.bt-hs-zeile { display: flex; gap: 8px; }
.bt-hs-zeile input { width: 118px; min-width: 0; flex: 0 0 auto; height: 48px; padding: 0 10px; border-radius: 12px; border: 2px solid rgba(242, 194, 75, .7);
  background: rgba(0, 0, 0, .35); color: #fff; font: 800 22px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.bt-hs-zeile input:focus { outline: none; border-color: #ffd66b; box-shadow: 0 0 0 3px rgba(255, 214, 107, .25); }
.bt-cta.bt-cta-s { min-width: 0; flex: 1 1 auto; height: 48px; padding: 0 14px; font-size: 16px; box-shadow: 0 4px 0 #b45f1d; }
.bt-cta.bt-cta-s:disabled { opacity: .55; cursor: default; }
.bt-hs-hinweis { margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: rgba(255, 244, 220, .75); }
.bt-hs-hinweis a { color: #ffe9a6; }
.bt-hs-msg { min-height: 1.3em; margin: 10px 0 4px; font-size: 14px; font-weight: 700; color: #f0a35e; }
.bt-hs-msg.is-ok { color: #9be38f; }
.bt-hs-ansicht { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 6px; font-size: 13px;
  color: rgba(255, 244, 220, .85); }
.bt-hs-ansicht[hidden] { display: none; }
.bt-hs-wechsel { flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(242, 194, 75, .7); background: rgba(255, 255, 255, .06);
  color: #ffe9a6; font: 700 12.5px system-ui; cursor: pointer; }
.bt-hs-list { list-style: none; margin: 4px 0 0; padding: 0; counter-reset: none; }
.bt-hs-list li { display: flex; align-items: baseline; gap: 10px; padding: 7px 8px; border-radius: 10px; font-size: 15px; }
.bt-hs-list li:nth-child(odd) { background: rgba(255, 255, 255, .04); }
.bt-hs-list li.ich { background: rgba(242, 194, 75, .22); outline: 1px solid rgba(242, 194, 75, .6); }
.bt-hs-list li.leer { justify-content: center; color: rgba(255, 244, 220, .7); font-size: 14px; }
.bt-hs-list .rk { width: 2.2em; text-align: right; color: rgba(255, 244, 220, .65); font-weight: 700; }
.bt-hs-list .nm { flex: 1 1 auto; font-weight: 800; letter-spacing: .06em; color: #fff; }
.bt-hs-list .sc { font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---------- Pause ---------- */
.bt-pause {
  position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; cursor: pointer; text-align: center;
  background: rgba(12, 6, 8, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-size: 28px; font-weight: 900; color: #fff;
}
.bt-pause small { font-size: 14px; font-weight: 700; opacity: .8; }

/* Handy quer: Endkarte rechts neben dem Turm (game.js sideBySide() schiebt den Turm nach links) */
@media (max-height: 560px) and (orientation: landscape) {
  .bt-over { left: auto; right: calc(env(safe-area-inset-right, 0px) + 20px); top: 50%; bottom: auto;
    width: min(46vw, 360px); transform: translateY(-50%); animation: btside .45s cubic-bezier(.2, 1.2, .4, 1); }
  .bt-over-score { font-size: 48px; }
  @keyframes btside { from { transform: translate(40px, -50%); opacity: 0; } to { transform: translate(0, -50%); opacity: 1; } }
}
/* kleine Hoehe (Querformat am Handy): Karte kompakter */
@media (max-height: 560px) {
  .bt-how { display: none; }
  .bt-start { top: calc(env(safe-area-inset-top, 0px) + 56px); }
}