* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #1a1a2e;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

canvas {
    display: block;
    touch-action: none;              /* game canvas: no browser scroll/zoom gestures */
    -webkit-tap-highlight-color: transparent;
}

/* Fullscreen toggle button (top-right) */
#fs-btn {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    right: calc(env(safe-area-inset-right, 0px) + 50px);
    z-index: 20;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
#fs-btn:hover { background: rgba(0, 0, 0, 0.7); }

/* In-game menu button (top-left). Shown only during a live match (toggled from JS). */
#menu-btn {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: calc(env(safe-area-inset-left, 0px) + 10px);
    z-index: 20;
    width: 42px;
    height: 36px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: #fff;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
#menu-btn:hover { background: rgba(0, 0, 0, 0.7); }

/* Room-code entry for online multiplayer (shown only on the Join screen). */
#mp-code-input {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 25;
    width: 220px;
    height: 56px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 8px;
    font: bold 28px monospace;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(120, 160, 255, 0.6);
    border-radius: 12px;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
#mp-code-input::placeholder { color: #556; letter-spacing: 4px; }

/* ============ Touch controls (phones / tablets) ============ */
body.touch-enabled {
    /* Fill the viewport, respect notches/safe areas */
    height: 100dvh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body.touch-enabled canvas {
    border: none;
}

#touch-controls {
    position: fixed;
    inset: 0;
    z-index: 10;
    pointer-events: none;      /* only children capture touches */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* --- Left: floating joystick zone --- */
/* Inset from the edges so it clears the Android system nav bar, which sits on the
   LEFT or RIGHT in landscape (and the bottom in portrait) depending on rotation. */
.tc-joy-zone {
    position: absolute;
    left: calc(env(safe-area-inset-left, 0px) + 44px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    width: 45%;
    height: 55%;
    pointer-events: auto;
    touch-action: none;
}

.tc-joy-base {
    position: absolute;
    left: 84px;                /* default anchor before first touch */
    top: 62%;
    width: 92px;
    height: 92px;
    margin: -46px 0 0 -46px;   /* center on anchor point */
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
    border: 2px solid rgba(255,255,255,0.45);
    opacity: 0.5;
    transition: opacity 0.15s;
}
.tc-joy-base.active { opacity: 0.95; }

/* Outer "sprint ring" — push the knob out to here to sprint. Lights up amber while sprinting,
   with a SPRINT label, so the two-zone control is obvious. */
.tc-joy-ring {
    position: absolute; left: 50%; top: 50%;
    width: 62px; height: 62px; margin: -31px 0 0 -31px;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.32);
    pointer-events: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.tc-joy-base.sprinting { border-color: rgba(255,210,60,0.95); }
.tc-joy-base.sprinting .tc-joy-ring {
    border-color: rgba(255,210,60,0.95);
    box-shadow: 0 0 16px rgba(255,210,60,0.55), inset 0 0 10px rgba(255,210,60,0.35);
}
.tc-joy-base.sprinting .tc-joy-knob { background: radial-gradient(circle, #ffe27a, #ffb52e); }
.tc-joy-base.sprinting::after {
    content: 'SPRINT';
    position: absolute; left: 50%; top: -20px; transform: translateX(-50%);
    font: 700 11px system-ui; letter-spacing: 1px; color: #ffd23c;
    text-shadow: 0 1px 3px rgba(0,0,0,0.85); pointer-events: none;
}

.tc-joy-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(200,200,200,0.6));
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* --- Right: action buttons (just PASS + SHOOT) --- */
/* Right/bottom offsets clear the Android system nav bar (on the right in landscape,
   on the bottom in portrait) so SHOOT isn't hidden behind it. */
.tc-buttons {
    position: absolute;
    right: calc(env(safe-area-inset-right, 0px) + 28px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    width: 150px;
    height: 92px;
    pointer-events: none;
}

.tc-btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font: bold 12px/1 Arial, sans-serif;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    border: 2px solid rgba(255,255,255,0.5);
    pointer-events: auto;
    touch-action: none;
    transition: transform 0.05s, filter 0.05s;
}
.tc-btn.pressed { transform: scale(0.9); filter: brightness(1.4); }

/* SHOOT bottom-right, PASS to its left */
.tc-shoot {
    right: 4px; bottom: 4px;
    width: 62px; height: 62px;
    font-size: 13px;
    background: rgba(40,180,90,0.85);
}
/* Same button, defending: it slide-tackles — recolour so the mode is obvious. */
.tc-shoot.tc-tackle { background: rgba(230,120,40,0.9); }
.tc-pass {
    right: 76px; bottom: 14px;
    width: 54px; height: 54px;
    background: rgba(60,130,230,0.85);
}