/* ba-tierlist.css - styling for Blue Archive Tier List page (copied from uma-tierlist.css) */
:root {
--bg: #101317;
--panel: #181d23;
--accent: #4fa3ff;
--accent-soft: #4fa3ff22;
--text: #f5f7fa;
--text-dim: #b3bcc7;
--border: #2a323b;
--radius-sm: 4px;
--radius: 8px;
--radius-lg: 14px;
--shadow: 0 4px 12px -2px rgba(0,0,0,.45);
--gap: 1rem;
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin:0; background: var(--bg); color: var(--text); line-height:1.5; }
/* Hide page scrollbar but keep scrolling */
html, body { height: 100%; overflow: hidden; }
/* Create inner scroll container that hides native scrollbar visually */
body::before { content:""; position:fixed; inset:0; overflow:hidden; pointer-events:none; }
/* Use a dedicated scroll wrapper */
.scroll-root { position:fixed; inset:0; overflow:auto; -ms-overflow-style:none; scrollbar-width:none; display:flex; flex-direction:column; min-height:100%; }
.scroll-root::-webkit-scrollbar { width:0; height:0; }
/* Ensure main grows to push footer to the bottom (sticky footer) */
.main { flex: 1 0 auto; }
a { color: var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.container { width: min(1100px, 100% - 2rem); margin-inline:auto; }
/* Navbar restyle to match anonymity.html */
.header { position:sticky; top:0; z-index:60; background:color-mix(in oklab, var(--bg) 92%, black 8%); border-bottom:1px solid var(--border); backdrop-filter:saturate(140%) blur(6px); transition:transform .25s ease, opacity .25s ease; }
/* Hidden state applied to for smooth fade/slide */
.nav-hidden .header { transform:translateY(-100%); opacity:0; }
.header .nav { display:flex; align-items:center; justify-content:space-between; padding:8px 0; }
.brand .link { font-size:1.05rem; font-weight:700; letter-spacing:.4px; color:var(--text); opacity:.9; text-decoration:none; }
.actions { display:flex; gap:10px; align-items:center; }
.actions .link { font-size:.85rem; font-weight:500; color:var(--text); opacity:.85; position:relative; padding:6px 10px; border-radius:4px; transition:color .2s ease, background .25s ease, transform .25s ease; text-decoration:none; }
.actions .link:hover, .actions .link:focus, .actions .link:visited { text-decoration:none; }
.actions .link:hover { background:#141a21; opacity:1; }
.actions .link:active { transform:translateY(1px); }
@media (max-width:640px){ .actions .link { font-size:.8rem; padding:6px 8px; } }
.hero { padding: 2.5rem 0 1.5rem; text-align:center; }
.title { margin:0; font-size:clamp(1.8rem,4.5vw,2.6rem); font-weight:700; }
.slogan { margin:.5rem 0 0; color: var(--text-dim); }
.tierlist-section { padding: 1rem 0 3rem; }
/* Responsive banner: maintains aspect ratio while covering */
.tier-banner { width:100%; aspect-ratio: 16 / 4.5; max-height:240px; margin:.75rem 0 1.25rem; border-radius: var(--radius); background:#0f141a center/cover no-repeat; border:1px solid var(--border); box-shadow: var(--shadow); overflow:hidden; position:relative; }
.tier-banner::after { content:""; position:absolute; inset:0; background:linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,.15)); pointer-events:none; }
/* Set your banner image here or inline on the element:
Example: background-image:url('./ba/banner.jpg'); */
.controls-row { display:flex; justify-content:center; margin-bottom:1rem; }
.pagination { display:flex; gap:.75rem; align-items:center; }
.page-indicator { font-size:.85rem; color: var(--text-dim); }
.btn { background: var(--panel); color: var(--text); border:1px solid var(--border); padding:.55rem .9rem; font-size:.8rem; font-weight:500; border-radius:var(--radius-sm); cursor:pointer; transition:.2s background, .2s border-color; }
.btn:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.table-wrapper { background: var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow: var(--shadow); overflow:hidden; }
.tierlist-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.tierlist-table thead { background:#20262d; }
.tierlist-table th, .tierlist-table td { padding:.65rem .75rem; text-align:left; }
.tierlist-table th { font-weight:600; font-size:.75rem; letter-spacing:.05em; color: var(--text-dim); }
.tierlist-table tbody tr { border-top:1px solid var(--border); }
.tierlist-table tbody tr:first-child { border-top:none; }
.tierlist-table tbody tr { transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease; cursor:pointer; }
.tierlist-table tbody tr:hover { background:#1f252c; transform:scale(1.012); box-shadow:0 4px 18px -4px rgba(0,0,0,.55); }
.rank-badge { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; background:#262e37; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:.75rem; font-weight:600; }
.uma-cell { display:flex; align-items:center; gap:.75rem; position:relative; overflow:visible; }
.uma-avatar { width:48px; height:48px; background:#2a333d; border:1px solid var(--border); border-radius:var(--radius-sm); position:relative; flex-shrink:0;
transition: transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease; transform-origin:center bottom;
aspect-ratio: 1 / 1; object-fit: cover; }
/* Prevent stretching: when an ![]()
has class .uma-avatar we crop to square */
.uma-avatar::after { content:""; position:absolute; inset:0; outline:2px dashed #3a4652; outline-offset:-4px; opacity:.35; }
/* When real images are added, REMOVE pseudo-element above and set ![]()
. */
/* Hover/press zoom like macOS dock */
.uma-avatar:hover,
.uma-avatar:focus,
.uma-avatar:active,
.uma-avatar.zoom { transform: scale(1.9); opacity:1; z-index:5; box-shadow: 0 12px 28px -6px rgba(0,0,0,.65), 0 0 0 1px var(--border) inset; }
@media (prefers-reduced-motion: reduce){
.uma-avatar { transition: none; }
}
.uma-name { font-weight:500; }
.note-dim { color: var(--text-dim); font-style:italic; }
/* Trend arrows */
.trend-cell { font-size:.8rem; font-weight:600; }
.trend-icon { display:inline-block; min-width:1.1em; text-align:center; }
.trend-up { color:#28d666; text-shadow:0 0 6px #28d666, 0 0 14px #0e7737; }
.trend-down { color:#ff4040; text-shadow:0 0 6px #ff4040, 0 0 14px #a30000; }
.trend-flat { color: var(--text-dim); }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.footer { padding:1.5rem 0; background:#0d1013; border-top:1px solid #121518; margin-top:2rem; }
.footer .row { display:flex; flex-wrap:wrap; gap:.75rem; font-size:.65rem; color: var(--text-dim); }
/* Modal Backdrop & Panel */
.uma-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:2rem 1rem; opacity:0; pointer-events:none; transition:opacity 180ms ease; z-index:50; }
.uma-modal-backdrop.open { opacity:1; pointer-events:auto; }
.uma-modal { width:min(780px, 100% - 1rem); background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 18px 48px -12px rgba(0,0,0,.7); display:flex; gap:1.25rem; padding:1.5rem 1.75rem; position:relative; opacity:0; transform:translateY(12px); transition:opacity 200ms ease, transform 200ms ease; }
.uma-modal-backdrop.open .uma-modal { opacity:1; transform:translateY(0); }
.uma-modal figure { margin:0; }
.uma-modal .modal-avatar-wrapper { flex:0 0 180px; position:relative; }
.uma-modal .modal-avatar { width:100%; aspect-ratio: 1 / 1; object-fit:cover; border-radius:var(--radius-sm); border:1px solid var(--border); box-shadow:0 4px 16px -6px rgba(0,0,0,.6); }
.uma-modal .modal-content { flex:1; display:flex; flex-direction:column; gap:.75rem; }
.uma-modal h2 { margin:0; font-size:1.3rem; }
.uma-modal .stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.6rem; }
.uma-modal .stat { background:#20262d; padding:.6rem .7rem; border-radius:var(--radius-sm); font-size:.7rem; display:flex; flex-direction:column; gap:.25rem; border:1px solid #1f242a; }
.uma-modal .stat strong { font-size:.65rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }
.uma-modal .close-btn { position:absolute; top:.65rem; right:.65rem; background:#262e37; color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.4rem .65rem; font-size:.75rem; cursor:pointer; transition:background 120ms ease; }
.uma-modal .close-btn:hover { background:#313c46; }
.no-scroll { overflow:hidden; }
@media (max-width:680px){
.uma-modal { flex-direction:column; padding:1.25rem 1.1rem; }
.uma-modal .modal-avatar-wrapper { flex:0 0 auto; width:160px; margin-inline:auto; }
.uma-modal h2 { text-align:center; }
}
@media (prefers-color-scheme: light){
.uma-modal { background:#ffffff; }
.uma-modal .stat { background:#f4f7fa; border-color:#e0e5ea; }
.uma-modal .close-btn { background:#eef2f6; }
.uma-modal .close-btn:hover { background:#dde3ea; }
}
@media (max-width:680px){
.uma-avatar { width:40px; height:40px; }
.rank-badge { width:1.7rem; height:1.7rem; }
.tierlist-table th, .tierlist-table td { padding:.55rem .55rem; }
}
/* ===== Appear animations ===== */
.reveal-seed { opacity:0; transform: translateY(-10px); }
.reveal-on { animation: revealFade 420ms ease forwards; }
.reveal-delay-1 { animation-delay: 60ms; }
.reveal-delay-2 { animation-delay: 120ms; }
.reveal-delay-3 { animation-delay: 180ms; }
.reveal-delay-4 { animation-delay: 240ms; }
.reveal-delay-5 { animation-delay: 300ms; }
.reveal-delay-6 { animation-delay: 360ms; }
.reveal-delay-7 { animation-delay: 420ms; }
.reveal-delay-8 { animation-delay: 480ms; }
.reveal-delay-9 { animation-delay: 540ms; }
@keyframes revealFade {
from { opacity:0; transform: translateY(-10px); }
to { opacity:1; transform: translateY(0); }
}
@media (prefers-color-scheme: light){
:root { --bg:#f5f7fa; --panel:#ffffff; --text:#1d242b; --text-dim:#5b6976; --border:#dde3ea; --accent:#0066d6; --accent-soft:#0066d614; }
.uma-avatar { background:#eef2f6; border-color:#d5dce3; }
.tierlist-table tbody tr:hover { background:#f0f5fa; }
.rank-badge { background:#eef2f6; }
}