/* mobile.css — the port's phone layout. NOT in the classic.
 *
 * The classic is a fixed-width page from 2005: #container is 755px on themes
 * 0-6, 800px on the logged-out page and 1100px on theme 7; #left and #content
 * are position:absolute; and every screen lays itself out with tables. It never
 * declared a viewport, so a phone drew it as a shrunken desktop page.
 *
 * Everything past the first rule sits behind one media query and does nothing
 * on a screen 800px wide or more: there the page is the classic's, untouched.
 * Under it the columns stack — banner, menu, content — and whatever is still
 * wider than the screen scrolls sideways inside its own box, never the page.
 *
 * Loaded after the theme and app.css by all three frames (_nav, _front and
 * _forum), so on equal specificity it wins. Asked for by the user on
 * 2026-10-10; the divergence is in the README's table and in docs/12.
 */

/* The menu switch, a checkbox and its label, so the menu opens with no script.
 * It only exists on a phone. */
.menutoggle, .menubutton { display: none; }

/* The forum is as wide as the game's container, 1100px on theme 7, and it does
 * not load theme7.css, which narrows the game's page under 1100px. The width
 * attribute is the only thing that says theme 7 here. */
@media (min-width: 800px) and (max-width: 1099px) {
	table.forumframe[width="1100"] { width: 100%; }
}

@media (max-width: 799px) {

/* --- the frame --------------------------------------------------------------
 *
 * #content is the last resort: a screen nothing below catches still scrolls
 * sideways in here, under the banner and the menu, and the page does not. */
#container { width: auto; margin: 0; }
#content, #content.wide {
	position: static;
	width: auto;
	max-width: none;
	margin: 0;
	overflow-x: auto;
}
#left { position: static; float: none; width: auto; }
.gumbi, .gumbi1 { width: auto; }
#main > h2 { width: auto; margin-left: 0; }

/* #right is empty in the port (see the note in _nav.gohtml); it only held
 * theme 7's 300px of width. */
#right { display: none; }

/* The banner's second cell is a 173px picture of the name the logo already
 * says, and with it the two need 418px. */
#banner > table:first-child td + td { display: none; }
td.mega nobr { white-space: normal; }

/* --- the menu ---------------------------------------------------------------
 *
 * Closed until the button is pressed: open, its 22 entries fill a phone screen
 * before the page starts. The row of icons under it — home, profile, notepad,
 * log out — stays visible either way. */
.menutoggle {
	display: block;
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.menubutton {
	display: block;
	padding: 8px 10px;
	font: bold 13px Tahoma, Arial, sans-serif;
	color: #fff;
	background: var(--bs-accent, #990000);
	cursor: pointer;
}
.menubutton::before { content: "\2630\00a0\00a0"; }
.menutoggle:focus-visible + .menubutton { outline: 2px solid #000; }
.menutoggle:not(:checked) ~ .gumbi,
.menutoggle:not(:checked) ~ .gumbi1,
.menutoggle:not(:checked) ~ hr { display: none; }
#left center { padding: 6px 0; }

/* A finger, not a mouse pointer. */
.buttons a, .buttons1 a { padding-top: 8px; padding-bottom: 8px; }

/* --- the classic's columns --------------------------------------------------
 *
 * A classic screen is a table whose cells are td.border boxes: 60/40, 63/37,
 * 75/25, three at 20%. A row holding two or more of them is a row of columns,
 * and here they go one under the other.
 *
 * A row with a single td.border is left alone. It is full width already, and
 * the match report puts such rows inside its score table, which turning them
 * into blocks would cut in pieces.
 *
 * As blocks the boxes lose the gap cellspacing gave them, so they get a margin
 * instead, and each one scrolls its own wide table. */
#content table:has(> tbody > tr > td.border ~ td.border),
#content table:has(> tbody > tr > td.border ~ td.border) > tbody,
#content tr:has(> td.border ~ td.border),
#content tr:has(> td.border ~ td.border) > td {
	display: block;
	width: auto;
}
#content tr:has(> td.border ~ td.border) > td.border {
	margin: 6px 0;
	overflow-x: auto;
}

/* The port's own pages: one .border box, and the two-column flex of app.css. */
#main > .border { margin: 6px 0; overflow-x: auto; }
.cols, .box { flex-direction: column; align-items: stretch; }
.cols .side, .box .side { flex: none; }

/* --- pictures and forms -----------------------------------------------------
 *
 * Only pictures with no height of their own shrink: every one that has one is
 * 245px wide or less and fits. An image map never shrinks — its <area>
 * coordinates are in the picture's own pixels and would stop matching. */
#content img:not([usemap]):not([height]) { max-width: 100%; height: auto; }
textarea, select { max-width: 100%; }

/* Under 16px, Safari on the iPhone zooms the page in on every field it focuses. */
input, select, textarea { font-size: 16px; }

/* --- the forum --------------------------------------------------------------
 *
 * Its own frame, from indexconf.php: menu at 26%, a 2% gap, main at 72%. On a
 * phone the main column goes first and the menu — the forums the reader joined
 * — after it, so a topic opens on the topic. */
table.forumframe,
table.forumframe > tbody,
table.forumframe > tbody > tr > td {
	display: block;
	width: auto;
}
table.forumframe > tbody > tr { display: flex; flex-direction: column; }
table.forumframe > tbody > tr > td { overflow-x: auto; }
table.forumframe > tbody > tr > td:empty { display: none; }
table.forumframe > tbody > tr > td:first-child:not(:only-child) { order: 2; }
table.forumframe > tbody > tr:first-child table td + td { display: none; }

}