/* 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;
		/* browsers apply an 8px margin to <body> by default (this app has
		   no CSS reset zeroing it out, and no <!DOCTYPE> either) - harmless
		   on desktop, but on mobile every "full width" element below is
		   sized with 100vw/100%, which always equals the FULL viewport
		   width regardless of body's own margin. The element's position
		   still honors that margin though, so it ends up shifted 8px right
		   while still being a full viewport wide - overflowing 8px past
		   the right edge. Confirmed via the ?aligndebug=1 overlay:
		   #flexscroll measured left=8, width=411.4 against a ~411px
		   viewport - exactly this. */
		margin: 0 !important;
	}

	/* #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).
	   display:flex (not block) - Sephiroth/court group pages put all 4
	   cards in here, each individually float:right (SephCardGroup()/
	   CourtCardGroup(), inc/libcard.php) - float has no way to center a
	   wrapping row of items as a group, it just packs them against the
	   right edge, which is what read as the group being "skewed right"
	   instead of centered. Same fix as ShowAll()'s grid
	   (.mobile-showall-grid-inner above): flex ignores each card's own
	   float (computed to none for a flex item) and wrap+justify-content
	   actually centers them. Harmless for the single-card case too - one
	   flex item still just centers itself the same way. */
	.mobile-card-image-frame {
		float: none !important;
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !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) has no explicit width of
	   its own - as a plain block (default, now that its ancestors above
	   are plain blocks instead of fixed/flex) it stretches to fill its
	   full-width container instead of shrink-wrapping to its real
	   ~500-580px content. js/mobile.js's scaleTreeToFit() reads THIS
	   element's own rendered width to compute how much to shrink it by -
	   fed a width that already equals the viewport, it computes almost
	   no scale-down at all, while the actual tree graphic inside (fixed/
	   floated at its own real size) still renders full-size regardless,
	   overflowing past the viewport. inline-block restores shrink-to-fit
	   sizing so that measurement (and the resulting scale) is correct.
	   Deliberately NOT paired with any centering attempt (margin/
	   text-align) this time - horizontal centering here has been
	   unreliable across several different approaches and is being left
	   alone for now; this renders wherever it naturally lands (left-
	   aligned), which is at least fully visible and correctly sized. */
	.tree-scale-target {
		display: inline-block !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 div (.mobile-showall-grid, inc/libcard.php)
	   is display:flex, but it only ever has ONE flex item - a plain
	   (non-flex) inner div wrapping ALL ~78 actual cards, each with its
	   own float:left. flex-wrap/justify-content on the outer div was a
	   no-op: a single flex item's own position isn't affected by
	   justify-content, and the wrapping/centering that actually matters
	   has to happen at the level that's the DIRECT parent of the cards
	   themselves - .mobile-showall-grid-inner (the "clear:all" div).
	   Making THAT flex instead turns every card (previously float:left,
	   which is computed to none for an actual flex item) into a flex
	   item in its own right, so wrap/justify-content now do something. */
	.mobile-showall-grid-inner {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
	}
}
