/* A tactile, interactive event pass. All styles are scoped to this widget. */
.badge-playground{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:6%;padding-top:55px;padding-bottom:55px;border-top:1px solid var(--line);scroll-margin-top:85px}
.badge-intro h2{font-size:clamp(38px,4.7vw,62px);line-height:1.05;letter-spacing:-1.7px;margin:0 0 24px}
.badge-intro>p{font-size:18px;line-height:1.6;color:var(--muted);max-width:310px;margin:0 0 30px}
.badge-types{display:inline-flex;gap:5px;padding:5px;border:1px solid var(--line);border-radius:32px}
.badge-types button{padding:10px 19px;border:0;border-radius:24px;font-size:14px;background:transparent;color:var(--muted);transition:background .2s,color .2s}
.badge-types button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.badge-types button:hover:not([aria-pressed="true"]){color:var(--ink);background:var(--card)}
.badge-display{min-width:0}
.badge-display .badge-instructions{font-size:14px;line-height:1.8;text-align:center;color:var(--muted);margin:0}
.badge-stage{position:relative;isolation:isolate;min-width:0;aspect-ratio:540/560;overflow:visible;border-radius:6px;background:radial-gradient(ellipse at 50% 50%,var(--card),transparent 74%)}
.badge-world{position:absolute;top:0;left:0;width:540px;height:560px;transform-origin:top left;--badge-color:var(--human)}
.badge-world[data-type="exhibitor"]{--badge-color:var(--handle)}
.badge-lanyard{position:absolute;inset:0;width:100%;height:100%;overflow:visible;clip-path:inset(0 -160px -60px);pointer-events:none}
.badge-lanyard path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.lanyard-shadow{stroke:#000;stroke-width:14;opacity:.12;filter:blur(4px);transform:translate(7px,6px)}
.lanyard-band{stroke:#30342f;stroke-width:12}
.lanyard-stitch{stroke:#9a9c8f;stroke-width:1;stroke-dasharray:2 5;opacity:.5}
.badge-hang{position:absolute;left:0;top:0;width:224px;height:328px;transform-origin:112px 0;transform:translate(158px,172px);will-change:transform}
.badge-clip{position:absolute;top:-5px;left:104px;width:16px;height:43px;border:3px solid #b7b8b0;border-radius:7px;background:linear-gradient(90deg,#9c9e95,#f8f9f3 45%,#8f9288);box-shadow:1px 1px 2px #0003;z-index:2;pointer-events:none}
.badge-clip:after{content:"";position:absolute;inset:5px 3px 9px;border-radius:3px;background:var(--paper)}
.event-badge{position:absolute;top:24px;left:0;display:block;width:224px;height:294px;padding:0;border:0;background:none;text-align:left;color:#262720;perspective:1000px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;outline-offset:9px}
.event-badge.is-grabbed{cursor:grabbing}
.event-badge:focus-visible{outline:2px solid var(--accent);border-radius:12px}
.badge-rotator{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.event-badge[aria-pressed="true"] .badge-rotator{transform:rotateY(180deg)}
.badge-face{position:absolute;inset:0;display:flex;flex-direction:column;padding:35px 20px 15px;border-radius:12px;border:1px solid #d0d0c6;background:#f8f7f3;backface-visibility:hidden;box-shadow:inset 0 0 0 5px #ffffff90,inset 0 0 0 6px #deded440,8px 14px 18px #1d201e1a,1px 3px 4px #1d201e15;overflow:hidden}
.badge-face:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,transparent 30%,#fff5 46%,transparent 53%,#fff2 76%,transparent);opacity:.7}
.badge-slot{position:absolute;top:13px;left:87px;width:48px;height:7px;border-radius:6px;background:#cecec5;box-shadow:inset 0 2px 2px #0002,0 1px #fff}
.badge-brand{display:flex;align-items:center;gap:8px;font:400 19px var(--serif);letter-spacing:-.5px}
.badge-brand .mark{grid-template-columns:6px 6px;grid-template-rows:6px 6px;gap:2px}
.badge-edition{font-size:9px;letter-spacing:1.7px;margin-top:17px;color:#676b61}
.badge-name{font:400 47px/.97 var(--serif);letter-spacing:-1.8px;margin-top:10px;display:block}
.badge-greeting{font-size:12px;color:#73766c;margin:10px 0 15px}
.badge-strip{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--badge-color);margin:auto -20px 0;padding:12px 20px;color:#20291f;transition:background .3s}
.badge-role{font-size:13px;font-weight:600;letter-spacing:.2px}.badge-access{font-size:10px}
.badge-id{display:flex;align-items:center;justify-content:space-between;font:9px monospace;letter-spacing:.4px;padding-top:10px;color:#676b61}
.badge-barcode{width:56px;height:12px;background:repeating-linear-gradient(90deg,#33382d 0 1px,transparent 1px 3px,#33382d 3px 5px,transparent 5px 6px,#33382d 6px 7px,transparent 7px 11px)}
.badge-back{transform:rotateY(180deg)}
.badge-back-title{font:400 34px/1.05 var(--serif);letter-spacing:-1px;margin-top:19px}
.badge-back-note{font-size:12px;line-height:1.6;margin-top:16px;color:#63675c}
.badge-back-url{font-size:11px;margin-top:auto;color:#63675c}
.badge-mosaic{display:flex;gap:4px;margin-top:16px}.badge-mosaic i{width:15px;height:16px;background:var(--human);transform:rotate(-4deg)}
.badge-mosaic i:nth-child(3n){background:var(--new);transform:rotate(3deg)}.badge-mosaic i:nth-child(3n+1){background:var(--assist)}.badge-mosaic i:nth-child(2n){background:var(--handle)}
.badge-floor-note{text-align:center;color:var(--muted);font-size:12px;margin:12px 0 0}
@media(max-width:760px){.badge-playground{grid-template-columns:1fr;gap:12px;padding-top:55px;padding-bottom:45px}.badge-intro{text-align:center}.badge-intro h2{font-size:43px}.badge-intro>p{margin-left:auto;margin-right:auto;max-width:320px;font-size:16px}.badge-display{width:min(100%,460px);justify-self:center}.badge-floor-note{font-size:11px}}
@media(prefers-reduced-motion:reduce){.badge-rotator,.badge-types button,.badge-strip{transition:none}}