:root {
  --desk-dark: #4f3729;
  --desk-mid: #70503f;
  --paper: #f3ead2;
  --paper-warm: #e1d1ad;
  --ink: #211913;
  --ink-soft: #4a4039;
  --red: #9a3a2b;
  --blue: #4e6173;
  --gold: #b2873c;
  --line-gap: 5.1rem;
  --col-width: min(2.65vw, 1.18rem);
  --page-width: min(92vw, 46rem);
  --page-height: min(88vh, 48rem);
  --page-side-pad: 2rem;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(255, 232, 190, 0.16), transparent 28%),
    linear-gradient(180deg, #876451 0%, var(--desk-mid) 16%, var(--desk-dark) 100%);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

body {
  display: grid;
  place-items: center;
}

.desk {
  width: 100vw;
  height: 100vh;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  display: grid;
  place-items: center;
}

.paper-wrap {
  position: relative;
  width: var(--page-width);
  height: var(--page-height);
}

.paper-shadow {
  position: absolute;
  inset: 1rem 0 0 1rem;
  background: rgba(33, 25, 19, 0.24);
  filter: blur(18px);
  border-radius: 0.75rem;
}

.paper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 0.7rem;
  border: 1px solid rgba(49, 35, 24, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 18%),
    repeating-linear-gradient(
      180deg,
      rgba(110, 83, 53, 0.06) 0,
      rgba(110, 83, 53, 0.06) 2px,
      transparent 2px,
      transparent 26px
    ),
    linear-gradient(180deg, var(--paper) 0%, #efe0bb 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 -14px 30px rgba(145, 110, 69, 0.15);
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.paper::before {
  inset: 0;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.34), transparent 18%),
    radial-gradient(circle at 78% 74%, rgba(160, 112, 45, 0.08), transparent 24%);
  mix-blend-mode: screen;
}

.paper::after {
  inset: 0.8rem;
  border: 1px dashed rgba(122, 86, 52, 0.22);
}

.corner-note,
.folio,
.status-strip {
  position: absolute;
  z-index: 4;
}

.corner-note {
  top: 1.1rem;
  left: 1.15rem;
  max-width: 13rem;
  font-size: 0.88rem;
  line-height: 1.25;
  color: var(--ink-soft);
  font-style: italic;
}

.folio {
  top: 1rem;
  right: 1.15rem;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(33, 25, 19, 0.6);
}

.status-strip {
  left: 1.1rem;
  right: 1.1rem;
  bottom: 0.9rem;
  min-height: 2rem;
  display: flex;
  align-items: center;
  font-size: 0.94rem;
  color: rgba(33, 25, 19, 0.84);
}

.rows {
  position: absolute;
  inset: 4.5rem 2rem 3.5rem 2rem;
}

.row {
  position: relative;
  height: var(--line-gap);
}

.row::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: rgba(104, 76, 45, 0.14);
}

.token {
  position: absolute;
  top: 0.95rem;
  height: 1.9rem;
  padding-top: 0.2rem;
  padding-inline: 0;
  border: none;
  background: transparent;
  color: rgba(33, 25, 19, 0.76);
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(0.82rem, 2.2vw, 1rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-radius: 0.22rem;
  transition:
    transform 120ms ease,
    color 120ms ease,
    background-color 120ms ease,
    box-shadow 160ms ease,
    opacity 140ms ease;
}

.token.interactive {
  cursor: pointer;
}

.token.interactive:hover {
  transform: translateY(-1px);
}

.token.redacted {
  color: transparent;
  background: linear-gradient(180deg, #111 0%, #2e2620 100%);
  box-shadow: 0 0.18rem 0 #16110d;
}

.token.redacted.carved {
  box-shadow: 0 0.18rem 0 #16110d, inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.token.carbon {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2rem;
}

.token.fragile {
  outline: 1px dotted rgba(154, 58, 43, 0.8);
  outline-offset: 0.15rem;
}

.token.redacted.fragile.crumbling {
  animation: crumble 0.45s linear forwards;
}

@keyframes crumble {
  0% { transform: translateY(0) scaleX(1); opacity: 1; }
  45% { transform: translateY(0.06rem) scaleX(1.04); opacity: 1; }
  100% { transform: translateY(0.9rem) scaleX(0.85); opacity: 0.15; }
}

.start-shelf,
.goal-seal,
.clerk,
.splash {
  position: absolute;
}

.start-shelf {
  left: calc(2rem + 0 * var(--col-width));
  top: calc(4.5rem + 0.95rem + 1.95rem);
  width: calc(5.4 * var(--col-width));
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #70553c 0%, #4b3828 100%);
  box-shadow: 0 0.14rem 0 rgba(31, 21, 14, 0.55);
}

.goal-seal {
  width: calc(var(--goal-span, 4) * var(--col-width));
  height: 2.3rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 220, 180, 0.34), transparent 28%),
    radial-gradient(circle at center, #b3402f 0%, #862b21 72%, #5b1711 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 240, 210, 0.2),
    0 0.22rem 0 rgba(74, 26, 22, 0.5);
  color: rgba(255, 232, 216, 0.88);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.goal-seal.complete {
  animation: pulseSeal 0.8s ease-out;
}

@keyframes pulseSeal {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.clerk {
  z-index: 5;
  width: 1.2rem;
  height: 1.8rem;
  transform-origin: bottom center;
}

.clerk-body {
  position: absolute;
  left: 0.28rem;
  right: 0.28rem;
  bottom: 0;
  height: 1.15rem;
  border-radius: 0.25rem 0.25rem 0.14rem 0.14rem;
  background: linear-gradient(180deg, #3b4953 0%, #1f2a31 100%);
}

.clerk-hat {
  position: absolute;
  left: 0.12rem;
  right: 0.12rem;
  top: 0.1rem;
  height: 0.54rem;
  border-radius: 0.26rem;
  background: linear-gradient(180deg, #262626 0%, #0f0f10 100%);
}

.clerk.walking {
  animation: bob 0.32s linear infinite alternate;
}

@keyframes bob {
  from { transform: translateY(0); }
  to { transform: translateY(-0.08rem); }
}

.clerk.falling {
  animation: none;
}

.splash {
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50% 45% 58% 42%;
  background: rgba(58, 44, 32, 0.18);
  transform: scale(0);
  animation: splashOut 0.55s ease-out forwards;
}

@keyframes splashOut {
  0% { transform: scale(0.2); opacity: 0.95; }
  100% { transform: scale(1.9); opacity: 0; }
}

.replay-stamp {
  position: absolute;
  right: 1rem;
  bottom: 0.8rem;
  z-index: 6;
  padding: 0.7rem 0.95rem;
  border: none;
  border-radius: 999px;
  background: #7b2d22;
  color: #f7e7d4;
  font: inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.hidden {
  display: none;
}

.paper.finished .token {
  opacity: 0.92;
}

.paper.finished::before {
  background:
    radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 0.22), transparent 18%),
    radial-gradient(circle at 50% 56%, rgba(140, 30, 22, 0.12), transparent 24%);
}

@media (max-width: 720px), (max-height: 760px) {
  :root {
    --line-gap: 4.5rem;
    --page-width: min(96vw, 34rem);
    --page-height: min(94vh, 42rem);
    --page-side-pad: 1.1rem;
  }

  .rows {
    inset: 4.5rem 1.1rem 3.4rem 1.1rem;
  }

  .corner-note {
    max-width: 10rem;
    font-size: 0.8rem;
  }

  .status-strip {
    font-size: 0.84rem;
  }

  .start-shelf {
    left: calc(1.1rem + 0 * var(--col-width));
  }
}

@media (prefers-reduced-motion: reduce) {
  .token,
  .goal-seal,
  .clerk,
  .splash {
    transition: none;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}