/* The Solaro skin over the rooms' own panels, dialogs, bars and buttons (Lumazel gave them gold on midnight).
   Loaded after each game's stylesheet; the games' CSS stays as it came, so a fix there carries over unchanged.
   One language for all three: deep-blue glass, a cyan → violet → magenta light, Rajdhani for titles, Inter for text. */
body.sg-play {
    --t-glass: linear-gradient(180deg, rgba(20, 27, 60, .95) 0%, rgba(9, 12, 30, .97) 100%);
    --t-glass-lite: rgba(10, 14, 34, .82);
    --t-line: rgba(140, 200, 255, .26);
    --t-line-hi: rgba(140, 220, 255, .55);
    --t-ink: #eef1ff;
    --t-ink-2: #c8cdea;
    --t-mute: #8f98c0;
    --t-cyan: #22d3ee;
    --t-violet: #8b5cf6;
    --t-brand: linear-gradient(90deg, #22d3ee 0%, #8b5cf6 55%, #ec4899 100%);
    --t-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 50px rgba(34, 211, 238, .08), 0 0 0 1px rgba(255, 255, 255, .03) inset;
    --t-btn: rgba(255, 255, 255, .05);
    --t-sel: rgba(34, 211, 238, .16);
}

/* ================================================================ shared pieces */
body.sg-play kbd { border: 1px solid var(--t-line-hi); border-bottom-width: 3px; background: rgba(34, 211, 238, .08); color: #e6faff; font-family: Inter, system-ui, sans-serif; }
body.sg-play input[type=range] { accent-color: var(--t-cyan); }
body.sg-play input[type=checkbox] { accent-color: var(--t-violet); }

/* ================================================================ Tesla's Ascent */
body.sg-play #zplat { border-color: var(--t-line); background: #070a1a; }
body.sg-play .zplat-panel {
    background: var(--t-glass); border: 1px solid var(--t-line); border-radius: 22px; color: var(--t-ink-2);
    box-shadow: var(--t-shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-family: Inter, system-ui, sans-serif;
}
body.sg-play .zplat-panel::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px; background: var(--t-brand); box-shadow: 0 0 16px rgba(34, 211, 238, .6); }
body.sg-play .zplat-panel h1, body.sg-play .zplat-panel h2 {
    font-family: Rajdhani, Inter, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; text-shadow: none;
    background: linear-gradient(90deg, #fff 0%, #bdf3ff 60%, #d8c9ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.sg-play .zplat-panel h1 { font-size: 2rem; }
body.sg-play .zplat-panel p { color: var(--t-ink-2); }
body.sg-play .zplat-sub { color: #a9b6ff; font-weight: 600; }
body.sg-play .zplat-panel b { color: #fff; }
body.sg-play .zplat-go {
    border: 1px solid var(--t-line-hi); border-radius: 12px; background: var(--t-btn); color: #fff; box-shadow: none;
    font: 700 .95rem/1 Rajdhani, Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; padding: .85rem 1.5rem; transition: background .2s, border-color .2s, box-shadow .2s, filter .2s;
}
body.sg-play .zplat-go:hover, body.sg-play .zplat-go:focus-visible { filter: none; background: rgba(255, 255, 255, .1); border-color: rgba(160, 230, 255, .8); }
body.sg-play .zplat-go:not(.zplat-go--quiet) { border: 0; background: var(--t-brand); background-size: 160% 100%; box-shadow: 0 10px 30px rgba(34, 211, 238, .25), 0 0 0 1px rgba(255, 255, 255, .12) inset; }
body.sg-play .zplat-go:not(.zplat-go--quiet):hover { background-position: 100% 0; box-shadow: 0 14px 38px rgba(139, 92, 246, .4), 0 0 0 1px rgba(255, 255, 255, .18) inset; }
body.sg-play .zplat-levels button, body.sg-play .zplat-diff button, body.sg-play .zplat-world-levels button {
    border: 1px solid var(--t-line); border-radius: 12px; background: var(--t-btn); color: #fff; font-family: Inter, system-ui, sans-serif; font-weight: 700; transition: background .15s, border-color .15s, box-shadow .15s;
}
body.sg-play .zplat-levels button:hover:not(:disabled), body.sg-play .zplat-diff button:hover, body.sg-play .zplat-world-levels button:hover { border-color: var(--t-line-hi); background: rgba(255, 255, 255, .09); }
body.sg-play .zplat-levels button small, body.sg-play .zplat-diff button small { color: var(--t-mute); font-weight: 500; }
body.sg-play .zplat-levels button.is-sel, body.sg-play .zplat-diff button.is-sel, body.sg-play .zplat-world-levels button.is-sel {
    background: var(--t-sel); border-color: var(--t-cyan); box-shadow: 0 0 0 1px var(--t-cyan) inset, 0 0 18px rgba(34, 211, 238, .35);
}
body.sg-play .zplat-levels button.is-sel small, body.sg-play .zplat-diff button.is-sel small { color: #bdf3ff; }
body.sg-play .zplat-levels button.is-members { border-style: dashed; border-color: rgba(139, 92, 246, .45); opacity: .75; }
body.sg-play .zplat-levels button.is-members small { color: #c4b5fd; }
body.sg-play .zplat-warn { color: #fda4c6; font-weight: 600; }
body.sg-play .zplat-calm, body.sg-play .zplat-vol { color: var(--t-ink-2); }
body.sg-play .zplat-credits-link { color: var(--t-mute); }
body.sg-play .zplat-credits-link:hover { color: #fff; }
body.sg-play .zplat-credits a, body.sg-play #zplat-credits .zplat-sub a { color: var(--t-cyan); }
body.sg-play .zplat-stars { color: #ffc65a; text-shadow: 0 0 18px rgba(255, 190, 80, .55); }
body.sg-play .zplat-score dt { color: var(--t-mute); }
body.sg-play .zplat-score dd { color: #fff; font-family: Rajdhani, Inter, sans-serif; font-size: 1.1rem; }
body.sg-play .zplat-table th { color: var(--t-mute); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
body.sg-play .zplat-table th, body.sg-play .zplat-table td { border-bottom-color: rgba(140, 170, 255, .1); }
body.sg-play .zplat-table tr.is-me td { color: #fff; background: rgba(34, 211, 238, .08); }
body.sg-play .zplat-world-h { color: #fff; font-family: Rajdhani, Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em; }
body.sg-play .zplat-lead, body.sg-play .zplat-who b { color: var(--t-cyan); }
body.sg-play .zplat-lead b { color: #fff; }
body.sg-play .zplat-who { border: 1px solid rgba(139, 92, 246, .4); background: linear-gradient(135deg, rgba(34, 211, 238, .08), rgba(139, 92, 246, .12)); color: var(--t-ink-2); border-radius: 14px; }
body.sg-play .zplat-unlock-tree { color: #bdf3ff; text-shadow: 0 0 22px rgba(34, 211, 238, .7); }
body.sg-play .zplat-toast, body.sg-play .zplat-preview {
    background: rgba(10, 14, 34, .86); border: 1px solid var(--t-line); color: var(--t-ink-2); box-shadow: 0 16px 50px rgba(0, 0, 0, .5), 0 0 30px rgba(34, 211, 238, .12);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 16px;
}
body.sg-play .zplat-toast b, body.sg-play .zplat-preview b { color: #fff; font-family: Rajdhani, Inter, sans-serif; text-transform: uppercase; letter-spacing: .06em; text-shadow: 0 0 14px rgba(34, 211, 238, .5); }
body.sg-play .zplat-preview > span:not(.zplat-preview__eye) { color: #a9b6ff; }
body.sg-play .zplat-preview small { color: var(--t-cyan); }
body.sg-play .zplat-load { color: #bdf3ff; font-family: Rajdhani, Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
/* the HUD over the playing field */
body.sg-play .zplat-hud { color: #fff; text-shadow: 0 0 10px rgba(34, 211, 238, .45); font-family: Inter, system-ui, sans-serif; }
body.sg-play .zplat-hud__level { border-color: var(--t-line-hi); background: rgba(10, 14, 34, .7); font-family: Rajdhani, Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
body.sg-play .zplat-hud__btn { border-color: var(--t-line); background: rgba(10, 14, 34, .7); color: #fff; border-radius: 10px; }
body.sg-play .zplat-hud__btn:hover { border-color: var(--t-line-hi); background: rgba(30, 40, 80, .8); }
body.sg-play .zplat-pad button { border-color: rgba(140, 220, 255, .55); background: rgba(10, 14, 34, .55); color: #fff; box-shadow: 0 0 14px rgba(34, 211, 238, .3); }
body.sg-play .zplat-pad button.is-on { background: rgba(34, 211, 238, .35); }

/* ================================================================ De Damkamer */
body.sg-play #zdam { font-family: Inter, system-ui, sans-serif; }
body.sg-play #zdam-start, body.sg-play #zdam-end { background: rgba(4, 6, 16, .55); backdrop-filter: blur(4px); }
body.sg-play .zdam-card {
    position: relative; background: var(--t-glass); border: 1px solid var(--t-line); border-radius: 22px; box-shadow: var(--t-shadow);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body.sg-play .zdam-card::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px; background: var(--t-brand); box-shadow: 0 0 16px rgba(34, 211, 238, .6); }
body.sg-play .zdam-card h2, body.sg-play #zdam-end-msg { font-family: Rajdhani, Inter, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; }
body.sg-play .zdam-card p { color: var(--t-ink-2); }
body.sg-play .zdam-card h3 { color: var(--t-mute); font-family: Inter, sans-serif; font-weight: 600; }
body.sg-play .zdam-row button { background: var(--t-btn); color: #fff; border: 1px solid var(--t-line); border-radius: 12px; font-family: Inter, sans-serif; font-weight: 600; }
body.sg-play .zdam-row button:hover { border-color: var(--t-line-hi); background: rgba(255, 255, 255, .09); }
body.sg-play .zdam-row button.is-on { background: var(--t-sel); color: #fff; border-color: var(--t-cyan); box-shadow: 0 0 0 1px var(--t-cyan) inset, 0 0 18px rgba(34, 211, 238, .35); font-weight: 700; }
body.sg-play .zdam-oracles button { background: rgba(10, 14, 34, .8); border: 2px solid var(--t-line); }
body.sg-play .zdam-oracles button:hover { border-color: var(--t-line-hi); }
body.sg-play .zdam-oracles button.is-on { border-color: var(--t-cyan); background: rgba(10, 14, 34, .9); box-shadow: 0 0 22px rgba(34, 211, 238, .45); }
body.sg-play .zdam-oracles button em { color: var(--t-ink-2); background: rgba(5, 7, 18, .7); }
body.sg-play .zdam-oracles button.is-on em { color: #fff; background: rgba(34, 211, 238, .18); }
body.sg-play .zdam-tick { background: var(--t-brand); border-color: rgba(255, 255, 255, .5); color: #fff; }
body.sg-play #zdam-play, body.sg-play #zdam-again {
    border: 0; border-radius: 14px; color: #fff; background: var(--t-brand); background-size: 160% 100%;
    font: 700 1rem/1 Rajdhani, Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; padding: 15px 44px;
    box-shadow: 0 10px 30px rgba(34, 211, 238, .25), 0 0 0 1px rgba(255, 255, 255, .12) inset;
}
body.sg-play #zdam-play:hover, body.sg-play #zdam-again:hover { filter: none; background-position: 100% 0; box-shadow: 0 14px 38px rgba(139, 92, 246, .4); }
body.sg-play #zdam-cancel { border-radius: 12px; border-color: var(--t-line); color: var(--t-ink-2); font-family: Inter, sans-serif; }
body.sg-play #zdam-cancel:hover { color: #fff; border-color: var(--t-line-hi); background: rgba(255, 255, 255, .06); }
body.sg-play .zdam-locked { color: var(--t-ink-2); }
body.sg-play .zdam-locked a { color: var(--t-cyan); }
body.sg-play #zdam-loading { background: radial-gradient(ellipse at 50% 40%, #121a3c, #05060f 70%); color: #bdf3ff; font-family: Rajdhani, Inter, sans-serif; text-transform: uppercase; letter-spacing: .16em; }
/* the bar along the bottom and the pop-ups above it */
body.sg-play #zdam-bar { background: rgba(10, 14, 34, .82); border: 1px solid var(--t-line); box-shadow: 0 12px 40px rgba(0, 0, 0, .45); backdrop-filter: blur(10px); }
body.sg-play #zdam-bar strong { color: #fff; font-family: Rajdhani, Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; }
body.sg-play #zdam-bar button { background: var(--t-btn); color: #fff; border: 1px solid var(--t-line); font-family: Inter, sans-serif; font-weight: 600; font-size: 13px; }
body.sg-play #zdam-bar button:hover { background: rgba(255, 255, 255, .1); border-color: var(--t-line-hi); }
body.sg-play #zdam-sound[aria-pressed="true"], body.sg-play #zdam-help[aria-expanded="true"], body.sg-play #zdam-rules[aria-expanded="true"] { background: var(--t-sel); border-color: var(--t-cyan); }
body.sg-play #zdam-vol { background: linear-gradient(90deg, var(--t-cyan), var(--t-violet)); }
body.sg-play #zdam-vol::-webkit-slider-thumb { background: #fff; border: 2px solid var(--t-cyan); }
body.sg-play #zdam-help-pop, body.sg-play #zdam-rules-pop, body.sg-play #zdam-chat {
    background: var(--t-glass); border: 1px solid var(--t-line); box-shadow: var(--t-shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
body.sg-play #zdam-help-pop span, body.sg-play #zdam-rules-pop ol { color: var(--t-ink-2); }
body.sg-play #zdam-rules-pop h4, body.sg-play .zdam-chat__head { color: #fff; font-family: Rajdhani, Inter, sans-serif; letter-spacing: .1em; }
body.sg-play .zdam-chat__head button { color: var(--t-mute); }
body.sg-play .zdam-chat__head button:hover { color: #fff; }
body.sg-play #zdam-chat-form input { background: rgba(255, 255, 255, .05); border: 1px solid var(--t-line); color: #fff; border-radius: 12px; font-family: Inter, sans-serif; }
body.sg-play #zdam-chat-form input:focus { border-color: var(--t-cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); }
body.sg-play #zdam-chat-form button { border: 0; border-radius: 12px; background: var(--t-brand); color: #fff; font-family: Inter, sans-serif; font-weight: 700; }
body.sg-play #zdam-chat-form button:hover { filter: brightness(1.1); background: var(--t-brand); }
body.sg-play #zdam-say { background: rgba(10, 14, 34, .84); border-color: rgba(34, 211, 238, .45); color: #e6faff; box-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 0 24px rgba(34, 211, 238, .15); }
body.sg-play #zdam-ask { color: #fff; border-color: rgba(255, 255, 255, .7); background: radial-gradient(circle at 35% 30%, #a5f3fc, #22d3ee 45%, #6d28d9); font-family: Rajdhani, Inter, sans-serif; }
body.sg-play #zdam-status { font-family: Inter, sans-serif; }

/* ================================================================ Tesla's klaverjassen */
body.sg-play #zkj-loading { background: radial-gradient(ellipse at 50% 42%, #121a3c, #05060f 70%); color: #bdf3ff; font-family: Rajdhani, Inter, sans-serif; text-transform: uppercase; letter-spacing: .14em; }
body.sg-play .zkj-spin { border-color: rgba(140, 200, 255, .2) !important; border-top-color: var(--t-cyan) !important; }
/* the buttons in the room */
body.sg-play #zkj button { background: rgba(10, 14, 34, .82); color: #fff; border: 1px solid var(--t-line); border-radius: 10px; font-family: Inter, system-ui, sans-serif; font-weight: 600; }
body.sg-play #zkj button:hover { background: rgba(30, 40, 80, .9); border-color: var(--t-line-hi); }
body.sg-play #zkj button.zkj-hot { border: 0; background: var(--t-brand); color: #fff; font-weight: 700; box-shadow: 0 8px 24px rgba(34, 211, 238, .25); }
body.sg-play #zkj button.zkj-hot:hover { filter: brightness(1.1); background: var(--t-brand); }
body.sg-play .zkj-title { font-family: Rajdhani, Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em; color: #fff; text-shadow: 0 0 12px rgba(34, 211, 238, .45); }
body.sg-play .zkj-score, body.sg-play .zkj-to, body.sg-play #zkj-info, body.sg-play #zkj-msg, body.sg-play #zkj-trick {
    background: rgba(10, 14, 34, .82); border-color: var(--t-line); color: var(--t-ink-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body.sg-play .zkj-score b { color: #fff; font-family: Rajdhani, Inter, sans-serif; }
/* the side panels (scorecard, board, music, last trick) and the dialogs */
body.sg-play .zkj-panel, body.sg-play .zkj-modal__box, body.sg-play .zkj-book {
    background: var(--t-glass); border: 1px solid var(--t-line); color: var(--t-ink-2); box-shadow: var(--t-shadow);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 18px;
}
body.sg-play .zkj-drawbox { background: rgba(12, 16, 38, .92); }
body.sg-play .zkj-modal { background: radial-gradient(ellipse at center, rgba(4, 6, 16, .3), rgba(4, 6, 16, .62)); }
body.sg-play .zkj-modal--clear { background: transparent; }
body.sg-play .zkj-panel__head, body.sg-play .zkj-modal__box h3, body.sg-play .zkj-drawbox__q {
    color: #fff; font-family: Rajdhani, Inter, sans-serif; text-transform: uppercase; letter-spacing: .08em;
}
body.sg-play .zkj-modal__crest, body.sg-play .zkj-vipbox__crest { color: var(--t-cyan); opacity: .9; text-shadow: 0 0 12px rgba(34, 211, 238, .5); }
body.sg-play .zkj-panel th, body.sg-play .zkj-panel td, body.sg-play .zkj-modal__box th, body.sg-play .zkj-modal__box td { border-bottom-color: rgba(140, 170, 255, .1); }
body.sg-play .zkj-panel th, body.sg-play .zkj-modal__box th { color: var(--t-mute); font-weight: 600; }
body.sg-play .zkj-panel tfoot td { color: #fff; border-top-color: var(--t-line-hi); }
body.sg-play .zkj-modal__box tr.win td { color: #fff; background: rgba(34, 211, 238, .12); }
body.sg-play .zkj-panel tr.now td { color: #bdf3ff; }
body.sg-play .zkj-vipbox label { color: var(--t-cyan); }
body.sg-play .zkj-vipbox input { background: rgba(255, 255, 255, .05); border: 1px solid var(--t-line); color: #fff; }
body.sg-play .zkj-vipbox input:focus { border-color: var(--t-cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .18); }
body.sg-play .zkj-vol input { accent-color: var(--t-cyan); }
/* the handbook */
body.sg-play .zkj-book__head { border-bottom-color: var(--t-line); }
body.sg-play .zkj-book h2, body.sg-play .zkj-book h3, body.sg-play .zkj-book h4 { color: #fff; font-family: Rajdhani, Inter, sans-serif; letter-spacing: .04em; }
body.sg-play .zkj-book a { color: var(--t-cyan); }
body.sg-play .zkj-book__nav { border-right-color: var(--t-line); background: rgba(5, 7, 18, .35); }
body.sg-play #zkj .zkj-book__nav button { background: transparent; border: 0; color: var(--t-ink-2); }
body.sg-play #zkj .zkj-book__nav button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
body.sg-play #zkj .zkj-book__nav button.is-cur { background: var(--t-sel); color: #fff; box-shadow: inset 3px 0 0 var(--t-cyan); }
body.sg-play .zkj-book__body { color: var(--t-ink-2); }
body.sg-play .zkj-book__body section { border-bottom-color: rgba(140, 170, 255, .12); }
body.sg-play .zkj-book__body b, body.sg-play .zkj-book__body strong { color: #fff; }
body.sg-play .zkj-book__head strong, body.sg-play .zkj-book__body h2 { font-family: Rajdhani, Inter, sans-serif; color: #fff; text-transform: uppercase; letter-spacing: .06em; }
body.sg-play .zkj-book__head small { color: var(--t-mute); opacity: 1; }
body.sg-play .zkj-book__no { background: var(--t-brand) !important; color: #fff !important; border: 0 !important; box-shadow: 0 0 10px rgba(34, 211, 238, .35); }
body.sg-play .zkj-book__body h3, body.sg-play .zkj-book__table caption, body.sg-play .zkj-book__ver { color: var(--t-cyan); }
body.sg-play .zkj-book__body b, body.sg-play .zkj-book__lead { color: #fff; }
body.sg-play .zkj-book__body a { color: var(--t-cyan); }
body.sg-play .zkj-book__steps li::marker { color: var(--t-cyan); }
body.sg-play .zkj-book__card { background: linear-gradient(135deg, rgba(34, 211, 238, .07), rgba(139, 92, 246, .1)); border-color: rgba(139, 92, 246, .38); }
body.sg-play .zkj-book__card--note { background: rgba(34, 211, 238, .06); border-color: rgba(34, 211, 238, .3); }
body.sg-play .zkj-book__cardhead, body.sg-play .zkj-book__gloss dt { color: #bdf3ff; }
body.sg-play .zkj-book__table th { color: var(--t-mute); border-bottom-color: var(--t-line); }
body.sg-play .zkj-book__table td, body.sg-play .zkj-book__changes li { border-bottom-color: rgba(140, 170, 255, .1); }
@media (max-width: 760px) { body.sg-play .zkj-book__nav { border-bottom-color: var(--t-line); } }
/* the VIP chip and the remaining gold edges in the room's bars */
body.sg-play .zkj-vip { background: rgba(10, 14, 34, .82); border-color: rgba(139, 92, 246, .5); color: #fff; }