/* ===========================================================================
   shell.css — LANE 1. Runs in the PARENT document (play.mavenro.xyz/), never
   in the engine frame. CONTRACT §2, §3.

   Two jobs:

   1  Suppress the parent page's chrome so the engine frame gets the whole
      viewport. Reversibly: one class on <html>, no DOM removed. Restoring is
      `html.classList.remove('mvm-game')`.

   2  Dress the three surfaces only this lane can see — the rotate gate, the
      fullscreen ask and the chrome-restore tab. No other lane can style them,
      so lane 1 owns their look (the documented exception to §3's "behaviour
      lanes write no colour").

   ───────────────────────────────────────────────────────────────────────────
   ROUND 3 — THE MATERIAL, and why there is a §0 below

   The seam critic: "The parent kit (drawer tab, ask plaque) is flat clip-path
   plates with a 1px gold hairline; the frame kit (stick, orbs, attack, util,
   vitals) is dimensional circular medallions with double bezels and inner
   glow. Same palette, different material language — because it is a different
   lane in a different document with no shared token file."

   Correct, and the fix is §0: one `.mvm-lay` recipe that reproduces lane 4's
   construction rather than approximating it. Read off `evidence/seam/
   iphone14pro.png` at 4x, the frame kit's every surface is three concentric
   layers, not one:

       rim      a 2.5px metal band, lit from the top-left — bright gold at the
                top edge falling to dark bronze at the bottom
       channel  a near-black hairline INSIDE the rim, which is what makes the
                rim read as a raised physical edge rather than a drawn border
       face     deep oxblood, radial glow at the top, vignette at the bottom,
                a 1px warm specular on the top edge

   A `clip-path` clips box-shadow too — an inset hairline simply vanishes along
   the mitres — so the three layers are three real elements, not shadows. Same
   for a border. That is the entire reason `.mvm-lay` exists.

   These are LITERAL COPIES of lane 4's values, matched by eye against the
   rendered frame, because the two lanes are in two documents and cannot share
   a stylesheet. If a shared token file ever lands, this block is what should
   be deleted first. Flagged to the orchestrator.
   ───────────────────────────────────────────────────────────────────────────

   Two host-page facts this file has to survive:

   · brand.css styles EVERY <button> through
     `button:not(.rag-bare):not([class*=rag-nav])…` — specificity 0,7,1. Our
     buttons therefore carry `.rag-bare` (the page's own documented opt-out)
     AND are re-declared here; without both they come out as site buttons.

   · system-ui.css puts `.sys-root` at z-index 9500 and its dock at 9510. The
     §2 ceiling of 9000 is the ENGINE document's ceiling — §2 also says the
     shell's overlay sits above. In the parent it must clear 9510 or the AFK
     window paints over the gate and over the control that brings it back.
   ======================================================================== */

/* ---------------------------------------------------------------- tokens */

html.mvm-shell {
	--mvm-gold-hi: var(--gold-050, #f8e0c0);
	--mvm-gold: var(--gold-100, #f0c898);
	--mvm-gold-dim: var(--gold-300, #c0b078);
	--mvm-gold-low: var(--gold-500, #807040);
	--mvm-gold-deep: var(--gold-700, #584028);
	--mvm-parch: var(--parch-400, #a08b78);

	--mvm-ox-0: var(--ox-950, #070202);
	--mvm-ox-1: var(--ox-850, #150303);
	--mvm-ox-2: #2a0608;
	--mvm-ox-3: var(--ox-550, #430c0e);

	--mvm-gilt: var(--gilt, linear-gradient(178deg, #fde8cb 0%, #f0c898 38%, #a08a52 62%, #6e5040 100%));

	/* ── the frame kit's three layers, matched by eye (see the header) ── */
	--mvm-rim: linear-gradient(166deg, #f6e2b4 0%, #dcb877 22%, #ab8442 52%, #6d4d26 76%, #35240f 100%);
	--mvm-rim-dim: linear-gradient(166deg, #d3b884 0%, #a5813f 44%, #4f3618 100%);
	--mvm-chan: #090202;
	--mvm-face-ox:
		radial-gradient(132% 86% at 50% -16%, rgba(154, 30, 28, .5) 0%, rgba(154, 30, 28, 0) 66%),
		linear-gradient(180deg, #3d0c10 0%, #250609 46%, #0c0203 100%);
	--mvm-face-dark:
		radial-gradient(120% 92% at 32% 6%, rgba(122, 92, 58, .34) 0%, rgba(122, 92, 58, 0) 62%),
		linear-gradient(180deg, #2a1a12 0%, #180d09 52%, #080403 100%);

	--mvm-display: var(--font-display, "Cinzel", "Trajan Pro", "Palatino Linotype", "Book Antiqua", Georgia, serif);
	--mvm-ui: var(--font-ui, "Barlow Semi Condensed", "Roboto Condensed", "Arial Narrow", Helvetica, sans-serif);

	/* Simulated notch. The harness does not emit env(); iphone14pro is 59px on
	   the leading edge (CONTRACT §6) and lane 1 sets it for the PARENT because
	   lane 6's safearea.css is injected into the frame and cannot reach here. */
	--mvm-safe-l: max(env(safe-area-inset-left, 0px), var(--mvm-notch, 0px));
	--mvm-safe-r: max(env(safe-area-inset-right, 0px), var(--mvm-notch, 0px));
	--mvm-safe-t: env(safe-area-inset-top, 0px);
	--mvm-safe-b: env(safe-area-inset-bottom, 0px);
}

/* =========================================================================
   1. CHROME SUPPRESSION — the whole reason lane 1 runs in the parent
   ========================================================================= */

/* The band that costs 46px of 393: logo · PRE-RENEWAL · EPISODE 10.4 · DIAG2 ·
   LEAVE THE GAME. `.play-stage` is `grid-template-rows: auto minmax(0,1fr)`
   with the bar in row 1 and the field in row 2, so taking the bar out of flow
   AND pinning the field to row 1 is what actually hands the pixels to the
   iframe — collapsing the bar alone would leave the field in an `auto` row. */
html.mvm-game .play-stage__bar { display: none !important; }

html.mvm-game .play-stage {
	grid-template-rows: minmax(0, 1fr) !important;
}

html.mvm-game .play-stage__field {
	grid-row: 1 !important;
	grid-column: 1 !important;
	min-height: 0 !important;
}

/* The System UI kit's single fixed root carries BOTH the AFK FARM sidebar
   (.afk-sidebar, ~40% of the screen) and the BERU chip (.sys-layer--dock
   .sys-chip, bottom-right, exactly where the skill cluster goes), plus the
   agency modal. One rule retires all three. The nodes stay in the DOM, keep
   their state, and come back the moment the class is dropped. */
html.mvm-game .sys-root { display: none !important; }

/* Belt and braces: if the kit is ever re-rooted, these still catch it. */
html.mvm-game .afk-sidebar,
html.mvm-game .sys-layer--dock { display: none !important; }

/* The site chrome behind the stage (masthead, ribbon, margins, footer) is
   already covered by .play-stage's fixed backdrop, but a phone that rubber-
   bands reveals it under the notch. Stop the page moving at all. */
html.mvm-game,
html.mvm-game body {
	overflow: hidden !important;
	overscroll-behavior: none !important;
}

/* =========================================================================
   2. CSS-ROTATE FALLBACK — for the browsers that refuse orientation.lock
   (iOS Safari has never shipped it). The stage and our overlay turn together
   so the ask and the restore tab stay square with the game.
   ========================================================================= */

html.mvm-rot,
html.mvm-rot body { overflow: hidden !important; }

html.mvm-rot .play-stage,
html.mvm-rot.mvm-shell #mvm-root {
	position: fixed !important;
	inset: auto !important;
	top: 50% !important;
	left: 50% !important;
	width: var(--mvm-vh, 100vh) !important;
	height: var(--mvm-vw, 100vw) !important;
	transform: translate(-50%, -50%) rotate(90deg) !important;
	transform-origin: 50% 50% !important;
}

/* =========================================================================
   3. THE OVERLAY
   ========================================================================= */

html.mvm-shell #mvm-root {
	position: fixed;
	inset: 0;
	pointer-events: none;
	/* Above .sys-root (9500) and its dock (9510) — see the header note. */
	z-index: 2147483000;
}

html.mvm-shell #mvm-root .mvm-shell,
html.mvm-shell #mvm-root .mvm-shell *,
html.mvm-shell #mvm-root .mvm-shell *::before,
html.mvm-shell #mvm-root .mvm-shell *::after { box-sizing: border-box; }

html.mvm-shell #mvm-root .mvm-shell {
	position: absolute;
	inset: 0;
	pointer-events: none;
	font-family: var(--mvm-ui);
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
}

html.mvm-shell #mvm-root .mvm-shell [hidden] { display: none !important; }

html.mvm-shell #mvm-root .mvm-shell h2,
html.mvm-shell #mvm-root .mvm-shell p { margin: 0; }

/* =========================================================================
   0. THE MATERIAL — rim · channel · face. See the file header.
   Three stacked <i> layers, because clip-path clips shadows and borders away
   along the mitres and lane 4's controls are physically layered, not drawn.
   ========================================================================= */

html.mvm-shell #mvm-root .mvm-lay {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	clip-path: polygon(
		var(--mvm-c) 0,
		calc(100% - var(--mvm-c)) 0,
		100% var(--mvm-c),
		100% calc(100% - var(--mvm-c)),
		calc(100% - var(--mvm-c)) 100%,
		var(--mvm-c) 100%,
		0 calc(100% - var(--mvm-c)),
		0 var(--mvm-c)
	);
}

/* Docked variant: the leading edge is FLUSH (no cut) because the control is
   attached to the screen edge rather than floating in the play field. */
html.mvm-shell #mvm-root .mvm-lay--dock {
	clip-path: polygon(
		0 0,
		calc(100% - var(--mvm-c)) 0,
		100% var(--mvm-c),
		100% calc(100% - var(--mvm-c)),
		calc(100% - var(--mvm-c)) 100%,
		0 100%
	);
}

html.mvm-shell #mvm-root .mvm-lay--rim {
	inset: 0;
	--mvm-c: 11px;
	background: var(--mvm-rim);
}
html.mvm-shell #mvm-root .mvm-lay--chan {
	inset: 2.5px;
	--mvm-c: 9px;
	background: var(--mvm-chan);
}
html.mvm-shell #mvm-root .mvm-lay--face {
	inset: 3.5px;
	--mvm-c: 8px;
	background: var(--mvm-face-ox);
	box-shadow:
		inset 0 1px 0 rgba(248, 220, 174, .16),
		inset 0 -20px 26px -16px rgba(0, 0, 0, .92);
}
html.mvm-shell #mvm-root .mvm-lay--face-dark { background: var(--mvm-face-dark); }

/* The rivets on lane 4's portrait ring, borrowed. Two per plate, not four —
   at 117px wide a full set of four reads as noise. */
html.mvm-shell #mvm-root .mvm-stud {
	position: absolute;
	z-index: 1;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: linear-gradient(180deg, #f8e2b6 0%, #b08c4c 55%, #6a4c22 100%);
	box-shadow: 0 0 2px rgba(0, 0, 0, .9);
	pointer-events: none;
}
html.mvm-shell #mvm-root .mvm-stud[data-s="l"] { left: 8px; top: 9px; }
html.mvm-shell #mvm-root .mvm-stud[data-s="r"] { right: 8px; top: 9px; }

/* -------------------------------------------------- shared: corner ticks */

html.mvm-shell #mvm-root .mvm-corner {
	position: absolute;
	width: 9px;
	height: 9px;
	border: 1px solid var(--mvm-gold-dim);
	opacity: .8;
	pointer-events: none;
}
html.mvm-shell #mvm-root .mvm-corner[data-c="tl"] { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
html.mvm-shell #mvm-root .mvm-corner[data-c="tr"] { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
html.mvm-shell #mvm-root .mvm-corner[data-c="bl"] { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
html.mvm-shell #mvm-root .mvm-corner[data-c="br"] { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* -------------------------------------------------------- shared: plates

   Same three layers as `.mvm-lay`, expressed with the two pseudos a <button>
   has spare, so the label can stay a plain text node. `isolation:isolate`
   makes the negative z-indexes paint above the button's own background (the
   rim) and below the label.                                                */

html.mvm-shell #mvm-root button.mvm-plate {
	--mvm-cut: 11px;
	--mvm-rim-on: var(--mvm-rim-dim);
	--mvm-face: var(--mvm-face-ox);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	min-width: 44px;
	padding: 0 20px;
	margin: 0;
	border: 0 !important;
	border-radius: 0 !important;
	cursor: pointer;
	pointer-events: auto;
	overflow: visible !important;
	isolation: isolate;
	background: var(--mvm-rim-on) !important;
	font-family: var(--mvm-display) !important;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
	clip-path: polygon(var(--mvm-cut) 0, 100% 0, 100% calc(100% - var(--mvm-cut)), calc(100% - var(--mvm-cut)) 100%, 0 100%, 0 var(--mvm-cut));
	transition: filter .16s ease, transform .1s ease;
	touch-action: manipulation;
}

/* channel */
html.mvm-shell #mvm-root button.mvm-plate::before {
	content: "";
	position: absolute;
	inset: 1.5px;
	z-index: -2;
	background: var(--mvm-chan);
	clip-path: polygon(calc(var(--mvm-cut) - 2px) 0, 100% 0, 100% calc(100% - var(--mvm-cut) + 2px), calc(100% - var(--mvm-cut) + 2px) 100%, 0 100%, 0 calc(var(--mvm-cut) - 2px));
	pointer-events: none;
}

/* face */
html.mvm-shell #mvm-root button.mvm-plate::after {
	content: "";
	position: absolute;
	inset: 2.5px;
	z-index: -1;
	background: var(--mvm-face);
	clip-path: polygon(calc(var(--mvm-cut) - 3px) 0, 100% 0, 100% calc(100% - var(--mvm-cut) + 3px), calc(100% - var(--mvm-cut) + 3px) 100%, 0 100%, 0 calc(var(--mvm-cut) - 3px));
	pointer-events: none;
}

/* Primary — struck gilt, oxblood ink. */
html.mvm-shell #mvm-root button.mvm-plate--gilt {
	--mvm-rim-on: var(--mvm-rim);
	--mvm-face: var(--mvm-gilt);
	color: #1a0503 !important;
	text-shadow: 0 1px 0 rgba(255, 240, 214, .6);
	filter: drop-shadow(0 0 12px rgba(240, 200, 152, .3)) drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
}
html.mvm-shell #mvm-root button.mvm-plate--gilt::after {
	box-shadow: inset 0 1px 0 rgba(255, 250, 238, .85), inset 0 -2px 0 rgba(60, 34, 16, .4);
}
html.mvm-shell #mvm-root button.mvm-plate--gilt:active { transform: translateY(1px); filter: brightness(.93) drop-shadow(0 3px 6px rgba(0, 0, 0, .65)); }

/* Ghost — the same bezel, an oxblood face, parchment ink. */
html.mvm-shell #mvm-root button.mvm-plate--ghost {
	--mvm-rim-on: var(--mvm-rim-dim);
	--mvm-face: var(--mvm-face-ox);
	color: var(--mvm-gold-dim) !important;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
	filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .55));
}
html.mvm-shell #mvm-root button.mvm-plate--ghost::after {
	box-shadow: inset 0 1px 0 rgba(248, 220, 174, .13), inset 0 -14px 18px -12px rgba(0, 0, 0, .9);
}
html.mvm-shell #mvm-root button.mvm-plate--ghost:active { transform: translateY(1px); color: var(--mvm-gold-hi) !important; }

/* =========================================================================
   4. ROTATE GATE — portrait only. Full-bleed, and it must read as the game's
   own screen, not as a browser warning.
   ========================================================================= */

html.mvm-shell #mvm-root .mvm-gate {
	position: absolute;
	inset: 0;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(24px + var(--mvm-safe-t)) 22px calc(24px + var(--mvm-safe-b));
	overflow: hidden;
	background:
		radial-gradient(128% 62% at 50% -6%, rgba(122, 13, 13, .55) 0%, rgba(122, 13, 13, 0) 62%),
		radial-gradient(96% 44% at 50% 106%, rgba(67, 12, 14, .62) 0%, rgba(67, 12, 14, 0) 70%),
		linear-gradient(178deg, var(--mvm-ox-1) 0%, var(--mvm-ox-0) 58%, #050101 100%);
	animation: mvm-gate-in .34s cubic-bezier(.2, .8, .3, 1) both;
}

/* Woven stone tooth + a slow vignette. Cheap, and it kills the "flat div". */
html.mvm-shell #mvm-root .mvm-gate::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .5;
	background:
		repeating-linear-gradient(90deg, rgba(240, 200, 152, .035) 0 1px, rgba(0, 0, 0, 0) 1px 4px),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
}
html.mvm-shell #mvm-root .mvm-gate::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: inset 0 0 140px 40px rgba(0, 0, 0, .8);
}

/* Ember motes drifting up out of the dark. */
html.mvm-shell #mvm-root .mvm-embers {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}
html.mvm-shell #mvm-root .mvm-embers i {
	position: absolute;
	bottom: -14px;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: var(--mvm-gold);
	opacity: 0;
	box-shadow: 0 0 8px 1px rgba(240, 200, 152, .8);
	animation: mvm-ember linear infinite;
}

/* Square, hairlined and tick-cornered — the site's own frame language. No
   clip-path here on purpose: the ticks have to overhang the border to read. */
html.mvm-shell #mvm-root .mvm-gate__frame {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	width: min(340px, 100%);
	padding: 30px 22px 26px;
	text-align: center;
	background:
		linear-gradient(180deg, rgba(42, 6, 8, .8) 0%, rgba(7, 2, 2, .92) 100%);
	box-shadow:
		inset 0 0 0 1px rgba(192, 176, 120, .32),
		inset 0 1px 0 rgba(240, 200, 152, .16),
		inset 0 0 60px rgba(122, 13, 13, .3),
		0 26px 60px -24px #000;
}

html.mvm-shell #mvm-root .mvm-gate__col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-width: 0;
}

html.mvm-shell #mvm-root .mvm-crest {
	flex: none; /* an <svg> in a flex row will happily shrink to nothing */
	color: var(--mvm-gold);
	filter: drop-shadow(0 0 14px rgba(240, 200, 152, .38));
}

/* The glyph: a phone that turns. It is the instruction — the words only
   confirm it. */
html.mvm-shell #mvm-root .mvm-turn {
	position: relative;
	width: 116px;
	height: 92px;
	display: grid;
	place-items: center;
}
html.mvm-shell #mvm-root .mvm-turn__arc { position: absolute; inset: 0; color: var(--mvm-gold-low); opacity: .85; }
html.mvm-shell #mvm-root .mvm-turn__dev {
	width: 44px;
	height: 74px;
	border: 2px solid var(--mvm-gold);
	border-radius: 7px;
	background: linear-gradient(160deg, rgba(240, 200, 152, .18), rgba(240, 200, 152, .02));
	box-shadow: 0 0 18px rgba(240, 200, 152, .3), inset 0 0 12px rgba(240, 200, 152, .12);
	transform-origin: 50% 50%;
	animation: mvm-turn 2.6s cubic-bezier(.7, 0, .3, 1) infinite;
}
html.mvm-shell #mvm-root .mvm-turn__dev::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 9px;
	width: 14px;
	height: 3px;
	border-radius: 2px;
	background: var(--mvm-gold-low);
	transform: translateX(-50%);
}

/* The gilt is tiled one line-box tall and repeated, so a title that wraps gets
   the same struck-metal sweep on every line instead of fading to bronze on the
   second one. */
html.mvm-shell #mvm-root .mvm-gate__title {
	font-family: var(--mvm-display);
	font-size: 27px;
	font-weight: 900;
	line-height: 1.12;
	letter-spacing: .1em;
	text-transform: uppercase;
	background-image: var(--mvm-gilt);
	background-size: 100% 1.12em;
	background-repeat: repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .75));
}

html.mvm-shell #mvm-root .mvm-rule {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	color: var(--mvm-gold-low);
	font-size: 8px;
}
html.mvm-shell #mvm-root .mvm-rule::before,
html.mvm-shell #mvm-root .mvm-rule::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(192, 176, 120, .55), transparent);
}

html.mvm-shell #mvm-root .mvm-gate__sub {
	font-family: var(--mvm-ui);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--mvm-parch);
}

html.mvm-shell #mvm-root .mvm-gate__go { margin-top: 4px; width: 100%; min-height: 54px; font-size: 14px; }

html.mvm-shell #mvm-root .mvm-gate__note {
	font-family: var(--mvm-ui);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(160, 139, 120, .62);
}

/* =========================================================================
   5. FULLSCREEN ASK — round 3 rebuild.

   Round 2 shipped this as a full-width plaque pinned to the top centre. It
   spanned x209.5–642 of an 852px viewport — 50.8% — so the very first frame a
   player ever saw had it lying across the vitals plate (clipping SHADOW's
   class to "NOVIC") and blanketing 100% of the middle-45% play field that
   CONTRACT §6 requires stay clear. Two near-identical oxblood plaques stacked
   at the top of the screen read as a rendering bug.

   It is now a COLUMN, not a band, and it lives in the one region of an
   852×393 landscape frame that no lane occupies: the leading-edge column
   between the vitals plate (ends y64) and the thumbstick (starts y272).

   The geometry is defended twice — here in CSS, and again by shell.js, which
   measures the live `.mvm-vitals` rect across the iframe boundary and shrinks
   or drops the card if either bound is ever violated:

     left   safe-l + 52px      clears the notch AND the drawer tab (x…107)
     right  27.5vw − 6px       27.5vw IS the left edge of the middle-45% band
     top    74px, or 8px under the measured vitals plate, whichever is lower
     width  capped at 146px so it never becomes a band again

   It is still an ASK: a question, an accept, and a real decline, all inside
   the user gesture. It is not a modal — the game is plainly running behind
   it, and it sits where a player can ignore it.
   ========================================================================= */

html.mvm-shell #mvm-root .mvm-ask {
	position: absolute;
	top: var(--mvm-ask-top, calc(74px + var(--mvm-safe-t)));
	left: calc(var(--mvm-safe-l) + 52px);
	width: var(--mvm-ask-w, min(146px, calc(27.5vw - var(--mvm-safe-l) - 58px)));
	min-width: 92px;
	padding: 11px 10px 11px;
	pointer-events: auto;
	isolation: isolate;
	filter: drop-shadow(0 0 18px rgba(122, 13, 13, .5)) drop-shadow(0 10px 18px rgba(0, 0, 0, .66));
	animation: mvm-ask-in .32s cubic-bezier(.2, .9, .3, 1) both;
}

html.mvm-shell #mvm-root .mvm-ask__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 9px;
	min-width: 0;
}

html.mvm-shell #mvm-root .mvm-ask__head { display: flex; align-items: flex-start; gap: 5px; min-width: 0; }
html.mvm-shell #mvm-root .mvm-ask__head .mvm-crest { margin-top: 1px; filter: drop-shadow(0 0 6px rgba(240, 200, 152, .45)); }
html.mvm-shell #mvm-root .mvm-ask__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

html.mvm-shell #mvm-root .mvm-ask__kicker {
	font-family: var(--mvm-ui);
	font-size: 7.5px;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--mvm-gold-low);
	line-height: 1.2;
}

html.mvm-shell #mvm-root .mvm-ask__line {
	font-family: var(--mvm-display);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1.15;
	background-image: var(--mvm-gilt);
	background-size: 100% 1.15em;
	background-repeat: repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .85));
}

html.mvm-shell #mvm-root .mvm-ask__acts { display: flex; flex-direction: column; gap: 6px; }
html.mvm-shell #mvm-root .mvm-ask__acts .mvm-plate {
	--mvm-cut: 8px;
	width: 100%;
	min-height: 44px;
	padding: 0 6px;
	font-size: 10px;
	letter-spacing: .1em;
}

/* =========================================================================
   6. THE WAY BACK — `#mvm-chrome-toggle`.

   Round 2 shipped a flat matte plate with a plain hamburger and chevron; an
   independent judge called it "visibly a different (unfinished) kit from
   every other control" that "floats in the play field rather than docking to
   a frame", and the comprehension verdict added that it "gives no hint that
   it is how you get LEAVE THE GAME back".

   All three are addressed structurally, not cosmetically:

     kit     it is now a rail carrying one circular gold-rimmed medallion —
             the exact construction of lane 4's pickup / chat / sit cluster,
             built from the same §0 rim·channel·face layers
     docking left is `var(--mvm-safe-l)` exactly, so the rail is FLUSH with
             the safe edge and its leading corners are square while its
             outboard corners are cut. It reads as attached to the frame
     meaning a "MENU" caption under the glyph, which becomes "HIDE" while the
             chrome is up. A player who wants LEAVE THE GAME now has a word

   Footprint x59–107 · y164.5–228.5 at iphone14pro. CONTRACT §2 reserves
   x63–107 · y165–229; the rail is a superset of that only on the notch side,
   where §6 already forbids any interactive control, so no frame lane loses
   anything. Hit area 48×64 ≥ 44×44.
   ========================================================================= */

html.mvm-shell #mvm-root button.mvm-chrome {
	position: absolute;
	top: 50%;
	left: var(--mvm-safe-l);
	transform: translateY(-50%);
	pointer-events: auto;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 48px;
	height: 64px;
	padding: 0;
	margin: 0;
	border: 0 !important;
	border-radius: 0 !important;
	cursor: pointer;
	overflow: visible !important;
	background: none !important;
	color: var(--mvm-gold);
	filter: drop-shadow(0 0 12px rgba(122, 13, 13, .45)) drop-shadow(0 6px 12px rgba(0, 0, 0, .62));
	transition: filter .16s ease;
	touch-action: manipulation;
}
html.mvm-shell #mvm-root button.mvm-chrome:active { filter: brightness(1.16) drop-shadow(0 4px 8px rgba(0, 0, 0, .62)); }

/* The rail's face is the util cluster's dark tray, not oxblood — lane 4 uses
   the warm near-black behind its medallions and the red only inside the orbs. */
html.mvm-shell #mvm-root .mvm-chrome .mvm-lay--rim { --mvm-c: 12px; }
html.mvm-shell #mvm-root .mvm-chrome .mvm-lay--chan { --mvm-c: 10px; }
html.mvm-shell #mvm-root .mvm-chrome .mvm-lay--face { --mvm-c: 9px; }

/* The medallion. Circular, so a real double bezel is available without
   clip-path: rim = background, channel = ::before, face = ::after. */
html.mvm-shell #mvm-root .mvm-chrome__med {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--mvm-rim);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .8);
	pointer-events: none;
	isolation: isolate;
}
html.mvm-shell #mvm-root .mvm-chrome__med::before {
	content: "";
	position: absolute;
	inset: 2px;
	z-index: -2;
	border-radius: 50%;
	background: var(--mvm-chan);
}
html.mvm-shell #mvm-root .mvm-chrome__med::after {
	content: "";
	position: absolute;
	inset: 3px;
	z-index: -1;
	border-radius: 50%;
	background:
		radial-gradient(78% 66% at 38% 16%, rgba(226, 186, 126, .34) 0%, rgba(226, 186, 126, 0) 68%),
		linear-gradient(180deg, #3a271b 0%, #1d1009 58%, #080403 100%);
	box-shadow:
		inset 0 1px 1px rgba(250, 226, 186, .3),
		inset 0 -6px 9px -4px rgba(0, 0, 0, .9);
}
html.mvm-shell #mvm-root .mvm-chrome__glyph {
	position: relative;
	z-index: 1;
	color: var(--mvm-gold);
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .95));
}

/* Pressed state lives in the CAPTION ("Menu" → "Hide"), not in a rotation:
   round 2 spun a chevron, and a 180° turn on a symmetrical hamburger would be
   an animation that communicates nothing. */
html.mvm-shell #mvm-root button.mvm-chrome[aria-pressed="true"] .mvm-chrome__med { box-shadow: 0 0 10px rgba(240, 200, 152, .45), 0 1px 3px rgba(0, 0, 0, .8); }

html.mvm-shell #mvm-root .mvm-chrome__cap {
	position: relative;
	z-index: 1;
	font-family: var(--mvm-display);
	font-size: 7.5px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--mvm-gold-dim);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .95);
	pointer-events: none;
}

/* =========================================================================
   7. Motion
   ========================================================================= */

@keyframes mvm-gate-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* Slides out of the leading edge, which is where it is anchored. The round-2
   version translated on X by -50% forever because it was centre-pinned. */
@keyframes mvm-ask-in {
	from { opacity: 0; transform: translateX(-12px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes mvm-turn {
	0%, 22% { transform: rotate(0deg); }
	46%, 78% { transform: rotate(-90deg); }
	100% { transform: rotate(0deg); }
}

@keyframes mvm-ember {
	0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); }
	12% { opacity: .95; }
	72% { opacity: .5; }
	100% { opacity: 0; transform: translate3d(var(--mvm-dx, 0px), -78vh, 0) scale(.2); }
}

@media (prefers-reduced-motion: reduce) {
	html.mvm-shell #mvm-root .mvm-embers { display: none; }
	html.mvm-shell #mvm-root .mvm-turn__dev,
	html.mvm-shell #mvm-root .mvm-gate,
	html.mvm-shell #mvm-root .mvm-ask { animation: none; }
}

/* Short landscape (393px tall and less): the gate can still appear if the
   player rotates back mid-session on a small device. Keep it legible. */
@media (orientation: landscape) and (max-height: 460px) {
	html.mvm-shell #mvm-root .mvm-gate__frame { flex-direction: row; width: min(560px, 100%); text-align: left; gap: 20px; padding: 18px 22px; }
	html.mvm-shell #mvm-root .mvm-turn { width: 84px; height: 74px; flex: none; }
	html.mvm-shell #mvm-root .mvm-gate__title { font-size: 22px; }
	html.mvm-shell #mvm-root .mvm-crest { display: none; }
	html.mvm-shell #mvm-root .mvm-gate__col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
	html.mvm-shell #mvm-root .mvm-gate__go { width: auto; }
}

/* The gate hides `.mvm-crest` on short landscape; the ask's crest is 12px and
   must survive that rule, so it is restored at higher specificity. */
@media (orientation: landscape) and (max-height: 460px) {
	html.mvm-shell #mvm-root .mvm-ask__head .mvm-crest { display: block; }
}

/* ===========================================================================
   MOBILE UI REWORK — 2026-08-27, per Ramil.
   Appended block. Everything is gated on html.mvm-game / html.mvm-shell, both
   of which lane 1 sets only after MVM.boot() has accepted the device, so a
   DESKTOP player is untouched.
   ======================================================================== */

/* 1. The left chrome-restore tab goes, as asked.

      This is not free and the trade is recorded: that tab was the only way
      back to LEAVE THE GAME once the masthead is suppressed. The replacement
      is the menu's OPTION entry, which sends Escape and opens the engine's own
      option window (character select / exit). A player is therefore not
      stranded, but the route is now in-game rather than in the page. */
html.mvm-game #mvm-chrome-toggle,
html.mvm-shell #mvm-chrome-toggle { display: none !important; }

/* 2. "Pre-Renewal · Episode 10.4" and the rest of the masthead band.
      html.mvm-game already hid .play-stage__bar; this also covers the
      mvm-shell phase, which is the state a player sees while the client is
      still booting and where the band was still on screen. */
html.mvm-shell .play-stage__bar,
html.mvm-game .play-stage__bar { display: none !important; }

/* 3. AFK FARM and the AI companion come BACK on mobile, as small square icon
      buttons on the mid-right edge.

      They were not merely restyled before — `html.mvm-game .sys-root{display:none}`
      removed the entire System UI layer, so on a phone neither feature existed
      at all. Re-showing the layer means the windows they open must also be
      made to fit a 393px-tall viewport, which is what the last rule does. */
html.mvm-game .sys-root { display: block !important; }
html.mvm-game .sys-layer--dock { display: block !important; }

/* ── the dock sits BESIDE THE BURGER, not down the right edge ──────────────
   Ramil, 2026-08-30: "place the AFK FARM to the Left side of hamburger
   expanding button on the top right? so now on the top right button will be
   AFK button and the Expanding BURGER MENU".

   It used to float at the vertical middle of the trailing edge — measured
   x808..846, y174.5..218.5 — which put it in the same reach as the attack
   button and the skill orbs, and it read as a stray game control rather than
   as chrome.

   The burger it has to pair with lives in the OTHER DOCUMENT: it is
   `.mvm-menu__toggle` inside the engine iframe, measured 40x40 at x802..842,
   y10..50 on the reference screen. That is why the numbers here are absolute
   rather than derived — nothing in this stylesheet can read across the frame
   boundary, and the two are only a pair because both are pinned to the same
   viewport corner:

       right 58 = 10 (the burger's own gutter) + 40 (burger) + 8 (gap)
       top   10 = the burger's own top, the chip being resized to match it

   `flex-direction: row` because the dock is a flex column by default and a
   second chip would otherwise grow DOWNWARDS across the menu grid when it is
   open. Today there is only one chip — the AI companion's was removed with the
   chat windows on 2026-08-29 — but a row is what this position wants if the
   kit ever puts one back.

   KNOWN COUPLING, and it is not obvious: `padClearance()` in extras.js insets
   the number pad past whatever `.sys-chip` it finds on the trailing edge,
   because the chips paint OVER the iframe and win the hit test. Moving them to
   the top means that inset is no longer wanted, and extras.js now also checks
   that a chip reaches into the bottom band before counting it. Move the dock
   back down and that check is what has to move with it. */
html.mvm-game .sys-layer--dock {
	position: fixed !important;
	right: calc((58px * var(--mvm-chip-k, 1)) + max(env(safe-area-inset-right, 0px), 0px)) !important;
	left: auto !important;
	top: calc((10px * var(--mvm-chip-k, 1)) + max(env(safe-area-inset-top, 0px), 0px)) !important;
	bottom: auto !important;
	transform: none !important;
	display: flex !important;
	flex-direction: row !important;
	gap: 6px !important;
	width: auto !important;
	z-index: 9400 !important;
	pointer-events: none;
}

/* ── keeping step with a burger this document cannot see ───────────────────
   The burger scales with hud.css's `--k`, which lives on the ENGINE frame's
   <html>. This is the parent document; it cannot read that variable, and a chip
   pinned at a fixed 58px stops being 8px from a burger that grew.

   Measured on an iPad mini (1133x744, --k 1.28): the burger renders 51.2px wide
   and reaches x1071.8, while a 40px chip at right:58 ends at x1075 — a 3px
   overlap, and the two stopped reading as a pair.

   So the breakpoints are MIRRORED here, verbatim from hud.css:1719-1732. They
   have to be kept in step by hand; there is no shared token file across the
   frame boundary (that is on the known-remaining list). If the HUD's ladder
   ever changes, this block changes with it — the symptom is the AFK chip
   drifting away from the burger or landing on top of it. */
html.mvm-game { --mvm-chip-k: 1; }
@media (max-height: 340px)                         { html.mvm-game { --mvm-chip-k: .9; } }
@media (min-height: 341px) and (max-height: 380px) { html.mvm-game { --mvm-chip-k: .95; } }
@media (min-height: 381px) and (max-height: 440px) { html.mvm-game { --mvm-chip-k: 1; } }
@media (min-height: 441px) and (max-height: 560px) { html.mvm-game { --mvm-chip-k: 1.14; } }
@media (min-height: 561px)                         { html.mvm-game { --mvm-chip-k: 1.28; } }
@media (max-width: 720px)                          { html.mvm-game { --mvm-chip-k: .93; } }
@media (max-width: 620px)                          { html.mvm-game { --mvm-chip-k: .9; } }

/* ── the AFK chip's icon ───────────────────────────────────────────────────
   Ramil: "Generate Image Icon For AFK BUTTON."

   It used to draw the WORD "AFK" through `content`. That was the previous
   lane's way out of a real fight, recorded here because the fight has not gone
   away: the kit runs `sys-anim-chip`, a shimmer ANIMATION, on this very
   pseudo-element, and a running animation outranks every normal declaration no
   matter how specific the selector. The icon rule below is (0,4,2) against the
   kit's (0,1,1) and would still lose without `!important` and `animation:
   none`. Both are still here for that reason, not out of habit.

   THE ART MATCHES THE BURGER, WHICH IS THE WHOLE POINT OF THE PAIR — and the
   burger is NOT one of the gold plates. `.mvm-menu__toggle` 8px to the right
   is not an image at all: menu.css:76 draws three bars in `--ui-line`
   (#86cdef). That is the CHROME idiom, and it is a different idiom from the
   gold the action controls use.

   So the plate was generated in gold, because that is what the house generator
   produces and what gives a strong silhouette, and then mapped onto the chrome
   ramp by luminance (tools/tint-afk.py). Shipping the gold was tried first and
   looked wrong beside a blue burger — rendered side by side at real size in
   features/mobile-icons/evidence/afk-pair-compare.png, which is why that file
   exists.

   WHY AN HOURGLASS. Three subjects were generated and looked at at 18, 24 and
   46 px rather than argued about: an hourglass, a crescent moon, and a sword
   inside a circular arrow. The sword-in-a-loop says the most and was cut
   anyway — `shuffle.png` in the same set is already two curved arrows forming
   a loop, and two icons with the same silhouette on one screen is worse than
   one icon that is merely adequate. The crescent reads as "night", not "away
   from keyboard". The hourglass is the only X-waisted shape in the set, so it
   cannot be confused with anything else, and "time passing while you are away"
   is exactly what the button means.

   INLINE, like the two chips below it. /var/www/ro-play/play/mobile/ serves
   four files and has no icons directory; a data URI needs no new route, no
   second request and no cache-busting story.

   24px inside the 40px chip, scaled by --mvm-chip-k with everything else here.
   Not the 19px the SVG chips use: at 19 the hourglass frame closes up into a
   blob, measured on the 18px contact sheet. */
html.mvm-game .sys-layer--dock .sys-chip:nth-of-type(1)::before {
	content: '' !important;
	background: url("data:image/png;base64,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") no-repeat 50% 50% !important;
	background-size: calc(24px * var(--mvm-chip-k, 1)) calc(24px * var(--mvm-chip-k, 1)) !important;
	animation: none !important;
	display: block !important;
	position: absolute !important;
	inset: 0 !important;
	opacity: 1 !important;
	font-size: 0 !important;
}

/* Cube buttons: the label is folded away and the chip becomes a 40px square in
   the same light-blue-on-smoked-glass idiom as the in-frame HUD. font-size:0
   hides the text without removing it, so the accessible name survives.
   40, not the original 38, so it is the same square as `.mvm-menu__toggle`
   sitting 8px to its right — measured 38x44 against the burger's 40x40, and a
   pair of chrome buttons that are nearly-but-not-quite the same size reads as
   a mistake. min/max-height together because something in the kit was winning
   over plain `height` and leaving it 44 tall. */
html.mvm-game .sys-layer--dock .sys-chip {
	pointer-events: auto;
	position: relative;
	width: calc(40px * var(--mvm-chip-k, 1)) !important;
	min-width: calc(40px * var(--mvm-chip-k, 1)) !important;
	height: calc(40px * var(--mvm-chip-k, 1)) !important;
	min-height: calc(40px * var(--mvm-chip-k, 1)) !important;
	max-height: calc(40px * var(--mvm-chip-k, 1)) !important;
	padding: 0 !important;
	border-radius: 9px !important;
	font-size: 0 !important;
	overflow: hidden;
	background: rgba(9, 18, 27, .72) !important;
	backdrop-filter: blur(2px);
	box-shadow:
		0 0 0 1.3px rgba(134, 205, 239, .5),
		0 4px 12px rgba(0, 0, 0, .45) !important;
}
html.mvm-game .sys-layer--dock .sys-chip > * { display: none !important; }

/* 44px hit floor without growing the 38px box (CONTRACT §6). */
html.mvm-game .sys-layer--dock .sys-chip::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

/* Icons are inline SVG data-URIs rather than text glyphs so they stay crisp at
   DPR 3 and match the menu's 1.5px stroke weight. First chip = AFK farm
   (a sprout), second = the AI companion (a speech mark). Order is the dock's
   own; if the kit ever reorders them these two swap and that is the one thing
   to check after a kit upgrade. */
html.mvm-game .sys-layer--dock .sys-chip::before {
	content: '';
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 19px 19px;
	opacity: .92;
}
html.mvm-game .sys-layer--dock .sys-chip:nth-of-type(1)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386cdef' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20v-7'/%3E%3Cpath d='M12 13c0-3.3 2.4-6 6-6 0 3.3-2.7 6-6 6Z'/%3E%3Cpath d='M12 15c0-2.8-2-5-5-5 0 2.8 2.2 5 5 5Z'/%3E%3C/svg%3E");
}
html.mvm-game .sys-layer--dock .sys-chip:nth-of-type(2)::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386cdef' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12.5a7 7 0 0 1-7 7H8l-4 2.5.9-3.6A7 7 0 0 1 13 5.5a7 7 0 0 1 7 7Z'/%3E%3Cpath d='M9.5 12.5h.01M13 12.5h.01M16.5 12.5h.01'/%3E%3C/svg%3E");
}

/* 4. The windows those chips open have to fit a phone. The AFK panel is a
      500px desktop surface and its own phone branch only fires below 560px
      viewport width — in LANDSCAPE the viewport is 852, so that branch never
      applies and the panel would run off the bottom of a 393px screen. */
html.mvm-game .sys-root .sys-window {
	max-width: min(92vw, 520px) !important;
	max-height: calc(100vh - 16px) !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translate(-50%, -50%) !important;
	z-index: 9500 !important;
}
html.mvm-game .sys-root .sys-window .sys-body { overflow-y: auto !important; }

/* ── AFK FARM must be able to OPEN ────────────────────────────────────────
   Re-showing .sys-root and .sys-layer--dock brought the chips back, but the
   original rule further up still force-hides the window itself:

       html.mvm-game .afk-sidebar,
       html.mvm-game .sys-layer--dock { display: none !important; }

   ...and the kit ALSO writes an inline `display:none` on a minimised window.
   An author !important beats an inline declaration, so this counter-rule is
   what actually opens it.

   Scoped to .afk-sidebar only. A first attempt forced every .sys-window and
   opened the AI companion alongside it; the kit can keep owning that one.
   ------------------------------------------------------------------------ */
/* CONDITIONAL, not unconditional. Forcing display:flex opened the panel at
   boot and left it open over 500px of an 852px screen. The kit expresses
   "minimised" by writing an inline `display: none` on the window, so an
   attribute substring match reproduces exactly the kit's own intent: counter
   the original blanket hide, but stand down the moment the kit has minimised
   it. Restore then works from the chip, and minimise still closes it. */
html.mvm-game .sys-root .sys-window.afk-sidebar:not([style*="display: none"]) {
	display: flex !important;
}

/* ===========================================================================
   ROTATE GATE + FULLSCREEN ASK — retinted to the game client's UI, 2026-08-27.

   These two were missed when the HUD went light-blue: they live in the PARENT
   document and still carried the original gold/oxblood (the crest glow was
   rgba(240,200,152,.45)), so the first two things a player sees on a phone
   looked nothing like the game they were about to enter.

   The parent cannot read hud.css's --ui-* tokens — different document — so the
   palette is restated here. Same values, one source of drift to watch.
   ======================================================================== */

html.mvm-shell #mvm-root .mvm-gate,
html.mvm-shell #mvm-root .mvm-ask {
	--g-line: #86cdef;
	--g-ink: #dcefff;
	--g-ink-dim: rgba(220, 239, 255, .66);
	--g-glass: rgba(9, 18, 27, .82);
}

/* -- the rotate gate ----------------------------------------------------- */

html.mvm-shell #mvm-root .mvm-gate {
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(24, 54, 76, .55) 0%, rgba(4, 10, 16, .92) 70%),
		rgba(4, 10, 16, .95);
	backdrop-filter: blur(3px);
}
html.mvm-shell #mvm-root .mvm-gate::before,
html.mvm-shell #mvm-root .mvm-gate::after { opacity: .28; filter: hue-rotate(160deg) saturate(.6); }

html.mvm-shell #mvm-root .mvm-gate__frame {
	background: var(--g-glass) !important;
	border-radius: 12px !important;
	box-shadow:
		0 0 0 1.4px rgba(134, 205, 239, .5),
		0 0 30px rgba(134, 205, 239, .12),
		0 16px 40px rgba(0, 0, 0, .6) !important;
}
html.mvm-shell #mvm-root .mvm-gate__title {
	color: var(--g-ink) !important;
	text-shadow: 0 0 14px rgba(134, 205, 239, .45), 0 2px 3px rgba(0, 0, 0, .8) !important;
	background: none !important;
	-webkit-text-fill-color: currentColor !important;
}
html.mvm-shell #mvm-root .mvm-gate__sub,
html.mvm-shell #mvm-root .mvm-gate__note { color: var(--g-ink-dim) !important; }

/* -- the fullscreen ask -------------------------------------------------- */

html.mvm-shell #mvm-root .mvm-ask {
	background: var(--g-glass) !important;
	border-radius: 10px !important;
	backdrop-filter: blur(3px);
	box-shadow:
		0 0 0 1.2px rgba(134, 205, 239, .45),
		0 10px 26px rgba(0, 0, 0, .55) !important;
}
html.mvm-shell #mvm-root .mvm-ask::before,
html.mvm-shell #mvm-root .mvm-ask::after { display: none !important; }
html.mvm-shell #mvm-root .mvm-ask__kicker { color: var(--g-line) !important; }
html.mvm-shell #mvm-root .mvm-ask__line { color: var(--g-ink) !important; }

/* -- buttons, both surfaces ---------------------------------------------- */

html.mvm-shell #mvm-root .mvm-plate,
html.mvm-shell #mvm-root .mvm-gate__go {
	background: rgba(134, 205, 239, .14) !important;
	border-radius: 8px !important;
	color: var(--g-ink) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .8) !important;
	box-shadow: inset 0 0 0 1.2px rgba(134, 205, 239, .55) !important;
}
html.mvm-shell #mvm-root .mvm-plate::before,
html.mvm-shell #mvm-root .mvm-plate::after,
html.mvm-shell #mvm-root .mvm-gate__go::before,
html.mvm-shell #mvm-root .mvm-gate__go::after { display: none !important; }
html.mvm-shell #mvm-root .mvm-plate:active,
html.mvm-shell #mvm-root .mvm-gate__go:active {
	background: rgba(134, 205, 239, .26) !important;
	transform: translateY(1px);
}
/* The secondary action must not compete with the primary one. */
html.mvm-shell #mvm-root .mvm-ask__acts .mvm-plate:last-child {
	background: rgba(255, 255, 255, .05) !important;
	color: var(--g-ink-dim) !important;
	box-shadow: inset 0 0 0 1px rgba(134, 205, 239, .28) !important;
}

/* The crest is a warm gold mark; recoloured rather than removed so the shape
   the rest of the shell uses survives. */
html.mvm-shell #mvm-root .mvm-crest {
	filter: hue-rotate(168deg) saturate(.75) brightness(1.15)
		drop-shadow(0 0 6px rgba(134, 205, 239, .5)) !important;
}

/* ===========================================================================
   LANDSCAPE PROMPTS — 2026-08-27, per Ramil: "if it detected Mobile the
   utilities and text all the elements should be on the landscape."

   The ask was designed as a narrow card on the leading edge, which is right in
   portrait and wrong once the phone is turned: on an 852x393 screen it came out
   146px wide and 190px tall, a portrait plaque wrapping "Play in / Full
   screen?" across three lines, sitting on top of the map and vitals.

   Turned on its side it becomes a bar: crest and question on the left, the two
   actions on the right, parked in the strip of floor between the thumbstick
   (ends x190) and the action dock (starts x618) where nothing else lives.

   Gated on html.mvm-shell, which lane 1 sets only after the mobile gate has
   passed, so a desktop browser narrowed to a short window is unaffected.
   ======================================================================== */

@media (orientation: landscape) {
	html.mvm-shell #mvm-root .mvm-ask {
		top: auto !important;
		bottom: calc(12px + var(--mvm-safe-b, 0px)) !important;
		left: 50% !important;
		right: auto !important;
		width: min(370px, 46vw) !important;
		min-width: 0 !important;
		padding: 8px 11px !important;
		transform: translateX(-50%);
		animation-name: mvm-ask-in-land;
	}

	html.mvm-shell #mvm-root .mvm-ask__body {
		flex-direction: row;
		align-items: center;
		gap: 11px;
	}
	html.mvm-shell #mvm-root .mvm-ask__head {
		flex: 1 1 auto;
		align-items: center;
		gap: 7px;
	}
	html.mvm-shell #mvm-root .mvm-ask__head .mvm-crest { margin-top: 0; }
	/* One line each, no wrapping: a bar that reflows is not a bar. */
	html.mvm-shell #mvm-root .mvm-ask__kicker { font-size: 7px; white-space: nowrap; }
	html.mvm-shell #mvm-root .mvm-ask__line { font-size: 12.5px; white-space: nowrap; }

	html.mvm-shell #mvm-root .mvm-ask__acts {
		flex: none;
		flex-direction: row;
		gap: 6px;
	}
	html.mvm-shell #mvm-root .mvm-ask__acts .mvm-plate {
		width: auto;
		min-width: 84px;
		min-height: 40px;
		padding: 0 10px;
		font-size: 9.5px;
		white-space: nowrap;
	}
}

/* The portrait animation slides in from the leading edge and ends at
   translateX(0), which would cancel the centring above for the length of the
   animation and snap the bar sideways on arrival. Same motion, centred. */
@keyframes mvm-ask-in-land {
	from { opacity: 0; transform: translate(-50%, 10px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

/* -- the rotate gate, on a phone ---------------------------------------- */
/* Portrait is the only state the gate is shown in, so the work here is width
   and rhythm rather than direction: the frame was a column of full-width
   blocks with the title set at a size that broke "TURN YOUR DEVICE" onto three
   lines on a 393px screen. */
@media (orientation: portrait) {
	html.mvm-shell #mvm-root .mvm-gate__frame {
		width: min(330px, 84vw) !important;
		padding: 20px 18px !important;
		gap: 12px !important;
	}
	html.mvm-shell #mvm-root .mvm-gate__title { font-size: 21px !important; line-height: 1.12 !important; }
	html.mvm-shell #mvm-root .mvm-gate__sub { font-size: 11px !important; }
	html.mvm-shell #mvm-root .mvm-gate__go { min-height: 48px !important; font-size: 12.5px !important; }
}

/* The utility panels are draggable by their head (shell.js sysDraggable) —
   say so, and stop the browser turning the gesture into a page scroll. */
html.mvm-shell .sys-root .sys-window .sys-head {
	cursor: grab;
	touch-action: none;
}
html.mvm-shell .sys-root .sys-window[data-mvm-dragging='true'] .sys-head { cursor: grabbing; }
html.mvm-shell .sys-root .sys-window[data-mvm-dragging='true'] { user-select: none; }

/* ===========================================================================
   THE UTILITY PANELS ON A PHONE — 2026-08-27, per Ramil: "make the BUTTON
   Visible add colors to buttons or checkbox ... make the AFK FARMING more
   friendly and EASY To use", and "the notification on the top right make it
   smaller".

   Measured on the live panel before touching anything:

     Start Farming    97 x 21   transparent background, hairline outline
     section headers 236 x 21   plain text with a "+" — no button affordance
     checkboxes       12 x 12   browser default, invisible on white
     selects          149 x 21
     number inputs     46 x 21
     minimise chip     17 x 17

   Every one of those is under half the 44px a fingertip needs, and none of
   them carries a colour, so nothing on the panel looks pressable. This is
   size and colour only: no control moves, nothing is added or removed, and
   the pale-blue in-game window language is kept.

   MOBILE ONLY. Gated on html.mvm-shell, which lane 1 sets after the mobile
   gate passes, so the desktop panel Ramil already signed off is untouched.
   ======================================================================== */

html.mvm-shell {
	/* One token drives the whole toast: the kit authors toast type, padding
	   and the mark in `cqi` against this width, so the strip scales down as a
	   unit instead of needing a rule per part. 360 -> 236. */
	--sys-toast-w: 236px;
}

/* -- the primary action -------------------------------------------------- */
/* Green while it is an invitation to start; red once it is a way to stop. The
   kit already swaps data-variant primary/ghost on that transition. */
html.mvm-shell .afk-sidebar .sys-btn {
	min-height: 38px !important;
	padding: 0 16px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .04em !important;
	border-radius: 9px !important;
	color: #fff !important;
	background: linear-gradient(180deg, #35b268, #248c4e) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 2px 6px rgba(0, 0, 0, .3) !important;
}
html.mvm-shell .afk-sidebar .sys-btn[data-variant='ghost'] {
	background: linear-gradient(180deg, #d1544c, #ab3a33) !important;
}
html.mvm-shell .afk-sidebar .sys-btn:active { transform: translateY(1px); }

/* -- the minimise chip --------------------------------------------------- */
html.mvm-shell .afk-sidebar .sys-iconbtn {
	width: 28px !important;
	height: 28px !important;
	border-radius: 8px !important;
	color: #2b66a8 !important;
	background: rgba(43, 102, 168, .13) !important;
	box-shadow: inset 0 0 0 1px rgba(43, 102, 168, .34) !important;
}

/* -- sections read as rows you can open ---------------------------------- */
html.mvm-shell .afk-sidebar .afk-sec > summary {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px;
	min-height: 38px !important;
	padding: 0 10px !important;
	border-radius: 8px !important;
	background: rgba(43, 102, 168, .09) !important;
	box-shadow: inset 0 0 0 1px rgba(43, 102, 168, .26) !important;
	cursor: pointer;
	list-style: none;
}
html.mvm-shell .afk-sidebar .afk-sec > summary::-webkit-details-marker { display: none; }
html.mvm-shell .afk-sidebar .afk-sec[open] > summary {
	background: rgba(43, 102, 168, .17) !important;
	box-shadow: inset 0 0 0 1.2px rgba(43, 102, 168, .45) !important;
}
html.mvm-shell .afk-sidebar .afk-sec__t {
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #2b4a66 !important;
}
/* The "0/4" / "off" note becomes a state pill: grey when off, green when on. */
html.mvm-shell .afk-sidebar .afk-sec__n {
	flex: none;
	min-width: 34px;
	padding: 2px 8px !important;
	border-radius: 999px !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	text-align: center;
	color: #5e7286 !important;
	background: rgba(94, 114, 134, .14) !important;
}
/* Green means ON, not "open" and not "has text" — a first pass used
   `:not(:empty)` and painted the word "off" green. The section's own enable
   checkbox is the truth; Policy has none because it is always in force. */
html.mvm-shell .afk-sidebar .afk-sec:has(input[type='checkbox']:checked) > summary .afk-sec__n {
	color: #1f7a45 !important;
	background: rgba(47, 158, 91, .16) !important;
}
/* Policy has no on/off, so its pill renders as an empty grey lozenge. A badge
   with nothing in it is just noise. */
html.mvm-shell .afk-sidebar .afk-sec__n:empty { display: none !important; }

html.mvm-shell .afk-sidebar .afk-sec:has(input[type='checkbox']:checked) > summary {
	box-shadow: inset 0 0 0 1.2px rgba(47, 158, 91, .5) !important;
}

/* -- checkboxes, selects, numbers: visible and thumb-sized --------------- */
html.mvm-shell .afk-sidebar input[type='checkbox'] {
	width: 20px !important;
	height: 20px !important;
	margin: 0 8px 0 0 !important;
	accent-color: #2f9e5b;
	cursor: pointer;
}
html.mvm-shell .afk-sidebar label.afk-check {
	display: flex !important;
	align-items: center !important;
	min-height: 36px !important;
	padding: 0 8px !important;
	border-radius: 7px;
	font-size: 11.5px !important;
	color: #2b4a66 !important;
	cursor: pointer;
}
html.mvm-shell .afk-sidebar label.afk-check:active { background: rgba(43, 102, 168, .1); }

html.mvm-shell .afk-sidebar label.afk-num,
html.mvm-shell .afk-sidebar label.afk-sel {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px;
	min-height: 36px !important;
	padding: 0 8px !important;
	font-size: 11.5px !important;
	color: #2b4a66 !important;
}
html.mvm-shell .afk-sidebar select,
html.mvm-shell .afk-sidebar input[type='number'] {
	min-height: 30px !important;
	padding: 0 8px !important;
	border-radius: 7px !important;
	border: 1px solid rgba(43, 102, 168, .5) !important;
	background: #fff !important;
	color: #1f3a52 !important;
	font-size: 12px !important;
	cursor: pointer;
}
html.mvm-shell .afk-sidebar select:focus,
html.mvm-shell .afk-sidebar input[type='number']:focus {
	outline: none;
	border-color: #2b66a8 !important;
	box-shadow: 0 0 0 2px rgba(43, 102, 168, .22) !important;
}

/* -- the readout, and the caveat paragraph ------------------------------- */
html.mvm-shell .afk-sidebar .afk-status { font-size: 12px !important; font-weight: 700 !important; }
html.mvm-shell .afk-sidebar .afk-status[data-stopped='true'] { color: #ab3a33 !important; }
html.mvm-shell .afk-sidebar .sys-stats { font-size: 11.5px !important; }
/* It is a footnote, not a headline — it was competing with the controls. */
html.mvm-shell .afk-sidebar .afk-note { font-size: 9.5px !important; line-height: 1.45 !important; opacity: .8; }

/* Running is a state worth seeing from across the room. */
html.mvm-shell .afk-sidebar [data-running='true'] .afk-status { color: #1f7a45 !important; }

/* The utility panels grew when their controls did, and a 500px desktop panel
   whose sections are all open is now taller than a 393px screen. The window
   was already capped at `calc(100vh - 16px)`, but a cap only clips — nothing
   inside was scrolling, so the bottom of the panel was simply unreachable.
   Make the body the scroller and let the flex chain shrink to it. */
html.mvm-shell .sys-root .sys-window { overflow: hidden !important; }
html.mvm-shell .sys-root .sys-window .sys-panel,
html.mvm-shell .sys-root .sys-window .sys-frame { min-height: 0 !important; }
html.mvm-shell .sys-root .sys-window .sys-body {
	flex: 1 1 auto !important;
	min-height: 0 !important;
	overflow-y: auto !important;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}
