@charset "utf-8";
/* ------------------------------------------------------------------ *
 * responsive.css  — mobile overrides for laurts.com (WC2026)
 * Loaded LAST in mainview.php so it wins on source order.
 * EVERY rule lives inside a media query, so the desktop layout
 * (> 768px) is byte-for-byte unchanged.
 * ------------------------------------------------------------------ */

/* ============================ PHONE: <= 768px ============================ */
@media (max-width: 768px) {

	/* Fluid page; drop the 1020px-wide centre artwork that assumes fixed width */
	#container {
		width: 100% !important;
		background-image: none !important;
	}
	#main {
		width: 100% !important;
		margin-top: 0 !important;
	}

	/* Header: kill the 1020px floor that forces a horizontal scrollbar */
	#header {
		min-width: 0 !important;
		height: auto !important;
		padding-bottom: 6px;
	}
	#header_img {
		width: 100% !important;
		background-size: contain;
	}
	#next_match {
		height: auto !important;
		max-height: none !important;
	}

	/* Stack the three floated columns into one (source order puts nav first) */
	#left_col,
	#main_col,
	#right_col {
		float: none !important;
		width: auto !important;
		margin-left: 0 !important;
		border-left: none !important;
		border-right: none !important;
	}
	#main_col {
		border-top: 1px solid #d5d5d5;
	}

	/* Wide tables get their own horizontal scroll instead of blowing out the page */
	.prediction_table {
		display: block;
		width: 100% !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Tap-friendly score boxes (the small size=1 / size=2 inputs, table-agnostic) */
	input[size="1"],
	input[size="2"],
	.prediction_table input[type="text"],
	.prediction_table input:not([type]) {
		min-width: 40px;
		height: 36px;
		font-size: 16px; /* >= 16px stops iOS zoom-on-focus */
		padding: 4px;
		box-sizing: border-box;
	}

	/* Footer fixed widths -> fluid; let the social buttons wrap */
	#footer_end,
	#footer_inner,
	.footer_holder {
		width: 100% !important;
		background-size: cover;
	}
	.facebook, .twitter, .rate, .skoda, .vanahea, .topod, .ilmaennustus, .paypal {
		float: none;
		display: inline-block;
		vertical-align: top;
	}

	/* Shoutbox: widen the textarea (it carries an inline width:133px) */
	#SHOUT {
		width: 100% !important;
		box-sizing: border-box;
	}

	/* Bigger reaction tap targets on touch */
	.shout_react {
		font-size: 18px;
		margin-right: 12px;
	}
	.shout_react .cnt {
		font-size: 12px;
	}

	/* Keep the jQuery-UI dialog within the viewport */
	.ui-dialog {
		max-width: 95vw !important;
		left: 2.5vw !important;
	}
}

/* ============================ TABLET: 769-1024px ============================ */
@media (min-width: 769px) and (max-width: 1024px) {
	#container {
		width: 100% !important;
		max-width: 1020px;
	}
	#header {
		min-width: 0 !important;
	}
	#header_img {
		width: 100% !important;
		background-size: contain;
	}
}