* {
    font-family: 'Press Start 2P', cursive;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: black;
}

body {
    display: block;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

h1 {
    margin: 0;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

button {
    border: 0;
    font-size: 16px;
    cursor: pointer;
}

button:hover,
button:focus {
    background-color: #ddd;
    outline: 2px solid #333;
}

#container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#overlappingDiv {
    background-color: rgb(10, 102, 194);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

#attack-bar {
    background-color: white;
    height: 200px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 4px black solid;
    display: flex;
}

@media (max-height: 500px), (max-width: 480px) {
    #attack-bar { height: 140px; }
    h1 { font-size: 11px; }
    #attack-container button { font-size: 10px; padding: 4px 6px; }
}

#attack-container {
    width: 66.66%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

#attackType-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33.33%;
    border-left: 4px black solid;
}

#opponent-health-bar {
    background-color: white;
    width: min(400px, calc(100vw - 20px));
    position: absolute;
    top: 20px;
    left: 10px;
    border: 4px black solid;
    padding: 10px;
    z-index: 5;
}

#recruiter-health-bar {
    background-color: white;
    width: min(400px, calc(100vw - 20px));
    position: absolute;
    bottom: 210px;
    right: 10px;
    border: 4px black solid;
    padding: 10px;
    z-index: 5;
}

@media (max-height: 500px), (max-width: 480px) {
    #recruiter-health-bar { bottom: 150px; }
}

.health-bar {
    height: 8px;
}

.health-bar-default {
    background-color: #ccc;
}

/* The green bar overlays the grey bar.
   FIX: removed margin-top:0 that was overriding .health-bar's margin,
   causing the green bar to render above the grey bar instead of on top. */
.health-bar-current {
    background-color: limegreen;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* Container provides the spacing so both bars stay aligned. */
#health-bar-container {
    position: relative;
    margin-top: 10px;
    height: 8px;
}

#dialogueBox {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: white;
    padding: 12px;
    display: none;
    cursor: pointer;
}

#user-interface {
    display: none;
}

/* ── On-screen D-pad (shown on touch/coarse pointer devices) ──────────── */

#touch-controls {
    position: fixed;
    bottom: 20px;
    left: 16px;
    display: none;
    grid-template-areas:
        ". up ."
        "left . right"
        ". down .";
    grid-template-columns: repeat(3, 60px);
    grid-template-rows: repeat(3, 60px);
    gap: 4px;
    z-index: 20;
    user-select: none;
    -webkit-user-select: none;
}

/* Show D-pad on touch/coarse-pointer devices */
@media (pointer: coarse) {
    #touch-controls { display: grid; }
}

/* During battle the D-pad is hidden via JS; keep pointer-events off then too */
#touch-controls.hidden { display: none !important; }

.dpad-btn {
    background: rgba(255, 255, 255, 0.8);
    border: 3px solid black;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.dpad-btn[data-dir="up"]    { grid-area: up; }
.dpad-btn[data-dir="left"]  { grid-area: left; }
.dpad-btn[data-dir="right"] { grid-area: right; }
.dpad-btn[data-dir="down"]  { grid-area: down; }