/* anyname.ai · Das Namen-Magazin: shared identity derived from the Pinterest pins
   (watercolor on paper, script titles, plum / sand / deep-blue ink), tokens and shared components. */
@font-face { font-family: "Great Vibes"; src: url("fonts/GreatVibes-Regular.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-style: normal; src: url("fonts/PlayfairDisplay-Bold.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Playfair Display"; font-weight: 700; font-style: italic; src: url("fonts/PlayfairDisplay-Bold-Italic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Playfair Display"; font-weight: 900; font-style: normal; src: url("fonts/PlayfairDisplay-Black.ttf") format("truetype"); font-display: swap; }
/* Source Sans 3 (SIL OFL 1.1, see fonts/LICENSE-SourceSans3-OFL.txt), self-hosted: the live CSP allows only own fonts */
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; src: url("fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; src: url("fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-style: normal; src: url("fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: italic; src: url("fonts/source-sans-3-latin-400-italic.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: normal; src: url("fonts/source-sans-3-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-style: normal; src: url("fonts/source-sans-3-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-style: normal; src: url("fonts/source-sans-3-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-style: italic; src: url("fonts/source-sans-3-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #faf6ef;          /* page ground: warm white paper */
  --paper-2: #f1ebe0;        /* recessed paper */
  --card: #ffffff;
  --ink: #2c2430;            /* plum-black */
  --ink-2: #5c3d4e;          /* pin plum */
  --ink-3: #6f6a72;          /* muted */
  --name: #2c3e50;           /* pin dark blue for names */
  --meaning: #4a5f6e;        /* pin meaning blue */
  --sand: #c9a97a;           /* pin sand accent */
  --sand-2: #b08d5c;
  --heart: #c0392b;
  --good: #4c8b5a;
  --bad: #c0392b;
  --line: rgba(44, 36, 48, 0.12);
  --shadow: 0 10px 30px rgba(60, 40, 50, 0.18);
  --focus: #2c3e50;
  --font-ui: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-script: "Great Vibes", "Brush Script MT", cursive;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #1f1a22;
    --paper-2: #2a232e;
    --card: #2b2430;
    --ink: #f4ede4;
    --ink-2: #e2c9d3;
    --ink-3: #b7adb5;
    --name: #dfe8f1;
    --meaning: #b9c8d4;
    --sand: #d4b482;
    --sand-2: #e3c79a;
    --heart: #e0574a;
    --good: #7fbf8c;
    --bad: #e0574a;
    --line: rgba(255, 245, 235, 0.14);
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    --focus: #d4b482;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #1f1a22;
  --paper-2: #2a232e;
  --card: #2b2430;
  --ink: #f4ede4;
  --ink-2: #e2c9d3;
  --ink-3: #b7adb5;
  --name: #dfe8f1;
  --meaning: #b9c8d4;
  --sand: #d4b482;
  --sand-2: #e3c79a;
  --heart: #e0574a;
  --good: #7fbf8c;
  --bad: #e0574a;
  --line: rgba(255, 245, 235, 0.14);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --focus: #d4b482;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.5; }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 42% 30% at 6% 10%, color-mix(in srgb, var(--season, var(--sand)) 34%, transparent), transparent 70%),
    radial-gradient(ellipse 34% 26% at 94% 26%, color-mix(in srgb, var(--ink-2) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 26% at 18% 86%, color-mix(in srgb, var(--meaning) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 30% 22% at 82% 78%, color-mix(in srgb, var(--season, var(--sand)) 24%, transparent), transparent 70%),
    radial-gradient(ellipse 22% 16% at 50% 50%, color-mix(in srgb, var(--sand) 12%, transparent), transparent 70%); }
img { max-width: 100%; display: block; }
button { font: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- type ---------- */
.script { font-family: var(--font-script); font-weight: 400; color: var(--sand-2); line-height: 1; }
.display { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.01em; line-height: 1.08; text-wrap: balance; }
.brand { display: grid; gap: 0; text-decoration: none; color: var(--ink); position: relative; padding: 2px 10px 2px 8px; }
.brand::before { content: ""; position: absolute; left: -6px; top: -4px; width: 64px; height: 44px; border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%; background: color-mix(in srgb, var(--season, var(--sand)) 26%, transparent); filter: blur(4px); z-index: -1; transform: rotate(-8deg); }
.wordmark { font-family: var(--font-display); font-weight: 900; font-size: 23px; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); white-space: nowrap; line-height: 1; }
.wordmark b { font-family: var(--font-script); font-weight: 400; color: var(--sand-2); font-size: 31px; letter-spacing: 0; margin-right: 1px; }
.wordmark small { font-size: 13px; color: var(--ink-3); font-weight: 700; margin-left: 1px; }
.tagline { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin-top: 2px; white-space: nowrap; }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); font-weight: 600; }

/* ---------- chips & buttons ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { border: 1px solid var(--line); background: var(--card); color: var(--ink-2); border-radius: 999px; padding: 7px 14px; cursor: pointer; font-weight: 600; font-size: 14px; line-height: 1.2; }
.chip[aria-pressed="true"], .chip.active { background: var(--ink-2); color: var(--paper); border-color: var(--ink-2); }
.chip.sand[aria-pressed="true"] { background: var(--sand); color: #2c2430; border-color: var(--sand); }
.btn { border: 0; border-radius: 999px; padding: 12px 22px; font-weight: 700; font-size: 16px; cursor: pointer; background: var(--sand); color: #2c2430; box-shadow: 0 4px 14px rgba(201, 169, 122, 0.45); display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--ink-2); border: 1px solid var(--line); box-shadow: none; }
.btn.small { padding: 8px 14px; font-size: 14px; }
.seal { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sand); color: #2c2430; font-weight: 800; font-family: var(--font-ui); box-shadow: 0 2px 8px rgba(0,0,0,0.25); }

/* ---------- name list (the pin's own anatomy, as HTML) ---------- */
.names { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.names li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: start; }
.names .num { width: 26px; height: 26px; border-radius: 50%; background: var(--sand); color: #2c2430; font-size: 13px; font-weight: 800; display: grid; place-items: center; margin-top: 8px; }
.names .nm { font-family: var(--font-script); font-size: 34px; color: var(--name); line-height: 1; }
.names .mean { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 14px; color: var(--meaning); }
.names .tag { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.names .tag::before { content: "♥ "; color: var(--heart); }
.names .orig { font-size: 12px; color: var(--ink-3); font-family: var(--font-display); font-weight: 700; }
.star { border: 0; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; color: var(--sand-2); padding: 4px; margin-top: 4px; }
.star[aria-pressed="true"] { color: var(--heart); }

/* ---------- paper panel (card backs, sheets) ---------- */
.paper { background: var(--card); background-image: radial-gradient(ellipse at 20% 0%, rgba(201,169,122,0.18), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(92,61,78,0.10), transparent 50%); border: 1px solid var(--line); border-radius: 18px; position: relative; }
.paper.deco::before, .paper.deco::after { content: ""; position: absolute; width: 54px; height: 54px; pointer-events: none; opacity: 0.55; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54' fill='none' stroke='%23c9a97a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 50c2-18 10-30 26-38 6-3 12-4 20-4'/%3E%3Cpath d='M12 42c3-8 8-14 16-18'/%3E%3Cpath d='M30 12c-2 5-1 9 3 12M22 22c-3 4-3 8 0 12M40 8c-4 1-6 4-6 8'/%3E%3Ccircle cx='47' cy='9' r='2' fill='%23c9a97a' stroke='none'/%3E%3C/svg%3E"); }
.paper.deco::before { left: 6px; top: 6px; }
.paper.deco::after { right: 6px; bottom: 6px; transform: rotate(180deg); }
.tape { position: absolute; width: 92px; height: 26px; background: color-mix(in srgb, var(--sand) 55%, #fff); opacity: 0.85; transform: rotate(-6deg); left: 50%; margin-left: -46px; top: -12px; box-shadow: 0 1px 3px rgba(0,0,0,0.15); border-left: 1px dashed rgba(255,255,255,0.6); border-right: 1px dashed rgba(255,255,255,0.6); z-index: 2; pointer-events: none; }
.tilt-l { transform: rotate(-1.4deg); } .tilt-r { transform: rotate(1.1deg); }
.tilt-l:hover, .tilt-r:hover { transform: rotate(0deg); }

.results { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.result { border: 1px solid var(--line); border-radius: 14px; padding: 12px 12px 10px; background: var(--card); display: grid; gap: 4px; position: relative; overflow: hidden; }
.result::before { content: ""; position: absolute; inset: 0; background: var(--art) center / cover; opacity: 0.16; }
.result > * { position: relative; }
.result .rn { font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--name); }
.result .rm { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 13px; color: var(--meaning); }
.result .ro { font-size: 12px; color: var(--ink-3); }
.result .star { position: absolute; top: 4px; right: 4px; margin: 0; }
.example-flag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); border: 1px dashed var(--line); padding: 3px 8px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ---------- flip cards: picture first, text side on the back ---------- */
.fc { perspective: 1400px; cursor: pointer; border: 0; padding: 0; background: transparent; text-align: left; display: block; width: 100%; color: var(--ink); }
.fc-inner { position: relative; width: 100%; aspect-ratio: 2 / 3; transform-style: preserve-3d; transition: transform 700ms cubic-bezier(.2,.7,.2,1); border-radius: 18px; box-shadow: var(--shadow); container-type: inline-size; }
.fc.square .fc-inner { aspect-ratio: 1; } .fc.wide .fc-inner { aspect-ratio: 3 / 2; }
.fc[aria-pressed="true"] .fc-inner { transform: rotateY(180deg); }
.fc-front, .fc-back { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--paper-2); }
.fc-front img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 900ms ease; }
.fc:hover .fc-front img { transform: scale(1.04); }
.fc-back { transform: rotateY(180deg); background: var(--card); }
.fc-back::before { content: ""; position: absolute; inset: -12px; background: var(--art) center / cover; filter: blur(9px) saturate(0.9); opacity: 0.6; }
.fc-back::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--card) 30%, transparent) 0%, color-mix(in srgb, var(--card) 82%, transparent) 42%, color-mix(in srgb, var(--card) 94%, transparent) 100%); }
.fc .cap { position: absolute; left: 10px; top: 10px; background: rgba(250,246,239,0.92); color: var(--ink-2); font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; z-index: 1; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc .hint { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(250,246,239,0.92); color: var(--ink-2); display: grid; place-items: center; z-index: 1; transition: transform 400ms; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.fc .hint svg { width: 18px; height: 18px; }
.fc:hover .hint { transform: rotate(180deg); }
.fc .imp { position: absolute; left: 10px; bottom: 12px; background: rgba(44,36,48,0.85); color: #fff; font-size: 12px; padding: 3px 9px; border-radius: 999px; z-index: 1; }
.fc-back .backbody { position: absolute; inset: 0; padding: clamp(10px, 6cqw, 16px); z-index: 1; display: grid; }
.fc-close { position: absolute; right: 8px; top: 8px; z-index: 2; width: 30px; height: 30px; min-height: 0; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--card) 90%, transparent); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; padding: 0; }
.fc-close svg { width: 15px; height: 15px; }
.fc:hover .fc-inner { box-shadow: 0 16px 40px rgba(60, 40, 50, 0.26); }
@media (prefers-reduced-motion: reduce) { .fc-inner { transition: none; } }