/* The Endless Tower – game HUD shared by the outside view (index.html), the inside view (tower.html) and your apartment (apartment.html), js/hud.js.
   UI overhaul (Adrian 18.10.2026): one bar at the bottom centre – [ you ] [ Outside · Inside · Apartment ] [ your job ] – each place in its own colour;
   your card opens above the "you" button; Help bottom right (logged out; phones: a small "?" on the right); top right only the account (css/session.css).
   sheets   Jobs (your resident file + all jobs), Help (questions + what the old guide showed), View settings (phones), Your apartment (home view) */
.g-on { --gbg: rgba(8, 14, 40, 0.86); --gline: rgba(255, 255, 255, 0.14); --gold: #ffd54a; --gz: 30; --safe-b: env(safe-area-inset-bottom, 0px); }
html:has(body.g-on), body.g-on { height: 100%; overflow: hidden; overscroll-behavior: none; }
.g-hud { position: fixed; inset: 0; z-index: var(--gz); pointer-events: none; }
.g-hud > * { pointer-events: auto; }
.g-panel, .g-bar { background: var(--gbg); border: 1px solid var(--gline); border-radius: 20px; box-shadow: 0 14px 34px rgba(3, 6, 30, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.g-bar { border-radius: 999px; }

/* ---------- the bar: you · Outside | Inside | Apartment · your job ---------- */
.g-dock { position: absolute; left: 50%; bottom: calc(20px + var(--safe-b)); transform: translateX(-50%); margin: 0; padding: 0; pointer-events: none; }
.g-dock > * { pointer-events: auto; }
.g-bar { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 999px; }
.g-bar svg { width: 18px; height: 18px; flex: none; }
.g-mebtn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 14px 0 5px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.06); color: var(--white); font: 800 14.5px var(--body); cursor: pointer; white-space: nowrap; max-width: 230px; }
.g-mebtn:hover, .g-mebtn.open { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.7); }
.g-mebtn .n { flex: none; min-width: 38px; height: 38px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(180deg, var(--cob1), var(--cob2)); border: 2px solid var(--white); font: 400 19px/1 var(--display); }
.g-mebtn .n svg { width: 18px; height: 18px; }
.g-mebtn .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ice); }
.g-mebtn .car { flex: none; width: 8px; height: 8px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(2px) rotate(45deg); opacity: 0.75; transition: transform 0.15s; }
.g-mebtn.open .car { transform: translateY(-2px) rotate(225deg); }
.g-mebtn.visit .n { background: rgba(127, 227, 255, 0.16); border-color: var(--ice); color: var(--ice); }
.g-mebtn.search { gap: 8px; padding: 0 20px 0 15px; border: 2px solid var(--white); background: linear-gradient(180deg, #a5efff, #2b9fd6); color: #06204a; font: 400 19px var(--display); }
.g-mebtn.search .lbl { color: inherit; }
.g-mebtn.search:hover, .g-mebtn.search.open { filter: brightness(1.08); background: linear-gradient(180deg, #a5efff, #2b9fd6); border-color: var(--white); }
/* the three places, each in its own colour: outside sky blue, inside violet, apartment coral */
.g-switch { display: flex; padding: 3px; gap: 2px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--gline); }
.g-switch button { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 17px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 800 14.5px var(--body); letter-spacing: 0.02em; cursor: pointer; white-space: nowrap; }
.g-switch button:hover { color: var(--white); background: rgba(255, 255, 255, 0.06); }
.g-switch [data-go="outside"] svg { color: #7cc4ff; } .g-switch [data-go="inside"] svg { color: #c3a6ff; } .g-switch [data-go="home"] svg { color: #ffab84; }
.g-switch button.on { color: var(--white); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85); cursor: default; }
.g-switch button.on svg { color: var(--white); }
.g-switch [data-go="outside"].on { background: linear-gradient(180deg, #5cb8ff, #1c63d6); }
.g-switch [data-go="inside"].on { background: linear-gradient(180deg, #a37bff, #5228c4); }
.g-switch [data-go="home"].on { background: linear-gradient(180deg, #ffa078, #d94a22); }
.g-switch button.locked { opacity: 0.5; } .g-switch button.locked svg { color: var(--muted); }
.g-jobbtn { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 16px 0 12px; border-radius: 999px; border: 2px solid rgba(255, 213, 74, 0.55); background: rgba(255, 213, 74, 0.1); color: var(--gold); font: 800 14.5px var(--body); cursor: pointer; white-space: nowrap; }
.g-jobbtn.has { padding-left: 5px; color: var(--white); }
.g-jobbtn:hover, .g-jobbtn.on { background: rgba(255, 213, 74, 0.18); border-color: var(--gold); }
.g-jobbtn .ji { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; background: linear-gradient(180deg, var(--cob1), var(--cob2)); border: 2px solid var(--white); }
.g-jobbtn b { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); font: 400 19px/1 var(--display); }
.g-jobbtn b.wait { color: #d6c48c; } .g-jobbtn b svg { width: 13px; height: 13px; opacity: 0.85; }
/* Editor-Pill neben Outside/Inside (Adrian 21.10.): Menü nach oben mit Character Editor + Room Editor */
.g-ed { position: relative; display: flex; }
.g-edbtn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 13px; border-radius: 999px; border: 2px solid rgba(255, 160, 120, 0.6); background: rgba(255, 120, 70, 0.12); color: #ffab84; font: 800 14.5px var(--body); cursor: pointer; white-space: nowrap; }
.g-edbtn:hover, .g-edbtn.open { background: rgba(255, 120, 70, 0.22); border-color: #ffab84; color: var(--white); }
.g-edmenu { position: absolute; left: 50%; bottom: calc(100% + 16px); transform: translateX(-50%); width: 280px; box-sizing: border-box; display: grid; gap: 8px; padding: 10px; border-radius: 22px; background: #0b1440; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 24px 60px rgba(2, 6, 30, 0.7); animation: gEdUp 0.18s cubic-bezier(0.22, 1, 0.36, 1); z-index: 2; }
.g-edmenu[hidden] { display: none; }
.g-edmenu::after { content: ''; position: absolute; left: calc(50% - 7px); bottom: -8px; width: 14px; height: 14px; background: #0b1440; border-right: 1px solid rgba(255, 255, 255, 0.18); border-bottom: 1px solid rgba(255, 255, 255, 0.18); transform: rotate(45deg); }
@keyframes gEdUp { from { opacity: 0; transform: translate(-50%, 8px); } }
.g-edmenu > a { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; color: var(--white); text-decoration: none; border: 2px solid rgba(255, 255, 255, 0.75); }
.g-edmenu > a[hidden] { display: none; }
.g-edmenu > a svg { width: 38px; height: 38px; box-sizing: border-box; flex: none; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.16); }
body.g-ed-on .meet.open, body.g-ed-on .meet:not(#gMeetSlot .meet) { visibility: hidden; pointer-events: none; }   /* das offene Visit-Panel tritt zur Seite, solange Editor- oder Emote-Menü offen ist – die Visit-Pill bleibt stehen */
body.g-ed-on .g-hud { z-index: 500; }   /* offenes Editor-Menü liegt über allem: Tower/My view (js/follow.js, 61), Meet up (60), Konto, Hilfe (Adrian 21.10.) */
.g-edmenu > a span { display: grid; gap: 1px; } .g-edmenu > a b { font: 800 15px/1.15 var(--body); } .g-edmenu > a small { font: 700 12px/1.2 var(--body); color: rgba(255, 255, 255, 0.82); }
.g-edmenu > a:hover { filter: brightness(1.1); }
.g-edmenu .ed-char { background: linear-gradient(180deg, #a37bff, #5228c4); }
.g-edmenu .ed-room { background: linear-gradient(180deg, #ffa078, #d94a22); }
.g-ednote { display: flex; align-items: center; gap: 8px; margin: 2px 2px 0; font: 700 12.5px/1.35 var(--body); color: var(--muted); }
.g-ednote svg { width: 16px; height: 16px; flex: none; } .g-ednote a { color: var(--ice); font-weight: 800; }
/* your card (and the name search) above the "you" button */
.g-pop { position: absolute; left: 0; bottom: calc(100% + 12px); width: 360px; box-sizing: border-box; padding: 14px; border-radius: 22px; background: #0b1440; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 24px 60px rgba(2, 6, 30, 0.7); animation: gPop 0.18s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: 30px 100%; }
.g-pop::after { content: ''; position: absolute; left: 26px; bottom: -8px; width: 14px; height: 14px; background: #0b1440; border-right: 1px solid rgba(255, 255, 255, 0.18); border-bottom: 1px solid rgba(255, 255, 255, 0.18); transform: rotate(45deg); }
@keyframes gPop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
.g-find { display: grid; gap: 10px; }
.g-find-l { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--muted); line-height: 1.4; }
.g-find-l b { display: block; font: 400 21px/1.1 var(--display); color: var(--white); margin-bottom: 3px; }
.g-find-row { display: flex; gap: 8px; min-width: 0; }
.g-find .in { flex: 1; display: flex; align-items: center; gap: 6px; background: rgba(4, 8, 30, 0.75); border: 2px solid var(--line2); border-radius: 999px; padding: 0 14px; height: 46px; min-width: 0; }
.g-find .in:focus-within { border-color: var(--ice); }
.g-find .in span { color: var(--ice); font-family: var(--display); font-size: 20px; }
.g-find .in input { width: 100%; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--white); font: 800 16px var(--body); }
.g-find .in input::placeholder { color: var(--faint); font-weight: 700; }
.g-nf { font-size: 13.5px; color: var(--muted); font-weight: 700; line-height: 1.4; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--gline); }
.g-nf b { color: var(--white); }
.g-card { position: relative; display: grid; gap: 10px; }
.g-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.g-apt { flex: none; display: grid; justify-items: center; min-width: 58px; padding: 3px 8px 5px; border-radius: 16px; border: 2px solid var(--white); background: linear-gradient(180deg, var(--cob1), var(--cob2)); box-shadow: 0 6px 16px rgba(5, 10, 40, 0.45); }
.g-apt small { font: 800 9px var(--body); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.85; }
.g-apt b { font: 400 28px/1 var(--display); }
.g-id > div { min-width: 0; flex: 1; }
/* what they're doing right now: icon + a word, next to the name */
.g-st { flex: none; max-width: 46%; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--gline); font: 800 13px var(--body); color: var(--white); white-space: nowrap; cursor: default; }
.g-st[hidden] { display: none; }
.g-st i { font-style: normal; font-size: 17px; line-height: 1; }
.g-st b { overflow: hidden; text-overflow: ellipsis; }
.g-st.lit { border-color: rgba(255, 210, 122, 0.6); background: rgba(255, 210, 122, 0.12); }
.g-id > div b { display: block; color: var(--ice); font: 900 18px/1.2 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-ver { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 213, 74, 0.16); border: 1px solid rgba(255, 213, 74, 0.5); color: var(--gold); font: 800 11px/1.4 var(--body); vertical-align: 2px; }
.g-mebtn.ver .n { box-shadow: 0 0 0 2px var(--gold); }   /* verified resident: a thin gold ring around the number */
.g-id > div small { display: block; color: var(--muted); font: 800 13px/1.3 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-now { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--white); padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--gline); }
.g-now i { flex: none; width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); border: 1px solid var(--line2); }
.g-now i.on { background: #ffd27a; border-color: #ffe3a8; box-shadow: 0 0 12px #ffc95a; }
.g-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.g-acts svg { width: 17px; height: 17px; flex: none; }
.g-show { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--white); background: linear-gradient(180deg, #a5efff, #2b9fd6); color: #06204a; font: 400 18px var(--display); cursor: pointer; white-space: nowrap; }
.g-show:hover { filter: brightness(1.08); }
.g-show.alt { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line2); color: var(--white); font: 800 14px var(--body); }   /* visiting: the visited place is the second button, "Show me" (back to you) the first */
.g-show.alt span { overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.g-xact { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.06); color: var(--white); font: 800 13.5px var(--body); cursor: pointer; white-space: nowrap; }
.g-xact.on { background: linear-gradient(180deg, var(--cob1), var(--cob2)); border-color: rgba(255, 255, 255, 0.85); }
.g-ibtn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line2); background: rgba(255, 255, 255, 0.06); color: var(--white); cursor: pointer; }
.g-ibtn:hover, .g-ibtn.on { border-color: var(--white); background: rgba(255, 255, 255, 0.12); }
.g-chg { display: inline-flex; align-items: center; gap: 5px; height: 44px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--muted); font: 800 12.5px var(--body); cursor: pointer; white-space: nowrap; }
.g-chg:hover { color: var(--white); border-color: var(--white); }
.g-chg svg { width: 15px; height: 15px; }
.g-card .lc-menu { left: auto; right: 0; top: auto; bottom: calc(100% + 26px); }
/* someone else's link: shown, but not remembered as yours until "That's me" */
.g-visit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 8px 8px 12px; border-radius: 14px; background: rgba(127, 227, 255, 0.08); border: 1px solid rgba(127, 227, 255, 0.4); font-size: 13.5px; font-weight: 800; color: var(--muted); }
.g-visit[hidden] { display: none; }
.g-visit > span { flex: 1 1 140px; } .g-visit b { color: var(--ice); }
.g-visit .btn { padding: 6px 12px; font-size: 13px; }
.g-vmine { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--white); font: 800 12.5px var(--body); cursor: pointer; }
.g-vmine:hover { border-color: var(--white); }
.g-hint { font-size: 11.5px; color: #ffb547; font-weight: 700; line-height: 1.3; }   /* orange = warning: these apartments are not built yet */
/* Help (logged out) bottom right; phones: small round buttons on the right (view settings + "?") */
.g-side { position: absolute; right: 20px; bottom: calc(20px + var(--safe-b)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.g-help { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 18px 0 7px; border-radius: 999px; border: 2px solid var(--white); background: linear-gradient(180deg, var(--cob1), var(--cob2)); color: var(--white); font: 400 19px var(--display); box-shadow: 0 12px 30px rgba(3, 6, 30, 0.5); cursor: pointer; }
.g-help i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--cob2); font: 400 22px/1 var(--display); font-style: normal; }
.g-help:hover, .g-help.on { filter: brightness(1.12); }
/* Help stays bottom right for everyone, logged in or not (Adrian 19.10.) – the account menu keeps its extra entry */
.g-round { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); background: rgba(8, 14, 40, 0.9); color: var(--white); box-shadow: 0 8px 20px rgba(3, 6, 30, 0.5); cursor: pointer; }
.g-round svg { width: 20px; height: 20px; }
.g-round.on { background: linear-gradient(180deg, var(--cob1), var(--cob2)); }

/* ---------- sheets: Jobs, Guide, view settings ---------- */
.g-scrim { position: fixed; inset: 0; z-index: calc(var(--gz) + 5); background: rgba(3, 6, 30, 0.55); }
.g-sheet { position: fixed; z-index: calc(var(--gz) + 6); left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(900px, calc(100% - 40px)); max-height: calc(100% - 60px); display: flex; flex-direction: column;
  background: #0b1440; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 24px; box-shadow: 0 30px 80px rgba(2, 6, 30, 0.7); overflow: hidden; animation: gIn 0.2s ease-out; }
@keyframes gIn { from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); } }
@media (min-width: 760px) {   /* Jobs / Help / Your apartment hang from the top and stop above the bar, so you always see where you are */
  .g-sheet.g-big { top: 24px; transform: translateX(-50%); max-height: calc(100% - 24px - 96px); animation-name: gInTop; }
  @keyframes gInTop { from { opacity: 0; transform: translate(-50%, 14px); } }
}
.g-sh-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px 22px; border-bottom: 1px solid var(--gline); }
.g-sh-h b { font: 400 24px var(--display); margin-right: auto; }
.g-sh-h .x .ti, .intro-card .x .ti { width: 18px; height: 18px; vertical-align: middle; }
.g-sh-h .x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--white); font-size: 20px; cursor: pointer; }
.g-sh-h .g-follow { padding: 7px 16px; font-size: 15px; }
.g-sh-body { overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 24px; -webkit-overflow-scrolling: touch; }
.g-tabs { flex: none; display: flex; gap: 6px; padding: 10px 16px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scrollbar-width: none; border-bottom: 1px solid var(--gline); }   /* flex: none – the sheet must not squeeze the strip (it clipped the tabs and let them scroll up and down) */
.g-tabs::-webkit-scrollbar { display: none; }
.g-tabs button { flex: none; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--gline); background: rgba(255, 255, 255, 0.04); color: var(--muted); font: 800 13.5px var(--body); cursor: pointer; }
.g-tabs button:hover { color: var(--white); }
.g-tabs button.on { color: var(--white); background: linear-gradient(180deg, var(--cob1), var(--cob2)); border-color: rgba(255, 255, 255, 0.85); }
.g-title { font-size: clamp(26px, 4vw, 34px); margin-bottom: 8px; }
.g-lead { color: var(--muted); font-size: 15.5px; margin-bottom: 16px; }
.g-h4 { margin: 22px 0 10px; font: 800 12px var(--body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.g-sheet .plate { margin-bottom: 4px; color: var(--white); cursor: default; }
.g-sheet .plate:hover { transform: none; }
.g-sheet .steps { grid-template-columns: 1fr; }
.g-sheet .step { grid-template-columns: 110px 1fr; grid-template-rows: none; }
.g-sheet .step .pic { height: auto; min-height: 110px; }
.g-sheet .step .txt { padding: 14px 16px; } .g-sheet .step h3 { font-size: 20px; } .g-sheet .step p { font-size: 14px; }
@media (min-width: 900px) { .g-sheet .steps { grid-template-columns: repeat(3, 1fr); } .g-sheet .step { grid-template-columns: 1fr; grid-template-rows: 120px auto; } .g-sheet .step .pic { min-height: 0; } }
.g-sheet .subhead { margin-top: 18px; }
.g-sheet .eps { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.g-sheet .jobs-more { grid-template-columns: 1fr; }
@media (min-width: 900px) { .g-sheet .jobs-more { grid-template-columns: 1.1fr 0.9fr; } }
.g-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.g-links .btn { font-size: 15px; padding: 8px 16px; }
#gTools { width: auto; min-width: 280px; }
#gTools .g-sh-h b { font-size: 19px; }

/* ---------- your resident file (Steckbrief): a light card, like an ID from the tower office (Adrian 18.10.) ---------- */
.rf { --ink: #0b1236; --paper: #fbf5e6; --rule: #e6dcc3; --soft: #857f6c; position: relative; margin: 2px 0 14px; border-radius: 24px; background: var(--paper); color: var(--ink); border: 4px solid var(--white); box-shadow: 0 20px 50px rgba(2, 6, 30, 0.55); overflow: hidden; }
.rf-h { display: flex; align-items: center; gap: 12px; padding: 11px 20px; background: linear-gradient(180deg, var(--cob1), var(--cob2)); color: var(--white); }
.rf-h b { font: 400 19px var(--display); letter-spacing: 0.04em; text-transform: uppercase; }
.rf-h small { margin-left: auto; font: 800 11.5px var(--body); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.88; }
.rf-b { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; padding: 18px 20px 16px; }
.rf-photo { position: relative; align-self: start; }
.rf-photo .jpic { height: 270px; border-radius: 16px; border: 3px solid var(--white); box-shadow: 0 8px 20px rgba(11, 18, 54, 0.25); }
.rf-photo .jpic.ph span { font-size: 96px; }
.rf-photo > .ji { position: absolute; right: 10px; top: 10px; width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-size: 26px; background: linear-gradient(180deg, var(--cob1), var(--cob2)); border: 3px solid var(--white); }
.rf-stamp { position: absolute; right: -18px; bottom: -16px; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center; border: 4px solid #d99a12; color: #b97c08; background: rgba(255, 213, 74, 0.2); font: 400 14px/1.05 var(--display); letter-spacing: 0.02em; text-transform: uppercase; transform: rotate(-14deg); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.6); }
.rf-stamp small { display: block; font: 800 9px/1.4 var(--body); letter-spacing: 0.16em; }
.rf-stamp.claim { border-style: dashed; border-color: #2747d8; color: #2747d8; background: rgba(58, 98, 240, 0.1); }
.rf-stamp.claim:hover { background: rgba(58, 98, 240, 0.2); }
.rf-main { min-width: 0; }
.rf-name { font: 400 40px/1 var(--display); margin: 0 0 4px; color: var(--ink); text-shadow: none; overflow-wrap: anywhere; }
.rf-sub { margin: 0 0 14px; font: 700 14px/1.4 var(--body); color: #4f5878; } .rf-sub b { color: var(--ink); }
.rf-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.rf-fields > div { min-width: 0; padding: 8px 12px; border-radius: 12px; background: var(--white); border: 1.5px solid var(--rule); }
.rf-fields small { display: block; font: 800 9.5px var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.rf-fields b { display: flex; align-items: center; gap: 6px; font: 800 15px/1.3 var(--body); }
.rf-fields b i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #c9c2ad; } .rf-fields b i.on { background: #ffb52e; box-shadow: 0 0 8px #ffc95a; }
.rf-packet { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--ink); color: var(--white); margin-bottom: 10px; }
.rf-packet small { display: block; font: 800 10px var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.rf-coins { display: flex; gap: 5px; flex-wrap: wrap; }
.rf-coins i { width: 24px; height: 24px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, 0.25); box-sizing: border-box; }
.rf-coins.many { gap: 3px; } .rf-coins.many i, .rf.mini .rf-coins.many i { width: 11px; height: 11px; border-width: 1.5px; }   /* 28 tower days (20.10.) */
.rf-coins i.on { border: 2px solid #fff3c4; background: radial-gradient(circle at 35% 30%, #fff2a8, #ffd54a 55%, #d99a12); }
.rf-packet > b { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 400 30px/1 var(--display); color: var(--gold); white-space: nowrap; }
.rf-packet.wait > b { color: #d6c48c; } .rf-packet > b svg { width: 16px; height: 16px; }
.rf-shift { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 2px dashed #cfc5aa; font: 700 14px/1.35 var(--body); }
.rf-shift em { flex: none; font: 900 10.5px var(--body); font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: var(--gold); margin-top: 1px; }
.rf-shift small { display: block; color: var(--soft); font-size: 12px; font-weight: 800; margin-top: 2px; }
.rf-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.rf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; border-radius: 12px; border: 0; background: linear-gradient(180deg, var(--cob1), var(--cob2)); color: var(--white); font: 800 14px var(--body); cursor: pointer; }
.rf-btn[disabled] { cursor: not-allowed; background: transparent; border: 1.5px dashed #c9c0a6; color: var(--soft); }
.rf-btn svg { width: 15px; height: 15px; }
/* sponsor gifts inside the file (Adrian 25.10.) */
.rf-items { margin-bottom: 12px; padding: 8px 10px 10px; border-radius: 12px; background: var(--white); border: 1.5px solid var(--rule); }
.rf-items > small { display: block; margin: 0 2px 7px; font: 800 9.5px var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); }
.rf-items > p { margin: 0 2px; font: 700 13px/1.35 var(--body); color: #4f5878; }
.rf-it { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rf-i { min-width: 0; text-align: center; }
.rf-ip { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #ececec; border: 1px solid var(--rule); }
.rf-ip img { width: 100%; height: 100%; object-fit: cover; display: block; } .rf-ip em { font-style: normal; font-size: 30px; }
.rf-i b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-top: 5px; font: 800 12px/1.2 var(--body); color: var(--ink); overflow: hidden; overflow-wrap: anywhere; text-transform: capitalize; }
.rf-i > em { display: block; font: 700 10.5px/1.2 var(--body); font-style: normal; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* your own file: the way to the character editor (character.html, 21.10.) */
.rf-char { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: var(--white); border: 1.5px solid var(--rule); color: var(--ink); font: 800 14px var(--body); text-decoration: none; }
.rf-char:hover { border-color: var(--cob1); }
.rf-char > svg { flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 10px; background: linear-gradient(180deg, var(--cob1), var(--cob2)); color: var(--white); box-sizing: border-box; }
.rf-char span { flex: 1; } .rf-char em { font-style: normal; font-size: 20px; color: var(--soft); }
.rf-f { display: flex; align-items: center; gap: 14px; padding: 10px 20px 13px; border-top: 2px dashed var(--rule); font: 800 11.5px var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.rf-f i { flex: 0 1 220px; margin-left: auto; height: 24px; opacity: 0.85; background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 7px, transparent 7px 9px, var(--ink) 9px 10px, transparent 10px 14px); }
.rf-empty { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding: 16px; border-radius: 20px; background: rgba(127, 227, 255, 0.07); border: 1px solid rgba(127, 227, 255, 0.35); }
.rf-empty > svg { flex: none; width: 42px; height: 42px; padding: 9px; border-radius: 50%; color: #06204a; background: linear-gradient(180deg, #a5efff, #2b9fd6); border: 2px solid var(--white); box-sizing: border-box; }
.rf-empty span { flex: 1; } .rf-empty b { display: block; font: 400 21px var(--display); } .rf-empty small { display: block; color: var(--muted); font-size: 13.5px; font-weight: 700; }
#gMyJob .mj-lock { margin: 0 0 6px; }
/* someone else's file, or logged out: a small info card – no shift, no buttons (Adrian 18.10.) */
.rf.mini { max-width: 640px; margin-left: auto; margin-right: auto; }
.rf.mini .rf-b { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 14px 16px 12px; }
.rf.mini .rf-photo .jpic { height: 170px; } .rf.mini .rf-photo .jpic.ph span { font-size: 64px; }
.rf.mini .rf-photo > .ji { width: 38px; height: 38px; font-size: 20px; border-radius: 12px; }
.rf.mini .rf-stamp { width: 84px; height: 84px; right: -12px; bottom: -12px; font-size: 12px; }
.rf.mini .rf-name { font-size: 30px; } .rf.mini .rf-sub { margin-bottom: 10px; font-size: 13px; }
.rf.mini .rf-fields { gap: 6px; margin-bottom: 8px; } .rf.mini .rf-fields > div { padding: 6px 10px; } .rf.mini .rf-fields b { font-size: 13.5px; }
.rf.mini .rf-packet { margin-bottom: 0; padding: 8px 12px; } .rf.mini .rf-packet > b { font-size: 24px; } .rf.mini .rf-coins i { width: 20px; height: 20px; }
.rf.mini .rf-h { padding: 9px 16px; } .rf.mini .rf-h b { font-size: 16px; } .rf.mini .rf-f { padding: 8px 16px 10px; font-size: 10.5px; }
/* all jobs as picture cards (Adrian's pictures in img/jobs/<id>.jpg, until then drawn in the colour of the way to work) */
.jcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.jcards.sm { grid-template-columns: repeat(auto-fill, minmax(min(100%, 112px), 1fr)); gap: 8px; margin-top: 12px; }
.jcard { position: relative; border-radius: 18px; overflow: hidden; background: #0f1a52; border: 1px solid rgba(255, 255, 255, 0.14); }
.jcard.mine { border: 2px solid var(--gold); box-shadow: 0 0 0 3px rgba(255, 213, 74, 0.18); }
.jcard.mine::after { content: 'Your job'; position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--gold); color: #3a2600; font: 900 10px var(--body); letter-spacing: 0.1em; text-transform: uppercase; }
.jpic { position: relative; height: 96px; display: grid; place-items: center; overflow: hidden; }
.jpic img { width: 100%; height: 100%; object-fit: cover; }
.jpic.ph::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 10px, transparent 10px 22px), radial-gradient(120% 90% at 50% 110%, rgba(0, 0, 0, 0.28), transparent 60%); }
.jpic.ph span { position: relative; font-size: 46px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35)); }
.jpic.r-bus { background: linear-gradient(160deg, #4f7dff, #7a46e8); }
.jpic.r-village { background: linear-gradient(160deg, #47c97c, #1d8f6a); }
.jpic.r-car { background: linear-gradient(160deg, #ffb347, #f0643c); }
.jpic.r-home { background: linear-gradient(160deg, #ff7eb3, #8a4dff); }
.jpic.r-in { background: linear-gradient(160deg, #2b3a8f, #4fa6e8); }
.jc-t { padding: 9px 12px 11px; display: grid; gap: 1px; }
.jc-t b { font: 400 17px/1.15 var(--display); }
.jc-t small { color: var(--muted); font: 700 12px/1.3 var(--body); display: inline-flex; align-items: center; gap: 4px; }
.jc-t small svg { width: 12px; height: 12px; color: var(--gold); }
.jc-t em { font: 800 12px var(--body); font-style: normal; color: var(--ice); margin-top: 3px; }
.jcards.sm .jpic { height: 64px; } .jcards.sm .jpic.ph span { font-size: 32px; } .jcards.sm .jc-t b { font-size: 15px; }
.jcard.locked .jpic { filter: grayscale(0.85) brightness(0.7); } .jcard.locked .jc-t b { color: var(--muted); }
/* ---------- Help: the caretaker answers ---------- */
.hc { display: grid; gap: 10px; }
.hc-msg { display: flex; align-items: flex-end; gap: 10px; }
.hc-msg p { margin: 0; max-width: 560px; padding: 11px 15px; border-radius: 20px 20px 20px 6px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--gline); font: 700 15px/1.45 var(--body); }
.hc-msg p a { text-decoration: underline; }
.hc-msg.me { justify-content: flex-end; }
.hc-msg.me p { border-radius: 20px 20px 6px 20px; background: linear-gradient(180deg, var(--cob1), var(--cob2)); border-color: rgba(255, 255, 255, 0.5); }
.hc-av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--white); border: 2px solid var(--ice); }
.hc-av img { width: 24px; height: 24px; }
.hc-act { display: flex; margin-top: 10px; }
#hcLog { display: grid; gap: 10px; }
.hc-qs { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 46px; margin-top: 4px; }
.hc-qs button { padding: 9px 14px; border-radius: 999px; border: 1.5px solid rgba(127, 227, 255, 0.55); background: rgba(127, 227, 255, 0.06); color: var(--ice); font: 800 14px var(--body); cursor: pointer; }
.hc-qs button:hover { background: rgba(127, 227, 255, 0.16); border-color: var(--ice); }
.hc-done { color: var(--muted); font-size: 13.5px; font-weight: 700; }
.hc-pick { width: 100%; color: var(--muted); font-size: 13.5px; font-weight: 700; }   /* Hilfe nach Themen (27.10.2026) */
.hc-qs button.hc-tp { border-color: rgba(246, 205, 90, 0.7); background: rgba(246, 205, 90, 0.1); color: #f6cd5a; }
.hc-qs button.hc-back { border-style: dashed; color: var(--muted); border-color: rgba(255, 255, 255, 0.3); background: none; }
.open-places { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 4px 12px; }
.open-places span { padding: 7px 12px; border-radius: 999px; background: rgba(108, 203, 176, 0.14); border: 1.5px solid rgba(108, 203, 176, 0.6); color: #bff0e2; font-weight: 800; font-size: 13px; }


/* ---------- outside view: full screen, logo opens the guide, status block on the left under the clock ---------- */
.g-outside .top { display: none; }
.g-outside .live-tv { height: 100vh; height: 100dvh; min-height: 0; }
.g-outside .hud-logo { cursor: pointer; }
.ilogo { cursor: pointer; }
@media (min-width: 760px) {
  /* the header is gone: the logo sits above the free clock (tap = guide), the self-sufficiency chip moves down with it */
  .g-outside .live-tv .hud-top { flex-direction: column; align-items: flex-start; gap: 4px; }
  .g-outside .live-tv .hud-logo { display: block; height: 28px; margin-left: 4px; filter: drop-shadow(0 3px 8px rgba(3, 6, 30, 0.7)); }
  .g-outside .live-tv .hud-aut { top: calc(var(--e) + 192px); }
  /* the follower count is the project's core number: a chip right under the clock (phones: in the View sheet) */
  .g-outside .live-tv .hud-count { left: var(--e); top: calc(var(--e) + 150px); display: flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(8, 14, 40, 0.7); font-size: 12.5px; font-weight: 800; color: var(--muted); white-space: nowrap; }
  .g-outside .live-tv .hud-count i { align-self: center; width: 8px; height: 8px; border-radius: 50%; background: #ff5a6e; box-shadow: 0 0 8px #ff5a6e; }
  .g-outside .live-tv .hud-count > b { font: 400 17px var(--display); color: var(--white); }
  .g-outside .live-tv .hud-count small { font: 800 10px var(--body); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); }
  .g-outside .live-tv .hud-count span { margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--gline); } .g-outside .live-tv .hud-count span b { color: var(--ice); }
  .g-outside .newv { top: 96px; }
}

.hud-count { display: none; }
/* ---------- inside view: the inside view's own cards make room for the bar ---------- */
.g-inside:has(#cardOwn:not([hidden])) #card { display: none; }   /* clicked your own apartment: your card in the bar already shows it (Follow is on it) */
.g-inside #cardOwn { display: none !important; }   /* your apartment lives in the bar now */
.g-inside #card .irow:has(> #follow) { display: none; }   /* "Follow resident" on another apartment's card: nobody understood it (Adrian 18.10.) – hidden, the inside view's code still finds the button */
@media (min-width: 760px) {
  .g-inside #card { bottom: 104px; }
  .g-inside:has(.g-pop:not([hidden])) #card { display: none; }
  .g-inside #legend { bottom: 104px; }
  .g-inside #help { bottom: auto; top: 64px; opacity: 0.9; }
  .g-inside #crumbs { top: 20px; }
  .g-inside #tip { top: 110px; }
  .g-inside #lift { top: calc(50% - 20px); }
}
@media (min-width: 760px) and (max-width: 1100px) { .g-inside #help { display: none; } }

/* ---------- home view (apartment.html): your apartment fills the screen; gifts, facts, where and "Make it yours" live in the #gHome sheet ---------- */
.g-home .home-tv { position: fixed; inset: 0; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.g-home .home-logo { position: absolute; z-index: 3; top: 24px; left: 24px; display: block; line-height: 0; }
.g-home .home-logo .hud-logo { height: 30px; filter: drop-shadow(0 3px 8px rgba(3, 6, 30, 0.7)); cursor: pointer; }
.g-home .home-tv .tv-ui { left: 50%; right: auto; top: 20px; bottom: auto; transform: translateX(-50%); flex-wrap: nowrap; }
.g-home .tv-ui button { display: inline-flex; align-items: center; gap: 6px; }
.g-home .tv-ui button svg { width: 16px; height: 16px; flex: none; }
.g-home .home-tv .tv-hint { top: 76px; bottom: auto; }
@media (min-width: 760px) and (max-width: 1180px) {
  .g-home .home-tv .tv-ui { left: 24px; transform: none; top: 70px; }
  .g-home .home-tv .tv-hint { top: 124px; left: 24px; transform: none; }
}
.home-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.hh-n { display: grid; justify-items: center; min-width: 76px; padding: 6px 10px; border-radius: 18px; border: 2px solid var(--white); background: linear-gradient(180deg, var(--cob1), var(--cob2)); box-shadow: 0 6px 16px rgba(5, 10, 40, 0.45); }
.hh-n small { font: 800 9.5px var(--body); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.8; }
.hh-n b { font: 400 40px var(--display); line-height: 1; }
.hh-who { min-width: 0; display: grid; gap: 2px; }
.hh-who .rc-who { display: inline-flex; align-items: center; gap: 8px; color: var(--ice); font-weight: 900; font-size: 20px; word-break: break-all; }
.hh-who .rc-who svg { width: 20px; height: 20px; flex: none; }
.hh-who span { color: var(--muted); font-weight: 800; font-size: 14px; }
#gHome .rc-facts { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 16px; font-size: 14px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--gline); }
#gHome .rc-facts span { font-size: 10.5px; }
#gHome .rc-facts b { white-space: normal; }
.decorate { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; margin: 16px 0 6px; padding: 18px; border-radius: 20px; border: 1px solid rgba(255, 213, 74, 0.45); background: linear-gradient(135deg, rgba(255, 213, 74, 0.13), rgba(58, 98, 240, 0.12) 60%), rgba(255, 255, 255, 0.02); }
.decorate[hidden] { display: none; }
.dc-ico { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; color: #3a2600; background: linear-gradient(180deg, #ffe58a, #e5a21c); border: 3px solid var(--white); box-shadow: 0 6px 16px rgba(5, 10, 40, 0.45); }
.dc-ico svg { width: 26px; height: 26px; }
.dc-txt h3 { margin: 8px 0 6px; font-size: 26px; }
.dc-txt p { margin: 0; font-size: 15px; color: var(--muted); }
.dc-txt p b { color: var(--gold); }
.dc-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dc-have { flex: 1 1 200px; display: grid; padding: 10px 14px; border-radius: 14px; background: rgba(4, 8, 30, 0.5); border: 1px solid rgba(255, 213, 74, 0.5); }
.dc-have small { font: 800 10.5px var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.dc-have b { font: 400 28px var(--display); color: var(--gold); line-height: 1.1; }
.dc-have span { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.dc-tier { flex: 1 1 120px; display: grid; align-content: center; gap: 2px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px dashed var(--gline); opacity: 0.75; }
.dc-tier b { font-size: 14px; } .dc-tier span { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.dc-tier.ok { opacity: 1; border-style: solid; border-color: rgba(127, 227, 255, 0.55); background: rgba(127, 227, 255, 0.08); }
.dc-tier.ok span { color: var(--ice); }
#gHome .g-h4 .muted { font-weight: 800; letter-spacing: 0.06em; }
#gHome .cabinet { margin: 0 0 6px; }
#gHome .cab-shelves { padding-top: 14px; grid-template-columns: repeat(8, minmax(0, 1fr)); }
#gHome .where-body { padding: 0; }
@media (min-width: 900px) { #gHome .where-body { grid-template-columns: 380px 1fr; align-items: center; } }

/* small laptops / tablets: a more compact bar, so the inside view's map and elevator keep their space */
@media (min-width: 760px) and (max-width: 1180px) {
  .g-mebtn { padding-right: 10px; } .g-mebtn .lbl { max-width: 90px; }
  .g-switch button { padding: 0 13px; }
  .g-jobbtn.has .jt { display: none; }
  .g-inside .g-mebtn .lbl { display: none; } .g-inside .g-mebtn { gap: 4px; padding-right: 8px; }
}
/* ---------- phones: the view fills the screen, the bar at the bottom, small round buttons on the right ---------- */
@media (max-width: 759px) {
  .g-on { --dock-h: 58px; }
  .g-dock { left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); transform: none; }
  .g-bar { gap: 5px; padding: 5px; }
  .g-mebtn { height: 46px; padding: 0 4px; gap: 0; } .g-mebtn .n { min-width: 36px; height: 36px; font-size: 18px; } .g-mebtn .lbl, .g-mebtn .car { display: none; }
  .g-mebtn.search { width: 46px; padding: 0; justify-content: center; } .g-mebtn.search svg { width: 21px; height: 21px; }
  .g-switch { flex: 1; min-width: 0; }
  .g-switch button { flex: 1; min-width: 0; flex-direction: column; justify-content: center; gap: 1px; height: 44px; padding: 0 2px; font-size: 11.5px; letter-spacing: 0; }
  .g-switch button svg { width: 18px; height: 18px; }
  .g-edbtn { flex-direction: column; justify-content: center; gap: 1px; width: 52px; height: 46px; padding: 0; font-size: 10.5px; letter-spacing: 0; border-width: 2px; }
  .g-edbtn svg { width: 18px; height: 18px; }
  .g-ed { position: static; }
  .g-edmenu { position: fixed; left: 10px; right: 10px; width: auto; transform: none; bottom: calc(10px + var(--dock-h) + 12px + var(--safe-b)); animation-name: gEdUpM; }
  .g-edmenu::after { left: auto; right: 75px; }
  @keyframes gEdUpM { from { opacity: 0; transform: translateY(8px); } }
  body.g-ed-on .g-side { display: none; }
  .g-jobbtn, .g-jobbtn.has { width: 46px; height: 46px; padding: 0; justify-content: center; border-width: 2px; }
  .g-jobbtn .jt, .g-jobbtn b { display: none; } .g-jobbtn .ji { width: 34px; height: 34px; font-size: 18px; } .g-jobbtn > svg { width: 21px; height: 21px; }
  .g-pop { right: 0; width: auto; }
  .g-acts .g-show { flex-basis: 100%; }
  .g-side { right: 12px; bottom: calc(10px + var(--dock-h) + 12px + var(--safe-b)); }
  .g-help { width: 42px; height: 42px; padding: 0; justify-content: center; border-width: 2px; background: rgba(8, 14, 40, 0.9); box-shadow: 0 8px 20px rgba(3, 6, 30, 0.5); }
  .g-help span { display: none; } .g-help i { width: auto; height: auto; background: none; color: var(--white); font-size: 22px; }
  body:has(.g-pop:not([hidden])) .g-side { display: none; }
  .g-tabs { padding-right: 40px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  .g-card .lc-menu { left: 0; right: 0; width: auto; }

  .g-sheet { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; max-height: 88%; border-radius: 24px 24px 0 0; padding-bottom: var(--safe-b); animation: gUp 0.22s ease-out; }
  @keyframes gUp { from { transform: translateY(30px); opacity: 0; } }
  .g-sh-h { padding: 12px 12px 10px 18px; } .g-sh-h b { font-size: 21px; }
  .g-sh-body { padding: 14px 14px 22px; }
  #gTools { min-width: 0; bottom: calc(10px + var(--dock-h) + 8px + var(--safe-b)); left: 10px; right: 10px; border-radius: 20px; max-height: calc(100% - 150px); }
  #gTools .g-sh-body { display: grid; gap: 10px; }
  #gToolsBody .tv-ui button { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border: 2px solid var(--white); border-radius: 999px; padding: 7px 14px; background: rgba(11, 18, 54, 0.78); color: var(--white); font: 800 13px var(--body); letter-spacing: 0.04em; }
  #gToolsBody .tv-ui button.on { background: linear-gradient(180deg, var(--cob1), var(--cob2)); }
  #gToolsBody .tv-ui button svg { width: 16px; height: 16px; margin: 0; }
  /* resident file on a phone: photo on top, smaller */
  .rf-b { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .rf-photo .jpic { height: 170px; } .rf-photo .jpic.ph span { font-size: 70px; }
  .rf-stamp { width: 88px; height: 88px; right: 8px; bottom: -14px; font-size: 14px; }
  .rf-name { font-size: 32px; } .rf-h { padding: 10px 14px; } .rf-h b { font-size: 16px; } .rf-h small { font-size: 10px; letter-spacing: 0.1em; }
  .rf-fields { grid-template-columns: 1fr 1fr; } .rf-fields b { font-size: 13.5px; }
  .rf-f { padding: 9px 14px 12px; font-size: 10px; }
  .rf.mini .rf-b { grid-template-columns: 1fr; } .rf.mini .rf-photo .jpic { height: 120px; } .rf.mini .rf-name { font-size: 26px; }
  .hc-qs { padding-left: 0; } .hc-msg p { font-size: 14.5px; }

  /* the views make room for the bar */
  .g-outside .live-tv .tv-lift { top: 40%; }
  .g-outside .live-tv .newv { top: auto; bottom: 150px; }
  .g-inside #card { bottom: calc(10px + var(--dock-h) + 10px + var(--safe-b)); left: 10px; right: 10px; }
  .g-inside #crumbs { bottom: calc(10px + var(--dock-h) + 10px + var(--safe-b)); left: 10px; max-width: calc(100% - 70px); }
  .g-inside:has(#card:not([hidden])) #crumbs, .g-inside:has(.g-pop:not([hidden])) #crumbs, .g-inside:has(.g-pop:not([hidden])) #card { display: none; }   /* your open card takes the space */
  .g-inside:has(#card:not([hidden])):not(:has(#cardOwn:not([hidden]))) .g-side { display: none; }   /* another apartment's card is open down there */
  .g-inside #tip { bottom: 150px; }
  .g-inside #help { display: none; }
  .g-home .home-logo { top: calc(14px + env(safe-area-inset-top, 0px)); left: 14px; } .g-home .home-logo .hud-logo { height: 24px; }
  .g-home .home-tv .tv-hint { top: calc(50px + env(safe-area-inset-top, 0px)); }
  .home-head { gap: 12px; } .hh-n { min-width: 62px; } .hh-n b { font-size: 32px; } .hh-who .rc-who { font-size: 17px; }
  #gHome .rc-facts { grid-template-columns: 1fr 1fr; padding: 12px; font-size: 13px; }
  .decorate { grid-template-columns: 1fr; padding: 14px; gap: 10px; } .dc-ico { width: 44px; height: 44px; border-radius: 14px; } .dc-txt h3 { font-size: 22px; }
  #gHome .cab-shelves { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 10px 4px; }
}
@media (max-width: 360px) { .g-switch button span { font-size: 10.5px; } }


/* touch devices: no live blur behind HUD panels over the 3D view (re-blurred every frame) */
@media (hover: none), (pointer: coarse) {
  .g-bar, .g-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(8, 14, 40, 0.92); }
}

/* first-visit tour: same card height on every step, so Next stays put */
.g-on .intro-body { min-height: 266px; box-sizing: border-box; }   /* tallest step (Coming soon) is ~258 px */
@media (max-width: 420px) { .g-on .intro-body { min-height: 270px; } }
@media (max-width: 370px) { .g-on .intro-body { min-height: 300px; } }

/* lock notes (wages, Creds) */
.mj-lock { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 213, 74, 0.08); border: 1px solid rgba(255, 213, 74, 0.38); font-size: 13.5px; font-weight: 700; color: var(--muted); }
.mj-lock svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--gold); }
.mj-lock b { color: var(--white); }
.mj-lock[hidden] { display: none; }

/* locked actions (room editor until claiming): greyed out, nothing happens */
.decorate.locked { filter: grayscale(0.7); opacity: 0.66; }
.decorate.locked .tag { display: inline-flex; align-items: center; gap: 6px; }
.decorate.locked .tag svg { width: 13px; height: 13px; }

/* Creds live (18.10.): a button that has something for you breathes softly – no bounce, just a slow glow */
.rf-btn.ready { animation: rfReady 2.4s ease-in-out infinite; }
@keyframes rfReady { 0%, 100% { box-shadow: 0 0 0 0 rgba(127, 227, 255, 0); filter: brightness(1); } 50% { box-shadow: 0 0 0 5px rgba(127, 227, 255, 0.28), 0 6px 18px rgba(28, 74, 196, 0.35); filter: brightness(1.12); } }
.rf-btn.done { background: transparent; border: 1.5px solid #9bd7a5; color: #2f7a3e; cursor: default; }
.rf-btn.busy { opacity: 0.6; pointer-events: none; }
.rf-bal { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-radius: 12px; background: rgba(255, 210, 63, 0.14); border: 1px solid rgba(255, 210, 63, 0.5); margin-bottom: 10px; font: 800 12px var(--body); }
.rf-bal b { font: 400 22px/1 var(--display); color: #8a6a00; }
.rf-bal small { display: block; font: 700 11px var(--body); color: var(--soft); }
@media (prefers-reduced-motion: reduce) { .rf-btn.ready { animation: none; box-shadow: 0 0 0 3px rgba(127, 227, 255, 0.3); } }
.rf-msg { margin: 8px 0 0; font: 800 12px var(--body); color: #2f7a3e; }

/* At work right now (js/hud.js workOf, Adrian 19.10.2026): blinking badge on the photo, orange "right now", a progress bar until home time;
   the shift pay only unlocks once you're back */
.rf-work { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px; background: #ff7a00; color: #fff;
  font: 800 12.5px var(--body); letter-spacing: 0.08em; text-transform: uppercase; border: 2px solid #ffe0bd; box-shadow: 0 6px 16px rgba(160, 60, 0, 0.45); animation: rfWorkGlow 1.4s ease-in-out infinite; }
.rf-work i, .g-jobbtn .wdot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: rfBlink 1s steps(2, start) infinite; }
@keyframes rfBlink { to { visibility: hidden; } }
@keyframes rfWorkGlow { 0%, 100% { box-shadow: 0 6px 16px rgba(160, 60, 0, 0.45), 0 0 0 0 rgba(255, 122, 0, 0.6); } 50% { box-shadow: 0 6px 16px rgba(160, 60, 0, 0.45), 0 0 0 8px rgba(255, 122, 0, 0); } }
.rf-now.work b { color: #d65a00; }
.rf-now.work b i { background: #ff7a00 !important; box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.25); animation: rfBlink 1s steps(2, start) infinite; }
.rf-wbar { margin-top: 12px; padding: 10px 12px 12px; border-radius: 14px; background: #fff3e6; border: 1.5px solid #ffc58a; }
.rf-wbar span { display: block; font: 700 13px/1.3 var(--body); color: #7a3a00; }
.rf-wbar span b { color: #d65a00; }
.rf-wbar i { display: block; height: 8px; margin-top: 8px; border-radius: 99px; background: linear-gradient(90deg, #ff7a00 var(--p, 0%), #ffe0bd var(--p, 0%)); transition: background 1s linear; }
.rf-btn.working { cursor: default; background: #fff3e6; border: 1.5px solid #ffc58a; color: #b34c00; }
.g-jobbtn .ji { position: relative; }
.g-jobbtn .wdot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; background: #ff7a00; border: 2px solid #fff; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .rf-work, .rf-work i, .g-jobbtn .wdot, .rf-now.work b i { animation: none; } }

/* Apartment page: your items always visible on the right of the 3D view (Adrian 19.10.) – sponsor gifts on top, room items (notice board) below */
.g-home .apt-side { position: absolute; z-index: 4; right: 16px; top: 76px; width: 232px; max-height: calc(100% - 76px - 120px); overflow-y: auto; display: grid; gap: 10px; align-content: start; padding: 10px; border-radius: 18px; background: rgba(8, 14, 40, 0.82); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 14px 34px rgba(3, 6, 30, 0.45); backdrop-filter: blur(8px); color: var(--white); scrollbar-width: thin; }
.g-home .apt-side h5 { margin: 0 0 8px; font: 800 10.5px var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice); }
.g-home .apt-side h5 .muted { color: var(--muted); letter-spacing: 0.06em; text-transform: none; font-weight: 700; }
.g-home .apt-side .as-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.g-home .apt-side .as-tile { display: grid; justify-items: center; gap: 3px; padding: 7px 4px 6px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); text-align: center; }
.g-home .apt-side .as-tile .emoji { font-size: 24px; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.g-home .apt-side .as-tile b { font: 800 10.5px/1.15 var(--body); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-home .apt-side .as-tile small { font: 700 9.5px var(--body); color: var(--muted); }
.g-home .apt-side .as-empty { grid-column: 1 / -1; padding: 8px; border-radius: 12px; border: 1.5px dashed rgba(255, 255, 255, 0.18); font: 700 11px var(--body); color: var(--muted); text-align: center; }
.g-home .apt-side .as-items .nb-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.g-home .apt-side .as-items .nb-item { padding: 8px 4px 6px; border-radius: 12px; } .g-home .apt-side .as-items .nb-item svg { width: 36px; height: 36px; }
.g-home .apt-side .as-items .nb-item b { font-size: 12px; } .g-home .apt-side .as-items .nb-item small { font-size: 9.5px; }
.g-home .apt-side .as-items .nb-soon { display: none; }
@media (max-width: 759px) {
  .g-home .apt-side { right: 96px; left: 10px; top: auto; bottom: calc(118px + var(--safe-b, 0px)); width: auto; max-height: 150px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding: 8px; }   /* right: room for the settings + help buttons */
  .g-home .apt-side .as-row { display: flex; gap: 6px; overflow-x: auto; } .g-home .apt-side .as-tile { flex: 0 0 68px; }
  .g-home .apt-side .as-items .nb-items { display: flex; gap: 6px; overflow-x: auto; } .g-home .apt-side .as-items .nb-item { flex: 0 0 92px; }
}
.g-home .apt-side section { margin: 0; padding: 0; }
/* Edit Room (orange, wie die Apartment-Pille) + Character Editor (lila, wie Inside) unter den Sponsoren-Items – sanfter Puls (Adrian 21.10.) */
.g-home .apt-side .as-acts { display: grid; gap: 8px; }
.g-home .apt-side .as-btn { --pc: 255, 120, 70; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 12px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.85); color: #fff; font: 800 14px var(--body); text-decoration: none; white-space: nowrap; animation: asPulse 2.4s ease-in-out infinite; transition: filter 0.15s; }
.g-home .apt-side .as-btn[hidden] { display: none; }
.g-home .apt-side .as-btn svg { width: 18px; height: 18px; flex: none; }
.g-home .apt-side .as-btn:hover { filter: brightness(1.1); }
.g-home .apt-side .as-btn.edit { background: linear-gradient(180deg, #ffa078, #d94a22); }
.g-home .apt-side .as-btn.char { --pc: 150, 100, 255; background: linear-gradient(180deg, #a37bff, #5228c4); animation-delay: 1.2s; }
.g-home .apt-side .as-note { font: 700 11px/1.3 var(--body); color: var(--muted); text-align: center; }
@keyframes asPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--pc), 0.55), 0 6px 16px rgba(3, 6, 30, 0.4); } 50% { box-shadow: 0 0 0 7px rgba(var(--pc), 0), 0 6px 22px rgba(var(--pc), 0.45); } }
@media (prefers-reduced-motion: reduce) { .g-home .apt-side .as-btn { animation: none; } }
@media (max-width: 759px) {
  .g-home .apt-side { max-height: 210px; grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .g-home .apt-side:has(#asItemsSec:not([hidden])) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .g-home .apt-side .as-acts { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 6px; }
  .g-home .apt-side .as-btn { height: 40px; padding: 0 8px; gap: 6px; font-size: 12.5px; }
  .g-home .apt-side .as-note { grid-column: 1 / -1; }
}
.g-home .apt-side .as-tile b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.g-home .apt-side .as-tile .ico { display: block; line-height: 0; } .g-home .apt-side .as-tile .ico svg { width: 30px; height: 30px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
.g-home .apt-side .as-tile.gold { background: linear-gradient(180deg, rgba(255, 213, 74, 0.26), rgba(255, 213, 74, 0.08)); border-color: rgba(255, 213, 74, 0.55); }
/* resident file: progress to the next rank (Adrian 19.10.) */
.rf-rank { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin: 8px 0 2px; font: 800 11px var(--body); color: var(--soft); }
.rf-rank i { display: block; height: 9px; border-radius: 6px; background: rgba(11, 18, 54, 0.12); overflow: hidden; }
.rf-rank i b { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--cob1), var(--ice)); transition: width 0.6s ease; }
.rf-rank small { font: 800 11px var(--body); color: var(--soft); white-space: nowrap; }

/* how the rank points come together (Adrian 19.10.: every work day counts, the extra shift counts once more) */
.rf-rankhow { margin: 5px 0 0; font: 700 11.5px/1.3 var(--body); color: var(--soft, #6b6f7c); }
.rf-rankhow b { color: inherit; font-weight: 800; }

/* Adrian 21.10. (Navigation): no Outside/Inside/Apartment pills any more – on phones four real pills side by side that fill the bar: Find me · Editor · Visit · your job */
@media (max-width: 759px) {
  .g-bar { gap: 4px; padding: 4px; }
  .g-bar > .g-mebtn, .g-bar > .g-ed, .g-bar > .g-meetslot, .g-bar > .g-jobbtn { flex: 1 1 0; min-width: 0; }
  .g-bar .g-mebtn, .g-bar .g-mebtn.search, .g-bar .g-edbtn, .g-bar .g-jobbtn, .g-bar .g-jobbtn.has { width: 100%; height: 44px; padding: 0 8px; flex-direction: row; justify-content: center; gap: 5px; font-size: 12.5px; letter-spacing: 0; border-radius: 999px; box-sizing: border-box; min-width: 0; }
  .g-bar .g-ed { display: flex; } .g-bar .g-edbtn svg, .g-bar .g-mebtn svg, .g-bar .g-jobbtn > svg { width: 17px; height: 17px; }
  .g-bar .g-mebtn .lbl, .g-bar .g-jobbtn .jt { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .g-bar .g-mebtn .n { min-width: 26px; height: 26px; font-size: 13px; }
  .g-bar .g-jobbtn .ji { width: 26px; height: 26px; font-size: 14px; flex: none; }
}

/* Adrian 21.10.: all four pills in the bottom bar filled with their own colour, the same white type (font + colour) on each */
.g-bar .g-mebtn, .g-bar .g-mebtn.search, .g-bar .g-edbtn, .g-bar .g-jobbtn, .g-bar .g-jobbtn.has { border: 2px solid rgba(255, 255, 255, 0.85); color: #fff; font: 400 17px/1 var(--display); letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.g-bar .g-mebtn, .g-bar .g-mebtn.search, .g-bar .g-mebtn:hover, .g-bar .g-mebtn.open, .g-bar .g-mebtn.search:hover { background: linear-gradient(180deg, #5cb8ff, #1c63d6); border-color: #fff; }
.g-bar .g-mebtn .lbl { color: #fff; }
.g-bar .g-edbtn, .g-bar .g-edbtn:hover, .g-bar .g-edbtn.open { background: linear-gradient(180deg, #ff9a6a, #d94a22); color: #fff; }
.g-bar .g-jobbtn, .g-bar .g-jobbtn:hover, .g-bar .g-jobbtn.on { background: linear-gradient(180deg, #ffc94a, #c47d0e); }
.g-bar .g-jobbtn b, .g-bar .g-jobbtn b.wait { color: #fff; }
.g-bar .g-mebtn:hover, .g-bar .g-edbtn:hover, .g-bar .g-jobbtn:hover { filter: brightness(1.08); }
.g-bar .g-meetslot .meet:not(.open) { background: linear-gradient(180deg, #2bd4bf, #0f8f84); border: 2px solid rgba(255, 255, 255, 0.85); }
.g-bar .g-meetslot .meet:not(.open) .meet-h b { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.g-bar .g-meetslot .meet:not(.open) .meet-pin { background: rgba(255, 255, 255, 0.22); }
@media (max-width: 759px) { .g-bar .g-mebtn, .g-bar .g-mebtn.search, .g-bar .g-edbtn, .g-bar .g-jobbtn, .g-bar .g-jobbtn.has { font-size: 14px; } }
.g-bar .g-meetslot .meet:not(.open) .meet-h { padding: 5px 14px 5px 5px; }   /* 2 px border like the others: 48 px tall */
@media (max-width: 759px) { .g-bar .g-meetslot .meet:not(.open) .meet-h { height: 40px; padding: 0 8px; } }

/* ---------- bottom bar v3 (Adrian 21.10.: „poppt nicht, seelenlos – mehr Metallic, hochwertiger“) ----------
   Candy-metal like a mobile game: saturated multi-stop gradient with a hard reflection line, metal rim, glossy cap,
   a 3D lip underneath (pressed = lip shrinks) and a slow light sweep. Colours per button via --m-* tokens. */
.g-bar { background: linear-gradient(180deg, rgba(22, 30, 78, 0.92), rgba(8, 12, 40, 0.94)); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 16px 36px rgba(2, 4, 22, 0.6); padding: 7px 7px 10px; }
.g-bar .g-mebtn, .g-bar .g-mebtn.search { --m-hi: #d9f3ff; --m-1: #6cc4ff; --m-2: #2f7dff; --m-3: #1846d4; --m-lip: #0d2a8c; --m-rim: #b9e4ff; }
.g-bar .g-edbtn { --m-hi: #ffe1d2; --m-1: #ff9466; --m-2: #ff4f3a; --m-3: #d4202a; --m-lip: #7e0d1a; --m-rim: #ffc6ae; }
.g-bar .g-jobbtn, .g-bar .g-jobbtn.has { --m-hi: #fff7cf; --m-1: #ffd85a; --m-2: #ffae12; --m-3: #e07800; --m-lip: #8a4300; --m-rim: #ffe9a3; }
.g-bar .g-meetslot .meet:not(.open) { --m-hi: #d6fff3; --m-1: #4ff0c8; --m-2: #10c79d; --m-3: #06957a; --m-lip: #03594a; --m-rim: #a6f7e2; }
.g-bar .g-mebtn, .g-bar .g-mebtn.search, .g-bar .g-edbtn, .g-bar .g-jobbtn, .g-bar .g-jobbtn.has, .g-bar .g-meetslot .meet:not(.open),
.g-bar .g-mebtn:hover, .g-bar .g-mebtn.open, .g-bar .g-mebtn.search:hover, .g-bar .g-edbtn:hover, .g-bar .g-edbtn.open, .g-bar .g-jobbtn:hover, .g-bar .g-jobbtn.on {
  position: relative; isolation: isolate; color: #fff;
  background: linear-gradient(180deg, var(--m-hi) 0%, var(--m-1) 22%, var(--m-2) 49%, var(--m-3) 51%, var(--m-2) 82%, var(--m-1) 100%);
  border: 1.5px solid var(--m-rim);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.22), 0 4px 0 var(--m-lip), 0 9px 16px rgba(2, 4, 22, 0.5);
  text-shadow: 0 2px 0 var(--m-lip), 0 0 1px var(--m-lip);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
}
/* glossy cap + light sweep */
.g-bar .g-mebtn::before, .g-bar .g-edbtn::before, .g-bar .g-jobbtn::before, .g-bar .g-meetslot .meet:not(.open) .meet-h::before { content: ''; position: absolute; left: 7%; right: 7%; top: 2px; height: 42%; border-radius: 999px 999px 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.06)); pointer-events: none; z-index: -1; }
.g-bar .g-mebtn::after, .g-bar .g-edbtn::after, .g-bar .g-jobbtn::after, .g-bar .g-meetslot .meet:not(.open) .meet-h::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 48%, transparent 61%) no-repeat; background-size: 260% 100%; background-position: 160% 0; animation: gSheen 7s ease-in-out infinite; }
.g-bar .g-edbtn::after { animation-delay: 0.35s; } .g-bar .g-meetslot .meet:not(.open) .meet-h::after { animation-delay: 0.7s; } .g-bar .g-jobbtn::after { animation-delay: 1.05s; }
@keyframes gSheen { 0%, 78% { background-position: 160% 0; } 92%, 100% { background-position: -60% 0; } }
.g-bar .g-meetslot .meet:not(.open) .meet-h { position: relative; isolation: isolate; overflow: hidden; border-radius: 999px; }
.g-bar .g-mebtn, .g-bar .g-edbtn, .g-bar .g-jobbtn { overflow: hidden; }
.g-bar .g-mebtn:hover, .g-bar .g-edbtn:hover, .g-bar .g-jobbtn:hover, .g-bar .g-meetslot .meet:not(.open):hover { filter: brightness(1.07) saturate(1.08); transform: translateY(-1px); }
.g-bar .g-mebtn:active, .g-bar .g-edbtn:active, .g-bar .g-jobbtn:active, .g-bar .g-meetslot .meet:not(.open):active { transform: translateY(3px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.22), 0 1px 0 var(--m-lip), 0 4px 8px rgba(2, 4, 22, 0.5); }
.g-bar .g-mebtn .lbl, .g-bar .g-jobbtn b, .g-bar .g-jobbtn b.wait, .g-bar .g-meetslot .meet:not(.open) .meet-h b { color: #fff; text-shadow: 0 2px 0 var(--m-lip), 0 0 1px var(--m-lip); }
/* coins inside the buttons (apartment number, job icon, pin): dark metal socket with a bright rim */
.g-bar .g-mebtn .n, .g-bar .g-jobbtn .ji, .g-bar .g-meetslot .meet:not(.open) .meet-pin { background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, var(--m-3), var(--m-lip)); border: 2px solid #fff; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.35); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.g-bar .g-mebtn.ver .n { box-shadow: 0 0 0 2px #ffd54a, inset 0 -2px 3px rgba(0, 0, 0, 0.35); }
.g-bar .g-meetslot .meet:not(.open) .meet-h .live { background: rgba(3, 60, 50, 0.35); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); }
@media (prefers-reduced-motion: reduce) { .g-bar .g-mebtn::after, .g-bar .g-edbtn::after, .g-bar .g-jobbtn::after, .g-bar .g-meetslot .meet:not(.open) .meet-h::after { animation: none; } }
/* Adrian 21.10. (Leiste neu): Jobs live on your Find me card as a gold line; where the Jobs pill was sits the Emotes pill (pink) with its menu upward */
.g-jobrow { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 52px; padding: 7px 12px 7px 7px; border-radius: 18px; border: 2px solid rgba(255, 255, 255, 0.85); background: linear-gradient(180deg, #ffc94a, #c47d0e); color: #fff; font: 400 17px/1.05 var(--display); letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); cursor: pointer; text-align: left; }
.g-jobrow:hover, .g-jobrow.on { filter: brightness(1.08); }
.g-jobrow[hidden] { display: none; }
.g-jobrow > svg { width: 22px; height: 22px; flex: none; margin-left: 6px; }
.g-jobrow .ji { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 19px; background: linear-gradient(180deg, var(--cob1), var(--cob2)); border: 2px solid var(--white); text-shadow: none; }
.g-jobrow .jt { flex: 1; min-width: 0; display: grid; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.g-jobrow .jt small { font: 800 10.5px/1.2 var(--body); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); text-shadow: none; }
.g-jobrow b { flex: none; display: inline-flex; align-items: center; gap: 4px; font: 400 18px/1 var(--display); color: #fff; }
.g-jobrow b svg { width: 13px; height: 13px; }
.g-jobrow .go { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.2); font: 800 12.5px var(--body); letter-spacing: 0; text-shadow: none; }
.g-jobrow .go .car { width: 6px; height: 6px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.g-jobrow .wdot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #ff7a00; border: 2px solid #fff; box-sizing: border-box; animation: rfBlink 1s steps(2, start) infinite; }
.g-jobslink { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid rgba(255, 213, 74, 0.55); background: rgba(255, 213, 74, 0.1); color: var(--gold); font: 800 12.5px var(--body); cursor: pointer; }
.g-jobslink svg { width: 16px; height: 16px; } .g-jobslink:hover { background: rgba(255, 213, 74, 0.2); } .g-jobslink[hidden] { display: none; }
.g-mebtn.working .n { position: relative; }   /* at work: the small orange dot from the old Jobs pill now blinks on your number */
.g-mebtn.working .n::after { content: ''; position: absolute; top: -3px; right: -3px; width: 11px; height: 11px; border-radius: 50%; background: #ff7a00; border: 2px solid #fff; box-sizing: border-box; animation: rfBlink 1s steps(2, start) infinite; }

.g-emo { position: relative; display: flex; }
.g-emobtn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px 0 7px; border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.85); background: linear-gradient(180deg, #ff7ac8, #c41f86); color: #fff; font: 400 17px/1 var(--display); letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); cursor: pointer; white-space: nowrap; }
.g-emobtn i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 18px; background: rgba(255, 255, 255, 0.22); text-shadow: none; }
.g-emobtn:hover, .g-emobtn.open { filter: brightness(1.08); }
.g-emobtn.off { filter: saturate(0.75); }
.g-emomenu { position: absolute; right: 0; bottom: calc(100% + 16px); width: 350px; box-sizing: border-box; display: grid; gap: 10px; padding: 12px; border-radius: 22px; background: #0b1440; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 24px 60px rgba(2, 6, 30, 0.7); animation: gEdUp 0.18s cubic-bezier(0.22, 1, 0.36, 1); z-index: 2; }
.g-emomenu[hidden] { display: none; }
.g-emomenu::after { content: ''; position: absolute; right: 44px; bottom: -8px; width: 14px; height: 14px; background: #0b1440; border-right: 1px solid rgba(255, 255, 255, 0.18); border-bottom: 1px solid rgba(255, 255, 255, 0.18); transform: rotate(45deg); }
.g-emohead { margin: 0 2px; display: grid; gap: 2px; } .g-emohead b { font: 400 20px/1.1 var(--display); color: var(--white); } .g-emohead small { font: 700 12px/1.3 var(--body); color: var(--muted); }
.g-emogrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.g-emogrid button { display: grid; justify-items: center; gap: 3px; padding: 7px 2px 6px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); color: var(--white); cursor: pointer; transition: transform 0.12s, background 0.12s; min-width: 0; }
.g-emogrid button i { font-style: normal; font-size: 24px; line-height: 1; }
.g-emogrid button small { font: 800 10px/1.1 var(--body); color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-emogrid button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); transform: translateY(-1px); }
.g-emogrid button:active:not(:disabled) { transform: scale(0.92); }
.g-emogrid button.hot { box-shadow: inset 0 0 0 2px var(--gold), 0 0 14px rgba(255, 213, 74, 0.45); }
.g-emogrid button:disabled { cursor: default; opacity: 0.38; }
.g-emonote { display: flex; align-items: center; gap: 8px; margin: 0 2px; font: 700 12.5px/1.35 var(--body); color: var(--muted); }
.g-emonote svg { width: 16px; height: 16px; flex: none; } .g-emonote span { flex: 1; }
.g-emogo { flex: none; padding: 7px 12px; border-radius: 999px; border: 0; background: linear-gradient(180deg, #2bd4bf, #0f8f84); color: #fff; font: 800 12.5px var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; }
a.g-emogo { background: linear-gradient(180deg, #5cb8ff, #1c63d6); }
@media (max-width: 759px) {
  .g-bar > .g-emo { flex: 1 1 0; min-width: 0; }
  .g-bar .g-emobtn { width: 100%; height: 44px; padding: 0 8px; justify-content: center; gap: 5px; font-size: 14px; box-sizing: border-box; min-width: 0; }
  .g-bar .g-emobtn { padding: 0 6px; gap: 3px; } .g-bar .g-emobtn i { width: 18px; height: 18px; font-size: 14px; background: none; }
  .g-bar .g-emobtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .g-emo { position: static; }
  .g-emomenu { position: fixed; left: 10px; right: 10px; width: auto; bottom: calc(10px + var(--dock-h) + 12px + var(--safe-b)); animation-name: gEdUpM; }
  .g-emomenu::after { right: 40px; }
}
@media (prefers-reduced-motion: reduce) { .g-jobrow .wdot, .g-mebtn.working .n::after { animation: none; } }
/* Adrian 21.10. (Karte einfacher): name row with a small share button, the gold job line, ONE row of big buttons, small text links at the foot */
.g-id .g-ibtn { width: 38px; height: 38px; }
.g-id .g-ibtn svg { width: 17px; height: 17px; }
.g-acts .g-show { flex: 1 1 0; min-width: 0; }
.g-acts .g-xact { flex: 1 1 0; min-width: 0; justify-content: center; }
.g-foot { display: flex; justify-content: center; gap: 4px 18px; flex-wrap: wrap; margin-top: -2px; }
.g-foot:not(:has(.g-link:not([hidden]))) { display: none; }
.g-link { display: inline-flex; align-items: center; gap: 5px; padding: 2px 4px; border: 0; background: none; color: var(--muted); font: 800 12.5px var(--body); cursor: pointer; }
.g-link[hidden] { display: none; }
.g-link svg { width: 14px; height: 14px; } .g-link:hover { color: var(--white); }
/* status (😴 Sleeping) now in the small second line, so the name gets the whole width */
.g-id > div small.g-sub { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 2px; }
.g-sub #gWhere { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-id .g-st { max-width: none; padding: 2px 8px 2px 5px; gap: 4px; font: 800 12px var(--body); }
.g-id .g-st i { font-size: 13px; }
.g-id .g-st b { display: inline; font: inherit; color: inherit; }
@media (max-width: 420px) { .g-bar .g-emobtn i { display: none; } }   /* small phones: "Emotes" in full instead of 👋 Emo… */
.g-acts[hidden] { display: none; }
button.g-apt { color: var(--white); cursor: pointer; font: inherit; transition: transform 0.12s, filter 0.12s; }   /* the Apt badge opens the apartment */
button.g-apt:hover { filter: brightness(1.12); transform: translateY(-1px); }

/* Adrian 21.10.: all four pills exactly the same size – PC 160 px each, phones a quarter of the bar each */
.g-bar > .g-mebtn, .g-bar > .g-ed, .g-bar > .g-meetslot, .g-bar > .g-emo { flex: 0 0 160px; width: 160px; min-width: 0; box-sizing: border-box; }
.g-bar .g-mebtn, .g-bar .g-edbtn, .g-bar .g-emobtn, .g-bar .g-meetslot .meet:not(.open) { width: 100%; box-sizing: border-box; justify-content: center; }
.g-bar .g-ed, .g-bar .g-emo, .g-bar .g-meetslot { display: flex; }
.g-bar .g-meetslot .meet:not(.open) .meet-h { justify-content: center; }
.g-bar .g-meetslot .meet:not(.open) .meet-h .t { flex: none; }
.g-bar .g-meetslot .meet:not(.open) .meet-h .live { display: none; }
.g-bar .g-mebtn .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 759px) {
  .g-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* four equal columns – flex gave the Find me pill its padding extra */
  .g-bar > .g-mebtn, .g-bar > .g-ed, .g-bar > .g-meetslot, .g-bar > .g-emo { width: auto; }
}
@media (max-width: 759px) { .g-bar .g-mebtn:not(.search) .lbl, .g-bar .g-mebtn:not(.search) .car { display: none; } .g-bar .g-mebtn:not(.search) .n { min-width: 32px; height: 32px; font-size: 16px; } }   /* phones: your pill shows only your apartment number (Adrian 21.10.: "12 Re…" looked broken) */

/* Emotes pill in the v3 candy-metal look (pink), same build as Find me / Editor / Move; the Move pill's stand-in while its panel is open too */
.g-bar .g-emobtn { --m-hi: #ffe0f3; --m-1: #ff86d4; --m-2: #f23fae; --m-3: #c8158a; --m-lip: #6e0848; --m-rim: #ffc2e8; }
.g-bar .g-emobtn, .g-bar .g-emobtn:hover, .g-bar .g-emobtn.open {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, var(--m-hi) 0%, var(--m-1) 22%, var(--m-2) 49%, var(--m-3) 51%, var(--m-2) 82%, var(--m-1) 100%);
  border: 1.5px solid var(--m-rim);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.22), 0 4px 0 var(--m-lip), 0 9px 16px rgba(2, 4, 22, 0.5);
  text-shadow: 0 2px 0 var(--m-lip), 0 0 1px var(--m-lip);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
}
.g-bar .g-emobtn.off { filter: none; }
.g-bar .g-emobtn::before { content: ''; position: absolute; left: 7%; right: 7%; top: 2px; height: 42%; border-radius: 999px 999px 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.06)); pointer-events: none; z-index: -1; }
.g-bar .g-emobtn::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 48%, transparent 61%) no-repeat; background-size: 260% 100%; background-position: 160% 0; animation: gSheen 7s ease-in-out infinite; animation-delay: 1.05s; }
.g-bar .g-emobtn:hover { filter: brightness(1.07) saturate(1.08); transform: translateY(-1px); }
.g-bar .g-emobtn:active { transform: translateY(3px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.22), 0 1px 0 var(--m-lip), 0 4px 8px rgba(2, 4, 22, 0.5); }
.g-bar .g-emobtn i { background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 45%), linear-gradient(180deg, var(--m-3), var(--m-lip)); border: 2px solid #fff; box-sizing: border-box; box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.35); }
.g-bar .g-meetslot:has(.meet.open)::after { --m-hi: #d6fff3; --m-1: #4ff0c8; --m-2: #10c79d; --m-3: #06957a; --m-lip: #03594a; --m-rim: #a6f7e2;
  background: linear-gradient(180deg, var(--m-hi) 0%, var(--m-1) 22%, var(--m-2) 49%, var(--m-3) 51%, var(--m-2) 82%, var(--m-1) 100%); border: 1.5px solid var(--m-rim); box-sizing: border-box;
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.22), 0 4px 0 var(--m-lip), 0 9px 16px rgba(2, 4, 22, 0.5); text-shadow: 0 2px 0 var(--m-lip), 0 0 1px var(--m-lip); }
@media (prefers-reduced-motion: reduce) { .g-bar .g-emobtn::after { animation: none; } }
/* Emotes pill (Adrian 22.10.): tabs Emotes · Say · Do + hangout-bonus timer moved here from Move (classes from js/meet.js) */
.g-emomenu .g-emotabs { margin: 0; }
.g-emomenu .meet-bonus { margin: 0 2px; }

/* Jobs-Pill (Adrian 22.10.: Quick-Jobs, Gus & Rosa) – an der Stelle des Editors, der in die eigene Karte gewandert ist */
.g-bar .g-tkbtn, .g-bar .g-tkbtn:hover, .g-bar .g-tkbtn.open { position: relative; background: linear-gradient(180deg, #ffc94a, #c47d0e); color: #fff; }
.g-tkdot { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #ff3b3b; border: 2px solid #fff; color: #fff; font: 800 10.5px/14px var(--body); font-style: normal; text-align: center; box-shadow: 0 0 10px rgba(255, 59, 59, 0.7); animation: tkPulse 1.6s ease-in-out infinite; }
@keyframes tkPulse { 50% { transform: scale(1.12); } }
.g-edrow { display: flex; gap: 6px; margin: 8px 0 6px; }
/* Edit look / Edit room (Adrian 23.10.: „so wie im Menü unten, mit Metallic-Effekt, beide orange“) – gleiches Candy-Metall wie die untere Leiste v3 */
.g-edrow a { --m-hi: #ffeccc; --m-1: #ffb85c; --m-2: #ff8a1f; --m-3: #e06300; --m-lip: #8a3600; --m-rim: #ffd6a3;
  flex: 1; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; border-radius: 999px; color: #fff; font: 900 12px var(--body); text-decoration: none;
  background: linear-gradient(180deg, var(--m-hi) 0%, var(--m-1) 22%, var(--m-2) 49%, var(--m-3) 51%, var(--m-2) 82%, var(--m-1) 100%);
  border: 1.5px solid var(--m-rim);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.22), 0 3px 0 var(--m-lip), 0 6px 10px rgba(2, 4, 22, 0.4);
  text-shadow: 0 1.5px 0 var(--m-lip), 0 0 1px var(--m-lip);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease; }
.g-edrow a::before { content: ''; position: absolute; left: 7%; right: 7%; top: 2px; height: 42%; border-radius: 999px 999px 40% 40%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.06)); pointer-events: none; z-index: -1; }
.g-edrow a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 48%, transparent 61%) no-repeat; background-size: 260% 100%; background-position: 160% 0; animation: gSheen 7s ease-in-out infinite; }
.g-edrow a + a::after { animation-delay: 0.35s; }
.g-edrow a:hover { filter: brightness(1.07) saturate(1.08); transform: translateY(-1px); color: #fff; }
.g-edrow a:active { transform: translateY(2px); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.22), 0 1px 0 var(--m-lip), 0 4px 8px rgba(2, 4, 22, 0.45); }
.g-edrow a[hidden] { display: none; }
/* Furniture Shop (Adrian 30.10.2026): goldener Knopf neben Edit look / Edit room, pulsiert leicht */
.g-edrow a.ed-shop { --m-hi: #fff6cf; --m-1: #ffd85a; --m-2: #f5b22a; --m-3: #d98a0c; --m-lip: #7a4a00; --m-rim: #ffeaa0; animation: gShopPulse 2.4s ease-in-out infinite; }
.g-edrow a.ed-shop::after { animation-delay: 0.7s; }
@keyframes gShopPulse { 0%, 100% { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.22), 0 3px 0 var(--m-lip), 0 6px 10px rgba(2, 4, 22, 0.4); } 50% { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9), inset 0 -2px 0 rgba(0, 0, 0, 0.22), 0 3px 0 var(--m-lip), 0 0 16px 3px rgba(255, 207, 90, 0.75); } }
.g-edrow svg { width: 14px; height: 14px; flex: none; filter: drop-shadow(0 1.5px 0 var(--m-lip)); }

/* Chat (Adrian 23.10.2026): erster Reiter der Chat-Pill – Verlauf des Orts + Eingabe (js/chat.js). Am Handy 16 px in der Eingabe (sonst zoomt iOS). */
.g-bar .g-emobtn { position: relative; }
.g-chatdot { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #ff3b3b; border: 2px solid #fff; color: #fff; font: 800 10.5px/14px var(--body); font-style: normal; text-align: center; text-shadow: none; box-shadow: 0 0 10px rgba(255, 59, 59, 0.7); }
.g-chatdot[hidden] { display: none; }
#gEmoTop, #gEmoBot { display: grid; gap: 10px; } #gEmoBot:empty { display: none; }
.g-chat { display: grid; gap: 8px; } .g-chat[hidden] { display: none; }
.g-chatlog { height: min(34vh, 280px); min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 2px; overscroll-behavior: contain; scrollbar-width: thin; }
.g-chatlog > :first-child { margin-top: auto; }
.g-chatempty { padding: 18px 10px; text-align: center; color: var(--muted); font: 700 13px/1.4 var(--body); }
.g-chat .cm { position: relative; align-self: flex-start; max-width: 86%; box-sizing: border-box; padding: 6px 12px 8px; border-radius: 16px 16px 16px 6px; background: rgba(255, 255, 255, 0.1); color: #fff; }
.g-chat .cm:has(.rep) { padding-right: 30px; }
.g-chat .cm.me { align-self: flex-end; background: #ffd54a; color: #1b1230; border-radius: 16px 16px 6px 16px; }
.g-chat .cm p { margin: 0 0 2px; display: flex; gap: 8px; align-items: baseline; font: 800 11.5px/1.3 var(--body); }
.g-chat .cm p small { font-weight: 700; opacity: 0.6; }
/* Turm-Besitzer (Adrian, Wohnung 1): goldener Stern + „(Owner)“, Blase mit Goldrand – js/chat.js OWNER */
.g-chat .cm.own { box-shadow: inset 0 0 0 1.5px #ffd54a; }
.g-chat .cm.me.own { box-shadow: inset 0 0 0 1.5px #fff; }
.g-chat .cm b.own { color: #ffd54a; }
.g-chat .cm.me b.own { color: #8a4b00; }
.g-chat .cm b.own em { font-style: normal; font-weight: 700; opacity: 0.85; }
.g-chat .cm span { display: block; font: 600 14px/1.35 var(--body); overflow-wrap: anywhere; }
.g-chat .cm .rep { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: inherit; opacity: 0.4; cursor: pointer; font-size: 12px; }
.g-chat .cm .rep:hover, .g-chat .cm .rep:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.g-chatin { position: relative; display: flex; gap: 8px; align-items: center; margin: 0; }
.g-chatin input { flex: 1; min-width: 0; height: 46px; box-sizing: border-box; padding: 0 48px 0 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.08); color: #fff; font: 600 16px/1 var(--body); outline: none; }
.g-chatin input::placeholder { color: rgba(220, 228, 255, 0.55); }
.g-chatin input:focus { border-color: #ff86d4; box-shadow: 0 0 0 3px rgba(255, 122, 200, 0.25); }
.g-chatin input:disabled { opacity: 0.6; }
.g-chatin button { flex: none; width: 46px; height: 46px; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; background: linear-gradient(180deg, #ff7ac8, #c41f86); color: #fff; font-size: 17px; cursor: pointer; }
.g-chatin button:disabled { opacity: 0.45; cursor: default; }
.g-chatn { position: absolute; right: 64px; top: 50%; transform: translateY(-50%); font: 800 11px/1 var(--body); font-style: normal; color: var(--muted); pointer-events: none; } .g-chatn.bad { color: #ff7a7a; }
.g-chaterr { margin: 0; color: #ff9a9a; font: 700 12.5px/1.35 var(--body); } .g-chaterr[hidden] { display: none; }
.g-chatrule { margin: 0; text-align: center; color: var(--muted); font: 600 11px/1.3 var(--body); opacity: 0.8; }
@media (max-width: 759px) { .g-chatlog { height: min(30vh, 240px); } }

/* Einheitliche Symbole in der unteren Leiste (Adrian 23.10.2026: „die Symbole werden immer kleiner … müssen von der gleichen Art sein“):
   alle vier Knöpfe zeigen nur ein weißes Linien-Symbol (wie Jobs) in gleicher Größe – kein Nummern-Kreis, kein Kreis um Pin oder Sprechblase. */
.g-bar .g-mebtn, .g-bar .g-mebtn.search, .g-bar .g-emobtn, .g-bar .g-edbtn { padding-left: 14px; padding-right: 14px; gap: 8px; }
.g-bar .g-meetslot .meet:not(.open) .meet-h { padding-left: 14px; gap: 8px; }
.g-bar .g-meetslot .meet:not(.open) .meet-pin { width: auto; height: auto; background: none; border: 0; box-shadow: none; }
.g-bar .g-mebtn > svg, .g-bar .g-emobtn > svg, .g-bar .g-edbtn > svg, .g-bar .g-meetslot .meet:not(.open) .meet-pin svg { width: 20px; height: 20px; flex: none; color: #fff; filter: drop-shadow(0 1.5px 0 var(--m-lip, rgba(0, 0, 0, 0.3))); }
@media (max-width: 759px) {
  .g-bar .g-mebtn, .g-bar .g-mebtn.search, .g-bar .g-emobtn, .g-bar .g-edbtn { padding: 0 6px; gap: 5px; }
  .g-bar .g-meetslot .meet:not(.open) .meet-h { padding: 0 6px; gap: 5px; }
  .g-bar .g-mebtn > svg, .g-bar .g-emobtn > svg, .g-bar .g-edbtn > svg, .g-bar .g-meetslot .meet:not(.open) .meet-pin svg { width: 18px; height: 18px; }
}
.g-bar .g-mebtn .lbm { display: none; }   /* Handy: kurz „Me“ statt des Namens (der passt nicht neben das Symbol) */
@media (max-width: 759px) { .g-bar .g-mebtn:not(.search) .lbm { display: inline; color: #fff; text-shadow: 0 2px 0 var(--m-lip), 0 0 1px var(--m-lip); } }

/* Adrian 23.10.2026: „ich markiere auf einmal alles“ – Spiel-Seiten wie eine App: kein Text-Markieren, kein Lupen-/Kopier-Menü beim langen Drücken, kein blauer Tipp-Blitz. Eingabefelder bleiben markierbar. */
html, body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
input, textarea, select, [contenteditable="true"], [contenteditable=""], .iv-code b { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* Adrian 23.10. (Screenshot): Move war nach den Linien-Symbolen niedriger als die anderen (der 34-px-Kreis gab ihm die Höhe) – jetzt fest gleich hoch;
   die roten Zähler auf Chat und Jobs wurden vom Knopfrand abgeschnitten – Knopf lässt sie jetzt überstehen, Zähler sitzt oben rechts drüber. */
.g-bar .g-meetslot .meet:not(.open) .meet-h { height: 46px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }   /* + 1 px Rand der .meet oben und unten = 48 wie die anderen */
@media (max-width: 759px) { .g-bar .g-meetslot .meet:not(.open) .meet-h { height: 42px; } }   /* Handy: 44 wie die anderen */
.g-bar .g-emobtn, .g-bar .g-tkbtn { overflow: visible; }
.g-bar .g-emobtn::after, .g-bar .g-tkbtn::after { overflow: hidden; }
.g-bar .g-chatdot, .g-bar .g-tkdot { top: -8px; right: -6px; z-index: 3; }

/* „● N online“ neben den Followern (Adrian 23.10.: man muss sehen, wie viele gerade im Spiel sind) – js/onlinecount.js */
.onl em, .hud-online em { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px #3ddc84; margin-right: 5px; font-style: normal; vertical-align: 1px; }
.onl b, .hud-online b { color: #7dffb0; font: 400 15px var(--display); }
.hud-count .onl { color: rgba(255, 255, 255, 0.85); font: 800 10px var(--body); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.ilive .onl { margin-left: auto; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.8); font: 800 10px var(--body); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.hud-online { display: none; }
@media (max-width: 759px) {   /* Handy draußen: die Follower stehen im Ansichts-Fenster – „online“ als kleine Pille unter der Uhr */
  .g-outside .live-tv .hud-online { display: inline-flex; align-items: center; position: absolute; left: var(--e, 12px); top: calc(var(--e, 12px) + 114px); z-index: 5; padding: 4px 10px 4px 8px; border-radius: 999px; background: rgba(8, 14, 40, 0.85); border: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85); font: 800 9px var(--body); letter-spacing: 0.12em; text-transform: uppercase; }
  .ilive .onl b { font-size: 14px; }
  .g-outside .live-tv .hud-online { gap: 4px; }   /* Adrian 23.10.: Follower UND online – beide in der Pille unter der Uhr */
  .g-outside .live-tv .hud-online > i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff5a6e; box-shadow: 0 0 8px #ff5a6e; margin-right: 2px; }
  .g-outside .live-tv .hud-online > b { color: #fff; font: 400 15px var(--display); }
  .g-outside .live-tv .hud-online .onl { margin-left: 6px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, 0.18); }
}
/* Adrian 23.10.: „die Pille nimmt 60 % des Bildschirms ein“ – Handy kompakt: roter Live-Punkt + Followerzahl, grüner Punkt + „N online“, kleiner gesetzt */
@media (max-width: 759px) {
  .g-outside .live-tv .hud-online { padding: 3px 8px 3px 7px; gap: 3px; font-size: 8px; letter-spacing: 0.08em; }
  .g-outside .live-tv .hud-online > b, .g-outside .live-tv .hud-online .onl b { font-size: 13px; }
  .g-outside .live-tv .hud-online > i, .g-outside .live-tv .hud-online em { width: 6px; height: 6px; margin-right: 3px; }
  .g-outside .live-tv .hud-online .onl { margin-left: 4px; padding-left: 6px; }
  /* innen: „followers live“ ausblenden, nur Zahlen + „online“ */
  .ilive .ll { display: none; }
  .ilive { gap: 5px; padding: 3px 9px 3px 7px; } .ilive b { font-size: 14px; } .ilive .ldot { width: 6px; height: 6px; }
  .ilive .onl { padding-left: 6px; margin-left: 2px; font-size: 8px; letter-spacing: 0.08em; } .ilive .onl b { font-size: 13px; } .ilive .onl em { width: 6px; height: 6px; margin-right: 3px; }
}