/* Overlays & Panels: Start/Name/Laden/Lobby/Setup/Menue/Endauswertung,
   Modus-Auswahl-Karten, Farb-Picker, Lobby-Namenszeile, Konfetti. */

/* Die Spielerliste ist das Einzige im Panel, das mit der Raumgröße wächst (bis zu 10
   Zeilen; beim Host sind sie höher, weil dort je Zeile ein Farb- UND ein Entfernen-Knopf
   sitzt). Sie scrollt deshalb selbst – so bleiben Raumcode, Modus-Auswahl und vor allem
   „Verlassen"/„Los geht's!" ohne Scrollen sichtbar. */
#lobPlayers{margin:4px 0 8px; display:flex; flex-direction:column; max-height:38vh; overflow-y:auto}
#startMsg,#nameMsg{font-size:13px; color:var(--p1); min-height:18px; margin:6px 0 0}
#lobMsg{font-size:13px; color:var(--muted); min-height:18px; margin:2px 0 8px}

.mode-hint{font-size:12px; color:var(--muted); margin:8px 2px 0; text-align:center; line-height:1.4}

/* Modus-Auswahl als zwei Karten – gleiche Bildsprache wie die Modus-Karte beim
   Rundenstart: Kachel-Trio für Takeover, Herzen fürs Deathmatch. */
.modepick{margin:14px 0 16px}
.mp-label{
  font-family:var(--display); font-weight:900; font-size:10px; letter-spacing:3px;
  text-transform:uppercase; color:var(--muted); margin:0 0 8px 2px;
}
.mp-cards{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mp-card{
  --mc:var(--line);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:12px 8px 11px; border-radius:16px; cursor:pointer;
  font-family:inherit; color:var(--ink); text-align:center;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.16));
  border:3px solid var(--mc);
  box-shadow:0 4px 0 rgba(0,0,0,.32);
  transition:transform .14s, border-color .14s, box-shadow .14s, background .14s, opacity .14s;
}
/* background hier mitschreiben, sonst überschreibt die globale button:hover-Regel den Verlauf. */
.mp-card:hover:not(.on){
  transform:translateY(-2px); border-color:rgba(255,255,255,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.14));
}
.mp-card:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.32)}
.mp-card.on{
  --mc:var(--p0);
  background:linear-gradient(180deg, rgba(77,163,255,.20), rgba(0,0,0,.16));
  box-shadow:0 5px 0 rgba(0,0,0,.38), inset 0 2px 0 rgba(255,255,255,.16);
  transform:translateY(-2px);
}
.mp-card.mp-deathmatch.on{
  --mc:var(--p1);
  background:linear-gradient(180deg, rgba(255,93,93,.20), rgba(0,0,0,.16));
}
.mp-icos{display:flex; gap:6px; align-items:center; justify-content:center; height:26px}
.mp-tile{
  width:18px; height:18px; border-radius:6px; background:var(--c); border:2px solid #fff;
  box-shadow:0 2px 0 rgba(0,0,0,.32);
}
.mp-heart{
  font-size:21px; line-height:1; color:#ff3b5c;
  -webkit-text-stroke:2px #fff; paint-order:stroke fill;
  text-shadow:0 2px 0 rgba(0,0,0,.3);
}
.mp-card:not(.on) .mp-icos{filter:grayscale(.7); opacity:.5}
.mp-name{font-family:var(--display); font-weight:900; font-size:15px; letter-spacing:.6px}
.mp-card.on .mp-name{color:var(--mc); text-shadow:0 2px 0 rgba(0,0,0,.45)}
.mp-tag{font-size:10.5px; font-weight:600; color:var(--muted); line-height:1.3}
/* Gäste sehen die Wahl des Hosts, können sie aber nicht anfassen. Bewusst kein
   disabled-Attribut: button:disabled würde auch die gewählte Karte ausgrauen. */
.mp-cards.locked .mp-card{pointer-events:none; cursor:default}
.mp-cards.locked .mp-card:not(.on){opacity:.4; box-shadow:none}
@media (prefers-reduced-motion:reduce){
  .mp-card{transition:none}
  .mp-card:hover:not(.on), .mp-card.on{transform:none}
}

.overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(6,10,17,.72); backdrop-filter:blur(5px); padding:16px;
}
.overlay[hidden]{display:none}

#ovlStart{ background:rgba(6,10,17,.40); backdrop-filter:blur(2px); }

.panel.welcome{
  text-align:center; position:relative; overflow:hidden;
  background:linear-gradient(180deg, #202d42 0%, #18212f 100%);
  border-color:#3a4c6e;
  box-shadow:0 22px 70px rgba(0,0,0,.6), 0 0 60px rgba(77,163,255,.14);
}
.panel.welcome::before{
  content:''; position:absolute; left:0; right:0; top:0; height:130px; pointer-events:none;
  background:radial-gradient(150px 70px at 50% 0, rgba(77,163,255,.22), transparent 72%);
}
.panel.welcome > *{position:relative}
.welcome-marbles{display:flex; justify-content:center; gap:12px; margin:2px 0 14px}
.welcome-marbles span{
  width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 33% 30%, #fff 0%, var(--c) 55%, rgba(0,0,0,.4) 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.45);
  animation:wbob 1.6s ease-in-out infinite;
}
.welcome-marbles span:nth-child(2){animation-delay:.12s}
.welcome-marbles span:nth-child(3){animation-delay:.24s}
.welcome-marbles span:nth-child(4){animation-delay:.36s}
.welcome-marbles span:nth-child(5){animation-delay:.48s}
@keyframes wbob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}

.load-panel{text-align:center; position:relative}
.load-close{
  position:absolute; top:14px; right:14px;
  background:none; border:none; font-size:18px; line-height:1;
  padding:6px; box-shadow:none; width:auto; color:var(--muted); border-radius:8px;
}
.load-close:hover{ color:var(--ink); background:var(--panel2) }
.load-panel h2{margin:0 0 6px}
.load-panel .sub{color:#b8c4d6; margin:0}
.load-marbles{display:flex; justify-content:center; gap:12px; margin:4px 0 18px}
.load-marbles span{
  width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 33% 30%, #fff 0%, var(--c) 55%, rgba(0,0,0,.4) 100%);
  box-shadow:0 3px 8px rgba(0,0,0,.45);
  animation:loadBounce 1.1s ease-in-out infinite;
}
.load-marbles span:nth-child(2){animation-delay:.14s}
.load-marbles span:nth-child(3){animation-delay:.28s}
.load-marbles span:nth-child(4){animation-delay:.42s}
@keyframes loadBounce{0%,80%,100%{transform:translateY(0); opacity:.55} 40%{transform:translateY(-12px); opacity:1}}
@media (prefers-reduced-motion:reduce){ .load-marbles span{animation-duration:2.2s} }
.welcome-title{
  font-family:var(--display); font-weight:900; letter-spacing:1.5px;
  font-size:28px; margin:0 0 8px; line-height:1;
  text-shadow:0 3px 0 rgba(0,0,0,.4), 0 0 26px rgba(77,163,255,.28);
}
.welcome-title span{color:var(--p2)}
.panel.welcome .sub{margin:0 auto 18px; max-width:360px; line-height:1.5; color:#b8c4d6}
.panel.welcome .sub b{color:var(--ink)}
.panel.welcome .joinrow .tinput{text-align:center}
/* Ein Panel darf nie höher werden als der Bildschirm. .overlay zentriert per Flexbox –
   ragt der Inhalt heraus, steht er oben UND unten außerhalb und ist ohne Scrollbalken
   nicht erreichbar. Genau so verschwanden bei vollem Raum die Knöpfe unten.
   Die zweite Deklaration gewinnt, wo dvh unterstützt wird (rechnet die ein- und
   ausfahrenden Browserleisten auf Mobilgeräten mit); ältere Browser ignorieren sie. */
.panel{
  width:100%; max-width:430px; background:var(--panel); border:1px solid var(--line);
  border-radius:18px; padding:22px 22px 20px; box-shadow:0 18px 60px rgba(0,0,0,.55);
  max-height:calc(100vh - 32px);    /* 32px = 2 × Innenabstand von .overlay */
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
}
.panel h2{font-family:var(--display); font-weight:900; font-size:21px; margin:0 0 4px; letter-spacing:1px}
.panel p.sub{margin:0 0 16px; font-size:13px; color:var(--muted)}
.slot{
  display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:8px;
  background:var(--panel2); border:1px solid var(--line); border-radius:12px;
}
.slot .mdot{width:18px; height:18px}
.slot label{font-size:14px; font-weight:600; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.slot label em{font-style:normal; font-size:9px; color:var(--muted); border:1px solid var(--line); border-radius:4px; padding:0 3px; margin-left:4px; vertical-align:1px}
select{
  font-family:inherit; font-size:13px; font-weight:600; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:6px 8px;
}
.row{display:flex; align-items:center; gap:10px; margin:14px 0 16px}
.row label{font-size:14px; font-weight:600; flex:1}
#cfgMsg{font-size:13px; color:var(--p1); min-height:18px; margin:0 0 8px}
.pactions{display:flex; gap:10px; justify-content:flex-end}
#ranking{margin:14px 0 18px; display:flex; flex-direction:column; gap:8px}
.rrow{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  background:var(--panel2); border:1px solid var(--line); border-radius:12px;
  font-weight:600; font-size:15px;
}
.rrow .cpts{margin-left:auto; font-size:18px}
/* Deathmatch-Endstand: dieselben schönen Herzen wie im Scoreboard (statt ❤-Emoji) */
.rrow .cpts.hpts{display:inline-flex; gap:3px; align-items:center; justify-content:flex-end; min-width:0}
.rrow .cpts.hpts .heart{font-size:20px}
.rrow.win{border-color:var(--p2)}
#endTitle{text-align:center}
#endNote{font-size:13px; color:var(--muted); text-align:center; margin:0 0 12px; min-height:16px}

.overlay .panel{position:relative; z-index:1}
#ovlEnd:not([hidden]) .panel{animation:panelPop .5s cubic-bezier(.3,1.5,.5,1)}
@keyframes panelPop{from{transform:scale(.7); opacity:0} to{transform:scale(1); opacity:1}}

/* Siegerbildschirm im Duktus des Titelscreens: leicht durchscheinendes Panel über
   milchigem Grund, dazu ein farbiger Bloom in der Siegerfarbe – dieselben niedrigen
   Alphawerte wie .panel.welcome. --wc/--wcr setzt gameOver(). */
#ovlEnd{background:rgba(6,10,17,.52); backdrop-filter:blur(4px)}
.panel.endpanel{
  --wc:var(--p2); --wcr:255,201,60;
  position:relative; overflow:hidden;
  border-color:var(--wc);
  background:linear-gradient(180deg, rgba(32,45,66,.88) 0%, rgba(22,30,44,.93) 100%);
  backdrop-filter:blur(7px);
  box-shadow:0 22px 70px rgba(0,0,0,.6), 0 0 60px rgba(var(--wcr),.16);
}
/* Auftritt wie bei der Modus-Karte: Panel federt auf, Kopfzeilen steigen gestaffelt
   nach, Icons fallen einzeln ein, ein Glanzstreifen läuft einmal durch. Es sind
   dieselben Keyframes (mc-pop/mc-rise/mc-ico/mc-shine), nur mit ruhigerem Look. */
#ovlEnd:not([hidden]) .panel.endpanel{animation:mc-pop .6s cubic-bezier(.18,1.6,.5,1) both}
.end-hero{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin:-22px -22px 16px; padding:18px 18px 15px;
  background:rgba(255,255,255,.045);
  border-bottom:1px solid var(--line);
}
/* Farbiger Lichtkegel von oben – wie .panel.welcome::before, nur in der Siegerfarbe. */
.end-hero::before{
  content:''; position:absolute; left:0; right:0; top:0; height:120px; pointer-events:none;
  background:radial-gradient(150px 70px at 50% 0, rgba(var(--wcr),.26), transparent 72%);
}
.end-hero > *{position:relative}
#ovlEnd:not([hidden]) .end-hero::after{
  content:''; position:absolute; top:-40%; bottom:-40%; width:70px; left:-40%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform:skewX(-18deg); animation:mc-shine 1s .42s ease-out both;
}
/* Pokal als eigener Chip über dem Titel – so bleibt die Namenszeile exakt mittig. */
.end-badge{
  width:54px; height:54px; margin-bottom:2px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:26px; line-height:1;
  background:rgba(16,23,34,.72); border:2px solid var(--wc);
  box-shadow:0 4px 14px rgba(0,0,0,.45), 0 0 20px rgba(var(--wcr),.30);
  animation:mc-ico .5s .1s cubic-bezier(.2,1.7,.4,1) both;
}
.end-kicker{
  font-family:var(--display); font-weight:900; font-size:10px; letter-spacing:3px;
  text-transform:uppercase; color:var(--muted);
  animation:mc-rise .5s .2s ease both;
}
#ovlEnd:not([hidden]) #endTitle{
  font-family:var(--display); font-weight:900; letter-spacing:1px; line-height:1.1;
  font-size:clamp(20px,4.6vw,26px); margin:0; color:var(--wc);
  text-shadow:0 3px 0 rgba(0,0,0,.4), 0 0 26px rgba(var(--wcr),.38);
  animation:mc-rise .55s .26s cubic-bezier(.2,1.5,.4,1) both;
}
.end-icons{display:flex; gap:8px; align-items:center; margin:2px 0 0}
.end-icons[hidden]{display:none}
.end-ico{animation:mc-ico .45s .32s cubic-bezier(.2,1.7,.4,1) both}
.end-icons .end-ico:nth-child(2){animation-delay:.41s}
.end-icons .end-ico:nth-child(3){animation-delay:.5s}
/* Herzen sind die des Scoreboards (.heart), nur größer – Kacheln greifen den
   Radius der Slots auf. */
.end-icons .heart{font-size:24px}
.end-tile{
  width:20px; height:20px; border-radius:6px; background:var(--wc);
  box-shadow:0 2px 3px rgba(0,0,0,.45);
}
.end-sub{
  font-size:13px; color:var(--muted); text-align:center;
  animation:mc-rise .5s .56s ease both;
}
/* Zeilen ebenfalls leicht durchscheinend, die Siegerzeile mit farbigem Anflug. */
.panel.endpanel .rrow{background:rgba(34,48,69,.72)}
.panel.endpanel .rrow.win{
  border-color:var(--wc); background:rgba(var(--wcr),.12);
  box-shadow:0 0 22px rgba(var(--wcr),.18);
}
/* Wie bei der Modus-Karte: statisch, aber sichtbar – nicht im Endzustand von „both" hängen. */
@media (prefers-reduced-motion:reduce){
  #ovlEnd:not([hidden]) .end-hero::after{display:none}
  .end-badge, .end-kicker, .end-ico, .end-sub,
  #ovlEnd:not([hidden]) #endTitle,
  #ovlEnd:not([hidden]) .panel.endpanel{animation:none !important}
}

#ovlEnd:not([hidden]) .rrow{animation:rowIn .45s ease backwards}
@keyframes rowIn{from{opacity:0; transform:translateX(-26px)} to{opacity:1; transform:none}}
/* Setzen erst ein, wenn der Kopf steht – die Liste läuft dann als Kaskade nach. */
#ranking .rrow:nth-child(1){animation-delay:.50s}
#ranking .rrow:nth-child(2){animation-delay:.59s}
#ranking .rrow:nth-child(3){animation-delay:.68s}
#ranking .rrow:nth-child(4){animation-delay:.77s}
#ranking .rrow:nth-child(5){animation-delay:.86s}

#confetti{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
#confetti i{
  position:absolute; top:-24px; display:block; background:var(--col); border-radius:2px;
  animation:confettiFall var(--dur) linear var(--delay) forwards;
}
@keyframes confettiFall{
  0%{opacity:1; transform:translate(0,-24px) rotate(var(--rot))}
  100%{opacity:.85; transform:translate(var(--drift), 104vh) rotate(calc(var(--rot) + 900deg))}
}
@media (prefers-reduced-motion:reduce){
  #confetti{display:none}
}

.menu-panel { position: relative; max-width: 400px; }
#btnCloseMenu {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; font-size: 18px; line-height: 1;
  padding: 6px; box-shadow: none; width: auto; color: var(--muted);
  border-radius: 8px;
}
#btnCloseMenu:hover { color: var(--ink); background: var(--panel2); }
#ovlMenu h2 { text-align: center; margin: 0 0 18px; }

.menu-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 10px;
}
.menu-row[hidden] { display: none; }
.menu-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
#soundIcon { width: 20px; text-align: center; font-size: 16px; }
input[type=range] {
  flex: 1; min-width: 0; cursor: pointer; accent-color: var(--p0); height: 4px;
}
.copy-btn.icon-only svg {
  width: 1.25em;
  height: 1.25em;
}
.copy-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease-in-out;
}
.menu-link-input {
  font-size: 12px;
  padding: 8px 10px;
  margin-right: 8px;
  flex: 1;
  min-width: 0;
}
.menu-room-label {
  margin-top: -12px;
  margin-bottom: 8px;
}

.menu-actions { margin-top: 16px; display: flex; flex-direction: column; }
.menu-actions .bigbtn { margin-bottom: 10px; }
.menu-actions .bigbtn:last-child { margin-bottom: 0; }
#btnRestartGame[hidden] { display: none; }
.menu-leave {
  background: rgba(255, 93, 93, 0.1);
  color: var(--p1);
  border: 1px solid rgba(255, 93, 93, 0.28);
}
.menu-leave:hover { background: rgba(255, 93, 93, 0.2); }

.menu-room-box {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 14px;
  margin-bottom: 14px;
}

.menu-room-header {
  font-family: var(--display);
  font-weight: 900;
  font-size: 20px;
  text-align: center;
  margin: 0 0 12px;
  letter-spacing: 0.5px;
}

.menu-room-box .linkrow {
  margin: 0;
}

.colorpick{
  display:inline-flex; align-items:center; gap:4px; flex:none;
  background:rgba(255,255,255,.04); border:1px solid transparent; box-shadow:none;
  padding:4px 6px 4px 4px; margin-left:-4px; cursor:pointer;
  border-radius:8px; transition:background .15s, border-color .15s, transform .1s;
}
.colorpick:hover{ background:rgba(255,255,255,.08); border-color:var(--line); transform:translateY(-1px); }
.colorpick:active{ transform:none; }
.colorpick:focus-visible{ outline:2px solid var(--p0); outline-offset:2px; }

.colorpick .mdot{ width:18px; height:18px; position:relative; }
.cm-caret{ font-size:11px; line-height:1; color:var(--ink); opacity:.7; transition:opacity .15s, transform .15s; }
.colorpick:hover .cm-caret{ opacity:1; transform:translateY(1px); }
.mdot.is-spec{ position:relative; background:#8a93a3; }
.mdot.is-spec::after{
  content:'👀'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center; font-size:11px;
}

.lob-id{ flex:1; display:flex; align-items:center; gap:6px; min-width:0; }
.lob-id label{
  font-size:14px; font-weight:600; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lob-id em, .lob-tags em{
  font-style:normal; font-size:9px; color:var(--muted);
  border:1px solid var(--line); border-radius:4px; padding:0 3px; margin-left:3px; vertical-align:1px;
}
.lob-tags{ flex:none; white-space:nowrap; }

.lob-name-view{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; min-width:0;
  font-size:14px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:rgba(255,255,255,.04); border:1px solid transparent;
  border-radius:8px; padding:4px 8px; margin-left:-8px;
  transition:background .15s, border-color .15s, transform .1s;
}
.lob-name-view:hover{ background:rgba(255,255,255,.08); border-color:var(--line); transform:translateY(-1px); }
.lob-name-view:focus-visible{ outline:2px solid var(--p0); outline-offset:1px; }
.lob-name-view .edit-ico{ font-size:11px; color:var(--muted); flex:none; opacity:.7; }
.lob-name-view:hover .edit-ico{ color:var(--ink); opacity:1; }
.lob-name-inp{
  font-family:inherit; font-size:14px; font-weight:600; color:var(--ink);
  background:rgba(255,255,255,.05); border:1px solid var(--p0); border-radius:7px;
  padding:4px 8px; margin-left:-8px; min-width:0; max-width:150px; outline:none;
}
.lob-name-inp:focus{ background:var(--panel2); }

.color-menu{
  position:fixed; z-index:400; min-width:158px; padding:6px;
  background:var(--panel2); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.6); display:flex; flex-direction:column; gap:2px;
}
.color-menu[hidden]{ display:none; }
.cm-item{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  background:none; border:none; box-shadow:none; border-radius:8px; padding:7px 9px;
  font-size:13px; font-weight:600; color:var(--ink); cursor:pointer;
}
.cm-item:hover{ background:var(--panel); }
.cm-item.on{ background:var(--line); }
.cm-dot{
  width:16px; height:16px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 32% 28%, #fff 0%, var(--pc) 40%, #000 170%);
  box-shadow:0 1px 2px rgba(0,0,0,.5);
}
.cm-eye{ width:16px; text-align:center; font-size:13px; flex:none; }
.cm-spec{ color:var(--muted); }

.kick-btn{
  flex:none; margin-left:auto; width:26px; height:26px; padding:0; border-radius:8px;
  font-size:13px; line-height:1; color:var(--p1);
  background:rgba(255,93,93,.10); border:1px solid rgba(255,93,93,.28);
}
.kick-btn:hover{ background:rgba(255,93,93,.22); }