*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --green:   #3a7d44;
    --green-d: #2d6235;
    --bg:      #1a1a2e;
    --text:    #f0f0f0;
    --accent:  #f0c040;
}

html, body {
    width: 100%; height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, sans-serif;
    overflow: hidden;
    touch-action: none;
}

#ui {
    position: fixed; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 16px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    z-index: 10;
    font-size: 14px;
    gap: 8px;
}
#ui .label { opacity: .7; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
#ui .val   { font-size: 20px; font-weight: 700; color: var(--accent); line-height: 1; }
#ui .group { display: flex; flex-direction: column; align-items: center; }
#ui .hint  { font-size: 12px; opacity: .65; text-align: center; max-width: 160px; }

#canvas-wrap {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding-top: 48px;
}

canvas { display: block; touch-action: none; }

/* Overlays */
.overlay {
    position: fixed; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,.75);
    backdrop-filter: blur(6px);
    z-index: 20;
    gap: 14px;
    padding: 24px;
    text-align: center;
}
.overlay.hidden { display: none; }

.overlay h2 {
    font-size: clamp(1.6rem, 5vw, 2.4rem);
    color: var(--accent);
}
.overlay p  { font-size: clamp(.9rem, 2.5vw, 1.1rem); opacity: .85; max-width: 340px; }
.overlay .big { font-size: clamp(2rem, 7vw, 3.5rem); font-weight: 700; color: var(--accent); }

.btn {
    padding: 12px 32px;
    font-size: 1rem; font-weight: 700;
    border: none; border-radius: 8px;
    cursor: pointer;
    background: var(--accent); color: #1a1a1a;
    transition: transform .1s, box-shadow .1s;
    box-shadow: 0 4px 14px rgba(240,192,64,.35);
    min-height: 44px;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(240,192,64,.45); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.btn.sec {
    background: transparent; color: var(--text);
    border: 2px solid rgba(255,255,255,.3);
    box-shadow: none;
}
.btn.sec:hover { border-color: var(--text); }

.level-dots {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.dot {
    width: 12px; height: 12px; border-radius: 50%;
    background: rgba(255,255,255,.2);
    transition: background .3s;
}
.dot.done  { background: var(--accent); }
.dot.cur   { background: #fff; }