body {
    margin: 0;
    padding: 0;
    background-color: black;
    color: #0f0;
    font-family: monospace;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    -webkit-touch-callout: none; /* Disable iOS tap highlight */
    -webkit-user-select: none; /* Disable text selection */
    user-select: none;
}

#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #121212;
    overflow: hidden;
}

#portfolio-card {
    position: absolute;
    top: 1vw;
    left: 1vw;
    padding: 1vw;
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid #333;
    border-radius: 5px;
    font-size: clamp(12px, 2vw, 14px);
    min-width: clamp(100px, 20vw, 140px);
    z-index: 10;
}

.card-title {
    color: #888;
    margin-bottom: 0.5vw;
    font-size: clamp(10px, 1.5vw, 12px);
}

.value {
    color: #0f0;
    font-size: clamp(14px, 2.5vw, 16px);
    margin-bottom: 0.5vw;
}

.percent {
    display: inline-block;
    color: #0f0;
    background-color: rgba(0, 255, 0, 0.1);
    padding: clamp(1px, 0.5vw, 2px) clamp(3px, 1vw, 4px);
    border-radius: 3px;
    font-size: clamp(8px, 1.5vw, 10px);
}

.negative {
    color: #f40;
    background-color: rgba(255, 68, 0, 0.1);
}

#game-canvas {
    width: 100%;
    height: 100%;
    touch-action: none; /* Prevent default touch behaviors like scrolling */
}

#game-over {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(18, 18, 18, 0.95);
    padding: clamp(15px, 3vw, 20px);
    border-radius: 8px;
    text-align: center;
    display: none;
    z-index: 20;
    width: clamp(200px, 80vw, 300px);
}

#game-over h2 {
    color: #0f0;
    font-size: clamp(20px, 4vw, 24px);
    margin-bottom: clamp(10px, 2vw, 15px);
}

#final-value, #high-score {
    color: white;
    margin-bottom: clamp(8px, 1.5vw, 10px);
    font-size: clamp(12px, 2vw, 14px);
}

#high-score-value {
    color: #0f0;
}

button {
    background-color: #0f0;
    color: black;
    border: none;
    padding: clamp(8px, 2vw, 10px) clamp(16px, 4vw, 20px);
    border-radius: clamp(15px, 3vw, 20px);
    font-size: clamp(12px, 2vw, 14px);
    cursor: pointer;
    font-family: monospace;
    font-weight: bold;
    margin-top: clamp(10px, 2vw, 15px);
}

button:hover {
    background-color: #00cc00;
}

#score-display {
    position: absolute;
    top: 1vw;
    right: 1vw;
    color: #0f0;
    font-size: clamp(14px, 2.5vw, 16px);
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.7);
    padding: clamp(6px, 1vw, 8px) clamp(10px, 2vw, 12px);
    border-radius: 5px;
    border: 1px solid #333;
}

#difficulty-label {
    position: absolute;
    top: 1vw;
    left: 50%;
    transform: translateX(-50%);
    color: #f40;
    font-size: clamp(14px, 2.5vw, 16px);
    font-weight: bold;
    background-color: rgba(0, 0, 0, 0.7);
    padding: clamp(6px, 1vw, 8px) clamp(10px, 2vw, 12px);
    border-radius: 5px;
    border: 1px solid #333;
}

#sound-toggle {
    position: absolute;
    bottom: 1vw;
    right: 1vw;
    background-color: rgba(0, 0, 0, 0.7);
    color: #0f0;
    border: 1px solid #333;
    border-radius: 5px;
    padding: clamp(6px, 1vw, 8px);
    cursor: pointer;
    font-size: clamp(12px, 2vw, 14px);
}

#start-screen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(18, 18, 18, 0.95);
    padding: clamp(15px, 3vw, 20px);
    border-radius: 8px;
    text-align: center;
    z-index: 30;
    width: clamp(200px, 80vw, 300px);
}

#start-screen h2 {
    color: #0f0;
    font-size: clamp(20px, 4vw, 24px);
    margin-bottom: clamp(10px, 2vw, 15px);
}

#start-screen p {
    color: white;
    font-size: clamp(12px, 2vw, 14px);
    margin-bottom: clamp(10px, 2vw, 15px);
}