/* V10: let the portrait occupy the reveal; tilt is independent of the flip. */
.bar-experience .opening-dialog.is-showcase{width:740px;max-width:calc(100vw - 24px);padding:24px 32px 18px;overflow-x:clip;background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--pack-accent),#151019 94%),#100e14 75%)}
.bar-experience .is-showcase h2{margin:16px 0 6px;font-size:clamp(24px,3.5vw,34px);line-height:1.1}
.bar-experience .is-showcase #opening-hint{min-height:16px;font-size:11px}
.bar-experience .is-showcase .reveal-stage{--stage-height:min(552px,max(210px,calc(94dvh - 340px)));--pack-height:min(380px,calc(var(--stage-height) - 70px),calc((100vw - 80px) / 1.2));--card-width:min(480px,82vw,calc(var(--stage-height) * .87));height:var(--stage-height);min-height:0;overflow:visible;margin:18px 0 16px}
.bar-experience .opening-dialog.is-showcase .sealed-pack{height:var(--pack-height);width:calc(var(--pack-height) * .62);overflow:visible}
.bar-experience .is-showcase .reveal-card{width:var(--card-width);height:calc(var(--card-width) / .87);min-width:180px;min-height:207px;perspective:1400px;cursor:pointer;outline-offset:8px;border-radius:16px}
.card-tilt{display:block;width:100%;height:100%;user-select:none;transform-style:preserve-3d;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .35s ease-out}
.is-inspecting .card-tilt{transition:transform .12s ease-out}
.is-showcase .card-front,.is-showcase .card-back{border-radius:15px;box-shadow:0 20px 50px #0009,0 0 0 1px #f2dfbe77}
.is-showcase .card-front{padding:10px;background:linear-gradient(135deg,#fff7e5,#d1ccc4 50%,#f6e9d6);border:1px solid #fff9;isolation:isolate}
.is-showcase .card-front>img{border-radius:8px;flex-shrink:0;max-height:calc(100% - 43px);object-fit:contain;background:#151317}
.is-showcase .card-caption{padding:6px 6px 0;gap:12px;min-height:33px}
.is-showcase .card-caption b{font-size:clamp(12px,1.5vw,17px);line-height:1.05;letter-spacing:-.4px}
.is-showcase .card-caption>span{font-size:8px;color:#625849;text-align:right;max-width:35%;line-height:1.4}
.is-showcase .card-back b{font-size:clamp(75px,11vw,125px);letter-spacing:-9px}
.is-showcase .card-back em{font-size:28px}.is-showcase .card-back>span{font-size:9px}.is-showcase .card-back small{font-size:9px}
.is-showcase .card-front::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;background:radial-gradient(ellipse at var(--glare-x,50%) var(--glare-y,30%),#fff9,transparent 62%);mix-blend-mode:soft-light;transition:opacity .3s}
.is-showcase .revealed.is-inspecting .card-front::after{opacity:.65}
.discovery-badge{position:absolute;right:22px;top:22px;z-index:4;background:#f6d889;color:#2d210e;border:1px solid #fff4c8;border-radius:20px;padding:7px 12px;font:700 10px 'Courier New',monospace;letter-spacing:1.5px;box-shadow:0 3px 15px #0005}
.bar-experience .is-showcase .burst{width:115%;height:115%;opacity:.12;transition:opacity 1s,transform 1.2s}
.bar-experience .is-showcase.is-discovery .burst{opacity:.35;transform:scale(1.08);animation:discovery-light 1.6s ease-out both}
.is-discovery .card-front{box-shadow:0 24px 65px #0009,0 0 0 1px #ffe5a8,0 0 36px color-mix(in srgb,var(--pack-accent),transparent 77%)}
.is-discovery .discovery-badge{animation:discovery-badge .6s cubic-bezier(.2,.8,.2,1) both}
.bar-experience .is-showcase .result-actions{max-width:480px;margin:auto;grid-template-columns:1fr 1fr;gap:8px}
.bar-experience .is-showcase .result-actions .text-button{padding:5px 0}
.opening-controls{display:grid;min-height:88px;align-items:start}
.opening-controls>.opening-actions,.opening-controls>.result-actions{grid-area:1/1;width:100%;align-self:start}
.bar-experience .is-showcase .bar-modal-tools{max-width:550px;margin:14px auto 0;padding-top:12px}
.bar-experience .is-showcase .opening-note{margin-top:10px!important}
@keyframes discovery-light{0%{opacity:.12;transform:scale(.85)}30%{opacity:.45}100%{opacity:.35;transform:scale(1.08)}}
@keyframes discovery-badge{from{opacity:0;transform:translateY(5px) scale(.9)}to{opacity:1;transform:none}}
@media(max-width:600px){.bar-experience .opening-dialog.is-showcase{padding:22px 16px 16px}.bar-experience .is-showcase h2{font-size:26px;max-width:100%;overflow-wrap:anywhere}.is-showcase .card-front{padding:8px}.is-showcase .card-caption{padding-left:2px;padding-right:2px}.discovery-badge{top:17px;right:17px;padding:6px 10px}.is-showcase .card-caption>span{font-size:7px}.bar-experience .is-showcase .bar-modal-tools{gap:10px 13px}}
@media(max-height:600px){.bar-experience .opening-dialog.is-showcase{overflow-y:auto}.bar-experience .is-showcase .reveal-card{min-height:0;min-width:0}}
@media(max-width:360px){.bar-experience .opening-dialog.is-showcase h2{font-size:22px;min-height:48px;align-content:center}.bar-experience .is-showcase .reveal-stage{--stage-height:min(552px,max(180px,calc(94dvh - 340px)))}}
@media(prefers-reduced-motion:reduce){.card-tilt{transform:none!important;transition:none!important}.discovery-badge,.bar-experience .is-showcase.is-discovery .burst{animation:none}}
.is-quick .card-tilt{transform:none!important}

/* A lit, tactile capsule shared by Open the pack and Reveal my DOPE. */
.bar-experience #tear-button{
  --cta-color:var(--pack-accent,#edc366);
  position:relative;isolation:isolate;overflow:visible;
  min-height:60px;padding:10px 13px 10px 28px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--cta-color),#fff 48%);
  color:#211424;font-size:14px;font-weight:750;letter-spacing:.025em;
  background:linear-gradient(175deg,color-mix(in srgb,var(--cta-color),#fff 48%) 0%,var(--cta-color) 48%,color-mix(in srgb,var(--cta-color),#392033 18%) 100%);
  box-shadow:inset 0 2px 1px #fff8,inset 0 -3px 2px #29101c38,0 4px 0 color-mix(in srgb,var(--cta-color),#140e18 70%),0 9px 20px #0008;
  text-shadow:0 1px 0 #ffffff45;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
}
.bar-experience #tear-button::before{
  content:'';position:absolute;inset:8px -14px -12px;z-index:-1;
  border-radius:inherit;pointer-events:none;
  background:var(--cta-color);filter:blur(23px);opacity:.46;
  transition:opacity .25s ease,transform .25s ease;
}
.bar-experience #tear-button::after{
  content:'';position:absolute;inset:3px;border-radius:inherit;pointer-events:none;
  border-top:1px solid #fff7;
  background:linear-gradient(180deg,#fff2,transparent 42%);
}
.bar-experience #tear-button>span{
  display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;
  border-radius:50%;border:1px solid #ffffff70;background:#21142412;
  box-shadow:inset 0 1px 3px #29101c15,0 1px 0 #ffffff38;
  font-size:21px;line-height:1;transition:transform .2s ease,background .2s ease;
}
@media(hover:hover) and (pointer:fine){
  .bar-experience #tear-button:enabled:hover{transform:translateY(-2px);filter:brightness(1.06)}
  .bar-experience #tear-button:enabled:hover::before{opacity:.68;transform:scaleX(1.07)}
  .bar-experience #tear-button:enabled:hover>span{transform:rotate(-8deg);background:#ffffff30}
}
.bar-experience #tear-button:focus-visible{outline:2px solid #fff1d9;outline-offset:7px}
.bar-experience #tear-button:enabled:active{
  transform:translateY(2px) scale(.985);
  box-shadow:inset 0 2px 4px #29101c25,0 1px 0 color-mix(in srgb,var(--cta-color),#140e18 70%),0 4px 12px #0006;
}
.bar-experience #tear-button:disabled{transform:none;filter:saturate(.75);cursor:progress}
.bar-experience #tear-button:disabled::before{opacity:.2}
@media(prefers-reduced-motion:reduce){
  .bar-experience #tear-button,.bar-experience #tear-button::before,.bar-experience #tear-button>span{transition:none}
  .bar-experience #tear-button:enabled:hover,.bar-experience #tear-button:enabled:active,.bar-experience #tear-button:enabled:hover>span{transform:none}
}