:root {
    --width: 360px;
    --height: 640px;
}

* { box-sizing: border-box; }
html,body { height:100%; }
body {
    margin:0;
    padding:0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #0b0b0b;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100vh;
    overflow:hidden;
}

/* Canvas */
#board {
    display:block;
    width: var(--width);
    height: var(--height);
    background-image: url(flappybirdbg.png);
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.6);
}

/* Menu overlay positioned above canvas, centered */
#menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;           /* flex for centering content */
    flex-direction: column;
    align-items: center;
    justify-content: center;

    opacity: 0;              /* start hidden */
    transition: opacity 0.4s ease; /* smooth fade */
}

#menu.menu-visible {
    opacity: 1;              /* fade in when visible */
}

.menu-card{
    width: calc(var(--width) - 40px);
    background: rgba(0,0,0,0.72);
    backdrop-filter: blur(6px);
    color: #fff;
    padding:16px;
    border-radius:12px;
    text-align:center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}

/* show/hide animations */
.menu-visible { animation: fadeIn .35s ease both; }
@keyframes fadeIn {
    from { opacity:0; transform: translate(-50%,-48%) scale(.98); }
    to   { opacity:1; transform: translate(-50%,-50%) scale(1); }
}

/* Controls */
.controls-row {
    display:flex;
    justify-content:space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.control-block { flex:1; text-align:left; }
.control-block h3 { margin:0 0 6px 0; font-size:14px; color:#ddd; }

.radios label { display:inline-block; margin-right:8px; font-size:13px; color:#ddd; }
.radios input { margin-right:4px; }

/* Skin buttons */
.skins { display:flex; gap:8px; }
.skin-btn {
    border: none;
    background: transparent;
    padding: 4px;
    cursor: pointer;
    border-radius:6px;
}
.skin-btn img { width:36px; height:26px; object-fit:contain; display:block; }
.skin-btn.selected { outline: 2px solid #fff; box-shadow: 0 6px 14px rgba(255,255,255,0.06); }

/* Start button */
.start-btn {
    margin-top: 6px;
    padding: 10px 22px;
    font-size: 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background: #fff;
    color: #000;
    transition: transform .12s ease, box-shadow .12s ease;
}
.start-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.35); }

/* Scoreboard */
.scoreboard { margin-top: 12px; font-size: 15px; color:#e6e6e6; }
#scoreList { list-style:none; margin:6px 0 0; padding:0; display:flex; gap:8px; justify-content:center; }
#scoreList li { background: rgba(255,255,255,0.06); padding:6px 8px; border-radius:6px; min-width:40px; text-align:center; }

/* muted label */
.muted { display:block; margin-top:10px; font-size:13px; color:#cfcfcf; cursor:pointer; }

/* Small responsive tweak */
@media (max-width:420px) {
    .menu-card { width: calc(100vw - 32px); }
}