/* =============================================================
   main.css — Game page styles
   All layout is relative/percentage-based so the game scales
   cleanly without JS intervention (replaces C# resize logic).
   ============================================================= */

/* ---------- Reset & base ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* Background colour is overridden at runtime by JS (pixel-sampling) */
    background-color: #c8a87a;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    font-family: 'Segoe UI', Arial, sans-serif;
    /* Prevent text selection while clicking fast */
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 0.08s ease;
}

/* ---------- Score bar (top) ---------- */
#score-bar {
    display: flex;
    gap: 2rem;
    padding: 0.75rem 2rem;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 0 0 1rem 1rem;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.score-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


/* ---------- Game area ---------- */
#game-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    width: 100%;
}

/* The clickable panel that holds the character image */
#panel-slap {
    position: relative;
    /*
        Original C# panel was 662×674 inside a 1280×720 window.
        We use a max-size with aspect-ratio to keep proportions.
    */
    width: min(662px, 90vw);
    aspect-ratio: 662 / 674;
    cursor: pointer;
    overflow: hidden; /* clip hitboxes to panel bounds */
    /* Subtle shadow for depth */
    transition: transform 0.08s ease;
}

/* Slight press feedback on click */
#panel-slap:active {
    transform: scale(0.97);
}

/* The character image fills the whole panel */
#char-img {
    width: 100%;
    height: 100%;
    /* Use 'contain' to keep aspect ratio without cropping */
    object-fit: contain;
    display: block;
    /* Prevent clicks bubbling up incorrectly */
    pointer-events: none;
    /* Let the browser use its default high-quality downscaling */
    image-rendering: auto;
    /* Force GPU-accelerated compositing for smoother rendering */
    will-change: contents;
    /* High-quality image smoothing (Webkit/Blink) */
    -webkit-font-smoothing: antialiased;
    image-resolution: from-image;
}

/* ---------- Invisible hitboxes ---------- */
/*
    Positions mirror the C# designer values converted to percentages:
      panel     : 662 × 674
      chapeau   : left=81/662=12.2%  top=26/674=3.9%  w=524/662=79.2%  h=187/674=27.7%
      lunette   : left=205/662=31.0% top=219/674=32.5% w=247/662=37.3%  h=95/674=14.1%
*/
.hitbox {
    position: absolute;
    background: transparent;
    border: none;
    cursor: crosshair;
    /* Uncomment the line below to debug hitbox positions: */
    /* outline: 2px dashed red; */
}

#hitbox-chapeau {
    left:   12.2%;
    top:     3.9%;
    width:  79.2%;
    height: 32.7%;
}

#hitbox-lunette {
    left:   31.0%;
    top:    45%;
    width:  37.3%;
    height: 11.1%;
}

/* ---------- Footer ---------- */
#footer-buttons {
    padding: 0.5rem 1rem 1rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    width: 100%;
}

#btn-settings {
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.2s;
}

#btn-settings:hover {
    opacity: 1;
    transform: rotate(20deg);
}

/* ---------- Accessibility: keyboard focus ---------- */
#panel-slap:focus-visible,
.hitbox:focus-visible,
#btn-settings:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 4px;
}