* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background-color: #000;
    touch-action: manipulation;
}

#game-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

#game-container {
    position: relative;
    /* 幅: 高さベースで計算、ただし画面幅を超えない、最小幅は280px */
    width: clamp(280px, calc(100dvh * 9 / 16), 100%);
    width: clamp(280px, calc(100vh * 9 / 16), 100%);
    max-height: 100dvh;
    max-height: 100vh;
    aspect-ratio: 9 / 16;
    background-color: #000;
    overflow: hidden;
    container-type: inline-size;
}

@supports not (aspect-ratio: 9 / 16) {
    #game-container {
        width: clamp(280px, calc(100vh * 9 / 16), 100%);
        height: calc(100vw / 9 * 16);
        max-height: 100vh;
        max-height: 100dvh;
    }
}

#game-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

#score-display {
    position: absolute;
    top: 3%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Arial Black', sans-serif;
    font-size: 8cqw;
    color: #fff;
    text-shadow: 0.3cqw 0.3cqw 0.6cqw rgba(0, 0, 0, 0.5);
    z-index: 10;
    pointer-events: none;
}

#start-screen,
#game-over {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 100;
}

#start-screen {
    background: radial-gradient(ellipse at center, #1a0a2e 0%, #0d0015 100%);
}

#game-over h1 {
    font-family: 'Arial Black', sans-serif;
    font-size: 8cqw;
    color: #FF6B6B;
    text-shadow: 0.4cqw 0.4cqw 0.8cqw rgba(0, 0, 0, 0.5);
    margin-bottom: 5%;
}

/* タイトル装飾 - 上部 */
.title-decoration-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 15cqw;
    background: linear-gradient(180deg,
        rgba(255, 215, 0, 0.3) 0%,
        rgba(255, 140, 0, 0.1) 50%,
        transparent 100%);
    border-bottom: 0.3cqw solid rgba(255, 215, 0, 0.5);
}


/* タイトル装飾 - 下部 */
.title-decoration-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 10cqw;
    background: linear-gradient(0deg,
        rgba(255, 69, 0, 0.3) 0%,
        rgba(255, 140, 0, 0.1) 50%,
        transparent 100%);
    border-top: 0.3cqw solid rgba(255, 69, 0, 0.5);
}

/* メインタイトル */
#start-screen h1.game-title {
    font-family: 'Noto Serif JP', 'Georgia', serif;
    font-weight: 900;
    font-size: 16cqw;
    color: #FFD700;
    text-shadow:
        0 0 3cqw rgba(255, 215, 0, 0.8),
        0.3cqw 0.3cqw 0 #FF4500,
        0.6cqw 0.6cqw 0 #CC0000,
        0.9cqw 0.9cqw 0 #880000;
    letter-spacing: 0.5cqw;
    margin-top: -15cqw;
    margin-bottom: 4cqw;
    animation: titlePulse 2s ease-in-out infinite;
    position: relative;
    z-index: 10;
}

@keyframes titlePulse {
    0%, 100% {
        text-shadow:
            0 0 3cqw rgba(255, 215, 0, 0.8),
            0.3cqw 0.3cqw 0 #FF4500,
            0.6cqw 0.6cqw 0 #CC0000,
            0.9cqw 0.9cqw 0 #880000;
    }
    50% {
        text-shadow:
            0 0 6cqw rgba(255, 215, 0, 1),
            0.3cqw 0.3cqw 0 #FF4500,
            0.6cqw 0.6cqw 0 #CC0000,
            0.9cqw 0.9cqw 0 #880000,
            0 0 10cqw rgba(255, 140, 0, 0.5);
    }
}

#start-screen h1.game-title ruby {
    ruby-position: over;
}

#start-screen h1.game-title rt {
    font-family: 'Noto Serif JP', 'Georgia', serif;
    font-size: 5cqw;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 2cqw rgba(255, 255, 255, 0.8);
}

/* サブタイトル */
.title-subtitle {
    font-family: 'Noto Serif JP', serif;
    font-size: 7cqw;
    color: #FF6B6B;
    text-shadow: 0 0 2cqw rgba(255, 107, 107, 0.5);
    margin-bottom: 8cqw;
    letter-spacing: 0.6cqw;
}

/* エビコンテナ */
.title-ebi-container {
    position: relative;
    margin-top: 10cqw;
    margin-bottom: 8cqw;
}

/* オーラエフェクト */
.title-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70cqw;
    height: 70cqw;
    background: radial-gradient(circle,
        rgba(255, 69, 0, 0.4) 0%,
        rgba(255, 140, 0, 0.2) 40%,
        transparent 70%);
    border-radius: 50%;
    animation: auraGlow 1.5s ease-in-out infinite alternate;
}

@keyframes auraGlow {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
}

/* エビ画像 */
.title-ebi {
    width: 60cqw;
    height: 60cqw;
    object-fit: contain;
    position: relative;
    z-index: 5;
    filter: drop-shadow(0 0 4cqw rgba(255, 140, 0, 0.8));
    animation: ebiFloat 3s ease-in-out infinite;
}

@keyframes ebiFloat {
    0%, 100% {
        transform: translateY(0) rotate(-5deg);
    }
    50% {
        transform: translateY(-4cqw) rotate(5deg);
    }
}

/* 吹き出し */
.title-bubble {
    position: absolute;
    top: -30cqw;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 0.6cqw solid #333;
    border-radius: 5cqw;
    padding: 3cqw 5cqw;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 1cqw 1cqw 2cqw rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.title-bubble::before {
    content: '';
    position: absolute;
    bottom: -4cqw;
    left: 50%;
    transform: translateX(-50%);
    border-left: 3cqw solid transparent;
    border-right: 3cqw solid transparent;
    border-top: 4cqw solid #333;
}

.title-bubble::after {
    content: '';
    position: absolute;
    bottom: -3cqw;
    left: 50%;
    transform: translateX(-50%);
    border-left: 2.5cqw solid transparent;
    border-right: 2.5cqw solid transparent;
    border-top: 3.5cqw solid #fff;
}

.bubble-text-1,
.bubble-text-2,
.bubble-text-3 {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
}

.bubble-text-1 {
    font-size: 4.5cqw;
}

.bubble-text-2 {
    font-size: 5.5cqw;
    color: #CC0000;
}

.bubble-text-3 {
    font-size: 5cqw;
    color: #FF4500;
    margin-top: 1cqw;
}

/* スタートボタン */
#start-screen #start-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Noto Serif JP', serif;
    padding: 3cqw 10cqw;
    border: 0.6cqw solid #FFD700;
    border-radius: 3cqw;
    background: linear-gradient(180deg, #CC0000, #8B0000);
    color: #fff;
    cursor: pointer;
    box-shadow:
        0 1.2cqw 0 #5C0000,
        0 0 3cqw rgba(255, 215, 0, 0.5),
        inset 0 0.3cqw 0.8cqw rgba(255, 255, 255, 0.3);
    transition: transform 0.1s, box-shadow 0.1s;
    animation: btnPulse 2s ease-in-out infinite;
}

@keyframes btnPulse {
    0%, 100% {
        box-shadow:
            0 1.2cqw 0 #5C0000,
            0 0 3cqw rgba(255, 215, 0, 0.5),
            inset 0 0.3cqw 0.8cqw rgba(255, 255, 255, 0.3);
    }
    50% {
        box-shadow:
            0 1.2cqw 0 #5C0000,
            0 0 6cqw rgba(255, 215, 0, 0.8),
            inset 0 0.3cqw 0.8cqw rgba(255, 255, 255, 0.3);
    }
}

#start-screen #start-btn:active {
    transform: translateY(0.6cqw);
    box-shadow:
        0 0.6cqw 0 #5C0000,
        0 0 3cqw rgba(255, 215, 0, 0.5);
}

.btn-text {
    font-size: 9cqw;
    font-weight: 900;
    text-shadow: 0.3cqw 0.3cqw 0 #000;
}

.btn-sub {
    font-size: 3cqw;
    font-weight: 700;
    color: #FFD700;
    letter-spacing: 0.3cqw;
}

#game-over p {
    font-family: 'Arial', sans-serif;
    font-size: 6cqw;
    color: #fff;
    margin-bottom: 8%;
}

#game-over-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.game-over-bubble {
    background: #fff;
    border: 0.6cqw solid #333;
    border-radius: 5cqw;
    padding: 4cqw 6cqw;
    position: relative;
    margin-bottom: 3cqw;
}

.game-over-bubble span {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 6cqw;
    color: #333;
}

.game-over-bubble::after {
    content: '';
    position: absolute;
    bottom: -4cqw;
    left: 50%;
    transform: translateX(-50%);
    border-left: 3.5cqw solid transparent;
    border-right: 3.5cqw solid transparent;
    border-top: 4cqw solid #fff;
}

.game-over-bubble::before {
    content: '';
    position: absolute;
    bottom: -5cqw;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4cqw solid transparent;
    border-right: 4cqw solid transparent;
    border-top: 5cqw solid #333;
}

.game-over-ebi {
    width: 40cqw;
    height: 40cqw;
    object-fit: contain;
    margin-bottom: 4cqw;
}

.score-container {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 140, 0, 0.3));
    border: 0.6cqw solid #FFD700;
    border-radius: 3cqw;
    padding: 3cqw 6cqw;
    margin-bottom: 5cqw;
    position: relative;
    box-shadow:
        0 0 3cqw rgba(255, 215, 0, 0.5),
        inset 0 0 3cqw rgba(255, 255, 255, 0.2);
}

.score-label {
    font-family: 'Noto Serif JP', serif;
    font-weight: 700;
    font-size: 5cqw;
    color: #fff;
    text-shadow: 0.2cqw 0.2cqw 0.3cqw #000;
    margin-bottom: 2cqw;
    letter-spacing: 0.8cqw;
}

.score-value-wrapper {
    display: flex;
    justify-content: center;
    align-items: baseline;
}

.score-value {
    font-family: 'Arial Black', sans-serif;
    font-size: 18cqw;
    color: #FFD700;
    text-shadow:
        0.3cqw 0.3cqw 0 #B8860B,
        0.6cqw 0.6cqw 0 #8B6914,
        0 0 4cqw rgba(255, 215, 0, 0.8);
    animation: scoreGlow 1.5s ease-in-out infinite alternate;
}

.score-unit {
    font-family: 'Noto Serif JP', serif;
    font-weight: 900;
    font-size: 8cqw;
    color: #fff;
    text-shadow: 0.2cqw 0.2cqw 0.4cqw #000;
    margin-left: 1cqw;
}

.score-decoration {
    position: absolute;
    top: -1.5cqw;
    left: 50%;
    transform: translateX(-50%);
    width: 12cqw;
    height: 3cqw;
    background: linear-gradient(90deg, transparent, #FFD700, transparent);
    border-radius: 1.5cqw;
}

.score-decoration::after {
    content: '★';
    position: absolute;
    top: -3cqw;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5cqw;
    color: #FFD700;
    text-shadow: 0 0 2cqw rgba(255, 215, 0, 0.8);
}

@keyframes scoreGlow {
    0% {
        text-shadow:
            0.3cqw 0.3cqw 0 #B8860B,
            0.6cqw 0.6cqw 0 #8B6914,
            0 0 3cqw rgba(255, 215, 0, 0.6);
    }
    100% {
        text-shadow:
            0.3cqw 0.3cqw 0 #B8860B,
            0.6cqw 0.6cqw 0 #8B6914,
            0 0 6cqw rgba(255, 215, 0, 1);
    }
}

#restart-btn {
    font-family: 'Noto Serif JP', serif;
    font-size: 8cqw;
    font-weight: 900;
    padding: 3cqw 12cqw;
    border: 0.5cqw solid #FFD700;
    border-radius: 3cqw;
    background: linear-gradient(180deg, #FF6B6B, #EE5A5A);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 1.2cqw 0 #CC4444, 0 0 3cqw rgba(255, 215, 0, 0.3);
    transition: transform 0.1s, box-shadow 0.1s;
    text-shadow: 0.2cqw 0.2cqw 0 #000;
}

#restart-btn:active {
    transform: translateY(0.6cqw);
    box-shadow: 0 0.6cqw 0 #CC4444, 0 0 2cqw rgba(255, 215, 0, 0.3);
}

.hidden {
    display: none !important;
}