/* ════════════════════════════════════════
   SEBAS EN BUSCA DE CHAMBA — ANIME EDITION
   ════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --flame:   #ff6a00;
    --gold:    #ffd700;
    --souls:   #c8a96e;
    --pink:    #ff69b4;
    --hot:     #ff1493;
    --cyan:    #00d4ff;
    --purple:  #b066ff;
    --green:   #00e676;
    --light:   #e8e0d0;
    --dark:    #0a0a0f;
    --darker:  #060608;
}

body {
    font-family: 'Fredoka', sans-serif;
    background: var(--darker);
    color: var(--light);
    overflow-x: hidden;
}

/* ══════════════════════════════
   SCROLL PROGRESS BAR
══════════════════════════════ */
.scroll-progress {
    position: fixed; top: 0; left: 0;
    height: 3px; width: 0%;
    background: linear-gradient(90deg, var(--flame), var(--gold), var(--pink), var(--purple), var(--cyan));
    background-size: 200% auto;
    z-index: 9998;
    box-shadow: 0 0 10px var(--pink), 0 0 4px var(--gold);
    animation: textShimmer 3s linear infinite;
    transition: width .1s linear;
}

/* ══════════════════════════════
   BACK TO TOP (bonfire)
══════════════════════════════ */
.back-to-top {
    position: fixed; bottom: 1.5rem; right: 1.5rem;
    z-index: 9000;
    width: 52px; height: 52px;
    border: 1px solid rgba(255,106,0,.5);
    border-radius: 50%;
    background: rgba(10,8,0,.85);
    backdrop-filter: blur(6px);
    font-size: 1.5rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(20px) scale(.8);
    transition: all .35s cubic-bezier(.2,.8,.3,1.2);
    box-shadow: 0 0 18px rgba(255,106,0,.25);
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.back-to-top:hover {
    border-color: var(--gold);
    box-shadow: 0 0 28px rgba(255,106,0,.5);
    transform: translateY(-4px) scale(1.08);
}
.back-to-top:active { transform: scale(.95); }

/* ══════════════════════════════
   SAKURA
══════════════════════════════ */
.sakura-container {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 1; overflow: hidden;
}
.petal {
    position: absolute; top: -40px;
    font-size: 1.2rem; opacity: 0.6;
    animation: petalFall linear infinite;
    user-select: none; filter: drop-shadow(0 0 4px #ff69b4);
}
@keyframes petalFall {
    0%   { transform: translateY(0) rotate(0deg) translateX(0);   opacity: 0.6; }
    100% { transform: translateY(110vh) rotate(720deg) translateX(60px); opacity: 0; }
}

/* ══════════════════════════════
   PARTICLES CANVAS
══════════════════════════════ */
.particles {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none; z-index: 0;
}

/* ══════════════════════════════
   FLOATING DECO (sides)
══════════════════════════════ */
.float-deco {
    position: fixed; pointer-events: none; z-index: 2;
    font-size: 1.4rem; animation: floatDeco 6s ease-in-out infinite;
    text-shadow: 0 0 10px currentColor;
}
.deco1 { top: 15%; left:  1.5%; color: #ff69b4; opacity: .35; animation-delay: 0s;   }
.deco2 { top: 38%; left:  1.5%; color: #ff1493; opacity: .30; animation-delay: 1.2s; }
.deco3 { top: 65%; left:  2%;   color: #ffd700; opacity: .30; animation-delay: 2.4s; }
.deco4 { top: 22%; right: 1.5%; color: #ff69b4; opacity: .35; animation-delay: 0.6s; }
.deco5 { top: 55%; right: 1.5%; color: #b066ff; opacity: .30; animation-delay: 1.8s; }
@keyframes floatDeco {
    0%,100% { transform: translateY(0)    rotate(0deg);  }
    50%      { transform: translateY(-18px) rotate(12deg); }
}

/* ══════════════════════════════
   YOU DIED
══════════════════════════════ */
.you-died {
    display: none;
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.94);
    flex-direction: column; align-items: center; justify-content: center;
    z-index: 9999;
}
.you-died.show { display: flex; }
.you-died span {
    font-family: 'Cinzel', serif;
    font-size: clamp(3rem, 10vw, 7rem);
    color: #b22222;
    text-shadow: 0 0 40px #b22222, 0 0 100px #ff000055;
    letter-spacing: .1em;
    animation: youDiedIn .5s ease-out;
}
.you-died small { color: var(--souls); font-size: 1.2rem; margin-top: 1rem; }
@keyframes youDiedIn { from { opacity:0; transform:scale(1.4); } to { opacity:1; transform:scale(1); } }

/* ══════════════════════════════
   SECTION DIVIDER
══════════════════════════════ */
.divider {
    text-align: center;
    padding: 1.5rem 0;
    position: relative;
    overflow: hidden;
}
.divider::before, .divider::after {
    content: '';
    position: absolute;
    top: 50%; width: 30%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pink));
    animation: dividerShimmer 3s ease-in-out infinite;
}
.divider::before { left: 5%; }
.divider::after  { right: 5%; transform: scaleX(-1); }
.divider-inner {
    display: inline-flex; align-items: center; gap: .8rem;
    font-size: 1.1rem; color: var(--pink);
    text-shadow: 0 0 10px var(--pink);
    animation: dividerPulse 2s ease-in-out infinite;
}
@keyframes dividerShimmer { 0%,100%{opacity:.4} 50%{opacity:1} }
@keyframes dividerPulse   { 0%,100%{opacity:.7;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }

/* ══════════════════════════════
   NAVBAR
══════════════════════════════ */
.navbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(6,6,8,0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid transparent;
    padding: .9rem 0;
    /* animated gradient border bottom */
    box-shadow: 0 1px 0 0 #ff69b444, 0 2px 20px rgba(255,105,180,.08);
}
.nav-content {
    max-width: 1200px; margin: 0 auto; padding: 0 2rem;
    display: flex; justify-content: space-between; align-items: center;
}
.logo {
    font-family: 'Cinzel', serif; font-size: 1.3rem;
    color: var(--gold); text-shadow: 0 0 12px rgba(255,215,0,.5);
}
.logo-jp {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: .85rem; color: var(--pink);
    text-shadow: 0 0 8px var(--pink);
}
.nav-links { display: flex; gap: 1.8rem; }
.nav-links a {
    color: var(--souls); text-decoration: none;
    font-weight: 600; font-size: .95rem; transition: all .3s;
    position: relative; padding-bottom: 2px;
}
.nav-links a::after {
    content: '';
    position: absolute; bottom: -2px; left: 0; width: 0; height: 2px;
    background: linear-gradient(90deg, var(--pink), var(--purple));
    transition: width .3s ease;
    box-shadow: 0 0 6px var(--pink);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { width: 100%; }

/* ══════════════════════════════
   HERO
══════════════════════════════ */
.hero {
    min-height: 100vh;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 2rem;
    position: relative; overflow: hidden;
}
.ember-bg {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse at 15% 50%, rgba(255,20,147,.08) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 20%, rgba(255,106,0,.07)  0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(176,102,255,.06) 0%, transparent 50%),
        #060608;
    animation: bgBreath 8s ease-in-out infinite;
}
@keyframes bgBreath { 0%,100%{opacity:.8} 50%{opacity:1} }

/* hero dot-grid overlay */
.hero::before {
    content: '';
    position: absolute; inset: 0; z-index: 0;
    background-image: radial-gradient(rgba(255,105,180,.12) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.hero-deco-tl, .hero-deco-tr {
    position: absolute; top: 2rem;
    font-family: monospace; color: var(--pink); opacity: .35; font-size: 1rem;
    animation: floatDeco 5s ease-in-out infinite;
    text-shadow: 0 0 8px var(--pink);
}
.hero-deco-tl { left:  2rem; }
.hero-deco-tr { right: 2rem; animation-delay: 1s; }

.hero-content { position: relative; z-index: 1; }

.jp-title {
    font-family: 'Noto Sans JP', sans-serif;
    color: var(--pink); font-size: .9rem;
    letter-spacing: .3em; margin-bottom: .6rem;
    opacity: .75; animation: fadeUp 1s ease-out both;
    text-shadow: 0 0 12px var(--pink);
}
.pre-title {
    color: var(--pink); font-size: 1.05rem;
    letter-spacing: .12em; margin-bottom: 1rem;
    text-shadow: 0 0 10px var(--pink);
    animation: fadeUp 1s .1s ease-out both;
}
.praise {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.2rem, 3.2vw, 2.6rem);
    background: linear-gradient(90deg, var(--flame), var(--gold), var(--hot), var(--gold), var(--flame));
    background-size: 200% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    display: block;
    animation: textShimmer 3s linear infinite, fadeUp 1s .2s ease-out both;
}
@keyframes textShimmer { to { background-position: 200% center; } }

.name {
    font-family: 'Cinzel', serif;
    font-size: clamp(4rem, 11vw, 7rem);
    color: #fff; letter-spacing: .05em;
    text-shadow:
        0 0 20px rgba(255,255,255,.25),
        0 0 60px rgba(255,105,180,.2),
        0 0 100px rgba(176,102,255,.1);
    animation: fadeUp 1s .3s ease-out both;
    position: relative; display: inline-block;
}
.name::after {
    content: 'せばす';
    position: absolute; bottom: -1.2rem; left: 50%; transform: translateX(-50%);
    font-family: 'Noto Sans JP', sans-serif;
    font-size: .9rem; color: var(--pink);
    opacity: .6; letter-spacing: .3em; white-space: nowrap;
    text-shadow: 0 0 8px var(--pink);
}

.tagline {
    color: var(--souls); font-size: 1rem;
    margin: 2.5rem 0 1.2rem;
    animation: fadeUp 1s .4s ease-out both;
}
.hero-badges {
    display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap;
    animation: fadeUp 1s .5s ease-out both;
}
.hbadge {
    background: rgba(255,105,180,.08);
    border: 1px solid var(--pink);
    color: #fff; padding: .35rem 1rem;
    border-radius: 20px; font-size: .85rem; font-weight: 600;
    box-shadow: 0 0 10px rgba(255,105,180,.2), inset 0 0 10px rgba(255,105,180,.05);
    transition: all .3s;
}
.hbadge:hover { background: rgba(255,105,180,.18); box-shadow: 0 0 20px rgba(255,105,180,.4); }

.kaomoji-row {
    display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;
    margin-top: 1.2rem; font-size: 1rem; color: var(--pink);
    animation: fadeUp 1s .6s ease-out both;
}
.kaomoji-row span {
    opacity: .65; transition: all .3s; cursor: default;
    text-shadow: 0 0 6px var(--pink);
}
.kaomoji-row span:hover { opacity: 1; transform: scale(1.3) rotate(-3deg); }

.scroll-hint {
    position: absolute; bottom: 2rem;
    color: var(--souls); font-size: .78rem; letter-spacing: .1em;
    animation: bob 2s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* ══════════════════════════════
   SPEECH BUBBLE
══════════════════════════════ */
.speech-intro {
    padding: 3rem 2rem;
    background: linear-gradient(180deg, #07000e 0%, #0d0010 100%);
    position: relative; overflow: hidden;
}
/* mesh background */
.speech-intro::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,105,180,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,105,180,.04) 1px, transparent 1px);
    background-size: 30px 30px;
}
.speech-wrap {
    max-width: 820px; margin: 0 auto;
    display: flex; gap: 2rem; align-items: flex-start;
    position: relative; z-index: 1;
}
.chibi-avatar {
    font-size: 4rem; flex-shrink: 0;
    animation: bob 2s ease-in-out infinite;
    filter: drop-shadow(0 0 14px rgba(255,105,180,.7));
}
.speech-bubble {
    background: rgba(255,105,180,.05);
    border: 2px solid rgba(255,105,180,.5);
    border-radius: 0 20px 20px 20px;
    padding: 1.5rem 1.8rem;
    position: relative;
    box-shadow: 0 0 30px rgba(255,105,180,.08), inset 0 0 30px rgba(255,20,147,.03);
}
.speech-bubble::before {
    content: '';
    position: absolute; top: 0; left: -15px;
    border: 8px solid transparent;
    border-right-color: rgba(255,105,180,.5);
}
/* sparkle corner decoration */
.speech-bubble::after {
    content: '✨';
    position: absolute; top: -12px; right: -8px;
    font-size: 1.2rem;
    animation: sparkleFloat 2s ease-in-out infinite;
}
.bubble-name {
    font-family: 'Cinzel', serif; color: var(--pink); font-size: .78rem;
    letter-spacing: .12em; margin-bottom: .8rem;
    text-shadow: 0 0 8px var(--pink);
}
.speech-bubble p { color: var(--light); font-size: 1rem; line-height: 1.75; margin-bottom: .8rem; }
.bubble-aside {
    color: var(--souls) !important; font-size: .88rem !important;
    font-style: italic; border-top: 1px solid rgba(255,105,180,.15);
    padding-top: .6rem; margin-top: .4rem;
}

/* ══════════════════════════════
   SECTION TITLE STYLE
══════════════════════════════ */
.anime-title {
    font-family: 'Cinzel', serif;
    text-align: center; position: relative;
    display: inline-block; left: 50%; transform: translateX(-50%);
    padding-bottom: .6rem; margin-bottom: .5rem;
}
.anime-title::after {
    content: '';
    position: absolute; bottom: 0; left: 10%; width: 80%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--pink), var(--purple), var(--cyan), transparent);
    background-size: 200% auto;
    animation: textShimmer 2.5s linear infinite;
    box-shadow: 0 0 8px var(--pink);
}

/* ══════════════════════════════
   ABOUT + CHARACTER SHEET
══════════════════════════════ */
.about {
    padding: 5rem 2rem;
    background: linear-gradient(180deg, #0d0010 0%, #0d0700 100%);
    position: relative; overflow: hidden;
}
/* diagonal lines texture */
.about::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(
        -45deg,
        transparent, transparent 30px,
        rgba(255,106,0,.015) 30px, rgba(255,106,0,.015) 31px
    );
}
.about-container {
    max-width: 1100px; margin: 0 auto; position: relative; z-index: 1;
    display: grid; grid-template-columns: auto 1fr; gap: 4rem; align-items: start;
}
.photo-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.bonfire-glow {
    position: absolute; bottom: -20px; width: 200px; height: 60px;
    background: radial-gradient(ellipse, rgba(255,106,0,.4), transparent 70%);
    filter: blur(20px);
    animation: flicker 1.5s ease-in-out infinite alternate;
}
@keyframes flicker { from{opacity:.5;transform:scaleX(.9)} to{opacity:1;transform:scaleX(1.1)} }

.photo-frame { position: relative; width: 270px; }
.photo-frame::before {
    content: '';
    position: absolute; inset: -3px;
    background: linear-gradient(45deg, var(--pink), var(--gold), var(--purple), var(--cyan), var(--pink));
    background-size: 300% 300%;
    border-radius: 16px; z-index: 0;
    animation: gradientSpin 4s linear infinite;
}
@keyframes gradientSpin { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.profile-photo {
    position: relative; z-index: 1;
    width: 100%; height: auto;          /* mantiene proporción real, sin recorte */
    display: block; border-radius: 14px;
}
.photo-corner {
    position: absolute; z-index: 2; font-size: .65rem;
    color: var(--gold); opacity: .6; font-family: monospace;
}
.tl{top:7px;left:7px} .tr{top:7px;right:7px}
.bl{bottom:7px;left:7px} .br{bottom:7px;right:7px}
.photo-tag {
    position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%);
    z-index: 3; background: rgba(0,0,0,.92);
    border: 1px solid var(--gold); color: var(--gold);
    font-family: 'Cinzel', serif; font-size: .62rem;
    letter-spacing: .15em; padding: .3rem .9rem; border-radius: 6px; white-space: nowrap;
    text-shadow: 0 0 6px var(--gold);
    box-shadow: 0 0 12px rgba(0,0,0,.6);
}
.photo-sparkles { position: absolute; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; }
.ps { position: absolute; font-size: 1.2rem; animation: sparkleFloat 3s ease-in-out infinite; }
.ps1{top:-10px;right:-10px;animation-delay:0s}
.ps2{top:40%;left:-15px;animation-delay:.7s}
.ps3{bottom:40px;right:-15px;animation-delay:1.4s}
.ps4{top:10%;right:-20px;animation-delay:2s}
@keyframes sparkleFloat { 0%,100%{transform:translateY(0) scale(1);opacity:.8} 50%{transform:translateY(-12px) scale(1.3);opacity:1} }

/* CHARACTER SHEET */
.char-sheet {
    background: rgba(255,105,180,.03);
    border: 1px solid rgba(255,105,180,.2);
    border-radius: 16px; padding: 2rem; position: relative;
    box-shadow: 0 0 40px rgba(255,105,180,.04), inset 0 0 40px rgba(255,20,147,.02);
}
/* corner sparkles */
.char-sheet::before { content:'✦'; position:absolute; top:-10px; left:20px; color:var(--pink); font-size:1.2rem; text-shadow:0 0 8px var(--pink); background:var(--darker); padding:0 4px; }
.char-sheet::after  { content:'✦'; position:absolute; top:-10px; right:20px; color:var(--purple); font-size:1.2rem; text-shadow:0 0 8px var(--purple); background:var(--darker); padding:0 4px; }

.char-sheet-header { margin-bottom: 1.5rem; }
.cs-jp { display:block; font-family:'Noto Sans JP',sans-serif; font-size:.72rem; color:var(--pink); letter-spacing:.25em; margin-bottom:.3rem; opacity:.7; }
.char-sheet-header h2 {
    font-family:'Cinzel',serif; font-size:1.8rem; color:var(--gold);
    text-shadow: 0 0 12px rgba(255,215,0,.3);
}
.cs-row {
    display:flex; justify-content:space-between;
    padding:.55rem .5rem; border-bottom:1px solid rgba(255,255,255,.05);
    font-size:.9rem; transition: background .2s;
}
.cs-row:hover { background: rgba(255,105,180,.04); }
.cs-key { color:var(--souls); font-size:.82rem; font-family:'Noto Sans JP',sans-serif; }
.cs-val { color:var(--light); font-weight:600; }
.cs-green   { color:var(--green); text-shadow:0 0 6px var(--green); }
.cs-nocturno{ color:#a78bfa;   text-shadow:0 0 6px #a78bfa; }

.cs-stats { margin:1.5rem 0; display:flex; flex-direction:column; gap:.8rem; }
.cs-stat-item { display:grid; grid-template-columns:120px 1fr 42px; align-items:center; gap:.8rem; }
.cs-stat-name { font-size:.76rem; color:var(--souls); font-family:'Noto Sans JP',sans-serif; }
.cs-bar { height:9px; background:rgba(255,255,255,.07); border-radius:6px; overflow:hidden; position:relative; }
.cs-bar::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%); animation:barSheen 2s ease-in-out infinite; }
@keyframes barSheen { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.cs-fill {
    height:100%; border-radius:6px;
    box-shadow: 0 0 6px currentColor;
    animation: fillBar 1.5s ease-out forwards;
}
@keyframes fillBar { from{width:0!important} }
.cs-stat-val { font-size:.82rem; color:var(--gold); font-weight:700; text-align:right; text-shadow:0 0 6px rgba(255,215,0,.5); }

.cs-passive {
    margin-top:.6rem; padding:.8rem .9rem;
    border-radius:0 8px 8px 0; font-size:.86rem; color:var(--souls);
    display:flex; align-items:center; gap:.6rem;
}
.cs-passive         { background:rgba(255,215,0,.05);  border-left:3px solid var(--gold);   }
.cs-passive-night   { background:rgba(124,58,237,.06); border-left:3px solid #7c3aed;       }
.cs-passive-heavy   { background:rgba(255,106,0,.05);  border-left:3px solid var(--flame);  }

.passive-tag { font-size:.62rem; font-weight:700; padding:.15rem .5rem; border-radius:3px; color:#000; letter-spacing:.05em; white-space:nowrap; flex-shrink:0; }
.passive-tag           { background:var(--gold); }
.passive-night-tag     { background:#7c3aed; color:#fff; }
.passive-heavy-tag     { background:var(--flame); }

/* ══════════════════════════════
   IMOUTO
══════════════════════════════ */
.imouto-section {
    padding: 5rem 2rem; text-align: center;
    background: linear-gradient(180deg, #080012, #100020);
    position: relative; overflow: hidden;
}
/* heart pattern */
.imouto-section::before {
    content: '💕 ♡ 💕 ♡ 💕 ♡ 💕 ♡ 💕 ♡ 💕 ♡ 💕 ♡ 💕 ♡ 💕 ♡ 💕 ♡ 💕 ♡ 💕 ♡';
    position: absolute; top: 0; left: 0; right: 0;
    font-size: 1.5rem; color: var(--pink); opacity: .05;
    letter-spacing: .5rem; line-height: 2rem; word-break: break-all;
    pointer-events: none;
}
.imouto-deco-top, .imouto-deco-bot {
    color: var(--pink); font-size: 1rem; letter-spacing: .6em;
    margin-bottom: 2rem; opacity: .5; text-shadow: 0 0 8px var(--pink);
}
.imouto-deco-bot { margin-top: 2rem; margin-bottom: 0; }
.imouto-container {
    max-width: 1000px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr auto;
    gap: 3rem; align-items: center; text-align: left;
    position: relative; z-index: 1;
}
.imouto-pretitle {
    font-family:'Noto Sans JP',sans-serif; color:var(--pink); font-size:.78rem;
    letter-spacing:.3em; margin-bottom:.5rem; opacity:.8; text-shadow:0 0 6px var(--pink);
}
.imouto-text h2 {
    font-family:'Cinzel',serif; font-size:2rem; color:var(--gold); margin-bottom:.3rem;
    text-shadow: 0 0 15px rgba(255,215,0,.3);
}
.imouto-sub { color:var(--pink); font-size:.83rem; margin-bottom:1.2rem; }
.imouto-text p { color:var(--light); font-size:1rem; line-height:1.8; margin-bottom:.8rem; }
.nervous { color:var(--pink); font-size:1.1rem; }

.imouto-rating {
    margin-top:1.5rem; padding:1.2rem 1.5rem;
    background: rgba(255,105,180,.06);
    border: 1px solid rgba(255,105,180,.3);
    border-radius:12px;
    box-shadow: 0 0 20px rgba(255,105,180,.06), inset 0 0 20px rgba(255,20,147,.03);
}
.rating-label { font-size:.78rem; color:var(--souls); display:block; margin-bottom:.5rem; }
.stars-row { font-size:1.5rem; margin:.3rem 0; letter-spacing:.08em; filter:drop-shadow(0 0 4px gold); }
.rating-num {
    display:block; font-family:'Cinzel',serif; font-size:2.2rem;
    background: linear-gradient(90deg, var(--gold), #fff, var(--gold));
    background-size: 200% auto;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    animation: textShimmer 2s linear infinite;
}
.rating-sub { font-size:.83rem; color:var(--pink); }

/* IMOUTO CARD */
.imouto-card {
    width:220px; flex-shrink:0;
    position: relative; border-radius:16px; padding:1.5rem 1.2rem; text-align:center;
}
.imouto-card::before {
    content:'';
    position:absolute; inset:-2px;
    background: linear-gradient(135deg, var(--pink), var(--purple), var(--cyan), var(--pink));
    background-size: 300% 300%;
    border-radius:18px; z-index:-1;
    animation: gradientSpin 3s linear infinite;
}
.imouto-card::after {
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(135deg, #1a001a, #2a0028);
    border-radius:15px; z-index:-1;
}
/* sparkle corners on imouto card */
.ic-header { margin-bottom:.8rem; }
.ic-jp { font-family:'Noto Sans JP',sans-serif; font-size:.62rem; color:var(--pink); letter-spacing:.2em; opacity:.7; }
.ic-avatar { font-size:3.5rem; margin:.5rem 0; animation:bob 2s ease-in-out infinite; filter:drop-shadow(0 0 8px var(--pink)); }
.ic-name { font-family:'Cinzel',serif; color:#fff; font-size:1.2rem; margin-bottom:.3rem; text-shadow:0 0 8px rgba(255,255,255,.3); }
.ic-class { color:var(--purple); font-size:.78rem; margin-bottom:1rem; text-shadow:0 0 6px var(--purple); }
.ic-stats { text-align:left; font-size:.83rem; }
.ic-row { display:flex; justify-content:space-between; padding:.3rem 0; border-bottom:1px solid rgba(255,105,180,.12); color:var(--souls); }
.ic-s    { color:var(--pink);  font-weight:700; text-shadow:0 0 4px var(--pink); }
.ic-gold { color:var(--gold);  font-weight:700; text-shadow:0 0 6px var(--gold); }
.ic-footer { margin-top:1rem; font-size:.72rem; color:var(--pink); letter-spacing:.1em; text-shadow:0 0 6px var(--pink); }

/* ══════════════════════════════
   SECTION DECO
══════════════════════════════ */
.section-deco {
    text-align:center; color:var(--souls); font-size:1rem;
    letter-spacing:.5em; margin-bottom:1rem; opacity:.45;
}

/* ══════════════════════════════
   PLATINOS
══════════════════════════════ */
.platinos {
    padding: 5rem 2rem;
    background: linear-gradient(180deg, #070707, #0a0500);
    position: relative; overflow: hidden;
}
/* cross-hatch texture */
.platinos::before {
    content:'';
    position:absolute; inset:0; pointer-events:none;
    background-image:
        linear-gradient(rgba(255,106,0,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,106,0,.02) 1px, transparent 1px);
    background-size: 50px 50px;
}
.platinos h2 {
    font-family:'Cinzel',serif; text-align:center; font-size:2.3rem; color:var(--gold); margin-bottom:.5rem;
    text-shadow: 0 0 20px rgba(255,215,0,.4);
    position: relative; z-index:1;
}
.section-sub  { text-align:center; color:var(--souls); margin-bottom:2.5rem; line-height:1.8; position:relative; z-index:1; }
.section-sub-jp { font-family:'Noto Sans JP',sans-serif; font-size:.78rem; color:var(--pink); opacity:.7; }

.games-grid {
    max-width:1200px; margin:0 auto; position:relative; z-index:1;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem;
}

/* HOLOGRAPHIC GAME CARD */
.game-card {
    background: linear-gradient(135deg, #0f0700, #1a0d00);
    border: 1px solid rgba(255,106,0,.25);
    border-radius:14px; padding:1.8rem;
    cursor:pointer; transition:all .35s ease;
    position:relative; overflow:hidden;
}
/* left color accent bar */
.game-card::before {
    content:'';
    position:absolute; top:0; left:0; width:3px; height:100%;
    background: linear-gradient(180deg, var(--flame), var(--gold), transparent);
    transition: width .3s;
}
/* holographic shine sweep */
.game-card::after {
    content:'';
    position:absolute; top:0; left:-80%;
    width:60%; height:100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
    transform: skewX(-15deg);
    transition: left .6s ease;
    pointer-events:none;
}
.game-card:hover::after { left:130%; }
.game-card:hover {
    border-color: var(--gold);
    transform: translateY(-7px) scale(1.01);
    box-shadow: 0 15px 40px rgba(255,106,0,.2),
                0 0 0 1px rgba(255,215,0,.15),
                inset 0 0 30px rgba(255,106,0,.04);
}
.game-card:hover::before { width:4px; }

.game-icon { font-size:2.5rem; margin-bottom:.8rem; filter:drop-shadow(0 0 8px rgba(255,106,0,.5)); }
.game-card h3 { font-family:'Cinzel',serif; color:var(--souls); font-size:1.2rem; margin-bottom:.5rem; }
.plat-badge {
    display:inline-block;
    background: linear-gradient(90deg, #3a2a00, #c8860a, #ffd700, #c8860a, #3a2a00);
    background-size:200% auto;
    color:#ffe082; font-size:.72rem; font-weight:700;
    padding:.2rem .9rem; border-radius:20px; margin-bottom:.8rem;
    animation: textShimmer 2s linear infinite;
    box-shadow: 0 0 10px rgba(255,215,0,.3);
}
.game-desc { color:#9a8860; font-size:.88rem; line-height:1.65; margin-bottom:1rem; }
.game-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.game-tags span {
    background:rgba(255,106,0,.08); border:1px solid rgba(255,106,0,.2);
    color:var(--souls); font-size:.7rem; padding:.2rem .6rem; border-radius:4px;
    transition:all .2s;
}
.game-tags span:hover { background:rgba(255,106,0,.18); border-color:rgba(255,106,0,.5); color:var(--light); }

/* ══════════════════════════════
   OPINIONS (Kojima vs Miyazaki)
══════════════════════════════ */
.opinions-section {
    padding:5rem 2rem;
    background: linear-gradient(180deg, #050510, #0a000a);
    position:relative; overflow:hidden;
}
.opinions-section::before {
    content:'';
    position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(ellipse at 25% 50%, rgba(0,200,83,.04) 0%, transparent 50%),
                radial-gradient(ellipse at 75% 50%, rgba(200,0,0,.04) 0%, transparent 50%);
}
.opinions-grid {
    max-width:1000px; margin:0 auto;
    display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:center;
    position:relative; z-index:1;
}
.opinion-card {
    border-radius:16px; padding:2.5rem 2rem; text-align:center;
    position:relative; overflow:hidden; transition:transform .3s;
}
.opinion-card::after {
    content:'';
    position:absolute; top:0; left:-80%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
    transform:skewX(-15deg); transition:left .6s ease; pointer-events:none;
}
.opinion-card:hover::after { left:130%; }
.opinion-card:hover { transform:scale(1.03); }

.fan-card {
    background:linear-gradient(135deg,#001a0d,#002a15);
    border:2px solid rgba(0,200,83,.3);
    box-shadow:0 0 30px rgba(0,200,83,.05);
}
.hater-card {
    background:linear-gradient(135deg,#1a0000,#2a0000);
    border:2px solid rgba(200,0,0,.3);
    box-shadow:0 0 30px rgba(200,0,0,.05);
}
.fan-card::before {
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 50% 0%,rgba(0,200,83,.07),transparent 70%);
}
.hater-card::before {
    content:'';position:absolute;inset:0;
    background:radial-gradient(circle at 50% 0%,rgba(200,0,0,.07),transparent 70%);
}
.opinion-emoji { font-size:3.5rem; margin-bottom:.8rem; display:block; position:relative; z-index:1; }
.opinion-label {
    display:inline-block; font-size:.68rem; font-weight:700;
    letter-spacing:.15em; padding:.25rem .9rem; border-radius:20px;
    margin-bottom:.8rem; position:relative; z-index:1;
}
.fan-label   { background:rgba(0,200,83,.12);  border:1px solid rgba(0,200,83,.4);  color:#00e676; }
.hater-label { background:rgba(200,0,0,.12);   border:1px solid rgba(200,0,0,.4);   color:#ff5252; }
.opinion-card h3 { font-family:'Cinzel',serif; font-size:1.8rem; color:#fff; margin-bottom:.3rem; position:relative; z-index:1; text-shadow:0 0 10px rgba(255,255,255,.15); }
.opinion-sub  { font-size:.78rem; color:#555; margin-bottom:1rem; position:relative; z-index:1; }
.opinion-desc { color:var(--light); font-size:.92rem; line-height:1.75; margin-bottom:1.2rem; position:relative; z-index:1; }
.opinion-quote { position:relative; z-index:1; font-style:italic; font-size:.83rem; padding:.8rem 1rem; border-radius:8px; color:#999; }
.fan-card   .opinion-quote { background:rgba(0,200,83,.05);  border-left:3px solid #00c853; }
.hater-card .opinion-quote { background:rgba(200,0,0,.05);   border-left:3px solid #c80000; }
.opinion-vs {
    font-family:'Cinzel',serif; font-size:2.8rem; font-weight:900;
    background: linear-gradient(180deg, var(--gold), var(--flame));
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    text-align:center; filter:drop-shadow(0 0 8px rgba(255,215,0,.4));
    animation:flamePulse 2s ease-in-out infinite;
}
@keyframes flamePulse { 0%,100%{filter:drop-shadow(0 0 6px rgba(255,215,0,.3))} 50%{filter:drop-shadow(0 0 16px rgba(255,215,0,.6))} }

/* ══════════════════════════════
   OSU!
══════════════════════════════ */
.osu-section {
    padding:4rem 2rem;
    background: linear-gradient(135deg, #0d0018, #180030);
    border-top:1px solid rgba(176,102,255,.2);
    border-bottom:1px solid rgba(176,102,255,.2);
    position:relative; overflow:hidden;
}
.osu-section::before {
    content:'';
    position:absolute; inset:0; pointer-events:none;
    background-image: radial-gradient(rgba(176,102,255,.06) 1px, transparent 1px);
    background-size: 25px 25px;
}
.osu-content { max-width:900px; margin:0 auto; display:flex; align-items:center; gap:3rem; position:relative; z-index:1; }
.osu-icon {
    font-size:5rem; flex-shrink:0;
    animation:osuBounce .8s ease-in-out infinite alternate;
    filter:drop-shadow(0 0 16px var(--pink));
}
@keyframes osuBounce { from{transform:scale(1)} to{transform:scale(1.12) rotate(5deg)} }
.osu-content h2 { font-size:2rem; margin-bottom:.5rem; color:#fff; text-shadow:0 0 15px rgba(255,255,255,.2); }
.osu-logo { font-family:'Fredoka',sans-serif; color:var(--pink); text-shadow:0 0 12px var(--pink); }
.osu-jp { font-family:'Noto Sans JP',sans-serif; font-size:.88rem; color:var(--purple); opacity:.8; }
.osu-content p { color:var(--souls); margin-bottom:.8rem; }
.osu-kaomoji { color:var(--pink)!important; font-size:1.2rem!important; letter-spacing:.1em; text-shadow:0 0 8px var(--pink); }
.osu-bars { display:flex; flex-direction:column; gap:.9rem; margin-top:.5rem; }
.osu-bar-label { font-family:'Noto Sans JP',sans-serif; font-size:.8rem; color:var(--light); display:flex; flex-direction:column; gap:.3rem; }
.osu-bar { width:100%; height:10px; background:rgba(255,255,255,.07); border-radius:6px; overflow:hidden; min-width:250px; position:relative; }
.osu-bar::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.07) 50%,transparent 70%); animation:barSheen 2s ease-in-out infinite; }
.osu-fill { height:100%; background:linear-gradient(90deg,var(--pink),var(--purple)); border-radius:6px; box-shadow:0 0 8px var(--pink); animation:fillBar 1.5s ease-out forwards; }

/* ══════════════════════════════
   SKILLS
══════════════════════════════ */
.skills {
    padding:5rem 2rem; background:#0a0a0f;
    position:relative; overflow:hidden;
}
.skills::before {
    content:'';
    position:absolute; inset:0; pointer-events:none;
    background: radial-gradient(ellipse at 50% 0%, rgba(0,212,255,.04) 0%, transparent 60%);
}
.skills h2 {
    font-family:'Cinzel',serif; text-align:center; font-size:2.3rem; color:var(--gold);
    margin-bottom:.5rem; text-shadow:0 0 20px rgba(255,215,0,.3); position:relative; z-index:1;
}
.skills-grid {
    max-width:1100px; margin:0 auto; position:relative; z-index:1;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem;
}
.skill-card {
    background: linear-gradient(135deg, #0d0d14, #12121a);
    border:1px solid rgba(0,212,255,.12);
    border-radius:14px; padding:1.8rem; text-align:center;
    transition:all .35s; position:relative; overflow:hidden;
}
.skill-card::before {
    content:'';
    position:absolute; bottom:0; left:0; right:0; height:2px;
    background:linear-gradient(90deg, var(--cyan), var(--purple), var(--pink));
    background-size:200% auto; opacity:0; transition:opacity .3s;
    animation:textShimmer 2s linear infinite;
}
.skill-card::after {
    content:'';
    position:absolute; top:0; left:-80%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(0,212,255,.05),transparent);
    transform:skewX(-15deg); transition:left .6s; pointer-events:none;
}
.skill-card:hover::after { left:130%; }
.skill-card:hover::before { opacity:1; }
.skill-card:hover {
    border-color:rgba(0,212,255,.35);
    transform:translateY(-6px);
    box-shadow:0 12px 35px rgba(0,212,255,.1), inset 0 0 30px rgba(0,212,255,.03);
}
.skill-emoji { font-size:2.5rem; display:block; margin-bottom:.8rem; filter:drop-shadow(0 0 6px rgba(0,212,255,.4)); }
.skill-card h3 { color:var(--cyan); margin-bottom:.5rem; font-size:1.1rem; text-shadow:0 0 8px rgba(0,212,255,.4); }
.skill-card p { color:#888; font-size:.88rem; line-height:1.65; }

/* ══════════════════════════════
   ALLIES / SUMMON SIGNS
══════════════════════════════ */
.allies-section {
    padding:5rem 2rem;
    background:linear-gradient(180deg, #07000d, #0d0a00);
    position:relative; overflow:hidden;
}
.allies-section::before {
    content:'';
    position:absolute; inset:0; pointer-events:none;
    background-image: radial-gradient(rgba(255,68,68,.04) 1.5px, transparent 1.5px);
    background-size:35px 35px;
}
.allies-title {
    font-family:'Cinzel',serif; text-align:center; font-size:2.2rem; color:#ff5555;
    margin-bottom:.5rem; text-shadow:0 0 20px rgba(255,50,50,.4); position:relative; z-index:1;
}
.allies-grid {
    max-width:800px; margin:0 auto; position:relative; z-index:1;
    display:flex; justify-content:center; gap:2rem; flex-wrap:wrap;
}
.ally-card {
    background:linear-gradient(135deg, #0f000a, #1a0010);
    border:1px solid rgba(255,68,68,.2);
    border-radius:16px; padding:2rem;
    display:flex; gap:2rem; align-items:flex-start;
    transition:all .35s; max-width:650px; position:relative; overflow:hidden;
}
.ally-card::after {
    content:'';
    position:absolute; top:0; left:-80%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,68,68,.05),transparent);
    transform:skewX(-15deg); transition:left .6s; pointer-events:none;
}
.ally-card:hover::after { left:130%; }
.ally-card:hover {
    border-color:rgba(255,68,68,.5);
    box-shadow:0 0 40px rgba(255,68,68,.1), inset 0 0 30px rgba(255,0,0,.03);
    transform:translateY(-4px);
}
.ally-frame {
    width:130px; height:160px; flex-shrink:0;
    position:relative; border-radius:12px; overflow:hidden;
}
.ally-frame::before {
    content:'';
    position:absolute; inset:-2px;
    background:linear-gradient(45deg, #ff4444, #ff1493, #ff6600, #ff4444);
    background-size:300% 300%;
    border-radius:14px; z-index:0;
    animation:gradientSpin 4s linear infinite;
}
.ally-photo { position:relative; z-index:1; width:100%; height:100%; object-fit:cover; border-radius:10px; display:block; }
.ally-badge {
    display:inline-block;
    background:rgba(255,68,68,.12); border:1px solid rgba(255,68,68,.4);
    color:#ff7777; font-size:.7rem; font-weight:700;
    padding:.2rem .7rem; border-radius:20px; margin-bottom:.5rem;
    letter-spacing:.05em; animation:flamePulse 2.5s ease-in-out infinite;
}
.ally-info h3 { font-family:'Cinzel',serif; font-size:1.6rem; color:#fff; margin-bottom:.2rem; text-shadow:0 0 10px rgba(255,255,255,.15); }
.ally-role { color:#ff7777; font-size:.8rem; margin-bottom:.8rem; }
.ally-desc { color:var(--light); font-size:.9rem; line-height:1.75; margin-bottom:1rem; }
.ally-stats { display:flex; gap:1rem; flex-wrap:wrap; }
.ally-stats span {
    background:rgba(255,68,68,.07); border:1px solid rgba(255,68,68,.2);
    color:var(--souls); font-size:.76rem; padding:.25rem .7rem; border-radius:6px;
}

/* MARCOS — card especial SSR dorada */
.ally-card-marcos {
    border-color: rgba(255,215,0,.35) !important;
    background: linear-gradient(135deg, #1a1000, #2a1a00) !important;
    box-shadow: 0 0 40px rgba(255,215,0,.08) !important;
    order: -1; /* aparece primero */
}
.ally-card-marcos:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 0 60px rgba(255,215,0,.18) !important;
}
.ally-frame-marcos::before {
    background: linear-gradient(45deg, var(--gold), var(--flame), var(--pink), var(--gold)) !important;
}
.ally-rank-badge {
    position: absolute; top: 6px; right: 6px; z-index: 3;
    background: var(--gold); color: #000;
    font-size: .7rem; font-weight: 700;
    padding: .15rem .45rem; border-radius: 6px;
    box-shadow: 0 0 8px rgba(255,215,0,.6);
}
.ally-badge-gold {
    background: rgba(255,215,0,.1) !important;
    border-color: rgba(255,215,0,.5) !important;
    color: var(--gold) !important;
    animation: textShimmer 2s linear infinite !important;
    background-size: 200% auto !important;
}
.ally-name-gold { color: var(--gold) !important; text-shadow: 0 0 14px rgba(255,215,0,.4) !important; }
.ally-flag { font-size: 1rem; }

.ally-mexico-note {
    margin: .8rem 0;
    padding: .7rem .9rem;
    background: rgba(0,128,0,.06);
    border: 1px solid rgba(0,200,0,.15);
    border-left: 3px solid #00c853;
    border-radius: 0 8px 8px 0;
    font-size: .82rem; color: var(--souls);
    line-height: 1.6;
}
.mexico-joke {
    display: block; margin-top: .4rem;
    color: #777; font-style: italic; font-size: .78rem;
}

/* ══════════════════════════════
   CONTACT
══════════════════════════════ */
.contact {
    padding:5rem 2rem; text-align:center;
    background:linear-gradient(180deg, #070707, #0d0500);
    position:relative; overflow:hidden;
}
.contact::before {
    content:'';
    position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(ellipse at 50% 100%, rgba(255,106,0,.06) 0%, transparent 60%);
}
.bonfire-contact { font-size:4.5rem; margin-bottom:1rem; animation:flicker 1.2s ease-in-out infinite alternate; filter:drop-shadow(0 0 20px rgba(255,106,0,.6)); }
.contact-jp { font-family:'Noto Sans JP',sans-serif; font-size:.78rem; color:var(--pink); letter-spacing:.3em; margin-bottom:.5rem; opacity:.7; text-shadow:0 0 6px var(--pink); }
.contact h2 {
    font-family:'Cinzel',serif; font-size:2.2rem; color:var(--gold);
    margin-bottom:.5rem; text-shadow:0 0 20px rgba(255,215,0,.3); position:relative; z-index:1;
}
.notice-senpai { color:var(--pink); font-style:italic; font-size:.95rem; text-shadow:0 0 6px var(--pink); }
.contact-methods { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin:2rem 0; position:relative; z-index:1; }
.contact-btn {
    display:flex; align-items:center; gap:.6rem;
    padding:.9rem 1.8rem; border-radius:50px;
    font-weight:600; font-size:1rem; text-decoration:none;
    transition:all .3s; font-family:'Fredoka',sans-serif;
    position:relative; overflow:hidden;
}
.contact-btn::after {
    content:'';
    position:absolute; top:0; left:-80%; width:60%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);
    transform:skewX(-15deg); transition:left .5s; pointer-events:none;
}
.contact-btn:hover::after { left:130%; }
.email-btn    { background:linear-gradient(135deg,#b22222,#8b0000); color:#fff; box-shadow:0 0 20px rgba(178,34,34,.3); }
.linkedin-btn { background:linear-gradient(135deg,#0077b5,#005a87); color:#fff; box-shadow:0 0 20px rgba(0,119,181,.3); }
.github-btn   { background:linear-gradient(135deg,#333,#111); color:#fff; border:1px solid #444; box-shadow:0 0 20px rgba(0,0,0,.4); }
.wa-btn       { background:linear-gradient(135deg,#25d366,#128c7e); color:#fff; box-shadow:0 0 20px rgba(37,211,102,.3); }
.contact-btn:hover { transform:translateY(-5px) scale(1.05); filter:brightness(1.2); }
.praise-cta {
    font-family:'Cinzel',serif; font-size:1.3rem;
    background:linear-gradient(90deg,var(--flame),var(--gold),var(--flame));
    background-size:200% auto;
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    animation:textShimmer 2.5s linear infinite;
    margin-bottom:1rem; position:relative; z-index:1;
}
.contact-kaomoji { color:var(--pink); font-size:1rem; opacity:.65; letter-spacing:.1em; text-shadow:0 0 6px var(--pink); position:relative; z-index:1; }

/* ══════════════════════════════
   FOOTER
══════════════════════════════ */
footer {
    background:#030304; padding:2.5rem 2rem; text-align:center;
    border-top:1px solid rgba(255,106,0,.1); color:#444;
    position:relative;
}
footer::before {
    content:'';
    position:absolute; top:0; left:10%; right:10%; height:1px;
    background:linear-gradient(90deg,transparent,var(--pink),var(--purple),transparent);
    opacity:.3;
}
.footer-deco { color:var(--pink); opacity:.3; letter-spacing:.5em; margin-bottom:1rem; text-shadow:0 0 6px var(--pink); }
.footer-jp { font-family:'Noto Sans JP',sans-serif; font-size:.78rem; color:var(--pink); opacity:.4; margin-top:.4rem; }
.footer-sub { font-size:.7rem; margin-top:.5rem; color:#222; }

/* ══════════════════════════════
   UTILITIES
══════════════════════════════ */
.kawaii { font-family:'Fredoka',sans-serif; }
@keyframes fadeUp  { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
@keyframes gradientSpin { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width:900px) {
    .about-container { grid-template-columns:1fr; justify-items:center; }
    .imouto-container { grid-template-columns:1fr; }
    .imouto-card { margin:0 auto; }
    .opinions-grid { grid-template-columns:1fr; }
    .opinion-vs { font-size:2rem; }
}
@media (max-width:768px) {
    .nav-links { gap:1rem; font-size:.83rem; }
    .praise { font-size:1.1rem; }
    .name::after { font-size:.7rem; }
    .osu-content { flex-direction:column; text-align:center; }
    .speech-wrap { flex-direction:column; align-items:center; text-align:center; }
    .speech-bubble { border-radius:20px; }
    .speech-bubble::before { display:none; }
    .cs-stat-item { grid-template-columns:90px 1fr 35px; }
    .ally-card { flex-direction:column; align-items:center; }
    .back-to-top { width:46px; height:46px; bottom:1rem; right:1rem; font-size:1.3rem; }
}

/* ══════════════════════════════
   ACCESSIBILITY — reduce motion
══════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .sakura-container, .particles { display: none; }
    /* keep gradient text readable when shimmer is frozen */
    .praise, .rating-num, .praise-cta { -webkit-text-fill-color: var(--gold); }
}