/* mobile.css -- the phone path. Loads LAST, so its ID selectors beat the 2014 theme's
   without needing !important.

   WHY THIS EXISTS
   Almost every click-through from a TikTok or VK video is on a phone, and the 2014 site is a
   fixed-width, image-driven desktop layout. It used to be served with
   `<meta name="viewport" content="width=980">`, which crushed the whole page to about 40%
   size on a handset: legible only by pinch-zooming. Making a bigger button would not have
   helped, because the button would have been drawn at 18px tall.

   WHY NOT MAKE THE 2014 THEME RESPONSIVE
   Because the theme IS the product on desktop -- a faithful June-2014 dota2.com, mostly
   background-image sprites at fixed widths. Reflowing it would slowly turn it into a generic
   responsive site, which is the one thing it must not become. So: desktop keeps the theme
   pixel-for-pixel, and phones get a purpose-built block plus a stripped, readable version of
   the same content.

   The content is RESTYLED, not hidden. Google indexes mobile-first, so `display:none` on the
   article body would put the site's own SEO work at risk. Only decoration and duplicated
   navigation are hidden. */

#mobileGate { display: none; }

@media (max-width: 700px) {

	/* --- the gate: what a video viewer sees first ------------------------------------- */

	#mobileGate {
		display: block;
		background: #0d0e0f;
		border-bottom: 1px solid #26282a;
		padding: 26px 18px 22px;
		text-align: center;
	}
	#mobileGate .mgInner { max-width: 420px; margin: 0 auto; }
	#mobileGate .mgVer {
		font-family: Georgia, "Times New Roman", serif;
		font-size: 44px; font-weight: bold; color: #c8a04a;
		letter-spacing: 1px; margin: 0 0 2px;
	}
	#mobileGate .mgLede {
		color: #b9b7b3; font-size: 15px; line-height: 1.45; margin: 8px 0 18px;
	}

	/* 48px minimum height: below that a thumb misses it as often as it hits. */
	#mobileGate a.mgPrimary, #mobileGate a.mgSecondary {
		display: block; min-height: 48px; line-height: 48px;
		font-size: 17px; font-weight: bold; text-decoration: none;
		border-radius: 3px; margin-bottom: 10px;
	}
	#mobileGate a.mgPrimary {
		background: #5865f2; color: #fff;            /* Discord's own colour: recognised instantly */
	}
	#mobileGate a.mgSecondary {
		background: #2b3033; color: #e9e7e2; border: 1px solid #3d4245;
	}
	#mobileGate .mgNote {
		color: #8b8f95; font-size: 13px; line-height: 1.45; margin: 4px 0 0;
	}
	#mobileGate .mgLinks { margin-top: 18px; }
	#mobileGate .mgLinks a {
		color: #969aa1; font-size: 13px; text-decoration: none;
		padding: 0 9px; border-left: 1px solid #303436;
	}
	#mobileGate .mgLinks a:first-child { border-left: 0; }

	/* --- strip the desktop chrome ----------------------------------------------------- */

	/* Sprite-based nav, decorative frame edges, the tab strip, and the rail -- the rail is
	   navigation the gate already covers, so on a phone it is a second copy of the same
	   links wrapped in background images. */
	#navBarShadowOnly, #mainContentBottomBG,
	#tabArea, #noTabArea, #primary { display: none; }

	/* !important here is not laziness: site.css forces `#navBarBGRepeat { display: block
	   !important }` because the vendored theme hid the nav by default and revealed it with
	   inline JS. Beating an !important needs one back.
	   This single rule also fixes the layout: the nav is 938px wide, so while it was visible
	   it stretched the layout viewport to 948px and every mobile override rendered correctly
	   but at 40% scale -- which looked exactly like the media query not applying at all. */
	#navBarBGRepeat { display: none !important; }

	/* --- let the article column be the page ------------------------------------------- */

	#mainContentSideBG { background: #0b0c0c; }
	#mainContentBG {
		width: auto; max-width: 100%; margin: 0 0 16px;
		background-image: none; background-color: #17191a;
	}
	#mainContent { width: auto; padding: 18px 16px 4px; }
	#mainLoop { width: auto; float: none; margin: 0; padding: 0; }
	#mainLoop img { max-width: 100%; height: auto; }

	body { font-size: 16px; }                        /* 2014 body copy was 12px */
	h1, .postTitle { font-size: 24px; line-height: 1.25; }
	h2 { font-size: 20px; }
	h3 { font-size: 17px; }
	p, li { line-height: 1.5; }

	/* Page-level buttons stack and become touch-sized rather than inline links. */
	.bigButton, .steamButton, .dangerButton {
		display: block; text-align: center;
		min-height: 46px; line-height: 46px; font-size: 16px;
	}

	#footer { padding: 14px 16px; }
	#footer .legal_footer { font-size: 11px; line-height: 1.5; }

	/* The rail is hidden here, and the queue button lives in it -- so in the ROOM, and only
	   there, the rail comes back carrying nothing but that button. Without this a phone
	   opens /play and finds no way to search for a game.

	   Reached by un-hiding #primary and then hiding its children individually: a child of a
	   display:none parent cannot be shown, so the parent has to come back first. */
	body.roomPage #primary { display: block; float: none; width: auto; min-height: 0; }
	body.roomPage #primary > * { display: none; }
	body.roomPage #primary > #railPlayForm { display: block; width: auto; margin: 0 0 18px; }
	body.roomPage .railPlayBtn { height: 52px; font-size: 17px; }

	/* The ready-check. It is the one piece of the desktop layout that MUST survive here: a
	   phone cannot run the game, but it can accept the match while its owner walks back to
	   the PC, and the accept window is shorter than that walk. */
	.matchCard { width: auto; left: 16px; right: 16px; transform: translateY(-50%); padding: 16px; }
	.matchCard .playFound { font-size: 15px; letter-spacing: 2px; }
	.matchCard .playReadyBtns { display: flex; gap: 8px; margin-top: 12px; }
	.matchCard .playReadyBtns form { flex: 1 1 0; margin: 0; }
	/* The centring transform is overridden above, so the pop-in has to be too or the card
	   lands 50% of its own height too low. */
	@keyframes matchCardIn {
		from { opacity: 0; transform: translateY(-50%) scale(.96); }
		to { opacity: 1; transform: translateY(-50%) scale(1); }
	}
	.matchCard.matchFolded { top: auto; bottom: 12px; left: auto; right: 12px; transform: none; }
}