@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;800&display=swap');

        body {
            margin: 0;
            overflow: hidden;
            background-color: #f0f9ff;
            font-family: 'M PLUS Rounded 1c', sans-serif;
            touch-action: none;
            user-select: none;
        }
        #game-container {
            width: 100vw;
            height: 100vh;
        }
        .cartoon-border {
            border: 4px solid #1e293b;
        }
        .cartoon-shadow {
            box-shadow: 4px 4px 0px #1e293b;
        }
        .shake {
            animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
        }
        @keyframes shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }

        /* 悲鳴吹き出し用のアニメーションとスタイル */
        @keyframes scream-pop {
            0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
            10% { transform: translate(-50%, -50px) scale(1.2) rotate(5deg); opacity: 1; }
            20% { transform: translate(-50%, -60px) scale(1) rotate(-2deg); opacity: 1; }
            80% { transform: translate(-50%, -100px) scale(1) rotate(0deg); opacity: 1; }
            100% { transform: translate(-50%, -120px) scale(0.8); opacity: 0; }
        }
        .scream-bubble {
            position: absolute;
            animation: scream-pop 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
            pointer-events: none;
            z-index: 50;
        }
        .scream-bubble::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 10px 10px 0;
            border-style: solid;
            border-color: white transparent transparent transparent;
            z-index: 2;
        }
        .scream-bubble::before {
            content: '';
            position: absolute;
            bottom: -14px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 14px 14px 0;
            border-style: solid;
            border-color: #1e293b transparent transparent transparent;
            z-index: 1;
        }

        /* 褒め言葉・噂吹き出し用のアニメーションとスタイル */
        @keyframes praise-slide-left {
            0% { transform: translateX(-100%); opacity: 0; }
            10% { transform: translateX(10px); opacity: 1; }
            80% { transform: translateX(10px) translateY(-20px); opacity: 1; }
            100% { transform: translateX(10px) translateY(-40px); opacity: 0; }
        }
        @keyframes praise-slide-right {
            0% { transform: translateX(100%); opacity: 0; }
            10% { transform: translateX(-10px); opacity: 1; }
            80% { transform: translateX(-10px) translateY(-20px); opacity: 1; }
            100% { transform: translateX(-10px) translateY(-40px); opacity: 0; }
        }
        .praise-bubble-left {
            position: absolute;
            animation: praise-slide-left 3s ease-out forwards;
            pointer-events: none;
            z-index: 40;
        }
        .praise-bubble-left::after {
            content: '';
            position: absolute;
            top: 50%;
            left: -8px;
            transform: translateY(-50%);
            border-width: 8px 10px 8px 0;
            border-style: solid;
            border-color: transparent #fef08a transparent transparent;
            z-index: 2;
        }
        .praise-bubble-left::before {
            content: '';
            position: absolute;
            top: 50%;
            left: -14px;
            transform: translateY(-50%);
            border-width: 10px 14px 10px 0;
            border-style: solid;
            border-color: transparent #2563eb transparent transparent;
            z-index: 1;
        }
        .praise-bubble-right {
            position: absolute;
            animation: praise-slide-right 3s ease-out forwards;
            pointer-events: none;
            z-index: 40;
        }
        .praise-bubble-right::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -8px;
            transform: translateY(-50%);
            border-width: 8px 0 8px 10px;
            border-style: solid;
            border-color: transparent transparent transparent #fef08a;
            z-index: 2;
        }
        .praise-bubble-right::before {
            content: '';
            position: absolute;
            top: 50%;
            right: -14px;
            transform: translateY(-50%);
            border-width: 10px 0 10px 14px;
            border-style: solid;
            border-color: transparent transparent transparent #2563eb;
            z-index: 1;
        }

        /* 絶望（モノクロ/セピア）フィルター */
        .despair-mode canvas {
            filter: grayscale(100%) sepia(30%) contrast(1.2) brightness(0.9);
            transition: filter 0.5s ease-out;
        }