/* Fitting a game in a fixed cartridge — the space-from-ingenuity craft Satoru Iwata
   was known for, made visible. Two regions of game data together need more room than
   the cartridge holds. Raise the compression ratio and the combined data shrinks until
   it slips under the cartridge's capacity line. (The popular tale that compression
   alone fit a second Pokémon region is mostly legend -- the cartridge was also enlarged
   -- but the principle, doing more in less space, is real and is his.) Vanilla JS, no
   deps, no build.
   Palette shared with siblings: green = fits under capacity (the win), violet = over
   budget (a distinct attention colour, deliberately NOT red). */

#rom-compression {
  --rc-fit: #30d158;
  --rc-over: #b488ff;
  --rc-johto: #30d158;
  --rc-kanto: #5ac8fa;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px; padding: clamp(16px, 3vw, 26px); margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}
.rc-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.rc-explain { font-size: 0.9rem; line-height: 1.55; margin: 8px 0 18px; color: var(--color-text-secondary, rgba(255,255,255,0.7)); }

.rc-track-wrap { position: relative; margin: 8px 0 6px; }
.rc-track { position: relative; height: 46px; background: #0c0c0f; border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.1)); border-radius: 9px; overflow: hidden; }
.rc-fill { position: absolute; top: 0; left: 0; height: 100%; display: flex; transition: width 0.35s cubic-bezier(.2,.7,.2,1); }
.rc-seg { height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono, monospace); font-size: 0.7rem; font-weight: 700; color: #07121a; overflow: hidden; white-space: nowrap; transition: background 0.3s; }
.rc-seg.johto { background: var(--rc-johto); }
.rc-seg.kanto { background: var(--rc-kanto); }
.rc-fill.over .rc-seg { background: var(--rc-over); color: #140a22; }
.rc-cap { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; }
.rc-cap-lbl { position: absolute; top: -18px; transform: translateX(-50%); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary, rgba(255,255,255,0.6)); white-space: nowrap; }

.rc-control { margin: 22px 0 4px; }
.rc-control label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.82rem; color: var(--color-text-secondary, rgba(255,255,255,0.7)); margin-bottom: 8px; }
.rc-control .rc-ratio { font-family: var(--font-mono, monospace); font-size: 0.95rem; font-weight: 650; color: var(--rc-kanto); }
.rc-slider { width: 100%; appearance: none; height: 6px; border-radius: 4px; background: linear-gradient(90deg, rgba(180,136,255,0.5), rgba(48,209,88,0.5)); outline: none; }
.rc-slider::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; cursor: pointer; border: 2px solid #0b0b0b; }
.rc-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: pointer; border: 2px solid #0b0b0b; }

.rc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 4px; }
.rc-stat { background: var(--color-bg-surface, #1a1a1a); border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08)); border-radius: 10px; padding: 10px 12px; }
.rc-stat .rc-k { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-tertiary, rgba(255,255,255,0.45)); margin-bottom: 4px; }
.rc-stat .rc-v { font-family: var(--font-mono, monospace); font-size: 1.05rem; font-weight: 650; }
.rc-stat .rc-v.fit { color: var(--rc-fit); }
.rc-stat .rc-v.over { color: var(--rc-over); }

.rc-caption { margin-top: 14px; font-size: 0.9rem; line-height: 1.55; color: var(--color-text-secondary, rgba(255,255,255,0.78)); min-height: 2.6em; }
.rc-caption b { color: #fff; }
.rc-caption .rc-hl { color: var(--rc-fit); font-weight: 650; }
.rc-caption .rc-lo { color: var(--rc-over); font-weight: 650; }
.rc-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }