/* Shared shop, wallet and collectable unlocks: also loaded inside the full IDE. */
.ts-modal{--ts-font:var(--ui-font,var(--body-font,"Segoe UI",system-ui,sans-serif));box-sizing:border-box;padding:0;width:min(1040px,calc(100% - 28px));max-height:92dvh;overflow:hidden;color:var(--ink,#c8cbd1);background:var(--paper,#191b22);border:1px solid var(--line,#3d4149);border-radius:var(--panel-radius,12px);box-shadow:0 24px 100px #0008;font:13px/1.5 var(--ts-font);margin:auto}
.ts-modal[open]{display:flex;flex-direction:column}.ts-modal *{box-sizing:border-box}.ts-modal::backdrop{background:#080b12bb;backdrop-filter:blur(7px)}
.ts-modal button,.ts-modal select{font:inherit}.ts-modal h2,.ts-modal h3{font-family:var(--heading,"Segoe UI",system-ui,sans-serif);letter-spacing:-.035em;margin:0}.ts-modal h2{font-size:32px;line-height:1.15}.ts-modal h3{font-size:23px}.ts-modal p{margin:0}
.ts-head{display:flex;justify-content:space-between;align-items:center;padding:25px 30px 21px;border-bottom:1px solid var(--line,#3d4149);flex:none;gap:20px}.ts-eyebrow{font:9px/1.6 ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink,#df9384);margin-bottom:6px!important}.ts-close{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line);background:transparent;color:var(--muted);font:24px/1 system-ui!important;cursor:pointer;border-radius:var(--button-radius,5px);flex:none}.ts-close:hover{background:var(--soft);color:var(--ink)}
.ts-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:23px 30px 28px;flex:1 1 auto;scrollbar-color:var(--muted) var(--soft)}.ts-intro{display:flex;gap:24px;align-items:flex-start;justify-content:space-between;margin-bottom:23px}.ts-description{font:12px/1.8 var(--ts-font);color:var(--muted,#999da6);max-width:570px}.ts-motion{font-size:10px;white-space:nowrap;color:var(--muted);display:flex;gap:8px;align-items:center}.ts-motion select{background:var(--white,#22252e);border:1px solid var(--line);border-radius:var(--field-radius,5px);color:var(--ink);padding:7px 9px;font-size:11px}
.ts-designs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.ts-design{min-width:0;position:relative;text-align:left;padding:9px;background:var(--white,#22252e);color:var(--ink);border:1px solid var(--line);border-radius:var(--field-radius,6px);cursor:pointer;transition:border-color .18s,transform .18s}.ts-design:hover{border-color:var(--focus);transform:translateY(-2px)}.ts-design[aria-checked=true]{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}.ts-design-caption{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px;font:12px/1.4 var(--ts-font)}.ts-design-caption strong{font-weight:650}.ts-price{font:10px ui-monospace,monospace;color:var(--accent-ink);white-space:nowrap}.ts-design>small{display:block;font:9px/1.6 var(--ts-font);color:var(--muted);margin-top:5px;min-height:29px}.ts-design.is-locked .ts-price:before{content:'';display:inline-block;width:12px;height:12px;margin-right:3px;background:currentColor;vertical-align:middle;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 6 6 6-6 6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;font-size:10px}
.ts-mini{display:flex;height:84px;overflow:hidden;border:1px solid var(--mini-line);background:var(--mini-bg);color:var(--mini-fg);border-radius:6px}.ts-mini-rail{width:18px;flex:none;background:var(--mini-top);border-right:1px solid var(--mini-line)}.ts-mini-rail:after{content:'';display:block;margin:18px 4px 0;height:3px;background:var(--mini-accent);box-shadow:0 8px 0 var(--mini-line),0 16px 0 var(--mini-line)}.pc-mini-workspace{display:flex;flex-direction:column;flex:1;min-width:0}.pc-mini-tab{font:7px/1.5 var(--mini-font);background:var(--mini-top);border-bottom:1px solid var(--mini-line);padding:3px 7px;text-align:left}.pc-mini-code{display:flex;flex-direction:column;gap:3px;padding:7px;font:6px/1.5 Consolas,monospace;text-align:left;white-space:pre}.pc-mini-code>span:first-child{color:var(--mini-accent)}
.ts-mini[data-preview-theme=hacker],.ts-mini[data-preview-theme=retro],.ts-mini[data-preview-theme=paper]{border-radius:0}.ts-mini[data-preview-theme=hacker] *,.ts-mini[data-preview-theme=retro] *{border-radius:0}.ts-mini[data-preview-theme=hacker] .ts-mini-page strong:before{content:'> '}.ts-mini[data-preview-theme=retro]{box-shadow:inset 1px 1px white,inset -1px -1px #333}.ts-mini[data-preview-theme=retro] .ts-mini-page strong{font:700 11px Tahoma,sans-serif}.ts-mini[data-preview-theme=midnight]{border-radius:12px}.ts-mini[data-preview-theme=midnight] .ts-mini-cards i{border-radius:8px}.ts-mini[data-preview-theme=cyberpunk]{border-radius:0;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}.ts-mini[data-preview-theme=cyberpunk] .ts-mini-action{border-radius:0}.ts-mini[data-preview-theme=paper] .ts-mini-cards i{height:1px;box-shadow:0 5px var(--mini-accent)}
.ts-detail{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}.ts-detail>.ts-description{margin-top:7px}.ts-variants{display:flex;flex-wrap:wrap;gap:9px;margin-top:17px}.ts-variant{display:flex;align-items:center;gap:9px;text-align:left;min-width:130px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--button-radius,5px);color:var(--ink);background:var(--white);cursor:pointer}.ts-variant[aria-checked=true]{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}.ts-variant strong,.ts-variant small{display:block;font-size:10px}.ts-variant small{margin-top:3px;color:var(--muted);font-size:9px}.ts-swatch{width:25px;height:25px;flex:none;border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);border-radius:var(--field-radius,5px)}
.ts-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 30px;border-top:1px solid var(--line);background:var(--paper);flex:none;margin:0}.ts-button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:10px 17px;border:1px solid var(--line);border-radius:var(--button-radius,5px);color:var(--ink);background:var(--white);font:600 12px/1.4 var(--ts-font);cursor:pointer;transition:transform .18s,filter .18s}.ts-button:hover{transform:translateY(-1px)}.ts-button:active{transform:translateY(1px)}.ts-button.ts-primary{background:var(--primary-bg,#df9384);color:var(--primary-fg,#202018);border-color:var(--primary-bg,#df9384)}.ts-button:disabled{cursor:default;opacity:.58;transform:none}.ts-balance{border:0;background:transparent;color:var(--accent-ink);font:12px ui-monospace,monospace;cursor:pointer;text-align:left}.ts-error{color:var(--danger,#ff9ca9);font-size:12px;line-height:1.7;margin-top:15px!important}.ts-error:empty{display:none}
.ts-wallet-trigger{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 11px;min-height:35px;border:1px solid var(--line,#3d4149);border-radius:var(--button-radius,5px);background:var(--soft,#252932);color:var(--accent-ink,#df9384);font:11px ui-monospace,monospace;white-space:nowrap;cursor:pointer;flex:none}.ts-wallet-trigger:hover{border-color:var(--focus)}.ts-modal button:focus-visible,.ts-modal select:focus-visible,.ts-wallet-trigger:focus-visible{outline:2px solid var(--focus,#df9384);outline-offset:3px}
.ts-wallet{width:min(680px,calc(100% - 28px))}.ts-wallet-hero{padding:12px 0 18px;display:grid;grid-template-columns:auto 1fr;gap:0 13px;align-items:center}.ts-wallet-hero>.ts-currency{font:27px ui-monospace,monospace;color:var(--accent-ink)}.ts-wallet-hero>strong{font:600 54px/1.1 var(--heading,system-ui);letter-spacing:-2px}.ts-wallet-hero>.ts-description{grid-column:1/3;margin-top:10px}.ts-wallet-actions{margin:0 0 30px}.ts-section-title{font-size:21px!important;margin:25px 0 14px!important}.ts-earn-row{display:flex;align-items:flex-start;gap:17px;border-top:1px solid var(--line);padding:17px 0}.ts-reward{font:600 13px ui-monospace,monospace;color:var(--accent-ink);min-width:66px;padding-top:3px}.ts-earn-row strong{font-size:12px}.ts-earn-row .ts-description{font-size:11px;margin-top:4px}.ts-history-row{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 0;border-top:1px solid var(--line);font-size:11px}.ts-history-row strong{font:11px ui-monospace,monospace;white-space:nowrap}.ts-credit{color:var(--accent-ink)}.ts-footnote{font:10px/1.8 var(--ts-font);color:var(--muted);margin-top:28px!important}
.ts-unlock{width:min(560px,calc(100% - 28px));overflow-y:auto}.ts-unlock .ts-head{padding:18px 22px}.ts-unlock .ts-head h2{font-size:18px}.ts-unlock .ts-head .ts-eyebrow{display:none}.ts-unlock-body{position:relative;text-align:center;isolation:isolate;padding:37px 30px 34px;overflow:hidden}.ts-unlock-ticket{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:170px;height:190px;margin:8px auto 32px;border:1px solid var(--unlock-accent);border-radius:var(--card-radius,12px);background:linear-gradient(145deg,color-mix(in srgb,var(--unlock-accent) 20%,var(--paper)),var(--paper));box-shadow:8px 10px 0 color-mix(in srgb,var(--unlock-accent) 16%,var(--paper)),0 20px 45px #0003;transform:rotate(-7deg);animation:ts-unlock-arrive .7s cubic-bezier(.18,.9,.25,1.2) both}.ts-unlock-glyph{font:600 56px ui-monospace,monospace;color:var(--unlock-accent);letter-spacing:-6px;margin-bottom:16px}.ts-unlock-ticket>small{font:8px ui-monospace,monospace;letter-spacing:1.3px;color:var(--accent-ink)}.ts-unlock-body>h2{font-size:45px;margin:8px 0 10px}.ts-unlock-body>.ts-description{margin-inline:auto}.ts-unlock-receipt{font:10px/1.6 ui-monospace,monospace;color:var(--muted);margin:19px 0 24px!important}.ts-unlock-burst{position:absolute;z-index:-1;top:135px;left:50%;width:1px;height:1px}.ts-unlock-burst i{position:absolute;width:6px;height:17px;left:-3px;top:-8px;background:var(--unlock-accent);transform:rotate(calc(var(--ray)*30deg)) translateY(-130px);opacity:.15;animation:ts-unlock-ray .85s .12s ease-out both}.ts-unlock[data-unlock-theme=cyberpunk] .ts-unlock-ticket{clip-path:polygon(0 0,calc(100% - 23px) 0,100% 23px,100% 100%,23px 100%,0 calc(100% - 23px));border-radius:0}.ts-unlock[data-unlock-theme=hacker] .ts-unlock-ticket{border-radius:0;background:var(--paper);box-shadow:7px 8px 0 var(--soft)}
@keyframes ts-unlock-arrive{from{opacity:0;transform:translateY(30px) rotate(3deg) scale(.83)}to{opacity:1;transform:translateY(0) rotate(-7deg) scale(1)}}@keyframes ts-unlock-ray{from{opacity:0;transform:rotate(calc(var(--ray)*30deg)) translateY(-75px) scale(.3)}35%{opacity:.6}to{opacity:.15;transform:rotate(calc(var(--ray)*30deg)) translateY(-130px) scale(1)}}
html[data-theme=retro] *,html[data-theme=retro] *:before,html[data-theme=retro] *:after{border-radius:0!important}html[data-theme=retro] .ts-modal{background:#c0c0c0;border:0;padding:4px;box-shadow:var(--bevel-out)}html[data-theme=retro] .ts-head{background:var(--lime);color:var(--on-accent);padding:8px 10px;border:0}html[data-theme=retro] .ts-head .ts-eyebrow{color:inherit}html[data-theme=retro] .ts-close{color:#111;background:#c0c0c0;box-shadow:var(--bevel-out);border:0}html[data-theme=retro] .ts-button,html[data-theme=retro] .ts-wallet-trigger,html[data-theme=retro] .ts-design,html[data-theme=retro] .ts-variant{box-shadow:var(--bevel-out);border:0}html[data-theme=retro] .ts-button:active,html[data-theme=retro] .ts-design[aria-checked=true],html[data-theme=retro] .ts-variant[aria-checked=true]{box-shadow:var(--bevel-in)}html[data-theme=retro] .ts-mini{box-shadow:var(--bevel-in)}
html[data-theme=hacker][data-theme-variant=matrix]{--heading:"Cascadia Mono","Courier New",monospace}html[data-theme=hacker][data-theme-variant=matrix] .scene-code{color:var(--lime)}html[data-theme=hacker][data-theme-variant=matrix] .hero h1{font-size:clamp(38px,4.2vw,64px);letter-spacing:-3px}html[data-theme=hacker][data-theme-variant=matrix] .scene-window{border-color:var(--line)}
@media(max-width:800px){.ts-designs{grid-template-columns:repeat(2,minmax(0,1fr))}.ts-mini{height:94px}.ts-intro{flex-direction:column;gap:13px}.ts-variants{display:grid;grid-template-columns:1fr 1fr}.ts-variant{min-width:0}.ts-head{padding:22px}.ts-body{padding:20px 22px 25px}.ts-footer{padding:15px 22px}.ts-variant strong{font-size:10px}.ts-mini-page strong{font-size:17px}}
@media(max-width:500px){.ts-wallet-trigger{width:32px;padding:6px;min-height:32px}.ts-wallet-balance{display:none}.ts-wallet-trigger>.ts-currency{font-size:10px}.ts-head{padding:19px}.ts-modal h2{font-size:27px}.ts-body{padding:18px}.ts-designs{gap:10px}.ts-design{padding:8px}.ts-mini{height:76px}.ts-mini-editor{display:none}.ts-mini-page strong{font-size:14px}.ts-design-caption{font-size:11px}.ts-design>small{font-size:8px;min-height:38px}.ts-price{font-size:9px}.ts-footer{gap:8px;padding:13px 18px}.ts-footer>.ts-button{font-size:10px;max-width:65%;padding:10px}.ts-balance{font-size:10px;max-width:35%;line-height:1.8}.ts-unlock-body{padding:28px 20px}.ts-unlock-body>h2{font-size:37px}.ts-wallet-hero>strong{font-size:43px}.ts-earn-row{gap:9px}.ts-reward{min-width:57px;font-size:11px}html[data-theme=hacker][data-theme-variant=matrix] .hero h1{font-size:clamp(29px,8.9vw,42px);letter-spacing:-2px}}
@media(max-width:1100px){.ts-wallet-trigger{width:32px;min-height:32px;padding:6px}.ts-wallet-balance{display:none}.ts-wallet-trigger>.ts-currency{font-size:10px}}
html[data-motion=reduced] .ts-modal *,body.studio-reduce-motion .ts-modal *{animation:none!important;transition:none!important}html[data-motion=reduced] .ts-design:hover,html[data-motion=reduced] .ts-button:hover{transform:none}
html[data-theme=retro] .ts-design:hover,html[data-theme=retro] .ts-button:hover{transform:none}html[data-theme=retro] .ts-modal::backdrop{backdrop-filter:none}html[data-theme=cyberpunk] .ts-primary{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));text-transform:uppercase}
.ts-loading-rows{display:grid;gap:14px;padding:25px 0}.ts-loading-rows>span{height:36px;border-radius:var(--field-radius,6px);background:linear-gradient(100deg,var(--soft),var(--white),var(--soft));background-size:200% 100%;animation:ts-loading 1.4s ease-in-out infinite}.ts-loading-rows>span:nth-child(2){width:90%}.ts-loading-rows>span:nth-child(4){width:75%}@keyframes ts-loading{to{background-position:-200% 0}}html[data-motion="reduced"] .ts-loading-rows>span{animation:none}
