/* ---------------------------------------------------------------------------
 * The Ultimate Paper Pusher.
 *
 * Moved from the live holding page's <style> block rather than from the repo's
 * earlier paper-pusher, because the markup it styles is the later generation:
 * an office with a clock and a hazard barrier, not a frame with a canvas in it.
 * See the note at the top of htdocs/games/paper-pusher.php.
 *
 * What was left behind: the page-level building-site dressing — the hazard
 * stripes across the top and bottom of the viewport, the diagonal wash, the
 * SITE UNDER CONSTRUCTION and COMING SOON signs. Those said "this website is
 * not finished". The arcade is finished, so repeating them here would be
 * decoration pretending to be information.
 *
 * The :root block and body rule the source carried are gone too: tokens.css and
 * bare.css now provide both, and a page-level copy would be the divergent
 * fourth variant that tokens.css exists to prevent.
 * ------------------------------------------------------------------------- */

.wrap { max-width: 640px; width: 100%; }

.brand-eyebrow {
  font-size: 11px; letter-spacing: .14em; color: var(--line);
  text-transform: uppercase; text-align: center;
}
h1 { font-family: var(--disp); font-weight: 700; font-size: 28px; margin: 6px 0 4px; text-align: center; }
.tagline { font-size: 13px; color: var(--ink-dim); text-align: center; margin: 0 0 22px; }

/* Without these a tap on iOS starts a text selection and pops the callout menu
   instead of reaching the game, and Safari adds a 300ms wait for a possible
   double-tap. Kept verbatim from the source, for the same reason. */
.office, .barrier, #scene {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* The faint diagonal wash behind the office is the ONE piece of building-site
   dressing that stayed, because in here it reads as a government office rather
   than as an unfinished website. */
.office {
  position: relative;
  border: 1px solid var(--line-dim);
  border-radius: 4px;
  background:
    repeating-linear-gradient(45deg,
      rgba(216, 35, 42, .055) 0 16px,
      rgba(242, 236, 221, .045) 16px 32px),
    var(--panel);
  padding: 14px;
  overflow: hidden;
}
.office::before, .office::after, .o-bl, .o-br {
  content: ""; position: absolute; width: 12px; height: 12px;
  border-color: var(--line); border-style: solid; z-index: 6;
}
.office::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.office::after  { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.o-bl { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.o-br { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.officebar {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 9px; gap: 14px;
}
.whenbox { text-align: left; }
.day { font-size: 9.5px; text-transform: uppercase; letter-spacing: .13em; color: var(--ink-dim); }
.clock {
  font-family: var(--disp); font-weight: 700; font-size: 19px;
  color: var(--warn); letter-spacing: .04em; line-height: 1.15;
}

/* The career total. New here — the source had no persistence, and a counter
   that resets every visit is the one thing this game is about not doing. */
.lifetime { text-align: right; }
.lt-lab {
  display: block; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .13em; color: var(--ink-dim);
}
.lt-val {
  display: block; font-family: var(--disp); font-weight: 700; font-size: 19px;
  color: var(--line); letter-spacing: .04em; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

#scene {
  display: block; width: 100%; height: auto;
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: var(--panel-2); border: 1px solid var(--line-dim); border-radius: 2px;
}

.hint { font-size: 10px; color: var(--ink-dim); margin: 9px 0 0; line-height: 1.55; text-align: center; }

.counter {
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 9px;
  font-size: 10px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .09em;
}
.counter .v {
  font-family: var(--disp); font-weight: 700; font-size: 19px; color: var(--ok);
  letter-spacing: .04em; text-transform: none;
  font-variant-numeric: tabular-nums;
  transition: transform .14s, color .14s;
}
.counter .v.pop { transform: scale(1.18); color: var(--drill); }

.note {
  font-size: 10.5px; color: var(--ink-dim); line-height: 1.8;
  margin: 18px 0 0; text-align: center;
}

/* --- the weekend barrier ----------------------------------------------------
 *
 * Friday 18:00: the tape goes up and the week cannot start again until somebody
 * peels it off. This is the only place the hazard tape survived the move,
 * because here it is a game state rather than a note about the website.
 * ------------------------------------------------------------------------- */
.barrier {
  position: absolute; inset: 0; z-index: 5; cursor: pointer;
  background: rgba(11, 30, 51, .72);
  transition: background .5s ease .9s;
}
.barrier .bar {
  position: absolute; height: 30px; width: 190%; left: -45%;
  background: repeating-linear-gradient(45deg, #D8232A 0 18px, #F2ECDD 18px 36px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .55);
  transition: transform 1.5s cubic-bezier(.55, -0.2, .75, .6), opacity 1.4s ease .25s;
}
.barrier .b1 { top: 32%; transform: rotate(15deg); }
.barrier .b2 { top: 62%; transform: rotate(-11deg); }
.barrier .tape-tag {
  position: absolute; top: 12px; right: 12px; background: #D8232A; color: #fff;
  font-size: 9.5px; letter-spacing: .06em; padding: 5px 10px; border-radius: 2px;
  font-weight: 600; line-height: 1.65; text-align: right; transition: opacity .5s ease;
}
.barrier .peelhint {
  position: absolute; left: 0; right: 0; bottom: 16px; text-align: center;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #F2ECDD;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7); transition: opacity .4s ease;
}
/* Peeling: the bars swing off to either side and the whole thing clears. */
.barrier.peel { background: rgba(11, 30, 51, 0); pointer-events: none; }
.barrier.peel .b1 { transform: rotate(52deg) translate(60%, -260%); opacity: 0; }
.barrier.peel .b2 { transform: rotate(-46deg) translate(-60%, 300%); opacity: 0; }
.barrier.peel .tape-tag, .barrier.peel .peelhint { opacity: 0; }
.barrier.gone { display: none; }

@media (max-width: 560px) {
  .office { padding: 10px; }
  .counter { flex-direction: column; align-items: center; gap: 3px; text-align: center; }
  .barrier .peelhint { bottom: 10px; font-size: 9.5px; }
}