/* Handheld Hub — dashboard neutro. Cor só nos acentos de cada console e nos estados.
   Contraste: WCAG 2.2 AA + APCA (texto secundário Lc ≥ 75). Ver docs/DECISIONS.md. */

:root {
  --bg: #f6f6f7;
  --surface: #ffffff;
  --surface-2: #f3f3f6;
  --surface-3: #ebebf0;
  --text: #111113;
  --muted: #5b5b63;   /* texto secundário: APCA Lc ≥ 75 em 13–14px, WCAG ≥ 6:1 */
  --faint: #a1a1aa;   /* só ícones decorativos, nunca texto */
  --line: #e4e4e9;    /* divisórias (não identificam controle) */
  --control: #8a8a93; /* borda de input/select/botão: WCAG 1.4.11 ≥ 3:1 */
  --focus: #2563eb;   /* anel de foco */
  --hover: #f1f1f4;
  --danger: #b91c1c;
  --warn: #b45309;
  --ok: #16a34a;
  --series: #2a78d6;  /* série única dos gráficos */
  --shadow: 0 1px 3px rgb(16 16 20 / .05), 0 1px 2px rgb(16 16 20 / .03);
  --shadow-hover: 0 10px 24px -6px rgb(16 16 20 / .10), 0 2px 6px rgb(16 16 20 / .05);
  --radius: 14px;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
  /* Acento de cada console: paleta categórica validada (dataviz) nos dois temas.
     Ordem fixa nos gráficos empilhados: Switch → S20 → Drive → Miyoo. */
  --acc-switch: #e34948; --acc-s20fe: #2a78d6; --acc-drive: #1baf7a; --acc-miyoo: #d98200; --acc-pc: #7c4ddb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09090b; --surface: #121215; --surface-2: #18181c; --surface-3: #202026;
    --text: #f4f4f6; --muted: #a1a1aa; --faint: #52525b;
    --line: #242429; --control: #6e6e77; --focus: #60a5fa; --hover: #1c1c21;
    --danger: #f87171; --warn: #fbbf24; --ok: #4ade80;
    --series: #3b82f6;
    --shadow: inset 0 1px 0 0 rgb(255 255 255 / .05), 0 2px 8px rgb(0 0 0 / .28);
    --shadow-hover: inset 0 1px 0 0 rgb(255 255 255 / .09), 0 14px 32px -8px rgb(0 0 0 / .55);
    color-scheme: dark;
    --acc-switch: #f06464; --acc-s20fe: #3b82f6; --acc-drive: #10b981; --acc-miyoo: #f59e0b; --acc-pc: #a78bfa;
  }
}
:root[data-theme="dark"] {
  --bg: #09090b; --surface: #121215; --surface-2: #18181c; --surface-3: #202026;
  --text: #f4f4f6; --muted: #a1a1aa; --faint: #52525b;
  --line: #242429; --control: #6e6e77; --focus: #60a5fa; --hover: #1c1c21;
  --danger: #f87171; --warn: #fbbf24; --ok: #4ade80;
  --series: #3b82f6;
  --shadow: inset 0 1px 0 0 rgb(255 255 255 / .05), 0 2px 8px rgb(0 0 0 / .28);
  --shadow-hover: inset 0 1px 0 0 rgb(255 255 255 / .09), 0 14px 32px -8px rgb(0 0 0 / .55);
  color-scheme: dark;
  --acc-switch: #f06464; --acc-s20fe: #3b82f6; --acc-drive: #10b981; --acc-miyoo: #f59e0b; --acc-pc: #a78bfa;
}
/* Tema escuro: fundo com um brilho bem leve nas cores da marca (menos "chapado"). Só decoração. */
:root { --glow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --glow: radial-gradient(1100px 600px at 0% -10%, rgb(59 130 246 / .08), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgb(16 185 129 / .05), transparent 60%); }
}
:root[data-theme="dark"] { --glow: radial-gradient(1100px 600px at 0% -10%, rgb(59 130 246 / .08), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgb(16 185 129 / .05), transparent 60%); }
[data-dev="switch"] { --accent: var(--acc-switch); }
[data-dev="s20fe"]  { --accent: var(--acc-s20fe); }
[data-dev="drive"]  { --accent: var(--acc-drive); }
[data-dev="miyoo"]  { --accent: var(--acc-miyoo); }
[data-dev="pc"]     { --accent: var(--acc-pc); }

@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 72px; } /* WCAG 2.4.11: foco não fica embaixo do topo fixo (celular) */
body {
  background: var(--glow), var(--bg); background-attachment: fixed; color: var(--text);
  font: 15px/1.55 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- micro-interações (fx.js liga a classe .fx; sem ela tudo aparece parado) ---------- */
.fx :is(.tile, .device, .ptile, .gcard, .htile, .phero, .page-head, .panel, .mosaic li):not(.in) { opacity: 0; }
.bar i, .barlist .track i { transform-origin: left center; }
.ptile, .gcard, .device { will-change: transform; }
.phero img { view-transition-name: platform-art; }
.ghero-cover img:not(.gplat) { view-transition-name: game-cover; }
::view-transition-group(game-cover) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }
::view-transition-group(platform-art) { animation-duration: .45s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
/* Capa carregando: brilho passando (skeleton); a imagem entra com fade quando chega. */
.gart { background: linear-gradient(100deg, #1a1a1d 30%, #2a2a2f 50%, #1a1a1d 70%) 0 0 / 300% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .gcard:not(.loaded) .gart { animation: shimmer 1.4s linear infinite; }
  .gart img { opacity: 0; transition: opacity .35s ease; }
  .gcard.loaded .gart img { opacity: 1; }
}
.gcard.loaded .gart .gplat { opacity: 1; }
@keyframes shimmer { to { background-position: -300% 0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ---------- foco e atalho ---------- */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 20; background: var(--surface); color: var(--text);
  border: 2px solid var(--focus); border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.skip:focus-visible { top: 8px; }
.gp-mode .skip { display: none !important; }
@media (max-width: 960px) { .skip { display: none !important; } }

/* ---------- menu lateral ---------- */
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 24px;
  padding: 20px 14px; border-right: 1px solid var(--line); background: var(--surface); z-index: 5;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -0.01em; padding: 4px 8px; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--text); color: var(--surface); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.nav a .ic { color: var(--faint); }
.nav a:hover { color: var(--text); background: var(--hover); }
.nav a.active { color: var(--text); background: var(--hover); font-weight: 550; }
.nav a.active .ic { color: var(--text); }
.side-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 8px; }
.scan { font-size: 13px; color: var(--muted); line-height: 1.35; }
.icon-btn { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 6px; border-radius: 6px; display: grid; place-items: center; }
.icon-btn:hover { color: var(--text); background: var(--hover); }

/* ---------- conteúdo ---------- */
.content { display: flex; flex-direction: column; min-width: 0; max-width: 100%; overflow-x: hidden; }
main { padding: 36px clamp(16px, 3vw, 56px) 64px; width: 100%; max-width: 2560px; min-width: 0; box-sizing: border-box; }
.view { display: flex; flex-direction: column; gap: 32px; min-width: 0; max-width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
h1 { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; }
h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 12px; }
h2 .ic { color: var(--faint); }
.lead { color: var(--muted); margin-top: 4px; max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* ---------- bento da visão geral: 12 colunas → 6 → 1 ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.bento .contents { display: contents; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); min-width: 0; max-width: 100%; box-sizing: border-box; }
.b-full { grid-column: 1 / -1; margin: 12px 0 -4px; }
.b-hero { grid-column: span 6; grid-row: span 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--series) 12%, var(--surface)), var(--surface) 60%); }
.b-kpi { grid-column: span 3; }
.b-dev { grid-column: span 3; }
.b-4 { grid-column: span 4; }
.b-8 { grid-column: span 8; }
.b-12 { grid-column: 1 / -1; }
.stack-plot { margin: 4px 0 16px; }
#timeline, #topSystems, #coverage { min-height: 40px; }
.hero-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hero-num { font-size: clamp(44px, 5vw, 76px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.hero-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 14px; font-weight: 550; color: var(--text);
  text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 4px; }
.hero-link:hover { text-decoration-color: var(--text); }
.ring { position: relative; width: clamp(150px, 12vw, 190px); aspect-ratio: 1; flex: none; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 10; }
.ring-bg { stroke: var(--line); }
.ring-fg { stroke: var(--series); stroke-linecap: round; }
.ring figcaption { display: grid; justify-items: center; line-height: 1.2; }
.ring b { font-size: clamp(22px, 2vw, 30px); font-weight: 700; font-variant-numeric: tabular-nums; }
.ring span { font-size: 13px; color: var(--muted); }
.ring .ring-sub { font-size: 11px; font-variant-numeric: tabular-nums; }
.health-col { display: flex; flex-direction: column; }
.health-col .health-tiles { grid-template-columns: 1fr; align-content: start; }
.mosaic { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.mosaic a { display: block; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; background: var(--hover); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
@media (prefers-reduced-motion: no-preference) { .mosaic a:hover img { transform: scale(1.06); } }
@media (min-width: 1700px) { .mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1280px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .b-hero, .b-8, .b-4, .b-12 { grid-column: span 6; }
  .b-hero { grid-row: auto; }
  .b-kpi, .b-dev { grid-column: span 3; }
}

/* ---------- indicadores ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; min-width: 0; max-width: 100%; }
.kpi .bar { margin-top: 4px; }
.kpi .bar i { background: var(--series); }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kpi-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.kpi-label .ic { color: var(--faint); }
.kpi-value { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 13px; color: var(--muted); }
.kpi.bad .kpi-value, .kpi.bad .kpi-label, .kpi.bad .kpi-label .ic { color: var(--danger); }

/* ---------- cards dos consoles (Geist + shadcn/ui + Wise) ---------- */
.devices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 1440px) { .devices { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.device {
  position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color .2s ease, box-shadow .25s ease, transform .2s cubic-bezier(.2, .7, .2, 1);
}
.device:hover {
  border-color: color-mix(in srgb, var(--accent, var(--control)) 55%, var(--line));
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.cover {
  position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden;
  background: #0e0f12; border-bottom: 1px solid var(--line); isolation: isolate;
}
.cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgb(14 15 18 / .82) 0%, rgb(14 15 18 / .18) 42%, transparent 100%),
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
}
.cover img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), filter .35s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .device:hover .cover img { transform: scale(1.045); }
}
.cover .logo-big { width: 56px; height: 56px; color: var(--accent); margin: auto; }
.cover-badges {
  position: absolute; top: 10px; left: 10px; right: 10px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 6px; pointer-events: none;
}
.cover-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 550; letter-spacing: -0.01em;
  color: #f4f4f6; background: rgb(12 12 15 / .72); border: 1px solid rgb(255 255 255 / .14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); white-space: nowrap;
}
.cover-pill .ic { width: 12px; height: 12px; }
.cover-pill.live { border-color: color-mix(in srgb, var(--ok) 55%, rgb(255 255 255 / .15)); color: #dcfce7; }
.cover-pill.warn { border-color: color-mix(in srgb, var(--warn) 55%, rgb(255 255 255 / .15)); color: #fef3c7; }

.device-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 16px; flex: 1; }
.device-head { display: grid; gap: 3px; }
.device h3.device-name { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 650; letter-spacing: -0.015em; }
.device-sub { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.device-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); z-index: 3; }
.device-link:focus-visible { outline: none; }
.device-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--faint)); box-shadow: 0 0 8px color-mix(in srgb, var(--accent, transparent) 60%, transparent); flex: none; }
.device p { color: var(--muted); font-size: 13px; }

/* Grade de métricas estilo Vercel Geist / Wise: 4 células com divisória fina */
.nums {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
}
.nums > div {
  display: flex; flex-direction: column; gap: 2px; padding: 8px 10px;
  border-right: 1px solid var(--line); min-width: 0;
}
.nums > div:last-child { border-right: 0; }
.nums dt { font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nums dd { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text); }

.meters { display: flex; flex-direction: column; gap: 10px; }
.meter + .meter { margin-top: 0; }
.meter-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12.5px; }
.meter-row span:first-child { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--text); white-space: nowrap; }
.meter-row span:last-child { color: var(--muted); font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.meter-row .ic { color: var(--faint); width: 14px; height: 14px; }
.bar { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-top: 5px; }
.bar i { display: block; height: 100%; background: var(--accent, var(--series)); border-radius: 999px; }

.device-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.device-foot .scan-meta { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.device .more {
  font-size: 12.5px; font-weight: 550; color: var(--muted);
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
  transition: color .15s, transform .15s;
}
.device:hover .more { color: var(--text); transform: translateX(2px); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500;
  padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.badge.small { font-size: 11px; padding: 1px 7px; }
.badge.mono { font-family: var(--mono); font-size: 11.5px; }
.badge.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.badge.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 38%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.badge.ok { color: var(--text); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); background: color-mix(in srgb, var(--ok) 10%, var(--surface-2)); }
.badge.ok .ic { color: var(--ok); }

/* ---------- gráficos ---------- */
.stack { display: flex; gap: 2px; height: 14px; margin: 4px 0 16px; }
.stack i { display: block; min-width: 3px; background: var(--accent); }
.stack i:first-child { border-radius: 4px 0 0 4px; }
.stack i:last-child { border-radius: 0 4px 4px 0; }
.legend { list-style: none; display: grid; gap: 8px; font-size: 14px; }
.legend li { display: grid; grid-template-columns: 12px 1fr auto 52px; align-items: center; gap: 10px; }
.legend .sw { width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.legend .num { font-variant-numeric: tabular-nums; }
.legend .pct { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }

.barlist { list-style: none; display: grid; gap: 6px; font-size: 14px; }
.barlist li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 64px; align-items: center; gap: 12px; padding: 2px 0; border-radius: 6px; }
.barlist li:hover { background: var(--hover); }
.barlist .name { font-family: var(--mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barlist a.name { font-family: inherit; font-size: 14px; text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 3px; }
a.name:hover { text-decoration-color: var(--text); }
.barlist li:has(a.name) { grid-template-columns: 140px minmax(0, 1fr) 64px; }
.barlist .track { height: 10px; }
.barlist .track i { display: block; height: 100%; background: var(--series); border-radius: 0 4px 4px 0; min-width: 2px; }
.barlist .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.barlist.cov li { grid-template-columns: 140px minmax(0, 1fr) 170px; }
.barlist.cov .num { white-space: nowrap; }
.barlist.cov .track { background: var(--line); border-radius: 4px; }
.barlist.cov .track i { border-radius: 4px; }
.chart-note { margin-top: 12px; font-size: 13px; color: var(--muted); }

.tip { position: fixed; z-index: 30; pointer-events: none; background: var(--text); color: var(--bg); font-size: 12.5px; padding: 6px 10px; border-radius: 6px; max-width: min(320px, calc(100vw - 24px)); line-height: 1.35; text-align: center; transform: translate(-50%, calc(-100% - 10px)); }

/* ---------- jogos: alternância, capas, grade ---------- */
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; border: 1px solid var(--control); border-radius: 8px; padding: 2px; background: var(--surface); }
.seg button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--muted); padding: 6px 10px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--hover); color: var(--text); font-weight: 550; }
.seg button:hover { color: var(--text); }

.thumb { width: 36px; height: 48px; flex: none; border-radius: 4px; overflow: hidden; background: var(--hover); display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .ic { width: 16px; height: 16px; color: var(--faint); }
.game-cell { display: flex; align-items: center; gap: 12px; }

.drive-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; padding: 5px 10px; border: 1px solid var(--control); border-radius: 8px; background: var(--surface); }
.drive-btn:hover { border-color: var(--text); }
.drive-btn .logo { width: 14px; height: 14px; color: var(--acc-drive); }
.drive-btn.disabled, .drive-btn:disabled { opacity: .5; cursor: not-allowed; border-color: var(--line) !important; color: var(--muted) !important; }
.drive-btn.disabled:hover, .drive-btn:disabled:hover { border-color: var(--line) !important; }
.drive-btn.disabled .logo, .drive-btn:disabled .logo { filter: grayscale(1); opacity: .7; }
.gdrive .drive-btn.disabled, .ghero .drive-btn.disabled { background: rgb(0 0 0 / .45) !important; border-color: rgb(255 255 255 / .2) !important; color: rgb(255 255 255 / .5) !important; }

.grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
@media (min-width: 2000px) { .grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }
.gcard { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #111; box-shadow: var(--shadow); isolation: isolate; }
.gart, .gart img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Capa inteira (contain) sobre uma cópia desfocada dela: caixas quadradas ou largas não deixam faixa vazia. */
.gblur { object-fit: cover; filter: blur(18px) saturate(1.2) brightness(.7); transform: scale(1.15); }
.gimg { object-fit: contain; transition: transform .3s; }
.gplat { object-fit: cover; object-position: 88% center; filter: brightness(.55); }
@media (prefers-reduced-motion: no-preference) { .gcard:hover .gimg { transform: scale(1.04); } }
/* Texto branco sobre faixa escura: contraste garantido sobre qualquer capa. */
.gover { position: absolute; inset: auto 0 0 0; z-index: 1; display: grid; gap: 4px; padding: 36px 12px 12px; color: #fff;
  background: linear-gradient(to top, rgb(0 0 0 / .9), rgb(0 0 0 / .65) 55%, transparent); }
.gcard.nocover .gover { inset: 0; align-content: end; background: linear-gradient(to top, rgb(0 0 0 / .9), rgb(0 0 0 / .35)); }
.gtitle { font-size: 14px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gcard.nocover .gtitle { -webkit-line-clamp: 4; font-size: 15px; }
.gmeta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: #e4e4ea; }
.gdots { display: inline-flex; gap: 4px; }
.gdots .dot { box-shadow: 0 0 0 1.5px rgb(0 0 0 / .5); }
.gbad { position: absolute; top: 8px; left: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 999px; background: #b91c1c; color: #fff; font-size: 12px; font-weight: 600; }
.gdrive { position: absolute; top: 8px; right: 8px; z-index: 2; opacity: 0; transition: opacity .15s; }
.gcard:hover .gdrive, .gcard:focus-within .gdrive { opacity: 1; }
@media (hover: none) { .gdrive { opacity: 1; } }
.gdrive .drive-btn { background: rgb(0 0 0 / .72); color: #fff; border-color: rgb(255 255 255 / .35); backdrop-filter: blur(6px); }
.gdrive .drive-btn:hover { border-color: #fff; }

/* ---------- plataformas (estilo dos cartões do Daijishō) ---------- */
.ptiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; }
.ptile { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #111; box-shadow: var(--shadow); }
.ptile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
@media (prefers-reduced-motion: no-preference) { .ptile:hover img { transform: scale(1.03); } }
/* Faixa escura embaixo garante contraste do texto branco sobre qualquer arte. */
.pinfo { position: absolute; inset: auto 0 0 0; display: grid; gap: 2px; padding: 28px 14px 12px; color: #fff;
  background: linear-gradient(to top, rgb(0 0 0 / .85), rgb(0 0 0 / .55) 60%, transparent); }
.pinfo b { font-size: 15px; font-weight: 650; }
.pinfo span { font-size: 13px; color: #e9e9ee; }
.ptitle { margin-top: 12px; }
.phero { position: relative; aspect-ratio: 21 / 9; max-height: 380px; width: 100%; border-radius: 16px; overflow: hidden; background: #111; box-shadow: var(--shadow); }
.phero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pbadge { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: 999px; background: rgb(0 0 0 / .72); color: #fff; font-size: 14px; font-weight: 550; }

/* ---------- chips de filtro ---------- */
.chips-bar { display: grid; gap: 8px; margin-top: -12px; }
.chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font-size: 13px; cursor: pointer; transition: border-color .15s, background .15s; }
.chip:hover { border-color: var(--control); color: var(--text); }
.chip[aria-pressed="true"] { border-color: var(--accent, var(--text)); color: var(--text); background: color-mix(in srgb, var(--accent, var(--text)) 12%, var(--surface)); font-weight: 550; }
.chip.all[aria-pressed="true"] { border-color: var(--text); background: var(--hover); }
.chip.active { border-color: var(--focus); color: var(--text); background: color-mix(in srgb, var(--focus) 10%, var(--surface)); }
.chip.ghost { border-style: dashed; }
@media (max-width: 900px) { .chips-bar { margin-top: -4px; } .chiprow { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } }

/* ---------- estados vazios e lista ---------- */
.empty { display: grid; justify-items: center; gap: 8px; padding: 40px 16px; text-align: center; color: var(--muted); }
.empty .ic { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--hover); color: var(--muted); box-sizing: content-box; }
.empty b { color: var(--text); font-size: 16px; }
.empty .btn { margin-top: 8px; }
.empty-li { grid-column: 1 / -1; }
.thsort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.thsort:hover { color: var(--text); text-decoration-color: var(--control); }
th[aria-sort="ascending"] .thsort { color: var(--text); text-decoration-color: var(--text); }
th[aria-sort="ascending"] .thsort::after { content: " ↓"; }
.num-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 1200px) { .col-wide { display: none; } }

/* ---------- ordenação ---------- */
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.tile-head h2 { margin: 0; }
.toolbar { display: flex; justify-content: flex-end; }
.sort { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.sort select { background: var(--surface); border: 1px solid var(--control); border-radius: 8px; padding: 5px 10px; font-size: 13px; }
.pgroup { grid-column: 1 / -1; margin-top: 12px; }
.pgroup h2 { margin: 0; font-size: 15px; color: var(--text); }

/* ---------- busca global e atalhos ---------- */
.searchbtn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 1px solid var(--control); border-radius: 8px;
  background: var(--bg); color: var(--muted); font-size: 14px; cursor: pointer; }
.searchbtn:hover { color: var(--text); border-color: var(--text); }
.searchbtn span { flex: 1; text-align: left; }
kbd { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border: 1px solid var(--control); border-bottom-width: 2px; border-radius: 5px; color: var(--muted); background: var(--surface); }
.qmark { font-weight: 700; font-size: 15px; width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; font-size: 12px; }
.palette { margin: 10vh auto auto; width: min(680px, calc(100% - 24px)); max-height: 72vh; padding: 0; border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgb(0 0 0 / .35); overflow: hidden; }
.palette[open] { display: flex; flex-direction: column; }
.palette::backdrop { background: rgb(0 0 0 / .45); backdrop-filter: blur(3px); }
@media (prefers-reduced-motion: no-preference) {
  .palette[open] { animation: pal-in .18s cubic-bezier(.2, .7, .2, 1); }
  @keyframes pal-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
}
.pal-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.pal-head .ic { color: var(--muted); }
.pal-head input { flex: 1; border: 0; background: none; font-size: 17px; outline: none; }
.pal-head input:focus-visible { outline: none; }
.pal-list { list-style: none; overflow-y: auto; padding: 6px; flex: 1; }
.pal-group { padding: 10px 10px 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.pal-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.pal-item[aria-selected="true"] { background: var(--hover); box-shadow: inset 2px 0 0 var(--focus); }
.pal-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 6px; overflow: hidden; background: var(--hover); color: var(--muted); }
.pal-ico img { width: 100%; height: 100%; object-fit: cover; }
.pal-txt { display: grid; min-width: 0; flex: 1; }
.pal-txt b { font-weight: 550; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-txt span { font-size: 12px; color: var(--muted); }
.pal-empty { padding: 24px; text-align: center; color: var(--muted); }
.pal-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.pal-foot span { display: inline-flex; gap: 4px; align-items: center; }
.shortcuts { padding: 20px 24px; gap: 14px; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; font-size: 14px; align-items: center; }
.keys dt { white-space: nowrap; }
.keys-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
@media (max-width: 900px) {
  .searchbtn { width: auto; flex: 1; padding: 7px 10px; margin-left: 4px; }
  .searchbtn kbd { display: none; }
  #helpBtn { display: none; }
  .palette { margin-top: 8px; max-height: 85vh; }
}

/* ---------- página do jogo ---------- */
/* Cartão inteiro clicável com o mouse (.gfull, fora da ordem do Tab); o título é o link para teclado e leitor de tela. */
.gfull { position: absolute; inset: 0; z-index: 1; }
.gover { pointer-events: none; }
.gover a { pointer-events: auto; }
.gcard .glink { color: #fff; text-decoration: none; }
.gcard .glink:focus-visible { outline: none; }
.gcard:has(.glink:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.tlink { text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 3px; }
.ghero { position: relative; border-radius: 18px; overflow: hidden; background: #111; isolation: isolate; color: #fff; }
.ghero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(1.3) brightness(.45); transform: scale(1.2); z-index: -1; }
.ghero-in { padding: clamp(16px, 3vw, 36px); }
.ghero .back { color: #e4e4ea; }
.ghero .back:hover { color: #fff; }
.ghero-grid { display: grid; grid-template-columns: minmax(140px, 260px) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: end; margin-top: 16px; }
.ghero-cover { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 20px 40px rgb(0 0 0 / .45); }
.ghero-cover img { width: 100%; height: 100%; object-fit: contain; }
.ghero-text { display: grid; gap: 12px; justify-items: start; }
.ghero h1 { font-size: clamp(26px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.03em; }
.gsub { color: #e4e4ea; font-size: 15px; }
.pchip { font-size: 13px; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / .14); color: #fff; }
.gactions { display: flex; flex-wrap: wrap; gap: 8px; }
.ghero .drive-btn { background: rgb(0 0 0 / .55); color: #fff; border-color: rgb(255 255 255 / .35); font-size: 14px; padding: 8px 14px; }
.ghero .drive-btn:hover { border-color: #fff; }
.ghero .badge.bad { background: #b91c1c; color: #fff; border-color: transparent; }
.ggrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.where-list { list-style: none; display: grid; gap: 10px; font-size: 14px; }
.where-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.where-list li:last-child { border-bottom: 0; padding-bottom: 0; }
#gcodes details { border-top: 1px solid var(--line); padding: 10px 0; }
#gcodes summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.codes { list-style: none; display: grid; gap: 2px; margin-top: 8px; max-height: 420px; overflow-y: auto; }
.codes li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 6px 4px; border-radius: 6px; font-size: 14px; }
.codes li:hover { background: var(--hover); }
.codes code { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.copy { font-size: 12px; padding: 3px 10px; border: 1px solid var(--control); border-radius: 6px; background: var(--surface); cursor: pointer; }
.copy:hover { border-color: var(--text); }
@media (max-width: 900px) {
  .ghero-grid { grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
  .codes li { grid-template-columns: minmax(0, 1fr) auto; }
  .codes code { grid-column: 1 / -1; order: 3; }
}

/* ---------- bandeiras de região ---------- */
.flags { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-left: 4px; }
.flag { width: 16px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .15); object-fit: cover; flex: none; }
.flag.globe { display: inline-grid; place-items: center; box-shadow: none; color: inherit; }
.flag.globe .ic { width: 13px; height: 13px; }
.gmeta .flags { margin-left: 6px; }
.gregions { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: #e4e4ea; }
.gregions span { display: inline-flex; align-items: center; gap: 6px; }
.gregions .flag { width: 20px; height: 15px; }

/* ---------- cópias na página do jogo ---------- */
.gwarn { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; font-size: 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.gwarn .ic { color: var(--danger); margin-top: 2px; }
.copies-table th, .copies-table td { padding: 8px 10px; }
.copies-table th:first-child, .copies-table td:first-child { padding-left: 0; }
.cell-dev { display: inline-flex; align-items: center; gap: 8px; }
.ggrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.ggrid > * { min-width: 0; }                                  /* conteúdo largo não estica a coluna */
.ggrid > :only-child { grid-column: 1 / -1; }                 /* jogo sem ficha nem texto: a tabela usa a largura toda */
@media (max-width: 1100px) { .ggrid { grid-template-columns: 1fr; } }

/* ---------- faixa "Mais de" na página do jogo ---------- */
.morerow { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(130px, 150px); gap: 12px;
  overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.morerow li { scroll-snap-align: start; }
.morerow a { display: grid; gap: 6px; font-size: 13px; }
.morerow img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--hover); box-shadow: var(--shadow); transition: transform .2s; }
.morerow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { .morerow a:hover img { transform: translateY(-3px); } }
.morerow a:hover span { color: var(--text); }

/* ---------- listas, vistos e navegação entre jogos ---------- */
.listbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; padding: 8px 14px; border-radius: 8px; cursor: pointer;
  background: rgb(0 0 0 / .55); color: #fff; border: 1px solid rgb(255 255 255 / .35); }
.listbtn:hover { border-color: #fff; }
.listbtn[aria-pressed="true"] { background: #fff; color: #111; border-color: #fff; font-weight: 600; }
.listbtn[aria-pressed="true"] .ic { fill: currentColor; }
.gfav { position: absolute; top: 8px; left: 8px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgb(0 0 0 / .65); color: #ffd84d; }
.gfav .ic { fill: currentColor; width: 14px; height: 14px; }
.gcard:has(.gbad) .gfav { top: 36px; }
.gra { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgb(0 0 0 / .65); color: #ffd84d; transition: opacity .15s; }
.gra .ic { width: 14px; height: 14px; }
.gcard:hover .gra, .gcard:focus-within .gra { opacity: 0; }   /* no hover, o botão do Drive ocupa o canto */
@media (hover: none) { .gra { top: 44px; } }
.gnav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gstep { display: inline-flex; align-items: center; gap: 10px; color: #e4e4ea; }
.gstep .muted { color: #e4e4ea; }
.stepbtn { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; padding: 5px 10px; border-radius: 8px; color: #fff;
  border: 1px solid rgb(255 255 255 / .3); background: rgb(0 0 0 / .4); }
.stepbtn:hover { border-color: #fff; }
.mine-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mine h3 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.mine .morerow { grid-auto-columns: minmax(96px, 110px); }
.mine-empty { padding: 20px 0; }
@media (max-width: 900px) { .mine-grid { grid-template-columns: minmax(0, 1fr); } .stepbtn span { display: none; } }

/* ---------- minhas listas ---------- */
.seg.tabs { flex-wrap: wrap; }
.seg.tabs button .muted { font-variant-numeric: tabular-nums; }
.list-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.list-actions label.btn { cursor: pointer; }
#listImport:focus-visible + * , .list-actions label.btn:focus-within { outline: 2px solid var(--focus); }
#minePlayingWrap { margin-bottom: 20px; }
.mine .morerow.playing { grid-auto-columns: minmax(130px, 150px); }

/* ---------- RetroAchievements ---------- */
.ra-off { display: none !important; }  /* sem dados do RA (ex.: teste sem Worker) */
.ra-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.ra-head > div { display: grid; }
.ra-avatar { width: 44px; height: 44px; border-radius: 10px; }
.ra-now { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 13px;
  background: color-mix(in srgb, var(--ok) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent); }
.ra-head .tlink { margin-left: auto; }
.ra-recent { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.ra-recent a { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; padding: 8px; border-radius: 10px; border: 1px solid var(--line); }
.ra-recent a:hover { border-color: var(--control); background: var(--hover); }
.ra-recent img { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 6px; background: var(--hover); }
.ra-t { font-size: 14px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-s { font-size: 12px; color: var(--muted); }
.ra-p { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ra-p .bar, .ra-progress .bar { flex: 1; margin: 0; height: 5px; }
.ra-p .bar i, .ra-progress .bar i { background: var(--ok); }
.ra-sub { font-size: 14px; font-weight: 600; margin: 18px 0 8px; }
.ra-ach { max-height: none; }
.ra-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ach { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px; max-height: 520px; overflow-y: auto; }
.ach li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; border-radius: 8px; }
.ach li:hover { background: var(--hover); }
.ach img { width: 40px; height: 40px; border-radius: 6px; filter: grayscale(1) opacity(.55); }
.ach li.on img { filter: none; box-shadow: 0 0 0 2px var(--ok); }
.ach li > span:nth-child(2) { display: grid; font-size: 13px; }
.ach-pts { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- personalizar ---------- */
.layout-list { list-style: none; display: grid; gap: 4px; }
.layout-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px; border-radius: 8px; }
.layout-list li:hover { background: var(--hover); }
.layout-list label { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.layout-list .icon-btn { width: 30px; height: 30px; font-size: 15px; }
.layout-list .icon-btn:disabled { opacity: .3; cursor: default; }
.layout-actions { display: flex; justify-content: space-between; gap: 8px; }
.leave { width: min(460px, calc(100% - 24px)); }
.themes-dlg { width: min(860px, calc(100% - 24px)); max-height: 86vh; }
.theme-filter { width: 100%; padding: 8px 12px; border: 1px solid var(--control); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.theme-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; overflow-y: auto; min-height: 0; padding: 2px; }
.theme-opt { display: grid; gap: 6px; width: 100%; text-align: left; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: none; color: var(--text); cursor: pointer; font: inherit; }
.theme-opt img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--hover); }
.theme-opt > span { display: grid; gap: 2px; padding: 0 4px 4px; font-size: 14px; }
.theme-opt:hover { border-color: var(--control); background: var(--hover); }
.theme-opt[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
#themeBtn { display: inline-flex; align-items: center; gap: 8px; }
.page-head:has(#themeBtn) { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.leave .leave-url { overflow-wrap: anywhere; margin-top: -6px; }
.leave .layout-actions { justify-content: flex-end; }
.portfolio-demo { width: min(480px, calc(100% - 24px)); }
.portfolio-demo p { line-height: 1.5; }
.portfolio-demo .layout-actions { justify-content: flex-end; gap: 10px; margin-top: 14px; }
.showcase-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--hover); border: 1px solid var(--line); border-radius: 10px; font-size: 13.5px; margin-bottom: 14px; line-height: 1.4; }
.showcase-banner a { color: var(--text); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- comparar ---------- */
.cmp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cmprows { list-style: none; display: grid; gap: 6px; }
.cmprows li { display: grid; grid-template-columns: 160px minmax(0, 1fr) 150px; align-items: center; gap: 12px; }
.cmpsys { background: none; border: 0; padding: 4px 6px; border-radius: 6px; text-align: left; font: inherit; font-size: 14px; color: var(--text); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 3px; }
.cmpsys:hover { background: var(--hover); }
.cmpsys.on { background: var(--hover); font-weight: 600; text-decoration-color: var(--text); }
.cmpbar { display: flex; gap: 2px; height: 12px; }
.cmpbar i { display: block; min-width: 0; background: var(--accent); }
.cmpbar i.both { background: var(--control); opacity: .45; }
.cmpbar i:first-child { border-radius: 4px 0 0 4px; } .cmpbar i:last-child { border-radius: 0 4px 4px 0; }
.cmpnum { font-size: 13px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cmpnum b { color: var(--text); font-weight: 600; }
#view-compare .kpi .dot { width: 10px; height: 10px; }
#view-compare .seg button { white-space: nowrap; }
@media (max-width: 900px) {
  .cmprows li { grid-template-columns: 1fr auto; }
  .cmpbar { grid-column: 1 / -1; order: 3; }
}

/* ---------- sobre a plataforma ---------- */
.pabout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; }
.pabout:empty { display: none; }
.prose p { line-height: 1.65; max-width: 72ch; }
.prose p + p { margin-top: 10px; }
.pabout:not(.open) .more-p, .gabout:not(.open) .more-p { display: none; }
/* Fechado, o primeiro parágrafo mostra até 4 linhas (o texto da Wikipédia empurrava a lista de jogos para baixo). */
.pabout:not(.open) .prose p:first-child, .gabout:not(.open) .prose p:first-child { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.linkbtn { margin-top: 8px; background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 550; color: var(--text); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 3px; }
.credit { margin-top: 12px; }
.pabout .kv dd { text-align: right; }
@media (max-width: 1100px) { .pabout { grid-template-columns: 1fr; } }

/* ---------- saúde ---------- */
.view-stack { display: grid; gap: 16px; min-width: 0; max-width: 100%; }
.small-btn { margin-top: 8px; font-size: 13px; padding: 5px 12px; }
.fixgroups details { border-top: 1px solid var(--line); padding: 12px 0; }
.fixgroups summary { cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fix { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 999px; border: 1px solid; }
/* Texto sempre na cor normal (contraste garantido); a cor do estado vai na borda e no fundo. */
.fix { color: var(--text); }
.fix.ok { border-color: color-mix(in srgb, var(--ok) 60%, transparent); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.fix.warn { border-color: color-mix(in srgb, var(--acc-miyoo) 70%, transparent); background: color-mix(in srgb, var(--acc-miyoo) 16%, transparent); }
.fix.bad { border-color: color-mix(in srgb, var(--danger) 60%, transparent); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.fixlist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; }
.fixlist li .fix { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 900px) { .fixlist li { grid-template-columns: 1fr; } .fixlist li .fix { grid-column: 1; grid-row: auto; justify-self: start; } }

.health-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.htile { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); }
.htile:hover { border-color: var(--control); }
.htile .ic { color: var(--muted); margin-top: 2px; }
.htile.bad .ic, .htile.bad b { color: var(--danger); }
.htile b { display: block; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.htile span { font-size: 13px; color: var(--muted); }

/* ---------- detalhe ---------- */
.back { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--muted); }
.back:hover { color: var(--text); }
.detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: center; margin-top: 14px; }
.detail-head { display: flex; align-items: center; gap: 12px; }
.detail-head .dot { width: 12px; height: 12px; }
.detail-hero .cover { aspect-ratio: 16 / 9; height: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.detail-hero .cover img { width: 100%; height: 100%; object-fit: cover; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; font-size: 14px; }
.kv dt { color: var(--muted); }
.kv dd { text-align: right; }
.sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 28px 32px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-size: 13px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.source { font-size: 13px; color: var(--muted); }

/* ---------- jogos ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters input, .filters select {
  background: var(--surface); border: 1px solid var(--control); border-radius: 8px; padding: 8px 12px; font-size: 14px;
}
.filters input:focus-visible, .filters select:focus-visible { border-color: var(--focus); outline-offset: 0; border-radius: 8px; }
.search { position: relative; flex: 1 1 280px; display: flex; }
.search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.filters .search input { flex: 1; padding-left: 36px; }
.table-wrap { padding: 0; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.xscroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.xscroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { position: sticky; top: 0; z-index: 1; text-align: left; font-weight: 550; color: var(--muted); font-size: 13px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.table td { padding: 10px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--hover); }
#portsTable, #epicTable { min-width: 760px; }
#portsTable th, #portsTable td,
#epicTable th, #epicTable td { padding: 8px 12px; font-size: 13.5px; }
.port-state-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; line-height: 1.35; letter-spacing: -0.01em; vertical-align: middle; }
.port-state-badge.state-installed { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.port-state-badge.state-ready { background: color-mix(in srgb, var(--series) 22%, transparent); color: #38bdf8; border: 1px solid color-mix(in srgb, var(--series) 45%, transparent); font-weight: 650; box-shadow: 0 0 8px color-mix(in srgb, var(--series) 25%, transparent); }
.port-state-badge.state-update { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); font-weight: 650; }
.port-state-badge.state-pc { background: color-mix(in srgb, #a855f7 16%, transparent); color: #c084fc; border: 1px solid color-mix(in srgb, #a855f7 32%, transparent); }
.port-state-badge.state-decomp-ready { background: color-mix(in srgb, #06b6d4 15%, transparent); color: #22d3ee; border: 1px solid color-mix(in srgb, #06b6d4 35%, transparent); }
.port-state-badge.state-decomp-wip { background: color-mix(in srgb, var(--muted) 10%, transparent); color: var(--muted); border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); opacity: 0.9; }
.table .sys { color: var(--muted); font-family: var(--mono); font-size: 13px; }
.copies { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.copies span { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px 1px 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); }
.copies .bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn { align-self: flex-start; background: var(--surface); border: 1px solid var(--control); border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.btn:hover { border-color: var(--text); }
.btn { display: inline-flex; align-items: center; gap: 8px; }
.btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.btn.primary:hover { opacity: .9; }

.list { list-style: none; font-size: 14px; max-height: 480px; overflow-y: auto; }
.list li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.list li span:last-child { color: var(--muted); white-space: nowrap; font-size: 13px; }

footer { border-top: 1px solid var(--line); padding: 20px clamp(16px, 3vw, 56px); font-size: 13px; color: var(--muted); display: grid; gap: 4px; margin-top: auto; }

/* ---------- ícones (Lucide, grade 24) e logos (Simple Icons) ---------- */
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic.sm { width: 16px; height: 16px; stroke-width: 2.25; }
.logo { height: 18px; width: 18px; flex: none; fill: currentColor; color: var(--muted); }
.logo.wide { width: 60px; height: 12px; }

/* ---------- celular e portátil horizontal (GameSir X5 Lite) ---------- */
@media (max-width: 900px) {
  body { display: block; }
  .side { position: sticky; top: env(safe-area-inset-top, 0px); height: 52px; flex-direction: row; align-items: center; gap: 8px; padding: 0 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .brand { padding: 0; gap: 8px; font-size: 15px; }
  /* Navegação na base da tela em linha única (7 abas). */
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px;
    background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--line);
    padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px)); }
  .nav a { flex-direction: column; justify-content: center; gap: 2px; padding: 5px 2px; font-size: 10px; border-radius: 8px; min-width: 0; }
  .nav a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .nav a .ic { display: block; width: 18px; height: 18px; }
  .nav a.active { background: var(--hover); }
  .nav a[data-view="compare"] { display: none; }
  body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); }
  .side-foot { margin: 0; padding: 0; }
  .scan { display: none; }
  main { padding: 20px 14px 48px; }
  footer { padding: 20px 16px; }
  .grid-2, .detail-grid, .detail-hero, .devices { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .b-hero, .b-8, .b-4, .b-12, .b-dev { grid-column: 1 / -1; }
  .b-kpi { grid-column: span 1; }
  .b-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
  .kpi-value { font-size: 24px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi-value { font-size: 24px; }
  .detail-hero .cover { order: -1; aspect-ratio: 16 / 9; height: auto; }
  .table th { top: 52px; }
  #gamesTable th:nth-child(2), #gamesTable td:nth-child(2) { display: none; }
  .table .col-wide { display: none; }
  .barlist li { grid-template-columns: 80px minmax(0, 1fr) 56px; }
  .barlist.cov li { grid-template-columns: 72px minmax(0, 1fr) 118px; }
  .nums > div { padding: 7px 8px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gdrive { opacity: 1; }
  .seg { order: -1; }
  .filters select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  .search { flex-basis: 100%; }
}

/* Modo console portátil horizontal (ex.: S20 FE + GameSir X5 Lite em landscape):
   barras compactas e 2 cards de consoles lado a lado cabendo 100% na tela. */
@media (max-width: 960px) and (max-height: 520px) {
  .side { height: 42px; padding: 0 12px; gap: 8px; }
  .brand { font-size: 14px; padding: 2px 4px; }
  .brand-mark { width: 24px; height: 24px; border-radius: 6px; }
  .searchbtn { padding: 4px 10px; font-size: 12.5px; max-width: 150px; flex: 0 1 150px; }
  .nav { padding: 3px 8px calc(3px + env(safe-area-inset-bottom, 0px)); }
  .nav a { flex-direction: row; gap: 5px; padding: 5px 6px; font-size: 11.5px; }
  .nav a .ic { width: 15px; height: 15px; }
  body { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
  main { padding: 10px 14px 28px; }
  .view { gap: 12px; }
  h1 { font-size: 19px; }
  .page-head .lead { display: none; }
  #view-overview > .page-head,
  #view-overview h2[data-part="consoles"],
  #view-games > .page-head,
  #view-ports > .page-head,
  #view-epic > .page-head { display: none; }
  .bento, .view-stack { gap: 8px; }
  .b-full { margin: 2px 0 -6px; }
  .b-dev { grid-column: span 1; }
  .device .cover { aspect-ratio: auto; height: 114px; }
  .cover-badges { top: 7px; left: 8px; right: 8px; }
  .cover-pill { padding: 2px 7px; font-size: 10.5px; }
  .device-body { padding: 9px 12px 10px; gap: 7px; }
  .device h3.device-name { font-size: 15px; }
  .device-sub { font-size: 11.5px; }
  .nums > div { padding: 4px 7px; gap: 1px; }
  .nums dt { font-size: 10px; }
  .nums dd { font-size: 13.5px; }
  .meters { gap: 5px; }
  .meter-row { font-size: 11.5px; }
  .meter-row span:last-child { font-size: 10.5px; }
  .bar { height: 5px; margin-top: 3px; }
  .device-foot { padding-top: 6px; }
  .device-foot .scan-meta, .device .more { font-size: 11.5px; }
  .detail-hero { grid-template-columns: minmax(0, 1fr) 250px; align-items: center; gap: 16px; margin-top: 4px; }
  .detail-hero .cover { order: 0; aspect-ratio: 16 / 9; height: 140px; border-radius: 12px; border: 1px solid var(--line); }
  .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kpis { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
  .kpi:last-child:nth-child(odd) { grid-column: auto; }
  .kpi { padding: 6px 10px; gap: 1px; border-radius: 10px; }
  .kpi-label { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kpi-value { font-size: 16px; line-height: 1.15; }
  .kpi-sub { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #portsBody .tile, #epicBody .tile { padding: 8px 12px; }
  #portsBody .tile-head, #epicBody .tile-head { gap: 8px !important; flex-wrap: nowrap !important; align-items: center !important; }
  #portsBody .tile-head > div:last-child, #epicBody .tile-head > div:last-child { flex-wrap: nowrap !important; gap: 6px !important; flex-shrink: 0; }
  #portsTabs, #epicTabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; padding: 2px; }
  #portsTabs button, #epicTabs button { padding: 4px 8px; font-size: 11px; white-space: nowrap; }
  #portsRefreshBtn, #epicRefreshBtn { white-space: nowrap; padding: 4px 8px; font-size: 11px; }
  #epicSearchInput, #portsSearchInput { min-width: 120px !important; width: 135px; padding: 4px 8px !important; font-size: 11px; }
  #epicSortSelect, #portsSortSelect { max-width: 135px; padding: 4px 6px !important; font-size: 11px; }
  #epicBody .tile-head + .muted.small, #portsBody .tile-head + .muted.small { display: none !important; }
  #portsBody .table-wrap, #epicBody .table-wrap { margin-top: 4px !important; }
  .table th { padding: 4px 8px; font-size: 10.5px; white-space: nowrap; }
  .table td { padding: 4px 8px; font-size: 12px; vertical-align: middle; }
  #portsTable td, #epicTable td { white-space: nowrap; }
  #portsTable td .muted.small, #epicTable td .muted.small { max-width: 195px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #portsTable td img, #epicTable td img { width: 28px !important; height: 28px !important; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .ghero-in { padding: 12px 16px; gap: 8px; }
  .ghero-grid { grid-template-columns: 108px minmax(0, 1fr); gap: 16px; align-items: center; }
  .ghero-cover { width: 108px; }
  .ghero h1 { font-size: 21px; }
  .gactions { gap: 6px; }
  .listbtn, .drive-btn { padding: 6px 10px; font-size: 12.5px; }
}

/* Lista recolhível (clampList): até 6 itens, o resto aparece com "Mostrar mais". */
.clamped:not(.open) > li:nth-child(n + 7) { display: none; }
.more-btn { margin-top: 10px; }

/* Filtros de Jogos: no desktop os seletores ficam em linha; em tela estreita vão para trás do botão "Filtros". */
.fmore { display: contents; }
.fmore-btn { display: none; }
@media (max-width: 900px) {
  .fmore-btn { display: inline-flex; align-items: center; gap: 6px; align-self: stretch; }
  .fmore { display: none; width: 100%; flex-wrap: wrap; gap: 8px; }
  .fmore.open { display: flex; }
  .filters .search { flex: 1 1 0; min-width: 0; }          /* busca e "Filtros" na mesma linha */
}

/* Barra de carregamento no topo enquanto o catálogo chega (some ao terminar). */
.boot { position: fixed; inset: 0 0 auto; height: 3px; z-index: 100; overflow: hidden; background: color-mix(in srgb, var(--text) 10%, transparent); }
.boot::after { content: ""; position: absolute; inset: 0; width: 35%; background: var(--focus); border-radius: 3px; }
@media (prefers-reduced-motion: no-preference) { .boot::after { animation: boot 1.1s ease-in-out infinite; } }
@keyframes boot { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.boot.failed::after { width: 100%; background: var(--danger); animation: none; }

/* "Voltar ao topo" nas listas longas (aparece depois de duas telas de rolagem). */
.totop { position: fixed; right: 20px; bottom: 20px; z-index: 9; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px;
  border: 1px solid var(--control); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 14px; cursor: pointer; box-shadow: 0 4px 16px rgb(0 0 0 / .18); }
.totop svg { transform: rotate(90deg); }
.totop:hover { background: var(--hover); }
@media (max-width: 900px) { .totop { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); right: 12px; } }

.totop[hidden] { display: none; }                  /* o display do botão venceria o atributo hidden */
/* Topo do jogo no celular: capa pequena ao lado do título; botões na largura toda, em duas colunas. */
@media (max-width: 600px) {
  .ghero-grid { grid-template-columns: 96px minmax(0, 1fr); align-items: start; column-gap: 14px; row-gap: 10px; }
  .ghero-text { display: contents; }
  .ghero-cover { grid-column: 1; grid-row: 1 / span 4; align-self: start; }
  .ghero-text > * { grid-column: 2; }
  .ghero-text > :not(.gactions) { justify-self: start; }
  .ghero-text > .gactions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .ghero-text > .gactions > * { justify-content: center; width: 100%; }
  .ghero h1 { font-size: 24px; }
}

/* Entre os aparelhos: combinações de lugares (barras) e "pronto para instalar" por console. */
.rel-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 1100px) { .rel-grid { grid-template-columns: minmax(0, 1fr); } }
.rel-h { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.combos { list-style: none; display: grid; gap: 4px; }
.combo { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "devs tag n" "bar bar bar"; gap: 6px 12px; align-items: center;
  padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s; }
.combo:hover { background: var(--hover); border-color: var(--line); }
.combo:active { transform: scale(.99); }
.combo-devs { grid-area: devs; display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 550; min-width: 0; }
.combo-devs span { margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-devs .dot { margin: 0; }
.combo-devs .dot + .dot { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.combo-tag { grid-area: tag; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.combo-tag.ok { color: var(--ok); }
.combo-tag.warn { color: var(--danger); font-weight: 550; }
.combo-n { grid-area: n; font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.combo .bar { grid-area: bar; margin: 0; }
.installs { display: grid; gap: 12px; }
.install { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; border-left: 3px solid var(--accent, var(--series));
  transition: border-color .15s, box-shadow .2s, transform .2s; }
.install:hover { border-color: var(--control); border-left-color: var(--accent, var(--series)); box-shadow: 0 6px 20px rgb(0 0 0 / .12); transform: translateY(-1px); }
.install header { display: flex; align-items: center; gap: 8px; }
.install header .muted { margin-left: auto; }
.install-n .kpi-value { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.install .bar.over i { background: var(--danger); }
.install .btn { justify-self: start; margin-top: 4px; }
.combo:has(.combo-tag.warn) .bar i { background: var(--danger); }   /* sem backup: o risco salta aos olhos */

/* Mapa plataforma × aparelho: sombra na cor da série, proporcional à fatia (o número sempre escrito). */
.matrix th[data-dev] { white-space: nowrap; }
.matrix th[data-dev] .dot { margin-right: 6px; }
.matrix td.mcell { padding: 2px; text-align: center; background: color-mix(in srgb, var(--series) calc(var(--share) * .55), transparent); font-variant-numeric: tabular-nums; }
.matrix td.mcell button { width: 100%; min-height: 36px; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; border-radius: 6px; }
.matrix td.mcell button:hover { outline: 2px solid var(--control); }
#matrixMore { margin-top: 12px; }
.matrix tbody th { position: static; font-weight: 550; text-align: left; white-space: nowrap; }   /* só o cabeçalho de colunas fica fixo */

/* ---------- Microinterações ---------- */
/* Resposta ao toque: tudo que é clicável "afunda" um pouco ao pressionar. */
@media (prefers-reduced-motion: no-preference) {
  .btn, .chip, .listbtn, .drive-btn, .seg button, .theme-opt, .combo, .icon-btn, .nav a, .more-btn, .totop { transition: transform .12s ease, background-color .15s, border-color .15s, color .15s, box-shadow .2s; }
  .btn:active, .chip:active, .listbtn:active, .drive-btn:active, .seg button:active, .theme-opt:active, .icon-btn:active, .nav a:active, .totop:active { transform: scale(.96); }
  .gcard img, .ptile img { transition: transform .35s cubic-bezier(.2, .7, .2, 1), filter .35s; }
  .gcard:hover img, .ptile:hover img { transform: scale(1.04); }
  .listbtn.pop svg { animation: pop .38s cubic-bezier(.3, 1.6, .5, 1); }
  .toast { animation: toast-in .24s cubic-bezier(.2, .7, .2, 1); }
  .toast.out { animation: toast-out .2s ease forwards; }
}
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.45) rotate(-8deg); } 100% { transform: scale(1); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
.listbtn[aria-pressed="true"] svg { fill: currentColor; fill-opacity: .25; }
/* Aviso (toast) no rodapé, acima da barra do celular. */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; width: min(440px, calc(100% - 24px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border-radius: 12px; background: var(--text); color: var(--bg);
  box-shadow: 0 10px 30px rgb(0 0 0 / .3); font-size: 14px; }
.toast span { flex: 1; }
.toast-undo { border: 0; background: none; color: inherit; font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 6px 4px; }
@media (max-width: 900px) { .toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* Configurações: linhas "rótulo + controle", uma seção por assunto. */
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; align-items: start; }
.settings h2 { margin-bottom: 6px; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.srow:first-of-type { border-top: 0; }
.srow > div:first-child { display: grid; gap: 2px; min-width: 0; }
.srow select { padding: 8px 12px; border: 1px solid var(--control); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.trusted { list-style: none; display: grid; gap: 6px; margin-top: 10px; }
.trusted li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn.danger { color: var(--danger); border-color: var(--danger); }
/* Interruptor (checkbox nativo, acessível) */
.switch input { appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--line); border: 1px solid var(--control); position: relative; cursor: pointer; transition: background .2s; }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1); }
.switch input:checked { background: var(--ok); border-color: var(--ok); }
.switch input:checked::after { transform: translateX(18px); }
.switch input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#settingsBtn { display: inline-grid; place-items: center; }
.srow > * { order: 0 !important; }                      /* a ordem dos filtros de Jogos não vale aqui */
.srow { flex-wrap: wrap; }

/* Continuar jogando: faixa com a capa desfocada ao fundo (estilo tela inicial de console). */
.cont { position: relative; overflow: hidden; padding: 0; isolation: isolate; background: #111; color: #fff; border: 0; }
.cont-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(36px) saturate(1.4) brightness(.5); transform: scale(1.25); z-index: -1; }
.cont-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(14px, 2.5vw, 28px); padding: clamp(14px, 2.5vw, 24px); color: inherit; text-decoration: none; }
.cont-cover { width: clamp(72px, 9vw, 110px); aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 12px 30px rgb(0 0 0 / .45); }
.cont-cover img { width: 100%; height: 100%; object-fit: cover; }
.cont-text { display: grid; gap: 6px; min-width: 0; }
.cont-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #e4e4ea; }
.cont-title { font-size: clamp(20px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cont-sub { font-size: 14px; color: #e4e4ea; }
.cont .bar { max-width: 320px; background: rgb(255 255 255 / .2); }
.cont .bar i { background: #4ade80; }
.cont-go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgb(255 255 255 / .14); transition: background .2s, transform .2s; }
.cont-in:hover .cont-go { background: rgb(255 255 255 / .26); transform: translateX(3px); }
.cont-in:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 16px; }
@media (prefers-reduced-motion: no-preference) { .cont-in:hover .cont-cover { transform: translateY(-2px) scale(1.02); } .cont-cover { transition: transform .3s cubic-bezier(.2, .7, .2, 1); } }
.gwhere { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; background: var(--hover); }
.gwhere b { font-weight: 600; }

/* Página do aparelho: cartões de relação (clicáveis) e jogos em comum. */
.rel-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; align-content: start; }
.relcard { display: grid; gap: 4px; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; }
.relcard .kpi-value { font-size: 28px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.relcard:hover:not(:disabled) { border-color: var(--control); background: var(--hover); }
.relcard:disabled { cursor: default; opacity: .75; }
.relcard.warn { border-color: var(--danger); }
.relcard.warn .kpi-value { color: var(--danger); }
.relcard:not(:disabled) .small:last-child { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--control); }
#devRel .barlist li { grid-template-columns: 120px minmax(0, 1fr) auto; }
#devRel .bl-label { display: inline-flex; align-items: center; gap: 6px; }
#devRel .bl-n { font-variant-numeric: tabular-nums; text-align: right; }

/* Admin */
#adminBody { display: grid; gap: 16px; }
.howto { margin-top: 14px; font-size: 14px; }
.howto summary { cursor: pointer; font-weight: 550; }
.howto ol { margin: 10px 0 0 20px; display: grid; gap: 6px; line-height: 1.5; }
.routines { list-style: none; display: grid; gap: 10px; }
.routines li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.routines li:last-child { border-bottom: 0; }
.routines code { grid-column: 1; font-family: var(--mono); font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.routines .copy { grid-column: 2; grid-row: 1 / span 2; }
.ra-field { display: inline-flex; gap: 8px; }
.ra-field input { width: 190px; padding: 8px 12px; border: 1px solid var(--control); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }

/* ---------- telemetria ao vivo (S20 FE · Linear / Geist / Wise) ---------- */
.live-tile {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 260px at 0% 0%, color-mix(in srgb, var(--acc-s20fe) 10%, transparent), transparent 65%),
    var(--surface);
}
.live-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.live-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.live-title h2 { margin: 0; font-size: 15px; font-weight: 650; color: var(--text); letter-spacing: -0.01em; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot { animation: live-pulse 2.4s ease-in-out infinite; }
  @keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 25%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 6%, transparent); }
  }
}
.live-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.live-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px;
}
@media (max-width: 1100px) { .live-grid { grid-template-columns: 1fr; } }
.live-col {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.live-col h3 {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0;
}
.live-col h3 .ic { color: var(--acc-s20fe); width: 15px; height: 15px; }
.live-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.live-item {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--line); font-size: 13.5px; isolation: isolate;
  transition: border-color .15s ease;
}
.live-item:hover { border-color: var(--control); }
.live-fill {
  position: absolute; inset: 0 auto 0 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--acc-s20fe) 14%, transparent), color-mix(in srgb, var(--acc-s20fe) 4%, transparent));
  border-right: 1px solid color-mix(in srgb, var(--acc-s20fe) 28%, transparent);
}
.live-main { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.live-rank {
  width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; flex: none;
  font-family: var(--mono); font-size: 11px; font-weight: 650; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line);
}
.live-item:first-child .live-rank {
  color: var(--acc-s20fe); border-color: color-mix(in srgb, var(--acc-s20fe) 45%, var(--line));
  background: color-mix(in srgb, var(--acc-s20fe) 12%, var(--surface-2));
}
.live-name { font-weight: 560; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ktag {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; padding: 1px 6px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); white-space: nowrap;
}
.ktag[data-k="decomp"] { color: #60a5fa; border-color: rgb(96 165 250 / .3); background: rgb(96 165 250 / .1); }
.ktag[data-k="port"]   { color: #a78bfa; border-color: rgb(167 139 250 / .3); background: rgb(167 139 250 / .1); }
.ktag[data-k="pc"]     { color: #34d399; border-color: rgb(52 211 153 / .3); background: rgb(52 211 153 / .1); }
.ktag[data-k="emu"]    { color: #fbbf24; border-color: rgb(251 191 36 / .3); background: rgb(251 191 36 / .1); }

/* ---------- navegação por controle (GameSir X5 Lite / Gamepad HUD & Focus) ---------- */
.gp-mode :focus:not(input):not(textarea):not(select),
.gp-mode :focus-visible:not(input):not(textarea):not(select) {
  outline: none !important;
}
[data-gp-focus="true"] {
  outline: 2.5px solid var(--accent, var(--focus)) !important;
  outline-offset: 1px !important;
  box-shadow:
    inset 0 0 0 2px var(--accent, var(--focus)),
    0 0 0 4px color-mix(in srgb, var(--accent, var(--focus)) 32%, transparent),
    var(--shadow-hover) !important;
  z-index: 4;
}
:is(.device, .ptile, .gcard, .relcard, .htile, .live-col)[data-gp-focus="true"] {
  border-color: var(--accent, var(--focus)) !important;
  transform: translateY(-2px);
}
.device[data-gp-focus="true"] .device-link::after,
.gcard[data-gp-focus="true"] .gfull {
  box-shadow:
    inset 0 0 0 3px var(--accent, var(--focus)),
    inset 0 0 22px color-mix(in srgb, var(--accent, var(--focus)) 28%, transparent) !important;
}
.device[data-gp-focus="true"] .more {
  color: var(--text);
  transform: translateX(3px);
}
tr[data-gp-focus="true"] {
  outline: none !important;
  box-shadow: none !important;
}
tr[data-gp-focus="true"] td {
  background: color-mix(in srgb, var(--focus) 22%, var(--surface)) !important;
}
tr[data-gp-focus="true"] td:first-child {
  box-shadow: inset 4px 0 0 var(--focus) !important;
}
.gp-press {
  transform: scale(0.97) !important;
  transition: transform .08s ease !important;
}
.gp-hud {
  position: fixed; right: 16px; bottom: 16px; z-index: 25;
  display: inline-flex; align-items: center; gap: 12px; padding: 6px 12px;
  border-radius: 999px; background: rgb(12 12 15 / .84); color: #f4f4f6;
  border: 1px solid rgb(255 255 255 / .14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 11.5px; font-weight: 500; pointer-events: none;
  box-shadow: 0 8px 24px rgb(0 0 0 / .4);
}
.gp-hud span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.gp-hud kbd {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  padding: 1px 5px; border-radius: 4px; background: rgb(255 255 255 / .14);
  border: 1px solid rgb(255 255 255 / .24); color: #fff;
}
@media (max-width: 900px) {
  .gp-hud { bottom: calc(66px + env(safe-area-inset-bottom, 0px)); right: 12px; max-width: calc(100vw - 24px); overflow: hidden; }
}
@media (max-width: 960px) and (max-height: 520px) {
  .gp-hud {
    top: 6px; right: 82px; bottom: auto;
    padding: 3px 9px; font-size: 10px; gap: 7px;
    background: rgb(18 18 22 / .92); box-shadow: none;
  }
  .totop { display: none !important; }
  .live-head { padding-bottom: 8px; }
  .live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px; margin-top: 8px; }
  .live-col { padding: 8px 9px; gap: 5px; }
  .live-col h3 { font-size: 10.5px; }
  .live-item { padding: 4px 7px; font-size: 11.5px; gap: 5px; }
  .live-item .ktag { display: none; }
  .live-item .badge.mono { padding: 1px 5px; font-size: 10px; }
  .live-item .live-rank { width: 17px; height: 17px; font-size: 10px; }
  #portsTable th:nth-child(4), #portsTable td:nth-child(4),
  #portsTable th:nth-child(5), #portsTable td:nth-child(5) { display: none; }
  #portsTable td:nth-child(2) .muted.small { display: none; }
  #portsTable td:nth-child(1) .muted.small { max-width: 145px; }
  #epicTable th:nth-child(3), #epicTable td:nth-child(3) { display: none; }
  #epicTable td:nth-child(4) .muted.small,
  #epicTable td:nth-child(5) .muted.small { display: none; }
  #epicTable td:nth-child(1) .muted.small { max-width: 155px; }
}
.gp-mode .totop { display: none !important; }

/* ---------- botões de execução direta no S20 FE (▶ Jogar) ---------- */
.play-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  background: color-mix(in srgb, #10b981 18%, var(--surface-2)) !important;
  color: #34d399 !important;
  border: 1px solid color-mix(in srgb, #10b981 45%, var(--line)) !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, border-color .15s ease;
}
.play-btn:hover {
  background: color-mix(in srgb, #10b981 28%, var(--surface-2)) !important;
  border-color: #34d399 !important;
}
.live-item[data-launch] {
  cursor: pointer;
}
.live-item[data-launch] .play-btn {
  padding: 2px 7px;
  font-size: 10.5px;
  border-radius: 6px;
}
.live-item[data-gp-focus="true"] {
  border-color: var(--acc-s20fe, var(--focus)) !important;
  background: color-mix(in srgb, var(--acc-s20fe, var(--focus)) 14%, var(--surface)) !important;
}

/* ---------- Radar de Ports & Novidades (Bento Overview) ---------- */
.ports-feed-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ports-feed-scroll {
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 160px);
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 10px 2px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.port-feed-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.port-feed-card:hover {
  transform: translateY(-3px);
}
.port-feed-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: var(--hover);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.port-feed-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.port-feed-card:hover .port-feed-thumb img {
  transform: scale(1.05);
}
.port-feed-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1.3;
}
.port-feed-badge.ok {
  background: rgba(34, 197, 94, 0.85);
  color: #fff;
}
.port-feed-badge.warn {
  background: rgba(234, 179, 8, 0.95);
  color: #111;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.4);
}
.port-feed-badge.info {
  background: rgba(168, 85, 247, 0.85);
  color: #fff;
}
.port-feed-badge.muted {
  background: rgba(30, 30, 38, 0.85);
  color: var(--muted);
  border: 1px solid var(--line);
}
.port-feed-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.port-feed-title {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.port-feed-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  color: var(--muted);
}
.port-feed-meta .engine-tag {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid var(--line);
}
.port-feed-meta .date-tag {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
@media (max-width: 600px) {
  .ports-feed-scroll {
    grid-auto-columns: minmax(120px, 135px);
    gap: 10px;
  }
}



/* Nota do Metacritic na página do jogo (cores do próprio Metacritic; o número sempre escrito). */
.gscore { display: flex; align-items: center; gap: 10px; }
.mc-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 8px; background: rgb(0 0 0 / .45); color: #fff; text-decoration: none; font-size: 13px; border: 1px solid rgb(255 255 255 / .25); }
.mc-badge b { display: grid; place-items: center; min-width: 34px; height: 34px; border-radius: 6px; font-size: 17px; font-weight: 750; font-variant-numeric: tabular-nums; }
.mc-good b { background: #66cc33; color: #0b1a05; }
.mc-mixed b { background: #ffcc33; color: #241b00; }
.mc-bad b { background: #c62828; color: #fff; }        /* 5,6:1 */
.mc-badge:hover { border-color: #fff; }
.gscore .muted { color: #d4d4da; }

/* Dados do RAWG na página do jogo: duração, ficha extra, screenshots e trailer. */
.gtime { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; padding: 6px 10px; border-radius: 8px; background: rgb(0 0 0 / .45); border: 1px solid rgb(255 255 255 / .25); }
.gfacts { margin-bottom: 14px; }
.gvideo { width: 100%; max-width: 720px; aspect-ratio: 16 / 9; border-radius: 10px; background: #000; margin-bottom: 14px; display: block; }
.gshots { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 280px); gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.gshots li { scroll-snap-align: start; }
.gshot { padding: 0; border: 0; background: none; border-radius: 10px; overflow: hidden; cursor: zoom-in; display: block; width: 100%; }
.gshot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--hover); transition: transform .3s; }
@media (prefers-reduced-motion: no-preference) { .gshot:hover img { transform: scale(1.04); } }
.shot-dlg { border: 0; padding: 0; margin: auto; background: transparent; max-width: min(1280px, 96vw); }
.shot-dlg::backdrop { background: rgb(0 0 0 / .85); }
.shot-dlg img { width: 100%; max-height: 80vh; object-fit: contain; border-radius: 10px; display: block; }
.shot-bar { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; color: #fff; }
/* Nota do Metacritic no cartão da grade (mesmas cores do selo da página do jogo). */
.gmc { display: inline-block; min-width: 24px; padding: 0 4px; margin-right: 2px; border-radius: 4px; font-size: 11px; font-weight: 750; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.gmc.mc-good { background: #66cc33; color: #0b1a05; }
.gmc.mc-mixed { background: #ffcc33; color: #241b00; }
.gmc.mc-bad { background: #c62828; color: #fff; }
/* Para jogar: Jogue hoje + Joias esquecidas */
.play-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; }
.play-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.play-head h3 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.btn.sm { padding: 4px 10px; font-size: 13px; }
.today-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: start; }
.today-art img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--hover); box-shadow: var(--shadow); display: block; }
.today-info { display: grid; gap: 6px; }
.today-title { font-size: 18px; font-weight: 650; line-height: 1.25; text-decoration: none; color: var(--text); }
.today-title:hover { text-decoration: underline; }
.today-why { color: var(--text); }
.today-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.today-empty { padding: 20px 0; }
.gems .morerow { grid-auto-columns: minmax(96px, 110px); }
.gem-meta { display: flex; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); overflow: hidden; white-space: nowrap; }
@media (max-width: 900px) { .play-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) { .today-card { animation: todayIn .25s ease-out; } }
@keyframes todayIn { from { opacity: 0; transform: translateY(4px); } }
.play-head .seg { order: 0; }
/* Prêmios do RetroAchievements: aro dourado = masterizado/completado, prata = zerado. */
.ra-awards { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; padding: 0; }
.aw { display: block; border-radius: 10px; padding: 3px; }
.aw img { width: 48px; height: 48px; border-radius: 7px; display: block; }
.aw-mastered, .aw-completed { background: linear-gradient(135deg, #f5c542, #b8860b); }
.aw-beaten-hardcore, .aw-beaten-softcore { background: linear-gradient(135deg, #d9dee5, #8a94a3); }
.aw-completed img, .aw-beaten-softcore img { opacity: .9; }
.ra-near { list-style: none; display: grid; gap: 8px; margin: 8px 0 4px; padding: 0; }
.ra-near a { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.ra-near img { width: 40px; height: 40px; border-radius: 6px; }
.ra-near span { display: grid; }
.ra-award { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; padding: 8px 12px; border-radius: 8px; background: var(--hover); font-size: 14px; }
.ra-award.aw-mastered, .ra-award.aw-completed { background: rgb(245 197 66 / .16); }
.ra-award .btn { margin-left: auto; }
#raAwards:not(:empty) { margin-bottom: 16px; }
/* Linha do tempo */
.time-chart { min-height: 180px; }
.time-chart [aria-label] rect { cursor: pointer; }
.time-decades { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.time-decades .chip b { font-weight: 650; margin-right: 4px; }
/* Duplicatas (Saúde) */
.dup-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.dup-list li > span:first-child { display: grid; gap: 2px; }
.dup-extra { color: var(--muted); overflow-wrap: anywhere; }
.dup-cmd code { font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--hover); }
@media (max-width: 700px) { .dup-list li { grid-template-columns: minmax(0, 1fr); } }
.time-dev { margin-bottom: 8px; order: 0; }
.time-dev .dot { margin-right: 2px; }
.gfile { font-size: 12px; opacity: .75; margin-top: -2px; overflow-wrap: anywhere; }
.similar { grid-column: 1 / -1; }
.similar .morerow { grid-auto-columns: minmax(96px, 110px); }
.sim-why { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Minha estante */
.shelf { margin-bottom: 16px; }
.shelf .kpis { margin-bottom: 4px; }
.shelf-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; margin-top: 18px; }
.shelf-h { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.shelf-gen { list-style: none; display: grid; gap: 8px; margin: 0 0 8px; padding: 0; }
.shelf-gen li { display: grid; grid-template-columns: 110px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font-size: 13px; }
.shelf-gen .bar { height: 8px; }
.shelf-time { min-height: 160px; }
@media (max-width: 800px) { .shelf-grid { grid-template-columns: minmax(0, 1fr); } }
.shelf-gen .bar { margin-top: 0; } .shelf-gen .bar i { display: block; height: 100%; background: var(--series); border-radius: inherit; }