/* Palette pulled from the blush/gold artwork this page used to sit on. */
:root {
    --cream:    #fdf7f0;
    --blush:    #fbdcd3;
    --rose:     #f4a2ab;
    --petal:    #f7b9c4;
    --peach:    #f6c1a4;
    --gold:     #e6c391;
    --pearl:    #e3dcf0;
    --deepRose: #d9738a;
    --ink:      #7d4a55;
}

.main-p-jalyn {
    min-height: 100vh;
    margin: 0;
    overflow: hidden;
    text-align: center;
    background: var(--cream);
    cursor: crosshair;
}

/* ===== BACKDROP =====
   Blurred blobs drifting over a warm base. Reads as one flowing wash rather
   than a straight two-stop ramp across the page. */
.backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(140% 120% at 50% 120%, rgba(244,162,171,0.4) 0%, transparent 58%),
        radial-gradient(120% 100% at 0% 0%, rgba(227,220,240,0.45) 0%, transparent 55%),
        linear-gradient(165deg, #fffaf5 0%, var(--cream) 42%, #fdeee6 100%);
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.82;
    will-change: transform;
}
.blob--1 {
    width: 62vw; height: 62vw;
    left: -18vw; bottom: -22vw;
    background: radial-gradient(circle at 35% 35%, var(--rose), rgba(244,162,171,0) 70%);
    animation: drift1 26s ease-in-out infinite;
}
.blob--2 {
    width: 55vw; height: 55vw;
    right: -16vw; bottom: -14vw;
    background: radial-gradient(circle at 60% 40%, var(--peach), rgba(246,193,164,0) 70%);
    animation: drift2 32s ease-in-out infinite;
}
.blob--3 {
    width: 46vw; height: 46vw;
    right: -8vw; top: -16vw;
    background: radial-gradient(circle at 50% 60%, var(--gold), rgba(230,195,145,0) 70%);
    animation: drift3 29s ease-in-out infinite;
}
.blob--4 {
    width: 40vw; height: 40vw;
    left: -6vw; top: -12vw;
    background: radial-gradient(circle at 50% 50%, var(--pearl), rgba(227,220,240,0) 70%);
    animation: drift4 35s ease-in-out infinite;
}
.blob--5 {
    width: 38vw; height: 38vw;
    left: 34vw; bottom: -20vw;
    background: radial-gradient(circle at 50% 40%, var(--petal), rgba(247,185,196,0) 70%);
    animation: drift5 23s ease-in-out infinite;
}

@keyframes drift1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(9vw, -7vh) scale(1.12); }
}
@keyframes drift2 {
    0%, 100% { transform: translate(0, 0) scale(1.05); }
    50%      { transform: translate(-8vw, -5vh) scale(0.92); }
}
@keyframes drift3 {
    0%, 100% { transform: translate(0, 0) scale(0.95); }
    50%      { transform: translate(-6vw, 8vh) scale(1.1); }
}
@keyframes drift4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(7vw, 6vh) scale(1.15); }
}
@keyframes drift5 {
    0%, 100% { transform: translate(0, 0) scale(1.08); }
    50%      { transform: translate(-10vw, -9vh) scale(0.9); }
}

/* Soft rose bands that curl instead of banding straight across. */
.ribbon {
    position: absolute;
    left: -25%;
    width: 150%;
    height: 55vh;
    border-radius: 45%;
    filter: blur(46px);
    opacity: 0.5;
    will-change: transform;
}
.ribbon--1 {
    bottom: -18vh;
    background: linear-gradient(100deg, rgba(255,255,255,0) 8%, rgba(244,162,171,0.55) 38%, rgba(230,195,145,0.5) 62%, rgba(255,255,255,0) 92%);
    animation: curl1 24s ease-in-out infinite;
}
.ribbon--2 {
    bottom: -30vh;
    height: 48vh;
    background: linear-gradient(80deg, rgba(255,255,255,0) 12%, rgba(230,195,145,0.5) 40%, rgba(251,220,211,0.6) 70%, rgba(255,255,255,0) 95%);
    animation: curl2 30s ease-in-out infinite;
}
@keyframes curl1 {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50%      { transform: rotate(3deg) translateY(-5vh); }
}
@keyframes curl2 {
    0%, 100% { transform: rotate(5deg) translateY(0); }
    50%      { transform: rotate(-3deg) translateY(4vh); }
}

/* Slow gold light pass over the whole thing. */
.sheen {
    position: absolute;
    inset: -20%;
    background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.5) 50%, transparent 62%);
    background-size: 250% 250%;
    opacity: 0.45;
    animation: sheenPass 18s linear infinite;
}
@keyframes sheenPass {
    0%   { background-position: 130% 0; }
    100% { background-position: -60% 0; }
}

/* ===== STAGE ===== */
.stage {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2.5vh, 26px);
    padding: 4vh 4vw;
    pointer-events: none;
}

.ily {
    font-family: "Nothing You Could Do", "Nunito", cursive;
    font-weight: 400;
    color: #fff;
    font-size: clamp(28px, 6.5vh, 76px);
    line-height: 1.15;
    letter-spacing: 0.5px;
    text-shadow:
        0 1px 0 rgba(217,115,138,0.55),
        0 0 14px rgba(244,162,171,0.85),
        0 6px 28px rgba(217,115,138,0.4);
}
.ily--top    { animation: floatUp 6s ease-in-out infinite; }
.ily--bottom {
    font-size: clamp(38px, 9vh, 104px);
    animation: floatUp 6s ease-in-out infinite 3s;
}
@keyframes floatUp {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-0.8vh); }
}

.portrait {
    --portraitSize: clamp(180px, 46vh, 460px);
    position: relative;
    flex: 0 0 auto;
    width: var(--portraitSize);
    height: var(--portraitSize);
    border-radius: 24%;
    padding: 5px;
    background: linear-gradient(135deg, var(--petal), var(--gold) 45%, var(--rose) 100%);
    box-shadow:
        0 18px 55px rgba(217,115,138,0.32),
        0 0 0 1px rgba(255,255,255,0.5) inset;
    animation: portraitBreathe 9s ease-in-out infinite;
}
.portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 21%;
    display: block;
}
@keyframes portraitBreathe {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50%      { transform: scale(1.015) rotate(0.4deg); }
}

.backLink {
    position: fixed;
    left: 2vw;
    bottom: 2vh;
    z-index: 4;
    font-size: clamp(11px, 1.6vh, 15px);
    letter-spacing: 1.5px;
    text-transform: lowercase;
    color: var(--ink);
    opacity: 0.5;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.backLink:hover { opacity: 1; transform: translateX(-3px); }

/* ===== SCOREBOARD ===== */
.scoreboard {
    position: fixed;
    top: 2.5vh;
    right: 2.5vw;
    z-index: 4;
    text-align: right;
    pointer-events: none;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.scoreboard.is-live { opacity: 1; transform: translateX(0); }

.comboCount {
    font-size: clamp(34px, 8vh, 88px);
    font-weight: 800;
    line-height: 1;
    color: var(--rose);
    text-shadow: 0 0 18px rgba(244,162,171,0.7), 0 2px 0 rgba(255,255,255,0.7);
    transition: color 0.4s ease, text-shadow 0.4s ease;
}
.comboCount.is-hit { animation: countPop 0.22s ease-out; }
@keyframes countPop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.16); }
    100% { transform: scale(1); }
}

.comboRank {
    font-family: "Nothing You Could Do", "Nunito", cursive;
    font-size: clamp(13px, 2.4vh, 26px);
    color: var(--deepRose);
    min-height: 1.2em;
    text-shadow: 0 1px 6px rgba(255,255,255,0.8);
}
.comboBest {
    font-size: clamp(9px, 1.4vh, 12px);
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--ink);
    opacity: 0.55;
    margin-top: 0.4em;
}

/* Scoreboard takes on the current tier colour. */
.scoreboard[data-tier="1"]  .comboCount { color: #FFAACF; text-shadow: 0 0 20px rgba(228,86,133,0.6); }
.scoreboard[data-tier="2"]  .comboCount { color: #D77ED9; text-shadow: 0 0 20px rgba(195,102,195,0.6); }
.scoreboard[data-tier="3"]  .comboCount { color: #A48BFF; text-shadow: 0 0 20px rgba(142,116,232,0.6); }
.scoreboard[data-tier="4"]  .comboCount { color: #74B3FF; text-shadow: 0 0 20px rgba(94,157,229,0.6); }
.scoreboard[data-tier="5"]  .comboCount { color: #5ACFE0; text-shadow: 0 0 20px rgba(70,183,200,0.6); }
.scoreboard[data-tier="6"]  .comboCount { color: #57C97F; text-shadow: 0 0 20px rgba(94,193,125,0.6); }
.scoreboard[data-tier="7"]  .comboCount { color: #C9B93B; text-shadow: 0 0 20px rgba(197,209,67,0.6); }
.scoreboard[data-tier="8"]  .comboCount { color: #E8B62E; text-shadow: 0 0 20px rgba(226,186,57,0.7); }
.scoreboard[data-tier="9"]  .comboCount { color: #F0BE2A; text-shadow: 0 0 22px rgba(255,206,51,0.75); }
.scoreboard[data-tier="10"] .comboCount { color: #F5C518; text-shadow: 0 0 26px rgba(255,210,63,0.85), 0 0 40px rgba(255,148,181,0.6); }
.scoreboard[data-tier="11"] .comboCount { color: #FFC400; text-shadow: 0 0 30px rgba(255,210,63,0.95), 0 0 52px rgba(255,148,181,0.7); }

/* ===== COMPLIMENT RAIL ===== */
.complimentRail {
    position: fixed;
    left: 2.5vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    gap: 0.9vh;
    align-items: flex-start;
    pointer-events: none;
    max-width: min(30vw, 340px);
}

.compliment {
    padding: 0.75vh 1.5vh;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(251,220,211,0.85));
    border: 1px solid rgba(244,162,171,0.55);
    box-shadow: 0 6px 18px rgba(217,115,138,0.22);
    color: var(--ink);
    font-weight: 700;
    font-size: clamp(11px, 1.8vh, 18px);
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left center;
    animation: complimentIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.compliment.is-leaving {
    animation: complimentOut 0.35s ease-in forwards;
}
@keyframes complimentIn {
    from { opacity: 0; transform: translateX(-28px) scale(0.85); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes complimentOut {
    to { opacity: 0; transform: translateX(-28px) scale(0.85); }
}

/* ===== RANK BURST ===== */
.rankBurst {
    position: fixed;
    left: 50%;
    top: 9%;
    transform: translate(-50%, -50%);
    z-index: 5;
    pointer-events: none;
    font-family: "Nothing You Could Do", "Nunito", cursive;
    font-size: clamp(24px, 5vh, 60px);
    color: #fff;
    text-shadow: 0 0 18px rgba(244,162,171,0.9), 0 4px 22px rgba(217,115,138,0.6);
    opacity: 0;
}
.rankBurst.is-firing { animation: rankFlash 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes rankFlash {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
    18%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    30%  { transform: translate(-50%, -50%) scale(1); }
    75%  { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}

/* ===== PLAYFIELD ===== */
.playfield {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.heart {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    line-height: 1;
    color: var(--rose);
    text-shadow: 0 0 2vh #FFAACF, 0 0 1vh #FF80A6;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotate(var(--tilt, 0deg));
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.heart.is-in {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(var(--tilt, 0deg));
    animation: heartBeat 1.1s ease-in-out infinite 0.3s;
}
.heart.is-in:hover {
    transform: translate(-50%, -50%) scale(1.18) rotate(var(--tilt, 0deg));
    animation: none;
}
.heart.is-out {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotate(var(--tilt, 0deg));
    animation: none;
    pointer-events: none;
}
.heart.is-hit {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.9) rotate(var(--tilt, 0deg));
    transition: opacity 0.25s ease, transform 0.25s ease;
    animation: none;
    pointer-events: none;
}
@keyframes heartBeat {
    0%, 100% { transform: translate(-50%, -50%) scale(1)    rotate(var(--tilt, 0deg)); }
    50%      { transform: translate(-50%, -50%) scale(1.06) rotate(var(--tilt, 0deg)); }
}

/* Tier colours ride a single data attribute instead of a stack of classes. */
.heart[data-tier="1"]  { color: #FFAACF; text-shadow: 0 0 1vh #E45685, 0 0 2vh #FF8AB3; }
.heart[data-tier="2"]  { color: #D77ED9; text-shadow: 0 0 1vh #C366C3, 0 0 2vh #E698E4; }
.heart[data-tier="3"]  { color: #A48BFF; text-shadow: 0 0 1vh #8E74E8, 0 0 2vh #B8A5FF; }
.heart[data-tier="4"]  { color: #74B3FF; text-shadow: 0 0 1vh #5E9DE5, 0 0 2vh #8CC7FF; }
.heart[data-tier="5"]  { color: #5ACFE0; text-shadow: 0 0 1vh #46B7C8, 0 0 2vh #74E3F0; }
.heart[data-tier="6"]  { color: #72D994; text-shadow: 0 0 1vh #5EC17D, 0 0 2vh #8AEAAD; }
.heart[data-tier="7"]  { color: #DDE758; text-shadow: 0 0 1vh #C5D143, 0 0 2vh #EBF274; }
.heart[data-tier="8"]  { color: #F8D247; text-shadow: 0 0 1vh #E2BA39, 0 0 2vh #FFE25D; }
.heart[data-tier="9"]  { color: #FFDF5F; text-shadow: 0 0 1vh #FFCE33, 0 0 2vh #FF80A6, 0 0 3vh #FFD94A; }
.heart[data-tier="10"] { color: #FFE76A; text-shadow: 0 0 1vh #FFD23F, 0 0 2vh #FF94B5, 0 0 3vh #FFEA70; }
.heart[data-tier="11"] { color: #FFF0A0; text-shadow: 0 0 1vh #FFD23F, 0 0 2.5vh #FF94B5, 0 0 4vh #FFEA70; }

/* ===== HIT FEEDBACK ===== */
.spark {
    position: absolute;
    width: 0.9vh;
    height: 0.9vh;
    border-radius: 50%;
    background: currentColor;
    pointer-events: none;
    opacity: 1;
    transform: translate(-50%, -50%);
    animation: sparkFly 0.55s ease-out forwards;
}
@keyframes sparkFly {
    to {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2);
    }
}

.floater {
    position: absolute;
    pointer-events: none;
    font-weight: 800;
    font-size: clamp(13px, 2.2vh, 22px);
    color: currentColor;
    text-shadow: 0 1px 6px rgba(255,255,255,0.85);
    transform: translate(-50%, -50%);
    animation: floaterRise 0.85s ease-out forwards;
}
@keyframes floaterRise {
    to { opacity: 0; transform: translate(-50%, -260%) scale(1.15); }
}

/* Combo drop — one clear flash so a miss reads as a miss. */
.comboBreak {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, transparent 45%, rgba(217,115,138,0.28) 100%);
    opacity: 0;
}
.comboBreak.is-firing { animation: breakFlash 0.5s ease-out; }
@keyframes breakFlash {
    0%   { opacity: 0; }
    25%  { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .blob, .ribbon, .sheen, .ily, .portrait, .heart.is-in { animation: none !important; }
}

@media (max-width: 700px) {
    .complimentRail {
        left: 50%;
        top: auto;
        bottom: 2vh;
        transform: translateX(-50%);
        align-items: center;
        max-width: 90vw;
    }
    .compliment { transform-origin: center; }
}