/* Aesthetic frames on the live page. They never replace the study engine. */

html[data-skin-frame="carta"] {
  --paper: #f4eee4;
  --ink: #1c1915;
  --muted: #7a7266;
  --gold: #c9842a;
  --card: #fffdf8;
  --card-ink: #1c1915;
  --pane: #f7f1e6;
  --btn: #1c1915;
}
html[data-skin-frame="carta"] body,
html[data-skin-frame="carta"] .forest {
  background-color: #f3eadc !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(90, 55, 20, 0.035) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 80% 0%, rgba(255, 255, 255, 0.65), transparent 46%),
    linear-gradient(180deg, #f7f1e6 0%, #e7dcc8 100%) !important;
}
html[data-skin-frame="carta"] .wrap {
  background: rgba(255, 252, 246, 0.78);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(70, 42, 12, 0.1);
}
html[data-skin-frame="carta"] .beam,
html[data-skin-frame="carta"] .sky-stars { opacity: 0.15; }
html[data-skin-frame="carta"] .plainly-blur {
  filter: blur(7px);
  user-select: none;
  pointer-events: none;
}
html[data-skin-frame="carta"] .brand {
  font-size: 0;
}
html[data-skin-frame="carta"] .brand small {
  display: none;
}

html[data-skin-frame="verde"] {
  --paper: #1a2820;
  --ink: #f3efe6;
  --gold: #e6c56a;
  --card: #d9d0c0;
  --card-ink: #1c1915;
  --pane: #cfc6b4;
  --btn: #c4a15a;
}
html[data-skin-frame="verde"] body,
html[data-skin-frame="verde"] .forest {
  background:
    radial-gradient(ellipse at 50% -8%, #7eae86 0%, transparent 42%),
    radial-gradient(ellipse at 50% 110%, #0a120e 0%, transparent 46%),
    linear-gradient(180deg, #3d5c48 0%, #1a2820 42%, #101812 100%) !important;
}
html[data-skin-frame="verde"] .wrap > header {
  border-bottom: 1px solid rgba(230, 197, 106, 0.45);
}

html[data-skin-frame="phone"] {
  --paper: #24362c;
  --ink: #f4efe4;
  --gold: #e4c56a;
  --card: #efe6d6;
  --card-ink: #1a1610;
  --btn: #d7b15a;
}
html[data-skin-frame="phone"] .wrap {
  max-width: 390px;
  min-height: 100dvh;
  border-radius: 32px;
  padding-left: 10px;
  padding-right: 10px;
  background: #101814;
  box-shadow:
    0 0 0 10px #1a1814,
    0 0 0 12px #3a3228,
    0 28px 70px rgba(0, 0, 0, 0.45);
}
html[data-skin-frame="phone"] h1 { letter-spacing: -0.03em; }

html[data-skin-frame="archivio"] .sky-stars,
html[data-skin-frame="archivio"] .beam { display: none; }
html[data-skin-frame="archivio"] body,
html[data-skin-frame="archivio"] .forest {
  background: #0c1210 !important;
}
html[data-skin-frame="archivio"] .wrap {
  background: linear-gradient(180deg, rgba(18, 36, 28, 0.94), rgba(10, 16, 14, 0.96));
  box-shadow:
    7px 7px 0 rgba(0, 0, 0, 0.35),
    14px 14px 0 rgba(28, 48, 36, 0.55);
}

html[data-skin-frame="alba"] body,
html[data-skin-frame="alba"] .forest,
html[data-skin-frame="alba"] .beam,
html[data-skin-frame="costellazione"] body,
html[data-skin-frame="costellazione"] .forest,
html[data-skin-frame="costellazione"] .beam,
html[data-skin-frame="biblioteca"] body,
html[data-skin-frame="biblioteca"] .forest,
html[data-skin-frame="biblioteca"] .beam,
html[data-skin-frame="eclissi"] body,
html[data-skin-frame="eclissi"] .forest,
html[data-skin-frame="eclissi"] .beam,
html[data-skin-frame="quercia"] body,
html[data-skin-frame="quercia"] .forest,
html[data-skin-frame="quercia"] .beam {
  background: transparent !important;
  background-image: none !important;
}
#skinMotion {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#skinMotion.skinMotion--tall {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: auto;
}
html[data-skin-frame="alba"] body::after,
html[data-skin-frame="costellazione"] body::after,
html[data-skin-frame="biblioteca"] body::after,
html[data-skin-frame="eclissi"] body::after,
html[data-skin-frame="quercia"] body::after,
html[data-look][data-skin-frame="alba"] body::after,
html[data-look][data-skin-frame="costellazione"] body::after,
html[data-look][data-skin-frame="biblioteca"] body::after,
html[data-look][data-skin-frame="eclissi"] body::after,
html[data-look][data-skin-frame="quercia"] body::after {
  background: none;
}

.founder-badge {
  display: none;
  margin: 0 0 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #1a1610;
  background: #f0d060;
}
html[data-founder="1"] .founder-badge { display: inline-block; }
html[data-founder="1"][data-founder-badge="0"] .founder-badge { display: none; }
.founder-note { font-size: 12px; color: var(--muted); margin: 6px 0 0; }

#flyleafMascot {
  position: fixed;
  z-index: 57;
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#mascotCare {
  position: fixed;
  z-index: 60;
  right: max(18px, env(safe-area-inset-right));
  bottom: calc(84px + env(safe-area-inset-bottom));
  max-width: min(260px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--card, #2a2822);
  color: var(--card-ink, #eee6d4);
  font-size: 13px;
  line-height: 1.35;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}