/* Baston 2027 - mise en page et commandes tactiles */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #07070d;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    font-family: "Courier New", Courier, monospace;
    color: #fff;
}

#wrap {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
}

#screen {
    display: flex;
    align-items: center;
    justify-content: center;
}

#game {
    display: block;
    background: #000;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    touch-action: none;
    box-shadow: 0 0 0 2px #1b1b2b, 0 0 40px rgba(43, 75, 214, 0.25);
}

/* ---------- commandes tactiles ---------- */
#touch {
    display: none;
    position: fixed;
    inset: 0;
    pointer-events: none;
    touch-action: none;
}

body.touch #touch { display: block; }

#touch > * { pointer-events: auto; touch-action: none; }

#pad {
    position: absolute;
    left: max(14px, env(safe-area-inset-left));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 136px;
    height: 136px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
    border: 2px solid rgba(255, 255, 255, 0.35);
}

#knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.6);
    pointer-events: none;
}

.ar {
    position: absolute;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.55);
    pointer-events: none;
}
.ar-u { left: 50%; top: 6px; transform: translateX(-50%); }
.ar-d { left: 50%; bottom: 6px; transform: translateX(-50%); }
.ar-l { left: 8px; top: 50%; transform: translateY(-50%); }
.ar-r { right: 8px; top: 50%; transform: translateY(-50%); }

#btns {
    position: absolute;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    width: 196px;
    height: 150px;
}

.tb {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.65);
    color: #fff;
    font-family: inherit;
    font-weight: bold;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

.tb.big { width: 74px; height: 74px; font-size: 13px; letter-spacing: 0.5px; }
.tb.punch { right: 84px; bottom: 0; background: rgba(43, 75, 214, 0.55); }
.tb.kick { right: 0; bottom: 22px; background: rgba(216, 52, 58, 0.55); }

.tb.sp { width: 48px; height: 48px; font-size: 19px; background: rgba(246, 215, 67, 0.45); color: #fff; }
.tb.sp1 { right: 140px; bottom: 84px; }
.tb.sp2 { right: 84px; bottom: 100px; }
.tb.sp3 { right: 28px; bottom: 108px; }

.tb.on, .sysb.on { filter: brightness(1.7); transform: scale(0.94); }

#sys {
    position: absolute;
    right: max(10px, env(safe-area-inset-right));
    top: max(8px, env(safe-area-inset-top));
    display: flex;
    gap: 8px;
}

.sysb {
    width: 38px;
    height: 32px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    font-family: inherit;
    font-weight: bold;
    font-size: 14px;
    padding: 0;
}

/* En portrait : l'écran de jeu en haut, les commandes dans l'espace libre en dessous */
@media (orientation: portrait) {
    #wrap { align-items: flex-start; }
    #screen { margin-top: max(8px, env(safe-area-inset-top)); }
    body.touch #pad { bottom: max(11vh, env(safe-area-inset-bottom)); left: 5vw; width: 150px; height: 150px; }
    body.touch #btns { bottom: max(11vh, env(safe-area-inset-bottom)); right: 4vw; }
    body.touch #sys { top: auto; bottom: max(8px, env(safe-area-inset-bottom)); right: 50%; transform: translateX(50%); }
}

noscript {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}