/* ==========================================================================
   Tuttofare — Design System v4 (Wero × Fauna playful)
   Palette caldissima rosa→corallo→giallo, mascotte androide a 5 mood,
   tipografia Funnel Display bold lowercase + Inter body.
   Self-contained — la mascotte SVG viene iniettata da js/app.js
   ========================================================================== */

:root {
  /* Brand palette (Wero) */
  --pink:     #ff3e8b;
  --magenta:  #ff2d6f;
  --coral:    #ff7a5c;
  --orange:   #ff8a3d;
  --yellow:   #ffe04a;
  --yellow-2: #fef266;
  --lime:     #cef051;
  --mint:     #6fe7c3;
  --cyan:     #6fdcea;
  --lilac:    #d6b8ff;
  --violet:   #7c3aed;

  /* Mascot accents (sage / yellow / led) */
  --sage:     #aab69a;
  --led-cyan: #74dcff;

  /* Neutrals */
  --ink:      #0a0a0a;
  --paper:    #fff8e6;
  --cream:    #fef7e1;
  --white:    #ffffff;
  --grey-50:  #faf9f5;
  --grey-100: #f0eee5;
  --grey-300: #c9c6b8;
  --grey-500: #78766a;

  /* Per-category accents (used by service cards + tool tiles) */
  --cat-finanza:     #cef051;
  --cat-misure:      #6fdcea;
  --cat-calcolatori: #ffe04a;
  --cat-internet:    #ff3e8b;
  --cat-quotidiano:  #d6b8ff;
  --cat-file:        #ff7a5c;

  /* Spacing */
  --xs: 4px;
  --sm: 12px;
  --md: 24px;
  --lg: 40px;
  --xl: 64px;
  --gutter: 24px;

  /* Radius */
  --radius: 12px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Outlines + shadows hard (neo-brutal playful) */
  --outline-w: 3px;
  --shadow-hard:    6px 6px 0 #0a0a0a;
  --shadow-hard-lg: 10px 10px 0 #0a0a0a;
  --shadow-hard-sm: 4px 4px 0 #0a0a0a;
  --shadow-sm: 0 2px 4px rgba(10,10,10,0.06);
  --shadow-md: 0 6px 12px rgba(10,10,10,0.10);
  --shadow-xl: 0 16px 30px rgba(10,10,10,0.16);

  /* Type */
  --display: 'Funnel Display', system-ui, sans-serif;
  --body:    'Inter', system-ui, -apple-system, sans-serif;
  --mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --max-w: 1320px;
  --topbar-h: 70px;

  /* Motion */
  --t-fast: 150ms cubic-bezier(.4,0,.2,1);
  --t:      260ms cubic-bezier(.4,0,.2,1);
  --spring: 320ms cubic-bezier(.34,1.56,.64,1);

  /* Legacy aliases (tool internals reference these) */
  --bg:         var(--paper);
  --bg-card:    var(--white);
  --border:     var(--grey-100);
  --text:       var(--ink);
  --text-muted: var(--grey-500);
  --primary:    var(--magenta);
  --accent:     var(--cyan);
  --finanza:    var(--cat-finanza);
  --file:       var(--cat-file);
  --scale-low:  var(--cyan);
  --scale-mid:  var(--lime);
  --scale-high: var(--yellow);
  --scale-warn: var(--magenta);
}

/* ==========================================================================
   Reset + base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: 0; color: inherit; }
input, textarea, select, button { font-family: inherit; }
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px solid var(--magenta); outline-offset: 2px; border-radius: 4px; }

/* ==========================================================================
   Typography
   ========================================================================== */
h1, h2, h3, h4 { margin: 0 0 .4em; color: var(--ink); }
h1 { font-family: var(--display); font-weight: 900; font-size: clamp(40px, 7vw, 96px); line-height: 0.95; letter-spacing: -0.03em; text-transform: lowercase; }
h2 { font-family: var(--display); font-weight: 900; font-size: clamp(32px, 5vw, 64px); line-height: 0.95; letter-spacing: -0.03em; text-transform: lowercase; }
h3 { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; }
h4 { font-family: var(--display); font-weight: 800; font-size: 16px; line-height: 1.3; }
p  { margin: 0 0 1em; }

.hl, .highlight-pill {
  display: inline-block;
  background: var(--lime);
  border: var(--outline-w) solid var(--ink);
  border-radius: 12px;
  padding: 0 14px 2px;
  margin: 0 -2px;
  transform: rotate(-1.5deg);
  box-shadow: var(--shadow-hard);
}
.hl-pink { background: var(--magenta); color: var(--white); }
.hl-mint { background: var(--mint); }
.hl-yellow { background: var(--yellow); }

.eyebrow { font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; margin: 0 0 8px; }

/* ==========================================================================
   Animated gradient background (rolling pink→coral→yellow)
   ========================================================================== */
.gradient-bg {
  position: relative;
  background:
    radial-gradient(60% 60% at 15% 25%, rgba(255, 62, 139, 0.95) 0%, transparent 65%),
    radial-gradient(55% 55% at 90% 35%, rgba(255, 138, 61, 0.85) 0%, transparent 65%),
    radial-gradient(70% 65% at 50% 100%, rgba(255, 224, 74, 0.95) 0%, transparent 70%),
    linear-gradient(135deg, #ff7a5c 0%, #ffaf3d 50%, #ffe04a 100%);
  background-size: 200% 200%, 200% 200%, 220% 220%, 100% 100%;
  animation: drift 18s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%; }
  50%      { background-position: 30% 30%, 70% 30%, 30% 80%, 0% 0%; }
}

/* ==========================================================================
   Topbar pill (sticky)
   ========================================================================== */
.topbar {
  position: sticky; top: 16px; z-index: 60;
  margin: 16px auto 0;
  max-width: 1080px;
  padding: 0 16px;
}
.topbar__inner {
  background: var(--white);
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-full);
  padding: 8px 8px 8px 22px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-hard);
}
.brand, .topbar__brand {
  font-family: var(--display); font-weight: 900; font-size: 22px;
  letter-spacing: -0.02em;
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ink);
}
.brand .dot, .topbar__brand .dot { color: var(--magenta); }
.topbar__nav {
  flex: 1;
  display: none;
  gap: 4px; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 14px;
}
@media (min-width: 720px) { .topbar__nav { display: flex; } }
.topbar__nav a {
  padding: 8px 14px;
  border-radius: var(--radius-full);
  transition: background var(--t-fast);
}
.topbar__nav a:hover { background: var(--yellow); }
.topbar__nav a.is-active { background: var(--magenta); color: var(--white); }

.topbar__search {
  position: relative;
  flex: 1;
  max-width: 380px;
}
.topbar__search > .material-symbols-outlined {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--grey-500); font-size: 18px; pointer-events: none;
}
.topbar__search input[type="search"] {
  width: 100%; height: 38px;
  padding: 0 14px 0 38px;
  font-size: 13px; font-weight: 500;
  background: var(--paper);
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  outline: none;
  color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.topbar__search input[type="search"]::placeholder { color: var(--grey-500); }
.topbar__search input[type="search"]:focus { border-color: var(--ink); background: var(--white); }

.topbar__suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--white);
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard-lg);
  padding: 8px;
  z-index: 80;
  max-height: 60vh; overflow-y: auto;
}
.suggest__item {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--ink);
  transition: background var(--t-fast);
  cursor: pointer;
}
.suggest__item .emoji { font-size: 20px; }
.suggest__item .name { font-weight: 800; font-size: 14px; font-family: var(--display); }
.suggest__item .cat { font-size: 11px; color: var(--grey-500); text-transform: uppercase; letter-spacing: 0.04em; }
.suggest__item .enter {
  font-family: var(--mono); font-size: 11px;
  background: var(--paper); color: var(--grey-500);
  border-radius: 4px; padding: 2px 6px;
}
.suggest__item:hover, .suggest__item.is-focused { background: var(--yellow); }
.suggest__empty { padding: 20px; text-align: center; color: var(--grey-500); font-size: 13px; }
.suggest__empty a { color: var(--magenta); font-weight: 700; }

.topbar__lang {
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius-full);
  padding: 8px 14px;
  font-family: var(--display); font-weight: 800; font-size: 13px;
  display: inline-flex; gap: 6px; align-items: center;
}
.topbar__lang span { padding: 0 4px; opacity: 0.4; }
.topbar__lang span.is-active { background: var(--lime); color: var(--ink); border-radius: 99px; padding: 2px 8px; opacity: 1; }

/* ==========================================================================
   Container + main
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--md);
}
@media (max-width: 640px) { .container { padding: 0 var(--sm); } }
main { padding-bottom: var(--xl); min-width: 0; }

/* ==========================================================================
   HERO (homepage)
   ========================================================================== */
.hero {
  min-height: 92vh;
  display: grid; place-items: center;
  padding: 40px 24px 80px;
  position: relative;
}
.hero__inner {
  width: 100%; max-width: 1200px;
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 40px; align-items: center;
}
@media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; text-align: center; } }

.hero h1 .accent {
  background: linear-gradient(90deg, var(--magenta), var(--violet) 70%, var(--lime));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.hero .tagline {
  font-size: 18px; font-weight: 500;
  max-width: 480px; line-height: 1.45;
  margin: 0 0 28px;
}
@media (max-width: 900px) { .hero .tagline { margin-left: auto; margin-right: auto; } }

.search-pill {
  background: var(--white);
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-full);
  padding: 6px 6px 6px 22px;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: var(--shadow-hard);
  width: 100%; max-width: 460px;
}
@media (max-width: 900px) { .search-pill { margin: 0 auto; } }
.search-pill input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 16px; padding: 8px 0;
  color: var(--ink);
}
.search-pill input::placeholder { color: rgba(10,10,10,0.5); }
.search-pill button {
  background: var(--ink); color: var(--paper);
  width: 44px; height: 44px;
  border-radius: 99px;
  font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--t-fast), background var(--t-fast);
}
.search-pill button:hover { transform: rotate(45deg); background: var(--magenta); }

.hero__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px;
}
@media (max-width: 900px) { .hero__chips { justify-content: center; } }
.hero__chip {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform var(--t-fast);
}
.hero__chip:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }

/* Mascot stage */
.mascot-stage { position: relative; display: grid; place-items: center; min-height: 480px; }
.mascot { width: 360px; height: auto; animation: float 3s ease-in-out infinite; }
@media (max-width: 900px) { .mascot { width: 280px; } }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* ==========================================================================
   Mood gallery
   ========================================================================== */
.mood-section { padding: 80px 24px; background: var(--cream); }
.mood-section h2 { max-width: 700px; margin: 0 0 50px; }
.mood-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px; max-width: 1200px; margin: 0 auto;
}
.mood-card {
  background: var(--white);
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  padding: 18px; text-align: center;
  transition: transform var(--spring);
}
.mood-card:hover { transform: translate(-3px, -4px); box-shadow: 9px 10px 0 var(--ink); }
.mood-card .face-portrait {
  background: linear-gradient(180deg, #fff7e6, #ffd9b3);
  border-radius: 16px; padding: 16px;
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.mood-card .face-portrait svg { width: 140px; height: auto; }
.mood-card strong { display: block; font-family: var(--display); font-size: 18px; font-weight: 900; text-transform: uppercase; margin-bottom: 2px; }
.mood-card span { display: block; font-size: 12px; color: rgba(10,10,10,0.65); line-height: 1.4; }

/* ==========================================================================
   Sections + numbered tilted cards (Wero "cosa fa" pattern)
   ========================================================================== */
.section { padding: 100px 24px; position: relative; }
.section__inner { max-width: 1200px; margin: 0 auto; }
.section h2 { margin: 0 0 50px; max-width: 700px; }

.phase-card {
  background: linear-gradient(135deg, var(--mint), var(--cyan));
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hard-lg);
  padding: 32px 36px;
  display: grid; grid-template-columns: 240px 1fr;
  gap: 28px; align-items: center;
  margin-bottom: 56px;
  position: relative;
  transform: rotate(-1deg);
  transition: transform var(--spring);
}
.phase-card:hover { transform: rotate(-1deg) translateY(-4px); }
.phase-card:nth-child(odd) { transform: rotate(1.2deg); margin-left: auto; max-width: 80%; }
.phase-card:nth-child(odd):hover { transform: rotate(1.2deg) translateY(-4px); }
.phase-card.c2 { background: linear-gradient(135deg, var(--magenta), var(--coral)); }
.phase-card.c3 { background: linear-gradient(135deg, var(--lilac), var(--yellow-2)); }
.phase-card__num {
  position: absolute; top: -28px; left: 36px;
  width: 56px; height: 56px;
  background: var(--white); border: var(--outline-w) solid var(--ink);
  border-radius: 99px;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 26px; font-weight: 900;
  box-shadow: var(--shadow-hard);
}
.phase-card__illu { height: 200px; display: grid; place-items: center; }
.phase-card h3 { font-family: var(--display); font-size: 30px; font-weight: 900; margin: 0 0 12px; text-transform: uppercase; }
.phase-card p { font-size: 16px; margin: 0; max-width: 380px; line-height: 1.5; }
@media (max-width: 720px) {
  .phase-card { grid-template-columns: 1fr; }
  .phase-card__illu { height: 160px; }
}

/* ==========================================================================
   Services grid (categorie)
   ========================================================================== */
.services-section { background: var(--paper); padding: 100px 24px 120px; }
.services-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px; margin-top: 48px;
}
.service-card, .tool-card {
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard);
  padding: 28px; position: relative; overflow: hidden;
  transition: transform var(--spring), box-shadow var(--t);
  cursor: pointer;
  text-align: left;
  display: flex; flex-direction: column;
  min-height: 200px;
  background: var(--white);
  color: var(--ink);
}
.service-card:hover, .tool-card:hover {
  transform: translate(-4px, -6px);
  box-shadow: 10px 12px 0 var(--ink);
}
.service-card .icon-blob, .tool-card .icon-blob {
  width: 56px; height: 56px;
  border: var(--outline-w) solid var(--ink);
  border-radius: 18px;
  display: grid; place-items: center;
  font-size: 28px;
  background: var(--white);
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-4deg);
  margin-bottom: 16px;
  transition: transform var(--spring);
}
.service-card:hover .icon-blob, .tool-card:hover .icon-blob { transform: rotate(8deg) scale(1.1); }
.service-card h3, .tool-card h3 {
  font-family: var(--display); font-size: 22px; font-weight: 900;
  margin: 0 0 6px; text-transform: uppercase;
}
.service-card p, .tool-card p { font-size: 13px; margin: 0; opacity: 0.85; line-height: 1.4; }
.service-card .count-pill, .tool-card .count-pill {
  position: absolute; top: 24px; right: 24px;
  background: var(--white); border: 2px solid var(--ink);
  border-radius: 99px; padding: 4px 12px;
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.service-card.c-finanza, .tool-card[data-cat="finanza"]     { background: linear-gradient(135deg, var(--lime), var(--mint)); }
.service-card.c-misure, .tool-card[data-cat="misure"]       { background: linear-gradient(135deg, var(--cyan), var(--lilac)); }
.service-card.c-calc, .tool-card[data-cat="calcolatori"]    { background: linear-gradient(135deg, var(--yellow), var(--orange)); }
.service-card.c-internet, .tool-card[data-cat="internet"]   { background: linear-gradient(135deg, var(--magenta), var(--coral)); }
.service-card.c-quotidiano, .tool-card[data-cat="quotidiano"] { background: linear-gradient(135deg, var(--lilac), var(--yellow-2)); }
.service-card.c-file, .tool-card[data-cat="file"]           { background: linear-gradient(135deg, var(--coral), var(--yellow)); }

/* "Featured" tile (tool del giorno) */
.featured-tile {
  background: linear-gradient(135deg, var(--magenta), var(--coral) 55%, var(--yellow));
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hard-lg);
  padding: 40px;
  display: grid; grid-template-columns: 1fr 320px;
  gap: 32px; align-items: center;
  margin-top: 60px;
  position: relative; overflow: hidden;
  color: var(--ink);
}
@media (max-width: 720px) { .featured-tile { grid-template-columns: 1fr; } }
.featured-tile h3 {
  font-family: var(--display); font-size: clamp(28px, 4vw, 44px);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 1; margin: 0 0 16px;
}
.featured-tile p { font-size: 16px; max-width: 440px; margin: 0 0 24px; }
.featured-tile .cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius-full);
  padding: 14px 24px;
  font-family: var(--display); font-weight: 800; font-size: 16px;
  border: var(--outline-w) solid var(--ink);
  box-shadow: 4px 4px 0 var(--white);
  transition: transform var(--t-fast);
}
.featured-tile .cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--white); }

/* ==========================================================================
   Suggest CTA + Bacheca
   ========================================================================== */
.suggest-cta {
  margin-top: var(--xl);
  background: linear-gradient(135deg, var(--ink), #1f2419);
  color: var(--paper);
  border-radius: var(--radius-xl);
  padding: var(--lg);
  display: grid; grid-template-columns: 1fr;
  gap: var(--md);
  position: relative; overflow: hidden;
}
.suggest-cta::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, var(--magenta), transparent 70%);
  opacity: 0.32; pointer-events: none;
}
.suggest-cta > * { position: relative; z-index: 1; }
.suggest-cta h2 { color: var(--lime); margin-bottom: var(--xs); }
.suggest-cta p { color: rgba(255,248,230,0.78); margin: 0; }
#suggest-form { display: grid; gap: var(--sm); margin-top: var(--md); }
#suggest-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sm); }
@media (max-width: 560px) { #suggest-form .row { grid-template-columns: 1fr; } }
.suggest-cta .field { display: flex; flex-direction: column; gap: 6px; }
.suggest-cta .field label { font-size: 13px; font-weight: 600; color: rgba(255,248,230,0.85); }
.suggest-cta .field input, .suggest-cta .field textarea, .suggest-cta .field select {
  width: 100%; padding: 12px 14px;
  font-size: 15px;
  background: var(--white); color: var(--ink);
  border: 2px solid transparent;
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--t-fast);
}
.suggest-cta .field textarea { resize: vertical; min-height: 80px; }
.suggest-cta .field input:focus, .suggest-cta .field textarea:focus, .suggest-cta .field select:focus { border-color: var(--magenta); }
.suggest-cta button[type="submit"], button.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px;
  background: var(--magenta); color: var(--white);
  font-family: var(--display); font-weight: 800; font-size: 15px;
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-hard-sm);
  transition: transform var(--t-fast);
  width: fit-content;
}
.suggest-cta button[type="submit"]:hover, button.btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

.bacheca { margin-top: var(--xl); padding: 0 24px; }
.bacheca .container { padding: 0; }
.suggestion-list { display: grid; gap: var(--sm); margin-top: var(--md); }
.suggestion {
  display: flex; align-items: center; gap: var(--md);
  padding: var(--sm) var(--md);
  background: var(--white);
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard-sm);
  transition: transform var(--t-fast);
}
.suggestion:hover { transform: translateX(2px); }
.suggestion .text { flex: 1; }
.suggestion .text strong { display: block; font-family: var(--display); font-weight: 800; color: var(--ink); }
.suggestion .text small { color: var(--grey-500); font-size: 12px; }
.suggestion .vote-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
  font-family: var(--display); font-weight: 800; font-size: 13px;
  transition: all var(--t-fast);
}
.suggestion .vote-btn:hover, .suggestion .vote-btn.voted {
  background: var(--magenta); color: var(--white); border-color: var(--ink);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  margin-top: var(--xl);
  background: var(--ink);
  color: var(--paper);
  padding: var(--lg) 0;
}
.site-footer .inner {
  max-width: var(--max-w); margin: 0 auto;
  padding: 0 var(--md);
  display: flex; flex-direction: column;
  gap: var(--md);
  align-items: center; text-align: center;
}
@media (min-width: 768px) {
  .site-footer .inner { flex-direction: row; justify-content: space-between; text-align: left; }
}
.site-footer .brand { color: var(--paper); }
.site-footer .copyright { font-size: 12px; color: rgba(255,248,230,0.6); }
.site-footer .links { display: flex; gap: var(--md); flex-wrap: wrap; }
.site-footer .links a {
  color: rgba(255,248,230,0.85); font-family: var(--display); font-weight: 700; font-size: 14px;
  transition: color var(--t-fast);
}
.site-footer .links a:hover { color: var(--lime); }

/* ==========================================================================
   Mascot floating bottom-right
   ========================================================================== */
.mascot-floating {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 90;
  width: 88px; height: 88px;
  background: var(--white);
  border: var(--outline-w) solid var(--ink);
  border-radius: 99px;
  box-shadow: var(--shadow-hard);
  display: grid; place-items: center;
  cursor: pointer;
  animation: bob 2.6s ease-in-out infinite;
  transition: transform var(--t-fast);
}
.mascot-floating:hover { transform: scale(1.08) rotate(-5deg); }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.mascot-floating svg { width: 60px; }
.mascot-floating .speech {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin-bottom: 14px;
  background: var(--white);
  border: var(--outline-w) solid var(--ink);
  border-radius: 18px;
  padding: 10px 14px;
  font-family: var(--display); font-weight: 800; font-size: 13px;
  box-shadow: var(--shadow-hard-sm);
  max-width: 240px;
  white-space: normal;
  text-align: left;
  line-height: 1.35;
  transform: rotate(-2deg);
  animation: pop-in 320ms cubic-bezier(.34,1.56,.64,1);
}
.mascot-floating .speech::after {
  content: ''; position: absolute;
  bottom: -12px; right: 32px;
  width: 18px; height: 18px;
  background: var(--white);
  border-right: var(--outline-w) solid var(--ink);
  border-bottom: var(--outline-w) solid var(--ink);
  transform: rotate(45deg);
}
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.6) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(-2deg); }
}

/* Confetti burst (used by tools on celebration) */
.tf-confetti {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  width: 10px; height: 16px;
  border-radius: 2px;
  animation: confetti-fall 1.6s ease-out forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(60vh) rotate(720deg); opacity: 0; }
}

/* ==========================================================================
   Tool page layout (single-column with pill topbar)
   ========================================================================== */
.tool-shell { max-width: 1100px; margin: 32px auto; padding: 0 24px 80px; }

.breadcrumb {
  font-family: var(--display); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.04em;
  display: flex; gap: 6px; align-items: center;
  margin: var(--md) 0;
}
.breadcrumb a { color: var(--grey-500); transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--magenta); }
.breadcrumb .dot { color: var(--magenta); }
.breadcrumb .current { color: var(--ink); font-weight: 800; }
.breadcrumb .material-symbols-outlined { font-size: 16px; color: var(--grey-500); }

.tool-header {
  display: grid; grid-template-columns: 1fr auto;
  gap: 40px; align-items: end;
  margin-bottom: 36px;
  position: relative;
}
@media (max-width: 720px) { .tool-header { grid-template-columns: 1fr; } }
.tool-header h1 { margin: 8px 0 12px; }
.tool-header .lead, .tool-header p.lead { font-size: 17px; max-width: 540px; margin: 0; line-height: 1.5; color: var(--ink); }
.tool-header .icon-large {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  background: var(--lime); color: var(--ink);
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-lg);
  font-size: 36px;
  margin-bottom: var(--md);
  box-shadow: var(--shadow-hard-sm);
  transform: rotate(-3deg);
}

.fav-toggle, .fav-btn {
  width: 48px; height: 48px;
  background: var(--white);
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-hard-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  transition: transform var(--t-fast);
  color: var(--ink);
}
.fav-toggle:hover, .fav-btn:hover { transform: rotate(15deg) scale(1.1); }
.fav-toggle.is-on { background: var(--magenta); color: var(--white); }
.fav-toggle.is-on .material-symbols-outlined { font-variation-settings: 'FILL' 1, 'wght' 700; }

/* ==========================================================================
   Panel + Result (tool internals)
   Compat layer for tool-card-panel and legacy .result blocks.
   ========================================================================== */
.panel, .tool-card-panel {
  background: var(--white);
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hard);
  padding: var(--md);
  display: flex; flex-direction: column;
  gap: var(--md);
}
.panel-title {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: var(--md);
  font-family: var(--display); font-size: 22px; font-weight: 900;
  text-transform: uppercase;
}

.tool-layout, .layout-tool {
  display: grid; grid-template-columns: 1fr;
  gap: var(--gutter); margin-top: var(--lg);
}
@media (min-width: 1024px) {
  .tool-layout { grid-template-columns: 5fr 7fr; }
  .layout-tool { grid-template-columns: 5fr 7fr; }
}
.layout-tool > div > article { display: flex; flex-direction: column; gap: var(--md); }

/* Form inside a panel */
.form-grid { display: grid; gap: var(--sm); }
.form-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .form-grid.cols-2 { grid-template-columns: 1fr; }
  .form-grid.cols-3 { grid-template-columns: 1fr; }
}
.form-grid .full { grid-column: 1 / -1; }
.form-grid label, .field label {
  display: block;
  font-size: 13px; font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.form-grid input, .form-grid select, .form-grid textarea,
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  outline: none;
  transition: box-shadow var(--t-fast), background var(--t-fast);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus {
  background: var(--white);
  box-shadow: 3px 3px 0 var(--magenta);
}
.tool-page .field { display: flex; flex-direction: column; gap: 6px; }

.form-grid button[type="submit"], .tool-card-panel button[type="submit"], .btn-large {
  width: 100%;
  padding: 16px 20px;
  background: var(--ink); color: var(--paper);
  font-family: var(--display); font-weight: 800; font-size: 16px;
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-hard-sm);
  transition: transform var(--t-fast), background var(--t-fast);
  cursor: pointer;
}
.form-grid button[type="submit"]:hover, .tool-card-panel button[type="submit"]:hover, .btn-large:hover {
  transform: translate(-2px, -2px);
  background: var(--magenta);
  box-shadow: 6px 6px 0 var(--ink);
}
button.secondary, .btn-secondary {
  padding: 14px 22px;
  background: var(--white); color: var(--ink);
  border-radius: var(--radius-full);
  font-family: var(--display); font-weight: 800; font-size: 14px;
  border: var(--outline-w) solid var(--ink);
  box-shadow: var(--shadow-hard-sm);
  transition: transform var(--t-fast);
}
button.secondary:hover, .btn-secondary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }

/* Result card (new pattern) */
.result-card {
  background: var(--cream);
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-xl);
  padding: var(--lg) var(--md);
  text-align: center;
  position: relative; overflow: hidden;
}
.result-card .badge {
  position: absolute; top: var(--md); right: var(--md);
  background: var(--magenta); color: var(--white);
  border: 2px solid var(--ink);
  padding: 4px 12px;
  font-family: var(--display); font-size: 12px; font-weight: 800;
  border-radius: var(--radius-full);
  display: inline-flex; align-items: center; gap: 4px;
  transform: rotate(-3deg);
}
.result-card .big {
  font-family: var(--display);
  font-size: clamp(48px, 8vw, 80px);
  font-weight: 900; line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.result-card .unit { font-size: 16px; font-weight: 700; color: var(--grey-500); margin-left: 6px; }
.result-card .pill {
  display: inline-block;
  margin: var(--sm) 0;
  padding: 6px 16px;
  background: var(--ink); color: var(--paper);
  font-family: var(--display); font-weight: 800; font-size: 14px;
  border-radius: var(--radius-full);
}
.result-card .desc { margin: 0 auto; max-width: 360px; font-size: 14px; }

/* Legacy .result (old tool internals) — same look as result-card */
.result {
  background: var(--cream);
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-xl);
  padding: var(--lg) var(--md);
  text-align: center;
  position: relative; overflow: hidden;
  margin-top: var(--sm);
}
.result.tone-success { border-top: 6px solid var(--lime); }
.result .label {
  font-family: var(--display);
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--grey-500);
  margin-bottom: 8px;
}
.result .big {
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 72px); font-weight: 900; line-height: 1;
  letter-spacing: -0.03em;
  display: block; margin: 4px 0;
}
.result .friendly { margin-top: var(--md); font-size: 14px; color: var(--grey-500); line-height: 1.5; }
.result table { width: 100%; margin-top: var(--md); border-collapse: collapse; text-align: left; }
.result table td { padding: 10px 0; border-bottom: 1px solid var(--grey-100); font-size: 14px; }
.result table td:last-child { text-align: right; font-weight: 700; }

/* Result table */
.result-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.result-table td { padding: 10px 0; border-bottom: 1px solid var(--grey-100); }
.result-table td:first-child { color: var(--grey-500); font-weight: 600; }
.result-table td:last-child { text-align: right; font-weight: 800; }

/* Action row + copy button */
.action-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: var(--md); }
.copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
  font-family: var(--display); font-size: 13px; font-weight: 800;
  box-shadow: var(--shadow-hard-sm);
  transition: transform var(--t-fast);
}
.copy-btn:hover { transform: translate(-2px, -2px); background: var(--lime); box-shadow: 6px 6px 0 var(--ink); }

/* Tabs */
.tab-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: var(--paper);
  padding: 4px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
  margin-bottom: var(--md);
}
.tab-row button {
  padding: 10px 14px;
  background: transparent; color: var(--grey-500);
  border-radius: var(--radius-full);
  font-family: var(--display); font-weight: 800; font-size: 14px;
  transition: all var(--t-fast);
}
.tab-row button.secondary { background: transparent; box-shadow: none; padding: 10px 14px; border: 0; }
.tab-row button:not(.secondary), .tab-row button[aria-selected="true"] {
  background: var(--ink); color: var(--paper);
}

/* Swap button */
.swap-btn {
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), transform var(--t);
}
.swap-btn:hover { background: var(--lime); transform: rotate(180deg); }

/* ==========================================================================
   Visualizations (scale-bar, timer-ring, sparkline, speed-stage, qr-stage)
   Compat layer for existing tool JS.
   ========================================================================== */
.scale-card { margin-top: var(--gutter); }
.scale-card h4 { margin: 0 0 var(--md); font-family: var(--display); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey-500); }
.scale-bar-wrap { position: relative; padding-top: 28px; }
.scale-indicator { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.scale-indicator .bar { width: 2px; height: 22px; background: var(--ink); border-radius: 2px; }
.scale-indicator .label { position: absolute; top: 26px; font-family: var(--display); font-size: 10px; font-weight: 900; color: var(--ink); }
.scale-bar { height: 14px; width: 100%; display: flex; border-radius: var(--radius-full); overflow: hidden; border: 2px solid var(--ink); }
.scale-bar > span { display: block; height: 100%; }
.scale-axis { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--display); font-size: 10px; font-weight: 800; color: var(--grey-500); }
.scale-legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: var(--md); font-size: 12px; }
@media (min-width: 640px) { .scale-legend { grid-template-columns: repeat(4, 1fr); } }
.scale-legend > div { display: flex; align-items: center; gap: 6px; }
.scale-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.timer-ring { position: relative; max-width: 240px; margin: 0 auto; }
.timer-ring svg { width: 100%; height: auto; transform: rotate(-90deg); }
.tr-bg { fill: none; stroke: var(--grey-100); stroke-width: 6; }
.tr-fill { fill: none; stroke: var(--magenta); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset var(--t); }
.timer-ring-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.mono-display { font-family: var(--mono); font-size: 56px; font-weight: 700; letter-spacing: -0.02em; text-align: center; color: var(--ink); }
.lap-list { list-style: none; margin: var(--md) 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lap-list li { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); font-family: var(--mono); font-size: 13px; }

.sparkline { margin-top: var(--md); }
.sparkline svg { width: 100%; height: 50px; }
.spark-line { stroke: var(--magenta); stroke-width: 2; fill: none; }
.spark-area { fill: rgba(255, 62, 139, 0.15); }

.speed-stage {
  background: radial-gradient(120% 100% at 50% 0%, #112437 0%, #0a1424 60%, #050a14 100%);
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-xl);
  padding: var(--md);
  color: var(--paper);
  position: relative; overflow: hidden;
}
.speed-chart { background: rgba(255,255,255,0.02); border-radius: var(--radius-lg); padding: 6px; }
.speed-legend { display: flex; gap: 16px; align-items: center; margin-top: 10px; font-size: 12px; font-weight: 600; }
.speed-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; }
.speed-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: var(--md); }
.speed-stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--radius-lg); padding: 12px; text-align: center; }
.speed-stat .num { font-family: var(--display); font-size: 28px; font-weight: 900; color: var(--c, var(--paper)); text-shadow: 0 0 12px var(--c); }
.speed-stat .lab { font-size: 11px; color: rgba(255,248,230,0.7); margin-top: 2px; }

.qr-stage {
  background: var(--paper);
  border: 2px dashed var(--ink);
  border-radius: var(--radius-lg);
  padding: var(--md);
  display: flex; justify-content: center;
}

/* Tips card */
.tips-card, .mascot-tip {
  background: var(--white);
  border: var(--outline-w) solid var(--ink);
  border-left: 8px solid var(--magenta);
  border-radius: var(--radius-lg);
  padding: var(--md);
  box-shadow: var(--shadow-hard-sm);
  margin-top: var(--gutter);
}
.tips-card h4 {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 12px;
  font-family: var(--display); font-size: 14px; font-weight: 900;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--magenta);
}
.tips-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tips-card li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14px; }
.tips-card li .ico { font-size: 16px; }
.tips-card li .body { color: var(--ink); line-height: 1.5; }

/* Mascot-tip (legacy from old tools) */
.mascot-tip { display: grid; grid-template-columns: 56px 1fr; gap: var(--md); align-items: start; }
.mascot-tip .mascot {
  width: 48px; height: 48px;
  font-size: 30px;
  background: var(--lime);
  border: 2px solid var(--ink);
  border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  animation: none;
}
.mascot-tip strong {
  display: block; font-family: var(--display); font-weight: 900;
  font-size: 13px; color: var(--magenta);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
}
.mascot-tip p { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.55; }

/* Info bento + info-card */
.info-bento { display: grid; grid-template-columns: 1fr; gap: var(--md); margin-top: var(--lg); }
@media (min-width: 640px) { .info-bento { grid-template-columns: 1fr 1fr; } }
.info-card {
  display: flex; gap: var(--md);
  padding: var(--md);
  background: var(--white);
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-hard-sm);
}
.info-card .ico {
  flex-shrink: 0;
  width: 48px; height: 48px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-4deg);
}
.info-card h4 { margin: 0 0 4px; font-family: var(--display); font-size: 16px; font-weight: 800; }
.info-card p { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.5; }

/* KPI grid (legacy) */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sm); margin-top: var(--md); }
.kpi { padding: var(--sm); background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius); text-align: center; }
.kpi .lab { font-family: var(--display); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey-500); }
.kpi .val { font-family: var(--display); font-size: 22px; font-weight: 900; color: var(--ink); }

/* Prose */
.prose { max-width: 760px; font-size: 16px; color: var(--ink); }
.prose h2 { font-size: 28px; margin-top: var(--lg); }
.prose h3 { font-size: 20px; margin-top: var(--md); }
.prose code { background: var(--paper); padding: 2px 6px; border-radius: var(--radius); font-family: var(--mono); font-size: 14px; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--md) 0; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--grey-100); }
.prose th { background: var(--paper); font-weight: 800; }

/* FAQ accordion (SEO-driven) */
.faq-accordion details {
  background: var(--white);
  border: var(--outline-w) solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 4px 18px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-hard-sm);
}
.faq-accordion summary {
  cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 800; font-size: 15px;
  padding: 14px 0;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-accordion summary::after { content: '+'; font-size: 26px; color: var(--magenta); transition: transform var(--t); }
.faq-accordion details[open] summary::after { transform: rotate(45deg); }
.faq-accordion p { margin: 0 0 14px; color: var(--ink); line-height: 1.6; }

/* ==========================================================================
   Ad slots — playful, coherent
   ========================================================================== */
.ad-slot {
  position: relative;
  background: var(--cream);
  border: var(--outline-w) dashed var(--ink);
  border-radius: var(--radius-lg);
  min-height: 110px;
  display: grid; place-items: center;
  padding: 24px;
  margin: 40px 0;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(10,10,10,0.55);
}
.ad-slot::before {
  content: 'Sponsorizzato';
  position: absolute;
  top: -14px; left: 24px;
  background: var(--magenta); color: var(--white);
  border: 2px solid var(--ink);
  border-radius: 99px;
  padding: 4px 12px;
  font-family: var(--display);
  font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 var(--ink);
}
.ad-slot__placeholder { color: rgba(10,10,10,0.55); font-style: italic; font-weight: 600; text-transform: none; letter-spacing: 0; }
.ad-slot--rectangle { min-height: 260px; }
.ad-slot--in-feed { border-style: solid; background: var(--white); min-height: 200px; margin: 0; }
.ad-slot.top, .ad-slot.bottom { min-height: 90px; }
.ad-slot.sidebar { min-height: 280px; flex: 1; }

/* ==========================================================================
   Utilities
   ========================================================================== */
.center { text-align: center; }
.spacer { height: var(--md); }
.hidden { display: none !important; }
.divider { height: var(--outline-w); background: var(--ink); border-radius: 99px; margin: var(--lg) 0; }
.text-muted { color: var(--grey-500); }

/* ==========================================================================
   Mascot 5 expressions (CSS vars switch via [data-mood])
   ========================================================================== */
.mascot, .face-portrait, .mood-card, .mascot-runner {
  --eyes-idle: block; --eyes-happy: none; --eyes-thinking: none; --eyes-wow: none; --eyes-running: none;
  --mouth-idle: block; --mouth-happy: none; --mouth-thinking: none; --mouth-wow: none; --mouth-running: none;
}
[data-mood="happy"]    { --eyes-idle: none; --eyes-happy: block;    --mouth-idle: none; --mouth-happy: block; }
[data-mood="thinking"] { --eyes-idle: none; --eyes-thinking: block; --mouth-idle: none; --mouth-thinking: block; }
[data-mood="wow"]      { --eyes-idle: none; --eyes-wow: block;      --mouth-idle: none; --mouth-wow: block; }
[data-mood="running"]  { --eyes-idle: none; --eyes-running: block;  --mouth-idle: none; --mouth-running: block; }

@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%, 98%      { transform: scaleY(0.1); }
}
.m-eyes-idle { transform-origin: center; animation: blink 5s ease-in-out infinite; }
@keyframes ant-tilt {
  0%, 100% { transform: rotate(-1deg); }
  50%      { transform: rotate(4deg); }
}
.m-ant   { animation: ant-tilt 3.4s ease-in-out infinite; }
.m-ant-2 { animation: ant-tilt 3.4s ease-in-out infinite reverse; }
[data-mood="running"] .m-ant   { animation: ant-back-l 0.5s ease-in-out infinite alternate; }
[data-mood="running"] .m-ant-2 { animation: ant-back-r 0.5s ease-in-out infinite alternate; }
@keyframes ant-back-l { 0% { transform: rotate(-22deg); } 100% { transform: rotate(-12deg); } }
@keyframes ant-back-r { 0% { transform: rotate(22deg); }  100% { transform: rotate(12deg); } }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .swap-btn:hover { transform: none; }
}