/* ==========================================
   リセット & ベーススタイル
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Zen Maru Gothic', sans-serif;
    background: linear-gradient(180deg, #0a0e27 0%, #1a1e3e 50%, #2a2e4e 100%);
    color: #ffffff;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

/* ==========================================
   星空背景
   ========================================== */
.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.stars::before,
.stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    box-shadow: 
        50px 30px white, 120px 80px white, 200px 50px white,
        300px 120px white, 80px 150px white, 250px 180px white,
        150px 20px white, 320px 90px white, 40px 200px white,
        180px 140px white, 280px 60px white, 100px 100px white,
        60px 250px white, 220px 210px white, 340px 40px white,
        20px 120px white, 160px 180px white, 240px 30px white,
        290px 150px white, 110px 70px white, 190px 220px white,
        270px 100px white, 30px 160px white, 140px 50px white,
        200px 190px white, 260px 130px white, 90px 90px white,
        310px 20px white, 70px 200px white, 230px 160px white,
        170px 110px white, 120px 240px white, 280px 70px white,
        40px 140px white, 210px 80px white, 150px 210px white;
    animation: twinkle 3s infinite alternate;
}

.stars::after {
    animation-delay: 1.5s;
    box-shadow: 
        80px 60px white, 180px 110px white, 260px 40px white,
        330px 140px white, 100px 180px white, 270px 200px white,
        170px 50px white, 340px 110px white, 60px 220px white,
        200px 160px white, 300px 80px white, 120px 120px white,
        50px 270px white, 240px 230px white, 350px 60px white;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* ==========================================
   花火コンテナ
   ========================================== */
.fireworks-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

/* ==========================================
   メインコンテンツ
   ========================================== */
.main-content {
    position: relative;
    z-index: 10;
    padding: 20px;
    max-width: 500px;
    margin: 0 auto;
    padding-bottom: 60px;
}

/* ==========================================
   タイトルセクション
   ========================================== */
.title-section {
    text-align: center;
    margin: 30px 0 40px;
    animation: fadeInDown 1s ease-out;
}

.pixel-text {
    font-family: 'Press Start 2P', cursive;
    font-size: 20px;
    line-height: 1.6;
    text-shadow: 
        0 0 10px #ff00ff,
        0 0 20px #ff00ff,
        0 0 30px #ff00ff,
        2px 2px 0 #00ffff;
    margin-bottom: 15px;
    animation: glow-pulse 2s ease-in-out infinite;
}

.year {
    font-family: 'Press Start 2P', cursive;
    font-size: 48px;
    background: linear-gradient(45deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 3s ease infinite, scale-pulse 2s ease-in-out infinite;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        text-shadow: 
            0 0 10px #ff00ff,
            0 0 20px #ff00ff,
            0 0 30px #ff00ff,
            2px 2px 0 #00ffff;
    }
    50% {
        text-shadow: 
            0 0 20px #ff00ff,
            0 0 30px #ff00ff,
            0 0 40px #ff00ff,
            2px 2px 0 #00ffff;
    }
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes scale-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ==========================================
   都市景観 - ドット絵風
   ========================================== */
.city-landscape {
    position: relative;
    height: 280px;
    margin: 40px 0 60px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 10px;
    animation: fadeIn 1.5s ease-out;
}

/* 都市コンテナ */
.city {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 140px;
}

.city-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: #ffff00;
    text-shadow: 0 0 10px #ffff00, 2px 2px 0 #ff00ff;
    margin-bottom: 15px;
    animation: float 3s ease-in-out infinite;
}

.sendai .city-label {
    animation-delay: 0s;
}

.takasaki .city-label {
    animation-delay: 1.5s;
}

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

/* ビル群 */
.buildings {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    justify-content: center;
}

.building {
    width: 16px;
    height: var(--height, 100px);
    background: linear-gradient(180deg, #1e3a8a 0%, #3b82f6 100%);
    border: 2px solid #60a5fa;
    position: relative;
    box-shadow: 
        inset 0 0 0 1px #1e40af,
        0 0 10px rgba(59, 130, 246, 0.5),
        0 0 20px rgba(59, 130, 246, 0.3);
    image-rendering: pixelated;
    animation: buildingRise 1s ease-out backwards;
    animation-delay: var(--delay, 0s);
}

.building.tall {
    width: 20px;
    background: linear-gradient(180deg, #4c1d95 0%, #7c3aed 100%);
    border-color: #a78bfa;
    box-shadow: 
        inset 0 0 0 1px #5b21b6,
        0 0 15px rgba(124, 58, 237, 0.6),
        0 0 25px rgba(124, 58, 237, 0.4);
}

/* ビルの窓 */
.building::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 4px;
    right: 4px;
    bottom: 8px;
    background-image: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 8px,
            rgba(255, 255, 255, 0.3) 8px,
            rgba(255, 255, 255, 0.3) 10px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 4px,
            rgba(255, 255, 255, 0.3) 4px,
            rgba(255, 255, 255, 0.3) 5px
        );
    animation: windowBlink 2s infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes buildingRise {
    from {
        height: 0;
        opacity: 0;
    }
    to {
        height: var(--height, 100px);
        opacity: 1;
    }
}

@keyframes windowBlink {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.3; }
}

/* ==========================================
   虹の橋
   ========================================== */
.rainbow-bridge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 100px;
    pointer-events: none;
    z-index: 5;
}

.rainbow-arc {
    width: 100%;
    height: 100%;
    border: 8px solid transparent;
    border-radius: 50% 50% 0 0;
    border-top-color: #ff0000;
    position: relative;
    animation: rainbowGlow 3s ease-in-out infinite, arcFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.6));
}

.rainbow-arc::before,
.rainbow-arc::after {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: 0;
    border: 8px solid transparent;
    border-radius: 50% 50% 0 0;
}

.rainbow-arc::before {
    border-top-color: #ffa500;
    top: -16px;
    filter: drop-shadow(0 0 10px rgba(255, 165, 0, 0.6));
}

.rainbow-arc::after {
    border-top-color: #ffff00;
    top: -24px;
    filter: drop-shadow(0 0 10px rgba(255, 255, 0, 0.6));
}

@keyframes rainbowGlow {
    0%, 100% {
        filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.6));
    }
    33% {
        filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8));
    }
    66% {
        filter: drop-shadow(0 0 15px rgba(255, 0, 0, 0.7));
    }
}

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

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

/* ==========================================
   メッセージカード
   ========================================== */
.message-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 25px;
    margin: 30px 0;
    box-shadow: 
        0 10px 40px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(255, 105, 180, 0.3),
        inset 0 0 30px rgba(255, 192, 203, 0.2);
    border: 3px solid #ff69b4;
    animation: cardAppear 1s ease-out 1s backwards;
    position: relative;
}

.message-card::before {
    content: '💌';
    position: absolute;
    top: -20px;
    right: 20px;
    font-size: 40px;
    animation: bounce 2s infinite;
}

@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

.card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 2px dashed #ff69b4;
    padding-bottom: 15px;
}

.to-label {
    font-size: 20px;
    font-weight: 900;
    color: #ff1493;
    text-shadow: 1px 1px 2px rgba(255, 20, 147, 0.3);
}

.sparkle {
    font-size: 24px;
    animation: rotate 3s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.card-body {
    color: #2a2a2a;
    line-height: 1.8;
    font-size: 15px;
}

.message-line {
    margin-bottom: 16px;
}

.message-line.emphasis {
    font-weight: 900;
    font-size: 16px;
    color: #ff1493;
    text-shadow: 0 0 5px rgba(255, 20, 147, 0.2);
    animation: emphasis-pulse 2s ease-in-out infinite;
}

@keyframes emphasis-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.message-line.final {
    font-weight: 700;
    color: #ff69b4;
    font-size: 17px;
    margin-top: 20px;
}

.emoji {
    display: inline-block;
    animation: emoji-bounce 1s ease-in-out infinite;
}

@keyframes emoji-bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.card-footer {
    margin-top: 25px;
    text-align: right;
    border-top: 2px dashed #ff69b4;
    padding-top: 15px;
}

.from-label {
    font-size: 14px;
    color: #ff1493;
    margin-bottom: 5px;
    font-weight: 700;
}

.signature {
    font-size: 18px;
    font-weight: 900;
    color: #ff1493;
    font-style: italic;
}

/* ==========================================
   タップメッセージ
   ========================================== */
.tap-message {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    color: #ff1493;
    padding: 12px 25px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 5px 20px rgba(255, 105, 180, 0.4);
    border: 2px solid #ff69b4;
    z-index: 50;
    animation: tap-pulse 2s ease-in-out infinite;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tap-icon {
    font-size: 20px;
    animation: tap-bounce 1s ease-in-out infinite;
}

@keyframes tap-pulse {
    0%, 100% {
        box-shadow: 0 5px 20px rgba(255, 105, 180, 0.4);
        transform: translateX(-50%) scale(1);
    }
    50% {
        box-shadow: 0 8px 30px rgba(255, 105, 180, 0.6);
        transform: translateX(-50%) scale(1.05);
    }
}

@keyframes tap-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* ==========================================
   レスポンシブ調整
   ========================================== */
@media (max-width: 360px) {
    .pixel-text {
        font-size: 16px;
    }
    
    .year {
        font-size: 40px;
    }
    
    .city-landscape {
        height: 240px;
    }
    
    .building {
        width: 14px;
    }
    
    .building.tall {
        width: 18px;
    }
    
    .rainbow-bridge {
        width: 160px;
    }
}

@media (min-width: 500px) {
    .main-content {
        padding: 30px;
    }
    
    .pixel-text {
        font-size: 24px;
    }
    
    .year {
        font-size: 56px;
    }
}