/* ============================================================
   Medieval Solutions Online — shared light "parchment table" theme
   Loaded by every online page after tokens.css (inherited from
   the retired Flask app and stays dark) and before the page's own stylesheet.

   1. The parchment palette, used directly by rules.css and
      example.css.
   2. Overrides of tokens.css's dark-theme variables, so style.css
      (index / host / play / tv) picks up the same palette without
      touching the shared tokens file.
   ============================================================ */

/* The type ranks: Mavsmooth only on cards (card names), Mavpixel for every
   other stylised, coloured line (headings, buttons, names, tabs), Pangolin for
   everything people read. Purple is only ever a highlight inside Pangolin. */
@font-face { font-family: 'mav'; src: url('../font/mavsmooth.otf') format('opentype'); font-display: swap; }
/* Mavpixel is built from design/fonts/mavpixel.txt (scripts/build_fonts.py, or the studio's Fonts view): its own
   digits, punctuation and accents for the Latin-script languages. Its file reserves room for capital
   accents and the cedilla (ascent 2503, descent 682 of 2048); the overrides keep the old line box so no
   heading or button grows taller, and the accents simply sit over the line above. */
@font-face { font-family: 'mavpixel'; src: url('../font/mavpixel.ttf') format('truetype'); font-display: swap;
             ascent-override: 100%; descent-override: 22.2%; line-gap-override: 0%; }
@font-face { font-family: 'Pangolin'; src: url('../font/pangolin.woff2') format('woff2'); font-display: swap; }

:root {
    /* ── 1. Parchment palette ── */
    --paper:     #f3efed;   /* page background */
    --parch:     #f6e3bd;   /* banners, panels */
    --parch-2:   #efd6a5;   /* panel hover */
    --parch-brd: #b8903a;   /* banner/panel border */
    --ink:       #1e0e06;   /* body text */
    --ink2:      #6b4a2a;   /* secondary text */
    --ink3:      #8a6850;   /* hints */
    --tan:       #d0a26f;   /* rules, dividers, progress */
    --tan-lt:    #ecc79c;
    --btn-tan:   #efbf88;   /* secondary button */
    --red:       #8b0000;   /* emphasis, primary button */
    --purple:    #51008b;   /* a highlight inside Pangolin text only */
    --glow:      rgba(236, 188, 52, .65);

    /* ── 2. tokens.css overrides (dark → parchment) ── */
    --bg:        var(--paper);
    --surf:      #fbf8f2;
    --surf2:     var(--parch);
    --surf3:     var(--parch-2);
    --dark-elem: var(--parch);
    --brd:       #dcc7a4;
    --brd2:      var(--parch-brd);
    --tx:        var(--ink);
    --tx2:       var(--ink2);
    --tx3:       var(--ink3);
    --ph:        #b5a08a;
    --muted:     #b5a08a;
    --gold:      #b07a10;   /* selection / highlight — darker so it reads on paper */
    --gold-gl:   var(--glow);
    --gold-fi:   rgba(176, 122, 16, .14);
    --gold-fi2:  rgba(176, 122, 16, .07);
    --ok:        #3c7a3c;
    --err:       var(--red);
    --font-ui:   'Pangolin', 'Trebuchet MS', system-ui, sans-serif;   /* letters Pangolin lacks (ă, Cyrillic) fall back to a plain sans, not a serif */
    --font-display: 'mav', monospace;      /* Mavsmooth: cards only */
    --font-pixel:   'mavpixel', 'Pangolin', 'Trebuchet MS', system-ui, sans-serif; /* Mavpixel: coloured display text; letters it lacks (ß, ă, Cyrillic) fall to Pangolin, not Courier */

    /* Cards are white, like the printed deck. */
    --card-bg:   #ffffff;
    --card-brd:  #b8903a;
    --card-tx:   #000000;

}

/* The hidden attribute always wins, whatever display a component sets. */
[hidden] { display: none !important; }

/* ── World transitions (see js/world.js) ──
   Rules ← Title → Example pan like a camera moving along the chamber;
   Host / Join / TV are "at the table": entering zooms in, leaving zooms out. */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .5s; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
.mute-btn { view-transition-name: mute-btn; }   /* stays put while the world moves */
/* Walking up to the table, the table itself comes with you: the title's
   chamber table glides into place on Host / Join (and back). */
::view-transition-group(council-table) { animation-duration: .6s; animation-timing-function: cubic-bezier(.45, 0, .2, 1); }

html[data-vt="pan-left"]::view-transition-old(root)   { animation: .5s cubic-bezier(.45, 0, .2, 1) both vt-out-right; }
html[data-vt="pan-left"]::view-transition-new(root)   { animation: .5s cubic-bezier(.45, 0, .2, 1) both vt-in-left; }
html[data-vt="pan-right"]::view-transition-old(root)  { animation: .5s cubic-bezier(.45, 0, .2, 1) both vt-out-left; }
html[data-vt="pan-right"]::view-transition-new(root)  { animation: .5s cubic-bezier(.45, 0, .2, 1) both vt-in-right; }
html[data-vt="to-table"]::view-transition-old(root)   { animation: .45s ease-in both vt-zoom-past; }
html[data-vt="to-table"]::view-transition-new(root)   { animation: .5s .1s cubic-bezier(.2, .8, .3, 1) both vt-arrive; }
html[data-vt="from-table"]::view-transition-old(root) { animation: .4s ease-in both vt-step-back; }
html[data-vt="from-table"]::view-transition-new(root) { animation: .5s .08s cubic-bezier(.2, .8, .3, 1) both vt-return; }

/* The pan dollies back a little as it travels, so the places read as rooms
   side by side rather than slides in a strip. */
@keyframes vt-out-right { 60% { filter: brightness(.94); } to { transform: translateX(100%) scale(.86); filter: brightness(.9); } }
@keyframes vt-in-left   { from { transform: translateX(-100%) scale(.86); filter: brightness(.9); } 40% { filter: brightness(.94); } }
@keyframes vt-out-left  { 60% { filter: brightness(.94); } to { transform: translateX(-100%) scale(.86); filter: brightness(.9); } }
@keyframes vt-in-right  { from { transform: translateX(100%) scale(.86); filter: brightness(.9); } 40% { filter: brightness(.94); } }
/* The hall sits below the chamber: going there tilts the camera down, coming back tilts it up. */
html[data-vt="descend"]::view-transition-old(root) { animation: .5s cubic-bezier(.45, 0, .2, 1) both vt-out-up; }
html[data-vt="descend"]::view-transition-new(root) { animation: .5s cubic-bezier(.45, 0, .2, 1) both vt-in-below; }
html[data-vt="ascend"]::view-transition-old(root)  { animation: .5s cubic-bezier(.45, 0, .2, 1) both vt-out-down; }
html[data-vt="ascend"]::view-transition-new(root)  { animation: .5s cubic-bezier(.45, 0, .2, 1) both vt-in-above; }
@keyframes vt-out-up    { to { transform: translateY(-100%) scale(.9); filter: brightness(.9); } }
@keyframes vt-in-below  { from { transform: translateY(100%) scale(.9); filter: brightness(.9); } }
@keyframes vt-out-down  { to { transform: translateY(100%) scale(.9); filter: brightness(.9); } }
@keyframes vt-in-above  { from { transform: translateY(-100%) scale(.9); filter: brightness(.9); } }
@keyframes vt-zoom-past { to { transform: scale(1.6); opacity: 0; filter: blur(4px); } }
@keyframes vt-arrive    { from { transform: scale(.82); opacity: 0; } }
@keyframes vt-step-back { to { transform: scale(.82); opacity: 0; } }
@keyframes vt-return    { from { transform: scale(1.4); opacity: 0; filter: blur(4px); } }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Shared buttons: red primary, tan secondary, both with a black outline —
   the look the example's interlude and end links set. */
.ms-btn, .ms-btn-2 {
    display: inline-block; padding: 10px 20px;
    border: 2px solid #000; border-radius: 12px;
    font-family: var(--font-pixel); font-size: 1.05rem; text-decoration: none; cursor: pointer;
}
.ms-btn { background: var(--red); color: #fff; }
.ms-btn-2 { background: var(--btn-tan); color: #412d0a; font-family: 'Pangolin', cursive; }

/* Mute toggle injected by polish.js on every page that loads it. */
.mute-btn {
    position: fixed; bottom: 14px; right: 14px; width: 40px; height: 40px;
    border-radius: 50%; font-size: 16px; padding: 0; margin: 0; z-index: 999;
    background: #fff; border: 2px solid var(--tan); color: var(--ink); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.mute-btn img { width: 24px; height: 24px; image-rendering: pixelated; }
.mute-btn.muted img { opacity: .35; }
.mute-btn.muted::after {
    content: ''; position: absolute; width: 26px; height: 3px; background: var(--red);
    transform: rotate(-45deg); border-radius: 2px;
}

/* The Troubler badge (Everlasting Thunder sprite) — replaces the 🚨 emoji. */
.troubler-icon { width: 1.1em; height: 1.1em; image-rendering: pixelated; vertical-align: -0.15em; }

/* The site-language switch (js/i18n.js): the current language's flag, the others (flag and
   name) rolled up under it. Place with <div data-lang-switch></div>; .lang-corner pins it top right. */
.lang-switch { position: relative; display: inline-block; z-index: 30; font-family: var(--font-pixel); }
.lang-corner { position: absolute; top: 12px; right: 12px; }
.lang-switch .ls-cur {
    display: grid; place-items: center; width: 42px; height: 32px; padding: 0; border-radius: 16px; cursor: pointer;
    background: #fff; border: 2px solid var(--tan);
}
.lang-switch .ls-cur:hover, .lang-switch .ls-cur:focus-visible { border-color: var(--gold); }
.lang-switch .ls-list {
    position: absolute; right: 0; top: calc(100% + 6px); margin: 0; padding: 4px; list-style: none; min-width: 120px;
    background: #fff; border: 2px solid var(--tan); border-radius: 10px; box-shadow: 0 6px 18px rgba(30,14,6,.18);
}
.lang-switch .ls-list button {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px;
    background: none; color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer;
}
.lang-switch .ls-flag { width: 24px; height: 18px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(30,14,6,.15); flex: none; }
.lang-switch .ls-list button:hover, .lang-switch .ls-list button[aria-selected="true"] { background: var(--gold-fi); }