* { box-sizing: border-box }
:root { color: #102e25; font-family: Arial, Helvetica, sans-serif; background: #e6b76b }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: clamp(12px,4vw,48px); background: url("a.webp") center center / cover no-repeat }
main { width: min(100%, 480px); padding: clamp(20px,5vw,38px); text-align: center; background: rgba(255,249,227,.73); border: 1px solid #18372e70; border-radius: 8px; box-shadow: 4px 5px 0 #18372e26 }
header a { position: relative; display: inline-block; margin-bottom: 20px }
header img { display: block; width: clamp(170px,49vw,210px); height: auto; margin: 0 auto }
.badge, .picker, .label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .15em }
.badge { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px; margin: 0; border: 1.5px solid; border-radius: 30px; background: #fadd89; box-shadow: 2px 2px #15352c }
@media (prefers-reduced-motion: no-preference) {
  /* Position the glint over the upper sparkle in the original wordmark. */
  header a::after {
    content: "";
    position: absolute;
    left: 93.8%;
    top: 15%;
    width: 8%;
    aspect-ratio: 1;
    background: radial-gradient(circle, #fffdf4, #ffd77e);
    clip-path: polygon(50% 0, 58% 41%, 100% 50%, 58% 59%, 50% 100%, 42% 59%, 0 50%, 42% 41%);
    opacity: 0;
    pointer-events: none;
    animation: glint 820ms ease-in-out 1.95s;
  }
  .badge { animation: wiggle 1.45s ease-in-out 450ms }
}
@keyframes glint {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.35) }
  45% { opacity: 1; transform: translate(-50%, -50%) scale(1) }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0) }
  13% { transform: rotate(-4deg) }
  30% { transform: rotate(3deg) }
  47% { transform: rotate(-1deg) }
  56% { transform: rotate(0) }
}
.badge span { color: #9b3040 }
h1 { margin: 17px 0 14px; font: 900 clamp(2.8rem,12vw,4.7rem)/.99 Arial,Helvetica,sans-serif; letter-spacing: -.045em }
.intro { margin: 0 auto; max-width: 32ch; line-height: 1.45; font-weight: 550 }
.picker { display: flex; align-items: center; gap: 12px; margin: 23px 0 12px }
.picker::before, .picker::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .6 }
#stores { display: grid; gap: 10px }
button, a { font: inherit; color: inherit; cursor: pointer }
.store { display: flex; align-items: center; width: 100%; padding: 14px 17px; gap: 15px; border: 1px solid #102e25; border-radius: 4px; background: #15382e; color: #fff9e9; box-shadow: 3px 3px 0 #edda98; text-decoration: none; font-weight: 700; font-size: 1.09rem }
.store:hover { background: #254e40 }
.arrow { margin-left: auto; color: #f5d984 }
footer { margin-top: 7px; font-size: .87rem }
footer button { background: none; border: none; text-decoration: underline; padding: 13px 3px; font-weight: bold }
:focus-visible { outline: 3px solid white; outline-offset: 2px; box-shadow: 0 0 0 7px #102e25 }
dialog { width: min(360px,90vw); padding: 25px; color: inherit; border: 2px solid; background: #fff3cf; border-radius: 5px }
dialog .label { margin-top: 0 }
dialog h2 { margin: 0; font: bold 2rem Arial,sans-serif }
#detail { line-height: 1.5 }
dialog form button { background: #16392e; color: white; border: 0; padding: 12px 22px; border-radius: 3px }
dialog::backdrop { background: #122f27aa }

footer a, #channels a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px }
#channels a { display: flex; font-weight: 700 }
#channels:not(:empty) { margin-bottom: 14px }