/* wrapped.css: FLORIDA WRAPPED (wrapped.js). The rank screen's SAVE MY FLORIDA WRAPPED button and the cardboard
   preview tray. Built from the kit in style.css (cb-btn / cb-badge / cb-print + the --cb-* textures). */

/* the button gets its own row under the rank screen's buttons */
#quiz .wr-row{display:flex;justify-content:center;align-items:center;gap:.8em;margin-top:.6em}
/* make room for it above the parapet: the share card and the rank give up a little height */
#quiz:has(.wr-row) .rank{margin:.12em 0 .12em}
#quiz:has(.wr-row) .share{font-size:clamp(8.5px,2.2cqw,16px);margin:.1em 0 .75em;padding:.5em 1em}
#quiz .wr-open{font:clamp(11px,2.55cqw,20px)/1 'Homecoming Parade','Alfa Slab One',serif;letter-spacing:.08em;padding:.66em 1.6em .56em;white-space:nowrap;--rot:-1deg}
.cb-portrait #quiz .wr-open{font-size:14px}

/* the preview: the parade dims, a board panel holds the card */
.wr-back{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:3vh 3vw;
  background:radial-gradient(120% 90% at 50% 45%,rgba(40,18,6,.62),rgba(14,6,2,.86));-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.wr-back[hidden]{display:none}
.wr-panel{position:relative;display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);max-height:94vh;padding:clamp(12px,1.6vw,22px) clamp(16px,2.2vw,30px);border-radius:8px;rotate:-.4deg;
  background:var(--cb-fiber) padding-box,var(--cb-grain) padding-box,var(--cb-light) padding-box,radial-gradient(120% 90% at 50% 40%,#f8ead0,#ecd3a8) padding-box,var(--cb-flutes) border-box;
  border:7px solid transparent;outline:1.5px solid rgba(150,100,45,.45);outline-offset:-15px;box-shadow:-18px 26px 34px rgba(8,3,0,.58),-4px 6px 6px rgba(8,3,0,.32),var(--dp-rim)}
/* KCC hardware + branding (depth.css language): brass brads in the corners, the crest on a round felt patch sewn over the
   top-left corner, gold satin rim, felt pillowed a little, lit from the right like everything else */
.wr-panel::after{content:'';position:absolute;inset:7px;pointer-events:none;
  background:var(--cb-brad) 100% 0/15px 15px no-repeat,var(--cb-brad) 0 100%/15px 15px no-repeat,var(--cb-brad) 100% 100%/15px 15px no-repeat}
.wr-panel::before{content:'';position:absolute;z-index:2;left:-26px;top:-26px;width:clamp(70px,7vw,96px);aspect-ratio:1;rotate:-10deg;box-sizing:border-box;border-radius:50%;
  border:4px solid transparent;pointer-events:none;
  background:repeating-linear-gradient(35deg,rgba(255,255,255,.06) 0 .8px,rgba(0,0,0,.07) .8px 1.7px) padding-box,
    url(kcc/kcc-crest-small.webp) 50% 52%/86% auto no-repeat padding-box,var(--dp-felt) padding-box,
    radial-gradient(circle at 64% 32%,#2b4a30,#173520 55%,#0c1f11) padding-box,
    repeating-conic-gradient(#fff0b8 0 2deg,#d9a441 2deg 5deg,#6e4a14 5deg 7deg) border-box;
  box-shadow:0 0 0 .7px rgba(50,28,6,.75),-5px 8px 8px rgba(8,3,0,.5),inset 4px -5px 8px rgba(0,0,0,.45),inset -1px 1px 2px rgba(255,240,200,.18)}
.wr-champ .wr-panel{background:var(--cb-fiber) padding-box,var(--cb-grain) padding-box,var(--cb-light) padding-box,radial-gradient(120% 90% at 50% 40%,#f8ead0,#ecd3a8) padding-box,
  linear-gradient(135deg,#7a5214,#e9c25a 30%,#fff1b8 50%,#c8962e 72%,#6e4810) border-box}
.wr-shot{position:relative;display:grid;place-items:center;height:min(84vh,880px);aspect-ratio:9/16;border-radius:4px;
  background:var(--cb-fiber),rgba(120,70,25,.16);box-shadow:inset 0 3px 8px rgba(70,35,10,.35),inset 0 -1px 0 rgba(255,240,210,.5)}
.wr-img{display:block;width:100%;height:100%;object-fit:contain;border-radius:3px;box-shadow:-6px 9px 12px rgba(40,16,4,.35)}
.wr-img:not([src]){visibility:hidden}
.wr-shot>*{grid-area:1/1}
/* the card is drawn straight into this canvas, stage by stage, so the slab fills in as it's made */
.wr-cv{display:block;width:100%;height:100%;border-radius:3px;box-shadow:-6px 9px 12px rgba(40,16,4,.35)}
/* progress: a cream strip with the four stages and a dashed cut line that fills (CSS transitions only, no loop) */
.wr-prog{position:absolute;left:50%;bottom:7%;translate:-50% 0;display:flex;align-items:center;gap:.4em;padding:.72em 1em 1.05em;white-space:nowrap;
  font:700 clamp(11px,.95vw,14px)/1 'Barlow Condensed',sans-serif;letter-spacing:.08em;--rot:-1.5deg;box-shadow:0 3px 0 #8a6234,-5px 8px 10px rgba(40,16,4,.4)}
.wr-prog[hidden]{display:none}
.wr-prog span{opacity:.4;transition:opacity .25s,color .25s}
.wr-prog span.done{opacity:.85}
.wr-prog span.on{opacity:1;color:var(--cb-red)}
.wr-prog i{font-style:normal;opacity:.45}
.wr-bar{position:absolute;left:1em;right:1em;bottom:.42em;height:4px;border-radius:2px;background:rgba(90,50,15,.16)}
.wr-bar>b{display:block;height:100%;width:calc(var(--p,0) * 100%);border-radius:2px;background:repeating-linear-gradient(90deg,var(--cb-laurel) 0 7px,transparent 7px 11px);transition:width .45s ease-out}
@media (prefers-reduced-motion:reduce){.wr-bar>b,.wr-prog span{transition:none}}
.wr-wait{position:absolute;font:700 clamp(13px,1.3vw,18px)/1 'Barlow Condensed',sans-serif;letter-spacing:.1em;--rot:-2deg}
.wr-wait[hidden]{display:none}
.wr-side{display:flex;flex-direction:column;align-items:stretch;gap:1.05em;width:clamp(170px,17vw,240px);text-align:center}
/* FLORIDA WRAPPED / CHAMPION CARD: a brick-red felt patch, gold satin rim, cream stitch + thread (depth.css) */
.wr-side .wr-k{--felt:var(--cb-red);--thread:#fbe8c8;align-self:center;font:clamp(14px,1.25vw,19px)/1 'Homecoming Parade','Barlow Condensed',sans-serif;letter-spacing:.09em;
  --rot:-2deg;margin-bottom:.2em;padding:.66em 1.1em .56em;border-radius:5px;color:var(--thread);-webkit-mask:none;mask:none;box-shadow:var(--dp-shadow-hang),var(--dp-pillow)}
.wr-champ .wr-side .wr-k{--felt:#141210;--thread:#ffd760}
.wr-note{margin:0 0 .4em;font:italic 500 clamp(14px,1.25vw,18px)/1.3 'Zilla Slab','Bree Serif',Georgia,serif}
.wr-side .cb-btn{font:clamp(14px,1.35vw,20px)/1 'Homecoming Parade','Alfa Slab One',serif;letter-spacing:.08em;padding:.72em 1em .62em;text-decoration:none;text-align:center;cursor:pointer}
.wr-side .wr-dl{--rot:-1deg}.wr-side .wr-share{--rot:.8deg}.wr-side .wr-close{--rot:-.5deg;font-size:clamp(12px,1.1vw,16px)}
.wr-side [hidden]{display:none}
.wr-dl.wr-off{pointer-events:none;filter:saturate(.4) brightness(.92)}
@media (max-aspect-ratio:1/1){
  .wr-panel{flex-direction:column;gap:12px}
  .wr-shot{height:min(66vh,760px)}
  .wr-side{width:auto;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
  .wr-note{flex-basis:100%;margin:0}
}