/* Flower Bloom : habillage façon interface de jeu (ciel, parchemin, dorures) */
:root {
  --sky: #8ED4F7;
  --sky-low: #FFDDEE;
  --parch: #FFF8E8;
  --parch-2: #F9EBCB;
  --gold: #E6B040;
  --gold-light: #FFE9A6;
  --gold-deep: #A9690F;
  --bark: #5B2C12;
  --plum: #3A1638;
  --soft: #6E4E5E;
  --violet: #7B2FBE;
  --violet-deep: #54198A;
  --pink: #EE4F97;
  --leaf: #3FA83A;
  --leaf-deep: #23731F;
  --ok: #1E6E33;
  --err: #A81E3A;
  --display: "Lilita One", "Arial Black", "Trebuchet MS", sans-serif;
  --body: "Nunito", "Segoe UI", Arial, sans-serif;
  --frame: 0 0 0 2px var(--bark), 0 7px 0 2px rgba(58, 22, 56, .22);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #F9CFE6; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  color: var(--plum); font: 400 1.0625rem/1.6 var(--body);
  background: linear-gradient(180deg, var(--sky) 0, #BFE6FA 420px, var(--sky-low) 1100px, #F9CFE6 100%);
}
main { flex: 1; padding-bottom: 72px; }
img { max-width: 100%; }
a { color: var(--violet); text-underline-offset: 3px; font-weight: 700; }
a:hover { color: var(--violet-deep); }
:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px var(--violet-deep); border-radius: 8px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: .01em; }
h1 { font-size: clamp(2.2rem, 5vw, 3.1rem); color: var(--violet-deep); }
h2 { font-size: 1.55rem; color: var(--bark); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
code { font-family: Consolas, "Courier New", monospace; font-size: .92em; background: var(--parch-2); border: 1px solid #E3CC98; padding: .05em .35em; border-radius: 5px; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.muted { color: var(--soft); }
.lead { font-size: 1.15rem; color: var(--soft); max-width: 62ch; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--plum); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }

/* ---------- la fleur ---------- */
.flower { position: relative; display: inline-block; width: var(--size, 40px); aspect-ratio: 1; flex: none; }
.flower .petal {
  position: absolute; left: 50%; top: 50%; width: 27%; height: 47%; margin: -47% 0 0 -13.5%;
  border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
  background: linear-gradient(180deg, #FF9CC8, var(--pink));
  transform-origin: 50% 100%; transform: rotate(var(--r));
}
.flower .petal.back { background: linear-gradient(180deg, #C08CF0, var(--violet)); width: 30%; height: 50%; margin: -50% 0 0 -15%; }
.flower .heart {
  position: absolute; left: 50%; top: 50%; width: 22%; aspect-ratio: 1; margin: -11% 0 0 -11%;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF0A8, var(--gold));
}
.flower.mini { --size: 36px; }
.flower.small { --size: 64px; }
.flower.giant { --size: min(440px, 76vw); filter: drop-shadow(0 10px 0 rgba(58, 22, 56, .16)); }
.flower.giant .petal { animation: bloom .9s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: var(--d); }
.flower.giant .heart { animation: pop .5s ease-out .65s both; }
@keyframes bloom { from { transform: rotate(calc(var(--r) - 40deg)) scale(0); } to { transform: rotate(var(--r)) scale(1); } }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .flower.giant .petal, .flower.giant .heart { animation: none; } }

/* ---------- barre du haut (comme la barre de menu du jeu) ---------- */
.top {
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, #9A52E0 0, var(--violet) 45%, var(--violet-deep) 100%);
  border-bottom: 3px solid var(--gold); box-shadow: 0 2px 0 var(--bark), inset 0 2px 0 rgba(255, 255, 255, .28);
}
.top-in { display: flex; align-items: center; gap: 28px; min-height: 70px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font: 400 1.5rem var(--display); white-space: nowrap; text-shadow: 0 2px 0 var(--plum); }
.brand:hover { color: #fff; }
.nav { display: flex; gap: 6px; flex: 1; }
.nav a { padding: 7px 15px; border-radius: 10px; text-decoration: none; color: #fff; font-weight: 700; white-space: nowrap; border: 2px solid transparent; }
.nav a:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.nav a[aria-current="page"] {
  background: linear-gradient(180deg, var(--gold-light), var(--gold)); color: var(--bark);
  border-color: var(--bark); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6);
}
.who { display: flex; align-items: center; gap: 16px; }
.link-quiet { color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; }
.link-quiet:hover { color: #fff; text-decoration: underline; }

/* ---------- boutons « gemme » ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  padding: 9px 20px 11px; border-radius: 12px; border: 2px solid var(--bark);
  font: 700 1rem var(--body); text-decoration: none; white-space: nowrap; color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .2), 0 3px 0 rgba(58, 22, 56, .28);
  transition: filter .12s, transform .08s;
}
.btn:hover { filter: brightness(1.08); color: #fff; }
.btn:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .2); }
.btn-main { background: linear-gradient(180deg, #A45BE6, var(--violet) 55%, #6423A6); }
.btn-play { background: linear-gradient(180deg, #5CC653, var(--leaf) 50%, #2C8A2A); }
.btn-ghost, .btn-soft { background: linear-gradient(180deg, #FFF6D2, var(--gold-light) 50%, #F5CE6C); color: var(--bark); text-shadow: none; }
.btn-ghost:hover, .btn-soft:hover { color: var(--bark); }
.btn-discord { background: linear-gradient(180deg, #7C87FF, #5865F2 55%, #3F4BD0); }
.btn-off { background: #E9DFCB; color: #6B5B4A; text-shadow: none; cursor: default; box-shadow: none; border-color: #B8A78A; }
.btn-off:hover { filter: none; color: #6B5B4A; }
.btn-big { padding: 13px 28px 15px; font-size: 1.12rem; border-radius: 14px; }
.btn-wide { width: 100%; margin-top: 26px; padding: 13px 14px 15px; }

/* ---------- messages ---------- */
.msg { padding: 12px 16px; border-radius: 10px; margin: 0 0 18px; font-weight: 700; border: 2px solid; }
.msg-ok { background: #E4F6DF; border-color: #6DB862; color: var(--ok); }
.msg-err { background: #FFE5E9; border-color: #E08A9A; color: var(--err); }
.flash { padding-top: 22px; }
.flash .msg { box-shadow: var(--frame); border-color: transparent; margin: 0; }

/* ---------- fenêtres parchemin (comme les fenêtres du jeu) ---------- */
main > .page, main > .panel, main > .start, main > .two, .sheet {
  background: linear-gradient(180deg, var(--parch), var(--parch-2));
  border: 3px solid var(--gold); border-radius: 18px;
  box-shadow: inset 0 0 0 2px var(--gold-light), var(--frame);
}
main > .page, main > .panel, main > .start, main > .two { width: calc(100% - 48px); margin-top: 44px; padding: 40px 44px 44px; }

/* ---------- accueil ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 3px solid var(--bark); }
.hero.has-img { background-size: cover; background-position: center; }
.hero::before {   /* nuages */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 90px 34px at 12% 18%, #fff 98%, transparent),
    radial-gradient(ellipse 60px 30px at 16% 14%, #fff 98%, transparent),
    radial-gradient(ellipse 70px 26px at 46% 9%, rgba(255, 255, 255, .85) 98%, transparent),
    radial-gradient(ellipse 110px 38px at 88% 24%, #fff 98%, transparent),
    radial-gradient(ellipse 70px 34px at 84% 19%, #fff 98%, transparent);
}
.hero::after {    /* collines */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 150' preserveAspectRatio='none'%3E%3Cpath d='M0 95 C180 30 330 40 520 85 S860 130 1050 70 1320 30 1440 70 V150 H0Z' fill='%2396DB7C'/%3E%3Cpath d='M0 120 C220 70 420 110 640 115 S1020 70 1210 100 1380 120 1440 105 V150 H0Z' fill='%2361C257'/%3E%3Cpath d='M0 140 C300 115 520 145 760 135 S1200 120 1440 138 V150 H0Z' fill='%233FA83A'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}
.hero.has-img::before, .hero.has-img::after { display: none; }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 24px; padding-top: 54px; padding-bottom: 150px; }
.hero h1 {
  font-size: clamp(3.4rem, 10vw, 6.6rem); line-height: .92; color: #fff;
  -webkit-text-stroke: 12px var(--violet-deep); paint-order: stroke fill;
  text-shadow: 0 8px 0 var(--plum); padding: 6px 0 12px 6px;
}
.hero-lead {
  font-size: 1.2rem; font-weight: 600; color: var(--plum); max-width: 36ch; margin: 22px 0 26px;
  background: rgba(255, 248, 232, .88); border: 2px solid var(--gold); border-radius: 14px; padding: 12px 16px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 24px; }
.hero-art { display: flex; justify-content: center; }
.status { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.status li {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px; font-weight: 700; font-size: .95rem;
  background: var(--parch); border: 2px solid var(--bark); box-shadow: inset 0 0 0 2px var(--gold-light);
}
.dot { width: 11px; height: 11px; border-radius: 50%; background: #9A8A7A; flex: none; border: 2px solid rgba(0, 0, 0, .25); }
.is-on .dot, .dcount .dot { background: #3BD15F; }
.is-off .dot { background: #E0364F; }

.steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin: 26px 0 0; padding: 0; }
.steps li { counter-increment: s; position: relative; padding-top: 62px; }
.steps li::before {   /* pièce d'or numérotée */
  content: counter(s); position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font: 400 1.5rem var(--display); color: var(--bark);
  background: radial-gradient(circle at 35% 30%, #FFF4BF, var(--gold) 70%); border: 2px solid var(--bark);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .45), 0 3px 0 rgba(58, 22, 56, .25);
}
.steps h3 { margin-bottom: 8px; }
.steps h3 a { color: var(--violet-deep); font-weight: 400; }
.steps p { color: var(--soft); margin: 0; }

.two { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.page .two { grid-template-columns: 1fr 1fr; padding-top: 44px; }
.two h2 { margin-bottom: 18px; }
.notes { list-style: none; margin: 0; padding: 0; border-left: 4px solid #EBCB85; }
.notes li { display: flex; gap: 18px; align-items: baseline; padding: 0 0 22px 22px; position: relative; }
.notes li::before { content: ""; position: absolute; left: -10px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--pink); border: 2px solid var(--bark); }
.notes li:last-child { padding-bottom: 0; }
.notes .ver { font: 400 1.1rem var(--display); color: var(--violet-deep); min-width: 4.2em; }
.notes p { margin: 0; font-weight: 700; }
.notes time { color: var(--soft); font-size: .93rem; }

.dcard, .dbig {
  background: linear-gradient(180deg, #8A45D0, var(--violet-deep)); color: #F4E9F7;
  border: 3px solid var(--gold); border-radius: 16px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18), 0 0 0 2px var(--bark);
}
.dcard { padding: 26px; }
.dcard img, .dbig img { border-radius: 16px; display: block; margin-bottom: 14px; border: 2px solid var(--gold-light); }
.dcard h2, .dbig h2 { color: #fff; text-shadow: 0 2px 0 var(--plum); margin-bottom: 8px; }
.dcard p { color: #EADCF5; }
.dcount { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.dcard .dcount { color: #fff; }

/* ---------- pages intérieures ---------- */
.page-head h1 { margin-bottom: 12px; }
.page h2 { margin-bottom: 14px; }
.dl { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.dl li, .gifts li, .block, .empty {
  background: #FFFDF6; border: 2px solid #D9B565; border-radius: 14px; box-shadow: inset 0 0 0 2px #FFF3CF;
}
.dl li { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 24px; }
.dl li.dl-first { border-color: var(--violet); box-shadow: inset 0 0 0 2px #E7D3FA; padding: 26px 24px; }
.dl h2 { margin-bottom: 4px; }
.dl p { margin: 0; color: var(--soft); }
.install, .tips { margin: 0; padding-left: 1.3em; }
.install li, .tips li { margin-bottom: 12px; padding-left: 4px; }
.install li::marker { font: 400 1.15rem var(--display); color: var(--violet); }
.tips li::marker { color: var(--pink); }

.gifts { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gifts li { padding: 22px; display: flex; flex-direction: column; align-items: flex-start; }
.gifts h2 { font: 700 1.05rem var(--body); color: var(--soft); margin: 0; }
.gifts .price { font: 400 2.5rem/1.1 var(--display); color: var(--gold-deep); margin: 2px 0 12px; }
.gifts .thanks { color: var(--soft); font-size: .97rem; }
.gifts .btn { margin-top: auto; }
.free { margin: 18px 0 0; }
.empty { margin-top: 32px; padding: 32px; max-width: 720px; }
.empty p { color: var(--soft); max-width: 56ch; }

.dbig { margin-top: 32px; display: flex; align-items: center; gap: 24px; padding: 26px 30px; }
.dbig img { margin: 0; }
.dbig-text { flex: 1; }
.dbig h2 { margin: 0 0 6px; font-size: 1.9rem; }
.dbig .dcount { margin: 0; color: #F1E4FA; }
.dwidget { width: 100%; border: 0; border-radius: 14px; margin-top: 44px; display: block; }

/* ---------- formulaires ---------- */
.formpage { padding-top: 48px; display: flex; justify-content: center; }
.sheet { width: 100%; max-width: 470px; padding: 34px 34px 36px; }
.sheet .flower { margin-bottom: 12px; }
.sheet h1 { font-size: 2.1rem; margin-bottom: 8px; }
.sheet .lead { font-size: 1rem; margin-bottom: 8px; }
label { display: block; font-weight: 700; margin: 20px 0 6px; color: var(--bark); }
input[type="text"], input[type="email"], input[type="password"], input:not([type]) {
  width: 100%; padding: 11px 14px; border-radius: 10px; border: 2px solid #B98F4A; background: #fff; color: var(--plum);
  font: 400 1.0625rem var(--body); box-shadow: inset 0 2px 0 rgba(91, 44, 18, .1);
}
input:focus-visible { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px #DCC3F7; }
.hint { margin: 6px 0 0; font-size: .92rem; color: var(--soft); }
.sheet-links { margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; }

/* ---------- panel de compte ---------- */
.panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.panel-head p { margin: 8px 0 0; }
.panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.block { padding: 0 24px 24px; overflow: hidden; }
.block h2 {   /* barre de titre de fenêtre */
  margin: 0 -24px 20px; padding: 9px 24px 11px; font-size: 1.3rem; color: #fff; text-shadow: 0 2px 0 var(--plum);
  background: linear-gradient(180deg, #9A52E0, var(--violet-deep)); border-bottom: 2px solid var(--gold);
}
.block form .btn { margin-top: 22px; }
.block label:first-of-type { margin-top: 0; }
.chars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.chars li { display: flex; align-items: center; gap: 14px; }
.chars .lvl {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font: 400 1.2rem var(--display); color: var(--bark);
  background: radial-gradient(circle at 35% 30%, #FFF4BF, var(--gold) 70%); border: 2px solid var(--bark);
}
.chars strong { display: block; line-height: 1.2; }
.chars span:not(.lvl) { color: var(--soft); font-size: .95rem; }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; }
.facts dt { color: var(--soft); }
.facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

/* ---------- pied de page ---------- */
.foot { background: linear-gradient(180deg, #4A1B5C, #2C0F38); color: #E3D3EA; padding: 36px 0 40px; font-size: .97rem; border-top: 3px solid var(--gold); box-shadow: 0 -2px 0 var(--bark); }
.foot-in { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot-in > div { max-width: 46ch; }
.foot p { margin: 0; }
.foot .foot-name { font: 400 1.4rem var(--display); color: #fff; margin-bottom: 8px; }
.foot nav { display: grid; grid-template-columns: auto auto; gap: 8px 32px; align-content: start; }
.foot a { color: var(--gold-light); font-weight: 600; }

/* ---------- petits écrans ---------- */
@media (max-width: 900px) {
  .top-in { flex-wrap: wrap; gap: 8px 16px; padding-top: 10px; padding-bottom: 8px; }
  .who { margin-left: auto; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; margin: 0 -24px; padding: 2px 20px 4px; }
  .hero-in { grid-template-columns: 1fr; padding-top: 36px; padding-bottom: 120px; }
  .hero-art { order: -1; }
  .flower.giant { --size: min(230px, 56vw); }
  .hero h1 { -webkit-text-stroke-width: 9px; }
  .hero-lead { max-width: none; }
  .steps, .two, .page .two, .panel-grid { grid-template-columns: 1fr; }
  .steps { gap: 28px; }
  .two { gap: 36px; }
  .gifts { grid-template-columns: 1fr 1fr; }
  .dl li, .dbig { flex-direction: column; align-items: flex-start; }
  main > .page, main > .panel, main > .start, main > .two { padding: 30px 28px 34px; margin-top: 32px; }
}
@media (max-width: 520px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  .nav { margin: 0 -16px; padding-left: 12px; padding-right: 12px; }
  .who .link-quiet { display: none; }
  .gifts { grid-template-columns: 1fr; }
  .sheet { padding: 26px 20px 28px; }
  main > .page, main > .panel, main > .start, main > .two { width: calc(100% - 24px); padding: 24px 18px 28px; margin-top: 24px; }
  .block { padding: 0 18px 20px; }
  .block h2 { margin: 0 -18px 18px; padding-left: 18px; padding-right: 18px; }
  .formpage { padding-top: 28px; }
  .btn-big { width: 100%; }
}

/* ---------- portraits des personnages ---------- */
.portrait { width: 60px; height: 60px; flex: none; display: block; border-radius: 50%; filter: drop-shadow(0 3px 0 rgba(58, 22, 56, .22)); }
img.portrait { object-fit: cover; border: 3px solid var(--gold); box-shadow: 0 0 0 2px var(--bark); }
.chars { gap: 14px; }

/* =====================================================================
   Thème « forêt » : décor tiré de assets/hero.jpg, vert et or, fleurs violettes
   ===================================================================== */
:root {
  --forest: #2F7D33;
  --forest-mid: #1F5F27;
  --forest-deep: #143F1B;
  --plum: #1E2B1B;
  --soft: #56634F;
  --violet: #7A45D6;
  --violet-deep: #5326A8;
  --pink: #8E5BE8;
  --bark: #4A2E12;
  --frame: 0 0 0 2px var(--bark), 0 7px 0 2px rgba(12, 40, 16, .35);
}
html { background: #173F1C; }
body { background: transparent; }
body::before {            /* l'image, floutée, derrière toutes les pages */
  content: ""; position: fixed; inset: -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(16, 52, 22, .45), rgba(16, 52, 22, .7)), url("hero.jpg") center / cover no-repeat;
  filter: blur(16px) saturate(1.1);
}
h1 { color: var(--forest-deep); }
h2 { color: var(--forest-deep); }

/* fleur du logo : violette et bleue, comme celles de l'image */
.flower .petal { background: linear-gradient(180deg, #B79BFF, #7A45D6); }
.flower .petal.back { background: linear-gradient(180deg, #9CC3FF, #4F7FE0); }

.top { background: linear-gradient(180deg, #3F9A43 0, var(--forest) 45%, var(--forest-mid) 100%); }
.brand { text-shadow: 0 2px 0 var(--forest-deep); }
.btn { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -4px 0 rgba(0, 0, 0, .2), 0 3px 0 rgba(12, 40, 16, .4); }
.who .btn-main { background: linear-gradient(180deg, #FFF6D2, var(--gold-light) 50%, #F5CE6C); color: var(--bark); text-shadow: none; }
.who .btn-main:hover { color: var(--bark); }

/* accueil : l'image en grand, le texte à gauche sur un voile sombre */
.hero.has-img { background-position: center 14%; border-bottom: 3px solid var(--gold); box-shadow: 0 2px 0 var(--bark); }
.hero.has-img .hero-in { grid-template-columns: minmax(0, 600px); min-height: clamp(520px, 44vw, 900px); padding-top: 56px; padding-bottom: 56px; align-content: center; }
.hero.has-img .hero-art { display: none; }
.hero.has-img::before {
  display: block; content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 38, 15, .88) 0, rgba(10, 38, 15, .7) 34%, rgba(10, 38, 15, 0) 62%);
}
.hero h1 { -webkit-text-stroke-color: var(--forest-deep); text-shadow: 0 8px 0 #0B2610; }
.hero.has-img .hero-lead { background: rgba(255, 248, 232, .94); }
.steps li::before, .chars .lvl { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .45), 0 3px 0 rgba(12, 40, 16, .3); }
.steps h3 a, .notes .ver { color: var(--forest-mid); }
.notes { border-left-color: #BFD9A4; }
.notes li::before { background: var(--violet); }

.dcard, .dbig { background: linear-gradient(180deg, #37893B, var(--forest-deep)); }
.dcard h2, .dbig h2 { text-shadow: 0 2px 0 #0B2610; }
.dcard p { color: #DDEFD6; }
.dbig .dcount { color: #E4F3DE; }
.dl li.dl-first { border-color: var(--forest); box-shadow: inset 0 0 0 2px #D5EBC9; }
.install li::marker { color: var(--forest); }
.tips li::marker { color: var(--violet); }
.gifts .price { color: var(--forest-mid); }
.block h2 { background: linear-gradient(180deg, #3F9A43, var(--forest-mid)); text-shadow: 0 2px 0 var(--forest-deep); }
input:focus-visible { border-color: var(--forest); box-shadow: 0 0 0 4px #CFE8C4; }
:focus-visible { box-shadow: 0 0 0 6px var(--forest-deep); }
.foot { background: linear-gradient(180deg, #1B4A21, #0D2812); color: #D5E6CF; }

@media (max-width: 900px) {
  .hero.has-img { background-position: 78% top; background-size: max(100%, 560px) auto; background-repeat: no-repeat; background-color: #123A18; }
  .hero.has-img .hero-in { min-height: 0; padding-top: 250px; padding-bottom: 32px; grid-template-columns: 1fr; }
  .hero.has-img::before { background: linear-gradient(180deg, rgba(10, 38, 15, 0) 0, rgba(10, 38, 15, 0) 150px, #123A18 330px); }
}