/* Scoped presentation layer. Sacks never mask the field or the play-call panel. */
.pd-celebration[hidden], .pd-celebration [hidden] { display: none !important; }
.pd-celebration { --celebration-ink: #f4f3e9; position: absolute; z-index: 45; inset: 10% 3% 8%; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 12px; padding: 18px; border: 1px solid #d7e1d533; border-radius: 22px; background: radial-gradient(ellipse at 50% 38%, #234b41, #0c2020 72%); color: var(--celebration-ink); box-shadow: 0 16px 48px #0008; font-family: system-ui, sans-serif; overflow: hidden; }
.pd-celebration *, .pd-celebration-settings * { box-sizing: border-box; }
.pd-celebration-stage { position: relative; min-height: 0; border-radius: 14px; background: radial-gradient(ellipse at 50% 86%, #75946666, transparent 48%); }
.pd-celebration canvas { display: block; width: 100%; height: 100%; }
.pd-celebration-unavailable { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #d2ded4; }
.pd-celebration-caption { display: flex; align-items: center; gap: 12px; }
.pd-celebration-caption small { font-size: 11px; font-weight: 800; color: #c3ef92; letter-spacing: .15em; }
.pd-celebration-caption h2 { font-size: clamp(19px, 4vw, 28px); line-height: 1.15; margin: 4px 0; overflow-wrap: anywhere; }
.pd-celebration-caption p { color: #d2ded4; font-size: 12px; margin: 0; line-height: 1.4; }
.pd-celebration-crest { flex: 0 0 42px; }
.pd-celebration-crest img, .pd-celebration-crest svg { width: 42px; height: 48px; display: block; }
.pd-celebration-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.pd-celebration button, .pd-celebration-settings button { min-height: 44px; border: 1px solid #e2efd64d; border-radius: 10px; background: #142b2a; color: #f4f3e9; font: 700 12px system-ui, sans-serif; cursor: pointer; padding: 7px 4px; }
.pd-celebration button[aria-pressed="true"] { background: #c3ef92; color: #12251e; border-color: #c3ef92; }
.pd-celebration button:focus-visible, .pd-celebration-settings :focus-visible { outline: 3px solid #ffe078; outline-offset: 2px; }
.pd-celebration kbd { display: block; margin-bottom: 3px; font: 600 10px system-ui, sans-serif; opacity: .8; }
.pd-celebration-skip { position: absolute; top: 12px; right: 12px; min-width: 65px; padding: 8px 12px !important; }
.pd-celebration-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: #c3ef9222; }
.pd-celebration-progress i { display: block; width: 100%; height: 100%; background: #c3ef92; transform-origin: left center; }
.pd-celebration[data-kind="sack"] { inset: 13% 8px auto auto; width: 178px; height: 236px; padding: 7px; gap: 3px; border-radius: 12px; grid-template-rows: minmax(0, 1fr) auto; pointer-events: none; background: linear-gradient(160deg, #142e2bef, #0b1b1ce8); box-shadow: 0 4px 12px #0004; }
.pd-celebration[data-kind="sack"] .pd-celebration-actions { display: none; }
.pd-celebration[data-kind="sack"] .pd-celebration-caption { gap: 6px; }
.pd-celebration[data-kind="sack"] .pd-celebration-crest { display: none; }
.pd-celebration[data-kind="sack"] h2 { font-size: 14px; }
.pd-celebration[data-kind="sack"] small { font-size: 9px; letter-spacing: .07em; }
.pd-celebration[data-kind="sack"] p { font-size: 10px; }
.pd-celebration[data-kind="sack"] .pd-celebration-skip { pointer-events: auto; top: 5px; right: 5px; min-height: 30px; min-width: 40px; font-size: 10px; padding: 3px 5px !important; }
.pd-celebration-settings { color: #f4f3e9; background: #102624; padding: 20px; border-radius: 16px; font-family: system-ui, sans-serif; max-width: 480px; margin: auto; }
/* This intro is panel content, so it must not inherit the absolute game HUD header. */
#game #overlay .pd-celebration-settings > header { position: static; inset: auto; z-index: auto; display: block; width: auto; height: auto; padding: 0; border: 0; background: none; box-shadow: none; }
#game #overlay .pd-celebration-settings > header::before { display: none; }
.pd-celebration-settings h2 { font-size: 26px; margin: 5px 0; }
.pd-celebration-settings small { color: #c3ef92; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.pd-celebration-settings p { font-size: 13px; line-height: 1.5; color: #cfddd3; }
.pd-celebration-settings label { display: grid; gap: 5px; margin: 14px 0; font-size: 14px; font-weight: 650; }
.pd-celebration-settings select { background: #193a32; color: #f4f3e9; border: 1px solid #e2efd64d; border-radius: 8px; font: 14px system-ui, sans-serif; width: 100%; min-height: 44px; padding: 9px; }
.pd-celebration-settings .pd-celebration-check { display: flex; align-items: center; min-height: 35px; }
.pd-celebration-settings input { width: 19px; height: 19px; accent-color: #c3ef92; }
.pd-celebration-settings button { width: 100%; }
/* TD controls sit over the control deck; the stadium and scorer stay visible. */
#game:has(.pd-celebration[data-kind="td"]:not([hidden])) .controller,
#game:has(.pd-celebration[data-kind="td"]:not([hidden])) #keyboard-help,
#game:has(.pd-celebration[data-kind="td"]:not([hidden])) > footer,
#game:has(.pd-celebration[data-kind="td"]:not([hidden])) .status { display: none !important; }
.pd-celebration[data-kind="td"] { inset: auto 10px max(12px, env(safe-area-inset-bottom)); width: auto; max-width: 520px; margin: 0 auto; padding: 10px 12px; gap: 8px; grid-template-rows: auto auto; border-radius: 14px; background: #0c2020; box-shadow: 0 4px 18px #0005; }
.pd-celebration[data-kind="td"] .pd-celebration-caption { padding-right: 85px; gap: 8px; }
.pd-celebration[data-kind="td"] h2 { font-size: 18px; margin: 3px 0; }
.pd-celebration[data-kind="td"] small { font-size: 10px; }
.pd-celebration[data-kind="td"] .pd-celebration-crest { flex-basis: 30px; }
.pd-celebration[data-kind="td"] .pd-celebration-crest img, .pd-celebration[data-kind="td"] .pd-celebration-crest svg { width: 30px; height: 36px; }
.pd-celebration[data-kind="td"] button:disabled { opacity: .65; cursor: default; }
@media (max-height: 500px) { .pd-celebration[data-kind="sack"] { height: 180px; top: 12%; } }
@media (prefers-reduced-motion: reduce) { .pd-celebration * { animation: none !important; transition: none !important; } }