/* 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}

@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 .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}
}

@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}
}
