/* 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;
}

/* Same reasoning as #mobile-back-btn above: Usage()'s own mobile-only
   copy of the UI() buttons (inc/libtree.php) needs to default to hidden
   OUTSIDE the @media block too, or it would render twice on desktop -
   once from the tree's own .desktop-ui-panel copy, once from this one. */
.mobile-only-ui-panel {
	display: none;
}

@media (max-width: 768px) {

	html, body {
		overflow-x: hidden;
	}

	/* #F1 (index.php) is display:flex, a row - fine when only ONE of its
	   two children (#mobile-tree-panel/#mobile-card-panel) is visible at
	   a time (the has-card cases below), but the landing-page/no-card
	   case now shows BOTH stacked (tree, then Usage()'s summary) - a
	   flex row can't stack two 100vw-wide children, they'd just overflow
	   side by side. display:block lets them fall into normal top-to-
	   bottom flow instead, in DOM order. */
	#mobile-outer-frame {
		display: block !important;
	}

	/* #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 each should just claim the full viewport width on its
	   own, stacked per #mobile-outer-frame above. !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 on top, but
	   Usage()'s own intro text/links (inside #mobile-card-panel,
	   index.php's #F5) are worth keeping visible too, stacked below it -
	   this used to be display:none here, which hid that content
	   entirely rather than just letting it scroll into view under the
	   tree. */
	body:not(.has-card) #mobile-card-panel {
		display: block !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 {
		/* block, not #F2's own default display:flex - matches the plain
		   #mobile-tree-panel{display:block} override further down (that
		   rule alone loses to this one on specificity, since this
		   selector carries 2 extra classes, so it has to be repeated
		   here rather than relied on) */
		display: block !important;
	}
	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: 8px;
		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;
	}

	/* the short-description wrapper (id="card_attrib"'s own parent,
	   inc/libcard.php) sits beside the card image on desktop, so it only
	   ever had padding-left:25px - a gap between it and the image to its
	   left. On mobile the image frame above is no longer floated (see
	   .mobile-card-image-frame), so this wraps onto its own line below
	   the card instead of sitting beside it - but that same left-only
	   padding is still there, shifting the text ~12px right of the
	   card's own actual center instead of removing it once there's
	   nothing to its left to gap against any more. */
	.mobile-card-qualities {
		padding-left: 0 !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;
	}

	/* header/logo div ("666 ΘΩΘ 777" etc., index.php) - dropped
	   entirely on the main index page on mobile (not just shrunk) - it
	   was only ever a site-title/home link, not something worth the
	   vertical space on a small screen. */
	#mobile-tree-header {
		display: none !important;
	}

	/* #treebuffer (index.php's #F3) is position:fixed;width:110%;
	   height:100%;overflow-y:scroll - a "hide the always-visible
	   scrollbar" trick that only makes sense when the tree has its OWN
	   independent, viewport-pinned scroll region, side by side with a
	   separately-scrolling content column (the original desktop layout).
	   On mobile the tree and Usage()'s summary are meant to be ONE
	   continuous page scroll instead (see #mobile-outer-frame above) -
	   left as position:fixed, this box captures scroll input into its
	   OWN internal scroll first (visually: the tree sliding around
	   in place) and only passes it through to the real page scroll once
	   that inner scroll is exhausted, which is what read as "the tree
	   slides halfway up before [the summary] is revealed" instead of a
	   single smooth scroll. Restoring it to a normal in-flow block lets
	   its actual (scaled-down) content height count toward the page's
	   own scrollable height, same as everything below it. */
	#treebuffer {
		position: static !important;
		width: 100% !important;
		height: auto !important;
		top: auto !important;
		overflow-y: visible !important;
	}
	/* #mobile-tree-panel (#F2) used display:flex to support that same
	   fixed/scrollbar-hiding mechanism - with #treebuffer now a normal
	   block above, flex's row-by-default behavior serves no purpose
	   here and only risks fighting the plain top-to-bottom stacking
	   this is going for. */
	#mobile-tree-panel {
		display: block !important;
	}
	#flexscroll {
		display: block !important;
	}

	/* .tree-scale-target (T1, inc/libtree.php) is used TWICE - the main
	   tree (index.php, inside #flexscroll/<center> above) AND Usage()'s
	   own smaller embedded illustration tree (inc/libtree.php, sitting
	   in a totally different parent, nowhere near a <center> tag or any
	   other centering context) - so centering it depends on whatever ITS
	   OWN PARENT happens to do is unreliable and inconsistent between
	   the two (this is what read as "the tree appears slightly to the
	   right" in one place while other elements drifted the other way
	   elsewhere - each was really centered, or not, by a DIFFERENT,
	   uncoordinated mechanism). Also, it has no explicit width of its
	   own, so as a plain block it stretches to its container's full
	   100vw width instead of shrink-wrapping to its real ~500-580px
	   content - which also broke js/mobile.js's own width measurement
	   (it reads this element's rendered width to compute the scale-down
	   factor). width:fit-content fixes the sizing (shrinks to real
	   content width, restoring correct measurement) AND makes it a
	   normal block with a real, defined width - which is exactly what
	   margin-left/right:auto needs to self-center, regardless of
	   whatever surrounds it in either of its two contexts.
	   margin-left/margin-right ONLY - NOT the margin:0 auto shorthand,
	   which also sets margin-top/margin-bottom to 0. js/mobile.js sets
	   margin-bottom on this same element (a negative value, to pull the
	   unused reserved space back in after scaling it down) via a plain
	   inline style - any !important CSS rule beats that regardless of
	   specificity, so the shorthand version of this rule was silently
	   overriding margin-bottom back to 0 every time, leaving the FULL
	   unscaled height reserved below the visually-shrunk tree - a big
	   scrollable blank gap before Usage()'s summary. */
	.tree-scale-target {
		display: block !important;
		width: fit-content !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* the tree's own copy of the "Arrangement:"/image-button panel
	   (DrawTree(), inc/libtree.php) - hidden here in favor of
	   .mobile-only-ui-panel below (see Usage()'s own comment on why). */
	.desktop-ui-panel {
		display: none !important;
	}
	.mobile-only-ui-panel {
		display: block !important;
	}

	/* UI()'s own outer box (both the desktop and mobile-only copies
	   share this class) is a fixed 520px wide, with 3 columns (a
	   deck-picker form + 2 floated image buttons) that assume that much
	   room - cap it so it doesn't force horizontal scrolling on a
	   narrower phone; the floats/inline-block columns inside naturally
	   wrap onto their own lines once it does. Its own inline style is
	   display:inline-block with a plain (non-auto) margin:5px, and
	   neither of its two contexts (.desktop-ui-panel, still inside the
	   tree's own centering; .mobile-only-ui-panel, inside Usage(), which
	   is NOT centered) reliably centers an inline-block child on its
	   own - same fix as .tree-scale-target above, for the same reason. */
	.mobile-ui-frame {
		display: block !important;
		width: fit-content !important;
		max-width: 94vw !important;
		margin: 5px auto !important;
	}

	/* Usage()'s own outer frame (inc/libtree.php) - fixed width:820px,
	   the same overflow problem every other fixed-width block on this
	   page had before its own mobile override. */
	.mobile-usage-frame {
		width: auto !important;
		max-width: 94vw !important;
		margin: 5px auto !important;
	}

	/* "MAIN CONTENT RESTRICTOR" (index.php's #frame around ALL of
	   #mobile-card-panel's content - Usage()'s summary, single-card/
	   group/grid pages, everything) - float:left;width:90% on desktop,
	   to pull that column in tight against the tree beside it. On
	   mobile there's no tree beside it any more (stacked instead), so
	   this just reserves an unused 10% strip on the right that every
	   child's own margin:auto centering (.mobile-usage-frame,
	   .mobile-card-image-frame, etc. above) was centering WITHIN
	   instead of within the true full-width viewport - reading as
	   everything on this side consistently drifting left of center.
	   float:none + width:100% (box-sizing so the existing padding:10px
	   doesn't then push it over 100% and re-introduce the same problem)
	   restores a plain, symmetric full-width box for those children to
	   actually center inside. */
	.mobile-content-restrictor {
		float: none !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* ShowAll()'s outer grid (inc/libcard.php) is display:flex with no
	   flex-wrap - each card's own wrapper div requests float:left, but
	   float is computed to none for a flex item regardless, so without
	   wrap all ~78 cards were trying to fit on a single, enormously wide
	   row (default flex-wrap:nowrap, justify-content:flex-start). Only
	   whatever fit in the viewport's width was ever visible, pinned to
	   the left edge - not "off-center" so much as almost entirely
	   clipped off-screen, which is what read as not centered. wrap lets
	   them fall into multiple rows like a normal grid; center then
	   actually centers each row's worth of cards within it. */
	.mobile-showall-grid {
		flex-wrap: wrap !important;
		justify-content: center !important;
	}
}