/* TiTi card viewer, shared by phones and desktop. Only .tc-* elements and html.tc-open are styled here. */
html.tc-open{overflow:hidden}
.tc-viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden;color-scheme:dark;font-family:'Hanken Grotesk',sans-serif;--card-color:#ef0010}
.tc-viewer[open]{display:block}
.tc-viewer::backdrop{background:rgba(4,4,6,.78);-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%)}
.tc-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(46% 38% at 50% 40%,var(--card-color) 0,transparent 72%);opacity:0;transition:opacity .4s ease}
.tc-viewer.is-in .tc-glow{opacity:.42}
.tc-shell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;height:100%;padding:max(58px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));box-sizing:border-box}
.tc-close{position:absolute;z-index:3;top:max(12px,env(safe-area-inset-top));right:12px;display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #ffffff38;border-radius:50%;background:#16171bcc;color:#fff;font-size:26px;line-height:1;cursor:pointer}
.tc-stage{display:flex;align-items:center;justify-content:center;gap:22px;width:100%}
.tc-card{position:relative;flex:none;width:min(72vw,calc((100vh - 300px) * .6667),400px);width:min(72vw,calc((100svh - 300px) * .6667),400px);aspect-ratio:2/3;padding:0;border:0;border-radius:18px;background:none;perspective:1400px;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent}
.tc-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.7,.2,1)}
.tc-inner.is-instant{transition:none}
.tc-viewer.is-flipped .tc-inner{transform:rotateY(180deg)}
.tc-face{position:absolute;inset:0;overflow:hidden;border-radius:18px;background:#111 center/cover no-repeat;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 30px 60px #000c,0 0 0 1px #ffffff26,0 0 70px #ef001040}
@supports (color:color-mix(in srgb,red,blue)){.tc-face{box-shadow:0 30px 60px #000c,0 0 0 1px #ffffff26,0 0 80px color-mix(in srgb,var(--card-color) 55%,transparent)}}
.tc-back{transform:rotateY(180deg);background-image:url('titi-cards/back-v1.webp')}
.tc-face img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .25s}
.tc-face img.is-loaded{opacity:1}
.tc-card:focus-visible{outline:3px solid #fff;outline-offset:6px}
.tc-nav{display:grid;place-items:center;flex:none;width:52px;height:52px;padding:0;border:1px solid #ffffff38;border-radius:50%;background:#16171bcc;color:#fff;font-size:28px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.tc-nav:hover,.tc-close:hover{background:#2a0a10;border-color:#ff3a50}
.tc-nav:hover{transform:scale(1.06)}
.tc-nav:focus-visible,.tc-close:focus-visible,.tc-flip:focus-visible,.tc-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
.tc-info{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:460px;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .3s ease .1s,transform .3s ease .1s}
.tc-viewer.is-in .tc-info{opacity:1;transform:none}
.tc-head{display:flex;align-items:center;gap:10px;margin:0}
.tc-count{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;color:#c9cace}
.tc-count span{color:#fff}
.tc-rarity{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#1b1b1f;background:#c9cbd1}
.tc-rarity[data-rarity="rare"]{background:linear-gradient(135deg,#f4f6fa,#a9b0bc 50%,#eef1f6);box-shadow:0 0 14px #dfe6f055}
.tc-rarity[data-rarity="secret"]{background:linear-gradient(135deg,#ffe49a,#f5b301 45%,#ffd45c);box-shadow:0 0 16px #f5b30166}
#tc-name{margin:0;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;font-size:clamp(28px,7.5vw,38px);line-height:.95;letter-spacing:-.01em}
#tc-line{margin:0;font-size:15px;line-height:1.5;color:#d6d7db}
.tc-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 14px;margin-top:4px}
.tc-flip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid #ffffff4d;border-radius:999px;background:#ffffff0f;color:#fff;font:600 14px 'Hanken Grotesk',sans-serif;cursor:pointer}
.tc-flip:hover{border-color:#ff3a50;background:#ef00101f}
.tc-set{margin:0;font-size:12px;color:#a9abb2}
.tc-set b{display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:3px 8px;border:1px solid #ef00105c;border-radius:999px;background:#ef00101f;color:#ff7383;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.tc-dots{display:flex;justify-content:center;gap:0}
.tc-dot{position:relative;width:28px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.tc-dot:before{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:4px;background:#ffffff40;transform:translate(-50%,-50%);transition:width .25s,background .25s}
.tc-dot[aria-current="true"]:before{width:20px;background:var(--card-color)}
@media (max-width:760px){
 .tc-nav{display:none}
 .tc-shell{gap:12px}
}
@media (prefers-reduced-motion:reduce){
 .tc-glow,.tc-info,.tc-face img,.tc-dot:before{transition:none}
 .tc-inner{transition:none}
 .tc-viewer.is-flipped .tc-inner{transform:none}
 .tc-back{transform:none;opacity:0}
 .tc-viewer.is-flipped .tc-back{opacity:1}
 .tc-viewer.is-flipped .tc-front{opacity:0}
 .tc-face{transition:opacity .2s ease}
}

/* Pinned TiTi card sequence (cards-sequence.js). Layouts per width live in mobile-v2.css and desktop-v3.css. */
.cards-detail,.cards-progress{display:none}
.m-cards.is-seq .cards-stage{position:sticky;top:0;overflow:hidden}
.m-cards.is-seq .cards-fanbox{position:relative}
.m-cards.is-seq .m-fan{position:absolute;inset:0;width:auto;height:auto;margin:0;max-width:none;perspective:1200px}
.m-cards.is-seq .m-fan-card,.m-cards.is-seq .m-fan-card:nth-child(7){left:calc(50% - var(--seq-w,110px)/2);top:calc(50% - var(--seq-w,110px)*.75);bottom:auto;width:var(--seq-w,110px);transform-origin:50% 50%;animation:none;transition:scale .25s ease,filter .25s ease;will-change:transform,opacity;overflow:hidden;border-radius:11px;box-shadow:0 18px 34px #000b,0 0 0 1px #ffffff1f}
.m-cards.is-seq .m-fan-card img,.m-cards.is-seq .m-fan-card:nth-child(7) img{border-radius:0;box-shadow:none}
.m-cards.is-seq .m-fan-card:nth-child(7){box-shadow:0 20px 40px #000c,0 0 0 1px #ffd76a66,0 0 40px #ffcf4a33}
.m-cards.is-seq .m-fan-card:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,236,170,.65) 47%,rgba(255,255,255,.25) 53%,transparent 70%);transform:translateX(-130%);opacity:0;pointer-events:none}
.m-cards.is-seq .cards-stage.is-secret .m-fan-card:nth-child(7):after{opacity:1;animation:cards-shine 1.5s ease-in-out .1s 2}
@keyframes cards-shine{to{transform:translateX(130%)}}
.cards-glow{position:absolute;left:50%;top:50%;width:min(125%,820px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.cards-glow span{position:absolute;inset:0;background:radial-gradient(closest-side,var(--glow),transparent 74%);opacity:0;will-change:opacity}
.cards-glow span:last-child{inset:-10%;background:radial-gradient(closest-side,#f5b301,rgba(245,179,1,.35) 45%,transparent 74%)}
.m-cards:not(.is-seq) .cards-glow{display:none}
.m-cards.is-seq .cards-detail{display:block}
.cd-intro{display:none}
.cards-detail[data-state="intro"]>:not(.cd-intro),.cards-detail[data-state="done"]>:not(.cd-intro){display:none}
.cards-detail[data-state="intro"] .cd-intro,.cards-detail[data-state="done"] .cd-intro{display:block}
.cd-intro-title{margin:0 0 12px;font:700 12px 'Hanken Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#c9cace}
.cd-intro-rarity{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.cd-intro-rarity li{display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border:1px solid #ffffff1f;border-radius:999px;background:#ffffff0d}
.cd-intro-rarity b{font:italic 800 20px/1 'Barlow Condensed','Arial Narrow',sans-serif;color:#fff}
.cd-intro-cue{margin:20px 0 0;font-size:15px;color:#c9cace}
.cd-intro-cue span{display:inline-block;margin-right:6px;color:#ff3a50;animation:cd-cue 1.4s ease-in-out infinite}
@keyframes cd-cue{50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.cd-intro-cue span{animation:none}}
.cards-detail.swap-a{animation:cd-in-a .32s ease both}.cards-detail.swap-b{animation:cd-in-b .32s ease both}
@keyframes cd-in-a{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes cd-in-b{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cd-count{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.14em;color:#c9cace}
.cd-count span{color:#fff}
.cd-name{margin:0 0 12px;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-weight:800;font-style:italic;text-transform:uppercase;line-height:.95;letter-spacing:-.01em;color:#fff}
.cards-detail[data-state="done"] .cd-rarity{display:none}
.cd-line{margin:12px 0 0;line-height:1.5;color:#d6d7db}
.m-cards.is-seq .cards-progress{display:none}
.cards-progress button{flex:1;min-width:0;min-height:44px;padding:0;border:0;background:none;display:flex;flex-direction:column;justify-content:center;gap:6px;color:#8d8f96;font:700 11px 'Hanken Grotesk',sans-serif;letter-spacing:.08em;cursor:pointer;transition:color .2s}
.cards-progress button:hover,.cards-progress button[aria-current]{color:#fff}
.cards-progress button:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
.cp-bar{position:relative;display:block;height:4px;border-radius:2px;background:#ffffff26;overflow:hidden}
.cp-bar:after{content:'';position:absolute;inset:0;background:#ef0010;transform-origin:0 50%;transform:scaleX(var(--fill,0))}
/* Bar colour follows the card's rarity: commons red, rares (05, 06) silver like the Rare pill, the secret (07) gold. */
.cards-progress button[data-card-step="4"] .cp-bar:after,.cards-progress button[data-card-step="5"] .cp-bar:after{background:linear-gradient(90deg,#f4f6fa,#a9b0bc 50%,#eef1f6);box-shadow:0 0 8px #dfe6f055}
.cards-progress button:last-child .cp-bar:after{background:#f5b301}
.cards-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:20px 0 0;padding:0;list-style:none;text-align:left}
.cards-list li{display:flex;align-items:center;gap:8px;min-width:0;font-size:13px;line-height:1.35;color:#d6d7db}
.cards-list li>span{font-weight:700;color:#ff5b6d}
.cards-list b{margin-left:auto;padding:2px 8px;border-radius:999px;background:#c9cbd1;color:#1b1b1f;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.cards-list b[data-rarity="rare"]{background:linear-gradient(135deg,#f4f6fa,#a9b0bc 50%,#eef1f6)}
.cards-list b[data-rarity="secret"]{background:linear-gradient(135deg,#ffe49a,#f5b301 45%,#ffd45c)}
@media (prefers-reduced-motion:reduce){.cards-list[hidden]{display:grid}}