/* /tap — standalone NFC screen. Loaded only on that page. */
html, body { margin: 0; background: #F6F1E9; overscroll-behavior: none; }
html { margin-top: 0 !important; }
#wpadminbar { display: none; }

.ddd-tap {
	--cream: #F6F1E9; --sand: #EDE4D6; --esp: #2B2420; --muted: #6B5F56;
	--terra: #C8714E; --sage: #8A9A7B; --line: #D8CCBA;
	position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
	padding: max(1.1rem, env(safe-area-inset-top)) 1.5rem max(1.5rem, env(safe-area-inset-bottom));
	background: var(--cream); color: var(--esp);
	font: 400 1.0625rem/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; user-select: none;
	overflow: hidden;
}
.ddd-tap, .ddd-tap *, .ddd-tap *::before, .ddd-tap *::after { box-sizing: border-box; }
.tap-step:focus { outline: none; }
.ddd-tap::before { /* concentric rings, zero image weight */
	content: ""; position: absolute; left: 50%; top: 46%; width: 900px; height: 900px;
	transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
	background: repeating-radial-gradient(circle, transparent 0 58px, rgba(138,154,123,.18) 58px 59px);
	-webkit-mask-image: radial-gradient(circle, #000 25%, transparent 68%);
	mask-image: radial-gradient(circle, #000 25%, transparent 68%);
}
.ddd-tap > * { position: relative; }
.ddd-tap button, .ddd-tap a { touch-action: manipulation; }

/* Progress dots */
.tap-dots { display: flex; justify-content: center; gap: .5rem; height: .5rem; flex: none; }
.tap-dot { width: .5rem; height: .5rem; border-radius: 999px; background: var(--line); transition: width .35s ease, background .35s ease; }
.tap-dot.is-done { background: var(--sage); }
.tap-dot.is-current { width: 1.5rem; background: var(--terra); }

/* Steps */
.tap-stage { flex: 1; position: relative; min-height: 0; }
.tap-step {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; text-align: center;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .3s ease, visibility 0s linear .3s;
}
.tap-step.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s ease; }
.ddd-tap:not(.is-js) .tap-step { display: none; }
.ddd-tap:not(.is-js) .tap-final { display: flex; opacity: 1; visibility: visible; pointer-events: auto; }

.tap-copy { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; width: 100%; max-width: 34rem; }
.tap-text {
	margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; letter-spacing: -.01em;
	font-size: clamp(2.1rem, 9vw, 3.6rem); line-height: 1.1; text-wrap: balance;
}
.tap-text em { font-style: italic; color: var(--terra); }
.tap-sub { margin: 0; color: var(--muted); max-width: 26rem; }
.tap-actions { flex: none; width: 100%; max-width: 26rem; display: flex; flex-direction: column; gap: .75rem; padding-top: 1rem; }

/* Buttons */
.tap-btn {
	display: flex; align-items: center; justify-content: center; width: 100%; min-height: 4.1rem; padding: 1rem 1.5rem;
	border: 0; border-radius: 999px; background: var(--terra); color: #fff; cursor: pointer; text-decoration: none;
	font: 500 1.15rem/1.2 Inter, system-ui, sans-serif; letter-spacing: .01em;
	transition: transform .15s ease, background .2s ease;
}
.tap-btn:active { transform: scale(.97); }
.tap-btn:hover { background: var(--esp); }
.tap-btn.is-outline { background: transparent; color: var(--esp); box-shadow: inset 0 0 0 1px var(--esp); }
.tap-btn.is-outline:hover { background: var(--esp); color: var(--cream); }
.tap-btn:focus-visible, .tap-red:focus-visible, .tap-drum:focus-visible, .tap-link:focus-visible { outline: 3px solid var(--esp); outline-offset: 3px; }

/* The big red "Don't" button */
.tap-red {
	width: min(60vw, 15rem); aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer; color: #fff;
	font: 500 1.6rem/1 Inter, system-ui, sans-serif; letter-spacing: .02em;
	background: radial-gradient(circle at 35% 28%, #E49A7E 0%, var(--terra) 48%, #A44F33 100%);
	box-shadow: 0 .6rem 0 #8E3F27, 0 1.4rem 2rem -.6rem rgba(43,36,32,.45);
	transition: transform .12s ease, box-shadow .12s ease;
}
.tap-red:active { transform: translateY(.45rem); box-shadow: 0 .15rem 0 #8E3F27, 0 .6rem 1rem -.4rem rgba(43,36,32,.4); }

/* The drum */
.tap-drum { border: 0; background: none; padding: 0; cursor: pointer; width: min(72vw, 17rem); line-height: 0; }
.tap-drum-svg { width: 100%; height: auto; transform-origin: 50% 85%; }
.tap-drum.is-hit .tap-drum-svg { animation: tap-bounce .3s cubic-bezier(.2,1.5,.4,1); }
.tap-count {
	margin: 0; font-family: "Cormorant Garamond", Georgia, serif; font-size: 4.5rem; line-height: 1; min-height: 1em;
	color: var(--terra); font-variant-numeric: lining-nums;
}
.tap-count.is-hit { animation: tap-pop .3s ease; }
@keyframes tap-bounce { 0% { transform: scale(1); } 30% { transform: scale(.9, .86); } 65% { transform: scale(1.04, 1.06); } 100% { transform: scale(1); } }
@keyframes tap-pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* Final screen */
.tap-next { margin: 0; padding: .45rem 1rem; border-radius: 999px; background: var(--sand); color: var(--muted); font-size: .9rem; font-weight: 500; }
.ddd-tap [hidden] { display: none !important; }
.tap-perk { margin: 0; color: var(--terra); font-weight: 500; }
a.tap-link { display: inline-block; text-align: center; }
.tap-link { align-self: center; padding: .6rem; background: none; border: 0; color: var(--muted); font: inherit; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tap-link:hover { color: var(--terra); }

@media (max-height: 640px) { .tap-copy { gap: 1rem; } .tap-count { font-size: 3.25rem; } .tap-btn { min-height: 3.5rem; } .tap-red { width: min(48vw, 11rem); } }
@media (prefers-reduced-motion: reduce) {
	.tap-step, .tap-step.is-active { transition: none; }
	.tap-drum.is-hit .tap-drum-svg, .tap-count.is-hit { animation: none; }
}