/* Mobile-only rework of the tree/card layout (index.php's #F1/#F2/#F5).
   Everything here is gated behind the same max-width breakpoint, so none
   of it touches desktop rendering - the tree and card content already
   coexist side by side in the DOM on every page load (see index.php),
   this just toggles which one is visible and rescales what's shown.
   js/mobile.js handles the two things CSS alone can't: computing a real
   scale factor for the tree/card graphics (they're fixed-px-sized), and
   the "<<" button's click handler. */

/* Hidden by default (desktop included) - a bare <button> with no CSS at
   all otherwise renders inline, top-left of the body, which is exactly
   what was showing up (small but visible) on desktop before this rule
   existed outside the @media block below. Only the mobile block ever
   turns it back on. */
#mobile-back-btn {
	display: none;
}

@media (max-width: 768px) {

	html, body {
		overflow-x: hidden;
	}

	/* #mobile-tree-panel/#mobile-card-panel are index.php's #F2/#F5 -
	   desktop pins #F2 to min-width:590px and lets flex share the row;
	   on mobile only one of them is ever visible at a time, so each
	   should just claim the full viewport width on its own. !important
	   is needed here specifically to beat their own inline styles
	   (min-width/width/float set directly in index.php's echo calls). */
	#mobile-tree-panel,
	#mobile-card-panel {
		min-width: 0 !important;
		width: 100vw !important;
		float: none !important;
	}

	/* default (no card/group/grid page active): tree only */
	body:not(.has-card) #mobile-card-panel {
		display: none !important;
	}

	/* a card/group/grid page is active: card only, tree hidden -
	   until the user taps "<<" (adds .mobile-show-tree, see js/mobile.js) */
	body.has-card #mobile-tree-panel {
		display: none !important;
	}
	body.has-card.mobile-show-tree #mobile-tree-panel {
		display: flex !important; /* restores #F2's own default display:flex */
	}
	body.has-card.mobile-show-tree #mobile-card-panel {
		display: none !important;
	}

	/* "<<" back-to-tree button - fixed to the left edge, only relevant
	   (and only shown) while a card/group/grid page is up and the user
	   hasn't already tapped back to the tree. */
	body.has-card:not(.mobile-show-tree) #mobile-back-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 8px;
		top: 10%;
		transform: translateY(-50%);
		width: 44px;
		height: 44px;
		border-radius: 50%;
		border: 1px solid rgba(255,255,255,0.35);
		background: rgba(0,0,0,0.55);
		color: #fff;
		font-size: 22px;
		line-height: 1;
		z-index: 1000;
		padding: 0;
	}

	/* CARD BLOCK-IN FRAME (single card / Sephiroth group / court group -
	   all three share this one div, inc/libcard.php) - desktop floats
	   this to the right of the titleblock text; on mobile there's no
	   room for side-by-side, so stack it above instead (matches the
	   "scroll down past the card to reveal the description" ask). */
	.mobile-card-image-frame {
		float: none !important;
		display: block !important;
		width: auto !important;
		max-width: 94vw !important;
		margin: 5px auto !important;
	}

	/* titleblock div (inc/libcard.php) - desktop reserves a 60px right
	   gutter to sit beside the floated image frame above; not needed
	   once that frame is stacked instead of floated. */
	.mobile-card-titleblock {
		padding: 20px 8px !important;
	}

	/* the 500px-wide title-centering div inside it - fixed width would
	   force horizontal scrolling on anything narrower than ~530px. */
	.mobile-card-title-inner {
		width: auto !important;
		max-width: 94vw !important;
	}

	/* both the title-header and the actual description text sit in a
	   div id="cardblock_content" (reused twice, single-card and group
	   pages alike) with 50px of padding on every side - reasonable on
	   desktop, a large bite out of a ~370px phone screen. */
	#cardblock_content {
		padding: 20px 12px !important;
	}
}