* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; overflow:hidden; }

body.menu {
    min-height:100vh;
    background: linear-gradient(135deg,#74b9ff,#a29bfe);
    display:flex; align-items:center; justify-content:center;
    position: relative;
}
#bgGame {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0; opacity: 0.5;
}
.card {
    background:rgba(255,255,255,0.95);
    padding:32px 40px; border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
    width:400px; max-height: 90vh; overflow-y: auto;
    position: relative; z-index: 10;
}
.card h1 { margin:0 0 4px; font-size:32px; }
.card .sub { color:#666; margin:0 0 20px; }
.card label { display:block; margin:12px 0; font-size:14px; color:#333; }
.card input[type=text], .card input:not([type]) {
    width:100%; padding:10px 12px; border:2px solid #ddd;
    border-radius:8px; font-size:16px; margin-top:4px;
}
.card input:focus { border-color:#1e90ff; outline:none; }
.colors { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.sw {
    width:36px; height:36px; border-radius:50%; cursor:pointer;
    border:3px solid transparent; transition:.15s;
}
.sw:has(input:checked) { border-color:#222; transform:scale(1.15); }
.sw input { display:none; }
.skins {
    display:grid; grid-template-columns: repeat(10, 1fr);
    gap:6px; margin-top:8px; max-height: 200px;
    overflow-y: auto; padding: 4px;
}
.sk {
    width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    border-radius:6px; cursor:pointer;
    border:2px solid transparent; transition:.15s;
    font-size: 20px; background: rgba(255,255,255,0.8);
}
.sk:hover { background: rgba(0,0,0,0.05); }
.sk:has(input:checked) {
    border-color:#1e90ff; background: rgba(30,144,255,0.1);
    transform:scale(1.1);
}
.sk input { display:none; }
.card button {
    width:100%; padding:12px; margin-top:18px;
    background:#1e90ff; color:#fff; border:none; border-radius:8px;
    font-size:17px; font-weight:600; cursor:pointer;
}
.card button:hover { background:#3aa0ff; }
.err { background:#ffe0e0; color:#c0392b; padding:8px 12px; border-radius:6px; margin-bottom:10px; }

#game { display:block; cursor:none; }
#hud {
    position:fixed; inset:0; pointer-events:none;
    display:flex; justify-content:space-between; padding:16px;
}
.hud-left, .hud-right {
    background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
    padding:12px 16px; border-radius:10px;
    box-shadow:0 4px 14px rgba(0,0,0,.1);
    pointer-events:auto;
}
.hud-left div { margin:2px 0; font-size:14px; }
.hud-right { min-width:220px; max-height: 400px; overflow-y: auto; }
.hud-right h3 { margin:0 0 8px; font-size:15px; }
#toplist { margin:0; padding-left:22px; font-size:13px; }
#toplist li { margin:3px 0; }
#toplist li.me { font-weight:700; color:#1e90ff; }

.btn-quit {
    margin-top:10px; padding:8px 14px;
    background:#ff4757; color:#fff; border:none; border-radius:6px;
    font-size:13px; font-weight:600; cursor:pointer; width:100%;
}
.btn-quit:hover { background:#ff6b81; }

#minimap-wrap {
    position:fixed; right:16px; bottom:16px;
    width:200px; height:200px;
    background:rgba(255,255,255,0.9);
    border-radius:10px;
    box-shadow:0 4px 14px rgba(0,0,0,.2);
    overflow:hidden;
    pointer-events:none;
    z-index:5;
}
#minimap { display:block; }

.modal {
    position:fixed; inset:0;
    background:rgba(0,0,0,0.6);
    display:flex; align-items:center; justify-content:center;
    z-index:100;
}
.modal.hidden { display:none; }
.modal-box {
    background:#fff; padding:40px 50px; border-radius:16px;
    text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.3);
    min-width:320px;
}
.modal-box h2 { margin:0 0 10px; font-size:32px; color:#c0392b; }
.modal-box p { margin:0 0 20px; font-size:18px; color:#333; }
.btn-restart {
    padding:12px 30px; background:#2ed573; color:#fff;
    border:none; border-radius:8px; font-size:17px; font-weight:600;
    cursor:pointer;
}
.btn-restart:hover { background:#7bed9f; }


#effects {
    font-weight: 600;
    color: #ff6b81;
}