body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', Arial, sans-serif;
    background: linear-gradient(135deg, #050007 72%, #e83e8c 100%);
    color: #FF69B4;
    transition: background 0.7s cubic-bezier(.68,-0.55,.27,1.55);
    overflow-x: hidden;
    position: relative;
}

/* Haunted body flicker */
@keyframes haunted-flicker {
    0%, 21%, 29%, 50%, 60%, 100% { opacity: 1; }
    20%, 22%, 30%, 59% { opacity: 0.7; }
}
body {
    animation: haunted-flicker 4.7s infinite alternate;
}

/* --- ANTI-FLICKER FOR NAV --- */
.navbar,
.navbar *,
.navbar *::before,
.navbar *::after {
    animation: none !important;
    opacity: 1 !important;
    transition: none !important;
}
/* ---------------------------------- */

h1, h2, h3 {
    color: #FF69B4;
    margin: 0;
    text-shadow: 0 0 7px #e83e8c88, 0 0 16px #111;
    letter-spacing: 0.04em;
}
h1 { font-size: 3em; margin-bottom: 0.1em; }
h2 { font-size: 2em; margin: 0.1em 0; }
h3 { font-size: 1.5em; margin: 0.1em 0; }

/* NAVBAR (hanameishi left, menu right) */
.navbar {
    width: 100vw;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0.7em 2.5em 0 2.8em;  /* <--- 0.7em top padding */
    min-height: 66px;
    background: rgba(0,0,0,0.96);
    position: fixed;
    top: 0; left: 0;
    z-index: 1100;
    box-shadow: none;
    border-bottom: none;
    box-sizing: border-box;
    overflow: visible;
}

.navbar-brand {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
}

.navbar-brand img {
    height: auto;
    width: auto;
    max-width: 100%;
    max-height: 200px;
    background: none !important;
    border: none !important;
    border-radius: 18px;         /* keep if you want rounded! */
    box-shadow: none !important; /* nuke any accidental shadows */
    outline: none !important;    /* murder browser outlines */
    transition: filter 0.2s, transform 0.22s;
    margin-bottom: -128px;
}


.navbar-nav {
    display: flex;
    flex-direction: row;
    gap: 1.2em;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: flex-end;
    flex-wrap: nowrap;
    flex-shrink: 1;
    min-width: 0;
}

.navbar-nav li {
    flex-shrink: 0;
    min-width: 0;
}

@media (max-width: 1000px) {
    .navbar {
        padding: 0 0.8em;
        height: auto;
    }
    .navbar-nav {
        gap: 0.7em;
    }
}

@media (max-width: 800px) {
    .navbar {
        flex-direction: column;
        align-items: center;
        min-height: 48px;
        gap: 0.4em;
        padding: 0 0.4em;
        justify-content: flex-start;
    }
    .navbar-brand img {
        height: 58px;
        margin-bottom: -16px;
    }
    .navbar-nav li {
        top: 6px;
    }
}

.nav-link, .vertical-menu {
    color: #FF69B4;
    font-size: 1.1em;
    letter-spacing: 0.10em;
    position: relative;
    transition: color 0.19s, text-shadow 0.2s, letter-spacing 0.1s, filter 0.1s;
    cursor: pointer;
    user-select: none;
    filter: blur(0px);
    text-decoration: none;
    background: none;
    border: none;
    outline: none;
    display: flex;
    align-items: center;
    padding: 0;
}

.vertical-menu:hover, .vertical-menu:focus {
    color: #fff;
    text-shadow: 0 0 5px #e83e8c, 0 0 16px #fff2;
    animation: vertical-jitter 0.4s;
    filter: blur(0.5px) brightness(1.08);
}

@keyframes vertical-jitter {
    12% { transform: translateY(-2px);}
    17% { transform: translateY(2.5px);}
    33% { transform: translateY(-4px);}
    55% { transform: translateY(1.5px);}
    70% { transform: translateY(0);}
}
.vertical-menu:active {
    filter: brightness(1.3) blur(1px);
}
.vertical-menu::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    opacity: 0;
    background: repeating-linear-gradient(90deg,#fff2,#fff2 1px,#fff0 2px 4px);
    mix-blend-mode: lighten;
    z-index: 2;
    transition: opacity 0.07s;
}
.vertical-menu.glitchy::after {
    opacity: 0.35;
    animation: menu-flicker 0.19s steps(3,end) 1;
}
@keyframes menu-flicker {
    0% { opacity: 0.15;}
    50% { opacity: 0.35;}
    100% { opacity: 0.09;}
}

.v-flex {
    display: inline-block;
    width: 3.5rem;
    height: auto;
    position: relative;
    vertical-align: top;
}
.v-flex .en {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(90deg);
    transform-origin: top left;
    font-size: 0.7rem;
    color: #666;
    white-space: nowrap;
    opacity: 0.7;
    filter: blur(0.1px);
    transition: opacity 0.13s;
}
.v-flex .jp {
    position: absolute;
    top: 0;
    font-size: 1.04rem;
    line-height: 1.2;
    writing-mode: vertical-rl;
    text-orientation: upright;
    white-space: nowrap;
    letter-spacing: 0.13em;
    filter: blur(0.01px);
}

/* Center main content, keep card centered */
.content-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.container-content {
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.container {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto 22px auto;
    border: 2.5px solid #e83e8c;
    border-radius: 22px;
    background: rgba(15, 0, 20, 0.97);
    padding: 36px 1.6em 1.2em 1.6em !important;
    backdrop-filter: blur(2px);
    box-shadow: 0 0 38px 7px #e83e8c55, 0 0 80px 10px #0a001788;
    transition: box-shadow 0.2s, border-color 0.3s, background 0.3s;
    animation: border-pulse 2.8s infinite cubic-bezier(.71,0,.15,1.13), haunted-flicker 5.8s infinite alternate;
    position: relative;
    overflow: hidden;
}
@keyframes border-pulse {
    0%   { border-color: #e83e8c; box-shadow: 0 0 50px 12px #e83e8c33, 0 0 100px 10px #0a001799; }
    13%  { border-color: #d1006f; box-shadow: 0 0 80px 25px #ff99d933, 0 0 120px 24px #1b002399; }
    33%  { border-color: #f5007f; box-shadow: 0 0 120px 32px #e83e8c66, 0 0 150px 19px #5e003366; }
    56%  { border-color: #e83e8c; box-shadow: 0 0 80px 25px #e83e8c77, 0 0 170px 14px #0a001799; }
    75%  { border-color: #ff69b4; box-shadow: 0 0 60px 18px #ff69b455, 0 0 110px 20px #e83e8c22; }
    100% { border-color: #e83e8c; box-shadow: 0 0 50px 12px #e83e8c33, 0 0 100px 10px #0a001799; }
}

/* Haunted underline for links */
a {
    color: #FF69B4;
    text-decoration: underline wavy #e83e8c88;
    font-size: 1.2em;
    transition: color 0.15s, text-shadow 0.14s;
    filter: none;
}
a:visited {
    color: #B56576;
}
a:hover {
    color: #fff;
    text-shadow: 0 0 7px #e83e8c, 0 0 10px #fff2;
    filter: blur(0.2px) brightness(1.13);
}

pre, textarea {
    color: #FFFAFA;
    background-color: #0a0017;
    white-space: pre-wrap;
    overflow-x: hidden;
    font-family: 'Fira Mono', 'Consolas', monospace;
    border-left: 2px solid #e83e8c44;
    box-shadow: 0 0 10px #e83e8c22;
    padding: 0.4em 0.8em;
}

.text-center img, .container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 0 18px #e83e8c44);
    transition: filter 0.24s;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

body::after {
    content: "";
    display: block;
    position: fixed;
    left: 85vw;
    top: 0;
    width: 7px;
    height: 80px;
    background: linear-gradient(to bottom, #e83e8c, #000 80%);
    opacity: 0.17;
    filter: blur(1px);
    z-index: 999;
    pointer-events: none;
    animation: drip 4.7s infinite;
}
@keyframes drip {
    0% { transform: translateY(-44px) scaleY(0.6);}
    19% { opacity: 0.3;}
    100% { transform: translateY(41vh) scaleY(1.18); opacity: 0;}
}

.list-group {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/* Haunted Kanji Micro-Glitch: Ghostly, not tacky */
.kanji-glitch.glitch {
    filter: blur(1.2px) brightness(2) contrast(2.4);
    color: #fff !important;
    text-shadow:
        0 0 12px #fff, 
        2px 0 #e83e8c99, 
        -2px 0 #fff, 
        0 1px #fff;
    opacity: 0.97;
    letter-spacing: 0.27em;
    transition: filter 0.14s, text-shadow 0.1s, color 0.07s, opacity 0.07s;
}

.kanji-glitch .ghost {
    position: absolute;
    left: 0; top: 0;
    pointer-events: none;
    color: #fff8;
    opacity: 0.52;
    filter: blur(2px) brightness(1.7) contrast(1.2);
    transform: translateX(-2px) scaleY(1.09) skewX(-4deg);
    z-index: 2;
    transition: opacity 0.12s, filter 0.13s, transform 0.15s;
    text-shadow: 0 0 14px #e83e8c55, 1px 0 2px #fff2;
    mix-blend-mode: lighten;
    font-family: inherit;
}
.kanji-glitch span {
    position: relative;
    display: inline-block;
    transition: 
        filter 0.14s cubic-bezier(.6,-0.2,.85,1.15), 
        color 0.17s cubic-bezier(.6,-0.2,.85,1.15), 
        letter-spacing 0.13s;
}
/* Main kanji glitch: quick blur, color flicker, slide */
.kanji-glitch span.glitch {
    filter: brightness(2.7) blur(1.4px) contrast(3) grayscale(0);
    color: #fff !important;
    letter-spacing: 0.28em;
    transform: translateY(-2px) scaleX(1.10) skewX(-3deg);
    text-shadow:
        0 0 14px #fff, 
        2px 0 #e83e8c, 
        -2px 0 #fff, 
        0 2px #fff;
}

/* Ghost overlay: slides, fades, glows, but pointer-events:none */
.kanji-glitch span.ghost {
    position: absolute;
    left: 0; top: 0;
    color: #fff8;
    opacity: 0.55;
    filter: blur(2.3px) brightness(1.9) contrast(1.2);
    transform: translateX(-2.7px) scaleY(1.14) skewX(-7deg);
    z-index: 2;
    pointer-events: none;
    text-shadow: 0 0 16px #e83e8c99, 1px 0 3px #fff7;
    mix-blend-mode: lighten;
    font-family: inherit;
    transition: opacity 0.13s, filter 0.14s, transform 0.15s;
    animation: ghost-kanji-slide 0.16s cubic-bezier(.6,-0.2,.85,1.15);
}
@keyframes ghost-kanji-slide {
    0% { opacity: 0.23; transform: translateX(-7px) scaleY(1.24) skewX(-14deg);}
    100% { opacity: 0.57; transform: translateX(-2.7px) scaleY(1.14) skewX(-7deg);}
}
.kanji-glitch .glitch {
    filter: brightness(1.1) blur(0.8px);
}