/* crowns.css — the looks players buy with crowns (on every player page), and the windows your own player page opens:
   your quests, the shop and customize. Loaded by looks.js on player pages.
   Layout approved 2026-10-16 (yoggin-site docs/mockups/deadlock-shop + deadlock-profile-top). */
:root{--r-common:#a89c91;--r-uncommon:#7fc6ff;--r-rare:#f2c14e;--r-epic:#c58cff;--r-legendary:#ff7a45}
.r-common{--rc:var(--r-common)}.r-uncommon{--rc:var(--r-uncommon)}.r-rare{--rc:var(--r-rare)}.r-epic{--rc:var(--r-epic)}.r-legendary{--rc:var(--r-legendary)}

/* ── the looks ─────────────────────────────────────────────────────────────────────────── */
/* name size follows the card (40 on a player page, smaller on a phone and on the try-on card) */
.idcard{--nmz:40px}
@media (max-width:900px){.idcard{--nmz:28px}}
/* name font */
.idcard h1.nf-chalk{font-family:"Caveat Brush",var(--hand),cursive;font-weight:400;text-transform:none;font-size:calc(var(--nmz) * 1.1)}
.idcard h1.nf-ticker{font-family:"Teko",var(--display),sans-serif;font-weight:500;font-size:calc(var(--nmz) * 1.15);letter-spacing:.02em}
.idcard h1.nf-saloon{font-family:"Rye",serif;font-weight:400;text-transform:none;font-size:calc(var(--nmz) * .78)}
.idcard h1.nf-marquee{font-family:"Limelight",var(--display);font-weight:400;text-transform:none;font-size:calc(var(--nmz) * .9)}
.idcard h1.nf-wide{font-family:"Archivo",var(--display),sans-serif;font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:calc(var(--nmz) * .72)}
/* name colour (--ncs: the colour a stencil outline takes) */
.idcard h1.nc-lane{color:var(--accent);--ncs:var(--accent)}
.idcard h1.nc-gold{background:linear-gradient(180deg,#f7e2a1,#b8862f);-webkit-background-clip:text;background-clip:text;color:transparent;--ncs:#e8c46a}
.idcard h1.nc-market{background:linear-gradient(90deg,#9b6bff,#e0a45e);-webkit-background-clip:text;background-clip:text;color:transparent;--ncs:#c58cff}
/* name effect (after the colours, so it wins where they meet) */
.idcard h1.ne-brush{display:inline-block;max-width:100%;vertical-align:middle;background:var(--accent);-webkit-background-clip:border-box;background-clip:border-box;color:var(--accent-ink);padding:3px 12px 1px;transform:rotate(-1.5deg);
  clip-path:polygon(0 14%,3% 4%,22% 9%,41% 1%,63% 7%,84% 0,100% 6%,98% 48%,100% 90%,79% 97%,57% 92%,34% 100%,13% 94%,1% 100%,2% 56%)}
.idcard h1.ne-glow{filter:drop-shadow(0 0 7px var(--accent)) drop-shadow(0 0 1px var(--accent))}
.idcard h1.ne-stencil{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:transparent;-webkit-text-stroke:1.3px var(--ncs,var(--fg));letter-spacing:.06em}
/* avatar frame */
.idcard .av-wrap.ar-plain{box-shadow:0 0 0 3px #a89c91}
.idcard .av-wrap.ar-tape{box-shadow:0 0 0 3px #e2ddd6;outline:2px dashed #e2ddd6;outline-offset:5px}
.idcard .av-wrap.ar-gilt{box-shadow:0 0 0 3px #e8c46a,0 0 18px rgba(232,196,106,.45)}
.idcard .av-wrap.ar-soul{box-shadow:0 0 0 3px var(--accent),0 0 24px color-mix(in srgb,var(--accent) 60%,transparent)}
/* banner, behind the card */
.idcard[data-bn=bn-lane]:before{background:repeating-linear-gradient(115deg,color-mix(in srgb,var(--accent) 12%,transparent) 0 14px,transparent 14px 34px),linear-gradient(180deg,#0f1714,#0b0d0c)}
.idcard[data-bn=bn-smoke]:before{background:radial-gradient(60% 70% at 20% 30%,rgba(200,200,210,.18),transparent 70%),radial-gradient(50% 60% at 70% 60%,rgba(160,170,180,.16),transparent 70%),linear-gradient(180deg,#1b1d22,#0c0d10)}
.idcard[data-bn=bn-market]:before{background:radial-gradient(120% 90% at 85% 10%,rgba(232,164,94,.45),transparent 55%),radial-gradient(90% 80% at 10% 0%,rgba(140,90,200,.45),transparent 60%),linear-gradient(180deg,#1a1322,#0d0b10)}
.idcard[data-bn=bn-ember]:before{background:radial-gradient(80% 120% at 100% 100%,rgba(224,120,40,.55),transparent 60%),#140d0a}
/* ── the big batch (2026-10-22). Fonts are one Google face each (looks.js fonts() loads them) ── */
.idcard h1.nf-marker{font-family:"Permanent Marker",var(--hand),cursive;font-weight:400;font-size:calc(var(--nmz) * .86)}
.idcard h1.nf-signal{font-family:"Bungee",var(--display),sans-serif;font-weight:400;font-size:calc(var(--nmz) * .7)}
.idcard h1.nf-case{font-family:"Special Elite",monospace;font-weight:400;font-size:calc(var(--nmz) * .78)}
.idcard h1.nf-deco{font-family:"Poiret One",var(--display),sans-serif;font-weight:400;font-size:calc(var(--nmz) * .92);letter-spacing:.05em}
.idcard h1.nf-ritual{font-family:"Pirata One",serif;font-weight:400;text-transform:none;font-size:calc(var(--nmz) * 1.02)}
.idcard h1.nf-patron{font-family:"Cinzel Decorative",serif;font-weight:900;font-size:calc(var(--nmz) * .7)}
.idcard h1.nf-glitch{font-family:"Rubik Glitch",var(--display),sans-serif;font-weight:400;font-size:calc(var(--nmz) * .8)}
.idcard h1.nf-neon{font-family:"Monoton",var(--display),sans-serif;font-weight:400;font-size:calc(var(--nmz) * .68);letter-spacing:.02em}
.idcard h1.nc-crimson{color:#ff5a5f;--ncs:#ff5a5f}
.idcard h1.nc-violet{color:#b28cff;--ncs:#b28cff}
.idcard h1.nc-rose{color:#ff8fc7;--ncs:#ff8fc7}
.idcard h1.nc-sky{color:#7fc6ff;--ncs:#7fc6ff}
.idcard h1.nc-sunset,.idcard h1.nc-toxic,.idcard h1.nc-frost,.idcard h1.nc-spirit,.idcard h1.nc-inferno,.idcard h1.nc-chrome,.idcard h1.nc-prism{-webkit-background-clip:text;background-clip:text;color:transparent}
.idcard h1.nc-sunset{background-image:linear-gradient(90deg,#ff7a59,#ffd36e);--ncs:#ffa463}
.idcard h1.nc-toxic{background-image:linear-gradient(180deg,#e2ff7a,#3fd57f);--ncs:#9be15d}
.idcard h1.nc-frost{background-image:linear-gradient(180deg,#ffffff,#7cc8f0);--ncs:#a9dcf7}
.idcard h1.nc-spirit{background-image:linear-gradient(90deg,#7fc6ff,#c58cff);--ncs:#a8a6ff}
.idcard h1.nc-inferno{background-image:linear-gradient(180deg,#ffe08a,#ff7a3d 55%,#c8282e);--ncs:#ff7a3d}
.idcard h1.nc-chrome{background-image:linear-gradient(180deg,#ffffff,#c9d1dc 46%,#5d6877 50%,#e6ebf1 76%,#9aa4b2);--ncs:#c9d1dc}
.idcard h1.nc-prism{background-image:linear-gradient(90deg,#ff5a5f,#ffd36e,#3fd57f,#7fc6ff,#c58cff,#ff5a5f);background-size:200% 100%;animation:lk-slide 6s linear infinite;--ncs:#c58cff}
.idcard h1.ne-slant{transform:skewX(-10deg);transform-origin:0 100%}
.idcard h1.ne-under{display:inline-block;max-width:100%;vertical-align:middle;border-bottom:4px solid var(--accent);padding-bottom:3px}
.idcard h1.ne-offset{filter:drop-shadow(3px 3px 0 var(--accent))}
.idcard h1.ne-static{filter:drop-shadow(2px 0 0 rgba(255,90,95,.9)) drop-shadow(-2px 0 0 rgba(127,198,255,.9))}
.idcard h1.ne-flicker{animation:lk-flicker 5s steps(1,end) infinite;filter:drop-shadow(0 0 6px var(--accent))}
.idcard h1.ne-siphon{animation:lk-siphon 2.4s ease-in-out infinite}
.idcard h1.ne-sheen{-webkit-mask-image:linear-gradient(100deg,#000 38%,rgba(0,0,0,.3) 50%,#000 62%);mask-image:linear-gradient(100deg,#000 38%,rgba(0,0,0,.3) 50%,#000 62%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;animation:lk-sheen 3.4s linear infinite;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 70%,transparent))}
.idcard .av-wrap.ar-crimson{box-shadow:0 0 0 3px #ff5a5f}
.idcard .av-wrap.ar-double{box-shadow:0 0 0 2px var(--accent),0 0 0 5px #141218,0 0 0 7px var(--accent)}
.idcard .av-wrap.ar-toxic{box-shadow:0 0 0 3px #9be15d,0 0 20px rgba(155,225,93,.5)}
.idcard .av-wrap.ar-halo{box-shadow:0 0 0 2px #f1efe8,0 0 30px 6px rgba(241,239,232,.38)}
/* rings drawn on a masked layer, so they can carry a gradient (and Orbit's turns) */
.idcard .av-wrap.ar-spirit:before,.idcard .av-wrap.ar-orbit:before{content:"";position:absolute;z-index:1;inset:-4px;padding:4px;pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.idcard .av-wrap.ar-spirit{box-shadow:0 0 22px rgba(160,150,255,.45)}
.idcard .av-wrap.ar-spirit:before{background:linear-gradient(135deg,#7fc6ff,#c58cff)}
@property --lk-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.idcard .av-wrap.ar-orbit:before{background:conic-gradient(from var(--lk-a),var(--accent),transparent 30%,transparent 50%,var(--accent) 80%,#fff 90%,var(--accent));animation:lk-orbit 3s linear infinite}
.idcard .av-wrap.ar-crown{box-shadow:0 0 0 3px #e8c46a,0 0 22px rgba(232,196,106,.5)}
.idcard .av-wrap.ar-crown:before{content:"";position:absolute;z-index:1;left:26%;width:48%;top:-30%;height:30%;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpolygon fill='%23e8c46a' stroke='%23141218' stroke-width='1' stroke-linejoin='round' points='1.5,15 2.5,6 6.5,9.5 12,1.5 17.5,9.5 21.5,6 22.5,15'/%3E%3C/svg%3E") center bottom/contain no-repeat;
  filter:drop-shadow(0 0 4px rgba(232,196,106,.6))}
.idcard[data-bn=bn-frost]:before{background:radial-gradient(80% 130% at 0% 0%,rgba(160,215,255,.36),transparent 60%),linear-gradient(180deg,#121a22,#0b0f14)}
.idcard[data-bn=bn-rain]:before{background:repeating-linear-gradient(100deg,rgba(170,190,210,.11) 0 1px,transparent 1px 9px),linear-gradient(180deg,#151a20,#0c0e12)}
.idcard[data-bn=bn-toxic]:before{background:radial-gradient(70% 110% at 85% 100%,rgba(150,230,80,.38),transparent 60%),radial-gradient(40% 60% at 20% 20%,rgba(80,200,120,.18),transparent 70%),#0d130c}
.idcard[data-bn=bn-deco]:before{background:repeating-conic-gradient(from -90deg at 50% 130%,rgba(232,196,106,.09) 0 3deg,transparent 3deg 9deg),linear-gradient(180deg,#17140f,#0d0c0a)}
.idcard[data-bn=bn-spirit]:before{background:radial-gradient(90% 120% at 100% 0%,rgba(197,140,255,.42),transparent 60%),radial-gradient(70% 90% at 0% 100%,rgba(127,198,255,.32),transparent 60%),#100f1c}
.idcard[data-bn=bn-moon]:before{background:radial-gradient(circle at 84% 45%,#d8473f 0 12%,rgba(216,71,63,.3) 13.5%,transparent 38%),linear-gradient(180deg,#1a0c0e,#0b0708)}
.idcard[data-bn=bn-aurora]:before{background-color:#0b1014;background-image:linear-gradient(115deg,transparent 10%,rgba(63,213,127,.34) 30%,rgba(127,198,255,.34) 50%,rgba(197,140,255,.34) 70%,transparent 90%);
  background-size:300% 100%;animation:lk-slide 9s ease-in-out infinite alternate}
@keyframes lk-slide{from{background-position:0% 0}to{background-position:100% 0}}
@keyframes lk-sheen{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0% 0;mask-position:0% 0}}
@keyframes lk-orbit{to{--lk-a:360deg}}
@keyframes lk-siphon{0%,100%{filter:drop-shadow(0 0 2px rgba(255,90,95,.5))}50%{filter:drop-shadow(0 0 11px rgba(255,90,95,.95)) drop-shadow(0 0 2px #ff5a5f)}}
@keyframes lk-flicker{0%,100%{opacity:1}8%{opacity:.55}9%{opacity:1}52%{opacity:.7}53%{opacity:1}54%{opacity:.45}56%{opacity:1}}
@media (prefers-reduced-motion:reduce){.idcard h1,.idcard .av-wrap:before,.idcard:before{animation:none !important}}
/* stat highlights: two tiles on the card */
.lk-sh{display:flex;gap:8px;margin-left:auto;align-self:center;flex:none}
.lk-sh:empty{display:none}
.lk-t{min-width:88px;padding:8px 12px;background:rgba(0,0,0,.38);border:1px solid var(--line2);text-align:left}
.lk-t b{display:block;font-family:var(--display);font-weight:800;font-size:22px;line-height:1;color:var(--fg);white-space:nowrap}
.lk-t span{display:block;margin-top:4px;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
@media (max-width:900px){.idcard{flex-wrap:wrap}.lk-sh{margin-left:0;width:100%}.lk-t{flex:1;min-width:0}.lk-t b,.lk-t span{white-space:normal;overflow-wrap:anywhere}}
/* on a player page they sit in a row under the name, and the card grows to hold them */
.idcard.lk-tall{height:auto;min-height:142px}
.idcard .who .lk-sh{margin:10px 0 0;align-self:auto;flex-wrap:wrap;width:auto}
.idcard .who .lk-t{flex:none;min-width:0;max-width:100%;padding:5px 10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 7px}
.idcard .who .lk-t b{font-size:18px}
.idcard .who .lk-t span{margin-top:0}
/* name + linked accounts on one line */
.lk-nm{display:flex;align-items:center;gap:10px;min-width:0}
.lk-nm h1{min-width:0}
.lk-links{display:flex;align-items:center;gap:2px;flex:none}
.lk-links a{position:relative;width:30px;height:30px;display:grid;place-items:center;color:var(--dim);border-radius:6px}
.lk-links a:hover,.lk-links a:focus-visible{color:var(--fg);background:rgba(255,255,255,.08)}
.lk-links svg{width:18px;height:18px;fill:currentColor}
/* the buttons' data-tip labels show in the one tooltip (assets/tip.js) */

/* ── your page: crowns, shop, customize (top left of the header) ─────────────────────────── */
.lk-tools{position:absolute;left:28px;top:12px;z-index:3;display:flex;align-items:center;gap:4px}
.lk-tools a,.lk-tools button{position:relative;display:flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:7px;background:none;border:0;color:var(--fg)}
.lk-tools a:hover,.lk-tools button:hover,.lk-tools button[aria-expanded=true]{background:rgba(255,255,255,.08)}
.lk-tools svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lk-tools .cr svg{fill:var(--green);stroke:none}
.lk-tools .cr b{display:none;font-family:var(--display);font-weight:800;font-size:20px;color:var(--fg)}   /* his 10-28: the crown alone, no balance */
.lk-tools .cr.out b{display:inline}   /* signed out it still says Sign in */
@media (max-width:900px){.lk-tools{position:static;margin:12px 16px -4px}}

/* the windows your page opens (quests, shop, customize), over a dimmed page; full screen on a phone */
html.lk-lock{overflow:hidden}
.lk-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px}
.lk-modal[hidden]{display:none}
.lk-scrim{position:absolute;inset:0;background:rgba(4,3,6,.74);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.lk-win{position:relative;width:100%;max-width:1180px;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--panel-line);border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
.lk-m-quests .lk-win{max-width:640px}
.lk-body{overflow:auto;overscroll-behavior:contain;min-height:0}
.lk-x{position:absolute;right:10px;top:10px;z-index:5;width:38px;height:38px;display:grid;place-items:center;border-radius:8px;background:none;border:0;color:var(--dim)}
.lk-x:hover,.lk-x:focus-visible{background:rgba(255,255,255,.08);color:var(--fg)}
.lk-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.lk-hd{display:flex;align-items:center;gap:14px;padding:16px 64px 14px 22px;border-bottom:1px solid var(--line)}
.lk-hd h2{margin:0;font-family:"Archivo",var(--display),sans-serif;font-stretch:125%;font-weight:900;font-size:20px;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.lk-bal{margin-left:auto;display:flex;align-items:center;gap:6px;font-family:var(--display);font-weight:800;font-size:22px;color:var(--green)}
.lk-qs{padding:16px 22px 20px}
.lk-qs .cr-app{margin:14px 0 0}
.lk-sync{margin:0 0 12px;font-size:13px;color:var(--green)}
.lk-lnk{background:none;border:0;padding:0;font:inherit;color:var(--green);cursor:pointer}
.lk-lnk:hover{text-decoration:underline}
.lk-win .sp-head{padding-right:64px}
/* the shop header stays one row (the serif is wider: the deals clock fell to a line of its own); the sentence wraps inside
   its own space instead, every word kept */
@media (min-width:761px){.lk-win .sp-head{flex-wrap:nowrap}}
/* the tab bar stays at the top of the window, the card just under it (ask 203; looks.js barFreeze sets --sp-bar-h) */
.lk-win .sp-bar{position:sticky;top:0;z-index:5;background:var(--panel)}
.lk-win .sp-me{top:var(--sp-bar-h,0px)}
/* a phone: the tabs are one row you swipe, so the frozen bar stays one row tall (three stacked rows froze 60% of the screen) */
@media (max-width:760px){.lk-win .sp-tabs{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:max-content;overflow-x:auto;scrollbar-width:none}.lk-win .sp-tabs::-webkit-scrollbar{display:none}.lk-win .sp-tabs button{white-space:nowrap;padding:12px 14px}}
@media (max-width:760px){.lk-modal{padding:0;place-items:stretch}.lk-win{max-width:none!important;max-height:none;height:100%;border:0;border-radius:0}
  .lk-win .sp-head{gap:10px 16px;padding:14px 56px 12px 16px}.lk-win .sp-head h2{flex:1 1 100%}.lk-win .sp-head p,.lk-win .sp-head .sp-sp{display:none}}

/* customize: the shop's layout, only what you own; Save stays in reach at the foot of the window */
.lk-m-customize .lk-win{max-width:1180px;height:min(780px,calc(100vh - 48px));height:min(780px,calc(100dvh - 48px))}
.lk-m-customize .lk-body{flex:1;display:flex;flex-direction:column}
.cz{flex:1;display:flex;flex-direction:column}.cz .sp-body{flex:1}
@media (max-width:760px){.lk-m-customize .lk-win{height:100%}}
/* the shop keeps one size on every tab (ask 103, 2026-10-21: it grew and shrank and re-centred as you switched);
   a short tab leaves room at the foot, a long one scrolls inside */
.lk-m-shop .lk-win{height:min(780px,calc(100vh - 48px));height:min(780px,calc(100dvh - 48px))}
.lk-m-shop .lk-body{flex:1}
@media (max-width:760px){.lk-m-shop .lk-win{height:100%}}
.cz-links{display:flex;flex-direction:column;gap:12px;max-width:560px}
.cz-link{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:10px}
.cz-link span{font-size:13px;color:var(--dim)}
.cz-link input{min-width:0;background:var(--panel2);border:1px solid var(--line2);border-radius:7px;padding:9px 11px;color:var(--fg);font:500 14px var(--body)}
.cz-link input:focus{outline:none;border-color:var(--green)}
.cz-link input.bad{border-color:var(--red)}
.sp-more{--rc:var(--green);border-style:dashed}
.sp-more .sp-art svg{width:40px;height:40px;fill:none;stroke:var(--green);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cz-act{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--line);background:var(--panel);flex-wrap:wrap}
.cz-act .gap{flex:1}
.cz-act button{background:none;border:1px solid var(--line2);border-radius:7px;padding:8px 14px;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.cz-act .save{border-color:var(--green);color:var(--green)}
.cz-msg{font-size:13px;color:var(--dim)}.cz-msg.err{color:var(--red)}
@media (max-width:820px){.cz-link{grid-template-columns:minmax(0,1fr)}.cz-act{padding:10px 14px}}

/* ── the shop on /crowns ───────────────────────────────────────────────────────────────── */
.sp{padding:0;scroll-margin-top:16px}
@media (max-width:900px){.sp{scroll-margin-top:calc(64px + env(safe-area-inset-top,0px))}}
.sp-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.sp-head h2{margin:0;font-family:"Archivo",var(--display),sans-serif;font-stretch:125%;font-weight:900;font-size:20px;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.sp-head h2 em{font-style:normal;color:var(--green)}
.sp-head p{margin:0;color:var(--dim);font-size:13px}
.sp-head .sp-sp{flex:1}
.sp-bal,.sp-reset{display:flex;align-items:baseline;gap:7px;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.sp-bal b,.sp-reset b{font-size:22px;letter-spacing:.02em;color:var(--green)}
.sp-bal svg{width:18px;height:18px;fill:var(--green);align-self:center}
.sp-reset{padding-left:18px;border-left:1px solid var(--line2)}
.sp-bal[hidden]+.sp-reset{padding-left:0;border-left:0}
.sp-tabs,.sp-subs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-bottom:1px solid var(--line)}
.sp-tabs button,.sp-subs button{background:none;border:0;border-right:1px solid var(--line);padding:13px 8px;font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.sp-tabs button:last-child,.sp-subs button:last-child{border-right:0}
.sp-tabs button span,.sp-subs button span{color:var(--mute);margin-left:6px;font-size:12px}
.sp-tabs button[aria-selected=true]{background:var(--panel2);color:var(--green)}
.sp-subs{background:rgba(0,0,0,.25)}
.sp-subs button{font-family:var(--body);font-weight:600;font-size:13.5px;letter-spacing:0;text-transform:none;padding:10px 8px;color:var(--dim)}
.sp-subs button[aria-selected=true]{color:var(--green);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.sp-subs:empty{display:none}
.sp-body{display:grid;grid-template-columns:380px minmax(0,1fr);align-items:start}
.sp-me{border-right:1px solid var(--line);padding:18px 20px;position:sticky;top:16px}
.sp h3{margin:0 0 14px;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.1em;text-transform:uppercase}
.sp-list h3 small{font-family:var(--body);font-weight:500;font-size:13px;letter-spacing:0;text-transform:none;color:var(--dim);margin-left:10px}
/* the try-on card: the same id card as a player page, in the flow */
.sp-card{position:relative;padding:14px 8px 6px}
.sp-card .idcard{position:relative;left:auto;top:auto;width:auto;height:auto;min-height:112px;--nmz:30px;padding:14px 16px 14px 14px;flex-wrap:wrap;gap:12px}
.sp-card .idcard .av-wrap,.sp-card .idcard .av{width:72px;height:72px}
.sp-card .idcard .who{flex:1}
.sp-card .idcard h1{font-size:30px;white-space:nowrap;line-height:1.05}   /* one line, shrunk to fit (looks.js fitName) */
.sp-me .cr-mock{height:auto}
.sp-card .lk-sh{margin-left:0;width:100%}.sp-card .lk-t{flex:1;min-width:0}
/* a long value ("Lady Geist 64%") wraps inside its own tile, never into the one beside it (ask 202) */
.sp-card .lk-t b,.sp-card .lk-t span{white-space:normal;overflow-wrap:anywhere}
.sp-card .lk-nm{flex-wrap:wrap;row-gap:2px}.sp-card .lk-nm h1{flex:1 1 100%}.sp-card .lk-links{margin-left:-6px}.sp-card .lk-links:empty{display:none}
.sp-card .lk-t.empty{border-style:dashed;display:grid;place-items:center;min-height:52px;font-size:12px;color:var(--mute)}
.sp-try{margin-top:12px;padding:12px 14px;background:var(--panel2);border-radius:8px;font-size:13.5px;color:var(--dim);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sp-try[hidden]{display:none}
.sp-try b{color:var(--fg);font-weight:600}
.sp-try p{margin:0;flex:1;min-width:150px}
.sp-try .btn{padding:9px 14px;font-size:13.5px;white-space:nowrap}
.sp-try .btn[disabled]{background:none;color:var(--mute);border:1px solid var(--line2);cursor:default}
.sp-wear{margin-top:16px}
.sp-wear h4{margin:0 0 6px;font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.sp-wear div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--dim)}
.sp-wear div b{color:var(--fg);font-weight:500;text-align:right}
.sp-list{padding:18px 20px;min-width:0}
.sp-lh{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.sp-lh h3{margin:0}
/* full theme (ask 148): one switch beside the App theme title */
.cz-ft{margin-left:auto;display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);cursor:pointer}.cz-ft[hidden]{display:none}
.cz-ft .sw{width:38px;height:22px;border-radius:11px;background:rgba(255,255,255,.12);position:relative;transition:background .15s}
.cz-ft .sw i{position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#F1EFE8;transition:left .15s,background .15s}
.cz-ft[aria-checked=true]{color:var(--fg)}.cz-ft[aria-checked=true] .sw{background:var(--accent)}.cz-ft[aria-checked=true] .sw i{left:19px;background:var(--accent-ink)}
.sp-filters{display:flex;margin-left:auto;border:1px solid var(--line2);border-radius:7px;overflow:hidden}
.sp-filters button{background:none;border:0;border-right:1px solid var(--line2);padding:6px 11px;font-size:12.5px;color:var(--rc,var(--fg));text-transform:capitalize}
.sp-filters button:last-child{border-right:0}
.sp-filters button[aria-pressed=true]{background:rgba(255,255,255,.09)}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.sp-it{background:#121016;border:1px solid var(--line);border-radius:8px;overflow:hidden;text-align:left;padding:0;display:flex;flex-direction:column;align-items:stretch;color:var(--fg);transition:border-color .12s,transform .12s}
.sp-it:hover{border-color:var(--line2);transform:translateY(-2px)}
.sp-it[aria-pressed=true]{border-color:var(--green)}
.sp-art{height:120px;display:grid;place-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
/* an extra (ask 254): what it adds, big, in the tile's rarity color */
.xt-art{position:relative;display:grid;justify-items:center;gap:4px;line-height:1}
.xt-art b{font-family:var(--wide);font-stretch:125%;font-size:44px;font-weight:900;color:var(--rc,var(--fg))}
.xt-art small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim,var(--fg))}
.sp-art:before{content:"";position:absolute;inset:0;opacity:.17;background:radial-gradient(circle,var(--rc),transparent 70%)}
.sp-art>*{position:relative}
.sp-meta{padding:11px 13px}
.sp-meta .t{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--rc)}
.sp-meta .k{font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:2px}
.sp-meta .k i{font-style:normal;margin-left:6px;color:var(--rc)}
.sp-meta .k em{font-style:normal;margin-left:6px;color:var(--mute)}
.sp-pr{display:flex;align-items:center;gap:8px;margin-top:9px;font-family:var(--display);font-weight:800;font-size:19px;color:var(--rc)}
.sp-pr s{font-size:13px;color:var(--mute)}
.sp-pr svg{width:15px;height:15px;fill:currentColor}
.sp-pr .own{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
/* the price is the buy button (10-22): a first click asks on the tile, a second one buys */
.sp-pr[data-spbuy]{cursor:pointer;transition:background .12s,color .12s}
.sp-pr[data-spbuy]:hover{filter:brightness(1.25)}
/* a first click turns the price into BUY in the same tag; short of crowns it gives a small shake (his pick 10-22, option B) */
.sp-pr .ask{letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.sp-pr.shake{animation:sp-no .34s ease-in-out}
@keyframes sp-no{0%,100%{transform:none}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.sp-pr.shake{animation:none}}

.sp-deal{position:absolute;z-index:2;left:8px;top:8px;background:var(--green);color:var(--green-ink);font-family:var(--display);font-weight:800;font-size:10px;line-height:1;letter-spacing:.12em;padding:3px 5px 2px;transform:rotate(-2deg)}
.sp-empty{color:var(--mute);font-size:13.5px;padding:20px 0}
/* what each kind of look shows in its tile */
/* the whole name on a look's card (2026-10-21, his rule: fit it, never cut it): two lines if it needs them, smaller if a word is still too long */
.sp-art .nm{font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;font-weight:800;font-size:24px;line-height:1.05;text-transform:uppercase;max-width:90%;overflow:visible;white-space:normal;text-align:center;--nmz:24px}
.sp-art .idcard{position:static;width:auto;height:auto;transform:none;padding:0;display:block}
.sp-art .idcard:before,.sp-art .idcard:after{display:none}
.sp-art .av-wrap{width:64px;height:64px;background:#2a2530}html .sp-art .idcard .av{width:100%;height:100%}   /* beats the header avatar's fixed size, or the picture spills out of its frame (10-29) */
.sp-art .ban{position:absolute;inset:14px;border-radius:5px;background:rgba(20,18,24,.96)}
.sp-art .ban.idcard:before{display:block;content:"";position:absolute;inset:0;border-radius:5px}
.sp-art .lk-t{min-width:120px;text-align:center}.sp-art .lk-t b{font-size:30px}
.sp-art .th-art{display:flex;align-items:center;gap:14px}
.sp-art .th-art .mk{width:52px;height:52px;flex:none;color:#F1EFE8}.sp-art .th-art .mk circle{fill:var(--mk)}
.sp-art .th-art>span{display:flex;flex-direction:column;gap:8px}.sp-art .th-art i{display:block;width:92px;height:9px;border-radius:5px;background:var(--mk)}.sp-art .th-art i+i{width:58px;background:rgba(255,255,255,.14)}
.sp-sample{font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
@media (max-width:1000px){.sp-body{grid-template-columns:minmax(0,1fr)}.sp-me{border-right:0;border-bottom:1px solid var(--line);z-index:4;background:var(--panel);padding:10px 14px}
  /* stacked, only the card stays frozen at the top (his ask 10-24): the Wearing list stuck with it from 901 to 1000 px and covered the window */
  .sp-me h3,.sp-wear{display:none}.sp-card{padding:6px 4px 2px}
  .sp-tabs{grid-auto-flow:row;grid-template-columns:repeat(3,1fr)}.sp-subs button{padding:9px 4px;font-size:12.5px}.sp-subs button span{margin-left:4px}}
@media (max-width:900px){.sp-me{top:calc(52px + env(safe-area-inset-top,0px))}
  .sp-reset{border-left:0;padding-left:0}.sp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sp-art{height:96px}.sp-list{padding:14px}}
/* ── claiming quest rewards (2026-10-20, as in the app's quests window): a Claim button on each reward waiting for its
   click, Claim all from 2, a count per group, the lock that opens as the crowns stream into the balance ── */
.lk-tools .cr .lk-dot{position:absolute;top:5px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--panel)}
.crg .t .cr-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:7px;border-radius:9px;background:var(--green);color:var(--green-ink);font-family:var(--body);font-size:12px;font-style:normal;font-weight:700;letter-spacing:0;vertical-align:1px}
.crq.ready{border-color:var(--green-dim);background:color-mix(in srgb,var(--green) 6%,var(--panel2));box-shadow:inset 3px 0 0 var(--green)}
.cr-claim,.cr-all{position:relative;overflow:hidden;display:flex;align-items:center;gap:6px;border:0;border-radius:7px;background:var(--green);color:var(--green-ink);font-family:var(--display);font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}
.cr-claim{padding:6px 12px;font-size:15px}
/* ask 107: every reward box one width whatever its number; a quest of a few steps shows a mark per step */
.crq .rw{min-width:76px;justify-content:center}
.crq .pb i.sg{display:flex;gap:4px;background:none;border-radius:0;overflow:visible}
.crq .pb i.sg b{flex:1;height:7px;border-radius:4px;background:rgba(255,255,255,.08)}
.crq .pb i.sg b.on{background:var(--green)}
.cr-all{margin-left:auto;padding:7px 12px;font-size:13.5px;white-space:nowrap;flex-shrink:0}.cr-all+.lk-bal{margin-left:12px}
@media (max-width:560px){.lk-m-quests .lk-hd{flex-wrap:wrap;row-gap:12px}   /* a phone: Claim all gets its own row under the title */
  .cr-all{order:3;flex:none;width:calc(100% + 42px);margin:0 -42px 0 0;justify-content:center;padding:10px 12px}.cr-all+.lk-bal{margin-left:auto}}
.cr-claim:hover,.cr-all:hover{transform:translateY(-1px);filter:brightness(1.08);box-shadow:0 4px 14px color-mix(in srgb,var(--green) 30%,transparent)}
.cr-claim:active,.cr-all:active{transform:translateY(0)}
.cr-claim::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.lk-modal.shine .cr-claim::after{animation:crSheen .7s var(--qd,0s) ease-out both}
@keyframes crSheen{to{transform:translateX(120%)}}
.cr-lad .pay.held{color:var(--gold)}
.cr-lad .pay .dot{display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:var(--gold);vertical-align:1px}
.lk-sync.err{color:var(--red)}
.lk-bal.bump{animation:crBump .25s ease}
/* seeds you HAVE are solid, seeds still to win stay an outline (his pick 10-23, as in the app) */
.lk-bal .cr-i path,.cr-gem .cr-i path{fill:currentColor}
@keyframes crBump{50%{transform:scale(1.12)}}
.cr-ul{position:absolute;inset:0;z-index:4;background:rgba(6,8,10,.84);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;animation:crFadeIn .25s both}
.cr-ul.out{animation:crFadeOut .35s both}
@keyframes crFadeIn{from{opacity:0}}@keyframes crFadeOut{to{opacity:0}}
.cr-pad{position:relative;width:220px;height:236px}
.cr-pad svg{width:100%;height:100%;overflow:visible}
.cr-pad .qxf,.cr-pad .qxs{fill:none;stroke:#F1EFE8;stroke-width:8;stroke-linejoin:round;stroke-linecap:round}.cr-pad .qxl{fill:#F1EFE8}
.cr-pad .pup{fill:var(--green)}
.cr-ut{margin-top:10px;text-align:center;opacity:0}
.cr-ul.pour .cr-ut{animation:crUtIn .5s ease-out both}
@keyframes crUtIn{from{opacity:0}to{opacity:1}}
.cr-ut small{display:block;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.cr-ut b{display:block;margin-top:4px;font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}
.cr-ut em{display:inline-flex;align-items:center;gap:7px;margin-top:6px;font-family:var(--display);font-weight:800;font-size:30px;font-style:normal;color:var(--green)}
.cr-gem{position:absolute;z-index:6;width:22px;height:22px;margin:-11px 0 0 -11px;color:var(--green);pointer-events:none;opacity:0;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--green) 55%,transparent))}
.cr-gem .cr-i{width:22px;height:22px}
@media (prefers-reduced-motion:reduce){.cr-ul,.cr-ul *,.cr-claim,.cr-all,.cr-claim::after,.lk-bal.bump{animation:none!important}
  .cr-claim,.cr-claim:hover,.cr-claim:active,.cr-all,.cr-all:hover,.cr-all:active{transform:none;transition:none}.cr-ut{opacity:1;transform:none}}
/* the site's quests window, 2026-10-21: the everyday quests, then the app's quests offered (or pointed to) */
.cr-get{display:flex;align-items:center;gap:12px 16px;margin-top:14px;padding:13px 15px;border:1px solid color-mix(in srgb,var(--green) 45%,transparent);border-radius:10px;background:color-mix(in srgb,var(--green) 5%,var(--panel2))}
.cr-get p{flex:1 1 0;min-width:0;overflow:hidden;margin:0;white-space:nowrap;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.02em;text-transform:uppercase;color:var(--fg)}
/* the arrow that gets the app (his pick 10-21): a square green button beside the line */
.cr-go{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:6px;background:var(--green);color:var(--green-ink)}
.cr-go:hover{filter:brightness(1.1)}
.cr-go svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* in the hover card: the same line and arrow, no box of its own (the card's box is around it) */
@media (max-width:560px){.cr-get .lg{display:none}}   /* a phone: the short line */
.cr-hc .cr-get{margin:0;padding:0;border:0;background:none;gap:10px}
.cr-hc .cr-go{width:34px;height:34px}
/* the hover card on your crowns (as Statlocker's, about its size) */
.cr-hc{position:fixed;z-index:60;width:340px;max-width:calc(100vw - 16px);display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--line2);border-radius:10px;
  background:var(--panel2);box-shadow:0 18px 44px rgba(0,0,0,.55);color:var(--fg);text-align:left}
.cr-hc[hidden]{display:none}
.cr-hc .hc-h{display:flex;align-items:center;gap:11px}
.cr-hc .hc-h>svg{width:32px;height:32px;flex:none;fill:var(--green);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--green) 50%,transparent))}
.cr-hc .hc-h b{display:block;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.cr-hc .hc-h span{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:var(--fg2,var(--fg))}   /* neutral words, his ask 10-29 */
.cr-hc .hc-looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.cr-hc .hc-looks>div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 4px 8px;border:1px solid var(--line2);border-radius:5px;background:var(--panel);text-align:center;min-width:0}
.cr-hc .hc-looks em{font-style:normal;font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--rc)}
.cr-hc .hc-looks .sp-art{height:54px;width:100%;border:0}
.cr-hc .hc-looks .sp-art .nm{font-size:14px;--nmz:14px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.05;text-align:center}   /* the whole name, on two lines if it needs them (ask 105) */
.cr-hc .hc-looks .sp-art .av-wrap{width:38px;height:38px;margin-top:12px}   /* room above for a frame's crown */
.cr-hc .hc-looks .sp-art .ban{inset:6px}
.cr-hc .hc-looks b{font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;max-width:100%;white-space:normal;line-height:1.1}   /* the whole name: two lines if it needs them, smaller if a word is still too long (looks.js fitLine; his 10-29 "SEAFOAM A...") */
.cr-hc .hc-looks small{font-family:var(--display);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.cr-hc .hc-ticks{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;font-weight:600;font-size:13.5px}
.cr-hc .hc-ticks li{display:flex;align-items:center;gap:8px}
.cr-hc .hc-ticks svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--green);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cr-hc .hc-main{display:flex;flex-direction:column;gap:8px;padding:11px 13px;border:1px solid color-mix(in srgb,var(--green) 45%,transparent);border-radius:6px;background:color-mix(in srgb,var(--green) 5%,var(--panel))}
.cr-hc .hc-main small,.cr-hc .hc-also small{font-family:var(--display);font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.cr-hc .hc-more{align-self:stretch;margin-top:2px;padding:8px 12px;border:1px solid color-mix(in srgb,var(--green) 55%,transparent);border-radius:6px;background:none;font-family:var(--display);font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);cursor:pointer}
.cr-hc .hc-more:hover{background:color-mix(in srgb,var(--green) 12%,transparent);color:var(--fg)}
.cr-hc .hc-also{display:flex;flex-direction:column;gap:5px;padding-top:10px;border-top:1px solid var(--line)}
.cr-hc .hc-also small{color:var(--mute)}
.cr-hc .hc-also .hc-q{display:flex;justify-content:space-between;margin-top:4px;font-size:13px;font-weight:600}
.cr-hc .hc-also .hc-q b{font-family:var(--display);font-weight:800;font-size:14px}
.cr-hc .segs{display:flex;gap:3px}
.cr-hc .segs i{flex:1;height:5px;background:rgba(255,255,255,.1)}
.cr-hc .segs i.on{background:var(--green)}
/* a look just added says NEW on its shelf (2026-10-21; the rotating shop's TODAY and dimmed looks are gone) */
.sp-deal.sp-in{background:var(--fg);color:var(--bg)}
/* a claim in a short quests window (2026-10-21, his "small wording underneath... looked messy"): "Click to skip" sat
   on the +crowns and the bottom was cut off. The text is gone (his call: the window has its X); the lock shrinks to
   the room left and the lifted shackle keeps its room at the top */
.cr-ul{padding:48px 16px 14px;box-sizing:border-box;background:rgba(6,8,10,.97)}
.cr-pad{height:min(236px,calc(100% - 140px));width:auto;aspect-ratio:140/150;flex:none}
/* the shop, customize and quests windows scroll with a thin see-through bar that brightens under the mouse
   (his ask 10-22: "a glass scroll... not so visible") */
.lk-modal,.lk-modal *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.12) transparent}
.lk-modal :hover{scrollbar-color:rgba(255,255,255,.28) transparent}
/* earned titles (ask 132, mockup OK'd 10-22): the worn one under your name, in its rarity's colour on an outline */
.lk-ti{display:inline-block;margin-top:7px;padding:3px 8px;border:1px solid var(--rc);color:var(--rc);font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:12px;line-height:1.2;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.sp-card .lk-ti{font-size:11px;margin-top:5px}
/* customize's Titles tab: the ones you earned (click to wear), then the closest still to earn, with how far along */
.ti-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.ti{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-top:2px solid var(--rc);padding:10px 12px;cursor:pointer}
.ti:hover{background:rgba(255,255,255,.06)}
.ti b{display:block;font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg)}
.ti i{display:block;margin-top:3px;font-style:normal;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--rc)}
.ti[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--rc)}
.ti.lock{cursor:default}.ti.lock:hover{background:rgba(255,255,255,.03)}.ti.lock b{color:var(--mute)}
.ti-bar{height:4px;margin-top:8px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.08)}
.ti-bar u{display:block;height:100%;background:var(--rc);opacity:.7}
/* in the app the shop's words wear the app's face (its crowns-window.css sets it on the shop's own parts) */
html.lk-app .lk-win .ti-grid,html.lk-app .lk-win .ti-h{--display:"Exo 2","Segoe UI",system-ui,sans-serif}
.ti-h{margin:18px 0 8px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}