/* PC で画面を3分割し、中央のゲームの左右にペインを置く。
   カンプは Figma PC_A1 (2138:697) の 3413 x 1920。
   内訳は 左 1166 / 中央 1080 / 右 1167。

   左右ペインの中身は React 側（PaneShell）がカンプ実寸で組み、
   器の大きさを測って自前で縮小する。こちらは**器を渡すだけ**でよく、
   中身の寸法には触らない。

   中央のゲームの器（#game-frame）そのものはフレームワーク側
   （templates/framework/js_game.html・unity_game.html）が持っている。
   3分割かどうかに関わらず（SP でも）要るものなので、こちらは
   3分割のための flex 制御と、下の「柱にする条件」の上書きだけを足す。 */

/* ゲームを画面いっぱいに出す。**フレームワーク側の指定の上書き**。

   向こうの既定はこうなっている:

     #game-frame {
       width:  min(100dvw, calc(100dvh * 9 / 16));
       height: min(100dvh, calc(100dvw * 16 / 9));
     }
     @media (max-aspect-ratio: 9 / 16) {
       #game-frame { width: 100dvw; height: 100dvh; }
     }

   つまり**画面が 9:16 より縦長のときしか全画面にならない**。
   9:16 (0.5625) より少しでも横長な端末――10:16 (0.625) や 12:16 (0.75)、
   タブレットの 3:4 など――では min() の高さ由来の項が勝って
   「幅 = 高さ x 9/16」の柱になり、**左右に地の白が残る**
   （実測: 450x720 で 405x720、左右 22.5px ずつ）。

   スマホ・タブレットではゲームを画面いっぱいに出すのが正しい（ユーザー指示）
   ので、既定を全画面に倒し、**横長の画面でだけ柱に戻す**。

   しきい値は 3分割の 1.2 ではなく **1:1**。1.2 にすると横向きスマホ
   （844x390 など、幅が 1000px に届かず3分割にもならない）まで全画面になり、
   9:16 で組まれたゲームが極端に横長に引き伸ばされる。
   1:1 なら「縦長 = 全画面／横長 = 柱」で、3分割 (>1.2) は必ず柱側に入る。

   ここに書けるのは、このファイルの <link> が**フレームワークの
   インライン <style> より後**に来るため（同じ #game-frame でも後勝ち）。
   !important は不要。下の #game-frame { flex: none } が既に効いているのが証拠。

   **waiwai-town 側に同じ条件のミラーがある**。あめやさん・ミニゲームリストは
   「中央のゲームと同じ柱に収める」ためにこの式を写しているので、
   ここを触ったら向こうの .game-frame-column（src/index.css）も直すこと。 */
#game-frame {
  width: 100dvw;
  height: 100dvh;
}

@media (min-aspect-ratio: 1 / 1) {
  #game-frame {
    width: min(100dvw, calc(100dvh * 9 / 16));
    height: min(100dvh, calc(100dvw * 16 / 9));
  }
}

#sanrio-desktop-layout-left {
  display: none;
}

#sanrio-desktop-layout-right {
  display: none;
}
/* 地。**左右ペインと中央のゲームをまたいで1枚だけ**敷く。

   もとは同じ紙吹雪を container と左右ペインの React（PaneShell）の
   両方が持っていたが、ペイン側が不透明な地色ごと覆うので
   container の1枚は見えていなかった。ペイン側から地を外し、
   模様も LP（/member・PcFrame.tsx）と同じ bg-image.webp・同じ敷き方に
   揃えてある。461px は 922x2111（@2x 書き出し）の原寸で、**拡縮しない**。
   waiwai-town 側 src/components/pane/PaneShell.tsx と対。

   ## なぜ疑似要素2枚なのか

   `opacity` は background-image だけには効かないので、模様を別レイヤーに
   出して透かす必要がある（LP 側も専用の div を重ねている）。
   地色まで一緒に透かすわけにはいかないので、::before が地色、
   ::after が模様と役割を分ける。

   `position: fixed` + `z-index: -1` なのは、**中身より確実に下に敷く**ため。
   container 自身に background を残すと、静的配置の要素の背景は
   負の z-index より後に描かれるので模様を隠してしまう。
   かといって container を position:relative + z-index で重ね順の親に
   すると、中の #tap_to_start_dialog など高い z-index を巻き込む。
   fixed なら overflow:hidden にも切られず、LP と同じ「スクロールしない地」
   になる。 */
#sanrio-desktop-layout-container::before,
#sanrio-desktop-layout-container::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

#sanrio-desktop-layout-container::before {
  background-color: #fffcef;
}

#sanrio-desktop-layout-container::after {
  background-image: url('/_/static/img/bg-image.webp');
  background-size: 461px auto;
  background-repeat: repeat;
  /* カンプ（LP遷移 682:46245）から実測した値。
     素材 100% の芯 #adebff / #fedcec が、カンプでは #def5f5 / #ffefee。
     #fffcef の上に 0.4 で置くと 3 チャンネルとも 8bit まで一致する
     （0.19 は半分以下の濃さになる。2026-09-16 に実測して修正）。 */
  opacity: 0.4;
}

/* 3分割にするのは、中央を置いた残りが左右に十分あるときだけ。

   中央の幅は画面の**高さ**で決まる（100svh * 9/16）ので、
   「幅が◯px 以上」だけでは判定できない。たとえば 1148x1327 の
   縦長ウィンドウは幅こそ広いが、中央が 746px を占めるため
   左右には 201px しか残らず、ペインが潰れて読めない。

   残る量（100vw - 100svh * 9/16）はメディアクエリでは書けない
   ――幅と高さの引き算は比較条件にできない――ので、
   **ペイン自身の幅**をコンテナクエリで見て決める。
   下の @container が、器が 320px を割ったペインを畳む。

   ここの min-width / min-height は、SP・タブレットを早い段階で
   弾くための粗いふるい。最終判断は @container 側が持つ。 */
@media (min-width: 1000px) and (min-height: 600px) {
  #sanrio-desktop-layout-container {
    display: flex;
    /* 中央を基準に左右対称。器の高さはビューポートに合わせる */
    height: 100svh;
    overflow: hidden;
  }
  /* 中央のゲームを**絶対に縮ませない**。
     flex: 1 だと flex-basis: 0 になり、左右が幅を主張した瞬間に
     0px まで潰れてゲームが消える。ここは flex: none が要点。

     9:16 の柱にする指定はこのファイルの冒頭にある（min-aspect-ratio: 1/1）。
     3分割が成立する画面は必ず横長（>1.2）なので、そちらで柱になっている。
     ここで重ねて幅を書く必要は無い。 */
  #game-frame {
    flex: none;
  }

  /* 左右は中央を除いた残りを等分する。
     min-width: 0 が無いと、中の React が持つカンプ実寸(1166px)が
     最小幅として効いてしまい、フレックスの縮小が止まって
     中央を押し出す。 */
  #sanrio-desktop-layout-left,
  #sanrio-desktop-layout-right {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    height: 100svh;
    overflow: hidden;
  }
}

/* 背の高い（＝横に余裕のない）ウィンドウでは3分割しない。

   中央は 100svh * 9/16 を取るので、画面が縦長なほど中央が幅を食い、
   左右に残る量が減る。左右には 320px ずつ欲しい
   （PaneShell がカンプ 1166px を約 0.27 倍で置ける下限。
   これを割ると文字が小さすぎて読めない）。厳密には

     100vw >= 100svh * 9/16 + 640

   だが、メディアクエリに幅と高さの引き算は書けない。
   固定の 640px を含むため純粋な比にもならず、境界は高さで動く。

   そこで実機の比で当たりを取り、**1.2** を一律のしきい値に採る。

     1148x1327 (0.87)  左右 201px → 畳む   ◯
     1365x1080 (1.26)  左右 379px → 出す   ◯
     1280x800  (1.60)  左右 415px → 出す   ◯
     1440x900  (1.60)  左右 467px → 出す   ◯
     1920x1080 (1.78)  左右 656px → 出す   ◯

   1.3 だと 1365x1080（左右 379px あるのに畳む）を取りこぼす。
   なお境界が甘い側に振れても PaneShell が縮めて収めるので
   破綻はしない（中央が 0px に潰れることはもう無い）。 */
@media (max-aspect-ratio: 1.2) {
  #sanrio-desktop-layout-left,
  #sanrio-desktop-layout-right {
    display: none;
  }
}