@font-face {
  font-family: 'DS-Digital';
  src: url('./font/ds_digital/DS-DIGI.TTF') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* =================== Root tokens =================== */
:root{
  /* cabinet + palette */
  --cabinet-navy:#254765;
  --cabinet-navy-2:#1a324a;
  --panel-1:#eef2f6;   --panel-2:#cfd7df;   --panel-3:#9aa6b2;
  --sign-bg:#f6fafc;   --brand-blue:#1a4c74;

  --cream:#fff1d8; --teal:#13a7be; --red:#d65845; --green:#2aa562;
  --navy:#113350; --orange:#ea783a; --sand:#e8d7b4; --blue:#2f7fd3;

  /* machine natural width; fitter scales from here */
  --vm-width: 580px;

  /* set by JS fitter */
  --vm-scale: 1;
  --vm-x: 0px;
  --vm-y: 0px;

  /* fitter knobs */
  --fit-margin: 20px;        /* breathing room around machine */
  --fit-nudge-y: 0px;        /* drop a little on desktop so legs feel grounded */
  --fit-scale-mult: 1;       /* extra multiplier (we shrink on mobile) */

  --base-font: 16px;
}

/* =================== Page layout =================== */
html, body { height:100%; margin:0; overflow:hidden; }
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:#0f2233;
  background-image: url("./public/web-assets/office.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  font-size: var(--base-font);
}

/* anchor to viewport so translate() is absolute */
.vm { min-height:100svh; display:block; overflow:hidden; }
.vm__stack{
  position: fixed;
  top: 0; left: 0;
  width: var(--vm-width);
  display: grid;
  gap: 6px;
  transform: translate(var(--vm-x), var(--vm-y)) scale(var(--vm-scale));
  transform-origin: top left;
  will-change: transform;
}

/* =================== Machine visuals =================== */
.vm__cabinet {
  border-radius:18px 18px 0 0 !important;
  background:linear-gradient(180deg,var(--cabinet-navy),var(--cabinet-navy-2));
  box-shadow:0 26px 60px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.55);
  padding:24px 30px 50px;
  position:relative;
  filter:saturate(.98) contrast(.98);
}

/* subtle edges */
.vm__cabinet::before,
.vm__cabinet::after{
  content:"";
  position:absolute;
  top:8px; bottom:8px;
  width:8px; pointer-events:none; border-radius:6px;
}
.vm__cabinet::before{ left:6px;  background:linear-gradient(90deg, rgba(255,255,255,.06), transparent 80%); }
.vm__cabinet::after { right:6px; background:linear-gradient(270deg, rgba(0,0,0,.12), transparent 80%); }

/* sign */
.vm__sign { padding:0 4px 16px; }
.vm__sign-inner {
  height:96px; border-radius:12px;
  background:linear-gradient(180deg,var(--sign-bg),#eaf0f4);
  border:2px solid #a3b1be;
  box-shadow:inset 0 1px 0 #fff, 0 10px 26px rgba(0,0,0,.4);
  display:grid; place-items:center; text-align:center;
}
.vm__brand { margin:10px 0 2px; font-family:Allura,"Playfair Display",serif; font-size:56px; color:var(--brand-blue); text-shadow:0 1px 0 #fff; }
.vm__motto { margin:-20px 0 8px; font-weight:800; color:#1d4667; letter-spacing:.02em; }

/* ticker */
.vm__ticker {
  height:34px;
  margin:0 0 12px 0;
  border-radius:6px;
  background:#0b0b0c;
  border:1px solid #16181b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.4);
  position:relative; overflow:hidden;
}
.vm__ticker-text {
  position:absolute; top:0; left:0; white-space:nowrap; will-change:transform;
  color:#ff3b3b;
  letter-spacing:.04em;
  line-height:34px;
  font-size: clamp(16px, 3.4vw, 26px);   /* smaller by default; scales with viewport */
  padding:0; margin:0; text-transform:uppercase;
  font-family:'DS-Digital', sans-serif;
  text-shadow:0 0 1px #ff3b3b, 0 0 3px #ff3b3b, 0 0 6px #ff5b5b;
}

/* panel + grid */
.vm__panel {
  border-radius:10px;
  padding:18px 14px 14px;
  background:linear-gradient(180deg,var(--panel-1),var(--panel-2));
  border:2px solid var(--panel-3);
  box-shadow:inset 0 0 0 1px #ffffffaa, 0 14px 34px rgba(0,0,0,.32);
}
.vm__grid { display:grid; gap:14px; }
.vm__grid--2col { grid-template-columns:repeat(2,1fr); }

/* buttons */
.vm__btn--cream  { --btnBase:#f3e0bd; }
.vm__btn--teal   { --btnBase:#19a9bf; }
.vm__btn--red    { --btnBase:#d56754; }
.vm__btn--green  { --btnBase:#33a86b; }
.vm__btn--navy   { --btnBase:#1f4462; }
.vm__btn--orange { --btnBase:#eb824b; }
.vm__btn--sand   { --btnBase:#e3cfa6; }
.vm__btn--blue   { --btnBase:#3e86d6; }

.vm__btn {
  position:relative; display:block; height:104px; border-radius:12px; text-decoration:none; outline:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 35%) padding-box,
    linear-gradient(180deg, color-mix(in oklab, var(--btnBase) 88%, black 12%),
                           color-mix(in oklab, var(--btnBase) 78%, black 22%)) border-box;
  border:1px solid color-mix(in oklab, var(--btnBase) 35%, black 65%);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.10), inset 0 -2px 0 rgba(0,0,0,.28), 0 10px 22px rgba(0,0,0,.45);
  padding:6px;
}
.vm__btn::before {
  content:""; position:absolute; inset:3px; border-radius:10px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 0 2px rgba(0,0,0,.35);
  pointer-events:none;
}
.vm__btn span {
  position:relative; z-index:1; display:grid; place-items:center; height:100%; border-radius:8px;
  color:#fff; font-weight:900; font-size:22px; letter-spacing:.015em; text-shadow:0 1px 0 rgba(0,0,0,.5);
  transform:translateY(-2px);
  filter:saturate(1.15) brightness(1.08);
  transition:transform 0.1s cubic-bezier(0.2, 0.9, 0.3, 1.4), filter 0.15s ease, box-shadow .12s ease;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3), inset 0 -3px 8px rgba(0,0,0,.45), 0 4px 8px rgba(0,0,0,.4);
}
/* faces */
.vm__btn--cream  span{ color:#1c2730; text-shadow:none; background:linear-gradient(180deg,#fff2db, color-mix(in oklab, var(--btnBase) 100%, black 6%)); }
.vm__btn--teal   span{ background:linear-gradient(180deg, color-mix(in oklab, var(--btnBase) 115%, white 10%), var(--btnBase)); }
.vm__btn--red    span{ background:linear-gradient(180deg, #e88b78, var(--btnBase)); }
.vm__btn--green  span{ background:linear-gradient(180deg, #69d39b, var(--btnBase)); }
.vm__btn--navy   span{ background:linear-gradient(180deg, #2b4e70, var(--btnBase)); }
.vm__btn--orange span{ background:linear-gradient(180deg, #ffae7c, var(--btnBase)); }
.vm__btn--sand   span{ color:#1c2730; text-shadow:none; background:linear-gradient(180deg, #ffe5b6, var(--btnBase)); }
.vm__btn--blue   span{ background:linear-gradient(180deg, #6ba9ec, var(--btnBase)); }

/* Lower Section */
.vm__lower {
  display: grid;
  grid-template-columns: 1fr auto 24px; /* extra right gutter */
  align-items: center;
  justify-items: center;
  padding: 18px 20px 14px;
  position: relative;
}

.vm__bill-img { width:min(360px, 85%); object-fit:contain; justify-self:center; transform: translateX(81px); }
.vm__coin-img {
  width: 90px;
  height: auto;
  border-radius: 8px;
  justify-self: end;
  margin-right: 32px;    /* moved further right */
  position: relative;
  right: -85px;          /* tiny nudge right without affecting bill */
}
/* legs image wrapper */
.vm__below{
  position: relative;
  margin-top:-8px; margin-bottom:0;
  width:101%; right:42px;
}
.vm__below img{ display:block; width:100%; max-width:100%; height:auto; object-fit:cover; border-radius:0 0 12px 12px; }

/* interactivity */
.vm__btn:hover span, .vm__btn:focus-visible span {
  transform:translateY(-1px);
  filter:saturate(1.05) brightness(1.02);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -2px 6px rgba(0,0,0,.4), 0 6px 10px rgba(0,0,0,.45);
}
.vm__btn:active span {
  transform:translateY(3px) scale(0.94);
  filter:saturate(0.9) brightness(0.92);
  box-shadow: inset 0 6px 14px rgba(0,0,0,.30), inset 0 -2px 3px rgba(255,255,255,.20), 0 2px 4px rgba(0,0,0,.90);
}
.vm__btn:focus-visible{ outline:3px solid #ffda7a; outline-offset:3px }

/* =================== Responsive tweaks =================== */

/* Phones: shrink more, smaller ticker */
@media (max-aspect-ratio: 9/10){
  :root{
    --fit-margin: 20px;
    --fit-scale-mult: 0.87;
  --fit-nudge-y: 63px;
  }
  body{
    background-image:url("./public/web-assets/office-phone.png");
    background-position: center;
    background-size: cover;
  }
  .vm__ticker{ height:26px; }
  .vm__ticker-text{ line-height:26px; font-size: clamp(14px, 4vw, 18px); }
}

/* Desktop: center + slight drop so legs feel grounded */
@media (min-width: 1024px){
  :root{ --fit-nudge-y: 24px; }
}