*{box-sizing:border-box}
.hidden{display:none!important}
.tierPage{width:min(1360px,calc(100% - 32px));margin:0 auto;padding:28px 0 0;font-family:var(--entity-sans);color:var(--entity-text)}
.tierHero{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end;padding:38px;border:1px solid var(--entity-line);border-radius:28px;background:linear-gradient(135deg,rgba(18,20,27,.94),rgba(8,9,13,.92));box-shadow:var(--entity-shadow)}
.tierHero:before{content:"";position:absolute;inset:-35% 38% 20% -12%;background:radial-gradient(circle,rgba(255,49,95,.18),transparent 65%);pointer-events:none}
.tierHeroCopy,.tierHeroRules{position:relative;z-index:1}
.tierKicker{text-transform:uppercase;letter-spacing:.17em;font-weight:900;font-size:10px;color:var(--entity-red)}
.tierHero h1{margin:7px 0 10px;font:800 clamp(34px,5vw,66px)/.98 var(--entity-serif);letter-spacing:-.045em}
.tierHero p{max-width:760px;margin:0;color:var(--entity-muted);font-size:14px;line-height:1.7}
.tierHeroRules{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));min-width:420px;border:1px solid var(--entity-line);border-radius:20px;background:rgba(0,0,0,.24);overflow:hidden}
.tierHeroRules div{padding:17px 18px;border-right:1px solid var(--entity-line)}
.tierHeroRules div:last-child{border-right:0}
.tierHeroRules strong,.tierHeroRules span{display:block}.tierHeroRules strong{font-size:15px}.tierHeroRules span{margin-top:4px;color:var(--entity-muted-soft);font-size:10px;text-transform:uppercase;letter-spacing:.08em}
.tierIdentity{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:16px 0 0;padding:16px 18px;border:1px solid var(--entity-line);border-radius:18px;background:rgba(10,11,16,.82)}
.tierIdentity strong{display:block;margin-top:3px;font-size:13px}.tierIdentity p{margin:3px 0 0;color:var(--entity-muted);font-size:11px}
.tierButton{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.12);color:#fff;text-decoration:none;font-size:11px;font-weight:850;background:rgba(255,255,255,.05)}
.tierButton:hover{background:rgba(255,255,255,.09)}
.tierWorkspace{margin-top:22px;border:1px solid var(--entity-line);border-radius:26px;background:rgba(7,8,12,.79);box-shadow:0 20px 60px rgba(0,0,0,.32);overflow:hidden}
.tierPrimaryTabs{display:flex;padding:8px;border-bottom:1px solid var(--entity-line);background:rgba(0,0,0,.20)}
.tierPrimaryTab{flex:1;min-height:52px;border:0;border-radius:16px;background:transparent;color:var(--entity-muted);font:900 14px var(--entity-sans);cursor:pointer;transition:.18s ease}
.tierPrimaryTab:hover{background:rgba(255,255,255,.04);color:#fff}.tierPrimaryTab.active{color:#fff;background:linear-gradient(135deg,rgba(255,49,95,.20),rgba(113,14,38,.14));box-shadow:inset 0 0 0 1px rgba(255,49,95,.25)}
.tierToolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap;padding:16px;border-bottom:1px solid var(--entity-line)}
.tierPerkControls,.tierAddonControls{display:flex;align-items:end;gap:12px;flex-wrap:wrap}
.tierSubTabs{display:flex;padding:4px;border:1px solid var(--entity-line);border-radius:14px;background:rgba(255,255,255,.025)}
.tierSubTab{min-height:36px;padding:7px 12px;border:0;border-radius:10px;background:transparent;color:var(--entity-muted);font:850 11px var(--entity-sans);cursor:pointer}.tierSubTab.active{color:#fff;background:rgba(255,49,95,.16);box-shadow:inset 0 0 0 1px rgba(255,49,95,.18)}
.tierField{display:grid;gap:6px;min-width:180px}.tierField span{font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.11em;color:var(--entity-muted-soft)}
.tierField input,.tierField select{width:100%;min-height:40px;padding:8px 11px;border:1px solid var(--entity-line);border-radius:12px;background:#0b0c11;color:#fff;font:750 11px var(--entity-sans);outline:none}.tierField input:focus,.tierField select:focus{border-color:rgba(255,49,95,.48);box-shadow:0 0 0 3px rgba(255,49,95,.08)}
.tierField select option{background:#0b0c11;color:#fff}.tierSearchField{flex:1;min-width:230px}.tierField.compact{min-width:180px}
.tierSnapshot{display:flex;align-items:stretch;gap:0;border-bottom:1px solid var(--entity-line);background:rgba(255,255,255,.015)}
.tierSnapshot>div{min-width:120px;padding:13px 16px;border-right:1px solid var(--entity-line)}.tierSnapshot span{display:block;font-size:17px;font-weight:900}.tierSnapshot small{display:block;margin-top:2px;color:var(--entity-muted-soft);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.tierSnapshotStatus{margin-left:auto;display:flex;align-items:center!important;gap:8px;min-width:auto!important;border-right:0!important}.tierSnapshotStatus small{margin:0}.tierStatusDot{width:7px;height:7px;border-radius:50%;background:var(--entity-good);box-shadow:0 0 12px rgba(121,240,160,.45)}
.tierBoard{padding:14px}
.tierRow{display:grid;grid-template-columns:92px minmax(0,1fr);min-height:124px;margin-bottom:9px;border:1px solid var(--entity-line);border-radius:17px;overflow:hidden;background:rgba(255,255,255,.018)}.tierRow:last-child{margin-bottom:0}
.tierRowLabel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px;border-right:1px solid rgba(255,255,255,.12);text-align:center}.tierRowLabel strong{font:900 36px/1 var(--entity-serif)}.tierRowLabel small{color:rgba(255,255,255,.64);font-size:8px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.tierRow[data-tier="S"] .tierRowLabel{background:linear-gradient(135deg,rgba(255,83,102,.80),rgba(139,24,48,.72))}.tierRow[data-tier="A"] .tierRowLabel{background:linear-gradient(135deg,rgba(239,137,71,.76),rgba(137,66,24,.70))}.tierRow[data-tier="B"] .tierRowLabel{background:linear-gradient(135deg,rgba(221,182,76,.72),rgba(119,92,23,.66))}.tierRow[data-tier="C"] .tierRowLabel{background:linear-gradient(135deg,rgba(112,183,98,.67),rgba(43,98,42,.68))}.tierRow[data-tier="D"] .tierRowLabel{background:linear-gradient(135deg,rgba(83,145,184,.67),rgba(33,70,111,.68))}.tierRow[data-tier="F"] .tierRowLabel{background:linear-gradient(135deg,rgba(113,87,153,.68),rgba(56,37,92,.70))}.tierRow[data-tier="unranked"] .tierRowLabel{background:linear-gradient(135deg,rgba(77,81,94,.60),rgba(35,38,47,.72))}.tierRow[data-tier="unranked"] .tierRowLabel strong{font-size:16px}
.tierRowItems{display:flex;align-content:flex-start;align-items:flex-start;gap:10px;flex-wrap:wrap;padding:13px;min-width:0}.tierRowEmpty{align-self:center;color:var(--entity-muted-soft);font-size:11px;padding:14px}
.tierItem{position:relative;width:76px;border:0;background:transparent;color:#fff;cursor:pointer;padding:0;text-align:center}.tierItem:hover .tierPerkDiamond,.tierItem:focus-visible .tierPerkDiamond,.tierItem:hover .tierAddonIcon,.tierItem:focus-visible .tierAddonIcon{transform:translateY(-3px);border-color:rgba(255,255,255,.31);box-shadow:0 11px 26px rgba(0,0,0,.44),0 0 22px rgba(255,49,95,.10)}.tierItem:focus-visible{outline:none}
.tierPerkDiamond{position:relative;width:66px;height:66px;margin:0 auto 6px;display:grid;place-items:center;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);background:linear-gradient(135deg,rgba(46,49,59,.97),rgba(12,13,18,.98));border:1px solid transparent;transition:.18s ease;overflow:hidden}.tierPerkDiamond:after{content:"";position:absolute;inset:3px;clip-path:inherit;border:1px solid rgba(255,255,255,.10)}.tierPerkDiamond img{width:70%;height:70%;object-fit:contain;filter:drop-shadow(0 2px 4px #000);position:relative;z-index:1}.tierItem.provisional .tierPerkDiamond:before,.tierItem.provisional .tierAddonIcon:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 8px,rgba(255,255,255,.035) 8px 10px);pointer-events:none}
.tierAddonIcon{position:relative;width:66px;height:66px;margin:0 auto 6px;display:grid;place-items:center;border:1px solid var(--entity-line);border-radius:17px;background:radial-gradient(circle at 35% 25%,rgba(255,49,95,.16),transparent 46%),rgba(17,19,25,.95);transition:.18s ease;overflow:hidden}.tierAddonIcon img{width:78%;height:78%;object-fit:contain}.tierAddonIcon span{font:900 24px var(--entity-serif);color:rgba(255,255,255,.82)}
.tierItemName{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:800;color:var(--entity-muted)}.tierItemVotes{display:block;margin-top:2px;font-size:8px;color:var(--entity-muted-soft)}.tierItemMyVote{position:absolute;top:-5px;right:0;min-width:21px;height:21px;padding:0 5px;border:2px solid #090a0e;border-radius:999px;display:grid;place-items:center;background:var(--entity-red);font-size:8px;font-weight:950;box-shadow:0 5px 13px rgba(0,0,0,.45)}
.tierExplainer{display:grid;grid-template-columns:minmax(260px,.65fr) 1fr;gap:35px;align-items:start;margin-top:20px;padding:26px 30px;border:1px solid var(--entity-line);border-radius:22px;background:rgba(10,11,16,.72)}.tierExplainer h2{margin:6px 0 0;font:800 25px var(--entity-serif)}.tierExplainer p{margin:0;color:var(--entity-muted);font-size:12px;line-height:1.75}
.tierModal{position:fixed;inset:0;z-index:30000;display:none;align-items:center;justify-content:center;padding:22px}.tierModal.open{display:flex}.tierModalBackdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.76);backdrop-filter:blur(9px)}.tierModalCard{position:relative;width:min(620px,100%);max-height:min(820px,calc(100vh - 44px));overflow:auto;padding:26px;border:1px solid rgba(255,255,255,.14);border-radius:26px;background:linear-gradient(160deg,rgba(18,20,27,.99),rgba(7,8,12,.99));box-shadow:0 35px 100px rgba(0,0,0,.78)}.tierModalClose{position:absolute;right:15px;top:13px;width:34px;height:34px;border:1px solid var(--entity-line);border-radius:50%;background:rgba(255,255,255,.04);color:#fff;font-size:21px;cursor:pointer}.tierModalTop{display:flex;align-items:center;gap:18px;padding-right:34px}.tierModalIcon{flex:0 0 auto}.tierModalIcon .tierPerkDiamond,.tierModalIcon .tierAddonIcon{width:88px;height:88px;margin:0}.tierModalHeading h2{margin:5px 0 8px;font:800 27px/1.08 var(--entity-serif)}.tierModalBadges{display:flex;gap:6px;flex-wrap:wrap}.tierBadge{display:inline-flex;align-items:center;min-height:24px;padding:4px 8px;border:1px solid rgba(255,49,95,.25);border-radius:999px;background:rgba(255,49,95,.10);font-size:9px;font-weight:900}.tierBadge.muted{border-color:var(--entity-line);background:rgba(255,255,255,.035);color:var(--entity-muted)}
.tierDescription{margin-top:20px;padding:17px;border:1px solid var(--entity-line);border-radius:16px;background:rgba(255,255,255,.025);color:var(--entity-muted);font-size:12px;line-height:1.7}.tierDescription strong{color:#fff}.tierDescription ul{margin:8px 0 0;padding-left:20px}
.tierDistributionWrap,.tierVoteArea{margin-top:20px}.tierModalSectionHead{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:10px}.tierModalSectionHead strong{font-size:12px}.tierModalSectionHead span{font-size:9px;color:var(--entity-muted-soft)}
.tierDistribution{display:grid;gap:7px}.tierDistRow{display:grid;grid-template-columns:22px 1fr 64px;gap:8px;align-items:center}.tierDistTier{font-weight:950;font-size:10px}.tierDistTrack{height:8px;border-radius:999px;background:rgba(255,255,255,.055);overflow:hidden}.tierDistFill{height:100%;min-width:0;border-radius:inherit;background:linear-gradient(90deg,rgba(255,49,95,.72),rgba(216,154,58,.72))}.tierDistValue{text-align:right;color:var(--entity-muted);font-size:9px}
.tierVoteButtons{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.tierVoteButtons button{height:48px;border:1px solid var(--entity-line);border-radius:12px;background:rgba(255,255,255,.035);color:#fff;font:950 18px var(--entity-serif);cursor:pointer;transition:.15s ease}.tierVoteButtons button:hover{transform:translateY(-2px);background:rgba(255,255,255,.07)}.tierVoteButtons button.selected{border-color:rgba(255,49,95,.55);background:rgba(255,49,95,.17);box-shadow:0 0 18px rgba(255,49,95,.10)}.tierVoteButtons button:disabled{opacity:.45;cursor:wait;transform:none}
.tierVoteLock{padding:14px;border:1px solid rgba(216,154,58,.24);border-radius:14px;background:rgba(216,154,58,.06)}.tierVoteLock strong,.tierVoteLock span{display:block}.tierVoteLock strong{font-size:11px}.tierVoteLock span{margin-top:3px;color:var(--entity-muted);font-size:10px}.tierVoteLock a{display:inline-block;margin-top:9px;color:#f2c470;font-size:10px;font-weight:850;text-decoration:none}
.tierToast{position:fixed;left:50%;bottom:24px;z-index:40000;transform:translate(-50%,18px);opacity:0;pointer-events:none;max-width:min(460px,calc(100% - 32px));padding:11px 14px;border:1px solid var(--entity-line);border-radius:14px;background:rgba(9,10,14,.97);box-shadow:0 18px 50px rgba(0,0,0,.55);font-size:11px;font-weight:800;transition:.18s ease}.tierToast.show{opacity:1;transform:translate(-50%,0)}
body.tierModalOpen{overflow:hidden}
@media(max-width:900px){.tierHero{grid-template-columns:1fr;padding:28px}.tierHeroRules{min-width:0}.tierExplainer{grid-template-columns:1fr;gap:14px}.tierSnapshotStatus{display:none!important}}
@media(max-width:680px){.tierPage{width:min(100% - 20px,1360px);padding-top:18px}.tierHero{padding:23px;border-radius:21px}.tierHeroRules{grid-template-columns:1fr 1fr 1fr}.tierHeroRules div{padding:12px 9px;text-align:center}.tierHeroRules strong{font-size:12px}.tierHeroRules span{font-size:7px}.tierIdentity{align-items:flex-start;flex-direction:column}.tierWorkspace{border-radius:20px}.tierToolbar{align-items:stretch}.tierPerkControls,.tierAddonControls{width:100%}.tierSubTabs{width:100%}.tierSubTab{flex:1}.tierField,.tierField.compact,.tierSearchField{min-width:0;flex:1 1 100%}.tierSnapshot{overflow:auto}.tierSnapshot>div{min-width:105px;padding:11px 13px}.tierRow{grid-template-columns:58px minmax(0,1fr);min-height:100px}.tierRowLabel strong{font-size:28px}.tierRow[data-tier="unranked"] .tierRowLabel strong{font-size:10px}.tierRowLabel small{display:none}.tierRowItems{gap:7px;padding:9px}.tierItem{width:59px}.tierPerkDiamond,.tierAddonIcon{width:52px;height:52px}.tierItemName{font-size:8px}.tierItemVotes{font-size:7px}.tierModal{padding:10px}.tierModalCard{padding:20px;border-radius:21px;max-height:calc(100vh - 20px)}.tierModalIcon .tierPerkDiamond,.tierModalIcon .tierAddonIcon{width:70px;height:70px}.tierModalHeading h2{font-size:22px}.tierVoteButtons{grid-template-columns:repeat(3,1fr)}.tierExplainer{padding:22px}}
@media(prefers-reduced-motion:reduce){.tierItem *,.tierVoteButtons button,.tierToast{transition:none!important}}

/* Community vote marker */
.tierVoteLegend{display:flex!important;align-items:center;gap:8px;min-width:auto!important}
.tierVoteLegendMark{display:grid!important;place-items:center;width:23px;height:23px;border-radius:50%;background:#d92d4e;color:#fff;font:900 10px var(--entity-sans);box-shadow:0 0 0 2px rgba(255,73,106,.14)}
.tierVoteLegend small{margin:0!important;white-space:nowrap}
.tierRowLabel{gap:0}


/* Perk presentation picker */
.tierAppearance{position:relative;align-self:end}
.tierAppearance summary{list-style:none;display:flex;align-items:center;justify-content:center;min-height:40px;padding:8px 12px;border:1px solid var(--entity-line);border-radius:12px;background:rgba(255,255,255,.025);color:var(--entity-text);font-size:10px;font-weight:900;cursor:pointer;white-space:nowrap}
.tierAppearance summary::-webkit-details-marker{display:none}
.tierAppearance[open] summary{background:rgba(255,49,95,.10);border-color:rgba(255,49,95,.22)}
.tierAppearancePanel{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:260px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(9,10,15,.98);box-shadow:0 18px 46px rgba(0,0,0,.52);display:grid;gap:11px}
.tierAppearanceGroup{display:grid;gap:6px}
.tierAppearanceGroup strong{font-size:10px}
.tierAppearanceToggle{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;border:1px solid rgba(255,255,255,.09);border-radius:11px;background:rgba(0,0,0,.22)}
.tierAppearanceToggle button{border:0;border-radius:8px;padding:8px 7px;background:transparent;color:var(--entity-muted);font:850 9px var(--entity-sans);cursor:pointer}
.tierAppearanceToggle button.active{background:rgba(211,33,69,.20);box-shadow:inset 0 0 0 1px rgba(255,62,96,.26);color:#fff}
.tierAppearanceProfile{font-size:9px;color:var(--entity-muted-soft);text-decoration:none}
.tierAppearanceProfile:hover{color:#fff}
@media(max-width:680px){.tierAppearance{width:100%}.tierAppearance summary{width:100%}.tierAppearancePanel{position:static;width:100%;margin-top:8px}}

/* Personal vote marker visibility */
.tierVoteVisibility{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 11px;border:1px solid var(--entity-line);border-radius:14px;background:rgba(255,255,255,.025);cursor:pointer;user-select:none}
.tierVoteVisibility small{font-size:9px;font-weight:850;color:var(--entity-muted);white-space:nowrap}
.tierVoteVisibility input{position:absolute;opacity:0;pointer-events:none}
.tierVoteSwitch{position:relative;width:34px;height:19px;margin-left:2px;border-radius:999px;background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);transition:.18s ease}
.tierVoteSwitch:after{content:"";position:absolute;top:3px;left:3px;width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.74);transition:.18s ease}
.tierVoteVisibility input:checked + .tierVoteSwitch{background:rgba(255,49,95,.28);box-shadow:inset 0 0 0 1px rgba(255,49,95,.42)}
.tierVoteVisibility input:checked + .tierVoteSwitch:after{left:18px;background:#fff}
.tierVoteVisibility:focus-within{outline:2px solid rgba(255,49,95,.35);outline-offset:2px}
@media(max-width:680px){.tierVoteVisibility{min-height:40px;padding:7px 9px}.tierVoteVisibility small{font-size:8px}}

.tierItem.deepLinkPulse{
  position:relative;
  z-index:2;
  animation:tierDeepLinkPulse 1.7s ease both;
}
@keyframes tierDeepLinkPulse{
  0%{box-shadow:0 0 0 0 rgba(255,74,97,0);transform:translateY(0)}
  18%{box-shadow:0 0 0 3px rgba(255,74,97,.52),0 0 34px rgba(255,49,95,.34);transform:translateY(-2px)}
  58%{box-shadow:0 0 0 3px rgba(255,74,97,.28),0 0 26px rgba(255,49,95,.22);transform:translateY(-1px)}
  100%{box-shadow:0 0 0 0 rgba(255,74,97,0);transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){
  .tierItem.deepLinkPulse{animation:none;box-shadow:0 0 0 3px rgba(255,74,97,.45)}
}
