/* ========== THE BRASS CANARY — 1930s Art Deco Platformer ========== */

:root {
  --noir-black: #0a0908;
  --noir-ink: #1a1714;
  --cream: #ead8b1;
  --cream-bright: #f5e8c8;
  --cream-dim: #c9b88a;
  --gold: #d4a84b;
  --gold-bright: #e8c170;
  --gold-deep: #8a6a1f;
  --oxblood: #6b1a1a;
  --shadow: rgba(10, 9, 8, 0.85);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  background: #000;
  color: var(--cream);
  font-family: 'Limelight', 'Poiret One', serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

#root { width: 100vw; height: 100vh; }

/* ============ FILM REEL FRAME ============ */
.reel-frame {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.reel-strip {
  position: absolute;
  left: 0; right: 0;
  height: 38px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 10px;
  z-index: 50;
  pointer-events: none;
}
.reel-strip.top { top: 0; }
.reel-strip.bottom { bottom: 0; }

.sprocket {
  width: 22px; height: 22px;
  background: #1a1714;
  border-radius: 3px;
  border: 1px solid #2a2520;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6);
}

.stage-frame {
  position: relative;
  width: calc(100vw - 80px);
  height: calc(100vh - 100px);
  margin: 50px 40px;
  max-width: 100%;
}
@media (max-width: 768px) {
  .stage-frame {
    width: calc(100vw - 24px);
    height: calc(100vh - 60px);
    margin: 30px 12px;
  }
  .reel-strip { height: 22px; }
  .sprocket { width: 14px; height: 14px; }
  .deco-corner { width: 40px; height: 40px; }
  .title-card { padding: 24px 28px; }
  .title-main { font-size: 44px !important; }
  .title-sub { font-size: 11px !important; letter-spacing: 0.25em !important; }
  .title-presenting { font-size: 10px; letter-spacing: 0.4em; }
  .title-credits { font-size: 9px; letter-spacing: 0.2em; }
  .title-divider::before, .title-divider::after { width: 40px; }
  .gameover-stamp { font-size: 56px !important; padding: 12px 30px; }
  .intertitle { padding: 18px 24px; font-size: 15px; }
  .hud { top: 10px; left: 10px; right: 10px; gap: 6px; flex-wrap: wrap; }
  .hud-card { padding: 5px 12px 4px; font-size: 10px; }
  .hud-value { font-size: 13px; }
  .hud-label { font-size: 7px; }
  .hud-heart { width: 12px; height: 12px; }
  .neon-sign { font-size: 12px !important; padding: 5px 10px; }
  .controls-hint { display: none; }
}
  background: var(--noir-black);
  overflow: hidden;
  border: 2px solid #1f1c18;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,0.9),
    0 0 0 1px var(--gold-deep),
    0 0 60px rgba(0,0,0,0.9);
}

/* Deco corner ornaments inside the stage */
.deco-corner {
  position: absolute;
  width: 70px; height: 70px;
  pointer-events: none;
  z-index: 40;
  opacity: 0.85;
}
.deco-corner.tl { top: 8px; left: 8px; }
.deco-corner.tr { top: 8px; right: 8px; transform: scaleX(-1); }
.deco-corner.bl { bottom: 8px; left: 8px; transform: scaleY(-1); }
.deco-corner.br { bottom: 8px; right: 8px; transform: scale(-1, -1); }

/* ============ GAME CANVAS ============ */
.game-canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.world {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  will-change: transform;
}

/* Parallax layers */
.parallax {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  pointer-events: none;
}

/* ============ TUNNEL BACKGROUND ============ */
.tunnel-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 60%, rgba(212, 168, 75, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #050403 0%, #0a0908 35%, #100c08 65%, #050403 100%);
}

/* Tunnel arch repeating pattern */
.tunnel-arches {
  position: absolute;
  top: 0; bottom: 80px; left: 0;
  width: 100%;
  display: flex;
  overflow: visible;
}

.tunnel-arch {
  flex: 0 0 480px;
  height: 100%;
  position: relative;
  border-left: 1px solid rgba(212, 168, 75, 0.12);
  border-right: 1px solid rgba(212, 168, 75, 0.12);
}
.tunnel-arch::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 380px;
  height: 60%;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse 100% 100% at 50% 100%, rgba(212, 168, 75, 0.18) 0%, rgba(212, 168, 75, 0.04) 40%, transparent 70%);
  border-radius: 50% 50% 0 0 / 70% 70% 0 0;
  border: 2px solid rgba(212, 168, 75, 0.25);
  border-bottom: none;
}
.tunnel-arch::after {
  /* sunburst rays on each arch */
  content: '';
  position: absolute;
  top: 8%; left: 50%;
  width: 280px; height: 280px;
  transform: translateX(-50%);
  background:
    conic-gradient(from 0deg at 50% 100%,
      transparent 0deg, rgba(212, 168, 75, 0.06) 4deg, transparent 8deg,
      transparent 14deg, rgba(212, 168, 75, 0.06) 18deg, transparent 22deg,
      transparent 28deg, rgba(212, 168, 75, 0.06) 32deg, transparent 36deg,
      transparent 42deg, rgba(212, 168, 75, 0.06) 46deg, transparent 50deg,
      transparent 130deg, rgba(212, 168, 75, 0.06) 134deg, transparent 138deg,
      transparent 144deg, rgba(212, 168, 75, 0.06) 148deg, transparent 152deg,
      transparent 158deg, rgba(212, 168, 75, 0.06) 162deg, transparent 166deg,
      transparent 172deg, rgba(212, 168, 75, 0.06) 176deg, transparent 180deg);
}

/* ============ NEON SIGNS ============ */
.neon-sign {
  position: absolute;
  font-family: 'Limelight', serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-shadow:
    0 0 4px var(--gold-bright),
    0 0 10px var(--gold),
    0 0 20px rgba(212, 168, 75, 0.7),
    0 0 40px rgba(212, 168, 75, 0.4);
  border: 2px solid var(--gold);
  padding: 8px 18px;
  background: rgba(10, 9, 8, 0.6);
  box-shadow:
    0 0 12px rgba(212, 168, 75, 0.5),
    inset 0 0 8px rgba(212, 168, 75, 0.15);
  white-space: nowrap;
  animation: neon-flicker 4s infinite;
}
@keyframes neon-flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.4; }
  94% { opacity: 1; }
  96% { opacity: 0.6; }
  97% { opacity: 1; }
}

.neon-sign.red {
  color: #e8a070;
  text-shadow:
    0 0 4px #e8a070,
    0 0 10px #c8503a,
    0 0 20px rgba(200, 80, 58, 0.7);
  border-color: #c8503a;
  box-shadow: 0 0 12px rgba(200, 80, 58, 0.5);
}

/* ============ PLATFORMS / GROUND ============ */
.platform {
  position: absolute;
  background:
    repeating-linear-gradient(90deg,
      var(--noir-ink) 0px, var(--noir-ink) 28px,
      #15110d 28px, #15110d 30px),
    var(--noir-ink);
  border-top: 3px solid var(--gold);
  border-bottom: 1px solid #000;
  box-shadow:
    inset 0 6px 0 rgba(212, 168, 75, 0.15),
    inset 0 -8px 16px rgba(0,0,0,0.8),
    0 4px 0 rgba(0,0,0,0.6);
}
.platform::before {
  content: '';
  position: absolute;
  top: -3px; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    transparent 0,
    var(--gold-bright) 10%,
    var(--gold) 50%,
    var(--gold-bright) 90%,
    transparent 100%);
  box-shadow: 0 0 8px var(--gold);
}
.platform::after {
  /* deco zigzag stripe */
  content: '';
  position: absolute;
  top: 8px; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    -45deg,
    transparent 0, transparent 6px,
    rgba(212, 168, 75, 0.35) 6px, rgba(212, 168, 75, 0.35) 9px,
    transparent 9px, transparent 15px,
    rgba(212, 168, 75, 0.35) 15px, rgba(212, 168, 75, 0.35) 18px);
}

/* Track rails */
.rails {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 80px;
  background:
    linear-gradient(180deg, transparent 0%, transparent 30%, #0d0a07 30%, #0d0a07 100%);
  border-top: 2px solid rgba(212, 168, 75, 0.4);
}
.rail-tie {
  position: absolute;
  bottom: 12px;
  width: 60px; height: 14px;
  background: #1a1410;
  border: 1px solid #0a0805;
  box-shadow: inset 0 1px 0 rgba(212, 168, 75, 0.1);
}
.rail-line {
  position: absolute;
  left: 0; width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #4a3920, #d4a84b, #4a3920);
  box-shadow: 0 0 4px rgba(212, 168, 75, 0.5);
}

/* ============ DECO PILLARS ============ */
.pillar {
  position: absolute;
  width: 60px;
  background:
    linear-gradient(90deg,
      #0a0805 0%, #1a1410 20%,
      var(--gold-deep) 49%, var(--gold) 50%, var(--gold-deep) 51%,
      #1a1410 80%, #0a0805 100%);
  border-top: 4px solid var(--gold);
  border-bottom: 4px solid var(--gold);
  box-shadow:
    0 0 20px rgba(212, 168, 75, 0.3),
    inset 0 0 30px rgba(0,0,0,0.6);
}
.pillar::before, .pillar::after {
  content: '';
  position: absolute;
  left: -10px; right: -10px;
  height: 14px;
  background: linear-gradient(180deg, var(--gold-deep), var(--gold), var(--gold-deep));
  box-shadow: 0 0 10px rgba(212, 168, 75, 0.5);
}
.pillar::before { top: 0; clip-path: polygon(0 100%, 100% 100%, 90% 0, 10% 0); }
.pillar::after { bottom: 0; clip-path: polygon(10% 100%, 90% 100%, 100% 0, 0 0); }

/* ============ COINS (tokens) ============ */
.coin {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--gold-bright), var(--gold) 50%, var(--gold-deep) 100%);
  border: 2px solid var(--gold-deep);
  box-shadow:
    0 0 12px rgba(212, 168, 75, 0.7),
    inset -2px -2px 4px rgba(0,0,0,0.4);
  animation: coin-spin 1.4s ease-in-out infinite;
}
.coin::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid var(--gold-deep);
  border-radius: 50%;
  background:
    linear-gradient(0deg, transparent 45%, var(--gold-deep) 47%, var(--gold-deep) 53%, transparent 55%),
    linear-gradient(90deg, transparent 45%, var(--gold-deep) 47%, var(--gold-deep) 53%, transparent 55%);
}
@keyframes coin-spin {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(0.2); }
}
.coin.collected {
  animation: coin-collect 0.4s ease-out forwards;
}
@keyframes coin-collect {
  to { transform: translateY(-40px) scale(1.5); opacity: 0; }
}

/* ============ HERO — FLAPPER ============ */
.hero {
  position: absolute;
  width: 36px; height: 56px;
  z-index: 20;
  will-change: transform;
}
.hero-body { position: absolute; inset: 0; }

.hero.facing-left .hero-body { transform: scaleX(-1); }

.hero.running .legs {
  animation: leg-run 0.32s steps(4) infinite;
}
.hero.jumping .legs {
  animation: none;
  transform: translateY(-2px) rotate(-8deg);
}

@keyframes leg-run {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-1px) skewX(-8deg); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-1px) skewX(8deg); }
}

/* ============ CLOCKWORK ENEMIES ============ */
.enemy {
  position: absolute;
  width: 40px; height: 40px;
  z-index: 15;
  will-change: transform;
}
.enemy .gear {
  animation: gear-spin 2s linear infinite;
  transform-origin: center;
}
.enemy .gear.reverse { animation: gear-spin 2.5s linear infinite reverse; }
@keyframes gear-spin {
  to { transform: rotate(360deg); }
}
.enemy.dying {
  animation: enemy-die 0.4s ease-out forwards;
}
@keyframes enemy-die {
  to { transform: translateY(60px) rotate(180deg); opacity: 0; }
}

/* ============ HUD ============ */
.hud {
  position: absolute;
  top: 18px; left: 18px; right: 18px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 60;
  pointer-events: none;
  font-family: 'Limelight', serif;
}

.hud-card {
  background: linear-gradient(180deg, #1a1410, #0a0805);
  border: 2px solid var(--gold);
  padding: 8px 18px 6px;
  position: relative;
  color: var(--cream-bright);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 13px;
  box-shadow: 0 0 0 2px var(--noir-black), 0 4px 16px rgba(0,0,0,0.8);
}
.hud-card::before, .hud-card::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px; height: 10px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
  border: 1px solid var(--noir-black);
}
.hud-card::before { left: -7px; }
.hud-card::after { right: -7px; }

.hud-label {
  display: block;
  font-size: 9px;
  color: var(--gold-bright);
  letter-spacing: 0.3em;
  margin-bottom: 2px;
}
.hud-value {
  display: block;
  font-size: 18px;
  letter-spacing: 0.15em;
}

.hud-hearts { display: flex; gap: 6px; margin-top: 2px; }
.hud-heart {
  width: 16px; height: 16px;
  background: var(--oxblood);
  clip-path: polygon(50% 100%, 0 35%, 0 15%, 25% 0, 50% 20%, 75% 0, 100% 15%, 100% 35%);
  filter: drop-shadow(0 0 4px rgba(200, 80, 58, 0.6));
}
.hud-heart.empty {
  background: transparent;
  border: 0;
  filter: none;
  opacity: 0.3;
  background: #2a1818;
}

/* ============ TITLE CARD / SCREENS ============ */
.screen-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at center, rgba(10,9,8,0.4) 0%, rgba(0,0,0,0.95) 100%);
}

.title-card {
  text-align: center;
  color: var(--cream-bright);
  position: relative;
  padding: 40px 80px;
  max-width: 90%;
}

.title-card-frame {
  position: absolute;
  inset: 0;
  border: 3px double var(--gold);
  box-shadow:
    0 0 0 6px var(--noir-black),
    0 0 0 8px var(--gold),
    inset 0 0 40px rgba(212, 168, 75, 0.15);
}

.deco-burst {
  display: block;
  margin: 0 auto 16px;
  width: 120px;
  height: 60px;
}

.title-presenting {
  font-size: 14px;
  letter-spacing: 0.6em;
  color: var(--gold-bright);
  margin-bottom: 18px;
  text-transform: uppercase;
}

.title-main {
  font-family: 'Limelight', serif;
  font-size: 76px;
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: var(--cream-bright);
  text-shadow:
    0 0 20px rgba(212, 168, 75, 0.4),
    0 4px 0 var(--gold-deep),
    0 6px 20px rgba(0,0,0,0.9);
  margin-bottom: 8px;
}

.title-sub {
  font-size: 16px;
  letter-spacing: 0.4em;
  color: var(--gold-bright);
  text-transform: uppercase;
  margin-bottom: 30px;
}

.title-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px auto;
  color: var(--gold);
}
.title-divider::before, .title-divider::after {
  content: '';
  width: 80px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.title-press {
  font-size: 13px;
  letter-spacing: 0.4em;
  color: var(--cream-dim);
  margin-top: 24px;
  text-transform: uppercase;
  animation: blink 1.4s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.title-credits {
  margin-top: 30px;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--cream-dim);
  text-transform: uppercase;
  line-height: 2;
}

/* Intertitle (silent-film quote card) */
.intertitle {
  background: linear-gradient(180deg, #1a1410, #0a0805);
  border: 2px solid var(--gold);
  padding: 30px 50px;
  text-align: center;
  font-family: 'Limelight', serif;
  letter-spacing: 0.1em;
  color: var(--cream-bright);
  font-size: 22px;
  max-width: 600px;
  position: relative;
}
.intertitle::before, .intertitle::after {
  content: '';
  position: absolute;
  left: 0; right: 0; height: 8px;
  background:
    repeating-linear-gradient(90deg,
      var(--gold) 0, var(--gold) 8px,
      transparent 8px, transparent 14px);
}
.intertitle::before { top: -10px; }
.intertitle::after { bottom: -10px; }

/* ============ EFFECTS LAYERS ============ */
.fx-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 70;
}

/* Film grain */
.grain {
  position: absolute;
  inset: -20%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92  0 0 0 0 0.85  0 0 0 0 0.69  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
  opacity: 0.18;
  mix-blend-mode: overlay;
  animation: grain-shift 0.18s steps(6) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0,0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-1%, 1%); }
  80% { transform: translate(3%, 2%); }
  100% { transform: translate(0,0); }
}

/* Vignette */
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.85) 100%);
  pointer-events: none;
}

/* Scratches / film artifacts */
.scratches {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, transparent 0%, transparent 23%, rgba(234,216,177,0.05) 23.1%, rgba(234,216,177,0.05) 23.3%, transparent 23.4%),
    linear-gradient(90deg, transparent 0%, transparent 67%, rgba(234,216,177,0.03) 67.05%, rgba(234,216,177,0.03) 67.2%, transparent 67.3%);
  animation: scratch-shift 0.7s steps(3) infinite;
  opacity: 0.7;
}
@keyframes scratch-shift {
  0% { transform: translateX(0); }
  33% { transform: translateX(40%); }
  66% { transform: translateX(-30%); }
  100% { transform: translateX(0); }
}

/* Steam / smoke */
.smoke-puff {
  position: absolute;
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(234,216,177,0.18) 0%, transparent 60%);
  border-radius: 50%;
  animation: smoke-rise 6s linear infinite;
  pointer-events: none;
}
@keyframes smoke-rise {
  0% { transform: translateY(20px) scale(0.5); opacity: 0; }
  20% { opacity: 0.9; }
  100% { transform: translateY(-200px) scale(2); opacity: 0; }
}

/* Rain */
.rain-drop {
  position: absolute;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, transparent, rgba(234,216,177,0.4));
  animation: rain-fall linear infinite;
}
@keyframes rain-fall {
  to { transform: translateY(120vh); }
}

/* Light shafts from "ceiling" */
.light-shaft {
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  background: linear-gradient(180deg, rgba(212, 168, 75, 0.18) 0%, transparent 70%);
  transform-origin: top center;
  transform: rotate(8deg);
  filter: blur(2px);
  pointer-events: none;
}

/* ============ GAME OVER CARD ============ */
.gameover-stamp {
  font-family: 'Limelight', serif;
  font-size: 96px;
  letter-spacing: 0.1em;
  color: var(--oxblood);
  text-shadow:
    0 0 0 2px var(--oxblood),
    -2px -2px 0 #4a0e0e, 2px 2px 0 #8a2828,
    0 0 30px rgba(107, 26, 26, 0.6);
  border: 6px double var(--oxblood);
  padding: 16px 60px;
  transform: rotate(-4deg);
  background: rgba(10, 9, 8, 0.7);
}

/* ============ SHATTER FLASH ============ */
.flash {
  position: absolute;
  inset: 0;
  background: var(--cream-bright);
  pointer-events: none;
  z-index: 90;
  animation: flash 0.18s ease-out forwards;
}
@keyframes flash {
  0% { opacity: 0.7; }
  100% { opacity: 0; }
}

/* ============ TOUCH CONTROLS ============ */
.touch-controls {
  position: absolute;
  bottom: 20px; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 65;
  pointer-events: none;
}
.touch-pad {
  display: flex;
  gap: 14px;
  pointer-events: auto;
}
.touch-btn {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(26,20,16,0.85), rgba(10,9,8,0.85));
  border: 2px solid var(--gold);
  color: var(--gold-bright);
  font-family: 'Limelight', serif;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 2px var(--noir-black),
    0 4px 12px rgba(0,0,0,0.8),
    inset 0 0 12px rgba(212,168,75,0.15);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  transition: transform 0.06s, background 0.06s;
}
.touch-btn:active, .touch-btn.active {
  transform: scale(0.92);
  background: linear-gradient(180deg, rgba(212,168,75,0.3), rgba(138,106,31,0.3));
  box-shadow:
    0 0 0 2px var(--noir-black),
    inset 0 0 18px rgba(212,168,75,0.5);
}
.touch-btn.jump {
  width: 84px; height: 84px;
  font-size: 22px;
  letter-spacing: 0.05em;
}

/* Hide touch on hover-capable devices */
@media (hover: hover) and (pointer: fine) {
  .touch-controls { display: none; }
}

/* ============ INSTRUCTIONS HINT ============ */
.controls-hint {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  z-index: 60;
  pointer-events: none;
}
.key-cap {
  background: linear-gradient(180deg, var(--cream-bright), var(--cream-dim));
  color: var(--noir-black);
  border: 2px solid var(--gold-deep);
  padding: 4px 10px;
  font-family: 'Limelight', serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  border-radius: 3px;
  box-shadow: 0 2px 0 var(--gold-deep), 0 4px 8px rgba(0,0,0,0.6);
  text-transform: uppercase;
}