:root{--tier-gold:#efcea1;--tier-ink:#171722;--tier-line:#a49abb36}
.web .shell>main[data-page=tiers]{max-width:2020px}
.tier-intro{
  display:flex;flex-direction:column;justify-content:center;min-height:155px;padding:23px clamp(18px,3vw,38px);margin-bottom:14px;
  border:1px solid #c3a58242;border-radius:14px;background:linear-gradient(90deg,#12121cb5,transparent 65%),#131420 url('art/tier-star-chart.webp') center 47%/cover no-repeat;
}
.tier-intro .eyebrow{color:var(--tier-gold);letter-spacing:.13em}
.tier-intro h1{font:400 clamp(52px,6.5vw,95px)/.92 'Instrument Serif',Georgia,serif;color:#faead7;letter-spacing:-.024em;margin:10px 0 0}
.tier-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.tier-modes button{
  position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:end;min-height:clamp(76px,8.5vw,126px);
  padding:12px clamp(10px,1.6vw,22px);text-align:left;line-height:1.06;
  color:#f9eee5;font:400 clamp(19px,2.65vw,38px)/1.05 'Instrument Serif',Georgia,serif;
  border:1px solid var(--tier-line);border-radius:9px;background:#191722;
}
.tier-modes button::before,.tier-modes button::after{content:'';position:absolute;inset:0;pointer-events:none}
.tier-modes button::before{z-index:-2;background:url('art/tier-mode-art.webp') var(--tier-mode-position,0%) 54%/300% auto no-repeat}
.tier-modes button::after{z-index:-1;background:linear-gradient(90deg,#0d0d17db,#0e0c1688 50%,#0e0c1620)}
.tier-modes [data-tier=pf]{--tier-mode-position:50%}
.tier-modes [data-tier=as]{--tier-mode-position:100%}
.tier-modes button[aria-pressed=true]{border-color:var(--tier-gold);box-shadow:0 0 14px #f4bc7a32;color:#fff6e8}
.tier-modes button:hover{border-color:#eacdae}
.tier-controls{padding:9px 11px;border:1px solid var(--tier-line);border-radius:10px;background:#171722;margin-bottom:12px}
.tier-controls .tier-filters{display:grid;grid-template-columns:2.25fr repeat(3,minmax(0,1fr)) auto;gap:7px;margin:0}
.tier-controls .tier-filters :is(button,input,select){min-height:37px;padding:6px 9px;font-size:13px}
.tier-controls-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px 14px;margin-top:8px;color:#c9bfce;font-size:12px}
.tier-controls-footer>p{margin:0 auto 0 0}
.tier-controls .tier-toggle{display:flex;align-items:center;gap:5px;margin:0;color:#e6d4c4}
.tier-controls .tier-toggle input{accent-color:var(--tier-gold)}
.tier-controls .tier-method{margin:0;padding:0;color:var(--tier-gold)}
.tier-controls .tier-method[open]{flex-basis:100%;border-top:1px solid var(--tier-line);padding:8px 0}
.tier-controls .tier-method p{margin:6px 0;color:#cbc4d5}
#tierBoard .tier-scroll{border:0;border-radius:0;scrollbar-width:thin}
.tier-matrix{min-width:760px}
#tierBoard .tier-row{grid-template-columns:62px repeat(4,minmax(0,1fr));min-width:0;background:none;border-color:#e5c9ed22}
#tierBoard .tier-head{margin-left:105px;border:1px solid var(--tier-line);border-radius:10px 10px 0 0;background:#242333;color:#ecd9c5}
#tierBoard .tier-head span{padding:0 4px}
.tier-band{
  display:grid;grid-template-columns:105px minmax(0,1fr);margin-bottom:7px;overflow:hidden;
  border:1px solid var(--band-line);border-radius:10px;
  background:linear-gradient(100deg,var(--band-background),#1b1a27 39%,#191923 100%);
}
.tier-band.band-op{--band:#f1cf9e;--band-line:#d7ae7d6b;--band-background:#4c303b;--band-fill:#8b5660}
.tier-band.band-meta{--band:#dbc5f9;--band-line:#9e85c063;--band-background:#302542;--band-fill:#5b4378}
.tier-band.band-off{--band:#b5dedb;--band-line:#729fa263;--band-background:#22394b;--band-fill:#386872}
.tier-band h2{
  margin:0;display:grid;place-items:center;padding:7px 3px;text-align:center;line-height:.95;
  font:400 clamp(25px,3vw,44px)/.95 'Instrument Serif',Georgia,serif;color:var(--band);
  border-right:1px solid var(--band-line);
  background:linear-gradient(145deg,var(--band-fill),var(--band-background) 54%,#211e2c);
}
#tierBoard .rank-label{background:#17162245;color:var(--band);font:400 27px 'Instrument Serif',Georgia,serif}
#tierBoard .tier-cell{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));align-items:start;align-content:start;
  min-height:0;padding:8px;gap:6px;border-left-color:#e5c9ed1f;
}
.tier-unit{position:relative;min-width:0}
:is(#tierBoard,.character-directory) .unit-card{
  display:flex;flex-direction:column;width:100%;padding:0;overflow:hidden;text-align:center;
  border:1px solid #cdc2d329;border-radius:6px;background:#201f2a;min-height:100%;
}
:is(#tierBoard,.character-directory) .unit-card:hover,.tier-preview-anchor .unit-card{border-color:var(--tier-gold)}
:is(#tierBoard,.character-directory) .unit-portrait{overflow:hidden;aspect-ratio:1;background:#262635}
:is(#tierBoard,.character-directory) .unit-portrait img{width:100%;height:100%;object-fit:cover;border:0;border-radius:0;display:block}
.unit-caption{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px;min-height:34px}
:is(#tierBoard,.character-directory) .unit-caption .unit-name{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  width:100%;margin:0;color:#fbf1ed;font-size:10px;line-height:1.18;white-space:normal;text-overflow:clip;
}
:is(#tierBoard,.character-directory) .unit-caption small{font-size:9px;color:#deccb7;line-height:1}
#tierBoard .new-badge,#tierBoard .movement{top:3px;font-size:9px;pointer-events:none}
#tierBoard .movement{font-size:12px}
#tierBoard .unit-caption{min-height:39px;padding:4px}
#tierBoard .unit-caption .unit-name{font-size:12px}
#tierBoard .unit-caption small{font-size:11px}
@media(min-width:1250px){
  #tierBoard .tier-cell{grid-template-columns:repeat(auto-fill,minmax(clamp(86px,6.7vw,128px),1fr));gap:8px}
  #tierBoard .tier-head span{font-size:16px}
}
.tier-unit-info{
  position:absolute;right:3px;bottom:3px;min-height:23px;min-width:23px;border-radius:50%;
  padding:0;background:#171722;border:1px solid #e5c99b85;color:#f0d4b0;font-size:13px;
  display:none;
}
@media(pointer:coarse){.tier-unit-info{display:block}.unit-caption{padding-right:24px}}
.tier-preview{
  position:fixed;z-index:40;width:min(278px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;
  color:#f8edf5;background:linear-gradient(155deg,#2a2432,#191822 57%);border:1px solid #e6c194b3;border-radius:10px;
  box-shadow:0 14px 48px #050508c2;transform-origin:top left;
}
.tier-preview[hidden]{display:none}
.tier-preview-art{display:block;height:128px;overflow:hidden;background:#252333}
.tier-preview-art .avatar{display:block;width:100%;height:100%;object-fit:cover;object-position:center 39%;border:0;border-radius:0}
.tier-preview-dismiss{
  position:absolute;top:7px;right:7px;z-index:1;min-height:29px;width:29px;padding:0;
  background:#121119e8;color:#fff5e8;border-color:#dec9b182;border-radius:6px;font-size:17px;
}
.tier-preview-body{padding:10px 12px 12px}
.tier-preview-body h2{font:400 31px/1 'Instrument Serif',Georgia,serif;letter-spacing:0;margin:0}
.tier-preview-body p{margin:4px 0 8px;color:#d6c7d8;font-size:12px}
.tier-preview-role+ .tier-preview-role{margin-top:6px}
.tier-preview-role>strong{font-size:11px;color:#e6d7e2}
.tier-preview-ratings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:3px 0}
.tier-preview-ratings div{display:grid;text-align:center;border:1px solid var(--tier-line);border-radius:5px;padding:3px;background:#13131d}
.tier-preview-ratings .current{border-color:#e1bc8e75;background:#342a36}
.tier-preview-ratings small{color:#c8bfd3;font-size:10px;white-space:nowrap}
.tier-preview-ratings b{color:#f3d4a9;font-size:15px}
.tier-preview-tags{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0}
.tier-preview-tags span{background:#2a3340;border-radius:10px;padding:2px 6px;color:#e1ebf4;font-size:10px}
.tier-preview-link{display:block;color:#f2d2a7;margin-top:5px;font-weight:650;font-size:12px}
.tier-preview-link:hover{text-decoration:underline}
.tier-opening-board{display:none}
.tier-opening .opening-hero{min-height:155px}
.tier-opening .opening-grid{margin-top:14px}
.tier-opening .opening-grid .skeleton{height:106px}
.tier-opening .tier-opening-board{display:block;height:180px;border-radius:10px;margin-top:15px}
@media(prefers-reduced-motion:no-preference){
  .tier-intro,.tier-modes,.tier-controls,#tierBoard{animation:tier-section-in .43s cubic-bezier(.2,.65,.32,1) both}
  .tier-modes{animation-delay:75ms}.tier-controls{animation-delay:140ms}#tierBoard{animation-delay:200ms}
  .tier-reveal:not(.tier-arrived) .tier-unit{opacity:0}
  .tier-arrived .tier-unit{animation:tier-card-in .26s ease-out calc(230ms + var(--tier-delay,0ms)) both}
  .tier-arrived .tier-unit:focus-within{animation:none}
}
@keyframes tier-section-in{from{opacity:.1;transform:translateY(-7px)}to{opacity:1;transform:none}}
@keyframes tier-card-in{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}
@media(max-width:760px){
  .tier-controls .tier-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tier-filters input{grid-column:1/3;grid-row:1}.tier-filters button{grid-column:3;grid-row:1}
  .tier-controls-footer{justify-content:flex-start}.tier-controls-footer>p{width:100%}
  .tier-band{grid-template-columns:77px minmax(0,1fr)}
  #tierBoard .tier-head{margin-left:77px}
  .tier-opening .opening-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .tier-opening .opening-grid .skeleton{height:78px}
}
.character-directory{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;
}
.directory-unit{position:relative;min-width:0}
.directory-unit[hidden]{display:none}
.character-directory .unit-card{height:100%;transition:border-color .2s ease,box-shadow .2s ease}
.character-directory .unit-card:is(:hover,:focus-visible){box-shadow:0 0 14px #e7b98328}
.character-directory .unit-caption{flex:1;min-height:43px;padding:4px 3px}
.character-directory .unit-caption .unit-name{font-size:11px}
.character-directory .unit-caption small{font-size:9px;line-height:1.2;text-align:center}
@media(prefers-reduced-motion:no-preference){
  .directory-reveal .directory-unit:not(.directory-arrived){opacity:0}
  .directory-reveal .directory-arrived{animation:tier-card-in .3s ease-out var(--tier-delay,0ms) both}
  .directory-reveal .directory-unit:focus-within{opacity:1;animation:none}
}
@media(max-width:550px){.character-directory{grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:8px}}