* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #333;
    overflow: hidden;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.etch-a-sketch {
    background-color: #d11d1d;
    width: 100vw;
    height: 100vh;
    padding: 20px;
    /* Reduced border radius for a full-screen look while keeping the toy feel */
    border-radius: 20px;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.3);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.header {
    flex-shrink: 0;
    padding-bottom: 10px;
}

.header h1 {
    color: #ffd700;
    margin: 0;
    font-size: clamp(1.2rem, 3vw, 2rem);
    letter-spacing: 0.5vw;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

.canvas-container {
    background-color: #444;
    padding: clamp(10px, 2vw, 30px);
    border-radius: 15px;
    box-shadow: inset 0 10px 20px rgba(0,0,0,0.6);
    flex-grow: 1;
    display: flex;
    min-height: 0; /* Critical for flex-grow in some browsers */
}

canvas {
    background-color: #b8c1b8;
    display: block;
    width: 100%;
    height: 100%;
    /* Custom dot cursor */
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><circle cx="5" cy="5" r="2" fill="black"/></svg>') 5 5, crosshair;
    border-radius: 8px;
    border: 4px solid #9ba49b;
}

.controls {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 2vw 5px 2vw;
}

.knob {
    width: clamp(70px, 12vh, 150px);
    height: clamp(70px, 12vh, 150px);
    background: radial-gradient(circle at 30% 30%, #fff, #eee 60%, #ccc);
    border-radius: 50%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4), inset 0 -5px 5px rgba(0,0,0,0.1);
}

#shakeBtn {
    background-color: #ffd700;
    border: none;
    padding: 1.5vh 4vw;
    border-radius: 40px;
    font-weight: bold;
    font-size: clamp(0.9rem, 1.8vw, 1.4rem);
    cursor: pointer;
    box-shadow: 0 6px 0 #b89b00;
    transition: transform 0.1s, box-shadow 0.1s;
}

#shakeBtn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #b89b00;
}