/* Online-Blatt und Lobby (ui/online.js, Vorlage art/mockups/m2_lobby.png): Pavillon-Bühne oben, Creme-Karte mit Holzrahmen darunter.
   Eigene Datei neben style.css (Bausteine .wood, .sheet, .sh-*, .switch, .iconbtn kommen von dort). */
.ol-root { position: absolute; inset: 0; z-index: 24; }
.ol-sheet { z-index: 1; }
.ol-shcard { gap: 8px; }
.ol-shico { background: url('../img/ui/lobby_bg.jpg') center 30% / cover; position: relative; }
.ol-shico::after { content: ''; position: absolute; inset: 14px; background: url('../img/ui/share.png') center / contain no-repeat; filter: drop-shadow(0 2px 3px #0008); }
.ol-shcard .wood { width: 100%; }
.wood.ol-green { background: linear-gradient(#9be15a, #5fb52c 55%, #4a9a1e); border-color: #2f6e12; color: #fff;
  box-shadow: inset 0 2px 0 #ffffff77, inset 0 -3px 0 #0000002b, 0 4px 0 #2f6e12, 0 8px 14px #0005;
  text-shadow: 0 2px 0 #2f6e12, 0 -1px 0 #2f6e12, 2px 0 0 #2f6e12, -2px 0 0 #2f6e12; }
.wood.ol-green:active:not(:disabled) { box-shadow: inset 0 2px 0 #ffffff77, 0 1px 0 #2f6e12, 0 3px 8px #0005; }
.ol-or { text-align: center; font-size: 14px; font-weight: 600; color: #a0784e; margin-top: 2px; }
.ol-joinrow { display: flex; gap: 8px; }
.ol-joinrow .wood { width: auto; flex: none; }
.ol-codein { flex: 1; min-width: 0; font: 700 28px/1 'Fredoka', system-ui; letter-spacing: 8px; text-align: center; text-transform: uppercase; color: #5e3a19;
  padding: 8px 6px 8px 14px; border-radius: 14px; border: 3px solid #e2caa0; background: #fff7e6; outline: none; user-select: text; -webkit-user-select: text; }
.ol-codein:focus { border-color: #f5a623; box-shadow: 0 0 0 3px #f5a62355; }
.ol-codein::placeholder { color: #d8c3a0; letter-spacing: 6px; }
.ol-hint { min-height: 19px; text-align: center; font-size: 15px; font-weight: 600; line-height: 1.2; color: #8a5a2b; }
.ol-sheet .ol-hint:not(:empty) { color: #c0392b; }

/* ---------- Lobby ---------- */
.ol-lobby { position: absolute; inset: 0; display: flex; flex-direction: column; background: linear-gradient(#2c2238, #1f1828); overflow: hidden; }
.ol-stage { position: relative; flex: 0 0 auto; height: clamp(210px, 37%, 330px); background: #3a2a22 url('../img/ui/lobby_bg.jpg') center 62% / cover no-repeat; }
.ol-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(#0000, #1f182866); pointer-events: none; }
.ol-cv { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.ol-leave { position: absolute; left: 12px; top: calc(env(safe-area-inset-top) + 10px); width: 46px; height: 46px; border-radius: 50%; z-index: 2;
  background: url('../img/ui/exit.png') center / 70% no-repeat, radial-gradient(circle at 50% 35%, #fff8ea, #ead3ae); border: 3px solid #b07a45; box-shadow: 0 3px 0 #6d4520, 0 6px 12px #0005; }
.ol-leave:active { transform: translateY(2px); }
.ol-count { position: absolute; left: 0; right: 0; top: 18%; text-align: center; z-index: 2; pointer-events: none; font: 700 96px/1 'Fredoka', system-ui; color: #fff;
  -webkit-text-stroke: 6px #6d4520; paint-order: stroke fill; text-shadow: 0 6px 0 #4a2c12, 0 12px 20px #0007; }
.ol-count:empty { display: none; }
.ol-count.pop { animation: rtPop .5s cubic-bezier(.2, 1.6, .4, 1); }
.ol-card { position: relative; flex: 1 1 auto; min-height: 0; margin: -18px 10px calc(env(safe-area-inset-bottom) + 10px); padding: 10px 12px 12px; z-index: 1;
  display: flex; flex-direction: column; gap: 6px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none;
  background: linear-gradient(#fffaf0, #f7ead0); border: 9px solid #a86e3a; border-radius: 26px;
  border-image: none; box-shadow: inset 0 0 0 2px #e9d2aa, 0 0 0 2px #5e3a19, 0 10px 24px #0008; }
.ol-card::before { content: ''; position: absolute; inset: -9px; border-radius: 26px; pointer-events: none; border: 9px solid transparent;
  background: url('../img/tex/wood.jpg') 0 0 / 220% auto border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55; }
.ol-title { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.ol-title h2 { margin: 0; font-size: 22px; font-weight: 700; color: #5e3a19; }
.ol-title small { font-size: 13px; font-weight: 600; color: #a0784e; }
.ol-code { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 3px 10px; border-radius: 16px; background: #efdcbc; box-shadow: inset 0 2px 3px #0000001a; }
.ol-code b { font: 700 36px/1.1 'Fredoka', system-ui; letter-spacing: 3px; color: #6d3f18; text-shadow: 0 2px 0 #fff8; user-select: text; -webkit-user-select: text; }
.ol-share { flex: none; width: 40px; height: 40px; border-radius: 12px; background: url('../img/ui/share.png') center / 58% no-repeat, linear-gradient(#c79a66, #9a6a3a);
  border: 2px solid #b07a45; box-shadow: 0 3px 0 #6d4520; }
.ol-share:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a5a2b; }
.ol-list { display: flex; flex-direction: column; gap: 5px; }
.ol-row { position: relative; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px 0 4px; border-radius: 14px; background: #f0dfc2; box-shadow: inset 0 1px 0 #fff8, 0 1px 0 #d5bb90; }
.ol-row.me { background: #f6e6c3; box-shadow: inset 0 0 0 2px #f5a623aa, 0 1px 0 #d5bb90; }
.ol-row.free, .ol-row.bot { background: #f3e7d2; box-shadow: inset 0 0 0 2px #e6d3b1; }
.ol-stk { flex: none; width: 36px; height: 36px; display: block; filter: drop-shadow(0 2px 2px #0003); }
.ol-stk.empty { border-radius: 50%; background: #e3d0ae; box-shadow: inset 0 2px 4px #0002; filter: none; }
.ol-row.bot .ol-stk.empty { background: #d9c29c url('../img/chars/zippa.png') center 18% / 150% no-repeat; filter: brightness(0) opacity(.28); }
.ol-name { flex: 1; min-width: 0; font-size: 17px; font-weight: 700; color: #5e3a19; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ol-name em { font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: #f5a623; border-radius: 8px; padding: 2px 6px; margin-left: 6px; vertical-align: 2px; }
.ol-row.free .ol-name, .ol-row.bot .ol-name { font-size: 15px; font-weight: 600; color: #b0906a; }
.ol-crown { flex: none; width: 26px; height: 26px; background: url('../img/ui/crown.png') center / contain no-repeat; filter: drop-shadow(0 1px 1px #0004); }
.ol-ready { flex: none; width: 20px; height: 20px; border-radius: 50%; background: #5fb52c; box-shadow: 0 0 0 2px #fff; position: relative; }
.ol-ready::after { content: ''; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid #fff; border-width: 0 3px 3px 0; transform: rotate(45deg); }
.ol-wins { flex: none; font-size: 13px; font-weight: 700; color: #a0661a; background: #ffe7a8; border-radius: 9px; padding: 2px 7px; }
.ol-ms { flex: none; font-size: 11px; font-weight: 600; color: #b0906a; min-width: 0; }
.ol-ping { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #b7a88f; box-shadow: 0 0 0 2px #fff9, inset 0 -2px 0 #0002; }
.ol-ping.good { background: #3fbf3a; box-shadow: 0 0 0 2px #fff9, 0 0 6px #3fbf3a99; }
.ol-ping.mid { background: #f5c21b; box-shadow: 0 0 0 2px #fff9, 0 0 6px #f5c21b99; }
.ol-ping.bad { background: #e5383b; box-shadow: 0 0 0 2px #fff9, 0 0 6px #e5383b99; }
.ol-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 6px; border-radius: 16px; background: #d9bb8c; box-shadow: inset 0 2px 4px #0000002a; }
.ol-tile { aspect-ratio: 1; border-radius: 11px; background: #f7ead0 center / cover no-repeat; border: 3px solid #f7ead0; box-shadow: 0 3px 0 #a4794a; transition: transform .08s; }
.ol-tile.sel { border-color: #ffc93c; box-shadow: 0 0 0 2px #f5a623, 0 0 12px #ffc93ccc, 0 3px 0 #a4794a; transform: scale(1.06); }
.ol-tile.blocked { filter: grayscale(1) brightness(.85); opacity: .45; }
.ol-tile:disabled:not(.sel) { opacity: .8; }
.ol-tiles.guest .ol-tile:not(.sel) { filter: saturate(.6); opacity: .7; }
.ol-tiles.guest .ol-tile.blocked { filter: grayscale(1) brightness(.85); opacity: .45; }
.ol-opts { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; min-height: 30px; }
.ol-gname { font-size: 16px; font-weight: 700; color: #6d4520; }
.ol-bots { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #8a5a2b; }
.ol-bots.ro .switch { opacity: .6; }
.ol-bots .switch { width: 46px; height: 27px; }
.ol-bots .switch::after { width: 21px; height: 21px; }
.ol-bots .switch.on::after { transform: translateX(19px); }
/* M2c: Verbindungs-Chip (Direkt grün / Server holzfarben) und Direkt-Schalter des Hosts */
.ol-net { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; min-height: 28px; }
.ol-netchip { font-size: 12.5px; font-weight: 700; border-radius: 10px; padding: 3px 9px; white-space: nowrap; }
.ol-netchip.direct { color: #2f6e12; background: #dff3c8; }
.ol-netchip.server { color: #8a5a2b; background: #f1e3cc; }
.ol-direct span { font-size: 13px; }
.ol-card .ol-hint { font-size: 14px; min-height: 17px; }
.ol-foot { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: auto; padding-top: 2px; }
.ol-foot .ol-start { flex: 0 1 230px; font-size: 26px; padding: 11px 20px 12px; border-radius: 30px; }
.ol-foot.solo { justify-content: flex-end; }
.ol-dance { flex: none; width: 58px; height: 58px; border-radius: 50%; background: url('../img/ui/dance.png') center / 60% no-repeat, radial-gradient(circle at 50% 35%, #b39a82, #7d6149);
  border: 3px solid #f3e6d4; box-shadow: 0 4px 0 #8a5a2b, 0 6px 12px #0004; }
.ol-dance.on { box-shadow: 0 0 0 3px #f5a623, 0 4px 0 #8a5a2b; }
.ol-dance:active { transform: translateY(2px); }

/* Tanz-Rad (ui/dance.js, aus Zippa World) im Party-Stil */
.dwheel { position: fixed; inset: 0; z-index: 60; }
.dwi { position: fixed; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, #fffaf0, #efd9b0); border: 3px solid #b07a45; box-shadow: 0 3px 0 #6d4520, 0 8px 16px #0006; color: #5e3a19;
  transform: translate(0, 0) scale(.3); opacity: 0; transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), opacity .15s; cursor: pointer; }
.dwheel.in .dwi { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 1; }
.dwheel.out .dwi { transform: translate(0, 0) scale(.3); opacity: 0; transition-delay: 0s !important; }
.dwi small { font-size: 9px; font-weight: 700; white-space: nowrap; margin-top: -2px; }
.dspr { position: relative; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; }
.dspr i { position: absolute; left: 0; top: 0; height: 100%; width: 3000%; background-size: 100% 100%; background-repeat: no-repeat; animation: dspr 3s steps(30) infinite; }
.dspr .pt { width: 100%; height: 100%; }
@keyframes dspr { to { transform: translateX(-100%); } }
.hp-pop .hp-online { width: 100%; margin: 8px 0 6px; }
.ol-card::-webkit-scrollbar { display: none; }

/* ---------- Marktplatz (M2d): Raum-Knopf im Platz-HUD, Raum-Karte, Online-Stand-Blatt, Countdown ---------- */
.hud-market .hp-room { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 12px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 112px; padding: 6px 12px 7px; border-radius: 16px; background: linear-gradient(#fffaf0, #f0dfbd); border: 3px solid #b07a45; box-shadow: 0 3px 0 #6d4520, 0 6px 12px #0005; }
.hud-market .hp-room:active { transform: translateX(-50%) translateY(2px); box-shadow: 0 1px 0 #6d4520, 0 3px 8px #0005; }
.hp-room-t { font: 700 15px/1 'Fredoka', system-ui; color: #6d3f18; letter-spacing: .4px; white-space: nowrap; }
.hp-room-p { display: flex; gap: 2px; min-height: 28px; align-items: flex-end; }
.hp-room-s { position: relative; width: 28px; height: 28px; }
.hp-room-s img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 1px 1px #0003); }
.hp-room-s.host::after { content: ''; position: absolute; left: 50%; top: -9px; width: 16px; height: 13px; margin-left: -8px; background: url('../img/ui/crown.png') center / contain no-repeat; filter: drop-shadow(0 1px 1px #0005); }
.hud-count { position: absolute; left: 0; right: 0; top: 24%; text-align: center; z-index: 9; pointer-events: none; font: 700 96px/1 'Fredoka', system-ui; color: #fff;
  -webkit-text-stroke: 6px #6d4520; paint-order: stroke fill; text-shadow: 0 6px 0 #4a2c12, 0 12px 20px #0007; }
.hud-count.pop { animation: rtPop .5s cubic-bezier(.2, 1.6, .4, 1); }
.rc-root { position: absolute; inset: 0; z-index: 23; display: flex; flex-direction: column; background: linear-gradient(#0007, #0003 60%, #0000); }
.rc-root.hidden { display: none; }
.rc-card { flex: 0 1 auto; max-height: calc(100% - env(safe-area-inset-top) - 40px); margin: calc(env(safe-area-inset-top) + 10px) 10px 0; padding: 12px 12px 14px; gap: 8px; }
.rc-card.drop { animation: rcDrop .24s ease-out; }
@keyframes rcDrop { from { transform: translateY(-30%); opacity: 0; } }
.rc-card .iconbtn.close { right: 6px; top: 6px; z-index: 2; }
.rc-card .ol-title { padding: 0 40px; }
.rc-card .ol-row.hidden { display: none; }
.rc-leave { align-self: center; min-width: 62%; margin-top: 2px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.rc-leave::before { content: ''; width: 24px; height: 24px; background: url('../img/ui/exit.png') center / contain no-repeat; }
.mo-card { gap: 8px; }
.mo-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mo-sub { font-size: 14px; font-weight: 600; color: #a0784e; }
.mo-seats .ax-seat { min-height: 46px; }
.mo-seats .ax-name.grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mo-seats .ol-crown { width: 24px; height: 24px; }
.mo-bots { padding: 4px 6px; }
.mo-bots.hidden { display: none; }
.mo-note { font-weight: 600; }
.pd-row .wood.solo { flex: 0 1 260px; margin: 0 auto; }