/* ─── GENSHIN IMPACT ──────────────────────────────────── */
/* Built from the game's menus: Hint dialog (gold corners, ◇ dividers), pill buttons
   ("Confirm" ring icon), quest list (◈ markers, cream highlight on the selected row). */
html[data-theme="genshin"] {
  --frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Crect x='4.5' y='4.5' width='21' height='21' fill='none' stroke='%23fff'/%3E%3Cg fill='%23c99a45'%3E%3Cpath d='M1 1h8L6.5 3.5h-3v3L1 9zM29 1h-8l2.5 2.5h3v3L29 9zM1 29h8l-2.5-2.5h-3v-3L1 21zM29 29h-8l2.5-2.5h3v-3L29 21z'/%3E%3C/g%3E%3C/svg%3E");
  --cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='10'%3E%3Cpath d='M0 5h9' stroke='%23fff'/%3E%3Cpath d='M12 2.5l2.5 2.5-2.5 2.5-2.5-2.5z' fill='none' stroke='%23b08a4a'/%3E%3Cpath d='M20.5 1l4 4-4 4-4-4z' fill='%23b08a4a'/%3E%3C/svg%3E");
  --cap-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='10'%3E%3Cg transform='matrix(-1 0 0 1 26 0)'%3E%3Cpath d='M0 5h9' stroke='%23fff'/%3E%3Cpath d='M12 2.5l2.5 2.5-2.5 2.5-2.5-2.5z' fill='none' stroke='%23b08a4a'/%3E%3Cpath d='M20.5 1l4 4-4 4-4-4z' fill='%23b08a4a'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-theme="genshin"] body {
  font-weight: 500;
  background:                                                        /* cloud wisps over a haze-to-mist sky */
    radial-gradient(ellipse 38% 9% at 18% 22%, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(ellipse 30% 7% at 84% 38%, rgba(255,255,255,.5), transparent 70%),
    radial-gradient(ellipse 45% 10% at 60% 88%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(180deg, #8fc0e3 0%, #b3d3ec 40%, #d3e3ee 78%, #e2eef6 100%) var(--bg);
  background-attachment: fixed;
}
html[data-theme="genshin"] .hero h1 { font-weight: 800; }
html[data-theme="genshin"] .hero {                                    /* dialog divider: ◆◇────◇◆ */
  border-bottom: 0;
  background: var(--cap-l) left bottom / 26px 10px no-repeat, var(--cap) right bottom / 26px 10px no-repeat,
              linear-gradient(var(--line), var(--line)) center bottom 4.5px / calc(100% - 52px) 1px no-repeat;
}
html[data-theme="genshin"] h2 { color: var(--accent); }
html[data-theme="genshin"] h2::after {
  content: ''; flex: 1; align-self: center; height: 10px;
  background: var(--cap) right center / 26px 10px no-repeat, linear-gradient(var(--line), var(--line)) left center / calc(100% - 26px) 1px no-repeat;
}
html[data-theme="genshin"] .shot, html[data-theme="genshin"] .photo {   /* Hint-dialog frame with gold corners */
  border: 10px solid transparent; border-image: var(--frame) 10 / 10px stretch; background-clip: padding-box;
}
html[data-theme="genshin"] .pix, html[data-theme="genshin"] .thumb { border-radius: 6px; }

/* buttons: slate pill, gold ring icon */
html[data-theme="genshin"] a.arrow {
  display: inline-flex; align-items: center; gap: .45em; padding: .08em .95em .08em .28em;
  border-radius: 999px; background: var(--slate); color: var(--cream); text-decoration: none;
  font-weight: 700; font-size: .88em; line-height: 1.75; box-shadow: 0 1px 3px rgba(74,83,102,.25);
  transition: background .15s, box-shadow .15s;
}
html[data-theme="genshin"] a.arrow::before {
  content: ''; width: 1.2em; height: 1.2em; border-radius: 50%; flex: none;
  background: radial-gradient(circle, transparent 0 33%, var(--gold) 36% 52%, #2d3240 55%);
}
html[data-theme="genshin"] a.arrow::after { content: none; }
html[data-theme="genshin"] a.arrow:hover { background: #3b4354; box-shadow: 0 0 0 2px var(--gold); }
html[data-theme="genshin"] .theme summary { background: var(--slate); border-color: var(--slate); color: var(--cream); padding: 7px 16px; }
html[data-theme="genshin"] .theme summary::before {
  content: ''; display: inline-block; width: .55em; height: .55em; margin-right: .6em; background: var(--gold); transform: rotate(45deg);
}
html[data-theme="genshin"] .theme summary::after { color: var(--gold); }
html[data-theme="genshin"] .theme summary:hover, html[data-theme="genshin"] .theme[open] summary { border-color: var(--gold); }
html[data-theme="genshin"] .switch { border-radius: 14px; }
html[data-theme="genshin"] .switch button[aria-pressed="true"] { background: var(--slate); color: var(--cream); border-color: var(--slate); }

/* quest list: ◈ marker; the hovered row gets the selected-quest highlight */
html[data-theme="genshin"] .row h3::before, html[data-theme="genshin"] .feature h3::before {
  content: ''; display: inline-block; width: .5em; height: .5em; margin: 0 .55em .1em .1em;
  border: 2px solid var(--accent); transform: rotate(45deg);
  background: radial-gradient(var(--accent) 0 28%, transparent 32%);
}
html[data-theme="genshin"] main > section { content-visibility: visible; }   /* auto = paint containment, which clipped the band below */
html[data-theme="genshin"] .row { position: relative; }
html[data-theme="genshin"] .row::before {                            /* full-width band, fading out toward the page edges */
  content: ''; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; opacity: 0; transition: opacity .2s;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6) 18%, rgba(255,255,255,.6) 82%, transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(255,255,255,.7);
}
@media (hover: hover) { html[data-theme="genshin"] .row:hover::before { opacity: 1; } }
html[data-theme="genshin"] .rows:focus-within .row:focus-within::before { opacity: 1; }