/* The 3D showcase page (/builds/<n>/vitrine): a full-window canvas and a few controls.
   Plain CSS rather than the site bundle: this page loads nothing of the website. */
@font-face { font-family: 'Cinzel'; font-weight: 400 900; font-display: swap;
    src: url('/besacraft_builds/static/src/fonts/cinzel-latin.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 100 700; font-display: swap;
    src: url('/besacraft_builds/static/src/fonts/ibm-plex-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 100 800; font-display: swap;
    src: url('/besacraft_builds/static/src/fonts/jetbrains-mono-latin.woff2') format('woff2'); }
:root { --c-encre: #F2E7CE; --c-gris: #A89A80; --c-laiton: #C9AE72; --c-filet: rgba(201, 174, 114, .28);
    --f-texte: 'IBM Plex Sans', sans-serif; --f-mono: 'JetBrains Mono', monospace; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: radial-gradient(ellipse 80% 75% at 50% 42%, #2E261E 0%, #1A1511 62%, #14110E 100%);
    color: var(--c-encre); font: 400 14px/1.5 var(--f-texte); overflow: hidden; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
canvas:active { cursor: grabbing; }
.ui { position: absolute; left: 14px; top: 12px; right: 14px; display: flex; flex-wrap: wrap; gap: 8px;
    align-items: center; pointer-events: none; }
.ui > * { pointer-events: auto; }
.cap { font: 500 11px/1.4 var(--f-mono); color: var(--c-gris); margin-right: auto; }
.cap b { color: var(--c-encre); font-weight: 500; }
.btn { font: 500 12px/1 var(--f-mono); color: var(--c-gris); background: rgba(20, 17, 14, .7);
    border: 1px solid var(--c-filet); border-radius: 4px; padding: 8px 10px; cursor: pointer; }
.btn:hover { color: var(--c-encre); border-color: var(--c-laiton); }
.btn:focus-visible { outline: 2px solid #36CFC0; outline-offset: 2px; }
.btn[aria-pressed="true"] { color: #1A140E; background: linear-gradient(180deg, #DCC48C, #C2A466 55%, #A88A50);
    border-color: #A88A50; }
.aide { position: absolute; right: 14px; bottom: 10px; font: 400 11px/1 var(--f-mono);
    color: rgba(168, 154, 128, .75); pointer-events: none; }
.charge { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font: 500 12px/1 var(--f-mono); color: var(--c-laiton); pointer-events: none; }
.charge[hidden], .err[hidden], [hidden] { display: none; }
body.seul .cap, body.seul .aide { display: none; }
body.seul .ui { justify-content: flex-end; }
.err { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
    padding: 24px; color: var(--c-gris); font: 400 13px/1.5 var(--f-mono); }