html,body{
  margin:0;
  height:100%;
  background:#0b0f14;
  color:#e6edf3;
  font-family:system-ui,sans-serif;
}
#three{display:block;width:100vw;height:100vh}
.hidden{display:none!important}

/* zentrierte Screens (Login etc.) */
.screen.center{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding:1rem;
}

/* Basis-Card (dunkel, bleibt für Login & Co) */
.card{
  background:#0d1117;
  border:1px solid #30363d;
  border-radius:1rem;
  padding:1rem;
  box-shadow:0 10px 40px rgba(0,0,0,.35);
  width:min(92vw,380px);
}
.card.lg{width:min(92vw,440px)}
.card.sm{width:min(92vw,360px)}

h1,h3{margin:.2rem 0 .6rem 0}
.muted{opacity:.8}
.row{display:flex;gap:.5rem;align-items:center}
label{display:block;margin:.4rem 0}
input,select{
  width:100%;
  padding:.55rem .6rem;
  border-radius:.6rem;
  border:1px solid #30363d;
  background:#0b0f14;
  color:#e6edf3;
}
button{
  background:#1f6feb;
  color:#fff;
  border:0;
  border-radius:.6rem;
  padding:.55rem .9rem;
  cursor:pointer;
}
button.ghost{
  background:transparent;
  border:1px solid #30363d;
}
.msg{margin-top:.4rem;min-height:1.2em}

/* HUD – Container oben rechts */
.hud {
  position: fixed;
  top: .6rem;
  right: .6rem;
  left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
  background: transparent;
  border: none;
  backdrop-filter: none;
  pointer-events: none;   /* Container selbst nimmt keine Klicks */
  z-index: 9999;
}

/* Zeile: Spiel-bezogene Buttons laufen nach links */
.hud-top-row {
  display: flex;
  flex-direction: row-reverse; /* startet an der Ecke, zieht nach links */
  gap: .4rem;
}

/* Spalte: System-/Einstellungs-Buttons laufen nach unten */
.hud-right-column {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
}

/* Buttons im HUD: klickbar + runde Icons */
.hud button {
  pointer-events: auto;      /* Buttons wieder klickbar machen */
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Titel im HUD ausblenden (falls vorhanden) */
.hud .centerTitle,
.centerTitle {
  display: none !important;
}

.centerTitle{pointer-events:none;user-select:none}

/* ===== Overlays ===== */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:20;
}

/* dunkles Standard-Panel (Battle/alte Dialoge) */
.panel{
  background:#0d1117;
  border:1px solid #30363d;
  border-radius:1rem;
  padding:1rem;
  width:min(92vw,560px);
}

/* Einstellungsmenü: auf kleinen/TV-Bildschirmen scrollbar halten */
#menuOverlay{
  align-items:center;
}
#menuOverlay .panel{
  max-height:calc(100vh - 2rem);
  overflow-y:auto;
  overscroll-behavior:contain;
  box-sizing:border-box;
}

/* Menü-Checkboxen: globale input width:100% darf Checkboxes nicht verschieben */
#menuOverlay label.checkbox,
#menuOverlay .checkbox-group label.checkbox{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:.45rem 0;
  line-height:1.25;
}
#menuOverlay label.checkbox input[type="checkbox"],
#menuOverlay .checkbox-group label.checkbox input[type="checkbox"]{
  width:auto;
  min-width:1.05rem;
  height:1.05rem;
  margin:0;
  flex:0 0 auto;
}
#menuOverlay label.checkbox.disabled,
#menuOverlay .checkbox-group label.checkbox.disabled{
  opacity:.48;
}

/* Kontextmenü für Bauteile im Baumodus */
#buildContextOverlay .panel {
  max-width: 320px;
}

/* Container für Aktionen (Löschen, später Monster zuordnen etc.) */
#buildContextOverlay .context-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Buttons im Kontextmenü vollbreit */
#buildContextOverlay .context-actions button {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.95rem;
}

/* Grid allgemein */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:.6rem;
}

/* Task-Panel (Schreib-/Vorlese-Overlay) */
.panel.task{
  width:min(92vw,960px);
  height:min(76vh,600px);
  display:grid;
  grid-template-rows:1fr auto;
}
.panel.task footer{
  padding:.6rem 1rem;
  background:#0b0f14;
  border-bottom:1px solid #30363d;
}
.panel.task footer{
  border-top:1px solid #30363d;
  border-bottom:none;
  display:flex;
  gap:.5rem;
  align-items:center;
  justify-content:flex-end;
}

#bg,#ghost,#ink{position:absolute}

/* === Virtuelles Gamepad (Touch-Steuerung) === */
.touch-hud{
  position:fixed;
  inset:0;
  pointer-events:none;
  touch-action:none;
  z-index:15;
}
.touch-left,.touch-right{
  position:absolute;
  bottom:1.5rem;
  width:50%;
  height:40%;
}
.touch-left{left:0;}
.touch-right{
  right:0;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  gap:1rem;
  padding-right:1rem;
}
.stick-base{
  position:absolute;
  bottom:2rem;left:2rem;
  width:120px;height:120px;
  border-radius:50%;
  background:rgba(255,255,255,0.05);
  border:2px solid rgba(255,255,255,0.1);
  pointer-events:auto;
}
.stick-knob{
  position:absolute;
  left:50%;top:50%;
  width:60px;height:60px;
  margin:-30px 0 0 -30px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  border:2px solid rgba(255,255,255,0.2);
  pointer-events:none;
  transition:transform 0.05s linear;
}
.touch-btn{
  width:72px;height:72px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:2px solid rgba(255,255,255,0.2);
  color:#fff;
  font-size:1.4rem;
  pointer-events:auto;
  user-select:none;
  display:flex;align-items:center;justify-content:center;
}
.touch-btn:active{background:rgba(255,255,255,0.25);}
/* iOS Safari – Anti-Lupe & Anti-Kontextmenü */
.touch-btn,
.touch-hud {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ============================= */
/* Karten mit Bild-Vorschau      */
/* ============================= */
.card img{
  display:block;
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:.6rem;
  margin-bottom:.5rem;
}
.card .title{
  font-weight:600;
  line-height:1.2;
  margin-bottom:.25rem;
}
.card .subtitle{
  font-size:.9rem;
  opacity:.8;
}

/* ============================= */
/*  HELLER: Inventar & Starter   */
/*  (passt zu dem, was wir in JS */
/*   inline gesetzt haben)       */
/* ============================= */

/* Overlay selber etwas heller, damit die weißen Karten wirken */
#invOverlay,
#starterOverlay{
  background:rgba(15,23,42,0.08);
  backdrop-filter:blur(3px);
}

/* Panel darin: weiß statt dunkel */
#invOverlay .panel,
#starterOverlay .panel{
  background:#ffffff;
  border:1px solid rgba(148,163,184,0.35);
  border-radius:1.1rem;
  box-shadow:0 18px 40px rgba(15,23,42,0.12);
  width:min(92vw,980px);
  color:#0f172a;
}

/* das eigentliche Kartengrid */
#invOverlay .grid,
#starterOverlay .grid,
#invOverlay #invList,     /* falls du invList ohne .grid im HTML hast */
#starterOverlay #starterList{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:.75rem;
  padding:.6rem;
}

/* einzelne Karten darin */
#invOverlay .card,
#starterOverlay .card{
  background:#ffffff;
  border:1px solid rgba(148,163,184,0.3);
  border-radius:.8rem;
  padding:.45rem .55rem;
  color:#0f172a;
  box-shadow:0 14px 30px rgba(15,23,42,0.04);
}

/* Bilder in diesen Karten eher “Pokémon”-Style anzeigen */
#invOverlay .card img,
#starterOverlay .card img{
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  aspect-ratio:88 / 63;
  background:#f8fafc;
  border-radius:.6rem;
  margin-bottom:.4rem;
}

/* Responsive: auf sehr schmalen Screens enger machen */
@media (max-width: 520px){
  #invOverlay .grid,
  #starterOverlay .grid,
  #invOverlay #invList,
  #starterOverlay #starterList{
    grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  }
  #invOverlay .card img,
  #starterOverlay .card img{
    aspect-ratio:auto;
  }
}

/* ============================= */
/* Task-Overlay heller machen    */
/* (passt zu runTaskOverlay)     */
/* ============================= */
#taskOverlay{
  background:rgba(15,23,42,0.06);
  backdrop-filter:blur(3px);
}
#taskOverlay .panel{
  background:#ffffff;
  border:1px solid rgba(148,163,184,0.35);
  border-radius:1.1rem;
  box-shadow:0 16px 35px rgba(15,23,42,0.12);
  color:#0f172a;
}
#taskOverlay .panel.task footer{
  background:transparent;
  border-color:rgba(148,163,184,0.35);
}
#taskOverlay button{
  border-radius:.55rem;
}

/* ============================= */
/* (Optional) generisches        */
/* monster-select overlay        */
/* ============================= */
#monsterSelectOverlay .panel{
  background:#ffffff;
  border:1px solid rgba(148,163,184,0.35);
  border-radius:1.1rem;
  box-shadow:0 18px 40px rgba(15,23,42,0.12);
  width:min(92vw,900px);
  color:#0f172a;
}
#monsterSelectOverlay .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:.75rem;
}
#monsterSelectOverlay .card{
  background:#f8fafc;
  border:1px solid rgba(148,163,184,0.3);
  border-radius:.75rem;
}

/* ============================= */
/* kleinere Screens allgemein     */
/* ============================= */
@media (max-width: 480px){
  .card img{ height:140px; }
  .panel{ width:min(96vw,560px); }
}

/* =========================================
   Gemeinsames Kartenlayout für alle Overlays
   (Inventar, Starter, Monsterwahl)
   ========================================= */
.card-panel {
  background: rgba(15,23,42,0.08);
  backdrop-filter: blur(3px);
  padding: .6rem;
  border-radius: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .75rem;
}

.monster-card {
  background: #ffffff;
  border: 1px solid rgba(148,163,184,0.3);
  border-radius: .8rem;
  padding: .45rem .55rem;
  color: #0f172a;
  box-shadow: 0 14px 30px rgba(15,23,42,0.04);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.monster-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  border-radius: .6rem;
  background: #f8fafc;
}

.clickable {
  cursor: pointer;
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}
.clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(15,23,42,0.15);
}

/* etwas kleiner auf sehr schmalen Screens */
@media (max-width: 520px) {
  .card-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
  .monster-card img {
    height: 130px;
  }
}
/* großes Karten-Preview aus dem Inventar */
.card-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.card-preview-panel {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 1rem;
  padding: .7rem .7rem 1.1rem;
  box-shadow: 0 18px 40px rgba(15,23,42,0.22);
  max-width: min(90vw, 420px);
  max-height: min(90vh, 620px);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  color: #0f172a;
}

.card-preview-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: .6rem;
  background: #e2e8f0;
}

.card-preview-title {
  font-weight: 600;
  text-align: center;
  margin-top: .2rem;
}

.card-preview-close {
  position: absolute;
  top: .4rem;
  right: .4rem;
  background: rgba(15,23,42,0.12);
  color: #0f172a;
  border: 0;
  border-radius: .5rem;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  cursor: pointer;
}




.monster-card.selected {
  outline: 3px solid #38bdf8;
}
.monster-card.disabled {
  pointer-events: none;
  opacity: .35;
}


/* ========================================= */
/* Fake-Ladebildschirm                       */
/* ========================================= */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000; /* über allem */
}

.loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.loading-spinner {
  width: 80px;
  height: 80px;
  border: 8px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loading-text {
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 8px rgba(0,0,0,0.4);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------------------------
   Build-Hotbar (Baumodus)
   --------------------------- */

/* v596: einheitliche HUD-/Overlay-Schichtung.
   Grundregel: passive Statusboxen nie auf der Bauleiste,
   Build-/Fahrzeug-Infos direkt oberhalb, echte Menüs/Overlays darüber. */
:root {
  --tinnies-safe-bottom: env(safe-area-inset-bottom, 0px);
  --tinnies-ui-gap: 10px;
  --tinnies-build-hotbar-h: 58px;
  --tinnies-status-stack-bottom: calc(var(--tinnies-safe-bottom) + var(--tinnies-build-hotbar-h) + 18px);
  --tinnies-card-stack-bottom: calc(var(--tinnies-safe-bottom) + var(--tinnies-build-hotbar-h) + 24px);
  --tinnies-z-passive: 8600;
  --tinnies-z-hotbar: 8800;
  --tinnies-z-card: 8900;
  --tinnies-z-floating: 9200;
  --tinnies-z-modal: 10050;
}
body.tinnies-build-hotbar-hidden {
  --tinnies-status-stack-bottom: calc(var(--tinnies-safe-bottom) + 14px);
  --tinnies-card-stack-bottom: calc(var(--tinnies-safe-bottom) + 14px);
}

.build-hotbar {
  position: fixed;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  z-index: var(--tinnies-z-hotbar);
}

.build-hotbar.hidden {
  display: none;
}

.build-hotbar .build-slot {
  min-width: 56px;
  max-width: 80px;
  padding: 4px 6px 6px;
  border-radius: 10px;
  border: none;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 10px;
  line-height: 1.1;
}

/* Bild-Icon im Baumenü */
.build-slot-icon {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 4px;
  pointer-events: none;
}

/* kleiner Text unter dem Icon */
.build-slot-label {
  font-size: 9px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: .8;
}

/* Beim Hover wird der Text etwas klarer */
.build-hotbar .build-slot:hover .build-slot-label {
  opacity: 1;
}

/* Spezielles Layout für "⭐ Bausteine holen" */
.build-hotbar .build-slot.earn {
  flex-direction: row;
  min-width: 120px;
  max-width: none;
  border-radius: 999px;
}

.build-hotbar .build-slot.active {
  background: rgba(255, 255, 255, 0.9);
  color: #222;
  font-weight: 600;
}

/* v475: Kompakte Touch-Hotbar bleibt unten. Rechts wird Platz fuer A/Rennen
   freigehalten; weitere Bauteile klappen nur per Pfeil nach oben aus. */
.build-hotbar.build-hotbar-compact {
  left: 8px;
  right: var(--build-hotbar-right-reserve, 178px);
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  transform: none;
  max-width: none;
  overflow: hidden;
  gap: 3px;
  padding: 4px 5px;
  justify-content: flex-start;
}

.build-hotbar.build-hotbar-compact.build-hotbar-expanded {
  flex-wrap: wrap;
  align-content: flex-end;
  max-height: 42vh;
  overflow-y: auto;
  border-radius: 18px;
  /* v596: Wenn der Spieler die Bauleiste bewusst ausklappt, ist sie aktive Bedienung
     und muss ueber passiven Statuskarten liegen. */
  z-index: var(--tinnies-z-floating);
}

.build-hotbar.build-hotbar-compact .build-slot {
  min-width: 48px;
  max-width: 58px;
  padding: 4px 5px 5px;
}


@media (max-width: 720px) {
  .build-hotbar.build-hotbar-compact {
    right: var(--build-hotbar-right-reserve, 150px);
  }
}

.build-hotbar.build-hotbar-compact .build-slot-icon {
  width: 28px;
  height: 28px;
}

.build-hotbar.build-hotbar-compact .build-slot-label {
  font-size: 8px;
}

.build-hotbar.build-hotbar-compact .build-slot.earn {
  min-width: 78px;
  max-width: 86px;
}

.build-hotbar .build-slot-page,
.build-hotbar .build-slot-expand {
  min-width: 38px;
  max-width: 42px;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.build-hotbar .build-slot-page:disabled,
.build-hotbar .build-slot-expand:disabled {
  opacity: .35;
}


/* v592: Im lokalen Split-Screen wird die große P1-Bauleiste ausgeblendet.
   P1 und P2 bekommen stattdessen identische kleine Build-Badges im jeweiligen Viewport. */
body.tinnies-local-guest-active .build-hotbar {
  display: none !important;
}

.tinnies-split-build-badge {
  position: fixed;
  z-index: var(--tinnies-z-card);
  max-width: min(46vw, 360px);
  background: rgba(15,23,42,.78);
  color: #fff;
  border-radius: 12px;
  padding: 7px 10px;
  font: 12px/1.25 system-ui, sans-serif;
  text-shadow: 0 1px 1px #000;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
  user-select: none;
}
.tinnies-split-build-badge.hidden { display: none !important; }
.tinnies-split-build-badge-p1 {
  left: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
}
.tinnies-split-build-badge-p2 {
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
body.tinnies-local-guest-split-horizontal .tinnies-split-build-badge-p1 {
  bottom: calc(50vh + 12px);
}
body.tinnies-local-guest-split-horizontal .tinnies-split-build-badge-p2 {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.tinnies-split-build-badge-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  font-weight: 800;
}
.tinnies-split-build-badge-top span:last-child {
  font-weight: 700;
  opacity: .92;
  white-space: nowrap;
}
.tinnies-split-build-badge-sub {
  font-size: 11px;
  opacity: .92;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tinnies-split-build-strip {
  display: flex;
  gap: 4px;
  align-items: stretch;
}
.tinnies-split-build-slot {
  width: 54px;
  min-height: 48px;
  border-radius: 8px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px;
  overflow: hidden;
  font: inherit;
}
button.tinnies-split-build-slot { cursor: pointer; }
.tinnies-split-build-slot.active {
  background: rgba(255,255,255,.34);
  border: 2px solid rgba(255,255,255,.9);
}
.tinnies-split-build-slot img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
  margin-bottom: 1px;
}
.tinnies-split-build-slot-emoji {
  font-size: 18px;
  line-height: 20px;
  margin-bottom: 1px;
}
.tinnies-split-build-slot-label {
  font-size: 9px;
  line-height: 10px;
  text-align: center;
  max-width: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.build-slot-fallback-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.18);
  font-weight: 800;
  pointer-events: none;
}

.build-hotbar.build-hotbar-compact .build-slot-fallback-icon {
  width: 28px;
  height: 28px;
}

/* Kontextmenü Build */
#buildContextOverlay .panel {
  width: min(90vw, 380px);
}

#buildContextOverlay .context-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

#buildContextOverlay .context-actions button {
  width: 100%;
  padding: .55rem .75rem;
  font-size: 1rem;
  border-radius: .6rem;
  text-align: left;
}

#buildHouseInfo {
  font-size: .95rem;
  opacity: .85;
}

/* ========================================= */
/* Monsterplatzierung – Gattungs-Auswahl     */
/* ========================================= */

#monsterPlaceOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30000;
}

#monsterPlaceOverlay.hidden {
  display: none !important;
}

#monsterPlaceOverlay .panel {
  background: #ffffff;
  border: 1px solid rgba(148,163,184,0.35);
  border-radius: 1.1rem;
  box-shadow: 0 18px 40px rgba(15,23,42,0.12);
  width: min(92vw, 900px);
  max-height: 90vh;
  overflow-y: auto;
  color: #0f172a;
  padding: 1rem;
}

#monsterPlaceOverlay .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .75rem;
}

#monsterPlaceOverlay .monster-card {
  background: #ffffff;
  border: 1px solid rgba(148,163,184,0.3);
  border-radius: .8rem;
  padding: .45rem .55rem;
  cursor: pointer;
  transition: transform .08s ease-out, box-shadow .08s ease-out;
}

#monsterPlaceOverlay .monster-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(15,23,42,0.15);
}

#monsterPlaceOverlay .monster-card.selected {
  outline: 3px solid #38bdf8;
}


/* =========================================================
   Starter-Auswahl v018
   3 feste Kartenbereiche + Auswahl bestätigen
   ========================================================= */
#starterOverlay {
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(4px);
}

#starterOverlay .starter-panel {
  width: min(94vw, 860px);
  max-height: min(92vh, 720px);
  overflow: auto;
  padding: 1rem 1.1rem 1.05rem;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(148, 163, 184, 0.35);
  border-radius: 1.15rem;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}

#starterOverlay .starter-head h3 {
  margin: 0 0 .25rem;
  font-size: 1.35rem;
}

#starterOverlay .starter-head .muted {
  margin: 0 0 .85rem;
  color: #64748b;
  opacity: 1;
}

#starterOverlay .starter-slots,
#starterOverlay #starterList.starter-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  padding: 0;
  align-items: stretch;
}

#starterOverlay .starter-slot {
  min-width: 0;
  display: flex;
}

#starterOverlay .starter-card {
  width: 100%;
  border: 2px solid rgba(148, 163, 184, 0.35);
  border-radius: 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #0f172a;
  padding: .65rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  align-items: stretch;
  text-align: left;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}

#starterOverlay .starter-card:hover,
#starterOverlay .starter-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.16);
  outline: none;
}

#starterOverlay .starter-card.selected {
  border-color: #2563eb;
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
  box-shadow: 0 18px 40px rgba(37, 99, 235, 0.22);
}

#starterOverlay .starter-card-image-wrap {
  width: 100%;
  aspect-ratio: 63 / 88;
  border-radius: .82rem;
  overflow: hidden;
  background: #e2e8f0;
  border: 1px solid rgba(148, 163, 184, 0.28);
  display: grid;
  place-items: center;
}

#starterOverlay .starter-card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  margin: 0;
  display: block;
  background: #e2e8f0;
}

#starterOverlay .starter-card-no-image {
  color: #64748b;
  font-weight: 600;
  font-size: .95rem;
}

#starterOverlay .starter-card-name {
  font-size: 1.05rem;
  font-weight: 750;
  line-height: 1.15;
  text-align: center;
}

#starterOverlay .starter-card-meta {
  min-height: 1.1rem;
  color: #64748b;
  font-size: .82rem;
  text-align: center;
}

#starterOverlay .starter-empty-card {
  width: 100%;
  min-height: 100%;
  border: 2px dashed rgba(148, 163, 184, 0.35);
  border-radius: 1rem;
  background: rgba(248, 250, 252, 0.8);
  display: grid;
  place-items: center;
  color: #94a3b8;
  font-weight: 650;
  padding: .65rem;
}

#starterOverlay .starter-empty-card::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 63 / 88;
  border-radius: .82rem;
  background: rgba(226, 232, 240, 0.45);
  grid-area: 1 / 1;
}

#starterOverlay .starter-empty-card span {
  grid-area: 1 / 1;
  position: relative;
}

#starterOverlay .starter-choice-line {
  min-height: 1.25rem;
  margin-top: .8rem;
  color: #334155;
  font-weight: 650;
  text-align: center;
}

#starterOverlay .starter-actions {
  margin-top: .8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .7rem;
}

#starterOverlay .starter-actions button {
  min-height: 42px;
  border-radius: .75rem;
  font-weight: 700;
}

#starterOverlay .starter-actions button[disabled] {
  cursor: not-allowed;
  opacity: .45;
}

#starterOverlay .starter-actions .ghost {
  color: #334155;
  border-color: rgba(148, 163, 184, 0.55);
  background: #ffffff;
}

@media (max-width: 760px) {
  #starterOverlay .starter-panel {
    width: min(96vw, 520px);
  }
  #starterOverlay .starter-slots,
  #starterOverlay #starterList.starter-slots {
    grid-template-columns: 1fr;
  }
  #starterOverlay .starter-card {
    max-width: 260px;
    margin: 0 auto;
  }
  #starterOverlay .starter-slot.empty {
    display: none;
  }
  #starterOverlay .starter-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

/* v019: Premium-Lock für Baumodus-Button */
#btnBuildMode.premium-locked{
  opacity:.82;
  filter:saturate(.8);
}

/* Tinnies v020: Fotoalbum-Overlay */
.tinnie-album-overlay {
  background: rgba(15,23,42,.28);
  backdrop-filter: blur(4px);
}
.tinnie-album-panel {
  width: min(92vw, 460px);
  background: #fff;
  color: #0f172a;
  border: 1px solid rgba(148,163,184,.38);
  border-radius: 1.25rem;
  padding: 1rem 1.1rem;
  box-shadow: 0 24px 60px rgba(15,23,42,.2);
  text-align: center;
}
.tinnie-album-panel h3 {
  margin: 0 0 .45rem;
  font-size: 1.25rem;
}
.tinnie-album-panel p {
  margin: .45rem 0;
  line-height: 1.35;
}
.tinnie-album-preview-img {
  width: min(100%, 320px);
  max-height: 360px;
  object-fit: contain;
  display: block;
  margin: .65rem auto;
  border-radius: 1rem;
  background: #f8fafc;
  border: 1px solid rgba(148,163,184,.24);
}
.tinnie-album-actions {
  display: flex;
  gap: .55rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: .8rem;
}
.tinnie-album-actions button,
.tinnie-album-panel > button {
  min-height: 42px;
  border-radius: .8rem;
  padding: .55rem .85rem;
  font-weight: 700;
}
@media (max-width: 520px) {
  .tinnie-album-actions {
    flex-direction: column;
  }
  .tinnie-album-actions button,
  .tinnie-album-panel > button {
    width: 100%;
  }
}


/* Tinnies v021: Premium-Album Buttons lesbar */
.tinnie-album-actions button.ghost {
  color: #334155;
  background: #ffffff;
  border: 1px solid rgba(51,65,85,.55);
}
.tinnie-album-actions button.ghost:hover {
  background: #f8fafc;
}

/* =========================================================
   Starter-Auswahl v022
   3 feste Bühnenplätze statt Standardkarten
   ========================================================= */
#starterOverlay .starter-panel {
  width: min(96vw, 920px);
}

#starterOverlay .starter-head h3 {
  text-align: center;
}

#starterOverlay .starter-head .muted {
  text-align: center;
}

#starterOverlay .starter-slots.starter-stage-slots,
#starterOverlay #starterList.starter-slots.starter-stage-slots {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

#starterOverlay .starter-stage-card {
  min-height: 390px;
  padding: .7rem;
  text-align: center;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 64%, #f8fafc 100%);
}

#starterOverlay .starter-stage-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 63 / 88;
  min-height: 285px;
  overflow: hidden;
  border-radius: .9rem;
  background:
    radial-gradient(circle at 50% 75%, rgba(147, 197, 253, .35), transparent 42%),
    linear-gradient(180deg, #e0f2fe 0%, #eef6ff 58%, #dbeafe 100%);
  border: 1px solid rgba(148, 163, 184, 0.35);
  display: grid;
  place-items: center;
}

#starterOverlay .starter-stage-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

#starterOverlay .starter-stage-badge {
  position: absolute;
  z-index: 2;
  top: .55rem;
  right: .55rem;
  min-width: 2.2rem;
  padding: .22rem .46rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.82);
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .02em;
}

#starterOverlay .starter-stage-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #64748b;
  font-weight: 700;
}

#starterOverlay .starter-card.selected .starter-stage-preview {
  box-shadow: inset 0 0 0 3px rgba(37, 99, 235, .35);
}

#starterOverlay .starter-empty-card {
  min-height: 390px;
}

#starterOverlay .starter-empty-card::before {
  aspect-ratio: 63 / 88;
  min-height: 285px;
}

@media (max-width: 760px) {
  #starterOverlay .starter-slots.starter-stage-slots,
  #starterOverlay #starterList.starter-slots.starter-stage-slots {
    grid-template-columns: 1fr;
  }
  #starterOverlay .starter-stage-card {
    max-width: 270px;
    min-height: 380px;
    margin: 0 auto;
  }
  #starterOverlay .starter-stage-preview {
    min-height: 275px;
  }
}

/* =========================================================
   Fotoalbum v023: eigene Premium-Foto-Bühne
   ========================================================= */
.tinnie-album-panel.tinnie-photo-booth-panel {
  width: min(94vw, 520px);
  max-height: min(92vh, 760px);
  overflow: auto;
}

.tinnie-photo-booth {
  position: relative;
  width: min(100%, 300px);
  aspect-ratio: 3 / 4;
  margin: .75rem auto .55rem;
  border-radius: 1rem;
  overflow: hidden;
  background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
  border: 8px solid #e5e7eb;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.35), 0 14px 32px rgba(15,23,42,.22);
}

.tinnie-photo-stage,
.tinnie-photo-stage-canvas,
.tinnie-photo-freeze {
  width: 100%;
  height: 100%;
  display: block;
}

.tinnie-photo-stage-canvas {
  touch-action: none;
}

.tinnie-photo-freeze {
  position: absolute;
  inset: 0;
  object-fit: cover;
  background: #0f172a;
  z-index: 2;
}

.tinnie-photo-freeze.hidden,
.tinnie-photo-actions .hidden {
  display: none !important;
}

.tinnie-photo-stage-fallback {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: #e2e8f0;
  font-weight: 700;
  text-align: center;
}

.tinnie-photo-controls {
  display: grid;
  gap: .45rem;
  width: min(100%, 360px);
  margin: .45rem auto .3rem;
  text-align: left;
}

.tinnie-photo-controls label {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: .65rem;
  color: #334155;
  font-size: .86rem;
  font-weight: 700;
}

.tinnie-photo-controls input[type="range"] {
  width: 100%;
}

.tinnie-photo-actions button[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 520px) {
  .tinnie-album-panel.tinnie-photo-booth-panel {
    width: 94vw;
    padding: .85rem;
  }
  .tinnie-photo-booth {
    width: min(100%, 260px);
  }
  .tinnie-photo-controls label {
    grid-template-columns: 84px 1fr;
  }
}

/* =========================================================
   Fotoalbum v024: kompakte Albumübersicht für Desktop/Mobile
   ========================================================= */
#invOverlay.tinnie-album-list-overlay {
  background: rgba(15, 23, 42, .22) !important;
  backdrop-filter: blur(4px) !important;
}

#invOverlay.tinnie-album-list-overlay .panel {
  width: min(94vw, 860px);
  max-height: min(90vh, 760px);
  overflow: auto;
  padding: 1rem;
  border-radius: 1.2rem;
}

#invOverlay.tinnie-album-list-overlay .panel h3 {
  margin: 0 0 .8rem;
  text-align: center;
  font-size: 1.2rem;
}

#invOverlay .tinnie-album-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .85rem !important;
  padding: .25rem .25rem .9rem !important;
  align-items: start;
}

#invOverlay .tinnie-album-card {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, .38);
  border-radius: 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: #0f172a;
  box-shadow: 0 14px 32px rgba(15, 23, 42, .08);
  padding: .55rem;
  text-align: left;
  cursor: pointer;
  min-width: 0;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

#invOverlay .tinnie-album-card:hover,
#invOverlay .tinnie-album-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 235, .55);
  box-shadow: 0 18px 42px rgba(15, 23, 42, .13);
  outline: none;
}

#invOverlay .tinnie-album-card-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: .8rem;
  overflow: hidden;
  background: #0f172a;
  border: 1px solid rgba(148, 163, 184, .28);
  display: grid;
  place-items: center;
}

#invOverlay .tinnie-album-card-photo img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

#invOverlay .tinnie-album-card-photo span {
  color: #cbd5e1;
  font-weight: 800;
  font-size: .85rem;
}

#invOverlay .tinnie-album-card-title {
  margin-top: .5rem;
  font-size: .94rem;
  font-weight: 800;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#invOverlay .tinnie-album-card-meta {
  margin-top: .18rem;
  color: #64748b;
  font-size: .76rem;
  font-weight: 700;
}

#invOverlay .tinnie-album-empty {
  grid-column: 1 / -1;
  padding: 1.4rem;
  border-radius: 1rem;
  background: #f8fafc;
  color: #475569;
  text-align: center;
  font-weight: 700;
  border: 1px dashed rgba(148, 163, 184, .65);
}

#invOverlay #btnInvClose {
  display: block;
  margin: .25rem auto 0;
  min-width: 130px;
  border-radius: .8rem;
}

@media (max-width: 720px) {
  #invOverlay.tinnie-album-list-overlay .panel {
    width: 94vw;
    padding: .85rem;
  }
  #invOverlay .tinnie-album-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
  }
}

@media (max-width: 420px) {
  #invOverlay .tinnie-album-grid {
    grid-template-columns: 1fr !important;
  }
  #invOverlay .tinnie-album-card {
    max-width: 230px;
    width: 100%;
    justify-self: center;
  }
}

/* Tinnies v083: Fotoalbum zeigt pro Tinnie-Art eine Karte + Dorfanzahl */
#invOverlay .tinnie-album-card-photo {
  position: relative;
}

#invOverlay .tinnie-album-count-badge {
  position: absolute;
  left: .45rem;
  bottom: .45rem;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 .38rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .86);
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, .9);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .25);
  font-size: .86rem !important;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.tinnie-album-panel p {
  white-space: pre-line;
}

/* Tinnies v084: Fotoalbum sperrt Spiel-Eingaben + echte Sammelkarte mit eigenem Foto */
#invOverlay.tinnie-album-list-overlay,
.tinnie-album-card-preview-overlay {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

#invOverlay.tinnie-album-list-overlay .panel,
.tinnie-album-card-preview-panel {
  overscroll-behavior: contain;
}

#invOverlay .tinnie-album-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  align-items: stretch;
}

#invOverlay .tinnie-album-card.tinnie-album-finished-card,
.tinnie-album-card-preview-panel .tinnie-album-card.tinnie-album-finished-card {
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(148, 112, 52, .38);
  border-radius: 1.15rem;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.92), rgba(255,255,255,0) 26%),
    linear-gradient(180deg, #fff7dc 0%, #fffaf0 48%, #f5df9a 100%);
  box-shadow: 0 16px 34px rgba(71, 50, 15, .16);
  padding: .62rem;
  color: #2d1d09;
}

#invOverlay .tinnie-album-card.tinnie-album-finished-card::before,
.tinnie-album-card-preview-panel .tinnie-album-card.tinnie-album-finished-card::before {
  content: '';
  position: absolute;
  inset: .32rem;
  border: 1px solid rgba(120, 75, 20, .28);
  border-radius: .92rem;
  pointer-events: none;
}

#invOverlay .tinnie-album-card-header,
.tinnie-album-card-preview-panel .tinnie-album-card-header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  margin-bottom: .45rem;
}

#invOverlay .tinnie-album-card-number,
#invOverlay .tinnie-album-card-rarity,
.tinnie-album-card-preview-panel .tinnie-album-card-number,
.tinnie-album-card-preview-panel .tinnie-album-card-rarity {
  display: inline-flex;
  align-items: center;
  min-height: 1.42rem;
  border-radius: 999px;
  padding: .14rem .48rem;
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(120, 75, 20, .22);
  color: #57340d;
  font-size: .74rem;
  font-weight: 900;
  line-height: 1;
}

#invOverlay .tinnie-album-card-rarity,
.tinnie-album-card-preview-panel .tinnie-album-card-rarity {
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#invOverlay .tinnie-album-card-photo,
.tinnie-album-card-preview-panel .tinnie-album-card-photo {
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  border-radius: .82rem;
  background: linear-gradient(180deg, #eaf7ff 0%, #f8fafc 100%);
  border: 2px solid rgba(120, 75, 20, .24);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
}

#invOverlay .tinnie-album-card-photo img,
.tinnie-album-card-preview-panel .tinnie-album-card-photo img {
  object-fit: cover !important;
}

#invOverlay .tinnie-album-card-body,
.tinnie-album-card-preview-panel .tinnie-album-card-body {
  position: relative;
  z-index: 1;
  margin-top: .48rem;
  padding: .48rem .5rem .45rem;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(120, 75, 20, .18);
}

#invOverlay .tinnie-album-card-title,
.tinnie-album-card-preview-panel .tinnie-album-card-title {
  margin-top: 0;
  font-size: 1.02rem;
  font-weight: 950;
  color: #2d1d09;
}

#invOverlay .tinnie-album-card-description,
.tinnie-album-card-preview-panel .tinnie-album-card-description {
  margin-top: .24rem;
  min-height: 2.35rem;
  color: #5f4621;
  font-size: .78rem;
  line-height: 1.28;
  font-weight: 700;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#invOverlay .tinnie-album-card-meta,
.tinnie-album-card-preview-panel .tinnie-album-card-meta {
  margin-top: .42rem;
  padding-top: .35rem;
  border-top: 1px solid rgba(120, 75, 20, .16);
  color: #7a5a23;
  font-size: .72rem;
  font-weight: 900;
}

#invOverlay .tinnie-album-count-badge,
.tinnie-album-card-preview-panel .tinnie-album-count-badge {
  left: .5rem;
  bottom: .5rem;
  background: rgba(87, 52, 13, .9);
}

.tinnie-album-card-preview-overlay {
  background: rgba(15, 23, 42, .34);
  backdrop-filter: blur(4px);
}

.tinnie-album-card-preview-panel {
  position: relative;
  width: min(92vw, 430px);
  max-height: min(92vh, 720px);
  overflow: auto;
  padding: .75rem;
  border-radius: 1.25rem;
  background: rgba(255,255,255,.95);
  box-shadow: 0 24px 60px rgba(15,23,42,.24);
}

.tinnie-album-card-preview-panel .tinnie-album-preview-card {
  width: 100%;
  cursor: default;
}

.tinnie-album-card-preview-panel .tinnie-album-preview-card:disabled {
  opacity: 1;
}

.tinnie-album-card-preview-panel .tinnie-album-card-description {
  -webkit-line-clamp: unset;
  min-height: 0;
}

.tinnie-album-card-preview-close {
  position: absolute;
  top: .55rem;
  right: .55rem;
  z-index: 5;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: .65rem;
  background: rgba(15,23,42,.12);
  color: #0f172a;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 520px) {
  #invOverlay .tinnie-album-grid {
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)) !important;
  }
  #invOverlay .tinnie-album-card-description {
    -webkit-line-clamp: 2;
    min-height: 1.95rem;
  }
}

/* Tinnies v085: Albumkarten wieder kompakt + Admin-Kartenlook aus monsters.php */
#invOverlay .tinnie-album-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start !important;
}

#invOverlay .tinnie-album-card.tinnie-album-finished-card,
.tinnie-album-card-preview-panel .tinnie-album-card.tinnie-album-finished-card {
  border: 1px solid #B9C0CC !important;
  border-radius: 1rem !important;
  background: #F3F4F6 !important;
  box-shadow: 0 12px 28px rgba(15,23,42,.12) !important;
  padding: .45rem !important;
  color: #273448 !important;
}

#invOverlay .tinnie-album-card.tinnie-album-finished-card::before,
.tinnie-album-card-preview-panel .tinnie-album-card.tinnie-album-finished-card::before {
  inset: .28rem !important;
  border-color: #D0D3D9 !important;
  border-radius: .82rem !important;
}

#invOverlay .tinnie-album-card-header,
.tinnie-album-card-preview-panel .tinnie-album-card-header {
  position: relative !important;
  z-index: 1 !important;
  min-height: 2.35rem !important;
  margin-bottom: .45rem !important;
  padding: .42rem .52rem .32rem !important;
  border: 1px solid #D5D8DE !important;
  border-radius: .72rem !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95) 0, rgba(255,255,255,.95) .42rem, transparent .42rem),
    #EEF0F4 !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: .45rem !important;
  align-items: center !important;
}

#invOverlay .tinnie-album-card-title,
.tinnie-album-card-preview-panel .tinnie-album-card-title {
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #273448 !important;
  font-size: .88rem !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
}

#invOverlay .tinnie-album-card-number,
.tinnie-album-card-preview-panel .tinnie-album-card-number {
  min-height: 1.55rem !important;
  min-width: 3.1rem !important;
  justify-content: center !important;
  border-radius: .42rem !important;
  padding: .12rem .38rem !important;
  background: #000000 !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  color: #ffffff !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  letter-spacing: .02em !important;
}

#invOverlay .tinnie-album-card-photo,
.tinnie-album-card-preview-panel .tinnie-album-card-photo {
  position: relative !important;
  z-index: 1 !important;
  aspect-ratio: 664 / 750 !important;
  border-radius: .62rem !important;
  background: #DADDE2 !important;
  border: 1px solid #C3C7CE !important;
  box-shadow: none !important;
  padding: .28rem !important;
}

#invOverlay .tinnie-album-card-photo img,
.tinnie-album-card-preview-panel .tinnie-album-card-photo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: .45rem !important;
}

#invOverlay .tinnie-album-card-body,
.tinnie-album-card-preview-panel .tinnie-album-card-body {
  position: relative !important;
  z-index: 1 !important;
  margin-top: .45rem !important;
  padding: .48rem .35rem 0 !important;
  border-top: 1px solid #D0D3D9 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
}

#invOverlay .tinnie-album-card-description,
.tinnie-album-card-preview-panel .tinnie-album-card-description {
  margin: 0 !important;
  min-height: 2.05rem !important;
  color: #3D424A !important;
  font-size: .72rem !important;
  line-height: 1.22 !important;
  font-weight: 650 !important;
  -webkit-line-clamp: 3 !important;
}

#invOverlay .tinnie-album-card-meta,
.tinnie-album-card-preview-panel .tinnie-album-card-meta {
  margin-top: .3rem !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  color: #667085 !important;
  font-size: .67rem !important;
  font-weight: 850 !important;
}

#invOverlay .tinnie-album-count-badge,
.tinnie-album-card-preview-panel .tinnie-album-count-badge {
  left: .58rem !important;
  bottom: .58rem !important;
  min-width: 1.65rem !important;
  height: 1.65rem !important;
  background: rgba(0,0,0,.86) !important;
  color: #fff !important;
  border: 2px solid rgba(255,255,255,.92) !important;
  font-size: .8rem !important;
}

.tinnie-album-card-preview-panel {
  width: min(92vw, 360px) !important;
}

@media (max-width: 720px) {
  #invOverlay .tinnie-album-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 420px) {
  #invOverlay .tinnie-album-grid {
    grid-template-columns: 1fr !important;
  }
  #invOverlay .tinnie-album-card.tinnie-album-finished-card {
    max-width: 230px !important;
    width: 100% !important;
    justify-self: center !important;
  }
}


/* Tinnies v088: Albumkarte noch genauer an Admin-Karte angleichen */
#invOverlay .tinnie-album-card.tinnie-album-finished-card,
.tinnie-album-card-preview-panel .tinnie-album-card.tinnie-album-finished-card {
  padding: .5rem !important;
  border-radius: 1.08rem !important;
  background: #F3F4F6 !important;
  border: 1px solid #B9C0CC !important;
}

#invOverlay .tinnie-album-card.tinnie-album-finished-card::before,
.tinnie-album-card-preview-panel .tinnie-album-card.tinnie-album-finished-card::before {
  inset: .23rem !important;
  border: 1px solid #D0D3D9 !important;
  border-radius: .96rem !important;
}

#invOverlay .tinnie-album-card-header,
.tinnie-album-card-preview-panel .tinnie-album-card-header {
  min-height: 2.7rem !important;
  margin-bottom: .52rem !important;
  padding: .52rem .64rem .4rem !important;
  border: 1px solid #D5D8DE !important;
  border-radius: .82rem !important;
  background: #EEF0F4 !important;
  overflow: hidden !important;
}

#invOverlay .tinnie-album-card-header::before,
.tinnie-album-card-preview-panel .tinnie-album-card-header::before {
  content: '' !important;
  position: absolute !important;
  left: .16rem !important;
  right: .16rem !important;
  top: .12rem !important;
  height: .44rem !important;
  background: #FFFFFF !important;
  border-radius: .6rem .6rem .2rem .2rem !important;
  pointer-events: none !important;
}

#invOverlay .tinnie-album-card-title,
.tinnie-album-card-preview-panel .tinnie-album-card-title {
  position: relative !important;
  z-index: 1 !important;
  text-align: left !important;
  font-size: .96rem !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
}

#invOverlay .tinnie-album-card-number,
.tinnie-album-card-preview-panel .tinnie-album-card-number {
  position: relative !important;
  z-index: 1 !important;
  min-width: 3.45rem !important;
  min-height: 1.74rem !important;
  padding: 0 .44rem !important;
  border-radius: .48rem !important;
  font-size: .86rem !important;
  letter-spacing: 0 !important;
}

#invOverlay .tinnie-album-card-photo,
.tinnie-album-card-preview-panel .tinnie-album-card-photo {
  padding: .26rem !important;
  border-radius: .64rem !important;
}

#invOverlay .tinnie-album-card-photo img,
.tinnie-album-card-preview-panel .tinnie-album-card-photo img {
  border-radius: .42rem !important;
}

#invOverlay .tinnie-album-card-body,
.tinnie-album-card-preview-panel .tinnie-album-card-body {
  margin-top: .48rem !important;
  padding: .46rem .24rem 0 !important;
}

#invOverlay .tinnie-album-card-description,
.tinnie-album-card-preview-panel .tinnie-album-card-description {
  color: #3D424A !important;
  font-size: .67rem !important;
  line-height: 1.12 !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-height: 0 !important;
  -webkit-line-clamp: unset !important;
}

#invOverlay .tinnie-album-card-meta,
.tinnie-album-card-preview-panel .tinnie-album-card-meta {
  margin-top: .26rem !important;
  color: #667085 !important;
  font-size: .64rem !important;
  font-weight: 700 !important;
}

.tinnie-album-card-preview-panel {
  width: min(92vw, 460px) !important;
  padding: .85rem !important;
}

.tinnie-album-card-preview-panel .tinnie-album-card.tinnie-album-finished-card {
  max-width: 368px !important;
  margin: 0 auto !important;
}

.tinnie-album-card-preview-panel .tinnie-album-card-description {
  font-size: .9rem !important;
}

.tinnie-album-card-preview-panel .tinnie-album-card-meta {
  font-size: .76rem !important;
}

@media (max-width: 720px) {
  #invOverlay .tinnie-album-card-title {
    font-size: .9rem !important;
  }
  #invOverlay .tinnie-album-card-number {
    min-width: 3.1rem !important;
    font-size: .8rem !important;
  }
  #invOverlay .tinnie-album-card-description {
    font-size: .62rem !important;
  }
}


/* Tinnies v089: Fotoalbum nutzt jetzt dieselbe Karten-Geometrie wie der Admin-Renderer (744x1040) */
#invOverlay .tinnie-album-grid {
  grid-template-columns: repeat(3, 223.2px) !important;
  justify-content: start !important;
  align-items: start !important;
}

#invOverlay .tinnie-album-card.tinnie-album-admin-card,
.tinnie-album-card-preview-panel .tinnie-album-card.tinnie-album-admin-card {
  position: relative !important;
  display: block !important;
  width: 223.2px !important;
  height: 312px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #D8DBE2 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  color: #273448 !important;
  text-align: left !important;
}

#invOverlay .tinnie-album-card.tinnie-album-admin-card:hover,
#invOverlay .tinnie-album-card.tinnie-album-admin-card:focus-visible {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(15,23,42,.16) !important;
  outline: none !important;
}

.tinnie-album-admin-art {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 744px !important;
  height: 1040px !important;
  transform: scale(.3) !important;
  transform-origin: left top !important;
  background: #D8DBE2 !important;
  font-family: "DejaVu Sans", Arial, Helvetica, sans-serif !important;
}

.tinnie-album-admin-shadow,
.tinnie-album-admin-bg,
.tinnie-album-admin-header,
.tinnie-album-admin-header-strip,
.tinnie-album-admin-title,
.tinnie-album-admin-number,
.tinnie-album-admin-photo,
.tinnie-album-admin-photo-inner,
.tinnie-album-admin-desc-divider,
.tinnie-album-admin-desc {
  position: absolute !important;
  box-sizing: border-box !important;
}

.tinnie-album-admin-shadow {
  left: 25px !important;
  top: 27px !important;
  width: 704px !important;
  height: 1000px !important;
  border-radius: 26px !important;
  background: rgba(0,0,0,.15) !important;
}

.tinnie-album-admin-bg {
  left: 20px !important;
  top: 20px !important;
  width: 704px !important;
  height: 1000px !important;
  border-radius: 26px !important;
  background: #F3F4F6 !important;
  border: 2px solid #B9C0CC !important;
}

.tinnie-album-admin-header {
  left: 32px !important;
  top: 34px !important;
  width: 680px !important;
  height: 90px !important;
  border-radius: 18px !important;
  background: #EEF0F4 !important;
  border: 1px solid #D5D8DE !important;
  overflow: hidden !important;
}

.tinnie-album-admin-header-strip {
  left: 2px !important;
  top: 2px !important;
  width: 676px !important;
  height: 20px !important;
  border-radius: 14px !important;
  background: #FFFFFF !important;
}

.tinnie-album-admin-title {
  left: 48px !important;
  top: 52px !important;
  width: 500px !important;
  height: 38px !important;
  color: #273448 !important;
  font-size: 28px !important;
  line-height: 34px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.tinnie-album-admin-number {
  left: 590px !important;
  top: 42px !important;
  width: 110px !important;
  height: 40px !important;
  border-radius: 10px !important;
  background: #000000 !important;
  border: 1px solid rgba(255,255,255,.4) !important;
  color: #FFFFFF !important;
  font-size: 22px !important;
  line-height: 38px !important;
  font-weight: 800 !important;
  text-align: center !important;
}

.tinnie-album-admin-photo {
  left: 40px !important;
  top: 140px !important;
  width: 664px !important;
  height: 750px !important;
  border-radius: 14px !important;
  background: #DADDE2 !important;
  border: 1px solid #C3C7CE !important;
  overflow: hidden !important;
}

.tinnie-album-admin-photo-inner {
  left: 10px !important;
  top: 10px !important;
  width: 644px !important;
  height: 730px !important;
  overflow: hidden !important;
  background: #0f172a !important;
  display: block !important;
}

.tinnie-album-admin-photo-inner img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

.tinnie-album-admin-photo-inner > span:not(.tinnie-album-admin-count-badge) {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #cbd5e1 !important;
  font-size: 28px !important;
  font-weight: 800 !important;
}

.tinnie-album-admin-desc-divider {
  left: 46px !important;
  top: 912px !important;
  width: 652px !important;
  height: 1px !important;
  background: #D0D3D9 !important;
}

.tinnie-album-admin-desc {
  left: 48px !important;
  top: 922px !important;
  width: 650px !important;
  height: 66px !important;
  color: #3D424A !important;
  font-size: 18px !important;
  line-height: 22px !important;
  font-weight: 400 !important;
  white-space: pre !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

#invOverlay .tinnie-album-admin-count-badge,
.tinnie-album-card-preview-panel .tinnie-album-admin-count-badge {
  position: absolute !important;
  left: 16px !important;
  bottom: 16px !important;
  min-width: 58px !important;
  height: 58px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.86) !important;
  color: #fff !important;
  border: 5px solid rgba(255,255,255,.95) !important;
  box-shadow: none !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  pointer-events: none !important;
}

.tinnie-album-card-preview-panel .tinnie-album-card.tinnie-album-admin-card {
  width: 334.8px !important;
  height: 468px !important;
  margin: 0 auto !important;
}

.tinnie-album-card-preview-panel .tinnie-album-admin-art {
  transform: scale(.45) !important;
}

@media (max-width: 720px) {
  #invOverlay .tinnie-album-grid {
    grid-template-columns: repeat(2, 193.44px) !important;
    gap: .65rem !important;
  }
  #invOverlay .tinnie-album-card.tinnie-album-admin-card {
    width: 193.44px !important;
    height: 270.4px !important;
  }
  #invOverlay .tinnie-album-admin-card .tinnie-album-admin-art {
    transform: scale(.26) !important;
  }
}

@media (max-width: 470px) {
  #invOverlay .tinnie-album-grid {
    grid-template-columns: 223.2px !important;
    justify-content: center !important;
  }
  #invOverlay .tinnie-album-card.tinnie-album-admin-card {
    width: 223.2px !important;
    height: 312px !important;
  }
  #invOverlay .tinnie-album-admin-card .tinnie-album-admin-art {
    transform: scale(.3) !important;
  }
  .tinnie-album-card-preview-panel .tinnie-album-card.tinnie-album-admin-card {
    width: 297.6px !important;
    height: 416px !important;
  }
  .tinnie-album-card-preview-panel .tinnie-album-admin-art {
    transform: scale(.4) !important;
  }
}


/* v117: Im aktiven Gamepad-/PointerLock-Spielmodus sind die HUD-Icons nicht klickbar
   und werden ausgeblendet. Kreis gibt den Cursor wieder frei. */
body.tinnies-pointerlock-active #hud {
  display: none !important;
}


/* v118: PointerLock HUD Icons sicher ausblenden, auch wenn body/html unterschiedlich gesetzt wird */
html.tinnies-pointerlock-active #hud,
body.tinnies-pointerlock-active #hud,
html.tinnies-pointerlock-active .hud,
body.tinnies-pointerlock-active .hud {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* v119: Im PointerLock-Spielmodus auch Touch-Aktion/Sprint ausblenden. */
html.tinnies-pointerlock-active .tinnies-touch-action-btn,
body.tinnies-pointerlock-active .tinnies-touch-action-btn,
html.tinnies-pointerlock-active .tinnies-touch-sprint-btn,
body.tinnies-pointerlock-active .tinnies-touch-sprint-btn,
html.tinnies-pointerlock-active [data-tinnies-touch-button="action"],
body.tinnies-pointerlock-active [data-tinnies-touch-button="action"],
html.tinnies-pointerlock-active [data-tinnies-touch-button="sprint"],
body.tinnies-pointerlock-active [data-tinnies-touch-button="sprint"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* v134: Fire-TV/WebView sichtbarer Controller-Fokus in scrollbaren Team-Auswahlen */
.tinnies-tv-ui-focus {
  outline: 4px solid #ffd84a !important;
  box-shadow: 0 0 0 5px rgba(255,216,74,.32), 0 0 20px rgba(255,216,74,.48) !important;
  transform: scale(1.035);
}
[data-monster-select="1"] .tinnies-tv-ui-focus {
  position: relative;
  z-index: 2;
}
[data-monster-select="1"] .tinnies-trainer-select-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  padding-top: .55rem;
  padding-bottom: .15rem;
  background: linear-gradient(to top, rgba(248,250,252,.98), rgba(248,250,252,.92), rgba(248,250,252,0));
}

/* v204: Baustein-Anzeige im Bausteine-holen-Slot */
.build-hotbar .build-slot.earn {
  flex-direction: column;
  gap: 1px;
  line-height: 1.05;
}

.build-hotbar .build-slot.earn .build-stone-count {
  display: block;
  font-size: 9px;
  font-weight: 500;
  opacity: 0.82;
  white-space: nowrap;
}

/* v208 Guest-Backup im Menü */
.guest-backup-card{
  margin-top:.85rem;
  padding:.75rem;
  border:1px solid rgba(148,163,184,.45);
  border-radius:14px;
  background:rgba(255,255,255,.72);
}
.guest-backup-card h4{
  margin:.1rem 0 .35rem;
}
#guestBackupBox{
  margin-top:.55rem;
}
#guestBackupCode{
  width:100%;
  box-sizing:border-box;
  min-height:5.5rem;
  resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;
  line-height:1.35;
}


/* v209 Startauswahl + Rechtliches */
.start-card{
  text-align:left;
}
.guest-start-choice{
  display:grid;
  gap:.55rem;
  margin:.9rem 0 .65rem;
}
.guest-start-choice button{
  width:100%;
}
.guest-import-box{
  margin:.9rem 0 .65rem;
  padding:.75rem;
  border:1px solid rgba(148,163,184,.45);
  border-radius:14px;
  background:rgba(255,255,255,.06);
}
#guestImportCode{
  min-height:6.5rem;
  resize:vertical;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;
  line-height:1.35;
}
.guest-import-actions{
  margin-top:.6rem;
  flex-wrap:wrap;
}
.legal-links{
  margin-top:.85rem;
  display:flex;
  gap:.4rem;
  flex-wrap:wrap;
  align-items:center;
  font-size:.88rem;
  opacity:.88;
}
.legal-links a{
  color:#58a6ff;
  text-decoration:none;
}
.legal-links a:hover{
  text-decoration:underline;
}
.menu-legal-links{
  margin:.8rem 0 .55rem;
}
.msg.error{ color:#ff7b72; }
.legal-page{
  min-height:100%;
  overflow:auto;
}
.legal-page body,
body.legal-page{
  background:#0b0f14;
}
.legal-shell{
  width:min(860px, calc(100% - 2rem));
  margin:0 auto;
  padding:2rem 0 3rem;
}
.legal-card{
  background:#0d1117;
  border:1px solid #30363d;
  border-radius:1rem;
  padding:1.2rem;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.legal-card h1{margin-top:0;}
.legal-card h2{margin:1.25rem 0 .4rem;}
.legal-card p,.legal-card li{line-height:1.55;}
.legal-card a{color:#58a6ff;}
.legal-note{border-left:3px solid #f1bd70;padding:.45rem .75rem;background:rgba(241,189,112,.08);}


/* v213 Startmenü freundlicher/kindgerechter */
#loginScreen.start-screen{
  background:
    radial-gradient(circle at 15% 20%, rgba(84,211,255,.16), transparent 22%),
    radial-gradient(circle at 85% 18%, rgba(255,213,103,.16), transparent 20%),
    radial-gradient(circle at 50% 78%, rgba(96,231,154,.14), transparent 24%),
    linear-gradient(180deg, #08111d 0%, #0c1827 48%, #0a1018 100%);
}
.start-card{
  position:relative;
  overflow:hidden;
  text-align:left;
  width:min(94vw, 620px);
  padding:1.3rem 1.2rem 1.1rem;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg, rgba(14,28,45,.94) 0%, rgba(10,18,29,.96) 100%);
  box-shadow:0 24px 64px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05);
}
.start-card-glow{
  position:absolute;
  width:180px;
  height:180px;
  border-radius:999px;
  filter:blur(12px);
  opacity:.28;
  pointer-events:none;
}
.start-card-glow-left{
  left:-50px;
  top:-38px;
  background:radial-gradient(circle, rgba(87,203,255,.85), rgba(87,203,255,0));
}
.start-card-glow-right{
  right:-48px;
  top:18px;
  background:radial-gradient(circle, rgba(255,200,85,.8), rgba(255,200,85,0));
}
.start-hero{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:1rem;
}
.start-logo-badge{
  width:74px;
  height:74px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2rem;
  background:linear-gradient(180deg, #ffe27a 0%, #f7b34d 100%);
  color:#5c3600;
  box-shadow:0 10px 28px rgba(247,179,77,.28);
  flex:0 0 auto;
}
.start-hero-copy{
  min-width:0;
}
.start-kicker{
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#7dd3fc;
  font-weight:800;
  margin-bottom:.2rem;
}
.start-card h1{
  margin:.05rem 0 .35rem;
  font-size:2.2rem;
  line-height:1.02;
}
.start-subtitle{
  margin:0;
  color:rgba(230,237,243,.9);
  line-height:1.45;
  font-size:.98rem;
}
.start-pill-row{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:.95rem 0 .85rem;
}
.start-pill{
  display:inline-flex;
  align-items:center;
  padding:.4rem .72rem;
  border-radius:999px;
  background:rgba(125,211,252,.12);
  border:1px solid rgba(125,211,252,.22);
  color:#d9f3ff;
  font-size:.82rem;
  font-weight:700;
}
.start-hint{
  margin:.15rem 0 1rem;
  color:rgba(230,237,243,.8);
  line-height:1.45;
}
.guest-start-choice{
  display:grid;
  gap:.7rem;
  margin:0 0 .85rem;
}
.start-action{
  width:100%;
  display:flex;
  align-items:center;
  gap:.9rem;
  text-align:left;
  padding:.95rem 1rem;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.start-action:hover,
.start-action:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(0,0,0,.24);
}
.start-action-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.45rem;
  flex:0 0 auto;
}
.start-action-copy{
  display:flex;
  flex-direction:column;
  gap:.18rem;
  min-width:0;
}
.start-action-title{
  font-size:1rem;
  font-weight:800;
  color:#ffffff;
}
.start-action-text{
  font-size:.87rem;
  line-height:1.35;
  color:rgba(230,237,243,.84);
}
.start-action-primary{
  background:linear-gradient(135deg, #267bff 0%, #00a4ff 100%);
}
.start-action-primary .start-action-icon{
  background:rgba(255,255,255,.18);
  color:#fff;
}
.start-action-secondary{
  background:linear-gradient(135deg, #13a874 0%, #43d17f 100%);
}
.start-action-secondary .start-action-icon{
  background:rgba(255,255,255,.16);
  color:#fff;
}
.start-action-ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.03) 100%);
  border-color:rgba(255,255,255,.12);
}
.start-action-ghost .start-action-icon{
  background:rgba(125,211,252,.14);
}
.guest-import-box{
  margin:.25rem 0 .75rem;
  padding:1rem;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.04) 100%);
}
.guest-import-head{
  margin-bottom:.7rem;
}
.guest-import-title{
  font-size:1rem;
  font-weight:800;
  margin-bottom:.15rem;
}
.guest-import-text{
  color:rgba(230,237,243,.8);
  font-size:.88rem;
  line-height:1.4;
}
#guestImportCode{
  width:100%;
  box-sizing:border-box;
  min-height:7rem;
  resize:vertical;
  margin-top:.35rem;
  border-radius:14px;
  border:1px solid rgba(125,211,252,.18);
  background:rgba(6,12,19,.84);
  color:#eff7ff;
  padding:.75rem .85rem;
}
.guest-import-actions{
  margin-top:.75rem;
  flex-wrap:wrap;
}
.guest-import-actions button{
  min-width:160px;
}
#loginMsg.msg{
  margin-top:.2rem;
  min-height:1.45em;
  font-weight:600;
}
.start-footer-note{
  margin-top:.8rem;
  padding:.8rem .9rem;
  border-radius:16px;
  background:rgba(255,228,137,.08);
  border:1px solid rgba(255,228,137,.14);
  color:rgba(255,247,214,.88);
  font-size:.88rem;
  line-height:1.4;
}
.start-legal-links{
  justify-content:center;
  margin-top:.95rem;
  font-size:.9rem;
}
.start-legal-links a{
  color:#9ddcff;
}
@media (max-width: 640px){
  .start-card{
    padding:1.05rem .95rem 1rem;
    border-radius:22px;
  }
  .start-hero{
    align-items:flex-start;
    gap:.8rem;
  }
  .start-logo-badge{
    width:62px;
    height:62px;
    border-radius:18px;
    font-size:1.7rem;
  }
  .start-card h1{
    font-size:1.85rem;
  }
  .start-subtitle{
    font-size:.93rem;
  }
  .start-action{
    padding:.85rem .85rem;
  }
  .start-action-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    font-size:1.25rem;
  }
  .start-action-title{
    font-size:.96rem;
  }
  .start-action-text{
    font-size:.84rem;
  }
}


/* v217: Overlay-Performance-Modus für Good/Balanced/Low */
body.ui-lite .overlay:not(.tinnie-battle-overlay),
body.ui-lite #menuOverlay,
body.ui-lite #invOverlay,
body.ui-lite #starterOverlay,
body.ui-lite #taskOverlay,
body.ui-lite #monsterSelectOverlay,
body.ui-lite #buildContextOverlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.graphics-balanced .overlay:not(.tinnie-battle-overlay),
body.graphics-low .overlay:not(.tinnie-battle-overlay) {
  background: rgba(5, 10, 18, .72) !important;
}
body.ui-lite .panel,
body.ui-lite .card,
body.ui-lite .tinnie-album-panel,
body.ui-lite .starter-panel,
body.ui-lite .starter-slot,
body.ui-lite .monster-card,
body.ui-lite .guest-backup-card {
  box-shadow: 0 8px 20px rgba(0,0,0,.18) !important;
}
body.graphics-balanced .panel,
body.graphics-low .panel,
body.graphics-balanced .tinnie-album-panel,
body.graphics-low .tinnie-album-panel {
  box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;
}
body.ui-lite .starter-slot,
body.ui-lite .monster-card,
body.ui-lite button,
body.ui-lite .panel,
body.ui-lite .card {
  transition: none !important;
}
body.ui-lite .starter-stage-canvas,
body.ui-lite .tinnie-photo-stage-canvas {
  image-rendering: auto;
}
body.graphics-balanced .starter-stage-canvas,
body.graphics-low .starter-stage-canvas {
  max-height: 230px;
}
body.graphics-balanced .tinnie-photo-stage-canvas,
body.graphics-low .tinnie-photo-stage-canvas {
  max-height: 320px;
}

/* v218: Mathe-Lernkampf statt Formular-Overlay */
.tinnie-math-battle-task {
  touch-action: manipulation;
}
.tinnie-math-battle-panel {
  box-sizing: border-box;
}
.tinnie-math-digit-runes,
.tinnie-math-choice-runes {
  width: min(92vw, 430px);
  display: grid;
  grid-template-columns: repeat(3, minmax(64px, 1fr));
  gap: .58rem;
}
.tinnie-math-action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
}
.tinnie-math-rune {
  min-height: 58px;
  border: 1px solid rgba(186, 230, 253, .42);
  border-radius: .85rem;
  padding: .62rem .7rem;
  background: linear-gradient(180deg, rgba(30, 64, 175, .80), rgba(12, 31, 68, .92));
  color: #f8fafc;
  font: 900 1.25rem/1.1 system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 7px 16px rgba(0, 0, 0, .24), inset 0 0 13px rgba(125, 211, 252, .11);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.tinnie-math-rune-choice {
  min-height: 72px;
  font-size: 1.45rem;
}
.tinnie-math-rune-utility {
  font-size: .95rem;
  background: linear-gradient(180deg, rgba(71, 85, 105, .88), rgba(30, 41, 59, .94));
}
.tinnie-math-rune-primary {
  min-width: 190px;
  background: linear-gradient(180deg, #facc15, #f59e0b);
  color: #1f1300;
  border-color: rgba(254, 243, 199, .85);
}
.tinnie-math-rune-danger {
  min-width: 130px;
  background: linear-gradient(180deg, #475569, #1f2937);
  color: #f8fafc;
}
.tinnie-math-rune:hover,
.tinnie-math-rune:focus,
.tinnie-math-rune-selected {
  outline: 3px solid #fde047;
  outline-offset: 2px;
  border-color: rgba(254, 240, 138, .95);
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 0 0 4px rgba(250, 204, 21, .20), 0 10px 18px rgba(0, 0, 0, .30), inset 0 0 18px rgba(255, 255, 255, .14);
}
.tinnie-math-correct {
  border-color: rgba(134, 239, 172, .9) !important;
}
.tinnie-math-wrong {
  border-color: rgba(252, 165, 165, .9) !important;
}
.tinnie-math-hint {
  max-width: min(90vw, 680px);
  color: #93c5fd;
  font: 700 .86rem/1.3 system-ui, sans-serif;
  text-align: center;
}
body.ui-lite .tinnie-math-rune,
body.graphics-balanced .tinnie-math-rune,
body.graphics-low .tinnie-math-rune {
  transition: none !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .22) !important;
}
body.graphics-balanced .tinnie-math-battle-panel,
body.graphics-low .tinnie-math-battle-panel {
  box-shadow: 0 6px 14px rgba(0, 0, 0, .24) !important;
}
@media (max-width: 560px), (max-height: 560px) {
  .tinnie-math-digit-runes,
  .tinnie-math-choice-runes {
    width: min(94vw, 380px);
    gap: .42rem;
  }
  .tinnie-math-rune {
    min-height: 48px;
    border-radius: .7rem;
    font-size: 1rem;
    padding: .45rem .5rem;
  }
  .tinnie-math-rune-choice {
    min-height: 58px;
    font-size: 1.15rem;
  }
  .tinnie-math-rune-primary {
    min-width: 150px;
  }
  .tinnie-math-hint {
    font-size: .76rem;
  }
}

/* v219: Mathe-Battle als Buehne mit Kugeln/Runen statt Panel-Formular */
.tinnie-math-battle-stage {
  box-sizing: border-box;
  isolation: isolate;
}
.tinnie-math-battle-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: min(92vw, 860px);
  height: min(34vh, 230px);
  transform: translateX(-50%) perspective(720px) rotateX(62deg);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, .24), rgba(14, 165, 233, .10) 42%, transparent 66%),
    repeating-radial-gradient(circle at 50% 50%, rgba(186, 230, 253, .24) 0 2px, transparent 2px 28px);
  border: 1px solid rgba(125, 211, 252, .22);
  z-index: 0;
  pointer-events: none;
}
.tinnie-math-battle-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: min(82vw, 720px);
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(250, 204, 21, .58), transparent);
  box-shadow: 0 0 22px rgba(250, 204, 21, .28);
  z-index: 0;
  pointer-events: none;
}
.tinnie-math-orbit-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.tinnie-math-orbit-spark {
  --i: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(8px, 1.4vw, 18px);
  height: clamp(8px, 1.4vw, 18px);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #fff, #bae6fd 32%, rgba(56,189,248,.16) 72%);
  box-shadow: 0 0 18px rgba(125, 211, 252, .36);
  opacity: .78;
  animation: tinnieMathSparkFloat 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.37s);
}
.tinnie-math-battle-top {
  text-shadow: 0 2px 10px rgba(0, 0, 0, .32);
}
.tinnie-math-prompt-orb {
  flex: 0 0 auto;
  overflow: visible;
  animation: tinnieMathOrbFloat 3.8s ease-in-out infinite;
}
.tinnie-math-prompt-ring {
  position: absolute;
  inset: -12px;
  border: 2px solid rgba(186, 230, 253, .38);
  border-radius: 999px;
  transform: rotate(-6deg);
  box-shadow: 0 0 22px rgba(125, 211, 252, .20);
  pointer-events: none;
}
.tinnie-math-answer-energy {
  flex: 0 0 auto;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .38);
}
.tinnie-math-answer-energy::before,
.tinnie-math-answer-energy::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, #fff7bf, #facc15 45%, rgba(245,158,11,.24));
  box-shadow: 0 0 18px rgba(250, 204, 21, .34);
  top: 50%;
  transform: translateY(-50%);
}
.tinnie-math-answer-energy::before {
  left: -34px;
}
.tinnie-math-answer-energy::after {
  right: -34px;
}
.tinnie-math-rune-orbit {
  position: relative;
  z-index: 2;
  padding: .85rem;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 54%, rgba(14, 165, 233, .14), rgba(15, 23, 42, .04) 62%, transparent 72%);
}
.tinnie-math-rune {
  aspect-ratio: 1;
  min-height: 64px;
  border-radius: 999px;
  border: 2px solid rgba(186, 230, 253, .52);
  background:
    radial-gradient(circle at 36% 25%, rgba(255,255,255,.55), rgba(125,211,252,.22) 28%, transparent 42%),
    radial-gradient(circle at 50% 58%, rgba(14,165,233,.78), rgba(30,64,175,.92) 58%, rgba(15,23,42,.96));
  box-shadow: 0 10px 22px rgba(0, 0, 0, .26), inset 0 0 18px rgba(255,255,255,.12), 0 0 20px rgba(56,189,248,.12);
}
.tinnie-math-rune-utility {
  aspect-ratio: auto;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,.38), transparent 34%),
    linear-gradient(180deg, rgba(71, 85, 105, .90), rgba(15, 23, 42, .96));
}
.tinnie-math-rune-primary {
  aspect-ratio: auto;
  min-height: 64px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.62), transparent 38%),
    linear-gradient(180deg, #fde047, #f59e0b);
  box-shadow: 0 12px 26px rgba(0,0,0,.28), 0 0 26px rgba(250,204,21,.28), inset 0 0 18px rgba(255,255,255,.20);
}
.tinnie-math-rune-danger {
  display: none;
}
.tinnie-math-rune:hover,
.tinnie-math-rune:focus,
.tinnie-math-rune-selected {
  transform: translateY(-5px) scale(1.08);
  box-shadow: 0 0 0 5px rgba(250, 204, 21, .22), 0 16px 26px rgba(0, 0, 0, .34), 0 0 30px rgba(250, 204, 21, .30), inset 0 0 20px rgba(255, 255, 255, .18);
}
.tinnie-math-action-row,
.tinnie-math-hint,
.tinnie-math-status {
  position: relative;
  z-index: 2;
}
.tinnie-math-status {
  text-shadow: 0 2px 10px rgba(0, 0, 0, .36);
}
@keyframes tinnieMathOrbFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes tinnieMathSparkFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.9); opacity: .50; }
  50% { transform: translate3d(10px, -12px, 0) scale(1.12); opacity: .88; }
}
body.ui-lite .tinnie-math-orbit-spark,
body.graphics-balanced .tinnie-math-orbit-spark,
body.graphics-low .tinnie-math-orbit-spark,
body.ui-lite .tinnie-math-prompt-orb,
body.graphics-balanced .tinnie-math-prompt-orb,
body.graphics-low .tinnie-math-prompt-orb {
  animation: none !important;
}
body.graphics-balanced .tinnie-math-battle-stage::before,
body.graphics-low .tinnie-math-battle-stage::before {
  background: radial-gradient(circle at 50% 50%, rgba(56, 189, 248, .16), rgba(14, 165, 233, .06) 48%, transparent 70%);
}
body.graphics-balanced .tinnie-math-answer-energy::before,
body.graphics-balanced .tinnie-math-answer-energy::after,
body.graphics-low .tinnie-math-answer-energy::before,
body.graphics-low .tinnie-math-answer-energy::after {
  display: none;
}
@media (max-width: 640px), (max-height: 620px) {
  .tinnie-math-battle-stage {
    height: 94vh !important;
    padding: .65rem !important;
  }
  .tinnie-math-prompt-orb {
    min-height: 112px !important;
    width: min(92vw, 560px) !important;
  }
  .tinnie-math-answer-energy {
    min-height: 54px !important;
  }
  .tinnie-math-rune-orbit {
    padding: .4rem;
  }
  .tinnie-math-rune {
    min-height: 46px;
  }
}

/* v220: echter Battle-Layer, responsive und mit fliegenden Antwort-Runen */
.tinnie-math-battle-task {
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
}
.tinnie-math-battle-stage {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: minmax(22px, 5vh) minmax(92px, 26vh) minmax(62px, 16vh) minmax(188px, 38vh);
  grid-template-areas:
    "top"
    "question"
    "answer"
    "input" !important;
  align-items: center !important;
  justify-items: center !important;
  gap: clamp(.25rem, 1.1vh, .75rem) !important;
  padding: clamp(.4rem, 1.2vh, .9rem) clamp(.5rem, 2vw, 1.4rem) clamp(.35rem, 1vh, .7rem) !important;
}
.tinnie-math-battle-stage::before {
  bottom: clamp(46px, 8vh, 86px);
  width: min(88vw, 820px);
  height: clamp(92px, 18vh, 180px);
}
.tinnie-math-battle-stage::after {
  bottom: clamp(78px, 13vh, 132px);
}
.tinnie-math-battle-top {
  grid-area: top !important;
  width: min(94vw, 980px) !important;
  align-self: end;
  opacity: .88;
}
.tinnie-math-prompt-orb {
  grid-area: question !important;
  align-self: end !important;
  width: clamp(300px, 44vw, 700px) !important;
  min-height: clamp(82px, 16vh, 148px) !important;
  padding: clamp(.65rem, 2vh, 1.2rem) !important;
  border-radius: 999px !important;
}
.tinnie-math-prompt-orb > div:last-child {
  font-size: clamp(1.45rem, 4.4vw, 3.15rem) !important;
}
.tinnie-math-answer-energy {
  grid-area: answer !important;
  align-self: center !important;
  min-width: min(76vw, 420px) !important;
  min-height: clamp(54px, 10vh, 84px) !important;
  display: flex !important;
  gap: clamp(.28rem, .9vw, .6rem);
  padding: clamp(.35rem, 1vh, .62rem) clamp(.7rem, 2vw, 1.15rem) !important;
  border-color: rgba(250, 204, 21, .62) !important;
}
.tinnie-math-answer-placeholder {
  font-size: clamp(1rem, 2.4vw, 1.45rem);
  color: rgba(254, 243, 199, .76);
}
.tinnie-math-answer-chip {
  width: clamp(34px, 5.4vh, 52px);
  height: clamp(34px, 5.4vh, 52px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 36% 25%, rgba(255,255,255,.58), transparent 38%),
    radial-gradient(circle at 50% 58%, #fde047, #f59e0b 68%, #713f12);
  color: #241300;
  font: 900 clamp(1.05rem, 3.2vh, 1.55rem)/1 system-ui, sans-serif;
  box-shadow: 0 7px 18px rgba(0,0,0,.26), 0 0 18px rgba(250,204,21,.24);
}
.tinnie-math-input-zone {
  grid-area: input;
  align-self: end;
  justify-self: center;
  width: min(92vw, 520px);
  display: grid;
  grid-template-rows: auto minmax(18px, auto) auto auto;
  gap: clamp(.25rem, .8vh, .55rem);
  justify-items: center;
  position: relative;
  z-index: 3;
}
.tinnie-math-rune-orbit {
  width: min(86vw, 430px) !important;
  padding: clamp(.28rem, .8vh, .65rem) !important;
  border-radius: clamp(24px, 5vh, 999px) !important;
}
.tinnie-math-digit-runes,
.tinnie-math-choice-runes {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(.28rem, .9vh, .58rem) !important;
}
.tinnie-math-rune {
  min-height: 0 !important;
  height: clamp(42px, 7.2vh, 68px);
  padding: 0 !important;
  font-size: clamp(1rem, 2.7vh, 1.35rem) !important;
  font-family: "Comic Sans MS", "Comic Neue", "Trebuchet MS", system-ui, sans-serif !important;
  font-weight: 900 !important;
}
.tinnie-math-rune-utility {
  aspect-ratio: auto !important;
  height: clamp(36px, 5.8vh, 52px);
  font-size: clamp(.68rem, 1.8vh, .92rem) !important;
}
.tinnie-math-rune-primary {
  height: clamp(42px, 6.5vh, 62px);
  width: clamp(116px, 15vw, 178px) !important;
  min-width: clamp(116px, 15vw, 178px) !important;
  padding: 0 1rem !important;
  aspect-ratio: auto !important;
  font-size: clamp(.96rem, 2.2vh, 1.15rem) !important;
}
.tinnie-math-action-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .65rem !important;
  flex-wrap: nowrap !important;
}
.tinnie-math-status {
  min-height: clamp(18px, 2.7vh, 26px) !important;
  font-size: clamp(.78rem, 1.8vh, .95rem);
}
.tinnie-math-hint {
  max-width: min(88vw, 560px) !important;
  font-size: clamp(.66rem, 1.55vh, .82rem) !important;
  line-height: 1.25 !important;
  opacity: .86;
}
.tinnie-math-flying-rune {
  position: fixed;
  z-index: 100000;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 2px solid rgba(254, 240, 138, .92);
  background:
    radial-gradient(circle at 36% 25%, rgba(255,255,255,.66), transparent 38%),
    radial-gradient(circle at 50% 58%, #38bdf8, #1d4ed8 68%, #0f172a);
  color: #fff;
  font: 900 1.2rem/1 system-ui, sans-serif;
  box-shadow: 0 0 0 5px rgba(250,204,21,.20), 0 0 28px rgba(125,211,252,.34);
}
body.ui-lite .tinnie-math-flying-rune,
body.graphics-balanced .tinnie-math-flying-rune,
body.graphics-low .tinnie-math-flying-rune {
  display: none !important;
}
@media (max-height: 760px) {
  .tinnie-math-battle-stage {
    grid-template-rows: minmax(18px, 4vh) minmax(76px, 24vh) minmax(52px, 13vh) minmax(172px, 41vh) !important;
  }
  .tinnie-math-hint {
    display: none;
  }
}
@media (max-width: 740px), (max-height: 560px) {
  .tinnie-math-battle-stage {
    grid-template-rows: minmax(16px, 4vh) minmax(70px, 22vh) minmax(48px, 13vh) minmax(160px, 45vh) !important;
    padding-bottom: .25rem !important;
  }
  .tinnie-math-battle-top {
    font-size: .68rem !important;
  }
  .tinnie-math-prompt-orb {
    width: min(92vw, 500px) !important;
    min-height: 68px !important;
  }
  .tinnie-math-answer-energy {
    min-height: 46px !important;
  }
  .tinnie-math-rune {
    height: clamp(36px, 7vh, 52px);
  }
  .tinnie-math-rune-utility {
    height: clamp(32px, 5.8vh, 44px);
  }
}

/* v221: Zahlenreihe statt Numblock, sichtbarer Flug auch in Good/Balanced */
.tinnie-math-battle-stage {
  grid-template-rows: minmax(20px, 4vh) minmax(90px, 25vh) minmax(58px, 15vh) minmax(150px, 34vh) !important;
}
.tinnie-math-input-zone {
  width: min(96vw, 980px) !important;
  grid-template-rows: auto auto auto auto !important;
  align-self: end !important;
  gap: clamp(.22rem, .7vh, .48rem) !important;
}
.tinnie-math-rune-orbit {
  width: min(94vw, 860px) !important;
  max-width: 860px !important;
  padding: clamp(.25rem, .7vh, .5rem) !important;
  border-radius: 999px !important;
}
.tinnie-math-digit-runes,
.tinnie-math-choice-runes,
.tinnie-math-digit-row,
.tinnie-math-choice-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: clamp(.22rem, .65vw, .52rem) !important;
  grid-template-columns: none !important;
}
.tinnie-math-digit-row {
  overflow: visible !important;
}
.tinnie-math-rune {
  width: clamp(42px, 5.2vw, 68px) !important;
  height: clamp(42px, 6.4vh, 64px) !important;
  flex: 0 0 auto !important;
}
.tinnie-math-rune-choice {
  width: clamp(58px, 10vw, 112px) !important;
}
.tinnie-math-utility-row {
  display: flex;
  justify-content: center;
  gap: .5rem;
  position: relative;
  z-index: 3;
}
.tinnie-math-rune-utility {
  width: auto !important;
  min-width: clamp(78px, 11vw, 120px) !important;
  height: clamp(30px, 4.7vh, 42px) !important;
  padding: 0 .8rem !important;
  font-size: clamp(.65rem, 1.45vh, .82rem) !important;
  opacity: .86;
}
.tinnie-math-rune-primary {
  min-width: min(78vw, 230px) !important;
  height: clamp(38px, 5.6vh, 52px) !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.58), transparent 38%),
    linear-gradient(180deg, #bef264, #22c55e) !important;
  color: #052e16 !important;
  border-color: rgba(187, 247, 208, .86) !important;
}
body.ui-lite .tinnie-math-flying-rune,
body.graphics-balanced .tinnie-math-flying-rune,
body.graphics-good .tinnie-math-flying-rune {
  display: flex !important;
}
body.graphics-low .tinnie-math-flying-rune {
  display: none !important;
}
.tinnie-math-answer-energy {
  min-width: min(72vw, 390px) !important;
}
.tinnie-math-answer-placeholder {
  font-size: clamp(.92rem, 2vw, 1.25rem) !important;
}
@media (max-width: 920px) {
  .tinnie-math-rune {
    width: clamp(34px, 8.6vw, 54px) !important;
    height: clamp(34px, 6.2vh, 54px) !important;
    font-size: clamp(.86rem, 2.4vh, 1.08rem) !important;
  }
  .tinnie-math-rune-orbit {
    width: min(98vw, 720px) !important;
  }
}
@media (max-width: 520px) {
  .tinnie-math-digit-row {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .tinnie-math-digit-row::-webkit-scrollbar {
    display: none;
  }
  .tinnie-math-rune {
    width: 42px !important;
    height: 42px !important;
  }
}
@media (max-height: 640px) {
  .tinnie-math-battle-stage {
    grid-template-rows: minmax(16px, 3vh) minmax(70px, 22vh) minmax(48px, 13vh) minmax(128px, 40vh) !important;
  }
  .tinnie-math-rune {
    width: clamp(38px, 5vw, 54px) !important;
    height: clamp(34px, 5.8vh, 48px) !important;
  }
  .tinnie-math-rune-utility {
    height: clamp(28px, 4.2vh, 36px) !important;
  }
  .tinnie-math-rune-primary {
    height: clamp(34px, 5vh, 44px) !important;
  }
}

/* v222: Good/High nutzen eine echte Three.js-Orbit-Buehne fuer Mathe */
.tinnie-math-three-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
  overflow: hidden;
}
.tinnie-math-three-stage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  pointer-events: auto;
  cursor: pointer;
}
.tinnie-math-three-active .tinnie-math-orbit-field,
.tinnie-math-three-active .tinnie-math-battle-stage::before,
.tinnie-math-three-active .tinnie-math-battle-stage::after {
  display: none !important;
}
.tinnie-math-three-active .tinnie-math-answer-energy {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.tinnie-math-three-active .tinnie-math-prompt-ring,
.tinnie-math-three-active .tinnie-math-answer-energy::before,
.tinnie-math-three-active .tinnie-math-answer-energy::after {
  display: none !important;
}
.tinnie-math-three-active .tinnie-math-digit-row,
.tinnie-math-three-active .tinnie-math-choice-row {
  background: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
.tinnie-math-three-active .tinnie-math-input-zone {
  pointer-events: none !important;
  z-index: 4 !important;
}
.tinnie-math-three-active .tinnie-math-digit-row .tinnie-math-rune,
.tinnie-math-three-active .tinnie-math-choice-row .tinnie-math-rune {
  opacity: 0 !important;
  color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
.tinnie-math-three-active .tinnie-math-digit-row .tinnie-math-rune-selected,
.tinnie-math-three-active .tinnie-math-choice-row .tinnie-math-rune-selected {
  outline: none !important;
  transform: none !important;
}
.tinnie-math-three-active .tinnie-math-utility-row,
.tinnie-math-three-active .tinnie-math-action-row,
.tinnie-math-three-active .tinnie-math-status,
.tinnie-math-three-active .tinnie-math-hint,
.tinnie-math-three-active .tinnie-math-battle-top {
  z-index: 4 !important;
}
.tinnie-math-three-active .tinnie-math-action-row {
  position: absolute !important;
  left: 50% !important;
  bottom: clamp(.35rem, 1.6vh, 1rem) !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .65rem !important;
  pointer-events: auto !important;
}
.tinnie-math-three-active .tinnie-math-action-row .tinnie-math-rune-primary {
  width: clamp(108px, 12vw, 148px) !important;
  min-width: clamp(108px, 12vw, 148px) !important;
  height: clamp(30px, 4.2vh, 40px) !important;
  padding: 0 .75rem !important;
  pointer-events: auto !important;
}
.tinnie-math-three-active .tinnie-math-rune-primary {
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.72), transparent 32%),
    linear-gradient(180deg, #67e8f9 0%, #0ea5e9 48%, #2d1f4f 100%) !important;
  color: #f8fafc !important;
  border-color: rgba(250, 204, 21, .72) !important;
  text-shadow: 0 2px 8px rgba(2, 6, 23, .55);
  box-shadow: 0 0 0 2px rgba(250, 204, 21, .24), 0 10px 22px rgba(0,0,0,.24), 0 0 28px rgba(103,232,249,.34) !important;
}
.tinnie-math-three-active .tinnie-math-rune-clear {
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.54), transparent 34%),
    linear-gradient(180deg, #4b5563 0%, #334155 46%, #2d1f4f 100%) !important;
  border-color: rgba(125, 211, 252, .62) !important;
  box-shadow: 0 0 0 2px rgba(125, 211, 252, .16), 0 10px 22px rgba(0,0,0,.24), 0 0 22px rgba(109,77,143,.30) !important;
}
.tinnie-math-three-active .tinnie-math-hint {
  display: none !important;
}
body.graphics-good .tinnie-math-three-stage canvas {
  image-rendering: auto;
}

/* v229: gemeinsamer Look fuer Lesen/Schreiben-Lernaufgaben */
.tinnie-task-overlay,
#taskOverlay.tinnie-writing-task {
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  background: radial-gradient(circle at 50% 42%, rgba(45,31,79,.24), rgba(7,18,37,.46) 46%, rgba(2,6,23,.78)) !important;
  color: #f8fafc;
  z-index: 9999;
}
.tinnie-task-stage {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  box-sizing: border-box;
  display: grid !important;
  grid-template-rows: minmax(22px, 5vh) minmax(120px, 30vh) minmax(84px, 18vh) minmax(90px, 24vh);
  grid-template-areas:
    "top"
    "main"
    "actions"
    "result";
  align-items: center;
  justify-items: center;
  gap: clamp(.28rem, 1vh, .75rem);
  padding: clamp(.45rem, 1.2vh, .9rem) clamp(.6rem, 2vw, 1.4rem) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #f8fafc !important;
  overflow: hidden;
}
.tinnie-task-three-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.tinnie-task-three-stage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.tinnie-task-top {
  grid-area: top;
  position: relative;
  z-index: 3;
  width: min(94vw, 980px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  color: #dff7ff;
  font: 800 .82rem/1.2 system-ui, sans-serif;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.tinnie-task-crystal {
  grid-area: main;
  position: relative;
  z-index: 2;
  width: clamp(300px, 48vw, 740px);
  min-height: clamp(102px, 18vh, 170px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(.18rem, .75vh, .45rem);
  padding: clamp(.75rem, 2vh, 1.3rem);
  border-radius: 999px;
  border: 2px solid rgba(103,232,249,.56);
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(63,43,99,.7), rgba(7,18,37,.72));
  box-shadow: 0 0 0 1px rgba(250,204,21,.14), inset 0 0 34px rgba(103,232,249,.12), 0 0 34px rgba(45,31,79,.32);
}
.tinnie-task-crystal::before,
.tinnie-writing-canvas-wrap::before {
  content: "";
  position: absolute;
  left: 11%;
  right: 11%;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(103,232,249,.26), rgba(250,204,21,.44), rgba(103,232,249,.26), transparent);
  box-shadow: 0 0 18px rgba(103,232,249,.28);
  pointer-events: none;
}
.tinnie-task-prompt {
  color: rgba(219,234,254,.86);
  font-weight: 800;
  font-size: clamp(.78rem, 1.8vh, 1rem);
  text-transform: uppercase;
  letter-spacing: .02em;
}
.tinnie-task-main-text {
  color: #f8fafc !important;
  font-family: "Comic Sans MS", "Comic Neue", "Trebuchet MS", system-ui, sans-serif !important;
  font-size: clamp(2.4rem, 7vw, 5.2rem) !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  text-shadow: 0 3px 0 rgba(2,6,23,.72), 0 0 18px rgba(103,232,249,.45);
}
.tinnie-task-actions {
  grid-area: actions;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .65rem;
}
.tinnie-task-btn,
#taskOverlay.tinnie-writing-task button.tinnie-task-btn {
  min-width: clamp(108px, 12vw, 152px);
  height: clamp(34px, 5vh, 46px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  padding: 0 .85rem !important;
  border: 1px solid rgba(125,211,252,.48) !important;
  color: #f8fafc !important;
  font: 900 clamp(.86rem, 1.8vh, 1rem)/1 system-ui, sans-serif !important;
  text-shadow: 0 2px 8px rgba(2,6,23,.55);
  cursor: pointer;
}
.tinnie-task-btn-primary {
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.58), transparent 34%),
    linear-gradient(180deg, #67e8f9 0%, #0ea5e9 46%, #2d1f4f 100%) !important;
  border-color: rgba(250,204,21,.68) !important;
  box-shadow: 0 0 0 2px rgba(250,204,21,.22), 0 10px 22px rgba(0,0,0,.24), 0 0 24px rgba(103,232,249,.28);
}
.tinnie-task-btn-muted {
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.32), transparent 34%),
    linear-gradient(180deg, #475569 0%, #334155 46%, #2d1f4f 100%) !important;
}
.tinnie-task-btn-danger {
  background: linear-gradient(180deg, #fb7185 0%, #be123c 52%, #2d1f4f 100%) !important;
  border-color: rgba(251,113,133,.52) !important;
}
.tinnie-task-status,
.tinnie-task-result {
  position: relative;
  z-index: 3;
  width: min(88vw, 640px);
  text-align: center;
  color: rgba(219,234,254,.9);
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(2,6,23,.5);
}
.tinnie-task-status {
  grid-area: actions;
  align-self: end;
  transform: translateY(2.25rem);
  min-height: 1.35rem;
}
.tinnie-task-result {
  grid-area: result;
  align-self: start;
  min-height: 54px;
  padding: .7rem .9rem;
  border-radius: 16px;
  border: 1px solid rgba(103,232,249,.28);
  background: rgba(7,18,37,.46);
  box-shadow: inset 0 0 22px rgba(103,232,249,.08);
}
.tinnie-speech-stage {
  grid-template-rows: minmax(22px, 5vh) minmax(104px, 24vh) minmax(96px, 24vh) minmax(46px, 9vh) minmax(26px, 5vh) !important;
  grid-template-areas:
    "top"
    "question"
    "main"
    "actions"
    "status" !important;
}
.tinnie-speech-stage .tinnie-task-status {
  grid-area: status;
  align-self: center;
  transform: none;
}
.tinnie-writing-stage {
  grid-template-rows: minmax(44px, 9vh) minmax(260px, 1fr) minmax(58px, 12vh) !important;
  grid-template-areas:
    "top"
    "main"
    "actions" !important;
}
.tinnie-writing-canvas-wrap {
  grid-area: main;
  position: relative !important;
  z-index: 2;
  width: min(92vw, 880px);
  height: min(54vh, 420px);
  min-height: 240px;
  border-radius: 26px;
  border: 2px solid rgba(103,232,249,.42);
  background:
    radial-gradient(circle at 50% 20%, rgba(103,232,249,.14), transparent 36%),
    linear-gradient(180deg, rgba(63,43,99,.5), rgba(7,18,37,.62));
  box-shadow: inset 0 0 28px rgba(103,232,249,.1), 0 0 26px rgba(45,31,79,.3);
  overflow: hidden;
}
.tinnie-writing-canvas-wrap::before {
  top: 18%;
}
#taskOverlay.tinnie-writing-task .panel.task footer {
  grid-area: actions;
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
.tinnie-writing-ink-canvas {
  filter: drop-shadow(0 0 5px rgba(103,232,249,.2));
}
body.graphics-balanced .tinnie-task-three-stage,
body.graphics-low .tinnie-task-three-stage,
body.ui-lite .tinnie-task-three-stage {
  display: none !important;
}
body.graphics-balanced .tinnie-task-crystal,
body.graphics-low .tinnie-task-crystal,
body.ui-lite .tinnie-task-crystal,
body.graphics-balanced .tinnie-writing-canvas-wrap,
body.graphics-low .tinnie-writing-canvas-wrap,
body.ui-lite .tinnie-writing-canvas-wrap {
  box-shadow: inset 0 0 16px rgba(103,232,249,.08), 0 4px 12px rgba(0,0,0,.22) !important;
}

/* v230: Battle-Farbwelt fuer alte Overlay-Panels und responsive Album-Meldungen */
.tinnie-album-overlay {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: radial-gradient(circle at 50% 42%, rgba(45,31,79,.28), rgba(7,18,37,.64) 48%, rgba(2,6,23,.88));
  color: #f8fafc;
  box-sizing: border-box;
}
.tinnie-album-panel,
.tinnie-overlay .panel,
#menuOverlay .panel,
#invOverlay .panel,
#starterOverlay .panel,
#monsterSelectOverlay .panel,
#buildContextOverlay .panel,
#taskOverlay:not(.tinnie-writing-task) .panel {
  color: #f8fafc !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(103,232,249,.14), transparent 32%),
    linear-gradient(180deg, rgba(45,31,79,.94), rgba(7,18,37,.96)) !important;
  border: 1px solid rgba(103,232,249,.44) !important;
  box-shadow: 0 22px 64px rgba(0,0,0,.42), inset 0 0 28px rgba(103,232,249,.08) !important;
}
.tinnie-reward-message-panel {
  width: min(92vw, 560px);
  max-height: calc(100dvh - 28px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 22px !important;
  padding: clamp(1rem, 4vw, 1.55rem) !important;
  text-align: center;
}
.tinnie-album-panel h3,
.tinnie-overlay .panel h2,
.tinnie-overlay .panel h3,
#menuOverlay .panel h2,
#invOverlay .panel h2,
#starterOverlay .panel h2,
#monsterSelectOverlay .panel h2,
#buildContextOverlay .panel h2 {
  color: #f8fafc !important;
  text-shadow: 0 3px 0 rgba(2,6,23,.7), 0 0 18px rgba(103,232,249,.34);
}
.tinnie-album-panel p,
.tinnie-overlay .panel p,
#menuOverlay .panel p,
#invOverlay .panel p,
#starterOverlay .panel p,
#monsterSelectOverlay .panel p,
#buildContextOverlay .panel p {
  color: rgba(219,234,254,.9) !important;
}
.tinnie-album-preview-img {
  display: block;
  max-width: min(66vw, 240px);
  max-height: min(34vh, 220px);
  object-fit: contain;
  margin: .8rem auto 1rem;
  border-radius: 16px;
  border: 1px solid rgba(103,232,249,.35);
  background: rgba(7,18,37,.42);
  box-shadow: 0 12px 34px rgba(0,0,0,.28), 0 0 24px rgba(103,232,249,.16);
}
.tinnie-album-primary-btn,
.tinnie-album-panel button,
.tinnie-overlay .panel button,
#menuOverlay .panel button,
#invOverlay .panel button,
#starterOverlay .panel button,
#monsterSelectOverlay .panel button,
#buildContextOverlay .panel button {
  min-height: 42px;
  border-radius: 999px !important;
  border: 1px solid rgba(250,204,21,.58) !important;
  color: #f8fafc !important;
  font-weight: 900 !important;
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.5), transparent 34%),
    linear-gradient(180deg, #67e8f9 0%, #0ea5e9 48%, #2d1f4f 100%) !important;
  box-shadow: 0 0 0 2px rgba(250,204,21,.16), 0 10px 22px rgba(0,0,0,.26), 0 0 22px rgba(103,232,249,.24) !important;
  text-shadow: 0 2px 8px rgba(2,6,23,.62);
}
.tinnie-overlay .panel button.ghost,
#menuOverlay .panel button.ghost,
#invOverlay .panel button.ghost,
#starterOverlay .panel button.ghost,
#monsterSelectOverlay .panel button.ghost,
#buildContextOverlay .panel button.ghost {
  border-color: rgba(125,211,252,.42) !important;
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(180deg, #475569 0%, #334155 46%, #2d1f4f 100%) !important;
}
#starterOverlay .starter-card,
#monsterSelectOverlay .monster-card,
#invOverlay .album-card,
#invOverlay .inventory-card,
.tinnie-overlay .card {
  color: #f8fafc !important;
  background: linear-gradient(180deg, rgba(20,64,92,.56), rgba(7,18,37,.66)) !important;
  border-color: rgba(103,232,249,.34) !important;
  box-shadow: inset 0 0 18px rgba(103,232,249,.08), 0 10px 24px rgba(0,0,0,.24) !important;
}
body.graphics-balanced .tinnie-album-overlay,
body.graphics-low .tinnie-album-overlay,
body.ui-lite .tinnie-album-overlay {
  background: rgba(2,6,23,.78) !important;
}
body.graphics-balanced .tinnie-album-panel,
body.graphics-low .tinnie-album-panel,
body.ui-lite .tinnie-album-panel,
body.graphics-balanced .tinnie-overlay .panel,
body.graphics-low .tinnie-overlay .panel,
body.ui-lite .tinnie-overlay .panel {
  box-shadow: 0 12px 28px rgba(0,0,0,.32) !important;
}
@media (max-width: 640px), (max-height: 520px) {
  .tinnie-reward-message-panel {
    width: min(94vw, 520px);
    max-height: calc(100dvh - 18px);
    padding: .9rem !important;
    border-radius: 18px !important;
  }
  .tinnie-album-preview-img {
    max-height: 24vh;
    margin: .55rem auto .75rem;
  }
  .tinnie-album-primary-btn,
  .tinnie-album-panel button {
    width: 100%;
    max-width: 320px;
  }
}

/* v231: Monster-/Team-Auswahl vor Battle und Trainerkampf im Battle-Look */
[data-monster-select="1"].overlay,
.tinnie-battle-select-overlay {
  align-items: center !important;
  justify-content: center !important;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  background: radial-gradient(circle at 50% 42%, rgba(45,31,79,.28), rgba(7,18,37,.66) 48%, rgba(2,6,23,.9)) !important;
  backdrop-filter: none !important;
  color: #f8fafc !important;
  box-sizing: border-box;
}
[data-monster-select="1"] > .card-panel,
[data-monster-select="1"] > .tinnie-monster-choice-panel {
  width: min(92vw, 760px) !important;
  max-height: min(86dvh, 590px) !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  color: #f8fafc !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(103,232,249,.14), transparent 34%),
    linear-gradient(180deg, rgba(45,31,79,.95), rgba(7,18,37,.97)) !important;
  border: 1px solid rgba(103,232,249,.44) !important;
  border-radius: 22px !important;
  padding: clamp(.9rem, 2.4vw, 1.35rem) !important;
  box-shadow: 0 22px 64px rgba(0,0,0,.42), inset 0 0 28px rgba(103,232,249,.08) !important;
}
[data-monster-select="1"] h3 {
  margin: 0 0 .75rem !important;
  color: #f8fafc !important;
  font: 950 clamp(1.2rem, 3.8vw, 2rem)/1.08 "Comic Sans MS", "Comic Neue", "Trebuchet MS", system-ui, sans-serif !important;
  text-align: center;
  text-shadow: 0 3px 0 rgba(2,6,23,.7), 0 0 18px rgba(103,232,249,.34);
}
[data-monster-select="1"] p {
  color: rgba(219,234,254,.9) !important;
  text-align: center;
}
[data-monster-select="1"] .card-grid,
[data-monster-select="1"] .tinnie-monster-choice-panel > div:not(.tinnies-trainer-select-footer) {
  gap: clamp(.55rem, 1.8vw, .9rem) !important;
}
[data-monster-select="1"] .monster-card {
  color: #f8fafc !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(103,232,249,.16), transparent 36%),
    linear-gradient(180deg, rgba(20,64,92,.62), rgba(7,18,37,.74)) !important;
  border: 1px solid rgba(103,232,249,.34) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 0 18px rgba(103,232,249,.08), 0 10px 24px rgba(0,0,0,.24) !important;
}
[data-monster-select="1"] .monster-card div {
  color: inherit !important;
}
[data-monster-select="1"] .monster-card img {
  background: rgba(7,18,37,.3);
  border-radius: 12px !important;
}
[data-monster-select="1"] .monster-card.clickable:hover,
[data-monster-select="1"] .monster-card.clickable:focus-visible,
[data-monster-select="1"] .monster-card.selected {
  border-color: rgba(250,204,21,.78) !important;
  box-shadow: 0 0 0 3px rgba(250,204,21,.18), inset 0 0 22px rgba(103,232,249,.14), 0 12px 28px rgba(0,0,0,.3) !important;
}
[data-monster-select="1"] .tinnies-trainer-select-footer,
[data-monster-select="1"] div[style*="justify-content: flex-end"] {
  background: linear-gradient(to top, rgba(7,18,37,.98), rgba(7,18,37,.82), rgba(7,18,37,0)) !important;
}
[data-monster-select="1"] button {
  min-height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(250,204,21,.58) !important;
  color: #f8fafc !important;
  font-weight: 900 !important;
  padding: .55rem 1rem !important;
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.5), transparent 34%),
    linear-gradient(180deg, #67e8f9 0%, #0ea5e9 48%, #2d1f4f 100%) !important;
  box-shadow: 0 0 0 2px rgba(250,204,21,.16), 0 10px 22px rgba(0,0,0,.26), 0 0 22px rgba(103,232,249,.24) !important;
  text-shadow: 0 2px 8px rgba(2,6,23,.62);
}
[data-monster-select="1"] button.ghost,
[data-monster-select="1"] button[data-tv-select-cancel] {
  border-color: rgba(125,211,252,.42) !important;
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(180deg, #475569 0%, #334155 46%, #2d1f4f 100%) !important;
}
body.graphics-balanced [data-monster-select="1"].overlay,
body.graphics-low [data-monster-select="1"].overlay,
body.ui-lite [data-monster-select="1"].overlay {
  background: rgba(2,6,23,.78) !important;
}
@media (max-width: 640px), (max-height: 520px) {
  [data-monster-select="1"] > .card-panel,
  [data-monster-select="1"] > .tinnie-monster-choice-panel {
    width: min(94vw, 540px) !important;
    max-height: calc(100dvh - 18px) !important;
    padding: .85rem !important;
  }
}

/* v233: Lesen/Schreiben staerker als Battle-Minispiele statt Formular */
.tinnie-speech-rune-stage {
  grid-template-rows: minmax(22px, 5vh) minmax(104px, 24vh) minmax(96px, 24vh) minmax(22px, 4vh) minmax(44px, 10vh) !important;
  gap: clamp(.18rem, .85vh, .62rem) !important;
}
.tinnie-task-mode-label {
  color: rgba(219,234,254,.9);
}
.tinnie-speech-target {
  width: clamp(300px, 54vw, 780px) !important;
  min-height: clamp(104px, 20vh, 178px) !important;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,.2), transparent 34%),
    linear-gradient(180deg, rgba(67,48,106,.76), rgba(7,18,37,.72)) !important;
  border-color: rgba(125,211,252,.58) !important;
  box-shadow: 0 0 0 1px rgba(250,204,21,.16), inset 0 0 38px rgba(103,232,249,.13), 0 0 36px rgba(103,232,249,.14) !important;
}
.tinnie-speech-target::after {
  content: "";
  position: absolute;
  inset: -18% 8%;
  border-radius: 999px;
  border: 2px solid rgba(250,204,21,.26);
  transform: rotate(-7deg);
  pointer-events: none;
}
.tinnie-speech-actions {
  gap: clamp(.5rem, 1.5vw, .9rem) !important;
}
.tinnie-speech-orb-button {
  width: clamp(92px, 13vw, 132px) !important;
  height: clamp(92px, 13vw, 132px) !important;
  min-width: 0 !important;
  border-radius: 999px !important;
  padding: 0 !important;
  font: 950 clamp(.86rem, 1.6vw, 1.08rem)/1 "Comic Sans MS", "Comic Neue", "Trebuchet MS", system-ui, sans-serif !important;
  color: #f8fafc !important;
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,.68), transparent 25%),
    radial-gradient(circle at 58% 64%, rgba(250,204,21,.34), transparent 30%),
    linear-gradient(180deg, #38bdf8 0%, #0ea5e9 46%, #2d1f4f 100%) !important;
  border: 2px solid rgba(250,204,21,.7) !important;
  box-shadow: 0 0 0 9px rgba(103,232,249,.1), 0 0 0 15px rgba(250,204,21,.06), 0 18px 32px rgba(0,0,0,.3), 0 0 30px rgba(103,232,249,.34) !important;
}
.tinnie-speech-listening .tinnie-speech-orb-button {
  box-shadow: 0 0 0 12px rgba(103,232,249,.18), 0 0 0 24px rgba(250,204,21,.11), 0 18px 34px rgba(0,0,0,.32), 0 0 42px rgba(103,232,249,.45) !important;
}
.tinnie-speech-small-action {
  min-width: clamp(84px, 10vw, 118px) !important;
  height: clamp(34px, 5vh, 42px) !important;
}
.tinnie-speech-result {
  min-height: 44px !important;
  max-height: 12vh;
  overflow: auto;
  padding: .55rem .8rem !important;
  border-radius: 999px !important;
  background: rgba(7,18,37,.34) !important;
}
.tinnie-speech-status {
  min-height: 1.1rem !important;
  font-size: clamp(.76rem, 1.5vh, .94rem);
  opacity: .86;
}
.tinnie-writing-stage {
  grid-template-rows: minmax(34px, 7vh) minmax(260px, 1fr) minmax(48px, 10vh) !important;
  gap: clamp(.18rem, .7vh, .55rem) !important;
  padding: clamp(.35rem, 1vh, .75rem) clamp(.45rem, 1.5vw, 1rem) !important;
}
.tinnie-writing-canvas-wrap {
  width: min(94vw, 940px) !important;
  height: min(62dvh, 500px) !important;
  min-height: min(52dvh, 280px) !important;
  border-radius: clamp(18px, 3.2vw, 30px) !important;
  border-color: rgba(125,211,252,.52) !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.1), transparent 28%),
    linear-gradient(90deg, rgba(250,204,21,.1), transparent 18%, transparent 82%, rgba(103,232,249,.1)),
    linear-gradient(180deg, rgba(63,43,99,.56), rgba(7,18,37,.66)) !important;
  box-shadow: inset 0 0 36px rgba(103,232,249,.12), 0 0 0 1px rgba(250,204,21,.12), 0 0 28px rgba(103,232,249,.16) !important;
}
.tinnie-writing-canvas-wrap::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 11%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(250,204,21,.36), rgba(103,232,249,.28), transparent);
  box-shadow: 0 0 16px rgba(250,204,21,.22);
  pointer-events: none;
}
.tinnie-writing-ink-canvas {
  filter: drop-shadow(0 0 5px rgba(103,232,249,.26)) drop-shadow(0 2px 0 rgba(2,6,23,.42)) !important;
}
.tinnie-writing-seal-action {
  min-width: clamp(112px, 16vw, 168px) !important;
  border-color: rgba(250,204,21,.72) !important;
}
.tinnie-writing-small-action {
  min-width: clamp(86px, 12vw, 126px) !important;
}
#taskOverlay.tinnie-writing-task .panel.task footer {
  gap: clamp(.38rem, 1.2vw, .7rem) !important;
}
body.graphics-balanced .tinnie-speech-target,
body.graphics-low .tinnie-speech-target,
body.ui-lite .tinnie-speech-target,
body.graphics-balanced .tinnie-writing-canvas-wrap,
body.graphics-low .tinnie-writing-canvas-wrap,
body.ui-lite .tinnie-writing-canvas-wrap {
  box-shadow: inset 0 0 16px rgba(103,232,249,.08), 0 8px 18px rgba(0,0,0,.22) !important;
}
@media (max-width: 720px), (max-height: 560px) {
  .tinnie-speech-rune-stage {
    grid-template-rows: minmax(20px, 5vh) minmax(86px, 22vh) minmax(76px, 21vh) minmax(18px, 4vh) minmax(38px, 10vh) !important;
  }
  .tinnie-speech-target {
    width: min(92vw, 620px) !important;
    min-height: clamp(86px, 22vh, 132px) !important;
  }
  .tinnie-speech-orb-button {
    width: clamp(78px, 20vw, 104px) !important;
    height: clamp(78px, 20vw, 104px) !important;
  }
  .tinnie-speech-small-action {
    min-width: 82px !important;
  }
  .tinnie-speech-result {
    max-height: 10vh;
    width: min(92vw, 560px);
  }
  .tinnie-writing-stage {
    grid-template-rows: minmax(30px, 7vh) minmax(230px, 1fr) minmax(46px, 10vh) !important;
    padding: .32rem .42rem !important;
  }
  .tinnie-writing-canvas-wrap {
    width: 94vw !important;
    height: min(66dvh, 460px) !important;
    min-height: 230px !important;
  }
  #taskOverlay.tinnie-writing-task .panel.task footer {
    transform: none;
  }
  .tinnie-writing-seal-action,
  .tinnie-writing-small-action {
    height: 38px !important;
    min-width: 86px !important;
    font-size: .86rem !important;
  }
}

/* v234: Lesen weiter vereinfachen, Schreiben sichtbar als Schreib-Battle */
.tinnie-speech-rune-stage {
  grid-template-rows: minmax(22px, 5vh) minmax(104px, 24vh) minmax(104px, 26vh) minmax(24px, 5vh) !important;
  grid-template-areas:
    "top"
    "question"
    "main"
    "status" !important;
}
.tinnie-speech-rune-stage .tinnie-task-result {
  display: none !important;
}
.tinnie-speech-rune-stage .tinnie-speech-actions {
  grid-area: main;
  align-self: center;
}
.tinnie-speech-rune-stage .tinnie-speech-status {
  grid-area: status;
  align-self: start;
  transform: none;
}
.tinnie-writing-rune-stage {
  grid-template-rows: minmax(72px, 16vh) minmax(280px, 1fr) minmax(52px, 10vh) !important;
  grid-template-areas:
    "top"
    "main"
    "actions" !important;
}
.tinnie-writing-spell-paper {
  border-width: 2px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.13), transparent 28%),
    repeating-linear-gradient(0deg, rgba(125,211,252,.07) 0 1px, transparent 1px 42px),
    linear-gradient(90deg, rgba(250,204,21,.11), transparent 18%, transparent 82%, rgba(103,232,249,.11)),
    linear-gradient(180deg, rgba(63,43,99,.58), rgba(7,18,37,.68)) !important;
}
.tinnie-writing-spell-paper::before {
  top: 16% !important;
  opacity: .75;
}
@media (max-width: 720px), (max-height: 560px) {
  .tinnie-speech-rune-stage {
    grid-template-rows: minmax(20px, 5vh) minmax(86px, 22vh) minmax(80px, 24vh) minmax(20px, 5vh) !important;
  }
  .tinnie-writing-rune-stage {
    grid-template-rows: minmax(58px, 14vh) minmax(250px, 1fr) minmax(46px, 10vh) !important;
  }
  .tinnie-writing-spell-paper {
    height: min(64dvh, 460px) !important;
    min-height: 250px !important;
  }
}

/* v235: gemeinsamer Aufgaben-Chrome fuer Lesen, Schreiben, Rechnen */
.tinnie-task-common-top {
  grid-area: top;
  position: relative;
  z-index: 5;
  width: min(94vw, 980px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .7rem;
  color: #dff7ff;
  font: 950 clamp(.74rem, 1.7vh, .96rem)/1.15 system-ui, sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.tinnie-task-common-kicker {
  justify-self: start;
  text-shadow: 0 2px 8px rgba(2,6,23,.72);
}
.tinnie-task-common-mode {
  justify-self: center;
  text-align: center;
  color: #f8fafc;
  text-shadow: 0 2px 8px rgba(2,6,23,.72), 0 0 14px rgba(103,232,249,.34);
}
.tinnie-task-common-close {
  justify-self: end;
  min-width: clamp(104px, 13vw, 152px) !important;
  height: clamp(34px, 5.2vh, 46px) !important;
}
.tinnie-task-common-question {
  grid-area: question;
  position: relative;
  z-index: 3;
  width: clamp(300px, 72vw, 940px) !important;
  min-height: clamp(108px, 22vh, 178px) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(.18rem, .7vh, .42rem);
  padding: clamp(.75rem, 2vh, 1.25rem) clamp(1rem, 3vw, 2rem) !important;
  text-align: center;
  overflow: visible;
  border-radius: 999px !important;
  border: 2px solid rgba(125,211,252,.58) !important;
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(67,48,106,.78), rgba(7,18,37,.72)) !important;
  box-shadow: 0 0 0 1px rgba(250,204,21,.16), inset 0 0 38px rgba(103,232,249,.13), 0 0 36px rgba(103,232,249,.15) !important;
  transform: translate3d(0, 0, 0);
  animation: tinnieTaskQuestionFloat 4.6s ease-in-out infinite;
}
.tinnie-task-common-question::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(103,232,249,.28), rgba(250,204,21,.42), rgba(103,232,249,.28), transparent);
  box-shadow: 0 0 18px rgba(103,232,249,.28);
  pointer-events: none;
}
.tinnie-task-common-prompt {
  position: relative;
  z-index: 2;
  color: rgba(219,234,254,.88);
  font-weight: 900;
  font-size: clamp(.8rem, 1.9vh, 1.05rem);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.tinnie-task-common-title {
  position: relative;
  z-index: 2;
  max-width: 94%;
  color: #f8fafc;
  font-family: "Comic Sans MS", "Comic Neue", "Trebuchet MS", system-ui, sans-serif;
  font-size: clamp(2.35rem, 7vw, 5.05rem);
  font-weight: 950;
  line-height: 1.02;
  white-space: normal;
  text-shadow: 0 3px 0 rgba(2,6,23,.72), 0 0 20px rgba(103,232,249,.45), 0 0 26px rgba(250,204,21,.14);
}
.tinnie-task-common-motion {
  position: absolute;
  inset: -24% 4%;
  pointer-events: none;
  z-index: 1;
}
.tinnie-task-common-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88%;
  height: 78%;
  border-radius: 999px;
  border: 2px solid rgba(103,232,249,.32);
  transform: translate(-50%, -50%) rotate(0deg);
  filter: drop-shadow(0 0 10px rgba(103,232,249,.22));
  animation: tinnieTaskOrbit 9s linear infinite;
}
.tinnie-task-common-orbit-2 {
  width: 70%;
  height: 55%;
  border-color: rgba(250,204,21,.28);
  animation-duration: 12s;
  animation-direction: reverse;
}
.tinnie-task-common-orbit-3 {
  width: 58%;
  height: 82%;
  border-color: rgba(103,232,249,.18);
  transform: translate(-50%, -50%) rotate(63deg);
  animation-duration: 14s;
}
.tinnie-task-common-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #dff7ff;
  box-shadow: 0 0 12px rgba(103,232,249,.65);
  opacity: .75;
  animation: tinnieTaskSpark 2.8s ease-in-out infinite;
}
.tinnie-task-common-spark-1 { left: 18%; top: 58%; }
.tinnie-task-common-spark-2 { left: 34%; top: 34%; animation-delay: -.6s; }
.tinnie-task-common-spark-3 { left: 72%; top: 60%; animation-delay: -1.2s; }
.tinnie-task-common-spark-4 { left: 82%; top: 42%; animation-delay: -1.8s; }
.tinnie-speech-target,
.tinnie-math-prompt-orb,
.tinnie-writing-common-question {
  width: clamp(300px, 72vw, 940px) !important;
  min-height: clamp(108px, 22vh, 178px) !important;
}
.tinnie-math-prompt-orb .tinnie-task-common-title {
  font-size: clamp(2.35rem, 7vw, 5.05rem) !important;
}
.tinnie-speech-target::after {
  display: none !important;
}
.tinnie-writing-common-active {
  grid-template-rows: minmax(34px, 7vh) minmax(86px, 20vh) minmax(250px, 1fr) minmax(52px, 10vh) !important;
  grid-template-areas:
    "top"
    "question"
    "main"
    "actions" !important;
}
.tinnie-writing-common-active .tinnie-writing-spell-paper {
  grid-area: main;
}
.tinnie-writing-common-question .tinnie-task-common-title {
  font-size: clamp(1.55rem, 4.8vw, 3.45rem);
}
.tinnie-speech-orb-button {
  animation: tinnieTaskButtonFloat 3.2s ease-in-out infinite;
}
body.graphics-balanced .tinnie-task-common-question,
body.graphics-low .tinnie-task-common-question,
body.ui-lite .tinnie-task-common-question {
  animation: none !important;
  box-shadow: inset 0 0 16px rgba(103,232,249,.08), 0 8px 18px rgba(0,0,0,.22) !important;
}
body.graphics-balanced .tinnie-task-common-orbit,
body.graphics-low .tinnie-task-common-orbit,
body.ui-lite .tinnie-task-common-orbit,
body.graphics-balanced .tinnie-task-common-spark,
body.graphics-low .tinnie-task-common-spark,
body.ui-lite .tinnie-task-common-spark {
  animation: none !important;
  opacity: .42;
}
@keyframes tinnieTaskQuestionFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -6px, 0) scale(1.008); }
}
@keyframes tinnieTaskOrbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes tinnieTaskSpark {
  0%, 100% { opacity: .28; transform: scale(.72); }
  50% { opacity: .95; transform: scale(1.16); }
}
@keyframes tinnieTaskButtonFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -5px, 0) scale(1.025); }
}
@media (max-width: 720px), (max-height: 560px) {
  .tinnie-task-common-top {
    width: min(94vw, 680px);
    grid-template-columns: 1fr auto 1fr;
    gap: .35rem;
    font-size: clamp(.68rem, 2.2vw, .84rem);
  }
  .tinnie-task-common-close {
    min-width: clamp(84px, 18vw, 120px) !important;
    height: 36px !important;
    font-size: .82rem !important;
  }
  .tinnie-task-common-question {
    width: min(92vw, 680px) !important;
    min-height: clamp(86px, 24vh, 132px) !important;
    padding: .7rem 1rem !important;
  }
  .tinnie-task-common-title {
    font-size: clamp(1.8rem, 8vw, 3.55rem);
  }
  .tinnie-writing-common-active {
    grid-template-rows: minmax(30px, 7vh) minmax(62px, 15vh) minmax(245px, 1fr) minmax(46px, 10vh) !important;
  }
  .tinnie-writing-common-question .tinnie-task-common-title {
    font-size: clamp(1.15rem, 5.8vw, 2.4rem);
  }
}

/* v270: Startmenue als Spielbuehne statt Webseiten-Karte */
#loginScreen.start-screen {
  align-items: stretch;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(circle at 50% 38%, rgba(45,31,79,.35), rgba(7,18,37,.60) 46%, rgba(2,6,23,.94)),
    linear-gradient(180deg, #071225 0%, #10213d 44%, #020617 100%);
}
#loginScreen.start-screen::before {
  content: "";
  position: fixed;
  left: 50%;
  bottom: clamp(22px, 7vh, 72px);
  width: min(92vw, 880px);
  height: clamp(96px, 20vh, 190px);
  transform: translateX(-50%) perspective(760px) rotateX(62deg);
  border-radius: 50%;
  border: 1px solid rgba(125,211,252,.26);
  background:
    radial-gradient(circle at 50% 50%, rgba(56,189,248,.22), rgba(14,165,233,.08) 46%, transparent 70%),
    repeating-radial-gradient(circle at 50% 50%, rgba(186,230,253,.18) 0 2px, transparent 2px 30px);
  box-shadow: 0 0 40px rgba(103,232,249,.12);
  pointer-events: none;
}
#loginScreen.start-screen::after {
  content: "";
  position: fixed;
  left: 50%;
  bottom: clamp(64px, 12vh, 132px);
  width: min(82vw, 760px);
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(250,204,21,.62), rgba(103,232,249,.44), transparent);
  box-shadow: 0 0 22px rgba(250,204,21,.24);
  pointer-events: none;
}
#loginScreen .start-card.card.lg,
#loginScreen .start-card {
  position: relative;
  z-index: 1;
  align-self: center;
  width: min(94vw, 760px);
  min-height: auto;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  box-sizing: border-box;
  padding: clamp(.95rem, 2.4vw, 1.45rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}
#loginScreen .start-card::before {
  content: "";
  position: absolute;
  inset: clamp(.75rem, 1.8vw, 1.1rem) clamp(.2rem, 1vw, .8rem) auto;
  height: clamp(142px, 28vh, 238px);
  border-radius: 999px;
  border: 2px solid rgba(125,211,252,.48);
  background:
    radial-gradient(circle at 50% 24%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(67,48,106,.76), rgba(7,18,37,.72));
  box-shadow: 0 0 0 1px rgba(250,204,21,.14), inset 0 0 38px rgba(103,232,249,.12), 0 0 36px rgba(45,31,79,.34);
  pointer-events: none;
}
#loginScreen .start-card-glow {
  display: none;
}
#loginScreen .start-hero {
  position: relative;
  z-index: 2;
  width: min(92vw, 700px);
  min-height: clamp(128px, 26vh, 220px);
  margin: 0 auto clamp(.55rem, 1.5vh, .9rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  gap: clamp(.8rem, 2.6vw, 1.25rem);
  text-align: left;
}
#loginScreen .start-logo-badge {
  width: clamp(76px, 12vw, 118px);
  height: clamp(76px, 12vw, 118px);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #f8fafc;
  font: 950 clamp(2.2rem, 5vw, 4rem)/1 "Comic Sans MS", "Comic Neue", "Trebuchet MS", system-ui, sans-serif;
  text-shadow: 0 3px 0 rgba(2,6,23,.72), 0 0 18px rgba(103,232,249,.46);
  border: 2px solid rgba(250,204,21,.70);
  background:
    radial-gradient(circle at 35% 24%, rgba(255,255,255,.68), transparent 28%),
    radial-gradient(circle at 58% 64%, rgba(250,204,21,.34), transparent 30%),
    linear-gradient(180deg, #38bdf8 0%, #0ea5e9 46%, #2d1f4f 100%);
  box-shadow: 0 0 0 9px rgba(103,232,249,.10), 0 0 0 15px rgba(250,204,21,.06), 0 18px 32px rgba(0,0,0,.30), 0 0 30px rgba(103,232,249,.34);
}
#loginScreen .start-kicker {
  color: rgba(219,234,254,.88);
  font: 950 clamp(.8rem, 1.6vw, 1rem)/1.1 system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(2,6,23,.72);
}
#loginScreen .start-card h1 {
  margin: .15rem 0 .4rem;
  color: #f8fafc;
  font-family: "Comic Sans MS", "Comic Neue", "Trebuchet MS", system-ui, sans-serif;
  font-size: clamp(2.35rem, 6.5vw, 4.8rem);
  font-weight: 950;
  line-height: .98;
  letter-spacing: 0;
  text-shadow: 0 4px 0 rgba(2,6,23,.70), 0 0 22px rgba(103,232,249,.46), 0 0 28px rgba(250,204,21,.16);
}
#loginScreen .start-subtitle {
  max-width: 38rem;
  margin: 0;
  color: rgba(219,234,254,.92);
  font-weight: 800;
  line-height: 1.35;
  text-shadow: 0 2px 8px rgba(2,6,23,.55);
}
#loginScreen .start-pill-row {
  position: relative;
  z-index: 2;
  justify-content: center;
  gap: clamp(.35rem, 1vw, .6rem);
  margin: 0 auto clamp(.65rem, 1.8vh, 1rem);
}
#loginScreen .start-pill {
  min-height: 30px;
  padding: .34rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(103,232,249,.44);
  color: #dff7ff;
  background: rgba(7,18,37,.48);
  box-shadow: inset 0 0 14px rgba(103,232,249,.08);
}
#loginScreen .start-hint {
  position: relative;
  z-index: 2;
  width: min(92vw, 560px);
  margin: 0 auto clamp(.75rem, 2vh, 1.1rem);
  color: rgba(219,234,254,.82);
  font-size: clamp(.82rem, 1.8vw, .95rem);
  line-height: 1.35;
}
#loginScreen .guest-start-choice {
  position: relative;
  z-index: 2;
  width: min(92vw, 680px);
  margin: 0 auto clamp(.75rem, 2vh, 1rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.55rem, 1.8vw, .9rem);
}
#loginScreen .start-action {
  min-height: clamp(112px, 20vh, 154px);
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-items: center;
  gap: .55rem;
  padding: clamp(.7rem, 1.8vw, 1rem);
  border-radius: clamp(20px, 3vw, 30px);
  border: 1px solid rgba(103,232,249,.44);
  background:
    radial-gradient(circle at 50% 10%, rgba(103,232,249,.16), transparent 36%),
    linear-gradient(180deg, rgba(20,64,92,.62), rgba(7,18,37,.76));
  color: #f8fafc;
  box-shadow: inset 0 0 18px rgba(103,232,249,.08), 0 10px 24px rgba(0,0,0,.24);
  text-align: center;
  transform: translate3d(0,0,0);
}
#loginScreen .start-action:hover,
#loginScreen .start-action:focus-visible {
  outline: none;
  border-color: rgba(250,204,21,.78);
  box-shadow: 0 0 0 3px rgba(250,204,21,.18), inset 0 0 22px rgba(103,232,249,.14), 0 12px 28px rgba(0,0,0,.30);
  transform: translateY(-2px);
}
#loginScreen .start-action-icon {
  width: clamp(54px, 9vw, 78px);
  height: clamp(54px, 9vw, 78px);
  border-radius: 999px;
  color: #f8fafc;
  font: 950 clamp(1.45rem, 3.2vw, 2.15rem)/1 system-ui, sans-serif;
  border: 2px solid rgba(250,204,21,.64);
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.58), transparent 34%),
    linear-gradient(180deg, #67e8f9 0%, #0ea5e9 46%, #2d1f4f 100%);
  box-shadow: 0 0 0 5px rgba(250,204,21,.12), 0 0 24px rgba(103,232,249,.25);
}
#loginScreen .start-action-copy {
  align-items: center;
  gap: .28rem;
}
#loginScreen .start-action-title {
  color: #f8fafc;
  font: 950 clamp(1rem, 2vw, 1.2rem)/1.08 "Comic Sans MS", "Comic Neue", "Trebuchet MS", system-ui, sans-serif;
  text-shadow: 0 2px 8px rgba(2,6,23,.62);
}
#loginScreen .start-action-text {
  color: rgba(219,234,254,.86);
  font-size: clamp(.78rem, 1.5vw, .9rem);
  line-height: 1.25;
}
#loginScreen .start-action-primary,
#loginScreen .start-action-secondary,
#loginScreen .start-action-ghost {
  background:
    radial-gradient(circle at 50% 10%, rgba(103,232,249,.16), transparent 36%),
    linear-gradient(180deg, rgba(20,64,92,.62), rgba(7,18,37,.76));
}
#loginScreen .start-action-secondary .start-action-icon {
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.54), transparent 34%),
    linear-gradient(180deg, #bef264, #22c55e 52%, #2d1f4f 100%);
  color: #052e16;
  text-shadow: none;
}
#loginScreen .start-action-ghost .start-action-icon {
  border-color: rgba(125,211,252,.54);
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.34), transparent 34%),
    linear-gradient(180deg, #475569 0%, #334155 46%, #2d1f4f 100%);
}
#loginScreen .guest-import-box {
  position: relative;
  z-index: 2;
  width: min(92vw, 620px);
  box-sizing: border-box;
  margin: 0 auto .85rem;
  padding: clamp(.85rem, 2vw, 1.1rem);
  border-radius: 22px;
  border: 1px solid rgba(103,232,249,.44);
  background:
    radial-gradient(circle at 50% 12%, rgba(103,232,249,.14), transparent 34%),
    linear-gradient(180deg, rgba(45,31,79,.95), rgba(7,18,37,.97));
  box-shadow: 0 16px 42px rgba(0,0,0,.34), inset 0 0 24px rgba(103,232,249,.08);
  text-align: left;
}
#loginScreen .guest-import-title {
  color: #f8fafc;
  font-weight: 950;
}
#loginScreen .guest-import-text,
#loginScreen .guest-import-box label {
  color: rgba(219,234,254,.88);
}
#loginScreen #guestImportCode {
  border-color: rgba(125,211,252,.34);
  background: rgba(2,6,23,.74);
  color: #eff7ff;
  box-shadow: inset 0 0 16px rgba(103,232,249,.06);
}
#loginScreen .guest-import-actions {
  justify-content: center;
}
#loginScreen .guest-import-actions button,
#loginScreen #btnImportGuest,
#loginScreen #btnCancelGuestImport {
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(250,204,21,.58);
  color: #f8fafc;
  font-weight: 900;
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.5), transparent 34%),
    linear-gradient(180deg, #67e8f9 0%, #0ea5e9 48%, #2d1f4f 100%);
  box-shadow: 0 0 0 2px rgba(250,204,21,.16), 0 10px 22px rgba(0,0,0,.26), 0 0 22px rgba(103,232,249,.20);
  text-shadow: 0 2px 8px rgba(2,6,23,.62);
}
#loginScreen #btnCancelGuestImport.ghost {
  border-color: rgba(125,211,252,.42);
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(180deg, #475569 0%, #334155 46%, #2d1f4f 100%);
}
#loginScreen #loginMsg.msg {
  position: relative;
  z-index: 2;
  color: rgba(219,234,254,.92);
  text-align: center;
  text-shadow: 0 2px 8px rgba(2,6,23,.62);
}
#loginScreen #loginMsg.msg.error {
  color: #fecdd3;
}
#loginScreen .start-footer-note {
  position: relative;
  z-index: 2;
  width: fit-content;
  max-width: min(92vw, 560px);
  margin: .35rem auto 0;
  padding: .46rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(250,204,21,.28);
  background: rgba(7,18,37,.38);
  color: rgba(254,243,199,.86);
  font-size: .82rem;
  line-height: 1.25;
}
#loginScreen .start-legal-links {
  position: relative;
  z-index: 2;
  justify-content: center;
  margin-top: .7rem;
  opacity: .72;
}
#loginScreen .start-legal-links a {
  color: #9ddcff;
}
body.ui-lite #loginScreen.start-screen::before,
body.graphics-balanced #loginScreen.start-screen::before,
body.graphics-low #loginScreen.start-screen::before {
  background: radial-gradient(circle at 50% 50%, rgba(56,189,248,.14), rgba(14,165,233,.05) 48%, transparent 70%);
  box-shadow: none;
}
body.ui-lite #loginScreen .start-action,
body.graphics-balanced #loginScreen .start-action,
body.graphics-low #loginScreen .start-action {
  transition: none !important;
  box-shadow: inset 0 0 12px rgba(103,232,249,.06), 0 6px 14px rgba(0,0,0,.22);
}
@media (max-width: 760px), (max-height: 620px) {
  #loginScreen.start-screen {
    align-items: flex-start;
  }
  #loginScreen .start-card.card.lg,
  #loginScreen .start-card {
    max-height: none;
    padding: .72rem .55rem .9rem;
  }
  #loginScreen .start-card::before {
    height: clamp(112px, 24vh, 168px);
  }
  #loginScreen .start-hero {
    min-height: clamp(110px, 23vh, 162px);
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7rem;
  }
  #loginScreen .guest-start-choice {
    grid-template-columns: 1fr;
    width: min(94vw, 430px);
    gap: .55rem;
  }
  #loginScreen .start-action {
    min-height: 76px;
    grid-template-rows: none;
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    text-align: left;
    border-radius: 20px;
  }
  #loginScreen .start-action-copy {
    align-items: flex-start;
  }
  #loginScreen .start-action-icon {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }
}
@media (max-width: 520px) {
  #loginScreen .start-hero {
    text-align: center;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: .45rem;
  }
  #loginScreen .start-card::before {
    inset: .65rem .25rem auto;
    height: 210px;
  }
  #loginScreen .start-card h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }
  #loginScreen .start-subtitle {
    font-size: .9rem;
  }
}

/* v279: einheitliches neutrales Blau/Schiefer-Design ohne alte Farbwelt-Overrides */
:root {
  --tinnie-ui-bg: #24383f;
  --tinnie-ui-bg-2: #17262c;
  --tinnie-ui-panel: rgba(32, 50, 56, .94);
  --tinnie-ui-panel-soft: rgba(52, 78, 86, .78);
  --tinnie-ui-border: rgba(210, 232, 238, .48);
  --tinnie-ui-text: #f6fbfc;
  --tinnie-ui-muted: rgba(232, 244, 246, .86);
  --tinnie-ui-blue: #4f93b2;
  --tinnie-ui-blue-light: #91d7eb;
  --tinnie-ui-slate: #5d7e8c;
  --tinnie-ui-slate-dark: #334b52;
  --tinnie-ui-gold: #ffe16f;
}

#loginScreen.start-screen,
#menuOverlay,
#starterOverlay,
#monsterSelectOverlay,
#invOverlay,
#buildContextOverlay,
.tinnie-overlay,
.tinnie-album-overlay,
[data-monster-select="1"].overlay,
.tinnie-battle-select-overlay {
  background:
    radial-gradient(circle at 50% 18%, rgba(228,243,246,.26), transparent 36%),
    linear-gradient(180deg, rgba(124,154,166,.58), rgba(38,58,63,.88)) !important;
}

[data-world-battle-theme="1"].tinnie-battle-select-overlay,
[data-world-battle-theme="1"].tinnie-task-overlay,
[data-world-battle-theme="1"].tinnie-album-overlay {
  background:
    radial-gradient(circle at 50% 18%, rgba(238,246,250,.40), transparent 34%),
    linear-gradient(180deg, rgba(238,246,250,.44) 0%, rgba(218,231,235,.30) 31%, rgba(104,123,118,.28) 32%, rgba(52,68,56,.42) 100%),
    linear-gradient(180deg, var(--tinnie-battle-sky, #87bfff) 0%, var(--tinnie-battle-sky, #87bfff) 34%, var(--tinnie-battle-ground, #4faa6f) 35%, var(--tinnie-battle-ground, #4faa6f) 100%) !important;
}

#loginScreen .start-card.card.lg,
#loginScreen .start-card,
#menuOverlay .panel,
#starterOverlay .panel,
#monsterSelectOverlay .panel,
#invOverlay .panel,
#buildContextOverlay .panel,
.tinnie-overlay .panel,
.tinnie-overlay .card,
.tinnie-album-panel,
#loginScreen .guest-import-box,
[data-monster-select="1"] > .card-panel,
[data-monster-select="1"] > .tinnie-monster-choice-panel,
[data-world-battle-theme="1"] > .tinnie-monster-choice-panel,
[data-world-battle-theme="1"] > .card-panel,
[data-world-battle-theme="1"].tinnie-task-overlay .tinnie-math-battle-stage,
[data-world-battle-theme="1"].tinnie-task-overlay .tinnie-task-common-question {
  color: var(--tinnie-ui-text) !important;
  border-color: var(--tinnie-ui-border) !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(60,83,90,.86), rgba(26,42,47,.94)) !important;
  box-shadow: 0 18px 42px rgba(16,30,35,.34), inset 0 0 22px rgba(255,255,255,.07) !important;
}

#loginScreen .start-card.card.lg,
#loginScreen .start-card {
  width: min(94vw, 760px) !important;
  max-height: calc(100dvh - 24px);
  overflow: auto;
  box-sizing: border-box;
}
#loginScreen .start-card::before {
  border-color: rgba(255,225,111,.58) !important;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.15), transparent 34%),
    linear-gradient(135deg, rgba(174,125,56,.84), rgba(80,98,58,.76) 58%, rgba(48,72,76,.78)) !important;
  box-shadow: inset 0 0 28px rgba(255,255,255,.08), 0 12px 30px rgba(16,30,35,.24) !important;
}

#loginScreen .guest-start-choice {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: min(92vw, 680px) !important;
  gap: clamp(.45rem, 1.4vw, .85rem) !important;
}
#loginScreen .start-action {
  min-width: 0 !important;
  min-height: clamp(92px, 15vh, 142px) !important;
  display: grid !important;
  grid-template-rows: auto 1fr !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: .42rem !important;
  padding: clamp(.55rem, 1.4vw, .9rem) !important;
  border-radius: clamp(16px, 2.6vw, 26px) !important;
  overflow: hidden !important;
}
#loginScreen .start-action-copy {
  min-width: 0;
  align-items: center !important;
}
#loginScreen .start-action-title,
#loginScreen .start-action-text {
  max-width: 100%;
  overflow-wrap: anywhere;
}
#loginScreen .start-action-icon,
#loginScreen .start-logo-badge,
.tinnie-speech-orb-button {
  border-color: rgba(255,225,111,.78) !important;
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.46), transparent 34%),
    linear-gradient(135deg, #ffd978 0%, #d29343 48%, #57783c 100%) !important;
  color: #fffdf0 !important;
  box-shadow: 0 0 0 5px rgba(255,225,111,.10), 0 10px 24px rgba(15,32,38,.22) !important;
}
#loginScreen .start-action-secondary .start-action-icon {
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.44), transparent 34%),
    linear-gradient(135deg, #b9de73 0%, #80b957 52%, #416f55 100%) !important;
  color: #102314 !important;
}
#loginScreen .start-action-ghost .start-action-icon {
  border-color: rgba(202,225,232,.72) !important;
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(135deg, #8faeba 0%, #5d7e8c 48%, #334b52 100%) !important;
  color: #f6fbfc !important;
}

#menuOverlay .panel h2,
#menuOverlay .panel h3,
#starterOverlay .panel h2,
#starterOverlay .panel h3,
#monsterSelectOverlay .panel h2,
#monsterSelectOverlay .panel h3,
#invOverlay .panel h2,
#invOverlay .panel h3,
#buildContextOverlay .panel h2,
#buildContextOverlay .panel h3,
.tinnie-overlay .panel h2,
.tinnie-overlay .panel h3,
[data-monster-select="1"] h3,
.tinnie-album-panel h3,
#loginScreen .start-card h1 {
  color: var(--tinnie-ui-text) !important;
  text-shadow: 0 2px 10px rgba(8,22,28,.45) !important;
}
#menuOverlay .panel p,
#starterOverlay .panel p,
#monsterSelectOverlay .panel p,
#invOverlay .panel p,
#buildContextOverlay .panel p,
.tinnie-overlay .panel p,
[data-monster-select="1"] p,
#menuOverlay label,
#starterOverlay label,
#monsterSelectOverlay label,
#invOverlay label,
#buildContextOverlay label,
.tinnie-overlay label,
#loginScreen .start-subtitle,
#loginScreen .start-hint,
#loginScreen .start-action-text {
  color: var(--tinnie-ui-muted) !important;
}

#menuOverlay input,
#menuOverlay select,
#menuOverlay textarea,
#starterOverlay input,
#starterOverlay select,
#starterOverlay textarea,
#monsterSelectOverlay input,
#monsterSelectOverlay select,
#monsterSelectOverlay textarea,
#invOverlay input,
#invOverlay select,
#invOverlay textarea,
#buildContextOverlay input,
#buildContextOverlay select,
#buildContextOverlay textarea,
.tinnie-overlay input,
.tinnie-overlay select,
.tinnie-overlay textarea {
  color: var(--tinnie-ui-text) !important;
  border-color: rgba(214,235,241,.38) !important;
  background: rgba(22,36,42,.74) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04) !important;
}

#menuOverlay .panel button,
#starterOverlay .panel button,
#monsterSelectOverlay .panel button,
#invOverlay .panel button,
#buildContextOverlay .panel button,
.tinnie-overlay .panel button,
.tinnie-task-btn-primary,
#taskOverlay.tinnie-writing-task button.tinnie-task-btn-primary,
.tinnie-album-primary-btn,
.tinnie-album-panel button,
[data-monster-select="1"] button,
[data-world-battle-theme="1"] button,
[data-world-battle-theme="1"] .tinnie-task-btn-primary,
#loginScreen .start-action,
#loginScreen #btnImportGuest,
#loginScreen .guest-import-actions button {
  border-color: rgba(224,241,246,.76) !important;
  color: #f8fff7 !important;
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.42), transparent 34%),
    linear-gradient(135deg, var(--tinnie-ui-blue-light) 0%, var(--tinnie-ui-blue) 50%, #2f615f 100%) !important;
  box-shadow: 0 0 0 2px rgba(145,215,235,.14), 0 9px 20px rgba(15,32,38,.24), inset 0 0 13px rgba(255,255,255,.10) !important;
  text-shadow: 0 2px 8px rgba(11,31,39,.48) !important;
}
#menuOverlay .panel button.ghost,
#starterOverlay .panel button.ghost,
#monsterSelectOverlay .panel button.ghost,
#invOverlay .panel button.ghost,
#buildContextOverlay .panel button.ghost,
.tinnie-overlay .panel button.ghost,
.tinnie-task-btn-muted,
#taskOverlay.tinnie-writing-task button.tinnie-task-btn-muted,
[data-monster-select="1"] button.ghost,
[data-monster-select="1"] button[data-tv-select-cancel],
[data-world-battle-theme="1"] button.ghost,
#loginScreen #btnCancelGuestImport.ghost,
#loginScreen .start-action-ghost {
  border-color: rgba(202,225,232,.62) !important;
  color: #f4fbfc !important;
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(135deg, var(--tinnie-ui-slate) 0%, #5d7e8c 48%, var(--tinnie-ui-slate-dark) 100%) !important;
  box-shadow: 0 8px 18px rgba(15,32,38,.22), inset 0 0 12px rgba(255,255,255,.07) !important;
}
.tinnie-task-btn-danger,
[data-world-battle-theme="1"] .tinnie-task-btn-danger {
  border-color: rgba(255,198,198,.66) !important;
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.30), transparent 34%),
    linear-gradient(135deg, #d88a8a 0%, #a94f5d 48%, #553642 100%) !important;
}
#menuOverlay .panel button:hover,
#menuOverlay .panel button:focus-visible,
#starterOverlay .panel button:hover,
#starterOverlay .panel button:focus-visible,
#monsterSelectOverlay .panel button:hover,
#monsterSelectOverlay .panel button:focus-visible,
#invOverlay .panel button:hover,
#invOverlay .panel button:focus-visible,
#buildContextOverlay .panel button:hover,
#buildContextOverlay .panel button:focus-visible,
.tinnie-overlay .panel button:hover,
.tinnie-overlay .panel button:focus-visible,
[data-monster-select="1"] button:hover,
[data-monster-select="1"] button:focus-visible,
[data-world-battle-theme="1"] button:hover,
[data-world-battle-theme="1"] button:focus-visible,
#loginScreen .start-action:hover,
#loginScreen .start-action:focus-visible,
.tinnie-task-btn:hover,
.tinnie-task-btn:focus-visible {
  border-color: rgba(255,225,111,.88) !important;
  box-shadow: 0 0 0 4px rgba(255,225,111,.22), 0 10px 22px rgba(15,32,38,.26), 0 0 18px rgba(145,215,235,.24) !important;
}

#monsterSelectOverlay .monster-card,
#starterOverlay .starter-card,
#invOverlay .album-card,
#invOverlay .inventory-card,
.tinnie-overlay .card,
[data-monster-select="1"] .monster-card,
[data-world-battle-theme="1"] .monster-card {
  color: var(--tinnie-ui-text) !important;
  border-color: rgba(214,235,241,.36) !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(73,100,108,.68), rgba(31,49,54,.84)) !important;
  box-shadow: inset 0 0 16px rgba(255,255,255,.06), 0 10px 24px rgba(15,32,38,.22) !important;
}
#monsterSelectOverlay .monster-card.clickable:hover,
#monsterSelectOverlay .monster-card.clickable:focus-visible,
#monsterSelectOverlay .monster-card.selected,
[data-monster-select="1"] .monster-card.clickable:hover,
[data-monster-select="1"] .monster-card.clickable:focus-visible,
[data-monster-select="1"] .monster-card.selected,
[data-world-battle-theme="1"] .monster-card.clickable:hover,
[data-world-battle-theme="1"] .monster-card.clickable:focus-visible,
[data-world-battle-theme="1"] .monster-card.selected {
  border-color: rgba(255,225,111,.86) !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(89,126,139,.76), rgba(37,67,76,.88)) !important;
  box-shadow: 0 0 0 4px rgba(255,225,111,.20), inset 0 0 18px rgba(145,215,235,.13), 0 12px 26px rgba(15,32,38,.26) !important;
}

#menuOverlay .row,
#starterOverlay .row,
#monsterSelectOverlay .row,
#invOverlay .row,
#battleOverlay .row,
#taskOverlay .panel.task footer,
.tinnie-task-actions,
.tinnies-trainer-select-footer,
[data-monster-select="1"] .tinnies-trainer-select-footer {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: .55rem !important;
}
#menuOverlay .row button,
#starterOverlay .row button,
#monsterSelectOverlay .row button,
#invOverlay .row button,
#battleOverlay .row button,
#taskOverlay .panel.task footer button,
.tinnie-task-actions button,
.tinnies-trainer-select-footer button,
[data-monster-select="1"] .tinnies-trainer-select-footer button {
  width: auto !important;
  min-width: clamp(108px, 18vw, 170px) !important;
  max-width: min(44vw, 190px) !important;
  flex: 0 1 auto !important;
  white-space: normal !important;
}
#menuOverlay #btnCloseMenu,
#invOverlay #btnInvClose {
  display: block !important;
  width: min(72vw, 220px) !important;
  margin: .75rem auto 0 !important;
}

.tinnie-math-fast-battle {
  background: rgba(0,0,0,.10) !important;
  backdrop-filter: none !important;
}
.tinnie-math-fast-battle .tinnie-math-battle-stage {
  grid-template-rows: auto auto auto auto !important;
  grid-template-areas: "top" "question" "answer" "input" !important;
  align-content: center !important;
  gap: clamp(.5rem, 1.4vh, .9rem) !important;
  padding: clamp(.55rem, 1.6vh, 1rem) clamp(.65rem, 2vw, 1.4rem) !important;
}
.tinnie-math-fast-battle .tinnie-math-orbit-field {
  display: none !important;
}
.tinnie-math-fast-battle .tinnie-math-answer-energy {
  min-height: 54px !important;
  min-width: min(70vw, 320px) !important;
  padding: .35rem .85rem !important;
  font-size: clamp(1.25rem, 3.8vh, 1.9rem) !important;
  border-radius: 16px !important;
  background: rgba(222,235,236,.18) !important;
  border-color: rgba(224,239,242,.48) !important;
  color: #f5fbfc !important;
  box-shadow: inset 0 0 18px rgba(255,255,255,.08), 0 8px 18px rgba(24,43,45,.18) !important;
}
.tinnie-math-fast-battle .tinnie-task-common-question {
  min-height: 92px !important;
  width: min(82vw, 720px) !important;
  padding: .9rem 1.2rem !important;
}
.tinnie-math-fast-battle .tinnie-math-input-zone {
  grid-area: input !important;
  display: grid !important;
  grid-template-rows: auto minmax(24px, auto) auto !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  align-items: center !important;
  width: min(94vw, 820px) !important;
  max-width: 820px !important;
  gap: clamp(.36rem, 1.1vh, .7rem) !important;
}
.tinnie-math-fast-battle .tinnie-math-rune-orbit {
  display: grid !important;
  width: min(92vw, 720px) !important;
  max-width: 720px !important;
  grid-template-columns: repeat(5, minmax(50px, 1fr)) !important;
  gap: clamp(.38rem, .9vw, .62rem) !important;
  justify-content: center !important;
  align-items: center !important;
  overflow: visible !important;
  padding: .55rem !important;
  border-radius: 18px !important;
  border-color: rgba(226,238,240,.42) !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.18), transparent 30%),
    linear-gradient(135deg, rgba(224,236,239,.22), rgba(91,116,112,.20)),
    rgba(48,66,62,.56) !important;
  box-shadow: inset 0 0 18px rgba(255,255,255,.08), 0 0 18px rgba(28,45,48,.12) !important;
}
.tinnie-math-fast-battle .tinnie-math-rune {
  min-width: 0 !important;
  width: 100% !important;
  height: clamp(48px, 8vh, 66px) !important;
  padding: 0 !important;
  border-radius: 14px !important;
  border-color: rgba(214,235,241,.62) !important;
  color: #fffdf0 !important;
  font-size: clamp(1.5rem, 4vh, 2.2rem) !important;
  font-family: "Comic Sans MS", "Comic Neue", "Trebuchet MS", system-ui, sans-serif !important;
  font-weight: 900 !important;
  transform: none !important;
  background:
    radial-gradient(circle at 28% 16%, rgba(255,255,255,.38), transparent 32%),
    linear-gradient(135deg, #7fc3dd 0%, #4f8ca9 46%, #2f615f 100%) !important;
  box-shadow: 0 8px 16px rgba(20,40,46,.24), inset 0 0 13px rgba(255,255,255,.12) !important;
}
.tinnie-math-fast-battle .tinnie-math-rune:hover,
.tinnie-math-fast-battle .tinnie-math-rune:focus,
.tinnie-math-fast-battle .tinnie-math-rune-selected {
  border-color: rgba(255,222,112,.88) !important;
  box-shadow: 0 0 0 4px rgba(255,222,112,.28), 0 10px 18px rgba(20,40,46,.24), 0 0 18px rgba(125,195,221,.24) !important;
}
.tinnie-math-fast-battle .tinnie-math-action-row {
  display: flex !important;
  grid-row: 3 !important;
  justify-content: center !important;
  align-items: center !important;
  width: min(92vw, 520px) !important;
  max-width: 520px !important;
  gap: clamp(.55rem, 2vw, .95rem) !important;
  margin: 0 auto !important;
  flex-wrap: nowrap !important;
}
.tinnie-math-fast-battle .tinnie-math-action-row .tinnie-math-rune {
  width: clamp(128px, 22vw, 190px) !important;
  min-width: clamp(128px, 22vw, 190px) !important;
  max-width: 190px !important;
  flex: 0 1 clamp(128px, 22vw, 190px) !important;
  height: clamp(42px, 6vh, 54px) !important;
  font-size: clamp(.95rem, 2.4vh, 1.15rem) !important;
}
.tinnie-math-fast-battle .tinnie-math-rune-primary,
.tinnie-math-fast-battle .tinnie-task-btn,
.tinnie-math-fast-battle button:not(.tinnie-math-rune) {
  border-color: rgba(224,241,246,.82) !important;
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.48), transparent 34%),
    linear-gradient(135deg, #91d7eb 0%, #4f93b2 50%, #2f615f 100%) !important;
  color: #f8fff7 !important;
  text-shadow: 0 2px 8px rgba(11,31,39,.48) !important;
}
.tinnie-math-fast-battle .tinnie-math-rune-clear {
  border-color: rgba(202,225,232,.72) !important;
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.32), transparent 34%),
    linear-gradient(135deg, #8fb0bd 0%, #5d7e8c 48%, #334b52 100%) !important;
}
.tinnie-math-fast-battle .tinnie-math-answer-chip,
.tinnie-math-fast-battle .tinnie-math-flying-rune {
  border-color: rgba(255,231,135,.86) !important;
  background:
    radial-gradient(circle at 36% 25%, rgba(255,255,255,.56), transparent 38%),
    radial-gradient(circle at 50% 58%, #ffe48a, #d9a93e 68%, #655026) !important;
  color: #241d09 !important;
}
.tinnie-math-fast-battle .tinnie-math-orbit-spark,
.tinnie-math-fast-battle .tinnie-task-common-spark {
  background: radial-gradient(circle at 35% 30%, #fff, #91d7eb 42%, rgba(255,222,112,.18) 74%) !important;
  box-shadow: 0 0 10px rgba(145,215,235,.24) !important;
}

@media (max-width: 760px), (max-height: 620px) {
  #loginScreen.start-screen {
    align-items: center !important;
  }
  #loginScreen .start-card.card.lg,
  #loginScreen .start-card {
    width: min(96vw, 760px) !important;
    padding: .72rem .55rem .9rem !important;
  }
  #loginScreen .guest-start-choice {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(94vw, 640px) !important;
    gap: .45rem !important;
  }
  #loginScreen .start-action {
    min-height: 78px !important;
    grid-template-rows: auto 1fr !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center !important;
    text-align: center !important;
    padding: .5rem .35rem !important;
    border-radius: 16px !important;
  }
  #loginScreen .start-action-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.18rem !important;
  }
  #loginScreen .start-action-title {
    font-size: clamp(.78rem, 2.7vw, 1rem) !important;
    line-height: 1.05 !important;
  }
  #loginScreen .start-action-text {
    font-size: clamp(.66rem, 2.2vw, .82rem) !important;
    line-height: 1.12 !important;
  }
}
@media (max-width: 430px) {
  #loginScreen .start-hero {
    text-align: center;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: .45rem;
  }
  #loginScreen .guest-start-choice {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #loginScreen .start-action {
    min-height: 72px !important;
  }
  #loginScreen .start-action-icon {
    width: 38px !important;
    height: 38px !important;
  }
  #loginScreen .start-action-text {
    display: none !important;
  }
}
@media (orientation: portrait) {
  .tinnie-math-fast-battle .tinnie-math-battle-stage {
    grid-template-rows: auto auto auto auto !important;
    gap: clamp(.45rem, 1vh, .8rem) !important;
    padding: max(.55rem, env(safe-area-inset-top)) .65rem max(.7rem, env(safe-area-inset-bottom)) !important;
  }
  .tinnie-math-fast-battle .tinnie-task-common-question {
    width: min(92vw, 560px) !important;
    min-height: 78px !important;
    padding: .7rem .85rem !important;
  }
  .tinnie-math-fast-battle .tinnie-math-input-zone {
    width: min(94vw, 560px) !important;
  }
  .tinnie-math-fast-battle .tinnie-math-rune-orbit {
    width: min(92vw, 520px) !important;
    grid-template-columns: repeat(3, minmax(64px, 1fr)) !important;
  }
  .tinnie-math-fast-battle .tinnie-math-rune {
    height: clamp(48px, 7vh, 64px) !important;
    font-size: clamp(1.35rem, 3.8vh, 2rem) !important;
  }
  .tinnie-math-fast-battle .tinnie-math-action-row {
    width: min(92vw, 420px) !important;
  }
  .tinnie-math-fast-battle .tinnie-math-action-row .tinnie-math-rune {
    width: clamp(118px, 38vw, 178px) !important;
    min-width: clamp(118px, 38vw, 178px) !important;
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  .tinnie-math-fast-battle .tinnie-math-battle-stage {
    gap: .32rem !important;
    padding-top: .35rem !important;
    padding-bottom: .35rem !important;
  }
  .tinnie-math-fast-battle .tinnie-task-common-question {
    min-height: 68px !important;
    padding: .45rem .8rem !important;
  }
  .tinnie-math-fast-battle .tinnie-math-answer-energy {
    min-height: 42px !important;
  }
  .tinnie-math-fast-battle .tinnie-math-rune {
    height: clamp(38px, 10vh, 50px) !important;
    font-size: clamp(1.05rem, 5vh, 1.45rem) !important;
  }
  .tinnie-math-fast-battle .tinnie-math-action-row .tinnie-math-rune {
    height: clamp(34px, 8vh, 44px) !important;
  }
}

body.graphics-low #loginScreen.start-screen,
body.ui-lite #loginScreen.start-screen,
body.graphics-low #menuOverlay,
body.ui-lite #menuOverlay,
body.graphics-low #starterOverlay,
body.ui-lite #starterOverlay,
body.graphics-low #monsterSelectOverlay,
body.ui-lite #monsterSelectOverlay,
body.graphics-low #invOverlay,
body.ui-lite #invOverlay,
body.graphics-low .tinnie-overlay,
body.ui-lite .tinnie-overlay,
body.graphics-low [data-monster-select="1"].overlay,
body.ui-lite [data-monster-select="1"].overlay,
body.graphics-low .tinnie-task-overlay,
body.ui-lite .tinnie-task-overlay {
  background: rgba(39,58,63,.94) !important;
  backdrop-filter: none !important;
}
body.graphics-low #loginScreen .start-card,
body.ui-lite #loginScreen .start-card,
body.graphics-low #menuOverlay .panel,
body.ui-lite #menuOverlay .panel,
body.graphics-low #starterOverlay .panel,
body.ui-lite #starterOverlay .panel,
body.graphics-low #monsterSelectOverlay .panel,
body.ui-lite #monsterSelectOverlay .panel,
body.graphics-low #invOverlay .panel,
body.ui-lite #invOverlay .panel,
body.graphics-low .tinnie-overlay .panel,
body.ui-lite .tinnie-overlay .panel,
body.graphics-low [data-monster-select="1"] > .card-panel,
body.ui-lite [data-monster-select="1"] > .card-panel,
body.graphics-low [data-monster-select="1"] > .tinnie-monster-choice-panel,
body.ui-lite [data-monster-select="1"] > .tinnie-monster-choice-panel {
  background: #24383f !important;
  border-color: rgba(190,216,222,.48) !important;
  box-shadow: 0 10px 22px rgba(13,26,31,.28) !important;
}
body.graphics-low button,
body.ui-lite button,
body.graphics-low .tinnie-math-fast-battle .tinnie-math-rune,
body.ui-lite .tinnie-math-fast-battle .tinnie-math-rune {
  background: #416f82 !important;
  border-color: rgba(204,229,235,.62) !important;
  box-shadow: none !important;
}
body.graphics-low button.ghost,
body.ui-lite button.ghost {
  background: #4d626b !important;
}
body.graphics-low .tinnie-math-fast-battle .tinnie-math-rune-selected,
body.ui-lite .tinnie-math-fast-battle .tinnie-math-rune-selected {
  border-color: rgba(255,225,111,.90) !important;
  box-shadow: 0 0 0 3px rgba(255,225,111,.22) !important;
}

/* v280: Lesen/Schreiben/Szene/Dialoge vollstaendig im neuen Blau-Schiefer-Design */
.tinnie-task-overlay,
#taskOverlay.tinnie-writing-task,
.tinnie-speech-task {
  background:
    radial-gradient(circle at 50% 18%, rgba(228,243,246,.22), transparent 36%),
    linear-gradient(180deg, rgba(93,126,139,.54), rgba(29,48,54,.88)) !important;
}
.tinnie-task-crystal,
.tinnie-task-common-question,
.tinnie-speech-target,
.tinnie-writing-canvas-wrap,
.tinnie-writing-spell-paper,
.tinnie-task-result,
.tinnie-speech-result {
  color: var(--tinnie-ui-text) !important;
  border-color: rgba(214,235,241,.44) !important;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(60,83,90,.72), rgba(26,42,47,.78)) !important;
  box-shadow: inset 0 0 22px rgba(255,255,255,.07), 0 12px 28px rgba(16,30,35,.22) !important;
}
.tinnie-task-common-title,
.tinnie-task-main-text,
.tinnie-task-common-prompt,
.tinnie-task-prompt,
.tinnie-task-status,
.tinnie-speech-status {
  color: var(--tinnie-ui-text) !important;
  text-shadow: 0 2px 10px rgba(8,22,28,.45) !important;
}
.tinnie-task-common-orbit {
  border-color: rgba(145,215,235,.28) !important;
  filter: drop-shadow(0 0 8px rgba(145,215,235,.16)) !important;
}
.tinnie-task-common-orbit-2 {
  border-color: rgba(255,225,111,.28) !important;
}
.tinnie-task-common-orbit-3 {
  border-color: rgba(214,235,241,.18) !important;
}
.tinnie-task-common-spark,
.tinnie-math-orbit-spark {
  background: radial-gradient(circle at 35% 30%, #fff, #91d7eb 42%, rgba(255,225,111,.18) 74%) !important;
  box-shadow: 0 0 10px rgba(145,215,235,.22) !important;
}
.tinnie-speech-orb-button,
.tinnie-writing-seal-action,
.tinnie-writing-small-action,
.tinnie-task-common-close,
.tinnie-cutscene-skip {
  border-color: rgba(224,241,246,.78) !important;
  color: #f8fff7 !important;
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.42), transparent 34%),
    linear-gradient(135deg, var(--tinnie-ui-blue-light) 0%, var(--tinnie-ui-blue) 50%, #2f615f 100%) !important;
  box-shadow: 0 0 0 2px rgba(145,215,235,.14), 0 9px 20px rgba(15,32,38,.24), inset 0 0 13px rgba(255,255,255,.10) !important;
  text-shadow: 0 2px 8px rgba(11,31,39,.48) !important;
}
.tinnie-task-common-close,
.tinnie-writing-small-action {
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.24), transparent 34%),
    linear-gradient(135deg, var(--tinnie-ui-slate) 0%, #5d7e8c 48%, var(--tinnie-ui-slate-dark) 100%) !important;
}
.tinnie-cutscene-skip {
  min-width: clamp(116px, 18vw, 180px) !important;
  max-width: min(46vw, 210px) !important;
  white-space: normal !important;
}
.tinnie-cutscene-ready {
  background: #17262c !important;
  color: var(--tinnie-ui-text) !important;
  text-shadow: 0 0 18px rgba(145,215,235,.28) !important;
}
.tinnie-cutscene-text {
  color: var(--tinnie-ui-text) !important;
  border: 1px solid rgba(214,235,241,.42) !important;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(60,83,90,.90), rgba(26,42,47,.96)) !important;
  box-shadow: 0 12px 28px rgba(16,30,35,.28), inset 0 0 16px rgba(255,255,255,.06) !important;
}
.tinnie-help-overlay .panel,
.tinnie-npc-dialog-overlay .panel,
.tinnie-interaction-choice-overlay .panel,
.tinnie-portal-message-overlay .panel,
.tinnie-media-overlay .panel,
.tinnie-world-text-overlay .panel {
  color: var(--tinnie-ui-text) !important;
  border-color: var(--tinnie-ui-border) !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(60,83,90,.90), rgba(26,42,47,.96)) !important;
  box-shadow: 0 18px 42px rgba(16,30,35,.34), inset 0 0 22px rgba(255,255,255,.07) !important;
}
.tinnie-help-overlay .panel button,
.tinnie-npc-dialog-overlay .panel button,
.tinnie-interaction-choice-overlay .panel button,
.tinnie-portal-message-overlay .panel button,
.tinnie-media-overlay .panel button,
.tinnie-world-text-overlay .panel button {
  border-color: rgba(224,241,246,.76) !important;
  color: #f8fff7 !important;
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.42), transparent 34%),
    linear-gradient(135deg, var(--tinnie-ui-blue-light) 0%, var(--tinnie-ui-blue) 50%, #2f615f 100%) !important;
  box-shadow: 0 0 0 2px rgba(145,215,235,.14), 0 9px 20px rgba(15,32,38,.24), inset 0 0 13px rgba(255,255,255,.10) !important;
}
.tinnie-portal-message-overlay .row,
.tinnie-world-text-overlay .row {
  display: flex !important;
  justify-content: center !important;
  gap: clamp(.45rem, 1vw, .75rem) !important;
  flex-wrap: wrap !important;
}
.tinnie-portal-message-overlay .panel button,
.tinnie-world-text-overlay .panel button,
.tinnie-media-overlay .panel button {
  width: auto !important;
  min-width: min(42vw, 118px) !important;
  max-width: min(48vw, 190px) !important;
  white-space: nowrap !important;
}
body.graphics-low .tinnie-task-three-stage,
body.ui-lite .tinnie-task-three-stage,
body.graphics-low .tinnie-task-common-motion,
body.ui-lite .tinnie-task-common-motion {
  display: none !important;
}
body.graphics-low .tinnie-task-crystal,
body.ui-lite .tinnie-task-crystal,
body.graphics-low .tinnie-task-common-question,
body.ui-lite .tinnie-task-common-question,
body.graphics-low .tinnie-speech-target,
body.ui-lite .tinnie-speech-target,
body.graphics-low .tinnie-writing-canvas-wrap,
body.ui-lite .tinnie-writing-canvas-wrap,
body.graphics-low .tinnie-writing-spell-paper,
body.ui-lite .tinnie-writing-spell-paper,
body.graphics-low .tinnie-task-result,
body.ui-lite .tinnie-task-result {
  background: #24383f !important;
  border-color: rgba(190,216,222,.48) !important;
  box-shadow: 0 8px 18px rgba(13,26,31,.22) !important;
}
body.graphics-low .tinnie-task-common-orbit,
body.ui-lite .tinnie-task-common-orbit,
body.graphics-low .tinnie-task-common-spark,
body.ui-lite .tinnie-task-common-spark {
  display: none !important;
}
body.graphics-low .tinnie-cutscene-skip,
body.ui-lite .tinnie-cutscene-skip {
  background: #416f82 !important;
  border-color: rgba(204,229,235,.62) !important;
  box-shadow: none !important;
}

/* v284: Mini-Spiele */
.tinnie-minigame-overlay {
  z-index: 10020 !important;
  background:
    linear-gradient(180deg, rgba(128,201,232,.70) 0%, rgba(128,201,232,.46) 39%, rgba(40,75,55,.74) 40%, rgba(26,50,39,.86) 100%) !important;
  backdrop-filter: blur(2px) !important;
  padding: clamp(.55rem, 2vw, 1.2rem);
  box-sizing: border-box;
}
.tinnie-minigame-overlay.tinnie-minigame-playing {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  touch-action: none !important;
}
.tinnie-minigame-panel {
  width: min(94vw, 880px);
  max-height: min(92vh, 720px);
  overflow: auto;
  box-sizing: border-box;
  color: var(--tinnie-ui-text);
  background:
    linear-gradient(180deg, rgba(44,68,75,.95), rgba(21,38,43,.97));
  border: 1px solid rgba(205,228,235,.46);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(13,30,37,.34);
  padding: clamp(.8rem, 2.5vw, 1.2rem);
}
.tinnie-minigame-head,
.tinnie-minigame-play-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.tinnie-minigame-head h3,
.tinnie-minigame-play-top h3 {
  margin: .05rem 0 0;
  font-size: clamp(1.35rem, 3.8vw, 2.25rem);
  line-height: 1.02;
  text-shadow: 0 3px 10px rgba(8,24,31,.50);
}
.tinnie-minigame-kicker {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 900;
  font-size: .76rem;
  color: rgba(236,248,250,.86);
}
.tinnie-minigame-text {
  color: var(--tinnie-ui-muted);
  margin: .65rem 0 .85rem;
  line-height: 1.35;
}
.tinnie-minigame-credits,
.tinnie-minigame-score {
  flex: 0 0 auto;
  padding: .5rem .8rem;
  border-radius: 999px;
  border: 1px solid rgba(255,225,111,.54);
  background: rgba(255,225,111,.12);
  color: #fff7c4;
  font-weight: 900;
  white-space: nowrap;
}
.tinnie-minigame-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
}
.tinnie-minigame-card {
  min-height: 150px;
  text-align: left;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(224,241,246,.76);
  color: #f8fff7;
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.36), transparent 34%),
    linear-gradient(135deg, var(--tinnie-ui-blue-light) 0%, var(--tinnie-ui-blue) 50%, #2f615f 100%);
  box-shadow: 0 12px 26px rgba(15,32,38,.24), inset 0 0 16px rgba(255,255,255,.10);
}
.tinnie-minigame-card.is-gamepad-selected {
  outline: 3px solid rgba(255,255,255,.94);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(145,215,235,.34), 0 14px 28px rgba(15,32,38,.28), inset 0 0 16px rgba(255,255,255,.14);
}
.tinnie-minigame-actions button.is-gamepad-selected,
.tinnie-minigame-roster-card.is-gamepad-selected {
  outline: 3px solid rgba(255,255,255,.94);
  outline-offset: 3px;
}
.tinnie-minigame-overlay button:focus-visible:not(.is-gamepad-selected),
.tinnie-minigame-overlay .tinnies-tv-ui-focus:not(.is-gamepad-selected) {
  outline: none;
  box-shadow: none !important;
  transform: none !important;
}
.tinnie-minigame-card-icon,
.tinnie-minigame-card-title,
.tinnie-minigame-card-text {
  display: block;
}
.tinnie-minigame-card-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  margin-bottom: .7rem;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.38);
  font-size: 1.55rem;
}
.tinnie-minigame-card-title {
  font-size: 1.2rem;
  font-weight: 950;
}
.tinnie-minigame-card-text {
  margin-top: .22rem;
  color: rgba(246,251,252,.86);
  line-height: 1.25;
  font-size: .94rem;
}
.tinnie-minigame-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: .9rem;
}
.tinnie-minigame-actions button,
.tinnie-minigame-secondary,
.tinnie-minigame-ghost {
  min-width: min(42vw, 190px);
  border-radius: 12px;
  border: 1px solid rgba(224,241,246,.76);
  color: #f8fff7;
  font-weight: 900;
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.32), transparent 34%),
    linear-gradient(135deg, var(--tinnie-ui-blue-light) 0%, var(--tinnie-ui-blue) 50%, #2f615f 100%);
}
.tinnie-minigame-ghost {
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(135deg, var(--tinnie-ui-slate) 0%, #5d7e8c 48%, var(--tinnie-ui-slate-dark) 100%) !important;
}
.tinnie-team-assign {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  margin-top: .85rem;
}
.tinnie-team-box {
  min-height: 210px;
  border-radius: 14px;
  border: 1px solid rgba(224,241,246,.64);
  background:
    radial-gradient(circle at 26% 16%, rgba(255,255,255,.24), transparent 32%),
    linear-gradient(145deg, rgba(128,217,239,.35), rgba(36,79,96,.76));
  color: #f8fff7;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.tinnie-team-box.is-gamepad-selected {
  outline: 3px solid rgba(255,255,255,.94);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(145,215,235,.34), 0 14px 28px rgba(15,32,38,.28), inset 0 0 16px rgba(255,255,255,.14);
}
.tinnie-team-box-right {
  background:
    radial-gradient(circle at 26% 16%, rgba(255,255,255,.24), transparent 32%),
    linear-gradient(145deg, rgba(255,225,111,.35), rgba(95,82,36,.76));
}
.tinnie-team-box b {
  font-size: 1.25rem;
  font-weight: 950;
}
.tinnie-team-box small {
  color: rgba(246,251,252,.78);
}
.tinnie-team-slots {
  display: grid;
  gap: .45rem;
  margin-top: auto;
}
.tinnie-team-slots span,
.tinnie-team-slots em {
  min-height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  padding: 0 .8rem;
  border: 1px solid rgba(224,241,246,.54);
  background: rgba(255,255,255,.13);
  color: #f8fff7;
  font-style: normal;
  font-weight: 900;
}
.tinnie-team-slots em {
  opacity: .62;
}
.tinnie-minigame-play-panel {
  width: min(96vw, 1040px);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
}
.tinnie-minigame-canvas-wrap {
  width: 100%;
  height: min(58vh, 520px);
  min-height: 260px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(224,241,246,.42);
  background: #1b3037;
}
.tinnie-minigame-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.tinnie-minigame-three-panel {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  min-width: 0;
  min-height: 0;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border: 0;
  margin: 0;
  padding: clamp(.45rem, 1.4vw, .85rem);
  box-sizing: border-box;
  transform: none !important;
}
.tinnie-minigame-three-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid rgba(224,241,246,.42);
  background: #1b3037;
  transform: none !important;
  overscroll-behavior: none;
  touch-action: none;
  contain: layout paint size;
}
.tinnie-minigame-three-wrap canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  transform: none !important;
}
.tinnie-minigame-play-actions {
  opacity: .16;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.tinnie-minigame-play-actions.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* v378: Autorennen-Ende nicht mehr mit dauerhaftem Buttonbalken unten.
   Die Buttons erscheinen erst nach dem Ausrollen zentral im Ergebnis-Overlay. */
.tinnie-minigame-three-panel-race .tinnie-minigame-play-actions:not(.active),
.tinnie-minigame-three-panel-soccer .tinnie-minigame-play-actions:not(.active) {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

/* v397: Sehr billige Race-Positionsleiste. DOM/CSS statt Three.js, Update nur alle 500 ms. */
.tinnie-race-position-bar {
  position: absolute;
  right: clamp(.55rem, 1.7vw, 1.05rem);
  top: clamp(.55rem, 1.7vw, 1.05rem);
  z-index: 14;
  width: min(42vw, 360px);
  min-width: 210px;
  padding: .42rem .58rem .5rem;
  border-radius: 999px;
  border: 1px solid rgba(255,225,111,.62);
  background: linear-gradient(180deg, rgba(16,36,42,.76), rgba(8,24,31,.70));
  box-shadow: 0 8px 22px rgba(0,0,0,.26), inset 0 0 12px rgba(255,255,255,.06);
  pointer-events: none;
  color: #fff7c4;
  contain: layout paint style;
}
.tinnie-race-position-bar[hidden] {
  display: none !important;
}
.tinnie-race-position-bar-head {
  margin: 0 1.65rem .12rem;
  font-size: .58rem;
  line-height: 1;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,247,196,.76);
  text-align: center;
}
.tinnie-race-position-track {
  position: relative;
  height: 1.35rem;
  margin: 0 1.55rem;
}
.tinnie-race-position-line,
.tinnie-race-position-markers {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
}
.tinnie-race-position-line {
  height: .22rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,225,111,.92));
  box-shadow: inset 0 0 5px rgba(0,0,0,.26);
}
.tinnie-race-position-markers {
  height: 0;
}
.tinnie-race-position-marker {
  position: absolute;
  left: 0;
  top: -.66rem;
  width: 1.16rem;
  height: 1.16rem;
  margin-left: -.58rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(235,242,246,.88);
  color: #213840;
  font-size: .48rem;
  line-height: 1;
  font-weight: 1000;
  box-shadow: 0 3px 8px rgba(0,0,0,.30);
  will-change: transform;
}
.tinnie-race-position-marker.is-ai {
  width: .92rem;
  height: .92rem;
  top: -.54rem;
  margin-left: -.46rem;
  font-size: .44rem;
  background: rgba(214,230,235,.82);
  color: #31484f;
}
.tinnie-race-position-marker.is-p1 {
  width: 1.34rem;
  height: 1.34rem;
  top: -.74rem;
  margin-left: -.67rem;
  background: linear-gradient(180deg, #80d9ef, #278ab2);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.tinnie-race-position-marker.is-p2 {
  width: 1.34rem;
  height: 1.34rem;
  top: -.74rem;
  margin-left: -.67rem;
  background: linear-gradient(180deg, #ffe16f, #c88922);
  color: #3c2a05;
}
.tinnie-race-position-marker.is-leader {
  box-shadow: 0 0 0 3px rgba(255,225,111,.24), 0 5px 12px rgba(0,0,0,.32);
}
.tinnie-race-position-start,
.tinnie-race-position-finish {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: .72rem;
  font-weight: 1000;
  color: rgba(255,247,196,.88);
}
.tinnie-race-position-start {
  left: -1.2rem;
}
.tinnie-race-position-finish {
  right: -1.35rem;
}
@media (max-width: 700px) {
  .tinnie-race-position-bar {
    width: min(58vw, 310px);
    min-width: 180px;
    padding: .34rem .46rem .42rem;
  }
  .tinnie-race-position-bar-head {
    display: none;
  }
  .tinnie-race-position-track {
    margin: 0 1.25rem;
  }
}

.tinnie-race-result-overlay {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(8,24,31,.36), rgba(8,24,31,.08) 42%, transparent 70%);
}
.tinnie-race-result-overlay.active {
  display: flex;
}
.tinnie-race-result-card {
  min-width: min(78vw, 560px);
  max-width: min(86vw, 680px);
  text-align: center;
  padding: clamp(1rem, 3.2vw, 1.8rem);
  border-radius: 18px;
  border: 2px solid rgba(255,225,111,.72);
  background: linear-gradient(180deg, rgba(26,50,57,.94), rgba(10,26,32,.96));
  box-shadow: 0 24px 70px rgba(0,0,0,.46), inset 0 0 24px rgba(255,255,255,.08);
}
.tinnie-race-result-kicker {
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,247,196,.86);
  font-weight: 950;
  font-size: clamp(.78rem, 1.7vw, 1rem);
}
.tinnie-race-result-title {
  margin-top: .25rem;
  color: #fff;
  font-weight: 1000;
  font-size: clamp(2.4rem, 8vw, 5.8rem);
  line-height: .95;
  text-shadow: 0 5px 22px rgba(0,0,0,.58);
}
.tinnie-race-result-sub {
  margin-top: .65rem;
  color: rgba(236,248,250,.9);
  font-weight: 900;
  font-size: clamp(1rem, 2.5vw, 1.45rem);
}
.tinnie-minigame-three-panel-race .tinnie-minigame-play-actions.active,
.tinnie-minigame-three-panel-soccer .tinnie-minigame-play-actions.active {
  position: absolute;
  left: 50%;
  top: calc(50% + min(22vh, 165px));
  z-index: 22;
  width: min(84vw, 560px);
  margin: 0;
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: auto;
}
.tinnie-minigame-roster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .75rem;
  margin-top: .8rem;
}
.tinnie-minigame-roster-card {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(224,241,246,.58);
  background: rgba(79,147,178,.28);
  color: #f8fff7;
  padding: .65rem;
}
.tinnie-minigame-roster-img {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.13);
  font-weight: 950;
}
.tinnie-minigame-roster-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tinnie-minigame-roster-card small {
  display: block;
  color: rgba(246,251,252,.72);
  margin-top: .1rem;
}
.tinnie-minigame-loading {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: var(--tinnie-ui-muted);
  font-weight: 900;
}
.build-village-map {
  position: fixed;
  top: max(.7rem, env(safe-area-inset-top));
  left: max(.7rem, env(safe-area-inset-left));
  z-index: var(--tinnies-z-floating);
  width: min(36vw, 240px);
  min-width: 170px;
  padding: .45rem;
  border-radius: 10px;
  border: 1px solid rgba(224,241,246,.46);
  background: rgba(20,38,44,.82);
  color: #f8fff7;
  box-shadow: 0 10px 24px rgba(10,24,30,.22);
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
}
.build-village-map:hover,
.build-village-map:focus,
.build-village-map.tinnies-tv-hud-selected {
  border-color: rgba(255,216,74,.9);
  box-shadow: 0 0 0 3px rgba(255,216,74,.24), 0 10px 24px rgba(10,24,30,.22);
}
.build-village-map-title {
  font-weight: 950;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin: 0 0 .25rem;
}
.build-village-map canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 7px;
}
.build-village-map-legend {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  color: rgba(246,251,252,.82);
  margin-top: .25rem;
}
.build-village-map-legend span,
.build-village-map-legend b {
  width: .6rem;
  height: .6rem;
  border-radius: 999px;
  display: inline-block;
}
.build-village-map-legend span { background: rgba(145,215,235,.86); }
.build-village-map-legend b { background: #fff; border: 2px solid #4f93b2; box-sizing: border-box; }
.build-village-map-legend i { background: #36d399; width: .6rem; height: .6rem; border-radius: 999px; display: inline-block; border: 1px solid rgba(255,255,255,.75); box-sizing: border-box; }
.build-village-map-hint {
  margin-top: .2rem;
  font-size: .62rem;
  color: rgba(246,251,252,.62);
}
.build-village-map.build-village-map-mini {
  width: auto;
  min-width: 0;
  padding: .38rem .55rem;
  border-radius: 999px;
}
.build-village-map.build-village-map-mini .build-village-map-title {
  margin: 0;
  font-size: .74rem;
  letter-spacing: .03em;
}
.build-village-map.build-village-map-mini canvas,
.build-village-map.build-village-map-mini .build-village-map-legend,
.build-village-map.build-village-map-mini .build-village-map-hint {
  display: none;
}
body.tinnies-local-guest-active .build-village-map {
  top: max(.55rem, env(safe-area-inset-top));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: var(--tinnies-z-floating);
}
body.tinnies-local-guest-active .build-village-map:not(.build-village-map-mini) {
  width: min(30vw, 190px);
  min-width: 150px;
  padding: .38rem;
}
body.tinnies-local-guest-split-horizontal .build-village-map {
  top: 50%;
  transform: translate(-50%, -50%);
}
body.tinnies-local-guest-active .build-village-map-title {
  font-size: .68rem;
}
body.tinnies-local-guest-active .build-village-map-legend,
body.tinnies-local-guest-active .build-village-map-hint {
  display: none;
}
.tinnie-minigame-touch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
  margin-top: .6rem;
}
.tinnie-minigame-pad {
  display: grid;
  grid-template-columns: repeat(5, minmax(38px, 1fr));
  gap: .35rem;
}
.tinnie-minigame-pad button {
  min-height: 42px;
  border-radius: 999px;
  padding: 0;
  touch-action: none;
  user-select: none;
  border: 1px solid rgba(224,241,246,.56);
  background: rgba(128,201,232,.24);
  color: #f8fff7;
  font-weight: 950;
}
.tinnie-minigame-touch-controls {
  position: fixed;
  right: max(.65rem, env(safe-area-inset-right));
  bottom: calc(max(1.5rem, env(safe-area-inset-bottom)) + 86px);
  z-index: 10040;
  display: flex;
  align-items: flex-end;
  gap: .45rem;
  pointer-events: auto;
}
.tinnie-minigame-touch-controls[hidden],
.tinnie-minigame-touch-controls button[hidden] {
  display: none !important;
}
.tinnie-minigame-touch-controls button {
  position: relative;
  min-width: 76px;
  min-height: 48px;
  border-radius: 999px;
  padding: 0 .8rem;
  touch-action: none;
  user-select: none;
  border: 1px solid rgba(224,241,246,.72);
  color: #f8fff7;
  font-weight: 950;
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.38), transparent 34%),
    linear-gradient(135deg, var(--tinnie-ui-blue-light) 0%, var(--tinnie-ui-blue) 52%, #2f615f 100%);
  box-shadow: 0 0 0 2px rgba(145,215,235,.14), 0 9px 20px rgba(15,32,38,.24), inset 0 0 13px rgba(255,255,255,.10);
  text-shadow: 0 2px 8px rgba(11,31,39,.48);
}
body.graphics-low .tinnie-minigame-touch-controls button,
body.ui-lite .tinnie-minigame-touch-controls button {
  box-shadow: none;
  background: #4f93b2;
}
body.graphics-low .tinnie-minigame-overlay,
body.ui-lite .tinnie-minigame-overlay {
  backdrop-filter: none !important;
}
body.graphics-low .tinnie-minigame-panel,
body.ui-lite .tinnie-minigame-panel,
body.graphics-low .tinnie-minigame-card,
body.ui-lite .tinnie-minigame-card {
  box-shadow: none !important;
}
@media (max-width: 680px), (max-height: 520px) {
  .tinnie-minigame-overlay {
    padding: .35rem;
    align-items: stretch !important;
  }
  .tinnie-minigame-panel {
    width: 100%;
    max-height: calc(100vh - .7rem);
    border-radius: 10px;
  }
  .tinnie-minigame-head,
  .tinnie-minigame-play-top {
    align-items: center;
  }
  .tinnie-minigame-choice-grid {
    grid-template-columns: 1fr;
  }
  .tinnie-team-assign {
    grid-template-columns: 1fr;
  }
  .tinnie-team-box {
    min-height: 150px;
  }
  .tinnie-minigame-card {
    min-height: 104px;
  }
  .tinnie-minigame-canvas-wrap {
    height: 48vh;
    min-height: 210px;
  }
  .tinnie-minigame-three-wrap {
    min-height: 0;
  }
  .tinnie-minigame-touch-controls {
    display: flex;
  }
  .build-village-map {
    width: 168px;
    min-width: 0;
  }
}
@media (orientation: portrait) and (max-width: 680px) {
  .tinnie-minigame-touch {
    grid-template-columns: 1fr;
  }
  .tinnie-minigame-pad {
    grid-template-columns: repeat(5, minmax(34px, 1fr));
  }
  .tinnie-minigame-touch-controls {
    right: max(.45rem, env(safe-area-inset-right));
    bottom: calc(max(1.5rem, env(safe-area-inset-bottom)) + 82px);
    gap: .35rem;
  }
  .tinnie-minigame-touch-controls button {
    min-width: 64px;
    min-height: 44px;
    padding: 0 .55rem;
    font-size: .82rem;
  }
}
@media (pointer: coarse) {
  .tinnie-minigame-touch-controls {
    display: flex;
  }
}

/* v281: HUD einklappbar, Touch-Buttons und Tinnie-Auswahl vereinheitlicht */
.hud {
  top: max(.55rem, env(safe-area-inset-top)) !important;
  right: max(.55rem, env(safe-area-inset-right)) !important;
  gap: .42rem !important;
}
.hud .hud-toggle,
.hud button,
.tinnies-touch-action-btn,
.tinnies-touch-sprint-btn,
[data-tinnies-touch-button="action"],
[data-tinnies-touch-button="sprint"] {
  border: 1px solid rgba(224,241,246,.76) !important;
  color: #f8fff7 !important;
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.42), transparent 34%),
    linear-gradient(135deg, var(--tinnie-ui-blue-light) 0%, var(--tinnie-ui-blue) 50%, #2f615f 100%) !important;
  box-shadow: 0 0 0 2px rgba(145,215,235,.14), 0 9px 20px rgba(15,32,38,.24), inset 0 0 13px rgba(255,255,255,.10) !important;
  text-shadow: 0 2px 8px rgba(11,31,39,.48) !important;
  font-weight: 900 !important;
}
.hud .hud-toggle {
  width: 46px !important;
  height: 46px !important;
  font-size: 1.15rem !important;
}
.hud .hud-top-row,
.hud .hud-right-column {
  transition: opacity .16s ease, transform .16s ease, max-height .16s ease;
}
.hud.hud-collapsed .hud-top-row,
.hud.hud-collapsed .hud-right-column {
  opacity: 0 !important;
  transform: translate(10px, -8px) scale(.96) !important;
  pointer-events: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
}
.hud.hud-expanded .hud-top-row,
.hud.hud-expanded .hud-right-column {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  max-height: 260px !important;
}
.hud.hud-expanded .hud-toggle {
  background:
    radial-gradient(circle at 30% 16%, rgba(255,255,255,.32), transparent 34%),
    linear-gradient(135deg, var(--tinnie-ui-slate) 0%, #5d7e8c 48%, var(--tinnie-ui-slate-dark) 100%) !important;
}
.tinnies-touch-action-btn,
.tinnies-touch-sprint-btn,
[data-tinnies-touch-button="action"],
[data-tinnies-touch-button="sprint"] {
  width: clamp(58px, 13vw, 72px) !important;
  height: clamp(58px, 13vw, 72px) !important;
  border-radius: 999px !important;
  font-size: clamp(1.15rem, 4vw, 1.55rem) !important;
  -webkit-tap-highlight-color: transparent !important;
}
.tinnies-touch-action-btn:active,
.tinnies-touch-sprint-btn:active,
[data-tinnies-touch-button="action"]:active,
[data-tinnies-touch-button="sprint"]:active {
  transform: translateY(1px) scale(.98) !important;
  filter: brightness(1.08) !important;
}
[data-monster-select="1"] .tinnie-monster-choice-panel,
[data-monster-select="1"] > .card-panel {
  width: min(96vw, 860px) !important;
}
[data-monster-select="1"] .tinnie-monster-choice-grid,
[data-monster-select="1"] .card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 223.2px) !important;
  justify-content: center !important;
  align-items: start !important;
  gap: .85rem !important;
}
[data-monster-select="1"] .tinnie-album-card.tinnie-album-admin-card {
  position: relative !important;
  display: block !important;
  width: 223.2px !important;
  height: 312px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #D8DBE2 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  color: #273448 !important;
  text-align: left !important;
}
[data-monster-select="1"] .tinnie-album-admin-count-badge {
  position: absolute !important;
  left: 16px !important;
  bottom: 16px !important;
  min-width: 58px !important;
  height: 58px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0,0,0,.86) !important;
  color: #fff !important;
  border: 5px solid rgba(255,255,255,.95) !important;
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  pointer-events: none !important;
}
[data-monster-select="1"] .tinnie-album-card.clickable:hover,
[data-monster-select="1"] .tinnie-album-card.clickable:focus-visible,
[data-monster-select="1"] .tinnie-album-card.selected {
  outline: none !important;
  filter: brightness(1.05) !important;
  box-shadow: 0 0 0 3px rgba(255,225,111,.78), 0 12px 30px rgba(13,26,31,.28) !important;
}
[data-monster-select="1"] .tinnie-monster-choice-actions,
[data-monster-select="1"] .tinnies-trainer-select-footer {
  justify-content: center !important;
  gap: .55rem !important;
}
@media (max-width: 720px) {
  [data-monster-select="1"] .tinnie-monster-choice-grid,
  [data-monster-select="1"] .card-grid {
    grid-template-columns: repeat(2, 193.44px) !important;
    gap: .65rem !important;
  }
  [data-monster-select="1"] .tinnie-album-card.tinnie-album-admin-card {
    width: 193.44px !important;
    height: 270.4px !important;
  }
  [data-monster-select="1"] .tinnie-album-admin-art {
    transform: scale(.26) !important;
  }
}
@media (max-width: 470px) {
  [data-monster-select="1"] .tinnie-monster-choice-grid,
  [data-monster-select="1"] .card-grid {
    grid-template-columns: 223.2px !important;
  }
  [data-monster-select="1"] .tinnie-album-card.tinnie-album-admin-card {
    width: 223.2px !important;
    height: 312px !important;
  }
  [data-monster-select="1"] .tinnie-album-admin-art {
    transform: scale(.3) !important;
  }
}
@media (max-width: 700px), (max-height: 620px) {
  .tinnie-album-panel.tinnie-photo-booth-panel {
    width: min(96vw, 520px) !important;
    max-height: calc(100dvh - 14px) !important;
    padding: .68rem !important;
  }
  .tinnie-album-panel.tinnie-photo-booth-panel h3 {
    margin: 0 0 .25rem !important;
    font-size: 1rem !important;
  }
  .tinnie-album-panel.tinnie-photo-booth-panel p {
    margin: .2rem 0 !important;
    font-size: .78rem !important;
    line-height: 1.25 !important;
  }
  .tinnie-photo-booth {
    width: min(100%, 210px) !important;
    margin: .35rem auto .35rem !important;
    border-width: 5px !important;
    border-radius: .8rem !important;
  }
  .tinnie-photo-controls {
    gap: .25rem !important;
    margin: .2rem auto .22rem !important;
  }
  .tinnie-photo-controls label {
    grid-template-columns: 72px 1fr !important;
    gap: .45rem !important;
    font-size: .72rem !important;
  }
  .tinnie-photo-actions {
    position: sticky !important;
    bottom: -.68rem !important;
    z-index: 4 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .45rem !important;
    margin: .25rem -.68rem -.68rem !important;
    padding: .5rem .68rem calc(.55rem + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(to top, rgba(26,42,47,.98), rgba(26,42,47,.9), rgba(26,42,47,0)) !important;
  }
  .tinnie-photo-actions button {
    min-width: 0 !important;
    width: 100% !important;
    padding: .52rem .45rem !important;
    font-size: .78rem !important;
    white-space: normal !important;
  }
}
@media (orientation: landscape) and (max-height: 520px) {
  .tinnie-album-panel.tinnie-photo-booth-panel {
    width: min(96vw, 760px) !important;
  }
  .tinnie-photo-booth {
    width: min(36vw, 190px) !important;
  }
  .tinnie-photo-controls {
    width: min(100%, 460px) !important;
  }
}

/* v348: kleines Fire-TV/Race-Viewport-Debugfenster für Fotoanalyse */
.tinnie-race-debug-panel {
  position: fixed !important;
  left: 8px !important;
  bottom: 8px !important;
  z-index: 10080 !important;
  max-width: min(58vw, 560px) !important;
  min-width: 330px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 2px solid rgba(255, 225, 111, .92) !important;
  background: rgba(0, 0, 0, .76) !important;
  color: #fff7c4 !important;
  font: 700 12px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  letter-spacing: .01em !important;
  white-space: pre-wrap !important;
  text-align: left !important;
  pointer-events: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.85) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.34) !important;
}

/* v365: Autorennen Auto-Auswahl horizontal wie Hauptmenü, kein Fire-TV-Scrollen */
.tinnie-race-car-grid {
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  align-items: stretch;
}
.tinnie-race-car-card {
  min-height: clamp(138px, 29vh, 210px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(.65rem, 1.8vh, 1rem);
}
.tinnie-race-car-preview {
  --race-car-body: #d9342e;
  --race-car-accent: #f4f0e6;
  position: relative;
  display: block;
  width: min(100%, 190px);
  height: 96px;
  margin: 0 auto .75rem;
  transform: perspective(260px) rotateX(54deg) rotateZ(-8deg);
  transform-origin: center bottom;
}
.tinnie-race-car-preview > span {
  position: absolute;
  display: block;
  box-sizing: border-box;
}
.tinnie-race-car-preview-shadow {
  left: 7%;
  right: 5%;
  bottom: 3%;
  height: 32%;
  border-radius: 999px;
  background: rgba(0,0,0,.38);
  filter: blur(5px);
}
.tinnie-race-car-preview-body {
  left: 4%;
  right: 4%;
  top: 18%;
  bottom: 8%;
  border-radius: 48% 54% 26% 28% / 70% 70% 24% 24%;
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,.35), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 42%),
    var(--race-car-body);
  border: 2px solid rgba(255,255,255,.26);
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.28), 0 8px 14px rgba(0,0,0,.22);
}
.tinnie-race-car-preview-stripe {
  left: 43%;
  top: 16%;
  width: 15%;
  height: 68%;
  border-radius: 18px;
  background: var(--race-car-accent);
  opacity: .94;
}
.tinnie-race-car-preview-cockpit {
  left: 33%;
  top: 28%;
  width: 35%;
  height: 38%;
  border-radius: 45% 45% 35% 35%;
  background: #101516;
  border: 4px solid rgba(0,0,0,.42);
  box-shadow: inset 0 4px 8px rgba(255,255,255,.12);
}
.tinnie-race-car-preview-number {
  left: 12%;
  top: 31%;
  width: 33px;
  height: 33px;
  display: grid !important;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.93);
  color: #101516;
  font-size: 1rem;
  font-weight: 950;
  border: 1px solid rgba(0,0,0,.22);
}
.tinnie-race-car-preview-wing {
  display: none !important;
}
.tinnie-race-car-preview-yellow .tinnie-race-car-preview-body {
  border-radius: 22% 52% 24% 30% / 62% 72% 25% 22%;
}
.tinnie-race-car-preview-yellow .tinnie-race-car-preview-cockpit {
  left: 38%;
  width: 32%;
}
.tinnie-race-car-preview-yellow .tinnie-race-car-preview-stripe {
  left: 36%;
  width: 22%;
}
.tinnie-race-car-preview-blue .tinnie-race-car-preview-body {
  border-radius: 34% 44% 20% 30% / 76% 64% 20% 22%;
}
.tinnie-race-car-preview-blue .tinnie-race-car-preview-wing {
  display: block !important;
  right: 4%;
  top: 7%;
  width: 42%;
  height: 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--race-car-body), var(--race-car-accent));
  border: 1px solid rgba(255,255,255,.28);
  transform: translateY(-8px);
}
@media (max-width: 780px), (max-height: 560px) {
  .tinnie-race-car-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.35rem, 1.3vw, .65rem);
  }
  .tinnie-race-car-card {
    min-height: 118px;
    padding: .55rem;
  }
  .tinnie-race-car-preview {
    width: min(100%, 132px);
    height: 58px;
    margin-bottom: .28rem;
  }
  .tinnie-race-car-card .tinnie-minigame-card-title {
    font-size: .98rem;
  }
  .tinnie-race-car-card .tinnie-minigame-card-text {
    font-size: .72rem;
    line-height: 1.15;
  }
}
@media (max-width: 520px) {
  .tinnie-race-car-grid {
    grid-template-columns: repeat(3, minmax(92px, 1fr));
  }
  .tinnie-race-car-preview {
    width: min(100%, 108px);
    height: 50px;
  }
  .tinnie-race-car-card .tinnie-minigame-card-text {
    display: none;
  }
}

/* v402: Elternverwaltete Online-Freunde / Co-Presence */
.tinnies-mp-status {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  bottom: var(--tinnies-status-stack-bottom);
  z-index: var(--tinnies-z-passive);
  padding: .32rem .58rem;
  border-radius: 999px;
  border: 1px solid var(--tinnie-ui-border, rgba(210,232,238,.48));
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 48%),
    linear-gradient(180deg, rgba(60,83,90,.82), rgba(26,42,47,.90));
  color: var(--tinnie-ui-text, #f6fbff);
  font: 800 12px/1.05 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 8px 20px rgba(16,30,35,.24), inset 0 0 14px rgba(255,255,255,.055);
  backdrop-filter: blur(8px);
  pointer-events: none;
  opacity: .9;
}
.tinnies-mp-status.is-online {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.18), transparent 48%),
    linear-gradient(180deg, rgba(53,105,92,.86), rgba(24,67,58,.92));
}
.tinnies-mp-status.is-loading {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 48%),
    linear-gradient(180deg, rgba(95,83,45,.86), rgba(65,54,28,.92));
}
/* v596: Passive Freundestatus ohne aktive Verbindung nehmen keinen Platz mehr weg. */
.tinnies-mp-status.is-ready,
.tinnies-mp-status.is-offline {
  display: none !important;
}
.tinnies-mp-toast {
  position: fixed;
  left: 50%;
  top: max(18px, env(safe-area-inset-top));
  transform: translateX(-50%);
  z-index: 10040;
  max-width: min(92vw, 520px);
  padding: .72rem 1rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.58);
  background: rgba(11, 35, 52, .86);
  color: #fff;
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  font-weight: 800;
  text-align: center;
  pointer-events: none;
}
.tinnies-mp-panel-overlay {
  z-index: 10030;
  align-items: center;
  justify-content: center;
}
.tinnies-mp-panel {
  width: min(92vw, 620px);
  max-height: min(88vh, 720px);
  overflow: auto;
  border-radius: 28px;
  padding: 1rem;
  background: linear-gradient(180deg, rgba(234, 248, 255, .98), rgba(217, 242, 228, .98));
  color: #123047;
  box-shadow: 0 22px 70px rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.85);
}
.tinnies-mp-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.tinnies-mp-head h3 {
  margin: .12rem 0 .35rem;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
}
.tinnies-mp-kicker {
  color: #217a6b;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tinnies-mp-close {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 0;
  background: rgba(13, 52, 73, .12);
  color: #123047;
  font-size: 1.45rem;
  font-weight: 900;
}
.tinnies-mp-text,
.tinnies-mp-muted {
  margin: .35rem 0 .8rem;
  color: rgba(18,48,71,.76);
}
.tinnies-mp-status-card,
.tinnies-mp-friend,
.tinnies-mp-small-grid > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .72rem .8rem;
  border-radius: 18px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(18,48,71,.08);
}
.tinnies-mp-status-card {
  flex-direction: column;
  align-items: flex-start;
  margin: .6rem 0 1rem;
}
.tinnies-mp-status-card span,
.tinnies-mp-friend small,
.tinnies-mp-small-grid span {
  color: rgba(18,48,71,.66);
  font-weight: 800;
}
.tinnies-mp-section {
  margin-top: .85rem;
}
.tinnies-mp-section h4 {
  margin: .2rem 0 .45rem;
}
.tinnies-mp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.tinnies-mp-actions button {
  border: 0;
  border-radius: 999px;
  padding: .68rem .9rem;
  background: #2f8fd3;
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(47,143,211,.24);
}
.tinnies-mp-actions button:nth-child(3) { background: #2aa876; }
.tinnies-mp-small-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
@media (max-width: 560px) {
  .tinnies-mp-small-grid { grid-template-columns: 1fr; }
  .tinnies-mp-status { font-size: 12px; left: 8px; bottom: var(--tinnies-status-stack-bottom); }
}

/* v412: sichere Online-Minigame-Einladungen */
.tinnies-mp-invite-overlay {
  z-index: 10055;
  align-items: center;
  justify-content: center;
  background: rgba(9, 22, 35, .52);
  backdrop-filter: blur(5px);
}
.tinnies-mp-invite-card {
  width: min(92vw, 560px);
  border-radius: 28px;
  padding: 1.1rem;
  background: linear-gradient(180deg, rgba(244, 252, 255, .98), rgba(226, 244, 232, .98));
  color: #123047;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: 0 22px 70px rgba(0,0,0,.34);
  text-align: left;
}
.tinnies-mp-invite-card h3 {
  margin: .18rem 0 .45rem;
  font-size: clamp(1.35rem, 3.4vw, 2rem);
}
.tinnies-mp-invite-card p {
  margin: .35rem 0 1rem;
  color: rgba(18,48,71,.78);
  font-weight: 700;
}
.tinnies-mp-actions .tinnies-mp-primary,
.tinnies-mp-primary {
  background: #24a36d !important;
}

/* v449: Bauwelt-Auswahl / Freundesdorf / temporäre Bauhilfe als echtes Overlay */
#buildWorldPanel.build-world-panel {
  z-index: 10045 !important;
  align-items: center;
  justify-content: center;
  padding: clamp(.75rem, 2.5vw, 1.4rem);
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 18%, rgba(228,243,246,.26), transparent 36%),
    linear-gradient(180deg, rgba(124,154,166,.58), rgba(38,58,63,.88)) !important;
}
#buildWorldPanel.build-world-panel.hidden { display: none !important; }
#buildWorldPanel .build-world-card {
  width: min(92vw, 620px);
  max-height: min(88vh, 720px);
  overflow: auto;
  box-sizing: border-box;
  border-radius: 28px;
  padding: clamp(.95rem, 2.4vw, 1.25rem);
  color: var(--tinnie-ui-text, #f6fbfc) !important;
  border: 1px solid var(--tinnie-ui-border, rgba(224,241,246,.46)) !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.16), transparent 34%),
    linear-gradient(180deg, rgba(60,83,90,.91), rgba(26,42,47,.96)) !important;
  box-shadow: 0 18px 42px rgba(16,30,35,.34), inset 0 0 22px rgba(255,255,255,.07) !important;
}
#buildWorldPanel .build-world-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .85rem;
}
#buildWorldPanel .build-world-kicker {
  color: var(--tinnie-ui-gold, #ffe16f);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: .18rem;
}
#buildWorldPanel .build-world-head h3 {
  margin: 0;
  font-size: clamp(1.45rem, 3.4vw, 2.15rem);
}
#buildWorldPanel .build-world-close {
  width: 2.35rem;
  height: 2.35rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 900;
}
#buildWorldPanel .build-world-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: .65rem;
  align-items: center;
  margin: .6rem 0;
}
#buildWorldPanel .build-help-row {
  grid-template-columns: 96px minmax(0, 1fr) auto auto;
}
#buildWorldPanel .build-world-row label {
  margin: 0;
  color: var(--tinnie-ui-muted, rgba(232,244,246,.86));
  font-weight: 900;
}
#buildWorldPanel .build-world-row select {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(224,241,246,.44);
  border-radius: 14px;
  background: rgba(11,28,35,.72);
  color: #f8fff7;
  padding: .72rem .78rem;
  font-weight: 800;
}
#buildWorldPanel .build-world-row button {
  border: 0;
  border-radius: 14px;
  padding: .72rem .85rem;
  background: rgba(123, 213, 151, .96);
  color: #10251a;
  font-weight: 900;
  white-space: nowrap;
}
#buildWorldPanel .build-world-row button:disabled,
#buildWorldPanel .build-world-row select:disabled {
  opacity: .44;
}
#buildWorldPanel .build-world-status {
  margin-top: .9rem;
  padding: .72rem .82rem;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(246,251,252,.92);
  font-weight: 800;
}
.build-hotbar.build-readonly .build-slot:not(.earn) {
  opacity: .55;
}
@media (max-width: 760px) {
  #buildWorldPanel .build-world-row,
  #buildWorldPanel .build-help-row {
    grid-template-columns: 1fr;
  }
  #buildWorldPanel .build-world-row button {
    width: 100%;
  }
}

/* Geräteübertragung / Spielschlüssel per Handy */
#loginScreen .guest-pair-box{
  margin-top:1rem;
  padding:1rem;
  border-radius:18px;
  border:1px solid rgba(125,211,252,.28);
  background:linear-gradient(180deg,rgba(14,165,233,.10),rgba(15,23,42,.72));
  text-align:center;
}
#loginScreen .guest-pair-title{
  font-weight:800;
  letter-spacing:.01em;
  color:#e0f2fe;
  margin-bottom:.35rem;
}
#loginScreen .guest-pair-text,
#loginScreen .guest-pair-status{
  color:#cbd5e1;
  font-size:.92rem;
  line-height:1.35;
}
#loginScreen .guest-pair-qr{
  margin:.85rem auto .55rem;
  width:180px;
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.55rem;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
}
#loginScreen .guest-pair-qr svg{
  width:100%;
  height:auto;
  display:block;
}
#loginScreen .guest-pair-code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:.45rem auto .25rem;
  padding:.45rem .7rem;
  border-radius:14px;
  background:rgba(15,23,42,.78);
  border:1px solid rgba(148,163,184,.32);
  color:#f8fafc;
  font-weight:900;
  letter-spacing:.16em;
  font-size:1.15rem;
}
#loginScreen .guest-pair-url{
  margin:.25rem auto .45rem;
  color:#93c5fd;
  font-size:.82rem;
  line-height:1.3;
  word-break:break-all;
}
#loginScreen .guest-pair-status.error{color:#fecaca}
#loginScreen .guest-pair-status.ok{color:#bbf7d0}
#loginScreen #btnCancelGuestPair{margin-top:.65rem;width:100%}

@media (max-height:720px){
  #loginScreen .guest-pair-qr{width:142px;min-height:142px;margin:.55rem auto .35rem}
  #loginScreen .guest-pair-box{padding:.75rem}
}

/* v444: Fire-TV sichere Geräteverbindung im Startmenü */
#loginScreen.guest-pair-active .start-hero,
#loginScreen.guest-pair-active .start-pill-row,
#loginScreen.guest-pair-active .start-hint,
#loginScreen.guest-pair-active .guest-import-head,
#loginScreen.guest-pair-active #guestImportCode,
#loginScreen.guest-pair-active .guest-import-box > label,
#loginScreen.guest-pair-active .guest-import-actions,
#loginScreen.guest-pair-active .start-footer-note,
#loginScreen.guest-pair-active .start-legal-links {
  display: none !important;
}
#loginScreen.guest-pair-active .start-card.card.lg,
#loginScreen.guest-pair-active .start-card {
  display: grid;
  align-items: center;
  justify-items: center;
  max-height: calc(100dvh - 18px);
  overflow: hidden;
}
#loginScreen.guest-pair-active .guest-import-box {
  width: min(96vw, 540px);
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#loginScreen.guest-pair-active .guest-pair-box {
  display: grid;
  width: min(94vw, 500px);
  max-height: calc(100dvh - 44px);
  overflow: hidden;
  padding: clamp(.8rem, 2.2vh, 1.15rem);
  margin: 0 auto;
  gap: clamp(.28rem, 1vh, .55rem);
  align-content: center;
  box-sizing: border-box;
}
#loginScreen.guest-pair-active .guest-pair-title {
  font-size: clamp(1rem, 3.2vh, 1.35rem);
  margin: 0;
}
#loginScreen.guest-pair-active .guest-pair-text {
  font-size: clamp(.82rem, 2.1vh, .98rem);
  margin: 0 auto;
  max-width: 34em;
}
#loginScreen.guest-pair-active .guest-pair-qr {
  width: min(38vh, 220px);
  min-height: min(38vh, 220px);
  margin: .25rem auto;
}
#loginScreen.guest-pair-active .guest-pair-code {
  font-size: clamp(1rem, 3.1vh, 1.28rem);
  margin: .15rem auto;
}
#loginScreen.guest-pair-active .guest-pair-url {
  max-width: 100%;
  font-size: clamp(.68rem, 1.8vh, .82rem);
  margin: 0 auto .1rem;
}
#loginScreen .guest-pair-tv-hint {
  color: rgba(191,219,254,.88);
  font-size: .82rem;
  line-height: 1.25;
  margin-top: .15rem;
}
#loginScreen.guest-pair-active #btnCancelGuestPair {
  width: 100%;
  min-height: 46px;
  margin-top: .25rem;
}
@media (max-height:560px){
  #loginScreen.guest-pair-active .guest-pair-qr{
    width:min(30vh,150px);
    min-height:min(30vh,150px);
    padding:.35rem;
    border-radius:14px;
  }
  #loginScreen.guest-pair-active .guest-pair-box{
    gap:.22rem;
    padding:.62rem;
  }
  #loginScreen.guest-pair-active .guest-pair-text{
    font-size:.78rem;
  }
  #loginScreen.guest-pair-active .guest-pair-url{
    font-size:.64rem;
  }
}

/* v510: erster WebRTC-only Sprachchat */
.tinnies-voice-overlay {
  z-index: 10070;
  align-items: center;
  justify-content: center;
  background: rgba(9, 22, 35, .54);
  backdrop-filter: blur(5px);
}
.tinnies-voice-card {
  width: min(92vw, 500px);
  border-radius: 28px;
  padding: 1.1rem;
  background: linear-gradient(180deg, rgba(244, 252, 255, .98), rgba(229, 244, 255, .98));
  color: #123047;
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 22px 70px rgba(0,0,0,.34);
}
.tinnies-voice-card h3 {
  margin: .16rem 0 .45rem;
  font-size: clamp(1.35rem, 3.4vw, 2rem);
}
.tinnies-voice-card p {
  margin: .35rem 0 .85rem;
  color: rgba(18,48,71,.78);
  font-weight: 800;
}
.tinnies-voice-card small {
  display: block;
  margin-top: .85rem;
  color: rgba(18,48,71,.62);
  font-weight: 800;
}
.tinnies-voice-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 1rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  background: rgba(47,143,211,.13);
  color: #1e6697;
  font-weight: 900;
}
.tinnies-voice-status.is-connected {
  background: rgba(36,163,109,.16);
  color: #16764e;
}
.tinnies-voice-friend button {
  width: auto;
  padding: .5rem .78rem;
  border-radius: 999px;
  background: #24a36d;
  font-weight: 900;
  white-space: nowrap;
}


/* v519: minimierter Sprachchat sitzt oben, aber links vom HUD-Menü, damit ☰/HUD frei bleibt */
.tinnies-voice-overlay.is-minimized {
  position: fixed;
  inset: .65rem calc(env(safe-area-inset-right, 0px) + 4.35rem) auto auto;
  width: auto;
  height: auto;
  display: block;
  align-items: initial;
  justify-content: initial;
  background: transparent;
  backdrop-filter: none;
  pointer-events: none;
  z-index: 10060;
}
.tinnies-voice-mini {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: .34rem;
  max-width: min(78vw, 430px);
  padding: .32rem;
  border-radius: 999px;
  background: rgba(235, 249, 255, .94);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 28px rgba(0,0,0,.24);
  color: #123047;
}
.tinnies-voice-mini-main,
.tinnies-voice-mini-btn {
  min-height: 32px;
  border-radius: 999px;
  font-weight: 900;
  white-space: nowrap;
}
.tinnies-voice-mini-main {
  display: flex;
  align-items: center;
  gap: .42rem;
  padding: .24rem .58rem;
  background: rgba(47,143,211,.14);
  color: #123047;
  text-align: left;
}
.tinnies-voice-mini-main small {
  display: block;
  font-size: .68rem;
  opacity: .72;
  line-height: 1.02;
}
.tinnies-voice-mini-dot {
  width: .62rem;
  height: .62rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #f1a92f;
  box-shadow: 0 0 0 4px rgba(241,169,47,.16);
}
.tinnies-voice-mini-dot.is-connected {
  background: #24a36d;
  box-shadow: 0 0 0 4px rgba(36,163,109,.16);
}
.tinnies-voice-mini-btn {
  padding: .24rem .58rem;
  background: #1f6feb;
}
.tinnies-voice-mini-btn.danger {
  background: #d94b4b;
}
@media (max-width: 560px) {
  .tinnies-voice-overlay.is-minimized {
    top: calc(env(safe-area-inset-top, 0px) + .45rem);
    right: calc(env(safe-area-inset-right, 0px) + 4.1rem);
    bottom: auto;
    left: auto;
  }
  .tinnies-voice-mini {
    max-width: calc(100vw - 4.9rem);
    justify-content: flex-end;
    border-radius: 18px;
  }
  .tinnies-voice-mini-main {
    min-width: 0;
    max-width: 48vw;
    flex: 0 1 auto;
  }
  .tinnies-voice-mini-main span:last-child {
    min-width: 0;
    overflow: hidden;
  }
  .tinnies-voice-mini-main b,
  .tinnies-voice-mini-main small {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
@media (max-width: 420px) {
  .tinnies-voice-mini-main small {
    display: none;
  }
  .tinnies-voice-mini-main {
    max-width: 38vw;
  }
  .tinnies-voice-mini-btn {
    padding-left: .5rem;
    padding-right: .5rem;
  }
}


/* v596: Turbo-Bauwagen HUD + Mengen-Auswahl.
   Nicht mehr unten links auf Freundestatus/Bauleiste, sondern als kompakte Karte
   oberhalb der unteren UI-Reserve. */
.tinnies-turbo-build-hud {
  position: fixed;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: var(--tinnies-card-stack-bottom);
  z-index: var(--tinnies-z-card);
  width: min(340px, calc(100vw - 24px));
  padding: .48rem .58rem;
  border-radius: 16px;
  border: 1px solid var(--tinnie-ui-border, rgba(210,232,238,.48));
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 48%),
    linear-gradient(180deg, rgba(60,83,90,.90), rgba(26,42,47,.96));
  color: var(--tinnie-ui-text, #fff);
  box-shadow: 0 12px 28px rgba(16,30,35,.28), inset 0 0 18px rgba(255,255,255,.055);
  backdrop-filter: blur(8px);
  pointer-events: none;
  font-weight: 800;
}
.tinnies-turbo-build-hud.hidden { display: none !important; }
.tinnies-turbo-build-hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  font-size: .92rem;
  line-height: 1.1;
}
.tinnies-turbo-build-hud-top span {
  white-space: nowrap;
  opacity: .86;
  font-size: .78rem;
}
.tinnies-turbo-build-hud-main {
  margin-top: .35rem;
  padding: .42rem .5rem;
  border-radius: 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(210,232,238,.32);
  font-size: .86rem;
}
.tinnies-turbo-build-hud-main.warn {
  background: rgba(255,225,111,.14);
  border-color: rgba(255,225,111,.50);
}
.tinnies-turbo-build-hud-sub {
  margin-top: .28rem;
  font-size: .68rem;
  line-height: 1.22;
  opacity: .86;
}
.tinnies-turbo-build-overlay {
  z-index: var(--tinnies-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.tinnies-turbo-build-panel {
  width: min(92vw, 520px);
  border-radius: 22px;
  padding: 1rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.16), transparent 48%),
    linear-gradient(180deg, rgba(60,83,90,.94), rgba(26,42,47,.98));
  color: var(--tinnie-ui-text, #f6fbfc);
  border: 1px solid var(--tinnie-ui-border, rgba(210,232,238,.48));
  box-shadow: 0 26px 70px rgba(15,23,42,.36), inset 0 0 18px rgba(255,255,255,.055);
  backdrop-filter: blur(10px);
}
.tinnies-turbo-build-panel h3 {
  margin: .1rem 0 .35rem;
  font-size: clamp(1.25rem, 4vw, 1.65rem);
}
.tinnies-turbo-build-panel p {
  margin: 0 0 .85rem;
  color: var(--tinnie-ui-muted, rgba(232,244,246,.86));
  line-height: 1.35;
}
.tinnies-turbo-build-kicker {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .28rem .52rem;
  border-radius: 999px;
  background: rgba(145,215,235,.18);
  color: var(--tinnie-ui-blue-light, #91d7eb);
  border: 1px solid rgba(210,232,238,.28);
  font-weight: 900;
  font-size: .78rem;
}
.tinnies-turbo-build-amounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: .55rem;
  margin: .8rem 0 .75rem;
}
.tinnies-turbo-build-amount {
  min-height: 54px;
  border: 1px solid rgba(210,232,238,.40);
  border-radius: 16px;
  background: linear-gradient(135deg, var(--tinnie-ui-blue-light, #91d7eb) 0%, var(--tinnie-ui-blue, #4f93b2) 52%, #2f615f 100%);
  color: var(--tinnie-ui-text, #f6fbfc);
  font-weight: 1000;
  font-size: 1.15rem;
  box-shadow: 0 10px 22px rgba(14,116,144,.20), inset 0 0 12px rgba(255,255,255,.10);
  cursor: pointer;
}
.tinnies-turbo-build-amount:hover,
.tinnies-turbo-build-amount:focus,
.tinnies-turbo-build-amount.tinnies-tv-selected,
.tinnies-turbo-build-amount.tinnies-tv-ui-selected {
  outline: 3px solid rgba(255,225,111,.62);
  outline-offset: 2px;
  transform: translateY(-1px);
}
.tinnies-turbo-build-panel .ghost {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  font-weight: 900;
  color: var(--tinnie-ui-text, #f6fbfc);
  background: linear-gradient(135deg, var(--tinnie-ui-slate, #5d7e8c) 0%, #5d7e8c 48%, var(--tinnie-ui-slate-dark, #334b52) 100%);
  border: 1px solid rgba(210,232,238,.35);
}
body.tinnies-local-guest-active .tinnies-turbo-build-hud { display: none !important; }
@media (max-width: 680px) {
  .tinnies-turbo-build-hud {
    left: .55rem;
    right: .55rem;
    bottom: var(--tinnies-card-stack-bottom);
    width: auto;
    padding: .48rem .54rem;
  }
  .tinnies-turbo-build-hud-top { font-size: .82rem; }
  .tinnies-turbo-build-hud-main { font-size: .78rem; }
  .tinnies-turbo-build-hud-sub { font-size: .68rem; }
}


/* v596: Stack-Regeln fuer Baumodus/Turbo aktiv. */
body.tinnies-turbo-build-active {
  --tinnies-card-stack-bottom: calc(var(--tinnies-safe-bottom) + var(--tinnies-build-hotbar-h) + 18px);
}
body.tinnies-turbo-build-active .tinnies-mp-status {
  /* v596: aktive/ladende Freundestatus bleiben klein unten links; passive werden oben ausgeblendet. */
  bottom: calc(var(--tinnies-safe-bottom) + var(--tinnies-build-hotbar-h) + 8px);
  left: max(10px, env(safe-area-inset-left));
}
body.tinnies-turbo-build-active .build-hotbar {
  z-index: var(--tinnies-z-hotbar);
}
.overlay:not(.hidden),
.tinnie-overlay:not(.hidden) {
  z-index: var(--tinnies-z-modal);
}
.tinnies-mp-panel-overlay:not(.hidden),
.tinnies-mp-invite-overlay:not(.hidden),
.tinnies-turbo-build-overlay:not(.hidden) {
  z-index: calc(var(--tinnies-z-modal) + 10);
}
@media (max-height: 620px) {
  .tinnies-turbo-build-hud-sub { display: none; }
  .tinnies-turbo-build-hud-main { margin-top: .28rem; padding: .34rem .45rem; }
}


/* v596: Responsive HUD-Ordnung.
   - ausgeklappte Bauleiste = aktive Bedienung und liegt ueber Statuskarten
   - Turbo-Info bleibt kompakt und weicht auf sehr kleinen Displays nach oben aus
   - passive Freunde-Anzeige wird nur bei echter Verbindung/Verbindungsvorgang sichtbar */
body.tinnies-turbo-build-active .build-hotbar.build-hotbar-expanded {
  z-index: var(--tinnies-z-floating);
}
body.tinnies-turbo-build-active .build-hotbar.build-hotbar-expanded ~ .tinnies-turbo-build-hud {
  z-index: var(--tinnies-z-card);
}
@media (max-width: 760px), (max-height: 620px) {
  .build-hotbar.build-hotbar-compact.build-hotbar-expanded {
    z-index: calc(var(--tinnies-z-floating) + 20);
    max-height: min(46vh, 330px);
  }
  .tinnies-turbo-build-hud {
    width: min(310px, calc(100vw - 20px));
    left: calc(env(safe-area-inset-left, 0px) + 10px);
    bottom: calc(var(--tinnies-safe-bottom) + var(--tinnies-build-hotbar-h) + 10px);
    padding: .44rem .52rem;
  }
  body.tinnies-turbo-build-active .build-hotbar.build-hotbar-expanded + .tinnies-turbo-build-hud,
  body.tinnies-turbo-build-active .build-hotbar.build-hotbar-expanded ~ .tinnies-turbo-build-hud {
    opacity: .58;
  }
}
@media (max-width: 560px) {
  .tinnies-turbo-build-hud {
    left: .5rem;
    right: .5rem;
    width: auto;
  }
  .tinnies-turbo-build-hud-top span { font-size: .70rem; }
  .tinnies-turbo-build-hud-main { font-size: .76rem; }
  .tinnies-mp-status {
    font-size: 11px;
    padding: .28rem .5rem;
  }
}