/* MagicDuel - a player's PUBLIC profile page (member.php, /players/<name>). Rebuilt 2026-09-28.
   Markup: ui/userprofile/member.render.php. Behaviour: js/md_member.js.

   The page wears the in-game profile's look: css/md_profile.css is loaded first and this file adds
   what a STANDALONE page needs (the in-game one lives in the game's iframe): the ground, the site
   bar, the frame, the sticky menu, and the sections only the public page has (writings,
   creatures, adepts, the story). Same rules: no boxed sections, jump links never pills, a pill is
   only a status.

   md_profile.css zeroes .mdp h2/h3/p/ul margins with a selector that outranks its own single-class
   margins, so the margins this page relies on are set again here under .mdm.

   Phone: under 700px, 16px side gutter, nothing wider than the screen. */

.mdm-body {
	--ink: #2b2118;
	--ink2: #65543f;
	--ink3: #8e7b63;
	--rule: rgba(120, 94, 58, .26);
	--rule2: rgba(120, 94, 58, .42);
	--gold: #a8792a;
	--gold2: #c79c47;
	--goldwash: rgba(168, 121, 42, .08);
	--parchment: rgba(238, 236, 224, .97);
	--serif: "IM Fell English", Georgia, "Times New Roman", serif;
	--sans: "MD Jost", "Jost", "Segoe UI", Arial, Helvetica, sans-serif;

	margin: 0;
	min-height: 100vh;
	/* img/skin/default/bgpag.jpg averages rgb(237,235,223): the game's own page ground */
	background: #eeece0 url(../img/skin/default/bgpag.jpg);
	color: var(--ink);
	font: 400 15px/1.45 var(--sans);
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
.mdm-body *, .mdm-body *::before, .mdm-body *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- the site bar */
.mdm-top { border-bottom: 1px solid var(--rule2); background: rgba(250, 247, 236, .5); }
.mdm-top-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1060px; height: 54px; margin: 0 auto; padding: 0 32px; }
.mdm-brand { font: 400 27px/1 var(--serif); font-variant: small-caps; letter-spacing: .05em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.mdm-top-links { display: flex; align-items: center; gap: 22px; }
.mdm-top-links a { font: 500 12.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); text-decoration: none; white-space: nowrap; }
.mdm-top-links a:hover { color: var(--ink); }
.mdm-top-links a.mdm-top-join { color: var(--gold); padding-bottom: 3px; border-bottom: 1px solid var(--gold2); }

/* ---------------------------------------------------------------- the frame, and the advert rail */
.mdm-shell { max-width: 1060px; margin: 0 auto; }
.mdp.mdm { max-width: 1060px; margin: 0 auto; padding: 16px 32px 56px; }
.mdm-rail { display: none; }
@media (min-width: 1180px) {
	.mdm-shell.has-rail { display: grid; grid-template-columns: minmax(0, 1fr) 132px; gap: 20px; max-width: 1232px; padding-right: 20px; }
	.mdm-shell.has-rail .mdp.mdm { width: 100%; }
	.mdm-rail { display: block; }
	.mdm-rail-in { position: sticky; top: 62px; padding-top: 74px; }
}

/* ---------------------------------------------------------------- notes above the page */
.mdm .mdm-owner { margin: 0 0 12px; padding: 4px 0 12px; border-bottom: 1px solid var(--rule); font-size: 14px; line-height: 1.5; color: var(--ink2); }
.mdm .mdm-owner b { color: var(--ink); }
.mdm .mdm-banned { margin: 0 0 12px; padding: 4px 0 12px; border-bottom: 1px solid var(--rule); font-size: 14px; color: var(--oxblood); }

/* ---------------------------------------------------------------- the section menu (sticky) */
.mdm-nav {
	position: sticky; top: 0; z-index: 30;
	display: flex; align-items: center; gap: 12px;
	height: 46px; margin: 0 -12px 8px; padding: 0 12px;
	background: var(--parchment); border-bottom: 1px solid var(--rule2);
	transition: box-shadow .2s ease;
}
.mdm-nav.is-stuck { box-shadow: 0 6px 14px -8px rgba(60, 40, 20, .35); }
.mdm-nav-links { display: flex; align-items: stretch; gap: 20px; height: 100%; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.mdm-nav-links::-webkit-scrollbar { display: none; }
.mdm-nav-links a {
	position: relative; display: flex; align-items: center; height: 100%;
	font: 500 12.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); white-space: nowrap;
}
.mdm-nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.mdm-nav-links a:hover, .mdm-nav-links a.is-active { color: var(--ink); }
.mdm-nav-links a.is-active::after { background: var(--gold); }
.mdp .mdm-copy { flex: none; width: 32px; height: 32px; border-radius: 4px; }
.mdm .mdp-sec { scroll-margin-top: 62px; }

/* ---------------------------------------------------------------- margins md_profile.css zeroes */
.mdm .mdp-h { margin: 0 0 16px; }
.mdm .mdp-h-side { margin-bottom: 10px; }
.mdm .mdp-h3 { margin: 0 0 10px; }
.mdm .mdm-h3-gap { margin-top: 30px; }
.mdm .mdp-motto { margin-top: 12px; }
.mdm .mdp-facts { margin-top: 16px; }
.mdm .mdp-age { margin-top: 16px; }
.mdm .mdp-medals-intro { margin: 0 0 16px; }
.mdm .mdp-note { margin-top: 12px; }
.mdm .mdp-legend { margin-top: 10px; }
.mdm .mdp-land { margin-top: 2px; }
.mdm .mdp-oneness { margin-top: 10px; }
.mdm .mdp-leanlist { margin-top: 10px; }
.mdm .mdp-actions { margin-top: 4px; }

/* ---------------------------------------------------------------- overview */
.mdm-portrait-none span {
	display: flex; align-items: center; justify-content: center; width: 112px; height: 179px;
	border: 1px dashed var(--rule2); border-radius: 56px 56px 5px 5px;
	font: 400 56px/1 var(--serif); color: var(--ink3);
}
.mdm-side { min-width: 0; }
.mdm .mdm-rec { border-top: 1px solid var(--rule2); }
.mdm-rec li { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); align-items: baseline; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.mdm-rec-l { font: 500 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.mdm-rec-v { color: var(--ink2); min-width: 0; overflow-wrap: anywhere; }
.mdm-rec-v b { color: var(--ink); }
.mdm-rec-fights .mdp-balance { grid-column: 2; margin: 6px 0 2px; }
.mdm-join { margin-top: 22px; }
.mdm .mdm-join p { margin-top: 8px; max-width: 42ch; font-size: 13px; line-height: 1.45; color: var(--ink2); }
.mdp .mdm-btn-gold, .mdm-btn-gold {
	min-height: 42px; padding: 8px 18px; white-space: normal; text-align: center;
	background: linear-gradient(#cda455, #a8792a); border-color: #8a6320; color: #fffaf0; font-size: 14.5px;
	text-shadow: 0 1px 0 rgba(60, 35, 5, .35);
}
.mdp a.mdm-btn-gold:hover { background: linear-gradient(#bf953f, #926820); border-color: #6f4d17; color: #fff; }

/* ---------------------------------------------------------------- medals */
#mdm-medals { position: relative; }

/* ---------------------------------------------------------------- realm */
.mdm-sets .mdp-bar-l small { color: var(--ink3); }

/* ---------------------------------------------------------------- writings */
.mdm-doc { padding-bottom: 26px; }
.mdm-doc + .mdm-doc { padding-top: 22px; border-top: 1px solid var(--rule); }
.mdm .mdm-doc-h { margin: 0 0 10px; font: 400 23px/1.2 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.mdm-doc-h small { margin-left: 8px; font: 500 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.mdm-writing { max-width: 76ch; font-size: 15.5px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; }
.mdm .mdm-writing p { margin: 0 0 .8em; }
.mdm .mdm-writing h3 { margin: 1.1em 0 .4em; font: 400 20px/1.25 var(--serif); }
.mdm .mdm-writing h4 { margin: 1.1em 0 .4em; font: 600 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.mdm .mdm-writing ul { margin: 0 0 .8em; padding-left: 1.4em; list-style: disc; }
.mdm .mdm-writing ol { margin: 0 0 .8em; padding-left: 1.6em; list-style: decimal; }
.mdm .mdm-writing li { margin: .15em 0; }
.mdm .mdm-writing a { color: var(--gold); border-bottom: 1px dotted var(--gold2); }
.mdm .mdm-writing a:hover { color: var(--ink); }
.mdm-writing img { max-width: 100%; height: auto; }
.mdm .mdm-writing blockquote { margin: 0 0 .8em; padding-left: 14px; border-left: 2px solid var(--gold2); color: var(--ink2); font-style: italic; }
.mdm-writing table { display: block; max-width: 100%; overflow-x: auto; margin: 0 0 1em; border-collapse: collapse; font-size: 14px; }
.mdm-writing td, .mdm-writing th { padding: 4px 10px 4px 0; border-bottom: 1px solid var(--rule); vertical-align: top; text-align: left; }
.mdm-writing hr { margin: 1.2em 0; border: 0; border-top: 1px solid var(--rule2); }
.mdm-writing pre { white-space: pre-wrap; font-size: 13.5px; }
.mdm-writing > :last-child { margin-bottom: 0; }
.mdm-writing.is-long { position: relative; max-height: 440px; overflow: hidden; }
.mdm-writing.is-long::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(rgba(238, 236, 224, 0), #eeece0 88%); pointer-events: none; }
.mdm-writing.is-long.is-open { max-height: none; overflow: visible; }
.mdm-writing.is-long.is-open::after { display: none; }
.mdp .mdm-more { display: inline-flex; align-items: center; min-height: 36px; margin-top: 6px; font: 500 13.5px/1 var(--sans); color: var(--gold); border-bottom: 1px dotted var(--gold2); }
.mdp .mdm-more:hover { color: var(--ink); }
.mdp .mdm-more[hidden] { display: none; }

/* ---------------------------------------------------------------- creatures */
.mdm .mdm-creatures { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 16px 14px; }
.mdm-creatures li { display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 12px; border-top: 1px solid var(--rule); text-align: center; min-width: 0; }
.mdm-creatures img { width: 75px; height: 75px; object-fit: contain; margin-bottom: 4px; }
.mdm-cr-name { max-width: 100%; font: 400 17px/1.15 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.mdm-cr-sub { font-size: 12px; line-height: 1.3; color: var(--ink3); }

/* ---------------------------------------------------------------- adepts */
.mdm .mdm-lead { margin: 0 0 12px; font-size: 15px; color: var(--ink2); }
.mdm .mdm-adepts { columns: 4 170px; column-gap: 28px; }
.mdm-adepts li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdm .mdm-adepts a:hover { color: var(--gold); }

/* ---------------------------------------------------------------- the story */
.mdm .mdm-story-page { margin: -6px 0 10px; font: 500 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.mdm-story-text { font: italic 400 17.5px/1.55 var(--serif); color: var(--ink2); max-width: 70ch; }
.mdm .mdm-story-note { margin: 14px 0 16px; font-size: 13.5px; color: var(--ink2); max-width: 70ch; }

/* ---------------------------------------------------------------- footer */
.mdm-foot { border-top: 1px solid var(--rule2); background: rgba(250, 247, 236, .35); }
.mdm-foot-in { max-width: 1060px; margin: 0 auto; padding: 22px 32px 96px; font-size: 13px; color: var(--ink2); }
.mdm-search label { display: block; margin-bottom: 6px; font: 500 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.mdm-search-row { display: flex; gap: 8px; max-width: 460px; }
.mdm-search input[type="search"] {
	flex: 1; min-width: 0; height: 38px; padding: 0 10px;
	border: 1px solid var(--rule2); border-radius: 4px; background: rgba(255, 252, 242, .75);
	font: 400 15px/1 var(--sans); color: var(--ink);
}
.mdm-search input[type="search"]:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.mdm-search .mdp-btn { min-height: 38px; cursor: pointer; }
.mdm-search .mdp-btn:hover { background: rgba(199, 156, 71, .16); border-color: var(--gold); }
.mdm-foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 20px 0 10px; }
.mdm-foot-links a { color: var(--ink2); text-decoration: none; border-bottom: 1px dotted var(--ink3); }
.mdm-foot-links a:hover { color: var(--ink); }
.mdm-foot-note { max-width: 86ch; margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink3); }
.mdm-foot-note a { color: var(--ink2); }

/* ---------------------------------------------------------------- not found */
.mdp.mdm-missing { padding-top: 80px; text-align: center; }
.mdm-missing .mdp-motto { margin: 12px auto 22px; }
.mdm-missing .mdp-actions { justify-content: center; }

/* ================================================================= PHONE */
@media (max-width: 700px) {
	.mdm-top-in { height: 50px; padding: 0 16px; gap: 10px; }
	.mdm-brand { font-size: 23px; }
	.mdm-top-links { gap: 14px; }
	.mdm-top-links a { font-size: 11.5px; letter-spacing: .08em; }

	.mdp.mdm { padding: 8px 16px 40px; }
	.mdm-nav { height: 44px; margin: 0 -16px 6px; padding: 0 8px 0 16px; }
	.mdm-nav-links { gap: 16px; -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); padding-right: 22px; -webkit-overflow-scrolling: touch; }
	.mdm-nav-links a { font-size: 12px; letter-spacing: .1em; }
	.mdm .mdp-sec { scroll-margin-top: 56px; }

	.mdm-portrait-none span { width: 76px; height: 122px; border-radius: 38px 38px 4px 4px; font-size: 38px; }
	.mdm-rec li { grid-template-columns: 6.4em minmax(0, 1fr); font-size: 14px; }
	.mdp .mdm-btn-gold { width: 100%; }
	.mdm .mdm-join p { max-width: none; }

	.mdm .mdm-doc-h { font-size: 21px; }
	.mdm-writing { font-size: 15px; }
	.mdm-writing.is-long { max-height: 380px; }

	.mdm .mdp-leanlist li { grid-template-columns: minmax(0, 9.6em) minmax(0, 1fr) 2.8em; }
	.mdm .mdm-creatures { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px 10px; }
	.mdm-cr-name { font-size: 15.5px; }
	.mdm .mdm-adepts { columns: 2; column-gap: 18px; }
	.mdm-story-text { font-size: 16.5px; }
	.mdm-foot-in { padding: 20px 16px 120px; }
}

@media (prefers-reduced-motion: reduce) {
	.mdm-nav { transition: none; }
	html { scroll-behavior: auto; }
}