/* RuffRush V16: one-screen console-like lobby. Visual-only; preserve existing game/commerce logic. */
html,body{width:100%;height:100%;margin:0;overscroll-behavior:none}
body{overflow:hidden}
#lobby{height:100vh;height:100dvh;width:100%;overflow:hidden;display:flex;flex-direction:column;isolation:isolate;background:radial-gradient(ellipse at 50% 42%,#5b2ca33d,transparent 50%),linear-gradient(130deg,#070b2b,#14113e 60%,#070e2d)}
#lobby header{flex:0 0 62px;height:62px;min-height:0;padding:5px clamp(10px,2vw,28px);gap:8px;z-index:3;flex-wrap:nowrap;border-bottom:2px solid #6254b4}
#lobby .brand{font-size:clamp(19px,2.8vw,31px);flex-shrink:0}
#lobby .brand small{font-size:8px;letter-spacing:.7px;margin-top:4px}
#lobby .wallet{gap:clamp(4px,.8vw,12px);flex-wrap:nowrap}
#lobby .wallet>span,#lobby .credits-wallet{padding:7px 10px;font-size:clamp(10px,1.4vw,15px);white-space:nowrap}
#lobby .wallet b{font-size:inherit;margin-left:3px}
#lobby #accountBtn{padding:7px 10px;font-size:11px;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
#lobby #profileBtn{height:34px;width:34px;flex-shrink:0}
#lobby main{flex:1;min-height:0;min-width:0;max-width:none;width:100%;padding:clamp(7px,1.3vh,14px) clamp(8px,1.5vw,20px);margin:0;display:grid;grid-template-columns:clamp(92px,12vw,160px) minmax(0,1fr) clamp(198px,23vw,290px);grid-template-rows:minmax(0,1fr) auto;gap:clamp(7px,1.2vw,15px);overflow:hidden}
#lobby main>nav{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:clamp(7px,1.7vh,16px);height:auto;min-height:0;padding:12px 8px;margin:0;background:linear-gradient(160deg,#252065ec,#0f1643ee);border:2px solid #6558b8;border-radius:20px;box-shadow:0 7px 0 #060a2c, inset 0 2px 0 #ffffff15}
#lobby main>nav .active,#lobby main>nav .build{display:none}
#lobby main>nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:48px;flex:0 1 auto;padding:9px 5px;gap:4px;font-weight:900;letter-spacing:.25px;font-size:clamp(9px,.9vw,12px);white-space:normal;text-align:center;line-height:1.25;border:2px solid #9382ec;border-radius:14px;background:linear-gradient(180deg,#6d52cc,#36266e);box-shadow:0 4px 0 #0b0c33, inset 0 1px 0 #ffffff3a;color:#fff;overflow-wrap:anywhere}
#lobby main>nav button:hover{filter:brightness(1.18);transform:translateY(-1px)}
#lobby main>nav button:active{transform:translateY(2px)}
#lobby main>nav #shopBtn{background:linear-gradient(180deg,#e58c47,#ac4a94);border-color:#ffd484}
#lobby main>nav #skinNav{background:linear-gradient(180deg,#be70f7,#7235be);border-color:#e6afff}
#lobby main>nav #leaderboardBtn{background:linear-gradient(180deg,#ddad48,#b56742);border-color:#ffe28a;color:#fff}
#lobby main>.hero{grid-column:2;grid-row:1;display:block;position:relative;min-height:0;height:100%;width:100%;margin:0;border:3px solid #7f6bc9;border-radius:24px;overflow:hidden;background:radial-gradient(ellipse at 52% 60%,#6540bc88,transparent 65%),linear-gradient(155deg,#23165f,#0c1541);box-shadow:0 6px 0 #060b2a,0 12px 28px #0007}
#lobby .hero-copy{display:none}
#lobby .hero-art{position:absolute;inset:0;min-height:0;width:100%;height:100%;opacity:1;filter:drop-shadow(0 12px 16px #070727a0)}
#lobby #portrait{width:100%;height:100%;position:absolute;inset:0;z-index:2}
#lobby .hero-label{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);z-index:5;align-items:center;min-width:150px;max-width:85%;padding:7px 18px 9px;text-align:center;white-space:nowrap;border-radius:15px;background:linear-gradient(135deg,#332175f2,#121744ed);box-shadow:0 4px 0 #0b0c30}
#lobby .hero-label strong{font-size:clamp(21px,3vw,37px);line-height:1.1}
#lobby .hero-label small{font-size:clamp(8px,.9vw,10px);max-width:100%;white-space:normal;line-height:1.3}
#lobby .hero-label>span{font-size:8px}
#lobby .orbit-label{display:none}
#lobby .hero-star{right:4%;top:4%;font-size:clamp(13px,2vw,23px);z-index:3}
#lobby .hero-star span{font-size:7px}
#lobby .galaxy-planet{top:15%;right:4%;width:clamp(130px,23vw,280px);height:clamp(130px,23vw,280px);opacity:.68}
#lobby .galaxy-moon{right:9%;top:50%}
#lobby main>.map-select{grid-column:2;grid-row:2;min-height:0;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0;padding:8px 14px;border-radius:15px;border:2px solid #6c60b9;box-shadow:0 4px 0 #070b30}
#lobby .map-select>div:first-child{min-width:0;flex:1}
#lobby .map-select label{margin:0 0 4px;font-size:10px}
#lobby .map-select select{width:100%;padding:8px;font-size:12px}
#lobby .map-select p{display:none}
#lobby .map-select small{display:none}
#lobby #mapPreview{width:clamp(48px,6vw,76px);height:clamp(48px,6vw,76px)}
#lobby main>.playdeck{grid-column:3;grid-row:1/3;min-height:0;min-width:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:clamp(8px,1.5vh,15px);margin:0;padding:clamp(9px,1.2vw,17px);border-radius:20px;overflow:hidden;box-shadow:0 6px 0 #070b30}
#lobby .playdeck>div,#lobby .playdeck>section{min-width:0;flex-shrink:0}
#lobby .playdeck small{letter-spacing:.7px}
#lobby .playdeck>.online-options{margin:0;padding:9px 10px;border-radius:13px;box-shadow:none;display:flex;flex-direction:column;gap:3px}
#lobby .online-options label{margin:0;font-size:10px}
#lobby .online-options select{margin:0;padding:7px;font-size:11px;min-height:32px}
#lobby .online-options p{display:none}
#lobby .agent-select{border:0;display:block;min-width:0}
#lobby .agent-select>small{font-size:9px}
#lobby #agents{margin-top:8px;display:flex;gap:5px;flex-wrap:wrap}
#lobby .agent{flex:0 0 auto;width:clamp(40px,4.6vw,54px);height:clamp(44px,5vw,57px);padding:3px;border-radius:11px!important}
#lobby .agent span{font-size:clamp(15px,2vw,24px);line-height:1.1}
#lobby .agent small{font-size:7px;margin-top:4px;line-height:1}
#lobby .skin-open-btn{margin-top:8px;padding:8px 7px;gap:4px;font-size:clamp(9px,1vw,11px);min-height:34px}
#lobby .skin-open-btn span{font-size:9px}
#lobby .mode-select{min-height:0;overflow:hidden}
#lobby .mode-select>small{font-size:9px}
#lobby .mode-buttons{display:flex;flex-direction:column;gap:6px;margin-top:7px}
#lobby .mode-buttons button{width:100%;min-height:38px;padding:6px 9px;gap:7px;font-size:16px;border-radius:11px}
#lobby .mode-buttons button span{font-size:clamp(10px,1.1vw,12px);white-space:normal;line-height:1.1}
#lobby .mode-buttons button small{display:none}
#lobby #botDifficultyLabel{display:block;font-size:9px;line-height:1.2;margin-top:6px}
#lobby #botDifficulty{font-size:10px;padding:5px 6px;width:100%;margin-top:3px}
#lobby .launch{margin-top:auto;display:flex;gap:5px;text-align:center}
#lobby .launch>span{display:none}
#lobby #play{min-height:54px;align-items:center;justify-content:center;gap:7px;padding:11px 8px;font-size:clamp(14px,1.7vw,20px);white-space:nowrap;box-shadow:0 5px 0 #a85a3e,0 10px 20px #03041c99}
#lobby .launch>small{font-size:7px;letter-spacing:.25px;line-height:1.4}
#lobby footer,#lobby .fine{display:none}
/* Preserve scrolling inside dialogs only, never on the lobby. */
#modal .modal{max-height:min(90dvh,820px);overflow-y:auto;overscroll-behavior:contain}
/* Compact landscape: still one full-screen game menu. */
@media(max-height:570px){
 #lobby header{height:44px;flex-basis:44px;padding-top:2px;padding-bottom:2px}
 #lobby .brand{font-size:20px}
 #lobby .brand small{font-size:6px;margin-top:1px}
 #lobby .wallet>span,#lobby .credits-wallet{padding:4px 8px;font-size:11px}
 #lobby #accountBtn{padding:4px 8px;font-size:10px}
 #lobby #profileBtn{height:28px;width:28px}
 #lobby main{grid-template-columns:clamp(84px,11vw,120px) minmax(0,1fr) clamp(170px,22vw,230px);padding:6px 8px;gap:8px}
 #lobby main>nav{gap:5px;padding:5px}
 #lobby main>nav button{min-height:36px;padding:5px 3px;font-size:9px;border-radius:10px}
 #lobby main>.playdeck{padding:7px;gap:5px}
 #lobby .playdeck>.online-options{padding:5px 7px;gap:2px}
 #lobby .online-options label{font-size:8px}
 #lobby .online-options select{min-height:26px;padding:3px;font-size:10px}
 #lobby .agent-select>small,#lobby .mode-select>small{font-size:8px}
 #lobby #agents{gap:4px;margin-top:4px}
 #lobby .agent{width:clamp(36px,4.2vw,46px);height:41px;padding:2px}
 #lobby .agent span{font-size:17px}
 #lobby .agent small{font-size:6px;margin-top:1px}
 #lobby .skin-open-btn{min-height:25px;margin-top:5px;padding:5px;font-size:9px}
 #lobby .mode-buttons{gap:4px;margin-top:4px}
 #lobby .mode-buttons button{min-height:28px;padding:4px 6px;font-size:13px}
 #lobby .mode-buttons button span{font-size:10px}
 #lobby #botDifficultyLabel{margin-top:4px;font-size:8px}
 #lobby #botDifficulty{margin-top:2px;padding:2px 4px}
 #lobby #play{min-height:39px;font-size:14px;padding:7px}
 #lobby .launch>small{display:none}
 #lobby main>.map-select{padding:4px 8px}
 #lobby .map-select label{font-size:8px;margin:0}
 #lobby .map-select select{padding:5px;font-size:10px}
 #lobby #mapPreview{width:42px;height:42px}
 #lobby .hero-label{padding:4px 13px 5px;bottom:4px}
 #lobby .hero-label strong{font-size:24px}
 #lobby .hero-label small{display:none}
}
/* Narrow portrait phones: side menus remain within screen, no scrolling. */
@media(max-width:600px) and (orientation:portrait){
 #lobby header{height:59px;flex-basis:59px;padding:5px 8px}
 #lobby .brand{font-size:19px}
 #lobby .brand small{font-size:6px}
 #lobby .wallet{gap:3px}
 #lobby .wallet>span,#lobby .credits-wallet{padding:5px;font-size:9px}
 #lobby #accountBtn{padding:5px;font-size:9px;max-width:62px}
 #lobby #profileBtn{width:27px;height:27px;font-size:10px}
 #lobby main{grid-template-columns:70px minmax(0,1fr) 110px;grid-template-rows:minmax(0,1fr) auto;gap:5px;padding:6px 5px}
 #lobby main>nav{gap:7px;padding:6px 3px;border-radius:12px}
 #lobby main>nav button{font-size:8px;min-height:49px;padding:4px 1px;border-radius:10px;letter-spacing:0}
 #lobby main>.hero{border-radius:14px;border-width:2px}
 #lobby .hero-label{min-width:0;padding:5px 7px;bottom:7px}
 #lobby .hero-label strong{font-size:22px}
 #lobby .hero-label small{font-size:7px}
 #lobby .hero-label>span{font-size:6px}
 #lobby .hero-star{display:none}
 #lobby main>.playdeck{padding:5px;gap:8px;border-radius:12px}
 #lobby .playdeck>.online-options{padding:5px;border-radius:8px}
 #lobby .online-options label{font-size:8px}
 #lobby .online-options select{font-size:9px;padding:3px;min-height:30px}
 #lobby .agent-select>small,#lobby .mode-select>small{font-size:7px;letter-spacing:0}
 #lobby #agents{gap:4px;margin-top:5px}
 #lobby .agent{width:43px;height:46px}
 #lobby .agent span{font-size:19px}
 #lobby .agent small{font-size:6px}
 #lobby .skin-open-btn{font-size:8px;min-height:32px;padding:4px;display:block;white-space:normal}
 #lobby .skin-open-btn span{display:block;font-size:7px}
 #lobby .mode-buttons{gap:5px}
 #lobby .mode-buttons button{font-size:12px;min-height:38px;padding:4px;gap:4px}
 #lobby .mode-buttons button span{font-size:9px}
 #lobby #botDifficultyLabel{font-size:7px}
 #lobby #botDifficulty{font-size:9px}
 #lobby #play{font-size:12px;min-height:50px;padding:5px;white-space:normal}
 #lobby #play b{display:none}
 #lobby main>.map-select{padding:6px;gap:4px;border-radius:10px}
 #lobby .map-select label{font-size:8px}
 #lobby .map-select select{font-size:10px;padding:6px}
 #lobby #mapPreview{width:36px;height:36px}
}
@media(max-width:360px) and (orientation:portrait){#lobby main{grid-template-columns:61px minmax(0,1fr) 102px}#lobby main>nav button{font-size:7px}#lobby .agent{width:38px;height:43px}}

/* V16.1: Startknopf bleibt auch mit 1v1-Bot-Schwierigkeit vollständig sichtbar.
   Nur die Modusauswahl darf bei extrem geringer Höhe intern scrollen. */
#lobby main>.playdeck{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto auto minmax(0,1fr) auto;
  align-content:stretch;
  overflow:hidden;
}
#lobby .playdeck>.online-options,
#lobby .playdeck>.agent-select,
#lobby .playdeck>.mode-select,
#lobby .playdeck>.launch{min-width:0;min-height:0;margin:0}
#lobby .playdeck>.mode-select{
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:#9582eb transparent;
  padding:1px 2px 3px 0;
}
#lobby .playdeck>.launch{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  flex-shrink:0;
  background:linear-gradient(180deg,#28216b,#201951);
  padding:6px 0 1px;
  border-top:1px solid #9a8ff166;
}
#lobby .playdeck #play{
  flex-shrink:0;
  display:flex;
  width:100%;
  min-height:50px;
  justify-content:center;
  align-items:center;
  font-weight:900;
  color:#251447;
  background:linear-gradient(180deg,#fff9a0 0%,#ffd54d 58%,#ffac38 100%);
  border:2px solid #fff4b1;
  border-radius:13px;
  box-shadow:0 4px 0 #a5533e;
  white-space:normal;
  text-align:center;
  line-height:1.05;
}
#lobby .playdeck #play b{display:inline}
#lobby #botDifficultyLabel{flex-shrink:0;margin-top:5px}
#lobby #botDifficulty{box-sizing:border-box;min-height:29px}
@media(max-height:740px){
  #lobby main>.playdeck{gap:5px;padding:7px}
  #lobby #agents{gap:3px;margin-top:4px}
  #lobby .agent{height:clamp(36px,5.4vh,44px);width:clamp(34px,3.7vw,46px)}
  #lobby .agent span{font-size:17px;line-height:1}
  #lobby .agent small{font-size:6px;margin-top:1px}
  #lobby .skin-open-btn{margin-top:5px;min-height:29px;padding:5px}
  #lobby .mode-buttons{gap:4px;margin-top:5px}
  #lobby .mode-buttons button{min-height:30px;padding:5px 8px}
  #lobby .playdeck #play{min-height:47px;font-size:clamp(13px,1.6vw,18px)}
  #lobby .playdeck>.online-options{padding:6px 8px}
}
@media(max-height:520px){
  #lobby main>.playdeck{gap:3px;padding:5px}
  #lobby .playdeck>.online-options{padding:3px 5px}
  #lobby #agents{gap:2px}
  #lobby .agent{width:clamp(30px,3vw,38px);height:34px}
  #lobby .agent span{font-size:14px}
  #lobby .agent small{font-size:5px}
  #lobby .skin-open-btn{min-height:25px}
  #lobby .playdeck #play{min-height:38px;font-size:13px;padding:6px}
  #lobby .launch>small{display:none}
}

/* V18.2: Der Kontakt war nur im ausgeblendeten Footer vorhanden.
   Jetzt ist er im Vollbild-Menü links immer erreichbar. */
#lobby main>nav a.contact-nav{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 min-height:42px;flex:0 1 auto;padding:8px 5px;gap:4px;
 font-weight:900;letter-spacing:.25px;font-size:clamp(9px,.9vw,12px);
 white-space:normal;text-align:center;line-height:1.25;
 border:2px solid #8fe9fa;border-radius:14px;
 background:linear-gradient(180deg,#3984c4,#284783);
 box-shadow:0 4px 0 #0b0c33,inset 0 1px 0 #ffffff3a;
 color:#fff;text-decoration:none;overflow-wrap:anywhere;
}
#lobby main>nav a.contact-nav:hover{filter:brightness(1.18);transform:translateY(-1px)}
#lobby main>nav a.contact-nav:active{transform:translateY(2px)}
/* Auch im kleinen Querformat bleiben alle Menüpunkte erreichbar. */
#lobby main>nav{justify-content:safe center;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9582eb transparent}
@media(max-height:570px){
 #lobby main>nav a.contact-nav{min-height:36px;padding:5px 3px;font-size:9px;border-radius:10px}
}

/* V20: settings stays in the left navigation, including landscape phones. */
#lobby main>nav #settingsNav{background:linear-gradient(180deg,#4d9ba7,#30527d);border-color:#a8f1ec}
@media(max-height:570px){#lobby main>nav #settingsNav{min-height:36px;padding:5px 3px;font-size:9px;border-radius:10px}}
#modal .rr-settings-form{display:grid;grid-template-columns:1fr;gap:8px;max-width:520px}
#modal .rr-settings-form label{font-weight:800;font-size:13px;margin-top:6px}
#modal .rr-settings-form select{width:100%;min-height:42px;border-radius:12px;padding:8px 12px;font-size:15px;color:#fff;background:#252158;border:1px solid #998bea}
#modal .rr-settings-note{font-size:12px;line-height:1.45;color:#c8c6e8;margin:6px 0}
#modal .rr-settings-form .primary{min-height:48px;margin-top:6px}
body.rr-reduced-motion #lobby *,body.rr-reduced-motion #modal *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
body.rr-high-contrast #lobby main>nav button,body.rr-high-contrast #lobby main>nav a.contact-nav{border-color:#fff;box-shadow:0 0 0 1px #fff,0 3px 0 #080d30}
body.rr-high-contrast #lobby main>.playdeck,body.rr-high-contrast #lobby main>.hero{border-color:#fff}

/* V21: audio preferences in the settings dialog */
#modal .rr-audio-settings{display:grid;gap:9px;margin:8px 0 3px;padding:12px;border-radius:13px;background:#191a44;border:1px solid #7374b5}
#modal .rr-audio-settings h3{font-size:15px;margin:0;color:#f8d976}
#modal .rr-audio-settings .rr-sound-check{display:flex;align-items:center;gap:12px;min-height:33px;margin:0;cursor:pointer}
#modal .rr-audio-settings input[type=checkbox]{width:21px;height:21px;accent-color:#f9d65e;flex:none}
#modal .rr-audio-settings input[type=range]{width:100%;min-height:25px;accent-color:#f9d65e;cursor:pointer}
#modal .rr-audio-settings output{color:#f9d65e;font-variant-numeric:tabular-nums}

/* V21.14: Vom Nutzer gewuenschter Original-Agent auf dem Homebildschirm. */
#lobby #rrHomeCharacter{
 position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
 object-position:center center;z-index:3;pointer-events:none;user-select:none;
 filter:drop-shadow(0 12px 22px #080c3199);
}
#lobby .hero-art.rr-agent-changed #rrHomeCharacter{display:none}
#lobby .hero-art.rr-agent-changed #portrait{opacity:1}
#lobby .hero-art:not(.rr-agent-changed) #portrait{opacity:0}