/* =====================================================================================
   rin-guide — 各アプリ共通の「遊び方・解説」パネル
   -------------------------------------------------------------------------------------
   受け持つのは、パネルの出し入れ（全画面・スクロール・見出しの固定・閉じるボタン）だけ。
   中の本文の見た目は、各アプリがもともと持っている .doc などのスタイルをそのまま使う。

   色は --rg-* をアプリ側で上書きして、そのアプリの世界観に合わせる。
   rin-nav.css と同じく、アプリの style より先に読み込む（あとに置くと既定値が後勝ちする）。
   ===================================================================================== */
:root {
  --rg-bg:       #121216;                  /* パネルの地。背面のアプリが透けないよう不透明にする */
  --rg-fg:       rgba(255, 255, 255, .92);
  --rg-line:     rgba(255, 255, 255, .14);
  --rg-btn-bg:   rgba(255, 255, 255, .06);
  --rg-btn-fg:   var(--rg-fg);
  --rg-btn-line: rgba(255, 255, 255, .24);
  --rg-accent:   #7dd3fc;
  --rg-radius:   999px;
  --rg-font:     inherit;                  /* 見出しと閉じるボタンの書体 */
  --rg-max:      780px;                    /* 本文の最大幅 */
  --rg-z:        950;                      /* 共通ナビ（rin-nav: 900）より上 */
}

/* JSが動かない環境では、ページの続きに置いた普通の本文として読める */
.rin-guide { padding-block: 24px 40px; }

/*
  JSが動く環境では全画面パネル。
  body > * { position: relative } を当てているアプリがあるので、クラス2つ分の強さで固定にする。
  transform を持つ要素の中に置くと固定表示が崩れるため、パネルは必ず body の直下に置く。
*/
.js .rin-guide {
  position: fixed;
  inset: 0;
  z-index: var(--rg-z);
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* サイドレール広告は全画面パネルの上にも重なるので、その幅（rin-ads.css の --rail-*）も避ける */
  padding: 0 max(16px, var(--rail-right, 0px)) calc(56px + env(safe-area-inset-bottom, 0px)) max(16px, var(--rail-left, 0px));
  background: var(--rg-bg);
  color: var(--rg-fg);
}
.js .rin-guide.is-open { display: block; }

/* 開いている間は背面のページをスクロールさせない */
html.rin-guide-open,
html.rin-guide-open body { overflow: hidden; }

.rin-guide__inner {
  max-width: var(--rg-max);
  margin-inline: auto;
}

.rin-guide__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
  padding: max(12px, env(safe-area-inset-top, 0px)) 0 12px;
  border-bottom: 1px solid var(--rg-line);
  background: var(--rg-bg);
}

.rin-guide__title {
  margin: 0;
  min-width: 0;
  font-family: var(--rg-font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--rg-fg);
  outline: none;
}

.rin-guide__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--rg-btn-line);
  border-radius: var(--rg-radius);
  background: var(--rg-btn-bg);
  color: var(--rg-btn-fg);
  font-family: var(--rg-font);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .16s ease;
}
.rin-guide__close:hover { border-color: var(--rg-accent); }
.rin-guide__close:focus-visible { outline: 2px solid var(--rg-accent); outline-offset: 2px; }

/* 閉じるボタンはパネルとして開いているときだけ意味があるので、JSなしでは出さない */
html:not(.js) .rin-guide__close { display: none; }