/* The game's page (index.html): its welcome, the canvas and the footer. A file, not a <style>: the page's CSP
   is style-src 'self', no inline style (lot E10). */
/* The game's fonts, served with the page (CREDITS.md): a cell is the same in every browser. Souls Mono measures the grid and draws the art, Pixelify Sans the text. */
@font-face { font-family: "Souls Mono"; src: url(fonts/DejaVuSansMono.ttf) format("truetype"); }
@font-face { font-family: "Pixelify Sans"; src: url(fonts/PixelifySans.ttf) format("truetype"); font-weight: 400 700; }
/* The welcome screen's own colours (welcome.go): bone to read, ash beside it, the chosen row's
   gold on its bar of ember, the flame of its cursor. */
:root { --ink: #c7c7c7; --night: #000; --bone: #f0e6cc; --ash: #a8a49c; --dark: #8c8880;
        --gold: #ffd858; --ember: #3c1608; --ember-lit: #5a2410; --flame: #f47a1c; --brass: #d8a038; }
/* Pixelify Sans joins « fi » into a broken ligature (« fioles » read « Aoles », REFLEXION-HUD-v2 §2): the page's
   text never ligates. The canvas draws a glyph a cell (client.js glyph), where no two letters join. */
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--night); color: var(--ink); font-variant-ligatures: none; }
/* Louis 9/11: a quick double click or a phone's double tap neither selects the page's text nor zooms it
   (TestNoDblclickFull); the canvas has touch-action: none, the rest manipulation. The paste sink stays editable. */
body, canvas { user-select: none; -webkit-user-select: none; }
body { touch-action: manipulation; }
#paste { user-select: text; -webkit-user-select: text; }
::selection { background: var(--ember); color: var(--gold); }
canvas { position: absolute; left: 0; top: 0; display: block; image-rendering: pixelated; touch-action: none; } /* never smoothed, whatever the dpr; a finger drags the map M (lot D carte), it scrolls nothing */
/* ?canvas2 (client.js two): the slid world's canvas under #screen, cut to its box, gone with it. */
#world { position: absolute; left: 0; top: 0; overflow: hidden; }
#world:has(+ #screen[hidden]) { display: none; }
#msg { position: absolute; inset: 0; margin: 0; padding: 0 16px; display: flex; align-items: center;
       justify-content: center; text-align: center; font: 18px/1.6 "Pixelify Sans", "Souls Mono", monospace; }
/* The first screen: no game.wasm until Rejoindre (5 MB to fetch over a phone's link). */
#home { position: absolute; inset: 0; padding: 0 16px; display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 1.25rem; font: 18px/1.6 "Pixelify Sans", "Souls Mono", monospace; text-align: center; }
.logo { margin: 0; font: clamp(7px, 2.1vw, 16px)/1.2 "Souls Mono", monospace; }
/* the logo gold lit by the fire below, pale at its top, amber at its feet, its runs going out (welcome.go gilt, runs) */
.r0 { color: #fff4d0; } .r1 { color: #ffe48a; } .r2 { color: #ffcc4c; } .r3 { color: #f8a830; } .r4 { color: #f08426; } .r5 { color: #e86a1e; } .r6 { color: #ffd060; } .r7 { color: #b06a28; }
.line { margin: 0; color: var(--bone); }
#join { font: inherit; color: var(--gold); background: var(--ember); border: 0; padding: .5rem 1.5rem .5rem 1rem; cursor: pointer; }
#join::before { content: "> "; color: var(--flame); }
#join:hover { background: var(--ember-lit); }
#join:focus-visible { outline: 2px solid var(--flame); outline-offset: 3px; }
#join:disabled { cursor: progress; color: var(--ash); }
.note { margin: 0; color: var(--dark); font-size: 16px; }
/* the game coming (client.js loaded): the logo's blocks, the gold of its fire */
.bar { margin: 0; font: 16px/1 "Souls Mono", monospace; color: var(--flame); white-space: pre; }
[hidden] { display: none !important; }
/* The title painted (titre.js, lot L v78): the plate covers the window, pixels kept square; the logo and the
   button are drawn at its scale (--px, a pixel of the plate in the page). Until it is ready, and without it, the
   text title as before. */
#art { image-rendering: pixelated; }
.logo-art { display: none; width: calc(178 * var(--px, 2px)); height: auto; image-rendering: pixelated; }
body.art .logo-art { display: block; }
body.art .logo { display: none; }
body.art .line { text-shadow: 0 2px 0 #050302, 0 0 8px #050302; }
body.art #join { width: calc(72 * var(--px, 2px)); height: calc(20 * var(--px, 2px)); padding: 0; color: var(--gold);
  font-size: calc(7 * var(--px, 2px)); text-shadow: 0 var(--px, 2px) 0 #050302;
  background: url(titre/bouton.png) center / 100% 100% no-repeat; image-rendering: pixelated; }
body.art #join::before { content: none; }
body.art #join:hover, body.art #join:focus-visible { background-image: url(titre/bouton-survol.png); color: #fff4d0; }
body.art .bar, body.art .note:not(:empty) { background: rgba(5, 3, 2, .82); padding: 6px 12px; box-shadow: 0 0 0 2px #2c2018; } /* read over the rift's fire */
.infos { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 24px; font-size: 15px; color: var(--ash); }
body.art .infos { text-shadow: 0 2px 0 #050302, 0 0 6px #050302; }
.infos p, .infos ul { margin: 0; padding: 0; }
#news { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; }
#news::before { content: "Nouveautés"; color: var(--flame); }
.infos a { color: var(--bone); text-underline-offset: .2em; }
.infos a:hover, .infos a:focus-visible { color: var(--gold); }
/* The legal pages, under the loading and error messages; the game, once drawn, has the whole window. */
footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; display: flex; flex-wrap: wrap;
         justify-content: center; gap: 4px 20px; font: 14px/1.6 system-ui, sans-serif; }
footer a { color: #a8a49c; text-underline-offset: 0.2em; }
footer a:hover, footer a:focus-visible { color: #ffd858; }
#screen:not([hidden]) ~ footer { display: none; }
/* client.js sink: Safari pastes only into an editable element, which must be focusable (not display: none): off screen, unseen. */
#paste { position: fixed; left: -100px; top: 0; width: 1px; height: 1px; opacity: 0; resize: none; }
/* The sound's debug (client.js asDebug, N in the game): the bottom left corner, free of the HUD, over the world. */
#sondebug { position: absolute; left: 8px; bottom: 40px; margin: 0; padding: 6px 10px; max-width: calc(100% - 32px); overflow: hidden;
            background: color-mix(in srgb, var(--night) 78%, transparent); color: var(--bone); font: 14px/1.4 "Souls Mono", monospace; white-space: pre-wrap; pointer-events: none; }
/* The place being built (client.js asWait, lot OPTIM-C3): over the last frame, held still meanwhile, above the
   player at the centre; the night under it keeps the bone legible over a day's snow as over a night. */
#wait { position: absolute; left: 16px; right: 16px; top: 28%; width: fit-content; margin: 0 auto; padding: 8px 16px; background: color-mix(in srgb, var(--night) 82%, transparent); color: var(--bone);
        font: 18px/1.4 "Pixelify Sans", "Souls Mono", monospace; text-align: center; pointer-events: none; }
/* Lot I: the toolbar's drawings over the game's canvas (client.js paintPics), gone with it; the name of the one under the mouse over its case. */
#hd { pointer-events: none; }
#screen[hidden] + #hd { display: none; }
#tip { position: absolute; transform: translate(-50%, calc(-100% - 6px)); padding: 4px 10px; background: var(--ember); color: var(--bone);
       border: 1px solid var(--brass); font: 16px/1.3 "Pixelify Sans", "Souls Mono", monospace; white-space: nowrap; pointer-events: none; }