/* RELIC Device TR-90 - the device's own stylesheet.
 *
 * GENERATED by tools/extract-engine.mjs from preview.html, from the [[DEVICE]] regions of its
 * <style> block. Do not edit this file. Change the workshop file and run the tool.
 */
/* LoKyo Arcade hub tokens, same set as Marble Race / Stream Sumo. Only the accent
   changes per product, and RELIC's is the phosphor its own display is printed in. */
:root{
  --bg:#0c0a14; --surface:#161222; --surface-2:#1c1730;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14);
  --text:#ECE7F7; --muted:#9a90b8; --faint:#6c6488;
  --accent:#9BC26A; --accent-soft:#C6E09C; --accent-bg:rgba(155,194,106,.16);
  --accent-bd:rgba(155,194,106,.45);
  --good:#5ee0a0; --bad:#ff8a8a;
  --r:14px; --r-sm:10px;
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ink:#23281C;              /* LCD ink. 7.2:1 on fresh ground, 7.1:1 on aged. */
}
*{box-sizing:border-box}

#glcanvas{position:absolute;left:-99999px;top:0;display:block}
.view{position:absolute;left:0;top:0;pointer-events:none}
/* Silkscreen on the blanking plate, reading bottom to top, the way edge connectors have
   always been labelled. It is printed on the PLATE, so it goes when the plate goes: what is
   left behind is the bare socket, and the legend was only ever there to say what was under
   the cover. */
.portlbl{position:absolute;pointer-events:none;transform:rotate(-90deg)}
#row{position:relative;display:flex;align-items:flex-start}
/* the bay must have a real size in editor mode: absolute children collapse it to
   nothing otherwise, and anything positioned from its right edge lands off-screen */
#row.free{display:block;position:relative}

.slot{position:relative;flex:0 0 auto}
#row.free .slot{position:absolute}

/* --- LCD text layer --- */
.screen{
  position:absolute;overflow:hidden;
  display:flex;flex-direction:column;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:var(--ink);
}
.feed{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.status{flex:0 0 auto;display:flex;justify-content:space-between;gap:8px;
  border-top:1px solid var(--ink);margin-top:5px;padding-top:3px;
  font-weight:700;letter-spacing:.12em;opacity:.88}
.screen .line{margin:0 0 2px;white-space:pre-wrap;overflow-wrap:anywhere;letter-spacing:.02em}
.screen .who{font-weight:700;letter-spacing:.06em}
.screen .role{font-weight:700}
.screen .sep{opacity:.45}

/* An alert cannot use colour on a monochrome panel, so it does what real
   LCD instruments did: it inverts. Ink becomes ground, ground becomes ink. */
.screen .alert{
  background:var(--ink); color:var(--ground,#a5b698);
  margin:6px 0 7px; padding:5px 7px 6px;
  animation:alertin .26s cubic-bezier(.2,.8,.3,1) both, alertblink .11s steps(1) 5 .26s;
}
.screen.static .alert{animation:none}
/* A line put back after a rebuild has already been seen: it must not play its arrival
   animation a second time, or nudging a module makes the whole feed flash. */
.screen .alert.noanim{animation:none}
.screen .alert-top{display:flex;justify-content:space-between;gap:8px;
  font-weight:700;letter-spacing:.18em}
.screen .alert-who{font-weight:700;letter-spacing:.05em;margin-top:1px}
/* The lock answering a guess. NOT inverted: an inversion is an event, and a scored
   guess is the instrument talking back. Rules above and below, and nothing else. */
.screen .vline{
  margin:4px 0 5px; padding:3px 0;
  border-top:1px solid var(--ink); border-bottom:1px solid var(--ink);
  animation:alertin .22s cubic-bezier(.2,.8,.3,1) both;
}
.screen.static .vline{animation:none}
.screen .vline.noanim{animation:none}
.screen .vl-top{display:flex;justify-content:space-between;gap:8px;
  font-weight:700;letter-spacing:.16em;opacity:.70}
.screen .vl-body{display:flex;justify-content:space-between;gap:8px;
  align-items:baseline;margin-top:1px}
.screen .vl-body b{font-weight:700;letter-spacing:.30em}
.screen .vl-body i{font-style:normal;font-weight:700;letter-spacing:.09em}
@keyframes alertin{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes alertblink{
  0%,100%{background:var(--ink);color:var(--ground,#a5b698)}
  50%    {background:transparent;color:var(--ink)}
}

/* the backlight kicks when something lands */
.flash{position:absolute;pointer-events:none;opacity:0;background:#fff;mix-blend-mode:overlay}
.flash.go{animation:flashpulse .40s ease-out}
@keyframes flashpulse{from{opacity:.45}to{opacity:0}}

/* glass sheen sits ABOVE the text, like real glass over a display */
.sheen{position:absolute;pointer-events:none;
  background:linear-gradient(148deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.05) 22%,
    rgba(255,255,255,0) 46%,rgba(255,255,255,0) 100%);
  mix-blend-mode:screen}

.subscreen{position:absolute;display:flex;align-items:center;justify-content:center;
  padding:0 9px;overflow:hidden;text-align:center;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:var(--ink);letter-spacing:.05em;line-height:1.22;
  transition:opacity .34s ease}
.subscreen.swap{opacity:0}
/* The last module wears the mark. It is pressed into the same glass as the readout, so
   it takes the ink colour and it fades with the panel instead of sitting on top of it. */
.subscreen.mark{gap:.7em}
.subscreen .rmark{height:1.5em;width:auto;flex:0 0 auto;opacity:.92}

.lampwrap{position:absolute;pointer-events:none;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;padding-bottom:5px}
.lampdot{position:absolute;left:50%;transform:translate(-50%,-50%);
  border-radius:50%;background:var(--ink);opacity:.34}
.lampdot.on{animation:lampflash 1.1s ease-out}
@keyframes lampflash{
  0%  {opacity:1;box-shadow:0 0 8px 3px rgba(255,255,255,.6)}
  100%{opacity:.34;box-shadow:none}
}
/* --- goal readouts --- */
.goalscreen{position:absolute;display:flex;align-items:center;justify-content:space-between;
  gap:8px;overflow:hidden;white-space:nowrap;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:var(--ink);font-weight:700;line-height:1;letter-spacing:.14em;opacity:.9}
.goalscreen .gv{letter-spacing:.08em;opacity:.96}
.meter{position:absolute;pointer-events:none}
.counter{position:absolute;pointer-events:none}
.cnlabel{position:absolute}
.cwin{position:absolute;overflow:hidden}
.drums{position:absolute;top:0;bottom:0;display:flex;align-items:center}
.wheel{position:relative;overflow:hidden;flex:0 0 auto}
.wheel canvas{position:absolute;left:0;top:0;
  transition:transform .46s cubic-bezier(.26,1.36,.48,1)}
/* the drum is a cylinder, so the printing curves away at the lip of the window */
.wheel::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,7,2,.46) 0%,rgba(10,7,2,.11) 20%,
    rgba(255,255,255,.08) 44%,rgba(10,7,2,.07) 74%,rgba(10,7,2,.50) 100%)}
.cdiv{position:relative;flex:0 0 auto;align-self:center}
.cglass{position:absolute;inset:0;pointer-events:none}

.lampcnt{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-weight:700;
  color:var(--ink);opacity:.78;letter-spacing:.05em;line-height:1}
.brand{position:absolute;pointer-events:none}

.caption{position:absolute;left:0;right:0;text-align:center;color:#e6edf3;
  font-size:11px;letter-spacing:2.4px;text-transform:uppercase;font-weight:600}
.caption small{display:block;margin-top:3px;font-size:10px;letter-spacing:1.2px;
  text-transform:none;font-weight:400;color:#8b949e}

#err{position:fixed;left:50%;top:12px;transform:translateX(-50%);z-index:20;background:#3a1e28;
  color:#ffc9c9;border:1px solid rgba(255,138,138,.4);border-radius:10px;padding:8px 14px;font-size:12px;
  display:none;max-width:80vw;white-space:pre-wrap;font-family:ui-monospace,Menlo,monospace}