/* The way in: the check board, the time clock and the time card in your hand. */

.signin {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  background: #0b0d0f;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.signin.in { opacity: 1; }
.signin.leaving { opacity: 0; transition-duration: 0.65s; }

.si-frame {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.si-frame.thunk { animation: si-thunk 0.14s ease-out; }
@keyframes si-thunk { 50% { translate: 0 1.5px; } }
.si-plate { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; }

/* The gas sconce breathes a little. */
.si-glow {
  position: absolute;
  width: 900px;
  height: 900px;
  margin: -450px 0 0 -450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 120, 0.16), rgba(255, 170, 90, 0.05) 40%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: si-breathe 5.5s ease-in-out infinite alternate;
}
@keyframes si-breathe { from { opacity: 0.75; transform: scale(0.98); } to { opacity: 1; transform: scale(1.02); } }

/* Gilt sign-writing on the board's header panel. */
.si-header {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 4%;
  font-family: var(--font-deco);
  font-size: 60px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: transparent;
  background: linear-gradient(180deg, #fff1bf 0%, #e3c06c 38%, #a37a2c 55%, #f0d58b 72%, #8e6620 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 0 rgba(30, 18, 4, 0.9)) drop-shadow(0 0 6px rgba(255, 200, 120, 0.18));
  opacity: 0.94;
  pointer-events: none;
}

/* Brass tallies hanging on their hooks. */
.si-tally {
  position: absolute;
  transform: rotate(var(--tilt, 0deg));
  transform-origin: 50% var(--hole, 8%);
  filter: drop-shadow(3px 6px 4px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.si-tally img, .si-tally .si-disc { position: absolute; inset: 0; width: 100%; height: 100%; }
.si-tally .si-disc {
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 12%, #120d07 0 7%, transparent 7.5%),
    radial-gradient(circle at 36% 30%, #f6e3a4, #c9a24f 42%, #8a6524 78%, #5c4116);
  box-shadow: inset 0 0 0 3px rgba(80, 55, 18, 0.45), inset 0 -4px 6px rgba(0, 0, 0, 0.35);
}
.si-tally span {
  position: absolute;
  inset: 22% 0 0;
  display: grid;
  place-items: center;
  font-family: var(--font-stencil);
  font-weight: 700;
  font-size: 1em;
  color: rgba(52, 34, 8, 0.82);
  /* Stamped into the brass: dark in the cut, a catch of light on its lower edge. */
  text-shadow: 0 1px 0 rgba(255, 236, 170, 0.55), 0 -1px 0 rgba(0, 0, 0, 0.35);
}

/* The clock's hands, on real time. */
.si-hands { position: absolute; width: 0; height: 0; pointer-events: none; }
.si-hand {
  position: absolute;
  left: 0;
  transform-origin: 50% 100%;
  border-radius: 40% 40% 2px 2px;
  background: linear-gradient(90deg, #0c0c0c, #2b2b2b 50%, #0c0c0c);
  box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.35);
}
.si-hand.sc { background: #6d1b14; border-radius: 1px; transition: transform 0.18s cubic-bezier(.3, 1.6, .5, 1); }
.si-pin { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e7cf8a, #8a6524); }

.si-lever { position: absolute; pointer-events: none; }
.si-lever.drawn {
  border-radius: 20px;
  background: linear-gradient(90deg, #4b4f52, #c9cdd0 40%, #6a6f73 70%, #2f3336);
  box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.5);
}
.si-lever.drawn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -30px;
  width: 70px;
  height: 70px;
  margin-left: -35px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3b2a1c, #120b05);
  box-shadow: 4px 6px 8px rgba(0, 0, 0, 0.5);
}

/* ---------- The drawn wall (stand-in until the render is there) ---------- */

.si-drawn { position: absolute; inset: 0; overflow: hidden;
  background:
    linear-gradient(180deg, transparent 0 74%, #1c120b 74% 74.6%, #2a1a10 74.6% 75.6%, transparent 75.6%),
    linear-gradient(180deg, #2a2722 0 74%, #24150c 74%),
    #1a1714;
}
.si-drawn::before { /* wainscot panels */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 76%; bottom: 0;
  background: repeating-linear-gradient(90deg, transparent 0 300px, rgba(0, 0, 0, 0.35) 300px 306px, rgba(255, 220, 170, 0.04) 306px 310px), var(--img-desk-wood, none);
  background-size: auto, 900px 450px;
  background-blend-mode: normal, multiply;
  opacity: 0.85;
}
.si-d-board {
  position: absolute;
  border-radius: 6px;
  background:
    radial-gradient(80% 70% at 40% 30%, rgba(255, 220, 160, 0.06), transparent 70%),
    linear-gradient(160deg, #1a2a22, #0f1914 70%);
  box-shadow: 0 0 0 18px #3a2414, 0 0 0 22px #1a0f07, 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(0, 0, 0, 0.55);
}
.si-d-hook {
  position: absolute;
  width: 14px;
  height: 22px;
  border: 4px solid #b48f3e;
  border-top-color: transparent;
  border-radius: 0 0 10px 10px;
  box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.5);
}
.si-d-clock {
  position: absolute;
  border-radius: 40px 40px 10px 10px;
  background: linear-gradient(90deg, #2a170a, #5b3519 30%, #6b4120 50%, #4a2a12 75%, #24130a), var(--img-desk-wood, none);
  background-blend-mode: multiply;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 10px rgba(0, 0, 0, 0.25);
}
.si-d-face {
  position: absolute;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #efe7d3, #d9cfb4 70%, #b8ab8a);
  box-shadow: 0 0 0 10px #b48f3e, 0 0 0 13px #4a3410, inset 0 6px 14px rgba(0, 0, 0, 0.35);
}
.si-d-face b {
  position: absolute;
  font: 400 26px var(--font-old);
  color: #1f1a14;
}
.si-d-throat { position: absolute; background: #050403; border-radius: 4px; box-shadow: 0 0 0 6px #b48f3e, 0 0 0 8px #3a2a0e; }
.si-d-glow { position: absolute; width: 1000px; height: 1000px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 190, 110, 0.18), transparent 65%); }

/* ---------- The time card in your hand ---------- */

.si-card {
  --violet: #4a2f7a;
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 4vh, 44px);
  width: min(520px, calc(100vw - 28px));
  margin-left: calc(min(520px, calc(100vw - 28px)) / -2);
  padding: 16px 24px 20px;
  background-color: #dcc994;
  background-image:
    linear-gradient(180deg, rgba(255, 248, 225, 0.2), transparent 30%, transparent 75%, rgba(80, 55, 15, 0.14)),
    var(--img-manila, none);
  background-size: auto, 520px 520px;
  background-blend-mode: normal, multiply;
  color: #2b2213;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(90, 65, 20, 0.35), 0 24px 50px rgba(0, 0, 0, 0.65), 0 4px 10px rgba(0, 0, 0, 0.5);
  transform: rotate(-1.2deg);
  cursor: text;
  animation: si-card-in 0.8s 0.25s cubic-bezier(.2, .8, .25, 1) both;
}
@keyframes si-card-in { from { opacity: 0; transform: translate3d(0, 60px, 0) rotate(3deg); } }
.si-card::before { /* the notch the clock reads it by */
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: 46px;
  height: 10px;
  margin-left: -23px;
  border-radius: 0 0 23px 23px;
  background: rgba(20, 14, 6, 0.6);
}
.si-card.shake { animation: si-shake 0.42s cubic-bezier(.36, .07, .19, .97); }
@keyframes si-shake {
  15%, 85% { transform: translate3d(-3px, 0, 0) rotate(-1.2deg); }
  30%, 70% { transform: translate3d(5px, 0, 0) rotate(-1.2deg); }
  45%, 55% { transform: translate3d(-6px, 0, 0) rotate(-1.2deg); }
}
.si-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  border-bottom: 2px solid rgba(43, 34, 19, 0.7);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.si-co { font-family: var(--font-deco); font-size: 1.05rem; letter-spacing: 0.04em; }
.si-kind { font-family: var(--font-stencil); font-size: 1.3rem; white-space: nowrap; letter-spacing: 0.28em; text-transform: uppercase; color: #3d2a12; }

.si-face, .si-read { transition: opacity 0.22s ease, transform 0.3s ease; }
.si-face.out { opacity: 0; transform: translateY(-6px); }
.si-read { opacity: 0; transform: translateY(6px); }
.si-read.in { opacity: 1; transform: none; }

.si-hint { margin: 0 0 8px; font-family: var(--font-type); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(43, 34, 19, 0.75); }
.si-number { position: relative; display: flex; align-items: center; gap: 12px; cursor: text; }
.si-no { font-family: var(--font-type); font-size: 1.25rem; }
.si-digits { display: flex; align-items: flex-end; gap: 6px; }
.si-digit {
  width: clamp(26px, 8vw, 40px);
  height: clamp(42px, 12vw, 54px);
  display: grid;
  place-items: center;
  border-bottom: 2px solid rgba(43, 34, 19, 0.6);
  font-family: var(--font-type);
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  color: var(--violet);
  mix-blend-mode: multiply;
  filter: url(#ink-bleed);
}
.si-digit.on { animation: si-strike 0.16s ease-out; }
@keyframes si-strike { from { transform: translateY(-3px) scale(1.12); opacity: 0.4; } }
.si-dash { font-family: var(--font-hand); font-size: 1.6rem; color: rgba(43, 34, 19, 0.6); font-style: normal; }
/* The real field sits over the digits (phones get their number pad); its own text is hidden. */
.si-input {
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  border: 0;
  font-size: 16px;
  caret-color: transparent;
  cursor: text;
}
.si-number:focus-within .si-digit:not(.on):first-of-type,
.si-number:focus-within .si-digits .si-digit:not(.on) { border-bottom-color: var(--violet); }
.si-msg { min-height: 1.3em; margin: 8px 0 0; font-size: 1.3rem; color: var(--graphite); }
.si-msg.bad, .si-state.bad { color: var(--ink-red); }

.si-who { display: flex; align-items: center; gap: 14px; }
.si-tallyno {
  width: 58px;
  height: 58px;
  flex: none;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  font-family: var(--font-stencil);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 0.9;
  color: rgba(52, 34, 8, 0.85);
  background: radial-gradient(circle at 36% 30%, #f6e3a4, #c9a24f 42%, #8a6524 78%, #5c4116);
  box-shadow: inset 0 0 0 2px rgba(80, 55, 18, 0.45), 0 3px 6px rgba(0, 0, 0, 0.35);
  text-shadow: 0 1px 0 rgba(255, 236, 170, 0.55);
}
.si-tallyno small { font-family: var(--font-type); font-size: 0.5rem; letter-spacing: 0.1em; font-weight: 400; }
.si-name { font-size: 1.5rem; }
.si-rank { font-family: var(--font-type); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(43, 34, 19, 0.75); }
.si-state { margin: 10px 0 12px; font-size: 1.3rem; }
.si-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.si-stamped {
  margin: 10px 0 0;
  font-family: var(--font-type);
  font-size: 1.3rem;
  letter-spacing: 0.12em;
  color: var(--violet);
  mix-blend-mode: multiply;
  filter: url(#ink-bleed);
  animation: si-print 0.3s ease-out both;
}
@keyframes si-print { from { opacity: 0; transform: scale(1.3); } }

@media (prefers-reduced-motion: reduce) {
  .si-glow { animation: none; }
  .si-card { animation: none; }
}

/* Phones: the card clears the mute button in the corner. */
@media (max-width: 560px) {
  .si-card { bottom: 78px; padding: 12px 14px 14px; }
  .si-co { font-size: 0.9rem; }
  .si-kind { font-size: 1.05rem; }
  .si-digits { gap: 4px; }
  .si-number { gap: 8px; }
}

/* ---------- Punching in from inside the office (punch.js) ---------- */

.pt-wrap {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  background: radial-gradient(70% 70% at 50% 45%, rgba(12, 9, 6, 0.78), rgba(4, 3, 2, 0.94));
  opacity: 0;
}
.pt-stage { position: relative; }
.pt-clock {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  /* The clock melts into the dark around it: no edge to the picture. */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, rgba(0, 0, 0, 0.6) 78%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, rgba(0, 0, 0, 0.6) 78%, transparent 100%);
}
.pt-hands { position: absolute; width: 0; height: 0; }
.pt-hand { position: absolute; left: 0; transform-origin: 50% 100%; border-radius: 40% 40% 2px 2px; background: linear-gradient(90deg, #0c0c0c, #2b2b2b 50%, #0c0c0c); box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.35); }
.pt-hand.sc { background: #6d1b14; border-radius: 1px; transition: transform 0.18s cubic-bezier(.3, 1.6, .5, 1); }
.pt-pin { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e7cf8a, #8a6524); }
.pt-lever { position: absolute; }
.pt-card {
  --violet: #4a2f7a;
  position: absolute;
  width: 300px;
  padding: 12px 16px 14px;
  background-color: #dcc994;
  background-image: linear-gradient(180deg, rgba(255, 248, 225, 0.2), transparent 30%, transparent 75%, rgba(80, 55, 15, 0.14)), var(--img-manila, none);
  background-size: auto, 420px;
  background-blend-mode: normal, multiply;
  color: #2b2213;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(90, 65, 20, 0.35), 0 18px 34px rgba(0, 0, 0, 0.6);
  opacity: 0;
}
.pt-card::before { content: ''; position: absolute; top: -1px; left: 50%; width: 40px; height: 9px; margin-left: -20px; border-radius: 0 0 20px 20px; background: rgba(20, 14, 6, 0.6); }
.pt-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 2px solid rgba(43, 34, 19, 0.7); padding-bottom: 5px; margin-bottom: 8px; }
.pt-card-top span { font: 0.78rem var(--font-deco); }
.pt-card-top b { font: 700 0.95rem var(--font-stencil); letter-spacing: 0.24em; text-transform: uppercase; }
.pt-card-who { display: flex; gap: 12px; align-items: baseline; font-size: 1.05rem; }
.pt-no { font: 0.85rem var(--font-type); color: var(--violet); }
.pt-card-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; font: 0.62rem var(--font-type); letter-spacing: 0.2em; color: rgba(43, 34, 19, 0.6); }
.pt-card-rows span { border-bottom: 1px solid rgba(43, 34, 19, 0.4); padding-bottom: 30px; }
.pt-stamp {
  position: absolute;
  left: 18px;
  bottom: 18px;
  font: 1.15rem var(--font-type);
  letter-spacing: 0.12em;
  color: var(--violet);
  mix-blend-mode: multiply;
  filter: url(#ink-bleed);
  opacity: 0;
  white-space: pre;
}
.pt-stamp.out { left: calc(50% + 6px); }
.pt-stamp.bad { color: var(--stamp-red); }

/* The duty tag swings on its eyelet when it changes. */
@keyframes tag-swing { 0% { transform: rotate(2deg); } 30% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } 100% { transform: rotate(2deg); } }
.duty-tag.swing { animation: tag-swing 0.9s cubic-bezier(.3, .7, .4, 1); }