/* theme-seenjeem.css - سين جيم's toggled identity layer (DESIGN_SPEC.md / R16).
Preloaded as a disabled on every themable page; public/common.js's applyGameTheme()
enables it (and sets ) once the room's game actually starts,
disables it again on lobby-return. Same two-part shape as theme-shakhbata.css - see that
file's header comment for the full rationale (repeated only briefly here).
1. :root[data-theme="seenjeem"] { --console-*: ... } - variable-only overrides, consumed by
BOTH host and phone.
2. html[data-theme="seenjeem"] - the full host-screen "game-show/trivia"
UI hijack, scoped to IDs confirmed to exist only in public/host.html's DOM (#sjBoard,
#sjBuzzer, #sjDone, #showTitle, #audBadge, #reactionLayer, #cartridge-boot - never in
public/player.html's, so these rules cannot leak onto the phone controller). Values reuse
سين جيم's already-approved, contrast-checked palette (DESIGN_SPEC.md section 7 /
design-system.css's .seenjeem-skin block) - electric indigo signature, hot-pink CTA/buzz
color, amber highlight for scores - not a new competing palette. */
:root[data-theme="seenjeem"] {
--console-bg: var(--surface-0, #0B0F1A);
--console-bg-2: var(--surface-2, #1B2440);
--console-panel: var(--surface-1, #141B2E);
--console-panel-2: var(--surface-2, #1B2440);
--console-line: var(--line, #262F4A);
--console-text: var(--text-primary, #F5F3FA);
--console-text-muted: var(--text-muted, #9BA3BF);
--console-accent: var(--accent-signature, #5B6BFF);
--console-accent-d: var(--accent-signature-d, #3C46B8);
--console-cta: var(--accent-cta, #FF3D6E);
--console-cta-d: var(--accent-cta-d, #C22850);
--console-highlight: var(--accent-highlight, #FFB020);
--console-highlight-d: var(--accent-highlight-d, #C4820F);
--console-success: var(--semantic-success, #3DDC84);
--console-error: var(--semantic-error, #FF4757);
--console-focus-ring: var(--focus-ring, #FFB020);
/* No dedicated سين جيم display face is committed yet (DESIGN_SPEC.md section 7 leaves this
an explicit later call) - reuse Changa, matching the platform-shell's own default. */
--console-font-display: var(--font-display, 'Changa', system-ui, sans-serif);
--console-font-ui: var(--font-ui, 'Changa', system-ui, sans-serif);
}
/* ---- Host-only full UI hijack: game-show / trivia identity ---- */
html[data-theme="seenjeem"] #sjBoard,
html[data-theme="seenjeem"] #sjBuzzer,
html[data-theme="seenjeem"] #sjDone {
background:
radial-gradient(ellipse 90% 60% at 50% 0%,
color-mix(in srgb, var(--console-accent) 16%, transparent), transparent 65%),
var(--console-bg);
color: var(--console-text);
font-family: var(--console-font-ui);
}
html[data-theme="seenjeem"] #sjBoard .sj-tile-grid .sj-tile,
html[data-theme="seenjeem"] #sjBuzzer .sj-buzz-opt {
border-color: var(--console-line);
background: var(--console-panel);
}
html[data-theme="seenjeem"] #sjBoard .sj-turn-banner,
html[data-theme="seenjeem"] #sjBuzzer .sj-q-meta {
background: var(--console-panel-2);
color: var(--console-highlight);
border-color: var(--console-accent);
}
html[data-theme="seenjeem"] #sjBoard .ds-timer,
html[data-theme="seenjeem"] #sjBuzzer .ds-timer {
border-color: var(--console-accent);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--console-accent) 45%, transparent),
0 22px 44px -22px rgba(0,0,0,.85);
}
html[data-theme="seenjeem"] #sjBoard .ds-timer-num,
html[data-theme="seenjeem"] #sjBuzzer .ds-timer-num {
color: var(--console-highlight);
text-shadow: 0 0 20px color-mix(in srgb, var(--console-highlight) 55%, transparent);
}
html[data-theme="seenjeem"] #sjBuzzer .sj-leaderboard,
html[data-theme="seenjeem"] #sjDone .summary {
background: var(--console-panel);
border-color: var(--console-line);
color: var(--console-text);
}
html[data-theme="seenjeem"] #sjDone .sj-end-banner {
color: var(--console-highlight);
text-shadow: 0 0 18px color-mix(in srgb, var(--console-highlight) 45%, transparent);
}
html[data-theme="seenjeem"] #showTitle {
font-family: var(--console-font-display);
color: var(--console-highlight);
}
html[data-theme="seenjeem"] #audBadge {
background: var(--console-panel);
border-color: var(--console-accent);
color: var(--console-text);
}
html[data-theme="seenjeem"] #cartridge-boot::before {
/* trivia boot flavor: electric-indigo ring instead of the base console's neutral accent glow */
background: radial-gradient(ellipse 70% 60% at 50% 50%,
color-mix(in srgb, var(--console-accent) 40%, transparent), transparent 70%);
}