:root{
  --tape-bg:#000;
  --font-osd:"Lucida Console","DejaVu Sans Mono",Menlo,Consolas,monospace;
  --font-cap:"Helvetica Neue",Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden}
body{
  font-family:var(--font-cap);
  color:#e8e2d8;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  touch-action:none;
}
#stage{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:#000;
  cursor:none;
}
body.showcursor #stage{cursor:default}
#view{
  display:block;
  image-rendering:auto;
  background:#000;
  box-shadow:0 0 0 1px #141210;
}
#bezel{position:absolute;inset:0;pointer-events:none;z-index:3}
#bezel.tube{
  background:radial-gradient(ellipse 78% 74% at 50% 50%, rgba(0,0,0,0) 58%, rgba(0,0,0,.42) 88%, rgba(0,0,0,.86) 100%);
  mix-blend-mode:multiply;
}
#hud{position:fixed;inset:0;pointer-events:none;z-index:6}

/* ---------- camcorder OSD: timecode + date ---------- */
#osd{
  position:absolute;
  font-family:var(--font-osd);
  font-size:clamp(9px,1.5vmin,15px);
  letter-spacing:.06em;
  color:#f2ece0;
  text-shadow:0 1px 0 rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.7);
  opacity:.82;
  white-space:pre;
  line-height:1.35;
}
#osd .rec{color:#ff4a3d}
#osd .blink{animation:blink 1.1s steps(1,end) infinite}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}

/* ---------- closed captions ---------- */
#captionbar{
  position:absolute;
  left:0;right:0;
  bottom:8.5%;
  display:flex;justify-content:center;
  padding:0 6%;
  pointer-events:none;
}
.cap{
  max-width:min(880px,88%);
  background:rgba(0,0,0,.82);
  color:#fff;
  font-family:var(--font-cap);
  font-weight:700;
  letter-spacing:.07em;
  font-size:clamp(12px,2.05vmin,22px);
  line-height:1.42;
  padding:.42em .8em;
  text-align:center;
  text-transform:uppercase;
  border-radius:1px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
.cap .who{color:#ffd9a0;display:block;font-size:.78em;letter-spacing:.16em;margin-bottom:.12em}
.cap .cur{color:#ffb03a}
.cap.hidden{display:none}
.cap.sys{color:#fff;background:rgba(0,0,0,.88)}
.cap.sys .cur{color:#8fd8ff}

/* ---------- VCR / console overlay menus ---------- */
#vcr{
  position:absolute;inset:0;
  display:none;
  font-family:var(--font-osd);
  background:#0a1a6b;
  color:#fff;
  padding:6vmin 8vmin;
  font-size:clamp(11px,2vmin,20px);
  letter-spacing:.05em;
  line-height:1.6;
  text-shadow:none;
}
#vcr.on{display:block}
#vcr .vtitle{background:#fff;color:#0a1a6b;display:inline-block;padding:.15em .6em;font-weight:700;margin-bottom:1.2em}
#vcr .vrow{display:flex;justify-content:space-between;max-width:640px;gap:2em}
#vcr .vrow.sel{background:#fff;color:#0a1a6b}
#vcr .vcur{animation:blink .8s steps(1,end) infinite}
#vcr .vgrid{border-top:2px solid #fff;margin-top:1em;padding-top:1em;max-width:640px}

/* ---------- interaction prompt ---------- */
#prompt{
  position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.78);color:#fff;
  font-family:var(--font-osd);font-size:clamp(10px,1.8vmin,17px);
  letter-spacing:.1em;padding:.5em .9em;
  opacity:0;transition:opacity .18s;
}
#prompt.on{opacity:1}

#toast{
  position:absolute;left:50%;top:12%;transform:translateX(-50%);
  background:rgba(0,0,0,.8);color:#ffd9a0;
  font-family:var(--font-osd);font-size:clamp(10px,1.7vmin,16px);
  letter-spacing:.09em;padding:.45em .8em;opacity:0;transition:opacity .3s;
}
#toast.on{opacity:1}

/* ---------- thumb pad ---------- */
#pad{position:fixed;z-index:7;pointer-events:none;opacity:0;transition:opacity .25s}
#pad.on{opacity:1}
#padStick{
  position:fixed;left:4vmin;bottom:4vmin;
  width:26vmin;height:26vmin;max-width:150px;max-height:150px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  pointer-events:auto;touch-action:none;
}
#padKnob{
  position:absolute;left:50%;top:50%;width:34%;height:34%;
  transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.3);
}
#padRun{
  position:fixed;right:5vmin;bottom:7vmin;
  width:20vmin;height:20vmin;max-width:112px;max-height:112px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.6);
  font-family:var(--font-osd);font-size:clamp(10px,1.7vmin,16px);
  letter-spacing:.14em;
  display:flex;align-items:center;justify-content:center;
  pointer-events:auto;touch-action:none;user-select:none;
}
#padRun.hit{background:rgba(255,90,70,.24);border-color:rgba(255,120,90,.5);color:#fff}

/* ---------- menus ---------- */
#bootScreen,#pauseScreen{
  position:fixed;inset:0;z-index:20;
  background:#05060a;
  display:flex;align-items:flex-start;justify-content:center;
  overflow:auto;
}
#pauseScreen[hidden],#bootScreen[hidden]{display:none}
/* margin:auto centres the panel when it fits and stops it being clipped at the
   top when it does not. align-items:center would cut the title off a short
   landscape screen with no way to scroll back up to it. */
.bootInner,.pauseInner{width:min(760px,90vw);padding:5vh 0;margin:auto 0}
@media (max-height:520px){
  .bootInner,.pauseInner{padding:3vh 0}
  .bootRule{margin:1.2em 0 .9em}
  .bootHint{margin-top:1.4em}
  .dayrow{padding:.42em .5em}
}
.bootTitle{
  font-family:var(--font-osd);
  font-size:clamp(26px,6.4vmin,64px);
  letter-spacing:.34em;
  color:#f4efe4;
  text-shadow:0 0 18px rgba(255,170,80,.22);
}
.bootSub{
  font-family:var(--font-osd);
  font-size:clamp(10px,1.7vmin,15px);
  letter-spacing:.3em;color:#8a8578;margin-top:.6em;
}
.bootRule{height:1px;background:linear-gradient(90deg,#c9924a,rgba(201,146,74,0));margin:2.4em 0 1.6em}
.bootList{display:flex;flex-direction:column;gap:.15em}
.dayrow{
  display:flex;align-items:baseline;gap:1em;
  padding:.62em .5em;
  font-family:var(--font-osd);
  font-size:clamp(11px,1.9vmin,17px);
  letter-spacing:.08em;
  color:#cfc7b6;
  cursor:pointer;
  /* A row is a <button>, and a button comes with the browser's own face: a
     light grey plate with dark text on it, which is exactly what the day list
     was when it was first opened in a browser rather than looked at in a
     stylesheet. Every row of the menu on every screen was a pale band across
     a black page. The element is only a button for its keyboard behaviour, so
     it is told to have no face of its own and to sit in the list as text. */
  background:none;
  border:0;
  border-left:2px solid transparent;
  border-radius:0;
  text-align:left;
  width:100%;
  font-weight:400;
  line-height:1.35;
  -webkit-appearance:none;
  appearance:none;
  -webkit-font-smoothing:antialiased;
}
.dayrow:hover,.dayrow:focus{background:rgba(255,255,255,.06);border-left-color:#c9924a;color:#fff;outline:none}
.dayrow .n{color:#c9924a;min-width:3.4em;flex:0 0 auto}
.dayrow .len{color:#6d6a63;font-size:.85em;letter-spacing:.12em;flex:0 0 auto}
.dayrow.cont .n{color:#8fae7a}
.dayrow.cont .t{color:#e6dfd0}
.dayrow:disabled{opacity:.42;cursor:default}
.dayrow .t{flex:1}
.dayrow .st{color:#6d6a63;font-size:.85em;letter-spacing:.12em}
.dayrow.locked{opacity:.42;cursor:default}
.dayrow.locked:hover{background:none;border-left-color:transparent;color:#cfc7b6}
/* A narrow screen cannot hold number, title, place and length on one line:
   the title gets squeezed until it breaks mid-name. So the place drops to a
   second line of its own, indented under the title. */
@media (max-width:560px){
  .dayrow{flex-wrap:wrap;row-gap:.18em}
  .dayrow .t{flex:1 1 auto;white-space:nowrap}
  .dayrow .st{order:5;flex:1 1 100%;padding-left:4.6em}
}
.bootHint{
  margin-top:2.4em;font-family:var(--font-osd);
  font-size:clamp(9px,1.5vmin,13px);letter-spacing:.22em;color:#6d6a63;
}
.bootHint b{color:#c9924a;font-weight:400}
.pauseTitle{
  font-family:var(--font-osd);font-size:clamp(18px,3.4vmin,30px);
  letter-spacing:.4em;color:#f4efe4;margin-bottom:1.4em;
}
.pauseMenu{display:flex;flex-direction:column;gap:.5em;align-items:flex-start}
.pbtn{
  font-family:var(--font-osd);font-size:clamp(11px,1.9vmin,16px);
  letter-spacing:.16em;color:#cfc7b6;background:none;
  border:1px solid rgba(255,255,255,.14);
  padding:.75em 1.4em;cursor:pointer;min-width:min(360px,72vw);text-align:left;
}
.pbtn:hover{background:rgba(255,255,255,.07);color:#fff;border-color:#c9924a}
.pauseNote{
  margin-top:2em;font-family:var(--font-osd);font-size:clamp(9px,1.45vmin,13px);
  letter-spacing:.14em;color:#6d6a63;line-height:1.9;
}
/* A phone held sideways is 390 px tall and the tape is nine rows. At the size
   above it scrolls, which a person reads as the menu having been cut off; here
   it fits, so every day and the continuous-play row are on the screen at once.
   These come after the rules they override: a media query adds no weight, so a
   block placed above them loses to them and changes nothing at all. */
@media (max-height:460px){
  .bootInner,.pauseInner{padding:1.4vh 0;width:min(760px,94vw)}
  .bootTitle{font-size:clamp(17px,5vmin,32px);letter-spacing:.26em}
  .bootSub{font-size:9px;margin-top:.3em;letter-spacing:.2em}
  .bootRule{margin:.55em 0 .45em}
  .bootList{gap:0}
  .dayrow{padding:.2em .5em;font-size:12px}
  .dayrow .len,.dayrow .st{font-size:11px}
  .bootHint{margin-top:.6em;font-size:9px;letter-spacing:.14em}
  .pauseTitle{font-size:17px;margin-bottom:.6em}
  .pauseMenu{gap:.28em}
  .pbtn{padding:.42em 1em;font-size:12px;min-width:min(320px,80vw)}
  .pauseNote{margin-top:.6em;font-size:9px}
}
#menuBtn{
  position:fixed;z-index:9;right:max(12px,2.2vmin);top:max(12px,2.2vmin);
  width:38px;height:38px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.14);
  font-size:16px;cursor:pointer;user-select:none;
}
#menuBtn.on{display:flex}
#stage.blackout #view{visibility:hidden}
#stage.blackout #bezel{display:none}
#hud.off{display:none}
#menuBtn:hover{color:#fff;border-color:#c9924a}

@media (hover:hover) and (pointer:fine){
  #padStick,#padRun{opacity:.5}
}

@media (max-height:430px){
  #captionbar{bottom:5%}
  .pauseNote{display:none}
}