/* Meme maker page. Sits on top of /styles.css (colours, top bar, buttons). */
.meme-page {
  background:
    radial-gradient(900px 420px at 80% -80px, rgba(92, 225, 230, .22), transparent 70%),
    radial-gradient(700px 380px at 10% -60px, rgba(46, 220, 140, .16), transparent 70%),
    var(--navy);
  min-height: 100vh;
}
.nav-links a[aria-current] { color: var(--cyan); opacity: 1; }

.maker { max-width: 1180px; margin: 0 auto; padding: 110px clamp(16px, 4vw, 40px) 60px; }
.maker-title {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(54px, 10vw, 120px); line-height: .95; letter-spacing: .5px;
}
.maker-title span { color: var(--orange); }
.maker-sub { margin-top: 10px; color: #b9d3ea; font-size: 19px; }

.maker-grid { margin-top: 30px; display: grid; gap: 28px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }

.stage {
  position: sticky; top: 90px;
  padding: 10px; border-radius: 22px;
  background: linear-gradient(160deg, #eaf6ff, #a9dcff);
  box-shadow: 0 0 60px rgba(92, 225, 230, .28);
}
.stage canvas { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--navy-2); }

.panel {
  display: flex; flex-direction: column; gap: 22px;
  padding: 22px; border-radius: 22px;
  background: rgba(11, 28, 58, .82);
  border: 1px solid rgba(92, 225, 230, .22);
}
.field { display: flex; flex-direction: column; gap: 10px; }
.label { font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }

.picks { display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.pick {
  padding: 0; overflow: hidden; cursor: pointer;
  border: 3px solid transparent; border-radius: 14px;
  background: var(--navy); color: #fff; font: inherit;
  transition: transform .12s, border-color .15s;
}
.pick img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pick span { display: block; padding: 6px 4px 7px; font: 400 15px/1 var(--display); letter-spacing: .5px; text-transform: uppercase; }
.pick:hover { transform: translateY(-2px); }
.pick.on { border-color: var(--orange); box-shadow: 0 0 22px rgba(255, 138, 31, .55); }

.upload span {
  display: block; padding: 12px; text-align: center; cursor: pointer;
  border: 2px dashed rgba(234, 246, 255, .45); border-radius: 14px;
  font-weight: 600; font-size: 15px; color: #d6e9f8;
}
.upload:hover span, .upload.on span { border-color: var(--orange); color: #fff; }
.upload:focus-within span { outline: 2px solid var(--cyan); outline-offset: 2px; }

.panel input[type="text"] {
  width: 100%; padding: 14px 16px;
  border: 2px solid rgba(234, 246, 255, .3); border-radius: 14px;
  background: var(--navy); color: #fff;
  font: 400 22px/1.1 var(--display); letter-spacing: .5px; text-transform: uppercase;
}
.panel input[type="text"]::placeholder { color: #6f8cab; }
.panel input[type="text"]:focus { outline: none; border-color: var(--cyan); }
.panel input[type="range"] { width: 100%; accent-color: var(--orange); }

.link { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--cyan); font: 600 15px var(--body); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions .btn { flex: 1 1 160px; min-width: 0; }
.note { min-height: 1.4em; margin: -8px 0 0; color: #b9d3ea; font-size: 14px; }

.meme-foot {
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  max-width: 1180px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 40px) 34px;
  border-top: 1px solid rgba(92, 225, 230, .16);
  color: #7f9cba; font-size: 14px;
}
.meme-foot a { color: #fff; font-weight: 600; }

@media (max-width: 900px) {
  .maker-grid { grid-template-columns: 1fr; }
  .stage { position: static; }
}
@media (max-width: 640px) {
  .maker { padding-top: 92px; }
  .panel { padding: 16px; }
  .pick span { font-size: 13px; }
}