/* LUDO MAX – Oberfläche */

@font-face { font-family: "Fredoka"; font-weight: 400; font-display: swap; src: url("/assets/fonts/fredoka-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 500; font-display: swap; src: url("/assets/fonts/fredoka-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 600; font-display: swap; src: url("/assets/fonts/fredoka-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Fredoka"; font-weight: 700; font-display: swap; src: url("/assets/fonts/fredoka-latin-700-normal.woff2") format("woff2"); }

:root {
  --bg0: #0c0824;
  --bg1: #140d33;
  --bg2: #2b1466;
  --red: #ff4757;
  --green: #2ed573;
  --yellow: #ffc93c;
  --blue: #3d8bfd;
  --red-d: #c42a3a;
  --green-d: #1c9e52;
  --yellow-d: #d39b10;
  --blue-d: #2160c9;
  --panel: rgba(26, 17, 64, 0.78);
  --panel-solid: #1c1247;
  --line: rgba(255, 255, 255, 0.12);
  --text: #ffffff;
  --muted: rgba(255, 255, 255, 0.66);
  --topbar: 58px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --radius: 20px;
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  font-family: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, #3a1f8a 0%, rgba(58, 31, 138, 0) 70%),
    radial-gradient(ellipse 120% 90% at 50% 120%, #1f0f4d 0%, rgba(31, 15, 77, 0) 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}
input, textarea { user-select: text; -webkit-user-select: text; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; -webkit-appearance: none; appearance: none; }
[hidden] { display: none !important; }

#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; outline: none; }
.vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(5, 2, 20, 0.55) 100%); }

/* ------------------------------------------------------------ Laden */
.loader { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--bg0) radial-gradient(circle 650px at 50% 18%, var(--bg2), var(--bg1) 45%, var(--bg0)); z-index: 100; transition: opacity 0.5s; overflow: hidden; }
.loader.out { opacity: 0; pointer-events: none; }
.loader p { margin: 18px 0 0; min-height: 1.3em; color: rgba(255,255,255,.8); font-weight: 600; font-size: 17px; text-align: center; padding: 0 16px; }
@keyframes spin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(0.85); } 100% { transform: rotate(360deg) scale(1); } }

/* ------------------------------------------------------------ Bildschirme */
.screen { position: fixed; inset: 0; overflow-y: auto; z-index: 10; padding: calc(var(--safe-t) + 18px) 16px calc(var(--safe-b) + 18px); }
#screen-home { background: linear-gradient(180deg, rgba(12, 8, 36, 0.05) 0%, rgba(12, 8, 36, 0.35) 38%, rgba(12, 8, 36, 0.9) 70%); }
#screen-lobby { background: rgba(12, 8, 36, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.home-wrap, .lobby-wrap { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
.home-wrap { justify-content: flex-end; }
/* Hochformat (Handy-Browser): oben bleibt wie in der App Platz fürs Brett, das Menü beginnt darunter
   und scrollt. Ohne den Platzhalter rutschte das Logo bei kurzen Safari-Fenstern ganz nach oben unter Shop/Münzen. */
@media (max-aspect-ratio: 5/4) {
  .home-wrap::before { content: ""; flex: 1 0 auto; height: clamp(120px, 30vh, 300px); height: clamp(120px, 30svh, 300px); }
}

.logo { margin: 8px 0 0; text-align: center; font-size: clamp(64px, 20vw, 96px); line-height: 0.9; font-weight: 700; letter-spacing: 2px; position: relative; }
.logo span { display: inline-block; -webkit-text-stroke: 4px #1b1036; paint-order: stroke fill; text-shadow: 0 7px 0 #1b1036, 0 14px 24px rgba(0,0,0,.45); animation: hop 2.6s ease-in-out infinite; }
.logo .l1 { color: var(--red); animation-delay: 0s; }
.logo .l2 { color: var(--green); animation-delay: .15s; }
.logo .l3 { color: var(--yellow); animation-delay: .3s; }
.logo .l4 { color: var(--blue); animation-delay: .45s; }
.logo .logo-max { display: block; font-size: 0.42em; letter-spacing: 0.35em; margin: 6px 0 0 0.35em; color: #fff; animation: none; text-shadow: 0 4px 0 #1b1036; -webkit-text-stroke: 3px #1b1036; }
@keyframes hop { 0%, 70%, 100% { transform: translateY(0) rotate(0); } 78% { transform: translateY(-14px) rotate(-6deg); } 86% { transform: translateY(0) rotate(3deg) scaleY(0.92); } }
.tagline { text-align: center; margin: -4px 0 8px; color: var(--muted); font-weight: 500; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.profile { display: flex; gap: 12px; align-items: center; padding: 10px 14px; }
.avatar-btn { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; line-height: 1; font-size: 32px; background: linear-gradient(135deg, #ffffff22, #ffffff08); border: 2px solid var(--line); flex: none; transition: transform .15s; }
.avatar-btn:active { transform: scale(.92); }
.name-field { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.name-field span { font-size: 12px; color: var(--muted); font-weight: 500; }
.name-field input, .code-input, .chat-form input {
  font: 600 18px "Fredoka", sans-serif; color: #fff; background: rgba(255,255,255,.07); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 9px 12px; outline: none; width: 100%; transition: border-color .15s, background .15s;
}
.name-field input:focus, .code-input:focus, .chat-form input:focus { border-color: #a58cff; background: rgba(255,255,255,.11); }
.avatar-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; padding: 10px; }
.avatar-grid button { font-size: 26px; padding: 4px 0; border-radius: 10px; transition: transform .1s, background .1s; }
.avatar-grid button:hover, .avatar-grid button.sel { background: rgba(255,255,255,.14); transform: scale(1.12); }

.menu { display: flex; flex-direction: column; gap: 12px; }
.join-row { display: flex; gap: 10px; }
.code-input { text-transform: uppercase; letter-spacing: 6px; text-align: center; font-size: 22px; }
.code-input::placeholder { color: rgba(255,255,255,.3); letter-spacing: 6px; }
.home-foot { display: flex; justify-content: center; gap: 22px; padding: 4px 0 2px; }
.link { color: var(--muted); font-weight: 500; padding: 6px; }
.link:hover { color: #fff; }
.pill { border-radius: 999px; padding: 10px 16px; font-weight: 600; }
.resume { background: linear-gradient(90deg, #7c4dff, #b04dff); box-shadow: 0 4px 0 #4f22b8; }

/* ------------------------------------------------------------ Buttons */
.btn { --c: #6c5ce7; --cd: #4834c4; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 16px; color: #fff; background: var(--c); border-radius: 16px; padding: 12px 18px; box-shadow: 0 4px 0 var(--cd), 0 10px 20px rgba(0,0,0,.25); transition: transform .08s, box-shadow .08s, filter .15s; text-shadow: 0 1px 0 rgba(0,0,0,.18); }
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--cd), 0 4px 10px rgba(0,0,0,.25); }
.btn:disabled { filter: grayscale(.8) brightness(.7); cursor: not-allowed; transform: none; }
.btn-red { --c: var(--red); --cd: var(--red-d); }
.btn-green { --c: var(--green); --cd: var(--green-d); }
.btn-yellow { --c: var(--yellow); --cd: var(--yellow-d); color: #3b2500; text-shadow: none; }
.btn-blue { --c: var(--blue); --cd: var(--blue-d); }
.btn-purple { --c: #8e5cf7; --cd: #5b33c2; }
.btn-ghost { --c: rgba(255,255,255,.1); --cd: rgba(0,0,0,.25); }
.btn-small { padding: 7px 12px; font-size: 14px; border-radius: 12px; }
.btn-big { width: 100%; justify-content: flex-start; text-align: left; gap: 14px; padding: 14px 18px; border-radius: 20px; }
.btn-big .ico { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.btn-big b { display: block; font-size: 18px; }
.btn-big small { display: block; font-size: 13px; font-weight: 500; opacity: .85; }
.icon-btn { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-size: 19px; font-weight: 600; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; transition: transform .1s; flex: none; }
.icon-btn:active { transform: scale(.92); }
.badge-dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; font-style: normal; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg1); }

/* ------------------------------------------------------------ Lobby */
.lobby-head { display: flex; align-items: center; gap: 10px; }
.room-code { flex: 1; text-align: center; }
.room-code small { display: block; color: var(--muted); font-size: 12px; }
.code-big { font-size: 40px; font-weight: 700; letter-spacing: 8px; padding: 0 0 0 8px; text-shadow: 0 4px 0 rgba(0,0,0,.35); }
.code-big::after { content: "⧉"; font-size: 18px; margin-left: 6px; opacity: .5; vertical-align: middle; letter-spacing: 0; }
.invite { width: 100%; }
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seat { --pc: #888; position: relative; border-radius: 20px; padding: 14px 10px 12px; text-align: center; background: linear-gradient(160deg, color-mix(in srgb, var(--pc) 85%, white) 0%, var(--pc) 60%, color-mix(in srgb, var(--pc) 70%, black) 100%); box-shadow: 0 5px 0 color-mix(in srgb, var(--pc) 60%, black), 0 12px 24px rgba(0,0,0,.3); min-height: 132px; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: transform .2s; }
.seat.empty { background: rgba(255,255,255,.05); border: 2px dashed color-mix(in srgb, var(--pc) 70%, white); box-shadow: none; }
.seat.me { outline: 3px solid #fff; outline-offset: 3px; }
.seat .s-av { font-size: 40px; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.22); box-shadow: inset 0 -4px 0 rgba(0,0,0,.12); }
.seat.empty .s-av { background: rgba(255,255,255,.06); font-size: 26px; opacity: .7; }
.seat .s-name { font-weight: 700; font-size: 17px; text-shadow: 0 2px 0 rgba(0,0,0,.25); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .s-tags { font-size: 12px; font-weight: 600; display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.seat .s-tags > i { font-style: normal; background: rgba(0,0,0,.22); border-radius: 8px; padding: 1px 7px; }
.seat .s-actions { display: flex; gap: 6px; margin-top: auto; flex-wrap: wrap; justify-content: center; }
.seat .s-kick { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.25); font-size: 13px; }
.seat .s-color { font-size: 12px; font-weight: 600; opacity: .8; }
.rules-box { padding: 4px 14px; }
.rules-box summary { cursor: pointer; padding: 10px 0; font-weight: 600; list-style: none; display: flex; gap: 8px; align-items: center; }
.rules-box summary::-webkit-details-marker { display: none; }
.rules-box summary .rules-sum { color: var(--muted); font-weight: 500; font-size: 13px; margin-left: auto; text-align: right; }
.board-pick { padding: 2px 14px; }
.seats.many { grid-template-columns: 1fr 1fr; gap: 10px; }
.seats.many .seat { min-height: 104px; padding: 10px 8px; }
.seats.many .seat .s-av { width: 46px; height: 46px; font-size: 28px; }
.seats.many .seat .s-name { font-size: 15px; }
.rules-form { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; }
.lobby-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.hint { color: var(--muted); text-align: center; margin: 0; font-size: 14px; }

/* Schalter */
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.toggle:last-child { border-bottom: 0; }
.toggle .t-text b { display: block; font-weight: 600; font-size: 15px; }
.toggle .t-text small { color: var(--muted); font-size: 12.5px; }
.switch { width: 50px; height: 30px; border-radius: 15px; background: rgba(255,255,255,.15); position: relative; flex: none; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s cubic-bezier(.3,1.5,.5,1); box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.switch.on { background: var(--green); }
.switch.on::after { transform: translateX(20px); }
.switch:disabled { opacity: .55; cursor: default; }
.seg { display: inline-flex; background: rgba(255,255,255,.08); border-radius: 12px; padding: 3px; gap: 2px; flex: none; }
.seg button { padding: 6px 10px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: var(--muted); }
.seg button.on { background: #fff; color: #23164f; }
.seg button:disabled { cursor: default; }

/* ------------------------------------------------------------ HUD */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.hud > * { pointer-events: auto; }
.topbar { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--topbar) + var(--safe-t)); padding: calc(var(--safe-t) + 8px) 10px 8px; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.topbar .spacer { flex: 1; pointer-events: none; }
.room-chip { display: flex; align-items: center; gap: 7px; padding: 0 12px; height: 42px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font-weight: 700; letter-spacing: 2px; font-size: 15px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.net-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.net-dot.warn { background: var(--yellow); box-shadow: 0 0 8px var(--yellow); }
.net-dot.bad { background: var(--red); box-shadow: 0 0 8px var(--red); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }

.badges { position: absolute; inset: 0; pointer-events: none; }
.pbadge { --pc: #888; position: absolute; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--panel); border: 1.5px solid color-mix(in srgb, var(--pc) 45%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: auto; max-width: calc(50vw - 16px); transition: transform .3s cubic-bezier(.3,1.4,.5,1), box-shadow .3s, opacity .3s; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
.pbadge.right { flex-direction: row-reverse; padding: 6px 6px 6px 12px; text-align: right; }
.pbadge.active { scale: 1.06; box-shadow: 0 0 0 2px var(--pc), 0 0 28px color-mix(in srgb, var(--pc) 70%, transparent), 0 8px 20px rgba(0,0,0,.3); }
.pbadge.done { opacity: .8; }
.pbadge.offline .b-av { filter: grayscale(1) brightness(.7); }
.b-av { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; font-size: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--pc) 70%, white), var(--pc)); box-shadow: inset 0 -4px 0 rgba(0,0,0,.18); }
.b-av > svg { position: absolute; inset: -4px; width: 56px; height: 56px; transform: rotate(-90deg); pointer-events: none; }
.b-av > svg circle { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; transition: stroke .3s; }
.b-av > svg circle.low { stroke: var(--red); }
.b-av .online { position: absolute; bottom: -1px; right: -1px; width: 13px; height: 13px; border-radius: 50%; background: var(--green); border: 2px solid var(--panel-solid); }
.b-av .online.off { background: #777; }
.b-av .rank { position: absolute; top: -8px; right: -8px; font-size: 20px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.b-info { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.b-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.b-status { font-size: 12px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.b-pips { display: flex; align-items: center; gap: 3px; margin-top: 3px; }
.pbadge.right .b-pips { justify-content: flex-end; }
.b-pips > i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.2); }
.b-pips > i.out { background: color-mix(in srgb, var(--pc) 60%, white); }
.b-pips > i.home { background: #ffd34d; box-shadow: 0 0 6px #ffd34d; }
.poke { position: absolute; top: -10px; font-size: 18px; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.3); display: grid; place-items: center; animation: wobble 1.4s infinite; }
.pbadge .poke { right: -12px; }
.pbadge.right .poke { right: auto; left: -12px; }
/* viele Spieler: kompakte Plaketten */
.pbadge.compact { gap: 6px; padding: 4px 9px 4px 4px; }
.pbadge.compact.right { padding: 4px 4px 4px 9px; }
.pbadge.compact .b-av { width: 40px; height: 40px; font-size: 22px; }
.pbadge.compact .b-av > svg { width: 48px; height: 48px; }
.pbadge.compact .b-name { max-width: 74px; font-size: 13.5px; }
.pbadge.compact .b-status { font-size: 11px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
.pbadge.mini { flex-direction: column !important; gap: 2px; padding: 5px 6px 4px !important; border-radius: 16px; text-align: center !important; max-width: 84px; }
.pbadge.mini .b-av { width: 38px; height: 38px; font-size: 21px; }
.pbadge.mini .b-av > svg { width: 46px; height: 46px; }
.pbadge.mini .b-info { align-items: center; }
.pbadge.mini .b-name { max-width: 74px; font-size: 12px; }
.pbadge.mini .b-status { display: none; }
.pbadge.mini .b-pips { justify-content: center !important; margin-top: 2px; }
.pbadge.mini .b-pips > i { width: 6px; height: 6px; }
.pbadge.mini .poke { top: -8px; right: -8px; left: auto; width: 26px; height: 26px; font-size: 15px; }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.pbadge.wiggle { animation: wiggle .6s; }
.pbadge { transition: scale .3s cubic-bezier(.3,1.4,.5,1), box-shadow .3s, opacity .3s; }
@keyframes wiggle { 0%, 100% { translate: 0 0; } 20% { translate: -8px 0; rotate: -4deg; } 40% { translate: 8px 0; rotate: 4deg; } 60% { translate: -6px 0; } 80% { translate: 5px 0; } }

.bottombar { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 10px calc(var(--safe-b) + 12px); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.roll-btn { --pc: #6c5ce7; pointer-events: auto; position: relative; width: 168px; height: 72px; border-radius: 26px; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; font-size: 21px; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 80%, white), var(--pc)); box-shadow: 0 6px 0 color-mix(in srgb, var(--pc) 55%, black), 0 14px 30px rgba(0,0,0,.35); transition: transform .1s, filter .2s, box-shadow .1s; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.roll-btn .roll-dice { font-size: 30px; display: inline-block; flex: none; }
.roll-btn .roll-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 112px; }
.roll-btn:disabled { font-size: 15px; width: auto; min-width: 168px; max-width: 220px; padding: 0 18px; }
.roll-btn:disabled .roll-label { max-width: 150px; }
.roll-btn:disabled .roll-dice { font-size: 24px; }
.roll-btn:not(:disabled) { animation: breathe 1.6s ease-in-out infinite; }
.roll-btn:not(:disabled) .roll-dice { animation: diceWiggle 1.6s ease-in-out infinite; }
.roll-btn:active:not(:disabled) { transform: translateY(4px) scale(.98); box-shadow: 0 2px 0 color-mix(in srgb, var(--pc) 55%, black), 0 6px 14px rgba(0,0,0,.35); animation: none; }
.roll-btn:disabled { filter: saturate(.5) brightness(.75); cursor: default; }
.roll-btn.choose { background: var(--panel); box-shadow: 0 0 0 2px var(--pc), 0 10px 24px rgba(0,0,0,.35); font-size: 16px; animation: none; filter: none; }
.roll-btn.choose .roll-dice { animation: point 1s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 6px 0 color-mix(in srgb, var(--pc) 55%, black), 0 14px 30px rgba(0,0,0,.35), 0 0 0 0 color-mix(in srgb, var(--pc) 60%, transparent); } 50% { box-shadow: 0 6px 0 color-mix(in srgb, var(--pc) 55%, black), 0 14px 30px rgba(0,0,0,.35), 0 0 0 12px color-mix(in srgb, var(--pc) 0%, transparent); } }
@keyframes diceWiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-18deg) scale(1.15); } 80% { transform: rotate(14deg) scale(1.1); } 90% { transform: rotate(-6deg); } }
@keyframes point { 50% { transform: translateY(-4px); } }
.status-line { pointer-events: none; font-size: 14px; font-weight: 500; color: var(--muted); text-shadow: 0 2px 4px rgba(0,0,0,.5); min-height: 18px; text-align: center; }
.spectator { position: absolute; top: calc(var(--topbar) + var(--safe-t) + 70px); left: 50%; translate: -50% 0; background: var(--panel); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px; }
.afk-banner { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 100px); translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 16px; background: var(--panel-solid); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.4); white-space: nowrap; font-weight: 500; z-index: 3; }

/* Breite Bildschirme: Startmenü links, Brett rechts */
@media (min-aspect-ratio: 5/4) {
  #screen-home { background: linear-gradient(90deg, rgba(12, 8, 36, 0.92) 0%, rgba(12, 8, 36, 0.75) 32%, rgba(12, 8, 36, 0) 55%); }
  .home-wrap { margin: 0 0 0 max(5vw, 24px); justify-content: center; }
}

/* Breite Bildschirme: größere Plaketten an den Seiten */
@media (min-aspect-ratio: 5/4) {
  .pbadge:not(.compact) { padding: 8px 16px 8px 8px; gap: 10px; }
  .pbadge.right:not(.compact) { padding: 8px 8px 8px 16px; }
  .pbadge:not(.compact) .b-av { width: 58px; height: 58px; font-size: 32px; }
  .pbadge:not(.compact) .b-av > svg { width: 66px; height: 66px; }
  .pbadge:not(.compact) .b-name { font-size: 17px; max-width: 170px; }
  .pbadge.compact .b-name { max-width: 120px; }
}
@media (max-width: 380px) {
  .b-name { max-width: 84px; font-size: 14px; }
  .b-av { width: 42px; height: 42px; font-size: 22px; }
  .b-av > svg { width: 50px; height: 50px; }
  .roll-btn { width: 150px; height: 64px; }
}

/* ------------------------------------------------------------ Comic-Texte, Toasts, Effekte */
.comic { position: fixed; inset: 0; pointer-events: none; display: grid; place-items: center; z-index: 30; }
.comic .pop { text-align: center; transform-origin: center; animation: pop 1.3s cubic-bezier(.2, 1.5, .4, 1) forwards; }
.comic .pop b { display: block; font-size: clamp(44px, 13vw, 96px); line-height: .95; font-weight: 700; color: var(--cc, #fff); -webkit-text-stroke: 5px #1b1036; paint-order: stroke fill; text-shadow: 0 7px 0 #1b1036, 0 16px 30px rgba(0,0,0,.5); letter-spacing: 1px; }
.comic .pop small { display: inline-block; margin-top: 10px; font-size: clamp(16px, 4.4vw, 22px); font-weight: 600; background: #1b1036; padding: 6px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.comic .pop.small b { font-size: clamp(30px, 8vw, 56px); -webkit-text-stroke: 4px #1b1036; }
@keyframes pop {
  0% { transform: scale(0) rotate(-12deg); opacity: 0; }
  14% { transform: scale(1.18) rotate(4deg); opacity: 1; }
  24% { transform: scale(1) rotate(-3deg); }
  80% { transform: scale(1) rotate(-3deg); opacity: 1; }
  100% { transform: scale(1.3) rotate(-3deg); opacity: 0; }
}
.toasts { position: fixed; top: calc(var(--safe-t) + 64px); left: 50%; translate: -50% 0; display: flex; flex-direction: column; gap: 8px; align-items: center; z-index: 40; pointer-events: none; width: min(92vw, 420px); }
.toast { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 14px; padding: 9px 14px; font-weight: 500; font-size: 14.5px; box-shadow: 0 10px 24px rgba(0,0,0,.35); animation: toastIn .35s cubic-bezier(.3,1.5,.5,1), toastOut .3s ease-in forwards; animation-delay: 0s, var(--life, 2.6s); text-align: center; }
.toast.err { border-color: var(--red); }
@keyframes toastIn { from { transform: translateY(-14px) scale(.9); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-10px); opacity: 0; } }

.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 25; overflow: hidden; }
.bubble { position: absolute; max-width: min(46vw, 260px); background: #fff; color: #1b1036; font-weight: 600; font-size: 15px; padding: 9px 13px; border-radius: 18px; box-shadow: 0 10px 24px rgba(0,0,0,.35); animation: bubbleIn .35s cubic-bezier(.3,1.6,.5,1); word-wrap: break-word; line-height: 1.25; }
.bubble::after { content: ""; position: absolute; width: 14px; height: 14px; background: #fff; transform: rotate(45deg); }
.bubble.up::after { bottom: -6px; left: var(--tail, 22px); }
.bubble.down::after { top: -6px; left: var(--tail, 22px); }
.bubble .who { display: block; font-size: 11px; font-weight: 700; color: var(--pc, #6c5ce7); margin-bottom: 1px; }
.bubble.out { animation: bubbleOut .3s ease-in forwards; }
@keyframes bubbleIn { from { transform: scale(.3); opacity: 0; } }
@keyframes bubbleOut { to { transform: scale(.6); opacity: 0; } }
.ouch { position: absolute; font-weight: 700; font-size: 26px; color: #fff; -webkit-text-stroke: 4px #1b1036; paint-order: stroke fill; translate: -50% -100%; animation: ouch 1.2s ease-out forwards; white-space: nowrap; }
@keyframes ouch { 0% { transform: scale(0) rotate(-20deg); } 20% { transform: scale(1.3) rotate(8deg); } 30% { transform: scale(1) rotate(-4deg); } 80% { opacity: 1; } 100% { transform: translateY(-40px) rotate(-4deg); opacity: 0; } }
.fly { position: absolute; left: 0; top: 0; font-size: 58px; line-height: 1; will-change: transform; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
.splat { position: absolute; width: 120px; height: 120px; translate: -50% -50%; pointer-events: none; animation: splat 2.6s ease-out forwards; }
.splat i { position: absolute; border-radius: 50%; background: var(--sc); }
@keyframes splat { 0% { transform: scale(0); } 12% { transform: scale(1.15); } 20% { transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(1) translateY(10px); } }
.burst { position: absolute; font-size: 28px; translate: -50% -50%; animation: burst 1s ease-out forwards; }
@keyframes burst { to { transform: translate(var(--dx), var(--dy)) scale(.4) rotate(var(--rot)); opacity: 0; } }
.screen-shake { animation: screenShake .5s; }
@keyframes screenShake { 0%, 100% { transform: translate(0); } 20% { transform: translate(-10px, 4px) rotate(-1deg); } 40% { transform: translate(9px, -5px) rotate(1deg); } 60% { transform: translate(-7px, 3px); } 80% { transform: translate(5px, -2px); } }

/* ------------------------------------------------------------ Sheets */
.scrim { position: fixed; inset: 0; background: rgba(5, 2, 20, .5); z-index: 49; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.sheet { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; max-height: 86vh; max-height: 86dvh; overflow-y: auto; background: var(--panel-solid); border-top-left-radius: 26px; border-top-right-radius: 26px; border: 1px solid var(--line); padding: 8px 16px calc(var(--safe-b) + 16px); box-shadow: 0 -20px 50px rgba(0,0,0,.5); animation: sheetIn .35s cubic-bezier(.2,1.2,.4,1); display: flex; flex-direction: column; gap: 12px; }
.sheet::before { content: ""; display: block; width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.25); margin: 0 auto 2px; }
@keyframes sheetIn { from { transform: translateY(100%); } }
@media (min-width: 760px) {
  .sheet { left: auto; top: 0; right: 0; bottom: 0; width: 400px; max-height: none; border-radius: 26px 0 0 26px; animation: sideIn .35s cubic-bezier(.2,1.1,.4,1); padding-top: calc(var(--safe-t) + 16px); }
  .sheet::before { display: none; }
  @keyframes sideIn { from { transform: translateX(100%); } }
}
.sheet-head { display: flex; align-items: center; gap: 10px; }
.sheet-head h2 { margin: 0; flex: 1; font-size: 22px; }
.sheet-label { margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; }
.tabs { flex: 1; display: flex; gap: 6px; }
.tab { padding: 8px 14px; border-radius: 12px; font-weight: 600; color: var(--muted); }
.tab.active { background: rgba(255,255,255,.12); color: #fff; }
.tab-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.chat .tab-body[data-body="chat"] { flex: 1; }
.chat-list { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 140px; max-height: 42vh; padding: 4px 2px; }
@media (min-width: 760px) { .chat-list { max-height: none; flex: 1; } }
.msg { --pc: #6c5ce7; display: flex; gap: 8px; align-items: flex-end; max-width: 88%; animation: bubbleIn .25s cubic-bezier(.3,1.5,.5,1); }
.msg .m-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--pc); font-size: 17px; flex: none; }
.msg .m-body { background: rgba(255,255,255,.08); border-radius: 16px 16px 16px 4px; padding: 7px 11px; }
.msg .m-name { display: block; font-size: 11.5px; font-weight: 700; color: color-mix(in srgb, var(--pc) 70%, white); }
.msg .m-text { font-size: 15px; word-wrap: break-word; }
.msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.msg.mine .m-body { background: color-mix(in srgb, var(--pc) 55%, #1c1247); border-radius: 16px 16px 4px 16px; }
.msg.sticker .m-text { font-size: 34px; }
.msg.system { align-self: center; max-width: 100%; }
.msg.system .m-body { background: none; color: var(--muted); font-size: 13px; padding: 2px; }
.quick { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.quick::-webkit-scrollbar { display: none; }
.quick button { flex: none; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.1); font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .1s, transform .1s; }
.quick button:active { transform: scale(.94); background: rgba(255,255,255,.2); }
.chat-form { display: flex; gap: 8px; }
.chat-form .btn { flex: none; width: 52px; padding: 0; }
.targets { display: flex; gap: 6px; flex-wrap: wrap; }
.targets button { --pc: #6c5ce7; display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255,255,255,.08); font-weight: 600; font-size: 14px; border: 2px solid transparent; }
.targets button span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--pc); font-size: 15px; }
.targets button.on { border-color: #fff; background: rgba(255,255,255,.16); }
.sticker-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sticker-grid button { aspect-ratio: 1; border-radius: 18px; background: rgba(255,255,255,.07); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: transform .1s, background .1s; }
.sticker-grid button span { font-size: 38px; line-height: 1; }
.sticker-grid button small { font-size: 11px; color: var(--muted); font-weight: 600; }
.sticker-grid button:hover { background: rgba(255,255,255,.14); }
.sticker-grid button:active { transform: scale(.88); }
.settings { display: flex; flex-direction: column; }
.menu-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.rules-text { line-height: 1.5; font-size: 15.5px; }
.rules-text ul { padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.setup-body { display: flex; flex-direction: column; gap: 12px; }
.setup-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.setup-row > b { font-weight: 600; }
.local-players { display: flex; flex-direction: column; gap: 8px; }
.lp { --pc: #888; display: flex; align-items: center; gap: 8px; }
.lp .lp-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--pc); display: grid; place-items: center; font-size: 22px; flex: none; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.lp input { flex: 1; font: 600 16px "Fredoka"; color: #fff; background: rgba(255,255,255,.07); border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 10px; outline: none; min-width: 0; }
.lp .seg { flex: none; }

/* ------------------------------------------------------------ Endscreen */
/* Siegerzeremonie */
.ceremony { --pc: #ffd34d; position: fixed; inset: 0; z-index: 24; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: calc(var(--topbar) + var(--safe-t) + 80px) 16px calc(var(--safe-b) + 16px); text-align: center; }
.cer-top { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.cer-intro { font-size: clamp(22px, 6.4vw, 36px); font-weight: 700; color: #fff; -webkit-text-stroke: 4px #1b1036; paint-order: stroke fill; text-shadow: 0 5px 0 #1b1036, 0 10px 24px rgba(0,0,0,.45); white-space: nowrap; }
.cer-intro span { display: inline-block; animation: cerLetter .5s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--i) * 40ms); }
.cer-intro.wave span { animation: cerWave .7s ease-in-out infinite; animation-delay: calc(var(--i) * 50ms); }
@keyframes cerLetter { from { transform: translateY(20px) scale(.3); opacity: 0; } }
@keyframes cerWave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px) rotate(-3deg); } }
.cer-name { display: flex; align-items: center; justify-content: center; gap: .22em; max-width: 100%; font-size: clamp(42px, 12vw, 84px); font-weight: 700; line-height: 1.05; color: var(--pc); -webkit-text-stroke: 6px #1b1036; paint-order: stroke fill; text-shadow: 0 8px 0 #1b1036, 0 18px 40px rgba(0,0,0,.55); animation: cerPop .8s cubic-bezier(.2,1.7,.35,1) both; }
.cer-name .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 .06em .08em; }
.cer-name .av { flex: none; font-size: .62em; width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--pc); display: grid; place-items: center; -webkit-text-stroke: 0; text-shadow: none; box-shadow: 0 0 0 5px #1b1036, 0 0 36px var(--pc); animation: cerSpin 1s .05s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes cerPop { 0% { transform: scale(.1) rotate(-12deg); opacity: 0; } 55% { transform: scale(1.18) rotate(3deg); opacity: 1; } 100% { transform: none; } }
@keyframes cerSpin { from { transform: rotate(-540deg) scale(.2); } }
.cer-title { font-size: clamp(15px, 4.2vw, 20px); font-weight: 700; color: #3a2400; background: linear-gradient(90deg, #ffc93c, #fff1b0 50%, #ffc93c); padding: 7px 18px; border-radius: 999px; box-shadow: 0 5px 0 #a87800, 0 12px 26px rgba(0,0,0,.4); animation: cerRibbon .6s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes cerRibbon { from { transform: scaleX(0) rotate(-6deg); opacity: 0; } }
.cer-bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(100%, 460px); }
.cer-cheer { font-size: clamp(20px, 5.6vw, 28px); font-weight: 700; color: #fff; -webkit-text-stroke: 4px #1b1036; paint-order: stroke fill; text-shadow: 0 5px 0 #1b1036; animation: cerPop .6s cubic-bezier(.2,1.7,.35,1) both; }
.cer-row { pointer-events: auto; display: flex; align-items: center; gap: 8px; width: 100%; background: var(--panel); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 22px; padding: 8px; box-shadow: 0 16px 40px rgba(0,0,0,.45); animation: sheetIn .5s cubic-bezier(.2,1.2,.4,1) both; }
.cer-btns { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.cer-btns small { color: var(--muted); font-weight: 600; font-size: 13px; padding-left: 6px; margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cer-btns button.e { flex: none; width: 48px; height: 48px; border-radius: 15px; font-size: 26px; line-height: 1; background: rgba(255,255,255,.09); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); transition: transform .08s; }
.cer-btns button.e:active { transform: scale(.88); }
.cer-btns button.e.tap { animation: cerTap .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes cerTap { 0% { transform: scale(.7); } 50% { transform: scale(1.3) rotate(-8deg); } 100% { transform: none; } }
.cer-next { flex: none; padding: 12px 14px; }
@media (max-width: 380px) { .cer-btns small { display: none; } .cer-btns button.e { width: 44px; height: 44px; font-size: 24px; } }
.end { position: fixed; inset: 0; z-index: 45; display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px calc(var(--safe-b) + 16px); pointer-events: none; }
.end-card { pointer-events: auto; width: min(100%, 440px); background: var(--panel); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 26px; padding: 18px; display: flex; flex-direction: column; gap: 12px; animation: sheetIn .6s cubic-bezier(.2,1.2,.4,1); box-shadow: 0 20px 60px rgba(0,0,0,.5); max-height: 64vh; overflow-y: auto; }
.end-card h2 { margin: 0; text-align: center; font-size: 28px; }
.end-ranking { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.end-ranking li { --pc: #888; display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 16px; background: rgba(255,255,255,.06); }
.end-ranking li .medal { font-size: 26px; width: 34px; text-align: center; flex: none; }
.end-ranking li .e-av { width: 36px; height: 36px; border-radius: 50%; background: var(--pc); display: grid; place-items: center; font-size: 20px; flex: none; }
.end-ranking li .e-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.end-ranking li b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.end-ranking li small { color: var(--muted); font-size: 12.5px; line-height: 1.25; }
.awards { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.award { background: rgba(255,255,255,.08); border-radius: 12px; padding: 6px 10px; font-size: 13px; font-weight: 500; }
.award b { font-weight: 700; }
.end-actions { display: flex; flex-direction: column; gap: 8px; }
.end-actions .btn-ghost { width: 100%; }

/* ------------------------------------------------------------ Debug */
.debug { position: fixed; left: 8px; bottom: calc(var(--safe-b) + 8px); z-index: 60; display: flex; gap: 4px; background: rgba(0,0,0,.6); padding: 6px; border-radius: 12px; font-size: 13px; align-items: center; }
.bico { width: .9em; height: .9em; vertical-align: -.1em; fill: currentColor; margin-right: 1px; }
.debug button { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.12); font-weight: 700; }
.debug button.on { background: var(--yellow); color: #000; }

@media (prefers-reduced-motion: reduce) {
  .logo span, .roll-btn, .roll-btn .roll-dice, .poke { animation: none !important; }
}

/* ------------------------------------------------------------ Münzen & Konto */
.coin-ico { display: inline-block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.wallet-pill { position: fixed; top: calc(var(--safe-t) + 12px); right: 14px; z-index: 12; display: flex; align-items: center; gap: 7px; padding: 7px 14px 7px 10px; border-radius: 999px; background: linear-gradient(180deg, #ffe27a, #ffb800); color: #4a2c00; font-weight: 700; font-size: 18px; box-shadow: 0 4px 0 #c98a00, 0 10px 24px rgba(0,0,0,.35); transition: transform .1s; }
.wallet-pill:active { transform: translateY(3px); box-shadow: 0 1px 0 #c98a00, 0 6px 14px rgba(0,0,0,.3); }
.wallet-pill .coin-ico { font-size: 22px; animation: coinSpin 3s ease-in-out infinite; }
.wallet-pill .gift { position: absolute; top: -10px; right: -8px; background: #ff4757; font-size: 12px; min-width: 24px; height: 24px; border-radius: 12px; animation: wobble 1.2s infinite; }
@keyframes coinSpin { 0%, 70%, 100% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } }
.wallet-chip { display: flex; align-items: center; gap: 5px; height: 42px; padding: 0 12px; border-radius: 14px; background: var(--panel); border: 1px solid rgba(255, 211, 77, .45); color: #ffe27a; font-weight: 700; font-size: 15px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.wallet-chip .coin-ico { font-size: 17px; }
.bump { animation: bump .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes bump { 30% { transform: scale(1.35); } }
.b-coins { font-size: 11px; font-weight: 700; color: #ffe27a; margin-left: 5px; line-height: 1; display: inline-flex; align-items: center; gap: 2px; }
.b-coins:empty { display: none; }
.pbadge.mini .b-coins { font-size: 10px; margin-left: 3px; }

.seg.stakes { flex-wrap: wrap; justify-content: flex-end; max-width: 270px; }
.seg.stakes button { padding: 6px 8px; }
.seg button:disabled:not(.on) { opacity: .35; }
.setup-row { flex-wrap: wrap; }
.pot-hint { color: #ffe27a; font-weight: 600; margin-top: -4px; }
.board-pick .toggle { flex-wrap: wrap; }

.profile-body { display: flex; flex-direction: column; gap: 14px; }
.pf-top { display: flex; align-items: center; gap: 12px; }
.pf-av { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 36px; background: rgba(255,255,255,.1); border: 2px solid var(--line); }
.pf-top b { display: block; font-size: 20px; }
.pf-top small { color: var(--muted); font-size: 13px; }
.pf-coins { display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 16px; border-radius: 22px; background: radial-gradient(circle at 50% 0%, rgba(255, 211, 77, .28), rgba(255, 211, 77, .06)); border: 1px solid rgba(255, 211, 77, .35); }
.pf-coins .coin-ico { font-size: 38px; align-self: center; animation: coinSpin 3s ease-in-out infinite; }
.pf-coins b { font-size: 46px; color: #ffe27a; text-shadow: 0 4px 0 rgba(0,0,0,.3); }
.pf-coins small { color: var(--muted); font-weight: 600; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf-stats div { text-align: center; padding: 10px 4px; border-radius: 16px; background: rgba(255,255,255,.06); }
.pf-stats b { display: block; font-size: 22px; }
.pf-stats small { color: var(--muted); font-size: 12px; }
.pf-acc { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.pf-acc small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.pf-acc .btn { margin-top: 4px; }

.daily { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; background: rgba(5, 2, 20, .6); padding: 20px; animation: fade .25s; }
.daily-card { width: min(100%, 360px); text-align: center; background: linear-gradient(180deg, #2b1a6b, #1c1247); border: 1px solid rgba(255, 211, 77, .4); border-radius: 28px; padding: 22px 20px 20px; box-shadow: 0 0 60px rgba(255, 200, 60, .25), 0 20px 50px rgba(0,0,0,.5); animation: cardIn 0.6s cubic-bezier(.2,1.5,.4,1) both; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.daily-card .gift { font-size: 74px; animation: giftShake 1.4s ease-in-out infinite; filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)); }
@keyframes cardIn { from { transform: scale(.4) rotate(-6deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes giftShake { 0%, 60%, 100% { transform: rotate(0) scale(1); } 70% { transform: rotate(-12deg) scale(1.08); } 80% { transform: rotate(10deg) scale(1.1); } 90% { transform: rotate(-6deg); } }
.daily-card h2 { margin: 0; font-size: 30px; color: #ffe27a; }
.daily-card p { margin: 0; color: var(--muted); }
.daily-amount { font-size: 44px; font-weight: 700; color: #ffe27a; text-shadow: 0 4px 0 rgba(0,0,0,.35); animation: bump .6s cubic-bezier(.3,1.6,.5,1); }
.daily-card .btn-big { justify-content: center; }

.rain-coin { position: fixed; top: -60px; z-index: 70; pointer-events: none; animation-name: coinFall; animation-timing-function: cubic-bezier(.4,.1,.8,1); animation-fill-mode: both; filter: drop-shadow(0 4px 4px rgba(0,0,0,.35)); }
@keyframes coinFall { from { transform: translateY(0) rotate(0); } to { transform: translateY(calc(100vh + 120px)) rotate(720deg); } }
.fly-coin { position: absolute; left: 0; top: 0; font-size: 26px; will-change: transform; filter: drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.coin-label { position: absolute; translate: -50% -50%; font-weight: 700; font-size: 24px; color: #ffe27a; -webkit-text-stroke: 4px #1b1036; paint-order: stroke fill; animation: ouch 1.2s ease-out forwards; white-space: nowrap; }

.end-coins { border-radius: 18px; padding: 10px 12px; background: radial-gradient(circle at 50% 0%, rgba(255, 211, 77, .2), rgba(255, 211, 77, .05)); border: 1px solid rgba(255, 211, 77, .3); display: flex; flex-direction: column; gap: 4px; }
.ec-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; color: #ffe27a; }
.ec-head small { color: var(--muted); font-weight: 500; }
.ec-row { display: flex; justify-content: space-between; font-size: 14.5px; }
.ec-row.neg b { color: #ff8a9a; }
.ec-row.pos b { color: #7bed9f; }
.ec-row.total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 6px; font-weight: 700; }
.ec-row.total b { color: #ffe27a; font-size: 17px; }

/* Obere Leiste: auf schmalen Handys (z. B. 402 px mit 2D-Knopf) darf nichts umbrechen oder rausragen */
.room-chip { white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.room-chip span { overflow: hidden; text-overflow: ellipsis; }
.topbar > :not(.room-chip):not(.spacer) { flex-shrink: 0; }
@media (max-width: 440px) {
  .topbar { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .topbar .icon-btn { width: 40px; }
  .wallet-chip { padding: 0 9px; font-size: 14px; }
  .room-chip { padding: 0 10px; letter-spacing: 1px; }
}
@media (max-width: 400px) {
  #viewBtn { display: none; }
  .wallet-chip { padding: 0 9px; font-size: 14px; }
  .room-chip { padding: 0 10px; letter-spacing: 1px; }
}

/* Goldmünze als Grafik (das Emoji ist auf Apple-Geräten silbern) */
.coin { display: inline-block; width: 1em; height: 1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CradialGradient id='g' cx='35%25' cy='28%25' r='80%25'%3E%3Cstop offset='0' stop-color='%23fff6c2'/%3E%3Cstop offset='.42' stop-color='%23ffd23f'/%3E%3Cstop offset='1' stop-color='%23e08a00'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='32' cy='34' r='29' fill='%23a85f00'/%3E%3Ccircle cx='32' cy='31' r='29' fill='url%28%23g%29'/%3E%3Ccircle cx='32' cy='31' r='21.5' fill='none' stroke='%23c47f00' stroke-width='3' opacity='.75'/%3E%3Cpath d='M32 16.5l4.3 8.8 9.7 1.3-7.1 6.7 1.8 9.6L32 38.2l-8.7 4.7 1.8-9.6-7.1-6.7 9.7-1.3z' fill='%23fff3b0' stroke='%23c47f00' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cellipse cx='23' cy='16' rx='8' ry='4' fill='%23fff' opacity='.45' transform='rotate%28-30 23 16%29'/%3E%3C/svg%3E") center / contain no-repeat; vertical-align: -0.14em; flex: none; }
.wallet-pill .coin-ico { width: 24px; height: 24px; }
.wallet-chip .coin-ico { width: 18px; height: 18px; }
.pf-coins .coin-ico { width: 40px; height: 40px; }
.btn .ico.coin { width: 30px; height: 30px; }

/* Mitspieler an diesem Handy (Lobby) */
.guest-box { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.guest-box .t-text { display: flex; flex-direction: column; gap: 2px; }
.guest-box .t-text small { color: var(--muted); font-size: 13px; }
.guest-box .g-row { display: flex; gap: 8px; align-items: center; }
.guest-box .g-av { flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.1); font-size: 24px; display: grid; place-items: center; }
.guest-box input { flex: 1; min-width: 0; height: 46px; border-radius: 14px; background: rgba(0,0,0,.25); border: 1px solid var(--line); color: #fff; font: inherit; font-weight: 600; padding: 0 12px; }
.guest-box .btn { flex: none; padding: 10px 14px; }

/* Fernseher: Raum öffnen */
.tv-screen { display: grid; place-items: center; padding: calc(var(--safe-t) + 24px) 24px calc(var(--safe-b) + 24px); }
.tv-screen[hidden] { display: none; }
.tv-wrap { width: min(100%, 1500px); display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: stretch; }
.tv-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 32px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 60px rgba(0,0,0,.45); padding: clamp(18px, 3vw, 40px); display: flex; flex-direction: column; gap: clamp(14px, 2vw, 26px); }
.tv-logo { font-size: clamp(54px, 7vw, 120px); margin: 0; }
.tv-join-row { display: flex; gap: clamp(16px, 2.5vw, 36px); align-items: center; }
.tv-qr { flex: none; width: clamp(170px, 19vw, 330px); aspect-ratio: 1; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 14px 40px rgba(0,0,0,.45); }
.tv-qr svg { display: block; width: 100%; height: 100%; }
.tv-code-box { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tv-code-box small { color: var(--muted); font-weight: 600; font-size: clamp(14px, 1.4vw, 22px); text-transform: uppercase; letter-spacing: 2px; }
.tv-code { font-size: clamp(54px, 7.5vw, 132px); font-weight: 700; letter-spacing: .14em; line-height: 1; color: #fff; text-shadow: 0 6px 0 rgba(0,0,0,.35); }
.tv-how { margin: 4px 0 0; color: var(--muted); font-size: clamp(15px, 1.5vw, 24px); line-height: 1.35; }
.tv-how b { color: #fff; }
.tv-players h2 { margin: 0; font-size: clamp(24px, 2.6vw, 44px); }
.tv-seats { display: flex; flex-direction: column; gap: 12px; flex: 1; }
.tv-seat { --pc: #888; display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 22px; background: color-mix(in srgb, var(--pc) 22%, transparent); border: 2px solid color-mix(in srgb, var(--pc) 60%, transparent); animation: cardIn .45s cubic-bezier(.2,1.4,.4,1); }
.tv-seat .tv-av { width: clamp(44px, 4vw, 70px); height: clamp(44px, 4vw, 70px); border-radius: 50%; background: var(--pc); display: grid; place-items: center; font-size: clamp(24px, 2.4vw, 40px); flex: none; }
.tv-seat b { font-size: clamp(20px, 2.1vw, 36px); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-seat i { font-style: normal; font-size: clamp(20px, 2vw, 32px); }
.tv-empty { color: var(--muted); font-size: clamp(18px, 1.8vw, 28px); padding: 18px 0; animation: blink 1.6s ease-in-out infinite; }
.tv-hint { margin: 0; color: var(--muted); font-size: clamp(15px, 1.5vw, 24px); }
.tv-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .tv-wrap { grid-template-columns: 1fr; }
  .tv-join-row { flex-direction: column; text-align: center; }
  .tv-code-box { align-items: center; }
}

/* Fernseher im Spiel: kein Würfeln-Knopf, Code-Ecke zum Mitspielen */
body.tv-mode .bottombar, body.tv-mode #walletChip, body.tv-mode #spectator, body.tv-mode #afkBanner { display: none !important; }
.tv-corner { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 14px); translate: -50% 0; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); pointer-events: none; }
.tv-corner[hidden] { display: none; }
.tv-corner-qr { width: 74px; height: 74px; border-radius: 10px; overflow: hidden; background: #fff; flex: none; }
.tv-corner-qr svg { display: block; width: 100%; height: 100%; }
.tv-corner-txt { display: flex; flex-direction: column; }
.tv-corner-txt small { color: var(--muted); font-weight: 600; }
.tv-corner-txt b { font-size: 30px; letter-spacing: 4px; }
.end-tv-hint { margin: 0; text-align: center; }
/* Restzeit der Partie */
.time-chip { display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 42px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); flex: none; }
.time-chip[hidden] { display: none; }
.time-chip.low { color: #ff6b81; border-color: #ff6b81; animation: breatheRed 1s ease-in-out infinite; }
@keyframes breatheRed { 50% { box-shadow: 0 0 0 6px rgba(255,107,129,.25); } }

/* ------------------------------------------------------------ Shop */
.shop-pill { position: fixed; top: calc(var(--safe-t) + 12px); left: 14px; z-index: 12; display: flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; border-radius: 999px; background: linear-gradient(180deg, #c98bff, #8a4dff); color: #fff; font-weight: 700; font-size: 17px; box-shadow: 0 4px 0 #5a2bb8, 0 10px 24px rgba(0,0,0,.35); transition: transform .1s; }
.shop-pill:active { transform: translateY(3px); box-shadow: 0 1px 0 #5a2bb8, 0 6px 14px rgba(0,0,0,.3); }
.shop-pill .ico { font-size: 19px; }
.shop-pill .lv { margin-left: 4px; font-size: 12px; background: rgba(0,0,0,.25); border-radius: 999px; padding: 2px 7px; }
.shop-screen { overflow: hidden; padding: 0; pointer-events: none; }
.shop-screen > * { pointer-events: auto; }
.shop-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: calc(var(--safe-t) + 12px) 14px 8px; }
.shop-top h2 { margin: 0; flex: 1; font-size: 26px; text-shadow: 0 3px 0 rgba(0,0,0,.3); }
.wallet-pill.static { position: static; }
.shop-panel { position: absolute; left: 0; right: 0; bottom: 0; height: 62dvh; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px calc(var(--safe-b) + 12px); background: var(--panel-solid); border-top-left-radius: 26px; border-top-right-radius: 26px; border: 1px solid var(--line); box-shadow: 0 -20px 50px rgba(0,0,0,.45); }
@media (min-aspect-ratio: 5/4) {
  .shop-panel { left: auto; top: calc(var(--safe-t) + 70px); width: min(440px, 46vw); height: auto; max-height: none; border-radius: 26px 0 0 26px; }
}
.shop-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; }
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tabs button { flex: none; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.08); font-weight: 600; font-size: 15px; color: var(--muted); }
.shop-tabs button.on { background: #fff; color: #2b1466; }
.shop-sel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid var(--line); flex: none; }
.shop-sel .nm { font-size: 19px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.shop-sel .hint { grid-column: 1; margin: 0; font-size: 13px; color: var(--muted); }
.shop-sel .btn { grid-column: 2; grid-row: 1 / span 2; min-width: 128px; padding: 12px 14px; font-size: 16px; }
.shop-sel .btn .coin { font-size: 15px; vertical-align: -2px; }
.rar { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.12); color: var(--muted); }
.rar.r-rare { background: rgba(61,139,253,.25); color: #8fc0ff; }
.rar.r-epic { background: rgba(165,94,234,.3); color: #d6b0ff; }
.rar.r-legendary { background: rgba(255,201,60,.25); color: #ffd86b; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); align-content: start; gap: 8px; overflow-y: auto; min-height: 0; flex: 1; padding-bottom: 4px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.shop-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px; border-radius: 18px; background: rgba(255,255,255,.06); border: 2px solid transparent; transition: transform .1s, border-color .15s; }
.shop-item:active { transform: scale(.96); }
.shop-item.sel { border-color: #fff; background: rgba(255,255,255,.12); }
.shop-item.r-rare { box-shadow: inset 0 -3px 0 rgba(61,139,253,.6); }
.shop-item.r-epic { box-shadow: inset 0 -3px 0 rgba(165,94,234,.75); }
.shop-item.r-legendary { box-shadow: inset 0 -3px 0 rgba(255,201,60,.85); }
.shop-item .sw { width: 58px; height: 58px; display: grid; place-items: center; font-size: 38px; }
.shop-item .sw svg { width: 58px; height: 58px; }
.shop-item b { font-size: 13px; line-height: 1.15; text-align: center; }
.shop-item small { font-size: 12px; font-weight: 600; color: #ffd86b; display: flex; align-items: center; gap: 3px; }
.shop-item small .coin { font-size: 12px; }
.shop-item.own small { color: var(--muted); }
.shop-item.eq::after { content: "✓"; position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.shop-item.locked .sw { filter: grayscale(.6) brightness(.8); }
.shop-fair { margin: 0; text-align: center; font-size: 12px; flex: none; }
.btn.sure { animation: surePulse .7s ease-in-out infinite alternate; }
@keyframes surePulse { from { transform: scale(1); } to { transform: scale(1.05); } }

/* ------------------------------------------------------------ Level + Missionen */
.level-pill { position: fixed; top: calc(var(--safe-t) + 62px); right: 14px; z-index: 12; display: flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(26,17,64,.85); border: 1px solid var(--line); font-weight: 700; font-size: 15px; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.level-pill .lv-star { font-size: 15px; }
.lv-bar { display: block; width: 48px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; }
.lv-bar > i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #ffd34d, #ff9f1a); transition: width .8s cubic-bezier(.2,1,.3,1); }
.level-pill .badge-dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: var(--red); border: 2px solid var(--panel-solid); }
.pf-level { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.lv-badge { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; font-weight: 700; color: #4a2c00; background: linear-gradient(180deg, #ffe27a, #ffb800); box-shadow: 0 3px 0 #c98a00; }
.pf-level .lv-bar { width: 100%; height: 10px; margin: 6px 0 4px; }
.pf-level small, .pf-missions small { color: var(--muted); font-size: 12px; }
.pf-missions { display: flex; flex-direction: column; gap: 8px; }
.pf-missions h3 { margin: 4px 0 0; font-size: 17px; }
.ms { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.ms .ms-ico { font-size: 20px; text-align: center; }
.ms b { font-size: 14px; display: block; }
.ms .ms-bar { display: block; height: 6px; margin-top: 5px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; }
.ms .ms-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #7bed9f, #2ed573); border-radius: 3px; }
.ms .ms-rew { font-weight: 700; font-size: 13px; color: #ffd86b; white-space: nowrap; }
.ms .ms-rew .coin { font-size: 12px; }
.ms.done { border-color: rgba(46,213,115,.5); background: rgba(46,213,115,.1); }
.ms.done .ms-rew { color: #7bed9f; }
.ms.fresh { animation: msFresh 1.2s ease-out 2; }
@keyframes msFresh { 0% { box-shadow: 0 0 0 0 rgba(46,213,115,.8); } 100% { box-shadow: 0 0 0 14px rgba(46,213,115,0); } }
.end-xp { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid var(--line); text-align: left; }
.end-xp .xp-head { display: flex; align-items: center; gap: 10px; }
.end-xp .xp-head .lv-badge { width: 40px; height: 40px; font-size: 19px; border-radius: 12px; }
.end-xp .xp-head b { flex: 1; font-size: 16px; }
.end-xp .xp-gain { font-weight: 700; color: #ffd86b; font-size: 18px; }
.end-xp .lv-bar { width: 100%; height: 10px; }
.end-xp .xp-up { font-weight: 700; color: #7bed9f; animation: msFresh 1.2s ease-out 2; border-radius: 10px; padding: 2px 6px; }
.end-xp .ms { padding: 8px 10px; }

/* ------------------------------------------------------------ Party-Modus */
/* Zwei Power-up-Plätze links und rechts neben dem Würfeln-Knopf */
.power-bar { position: absolute; left: 10px; right: 10px; bottom: calc(var(--safe-b) + 30px); display: flex; justify-content: space-between; pointer-events: none; }
@media (min-aspect-ratio: 5/4) { .power-bar { left: 50%; right: auto; width: min(480px, 62vw); transform: translateX(-50%); } }
.power-bar .pw { pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 78px; height: 62px; padding: 4px; border-radius: 18px; background: rgba(26,17,64,.88); border: 2px solid rgba(255,255,255,.14); color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.3); transition: transform .12s; }
.power-bar .pw .pw-i { font-size: 26px; line-height: 1; }
.power-bar .pw small { font-size: 11px; font-weight: 600; line-height: 1.05; text-align: center; }
.power-bar .pw.empty { opacity: .35; width: 54px; height: 54px; }
.power-bar .pw.empty .pw-i { font-size: 20px; filter: grayscale(1); }
.power-bar .pw:disabled:not(.empty) { opacity: .6; }
.power-bar .pw.ready { border-color: #c48bff; background: linear-gradient(180deg, #7d47e6, #4b23b8); animation: pwGlow 1.2s ease-in-out infinite alternate; }
.power-bar .pw.ready:active { transform: scale(.94); }
.power-bar .pw.aiming { border-color: #ffd34d; background: linear-gradient(180deg, #ffb800, #e07b00); animation: none; }
@keyframes pwGlow { from { box-shadow: 0 0 0 0 rgba(196,139,255,.6), 0 6px 16px rgba(0,0,0,.3); } to { box-shadow: 0 0 18px 4px rgba(196,139,255,.55), 0 6px 16px rgba(0,0,0,.3); } }
.aim-bar { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); width: max-content; max-width: calc(100vw - 24px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border-radius: 18px; background: rgba(26,17,64,.92); border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(0,0,0,.35); pointer-events: auto; }
.aim-bar small { width: 100%; text-align: center; font-weight: 600; color: var(--muted); font-size: 13px; }
.aim-seat { display: flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: color-mix(in srgb, var(--pc) 35%, #1c1247); border: 2px solid var(--pc); font-weight: 700; font-size: 14px; }
.aim-seat span { font-size: 22px; }
.aim-cancel { padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.12); font-weight: 600; font-size: 14px; }
.fly-icon { position: fixed; z-index: 60; font-size: 34px; margin: -17px 0 0 -17px; pointer-events: none; transition: transform .85s cubic-bezier(.3,.1,.3,1), opacity .85s; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.shop-sub { grid-column: 1 / -1; margin: 6px 2px 0; font-size: 14px; color: var(--muted); font-weight: 600; }
.public-btn { width: 100%; padding: 10px 14px; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.public-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.pub-room { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.pub-room .pr-av { font-size: 30px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.08); }
.pub-room b { display: block; font-size: 16px; }
.pub-room small { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pub-room small .bico { width: 13px; height: 13px; vertical-align: -2px; }
.pub-room .btn { padding: 10px 14px; font-size: 15px; }
.public-empty { text-align: center; padding: 16px 8px; }

/* ------------------------------------------------------------ Avatar */
.av-svg { display: block; border-radius: 50%; }
.emo .av-svg, .s-av .av-svg, .e-av .av-svg, .pf-av .av-svg, #avatarNow .av-svg, .tv-av .av-svg, .cer-name .av .av-svg { width: 100%; height: 100%; }
#avatarNow { display: grid; place-items: center; width: 100%; height: 100%; }
.shop-sel.av-mode { grid-template-columns: auto 1fr; }
.shop-sel.av-mode .av-big { grid-row: 1; grid-column: 1; }
.shop-sel.av-mode .av-info { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.shop-sel.av-mode .av-info .btn { min-width: 0; padding: 9px 14px; font-size: 15px; }
.shop-item .sw .av-svg { width: 54px; height: 54px; }

/* ------------------------------------------------------------ Admin + Spieler-Code */
.pf-code { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 10px 14px; text-align: left; width: 100%; }
.pf-code small { color: var(--muted); font-size: 12px; }
.pf-code b { grid-row: 1 / span 2; grid-column: 2; font-size: 20px; letter-spacing: .08em; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.pf-code span { font-size: 12px; color: var(--muted); }
.adm-give { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.adm-row { display: flex; gap: 8px; }
.adm-row input, #admNote, #admSearch { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.25); color: #fff; font: inherit; font-size: 16px; }
#admCode { text-transform: uppercase; letter-spacing: .06em; }
.adm-amounts { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-amounts button { display: flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.08); font-weight: 600; font-size: 14px; }
.adm-amounts button.on { background: #ffd34d; color: #3b2500; }
.adm-amounts .coin { font-size: 13px; }
.adm-who, .adm-p { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.06); text-align: left; width: 100%; }
.adm-who .aw-av, .adm-p .aw-av { font-size: 26px; }
.adm-who b, .adm-p b { display: block; font-size: 15px; }
.adm-who small, .adm-p small { color: var(--muted); font-size: 12px; }
.adm-who code, .adm-p code { font-size: 12px; color: var(--muted); }
.adm-list-head { display: flex; align-items: center; gap: 10px; }
.adm-list-head #admSearch { max-width: 160px; font-size: 14px; padding: 7px 10px; }
.adm-list { display: flex; flex-direction: column; gap: 6px; }
.seat .s-gift { position: absolute; top: 6px; left: 6px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,211,77,.9); font-size: 15px; display: grid; place-items: center; }

.adm-edit { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.adm-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.adm-fields label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.adm-fields label.wide { grid-column: 1 / -1; }
.adm-fields input { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.25); color: #fff; font: inherit; font-size: 16px; min-width: 0; }
.adm-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-btns .btn { padding: 8px 12px; font-size: 14px; }
.adm-edit small { color: var(--muted); font-size: 12px; }
.adm-items { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-slot { width: 100%; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 4px; }
.adm-item { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line); font-size: 13px; }
.adm-item.on { background: rgba(46,213,115,.25); border-color: rgba(46,213,115,.7); }

/* Avatar in der Plakette: füllt den Kreis, ohne Drehung des Countdown-Rings */
.b-av .emo:has(.av-svg) { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: block; }
.b-av .emo .av-svg { width: 100%; height: 100%; }
/* Schmale Handys mit Zeitlimit: lieber kein Raumcode-Feld als ein leeres */
@media (max-width: 440px) { .topbar:has(.time-chip:not([hidden])) .room-chip { display: none; } }

.shop-sel .hint { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.view-reset { position: absolute; left: 50%; top: calc(var(--topbar) + var(--safe-t) + 74px); transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(26,17,64,.9); border: 1px solid var(--line); font-size: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.35); pointer-events: auto; animation: sheetIn .3s; }
.view-reset span { font-size: 17px; }

.adm-confirm { padding: 8px 10px; border-radius: 12px; background: rgba(255,211,77,.14); border: 1px solid rgba(255,211,77,.5); color: #ffe27a; font-size: 13px; font-weight: 600; }

/* Admin-Würfelwahl (langer Druck auf „Würfeln“) */
.admin-dice { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 8; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: max-content; max-width: calc(100vw - 24px); padding: 8px 10px; border-radius: 18px; background: rgba(26,17,64,.95); border: 1px solid var(--line); box-shadow: 0 10px 26px rgba(0,0,0,.4); pointer-events: auto; }
.admin-dice small { width: 100%; text-align: center; color: var(--muted); font-weight: 600; font-size: 12px; }
.admin-dice button { width: 44px; height: 44px; border-radius: 12px; padding: 3px; background: rgba(255,255,255,.08); border: 2px solid transparent; }
.admin-dice button svg { width: 100%; height: 100%; }
.admin-dice button.rnd { width: auto; padding: 0 12px; font-weight: 600; font-size: 14px; }
.admin-dice button.on { border-color: #ffd34d; }
.roll-btn { position: relative; }
.adm-die-tag { position: absolute; top: -6px; right: -6px; width: 24px; height: 24px; border-radius: 50%; background: #ffd34d; color: #3b2500; font-style: normal; font-weight: 700; font-size: 14px; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); }

/* Shop: Unter-Reiter und großes Fenster beim Avatar */
.shop-subs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: none; padding-bottom: 2px; }
.shop-subs::-webkit-scrollbar { display: none; }
.shop-subs button { flex: none; padding: 7px 13px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--muted); }
.shop-subs button.on { background: rgba(196,139,255,.25); border-color: #c48bff; color: #fff; }
.shop-panel.tall { height: 86dvh; }
.shop-sel.av-mode { padding: 8px 12px; }
.shop-sel.av-mode .av-big .av-svg { width: 64px; height: 64px; }
.shop-sel.av-mode .hint { -webkit-line-clamp: 1; }
@media (min-aspect-ratio: 5/4) { .shop-panel.tall { height: auto; } }

/* Ladebildschirm wie in der iPhone-App (LoadingView) */
.ld-dots { position: absolute; inset: 0; pointer-events: none; }
.ld-dots i { position: absolute; bottom: 0; border-radius: 50%; opacity: .28; animation: ldRise linear infinite; }
@keyframes ldRise { from { transform: translateY(5vh); } to { transform: translateY(-105vh); } }
.ld-logo { margin: 0; position: relative; }
.ld-logo span:not(.logo-max) { animation: ldWave 1.26s ease-in-out infinite; }
.ld-logo .l1 { --r: -6deg; animation-delay: 0s; }
.ld-logo .l2 { --r: 6deg; animation-delay: .19s; }
.ld-logo .l3 { --r: -6deg; animation-delay: .38s; }
.ld-logo .l4 { --r: 6deg; animation-delay: .57s; }
@keyframes ldWave { 0%, 50%, 100% { transform: none; } 25% { transform: translateY(-14px) rotate(var(--r)); } }
.ld-die-x { height: 70px; margin-top: 22px; display: flex; align-items: flex-end; animation: ldSway 3.7s ease-in-out infinite alternate; }
@keyframes ldSway { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
.ld-die-y { animation: ldBounce .92s infinite; }
@keyframes ldBounce { 0%, 100% { transform: translateY(0); animation-timing-function: cubic-bezier(.3,.6,.5,1); } 50% { transform: translateY(-26px); animation-timing-function: cubic-bezier(.5,0,.7,.4); } }
.ld-die { position: relative; width: 50px; height: 50px; border-radius: 12px; background: radial-gradient(circle at 50% 43%, #fff, #efe8dc 80%); box-shadow: 0 3px 8px rgba(0,0,0,.35); animation: ldSpin .857s linear infinite; }
.ld-die b { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); }
@keyframes ldSpin { to { transform: rotate(360deg); } }
.ld-pawns { display: flex; gap: 22px; height: 96px; align-items: flex-end; }
.ld-pawn { position: relative; width: 38px; height: 56px; color: var(--c); }
.ld-pawn svg { position: relative; z-index: 1; width: 38px; height: 56px; display: block; transform-origin: 50% 100%; animation: ldHop .667s infinite; animation-delay: calc(var(--i) * .133s); overflow: visible; }
.ld-pawn i { position: absolute; left: 2px; bottom: -4px; width: 34px; height: 8px; border-radius: 50%; background: rgba(0,0,0,.35); animation: ldShadow .667s infinite; animation-delay: calc(var(--i) * .133s); }
@keyframes ldHop { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.3,.7,.5,1); } 21% { transform: translateY(-46px) scale(.92, 1.16); animation-timing-function: cubic-bezier(.5,0,.7,.3); } 42% { transform: translateY(0); } 48% { transform: scale(1.16, .78); } 54%, 100% { transform: none; } }
@keyframes ldShadow { 0%, 42%, 100% { transform: none; } 21% { transform: scaleX(.55); opacity: .6; } }
.ld-line { animation: ldLine 1.9s infinite; }
@keyframes ldLine { 0% { opacity: 0; } 16%, 84% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ld-dots, .ld-die-x, .ld-die-y, .ld-die, .ld-pawn svg, .ld-pawn i, .ld-logo span { animation: none !important; } }

/* ---------------------------------------------------------------- Etappe 1: Rahmen, Profilkarte, Angebote, Tanz-Knopf, Effekt-Herkunft */
.frm-wrap { position: relative; display: inline-grid; place-items: center; line-height: 1; }
/* Profilrahmen in festen Avatar-Plätzen: die Hülle füllt den Platz. Vorher blieb sie bei der
   SVG-Grundgröße (42 px) und der Avatar klebte oben links im Kreis (z. B. im Namensschild am Brett). */
:is(.emo, .s-av, .e-av, .pf-av, #avatarNow, .tv-av, .cer-name .av, .fr-av, .acct-av) > .frm-wrap { display: grid; width: 100%; height: 100%; }
:is(.emo, .s-av, .e-av, .pf-av, #avatarNow, .tv-av, .cer-name .av, .fr-av, .acct-av) > .frm-wrap > .av-svg { width: 100%; height: 100%; }
/* Im Namensschild liegt der Rahmen genau auf dem Rand des Kreises, damit er den Zug-Ring nicht berührt */
.b-av .emo:has(.frm-wrap) { overflow: visible; }
.b-av .emo .frm { left: 0; top: 0; width: 100%; height: 100%; }
.frm { position: absolute; left: -14%; top: -14%; width: 128%; height: 128%; pointer-events: none; overflow: visible; }
.frm-pulse { animation: frmPulse 1.6s ease-in-out infinite; }
.frm-spin { animation: frmSpin 4s linear infinite; }
@keyframes frmPulse { 50% { filter: drop-shadow(0 0 6px rgba(255,255,255,.7)); transform: scale(1.04); } }
@keyframes frmSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .frm-pulse, .frm-spin { animation: none; } }

.shop-item { position: relative; }
.shop-item .flag { position: absolute; top: 4px; left: 4px; padding: 1px 6px; border-radius: 8px; background: #ff4757; color: #fff; font-style: normal; font-weight: 700; font-size: 11px; z-index: 1; }
.shop-item .flag.drop { background: #c48bff; }
.shop-item .heart { position: absolute; top: 3px; right: 5px; font-style: normal; font-size: 13px; z-index: 1; }
.shop-item small s { opacity: .55; margin-right: 2px; }
.wish-btn { margin-left: auto; font-size: 20px; padding: 2px 6px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.wish-btn.on { background: rgba(255,95,168,.18); border-color: #ff5fa8; }
.shop-sel .nm { display: flex; align-items: center; gap: 8px; }
.pack-row { display: flex; gap: 10px; font-size: 30px; justify-content: center; padding: 4px 0; }
.badge-dot.wish { background: #ff5fa8; font-style: normal; }

.card-mini { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: linear-gradient(135deg, var(--b1), var(--b2)); position: relative; overflow: hidden; margin: 4px 0; }
.card-mini .cm-av { width: 46px; height: 46px; display: grid; place-items: center; font-size: 30px; }
.card-mini .cm-txt { display: flex; flex-direction: column; gap: 1px; position: relative; }
.card-mini .cm-txt i { font-style: normal; font-size: 12px; color: #ffe27a; font-weight: 600; }
.ban-stars::before, .ban-waves::before, .ban-rays::before, .ban-snow::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.ban-stars::before { background: radial-gradient(circle at 12% 30%, #fff 1px, transparent 2px), radial-gradient(circle at 70% 20%, #fff 1px, transparent 2px), radial-gradient(circle at 40% 70%, #fff 1.5px, transparent 2.5px), radial-gradient(circle at 85% 75%, #fff 1px, transparent 2px), radial-gradient(circle at 25% 85%, #fff 1px, transparent 2px); }
.ban-waves::before { background: repeating-radial-gradient(circle at 0 120%, transparent 0 14px, rgba(255,255,255,.25) 14px 16px); }
.ban-rays::before { background: repeating-conic-gradient(from 0deg at 50% 120%, rgba(255,255,255,.22) 0 6deg, transparent 6deg 18deg); }
.ban-snow::before { background: radial-gradient(circle at 20% 25%, #fff 2px, transparent 3px), radial-gradient(circle at 60% 45%, #fff 2px, transparent 3px), radial-gradient(circle at 80% 15%, #fff 1.5px, transparent 2.5px), radial-gradient(circle at 35% 75%, #fff 2px, transparent 3px), radial-gradient(circle at 90% 70%, #fff 2px, transparent 3px); }

.card-sheet .card-body { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 16px; }
.card-head { position: relative; overflow: hidden; border-radius: 18px; padding: 18px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: linear-gradient(160deg, var(--b1), var(--b2)); border: 2px solid var(--pc); }
.card-head .ch-av { width: 80px; height: 80px; display: grid; place-items: center; font-size: 52px; position: relative; }
.card-head .ch-name { font-size: 20px; position: relative; }
.card-head .ch-title { font-size: 13px; font-weight: 700; color: #ffe27a; position: relative; }
.card-head .ch-level { font-size: 12px; color: rgba(255,255,255,.85); position: relative; }
.card-bot { margin: 0; text-align: center; color: var(--muted); font-size: 14px; }
.card-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; text-align: center; }
.card-stats span { display: flex; flex-direction: column; padding: 6px 2px; border-radius: 12px; background: rgba(255,255,255,.06); }
.card-stats b { font-size: 14px; }
.card-stats small { font-size: 11px; color: var(--muted); }
.card-stats .muted { grid-column: 1 / -1; color: var(--muted); font-size: 13px; background: none; }
.card-gear { display: flex; flex-wrap: wrap; gap: 6px; }
.card-gear .gear { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--line); font-size: 13px; }
.card-gear .gear small { color: #ffd34d; margin-left: 2px; }
.card-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.card-acts .btn { flex: 1 1 140px; padding: 10px 12px; font-size: 15px; }
.card-badges { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

#emoteBtn.wait { opacity: .45; }
.fx-from { position: fixed; left: 50%; top: calc(var(--safe-t, 0px) + 112px); transform: translateX(-50%); z-index: 30; padding: 6px 14px; border-radius: 999px; background: rgba(26,17,64,.94); border: 2px solid var(--pc, #c48bff); color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 8px 20px rgba(0,0,0,.35); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }
.fx-from.show { animation: fxFromIn .35s cubic-bezier(.3,1.5,.5,1); }
@keyframes fxFromIn { from { transform: translateX(-50%) translateY(-10px) scale(.8); opacity: 0; } }
.sticker-grid .more { opacity: .7; }

/* ------------------------------------------------------------ Etappe 2: Schnellspiel, Freunde, Melden, Power-up-Auswahl */
.btn-quick { --c: #ff7a3d; --cd: #c2471b; background: linear-gradient(100deg, #ff9a3d, #ff5f7e 60%, #c86bff); overflow: hidden; }
.btn-quick::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 45%, transparent 60%); transform: translateX(-120%); animation: quickShine 3.6s ease-in-out infinite; pointer-events: none; border-radius: inherit; }
@keyframes quickShine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.home-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.friends-btn { width: 100%; padding: 10px 14px; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.friends-btn .badge-dot { top: -6px; right: -6px; }

.invite-banner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 18px; background: linear-gradient(100deg, rgba(46,213,115,.28), rgba(79,139,255,.28)); border: 1px solid rgba(46,213,115,.55); box-shadow: 0 8px 22px rgba(0,0,0,.25); animation: invitePop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes invitePop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.invite-banner .ib-av { font-size: 30px; line-height: 1; }
.invite-banner b { display: block; font-size: 15px; }
.invite-banner small { color: var(--muted); font-size: 12.5px; }
.invite-banner .ib-x { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.12); font-size: 14px; }

.quick-bar { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px 14px; border-radius: 18px; background: linear-gradient(100deg, rgba(255,122,61,.25), rgba(200,107,255,.25)); border: 1px solid rgba(255,154,61,.5); overflow: hidden; }
.quick-bar .qb-ico { font-size: 26px; animation: qbPulse 1s ease-in-out infinite alternate; }
@keyframes qbPulse { to { transform: scale(1.18) rotate(-8deg); } }
.quick-bar .qb-txt { flex: 1; min-width: 0; }
.quick-bar b { display: block; font-size: 15px; }
.quick-bar small { color: var(--muted); font-size: 12.5px; }
.quick-bar .qb-bar { position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--p) * 100%); background: linear-gradient(90deg, #ff9a3d, #ff5f7e); transition: width 1s linear; }
.invite-friends { width: 100%; }

.power-row { padding: 9px 2px; border-bottom: 1px solid var(--line); }
.power-row:last-child { border-bottom: 0; }
.power-row .t-text b { display: block; font-weight: 600; font-size: 15px; }
.power-row .t-text small { color: var(--muted); font-size: 12.5px; }
.setup-body .power-row { border-bottom: 0; padding: 2px 0; }
.pw-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pw-chip { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px 6px 7px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1.5px solid transparent; font-weight: 600; font-size: 13px; color: var(--muted); transition: transform .1s; }
.pw-chip span { font-size: 17px; line-height: 1; }
.pw-chip.on { background: rgba(196,139,255,.28); border-color: #c48bff; color: #fff; }
.pw-chip.locked { opacity: .5; }
.pw-chip.locked span { filter: grayscale(1); }
.pw-chip i { font-style: normal; font-size: 11px; margin-left: 2px; }
.pw-chip:active:not(:disabled) { transform: scale(.94); }
.pw-chip:disabled { cursor: default; }

.friends-body { display: flex; flex-direction: column; gap: 10px; }
.fr-top { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.fr-code { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.06); }
.fr-code small { color: var(--muted); font-size: 12px; grid-column: 1; }
.fr-code b { grid-column: 1; font-size: 22px; letter-spacing: 3px; }
.fr-code span { grid-column: 2; grid-row: 1 / 3; font-size: 13px; font-weight: 600; color: var(--muted); }
.fr-add { display: flex; gap: 8px; }
.fr-add input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 2px; }
.fr-tabs { width: 100%; display: flex; }
.fr-tabs button { flex: 1; }
.fr-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.fr-empty { text-align: center; padding: 14px 8px; }
.fr-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.fr-av { width: 44px; height: 44px; display: grid; place-items: center; font-size: 28px; border-radius: 50%; background: rgba(255,255,255,.08); }
.fr-av .av-svg { width: 100%; height: 100%; }
.fr-row.on .fr-av { box-shadow: 0 0 0 2px var(--green); }
.fr-txt { min-width: 0; }
.fr-txt b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-txt small { color: var(--muted); font-size: 12.5px; }
.fr-acts { display: flex; gap: 6px; }
.fr-acts .btn:disabled { filter: none; opacity: .75; }
.fr-blocked summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 4px 2px; }
.fr-brow { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px; }
.fr-brow code { color: var(--muted); letter-spacing: 1px; }

.report-form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.rp-why { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip { padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1.5px solid transparent; font-weight: 600; font-size: 14px; }
.rp-chip.on { background: rgba(255,71,87,.25); border-color: var(--red); }
.card-acts .btn:disabled { filter: none; opacity: .75; }

.adm-reports { display: flex; flex-direction: column; gap: 8px; }
.adm-rep { padding: 8px 10px; border-radius: 14px; background: rgba(255,71,87,.1); border: 1px solid rgba(255,71,87,.35); display: flex; flex-direction: column; gap: 6px; }
.adm-rep .ar-top { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.adm-rep .aw-av { font-size: 26px; }
.adm-rep b { display: block; font-size: 15px; }
.adm-rep small, .adm-rep code { color: var(--muted); font-size: 12px; }
.adm-rep .ar-note { margin: 0; font-size: 13.5px; font-style: italic; }
.adm-rep .ar-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-add input, .report-form input { font: 600 16px "Fredoka", sans-serif; color: #fff; background: rgba(255,255,255,.07); border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 12px; outline: none; transition: border-color .15s, background .15s; }
.fr-add input:focus, .report-form input:focus { border-color: #a58cff; background: rgba(255,255,255,.11); }
.fr-add input::placeholder { text-transform: none; letter-spacing: 0; }
.report-form .btn { flex: none; }
.report-form > b { font-size: 15px; }

/* ------------------------------------------------------------ Etappe 3: Saison */
.season-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 20px; text-align: left; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, rgba(127,212,255,.45), transparent 60%), linear-gradient(110deg, #1d5c8f, #3a1d6b 70%, #5a2a8f); border: 1px solid rgba(191,240,255,.45); box-shadow: 0 6px 0 #10183d, 0 12px 24px rgba(0,0,0,.3); overflow: hidden; }
.season-card::before { content: "❄ ❅ ❆ ❄ ❅"; position: absolute; right: 44px; top: -2px; font-size: 13px; letter-spacing: 9px; opacity: .35; animation: scSnow 6s linear infinite; pointer-events: none; }
@keyframes scSnow { from { transform: translateY(-4px); } to { transform: translateY(46px); } }
.season-card .sc-ico { font-size: 30px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.season-card .sc-txt { min-width: 0; }
.season-card b { display: block; font-size: 16px; }
.season-card small { display: block; font-size: 12.5px; opacity: .85; margin-top: 2px; }
.season-card .sc-bar { display: block; height: 7px; margin-top: 5px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
.season-card .sc-bar > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #bff0ff, #7fd4ff, #c48bff); }
.season-card .sc-go { font-size: 26px; opacity: .8; }
.season-card .badge-dot { top: 6px; right: 6px; }
.season-card:active { transform: translateY(3px); box-shadow: 0 2px 0 #10183d, 0 6px 14px rgba(0,0,0,.3); }

.season-tabs { margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; }
.season-tabs::-webkit-scrollbar { display: none; }
.season-seg { display: flex; width: max-content; min-width: 100%; }
.season-seg button { flex: 1; white-space: nowrap; }
.season-body { display: flex; flex-direction: column; gap: 10px; }

.ps-soon { text-align: center; padding: 18px 10px; border-radius: 18px; background: rgba(127,212,255,.12); border: 1px solid rgba(127,212,255,.35); }
.ps-soon span { font-size: 40px; display: block; }
.ps-soon b { font-size: 20px; }
.ps-soon p { margin: 4px 0 0; color: var(--muted); }
.ps-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: linear-gradient(110deg, rgba(29,92,143,.6), rgba(58,29,107,.6)); border: 1px solid rgba(191,240,255,.35); }
.ps-tier { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; align-content: center; background: linear-gradient(160deg, #bff0ff, #5fb4ff); color: #10183d; box-shadow: 0 4px 0 #1d4f8f; }
.ps-tier b { font-size: 24px; line-height: 1; }
.ps-tier small { font-size: 10px; font-weight: 700; text-transform: uppercase; }
.ps-prog b { display: block; font-size: 14px; }
.ps-prog .lv-bar { margin: 6px 0 4px; }
.ps-prog small { color: var(--muted); font-size: 12px; }
.ps-crowns { text-align: center; font-size: 20px; }
.ps-crowns b { display: block; font-size: 15px; }
.ps-acts { display: flex; flex-direction: column; gap: 8px; }
.ps-claim { animation: psPulse 1.4s ease-in-out infinite alternate; }
@keyframes psPulse { to { filter: brightness(1.12); transform: translateY(-1px); } }
.ps-premBtn { width: 100%; }
.ps-prem.on { text-align: center; font-weight: 700; padding: 8px; border-radius: 14px; background: rgba(196,139,255,.2); border: 1px solid #c48bff; }
.ps-how { margin: 0; }
.ps-list { display: flex; flex-direction: column; gap: 4px; }
.ps-row { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 6px; align-items: stretch; }
.ps-row.ps-hd span { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
.ps-n { display: grid; place-items: center; font-weight: 700; font-size: 13px; border-radius: 10px; background: rgba(255,255,255,.06); color: var(--muted); }
.ps-row.reached .ps-n { background: linear-gradient(160deg, #bff0ff, #5fb4ff); color: #10183d; }
.ps-row.cur .ps-n { box-shadow: 0 0 0 2px #fff; }
.ps-cell { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 38px; padding: 6px 8px; border-radius: 12px; font-size: 12.5px; font-weight: 600; text-align: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--line); color: var(--muted); line-height: 1.15; }
.ps-cell.prem { background: rgba(196,139,255,.08); }
.ps-cell.item { color: #fff; }
.ps-cell.item.r-epic { border-color: rgba(196,139,255,.6); }
.ps-cell.item.r-legendary { border-color: rgba(255,207,74,.7); background: linear-gradient(120deg, rgba(255,207,74,.14), rgba(196,139,255,.14)); }
.ps-cell.locked { opacity: .55; }
.ps-cell.ready { color: #fff; border-color: #ffd34d; background: rgba(255,211,77,.16); box-shadow: 0 0 12px rgba(255,211,77,.35); }
.ps-cell.got { color: #7bed9f; border-color: rgba(46,213,115,.45); background: rgba(46,213,115,.08); }
.ps-cell i { font-style: normal; font-size: 11px; }
.ps-cell .coin { font-size: 12px; }

.ms .ms-rew { display: flex; align-items: center; gap: 6px; }
.ms-pass { color: #bff0ff; font-size: 11.5px; font-weight: 700; }
.ms-n { color: var(--muted); font-weight: 600; font-size: 11.5px; }
.ms-swap { width: 30px; height: 30px; border-radius: 10px; background: rgba(255,255,255,.1); font-size: 15px; }
.ms-swap:disabled { opacity: .4; }

.ach-show { display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.ach-show small { color: var(--muted); font-size: 12px; }
.ach-chips, .card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px 5px 6px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.badge-chip i { font-style: normal; font-size: 15px; }
.badge-chip.s1 { border-color: rgba(205,127,50,.7); }
.badge-chip.s2 { border-color: rgba(200,210,225,.8); }
.badge-chip.s3 { border-color: rgba(255,207,74,.9); background: rgba(255,207,74,.14); }
.badge-chip.lg { border-color: rgba(127,212,255,.6); background: rgba(127,212,255,.12); }
.card-badges:empty { display: none; }
.ach-list { display: flex; flex-direction: column; gap: 8px; }
.ach { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.ach.s3 { border-color: rgba(255,207,74,.55); background: rgba(255,207,74,.08); }
.ach-ico { font-size: 26px; text-align: center; }
.ach.s0 .ach-ico { filter: grayscale(.8); opacity: .7; }
.ach-txt b { display: flex; align-items: center; gap: 6px; font-size: 14.5px; }
.ach-medals i { font-style: normal; font-size: 13px; opacity: .25; filter: grayscale(1); }
.ach-medals i.on { opacity: 1; filter: none; }
.ach-txt small { display: block; color: var(--muted); font-size: 12px; }
.ach-txt .lv-bar { margin: 5px 0 3px; }
.ach-rew { color: #ffd86b !important; }
.ach-pin { width: 34px; height: 34px; border-radius: 12px; background: rgba(255,255,255,.08); font-size: 16px; filter: grayscale(1); opacity: .5; }
.ach-pin.on { filter: none; opacity: 1; background: rgba(255,90,122,.2); box-shadow: 0 0 0 1.5px #ff5a7a; }
.ach-pin:disabled { opacity: .15; }

.album-set { padding: 12px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.album-set.full:not(.done) { border-color: #ffd34d; box-shadow: 0 0 16px rgba(255,211,77,.25); }
.album-set.done { border-color: rgba(46,213,115,.45); }
.al-head { display: flex; align-items: center; gap: 8px; }
.al-head b { flex: 1; font-size: 15px; }
.al-ico { font-size: 22px; }
.al-n { font-weight: 700; color: var(--muted); font-size: 13px; }
.al-items { display: flex; flex-wrap: wrap; gap: 6px; }
.al-it { width: 38px; height: 38px; display: grid; place-items: center; font-size: 20px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px dashed rgba(255,255,255,.2); filter: grayscale(1); opacity: .4; }
.al-it.own { filter: none; opacity: 1; border-style: solid; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.1); }
.al-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.al-rew { font-size: 12.5px; font-weight: 700; color: #ffd86b; margin-left: auto; }
.al-done { color: #7bed9f; font-weight: 700; font-size: 13px; }

.lg-head { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; text-align: center; }
.lg-head .lv-bar { width: 100%; margin: 4px 0; }
.lg-head small { color: var(--muted); font-size: 12.5px; }
.lg-big { font-size: 54px; line-height: 1.1; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.lg-head b { font-size: 20px; }
.lg-ladder { display: flex; align-items: center; gap: 4px; font-size: 18px; }
.lg-ladder i { width: 14px; height: 2px; background: rgba(255,255,255,.2); }
.lg-step { opacity: .35; filter: grayscale(.8); }
.lg-step.past { opacity: .7; filter: none; }
.lg-step.on { opacity: 1; filter: none; transform: scale(1.3); }
.lg-bh { margin: 6px 0 0; font-size: 16px; }
.lg-board { display: flex; flex-direction: column; gap: 5px; }
.lg-rank { color: var(--muted); font-weight: 600; }
.lg-row { display: grid; grid-template-columns: 26px 32px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 12px; background: rgba(255,255,255,.05); }
.lg-row.me { background: rgba(127,212,255,.16); box-shadow: inset 0 0 0 1.5px #7fd4ff; }
.lg-row.up .lg-pts::after { content: " ⬆"; color: #7bed9f; }
.lg-pos { font-weight: 700; color: var(--muted); text-align: center; }
.lg-av { font-size: 22px; }
.lg-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.lg-pts { font-weight: 700; }

.daily-extra { margin: 6px 0 0; font-weight: 600; color: #bff0ff; }
.se-capped { color: #ffd86b; }
.season-tabs { position: sticky; top: -1px; z-index: 3; padding: 6px 0; margin: -6px 0 4px; background: var(--panel-solid); }
.season-tabs, .season-body, .friends-body { flex: none; }

/* ------------------------------------------------------------ Shop: ruhige Auswahl (Kopfzeile, Vorschau, Hinweis, Knopf unten an fester Stelle) */
.shop-sel:not(.av-mode) { display: flex; flex-direction: column; gap: 6px; }
.shop-sel .ss-head { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; font-size: 18px; }
.shop-sel .ss-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-sel .ss-head .rar { flex: none; }
.shop-sel .ss-head .wish-btn { margin-left: auto; flex: none; }
.shop-sel .ss-extra { display: flex; justify-content: flex-start; }
.shop-sel .ss-extra .card-mini { width: 100%; }
.shop-sel:not(.av-mode) .hint { grid-column: auto; line-height: 1.3; min-height: 2.6em; text-align: left; }
.shop-sel:not(.av-mode) > .btn { width: 100%; min-width: 0; margin-top: auto; min-height: 46px; padding: 11px 14px; grid-column: auto; grid-row: auto; }
.shop-sel.av-mode .av-info .btn { margin-top: auto; }
.shop-sel.av-mode .av-info { align-self: stretch; }
.shop-sel:not(.av-mode) > .btn, .shop-sel.av-mode .av-info .btn { height: 46px; min-height: 46px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-width: 0; }
.shop-sel.av-mode { padding: 10px 12px; align-items: stretch; }
.shop-sel.av-mode .av-info { min-height: 100%; }
.shop-sel:not(.av-mode) { align-items: stretch; }

/* ------------------------------------------------------------ Shop v3: Auswahl überall gleich hoch und kompakt, Vorschau über dem Brett */
.shop-sel, .shop-sel.av-mode { height: 132px; min-height: 0 !important; box-sizing: border-box; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; align-items: stretch; overflow: hidden; }
.shop-sel .ss-head { height: 28px; flex: none; font-size: 17px; line-height: 28px; }
.shop-sel .ss-head .rar { line-height: 1.4; }
.shop-sel .wish-btn { width: 30px; height: 28px; padding: 0; display: grid; place-items: center; font-size: 16px; line-height: 1; }
.shop-sel .hint, .shop-sel:not(.av-mode) .hint { flex: none; margin: 0; font-size: 12.5px; line-height: 1.3; height: 2.6em; min-height: 0; text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-sel > .btn, .shop-sel:not(.av-mode) > .btn { height: 44px; min-height: 44px; margin-top: auto; flex: none; width: 100%; }
.shop-panel.tall { height: 62dvh; }
.shop-preview { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(62dvh + 10px); z-index: 2; pointer-events: none; display: flex; justify-content: center; width: min(340px, calc(100vw - 32px)); animation: shopPrevIn .25s ease-out; }
@keyframes shopPrevIn { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.shop-preview .card-mini { width: 100%; box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.shop-preview .pack-row { display: flex; gap: 10px; padding: 10px 14px; border-radius: 20px; background: rgba(20,12,52,.82); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0,0,0,.45); font-size: 34px; }
.shop-preview .pack-row span { flex: none; line-height: 1.1; }
/* Große Pakete (z. B. Grundpaket mit 18): zwei ruhige Reihen à 9 statt einer gequetschten Zeile */
.shop-preview .pack-row.many { display: grid; grid-template-columns: repeat(9, auto); justify-content: center; gap: 6px 8px; font-size: 26px; max-width: calc(100vw - 32px); }
.shop-preview .av-big { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: rgba(20,12,52,.6); box-shadow: 0 10px 28px rgba(0,0,0,.45); }
.shop-preview .av-big .av-svg { width: 96px; height: 96px; }
.shop-item b { font-size: 12.5px; line-height: 1.15; max-width: 100%; overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-subs .sub-info { display: flex; align-items: center; height: 100%; padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.shop-subs { height: 36px; align-items: center; }

/* Vorschau hängt am Shop-Fenster: Handy schwebend darüber, Desktop fester Platz im Fenster */
.shop-preview { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); }
.shop-preview.alt { display: none; }
@media (min-aspect-ratio: 5/4) {
  .shop-panel > .shop-sel, .shop-panel > .shop-grid, .shop-panel > .shop-fair { order: 2; }
  .shop-preview, .shop-preview.alt { order: 1; position: static; transform: none; left: auto; bottom: auto; width: auto; height: 112px; flex: none; display: flex; align-items: center; justify-content: center; animation: none; border-radius: 18px; background: rgba(255,255,255,.04); border: 1px dashed var(--line); }
  .shop-preview[hidden] { display: none; }
  .shop-preview .card-mini { width: auto; min-width: 70%; box-shadow: none; }
  .shop-preview .pack-row, .shop-preview .av-big { box-shadow: none; }
  .shop-preview .sp-alt { width: 84px; height: 84px; display: grid; place-items: center; font-size: 56px; }
  .shop-preview .sp-alt svg { width: 84px; height: 84px; }
}

/* ------------------------------------------------------------ Lobby: Zusammenfassung + Einstellungs-Fenster */
.lobby-sum { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; text-align: left; color: #fff; }
.lobby-sum .ls-chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lobby-sum .ls-chips i { font-style: normal; font-size: 13px; font-weight: 600; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.08); white-space: nowrap; }
.lobby-sum .ls-btn { flex: none; font-size: 14px; font-weight: 700; padding: 8px 12px; border-radius: 12px; background: rgba(196,139,255,.22); border: 1px solid rgba(196,139,255,.55); white-space: nowrap; }
.lobby-sum:active { transform: scale(.98); }
.opt-body { display: flex; flex-direction: column; gap: 4px; flex: none; }
.opt-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 2px 12px; border-bottom: 1px solid var(--line); }
.opt-row .t-text b { display: block; font-weight: 600; font-size: 15px; }
.opt-row .t-text small { display: block; color: var(--muted); font-size: 12.5px; min-height: 1.3em; }
.opt-row > .seg { display: flex; width: 100%; flex-wrap: nowrap; }
.opt-row > .seg button { flex: 1; padding: 8px 4px; white-space: nowrap; }
.lobby-sheet .power-row { border-bottom: 1px solid var(--line); padding: 10px 2px 12px; }
.lobby-sheet .rules-box { flex: none; }
.pub-sub { margin: 10px 2px 0; font-size: 14px; color: var(--muted); }
.pub-room.bot-table { border-style: dashed; background: rgba(79,139,255,.08); }
.pub-room.bot-table .pr-av { background: rgba(79,139,255,.18); }
.opt-row .t-text small { line-height: 1.35; min-height: 2.7em; }

/* Schnellspiel + Bot-Setup: gleicher ruhiger Aufbau wie die Lobby-Einstellungen (Titel oben, Auswahl volle Breite) */
.setup-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 2px 0 6px; }
.setup-row > b { font-size: 15px; }
.setup-row > .seg, .setup-row > .seg.stakes { display: flex; width: 100%; max-width: none; flex-wrap: nowrap; justify-content: stretch; }
.setup-row > .seg button { flex: 1; padding: 8px 4px; white-space: nowrap; }
#quickBody + .hint, #quickBody .hint { text-align: left; margin: 0; }

/* ------------------------------------------------------------ Konto sichern / zurückholen (src/backup.js) */
.acct-card { padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 8px; }
.acct-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acct-head b { font-size: 17px; }
.acct-badge { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.acct-badge.ok { background: rgba(46, 213, 115, .16); color: #7dffb0; border: 1px solid rgba(46, 213, 115, .4); }
.acct-badge.todo { background: rgba(255, 201, 60, .13); color: #ffd97a; border: 1px solid rgba(255, 201, 60, .35); }
.acct-sub { color: var(--muted); font-size: 13px; line-height: 1.35; }
.acct-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid var(--line); transition: background .15s, transform .1s, opacity .15s; }
.acct-row:hover { background: rgba(255,255,255,.1); }
.acct-row:active { transform: scale(.985); }
.acct-row.busy { opacity: .55; pointer-events: none; }
.acct-ico { font-size: 26px; line-height: 1; filter: drop-shadow(0 2px 2px rgba(0,0,0,.25)); }
.acct-txt b { display: block; font-size: 15.5px; }
.acct-txt small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.3; margin-top: 2px; }
.acct-txt small.done { color: #7dffb0; }
.acct-go { color: var(--muted); font-size: 22px; font-weight: 600; }
.acct-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 8px; }
.acct-foot .link { font-size: 13.5px; }
.acct-body { display: flex; flex-direction: column; gap: 12px; }
.acct-p { margin: 0; line-height: 1.4; font-size: 15px; }
.acct-p.muted { color: var(--muted); font-size: 13.5px; }
.acct-p.center { text-align: center; }
.acct-note { padding: 10px 12px; border-radius: 14px; background: rgba(61, 139, 253, .12); border: 1px solid rgba(61, 139, 253, .3); font-size: 13.5px; line-height: 1.4; }
.acct-note.warn { background: rgba(255, 201, 60, .11); border-color: rgba(255, 201, 60, .35); }
.acct-note.big { font-size: 15px; font-weight: 600; }
.acct-code { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-radius: 18px; background: #fff; color: #14102e; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.acct-code span { font-weight: 700; font-size: 19px; text-align: center; padding: 8px 4px; border-radius: 10px; background: #efeaff; overflow-wrap: anywhere; }
.acct-code span i { font-style: normal; font-size: 11px; font-weight: 600; color: #8f84c4; margin-right: 6px; vertical-align: 2px; }
.acct-code span.num { grid-column: 1 / -1; background: #ffe9a8; font-size: 24px; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.acct-qr { width: min(250px, 68vw); aspect-ratio: 1; margin: 0 auto; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.acct-qr svg { display: block; width: 100%; height: 100%; }
.acct-left { text-align: center; font-weight: 600; color: #ffd97a; font-variant-numeric: tabular-nums; margin-top: -4px; }
.acct-done { font-size: 64px; text-align: center; line-height: 1; animation: toastIn .5s cubic-bezier(.3,1.5,.5,1); }
.acct-who { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid var(--line); }
.acct-av { width: 56px; height: 56px; flex: none; display: grid; place-items: center; font-size: 34px; }
.acct-av .av-svg { width: 100%; height: 100%; }
.acct-who b { display: block; font-size: 19px; }
.acct-who small { color: var(--muted); font-size: 13px; }
.acct-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.acct-or::before, .acct-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.acct-field { display: flex; flex-direction: column; gap: 6px; }
.acct-field span { font-size: 13px; color: var(--muted); font-weight: 600; }
.acct-field input { font: 600 17px "Fredoka", sans-serif; color: #fff; background: rgba(255,255,255,.07); border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 12px; outline: none; width: 100%; transition: border-color .15s, background .15s; }
.acct-field input:focus { border-color: #a58cff; background: rgba(255,255,255,.11); }
.acct-msg { margin: -4px 0 0; font-size: 13.5px; color: var(--muted); }
.acct-msg.warn { color: #ffd97a; }
.acct-msg.bad { color: #ff8a95; }
.home-foot { flex-wrap: wrap; row-gap: 0; column-gap: 18px; }