
.win-guide-help { flex: none; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; padding: 0; border-radius: 50%; border: 1px solid rgba(242, 198, 106, .45); background: rgba(0, 0, 0, .3); color: var(--gold-1); font: 700 .92rem/1 var(--font-ui); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.win-guide-help:hover { border-color: var(--gold-2); background: rgba(242, 198, 106, .16); color: var(--gold-0); }
.win-guide-help:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 2px; }
.reduce-motion .win-guide-help { transition: none; }

.win-name > .win-guide-help { align-self: center; }

.hero > .win-guide-help { position: absolute; top: .55rem; right: .55rem; z-index: 2; }
.hero:has(> .win-guide-help) > .hero-copy { padding-right: 1.9rem; }

.stage .trials-choose .choose-tools.tr-tools { flex-direction: row; align-items: center; gap: .5rem; }
.stage .trials-choose .choose-tools.tr-tools > .tr-views { flex: 1 1 auto; width: auto; min-width: 0; }

@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  .win-guide-help { position: relative; z-index: 1; width: 2.2rem; height: 2.2rem; font-size: 1.05rem; }
  .win-guide-help::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 3.3rem; height: 3.3rem; border-radius: 50%; }
}
