/* QuizioMatch Redesign 2026 — lounge layer. See qm/qm-base.css for tokens.
   Covers: #groupChatScreen (lounge bento → SLounge, room list → SRooms,
   room chat → SRoomChat), #gameHubScreen (Game Hub, matchmaking, live duel,
   match, result, bottom sheet), #klScreen (Kennenlernspiel) and the chat
   mini-game cards / composer overlay (.mg-*).
   Only restyles — never touches display/visibility of screens, views or
   overlays; scroll containers keep their flex/overflow from the legacy CSS. */

/* ══════════════════════════════════════════════════════════════════════
   1. LOUNGE — shared header (kicker above a huge headline)
   ══════════════════════════════════════════════════════════════════════ */

#groupChatScreen { background: var(--qm-bg); color: var(--qm-fg); font-family: var(--qm-sans); }
#groupChatScreen .gc-hub-view::before { content: none; }

#groupChatScreen .gc-lounge-header {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-areas: "back . live" "title title title";
    align-items: center;
    row-gap: var(--qm-sp-3);
    column-gap: var(--qm-sp-3);
    padding: calc(14px + env(safe-area-inset-top, 0px)) 20px var(--qm-sp-4);
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
#groupChatScreen .gc-lounge-header .gc-back { grid-area: back; }
#groupChatScreen .gc-lounge-header .lng-live { grid-area: live; }
#groupChatScreen .gc-lounge-title {
    grid-area: title;
    flex-direction: column-reverse;   /* sub becomes the kicker above */
    gap: 8px;
    line-height: 1;
}
#groupChatScreen .gc-lounge-name {
    font: 800 clamp(38px, 11vw, 46px)/1 var(--qm-disp);
    letter-spacing: -.035em;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--qm-fg);
    text-wrap: balance;
}
/* "Die Lounge": the one-word headline is the accent word */
#groupChatScreen #gcHubView .gc-lounge-name { color: var(--qm-pink-soft); }
#groupChatScreen #gcRoomsView .gc-lounge-name { font-size: clamp(28px, 8.4vw, 34px); }
#groupChatScreen .gc-lounge-sub {
    margin: 0;
    font: 600 13px/1.3 var(--qm-sans);
    letter-spacing: 0;
    color: var(--qm-fg2);
}

/* round icon buttons (.ib.r) */
#groupChatScreen .gc-back {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: var(--qm-s2);
    box-shadow: none;
    color: var(--qm-fg);
    transition: transform .16s var(--qm-ease-spring), background-color .16s var(--qm-ease-out);
}
#groupChatScreen .gc-back:hover { background: var(--qm-s3); transform: translateX(-2px); border-color: transparent; }
#groupChatScreen .gc-back:active { transform: scale(.92); background: var(--qm-s3); }
#groupChatScreen .gc-back:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }

/* live chip in the header */
#groupChatScreen .lng-live {
    height: 36px;
    padding: 0 14px;
    gap: 8px;
    border: 0;
    background: var(--qm-s2);
}
#groupChatScreen .lng-live i { width: 8px; height: 8px; background: var(--qm-green); box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); }
#groupChatScreen .lng-live b { font: 600 13px var(--qm-sans); color: var(--qm-fg); }

#groupChatScreen .gc-hub-scroll { padding: 4px 20px 32px; gap: var(--qm-sp-3); }
#groupChatScreen .gc-hub-scroll--bento { padding-left: 0; padding-right: 0; }

/* ══════════════════════════════════════════════════════════════════════
   2. LOUNGE — bento (SLounge): pink group chats, violet Game Hub,
      speed dating as the quiet s1 row with a "Bald" chip at the end.
   ══════════════════════════════════════════════════════════════════════ */

#groupChatScreen .lng-bento { gap: var(--qm-sp-3); padding: 4px 20px 28px; }

#groupChatScreen .lng-tile {
    border: 0;
    border-radius: var(--qm-r-card);
    box-shadow: none;
    transition: transform .2s var(--qm-ease-spring), box-shadow .2s var(--qm-ease-out);
}
#groupChatScreen .lng-entry { cursor: pointer; -webkit-tap-highlight-color: transparent; }
#groupChatScreen .lng-entry:hover { transform: translateY(-2px); }
#groupChatScreen .lng-entry:active { transform: translateY(2px) scale(.99); }
#groupChatScreen .lng-entry:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }

/* order like the reference: chats, games, speed dating */
#groupChatScreen .lng-entry--chats { order: 1; }
#groupChatScreen .lng-entry--games { order: 2; }
#groupChatScreen .lng-feat { order: 3; }

/* — Gruppenchats: solid pink hero card — */
#groupChatScreen .lng-entry--chats {
    background: var(--qm-pink);
    border-radius: 32px;
    min-height: 190px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    box-shadow: 0 18px 40px rgba(233, 30, 99, .22);
}
#groupChatScreen .lng-entry--chats:hover { box-shadow: 0 22px 46px rgba(233, 30, 99, .3); }
#groupChatScreen .lng-entry--chats:active { box-shadow: 0 10px 24px rgba(233, 30, 99, .22); }
#groupChatScreen .lng-entry--chats .lng-entry-top {
    display: block;
    margin: 0;
}
/* the icon tile becomes the rotated "sticker" top right */
#groupChatScreen .lng-entry--chats .lng-entry-icn {
    position: absolute;
    top: 20px;
    inset-inline-end: 20px;
    width: 80px;
    height: 80px;
    border-radius: 30%;
    background: rgba(255, 255, 255, .18);
    transform: rotate(10deg);
}
#groupChatScreen .lng-entry--chats .lng-entry-icn svg { width: 44px; height: 44px; }
#groupChatScreen .lng-entry--chats .lng-entry-t { padding-top: 78px; }
#groupChatScreen .lng-entry--chats .lng-entry-t h3 {
    margin: 0;
    font: 800 clamp(28px, 8.4vw, 34px)/1 var(--qm-disp);
    letter-spacing: -.035em;
    color: #fff;
}
#groupChatScreen .lng-entry--chats .lng-entry-t p {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .86);
}
#groupChatScreen .lng-entry--chats .lng-entry-ch {
    position: absolute;
    bottom: 26px;
    inset-inline-end: 22px;
    color: rgba(255, 255, 255, .8);
}
[dir="rtl"] #groupChatScreen .lng-entry--chats .lng-entry-ch { transform: scaleX(-1); }

#groupChatScreen .lng-entry-hint { margin-top: var(--qm-sp-4); gap: 6px; padding-inline-end: 28px; }
#groupChatScreen .lng-entry--chats .lng-entry-hint .e {
    width: 32px;
    height: 32px;
    border-radius: 30%;
    border: 0;
    background: rgba(255, 255, 255, .18);
    font-size: 16px;
}
#groupChatScreen .lng-entry--chats .lng-entry-hint .rest { color: rgba(255, 255, 255, .86); font-size: 12px; }
#groupChatScreen .lng-entry--chats .lng-entry-hint .on {
    height: 30px;
    padding: 0 12px;
    gap: 6px;
    border: 0;
    background: rgba(0, 0, 0, .22);
    color: #fff;
    font: 600 12px var(--qm-sans);
}
#groupChatScreen .lng-entry--chats .lng-entry-hint .on i { width: 6px; height: 6px; box-shadow: none; }

/* — Game Hub: violet card — */
#groupChatScreen .lng-entry--games {
    background: var(--qm-violet);
    padding: 18px;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 18px 40px rgba(124, 77, 255, .2);
}
#groupChatScreen .lng-entry--games .lng-entry-top {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "icn free" "txt txt";
    row-gap: var(--qm-sp-4);
    margin-bottom: var(--qm-sp-4);
}
#groupChatScreen .lng-entry--games .lng-entry-icn {
    grid-area: icn;
    width: 56px;
    height: 56px;
    border-radius: 30%;
    background: rgba(255, 255, 255, .18);
    transform: rotate(-8deg);
}
#groupChatScreen .lng-entry--games .lng-entry-icn svg { width: 28px; height: 28px; }
#groupChatScreen .lng-entry--games .lng-entry-t { grid-area: txt; }
#groupChatScreen .lng-entry--games .lng-entry-t h3 { margin: 0; font: 800 18px/1.15 var(--qm-sans); letter-spacing: -.02em; }
#groupChatScreen .lng-entry--games .lng-entry-t p { margin-top: 4px; font-size: 13px; color: rgba(255, 255, 255, .82); }
#groupChatScreen .lng-entry--games .lng-free {
    grid-area: free;
    align-self: start;
    height: 30px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border: 0;
    background: #fff;
    color: #2A1A6B;
    font: 700 12px var(--qm-sans);
    letter-spacing: 0;
    text-transform: none;
}
#groupChatScreen .lng-games-row { gap: 8px; }
#groupChatScreen .lng-game-pill {
    border: 0;
    border-radius: 18px;
    padding: 10px 3px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 10px;
}
#groupChatScreen .lng-game-pill-e { font-size: 20px; }

/* — Speed Dating: quiet s1 row (feature art reduced to a 🌍 sticker) — */
#groupChatScreen .lng-feat {
    height: auto;
    min-height: 0;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--qm-s1);
    box-shadow: none;
}
#groupChatScreen .lng-feat:hover { transform: none; }
#groupChatScreen .lng-feat > [aria-hidden="true"] { display: none; }
#groupChatScreen .lng-feat::before {
    content: "🌍";
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 30%;
    background: var(--qm-s3);
    display: grid;
    place-items: center;
    font-size: 27px;
    line-height: 1;
}
#groupChatScreen .lng-feat-txt {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "title tag" "sub sub";
    column-gap: 10px;
    align-items: center;
}
#groupChatScreen .lng-feat-title { grid-area: title; margin: 0; font: 700 16px/1.25 var(--qm-sans); letter-spacing: -.01em; }
#groupChatScreen .lng-feat-sub { grid-area: sub; margin-top: 2px; font-size: 13px; color: var(--qm-fg3); }
#groupChatScreen .lng-feat-tag {
    align-self: start;
    grid-area: tag;
    margin: 0;
    height: 30px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 600 12px var(--qm-sans);
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════
   3. ROOM LIST (SRooms): s1 cards, coloured emoji sticker, online chip
   ══════════════════════════════════════════════════════════════════════ */

#groupChatScreen .gc-rooms-list { gap: 10px; }
#groupChatScreen .gc-rooms-list .gc-room-card,
#groupChatScreen .gc-rooms-list .gc-room-card[class*="lng-t"] {
    height: auto;
    min-height: 78px;
    padding: 12px;
    gap: 14px;
    border: 0;
    border-radius: 24px;
    background: var(--qm-s1);
    box-shadow: none;
    transition: transform .18s var(--qm-ease-spring), background-color .18s var(--qm-ease-out);
}
#groupChatScreen .gc-rooms-list .gc-room-card:hover { background: var(--qm-s2); transform: translateY(-2px); box-shadow: none; }
#groupChatScreen .gc-rooms-list .gc-room-card:active { transform: scale(.985); }
#groupChatScreen .gc-rooms-list .gc-room-card:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }

#groupChatScreen .gc-rooms-list .gc-room-icon {
    width: 54px;
    height: 54px;
    border-radius: 30%;
    border: 0;
    box-shadow: none;
    font-size: 28px;
    background: var(--qm-s3);
}
#groupChatScreen .gc-room-card.lng-t1 .gc-room-icon { background: #3A2430; }
#groupChatScreen .gc-room-card.lng-t2 .gc-room-icon { background: #2A2350; }
#groupChatScreen .gc-room-card.lng-t3 .gc-room-icon { background: #1F3A33; }
#groupChatScreen .gc-room-card.lng-t4 .gc-room-icon { background: #3A2A1C; }
#groupChatScreen .gc-room-card.lng-t5 .gc-room-icon { background: #1C2E3D; }
#groupChatScreen .gc-room-card.lng-t6 .gc-room-icon { background: #3D2420; }

#groupChatScreen .gc-rooms-list .gc-room-name { font: 700 16px/1.25 var(--qm-sans); letter-spacing: -.01em; color: var(--qm-fg); }
#groupChatScreen .gc-rooms-list .gc-room-topic { font-size: 13px; color: var(--qm-fg3); }
#groupChatScreen .gc-room-online {
    height: 30px;
    padding: 0 11px;
    gap: 6px;
    border: 0;
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 600 12px var(--qm-sans);
}
#groupChatScreen .gc-rooms-list .gc-room-card:hover .gc-room-online { background: var(--qm-s3); }
#groupChatScreen .gc-room-online-dot { width: 6px; height: 6px; background: var(--qm-green); box-shadow: none; }
#groupChatScreen .gc-room-chevron { color: var(--qm-fg3); }
[dir="rtl"] #groupChatScreen .gc-room-chevron { transform: scaleX(-1); }

/* ══════════════════════════════════════════════════════════════════════
   4. ROOM CHAT (SRoomChat): sticker header, avatar + name + bubbles,
      pill input + round pink send
   ══════════════════════════════════════════════════════════════════════ */

#groupChatScreen .gc-header {
    gap: var(--qm-sp-3);
    padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px;
    background: var(--qm-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid var(--qm-line);
}
#groupChatScreen .gc-header-room-info { gap: 10px; }
#groupChatScreen .gc-header-emoji {
    width: 40px;
    height: 40px;
    border-radius: 30%;
    background: var(--qm-s3);
    font-size: 21px;
}
#groupChatScreen .gc-header-name { font: 700 16px/1.2 var(--qm-sans); color: var(--qm-fg); }
#groupChatScreen .gc-header-topic { font-size: 13px; font-weight: 500; color: var(--qm-fg3); }
#groupChatScreen .gc-header-live {
    height: 32px;
    padding: 0 12px;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s2);
    color: var(--qm-green);
    font: 600 12px var(--qm-sans);
}
#groupChatScreen .gc-live-dot { width: 6px; height: 6px; background: var(--qm-green); box-shadow: none; }

#groupChatScreen .gc-messages { padding: 16px 20px; gap: 4px; font-family: var(--qm-sans); }

/* "Heute" chip */
#groupChatScreen .gc-day { justify-content: center; margin: 4px 0 12px; }
#groupChatScreen .gc-day i { background: transparent; }
#groupChatScreen .gc-day span {
    height: 30px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s2);
    color: var(--qm-fg3);
    font: 600 12px var(--qm-sans);
    letter-spacing: 0;
    text-transform: none;
}

/* message row → name · time / bubble (no avatar column in the lounge) */
#groupChatScreen .gc-msg {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "name time" "text text";
    column-gap: 10px;
    row-gap: 4px;
    align-items: end;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 15px;
    line-height: 1.4;
    color: var(--qm-fg);
}
#groupChatScreen .gc-msg:hover { background: transparent; }
#groupChatScreen .gc-msg.gc-msg-cluster-start { margin-top: 12px; padding-top: 0; }
#groupChatScreen .gc-msg.gc-msg-continuation { padding-left: 0; grid-template-areas: "text text"; }

#groupChatScreen .gc-msg-name {
    grid-area: name;
    margin: 0;
    font: 600 13px/1.2 var(--qm-sans);
    color: var(--qm-fg2) !important;   /* legacy sets inline hue colours + an own-name !important */
}
#groupChatScreen .gc-msg-time {
    grid-area: time;
    margin: 0;
    font: 500 11px/1.2 var(--qm-sans);
    color: var(--qm-fg3);
}
#groupChatScreen .gc-msg-text {
    grid-area: text;
    justify-self: start;
    display: block;
    max-width: min(78%, 520px);
    padding: 11px 15px;
    border-radius: 22px;
    border-end-start-radius: 8px;
    background: var(--qm-s2);
    color: var(--qm-fg);
}
#groupChatScreen .gc-msg-continuation .gc-msg-text { max-width: min(78%, 520px); }

/* own message → solid pink bubble on the right */
#groupChatScreen .gc-msg.gc-msg-own {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: ". name time" "text text text";
    border: 0;
    padding: 0;
    background: transparent;
}
#groupChatScreen .gc-msg.gc-msg-own:hover { background: transparent; }
#groupChatScreen .gc-msg.gc-msg-own .gc-msg-text {
    justify-self: end;
    background: var(--qm-pink);
    color: #fff;
    border-radius: 22px;
    border-end-end-radius: 8px;
}
#groupChatScreen .gc-msg.gc-msg-failed { opacity: .55; }
#groupChatScreen .gc-msg-failed-badge { grid-column: 1 / -1; justify-self: end; font-style: normal; color: var(--qm-red-soft); font-size: 12px; }

#groupChatScreen .gc-typing { padding: 8px 0 0; font-size: 13px; color: var(--qm-fg3); }
#groupChatScreen .gc-typing-name { color: var(--qm-fg2) !important; }

/* composer: pill field + round pink send with 3D edge */
#groupChatScreen .gc-composer { gap: 10px; padding: 10px 16px 14px; }
#groupChatScreen .gc-composer .gc-input {
    height: 50px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 500 15px var(--qm-sans);
    transition: box-shadow .16s var(--qm-ease-out);
}
#groupChatScreen .gc-composer .gc-input:focus { background: var(--qm-s2); box-shadow: 0 0 0 2px var(--qm-pink); }
#groupChatScreen .gc-composer .gc-input::placeholder { color: var(--qm-fg3); }
#groupChatScreen .gc-composer .gc-send-btn {
    width: 50px;
    height: 50px;
    background: var(--qm-pink);
    box-shadow: 0 3px 0 var(--qm-pink-edge), 0 8px 20px rgba(233, 30, 99, .28);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out);
}
#groupChatScreen .gc-composer .gc-send-btn svg { width: 20px; height: 20px; }
#groupChatScreen .gc-composer .gc-send-btn:hover { filter: none; transform: translateY(-1px); }
#groupChatScreen .gc-composer .gc-send-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--qm-pink-edge), 0 3px 10px rgba(233, 30, 99, .24); }
#groupChatScreen .gc-composer .gc-send-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
[dir="rtl"] #groupChatScreen .gc-composer .gc-send-btn svg { transform: scaleX(-1); }

/* ══════════════════════════════════════════════════════════════════════
   5. GAME HUB (#gameHubScreen) — violet hero, s1 game cards
   ══════════════════════════════════════════════════════════════════════ */

#gameHubScreen { background: var(--qm-bg); color: var(--qm-fg); font-family: var(--qm-sans); }
#gameHubScreen .gh-view--hub::before { content: none; }

#gameHubScreen .gh-header {
    gap: var(--qm-sp-3);
    padding: calc(14px + env(safe-area-inset-top, 0px)) 20px var(--qm-sp-3);
    align-items: center;
}
#gameHubScreen .gh-view--hub .gh-header {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-areas: "back ." "title title";
    row-gap: var(--qm-sp-3);
    padding-bottom: var(--qm-sp-4);
}
#gameHubScreen .gh-view--hub .gh-back { grid-area: back; }
#gameHubScreen .gh-view--hub .gh-title-wrap { grid-area: title; flex-direction: column-reverse; gap: 8px; }
#gameHubScreen .gh-view--hub .gh-title { font-size: clamp(38px, 11vw, 46px); }

#gameHubScreen .gh-title {
    font: 800 22px/1.05 var(--qm-disp);
    letter-spacing: -.035em;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--qm-fg);
}
#gameHubScreen .gh-sub { margin: 0; font: 600 13px/1.3 var(--qm-sans); color: var(--qm-fg2); }

#gameHubScreen .gh-back {
    width: 44px;
    height: 44px;
    border: 0;
    background: var(--qm-s2);
    color: var(--qm-fg);
    transition: transform .16s var(--qm-ease-spring), background-color .16s var(--qm-ease-out);
}
#gameHubScreen .gh-back:hover { background: var(--qm-s3); transform: translateX(-2px); }
#gameHubScreen .gh-back:active { transform: scale(.92); background: var(--qm-s3); }
#gameHubScreen .gh-back:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
[dir="rtl"] #gameHubScreen .gh-back svg { transform: scaleX(-1); }

#gameHubScreen .gh-scroll { padding: 4px 20px 28px; gap: var(--qm-sp-4); }
#gameHubScreen .gh-scroll > * { flex-shrink: 0; }

#gameHubScreen .gh-sec-h { align-items: baseline; margin: var(--qm-sp-3) 0 -4px; }
#gameHubScreen .gh-sec-h h3 { font: 800 24px/1.05 var(--qm-disp); letter-spacing: -.035em; color: var(--qm-fg); }
#gameHubScreen .gh-sec-h span { font: 600 13px var(--qm-sans); color: var(--qm-fg3); }

#gameHubScreen .gh-free-pill {
    height: 36px;
    padding: 0 14px;
    gap: 8px;
    border: 0;
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 600 13px var(--qm-sans);
}
#gameHubScreen .gh-free-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--qm-green); box-shadow: 0 0 0 3px rgba(74, 222, 128, .18); }

/* level card = the violet hero */
#gameHubScreen .gh-level-card {
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: var(--qm-r-card-lg);
    padding: 22px;
    background: var(--qm-violet);
    color: #fff;
    box-shadow: 0 18px 40px rgba(124, 77, 255, .22);
}
#gameHubScreen .gh-level-card::after {
    content: "🎮";
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    width: 64px;
    height: 64px;
    border-radius: 30%;
    display: grid;
    place-items: center;
    font-size: 33px;
    line-height: 1;
    background: rgba(255, 255, 255, .18);
    transform: rotate(-8deg);
    pointer-events: none;
}
#gameHubScreen .gh-level-top { padding-inline-end: 76px; }
#gameHubScreen .gh-level-badge {
    width: 52px;
    height: 52px;
    border-radius: 30%;
    background: var(--qm-cream);
    color: #2A1A6B;
    font: 800 22px/1 var(--qm-disp);
    box-shadow: 0 4px 0 rgba(42, 26, 107, .45);
}
#gameHubScreen .gh-level-name { font: 800 20px/1.1 var(--qm-disp); letter-spacing: -.03em; color: #fff; }
#gameHubScreen .gh-level-gp { font-size: 13px; color: rgba(255, 255, 255, .8); margin-top: 3px; }
#gameHubScreen .gh-bar { margin-top: 18px; height: 8px; background: rgba(0, 0, 0, .22); }
#gameHubScreen .gh-bar-fill { background: var(--qm-cream); }
#gameHubScreen .gh-bar-label { margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, .8); }
#gameHubScreen .gh-record { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .2); }
#gameHubScreen .gh-record-cell b { font: 800 22px/1.1 var(--qm-disp); letter-spacing: -.02em; }
#gameHubScreen .gh-record-cell span { font-size: 12px; color: rgba(255, 255, 255, .78); }

/* game cards */
#gameHubScreen .gh-games { gap: var(--qm-sp-3); }
#gameHubScreen .gh-game-card {
    border: 0;
    border-radius: var(--qm-r-card);
    padding: 16px;
    gap: 6px;
    min-height: 168px;
    background: var(--qm-s1);
    transition: transform .18s var(--qm-ease-spring), background-color .18s var(--qm-ease-out);
}
#gameHubScreen .gh-game-card::after { content: none; }
#gameHubScreen .gh-game-card:hover { background: var(--qm-s2); transform: translateY(-2px); }
#gameHubScreen .gh-game-card:active { transform: scale(.97); }
#gameHubScreen .gh-game-card:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#gameHubScreen .gh-game-emoji {
    width: 52px;
    height: 52px;
    margin-bottom: 8px;
    border-radius: 30%;
    display: grid;
    place-items: center;
    font-size: 27px;
    background: color-mix(in srgb, var(--gh-accent, #E91E63) 26%, #151117);
    transform: rotate(-6deg);
}
#gameHubScreen .gh-game-card:nth-child(even) .gh-game-emoji { transform: rotate(6deg); }
#gameHubScreen .gh-game-name { font: 800 17px/1.15 var(--qm-sans); letter-spacing: -.02em; }
#gameHubScreen .gh-game-desc { font-size: 13px; line-height: 1.4; color: var(--qm-fg3); }
#gameHubScreen .gh-game-dur {
    align-self: flex-start;
    margin-top: 6px;
    height: 28px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s2);
    color: var(--qm-fg2);
    font: 600 12px var(--qm-sans);
    filter: none;
}
#gameHubScreen .gh-game-card:hover .gh-game-dur { background: var(--qm-s3); }

/* notice cards (invites, requests, resume) */
#gameHubScreen .gh-card {
    border: 0;
    border-radius: var(--qm-r-card);
    padding: 16px;
    gap: 14px;
    background: var(--qm-s1);
    align-items: flex-start;
}
#gameHubScreen .gh-card--accent { background: var(--qm-s1); box-shadow: inset 0 0 0 1.5px rgba(233, 30, 99, .45); }
#gameHubScreen .gh-card-av,
#gameHubScreen .gh-mav,
#gameHubScreen .gh-rp-av,
#gameHubScreen .gh-duel-challenge-av { border-radius: 36%; }
#gameHubScreen .gh-card-av { width: 48px; height: 48px; font-size: 19px; }
#gameHubScreen .gh-card-t { font: 700 15px/1.3 var(--qm-sans); }
#gameHubScreen .gh-card-s { font-size: 13px; line-height: 1.45; color: var(--qm-fg2); margin-top: 3px; }
#gameHubScreen .gh-card-actions { gap: 8px; margin-top: 12px; }

/* buttons — 3D pills */
#gameHubScreen .gh-btn {
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s3);
    color: #fff;
    font: 700 14px/1 var(--qm-sans);
    box-shadow: var(--qm-shadow-dark-btn);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out);
}
#gameHubScreen .gh-btn:hover { transform: translateY(-1px); filter: none; }
#gameHubScreen .gh-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--qm-dark-edge); }
#gameHubScreen .gh-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#gameHubScreen .gh-btn--primary { background: var(--qm-pink); box-shadow: var(--qm-shadow-pink-btn); }
#gameHubScreen .gh-btn--primary:active { box-shadow: var(--qm-shadow-pink-btn-press); }
#gameHubScreen .gh-btn--ghost { background: transparent; border: 0; box-shadow: none; color: var(--qm-fg2); }
#gameHubScreen .gh-btn--ghost:hover { color: var(--qm-fg); }
#gameHubScreen .gh-btn--ghost:active { box-shadow: none; }
#gameHubScreen .gh-actions .gh-btn,
#gameHubScreen .gh-btn--block { height: 56px; font-size: 16px; }

/* live duel card */
#gameHubScreen .gh-duel-card {
    border: 0;
    border-radius: var(--qm-r-card);
    padding: 20px;
    gap: 8px;
    background: var(--qm-s1);
}
#gameHubScreen .gh-duel-t { font: 800 18px/1.2 var(--qm-sans); letter-spacing: -.02em; }
#gameHubScreen .gh-duel-s { font-size: 14px; line-height: 1.45; color: var(--qm-fg2); }
#gameHubScreen .gh-duel-games { gap: 8px; margin-top: 8px; }
#gameHubScreen .gh-duel-pill {
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 600 13px var(--qm-sans);
    transition: transform .14s var(--qm-ease-spring), background-color .14s var(--qm-ease-out);
}
#gameHubScreen .gh-duel-pill:hover { background: var(--qm-s3); }
#gameHubScreen .gh-duel-pill:active { transform: scale(.95); }
#gameHubScreen .gh-duel-pill:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#gameHubScreen .gh-duel-link { border: 0; border-radius: var(--qm-r-field); background: var(--qm-s2); color: var(--qm-pink-soft); }
#gameHubScreen .gh-duel-spin { border-color: var(--qm-s3); border-top-color: var(--qm-pink); }
#gameHubScreen .gh-duel-wait-t { font: 800 22px/1.15 var(--qm-disp); letter-spacing: -.03em; }
#gameHubScreen .gh-duel-count { font-family: var(--qm-disp); letter-spacing: -.04em; text-shadow: none; color: var(--qm-pink-soft); }

/* accounts met while playing */
#gameHubScreen .gh-accounts { gap: var(--qm-sp-3); }
#gameHubScreen .gh-acc-card {
    width: 144px;
    border: 0;
    border-radius: 24px;
    background: var(--qm-s1);
    transition: transform .16s var(--qm-ease-spring), background-color .16s var(--qm-ease-out);
}
#gameHubScreen .gh-acc-card:hover { background: var(--qm-s2); transform: translateY(-2px); }
#gameHubScreen .gh-acc-card:active { transform: scale(.97); }
#gameHubScreen .gh-acc-card:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#gameHubScreen .gh-acc-photo { height: 124px; background-color: #3A1424; }
#gameHubScreen .gh-acc-body { padding: 10px 12px 12px; }
#gameHubScreen .gh-acc-name { font: 800 15px var(--qm-sans); }
#gameHubScreen .gh-acc-bio { font-size: 12px; color: var(--qm-fg3); }

/* history = list rows grouped like .li */
#gameHubScreen .gh-hist { gap: 0; border-radius: var(--qm-r-card); background: var(--qm-s1); padding: 4px 16px; }
#gameHubScreen .gh-hist-row {
    min-height: 64px;
    padding: 10px 0;
    gap: 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid var(--qm-line);
}
#gameHubScreen .gh-hist-row:last-child { border-bottom: 0; }
#gameHubScreen .gh-hist-em { width: 44px; height: 44px; border-radius: var(--qm-r-icon); display: grid; place-items: center; background: var(--qm-s2); font-size: 21px; flex: none; }
#gameHubScreen .gh-hist-t { font: 600 15px/1.3 var(--qm-sans); }
#gameHubScreen .gh-hist-s { font-size: 13px; color: var(--qm-fg3); }
#gameHubScreen .gh-hist-res { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; font: 700 12px var(--qm-sans); }
#gameHubScreen .gh-res--win { color: var(--qm-green); background: rgba(74, 222, 128, .14); }
#gameHubScreen .gh-res--loss { color: var(--qm-pink-soft); background: rgba(233, 30, 99, .16); }
#gameHubScreen .gh-res--draw { color: #CBB6FF; background: rgba(124, 77, 255, .18); }
#gameHubScreen .gh-empty { border-radius: var(--qm-r-card); background: var(--qm-s1); padding: 22px 18px; font-size: 14px; color: var(--qm-fg3); }

/* bottom sheet */
#gameHubScreen .gh-sheet-back { background: var(--qm-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#gameHubScreen .gh-sheet {
    background: var(--qm-s1);
    border: 0;
    border-radius: var(--qm-r-sheet) var(--qm-r-sheet) 0 0;
    padding: 10px 20px calc(28px + env(safe-area-inset-bottom, 0px));
}
#gameHubScreen .gh-sheet-grip { width: 40px; height: 5px; background: rgba(255, 255, 255, .22); margin: 4px auto 18px; }
#gameHubScreen .gh-sheet-title { font: 800 26px/1.05 var(--qm-disp); letter-spacing: -.035em; margin-bottom: 6px; }
#gameHubScreen .gh-sheet-sub { font-size: 14px; color: var(--qm-fg2); margin-bottom: 18px; }
#gameHubScreen .gh-sheet-list { gap: 10px; }
#gameHubScreen .gh-sheet-row {
    min-height: 64px;
    padding: 10px 14px;
    gap: 14px;
    border: 0;
    border-radius: var(--qm-r-field);
    background: var(--qm-s2);
    transition: transform .14s var(--qm-ease-spring), background-color .14s var(--qm-ease-out);
}
#gameHubScreen .gh-sheet-row:hover { background: var(--qm-s3); }
#gameHubScreen .gh-sheet-row:active { transform: scale(.98); }
#gameHubScreen .gh-sheet-row:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
@media (min-width: 720px) {
    #gameHubScreen .gh-sheet {
        left: 50%;
        right: auto;
        top: 50%;
        bottom: auto;
        width: min(460px, calc(100% - 48px));
        translate: -50% -50%;
        border-radius: var(--qm-r-sheet);
        padding-bottom: 28px;
        box-shadow: var(--qm-shadow-card-lift);
    }
}

/* matchmaking / mode choice */
#gameHubScreen .gh-mode { gap: var(--qm-sp-3); }
#gameHubScreen .gh-mode-card {
    grid-template-columns: 52px 1fr;
    column-gap: 14px;
    padding: 18px;
    border: 0;
    border-radius: var(--qm-r-card);
    background: var(--qm-s1);
    transition: transform .16s var(--qm-ease-spring), background-color .16s var(--qm-ease-out);
}
#gameHubScreen .gh-mode-card:first-child { background: var(--qm-pink); }
#gameHubScreen .gh-mode-card:first-child .gh-mode-icn { background: rgba(255, 255, 255, .18); }
#gameHubScreen .gh-mode-card:first-child .gh-mode-s { color: rgba(255, 255, 255, .86); }
#gameHubScreen .gh-mode-card:hover { transform: translateY(-2px); border-color: transparent; }
#gameHubScreen .gh-mode-card:not(:first-child):hover { background: var(--qm-s2); }
#gameHubScreen .gh-mode-card:active { transform: scale(.98); }
#gameHubScreen .gh-mode-card:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#gameHubScreen .gh-mode-icn { width: 52px; height: 52px; border: 0; border-radius: 30%; background: var(--qm-s3); font-size: 25px; }
#gameHubScreen .gh-mode-t { font: 800 18px/1.2 var(--qm-sans); letter-spacing: -.02em; }
#gameHubScreen .gh-mode-s { font-size: 14px; color: var(--qm-fg2); }
#gameHubScreen .gh-find-bar { height: 8px; background: rgba(255, 255, 255, .1); }
#gameHubScreen .gh-find-bar-fill { background: var(--qm-pink); }
#gameHubScreen .gh-find-status { color: var(--qm-fg); font-weight: 600; }
#gameHubScreen .gh-find-found-av,
#gameHubScreen .gh-find-face { border-radius: 36%; }
#gameHubScreen .gh-find-found-name { font: 800 26px/1.05 var(--qm-disp); letter-spacing: -.035em; }
#gameHubScreen .gh-find-go { color: var(--qm-pink-soft); }
#gameHubScreen .gh-find-alt,
#gameHubScreen .gh-req-card { border: 0; border-radius: var(--qm-r-card); background: var(--qm-s1); padding: 20px; }
#gameHubScreen .gh-req-card--yes { background: var(--qm-s1); box-shadow: inset 0 0 0 1.5px rgba(74, 222, 128, .45); }
#gameHubScreen .gh-req-t,
#gameHubScreen .gh-find-alt-t { font: 800 18px/1.2 var(--qm-sans); letter-spacing: -.02em; }

/* match view */
#gameHubScreen .gh-view--match { background: var(--qm-bg); }
#gameHubScreen .gh-mhead { padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 10px; gap: 12px; }
#gameHubScreen .gh-mhead .gh-back { width: 40px; height: 40px; }
#gameHubScreen .gh-mav { width: 36px; height: 36px; font-size: 14px; }
#gameHubScreen .gh-mname { font: 700 14px var(--qm-sans); }
#gameHubScreen .gh-mscore { font: 800 26px/1 var(--qm-disp); letter-spacing: -.02em; }
#gameHubScreen .gh-mscore small { margin-top: 3px; font: 600 11px var(--qm-sans); color: var(--qm-fg3); }
#gameHubScreen .gh-canvas { border: 0; border-radius: var(--qm-r-card); box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
#gameHubScreen .gh-stage-overlay { border-radius: var(--qm-r-card); background: rgba(13, 10, 15, .82); }
#gameHubScreen .gh-ov-title { font: 800 26px/1.05 var(--qm-disp); letter-spacing: -.035em; }
#gameHubScreen .gh-ov-text { font-size: 14px; color: var(--qm-fg2); }
#gameHubScreen .gh-flash { background: var(--qm-pink); box-shadow: 0 4px 0 var(--qm-pink-edge), 0 12px 28px rgba(233, 30, 99, .32); }
#gameHubScreen .gh-c4-turn { font: 700 14px var(--qm-sans); color: var(--qm-fg2); }
#gameHubScreen .gh-c4-grid {
    gap: 6px;
    padding: 12px;
    border: 0;
    border-radius: var(--qm-r-card);
    background: var(--qm-violet);
    box-shadow: 0 6px 0 var(--qm-violet-edge), 0 18px 40px rgba(124, 77, 255, .22);
}
#gameHubScreen .gh-c4-grid[data-turn="me"] { box-shadow: 0 6px 0 var(--qm-violet-edge), 0 18px 40px rgba(124, 77, 255, .22), 0 0 0 2px var(--qm-pink-soft); }
#gameHubScreen .gh-c4-cell { background: #1A0F3D; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .55); }
#gameHubScreen .gh-c4-cell[data-p="1"] { background: var(--qm-pink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
#gameHubScreen .gh-c4-cell[data-p="2"] { background: var(--qm-cream); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18); }
#gameHubScreen .gh-hint { color: var(--qm-fg3); }

/* result */
#gameHubScreen .gh-result-hero {
    border: 0;
    border-radius: var(--qm-r-card-lg);
    padding: 26px 20px;
    background: var(--qm-violet);
    box-shadow: 0 18px 40px rgba(124, 77, 255, .22);
}
#gameHubScreen .gh-result-verdict { font: 800 clamp(34px, 10vw, 46px)/1 var(--qm-disp); letter-spacing: -.035em; }
#gameHubScreen .gh-result-game { font-size: 13px; color: rgba(255, 255, 255, .8); }
#gameHubScreen .gh-rp-av { border-color: rgba(255, 255, 255, .3); }
#gameHubScreen .gh-rp-score { font-family: var(--qm-disp); letter-spacing: -.03em; }
#gameHubScreen .gh-vs { color: rgba(255, 255, 255, .7); }
#gameHubScreen .gh-gp-row { color: var(--qm-cream); }
#gameHubScreen .gh-gp-break { color: rgba(255, 255, 255, .8); }
#gameHubScreen .gh-levelup { border: 0; border-radius: var(--qm-r-field); background: var(--qm-cream); color: var(--qm-ink); }

/* Kennenlernspiel entry inside the hub — pale pink card */
#gameHubScreen .kl-hub-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px;
    padding-inline-end: 96px;
    border: 0;
    border-radius: var(--qm-r-card);
    background: var(--qm-pink-pale);
    color: var(--qm-ink-pale);
    transition: transform .18s var(--qm-ease-spring), box-shadow .18s var(--qm-ease-out);
}
#gameHubScreen .kl-hub-card:hover { transform: translateY(-2px); }
#gameHubScreen .kl-hub-card:active { transform: scale(.985); }
#gameHubScreen .kl-hub-card:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#gameHubScreen .kl-hub-emoji {
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    width: 60px;
    height: 60px;
    border-radius: 30%;
    display: grid;
    place-items: center;
    background: #fff;
    font-size: 31px;
    transform: rotate(8deg);
}
#gameHubScreen .kl-hub-t { font: 800 20px/1.1 var(--qm-disp); letter-spacing: -.03em; color: var(--qm-ink-pale); }
#gameHubScreen .kl-hub-s { font-size: 14px; line-height: 1.45; color: rgba(42, 13, 25, .72); }
#gameHubScreen .kl-hub-cta {
    justify-self: start;
    margin-top: 8px;
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    border-radius: var(--qm-r-pill);
    background: var(--qm-ink-pale);
    color: #fff;
    font: 700 13px var(--qm-sans);
}
#gameHubScreen .gh-card.kl-invite { background: var(--qm-pink-pale); color: var(--qm-ink-pale); box-shadow: none; }
#gameHubScreen .gh-card.kl-invite .gh-card-t { color: var(--qm-ink-pale); }
#gameHubScreen .gh-card.kl-invite .gh-card-s { color: rgba(42, 13, 25, .72); }
#gameHubScreen .gh-card.kl-invite .gh-btn--ghost { color: var(--qm-ink-pale); }
#gameHubScreen .gh-card.kl-invite .gh-btn--ghost:hover { background: rgba(42, 13, 25, .08); }

@media (min-width: 720px) {
    #gameHubScreen .gh-scroll { padding-left: 24px; padding-right: 24px; }
}

/* ══════════════════════════════════════════════════════════════════════
   6. KENNENLERNSPIEL (#klScreen) — pale pink question cards
   ══════════════════════════════════════════════════════════════════════ */

#klScreen { background: var(--qm-bg); color: var(--qm-fg); font-family: var(--qm-sans); }
#klScreen::before { content: none; }

#klScreen .kl-header {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    grid-template-areas: "back . free" "title title title";
    row-gap: var(--qm-sp-3);
    padding: calc(14px + env(safe-area-inset-top, 0px)) 20px var(--qm-sp-4);
}
#klScreen .kl-back {
    grid-area: back;
    width: 44px;
    height: 44px;
    background: var(--qm-s2);
    transition: transform .16s var(--qm-ease-spring), background-color .16s var(--qm-ease-out);
}
#klScreen .kl-back:hover { background: var(--qm-s3); transform: translateX(-2px); }
#klScreen .kl-back:active { transform: scale(.92); }
#klScreen .kl-back:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
[dir="rtl"] #klScreen .kl-back svg { transform: scaleX(-1); }
#klScreen .kl-title-wrap { grid-area: title; flex-direction: column-reverse; gap: 8px; }
#klScreen .kl-title { font: 800 clamp(28px, 8.4vw, 34px)/1 var(--qm-disp); letter-spacing: -.035em; }
#klScreen .kl-sub { font: 600 13px/1.3 var(--qm-sans); color: var(--qm-fg2); }
#klScreen .kl-sub:empty { display: none; }
#klScreen .kl-free {
    grid-area: free;
    height: 36px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    background: rgba(233, 30, 99, .16);
    color: var(--qm-pink-soft);
    font: 600 13px var(--qm-sans);
}

#klScreen .kl-scroll { padding: 4px 20px calc(32px + env(safe-area-inset-bottom, 0px)); gap: var(--qm-sp-4); }

/* buttons */
#klScreen .kl-btn {
    height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--qm-r-pill);
    background: var(--qm-s3);
    color: #fff;
    font: 700 15px/1 var(--qm-sans);
    box-shadow: var(--qm-shadow-dark-btn);
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out);
}
#klScreen .kl-btn:hover { transform: translateY(-1px); filter: none; }
#klScreen .kl-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--qm-dark-edge); }
#klScreen .kl-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#klScreen .kl-btn--primary { background: var(--qm-pink); box-shadow: var(--qm-shadow-pink-btn); }
#klScreen .kl-btn--primary:active { box-shadow: var(--qm-shadow-pink-btn-press); }
#klScreen .kl-btn--ghost { background: var(--qm-s3); box-shadow: var(--qm-shadow-dark-btn); }
#klScreen .kl-btn--flat { background: transparent; box-shadow: none; color: var(--qm-fg2); font-weight: 600; }
#klScreen .kl-btn--flat:hover { color: var(--qm-fg); }
#klScreen .kl-btn--flat:active { box-shadow: none; }
#klScreen .kl-btn--block { height: 56px; font-size: 16px; }

#klScreen .kl-empty { color: var(--qm-fg2); font-size: 15px; }
#klScreen .kl-empty-emoji { width: 72px; height: 72px; border-radius: 30%; display: grid; place-items: center; background: var(--qm-s2); font-size: 36px; transform: rotate(-6deg); }
#klScreen .kl-note { font-size: 13px; line-height: 1.5; color: var(--qm-fg3); }

/* lobby */
#klScreen .kl-lobby { gap: 14px; }
#klScreen .kl-lobby-av {
    width: 112px;
    height: 112px;
    border-radius: 36%;
    font: 800 44px/1 var(--qm-disp);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    transform: rotate(-4deg);
}
#klScreen .kl-lobby-name { font: 800 clamp(28px, 8.4vw, 34px)/1.05 var(--qm-disp); letter-spacing: -.035em; }
#klScreen .kl-lobby-name span { color: var(--qm-pink-soft); font-weight: 800; }
#klScreen .kl-lobby-bio { font-size: 15px; line-height: 1.45; color: var(--qm-fg2); }
#klScreen .kl-lobby-quote {
    border: 0;
    border-radius: var(--qm-r-card);
    padding: 16px 20px;
    background: var(--qm-pink-pale);
    color: var(--qm-ink-pale);
    font-size: 15px;
    font-weight: 600;
}
#klScreen .kl-rules {
    max-width: 440px;
    gap: 0;
    margin-top: 6px;
    padding: 4px 16px;
    border-radius: var(--qm-r-card);
    background: var(--qm-s1);
}
#klScreen .kl-rule {
    min-height: 64px;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    border-bottom: 1px solid var(--qm-line);
    font-size: 14px;
    color: var(--qm-fg);
}
#klScreen .kl-rule:last-child { border-bottom: 0; }
#klScreen .kl-rule span {
    width: 44px;
    height: 44px;
    border-radius: var(--qm-r-icon);
    background: var(--qm-s2);
    color: var(--qm-pink-soft);
    font: 800 17px/1 var(--qm-disp);
}
#klScreen .kl-lobby-actions { max-width: 440px; gap: 12px; margin-top: 10px; }

/* progress + partner strip */
#klScreen .kl-strip-av,
#klScreen .kl-ans-av,
#klScreen .kl-finish-av { border-radius: 36%; }
#klScreen .kl-strip-av { width: 36px; height: 36px; }
#klScreen .kl-strip span { font: 700 15px var(--qm-sans); }
#klScreen .kl-dots { gap: 6px; flex: 1 1 auto; }
#klScreen .kl-dot { flex: 1 1 0; max-width: 44px; height: 8px; background: rgba(255, 255, 255, .1); }
#klScreen .kl-dot--done { background: var(--qm-pink); }
#klScreen .kl-dot--now { background: var(--qm-pink-soft); }
#klScreen .kl-progress-label { font: 600 13px var(--qm-sans); color: var(--qm-fg2); }

/* question card */
#klScreen .kl-card {
    border: 0;
    border-radius: var(--qm-r-card-lg);
    padding: 26px 22px;
    background: var(--qm-pink-pale);
    color: var(--qm-ink-pale);
}
#klScreen .kl-card-cat {
    height: 30px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    border-radius: var(--qm-r-pill);
    background: var(--qm-ink-pale);
    color: #fff;
    font: 700 12px var(--qm-sans);
    letter-spacing: 0;
    text-transform: none;
}
#klScreen .kl-question { font: 800 26px/1.12 var(--qm-disp); letter-spacing: -.035em; color: var(--qm-ink-pale); text-wrap: balance; }
#klScreen .kl-first { font-size: 13px; color: rgba(42, 13, 25, .7); }

#klScreen .kl-covered { border: 0; border-radius: var(--qm-r-field); background: var(--qm-s1); padding: 14px 16px; }
#klScreen .kl-covered--user { background: var(--qm-s1); }
#klScreen .kl-covered-icon { width: 44px; height: 44px; border-radius: var(--qm-r-icon); display: grid; place-items: center; background: var(--qm-s2); flex: none; }
#klScreen .kl-covered strong { font-size: 15px; }
#klScreen .kl-covered span { font-size: 13px; color: var(--qm-fg3); }

#klScreen .kl-answer-box {
    border: 0;
    border-radius: var(--qm-r-field);
    background: var(--qm-s2);
    padding: 14px 14px 12px;
    transition: box-shadow .16s var(--qm-ease-out);
}
#klScreen .kl-answer-box:focus-within { box-shadow: 0 0 0 2px var(--qm-pink); }
#klScreen .kl-answer-box textarea { font: 500 16px/1.5 var(--qm-sans); }
#klScreen .kl-answer-box textarea::placeholder { color: var(--qm-fg3); }
#klScreen .kl-count { font-size: 12px; color: var(--qm-fg3); }

/* reveal: profile answer = in-bubble, own answer = pink bubble */
#klScreen .kl-ans { border: 0; border-radius: 22px; padding: 14px 16px; background: var(--qm-s2); border-end-start-radius: 8px; }
#klScreen .kl-ans--profile { background: var(--qm-s2); }
#klScreen .kl-ans--user { background: var(--qm-pink); border-radius: 22px; border-end-end-radius: 8px; }
#klScreen .kl-ans-av--user { background: var(--qm-pink-edge); }
#klScreen .kl-ans-name { font: 600 13px var(--qm-sans); color: var(--qm-fg2); }
#klScreen .kl-ans--user .kl-ans-name { color: rgba(255, 255, 255, .82); }
#klScreen .kl-ans-body p { font-size: 15px; line-height: 1.45; }

#klScreen .kl-reacts { gap: 8px; }
#klScreen .kl-react {
    height: 36px;
    padding: 0 14px;
    border: 0;
    background: var(--qm-s2);
    color: var(--qm-fg);
    font: 600 13px var(--qm-sans);
    transition: transform .14s var(--qm-ease-spring), background-color .14s var(--qm-ease-out);
}
#klScreen .kl-react:hover { background: var(--qm-s3); }
#klScreen .kl-react:active { transform: scale(.95); }
#klScreen .kl-react:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
#klScreen .kl-react--on,
#klScreen .kl-react--on:hover { background: var(--qm-cream); color: var(--qm-ink); }

/* finish */
#klScreen .kl-finish-av { width: 80px; height: 80px; font: 800 30px/1 var(--qm-disp); }
#klScreen .kl-finish-av:first-child { transform: rotate(-6deg); }
#klScreen .kl-finish-av--user { background: var(--qm-pink); transform: rotate(6deg); }
#klScreen .kl-finish h2 { font: 800 clamp(28px, 8.4vw, 34px)/1.05 var(--qm-disp); letter-spacing: -.035em; }
#klScreen .kl-finish-sub { font-size: 15px; color: var(--qm-fg2); }
#klScreen .kl-hls { gap: 10px; }
#klScreen .kl-hl { border: 0; border-radius: var(--qm-r-field); background: var(--qm-s1); padding: 14px 16px; }
#klScreen .kl-hl-q { font: 700 13px var(--qm-sans); color: var(--qm-fg2); }
#klScreen .kl-hl-a { font-size: 14px; color: var(--qm-fg); }
#klScreen .kl-hl-a b { color: var(--qm-pink-soft); }

/* ══════════════════════════════════════════════════════════════════════
   7. CHAT MINI GAMES (.mg-*) — cards in the chat + composer overlay
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --mg-font-display: var(--qm-sans);
    --mg-font-mono: var(--qm-sans);
    --mg-neon-pink: #E91E63;
    --mg-neon-purple: #7C4DFF;
    --mg-neon-cyan: #FF80AB;
    --mg-neon-green: #4ADE80;
    --mg-bg-card: #151117;
    --mg-bg-glass: #1D1721;
    --mg-border-glow: transparent;
    --mg-radius: 28px;
    --mg-radius-sm: 20px;
    --mg-shadow-neon: 0 0 0 transparent;
    --mg-shadow-deep: 0 16px 40px rgba(0, 0, 0, .45);
}

.mg-card { border: 0; background: var(--qm-s1); }
.mg-card::before,
.mg-card::after { content: none; }
.mg-card-header { padding: 20px 20px 14px; gap: 14px; border-bottom: 1px solid var(--qm-line); }
.mg-card-icon { width: 48px; height: 48px; border-radius: 30%; font-size: 25px; box-shadow: none; transform: rotate(-6deg); }
.mg-card-icon--truths { background: var(--qm-pink); }
.mg-card-icon--secret { background: var(--qm-violet); }
.mg-card-title h4 { font: 800 19px/1.1 var(--qm-disp); letter-spacing: -.03em; }
.mg-card-title span { font: 600 12px var(--qm-sans); letter-spacing: 0; text-transform: none; color: var(--qm-fg3); }
.mg-card-body { padding: 16px 20px 20px; }
.mg-card-body p.mg-instruction { font-size: 14px; color: var(--qm-fg2); }

.mg-option-btn {
    min-height: 56px;
    padding: 12px 14px;
    border: 0;
    border-radius: var(--qm-r-field);
    background: var(--qm-s2);
    font: 500 15px/1.4 var(--qm-sans);
    transition: transform .18s var(--qm-ease-spring), background-color .18s var(--qm-ease-out), opacity .18s;
}
.mg-option-btn::before { content: none; }
.mg-option-btn:hover { background: var(--qm-s3); }
.mg-option-btn:active { transform: scale(.97); }
.mg-option-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
.mg-option-num {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 30%;
    background: var(--qm-s3);
    color: var(--qm-fg);
    font: 800 14px/1 var(--qm-sans);
    transition: background-color .18s var(--qm-ease-out), color .18s var(--qm-ease-out);
}
.mg-option-btn:hover .mg-option-num { background: rgba(233, 30, 99, .16); border-color: transparent; color: var(--qm-pink-soft); }
.mg-option-btn.mg-selected { background: rgba(233, 30, 99, .16); border-color: transparent; }
.mg-option-btn.mg-selected .mg-option-num { background: var(--qm-pink); color: #fff; }

.mg-input-field {
    min-height: 52px;
    border: 0;
    border-radius: var(--qm-r-field);
    background: var(--qm-s2);
    font-family: var(--qm-sans);
    font-size: 15px;
    transition: box-shadow .16s var(--qm-ease-out);
}
.mg-input-field:focus,
.mg-input-field--special:focus { border-color: transparent; box-shadow: 0 0 0 2px var(--qm-pink); }
.mg-input-label { font-family: var(--qm-sans); border-radius: 30%; }

.mg-submit-btn {
    height: 56px;
    border: 0;
    border-radius: var(--qm-r-pill);
    font: 700 16px/1 var(--qm-sans);
    letter-spacing: -.01em;
    text-transform: none;
    transition: transform .14s var(--qm-ease-spring), box-shadow .14s var(--qm-ease-out), opacity .14s;
}
.mg-submit-btn--primary { background: var(--qm-pink); color: #fff; box-shadow: var(--qm-shadow-pink-btn); }
.mg-submit-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--qm-shadow-pink-btn); }
.mg-submit-btn--primary:active { transform: translateY(3px); box-shadow: var(--qm-shadow-pink-btn-press); }
.mg-submit-btn--secondary { background: var(--qm-s3); color: #fff; border: 0; box-shadow: var(--qm-shadow-dark-btn); }
.mg-submit-btn--secondary:hover { transform: translateY(-1px); background: var(--qm-s3); }
.mg-submit-btn--secondary:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--qm-dark-edge); }
.mg-submit-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }

.mg-picker { gap: 10px; }
.mg-picker-btn {
    min-height: 72px;
    padding: 12px 14px;
    gap: 14px;
    border: 0;
    border-radius: 24px;
    background: var(--qm-s2);
    font-family: var(--qm-sans);
    transition: transform .16s var(--qm-ease-spring), background-color .16s var(--qm-ease-out);
}
.mg-picker-btn:hover { background: var(--qm-s3); border-color: transparent; transform: translateY(-1px); box-shadow: none; }
.mg-picker-btn:active { transform: scale(.98); }
.mg-picker-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
.mg-picker-icon { width: 52px; height: 52px; border-radius: 30%; font-size: 27px; box-shadow: none; }
.mg-picker-icon--truths { background: #3A2430; }
.mg-picker-icon--secret { background: #2A2350; }
.mg-picker-info h5 { font: 700 16px/1.25 var(--qm-sans); }
.mg-picker-info p { font-size: 13px; color: var(--qm-fg3); }

.mg-result-banner { border-radius: var(--qm-r-field); }
.mg-reveal-badge { border-radius: var(--qm-r-pill); font-family: var(--qm-sans); }
.mg-system-msg span { border-radius: var(--qm-r-pill); background: var(--qm-s2); font-family: var(--qm-sans); }
.mg-trigger-btn { transition: transform .14s var(--qm-ease-spring), opacity .14s; }
.mg-trigger-btn:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }

/* composer overlay = sheet */
.mg-composer-backdrop { background: var(--qm-scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mg-composer-panel { max-width: 440px; padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.mg-composer-content > .mg-card { border-radius: var(--qm-r-sheet); box-shadow: var(--qm-shadow-card-lift); }
.mg-composer-close {
    top: 32px;
    right: 32px;
    width: 40px;
    height: 40px;
    border: 0;
    background: var(--qm-s2);
    color: var(--qm-fg);
    transition: transform .14s var(--qm-ease-spring), background-color .14s var(--qm-ease-out);
}
.mg-composer-close:hover { background: var(--qm-s3); }
.mg-composer-close:active { transform: scale(.92); }
.mg-composer-close:focus-visible { outline: none; box-shadow: var(--qm-focus-ring); }
@media (min-width: 720px) {
    .mg-composer-overlay { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
    #groupChatScreen .lng-tile,
    #groupChatScreen .gc-room-card,
    #groupChatScreen .gc-back,
    #gameHubScreen .gh-game-card,
    #gameHubScreen .gh-btn,
    #klScreen .kl-btn,
    .mg-option-btn,
    .mg-submit-btn { transition: none; }
}

/* Floating dock is 80px (+ safe area) tall — reserve that space so the room
   composer is never painted over by the dock. */
#groupChatScreen.active {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}