/* =========================================================
   Chittan ☆ — Baby Otter Fairy memecoin · Kawaii JP mascot site
   ========================================================= */

:root {
    --pink-1: #fcd9eb;
    --pink-2: #ffb8d6;
    --pink-3: #ff8fb8;
    --pink-deep: #e87aa7;

    --cream-1: #fff8e8;
    --cream-2: #fdf0c6;
    --cream-3: #f9e6a3;

    --blue-1: #e3f1fb;
    --blue-2: #c2def4;
    --blue-3: #9bc6e6;
    --blue-deep: #5a9bcc;

    --mint: #c8e9c0;
    --mint-deep: #7fbf6e;
    --yellow: #ffe16a;
    --yellow-deep: #f5c33b;
    --orange: #ffa566;

    --ink: #4a3520;
    --ink-soft: #7a5d3d;
    --ink-light: #ad8e6b;

    --logo-red: #e74552;
    --logo-orange: #f3a13b;
    --logo-yellow: #f5cb38;
    --logo-green: #6ec068;
    --logo-blue: #4ea7d8;
    --logo-purple: #9a6fc7;

    --font-jp-display: 'Mochiy Pop One', 'Cherry Bomb One', cursive;
    --font-jp-body: 'M PLUS Rounded 1c', 'Kosugi Maru', sans-serif;
    --font-en: 'Comfortaa', 'M PLUS Rounded 1c', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-en);
    background: var(--cream-1);
    color: var(--ink);
    line-height: 1.7;
    overflow-x: hidden;
    min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ========== TOP CONTACT BAR ========== */
.top-contact {
    background: var(--pink-1);
    padding: 8px 24px;
    text-align: right;
    border-bottom: 1px solid rgba(255, 184, 214, 0.5);
}
.contact-pill {
    display: inline-block;
    color: var(--blue-deep);
    font-family: var(--font-jp-body);
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
}
.contact-pill:hover { color: var(--pink-deep); }

/* ========== HEADER ========== */
.kawaii-header {
    background: var(--pink-1);
    padding: 36px 24px 60px;
    position: relative;
    overflow: hidden;
}
.kawaii-header::before,
.kawaii-header::after {
    content: '☆';
    position: absolute;
    color: rgba(255, 255, 255, 0.7);
    font-size: 48px;
    pointer-events: none;
}
.kawaii-header::before { top: 30px; left: 6%; }
.kawaii-header::after { bottom: 60px; right: 8%; }

.cloud-banner {
    max-width: 1100px;
    margin: 0 auto;
    background: #fff;
    border-radius: 50% 50% 50% 50% / 28% 28% 36% 36%;
    padding: 40px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    position: relative;
    box-shadow: 0 10px 0 rgba(232, 122, 167, 0.18);
}
/* Cloud bumps */
.cloud-banner::before,
.cloud-banner::after {
    content: '';
    position: absolute;
    background: #fff;
    border-radius: 50%;
}
.cloud-banner::before {
    width: 140px;
    height: 90px;
    top: -32px;
    left: 14%;
}
.cloud-banner::after {
    width: 110px;
    height: 70px;
    bottom: -22px;
    right: 18%;
}

.logo-bubble { text-align: center; position: relative; z-index: 2; }
.rainbow-logo {
    font-family: var(--font-jp-display);
    font-weight: 400;
    font-size: clamp(60px, 9vw, 110px);
    line-height: 1;
    letter-spacing: -2px;
    text-shadow: 4px 4px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
}
.rainbow-logo .lt { display: inline-block; transform-origin: bottom center; }
.rainbow-logo .lt.c1 { color: var(--logo-red); transform: rotate(-4deg); }
.rainbow-logo .lt.c2 { color: var(--logo-orange); transform: rotate(2deg); }
.rainbow-logo .lt.c3 { color: var(--logo-yellow); transform: rotate(-2deg); }
.rainbow-logo .lt.c4 { color: var(--logo-green); transform: rotate(3deg); }
.rainbow-logo .lt.c5 { color: var(--logo-blue); transform: rotate(-3deg); display: inline-block; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(357deg); } }

.logo-sub {
    font-family: var(--font-en);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 8px;
    color: var(--pink-deep);
    margin-top: 6px;
}

.header-mascot {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 4px solid #fff;
    box-shadow: 0 6px 0 rgba(232, 122, 167, 0.35), 0 0 0 6px var(--yellow);
    object-fit: cover;
    transform: rotate(8deg);
    animation: bob 3s ease-in-out infinite;
    position: relative;
    z-index: 2;
}
@keyframes bob {
    0%, 100% { transform: rotate(8deg) translateY(0); }
    50% { transform: rotate(-4deg) translateY(-8px); }
}

/* ========== PASTEL PAGE BACKGROUND ========== */
.pastel-page {
    position: relative;
    background: var(--cream-1);
    background-image:
        radial-gradient(circle at 10% 14%, rgba(255, 184, 214, 0.15) 0, transparent 1.5%),
        radial-gradient(circle at 86% 24%, rgba(155, 198, 230, 0.18) 0, transparent 2%),
        radial-gradient(circle at 24% 60%, rgba(255, 225, 106, 0.18) 0, transparent 2%),
        radial-gradient(circle at 78% 78%, rgba(200, 233, 192, 0.18) 0, transparent 2.5%),
        radial-gradient(circle at 54% 32%, rgba(255, 184, 214, 0.12) 0, transparent 1.8%);
    background-size: 320px 320px;
    padding: 0 24px 80px;
}
/* Repeating cute icons faintly in BG */
.pastel-page::before {
    content: '🍩 🥛 ☕ 🎀 ⭐ 🍰 🍓 🌸 🍩 🥛 ☕ 🎀 ⭐ 🍰 🍓 🌸 🍩 🥛 ☕ 🎀 ⭐ 🍰 🍓 🌸';
    position: absolute;
    inset: 0;
    font-size: 32px;
    line-height: 90px;
    word-spacing: 80px;
    color: rgba(232, 122, 167, 0.06);
    pointer-events: none;
    overflow: hidden;
    user-select: none;
}

/* ========== NAV ========== */
.kawaii-nav {
    max-width: 920px;
    margin: 36px auto 26px;
    padding: 0 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 14px;
    font-family: var(--font-jp-body);
    font-weight: 700;
    font-size: 16px;
    color: var(--blue-deep);
    position: relative;
    z-index: 2;
}
.kawaii-nav a {
    padding: 4px 6px;
    transition: color 0.2s;
}
.kawaii-nav a:hover { color: var(--pink-deep); }
.kawaii-nav .sep { color: var(--blue-2); font-weight: 400; }
.link-icon {
    color: var(--blue-3);
    font-size: 12px;
    margin-left: 2px;
}

/* ========== HERO PHOTO ========== */
.hero-photo {
    max-width: 880px;
    margin: 0 auto 60px;
    position: relative;
    z-index: 2;
}
.photo-frame {
    background: #fff;
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 8px 0 rgba(232, 122, 167, 0.15), 0 16px 30px rgba(232, 122, 167, 0.12);
    position: relative;
    overflow: hidden;
}
.hero-img {
    width: 100%;
    height: 460px;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pink-2), var(--blue-2), var(--yellow));
}

.sparkle {
    position: absolute;
    font-size: 28px;
    pointer-events: none;
    animation: twinkle 2.5s ease-in-out infinite;
}
.sparkle.s1 { top: 10%; left: 8%; animation-delay: 0s; }
.sparkle.s2 { top: 20%; right: 10%; animation-delay: 0.4s; }
.sparkle.s3 { bottom: 18%; left: 14%; animation-delay: 0.8s; font-size: 32px; }
.sparkle.s4 { top: 50%; right: 6%; animation-delay: 1.2s; font-size: 24px; }
.sparkle.s5 { bottom: 8%; right: 22%; animation-delay: 1.6s; }
@keyframes twinkle {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.4) rotate(20deg); opacity: 0.4; }
}

.balloon {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    bottom: 16px;
    pointer-events: none;
    box-shadow: inset 4px 4px 0 rgba(255, 255, 255, 0.5);
}
.balloon.b1 { background: var(--pink-3); left: 8%; }
.balloon.b2 { background: var(--logo-yellow); left: 24%; bottom: 26px; width: 32px; height: 32px; }
.balloon.b3 { background: var(--logo-blue); right: 28%; bottom: 22px; width: 28px; height: 28px; }
.balloon.b4 { background: var(--logo-green); right: 10%; bottom: 14px; }

.hero-caption {
    text-align: center;
    margin-top: 24px;
    font-family: var(--font-jp-body);
    font-size: 17px;
    color: var(--ink-soft);
    font-weight: 500;
}
.hero-caption .ja {
    color: var(--pink-deep);
    font-weight: 700;
}

/* ========== SECTIONS ========== */
.kawaii-section {
    max-width: 1000px;
    margin: 0 auto 80px;
    position: relative;
    z-index: 2;
}

.section-bar {
    background: linear-gradient(180deg, #fff 0%, var(--blue-1) 100%);
    border-radius: 8px;
    border: 1.5px solid var(--blue-2);
    padding: 12px 24px;
    font-family: var(--font-jp-body);
    font-size: 22px;
    font-weight: 700;
    color: var(--blue-deep);
    margin-bottom: 36px;
    box-shadow: 0 3px 0 rgba(155, 198, 230, 0.4);
}

/* ========== TOPICS ========== */
.topics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 28px;
}
.topic-card {
    text-align: center;
}
.topic-title {
    font-family: var(--font-jp-body);
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 12px;
    border-bottom: 2px dashed var(--blue-2);
    padding-bottom: 8px;
}
.topic-thumb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 12px;
    transition: transform 0.3s ease;
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.06);
    position: relative;
}
.topic-thumb:hover { transform: translateY(-4px) rotate(-1deg); }
.thumb-pink { background: linear-gradient(160deg, var(--pink-1), var(--pink-2)); color: #fff; }
.thumb-cream { background: linear-gradient(160deg, var(--cream-2), var(--cream-3)); }
.thumb-blue { background: linear-gradient(160deg, var(--blue-1), var(--blue-3)); color: #fff; }
.thumb-mint { background: linear-gradient(160deg, #e6f4e2, var(--mint)); color: var(--mint-deep); }
.thumb-yellow { background: linear-gradient(160deg, #fff4cc, var(--yellow)); color: var(--ink); }
.thumb-photo { padding: 10px; background: var(--pink-1); }
.thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.thumb-text {
    font-family: var(--font-jp-display);
    font-size: 38px;
    line-height: 1;
    text-align: center;
    text-shadow: 3px 3px 0 rgba(0,0,0,0.12);
    letter-spacing: 1px;
}
.thumb-text.small { font-size: 32px; }
.thumb-sub {
    font-family: var(--font-en);
    font-size: 11px;
    margin-top: 6px;
    opacity: 0.9;
}
.emoji-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    font-size: 44px;
}
.topic-blurb {
    font-family: var(--font-jp-body);
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.5;
}

/* ========== SCHEDULE ========== */
.schedule-note {
    text-align: center;
    color: var(--ink-light);
    font-family: var(--font-jp-body);
    font-size: 13px;
    margin-bottom: 24px;
    font-style: italic;
}
.schedule-list {
    background: #fff;
    border-radius: 14px;
    border: 1.5px solid var(--blue-2);
    overflow: hidden;
    box-shadow: 0 4px 0 rgba(155, 198, 230, 0.3);
}
.schedule-row {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    gap: 20px;
    padding: 16px 24px;
    border-bottom: 1px dashed var(--blue-1);
    align-items: center;
    transition: background 0.2s;
}
.schedule-row:last-child { border-bottom: 0; }
.schedule-row:hover { background: var(--blue-1); }
.sched-date {
    font-family: var(--font-jp-body);
    font-weight: 700;
    color: var(--blue-deep);
    font-size: 14px;
}
.sched-event {
    font-family: var(--font-jp-body);
    color: var(--ink);
    font-size: 15px;
}
.sched-tag {
    font-family: var(--font-en);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 999px;
    color: #fff;
}
.tag-pink { background: var(--pink-3); }
.tag-blue { background: var(--blue-3); }
.tag-yellow { background: var(--yellow-deep); color: var(--ink); }
.tag-mint { background: var(--mint-deep); }

/* ========== PROFILE ========== */
.profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: start;
    max-width: 720px;
    margin: 0 auto;
}
.profile-card {
    background: #fff;
    border-radius: 18px;
    padding: 28px;
    border: 2px solid var(--pink-2);
    box-shadow: 0 6px 0 rgba(232, 122, 167, 0.18);
    position: relative;
}
.profile-card::before {
    content: '★';
    position: absolute;
    top: -14px;
    right: 20px;
    font-size: 30px;
    color: var(--yellow-deep);
    text-shadow: 2px 2px 0 #fff;
}
.profile-name {
    font-family: var(--font-jp-display);
    font-size: 28px;
    color: var(--pink-deep);
    margin-bottom: 16px;
    line-height: 1.2;
}
.profile-en {
    font-family: var(--font-en);
    font-size: 16px;
    font-weight: 700;
    color: var(--blue-deep);
    margin-left: 8px;
    letter-spacing: 1px;
}
.profile-photo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 18px;
    border: 4px solid var(--yellow);
    box-shadow: 0 0 0 4px #fff, 0 6px 0 rgba(245, 195, 59, 0.4);
}
.profile-photo .thumb-img { border-radius: 0; }

.kame-emoji {
    font-size: 90px;
    text-align: center;
    margin: 12px 0 18px;
    animation: wobble 4s ease-in-out infinite;
}
@keyframes wobble {
    0%, 100% { transform: rotate(-6deg); }
    50% { transform: rotate(6deg); }
}

.profile-list {
    list-style: none;
    font-family: var(--font-jp-body);
    font-size: 14px;
    color: var(--ink);
}
.profile-list li {
    padding: 8px 0;
    border-bottom: 1px dotted var(--pink-1);
}
.profile-list li:last-child { border-bottom: 0; }
.profile-list strong { color: var(--pink-deep); margin-right: 6px; }
.profile-list em { color: var(--blue-deep); font-style: normal; font-weight: 700; }

.profile-quote {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--cream-2);
    border-radius: 12px;
    font-family: var(--font-jp-body);
    font-style: italic;
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.6;
    border-left: 4px solid var(--yellow-deep);
}

/* ========== PRESENT (HOW TO BUY) ========== */
.present-intro {
    background: #fff;
    border-radius: 14px;
    padding: 18px 24px;
    border: 1.5px dashed var(--pink-2);
    margin-bottom: 24px;
    font-family: var(--font-jp-body);
    color: var(--ink);
    font-size: 15px;
}
.present-intro strong { color: var(--pink-deep); }

.present-steps {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}
.present-step {
    background: #fff;
    border-radius: 16px;
    padding: 22px 22px 24px;
    border: 2px solid var(--blue-2);
    box-shadow: 0 5px 0 rgba(155, 198, 230, 0.4);
    position: relative;
    transition: transform 0.25s;
}
.present-step:hover { transform: translateY(-4px); }
.present-step:nth-child(1) { background: linear-gradient(180deg, #fff, var(--pink-1) 200%); border-color: var(--pink-2); box-shadow: 0 5px 0 rgba(232, 122, 167, 0.3); }
.present-step:nth-child(2) { background: linear-gradient(180deg, #fff, var(--cream-2) 200%); border-color: var(--cream-3); box-shadow: 0 5px 0 rgba(245, 195, 59, 0.3); }
.present-step:nth-child(3) { background: linear-gradient(180deg, #fff, var(--blue-1) 200%); border-color: var(--blue-2); }
.present-step:nth-child(4) { background: linear-gradient(180deg, #fff, #e6f4e2 200%); border-color: var(--mint); box-shadow: 0 5px 0 rgba(127, 191, 110, 0.3); }
.step-num {
    font-family: var(--font-jp-display);
    font-size: 36px;
    line-height: 1;
    color: var(--pink-deep);
    margin-bottom: 8px;
}
.present-step:nth-child(2) .step-num { color: var(--yellow-deep); }
.present-step:nth-child(3) .step-num { color: var(--blue-deep); }
.present-step:nth-child(4) .step-num { color: var(--mint-deep); }
.present-step h4 {
    font-family: var(--font-jp-body);
    font-size: 18px;
    color: var(--ink);
    margin-bottom: 6px;
}
.present-step p {
    font-family: var(--font-jp-body);
    color: var(--ink-soft);
    font-size: 13.5px;
    line-height: 1.6;
}

/* CA Box */
.ca-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    padding: 14px 18px;
    border-radius: 14px;
    border: 2px solid var(--pink-2);
    box-shadow: 0 5px 0 rgba(232, 122, 167, 0.25);
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.ca-tag {
    font-family: var(--font-en);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--pink-deep);
    background: var(--pink-1);
    padding: 4px 10px;
    border-radius: 999px;
}
.ca-addr {
    flex: 1;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--ink);
    min-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ca-btn {
    padding: 7px 14px;
    background: var(--blue-2);
    color: var(--blue-deep);
    border: 0;
    border-radius: 999px;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
}
.ca-btn:hover { background: var(--blue-deep); color: #fff; }
.ca-btn.copied { background: var(--mint-deep); color: #fff; }
.ca-link-btn { background: var(--pink-2); color: var(--pink-deep); }
.ca-link-btn:hover { background: var(--pink-deep); color: #fff; }

.rules-card {
    background: var(--cream-2);
    border-radius: 14px;
    padding: 18px 24px;
    border: 1.5px dashed var(--yellow-deep);
    font-family: var(--font-jp-body);
}
.rules-card h4 {
    color: var(--ink);
    font-size: 16px;
    margin-bottom: 8px;
}
.rules-card ul {
    list-style: none;
    color: var(--ink-soft);
    font-size: 14px;
}
.rules-card li { padding: 4px 0; }

/* ========== SNS ========== */
.sns-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.sns-grid-two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 560px;
    margin: 0 auto;
    gap: 22px;
}
.sns-card {
    background: #fff;
    padding: 22px 18px;
    border-radius: 16px;
    border: 2px solid #fff;
    text-align: center;
    transition: all 0.25s;
    box-shadow: 0 5px 0 rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.sns-card:hover { transform: translateY(-4px) rotate(-1deg); }
.sns-icon {
    font-size: 36px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    color: #fff;
}
.sns-x .sns-icon { background: #000; }
.sns-tg .sns-icon { background: #29a9eb; }
.sns-yt .sns-icon { background: #ff3a3a; }
.sns-tk .sns-icon { background: #25f4ee; color: #000; }
.sns-ig .sns-icon { background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af); }
.sns-coin .sns-icon { background: var(--yellow-deep); color: var(--ink); }
.sns-name {
    font-family: var(--font-jp-body);
    font-weight: 700;
    color: var(--ink);
    font-size: 15px;
}
.sns-handle {
    font-family: var(--font-en);
    color: var(--blue-deep);
    font-size: 12.5px;
    font-weight: 600;
}

/* ========== GOODS ========== */
.goods-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.good-card {
    background: #fff;
    border-radius: 18px;
    padding: 22px 18px;
    text-align: center;
    border: 2px solid var(--pink-1);
    box-shadow: 0 5px 0 rgba(232, 122, 167, 0.18);
    position: relative;
    transition: transform 0.25s;
}
.good-card:hover { transform: translateY(-4px) rotate(1deg); }
.good-emoji {
    font-size: 56px;
    margin-bottom: 12px;
}
.good-card h4 {
    font-family: var(--font-jp-body);
    color: var(--ink);
    font-size: 18px;
    margin-bottom: 6px;
}
.good-card p {
    font-family: var(--font-jp-body);
    color: var(--ink-soft);
    font-size: 13px;
    line-height: 1.5;
    min-height: 50px;
}
.good-status {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 14px;
    background: var(--cream-2);
    color: var(--yellow-deep);
    border-radius: 999px;
    font-family: var(--font-en);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
}

/* ========== FOOTER ========== */
.kawaii-footer {
    background: var(--pink-1);
    padding: 36px 24px 28px;
    text-align: center;
    border-top: 4px dashed var(--pink-2);
    margin-top: 40px;
}
.footer-inner { max-width: 760px; margin: 0 auto; }
.footer-line {
    font-family: var(--font-jp-body);
    color: var(--pink-deep);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 14px;
}
.footer-line a { color: var(--blue-deep); }
.footer-disc {
    font-family: var(--font-jp-body);
    color: var(--ink-light);
    font-size: 12px;
    line-height: 1.7;
}

/* ========== FLOATING MASCOT BUTTON ========== */
.float-mascot {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--yellow);
    cursor: pointer;
    padding: 0;
    box-shadow: 0 6px 0 rgba(232, 122, 167, 0.4), 0 8px 18px rgba(0,0,0,0.1);
    z-index: 50;
    overflow: hidden;
    transition: transform 0.2s;
    animation: float-bob 3s ease-in-out infinite;
}
.float-mascot:hover { transform: scale(1.08) rotate(-6deg); }
.float-mascot:active { transform: scale(0.95); }
.float-mascot img { width: 100%; height: 100%; object-fit: cover; }
@keyframes float-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Speech bubble for floating mascot */
.float-bubble {
    position: fixed;
    bottom: 100px;
    right: 30px;
    background: #fff;
    border: 2px solid var(--pink-2);
    border-radius: 16px;
    padding: 10px 16px;
    font-family: var(--font-jp-body);
    font-size: 13px;
    color: var(--ink);
    box-shadow: 0 4px 0 rgba(232, 122, 167, 0.3);
    z-index: 51;
    animation: pop 0.3s ease-out;
    max-width: 200px;
    pointer-events: none;
}
.float-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 22px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-right: 2px solid var(--pink-2);
    border-bottom: 2px solid var(--pink-2);
    transform: rotate(45deg);
}
@keyframes pop {
    from { opacity: 0; transform: scale(0.7) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ========== RESPONSIVE ========== */
@media (max-width: 880px) {
    .cloud-banner {
        padding: 32px 30px;
        gap: 18px;
        flex-direction: column;
    }
    .header-mascot { width: 100px; height: 100px; }
    .topics-grid { grid-template-columns: 1fr 1fr; }
    .profile-grid { grid-template-columns: 1fr; }
    .present-steps { grid-template-columns: 1fr; }
    .sns-grid { grid-template-columns: 1fr 1fr; }
    .goods-grid { grid-template-columns: 1fr 1fr; }
    .schedule-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
    .sched-tag { justify-self: start; }
    .hero-img { height: 320px; }
}

@media (max-width: 520px) {
    .topics-grid { grid-template-columns: 1fr; }
    .sns-grid { grid-template-columns: 1fr; }
    .pastel-page { padding: 0 14px 60px; }
    .section-bar { font-size: 18px; padding: 10px 16px; }
    .rainbow-logo { font-size: 60px; }
    .kawaii-nav { font-size: 14px; gap: 4px 10px; }
    .float-mascot { width: 54px; height: 54px; bottom: 16px; right: 16px; }
}