/* Room theme tokens: the create-room / waiting screen takes the palette of the selected game.
   Values come from each game's own theme (mini-games/<game>/*-theme.css: background, panel,
   text, primary-action and room-code colours). main.ts sets <html data-room-game="<id>">;
   the room CSS only reads --room-* tokens and never knows game names.
   Registered tokens interpolate, so switching games cross-fades every colour (gradients too).
   The catalog's «join the starting game» popup loads this file too and themes only itself:
   its overlay carries .rc-themed[data-room-game], the catalog <html> never gets the attribute. */

@property --room-bg { syntax: '<color>'; inherits: true; initial-value: #0d1329; }
@property --room-bg-deep { syntax: '<color>'; inherits: true; initial-value: #0a0f1f; }
@property --room-surface { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.06); }
@property --room-menu { syntax: '<color>'; inherits: true; initial-value: #151b30; }
@property --room-line { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.12); }
@property --room-text { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --room-muted { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.5); }
@property --room-faint { syntax: '<color>'; inherits: true; initial-value: rgba(255, 255, 255, 0.3); }
@property --room-accent { syntax: '<color>'; inherits: true; initial-value: #10b981; }
@property --room-accent-strong { syntax: '<color>'; inherits: true; initial-value: #059669; }
@property --room-on-accent { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --room-accent-text { syntax: '<color>'; inherits: true; initial-value: #10b981; }
@property --room-accent-soft { syntax: '<color>'; inherits: true; initial-value: rgba(16, 185, 129, 0.15); }
@property --room-code { syntax: '<color>'; inherits: true; initial-value: #10b981; }
@property --room-code-bg { syntax: '<color>'; inherits: true; initial-value: transparent; }
/* Control shape: corner radii also follow the game (pill buttons of the shared game UI, NHIE paper cut-outs). */
@property --room-radius-action { syntax: '<length>'; inherits: true; initial-value: 14px; }
@property --room-radius-chip { syntax: '<length>'; inherits: true; initial-value: 10px; }
@property --room-radius-field { syntax: '<length>'; inherits: true; initial-value: 14px; }
@property --room-radius-card { syntax: '<length>'; inherits: true; initial-value: 10px; }
@property --room-radius-code { syntax: '<length>'; inherits: true; initial-value: 12px; }

/* RoomPlay default (no game selected yet). */
:root {
    --room-bg: #0d1329; --room-chrome: #0d1329;
    --room-bg-deep: #0a0f1f;
    --room-surface: rgba(255, 255, 255, 0.06);
    --room-menu: #151b30;
    --room-line: rgba(255, 255, 255, 0.12);
    --room-text: #ffffff;
    --room-muted: rgba(255, 255, 255, 0.5);
    --room-faint: rgba(255, 255, 255, 0.3);
    --room-accent: #10b981;
    --room-accent-strong: #059669;
    --room-on-accent: #ffffff;
    --room-accent-text: #10b981;
    --room-accent-soft: rgba(16, 185, 129, 0.15);
    --room-code: #10b981;
    --room-code-bg: transparent;
    --room-male-text: #9bacff;
    --room-female-text: #ff91af;
    --room-radius-action: 14px;
    --room-radius-chip: 10px;
    --room-radius-field: 14px;
    --room-radius-card: 10px;
    --room-radius-code: 12px;
    /* Unregistered copy of --room-bg: it does not animate, so JS can read the target for <meta theme-color>. */
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        transition:
            --room-bg 320ms ease, --room-bg-deep 320ms ease, --room-surface 320ms ease,
            --room-menu 320ms ease, --room-line 320ms ease, --room-text 320ms ease,
            --room-muted 320ms ease, --room-faint 320ms ease, --room-accent 320ms ease,
            --room-accent-strong 320ms ease, --room-on-accent 320ms ease, --room-accent-text 320ms ease,
            --room-accent-soft 320ms ease, --room-code 320ms ease, --room-code-bg 320ms ease,
            --room-radius-action 320ms ease, --room-radius-chip 320ms ease, --room-radius-field 320ms ease,
            --room-radius-card 320ms ease, --room-radius-code 320ms ease;
    }
}

/* ---- Control shapes ----
   Server-backed games share client/assets/css/game-ui.css: pill actions (30px), 20px copy chips and
   room code, 16px fields, 12px player rows. The back button is a bare arrow everywhere.
   «Я никогда не» uses its own 16px cut-out shapes (cutout-theme.css). */

:is(:root, .rc-themed):is([data-room-game="jokinghazard"], [data-room-game="bunker"], [data-room-game="wouldyourather"],
        [data-room-game="secrethitler"], [data-room-game="quiz"], [data-room-game="fibbage"], [data-room-game="knowme"], [data-room-game="melody"],
        [data-room-game="truth-detector"], [data-room-game="100-to-1"], [data-room-game="quiplash"],
        [data-room-game="geoguessr"], [data-room-game="imaginarium"], [data-room-game="whatdoyoumeme"],
        [data-room-game="drawful"], [data-room-game="decoder"], [data-room-game="whosmostlikelyto"],
        [data-room-game="codenames"], [data-room-game="tower"], [data-room-game="detective"], [data-room-game="mix"]) {
    --room-radius-action: 30px;
    --room-radius-chip: 20px;
    --room-radius-field: 16px;
    --room-radius-card: 12px;
    --room-radius-code: 20px;
}


:root[data-room-game="neverhaveiever"], .rc-themed[data-room-game="neverhaveiever"] {
    --room-radius-action: 16px;
    --room-radius-chip: 16px;
    --room-radius-field: 16px;
    --room-radius-card: 16px;
    --room-radius-code: 16px;
}

/* ---- Dark game palettes ---- */

:root[data-room-game="detective"], .rc-themed[data-room-game="detective"] {
    --room-bg: #17363c; --room-chrome: #17363c; --room-bg-deep: #10282d;
    --room-surface: #10282d; --room-menu: #10282d; --room-line: rgba(247, 238, 220, 0.16);
    --room-text: #f7eedc; --room-muted: #c9dad6; --room-faint: rgba(201, 218, 214, 0.6);
    --room-accent: #e9a23b; --room-accent-strong: #e9a23b; --room-on-accent: #1b1612;
    --room-accent-text: #e9a23b; --room-accent-soft: rgba(233, 162, 59, 0.22);
    --room-code: #e9a23b; --room-code-bg: #10282d;
    --room-male-text: #8fc4ee; --room-female-text: #f0a3c0;
}

:root[data-room-game="mix"], .rc-themed[data-room-game="mix"] {
    --room-bg: #2b2356; --room-chrome: #2b2356; --room-bg-deep: #221c47;
    --room-surface: #3a3170; --room-menu: #3a3170; --room-line: rgba(255, 246, 236, 0.16);
    --room-text: #fff6ec; --room-muted: #d9d2ee; --room-faint: rgba(217, 210, 238, 0.6);
    --room-accent: #ffc94a; --room-accent-strong: #ffc94a; --room-on-accent: #1f1a3d;
    --room-accent-text: #ffc94a; --room-accent-soft: rgba(255, 201, 74, 0.2);
    --room-code: #ffc94a; --room-code-bg: #221c47;
    --room-male-text: #9cc4f2; --room-female-text: #f5a3c0;
}

:root[data-room-game="quiz"], .rc-themed[data-room-game="quiz"] {
    --room-bg: #100f36; --room-chrome: #100f36; --room-bg-deep: #0b0a26;
    --room-surface: #211759; --room-menu: #211759; --room-line: rgba(255, 255, 255, 0.14);
    --room-text: #ffffff; --room-muted: #d6cfe8; --room-faint: rgba(214, 207, 232, 0.55);
    --room-accent: #6640ba; --room-accent-strong: #6640ba; --room-on-accent: #ffffff;
    --room-accent-text: #b79cf0; --room-accent-soft: rgba(102, 64, 186, 0.35);
    --room-code: #d5ae58; --room-code-bg: #211759;
    --room-male-text: #63b0fc; --room-female-text: #f77cb0;
}

:root[data-room-game="100-to-1"], .rc-themed[data-room-game="100-to-1"] {
    --room-bg: #1258ae; --room-chrome: #1258ae; --room-bg-deep: #0b2550;
    --room-surface: #163a75; --room-menu: #163a75; --room-line: rgba(255, 255, 255, 0.18);
    --room-text: #ffffff; --room-muted: #d6e6fa; --room-faint: #9db9e3;
    --room-accent: #ffd43a; --room-accent-strong: #ffd43a; --room-on-accent: #17191f;
    --room-accent-text: #ffd43a; --room-accent-soft: rgba(255, 212, 58, 0.18);
    --room-code: #ffd43a; --room-code-bg: #163a75;
    --room-male-text: #a3cffd; --room-female-text: #fdb1ce;
}

:root[data-room-game="melody"], .rc-themed[data-room-game="melody"] {
    --room-bg: #45218a; --room-chrome: #45218a; --room-bg-deep: #2a1758;
    --room-surface: #2a1758; --room-menu: #2a1758; --room-line: rgba(255, 255, 255, 0.16);
    --room-text: #ffffff; --room-muted: #d9ccf5; --room-faint: #a996d6;
    --room-accent: #a677ef; --room-accent-strong: #a677ef; --room-on-accent: #17191f;
    --room-accent-text: #c9b8f0; --room-accent-soft: rgba(166, 119, 239, 0.25);
    --room-code: #edc945; --room-code-bg: #2a1758;
    --room-male-text: #63b0fc; --room-female-text: #f77cb0;
}

:root[data-room-game="wouldyourather"], .rc-themed[data-room-game="wouldyourather"] {
    --room-bg: #006bcb; --room-chrome: #006bcb; --room-bg-deep: #004e99;
    --room-surface: #004e99; --room-menu: #004e99; --room-line: rgba(255, 255, 255, 0.22);
    --room-text: #ffffff; --room-muted: #e8f3ff; --room-faint: #b8d8f5;
    --room-accent: #ca003d; --room-accent-strong: #a30031; --room-on-accent: #ffffff;
    --room-accent-text: #ffffff; --room-accent-soft: rgba(202, 0, 61, 0.35);
    --room-code: #00bce9; --room-code-bg: #004e99;
    --room-male-text: #03bdea; --room-female-text: #f77cb0;
}

:root[data-room-game="fibbage"], .rc-themed[data-room-game="fibbage"] {
    --room-bg: #70292c; --room-chrome: #70292c; --room-bg-deep: #4e1a1d;
    --room-surface: #5a2023; --room-menu: #5a2023; --room-line: rgba(240, 229, 198, 0.2);
    --room-text: #ffffff; --room-muted: #e9d3d0; --room-faint: rgba(233, 211, 208, 0.55);
    --room-accent: #eba332; --room-accent-strong: #d68f1f; --room-on-accent: #17191f;
    --room-accent-text: #eba332; --room-accent-soft: rgba(235, 163, 50, 0.2);
    --room-code: #eba332; --room-code-bg: #5a2023;
    --room-male-text: #78bafc; --room-female-text: #fc8ab9;
}

:root[data-room-game="knowme"], .rc-themed[data-room-game="knowme"] {
    --room-bg: #b64035; --room-chrome: #b64035; --room-bg-deep: #822d29;
    --room-surface: rgba(49, 53, 85, 0.45); --room-menu: #313555; --room-line: rgba(255, 242, 220, 0.25);
    --room-text: #ffffff; --room-muted: #fff2dc; --room-faint: rgba(255, 242, 220, 0.6);
    --room-accent: #822d29; --room-accent-strong: #6a2420; --room-on-accent: #ffffff;
    --room-accent-text: #fff2dc; --room-accent-soft: rgba(49, 53, 85, 0.55);
    --room-code: #fff2dc; --room-code-bg: #313555;
    --room-male-text: #6eb0f3; --room-female-text: #e58aaf;
}

:root[data-room-game="quiplash"], .rc-themed[data-room-game="quiplash"] {
    --room-bg: #542580; --room-chrome: #542580; --room-bg-deep: #3c1a5e;
    --room-surface: #46206b; --room-menu: #3c1a5e; --room-line: rgba(255, 255, 255, 0.14);
    --room-text: #ffffff; --room-muted: #d8c8e8; --room-faint: #c9b6dd;
    --room-accent: #743cae; --room-accent-strong: #743cae; --room-on-accent: #ffffff;
    --room-accent-text: #73c3b6; --room-accent-soft: rgba(115, 195, 182, 0.18);
    --room-code: #73c3b6; --room-code-bg: #3c1a5e;
    --room-male-text: #63b0fc; --room-female-text: #f77cb0;
}

:root[data-room-game="geoguessr"], .rc-themed[data-room-game="geoguessr"] {
    --room-bg: #302778; --room-chrome: #302778; --room-bg-deep: #211c54;
    --room-surface: #211c54; --room-menu: #211c54; --room-line: rgba(255, 255, 255, 0.14);
    --room-text: #ffffff; --room-muted: #c9c4f0; --room-faint: rgba(201, 196, 240, 0.55);
    --room-accent: #d63037; --room-accent-strong: #b0252b; --room-on-accent: #ffffff;
    --room-accent-text: #9bcb31; --room-accent-soft: rgba(155, 203, 49, 0.16);
    --room-code: #9bcb31; --room-code-bg: #211c54;
    --room-male-text: #63b0fc; --room-female-text: #f77cb0;
}

:root[data-room-game="neverhaveiever"], .rc-themed[data-room-game="neverhaveiever"] {
    --room-bg: #171316; --room-chrome: #171316; --room-bg-deep: #0f0c0e;
    --room-surface: #2a1d24; --room-menu: #2a1d24; --room-line: rgba(241, 218, 221, 0.16);
    --room-text: #f1dadd; --room-muted: #d4bcc0; --room-faint: rgba(241, 218, 221, 0.45);
    --room-accent: #bc2438; --room-accent-strong: #bc2438; --room-on-accent: #f1dadd;
    --room-accent-text: #f1dadd; --room-accent-soft: rgba(188, 36, 56, 0.3);
    --room-code: #f1dadd; --room-code-bg: #bc2438;
    --room-male-text: #63b0fc; --room-female-text: #f77cb0;
}

:root[data-room-game="whosmostlikelyto"], .rc-themed[data-room-game="whosmostlikelyto"] {
    --room-bg: #171719; --room-chrome: #171719; --room-bg-deep: #0f0f11;
    --room-surface: #262629; --room-menu: #262629; --room-line: rgba(255, 255, 255, 0.14);
    --room-text: #ffffff; --room-muted: #b4b3b8; --room-faint: #8e8d93;
    --room-accent: #a51043; --room-accent-strong: #7d0c33; --room-on-accent: #ffffff;
    --room-accent-text: #ff7aa2; --room-accent-soft: rgba(165, 16, 67, 0.3);
    --room-code: #ff7aa2; --room-code-bg: #262629;
    --room-male-text: #63b0fc; --room-female-text: #f77cb0;
}

:root[data-room-game="codenames"], .rc-themed[data-room-game="codenames"] {
    --room-bg: #9f265c; --room-chrome: #9f265c; --room-bg-deep: #7a1c47;
    --room-surface: rgba(37, 35, 41, 0.45); --room-menu: #252329; --room-line: rgba(255, 227, 236, 0.25);
    --room-text: #ffffff; --room-muted: #ffe3ec; --room-faint: #e3bccb;
    --room-accent: #252329; --room-accent-strong: #252329; --room-on-accent: #ffffff;
    --room-accent-text: #ffe3ec; --room-accent-soft: rgba(37, 35, 41, 0.55);
    --room-code: #f29a37; --room-code-bg: #252329;
    --room-male-text: #9fd0ff; --room-female-text: #ffc2dc;
}

/* ---- Light game palettes ---- */

:root:is([data-room-game="jokinghazard"], [data-room-game="bunker"], [data-room-game="truth-detector"], [data-room-game="secrethitler"],
        [data-room-game="imaginarium"], [data-room-game="whatdoyoumeme"], [data-room-game="drawful"],
        [data-room-game="decoder"], [data-room-game="tower"]) {
    color-scheme: light;
}
/* Remove (✕) is muted on every palette; on press it tints with a red readable on light paper. */
:root:is([data-room-game="jokinghazard"], [data-room-game="bunker"], [data-room-game="truth-detector"], [data-room-game="secrethitler"],
        [data-room-game="imaginarium"], [data-room-game="whatdoyoumeme"], [data-room-game="drawful"],
        [data-room-game="decoder"], [data-room-game="tower"]) .player-remove:active {
    color: #b3202c; background: rgba(179, 32, 44, 0.12);
}

:root[data-room-game="jokinghazard"], .rc-themed[data-room-game="jokinghazard"] {
    --room-bg: #ffffff; --room-chrome: #ffffff; --room-bg-deep: #f6f6f0;
    --room-surface: #f6f6f0; --room-menu: #ffffff; --room-line: rgba(23, 25, 31, 0.22);
    --room-text: #17191f; --room-muted: #4a4d55; --room-faint: #6b6e76;
    --room-accent: #236b92; --room-accent-strong: #1b5677; --room-on-accent: #ffffff;
    --room-accent-text: #236b92; --room-accent-soft: #e9f1f6;
    --room-code: #236b92; --room-code-bg: #e9f1f6;
    --room-male-text: #226a91; --room-female-text: #a33168;
}

:root[data-room-game="tower"], .rc-themed[data-room-game="tower"] {
    --room-bg: #f2782a; --room-chrome: #f2782a; --room-bg-deep: #e4572e;
    --room-surface: rgba(255, 244, 226, 0.45); --room-menu: #fff4e2; --room-line: rgba(29, 27, 26, 0.24);
    --room-text: #1d1b1a; --room-muted: #3d2a1c; --room-faint: #5b3f2a;
    --room-accent: #1d1b1a; --room-accent-strong: #1d1b1a; --room-on-accent: #ffffff;
    --room-accent-text: #1d1b1a; --room-accent-soft: rgba(29, 27, 26, 0.16);
    --room-code: #fff4e2; --room-code-bg: #1d1b1a;
    --room-male-text: #1b4c86; --room-female-text: #8a2457;
}

:root[data-room-game="bunker"], .rc-themed[data-room-game="bunker"] {
    --room-bg: #f0c523; --room-chrome: #f0c523; --room-bg-deep: #e6b912;
    --room-surface: rgba(40, 40, 35, 0.1); --room-menu: #f7da6a; --room-line: rgba(23, 25, 31, 0.24);
    --room-text: #17191f; --room-muted: #3d3a1e; --room-faint: #6b6440;
    --room-accent: #282823; --room-accent-strong: #282823; --room-on-accent: #ffffff;
    --room-accent-text: #17191f; --room-accent-soft: rgba(40, 40, 35, 0.16);
    --room-code: #f0c523; --room-code-bg: #282823;
    --room-male-text: #335b83; --room-female-text: #7b445a;
}

:root[data-room-game="secrethitler"], .rc-themed[data-room-game="secrethitler"] {
    --room-bg: #ef6347; --room-chrome: #ef6347; --room-bg-deep: #e5553a;
    --room-surface: rgba(243, 226, 184, 0.45); --room-menu: #f3e2b8; --room-line: rgba(23, 25, 31, 0.24);
    --room-text: #17191f; --room-muted: #3a1410; --room-faint: #5c2a20;
    --room-accent: #343431; --room-accent-strong: #343431; --room-on-accent: #ffffff;
    --room-accent-text: #17191f; --room-accent-soft: rgba(52, 52, 49, 0.16);
    --room-code: #f3e2b8; --room-code-bg: #343431;
    --room-male-text: #335b83; --room-female-text: #7b445a;
}

:root[data-room-game="truth-detector"], .rc-themed[data-room-game="truth-detector"] {
    --room-bg: #f0cb19; --room-chrome: #f0cb19; --room-bg-deep: #e6bf0c;
    --room-surface: rgba(39, 39, 35, 0.1); --room-menu: #f6db5c; --room-line: rgba(23, 25, 31, 0.24);
    --room-text: #17191f; --room-muted: #3d3a2a; --room-faint: #6b6448;
    --room-accent: #272723; --room-accent-strong: #272723; --room-on-accent: #ffffff;
    --room-accent-text: #17191f; --room-accent-soft: rgba(39, 39, 35, 0.16);
    --room-code: #e88629; --room-code-bg: #272723;
    --room-male-text: #005a9d; --room-female-text: #95255c;
}

:root[data-room-game="imaginarium"], .rc-themed[data-room-game="imaginarium"] {
    --room-bg: #de781b; --room-chrome: #de781b; --room-bg-deep: #d06b10;
    --room-surface: rgba(66, 44, 53, 0.12); --room-menu: #fff0ca; --room-line: rgba(23, 25, 31, 0.24);
    --room-text: #17191f; --room-muted: #2b1e14; --room-faint: rgba(43, 30, 20, 0.6);
    --room-accent: #422c35; --room-accent-strong: #422c35; --room-on-accent: #ffffff;
    --room-accent-text: #17191f; --room-accent-soft: rgba(66, 44, 53, 0.18);
    --room-code: #422c35; --room-code-bg: #fff0ca;
    --room-male-text: #05405a; --room-female-text: #622a42;
}

:root[data-room-game="whatdoyoumeme"], .rc-themed[data-room-game="whatdoyoumeme"] {
    --room-bg: #ffffff; --room-chrome: #ffffff; --room-bg-deep: #f1f0f6;
    --room-surface: #f1f0f6; --room-menu: #ffffff; --room-line: #dddbe6;
    --room-text: #17191f; --room-muted: #4a4d57; --room-faint: #6b6e78;
    --room-accent: #267c86; --room-accent-strong: #1e6770; --room-on-accent: #ffffff;
    --room-accent-text: #1e6770; --room-accent-soft: rgba(38, 124, 134, 0.14);
    --room-code: #1e6770; --room-code-bg: #f1f0f6;
    --room-male-text: #0271c2; --room-female-text: #b03e73;
}

:root[data-room-game="drawful"], .rc-themed[data-room-game="drawful"] {
    --room-bg: #f0eeeb; --room-chrome: #f0eeeb; --room-bg-deep: #e9e6e1;
    --room-surface: #ffffff; --room-menu: #ffffff; --room-line: #d9d5cf;
    --room-text: #17191f; --room-muted: #5a5650; --room-faint: #7b766e;
    --room-accent: #c61d76; --room-accent-strong: #a3175f; --room-on-accent: #ffffff;
    --room-accent-text: #a3175f; --room-accent-soft: #fbe6f0;
    --room-code: #c61d76; --room-code-bg: #ffffff;
    --room-male-text: #0274c7; --room-female-text: #c61d76;
}

:root[data-room-game="decoder"], .rc-themed[data-room-game="decoder"] {
    --room-bg: #eae5d9; --room-chrome: #eae5d9; --room-bg-deep: #ddd6c6;
    --room-surface: #fcfaf2; --room-menu: #fcfaf2; --room-line: rgba(23, 25, 31, 0.16);
    --room-text: #17191f; --room-muted: #5a5446; --room-faint: #6b6455;
    --room-accent: #b62f35; --room-accent-strong: #8f2328; --room-on-accent: #ffffff;
    --room-accent-text: #b62f35; --room-accent-soft: rgba(182, 47, 53, 0.1);
    --room-code: #b62f35; --room-code-bg: #fcfaf2;
    --room-male-text: #276b8c; --room-female-text: #ab366e;
}

/* ---- Shared pieces that live outside create-room's inline CSS ---- */

body .player-gender-option,
body .player-gender-badge { color: var(--room-muted); }
body .player-gender-selector { border-color: var(--room-line); background: var(--room-surface); border-radius: var(--room-radius-field); }
body .player-gender-option { border-radius: calc(var(--room-radius-field) - 3px); }
body .player-gender-option.player-gender-male.is-selected,
body .player-gender-badge.player-gender-male { color: var(--room-male-text); }
body .player-gender-option.player-gender-female.is-selected,
body .player-gender-badge.player-gender-female { color: var(--room-female-text); }
body .player-gender-option:focus-visible,
body .player-gender-badge:focus-visible { outline-color: var(--room-text); }
body .rc-role { color: var(--room-muted); }
body .rc-leave { border-radius: var(--room-radius-action); border-color: var(--room-line); background: var(--room-surface); color: var(--room-text); }
body .rc-leave:active { background: var(--room-accent-soft); }
body .rc-leave:focus-visible { outline-color: var(--room-text); }
body .player-item.is-away { background: transparent; }
body .player-item.is-away .player-name { color: var(--room-muted); }
/* «На сайте»: away from the room but invitable, so it keeps its colours and the status takes the game accent. */
body .player-item.is-on-site .rc-role { color: var(--room-accent-text); font-weight: 600; }

/* ---- Avatar picker (shared avatar-capture.js sheet) ----
   The sheet is appended to <body>, so it reads the same --room-* tokens and recolours with the game.
   Only this page loads room-themes.css; in-game lobbies keep their own theme overrides. */

.avatar-capture-overlay { background: rgba(0, 0, 0, 0.6); align-items: flex-end; }
.avatar-capture-modal {
    background: linear-gradient(180deg, var(--room-bg) 0%, var(--room-bg-deep) 100%);
    border-top: 1px solid var(--room-line);
    color: var(--room-text);
}
.avatar-capture-close { background: var(--room-surface); color: var(--room-text); }
.avatar-capture-tabs { background: var(--room-surface); border-radius: var(--room-radius-field); margin-right: 44px; }
.avatar-capture-tab { color: var(--room-muted); border-radius: calc(var(--room-radius-field) - 4px); }
.avatar-capture-tab.active { background: var(--room-accent); color: var(--room-on-accent); }
.avatar-capture-gif-item { background: var(--room-surface); border-radius: var(--room-radius-card); }
.avatar-capture-gif-item:hover { border-color: var(--room-accent); }
.avatar-capture-gif-grid::-webkit-scrollbar-thumb { background: var(--room-line); }
.avatar-capture-guide, .avatar-capture-preview { border-color: var(--room-accent); }
.avatar-capture-btn { border-radius: var(--room-radius-action); }
.avatar-capture-btn-capture, .avatar-capture-btn-use { background: var(--room-accent); color: var(--room-on-accent); }
.avatar-capture-btn-retake { border-color: var(--room-line); color: var(--room-text); }