/* Mobile layer for mkworld_mobile. Loaded after theme.css.
   Desktop (>900px) is untouched: the only rule outside the media query hides
   the mobile top bar, so wide screens render exactly like /mkworld. */

#mobilebar { display: none; }
#gamesmenu { display: none; }
#drawerbg { display: none; }

@media (max-width: 900px) {

/* --- top navigation bar with hamburger --- */
#mobilebar {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #030e6b;
    height: 38px;            /* + 2*6px padding = 50px; the open menu is pinned right below */
    padding: 6px 10px;
    box-shadow: 0 2px 6px #999;
    position: sticky;
    top: 0;
    z-index: 100;
}
#mobilebar img {
    height: 38px;
    width: auto;
    display: block;
}
#hambtn {
    background: none;
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 6px;
    color: #FFFFFF;
    font-size: 22px;
    line-height: 1;
    padding: 6px 10px;
    cursor: pointer;
}
/* mkwrs logo on the right = game-switcher button */
#gamesbtn {
    margin-left: auto;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}
#gamesbtn img {
    height: 30px;
    width: auto;
    display: block;
    /* soft dark glow marks it as the game switcher (follows the PNG's shape) */
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, .8));
}
/* arrow that marks the logo as a menu; points down while the drawer is open */
#gameschev {
    color: #FFFFFF;
    font-size: 15px;
    line-height: 1;
    transition: transform 150ms;
}
body.gamesopen #gameschev { transform: rotate(90deg); }

/* --- right drawer: links to the other games --- */
body.gamesopen #gamesmenu {
    display: block;
    position: fixed;
    top: 50px;
    right: 0;
    bottom: 0;
    width: 190px;
    overflow-y: auto;
    background-color: #030e6b;
    box-shadow: -4px 0 10px rgba(0,0,0,.35);
    z-index: 99;
    padding: 8px 0;
    box-sizing: border-box;
}
#gamesmenu a, #gamesmenu b {
    display: block;
    color: #FFFFFF;
    padding: 9px 18px;      /* comfy tap targets */
    text-decoration: none;
}
#gamesmenu b { background-color: rgba(255,255,255,.15); }  /* current game */
#gamesmenu hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,.35);
    margin: 6px 12px;
}

/* --- sidebar becomes a hamburger-toggled panel --- */
div#nav {
    display: none;
    float: none;
    width: auto;
    margin: 0;
    padding: 8px 8px 0 0;
}
/* Open menu = fixed overlay just below the sticky bar, so it is visible no
   matter how far down the page is scrolled; it scrolls independently. */
body.navopen div#nav {
    display: block;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    background-color: #EEEEEE;
    z-index: 99;
    padding: 8px 8px 16px 0;
    box-sizing: border-box;
}
/* logo already lives in the top bar */
div#nav > div.center { display: none; }
div#navbox li { padding: 3px 0; }   /* bigger tap targets */

/* --- old game-links strip: replaced by the right drawer on mobile --- */
div#header { display: none; }

/* --- single app-style scroller below the bar ------------------------------
   #main_c is the one scrolling region (both axes). This is what lets the
   sticky table headers below actually stick: sticky pins to the nearest
   scrolling ancestor, so the scroller must be the same box that scrolls
   vertically. The bar stays put above it. */
html, body { height: 100%; }
body { overflow: hidden; }
div#main_c {
    height: calc(100vh - 50px);
    height: calc(100dvh - 50px);   /* dvh: track the collapsing browser UI where supported */
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- main content takes the full width; wide tables pan sideways --- */
div#main {
    margin-left: 4px;
    margin-right: 4px;
    border-radius: 12px;
    padding-left: 6px;
    padding-right: 6px;
    min-width: fit-content;   /* the white card grows with wide tables/maps instead of clipping them */
}

/* header row stays visible while scrolling long tables (first header row
   only -- two-row headers would stack on each other) */
div#main table tr:first-child th {
    position: sticky;
    top: 0;
    background-color: #FFFFFF;
    box-shadow: 0 1px 0 lightgray;   /* keeps the row's lower edge visible (borders don't stick) */
    z-index: 5;
}

/* dimmed backdrop behind an open drawer; tap = close (see nav.php) */
body.navopen #drawerbg, body.gamesopen #drawerbg {
    display: block;
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .35);
    z-index: 98;
}
table.st { width: 100%; }
div#p1 { width: 100%; float: none; }

/* CJK names (e.g. ありすがわ) may line-break between any two characters, so a
   squeezed cell renders them vertically, one char per line. keep-all forbids
   those intra-word breaks; the column keeps the name's full width and the
   table scrolls sideways instead. Latin text is unaffected. */
div#main table td { word-break: keep-all; }

/* Content images never overflow the screen. No height:auto here -- it would
   override attribute-sized icons (e.g. the height="24px" discord logo) back to
   their huge natural size; images without size attributes keep aspect anyway. */
div#main img { max-width: 100%; }

/* Map view / WR snapshot map: the track labels are %-positioned over the image
   and don't shrink with it, so a shrunken map turns into overlapping text. Keep
   the map at its designed 868px width instead and pan it sideways inside #main
   (which already scrolls), so labels stay aligned and readable. */
div#main .map-container { min-width: 868px; }
/* ...but images inside tables (stickers, flags, icons) keep their real size and
   width/height attributes -- squeezed cells were crushing them skinny. Wide
   tables already scroll sideways inside #main. */
div#main table img { max-width: none; }

}

/* this game's theme.css sets overflow:auto on #main (float containment on
   desktop); on mobile that makes #main a scroll container and breaks the
   sticky table headers (they pin to #main, which never scrolls). #main_c is
   the only scroller here. */
@media (max-width: 900px) {
div#main { overflow: visible; }
}