/* YMAP Fixer — single stylesheet, self-contained (no external fonts/CDNs).
   The dropzone / buttons use the panel & button images in images/. */

@font-face {
  font-family: 'Remington';
  src: url('fonts/remington.ttf') format('truetype');
  font-display: swap;
}

:root {
  --red: #bd291d;
  --paper: #dfcaa5;
  --ink: #21150f;
  --cream: #f1e4ce;
  --muted: #b6a38d;
  --display: 'Arial Narrow', 'Roboto Condensed', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html { background: #0a0705; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font-family: 'Remington', 'Courier New', serif;
  position: relative;
  background:
    linear-gradient(90deg, rgba(9,5,3,.75) 0%, rgba(9,5,3,.28) 43%, rgba(9,5,3,.03) 72%),
    linear-gradient(0deg, rgba(8,4,3,.45), transparent 48%),
    url('images/background.png') center / cover fixed no-repeat;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 48%, rgba(5,3,2,.34) 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
}

.topbar, main, .process { position: relative; z-index: 2; }

/* --- Top bar --- */
.topbar {
  height: 88px;
  padding: 0 clamp(24px, 5vw, 76px);
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand {
  color: var(--cream);
  text-decoration: none;
  font-size: 22px;
  text-shadow: 2px 3px 8px #000;
}
.brand b { color: var(--red); }
.topbar-spacer { flex: 1; }
.drop-link {
  color: var(--paper);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 8px 16px;
  border: 1px solid rgba(223, 202, 165, .35);
  border-radius: 3px;
  text-shadow: 1px 2px 6px #000;
  transition: .2s;
}
.drop-link:hover { border-color: var(--paper); background: rgba(223, 202, 165, .08); }

.languages { display: flex; align-items: center; gap: 8px; }
.languages button {
  appearance: none; border: 0; background: transparent; padding: 4px;
  line-height: 1; font-size: 24px; cursor: pointer; color: #fff;
  opacity: .72; transition: .2s; text-shadow: 0 1px 5px #000;
  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', sans-serif;
}
.languages button:hover, .languages button.active { opacity: 1; transform: scale(1.12); }

/* --- Layout --- */
main {
  width: min(1080px, calc(100% - 48px));
  min-height: calc(100vh - 145px);
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  align-items: center;
  gap: 52px;
  padding: 40px 0 90px;
}
.intro { max-width: 570px; }
.kicker { font-size: 17px; color: #eadcc7; margin-bottom: 34px; text-shadow: 2px 3px 9px #000; }
.intro h1 {
  font-family: var(--display);
  font-size: clamp(72px, 7.6vw, 122px);
  line-height: .82;
  letter-spacing: -.02em;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 36px;
  text-shadow: 3px 6px 25px #000;
}
.intro h1 em { color: var(--red); font-style: italic; }
.intro > p {
  font-size: 18px; line-height: 1.65; color: #eadcc7;
  margin: 0; max-width: 510px; text-shadow: 2px 3px 9px #000;
}

/* --- Workbench / dropzone (panel & button images) --- */
.workbench {
  width: 100%; max-width: 500px; justify-self: end; position: relative;
  filter: drop-shadow(0 0 12px rgba(0,0,0,.8));
}
#dropzone {
  min-height: 330px; padding: 58px 70px 66px; color: #fff; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: url('images/panel.png') center / 100% 100% no-repeat;
  transition: .25s;
}
#dropzone:hover, #dropzone.drag {
  transform: scale(.98);
  filter: drop-shadow(0 0 8px rgba(255,255,255,.35));
}
#dropzone h2 { font-size: 26px; letter-spacing: 1px; margin: 0; }
#dropzone p { font-size: 15px; color: #aaa; margin: 16px 0 28px; }
#dropzone small { font-size: 12px; color: #777; }
#browse { border: 0; padding: 0; background: none; color: #fff; font: inherit; cursor: pointer; }
#browse:hover { text-decoration: underline; }

.selection {
  font-size: 13px; margin: 16px 80px 12px; padding: 18px 24px; color: #fff; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: url('images/button.png') center / 100% 100% no-repeat;
}

.fix {
  width: 62%; margin: 0 auto; border: 0; display: block; cursor: pointer; color: #fff;
  padding: 25px 32px; text-align: center; font: 400 19px 'Remington', 'Courier New', serif;
  background: url('images/button.png') center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.35)); transition: .2s;
}
.fix:hover:not(:disabled) {
  transform: scale(.95); color: #000;
  background: url('images/button-hover.png') center / 100% 100% no-repeat;
}
.fix:disabled { color: #777; filter: none; }

.status {
  min-height: 42px; padding: 14px 35px 0; text-align: center; font-size: 13px; line-height: 1.6;
  color: #eadcc7; white-space: pre-line; text-shadow: 2px 3px 8px #000;
}
.status.error { color: #ff9181; }

.process {
  height: 57px; text-align: center; font-size: 12px; color: #ac9d8c; text-shadow: 2px 3px 8px #000;
}

/* --- Responsive --- */
@media (max-width: 860px) {
  body { background-position: 63% center; }
  main { width: min(620px, calc(100% - 32px)); grid-template-columns: 1fr; padding: 40px 0 70px; gap: 45px; }
  .intro h1 { font-size: clamp(64px, 16vw, 108px); }
  .workbench { justify-self: center; width: 100%; max-width: 560px; }
}
@media (max-width: 540px) {
  main { width: calc(100% - 28px); }
  .topbar { height: 70px; padding: 0 16px; gap: 12px; }
  .drop-link { padding: 6px 10px; font-size: 12px; }
  .intro h1 { font-size: 56px; }
  .intro > p { font-size: 15px; }
  #dropzone { min-height: 300px; padding: 48px 42px 56px; }
  .selection { margin: 14px 50px 12px; }
  .fix { width: 72%; }
  .process { display: none; }
}