@font-face {
    font-family: 'Birmingham Signature';
    src: url('https://cdn.jsdelivr.net/gh/IntenseParijat/cdn@bf6860aaceea2763804b9e3f81f209c46d4e40ee/fonts/Birmingham%20Signature.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Dodger Cond Ital';
    src: url('https://cdn.jsdelivr.net/gh/IntenseParijat/cdn@77de507368b0c6917c4dfccf9a622f3b4a3dab20/fonts/dodger3condital.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

:root{
    --surface:rgba(0,0,0,.68);
    --surface-strong:rgba(0,0,0,.82);
    --text:white;
    --shadow:0 10px 35px rgba(0,0,0,.55);
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    background:#1a1a1a;
    color:var(--text);
    font-family:Arial,sans-serif;
}

body.is-loading{
    overflow:hidden;
}

.loader{
    position:fixed;
    inset:0;
    --loader-progress:0%;
    z-index:1000;
    display:grid;
    place-items:center;
    min-height:100vh;
    padding:24px;
    background:
        radial-gradient(circle at 50% 30%, rgba(116,72,255,.22), transparent 34%),
        radial-gradient(circle at 20% 80%, rgba(22,113,255,.16), transparent 28%),
        #1a1a1a;
    opacity:1;
    visibility:visible;
    transition:opacity .5s ease, visibility .5s ease;
}

.loader-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.loader-content{
    width:min(320px, 100%);
    padding:32px 28px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:24px;
    background:var(--surface);
    box-shadow:var(--shadow);
    text-align:center;
    backdrop-filter:blur(14px);
}

.loader-title{
    font-family:'Dodger Cond Ital', sans-serif;
    font-size:3rem;
    line-height:1;
    margin-bottom:12px;
    letter-spacing:.04em;
}

.loader-percent{
    font-size:1.6rem;
    font-weight:700;
    letter-spacing:.08em;
}

.loader-bar{
    width:100%;
    height:8px;
    margin-top:18px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.14);
}

.loader-bar span{
    display:block;
    width:var(--loader-progress);
    min-width:10%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, #6aa6ff, #a678ff, #53dc8c);
    transition:width .2s ease;
    animation:loader-shimmer 1.2s ease-in-out infinite;
}

h1{
    font-family: 'Birmingham Signature', cursive;
    font-size: 4rem;
    text-align: center;
    margin: 30px 0;
    font-weight: normal;
    padding:20px;
}

#wall{
    column-count:6;
    column-gap:12px;
    padding:12px;
}

.anime-card{
    position:relative;
    display:block;
    width:100%;
    margin-bottom:10px;
    break-inside:avoid;
    border-radius:12px;
    overflow:hidden;
    color:inherit;
    text-decoration:none;
    box-shadow:0 0 0 rgba(0,0,0,0);
    transition:transform .25s ease, box-shadow .25s ease;
}

.anime-card:hover,
.anime-card:focus-visible{
    transform:scale(1.03);
    box-shadow:var(--shadow);
    outline:none;
}

.poster{
    display:block;
    width:100%;
    border-radius:12px;
    opacity:0;
    transition:opacity .4s ease;
}

.poster.loaded{
    opacity:1;
}

.status-badge,
.rating-badge{
    position:absolute;
    z-index:2;
    max-width:calc(100% - 16px);
    padding:6px 9px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    color:white;
    font-size:.72rem;
    font-weight:700;
    line-height:1;
    letter-spacing:.01em;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
    box-shadow:0 4px 14px rgba(0,0,0,.35);
    backdrop-filter:blur(8px);
    transition:transform .25s ease, background-color .25s ease;
}

.status-badge{
    top:8px;
    left:8px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.rating-badge{
    right:8px;
    bottom:8px;
    background:var(--surface-strong);
}

.anime-card:hover .status-badge,
.anime-card:hover .rating-badge,
.anime-card:focus-visible .status-badge,
.anime-card:focus-visible .rating-badge{
    transform:translateY(-1px);
}

.status-watching{
    background:rgba(37,99,235,.86);
}

.status-finished{
    background:rgba(22,163,74,.86);
}

.status-dropped{
    background:rgba(220,38,38,.86);
}

.status-on-hold{
    background:rgba(217,119,6,.88);
}

.status-plan-to-watch{
    background:rgba(126,34,206,.88);
}

.error-message{
    margin:48px auto;
    max-width:520px;
    padding:24px;
    border-radius:18px;
    background:var(--surface);
    text-align:center;
}

.footer-links img {
    margin: 4px;
    transition: transform .2s ease;
}

.footer-links img:hover {
    transform: translateY(-2px);
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.footer-links a {
    display: inline-block;
    line-height: 0;
    text-decoration: none;
}

.copyright-footer {
    margin: 80px auto 20px;
    text-align: center;
    width: 100%;
}

.footer-copyright {
    margin-top: 12px;
    color: rgba(255,255,255,.6);
    font-family: Arial, sans-serif;
    font-size: 13px;
    letter-spacing: 0.5px;
}

@keyframes loader-shimmer{
    0%, 100%{transform:translateX(-35%) scaleX(.3);}
    50%{transform:translateX(35%) scaleX(.7);}
}

@media(max-width:1200px){
    #wall{column-count:6;}
}

@media(max-width:800px){
    #wall{column-count:4;}
}

@media(max-width:500px){
    h1{font-size:3.2rem;}
    #wall{column-count:2;}
    .status-badge,
    .rating-badge{
        padding:5px 7px;
        font-size:.64rem;
    }
}