/* theme-shakhbata.css - شخبطة's toggled identity layer (DESIGN_SPEC.md / R15).
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.
Two parts, deliberately different selector scopes:
1. :root[data-theme="shakhbata"] { --console-*: ... } - variable overrides ONLY. Same variable
names console-theme.css defines. This block must stay variable-only (no other rules) since
it is the part BOTH the host big screen and the phone (player.html) consume - the phone
never gets part 2 below.
2. html[data-theme="shakhbata"] - the full host-screen UI hijack. Every
selector here is rooted at an ID confirmed to exist ONLY in public/host.html's DOM (never
in public/player.html's), so these rules can never leak onto the phone controller even
though the same data-theme attribute is set on on both pages. Values reuse
شخبطة's existing literal palette (public/style.css :root - --ink/--teal/--orange/--gold/
--bone/etc., already mirrored by design-system.css's .shakhbata-skin block) so the
hijacked look matches شخبطة's real, already-shipped identity - not a new competing palette. */
:root[data-theme="shakhbata"] {
--console-bg: var(--ink, #0A1A24);
--console-bg-2: var(--ink-3, #123040);
--console-panel: var(--ink-2, #0E2330);
--console-panel-2: var(--ink-3, #123040);
--console-line: var(--shk-line, #1c4356);
--console-text: var(--bone, #F3ECDB);
--console-text-muted: var(--bone-dim, #b9c4c2);
--console-accent: var(--teal, #16A6A0);
--console-accent-d: var(--teal-d, #0c6f6b);
--console-cta: var(--orange, #FF6A1A);
--console-cta-d: var(--orange-d, #c24400);
--console-highlight: var(--gold, #FFC21F);
--console-highlight-d: var(--gold-d, #b9820a);
--console-success: var(--green, #57D06A);
--console-error: var(--magenta, #E4356A);
--console-focus-ring: var(--gold, #FFC21F);
--console-font-display: var(--display, 'Rakkas', 'Changa', system-ui, sans-serif);
--console-font-ui: var(--ui, 'Changa', system-ui, sans-serif);
}
/* ---- Host-only full UI hijack: ink/scribble playful identity ---- */
/* Confirmed host.html-only ancestors used below: #phase, #replay, #voting, #done, #showTitle,
#players, #audBadge, #reactionLayer, #tickDraw, #cartridge-boot. Descendant classes reused
inside them (e.g. .big-phase, .timer-num, .players-grid) are safe even though some of those
class names also exist standalone in player.html, because the FULL compound selector requires
the host-only ancestor id, which never exists in player.html's DOM. */
html[data-theme="shakhbata"] #phase,
html[data-theme="shakhbata"] #replay,
html[data-theme="shakhbata"] #voting,
html[data-theme="shakhbata"] #done {
background:
repeating-linear-gradient(135deg,
color-mix(in srgb, var(--console-accent) 7%, transparent) 0 2px,
transparent 2px 28px),
var(--console-bg);
color: var(--console-text);
font-family: var(--console-font-ui);
}
html[data-theme="shakhbata"] #phase .big-phase,
html[data-theme="shakhbata"] #voting .big-phase,
html[data-theme="shakhbata"] #done .end-title,
html[data-theme="shakhbata"] #showTitle {
font-family: var(--console-font-display);
color: var(--console-highlight);
text-shadow: 0 0 18px color-mix(in srgb, var(--console-highlight) 45%, transparent);
}
html[data-theme="shakhbata"] #phase .timer-num,
html[data-theme="shakhbata"] #voting .timer-num {
color: var(--console-cta);
text-shadow: 0 0 14px color-mix(in srgb, var(--console-cta) 40%, transparent);
}
html[data-theme="shakhbata"] #phase .players-grid .player-chip,
html[data-theme="shakhbata"] #replay .replay-stage,
html[data-theme="shakhbata"] #done .end-hero,
html[data-theme="shakhbata"] #done .summary {
border-color: var(--console-line);
}
html[data-theme="shakhbata"] #replay .replay-narrator .name {
color: var(--console-accent);
}
html[data-theme="shakhbata"] #audBadge {
background: var(--console-panel);
border-color: var(--console-accent);
color: var(--console-text);
}
html[data-theme="shakhbata"] #cartridge-boot::before {
/* ink-scribble boot flavor: teal 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%);
}