/* MagicDuel - the player's own profile (ifrm/ifrm.profile.php, ui/userprofile/load_profile.php).
   Rebuilt 2026-09-27. Markup: ui/userprofile/profile.render.php. Behaviour: js/md_profile.js.

   THE LOOK, as the owner set it: a section is its header and its content, straight on the game's
   parchment. NO boxed panels, no cards with borders and shadows. Structure comes from type,
   spacing and thin ruled lines, like a ledger page. The section menu is plain jump links, never
   pill buttons; a pill (.mdp-tag) is only ever a STATUS.

   The page lives in the pagecontent iframe (quirks mode, bootstrap loaded, transparent body over
   the parent's parchment). Every rule is scoped under .mdp so bootstrap and the older ifrm
   styles cannot leak in or out.

   PHONE: the page carries md-page-full + md-page-clear (css/css.default.page-frame.css), so under
   700px its sides clear the side panels by the measured --md-panel-clear-* and nothing here
   repeats those numbers. The desktop padding is set only above 700px for the same reason: a
   plain .mdp padding rule would outrank md-page-clear on the phone. Rows a thumb must hit are
   36px or taller (the measured floor for this UI, see the mobile-page-fit skill). */

/* Fonts: SIL OFL, self-hosted next to the card fonts (css/fonts). IM Fell English is the cards'
   engraved serif; Jost is the game's own sans (ui-general imports only its 400 weight, so the
   variable file is loaded here under its own name). */
@font-face { font-family: "IM Fell English"; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/imfell-english-regular.woff2) format("woff2"); }
@font-face { font-family: "IM Fell English"; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/imfell-english-italic.woff2) format("woff2"); }
@font-face { font-family: "MD Jost"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(fonts/jost-variable-latin.woff2) format("woff2"); }

.mdp {
	--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);
	--ember: #d7772b;
	--cinnabar: #b0412f;
	--lapis: #3f5f97;
	--verdigris: #4b7a5e;
	--oxblood: #8b2c23;
	--parchment: rgba(238, 236, 224, .96);   /* measured: the game's page ground is rgb(238,236,224) */
	--src-permanent: #3a2d20;
	--src-weapons: #2e8e94;
	--src-house: #3f66b3;
	--src-room: #7aa03a;
	--src-spell: #d98f26;
	--src-illusion: #bf4a86;
	--serif: "IM Fell English", Georgia, "Times New Roman", serif;
	--sans: "MD Jost", "Jost", "Segoe UI", Arial, Helvetica, sans-serif;

	box-sizing: border-box;
	color: var(--ink);
	font: 400 15px/1.45 var(--sans);
	text-align: left;
	-webkit-font-smoothing: antialiased;
}
.mdp *, .mdp *::before, .mdp *::after { box-sizing: border-box; }
@media (min-width: 701px) {
	.mdp { max-width: 1060px; margin: 0 auto; padding: 14px 66px 56px 54px; }  /* torn edges cover 45px left, 62px right */
	/* the game's right panels, measured by md_profile.js when they hang over the page */
	.mdp { padding-right: max(66px, calc(var(--mdp-clear-right, 0px) + 20px)); }
}

/* bootstrap and the older ifrm styles, neutralised inside the page */
.mdp a { color: inherit; text-decoration: none; }
.mdp a:hover { color: inherit; text-decoration: none; }
.mdp h1, .mdp h2, .mdp h3, .mdp p, .mdp ul, .mdp ol, .mdp figure { margin: 0; padding: 0; }
.mdp ul, .mdp ol { list-style: none; }
.mdp img { border: 0; vertical-align: middle; }
.mdp button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; border-radius: 0; }
.mdp small { font-size: 12.5px; }
.mdp b { font-weight: 600; }
.mdp :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------------------------------------------------------------- the section menu (pinned) */
.mdp-navdock { position: relative; z-index: 30; height: 46px; margin-bottom: 10px; }
.mdp-nav {
	display: flex; align-items: center; gap: 22px; height: 46px;
	border-bottom: 1px solid var(--rule2);
	transition: box-shadow .2s ease, background-color .2s ease;
	will-change: transform;
}
.mdp-nav.is-pinned { background: var(--parchment); box-shadow: 0 6px 14px -8px rgba(60, 40, 20, .35); padding: 0 12px; margin: 0 -12px; }
.mdp-nav-mark { font: 400 21px/1 var(--serif); font-variant: small-caps; letter-spacing: .06em; color: var(--ink); white-space: nowrap; }
.mdp-nav-links { display: flex; align-items: stretch; gap: 18px; height: 100%; flex: 1; min-width: 0;
	overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.mdp-nav-links::-webkit-scrollbar { display: none; }
/* too many links for the room left (the page narrows beside the game's right panels): the row
   scrolls sideways and fades at its end, like the phone menu; md_profile.js sets the class */
/* short of room: first tighten (the public link keeps only its copy icon, the links close up);
   only if that is not enough does the row scroll */
.mdp-nav.is-tight { gap: 14px; }
.mdp-nav.is-tight .mdp-nav-links { gap: 13px; }
.mdp-nav.is-tight .mdp-nav-links a { letter-spacing: .07em; }
.mdp-nav.is-tight .mdp-nav-public > a { display: none; }
.mdp-nav-links.is-overflowing { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); padding-right: 22px; }
.mdp-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;
}
.mdp-nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: transparent; }
.mdp-nav-links a:hover { color: var(--ink); }
.mdp-nav-links a.is-active { color: var(--ink); }
.mdp-nav-links a.is-active::after { background: var(--gold); }
.mdp-nav-public { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink2); white-space: nowrap; }
.mdp-nav-public a { border-bottom: 1px dotted var(--ink3); }
.mdp-nav-public a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.mdp-copy { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 4px; color: var(--ink2); }
.mdp-copy svg { fill: none; stroke: currentColor; stroke-width: 1.3; }
.mdp-copy:hover { background: var(--goldwash); color: var(--ink); }
.mdp-copy.is-done { color: var(--verdigris); }

/* ---------------------------------------------------------------- section headers */
.mdp-sec { margin-top: 46px; }
.mdp-sec-first { margin-top: 18px; }
.mdp-h {
	display: flex; align-items: center; gap: 14px;
	margin: 0 0 14px; font: 400 25px/1.1 var(--serif); font-variant: small-caps; letter-spacing: .05em; color: var(--ink);
}
.mdp-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold2), rgba(199, 156, 71, 0)); }
.mdp-sec .mdp-ov + .mdp-h { margin-top: 34px; }
.mdp-h-side { font-size: 21px; }
.mdp-h3 { margin: 22px 0 8px; font: 500 12.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); }
.mdp-h3:first-child { margin-top: 0; }
.mdp-h3 small { margin-left: 8px; font-size: 11.5px; letter-spacing: .02em; text-transform: none; color: var(--ink3); font-weight: 400; }
.mdp-note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--ink2); max-width: 70ch; }
.mdp-muted { color: var(--ink3); font-size: 12.5px; }
.mdp-empty { color: var(--ink2); font-style: italic; padding: 6px 0; }
.mdp-link { color: var(--gold); border-bottom: 1px dotted var(--gold2); }
.mdp a.mdp-link:hover { color: var(--ink); }
.mdp-inline-list { margin-top: 14px; font-size: 14px; color: var(--ink2); }
.mdp-inline-list b { color: var(--ink); }

/* status pills: the ONE place a pill shape is allowed */
.mdp-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font: 600 10.5px/1.6 var(--sans); letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; white-space: nowrap; }
.mdp-tag-warn { background: rgba(139, 44, 35, .12); color: var(--oxblood); }

/* buttons: rectangles with a small radius, never pills */
.mdp-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 6px 15px;
	border: 1px solid var(--gold2); border-radius: 4px; background: rgba(255, 252, 242, .45);
	font: 500 13.5px/1.2 var(--sans); letter-spacing: .02em; color: var(--ink); white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease;
}
.mdp a.mdp-btn:hover { background: rgba(199, 156, 71, .16); border-color: var(--gold); color: var(--ink); }

/* icons */
.mdp-ico { width: 32px; height: 32px; object-fit: contain; flex: none; }
.mdp-ico-xs { width: 18px; height: 18px; margin-right: 5px; vertical-align: -3px; }
.mdp-ico-md { width: 40px; height: 40px; }

/* meters and rings */
.mdp-meter { display: block; height: 6px; border-radius: 3px; background: rgba(90, 70, 40, .13); box-shadow: inset 0 1px 1px rgba(40, 25, 10, .12); overflow: hidden; }
.mdp-meter i { display: block; height: 100%; border-radius: 3px; background: var(--gold); }
.mdp-meter.is-ember i { background: linear-gradient(90deg, #c9611f, var(--ember)); }
.mdp-meter.is-cinnabar i { background: linear-gradient(90deg, #943222, var(--cinnabar)); }
.mdp-meter.is-lapis i { background: linear-gradient(90deg, #324d7d, var(--lapis)); }
.mdp-meter.is-verdigris i { background: var(--verdigris); }
.mdp-meter.is-gold i { background: linear-gradient(90deg, #b88a36, var(--gold2)); }
.mdp-meter.is-oxblood i { background: var(--oxblood); }
.mdp-ring { flex: none; }
.mdp-ring-bg { fill: none; stroke: rgba(90, 70, 40, .15); stroke-width: 3.5; }
.mdp-ring-fg { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linecap: round; }

/* ---------------------------------------------------------------- overview: identity + waiting */
.mdp-ov { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.mdp-id { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 22px; align-items: start; }
.mdp-portrait { text-align: center; }
.mdp-portrait img {
	display: block; width: 112px; height: 179px; object-fit: contain; padding: 5px;
	border: 1px solid var(--gold2); border-radius: 56px 56px 5px 5px; background: rgba(255, 252, 242, .35);
}
.mdp-portrait figcaption { margin-top: 6px; font-size: 11.5px; color: var(--ink3); letter-spacing: .04em; }
.mdp-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; color: var(--ink3); font-size: 13px; }
.mdp-name { font: 400 38px/1.02 var(--serif); letter-spacing: .01em; color: var(--ink); overflow-wrap: anywhere; }
.mdp-title { margin-top: 4px; font: italic 400 21px/1.2 var(--serif); color: var(--gold); }
.mdp-subtitle { margin-top: 3px; font-size: 13.5px; color: var(--ink2); }
.mdp-subtitle a { border-bottom: 1px dotted var(--ink3); }
.mdp-motto { margin-top: 12px; font: italic 400 16px/1.4 var(--serif); color: var(--ink2); max-width: 46ch; }
.mdp-facts { display: grid; gap: 10px; margin-top: 16px; }
.mdp-fact { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; position: relative; min-height: 40px; }
.mdp-fact > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mdp-fact b { font-weight: 600; font-size: 15px; line-height: 1.2; }
.mdp-fact small { color: var(--ink2); line-height: 1.25; }
.mdp a.mdp-fact:hover b { text-decoration: underline; text-decoration-color: var(--gold2); text-underline-offset: 3px; }
.mdp-fact-num { position: absolute; left: 0; top: 50%; width: 40px; transform: translateY(-50%); text-align: center; font: 600 15px/1 var(--sans); color: var(--ink); }
.mdp-crest-sm { width: 40px; height: 40px; object-fit: contain; }
.mdp-ico-fact { width: 30px; height: 30px; justify-self: center; }
.mdp-fact > span:only-child { grid-column: 2; }
.mdp-age { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 13.5px; color: var(--ink2); }
.mdp-medals { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.mdp-medals img { width: 20px; height: 20px; }

.mdp-wait-list { border-top: 1px solid var(--rule2); }
.mdp-wait-list li { border-bottom: 1px solid var(--rule); }
.mdp-wait-row { display: grid; grid-template-columns: 32px auto minmax(0, 1fr) 12px; align-items: center; gap: 10px; min-height: 46px; padding: 6px 4px; }
.mdp a.mdp-wait-row:hover { background: var(--goldwash); }
.mdp-wait-n { font: 600 17px/1 var(--sans); color: var(--ink); white-space: nowrap; }
.mdp-wait-t { color: var(--ink2); font-size: 14.5px; line-height: 1.3; min-width: 0; }
.mdp-wait-row > .mdp-ico + .mdp-wait-t { grid-column: 2 / span 2; }
.mdp-wait-list li.is-warn .mdp-wait-t { color: var(--oxblood); }
.mdp-chev { width: 8px; height: 8px; border-top: 1.5px solid var(--ink3); border-right: 1.5px solid var(--ink3); transform: rotate(45deg); justify-self: center; }
.mdp a.mdp-wait-row:hover .mdp-chev { border-color: var(--ink); }

/* ---------------------------------------------------------------- medals */
/* Right under who the player is: medals and titles are what the forge and the realm hold as true.
   Each medal is its own detailed drawing (art/medals/detail/, 2026-09-27); the card with the large
   drawing and the words is built by md_profile.js on first use, so a closed card adds no height. */
#mdp-medals { position: relative; }
.mdp-h-count { margin-left: -6px; font: 500 14px/1 var(--sans); font-variant: normal; letter-spacing: 0; color: var(--ink3); }
.mdp-medals-intro { max-width: 74ch; margin: -2px 0 16px; font: italic 400 16px/1.45 var(--serif); color: var(--ink2); }
.mdp-medal-grid { display: flex; flex-wrap: wrap; gap: 6px 4px; }
.mdp-medal { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 96px; padding: 6px 2px 6px; border-radius: 6px; text-align: center; }
.mdp-medal img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(40, 25, 10, .22)); transition: transform .18s ease; }
.mdp .mdp-medal:hover, .mdp .mdp-medal.is-open { background: var(--goldwash); }
.mdp-medal:hover img, .mdp-medal.is-open img, .mdp-medal:focus-visible img { transform: translateY(-2px) scale(1.06); }
.mdp-medal-name { max-width: 92px; font: 500 11.5px/1.2 var(--sans); color: var(--ink2); }
.mdp-medal.is-gold .mdp-medal-name { color: #8a5f12; }
.mdp-medal-slot { display: block; width: 60px; height: 60px; border: 1.5px dashed var(--rule2); border-radius: 50%; }
.mdp-medals-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.mdp-medals-empty p { color: var(--ink2); font-style: italic; }

.mdp-medal-card {
	position: absolute; z-index: 45; width: 400px; max-width: 100%;
	display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start;
	padding: 14px 16px 14px 12px; background: #faf6ea; border: 1px solid var(--rule2); border-radius: 8px;
	box-shadow: 0 14px 34px -14px rgba(40, 25, 10, .5);
	opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .14s ease, transform .14s ease;
}
.mdp-medal-card.is-on { opacity: 1; transform: none; pointer-events: auto; }
.mdp-medal-card img { width: 150px; height: 150px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(40, 25, 10, .3)); }
.mdp-medal-card h4 { margin: 4px 0 6px; font: 400 22px/1.15 var(--serif); color: var(--ink); }
.mdp-medal-card .mdp-medal-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.mdp-medal-card .mdp-medal-desc { font-size: 14px; line-height: 1.45; color: var(--ink); }
.mdp-medal-card .mdp-medal-held { margin-top: 8px; font-size: 12.5px; color: var(--ink2); }
.mdp-tag-gold { background: rgba(199, 156, 71, .22); color: #7d5410; }
.mdp-tag-silver { background: rgba(120, 130, 140, .18); color: #4b5560; }
.mdp-tag-bronze { background: rgba(160, 95, 45, .16); color: #7a4318; }
.mdp-tag-rarity { background: rgba(90, 70, 40, .1); color: var(--ink2); }
.mdp-tag-legendary { background: rgba(139, 44, 35, .12); color: var(--oxblood); }

/* ---------------------------------------------------------------- now */
.mdp-now-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mdp-stat { display: flex; flex-direction: column; gap: 4px; padding: 2px 11px 4px; border-left: 1px solid var(--rule); min-width: 0; }
.mdp-stat:first-child { border-left: 0; padding-left: 0; }
.mdp-stat-l { min-height: 2.4em; font: 500 10.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.mdp-stat-v { font: 600 21px/1.05 var(--sans); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mdp-stat-max { margin-top: -2px; font-size: 12.5px; color: var(--ink3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mdp-stat-note { font-size: 12.5px; color: var(--ink2); }
.mdp-stat .mdp-tag { align-self: flex-start; }
.mdp-stat.is-fresh .mdp-stat-v { animation: mdpFresh .9s ease; }
@keyframes mdpFresh { from { color: var(--gold); } to { color: var(--ink); } }

/* ---------------------------------------------------------------- character */
.mdp-char { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.mdp-statlist { border-top: 1px solid var(--rule2); }
.mdp-srow { border-bottom: 1px solid var(--rule); }
.mdp-srow-btn { display: grid; grid-template-columns: 20px minmax(0, 10em) minmax(0, 1fr) 4.2em; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 4px 2px; }
.mdp-srow-nobar .mdp-srow-btn { grid-template-columns: 20px minmax(0, 1fr) 0 4.2em; }
.mdp-srow-btn:hover { background: var(--goldwash); }
.mdp-srow-btn img { width: 20px; height: 20px; }
.mdp-sname { font-size: 14.5px; line-height: 1.15; overflow-wrap: anywhere; }
.mdp-sval { text-align: right; font: 600 16px/1 var(--sans); font-variant-numeric: tabular-nums; }
.mdp-sval.is-neg { color: var(--oxblood); }
.mdp-sbar { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 9px; }
.mdp-sbar::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--ink2); opacity: .55; }
.mdp-sbar-neg { display: flex; flex-direction: row-reverse; }
.mdp-sbar-pos { display: flex; }
.mdp-sbar i { display: block; height: 100%; }
.mdp-sbar-neg i:first-child { border-radius: 0; }
.mdp-sbar-neg i:last-child { border-radius: 2px 0 0 2px; }
.mdp-sbar-pos i:last-child { border-radius: 0 2px 2px 0; }
.mdp-src-permanent { background: var(--src-permanent); }
.mdp-src-weapons { background: var(--src-weapons); }
.mdp-src-house { background: var(--src-house); }
.mdp-src-room { background: var(--src-room); }
.mdp-src-spell { background: var(--src-spell); }
.mdp-src-illusion { background: var(--src-illusion); }
.mdp-sdetail { display: none; padding: 2px 4px 12px 32px; font-size: 13.5px; color: var(--ink2); }
.mdp-srow.is-open .mdp-sdetail { display: block; }
.mdp-srow.is-open .mdp-srow-btn { background: var(--goldwash); }
.mdp-sdetail p + p { margin-top: 4px; }
.mdp-sparts { color: var(--ink); }
.mdp-src-t { background: none !important; font-weight: 500; }
.mdp-src-t.mdp-src-permanent { color: var(--src-permanent); }
.mdp-src-t.mdp-src-weapons { color: var(--src-weapons); }
.mdp-src-t.mdp-src-house { color: var(--src-house); }
.mdp-src-t.mdp-src-room { color: #5f7f26; }
.mdp-src-t.mdp-src-spell { color: #b8740f; }
.mdp-src-t.mdp-src-illusion { color: var(--src-illusion); }
.mdp-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 12px; color: var(--ink2); }
.mdp-legend span { display: inline-flex; align-items: center; gap: 5px; }
.mdp-legend i { display: inline-block; width: 14px; height: 7px; border-radius: 1px; }
.mdp-after-list { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }

.mdp-radar { display: block; width: 100%; max-width: 480px; height: auto; margin: 0 auto; overflow: visible; }
.mdp-radar-ring { fill: none; stroke: rgba(120, 94, 58, .22); stroke-width: 1; }
.mdp-radar-ring.is-outer { stroke: rgba(120, 94, 58, .42); }
.mdp-radar-spoke { stroke: rgba(120, 94, 58, .32); stroke-width: 1; }
.mdp-radar-spoke.is-off { stroke-dasharray: 3 4; stroke: rgba(120, 94, 58, .25); }
.mdp-radar-label { font: 500 14px var(--sans); fill: var(--ink); }
.mdp-radar-label.is-off { fill: var(--ink3); font-weight: 400; }
.mdp-radar-shape { fill: rgba(199, 156, 71, .32); stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.mdp-radar-dot { fill: var(--gold); stroke: #fff8e8; stroke-width: 1; }
.mdp-radar-scale { font: 400 10px var(--sans); fill: var(--ink3); }
.mdp-leanlist { margin-top: 10px; border-top: 1px solid var(--rule2); }
.mdp-leanlist li { display: grid; grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 3em; align-items: center; gap: 10px; min-height: 30px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.mdp-leanlist .mdp-ln { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdp-leanlist b { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- progress */
.mdp-prog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 28px; }
.mdp-pitem {
	display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-auto-rows: min-content; column-gap: 12px; align-content: start;
	min-height: 118px; padding: 14px 4px 12px; border-top: 1px solid var(--rule);
}
.mdp-pitem > :not(.mdp-pico) { grid-column: 2; }
.mdp-pico { grid-row: 1 / span 4; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; position: relative; }
.mdp-pico .mdp-ico { width: 38px; height: 38px; }
.mdp-pico-ring .mdp-ring { position: absolute; inset: 0; }
.mdp-pico-ring .mdp-ico-in { width: 24px; height: 24px; }
.mdp a.mdp-pitem:hover { background: var(--goldwash); }
.mdp-ptitle { font: 500 11.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.mdp-pbig { font: 600 22px/1.2 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.mdp-pbig small { font-weight: 400; font-size: 12.5px; color: var(--ink3); }
.mdp-pline { font-size: 13px; line-height: 1.35; color: var(--ink2); overflow-wrap: anywhere; }
.mdp-pview { margin-top: 5px; font: 500 12px/1 var(--sans); letter-spacing: .06em; color: var(--gold); }
.mdp-pview::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); vertical-align: 1px; }
.mdp-skel { display: block; border-radius: 3px; background: linear-gradient(90deg, rgba(120, 94, 58, .08), rgba(120, 94, 58, .16), rgba(120, 94, 58, .08)); background-size: 200% 100%; animation: mdpSkel 1.4s linear infinite; }
.mdp-skel-ico { grid-row: 1 / span 3; width: 34px; height: 34px; border-radius: 50%; }
.mdp-skel-a { width: 55%; height: 10px; margin: 3px 0 8px; }
.mdp-skel-b { width: 40%; height: 18px; margin-bottom: 8px; }
.mdp-skel-c { width: 75%; height: 10px; }
@keyframes mdpSkel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.mdp-prog-error { grid-column: 1 / -1; padding: 12px 0; color: var(--oxblood); }

/* ---------------------------------------------------------------- realm */
.mdp-realm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 8px 40px; align-items: start; }
.mdp-realm-l { min-width: 0; }
.mdp-alliance { display: grid; margin-bottom: 10px; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; }
.mdp-alliance-t { min-width: 0; }
.mdp .mdp-alliance-none { grid-template-columns: 1fr; }
.mdp-crest { width: 112px; height: 112px; object-fit: contain; }
.mdp-alliance-name { font: 400 25px/1.1 var(--serif); }
.mdp-alliance-name a:hover { text-decoration: underline; text-decoration-color: var(--gold2); }
.mdp-land { margin-top: 2px; font: italic 400 16px/1.3 var(--serif); color: var(--gold); }
.mdp-oneness { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.mdp-oneness span { display: flex; flex-direction: column; }
.mdp-oneness small { color: var(--ink2); }
.mdp-bonus { font-size: 14px; color: var(--ink2); padding: 8px 0; border-top: 1px solid var(--rule); }
.mdp-bonus b { color: var(--ink); }
.mdp-bonus-l { display: block; font: 500 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.mdp-affinity { min-width: 0; }
.mdp-bars { border-top: 1px solid var(--rule2); }
.mdp-bars li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 4em; align-items: center; gap: 10px; min-height: 28px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.mdp-bars li.is-more { display: none; }
.mdp-bars.is-all li.is-more { display: grid; }
.mdp-bar-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdp-bar { height: 8px; }
.mdp-bar i { display: block; height: 100%; border-radius: 0 2px 2px 0; background: linear-gradient(90deg, #b88a36, var(--gold2)); }
.mdp-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.mdp-more { margin-top: 8px; min-height: 36px; font-size: 13.5px; color: var(--gold); border-bottom: 1px dotted var(--gold2) !important; }
.mdp-more:hover { color: var(--ink); }

/* ---------------------------------------------------------------- record */
.mdp-rec-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mdp-rec { display: flex; align-items: center; gap: 12px; padding: 4px 18px; border-left: 1px solid var(--rule); min-width: 0; }
.mdp-rec:first-child { border-left: 0; padding-left: 0; }
.mdp-rec > span { display: flex; flex-direction: column; min-width: 0; }
.mdp-rec b { font-weight: 600; }
.mdp-rec small { color: var(--ink2); }
.mdp-rec-fights { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; }
.mdp-rec-top { font-size: 14px; color: var(--ink2); }
.mdp-rec-top b { color: var(--ink); margin-right: 4px; }
.mdp-balance { position: relative; display: block; height: 8px; border-radius: 4px; background: rgba(176, 65, 47, .55); overflow: visible; }
.mdp-balance i { display: block; height: 100%; border-radius: 4px 0 0 4px; background: var(--verdigris); }
.mdp-balance em { position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink); }
.mdp-rec-line { margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink2); }
.mdp-dna { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink2); }
.mdp-dna-l { font: 500 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.mdp-dna-code { display: inline-flex; align-items: flex-end; height: 18px; gap: 2px; }
.mdp-dna-code i { display: block; width: 2px; background: var(--ink); }
.mdp-dna-code i.is-1 { height: 18px; }
.mdp-dna-code i.is-0 { height: 8px; opacity: .55; }
.mdp-dna-code i.is-gap { width: 6px; background: none; }
.mdp-streaks { border-top: 1px solid var(--rule2); }
.mdp-streaks li { display: grid; grid-template-columns: minmax(0, 1fr) 4em minmax(0, 1fr) 7em; align-items: center; gap: 12px; min-height: 34px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.mdp-streaks b { text-align: right; }
.mdp-streaks small { color: var(--ink2); text-align: right; }

/* ---------------------------------------------------------------- avatar and account */
.mdp-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ================================================================= PHONE (the iframe is <= 700px) */
@media (max-width: 700px) {
	.mdp { font-size: 14.5px; padding-top: 2px; padding-bottom: 40px; }
	/* the dock keeps the unpinned height, so hiding the name row while pinned moves nothing below */
	.mdp-navdock { height: 77px; margin-bottom: 6px; }
	.mdp-nav.is-pinned .mdp-nav-mark, .mdp-nav.is-pinned .mdp-nav-public { display: none; }
	.mdp-nav { flex-wrap: wrap; height: auto; gap: 0 12px; }
	.mdp-nav.is-pinned { padding: 0 8px; margin: 0 -8px; }
	.mdp-nav-mark { font-size: 19px; line-height: 36px; }
	.mdp-nav-public { margin-left: auto; font-size: 12.5px; }
	.mdp-nav-links {
		order: 3; flex: 0 0 100%; height: 38px; gap: 16px;
		overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
		padding-right: 24px;
	}
	.mdp-nav-links::-webkit-scrollbar { display: none; }
	.mdp-nav-links a { font-size: 12px; letter-spacing: .1em; }

	.mdp-sec { margin-top: 34px; }
	.mdp-sec-first { margin-top: 12px; }
	.mdp-h { font-size: 22px; margin-bottom: 10px; }

	.mdp-ov { grid-template-columns: 1fr; gap: 26px; }
	.mdp-id { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
	.mdp-portrait img, .mdp-portrait-none span { width: 76px; height: 122px; border-radius: 38px 38px 4px 4px; padding: 3px; }
	.mdp-portrait figcaption { font-size: 10.5px; }
	.mdp-name { font-size: 29px; }
	.mdp-title { font-size: 18px; }
	.mdp-motto { font-size: 15px; }
	.mdp-facts { grid-column: 1 / -1; margin-top: 4px; }
	.mdp-age, .mdp-medals { grid-column: 1 / -1; }
	.mdp-id-text { display: contents; }
	.mdp-id-text > .mdp-name, .mdp-id-text > .mdp-title, .mdp-id-text > .mdp-subtitle, .mdp-id-text > .mdp-motto { grid-column: 2; }
	.mdp-portrait { grid-row: 1 / span 4; }
	.mdp-id { align-items: start; row-gap: 2px; }

	.mdp-medals-intro { font-size: 15px; }
	.mdp-medal-grid { gap: 4px 2px; }
	.mdp-medal { width: 76px; }
	.mdp-medal img { width: 58px; height: 58px; }
	.mdp-medal-name { max-width: 72px; font-size: 11px; }
	.mdp-medal-card { width: 100%; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px; }
	.mdp-medal-card img { width: 96px; height: 96px; }
	.mdp-medal-card h4 { font-size: 19px; }

	.mdp-now-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
	.mdp-stat, .mdp-stat:first-child { border-left: 0; padding: 10px 0 10px; border-top: 1px solid var(--rule); }
	.mdp-stat-v { font-size: 19px; }

	.mdp-char { grid-template-columns: 1fr; gap: 26px; }
	.mdp-srow-btn { grid-template-columns: 20px minmax(0, 7.6em) minmax(0, 1fr) 3.4em; gap: 8px; min-height: 38px; }
	.mdp-sname { font-size: 14px; }
	.mdp-sdetail { padding-left: 28px; }
	.mdp-radar { max-width: 100%; }
	.mdp-radar-label { font-size: 16px; }
	.mdp-leanlist li { grid-template-columns: minmax(0, 8em) minmax(0, 1fr) 2.8em; min-height: 34px; }

	.mdp-prog { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
	.mdp-pitem { grid-template-columns: 30px minmax(0, 1fr); column-gap: 8px; min-height: 104px; padding: 12px 0 10px; }
	.mdp-pico { width: 30px; height: 30px; }
	.mdp-pico .mdp-ico { width: 30px; height: 30px; }
	.mdp-pico-ring .mdp-ring { width: 30px; height: 30px; }
	.mdp-pico-ring .mdp-ico-in { width: 18px; height: 18px; }
	.mdp-pbig { font-size: 19px; }
	.mdp-pline { font-size: 12.5px; }
	.mdp-pview { display: inline-flex; align-items: center; min-height: 28px; }

	.mdp-realm { grid-template-columns: 1fr; gap: 6px; }
	.mdp-alliance { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
	.mdp-crest { width: 76px; height: 76px; }
	.mdp-alliance-name { font-size: 22px; }
	.mdp-affinity { margin-top: 14px; }
	.mdp-bars li { grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr) 3.4em; min-height: 32px; font-size: 13.5px; }

	.mdp-rec-row { grid-template-columns: 1fr; }
	.mdp-rec, .mdp-rec:first-child { border-left: 0; padding: 12px 0; border-top: 1px solid var(--rule); }
	.mdp-streaks li { grid-template-columns: minmax(0, 1fr) 3em; }
	.mdp-streaks li .mdp-meter { grid-column: 1; }
	.mdp-streaks li small { grid-column: 2; }

	.mdp-actions { gap: 8px; }
	.mdp-actions .mdp-btn { flex: 1 1 45%; min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	.mdp-skel, .mdp-stat.is-fresh .mdp-stat-v { animation: none; }
	.mdp-nav { transition: none; }
}