/**
 * 麻雀 / Mahjong — practice-mode table styling.
 *
 * Aesthetic: "Obsidian & Champagne" — a modern high-roller mahjong
 * parlour. No green felt; a warm graphite table lit by an overhead
 * spotlight, champagne-gold trim, and ivory tiles with genuine 3-D
 * depth. Every tile dimension is driven by a single `font-size` so the
 * whole UI scales fluidly and stays responsive.
 *
 * Tile faces use the bundled I.Mahjong-CAN font (一點麻雀, Cantonese
 * style, M+ Font Licence) — one mahjong glyph per tile.
 *
 * @package arcade-games
 */

@font-face {
	font-family: "I.Mahjong CAN";
	src: url("fonts/I.MahjongCAN.otf") format("opentype");
	font-display: block;
}

/* A one-glyph subset (JP-style 中) — its CAN counterpart leans right. */
@font-face {
	font-family: "I.Mahjong Zhong";
	src: url("fonts/I.MahjongZhong.otf") format("opentype");
	font-display: block;
}

/* ==================================================================
 * Theme tokens
 * ================================================================== */

.mg-mahjong {
	--mg-bg:          #0e0d0b;
	--mg-felt-hi:     #3b332a;
	--mg-felt-lo:     #1c1813;
	--mg-rail:        #14110d;

	--mg-gold:        #d9bd83;
	--mg-gold-hi:     #f3e0b2;
	--mg-gold-lo:     #9a7f4f;
	--mg-line:        rgba(217, 189, 131, 0.20);

	--mg-ivory:       #f6efdc;
	--mg-ivory-hi:    #fffdf4;
	--mg-ivory-lo:    #e7d9b9;
	--mg-ivory-edge:  #cbb98e;
	--mg-ivory-edge2: #9c8a5e;
	--mg-ink:         #2c2620;
	--mg-red:         #c33a30;
	--mg-jade:        #2f7d52;

	--mg-back:        #1c1813;
	--mg-back-hi:     #322c22;
	--mg-back-lo:     #0d0b08;

	--mg-text:        #ece3d0;
	--mg-dim:         #9c917c;
	--mg-panel:       rgba(255, 255, 255, 0.05);

	/* Follow the host theme's type when it provides one (the arcade
	 * theme uses a pixel font), with the original stacks as fallback.
	 * The mahjong tile glyph font is separate and unaffected. */
	--mg-serif: var(--mg-display,
	            "Songti SC", "STSong", "Times New Roman", ui-serif, serif);
	--mg-sans:  var(--mg-body,
	            -apple-system, BlinkMacSystemFont, "PingFang HK",
	            "Microsoft JhengHei", "Noto Sans HK", system-ui, sans-serif);

	box-sizing: border-box;
	max-width: 720px;
	margin: 0 auto;
	padding: 0;
	font-family: var(--mg-sans);
	color: var(--mg-text);
}

.mg-mahjong *,
.mg-mahjong *::before,
.mg-mahjong *::after { box-sizing: border-box; }

.mg-mahjong [hidden] { display: none !important; }


/* ==================================================================
 * Intro / invitation panel
 * ================================================================== */

.mgmj-intro {
	text-align: center;
	padding: clamp(22px, 6vw, 48px) clamp(18px, 5vw, 40px);
	/* No panel — the intro sits straight on the host theme background. */
}

.mgmj-intro-title {
	margin: 0 0 6px;
	font-family: var(--mg-serif);
	font-size: clamp(1.5rem, 5vw, 2.2rem);
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--mg-gold-hi);
}

.mgmj-intro-lead {
	margin: 0 auto 18px;
	max-width: 30em;
	font-size: 0.95rem;
	color: var(--mg-dim);
}

.mgmj-rules {
	display: inline-block;
	margin: 0 0 24px;
	padding: 0;
	text-align: left;
	list-style: none;
}

.mgmj-rules li {
	position: relative;
	margin: 7px 0;
	padding-left: 22px;
	font-size: 0.9rem;
	color: var(--mg-text);
}

.mgmj-rules li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.5em;
	width: 7px;
	height: 7px;
	transform: rotate(45deg);
	background: var(--mg-gold);
}


/* ==================================================================
 * Buttons — scoped under .mg-mahjong so a host theme's button styling
 * (often a brand colour) can never bleed through.
 * ================================================================== */

.mg-mahjong .mgmj-btn {
	font-family: var(--mg-sans);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 12px 28px;
	border: 1px solid rgba(217, 189, 131, 0.22);
	border-radius: 12px;
	cursor: pointer;
	color: var(--mg-text);
	background-color: #2a251d;
	background-image: linear-gradient(168deg, #3a342a 0%, #221e17 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.07),
		0 5px 14px rgba(0, 0, 0, 0.5);
	transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.mg-mahjong .mgmj-btn:hover { transform: translateY(-2px); filter: brightness(1.13); }
.mg-mahjong .mgmj-btn:active { transform: translateY(0); }

/* Pong / chow / kong — a warmer dark with gold lettering. */
.mg-mahjong .mgmj-btn-claim {
	color: var(--mg-gold-hi);
	background-image: linear-gradient(168deg, #4d4434 0%, #312a20 100%);
	border-color: rgba(217, 189, 131, 0.35);
}

/* Start / play again / win — the headline gold button. */
.mg-mahjong .mgmj-btn-primary,
.mg-mahjong .mgmj-btn-win {
	color: #2a2114;
	background-color: var(--mg-gold);
	background-image: linear-gradient(168deg, var(--mg-gold-hi) 0%, var(--mg-gold) 52%, var(--mg-gold-lo) 100%);
	border-color: rgba(255, 255, 255, 0.45);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		0 6px 16px rgba(0, 0, 0, 0.5);
}

.mg-mahjong .mgmj-btn-win { animation: mgmj-glow 1.6s ease-in-out infinite; }


/* ==================================================================
 * The table
 * ================================================================== */

.mgmj-table {
	--tile:    clamp(29px, 7vw, 48px);
	--tile-sm: var(--tile);   /* one tile size everywhere */

	/* A query container: opponent tiles size to the table's real width
	 * (cqw), not the viewport — themes give the table far less room than
	 * the window, so viewport units oversize tiles on a narrow column. */
	container-type: inline-size;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-areas:
		"top  top  top"
		"left info right"
		"pond pond pond"
		"self self self"
		"bar  bar  bar";
	gap: clamp(7px, 1.8vw, 13px);
	padding: clamp(12px, 3.2vw, 24px);
	/* No surface of its own — the game sits straight on the host
	 * theme's background, the way the other arcade games do. */
	background: transparent;
}


/* ---- Seats --------------------------------------------------------- */

.mgmj-seat-area {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 12px;
}

.mgmj-pos-top   { grid-area: top;   justify-self: center; align-items: center;
                  width: clamp(240px, 42cqw, 460px); }
.mgmj-pos-left  { grid-area: left;  align-self: stretch;  align-items: center; }
.mgmj-pos-right { grid-area: right; align-self: stretch;  align-items: center; }
.mgmj-pos-self  { grid-area: self;  align-items: center; }

/* Opponent seats sit on a faint plate; the active seat lifts in gold.
 * Their tiles are sized down a notch so two claimed melds (pong / chow /
 * kong) sit side by side on a row — the side columns have the room on a
 * desktop, where this rule applies. The phone strip overrides it below. */
.mgmj-pos-top,
.mgmj-pos-left,
.mgmj-pos-right {
	background: var(--mg-panel);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
	--tile-sm: clamp(18px, 4cqw, 34px);
}

/* Opponent seats centre their head, melds, flowers and tile count, so
 * the panels read tidily however wide the seat gets. */
.mgmj-pos-top   .mgmj-seat-head,
.mgmj-pos-left  .mgmj-seat-head,
.mgmj-pos-right .mgmj-seat-head,
.mgmj-pos-top   .mgmj-melds,
.mgmj-pos-left  .mgmj-melds,
.mgmj-pos-right .mgmj-melds,
.mgmj-pos-top   .mgmj-flowers,
.mgmj-pos-left  .mgmj-flowers,
.mgmj-pos-right .mgmj-flowers,
.mgmj-pos-top   .mgmj-hand-compact,
.mgmj-pos-left  .mgmj-hand-compact,
.mgmj-pos-right .mgmj-hand-compact { justify-content: center; }

.mgmj-seat-area.is-turn {
	background: rgba(217, 189, 131, 0.10);
	box-shadow: inset 0 0 0 1px var(--mg-line);
}

.mgmj-seat-head {
	display: flex;
	align-items: center;
	gap: 7px;
}

/* Circular wind token. */
.mgmj-wind-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.7em;
	height: 1.7em;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--mg-gold-hi);
	background: radial-gradient(circle at 35% 30%, #3a3327, #1b1812);
	border: 1px solid var(--mg-line);
	border-radius: 50%;
}

.is-turn .mgmj-wind-badge {
	color: #2a2114;
	background: radial-gradient(circle at 35% 30%, var(--mg-gold-hi), var(--mg-gold-lo));
	border-color: var(--mg-gold-hi);
	animation: mgmj-pulse 1.5s ease-in-out infinite;
}

.mgmj-seat-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--mg-text);
}

.mgmj-dealer-mark {
	font-size: 0.66rem;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
	color: #2a2114;
	background: linear-gradient(160deg, var(--mg-gold-hi), var(--mg-gold-lo));
}


/* ==================================================================
 * Tiles — ivory, with real 3-D depth. `font-size` is the only knob.
 * ================================================================== */

.mgmj-tile {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	font-size: var(--tile);
	width: 0.80em;
	height: 1.056em;
	border-radius: 0.13em;
	background: linear-gradient(157deg,
		var(--mg-ivory-hi) 0%, var(--mg-ivory) 46%, var(--mg-ivory-lo) 100%);
	color: var(--mg-ink);
	box-shadow:
		inset 0 0.05em 0.03em rgba(255, 255, 255, 0.95),
		inset 0 -0.07em 0.08em rgba(150, 125, 75, 0.28),
		0 0.06em 0 #e6dbbe,
		0 0.13em 0 var(--mg-ivory-edge),
		0 0.2em 0 var(--mg-ivory-edge),
		0 0.27em 0 var(--mg-ivory-edge2),
		0 0.3em 0.03em #6f6041,
		0 0.34em 0.42em rgba(0, 0, 0, 0.6);
	user-select: none;
}

.mgmj-tile-face {
	position: absolute;
	left: 0.064em;
	top: -0.15em;
	font-family: "I.Mahjong CAN", sans-serif;
	font-size: 1em;
	line-height: 1;
	text-shadow: 0 0.014em 0.01em rgba(255, 255, 255, 0.6);
}

/* 中 — the CAN glyph leans right; use the symmetric JP-style 中. */
.mgmj-tile-face.is-zhong {
	font-family: "I.Mahjong Zhong", "I.Mahjong CAN", sans-serif;
}

.mgmj-tile.is-red   { color: var(--mg-red); }
.mgmj-tile.is-green { color: var(--mg-jade); }

.mgmj-tile.is-small { font-size: var(--tile-sm); }

/* Face-down tile back — black with a gilt inset frame and an inlaid
 * SVG medallion (a gilded diamond crest). */
.mgmj-tile.is-back {
	background:
		url("data:image/svg+xml,%3Csvg%20viewBox='0%200%2048%2048'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='1'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%23f6e6bb'/%3E%3Cstop%20offset='.5'%20stop-color='%23d9bd83'/%3E%3Cstop%20offset='1'%20stop-color='%239a7f4f'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%20transform='translate(24%2024)'%3E%3Cpath%20d='M0%20-19%20L16%200%20L0%2019%20L-16%200%20Z'%20fill='none'%20stroke='url(%23g)'%20stroke-width='2.4'/%3E%3Cg%20fill='url(%23g)'%3E%3Cg%20transform='translate(0%20-19)'%3E%3Cpath%20d='M0%20-2.6%20L2.6%200%20L0%202.6%20L-2.6%200%20Z'/%3E%3C/g%3E%3Cg%20transform='translate(0%2019)'%3E%3Cpath%20d='M0%20-2.6%20L2.6%200%20L0%202.6%20L-2.6%200%20Z'/%3E%3C/g%3E%3Cg%20transform='translate(-16%200)'%3E%3Cpath%20d='M0%20-2.6%20L2.6%200%20L0%202.6%20L-2.6%200%20Z'/%3E%3C/g%3E%3Cg%20transform='translate(16%200)'%3E%3Cpath%20d='M0%20-2.6%20L2.6%200%20L0%202.6%20L-2.6%200%20Z'/%3E%3C/g%3E%3C/g%3E%3Cpath%20d='M0%20-14.6%20L12.4%200%20L0%2014.6%20L-12.4%200%20Z'%20fill='none'%20stroke='%23caa869'%20stroke-width='0.9'/%3E%3Cpath%20d='M0%20-11.4%20L9.4%200%20L0%2011.4%20L-9.4%200%20Z'%20fill='url(%23g)'/%3E%3Ccircle%20r='5.4'%20fill='%2315120d'/%3E%3Cpath%20d='M0%20-7.6%20L2.2%20-2.2%20L7.6%200%20L2.2%202.2%20L0%207.6%20L-2.2%202.2%20L-7.6%200%20L-2.2%20-2.2%20Z'%20fill='url(%23g)'/%3E%3Ccircle%20r='1.7'%20fill='%2315120d'/%3E%3C/g%3E%3C/svg%3E")
			center / 60% no-repeat,
		linear-gradient(158deg,
			var(--mg-back-hi) 0%, var(--mg-back) 52%, var(--mg-back-lo) 100%);
	box-shadow:
		inset 0 0.04em 0.05em rgba(246, 230, 187, 0.14),
		0 0.06em 0 #2a2620,
		0 0.13em 0 var(--mg-back-lo),
		0 0.2em 0 #161410,
		0 0.27em 0 #0e0c0a,
		0 0.3em 0.03em #080706,
		0 0.34em 0.42em rgba(0, 0, 0, 0.6);
}

.mgmj-tile.is-back::after {
	content: "";
	position: absolute;
	inset: 0.1em;
	border: 1px solid rgba(230, 207, 149, 0.6);
	border-radius: 0.07em;
}

/* Clickable hand tiles. The lift is gated to true-hover (mouse) devices:
 * on touch a transform mid-tap moves the tile out from under the finger
 * and the discard click is lost. */
.mgmj-tile.is-clickable { cursor: pointer; transition: transform 0.1s ease, filter 0.1s ease; }

/* The 3-D depth below the tile is painted with box-shadow, which is not
 * clickable. Extend the hit area down over that visible thickness so a
 * tap on the tile's "edge" still discards it. */
.mgmj-tile.is-clickable::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: -0.46em;
}

@media (hover: hover) and (pointer: fine) {
	.mgmj-tile.is-clickable:hover {
		transform: translateY(-0.46em);
		z-index: 3;
	}
}

/* Touch/press feedback that does not move the tile. */
.mgmj-tile.is-clickable:active { filter: brightness(1.09); }

.mgmj-tile.is-recent {
	outline: 0.05em solid var(--mg-gold-hi);
	outline-offset: 0.03em;
}

.mgmj-tile.is-drawn {
	box-shadow:
		inset 0 0.05em 0.03em rgba(255, 255, 255, 0.95),
		0 0 0 0.05em var(--mg-gold),
		0 0.06em 0 #e6dbbe,
		0 0.13em 0 var(--mg-ivory-edge),
		0 0.2em 0 var(--mg-ivory-edge),
		0 0.27em 0 var(--mg-ivory-edge2),
		0 0.34em 0.42em rgba(0, 0, 0, 0.6);
}


/* ==================================================================
 * Hands & melds
 * ================================================================== */

/* Melds + flowers wrapper. Opponents reserve one row of height here, so
 * the tile count below keeps a steady position — the first flower or
 * meld drops into the reserved row instead of nudging the card taller. */
.mgmj-claims {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.mgmj-pos-top   .mgmj-claims,
.mgmj-pos-left  .mgmj-claims,
.mgmj-pos-right .mgmj-claims {
	min-height: calc(var(--tile-sm) * 1.06);
}

.mgmj-hand {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.09em;
}

/* The player's own hand — a faint raised tray. */
.mgmj-pos-self .mgmj-hand {
	gap: calc(var(--tile) * 0.5) clamp(2px, 0.7vw, 5px);
	padding: clamp(10px, 2.4vw, 16px) clamp(8px, 2vw, 16px) clamp(16px, 2.8vw, 22px);
	background: rgba(255, 255, 255, 0.05);
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.mgmj-melds {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.mgmj-meld {
	display: flex;
	gap: 1px;
	padding: 3px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 6px;
}

.mgmj-flowers {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

.mgmj-flowers:empty { display: none; }

/* Hidden opponent hand — a compact stack of backs and a count. */
/* An opponent's concealed hand — face-down tiles standing side by side
 * in a row, the way mahjong tiles really sit (never fanned or stacked
 * like a hand of cards). */
.mgmj-hand-compact {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	padding: 2px 0;
}

/* An opponent's hidden hand reads at the same scale as the player's own
 * hand — it is a hand, after all. Only their exposed melds are sized
 * down (see the opponent-seat rule) so two fit on a row. */
.mgmj-hand-compact .mgmj-tile.is-small { font-size: var(--tile); }

.mgmj-handcount {
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--mg-gold-hi);
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid var(--mg-line);
	border-radius: 7px;
	padding: 2px 9px;
}


/* ==================================================================
 * Round info + the full-width four-seat discard pool
 * ================================================================== */

.mgmj-center-info {
	grid-area: info;
	align-self: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
	color: var(--mg-dim);
	text-align: center;
}

.mgmj-center-info strong {
	color: var(--mg-gold-hi);
	font-weight: 700;
}

.mgmj-pond {
	grid-area: pond;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 9px 11px;
	/* A faint raised plate on the theme background — no gold edge. */
	background: rgba(255, 255, 255, 0.04);
	border-radius: 13px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Each seat's row is pre-sized to a full tile row, so the pool keeps a
 * constant height instead of being pushed open as discards arrive. */
.mgmj-pond-row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: calc(var(--tile) * 1.5);
}

.mgmj-pond-tag {
	flex: 0 0 auto;
	width: 3.1em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mg-gold-lo);
}

/*
 * Discards run oldest-to-newest. The row never wraps — renderCenter
 * measures the width and shows exactly as many recent tiles as fit,
 * summarising any older ones with a "+N" chip, so the pool stays one
 * tidy line per seat on a phone and a desktop alike. Overflow is left
 * visible so the tiles keep their full 3-D shadow.
 */
.mgmj-pond-tiles {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.12em;
}

.mgmj-pond-more {
	flex: 0 0 auto;
	margin-right: 2px;
	padding: 2px 6px;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--mg-gold-lo);
	background: rgba(0, 0, 0, 0.4);
	border: 1px solid var(--mg-line);
	border-radius: 6px;
}

.mgmj-pond-empty {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.16);
}


/* ==================================================================
 * Action bar
 * ================================================================== */

.mgmj-actionbar {
	grid-area: bar;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 9px;
	min-height: 8px;
	margin-top: 2px;
}

.mgmj-status {
	flex: 0 0 100%;
	text-align: center;
	font-family: var(--mg-serif);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--mg-gold-hi);
	margin-bottom: 3px;
}


/* ==================================================================
 * Result overlay
 * ================================================================== */

.mgmj-overlay {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(8, 7, 6, 0.82);
	backdrop-filter: blur(4px);
}

.mgmj-overlay-card {
	width: min(440px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	text-align: center;
	padding: 28px 16px;
	background:
		radial-gradient(130% 110% at 50% -10%, #2c261d 0%, #15120e 78%);
	border: 1px solid var(--mg-line);
	border-radius: 18px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 30px 70px rgba(0, 0, 0, 0.7);
}

.mgmj-result-title {
	margin: 0 0 4px;
	font-family: var(--mg-serif);
	font-size: 1.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--mg-gold-hi);
}

.mgmj-result-sub {
	margin: 0 0 14px;
	font-size: 0.9rem;
	color: var(--mg-dim);
}

.mgmj-result-faan {
	font-size: 2.4rem;
	font-weight: 800;
	color: var(--mg-gold-hi);
	line-height: 1.1;
}

.mgmj-result-limit {
	display: inline-block;
	margin: 6px 0 2px;
	padding: 3px 12px;
	font-size: 0.78rem;
	font-weight: 700;
	color: #2a2114;
	background: linear-gradient(160deg, var(--mg-gold-hi), var(--mg-gold-lo));
	border-radius: 999px;
}

.mgmj-result-label {
	margin: 16px 0 6px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mg-gold-lo);
}

/* Round-over reveal — every player's final hand, one row each. */
.mgmj-result-reveal {
	margin: 4px 0 20px;
}

.mgmj-reveal-row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 8px;
	padding: 14px 9px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.05);
}

.mgmj-reveal-row.is-winner {
	background: linear-gradient(120deg,
		rgba(217, 189, 131, 0.2), rgba(217, 189, 131, 0.07));
	border-color: rgba(217, 189, 131, 0.5);
}

.mgmj-reveal-name {
	flex: 0 0 auto;
	min-width: 2.7em;
	max-width: 7em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
	font-family: var(--mg-sans);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--mg-gold-lo);
}

.mgmj-reveal-row.is-winner .mgmj-reveal-name { color: var(--mg-gold-hi); }

.mgmj-reveal-tiles {
	flex: 1 1 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	gap: 0.12em 0.1em;
}

/* Flowers travel together as one trailing cluster, set slightly apart
 * from the hand so the row reads cleanly. */
.mgmj-reveal-flowers {
	display: flex;
	gap: 0.1em;
	margin-left: 0.4em;
}

.mgmj-result-reveal .mgmj-tile { font-size: clamp(19px, 5.1vw, 27px); }


/* ==================================================================
 * Wind-draw ceremony
 * ================================================================== */

.mgmj-draw-rack {
	display: flex;
	justify-content: center;
	gap: clamp(8px, 3vw, 18px);
	margin: 18px 0 6px;
}

.mgmj-draw-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.mgmj-draw-tile {
	display: inline-block;
	transform-origin: center;
	animation: mgmj-shuffle 0.85s ease both;
}

.mgmj-draw-tile.is-flipping { animation: mgmj-flip 0.42s ease both; }

.mgmj-draw-tile .mgmj-tile { font-size: clamp(42px, 12vw, 58px); }

.mgmj-draw-tile.is-dealer {
	border-radius: 0.16em;
	box-shadow:
		0 0 0 2px var(--mg-gold-hi),
		0 0 18px rgba(217, 189, 131, 0.6);
}

.mgmj-draw-name {
	font-family: var(--mg-sans);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--mg-dim);
}

.mgmj-draw-slot.is-you .mgmj-draw-name { color: var(--mg-gold-hi); }

.mgmj-draw-result {
	min-height: 3em;
	margin: 12px 0 6px;
	opacity: 0;
	transition: opacity 0.45s ease;
}

.mgmj-draw-result.is-shown { opacity: 1; }

.mgmj-draw-result-wind {
	font-family: var(--mg-serif);
	font-size: 1.05rem;
	color: var(--mg-text);
}

.mgmj-draw-result-dealer {
	margin-top: 3px;
	font-family: var(--mg-serif);
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--mg-gold-hi);
}

@keyframes mgmj-shuffle {
	0%, 100% { transform: translateX(0) rotate(0); }
	22%      { transform: translateX(-3px) rotate(-4deg); }
	48%      { transform: translateX(3px) rotate(3deg); }
	72%      { transform: translateX(-2px) rotate(-2deg); }
}

@keyframes mgmj-flip {
	0%   { transform: scaleX(1); }
	50%  { transform: scaleX(0.08); }
	100% { transform: scaleX(1); }
}


/* ==================================================================
 * Claimed-tile flight (pool -> meld)
 * ================================================================== */

.mg-mahjong .mgmj-fly {
	position: absolute;
	z-index: 60;
	margin: 0;
	pointer-events: none;
	transition:
		transform 0.46s cubic-bezier(0.34, 0.02, 0.24, 1),
		opacity 0.46s ease;
	will-change: transform;
}


/* ==================================================================
 * Toast
 * ================================================================== */

.mgmj-toast {
	position: fixed;
	left: 50%;
	bottom: 26px;
	transform: translateX(-50%);
	z-index: 60;
	max-width: 90vw;
	padding: 11px 20px;
	font-size: 0.9rem;
	color: var(--mg-text);
	background: #241f18;
	border: 1px solid var(--mg-line);
	border-radius: 11px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}


/* ==================================================================
 * Motion
 * ================================================================== */

@keyframes mgmj-deal {
	from { opacity: 0; transform: translateY(-16px) scale(0.6); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.mgmj-tile.is-dealing { animation: mgmj-deal 300ms ease both; }

@keyframes mgmj-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(217, 189, 131, 0.5); }
	50%      { box-shadow: 0 0 0 0.32em rgba(217, 189, 131, 0); }
}

@keyframes mgmj-glow {
	0%, 100% { filter: brightness(1); }
	50%      { filter: brightness(1.22); }
}

/* The freshly drawn tile slides down into the hand so the player can
 * see, unmistakably, what they just picked up. */
@keyframes mgmj-draw {
	0%   { opacity: 0; transform: translateY(-1.7em) scale(0.86); }
	62%  { opacity: 1; transform: translateY(0.16em) scale(1.04); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.mgmj-tile.is-drawn { animation: mgmj-draw 700ms ease-out both; }


/* ==================================================================
 * Responsive
 * ================================================================== */

@media (max-width: 640px) {
	/* The four-around-a-table diamond squeezes the side players into
	 * thin columns on a phone. Instead, lay the three opponents out as
	 * one even strip across the top — each gets equal, uncramped room.
	 * The round wind / wall count slips onto its own slim line below. */
	.mgmj-table {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-areas:
			"left top  right"
			"info info info"
			"pond pond pond"
			"self self self"
			"bar  bar  bar";
		/* bigger tiles on a phone — but not so big they crowd the table */
		--tile: clamp(36px, 9.5vw, 48px);
		padding: 11px;
		gap: 7px;
	}

	.mgmj-pos-top,
	.mgmj-pos-left,
	.mgmj-pos-right {
		align-self: stretch;
		justify-self: stretch;
		width: auto;
		align-items: center;
		text-align: center;
		gap: 5px;
		padding: 7px 6px;
		/* opponent melds stay a touch smaller than the hands */
		--tile-sm: clamp(22px, 5.4vw, 31px);
	}
	.mgmj-pos-left  { grid-area: left; }
	.mgmj-pos-top   { grid-area: top; }
	.mgmj-pos-right { grid-area: right; }

	/* every inner row of an opponent card centres */
	.mgmj-pos-top   .mgmj-seat-head,
	.mgmj-pos-left  .mgmj-seat-head,
	.mgmj-pos-right .mgmj-seat-head,
	.mgmj-pos-top   .mgmj-melds,
	.mgmj-pos-left  .mgmj-melds,
	.mgmj-pos-right .mgmj-melds,
	.mgmj-pos-top   .mgmj-flowers,
	.mgmj-pos-left  .mgmj-flowers,
	.mgmj-pos-right .mgmj-flowers,
	.mgmj-pos-top   .mgmj-hand-compact,
	.mgmj-pos-left  .mgmj-hand-compact,
	.mgmj-pos-right .mgmj-hand-compact {
		justify-content: center;
		flex-wrap: wrap;
	}

	/* The phone seat strip has no room for three backs — show two. */
	.mgmj-hand-compact .mgmj-tile:nth-child(3) { display: none; }

	/* round wind + wall count: one slim centred line */
	.mgmj-center-info {
		flex-direction: row;
		justify-content: center;
		gap: 14px;
	}

	.mgmj-pond-tag { width: 2.6em; font-size: 0.64rem; }
	.mgmj-status { font-size: 0.92rem; }
	.mgmj-seat-name { font-size: 0.78rem; }
}


/* ==================================================================
 * Multiplayer — lobby, create modal, waiting room, match chrome
 *
 * Ported from the Big Two multiplayer module (bigtwo.css) so the four-
 * player lobby looks identical to it. It uses the plugin's SHARED
 * design tokens — --mg-bg-2, --mg-line, --mg-accent, --mg-ink,
 * --mg-display, --mg-radius — which cascade from the .mg-frame /
 * .mg-theme-* wrapper. The .mg-mahjong-mp root deliberately does NOT
 * carry .mg-mahjong, so the ivory-tile table palette never bleeds into
 * this chrome. Only the in-match table keeps the .mgmj-* gold styling.
 * ================================================================== */

.mg-mahjong-mp[hidden] { display: none; }

/* The lobby front page takes no padding of its own — the shared
   .mg-frame already insets it. Only the waiting room is padded, and
   matching bigtwo here keeps the header on one row instead of
   wrapping the title onto its own line. */
.mgmj-mp__pvp-lobby {
	padding: 14px;
	color: var(--mg-ink);
}

.mgmj-mp__header-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-left: auto;
}

.mgmj-mp__gate-msg {
	background: var(--mg-bg-2);
	border: 1px solid var(--mg-line);
	border-left: 3px solid var(--mg-accent);
	border-radius: var(--mg-radius, 10px);
	padding: 12px 16px;
	margin: 0 0 16px 0;
	color: var(--mg-ink-muted);
	font-size: 13px;
	line-height: 1.5;
	font-family: var(--mg-display);
}

/* ---- The three lobby lists ---- */

.mgmj-mp__pvp-list-section { margin: 18px 0; }

.mgmj-mp__pvp-list-h {
	font-size: 13px;
	color: var(--mg-accent);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 8px 0;
	font-weight: 600;
	font-family: var(--mg-display);
}

.mgmj-mp__pvp-list-rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 56px;
}

.mgmj-mp__pvp-list-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--mg-bg-2);
	border: 1px solid var(--mg-line);
	border-radius: 8px;
	color: var(--mg-ink);
	font-size: 14px;
	text-align: left;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.mgmj-mp__pvp-list-row:hover:not(.is-disabled):not(.is-full) {
	background: var(--mg-accent-soft);
	border-color: var(--mg-accent);
}
.mgmj-mp__pvp-list-row.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
/* v1.14.7: defensive hover/focus reset for full + disabled rows.
 * Without the !important, host-site button styling (e.g. WP theme rules
 * like `button:hover { background: <site-accent> }`) can bleed through
 * and paint the row in the site's primary colour even though the
 * plugin's :hover rule excludes is-disabled / is-full. User report:
 * "hover the full room, will show site color, that is wrong." */
.mgmj-mp__pvp-list-row.is-disabled:hover,
.mgmj-mp__pvp-list-row.is-disabled:focus-visible,
.mgmj-mp__pvp-list-row.is-disabled:active,
.mgmj-mp__pvp-list-row.is-full:hover,
.mgmj-mp__pvp-list-row.is-full:focus-visible,
.mgmj-mp__pvp-list-row.is-full:active {
	background: var(--mg-bg-2) !important;
	border-color: var(--mg-line) !important;
}

.mgmj-mp__pvp-list-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 3px 8px;
	background: var(--mg-bg);
	border: 1px solid var(--mg-line-strong);
	border-radius: 6px;
	font-family: var(--mg-display);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--mg-accent);
}
.mgmj-mp__pvp-list-names {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--mg-ink);
	font-family: var(--mg-display);
}
.mgmj-mp__pvp-list-verb {
	color: var(--mg-ink-muted);
	font-size: 13px;
	flex-shrink: 0;
	font-family: var(--mg-display);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.mgmj-mp__pvp-list-empty {
	color: var(--mg-ink-muted);
	text-align: center;
	margin: auto;
	padding: 12px 0;
	font-size: 13px;
	font-family: var(--mg-display);
}

/* Own waiting match: a join row + a cancel button side by side. */
.mgmj-mp__pvp-list-row-wrap {
	display: flex;
	gap: 6px;
	align-items: stretch;
}
.mgmj-mp__pvp-list-row-wrap .mgmj-mp__pvp-list-row--main {
	flex: 1;
	min-width: 0;
}
.mgmj-mp__pvp-list-cancel,
button.mgmj-mp__pvp-list-cancel {
	flex-shrink: 0;
	padding: 0 14px;
	background: var(--mg-bg-2);
	border: 1px solid var(--mg-line-strong);
	border-radius: var(--mg-radius-sm, 8px);
	color: var(--mg-ink-muted);
	font-family: var(--mg-display);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}
button.mgmj-mp__pvp-list-cancel:hover,
button.mgmj-mp__pvp-list-cancel:focus-visible {
	background: var(--mg-accent-soft) !important;
	border-color: var(--mg-accent) !important;
	color: var(--mg-accent) !important;
	outline: none;
}

/* ---- Rules disclosure ---- */

.mgmj-mp__rules {
	background: var(--mg-bg-2);
	border: 1px solid var(--mg-line);
	border-radius: var(--mg-radius, 10px);
	padding: 14px 18px;
	margin-top: 16px;
	font-size: 13px;
	color: var(--mg-ink-muted);
}
.mgmj-mp__rules summary {
	cursor: pointer;
	font-weight: 600;
	user-select: none;
	color: var(--mg-ink);
}
.mgmj-mp__rules-body { margin-top: 14px; line-height: 1.6; }
.mgmj-mp__rules-body p { margin: 8px 0; }

/* ---- Create-match modal ---- */

.mgmj-mp__create-modal {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	z-index: 9000;
	padding: 16px;
}
.mgmj-mp__create-modal[hidden] { display: none; }
.mgmj-mp__create-card {
	background: var(--mg-bg-2);
	border: 1px solid var(--mg-line-strong);
	border-radius: var(--mg-radius, 10px);
	padding: 20px 22px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
	width: 100%;
	max-width: 420px;
	color: var(--mg-ink);
}
.mgmj-mp__create-title {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 600;
	color: var(--mg-ink);
	font-family: var(--mg-display);
}
.mgmj-mp__create-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px;
	margin: 0 0 4px 0;
	background: var(--mg-bg);
	border: 1px solid var(--mg-line);
	border-radius: var(--mg-radius-sm, 8px);
	cursor: pointer;
	font-size: 14px;
	color: var(--mg-ink);
	transition: border-color .12s;
}
.mgmj-mp__create-row:hover { border-color: var(--mg-line-strong); }
.mgmj-mp__create-row input[type="checkbox"] {
	accent-color: var(--mg-accent);
	margin-top: 2px;
	flex: 0 0 auto;
}
.mgmj-mp__create-row > span { display: flex; flex-direction: column; gap: 4px; }
.mgmj-mp__create-hint {
	display: block;
	font-size: 12px;
	color: var(--mg-ink-muted);
	margin-top: 4px;
	line-height: 1.4;
	font-weight: normal;
}
.mgmj-mp__create-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 16px;
}

/* ---- Match / waiting-room header ---- */

.mgmj-mp__match-header {
	/* v1.14.8: pixel-match bigtwo / doudizhu — was gap:12px /
	 * margin-bottom:8px which shifted the title 2px to the right of
	 * the other games and tightened the gap to the seats grid. User
	 * caught the misalignment side-by-side. */
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.mgmj-mp__pvp-lobby-title {
	font-size: 18px;
	color: var(--mg-ink);
	margin: 0;
	font-family: var(--mg-display);
}
.mgmj-mp__pvp-lobby-meta,
.mgmj-mp__scoreline {
	margin-left: auto;
	color: var(--mg-ink-muted);
	font-size: 13px;
	font-family: var(--mg-display);
	letter-spacing: 0.04em;
}
.mgmj-mp__scoreline { flex: 1 1 auto; text-align: center; margin: 0; }

/* ---- Waiting room: 4 seat cards ---- */

.mgmj-mp__pvp-seats {
	display: grid;
	/* v1.14.13: match bigtwo/doudizhu — 2-col desktop, 1-col mobile.
	 * The v1.14.6 "always 1-col" version turned out to look sparse on
	 * PC (4 cards stacked vertically in a 520px column wastes the
	 * horizontal space and the seats don't read as a table). User
	 * preference flipped after testing. The mobile fallback at
	 * ≤600px below keeps phones reading as a single column. */
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	max-width: 520px;
	margin: 24px auto;
}
.mgmj-mp__pvp-seat {
	background: var(--mg-bg-2);
	border: 1px solid var(--mg-line);
	border-radius: 10px;
	padding: 16px;
	text-align: center;
	min-height: 110px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.mgmj-mp__pvp-seat.is-host { border-color: var(--mg-accent-glow); }
.mgmj-mp__pvp-seat.is-you {
	background: var(--mg-accent-soft);
	border-color: var(--mg-accent);
}
.mgmj-mp__pvp-seat.is-open { border-style: dashed; }
.mgmj-mp__pvp-seat-label {
	font-size: 11px;
	color: var(--mg-ink-muted);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-family: var(--mg-display);
}
.mgmj-mp__pvp-seat-name {
	font-size: 16px;
	font-weight: 600;
	color: var(--mg-ink);
	font-family: var(--mg-display);
}
.mgmj-mp__pvp-seat-name.is-empty {
	color: var(--mg-ink-muted);
	font-weight: 400;
}

.mgmj-mp__pvp-controls {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 12px 0;
}
.mgmj-mp__pvp-status {
	text-align: center;
	color: var(--mg-ink-muted);
	font-size: 14px;
	font-family: var(--mg-display);
}

/* v1.14.13: phone fallback — collapse the 2x2 seat grid to one
 * column at ≤600px so each card has room to breathe. Pixel-matches
 * bigtwo.css and doudizhu.css. */
@media (max-width: 600px) {
	.mgmj-mp__pvp-seats {
		grid-template-columns: 1fr;
	}
}

.mg-mahjong-mp button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---- Toast (lobby-level, shared-token styled) ---- */

.mgmj-mp__toast {
	position: fixed;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 9500;
	max-width: 90vw;
	padding: 11px 18px;
	background: var(--mg-bg-2);
	border: 1px solid var(--mg-line-strong);
	border-radius: var(--mg-radius, 10px);
	color: var(--mg-ink);
	font-size: 13px;
	font-family: var(--mg-display);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.mgmj-mp__toast[hidden] { display: none; }

/* ---- In-match countdown bar (sits in the table grid) ---- */

.mgmj-mp__timer {
	grid-column: 1 / -1;
	height: 7px;
	margin: 0 auto 9px;
	max-width: 320px;
	width: 100%;
	background: rgba(0, 0, 0, 0.45);
	border: 1px solid var(--mg-line);
	border-radius: 99px;
	overflow: hidden;
}
.mgmj-mp__timer[hidden] { display: none; }
.mgmj-mp__timer span {
	display: block;
	height: 100%;
	width: 100%;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--mg-gold) 0%, var(--mg-gold-hi) 100%);
	transition: width 0.2s linear;
}
.mgmj-mp__timer.is-low span {
	background: linear-gradient(90deg, #9a2f27 0%, var(--mg-red) 100%);
}

/* ---- Result overlay: standings + action row ---- */

.mgmj-mp__standings {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 16px;
	margin: 14px 0 4px;
	font-family: var(--mg-serif);
	font-size: 0.9rem;
	color: var(--mg-ivory-lo);
}
.mgmj-mp__overlay-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 18px;
}

/* ---- Practice game: back-to-lobby header + modal hint ---- */

.mgmj-practice-wrap[hidden] { display: none; }

.mgmj-practice-head {
	display: flex;
	align-items: center;
	max-width: 760px;
	margin: 0 auto;
	padding: 4px 12px 0;
}

.mgmj-mp__create-card-hint {
	font-size: 13px;
	color: var(--mg-ink-muted);
	line-height: 1.55;
	margin: 0 0 16px 0;
}

/* Scoreline sits on the dark table — use the gold token, not the
   shared ink-muted, so it reads clearly inside .mg-mahjong. */
.mgmj-mp__match .mgmj-mp__scoreline { color: var(--mg-gold); }