:root {
  color-scheme: dark;
  background: #150909;
  color: #fff0cf;
  font-family: "Instrument Sans", system-ui, sans-serif;
  --gold: #ffc752;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; }
.card { width: min(100%, 510px); margin-inline: auto; background: #110807; }
.art { position: relative; }
.layout { display: block; width: 100%; height: auto; }
.photo, .emblem { position: absolute; display: block; }
.photo { inset: 0 0 auto; width: 100%; height: 26%; object-fit: cover; }
.emblem { left: 41.45%; top: 20.2%; width: 17.1%; }
.hotspot {
  position: absolute;
  left: calc(var(--x) * 100% / 941);
  top: calc(var(--y) * 100% / 1504);
  width: calc(var(--w) * 100% / 941);
  height: calc(var(--h) * 100% / 1504);
  border: 0; padding: 0; background: transparent; border-radius: 10px;
  color: inherit; cursor: pointer; touch-action: manipulation;
}
.whatsapp { --x: 53; --y: 790; --w: 409; --h: 120; }
.call     { --x: 481; --y: 790; --w: 408; --h: 120; }
.catalog  { --x: 53; --y: 925; --w: 409; --h: 104; }
.map      { --x: 481; --y: 925; --w: 408; --h: 104; }
.facebook { --x: 167; --y: 1279; --w: 132; --h: 121; }
.phone    { --x: 323; --y: 1285; --w: 434; --h: 109; }
.share    { --x: 145; --y: 1406; --w: 650; --h: 88; min-height: 44px; }
:focus-visible { outline: 3px solid #fff1be; outline-offset: 3px; }
.hotspot:focus-visible { box-shadow: inset 0 0 0 2px #150909; }
.debug .hotspot { outline: 2px dashed #78fcf0; background: #001a30ad; display: grid; place-items: center; }
.debug .hotspot::after { content: attr(data-label); font-size: clamp(10px, 2vw, 13px); color: white; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.footer {
  display: grid; justify-items: center; gap: 5px; padding: 13px 0 15px;
  background: radial-gradient(ellipse at bottom, #381014, #110807 77%);
}
button { font: inherit; cursor: pointer; }
.install {
  min-height: 44px; border: 1px solid #ab8447; border-radius: 9px;
  padding: 8px 20px; background: #190e0b; color: #f6db9e; font-weight: 650;
}
.credit { min-height: 44px; display: grid; place-items: center; padding-inline: 12px; }
.credit img { display: block; inline-size: 116px; block-size: auto; }
html:has(dialog[open]) { overflow: hidden; }
dialog { border: 0; padding: 0; color: #fff0cf; }
dialog::backdrop { background: #000c; }
.share-screen {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; background: #150909; overflow: auto;
}
.share-screen[open] { display: grid; place-items: safe center; }
.share-content, .install-content {
  position: relative; width: min(100%, 620px); text-align: center;
  padding: 64px 18px 16px;
}
.share-content h2, .install-content h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.5rem, 5vw, 2rem); }
.share-content p, .install-content p { margin: 7px 0 15px; }
.close {
  position: absolute; top: max(8px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px;
  border: 1px solid #bb9250; border-radius: 50%; background: #271410; color: #fff0cf;
  font-size: 1.75rem; line-height: 1;
}
.qr {
  display: block; margin: 0 auto 14px; width: min(82vw, 56svh, 490px);
  min-width: 120px; max-width: 100%; aspect-ratio: 1; border-radius: 5px;
  object-fit: contain; background: white;
}
.primary { border: 0; border-radius: 10px; min-height: 44px; padding: 10px 22px; color: #1b0b04; background: var(--gold); font-weight: 700; }
.share-content .status { margin: 10px 0 0; font-size: .9rem; }
.status:empty { display: none; }
.manual { display: grid; gap: 5px; margin: 12px auto 0; max-width: 450px; }
.manual[hidden], [hidden] { display: none; }
.manual input { width: 100%; min-height: 40px; font: inherit; color: inherit; background: #271410; border: 1px solid #ab8447; border-radius: 5px; padding: 6px; }
.install-screen { width: min(92vw, 440px); border: 1px solid #9a7042; border-radius: 14px; background: #211210; }
.install-content { padding-bottom: 21px; line-height: 1.5; }
.install-content p { margin-top: 12px; }
@media (orientation: landscape) and (max-height: 525px) {
  .share-content { display: grid; grid-template-columns: minmax(120px, 1fr) 1fr; column-gap: 18px; align-items: center; }
  .share-content h2, .share-content p, .share-content .primary, .share-content .manual { grid-column: 2; }
  .qr { grid-column: 1; grid-row: 1 / 5; margin: 0 auto; }
}