/* Night for every page (Night.cs), turned by the root's "night" (js/night.js). The game's own
   night: the painted grounds under a lapis veil drawn in code, the papers lapis with cream words
   and the same matte ochre edge, the ivory enamel turned to lapis and the navy up to cobalt (the
   turned pictures come in as --plain, --main and the rest), and what is painted bright a little
   lower. Words on the lapis paper are the paper's ink (cream), never navy: navy is a fill, cobalt
   at night. A painted cream plate keeps its cream and its day's ink. The door, play online and the
   table keep their own night rules; this is every other page. */

html.night {
    --night-veil: rgba(5, 9, 23, 0.62);
    --night-paper: #18213f;
    --night-edge: #9a7f4c;
    --night-card: #212c50;
    --night-tab: #2a3762;
    --night-ink: #f0e5c9;
    --night-soft: #c2b28f;
    --night-cream: #eee2c3;
    --night-cobalt: #9fb5ec;
    --night-fill: #34509c;
    --night-crimson: #e46a5e;
    --night-red: #ff9a8a;
    --night-line: rgba(238, 226, 195, 0.28);
    --night-painted: brightness(0.84);
    color-scheme: dark;
}

/* ---- the papers and inks, on every page's own root ---- */

html.night .mypage,
html.night .bazaar,
html.night .ladder,
html.night .cuphall,
html.night .pairs,
html.night .patoq {
    --paper: var(--night-paper);
    --edge: var(--night-edge);
    --card-paper: var(--night-card);
    --tab-paper: var(--night-tab);
    --title-paper: var(--night-tab);
    --paper-ink: var(--night-cream);
    --ink: var(--night-ink);
    --ink-soft: var(--night-soft);
    --soft: var(--night-soft);
    --cobalt: var(--night-cobalt);
    --navy: var(--night-fill);
    --crimson: var(--night-crimson);
    --red: var(--night-red);
    --red-ink: var(--night-red);
    --warning: #f0a070;
    --won: #7fcfa8;
    color: var(--ink);
}

/* ---- the painted grounds under the veil ---- */

html.night .mypage { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/me/ground.jpg") center / cover; }
html.night .mypage.sashpage { background-image: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/me/badges.jpg"); }
html.night .mypage .backs-page,
html.night .mypage .tables-page { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/me/ground.jpg") center / cover; }
html.night .mypage .cards-page { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/grounds/cards.jpg") center / cover; }
html.night .bazaar { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/bazaar/ground.jpg") center / cover; }
html.night .ladder { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/ladder/ground.jpg") center / cover; }
html.night .cuphall { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/cups/ground.jpg") center / cover; }
html.night .pairs { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/grounds/pairs.jpg") center / cover; }
html.night .patoq { background: linear-gradient(var(--night-veil), var(--night-veil)), url("../art/patoq/ground.jpg") center / cover; }

/* ---- my page ---- */

/* The settings' side tabs: a lapis a little lighter than the card, not grey. */
html.night .mypage .section {
    background: var(--night-tab) !important;
    border-color: var(--night-line) !important;
    color: var(--night-soft) !important;
}
html.night .mypage .section:not(:disabled):hover { background: #34427a !important; }
html.night .mypage .section.chosen { border-color: rgba(238, 226, 195, 0.45) !important; color: var(--night-cream) !important; }
html.night .mypage .section.chosen::before { background: var(--night-cream); }
html.night .mypage .rows-card { border-color: rgba(238, 226, 195, 0.45); }

/* A table's own ground on my tables page: the same veil as any table's. */
html.night .mypage .tb-ground::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(5, 9, 23, 0.7);
    pointer-events: none;
}
html.night .mypage .bk-wall { filter: var(--night-painted); }

/* ---- the bazaar ---- */

html.night .bazaar .panel { background-color: var(--night-paper); border-color: var(--night-edge); }
html.night .bazaar .tab { background: var(--night-tab); border-color: rgba(238, 226, 195, 0.5); }
html.night .bazaar .card { background: var(--night-card); border-color: var(--night-line); }
html.night .bazaar .panel h2 i,
html.night .bazaar .panel h2 i::after { background: #c9a24a; }
html.night .bazaar .rarity.epic { color: #c89ad6; }
html.night .bazaar .rarity.legendary { color: #e0b45a; }
html.night .bazaar .pill.plain { color: var(--night-cream); }
html.night .bazaar .tab.chosen span { color: var(--night-cream); }
html.night .bazaar .back-pill,
html.night .bazaar .purse { color: var(--night-cream); }

/* ---- the leaderboard ---- */

html.night .ladder .back { color: var(--night-cream); }
html.night .ladder .back .arrow { fill: var(--night-cream); stroke: var(--night-cream); }
html.night .ladder .panel { background-color: var(--night-paper); border-color: var(--night-edge); }
html.night .ladder .plate { background: var(--night-card); border-color: var(--night-line); }
html.night .ladder .plate.lit { border-color: var(--night-cream); }
html.night .ladder .tab .face { background: var(--night-tab); border-color: rgba(238, 226, 195, 0.5); }
html.night .ladder .tab.on .face { border-color: var(--night-cream); }
html.night .ladder .tab .name { color: var(--night-ink); }
html.night .ladder .tab .name.bold { color: var(--night-cobalt); }
html.night .ladder .how,
html.night .ladder .quiet,
html.night .ladder .gift,
html.night .ladder .avatar.empty { color: var(--night-soft); }
html.night .ladder .chips .all,
html.night .ladder .pill { color: var(--night-cream); }
html.night .ladder .mine .bar { background: rgba(238, 226, 195, 0.14); }
html.night .ladder .lines .track { stroke: rgba(238, 226, 195, 0.2); }
html.night .ladder .road .band { background: rgba(33, 44, 80, 0.55); border-color: var(--night-line); }
html.night .ladder .road .band.reached { background: rgba(42, 55, 98, 0.9); border-color: rgba(238, 226, 195, 0.4); }
html.night .ladder .gift .tick { stroke: var(--night-ink); }
html.night .ladder .take b { color: var(--night-ink); }
html.night .ladder .medal .shade { background: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.45) 68%, rgba(0, 0, 0, 0.18) 84%, rgba(0, 0, 0, 0) 100%); }
html.night .ladder .news { background: rgba(24, 33, 63, 0.95); border-color: var(--night-edge); color: var(--night-cobalt); }
html.night .ladder .news.bad { color: var(--night-red); }
html.night .ladder .list { scrollbar-color: var(--night-edge) transparent; }

/* ---- the tournaments ---- */

html.night .cuphall .back,
html.night .cuphall .purse { color: var(--night-cream); }
html.night .cuphall .back .arrow { fill: var(--night-cream); stroke: var(--night-cream); }
html.night .cuphall .panel { background-color: var(--night-paper); border-color: var(--night-edge); }
html.night .cuphall .plate { background: var(--night-card); border-color: var(--night-edge); }
html.night .cuphall .gold-line { color: var(--night-ink); }
html.night .cuphall .press.plain { color: var(--night-cream); }
html.night .cuphall .stripe.odd { background: rgba(159, 181, 236, 0.07); }
html.night .cuphall .stripe.mine { background: rgba(159, 181, 236, 0.2); }

/* ---- pairs ---- */

html.night .pairs .lacquer,
html.night .pairs .foot { background-color: var(--night-paper); border-color: var(--night-edge); }

/* ---- the circle, its friends and its talk (PatoqView.cs): laid as the leaderboard is ---- */

html.night .patoq .back,
html.night .patoq .kit,
html.night .patoq .pill { color: var(--night-cream); }
html.night .patoq .kit.main,
html.night .patoq .pill.on { color: #f6ecd4; }
html.night .patoq .kit.danger { color: var(--night-red); }
html.night .patoq .back .arrow { fill: var(--night-cream); stroke: var(--night-cream); }
html.night .patoq .field { color: var(--night-ink); }
html.night .patoq .field::placeholder { color: rgba(194, 178, 143, 0.75); }
html.night .patoq .panel { background-color: var(--night-paper); border-color: var(--night-edge); }
html.night .patoq .plate { background: var(--night-card); border-color: var(--night-line); }
html.night .patoq .plate.lit { border-color: var(--night-cream); }
html.night .patoq button.tablet:not(:disabled):hover .plate { background: var(--night-tab); }
html.night .patoq .medal .shade { background: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.45) 68%, rgba(0, 0, 0, 0.18) 84%, rgba(0, 0, 0, 0) 100%); }
html.night .patoq .tab .face { background: var(--night-tab); border-color: rgba(238, 226, 195, 0.5); }
html.night .patoq .tab.on .face { border-color: var(--night-cream); }
html.night .patoq .tab .name,
html.night .patoq .line .name,
html.night .patoq .setting .ink { color: var(--night-ink); }
html.night .patoq .tab .name.bold,
html.night .patoq .heading,
html.night .patoq .line .name.mine,
html.night .patoq .setting .code,
html.night .patoq .chatline .named,
html.night .patoq .chat .bar .named,
html.night .patoq .chat .who { color: var(--night-cobalt); }
html.night .patoq .plaque-words,
html.night .patoq .quiet,
html.night .patoq .soft,
html.night .patoq .line .where,
html.night .patoq .line .label,
html.night .patoq .chatline .last,
html.night .patoq .chat .when,
html.night .patoq .chat .note,
html.night .patoq .chat .bubble.down { color: var(--night-soft); }
html.night .patoq .rule { background: rgba(201, 162, 74, 0.4); }
html.night .patoq .news { background: rgba(24, 33, 63, 0.95); border-color: var(--night-edge); color: var(--night-cobalt); }
html.night .patoq .news.bad,
html.night .patoq .chat .foot.trouble { color: var(--night-red); }
html.night .patoq .outline { border-color: var(--night-line); }
html.night .patoq .chatline { background: var(--night-card); border-color: var(--night-line); }
html.night .patoq .chatline.lit { border-color: var(--night-cream); }
html.night .patoq .chatline:hover { background: var(--night-tab); }
html.night .patoq .chat .bubble { background: var(--night-card); border-color: var(--night-line); color: var(--night-ink); }
html.night .patoq .chat .mine .bubble { background: var(--night-fill); border-color: var(--night-fill); color: #f7ecd2; }
html.night .tongues button { background: rgba(33, 44, 80, 0.9); color: var(--night-cream); }
html.night .tongues button.chosen { background: var(--night-fill); color: #f6ecd4; }
html.night .tongues select.chooser { background-color: rgba(33, 44, 80, 0.92); color: var(--night-cream); }

/* ---- the door's house and card pages (the door's own night turns the rest of it) ---- */

html.night :is(.menu, .kings-house, .table) .card-page .panel,
html.night :is(.menu, .kings-house) .house .panel {
    background: var(--night-paper);
    border-color: var(--night-edge);
    color: var(--night-ink);
    --tile-ink: var(--night-ink);
    --tile-soft: var(--night-soft);
    --tile-cobalt: var(--night-cobalt);
    --paper-ink: var(--night-cream);
    --ink: var(--night-ink);
    --ink-soft: var(--night-soft);
    --cobalt: var(--night-cobalt);
}
html.night :is(.menu, .kings-house, .table) .card-page .side,
html.night :is(.menu, .kings-house) .house .side { color: var(--night-soft); }

/* ---- the king's decrees: the paper lapis, each decree a lighter card, the painted scroll as it is ---- */

html.night .menu .letter-card { background-color: var(--night-paper); border-color: var(--night-edge); color: var(--night-ink); }
html.night .menu .letter-card .banner h2 { color: #1f3f8f; }
html.night .menu .letter-card h3,
html.night .menu .letter-card .coins b { color: var(--night-cobalt); }
html.night .menu .letter-card .decree { background: var(--night-card); border-color: rgba(226, 182, 74, 0.6); }
html.night .menu .letter-card .motif { background: var(--night-tab); }
html.night .menu .letter-card .bar { background: rgba(238, 226, 195, 0.14); }
html.night .menu .letter-card .waiting,
html.night .menu .letter-card .decree.paid .sentence,
html.night .menu .letter-card .count,
html.night .menu .letter-card .paid,
html.night .menu .letter-card .foot { color: var(--night-soft); }
html.night .menu .letter-card .foot.trouble { color: var(--night-red); }
html.night .menu .letter-card .swap { background: var(--night-fill); }

/* ---- the school: the table's veil over its floor; Fereydun's words on the lapis paper; the
   kings' painted name plates keep their cream and their day's ink ---- */

html.night .school .veil { background: rgba(5, 9, 23, 0.7); }
html.night .school,
html.night .school-round,
html.night .first-ask {
    --plaque: var(--night-paper);
    --red: var(--night-red);
    --ink: var(--night-ink);
    --ink-soft: var(--night-soft);
    --cobalt: var(--night-cobalt);
    --paper-ink: var(--night-cream);
}
html.night .school .bubble,
html.night .school-round .bubble { border-color: var(--night-fill); }
html.night .school .king .plaque span { color: #16234f; }
html.night .school-round .school-kit:not(.main),
html.night .first-ask .school-kit:not(.main) { color: var(--night-cream); }

/* The kit's painted cream panel (the school's banners and word cards, the first question, the
   sign-in) is the lapis paper at night: the same ochre edge, drawn in code. */
html.night .school .banner,
html.night .school .words-card,
html.night .first-ask .ask,
html.night .door .panel {
    border-image: none;
    background: var(--night-paper);
    border: max(2px, calc(0.45 * var(--h, 1vh))) solid var(--night-edge);
    border-radius: calc(1.6 * var(--h, 1vh));
}
html.night .school .ring,
html.night .school .king .plaque img { filter: var(--night-painted); }

/* ---- the sign-in: the panel lapis (above), the field turned (--field), cream words ---- */

html.night .door .panel { color: var(--night-ink); }
html.night .door .panel :is(h2, h2 *) { color: var(--night-cream); }
html.night .door .panel :is(p, small, label) { color: var(--night-soft); }
html.night .door .panel button.plain { color: var(--night-cream); }
html.night .door .panel .trouble { color: var(--night-red); }
html.night .door input,
html.night .door.coded input { color: var(--night-ink); }
html.night .door input::placeholder { color: var(--night-soft); }