/* THE MASK CUP — MASK TRUST (página pública e página do jogador; usa page.css) */

.mt-hero { align-items: center; }
.mt-hero .pg-sub b { color: var(--silver-hi); font-weight: 600; }
.mt-hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.mt-ring { flex: 0 0 auto; width: clamp(120px, 16vw, 180px); height: auto; filter: drop-shadow(0 0 22px rgba(79,163,157,.22)); }

.mt-intro p { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: var(--text-dim); }
.mt-intro p:last-child { margin: 0; }
.mt-intro b, .mt-lead b { color: var(--silver-hi); font-weight: 600; }
.mt-lead { margin: -6px 0 16px; }

/* Classificações */
.mt-class {
  --c: var(--teal-hi); position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 18px 18px; clip-path: var(--cut);
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 60%), linear-gradient(160deg, #131519, #0B0C0F); background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 60%), linear-gradient(160deg, light-dark(#ffffff, #131519), light-dark(#f5f6f8, #0B0C0F));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent);
}
.mt-class.is-warn { --c: var(--gold); }
.mt-class.is-bad { --c: var(--danger); }
.mt-class-bar { position: absolute; left: 0; top: 0; right: 0; height: 2px; background: var(--c); box-shadow: 0 0 12px var(--c); }
.mt-class > b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 34px; line-height: 1; color: var(--silver-hi); }
.mt-class p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }
.mt-class strong { color: var(--c); }
.mt-req { margin-top: 12px; }

/* Fatores */
.mt-factors { display: flex; flex-direction: column; gap: 8px; }
.mt-factor { display: flex; align-items: flex-start; gap: 14px; padding: 16px; background: var(--bg1); box-shadow: inset 0 0 0 1px var(--border); }
.mt-factor > div { flex: 1; min-width: 0; }
.mt-factor .pg-muted { margin: 0; font-size: 13.5px; }
.mt-impact {
  --c: var(--success); flex: 0 0 auto; padding: 5px 10px; white-space: nowrap;
  font-family: 'Rajdhani', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .5px; color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
}
.mt-impact.is-neg { --c: var(--gold); }
.mt-impact.is-crit { --c: var(--danger); }

.mt-card-t { margin-top: 12px; }
.pg-card .pg-muted { margin: 0; font-size: 13.5px; }

/* Dúvidas */
.mt-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.mt-faq details { background: var(--bg1); box-shadow: inset 0 0 0 1px var(--border); }
.mt-faq details[open] { box-shadow: inset 0 0 0 1px rgba(79,163,157,.35); }
.mt-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; cursor: pointer; list-style: none;
  font-family: 'Rajdhani', sans-serif; font-size: 15.5px; font-weight: 700; color: var(--silver-hi); }
.mt-faq summary::-webkit-details-marker { display: none; }
.mt-faq summary .ico { flex: 0 0 auto; color: var(--teal-hi); transition: transform .2s; }
.mt-faq details[open] summary .ico { transform: rotate(45deg); }
.mt-faq p { margin: 0; padding: 0 16px 16px; font-size: 14px; line-height: 1.6; color: var(--text-dim); }

/* Chamada final */
.mt-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(22px, 4vw, 36px); clip-path: var(--cut);
  background: radial-gradient(60% 140% at 0% 0%, rgba(79,163,157,.18), transparent 60%), linear-gradient(160deg, #141619, #0B0C0F); background: radial-gradient(60% 140% at 0% 0%, rgba(79,163,157,.18), transparent 60%), linear-gradient(160deg, light-dark(#ffffff, #141619), light-dark(#f5f6f8, #0B0C0F));
  box-shadow: inset 0 0 0 1px rgba(79,163,157,.28);
}
.mt-cta h2 { margin: 0 0 6px; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(30px, 4vw, 44px); line-height: 1; color: var(--silver-hi); }
.mt-cta .pg-muted { margin: 0; }

@media (max-width: 640px) {
  .mt-ring { display: none; }
  .mt-factor { flex-wrap: wrap; }
  .mt-impact { margin-left: 56px; }
  .mt-faq { grid-template-columns: 1fr; }
  .mt-cta { flex-direction: column; align-items: stretch; }
}

/* ═══════════════ MEU MASK TRUST (/profile/masktrust) ═══════════════ */
.mtp-back { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 18px; text-decoration: none;
  font-family: 'Rajdhani', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim); }
.mtp-back .ico { transform: scaleX(-1); }
.mtp-back:hover { color: var(--teal-hi); }
.mtp-hero { display: flex; align-items: center; gap: clamp(20px, 4vw, 40px); }
.mtp-ring { position: relative; flex: 0 0 auto; width: 150px; height: 150px; display: grid; place-items: center; }
.mtp-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mtp-ring circle { transition: stroke-dashoffset 1.4s cubic-bezier(.16,1,.3,1), stroke .5s; }
.mtp-ring b { position: relative; margin-top: -10px; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 48px; line-height: 1; color: var(--silver-hi); }
.mtp-ring > span { position: absolute; top: 60%; font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text-mute); }
.mtp-ring.is-sm { width: 78px; height: 78px; }
.mtp-ring.is-sm b { margin: 0; font-size: 26px; }
.mtp-hero-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.mtp-name { margin: 0; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(34px, 5vw, 54px); line-height: 1; color: var(--silver-hi); overflow-wrap: anywhere; }
.mtp-hero-info .pg-muted { margin: 0; }
.mtp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mtp-lead { margin: -6px 0 14px; }
.mtp-sublabel { margin: 18px 0 10px; }

.mtp-status { --c: var(--teal); display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; font-size: 13.5px; color: var(--text);
  background: color-mix(in srgb, var(--c) 8%, transparent); box-shadow: inset 3px 0 0 var(--c); }
.mtp-status[hidden] { display: none; }
.mtp-status .ico { flex: 0 0 auto; margin-top: 1px; color: var(--c); }
.mtp-status.is-ok { --c: var(--success); }
.mtp-status.is-err { --c: var(--danger); }
.mtp-status.is-loading .ico { animation: mtp-spin 1s linear infinite; }
@keyframes mtp-spin { to { transform: rotate(360deg); } }

.mtp-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mtp-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--bg1); box-shadow: inset 0 0 0 1px var(--border); }
.mtp-row .pg-ico { width: 36px; height: 36px; }
.mtp-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mtp-row strong { font-family: 'Rajdhani', sans-serif; font-size: 15px; color: var(--silver-hi); }
.mtp-row small { font-size: 12.5px; color: var(--text-dim); }
.mtp-val { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 24px; color: var(--text-dim); }
.mtp-val.is-pos { color: var(--success); }
.mtp-val.is-neg { color: var(--gold); }
.mtp-val.is-crit { color: var(--danger); }

.mtp-flags { display: flex; flex-direction: column; gap: 6px; }
.mtp-flag { --c: var(--gold); display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; font-size: 13.5px; color: var(--text);
  background: color-mix(in srgb, var(--c) 7%, transparent); box-shadow: inset 3px 0 0 var(--c); }
.mtp-flag .ico { flex: 0 0 auto; margin-top: 1px; color: var(--c); }
.mtp-flag.is-crit { --c: var(--danger); }

.mtp-data { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; background: var(--border); box-shadow: 0 0 0 1px var(--border); }
.mtp-data > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: #0E0F12; background: light-dark(#f8f9fa, #0E0F12); }
.mtp-data span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.mtp-data span .ico { color: var(--teal-hi); }
.mtp-data b { font-family: 'Rajdhani', sans-serif; font-size: 15px; color: var(--silver-hi); text-align: right; }

.mtp-anomaly { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }
.mtp-anomaly .pg-muted { margin: 0; }
.mtp-anomaly[hidden] { display: none; }
.mtp-demo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--border); box-shadow: 0 0 0 1px var(--border); }
.mtp-demo-grid:empty { display: none; }
.mtp-demo-grid > div { display: flex; flex-direction: column; gap: 3px; padding: 12px; background: #0E0F12; background: light-dark(#f8f9fa, #0E0F12); }
.mtp-demo-grid b { font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 26px; line-height: 1; color: var(--silver-hi); }
.mtp-demo-grid small { font-size: 11.5px; color: var(--text-mute); }
.mtp-gauges { display: flex; flex-direction: column; gap: 10px; }
.mtp-gauge { display: grid; grid-template-columns: 150px 1fr 56px; align-items: center; gap: 12px; font-size: 13px; color: var(--text-dim); }
.mtp-gauge i { height: 6px; background: rgba(194,200,208,.07); background: light-dark(rgba(14,20,28,.074), rgba(194,200,208,.07)); }
.mtp-gauge em { display: block; height: 100%; transition: width 1s cubic-bezier(.16,1,.3,1); }
.mtp-gauge b { font-family: 'Rajdhani', sans-serif; color: var(--silver-hi); text-align: right; }
.pg-card .mtp-mh-text { margin: 0 0 16px; }
.mtp-mh-text b { color: var(--silver-hi); }
.mtp-mh-text a { display: inline-flex; align-items: center; gap: 4px; color: var(--teal-hi); }

@media (max-width: 800px) {
  .mtp-demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .mtp-hero { flex-direction: column; align-items: flex-start; }
  .mtp-ring { width: 120px; height: 120px; }
  .mtp-rows { grid-template-columns: 1fr; }
  .mtp-gauge { grid-template-columns: 110px 1fr 48px; }
}