.tl-main{--void: #0c0904;--stone: #19120a;--stone-lit: #241a0e;--bronze: #c8882e;--bronze-lit:#f0c178;--parch: #f2e3c0;--parch-dim: #a3927a;--tier-s: #e8c25a;--tier-a: #6fd39a;--tier-b: #5f9fd4;--tier-c: #d08a3c;--tier-d: #c05048;--tier-pool: #8b8f98;--foil-color: rgba(200, 136, 46, .5);position:relative;background:var(--void);padding:6rem 1.5rem;overflow:hidden}.tl-main:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 55% 40% at 50% -6%,rgba(200,136,46,.26),transparent 72%),radial-gradient(ellipse 100% 80% at 50% 100%,rgba(12,9,4,.92),transparent 60%);pointer-events:none}.tl-main:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.4) 0 1px,transparent 1px 6rem),repeating-linear-gradient(90deg,rgba(0,0,0,.28) 0 1px,transparent 1px 12rem);opacity:.6;pointer-events:none}.tl-wrap{position:relative;z-index:1;max-width:68rem;margin:0 auto}.tl-panel{position:relative;max-width:38rem;margin:0 auto;padding:3.4rem 2.6rem 2.8rem;text-align:center;color:var(--parch);background:radial-gradient(ellipse 80% 55% at 50% 0%,var(--stone-lit),transparent 70%),linear-gradient(168deg,var(--stone),#0a0703);border:1px solid rgba(200,136,46,.34);border-radius:3px;box-shadow:inset 0 1px #f0c17838,inset 0 -40px 70px -40px #c8882e66,0 30px 70px #000000c7}.tl-panel:before{content:"";position:absolute;inset:7px;border:1px solid rgba(200,136,46,.16);border-radius:2px;pointer-events:none}.tl-docket{font-family:var(--font-beaufort);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.32em;text-indent:.32em;color:var(--bronze);margin-bottom:.8rem}.tl-panel-title{font-family:var(--font-beaufort);font-size:clamp(2.6rem,7vw,4rem);font-weight:700;line-height:.95;color:var(--parch);text-shadow:0 0 40px rgba(200,136,46,.65);margin-bottom:.6rem}.tl-panel-sub{font-size:.95rem;line-height:1.65;color:var(--parch-dim);margin:0 auto 2.4rem;max-width:36ch}.tl-field{margin-bottom:1.9rem;text-align:left}.tl-label{display:flex;align-items:center;gap:.8rem;font-family:var(--font-beaufort);font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.28em;color:var(--bronze-lit);margin-bottom:.9rem}.tl-label:after{content:"";flex:1 1 auto;height:1px;background:linear-gradient(90deg,rgba(240,193,120,.5),transparent)}.tl-chips{display:flex;flex-wrap:wrap;gap:.55rem}.tl-chip{padding:.62rem 1.25rem;font-family:var(--font-beaufort);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--parch-dim);background:linear-gradient(168deg,#221809,#140e05);border:1px solid rgba(200,136,46,.28);clip-path:polygon(.5rem 0,100% 0,100% calc(100% - .5rem),calc(100% - .5rem) 100%,0 100%,0 .5rem);cursor:pointer;transition:color .14s ease,border-color .14s ease,transform .14s ease,box-shadow .14s ease}.tl-chip:hover{color:var(--parch);border-color:var(--bronze-lit);transform:translateY(-2px)}.tl-chip[aria-checked=true]{color:#120c04;background:linear-gradient(168deg,var(--bronze-lit),var(--bronze));border-color:var(--bronze-lit);box-shadow:0 0 22px #c8882e80}.tl-start{display:block;width:100%;padding:1.1rem 1.5rem;font-family:var(--font-beaufort);font-size:.86rem;font-weight:700;text-transform:uppercase;letter-spacing:.34em;text-indent:.34em;color:var(--bronze-lit);background:linear-gradient(168deg,#2b1e0b,#150e05);border:1px solid rgba(200,136,46,.45);clip-path:polygon(.8rem 0,calc(100% - .8rem) 0,100% 50%,calc(100% - .8rem) 100%,.8rem 100%,0 50%);cursor:pointer;transition:transform .16s cubic-bezier(.22,1,.36,1),color .16s ease,box-shadow .16s ease}.tl-start:hover:not(:disabled){transform:translateY(-2px);color:#120c04;background:linear-gradient(168deg,var(--bronze-lit),var(--bronze));box-shadow:0 0 34px #c8882e80}.tl-start:disabled{opacity:.45;cursor:progress}.tl-error{margin-top:1rem;color:#e0715f;font-size:.9rem}.tl-broken .tl-docket{color:#e0715f}.tl-hud{display:block;margin-bottom:1.8rem}.tl-hud-set{display:block;margin-bottom:.7rem;font-family:var(--font-beaufort);font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.3em;color:var(--bronze-lit)}.tl-progress{position:relative;width:100%}.tl-progress-track{position:relative;height:2.6rem;border-radius:3px;overflow:hidden;background:linear-gradient(180deg,#080502,#150e06);border:1px solid rgba(200,136,46,.4);box-shadow:inset 0 3px 12px #000000f2,0 1px #f0c1781f}.tl-progress-fill{position:relative;height:100%;width:0;background:linear-gradient(180deg,#fff6de66,#fff6de0d 46%,#00000040),linear-gradient(90deg,#7d4f14,var(--bronze) 55%,var(--bronze-lit));box-shadow:0 0 22px -2px #c8882ee6;transition:width .5s cubic-bezier(.22,1,.36,1),background .4s ease}.tl-progress-fill:after{content:"";position:absolute;top:0;bottom:0;right:0;width:2px;background:#fff6de;box-shadow:0 0 16px 4px #fff6debf}.tl-progress-fill[style*="width: 0%"]:after{opacity:0}.tl-progress-label{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:.35rem;font-family:var(--font-beaufort);font-size:1.15rem;font-weight:800;letter-spacing:.08em;color:var(--parch);font-variant-numeric:tabular-nums;text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.8);pointer-events:none}.tl-progress-label #tlRanked{color:#fff6de}.tl-progress-sep{opacity:.5}.tl-progress-label #tlTotal{color:var(--parch-dim)}.tl-progress.is-bump .tl-progress-track{animation:tlBump .4s cubic-bezier(.2,1.3,.3,1)}.tl-progress.is-bump .tl-progress-label{animation:tlTick .4s cubic-bezier(.2,1.4,.3,1)}@keyframes tlBump{0%{transform:scaleY(1)}42%{transform:scaleY(1.09)}to{transform:scaleY(1)}}@keyframes tlTick{0%{transform:scale(1)}45%{transform:scale(1.16)}to{transform:scale(1)}}.tl-progress[data-state=done] .tl-progress-fill{background:linear-gradient(180deg,#fffcf080,#fff6de14 46%,#0003),linear-gradient(90deg,var(--bronze),var(--bronze-lit) 55%,#fff6de);box-shadow:0 0 34px #f0c178f2}.tl-progress[data-state=done] .tl-progress-track{border-color:var(--bronze-lit)}.tl-progress[data-state=done] .tl-progress-label{color:#241703;text-shadow:none}.tl-progress[data-state=done] .tl-progress-label #tlRanked,.tl-progress[data-state=done] .tl-progress-label #tlTotal{color:#241703}.tl-tiers{display:grid;gap:.6rem}.tl-tier{display:grid;grid-template-columns:6.5rem minmax(0,1fr);align-items:stretch;background:linear-gradient(168deg,#140e06,#0b0703);border:1px solid color-mix(in srgb,var(--tint) 35%,transparent);border-radius:3px;transition:border-color .14s ease,box-shadow .14s ease}.tl-tier-s{--tint: var(--tier-s)}.tl-tier-a{--tint: var(--tier-a)}.tl-tier-b{--tint: var(--tier-b)}.tl-tier-c{--tint: var(--tier-c)}.tl-tier-d{--tint: var(--tier-d)}.tl-tier-pool{--tint: var(--tier-pool);margin-top:1.1rem}.tl-tier.is-drop{border-color:var(--tint);box-shadow:inset 0 0 40px -10px color-mix(in srgb,var(--tint) 60%,transparent),0 0 24px -8px color-mix(in srgb,var(--tint) 70%,transparent)}.tl-tier-plate{position:relative;display:grid;place-content:center;gap:.1rem;padding:.9rem .6rem;text-align:center;background:linear-gradient(168deg,color-mix(in srgb,var(--tint) 34%,transparent),color-mix(in srgb,var(--tint) 12%,transparent));border-right:1px solid color-mix(in srgb,var(--tint) 35%,transparent)}.tl-tier-label{font-family:var(--font-beaufort);font-size:2.2rem;font-weight:900;line-height:1;color:var(--tint);text-shadow:0 0 20px color-mix(in srgb,var(--tint) 65%,transparent)}.tl-tier-note{font-size:.52rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--parch-dim)}.tl-tier-count{position:absolute;top:.4rem;right:.5rem;font-size:.62rem;font-weight:800;color:color-mix(in srgb,var(--tint) 80%,white 20%);opacity:.75;font-variant-numeric:tabular-nums}.tl-tier-grid{display:flex;flex-wrap:wrap;align-content:flex-start;gap:.4rem;padding:.5rem;min-height:7.4rem}.tl-face{position:relative;display:block;width:6.2rem;flex:0 0 auto;padding:0;font:inherit;color:inherit;text-align:center;-webkit-appearance:none;appearance:none;border:1px solid color-mix(in srgb,var(--tint) 40%,transparent);border-radius:2px;overflow:hidden;background:#0e0a05;cursor:grab;touch-action:none;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}.tl-face img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.tl-face-name{display:block;padding:.2rem .15rem;font-family:var(--font-beaufort);font-size:.58rem;font-weight:800;line-height:1.15;text-transform:uppercase;text-align:center;color:#d6c7aa;background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 18%,transparent),#0000008c)}.tl-face:hover{transform:translateY(-2px);border-color:var(--tint);box-shadow:0 0 18px -4px color-mix(in srgb,var(--tint) 75%,transparent);z-index:2}.tl-face:focus-visible{outline:2px solid var(--bronze-lit);outline-offset:2px;z-index:3}.tl-face.is-lifted{opacity:.25}.tl-drag-ghost{position:fixed;z-index:300;margin:0;pointer-events:none;transform:translate(-50%,-50%) rotate(-3deg) scale(1.15);box-shadow:0 18px 40px #000c;cursor:grabbing}.tl-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem;margin-top:1.8rem}.tl-share{padding:1rem 2rem;font-family:var(--font-beaufort);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.22em;color:#120c04;background:linear-gradient(168deg,var(--bronze-lit),var(--bronze));border:1px solid rgba(240,193,120,.6);border-radius:3px;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}.tl-share:hover{transform:translateY(-2px);box-shadow:0 0 28px -6px #c8882ed9}@media(prefers-reduced-motion:reduce){.tl-face,.tl-chip,.tl-share,.tl-start,.tl-tier,.tl-progress-fill{transition:none}.tl-progress.is-bump .tl-progress-track,.tl-progress.is-bump .tl-progress-label{animation:none}}@media(max-width:760px){.tl-main{padding:4rem 1rem}.tl-panel{padding:2.8rem 1.4rem 2.2rem}.tl-tier{grid-template-columns:4.2rem minmax(0,1fr)}.tl-tier-label{font-size:1.6rem}.tl-tier-note{display:none}.tl-face{width:4.4rem}.tl-tier-grid{min-height:5.6rem;gap:.3rem;padding:.35rem}.tl-progress-track{height:2rem}.tl-progress-label{font-size:.95rem}.tl-share{flex:1 1 auto}}
