.tl-app{padding:30px 0 45px;color:#162e4c}.tl-intro>span{font-size:10px;font-weight:800;letter-spacing:1.6px;color:#ba3045}.tl-intro h1{font-size:clamp(32px,4vw,54px);letter-spacing:-1.8px;margin:14px 0}.tl-intro p{font-size:14px;line-height:1.7;color:#6e819d;max-width:740px}.tl-intro nav{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}.tl-intro nav>*{font-size:11px;padding:9px 13px;border:1px solid #dbe3ee;border-radius:20px;color:#8190a6}.tl-intro nav>strong{background:#14283f;color:#fff;border-color:#14283f}
.tl-app button,.tl-app input,.tl-app select{font-family:Arial,sans-serif}.tl-app button{cursor:pointer;border:1px solid #c9d6e7;border-radius:6px;padding:10px 14px;background:#fff;color:#274b77;font-size:12px;font-weight:700}.tl-app button:hover{background:#e6edf8}.tl-app button:disabled{opacity:.4;cursor:default}.tl-app button.tl-primary{background:#c33549;color:#fff;border-color:#c33549}.tl-toolbar{display:flex;gap:10px;align-items:end;flex-wrap:wrap;padding:20px;background:#eaf0f7;border:1px solid #dbe3ef;border-radius:10px}.tl-toolbar label{flex:1;min-width:200px}.tl-app label{display:grid;gap:6px;font-size:10px;font-weight:700;color:#687e9c}.tl-app input,.tl-app select{border:1px solid #cad7e7;background:#fff;border-radius:5px;padding:10px 12px;color:#183454;font-size:13px;min-width:0}.tl-placement{display:flex;align-items:center;gap:12px;margin:20px 0 8px;font-size:12px}.tl-placement>span{margin-right:auto;font-weight:700}.tl-status{font-size:11px;color:#7186a1;min-height:17px;margin:9px 0 14px}.tl-board{background:#0b1727;border:1px solid #293d57;border-radius:9px;overflow:hidden}.tl-row{display:grid;grid-template-columns:115px minmax(0,1fr) 40px;min-height:110px;border-bottom:1px solid #34455e}.tl-row:last-child{border:0}.tl-label{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:10px}.tl-label>input:first-child{width:100%;background:transparent;text-align:center;color:#182438;font-size:24px;font-weight:800;border:0;padding:4px}.tl-label>input[type=color]{height:18px;width:35px;padding:0;border:1px solid #0003;border-radius:3px;background:transparent;cursor:pointer}.tl-items{display:flex;align-content:flex-start;flex-wrap:wrap;gap:3px;padding:5px;min-height:110px;outline-offset:-3px}.tl-row-hint{font-size:10px;color:#657b99;align-self:center;margin:auto;pointer-events:none}.tl-drag-over{background:#24436b!important;box-shadow:inset 0 0 0 2px #8cb9f3}.tl-row-tools{display:flex;flex-direction:column;background:#14243a}.tl-row-tools button{padding:4px 0;border:0;border-radius:0;background:transparent;color:#a6bad6;flex:1;font-size:17px}.tl-app .tl-fighter{position:relative;width:79px;height:97px;padding:0;border:1px solid #334d6b;border-radius:3px;background:#1c3049;overflow:hidden;touch-action:manipulation;flex-shrink:0}.tl-fighter img{width:100%;height:74px;object-fit:contain;object-position:bottom;background:radial-gradient(ellipse,#385471,#16263b);display:block}.tl-fighter span{display:flex;align-items:center;justify-content:center;min-height:22px;padding:2px;font:700 8px/1.1 Arial,sans-serif;color:#fff;text-align:center;position:absolute;bottom:0;left:0;right:0;background:#101c2de8}.tl-fighter[aria-pressed=true]{outline:3px solid #f0c977;outline-offset:-3px}.tl-no-photo{background:#2c4260!important}.tl-no-photo span{min-height:100%}.tl-bank{margin-top:25px;padding:22px;border:1px solid #d7e1ee;border-radius:10px;background:#fff}.tl-bank>header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px}.tl-bank h2{font-size:23px;margin:0 0 7px;letter-spacing:-.5px}.tl-bank h2 span{font-size:11px;font-weight:500;color:#7e90a9;margin-left:10px}.tl-bank p{font-size:11px;line-height:1.6;color:#7c8da5;margin:0}.tl-pool{display:flex;gap:6px;flex-wrap:wrap;min-height:115px;padding:14px;background:#edf2f8;border-radius:7px}.tl-search{margin-top:20px;border-top:1px solid #dbe3ef;padding-top:20px}.tl-search>label{max-width:470px}.tl-search>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.tl-search>p{margin-top:10px}.tl-note{font-size:10px;line-height:1.7;color:#7a8ca5;margin-top:20px}.tl-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.tl-empty{padding:20px}.tl-app :focus-visible{outline:3px solid #579af0;outline-offset:3px}
@media(max-width:700px){.tl-row{grid-template-columns:72px minmax(0,1fr) 32px;min-height:98px}.tl-label{padding:5px}.tl-label>input:first-child{font-size:20px}.tl-app .tl-fighter{width:64px;height:84px}.tl-fighter img{height:64px}.tl-fighter span{font-size:7px}.tl-toolbar{padding:14px}.tl-placement{flex-wrap:wrap}.tl-placement>span{width:100%;margin-bottom:4px}.tl-bank{padding:14px}.tl-bank>header{align-items:stretch;flex-direction:column}.tl-bank>header label{width:100%}.tl-pool{padding:8px;gap:4px}.tl-intro h1{letter-spacing:-1px}.tl-toolbar button{flex:1}.tl-toolbar label{flex-basis:100%}}
.tl-template-switch{display:flex;align-items:end;gap:22px;flex-wrap:wrap;margin:24px 0}.tl-template-switch label{min-width:250px;max-width:440px;flex:1}.tl-template-switch a{font-size:12px;color:#b62e43;padding:12px 0;font-weight:700}
/* Bare And Brawl ranking lanes */
.tl-board{display:grid;gap:12px;background:transparent;border:0;border-radius:0;overflow:visible}.tl-row{grid-template-columns:126px minmax(0,1fr) 38px;border:1px solid #d7e1ed!important;border-left:4px solid var(--tier-accent,#bf354b)!important;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 3px 12px #162e4c05;min-height:114px}.tl-label{margin:10px;background:#14283f!important;border-radius:7px;gap:4px;padding:8px}.tl-rank-number{font-size:8px;font-weight:700;letter-spacing:1.4px;color:#9fb0c7}.tl-label>input:first-of-type{font-size:26px;color:#fff;background:transparent;border:0;text-align:center;font-weight:800;width:100%;padding:2px}.tl-label>input[type=color]{width:26px;height:7px;border:0;opacity:.8}.tl-items{min-height:112px;padding:7px;gap:5px;background:linear-gradient(110deg,#f5f8fc,#fff)}.tl-row-hint{color:#8494a9;font-size:11px;border:1px dashed #cdd8e6;border-radius:6px;padding:14px 20px;max-width:90%;text-align:center}.tl-row-tools{background:#f1f5fa;border-left:1px solid #e4eaf2}.tl-row-tools button{color:#637b98;font-size:16px}.tl-row-tools button:hover{background:#e1e9f4}.tl-row-tools button:disabled{opacity:.25}.tl-app .tl-fighter{border-radius:5px;box-shadow:0 2px 5px #13273f12}.tl-bank{border-top:3px solid #bd3449}.tl-bank h2{font-size:21px}
@media(max-width:700px){.tl-row{grid-template-columns:80px minmax(0,1fr) 30px}.tl-label{margin:7px;padding:5px}.tl-label>input:first-of-type{font-size:22px}.tl-rank-number{font-size:7px;letter-spacing:.6px}.tl-row-hint{padding:10px;font-size:10px}.tl-items{min-height:98px}}
/* Editable full-color ranking lanes. */
.tl-row{background:var(--tier-accent,#f28f91);border-color:color-mix(in srgb,var(--tier-accent) 75%,#14283f)!important}.tl-label{background:#14283fe8!important}.tl-items{background:color-mix(in srgb,var(--tier-accent) 52%,#fff)}.tl-row-tools{background:color-mix(in srgb,var(--tier-accent) 75%,#fff);border-left-color:#14283f22}.tl-row-hint{color:#233b56;background:#ffffff65;border-color:#14283f40}.tl-label>input[type=color]{width:46px;height:24px;border:2px solid #ffffffa6;border-radius:5px;opacity:1;padding:1px;cursor:pointer}.tl-color-caption{font-size:8px;color:#fff;letter-spacing:.5px}.tl-row-tools button{color:#203a57}
/* Saturated tier labels and deep, color-tinted fighter lanes. */
.tl-board{gap:7px}.tl-row{grid-template-columns:112px minmax(0,1fr) 36px;border:1px solid #ffffff20!important;border-left:0!important;border-radius:5px;background:#101722;box-shadow:none}.tl-label{margin:0;padding:9px 7px;background:var(--tier-accent)!important;border-radius:0;gap:3px;color:var(--tier-ink,#141b25)}.tl-label>input:first-of-type{color:var(--tier-ink,#141b25);font-size:30px}.tl-rank-number{color:var(--tier-ink,#141b25);opacity:.65}.tl-color-caption{color:var(--tier-ink,#141b25);font-weight:700}.tl-label>input[type=color]{border:1px solid #17213380;width:38px;height:18px;background:#ffffff35;border-radius:3px}.tl-items{background:color-mix(in srgb,var(--tier-accent) 25%,#101722);min-height:112px}.tl-row-hint{background:transparent;border:0;color:#e1e7f2a6;font-size:10px;padding:12px}.tl-row-tools{background:color-mix(in srgb,var(--tier-accent) 13%,#101722);border-left:1px solid #ffffff16}.tl-row-tools button{color:#d8e3f3}.tl-row-tools button:hover{background:#ffffff18}.tl-drag-over{background:color-mix(in srgb,var(--tier-accent) 45%,#101722)!important;box-shadow:inset 0 0 0 2px var(--tier-accent)}
@media(max-width:700px){.tl-row{grid-template-columns:78px minmax(0,1fr) 30px}.tl-label>input:first-of-type{font-size:25px}}
/* Continuous tier board without page-colored gaps. */
.tl-board{gap:0;border-radius:6px;overflow:hidden;background:#101722}.tl-row{border-radius:0;border-bottom:1px solid #ffffff24!important}.tl-row:last-child{border-bottom:0!important}
/* Outline the colored tier column against surrounding surfaces. */
.tl-label{border-left:1px solid #000;border-right:2px solid #000;border-bottom:1px solid #000}.tl-row:first-child .tl-label{border-top:1px solid #000}
/* Placed portraits sit directly on the tier color. */
.tl-items .tl-fighter,.tl-items .tl-fighter:hover{background:transparent;border-color:transparent;box-shadow:none}.tl-items .tl-fighter img{background:transparent}.tl-items .tl-fighter span{background:transparent;text-shadow:0 1px 3px #000}
/* Larger portraits fill the ranking lane height. */
.tl-items{padding:3px 6px;gap:4px}.tl-items .tl-fighter{width:96px;height:108px}.tl-items .tl-fighter img{height:91px;object-fit:contain;object-position:center bottom}.tl-items .tl-fighter span{font-size:9px;min-height:18px;padding:1px 2px}
@media(max-width:700px){.tl-items{padding:3px;gap:3px}.tl-items .tl-fighter{width:78px;height:94px}.tl-items .tl-fighter img{height:78px}.tl-items .tl-fighter span{font-size:8px;min-height:16px}}
