/* 게임 화면 머리줄 ♡·공유 (gamebar.js) + 시작 화면 "이렇게 놀아요" (howto.js) — 2026-10-08 */
.gb { display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: 8px; }
.gb .xr-like, .gb .fs-btn.gb-share {
  height: 34px; min-width: 34px; padding: 0 10px; border-radius: 10px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid var(--line-2, rgba(255,255,255,.14)); background: var(--panel, #1B2027);
  color: var(--text, #E9EDF2); font: 800 13px/1 Pretendard, system-ui, sans-serif; cursor: pointer; box-shadow: none; margin: 0;
}
.gb .fs-btn.gb-share { padding: 0; width: 34px; }
.gb .fs-btn.gb-share span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.gb .fs-btn.gb-share svg { width: 16px; height: 16px; }
.gb .xr-like:focus-visible, .gb .gb-share:focus-visible { outline: 2px solid var(--accent, #2EE6C5); outline-offset: 2px; }
.gb-om { margin: 0 2px 0 0; }
.gb-om .xr-like, .gb-om .fs-btn.gb-share { height: 36px; border-radius: 10px; }
.gb-om .fs-btn.gb-share { width: 36px; }
/* 폰: 머리줄이 좁으니 사이트 이름 글자·언어 고르기를 숨기고(꼬리말에 언어 고르기 있음) 아이콘 자리를 만든다 */
@media (max-width: 560px) {
  .has-gb #siteHead .sh-word { display: none; }
  .has-gb #siteHead .sh-lang { display: none; }
  .has-gb #siteHead .sh-nav a { padding: 8px 6px; }
  .has-gb .gb { margin-left: 4px; gap: 4px; }
  .has-gb header.topbar .brand small { display: none; }
}
@media (max-width: 420px) {
  .has-gb header.topbar .brand { font-size: 0; gap: 0; }
  .has-gb header.topbar #sceneBtn { display: none; }
}

/* 이렇게 놀아요 (시작 화면) */
.fo-how { text-align: left; margin: 10px 0 14px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.fo-how-h { font-size: 12px; font-weight: 800; color: var(--accent, #2EE6C5); margin: 0 0 6px; letter-spacing: .02em; }
.fo-how dl { margin: 0; display: grid; gap: 5px; }
.fo-how-r { display: grid; grid-template-columns: 5.4em 1fr; gap: 8px; align-items: baseline; }
.fo-how dt { font-size: 12px; font-weight: 800; color: var(--text-3, #8A94A3); }
.fo-how dd { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text, #E9EDF2); }
