/* Scam Likely: shared tokens and office materials.
   Materials: cubicle fabric, manila folders, green-bar printer paper,
   caller-ID LCDs, sticky notes, label-maker tape, rubber stamps. */

:root {
  --fabric: #56657c;
  --fabric-deep: #3d4859;
  --manila: #e9c98b;
  --manila-edge: #c9a462;
  --paper: #fbfaf3;
  --greenbar: #dcebd5;
  --beige: #ddd3bd;
  --beige-shade: #b6aa8e;
  --lcd: #b4c398;
  --lcd-ink: #1e2a14;
  --lcd-ghost: rgba(30, 42, 20, 0.1);
  --sticky: #ffe45c;
  --stamp-red: #cf3b28;
  --stamp-green: #2c7a47;
  --stamp-blue: #2f55a4;
  --tape: #1a1920;
  --ink: #1d1b22;
  --ink-soft: #4a4651;

  --font-lcd: 'Doto', 'VT323', ui-monospace, monospace;
  --font-type: 'Courier Prime', 'Courier New', ui-monospace, monospace;
  --font-label: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;

  --ease-slam: cubic-bezier(0.2, 1.6, 0.4, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; }

body {
  color: var(--ink);
  font-family: var(--font-type);
  background-color: var(--fabric);
  background-image:
    linear-gradient(to bottom, rgba(255, 255, 235, 0.13), rgba(255, 255, 235, 0) 38%),
    radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.6px),
    radial-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1.6px);
  background-size: 100% 100%, 7px 7px, 11px 11px;
  background-position: 0 0, 0 0, 3px 5px;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--sticky); outline-offset: 3px; }

/* ---------- LCD (caller ID) ---------- */
.bezel {
  background: linear-gradient(to bottom, #e6ddc9, var(--beige));
  border-radius: 14px;
  padding: 9px;
  box-shadow: 0 3px 0 var(--beige-shade), 0 14px 26px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.lcd {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 40%),
    var(--lcd);
  color: var(--lcd-ink);
  font-family: var(--font-lcd);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 6px;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.22), inset 0 0 22px rgba(0, 0, 0, 0.16);
  text-shadow: 1px 1px 0 var(--lcd-ghost);
}

/* ---------- label-maker tape (tactics) ---------- */
.tape {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: var(--tape);
  color: #f4f1ea;
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.78em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.18em 0.6em 0.16em;
  border-radius: 2px;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 3px rgba(0, 0, 0, 0.25);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  line-height: 1.2;
  vertical-align: middle;
}
.tape .ico { font-size: 1.05em; letter-spacing: 0; text-shadow: none; }
.tape.adlib { background: var(--stamp-blue); }

/* ---------- rubber stamps ---------- */
.stamp {
  display: inline-block;
  font-family: var(--font-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--stamp-red);
  border: 0.12em solid currentColor;
  border-radius: 0.14em;
  padding: 0.12em 0.36em 0.08em;
  transform: rotate(var(--tilt, -7deg));
  mix-blend-mode: multiply;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1.7 0 0 0 1.75'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  -1.7 0 0 0 1.75'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.stamp.green { color: var(--stamp-green); }
.stamp.blue { color: var(--stamp-blue); }
.stamp.slam { animation: slam 0.42s var(--ease-slam) both; }
@keyframes slam {
  0% { transform: scale(2.6) rotate(var(--tilt, -7deg)); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: scale(1) rotate(var(--tilt, -7deg)); opacity: 1; }
}

/* ---------- buttons: chunky desk-phone keys ---------- */
.key {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  background: linear-gradient(to bottom, #f1ebdd, var(--beige));
  border-radius: 10px;
  padding: 0.7em 1.3em 0.62em;
  box-shadow: 0 4px 0 var(--beige-shade), 0 8px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 #fff;
  transition: transform 0.06s, box-shadow 0.06s;
}
.key:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--beige-shade), 0 3px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 #fff; }
.key:disabled { opacity: 0.55; cursor: not-allowed; }
.key.red { background: linear-gradient(to bottom, #e9604b, var(--stamp-red)); color: #fff; box-shadow: 0 4px 0 #8f2416, 0 8px 14px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.key.red:active { box-shadow: 0 1px 0 #8f2416, 0 3px 6px rgba(0, 0, 0, 0.25); }

/* ---------- sticky note ---------- */
.sticky {
  background: var(--c, var(--sticky));
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12), 0 10px 14px -6px rgba(0, 0, 0, 0.35);
  transform: rotate(var(--r, -1deg));
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}