/* --- CSS STYLES --- */
:root {
    --ui-bg: #c0c0c0;
    --ui-border: #808080;
    --ui-dark: #404040;
    --ui-light: #ffffff;
}

body {
    background: var(--ui-bg);
    font-family:Tahoma, sans-serif;
    text-align:center;
    margin: 0;
    padding: 10px;
    box-sizing: border-box;
    overflow-x: hidden;
}

#wrapper {
    display:inline-block;
    background: var(--ui-bg);
    border: 4px solid var(--ui-border);
    padding:6px;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    resize: both;
    min-width: 150px;
    min-height: 150px;
}

#topbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    background: var(--ui-bg);
    border: 3px solid var(--ui-border);
    margin-bottom:6px;
    padding:4px;
}

.digits {
    background:black;
    color:red;
    font-family:'Courier New', monospace;
    font-weight:bold;
    font-size:22px;
    width:70px;
    text-align:right;
    padding:2px;
    border:inset 2px #808080;
    cursor:pointer;
}

#smiley {
    width:32px;
    height:32px;
    border:2px solid var(--ui-border);
    background:var(--ui-bg);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:20px;
    flex-shrink: 0;
}

#board {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
}

canvas {
    display:block;
    background:var(--ui-bg);
    margin:5px 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    width: 100%;
    height: auto;
    max-width: 100%;
    touch-action: none;
}

#stats {
    margin-top:8px;
    font-size:14px;
    cursor:pointer;
    white-space:pre-wrap;
    word-wrap: break-word;
}

button {
    margin:2px;
    padding: 8px 12px;
    font-size: 14px;
}

#settings {
    margin:10px;
    border:2px solid var(--ui-border);
    background:var(--ui-bg);
    padding:5px;
    display:inline-block;
}

#difficultySelect {
    margin-bottom:6px;
}

.leaderboard-entry {
    cursor:pointer;
    font-size:13px;
    text-align:left;
    word-wrap: break-word;
}

#flagToggle {
    display: none;
}

#zoomControls {
    margin: 10px 0;
}

#zoomSlider {
    width: 200px;
    max-width: 90vw;
    vertical-align: middle;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    body {
        padding: 5px;
        overflow-x: hidden;
    }
    
    #wrapper {
        padding: 4px;
        border: 3px solid var(--ui-border);
        max-width: calc(100vw - 18px);
    }
    
    #topbar {
        padding: 3px;
        gap: 8px;
    }
    
    .digits {
        font-size: 18px;
        width: 60px;
        padding: 1px;
    }
    
    #smiley {
        width: 28px;
        height: 28px;
        font-size: 18px;
        border: 1px solid var(--ui-border);
    }
    
    button {
        padding: 6px 10px;
        font-size: 12px;
        margin: 1px;
    }
    
    #settings {
        margin: 8px 5px;
        padding: 4px;
        font-size: 13px;
    }
    
    #stats {
        font-size: 12px;
        margin: 5px;
    }
    
    .leaderboard-entry {
        font-size: 11px;
        padding: 3px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 3px;
        overflow-x: hidden;
    }
    
    #wrapper {
        padding: 2px;
        border: 2px solid var(--ui-border);
        max-width: calc(100vw - 10px);
    }
    
    #topbar {
        padding: 2px;
        gap: 5px;
        margin-bottom: 4px;
    }
    
    .digits {
        font-size: 14px;
        width: 50px;
        padding: 1px;
    }
    
    #smiley {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }
    
    button {
        padding: 5px 8px;
        font-size: 11px;
        margin: 1px 0.5px;
    }
    
    h1 {
        font-size: 20px;
        margin: 5px 0;
    }
    
    #settings {
        margin: 5px 3px;
        padding: 3px;
        font-size: 12px;
    }
    
    #stats {
        font-size: 11px;
        margin: 3px;
    }
    
    .leaderboard-entry {
        font-size: 10px;
    }
}