/* The Wrapped deck: flip cards you swipe through. Sizes use container units (cqw) so a card looks the same at any size and
   exports cleanly at 1080 wide. Card colors come from the chosen background (set as --dk-* variables by js/story.js), not
   from the site style. Avoid color-mix, filters and clip-path in here: the image export cannot render them. */
dialog.story{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100dvh;color:var(--fg);overflow:hidden}
dialog.story::backdrop{background:rgba(var(--bg-rgb),.95)}
.story-shell{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px 0 12px}
.story-x{position:absolute;top:12px;right:14px;background:var(--surface);border:var(--bw) var(--bs) var(--line2);color:var(--muted);border-radius:var(--r-pill);padding:7px 14px;font:600 12.5px/1 var(--font-body);cursor:pointer;z-index:8}
.story-x:hover{color:var(--fg);border-color:var(--accent)}
.deck-top{display:flex;align-items:center;gap:14px;min-height:20px}
.deck-count{font:600 12px/1 var(--font-mono);letter-spacing:.14em;color:var(--muted)}
.deck-dots{display:flex;gap:5px;align-items:center;max-width:62vw;flex-wrap:wrap;justify-content:center}
.deck-dots button{width:7px;height:7px;border-radius:99px;border:0;padding:0;background:var(--line2);cursor:pointer;transition:width .25s var(--ease),background .25s}
.deck-dots button.on{width:20px;background:var(--fg)}

/* defaults (the Sunburst look); js/story.js overrides these per card */
.deck,.story-offscreen{--dk-bg:#ffd23f;--dk-bg-rgb:255,210,63;--dk-ink:#1b1233;--dk-ink-rgb:27,18,51;--dk-mute:#5a4a1f;--dk-a1:#ff8c1a;--dk-a2:#fff1a8;--dk-hot:#ff3d6e;--dk-on-hot:#ffffff;--dk-panel:#fff9e0;--dk-pi:#1b1233;--dk-pi-rgb:27,18,51;--dk-good:#08855a;--dk-bad:#d6251c;
  --dk-display:"Bricolage Grotesque","Geist",ui-sans-serif,system-ui,sans-serif;--dk-body:"Geist",ui-sans-serif,system-ui,sans-serif;--dk-mono:"Geist Mono",ui-monospace,monospace}

/* ---------- the deck ---------- */
.deck{--cw:min(84vw,calc((100dvh - 262px) * 9 / 16),400px);--gap:18px;display:flex;gap:var(--gap);width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;padding:14px 0;align-items:center;cursor:grab;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;outline:0}
.deck::-webkit-scrollbar{display:none}
.deck::before,.deck::after{content:"";flex:none;width:calc(50% - var(--cw) / 2 - var(--gap))}
.deck.dragging{scroll-snap-type:none;cursor:grabbing;user-select:none}
.dk-card{flex:none;width:var(--cw);aspect-ratio:9/16;scroll-snap-align:center;perspective:1600px;transform:scale(.88);opacity:.55;transition:transform .45s var(--ease),opacity .45s;-webkit-tap-highlight-color:transparent;user-select:none}
.dk-card.is-active{transform:none;opacity:1}
.dk-card:focus-visible{outline:3px solid var(--accent);outline-offset:6px;border-radius:calc(var(--cw) * .07)}
.dk-flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.3,.9,.3,1)}
.dk-card.flipped .dk-flip{transform:rotateY(180deg)}
.dk-face{position:absolute;inset:0;overflow:hidden;border-radius:calc(var(--cw) * .07);backface-visibility:hidden;-webkit-backface-visibility:hidden;container-type:size;color:var(--dk-ink);font-family:var(--dk-body);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.dk-back{transform:rotateY(180deg);background:var(--dk-panel);color:var(--dk-pi)}
.dk-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.dk-top{position:absolute;left:6cqw;right:6cqw;top:5cqw;display:flex;justify-content:space-between;align-items:center;font:700 3cqw/1 var(--dk-mono);letter-spacing:.12em;text-transform:uppercase;z-index:3}
.dk-brand{display:flex;gap:2cqw;align-items:center}
.dk-mark{width:5.4cqw;height:5.4cqw;color:var(--dk-ink);display:block}
.dk-no{background:var(--dk-ink);color:var(--dk-bg);padding:1.2cqw 2.2cqw;border-radius:99px}
.dk-bot{position:absolute;left:6cqw;right:6cqw;bottom:4.6cqw;display:flex;justify-content:space-between;align-items:center;font:600 3cqw/1 var(--dk-mono);letter-spacing:.08em;z-index:3}
.dk-hint{display:flex;align-items:center;gap:1.4cqw;background:var(--dk-ink);color:var(--dk-bg);padding:1.4cqw 3cqw;border-radius:99px;text-transform:uppercase;font-size:3cqw}
.dk-hint svg{width:3.4cqw;height:3.4cqw}
.dk-card.is-active .dk-hint{animation:hint 2.2s ease-in-out infinite}
@keyframes hint{0%,100%{transform:translateY(0)}50%{transform:translateY(-1cqw)}}

/* ---------- the front: a poster with one stat ---------- */
.dk-main{position:absolute;left:7cqw;right:7cqw;top:15cqw;bottom:15cqw;display:flex;flex-direction:column;justify-content:center;gap:3.6cqw;z-index:2}
.dk-kicker{align-self:flex-start;background:var(--dk-ink);color:var(--dk-bg);font:700 3.5cqw/1 var(--dk-mono);letter-spacing:.1em;text-transform:uppercase;padding:1.8cqw 3cqw;transform:rotate(-2.5deg);box-shadow:1cqw 1cqw 0 var(--dk-hot)}
.dk-hero{font:800 21cqw/.9 var(--dk-display);letter-spacing:-.05em;color:var(--dk-ink);text-shadow:1.1cqw 1.1cqw 0 var(--dk-a2);white-space:nowrap}
.dk-hero.lg{font-size:17cqw}.dk-hero.xl{font-size:13.5cqw}
.dk-hero.sm{font-size:13.5cqw;line-height:.95;white-space:normal}
.dk-unit{font-size:.36em;letter-spacing:-.01em;text-shadow:none}
.dk-line,.dk-meta,.dk-quote,.dk-bigchip,.dk-faces,.dk-two>div,.dk-awards>div,.dk-cta{background:rgba(var(--dk-bg-rgb),.9);border:.7cqw solid var(--dk-ink);border-radius:3cqw}
.dk-line{margin:0;padding:2.6cqw 3.4cqw;font:600 4.3cqw/1.28 var(--dk-body);color:var(--dk-ink)}
.dk-line b{font-weight:800}
.dk-meta{padding:2.2cqw 3.2cqw;font:600 3.3cqw/1.45 var(--dk-mono);width:fit-content}
.dk-pills{display:flex;flex-wrap:wrap;gap:1.8cqw}
.dk-pills span{background:var(--dk-ink);color:var(--dk-bg);font:700 3.5cqw/1 var(--dk-body);padding:1.8cqw 3cqw;border-radius:99px}
.dk-curve{width:100%;height:auto;display:block}
.dk-dots{display:flex;flex-wrap:wrap;gap:1.5cqw}
.dk-dots i{width:6.2cqw;height:6.2cqw;border-radius:50%;border:.8cqw solid var(--dk-ink);display:block}
.dk-dots i.w{background:var(--dk-ink)}
.dk-legend{display:flex;align-items:center;gap:2cqw;font:600 3cqw/1 var(--dk-mono);text-transform:uppercase;letter-spacing:.08em}
.dk-legend span{width:3.6cqw;height:3.6cqw;border-radius:50%;border:.7cqw solid var(--dk-ink);display:inline-block}
.dk-legend span.w{background:var(--dk-ink)}
.dk-bigchip{padding:2.6cqw 3.4cqw;width:fit-content;max-width:100%}
.dk-hours{display:flex;align-items:flex-end;gap:.9cqw;height:20cqw}
.dk-hours i{flex:1;background:var(--dk-ink);border-radius:.8cqw .8cqw 0 0;display:block;opacity:.88}
.dk-hours i.hot{background:var(--dk-hot);box-shadow:0 0 0 .6cqw var(--dk-ink)}
.dk-hours-x{position:relative;height:3cqw;font:600 3cqw/1 var(--dk-mono);letter-spacing:.06em;margin-top:1.2cqw}
.dk-hours-x span{position:absolute;top:0}.dk-hours-x span:nth-child(1){left:0}.dk-hours-x span:nth-child(2){left:25%}.dk-hours-x span:nth-child(3){left:50%}.dk-hours-x span:nth-child(4){left:75%}
.dk-ring{position:relative;width:32cqw;height:32cqw}
.dk-ring svg{width:100%;height:100%;display:block}
.dk-ring-t{position:absolute;inset:0;display:grid;place-items:center}
.dk-ring-t b{font:800 12cqw/1 var(--dk-display);letter-spacing:-.04em}
.dk-quote{padding:3.4cqw 3.8cqw;font:700 5.4cqw/1.22 var(--dk-display);letter-spacing:-.02em}
.dk-quote.sm{font-size:3.9cqw;font-weight:600;font-family:var(--dk-body);letter-spacing:0}
.dk-quote b{font-weight:800}
.dk-awards{display:grid;gap:2cqw}
.dk-awards>div{display:grid;grid-template-columns:1fr auto;gap:0 3cqw;padding:2cqw 3.2cqw;align-items:center}
.dk-awards span{grid-column:1/-1;display:flex;align-items:center;gap:1.6cqw;font:700 3cqw/1 var(--dk-mono);letter-spacing:.08em;text-transform:uppercase}
.dk-awards span svg{width:3.6cqw;height:3.6cqw}
.dk-awards b{font:800 5cqw/1.15 var(--dk-display)}.dk-awards em{font:700 3.6cqw/1 var(--dk-mono);font-style:normal}
.dk-faces{display:flex;flex-wrap:wrap;gap:2.2cqw 3cqw;padding:2.4cqw 3cqw}
.dk-coins{display:flex}
.dk-coins i{width:17cqw;height:17cqw;border-radius:50%;background:var(--dk-a2);border:1cqw solid var(--dk-ink);margin-right:-4.6cqw;box-shadow:.8cqw .8cqw 0 var(--dk-a1);display:block}
.dk-two{display:grid;gap:2cqw}
.dk-two>div{display:grid;grid-template-columns:auto 1fr auto;gap:3cqw;align-items:center;padding:2cqw 3.2cqw}
.dk-two span{font:700 3cqw/1 var(--dk-mono);letter-spacing:.08em;text-transform:uppercase}
.dk-two b{font:800 4.4cqw/1 var(--dk-display);white-space:nowrap}
.dk-cta{padding:2.4cqw 3.4cqw;font:600 3.6cqw/1.3 var(--dk-body);text-align:center}

/* sticker */
.dk-sticker{position:absolute;right:2.5cqw;top:25cqw;width:33cqw;height:33cqw;transform:rotate(12deg);z-index:4;display:grid;place-items:center}
.dk-star{position:absolute;inset:0;width:100%;height:100%;display:block}
.dk-sticker span{position:relative;font:800 5.2cqw/1.02 var(--dk-display);text-align:center;max-width:22cqw;text-transform:uppercase;letter-spacing:-.01em}
.dk-light-text span{color:#ffffff}.dk-dark-text span{color:#14131f}
.dk-card.is-active .dk-sticker{animation:stickerpop .7s .25s cubic-bezier(.3,1.6,.4,1) both}
@keyframes stickerpop{from{transform:rotate(-30deg) scale(0)}to{transform:rotate(12deg) scale(1)}}
.dk-card.is-active .dk-main>*{animation:rise .7s var(--ease) both}
.dk-card.is-active .dk-main>*:nth-child(2){animation-delay:.07s}.dk-card.is-active .dk-main>*:nth-child(3){animation-delay:.14s}.dk-card.is-active .dk-main>*:nth-child(4){animation-delay:.21s}
@keyframes rise{from{opacity:0;transform:translateY(5cqh)}to{opacity:1;transform:none}}

/* token chips inside cards */
.dk-face .tk{gap:2.4cqw}
.dk-face .tk-img{width:8cqw;height:8cqw;font-size:3.4cqw;box-shadow:0 0 0 .6cqw var(--dk-ink)}
.dk-face .tk-sym{font-size:3.8cqw;color:inherit}
.dk-face .tk-name{font-size:3cqw;max-width:28cqw;color:inherit;opacity:.7}
.dk-bigchip .tk-img{width:15cqw;height:15cqw;font-size:6cqw}
.dk-bigchip .tk-sym{font-size:6.6cqw}.dk-bigchip .tk-name{font-size:3.4cqw;max-width:42cqw}
.dk-back .tk-img{box-shadow:0 0 0 .5cqw rgba(var(--dk-pi-rgb),.35)}

/* ---------- the back: details and related stats ---------- */
.dk-bhead{position:absolute;left:0;right:0;top:0;height:27cqw;overflow:hidden}
.dk-bhead .dk-art{height:auto;min-height:100%}
.dk-btitle{position:absolute;left:5cqw;bottom:2.6cqw;max-width:88cqw;font:800 7.6cqw/1.05 var(--dk-display);letter-spacing:-.035em;color:var(--dk-ink);background:var(--dk-bg);padding:1.2cqw 2.8cqw;border-radius:2.2cqw;border:.6cqw solid var(--dk-ink);z-index:3}
.dk-bbody{position:absolute;left:5cqw;right:5cqw;top:30.5cqw;bottom:12cqw;overflow-y:auto;display:flex;flex-direction:column;gap:2.4cqw;color:var(--dk-pi);scrollbar-width:none}
.dk-bbody::-webkit-scrollbar{display:none}
.dk-back .dk-top{color:var(--dk-ink)}
.dk-back .dk-bot{color:var(--dk-pi)}
.dk-back .dk-hint{background:var(--dk-pi);color:var(--dk-panel)}
.dk-back .cg{color:var(--dk-good)}.dk-back .cb{color:var(--dk-bad)}
.dk-tiles{display:grid;gap:1.8cqw}
.dk-tiles.c2{grid-template-columns:1fr 1fr}.dk-tiles.c3{grid-template-columns:repeat(3,1fr)}
.dk-tile{background:rgba(var(--dk-pi-rgb),.07);border-radius:2.4cqw;padding:2cqw 2.4cqw;min-width:0}
.dk-tile span{display:block;font:600 3cqw/1.2 var(--dk-mono);letter-spacing:.07em;text-transform:uppercase;opacity:.65}
.dk-tile b{display:block;font:800 5.6cqw/1.15 var(--dk-display);letter-spacing:-.03em;overflow-wrap:anywhere}
.dk-tile small{display:block;font-size:3cqw;opacity:.65;line-height:1.25}
.dk-sh{font:700 3cqw/1 var(--dk-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin-top:1cqw}
.dk-rows>div{display:flex;justify-content:space-between;gap:3cqw;padding:1.55cqw 0;border-bottom:.35cqw solid rgba(var(--dk-pi-rgb),.14);font-size:3.7cqw;line-height:1.25}
.dk-rows>div:last-child{border-bottom:0}
.dk-rows span{opacity:.72}.dk-rows b{text-align:right;font-weight:700}
.dk-bar{display:grid;grid-template-columns:24cqw 1fr auto;gap:2cqw;align-items:center;font-size:3.4cqw}
.dk-bar .l{opacity:.78;line-height:1.15}
.dk-bar .t{height:3cqw;background:rgba(var(--dk-pi-rgb),.12);border-radius:99px;overflow:hidden}
.dk-bar i{display:block;height:100%;width:0;background:rgba(var(--dk-pi-rgb),.78);border-radius:99px}
.dk-bar i.bad{background:var(--dk-bad)}.dk-bar i.warn{background:var(--dk-hot)}
.dk-bar b{font-weight:700;text-align:right;line-height:1.1}.dk-bar small{opacity:.65;font-weight:500;font-size:3cqw}
.dk-chiprow{display:flex;justify-content:space-between;align-items:center;gap:3cqw;padding:1.4cqw 0;border-bottom:.35cqw solid rgba(var(--dk-pi-rgb),.14)}
.dk-chiprow .v{text-align:right;font:800 4cqw/1.1 var(--dk-display);white-space:nowrap}
.dk-chiprow .v small{display:block;font:500 3cqw/1.3 var(--dk-body);opacity:.7;white-space:normal;max-width:32cqw;margin-left:auto}
/* ranked lists: ten rows fit on one back without scrolling (js/deck-parts.js rankList) */
.dk-ranks{display:grid}
.dk-rank{display:grid;grid-template-columns:4.6cqw 1fr auto;gap:2cqw;align-items:center;padding:.95cqw 0;border-bottom:.35cqw solid rgba(var(--dk-pi-rgb),.14)}
.dk-rank:last-child{border-bottom:0}
.dk-rank .n{font:700 3cqw/1 var(--dk-mono);opacity:.5;text-align:right}
.dk-rank .tk{gap:1.8cqw;min-width:0}
.dk-rank .tk-img{width:6.6cqw;height:6.6cqw;font-size:3cqw}
.dk-rank .tk-sym{font-size:3.5cqw}
.dk-rank .tk-name{display:none}
.dk-rank .v{text-align:right;font:800 3.5cqw/1.1 var(--dk-display);white-space:nowrap}
.dk-rank .v small{display:block;font:500 3cqw/1.2 var(--dk-body);opacity:.7}
.dk-note{margin:0;font-size:3.2cqw;line-height:1.4;opacity:.7}.dk-note.big{font-size:4cqw;opacity:1}
.dk-cap{display:flex;justify-content:space-between;font:600 3cqw/1 var(--dk-mono);opacity:.6;margin-top:-1cqw}
.dk-back .dk-curve{background:rgba(var(--dk-pi-rgb),.05);border-radius:2.4cqw}
.dk-facts{display:grid;gap:2cqw}
.dk-fact{display:flex;gap:2.6cqw;align-items:flex-start;font-size:3.6cqw;line-height:1.32}
.dk-fact .ib{flex:none;width:7.4cqw;height:7.4cqw;border-radius:50%;background:var(--dk-hot);color:var(--dk-on-hot);display:grid;place-items:center}
.dk-fact .ib svg{width:4.2cqw;height:4.2cqw}
.dk-back .dk-hours i{background:rgba(var(--dk-pi-rgb),.7)}
.dk-back .dk-hours i.hot{background:var(--dk-hot);box-shadow:none}

/* ---------- controls under the deck ---------- */
.story-nav{position:absolute;top:50%;width:50px;height:50px;margin-top:-50px;border-radius:50%;border:var(--bw) var(--bs) var(--line2);background:var(--surface);color:var(--fg);cursor:pointer;z-index:6;transition:transform .2s var(--ease),border-color .2s}
.story-nav.prev{left:12px}
.story-nav.next{right:12px}
@media (min-width:700px){.story-nav.prev{left:calc(50% - 300px)}.story-nav.next{right:calc(50% - 300px)}}
.story-nav::before{content:"";position:absolute;inset:0;margin:auto;width:10px;height:10px;border-top:2px solid var(--fg);border-right:2px solid var(--fg)}
.story-nav.next::before{transform:translateX(-2px) rotate(45deg)}
.story-nav.prev::before{transform:translateX(2px) rotate(-135deg)}
.story-nav:hover{border-color:var(--accent);transform:scale(1.08)}
.deck-skins{display:flex;gap:10px;overflow-x:auto;max-width:100%;padding:2px 16px 4px;scrollbar-width:none}
.deck-skins::-webkit-scrollbar{display:none}
.dk-skin{flex:none;background:none;border:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--muted);font:600 10px/1 var(--font-body);cursor:pointer}
.dk-skin .th{position:relative;width:30px;height:53px;border-radius:7px;overflow:hidden;border:2px solid transparent;box-shadow:0 0 0 1px var(--line2);display:block;transition:transform .2s var(--ease)}
.dk-skin .th svg{width:100%;height:100%;display:block}
.dk-skin:hover .th{transform:translateY(-2px)}
.dk-skin[aria-pressed="true"] .th{border-color:var(--fg);box-shadow:0 0 0 2px var(--bg)}
.dk-skin[aria-pressed="true"] .nm{color:var(--fg)}
.story-bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}

/* ---------- exporting: a plain, still copy of one face ---------- */
.story-offscreen{position:fixed;left:-10000px;top:0;width:360px;height:640px;pointer-events:none}
.story-offscreen .dk-face{position:relative;inset:auto;width:360px;height:640px;transform:none;backface-visibility:visible;border-radius:0;box-shadow:none}
.story-offscreen .dk-hint{animation:none}
.exporting *,.exporting *::before,.exporting *::after{animation:none!important;transition:none!important}
/* html2canvas places letters one by one when letter-spacing is set and mis-spaces big numerals: keep display text untracked in exports */
.exporting .dk-hero,.exporting .dk-tile b,.exporting .dk-ring-t b,.exporting .dk-btitle,.exporting .dk-quote,.exporting .dk-awards b,.exporting .dk-two b{letter-spacing:normal!important;font-variant-numeric:normal!important}

@media (max-width:620px){
  .story-nav{display:none}
  .deck{--cw:min(86vw,calc((100dvh - 250px) * 9 / 16))}
}

/* ---------- long tickers: nothing may push a card wider than the card ---------- */
.dk-awards>div{grid-template-columns:minmax(0,1fr) auto}
.dk-awards b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-rows>div>*{min-width:0}
.dk-rows b,.dk-rows span,.dk-tile b,.dk-bar b,.dk-line,.dk-quote,.dk-fact>span:last-child,.dk-chiprow .v{overflow-wrap:anywhere}
.dk-face .tk{max-width:100%}
.dk-face .tk-sym{max-width:34cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-bigchip .tk-sym{max-width:44cqw}

/* big numbers keep a thin outline in the card's own color, so they stay readable when a coin, confetti or star sits behind them */
.dk-hero{text-shadow:-.5cqw 0 0 var(--dk-bg),.5cqw 0 0 var(--dk-bg),0 -.5cqw 0 var(--dk-bg),0 .5cqw 0 var(--dk-bg),-.4cqw -.4cqw 0 var(--dk-bg),.4cqw -.4cqw 0 var(--dk-bg),-.4cqw .4cqw 0 var(--dk-bg),.4cqw .4cqw 0 var(--dk-bg),1.1cqw 1.1cqw 0 var(--dk-a2)}
.dk-hero .dk-unit{text-shadow:-.4cqw 0 0 var(--dk-bg),.4cqw 0 0 var(--dk-bg),0 -.4cqw 0 var(--dk-bg),0 .4cqw 0 var(--dk-bg)}

/* ---------- small and notched screens ---------- */
.story-shell{padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
@media (max-height:500px){ /* a phone on its side: give the card the height, drop the rows of thumbnails and dots */
  .deck{--cw:min(84vw,calc((100dvh - 112px) * 9 / 16),400px)}
  .deck-skins,.deck-dots{display:none}
}

/* a colored amount inside a tile value keeps the value's own size, not the small label size */
.dk-tile b span,.dk-tile b em{font:inherit;text-transform:none;letter-spacing:inherit;opacity:1;display:inline}

/* short phones: the card gets more of the screen (no dot rows, one row of compact buttons) */
@media (max-width:620px) and (max-height:700px){
  .deck-dots{display:none}
  .deck{--cw:min(86vw,calc((100dvh - 196px) * 9 / 16))}
}
@media (max-width:380px){
  .story-bar{flex-wrap:nowrap;gap:6px}
  .story-bar .btn{padding:10px 11px;font-size:13px;white-space:nowrap}
}