:root {
  --tier-elite:#ec3150;
  --tier-trip:#6f65ff;
  --tier-solid:#24b875;
  --tier-depends:#e1a12a;
  --tier-work:#d56a4b;
  --tier-unranked:#667085;
}

.tier-list-page {
  min-height:100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(15,91,255,.18), transparent 32rem),
    radial-gradient(circle at 84% 8%, rgba(227,38,61,.14), transparent 34rem),
    #05070b;
}

.tier-list-hero { padding:3.8rem 0 2rem; }
.tier-list-hero-inner { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; }
.tier-list-title { font-family:var(--font-display); font-size:clamp(3.7rem,8vw,7rem); line-height:.9; letter-spacing:.045em; text-transform:uppercase; }
.tier-list-intro { max-width:760px; color:var(--muted); font-size:1.08rem; margin-top:1rem; }
.tier-privacy-note { flex:0 0 min(360px,100%); display:flex; gap:.8rem; align-items:flex-start; border:1px solid rgba(255,255,255,.12); background:rgba(10,15,24,.82); border-radius:16px; padding:1rem 1.1rem; box-shadow:0 18px 48px rgba(0,0,0,.25); }
.tier-privacy-note strong,.tier-privacy-note span { display:block; }
.tier-privacy-note strong { color:#fff; font-size:.92rem; }
.tier-privacy-note span { color:#aeb9cf; font-size:.82rem; margin-top:.18rem; }
.tier-privacy-dot { width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:#31d27c; box-shadow:0 0 0 5px rgba(49,210,124,.12); margin-top:.35rem; }

.tier-list-tools-section { position:sticky; top:78px; z-index:30; padding:.65rem 0 1rem; background:linear-gradient(180deg,rgba(5,7,11,.96),rgba(5,7,11,.88) 78%,transparent); backdrop-filter:blur(12px); }
.tier-list-tools { display:grid; grid-template-columns:minmax(240px,1.4fr) minmax(180px,.6fr) 130px auto; gap:.75rem; padding:1rem; border:1px solid rgba(255,255,255,.11); border-radius:18px; background:rgba(14,20,32,.92); box-shadow:0 20px 60px rgba(0,0,0,.25); }
.tier-tool { display:grid; gap:.38rem; min-width:0; }
.tier-tool > span,.tier-tool-summary > span { color:#aeb9cf; font-family:var(--font-mono); font-size:.69rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; }
.tier-tool input,.tier-tool select { width:100%; min-height:46px; color:#fff; background:#0a101b; border:1px solid rgba(255,255,255,.13); border-radius:11px; padding:.72rem .85rem; outline:none; }
.tier-tool input:focus,.tier-tool select:focus { border-color:rgba(105,97,255,.85); box-shadow:0 0 0 3px rgba(105,97,255,.13); }
.tier-tool select { color-scheme:dark; }
.tier-tool-summary { display:grid; align-content:center; justify-items:center; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.025); border-radius:12px; min-height:68px; }
.tier-tool-summary strong { font-family:var(--font-display); font-size:2rem; line-height:1; letter-spacing:.05em; margin-top:.2rem; }
.tier-tool-actions { display:flex; align-items:flex-end; justify-content:flex-end; gap:.55rem; }
.tier-tool-actions .btn { min-height:46px; padding:.72rem .9rem; font-size:.78rem; white-space:nowrap; }
.tier-filter-status { color:#aeb9cf; font-size:.8rem; min-height:1.4rem; margin:.5rem .2rem 0; }

.tier-board-section { padding:1rem 0 5rem; }
.tier-board-help { display:flex; flex-wrap:wrap; gap:.55rem 1.25rem; color:#aeb9cf; font-size:.82rem; margin:0 0 1rem; }
.tier-board-help strong { color:#eaf0ff; }
.tier-board { display:grid; gap:.8rem; }
.tier-row { --tier-accent:#667085; display:grid; grid-template-columns:190px minmax(0,1fr); min-height:152px; border:1px solid rgba(255,255,255,.11); border-radius:18px; overflow:hidden; background:rgba(13,18,29,.88); box-shadow:0 16px 50px rgba(0,0,0,.22); }
.tier-row.is-drag-over { border-color:color-mix(in srgb, var(--tier-accent) 68%, white); box-shadow:0 0 0 2px color-mix(in srgb, var(--tier-accent) 34%, transparent),0 20px 60px rgba(0,0,0,.28); }
.tier-label { position:relative; padding:1.15rem; display:flex; flex-direction:column; justify-content:space-between; gap:.9rem; background:linear-gradient(155deg,color-mix(in srgb,var(--tier-accent) 26%,#101827),#0b101b 72%); border-right:1px solid rgba(255,255,255,.09); }
.tier-label:before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--tier-accent); box-shadow:0 0 24px color-mix(in srgb,var(--tier-accent) 60%,transparent); }
.tier-label h2 { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.045em; font-size:1.85rem; line-height:.95; }
.tier-label p { color:#b9c2d5; font-size:.76rem; line-height:1.4; }
.tier-label-count { width:max-content; padding:.28rem .52rem; border:1px solid rgba(255,255,255,.1); border-radius:999px; background:rgba(0,0,0,.24); font-family:var(--font-mono); font-size:.68rem; color:#dce4f6; }
.tier-dropzone { min-width:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); align-content:start; gap:.65rem; padding:.75rem; transition:background .15s ease; }
.tier-row.is-drag-over .tier-dropzone { background:color-mix(in srgb,var(--tier-accent) 7%,transparent); }
.tier-empty { grid-column:1/-1; min-height:122px; display:grid; place-items:center; border:1px dashed rgba(255,255,255,.12); border-radius:13px; color:#7f8aa0; font-size:.82rem; text-align:center; padding:1rem; }

.venue-card { position:relative; overflow:hidden; min-width:0; border:1px solid rgba(255,255,255,.1); border-radius:13px; background:#0b111c; cursor:grab; user-select:none; transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,opacity .15s ease; }
.venue-card:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.23); box-shadow:0 15px 34px rgba(0,0,0,.3); }
.venue-card:focus-within { border-color:rgba(106,98,255,.78); box-shadow:0 0 0 3px rgba(106,98,255,.12); }
.venue-card.is-dragging { opacity:.35; cursor:grabbing; transform:scale(.98); }
.venue-card.is-drop-target { border-color:var(--tier-accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--tier-accent) 32%,transparent); }
.venue-image-wrap { position:relative; aspect-ratio:16/8.4; overflow:hidden; background:linear-gradient(135deg,#11192a,#0b1019); }
.venue-image { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.venue-setting { position:absolute; top:.5rem; right:.5rem; padding:.27rem .46rem; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(5,7,11,.78); backdrop-filter:blur(7px); color:#f5f7ff; font-family:var(--font-mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; }
.venue-card-body { padding:.72rem .75rem .75rem; display:grid; gap:.35rem; }
.venue-card h3 { font-size:.88rem; line-height:1.24; font-weight:800; min-height:2.2em; }
.venue-location { color:#9facc4; font-size:.73rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.venue-move { margin-top:.25rem; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.45rem; }
.venue-move span { color:#8490a6; font-family:var(--font-mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.07em; }
.venue-move select { width:100%; min-width:0; background:#111827; color:#dce4f5; border:1px solid rgba(255,255,255,.1); border-radius:8px; padding:.4rem .45rem; font-size:.69rem; outline:none; color-scheme:dark; }
.venue-move select:focus { border-color:rgba(105,97,255,.82); }
.venue-card.is-filtered-out { display:none; }

.tier-row[data-tier-id="elite"] { --tier-accent:var(--tier-elite); }
.tier-row[data-tier-id="worth-the-trip"] { --tier-accent:var(--tier-trip); }
.tier-row[data-tier-id="solid"] { --tier-accent:var(--tier-solid); }
.tier-row[data-tier-id="depends"] { --tier-accent:var(--tier-depends); }
.tier-row[data-tier-id="needs-work"] { --tier-accent:var(--tier-work); }
.tier-row[data-tier-id="not-raced-yet"] { --tier-accent:var(--tier-unranked); }

.tier-exporting { cursor:progress !important; }
.tier-exporting * { cursor:progress !important; }

@media (max-width:1100px) {
  .tier-list-tools { grid-template-columns:1fr 200px 120px; }
  .tier-tool-actions { grid-column:1/-1; justify-content:flex-start; }
  .tier-row { grid-template-columns:165px minmax(0,1fr); }
  .tier-dropzone { grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); }
}

@media (max-width:780px) {
  .tier-list-hero { padding:2.7rem 0 1.2rem; }
  .tier-list-hero-inner { display:grid; gap:1.25rem; }
  .tier-privacy-note { width:100%; }
  /* Mobile controls must scroll with the page. Keeping the full filter panel
     sticky consumes too much of the small viewport and can obscure the board. */
  .tier-list-tools-section { position:static; top:auto; z-index:auto; padding-top:.45rem; backdrop-filter:none; }
  .tier-list-tools { grid-template-columns:1fr 1fr; gap:.6rem; padding:.75rem; }
  .tier-tool-search,.tier-tool-actions { grid-column:1/-1; }
  .tier-tool-summary { min-height:64px; }
  .tier-tool-actions { display:grid; grid-template-columns:1fr 1fr; }
  .tier-tool-actions .btn { width:100%; }
  .tier-board-help { display:grid; gap:.35rem; }
  .tier-row { grid-template-columns:1fr; }
  .tier-label { border-right:0; border-bottom:1px solid rgba(255,255,255,.09); padding:.85rem 1rem; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
  .tier-label h2 { font-size:1.55rem; }
  .tier-label p { grid-column:1/-1; }
  .tier-label-count { grid-column:2; grid-row:1; }
  .tier-dropzone { grid-template-columns:repeat(2,minmax(0,1fr)); padding:.6rem; }
  .venue-card { cursor:default; }
  .venue-card h3 { font-size:.8rem; }
  .venue-location { font-size:.68rem; }
  .venue-move { grid-template-columns:1fr; gap:.25rem; }
  .venue-move select { font-size:.72rem; min-height:40px; }
}

@media (max-width:480px) {
  .tier-list-title { font-size:3.35rem; }
  .tier-list-tools { grid-template-columns:1fr; }
  .tier-tool-search,.tier-tool-actions { grid-column:auto; }
  .tier-tool-summary { justify-items:start; padding:.7rem .85rem; }
  .tier-tool-actions { grid-template-columns:1fr; }
  .tier-dropzone { grid-template-columns:1fr 1fr; gap:.5rem; }
  .venue-card-body { padding:.58rem; }
}

@media (prefers-reduced-motion:reduce) {
  .venue-card,.tier-dropzone { transition:none; }
}