/* ==========================
   FONTS
========================== */

@font-face {
  font-family: "CaviarDreams";
  src: url("font/CaviarDreams.ttf");
}

@font-face {
  font-family: "RainyHearts";
  src: url("font/rainyhearts.ttf");
}

@font-face {
  font-family: "junipy";
  src: url("font/junipy.ttf");
}

@font-face {
  font-family: "PixelOperator";
  src: url("font/PixelOperator.ttf");
}

@font-face {
  font-family: "VCR";
  src: url("font/VCR.ttf");
}

@font-face {
  font-family: "Melodrame";
  src: url("font/Relationship of mélodrame.ttf") format("truetype");
}

/* ==========================
   TEXT SELECTION
========================== */

::selection{
    background:#8ACE00;
    color:#000000;
}

::-moz-selection{
    background:#8ACE00;
    color:#000000;
}

/* ==========================
   BODY
========================== */

body{
    margin:0;
    overflow:hidden;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background:#05060a;
    font-family:"RainyHearts", serif;
}

/* ==========================
   VIDEO
========================== */

.bg-video{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter: brightness(0.6) contrast(1.1) saturate(0.9);
    z-index:-4;
}

.video-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:-3;
}

/* ==========================
   CRT
========================== */

.crt{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9999;
}

.crt::before{
    content:"";
    position:fixed;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,0) 50%,
            rgba(0,0,0,0.18) 50%
        ),
        linear-gradient(
            180deg,
            rgba(255,0,0,0.05),
            rgba(0,255,0,0.02),
            rgba(0,0,255,0.05)
        );
    background-size:
        2px 100%,
        100% 3px;
    opacity:.60;
    mix-blend-mode:screen;
    pointer-events:none;
}

.crt::after{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(18,16,16,0.08);
    opacity:0;
    pointer-events:none;
    animation:flicker .16s infinite;
}

@keyframes flicker{
    0%   { opacity: 0.12; }
    5%   { opacity: 0.18; }
    10%  { opacity: 0.09; }
    15%  { opacity: 0.22; }
    20%  { opacity: 0.11; }
    25%  { opacity: 0.16; }
    30%  { opacity: 0.08; }
    35%  { opacity: 0.19; }
    40%  { opacity: 0.13; }
    45%  { opacity: 0.05; }
    50%  { opacity: 0.17; }
    55%  { opacity: 0.09; }
    60%  { opacity: 0.21; }
    65%  { opacity: 0.14; }
    70%  { opacity: 0.07; }
    75%  { opacity: 0.16; }
    80%  { opacity: 0.11; }
    85%  { opacity: 0.20; }
    90%  { opacity: 0.09; }
    95%  { opacity: 0.15; }
    100% { opacity: 0.12; }
}

/* ==========================
   RAIN (canvas drawn, see script)
========================== */

.rain-canvas{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:9998;
}

/* ==========================
   WRAPPER
========================== */

.wrapper{
    position:relative;
    width:940px;
    height:620px;
}

/* ==========================
   LEFT CARD
========================== */

.left-card{
    position:absolute;
    left:20px;
    top:20px;
    width:215px;
    height:285px;
    background: rgba(255,255,255,0.06);
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
}

.left-img{
    height:145px;
}

.left-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.left-content{
    padding:14px;
}
.tag-title{
    display:inline-block;

    padding:4px 12px;

    border-radius:999px;

    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:
        0 2px 6px rgba(0,0,0,.35);

    font-family:"Melodrame", serif;

    font-size:34px;
    font-weight: 600;
-webkit-text-stroke: 0.25px rgba(255,255,255,.15);
    letter-spacing:1.8px;
    line-height:1.1;

    filter:blur(0.4px);

background: linear-gradient(
    120deg,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.88) 40%,
    rgba(180,180,180,0.35) 85%,
    rgba(120,120,120,0.65) 100%
);

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    text-shadow:
        0 1px 10px rgba(255,255,255,0.08),
        0 2px 25px rgba(0,0,0,0.35);

    margin-bottom:8px;
}

.find-links{
    margin-top:8px;
    line-height:1.7;
    color:rgba(255,255,255,.65);
    font-size:17px;
    font-family:"junipy", serif;
}
.find-link{
    color:inherit;
    text-decoration:none;
    transition:.2s;
}

.find-link:hover{
    color:rgba(255,255,255,.95);
    text-decoration:underline;
}

/* ==========================
   BUTTONS
========================== */

.nav{
    position:absolute;
    left:25px;
    top:325px;
    display:flex;
    flex-direction:column;
}
.nav button{
    width:185px;
    height:54px;
    margin-top:-2px;

    border-radius:999px;

    background:rgba(20,20,22,0.55);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.12);

    font-family:"CaviarDreams";
    font-size:24px;
    color:#e6e6e6;

    cursor:pointer;

    box-shadow:
        0 4px 15px rgba(0,0,0,.4);

    transition:.15s;
}
.nav button:hover{
    transform:translateX(6px);

    background:rgba(35,35,38,0.7);

    letter-spacing:1px;

    box-shadow:
        0 6px 20px rgba(0,0,0,.5);
}

/* ==========================
   HOME LINK
========================== */

.home-link{
    position:absolute;
    right:0;
    top:580px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 22px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family:"CaviarDreams";
    font-size:17px;
    color:rgba(255,255,255,.85);
    text-decoration:none;
    box-shadow: 0 3px 10px rgba(0,0,0,.4);
    transition:.2s;
}

.home-link:hover{
    transform:translateY(-3px);
    background:rgba(255,255,255,0.1);
}

/* ==========================
   RIGHT CARD
========================== */

.right-card{
    position:absolute;
    right:0;
    top:10px;
    width:640px;
    height:560px;
    border-radius:24px;
    overflow:visible;
    box-shadow: 0 8px 20px rgba(0,0,0,.5);
}

.right-img{
    position:absolute;
    inset:0;
    border-radius:24px;
    overflow:hidden;
}

.right-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* ==========================
   CORNER
========================== */

.corner{
    position:absolute;
    right:12px;
    top:8px;
    color:rgba(255,255,255,.4);
    font-size:26px;
    z-index:10;
    text-shadow: 0 0 8px rgba(255,255,255,.3);
}

/* ==========================
   GLASS PANEL
========================== */

.content-panel{
    position:absolute;
    left: 20px;
    top: 30px;
    bottom: 30px;
    width: 310px;
    padding: 16px 18px;
    box-sizing: border-box;
    border-radius: 18px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 18px 34px rgba(0,0,0,.45);
    display: flex;
    flex-direction: column;
    overflow: visible;
    animation: float 4s ease-in-out infinite;
    z-index: 5;
}

@keyframes float{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-9px); }
}

/* ==========================
   TITLE
========================== */
.about-title{
    display:flex;
    align-items:center;
    justify-content:center;

    width:185px;
    height:40px;

    border-radius:999px;

    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    box-shadow:
        0 2px 6px rgba(0,0,0,.35);

    font-family:"Melodrame", serif;

    font-size:34px;
    font-weight: 600;
-webkit-text-stroke: 0.25px rgba(255,255,255,.15);
    letter-spacing:1.8px;
    line-height:1.1;

    filter:blur(0.4px);

background: linear-gradient(
    120deg,
    rgba(255,255,255,0.97) 0%,
    rgba(255,255,255,0.88) 40%,
    rgba(180,180,180,0.35) 85%,
    rgba(120,120,120,0.65) 100%
);

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    text-shadow:
        0 1px 10px rgba(255,255,255,0.08),
        0 2px 25px rgba(0,0,0,0.35);

    margin-bottom:12px;
}
/* ==========================
   TABS
========================== */

.tab{
    display: none;
    animation: fade .25s;
}

.tab.active{
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 6px;
}

.tab.active::-webkit-scrollbar{
    width: 4px;
}

.tab.active::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.25);
    border-radius: 999px;
}

/* ==========================
   KIN TAB — 2×3 grid
========================== */

#kin.active{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 12px;
    overflow: hidden;
    padding: 0;
}

/* ==========================
   YUME TAB
========================== */

#yume.active{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    padding: 0;
}

@keyframes fade{
    from{ opacity: 0; }
    to{ opacity: 1; }
}

/* ==========================
   TEXT
========================== */

.tab{
    font-family: "junipy", serif;
    font-size: 18px;
    color: rgba(255,255,255,.75);
    line-height: 1.5;
}

b{
    color: rgba(255,255,255,.92);
}

.pink-label{
    color: rgba(255,255,255,.85);
    font-family: "CaviarDreams";
    font-size: 20px;
}

/* ==========================
   IMAGE FILTER (site aesthetic)
========================== */

.left-img img,
.right-img img,
.scroll-item img,
.yume-icon-wrap img,
.cd-cover{
filter:
    brightness(.72)
    contrast(1.12)
    saturate(.65);
}

/* ==========================
   STICKERS (kin grid)
========================== */

.scroll-item{
    position: relative;
    flex: none;
    overflow: visible;
}

.scroll-item img{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.3),
        0 4px 10px rgba(0,0,0,.4);
    transition: .2s;
    display: block;
}

.scroll-item:hover img{
    transform: translateY(-4px);
}

/* ==========================
   YUME — arrows
========================== */

.yume-arrow{
    flex: none;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: #2b2b2b;
    border-top: 2px solid #4a4a4a;
    border-left: 2px solid #4a4a4a;
    border-right: 2px solid #141414;
    border-bottom: 2px solid #141414;
    font-family: "CaviarDreams";
    font-size: 18px;
    color: #e6e6e6;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,.4);
    transition: .12s;
    flex-shrink: 0;
}

.yume-arrow:hover{
    background: #3a3a3a;
    border-top: 2px solid #141414;
    border-left: 2px solid #141414;
    border-right: 2px solid #5a5a5a;
    border-bottom: 2px solid #5a5a5a;
    transform: scale(1.08);
}

/* YUME CARD — no background blur, fills remaining space */

.yume-card{
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 14px;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow-y: auto;
}

.yume-card::-webkit-scrollbar{
    width: 4px;
}

.yume-card::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.3);
    border-radius: 999px;
}

.yume-icon-wrap{
    flex: none;
    margin-bottom: 10px;
    margin-top: 4px;
}

.yume-icon-wrap img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.25);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.3),
        0 4px 10px rgba(0,0,0,.4);
}

.yume-name{
    flex: none;
    font-family: "CaviarDreams";
    font-size: 18px;
    color: rgba(255,255,255,.85);
    margin-bottom: 10px;
    letter-spacing: .02em;
}

.yume-bio{
    font-family: "junipy", serif;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255,255,255,.75);
    text-align: left;
    width: 100%;
}

/* ==========================
   HOVER TOOLTIP
========================== */

.hover-tip{
    position: fixed;
    transform: translate(-50%, -100%);
    background: rgba(10,10,14,.9);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    padding: 4px 10px;
    white-space: nowrap;
    font-family: "junipy", serif;
    font-size: 14px;
    color: rgba(255,255,255,.8);
    box-shadow: 0 4px 8px rgba(0,0,0,.4);
    opacity: 0;
    pointer-events: none;
    transition: .15s;
    z-index: 999999;
}

.hover-tip.visible{
    opacity: 1;
}

/* ==========================
   HIDE TITLE ON YUME TAB
========================== */

.content-panel.yume-active .about-title{
    display: none;
}

/* ==========================
   CHAT / QA STYLE (home tab)
========================== */

.chat-wrap{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

.chat-q{
    align-self: flex-start;
    max-width: 88%;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 16px 16px 16px 4px;
    padding: 8px 12px;
    font-family: "junipy", serif;
    font-size: 15px;
    color: rgba(255,255,255,.85);
    line-height: 1.45;
    position: relative;
}

.chat-q::before{
    content: "> ";
    opacity: .6;
    font-size: 13px;
}

.chat-a{
    align-self: flex-end;
    max-width: 88%;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px 16px 4px 16px;
    padding: 8px 12px;
    font-family: "junipy", serif;
    font-size: 15px;
    color: rgba(255,255,255,.75);
    line-height: 1.45;
}

/* ==========================
   FAYE WEBSTER PLAYER
========================== */

.player-container{
    position: fixed;
    top: 25px;
    left: 25px;
    z-index: 99999;
    font-family: "junipy", serif;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
}

.player-top{
    display: flex;
    align-items: center;
}

.cd-cover{
    width:150px;
    height:150px;

    background:
        linear-gradient(
            rgba(0,0,0,.18),
            rgba(0,0,0,.18)
        ),
        url("https://i.postimg.cc/v8PQFDQN/image.png")
        center/cover;
    border-radius:10px;

    filter:
        brightness(.88)
        contrast(1.05)
        saturate(.8);
}

.controls{
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.controls button{
    width: 40px;
    height: 40px;
    margin-bottom: 10px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 8px;
    cursor: pointer;
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.85);
    font-size: 18px;
    transition: .2s;
}

.controls button:hover{
    background: rgba(255,255,255,.1);
}

.song-title{
    width: 150px;
    margin-top: 10px;
    text-align: center;
    color: rgba(255,255,255,.75);
    font-size: 14px;
    font-family: "RainyHearts", serif;
}

/* ==========================
   SPARKLE CSS (cursor trail)
========================== */

.sparkle{
    position: fixed;
    color: white;
    font-size: 12px;
    pointer-events: none;
    z-index: 999999;
    animation: sparkleFade .8s ease-out forwards;
    text-shadow:
        0 0 5px white,
        0 0 10px white;
}

@keyframes sparkleFade{
    from{
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to{
        opacity: 0;
        transform: translate(-50%, -70%) scale(0);
    }
}