/* ============================================================
   SCREENS AND TICKETS
   The overlay screens (title, work order, pause, floor clear, death,
   win, fatal error) and the paper "ticket" look they share.
   Title-screen artwork is in splash.css and the settings controls
   are in settings.css.
   ============================================================ */

/* ---------- The binder: tabs, pages, terms ---------- */

/* The binder is one screen with a row of tabs and one page showing at a time.
   The selected tab uses the same filled style as the pressed settings
   buttons, so "the filled one is active" is true everywhere. A tab with
   .hidden belongs to the other mode (src/ui/binder.js). */
.order-body .binder-page.hidden, .binder-tabs button.hidden{ display:none; }
.binder-tabs{ display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap; }
.binder-tabs button{
  padding:6px 14px; font-size:11px; font-weight:900; letter-spacing:.2em;
  background:transparent; color:var(--yellow-deep);
  border:1px solid rgba(228,230,168,.28); cursor:pointer;
}
@media (hover:hover){
  .binder-tabs button:hover{ background:rgba(228,230,168,.10); color:var(--yellow); }
}
@media (hover:none){
  .binder-tabs button:active{ background:rgba(228,230,168,.10); color:var(--yellow); }
}
.binder-tabs button[aria-selected="true"]{
  background:var(--yellow); color:var(--ink); border-color:var(--yellow);
}
.binder-page{ scrollbar-width:thin; }

/* The binder's spine: the ring-binder edge down the left of the ticket. */
.order.binder{ grid-template-columns:34px 1fr; }
.binder-spine{
  border-right:2px solid rgba(228,230,168,.28);
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0 6px,transparent 6px 12px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.binder-spine span{
  writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap;
  font-size:10px; font-weight:900; letter-spacing:.3em; color:var(--yellow-deep);
}

/* ---------- Terms chooser (work order page) ---------- */

/* The terms are a fixed panel of three buttons and a note. There is nothing
   to open: choosing is the one thing the work order asks for. */
.terms{
  border:1px solid rgba(228,230,168,.25); font-weight: 900; font-size:14px;
  padding:10px 12px; background:rgba(228,230,168,.04);
}
.seg button { font-weight: 900; font-size:12px; }
.terms .note{ line-height:1.6; color:var(--yellow-dim); margin-top:8px; }
.terms .note.fixed{ margin-top:2px; font-size:11px; letter-spacing:.12em; color:var(--yellow-deep); }

/* The run page: the live numbers of the shift. */
.run-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px 18px; margin:4px 0 6px; }
.run-stats small{ display:block; font-size:11px; letter-spacing:.2em; color:var(--yellow-dim); font-weight:900; margin-bottom:2px; }
.run-stats b{ font-size:22px; letter-spacing:.1em; color:#8fc4cc; font-weight:400; }
/* Life pips look the same as in the HUD, spent ones included. */
.run-stats .lives-row{ color:var(--danger); letter-spacing:.3em; }
.run-stats .lives-row .gone{ opacity:.18; }

/* The field manual: columns of short sections. */
.manual-cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 22px; margin-top:48px; }
.manual-cols h3{
  font-size:16px; font-weight:900; letter-spacing:.22em; color:var(--yellow);
  margin:0 0 8px; padding-bottom:4px; border-bottom:1px solid rgba(228,230,168,.2);
}
.manual-cols h3:not(:first-child){ margin-top:16px; }
.manual-cols .notes li{ font-size:14px; }

/* The screen legend: small drawings of the HUD pieces, in CSS, so a player
   can match a word to the thing on screen. */
.legend{ margin:0; padding:0; list-style:none; }
.legend li{ display:flex; gap:10px; align-items:center; padding:5px 0; font-size:14px; line-height:1.4; color:var(--yellow-dim); }
.legend li b{ color:var(--yellow); font-weight:900; letter-spacing:.08em; }
.lg{
  flex:none; width:54px; display:flex; align-items:center; justify-content:center; gap:2px;
  font-style:normal; font-size:12px; font-weight:900; letter-spacing:.1em; color:var(--yellow);
  min-height:24px; border:1px solid rgba(228,230,168,.25); background:rgba(228,230,168,.05);
}
.lg-lives{ color:var(--danger); letter-spacing:.1em; }
.lg-battery{ width:54px; height:54px; min-height:54px; border:0; background:none; }
.lg-noise{ display:block; width:54px; height:54px; min-height:54px; border:0; background:none; }
.lg-seen{
  width:54px; height:24px; border:0; background:
    radial-gradient(ellipse at center,transparent 35%,rgba(216,80,60,.75) 100%);
}

/* ---------- In-game text over the map ---------- */

/* Both are centred on the play area (they live inside the stage), so they
   line up with the player. */
#prompt{
  position:absolute;
  left:0; right:0; bottom: 0;
  text-align:center;
  font-size:15px;
  letter-spacing:.22em;
  text-transform:uppercase;
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
  padding: 20px var(--safe-r) 20px var(--safe-l);
  background: linear-gradient(to top, rgba(0,0,0,1) 40%, transparent);
  text-shadow:0 0 12px rgba(0,0,0,.9);
}
#prompt.on{ opacity:.9; }

/* Short messages such as "PIPE SEALED" and the notes found on the carpet. */
#flashnote{
  position:absolute;
  left:0; right:0;
  top:34%;
  padding:0 var(--safe-r) 0 var(--safe-l);
  text-align:center;
  font-size:15px;
  line-height:1.9;
  letter-spacing:.1em;
  font-style:italic;
  opacity:0;
  pointer-events:none;
  color:#e1e2bb;
  text-shadow:0 0 18px rgba(0,0,0,1), 0 0 40px rgba(0,0,0,1);
}
#flashnote.on{ opacity:1; }

/* ---------- The ticket (work order and pause screen) ---------- */

/* Paper look: punched holes down both long edges (the first two radial
   gradients), faint scanlines, and a dark base colour. */
.order.perf{
  background-image:
    radial-gradient(circle at 0 8px,#000 0 2.5px,transparent 2.6px),
    radial-gradient(circle at 100% 8px,#000 0 2.5px,transparent 2.6px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px),
    rgba(12,10,6,.96);
  background-size:100% 16px,100% 16px,auto,auto;
  background-position:left top,right top,0 0,0 0;
  background-repeat:repeat-y,repeat-y,repeat,no-repeat;
}

.order-body{ padding:22px 26px 20px; text-align:left; }
.order-head{ border-bottom:1px solid rgba(228,230,168,.2); padding-bottom:12px; margin:30px 0 }
.order-head h2{
  font-size:34px; letter-spacing:.22em; font-weight:400; margin:0;
  text-shadow:2px 0 0 rgba(216,80,60,.45), -2px 0 0 rgba(80,150,216,.3);
}
.order-head .meta{
  margin:8px 0 0; font-size:15px; letter-spacing:.18em; color:var(--yellow-deep); font-weight: 900;
}
.order-head .meta b{ color:#8fc4cc; }

.order .field { margin:12px 0; font-size:16px}
.order .field span{
  font-weight: 900; line-height:2; letter-spacing:.22em; margin-bottom:4px; color:var(--yellow);
}
.order .field b{ line-height:1.5; font-weight:400; color:var(--yellow-dim); }

/* Controls list: the main reason the work order screen exists, so the
   text is kept large enough to read. */
.controls-big{ font-size:15px; letter-spacing:.06em; }
.controls-big div{ display:flex; gap:10px; align-items:baseline; padding:3px 0; }
.controls-big b{
  min-width:78px; font-size:15px; padding:3px 9px;
  color:var(--ink); background:var(--yellow); border:1px solid var(--yellow);
}
.controls-big span{ font-size:14px; color:var(--yellow-dim); }

/* Notes use an empty checkbox character as the bullet. */
.order .notes{ margin:8px 0 0; padding:0; list-style:none; }
.order .notes li{
  line-height:1.6; color:var(--yellow-dim); padding-left:18px; position:relative;
}
.order .notes li::before{ content:"\2610"; position:absolute; left:0; color:var(--yellow-deep); }
.order .notes b{ color:var(--yellow); font-weight:400; }

/* The tear-off stub on the right: seed, run details and controls. */
.order-side{
  border-left:2px dashed rgba(228,230,168,.28);
  padding:20px 16px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.02) 0 6px,transparent 6px 12px);
  display:flex; flex-direction:column;
}
.order-side small{
  display:block; font-size:11px; letter-spacing:.2em; color:var(--yellow-dim); font-weight: 900; margin-bottom:2px;
}
.order-side small:not(:first-child){ margin-top:16px; }
.order-side .big{ font-size:36px; line-height:1; color:#8fc4cc; margin-bottom:2px; }
.order-side .badge{ font-size:22px; letter-spacing:.3em; color:#8fc4cc; }
.order-side .seed{ font-size:16px; color:#8fc4cc; letter-spacing:.1em; }
/* Life pips look the same as in the HUD, spent ones included. */
.order-side .seed.lives-row{ color:var(--danger); letter-spacing:.3em; }
.order-side .seed.lives-row .gone{ opacity:.18; }
.order-side .stub-note{
  margin-top:auto; margin-bottom:0; padding-top:18px;
  font-size:11px; line-height:1.8; letter-spacing:.12em; color:var(--yellow-deep);
}

/* The button row under a ticket. */
.order-cta{ display:flex; font-weight: 900; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center; }
#btn-start, #btn-resume{ padding:13px 34px; font-size:13px; letter-spacing:.3em; }
#btn-reset-run{ padding:10px 15px; }
.cta-hint{ font-size:12px; letter-spacing:.2em; color:var(--yellow-deep); }
.cta-hint b{ color:var(--yellow); font-weight:900; }

/* ---------- Full-screen overlays ---------- */

/* Every screen covers the whole frame. There is no blur behind it: a
   blur re-draws everything behind it on every animated frame, and the game
   canvas behind these screens is not even updating (see src/game/loop.js).
   The dark tint is enough to give depth. */
.screen{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(6,5,3,.86);
  z-index:5;
  /* Keep the content clear of the notch, the rounded corners and the home bar.
     Zero on a desktop. */
  padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  cursor:default;            /* bring back the cursor that the page hides */
}
.screen.hidden{ display:none; }

/* A small centred card, used by the death, win, clear and error screens. */
.tape{
  max-width:660px;
  padding:34px 40px;
  text-align:center;
  border:1px solid rgba(228,230,168,.22);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 2px, transparent 2px 4px),
    rgba(14,12,8,.9);
  box-shadow:0 0 60px rgba(0,0,0,.9), inset 0 0 40px rgba(228,230,168,.05);
}

/* Headings get a slight red/blue offset to imitate a bad video signal. */
h1{
  font-size:38px;
  letter-spacing:.34em;
  font-weight:400;
  margin-bottom:6px;
  text-shadow:2px 0 0 rgba(216,80,60,.5), -2px 0 0 rgba(80,150,216,.35);
}
h1.bad{ color:var(--danger); letter-spacing:.2em; font-size:32px; }

.sub{
  font-size:12px;
  font-weight: 900;
  letter-spacing:.4em;
  color:var(--yellow-deep);
  margin-bottom:32px;
}

.controls{
  font-size:10px;
  font-weight: 900;
  letter-spacing:.1em;
}
.controls div{ display:flex; gap:9px; align-items:baseline; }
.controls b{
  color:var(--yellow);
  background:rgba(228,230,168,.1);
  border:1px solid rgba(228,230,168,.25);
  padding:2px 7px;
  min-width:56px;
  text-align:center;
  font-weight:400;
}
.controls span{ color:var(--yellow-deep); }

.hint{
  font-size:11.5px;
  line-height:2;
  color:var(--yellow-dim);
  margin-bottom:26px;
}
.hint i{ color:var(--yellow); font-style:italic; }

/* ---------- Floor clear card ---------- */

/* Shown between two levels. It has two parts: how much clock you had left
   (the reward) and what the next floor holds (the briefing). It uses the
   same card style as the other screens, so it reads as paperwork and not
   as a score popup. */
#screen-clear{ background:rgba(6,5,3,.94); }
.tape.clear{ max-width:520px; }
.tape.clear h1{ font-size:30px; }

/* The clock left over is the one number about the player's own
   performance, so it is large. */
.clear-left{
  font-size:11px; font-weight:900; letter-spacing:.28em; color:var(--yellow-deep);
  margin-bottom:26px;
}
.clear-left b{
  display:block; font-size:34px; letter-spacing:.14em; font-weight:400;
  color:var(--yellow); margin-top:8px;
}

/* The next assignment. The dashed top edge matches the difficulty chooser
   on the work order: it is the same document, one page further on. */
.clear-next{
  border-top:2px dashed rgba(228,230,168,.28);
  padding-top:16px; margin-bottom:28px; text-align:left;
}
.clear-next .k{
  display:block; font-size:11px; font-weight:900; letter-spacing:.2em;
  color:#8fc4cc; margin-bottom:12px;
}
.clear-next .k b{ color:var(--yellow); font-weight:900; }
.clear-grid{
  display:grid; grid-template-columns:1fr auto; gap:8px 24px; align-items:baseline;
}
.clear-grid span{ font-size:12px; font-weight:900; letter-spacing:.22em; color:var(--yellow); }
.clear-grid b{ font-size:16px; font-weight:400; color:var(--yellow-dim); letter-spacing:.1em; }

/* ---------- Fatal error card ---------- */

/* Shown when the game loop crashes repeatedly. It is not part of the normal
   screen list, so no normal screen change can hide it. Its z-index is the
   highest of all, so nothing covers it. */
#fatal{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(6,5,3,.94);
  z-index:9;
}
#fatal.hidden{ display:none; }

/* ---------- Desktop-only notice ---------- */

/* Shown instead of the title on a phone. */
#screen-mobile{ background:rgba(6,5,3,.94); }

/* ---------- Buttons ---------- */

/* Default button style. Variants (.ghost, .danger, .seg buttons) are in
   settings.css. */
button{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.3em;
  color:var(--ink);
  background:var(--yellow);
  border:none;
  padding:13px 34px;
  cursor:pointer;
  transition:background .15s, box-shadow .15s, transform .1s;
}
@media (hover:hover){
  button:hover{
    background:#eef0c4;
    box-shadow:0 0 26px rgba(228,230,168,.5);
  }
}
@media (hover:none){
  button:active{
    background:#eef0c4;
    box-shadow:0 0 26px rgba(228,230,168,.5);
  }
}
button:active{ transform:translateY(1px); }

/* ---------- Small windows ---------- */

/* Stack the ticket and its stub vertically. Not on a short landscape screen
   (a phone held sideways): stacked, the ticket would be taller than the
   screen, so there the stub stays beside the body (css/base.css, compact tier). */
@media (max-width:820px) and (min-height:521px), (max-width:820px) and (orientation:portrait){
  .order{ grid-template-columns:1fr; }
  .order-side{
    border-left:none; border-top:2px dashed rgba(228,230,168,.28);
    flex-direction:row; flex-wrap:wrap; gap:0 20px; align-items:baseline;
  }
  .order-head h2{ font-size:20px; }
}

@media (max-width:620px){
  .tape{ padding:22px; max-width:92vw; }
  h1{ font-size:24px; }
  .order-body{ padding:16px; }
  .controls-big{ font-size:14px; }
  .controls-big b{ min-width:64px; font-size:14px; }
}

/* ---------- Screen Footer ---------- */
/* Matches the footer from https://deujo.glenacota.me/ (without settings button) */
.screen-footer{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:8px max(16px, var(--safe-r)) calc(8px + var(--safe-b)) max(16px, var(--safe-l));
  border-top:1px solid rgba(228,230,168,.18);
  background:rgba(6,5,3,.86);
  z-index:10;
}

.screen.splash .screen-footer{
  background:transparent;
  border-top-color:rgba(228,230,168,.12);
}

.footer-left{
  font-size:14px;
  letter-spacing:.18em;
  color:var(--yellow-deep);
  text-align:center;
  margin:0;
}

.footer-link{
  color:var(--yellow-deep);
  text-decoration:none;
  transition:color .15s;
}

@media (hover:hover){
  .footer-link:hover{
    color:var(--yellow);
  }
}
@media (hover:none){
  .footer-link:active{
    color:var(--yellow);
  }
}

.footer-icon{
  display:inline-block;
  width:16px; height:16px;
  vertical-align:middle;
  margin-right:6px;
  fill:currentColor;
}

.footer-left span {
  color: white;
  padding: 0 1rem;
}
/* ---------- Short windows: a phone held sideways ---------- */

/* The ticket is taller than 360 to 412 px, and its important controls used to
   sit at the bottom of a scroll. So on a short window the
   ticket is tightened, the stub stays beside the body instead of stacking under
   it, and the button row sticks to the bottom of the scroll so it is always in
   reach. This is placed after the width queries on purpose: at 740 px wide the
   820 rule would stack the stub, and these rules have to win over it. */
@media (max-height:480px){
  .order-wrap{ max-height:100%; gap:8px; }
  .order-body{ padding:10px 14px 8px; }
  .order-head{ padding-bottom:6px; margin-bottom:8px; }
  .order-head h2{ font-size:20px; letter-spacing:.16em; }
  .order-head .meta{ font-size:11px; margin-top:4px; }
  .order .field{ margin:6px 0; font-size:13px; }
  .order .field span{ line-height:1.6; margin-bottom:0; }
  .order .notes li{ font-size:12px; }
  .binder-tabs{ margin-bottom:8px; }
  .settings-grid{ gap:8px 18px; margin:4px 0 2px; }
  .setrow.section{ margin-top:2px; padding-top:0; }
  /* The spine is not worth a strip of a 360 px screen, and the manual reads
     in one column. */
  .binder-spine{ display:none; }
  .order.binder{ grid-template-columns:1fr; }
  .manual-cols{ grid-template-columns:1fr; }

  .setrow.buttons{ margin-top:8px; gap:8px; }
  .setrow.buttons button{
    padding:8px 10px; font-size:11px; letter-spacing:.12em; white-space:nowrap;
  }
  #btn-start, #btn-resume{ padding:8px 10px; font-size:11px; letter-spacing:.12em; white-space:nowrap; }
  #btn-reset-run{ padding:8px 10px; font-size:11px; letter-spacing:.12em; white-space:nowrap; }
  /* The footer links are not worth a strip of a 360 px screen. */
  #screen-binder .screen-footer{ display:none; }
}

/* The buttons that matter stay in reach while the ticket scrolls under them. This
   is taller than the query above because an iPad with the touch settings added
   no longer shows the whole pause page in 768 px either. Touch mode only, so a
   laptop window is left as it was. */
@media (max-height:820px){
  [data-input=touch] .order-cta{
    position:sticky; bottom:0; width:100%; padding:6px 0;
    background:rgb(6,5,3);        /* solid: text must not show through the bar */
  }
  [data-input=touch] .setrow.buttons{
    position:sticky; bottom:0; padding:6px 0;
    background:rgb(12,10,6);
  }
}

/* Mode visibility: BEGIN SHIFT and its hint belong to the shift mode, the
   pause hint to the pause mode. */
#screen-binder[data-binder-mode=shift] .pause-only,
#screen-binder[data-binder-mode=pause] .shift-only{ display:none; }

/* Narrow windows: the manual reads in one column. */
@media (max-width:820px){
  .manual-cols{ grid-template-columns:1fr; }
}

/* Wide enough for it, keep the stub beside the body. */
@media (max-height:480px) and (min-width:560px){
  .order{ grid-template-columns:1fr 200px; }
  .order-side{
    border-left:2px dashed rgba(228,230,168,.28); border-top:none;
    flex-direction:column; flex-wrap:nowrap; gap:0; align-items:stretch;
    padding:10px 12px;
  }
  .order-side small:not(:first-child){ margin-top:6px; }
  .order-side .big{ font-size:26px; }
  .order-side .badge{ font-size:16px; }
  .order-side .seed{ font-size:13px; }
  .order-side .stub-note{ padding-top:8px; }
  .controls-big{ font-size:11px; }
  .controls-big b{ font-size:11px; min-width:0; }
  .controls-big span{ font-size:11px; }
}