/* The Dragon's Leyr: an 80x25 DOS text screen in the 16-color VGA palette.
 *
 * The font is a 9x16 bitmap: at font-size 16px a cell is exactly 9x16 px, so 80 columns are
 * 45em wide. Desktop uses scales that land on whole device pixels to keep the font crisp: 16px
 * and 32px everywhere, and 24px (3 device pixels per font pixel) on 2x Retina windows between a
 * small laptop and a big monitor, e.g. a 16" MacBook Pro, where 32px is too big. Narrower than
 * 720px the screen scales to the viewport width instead of reflowing.
 */
@font-face {
    font-family: "IBM VGA";
    src: url("/assets/fonts/Web437_IBM_VGA_9x16.woff") format("woff");
    font-display: block;
}

:root {
    --cell: 16px;
    color-scheme: dark;
}
@media (min-width: 1460px) and (min-height: 860px) { :root { --cell: 32px; } }
@media (min-width: 1100px) and (min-height: 650px)
    and ((min-resolution: 2dppx) or (-webkit-min-device-pixel-ratio: 2)) { :root { --cell: 24px; } }
@media (min-width: 1900px) and (min-height: 1150px)
    and ((min-resolution: 2dppx) or (-webkit-min-device-pixel-ratio: 2)) { :root { --cell: 32px; } }
@media (max-width: 739px) { :root { --cell: calc(100vw / 45); } }

html, body { margin: 0; background: #000; }
body.leyr {
    color: #aaa;
    font: var(--cell)/1 "IBM VGA", monospace;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
main { padding: 1em 0; }
section { margin: 0 auto 1em; width: 45em; }

/* Block art is an SVG over the text grid (see tools/ansi/canvas.py svg_art). */
.term { position: relative; }
.art { position: absolute; top: 0; left: 0; width: 45em; pointer-events: none; }
.p0 { fill: #000; }  .p1 { fill: #00a; }  .p2 { fill: #0a0; }  .p3 { fill: #0aa; }
.p4 { fill: #a00; }  .p5 { fill: #a0a; }  .p6 { fill: #a50; }  .p7 { fill: #aaa; }
.p8 { fill: #555; }  .p9 { fill: #55f; }  .p10 { fill: #5f5; } .p11 { fill: #5ff; }
.p12 { fill: #f55; } .p13 { fill: #f5f; } .p14 { fill: #ff5; } .p15 { fill: #fff; }

.screen {
    margin: 0;
    font: inherit;
    line-height: 1;
    white-space: pre;
    font-kerning: none;
    font-variant-ligatures: none;
}

/* DOS palette: f = foreground, b = background */
.f0 { color: #000; }  .f1 { color: #00a; }  .f2 { color: #0a0; }  .f3 { color: #0aa; }
.f4 { color: #a00; }  .f5 { color: #a0a; }  .f6 { color: #a50; }  .f7 { color: #aaa; }
.f8 { color: #555; }  .f9 { color: #55f; }  .f10 { color: #5f5; } .f11 { color: #5ff; }
.f12 { color: #f55; } .f13 { color: #f5f; } .f14 { color: #ff5; } .f15 { color: #fff; }
.b1 { background: #00a; } .b2 { background: #0a0; } .b3 { background: #0aa; }
.b4 { background: #a00; } .b5 { background: #a0a; } .b6 { background: #a50; } .b7 { background: #aaa; }
.b8 { background: #555; } .b9 { background: #55f; } .b10 { background: #5f5; } .b11 { background: #5ff; }
.b12 { background: #f55; } .b13 { background: #f5f; } .b14 { background: #ff5; } .b15 { background: #fff; }

/* Links: a lightbar, like a door game's selected option */
.screen a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.screen a:hover, .screen a:focus-visible { background: #00a; outline: none; }
.screen a:hover span, .screen a:focus-visible span { background: transparent; }

.ticker { text-shadow: 0 0 0.25em #5f5; }
.cursor { animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
.cmd {
    width: 0.5625em; height: 1em; padding: 0; margin: 0; border: 0;
    font: inherit; line-height: 1; vertical-align: top;
    color: #fff; background: transparent; caret-color: #fff; outline: none;
}
.cmd::placeholder { color: #fff; opacity: 1; }

footer {
    width: 45em; margin: 0 auto; padding-bottom: 1em;
    color: #555;
}
footer .footer { padding-left: 0.5625em; }

.sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Script-driven views (leyr.js). Without JavaScript everything is visible and stacked. */
[hidden] { display: none !important; }
.modem {
    position: fixed; inset: 0; z-index: 2; background: #000;
    padding: 1em max(0px, calc((100vw - 45em) / 2));
    white-space: pre; color: #aaa; cursor: default;
}
.modem .skip { color: #555; }

/* Photo lightbox (leyr.js): the picture on black, its file line under it */
.lightbox {
    position: fixed; inset: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em;
    background: #000; cursor: zoom-out; outline: none;
}
.lightbox img {
    max-width: 94vw; max-height: calc(100vh - 5em);
    border: 2px solid #00a; background: #000;
}
/* Pixel-art GIFs are small; show them as tall as the window, every pixel a crisp square. */
.lightbox img[src$=".gif"] {
    image-rendering: pixelated; height: calc(100vh - 5em); width: auto; object-fit: contain;
}
.lightbox-caption { color: #aaa; font-size: 16px; line-height: 1.25; text-align: center; padding: 0 1em; }

@media (prefers-reduced-motion: reduce) {
    .cursor { animation: none; }
}