/* Oberfläche nach dem Original-Client. Anordnung nach Bildschirmfotos, Grafiken aus dem Dekompilat (web/ui/),
   Seitenleiste nach den archivierten Stylesheets von freggers.de (November 2020). */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: #fff; color: #000; font: 12px/1.35 Arial, Helvetica, sans-serif; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid #ffcc33; outline-offset: 1px; }
[hidden] { display: none !important; }

/* Links die Bühne, rechts die Seitenleiste (215 px), darunter die Fußzeile */
html, body { overflow: hidden; }
/* Breite, Höhe und Vergrößerung setzt client.js (fit) passend zum Fenster */
#app { display: grid; grid-template-columns: minmax(0, 1fr) 215px; grid-template-rows: minmax(0, 1fr) 20px; width: 100%; height: 100%; }
#stage { position: relative; overflow: hidden; background: #1c1c1c; grid-column: 1; grid-row: 1; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; }
#foot { grid-column: 1 / 3; grid-row: 2; font-size: 10px; line-height: 20px; text-align: center; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ladebild wie im Original (LoaderGfx / MyLoader.as): graue Fläche über der Bühne, darauf die Freggers-Silhouette, in der eine dunkle
   Füllung mit Wellenkante von unten nach oben steigt. Die Teile sind die Vektorformen des Clients (ui/lader/). Der echte Ladestand
   liegt hier nicht vor – die Füllung läuft zeitgesteuert und springt auf voll, sobald der Raum da ist. */
#loader { position: absolute; inset: 0; z-index: 1; background: #333; box-shadow: inset 0 0 40px rgba(0, 0, 0, .65); pointer-events: none; }
.ld { position: absolute; left: 50%; top: 50%; width: 316px; height: 218px; transform: translate(-50%, -50%); filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .75)); }
.ld-sil, .ld-fill { position: absolute; left: 1.5px; top: 1.5px; width: 313.4px; height: 215px; }
.ld-sil { background: url(ui/lader/sil.png) 0 0 / 100% 100% no-repeat; }
.ld-fill { overflow: hidden; -webkit-mask: url(ui/lader/sil.png) 0 0 / 100% 100% no-repeat; mask: url(ui/lader/sil.png) 0 0 / 100% 100% no-repeat; }
.ld-fill i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #3c3c3c; animation: ldfill 2.4s cubic-bezier(.2, .7, .3, 1) forwards; }
.ld-fill i::before, .ld-fill i::after { content: ''; position: absolute; left: 0; bottom: calc(100% - 1px); }
.ld-fill i::before { width: 774.4px; height: 32.55px; background: url(ui/lader/welle1.png) 0 0 / 100% 100% no-repeat; animation: ldwelle1 2.6s linear infinite; }
.ld-fill i::after { width: 639.35px; height: 20.75px; background: url(ui/lader/welle2.png) 0 0 / 100% 100% no-repeat; animation: ldwelle2 1.9s linear infinite; }
.ld-linie { position: absolute; inset: 0; background: url(ui/lader/linie.png) 0 0 / 100% 100% no-repeat; }
#loader.done .ld-fill i { animation: none; height: 110%; }
@keyframes ldfill { to { height: 88%; } }
@keyframes ldwelle1 { from { transform: translateX(-193.6px); } to { transform: translateX(0); } }
@keyframes ldwelle2 { from { transform: translateX(0); } to { transform: translateX(-134.6px); } }
@media (prefers-reduced-motion: reduce) { .ld-fill i::before, .ld-fill i::after { animation: none; } }

/* Kontoanzeige oben rechts: Levelzahl im Stern, Fortschrittsbalken mit weißem Rand, darunter Kröten und Cash */
#konto { position: absolute; right: 8px; top: 8px; width: 146px; pointer-events: none; z-index: 2; }
#lvlrow { position: relative; height: 34px; }
#lvl { position: absolute; left: 0; top: -2px; width: 38px; height: 38px; z-index: 1; color: #2a1608; font: bold 22px/38px Arial, Helvetica, sans-serif; text-align: center; background: #fff;
       clip-path: polygon(50% 0, 60% 14%, 75% 7%, 77% 23%, 93% 25%, 86% 40%, 100% 50%, 86% 60%, 93% 75%, 77% 77%, 75% 93%, 60% 86%, 50% 100%, 40% 86%, 25% 93%, 23% 77%, 7% 75%, 14% 60%, 0 50%, 14% 40%, 7% 25%, 23% 23%, 25% 7%, 40% 14%); }
#xp { position: absolute; left: 26px; right: 0; top: 5px; height: 24px; background: #5b3716; border: 3px solid #fff; border-radius: 9px; overflow: hidden; }
#xpfill { width: 0%; height: 100%; background: linear-gradient(90deg, #4aa5c1, #b9deeb); }
#money { display: flex; justify-content: space-between; margin-top: 4px; }
.money { width: 70px; height: 29px; padding: 0 7px 0 30px; color: #fff; font: bold 12px/29px Arial, Helvetica, sans-serif; text-align: right; background: url(ui/box_coins.png) left center / 70px 29px no-repeat; }   /* aus den Vektorformen des Clients vierfach gerendert */
.money.cash { height: 31px; line-height: 31px; margin-top: -1px; background-image: url(ui/box_cash.png); background-size: 70px 31px; }

/* Raumbanner oben in der Mitte */
/* Raumbanner nach RoomBanner.as: weißes Feld mit Titel (16 px fett) und Thema (14 px, in Anführungszeichen); in Wohnungen
   davor der Kopf des Besitzers, im Feld Zahnrad und Daumen-Knopf, rechts daneben das Feld "Räume". */
#roombanner { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); max-width: 70%; display: flex; align-items: stretch; gap: 7px; z-index: 2; pointer-events: none;
              font: bold 14px Arial, Helvetica, sans-serif; color: #333; }
#roombanner button { pointer-events: auto; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
#rb-box { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: #fff; border-radius: 9px; box-shadow: 0 1px 4px rgba(0, 0, 0, .55); min-width: 0; }
#roombanner.home #rb-box { padding: 6px; }
#rb-text { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 1px 6px; white-space: nowrap; }
#roomtitle { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#roombanner.home #roomtitle { font-size: 16px; }
#roomtopic { font-weight: normal; font-style: italic; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
#rb-prefs { align-self: flex-start; width: 15px; height: 15px; background: url(ui/banner_gear_1.png) no-repeat; }
#rb-prefs:hover { background-image: url(ui/banner_gear_2.png); }
#rb-like { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px !important; background: #c9b78f; border-radius: 6px; font-size: 16px !important; }
#rb-like:hover { background: #d8c79f; }
#rb-like.done { background: #cfcabd; cursor: default; }
#rb-like.done img { filter: grayscale(1); opacity: .8; width: 26px; height: 29px; margin: 0 3px; }
#rb-owner { align-self: center; width: 32px; height: 32px; background: #fff; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 0, 0, .55); overflow: hidden; }
#rb-owner canvas { width: 32px; height: 32px; display: block; }
#rb-rooms { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 52px; padding: 3px 6px !important; background: #fff; border-radius: 9px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .55); font-size: 11px !important; color: #555 !important; }
#rb-rooms:hover { background: #eef7fb; }
/* Wohnungsliste in der Seitenleiste */
.home-row { align-items: flex-start; }
.home-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 11px; }
.home-info i { color: #666; overflow-wrap: anywhere; }
.home-info span { color: #888; }

/* Chatnachrichten: oben links gestapelt, neueste unten; Arial, Name fett (FormattedMessage.as) */
#msgs { position: absolute; left: 6px; top: 8px; width: min(38%, 330px); display: flex; flex-direction: column; align-items: flex-start; gap: 3px; z-index: 2; pointer-events: none; }
.msg { transform-origin: 0 0; display: flex; align-items: flex-start; gap: 5px; max-width: 100%; padding: 2px 4px 2px 3px; border-radius: 10px; background: rgba(238, 238, 238, .92); color: #3c3c3c; border: 1px solid #bdbdbd;
       font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); transition: opacity .4s; pointer-events: auto; }
.msg > span { padding: 1px 0; min-width: 0; }
.msg.by-player > span { cursor: pointer; }
.msg b { font-weight: bold; }
.msg .portrait.head { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 1px solid #bdbdbd; }
.msg-x { flex: none; width: 13px; height: 13px; margin: 2px 0 0 2px; padding: 0; border: 0; background: url(ui/close.png) center / contain no-repeat; opacity: .55; }
.msg-x:hover { opacity: 1; }
.msg.think { font-style: italic; border-style: dashed; }
.msg.shout { border: 2px solid #c40000; font-weight: bold; }
.msg.srv { padding-left: 8px; background: #f0a626; border-color: #d18a12; color: #3c2a00; }
.msg.out { opacity: 0; }
.emo-float { position: absolute; transform: translate(-50%, -100%) scale(1.5); transform-origin: bottom center; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .75)); pointer-events: none; z-index: 1; }

/* Namensschild beim Überfahren einer Figur oder eines Ausgangs */
#tooltip { position: absolute; transform: translate(-50%, -100%); padding: 2px 7px; background: #ffffe1; color: #222; border: 1px solid #b9b98a; border-radius: 4px;
           font: bold 11px Arial, Helvetica, sans-serif; white-space: nowrap; box-shadow: 1px 1px 3px rgba(0, 0, 0, .5); pointer-events: none; z-index: 2; }

#dailybtn { position: absolute; right: 150px; top: 10px; z-index: 3; width: 30px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; }
#dailybtn img { width: 100%; height: 100%; }
#dailybtn:hover { filter: brightness(1.15); }
#dailybox { position: absolute; right: 150px; top: 46px; z-index: 4; width: 250px; padding: 10px 12px; border-radius: 10px; background: #fffdf4; border: 2px solid #5b3d22; color: #33230f; font: 12px Arial, sans-serif; box-shadow: 2px 3px 8px rgba(0, 0, 0, .4); }
#dailybox h3 { margin: 0 0 4px; font-size: 14px; }
#dailybox p { margin: 0 0 8px; }
.daily-step { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.daily-step img { flex: none; width: 34px; height: 34px; }
.daily-step b { margin-left: auto; white-space: nowrap; }
.daily-step.ok { opacity: .55; }
.daily-tip { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #c9b48f; font-size: 11px; }
.daily-tip img { flex: none; width: 30px; height: 30px; }
/* Figurenmenü (nach dem Handbuch-Ausschnitt: runder Kopf, Name, rotes Kreuz, darunter die Einträge) */
#pmenu { position: absolute; width: 184px; z-index: 3; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); }
.pm-head { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 2px; background: #9aaba6; border-radius: 14px 9px 9px 14px; color: #1d2a27; font: bold 13px Arial, Helvetica, sans-serif; }
#pm-icon { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid #c9d4d0; }
#pm-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
#pm-close { flex: none; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: #d8402c url(ui/close.png) center / 10px no-repeat; }
#pmenu > button { display: flex; justify-content: space-between; align-items: center; gap: 6px; white-space: nowrap; width: calc(100% - 26px); margin: 3px 0 0 26px; padding: 3px 4px 3px 12px; border: 1px solid #9aaba6; background: #fff; color: #1d2a27; font-size: 12px; }
#pmenu > button:hover { background: #fff3c4; }
#pmenu > button i { flex: none; font-style: normal; width: 15px; height: 15px; border-radius: 50%; background: #7a9f93; color: #fff; font: bold 10px/15px Arial, sans-serif; text-align: center; }
#pmenu > button + button { margin-top: -1px; }
#pmenu > button[hidden] { display: none; }
#pmenu > button:disabled { color: #8a9692; background: #f1f4f3; cursor: default; }

/* Steuerleiste: Maße wie ControlBarGfx (657x98, Leiste beginnt bei y=23; rechtsbündig wie im Original). Sie ist aus den
   Vektorformen des Originals neu zusammengesetzt (funde/tools/leiste_scharf.js), damit sie vergrößert scharf bleibt:
   Balken und Tonpfeil als CSS, Symbole vierfach gerendert, Beschriftung als Schrift (Arial Black wie im Client). */
#bar { position: absolute; right: 0; bottom: 0; width: 655px; height: 98px; z-index: 2; }
#bar::before { content: ''; position: absolute; left: 0; right: 0; top: 23px; bottom: 0; background: #000; border-top-left-radius: 22px; }
#sndtoggle::before { content: ''; position: absolute; left: 10px; top: 11px; border: solid transparent; border-width: 11px 9px 11px 0; border-right-color: #fff; }
#sndtoggle { position: absolute; left: 4px; top: 38px; width: 26px; height: 46px; padding: 0; border: 0; background: transparent; }
#sndtoggle:hover { background: radial-gradient(closest-side, rgba(255, 255, 255, .25), transparent); }
#chat { position: absolute; left: 42px; top: 42px; width: 222px; height: 39px; margin: 0; background: url(ui/bar/feld.png) 0 0 / 100% 100% no-repeat; }
#text { width: 100%; height: 100%; padding: 0 14px 4px; border: 0; background: transparent; color: #3c3c3c; font: bold 12px Arial, Helvetica, sans-serif; }
#text::placeholder { color: #9a9a9a; }
#text:focus { outline: none; }
#chat:focus-within { filter: drop-shadow(0 0 3px #ffcc33); }
.hot { position: absolute; top: 0; height: 98px; padding: 0; border: 0; background: transparent no-repeat; color: #fff; font: 900 11px/1 'Arial Black', 'Arial Bold', Arial, sans-serif; }
.hot::after { content: attr(aria-label); position: absolute; left: 50%; top: 71px; transform: translateX(-50%); white-space: nowrap; }
.hot:hover { filter: brightness(1.15) drop-shadow(0 0 4px rgba(255, 255, 255, .45)); }
.hot[data-act=hilfe] { background-image: url(ui/bar/hilfe.png); background-position: 0 0; background-size: 59px 63px; }
.hot[data-act=bauen] { background-image: url(ui/bar/bauen.png); background-position: 0 14px; background-size: 46px 46px; }
.hot[data-act=shopping] { background-image: url(ui/bar/shopping.png); background-position: 0 14px; background-size: 51px 44px; }
.hot[data-act=karte] { background-image: url(ui/bar/karte.png); background-position: 0 13px; background-size: 50px 46px; }
.hot[data-act=zuhause] { background-image: url(ui/bar/zuhause.png); background-position: 0 8px; background-size: 54px 52px; }
.hot[data-act=tasche] { background-image: url(ui/bar/tasche.png); background-position: 0 11px; background-size: 60px 47px; }
.hot:active { transform: translateY(1px); }
/* Toneinstellungen: das aufgeklappte Feld ist ein Originalteil (121x76, mit Dreieck und zwei runden Schaltern).
   Es legt sich über das linke Ende der Leiste; für "aus" gibt es eigene, durchgestrichene Symbole. */
#soundpanel { position: absolute; right: 625px; bottom: 0; width: 121px; height: 76px; background: url(ui/soundpanel.png) no-repeat; z-index: 3; }
#soundpanel button { position: absolute; padding: 0; border: 0; background: transparent center no-repeat; }
#snd-close { left: 6px; top: 20px; width: 24px; height: 36px; }
#snd-music { left: 37px; top: 23px; width: 28px; height: 28px; border-radius: 50%; }
#snd-fx { left: 74px; top: 23px; width: 28px; height: 28px; border-radius: 50%; }
#soundpanel button:hover { background-color: rgba(255, 255, 255, .25); }
#snd-music:not(.on) { background: #fff url(ui/snd_music_2.png) center no-repeat; }
#snd-fx:not(.on) { background: #fff url(ui/snd_fx_2.png) center no-repeat; }

/* Überlagerungen */
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); z-index: 3; }
.overlay[hidden] { display: none; }
.closer { position: absolute; padding: 0; border: 0; background: transparent; }
.closer:hover { background: rgba(255, 255, 255, .25); border-radius: 4px; }

#metroplan { position: relative; width: 651px; height: 489px; flex: none; background: url(ui/metroplan_hd.png) 0 0 / 651px 489px no-repeat; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .6)); }
.area { position: absolute; padding: 0; border: 0; cursor: pointer; background: url(ui/metroplan_hd.png) 0 0 / 651px 489px no-repeat; -webkit-mask: radial-gradient(closest-side, #000 78%, transparent); mask: radial-gradient(closest-side, #000 78%, transparent); transition: transform .5s cubic-bezier(.16, 1, .3, 1); z-index: 1; }
.area.layer { background-position: 0 0; background-size: 100% 100%; -webkit-mask: none; mask: none; }
.area:hover { z-index: 3; }
.area:not(.current):hover { transform: scale(1.2); }
#maplines { position: absolute; inset: 0; width: 651px; height: 489px; pointer-events: none; z-index: 2; }
#maplines line { stroke: #fff; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1 14; }
#mapme { position: absolute; z-index: 4; pointer-events: none; transform: translate(-50%, -50%); transition: transform .5s cubic-bezier(.16, 1, .3, 1); line-height: 0; padding: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
#mapme canvas { width: 26px; height: 26px; border-radius: 50%; }
#mapme.big { transform: translate(-50%, -50%) scale(1.1); }
@media (prefers-reduced-motion: reduce) { .area, #mapme { transition: none; } }

/* Raumliste eines Gebiets – Farben nach MyMenuContent / DialogBackground */
#arealist { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 250px; max-height: 400px; overflow: auto;
            background: #afc8bc; border: 2px solid #fff; border-radius: 8px; color: #24463f; box-shadow: 0 4px 14px rgba(0, 0, 0, .6); }
#arealist h3 { margin: 0; padding: 7px 10px; background: #7a9f93; color: #fff; font-size: 14px; position: sticky; top: 0; }
#arealist button { display: flex; justify-content: space-between; width: 100%; padding: 5px 10px; border: 0; border-bottom: 1px solid #9db8ab; background: transparent; color: inherit; text-align: left; font-weight: bold; }
#arealist button:hover { background: #fff; }
#arealist button.current { background: #d6e4dc; }
#arealist small { font-weight: normal; }

#helpbox { position: relative; width: 480px; max-width: 92%; padding: 22px 26px; background: #fff; color: #2e6b62; border: 3px solid #afc8bc; border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); }
#helpbox h2 { margin: 0 0 10px; font-size: 18px; text-align: center; }
#helpbox ul { margin: 0 0 12px; padding-left: 18px; color: #3c3c3c; }
#helpbox li { margin-bottom: 4px; }
#helpbox code { background: #e9f0ec; padding: 0 4px; border-radius: 3px; }
#helpbox .closer { background: url(ui/closebig.png) center / contain no-repeat; }
#helpbox label { font-size: 12px; color: #6b7d78; }
#smileys { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
#smileys button { padding: 4px; border: 1px solid #afc8bc; border-radius: 6px; background: #f4f8f6; line-height: 0; }
#smileys button:hover { background: #fff3c4; }

/* Ausgangs-Editor – Farben wie die Raumliste */
#exitedit { position: absolute; right: 12px; top: 40px; width: 230px; padding: 0 0 10px; background: #afc8bc; border: 2px solid #fff; border-radius: 8px; color: #24463f; box-shadow: 0 4px 14px rgba(0, 0, 0, .6); z-index: 4; }
#exitedit[hidden], #exitedit [hidden] { display: none; }
#exitedit h3 { margin: 0 0 8px; padding: 7px 10px; background: #7a9f93; color: #fff; font-size: 14px; border-radius: 6px 6px 0 0; }
#exitedit label { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 3px 10px; font-weight: bold; font-size: 12px; }
#exitedit select { flex: 1; min-width: 0; padding: 3px; font: 12px Arial, sans-serif; }
#exitedit .row { display: flex; gap: 6px; padding: 8px 10px 0; }
#exitedit button { flex: 1; padding: 5px; border: 1px solid #5d8478; border-radius: 6px; background: #fff; color: #24463f; font-weight: bold; font-size: 12px; }
#exitedit button:hover { background: #fff3c4; }

/* ---------- Seitenleiste ---------- */
#side { position: relative; grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-height: 0; background: #fff; color: #000; font-size: 12px; border-left: 1px solid #ddd; }
#sb-head { flex: none; height: 76px; display: flex; align-items: center; justify-content: center; background: #33c1d8 radial-gradient(circle at 30% 20%, #6fdcec, #33c1d8 70%); }
#sb-nav { position: relative; flex: none; padding: 7px 8px 6px; }
#sb-navbtn { display: flex; align-items: center; gap: 7px; width: 100%; height: 30px; padding: 0 0 0 6px; border: 1px solid #e0a800; border-radius: 8px; background: linear-gradient(#ffe45c, #ffc81a); color: #3a2a00; font: bold 13px Arial, Helvetica, sans-serif; text-align: left; overflow: hidden; }
#sb-navbtn:hover { background: linear-gradient(#fff0a0, #ffd23a); }
#sb-navicon { flex: none; max-width: 28px; max-height: 24px; }
#sb-navlabel { flex: 1; }
#sb-navbtn .arrow { flex: none; align-self: stretch; width: 28px; background: #e0469a url(ui/site/arrow_down.png) center no-repeat; border-left: 1px solid #b92f7c; }
#sb-menu { position: absolute; left: 8px; right: 8px; top: 38px; margin: 0; padding: 3px; list-style: none; background: #fff; border: 1px solid #c8c8c8; border-radius: 8px; box-shadow: 2px 3px 8px rgba(0, 0, 0, .35); z-index: 6; }
#sb-menu button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 6px; border: 0; border-radius: 5px; background: transparent; color: #4f7577; font-weight: bold; text-align: left; }
#sb-menu button:hover { background: #d8e7e7; color: #000; }
#sb-menu img { width: 26px; height: 22px; object-fit: contain; }
#sb-body { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 8px; }

#side h1 { text-align: center; margin: 0 0 5px; padding: 8px; background: #e6e6e6; font-size: 18px; font-weight: bold; }
#side h2 { text-align: center; margin: 0 0 5px; padding: 8px; background: #e6e6e6; font-size: 12px; font-weight: bold; }
#side h3 { font-size: 12px; margin: 0; padding: 2px 0; }
#side a { color: #4f7577; text-decoration: none; }
.par { position: relative; margin: 0; padding: 8px; }
.note { color: #777; font-size: 11px; }
.info-box { background: #eaeaea; margin: 0 8px 10px; padding: 10px; }
.form-box { background: #d8e7e7; margin: 0 8px 8px; padding: 10px; border-radius: 8px; }
.form-box input.text { width: 100%; padding: 4px; border: 1px solid #bbb; font: 12px Arial, Helvetica, sans-serif; }
.form-box input.text:hover, .form-box input.text:focus { border-color: #4f7577; }
.fclear { clear: both; }
.action-link { font-size: 90%; font-weight: bold; }
.action-link::before { content: '▸ '; }
.go-button-small { flex: none; width: 25px; height: 25px; border-radius: 50%; background: #f7a823; color: #fff; font: bold 11px/25px 'Arial Black', Gadget, sans-serif; text-align: center; cursor: pointer; }
.go-button-small:hover { background: #ffc24d; }
.go-button { width: 33px; height: 32px; border-radius: 50%; background: #f7a823; border: 2px solid #c98a00; box-sizing: border-box; color: #fff; font: bold 14px/28px 'Arial Black', Gadget, sans-serif; text-align: center; cursor: pointer; }
.go-button:hover { background: #ffc24d; }
.pr-avatar-box { position: relative; }
.user-go-button { position: absolute; right: 6px; top: 6px; }
.portrait { display: block; }
.portrait.body { width: 64px; height: 109px; }

/* Start: Figur, Kleidung, Tasche (inventory.css) */
#iv-avatar { margin: 0 0 5px 8px; width: 191px; height: 109px; }
.iv-avatar { float: left; position: relative; overflow: hidden; width: 64px; height: 109px; cursor: pointer; }
#av-clothes { float: right; background: #b1a3c2; border-radius: 6px; margin: 10px 0 5px; padding: 3px 0 8px 8px; width: 114px; }
#av-clothes.av-c-boy { background: #94bddd; }
#av-clothes h3 { width: 105px; color: #000; font-size: 13px; font-weight: bold; margin: 0 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#iv-bags { clear: both; background: #c8ab88; border-radius: 6px; margin: 0 0 10px 8px; width: 191px; }
#iv-bags h2 { background: #7e624c; color: #fff; font-size: 14px; border-radius: 6px 6px 0 0; margin: 0; }
.iv-bag-container { padding: 4px 0 4px 7px; }
.iv-item { float: left; position: relative; margin: 1px 0 0 1px; border: 2px solid #fff; width: 30px; height: 30px; background: #fff; }
.iv-bag-tip { font-size: 11px; padding: 0 6px 6px; color: #675034; font-weight: bold; }
.fl-select-box { background: #74cde3; position: relative; height: 33px; width: 191px; margin: 0 0 0 8px; padding: 4px 2px; border-radius: 8px; }
.fl-select-desc { padding: 0 8px; height: 25px; line-height: 25px; font-size: 15px; font-weight: bold; }
.fl-select-switch { width: 86px; height: 23px; position: absolute; top: 5px; right: 5px; display: flex; }
.fl-switch-button { flex: 1; height: 23px; line-height: 21px; text-align: center; font-size: 11px; color: #444; border: 1px solid #999; background: linear-gradient(#fff, #d8d8d8); cursor: pointer; }
.fl-switch-button.bt-all { border-right: 0; border-radius: 4px 0 0 4px; }
.fl-switch-button.bt-online { border-left: 0; border-radius: 0 4px 4px 0; }
.fl-switch-button.fl-selected { border-color: #a43586; background: linear-gradient(#f06ab4, #d83a96); color: #fff; text-shadow: 1px 1px 1px #666; cursor: default; }
.fl-empty { color: #555; }

/* Profil (main.css: .pr-avatar-box usw.) */
.pr-avatar-box { background: #b1a3c2; border-radius: 12px; padding: 6px 8px; margin: 0 8px 6px; }
.pr-avatar-box .login-string { font-size: 14px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; }
.pr-where { font-size: 10px; min-height: 12px; }
.pr-row { display: flex; margin: 4px 0 6px; }
.pr-avatar-icon { flex: none; background: #fff; width: 71px; min-height: 118px; border-radius: 6px; border: 3px solid #fff; padding: 2px 0 4px; }
.pr-avatar-info { flex: 1; padding-left: 8px; }
.pr-avatar-stat { background: #e5dcef; border-radius: 8px; padding: 4px 6px; }
.pr-stat { display: flex; align-items: center; justify-content: space-between; height: 21px; font-size: 11px; }
.pr-stat img { max-width: 18px; max-height: 18px; }
.pr-avatar-box a.action-button { display: block; font-size: 11px; font-weight: bold; color: #746682; background: #fefcef; border: 3px solid #dccfe9; border-radius: 6px; padding: 4px 6px; margin: 0 0 3px; }
.pr-avatar-box a.action-button:hover { color: #000; background: #fdf7d0; border-color: #746682; }
.pr-ab-boy { background: #94bddd; }
.pr-ab-boy .pr-avatar-stat { background: #d6e9f9; }
.pr-ab-boy a.action-button { border-color: #d6e9f9; color: #52738c; }
.pr-ab-boy a.action-button:hover { border-color: #52738c; }
.pr-home { display: flex; align-items: center; gap: 8px; margin: 0 8px; padding: 5px 8px; background: #f3ead6; border: 1px solid #e0cfa8; border-radius: 8px; font-weight: bold; }
.sb-search-user { display: flex; gap: 8px; margin: 8px; padding: 4px 4px 4px 8px; cursor: pointer; background: #f1f1f1; border: 2px solid #f1f1f1; border-radius: 8px; font-size: 11px; }
.sb-search-user:hover { border-color: #999; }
.sb-search-user h3 { width: 105px; overflow: hidden; text-overflow: ellipsis; font-size: 13px; margin: 5px 0 10px; }

/* Log und Radio am unteren Rand */
#sb-foot { flex: none; display: flex; height: 22px; background: #33c1d8; }
#sb-foot button { flex: 1; padding: 0; border: 0; border-left: 1px solid #5fd3e6; background: transparent; color: #fff; font: bold 10px/22px Arial, Helvetica, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
#sb-foot button::before { content: '▲ '; font-size: 8px; }
#sb-foot button.open::before { content: '▼ '; }
#sb-foot button:hover { background: #1fa9c0; }
#logpanel { position: absolute; left: 0; right: 0; bottom: 22px; height: 45%; display: flex; flex-direction: column; background: #fff; border-top: 2px solid #33c1d8; box-shadow: 0 -3px 8px rgba(0, 0, 0, .2); z-index: 5; }
#logpanel h2 { flex: none; margin: 0; }
#log { flex: 1; overflow: auto; padding: 6px 8px; font-size: 11px; color: #3c3c3c; }
#log p { margin: 0 0 3px; overflow-wrap: anywhere; }
#log .sys { color: #888; }
#log b { color: #4f7577; }

/* Startseite – Maße, Farben und Schrift nach root.css und dem Seitenstil der Original-Landingpage */
@font-face { font-family: 'Luckiest Guy'; src: url(ui/start/LuckiestGuy-Regular.ttf) format('truetype'); font-display: swap; }
#login { position: fixed; inset: 0; overflow: auto; padding: 68px 8px 20px; background: #000; color: #ccc; z-index: 5; font: 16px Arial, Helvetica, sans-serif; }
#login.hidden { display: none; }
.lp { position: relative; width: 800px; margin: 0 auto; text-align: left; }
.lp-logo { position: absolute; top: -55px; left: -6px; z-index: 2; }

#lp-login { position: absolute; top: -53px; right: 0; width: 500px; color: #afafaf; }
.lp-login-title { padding: 0 0 3px 5px; font-size: 80%; margin-top: 10px; }
.lp-login-row { display: flex; gap: 5px; align-items: center; }
#name, #password { width: 150px; height: 27px; padding: 0 5px; border: 3px solid #333; border-radius: 8px; background: #fff; color: #222; font: 13px Arial, sans-serif; outline: 0; }
#name:hover, #name:focus, #password:hover, #password:focus { border-color: #fc0; }
#lp-msg { padding: 3px 0 0 5px; min-height: 16px; font-size: 80%; color: #fc0; }
.admin-only { display: none; }
body.is-admin .admin-only { display: inline; }
#logout { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
#lp-login button { padding: 2px 15px; border: 3px solid #333; border-radius: 10px; background: #666; color: #fff; font-size: 13px; font-weight: bold; white-space: nowrap; }
#lp-login button:hover { border-color: #f5dd01; background: #fc0; color: #b930f0; }
.lp-login-info { padding: 3px 0 0 5px; font-size: 70%; }

#lp-shot { position: relative; padding-top: 45px; margin-bottom: -15px; width: 800px; height: 620px; }
#lp-shot img { display: block; border-radius: 0 0 16px 0; }
#play { position: absolute; top: 20px; right: -30px; padding: 0; border: 0; background: transparent; line-height: 0; transition: transform .15s; }
#play:hover { transform: scale(1.06) rotate(-3deg); }

.lp-box { background: #fff; color: #444; font-size: .95em; border-radius: 16px; }
#lp-register { position: absolute; left: -4px; top: 66px; width: 262px; padding: 16px; text-align: center; font-family: 'Luckiest Guy', Arial, Helvetica, sans-serif; }
#lp-register h1 { margin: 10px 20px 20px; color: #9900e8; font: normal 31px/1 'Luckiest Guy', Arial, Helvetica, sans-serif; }
#genders { display: flex; justify-content: center; gap: 10px; }
#genders label { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
#genders input { position: absolute; opacity: 0; }
#genders .pic { display: block; padding: 5px; margin-bottom: 10px; border: 2px solid #fff; border-radius: 10px; line-height: 0; }
#genders label:hover .pic { border-color: #8e8f8b; }
#genders label:has(input:checked) .pic { border-color: #9900e8; }
#genders label:has(input:focus-visible) .pic { outline: 2px solid #fc0; }
#genders .btn { display: block; width: 92px; height: 26px; background: url(ui/start/gender_buttons.png) 0 0 no-repeat; }
#genders .female:hover .btn, #genders .female:has(input:checked) .btn { background-position: 0 -26px; }
#genders .male .btn { background-position: 0 -52px; }
#genders .male:hover .btn, #genders .male:has(input:checked) .btn { background-position: 0 -78px; }
#lp-arrow { position: absolute; top: 110px; left: 300px; pointer-events: none; animation: lp-arrow 1.2s ease-in-out infinite alternate; }
@keyframes lp-arrow { from { left: 300px; } to { left: 280px; } }
@media (prefers-reduced-motion: reduce) { #lp-arrow { animation: none; } }

#lp-note { position: absolute; right: -20px; bottom: 0; width: 450px; padding: 4px 16px 8px; }
#lp-note h2 { margin: 14px 0 8px; color: #7c7c7c; font-size: 120%; text-align: center; }
#lp-note p { margin: 0 0 10px; font-size: 14px; }
.lp-footer { padding: 35px 0 0; margin-top: 12px; text-align: center; font-size: 75%; color: #afafaf; }

@media (max-width: 900px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  #side { display: none; }
  #foot { grid-column: 1; }
}

/* ---------- Kleiderschrank ---------- */
.wd-preview { margin: 0 9px 8px; height: 118px; border-radius: 6px; background: #ffd9ec; display: flex; justify-content: center; align-items: flex-end; }
.wd-preview.boy { background: #d5e9ff; }
.wd-preview .portrait.body { width: 64px; height: 109px; }
.wd-row { display: flex; align-items: center; gap: 4px; margin: 6px 9px 2px; font-size: 11px; }
.wd-label { width: 50px; font-weight: bold; color: #555; }
.wd-name { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-arrow { width: 22px; height: 20px; padding: 0; border: 1px solid #bbb; border-radius: 4px; background: #f4f4f4; font-size: 9px; cursor: pointer; color: #444; }
.wd-arrow:hover { background: #e2efff; border-color: #6b9bd6; }
.wd-colors { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 9px 4px 63px; }
.wd-color { width: 15px; height: 15px; padding: 0; border: 1px solid #999; border-radius: 3px; cursor: pointer; }
.wd-color.plain { background: linear-gradient(135deg, #fff 45%, #d33 45%, #d33 55%, #fff 55%); }
.wd-color[aria-checked="true"] { outline: 2px solid #1f6fd0; outline-offset: 1px; }
.wd-reset { font-size: 11px; padding: 3px 10px; border: 1px solid #bbb; border-radius: 4px; background: #f4f4f4; cursor: pointer; }
#av-clothes { cursor: pointer; }

/* ---------- Größe der Bedienelemente ---------- */
/* Leiste, Kontoanzeige, Raumbanner, Nachrichten und Seitenleiste etwas kleiner als im Original (1 = Originalgröße).
   Der Raum selbst und die Figuren sind davon nicht betroffen. */
:root { --ui: .88; }
#bar, #soundpanel, #konto, #roombanner, #msgs, #side { zoom: var(--ui); }
#app { grid-template-columns: minmax(0, 1fr) calc(215px * var(--ui)); }

/* ---------- Radio ---------- */
#radiopanel { position: absolute; left: 0; right: 0; bottom: 22px; background: #fff; border-top: 2px solid #33c1d8; box-shadow: 0 -3px 8px rgba(0, 0, 0, .2); z-index: 5; padding-bottom: 6px; }
#radiopanel h2 { margin: 0 0 6px; }
.radio-row { display: flex; align-items: center; gap: 8px; margin: 6px 9px; font-size: 11px; }
.radio-row input[type=range] { flex: 1; min-width: 0; accent-color: #33c1d8; }
#radio-power { padding: 3px 10px; border: 1px solid #1fa9c0; border-radius: 4px; background: #33c1d8; color: #fff; font: bold 11px Arial, Helvetica, sans-serif; cursor: pointer; }
#radio-power[aria-pressed="true"] { background: #e23a8c; border-color: #b82a70; }
#radio-state { color: #666; }
#sb-foot button.playing { background: #e23a8c; }

/* Abwesenheitsnotiz im Namensschild (/afk Text) */
/* Maße und Aussehen nach PlayerTooltip.as / ATooltip.as: weißes Feld mit 70 % Deckkraft, runde Ecken, Name fett,
   darunter die Notiz kursiv in Anführungszeichen; Ränder 6/6/7 px, Abstand 3 px, Breite 50 bis 200 px. */
#tooltip.player { min-width: 50px; max-width: 200px; padding: 6px 6px 7px; background: rgba(255, 255, 255, .7); border: 0; border-radius: 4px; box-shadow: none;
                  color: rgba(0, 0, 0, .75); font-weight: normal; text-align: center; white-space: normal; box-sizing: content-box; }
#tooltip.player b { display: block; white-space: nowrap; }
#tooltip.player i { display: block; margin-top: 3px; overflow-wrap: anywhere; }

/* ---------- Bauen: Möbelauswahl ---------- */
.it-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 4px 8px 8px; }
.it-cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 74px; padding: 3px 2px; border: 1px solid #e0cfa8; border-radius: 6px; background: #fbf6ea; cursor: pointer; font: 9px/1.1 Arial, Helvetica, sans-serif; color: #555; }
.it-cell img { max-width: 52px; max-height: 46px; margin: auto 0; }
.it-cell span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.it-cell:hover:not(:disabled) { background: #fff3c9; border-color: #e0a800; }
.it-cell:disabled { opacity: .45; cursor: default; }

/* Tasche: gefüllte Fächer */
.iv-item.iv-has { padding: 0; box-sizing: border-box; cursor: pointer; background: #fff center / contain no-repeat; font: inherit; }
.iv-item.iv-has:hover:not(:disabled) { border-color: #f5c400; }
.iv-item.iv-has:disabled { opacity: .5; cursor: default; }
.iv-count { position: absolute; right: -2px; bottom: -2px; min-width: 11px; padding: 0 2px; background: #7e624c; color: #fff; border-radius: 6px 0 0 0; font: bold 9px/11px Arial, Helvetica, sans-serif; text-align: center; }

/* Admin- und Server-Op-Stern: im Namensschild unter dem Text (PlayerTooltip: extraIcons), im Profil als Hinweis */
#tooltip.player .star { display: block; margin: 4px auto 0; image-rendering: pixelated; }
.pr-role { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 2px 6px 6px; font-size: 11px; font-weight: bold; }

/* ---------- Laden ---------- */
.sh-balance { display: flex; align-items: center; justify-content: center; gap: 5px; margin: 0 8px 8px; padding: 4px; background: #f3ead6; border: 1px solid #e0cfa8; border-radius: 6px; font-size: 11px; font-weight: bold; }
.sh-price { display: inline-flex; align-items: center; gap: 3px; font-weight: bold; color: #7a5200; }
.sh-price img { width: 13px; height: 13px; }
.sh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0 8px 8px; }
.sh-cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 1px; height: 88px; padding: 3px 2px; border: 1px solid #e0cfa8; border-radius: 6px; background: #fbf6ea; cursor: pointer; font: 9px/1.15 Arial, Helvetica, sans-serif; color: #555; }
.sh-cell:hover { background: #fff3c9; border-color: #e0a800; }
.sh-cell.owned { opacity: .55; }
.sh-thumb { max-width: 50px; max-height: 46px; margin: auto 0; }
canvas.sh-thumb { width: 48px; height: 48px; max-height: none; }
.sh-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-detail { margin: 0 8px; text-align: center; }
.sh-detail h3 { margin: 6px 0; font-size: 13px; }
img.sh-big { max-width: 150px; max-height: 130px; image-rendering: auto; margin-top: 6px; }
canvas.sh-big { width: 140px; height: 140px; }
.sh-buy { display: block; width: 100%; margin: 8px 0; padding: 7px 4px; border: 1px solid #b97a00; border-radius: 6px; background: #f5b400; color: #3a2600; font: bold 12px Arial, Helvetica, sans-serif; cursor: pointer; }
.sh-buy:hover:not(:disabled) { background: #ffc92e; }
.sh-buy:disabled { background: #ddd; border-color: #bbb; color: #888; cursor: default; }

/* Kleidung in Tasche und im Kasten "getragene Kleidung" */
.iv-item canvas.portrait { display: block; width: 26px; height: 26px; }
.iv-item.iv-worn { background: #fff; }
#av-clothes.drop { outline: 2px dashed #f5c400; outline-offset: -2px; }
.iv-item.iv-takeoff { cursor: pointer; }
.iv-item.iv-takeoff:hover { border-color: #f5c400; }
.iv-item.iv-wear { cursor: grab; }
h2 + .wd-colors, .sh-hair + .wd-colors { margin: 4px 9px 10px; justify-content: center; }
.sh-hair { display: flex; justify-content: center; margin: 2px 0 4px; }
.sh-hair canvas { width: 84px; height: 84px; }

/* Ware drehen */
.sh-turn { cursor: grab; touch-action: none; }
.sh-turn:active { cursor: grabbing; }
.sh-turnrow { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 4px; font-size: 10px; color: #777; }
img.sh-big.flipped { transform: scaleX(-1); }

/* Mietobjekte in der Wohnungsliste */
.rent-row.rented { background: #dff3d8; border-color: #9fcf8f; }
.rent-ok { color: #2f7a22 !important; font-weight: bold; }
.rent-btns { display: flex; gap: 4px; margin-top: 3px; }
.rent-btns .wd-reset { padding: 2px 6px; font-size: 10px; }
.rent-btns .wd-reset:disabled { opacity: .5; cursor: default; }

/* Gartenarbeit im Azubi-Garten */
#garden { position: absolute; right: 8px; top: 78px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 5px 9px 5px 5px; border-radius: 22px; background: #2a1c12e6; border: 2px solid #5b3d22; color: #fff; font: bold 13px Arial, sans-serif; zoom: var(--ui); }
#ga-level { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe66b, #f2a900 70%); color: #6a3d00; font-size: 17px; line-height: 34px; text-align: center; box-shadow: 0 0 0 2px #7a4a12; }
.ga-bars { display: flex; flex-direction: column; gap: 4px; }
.ga-bar { display: block; width: 150px; height: 9px; border-radius: 5px; background: #120b06; overflow: hidden; }
.ga-bar i { display: block; height: 100%; width: 0; background: linear-gradient(#ffb44a, #e8791a); transition: width .4s; }
.ga-bar.tired i { background: linear-gradient(#8fb7ff, #3f6fd8); }
#ga-hand { position: relative; width: 36px; height: 36px; padding: 0; border: 2px solid #f5dd01; border-radius: 8px; background: #fff; cursor: pointer; }
#ga-hand img { width: 30px; height: 30px; image-rendering: auto; }
#ga-hand b { position: absolute; right: -6px; bottom: -6px; min-width: 16px; padding: 0 3px; border-radius: 8px; background: #d8231f; color: #fff; font-size: 11px; line-height: 16px; }
#ga-helpbtn { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #7a4a12; background: #ff8a2b; color: #fff; font: bold 17px Arial, sans-serif; cursor: pointer; }
#ga-pay { position: absolute; left: 60px; top: 44px; color: #ffd94a; font-size: 16px; text-shadow: 0 1px 2px #000; opacity: 0; pointer-events: none; }
#ga-pay.show { animation: ga-pay 1.6s ease-out; }
@keyframes ga-pay { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-26px); } }
#ga-help { position: absolute; right: 8px; top: 130px; z-index: 3; width: 350px; padding: 10px 12px; border-radius: 10px; background: #fffdf4; border: 2px solid #5b3d22; color: #33230f; font: 13px Arial, sans-serif; zoom: var(--ui); }
#ga-help img { display: block; max-width: 100%; margin: 8px 0; border-radius: 4px; }
#ga-help p { margin: 0; line-height: 1.4; }
#ga-help-close { float: right; border: 0; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: #5b3d22; }

#timerbar { position: absolute; z-index: 2; width: 50px; height: 7px; box-sizing: border-box; border: 1px solid #fff; background: #000; transform: translateX(-50%); pointer-events: none; }
#timerbar i { display: block; height: 100%; width: 0; background: #7E85F7; }
#actionicon { position: absolute; z-index: 6; pointer-events: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .75)); }

/* Levelanzeige: Erschöpfungs-Marke und Glühbirne des Originals; die Gartenleiste zeigt nur noch Hand und Hilfe */
#xp { right: 10px; overflow: visible; }
#xpfill { border-radius: 6px; transition: width .5s; }
#xpcap { position: absolute; top: -1px; height: 20px; width: 5px; transform: translateX(-50%); }
#xpbulb { position: absolute; right: -4px; top: 0; width: 24px; height: 31px; z-index: 1; }
#xp.gain { animation: xp-gain 1s ease-out; }
@keyframes xp-gain { 0% { box-shadow: 0 0 14px 5px #78e4ff; } 100% { box-shadow: 0 0 0 0 #78e4ff00; } }

/* Gartenleiste nach dem Wiki-Bild "Gartenanlage Aufgabe Balken": gelber Stern mit Level, grüner Fortschritt, gelbe Marke
   für die Erschöpfung, rechts Florentina als Hilfe-Knopf. Eine eigene Leiste – nicht die Levelanzeige oben rechts. */
#garden { padding: 5px 5px 5px 4px; gap: 6px; border-radius: 26px; background: #2b2b2be6; border: 2px solid #1a1a1a; }
#ga-level { width: 40px; height: 40px; border-radius: 0; box-shadow: none; line-height: 40px; font-size: 19px; color: #fff; text-shadow: 0 1px 2px #7a4a00, 0 0 3px #7a4a00; background: radial-gradient(circle, #ffe45c 30%, #f5b400 70%);
  clip-path: polygon(50% 0, 60% 14%, 75% 7%, 77% 23%, 93% 25%, 86% 40%, 100% 50%, 86% 60%, 93% 75%, 77% 77%, 75% 93%, 60% 86%, 50% 100%, 40% 86%, 25% 93%, 23% 77%, 7% 75%, 14% 60%, 0 50%, 14% 40%, 7% 25%, 23% 23%, 25% 7%, 40% 14%); }
.ga-bar { position: relative; width: 170px; height: 18px; border-radius: 9px; background: #4a2412; border: 2px solid #6b3a1f; overflow: hidden; }
.ga-bar i { background: linear-gradient(#8fd23c, #5aa51c); }
#ga-cap { position: absolute; top: 2px; bottom: 2px; width: 4px; margin-left: -2px; border-radius: 2px; background: #ffd21f; }
#ga-helpbtn { width: 40px; height: 40px; padding: 0; overflow: hidden; border: 2px solid #c98a00; background: radial-gradient(circle, #ffe98a, #f5b400); }
#ga-helpbtn img { width: 34px; height: 34px; object-fit: contain; margin-top: 2px; }

/* Registrierung unter der Figurwahl */
#reg { margin-top: 14px; padding-top: 12px; border-top: 2px dashed #e3d2f3; font-family: Arial, Helvetica, sans-serif; }
.reg-title { margin-bottom: 8px; color: #9900e8; font: normal 20px/1 'Luckiest Guy', Arial, Helvetica, sans-serif; }
#reg input { display: block; width: 100%; box-sizing: border-box; height: 32px; margin-bottom: 6px; padding: 0 8px; border: 3px solid #cfcfcf; border-radius: 8px; background: #fff; color: #222; font: 14px Arial, sans-serif; outline: 0; }
#reg input:hover, #reg input:focus { border-color: #fc0; }
#reg-go { width: 100%; height: 40px; margin-top: 2px; border: 3px solid #7a00b8; border-radius: 12px; background: linear-gradient(#b930f0, #9900e8); color: #fff; font: normal 19px/1 'Luckiest Guy', Arial, Helvetica, sans-serif; cursor: pointer; }
#reg-go:hover { border-color: #f5dd01; background: #fc0; color: #7a00b8; }
#reg-msg { min-height: 18px; margin-top: 6px; color: #c0182b; font-size: 13px; line-height: 1.3; }
#lp-register.flash { animation: lp-flash 1.2s ease-out; }
@keyframes lp-flash { 0% { box-shadow: 0 0 0 6px #fc0; } 100% { box-shadow: 0 0 0 0 #fc000000; } }
#play { cursor: pointer; }

/* Post (Kurznachrichten) – Farben und Formen nach message.css des Originals */
.inbox-lst-par { position: relative; margin: 5px 6px; padding: 5px; border: 2px solid #fff; border-radius: 8px; cursor: pointer; overflow: hidden; }
.inbox-lst-par:hover { border-color: #ccc; }
.inbox-lst-fregger { position: absolute; left: 2px; top: 2px; }
.inbox-lst-fregger canvas { width: 34px; height: 34px; }
.inbox-lst-box { position: relative; margin-left: 40px; padding: 6px 8px 18px; border-radius: 5px; background: #cee8e8; font-size: 12px; }
.inbox-lst-box b { display: block; margin-bottom: 2px; }
.inbox-lst-msg { overflow: hidden; word-wrap: break-word; overflow-wrap: anywhere; }
.inbox-lst-msg-time { position: absolute; right: 4px; bottom: 3px; font-size: 9px; color: #8c9e9e; }
.inbox-lst-par-read .inbox-lst-box { background: #e8e8e8; }
.inbox-lst-par-read .inbox-lst-msg-time { color: #989898; }
.post-msg { cursor: default; }
.post-msg:hover { border-color: #fff; }
.inbox-lst-par-own .inbox-lst-box { margin-left: 0; margin-right: 40px; background: #dff0c8; }
.post-new, .post-write { margin: 0 8px 8px; }
.post-new { display: flex; gap: 5px; }
.post-new input { flex: 1; min-width: 0; height: 26px; padding: 0 6px; border: 2px solid #ccc; border-radius: 6px; font: 12px Arial, sans-serif; }
.post-write { position: relative; padding: 6px; border-radius: 8px; background: #cee8e8; }
.post-write textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; padding: 5px 6px; border: 2px solid #9cc; border-radius: 6px; font: 12px Arial, sans-serif; }
.post-new button, .post-write button { padding: 3px 12px; border: 2px solid #c98a00; border-radius: 8px; background: #f7a823; color: #fff; font: bold 12px Arial, sans-serif; cursor: pointer; }
.post-write button { margin-top: 5px; }
.post-info { position: absolute; right: 10px; bottom: 10px; color: #7a9a9a; font-size: 11px; }
.post-err { color: #c0182b; font-size: 12px; margin-top: 4px; min-height: 0; }
#sb-navbtn { position: relative; }
#post-badge { position: absolute; right: 26px; top: 2px; min-width: 16px; padding: 0 4px; border-radius: 9px; background: #d8231f; color: #fff; font: bold 11px/16px Arial, sans-serif; text-align: center; }
.post-profile { float: right; }
.post-face { cursor: pointer; z-index: 1; }
.post-face:hover canvas { outline: 2px solid #f7a823; border-radius: 4px; }

/* Freundesliste */
.fl-list { margin: 4px 8px 8px; }
.iv-item.iv-worn { outline: 2px solid #3fae3f; outline-offset: -2px; }
.gift-grid { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 8px 8px; padding: 6px; border-radius: 8px; background: #c8ab8a; }
.gift-pick { margin-bottom: 5px; font-weight: bold; font-size: 11px; }
.post-write .ex-save { margin-top: 6px; }
.post-write .ex-save:disabled { opacity: .5; cursor: default; }
.sh-desc { margin: 2px 8px 8px; font-size: 11px; line-height: 1.35; color: #444; text-align: center; }
.pr-card { margin: 4px 2px 6px; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.pr-card:empty { display: none; }
.pr-card a { color: inherit; text-decoration: underline; }
.ex-form h2 { margin: 0 0 6px; font-size: 13px; }
.ex-form h2:not(:first-child) { margin-top: 12px; }
.ex-pose { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; background: #fff; border-radius: 8px; padding: 4px; }
.ex-turn { width: 26px; height: 26px; padding: 0; border: 2px solid #c98a00; border-radius: 50%; background: #f7a823; color: #fff; font-size: 11px; cursor: pointer; }
.ex-turn:hover { background: #ffc24d; }
.ex-field { display: block; margin-bottom: 6px; font-size: 11px; font-weight: bold; }
.ex-field span { display: block; margin-bottom: 2px; }
.ex-field .text { box-sizing: border-box; width: 100%; padding: 4px; border: 1px solid #bbb; font: 12px Arial, Helvetica, sans-serif; }
.ex-note { font-size: 10px; color: #555; margin: 2px 0 8px; }
.ex-save { padding: 4px 14px; border: 2px solid #c98a00; border-radius: 8px; background: #f7a823; color: #fff; font: bold 12px Arial, sans-serif; cursor: pointer; }
.ex-save:hover { background: #ffc24d; }
.fl-grid { display: flex; flex-wrap: wrap; }
.friendlist-image { width: 65px; overflow: hidden; text-align: center; cursor: pointer; font-size: 80%; padding: 3px 0 5px; border-radius: 6px; }
.friendlist-image:hover { background: #eef7fa; }
.friendlist-image .portrait.body { width: 44px; height: 75px; margin: 0 auto; }
.friendlist-image span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #bbb; }
.friendlist-image.fl-on span { color: #000; }
/* Offline-Freunde blass und grau: nach Erinnerung des Betreibers, im Archiv ist nur der graue Name belegt */
.friendlist-image:not(.fl-on) .portrait { filter: grayscale(1); opacity: .5; }
.fl-row { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 5px; margin-bottom: 3px; border: 2px solid #fff; border-radius: 8px; background: #eef7fa; cursor: pointer; opacity: .65; }
.fl-row.fl-on, .fl-row.fl-request { opacity: 1; }
.fl-row:hover { border-color: #74cde3; }
.fl-row canvas { flex: none; width: 30px; height: 30px; cursor: pointer; }
.fl-info { flex: 1; min-width: 0; font-size: 11px; line-height: 1.25; }
.fl-info b { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.fl-info span { display: block; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-on .fl-info b::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 4px; border-radius: 50%; background: #3fae3f; }
.fl-request { background: #fff3d6; cursor: default; }
.fl-btns { display: flex; gap: 4px; margin-top: 3px; }
.fl-btns button, .fl-mail { padding: 1px 7px; border: 2px solid #c98a00; border-radius: 7px; background: #f7a823; color: #fff; font: bold 11px Arial, sans-serif; cursor: pointer; }
.fl-btns .fl-no { border-color: #999; background: #bbb; }
.fl-mail { flex: none; padding: 0 5px; font-size: 13px; line-height: 18px; }
.action-button.disabled { opacity: .6; cursor: default; }

/* Abzeichen */
.bz { display: flex; align-items: center; gap: 8px; margin: 3px 8px; padding: 4px 6px; border: 2px solid #fff; border-radius: 8px; background: #f3f3f3; cursor: pointer; }
.bz:hover, .bz-open { border-color: #f7a823; }
.bz img { flex: none; width: 40px; height: 40px; object-fit: contain; filter: grayscale(1); opacity: .55; }
.bz-have { background: #fff6dc; }
.bz-have img { filter: none; opacity: 1; }
.bz-txt { min-width: 0; font-size: 11px; line-height: 1.25; }
.bz-txt b { display: block; font-size: 12px; }
.bz-txt span { color: #666; }
.bz-locked .bz-txt b::after { content: ' 🔒'; font-size: 10px; }
.bz-more { margin: 0 8px 6px 14px; padding: 6px 8px; border-left: 3px solid #f7a823; background: #fffdf4; font-size: 11px; line-height: 1.35; }
.bz-more p { margin: 0 0 5px; }
.bz-level { display: flex; align-items: center; gap: 6px; margin: 2px 0; opacity: .6; }
.bz-level img { width: 26px; height: 26px; object-fit: contain; filter: grayscale(1); }
.bz-task { margin: 2px 0; padding-left: 16px; position: relative; opacity: .7; }
.bz-task::before { content: '○'; position: absolute; left: 2px; }
.bz-done { opacity: 1; }
.bz-done img { filter: none; }
.bz-task.bz-done::before { content: '✔'; color: #3a9a2a; }
.bz-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 8px 8px; }
.bz-row img { width: 34px; height: 34px; object-fit: contain; }

/* Neues (Stream) – Farben nach stream.css des Originals */
.str-par { position: relative; padding: 0 10px 5px; }
.str-msg { border-radius: 5px; background: #cee8e8; padding: 6px 8px; margin-bottom: 4px; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.str-public .str-msg { background: #feeaa4; }
.str-serverop .str-msg { background: #d1d4fd; }
.str-action .str-msg { background: #e8e8e8; }
.str-action .str-text { font-style: italic; }
.str-head { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.str-head canvas { width: 24px; height: 24px; flex: none; cursor: pointer; }
.str-head b, .str-comment b { cursor: pointer; }
.str-time { margin-left: auto; padding-left: 6px; font-size: 9px; color: #7a8a8a; white-space: nowrap; }
.str-comment { margin-left: 18px; }
.str-comment .str-msg { background: #cee8e8; padding: 4px 6px; font-size: 11px; }
.str-comment .str-time { float: right; }
.str-del { border: 0; background: none; color: #888; font-size: 14px; line-height: 1; cursor: pointer; padding: 0 2px; }
.str-cform { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px 18px; }
.comment-textarea { flex: 1; min-width: 0; width: 139px; resize: none; padding: 3px 5px; border: 2px solid #ccc; border-radius: 6px; font: 11px Arial, sans-serif; }
.str-write { margin: 0 8px 8px; padding: 6px; border-radius: 8px; }
.friend-write-msg { background: #e6e6e6; } .all-write-msg { background: #feeaa4; } .serverop-write-msg { background: #d1d4fd; }
.str-write textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; padding: 5px 6px; border: 2px solid #bbb; border-radius: 6px; font: 12px Arial, sans-serif; }
.str-bar { display: flex; justify-content: flex-end; gap: 5px; margin-top: 5px; }
.str-bar select { margin-right: auto; font: 11px Arial, sans-serif; border-radius: 6px; }
.str-write button, .str-cform button { padding: 2px 10px; border: 2px solid #c98a00; border-radius: 8px; background: #f7a823; color: #fff; font: bold 11px Arial, sans-serif; cursor: pointer; }
.str-cform .post-err { flex-basis: 100%; }
#stream-badge { position: absolute; right: 48px; top: 2px; padding: 0 5px; border-radius: 9px; background: #f7a823; color: #fff; font: bold 10px/16px Arial, sans-serif; cursor: pointer; }

/* Untersuchen und Stickies */
.ex-head { display: flex; align-items: center; gap: 8px; margin: 0 8px 6px; padding: 6px; border-radius: 8px; background: #eef7fa; font-size: 13px; }
.ex-head img { max-width: 56px; max-height: 56px; object-fit: contain; }
.sticky { margin: 4px 8px; padding: 6px 7px; background: linear-gradient(#fffb8f, #fff36b); box-shadow: 1px 2px 3px rgba(0, 0, 0, .25); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.sticky-head { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.sticky-head canvas { width: 22px; height: 22px; flex: none; cursor: pointer; }
.sticky-head b { cursor: pointer; }
.sticky-row { display: flex; gap: 5px; align-items: flex-start; }
.sticky-row canvas { width: 34px; height: 34px; flex: none; }
.sticky-write textarea { flex: 1; min-width: 0; box-sizing: border-box; resize: vertical; padding: 4px 5px; border: 1px solid #c9bf4a; background: #fffde0; font: 12px Arial, sans-serif; }
.sticky-write button { display: block; width: 100%; margin-top: 6px; padding: 4px 6px; border: 1px solid #8a9a6a; background: #fbfbe8; color: #4a6a2a; font: 11px Arial, sans-serif; cursor: pointer; }
.sticky-write button:disabled { opacity: .5; cursor: default; }
.sticky-coins { margin-top: 4px; font-size: 12px; }
#emotes { display: flex; gap: 4px; margin: 6px 0; }
#emotes button { padding: 2px; border: 2px solid #e94560; border-radius: 10px; background: #fff; cursor: pointer; line-height: 0; }
#emotes button:hover { background: #ffe9ee; }

/* Bauen */
.cr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 8px 8px; }
.cr-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px; border: 2px solid #e2d3bd; border-radius: 8px; background: #fbf5ea; font: 10px/1.15 Arial, sans-serif; color: #5b3d22; cursor: pointer; }
.cr-item:hover:enabled { border-color: #f7a823; }
.cr-item:disabled { opacity: .55; cursor: default; }
.cr-item img { width: 36px; height: 36px; object-fit: contain; image-rendering: auto; }
.cr-item span { text-align: center; overflow-wrap: anywhere; }
.cr-built { background: #eef7e2; border-color: #b9d99a; }
.cr-job { margin: 0 8px 8px; padding: 6px 8px; border-radius: 8px; background: #fff3d6; font-size: 12px; }
.cr-bar { height: 9px; margin-top: 5px; border: 1px solid #fff; background: #000; }
.cr-bar i { display: block; height: 100%; width: 0; background: #7E85F7; }
#metroplan .closer { z-index: 5; }
#arealist { z-index: 6; }