body {
            font-family: 'Inter', sans-serif;
            background-color: #1a202c; /* Dark background */
            color: #e2e8f0; /* Light text */
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        }
        .game-container {
            max-width: 1200px;
            width: 100%;
            background-color: #2d3748; /* Slightly lighter dark background for container */
            border-radius: 1.5rem; /* Rounded corners */
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5); /* Darker shadow */
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }
        .resource-display, .production-area, .control-panel {
            background-color: #4a5568; /* Even lighter dark background for sections */
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }
        .button-primary {
                background-color: #2563eb; /* bg-blue-600 */
                color: #fff; /* text-white */
                font-weight: bold; /* font-bold */
                padding: 0.5rem 1rem; /* py-2 px-4 */
                border-radius: 0.5rem; /* rounded-lg */
                box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* shadow-md */
                transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
                position: relative;
            }
            .button-primary:hover {
                background-color: #1d4ed8; /* hover:bg-blue-700 */
            }
        .button-secondary {
            background-color: #4b5563; /* bg-gray-600 */
            color: #fff; /* text-white */
            font-weight: bold; /* font-bold */
            padding: 0.5rem 1rem; /* py-2 px-4 */
            border-radius: 0.5rem; /* rounded-lg */
            box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* shadow-md */
            transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
            position: relative;
        }
        .button-secondary:not(.button-disabled):hover {
             background-color: #374151; /* hover:bg-gray-700 */
        }

        .button-disabled {
            background-color: #9ca3af; /* bg-gray-400 */
            color: #374151; /* text-gray-700 */
            cursor: not-allowed;
        }
        .mining-rock {
            width: 150px;
            height: 150px;
            background-color: #a0aec0; /* Gray for rock */
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3rem;
            cursor: pointer;
            user-select: none;
            transition: transform 0.1s ease-out;
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
        }
        .mining-rock:active {
            transform: scale(0.95);
        }
        .progress-bar-container {
            background-color: #2d3748;
            border-radius: 9999px; /* Full rounded */
            height: 1.5rem;
            overflow: hidden;
        }
        .progress-bar {
            background-color: #38a169; /* Green for progress */
            height: 100%;
            width: 0%;
            border-radius: 9999px;
            transition: width 0.1s ease-out;
        }
        .tooltip {
            position: absolute;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 0.5rem;
            border-radius: 0.5rem;
            font-size: 0.875rem;
            white-space: nowrap;
            z-index: 10;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease-in-out;
        }
        /* This rule shows tooltip on hover for enabled buttons */
        .button-primary:not(.button-disabled):hover .tooltip,
        .button-secondary:not(.button-disabled):hover .tooltip {
            opacity: 1;
        }
        /* This rule forces tooltip to show on hover for disabled buttons */
        .button-primary.button-disabled:hover .tooltip,
        .button-secondary.button-disabled:hover .tooltip {
            opacity: 1 !important;
        }

        /* Responsive adjustments */
        @media (min-width: 768px) {
            .game-container {
                flex-direction: row;
                flex-wrap: wrap;
            }
            .resource-display {
                flex: 1 1 100%; /* Take full width on medium screens */
            }
            .production-area {
                flex: 1 1 45%; /* Take almost half width */
            }
            .control-panel {
                flex: 1 1 45%; /* Take almost half width */
            }
        }
        @media (min-width: 1024px) {
            .game-container {
                display: grid;
                grid-template-columns: 1fr 1fr; /* 2列均等レイアウトに変更 */
                grid-template-rows: auto auto 1fr; /* 3行目は残りの高さを埋める */
                gap: 1.5rem;
            }
            .mining-area-top {
                grid-column: 1 / 3; /* 2列全体に広げる */
                grid-row: 1 / 2;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin-bottom: 1.5rem;
            }
            .resource-display {
                grid-column: 1 / 3; /* 2列全体に広げる */
                grid-row: 2 / 3;
            }
            .production-area {
                grid-column: 1 / 2; /* 左の列に配置 */
                grid-row: 3 / 4;
            }
            .control-panel {
                grid-column: 2 / 3; /* 右の列に配置 */
                grid-row: 3 / 4;
            }
        }