:root {
  --acid: #a9ff66;
  --lcd: #79ff49;
  --amber: #ffd250;
  --chrome-1: #f0f1f4;
  --chrome-2: #9a9ba1;
  --chrome-3: #50515a;
  --ink: #101115;
  --purple: #241659;
  --purple-2: #6a62cb;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: #fff;
  font-family: "Space Mono", monospace;
  background-color: #d7aa45;
  background-image:
    linear-gradient(rgba(254, 208, 87, .05), rgba(103, 56, 12, .08)),
    url("doge-bg.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.03) 0 21%, transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.35));
}

.crt {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  inset: 0;
  opacity: .11;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.35) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 54px 18px 48px;
}

.brand {
  text-align: center;
  margin-bottom: 22px;
  filter: drop-shadow(0 7px 0 rgba(50,24,0,.35));
}

.micro-copy {
  display: inline-block;
  margin-bottom: 7px;
  padding: 5px 8px 4px;
  font: 400 9px/1 "Press Start 2P", monospace;
  color: #fff9bf;
  letter-spacing: .08em;
  background: #111;
  border: 2px solid #f7d267;
  box-shadow: 3px 3px 0 #562f0a;
}

.logo {
  position: relative;
  margin: 0;
  font-family: "Archivo Black", Impact, sans-serif;
  font-size: clamp(76px, 15vw, 178px);
  line-height: .8;
  letter-spacing: -.07em;
  color: #ffd34e;
  -webkit-text-stroke: 5px #160e06;
  paint-order: stroke fill;
  text-shadow:
    0 3px 0 #fff8b9,
    0 8px 0 #d58a17,
    0 12px 0 #73420d,
    7px 15px 0 rgba(0,0,0,.72);
  transform: skew(-5deg) rotate(-1deg);
}

.logo::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.45);
  transform: translateY(-2px);
  pointer-events: none;
}

.tagline {
  display: inline-block;
  margin-top: 20px;
  padding: 7px 11px;
  font: 400 clamp(9px, 1.7vw, 12px)/1.2 "Press Start 2P", monospace;
  color: #16110b;
  text-transform: uppercase;
  background: rgba(255,243,184,.93);
  border: 3px solid #1a1208;
  box-shadow: 5px 5px 0 rgba(38,18,0,.72);
  transform: rotate(.8deg);
}

.winamp {
  width: min(560px, 96vw);
  color: #121212;
  border: 2px solid #0b0b0f;
  background: linear-gradient(135deg, #dfdfe3 0%, #85868f 26%, #cfd0d4 48%, #73747c 74%, #c8c9cd 100%);
  box-shadow:
    0 0 0 2px #dbdce0,
    0 0 0 4px #17171c,
    13px 16px 0 rgba(27,14,0,.58),
    0 24px 55px rgba(0,0,0,.35);
}

.winamp-titlebar {
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px 0 9px;
  color: #fff;
  font: 400 10px/1 "Press Start 2P", monospace;
  letter-spacing: .05em;
  border-bottom: 2px solid #08080b;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.13) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #15124b, #554fb5 48%, #111043);
  text-shadow: 1px 1px 0 #000;
}

.title-left { display: flex; gap: 8px; align-items: center; }
.bolt { color: #d0ff66; font-size: 10px; }
.window-buttons { display: flex; gap: 3px; }
.window-buttons span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 16px;
  font: 700 10px/1 Arial, sans-serif;
  color: #111;
  text-shadow: none;
  background: linear-gradient(#efeff2, #888a91);
  border: 1px solid #1c1c22;
}

.winamp-inner { padding: 11px 12px 12px; }
.top-grid { display: grid; grid-template-columns: 112px 1fr; gap: 9px; }

.timer {
  display: grid;
  place-items: center;
  min-height: 82px;
  color: var(--lcd);
  font-family: "Press Start 2P", monospace;
  font-size: 27px;
  letter-spacing: -3px;
  background: #070a08;
  border: 3px inset #787981;
  box-shadow: inset 0 0 17px rgba(86,255,71,.14);
  text-shadow: 0 0 8px rgba(102,255,79,.65);
}

.display {
  min-width: 0;
  height: 82px;
  padding: 7px 9px;
  overflow: hidden;
  background: #080b08;
  border: 3px inset #777982;
  box-shadow: inset 0 0 18px rgba(72,255,62,.11);
}

.display-topline {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: #8dff62;
  font: 700 11px/1 "Space Mono", monospace;
}
.display-topline small { color: #79af6e; font-size: 7px; margin-right: 5px; }
.display-topline .mono { margin-left: auto; font-size: 8px; }
.marquee {
  margin-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  color: #9dff6a;
  font: 700 11px/1.2 "Press Start 2P", monospace;
  text-shadow: 0 0 6px rgba(113,255,83,.55);
}
.marquee span { display: inline-block; min-width: 100%; }

.spectrum {
  height: 29px;
  margin-top: 5px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.spectrum i {
  flex: 1;
  max-width: 8px;
  min-width: 3px;
  height: 35%;
  background: linear-gradient(to top, #61ff45 0 52%, #ecff55 52% 76%, #ff765b 76%);
  opacity: .88;
  transform-origin: bottom;
  animation: bounce .64s steps(3,end) infinite alternate;
}
.spectrum i:nth-child(2n) { animation-duration: .41s; height: 70%; }
.spectrum i:nth-child(3n) { animation-duration: .78s; height: 48%; }
.spectrum i:nth-child(4n) { animation-duration: .53s; height: 92%; }
.spectrum.paused i { animation-play-state: paused; transform: scaleY(.16); opacity: .45; }
@keyframes bounce { from { transform: scaleY(.24); } to { transform: scaleY(1); } }

.seek-row {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 8px;
  align-items: center;
  margin-top: 9px;
  font: 700 10px/1 "Space Mono", monospace;
}
.seek-row span:last-child { text-align: right; }

input[type="range"] { accent-color: #5147a5; }
.metal-slider { width: 100%; }

.knobs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.mini-control {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px;
  align-items: center;
  font: 700 9px/1 "Press Start 2P", monospace;
}
.mini-control input { min-width: 0; width: 100%; }
.status-lights { display: flex; align-items: center; gap: 5px; font: 700 7px/1 "Press Start 2P", monospace; }
.status-lights b { width: 7px; height: 7px; background: #49f03d; border: 1px solid #17420f; box-shadow: 0 0 5px #7dff75; }
.status-lights b:nth-child(2) { background: #f6e84c; box-shadow: 0 0 5px #fff26d; }
.tiny-switches { display: flex; gap: 4px; }
.tiny-switches span {
  padding: 4px 5px;
  font: 400 7px/1 "Press Start 2P", monospace;
  background: #b9bac1;
  border: 1px solid #111;
  box-shadow: inset 1px 1px #ededee, inset -1px -1px #6e6e73;
}

.transport-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 44px;
  gap: 6px;
  margin-top: 11px;
}
.transport, .eject {
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #101014;
  font: 900 13px/1 Arial, sans-serif;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(#efeff2 0%, #bdbec3 48%, #85868d 51%, #bfc0c4 100%);
  border: 1px solid #0d0d10;
  box-shadow: inset 2px 2px #fff, inset -2px -2px #5e5f66, 1px 1px 0 #18181c;
}
.transport:hover, .eject:hover { filter: brightness(1.08); }
.transport:active, .eject:active { box-shadow: inset 2px 2px #5e5f66, inset -2px -2px #fff; transform: translate(1px, 1px); }
.main-play { color: #243c13; }
#audioUpload { display: none; }

.playlist-strip {
  margin-top: 9px;
  display: grid;
  grid-template-columns: 32px 1fr 20px;
  align-items: center;
  gap: 5px;
  padding: 8px 8px 7px;
  color: #80ff54;
  background: #080b08;
  border: 2px inset #707078;
  font: 400 8px/1.2 "Press Start 2P", monospace;
  text-shadow: 0 0 5px rgba(120,255,88,.5);
}
.playlist-strip strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 400; }
.playlist-strip em { text-align: right; color: #f7ff5a; font-style: normal; }

.link-dock {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.dock-btn {
  appearance: none;
  min-width: 152px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 15px;
  color: #15100b;
  text-decoration: none;
  font: 400 10px/1 "Press Start 2P", monospace;
  cursor: pointer;
  background: #ffe37c;
  border: 3px solid #160f08;
  box-shadow: 5px 5px 0 #4b2a0a;
  transform: rotate(-.5deg);
}
.dock-btn:nth-child(2) { transform: rotate(.6deg); }
.dock-btn:hover { background: #fff2a9; transform: translateY(-2px) rotate(-.5deg); }
.dock-btn:nth-child(2):hover { transform: translateY(-2px) rotate(.6deg); }
.dock-btn:active { box-shadow: 2px 2px 0 #4b2a0a; transform: translate(3px,3px); }
.dock-icon { font-family: Arial, sans-serif; font-size: 16px; }

.ca-readout {
  max-width: min(620px, 94vw);
  margin-top: 14px;
  padding: 7px 10px;
  color: #fff5bb;
  font: 400 8px/1.4 "Press Start 2P", monospace;
  text-align: center;
  word-break: break-all;
  background: rgba(17,17,17,.86);
  border: 2px solid rgba(255,226,118,.85);
  box-shadow: 3px 3px 0 rgba(57,31,7,.7);
}

.sparkle {
  position: fixed;
  z-index: 2;
  pointer-events: none;
  color: #fff7aa;
  font-family: serif;
  text-shadow: 0 0 8px #fff2a5, 2px 3px 0 rgba(68,36,0,.45);
  animation: twinkle 1.8s ease-in-out infinite alternate;
}
.sparkle-a { left: 8vw; top: 14vh; font-size: 37px; transform: rotate(18deg); }
.sparkle-b { right: 9vw; top: 25vh; font-size: 28px; animation-delay: .5s; }
.sparkle-c { right: 13vw; bottom: 11vh; font-size: 42px; animation-delay: .9s; }
@keyframes twinkle { from { opacity: .25; transform: scale(.72) rotate(-8deg); } to { opacity: 1; transform: scale(1.1) rotate(10deg); } }

@media (max-width: 640px) {
  body { background-attachment: scroll; }
  .stage { justify-content: flex-start; padding-top: 40px; }
  .logo { -webkit-text-stroke-width: 3px; text-shadow: 0 2px 0 #fff8b9, 0 6px 0 #d58a17, 0 9px 0 #73420d, 5px 11px 0 rgba(0,0,0,.72); }
  .top-grid { grid-template-columns: 86px 1fr; }
  .timer { font-size: 20px; letter-spacing: -3px; }
  .display-topline .mono { display: none; }
  .knobs-row { grid-template-columns: 1fr auto; }
  .status-lights { display: none; }
  .transport-row { gap: 4px; grid-template-columns: repeat(4, 1fr) 39px; }
  .transport, .eject { height: 36px; }
  .sparkle { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}

/* DOGEAMP refresh: keep the original layout, swap the Windows/chrome feel for Doge gold */
:root {
  --doge-gold: #f6c84c;
  --doge-gold-2: #d99a22;
  --doge-cream: #fff1bd;
  --doge-brown: #3a2108;
  --doge-brown-2: #6e4210;
  --doge-screen: #171108;
  --doge-lcd: #ffd95d;
}

.winamp {
  width: min(520px, 94vw);
  border: 2px solid #3b2108;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 28%),
    linear-gradient(135deg, #ffe9a5 0%, #d99a22 38%, #f5c95f 62%, #b97812 100%);
  box-shadow:
    0 0 0 2px #fff1bd,
    0 0 0 4px #5d3509,
    10px 13px 0 rgba(51,27,3,.48),
    0 20px 42px rgba(0,0,0,.28);
}

.winamp-titlebar {
  height: 32px;
  color: #2b1805;
  border-bottom: 2px solid #5a3308;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 48%),
    linear-gradient(90deg, #ffe585, #efb82f 52%, #d98d16);
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

.title-left { font-weight: 700; }
.bolt {
  color: #8d5310;
  font-size: 9px;
  text-shadow: 0 0 7px #fff1a8;
}

.window-buttons {
  gap: 5px;
}
.window-buttons span {
  width: auto;
  min-width: 40px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  color: #4d2a06;
  font: 700 7px/1 "Press Start 2P", monospace;
  background: rgba(255,248,216,.78);
  border: 1px solid rgba(86,46,5,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.winamp-inner {
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,247,218,.22), rgba(103,57,5,.08));
}

.timer,
.display,
.playlist-strip {
  background:
    radial-gradient(circle at 20% 15%, rgba(255,210,80,.06), transparent 35%),
    var(--doge-screen);
  border-color: #a66a14;
  box-shadow: inset 0 0 18px rgba(255,193,54,.11);
}

.timer {
  color: var(--doge-lcd);
  text-shadow: 0 0 8px rgba(255,208,71,.58);
}

.display-topline,
.marquee,
.playlist-strip {
  color: #ffd95d;
}
.display-topline small { color: #ba9b52; }
.display-topline .mono { color: #ffe98f; }
.marquee { text-shadow: 0 0 6px rgba(255,207,72,.4); }

.spectrum i {
  background: linear-gradient(to top, #d58c17 0 46%, #f5c84d 46% 76%, #fff1a6 76%);
}

input[type="range"] {
  accent-color: #d28e19;
}

.tiny-switches span {
  color: #4b2a06;
  background: #f8d87f;
  border-color: #5f3508;
  box-shadow: inset 1px 1px #fff1bf, inset -1px -1px #b87816;
}

.status-lights b {
  background: #ffd54f;
  border-color: #7a4c0c;
  box-shadow: 0 0 5px #ffe789;
}
.status-lights b:nth-child(2) {
  background: #fff2a8;
  box-shadow: 0 0 5px #fff6cf;
}

.transport, .eject {
  color: #3a2108;
  border-color: #5d3509;
  background: linear-gradient(#fff2bf 0%, #f3cd6c 48%, #ce8e1e 51%, #f0bd49 100%);
  box-shadow: inset 2px 2px #fff7d8, inset -2px -2px #9f6412, 1px 1px 0 #6d430c;
}
.transport:hover, .eject:hover {
  filter: brightness(1.05) saturate(1.05);
}
.transport:active, .eject:active {
  box-shadow: inset 2px 2px #9f6412, inset -2px -2px #fff7d8;
}
.main-play {
  color: #6a3d08;
  background: linear-gradient(#fff7c8, #f6d76f 48%, #e6a62a 51%, #f4c454 100%);
}

.playlist-strip {
  border-color: #986117;
  color: #ffd95d;
  text-shadow: 0 0 5px rgba(255,207,72,.35);
}
.playlist-strip em { color: #fff2a8; }

@media (max-width: 640px) {
  .winamp { width: min(500px, 95vw); }
  .window-buttons span { min-width: 34px; padding: 0 5px; font-size: 6px; }
}


/* Final DOGEAMP fit-and-finish pass */
.winamp {
  width: min(500px, 94vw);
}

.winamp-titlebar {
  padding: 0 9px;
  gap: 10px;
}

.title-left {
  min-width: 0;
  white-space: nowrap;
}

.window-buttons {
  flex: 0 0 auto;
}

.window-buttons span {
  min-width: 0;
  width: auto;
  height: 17px;
  padding: 0 7px;
  font-size: 6px;
  letter-spacing: 0;
}

.winamp-inner {
  padding: 10px 11px 11px;
}

.top-grid {
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
}

.timer {
  min-height: 74px;
  font-size: 22px;
  letter-spacing: -2px;
}

.display {
  height: 74px;
  padding: 6px 8px;
}

.display-topline {
  gap: 3px;
  font-size: 10px;
}

.display-topline small {
  margin-right: 3px;
  font-size: 6px;
}

.display-topline .mono {
  font-size: 7px;
  white-space: nowrap;
}

.marquee {
  margin-top: 4px;
  font-size: 9px;
}

.spectrum {
  height: 25px;
  margin-top: 4px;
  gap: 2px;
}

.seek-row {
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  gap: 7px;
  margin-top: 8px;
  font-size: 9px;
}

.knobs-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  margin-top: 5px;
}

.mini-control {
  gap: 5px;
  font-size: 7px;
  min-width: 0;
}

.status-lights {
  gap: 4px;
  font-size: 6px;
  white-space: nowrap;
}

.tiny-switches span {
  padding: 4px 4px;
  font-size: 6px;
}

.transport-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) 40px;
  gap: 5px;
  margin-top: 9px;
}

.transport, .eject {
  height: 34px;
}

.playlist-strip {
  margin-top: 8px;
  grid-template-columns: 27px minmax(0, 1fr) 18px;
  padding: 7px 7px 6px;
  font-size: 7px;
}

.dock-btn {
  min-width: 166px;
}

@media (max-width: 520px) {
  .winamp {
    width: min(455px, 95vw);
  }
  .top-grid {
    grid-template-columns: 78px minmax(0, 1fr);
  }
  .timer {
    font-size: 17px;
  }
  .window-buttons span {
    padding: 0 5px;
    font-size: 5px;
  }
  .display-topline .mono {
    display: none;
  }
  .status-lights {
    display: none;
  }
  .knobs-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}


/* Final micro-fixes: timer fit + two subtle extra sparkles */
.timer {
  font-size: 18px;
  letter-spacing: -2px;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 6px;
}

.top-grid {
  grid-template-columns: 100px minmax(0, 1fr);
}

.sparkle-d {
  left: 16vw;
  bottom: 18vh;
  font-size: 24px;
  animation-delay: 1.25s;
}

.sparkle-e {
  right: 21vw;
  top: 9vh;
  font-size: 21px;
  animation-delay: 1.55s;
}

@media (max-width: 520px) {
  .top-grid {
    grid-template-columns: 76px minmax(0, 1fr);
  }
  .timer {
    font-size: 14px;
    letter-spacing: -2px;
    padding: 0 4px;
  }
}

/* DOGE2 / DOGE live flippening panel */
.flip-card {
  width: min(500px, 94vw);
  margin-top: 18px;
  padding: 14px 15px 13px;
  color: #2e1a05;
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.06)),
    linear-gradient(135deg, #ffe8a1, #efbd45 55%, #d79520);
  border: 2px solid #3b2108;
  border-radius: 12px;
  box-shadow:
    0 0 0 2px #fff1bd,
    0 0 0 4px #5d3509,
    8px 10px 0 rgba(51,27,3,.42),
    0 18px 36px rgba(0,0,0,.23);
  font-family: "Space Mono", monospace;
}

.flip-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.flip-kicker {
  margin-bottom: 4px;
  font: 700 7px/1 "Press Start 2P", monospace;
  color: #75450a;
  letter-spacing: .05em;
}

.flip-head h2 {
  margin: 0;
  font: 400 18px/1 "Press Start 2P", monospace;
  letter-spacing: -.04em;
  color: #2e1905;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.flip-live {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 7px;
  border: 1px solid rgba(76,42,5,.45);
  border-radius: 999px;
  background: rgba(255,245,200,.62);
  font: 700 7px/1 "Press Start 2P", monospace;
  color: #6b3d08;
}

.flip-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9a6a25;
}

.flip-live.ready i {
  background: #62a52d;
  box-shadow: 0 0 7px rgba(98,165,45,.7);
}

.flip-progress-shell {
  position: relative;
  height: 30px;
  margin-top: 13px;
  overflow: hidden;
  border: 2px solid #5d3509;
  border-radius: 7px;
  background: #2a1a0a;
  box-shadow: inset 0 0 12px rgba(0,0,0,.32);
}

.flip-progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, #d8911f, #ffd85c, #fff0a0);
  box-shadow: 0 0 12px rgba(255,210,82,.5);
  transition: width .6s ease;
}

.flip-doge2,
.flip-doge {
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
  font: 700 7px/1 "Press Start 2P", monospace;
  text-shadow: 0 1px 2px #000;
  color: #fff3bd;
}
.flip-doge2 { left: 8px; }
.flip-doge { right: 8px; }

.flip-main-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
}

.flip-main-stat > span {
  font: 400 clamp(25px, 7vw, 36px)/1 "Press Start 2P", monospace;
  color: #3e2406;
  letter-spacing: -.06em;
}

.flip-main-stat small {
  font: 700 7px/1.25 "Press Start 2P", monospace;
  color: #7a4a0d;
}

.flip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 11px;
}

.flip-stat {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(88,48,6,.25);
  border-radius: 7px;
  background: rgba(255,246,207,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

.flip-stat span {
  display: block;
  margin-bottom: 5px;
  color: #80500f;
  font: 700 6px/1.25 "Press Start 2P", monospace;
}

.flip-stat strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #2c1905;
  font-size: 14px;
  line-height: 1.15;
  white-space: nowrap;
}

.flip-target {
  background: rgba(255,245,190,.78);
}

.flip-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  color: #70430b;
  font-size: 8px;
  line-height: 1.35;
}

.flip-foot span:first-child { max-width: 72%; }
.flip-foot span:last-child { white-space: nowrap; text-align: right; }

@media (max-width: 520px) {
  .flip-head h2 { font-size: 15px; }
  .flip-main-stat > span { font-size: 26px; }
  .flip-stat strong { font-size: 12px; }
  .flip-foot { flex-direction: column; }
  .flip-foot span:first-child { max-width: none; }
  .flip-foot span:last-child { text-align: left; }
}