/* ============================================================================
   hat-draw.css  —  🎩 Hat Draw engine styling (.hdr-*)
   An opening-up hat of folded name slips; tap Draw and a slip rises out and
   unfolds. Self-contained. Scene colours live in the SVG; this styles the
   motion and controls. (SEO content uses the shared site content classes.)
   ============================================================================ */
.hdr-stage { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 22px 55px -22px rgba(20, 12, 40, .7); background: radial-gradient(120% 90% at 50% 0%, #2a2040, #16111f); padding: 14px 10px 10px; }
.hdr-scene { display: block; width: min(340px, 82%); height: auto; margin: 0 auto; overflow: visible; }

.hdr-slip-name { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; fill: #2a2140; opacity: 0; transition: opacity .3s ease .28s; }
#hdrSlip.hdr-open .hdr-slip-name { opacity: 1; }

/* hat shake + loose-slip rattle */
#hdrHat { transform-box: fill-box; transform-origin: 50% 92%; }
#hdrHat.hdr-shake { animation: hdrShake .6s cubic-bezier(.36,.07,.19,.97); }
@keyframes hdrShake { 10%,90%{transform:rotate(-2deg)} 20%,80%{transform:rotate(2.4deg)} 30%,50%,70%{transform:rotate(-3.4deg)} 40%,60%{transform:rotate(3.4deg)} }
.hdr-peek { transform-box: fill-box; transform-origin: 50% 100%; }
.hdr-peek.hdr-rattle { animation: hdrRattle .6s ease-in-out; }
@keyframes hdrRattle { 0%,100%{transform:translateY(0) rotate(0)} 30%{transform:translateY(-4px) rotate(-3deg)} 60%{transform:translateY(-2px) rotate(2.5deg)} }

/* the drawn slip rises out of the hat, then unfolds */
#hdrSlip { opacity: 0; transform: translateY(40px) scale(.6); transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .2s ease, transform .6s cubic-bezier(.2,1.3,.35,1); }
#hdrSlip.hdr-up { opacity: 1; transform: translateY(0) scale(1); }
#hdrSlipInner { transform: scaleX(.34); transform-box: fill-box; transform-origin: 50% 50%; transition: transform .5s cubic-bezier(.3,1.2,.4,1); }
#hdrSlip.hdr-open #hdrSlipInner { transform: scaleX(1); }
#hdrSlipCrease { opacity: 1; transition: opacity .4s ease; }
#hdrSlip.hdr-open #hdrSlipCrease { opacity: 0; }

.hdr-left-wrap { text-align: center; margin-top: 6px; font-size: 12.5px; color: #cbbce8; letter-spacing: .02em; }
.hdr-left-wrap .hdr-left-n { font-weight: 800; color: #eadffb; }

/* running record of names already drawn this cycle */
.hdr-drawn { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: center; padding: 10px 12px 2px; max-width: 480px; margin: 0 auto; }
.hdr-drawn-lbl { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #b09be0; font-weight: 800; margin-right: 3px; }
.hdr-dchip { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px;
    background: rgba(124, 58, 237, .16); border: 1px solid rgba(162, 116, 245, .5); color: #ead9ff;
    font-size: 12.5px; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hdr-pickbtn-wrap { text-align: center; }
.hdr-pickbtn-main {
    display: inline-flex; align-items: center; gap: 8px; margin: 12px auto 0; font-size: 15px; font-weight: 800; color: #fff;
    padding: 12px 34px; border-radius: 24px; border: 0; cursor: pointer; letter-spacing: .4px;
    background: linear-gradient(180deg, var(--hdr-grad-a, #a274f5), var(--hdr-grad-b, #7c3aed));
    box-shadow: 0 12px 26px -10px rgba(124, 58, 237, .7);
}
.hdr-pickbtn-main:hover { filter: brightness(1.06); }

.hdr-effects { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; font-size: 13px; color: var(--theme-text, #1a1a2e); justify-content: center; }
.hdr-effects label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.hdr-items-ta { width: 100%; min-height: 240px; font-family: monospace; font-size: .9rem; line-height: 1.5; border-radius: 10px; border: 1px solid var(--theme-border, #d7dbe0); background: var(--theme-bg, #fff); color: var(--theme-text, #1a1a2e); padding: 10px 12px; resize: vertical; }
.hdr-items-ta:focus { outline: 2px solid var(--hdr-accent, #7c3aed); outline-offset: 1px; border-color: transparent; }

.page-hdr-scope {
    --wsp-result-accent: #6d28d9;
    --wsp-result-grad: linear-gradient(135deg, #a274f5, #7c3aed);
    --wsp-result-plate: rgba(124, 58, 237, .13);
}

@media (prefers-reduced-motion: reduce) {
    #hdrHat.hdr-shake, .hdr-peek.hdr-rattle { animation: none; }
    #hdrSlip, #hdrSlipInner { transition: none; }
}