/*
 * サンリオのモーダル共通の覆いと閉じるボタン。中身（板）は waiwai-town の
 * React ペインが描く（sync_waiwai_town_panes.sh 参照）。8つのスニペットで共通。
 * カンプ: 覆い #001227 60% / 閉じるボタンはピンクの丸 33x33、板の外・下。
 */

.sanrio-modal {
  display: none;

  position: fixed;
  inset: 0;
  z-index: 1000;
  background-color: rgb(0 18 39 / 60%);

  /*
   * スマホでアドレスバーが引っ込んだ瞬間、**覆いの下側にすき間が出る**
   * （地の紺 60% が届かず、下だけ透過が切れて見える）のを防ぐ。
   *
   * `inset: 0` の `fixed` は「**いま見えている**ビューポート」＝ dvh 相当に
   * 収まる。iOS Safari などはアドレスバーが引っ込むと縦に伸びるが、
   * 覆いがその拡張に追いつくまでにラグがあり、下にバーの高さぶんの帯が残る。
   *
   * `lvh` は**アドレスバーが引っ込んだ状態（最大）**の高さなので、これを
   * 下限にしておけばどの状態でも下が足りなくならない。`inset: 0` は残すこと
   * （上端の固定と、バーが出ている通常時の基準はこちらが持つ）。
   *
   * `height` ではなく `min-height` にするのは、`inset: 0` が決めた高さを
   * 上書きせず「足りないときだけ伸ばす」ためで、lvh 非対応のブラウザでも
   * 何も起きない（従来どおり inset: 0 のまま）。
   *
   * 縦スクロールバーは増えない。`position: fixed` なので覆いが伸びても
   * 文書のスクロール量には影響しない（実機で scrollHeight == clientHeight を確認）。
   */
  min-height: 100lvh;

  /* flex は使えない。display を JS が block/none で切り替えるため上書きされる。
     内側の div を block のまま text-align + margin:auto で中央寄せする。 */
  overflow-y: auto;
  padding: 40px 16px;
  text-align: center;

  /*
   * **板が縦スクロールバーの幅の半分だけ左に寄るのを防ぐ**。
   *
   * 上の `overflow-y: auto` により、**覆い自身に**縦スクロールバーが出る
   * ことがある（板が高く、`padding: 40px` と合わせて覆いの高さを超えたとき）。
   * バーは右端だけを食うので、覆いのコンテンツボックスが左に 15px 狭まり、
   * その中で中央寄せした板は見えている範囲の中心より**バーの半分
   * （15px なら 7.5px）左**へずれる（閉じるボタンも板ごと同じだけずれる）。
   *
   * 出る／出ないはホスト側のページの背丈で決まるため、**同じスニペットでも
   * 組み込み先によって割れる**のがこの問題の分かりにくいところ:
   *   - ゲーム（js_game / unity_game、例: /cupcake）… `#game-frame` が
   *     100dvh に収まり `#sanrio-desktop-layout-container` が overflow:hidden
   *     なので覆いは縦に溢れず、バーが**出ない**＝中央に見える
   *   - LP（static_page、例: /member）… 縦に長い1枚ものでビューポートが
   *     低く、覆いが溢れてバーが**出る**＝ずれる
   * 実測（1440x900 / スタンプカード）で LP 側だけ左右の余白が 44px と 59px に
   * 割れていた（正しくは 51.5px ずつ）。
   *
   * `both-edges` は左右**両側**に同じ幅の溝を必ず確保する。バーが出れば右の
   * 溝がそれで埋まり、左には同じ幅の空きが残るのでコンテンツボックスが
   * 左右対称のまま保たれる。バーが出ないページでは両側に溝が空くだけで、
   * 中央寄せの結果は変わらない（/cupcake 側は実測で従来と同一を確認）。
   *
   * `stable` だけでは**右にしか**溝を取らないので、このずれは直らない。
   * 覆いを広げる（`width: 100vw` や負の `right`）方向の対処も採らないこと。
   * あれはページ側のバーを打ち消す指定で、ここで問題になっている
   * **覆い自身のバー**には効かないうえ、覆いが実際に見えている範囲より
   * 広くなって逆に右へずれる（実測で +7.5px）。
   */
  scrollbar-gutter: stable both-edges;
}

/*
 * PC（lg = 1024px、waiwai-town の Tailwind ブレークポイントに合わせる）では
 * **画面の上下左右センター**に置く（ユーザー指示。SP は上寄せのまま変えない）。
 *
 * `.sanrio-modal` 自体を flex にはできない。JS が開閉を
 * `style.display = 'block' / 'none'`（**インラインスタイル**）で切り替えており、
 * `!important` を付けないと勝てないが、セレクタが `.sanrio-modal` のままだと
 * **閉じている（display:none の）ときにも `!important` が効いてしまい、
 * 常時表示になる**（実機で確認済みの事故）。
 *
 * そこで JS が書き込むインラインスタイルの値そのものをセレクタにする。
 * `el.style.display = 'block'` は `getAttribute('style')` が必ず
 * `"display: block;"` になる（CSSOM の仕様どおりの安定した文字列化）ので、
 * **開いている瞬間だけ**にセレクタが一致し、閉じているとき・初期状態
 * （style 属性なし）には一切影響しない。
 *
 * **`flex-direction: column` にすること**。`.sanrio-modal` の直下は
 * 「板の div」「閉じるボタンの div」の2つが並んでおり、SP は block の
 * 自然な流れで**縦に積まれる**（カンプ通り、閉じるボタンは板の外・真下）。
 * row（既定）で組むと2つが横に並んでしまい、**閉じるボタンが板の横に
 * 飛び出す事故**になる（ユーザー報告・Figma 2043:810 で確認済み。
 * ボタンの座標は板のローカル座標 x=174 = 板幅 382 の中央で、
 * 板そのものの下に横センターで乗るのが正）。
 * justify-content:center が「板+ボタン」のブロック全体を縦方向に中央寄せする。
 *
 * **`align-items` は明示せず既定の `stretch` に任せること**（`center` にしない）。
 * `center` にすると `.sanrio-modal > div`（板の React マウント先）が
 * shrink-to-fit の flex item になる。板の中身が絶対配置だけの場合
 * （StampCardBody など、Figma 座標に合わせて全要素を absolute で重ねる作り）
 * 通常フローの幅を持つ子が1つも無いため、shrink-to-fit の基準が無く
 * **幅が 0 に潰れて板ごと消える事故**になる
 * （ユーザー情報は入力欄などに固定 px 幅の通常フロー要素があったため
 * たまたま無事だった＝発覚が遅れた）。
 * `stretch`（= 未指定）なら板の div は `.sanrio-modal` の幅いっぱいの
 * **確定値**になり、下の `margin-inline: auto` で 382px 幅の中身を
 * 迷いなく中央寄せできる。SP 側はもともとこの前提（block の
 * width:auto = 親いっぱい）で書かれているので、PC 専用の
 * 上書き（margin-inline:0 化）が不要になる分むしろ単純になる。
 */
@media (min-width: 1024px) {
  .sanrio-modal[style*="display: block"] {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
  }

  .sanrio-modal[style*="display: block"] > div {
    max-width: 100%;
  }
}

/* inline-block にすると板と閉じるボタンが横に並ぶので block のまま */
.sanrio-modal > div {
  max-width: 100%;

  /*
   * **背景クリックで閉じるための当たり判定の穴**。
   *
   * この div は React のマウント先そのもので、上の stretch の説明どおり
   * `.sanrio-modal` の**幅いっぱい**に確定値で広がる（見た目の板は 382px
   * だが、この div 自体は透明なまま画面のほぼ全域を覆っている）。
   *
   * waiwai-town 側（ModalShell 等）は「覆いのクリックで閉じる」を
   * `event.target === 覆い自身` で判定しているが、この透明な div が
   * pointer-events を持ったまま画面いっぱいに広がっていると、
   * 見た目は板の外（余白）に見える場所をクリックしても target がこの div
   * になってしまい、覆い自身に一切ヒットしなくなる
   * （実機で elementFromPoint により確認済み: 画面のほぼ全域でこの div が
   * 手前に来ていた）。
   *
   * pointer-events:none でこの透明な div ごとクリックを素通りさせ、
   * 下の `.sanrio-modal` 自身が受け取れるようにする。実際に見える板
   * （.font-rounded のさらに内側）には次のルールで pointer-events:auto
   * を戻すので、板自体のクリック（閉じるボタン・入力欄など）は今まで通り。
   */
  pointer-events: none;
}

/* 板は幅固定の block なので text-align:center では中央に来ない。
   pane によって幅を持つ階層が違う（.font-rounded 自身 / その子）ため両方指定。 */
.sanrio-modal > div > .font-rounded,
.sanrio-modal > div > .font-rounded > * {
  margin-inline: auto;
}

/*
 * pointer-events:auto を戻すのは **`.font-rounded` 自身ではなく、
 * その子（`.font-rounded > *`）だけ**にすること。
 *
 * `.font-rounded` はフォント指定だけの素の block 要素で幅の指定を
 * 持たない（width:auto = 親いっぱいの 1393px 相当）。実際に 382px 等の
 * 確定幅を持ち、margin-inline:auto で中央寄せされているのは
 * その子（各モーダルの React ルート、例: StampCardModal の
 * `w-full max-w-[382px]`）のほう。
 *
 * `.font-rounded` 自身にも auto を戻すと、この幅いっぱいのまま
 * 透明な `.font-rounded` がクリックを拾ってしまい、上の pointer-events:none
 * が実質無効化される（実機で elementFromPoint により確認済み: 板の外に
 * 見える余白のほぼ全域でこの .font-rounded がヒットしていた）。
 */
.sanrio-modal > div > .font-rounded > * {
  pointer-events: auto;
}

/*
 * あめ獲得ダイアログ（sanrio_get_candy_dialog）だけは React ではなく
 * このテンプレート直書きの静的な板（.sanrio-candy-dialog）なので、
 * 上の `.font-rounded` 経由のルールに一致しない。そのままだと
 * `.sanrio-modal > div { pointer-events: none }` が戻らず、板全体が
 * クリックを一切受け付けなくなる（閉じるボタンは板の外の別 div のため無事）。
 *
 * **板は覆いの直下**（他のモーダルのような React のマウント先 div を挟まない）。
 * 旧実装は `.sanrio-modal > div > .sanrio-candy-dialog` と書いていて
 * **どこにも一致していなかった**（板に押すものが無いので表面化していない）。
 */
.sanrio-modal > .sanrio-candy-dialog {
  pointer-events: auto;
}

.sanrio-modal button[id$="-modal-close-button"] {
  box-sizing: border-box;
  width: 33px;
  height: 33px;
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #ff8faf;
  /* 丸の外周のクリームの縁（btn - close 2184:13387。カンプ 1080 基準の
     87px 中 5px → 402 基準の 33px では 1.9px）。置き場所がずれないよう
     内側に取る。border だと Chrome が小数を切り捨てるので影で描く。
     waiwai-town の ModalCloseButton と同じ意匠。 */
  box-shadow: inset 0 0 0 1.9px #fef7ef;
  font-size: 0; /* テンプレートの「閉じる」の文字を隠す */
  line-height: 0;
  cursor: pointer;
  position: relative;
}

/* 白い X */
.sanrio-modal button[id$="-modal-close-button"]::before,
.sanrio-modal button[id$="-modal-close-button"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 2.5px;
  border-radius: 999px;
  background-color: #fff;
}

.sanrio-modal button[id$="-modal-close-button"]::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.sanrio-modal button[id$="-modal-close-button"]::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/*
 * ユーザーネーム登録ダイアログだけ、板の下の閉じるボタンを出さない
 * DOMがnullになることを避けるため表示を消すだけで対応
 */
#sanrio-nickname-registration-modal > div:has(> button[id$="-modal-close-button"]) {
  display: none;
}

/*
 * スタンプ取得失敗のお知らせ（waiwai-town の StampErrorDialog）が出ている
 * あいだだけ、板の下のピンクの閉じるボタンを隠す。あちらは板の内側に
 * 青い✕（あめやさんの失敗ダイアログと同じ意匠）を持っているので、
 * そのままだと✕が縦に2つ並ぶ。
 *
 * **display ではなく visibility**。このお知らせは開いたり閉じたりするので、
 * display:none にするとボタンのぶん（33px ＋ margin-top 14px）だけ
 * カードの位置がそのたびに動いて見える。visibility なら場所は取ったまま消える。
 *
 * 要素は残すこと（上の2つと同じ理由。ホストの JS が ID で掴んで
 * close_callback を叩いており、消すと閉じられなくなる）。
 * 合図の data 属性は waiwai-town の StampErrorDialog が出す。
 */
#sanrio-stamp-card-modal:has([data-sanrio-stamp-error]) button[id$="-modal-close-button"] {
  visibility: hidden;
}

/*
 * ここから下、あめ獲得ダイアログの中身。
 *
 * **すべて Figma（cont - item get 2184:13271、1020×729）の実測値を
 * カード幅からの比で持つ**。カンプの 1020px が実装の 382px にあたるので、
 * どの寸法も `calc(var(--w) * <カンプの px> / 1020)` と書く。生の px で
 * 焼くと、画面が 382px + 覆いの左右余白より狭いときにカードだけが縮んで
 * 文字や余白が縮まず、比率が崩れる（ユーザー指摘）。
 *
 * `--w` は「382px か、置ける幅のどちらか小さいほう」。**置ける幅は
 * コンテナクエリで取る**（`100cqw`）。`100%` では font-size に使えず
 * （% は親のフォントサイズになる）、`100vw` では覆いの padding と
 * scrollbar-gutter のぶんが引けないため。
 *
 * コンテナは**覆い（.sanrio-modal）自身**に付ける。上のとおり板を包む要素が
 * 覆いしかないため。`:has()` でこのダイアログの覆いだけに絞る
 * （全部に付けると他のモーダルにも contain がかかる）。
 */
.sanrio-modal:has(> .sanrio-candy-dialog) {
  container-type: inline-size;
}

.sanrio-candy-dialog {
  --w: min(382px, 100cqw);
  /* カンプのカードは 1020×729。天地は幅から決まる */
  --h: calc(var(--w) * 729 / 1020);

  width: var(--w);
  overflow: hidden;
  border-radius: calc(var(--w) * 64 / 1020);
  /* カンプ img - bg 2184:13272。ほぼ白（旧実装は #ffe6e6 のピンクだった） */
  background-color: #fffcfc;
  font-family: "M PLUS Rounded 1c", sans-serif;

  /* 共通の枠は React の板だけを中央寄せするので、素の HTML はここで揃える */
  margin-inline: auto;
  margin-top: max(0px, calc((100dvh - 80px - var(--h)) / 2));
}

.sanrio-candy-dialog + div {
  width: 382px;
  max-width: 100%;
  margin-inline: auto;
}

/*
 * カンプ txt - title 2184:13319: カード上端からテキストボックス上端まで
 * 100px、フォント 53px / ExtraBold / 行送り 1.1（＝ボックス高 58px）。
 * 左右の余白はカンプに無い（1行で収まる文言）ので、はみ出し避けに
 * 実装の 16px 相当（1020 換算で 43px）だけ取る。
 */
.sanrio-candy-dialog__title {
  margin: 0;
  padding: calc(var(--w) * 100 / 1020) calc(var(--w) * 43 / 1020) 0;
  color: #ff8faf;
  font-size: calc(var(--w) * 53 / 1020);
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
}

/*
 * ストライプとキャラクターは1枚の絵。縞が半透明なので水色を下に敷く。
 *
 * カンプ img - background 2184:13274 は 1020×492 でカード最下部に接する。
 * **下に margin を付けないこと**（旧実装は margin-bottom があり、そこに
 * 地のピンクのバーが見えていた。ユーザー指摘で修正）。
 * 角の丸めは親 .sanrio-candy-dialog の overflow: hidden 任せでよい。
 *
 * 上の余白 78.7px は、カンプのタイトルボックス下端（100 + 58.3）から
 * ストライプ上端（237）までの差。
 */
.sanrio-candy-dialog__body {
  height: calc(var(--w) * 492 / 1020);
  margin: calc(var(--w) * 78.7 / 1020) 0 0;
  background-color: #b4e1f8;
  background-image: url("/_/static/img/html_snippet/sanrio_get_candy_dialog/candy_dialog_bg.png");
  background-size: 100% 100%;
}

/*
 * 「あめ×N」。カンプでは3つの独立したテキストだが、数の桁で幅が変わるので
 * 実装は1行のインラインで組み、ベースラインで揃える（カンプもベースラインは
 * ほぼ一致していることを実測で確認: あめ下端 449 / 数字下端 454）。
 *
 * 段落自体のフォントサイズを**数字と同じ**にしてあるのは、行ボックスの
 * 高さを決めるストラットをカンプの一番大きい字に合わせるため
 * （既定の 16px のままだと行の天地が字と無関係に決まる）。
 */
.sanrio-candy-dialog__amount {
  position: relative;
  margin: 0;
  padding-top: calc(var(--w) * 83 / 1020);
  color: #ff8faf;
  font-size: calc(var(--w) * 140.747 / 1020);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/*
 * 白い縁取り。カンプの実測は**外側 12px**（1020 換算。GET!! の左右で
 * 11〜12px を計測）。`-webkit-text-stroke` は線の中心が輪郭に乗る
 * ＝指定値の半分しか外に出ないので、**倍の 24px** を渡す。
 * `paint-order` で縁を先に塗ってから字を重ね、内側を侵食させない。
 *
 * text-shadow の8方向重ねは**足さないこと**。ストロークの外側にもう一段
 * ふちが乗って実測の倍近くまで太り、角も膨らんで見える（旧実装がこれ）。
 */
.sanrio-candy-dialog__amount,
.sanrio-candy-dialog__get {
  -webkit-text-stroke: calc(var(--w) * 24 / 1020) #fff;
  paint-order: stroke fill;
}

/* カンプ: あめ 88.893 / × 73.27 / 数字 140.747、いずれも Black */
.sanrio-candy-dialog__candy {
  font-size: calc(var(--w) * 88.893 / 1020);
  font-weight: 900;
}

/*
 * カンプの字間は め→× が 30px、×→数字 が 29px（1020 換算の実測）。
 * 字の左右のアキはフォント任せなので、実測との差だけを margin で足す
 * （左右で必要量が違うので左右別々に持つ）。
 */
.sanrio-candy-dialog__times {
  /* × はベースライン揃えだと 6px（1020 換算）下がって見えるので上げる */
  position: relative;
  top: calc(var(--w) * -6 / 1020);
  margin-inline: calc(var(--w) * 22 / 1020) calc(var(--w) * 13 / 1020);
  font-size: calc(var(--w) * 73.27 / 1020);
  font-weight: 900;
}

/*
 * カンプでは数字だけベースラインから 10px（1020 換算）下がっている
 * （「あめ」と別のテキストとして置かれていて、下端が 5px ぶん下に出る）。
 * インラインで組むと揃ってしまうので、そのぶんだけずらす。
 */
.sanrio-candy-dialog__number {
  position: relative;
  top: calc(var(--w) * 10 / 1020);
  font-size: calc(var(--w) * 140.747 / 1020);
  font-weight: 900;
}

/* 上の余白 15px（1020 換算）は、カンプの「あめ×N」と「GET!!」の
   字の間隔を実測で合わせたぶん */
.sanrio-candy-dialog__get {
  position: relative;
  margin: calc(var(--w) * 15 / 1020) 0 0;
  color: #91d3f5;
  font-size: calc(var(--w) * 136.358 / 1020);
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

/*
 * 全画面モーダル用の修飾子（利用規約・ミニゲームリスト・あめやさん）。
 * 板が画面全体（PC では中央の柱）に広がり閉じるボタンもその中に入るカンプなので、
 * 共通の覆いの padding だけを打ち消す。
 * 中身は React 側（TermsPanel.tsx / GameListPanel.tsx / CandyShopPanel.tsx）が描く。
 * セレクタはモーダル固有の id を含まないので、増えても class を足すだけで効く。
 *
 * **地色（rgb(0 18 39 / 60%)）は共通側のまま残すこと**。
 * 以前はここで `background-color: transparent` にしていたが、PC の LP
 * （/guest /member）では板が中央の柱にしか広がらないため、板の外に出ている
 * **左カラムのサイドメニューが素通しのまま操作できてしまう**
 * （ユーザー報告、2026-09-24）。他のモーダルと同じく地を沈ませて操作不可に揃える。
 * 素通しを止める指定は下の pointer-events の節を参照。
 */
.sanrio-modal--fullbleed {
  /* padding が残ると React の 100dvh がはみ出して覆いごとスクロールする */
  padding: 0;
}

/*
 * PC の `.sanrio-modal` は開いているあいだ flex（上の @media）になるが、
 * align-items は既定の stretch のままなので、こちら（利用規約・ミニゲーム
 * リスト・あめやさん）の直下 `> div` も自動的に画面幅いっぱいになる
 * （align-items:center にしていた頃はここを明示的に stretch し直す
 * 必要があったが、その center 自体を廃止したので不要になった）。
 */

/* 要素は残すこと。React 側の × がこのボタンを click して close_callback へ繋ぐ
   （waiwai-town panes/terms/main.tsx）。消すと閉じられなくなる。 */
.sanrio-modal--fullbleed > div:has(> button[id$="-modal-close-button"]) {
  display: none;
}

/* 板は h-full なのでマウント先までの階層すべてに高さを通さないと 0 に潰れる。
   板自身に 100dvh/100dvw を指定しない理由: dvw は縦スクロールバーの幅を含み
   覆い（fixed inset:0）より広くなる。親に合わせる 100% ならズレない。 */
.sanrio-modal--fullbleed,
.sanrio-modal--fullbleed > div,
.sanrio-modal--fullbleed > div > .font-rounded {
  height: 100%;
}

/*
 * **共通側の `min-height: 100lvh` を打ち消す**（`.sanrio-modal` を参照）。
 *
 * あちらは「アドレスバーが引っ込んだ瞬間、覆いの下側に地の紺が届かない」のを
 * 防ぐためのものだが、**全画面モーダルは閉じるボタンが板の中（下端）にある**ため、
 * 覆いが lvh まで伸びると**ボタンがアドレスバーの下に隠れて押せなくなる**。
 * 実測（iPhone 15 / iOS 17.2・ゲーム内から開いた利用規約）:
 *
 *   見えている高さ      659px（= 100dvh = 100svh）
 *   100lvh              741px
 *   覆いと板の高さ      741px  ← この min-height が効いた結果
 *   閉じるボタンの下端  722px  ← 63px はみ出して画面外。タップが届かない
 *
 * `overflow: hidden`（下）なのでスクロールして追いかけることもできない。
 * ミニゲームリストも同じ（ボタン下端 691px）。あめやさんだけ無事だったのは、
 * 器を `min(100svh, …)` で自前に決めていて `height: 100%` を使わないから。
 *
 * `inset: 0` の fixed は**見えている高さそのもの**になる（同条件で 659px を実測）
 * ので、下限を外せば板は常に画面内へ収まる。`0` ではなく `100svh` なのは
 * 「アドレスバーが出ている状態の高さは最低でも確保する」という元の意図を
 * 残すため（svh は lvh と違い**見えている範囲を超えない**）。
 *
 * **地の紺を戻した（2026-09-24）ぶん、すき間は理屈上あり得る**。アドレスバーが
 * 引っ込んだ直後、覆いが追いつくまでの一瞬だけ下端に帯が残る可能性がある
 * （共通側が `100lvh` を下限にしていたのはこれを隠すため）。それでも `svh` を
 * 採るのは、`lvh` まで伸ばすと**板の中（下端）にある閉じるボタンが
 * アドレスバーの下に隠れて押せなくなる**（上の実測）ほうが重いから。
 * 「一瞬すき間が出る」より「閉じられない」を避ける判断。
 */
.sanrio-modal--fullbleed {
  min-height: 100svh;
}

/*
 * 全画面モーダルは**板の外を素通しにしない**（＝背後を操作不可にする）。
 *
 * 通常モーダルは `.sanrio-modal > div { pointer-events: none }` で
 * 「背景クリックで閉じる」ための穴を空けているが、こちらは覆いを押しても
 * 閉じない（閉じるボタンは板の内側）ので、その穴は要らない。
 *
 * **覆い自身は `auto` のまま**にして、板の外に来たクリックを覆いで受け止める。
 * 何もハンドラが無いので「押しても閉じないが、背後にも届かない」になり、
 * 地の紺 60%（上の節）と合わせて他のモーダルと同じ見え方・触り方に揃う。
 *
 * 以前はここで覆いごと `pointer-events: none` にしていた。PC の3分割で
 * 板が中央のゲームと同じ柱にしか広がらない（下の @media と、あめやさんが
 * 自前で持つ `.game-frame-column`）ため、**左右のペインを押せるように
 * しておく**ための措置だったが、同じスニペットを読む PC の LP
 * （/guest /member）では板の外に左カラムのサイドメニューが出ており、
 * そこが操作できてしまう不具合になっていた（ユーザー報告、2026-09-24）。
 * ゲーム画面でも「開いているあいだ左右ペインは触れない」に倒す判断
 * （ユーザー確認済み、2026-09-24）。
 *
 * マウント先 div と `.font-rounded` の `none` は**残すこと**。どちらも
 * 幅の指定を持たず画面いっぱいに広がる透明な要素なので、`auto` を持たせると
 * 覆いの手前でクリックを拾ってしまう。実際に見えている板にだけ次のルールで
 * `auto` を戻す。板の階層は pane によって違うので両方書く:
 *   利用規約・ミニゲームリスト … `> div > .font-rounded > *`（柱にするのは下の @media）
 *   あめやさん                … `> div > .game-frame-column`（柱を自前で持つ）
 */
.sanrio-modal--fullbleed > div,
.sanrio-modal--fullbleed > div > .font-rounded {
  pointer-events: none;
}

.sanrio-modal--fullbleed > div > .font-rounded > *,
.sanrio-modal--fullbleed > div > .game-frame-column {
  pointer-events: auto;
}

/* 中身は板の内側だけが流れるので、auto だと 1px のはみ出しでバーが出る */
.sanrio-modal--fullbleed {
  overflow: hidden;

  /*
   * 共通側の `scrollbar-gutter: stable both-edges`（板が左にずれるのを防ぐ
   * ためのもの）を**打ち消す**。
   *
   * `scrollbar-gutter` は `overflow: hidden` でも溝を確保してしまうため、
   * そのままだと地が左右 15px ずつ内側に入り、**画面全体を覆うはずの
   * 全画面モーダルの端が余る**（実測で内側の div が 0〜485 ではなく
   * 15〜470 になっていた）。こちらはそもそも overflow:hidden でバーが
   * 出ないので、溝を取る理由が無い。
   */
  scrollbar-gutter: auto;
}

/* 共通側の margin-inline: auto を打ち消す。text-align: center と噛み合うと
   負のマージンが付いて左へずれる（実機で left=-26px を観測）。 */
.sanrio-modal--fullbleed > div > .font-rounded,
.sanrio-modal--fullbleed > div > .font-rounded > * {
  margin-inline: 0;
}

/*
 * PC の3分割時、利用規約とミニゲームリストを中央のゲームと同じ幅に収める
 * （ユーザー指示）。あめやさん（CandyShopFrame）が既にそうなっているので、
 * それに揃える
 */
@media (min-width: 1000px) and (min-height: 600px) and (min-aspect-ratio: 1.2) {
  .sanrio-modal--fullbleed > div > .font-rounded > * {
    width: min(100%, calc(100svh * 9 / 16));

    /* 上の `.sanrio-modal--fullbleed ... { margin-inline: 0 }` を打ち消して
       柱を中央へ。あちらは画面いっぱい前提の指定なので、ここでだけ戻す。 */
    margin-inline: auto;
  }
}

 #unity-loader {
  background-color: #ffffff00 !important;
}