/* ==========================================================================
   Midgard Idle: skin classica (interface antiga do Ragnarok).
   Tudo sob html[data-mg-skin="classic"]; a HUD moderna nao e tocada. Tema escuro: html[data-mg-theme="dark"] (ao fim do arquivo).
   Reaproveita as variaveis --color-ro-* do proprio jogo (definidas em .ro-game-surface), assim toda janela herda as cores.
   Dono: agente "Skin classica" (bench/classic/*). Icones: <origem do CDN>/client/ui-icons/basic-info/*.png, resolvida em runtime por classic.js.
   ========================================================================== */
html[data-mg-skin="classic"] {
  --mgc-title-edge: #7d97c8;
  --mgc-btn-top: #9cc0f4; --mgc-btn-bot: #3a68b8;
  --mgc-border: #7f9bd0; --mgc-border-soft: #b7c8e6; --mgc-panel: #ffffff; --mgc-panel-2: #e6edf9; --mgc-well: #dde7f6;
  --mgc-ink: #0f2d63; --mgc-ink-soft: #6b7fa6; --mgc-pink: #e0457b; --mgc-gold: #f0b429;
  --mgc-shadow: 0 2px 6px rgba(20, 40, 90, .35);
  --mgc-title-top: #f4f8fe; --mgc-title-hi: #dbe6f7; --mgc-title-mid: #c4d4ef; --mgc-title-bot: #aec3e8; --mgc-title-ink: #1a3266;
  --mgc-title-glow: rgba(255, 255, 255, .7); --mgc-title-gloss: rgba(255, 255, 255, .9); --mgc-orb-edge: #2a4c92;
  --mgc-card: #ffffff; --mgc-rule: #8ea4cf; --mgc-well-2: #e7eef9; --mgc-well-2-edge: #c3d1ea; --mgc-ink-job: #7a8bb0;
  --mgc-track: #eef2f9; --mgc-track-edge: #aebbd6;
  --mgc-tile-top: #ffffff; --mgc-tile-mid: #f3f6fc; --mgc-tile-bot: #d9e3f4; --mgc-tile-edge: #9fb3da; --mgc-tile-edge-hover: #5f82c6;
  --mgc-tile-hl: #ffffff; --mgc-tile-lo: rgba(110, 138, 190, .2); --mgc-tile-ring: rgba(95, 130, 198, .35); --mgc-tile-glow: rgba(255, 255, 255, .95); --mgc-icon-lift: rgba(255, 255, 255, .7);
  --mgc-gold-edge: #d99a12; --mgc-gold-top: #fffdf3; --mgc-gold-bot: #fbeac0; --mgc-gold-inner: #fff6d8; --mgc-gold-glow: rgba(240, 180, 41, .6);
  --mgc-tip-top: #4069b3; --mgc-tip-bot: #24468a; --mgc-tip-edge: #16336e; --mgc-wing: #b9cbea;
}
html[data-mg-skin="classic"] .ro-game-surface {
  --color-ro-window-bg: var(--mgc-panel); --color-ro-body: var(--mgc-ink); --color-ro-panel-bg: var(--mgc-panel-2);
  --color-ro-icon-frame: var(--mgc-border-soft); --color-ro-accent: var(--mgc-pink); --color-ro-stat-label-text: var(--mgc-ink-soft);
  --color-ro-panel-groove-dark: #8fa6cc;
}

/* ---- Janelas: barra de titulo azul degrade, botoes redondos, borda azul ---- */
html[data-mg-skin="classic"] .ro-game-surface.ro-window-viewport:not(.ro-game-chat) {
  border: 2px solid var(--mgc-border); border-radius: 9px; background: var(--mgc-panel); box-shadow: var(--mgc-shadow), inset 0 0 0 1px #fff;
}
html[data-mg-skin="classic"] .ro-window-viewport > [data-ro-window-frame]:not(.ro-game-chat-frame) { border-radius: 7px; background: var(--mgc-panel); }
html[data-mg-skin="classic"] [data-ro-window-titlebar] {
  padding: 3px 5px 3px 8px; min-height: 24px; gap: 4px; border-bottom: 1px solid var(--mgc-title-edge);
  background: linear-gradient(180deg, var(--mgc-title-top) 0%, var(--mgc-title-hi) 46%, var(--mgc-title-mid) 54%, var(--mgc-title-bot) 100%);
  box-shadow: inset 0 1px 0 var(--mgc-title-gloss);
}
html[data-mg-skin="classic"] [data-ro-window-titlebar] > div:first-child { gap: 5px; }
html[data-mg-skin="classic"] [data-ro-window-titlebar] > div:first-child svg { width: 16px; height: 16px; filter: drop-shadow(0 1px 0 var(--mgc-title-glow)); }
html[data-mg-skin="classic"] [data-ro-window-titlebar] span.text-xl,
html[data-mg-skin="classic"] [data-ro-window-titlebar] span[class*="font-semibold"] {
  font-family: Carlito, Tahoma, sans-serif; font-size: 14px !important; line-height: 18px; font-weight: 400; letter-spacing: .01em; color: var(--mgc-title-ink); text-shadow: 0 1px 0 var(--mgc-title-glow);
}
/* bolinhas: botoes redondos azuis de minimizar e fechar */
html[data-mg-skin="classic"] [data-ro-window-titlebar] button,
html[data-mg-skin="classic"] #mg-classic-infobar .mgc-min {
  position: relative; display: grid; place-items: center; flex-shrink: 0; width: 17px; height: 17px; min-width: 17px; min-height: 17px; margin: 0; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--mgc-orb-edge); color: #fff;
  background: radial-gradient(circle at 36% 28%, #f2f7ff 0%, var(--mgc-btn-top) 32%, var(--mgc-btn-bot) 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .75), inset 0 -1px 1px rgba(10, 30, 80, .35), 0 1px 1px rgba(0, 0, 0, .28);
  transition: filter .12s ease, transform .1s ease;
}
html[data-mg-skin="classic"] [data-ro-window-titlebar] button:hover,
html[data-mg-skin="classic"] #mg-classic-infobar .mgc-min:hover { filter: brightness(1.12) saturate(1.1); }
html[data-mg-skin="classic"] [data-ro-window-titlebar] button:active,
html[data-mg-skin="classic"] #mg-classic-infobar .mgc-min:active { transform: translateY(1px); filter: brightness(.95); }
html[data-mg-skin="classic"] [data-ro-window-titlebar] button:focus-visible,
html[data-mg-skin="classic"] #mg-classic-infobar .mgc-min:focus-visible { outline: 2px solid var(--mgc-pink); outline-offset: 1px; }
html[data-mg-skin="classic"] [data-ro-window-titlebar] button svg,
html[data-mg-skin="classic"] #mg-classic-infobar .mgc-min svg { width: 10px; height: 10px; stroke-width: 3; filter: drop-shadow(0 1px 0 rgba(10, 30, 80, .45)); }
html[data-mg-skin="classic"] [data-ro-window-titlebar] button.ro-touch-target::after,
html[data-mg-skin="classic"] #mg-classic-infobar .mgc-min::after { content: ""; position: absolute; inset: -6px; }
html[data-mg-skin="classic"] .mgc-tb-btns { display: flex; align-items: center; gap: 4px; margin-left: auto; pointer-events: auto; }
/* minimizada: so a barra de titulo fica (como no cliente antigo) */
html[data-mg-skin="classic"] .ro-window-viewport[data-mgc-min="true"],
html[data-mg-skin="classic"] .ro-window-viewport[data-mgc-min="true"] > [data-ro-window-frame],
html[data-mg-skin="classic"] :has(> .ro-window-viewport[data-mgc-min="true"]) { height: auto !important; min-height: 0 !important; max-height: none !important; }
html[data-mg-skin="classic"] .ro-window-viewport[data-mgc-min="true"] > [data-ro-window-frame] > :not([data-ro-window-titlebar]) { display: none !important; }
html[data-mg-skin="classic"] .ro-window-viewport[data-mgc-min="true"] [data-ro-window-titlebar] { border-bottom-color: transparent; }
#mg-classic-infobar { display: none; }
html[data-mg-skin="classic"] #mg-classic-infobar {
  position: absolute; z-index: 150; left: var(--mgc-left, 8px); top: var(--mgc-top, 0); width: var(--mgc-width, 19rem); height: 26px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: flex-end; padding: 0 6px; pointer-events: none;
}
html[data-mg-skin="classic"] #mg-classic-infobar .mgc-min { pointer-events: auto; }
html[data-mg-skin="classic"] [data-testid="basic-info-window"][data-mgc-min="true"] > .ro-game-surface { display: none; }
html[data-mg-skin="classic"] [data-testid="basic-info-window"][data-mgc-min="true"]::before { border-radius: 9px; border-bottom: 2px solid var(--mgc-border); }
html[data-mg-skin="classic"] #mg-classic-shortcuts[data-info-min="true"] { display: none; }

/* ---- Abas do inventario e de ferramentas: icone, sublinhado rosa ---- */
html[data-mg-skin="classic"] .ro-tab-tool { background: var(--mgc-well); border-bottom: 3px solid transparent; color: var(--mgc-ink-soft); border-radius: 0; }
html[data-mg-skin="classic"] .ro-tab-tool:hover:not(:disabled) { background: #edf3fc; }
html[data-mg-skin="classic"] .ro-tab-tool[aria-selected="true"] { background: #fff; border-bottom-color: var(--mgc-pink); color: var(--mgc-ink); }
html[data-mg-skin="classic"] [role="tablist"][aria-label^="Categorias do inv"] { background: var(--mgc-well); }
html[data-mg-skin="classic"] [role="tablist"][aria-label^="Categorias do inv"] .ro-tab-tool > span > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; /* so icone; nome continua para leitores de tela */
}
html[data-mg-skin="classic"] [role="tablist"][aria-label^="Categorias do inv"] .ro-tab-tool { min-height: 38px; }
html[data-mg-skin="classic"] [role="tablist"][aria-label^="Categorias do inv"] .ro-tab-tool svg,
html[data-mg-skin="classic"] [role="tablist"][aria-label^="Categorias do inv"] .ro-tab-tool img { width: 26px; height: 26px; }

/* ---- Slots de item: quadradinho claro com borda azul acinzentada ---- */
html[data-mg-skin="classic"] .ro-slot__face {
  border: 1px solid #b3c3df; border-radius: 5px; background: linear-gradient(180deg, #ffffff 0%, #e4ecf8 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8);
}
html[data-mg-skin="classic"] .ro-slot[aria-pressed="true"] .ro-slot__face { border-color: var(--mgc-gold); box-shadow: 0 0 0 1px var(--mgc-gold); }
html[data-mg-skin="classic"] .ro-inventory-quantity { font-weight: 700; text-shadow: 0 0 2px #fff, 0 0 2px #fff; }

/* ---- Informacoes basicas: painel contido, tudo num cartao branco unico como no cliente antigo (imagem de referencia 41) ---- */
html[data-mg-skin="classic"] [data-testid="hud-top-layout"] { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); }
html[data-mg-skin="classic"] .ro-basic-info-responsive { width: 19rem; max-width: calc(100vw - 1rem); }
html[data-mg-skin="classic"] [data-testid="basic-info-window"]::before {
  content: "Informações básicas"; display: block; padding: 3px 30px 3px 26px; font: 400 14px/18px Carlito, Tahoma, sans-serif; color: var(--mgc-title-ink);
  font-weight: 400; letter-spacing: .01em; text-shadow: 0 1px 0 var(--mgc-title-glow); border: 2px solid var(--mgc-border); border-bottom: 1px solid var(--mgc-title-edge); border-radius: 9px 9px 0 0;
  background: linear-gradient(180deg, var(--mgc-title-top) 0%, var(--mgc-title-hi) 46%, var(--mgc-title-mid) 54%, var(--mgc-title-bot) 100%);
  box-shadow: inset 0 1px 0 var(--mgc-title-gloss);
}
/* losango do titulo (a joia azul da barra antiga) */
html[data-mg-skin="classic"] [data-testid="basic-info-window"] { position: relative; }
html[data-mg-skin="classic"] [data-testid="basic-info-window"]::after {
  content: ""; position: absolute; left: 9px; top: 7px; width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; pointer-events: none;
  background: linear-gradient(135deg, #e8f1ff 0%, var(--mgc-btn-top) 40%, var(--mgc-btn-bot) 100%); border: 1px solid #27478c; box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
html[data-mg-skin="classic"] [data-testid="basic-info-window"] > .ro-game-surface { border-radius: 0; border-top: 0; box-shadow: none; background: var(--mgc-panel-2); }
html[data-mg-skin="classic"] [data-testid="basic-info-window"] > .ro-game-surface > [data-ro-window-frame] { border-radius: 0; background: var(--mgc-panel-2); }
html[data-mg-skin="classic"] [data-testid="basic-info-window"] [data-ro-window-body] { display: grid; gap: 5px; padding: 6px; background: var(--mgc-panel-2); cursor: default; }
@media (min-width: 768px) {
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] > .ro-game-surface { border-bottom: 0; }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] [data-ro-window-body] {
    cursor: move; margin: 5px 5px 0; padding: 6px 8px 5px; gap: 4px; background: var(--mgc-card); border: 1px solid var(--mgc-border-soft); border-radius: 8px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .6), inset 0 1px 2px rgba(40, 70, 130, .06);
  }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] [data-ro-window-body] > div:first-child,
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] .ro-basic-info-details,
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] .ro-basic-info-details > div,
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] .ro-basic-info-details > div > div { display: contents; }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] .ro-basic-info-details[data-expanded="false"] > div { display: contents; visibility: visible; }
  /* ordem: identidade, HP/SP, progressao (poco azul), peso e zeny */
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] [data-ro-window-body] > div:first-child > div:first-child { order: 1; gap: 8px; padding: 0 0 6px; border-bottom: 1px solid var(--mgc-rule); }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] fieldset[aria-label="HP e SP"] { order: 2; gap: 4px; padding: 2px 0 1px; grid-column: auto !important; }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] fieldset[aria-label="Progressão"] {
    order: 3; width: auto !important; gap: 3px; padding: 4px 8px; background: var(--mgc-well-2); border: 1px solid var(--mgc-well-2-edge); border-radius: 6px;
  }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] fieldset[aria-label="Progressão"] > div { min-height: 18px; gap: 8px; flex-wrap: nowrap; }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] fieldset[aria-label="Progressão"] > div + div { padding-top: 3px; border-top: 1px solid var(--mgc-well-2-edge); }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] fieldset[aria-label="Progressão"] > div > span { width: 84px; font-size: 13px; font-weight: 700; color: var(--mgc-ink); }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] fieldset[aria-label="Peso e Zeny"] { order: 4; gap: 2px; border: 0 !important; padding: 1px 2px 0 !important; grid-column: auto !important; }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] fieldset[aria-label="HP e SP"] > div { gap: 6px; flex-wrap: nowrap; }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] fieldset[aria-label="HP e SP"] > div > span:first-child { width: 22px; font-size: 13px; color: var(--mgc-ink); }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] fieldset[aria-label="HP e SP"] > div > span:last-child { min-width: 46px; font-size: 13px; font-weight: 700; color: var(--mgc-ink); }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] fieldset[aria-label="HP e SP"] .ro-basic-info-gauge { height: 17px; min-width: 0; }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] fieldset[aria-label="HP e SP"] .ro-basic-info-gauge-text { font-size: 12px; }
}
html[data-mg-skin="classic"] [data-testid="basic-info-window"] [data-ro-window-body] > div:first-child > div:first-child .font-bold { font-size: 18px; line-height: 21px; }
html[data-mg-skin="classic"] [data-testid="basic-info-window"] [data-ro-window-body] > div:first-child > div:first-child .font-normal.text-xs { color: var(--mgc-ink-job); font-size: 14px; font-weight: 700; }
html[data-mg-skin="classic"] .ro-basic-info-gauge .ro-gauge-track { background: var(--mgc-track); border: 1px solid var(--mgc-track-edge); border-radius: 10px; box-shadow: inset 0 1px 2px rgba(20, 50, 100, .25); }
html[data-mg-skin="classic"] .ro-basic-info-gauge .ro-gauge-fill-motion { border-radius: 10px; }
html[data-mg-skin="classic"] .ro-basic-info-gauge-text { text-shadow: 0 1px 1px #12365c, 0 0 2px #12365c; font-weight: 700; }
html[data-mg-skin="classic"] [data-testid="basic-info-window"] fieldset[aria-label="Peso e Zeny"] button span > span::before { color: var(--mgc-ink); }
html[data-mg-skin="classic"] [data-testid="basic-info-window"] button[aria-label^="Peso"] span > span::before { content: "Peso : "; }
html[data-mg-skin="classic"] [data-testid="basic-info-window"] button[aria-label^="Zeny"] span > span::before { content: "Zeny : "; }

/* ---- Trilho moderno escondido: todos os atalhos vivem na grade classica (classic.js) ---- */
html[data-mg-skin="classic"] .ro-hud-rail,
html[data-mg-skin="classic"] .ro-hud-touch-navigation { display: none !important; }
html[data-mg-skin="classic"].mg-classic-proxy [role="dialog"][aria-label="Menu de acessos"] { opacity: 0 !important; pointer-events: none !important; transition: none !important; }

/* ---- Grade de atalhos classica: 5 por linha, ladrilhos quadrados com moldura, estado aberto dourado ---- */
#mg-classic-shortcuts { display: none; }
html[data-mg-skin="classic"] #mg-classic-shortcuts {
  --mgc-gap: 6px;
  display: block; position: fixed; z-index: 30; box-sizing: border-box;
  left: var(--mgc-left, 8px); top: var(--mgc-top, 0); width: var(--mgc-width, 19rem);
  padding: 6px 7px 13px; background: var(--mgc-panel-2);
  border: 2px solid var(--mgc-border); border-top: 0; border-radius: 0 0 11px 11px;
  box-shadow: 0 5px 8px -3px rgba(20, 40, 90, .35);
}
#mg-classic-shortcuts .mgc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mgc-gap); }
#mg-classic-shortcuts .mgc-btn {
  position: relative; flex: 0 0 calc((100% - 4 * var(--mgc-gap)) / 5); aspect-ratio: 1; min-width: 0; margin: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  border: 1px solid var(--mgc-tile-edge); border-radius: 9px;
  background: linear-gradient(180deg, var(--mgc-tile-top) 0%, var(--mgc-tile-mid) 46%, var(--mgc-tile-bot) 100%);
  box-shadow: inset 0 1px 0 var(--mgc-tile-hl), inset 0 -2px 0 var(--mgc-tile-lo), 0 1px 1px rgba(20, 50, 110, .2);
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
#mg-classic-shortcuts .mgc-face { position: absolute; inset: 3px; display: grid; place-items: center; border-radius: 6px; background: radial-gradient(circle at 50% 38%, var(--mgc-tile-glow) 0%, transparent 68%); pointer-events: none; }
#mg-classic-shortcuts .mgc-face img,
#mg-classic-shortcuts .mgc-face .mgc-glyph { width: 66%; height: 66%; object-fit: contain; image-rendering: auto; pointer-events: none; transition: transform .15s ease; filter: drop-shadow(0 1px 0 var(--mgc-icon-lift)); }
#mg-classic-shortcuts .mgc-glyph .f1 { fill: #f2c14e; stroke: #8a5a12; stroke-width: 1.1; stroke-linejoin: round; }
#mg-classic-shortcuts .mgc-glyph .f2 { fill: #7fa6e6; stroke: #24468a; stroke-width: 1.1; stroke-linejoin: round; }
#mg-classic-shortcuts .mgc-glyph .s { fill: none; stroke: #24468a; stroke-width: 1.6; stroke-linecap: round; }
#mg-classic-shortcuts .mgc-glyph .t { fill: #fff; font: 700 10px Carlito, Tahoma, sans-serif; }
#mg-classic-shortcuts .mgc-btn:hover { border-color: var(--mgc-tile-edge-hover); box-shadow: inset 0 1px 0 var(--mgc-tile-hl), inset 0 -2px 0 var(--mgc-tile-lo), 0 0 0 1px var(--mgc-tile-ring), 0 2px 4px rgba(20, 50, 110, .22); }
#mg-classic-shortcuts .mgc-btn:hover .mgc-face img,
#mg-classic-shortcuts .mgc-btn:hover .mgc-face .mgc-glyph { transform: scale(1.07); }
#mg-classic-shortcuts .mgc-btn:active { transform: translateY(1px); box-shadow: inset 0 1px 3px rgba(20, 50, 110, .3); }
#mg-classic-shortcuts .mgc-btn:focus-visible { outline: 2px solid var(--mgc-pink); outline-offset: 2px; }
#mg-classic-shortcuts .mgc-btn[aria-pressed="true"] {
  border-color: var(--mgc-gold-edge);
  background: linear-gradient(180deg, var(--mgc-gold-top) 0%, var(--mgc-gold-bot) 100%);
  box-shadow: inset 0 0 0 1px var(--mgc-gold-inner), 0 0 0 1px var(--mgc-gold), 0 0 7px var(--mgc-gold-glow);
}
/* rotulo: dica propria logo abaixo do ladrilho (acima ficaria sob o painel); a primeira e a ultima coluna ancoram na borda para nao sair da tela */
#mg-classic-shortcuts .mgc-btn::after {
  content: attr(data-label); position: absolute; left: 50%; top: calc(100% + 4px); z-index: 3; transform: translate(-50%, -3px);
  padding: 2px 8px 3px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0;
  font: 700 12px/16px Carlito, Tahoma, sans-serif; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
  background: linear-gradient(180deg, var(--mgc-tip-top), var(--mgc-tip-bot)); border: 1px solid var(--mgc-tip-edge); box-shadow: 0 2px 6px rgba(10, 30, 70, .35);
  transition: opacity .12s ease, transform .12s ease;
}
#mg-classic-shortcuts .mgc-btn:nth-child(5n + 1)::after { left: -2px; transform: translate(0, -3px); }
#mg-classic-shortcuts .mgc-btn:nth-child(5n)::after { left: auto; right: -2px; transform: translate(0, -3px); }
#mg-classic-shortcuts .mgc-btn:hover::after,
#mg-classic-shortcuts .mgc-btn:focus-visible::after { opacity: 1; transform: translate(-50%, 0); transition-delay: .18s; }
#mg-classic-shortcuts .mgc-btn:nth-child(5n + 1):hover::after, #mg-classic-shortcuts .mgc-btn:nth-child(5n + 1):focus-visible::after,
#mg-classic-shortcuts .mgc-btn:nth-child(5n):hover::after, #mg-classic-shortcuts .mgc-btn:nth-child(5n):focus-visible::after { transform: translate(0, 0); }
/* recolher: joia rosa entre asas prateadas, presa na borda inferior; as asas apontam para onde o painel vai */
#mg-classic-shortcuts .mgc-toggle {
  position: absolute; left: 50%; bottom: -12px; z-index: 2; width: 64px; height: 22px; margin: 0; padding: 0; transform: translateX(-50%);
  border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#mg-classic-shortcuts .mgc-toggle svg { display: block; width: 100%; height: 100%; overflow: visible; transition: transform .2s ease; filter: drop-shadow(0 1px 1px rgba(10, 30, 70, .35)); }
#mg-classic-shortcuts .mgc-wing { fill: none; stroke: var(--mgc-wing); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
#mg-classic-shortcuts .mgc-gem { fill: var(--mgc-pink); stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; transition: fill .15s ease; }
#mg-classic-shortcuts .mgc-gem-hl { fill: rgba(255, 255, 255, .55); }
#mg-classic-shortcuts .mgc-toggle:hover .mgc-gem { fill: #f56a9c; }
#mg-classic-shortcuts .mgc-toggle:hover svg { filter: drop-shadow(0 0 3px rgba(224, 69, 123, .65)); }
#mg-classic-shortcuts .mgc-toggle:focus-visible { outline: 2px solid var(--mgc-pink); outline-offset: 1px; border-radius: 6px; }
#mg-classic-shortcuts[data-collapsed="true"] .mgc-toggle svg { transform: scaleY(-1); }
#mg-classic-shortcuts[data-collapsed="true"] .mgc-grid { display: none; }
#mg-classic-shortcuts[data-collapsed="true"] { padding: 0 0 9px; }
#mg-classic-shortcuts .mgc-track { display: none; }
@media (prefers-reduced-motion: reduce) {
  #mg-classic-shortcuts .mgc-btn, #mg-classic-shortcuts .mgc-btn::after, #mg-classic-shortcuts .mgc-face img, #mg-classic-shortcuts .mgc-toggle svg { transition: none; }
}

/* ---- Celular: cartao de status no topo, barra inferior de icones rolavel com trilho proprio (imagem de referencia 39) ---- */
@media (max-width: 767px) {
  html[data-mg-skin="classic"] [data-testid="basic-info-window"]::before,
  html[data-mg-skin="classic"] [data-testid="basic-info-window"]::after { display: none; }
  html[data-mg-skin="classic"] #mg-classic-infobar { display: none; }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"][data-mgc-min="true"] > .ro-game-surface { display: block; }
  html[data-mg-skin="classic"] #mg-classic-shortcuts[data-info-min="true"] { display: block; }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] > .ro-game-surface { border: 2px solid var(--mgc-border); border-radius: 14px; background: var(--mgc-panel); box-shadow: var(--mgc-shadow), inset 0 0 0 1px rgba(255,255,255,.5); }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] > .ro-game-surface > [data-ro-window-frame] { border-radius: 12px; background: var(--mgc-panel); }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] [data-ro-window-body] { background: var(--mgc-panel); padding: 8px 10px; }
  html[data-mg-skin="classic"] [data-testid="basic-info-window"] [data-ro-window-body] > div:first-child > div:first-child .grid > .font-bold { font-size: 16px; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-mg-skin="classic"] #mg-classic-shortcuts {
    --mgc-gap: 7px;
    left: 8px; right: 8px; width: auto; top: auto; bottom: calc(var(--ro-hud-chat-height, 44px) + 10px);
    border: 2px solid var(--mgc-border); border-radius: 12px; padding: 7px 7px 6px;
    background: linear-gradient(180deg, var(--mgc-title-top) 0%, var(--mgc-panel-2) 22%, var(--mgc-panel-2) 100%);
    box-shadow: var(--mgc-shadow), inset 0 0 0 1px rgba(255, 255, 255, .35);
  }
  #mg-classic-shortcuts .mgc-grid { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 1px; }
  #mg-classic-shortcuts .mgc-grid::-webkit-scrollbar { display: none; }
  #mg-classic-shortcuts .mgc-btn { flex: 0 0 48px; width: 48px; scroll-snap-align: start; }
  #mg-classic-shortcuts .mgc-btn::after { display: none; }
  #mg-classic-shortcuts .mgc-toggle { display: none; }
  #mg-classic-shortcuts .mgc-track[data-scroll="true"] { display: flex; align-items: center; gap: 4px; height: 14px; margin-top: 6px; }
  #mg-classic-shortcuts .mgc-arrow {
    position: relative; flex: 0 0 14px; width: 14px; height: 14px; margin: 0; padding: 0; border-radius: 50%; border: 1px solid #27478c; cursor: pointer;
    background: radial-gradient(circle at 35% 28%, #e6f0ff 0%, var(--mgc-btn-top) 30%, var(--mgc-btn-bot) 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7);
  }
  #mg-classic-shortcuts .mgc-arrow::before { content: ""; position: absolute; inset: 3px 4px; background: #fff; clip-path: polygon(0 50%, 100% 0, 100% 100%); }
  #mg-classic-shortcuts .mgc-arrow-r::before { clip-path: polygon(100% 50%, 0 0, 0 100%); }
  #mg-classic-shortcuts .mgc-rail { position: relative; flex: 1; height: 10px; border-radius: 6px; background: var(--mgc-track); border: 1px solid var(--mgc-track-edge); box-shadow: inset 0 1px 2px rgba(20, 50, 100, .22); }
  #mg-classic-shortcuts .mgc-thumb { position: absolute; top: 1px; bottom: 1px; border-radius: 5px; background: linear-gradient(180deg, #a9c6f4 0%, #5a86d0 55%, #3a68b8 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6); }
}

/* ---- Chat: faixa azul, "online" em verde ---- */
html[data-mg-skin="classic"] .ro-game-chat { border: 2px solid var(--mgc-border); }
html[data-mg-skin="classic"] .ro-game-chat-frame { background: linear-gradient(180deg, #5a7fc2 0%, #3b5fa5 100%); }
html[data-mg-skin="classic"] .ro-tab-chat { color: #dbe7ff; }
html[data-mg-skin="classic"] .ro-tab-chat[aria-selected="true"] { color: #fff; border-bottom-color: var(--mgc-pink); }
html[data-mg-skin="classic"] .ro-game-chat .ro-badge-quiet { background: #3aa655; color: #fff; border-radius: 12px; font-weight: 700; }
html[data-mg-skin="classic"] .ro-game-chat .ro-badge-quiet > span[aria-hidden="true"] { display: none; }

/* ---- Tema escuro da skin classica: azuis fundos, mesma identidade ---- */
html[data-mg-skin="classic"][data-mg-theme="dark"] {
  --mgc-title-top: #3d5c9b; --mgc-title-bot: #1f3a70; --mgc-title-ink: #e3ecff; --mgc-title-edge: #0f2250;
  --mgc-btn-top: #6f9be0; --mgc-btn-bot: #21408a;
  --mgc-border: #4469ae; --mgc-border-soft: #2f4a80; --mgc-panel: #14223f; --mgc-panel-2: #1a2c52; --mgc-well: #223a68;
  --mgc-ink: #dbe6fb; --mgc-ink-soft: #8fa6d1; --mgc-pink: #ff6fa0; --mgc-gold: #f6c453; --mgc-shadow: 0 2px 8px rgba(0, 0, 0, .6);
  --mgc-title-hi: #31508e; --mgc-title-mid: #26437c; --mgc-title-glow: rgba(0, 0, 0, .45); --mgc-title-gloss: rgba(255, 255, 255, .12); --mgc-orb-edge: #142c62;
  --mgc-card: #101d38; --mgc-rule: #34508a; --mgc-well-2: #172a50; --mgc-well-2-edge: #2c4679; --mgc-ink-job: #8fa6d1;
  --mgc-track: #0b1630; --mgc-track-edge: #2f4a80;
  --mgc-tile-top: #33508c; --mgc-tile-mid: #243f74; --mgc-tile-bot: #182d58; --mgc-tile-edge: #46689f; --mgc-tile-edge-hover: #7aa0e2;
  --mgc-tile-hl: rgba(255, 255, 255, .16); --mgc-tile-lo: rgba(0, 0, 0, .25); --mgc-tile-ring: rgba(122, 160, 226, .35); --mgc-tile-glow: rgba(150, 190, 255, .22); --mgc-icon-lift: rgba(0, 0, 0, .45);
  --mgc-gold-edge: #f6c453; --mgc-gold-top: #4a4a52; --mgc-gold-bot: #2b2f45; --mgc-gold-inner: rgba(255, 220, 140, .25); --mgc-gold-glow: rgba(246, 196, 83, .5);
  --mgc-tip-top: #2a4a8a; --mgc-tip-bot: #142a58; --mgc-tip-edge: #4469ae; --mgc-wing: #6f8fcf;
}
html[data-mg-skin="classic"][data-mg-theme="dark"] .ro-game-surface:not(.ro-game-chat) {
  --color-ro-window-bg: var(--mgc-panel); --color-ro-body: var(--mgc-ink); --color-ro-panel-bg: var(--mgc-panel-2); --color-ro-icon-frame: var(--mgc-border-soft);
  --color-ro-stat-label-text: var(--mgc-ink-soft); --color-ro-accent: var(--mgc-pink); --color-ro-stat-cell-light: #223a68;
}
html[data-mg-skin="classic"][data-mg-theme="dark"] .ro-slot__face { background: linear-gradient(180deg, #243d6e 0%, #182a50 100%); border-color: #3b5a95; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
html[data-mg-skin="classic"][data-mg-theme="dark"] .ro-inventory-quantity { text-shadow: 0 0 2px #000, 0 0 2px #000; color: #fff; }
html[data-mg-skin="classic"][data-mg-theme="dark"] .ro-tab-tool[aria-selected="true"] { background: var(--mgc-panel); }
html[data-mg-skin="classic"][data-mg-theme="dark"] .ro-game-chat-frame { background: linear-gradient(180deg, #213a6e 0%, #14264d 100%); }