/* Slopster! web look (26 Oct night, David: "the web UI should look like the game"): the TV app's
   palette and fonts, black with stars, copper and teal bands, chrome titles (look.js draws the
   bands, stars and titles). Shared by the phone page, the browser TV page and the web pages. */
@font-face { font-family: "VT323"; src: url("/static/fonts/VT323-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Slopster Arcade"; src: url("/static/fonts/SlopsterArcade.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Slopster Display"; src: url("/static/fonts/SlopsterDisplay.ttf") format("truetype"); font-display: block; }
/* Japanese only (anime names): downloaded only when such a character is on the page */
@font-face { font-family: "DotGothic16"; src: url("/static/fonts/DotGothic16-Regular.ttf") format("truetype");
             size-adjust: 64%; unicode-range: U+3000-30FF, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF; font-display: swap; }

:root {
  /* the TV app's palette (scripts/app.gd) */
  --black: #000; --white: #eceef6; --cream: #fadaa8; --amber: #f6b03e; --orange: #de6816; --copper: #c46228;
  --teal: #3cd6c4; --dim: #808494; --dark: #282832; --coral: #e85434; --shadow: #08060a;
  /* the four answer colours, as on the TV */
  --a: #f6b03e; --b: #3cd6c4; --c: #eceef6; --d: #e87048;
  /* older names the web pages use */
  --bg: #000; --panel: #0a090c; --panel2: #121016; --line: #4a2a14;
  --text: var(--white); --muted: var(--dim); --good: var(--teal); --warn: var(--amber); --bad: var(--coral); --accent: var(--amber);
  --font: "VT323", "DotGothic16", ui-monospace, monospace;
  --arcade: "Slopster Arcade", "VT323", monospace;
  --glow: linear-gradient(90deg, rgba(230,107,26,0) 0%, rgba(230,107,26,.35) 8%, rgba(242,140,38,.22) 50%, rgba(230,107,26,.10) 92%, rgba(230,107,26,0) 100%);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--black); color: var(--text); font-family: var(--font); font-size: 25px; line-height: 1.05;
       -webkit-font-smoothing: none; font-smooth: never; -webkit-tap-highlight-color: transparent;
       font-variant-ligatures: none; }
canvas.px, img.px { image-rendering: pixelated; image-rendering: crisp-edges; }
#stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }

button { font: inherit; color: inherit; cursor: pointer; border: 0; border-radius: 0; background: none; }
button:disabled { opacity: .45; cursor: default; }
input, select { font: inherit; font-size: 30px; color: var(--amber); background: rgba(8,7,10,.95);
                border: 3px solid rgba(196,98,40,.6); border-radius: 0; padding: .2em .45em; outline: none; caret-color: var(--amber); }
input:focus, select:focus { border-color: var(--amber); }
input::placeholder { color: rgba(128,132,148,.8); }

.muted { color: var(--muted); }
.good { color: var(--good); }
.bad { color: var(--bad); }
.center { text-align: center; }
.panel { background: rgba(8,7,10,.9); border: 3px solid rgba(196,98,40,.6); padding: .6em .8em; }

/* buttons: VT323 capitals, amber with the copper glow when pressed or focused (the TV's menu items) */
.btn { display: inline-block; text-transform: uppercase; color: var(--white); font-size: 30px; padding: .25em .7em;
       background: rgba(8,7,10,.85); border-top: 3px solid var(--copper); border-bottom: 3px solid var(--copper); }
.btn:not(:disabled):active, .btn:focus-visible, .btn.on { color: var(--amber); background: var(--glow), rgba(8,7,10,.85); }
.btn.primary { color: var(--black); background: linear-gradient(180deg, #fcb03a 0%, #f08c22 55%, #c46228 100%); border-color: #ffd28a; font-size: 34px; }
.btn.primary:not(:disabled):active { color: var(--black); background: linear-gradient(180deg, #ffd28a 0%, #fcb03a 100%); }
.btn.ghost { color: var(--white); font-size: 25px; }
.btn.danger { color: var(--coral); border-color: #8a2a18; }

/* the countdown bar: amber blocks running down */
.timer { height: 14px; background: #1a120c; border: 2px solid #3a1e0c; overflow: hidden; }
.timer i { display: block; height: 100%; width: 100%;
           background: repeating-linear-gradient(90deg, var(--amber) 0 10px, var(--orange) 10px 12px); }

.opt-0 { --opt: var(--a); } .opt-1 { --opt: var(--b); } .opt-2 { --opt: var(--c); } .opt-3 { --opt: var(--d); }
.letter { display: inline-grid; place-items: center; font-family: var(--arcade); color: var(--opt, var(--amber)); flex: none; }
.toast { position: fixed; left: 50%; bottom: 1em; transform: translateX(-50%); background: rgba(8,7,10,.96); color: var(--cream);
         border: 3px solid var(--copper); padding: .35em .7em; z-index: 50; max-width: 92vw; font-size: 25px; }
.covers9 { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; aspect-ratio: 1; }
.covers9 img, .covers9 span { width: 100%; height: 100%; object-fit: cover; background: var(--panel2); display: block; }
.leader-mark { color: var(--amber); margin-left: .2em; }

/* equaliser blocks (the TV's Equaliser) */
.eq { display: inline-flex; gap: 4px; align-items: flex-end; height: 1em; vertical-align: -0.1em; }
.eq i { width: 8px; background: repeating-linear-gradient(0deg, var(--teal) 0 4px, transparent 4px 6px); animation: eq 0.9s infinite steps(5); }
.eq i:nth-child(2) { animation-delay: .15s; background: repeating-linear-gradient(0deg, #3c8cd6 0 4px, transparent 4px 6px); }
.eq i:nth-child(3) { animation-delay: .3s; background: repeating-linear-gradient(0deg, var(--amber) 0 4px, transparent 4px 6px); }
.eq i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 20%; } 50% { height: 100%; } }

/* chrome title on a copper band (look.js) */
.band-title { position: relative; display: grid; place-items: center; margin: 4px -16px; min-height: 40px; }
.band-title > canvas.band { position: absolute; inset: 0; width: 100%; height: 100%; }
.band-title > canvas.chrome { position: relative; max-width: calc(100% - 16px); }
.band-title.plain > canvas.band { display: none; }
.title-text { font-family: var(--arcade); text-transform: uppercase; color: var(--cream); text-shadow: 3px 3px 0 var(--shadow); }