/* Rap Battle Studios 7.0.26 — one-thumb product shell.
   Die App zeigt zuerst die Aufgabe. Navigation und weitere Werkzeuge
   bleiben erreichbar, konkurrieren aber nicht mehr mit dem Inhalt. */

body[data-view="start"] #page-start .v65-overview,
body[data-view="start"] #page-start .v65-workspace{display:none!important}

.rbs-battle-hub-tabs{
  display:flex;gap:5px;width:min(100%,560px);margin:0 0 18px;padding:5px;
  border:1px solid rgba(255,255,255,.1);border-radius:16px;background:#101216
}
.rbs-battle-hub-tabs button{
  flex:1;min-height:44px;padding:0 16px;border:0;border-radius:11px;
  background:transparent;color:#929ca2;font:800 11px/1 Sora,sans-serif;cursor:pointer
}
.rbs-battle-hub-tabs button.on{
  background:#f4f1e8;color:#09090b;box-shadow:0 5px 18px rgba(0,0,0,.3)
}

.rbs-notifications{width:min(520px,calc(100% - 28px));max-height:min(760px,88dvh);padding:0;border:1px solid #26343b;border-radius:24px;background:#0b1115;color:#fff;box-shadow:0 30px 90px rgba(0,0,0,.7)}
.rbs-notifications::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(10px)}
.rbs-notifications-card{display:flex;flex-direction:column;max-height:min(760px,88dvh)}
.rbs-notifications-grip{display:none}
.rbs-notifications-card>header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 20px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.rbs-notifications-card>header small{color:#ff4260;font-size:9px;font-weight:900;letter-spacing:.16em}
.rbs-notifications-card>header h2{margin:5px 0 0;font:800 25px/1.05 "Bricolage Grotesque",Sora,sans-serif}
.rbs-notifications-card>header button{width:44px;height:44px;border:1px solid #303c42;border-radius:50%;background:#141c21;color:#fff;font-size:26px}
.rbs-notifications-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 20px;border-bottom:1px solid rgba(255,255,255,.07)}
.rbs-notifications-tools span{color:#8f9aa0;font-size:11px}
.rbs-notifications-tools button{min-height:36px;padding:0 12px;border:0;border-radius:10px;background:#192228;color:#fff;font-size:10px;font-weight:800}
.rbs-notifications-tools button:disabled{opacity:.45}
.rbs-notifications-list{min-height:180px;overflow-y:auto;padding:8px}
.rbs-notification-row{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) 8px;align-items:center;gap:11px;min-height:72px;padding:11px;border:0;border-radius:15px;background:transparent;color:#fff;text-align:left}
.rbs-notification-row:hover{background:#121b20}
.rbs-notification-row.new{background:rgba(255,40,74,.075)}
.rbs-notification-row>span{width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#182329;color:#ff4965;font-size:18px}
.rbs-notification-row b{display:block;font-size:13px;line-height:1.35}
.rbs-notification-row small{display:block;margin-top:5px;color:#849096;font-size:10px}
.rbs-notification-row>i{width:7px;height:7px;border-radius:50%;background:transparent}
.rbs-notification-row.new>i{background:#ff3154;box-shadow:0 0 12px rgba(255,49,84,.65)}
.rbs-notifications-empty{display:grid;place-items:center;min-height:180px;padding:28px;color:#87939a;font-size:12px;text-align:center}

@media(max-width:820px){
  :root{--rbs-tabbar-height:74px}

  body:not([data-view="landing"]):not([data-view="login"]){
    padding-bottom:calc(var(--rbs-tabbar-height) + env(safe-area-inset-bottom))
  }

  body:not([data-view="landing"]):not([data-view="login"]) .page{
    width:100%;max-width:760px;margin:0 auto;
    padding:18px 14px calc(28px + env(safe-area-inset-bottom))
  }

  body[data-view="start"] #page-start{max-width:none;padding:0 0 calc(22px + env(safe-area-inset-bottom))!important}
  body[data-view="start"] #page-start .v65-quickbar{display:none!important}
  body[data-view="start"] #page-start .v65-full-feed{margin-top:8px!important}

  .view-heading{margin:2px 0 18px!important;padding:0!important}
  .view-heading .kicker,.v6-kicker{font-size:9px!important;letter-spacing:.14em!important}
  .view-heading h1,.view-heading h2,.v62-head h2{
    margin:7px 0 5px!important;font-size:clamp(30px,9vw,42px)!important;
    line-height:1!important;letter-spacing:-.045em!important
  }
  .view-heading p,.v62-head p{margin:0!important;color:#97a1a6!important;font-size:13px!important;line-height:1.45!important}

  .karte,.panel,.songkachel,.beatkachel,.paarung,.v62-live-card,.v62-queue,
  .v62-social-card,.v62-notify-card,.v62-profile-card{
    border-radius:20px!important;box-shadow:0 14px 38px rgba(0,0,0,.22)!important
  }

  button,.btn,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  button:active,.btn:active,[role="button"]:active{transform:scale(.975)}
  .btn,button.primary,.primaer{min-height:44px}

  .reiter{
    display:flex!important;width:100%;gap:4px!important;padding:4px!important;
    overflow-x:auto;border:1px solid rgba(255,255,255,.09)!important;
    border-radius:14px!important;background:#101114!important;scrollbar-width:none
  }
  .reiter::-webkit-scrollbar{display:none}
  .reiter button{flex:1 0 auto;min-height:38px!important;border:0!important;border-radius:10px!important;padding:0 13px!important}
  .reiter button.on{background:#f4f1e8!important;color:#09090b!important;box-shadow:0 4px 14px rgba(0,0,0,.24)!important}

  .unterleiste{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;align-items:end!important;
    min-height:var(--rbs-tabbar-height);padding:7px 5px calc(5px + env(safe-area-inset-bottom))!important;
    border-top:1px solid rgba(255,255,255,.1);background:rgba(9,10,12,.88)!important;
    backdrop-filter:blur(24px) saturate(170%)!important;-webkit-backdrop-filter:blur(24px) saturate(170%)!important
  }
  .unterleiste>button:not(.rbs-schnell-plus){
    min-height:56px!important;padding:7px 1px 4px!important;border-radius:14px!important;
    color:#777c82!important;font-size:9px!important;letter-spacing:0!important
  }
  .unterleiste>button:not(.rbs-schnell-plus) svg{width:23px;height:23px;stroke-width:1.85}
  .unterleiste>button.on:not(.rbs-schnell-plus){color:#fff!important;background:rgba(255,255,255,.055)!important}
  .unterleiste .rbs-schnell-plus{
    width:58px!important;height:58px!important;min-height:58px!important;margin:-13px auto 2px!important;padding:0!important;
    display:grid!important;grid-template-rows:36px 12px!important;place-content:center!important;gap:0!important;
    border:1px solid rgba(255,255,255,.3)!important;border-radius:19px!important;
    background:linear-gradient(145deg,#ff3154,#d5002d)!important;color:#fff!important;
    box-shadow:0 10px 30px rgba(255,18,61,.34),inset 0 1px rgba(255,255,255,.25)!important
  }
  .unterleiste .rbs-schnell-plus>span{font:300 34px/32px system-ui}
  .unterleiste .rbs-schnell-plus>small{font:800 8px/1 Sora,sans-serif;letter-spacing:0}
  .unterleiste .rbs-schnell-plus.on{box-shadow:0 0 0 3px rgba(255,255,255,.12),0 12px 34px rgba(255,18,61,.5)!important}

  #page-beats .boerse-kopf{position:sticky;top:64px;z-index:12;margin:0 -4px 12px;padding:7px 4px;background:rgba(9,10,12,.9);backdrop-filter:blur(18px)}
  #page-beats .beat-feld{min-height:48px;border-radius:15px!important}
  #page-beats .feed-gitter{grid-template-columns:1fr!important}

  #page-arena{padding-left:10px!important;padding-right:10px!important}
  #page-arena .v62-shell{padding:0!important}
  #page-arena .v62-head{display:grid!important;gap:14px!important;margin-bottom:16px!important}
  #page-arena .v62-head>.btn{width:100%}
  #page-arena .rbs-battle-hub-tabs,#page-liga .rbs-battle-hub-tabs{width:100%;margin-bottom:14px}
  #page-arena .v62-arena-grid{grid-template-columns:1fr!important;gap:12px!important}
  #page-arena .v62-subgrid{display:none!important}
  #page-arena .v62-live-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  #page-arena #v62OpenBattle{grid-column:1/-1;grid-row:1}

  #page-chat .chat-zwei{min-height:calc(100dvh - 190px);border-radius:20px!important;overflow:hidden}
  #page-chat .chat-eingabe{padding-bottom:max(12px,env(safe-area-inset-bottom))}

  #page-profil #profilKopf{margin-top:4px}

  .rbs-notifications{width:100%;max-width:none;max-height:88dvh;margin:auto 0 0;border-width:1px 0 0;border-radius:28px 28px 0 0}
  .rbs-notifications-card{max-height:88dvh;padding-bottom:env(safe-area-inset-bottom)}
  .rbs-notifications-grip{display:block;width:42px;height:4px;margin:10px auto 0;border-radius:9px;background:#5f6a70}
  .rbs-notifications-card>header{padding-top:12px}
}

@media(max-width:390px){
  .unterleiste>button:not(.rbs-schnell-plus){font-size:8px!important}
  .unterleiste .rbs-schnell-plus{width:54px!important;height:54px!important;min-height:54px!important}
}

@media(prefers-reduced-motion:reduce){
  button:active,.btn:active,[role="button"]:active{transform:none}
}

/* 7.0.28 — Das Studio ist eine geschlossene Arbeitsfläche. Der globale
   Pflichtangaben-Footer bleibt in allen normalen App-Bereichen erreichbar,
   darf aber nicht hinter Timeline und Transport in die Aufnahme hineinrollen. */
body[data-view="studio"]>.foot{display:none!important}

@media(max-width:820px){
  body[data-view="studio"]{padding-bottom:0!important}
  body[data-view="studio"] #page-studio{padding-bottom:0!important}
}

/* 7.0.29 — Bar Replay: die zuletzt gehörten acht Sekunden werden mit
   einem Tipp zur sichtbaren Prüfschleife. Keine zusätzliche Technikseite. */
.buehne-loop{
  position:absolute;top:-4px;height:14px;border-radius:99px;
  background:rgba(255,34,72,.2);border:1px solid rgba(255,62,94,.72);
  box-shadow:0 0 16px rgba(255,28,63,.22);pointer-events:none
}
.buehne-replay{
  align-self:center;min-height:44px;padding:7px 14px;display:grid;
  grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;
  align-items:center;border:1px solid rgba(255,255,255,.14);border-radius:14px;
  background:rgba(255,255,255,.055);color:#f4f6f7;cursor:pointer
}
.buehne-replay>span{grid-row:1/3;color:#ff3656;font-size:20px}
.buehne-replay>b{font-size:11px;line-height:1.15}
.buehne-replay>small{color:#77858b;font-size:8px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.buehne-replay.an{border-color:#ff3656;background:rgba(255,28,63,.13);box-shadow:0 0 22px rgba(255,28,63,.12)}
.buehne-replay[disabled]{opacity:.4;cursor:default}

/* Mobile layout: long content must wrap inside its own surface. */
@media(max-width:820px){
  .buehne{overflow-y:auto;overscroll-behavior:contain;gap:12px}
  .buehne>*{flex-shrink:0;min-width:0}
  .buehne-mitte{flex:1 1 auto;min-height:100px}
  .buehne-bild{width:min(60vw,30dvh,280px);height:auto;aspect-ratio:1}
  .buehne-knoepfe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) 64px repeat(2,minmax(0,1fr));gap:6px}
  .buehne-neben{min-width:0;width:100%;padding:0 4px;min-height:44px}
  .buehne-gross{width:64px;height:64px}
  .buehne-text strong{overflow-wrap:anywhere}
  .rbs-notification-row>div{min-width:0;overflow-wrap:anywhere}
  #page-chat .chat-zwei>*{min-width:0}
}
@media(max-width:720px){
  #page-studio .sm-kopf-zeile .v70-track-copy{min-width:0}
  #page-studio .sm-kopf-zeile .sm-name{white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip!important}
  #page-studio .v721-take-actions b{white-space:normal;overflow-wrap:anywhere;text-align:center}
  #page-studio .sm-kopf-zeile.sm-neu .v70-track-copy{grid-column:2/-1}
}