/* ---- The meme maker ----
   The picture on the left and what goes into it on the right; on a phone,
   the picture on top and the tools under it, words first. */

/* Its own page frame rather than the games': the games lay out in three
   columns around a board on a desk, and this has two of its own. */
.meme-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 5vw 90px;
}
.meme-page .game-head { text-align: center; }
.meme-page .game-sub { max-width: 560px; }
.meme-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 26px;
}

/* ---- The picture ----
   Held still at the top of the screen on a desk, so the words being typed
   on the right can be watched going on. */
.meme-stage { position: sticky; top: 86px; }
.meme-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.meme-bar-hint {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.meme-canvas-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: repeating-conic-gradient(#15131a 0 25%, #111016 0 50%) 0 0 / 22px 22px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#meme-canvas {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  /* Short enough that there is always page left to scroll by. */
  max-height: 64vh;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  /* Dragging on it frames the picture or moves a sticker, never the page. */
  touch-action: none;
  cursor: grab;
}
#meme-canvas:active { cursor: grabbing; }
/* A file held over the picture. */
.meme-drop {
  position: absolute;
  inset: 8px;
  display: grid;
  place-items: center;
  border: 2px dashed var(--amber);
  border-radius: 12px;
  background: rgba(10, 10, 13, 0.72);
  color: var(--amber);
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  font-size: 22px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.meme-canvas-wrap.is-dropping { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 198, 50, 0.16); }
.meme-canvas-wrap.is-dropping .meme-drop { opacity: 1; }

/* What can be done to the picked thing. */
.meme-sel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 198, 50, 0.35);
  border-radius: 12px;
  background: rgba(255, 198, 50, 0.06);
}
.meme-sel[hidden], .meme-sel-text[hidden] { display: none; }
.meme-sel-text {
  flex: 1 1 180px;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--text);
  padding: 8px 11px;
  border-radius: 9px;
  border: 1px solid var(--amber);
  background: rgba(0, 0, 0, 0.35);
}
.meme-sel-text:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 198, 50, 0.2); }
.meme-sel-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* The small buttons, used everywhere on this page. */
.meme-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--text);
  background: linear-gradient(180deg, #211e2a 0%, #16141c 100%);
  border: 1px solid var(--edge-lit, #3a3544);
  transition: transform 0.14s ease, border-color 0.14s ease, opacity 0.14s ease;
}
.meme-mini:hover { border-color: var(--amber); }
.meme-mini:active { transform: scale(0.96); }
.meme-mini[disabled] { opacity: 0.4; cursor: default; transform: none; border-color: var(--edge-lit, #3a3544); }
.meme-mini.is-bad:hover { border-color: #ff6b6b; color: #ffd7d7; }
/* The one that does the thinking for you. */
.meme-mini.is-lit {
  color: #1a1200;
  border-color: #000;
  background: linear-gradient(180deg, #ffd35a 0%, #ffb31a 100%);
  box-shadow: 0 2px 0 #000;
}
.meme-mini.is-lit:hover { border-color: #000; filter: brightness(1.06); }

.meme-out {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}
.meme-out [hidden] { display: none; }
.meme-note { min-height: 1.4em; margin: 10px 0 0; text-align: center; font-size: 13px; color: var(--muted); }

/* ---- The tools ---- */
.meme-tools { display: grid; gap: 14px; }
.meme-block {
  padding: 16px;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--panel);
}
.meme-h {
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--amber);
}
.meme-h-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.meme-h-row .meme-h { margin: 0; }
.meme-sub {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 8px;
}
.meme-small { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.meme-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }

/* Choices of one: layout, shape, lettering, finish, which picture. */
.meme-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.meme-chips[hidden] { display: none; }
.meme-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 6px 12px 6px 7px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--panel-border);
  transition: border-color 0.14s ease, color 0.14s ease;
}
.meme-chip:hover { color: var(--text); }
.meme-chip.is-on { color: var(--text); border-color: var(--amber); background: rgba(255, 198, 50, 0.08); }
.meme-panels .meme-chip { padding-left: 9px; }
.lay-mark { width: 20px; height: 20px; flex: none; }
.meme-chip.is-on .lay-mark { color: var(--amber); }
.meme-lay { display: grid; grid-template-columns: 1fr 1fr; }
.meme-lay .meme-chip { padding: 8px 12px 8px 9px; }

.meme-swatch {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 24px;
  border-radius: 999px;
  font-family: 'Anton', 'Anton Fallback', sans-serif;
  font-size: 14px;
  background: #2a2733;
  -webkit-text-stroke: 1.2px #000;
  paint-order: stroke fill;
}
.sw-classic { color: #fff; }
.sw-amber { color: #ffc632; }
.sw-neon { color: #fff; text-shadow: 0 0 6px #51fb18, 0 0 12px rgba(81, 251, 24, 0.6); }
.sw-fire { color: #ffb300; text-shadow: 0 0 6px rgba(255, 90, 0, 0.8); -webkit-text-stroke-color: #2b0600; }
.sw-box { color: #0b0b0b; background: #fff; font-family: 'Inter', 'Inter Fallback', sans-serif; font-weight: 800; font-size: 12px; -webkit-text-stroke: 0; }

/* ---- Fonts for the words ----
   Only fetched when something uses them: a font button showing its own
   name, or the picture once the font is picked. The buttons are a fixed
   size, so a font arriving late changes nothing around them. */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/meme/oswald.woff2') format('woff2'); }
@font-face { font-family: 'Bangers'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/meme/bangers.woff2') format('woff2'); }
@font-face { font-family: 'Luckiest Guy'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/meme/luckiest-guy.woff2') format('woff2'); }
@font-face { font-family: 'Lilita One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/meme/lilita-one.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/meme/montserrat.woff2') format('woff2'); }
@font-face { font-family: 'Alfa Slab One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/meme/alfa-slab-one.woff2') format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/meme/libre-baskerville.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/meme/playfair-display.woff2') format('woff2'); }
@font-face { font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/meme/permanent-marker.woff2') format('woff2'); }
@font-face { font-family: 'Lobster'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/meme/lobster.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/meme/nunito.woff2') format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/meme/courier-prime.woff2') format('woff2'); }
@font-face { font-family: 'Comic Neue'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/meme/comic-neue.woff2') format('woff2'); }
.meme-fonts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.meme-font {
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  overflow: hidden;
  white-space: nowrap;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: #15131a;
  color: var(--text);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.meme-font:hover { border-color: rgba(255, 198, 50, 0.5); }
.meme-font:active { transform: scale(0.96); }
.meme-font.is-on { border-color: var(--amber); background: rgba(255, 198, 50, 0.1); box-shadow: 0 0 0 3px rgba(255, 198, 50, 0.14); }
.meme-font[data-font="impact"] { font-family: 'Anton', 'Anton Fallback', sans-serif; font-size: 21px; letter-spacing: 0.3px; }
.meme-font[data-font="tall"] { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 19px; text-transform: uppercase; }
.meme-font[data-font="bangers"] { font-family: 'Bangers', sans-serif; font-size: 22px; letter-spacing: 0.8px; }
.meme-font[data-font="bubble"] { font-family: 'Luckiest Guy', sans-serif; font-size: 18px; }
.meme-font[data-font="thumb"] { font-family: 'Lilita One', sans-serif; font-size: 14px; text-transform: uppercase; color: #ffe14d; }
.meme-font[data-font="reels"] { font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 17px; }
.meme-font[data-font="clean"] { font-family: 'Inter', 'Inter Fallback', sans-serif; font-weight: 900; font-size: 17px; }
.meme-font[data-font="slab"] { font-family: 'Alfa Slab One', serif; font-size: 17px; text-transform: uppercase; }
.meme-font[data-font="serif"] { font-family: 'Libre Baskerville', Georgia, serif; font-weight: 700; font-size: 16px; }
.meme-font[data-font="elegant"] { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 18px; }
.meme-font[data-font="marker"] { font-family: 'Permanent Marker', cursive; font-size: 16px; }
.meme-font[data-font="script"] { font-family: 'Lobster', cursive; font-size: 21px; }
.meme-font[data-font="rounded"] { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 17px; }
.meme-font[data-font="typewriter"] { font-family: 'Courier Prime', monospace; font-weight: 700; font-size: 14px; }
.meme-font[data-font="goofy"] { font-family: 'Comic Neue', 'Comic Sans MS', cursive; font-weight: 700; font-size: 19px; }
#meme-caps[aria-pressed="false"] { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .meme-font { transition: none; } }

/* A little picture of each finish. */
.meme-fx { width: 24px; height: 24px; border-radius: 50%; flex: none; border: 1px solid rgba(255, 255, 255, 0.18); }
.fx-none { background: linear-gradient(135deg, #7ac4ff, #ffd35a 55%, #ff7a59); }
.fx-fried { background: radial-gradient(circle at 35% 35%, #fff36b, #ff5a00 55%, #b30000); box-shadow: 0 0 8px rgba(255, 90, 0, 0.6); }
.fx-noir { background: linear-gradient(135deg, #f2f2f2, #6a6a6a 55%, #111); }
.fx-gold { background: radial-gradient(circle at 40% 40%, #ffe7a1, #d98b1f 60%, #5a3208); }
.fx-film { background: radial-gradient(circle at 40% 40%, #f3dcb2, #a8845a 60%, #3d2a18); }
.fx-vhs { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.35) 0 2px, transparent 2px 4px), linear-gradient(90deg, #ff3b6b, #7a5cff 50%, #2de2e6); }
.fx-glitch { background: linear-gradient(180deg, #2de2e6 0 30%, #ff2bd6 30% 45%, #111 45% 62%, #f6f000 62% 72%, #2de2e6 72%); }
.fx-pixel { background: conic-gradient(#ffc632 0 25%, #ff5a2a 0 50%, #7a5cff 0 75%, #35e08a 0); background-size: 12px 12px; }
.fx-pump { background: radial-gradient(circle at 40% 40%, #b6ff8a, #35c21a 60%, #03170a); box-shadow: 0 0 8px rgba(80, 255, 60, 0.45); }
.fx-dump { background: radial-gradient(circle at 40% 40%, #ffb3b3, #e0282f 60%, #1a0206); box-shadow: 0 0 8px rgba(255, 50, 50, 0.45); }
/* A slider under a row of chips. */
.meme-slide { margin-top: 12px; }
.meme-slide[hidden] { display: none; }

/* Pictures to start from: little frames, the picked one lit. */
.meme-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
/* The pictures are the long list; five across where the column is wide.
   The list is built by meme.js, so until it runs its height is held open
   here, worked out from the width the way the grid will lay it out: a
   square picture plus its label per row. --rows is how many rows the
   pictures in meme.js make at that width. */
.meme-block-pic { container-type: inline-size; }
#meme-templates { --cols: 4; --rows: 5; }
@media (min-width: 901px) { #meme-templates { --cols: 5; --rows: 4; grid-template-columns: repeat(5, minmax(0, 1fr)); } }
#meme-templates:empty {
  min-height: calc(var(--rows) * ((100cqw - (var(--cols) - 1) * 10px) / var(--cols) + 21px) + (var(--rows) - 1) * 10px);
}
.meme-panels + .meme-picks { margin-top: 12px; }
.meme-pick {
  display: grid;
  gap: 6px;
  padding: 0;
  font: inherit;
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: center;
}
.meme-pick-art {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--panel-border);
  background: #15131a;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.meme-pick-art img { width: 100%; height: 100%; object-fit: cover; }
.meme-pick-art.is-dark { background: radial-gradient(circle at 50% 65%, rgba(255, 170, 30, 0.35), transparent 70%), #0d0b10; }
.meme-pick-art.is-dark img { object-fit: contain; }
.meme-pick-plus { flex-direction: column; gap: 4px; padding: 8px; color: var(--amber); border-width: 1px; border-style: dashed; border-color: rgba(255, 198, 50, 0.45); background: #121016; }
.meme-pick-plus svg { width: 34%; height: 34%; flex: none; }
.meme-pick-plus span { font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; }
/* Your own says so inside its tile, like the sticker one; the name under
   it keeps its room so the rows still line up. */
.meme-pick[data-id="upload"] .meme-pick-label { visibility: hidden; }
.meme-pick-label { font-size: 12px; font-weight: 700; }
.meme-pick:hover .meme-pick-art { border-color: rgba(255, 198, 50, 0.5); transform: translateY(-2px); }
.meme-pick.is-on .meme-pick-art { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 198, 50, 0.18); }
.meme-pick.is-on .meme-pick-label { color: var(--text); }

.meme-zoom { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.meme-zoom label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }
.meme-zoom input { flex: 1; min-width: 0; accent-color: var(--amber); height: 26px; }

/* The words. */
.meme-field { display: grid; gap: 6px; margin-bottom: 10px; }
.meme-field span {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--muted);
}
.meme-field input {
  font: inherit;
  font-size: 16px;   /* 16 or more, or a phone zooms in on the box */
  font-weight: 700;
  color: var(--text);
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.3);
}
.meme-field input:focus { outline: none; border-color: var(--amber); }

/* Stickers, on a dark tray so the ones with no background show. */
.meme-stick {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  /* Square whatever shape the sticker is: without these a tall one
     stretches its tile. */
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid var(--panel-border);
  background: #121016;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.meme-stick img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Built by meme.js as well, so held open the same way: square buttons,
   four across, --rows of them. */
.meme-block-stick { container-type: inline-size; }
#meme-stickers { --rows: 2; }
#meme-stickers-more { --rows: 8; }
#meme-stickers:empty, #meme-stickers-more:empty { min-height: calc(var(--rows) * (100cqw - 30px) / 4 + (var(--rows) - 1) * 10px); }
#meme-emoji:empty { min-height: calc(2 * (100cqw - 40px) / 6 + 8px); }
.meme-stick-add { font: inherit; flex-direction: column; gap: 4px; border-style: dashed; border-color: rgba(255, 198, 50, 0.45); color: var(--amber); }
.meme-stick-add svg { width: 34%; height: 34%; flex: none; }
.meme-stick-add span { font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; }
.meme-stick img.is-round { border-radius: 50%; box-shadow: 0 0 0 2px #ffc632; }
.meme-stick:hover { border-color: var(--amber); transform: translateY(-2px) rotate(-2deg); }
.meme-stick:active { transform: scale(0.94); }
.meme-emoji { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.meme-emo {
  aspect-ratio: 1;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: #121016;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.meme-emo:hover { border-color: var(--amber); transform: translateY(-2px) scale(1.06); }
.meme-emo:active { transform: scale(0.9); }

/* ---- On a phone ----
   One column, in the order it is used in: the picture, the words right
   under it so what is typed can be seen going on, then the rest, and the
   way out at the bottom. */
@media (max-width: 900px) {
  .meme-layout { grid-template-columns: 1fr; gap: 12px; }
  .meme-layout > .meme-stage, .meme-layout > .meme-tools { display: contents; }
  .meme-bar { order: 1; margin: 0; }
  .meme-canvas-wrap { order: 2; padding: 10px; }
  .meme-sel { order: 3; margin-top: 0; }
  .meme-block-words { order: 4; }
  .meme-block-format { order: 5; }
  .meme-block-pic { order: 6; }
  .meme-block-stick { order: 7; }
  .meme-block-finish { order: 8; }
  .meme-out { order: 9; margin-top: 4px; }
  .meme-note { order: 10; margin-top: 0; }
  #meme-canvas { max-height: 56vh; }
}
@media (max-width: 560px) {
  .meme-page { padding-top: 30px; }
  .meme-bar-hint { display: none; }
  /* Undo and Redo go down to their arrows so Random and Start over fit. */
  #meme-undo .bar-label, #meme-redo .bar-label { display: none; }
  .meme-bar { justify-content: space-between; }
  #meme-reset { margin-left: auto; }
  /* Download the width of the screen, the other two side by side under it. */
  .meme-layout .meme-out { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .meme-layout .meme-out .btn { width: 100%; padding-left: 12px; padding-right: 12px; font-size: 14px; }
  .meme-layout .meme-out #meme-download { grid-column: 1 / -1; }
  .meme-emoji { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .meme-pick-art, .meme-stick, .meme-mini, .meme-emo, .meme-chip, .meme-drop { transition: none; }
}

/* ---- The words' colours ----
   Two rows: the words, then their outline, glow or box. Auto gives the
   colour back to the style; the rainbow one is any colour at all. */
.meme-colors { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; margin-top: 12px; }
.meme-colors + .meme-colors { margin-top: 8px; }
.meme-color-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }
.meme-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.meme-sw {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  background: var(--c, #15131a);
  color: var(--muted);
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.meme-sw:hover { transform: scale(1.08); border-color: rgba(255, 198, 50, 0.6); }
.meme-sw.is-on { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255, 198, 50, 0.22); }
.meme-sw-auto { background: #15131a; }
.meme-sw-auto svg { width: 15px; height: 15px; }
.meme-sw-auto.is-on { color: var(--amber); }
.meme-sw-custom { background: conic-gradient(#ff3b3b, #ffc632, #51fb18, #3ddcff, #a66bff, #ff3fa4, #ff3b3b); overflow: hidden; }
.meme-sw-custom::after { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--c, transparent); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); }
.meme-sw-custom:not(.is-on)::after { box-shadow: none; }
.meme-sw-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) { .meme-sw { transition: none; } }
@media (max-width: 560px) {
  .meme-colors { grid-template-columns: 1fr; gap: 6px; }
}

/* ---- Dropdowns: Text options and More stickers ---- */
.meme-h-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.meme-more { margin-top: 12px; border: 1px solid var(--panel-border); border-radius: 12px; background: rgba(0, 0, 0, 0.22); }
.meme-more > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  min-height: 48px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
  user-select: none;
}
.meme-more > summary::-webkit-details-marker { display: none; }
.meme-more > summary .icon { width: 20px; height: 20px; flex: none; color: var(--amber); }
.meme-more > summary:hover { background: rgba(255, 198, 50, 0.06); }
.meme-more > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.meme-more-title { white-space: nowrap; }
.meme-more-hint { margin-left: auto; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meme-more > summary .meme-more-chev { width: 18px; height: 18px; color: var(--muted); transition: transform 0.18s ease; }
.meme-more[open] > summary .meme-more-chev { transform: rotate(180deg); }
.meme-more[open] > summary { border-bottom: 1px solid var(--panel-border); border-radius: 12px 12px 0 0; }
.meme-more-body { padding: 12px 12px 14px; }
.meme-more-body > :first-child { margin-top: 0; }
.meme-block-stick .meme-more-body { padding: 10px; }
@media (prefers-reduced-motion: reduce) { .meme-more > summary .meme-more-chev { transition: none; } }


/* How many have been made, or what it costs (nothing) until that is known.
   One line either way, so the page does not move when it changes. */
.meme-count { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }