/*
 * Minigame - Defesa das Vilas
 * Extraido de app/Pages/minigame.php para separar estilo de markup.
 * Todo seletor vive sob #nto-minigame (escopo isolado do resto do site).
 */
#nto-minigame .mg-target-plate {
  display: none;
  justify-content: center;
}
#nto-minigame .mg-target-plate:not(.hidden) {
  display: flex;
}
#nto-minigame .mg-target-card {
  padding: 0.45rem 0.7rem 0.5rem;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.65rem;
  background: linear-gradient(180deg, rgba(12,12,16,0.82), rgba(8,8,10,0.72));
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  width: min(100%, 22rem);
}
#nto-minigame .mg-target-card.is-duel {
  border-color: rgba(248,113,113,0.35);
  background: linear-gradient(180deg, rgba(28,12,14,0.88), rgba(10,8,10,0.78));
  width: min(100%, 16.5rem);
}
#nto-minigame .mg-target-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
#nto-minigame .mg-target-tag {
  flex-shrink: 0;
  padding: 0.12rem 0.4rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#nto-minigame .mg-target-card.is-duel .mg-target-tag {
  border-color: rgba(248,113,113,0.4);
  background: rgba(248,113,113,0.12);
  color: #fda4af;
}
#nto-minigame .mg-target-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
#nto-minigame .mg-target-hp {
  flex-shrink: 0;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.45);
}
#nto-minigame .mg-target-track {
  position: relative;
  margin-top: 0.35rem;
  height: 0.42rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}
#nto-minigame .mg-target-lag {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: rgba(251,191,36,0.35);
  transition: width 0.45s ease-out;
  z-index: 1;
}
#nto-minigame .mg-target-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #be123c, #fb7185 55%, #fecdd3);
  transition: width 0.18s ease-out;
  z-index: 2;
}
#nto-minigame .mg-target-card.is-duel .mg-target-fill {
  background: linear-gradient(90deg, #9f1239, #f43f5e 50%, #fb7185);
}
#nto-minigame .mg-target-atk {
  margin-top: 0.28rem;
  min-height: 0.85rem;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(253,186,116,0.9);
}
#nto-minigame .mg-panel {
  animation: mgPanelIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes mgPanelIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
#nto-minigame .mg-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: rgba(255,255,255,0.32);
  font-size: 11px;
  font-weight: 700;
}
#nto-minigame .mg-step-label {
  display: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (min-width: 640px) {
  #nto-minigame .mg-step-label { display: inline; }
}
#nto-minigame .mg-step.is-active {
  border-color: rgba(220, 38, 38, 0.65);
  background: rgba(220, 38, 38, 0.16);
  color: #fff;
}
#nto-minigame .mg-step.is-done {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
}
#nto-minigame .mg-step-line {
  width: 1.25rem;
  height: 1px;
  background: rgba(255,255,255,0.12);
}
#nto-minigame .mg-step-line.is-done { background: rgba(255,255,255,0.28); }
#nto-minigame .mg-arena-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.55rem;
  background: #101114;
  text-align: left;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
#nto-minigame .mg-arena-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--arena-accent, #dc2626);
  opacity: 0.85;
  z-index: 3;
  pointer-events: none;
}
#nto-minigame .mg-arena-card:hover {
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}
#nto-minigame .mg-arena-card:focus-visible {
  outline: 2px solid rgba(220, 38, 38, 0.7);
  outline-offset: 2px;
}
#nto-minigame .mg-arena-card.is-locked {
  cursor: not-allowed;
}
#nto-minigame .mg-arena-card-media {
  position: relative;
  height: 9.5rem;
  overflow: hidden;
  background: #111;
  flex-shrink: 0;
}
@media (min-width: 640px) {
  #nto-minigame .mg-arena-card-media {
    height: 11.5rem;
  }
}
@media (min-width: 1024px) {
  #nto-minigame .mg-arena-card-media {
    height: 12.5rem;
  }
}
#nto-minigame .mg-arena-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  image-rendering: pixelated;
  transition: transform 0.45s ease;
}
#nto-minigame .mg-arena-card:hover .mg-arena-card-img {
  transform: scale(1.05);
}
#nto-minigame .mg-arena-card-badge {
  position: absolute;
  left: 0.7rem;
  top: 0.7rem;
  z-index: 2;
  border-radius: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(0, 0, 0, 0.88);
  padding: 0.28rem 0.55rem;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
#nto-minigame .mg-arena-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.9rem 1rem 1.05rem;
  background: linear-gradient(180deg, #14151a 0%, #101114 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#nto-minigame .mg-arena-card-name {
  margin: 0;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
}
#nto-minigame .mg-arena-card-sub {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--arena-accent, rgba(255, 255, 255, 0.45));
  opacity: 0.9;
}
#nto-minigame .mg-arena-card-mobs {
  margin: 0.2rem 0 0;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.5);
}
#nto-minigame .mg-arena-card-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.15rem;
}
#nto-minigame .mg-arena-card-meta {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.38);
}
#nto-minigame .mg-arena-card-meta.is-locked {
  color: rgba(253, 164, 175, 0.85);
}
#nto-minigame .mg-arena-card-go {
  flex: 0 0 auto;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.15s;
}
#nto-minigame .mg-arena-card:hover .mg-arena-card-go {
  color: #fff;
}
#nto-minigame .mg-char-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  align-content: start;
}
@media (min-width: 640px) {
  #nto-minigame .mg-char-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {
  #nto-minigame .mg-char-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
#nto-minigame .mg-char-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(18,18,22,0.95), rgba(8,8,10,0.98));
  text-align: left;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
#nto-minigame .mg-char-card:hover {
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
#nto-minigame .mg-char-card.is-selected {
  border-color: rgba(220, 38, 38, 0.7);
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.35), 0 12px 28px rgba(220, 38, 38, 0.12);
}
#nto-minigame .mg-char-card .mg-char-art {
  position: relative;
  display: grid;
  place-items: center;
  height: 7.5rem;
  overflow: hidden;
  background: #09090b;
  padding: 0.45rem;
  box-sizing: border-box;
}
#nto-minigame .mg-char-card .mg-char-art img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  image-rendering: auto;
}
#nto-minigame .mg-char-card .mg-char-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.65rem 0.7rem 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
#nto-minigame .mg-char-card .mg-char-rank {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  z-index: 2;
  padding: 0.18rem 0.4rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.65);
  color: rgba(255,255,255,0.75);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#nto-minigame .mg-char-card .mg-char-lv {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 2;
  padding: 0.18rem 0.4rem;
  background: rgba(0,0,0,0.65);
  border: 1px solid rgba(251,191,36,0.25);
  color: #fbbf24;
  font-size: 9px;
  font-weight: 800;
}
#nto-minigame .mg-loadout {
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(14,14,18,0.98), rgba(8,8,10,0.98));
}
#nto-minigame .mg-loadout-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 11rem;
  overflow: hidden;
  background: #09090b;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0.85rem;
  box-sizing: border-box;
}
#nto-minigame .mg-loadout-hero img {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 10rem;
  object-fit: contain;
  object-position: center center;
  image-rendering: auto;
}
#nto-minigame .mg-loadout-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.9rem 1rem 1rem;
}
#nto-minigame .mg-loadout-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}
#nto-minigame .mg-loadout-stats > div {
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.28);
  padding: 0.45rem 0.35rem;
  text-align: center;
}
#nto-minigame .mg-loadout-skill {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.28);
  padding: 0.55rem 0.65rem;
}
#nto-minigame .mg-loadout-skill.is-locked {
  opacity: 0.42;
}
#nto-minigame .mg-loadout-skill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--skill-color, #94a3b8) 65%, #fff 8%);
  background:
    radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--skill-color, #94a3b8) 45%, transparent), transparent 58%),
    rgba(8,10,14,0.95);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
#nto-minigame .mg-hud-glass {
  background: rgba(8, 8, 10, 0.72);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}
#nto-minigame .mg-hud-leftcol {
  max-width: min(46vw, 14rem);
}
/* Topo: player esq ? stats centro ? utils dir ? mesma altura do topmenu (top-2 / sm:top-3) */
#nto-minigame .mg-hud-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem 0.55rem;
  padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
  z-index: 23;
}
@media (min-width: 640px) {
  #nto-minigame .mg-hud-top {
    padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
  }
}
#nto-minigame .mg-hud-top > .mg-hud-leftcol {
  position: relative;
  z-index: 2;
}
#nto-minigame .mg-hud-top > .mg-hud-top-utils {
  position: relative;
  z-index: 2;
  /* alinha o pill ?online? com o topo do card do player / menu */
  padding-top: 0.15rem;
}
/* Stats pill ? onda / score / kills (gold fica no card do player) */
#nto-minigame .mg-hud-stats {
  position: absolute;
  left: 50%;
  top: calc(0.5rem + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  min-height: 2.35rem;
  justify-content: center;
  pointer-events: none;
}
@media (min-width: 640px) {
  #nto-minigame .mg-hud-stats {
    top: calc(0.75rem + env(safe-area-inset-top, 0px));
  }
}
#nto-minigame .mg-hud-stats-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
#nto-minigame .mg-hud-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 2.1rem;
  padding: 0 0.1rem;
  text-align: center;
  line-height: 1.05;
}
#nto-minigame .mg-hud-stat-label {
  margin: 0;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
#nto-minigame.is-mode-hunt .mg-hud-stat-label {
  color: rgba(251, 191, 36, 0.72);
}
#nto-minigame.is-mode-hunt [data-mg-wave] {
  color: #fde68a;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
}
#nto-minigame.is-mode-hunt .mg-hud-stats {
  border-color: rgba(251, 191, 36, 0.2);
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(251, 191, 36, 0.07);
}
#nto-minigame .mg-hud-stat-val {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1.1;
}
#nto-minigame .mg-hud-stat-val.is-score {
  color: var(--brand-500, #c9a227);
}
#nto-minigame .mg-hud-stat-unit {
  margin-left: 0.05rem;
  font-size: 8px;
  font-weight: 650;
  opacity: 0.65;
}
#nto-minigame .mg-hud-stat-sep {
  width: 1px;
  height: 1.15rem;
  background: rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
#nto-minigame .mg-hud-stats:has(.mg-hud-train-prog:not(.hidden)) {
  border-radius: 1rem;
  padding: 0.35rem 0.6rem 0.4rem;
}
#nto-minigame .mg-hud-top-utils {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.4rem;
}
#nto-minigame .mg-hud-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.7);
  transition: background 0.15s ease, color 0.15s ease;
}
#nto-minigame .mg-hud-iconbtn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
#nto-minigame .mg-online-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 2.35rem;
  padding: 0 0.7rem;
  border-radius: 999px;
}
#nto-minigame .mg-online-label {
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
}
#nto-minigame .mg-party-hud {
  margin-top: 0.35rem;
}
#nto-minigame .mg-coop-down {
  pointer-events: none;
}
#nto-minigame .mg-coop-down-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.7rem 1rem 0.85rem;
  border-radius: 14px;
  background: rgba(8, 8, 10, 0.72);
  border: 1px solid rgba(248, 113, 113, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  text-align: center;
}
#nto-minigame .mg-coop-down-kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fca5a5;
}
#nto-minigame .mg-coop-down-sub {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
}
#nto-minigame .mg-coop-down-btn {
  margin-top: 0.2rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
}
#nto-minigame .mg-coop-down-btn:hover {
  color: #fff;
  background: rgba(248, 113, 113, 0.18);
  border-color: rgba(248, 113, 113, 0.35);
}
#nto-minigame .mg-party-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  max-width: 100%;
  padding: 0.28rem 0.35rem 0.28rem 0.5rem;
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.62);
  border: 1px solid rgba(52, 211, 153, 0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
#nto-minigame .mg-party-chip.is-away {
  opacity: 0.72;
}
#nto-minigame .mg-party-chip-away {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fcd34d;
  margin-left: 0.15rem;
}
#nto-minigame .mg-party-strip-tag {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6ee7b7;
}
#nto-minigame .mg-party-strip-list {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  overflow: hidden;
}
#nto-minigame .mg-party-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
  max-width: 6.5rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.88);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
}
#nto-minigame .mg-party-chip.is-host {
  color: #a7f3d0;
}
#nto-minigame .mg-party-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nto-minigame .mg-party-chip-crown {
  flex-shrink: 0;
  font-size: 9px;
  opacity: 0.85;
}
#nto-minigame .mg-party-kick {
  flex-shrink: 0;
  margin-left: 0.05rem;
  width: 0.95rem;
  height: 0.95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
#nto-minigame .mg-party-kick:hover {
  color: #fda4af;
  background: rgba(244, 63, 94, 0.15);
}
#nto-minigame .mg-party-strip-mode {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-party-strip-leave {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
#nto-minigame .mg-party-strip-leave:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}
/* Player plate ? identidade + carteira em camadas */
#nto-minigame .mg-hud-player {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
  max-width: min(52vw, 15.5rem);
  padding: 0.4rem 0.55rem 0.42rem 0.38rem;
  border-radius: 0.9rem;
  background:
    linear-gradient(105deg, rgba(8, 28, 42, 0.55) 0%, rgba(6, 6, 8, 0.62) 42%, rgba(6, 6, 8, 0.55) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
}
#nto-minigame .mg-hud-player.is-vip {
  border-color: rgba(56, 189, 248, 0.28);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(34, 211, 238, 0.08),
    inset 0 0 20px rgba(14, 116, 144, 0.08);
}
#nto-minigame .mg-hud-player-face {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 0.6rem;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
#nto-minigame .mg-hud-player.is-vip .mg-hud-player-face {
  border-color: rgba(103, 232, 249, 0.35);
  box-shadow: 0 0 10px rgba(34, 211, 238, 0.2);
}
#nto-minigame .mg-hud-avatar {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}
#nto-minigame .mg-hud-lv {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.1rem 0;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.86));
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}
#nto-minigame .mg-hud-player-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.26rem;
  justify-content: center;
}
#nto-minigame .mg-hud-player-top {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
}
#nto-minigame .mg-hud-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
}
#nto-minigame .mg-hud-name-row {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  flex: 1;
}
#nto-minigame .mg-hud-rank-icon {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.75));
}
#nto-minigame .mg-hud-name {
  margin: 0;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.01em;
  color: #fff;
  line-height: 1.15;
}
#nto-minigame .mg-hud-tags {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  flex-shrink: 0;
}
#nto-minigame .mg-hud-wallet {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding-top: 0.02rem;
}
#nto-minigame .mg-hud-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
#nto-minigame .mg-hud-gold,
#nto-minigame .mg-hud-arts {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  min-height: 1.05rem;
  padding: 0.12rem 0.32rem 0.12rem 0.28rem;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  border: 1px solid transparent;
}
#nto-minigame .mg-hud-gold {
  color: rgba(252, 211, 77, 0.98);
  background: rgba(120, 80, 8, 0.22);
  border-color: rgba(252, 211, 77, 0.16);
}
#nto-minigame .mg-hud-gold b {
  font-weight: 800;
}
#nto-minigame .mg-gold-coin {
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff8d6 0%, #fde68a 28%, #f59e0b 62%, #b45309 100%);
  box-shadow:
    0 0 0 1px rgba(180, 83, 9, 0.55),
    0 0 6px rgba(251, 191, 36, 0.35),
    inset 0 0 2px rgba(255, 255, 255, 0.7),
    inset 0 -1px 2px rgba(146, 64, 14, 0.35);
  position: relative;
}
#nto-minigame .mg-gold-coin::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  border: 1px solid rgba(180, 83, 9, 0.35);
  box-shadow: inset 0 0 1px rgba(255, 248, 214, 0.55);
}
#nto-minigame .mg-hud-vip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(125, 211, 252, 0.95);
  line-height: 1;
}
#nto-minigame .mg-hud-vip i {
  font-style: normal;
  font-weight: 800;
  color: rgba(125, 211, 252, 0.45);
}
#nto-minigame .mg-hud-vip b {
  font-weight: 800;
}
#nto-minigame .mg-hud-arts {
  color: rgba(186, 230, 253, 0.98);
  background: rgba(8, 47, 73, 0.42);
  border-color: rgba(56, 189, 248, 0.22);
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}
#nto-minigame .mg-hud-arts b {
  font-weight: 800;
}
#nto-minigame .mg-arts-gem {
  display: inline-block;
  width: 0.58rem;
  height: 0.58rem;
  flex: 0 0 auto;
  border-radius: 0.1rem;
  transform: rotate(45deg);
  background:
    linear-gradient(135deg, rgba(224, 242, 254, 0.98) 0%, rgba(56, 189, 248, 0.95) 42%, rgba(14, 116, 144, 0.95) 100%);
  box-shadow:
    0 0 0 1px rgba(125, 211, 252, 0.4),
    0 0 7px rgba(34, 211, 238, 0.4),
    inset 0 0 2px rgba(255, 255, 255, 0.75);
}
#nto-minigame .mg-hud-vip-badge {
  display: inline-flex;
  align-items: center;
  max-width: 4.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(8, 47, 73, 0.96);
  background: linear-gradient(90deg, #bae6fd, #22d3ee, #38bdf8, #67e8f9, #bae6fd);
  background-size: 220% 100%;
  animation: mg-vip-shimmer 2.4s linear infinite;
  border: 1px solid rgba(165, 243, 252, 0.5);
  border-radius: 999px;
  padding: 0.14rem 0.34rem;
  line-height: 1.1;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.28);
  cursor: pointer;
}
#nto-minigame .mg-hud-vip-badge:hover,
#nto-minigame .mg-hud-vip-badge:focus-visible {
  filter: brightness(1.08);
  outline: none;
}
#nto-minigame .mg-hud-vip-badge:not(.is-active) {
  color: rgba(186, 230, 253, 0.9);
  background: rgba(8, 47, 73, 0.55);
  border-color: rgba(56, 189, 248, 0.28);
  animation: none;
  box-shadow: none;
}
#nto-minigame .mg-hud-rank {
  display: none !important;
}
#nto-minigame .mg-hud-player.is-vip .mg-hud-rank {
  display: none !important;
}
#nto-minigame .mg-hud-name.is-vip-title {
  color: #e0f2fe;
  text-shadow: 0 0 10px rgba(34, 211, 238, 0.28);
}
@keyframes mg-vip-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}
#nto-minigame .mg-sheet-gold.is-arts span,
#nto-minigame .mg-sheet-gold.is-arts strong,
#nto-minigame .mg-store-price.is-arts {
  color: rgba(125, 211, 252, 0.95);
}
#nto-minigame .mg-sheet-coin-bal {
  display: inline-flex;
  align-items: center;
  min-height: 1.7rem;
  padding: 0.28rem 0.55rem 0.28rem 0.45rem;
  font-size: 12px;
  gap: 0.32rem;
}
#nto-minigame .mg-sheet-coin-bal .mg-arts-gem,
#nto-minigame .mg-sheet-coin-bal .mg-gold-coin {
  width: 0.72rem;
  height: 0.72rem;
}
#nto-minigame .mg-arts-vip-status {
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.7rem;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(56, 189, 248, 0.18);
  background: linear-gradient(90deg, rgba(8, 47, 73, 0.35), transparent);
}
#nto-minigame .mg-arts-vip-status.is-on {
  color: rgba(165, 243, 252, 0.95);
  border-color: rgba(34, 211, 238, 0.35);
}
#nto-minigame .mg-arts-plan-icon {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(165, 243, 252, 0.35), rgba(8, 47, 73, 0.55));
}
#nto-minigame .mg-arts-plan-icon .mg-arts-gem {
  width: 0.9rem;
  height: 0.9rem;
}
#nto-minigame .mg-topmenu-btn-arts .mg-arts-gem {
  width: 0.55rem;
  height: 0.55rem;
}
#nto-minigame .mg-topmenu-btn-arts {
  color: rgba(165, 243, 252, 0.92);
}
#nto-minigame .mg-arts-panel {
  background:
    radial-gradient(ellipse at top left, rgba(8, 47, 73, 0.55), transparent 46%),
    #0c0c0e;
}
#nto-minigame .mg-arts-pix {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.72);
}
#nto-minigame .mg-arts-pix.hidden,
#nto-minigame .mg-arts-pix[hidden] {
  display: none !important;
}
#nto-minigame .mg-arts-pix-card {
  width: min(100%, 22rem);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem 1.05rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(56, 189, 248, 0.28);
  background: linear-gradient(180deg, rgba(8, 28, 42, 0.96), rgba(12, 12, 14, 0.98));
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}
#nto-minigame .mg-arts-pix-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #e0f2fe;
}
#nto-minigame .mg-arts-pix-info,
#nto-minigame .mg-arts-pix-timer,
#nto-minigame .mg-arts-pix-status {
  margin: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}
#nto-minigame .mg-arts-pix-qr {
  width: 11.5rem;
  height: 11.5rem;
  margin: 0.2rem auto;
  border-radius: 0.5rem;
  background: #fff;
  object-fit: contain;
}
#nto-minigame .mg-arts-pix-copy-row {
  display: flex;
  gap: 0.4rem;
}
#nto-minigame .mg-arts-pix-code {
  flex: 1;
  min-width: 0;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 10px;
  padding: 0.45rem 0.5rem;
}
#nto-minigame .mg-hud-combat {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}
#nto-minigame .mg-hud-bar-line {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
#nto-minigame .mg-hud-bar-line.is-xp .mg-hud-track {
  opacity: 0.9;
}
#nto-minigame .mg-hud-track {
  flex: 1;
  min-width: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
#nto-minigame .mg-hud-track.is-hp { height: 0.38rem; }
#nto-minigame .mg-hud-track.is-chk { height: 0.3rem; }
#nto-minigame .mg-hud-track.is-sub { height: 0.2rem; }
#nto-minigame .mg-hud-bar-val {
  flex-shrink: 0;
  min-width: 2.35rem;
  text-align: right;
  font-size: 8px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.55);
  line-height: 1;
}
#nto-minigame .mg-hud-bar-val.is-chk {
  color: rgba(125, 211, 252, 0.75);
}
#nto-minigame .mg-buff-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.12rem 0.4rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  white-space: nowrap;
}
#nto-minigame .mg-buff-chip.is-food { border-color: rgba(134,239,172,0.28); color: #86efac; background: rgba(34,197,94,0.1); }
#nto-minigame .mg-buff-chip.is-boost { border-color: rgba(251,191,36,0.3); color: #fbbf24; background: rgba(245,158,11,0.1); }
#nto-minigame .mg-buff-chip.is-sprint { border-color: rgba(56,189,248,0.3); color: #7dd3fc; background: rgba(14,165,233,0.1); }
#nto-minigame .mg-buff-chip b { font-variant-numeric: tabular-nums; font-weight: 800; color: #fff; }
#nto-minigame .mg-hud-player .mg-buffs {
  max-width: 100%;
}
/* Minimap (render.js): topClear + R + label ? painel hunt fica abaixo, sem overlap */
#nto-minigame {
  --mg-radar-top: 52px;
  --mg-radar-r: 68px;
  --mg-radar-margin: 12px;
}
#nto-minigame.is-compact-mobile,
#nto-minigame.is-mobile-playing {
  --mg-radar-top: 48px;
  --mg-radar-r: 42px;
  --mg-radar-margin: 10px;
}
#nto-minigame .mg-hunt-panel {
  position: absolute;
  z-index: 25;
  right: calc(var(--mg-radar-margin) + 2px);
  top: calc(var(--mg-radar-top) + env(safe-area-inset-top) + (var(--mg-radar-r) * 2) + 18px);
  width: min(11.5rem, 42vw);
  max-width: 11.5rem;
}
#nto-minigame .mg-hunt-panel.is-on {
  display: block;
}
#nto-minigame .mg-hunt-card {
  background: rgba(6, 8, 12, 0.88);
  border: 1px solid rgba(251, 191, 36, 0.22);
  border-radius: 0.75rem;
  padding: 0.55rem 0.65rem 0.6rem;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 18px rgba(251, 191, 36, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#nto-minigame .mg-hunt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
#nto-minigame .mg-hunt-title {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fcd34d;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
}
#nto-minigame .mg-hunt-stop {
  border: 0;
  border-radius: 0.4rem;
  padding: 0.28rem 0.55rem;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
  box-shadow: 0 2px 8px rgba(225, 29, 72, 0.35);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.12s ease;
}
#nto-minigame .mg-hunt-stop:hover {
  filter: brightness(1.08);
}
#nto-minigame .mg-hunt-stop:active {
  transform: scale(0.96);
}
#nto-minigame .mg-hunt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.28rem 0.55rem;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-hunt-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  min-width: 0;
}
#nto-minigame .mg-hunt-row-wide {
  grid-column: 1 / -1;
  padding-top: 0.28rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#nto-minigame .mg-hunt-row-wide:first-of-type {
  margin-top: 0.12rem;
}
#nto-minigame .mg-hunt-k {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.58);
}
#nto-minigame .mg-hunt-v {
  font-weight: 800;
  color: #f8fafc;
  text-align: right;
  line-height: 1.15;
}
#nto-minigame .mg-hunt-v.is-gold { color: #fde68a; }
#nto-minigame .mg-hunt-v.is-sky { color: #7dd3fc; }
#nto-minigame .mg-hunt-v.is-rose { color: #fda4af; }
#nto-minigame .mg-hunt-v.is-profit { color: #6ee7b7; }
#nto-minigame .mg-hunt-v.is-dim { color: rgba(255, 255, 255, 0.88); font-weight: 700; }
#nto-minigame.is-focus-mode .mg-hunt-panel {
  opacity: 0.92;
}
#nto-minigame .mg-online-pill {
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
#nto-minigame .mg-online-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  animation: mg-online-pulse 1.6s ease-out infinite;
}
@keyframes mg-online-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
#nto-minigame .mg-ping.is-good .tabular-nums,
#nto-minigame .mg-ping.is-good [data-mg-ping] {
  color: #4ade80;
}
#nto-minigame .mg-ping.is-ok .tabular-nums,
#nto-minigame .mg-ping.is-ok [data-mg-ping] {
  color: #fbbf24;
}
#nto-minigame .mg-ping.is-bad .tabular-nums,
#nto-minigame .mg-ping.is-bad [data-mg-ping] {
  color: #fb7185;
}
#nto-minigame .mg-chat-fab {
  display: inline-flex;
  left: 0.75rem;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 1rem;
  color: rgba(255,255,255,0.82);
  transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
#nto-minigame .mg-chat-fab:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}
#nto-minigame .mg-chat-fab:active {
  transform: scale(0.94);
}
#nto-minigame .mg-chat-fab.hidden {
  display: none !important;
}
#nto-minigame .mg-chat-badge {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: #38bdf8;
  color: #041018;
  font-size: 9px;
  font-weight: 800;
  line-height: 1rem;
  text-align: center;
}

/* Chat / Friends full-screen sheets */
#nto-minigame .mg-chat-sheet-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#nto-minigame .mg-chat-sheet-side {
  width: min(38%, 14rem);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.75rem 0.65rem;
  border-right: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.22);
}
#nto-minigame .mg-chat-sheet-side.hidden {
  display: none !important;
}
#nto-minigame .mg-chat-sheet-main {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#nto-minigame [data-mg-chat] .mg-chat-threads {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
#nto-minigame [data-mg-chat] .mg-chat-thread {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  text-align: left;
  border: 0;
  padding: 0.55rem 0.55rem;
  font-size: 12px;
  border-radius: 0.65rem;
  margin: 0;
  background: transparent;
  color: rgba(255,255,255,0.78);
  cursor: pointer;
}
#nto-minigame [data-mg-chat] .mg-chat-thread:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}
#nto-minigame [data-mg-chat] .mg-chat-thread.is-active {
  background: rgba(56,189,248,0.12);
  color: #fff;
}
#nto-minigame [data-mg-chat] .mg-chat-thread-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #7dd3fc;
  background: rgba(56,189,248,0.14);
  border: 1px solid rgba(56,189,248,0.2);
}
#nto-minigame [data-mg-chat] .mg-chat-thread-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
#nto-minigame [data-mg-chat] .mg-chat-thread-name {
  font-size: 12px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nto-minigame [data-mg-chat] .mg-chat-thread-preview {
  font-size: 10px;
  color: rgba(255,255,255,0.38);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nto-minigame [data-mg-chat] .mg-chat-thread-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.18);
}
#nto-minigame [data-mg-chat] .mg-chat-thread-dot.is-on {
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.45);
}
#nto-minigame [data-mg-chat] .mg-chat-log {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(56,189,248,0.04), transparent 55%),
    rgba(0,0,0,0.12);
}
#nto-minigame [data-mg-chat] .mg-chat-form {
  flex-shrink: 0;
  display: flex;
  gap: 0.45rem;
  padding: 0.75rem 1rem;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.28);
}
#nto-minigame [data-mg-chat] .mg-chat-input {
  flex: 1;
  min-width: 0;
  border-radius: 0.65rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  padding: 0.7rem 0.85rem;
  font-size: 14px;
  color: rgba(255,255,255,0.92);
  outline: none;
}
#nto-minigame [data-mg-chat] .mg-chat-input:focus {
  border-color: rgba(56,189,248,0.45);
  background: rgba(56,189,248,0.06);
}
#nto-minigame [data-mg-chat] .mg-chat-send {
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 0.65rem;
  background: rgba(56,189,248,0.2);
  color: #7dd3fc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#nto-minigame [data-mg-chat] .mg-chat-send:hover {
  background: rgba(56,189,248,0.32);
  color: #fff;
}
#nto-minigame [data-mg-chat] .mg-chat-whisper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-shrink: 0;
  margin: 0;
  padding: 0.65rem 1rem;
  border-bottom: 1px solid rgba(56,189,248,0.15);
  background: linear-gradient(90deg, rgba(56,189,248,0.1), rgba(56,189,248,0.03));
}
#nto-minigame [data-mg-chat] .mg-chat-whisper-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
#nto-minigame [data-mg-chat] .mg-chat-whisper-kicker {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(125,211,252,0.65);
}
#nto-minigame [data-mg-chat] .mg-chat-whisper-copy strong {
  font-size: 14px;
  font-weight: 800;
  color: #e0f2fe;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nto-minigame [data-mg-chat] .mg-chat-line.is-bubble {
  max-width: min(78%, 28rem);
  padding: 0.5rem 0.75rem 0.55rem;
  border-radius: 0.85rem 0.85rem 0.85rem 0.3rem;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.06);
  align-self: flex-start;
}
#nto-minigame [data-mg-chat] .mg-chat-line.is-mine {
  align-self: flex-end;
  border-radius: 0.85rem 0.85rem 0.3rem 0.85rem;
  background: rgba(56,189,248,0.16);
  border-color: rgba(56,189,248,0.18);
}
#nto-minigame [data-mg-chat] .mg-chat-line.is-private:not(.is-mine) {
  background: rgba(167,139,250,0.1);
  border-color: rgba(167,139,250,0.16);
}
#nto-minigame [data-mg-chat] .mg-chat-line.is-group {
  margin-top: -0.1rem;
}
#nto-minigame [data-mg-chat] .mg-chat-line.is-pending {
  opacity: 0.55;
}
#nto-minigame [data-mg-chat] .mg-chat-meta {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.42);
  margin-bottom: 0.18rem;
}
#nto-minigame [data-mg-chat] .mg-chat-line.is-mine .mg-chat-meta {
  color: rgba(125,211,252,0.7);
  text-align: right;
}
#nto-minigame [data-mg-chat] .mg-chat-text {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255,255,255,0.92);
  word-break: break-word;
}
#nto-minigame [data-mg-chat] .mg-chat-empty-state {
  margin: auto;
  text-align: center;
  padding: 2.5rem 1.25rem;
  max-width: 18rem;
}
#nto-minigame [data-mg-chat] .mg-chat-empty-state p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
}
#nto-minigame [data-mg-chat] .mg-chat-empty-state span {
  display: block;
  margin-top: 0.35rem;
  font-size: 11px;
  color: rgba(255,255,255,0.28);
}
#nto-minigame [data-mg-chat] .mg-chat-empty-state.is-side {
  padding: 1.25rem 0.5rem;
}
#nto-minigame .mg-chat-sheet-tabs .mg-rank-tab {
  min-width: 5.5rem;
}

/* Friends sheet */
#nto-minigame .mg-friends-add-bar {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.18);
}
#nto-minigame .mg-friends-add-input {
  flex: 1;
  min-width: 0;
  border-radius: 0.55rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  padding: 0.65rem 0.8rem;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  outline: none;
}
#nto-minigame .mg-friends-add-input:focus {
  border-color: rgba(56,189,248,0.45);
}
#nto-minigame .mg-friends-add-submit {
  flex-shrink: 0;
  min-height: 2.6rem;
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 0.55rem;
  background: rgba(56,189,248,0.22);
  color: #7dd3fc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
#nto-minigame .mg-friends-add-submit:hover {
  background: rgba(56,189,248,0.34);
  color: #fff;
}
#nto-minigame .mg-topmenu-badge {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.22rem;
  border-radius: 999px;
  background: #0ea5e9;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 1rem;
  text-align: center;
  pointer-events: none;
}
#nto-minigame .mg-topmenu-badge.hidden,
#nto-minigame .mg-topmenu-badge[hidden] {
  display: none !important;
}
#nto-minigame [data-mg-top-friends] {
  position: relative;
}
#nto-minigame .mg-friends-section {
  margin: 0.55rem 0 0.35rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
#nto-minigame .mg-friend-card.is-request {
  border-color: rgba(56, 189, 248, 0.28);
  background: rgba(14, 165, 233, 0.08);
}
#nto-minigame .mg-friend-dot.is-req {
  background: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}
#nto-minigame .mg-friends-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
#nto-minigame .mg-friends-empty-card {
  margin: 1.5rem auto;
  max-width: 22rem;
  text-align: center;
  padding: 1.5rem 1rem;
  border-radius: 0.85rem;
  border: 1px dashed rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.02);
}
#nto-minigame .mg-friends-empty-card p {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
}
#nto-minigame .mg-friends-empty-card span {
  display: block;
  margin-top: 0.4rem;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}
#nto-minigame .mg-friend-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
}
#nto-minigame .mg-friend-card-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
#nto-minigame .mg-friend-card .mg-friend-dot {
  width: 0.55rem;
  height: 0.55rem;
}
#nto-minigame .mg-friend-card-copy {
  min-width: 0;
}
#nto-minigame .mg-friend-card .mg-friend-name {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}
#nto-minigame .mg-friend-status {
  margin: 0.15rem 0 0;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}
#nto-minigame .mg-friend-status.is-on {
  color: #34d399;
}
#nto-minigame .mg-friend-card-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
#nto-minigame .mg-friend-btn {
  min-height: 2.1rem;
  padding: 0.35rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
#nto-minigame .mg-friend-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
#nto-minigame .mg-friend-btn:disabled {
  opacity: 0.28;
  cursor: default;
}
#nto-minigame .mg-friend-btn.is-sky {
  border-color: rgba(56,189,248,0.25);
  color: #7dd3fc;
}
#nto-minigame .mg-friend-btn.is-emerald {
  border-color: rgba(52,211,153,0.25);
  color: #6ee7b7;
}
#nto-minigame .mg-friend-btn.is-rose {
  border-color: rgba(251,113,133,0.25);
  color: #fda4af;
}
#nto-minigame .mg-friend-btn.is-ghost {
  border-color: transparent;
  color: rgba(255,255,255,0.35);
}
@media (max-width: 640px) {
  #nto-minigame .mg-chat-sheet-body {
    flex-direction: column;
  }
  #nto-minigame .mg-chat-sheet-side {
    width: 100%;
    max-height: 8.5rem;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  #nto-minigame .mg-friend-card-acts {
    width: 100%;
  }
  #nto-minigame .mg-friend-btn {
    flex: 1 1 auto;
  }
}

/* legacy HUD chat panel removed ? keep thread/friend dots usable */
#nto-minigame .mg-chat-thread,
#nto-minigame .mg-friend-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.72);
  font-weight: 600;
  cursor: pointer;
}
#nto-minigame .mg-chat-thread:hover,
#nto-minigame .mg-chat-thread.is-active {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
#nto-minigame .mg-chat-thread-dot,
#nto-minigame .mg-friend-dot {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 999px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.18);
}
#nto-minigame .mg-chat-thread-dot.is-on,
#nto-minigame .mg-friend-dot.is-on {
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.45);
}
#nto-minigame .mg-chat-thread-name,
#nto-minigame .mg-friend-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nto-minigame .mg-chat-whisper-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
#nto-minigame .mg-chat-whisper.hidden {
  display: none !important;
}
#nto-minigame .mg-chat-whisper strong {
  font-weight: 700;
  color: #e0f2fe;
}
#nto-minigame .mg-chat-whisper-clear,
#nto-minigame .mg-chat-whisper-friend {
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
}
#nto-minigame .mg-chat-whisper-friend.is-friend {
  color: #fbbf24;
}
#nto-minigame .mg-dead-screen {
  background:
    radial-gradient(ellipse 70% 50% at 50% 40%, rgba(127, 29, 29, 0.35), transparent 70%),
    rgba(6, 6, 8, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#nto-minigame .mg-dead-screen:not(.hidden) {
  display: flex !important;
  animation: mg-dead-in 0.45s ease-out both;
}
@keyframes mg-dead-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
#nto-minigame .mg-dead-card {
  padding: 1.75rem 1.25rem 1.35rem;
}
#nto-minigame .mg-dead-kicker {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(248, 113, 113, 0.55);
}
#nto-minigame .mg-dead-title {
  margin: 0.55rem 0 0;
  font-family: inherit;
  font-size: clamp(2.1rem, 8vw, 3.1rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.05;
  color: #fecaca;
  text-shadow: 0 0 40px rgba(185, 28, 28, 0.45);
  animation: mg-dead-title 0.7s ease-out both;
}
@keyframes mg-dead-title {
  from { opacity: 0; transform: scale(1.08); letter-spacing: 0.18em; }
  to { opacity: 1; transform: scale(1); letter-spacing: 0.04em; }
}
#nto-minigame .mg-dead-screen.is-victory .mg-dead-kicker {
  color: rgba(52, 211, 153, 0.55);
}
#nto-minigame .mg-dead-screen.is-victory .mg-dead-title {
  color: #a7f3d0;
  text-shadow: 0 0 40px rgba(16, 185, 129, 0.35);
}
#nto-minigame .mg-dead-rank {
  margin: 0.45rem 0 0;
  min-height: 1rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
#nto-minigame .mg-dead-scoreline {
  margin: 1.35rem 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
#nto-minigame .mg-dead-score-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
}
#nto-minigame .mg-dead-score {
  font-family: inherit;
  font-size: 2rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.92);
}
#nto-minigame .mg-dead-loot {
  margin: 0.35rem 0 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(251, 191, 36, 0.75);
}
#nto-minigame .mg-dead-screen.is-hunt .mg-dead-card {
  max-width: 22rem;
}
#nto-minigame .mg-dead-screen.is-hunt .mg-dead-scoreline {
  display: none;
}
#nto-minigame .mg-hunt-report {
  margin-top: 0.85rem;
  padding: 0.7rem 0.75rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.035);
}
#nto-minigame .mg-hunt-report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.65rem;
}
#nto-minigame .mg-hunt-report-grid > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 10px;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
#nto-minigame .mg-hunt-report-grid b {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,0.88);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}
#nto-minigame .mg-hunt-report-block {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
#nto-minigame .mg-hunt-report-label {
  margin: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
#nto-minigame .mg-hunt-report-text {
  margin: 0.2rem 0 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255,255,255,0.82);
}
#nto-minigame .mg-hunt-report-note {
  margin: 0.45rem 0 0;
  font-size: 10px;
  font-weight: 600;
  color: rgba(251, 113, 133, 0.85);
}
#nto-minigame .mg-hunt-report-note:empty { display: none; }
#nto-minigame .mg-dead-actions {
  margin-top: 1.35rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}
#nto-minigame .mg-dead-btn {
  flex: 1;
  border-radius: 0.45rem;
  padding: 0.55rem 0.7rem;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
#nto-minigame .mg-dead-btn.is-primary {
  border: 0;
  background: #e54848;
  color: #fff;
}
#nto-minigame .mg-dead-btn.is-primary:hover {
  background: #f07171;
}
#nto-minigame .mg-dead-screen.is-victory .mg-dead-btn.is-primary {
  background: #059669;
}
#nto-minigame .mg-dead-screen.is-victory .mg-dead-btn.is-primary:hover {
  background: #10b981;
}
#nto-minigame .mg-dead-btn.is-ghost {
  border: 1px solid rgba(255,255,255,0.12);
  background: transparent;
  color: rgba(255,255,255,0.55);
}
#nto-minigame .mg-dead-btn.is-ghost:hover {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.04);
}
#nto-minigame .mg-dead-btn.is-danger {
  border: 1px solid rgba(244,63,94,0.45);
  background: rgba(244,63,94,0.18);
  color: #fda4af;
}
#nto-minigame .mg-dead-btn.is-danger:hover {
  background: rgba(244,63,94,0.28);
  color: #fecdd3;
}
#nto-minigame .mg-absorb-modal:not(.hidden) {
  display: flex;
  z-index: 56;
}
#nto-minigame [data-mg-discard-modal]:not(.hidden) {
  display: flex;
  z-index: 57;
}
#nto-minigame [data-mg-backpack]:not(.hidden) {
  z-index: 45;
}
#nto-minigame .mg-absorb-card {
  border-radius: 0.55rem;
}
#nto-minigame .mg-absorb-step,
#nto-minigame .mg-absorb-max {
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
  border-radius: 0.4rem;
  cursor: pointer;
  font-weight: 700;
  transition: background 0.15s ease, border-color 0.15s ease;
}
#nto-minigame .mg-absorb-step {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.1rem;
  line-height: 1;
}
#nto-minigame .mg-absorb-max {
  height: 2.25rem;
  padding: 0 0.65rem;
  font-size: 10px;
  letter-spacing: 0.08em;
}
#nto-minigame .mg-absorb-step:hover,
#nto-minigame .mg-absorb-max:hover {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
  color: #fff;
}
#nto-minigame .mg-absorb-input {
  flex: 1;
  min-width: 0;
  height: 2.25rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255,255,255,0.14);
  background: #080809;
  color: #fff;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  outline: none;
}
#nto-minigame .mg-absorb-input:focus {
  border-color: rgba(56, 189, 248, 0.45);
}
#nto-minigame .mg-dead-hint {
  margin: 0.9rem 0 0;
  font-size: 10px;
  color: rgba(255,255,255,0.22);
}
#nto-minigame .mg-dead-hint kbd {
  display: inline-block;
  margin: 0 0.15rem;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.4);
  font-size: 9px;
}


/* ?? Chat v2: Lobby / DM / Amigos ?? */
#nto-minigame .mg-chat {
  max-width: min(calc(100% - 1.5rem), 22rem);
}
#nto-minigame .mg-chat-panel {
  width: min(100vw - 1.5rem, 21.5rem);
}
#nto-minigame .mg-chat-body {
  display: flex;
  min-height: 0;
  flex: 1;
}
#nto-minigame .mg-chat-side {
  width: 7.25rem;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  max-height: 11rem;
}
#nto-minigame .mg-chat-side.hidden { display: none; }
#nto-minigame .mg-chat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
#nto-minigame .mg-chat-threads,
#nto-minigame .mg-chat-friends {
  flex: 1;
  overflow-y: auto;
  padding: 0.3rem;
  scrollbar-width: thin;
}
#nto-minigame .mg-chat-friends.hidden { display: none; }
#nto-minigame .mg-chat-thread,
#nto-minigame .mg-friend-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  text-align: left;
  border: 0;
  border-radius: 0.4rem;
  padding: 0.32rem 0.4rem;
  background: transparent;
  color: rgba(255,255,255,0.72);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 0.12rem;
}
#nto-minigame .mg-chat-thread:hover,
#nto-minigame .mg-friend-row:hover,
#nto-minigame .mg-chat-thread.is-active,
#nto-minigame .mg-friend-row.is-active {
  background: rgba(255,255,255,0.07);
  color: #fff;
}
#nto-minigame .mg-chat-thread-dot,
#nto-minigame .mg-friend-dot {
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 999px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.18);
}
#nto-minigame .mg-chat-thread-dot.is-on,
#nto-minigame .mg-friend-dot.is-on {
  background: #34d399;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.45);
}
#nto-minigame .mg-chat-thread-name,
#nto-minigame .mg-friend-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nto-minigame .mg-friend-row .mg-friend-rm {
  margin-left: 0;
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  border: 0;
  border-radius: 0.3rem;
  background: transparent;
  color: rgba(255,255,255,0.28);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}
#nto-minigame .mg-friend-acts {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  flex-shrink: 0;
}
#nto-minigame .mg-friend-act {
  width: 1.15rem;
  height: 1.15rem;
  border: 0;
  border-radius: 0.3rem;
  background: transparent;
  color: rgba(255,255,255,0.4);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
#nto-minigame .mg-friend-act:hover:not(:disabled) {
  color: #7dd3fc;
  background: rgba(56, 189, 248, 0.12);
}
#nto-minigame .mg-friend-act:disabled {
  opacity: 0.25;
  cursor: default;
}
#nto-minigame .mg-coop-select {
  appearance: none;
}
#nto-minigame .mg-friend-row .mg-friend-rm:hover {
  color: #fb7185;
  background: rgba(251, 113, 133, 0.12);
}
#nto-minigame .mg-friend-add {
  display: flex;
  gap: 0.25rem;
  padding: 0.3rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
#nto-minigame .mg-friend-add.hidden { display: none; }
#nto-minigame .mg-friend-input {
  flex: 1;
  min-width: 0;
  border-radius: 0.35rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.28);
  padding: 0.28rem 0.4rem;
  font-size: 10px;
  color: rgba(255,255,255,0.88);
  outline: none;
}
#nto-minigame .mg-friend-add-btn {
  width: 1.55rem;
  height: 1.55rem;
  border: 0;
  border-radius: 0.35rem;
  background: rgba(56, 189, 248, 0.18);
  color: #7dd3fc;
  font-weight: 800;
  cursor: pointer;
}
#nto-minigame .mg-chat-whisper-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
#nto-minigame .mg-chat-whisper-friend {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border: 0;
  border-radius: 0.35rem;
  background: transparent;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  font-size: 12px;
}
#nto-minigame .mg-chat-whisper-friend:hover,
#nto-minigame .mg-chat-whisper-friend.is-friend { color: #fbbf24; }
#nto-minigame .mg-chat-whisper-friend.hidden { display: none; }
#nto-minigame .mg-chat-line.is-bubble {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin: 0 0 0.4rem;
  padding: 0.3rem 0.45rem;
  border-radius: 0.45rem;
  background: rgba(255,255,255,0.04);
}
#nto-minigame .mg-chat-line.is-bubble.is-mine {
  background: rgba(56, 189, 248, 0.1);
}
#nto-minigame .mg-chat-line.is-bubble.is-private {
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.12);
}
#nto-minigame .mg-chat-meta {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.32);
}
#nto-minigame .mg-chat.has-side .mg-chat-panel {
  width: min(100vw - 1.5rem, 22.5rem);
}
#nto-minigame .mg-chat-log {
  max-height: 8rem;
}

#nto-minigame .mg-chat-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}
#nto-minigame .mg-chat-line.is-private {
  color: rgba(125, 211, 252, 0.92);
}
#nto-minigame .mg-chat-line.is-private .mg-chat-name {
  color: #38bdf8;
}
#nto-minigame .mg-chat-tag {
  display: inline-block;
  margin-right: 0.25rem;
  padding: 0.05rem 0.28rem;
  border-radius: 0.25rem;
  background: rgba(56, 189, 248, 0.15);
  color: #7dd3fc;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#nto-minigame .mg-chat-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0.45rem;
  color: rgba(255,255,255,0.42);
  transition: color 0.12s ease, background 0.12s ease;
}
#nto-minigame .mg-chat-iconbtn:hover {
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.06);
}
#nto-minigame .mg-chat-log {
  max-height: 5.75rem;
  overflow-y: auto;
  padding: 0.4rem 0.7rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
}
#nto-minigame .mg-chat-empty {
  margin: 0;
  font-size: 11px;
  color: rgba(255,255,255,0.28);
}
#nto-minigame .mg-chat-line {
  margin: 0 0 0.28rem;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,0.68);
  word-break: break-word;
}
#nto-minigame .mg-chat-line.is-mine {
  color: rgba(186, 230, 253, 0.9);
}
#nto-minigame .mg-chat-name {
  font-weight: 700;
  color: rgba(125, 211, 252, 0.95);
}
#nto-minigame .mg-chat-line.is-mine .mg-chat-name {
  color: rgba(255,255,255,0.88);
}
#nto-minigame .mg-chat-form {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.18);
}
#nto-minigame .mg-chat-input {
  flex: 1;
  min-width: 0;
  border-radius: 0.55rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.28);
  padding: 0.45rem 0.6rem;
  font-size: 12px;
  color: rgba(255,255,255,0.9);
  outline: none;
}
#nto-minigame .mg-chat-input::placeholder {
  color: rgba(255,255,255,0.25);
}
#nto-minigame .mg-chat-input:focus {
  border-color: rgba(56, 189, 248, 0.35);
}
#nto-minigame .mg-chat-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 0.55rem;
  color: rgba(125, 211, 252, 0.9);
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.22);
}
#nto-minigame .mg-chat.is-open .mg-chat-panel {
  border-color: rgba(56, 189, 248, 0.28);
  background: rgba(8, 8, 10, 0.78);
}
#nto-minigame .mg-chat.is-collapsed .mg-chat-panel {
  display: none;
}
#nto-minigame .mg-chat.is-collapsed .mg-chat-fab {
  display: inline-flex;
}
#nto-minigame.is-lobby [data-mg-joy] {
  opacity: 0.92;
}
/* desktop: canto inferior esquerdo, longe do HUD topo */
@media (min-width: 640px) {
  #nto-minigame.is-lobby .mg-chat {
    left: 1rem;
    bottom: 1rem;
  }
  #nto-minigame.is-lobby:not(.is-mobile-ui):not(.is-compact-mobile) [data-mg-joy] {
    display: none !important;
  }
  #nto-minigame .mg-chat-log {
    max-height: 7.25rem;
  }
}
/* mobile: FAB acima do joystick; painel sobe e fica compacto */
#nto-minigame.is-lobby.is-mobile-ui .mg-chat,
#nto-minigame.is-lobby.is-compact-mobile .mg-chat,
#nto-minigame.is-lobby.is-mobile-playing .mg-chat {
  left: 0.65rem;
  bottom: calc(11.25rem + env(safe-area-inset-bottom));
  max-width: min(calc(100% - 1.2rem), 14.5rem);
}
#nto-minigame.is-lobby.is-mobile-ui .mg-chat-fab,
#nto-minigame.is-lobby.is-compact-mobile .mg-chat-fab,
#nto-minigame.is-lobby.is-mobile-playing .mg-chat-fab {
  bottom: calc(8.75rem + env(safe-area-inset-bottom));
}
#nto-minigame.is-lobby.is-mobile-ui [data-mg-chat] .mg-chat-log,
#nto-minigame.is-lobby.is-compact-mobile [data-mg-chat] .mg-chat-log,
#nto-minigame.is-lobby.is-mobile-playing [data-mg-chat] .mg-chat-log {
  max-height: none !important;
}
#nto-minigame.is-lobby.is-mobile-ui [data-mg-chat] .mg-chat-line,
#nto-minigame.is-lobby.is-compact-mobile [data-mg-chat] .mg-chat-line {
  font-size: 13px;
}
/* HUD UI suave (antialias) ? o pixel-perfect fica s? no canvas do jogo */
#nto-minigame .mg-hud {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
#nto-minigame .mg-hud,
#nto-minigame .mg-hud button,
#nto-minigame .mg-hud .mg-skill-btn {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
#nto-minigame .mg-hud [data-mg-avatar] {
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
}
#nto-minigame .mg-hud .tabular-nums {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
#nto-minigame .mg-hud .mg-skill-btn {
  border-width: 1px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.28);
}
#nto-minigame .mg-spellbar {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#nto-minigame .mg-spellbar .mg-skill-btn {
  pointer-events: auto;
  position: absolute;
}
/* Dock: desktop = cluster centrado; mobile = joy esq + skills dir */
#nto-minigame .mg-hud-dock {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.4rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
  z-index: 22;
}
#nto-minigame .mg-hud-joy {
  flex: 0 0 auto;
  margin-left: 1.25rem;
  margin-bottom: 1.45rem;
}
#nto-minigame .mg-hud-combat-cluster {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.7rem;
  pointer-events: none;
}
#nto-minigame .mg-hud-inv {
  align-self: flex-end;
  margin-bottom: 0.55rem;
  pointer-events: auto;
}
#nto-minigame .mg-hud-moba {
  margin: 0;
  pointer-events: auto;
}
/* Desktop: invent?rio + skills no centro inferior */
#nto-minigame:not(.is-mobile-ui):not(.is-compact-mobile):not(.is-mobile-playing) .mg-hud-dock {
  justify-content: center;
}
#nto-minigame:not(.is-mobile-ui):not(.is-compact-mobile):not(.is-mobile-playing) .mg-hud-combat-cluster {
  transform: translateX(1.1rem);
}
/* Mobile: joy esquerda, cluster ? direita (padr?o touch) */
#nto-minigame.is-mobile-ui .mg-hud-dock,
#nto-minigame.is-compact-mobile .mg-hud-dock,
#nto-minigame.is-mobile-playing .mg-hud-dock {
  justify-content: space-between;
}
#nto-minigame.is-mobile-ui .mg-hud-combat-cluster,
#nto-minigame.is-compact-mobile .mg-hud-combat-cluster,
#nto-minigame.is-mobile-playing .mg-hud-combat-cluster {
  transform: none;
  margin-left: auto;
  margin-right: 0.15rem;
}
/* Pad MOBA: primary BR + 3 skills em arco equidistante + potion a esquerda */
#nto-minigame .mg-hud-moba-pad {
  position: relative;
  width: 17.5rem;
  height: 15.25rem;
  padding-bottom: 0.35rem;
  box-sizing: border-box;
}
/* Primary ? ancora do arco */
#nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-primary {
  right: 0.2rem !important;
  bottom: 0.85rem !important;
  left: auto !important;
  top: auto !important;
  width: 4.6rem !important;
  height: 4.6rem !important;
  min-width: 4.6rem !important;
  min-height: 4.6rem !important;
  border-radius: 999px !important;
  border: 1.5px solid color-mix(in srgb, var(--skill-color) 55%, rgba(255,255,255,0.2)) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38) !important;
  z-index: 3;
}
/* Secondary ? topo do arco */
#nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-secondary {
  right: 3rem !important;
  bottom: 7.15rem !important;
  left: auto !important;
  top: auto !important;
  width: 3.4rem !important;
  height: 3.4rem !important;
  min-width: 3.4rem !important;
  min-height: 3.4rem !important;
  border-radius: 999px !important;
  border: 1.5px solid color-mix(in srgb, var(--skill-color) 50%, rgba(255,255,255,0.18)) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32) !important;
  z-index: 2;
}
/* Ultimate ? esquerda do arco */
#nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-ultimate {
  right: 7.55rem !important;
  bottom: 5.4rem !important;
  left: auto !important;
  top: auto !important;
  width: 3.4rem !important;
  height: 3.4rem !important;
  min-width: 3.4rem !important;
  min-height: 3.4rem !important;
  border-radius: 999px !important;
  border: 1.5px solid color-mix(in srgb, var(--skill-color) 50%, rgba(255,255,255,0.18)) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32) !important;
  z-index: 2;
}
#nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-secondary::before,
#nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-ultimate::before {
  content: none !important;
  display: none !important;
}
#nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-secondary .mg-skill-glyph,
#nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-ultimate .mg-skill-glyph,
#nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-secondary .mg-skill-cd,
#nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-ultimate .mg-skill-cd {
  z-index: 1;
}
#nto-minigame .mg-hud-utils {
  position: absolute;
  left: 0.1rem;
  bottom: 0.85rem;
  display: flex;
  align-items: flex-end;
  gap: 0.55rem;
  z-index: 1;
}
#nto-minigame .mg-hud-moba-pad .mg-util-btn,
#nto-minigame .mg-hud-moba-pad [data-mg-potionbtn],
#nto-minigame .mg-hud-moba-pad [data-mg-chakrabtn] {
  position: relative !important;
  width: 2.7rem !important;
  height: 2.7rem !important;
  border-radius: 999px !important;
  flex-direction: column;
  margin: 0 !important;
}
/* Dash ? base do arco, mesmo tamanho das skills laterais */
#nto-minigame .mg-hud-moba-pad > [data-mg-dashbtn] {
  position: absolute !important;
  right: 7.2rem !important;
  bottom: 0.35rem !important;
  left: auto !important;
  top: auto !important;
  width: 3.4rem !important;
  height: 3.4rem !important;
  min-width: 3.4rem !important;
  min-height: 3.4rem !important;
  border-radius: 999px !important;
  border: 1.5px solid color-mix(in srgb, var(--skill-color) 50%, rgba(255,255,255,0.18)) !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 2;
  flex-direction: column;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32) !important;
  box-sizing: border-box !important;
}#nto-minigame .mg-util-label {
  position: absolute;
  left: 50%;
  bottom: -1.05rem;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  pointer-events: none;
}
#nto-minigame .mg-skill-potion.mg-util-btn {
  border: 1px solid rgba(52, 211, 153, 0.45) !important;
  background:
    radial-gradient(circle at 35% 30%, rgba(52, 211, 153, 0.35), transparent 58%),
    radial-gradient(circle at 50% 55%, rgba(8, 12, 18, 0.92), rgba(4, 5, 8, 0.96)) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
#nto-minigame .mg-skill-chakra.mg-util-btn {
  border: 1px solid rgba(56, 189, 248, 0.5) !important;
  background:
    radial-gradient(circle at 35% 30%, rgba(56, 189, 248, 0.38), transparent 58%),
    radial-gradient(circle at 50% 55%, rgba(8, 12, 18, 0.92), rgba(4, 5, 8, 0.96)) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}
#nto-minigame .mg-skill-dash {
  --skill-color: #facc15;
  border: 1.5px solid color-mix(in srgb, var(--skill-color) 50%, rgba(255,255,255,0.18)) !important;
  background:
    radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--skill-color) 40%, transparent), transparent 58%),
    radial-gradient(circle at 50% 55%, rgba(10,12,16,0.92), rgba(4,5,8,0.96)) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32) !important;
}
#nto-minigame .mg-hud-moba-pad .mg-skill-btn:active {
  transform: scale(0.94);
}
#nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-primary:active {
  transform: scale(0.94);
}
#nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-primary .mg-skill-glyph {
  font-size: 1.15rem;
}
#nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-name {
  display: none !important;
}
#nto-minigame .mg-hud-moba-pad .mg-skill-key {
  opacity: 0.85;
  transform: scale(0.92);
  transform-origin: top left;
}
#nto-minigame .mg-skill-btn {
  --skill-color: #94a3b8;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--skill-color) 45%, rgba(255,255,255,0.15));
  background:
    radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--skill-color) 40%, transparent), transparent 58%),
    radial-gradient(circle at 50% 55%, rgba(10,12,16,0.92), rgba(4,5,8,0.96));
  box-shadow: 0 6px 14px rgba(0,0,0,0.32);
  color: #fff;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 0.12s ease, filter 0.12s ease;
}
#nto-minigame .mg-skill-btn.is-secondary {
  width: 3.35rem;
  height: 3.35rem;
}
#nto-minigame .mg-skill-btn.is-ultimate {
  width: 3.7rem;
  height: 3.7rem;
}
#nto-minigame .mg-skill-btn.is-primary {
  width: 4.35rem;
  height: 4.35rem;
}
#nto-minigame .mg-skill-btn:active {
  transform: scale(0.94);
}
#nto-minigame .mg-skill-key {
  position: absolute;
  top: -0.2rem;
  left: -0.15rem;
  z-index: 2;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(8,10,14,0.92);
  color: rgba(255,255,255,0.78);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15rem;
  text-align: center;
}
#nto-minigame .mg-skill-glyph {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
#nto-minigame .mg-skill-btn.is-primary .mg-skill-glyph {
  font-size: 1.15rem;
}
#nto-minigame .mg-skill-name {
  position: absolute;
  left: 50%;
  bottom: -1.05rem;
  transform: translateX(-50%);
  max-width: 4.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  pointer-events: none;
  display: none;
}
#nto-minigame .mg-invbar:empty {
  display: none;
}
#nto-minigame .mg-skill-potion .mg-inv-qty {
  position: absolute;
  right: -0.15rem;
  bottom: -0.1rem;
  z-index: 2;
  min-width: 1rem;
  padding: 0 0.22rem;
  border-radius: 0.25rem;
  background: rgba(0,0,0,0.85);
  border: 1px solid rgba(251,191,36,0.45);
  color: #fbbf24;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1rem;
  text-align: center;
}
#nto-minigame .mg-skill-cd {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(0,0,0,0.62);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
}
#nto-minigame .mg-skill-cd.is-on {
  display: flex;
}
#nto-minigame .mg-skill-btn.is-locked {
  opacity: 0.42;
  filter: grayscale(0.55);
}
#nto-minigame .mg-skill-glyph.is-unlock-lv {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-align: center;
  padding: 0 2px;
}
#nto-minigame .mg-skill-btn.is-cd {
  filter: saturate(0.7);
}
#nto-minigame .mg-skill-btn.is-combo {
  box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.85), 0 0 18px rgba(251, 191, 36, 0.35);
  animation: mgComboPulse 0.45s ease-in-out infinite;
}
#nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-combo {
  filter: brightness(1.15);
}
@keyframes mgComboPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}
#nto-minigame .mg-leaderboard li {
  line-height: 1.2;
}
#nto-minigame .mg-hud-moba-pad .mg-skill-dash {
  margin-bottom: 0;
}
#nto-minigame .mg-skill-dash .mg-skill-glyph {
  font-size: 1.1rem;
  font-weight: 800;
}
@media (min-width: 640px) {
  #nto-minigame .mg-hud-moba-pad {
    width: 18.25rem;
    height: 15.75rem;
  }
  #nto-minigame .mg-skill-glyph {
    font-size: 1.05rem;
  }
  #nto-minigame .mg-skill-glyph.is-unlock-lv {
    font-size: 0.72rem;
  }
  #nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-primary {
    width: 4.75rem !important;
    height: 4.75rem !important;
    min-width: 4.75rem !important;
    min-height: 4.75rem !important;
  }
  #nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-primary .mg-skill-glyph {
    font-size: 1.2rem;
  }
  #nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-secondary,
  #nto-minigame .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-ultimate,
  #nto-minigame .mg-hud-moba-pad > [data-mg-dashbtn] {
    width: 3.5rem !important;
    height: 3.5rem !important;
    min-width: 3.5rem !important;
    min-height: 3.5rem !important;
  }
}
#nto-minigame .mg-hub-actions {
  position: relative;
  z-index: 5;
}

/* Hub mobile: enter-game compacto */
@media (max-width: 767px) {
  #nto-minigame [data-mg-hub] .mg-hub-shell {
    min-height: 100%;
    overflow: hidden !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-body {
    padding: 0.7rem 0.75rem 0.35rem !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-title {
    font-size: 1.15rem !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-desc {
    display: none !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-enter {
    gap: 0.55rem !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-showcase {
    min-height: 0;
    padding: 0.55rem 0.65rem 0.7rem !important;
  }
  #nto-minigame [data-mg-hub] .mg-outfit-hero {
    width: 6.5rem !important;
    height: 7.5rem !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-name {
    font-size: 1.05rem !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-dossier {
    gap: 0.4rem !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-panel {
    padding: 0.45rem 0.5rem !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-actions {
    padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom)) !important;
    background: linear-gradient(180deg, rgba(10,10,12,0.92), #0a0a0c 40%) !important;
    border-top-color: rgba(255,255,255,0.08) !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-actions-inner {
    gap: 0.45rem !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-actions-main {
    gap: 0.4rem !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-actions [data-mg-start] {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.85rem 1rem !important;
    font-size: 12px !important;
    letter-spacing: 0.14em !important;
    border-radius: 0.65rem !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-secondary {
    display: none !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-sync {
    display: none !important;
  }
}

body.mg-no-scroll,
html:has(#nto-minigame.is-focus-mode),
body:has(#nto-minigame.is-focus-mode) {
  overflow: hidden !important;
}

/* Embutido: ocupa o page-shell sob o nav, sem estourar canvas/loading */
body:has(#nto-minigame:not(.is-focus-mode)) .page-shell {
  min-height: 100dvh;
}
body:has(#nto-minigame:not(.is-focus-mode)) .page-shell > main.wrapper {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: calc(100dvh - 3.5rem) !important;
}
#nto-minigame:not(.is-focus-mode) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  height: calc(100dvh - 3.5rem - 1.1rem);
  max-height: calc(100dvh - 3.5rem - 1.1rem);
  overflow: hidden;
}
#nto-minigame:not(.is-focus-mode) [data-mg-stage] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#nto-minigame:not(.is-focus-mode) [data-mg-stage] > .relative {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
}
#nto-minigame:not(.is-focus-mode) [data-mg-canvas-wrap] {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #080a09;
}
#nto-minigame:not(.is-focus-mode) #mg-canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  object-fit: fill;
  image-rendering: auto !important;
  -ms-interpolation-mode: bicubic !important;
}
#nto-minigame #mg-canvas.mg-canvas-smooth {
  image-rendering: auto !important;
  -ms-interpolation-mode: bicubic !important;
}
#nto-minigame:not(.is-focus-mode) .mg-loading {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}
#nto-minigame:not(.is-focus-mode) [data-mg-footerbar] {
  flex-shrink: 0;
}

#nto-minigame.is-focus-mode {
  position: fixed;
  inset: 0;
  z-index: 70;
  margin: 0;
  padding: 0;
  background: #050506;
}
#nto-minigame.is-focus-mode .page-header {
  display: none;
}
#nto-minigame.is-focus-mode [data-mg-stage] {
  height: calc(var(--mg-vh, 1vh) * 100);
  border: 0;
  border-radius: 0;
}
#nto-minigame.is-focus-mode [data-mg-stage] > .relative {
  height: 100%;
}
#nto-minigame.is-focus-mode [data-mg-footerbar] {
  display: none;
}
#nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-shell {
  min-height: 100%;
}
#nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-featured {
  padding: 0.9rem 0.9rem 1rem;
  gap: 1rem;
}
#nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-title {
  font-size: 1.15rem !important;
}
#nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-actions {
  padding: 0.55rem 0.75rem calc(0.55rem + env(safe-area-inset-bottom));
}
#nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-side {
  border-top: 1px solid rgba(255,255,255,0.06);
}
#nto-minigame.is-compact-mobile [data-mg-select] .mg-select-shell {
  padding: 0.55rem;
  gap: 0.45rem;
}
#nto-minigame.is-compact-mobile [data-mg-select] [data-mg-chardetail] {
  max-height: none;
}
#nto-minigame.is-compact-mobile [data-mg-hud] .pointer-events-none.absolute.inset-x-0.top-0 {
  gap: 0.35rem;
  padding: calc(0.25rem + env(safe-area-inset-top)) 0.35rem 0.2rem;
}
#nto-minigame.is-compact-mobile [data-mg-hud] .pointer-events-none.absolute.inset-x-0.top-0 > .mg-hud-glass:nth-child(2),
#nto-minigame.is-mobile-ui [data-mg-hud] .pointer-events-none.absolute.inset-x-0.top-0 > .mg-hud-glass:nth-child(2),
#nto-minigame.is-mobile-playing [data-mg-hud] .pointer-events-none.absolute.inset-x-0.top-0 > .mg-hud-glass:nth-child(2) {
  display: flex !important;
  position: absolute;
  left: 50%;
  top: calc(0.3rem + env(safe-area-inset-top));
  transform: translateX(-50%);
  padding: 0.2rem 0.45rem !important;
  gap: 0.35rem !important;
  pointer-events: none;
  z-index: 2;
}
#nto-minigame.is-mobile-playing [data-mg-hud] .mg-hud-stat-sep {
  display: none;
}
#nto-minigame.is-mobile-playing [data-mg-hud] .mg-hud-stat {
  min-width: 1.7rem;
}
#nto-minigame.is-mobile-playing [data-mg-hud] .mg-hud-stats .mg-hud-stat-val,
#nto-minigame.is-mobile-playing [data-mg-hud] .mg-hud-stats [data-mg-wave],
#nto-minigame.is-mobile-playing [data-mg-hud] .mg-hud-stats [data-mg-score],
#nto-minigame.is-mobile-playing [data-mg-hud] .mg-hud-stats [data-mg-kills] {
  font-size: 0.78rem !important;
  line-height: 1;
}
#nto-minigame.is-mobile-playing [data-mg-hud] .pointer-events-none.absolute.inset-x-0.top-0 > .mg-hud-glass:first-child {
  max-width: calc(50% - 0.4rem);
}
#nto-minigame.is-mobile-playing [data-mg-hud] .mg-hud-top-utils {
  margin-left: auto;
}
#nto-minigame.is-mobile-playing [data-mg-invbar] {
  display: none !important;
}
#nto-minigame.is-mobile-playing [data-mg-potionbtn],
#nto-minigame.is-mobile-playing [data-mg-chakrabtn] {
  width: 3.55rem !important;
  height: 3.55rem !important;
}
#nto-minigame.is-mobile-playing [data-mg-bossbar],
#nto-minigame.is-compact-mobile [data-mg-bossbar],
#nto-minigame.is-mobile-ui [data-mg-bossbar] {
  top: calc(env(safe-area-inset-top) + 0.4rem) !important;
  left: auto !important;
  right: 0.4rem !important;
  width: auto !important;
  max-width: 42vw !important;
  padding: 0 !important;
  justify-content: flex-end !important;
  inset-inline-start: auto !important;
}
#nto-minigame.is-mobile-playing .mg-target-card,
#nto-minigame.is-compact-mobile .mg-target-card,
#nto-minigame.is-mobile-ui .mg-target-card {
  width: min(38vw, 7.6rem) !important;
  max-width: 7.6rem !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding: 0.22rem 0.38rem 0.26rem !important;
  border-radius: 0.4rem !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.22) !important;
  background: rgba(8, 8, 10, 0.55) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  opacity: 0.9;
}
#nto-minigame.is-mobile-playing .mg-target-card.is-duel,
#nto-minigame.is-compact-mobile .mg-target-card.is-duel {
  width: min(36vw, 7.2rem) !important;
  max-width: 7.2rem !important;
}
#nto-minigame.is-mobile-playing .mg-target-tag,
#nto-minigame.is-compact-mobile .mg-target-tag {
  display: none !important;
}
#nto-minigame.is-mobile-playing .mg-target-name,
#nto-minigame.is-compact-mobile .mg-target-name {
  font-size: 9px !important;
  letter-spacing: 0.01em !important;
}
#nto-minigame.is-mobile-playing .mg-target-hp,
#nto-minigame.is-compact-mobile .mg-target-hp {
  font-size: 8px !important;
}
#nto-minigame.is-mobile-playing .mg-target-track,
#nto-minigame.is-compact-mobile .mg-target-track {
  height: 0.28rem !important;
  margin-top: 0.14rem !important;
}
#nto-minigame.is-mobile-playing .mg-target-atk,
#nto-minigame.is-compact-mobile .mg-target-atk {
  display: none !important;
}
#nto-minigame.is-mobile-playing .mg-target-name {
  font-size: 9px;
}
#nto-minigame.is-mobile-playing [data-mg-hud] [data-mg-joy] {
  width: 8.55rem !important;
  height: 8.55rem !important;
}
#nto-minigame.is-mobile-playing [data-mg-hud] [data-mg-joy-knob] {
  width: 3.45rem !important;
  height: 3.45rem !important;
}
#nto-minigame.is-mobile-playing [data-mg-hud] .mg-hud-dock,
#nto-minigame.is-mobile-playing [data-mg-hud] .pointer-events-none.absolute.inset-x-0.bottom-0 {
  padding: 0.45rem 0.65rem calc(0.7rem + env(safe-area-inset-bottom)) !important;
  align-items: end;
}
#nto-minigame.is-compact-mobile [data-mg-hud] [data-mg-hud-name] {
  max-width: 88px !important;
  font-size: 12px;
}
#nto-minigame.is-compact-mobile [data-mg-hud] [data-mg-level] {
  font-size: 10px;
}
#nto-minigame.is-compact-mobile [data-mg-hud] [data-mg-hp],
#nto-minigame.is-compact-mobile [data-mg-hud] [data-mg-chakra] {
  min-width: 2.4rem;
  font-size: 8px;
}
#nto-minigame.is-compact-mobile [data-mg-hud] [data-mg-joy] {
  width: 8.1rem !important;
  height: 8.1rem !important;
}
#nto-minigame.is-compact-mobile [data-mg-hud] [data-mg-joy-knob] {
  width: 3.25rem !important;
  height: 3.25rem !important;
}
#nto-minigame.is-compact-mobile [data-mg-hud] .mg-hud-dock,
#nto-minigame.is-compact-mobile [data-mg-hud] .pointer-events-none.absolute.inset-x-0.bottom-0 {
  padding: 0.35rem 0.55rem calc(0.55rem + env(safe-area-inset-bottom));
}
#nto-minigame.is-compact-mobile [data-mg-hud] .mg-hud-joy {
  margin-left: 1.25rem;
  margin-bottom: 1.25rem;
}
#nto-minigame.is-compact-mobile [data-mg-hud] .mg-hud-moba-pad {
  width: 15.75rem;
  height: 13.85rem;
}
#nto-minigame.is-compact-mobile [data-mg-hud] .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-primary {
  width: 4.15rem !important;
  height: 4.15rem !important;
  min-width: 4.15rem !important;
  min-height: 4.15rem !important;
  border-radius: 999px !important;
  bottom: 0.7rem !important;
}
#nto-minigame.is-compact-mobile [data-mg-hud] .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-secondary {
  right: 2.65rem !important;
  bottom: 6.35rem !important;
  width: 3.1rem !important;
  height: 3.1rem !important;
  min-width: 3.1rem !important;
  min-height: 3.1rem !important;
}
#nto-minigame.is-compact-mobile [data-mg-hud] .mg-hud-moba-pad .mg-spellbar .mg-skill-btn.is-ultimate {
  right: 6.75rem !important;
  bottom: 4.75rem !important;
  width: 3.1rem !important;
  height: 3.1rem !important;
  min-width: 3.1rem !important;
  min-height: 3.1rem !important;
}
#nto-minigame.is-compact-mobile [data-mg-hud] .mg-hud-moba-pad .mg-util-btn,
#nto-minigame.is-compact-mobile [data-mg-hud] .mg-hud-moba-pad [data-mg-potionbtn],
#nto-minigame.is-compact-mobile [data-mg-hud] .mg-hud-moba-pad [data-mg-chakrabtn] {
  width: 2.45rem !important;
  height: 2.45rem !important;
}
#nto-minigame.is-compact-mobile [data-mg-hud] .mg-hud-moba-pad > [data-mg-dashbtn] {
  right: 6.4rem !important;
  bottom: 0.25rem !important;
  width: 3.1rem !important;
  height: 3.1rem !important;
  min-width: 3.1rem !important;
  min-height: 3.1rem !important;
}
#nto-minigame.is-compact-mobile [data-mg-stage],
#nto-minigame.is-compact-mobile #mg-canvas {
  touch-action: none;
}
#nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-shell {
  min-height: 100%;
}
#nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-featured {
  padding: 0.9rem 0.9rem 0.85rem;
}
#nto-minigame.is-mobile-ui [data-mg-hub] h2 {
  font-size: 1.45rem !important;
  line-height: 1.1;
}
#nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-actions [data-mg-start] {
  width: 100%;
  padding: 0.8rem 1rem;
}
#nto-minigame.is-mobile-ui [data-mg-maps] .mg-panel,
#nto-minigame.is-mobile-ui [data-mg-select] .mg-select-shell {
  padding: 0.55rem;
  gap: 0.45rem;
}
#nto-minigame.is-mobile-ui [data-mg-select] [data-mg-chardetail] {
  max-height: none;
  overflow: hidden;
}
#nto-minigame.is-mobile-ui [data-mg-hud] .pointer-events-none.absolute.inset-x-0.top-0 > .mg-hud-glass:nth-child(2) {
  display: flex;
}
#nto-minigame.is-mobile-ui [data-mg-hud] [data-mg-hud-name] {
  max-width: 96px !important;
  font-size: 12px;
}
#nto-minigame.is-mobile-ui [data-mg-hud] [data-mg-hp],
#nto-minigame.is-mobile-ui [data-mg-hud] [data-mg-chakra] {
  min-width: 2.5rem;
  font-size: 8px;
}
#nto-minigame.is-mobile-ui [data-mg-hud] [data-mg-joy] {
  width: 8.3rem !important;
  height: 8.3rem !important;
}
#nto-minigame.is-mobile-ui [data-mg-hud] [data-mg-joy-knob] {
  width: 3.4rem !important;
  height: 3.4rem !important;
}
#nto-minigame.is-mobile-ui [data-mg-hud] .mg-skill-name {
  display: none;
}
#nto-minigame.is-mobile-ui [data-mg-hud] .mg-hud-moba-pad {
  width: 15.5rem;
  height: 13.75rem;
}
#nto-minigame.is-mobile-ui [data-mg-hud] .mg-hud-dock,
#nto-minigame.is-mobile-ui [data-mg-hud] .pointer-events-none.absolute.inset-x-0.bottom-0 {
  padding: 0.4rem 0.55rem calc(0.65rem + env(safe-area-inset-bottom));
}
#nto-minigame.is-mobile-ui [data-mg-hud] .mg-hud-joy {
  margin-left: 1.35rem;
  margin-bottom: 1.35rem;
}
#nto-minigame .mg-dailies li {
  border-radius: 0.4rem;
  background: rgba(255,255,255,0.03);
  padding: 0.5rem 0.65rem;
}
#nto-minigame .mg-dailies .mg-daily-bar {
  height: 3px;
  margin-top: 0.35rem;
  border-radius: 99px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
#nto-minigame .mg-dailies .mg-daily-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
#nto-minigame .mg-dailies .is-done {
  opacity: 0.72;
}
#nto-minigame .mg-dailies .mg-daily-claim {
  border-radius: 0.3rem;
  background: rgba(52, 211, 153, 0.18);
  padding: 0.15rem 0.45rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6ee7b7;
}
#nto-minigame .mg-dailies .mg-daily-claim:hover {
  background: rgba(52, 211, 153, 0.28);
}
#nto-minigame .mg-dailies .is-claimed {
  opacity: 0.55;
}
#nto-minigame .mg-loot-chip.is-uncommon { box-shadow: 0 0 0 1px #4ade80, 0 0 12px rgba(74, 222, 128, 0.25); }
#nto-minigame .mg-loot-chip.is-rare { box-shadow: 0 0 0 1px #38bdf8, 0 0 14px rgba(56, 189, 248, 0.35); }
#nto-minigame .mg-loot-chip.is-epic { box-shadow: 0 0 0 1px #c084fc, 0 0 16px rgba(192, 132, 252, 0.4); }
#nto-minigame .mg-loot-chip.is-legendary {
  box-shadow: 0 0 0 1px #fbbf24, 0 0 18px rgba(251, 191, 36, 0.5);
  animation: mg-loot-shine 1.2s ease-in-out infinite alternate;
}
@keyframes mg-loot-shine {
  from { filter: brightness(1); }
  to { filter: brightness(1.15); }
}
@media (max-width: 767px) {
  #nto-minigame.is-mobile-playing {
    position: fixed;
    inset: 0;
    z-index: 70;
    margin: 0;
    padding: 0;
    background: #050506;
  }
  #nto-minigame.is-mobile-playing .page-header {
    display: none;
  }
  #nto-minigame.is-mobile-playing [data-mg-stage] {
    height: calc(var(--mg-vh, 1vh) * 100);
    border: 0;
    border-radius: 0;
  }
  #nto-minigame.is-mobile-playing [data-mg-stage] > .relative {
    height: 100%;
  }
  #nto-minigame.is-mobile-playing [data-mg-footerbar] {
    display: none;
  }
  #nto-minigame.is-mobile-playing [data-mg-hud-name] {
    max-width: 88px;
  }
  #nto-minigame.is-mobile-playing [data-mg-hud] {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #nto-minigame.is-mobile-playing [data-mg-focus-toggle],
  #nto-minigame.is-mobile-playing [data-mg-fullscreen] {
    display: none;
  }
  #nto-minigame.is-mobile-playing [data-mg-mute] {
    width: 2.65rem;
    height: 2.65rem;
  }
  #nto-minigame.is-mobile-playing [data-mg-hud] .pointer-events-none.absolute.inset-x-0.top-0 > .mg-hud-glass:nth-child(2) {
    display: flex !important;
  }
  #nto-minigame.is-mobile-playing [data-mg-bossbar] {
    top: calc(env(safe-area-inset-top) + 0.35rem) !important;
    right: 0.35rem !important;
    left: auto !important;
  }
  #nto-minigame.is-mobile-playing .mg-target-card,
  #nto-minigame.is-mobile-playing .mg-target-card.is-duel {
    width: min(36vw, 7.2rem) !important;
    max-width: 7.2rem !important;
  }
  #nto-minigame.is-mobile-playing [data-mg-joy] {
    width: 8.55rem !important;
    height: 8.55rem !important;
  }
  #nto-minigame.is-mobile-playing [data-mg-joy-knob] {
    width: 3.45rem !important;
    height: 3.45rem !important;
  }
  #nto-minigame.is-mobile-playing #mg-canvas {
    border-radius: 0;
    touch-action: none;
  }
  #nto-minigame.is-mobile-playing [data-mg-stage],
  #nto-minigame.is-mobile-playing [data-mg-stage] * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  #nto-minigame .mg-hud .mg-hud-glass {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}
/* Final mobile pass: readable UI + true full focus */
#nto-minigame.is-lobby [data-mg-spellbar],
#nto-minigame.is-lobby [data-mg-dashbtn],
#nto-minigame.is-lobby [data-mg-invbar],
#nto-minigame.is-lobby [data-mg-potionbtn],
#nto-minigame.is-lobby [data-mg-chakrabtn],
#nto-minigame.is-lobby .mg-hud-moba,
#nto-minigame.is-lobby .mg-hud-combat-cluster {
  display: none !important;
}
#nto-minigame .mg-topmenu {
  display: none;
}
#nto-minigame.is-lobby .mg-topmenu {
  display: flex;
}
#nto-minigame .mg-topmenu-btn-profile {
  color: rgba(253, 230, 138, 0.9);
}
#nto-minigame .mg-topmenu-btn-profile:hover {
  color: #fde68a;
}
#nto-minigame .mg-topmenu-bar {
  gap: 0.1rem;
}
#nto-minigame .mg-topmenu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 0.85rem;
  padding: 0.4rem 0.55rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  transition: background 0.15s, color 0.15s;
}
#nto-minigame .mg-topmenu-btn svg {
  flex-shrink: 0;
  opacity: 0.92;
}
#nto-minigame .mg-topmenu-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
#nto-minigame .mg-topmenu-btn span {
  display: none;
}
@media (min-width: 640px) {
  #nto-minigame .mg-topmenu-btn span {
    display: inline;
  }
}
/* Os ÍCONES do menu são spans (`.mg-arts-gem` / `.mg-casino-coin`): a regra
   acima escondia o rótulo e levava o ícone junto — e no desktop `inline`
   ignora width/height, então o ícone também não aparecia. Ícone = inline-block
   (com especificidade maior, vence as duas regras). */
#nto-minigame .mg-topmenu-btn .mg-arts-gem,
#nto-minigame .mg-topmenu-btn .mg-casino-coin,
#nto-minigame .mg-topmenu-btn .mg-pass-badge,
#nto-minigame .mg-topmenu-btn .mg-gold-coin {
  display: inline-block;
}
#nto-minigame .mg-rank-tab {
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.3rem 0.55rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
#nto-minigame .mg-rank-tab:hover {
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}
#nto-minigame .mg-rank-tab.is-active {
  background: rgba(201, 162, 39, 0.14);
  border-color: rgba(201, 162, 39, 0.4);
  color: #fbbf24;
}
#nto-minigame [data-mg-backpack]:not(.hidden),
#nto-minigame [data-mg-ranking]:not(.hidden),
#nto-minigame [data-mg-admin]:not(.hidden),
#nto-minigame [data-mg-weapon-shop]:not(.hidden) {
  display: flex !important;
}
#nto-minigame [data-mg-profile]:not(.hidden),
#nto-minigame [data-mg-path]:not(.hidden),
#nto-minigame [data-mg-mode-modal]:not(.hidden) {
  display: flex !important;
}
#nto-minigame.is-mobile-playing .mg-hud-player,
#nto-minigame.is-compact-mobile .mg-hud-player,
#nto-minigame.is-mobile-ui .mg-hud-player {
  max-width: min(56vw, 13.5rem) !important;
  padding: 0.32rem 0.42rem 0.34rem 0.3rem !important;
  gap: 0.4rem !important;
}
#nto-minigame.is-mobile-playing .mg-hud-player-face,
#nto-minigame.is-compact-mobile .mg-hud-player-face,
#nto-minigame.is-mobile-ui .mg-hud-player-face {
  width: 2.15rem !important;
  height: 2.15rem !important;
}
#nto-minigame.is-mobile-playing .mg-hud-name,
#nto-minigame.is-compact-mobile .mg-hud-name,
#nto-minigame.is-mobile-ui .mg-hud-name {
  font-size: 10px !important;
}
#nto-minigame.is-mobile-playing .mg-hud-combat,
#nto-minigame.is-compact-mobile .mg-hud-combat:not([style*="display: none"]) {
  gap: 0.18rem !important;
}
#nto-minigame.is-mobile-playing .mg-hud-combat .h-1\.5 {
  height: 0.28rem !important;
}
#nto-minigame.is-mobile-playing .mg-hud-combat .h-1 {
  height: 0.2rem !important;
}
#nto-minigame.is-lobby .mg-hud-combat {
  display: none !important;
}
#nto-minigame.is-lobby [data-mg-hud] .mg-hud-stats {
  display: none !important;
}
#nto-minigame.is-lobby [data-mg-wave-label]::before {
  content: none;
}
#nto-minigame.is-lobby [data-mg-interact-btn]:not(.hidden) {
  display: none !important;
}
#nto-minigame [data-mg-npc-dialog]:not(.hidden) {
  display: flex !important;
}
#nto-minigame.is-focus-mode [data-mg-stage],
#nto-minigame.is-mobile-playing [data-mg-stage] {
  width: 100vw !important;
  height: calc(var(--mg-vh, 1vh) * 100) !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
#nto-minigame.is-focus-mode [data-mg-stage] > .relative,
#nto-minigame.is-mobile-playing [data-mg-stage] > .relative {
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
#nto-minigame.is-focus-mode [data-mg-canvas-wrap],
#nto-minigame.is-mobile-playing [data-mg-canvas-wrap] {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #050506 !important;
}
#nto-minigame.is-focus-mode #mg-canvas,
#nto-minigame.is-mobile-playing #mg-canvas {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  /* contain evita esticar e criar ?quadrados?; o JS j? ajusta aspect do buffer */
  object-fit: contain;
  object-position: center center;
}
#nto-minigame #mg-canvas.mg-canvas-pixel {
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;
}
#nto-minigame #mg-canvas,
#nto-minigame #mg-canvas.mg-canvas-smooth {
  image-rendering: auto !important;
  -ms-interpolation-mode: bicubic;
}

/* ?? Loading (background do site + progresso de gr?ficos) ?? */
#nto-minigame .mg-loading {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  overflow: hidden;
  border-radius: inherit;
  isolation: isolate;
}
#nto-minigame .mg-loading.is-visible {
  opacity: 1;
  pointer-events: auto;
}
#nto-minigame .mg-loading[hidden] {
  display: none !important;
}
#nto-minigame .mg-loading-bg {
  position: absolute;
  inset: -2%;
  background: url('../img/background.png') center / cover no-repeat;
  background-color: #0a0a0a;
  transform-origin: center center;
  filter: saturate(0.92) brightness(0.72);
  animation: mg-load-ken 18s ease-in-out infinite alternate;
  will-change: transform;
}
#nto-minigame .mg-loading-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(220, 38, 38, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0.78) 55%, rgba(8, 8, 9, 0.92) 100%);
}
#nto-minigame .mg-loading-card {
  position: relative;
  z-index: 1;
  width: min(22rem, calc(100% - 2rem));
  padding: 1.35rem 1.4rem 1.25rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 12, 14, 0.72);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  text-align: center;
}
#nto-minigame .mg-loading-mark {
  position: relative;
  width: 4.25rem;
  height: 4.25rem;
  margin: 0 auto 0.85rem;
}
#nto-minigame .mg-loading-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}
#nto-minigame .mg-loading-ring {
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid transparent;
  border-top-color: rgba(220, 38, 38, 0.85);
  border-right-color: rgba(255, 255, 255, 0.12);
  animation: mg-load-spin 0.9s linear infinite;
}
#nto-minigame .mg-loading-title {
  margin: 0.35rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #f5f5f5;
  letter-spacing: 0.02em;
}
#nto-minigame .mg-loading-bar {
  margin-top: 0.95rem;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
#nto-minigame .mg-loading-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #9f1239, #dc2626 45%, #fb7185);
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.35);
  transition: width 0.18s ease-out;
}
#nto-minigame .mg-loading-pct {
  margin: 0.55rem 0 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.45);
}
@keyframes mg-load-spin {
  to { transform: rotate(360deg); }
}
@keyframes mg-load-ken {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to { transform: scale(1.1) translate3d(-1%, 0, 0); }
}
@media (max-width: 1024px), (pointer: coarse) {
  #nto-minigame [data-mg-stage],
  #nto-minigame [data-mg-stage] > .relative {
    overflow: hidden !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-shell {
    min-height: 100%;
    overflow-y: auto;
  }
  #nto-minigame [data-mg-hub] .mg-hub-featured {
    padding: 1rem !important;
  }
  #nto-minigame [data-mg-hub] h2 {
    font-size: clamp(1.4rem, 5.5vw, 2rem) !important;
  }
  #nto-minigame [data-mg-hub] .mg-hub-actions {
    position: relative;
    z-index: 6;
    background: #0a0a0c;
  }
  #nto-minigame [data-mg-hub] .mg-hub-actions [data-mg-start] {
    width: 100%;
  }
  #nto-minigame [data-mg-maps] .mg-panel {
    padding: 0.35rem !important;
    gap: 0.55rem !important;
    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;
    height: 100%;
  }
  #nto-minigame [data-mg-select] .mg-select-shell {
    background: transparent !important;
    border: 0 !important;
    height: 100%;
  }
  #nto-minigame [data-mg-select] {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }
  #nto-minigame [data-mg-maps] .mb-6,
  #nto-minigame [data-mg-select] .mb-4 {
    margin-bottom: 0.35rem !important;
  }
  #nto-minigame [data-mg-maps] h2,
  #nto-minigame [data-mg-select] h2 {
    font-size: 2rem !important;
  }
  #nto-minigame [data-mg-maps] p.text-sm,
  #nto-minigame [data-mg-select] p.text-sm {
    font-size: 0.9rem !important;
  }
  #nto-minigame [data-mg-maplist] {
    gap: 0.4rem !important;
  }
  #nto-minigame [data-mg-maplist] .mg-arena-card-media {
    height: 7.5rem !important;
  }
  #nto-minigame [data-mg-maplist] .mg-arena-card-body {
    padding: 0.55rem 0.65rem 0.7rem !important;
    gap: 0.25rem !important;
  }
  #nto-minigame [data-mg-maplist] .mg-arena-card-name {
    font-size: 0.95rem !important;
  }
  #nto-minigame [data-mg-maplist] .mg-arena-card-mobs {
    display: none !important;
  }
  #nto-minigame [data-mg-select] .mg-select-shell {
    display: grid !important;
    grid-template-rows: minmax(0, 48%) minmax(0, 52%);
    overflow: hidden !important;
    height: 100% !important;
    gap: 0.45rem !important;
    padding: 0.55rem !important;
  }
  #nto-minigame [data-mg-select] .mg-select-shell > :first-child {
    min-height: 0;
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
  }
  #nto-minigame [data-mg-select] .mg-char-card {
    min-width: 8.4rem;
    max-width: 8.4rem;
    flex: 0 0 auto;
  }
  #nto-minigame [data-mg-select] .mg-char-card .mg-char-art {
    height: 4.6rem !important;
  }
  #nto-minigame [data-mg-select] .mg-char-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    min-height: 8.6rem !important;
    max-height: 8.6rem !important;
    padding-bottom: 0.15rem;
    -webkit-overflow-scrolling: touch;
  }
  #nto-minigame [data-mg-select] .mg-loadout {
    width: 100% !important;
    height: 100% !important;
    max-height: none;
    min-height: 0;
    overflow: hidden;
  }
  #nto-minigame [data-mg-select] .mg-loadout-hero {
    min-height: 5.5rem !important;
  }
  #nto-minigame [data-mg-select] .mg-loadout-hero img {
    max-height: none !important;
    height: auto !important;
  }
  #nto-minigame [data-mg-select] .mg-loadout-body {
    padding: 0.65rem 0.75rem 0.75rem !important;
    gap: 0.55rem !important;
    overflow-y: auto;
  }
  #nto-minigame [data-mg-select] .mg-loadout-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  #nto-minigame [data-mg-select] .mg-loadout-body .min-h-0.flex-1 {
    max-height: 4.6rem;
  }
  #nto-minigame [data-mg-select] [data-mg-playchar] {
    position: sticky;
    bottom: 0;
    z-index: 4;
    width: 100% !important;
  }
  #nto-minigame [data-mg-select] .mb-3,
  #nto-minigame [data-mg-select] .mb-4 {
    margin-bottom: 0.35rem !important;
  }
  #nto-minigame [data-mg-hud] .pointer-events-none.absolute.inset-x-0.top-0 {
    padding: calc(0.35rem + env(safe-area-inset-top)) 0.45rem 0.25rem !important;
  }
  #nto-minigame [data-mg-hud] [data-mg-joy] {
    width: 8.55rem !important;
    height: 8.55rem !important;
  }
  #nto-minigame [data-mg-hud] [data-mg-joy-knob] {
    width: 3.45rem !important;
    height: 3.45rem !important;
  }
  #nto-minigame [data-mg-hud] .mg-skill-btn {
    transform: none !important;
  }
  #nto-minigame [data-mg-hud] .mg-hud-moba-pad .mg-skill-btn:active {
    transform: scale(0.94) !important;
  }
  #nto-minigame [data-mg-hud] .mg-skill-name {
    display: none;
  }
  #nto-minigame [data-mg-hud] .mg-hud-dock,
  #nto-minigame [data-mg-hud] .pointer-events-none.absolute.inset-x-0.bottom-0 {
    padding: 0.45rem 0.65rem calc(0.7rem + env(safe-area-inset-bottom)) !important;
  }
  #nto-minigame [data-mg-hud] .mg-hud-player {
    padding: 0.32rem 0.5rem 0.35rem 0.32rem !important;
    max-width: min(52vw, 13rem);
  }
  #nto-minigame [data-mg-hud] .mg-hud-track.is-hp { height: 0.42rem; }
  #nto-minigame [data-mg-hud] .mg-hud-track.is-chk { height: 0.32rem; }
  #nto-minigame [data-mg-hud] .mg-hud-track.is-sub { height: 0.22rem; }
  #nto-minigame [data-mg-hud] .mg-hud-bar-val {
    font-size: 8px;
  }
  #nto-minigame [data-mg-hud] .mg-hud-stats {
    padding: 0.22rem 0.45rem !important;
    min-height: 2.1rem;
  }
  #nto-minigame [data-mg-hud] .mg-hud-iconbtn,
  #nto-minigame [data-mg-hud] .mg-online-pill {
    width: 2.1rem;
    height: 2.1rem;
  }
  #nto-minigame [data-mg-hud] .mg-online-pill {
    width: auto;
    padding: 0 0.55rem;
  }
}
#nto-minigame .mg-mode-card {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  padding: 0.5rem 0.6rem;
  text-align: left;
  border-radius: 0.3rem;
  transition: border-color 0.15s, background 0.15s;
}
#nto-minigame .mg-mode-card:hover {
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.03);
}
#nto-minigame .mg-mode-card.is-active {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.06);
}
#nto-minigame .mg-mode-card-name {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
}
#nto-minigame .mg-mode-card.is-active .mg-mode-card-name {
  color: #fff;
}
#nto-minigame .mg-mode-card-desc {
  font-size: 9px;
  color: rgba(255,255,255,0.28);
}
#nto-minigame .mg-mode-card.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}
#nto-minigame .mg-mode-ninja-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
#nto-minigame .mg-mode-char-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.15rem 0.05rem 0.35rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#nto-minigame .mg-mode-char-strip::-webkit-scrollbar {
  display: none;
}
#nto-minigame .mg-mode-char-strip .mg-char-card {
  flex: 0 0 auto;
  width: 6.5rem;
  min-width: 6.5rem;
}
#nto-minigame .mg-mode-char-strip .mg-char-card .mg-char-art {
  height: 4.5rem;
  padding: 0.35rem;
}
#nto-minigame .mg-mode-char-strip .mg-char-card.is-selected {
  border-color: rgba(248, 113, 113, 0.65);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.25);
}
#nto-minigame .mg-hub-body {
  padding: 1rem 1.15rem 0.65rem;
  gap: 0.75rem;
}
@media (min-width: 640px) {
  #nto-minigame .mg-hub-body {
    padding: 1.25rem 1.5rem 0.75rem;
  }
}
@media (min-width: 1024px) {
  #nto-minigame .mg-hub-body {
    padding: 1.35rem 1.75rem 0.85rem;
  }
}
#nto-minigame .mg-hub-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
#nto-minigame .mg-hub-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(248, 113, 113, 0.75);
}
#nto-minigame .mg-hub-title {
  margin-top: 0.25rem;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-transform: none;
  color: #f8fafc;
  line-height: 1.15;
}
#nto-minigame .mg-hub-desc {
  max-width: 11rem;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.38);
  text-align: right;
}
#nto-minigame .mg-hub-enter {
  display: grid;
  gap: 0.75rem;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
@media (min-width: 900px) {
  #nto-minigame .mg-hub-enter {
    grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.95fr);
    align-items: stretch;
  }
}
#nto-minigame .mg-hub-hero {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: center;
  justify-items: center;
  min-height: 0;
  padding: 1.1rem 1rem;
  overflow: hidden;
  border-radius: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0a0a0c;
  box-shadow: none;
  animation: mg-hub-fade 0.5s ease-out both;
}
#nto-minigame .mg-hub-hero::before,
#nto-minigame .mg-hub-hero::after {
  content: none !important;
  display: none !important;
}
@media (min-width: 720px) {
  #nto-minigame .mg-hub-hero {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: stretch;
    padding: 1.25rem 1.35rem;
    gap: 1.15rem;
  }
}
#nto-minigame .mg-hub-stage-glow {
  display: none;
}
#nto-minigame .mg-hub-hero-art {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  min-height: 8.5rem;
  width: 100%;
  max-width: 16rem;
}
#nto-minigame .mg-hub-dossier {
  display: grid;
  gap: 0.55rem;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.1rem;
  scrollbar-width: thin;
  animation: mg-hub-fade 0.5s 0.06s ease-out both;
}
@media (min-width: 640px) {
  #nto-minigame .mg-hub-dossier {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
  }
  #nto-minigame .mg-hub-dossier .mg-hub-panel.is-attrs {
    grid-column: 1 / -1;
  }
}
#nto-minigame .mg-hub-dossier.is-ghost {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
#nto-minigame .mg-hub-chip.is-arts b {
  color: #7dd3fc;
}
#nto-minigame .mg-hub-chip .mg-arts-gem,
#nto-minigame .mg-hub-chip .mg-gold-coin {
  width: 0.65rem;
  height: 0.65rem;
  flex: 0 0 auto;
}
#nto-minigame .mg-hub-eq {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.35rem;
}
#nto-minigame .mg-hub-eq-slot {
  aspect-ratio: 1;
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4rem;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.35);
  overflow: hidden;
}
#nto-minigame .mg-hub-eq-slot.is-empty {
  opacity: 0.35;
  border-style: dashed;
}
#nto-minigame .mg-hub-eq-slot img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-hub-eq-empty {
  margin: 0.35rem 0 0;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}
#nto-minigame .mg-hub-skills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}
@keyframes mg-hub-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
#nto-minigame .mg-hub-stage-glow {
  display: none;
}
@keyframes mg-hub-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}
#nto-minigame .mg-hub-hero-art {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  min-height: 9.5rem;
  width: 100%;
  max-width: 16rem;
}
#nto-minigame .mg-hub-hero-art .mg-outfit-hero {
  width: 7.5rem;
  height: 9rem;
  animation: mg-hub-rise 0.55s 0.05s ease-out both;
}
@media (min-width: 720px) {
  #nto-minigame .mg-hub-hero-art .mg-outfit-hero {
    width: 9rem;
    height: 11rem;
  }
}
@keyframes mg-hub-rise {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
#nto-minigame .mg-hub-hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  text-align: center;
  min-width: 0;
  animation: mg-hub-fade 0.55s 0.1s ease-out both;
}
@media (min-width: 720px) {
  #nto-minigame .mg-hub-hero-copy {
    align-items: flex-start;
    text-align: left;
    justify-content: center;
  }
}
#nto-minigame .mg-hub-name {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.05;
}
#nto-minigame .mg-hub-rank {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(252, 211, 77, 0.9);
}
#nto-minigame .mg-hub-rank-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.75));
}
#nto-minigame .mg-hub-rank [data-mg-hub-lp] {
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-hub-kit {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.42);
}
#nto-minigame .mg-hub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
  justify-content: center;
}
@media (min-width: 720px) {
  #nto-minigame .mg-hub-chips {
    justify-content: flex-start;
  }
}
#nto-minigame .mg-hub-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.7rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.35);
}
#nto-minigame .mg-hub-chip span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-hub-chip b {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-hub-chip.is-gold b {
  color: #fbbf24;
}
#nto-minigame .mg-hub-chip.is-arts {
  border-color: rgba(56, 189, 248, 0.28);
  background: rgba(8, 47, 73, 0.35);
}
#nto-minigame .mg-hub-chip.is-arts b {
  color: #7dd3fc;
}
#nto-minigame .mg-hub-chip .mg-gold-coin,
#nto-minigame .mg-hub-chip .mg-arts-gem {
  width: 0.65rem;
  height: 0.65rem;
}
#nto-minigame .mg-hub-combat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  width: 100%;
  max-width: 22rem;
  margin-top: 0.65rem;
}
@media (min-width: 520px) {
  #nto-minigame .mg-hub-combat {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: none;
  }
}
#nto-minigame .mg-hub-mini {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem 0.45rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
#nto-minigame .mg-hub-mini span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
#nto-minigame .mg-hub-mini b {
  font-size: 13px;
  font-weight: 800;
  color: #f1f5f9;
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-hub-dossier.is-ghost {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  pointer-events: none;
}
#nto-minigame .mg-hub-rail {
  display: none !important;
}
#nto-minigame .mg-hub-switcher {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.45rem 0.35rem 0.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
#nto-minigame .mg-hub-switcher.is-solo,
#nto-minigame .mg-hub-switcher.is-hidden {
  display: none;
}
#nto-minigame .mg-hub-switcher-label {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}
#nto-minigame .mg-hub-rail-head {
  display: none;
}
#nto-minigame .mg-hub-chars {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.15rem 0.1rem 0.25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#nto-minigame .mg-hub-chars::-webkit-scrollbar {
  display: none;
}
#nto-minigame .mg-hub-chars-empty {
  margin: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}
#nto-minigame .mg-hub-char {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  width: 4.1rem;
  padding: 0.35rem 0.3rem 0.4rem;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0.65rem;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
#nto-minigame .mg-hub-char:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}
#nto-minigame .mg-hub-char.is-selected {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(220, 38, 38, 0.12);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.12);
}
#nto-minigame .mg-hub-char .mg-outfit-rail {
  width: 3rem;
  height: 3.45rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #09090b;
  transition: border-color 0.15s;
}
#nto-minigame .mg-hub-char:hover .mg-outfit-rail,
#nto-minigame .mg-hub-char.is-selected .mg-outfit-rail {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
#nto-minigame .mg-hub-char-badge {
  position: absolute;
  top: 0.28rem;
  right: 0.28rem;
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
  pointer-events: none;
}
#nto-minigame .mg-hub-char-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.72);
}
#nto-minigame .mg-hub-char.is-selected .mg-hub-char-name {
  color: #fff;
}
#nto-minigame .mg-hub-char-meta {
  display: none !important;
}
#nto-minigame .mg-hub-actions {
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #080809;
  padding: 0.9rem 1.15rem calc(0.9rem + env(safe-area-inset-bottom));
}
@media (min-width: 640px) {
  #nto-minigame .mg-hub-actions {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
#nto-minigame .mg-hub-actions-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  align-items: center;
}
@media (min-width: 720px) {
  #nto-minigame .mg-hub-actions-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
  }
}
#nto-minigame .mg-hub-actions-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}
#nto-minigame .mg-hub-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 3rem;
  min-width: min(100%, 14rem);
  flex: 1 1 14rem;
  max-width: 22rem;
  padding: 0.75rem 1.4rem;
  border: 0;
  border-radius: 0.7rem;
  background: #dc2626;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
#nto-minigame .mg-hub-cta:hover {
  background: #ef4444;
  filter: none;
  transform: translateY(-1px);
}
#nto-minigame .mg-hub-cta span {
  opacity: 0.85;
  transition: transform 0.15s;
}
#nto-minigame .mg-hub-cta:hover span {
  transform: translateX(2px);
}
#nto-minigame .mg-hub-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
#nto-minigame .mg-hub-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: 0.45rem;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.42);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
#nto-minigame .mg-hub-ghost:hover {
  color: rgba(255,255,255,0.88);
  border-color: transparent;
  background: rgba(255,255,255,0.04);
}
#nto-minigame .mg-hub-sync {
  margin: 0;
  font-size: 11px;
  color: rgba(255,255,255,0.28);
  text-align: center;
  white-space: nowrap;
}
@media (min-width: 720px) {
  #nto-minigame .mg-hub-sync {
    text-align: right;
  }
}
#nto-minigame .mg-hub-showcase {
  display: none !important;
}
#nto-minigame .mg-outfit-hero {
  width: 7.5rem;
  height: 9rem;
  padding: 0.35rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.4)),
    #09090b;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
@media (min-width: 720px) {
  #nto-minigame .mg-hub-hero-art .mg-outfit-hero,
  #nto-minigame .mg-outfit-hero {
    width: 9rem;
    height: 11rem;
  }
}
#nto-minigame .mg-hub-dossier:not(.is-ghost) {
  display: grid;
  gap: 0.45rem;
  min-height: 0;
  overflow-y: auto;
}
#nto-minigame .mg-hub-panel {
  padding: 0.55rem 0.6rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
}
#nto-minigame .mg-hub-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
#nto-minigame .mg-hub-panel-head p {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
#nto-minigame .mg-hub-panel-head span {
  font-size: 10px;
  font-weight: 700;
  color: rgba(251, 191, 36, 0.9);
}
#nto-minigame .mg-hub-combat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.3rem;
}
#nto-minigame .mg-hub-hero .mg-hub-combat {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
  width: 100%;
  max-width: 22rem;
  margin-top: 0.65rem;
}
@media (min-width: 520px) {
  #nto-minigame .mg-hub-hero .mg-hub-combat {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: none;
  }
}
#nto-minigame .mg-hub-attrs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.3rem;
}
#nto-minigame .mg-hub-attr {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.35rem 0.2rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.22);
}
#nto-minigame .mg-hub-attr span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-hub-attr b {
  margin-top: 0.1rem;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
#nto-minigame .mg-hub-skills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
}
#nto-minigame .mg-hub-skill {
  padding: 0.35rem 0.4rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
}
#nto-minigame .mg-hub-skill-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
}
#nto-minigame .mg-hub-skill-top span {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
}
#nto-minigame .mg-hub-skill-top b {
  font-size: 12px;
  font-weight: 800;
  color: #fff;
}
#nto-minigame .mg-hub-skill-bar {
  margin-top: 0.3rem;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
#nto-minigame .mg-hub-skill-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c9a227, #fbbf24);
}
#nto-minigame .mg-hub-eq-empty {
  margin-top: 0.35rem;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
}
#nto-minigame .mg-hub-rail {
  display: none !important;
}
#nto-minigame .mg-hub-hero .mg-hub-name {
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nto-minigame .mg-hub-hero .mg-hub-rank {
  margin-top: 0;
  letter-spacing: 0.04em;
}
#nto-minigame .mg-hub-hero .mg-hub-chips {
  justify-content: center;
  max-width: none;
}
@media (min-width: 720px) {
  #nto-minigame .mg-hub-hero .mg-hub-chips {
    justify-content: flex-start;
  }
}
#nto-minigame .mg-hub-hero .mg-hub-chip {
  flex-direction: row;
  min-width: 0;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
#nto-minigame .mg-hub-rail-head {
  display: none !important;
}
#nto-minigame .mg-hub-switcher .mg-hub-chars,
#nto-minigame .mg-hub-chars {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.45rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.15rem 0.1rem 0.25rem;
  margin: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#nto-minigame .mg-hub-chars::-webkit-scrollbar {
  display: none;
}
#nto-minigame .mg-hub-char {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
  flex: 0 0 auto;
  width: 4.1rem;
  padding: 0.35rem 0.3rem 0.4rem;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0.65rem;
  text-align: center;
  box-sizing: border-box;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
#nto-minigame .mg-hub-char:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-2px);
  box-shadow: none;
}
#nto-minigame .mg-hub-char.is-selected {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(220, 38, 38, 0.12);
  box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.12);
}
#nto-minigame .mg-hub-char .mg-outfit-rail,
#nto-minigame .mg-outfit-rail {
  width: 3rem;
  height: 3.45rem;
  border-radius: 0.45rem;
}
#nto-minigame .mg-outfit {
  position: relative;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 0.35rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: #09090b;
  padding: 0.2rem;
  box-sizing: border-box;
}
#nto-minigame .mg-outfit-lg {
  width: 4.25rem;
  height: 4.25rem;
  padding: 0.25rem;
}
#nto-minigame .mg-outfit img {
  position: relative;
  display: block;
  left: auto;
  bottom: auto;
  transform: none;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  image-rendering: auto;
  pointer-events: none;
}
#nto-minigame .mg-outfit-lg img,
#nto-minigame .mg-outfit-hero img,
#nto-minigame .mg-outfit-rail img {
  max-width: 100%;
  max-height: 100%;
}
#nto-minigame .mg-hub-char-meta {
  display: none !important;
}
#nto-minigame .mg-hub-char .mg-outfit-rail {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #09090b;
}
#nto-minigame .mg-hub-char:hover .mg-outfit-rail,
#nto-minigame .mg-hub-char.is-selected .mg-outfit-rail {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: none;
}
#nto-minigame .mg-hub-char-badge {
  position: absolute;
  top: 0.28rem;
  right: 0.28rem;
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.85));
  pointer-events: none;
}
#nto-minigame .mg-hub-char-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.72);
}
#nto-minigame .mg-hub-char.is-selected .mg-hub-char-name {
  color: #fff;
}
#nto-minigame .mg-cfg-panel {
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
#nto-minigame .mg-cfg-hero {
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(201, 162, 39, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}
#nto-minigame .mg-cfg-cols {
  display: grid;
  gap: 1.1rem;
}
@media (min-width: 720px) {
  #nto-minigame .mg-cfg-cols {
    grid-template-columns: minmax(13rem, 0.9fr) minmax(0, 1.4fr);
    gap: 1.25rem;
    align-items: start;
  }
}
#nto-minigame .mg-cfg-auto-grid {
  display: grid;
  gap: 0.55rem;
}
@media (min-width: 720px) {
  #nto-minigame .mg-cfg-auto-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
#nto-minigame .mg-cfg-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
#nto-minigame .mg-cfg-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  text-align: left;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#nto-minigame .mg-cfg-row:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.045);
}
#nto-minigame .mg-cfg-row-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}
#nto-minigame .mg-cfg-row-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.38);
}
#nto-minigame .mg-cfg-pill {
  flex-shrink: 0;
  min-width: 2.6rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(134, 239, 172, 0.35);
  background: rgba(34, 197, 94, 0.12);
  color: #86efac;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
}
#nto-minigame .mg-cfg-pill.is-off {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.45);
}
#nto-minigame .mg-cfg-pill.is-ghost {
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
}
#nto-minigame .mg-cfg-auto {
  padding: 0.65rem 0.7rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.18));
  min-width: 0;
}
#nto-minigame .mg-cfg-auto-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
#nto-minigame .mg-cfg-switch {
  position: relative;
  width: 2.65rem;
  height: 1.45rem;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  transition: background 0.15s ease, border-color 0.15s ease;
}
#nto-minigame .mg-cfg-switch[aria-pressed="true"] {
  background: rgba(201, 162, 39, 0.35);
  border-color: rgba(251, 191, 36, 0.55);
}
#nto-minigame .mg-cfg-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: #f8fafc;
  transition: transform 0.15s ease;
}
#nto-minigame .mg-cfg-switch[aria-pressed="true"] .mg-cfg-switch-knob {
  transform: translateX(1.15rem);
  background: #fbbf24;
}
#nto-minigame .mg-cfg-slider {
  display: block;
  margin-top: 0.55rem;
}
#nto-minigame .mg-cfg-slider span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}
#nto-minigame .mg-cfg-slider b {
  color: #fbbf24;
}
#nto-minigame .mg-cfg-slider input[type="range"] {
  width: 100%;
  accent-color: #c9a227;
  cursor: pointer;
}
#nto-minigame .mg-cfg-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.85rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
#nto-minigame .mg-cfg-action:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
#nto-minigame .mg-cfg-help {
  padding: 0.75rem 0.85rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.25);
}
#nto-minigame .mg-hub-stat {
  padding: 0.4rem 0.45rem;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 0.3rem;
  background: rgba(255,255,255,0.02);
}
#nto-minigame .mg-hub-mini {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0.35rem 0.45rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(0, 0, 0, 0.2);
}
#nto-minigame .mg-hub-mini span {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
#nto-minigame .mg-hub-mini b {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}
#nto-minigame .mg-hub-eq {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.3rem;
}
#nto-minigame .mg-hub-eq-slot {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
#nto-minigame .mg-hub-eq-slot.is-empty {
  opacity: 0.35;
}
#nto-minigame .mg-hub-eq-slot img {
  width: 72%;
  height: 72%;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-rankmap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#nto-minigame .mg-path-sheet {
  background:
    radial-gradient(90% 50% at 50% -10%, rgba(251, 191, 36, 0.1), transparent 55%),
    #0c0c0e;
}
#nto-minigame .mg-path-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 !important;
}
#nto-minigame .mg-path-block {
  padding: 1rem 1.1rem 1.15rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
#nto-minigame .mg-path-block--rank {
  padding-top: 0.85rem;
}
#nto-minigame .mg-path-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}
#nto-minigame .mg-path-block-title {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
}
#nto-minigame .mg-path-block-chip {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-path-block-chip.is-muted {
  color: rgba(255,255,255,0.55);
  font-weight: 600;
}
#nto-minigame .mg-path-block-note {
  margin: 0.55rem 0 0;
  font-size: 12px;
  color: rgba(255,255,255,0.62);
}
#nto-minigame .mg-path-season-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
#nto-minigame .mg-path-season-bar > div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #d97706, #fbbf24, #fde68a);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
#nto-minigame .mg-path-claim {
  margin-top: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.28), rgba(251, 191, 36, 0.12));
  color: #fde68a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: mgPathClaimPulse 1.8s ease-in-out infinite;
}
#nto-minigame .mg-path-claim:hover {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.4), rgba(251, 191, 36, 0.18));
  color: #fff;
}
#nto-minigame .mg-path-week {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
#nto-minigame .mg-path-week-item {
  padding: 0.65rem 0.75rem;
  border-left: 2px solid rgba(251, 191, 36, 0.55);
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.1), rgba(255,255,255,0.03));
}
#nto-minigame .mg-path-week-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
}
#nto-minigame .mg-path-week-desc {
  margin: 0.2rem 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255,255,255,0.58);
}
#nto-minigame .mg-kage-hero {
  position: relative;
  overflow: hidden;
  padding: 1rem 1rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--rank-color, #fbbf24) 45%, rgba(255,255,255,0.12));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--rank-color, #fbbf24) 16%, transparent), transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.28));
  animation: mgPathHeroIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#nto-minigame .mg-kage-hero-glow {
  position: absolute;
  inset: -40% -20% auto auto;
  width: 70%;
  height: 120%;
  background: radial-gradient(circle, color-mix(in srgb, var(--rank-color, #fbbf24) 35%, transparent), transparent 65%);
  pointer-events: none;
  opacity: 0.85;
  animation: mgPathGlow 3.2s ease-in-out infinite;
}
#nto-minigame .mg-kage-hero-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
}
#nto-minigame .mg-kage-badge {
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--rank-color, #fbbf24);
  background: color-mix(in srgb, var(--rank-color, #fbbf24) 18%, #0a0a0c);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--rank-color, #fbbf24) 14%, transparent),
    0 0 22px color-mix(in srgb, var(--rank-color, #fbbf24) 35%, transparent);
  animation: mgPathBadgePulse 2.4s ease-in-out infinite;
}
#nto-minigame .mg-kage-badge span {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--rank-color, #fbbf24);
  line-height: 1;
}
#nto-minigame .mg-kage-hero-copy { min-width: 0; }
#nto-minigame .mg-kage-hero-kicker {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
#nto-minigame .mg-kage-hero-name {
  margin: 0.12rem 0 0;
  font-size: clamp(1.45rem, 4vw, 1.85rem);
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--rank-color, #fbbf24);
  line-height: 1;
  text-shadow: 0 0 24px color-mix(in srgb, var(--rank-color, #fbbf24) 45%, transparent);
}
#nto-minigame .mg-kage-hero-perk {
  margin: 0.3rem 0 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.72);
}
#nto-minigame .mg-kage-hero-lp { text-align: right; flex-shrink: 0; }
#nto-minigame .mg-kage-hero-lp b {
  display: block;
  font-size: 1.55rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1;
}
#nto-minigame .mg-kage-hero-lp span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
#nto-minigame .mg-kage-meter {
  position: relative;
  z-index: 1;
  margin-top: 0.9rem;
}
#nto-minigame .mg-kage-meter-labels {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
#nto-minigame .mg-kage-hero-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
}
#nto-minigame .mg-kage-hero-bar > i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent) 0 0 / 40% 100% no-repeat,
    linear-gradient(90deg, color-mix(in srgb, var(--rank-color, #fbbf24) 55%, #000), var(--rank-color, #fbbf24), #fff7d6);
  box-shadow: 0 0 14px color-mix(in srgb, var(--rank-color, #fbbf24) 55%, transparent);
  animation:
    mgPathBarFill 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards,
    mgPathBarShine 1.8s linear 1.1s infinite;
}
#nto-minigame .mg-kage-goal {
  margin: 0.45rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.82);
}
#nto-minigame .mg-kage-goal-left {
  color: #fff;
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-kage-goal-arrow { color: rgba(255,255,255,0.35); }
#nto-minigame .mg-kage-goal-next {
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#nto-minigame .mg-kage-hero-tip {
  position: relative;
  z-index: 1;
  margin: 0.55rem 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255,255,255,0.55);
}
#nto-minigame .mg-rank-track {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
#nto-minigame .mg-rank-plate {
  display: grid;
  grid-template-columns: 2.35rem 1fr;
  gap: 0.65rem;
  align-items: stretch;
  padding: 0.55rem 0.65rem 0.55rem 0.45rem;
  border-left: 3px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  opacity: 0;
  transform: translateY(8px);
  animation: mgPathPlateIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) var(--stagger, 0ms) forwards;
}
#nto-minigame .mg-rank-plate.is-done {
  border-left-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.05);
}
#nto-minigame .mg-rank-plate.is-current {
  border-left-color: var(--rank-color, #fbbf24);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--rank-color, #fbbf24) 18%, transparent), rgba(255,255,255,0.04));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rank-color, #fbbf24) 28%, transparent);
}
#nto-minigame .mg-rank-plate.is-locked { filter: saturate(0.7); }
#nto-minigame .mg-rank-plate-mark {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-top: 0.1rem;
  border: 1px solid rgba(255,255,255,0.18);
  background: #0a0a0c;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.45);
}
#nto-minigame .mg-rank-plate.is-done .mg-rank-plate-mark {
  border-color: rgba(255,255,255,0.4);
  color: #fff;
  background: rgba(255,255,255,0.12);
}
#nto-minigame .mg-rank-plate.is-current .mg-rank-plate-mark {
  border-color: var(--rank-color, #fbbf24);
  color: var(--rank-color, #fbbf24);
  background: color-mix(in srgb, var(--rank-color, #fbbf24) 16%, #0a0a0c);
  box-shadow: 0 0 16px color-mix(in srgb, var(--rank-color, #fbbf24) 35%, transparent);
}
#nto-minigame .mg-rank-plate-body { min-width: 0; }
#nto-minigame .mg-rank-plate-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
#nto-minigame .mg-rank-name {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
#nto-minigame .mg-rank-plate.is-done .mg-rank-name,
#nto-minigame .mg-rank-plate.is-current .mg-rank-name { color: #fff; }
#nto-minigame .mg-rank-plate.is-current .mg-rank-name { color: var(--rank-color, #fbbf24); }
#nto-minigame .mg-rank-status {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
#nto-minigame .mg-rank-plate.is-current .mg-rank-status { color: var(--rank-color, #fbbf24); }
#nto-minigame .mg-rank-plate.is-done .mg-rank-status { color: rgba(255,255,255,0.55); }
#nto-minigame .mg-rank-lpband {
  margin: 0.15rem 0 0;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.42);
}
#nto-minigame .mg-rank-perks {
  margin: 0.2rem 0 0;
  font-size: 11px;
  color: rgba(255,255,255,0.58);
}
#nto-minigame .mg-rank-plate.is-current .mg-rank-perks {
  color: color-mix(in srgb, var(--rank-color, #fbbf24) 75%, #fff);
  font-weight: 600;
}
#nto-minigame .mg-rank-progress {
  margin-top: 0.45rem;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
#nto-minigame .mg-rank-progress > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--rank-color, #fbbf24);
  animation: mgPathMiniFill 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}
#nto-minigame .mg-rank-done-line,
#nto-minigame .mg-rank-lock-line {
  margin: 0.25rem 0 0;
  font-size: 10px;
  color: rgba(255,255,255,0.38);
}
#nto-minigame [data-mg-path] .mg-sheet-kicker.is-amber {
  color: rgba(251, 191, 36, 0.9);
}
#nto-minigame [data-mg-path] .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@keyframes mgPathHeroIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes mgPathPlateIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes mgPathBarFill {
  from { width: 0; }
  to { width: var(--hero-pct, 0%); }
}
@keyframes mgPathMiniFill {
  from { width: 0; }
  to { width: var(--p, 0%); }
}
@keyframes mgPathBarShine {
  0% { background-position: -40% 0, 0 0; }
  100% { background-position: 140% 0, 0 0; }
}
@keyframes mgPathBadgePulse {
  0%, 100% {
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--rank-color, #fbbf24) 14%, transparent),
      0 0 18px color-mix(in srgb, var(--rank-color, #fbbf24) 30%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 6px color-mix(in srgb, var(--rank-color, #fbbf24) 22%, transparent),
      0 0 28px color-mix(in srgb, var(--rank-color, #fbbf24) 45%, transparent);
  }
}
@keyframes mgPathGlow {
  0%, 100% { opacity: 0.55; transform: translate(0, 0); }
  50% { opacity: 0.9; transform: translate(-4%, 3%); }
}
@keyframes mgPathClaimPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
  50% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.12); }
}
@media (prefers-reduced-motion: reduce) {
  #nto-minigame .mg-kage-hero,
  #nto-minigame .mg-rank-plate,
  #nto-minigame .mg-kage-hero-bar > i,
  #nto-minigame .mg-rank-progress > span,
  #nto-minigame .mg-kage-badge,
  #nto-minigame .mg-kage-hero-glow,
  #nto-minigame .mg-path-claim {
    animation: none !important;
  }
  #nto-minigame .mg-kage-hero-bar > i { width: var(--hero-pct, 0%); }
  #nto-minigame .mg-rank-progress > span { width: var(--p, 0%); }
  #nto-minigame .mg-rank-plate { opacity: 1; transform: none; }
}

#nto-minigame .mg-shop-tab {
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 0.375rem 0.375rem 0 0;
  padding: 0.45rem 0.9rem;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  background: transparent;
}
#nto-minigame .mg-shop-tab.is-active {
  color: #fbbf24;
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
}
#nto-minigame .mg-shop-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  padding: 0.65rem 0.75rem;
  border-radius: 0.375rem;
}
#nto-minigame .mg-shop-item.is-equipped {
  border-color: rgba(52,211,153,0.45);
  background: rgba(16,185,129,0.08);
}
#nto-minigame .mg-shop-item img {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.25rem;
  padding: 0;
}
#nto-minigame .mg-shop-item-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
}
#nto-minigame .mg-shop-equip {
  border: 1px solid rgba(52,211,153,0.4);
  background: rgba(16,185,129,0.12);
  color: #6ee7b7;
  font-size: 10px;
  font-weight: 800;
  padding: 0.4rem 0.7rem;
  border-radius: 0.375rem;
}
#nto-minigame .mg-skill-potion {
  --skill-color: #34d399;
  border: 1px solid rgba(52,211,153,0.35);
  background: rgba(8,12,18,0.92);
  color: #a7f3d0;
  box-shadow: none;
  border-radius: 999px;
}
#nto-minigame .mg-skill-potion:hover {
  border-color: rgba(52,211,153,0.55);
  background: rgba(16,185,129,0.12);
}
#nto-minigame .mg-skill-chakra {
  --skill-color: #38bdf8;
  border: 1px solid rgba(56,189,248,0.4);
  background: rgba(8,12,18,0.92);
  color: #bae6fd;
  box-shadow: none;
  border-radius: 999px;
}
#nto-minigame .mg-skill-chakra:hover {
  border-color: rgba(56,189,248,0.6);
  background: rgba(14,165,233,0.12);
}
#nto-minigame .mg-skill-potion .mg-potion-icon,
#nto-minigame .mg-skill-chakra .mg-potion-icon {
  width: 1.45rem;
  height: 1.45rem;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 1;
}
#nto-minigame .mg-skill-potion.is-empty,
#nto-minigame .mg-skill-chakra.is-empty {
  opacity: 0.55;
  filter: grayscale(0.35);
}
#nto-minigame .mg-skill-potion.is-empty .mg-potion-icon,
#nto-minigame .mg-skill-chakra.is-empty .mg-potion-icon {
  opacity: 0.7;
}
#nto-minigame .mg-shop-item-info {
  min-width: 0;
  flex: 1;
}
#nto-minigame .mg-shop-item-name {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}
#nto-minigame .mg-shop-item-desc {
  margin-top: 0.1rem;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
}
#nto-minigame .mg-shop-item-owned {
  margin-top: 0.15rem;
  font-size: 10px;
  color: rgba(251,191,36,0.75);
}
#nto-minigame .mg-shop-buy {
  flex-shrink: 0;
  border: 1px solid rgba(251,191,36,0.35);
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
  font-size: 11px;
  font-weight: 800;
  padding: 0.5rem 0.85rem;
  border-radius: 0.375rem;
  transition: background 0.15s, opacity 0.15s;
}
#nto-minigame .mg-shop-buy:hover:not(:disabled) {
  background: rgba(251,191,36,0.22);
}
#nto-minigame .mg-shop-buy:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
#nto-minigame .mg-lowhp {
  z-index: 1;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(127,29,29,0.28) 78%, rgba(69,10,10,0.55) 100%);
  animation: mgLowHpPulse 1.1s ease-in-out infinite;
  pointer-events: none;
}
#nto-minigame .mg-hpbar.is-critical {
  background: linear-gradient(90deg, #7f1d1d, #ef4444 55%, #fca5a5) !important;
  box-shadow: 0 0 10px rgba(239,68,68,0.35);
}
@keyframes mgLowHpPulse {
  0%, 100% { opacity: 0.72; }
  50% { opacity: 1; }
}
#nto-minigame .mg-invbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  background:
    linear-gradient(180deg, rgba(22, 24, 30, 0.72), rgba(8, 10, 14, 0.88));
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#nto-minigame .mg-invbar:empty {
  display: none;
}
#nto-minigame .mg-inv-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.06), transparent 55%),
    rgba(0, 0, 0, 0.5);
  overflow: visible;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.12s;
}
#nto-minigame .mg-inv-slot.is-empty {
  opacity: 0.38;
}
#nto-minigame .mg-inv-slot:not(.is-empty):hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-1px);
}
#nto-minigame .mg-inv-slot.is-equipped {
  border-color: rgba(52, 211, 153, 0.6);
  background: rgba(16, 185, 129, 0.12);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.18);
}
#nto-minigame .mg-inv-slot img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#nto-minigame .mg-inv-key {
  position: absolute;
  top: 0.1rem;
  left: 0.15rem;
  color: rgba(255,255,255,0.28);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  border: none;
  background: transparent;
  padding: 0;
  min-width: 0;
  height: auto;
}
#nto-minigame .mg-inv-qty {
  position: absolute;
  right: 0.15rem;
  bottom: 0.1rem;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.7);
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
@media (min-width: 640px) {
  #nto-minigame .mg-inv-slot {
    width: 2.65rem;
    height: 2.65rem;
  }
}
body.mg-no-scroll {
  overflow: hidden;
}
/* Hide visual scrollbars in minigame (keep touch scroll) */
#nto-minigame * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#nto-minigame *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}
#nto-minigame [data-mg-paperdoll] {
  position: relative;
}
#nto-minigame .mg-paperdoll {
  position: relative;
  display: grid;
  width: min(100%, 13.5rem);
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    ". helm ."
    "weapon armor shield"
    ". legs ."
    ". boots .";
  gap: 0.35rem;
}
#nto-minigame .mg-eq-slot[data-mg-eq-slot="helmet"] { grid-area: helm; }
#nto-minigame .mg-eq-slot[data-mg-eq-slot="weapon"] { grid-area: weapon; }
#nto-minigame .mg-eq-slot[data-mg-eq-slot="armor"] { grid-area: armor; }
#nto-minigame .mg-eq-slot[data-mg-eq-slot="shield"] { grid-area: shield; }
#nto-minigame .mg-eq-slot[data-mg-eq-slot="legs"] { grid-area: legs; }
#nto-minigame .mg-eq-slot[data-mg-eq-slot="boots"] { grid-area: boots; }
#nto-minigame .mg-eq-slot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 0.5rem;
  background: rgba(0,0,0,0.35);
  overflow: visible;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#nto-minigame .mg-eq-slot:hover,
#nto-minigame .mg-eq-slot:focus-visible {
  border-color: rgba(251,191,36,0.5);
  background: rgba(251,191,36,0.08);
  outline: none;
  z-index: 2;
}
#nto-minigame .mg-eq-slot.is-filled {
  border-color: rgba(56,189,248,0.4);
  background: rgba(56,189,248,0.06);
}
#nto-minigame .mg-eq-slot.is-empty {
  border-style: dashed;
  border-color: rgba(255,255,255,0.08);
}
#nto-minigame .mg-eq-slot img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  image-rendering: pixelated;
  pointer-events: none;
}
#nto-minigame .mg-eq-slot img:not([src]),
#nto-minigame .mg-eq-slot img[src=""] {
  display: none;
}
#nto-minigame .mg-eq-label {
  position: absolute;
  left: 0.28rem;
  bottom: 0.22rem;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.28);
  pointer-events: none;
}
#nto-minigame .mg-eq-tooltip {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 0.45rem);
  width: max(11rem, 100%);
  max-width: 15rem;
  transform: translateX(-50%);
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.55rem;
  background: rgba(10,10,12,0.96);
  box-shadow: 0 10px 28px rgba(0,0,0,0.55);
  pointer-events: none;
  text-align: left;
}
#nto-minigame .mg-eq-tooltip.hidden { display: none; }
#nto-minigame .mg-eq-tooltip.is-below {
  bottom: auto;
  top: calc(100% + 0.45rem);
}
#nto-minigame .mg-eq-tip-name {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
#nto-minigame .mg-eq-tip-slot {
  margin-top: 0.15rem;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
#nto-minigame .mg-eq-tip-stats {
  margin-top: 0.45rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.2rem;
}
#nto-minigame .mg-eq-tip-stats li {
  font-size: 11px;
  color: rgba(226,232,240,0.85);
}
#nto-minigame .mg-eq-tip-stats li span {
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-eq-tip-hint {
  margin-top: 0.45rem;
  font-size: 10px;
  color: rgba(255,255,255,0.35);
}
#nto-minigame .mg-gear-bag {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 0.3rem;
  max-height: 9rem;
  overflow-y: auto;
}
#nto-minigame .mg-gear-bag-item {
  position: relative;
  width: 36px;
  height: 36px;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.3rem;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
#nto-minigame .mg-gear-bag-item:hover {
  border-color: rgba(255,255,255,0.28);
}
#nto-minigame .mg-gear-bag-item img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#nto-minigame .mg-gear-bag-item .mg-inv-qty {
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

/* ?? Correio / envio depot ?? */
#nto-minigame .mg-mail {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
#nto-minigame .mg-mail-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.15rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
#nto-minigame .mg-mail-toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
#nto-minigame .mg-mail-toggle-meta {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-mail-toggle-meta strong {
  color: rgba(251, 191, 36, 0.9);
}
#nto-minigame .mg-mail-toggle-meta em {
  font-style: normal;
  color: rgba(125, 211, 252, 0.85);
}
#nto-minigame .mg-mail-kicker {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.7);
}
#nto-minigame .mg-mail-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fef3c7;
}
#nto-minigame .mg-mail-body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
#nto-minigame .mg-mail-body.is-collapsed {
  display: none;
}
#nto-minigame .mg-mail-lead {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-mail-lead strong {
  color: rgba(251, 191, 36, 0.9);
}
#nto-minigame .mg-mail-label {
  margin: 0 0 0.4rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-mail-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  max-height: 7.5rem;
  overflow-y: auto;
  padding: 0.35rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.28);
}
#nto-minigame .mg-mail-pick-empty {
  margin: 0;
  padding: 0.55rem 0.4rem;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}
#nto-minigame .mg-mail-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  padding: 0.3rem 0.55rem 0.3rem 0.3rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 12, 14, 0.9);
  color: #fff;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
#nto-minigame .mg-mail-chip:hover {
  border-color: rgba(251, 191, 36, 0.35);
}
#nto-minigame .mg-mail-chip.is-selected {
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.2);
  background: rgba(14, 30, 48, 0.95);
}
#nto-minigame .mg-mail-chip img,
#nto-minigame .mg-mail-chip .mg-item-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  image-rendering: pixelated;
  flex-shrink: 0;
}
#nto-minigame .mg-mail-chip-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.05rem;
}
#nto-minigame .mg-mail-chip-meta strong {
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 9rem;
}
#nto-minigame .mg-mail-chip-meta em {
  font-style: normal;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.45);
}
#nto-minigame .mg-mail-form {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
#nto-minigame .mg-mail-selected {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 2.6rem;
  padding: 0.5rem 0.65rem;
  border-radius: 0.45rem;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
}
#nto-minigame .mg-mail-selected img,
#nto-minigame .mg-mail-selected .mg-item-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-mail-selected-empty {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
}
#nto-minigame .mg-mail-selected-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
#nto-minigame .mg-mail-selected-text strong {
  font-size: 12px;
  color: #e0f2fe;
}
#nto-minigame .mg-mail-selected-text span {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-mail-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
#nto-minigame .mg-mail-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-mail-field-qty {
  width: 5.5rem;
}
#nto-minigame .mg-mail-field-name {
  flex: 1;
  min-width: 10rem;
}
#nto-minigame .mg-mail-field input {
  width: 100%;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0a0a0c;
  padding: 0.55rem 0.65rem;
  font-size: 16px; /* evita zoom iOS */
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}
#nto-minigame .mg-mail-field input:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.45);
}
#nto-minigame .mg-mail-summary {
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.45);
  padding: 0.45rem 0.55rem;
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.25);
}
#nto-minigame .mg-mail-summary b {
  color: #fde68a;
  font-weight: 700;
}
#nto-minigame .mg-mail-actions {
  display: flex;
  justify-content: flex-end;
}
#nto-minigame .mg-mail-send {
  border-radius: 0.4rem;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.28), rgba(180, 83, 9, 0.22));
  padding: 0.6rem 1.1rem;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fef3c7;
  cursor: pointer;
  min-height: 2.6rem;
}
#nto-minigame .mg-mail-send:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.4), rgba(180, 83, 9, 0.3));
}
#nto-minigame .mg-mail-send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#nto-minigame .mg-mail-status {
  min-height: 1.1rem;
  margin: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-mail-status.is-ok {
  color: rgba(110, 231, 183, 0.95);
}
#nto-minigame .mg-mail-status.is-error {
  color: rgba(251, 113, 133, 0.95);
}
#nto-minigame .mg-mail-status.is-pending {
  color: rgba(125, 211, 252, 0.9);
}

/* Desktop: correio sempre aberto, toggle so visual */
@media (min-width: 1100px) {
  #nto-minigame:not(.is-mobile-ui):not(.is-mobile-landscape):not(.is-compact-mobile) .mg-mail-toggle {
    cursor: default;
    pointer-events: none;
  }
  #nto-minigame:not(.is-mobile-ui):not(.is-mobile-landscape):not(.is-compact-mobile) .mg-mail-toggle-meta em {
    display: none;
  }
  #nto-minigame:not(.is-mobile-ui):not(.is-mobile-landscape):not(.is-compact-mobile) .mg-mail-body.is-collapsed {
    display: flex;
  }
  #nto-minigame:not(.is-mobile-ui):not(.is-mobile-landscape):not(.is-compact-mobile) .mg-mail-field input {
    font-size: 12px;
  }
}
#nto-minigame .mg-gear-bag:empty::after {
  content: 'Sem pe?as na bag';
  grid-column: 1 / -1;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}
#nto-minigame .mg-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}
#nto-minigame .mg-stat-cell {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.4rem;
  background: rgba(255, 255, 255, 0.02);
}
#nto-minigame .mg-stat-cell span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
#nto-minigame .mg-stat-cell b {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
}
#nto-minigame .mg-power-list {
  display: grid;
  gap: 0.4rem;
}
#nto-minigame .mg-power-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 0.45rem;
  background: rgba(255, 255, 255, 0.02);
}
#nto-minigame .mg-power-name {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
}
#nto-minigame .mg-hud-train-leave {
  margin-left: 0.15rem;
  padding: 0.35rem 0.55rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.72);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#nto-minigame .mg-hud-train-leave:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
#nto-minigame .mg-hud-train-prog {
  display: grid;
  gap: 0.2rem;
  padding: 0 0.15rem 0.05rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0.35rem;
}
#nto-minigame .mg-hud-train-prog.hidden {
  display: none !important;
}
#nto-minigame .mg-hud-train-bar {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
#nto-minigame .mg-hud-train-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #c9a227;
  transition: width 0.15s ease;
}
#nto-minigame .mg-hud-train-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.4);
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-hud-train-meta [data-mg-train-skill] {
  color: rgba(255, 255, 255, 0.55);
}
#nto-minigame .mg-fs-sep {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.35rem 0 0.15rem;
  padding: 0 0.15rem;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}
#nto-minigame .mg-fs-sep > span:last-child {
  letter-spacing: 0.02em;
  text-transform: none;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-align: right;
}
#nto-minigame .mg-fs-row {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.55rem;
  align-items: center;
  padding: 0.45rem 0.5rem;
  border-radius: 0.4rem;
  border: 1px solid transparent;
}
#nto-minigame .mg-fs-row.is-on {
  border-color: rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.05);
}
#nto-minigame .mg-fs-ico {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.45);
}
#nto-minigame .mg-fs-row.is-on .mg-fs-ico {
  color: #fbbf24;
}
#nto-minigame .mg-fs-ico svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
}
#nto-minigame .mg-fs-main {
  min-width: 0;
}
#nto-minigame .mg-fs-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
#nto-minigame .mg-fs-name {
  font-size: 12px;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.88);
}
#nto-minigame .mg-fs-lv {
  font-size: 12px;
  font-weight: 800;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-fs-bar {
  margin-top: 0.28rem;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
#nto-minigame .mg-fs-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #fbbf24;
}
#nto-minigame .mg-fs-foot {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.2rem;
  font-size: 9px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.32);
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-power-desc {
  margin-top: 0.1rem;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
}
#nto-minigame .mg-power-val {
  min-width: 1.5rem;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: #fbbf24;
}
#nto-minigame .mg-power-add {
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}
#nto-minigame .mg-power-add:hover:not(:disabled) {
  background: rgba(251, 191, 36, 0.2);
}
#nto-minigame .mg-power-add:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
#nto-minigame .mg-loot-toast {
  pointer-events: none;
  position: absolute;
  left: 50%;
  top: 16%;
  z-index: 48;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  width: min(20rem, calc(100% - 1.5rem));
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
#nto-minigame .mg-loot-toast:not(.hidden) {
  display: block;
  pointer-events: auto;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#nto-minigame .mg-loot-toast.hidden { display: none; }
#nto-minigame .mg-loot-toast-frame {
  position: relative;
  overflow: hidden;
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid rgba(251, 191, 36, 0.28);
  border-radius: 0.65rem;
  background:
    linear-gradient(165deg, rgba(28, 22, 12, 0.96) 0%, rgba(10, 10, 12, 0.96) 55%, rgba(8, 8, 10, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(251, 191, 36, 0.08);
  text-align: center;
}
/* Chest loot: MMORPG minimal ? ?cone, nome, gold (sem card) */
#nto-minigame .mg-loot-toast[data-kind="chest"] .mg-loot-toast-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0.35rem 0.75rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
#nto-minigame .mg-loot-toast[data-kind="chest"] .mg-loot-toast-shine,
#nto-minigame .mg-loot-toast[data-kind="chest"] .mg-loot-toast-kicker,
#nto-minigame .mg-loot-toast[data-kind="chest"] .mg-loot-toast-title,
#nto-minigame .mg-loot-toast[data-kind="chest"] .mg-loot-toast-sub,
#nto-minigame .mg-loot-toast[data-kind="chest"] .mg-loot-toast-close {
  display: none;
}
#nto-minigame .mg-loot-toast[data-kind="chest"] .mg-loot-toast-items {
  order: 1;
  margin-top: 0;
  gap: 1rem 1.25rem;
}
#nto-minigame .mg-loot-toast[data-kind="chest"] .mg-loot-toast-gold {
  order: 2;
  margin: 0.7rem auto 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f6e05e;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(0, 0, 0, 0.45);
}
#nto-minigame .mg-loot-toast[data-kind="chest"] .mg-loot-toast-list {
  order: 3;
  margin-top: 0.55rem;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
#nto-minigame .mg-loot-toast[data-kind="chest"] .mg-loot-toast-timer {
  order: 4;
  margin-top: 0.65rem;
  width: min(10rem, 100%);
  height: 1.2rem;
  border-radius: 0.35rem;
}
#nto-minigame .mg-loot-toast[data-kind="chest"] .mg-loot-chip {
  width: auto;
  min-width: 4.5rem;
  max-width: 7.5rem;
  padding: 0;
  gap: 0.4rem;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  animation: mgLootChipIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
#nto-minigame .mg-loot-toast[data-kind="chest"] .mg-loot-chip.is-legendary {
  animation: mgLootChipIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
#nto-minigame .mg-loot-toast[data-kind="chest"] .mg-loot-chip img {
  width: 52px;
  height: 52px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
}
#nto-minigame .mg-loot-toast[data-kind="chest"] .mg-loot-chip span {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--loot-rarity, #f1f5f9);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.9),
    0 0 10px rgba(0, 0, 0, 0.35);
}
#nto-minigame .mg-loot-toast[data-kind="chest"] .mg-loot-chip em {
  margin-top: -0.15rem;
  font-size: 11px;
  font-weight: 700;
  color: rgba(253, 230, 138, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}
#nto-minigame .mg-loot-toast[data-kind="craft"] .mg-loot-toast-frame {
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 0 36px rgba(56, 189, 248, 0.1);
}
#nto-minigame .mg-loot-toast[data-kind="mail"] .mg-loot-toast-frame {
  border-color: rgba(167, 139, 250, 0.4);
  background:
    linear-gradient(165deg, rgba(22, 16, 36, 0.97) 0%, rgba(10, 10, 14, 0.97) 55%, rgba(8, 8, 12, 0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 0 42px rgba(139, 92, 246, 0.14);
}
#nto-minigame .mg-loot-toast[data-kind="error"] .mg-loot-toast-frame {
  border-color: rgba(244, 63, 94, 0.35);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 18px 48px rgba(0, 0, 0, 0.55);
}
#nto-minigame .mg-loot-toast-shine {
  pointer-events: none;
  position: absolute;
  inset: -40% -20% auto;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(251, 191, 36, 0.18), transparent 68%);
  animation: mgLootShine 2.4s ease-in-out infinite;
}
#nto-minigame .mg-loot-toast[data-kind="craft"] .mg-loot-toast-shine {
  background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.16), transparent 68%);
}
@keyframes mgLootShine {
  0%, 100% { opacity: 0.55; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(4px); }
}
#nto-minigame .mg-loot-toast-kicker {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.7);
}
#nto-minigame .mg-loot-toast-kicker:empty { display: none; }
#nto-minigame .mg-loot-toast[data-kind="craft"] .mg-loot-toast-kicker {
  color: rgba(125, 211, 252, 0.75);
}
#nto-minigame .mg-loot-toast[data-kind="mail"] .mg-loot-toast-kicker {
  color: rgba(196, 181, 253, 0.85);
}
#nto-minigame .mg-loot-toast[data-kind="error"] .mg-loot-toast-kicker {
  color: rgba(251, 113, 133, 0.8);
}
#nto-minigame .mg-loot-toast-title {
  margin: 0.35rem 0 0;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fef3c7;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}
#nto-minigame .mg-loot-toast-title:empty { display: none; }
#nto-minigame .mg-loot-toast[data-kind="craft"] .mg-loot-toast-title {
  color: #e0f2fe;
}
#nto-minigame .mg-loot-toast[data-kind="mail"] .mg-loot-toast-title {
  color: #ede9fe;
}
#nto-minigame .mg-loot-toast-sub {
  margin: 0.3rem 0 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  min-height: 0;
}
#nto-minigame .mg-loot-toast-sub:empty { display: none; }
#nto-minigame .mg-loot-toast-gold {
  margin: 0.65rem auto 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
#nto-minigame .mg-loot-toast-gold.hidden { display: none; }
#nto-minigame .mg-loot-toast-items {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.45rem;
}
#nto-minigame .mg-loot-toast-items:empty { display: none; }
#nto-minigame .mg-loot-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 3.4rem;
  padding: 0.35rem 0.2rem 0.4rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
  animation: mgLootChipIn 0.4s ease backwards;
}
#nto-minigame .mg-loot-chip:nth-child(1) { animation-delay: 0.05s; }
#nto-minigame .mg-loot-chip:nth-child(2) { animation-delay: 0.12s; }
#nto-minigame .mg-loot-chip:nth-child(3) { animation-delay: 0.18s; }
#nto-minigame .mg-loot-chip:nth-child(4) { animation-delay: 0.24s; }
#nto-minigame .mg-loot-chip:nth-child(5) { animation-delay: 0.3s; }
@keyframes mgLootChipIn {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
  to { opacity: 1; transform: none; }
}
#nto-minigame .mg-loot-chip img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#nto-minigame .mg-loot-chip span {
  font-size: 9px;
  font-weight: 700;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.7);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nto-minigame .mg-loot-chip em {
  font-style: normal;
  font-size: 9px;
  font-weight: 800;
  color: #fde68a;
}
#nto-minigame .mg-loot-toast-list {
  margin-top: 0.55rem;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
}
#nto-minigame .mg-loot-toast-list:empty { display: none; }
#nto-minigame .mg-loot-toast-timer {
  position: relative;
  margin-top: 0.75rem;
  height: 1.55rem;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.4);
}
#nto-minigame .mg-loot-toast-timer.hidden { display: none; }
#nto-minigame .mg-loot-toast-timer-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.35), rgba(56, 189, 248, 0.55));
  transform-origin: left center;
}
#nto-minigame .mg-loot-toast-timer-text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
#nto-minigame .mg-loot-toast-close {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 3;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#nto-minigame .mg-loot-toast-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

/* ?? Craft panel ?? */
#nto-minigame .mg-craft-panel {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 40rem);
}
#nto-minigame .mg-craft-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(ellipse 80% 120% at 0% 0%, rgba(251, 191, 36, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(18, 16, 12, 0.95), rgba(12, 12, 14, 0.2));
}
#nto-minigame .mg-craft-kicker {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.55);
}
#nto-minigame .mg-craft-title {
  margin: 0.25rem 0 0;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
#nto-minigame .mg-craft-lead {
  margin: 0.35rem 0 0;
  max-width: 28rem;
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-craft-hero-side {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
#nto-minigame .mg-craft-gold-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0.35rem 0.7rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(251, 191, 36, 0.22);
  background: rgba(0, 0, 0, 0.35);
}
#nto-minigame .mg-craft-gold-pill span {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
#nto-minigame .mg-craft-gold-pill strong {
  font-size: 1.15rem;
  font-weight: 800;
  color: #fbbf24;
  line-height: 1.1;
}
#nto-minigame .mg-craft-queue-wrap {
  padding: 0.75rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
}
#nto-minigame .mg-craft-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
#nto-minigame .mg-craft-section-head p {
  margin: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-craft-section-head span {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.28);
}
#nto-minigame .mg-craft-queue {
  display: grid;
  gap: 0.45rem;
}
#nto-minigame .mg-craft-queue-empty {
  padding: 0.7rem 0.85rem;
  border-radius: 0.45rem;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
}
#nto-minigame .mg-craft-job {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
#nto-minigame .mg-craft-job.is-ready {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(16, 185, 129, 0.08);
}
#nto-minigame .mg-craft-job img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#nto-minigame .mg-craft-job-info {
  min-width: 0;
}
#nto-minigame .mg-craft-job-info strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nto-minigame .mg-craft-job-bar {
  position: relative;
  margin-top: 0.35rem;
  height: 0.35rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
#nto-minigame .mg-craft-job-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  transition: width 0.4s linear;
}
#nto-minigame .mg-craft-job.is-ready .mg-craft-job-bar > span {
  background: linear-gradient(90deg, #059669, #34d399);
}
#nto-minigame .mg-craft-job-meta {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
  white-space: nowrap;
}
#nto-minigame .mg-craft-job.is-ready .mg-craft-job-meta {
  color: #6ee7b7;
}
/* ── Craft 2.0: Ferreiro, odds de qualidade, "onde conseguir" e acelerar ── */
#nto-minigame .mg-craft-mastery {
  flex: 0 0 auto;
  margin: 0 1.15rem 0.5rem;
  padding: 0.55rem 0.7rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(251, 191, 36, 0.18);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.07), rgba(251, 191, 36, 0.02));
}
#nto-minigame .mg-craft-mastery-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
#nto-minigame .mg-craft-mastery-title {
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.9);
}
#nto-minigame .mg-craft-mastery-level {
  font-size: 0.75rem;
  font-weight: 900;
  color: #fde68a;
}
#nto-minigame .mg-craft-mastery-bar {
  margin: 0.4rem 0 0.35rem;
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
#nto-minigame .mg-craft-mastery-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #b45309, #fbbf24);
  transition: width 0.25s ease;
}
#nto-minigame .mg-craft-mastery-info {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.55);
}
#nto-minigame .mg-craft-chip.is-odds {
  border-color: rgba(52, 211, 153, 0.28);
  color: #a7f3d0;
}
#nto-minigame .mg-craft-need-src {
  display: block;
  margin-top: 1px;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}
#nto-minigame .mg-craft-need.is-ok .mg-craft-need-src {
  color: rgba(167, 243, 208, 0.55);
}
#nto-minigame .mg-craft-rush {
  flex: 0 0 auto;
  min-height: 1.7rem;
  padding: 0 0.5rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(56, 189, 248, 0.45);
  background: rgba(14, 165, 233, 0.16);
  color: #7dd3fc;
  font-size: 0.5625rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
#nto-minigame .mg-craft-rush:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
#nto-minigame .mg-craft-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  padding: 0.75rem 1.15rem 1.15rem;
  overflow-y: auto;
  max-height: min(48vh, 22rem);
}
@media (min-width: 640px) {
  #nto-minigame .mg-craft-list {
    grid-template-columns: 1fr 1fr;
  }
}
#nto-minigame .mg-craft-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.7rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.15s, background 0.15s;
}
#nto-minigame .mg-craft-card.is-ready {
  border-color: rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.05);
}
#nto-minigame .mg-craft-card img {
  width: 32px;
  height: 32px;
  margin-top: 0.15rem;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#nto-minigame .mg-craft-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
#nto-minigame .mg-craft-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
}
#nto-minigame .mg-craft-card-top strong {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
#nto-minigame .mg-craft-tier {
  flex-shrink: 0;
  padding: 0.12rem 0.4rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
}
#nto-minigame .mg-craft-card-stats {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.38);
}
#nto-minigame .mg-craft-needs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
#nto-minigame .mg-craft-need {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.3);
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
}
#nto-minigame .mg-craft-need.is-ok {
  border-color: rgba(52, 211, 153, 0.3);
  color: #6ee7b7;
}
#nto-minigame .mg-craft-need.is-miss {
  border-color: rgba(244, 63, 94, 0.3);
  color: #fda4af;
}
#nto-minigame .mg-craft-need img {
  width: 14px;
  height: 14px;
  margin: 0;
}
#nto-minigame .mg-craft-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.15rem;
}
#nto-minigame .mg-craft-cost {
  font-size: 10px;
  font-weight: 800;
  color: #fbbf24;
}
#nto-minigame .mg-craft-go {
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border-radius: 0.35rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#nto-minigame .mg-craft-go:hover:not(:disabled) {
  background: rgba(251, 191, 36, 0.22);
  border-color: rgba(251, 191, 36, 0.5);
}
#nto-minigame .mg-craft-go:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.35);
}
#nto-minigame .mg-craft-panel {
  position: relative;
}
#nto-minigame .mg-craft-card {
  cursor: help;
}
#nto-minigame .mg-craft-tooltip {
  position: absolute;
  z-index: 20;
  width: 13.5rem;
  padding: 0.65rem 0.75rem 0.7rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: rgba(10, 10, 12, 0.96);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  text-align: left;
}
#nto-minigame .mg-craft-tooltip.hidden { display: none; }
#nto-minigame .mg-craft-tip-name {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
}
#nto-minigame .mg-craft-tip-slot {
  margin: 0.15rem 0 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.7);
}
#nto-minigame .mg-craft-tip-from {
  margin: 0.4rem 0 0;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-craft-tip-from:empty { display: none; }
#nto-minigame .mg-craft-tip-stats {
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.22rem;
}
#nto-minigame .mg-craft-tip-stats li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
}
#nto-minigame .mg-craft-tip-stats li span {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-craft-tip-stats li .mg-craft-delta {
  color: #6ee7b7;
  font-weight: 800;
}
#nto-minigame .mg-craft-tip-stats li .mg-craft-delta.is-same {
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
}
#nto-minigame .mg-craft-tip-stats li .mg-craft-delta.is-down {
  color: #fda4af;
}
#nto-minigame .mg-craft-card-stats .mg-craft-up {
  color: rgba(110, 231, 183, 0.85);
  font-weight: 700;
}

/* ?? Top menu hide / show ?? */
#nto-minigame .mg-topmenu-show {
  display: none !important;
}
#nto-minigame.is-topmenu-hidden.is-lobby .mg-topmenu {
  display: none !important;
}
#nto-minigame.is-topmenu-hidden.is-lobby .mg-topmenu-show {
  display: inline-flex !important;
}
#nto-minigame .mg-topmenu-btn-hide {
  color: rgba(255,255,255,0.4);
}

/* ?? Mobile landscape: enter-game compacto ?? */
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-shell {
  min-height: 100%;
  overflow: hidden !important;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-body {
  padding: 0.35rem 0.65rem 0.2rem !important;
  gap: 0.35rem !important;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-title {
  font-size: 1rem !important;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-desc,
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-rail-head {
  display: none !important;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-enter {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important;
  gap: 0.45rem !important;
  flex: 1 1 auto;
  min-height: 0;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-showcase {
  min-height: 0;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-stage {
  padding: 0.45rem 0.5rem 0.55rem !important;
  gap: 0.35rem !important;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-outfit-hero {
  width: 4.8rem !important;
  height: 5.6rem !important;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-name {
  font-size: 0.95rem !important;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-chips {
  gap: 0.25rem !important;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-dossier {
  gap: 0.3rem !important;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-panel {
  padding: 0.35rem 0.4rem !important;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-skills {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-char {
  width: auto;
  padding: 0 !important;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-outfit-rail {
  width: 2.4rem;
  height: 2.4rem;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-actions {
  padding: 0.35rem 0.65rem calc(0.35rem + env(safe-area-inset-bottom)) !important;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-actions [data-mg-start] {
  padding: 0.55rem 0.85rem !important;
  font-size: 11px !important;
}
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-secondary,
#nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-sync {
  display: none !important;
}
#nto-minigame.is-mobile-landscape [data-mg-select] .mg-select-shell,
#nto-minigame.is-mobile-landscape [data-mg-maps] .mg-panel {
  padding: 0.4rem !important;
  gap: 0.35rem !important;
}

/* Shop / depot / bag ? n?o estourar a tela */
#nto-minigame.is-mobile-ui [data-mg-shop],
#nto-minigame.is-mobile-ui [data-mg-depot],
#nto-minigame.is-mobile-ui [data-mg-backpack],
#nto-minigame.is-mobile-ui [data-mg-craft],
#nto-minigame.is-mobile-ui [data-mg-ranking],
#nto-minigame.is-mobile-ui [data-mg-tfshop],
#nto-minigame.is-mobile-ui [data-mg-absorb-modal],
#nto-minigame.is-mobile-ui [data-mg-discard-modal] {
  padding: 0.4rem !important;
  align-items: center !important;
}
#nto-minigame.is-mobile-ui [data-mg-shop] .mg-shop-panel,
#nto-minigame.is-mobile-ui [data-mg-depot] .mg-shop-panel,
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-shop-panel,
#nto-minigame.is-mobile-ui [data-mg-craft] .mg-shop-panel,
#nto-minigame.is-mobile-ui [data-mg-craft] .mg-craft-panel,
#nto-minigame.is-mobile-ui [data-mg-ranking] .mg-shop-panel,
#nto-minigame.is-mobile-ui [data-mg-tfshop] .mg-shop-panel {
  max-width: min(96vw, 42rem) !important;
  max-height: calc(100% - 0.5rem) !important;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#nto-minigame.is-mobile-landscape [data-mg-shop] .mg-shop-panel,
#nto-minigame.is-mobile-landscape [data-mg-depot] .mg-shop-panel,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-shop-panel,
#nto-minigame.is-mobile-landscape [data-mg-craft] .mg-shop-panel,
#nto-minigame.is-mobile-landscape [data-mg-craft] .mg-craft-panel,
#nto-minigame.is-mobile-landscape [data-mg-tfshop] .mg-shop-panel {
  max-height: calc(100dvh - 0.6rem) !important;
}
#nto-minigame.is-mobile-ui [data-mg-shop] .mg-shop-panel > div:first-child,
#nto-minigame.is-mobile-ui [data-mg-depot] .mg-shop-panel > div:first-child,
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-shop-panel > div:first-child,
#nto-minigame.is-mobile-ui [data-mg-craft] .mg-shop-panel > div:first-child,
#nto-minigame.is-mobile-ui [data-mg-craft] .mg-craft-hero,
#nto-minigame.is-mobile-ui [data-mg-tfshop] .mg-shop-panel > div:first-child,
#nto-minigame.is-mobile-ui [data-mg-ranking] .mg-shop-panel > div:first-child {
  padding: 0.55rem 0.75rem !important;
}
#nto-minigame.is-mobile-ui [data-mg-shop] .mg-shop-panel h2,
#nto-minigame.is-mobile-ui [data-mg-depot] .mg-shop-panel h2,
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-shop-panel h2,
#nto-minigame.is-mobile-ui [data-mg-craft] .mg-shop-panel h2,
#nto-minigame.is-mobile-ui [data-mg-craft] .mg-craft-title,
#nto-minigame.is-mobile-ui [data-mg-tfshop] .mg-shop-panel h2 {
  font-size: 1.15rem !important;
}
#nto-minigame.is-mobile-ui [data-mg-shop-list]:not(.mg-store-list),
#nto-minigame.is-mobile-ui [data-mg-tfshop-list],
#nto-minigame.is-mobile-ui [data-mg-craft-list],
#nto-minigame.is-mobile-ui [data-mg-backpack-list] {
  max-height: none !important;
  padding: 0.65rem 0.75rem !important;
}
#nto-minigame.is-mobile-landscape [data-mg-shop-list]:not(.mg-store-list),
#nto-minigame.is-mobile-landscape [data-mg-tfshop-list],
#nto-minigame.is-mobile-landscape [data-mg-craft-list],
#nto-minigame.is-mobile-landscape [data-mg-backpack-list] {
  max-height: none !important;
  grid-template-columns: 1fr !important;
}
#nto-minigame.is-mobile-landscape [data-mg-depot] .grid.sm\:grid-cols-2,
#nto-minigame.is-mobile-landscape [data-mg-depot] .p-4,
#nto-minigame.is-mobile-landscape [data-mg-depot] .sm\:p-5 {
  padding: 0.45rem !important;
}
#nto-minigame.is-mobile-landscape [data-mg-depot-list],
#nto-minigame.is-mobile-landscape [data-mg-depot-bag] {
  min-height: 4.2rem !important;
  max-height: min(28dvh, 7.5rem) !important;
}
#nto-minigame.is-mobile-landscape [data-mg-depot] > .mg-shop-panel > p {
  display: none !important;
}
#nto-minigame.is-mobile-ui [data-mg-depot] .mg-shop-panel {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
#nto-minigame.is-mobile-ui .mg-mail-section {
  padding: 0.55rem 0.75rem 0.75rem !important;
  position: sticky;
  bottom: 0;
  background: linear-gradient(180deg, rgba(12, 12, 14, 0.92), #0c0c0e 35%);
  z-index: 2;
}
#nto-minigame.is-mobile-ui .mg-mail-lead {
  display: none;
}
#nto-minigame.is-mobile-ui .mg-mail-pick {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: none;
  gap: 0.35rem;
  padding: 0.3rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#nto-minigame.is-mobile-ui .mg-mail-pick::-webkit-scrollbar {
  display: none;
}
#nto-minigame.is-mobile-ui .mg-mail-chip {
  flex-shrink: 0;
  padding: 0.25rem;
  width: 2.55rem;
  height: 2.55rem;
  justify-content: center;
}
#nto-minigame.is-mobile-ui .mg-mail-chip-meta {
  display: none;
}
#nto-minigame.is-mobile-ui .mg-mail-chip img,
#nto-minigame.is-mobile-ui .mg-mail-chip .mg-item-icon {
  width: 30px;
  height: 30px;
}
#nto-minigame.is-mobile-ui .mg-mail-selected {
  min-height: 2.3rem;
  padding: 0.4rem 0.5rem;
}
#nto-minigame.is-mobile-ui .mg-mail-row {
  flex-wrap: nowrap;
  gap: 0.4rem;
}
#nto-minigame.is-mobile-ui .mg-mail-field-qty {
  width: 4.4rem;
  flex-shrink: 0;
}
#nto-minigame.is-mobile-ui .mg-mail-field-name {
  min-width: 0;
}
#nto-minigame.is-mobile-ui .mg-mail-actions {
  justify-content: stretch;
}
#nto-minigame.is-mobile-ui .mg-mail-send {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 12px;
}
#nto-minigame.is-mobile-ui [data-mg-depot-list],
#nto-minigame.is-mobile-ui [data-mg-depot-bag] {
  min-height: 5.5rem !important;
  max-height: min(28vh, 9rem) !important;
}
#nto-minigame.is-mobile-landscape .mg-mail-section {
  position: static;
  padding: 0.4rem 0.55rem 0.5rem !important;
}
#nto-minigame.is-mobile-landscape .mg-mail-toggle-meta {
  font-size: 9px;
}
#nto-minigame.is-mobile-landscape .mg-mail-title {
  font-size: 0.82rem;
}
#nto-minigame.is-mobile-landscape .mg-mail-body:not(.is-collapsed) {
  max-height: min(46dvh, 14rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 0.15rem;
}
#nto-minigame.is-mobile-ui [data-mg-backpack] .grid {
  gap: 0.45rem !important;
  padding: 0.45rem !important;
}
#nto-minigame.is-mobile-ui [data-mg-profile] .mg-panel,
#nto-minigame.is-mobile-ui [data-mg-path] .mg-panel {
  max-width: min(22rem, 96vw) !important;
  max-height: calc(100% - 0.5rem) !important;
}
#nto-minigame.is-mobile-landscape [data-mg-profile] .mg-panel,
#nto-minigame.is-mobile-landscape [data-mg-path] .mg-panel {
  max-width: min(20rem, 48vw) !important;
  max-height: calc(100dvh - 0.5rem) !important;
}

/* Tela de morte compacta */
#nto-minigame.is-mobile-landscape .mg-dead-screen,
#nto-minigame.is-mobile-ui .mg-dead-screen {
  padding: 0.45rem !important;
  overflow-y: auto;
}
#nto-minigame.is-mobile-landscape .mg-dead-card,
#nto-minigame.is-compact-mobile .mg-dead-card {
  padding: 0.7rem 0.85rem 0.65rem !important;
  max-width: min(22rem, 92vw) !important;
  max-height: calc(100dvh - 0.8rem);
  overflow-y: auto;
}
#nto-minigame.is-mobile-landscape .mg-dead-title,
#nto-minigame.is-compact-mobile .mg-dead-title {
  margin-top: 0.25rem !important;
  font-size: 1.35rem !important;
  letter-spacing: 0.03em !important;
  animation: none !important;
}
#nto-minigame.is-mobile-landscape .mg-dead-scoreline,
#nto-minigame.is-compact-mobile .mg-dead-scoreline {
  margin-top: 0.55rem !important;
}
#nto-minigame.is-mobile-landscape .mg-dead-score,
#nto-minigame.is-compact-mobile .mg-dead-score {
  font-size: 1.35rem !important;
}
#nto-minigame.is-mobile-landscape .mg-dead-actions,
#nto-minigame.is-compact-mobile .mg-dead-actions {
  margin-top: 0.55rem !important;
  gap: 0.35rem !important;
}
#nto-minigame.is-mobile-landscape .mg-dead-btn,
#nto-minigame.is-compact-mobile .mg-dead-btn {
  padding: 0.45rem 0.55rem !important;
  font-size: 9px !important;
}
#nto-minigame.is-mobile-landscape .mg-dead-hint {
  display: none !important;
}
#nto-minigame.is-mobile-landscape .mg-hunt-panel {
  max-width: 9.5rem !important;
  top: calc(36px + env(safe-area-inset-top) + 84px + 14px) !important;
  right: 0.35rem !important;
}
#nto-minigame.is-mobile-landscape .mg-topmenu-btn span {
  display: none !important;
}
/* Ícone ≠ rótulo: no mobile o texto some (acima), mas o ícone do Arts/Cassino
   precisa continuar. `inline-block` porque senão width/height não valem. */
#nto-minigame.is-mobile-landscape .mg-topmenu-btn .mg-arts-gem,
#nto-minigame.is-mobile-landscape .mg-topmenu-btn .mg-casino-coin,
#nto-minigame.is-mobile-landscape .mg-topmenu-btn .mg-pass-badge,
#nto-minigame.is-compact-mobile .mg-topmenu-btn .mg-arts-gem,
#nto-minigame.is-compact-mobile .mg-topmenu-btn .mg-casino-coin,
#nto-minigame.is-compact-mobile .mg-topmenu-btn .mg-pass-badge {
  display: inline-block !important;
  /* no celular só existe o ícone (o rótulo some): precisa ser legível */
  width: 0.78rem !important;
  height: 0.78rem !important;
}
#nto-minigame.is-mobile-landscape .mg-topmenu-btn {
  padding: 0.4rem 0.45rem !important;
}
@media (max-height: 430px) {
  #nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-chips,
  #nto-minigame.is-mobile-landscape [data-mg-hub] .mg-hub-panel:nth-child(n+3) {
    display: none !important;
  }
  #nto-minigame.is-mobile-landscape .mg-dead-rank,
  #nto-minigame.is-mobile-landscape .mg-dead-loot {
    display: none !important;
  }
}

/* ==========================================================================
   Full-screen panels ? mobile-game style (desktop + mobile)
   ========================================================================== */
#nto-minigame .mg-screen-sheet {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  animation: mgScreenIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes mgScreenIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
#nto-minigame .mg-screen-scroll {
  max-height: none !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

#nto-minigame [data-mg-shop],
#nto-minigame [data-mg-arts-shop],
#nto-minigame [data-mg-backpack],
#nto-minigame [data-mg-depot],
#nto-minigame [data-mg-craft],
#nto-minigame [data-mg-ranking],
#nto-minigame [data-mg-tfshop],
#nto-minigame [data-mg-profile],
#nto-minigame [data-mg-path],
#nto-minigame [data-mg-chat],
#nto-minigame [data-mg-friends],
#nto-minigame [data-mg-pause],
#nto-minigame [data-mg-mode-modal],
#nto-minigame [data-mg-npc-dialog],
#nto-minigame [data-mg-tutorial],
#nto-minigame [data-mg-admin],
#nto-minigame [data-mg-weapon-shop] {
  padding: 0 !important;
  align-items: stretch !important;
  justify-content: stretch !important;
}

#nto-minigame [data-mg-admin].hidden,
#nto-minigame [data-mg-weapon-shop].hidden,
#nto-minigame [data-mg-arts-shop].hidden {
  display: none !important;
}
#nto-minigame [data-mg-admin]:not(.hidden),
#nto-minigame [data-mg-weapon-shop]:not(.hidden) {
  z-index: 48 !important;
}
#nto-minigame [data-mg-arts-shop]:not(.hidden) {
  display: flex !important;
  z-index: 47 !important;
}

#nto-minigame [data-mg-shop] > .mg-panel,
#nto-minigame [data-mg-arts-shop] > .mg-panel,
#nto-minigame [data-mg-backpack] > .mg-panel,
#nto-minigame [data-mg-depot] > .mg-panel,
#nto-minigame [data-mg-craft] > .mg-panel,
#nto-minigame [data-mg-ranking] > .mg-panel,
#nto-minigame [data-mg-tfshop] > .mg-panel,
#nto-minigame [data-mg-profile] > .mg-panel,
#nto-minigame [data-mg-path] > .mg-panel,
#nto-minigame [data-mg-chat] > .mg-panel,
#nto-minigame [data-mg-friends] > .mg-panel,
#nto-minigame [data-mg-pause] > .mg-panel,
#nto-minigame [data-mg-mode-modal] > .mg-panel,
#nto-minigame [data-mg-npc-dialog] > .mg-panel,
#nto-minigame [data-mg-tutorial] > .mg-panel,
#nto-minigame [data-mg-admin] > .mg-panel,
#nto-minigame [data-mg-weapon-shop] > .mg-panel {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#nto-minigame [data-mg-shop-list]:not(.mg-store-list),
#nto-minigame [data-mg-tfshop-list],
#nto-minigame [data-mg-backpack-list],
#nto-minigame [data-mg-craft-list],
#nto-minigame [data-mg-rank-list],
#nto-minigame [data-mg-craft] .mg-craft-list {
  max-height: none !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

#nto-minigame [data-mg-depot-list],
#nto-minigame [data-mg-depot-bag] {
  max-height: none !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  height: auto !important;
}

#nto-minigame [data-mg-depot] .grid.sm\:grid-cols-2,
#nto-minigame [data-mg-backpack] .grid.sm\:grid-cols-\[minmax\(11rem\,13\.5rem\)_1fr\] {
  min-height: 0;
  flex: 1 1 auto;
}

#nto-minigame [data-mg-mode-modal] > .mg-panel > .space-y-4,
#nto-minigame [data-mg-npc-dialog] > .mg-panel > .border-b {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Override older mobile card constraints */
#nto-minigame.is-mobile-ui [data-mg-shop] .mg-shop-panel,
#nto-minigame.is-mobile-ui [data-mg-depot] .mg-shop-panel,
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-shop-panel,
#nto-minigame.is-mobile-ui [data-mg-craft] .mg-shop-panel,
#nto-minigame.is-mobile-ui [data-mg-craft] .mg-craft-panel,
#nto-minigame.is-mobile-ui [data-mg-ranking] .mg-shop-panel,
#nto-minigame.is-mobile-ui [data-mg-tfshop] .mg-shop-panel,
#nto-minigame.is-mobile-ui [data-mg-profile] .mg-panel,
#nto-minigame.is-mobile-ui [data-mg-path] .mg-panel,
#nto-minigame.is-mobile-landscape [data-mg-shop] .mg-shop-panel,
#nto-minigame.is-mobile-landscape [data-mg-depot] .mg-shop-panel,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-shop-panel,
#nto-minigame.is-mobile-landscape [data-mg-craft] .mg-shop-panel,
#nto-minigame.is-mobile-landscape [data-mg-craft] .mg-craft-panel,
#nto-minigame.is-mobile-landscape [data-mg-tfshop] .mg-shop-panel,
#nto-minigame.is-mobile-landscape [data-mg-profile] .mg-panel,
#nto-minigame.is-mobile-landscape [data-mg-path] .mg-panel {
  max-width: none !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
}
#nto-minigame.is-mobile-ui [data-mg-shop],
#nto-minigame.is-mobile-ui [data-mg-backpack],
#nto-minigame.is-mobile-ui [data-mg-depot],
#nto-minigame.is-mobile-ui [data-mg-craft],
#nto-minigame.is-mobile-ui [data-mg-ranking],
#nto-minigame.is-mobile-ui [data-mg-tfshop],
#nto-minigame.is-mobile-ui [data-mg-absorb-modal],
#nto-minigame.is-mobile-ui [data-mg-discard-modal] {
  padding: 0 !important;
  align-items: stretch !important;
}
#nto-minigame.is-mobile-ui [data-mg-shop-list]:not(.mg-store-list),
#nto-minigame.is-mobile-ui [data-mg-tfshop-list],
#nto-minigame.is-mobile-ui [data-mg-craft-list],
#nto-minigame.is-mobile-ui [data-mg-backpack-list],
#nto-minigame.is-mobile-landscape [data-mg-shop-list]:not(.mg-store-list),
#nto-minigame.is-mobile-landscape [data-mg-tfshop-list],
#nto-minigame.is-mobile-landscape [data-mg-craft-list],
#nto-minigame.is-mobile-landscape [data-mg-backpack-list] {
  max-height: none !important;
}
#nto-minigame.is-mobile-landscape [data-mg-depot-list],
#nto-minigame.is-mobile-landscape [data-mg-depot-bag] {
  max-height: none !important;
}

/* Safe areas: only legacy sheets without mg-sheet-* chrome */
#nto-minigame .mg-screen-sheet > div:first-child:not(.mg-sheet-head) {
  padding-top: max(0.75rem, env(safe-area-inset-top));
}
#nto-minigame .mg-screen-sheet > div:last-child:not(.mg-sheet-body):not(.mg-sheet-foot):not(.mg-shop-list):not(.mg-craft-list) {
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

/* Absorb / discard ? full overlay, card centered but roomy */
#nto-minigame [data-mg-absorb-modal],
#nto-minigame [data-mg-discard-modal] {
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)) !important;
}
#nto-minigame [data-mg-absorb-modal] .mg-absorb-card,
#nto-minigame [data-mg-discard-modal] .mg-absorb-card {
  width: min(100%, 28rem) !important;
  max-width: none !important;
}
@media (max-width: 639px) {
  #nto-minigame [data-mg-absorb-modal],
  #nto-minigame [data-mg-discard-modal] {
    align-items: stretch !important;
    padding: 0 !important;
  }
  #nto-minigame [data-mg-absorb-modal] .mg-absorb-card,
  #nto-minigame [data-mg-discard-modal] .mg-absorb-card {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ==========================================================================
   Unified sheet UX (same chrome on all panels ? mobile + desktop)
   ========================================================================== */
#nto-minigame .mg-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-shrink: 0;
  padding: 0.85rem 1rem;
  padding-top: max(0.85rem, env(safe-area-inset-top));
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.32);
}
#nto-minigame .mg-sheet-head.is-stack {
  align-items: flex-start;
}
#nto-minigame .mg-sheet-head-copy {
  min-width: 0;
  flex: 1;
}
#nto-minigame .mg-sheet-kicker {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
#nto-minigame .mg-sheet-kicker.is-amber { color: rgba(251,191,36,0.55); }
#nto-minigame .mg-sheet-kicker.is-emerald { color: rgba(52,211,153,0.55); }
#nto-minigame .mg-sheet-kicker.is-sky { color: rgba(56,189,248,0.55); }
#nto-minigame .mg-sheet-kicker.is-violet { color: rgba(167,139,250,0.55); }
#nto-minigame .mg-sheet-title {
  margin: 0.2rem 0 0;
  font-family: inherit;
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
}
#nto-minigame .mg-sheet-sub {
  margin: 0.4rem 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.5);
  max-width: 40rem;
}
#nto-minigame .mg-sheet-head-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
#nto-minigame .mg-sheet-gold {
  display: none !important;
}
#nto-minigame .mg-sheet-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  min-width: 4.5rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
#nto-minigame .mg-sheet-close:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
#nto-minigame .mg-sheet-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  padding: 0.55rem 1.1rem;
  border-radius: 0.55rem;
  border: 0;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
#nto-minigame .mg-sheet-primary:hover { background: #ef4444; }
#nto-minigame .mg-sheet-primary.is-disabled,
#nto-minigame .mg-sheet-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: #7f1d1d;
}
#nto-minigame .mg-sheet-primary.is-disabled:hover,
#nto-minigame .mg-sheet-primary:disabled:hover {
  background: #7f1d1d;
}
#nto-minigame .mg-sheet-hint {
  flex-shrink: 0;
  margin: 0;
  padding: 0.55rem 1rem;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(255,255,255,0.38);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.02);
}
#nto-minigame .mg-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.85rem 1rem;
  padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
#nto-minigame .mg-sheet-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.18);
}
#nto-minigame .mg-sheet-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  padding-bottom: max(0.65rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.28);
}
#nto-minigame .mg-sheet-foot.is-actions { justify-content: flex-end; }
#nto-minigame .mg-sheet-foot-note {
  margin: 0;
  margin-right: auto;
  font-size: 11px;
  color: rgba(255,255,255,0.32);
}
#nto-minigame .mg-sheet-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0.85rem 1rem;
  padding-bottom: max(0.85rem, env(safe-area-inset-bottom));
}
@media (min-width: 720px) {
  #nto-minigame .mg-sheet-split {
    grid-template-columns: minmax(11rem, 14rem) 1fr;
  }
  #nto-minigame .mg-sheet-split.is-equal {
    grid-template-columns: 1fr 1fr;
  }
}
#nto-minigame .mg-sheet-split-main,
#nto-minigame .mg-sheet-pane {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#nto-minigame .mg-sheet-pane-label {
  margin: 0 0 0.4rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
#nto-minigame .mg-sheet-pane-label.is-sky { color: rgba(56,189,248,0.7); }
#nto-minigame .mg-sheet-pane-label.is-emerald { color: rgba(52,211,153,0.7); }
#nto-minigame .mg-sheet-pane .mg-gear-bag,
#nto-minigame .mg-sheet-split-main .mg-shop-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Item cards ? same language in shop / bag / transforms */
#nto-minigame .mg-shop-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.55rem !important;
  align-content: start;
}
@media (min-width: 640px) {
  #nto-minigame .mg-shop-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px) {
  #nto-minigame .mg-shop-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
#nto-minigame .mg-sheet-split-main .mg-shop-list {
  grid-template-columns: 1fr !important;
}
@media (min-width: 900px) {
  #nto-minigame .mg-sheet-split-main .mg-shop-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

#nto-minigame .mg-shop-item:not(:has(> .mg-craft-card-actions)) {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon info"
    "actions actions";
  gap: 0.55rem 0.7rem;
  align-items: center;
  min-height: 4.5rem;
  padding: 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
@media (min-width: 480px) {
  #nto-minigame .mg-shop-item:not(:has(> .mg-craft-card-actions)) {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "icon info actions";
  }
}
#nto-minigame .mg-shop-item > img {
  grid-area: icon;
  width: 2.75rem !important;
  height: 2.75rem !important;
  border-radius: 0.45rem;
  background: rgba(0,0,0,0.45);
}
#nto-minigame .mg-shop-item-info { grid-area: info; }
#nto-minigame .mg-shop-item-actions {
  grid-area: actions;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;
  width: 100%;
}
@media (min-width: 480px) {
  #nto-minigame .mg-shop-item-actions {
    flex-direction: column;
    width: auto;
    align-items: stretch;
  }
}
#nto-minigame .mg-shop-item-name {
  font-size: 13px;
  font-weight: 750;
  color: rgba(255,255,255,0.92);
}
#nto-minigame .mg-shop-item-desc {
  margin-top: 0.15rem;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,0.42);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#nto-minigame .mg-shop-item-owned {
  margin-top: 0.25rem;
  font-size: 10px;
  font-weight: 650;
  color: rgba(251,191,36,0.8);
}
#nto-minigame .mg-shop-buy,
#nto-minigame .mg-shop-equip {
  min-height: 2.35rem;
  min-width: 4.75rem;
  flex: 1 1 auto;
  padding: 0.45rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
@media (min-width: 480px) {
  #nto-minigame .mg-shop-buy,
  #nto-minigame .mg-shop-equip {
    flex: 0 0 auto;
  }
}
#nto-minigame .mg-shop-item.is-equipped {
  border-color: rgba(52,211,153,0.4);
  background: rgba(16,185,129,0.1);
  box-shadow: inset 0 0 0 1px rgba(52,211,153,0.12);
}

/* Paperdoll in split */
#nto-minigame [data-mg-paperdoll] {
  border-radius: 0.65rem;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.07);
  padding: 0.75rem;
  overflow-y: auto;
}

/* Override old 4-col shop grids from earlier fullscreen CSS */
@media (min-width: 900px) {
  #nto-minigame [data-mg-shop-list]:not(.mg-store-list),
  #nto-minigame [data-mg-tfshop-list] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px) {
  #nto-minigame [data-mg-shop-list]:not(.mg-store-list),
  #nto-minigame [data-mg-tfshop-list] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1200px) {
  #nto-minigame [data-mg-shop-list]:not(.mg-store-list),
  #nto-minigame [data-mg-tfshop-list] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Mode cards ? larger touch targets */
#nto-minigame .mg-mode-card {
  min-height: 3.25rem;
  border-radius: 0.6rem;
}

/* Rank tabs in toolbar */
#nto-minigame .mg-sheet-toolbar .mg-rank-tab {
  min-height: 2.15rem;
  padding: 0.4rem 0.7rem;
}

/* Sheet helpers */
#nto-minigame .mg-sheet-foot.is-spread { justify-content: space-between; }
#nto-minigame .mg-sheet-foot.is-dock {
  display: block;
  padding-top: 0.55rem;
  padding-bottom: max(0.55rem, env(safe-area-inset-bottom));
}
#nto-minigame .mg-sheet-toolbar.is-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}
#nto-minigame .mg-sheet-toolbar.is-compact {
  border-bottom: 0;
  padding-bottom: 0.35rem;
  background: transparent;
}
#nto-minigame .mg-sheet-inline-head {
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#nto-minigame .mg-sheet-inline-label { margin: 0; }
#nto-minigame .mg-sheet-meta {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
#nto-minigame .mg-sheet-full { width: 100%; }

#nto-minigame .mg-sheet-split-side {
  min-height: 0;
  overflow-y: auto;
}
@media (max-width: 719px) {
  #nto-minigame [data-mg-paperdoll] {
    max-height: 38vh;
  }
  #nto-minigame .mg-sheet-head-actions {
    gap: 0.35rem;
  }
  #nto-minigame .mg-sheet-gold {
    padding: 0.3rem 0.5rem;
  }
  #nto-minigame .mg-sheet-gold strong { font-size: 0.9rem; }
  #nto-minigame .mg-sheet-close,
  #nto-minigame .mg-sheet-primary {
    min-height: 2.75rem;
  }
}
@media (min-width: 720px) {
  #nto-minigame .mg-sheet-split-side {
    overflow-y: auto;
  }
}

/* Keep shop list body padding without double flex quirks */
#nto-minigame .mg-shop-list.mg-sheet-body {
  align-content: start;
}

/* Inventory cards with many actions */
#nto-minigame .mg-shop-item-actions .mg-shop-buy,
#nto-minigame .mg-shop-item-actions .mg-shop-equip {
  flex: 1 1 calc(50% - 0.2rem);
}
@media (min-width: 480px) {
  #nto-minigame .mg-shop-item-actions .mg-shop-buy,
  #nto-minigame .mg-shop-item-actions .mg-shop-equip {
    flex: 0 0 auto;
    width: 100%;
    min-width: 5.5rem;
  }
}

/* Craft queue inside sheet toolbar */
#nto-minigame .mg-sheet-toolbar.mg-craft-queue-wrap {
  flex-shrink: 0;
}
#nto-minigame .mg-sheet-body.mg-craft-list {
  padding-top: 0.5rem;
}

/* Leaderboard rows ? touch height */
#nto-minigame .mg-leaderboard.mg-sheet-body li {
  min-height: 2.75rem;
}

/* Pause: Continuar as primary already; ensure head alignment */
#nto-minigame [data-mg-pause] .mg-sheet-primary { min-width: 6.5rem; }
#nto-minigame .mg-sheet-toolbar.mg-craft-queue-wrap {
  padding: 0.55rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.18);
}
#nto-minigame .mg-sheet-toolbar .mg-craft-section-head { margin-bottom: 0; }

/* ==========================================================================
   Item cards + buttons (shop / backpack / transforms) ? clean reset
   ========================================================================== */
#nto-minigame .mg-shop-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
  align-content: start;
}
@media (min-width: 700px) {
  #nto-minigame .mg-shop-list,
  #nto-minigame [data-mg-shop-list]:not(.mg-store-list),
  #nto-minigame [data-mg-tfshop-list] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1100px) {
  #nto-minigame [data-mg-shop-list]:not(.mg-store-list),
  #nto-minigame [data-mg-tfshop-list] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
#nto-minigame .mg-sheet-split-main .mg-shop-list,
#nto-minigame [data-mg-backpack-list] {
  grid-template-columns: 1fr !important;
}
@media (min-width: 900px) {
  #nto-minigame .mg-sheet-split-main .mg-shop-list,
  #nto-minigame [data-mg-backpack-list] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

#nto-minigame .mg-shop-item {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  gap: 0.65rem 0.75rem !important;
  min-height: 0 !important;
  padding: 0.7rem 0.75rem !important;
  border-radius: 0.55rem !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  background: rgba(255,255,255,0.028) !important;
  box-shadow: none !important;
}
#nto-minigame .mg-shop-item.is-equipped {
  border-color: rgba(52,211,153,0.35) !important;
  background: rgba(16,185,129,0.08) !important;
}
#nto-minigame .mg-shop-item > img,
#nto-minigame .mg-shop-item img:first-child {
  grid-area: unset !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  flex: 0 0 2.5rem !important;
  margin-top: 0.1rem;
  border-radius: 0.4rem !important;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.4) !important;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-shop-item-info {
  grid-area: unset !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  padding-right: 0.15rem;
}
#nto-minigame .mg-shop-item-name {
  margin: 0;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25;
  color: rgba(255,255,255,0.92) !important;
}
#nto-minigame .mg-shop-item-desc {
  margin: 0.2rem 0 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: rgba(255,255,255,0.4) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#nto-minigame .mg-shop-item-owned {
  margin: 0.28rem 0 0 !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  color: rgba(251,191,36,0.75) !important;
}

/* Action bar ? always full-width row under the info */
#nto-minigame .mg-shop-item-actions {
  grid-area: unset !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 0.35rem !important;
  width: 100% !important;
  flex: 1 0 100% !important;
  margin: 0 !important;
  padding-top: 0.15rem;
}

/* Unified item buttons */
#nto-minigame .mg-item-btn,
#nto-minigame .mg-shop-buy,
#nto-minigame .mg-shop-equip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-height: 2.2rem !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0.4rem 0.65rem !important;
  border-radius: 0.4rem !important;
  border: 1px solid transparent !important;
  font-family: inherit;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
}
#nto-minigame .mg-item-btn:disabled,
#nto-minigame .mg-shop-buy:disabled,
#nto-minigame .mg-shop-equip:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

#nto-minigame .mg-item-btn.is-buy,
#nto-minigame .mg-shop-buy {
  border-color: rgba(251,191,36,0.28) !important;
  background: rgba(251,191,36,0.1) !important;
  color: #fbbf24 !important;
}
#nto-minigame .mg-item-btn.is-buy:hover:not(:disabled),
#nto-minigame .mg-shop-buy:hover:not(:disabled) {
  background: rgba(251,191,36,0.18) !important;
  border-color: rgba(251,191,36,0.45) !important;
}

#nto-minigame .mg-item-btn.is-equip,
#nto-minigame .mg-shop-equip {
  border-color: rgba(52,211,153,0.28) !important;
  background: rgba(16,185,129,0.1) !important;
  color: #6ee7b7 !important;
}
#nto-minigame .mg-item-btn.is-equip:hover:not(:disabled),
#nto-minigame .mg-shop-equip:hover:not(:disabled) {
  background: rgba(16,185,129,0.18) !important;
  border-color: rgba(52,211,153,0.45) !important;
}

#nto-minigame .mg-item-btn.is-use {
  border-color: rgba(56,189,248,0.28) !important;
  background: rgba(14,165,233,0.1) !important;
  color: #7dd3fc !important;
}
#nto-minigame .mg-item-btn.is-use:hover:not(:disabled) {
  background: rgba(14,165,233,0.18) !important;
  border-color: rgba(56,189,248,0.45) !important;
}

#nto-minigame .mg-item-btn.is-danger {
  border-color: rgba(244,63,94,0.22) !important;
  background: rgba(244,63,94,0.08) !important;
  color: #fb7185 !important;
  flex: 0 0 auto !important;
  min-width: 4.5rem !important;
}
#nto-minigame .mg-item-btn.is-danger:hover:not(:disabled) {
  background: rgba(244,63,94,0.16) !important;
  border-color: rgba(244,63,94,0.4) !important;
}

/* Depot / gear bag ? larger slots in full-height panes */
#nto-minigame .mg-sheet-pane .mg-gear-bag,
#nto-minigame [data-mg-depot-list],
#nto-minigame [data-mg-depot-bag] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr)) !important;
  gap: 0.4rem !important;
  max-height: none !important;
  flex: 1 1 auto !important;
  min-height: 8rem;
  align-content: start;
  padding: 0.15rem;
  overflow-y: auto !important;
}
#nto-minigame .mg-sheet-pane .mg-gear-bag-item,
#nto-minigame [data-mg-depot] .mg-gear-bag-item {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  min-height: 3.1rem;
  border-radius: 0.45rem !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(0,0,0,0.35) !important;
  transition: border-color 0.12s, background 0.12s, transform 0.1s;
}
#nto-minigame .mg-sheet-pane .mg-gear-bag-item:hover,
#nto-minigame [data-mg-depot] .mg-gear-bag-item:hover {
  border-color: rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.05) !important;
  transform: translateY(-1px);
}
#nto-minigame .mg-sheet-pane .mg-gear-bag-item img,
#nto-minigame [data-mg-depot] .mg-gear-bag-item img {
  width: 70% !important;
  height: 70% !important;
  max-width: 2.25rem;
  max-height: 2.25rem;
}
#nto-minigame .mg-sheet-pane .mg-gear-bag-item .mg-inv-qty,
#nto-minigame [data-mg-depot] .mg-gear-bag-item .mg-inv-qty {
  position: absolute;
  right: 0.2rem;
  bottom: 0.15rem;
  font-size: 9px;
  font-weight: 800;
  color: #fbbf24;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

/* Pane panels look like real inventory frames */
#nto-minigame .mg-sheet-pane {
  padding: 0.55rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.22);
}

/* Native Fullscreen API ? some a chrome do browser */
html.mg-native-fs,
html.mg-native-fs body {
  background: #050506 !important;
  overflow: hidden !important;
}
#nto-minigame.is-native-fs,
#nto-minigame:fullscreen,
#nto-minigame:-webkit-full-screen,
[data-mg-stage]:fullscreen,
[data-mg-stage]:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #050506 !important;
}
#nto-minigame.is-native-fs .page-header,
#nto-minigame:fullscreen .page-header,
#nto-minigame:-webkit-full-screen .page-header,
#nto-minigame.is-native-fs [data-mg-footerbar],
#nto-minigame:fullscreen [data-mg-footerbar],
#nto-minigame:-webkit-full-screen [data-mg-footerbar] {
  display: none !important;
}
#nto-minigame.is-native-fs [data-mg-stage],
#nto-minigame:fullscreen [data-mg-stage],
#nto-minigame:-webkit-full-screen [data-mg-stage],
[data-mg-stage]:fullscreen,
[data-mg-stage]:-webkit-full-screen {
  height: 100% !important;
  height: 100dvh !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   Shop / sheets mobile fix ? 1 col, buttons solid, hide HUD menu
   ========================================================================== */

/* Menu flutuante n?o pode ficar por cima dos sheets */
#nto-minigame:has([data-mg-shop]:not(.hidden)) .mg-topmenu,
#nto-minigame:has([data-mg-shop]:not(.hidden)) .mg-topmenu-show,
#nto-minigame:has([data-mg-arts-shop]:not(.hidden)) .mg-topmenu,
#nto-minigame:has([data-mg-arts-shop]:not(.hidden)) .mg-topmenu-show,
#nto-minigame:has([data-mg-backpack]:not(.hidden)) .mg-topmenu,
#nto-minigame:has([data-mg-backpack]:not(.hidden)) .mg-topmenu-show,
#nto-minigame:has([data-mg-depot]:not(.hidden)) .mg-topmenu,
#nto-minigame:has([data-mg-depot]:not(.hidden)) .mg-topmenu-show,
#nto-minigame:has([data-mg-craft]:not(.hidden)) .mg-topmenu,
#nto-minigame:has([data-mg-craft]:not(.hidden)) .mg-topmenu-show,
#nto-minigame:has([data-mg-tfshop]:not(.hidden)) .mg-topmenu,
#nto-minigame:has([data-mg-tfshop]:not(.hidden)) .mg-topmenu-show,
#nto-minigame:has([data-mg-ranking]:not(.hidden)) .mg-topmenu,
#nto-minigame:has([data-mg-ranking]:not(.hidden)) .mg-topmenu-show,
#nto-minigame:has([data-mg-profile]:not(.hidden)) .mg-topmenu,
#nto-minigame:has([data-mg-path]:not(.hidden)) .mg-topmenu,
#nto-minigame:has([data-mg-chat]:not(.hidden)) .mg-topmenu,
#nto-minigame:has([data-mg-chat]:not(.hidden)) .mg-topmenu-show,
#nto-minigame:has([data-mg-friends]:not(.hidden)) .mg-topmenu,
#nto-minigame:has([data-mg-friends]:not(.hidden)) .mg-topmenu-show,
#nto-minigame:has([data-mg-admin]:not(.hidden)) .mg-topmenu,
#nto-minigame:has([data-mg-admin]:not(.hidden)) .mg-topmenu-show,
#nto-minigame:has([data-mg-weapon-shop]:not(.hidden)) .mg-topmenu,
#nto-minigame:has([data-mg-weapon-shop]:not(.hidden)) .mg-topmenu-show,
#nto-minigame:has([data-mg-pause]:not(.hidden)) .mg-topmenu {
  display: none !important;
}

/* Mobile: sempre 1 coluna na loja (paisagem iPhone passa de 700px e quebrava) */
#nto-minigame.is-mobile-ui [data-mg-shop-list]:not(.mg-store-list),
#nto-minigame.is-mobile-ui [data-mg-tfshop-list],
#nto-minigame.is-mobile-ui [data-mg-backpack-list],
#nto-minigame.is-mobile-landscape [data-mg-shop-list]:not(.mg-store-list),
#nto-minigame.is-mobile-landscape [data-mg-tfshop-list],
#nto-minigame.is-mobile-landscape [data-mg-backpack-list],
#nto-minigame.is-mobile-ui .mg-shop-list,
#nto-minigame.is-mobile-landscape .mg-shop-list {
  grid-template-columns: 1fr !important;
  max-height: none !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  gap: 0.45rem !important;
  padding: 0.65rem 0.75rem !important;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
}

/* Header da loja compacto no mobile */
#nto-minigame.is-mobile-ui .mg-sheet-head,
#nto-minigame.is-mobile-landscape .mg-sheet-head {
  padding: 0.55rem 0.75rem !important;
  padding-top: max(0.55rem, env(safe-area-inset-top)) !important;
  gap: 0.5rem !important;
}
#nto-minigame.is-mobile-ui .mg-sheet-title,
#nto-minigame.is-mobile-landscape .mg-sheet-title {
  font-size: 1.15rem !important;
}
#nto-minigame.is-mobile-ui .mg-sheet-hint,
#nto-minigame.is-mobile-landscape .mg-sheet-hint {
  padding: 0.4rem 0.75rem !important;
  font-size: 10px !important;
}
#nto-minigame.is-mobile-ui .mg-sheet-close,
#nto-minigame.is-mobile-landscape .mg-sheet-close {
  min-height: 2.35rem !important;
  min-width: 3.4rem !important;
  padding: 0.4rem 0.7rem !important;
}

/* Card mobile: info + bot?es claros */
#nto-minigame.is-mobile-ui .mg-shop-item,
#nto-minigame.is-mobile-landscape .mg-shop-item {
  padding: 0.65rem !important;
  gap: 0.55rem 0.6rem !important;
  border-radius: 0.5rem !important;
}
#nto-minigame.is-mobile-ui .mg-shop-item > img,
#nto-minigame.is-mobile-ui .mg-shop-item img:first-child,
#nto-minigame.is-mobile-landscape .mg-shop-item > img,
#nto-minigame.is-mobile-landscape .mg-shop-item img:first-child {
  width: 2.35rem !important;
  height: 2.35rem !important;
  flex-basis: 2.35rem !important;
}
#nto-minigame.is-mobile-ui .mg-shop-item-desc,
#nto-minigame.is-mobile-landscape .mg-shop-item-desc {
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
  font-size: 10px !important;
}
#nto-minigame.is-mobile-ui .mg-shop-item-actions,
#nto-minigame.is-mobile-landscape .mg-shop-item-actions {
  gap: 0.4rem !important;
  padding-top: 0.2rem !important;
}

/* Bot?es s?lidos ? contraste alto no OLED */
#nto-minigame .mg-item-btn,
#nto-minigame .mg-shop-buy,
#nto-minigame .mg-shop-equip {
  min-height: 2.45rem !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}
#nto-minigame .mg-item-btn.is-buy,
#nto-minigame .mg-shop-buy {
  border-color: rgba(251,191,36,0.55) !important;
  background: rgba(251,191,36,0.18) !important;
  color: #fde68a !important;
}
#nto-minigame .mg-item-btn.is-equip,
#nto-minigame .mg-shop-equip {
  border-color: rgba(52,211,153,0.55) !important;
  background: rgba(16,185,129,0.2) !important;
  color: #a7f3d0 !important;
}
#nto-minigame .mg-item-btn.is-use {
  border-color: rgba(56,189,248,0.5) !important;
  background: rgba(14,165,233,0.18) !important;
  color: #bae6fd !important;
}
#nto-minigame .mg-item-btn.is-danger {
  border-color: rgba(251,113,133,0.45) !important;
  background: rgba(244,63,94,0.14) !important;
  color: #fecdd3 !important;
}

/* Shop z-index (caso HTML antigo em cache) */
#nto-minigame [data-mg-shop],
#nto-minigame [data-mg-tfshop],
#nto-minigame [data-mg-craft] {
  z-index: 46 !important;
}
#nto-minigame [data-mg-arts-shop] {
  z-index: 47 !important;
}
#nto-minigame [data-mg-topmenu],
#nto-minigame [data-mg-topmenu-show] {
  z-index: 35 !important;
}

/* ==========================================================================
   FINAL mobile shop/depot layout ? kills overlapping / mail takeover
   ========================================================================== */

/* Cards: coluna fixa ? main em cima, bot?es embaixo. Sem grid lateral. */
#nto-minigame .mg-shop-item {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.55rem !important;
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.7rem !important;
  overflow: visible !important;
  border-radius: 0.5rem !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.03) !important;
  box-shadow: none !important;
}
#nto-minigame .mg-shop-item-main {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0.65rem !important;
  min-width: 0 !important;
  width: 100% !important;
}
#nto-minigame .mg-shop-item-main > img,
#nto-minigame .mg-shop-item-main img {
  width: 2.4rem !important;
  height: 2.4rem !important;
  flex: 0 0 2.4rem !important;
  margin: 0 !important;
  border-radius: 0.35rem !important;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.45) !important;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-shop-item-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  grid-area: unset !important;
}
#nto-minigame .mg-shop-item-name {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #fff !important;
}
#nto-minigame .mg-shop-item-desc {
  margin: 0.2rem 0 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: rgba(255,255,255,0.42) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#nto-minigame .mg-shop-item-owned {
  margin: 0.25rem 0 0 !important;
  font-size: 10px !important;
  color: #fbbf24 !important;
}
#nto-minigame .mg-shop-item-actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 0.4rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  grid-area: unset !important;
}
#nto-minigame .mg-item-btn,
#nto-minigame .mg-shop-buy,
#nto-minigame .mg-shop-equip {
  position: static !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  min-height: 2.5rem !important;
  min-width: 4.5rem !important;
  margin: 0 !important;
  padding: 0.45rem 0.7rem !important;
  border-radius: 0.4rem !important;
  border: 1px solid transparent !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
#nto-minigame .mg-item-btn.is-buy,
#nto-minigame .mg-shop-buy {
  border-color: rgba(251,191,36,0.55) !important;
  background: rgba(251,191,36,0.2) !important;
  color: #fde68a !important;
}
#nto-minigame .mg-item-btn.is-equip,
#nto-minigame .mg-shop-equip {
  border-color: rgba(52,211,153,0.55) !important;
  background: rgba(16,185,129,0.22) !important;
  color: #a7f3d0 !important;
}
#nto-minigame .mg-item-btn.is-use {
  border-color: rgba(56,189,248,0.5) !important;
  background: rgba(14,165,233,0.2) !important;
  color: #bae6fd !important;
}
#nto-minigame .mg-item-btn.is-danger {
  flex: 0 0 auto !important;
  border-color: rgba(251,113,133,0.45) !important;
  background: rgba(244,63,94,0.16) !important;
  color: #fecdd3 !important;
}

/* Lista loja: 1 col no mobile / landscape */
#nto-minigame.is-mobile-ui .mg-shop-list,
#nto-minigame.is-mobile-landscape .mg-shop-list,
#nto-minigame.is-compact-mobile .mg-shop-list,
#nto-minigame.is-mobile-ui [data-mg-shop-list]:not(.mg-store-list),
#nto-minigame.is-mobile-landscape [data-mg-shop-list]:not(.mg-store-list),
#nto-minigame.is-compact-mobile [data-mg-shop-list]:not(.mg-store-list),
#nto-minigame.is-mobile-ui [data-mg-tfshop-list],
#nto-minigame.is-mobile-landscape [data-mg-tfshop-list],
#nto-minigame.is-mobile-ui [data-mg-backpack-list],
#nto-minigame.is-mobile-landscape [data-mg-backpack-list] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.5rem !important;
  max-height: none !important;
}

/* Depot: split sempre vis?vel; correio colaps?vel no rodap? */
#nto-minigame.is-mobile-ui [data-mg-depot] .mg-sheet-split,
#nto-minigame.is-mobile-landscape [data-mg-depot] .mg-sheet-split,
#nto-minigame.is-compact-mobile [data-mg-depot] .mg-sheet-split {
  flex: 1 1 auto !important;
  min-height: 10rem !important;
  overflow: hidden !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.45rem !important;
  padding: 0.55rem 0.65rem !important;
}
#nto-minigame.is-mobile-ui [data-mg-depot] .mg-sheet-pane,
#nto-minigame.is-mobile-landscape [data-mg-depot] .mg-sheet-pane,
#nto-minigame.is-compact-mobile [data-mg-depot] .mg-sheet-pane {
  min-height: 0 !important;
  overflow: hidden !important;
}
#nto-minigame.is-mobile-ui [data-mg-depot-list],
#nto-minigame.is-mobile-ui [data-mg-depot-bag],
#nto-minigame.is-mobile-landscape [data-mg-depot-list],
#nto-minigame.is-mobile-landscape [data-mg-depot-bag],
#nto-minigame.is-compact-mobile [data-mg-depot-list],
#nto-minigame.is-compact-mobile [data-mg-depot-bag] {
  max-height: none !important;
  min-height: 6rem !important;
  flex: 1 1 auto !important;
}
#nto-minigame.is-mobile-ui .mg-mail-section,
#nto-minigame.is-mobile-landscape .mg-mail-section,
#nto-minigame.is-compact-mobile .mg-mail-section {
  position: relative !important;
  flex: 0 0 auto !important;
  max-height: none !important;
  padding: 0.45rem 0.65rem max(0.45rem, env(safe-area-inset-bottom)) !important;
  background: rgba(0,0,0,0.35) !important;
  border-top: 1px solid rgba(255,255,255,0.06);
  z-index: 2;
}
#nto-minigame.is-mobile-ui .mg-mail-body.is-collapsed,
#nto-minigame.is-mobile-landscape .mg-mail-body.is-collapsed,
#nto-minigame.is-compact-mobile .mg-mail-body.is-collapsed {
  display: none !important;
}
#nto-minigame.is-mobile-ui .mg-mail-body:not(.is-collapsed),
#nto-minigame.is-mobile-landscape .mg-mail-body:not(.is-collapsed),
#nto-minigame.is-compact-mobile .mg-mail-body:not(.is-collapsed) {
  display: flex !important;
  flex-direction: column !important;
  max-height: min(42dvh, 16rem) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}
#nto-minigame.is-mobile-ui .mg-mail-toggle,
#nto-minigame.is-mobile-landscape .mg-mail-toggle,
#nto-minigame.is-compact-mobile .mg-mail-toggle {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Interact ? um bot?o limpo ? direita (acima do sprint) */
#nto-minigame .mg-interact-hint {
  inset: auto;
  right: max(0.85rem, env(safe-area-inset-right));
  bottom: calc(5.85rem + env(safe-area-inset-bottom));
  left: auto;
  padding: 0;
  text-align: right;
  z-index: 34;
}
#nto-minigame .mg-interact-hint:not(.hidden) {
  pointer-events: none;
  display: block !important;
}
#nto-minigame .mg-interact-action {
  pointer-events: auto !important;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-width: 4.25rem;
  min-height: 3.35rem;
  padding: 0.55rem 0.85rem;
  border: 0;
  border-radius: 1rem;
  background: rgba(8, 8, 10, 0.82);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.1s ease, background 0.12s ease, opacity 0.12s ease;
}
#nto-minigame .mg-interact-action:active {
  transform: scale(0.96);
  background: rgba(245, 158, 11, 0.28);
}
#nto-minigame .mg-interact-verb {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1;
}
#nto-minigame .mg-interact-name {
  font-size: 13px;
  font-weight: 700;
  color: #fbbf24;
  line-height: 1.15;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nto-minigame .mg-interact-name.text-rose-300 { color: #fda4af !important; }
#nto-minigame .mg-interact-name.text-sky-300 { color: #7dd3fc !important; }
#nto-minigame .mg-interact-name.text-amber-300 { color: #fbbf24 !important; }
#nto-minigame .mg-interact-name.text-emerald-300 { color: #6ee7b7 !important; }

/* Taskbar de canal ? ba? / revive */
#nto-minigame .mg-channel-bar {
  left: 50%;
  right: auto;
  bottom: calc(6.4rem + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(22rem, calc(100% - 1.5rem));
  z-index: 36;
}
#nto-minigame .mg-channel-bar:not(.hidden) {
  display: block !important;
}
#nto-minigame .mg-channel-card {
  padding: 0.7rem 0.9rem 0.65rem;
  border-radius: 0.9rem;
  background: rgba(8, 8, 12, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#nto-minigame .mg-channel-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
#nto-minigame .mg-channel-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
}
#nto-minigame .mg-channel-pct {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.55);
}
#nto-minigame .mg-channel-track {
  height: 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
#nto-minigame .mg-channel-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.35);
  transition: width 0.05s linear;
}
#nto-minigame .mg-channel-bar.is-revive .mg-channel-fill {
  background: linear-gradient(90deg, #0284c7, #38bdf8);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.4);
}
#nto-minigame .mg-channel-hint {
  margin: 0.35rem 0 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}
#nto-minigame.is-mobile-playing .mg-channel-bar,
#nto-minigame.is-mobile-ui:not(.is-lobby) .mg-channel-bar {
  bottom: calc(17.2rem + env(safe-area-inset-bottom));
}

/* FAB antigo ? escondido (a??o ?nica no hint) */
#nto-minigame .mg-interact-fab {
  display: none !important;
}

#nto-minigame.is-mobile-ui .mg-interact-hint,
#nto-minigame.is-mobile-landscape .mg-interact-hint,
#nto-minigame.is-compact-mobile .mg-interact-hint,
#nto-minigame.is-lobby .mg-interact-hint {
  right: max(0.75rem, env(safe-area-inset-right)) !important;
  left: auto !important;
  bottom: calc(5.85rem + env(safe-area-inset-bottom)) !important;
  transform: none !important;
}
#nto-minigame.is-mobile-ui:not(.is-lobby) .mg-interact-hint,
#nto-minigame.is-mobile-playing .mg-interact-hint {
  /* acima do pad de skills + sprint */
  right: max(0.85rem, env(safe-area-inset-right));
  bottom: calc(16.5rem + env(safe-area-inset-bottom));
}
@media (min-width: 640px) {
  #nto-minigame:not(.is-mobile-ui):not(.is-compact-mobile) .mg-interact-hint {
    left: 50%;
    right: auto;
    bottom: 5.5rem;
    transform: translateX(-50%);
    text-align: center;
  }
  #nto-minigame:not(.is-mobile-ui):not(.is-compact-mobile) .mg-interact-action {
    flex-direction: row;
    gap: 0.45rem;
    min-width: 0;
    min-height: 0;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    background: rgba(8, 8, 10, 0.72);
  }
  #nto-minigame:not(.is-mobile-ui):not(.is-compact-mobile) .mg-interact-verb {
    letter-spacing: 0.08em;
  }
}

/* Cooldown ring on skill buttons */
#nto-minigame .mg-skill-btn {
  --cd-pct: 100;
}
#nto-minigame .mg-skill-ring {
  position: absolute;
  inset: -3px;
  border-radius: 999px;
  z-index: 0;
  pointer-events: none;
  background: conic-gradient(
    from -90deg,
    var(--skill-color) calc(var(--cd-pct) * 1%),
    rgba(255, 255, 255, 0.14) 0
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
}
#nto-minigame .mg-skill-btn.is-cd .mg-skill-ring {
  filter: saturate(0.9);
}
#nto-minigame .mg-skill-btn.is-locked .mg-skill-ring {
  background: conic-gradient(from -90deg, rgba(148,163,184,0.35) 100%, transparent 0);
}
#nto-minigame .mg-skill-btn .mg-skill-glyph,
#nto-minigame .mg-skill-btn .mg-skill-key,
#nto-minigame .mg-skill-btn .mg-skill-cd {
  z-index: 2;
}

/* Sprint ? canto direito, longe do joystick */
#nto-minigame .mg-sprint-btn {
  --skill-color: #38bdf8;
  position: absolute;
  right: max(0.85rem, env(safe-area-inset-right));
  bottom: calc(0.85rem + env(safe-area-inset-bottom));
  z-index: 24;
  display: none;
  align-items: center;
  justify-content: center;
  width: 3.55rem;
  height: 3.55rem;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 32% 28%, rgba(56, 189, 248, 0.28), transparent 58%),
    rgba(8, 8, 10, 0.82);
  color: #e0f2fe;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#nto-minigame .mg-sprint-btn .mg-sprint-glyph {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
#nto-minigame .mg-sprint-btn .mg-util-label {
  position: absolute;
  bottom: -0.95rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
#nto-minigame .mg-sprint-btn.is-on {
  background:
    radial-gradient(circle at 32% 28%, rgba(56, 189, 248, 0.5), transparent 58%),
    rgba(8, 47, 73, 0.9);
  box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.28), 0 10px 22px rgba(0, 0, 0, 0.45);
  color: #fff;
}
#nto-minigame .mg-sprint-btn .mg-skill-key {
  display: none;
}
#nto-minigame.is-mobile-ui .mg-sprint-btn,
#nto-minigame.is-mobile-landscape .mg-sprint-btn,
#nto-minigame.is-compact-mobile .mg-sprint-btn,
#nto-minigame.is-mobile-playing .mg-sprint-btn {
  display: none !important;
}
#nto-minigame.is-lobby .mg-sprint-btn,
#nto-minigame.is-lobby.is-mobile-ui .mg-sprint-btn,
#nto-minigame.is-lobby.is-mobile-playing .mg-sprint-btn,
#nto-minigame.is-lobby.is-compact-mobile .mg-sprint-btn,
#nto-minigame.is-lobby.is-mobile-landscape .mg-sprint-btn {
  display: inline-flex !important;
}
/* Lobby: joy esquerda, sprint bem na direita */
#nto-minigame.is-lobby .mg-hud-dock {
  display: block !important;
  padding: 0.55rem max(0.55rem, env(safe-area-inset-right)) max(0.55rem, env(safe-area-inset-bottom)) max(0.55rem, env(safe-area-inset-left));
}
/* Joystick apenas no mobile/touch ? desktop usa WASD */
#nto-minigame:not(.is-mobile-ui):not(.is-compact-mobile):not(.is-mobile-playing) [data-mg-joy] {
  display: none !important;
  pointer-events: none !important;
}
#nto-minigame.is-lobby.is-mobile-ui [data-mg-joy],
#nto-minigame.is-lobby.is-compact-mobile [data-mg-joy],
#nto-minigame.is-lobby.is-mobile-playing [data-mg-joy] {
  display: block !important;
  position: absolute;
  left: max(0.55rem, env(safe-area-inset-left));
  bottom: max(0.55rem, env(safe-area-inset-bottom));
}
#nto-minigame.is-lobby .mg-sprint-btn,
#nto-minigame.is-lobby.is-mobile-ui .mg-sprint-btn,
#nto-minigame.is-lobby.is-mobile-playing .mg-sprint-btn,
#nto-minigame.is-lobby.is-compact-mobile .mg-sprint-btn,
#nto-minigame.is-lobby.is-mobile-landscape .mg-sprint-btn {
  left: auto !important;
  right: max(0.75rem, env(safe-area-inset-right)) !important;
  bottom: calc(0.85rem + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
}
@media (min-width: 640px) {
  #nto-minigame.is-lobby:not(.is-mobile-ui):not(.is-compact-mobile) .mg-sprint-btn {
    display: none !important;
  }
}
/* Em combate: sem bot?o de sprint (s? lobby) */
#nto-minigame.is-mobile-ui:not(.is-lobby) .mg-sprint-btn,
#nto-minigame.is-mobile-playing:not(.is-lobby) .mg-sprint-btn,
#nto-minigame.is-compact-mobile:not(.is-lobby) .mg-sprint-btn {
  display: none !important;
}

/* ==========================================================================
   SHOP / BAG CARDS ? layout definitivo (mobile-first, sem overlap)
   ========================================================================== */
#nto-minigame .mg-shop-list > .mg-shop-item,
#nto-minigame [data-mg-shop-list]:not(.mg-store-list) > .mg-shop-item,
#nto-minigame [data-mg-tfshop-list] > .mg-shop-item,
#nto-minigame [data-mg-backpack-list] > .mg-shop-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  grid-template-areas: none !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  gap: 0.65rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.75rem !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: 0.55rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
}

/* Craft-card markup: coluna flex (nao grid legado) */
#nto-minigame .mg-shop-list > .mg-shop-item:has(> .mg-craft-card-actions),
#nto-minigame [data-mg-shop-list]:not(.mg-store-list) > .mg-shop-item:has(> .mg-craft-card-actions),
#nto-minigame [data-mg-tfshop-list] > .mg-shop-item:has(> .mg-craft-card-actions),
#nto-minigame [data-mg-backpack-list] > .mg-shop-item:has(> .mg-craft-card-actions) {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

#nto-minigame .mg-shop-list > .mg-shop-item.is-equipped,
#nto-minigame [data-mg-shop-list]:not(.mg-store-list) > .mg-shop-item.is-equipped,
#nto-minigame [data-mg-tfshop-list] > .mg-shop-item.is-equipped,
#nto-minigame [data-mg-backpack-list] > .mg-shop-item.is-equipped {
  border-color: rgba(52, 211, 153, 0.4) !important;
  background: rgba(16, 185, 129, 0.08) !important;
}

#nto-minigame .mg-shop-item-main {
  display: grid !important;
  grid-template-columns: 2.5rem minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  align-items: start !important;
  gap: 0.65rem !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#nto-minigame .mg-shop-item-main > img,
#nto-minigame .mg-shop-item-main img {
  width: 2.5rem !important;
  height: 2.5rem !important;
  max-width: 2.5rem !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0.4rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  object-fit: contain !important;
  image-rendering: pixelated;
}

#nto-minigame .mg-shop-item-info {
  display: block !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-area: unset !important;
}

#nto-minigame .mg-shop-item-name {
  margin: 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #fff !important;
}

#nto-minigame .mg-shop-item-desc {
  margin: 0.2rem 0 0 !important;
  font-size: 0.6875rem !important;
  line-height: 1.35 !important;
  color: rgba(255, 255, 255, 0.42) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#nto-minigame .mg-shop-item-owned {
  margin: 0.25rem 0 0 !important;
  font-size: 0.625rem !important;
  font-weight: 650 !important;
  color: #fbbf24 !important;
}

#nto-minigame .mg-shop-item-actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)) !important;
  gap: 0.4rem !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  grid-area: unset !important;
  pointer-events: auto !important;
}

#nto-minigame .mg-shop-item-actions .mg-item-btn,
#nto-minigame .mg-shop-item-actions .mg-shop-buy,
#nto-minigame .mg-shop-item-actions .mg-shop-equip {
  position: relative !important;
  z-index: 2 !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 2.75rem !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.55rem 0.65rem !important;
  border-radius: 0.45rem !important;
  border-style: solid !important;
  border-width: 1px !important;
  font-size: 0.6875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

#nto-minigame .mg-shop-item-actions .mg-item-btn.is-buy,
#nto-minigame .mg-shop-item-actions .mg-shop-buy {
  border-color: rgba(251, 191, 36, 0.55) !important;
  background: rgba(251, 191, 36, 0.22) !important;
  color: #fde68a !important;
}

#nto-minigame .mg-shop-item-actions .mg-item-btn.is-equip,
#nto-minigame .mg-shop-item-actions .mg-shop-equip {
  border-color: rgba(52, 211, 153, 0.55) !important;
  background: rgba(16, 185, 129, 0.24) !important;
  color: #a7f3d0 !important;
}

#nto-minigame .mg-shop-item-actions .mg-item-btn.is-use {
  border-color: rgba(56, 189, 248, 0.5) !important;
  background: rgba(14, 165, 233, 0.22) !important;
  color: #bae6fd !important;
}

#nto-minigame .mg-shop-item-actions .mg-item-btn.is-danger {
  border-color: rgba(251, 113, 133, 0.45) !important;
  background: rgba(244, 63, 94, 0.18) !important;
  color: #fecdd3 !important;
}

#nto-minigame .mg-shop-item-actions .mg-item-btn:disabled,
#nto-minigame .mg-shop-item-actions .mg-shop-buy:disabled,
#nto-minigame .mg-shop-item-actions .mg-shop-equip:disabled {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
}

/* Loja: 1 coluna em telas estreitas / mobile / landscape */
#nto-minigame .mg-shop-list,
#nto-minigame [data-mg-shop-list]:not(.mg-store-list),
#nto-minigame [data-mg-tfshop-list],
#nto-minigame [data-mg-backpack-list] {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.55rem !important;
  align-content: start !important;
}

@media (min-width: 900px) {
  #nto-minigame:not(.is-mobile-ui):not(.is-mobile-landscape):not(.is-compact-mobile) .mg-shop-list,
  #nto-minigame:not(.is-mobile-ui):not(.is-mobile-landscape):not(.is-compact-mobile) [data-mg-shop-list]:not(.mg-store-list),
  #nto-minigame:not(.is-mobile-ui):not(.is-mobile-landscape):not(.is-compact-mobile) [data-mg-tfshop-list] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1200px) {
  #nto-minigame:not(.is-mobile-ui):not(.is-mobile-landscape):not(.is-compact-mobile) [data-mg-shop-list]:not(.mg-store-list),
  #nto-minigame:not(.is-mobile-ui):not(.is-mobile-landscape):not(.is-compact-mobile) [data-mg-tfshop-list] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Em mobile: bot?es sempre em linha cheia, um ao lado do outro */
#nto-minigame.is-mobile-ui .mg-shop-item-actions,
#nto-minigame.is-mobile-landscape .mg-shop-item-actions,
#nto-minigame.is-compact-mobile .mg-shop-item-actions {
  grid-template-columns: 1fr 1fr !important;
}

#nto-minigame.is-mobile-ui .mg-shop-item-actions .mg-item-btn:only-child,
#nto-minigame.is-mobile-landscape .mg-shop-item-actions .mg-item-btn:only-child,
#nto-minigame.is-compact-mobile .mg-shop-item-actions .mg-item-btn:only-child {
  grid-column: 1 / -1 !important;
}

/* ==========================================================================
   Mail toggle ? mobile touch bar
   ========================================================================== */
#nto-minigame .mg-mail-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.65rem !important;
  width: 100% !important;
  min-height: 3rem !important;
  padding: 0.55rem 0.7rem !important;
  border: 0 !important;
  border-radius: 0.65rem !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, transform 0.1s ease;
}
#nto-minigame .mg-mail-toggle:active {
  transform: scale(0.985);
  background: rgba(251, 191, 36, 0.1) !important;
}
#nto-minigame .mg-mail-toggle[aria-expanded="true"] {
  background: rgba(251, 191, 36, 0.1) !important;
}
#nto-minigame .mg-mail-toggle-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.12rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
#nto-minigame .mg-mail-kicker {
  font-size: 0.625rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(251, 191, 36, 0.72) !important;
}
#nto-minigame .mg-mail-title {
  font-size: 0.875rem !important;
  font-weight: 750 !important;
  letter-spacing: 0.01em !important;
  color: #fef3c7 !important;
  line-height: 1.2 !important;
}
#nto-minigame .mg-mail-toggle-aside {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 0.28rem !important;
  flex-shrink: 0 !important;
}
#nto-minigame .mg-mail-toggle-fee {
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.42) !important;
  white-space: nowrap !important;
}
#nto-minigame .mg-mail-toggle-fee strong {
  color: #fbbf24 !important;
  font-weight: 800 !important;
}
#nto-minigame .mg-mail-toggle-cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 1.85rem !important;
  min-width: 4.25rem !important;
  padding: 0.3rem 0.7rem !important;
  border-radius: 999px !important;
  background: rgba(56, 189, 248, 0.16) !important;
  color: #7dd3fc !important;
  font-size: 0.6875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
#nto-minigame .mg-mail-toggle-cta em {
  font-style: normal !important;
  color: inherit !important;
}
#nto-minigame .mg-mail-toggle[aria-expanded="true"] .mg-mail-toggle-cta {
  background: rgba(251, 191, 36, 0.18) !important;
  color: #fde68a !important;
}

/* Compat: meta antigo some se ainda existir em cache */
#nto-minigame .mg-mail-toggle-meta {
  display: none !important;
}

#nto-minigame.is-mobile-ui .mg-mail-toggle,
#nto-minigame.is-mobile-landscape .mg-mail-toggle,
#nto-minigame.is-compact-mobile .mg-mail-toggle {
  min-height: 3.25rem !important;
  padding: 0.65rem 0.8rem !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
#nto-minigame.is-mobile-ui .mg-mail-title,
#nto-minigame.is-mobile-landscape .mg-mail-title,
#nto-minigame.is-compact-mobile .mg-mail-title {
  font-size: 0.9375rem !important;
}
#nto-minigame.is-mobile-ui .mg-mail-toggle-cta,
#nto-minigame.is-mobile-landscape .mg-mail-toggle-cta,
#nto-minigame.is-compact-mobile .mg-mail-toggle-cta {
  min-height: 2rem !important;
  min-width: 4.75rem !important;
  padding: 0.4rem 0.85rem !important;
  font-size: 0.75rem !important;
}
#nto-minigame.is-mobile-ui .mg-mail-section,
#nto-minigame.is-mobile-landscape .mg-mail-section,
#nto-minigame.is-compact-mobile .mg-mail-section {
  padding: 0.55rem 0.65rem max(0.55rem, env(safe-area-inset-bottom)) !important;
}

@media (min-width: 1100px) {
  #nto-minigame:not(.is-mobile-ui):not(.is-mobile-landscape):not(.is-compact-mobile) .mg-mail-toggle {
    background: transparent !important;
    padding: 0.2rem 0 !important;
    min-height: 0 !important;
    cursor: default !important;
    pointer-events: none !important;
  }
  #nto-minigame:not(.is-mobile-ui):not(.is-mobile-landscape):not(.is-compact-mobile) .mg-mail-toggle:active {
    transform: none;
  }
  #nto-minigame:not(.is-mobile-ui):not(.is-mobile-landscape):not(.is-compact-mobile) .mg-mail-toggle-cta {
    display: none !important;
  }
  #nto-minigame:not(.is-mobile-ui):not(.is-mobile-landscape):not(.is-compact-mobile) .mg-mail-toggle-aside {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
}

/* ==========================================================================
   Craft cards ? organiza??o clara (?cone / meta / custo)
   ========================================================================== */
#nto-minigame .mg-craft-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0.55rem !important;
  align-content: start !important;
}
@media (min-width: 900px) {
  #nto-minigame:not(.is-mobile-ui):not(.is-mobile-landscape):not(.is-compact-mobile) .mg-craft-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

#nto-minigame .mg-craft-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0.7rem 0.75rem !important;
  border-radius: 0.55rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  cursor: help;
  box-sizing: border-box !important;
}
#nto-minigame .mg-craft-card.is-ready {
  border-color: rgba(251, 191, 36, 0.3) !important;
  background: rgba(251, 191, 36, 0.06) !important;
}

#nto-minigame .mg-craft-card-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.7rem !important;
  min-width: 0 !important;
}

#nto-minigame .mg-craft-card-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 2.75rem !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  margin: 0 !important;
  border-radius: 0.45rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 0, 0, 0.4) !important;
}
#nto-minigame .mg-craft-card-icon img,
#nto-minigame .mg-craft-card > img {
  width: 2rem !important;
  height: 2rem !important;
  margin: 0 !important;
  object-fit: contain !important;
  image-rendering: pixelated;
}

#nto-minigame .mg-craft-card-head-text,
#nto-minigame .mg-craft-card-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
}

#nto-minigame .mg-craft-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.45rem !important;
}
#nto-minigame .mg-craft-card-top strong {
  margin: 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  color: #fff !important;
}

#nto-minigame .mg-craft-tier {
  flex-shrink: 0 !important;
  padding: 0.15rem 0.4rem !important;
  border-radius: 0.3rem !important;
  border: 0 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  font-size: 0.625rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

#nto-minigame .mg-craft-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.3rem !important;
}
#nto-minigame .mg-craft-chip {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  padding: 0.2rem 0.45rem !important;
  border-radius: 0.3rem !important;
  background: rgba(0, 0, 0, 0.35) !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  white-space: nowrap !important;
}
#nto-minigame .mg-craft-chip.is-time {
  background: rgba(56, 189, 248, 0.12) !important;
  color: #7dd3fc !important;
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-craft-chip.is-up {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #6ee7b7 !important;
  white-space: normal !important;
}
#nto-minigame .mg-craft-card-stats {
  display: none !important;
}

#nto-minigame .mg-craft-needs {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.35rem !important;
}
#nto-minigame .mg-craft-need {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  min-width: 0 !important;
  padding: 0.35rem 0.45rem !important;
  border-radius: 0.4rem !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(0, 0, 0, 0.28) !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
}
#nto-minigame .mg-craft-need img {
  width: 1.1rem !important;
  height: 1.1rem !important;
  flex: 0 0 1.1rem !important;
  margin: 0 !important;
}
#nto-minigame .mg-craft-need-label {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#nto-minigame .mg-craft-need-qty {
  flex-shrink: 0 !important;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}
#nto-minigame .mg-craft-need.is-ok {
  border-color: rgba(52, 211, 153, 0.28) !important;
  color: #6ee7b7 !important;
}
#nto-minigame .mg-craft-need.is-miss {
  border-color: rgba(244, 63, 94, 0.28) !important;
  color: #fda4af !important;
}

#nto-minigame .mg-craft-card-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.55rem !important;
  margin: 0 !important;
  padding-top: 0.15rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
#nto-minigame .mg-craft-cost {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0.35rem !important;
  font-size: 0.8125rem !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-craft-cost-label {
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.35) !important;
}
#nto-minigame .mg-craft-go {
  min-height: 2.35rem !important;
  min-width: 5.25rem !important;
  padding: 0.45rem 0.9rem !important;
  border-radius: 0.4rem !important;
  border: 1px solid rgba(251, 191, 36, 0.4) !important;
  background: rgba(251, 191, 36, 0.16) !important;
  color: #fde68a !important;
  font-size: 0.6875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
}
#nto-minigame .mg-craft-go:disabled {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
}

#nto-minigame.is-mobile-ui .mg-craft-card,
#nto-minigame.is-mobile-landscape .mg-craft-card,
#nto-minigame.is-compact-mobile .mg-craft-card {
  padding: 0.75rem !important;
  gap: 0.6rem !important;
}
#nto-minigame.is-mobile-ui .mg-craft-card-icon,
#nto-minigame.is-mobile-landscape .mg-craft-card-icon,
#nto-minigame.is-compact-mobile .mg-craft-card-icon {
  width: 3rem !important;
  height: 3rem !important;
  flex-basis: 3rem !important;
}
#nto-minigame.is-mobile-ui .mg-craft-go,
#nto-minigame.is-mobile-landscape .mg-craft-go,
#nto-minigame.is-compact-mobile .mg-craft-go {
  min-height: 2.6rem !important;
}

/* ==========================================================================
   Shop / bag = mesmo padr?o visual do craft
   ========================================================================== */
#nto-minigame .mg-shop-list > .mg-shop-item,
#nto-minigame [data-mg-shop-list]:not(.mg-store-list) > .mg-shop-item,
#nto-minigame [data-mg-tfshop-list] > .mg-shop-item,
#nto-minigame [data-mg-backpack-list] > .mg-shop-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
  align-items: stretch !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0.7rem 0.75rem !important;
  border-radius: 0.55rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  cursor: default !important;
  grid-template-columns: unset !important;
  grid-template-rows: unset !important;
}
#nto-minigame .mg-shop-item.is-equipped {
  border-color: rgba(52, 211, 153, 0.35) !important;
  background: rgba(16, 185, 129, 0.07) !important;
}

#nto-minigame .mg-shop-item .mg-shop-item-desc {
  margin: 0 !important;
  font-size: 0.6875rem !important;
  line-height: 1.35 !important;
  color: rgba(255, 255, 255, 0.42) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#nto-minigame .mg-shop-action-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.4rem !important;
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

#nto-minigame .mg-shop-item .mg-craft-card-actions {
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-top: 0.45rem !important;
  gap: 0.55rem !important;
}

#nto-minigame .mg-shop-item .mg-craft-go,
#nto-minigame .mg-shop-action-btns .mg-craft-go {
  min-height: 2.35rem !important;
  min-width: 5rem !important;
  padding: 0.45rem 0.85rem !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

#nto-minigame .mg-craft-go.is-equip {
  border-color: rgba(52, 211, 153, 0.4) !important;
  background: rgba(16, 185, 129, 0.16) !important;
  color: #a7f3d0 !important;
}
#nto-minigame .mg-craft-go.is-use {
  border-color: rgba(56, 189, 248, 0.4) !important;
  background: rgba(14, 165, 233, 0.16) !important;
  color: #bae6fd !important;
}
#nto-minigame .mg-craft-go.is-danger {
  border-color: rgba(251, 113, 133, 0.4) !important;
  background: rgba(244, 63, 94, 0.14) !important;
  color: #fecdd3 !important;
  min-width: 4.5rem !important;
}

#nto-minigame.is-mobile-ui .mg-shop-item .mg-craft-go,
#nto-minigame.is-mobile-landscape .mg-shop-item .mg-craft-go,
#nto-minigame.is-compact-mobile .mg-shop-item .mg-craft-go,
#nto-minigame.is-mobile-ui .mg-shop-action-btns .mg-craft-go,
#nto-minigame.is-mobile-landscape .mg-shop-action-btns .mg-craft-go,
#nto-minigame.is-compact-mobile .mg-shop-action-btns .mg-craft-go {
  min-height: 2.6rem !important;
}

/* Mobile: bot?es ocupam a linha toda sob o pre?o se apertar */
#nto-minigame.is-mobile-ui .mg-shop-item .mg-craft-card-actions,
#nto-minigame.is-mobile-landscape .mg-shop-item .mg-craft-card-actions,
#nto-minigame.is-compact-mobile .mg-shop-item .mg-craft-card-actions {
  flex-wrap: wrap !important;
}
#nto-minigame.is-mobile-ui .mg-shop-action-btns,
#nto-minigame.is-mobile-landscape .mg-shop-action-btns,
#nto-minigame.is-compact-mobile .mg-shop-action-btns {
  width: 100% !important;
  margin-left: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.4rem !important;
}
#nto-minigame.is-mobile-ui .mg-shop-action-btns .mg-craft-go,
#nto-minigame.is-mobile-landscape .mg-shop-action-btns .mg-craft-go,
#nto-minigame.is-compact-mobile .mg-shop-action-btns .mg-craft-go {
  width: 100% !important;
  min-width: 0 !important;
}
#nto-minigame.is-mobile-ui .mg-shop-action-btns .mg-craft-go:only-child,
#nto-minigame.is-mobile-landscape .mg-shop-action-btns .mg-craft-go:only-child,
#nto-minigame.is-compact-mobile .mg-shop-action-btns .mg-craft-go:only-child {
  grid-column: 1 / -1 !important;
}

/* Arena badge ? mais leg?vel */
#nto-minigame .mg-arena-card-badge {
  background: rgba(0, 0, 0, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #fff !important;
}

/* ==========================================================================
   LOJA ? CSS unico (flex). Nao misturar com .mg-shop-item legado.
   ========================================================================== */
#nto-minigame [data-mg-shop] .mg-store-panel,
#nto-minigame [data-mg-arts-shop] .mg-store-panel {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: 100% !important;
}
#nto-minigame [data-mg-shop] .mg-store-tabs,
#nto-minigame [data-mg-arts-shop] .mg-store-tabs,
#nto-minigame [data-mg-depot] .mg-store-tabs {
  display: flex !important;
  flex-shrink: 0 !important;
  gap: 0.35rem !important;
  padding: 0.45rem 0.75rem !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(0,0,0,0.22) !important;
}
#nto-minigame [data-mg-shop] .mg-store-tab,
#nto-minigame [data-mg-arts-shop] .mg-store-tab,
#nto-minigame [data-mg-depot] .mg-store-tab {
  flex: 1 1 0 !important;
  min-height: 2.4rem !important;
  padding: 0.4rem 0.5rem !important;
  border: 0 !important;
  border-radius: 0.45rem !important;
  background: transparent !important;
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.6875rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}
#nto-minigame [data-mg-shop] .mg-store-tab.is-active,
#nto-minigame [data-mg-arts-shop] .mg-store-tab.is-active,
#nto-minigame [data-mg-depot] .mg-store-tab.is-active {
  background: rgba(251,191,36,0.12) !important;
  color: #fde68a !important;
}
#nto-minigame [data-mg-depot] .mg-store-tab.is-active {
  background: rgba(56,189,248,0.14) !important;
  color: #bae6fd !important;
}
#nto-minigame [data-mg-arts-shop] .mg-store-tab.is-active {
  background: rgba(56,189,248,0.14) !important;
  color: #bae6fd !important;
}
#nto-minigame [data-mg-shop] .mg-store-tab-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 1.15rem !important;
  margin-left: 0.2rem !important;
  padding: 0.05rem 0.3rem !important;
  border-radius: 999px !important;
  background: rgba(251,191,36,0.25) !important;
  color: #fbbf24 !important;
  font-size: 0.625rem !important;
}

#nto-minigame [data-mg-shop] .mg-store-list,
#nto-minigame [data-mg-arts-shop] .mg-store-list {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  gap: 0.65rem !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0.75rem !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

#nto-minigame [data-mg-shop] .mg-store-list.is-hidden,
#nto-minigame [data-mg-shop] .mg-store-list.hidden,
#nto-minigame [data-mg-shop] .mg-store-list[hidden],
#nto-minigame [data-mg-shop] .mg-store-foot.is-hidden,
#nto-minigame [data-mg-shop] .mg-store-foot.hidden,
#nto-minigame [data-mg-shop] .mg-store-foot[hidden],
#nto-minigame [data-mg-shop] [data-mg-store-panel].is-hidden,
#nto-minigame [data-mg-shop] [data-mg-store-panel].hidden,
#nto-minigame [data-mg-shop] [data-mg-store-panel][hidden],
#nto-minigame [data-mg-arts-shop] .mg-store-list.is-hidden,
#nto-minigame [data-mg-arts-shop] .mg-store-list.hidden,
#nto-minigame [data-mg-arts-shop] .mg-store-list[hidden],
#nto-minigame [data-mg-arts-shop] [data-mg-arts-panel].is-hidden,
#nto-minigame [data-mg-arts-shop] [data-mg-arts-panel].hidden,
#nto-minigame [data-mg-arts-shop] [data-mg-arts-panel][hidden] {
  display: none !important;
}

#nto-minigame [data-mg-shop] .mg-store-row,
#nto-minigame [data-mg-arts-shop] .mg-store-row {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  gap: 0.65rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0.75rem !important;
  border-radius: 0.55rem !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.03) !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: visible !important;
  height: auto !important;
  min-height: auto !important;
  max-height: none !important;
  float: none !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-template-areas: none !important;
}
#nto-minigame [data-mg-shop] .mg-store-row.is-equipped {
  border-color: rgba(52,211,153,0.35) !important;
  background: rgba(16,185,129,0.07) !important;
}
#nto-minigame [data-mg-shop] .mg-store-row.is-broke,
#nto-minigame [data-mg-arts-shop] .mg-store-row.is-broke {
  opacity: 0.72 !important;
  border-color: rgba(251, 113, 133, 0.22) !important;
}
#nto-minigame [data-mg-shop] .mg-store-afford {
  display: block !important;
  margin-top: 0.2rem !important;
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: rgba(255, 255, 255, 0.38) !important;
}
#nto-minigame [data-mg-shop] .mg-store-afford.is-broke {
  color: #fda4af !important;
}
#nto-minigame [data-mg-shop] .mg-store-qty.is-locked {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2rem !important;
  opacity: 0.45 !important;
}
#nto-minigame [data-mg-shop] .mg-store-qty-locked {
  font-size: 0.75rem !important;
  color: rgba(255, 255, 255, 0.4) !important;
}
#nto-minigame [data-mg-shop] .mg-store-qty-btn:disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

#nto-minigame [data-mg-shop] .mg-store-main,
#nto-minigame [data-mg-arts-shop] .mg-store-main {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  flex: 0 0 auto !important;
  gap: 0.7rem !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 3rem !important;
}

#nto-minigame [data-mg-shop] .mg-store-icon,
#nto-minigame [data-mg-arts-shop] .mg-store-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 3rem !important;
  width: 3rem !important;
  height: 3rem !important;
  border-radius: 0.45rem !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(0,0,0,0.4) !important;
  grid-column: auto !important;
  grid-row: auto !important;
}
#nto-minigame [data-mg-shop] .mg-store-icon img {
  width: 2rem !important;
  height: 2rem !important;
  margin: 0 !important;
  object-fit: contain !important;
  image-rendering: pixelated;
}

#nto-minigame [data-mg-shop] .mg-store-info,
#nto-minigame [data-mg-arts-shop] .mg-store-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
  grid-column: auto !important;
  grid-row: auto !important;
}
#nto-minigame [data-mg-shop] .mg-store-name,
#nto-minigame [data-mg-arts-shop] .mg-store-name {
  display: block !important;
  margin: 0 !important;
  font-size: 0.875rem !important;
  font-weight: 750 !important;
  color: #fff !important;
  line-height: 1.25 !important;
}
#nto-minigame [data-mg-shop] .mg-store-desc,
#nto-minigame [data-mg-arts-shop] .mg-store-desc {
  display: block !important;
  margin: 0 !important;
  font-size: 0.6875rem !important;
  line-height: 1.35 !important;
  color: rgba(255,255,255,0.42) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#nto-minigame [data-mg-shop] .mg-store-owned,
#nto-minigame [data-mg-arts-shop] .mg-store-owned {
  display: block !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  color: #fbbf24 !important;
}

#nto-minigame [data-mg-shop] .mg-store-side,
#nto-minigame [data-mg-arts-shop] .mg-store-side {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 0.45rem !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-top: 0.55rem !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  box-sizing: border-box !important;
  grid-column: auto !important;
  grid-row: auto !important;
  position: relative !important;
  z-index: 2 !important;
  pointer-events: auto !important;
}

#nto-minigame [data-mg-shop] .mg-store-price,
#nto-minigame [data-mg-arts-shop] .mg-store-price {
  flex: 1 1 auto !important;
  min-width: 4.5rem !important;
  margin: 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 800 !important;
  color: #fbbf24 !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap !important;
}
#nto-minigame [data-mg-shop] .mg-store-price-unit {
  font-size: 0.625rem !important;
  font-weight: 650 !important;
  color: rgba(255,255,255,0.35) !important;
}
/* Selo VIP + linha de item exclusivo (a "aba VIP" da loja) */
#nto-minigame [data-mg-shop] .mg-store-vip-tag {
  display: inline-block !important;
  margin-left: 0.3rem !important;
  padding: 0.05rem 0.3rem !important;
  border-radius: 0.3rem !important;
  background: linear-gradient(180deg, #fbbf24, #d97706) !important;
  color: #1c1917 !important;
  font-size: 0.5625rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.02em !important;
  vertical-align: middle !important;
}
#nto-minigame [data-mg-shop] .mg-store-row.is-vip {
  border-color: rgba(251, 191, 36, 0.4) !important;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.07), rgba(251, 191, 36, 0.02)) !important;
}
#nto-minigame [data-mg-shop] .mg-store-row.is-vip.is-broke {
  border-color: rgba(251, 191, 36, 0.18) !important;
  opacity: 0.75 !important;
}

#nto-minigame [data-mg-shop] .mg-store-qty {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 0.15rem !important;
  padding: 0.15rem !important;
  border-radius: 0.4rem !important;
  background: rgba(0,0,0,0.35) !important;
}
#nto-minigame [data-mg-shop] .mg-store-qty-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 2rem !important;
  width: 2rem !important;
  height: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0.3rem !important;
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  line-height: 1 !important;
}
#nto-minigame [data-mg-shop] .mg-store-qty-input,
#nto-minigame [data-mg-shop] .mg-store-qty-val {
  display: inline-block !important;
  width: 2.4rem !important;
  min-width: 2.4rem !important;
  min-height: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #fff !important;
  text-align: center !important;
  font-size: 0.8125rem !important;
  font-weight: 750 !important;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box !important;
}
#nto-minigame [data-mg-shop] .mg-store-qty-input::-webkit-outer-spin-button,
#nto-minigame [data-mg-shop] .mg-store-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#nto-minigame [data-mg-shop] .mg-store-qty-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

#nto-minigame [data-mg-shop] .mg-store-btns,
#nto-minigame [data-mg-arts-shop] .mg-store-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  flex: 0 0 auto !important;
  gap: 0.3rem !important;
  min-width: 0 !important;
  margin-left: auto !important;
}
#nto-minigame [data-mg-shop] .mg-store-btn,
#nto-minigame [data-mg-arts-shop] .mg-store-btn {
  flex: 0 0 auto !important;
  width: 5.75rem !important;
  min-width: 5.75rem !important;
  max-width: 5.75rem !important;
  min-height: 2.1rem !important;
  height: 2.1rem !important;
  padding: 0 0.4rem !important;
  border-radius: 0.35rem !important;
  border: 1px solid transparent !important;
  font-size: 0.625rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  position: relative !important;
  z-index: 3 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}
#nto-minigame [data-mg-shop] .mg-store-btn:disabled {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
}
#nto-minigame [data-mg-shop] .mg-store-btn.is-buy,
#nto-minigame [data-mg-arts-shop] .mg-store-btn.is-buy {
  border-color: rgba(251,191,36,0.45) !important;
  background: rgba(251,191,36,0.18) !important;
  color: #fde68a !important;
}
#nto-minigame [data-mg-shop] .mg-store-btn.is-cart,
#nto-minigame [data-mg-arts-shop] .mg-store-btn.is-cart {
  border-color: rgba(56,189,248,0.4) !important;
  background: rgba(14,165,233,0.14) !important;
  color: #7dd3fc !important;
}
#nto-minigame [data-mg-shop] .mg-store-btn.is-equip {
  border-color: rgba(52,211,153,0.4) !important;
  background: rgba(16,185,129,0.16) !important;
  color: #a7f3d0 !important;
}
#nto-minigame [data-mg-shop] .mg-store-btn.is-danger {
  border-color: rgba(251,113,133,0.4) !important;
  background: rgba(244,63,94,0.14) !important;
  color: #fecdd3 !important;
}

#nto-minigame [data-mg-shop] .mg-store-foot {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 0.65rem 0.85rem max(0.65rem, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(0,0,0,0.35) !important;
}
#nto-minigame [data-mg-shop] .mg-store-foot-total {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.1rem !important;
}
#nto-minigame [data-mg-shop] .mg-store-foot-total span {
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.35) !important;
}
#nto-minigame [data-mg-shop] .mg-store-foot-total strong {
  font-size: 1.05rem !important;
  color: #fbbf24 !important;
}
#nto-minigame [data-mg-shop] .mg-store-checkout {
  min-height: 2.75rem !important;
  padding: 0.55rem 1rem !important;
  border: 0 !important;
  border-radius: 0.45rem !important;
  background: #d97706 !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}
#nto-minigame [data-mg-shop] .mg-store-checkout:disabled {
  opacity: 0.4 !important;
  cursor: not-allowed !important;
}

#nto-minigame [data-mg-shop] .mg-store-empty,
#nto-minigame [data-mg-arts-shop] .mg-store-empty {
  margin: 1.5rem 0.5rem !important;
  text-align: center !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 0.8125rem !important;
  flex: 0 0 auto !important;
}
#nto-minigame [data-mg-shop] .mg-store-hist {
  flex: 0 0 auto !important;
  padding: 0.7rem 0.75rem !important;
  border-radius: 0.5rem !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  background: rgba(255,255,255,0.025) !important;
}
#nto-minigame [data-mg-shop] .mg-store-hist-top {
  display: flex !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  font-size: 0.75rem !important;
  color: #fff !important;
}
#nto-minigame [data-mg-shop] .mg-store-hist-top span {
  color: #fbbf24 !important;
  font-weight: 800 !important;
}
#nto-minigame [data-mg-shop] .mg-store-hist-items {
  margin: 0.35rem 0 0 !important;
  font-size: 0.6875rem !important;
  color: rgba(255,255,255,0.45) !important;
  line-height: 1.4 !important;
}

#nto-minigame [data-mg-shop] .mg-store-row.is-sell-line .mg-store-btns {
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  max-width: none !important;
}
#nto-minigame [data-mg-shop] .mg-store-row.is-sell-line .mg-store-btn {
  width: auto !important;
  min-width: 4.75rem !important;
  max-width: none !important;
  padding: 0 0.55rem !important;
}

/* First-run tutorial coach ? abaixo do top menu */
#nto-minigame .mg-firstrun-bar {
  pointer-events: none;
  z-index: 41 !important;
  top: calc(3.4rem + env(safe-area-inset-top, 0px)) !important;
}
#nto-minigame .mg-firstrun-bar .mg-firstrun-card {
  pointer-events: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
#nto-minigame .mg-tut-toast {
  z-index: 55 !important;
  bottom: 5.5rem !important;
}
#nto-minigame .mg-tut-toast.is-on,
#nto-minigame .mg-tut-toast:not(.hidden) {
  animation: mg-tut-toast-in 0.28s ease-out;
}
#nto-minigame .mg-tut-toast-msg {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}
@keyframes mg-tut-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
#nto-minigame.is-tut-spotlight-bag [data-mg-top-backpack] {
  outline: 2px solid rgba(250, 204, 21, 0.85);
  outline-offset: 2px;
  animation: mg-tut-pulse 1.2s ease-in-out infinite;
}
#nto-minigame.is-tut-spotlight-train .mg-interact-hint:not(.hidden),
#nto-minigame.is-tut-spotlight-train .mg-interact-action:not(.hidden) {
  outline: 2px solid rgba(56, 189, 248, 0.8);
  outline-offset: 3px;
  animation: mg-tut-pulse 1.2s ease-in-out infinite;
}
#nto-minigame.is-tut-spotlight-shop .mg-interact-hint:not(.hidden),
#nto-minigame.is-tut-spotlight-shop .mg-interact-action:not(.hidden),
#nto-minigame.is-tut-spotlight-survival .mg-interact-hint:not(.hidden),
#nto-minigame.is-tut-spotlight-survival .mg-interact-action:not(.hidden) {
  outline: 2px solid rgba(250, 204, 21, 0.85);
  outline-offset: 3px;
  animation: mg-tut-pulse 1.2s ease-in-out infinite;
}
#nto-minigame.is-tut-equip .mg-shop-item.is-tut-gear {
  border-color: rgba(250, 204, 21, 0.7) !important;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.35), 0 8px 20px rgba(0, 0, 0, 0.35);
  /* glow via keyframes no bloco final ? sem filter no card */
}
#nto-minigame.is-tut-food-shop .mg-store-row.is-tut-food {
  border-color: rgba(74, 222, 128, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.28), 0 8px 20px rgba(0, 0, 0, 0.35);
  animation: mg-tut-pulse 1.4s ease-in-out infinite;
}
/* Canvas abaixo dos pain?is (mapa/loja/etc). Sem isso a seta guia
   sobe por cima do overlay quando o z-30 do Tailwind n?o aplica. */
#nto-minigame [data-mg-canvas-wrap] {
  z-index: 1;
}
#nto-minigame [data-mg-hub],
#nto-minigame [data-mg-maps],
#nto-minigame [data-mg-select],
#nto-minigame [data-mg-rival],
#nto-minigame [data-mg-over] {
  z-index: 40 !important;
}
#nto-minigame .mg-tut-guide {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
}
#nto-minigame .mg-tut-guide.hidden,
#nto-minigame.is-tut-guide-off .mg-tut-guide,
#nto-minigame:has([data-mg-maps]:not(.hidden)) .mg-tut-guide,
#nto-minigame:has([data-mg-select]:not(.hidden)) .mg-tut-guide,
#nto-minigame:has([data-mg-shop]:not(.hidden)) .mg-tut-guide,
#nto-minigame:has([data-mg-tfshop]:not(.hidden)) .mg-tut-guide,
#nto-minigame:has([data-mg-backpack]:not(.hidden)) .mg-tut-guide,
#nto-minigame:has([data-mg-depot]:not(.hidden)) .mg-tut-guide,
#nto-minigame:has([data-mg-craft]:not(.hidden)) .mg-tut-guide,
#nto-minigame:has([data-mg-profile]:not(.hidden)) .mg-tut-guide,
#nto-minigame:has([data-mg-path]:not(.hidden)) .mg-tut-guide,
#nto-minigame:has([data-mg-ranking]:not(.hidden)) .mg-tut-guide,
#nto-minigame:has([data-mg-mode-modal]:not(.hidden)) .mg-tut-guide,
#nto-minigame:has([data-mg-npc-dialog]:not(.hidden)) .mg-tut-guide,
#nto-minigame:has([data-mg-pause]:not(.hidden)) .mg-tut-guide {
  display: none !important;
}
#nto-minigame .mg-tut-guide-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 999px;
  border: 2px solid rgba(250, 204, 21, 0.65);
  animation: mg-tut-guide-pulse 1.4s ease-out infinite;
}
#nto-minigame .mg-tut-guide-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  margin: -6px 0 0 -14px;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 22px solid rgba(250, 204, 21, 0.98);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65));
  transform-origin: 50% 30%;
  transform: rotate(var(--tut-guide-rot, 90deg));
  animation: mg-tut-guide-bob 0.9s ease-in-out infinite;
}
#nto-minigame .mg-tut-guide.is-onscreen .mg-tut-guide-arrow {
  /* aponta pra baixo no NPC */
  --tut-guide-rot: 0deg;
}
#nto-minigame .mg-tut-guide-label {
  position: absolute;
  left: 50%;
  top: -34px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1408;
  background: rgba(250, 204, 21, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
#nto-minigame .mg-tut-guide.is-offscreen .mg-tut-guide-label {
  background: rgba(56, 189, 248, 0.95);
  color: #041018;
  top: auto;
  bottom: 28px;
}
@keyframes mg-tut-guide-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
@keyframes mg-tut-guide-pulse {
  0% { transform: scale(0.7); opacity: 0.85; }
  100% { transform: scale(1.65); opacity: 0; }
}
#nto-minigame.is-tut-blink-dash [data-mg-dashbtn] {
  outline: 3px solid rgba(250, 204, 21, 0.95);
  outline-offset: 3px;
  animation: mg-tut-skill-blink 0.7s ease-in-out infinite;
  z-index: 60;
}
#nto-minigame.is-tut-blink-primary [data-mg-spellbar] [data-mg-skill="primary"] {
  outline: 3px solid rgba(56, 189, 248, 0.95);
  outline-offset: 3px;
  animation: mg-tut-skill-blink 0.7s ease-in-out infinite;
  z-index: 60;
}
#nto-minigame.is-tut-combat-freeze [data-mg-canvas-wrap] {
  position: relative;
}
#nto-minigame.is-tut-combat-freeze [data-mg-canvas-wrap]::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 28;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.45) 100%);
}
@keyframes mg-tut-skill-blink {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.45); transform: scale(1.08); }
}


/* ==========================================================================
   Backpack / shop cards ? layout estavel (craft-card markup)
   ========================================================================== */
#nto-minigame [data-mg-backpack-list].mg-shop-list,
#nto-minigame [data-mg-backpack] .mg-sheet-split-main .mg-shop-list,
#nto-minigame [data-mg-depot] .mg-sheet-split-main .mg-shop-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
  grid-template-columns: none !important;
  align-content: start !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
}

#nto-minigame [data-mg-backpack-list] > .mg-shop-item,
#nto-minigame [data-mg-backpack] .mg-shop-list > .mg-shop-item,
#nto-minigame [data-mg-depot] .mg-shop-list > .mg-shop-item,
#nto-minigame [data-mg-tfshop-list] > .mg-shop-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.55rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0.7rem 0.75rem !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: 0.55rem !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  grid-template-rows: none !important;
}

#nto-minigame [data-mg-backpack-list] > .mg-shop-item > .mg-craft-card-head,
#nto-minigame [data-mg-backpack] .mg-shop-item > .mg-craft-card-head,
#nto-minigame [data-mg-depot] .mg-shop-item > .mg-craft-card-head,
#nto-minigame [data-mg-tfshop-list] > .mg-shop-item > .mg-craft-card-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0.65rem !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#nto-minigame [data-mg-backpack-list] > .mg-shop-item > .mg-craft-card-actions,
#nto-minigame [data-mg-backpack] .mg-shop-item > .mg-craft-card-actions,
#nto-minigame [data-mg-depot] .mg-shop-item > .mg-craft-card-actions,
#nto-minigame [data-mg-tfshop-list] > .mg-shop-item > .mg-craft-card-actions {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.4rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-top: 0.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

#nto-minigame [data-mg-backpack-list] .mg-shop-action-btns,
#nto-minigame [data-mg-backpack] .mg-shop-action-btns,
#nto-minigame [data-mg-depot] .mg-shop-action-btns,
#nto-minigame [data-mg-tfshop-list] .mg-shop-action-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.35rem !important;
  margin-left: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#nto-minigame [data-mg-backpack-list] .mg-craft-go,
#nto-minigame [data-mg-backpack] .mg-shop-item .mg-craft-go,
#nto-minigame [data-mg-depot] .mg-shop-item .mg-craft-go,
#nto-minigame [data-mg-tfshop-list] .mg-craft-go {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  min-height: 2.15rem !important;
  padding: 0.4rem 0.7rem !important;
  white-space: nowrap !important;
}

#nto-minigame [data-mg-backpack-list] .mg-craft-cost,
#nto-minigame [data-mg-backpack] .mg-shop-item .mg-craft-cost {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

@media (max-width: 719px) {
  #nto-minigame [data-mg-backpack-list] > .mg-shop-item > .mg-craft-card-actions,
  #nto-minigame [data-mg-backpack] .mg-shop-item > .mg-craft-card-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #nto-minigame [data-mg-backpack-list] .mg-shop-action-btns,
  #nto-minigame [data-mg-backpack] .mg-shop-action-btns {
    margin-left: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  #nto-minigame [data-mg-backpack-list] .mg-craft-go,
  #nto-minigame [data-mg-backpack] .mg-shop-item .mg-craft-go {
    width: 100% !important;
  }
}

#nto-minigame .mg-sheet-split-main {
  min-width: 0 !important;
}
#nto-minigame [data-mg-backpack] .mg-sheet-split-side {
  min-width: 0 !important;
  overflow: auto !important;
}

/* ==========================================================================
   Backpack cards ? layout contido (nome truncado, a??es wrap, sem vazar)
   Markup: article.mg-shop-item > .mg-craft-card-head + .mg-craft-card-actions
   ========================================================================== */
#nto-minigame article.mg-shop-item:has(> .mg-craft-card-actions),
#nto-minigame [data-mg-backpack-list] > article.mg-shop-item,
#nto-minigame [data-mg-backpack] .mg-shop-list > article.mg-shop-item,
#nto-minigame [data-mg-depot] .mg-shop-list > article.mg-shop-item,
#nto-minigame [data-mg-tfshop-list] > article.mg-shop-item {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.7rem 0.75rem !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  position: relative !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-template-areas: none !important;
  grid-auto-flow: row !important;
}

#nto-minigame article.mg-shop-item:has(> .mg-craft-card-actions) > .mg-craft-card-head,
#nto-minigame [data-mg-backpack-list] > article.mg-shop-item > .mg-craft-card-head,
#nto-minigame [data-mg-tfshop-list] > article.mg-shop-item > .mg-craft-card-head {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 0.65rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  overflow: hidden !important;
  grid-area: unset !important;
  position: relative !important;
}

#nto-minigame article.mg-shop-item:has(> .mg-craft-card-actions) .mg-craft-card-head-text,
#nto-minigame [data-mg-backpack-list] .mg-craft-card-head-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#nto-minigame article.mg-shop-item:has(> .mg-craft-card-actions) .mg-craft-card-top,
#nto-minigame [data-mg-backpack-list] .mg-craft-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.4rem !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

#nto-minigame article.mg-shop-item:has(> .mg-craft-card-actions) .mg-craft-card-top strong,
#nto-minigame [data-mg-backpack-list] .mg-craft-card-top strong {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#nto-minigame article.mg-shop-item:has(> .mg-craft-card-actions) .mg-shop-item-desc,
#nto-minigame [data-mg-backpack-list] .mg-shop-item-desc {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

#nto-minigame article.mg-shop-item:has(> .mg-craft-card-actions) .mg-craft-meta,
#nto-minigame [data-mg-backpack-list] .mg-craft-meta {
  max-width: 100% !important;
  min-width: 0 !important;
}

#nto-minigame article.mg-shop-item:has(> .mg-craft-card-actions) > .mg-craft-card-actions,
#nto-minigame [data-mg-backpack-list] > article.mg-shop-item > .mg-craft-card-actions,
#nto-minigame [data-mg-tfshop-list] > article.mg-shop-item > .mg-craft-card-actions {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.4rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0.5rem 0 0 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  grid-area: unset !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  float: none !important;
  transform: none !important;
}

#nto-minigame article.mg-shop-item:has(> .mg-craft-card-actions) .mg-craft-cost,
#nto-minigame [data-mg-backpack-list] .mg-craft-cost {
  flex: 0 0 auto !important;
  max-width: 100% !important;
  margin: 0 !important;
}

#nto-minigame article.mg-shop-item:has(> .mg-craft-card-actions) .mg-shop-action-btns,
#nto-minigame [data-mg-backpack-list] .mg-shop-action-btns,
#nto-minigame [data-mg-tfshop-list] .mg-shop-action-btns {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0.35rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
}

#nto-minigame article.mg-shop-item:has(> .mg-craft-card-actions) .mg-craft-go,
#nto-minigame [data-mg-backpack-list] .mg-craft-go,
#nto-minigame [data-mg-tfshop-list] .mg-craft-go {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: min(100%, 5.5rem) !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Tutorial highlight: sem filter (filter cria stacking estranho no card) */
#nto-minigame.is-tut-equip .mg-shop-item.is-tut-gear {
  border-color: rgba(250, 204, 21, 0.7) !important;
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.35), 0 8px 20px rgba(0, 0, 0, 0.35) !important;
  animation: mg-tut-gear-glow 1.4s ease-in-out infinite !important;
  filter: none !important;
}
@keyframes mg-tut-gear-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.3), 0 6px 16px rgba(0, 0, 0, 0.3); }
  50% { box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.75), 0 8px 22px rgba(250, 204, 21, 0.18); }
}

@media (max-width: 719px) {
  #nto-minigame article.mg-shop-item:has(> .mg-craft-card-actions) .mg-shop-action-btns,
  #nto-minigame [data-mg-backpack-list] .mg-shop-action-btns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  #nto-minigame article.mg-shop-item:has(> .mg-craft-card-actions) .mg-craft-go,
  #nto-minigame [data-mg-backpack-list] .mg-craft-go {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
}
/* ?? Backpack MMO mobile: grid de slots + detalhe ?? */
#nto-minigame .mg-bag-layout {
  min-height: 0;
  flex: 1 1 auto;
}
#nto-minigame .mg-depot-layout {
  flex: 1 1 auto;
  min-height: 0;
}
#nto-minigame .mg-depot-sheet {
  min-height: 0;
}
#nto-minigame .mg-depot-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#nto-minigame .mg-depot-panel.is-hidden,
#nto-minigame .mg-depot-panel.hidden,
#nto-minigame .mg-depot-panel[hidden] {
  display: none !important;
}
#nto-minigame .mg-depot-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0 0.85rem 0.55rem;
  overflow: hidden;
}
#nto-minigame .mg-depot-offers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-height: 0;
}
#nto-minigame .mg-depot-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.55rem;
  background: rgba(0,0,0,0.28);
  padding: 0.55rem 0.6rem 0.65rem;
  overflow: hidden;
}
#nto-minigame .mg-depot-side.is-bag {
  border-color: rgba(52,211,153,0.16);
  background: rgba(6, 22, 16, 0.35);
}
#nto-minigame .mg-depot-side-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  flex-shrink: 0;
}
#nto-minigame .mg-depot-side .mg-bag-grid {
  flex: 1 1 auto !important;
  min-height: 7rem !important;
  max-height: none !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
#nto-minigame .mg-depot-body > .mg-bag-detail {
  flex-shrink: 0;
  margin: 0 !important;
  border-radius: 0.55rem !important;
}
#nto-minigame .mg-depot-mail-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.7rem 0.85rem 0.75rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
#nto-minigame .mg-depot-mail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-shrink: 0;
  overflow: visible;
}
#nto-minigame .mg-depot-mail-sub {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255,255,255,0.45);
}
#nto-minigame .mg-depot-mail-fee {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  line-height: 1;
}
#nto-minigame .mg-depot-mail-fee > em {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
#nto-minigame .mg-depot-mail-fee .mg-sheet-coin-bal {
  min-height: 1.45rem;
  padding: 0.2rem 0.45rem 0.2rem 0.38rem;
  font-size: 11px;
  line-height: 1;
  box-sizing: border-box;
}
#nto-minigame .mg-depot-mail-fee .mg-gold-coin {
  box-shadow:
    0 0 0 1px rgba(180, 83, 9, 0.55),
    inset 0 0 2px rgba(255, 255, 255, 0.7),
    inset 0 -1px 2px rgba(146, 64, 14, 0.35);
}
#nto-minigame [data-mg-depot] .mg-bag-act.is-depot-move {
  width: auto !important;
  min-width: 4.8rem !important;
  padding: 0 0.7rem !important;
}
#nto-minigame [data-mg-depot] .mg-mail-form {
  gap: 0.55rem;
}
#nto-minigame [data-mg-depot] .mg-mail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  flex-wrap: wrap;
}
#nto-minigame [data-mg-depot] .mg-mail-foot .mg-mail-summary {
  flex: 1 1 10rem;
  margin: 0;
}
#nto-minigame [data-mg-depot] .mg-mail-foot .mg-mail-send {
  flex: 0 0 auto;
  min-width: 9rem;
}
#nto-minigame [data-mg-depot] .mg-mail-actions {
  display: none;
}
@media (min-width: 720px) {
  #nto-minigame .mg-depot-offers {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  #nto-minigame .mg-depot-side .mg-bag-grid {
    min-height: 10rem !important;
  }
}
#nto-minigame.is-mobile-ui .mg-depot-body,
#nto-minigame.is-compact-mobile .mg-depot-body,
#nto-minigame.is-mobile-landscape .mg-depot-body {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
  padding-bottom: calc(0.35rem + env(safe-area-inset-bottom));
}
#nto-minigame.is-mobile-ui .mg-depot-offers,
#nto-minigame.is-compact-mobile .mg-depot-offers,
#nto-minigame.is-mobile-landscape .mg-depot-offers {
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
#nto-minigame.is-mobile-ui .mg-depot-side .mg-bag-grid,
#nto-minigame.is-compact-mobile .mg-depot-side .mg-bag-grid,
#nto-minigame.is-mobile-landscape .mg-depot-side .mg-bag-grid {
  min-height: 6rem !important;
}
#nto-minigame.is-mobile-ui .mg-depot-mail-body,
#nto-minigame.is-compact-mobile .mg-depot-mail-body,
#nto-minigame.is-mobile-landscape .mg-depot-mail-body {
  padding: 0.65rem 0.7rem calc(0.65rem + env(safe-area-inset-bottom));
}
#nto-minigame .mg-depot-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
#nto-minigame .mg-depot-pane .mg-bag-grid {
  flex: 1 1 auto;
  min-height: 0;
}
#nto-minigame [data-mg-depot] > .mg-panel > .mg-bag-detail {
  flex-shrink: 0;
  margin: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
}
#nto-minigame [data-mg-depot-list].mg-bag-grid,
#nto-minigame [data-mg-depot-bag].mg-bag-grid {
  grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr)) !important;
  max-height: none !important;
}
#nto-minigame .mg-bag-main {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  gap: 0.55rem !important;
}
#nto-minigame .mg-bag-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(3.15rem, 1fr)) !important;
  gap: 0.35rem !important;
  align-content: start !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 0.15rem 0.1rem 0.35rem !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.08)) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0.55rem !important;
}
#nto-minigame .mg-bag-slot {
  position: relative !important;
  aspect-ratio: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 3.1rem !important;
  margin: 0 !important;
  padding: 0.28rem !important;
  border-radius: 0.4rem !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(0,0,0,0.35)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#nto-minigame .mg-bag-slot.is-empty {
  cursor: default !important;
  opacity: 0.35 !important;
  background: rgba(0,0,0,0.28) !important;
  border-style: dashed !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
}
#nto-minigame .mg-bag-slot.is-on {
  border-color: rgba(52, 211, 153, 0.65) !important;
  box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.35), inset 0 0 12px rgba(16,185,129,0.12) !important;
}
#nto-minigame .mg-bag-slot.is-eq {
  border-color: rgba(251, 191, 36, 0.45) !important;
}
#nto-minigame .mg-bag-slot.is-tut-gear {
  animation: mg-tut-gear-glow 1.4s ease-in-out infinite !important;
}
#nto-minigame .mg-bag-slot img {
  width: 2rem !important;
  height: 2rem !important;
  object-fit: contain !important;
  image-rendering: pixelated !important;
  pointer-events: none !important;
}
#nto-minigame .mg-bag-qty {
  position: absolute !important;
  right: 0.18rem !important;
  bottom: 0.1rem !important;
  font-size: 0.55rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px #000 !important;
  line-height: 1 !important;
}
#nto-minigame .mg-bag-mark {
  position: absolute !important;
  left: 0.18rem !important;
  top: 0.12rem !important;
  font-size: 0.55rem !important;
  font-weight: 900 !important;
  color: #fbbf24 !important;
  line-height: 1 !important;
}
#nto-minigame .mg-bag-empty-msg {
  grid-column: 1 / -1 !important;
  padding: 2rem 0.5rem !important;
  text-align: center !important;
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.35) !important;
}
#nto-minigame .mg-bag-detail {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.55rem 0.65rem !important;
  flex: 0 0 auto !important;
  padding: 0.55rem 0.65rem !important;
  border-radius: 0.55rem !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(0,0,0,0.35) !important;
}
#nto-minigame .mg-bag-detail.is-empty {
  justify-content: center !important;
  min-height: 3.4rem !important;
}
#nto-minigame .mg-bag-detail-empty {
  margin: 0 !important;
  font-size: 0.7rem !important;
  color: rgba(255,255,255,0.35) !important;
}
#nto-minigame .mg-bag-detail-icon {
  flex: 0 0 2.6rem !important;
  width: 2.6rem !important;
  height: 2.6rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.4rem !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
#nto-minigame .mg-bag-detail-icon img {
  width: 1.85rem !important;
  height: 1.85rem !important;
  object-fit: contain !important;
}
#nto-minigame .mg-bag-detail-copy {
  flex: 1 1 8rem !important;
  min-width: 0 !important;
}
#nto-minigame .mg-bag-detail-copy strong {
  display: block !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: #fff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#nto-minigame .mg-bag-detail-copy p {
  margin: 0.1rem 0 0 !important;
  font-size: 0.62rem !important;
  color: rgba(255,255,255,0.42) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#nto-minigame .mg-bag-detail-copy span {
  font-size: 0.58rem !important;
  font-weight: 700 !important;
  color: #fbbf24 !important;
}
#nto-minigame .mg-bag-detail-acts {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.28rem !important;
  margin-left: auto !important;
}
#nto-minigame .mg-bag-act {
  flex: 0 0 auto !important;
  width: 4.6rem !important;
  min-width: 4.6rem !important;
  height: 1.85rem !important;
  padding: 0 0.25rem !important;
  border-radius: 0.3rem !important;
  border: 1px solid transparent !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
#nto-minigame .mg-bag-act.is-eq {
  border-color: rgba(52,211,153,0.4) !important;
  background: rgba(16,185,129,0.14) !important;
  color: #a7f3d0 !important;
}
#nto-minigame .mg-bag-act.is-use {
  border-color: rgba(251,191,36,0.4) !important;
  background: rgba(251,191,36,0.14) !important;
  color: #fde68a !important;
}
#nto-minigame .mg-bag-act.is-danger {
  border-color: rgba(251,113,133,0.4) !important;
  background: rgba(244,63,94,0.12) !important;
  color: #fda4af !important;
}
#nto-minigame .mg-bag-chip {
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.4) !important;
  padding: 0.35rem 0.4rem !important;
}

@media (min-width: 720px) {
  #nto-minigame [data-mg-shop] .mg-store-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.55rem 0.7rem !important;
  }
  #nto-minigame [data-mg-shop] .mg-store-main,
#nto-minigame [data-mg-arts-shop] .mg-store-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #nto-minigame [data-mg-shop] .mg-store-side,
#nto-minigame [data-mg-arts-shop] .mg-store-side {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
  }
  #nto-minigame [data-mg-shop] .mg-store-desc,
#nto-minigame [data-mg-arts-shop] .mg-store-desc {
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  #nto-minigame [data-mg-shop] .mg-store-afford {
    display: none !important;
  }
}

/* Bag grid wins over legacy backpack-list overrides */
#nto-minigame [data-mg-backpack-list].mg-bag-grid,
#nto-minigame.is-mobile-ui [data-mg-backpack-list].mg-bag-grid,
#nto-minigame.is-mobile-landscape [data-mg-backpack-list].mg-bag-grid,
#nto-minigame.is-compact-mobile [data-mg-backpack-list].mg-bag-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(3.15rem, 1fr)) !important;
  gap: 0.35rem !important;
  padding: 0.35rem !important;
}
#nto-minigame .mg-sheet-split-main.mg-bag-main .mg-bag-grid {
  grid-template-columns: repeat(auto-fill, minmax(3.15rem, 1fr)) !important;
}

/* ==========================================================================
   Spell nodes (magia base / primary)
   ========================================================================== */
#nto-minigame .mg-spellnodes-sheet .mg-sheet-sub {
  max-width: 28rem;
}
#nto-minigame .mg-spellnodes-slots {
  margin-right: 0.5rem;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
}
#nto-minigame .mg-spellnodes-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
#nto-minigame .mg-spellnode-card {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
#nto-minigame .mg-spellnode-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}
#nto-minigame .mg-spellnode-card.is-on {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.08);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.12);
}
#nto-minigame .mg-spellnode-card.is-locked {
  opacity: 0.45;
}
#nto-minigame .mg-spellnode-card.is-short {
  opacity: 0.38;
}
#nto-minigame .mg-spellnode-card.is-unlocked:not(.is-on) {
  border-color: rgba(74, 222, 128, 0.28);
}
#nto-minigame .mg-spellnode-ico {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.35);
  font-size: 1rem;
  color: #fde68a;
}
#nto-minigame .mg-spellnode-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
#nto-minigame .mg-spellnode-name {
  font-size: 0.82rem;
  font-weight: 750;
  color: #fff;
}
#nto-minigame .mg-spellnode-desc {
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.62);
}
#nto-minigame .mg-spellnode-meta {
  font-size: 0.65rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.75);
}
#nto-minigame .mg-spellnode-cost {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
  text-transform: none;
  letter-spacing: normal;
}
#nto-minigame .mg-spellnode-cost-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.4rem 0.15rem 0.15rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.68rem;
  font-weight: 650;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-spellnode-cost-chip.is-short {
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
}
#nto-minigame .mg-spellnode-cost-ico {
  width: 1.35rem;
  height: 1.35rem;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-spellnode-cost-qty {
  min-width: 2.4rem;
}
#nto-minigame .mg-spellnodes-hud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  margin-bottom: 0.35rem;
  max-width: 12rem;
}
#nto-minigame .mg-spellnode-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(251, 191, 36, 0.28);
  background: rgba(251, 191, 36, 0.08);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fde68a;
  white-space: nowrap;
}
#nto-minigame .mg-spellnodes-hud:empty {
  display: none;
}

/* ?? Painel Jutsu: abas + upgrade pir?mide ?? */
#nto-minigame .mg-spellpanel-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0 0.75rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#nto-minigame .mg-spellpanel-tab {
  flex: 1;
  padding: 0.45rem 0.6rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
#nto-minigame .mg-spellpanel-tab.is-on {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
  color: #fde68a;
}
#nto-minigame .mg-spellpanel-pane.hidden {
  display: none !important;
}
#nto-minigame .mg-spellupgrade-hint {
  margin: 0 0 0.5rem;
  padding: 0 0.15rem;
  font-size: 0.65rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.38);
}
#nto-minigame .mg-spellupgrade-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.25rem 0;
}
#nto-minigame .mg-spellup-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.65rem;
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
#nto-minigame .mg-spellup-card.is-max {
  opacity: 0.72;
}
#nto-minigame .mg-spellup-head {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}
#nto-minigame .mg-spellup-key {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #fde68a;
  padding: 0.12rem 0.35rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(251, 191, 36, 0.25);
}
#nto-minigame .mg-spellup-name {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nto-minigame .mg-spellup-lv {
  font-size: 0.68rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-spellup-bonus {
  font-size: 0.62rem;
  font-weight: 650;
  color: #86efac;
}
#nto-minigame .mg-spellup-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem;
}
#nto-minigame .mg-spyr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
#nto-minigame .mg-spyr-core {
  position: relative;
}
#nto-minigame .mg-spyr-core::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.35rem;
  width: 0;
  height: 0;
  margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(251, 191, 36, 0.35);
}
#nto-minigame .mg-spyr-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding-top: 0.15rem;
}
#nto-minigame .mg-spyr-slots {
  display: flex;
  justify-content: center;
  gap: 0.18rem;
  flex-wrap: wrap;
  max-width: 7.5rem;
}
#nto-minigame .mg-spyr-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 0.35rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.4);
  opacity: 0.45;
}
#nto-minigame .mg-spyr-slot.is-ok {
  opacity: 1;
  border-color: rgba(134, 239, 172, 0.35);
}
#nto-minigame .mg-spyr-slot-ico {
  width: 0.85rem;
  height: 0.85rem;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-spyr-ring-qty {
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-spyr-ring-qty.is-short {
  color: #fecaca;
}
#nto-minigame .mg-spyr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.45rem 0.2rem 0.2rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
  font-size: 0.65rem;
  font-weight: 700;
  color: #e2e8f0;
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-spyr-chip.is-core {
  border-color: rgba(251, 191, 36, 0.35);
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.08);
}
#nto-minigame .mg-spyr-chip.is-short {
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
}
#nto-minigame .mg-spyr-ico {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-spyr-qty {
  min-width: 2.2rem;
}
#nto-minigame .mg-spellup-btn {
  flex-shrink: 0;
  padding: 0.45rem 0.75rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.1);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fde68a;
  transition: background 0.15s, opacity 0.15s;
}
#nto-minigame .mg-spellup-btn:hover:not(.is-disabled) {
  background: rgba(251, 191, 36, 0.18);
}
#nto-minigame .mg-spellup-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
#nto-minigame .mg-spellup-maxed {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-skill-up {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  border: 1px solid rgba(134, 239, 172, 0.45);
  background: rgba(20, 83, 45, 0.85);
  font-size: 8px;
  font-weight: 800;
  line-height: 1rem;
  color: #bbf7d0;
  pointer-events: none;
}

/* ?? Loja de armas (Armeiro) ?? */
#nto-minigame .mg-wshop-tabs {
  display: flex;
  gap: 0.35rem;
  padding: 0 0.75rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#nto-minigame .mg-wshop-tab {
  flex: 1;
  padding: 0.4rem 0.5rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
#nto-minigame .mg-wshop-tab.is-on {
  border-color: rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.08);
  color: #fde68a;
}
#nto-minigame .mg-wshop-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.35rem 0;
}
#nto-minigame .mg-wshop-empty {
  margin: 0;
  padding: 1rem;
  text-align: center;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-wshop-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.65rem;
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
#nto-minigame .mg-wshop-card.is-short {
  opacity: 0.72;
}
#nto-minigame .mg-wshop-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}
#nto-minigame .mg-wshop-style {
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
#nto-minigame .mg-wshop-style.is-sword { color: #93c5fd; }
#nto-minigame .mg-wshop-style.is-club { color: #fca5a5; }
#nto-minigame .mg-wshop-style.is-distance { color: #86efac; }
#nto-minigame .mg-wshop-tier {
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
}
#nto-minigame .mg-wshop-card-body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0.6rem;
}
#nto-minigame .mg-wshop-ico-wrap {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.35);
}
#nto-minigame .mg-wshop-ico {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-wshop-name {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}
#nto-minigame .mg-wshop-stats,
#nto-minigame .mg-wshop-stock {
  margin: 0.12rem 0 0;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.45);
}
#nto-minigame .mg-wshop-buy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}
#nto-minigame .mg-wshop-price {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fde68a;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
#nto-minigame .mg-wshop-price small {
  display: block;
  font-size: 0.58rem;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-wshop-btn {
  padding: 0.35rem 0.6rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.1);
  font-size: 0.62rem;
  font-weight: 750;
  text-transform: uppercase;
  color: #fde68a;
}
#nto-minigame .mg-wshop-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}
#nto-minigame.is-tut-spotlight-weapons .mg-interact-hint:not(.hidden),
#nto-minigame.is-tut-spotlight-weapons .mg-interact-action:not(.hidden) {
  outline: 2px solid rgba(134, 239, 172, 0.85);
  outline-offset: 3px;
  animation: mg-tut-pulse 1.2s ease-in-out infinite;
}

/* ?? Admin GOD ?? */
#nto-minigame .mg-topmenu-btn-admin.hidden {
  display: none !important;
}
#nto-minigame .mg-topmenu-btn-admin:not(.hidden) {
  color: #fca5a5;
}
#nto-minigame .mg-topmenu-btn-admin.is-on,
#nto-minigame .mg-topmenu-btn-admin:hover {
  color: #fecaca;
}
#nto-minigame .mg-admin-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 0.35rem 0 1rem;
}
#nto-minigame .mg-admin-block {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.65rem;
  background: rgba(0, 0, 0, 0.28);
  padding: 0.65rem 0.75rem;
}
#nto-minigame .mg-admin-h {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
#nto-minigame .mg-admin-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
#nto-minigame .mg-admin-row.is-wrap {
  gap: 0.35rem;
}
#nto-minigame .mg-admin-input {
  flex: 1 1 7rem;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 0.78rem;
}
#nto-minigame .mg-admin-input.is-sm {
  flex: 0 0 4.5rem;
}
#nto-minigame .mg-admin-btn {
  padding: 0.4rem 0.7rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.12);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fecaca;
  white-space: nowrap;
}
#nto-minigame .mg-admin-btn.is-ghost {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
}
#nto-minigame .mg-admin-btn.is-danger {
  border-color: rgba(248, 113, 113, 0.55);
  background: rgba(185, 28, 28, 0.75);
  color: #fff;
}
#nto-minigame .mg-admin-hint {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-admin-ban-list {
  margin-top: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 12rem;
  overflow: auto;
}
#nto-minigame .mg-admin-ban-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(248, 113, 113, 0.2);
  background: rgba(127, 29, 29, 0.22);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.78);
}
#nto-minigame .mg-admin-ban-row strong {
  color: #fecaca;
  font-weight: 700;
}
#nto-minigame .mg-admin-ban-meta {
  opacity: 0.65;
  font-size: 0.68rem;
}
#nto-minigame .mg-admin-ban-unban {
  flex-shrink: 0;
  padding: 0.2rem 0.45rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(0, 0, 0, 0.35);
  color: #fca5a5;
  font-size: 0.65rem;
  font-weight: 650;
  cursor: pointer;
}
#nto-minigame .mg-admin-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.5rem;
}
#nto-minigame .mg-admin-chip {
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.62rem;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.7);
}

/* ?? Trade + context menu ?? */
#nto-minigame .mg-ctx-menu {
  position: fixed;
  z-index: 80;
  min-width: 10.5rem;
  padding: 0.45rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(10, 10, 12, 0.96);
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  pointer-events: auto;
}
#nto-minigame .mg-ctx-menu.hidden { display: none; }
#nto-minigame .mg-ctx-name {
  margin: 0;
  padding: 0.2rem 0.35rem 0;
  font-size: 12px;
  font-weight: 800;
  color: #f8fafc;
}
#nto-minigame .mg-ctx-meta {
  margin: 0 0 0.25rem;
  padding: 0 0.35rem 0.35rem;
  font-size: 10px;
  color: rgba(255,255,255,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#nto-minigame .mg-ctx-menu button {
  text-align: left;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  font-weight: 650;
  padding: 0.4rem 0.45rem;
  border-radius: 0.35rem;
  cursor: pointer;
}
#nto-minigame .mg-ctx-menu button:hover {
  background: rgba(251, 191, 36, 0.12);
  color: #fde68a;
}
#nto-minigame .mg-trade-panel {
  pointer-events: auto;
}
#nto-minigame .mg-trade-sheet {
  min-height: 0;
}
#nto-minigame .mg-trade-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0 0.85rem 0.35rem;
  overflow: auto;
}
#nto-minigame .mg-trade-offers {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  flex: 0 0 auto;
}
#nto-minigame .mg-trade-side {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.55rem;
  background: rgba(0,0,0,0.28);
  padding: 0.55rem 0.6rem 0.65rem;
}
#nto-minigame .mg-trade-side.is-peer {
  border-color: rgba(125,211,252,0.16);
  background: rgba(8, 18, 28, 0.35);
}
#nto-minigame .mg-trade-side-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
#nto-minigame .mg-trade-lock-flag {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
}
#nto-minigame .mg-trade-lock-flag.is-on {
  color: #86efac;
}
#nto-minigame .mg-trade-slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.3rem;
}
#nto-minigame .mg-trade-slots .mg-bag-slot {
  min-height: 2.85rem !important;
}
#nto-minigame .mg-trade-gold-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 11px;
  color: rgba(255,255,255,0.65);
}
#nto-minigame .mg-trade-gold-row input {
  width: 6.2rem;
  max-width: 45%;
  border-radius: 0.35rem;
  border: 1px solid rgba(251,191,36,0.3);
  background: rgba(0,0,0,0.4);
  color: #fbbf24;
  font-size: 12px;
  font-weight: 700;
  padding: 0.35rem 0.45rem;
  text-align: right;
}
#nto-minigame .mg-trade-gold-row.is-arts input {
  border-color: rgba(56,189,248,0.35);
  color: #7dd3fc;
}
#nto-minigame .mg-trade-gold-row.is-arts strong {
  color: #7dd3fc;
}
#nto-minigame .mg-trade-bag-wrap {
  flex: 1 1 auto;
  min-height: 8rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
#nto-minigame .mg-trade-bag-grid {
  flex: 1 1 auto !important;
  min-height: 9rem !important;
  max-height: none !important;
}
#nto-minigame .mg-trade-foot {
  margin-top: 0 !important;
  gap: 0.65rem;
  align-items: center;
  justify-content: space-between;
}
#nto-minigame .mg-trade-note {
  flex: 1 1 auto;
  margin: 0;
}
#nto-minigame .mg-trade-confirm {
  flex: 0 0 auto;
  min-width: 7.5rem;
  background: #f59e0b !important;
  color: #111 !important;
}
#nto-minigame .mg-trade-confirm:hover:not(:disabled) {
  background: #fbbf24 !important;
}
#nto-minigame .mg-trade-confirm.is-unlock {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(255,255,255,0.12);
}
#nto-minigame .mg-trade-confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Desktop: duas colunas de oferta lado a lado */
@media (min-width: 720px) {
  #nto-minigame .mg-trade-offers {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  #nto-minigame .mg-trade-slots .mg-bag-slot {
    min-height: 3.1rem !important;
  }
  #nto-minigame .mg-trade-bag-grid {
    min-height: 11rem !important;
  }
}

/* Mobile / compact: sheet ocupa tudo; ofertas empilhadas; foot sticky confort?vel */
#nto-minigame.is-mobile-ui .mg-trade-panel,
#nto-minigame.is-compact-mobile .mg-trade-panel,
#nto-minigame.is-mobile-playing .mg-trade-panel {
  position: absolute;
  inset: 0;
  z-index: 70;
}
#nto-minigame.is-mobile-ui .mg-trade-body,
#nto-minigame.is-compact-mobile .mg-trade-body,
#nto-minigame.is-mobile-playing .mg-trade-body {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
  padding-bottom: calc(0.25rem + env(safe-area-inset-bottom));
}
#nto-minigame.is-mobile-ui .mg-trade-foot,
#nto-minigame.is-compact-mobile .mg-trade-foot,
#nto-minigame.is-mobile-playing .mg-trade-foot {
  flex-wrap: wrap;
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom));
}
#nto-minigame.is-mobile-ui .mg-trade-confirm,
#nto-minigame.is-compact-mobile .mg-trade-confirm,
#nto-minigame.is-mobile-playing .mg-trade-confirm {
  width: 100%;
  min-height: 2.65rem;
  font-size: 13px;
}
#nto-minigame.is-mobile-ui .mg-trade-note,
#nto-minigame.is-compact-mobile .mg-trade-note,
#nto-minigame.is-mobile-playing .mg-trade-note {
  width: 100%;
  order: 2;
  text-align: center;
}
@media (max-width: 640px) {
  #nto-minigame .mg-trade-offers {
    grid-template-columns: 1fr;
  }
  #nto-minigame .mg-trade-foot {
    flex-direction: column;
    align-items: stretch;
  }
  #nto-minigame .mg-trade-confirm {
    width: 100%;
    min-height: 2.65rem;
  }
  #nto-minigame .mg-trade-slots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ================================================================
   HUB AUTH TABS — Login / Criar Conta / Criar Personagem
   ================================================================ */

/* Tab bar */
#nto-minigame .mg-auth-tabs {
  display: flex;
  gap: 0.25rem;
}

#nto-minigame .mg-auth-tab {
  color: rgba(255, 255, 255, 0.4);
  background: transparent;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all 0.2s ease;
  padding: 0.5rem 0.65rem;
  font-size: 11px;
}
#nto-minigame .mg-auth-tab:hover {
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.04);
}
#nto-minigame .mg-auth-tab.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Panels */
#nto-minigame .mg-auth-panel {
  animation: mgAuthFadeIn 0.25s ease;
}
@keyframes mgAuthFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Submit button */
#nto-minigame .mg-auth-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Voc/Town selection buttons */
#nto-minigame [data-mg-char-voc],
#nto-minigame [data-mg-char-town] {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all 0.15s ease;
}
#nto-minigame [data-mg-char-voc]:hover,
#nto-minigame [data-mg-char-town]:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}

/* ── Mobile responsive ── */
@media (max-width: 480px) {
  /* Auth panels: less padding */
  #nto-minigame .mg-auth-panel {
    padding: 1.25rem 1rem;
  }

  /* Tabs: smaller */
  #nto-minigame .mg-auth-tab {
    padding: 0.4rem 0.5rem;
    font-size: 10px;
    letter-spacing: 0.05em;
  }

  /* Captcha math: stack vertically */
  #nto-minigame [data-mg-captcha-wrap] .flex.items-center.gap-3 {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  #nto-minigame [data-mg-captcha-wrap] .inline-flex.min-w-\[5\.5rem\] {
    min-width: 4.5rem;
    font-size: 1rem;
    padding: 0.5rem 0.75rem;
  }
  #nto-minigame [data-mg-captcha-wrap] input[name="captcha_answer"] {
    max-width: 100%;
    flex: 1;
  }

  /* Password grid: already grid-cols-1 on mobile via Tailwind, but ensure full width */
  #nto-minigame [data-mg-auth-panel] .grid.sm\\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Voc/town grid: 2 cols on small mobile */
  #nto-minigame [data-mg-char-vocs],
  #nto-minigame [data-mg-char-towns] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Character name input */
  #nto-minigame #mg-char-name {
    font-size: 1.125rem;
    padding: 0.5rem 0;
  }
}

@media (max-width: 375px) {
  /* Even smaller tabs */
  #nto-minigame .mg-auth-tab {
    padding: 0.35rem 0.4rem;
    font-size: 9px;
  }

  /* Auth panels: minimum padding */
  #nto-minigame .mg-auth-panel {
    padding: 1rem 0.75rem;
  }
}

/* ==========================================================================
   Mercado entre jogadores ([data-mg-market])
   Reaproveita a linguagem visual da loja (mg-store-*) mas com escopo proprio:
   as regras de loja sao limitadas a [data-mg-shop]/[data-mg-arts-shop].
   ========================================================================== */
#nto-minigame [data-mg-market] .mg-store-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  flex: 0 0 auto;
  padding: 0 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  overflow-x: auto;
  scrollbar-width: none;
}
#nto-minigame [data-mg-market] .mg-store-tabs::-webkit-scrollbar {
  display: none;
}
#nto-minigame [data-mg-market] .mg-store-tab {
  flex: 1 1 auto;
  min-height: 2.4rem;
  padding: 0.45rem 0.6rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
#nto-minigame [data-mg-market] .mg-store-tab.is-active {
  color: #fff;
  border-bottom-color: rgba(52, 211, 153, 0.75);
  background: rgba(16, 185, 129, 0.07);
}

#nto-minigame [data-mg-market] .mg-store-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.75rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
#nto-minigame [data-mg-market] .mg-store-list.is-hidden,
#nto-minigame [data-mg-market] .mg-store-list.hidden,
#nto-minigame [data-mg-market] .mg-store-list[hidden],
#nto-minigame [data-mg-market] .mg-store-foot.is-hidden,
#nto-minigame [data-mg-market] .mg-store-foot.hidden,
#nto-minigame [data-mg-market] .mg-store-foot[hidden],
#nto-minigame [data-mg-market] [data-mg-market-panel].is-hidden,
#nto-minigame [data-mg-market] [data-mg-market-panel].hidden,
#nto-minigame [data-mg-market] [data-mg-market-panel][hidden],
#nto-minigame [data-mg-market] .mg-market-bar.is-hidden,
#nto-minigame [data-mg-market] .mg-market-pager.hidden,
#nto-minigame [data-mg-market] .mg-market-pager[hidden] {
  display: none !important;
}

/* Filtros (ordenação / moeda) */
#nto-minigame [data-mg-market] .mg-market-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.5rem 0.75rem 0;
}
#nto-minigame [data-mg-market] .mg-market-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
#nto-minigame [data-mg-market] .mg-market-chip {
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}
#nto-minigame [data-mg-market] .mg-market-chip.is-active {
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(16, 185, 129, 0.16);
  color: #a7f3d0;
}

/* Linha de anuncio */
#nto-minigame [data-mg-market] .mg-store-row {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 0.55rem;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.7rem;
  border-radius: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
  position: relative;
}
#nto-minigame [data-mg-market] .mg-store-row.is-broke {
  opacity: 0.72;
  border-color: rgba(251, 113, 133, 0.22);
}
#nto-minigame [data-mg-market] .mg-store-row.is-mine {
  border-color: rgba(56, 189, 248, 0.3);
  background: rgba(14, 165, 233, 0.06);
}
#nto-minigame [data-mg-market] .mg-store-row.is-selected {
  border-color: rgba(52, 211, 153, 0.55);
  background: rgba(16, 185, 129, 0.12);
}
#nto-minigame [data-mg-market] .mg-store-row.is-sellable {
  cursor: pointer;
}
#nto-minigame [data-mg-market] .mg-store-row.is-history {
  opacity: 0.85;
}

#nto-minigame [data-mg-market] .mg-store-main {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
  min-width: 0;
}
#nto-minigame [data-mg-market] .mg-store-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.4);
}
#nto-minigame [data-mg-market] .mg-store-icon img {
  width: 2rem;
  height: 2rem;
  margin: 0;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame [data-mg-market] .mg-market-noicon {
  color: rgba(255, 255, 255, 0.3);
  font-size: 1rem;
  font-weight: 800;
}
#nto-minigame [data-mg-market] .mg-store-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
#nto-minigame [data-mg-market] .mg-store-name {
  display: block;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 750;
  color: #fff;
  line-height: 1.25;
}
#nto-minigame [data-mg-market] .mg-store-desc {
  display: block;
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.45);
}
#nto-minigame [data-mg-market] .mg-store-owned {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fbbf24;
}
#nto-minigame [data-mg-market] .mg-store-afford {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame [data-mg-market] .mg-store-afford.is-broke {
  color: #fda4af;
}

#nto-minigame [data-mg-market] .mg-store-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  box-sizing: border-box;
}
#nto-minigame [data-mg-market] .mg-store-price {
  flex: 1 1 auto;
  min-width: 4.5rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #fbbf24;
  font-variant-numeric: tabular-nums;
}
#nto-minigame [data-mg-market] .mg-market-unit {
  font-size: 0.625rem;
  font-weight: 650;
  color: rgba(255, 255, 255, 0.35);
}
#nto-minigame [data-mg-market] .mg-store-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-left: auto;
}
#nto-minigame [data-mg-market] .mg-store-btn {
  flex: 0 0 auto;
  min-width: 5.5rem;
  min-height: 2.1rem;
  padding: 0 0.5rem;
  border-radius: 0.35rem;
  border: 1px solid transparent;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
#nto-minigame [data-mg-market] .mg-store-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
#nto-minigame [data-mg-market] .mg-store-btn.is-buy {
  border-color: rgba(52, 211, 153, 0.45);
  background: rgba(16, 185, 129, 0.18);
  color: #a7f3d0;
}
#nto-minigame [data-mg-market] .mg-store-btn.is-cart {
  border-color: rgba(56, 189, 248, 0.4);
  background: rgba(14, 165, 233, 0.14);
  color: #7dd3fc;
}

/* Selos de moeda / status */
#nto-minigame [data-mg-market] .mg-market-coin {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.05rem 0.3rem;
  border-radius: 0.3rem;
  font-size: 0.5625rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}
#nto-minigame [data-mg-market] .mg-market-coin.is-gold {
  background: rgba(251, 191, 36, 0.18);
  color: #fcd34d;
}
#nto-minigame [data-mg-market] .mg-market-coin.is-arts {
  background: rgba(56, 189, 248, 0.18);
  color: #7dd3fc;
}
#nto-minigame [data-mg-market] .mg-market-badge {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0.15rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  font-size: 0.625rem;
  font-weight: 800;
}
#nto-minigame [data-mg-market] .mg-market-badge.is-ok {
  background: rgba(16, 185, 129, 0.18);
  color: #a7f3d0;
}
#nto-minigame [data-mg-market] .mg-market-badge.is-off {
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.5);
}
#nto-minigame [data-mg-market] .mg-market-badge.is-warn {
  background: rgba(251, 191, 36, 0.15);
  color: #fcd34d;
}

#nto-minigame [data-mg-market] .mg-market-empty {
  margin: 1.5rem 0.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8125rem;
  line-height: 1.5;
}
#nto-minigame [data-mg-market] .mg-market-note {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(52, 211, 153, 0.18);
  background: rgba(16, 185, 129, 0.06);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.6875rem;
  line-height: 1.45;
}

/* Paginacao */
#nto-minigame [data-mg-market] .mg-market-pager {
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
#nto-minigame [data-mg-market] .mg-market-pager-info {
  flex: 1 1 auto;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
}

/* Rodape / formulario de anuncio */
#nto-minigame [data-mg-market] .mg-store-foot {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem max(0.65rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.35);
}
#nto-minigame [data-mg-market] .mg-market-sell-form {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
}
#nto-minigame [data-mg-market] .mg-market-sell-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
#nto-minigame [data-mg-market] .mg-market-sell-label {
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
#nto-minigame [data-mg-market] .mg-market-sell-name {
  font-size: 0.8125rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nto-minigame [data-mg-market] .mg-market-sell-total {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #a7f3d0;
}
#nto-minigame [data-mg-market] .mg-market-input {
  width: 4.5rem;
  min-height: 2rem;
  padding: 0 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
#nto-minigame [data-mg-market] .mg-market-input::-webkit-outer-spin-button,
#nto-minigame [data-mg-market] .mg-market-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#nto-minigame [data-mg-market] .mg-market-input.is-price {
  width: 6rem;
}
#nto-minigame [data-mg-market] .mg-market-input:disabled {
  opacity: 0.45;
}
#nto-minigame [data-mg-market] .mg-store-checkout {
  flex: 0 0 auto;
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem;
  border: 0;
  border-radius: 0.45rem;
  background: #059669;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
#nto-minigame [data-mg-market] .mg-store-checkout:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Mensagem de status do painel (reaproveita .mg-sheet-hint) */
#nto-minigame [data-mg-market] .mg-sheet-hint.is-ok {
  color: #a7f3d0;
}
#nto-minigame [data-mg-market] .mg-sheet-hint.is-bad {
  color: #fda4af;
}
#nto-minigame [data-mg-market] .mg-sheet-hint.is-busy {
  color: rgba(125, 211, 252, 0.9);
}

@media (max-width: 640px) {
  #nto-minigame [data-mg-market] .mg-store-btn {
    min-width: 4.6rem;
  }
  #nto-minigame [data-mg-market] .mg-store-foot {
    flex-direction: column;
    align-items: stretch;
  }
  #nto-minigame [data-mg-market] .mg-store-checkout {
    width: 100%;
  }
  #nto-minigame [data-mg-market] .mg-market-input.is-price {
    width: 100%;
  }
}

/* ==========================================================================
   CRAFT 3.0 — painel refeito (bancada + sets + cards de verdade)
   Bloco no fim de propósito: vence as regras antigas de .mg-craft-* por ordem.
   ========================================================================== */
#nto-minigame .mg-craft-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.85rem 1rem 1.4rem;
}
#nto-minigame .mg-craft-shell {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

/* Cabeçalho de seção */
#nto-minigame .mg-craft-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
#nto-minigame .mg-craft-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0;
  padding: 0 0 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#nto-minigame .mg-craft-section-head p {
  margin: 0;
  font-size: 0.625rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.75);
}
#nto-minigame .mg-craft-section-head span {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.4);
}

/* Ferreiro dentro do shell */
#nto-minigame .mg-craft-mastery {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0;
  background: #100f0d;
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.9);
}

/* ── Fila de forja ─────────────────────────────────────────────────────── */
#nto-minigame .mg-craft-queue-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
#nto-minigame .mg-craft-queue {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.5rem;
}
#nto-minigame .mg-craft-queue-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 0.5rem;
  border: 1px dashed rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.38);
  font-size: 0.6875rem;
  text-align: center;
}
#nto-minigame .mg-craft-job {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  grid-template-areas: 'icon info meta' 'btn btn btn';
  align-items: center;
  gap: 0.5rem 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}
#nto-minigame .mg-craft-job.is-ready {
  border-color: rgba(52, 211, 153, 0.35);
  background: rgba(16, 185, 129, 0.07);
}
#nto-minigame .mg-craft-job img {
  grid-area: icon;
  width: 38px;
  height: 38px;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.4);
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-craft-job-info {
  grid-area: info;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}
#nto-minigame .mg-craft-job-info strong {
  font-size: 0.75rem;
  font-weight: 750;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nto-minigame .mg-craft-job-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
#nto-minigame .mg-craft-job-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b45309, #fbbf24);
}
#nto-minigame .mg-craft-job.is-ready .mg-craft-job-bar > span {
  background: linear-gradient(90deg, #059669, #34d399);
}
#nto-minigame .mg-craft-job-meta {
  grid-area: meta;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(251, 191, 36, 0.85);
  white-space: nowrap;
}
#nto-minigame .mg-craft-job.is-ready .mg-craft-job-meta {
  color: #6ee7b7;
}
#nto-minigame .mg-craft-rush {
  grid-area: btn;
  justify-self: start;
  min-height: 1.7rem;
  margin: 0;
}

/* ── Chips de set ──────────────────────────────────────────────────────── */
#nto-minigame .mg-craft-sets {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
  scrollbar-width: none;
}
#nto-minigame .mg-craft-sets::-webkit-scrollbar {
  display: none;
}
#nto-minigame .mg-craft-set {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  padding: 0.4rem 0.6rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.6875rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
#nto-minigame .mg-craft-set:hover {
  border-color: rgba(251, 191, 36, 0.35);
  color: #fff;
}
#nto-minigame .mg-craft-set.is-active {
  border-color: rgba(251, 191, 36, 0.6);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.16), rgba(251, 191, 36, 0.05));
  color: #fde68a;
}
#nto-minigame .mg-craft-set-tier {
  padding: 0.05rem 0.3rem;
  border-radius: 0.28rem;
  background: rgba(0, 0, 0, 0.4);
  font-size: 0.5625rem;
  font-weight: 900;
  color: #fcd34d;
}
#nto-minigame .mg-craft-set-progress {
  font-size: 0.5625rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-craft-set.is-active .mg-craft-set-progress {
  color: rgba(253, 230, 138, 0.8);
}
#nto-minigame .mg-craft-set-ready {
  min-width: 1.05rem;
  padding: 0.05rem 0.28rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.9);
  color: #04231a;
  font-size: 0.5625rem;
  font-weight: 900;
  text-align: center;
}

/* ── Bancada (resumo do set) ───────────────────────────────────────────── */
#nto-minigame .mg-craft-bench-card {
  padding: 0.8rem 0.85rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(251, 191, 36, 0.22);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.09), rgba(251, 191, 36, 0.015) 55%, rgba(0, 0, 0, 0));
}
#nto-minigame .mg-craft-bench-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
#nto-minigame .mg-craft-bench-head strong {
  font-size: 0.9375rem;
  font-weight: 800;
  color: #fff;
}
#nto-minigame .mg-craft-bench-tier {
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
  background: rgba(251, 191, 36, 0.2);
  color: #fcd34d;
  font-size: 0.5625rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}
#nto-minigame .mg-craft-bench-count {
  margin-left: auto;
  font-size: 0.6875rem;
  font-weight: 800;
  color: rgba(253, 230, 138, 0.85);
}
#nto-minigame .mg-craft-bench-bar {
  margin: 0.5rem 0 0.5rem;
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
#nto-minigame .mg-craft-bench-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #b45309, #fbbf24);
}
#nto-minigame .mg-craft-bench-hint {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}
#nto-minigame .mg-craft-bench-hint b {
  color: #a7f3d0;
}
#nto-minigame .mg-craft-bench-missing {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.55rem;
}
#nto-minigame .mg-craft-missing-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem 0.15rem 0.2rem;
  border-radius: 999px;
  border: 1px solid rgba(251, 113, 133, 0.3);
  background: rgba(244, 63, 94, 0.08);
  color: #fecdd3;
  font-size: 0.625rem;
  font-weight: 700;
}
#nto-minigame .mg-craft-missing-chip.is-ok {
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(16, 185, 129, 0.08);
  color: #a7f3d0;
}
#nto-minigame .mg-craft-missing-chip img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* ── Cards de peça ─────────────────────────────────────────────────────── */
#nto-minigame .mg-craft-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 0.6rem;
  max-height: none;
  overflow: visible;
  padding: 0;
}
#nto-minigame .mg-craft-empty {
  grid-column: 1 / -1;
  margin: 0.5rem 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
}
#nto-minigame .mg-craft-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
#nto-minigame .mg-craft-card.is-ready {
  border-color: rgba(251, 191, 36, 0.45);
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.08), rgba(255, 255, 255, 0.02));
}
#nto-minigame .mg-craft-card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
#nto-minigame .mg-craft-card-icon {
  position: relative;
  flex: 0 0 3.25rem;
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.07), rgba(0, 0, 0, 0.55));
}
#nto-minigame .mg-craft-card-icon img {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-craft-card-head-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
#nto-minigame .mg-craft-card-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
#nto-minigame .mg-craft-card-top strong {
  font-size: 0.875rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}
#nto-minigame .mg-craft-tier {
  flex: 0 0 auto;
  padding: 0.05rem 0.32rem;
  border-radius: 0.28rem;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.5625rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}
#nto-minigame .mg-craft-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
#nto-minigame .mg-craft-chip {
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.5625rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
#nto-minigame .mg-craft-chip.is-time {
  border-color: rgba(251, 191, 36, 0.25);
  color: rgba(253, 230, 138, 0.9);
}
#nto-minigame .mg-craft-chip.is-up {
  border-color: rgba(52, 211, 153, 0.25);
  color: #a7f3d0;
}

/* Insumos: linha por item (ícone · nome · tem/necessário · onde) */
#nto-minigame .mg-craft-needs {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
#nto-minigame .mg-craft-need {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.45rem;
  border-radius: 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.25);
}
#nto-minigame .mg-craft-need.is-ok {
  border-color: rgba(52, 211, 153, 0.28);
  background: rgba(16, 185, 129, 0.07);
}
#nto-minigame .mg-craft-need.is-miss {
  border-color: rgba(251, 113, 133, 0.3);
  background: rgba(244, 63, 94, 0.07);
}
#nto-minigame .mg-craft-need img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-craft-need-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.6875rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}
#nto-minigame .mg-craft-need-qty {
  font-size: 0.6875rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #fcd34d;
}
#nto-minigame .mg-craft-need.is-ok .mg-craft-need-qty {
  color: #6ee7b7;
}
#nto-minigame .mg-craft-need.is-miss .mg-craft-need-qty {
  color: #fda4af;
}
#nto-minigame .mg-craft-need-src {
  display: block;
  padding: 0.05rem 0.3rem;
  border-radius: 0.28rem;
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}
#nto-minigame .mg-craft-need.is-ok .mg-craft-need-src {
  color: rgba(167, 243, 208, 0.5);
}

/* Rodapé do card: custo + botão */
#nto-minigame .mg-craft-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
#nto-minigame .mg-craft-cost {
  font-size: 0.75rem;
  font-weight: 800;
  color: rgba(253, 230, 138, 0.95);
  font-variant-numeric: tabular-nums;
}
#nto-minigame .mg-craft-cost-label {
  display: block;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}
#nto-minigame .mg-craft-go {
  flex: 0 0 auto;
  min-height: 2.1rem;
  padding: 0 1.1rem;
  border: 1px solid rgba(251, 191, 36, 0.5);
  border-radius: 0.45rem;
  background: linear-gradient(180deg, #d97706, #b45309);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
#nto-minigame .mg-craft-go:disabled {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.35);
  cursor: not-allowed;
}

@media (max-width: 720px) {
  #nto-minigame .mg-craft-scroll {
    padding: 0.7rem 0.7rem 1.2rem;
  }
  #nto-minigame .mg-craft-list,
  #nto-minigame .mg-craft-queue {
    grid-template-columns: 1fr;
  }
  #nto-minigame .mg-craft-need {
    grid-template-columns: 22px 1fr auto;
  }
  #nto-minigame .mg-craft-need-src {
    display: none;
  }
}

/* ── Acessibilidade de toque / nada de scroll escondido ─────────────────── */
/* O seletor de set era uma faixa com overflow-x escondido: no desktop os
   últimos sets ficavam INALCANÇÁVEIS. Agora é grade que quebra linha. */
#nto-minigame .mg-craft-sets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.4rem;
  overflow: visible;
  padding-bottom: 0;
}
#nto-minigame .mg-craft-set {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 3.2rem; /* >= 44px de alvo de toque */
  min-width: 0;
  padding: 0.4rem 0.55rem;
  text-align: left;
  cursor: pointer;
}
#nto-minigame .mg-craft-set-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nto-minigame .mg-craft-set.is-ready {
  border-color: rgba(52, 211, 153, 0.35);
}
#nto-minigame .mg-craft-set.is-active.is-ready {
  border-color: rgba(52, 211, 153, 0.6);
}
#nto-minigame .mg-craft-bench-odds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.55rem 0 0;
}
/* tooltip antigo do card: desligado (cobria o botão Forjar em toque) */
#nto-minigame .mg-craft-tooltip {
  display: none !important;
}
#nto-minigame .mg-craft-card {
  cursor: default;
}
@media (max-width: 720px) {
  #nto-minigame .mg-craft-sets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
  }
  /* bots de acao: largura total e altura de toque confortavel */
  #nto-minigame .mg-craft-card-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }
  #nto-minigame .mg-craft-cost {
    justify-content: center;
  }
  #nto-minigame .mg-craft-go {
    width: 100%;
    min-height: 3.2rem;
    font-size: 0.75rem;
  }
  #nto-minigame .mg-craft-rush {
    min-height: 3.2rem;
    font-size: 0.6875rem;
  }
  /* a UI mobile legada fixa min-height 2.6rem !important (linha ~9909):
     sobrescreve para um alvo de toque de verdade (>=44px) */
  #nto-minigame.is-mobile-ui .mg-craft-go,
  #nto-minigame.is-compact-mobile .mg-craft-go,
  #nto-minigame.is-mobile-landscape .mg-craft-go,
  #nto-minigame.is-mobile-ui .mg-craft-rush,
  #nto-minigame.is-compact-mobile .mg-craft-rush {
    min-height: 3.2rem !important;
  }
  /* menos texto no telefone: o que falta ja aparece nos chips de insumo */
  #nto-minigame .mg-craft-bench-hint {
    display: none;
  }
  #nto-minigame .mg-craft-section-head p {
    font-size: 0.5625rem;
  }
  #nto-minigame .mg-craft-card {
    padding: 0.65rem 0.7rem;
  }
  #nto-minigame .mg-craft-job {
    grid-template-columns: 40px 1fr;
  }
  /* mercado: abas e filtros também precisam de alvo de toque */
  #nto-minigame [data-mg-market] .mg-store-tab,
  #nto-minigame [data-mg-market] .mg-market-chip {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  #nto-minigame [data-mg-market] .mg-market-chip {
    font-size: 0.6875rem;
  }
}

/* ==========================================================================
   MG UI 5.0 — PADRÃO MOBILE (landscape-first)
   Base compartilhada por TODOS os painéis (.mg-panel). Alvo: 740x390.
   Fica no fim do arquivo de propósito: vence as regras antigas por ordem.
   Regras do padrão:
     1. cabeçalho de tela em 1 linha, 46px (era 54-78px)
     2. alvo de toque >= 44px em todo elemento interativo dentro de painel
     3. legibilidade: nada de texto abaixo de 10px (aplicado por JS, que
        corrige os nós já renderizados — ver ui.js::installTypeFloor)
     4. catálogo = 2 painéis (lista | detalhe) + rodapé fixo de ação
   ========================================================================== */
#nto-minigame {
  --mg-tap: 44px;
  --mg-tap-lg: 48px;
  --mg-gap: 8px;
  --mg-pad: 10px;
  --mg-head-h: 46px;
  --mg-foot-h: 52px;
  --mg-r: 10px;
  --mg-fs-title: 15px;
  --mg-fs-sub: 11px;
  --mg-fs-body: 12.5px;
  --mg-fs-label: 11px;
  --mg-fg: rgba(255, 255, 255, 0.88);
  --mg-fg-dim: rgba(255, 255, 255, 0.55);
  --mg-line: rgba(255, 255, 255, 0.09);
  --mg-surface: #14130f;
  --mg-amber: #f0b429;
  --mg-green: #34d399;
}

/* ---- 1. cabeçalho de tela: uma linha só, 46px ---- */
#nto-minigame.is-mobile-ui .mg-panel .mg-sheet-head,
#nto-minigame.is-mobile-landscape .mg-panel .mg-sheet-head {
  height: var(--mg-head-h);
  min-height: var(--mg-head-h);
  padding: 0;
  padding-left: max(var(--mg-pad), env(safe-area-inset-left));
  padding-right: max(var(--mg-pad), env(safe-area-inset-right));
  gap: var(--mg-gap);
  align-items: center;
}
#nto-minigame.is-mobile-ui .mg-panel .mg-sheet-head-copy,
#nto-minigame.is-mobile-landscape .mg-panel .mg-sheet-head-copy {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
/* kicker é redundante com o título ("SISTEMA / Config") — sai no telefone */
#nto-minigame.is-mobile-ui .mg-panel .mg-sheet-kicker,
#nto-minigame.is-mobile-landscape .mg-panel .mg-sheet-kicker {
  display: none;
}
#nto-minigame.is-mobile-ui .mg-panel .mg-sheet-title,
#nto-minigame.is-mobile-landscape .mg-panel .mg-sheet-title {
  margin: 0;
  font-size: var(--mg-fs-title);
  line-height: 1.15;
  white-space: nowrap;
}
#nto-minigame.is-mobile-ui .mg-panel .mg-sheet-sub,
#nto-minigame.is-mobile-landscape .mg-panel .mg-sheet-sub {
  margin: 0;
  font-size: var(--mg-fs-sub);
  color: var(--mg-fg-dim);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nto-minigame.is-mobile-ui .mg-panel .mg-sheet-head-actions,
#nto-minigame.is-mobile-landscape .mg-panel .mg-sheet-head-actions {
  flex: 0 0 auto;
  gap: 8px;
}
/* fechar: "✕" quadrado de 44x44 no telefone. Era um pill de 73x44
   (`min-width: 3.4rem !important` + padding do CSS herdado) que ocupava
   metade do cabeçalho; o alvo de toque continua 44x44. */
#nto-minigame.is-mobile-ui .mg-panel .mg-sheet-close,
#nto-minigame.is-mobile-landscape .mg-panel .mg-sheet-close {
  width: var(--mg-tap) !important;
  min-width: var(--mg-tap) !important;
  max-width: var(--mg-tap) !important;
  min-height: var(--mg-tap) !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
#nto-minigame.is-mobile-ui .mg-panel .mg-sheet-close::before,
#nto-minigame.is-mobile-landscape .mg-panel .mg-sheet-close::before {
  content: '✕';
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
/* dica da tela: 1 linha, sem empurrar o conteúdo pra baixo */
#nto-minigame.is-mobile-ui .mg-panel .mg-sheet-hint,
#nto-minigame.is-mobile-landscape .mg-panel .mg-sheet-hint {
  margin: 0;
  padding: 4px var(--mg-pad);
  font-size: var(--mg-fs-label);
  line-height: 1.3;
  color: var(--mg-fg-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- 2. alvo de toque mínimo dentro de qualquer painel ----
   A caixa de UI herdada fixa altura com `!important` em vários lugares
   (ex: .mg-store-tab 2.4rem, .mg-store-btn 2.1rem). Sem `!important` aqui,
   o piso de 44px simplesmente não acontece. */
#nto-minigame.is-mobile-ui .mg-panel :is(button, [role='button'], [role='tab'], [role='option'], select):not(.mg-cfg-switch),
#nto-minigame.is-mobile-landscape .mg-panel :is(button, [role='button'], [role='tab'], [role='option'], select):not(.mg-cfg-switch) {
  min-height: var(--mg-tap) !important;
}
/* o switch do Config é um trilho pequeno de propósito: o piso de 44px o
deixava 37x44 (bolha esticada). O tamanho visual volta ao original e a área
de toque de 44px é dada por um ::after invisível. */
#nto-minigame .mg-cfg-switch {
  min-height: 0 !important;
  height: 1.45rem !important;
  width: 2.65rem !important;
}
#nto-minigame .mg-cfg-switch::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.5rem;
  height: var(--mg-tap, 44px);
  transform: translate(-50%, -50%);
}
/* botão "+" dos atributos (Perfil): era 28x44 (tall estreito) — fica quadrado */
#nto-minigame.is-mobile-ui .mg-power-add,
#nto-minigame.is-compact-mobile .mg-power-add {
  min-width: var(--mg-tap) !important;
}
#nto-minigame [data-mg-store-actionbar] .mg-store-btn {
  min-height: var(--mg-tap-lg) !important;
  height: auto !important;
}
/* em tela baixa (celular deitado) a dica de 1 linha sai: o próprio painel explica */
@media (max-height: 480px) {
  #nto-minigame.is-mobile-ui .mg-panel .mg-sheet-hint,
  #nto-minigame.is-mobile-landscape .mg-panel .mg-sheet-hint {
    display: none;
  }
}

/* ---- 3. corpo das telas ---- */
#nto-minigame.is-mobile-ui .mg-panel .mg-sheet-body,
#nto-minigame.is-mobile-landscape .mg-panel .mg-sheet-body {
  padding: var(--mg-pad);
}
/* barra de abas: 44px de alvo, sem padding vertical sobrando */
#nto-minigame.is-mobile-ui .mg-panel .mg-store-tabs,
#nto-minigame.is-mobile-landscape .mg-panel .mg-store-tabs {
  padding-top: 0;
  padding-bottom: 0;
}
/* o invólucro da Loja não usa padding: quem respira são as colunas */
#nto-minigame.is-mobile-ui .mg-panel [data-mg-store-catwrap],
#nto-minigame.is-mobile-landscape .mg-panel [data-mg-store-catwrap] {
  padding: 0;
}
#nto-minigame [data-mg-store-actionbar] {
  padding-top: 4px;
  padding-bottom: max(4px, env(safe-area-inset-bottom));
}

/* ==========================================================================
   4. LOJA — 2 painéis (lista | detalhe) + rodapé fixo de ação
   ========================================================================== */
#nto-minigame [data-mg-store-catwrap] {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  gap: 0;
}
#nto-minigame [data-mg-store-catwrap] .mg-store-cols {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}
#nto-minigame [data-mg-store-catwrap] .mg-store-col-list {
  flex: 0 0 clamp(240px, 40%, 480px) !important;
  width: auto !important;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-right: 1px solid var(--mg-line);
  overscroll-behavior: contain;
}
#nto-minigame [data-mg-store-catwrap] .mg-store-col-detail {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overscroll-behavior: contain;
}

/* linha compacta da lista: ícone + nome + preço (alvo de 44px) */
#nto-minigame .mg-cat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--mg-tap);
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--mg-r);
  background: rgba(255, 255, 255, 0.025);
  color: var(--mg-fg);
  text-align: left;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#nto-minigame .mg-cat-row.is-picked {
  border-color: rgba(240, 180, 41, 0.55);
  background: rgba(240, 180, 41, 0.1);
}
#nto-minigame .mg-cat-row.is-equipped {
  border-color: rgba(52, 211, 153, 0.35);
}
#nto-minigame .mg-cat-row.is-broke {
  opacity: 0.52;
}
#nto-minigame .mg-cat-row.is-vip.is-broke {
  opacity: 0.62;
}
#nto-minigame.is-tut-food-shop .mg-cat-row.is-tut-food {
  border-color: rgba(250, 204, 21, 0.7);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.35);
  animation: mg-tut-gear-glow 1.4s ease-in-out infinite;
}
#nto-minigame .mg-cat-row .mg-store-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
}
#nto-minigame .mg-cat-row .mg-store-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-cat-row .mg-store-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}
#nto-minigame .mg-cat-row .mg-store-name {
  font-size: var(--mg-fs-body);
  font-weight: 700;
  color: var(--mg-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nto-minigame .mg-cat-row .mg-store-owned {
  font-size: var(--mg-fs-label);
  color: var(--mg-fg-dim);
}
#nto-minigame .mg-cat-row .mg-store-price {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 13px;
  font-weight: 800;
  color: var(--mg-amber);
}
#nto-minigame .mg-cat-row .mg-store-price i {
  font-style: normal;
  font-size: var(--mg-fs-label);
  font-weight: 700;
  color: var(--mg-fg-dim);
}

/* detalhe do item selecionado */
#nto-minigame .mg-store-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
#nto-minigame .mg-store-detail-icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--mg-line);
  background: rgba(255, 255, 255, 0.04);
}
#nto-minigame .mg-store-detail-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-store-detail-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
#nto-minigame .mg-store-detail-name {
  font-size: var(--mg-fs-title);
  font-weight: 800;
  color: var(--mg-fg);
}
#nto-minigame .mg-store-detail-price {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--mg-amber);
}
#nto-minigame .mg-store-detail-price i {
  font-style: normal;
  font-size: var(--mg-fs-label);
  font-weight: 600;
  color: var(--mg-fg-dim);
}
#nto-minigame .mg-store-detail-badge {
  margin-left: auto;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.4);
  background: rgba(16, 185, 129, 0.14);
  color: #a7f3d0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#nto-minigame .mg-store-detail-desc {
  margin: 0;
  max-width: 62ch;
  font-size: var(--mg-fs-body);
  line-height: 1.5;
  color: var(--mg-fg-dim);
}
#nto-minigame .mg-store-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
#nto-minigame .mg-store-detail-meta > span {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--mg-line);
  background: rgba(255, 255, 255, 0.03);
  font-size: var(--mg-fs-label);
  color: var(--mg-fg-dim);
}
#nto-minigame .mg-store-detail-meta b {
  color: var(--mg-fg);
  font-weight: 800;
}
#nto-minigame .mg-store-empty {
  margin: 0;
  font-size: var(--mg-fs-body);
  color: var(--mg-fg-dim);
}

/* rodapé fixo de ação */
#nto-minigame .mg-store-actionbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px var(--mg-pad);
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--mg-line);
  background: #0f0e0b;
}
#nto-minigame .mg-store-actionbar.hidden,
#nto-minigame .mg-store-actionbar[hidden] {
  display: none;
}
#nto-minigame .mg-store-actionbar .mg-store-qty {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-r);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
#nto-minigame .mg-store-actionbar .mg-store-qty-btn {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--mg-fg);
  font-size: 19px;
  font-weight: 800;
  cursor: pointer;
}
#nto-minigame .mg-store-actionbar .mg-store-qty-btn:active {
  background: rgba(255, 255, 255, 0.08);
}
#nto-minigame .mg-store-actionbar .mg-store-qty-input {
  width: 46px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--mg-fg);
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  -moz-appearance: textfield;
}
#nto-minigame .mg-store-actionbar .mg-store-qty-input::-webkit-outer-spin-button,
#nto-minigame .mg-store-actionbar .mg-store-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#nto-minigame [data-mg-store-actionbar] .mg-store-btn {
  min-height: var(--mg-tap-lg) !important;
  height: auto !important;
  padding: 0 14px;
  border-radius: var(--mg-r);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
#nto-minigame [data-mg-store-actionbar] .mg-store-btn.is-cart {
  flex: 0 0 auto;
  border: 1px solid var(--mg-line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--mg-fg);
}
#nto-minigame [data-mg-store-actionbar] .mg-store-btn.is-buy {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid rgba(240, 180, 41, 0.5);
  background: linear-gradient(180deg, #f0b429, #c88a12);
  color: #1b1405;
}
/* a UI herdada prende a largura/flex/altura dos botões (min-height 2.1rem
   !important, text-overflow: ellipsis) — sem isto o rótulo "COMPRAR 55 G"
   sai truncado em "COMPRAR..." */
#nto-minigame [data-mg-store-actionbar] .mg-store-btn.is-buy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
#nto-minigame [data-mg-store-actionbar] .mg-store-btn.is-cart {
  flex: 0 0 auto !important;
  max-width: none !important;
  white-space: nowrap !important;
}
#nto-minigame .mg-store-actionbar .mg-store-btn:disabled {
  border-color: var(--mg-line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--mg-fg-dim);
  opacity: 0.6;
  cursor: not-allowed;
}
/* botão de voltar só existe na tela estreita */
#nto-minigame .mg-cat-back {
  display: none;
}

/* ==========================================================================
   6. TELA CHEIA NO TELEFONE
   ========================================================================== */
/* O container do jogo fica com `height: calc(-4.6rem + 100dvh)` quando está
   embutido no site (reserva 4,6rem ≈ 64px pro cabeçalho). No celular isso
   deixava a tela de login com 326px de 390px — o jogo é o dono da tela. */
#nto-minigame.is-mobile-ui:not(.is-focus-mode),
#nto-minigame.is-mobile-landscape:not(.is-focus-mode),
#nto-minigame.is-compact-mobile:not(.is-focus-mode),
#nto-minigame.is-mobile-playing:not(.is-focus-mode) {
  height: 100dvh !important;
  max-height: 100dvh !important;
}
@media (max-width: 900px), (pointer: coarse) {
  #nto-minigame:not(.is-focus-mode) {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
}
/* dicas de teclado (WASD / Q / E / F) não existem no touch e comiam 23px */
#nto-minigame.is-mobile-ui [data-mg-footerbar],
#nto-minigame.is-mobile-landscape [data-mg-footerbar],
#nto-minigame.is-compact-mobile [data-mg-footerbar],
#nto-minigame.is-mobile-playing [data-mg-footerbar] {
  display: none !important;
}
@media (max-width: 900px), (pointer: coarse) {
  #nto-minigame [data-mg-footerbar] {
    display: none !important;
  }
}

/* login (auth gate) no telefone: o formulário vinha preso numa caixa de
   267px com scroll próprio (e, ao soltar, era cortado pelo `overflow: hidden`
   do mg-hub-body). Agora quem rola é o corpo do hub, com a altura da tela. */
@media (max-width: 900px), (pointer: coarse) {
  #nto-minigame.is-mobile-ui .mg-hub-body:has([data-mg-auth-gate]),
  #nto-minigame.is-compact-mobile .mg-hub-body:has([data-mg-auth-gate]) {
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }
  #nto-minigame.is-mobile-ui [data-mg-auth-gate],
  #nto-minigame.is-compact-mobile [data-mg-auth-gate] {
    overflow: visible !important;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    padding-bottom: 1.5rem !important;
  }
  /* "Login obrigatório." / "Selecione e entre no lobby." — o título e o
     botão já dizem isso */
  #nto-minigame.is-mobile-ui .mg-hub-desc,
  #nto-minigame.is-compact-mobile .mg-hub-desc {
    display: none;
  }
  #nto-minigame.is-mobile-ui .mg-hub-intro,
  #nto-minigame.is-compact-mobile .mg-hub-intro {
    padding-bottom: 0.5rem;
  }
  /* campos e botão do login com altura de dedo */
  #nto-minigame.is-mobile-ui .mg-auth-panel input,
  #nto-minigame.is-compact-mobile .mg-auth-panel input {
    min-height: var(--mg-tap) !important;
  }
}

/* celular deitado (pouca altura): o login cabe sem rolar.
   Os dois parágrafos do painel ("Acesse sua conta" / "Entre com seu nome e
   senha") repetem o que os rótulos + botão já dizem. */
@media (max-height: 520px) {
  #nto-minigame.is-mobile-ui .mg-auth-panel,
  #nto-minigame.is-compact-mobile .mg-auth-panel {
    padding: 0.6rem 1rem !important;
  }  #nto-minigame.is-mobile-ui .mg-auth-panel > p,
  #nto-minigame.is-compact-mobile .mg-auth-panel > p {
    display: none;
  }
  #nto-minigame.is-mobile-ui .mg-auth-tabs,
  #nto-minigame.is-compact-mobile .mg-auth-tabs {
    margin-bottom: 0.5rem !important;
  }
  #nto-minigame.is-mobile-ui .mg-auth-panel form,
  #nto-minigame.is-compact-mobile .mg-auth-panel form {
    margin-top: 0.35rem !important;
  }
}

/* ==========================================================================
   7. LOGIN NO CELULAR
   ========================================================================== */
/* A barra inferior do hub ("Fazer login / Criar conta / Login + personagem
   obrigatorios") repete o formulário que está logo acima e ainda cortava o
   botão ENTRAR. No login ela sai. */
@media (max-width: 900px), (pointer: coarse) {
  #nto-minigame.is-mobile-ui .mg-hub-shell:has([data-mg-auth-gate]) .mg-hub-actions,
  #nto-minigame.is-compact-mobile .mg-hub-shell:has([data-mg-auth-gate]) .mg-hub-actions {
    display: none !important;
  }
}
/* celular deitado: a marca fica à esquerda e o formulário à direita —
   aproveita a largura em vez de deixar um vazio no meio */
@media (min-width: 640px) and (max-height: 560px) {
  #nto-minigame.is-mobile-ui .mg-hub-body:has([data-mg-auth-gate]),
  #nto-minigame.is-compact-mobile .mg-hub-body:has([data-mg-auth-gate]) {
    flex-direction: row !important;
    align-items: stretch;
    gap: 0.5rem;
  }
  #nto-minigame.is-mobile-ui .mg-hub-body:has([data-mg-auth-gate]) .mg-hub-intro,
  #nto-minigame.is-compact-mobile .mg-hub-body:has([data-mg-auth-gate]) .mg-hub-intro {
    flex: 0 0 32%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0.75rem;
  }
  #nto-minigame.is-mobile-ui .mg-hub-body:has([data-mg-auth-gate]) .mg-hub-title,
  #nto-minigame.is-compact-mobile .mg-hub-body:has([data-mg-auth-gate]) .mg-hub-title {
    font-size: 20px;
    line-height: 1.15;
  }
  #nto-minigame.is-mobile-ui .mg-hub-body:has([data-mg-auth-gate]) [data-mg-auth-gate],
  #nto-minigame.is-compact-mobile .mg-hub-body:has([data-mg-auth-gate]) [data-mg-auth-gate] {
    flex: 1 1 auto !important;
    width: auto !important;
    justify-content: center;
    padding: 0 0.5rem 0.5rem 0 !important;
  }
  #nto-minigame.is-mobile-ui .mg-auth-tab,
  #nto-minigame.is-compact-mobile .mg-auth-tab {
    font-size: 11px !important;
  }
}

/* ── formulários do hub (Entrar / Criar Conta / Personagem) ────────────────
   O `justify-content: center` do flex cortava o TOPO de formulário mais alto
   que a caixa (o "Criar Conta" tem 503px numa janela de 390px: aparecia
   comecando em y=-18 e terminando fora da tela, sem rolagem própria).
   Aqui a coluna do formulário rola e o conteúdo é centralizado por
   `margin: auto` — que não gera overflow negativo. */
@media (max-width: 900px), (pointer: coarse) {
  #nto-minigame.is-mobile-ui [data-mg-auth-gate],
  #nto-minigame.is-compact-mobile [data-mg-auth-gate] {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    justify-content: flex-start !important;
    padding: 0.35rem 0.25rem 1rem !important;
    overscroll-behavior: contain;
  }
  #nto-minigame.is-mobile-ui [data-mg-auth-gate] > .w-full,
  #nto-minigame.is-compact-mobile [data-mg-auth-gate] > .w-full {
    margin-top: auto;
    margin-bottom: auto;
    max-width: 34rem;
  }
  /* rótulos e campos: 44px de alvo e 16px de fonte (evita zoom automático) */
  #nto-minigame.is-mobile-ui .mg-auth-panel label,
  #nto-minigame.is-compact-mobile .mg-auth-panel label {
    font-size: 11px !important;
    margin-bottom: 0.25rem !important;
  }
  #nto-minigame.is-mobile-ui .mg-auth-panel input,
  #nto-minigame.is-mobile-ui .mg-auth-panel select,
  #nto-minigame.is-compact-mobile .mg-auth-panel input,
  #nto-minigame.is-compact-mobile .mg-auth-panel select {
    min-height: var(--mg-tap) !important;
    font-size: 16px !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  #nto-minigame.is-mobile-ui .mg-auth-panel input[type='checkbox'],
  #nto-minigame.is-compact-mobile .mg-auth-panel input[type='checkbox'] {
    width: 22px;
    height: 22px;
    min-height: 22px !important;
    flex: 0 0 22px;
  }
  /* botão principal do formulário: largura total e 48px */
  #nto-minigame.is-mobile-ui .mg-auth-panel button[type='submit'],
  #nto-minigame.is-compact-mobile .mg-auth-panel button[type='submit'] {
    min-height: var(--mg-tap-lg) !important;
    font-size: 13px !important;
  }
  /* a linha dos Termos também é alvo de toque */
  #nto-minigame.is-mobile-ui .mg-auth-panel input[type='checkbox'] + *,
  #nto-minigame.is-compact-mobile .mg-auth-panel input[type='checkbox'] + * {
    font-size: 12px !important;
    line-height: 1.45;
  }
}

/* ── criação de personagem (overlay do hub) — mesma régua dos formulários ── */
@media (max-width: 900px), (pointer: coarse) {  #nto-minigame [data-mg-createchar-overlay] > div {
    padding: 0.75rem 1rem 1.25rem !important;
  }
  #nto-minigame [data-mg-createchar-overlay] label {
    font-size: 11px !important;
  }
  #nto-minigame [data-mg-createchar-overlay] input[type='text'] {
    min-height: var(--mg-tap) !important;
    font-size: 16px !important;
  }
  /* grade de classes: alvo de toque confortável */
  #nto-minigame [data-mg-createchar-overlay] .mg-ov-char-voc-btn {
    min-height: 5rem;
  }
  #nto-minigame [data-mg-createchar-overlay] button[type='submit'] {
    width: 100%;
    min-height: var(--mg-tap-lg) !important;
    font-size: 13px !important;
  }
  #nto-minigame [data-mg-createchar-overlay] [data-mg-createchar-close] {
    min-width: var(--mg-tap);
    min-height: var(--mg-tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   8. ROLETA DO BAÚ
   Baú de boss tem tipo (comum/raro/lendário) e abre 1/2/3 giros. A fita passa
   na agulha central e para no prêmio; o resumo (toast) vem depois.
   ========================================================================== */
#nto-minigame .mg-roulette {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mg-pad);
  background: rgba(6, 6, 9, 0.9);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
#nto-minigame .mg-roulette.hidden,
#nto-minigame .mg-roulette[hidden] {
  display: none;
}
#nto-minigame .mg-roulette-sheet {
  width: min(100%, 620px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--mg-line);
  border-radius: 14px;
  background: linear-gradient(180deg, #17160f, #100f0d);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
#nto-minigame .mg-roulette[data-chest='raro'] .mg-roulette-sheet {
  border-color: rgba(148, 163, 184, 0.5);
}
#nto-minigame .mg-roulette[data-chest='lendario'] .mg-roulette-sheet {
  border-color: rgba(240, 180, 41, 0.6);
  box-shadow: 0 0 0 1px rgba(240, 180, 41, 0.22), 0 24px 60px rgba(0, 0, 0, 0.55);
}
#nto-minigame .mg-roulette-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}
#nto-minigame .mg-roulette-head-copy {
  min-width: 0;
}
#nto-minigame .mg-roulette-kicker {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mg-fg-dim);
}
#nto-minigame .mg-roulette-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--mg-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nto-minigame .mg-roulette-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mg-amber);
  white-space: nowrap;
}
#nto-minigame .mg-roulette-skip {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--mg-line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--mg-fg-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
#nto-minigame .mg-roulette-skip.hidden {
  display: none;
}

/* janela da fita */
#nto-minigame .mg-roulette-stage {
  display: flex;
  flex-direction: column;
}
#nto-minigame .mg-roulette-window {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  border: 1px solid var(--mg-line);
  border-radius: 12px;
  background: radial-gradient(120% 130% at 50% 0%, #201c12, #0d0c09 72%);
}
#nto-minigame .mg-roulette-strip {
  display: flex;
  gap: 8px;
  will-change: transform;
}
#nto-minigame .mg-roulette-cell {
  flex: 0 0 68px;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}
#nto-minigame .mg-roulette-cell img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-roulette-cell.is-raro {
  border-color: rgba(148, 163, 184, 0.45);
}
#nto-minigame .mg-roulette-cell.is-epico {
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(167, 139, 250, 0.07);
}
#nto-minigame .mg-roulette-cell.is-lendario {
  border-color: rgba(240, 180, 41, 0.65);
  background: rgba(240, 180, 41, 0.09);
}
/* célula onde a agulha parou: tira a dúvida de "qual item eu ganhei" */
#nto-minigame .mg-roulette-cell.is-hit {
  border-color: var(--mg-amber);
  background: rgba(240, 180, 41, 0.16);
  box-shadow: 0 0 0 2px rgba(240, 180, 41, 0.45), 0 0 18px rgba(240, 180, 41, 0.35);
  animation: mg-roulette-hit 0.5s ease-out;
}
@keyframes mg-roulette-hit {
  0% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
#nto-minigame .mg-roulette-needle {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--mg-amber), transparent);
  box-shadow: 0 0 12px rgba(240, 180, 41, 0.7);
  pointer-events: none;
}
/* resultado do giro que acabou de parar */
#nto-minigame .mg-roulette-result {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin: 10px auto 0;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  border: 1px solid var(--mg-line);
  background: #17160f;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}
#nto-minigame .mg-roulette-result.hidden {
  display: none;
}
#nto-minigame .mg-roulette-result-icon img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-roulette-result-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#nto-minigame .mg-roulette-result-copy strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--mg-fg);
  overflow: hidden;
  text-overflow: ellipsis;
}
#nto-minigame .mg-roulette-result-copy span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mg-fg-dim);
}
#nto-minigame .mg-roulette-result.is-raro {
  border-color: rgba(148, 163, 184, 0.45);
}
#nto-minigame .mg-roulette-result.is-epico {
  border-color: rgba(167, 139, 250, 0.5);
}
#nto-minigame .mg-roulette-result.is-lendario {
  border-color: rgba(240, 180, 41, 0.6);
}
#nto-minigame .mg-roulette-result.is-ouro {
  border-color: rgba(240, 180, 41, 0.45);
}
/* prêmios já coletados */
#nto-minigame .mg-roulette-prizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
}
#nto-minigame .mg-roulette-prize {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  border: 1px solid var(--mg-line);
  background: rgba(255, 255, 255, 0.04);
  font-size: 11px;
  color: var(--mg-fg);
  max-width: 100%;
}
#nto-minigame .mg-roulette-prize img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
}
#nto-minigame .mg-roulette-prize b {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#nto-minigame .mg-roulette-prize.is-raro {
  border-color: rgba(148, 163, 184, 0.45);
}
#nto-minigame .mg-roulette-prize.is-epico {
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(167, 139, 250, 0.08);
}
#nto-minigame .mg-roulette-prize.is-lendario {
  border-color: rgba(240, 180, 41, 0.55);
  background: rgba(240, 180, 41, 0.1);
}
#nto-minigame .mg-roulette-foot {
  flex: 0 0 auto;
}
#nto-minigame .mg-roulette-collect {
  width: 100%;
  min-height: var(--mg-tap-lg);
  border-radius: 10px;
  border: 1px solid rgba(240, 180, 41, 0.5);
  background: linear-gradient(180deg, #f0b429, #c88a12);
  color: #1b1405;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
#nto-minigame .mg-roulette-collect:disabled {
  border-color: var(--mg-line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--mg-fg-dim);
  opacity: 0.6;
  cursor: default;
}

/* ---- caixa de erro na tela (no celular não existe console) ---- */
#nto-minigame .mg-errbox {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: 90;
  max-width: min(92%, 560px);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(248, 113, 113, 0.5);
  background: rgba(32, 10, 10, 0.96);
  color: #fecaca;
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#nto-minigame .mg-errbox.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* telefone deitado: fita e células mais compactas para caber em 390px */
@media (max-height: 520px) {
  #nto-minigame .mg-roulette-sheet {
    gap: 8px;
    padding: 10px;
  }
  #nto-minigame .mg-roulette-window {
    padding: 8px 0;
  }
  #nto-minigame .mg-roulette-cell {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
  }
  #nto-minigame .mg-roulette-cell img {
    width: 38px;
    height: 38px;
  }
  #nto-minigame .mg-roulette-result {
    margin-top: 8px;
  }
}

/* ==========================================================================
   9. HUB — "Escolha seu ninja" no celular
   O cartão do ninja tem colunas estreitas (o copy + os 6 stats dividiam 143px
   com conteúdo de 165px) e os painéis SKILLS/EQUIPADO forçavam 4 colunas:
   rótulo e número se sobrepunham e o EQUIPADO criava barra horizontal.
   Aqui cada bloco passa a quebrar linha por conta própria.
   ========================================================================== */
@media (max-width: 900px), (pointer: coarse) {
  /* nada pode ser mais largo que o cartão */
  #nto-minigame.is-mobile-ui .mg-hub-hero,
  #nto-minigame.is-mobile-ui .mg-hub-hero-art,
  #nto-minigame.is-mobile-ui .mg-hub-hero-copy,
  #nto-minigame.is-compact-mobile .mg-hub-hero,
  #nto-minigame.is-compact-mobile .mg-hub-hero-art,
  #nto-minigame.is-compact-mobile .mg-hub-hero-copy {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  #nto-minigame.is-mobile-ui .mg-hub-hero-copy > *,
  #nto-minigame.is-compact-mobile .mg-hub-hero-copy > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* o cartão dava 105px para o avatar e 143px para o copy: os nomes em
     "trocar ninja" saíam cortados dos dois lados ("houjiro") e os chips de
     skill não cabiam. Coluna do avatar mais larga, copy com o resto. */
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-hero,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-hero {
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) !important;
    gap: 0.5rem !important;
  }
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-hero-art,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-hero-art {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-outfit-hero,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-outfit-hero {
    width: 4.2rem !important;
    height: 5rem !important;
    flex: 0 0 auto;
  }
  /* stats: 3 colunas x 2 linhas, rótulo em cima do valor */
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-combat,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-combat {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px 6px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-combat > *,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-combat > * {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
  }
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-combat > * > *,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-combat > * > * {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* skills: a regra herdada `is-mobile-landscape … .mg-hub-skills` força
     4 colunas de 44px (o rótulo "Taijutsu" precisa de 39px) — precisa da
     mesma especificidade e vir depois. */
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-skills,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-skills {
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)) !important;
    gap: 4px !important;
  }
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-skills > *,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-skills > * {
    min-width: 0 !important;
    overflow: hidden;
  }
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-skill-top,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-skill-top {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
    min-width: 0 !important;
  }
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-skill-top > *,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-skill-top > * {
    min-width: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* o valor da skill não encolhe (ficava em 8px) */
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-skill-top > b,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-skill-top > b {
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
  /* nome no seletor de ninja: trunca em vez de estourar a caixa */
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-char-name,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-char-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  /* equipado: ícones quebram linha (era grid que estourava e criava scroll) */
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-eq,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-eq {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }
  /* "trocar ninja": chips com altura de dedo e nome legível */
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-switcher,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-switcher {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  /* `.mg-hub-mini` é usado nos chips de "trocar ninja" E nos stats — o
     layout de linha vale só para os do seletor (os stats ficam em coluna) */
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-switcher-label,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-switcher-label {
    font-size: 10px !important;
    letter-spacing: 0.08em !important;
    white-space: nowrap;
  }
  /* container dos chips (era scroll horizontal com nowrap: o 2º ninja
     ficava cortado na borda do cartão) */
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-chars,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-chars {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  /* chips do seletor de ninja (classe real: .mg-hub-char) */
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-char,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-char {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: var(--mg-tap);
    padding: 3px 8px 3px 4px !important;
    gap: 6px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
  }
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-char .mg-outfit-rail,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-char .mg-outfit-rail {
    flex: 0 0 2rem !important;
    width: 2rem !important;
    height: 2rem !important;
  }
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-char-meta,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-char-meta {
    display: none !important;
  }
  /* painéis do dossier: 1 linha de cabeçalho enxuta */
  #nto-minigame.is-mobile-ui [data-mg-hub] .mg-hub-panel-head,
  #nto-minigame.is-compact-mobile [data-mg-hub] .mg-hub-panel-head {
    gap: 4px !important;
    min-width: 0 !important;
  }
}

/* Deitado (pouca altura): o "Criar Conta" tem 5 campos + captcha + botão.
   Em duas colunas o formulário inteiro cabe na tela, sem rolar.
   Filho 1 = nome, 2 = email, 3 = senha/confirmar, 4 = termos, 5 = verificação,
   6 = botão — do 3º em diante ocupa a linha toda. */
@media (min-width: 640px) and (max-height: 560px) {
  #nto-minigame.is-mobile-ui [data-mg-auth-panel='register'] form,
  #nto-minigame.is-compact-mobile [data-mg-auth-panel='register'] form {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 0.8rem;
    align-items: start;
  }
  #nto-minigame.is-mobile-ui [data-mg-auth-panel='register'] form > *,
  #nto-minigame.is-compact-mobile [data-mg-auth-panel='register'] form > * {
    margin-top: 0 !important;
  }
  #nto-minigame [data-mg-auth-panel='register'] form > *:nth-child(n + 3) {
    grid-column: 1 / -1;
  }
  /* captcha (5º) e botão (6º) lado a lado: economiza a última linha inteira */
  #nto-minigame [data-mg-auth-panel='register'] form > *:nth-child(5) {
    grid-column: 1 / 2;
  }
  #nto-minigame [data-mg-auth-panel='register'] form > *:nth-child(6) {
    grid-column: 2 / 3;
    align-self: end;
  }
  #nto-minigame [data-mg-auth-panel='register'] form > *:nth-child(5) p {
    display: none; /* "Resolva a conta…" — o rótulo Verificação já explica */
  }
}

/* ---- ganho de altura em tela baixa (celular deitado, 390px) ----
   a barra de abas tem padding !important no CSS herdado; sem prioridade aqui
   sobram 14px de sobra e uma linha a menos na lista. */
#nto-minigame.is-mobile-ui .mg-panel .mg-store-tabs,
#nto-minigame.is-mobile-landscape .mg-panel .mg-store-tabs {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#nto-minigame.is-mobile-ui .mg-panel [data-mg-store-catwrap],
#nto-minigame.is-mobile-landscape .mg-panel [data-mg-store-catwrap] {
  padding: 0 !important;
}

/* desktop: rodapé alinhado à direita, ação primária com largura de botão
   (não estica 1 metro de tela) */
@media (min-width: 900px) {
  #nto-minigame [data-mg-store-actionbar] {
    justify-content: flex-end;
  }
  #nto-minigame [data-mg-store-actionbar] .mg-store-btn.is-buy {
    flex: 0 1 340px !important;
  }
}

/* ---- 5. tela estreita (retrato): detalhe substitui a lista ---- */
@media (max-width: 699px) {
  #nto-minigame [data-mg-store-catwrap] .mg-store-cols {
    display: block;
    height: 100%;
    overflow: hidden;
  }
  #nto-minigame .mg-store-col-list {
    flex: 1 1 auto !important;
    width: auto !important;
    height: 100%;
    max-width: none;
    border-right: 0;
    padding: 6px;
  }
  #nto-minigame .mg-store-col-detail {
    display: none;
    height: 100%;
  }
  #nto-minigame [data-mg-store-catwrap].is-detail .mg-store-col-list {
    display: none;
  }
  #nto-minigame [data-mg-store-catwrap].is-detail .mg-store-col-detail {
    display: flex;
  }
  #nto-minigame .mg-cat-back {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--mg-line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--mg-fg);
    font-size: 12px;
    font-weight: 700;
  }
  #nto-minigame .mg-store-actionbar .mg-store-btn {
    flex: 1 1 0;
  }
}

/* ============================================================================
   10. CASSINO — roletas por moeda (Cassino Coin / Arts Coin)
   Roda no HUB/LOBBY (nunca durante a corrida). A roleta em si reaproveita
   `.mg-roulette-*` (seção 8) — aqui só as máquinas e os saldos.
   ========================================================================== */

/* Moeda do cassino: círculo verde com "C" (mesmo tamanho do `mg-arts-gem`) */
#nto-minigame .mg-casino-coin {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.05em;
  height: 1.05em;
  border-radius: 50%;
  vertical-align: -0.14em;
  background: radial-gradient(circle at 34% 28%, #bbf7d0, #22c55e 58%, #14532d);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32), 0 1px 2px rgba(0, 0, 0, 0.5);
}
#nto-minigame .mg-casino-coin::after {
  content: 'C';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.62em;
  font-weight: 900;
  line-height: 1;
  color: #052e16;
}

#nto-minigame .mg-casino-body {
  /* NUNCA usar justify-content: center aqui: com overflow, o topo do grid fica
     inalcançável e some atrás do cabeçalho (era o que quebrava no celular). */
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.6rem;
  overflow-y: auto;
}
#nto-minigame .mg-casino-grid {
  display: grid;
  align-content: start;
  /* `safe center`: centraliza quando as caixas cabem na tela, mas nunca deixa
     o topo inalcançável quando não cabem (o bug do justify-content: center). */
  align-content: safe center;
  gap: 0.5rem;
  /* 6 caixas: 2 col (celular em pé) → 3 col (deitado/tablet) → auto no desktop */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 480px) {
  #nto-minigame .mg-casino-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  #nto-minigame .mg-casino-grid {
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  }
}

/* ---- Cases: 1 abertura = 1 item (estilo case de CS) ---- */
#nto-minigame .mg-case {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding: 0.5rem 0.55rem 0.55rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.85rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.34));
}
/* Fio da cor do tier no topo: identidade da caixa */
#nto-minigame .mg-case::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tier-color, #38bdf8), transparent);
}
#nto-minigame .mg-case.is-ready {
  border-color: color-mix(in srgb, var(--tier-color, #38bdf8) 40%, transparent);
  box-shadow: 0 8px 20px -16px var(--tier-color, #38bdf8);
}
#nto-minigame .mg-case.is-locked {
  opacity: 0.6;
}
#nto-minigame .mg-case.is-locked .mg-case-badge {
  filter: grayscale(1);
}
#nto-minigame .mg-case.is-premium {
  border-color: rgba(168, 85, 247, 0.5);
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.16), rgba(0, 0, 0, 0.34));
}
#nto-minigame .mg-case-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
#nto-minigame .mg-case-badge {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 0.42rem;
  font-size: 0.62rem;
  font-weight: 900;
  color: #0b1620;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
    var(--tier-color, #38bdf8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
#nto-minigame .mg-case-badge.is-star {
  color: #2e1065;
}
#nto-minigame .mg-case-name {
  min-width: 0;
  overflow: hidden;
  font-size: 0.68rem;
  font-weight: 800;
  color: #f5f5f5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nto-minigame .mg-case-range {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.04rem 0.26rem;
  border-radius: 0.25rem;
  font-size: 0.5rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--tier-color, #94a3b8);
  background: rgba(255, 255, 255, 0.06);
}
#nto-minigame .mg-case-pity {
  height: 0.2rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}
#nto-minigame .mg-case-pity span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tier-color, #fbbf24);
}
#nto-minigame .mg-case-pity.is-flat {
  background: rgba(255, 255, 255, 0.05);
}
#nto-minigame .mg-case-pity-txt {
  margin: 0;
  min-height: 0.72rem;
  font-size: 0.5rem;
  line-height: 0.72rem;
  color: var(--mg-fg-dim);
}
#nto-minigame .mg-case-foot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
#nto-minigame .mg-case-price {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fde68a;
}
#nto-minigame .mg-case-wallet {
  margin-left: auto;
  overflow: hidden;
  font-size: 0.52rem;
  color: var(--mg-fg-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#nto-minigame .mg-case-wallet b {
  color: #fff;
}
/* O piso de toque global é 44px (--mg-tap); a caixa é compacta de propósito,
   então o piso é redefinido AQUI no próprio elemento (var resolve por elemento).
   Em px, não em rem: no celular a raiz encolhe e o rem encolhia o botão junto. */
#nto-minigame .mg-case-open {
  --mg-tap: 36px;
  min-height: 36px;
  height: 36px;
  border: 0;
  border-radius: 0.5rem;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #0b1620;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0)),
    var(--tier-color, #fbbf24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-case-open.is-premium {
  color: #f8fafc;
  background: linear-gradient(180deg, #c084fc, #7c3aed);
}
#nto-minigame .mg-case-open:disabled {
  color: var(--mg-fg-dim);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
  cursor: default;
}
#nto-minigame .mg-casino-foot {
  padding: 0.5rem 0.8rem calc(0.5rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mg-line);
  font-size: 0.62rem;
  color: var(--mg-fg-dim);
}
#nto-minigame .mg-casino-foot b {
  color: #bbf7d0;
}
#nto-minigame .mg-sheet-coin-bal.is-casino {
  color: #bbf7d0;
}
#nto-minigame .mg-hub-chip.is-casino {
  color: #bbf7d0;
}

/* Celular deitado (o alvo do jogo): 3 caixas por linha, tudo na altura */
@media (orientation: landscape) and (max-height: 520px) {
  #nto-minigame .mg-casino-body {
    padding: 0.45rem;
  }
  #nto-minigame .mg-casino-grid {
    gap: 0.42rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #nto-minigame .mg-case {
    padding: 0.4rem 0.45rem 0.45rem;
    gap: 0.24rem;
  }
  #nto-minigame .mg-case-name {
    font-size: 0.62rem;
  }
  #nto-minigame .mg-case-open {
    --mg-tap: 34px;
    height: 34px;
    min-height: 34px;
    font-size: 0.58rem;
  }
  #nto-minigame .mg-casino-foot {
    font-size: 0.55rem;
  }
}

/* ============================================================================
   11. PASSE DE BATALHA — trilha de 30 níveis × 2 faixas (Livre / Premium)
   Roda no HUB/LOBBY. Prêmios e nível são do servidor; aqui só a apresentação.
   ========================================================================== */

/* Selo do passe (ícone do menu + chip do hub): quadrado arredondado com "»" */
#nto-minigame .mg-pass-badge {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.05em;
  height: 1.05em;
  border-radius: 0.28em;
  vertical-align: -0.14em;
  background: linear-gradient(150deg, #fde68a, #f59e0b 45%, #b45309);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.5);
}
#nto-minigame .mg-pass-badge::after {
  content: '»';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.72em;
  font-weight: 900;
  line-height: 1;
  color: #451a03;
}

/* Identidade da tela: brilho dourado no topo, violeta no canto da faixa premium */
#nto-minigame .mg-pass-panel {
  background:
    radial-gradient(ellipse at 50% -12%, rgba(251, 191, 36, 0.16), transparent 55%),
    radial-gradient(ellipse at 92% 112%, rgba(124, 58, 237, 0.2), transparent 58%),
    #0b0b0e;
}
#nto-minigame .mg-pass-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.55rem;
  overflow: hidden;
}
#nto-minigame .mg-pass-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
#nto-minigame .mg-pass-bar-wrap {
  position: relative;
  flex: 1 1 auto;
  height: 0.62rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.65);
}
#nto-minigame .mg-pass-bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24 55%, #fde68a);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.5);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#nto-minigame .mg-pass-pp {
  flex: 0 0 auto;
  font-size: 0.6rem;
  font-weight: 800;
  white-space: nowrap;
  color: #fde68a;
}
#nto-minigame .mg-pass-pending {
  display: none;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.56rem;
  font-weight: 900;
  color: #052e16;
  background: linear-gradient(180deg, #86efac, #22c55e);
}
#nto-minigame .mg-pass-pending.is-on {
  display: inline-block;
}
#nto-minigame .mg-pass-premium-pill {
  display: none;
}
#nto-minigame .mg-pass-premium-pill.is-on {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2e1065;
  background: linear-gradient(180deg, #fde68a, #c084fc);
}
#nto-minigame .mg-pass-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
#nto-minigame .mg-pass-subbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.1rem;
}
#nto-minigame .mg-pass-buy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 0 !important;
  height: 1.9rem !important;
  margin-left: auto;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 0.6rem;
  color: #faf5ff;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(180deg, #a855f7, #6d28d9);
  box-shadow: 0 3px 10px rgba(109, 40, 217, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
#nto-minigame .mg-pass-btn-ico {
  font-size: 0.8rem;
  line-height: 1;
}
#nto-minigame .mg-pass-buy em {
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-style: normal;
  color: #2e1065;
  background: #fde68a;
}
#nto-minigame .mg-pass-buy:disabled {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: none;
  cursor: default;
}
#nto-minigame .mg-pass-buy:disabled em {
  display: none;
}
#nto-minigame .mg-pass-claimall {
  flex: 0 0 auto;
  min-height: 0 !important;
  height: 1.95rem !important;
  padding: 0 0.7rem;
  border: 0;
  border-radius: 0.6rem;
  color: #1a1207;
  font-size: 0.58rem;
  font-weight: 900;
  white-space: nowrap;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(180deg, #fbbf24, #d97706);
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
#nto-minigame .mg-pass-claimall:disabled {
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  cursor: default;
}
#nto-minigame .mg-pass-legend {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mg-fg-dim);
}
#nto-minigame .mg-pass-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
#nto-minigame .mg-pass-legend-item::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.2rem;
}
/* Controles compactos do passe. O piso de toque global é
   `min-height: var(--mg-tap) !important` — em vez de brigar por especificidade
   (o `:is(button)` daquela regra soma um type e vence), estes controles LARGOS e
   em linha reduzem a PRÓPRIA variável. Alvo de 30x250px continua fácil de tocar. */
#nto-minigame .mg-pass-tab,
#nto-minigame .mg-pass-claimall,
#nto-minigame .mg-pass-buy,
#nto-minigame .mg-pass-mission-claim {
  --mg-tap: 1.9rem;
}
#nto-minigame .mg-pass-claim {
  --mg-tap: 2rem;
}
#nto-minigame .mg-pass-arrow {
  --mg-tap: 0;
}
#nto-minigame .mg-pass-legend-item.is-free::before {
  background: #38bdf8;
}
#nto-minigame .mg-pass-legend-item.is-premium::before {
  background: #c084fc;
}
#nto-minigame .mg-pass-legend-hint {
  margin-left: auto;
  letter-spacing: 0;
  text-transform: none;
}
#nto-minigame .mg-pass-legend-hint b {
  color: #fbbf24;
}
#nto-minigame .mg-pass-track-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
#nto-minigame .mg-pass-track {
  display: flex;
  gap: 0.5rem;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.3rem 0.2rem 0.5rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  /* Sem isto o dedo pode “pegar” o canvas e a trilha não rola no iOS */
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
#nto-minigame .mg-pass-track::-webkit-scrollbar {
  height: 6px;
}
#nto-minigame .mg-pass-track::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}
#nto-minigame .mg-pass-lvl {
  position: relative;
  flex: 0 0 auto;
  width: 9.8rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0.3rem;
  padding: 0.45rem 0.4rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.9rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.25));
  scroll-snap-align: center;
}
#nto-minigame .mg-pass-lvl::before {
  content: '';
  position: absolute;
  left: 50%;
  right: -0.75rem;
  top: 1.32rem;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
}
#nto-minigame .mg-pass-lvl.is-last::before {
  display: none;
}
#nto-minigame .mg-pass-lvl.is-reached::before {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.55), rgba(245, 158, 11, 0.2));
}
#nto-minigame .mg-pass-lvl.is-current {
  border-color: #fbbf24;
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.14), rgba(0, 0, 0, 0.3));
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.35), 0 6px 18px rgba(0, 0, 0, 0.45);
}
#nto-minigame .mg-pass-node {
  position: relative;
  z-index: 1;
  align-self: center;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.55);
  background: radial-gradient(circle at 35% 30%, #2b2b33, #131317);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
#nto-minigame .mg-pass-lvl.is-reached .mg-pass-node {
  color: #1a1207;
  background: radial-gradient(circle at 35% 30%, #fde68a, #f59e0b);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}
#nto-minigame .mg-pass-lvl.is-current .mg-pass-node {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.22), 0 0 14px rgba(251, 191, 36, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
#nto-minigame .mg-pass-slot {
  position: relative;
  z-index: 1;
  /* Altura FIXA (44px): padroniza a trilha e cabe a lista em 2 linhas, sem
     cortar o sprite do item (antes 94px de conteúdo em 77px = item "comido"). */
  --mg-tap: 3.1rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
  height: 3.1rem;
  padding: 0 0.4rem;
  border-left: 2px solid #38bdf8;
  border-radius: 0.6rem;
  background: rgba(56, 189, 248, 0.09);
}
#nto-minigame .mg-pass-slot[role='button'] {
  cursor: pointer;
}
#nto-minigame .mg-pass-slot[role='button']:active {
  transform: translateY(1px);
}
#nto-minigame .mg-pass-slot.is-premium {
  border-left-color: #a855f7;
  background: rgba(168, 85, 247, 0.13);
}
#nto-minigame .mg-pass-slot.is-ready {
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.24), rgba(251, 191, 36, 0.08));
  box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.4);
  animation: mg-pass-pulse 1.8s ease-in-out infinite;
}
#nto-minigame .mg-pass-slot.is-claimed {
  opacity: 0.45;
  animation: none;
}
#nto-minigame .mg-pass-slot.is-locked {
  filter: grayscale(0.55);
}
@keyframes mg-pass-pulse {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.2);
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.65);
  }
}
#nto-minigame .mg-pass-chips {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 0.1rem 0.35rem;
  max-height: 2.5rem;
  min-width: 0;
  overflow: hidden;
}
/* Item com sprite: linha própria e sprite grande o bastante para reconhecer */
#nto-minigame .mg-pass-chip.is-item {
  flex: 0 0 100%;
}
#nto-minigame .mg-pass-chip.is-item .mg-pass-chip-img {
  width: 1.45rem;
  height: 1.45rem;
}
#nto-minigame .mg-pass-chip {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  font-size: 0.58rem;
}
#nto-minigame .mg-pass-chip b {
  overflow: hidden;
  font-weight: 800;
  color: #f5f5f5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Nome de item/skin pode ocupar 2 linhas (o ícone já identifica) */
#nto-minigame .mg-pass-chip.is-wide {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
}
#nto-minigame .mg-pass-chip.is-wide b {
  display: -webkit-box;
  width: 100%;
  font-size: 0.56rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  line-height: 1.1;
}
#nto-minigame .mg-pass-chip em {
  font-style: normal;
  font-weight: 900;
  color: #fde68a;
}
#nto-minigame .mg-pass-chip[data-r='ouro'] b {
  color: #fde68a;
}
#nto-minigame .mg-pass-chip[data-r='epico'] b {
  color: #d8b4fe;
}
#nto-minigame .mg-pass-chip[data-r='lendario'] b {
  color: #fca5a5;
}
#nto-minigame .mg-pass-chip.is-empty {
  opacity: 0.4;
}
#nto-minigame .mg-pass-chip-img {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  object-fit: contain;
  /* Sprite 32px exibido em ~19px: escala NÃO inteira. `pixelated` aí gera pixel
     de tamanho irregular (parece artefato/quebrado); suave é mais limpo. */
  image-rendering: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.65));
}
#nto-minigame .mg-pass-chip-ico {
  position: relative;
  flex: none;
  width: 0.86rem;
  height: 0.86rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fde68a, #d97706);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
#nto-minigame .mg-pass-chip-ico.is-casino {
  background: radial-gradient(circle at 35% 30%, #bbf7d0, #22c55e);
}
#nto-minigame .mg-pass-chip-ico.is-casino::after {
  content: 'C';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.5rem;
  font-weight: 900;
  color: #052e16;
}
#nto-minigame .mg-pass-chip-ico.is-arts {
  border-radius: 0.15rem;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #e0f2fe, #38bdf8 45%, #0e7490);
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-pass-chip-ico.is-vip {
  background: linear-gradient(180deg, #fde68a, #c084fc);
}
#nto-minigame .mg-pass-chip-ico.is-vip::after {
  content: '★';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.48rem;
  color: #2e1065;
}
#nto-minigame .mg-pass-chip-ico.is-skin {
  border-radius: 0.2rem;
  background: linear-gradient(135deg, #fca5a5, #a855f7);
}
#nto-minigame .mg-pass-chip-ico.is-skin::after {
  content: '★';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.48rem;
  color: #2e1065;
}
#nto-minigame .mg-pass-slot-act {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
}
#nto-minigame .mg-pass-go {
  color: #fbbf24;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
}
#nto-minigame .mg-pass-dim {
  color: rgba(255, 255, 255, 0.25);
  font-weight: 900;
}
#nto-minigame .mg-pass-claim {
  min-width: 3rem;
  min-height: 2.5rem;
  padding: 0 0.5rem;
  border: 0;
  border-radius: 0.55rem;
  color: #1a1207;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  background: linear-gradient(180deg, #fde68a, #f59e0b);
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
#nto-minigame .mg-pass-claim:active {
  transform: translateY(1px);
}
#nto-minigame .mg-pass-check {
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  font-size: 0.66rem;
  font-weight: 900;
  color: #052e16;
  background: linear-gradient(180deg, #86efac, #22c55e);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}
#nto-minigame .mg-pass-lock {
  color: rgba(255, 255, 255, 0.45);
}
#nto-minigame .mg-pass-lock svg {
  display: block;
  width: 1rem;
  height: 1rem;
}
#nto-minigame .mg-pass-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  padding: 0.45rem 0.7rem calc(0.45rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--mg-line);
  font-size: 0.56rem;
  color: var(--mg-fg-dim);
}
#nto-minigame .mg-pass-src {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
#nto-minigame .mg-pass-src b {
  color: #bbf7d0;
}
#nto-minigame .mg-pass-src-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: #64748b;
}
#nto-minigame .mg-pass-src-dot.is-boss {
  background: #f87171;
}
#nto-minigame .mg-pass-src-dot.is-inv {
  background: #fb923c;
}
#nto-minigame .mg-pass-src-dot.is-duel {
  background: #60a5fa;
}
#nto-minigame .mg-pass-src-dot.is-wave {
  background: #34d399;
}
#nto-minigame .mg-pass-src-dot.is-casino {
  background: #22c55e;
}
#nto-minigame .mg-pass-src-dot.is-quest {
  background: #c084fc;
}
#nto-minigame .mg-sheet-coin-bal.is-pass,
#nto-minigame .mg-hub-chip.is-pass {
  color: #fde68a;
}

/* Celular deitado: trilha ocupa a altura toda e os cartões ficam mais justos */
@media (orientation: landscape) and (max-height: 520px) {
  #nto-minigame .mg-pass-body {
    gap: 0.4rem;
    padding: 0.5rem;
  }
  #nto-minigame .mg-pass-lvl {
    width: 8.6rem;
    padding: 0.35rem;
  }
  #nto-minigame .mg-pass-slot {
    --mg-tap: 3.1rem;
    height: 3.1rem;
    padding: 0 0.35rem;
  }
  #nto-minigame .mg-pass-chip {
    font-size: 0.56rem;
  }
  #nto-minigame .mg-pass-chip.is-item .mg-pass-chip-img {
    width: 1.35rem;
    height: 1.35rem;
  }
  #nto-minigame .mg-pass-claim {
    min-height: 2.3rem;
  }
  #nto-minigame .mg-pass-foot {
    padding-top: 0.35rem;
    padding-bottom: calc(0.35rem + env(safe-area-inset-bottom));
  }
}

/* ---- Abas do passe (Trilha / Missões) ---- */
#nto-minigame .mg-pass-tabs {
  display: flex;
  flex: 1 1 auto;
  gap: 0.25rem;
  padding: 0.15rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.05);
}
#nto-minigame .mg-pass-tab {
  flex: 1 1 0;
  min-height: 0;
  height: 1.9rem;
  border: 0;
  border-radius: 0.5rem;
  color: var(--mg-fg-dim);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
}
#nto-minigame .mg-pass-tab.is-active {
  color: #1a1207;
  background: linear-gradient(180deg, #fde68a, #f59e0b);
}
#nto-minigame .mg-pass-pane {
  flex: 1 1 auto;
  min-height: 0;
}
/* `display` só quando NÃO está hidden: senão a regra vence a classe e os dois
   painéis aparecem juntos (bug clássico de especificidade com o Tailwind). */
#nto-minigame .mg-pass-pane:not(.hidden) {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* ---- Setas da trilha (descobrir os outros níveis) ---- */
#nto-minigame .mg-pass-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2.6rem;
  border: 0;
  border-radius: 0.6rem;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}
#nto-minigame .mg-pass-arrow.is-prev {
  left: 0.1rem;
  background: linear-gradient(90deg, rgba(8, 8, 10, 0.94), rgba(8, 8, 10, 0.45));
}
#nto-minigame .mg-pass-arrow.is-next {
  right: 0.1rem;
  background: linear-gradient(270deg, rgba(8, 8, 10, 0.94), rgba(8, 8, 10, 0.45));
}
#nto-minigame .mg-pass-arrow:active {
  transform: translateY(-50%) scale(0.94);
}

/* Ícones oficiais (moeda/gema) dentro dos chips do passe */
#nto-minigame .mg-pass-chip .mg-gold-coin {
  width: 0.72rem;
  height: 0.72rem;
}
#nto-minigame .mg-pass-chip .mg-arts-gem {
  width: 0.66rem;
  height: 0.66rem;
}

/* ---- Missões (diárias/semanais) ---- */
#nto-minigame .mg-pass-missions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  padding-right: 0.2rem;
}
#nto-minigame .mg-pass-mblock-title {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.3rem;
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fbbf24;
}
#nto-minigame .mg-pass-mblock-title em {
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mg-fg-dim);
}
#nto-minigame .mg-pass-mission {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.3rem;
  padding: 0.45rem 0.55rem;
  border-left: 3px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.04);
}
#nto-minigame .mg-pass-mission.is-ready {
  border-left-color: #fbbf24;
  background: linear-gradient(90deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.06));
}
#nto-minigame .mg-pass-mission.is-claimed {
  opacity: 0.5;
}
#nto-minigame .mg-pass-mission-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
#nto-minigame .mg-pass-mission-txt {
  flex: 1 1 auto;
  font-size: 0.62rem;
  font-weight: 700;
  color: #f5f5f5;
}
#nto-minigame .mg-pass-mission-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.58rem;
  font-weight: 800;
  color: #fde68a;
}
#nto-minigame .mg-pass-mission-pp {
  font-size: 0.56rem;
  font-weight: 800;
  color: var(--mg-fg-dim);
}
#nto-minigame .mg-pass-mission-claim {
  min-height: 32px;
  padding: 0 0.55rem;
  border: 0;
  border-radius: 0.5rem;
  color: #1a1207;
  font-size: 0.58rem;
  font-weight: 900;
  cursor: pointer;
  background: linear-gradient(180deg, #fde68a, #f59e0b);
}
#nto-minigame .mg-pass-mission-done {
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 900;
  color: #052e16;
  background: linear-gradient(180deg, #86efac, #22c55e);
}
#nto-minigame .mg-pass-mission-bar {
  height: 0.28rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}
#nto-minigame .mg-pass-mission-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}
#nto-minigame .mg-pass-mission-prog {
  font-size: 0.55rem;
  font-weight: 800;
  text-align: right;
  color: var(--mg-fg-dim);
}
#nto-minigame .mg-pass-empty {
  font-size: 0.6rem;
  color: var(--mg-fg-dim);
}
#nto-minigame .mg-pass-srcgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  font-size: 0.58rem;
  color: var(--mg-fg-dim);
}

/* ══════════════════════════════════════════════════════════════════════
   12. RARIDADE DOS EQUIPAMENTOS
   Borda na cor da raridade + ficha (raridade · nível · bônus) no tooltip.
   Os bônus são fixos por item (gearAffixes) — ver progression.js.
   A cor sempre vem de --mg-rar-color (balance.json → rarity.tiers[].color).
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Borda da cor da raridade (slot da bag, paperdoll, loja e detalhe) ─── */

#nto-minigame .mg-bag-slot.is-rar,
#nto-minigame .mg-eq-slot.is-rar,
#nto-minigame .mg-store-icon.is-rar,
#nto-minigame .mg-bag-detail-icon.is-rar {
  border-color: var(--mg-rar-color, rgba(255, 255, 255, 0.14)) !important;
  box-shadow:
    inset 0 0 0 1px var(--mg-rar-color, rgba(255, 255, 255, 0.14)),
    0 2px 10px -4px rgba(0, 0, 0, 0.6) !important;
}
#nto-minigame .mg-eq-slot.is-rar,
#nto-minigame .mg-store-icon.is-rar,
#nto-minigame .mg-bag-detail-icon.is-rar {
  box-shadow:
    inset 0 0 0 1px var(--mg-rar-color, rgba(255, 255, 255, 0.14)),
    0 0 12px -2px var(--mg-rar-color, rgba(255, 255, 255, 0.2)) !important;
}
/* Selecionado/equipado continuam mandando na borda — o anel da raridade fica
   por dentro. Sem isso o destaque de seleção (verde) sumiria. */
#nto-minigame .mg-bag-slot.is-rar.is-on {
  border-color: rgba(52, 211, 153, 0.75) !important;
  box-shadow:
    0 0 0 1px rgba(52, 211, 153, 0.35),
    inset 0 0 0 1px var(--mg-rar-color, rgba(255, 255, 255, 0.14)),
    inset 0 0 12px rgba(16, 185, 129, 0.12) !important;
}
#nto-minigame .mg-bag-slot.is-rar.is-eq {
  border-color: rgba(251, 191, 36, 0.6) !important;
}

/* ─── Ficha do item (tooltip da mochila / paperdoll / mercado) ─── */

#nto-minigame .mg-spec {
  display: flex !important;
  flex: 1 0 100% !important;
  flex-direction: column !important;
  gap: 0.34rem !important;
  width: 100% !important;
  margin-top: 0.4rem !important;
  padding-top: 0.45rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
#nto-minigame .mg-spec-head {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  min-width: 0 !important;
}
#nto-minigame .mg-spec-rar {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  padding: 0.09rem 0.36rem !important;
  border-radius: 0.26rem !important;
  font-size: 0.54rem !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--mg-rar-color, #94a3b8) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  background: color-mix(in srgb, var(--mg-rar-color, #94a3b8) 14%, transparent) !important;
  box-shadow:
    inset 0 0 0 1px var(--mg-rar-color, #94a3b8),
    0 0 10px -4px var(--mg-rar-color, #94a3b8) !important;
}
#nto-minigame .mg-spec-meta {
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 0.54rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-overflow: ellipsis !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  color: rgba(255, 255, 255, 0.4) !important;
}
#nto-minigame .mg-spec-req {
  margin: 0 !important;
  font-size: 0.56rem !important;
  font-weight: 800 !important;
  color: #a7f3d0 !important;
}
#nto-minigame .mg-spec-req.is-locked {
  color: #fda4af !important;
}
/* Duas colunas alinhadas: rótulo à esquerda, valor à direita */
#nto-minigame .mg-spec-list {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 0.18rem 0.6rem !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#nto-minigame .mg-spec-list li {
  display: contents !important;
}
#nto-minigame .mg-spec-list li > span {
  font-size: 0.58rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.5) !important;
}
#nto-minigame .mg-spec-list li > b {
  font-size: 0.6rem !important;
  font-weight: 800 !important;
  text-align: right !important;
  color: #e2e8f0 !important;
  font-variant-numeric: tabular-nums !important;
}
#nto-minigame .mg-spec-list.is-aff li > b {
  color: #7dd3fc !important;
}
#nto-minigame .mg-spec-list.is-base {
  padding-top: 0.32rem !important;
  border-top: 1px dashed rgba(255, 255, 255, 0.08) !important;
}
#nto-minigame .mg-spec-list.is-base li > b {
  color: #fcd34d !important;
}

/* Botão Equipar bloqueado: continua clicável (o toque explica o motivo) */
#nto-minigame .mg-bag-act.is-locked {
  border-color: rgba(244, 63, 94, 0.4) !important;
  background: rgba(244, 63, 94, 0.12) !important;
  color: #fda4af !important;
}

/* ─── Mercado: linha compacta do anúncio ─── */

#nto-minigame [data-mg-market] .mg-market-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.24rem 0.34rem !important;
  margin-top: 0.24rem !important;
}
#nto-minigame [data-mg-market] .mg-market-rar {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  padding: 0.09rem 0.34rem !important;
  border-radius: 0.26rem !important;
  font-size: 0.54rem !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--mg-rar-color, #94a3b8) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  background: color-mix(in srgb, var(--mg-rar-color, #94a3b8) 14%, transparent) !important;
  box-shadow: inset 0 0 0 1px
    color-mix(in srgb, var(--mg-rar-color, #94a3b8) 55%, transparent) !important;
}
#nto-minigame [data-mg-market] .mg-market-req {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 0.16rem !important;
  padding: 0.09rem 0.3rem !important;
  border-radius: 0.26rem !important;
  font-size: 0.54rem !important;
  font-style: normal !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  color: #a7f3d0 !important;
  background: rgba(16, 185, 129, 0.14) !important;
}
#nto-minigame [data-mg-market] .mg-market-req.is-locked {
  color: #fda4af !important;
  background: rgba(244, 63, 94, 0.16) !important;
}
#nto-minigame [data-mg-market] .mg-market-req svg {
  flex: 0 0 auto !important;
  display: block !important;
}
#nto-minigame [data-mg-market] .mg-market-affs {
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 0.57rem !important;
  font-weight: 700 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #7dd3fc !important;
}

/* ─── Tooltip: largura pelo conteúdo e realce da raridade ─── */

#nto-minigame .mg-eq-tooltip {
  width: max-content !important;
  min-width: 11.5rem !important;
  max-width: 16rem !important;
}
#nto-minigame .mg-eq-tooltip.is-rar {
  border-color: var(--mg-rar-color, rgba(255, 255, 255, 0.12)) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.55),
    0 0 0 1px color-mix(in srgb, var(--mg-rar-color, #94a3b8) 30%, transparent) !important;
}
#nto-minigame .mg-eq-tip-stats {
  display: block !important;
}
#nto-minigame .mg-eq-tip-stats li {
  list-style: none !important;
}

@media (max-width: 719px) {
  #nto-minigame .mg-spec-list li > span,
  #nto-minigame .mg-spec-list li > b,
  #nto-minigame .mg-spec-req,
  #nto-minigame .mg-spec-rar,
  #nto-minigame .mg-spec-meta,
  #nto-minigame [data-mg-market] .mg-market-rar,
  #nto-minigame [data-mg-market] .mg-market-req,
  #nto-minigame [data-mg-market] .mg-market-affs {
    font-size: 0.52rem !important;
  }
  #nto-minigame .mg-eq-tooltip {
    max-width: 13rem !important;
  }
}

/* ============================================================================
   13. MOCHILA NO CELULAR
   Com 740px de largura (celular deitado) a mochila caía no layout de DESKTOP
   (`@media min-width: 720px`): 2 colunas, Equipado com 196px e a Bag sobrando
   com uma janelinha de ~2 linhas. Aqui: Equipado vira tira horizontal no topo,
   a Bag fica com a altura que sobrar (8 colunas, slots maiores) e o detalhe do
   item vira UMA linha (ficha da raridade em chips).
   ========================================================================== */

/* ── Layout: pilha (Equipado em cima, Bag embaixo) ──
   Sem isto o painel fica em 2 colunas (regra de desktop por largura) e a tira
   do Equipado não tem largura para existir. */
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-bag-layout,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-bag-layout,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-bag-layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
  padding: 0.4rem 0.55rem !important;
  overflow: hidden !important;
}

/* ── Equipado: tira de 6 slots, rótulo embaixo do ícone, stats na mesma linha do título ── */
#nto-minigame.is-mobile-ui [data-mg-backpack] [data-mg-paperdoll],
#nto-minigame.is-mobile-landscape [data-mg-backpack] [data-mg-paperdoll],
#nto-minigame.is-compact-mobile [data-mg-backpack] [data-mg-paperdoll] {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 0.1rem 0.5rem !important;
  flex: 0 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0.3rem 0.45rem 0.4rem !important;
  border-radius: 0.5rem !important;
}
#nto-minigame.is-mobile-ui [data-mg-backpack] [data-mg-paperdoll] .mg-sheet-pane-label,
#nto-minigame.is-mobile-landscape [data-mg-backpack] [data-mg-paperdoll] .mg-sheet-pane-label,
#nto-minigame.is-compact-mobile [data-mg-backpack] [data-mg-paperdoll] .mg-sheet-pane-label {
  grid-area: 1 / 1 !important;
  margin: 0 !important;
  font-size: 0.58rem !important;
}
#nto-minigame.is-mobile-ui [data-mg-backpack] [data-mg-eq-stats],
#nto-minigame.is-mobile-landscape [data-mg-backpack] [data-mg-eq-stats],
#nto-minigame.is-compact-mobile [data-mg-backpack] [data-mg-eq-stats] {
  grid-area: 1 / 2 !important;
  margin: 0 !important;
  overflow: hidden !important;
  font-size: 0.56rem !important;
  text-align: right !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-paperdoll,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-paperdoll,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-paperdoll {
  grid-area: 2 / 1 / 3 / 3 !important;
  display: flex !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  gap: 0.3rem !important;
}
/* O aviso do topo repete o rodapé ("toque um slot…") e custa 12px de altura
   justamente onde a Bag precisa: no celular ele sai. */
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-sheet-hint,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-sheet-hint,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-sheet-hint {
  display: none !important;
}
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-eq-slot,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-eq-slot,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-eq-slot {
  flex: 0 0 auto !important;
  width: 3.4rem !important;
  min-width: 0 !important;
  height: 3.4rem !important;
  aspect-ratio: auto !important;
  flex-direction: column !important;
  gap: 0.05rem !important;
}
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-eq-slot img,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-eq-slot img,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-eq-slot img {
  width: 1.7rem !important;
  height: 1.7rem !important;
}
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-eq-label,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-eq-label,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-eq-label {
  position: static !important;
  font-size: 7.5px !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ── Bag: 8 colunas (os 24 slots viram 3 linhas cheias) ── */
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-bag-main .mg-bag-grid,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-bag-main .mg-bag-grid,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-bag-main .mg-bag-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 0.3rem !important;
}
/* Celular deitado tem largura de sobra: 12 colunas = 24 slots em 2 linhas cheias */
@media (orientation: landscape) and (max-height: 520px) {
  #nto-minigame.is-mobile-ui [data-mg-backpack] .mg-bag-main .mg-bag-grid,
  #nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-bag-main .mg-bag-grid,
  #nto-minigame.is-compact-mobile [data-mg-backpack] .mg-bag-main .mg-bag-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
}
/* Célula vazia tem que aparecer: sem isso a grade parece um buraco preto */
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-bag-slot.is-empty,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-bag-slot.is-empty,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-bag-slot.is-empty {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.015) !important;
}

/* ── Detalhe do item: 1 linha (ficha da raridade em chips, botões à direita) ── */
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-bag-detail,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-bag-detail,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-bag-detail {
  gap: 0.35rem 0.5rem !important;
  padding: 0.4rem 0.5rem !important;
}
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-bag-detail-acts,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-bag-detail-acts,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-bag-detail-acts {
  order: 3 !important;
  margin-left: auto !important;
}
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-spec,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-spec,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-spec {
  order: 2 !important;
  flex: 0 1 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0.26rem !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
/* o cabeçalho do item já diz slot · tier · +N — no celular isso é repetição */
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-spec-meta,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-spec-meta,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-spec-meta {
  display: none !important;
}
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-spec-req,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-spec-req,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-spec-req {
  order: 9 !important;
  font-size: 0.54rem !important;
}
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-spec-list,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-spec-list,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-spec-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.24rem !important;
  padding: 0 !important;
  border: 0 !important;
}
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-spec-list li,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-spec-list li,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-spec-list li {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.22rem !important;
  padding: 0.07rem 0.3rem !important;
  border-radius: 0.25rem !important;
  background: rgba(56, 189, 248, 0.12) !important;
}
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-spec-list li > span,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-spec-list li > span,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-spec-list li > span {
  font-size: 0.54rem !important;
  color: rgba(255, 255, 255, 0.66) !important;
}
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-spec-list li > b,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-spec-list li > b,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-spec-list li > b {
  font-size: 0.56rem !important;
  color: #7dd3fc !important;
}
/* A ficha em chips já é o detalhe: o título "Equipado/Bag" repete o que a tira mostra */
#nto-minigame.is-mobile-ui [data-mg-backpack] .mg-bag-main > .mg-sheet-pane-label,
#nto-minigame.is-mobile-landscape [data-mg-backpack] .mg-bag-main > .mg-sheet-pane-label,
#nto-minigame.is-compact-mobile [data-mg-backpack] .mg-bag-main > .mg-sheet-pane-label {
  margin-bottom: 0 !important;
}