/* ============================================================
   Mobile / native-app (Capacitor) styles.

   Everything here is scoped to `body.pb-mobile`, which the detection
   script in index.html adds for touch devices and the native iOS/Android
   wrapper in /mobile. `body.pb-native` is added only inside the app shell.
   `body.pb-ingame` is toggled by main.ts while a match is live.
   ============================================================ */

body.pb-mobile {
    /* Kill mobile browser chrome that gets in the way of a game */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    overscroll-behavior: none;
    /* Allow vertical scrolling only (menus can be taller than the screen);
       pan-y also blocks pinch- and double-tap-zoom on the page itself.
       The game screen overrides this to a full lock (see body.pb-ingame). */
    touch-action: pan-y;
}

/* Game screen: lock scrolling completely. #game is position:absolute and
   pinned to the viewport, so this just kills any pan/overscroll/rubber-band. */
body.pb-mobile.pb-ingame {
    touch-action: none;
    overscroll-behavior: none;
}

/* The legacy "needs keyboard & mouse" gate is superseded by touch controls. */
body.pb-mobile #mobile-block {
    display: none !important;
}

/* Let menus scroll instead of clipping on short screens. */
body.pb-mobile #name,
body.pb-mobile #profile-menu,
body.pb-mobile #queue-menu,
body.pb-mobile #esc-menu {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 100vh;
}

/* ===============================================================
   Responsive scaling for small screens. Everything below is scoped
   to body.pb-mobile, so the desktop layout is untouched. Desktop type
   and fixed pixel sizes are tuned for ~1900px wide; they overflow and
   overlap on a phone, so each large parent div is scaled down and made
   to scroll here.
   =============================================================== */

/* The decorative foreground art (#bg2) sits later in the DOM than the
   landing menus, so on a small screen it paints on top of their buttons.
   Lift the interactive menus above it. */
body.pb-mobile #name,
body.pb-mobile #gamemodes,
body.pb-mobile #top-bar {
    z-index: 2;
}

/* The 16:9 art was `cover`, which crops to fill the viewport — too tall in
   landscape (cut off at the bottom) and too wide in portrait. `contain` fits
   the whole graphic within the screen in both orientations; anchor it to the
   top-centre. */
body.pb-mobile #bg2 {
    background-size: contain;
    background-position: top center;
}

/* Landscape: anchor the art to the left edge, vertically centred, so it sits
   beside the right-hand login button column. */
@media (orientation: landscape) {
    body.pb-mobile #bg2 {
        background-position: left center;
    }
}

/* Portrait: scale the art to fill the top 60% of the page (height = 60vh),
   anchored top-centre so it spills equally off the left and right edges.
   (Landscape keeps the contain / left-centre placement above.) */
@media (orientation: portrait) {
    body.pb-mobile #bg2 {
        background-size: auto 60vh;
        background-position: top center;
    }
}

/* ---- Main-menu (mm) buttons: shrink the oversized desktop type. ---- */
body.pb-mobile .mm-buttons {
    font-size: 20pt;
    padding: 10px 14px;
    border-width: 3px;
}

/* Login buttons: span the bottom of the screen instead of sitting in a
   narrow column in the corner. */
body.pb-mobile #name {
    left: 5%;
    right: 5%;
    align-items: stretch;
    gap: 14px;
}

/* ---- Game-modes menu: centre the buttons, but fall back to top-aligned via
   `safe` when the list is taller than the screen so it stays scrollable. ---- */
body.pb-mobile #gamemodes {
    justify-content: center;
    justify-content: safe center;
    gap: 14px;
    padding: 32px 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.pb-mobile #gamemodes > input {
    width: 100%;
    max-width: 480px;
}

body.pb-mobile #game-desc {
    font-size: 15pt;
    margin-top: 16px;
    padding: 0 8px;
}

/* Portrait: centre the login buttons within the bottom half of the screen
   rather than parking them near the very bottom. Giving #name a defined box
   (top 50% -> bottom 0) lets its justify-content:center take effect. */
@media (orientation: portrait) {
    body.pb-mobile #name {
        top: 50%;
        bottom: 0;
        justify-content: center;
    }
}

/* Portrait: reserve two lines of height so the layout doesn't jump when a
   wrapping description replaces the single-line "...". The text stays centred
   within that reserved space. */
@media (orientation: portrait) {
    body.pb-mobile #game-desc {
        line-height: 1.3;
        min-height: 2.6em;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Landscape: park the login buttons (Play as Guest / Sign In / Play) in a
   narrow right-hand column (~30% wide) so the bg2 art, which fills the height
   here, stays visible to the left. Portrait keeps them spanning the bottom. */
@media (orientation: landscape) {
    body.pb-mobile #name {
        left: auto;
        right: 5%;
        width: 30vw;
    }
}

/* ---- Browse-groups list: use the full width on a phone. ---- */
body.pb-mobile #group-menu {
    width: 92vw;
}

/* Back / Reload / Create Group are too wide to sit in a row on a phone —
   stack them. (.gg-buttons is width:100%, so a column makes each full-width.) */
body.pb-mobile .group-bar {
    flex-direction: column;
    gap: 10px;
}

/* Shrink the Name / Server / Players / Status column headers so they fit. */
body.pb-mobile #group-labels > div {
    font-size: 10pt;
    letter-spacing: 0;
}

/* These are all width:100%/capped *plus* padding. With the default content-box
   that padding pushes them past their container (and the viewport), which is
   what made the time-trial/region menus and the browse-groups list too wide.
   border-box folds the padding into the width so they actually fit. */
body.pb-mobile .gg-buttons,
body.pb-mobile .region-select,
body.pb-mobile #group-name-input,
body.pb-mobile #group-list,
body.pb-mobile #group-labels,
body.pb-mobile .group-element {
    box-sizing: border-box;
}

/* Match the smaller headers and let the four columns fit on a narrow phone. */
body.pb-mobile .group-element > div {
    font-size: 11pt;
}

/* ---- Create-group / region-select panels: cap to screen width. ---- */
body.pb-mobile #create-group-inner,
body.pb-mobile #tt-region-inner,
body.pb-mobile #bb-region-inner {
    width: min(92vw, 400px);
}

body.pb-mobile #group-name-input {
    font-size: 20pt;
}

/* ---- Group lobby (shared by Time Trial, Battle-vs-Bots & private
   groups). The desktop 960x600 main panel + side chat/leaderboard push
   the Start button off-screen, so stack everything into one scrollable
   column and shrink the panels to fit. ---- */
body.pb-mobile #group-players {
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 0 32px;
}

body.pb-mobile #group-outer {
    width: 100%;
    align-items: center;
}

body.pb-mobile #group-center {
    flex-direction: column;
    align-items: center;
    width: 100%;
}

body.pb-mobile #group-main {
    /* Without border-box the 92vw width + padding overflowed the viewport,
       cutting the panel off on both sides. */
    box-sizing: border-box;
    width: min(92vw, 700px);
    height: auto;
    padding: 14px;
}

body.pb-mobile #group-chatbox,
body.pb-mobile #leaderboard {
    box-sizing: border-box;
    width: min(92vw, 320px);
    height: 280px;
    margin-left: 0;
    margin-top: 12px;
}

/* Leaderboard: the 100px trophy + timeframe tabs left room for only ~2
   times. Shrink the trophy, give the panel more height, and let the list
   scroll so the whole ranking is reachable on a phone. A fixed height (not
   vh-based) keeps it tall in landscape too — the page itself scrolls. */
body.pb-mobile #leaderboard {
    height: 380px;
}

body.pb-mobile #cupimage {
    width: 52px;
    height: 52px;
    margin-top: 10px;
    margin-bottom: 10px;
}

body.pb-mobile #leaderboard-times {
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    /* Pack entries at the top — the grid otherwise stretches its rows to fill
       the panel, spacing them out when there are only a few times. */
    align-content: start;
}

body.pb-mobile #group-chatmessages {
    height: calc(100% - 60px);
}

/* "Join with code / link" is secondary info — shrink it a lot on a phone. */
body.pb-mobile #join-code-text {
    font-size: 9pt;
}

body.pb-mobile #start {
    width: min(92vw, 700px);
    font-size: 16pt;
}

/* ---- Group lobby in portrait: the In-Game / Spectators lists sit side by
   side, and the map / self-assign / join-code sit side by side — both too
   wide for a phone. Stack each pair into a column so it all reads top-down. */
@media (orientation: portrait) {
    body.pb-mobile #player-lists-container {
        flex-direction: column;
        gap: 12px;
    }

    /* In an auto-height column, flex:1 + min-height:0 would collapse the
       (often empty) drop zones to nothing, so size them explicitly instead. */
    body.pb-mobile #ingame-list-container,
    body.pb-mobile #spectator-list-container {
        flex: none;
        width: 100%;
    }

    body.pb-mobile .player-drop-list {
        flex: none;
        min-height: 96px;
    }

    /* Map selection on top; self-assign + join-code underneath it. */
    body.pb-mobile #settings {
        flex-direction: column;
        gap: 12px;
    }

    body.pb-mobile #map-menu,
    body.pb-mobile #other-settings {
        width: 100%;
        height: auto;
    }
}

/* ---- Matchmaking-queue screen. Desktop is a wide row (queue panel | elo
   leaderboard), and the queue panel is itself a row (profile | join/leave +
   stats). Both squash on a phone so only the profile shows. Stack it all
   into one column: profile, then queue controls, then the leaderboard. ---- */
body.pb-mobile #queue-menu {
    box-sizing: border-box;
    width: 92vw;
    height: auto;
    /* Breathing room above the Back button and below the leaderboard, which
       otherwise sit flush against the top/bottom of the screen. */
    padding-top: 14px;
    padding-bottom: 18px;
}

body.pb-mobile #queue-center {
    flex-direction: column;
    height: auto;
}

body.pb-mobile #queue-area {
    flex-direction: column;
    width: 100%;
    height: auto;
    overflow: visible;
    box-sizing: border-box;
    /* Space below the last stat line and the bottom of the orange box. */
    padding-bottom: 18px;
}

/* Players-in-queue / active-games / last-game stats: smaller, with a
   half-line gap below the animated "..." status above them. */
body.pb-mobile #queue-data {
    font-size: 12pt;
    margin-top: 0.5em;
}

/* The divider only makes sense between side-by-side columns. */
body.pb-mobile #queue-area .vertical-line {
    display: none;
}

body.pb-mobile #queue-left,
body.pb-mobile #queue-right {
    width: 100%;
    height: auto;
}

body.pb-mobile #queue-right > button {
    width: min(80vw, 300px);
}

/* Leaderboard sits below the queue panel, full width and capped so it
   doesn't push the rest off-screen. */
body.pb-mobile #queue-leaderboard {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin-left: 0;
    margin-top: 12px;
}

body.pb-mobile #leaderboard-elos {
    max-height: 40vh;
    align-content: start;
}

/* ===============================================================
   In-game sidebar (timer / power-ups / chat / TT controls)
   =============================================================== */

/* Thinner canvas border + slimmer sidebar so more board fits on small screens. */
body.pb-mobile #myCanvas {
    border-width: 4px;
}

body.pb-mobile #game-sidebar {
    width: 110px;
    margin-left: 6px;
}

body.pb-mobile #timer {
    font-size: 18pt;
}

/* Power-up rows: shrink the icon and let the count dots wrap onto new
   lines instead of overflowing past the black panel. */
body.pb-mobile .powerup-entry {
    flex-wrap: wrap;
}

body.pb-mobile .powerup-entry > img {
    width: 28px;
    height: 28px;
    margin: 5px;
}

body.pb-mobile .powerup-entry > div {
    width: 8px;
    height: 8px;
    margin-right: 4px;
    margin-bottom: 4px;
}

/* Chat: a smaller window and tighter text in the narrow sidebar. */
body.pb-mobile #game-chatmessages {
    height: 16vh;
}

body.pb-mobile #game-sidebar .chatmessage {
    font-size: 7pt;
    line-height: 1.25;
    padding: 2px 3px;
}

body.pb-mobile #tips-container > label {
    font-size: 7pt;
}

body.pb-mobile #chatinput {
    font-size: 10pt;
}

/* Time-trial reset/exit buttons: scale to fit the slim sidebar. */
body.pb-mobile #tt-controls {
    padding: 6px;
}

body.pb-mobile #tt-controls > button {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 20pt;
}

/* ===============================================================
   Portrait phone: stack the sidebar around the board instead of
   beside it — timer + power-ups above the board, chat / TT controls
   below it. Keyed off orientation so rotating the phone mid-session
   reflows automatically, whether they land here or start in landscape.
   =============================================================== */
@media (orientation: portrait) {
    body.pb-mobile #game {
        flex-direction: column;
    }

    /* Dissolve the sidebar box (display: contents) so its children become
       flex items of #game directly and can be ordered around the canvas.
       No JS touches #game-sidebar itself, so this is safe. */
    body.pb-mobile #game-sidebar {
        display: contents;
    }

    body.pb-mobile #timer        { order: 1; }
    body.pb-mobile #powerup-list { order: 2; }
    body.pb-mobile #myCanvas     { order: 3; }
    body.pb-mobile #game-chatbox { order: 4; }
    body.pb-mobile #tt-controls  { order: 5; }

    /* Without the 110px sidebar to size against, the children's width:100%
       would span the whole viewport. Cap them and centre over the board. */
    body.pb-mobile #timer,
    body.pb-mobile #powerup-list,
    body.pb-mobile #game-chatbox,
    body.pb-mobile #tt-controls {
        /* Match the board, which fills ~96% of the page width in portrait. */
        width: min(96vw, 760px);
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }

    body.pb-mobile #myCanvas {
        margin: 8px 0;
    }
}

/* ---------------------------------------------------------------
   On-screen touch controls (D-pad + bomb button)
   --------------------------------------------------------------- */

#touch-controls {
    display: none;
}

body.pb-mobile.pb-ingame #touch-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    /* The container itself ignores touches; only the buttons capture them,
       so taps between the controls still reach the canvas. */
    pointer-events: none;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px max(20px, env(safe-area-inset-right))
             max(20px, env(safe-area-inset-bottom))
             max(20px, env(safe-area-inset-left));
    z-index: 99999;
}

#touch-dpad {
    position: relative;
    width: 186px;
    height: 186px;

    /* The whole pad is one slide surface: it captures the touch and main.ts
       derives the active direction from the finger position, so you can switch
       directions without lifting off. */
    pointer-events: auto;
    touch-action: none;
}

#touch-dpad .touch-btn {
    position: absolute;
    /* Buttons are visual only — the pad container handles all input, otherwise a
       button would capture the pointer and break sliding between directions. */
    pointer-events: none;
}

.touch-btn {
    pointer-events: auto;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    user-select: none;

    display: flex;
    justify-content: center;
    align-items: center;

    width: 62px;
    height: 62px;
    font-size: 22px;
    line-height: 1;
    color: #fff;

    background-color: rgba(0, 0, 0, 0.45);
    border: solid 2px rgba(255, 255, 255, 0.35);
    border-radius: 14px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

    /* Reset default button styling */
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.touch-btn:active,
.touch-btn.pressed {
    /* Matches the orange theme (--myColor2). */
    background-color: rgba(255, 104, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.7);
}

#touch-up    { top: 0;     left: 62px; }
#touch-left  { top: 62px;  left: 0; }
#touch-right { top: 62px;  left: 124px; }
#touch-down  { top: 124px; left: 62px; }

#touch-bomb {
    width: 132px;
    height: 132px;
    font-size: 54px;
    border-radius: 50%;
    align-self: center;
}

/* Landscape phones: smaller controls so they don't cover the board. */
@media (orientation: landscape) and (max-height: 500px) {
    #touch-dpad {
        width: 156px;
        height: 156px;
    }
    .touch-btn {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }
    #touch-up    { left: 52px; }
    #touch-left  { top: 52px; }
    #touch-right { top: 52px; left: 104px; }
    #touch-down  { top: 104px; left: 52px; }
    #touch-bomb {
        width: 108px;
        height: 108px;
        font-size: 44px;
    }
}

/* ---- Game over / results screen ---- */

/* Desktop centres the panel with no scroll, so a panel taller than the phone
   viewport gets clipped at the top (portrait) and the fixed 500px rows spill
   off the sides (landscape). Allow scrolling, fall back to top-alignment when
   the panel doesn't fit, and add breathing room top and bottom. */
body.pb-mobile #win-screen,
body.pb-mobile #queue-win-screen {
    box-sizing: border-box;
    overflow-y: auto;
    justify-content: safe center;
    padding: 24px 0;
}

body.pb-mobile .win-panel {
    box-sizing: border-box;
    max-width: 92vw;
    padding: 20px 18px;
}

body.pb-mobile .win-trophy {
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
}

body.pb-mobile .win-title {
    font-size: 20pt;
    margin-bottom: 14px;
}

/* Replace the fixed 500px width so rows fit within the phone width. */
body.pb-mobile .win-row {
    box-sizing: border-box;
    width: min(80vw, 360px);
    font-size: 14pt;
    padding: 10px 14px;
    margin: 4px 0;
}

body.pb-mobile .win-btn {
    font-size: 14pt;
    padding: 10px 28px;
    margin-top: 16px;
}