/* THE LOOK (Chris 10/1, after two rounds of mocks): the room is a choice, the meanings are not.
- Four rooms (themes): Charcoal (the default), Midnight Ink, Club Green and Claret. A room sets only the ground,
the panels, the ink, the chrome (frames and buttons, once all brass) and the board's squares.
- Two sets of meaning colors: Vivid (the default) and Subtle (the colors the game had before). They set Gold
and Points, Sharp, Chain, the seven Schools and the Brilliancy, and no room ever changes them.
- The type: Young Serif for display and numbers, Alegreya for reading, Alegreya SC for labels (ui/fonts.css).
The choice is kept in localStorage and set on before the page draws (ui/theme.js). This sheet loads
last, so html.th-… outranks the :root tokens in play.css. */
html:root{--serif:'Young Serif',Georgia,serif; --body:'Alegreya',Georgia,serif; --sc:'Alegreya SC','Alegreya',Georgia,serif;
font-synthesis-weight:none} /* Young Serif has one weight; a 700 asks for it as drawn, never a smeared fake bold */
body{font-family:var(--body)}
/* italic text that named the display face: Young Serif has no italic, so these read in Alegreya */
.stepper .sl i,.gfind,.rpanel .ph i,.lh i,.front.title .cont .mi i,.tab .s,#tutTip,#crossTip,body.desk .room.study .proceed i,
.front .sub,.front.title .tag{font-family:var(--body)}
html.th-charcoal,html:not([class*="th-"]){--night:#0f1012;--wood:#151618;--panel-lo:#18191c;--panel:#1e2023;--panel-hi:#282b2f;--rule:#363a3f;--ivory:#ecebe6;--dim:#a4a7ab;--faint:#6e7277;
--brass:#cfcbc2;--brass-hi:#f2efe8;--brass-lo:#5c6067;--sqL:#e2ded3;--sqD:#6f747c;
--night-rgb:15 16 18;--panel-rgb:30 32 35;--panel-lo-rgb:24 25 28;--brass-rgb:207 203 194;--brass-hi-rgb:242 239 232;--brass-lo-rgb:92 96 103;
--wp:url("data:image/svg+xml;utf8,")}
html.th-midnight{--night:#0a0f19;--wood:#0f1522;--panel-lo:#131a2a;--panel:#182033;--panel-hi:#212b42;--rule:#2e3956;--ivory:#e9e2cf;--dim:#a1abbf;--faint:#6b7692;
--brass:#d4ccb9;--brass-hi:#f1ebdb;--brass-lo:#4f5a75;--sqL:#ddd6c4;--sqD:#5d6b86;
--night-rgb:10 15 25;--panel-rgb:24 32 51;--panel-lo-rgb:19 26 42;--brass-rgb:212 204 185;--brass-hi-rgb:241 235 219;--brass-lo-rgb:79 90 117;
--wp:url("data:image/svg+xml;utf8,")}
html.th-baize{--night:#0b1a13;--wood:#10231a;--panel-lo:#132a1f;--panel:#183326;--panel-hi:#21402f;--rule:#2f4c3c;--ivory:#ece4d0;--dim:#aabca7;--faint:#6f8a74;
--brass:#e0d5b8;--brass-hi:#f5eedb;--brass-lo:#4f6b58;--sqL:#e6dcc2;--sqD:#5f7d5c;
--night-rgb:11 26 19;--panel-rgb:24 51 38;--panel-lo-rgb:19 42 31;--brass-rgb:224 213 184;--brass-hi-rgb:245 238 219;--brass-lo-rgb:79 107 88;
--wp:url("data:image/svg+xml;utf8,")}
html.th-claret{--night:#13080c;--wood:#1b0d13;--panel-lo:#22111a;--panel:#2a1520;--panel-hi:#371c2a;--rule:#4b2635;--ivory:#f1e3d8;--dim:#c49ea7;--faint:#8a6670;
--brass:#e6d3c4;--brass-hi:#f8ecdf;--brass-lo:#6e3f4d;--sqL:#ecdcc8;--sqD:#8c4f5e;
--night-rgb:19 8 12;--panel-rgb:42 21 32;--panel-lo-rgb:34 17 26;--brass-rgb:230 211 196;--brass-hi-rgb:248 236 223;--brass-lo-rgb:110 63 77;
--wp:url("data:image/svg+xml;utf8,")}
/* ===== the meaning colors: the same in every room ===== */
/* Vivid (the default): every School its own hue, apart from Points, Sharp, Chain and the Brilliancy's teal */
html:not(.mc-subtle){--gold:#f2bd45;--gold-hi:#ffd36e;--gold-lo:#8a6414;--gold-rgb:242 189 69;--gold-hi-rgb:255 211 110;--gold-lo-rgb:138 100 20;
--pts:#f2bd45;--sharp:#ff6a3d;--chain:#4fd27a;--bonus:#35c2c8;
--sch-rom:#ec4d63;--sch-cla:#4f8ff2;--sch-pos:#a6c93a;--sch-hyp:#9d7ff2;--sch-cof:#c98b55;--sch-dis:#8fb0cc;--sch-prb:#ea66c4}
/* Subtle: the colors the game had, with Coffeehouse and Positional nudged a little off Points and the Chain
(they had been exactly the same colors) */
html.mc-subtle{--gold:#c9a24a;--gold-hi:#e6bd5c;--gold-lo:#7a5b1e;--gold-rgb:201 162 74;--gold-hi-rgb:230 189 92;--gold-lo-rgb:122 91 30;
--pts:#c9a24a;--sharp:#c8643a;--chain:#6f9f7a;--bonus:#5f9ea3;
--sch-rom:#b8664e;--sch-cla:#6f8fb8;--sch-pos:#8fa062;--sch-hyp:#8a7ab0;--sch-cof:#b98757;--sch-dis:#7a8aa6;--sch-prb:#b86f9a}
/* the plaques take their color from the meaning tokens, so they follow the set */
.plq.shp{background:linear-gradient(180deg,color-mix(in srgb,var(--sharp) 78%,#fff),var(--sharp));border-color:color-mix(in srgb,var(--sharp) 55%,#000)}
.plq.chn{background:linear-gradient(180deg,color-mix(in srgb,var(--chain) 78%,#fff),var(--chain));border-color:color-mix(in srgb,var(--chain) 55%,#000)}
/* THE FOURTH TILE (Chris 10/5: it "needs to have a different background color than the Score"): the multiplier of the
whole move has a color of its own, --bonus, a teal, as Points, Sharp and the Chain have theirs. The tile is made
like the other three. When the factor lowers the score ("Reduced") or forfeits it ("Forfeit") the tile is the same
teal, darkened, so it is never mistaken for the cream Score plate. */
.plq.xtr{background:linear-gradient(180deg,color-mix(in srgb,var(--bonus) 78%,#fff),var(--bonus));border:1px solid color-mix(in srgb,var(--bonus) 55%,#000)}
.plq.xtr.low{background:linear-gradient(180deg,color-mix(in srgb,var(--bonus) 72%,#000),color-mix(in srgb,var(--bonus) 56%,#000));border-color:color-mix(in srgb,var(--bonus) 35%,#000)}
.plq.xtr.low .num{color:var(--ivory)} .plq.xtr.low .lbl{color:color-mix(in srgb,var(--ivory) 82%,transparent)}
/* the words that rise when a move scores take the color of what they pay (Chris 10/1); a multiplier of the whole
move takes the fourth tile's color (Chris 10/5), on the band and in the opened row of the score sheet */
.rw .wp{color:var(--pts)} .rw .ws{color:var(--sharp)} .rw .wc{color:var(--chain)} .rw .wx{color:var(--bonus)}
.mv .deq b.wx{color:var(--bonus)}
/* a Tutor's chip under its seat: dark, so its gold, vermilion and green amounts read (it was brass with dark ink) */
.chip{background:var(--panel-hi);color:var(--ivory);border-color:var(--brass-lo)}
/* AN IMMORTAL TUTOR (Chris 10/8: "something visually on it should appear... shimmer or something"; of five mock-ups,
"let's go with E, gold leaf, sheen and plate together. Why not? It's a special thing... I would keep the border").
The card's paper is gold leaf, a sheen crosses it every few seconds, and an engraved plate at its foot says the
word. The border keeps the Tutor's rarity color. With Animations off the sheen is not drawn. */
#seats .seat.imm{background:linear-gradient(135deg,#f6dc8c 0%,#e3b94e 36%,#fff2c0 50%,#d7a83a 66%,#f1d583 100%);box-shadow:0 0 0 1.5px #f1cf6b,0 0 12px rgba(240,200,90,.6)}
#seats .seat.imm.fire{box-shadow:0 0 0 2px var(--brass-hi),0 0 14px rgba(240,200,90,.7),0 10px 18px rgba(0,0,0,.55)}
#seats .seat.imm::before{content:'Immortal';position:absolute;left:0;right:0;bottom:0;height:15px;line-height:15px;text-align:center;font-family:var(--sc);font-weight:700;font-size:9.5px;letter-spacing:.09em;color:#3a280c;background:linear-gradient(180deg,#f7e09a,#d9ab3f);border-top:1.5px solid #3a280c;z-index:4}
#seats .seat.imm .em{bottom:14px}
#seats .seat.imm::after{content:'';position:absolute;top:-20%;bottom:-20%;left:-60%;right:-60%;background:linear-gradient(112deg,transparent 43%,rgba(255,255,255,.7) 50%,transparent 57%);transform:translateX(-75%);pointer-events:none;z-index:3;animation:immSheen 6s ease-in-out infinite}
@keyframes immSheen{0%,72%{transform:translateX(-75%)}100%{transform:translateX(75%)}}
body.noanim #seats .seat.imm::after{animation:none;display:none}
body.desk #seats.seven .seat.imm::before{height:13px;line-height:13px;font-size:8.2px} body.desk #seats.seven .seat.imm .em{bottom:12px}
body.port #seats .seat.imm::before{height:10px;line-height:10px;font-size:6px;letter-spacing:.04em;border-top-width:1px} body.port #seats .seat.imm .em{bottom:9px}
body.port #seats.seven .seat.imm::before{height:9px;line-height:9px;font-size:5.2px;letter-spacing:.02em} body.port #seats.seven .seat.imm .em{bottom:8px}