/* Morifis Web版のランディング＋プレイヤー。Unity既定テンプレートのCSSは使わず自前で持つ。
   Cloudflare Pagesの1ファイル25MiB制約に収まる軽量な入口として設計している（Docs/56 §1）。

   見た目は公式サイト（hakumai-studio.com/morifis/）と揃える（2026-09-14）。
   同じゲームの入口が2つあるのに別物に見えていたため。配色・見出しの明朝・KV画像を共有する。
   画像は TemplateData/img/ に同梱する。公式サイト側から参照しない
   ＝あちらを触ったときにこちらが黙って壊れるのを防ぐ。 */
:root{
  /* 公式サイトと同じ森の配色 */
  --bg:#0c150f; --bg-2:#0f1c14; --panel:rgba(255,255,255,.035);
  --ink:#eef4ec; --muted:#b4c3b6; --muted-2:#8fa392;
  --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.22);
  --forest:#6fae7e; --forest-deep:#143628; --moss:#a9c88f; --gold:#d8c07a;
  /* ボタンの地色。押せることが一目で分かる明度を保つ */
  --accent:#8fbf6a; --accent-ink:#12210f;
  --radius:14px; --radius-sm:9px;
  --shadow:0 24px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Segoe UI",sans-serif;
  line-height:1.85;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
/* 一色のベタ塗りだと安く見える。上を少し明るくして奥行きを出す。
   background-attachment:fixed は iOS でスクロール中にちらつくため使わない。 */
body{background:
  radial-gradient(120% 60% at 50% 0%, rgba(111,174,126,.10) 0%, transparent 62%),
  linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 38%);
  background-repeat:no-repeat;background-color:var(--bg);min-height:100vh}
a{color:var(--moss)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* 見た目の並び：ゲーム枠を最上部へ、見出し・リード文はその下へ（2026-09-14）。
   Webゲーム8サイトの実測に合わせる：Poki は枠 top=16px、CrazyGames は 76px で、
   どちらもタイトルが枠の下にある。変更前の Morifis は 306px で、ノートPCの実効高さだと
   Playボタンが画面外に出ていた。
   HTMLの順序は h1 → ゲーム枠 のまま変えず、order だけ入れ替える
   ＝文書順は見出しが先に来るのでSEOとスクリーンリーダーの読み上げ順は保たれる。
   （視覚順と文書順がずれるのはタブ順序の観点では非推奨だが、ここは hero に
   操作可能な要素が無い＝タブ移動の対象が無いので実害が出ない） */
.wrap{display:flex;flex-direction:column}
#player{order:1}
.bar{order:2}
.hero{order:3}
.badges{order:4}
#t-shots,.shots{order:5}
#t-feat,.features{order:6}
.more-link{order:7}

/* 見出しは公式サイトと同じ明朝。Webフォントは読み込まない（1リクエスト増やすより、
   端末内の明朝で組む方が速い。公式サイト側は Shippori Mincho B1 を読んでいる）。 */
.hero h1,h2{
  font-family:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho",Georgia,"Times New Roman",serif;
  font-weight:700}

/* 決済から戻ってきたときの帯（?purchase=success|cancel） */
#purchase-banner{display:none;padding:14px 20px;text-align:center;font-weight:700;
  background:var(--accent);color:var(--accent-ink)}
#purchase-banner.cancel{background:#5b6b60;color:var(--ink)}

/* ヒーロー。ゲーム枠の下に置くので、上の余白は操作列ぶんだけ空ける（元は64px）。 */
.hero{position:relative;padding:30px 0 8px;text-align:center}
.hero h1{margin:0 0 14px;font-size:clamp(28px,4.4vw,44px);letter-spacing:.03em;line-height:1.35}
/* タイトル下の細い罫。公式サイトと同じ区切り */
.hero h1::after{content:'';display:block;width:64px;height:1px;margin:18px auto 0;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent)}
.hero p.lead{margin:0 auto;max-width:34em;font-size:clamp(15px,2.4vw,18px);
  line-height:1.9;color:var(--muted)}
/* 日本語を文節で改行する（「こも／れび石」のような語の途中の改行を防ぐ）。auto-phrase は Chrome のみ・
   lang=ja のときだけ効く。Safari は未対応で従来の改行のまま＝壊れはしない。 */
.hero p.lead,.features li{word-break:auto-phrase;text-wrap:pretty}

/* プレイヤー枠。押されるまでゲーム本体をダウンロードしない（初回119MB対策） */
/* UIの設計基準は UiRoot.ReferenceWidth/Height = 1920x1080 = 16:9。
   ここを実機スクショの寸法(2868/1320≒19.5:9)にすると横に伸びる（2026-09-06に指摘された）。 */
/* 最上部に来るので上の余白は小さく。width:100% は .wrap を flex にした分の保険
   （flexアイテムは auto マージンだけでは中央に寄らず、幅も内容なりに縮みうる）。 */
#player{position:relative;margin:18px auto 0;width:100%;max-width:1024px;aspect-ratio:16/9;
  background:#0a120d;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow)}
#unity-canvas{display:block;width:100%;height:100%;background:#0a120d}

/* 起動前の枠がただの黒い穴に見えていたのでKVを敷く（2026-09-14）。
   Playを押すと #play-gate ごと display:none になるため、ゲーム描画には一切かからない。
   KVはロゴが上・キャラが中央にいる絵なので、位置を上寄せにして主役を残し、
   ボタンと注記は下の余白側（下記 justify-content:flex-end）へ逃がす。 */
#play-gate::before{content:'';position:absolute;inset:0;z-index:0;
  background-image:url("img/kv.webp");background-size:cover;background-position:center 28%}
/* KVの上に文字を置くので暗幕を1枚。上は薄く保って絵を見せ、
   下だけ強く落としてボタンと注記の可読性を確保する。 */
#play-gate::after{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(10,18,13,.12) 0%,rgba(10,18,13,.18) 40%,
    rgba(10,18,13,.72) 76%,rgba(10,18,13,.92) 100%)}
#play-gate > *{position:relative;z-index:1}

/* 疑似全画面。iOSは**常にこちら**を使う（2026-09-09。本物の全画面は下スワイプで
   勝手に抜ける＝Web側から防げない・キーボードも出ないため。index.html の setupFullscreen 参照）。
   ビューポートを覆いつつ canvas は 16:9 のまま中央にレターボックス表示する。
   高さは dvh（動的ビューポート）。iOS Safari の 100vh はアドレスバー分を含むため、
   vh のままだと画面下が隠れる。dvh 非対応ブラウザ向けに vh を先に書いて上書きする。 */
#player.fs-on{position:fixed;inset:0;z-index:9999;width:100vw;height:100vh;height:100dvh;
  max-width:none;aspect-ratio:auto;border:0;border-radius:0;background:#000;box-shadow:none;
  display:flex;align-items:center;justify-content:center}
#player.fs-on #unity-canvas{width:min(100vw,calc(100vh * 16 / 9));
  height:min(100vh,calc(100vw * 9 / 16))}
@supports (height: 100dvh) {
  #player.fs-on #unity-canvas{width:min(100vw,calc(100dvh * 16 / 9));
    height:min(100dvh,calc(100vw * 9 / 16))}
}
/* 疑似全画面中はページ自体を動かさない。overflow:hidden だけでは iPadOS Safari の
   バウンススクロールが残り、下方向のスワイプ（ゲーム内の「森を開く」等）がブラウザの
   全画面解除ジェスチャとして拾われて勝手に全画面が終わる（2026-09-07 実機）。
   position:fixed でスクロール自体を成立させず、overscroll-behavior でチェーンを断つ。 */
body.fs-lock{overflow:hidden;position:fixed;inset:0;width:100%;height:100%;
  overscroll-behavior:none;touch-action:none}
/* 本物の全画面（iPadOS 16.4+ の Safari はこちらへ入る）でも同じくページを動かさない。
   :fullscreen 側にも touch-action:none を置かないと、canvas上の下方向スワイプが
   ブラウザの全画面解除ジェスチャとして拾われる（2026-09-08 iPad実機で再発）。 */
:fullscreen,:fullscreen #unity-canvas,
:-webkit-full-screen,:-webkit-full-screen #unity-canvas{
  overscroll-behavior:none;touch-action:none}
/* canvas上のスワイプはUnityへ渡す。ブラウザのスクロール/ジェスチャには使わせない。 */
#player.fs-on,#player.fs-on #unity-canvas{overscroll-behavior:none;touch-action:none}
/* 外部サイトの枠に入れる表示（?embed=1・2026-09-29。index.html の先頭で html に embed を付ける）。
   ゲーム画面だけを枠いっぱいに出し、canvas は疑似全画面と同じく 16:9 のまま中央にレターボックス。
   全画面は外側（itch.io 等）のボタンに任せるので、ページ側の全画面ボタン・言語・紹介は出さない。 */
html.embed,html.embed body{height:100%;overflow:hidden;background:#000}
html.embed .hero,html.embed .bar,html.embed #badges,html.embed #t-shots,html.embed #shots,
html.embed #t-feat,html.embed #features,html.embed .more-link,html.embed footer{display:none!important}
html.embed .wrap{max-width:none;padding:0}
html.embed #player{position:fixed;inset:0;margin:0;width:100vw;height:100vh;height:100dvh;
  max-width:none;aspect-ratio:auto;border:0;border-radius:0;background:#000;box-shadow:none;
  display:flex;align-items:center;justify-content:center;overscroll-behavior:none;touch-action:none}
html.embed #unity-canvas{width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16));
  overscroll-behavior:none;touch-action:none}
@supports (height: 100dvh) {
  html.embed #unity-canvas{width:min(100vw,calc(100dvh * 16 / 9));
    height:min(100dvh,calc(100vw * 9 / 16))}
}
#fs-exit{display:none;position:absolute;top:10px;left:10px;z-index:10000;
  appearance:none;border:1px solid var(--line);border-radius:8px;cursor:pointer;
  background:rgba(0,0,0,.5);color:var(--ink);font-size:18px;line-height:1;padding:8px 12px}
/* 中央寄せだとボタンがKVのロゴとキャラの顔に重なる。下寄せにして絵を残す。 */
#play-gate{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;gap:14px;text-align:center;
  padding:24px 24px clamp(20px,5%,40px)}
#play-button{appearance:none;border:0;border-radius:999px;padding:17px 44px;cursor:pointer;
  font-size:19px;font-weight:800;background:var(--accent);color:var(--accent-ink);
  box-shadow:0 6px 22px rgba(143,191,106,.34);transition:transform .18s ease,box-shadow .18s ease}
#play-button:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(143,191,106,.46)}
#play-button:active{transform:translateY(0)}
#size-note{font-size:13px;color:#cfdcd1;line-height:1.75;max-width:36em;
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
/* 注記は行の長さをそろえて折り返す（「…推奨しま／す。」と1文字だけ落ちていた・2026-09-26）。 */
#size-note,#device-note{text-wrap:balance}
/* 端末ごとの案内（推奨ブラウザ／アプリ版）。size-note と同じ注記の形。ストアへのリンクだけ押せると分かる色に。 */
#device-note{font-size:13px;color:#cfdcd1;line-height:1.75;max-width:36em;margin-top:-8px;
  text-shadow:0 1px 3px rgba(0,0,0,.6)}
#device-note:empty{display:none}
#device-note a{margin-left:.6em;color:var(--accent);font-weight:800;text-decoration:underline;
  text-underline-offset:3px}

/* 読み込み中。KVの上に重なるので、地色を敷いて進捗を読ませる。 */
#loading{position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;padding:24px;background:rgba(10,18,13,.86)}
#bar{width:min(420px,80%);height:8px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
#bar-full{height:100%;width:0%;background:linear-gradient(90deg,var(--forest),var(--accent));transition:width .2s}
#loading-text{font-size:14px;color:var(--muted)}
#unity-warning{position:absolute;left:0;right:0;top:0;z-index:5}

/* 下部の操作列。枠と同じ幅に揃え、右端へ寄せる（枠の下に素で転がって見えていた）。 */
.bar{display:flex;gap:10px;justify-content:flex-end;align-items:center;
  width:100%;max-width:1024px;margin:0 auto;padding:12px 2px;flex-wrap:wrap}
/* ストアバッジ。今は hidden だが公開後に出る。width:100% は .wrap のflex対策（中央寄せ用）。 */
.badges{display:flex;width:100%;gap:14px;justify-content:center;flex-wrap:wrap;margin:30px 0 6px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border-radius:12px;
  background:var(--panel);border:1px solid var(--line-strong);color:var(--ink);
  text-decoration:none;font-weight:700;transition:border-color .18s ease,background .18s ease}
.badge:hover{border-color:var(--moss);background:rgba(169,200,143,.10)}
/* 公式ストアバッジ（2026-09-26）。枠・地色は付けず画像だけを見せる（公式サイトと同じ）。 */
.badge--official,.badge--official:hover{padding:0;border:0;border-radius:0;background:none}
.badge--official img{display:block;height:54px;width:auto}
.shots{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:34px 0}
.shots img{width:100%;border-radius:10px;border:1px solid var(--line);display:block}

/* 特徴。黒地に黒丸の箇条書きだったのを、枠のあるカードに変える。 */
.features{margin:24px auto 0;max-width:1024px;padding:0;list-style:none;
  display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.features li{margin:0;padding:20px 22px;line-height:1.8;color:var(--ink);font-size:15px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm)}
/* 行頭の印はゲーム内のスプライトを使う＝絵文字は使わない（公式サイトと同じ方針） */
.features li::before{content:'';display:inline-block;width:15px;height:15px;margin-right:10px;
  vertical-align:-2px;background:url("img/leaf.webp") center/contain no-repeat;opacity:.92}

h2{font-size:clamp(21px,3vw,27px);margin:46px 0 4px;text-align:center;line-height:1.5}
/* 紹介ページへの導線。読み物は公式サイト側に置くので、ここは1行のリンクだけ。
   width:100% は .wrap を flex にした分（内容なりに縮むと中央寄せが効かない）。 */
.more-link{width:100%;margin:26px 0 0;text-align:center}
.more-link a{display:inline-block;padding:12px 26px;border:1px solid var(--line);border-radius:999px;
  color:var(--muted);font-size:14px;font-weight:700;
  transition:border-color .18s ease,color .18s ease}
.more-link a:hover{border-color:var(--moss);color:var(--ink)}
.more-link a[hidden]{display:none}
/* footer は class="wrap" も持ち、.wrap{margin:0 auto} の方が強くて上の余白が 0 になっていた
   （「もっと知る」ボタンに境界線が接していた・2026-09-26）。footer.wrap で指定して効かせる。 */
footer,footer.wrap{border-top:1px solid var(--line);margin-top:56px;padding:26px 0 48px;
  color:var(--muted-2);font-size:13px;text-align:center}
footer a{margin:0 10px;color:var(--muted-2)}
footer a:hover{color:var(--moss)}
#lang{background:transparent;color:var(--muted);border:1px solid var(--line);
  border-radius:8px;padding:7px 11px;font-size:13px;cursor:pointer}
.fs{background:transparent;border:1px solid var(--line);color:var(--muted);
  border-radius:8px;padding:7px 13px;cursor:pointer;font-size:13px;
  transition:border-color .18s ease,color .18s ease}
.fs:hover,#lang:hover{border-color:var(--moss);color:var(--ink)}

@media (max-width:720px){
  .hero{padding:40px 0 24px}
  #player{border-radius:10px}
  .bar{justify-content:center}
  .features{grid-template-columns:1fr;gap:12px}
  h2{margin:36px 0 4px}
  /* スマホ幅だと 16:9 の枠は高さ220px程度しかなく、ボタンが枠を占領してKVが見えない。
     起動前だけ縦長にしてKVを見せる。
     index.html は gate を hidden属性ではなく style.display="none" で消すため（:533）、
     属性セレクタでは判定できない。代わりに「gateが子として display されている間」を
     :has() で見る。Playを押すと gate が display:none になり
     この指定が外れて 16:9 へ戻る＝ゲーム描画のアスペクトには影響しない。
     :has() 非対応ブラウザでは 16:9 のまま＝従来の見た目に落ちるだけで壊れない。 */
  #player:has(> #play-gate){aspect-ratio:4/5}
  #player:has(> #play-gate[style*="display: none"]),
  #player:has(> #play-gate[style*="display:none"]){aspect-ratio:16/9}
  #play-button{padding:15px 32px;font-size:17px}
  #size-note{font-size:12px}
}

/* 端末側で動きを減らす設定のときは動かさない */
@media (prefers-reduced-motion: reduce){
  #play-button,.badge,.fs,#lang{transition:none}
  #play-button:hover{transform:none}
}

/* fs-exit(10000)より上へ置き、決済中の背後操作を遮る。暗幕はplayer全域。 */
#checkout-overlay{position:absolute;inset:0;z-index:10001;background:rgba(0,0,0,.78);
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right))
    max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))}
#checkout-overlay[hidden]{display:none}
#checkout-panel{position:relative;width:100%;max-width:680px;max-height:100%;overflow:auto;
  overscroll-behavior:contain;background:#fff;border-radius:12px;color:#222}
#checkout-close{position:sticky;top:0;display:block;margin:0 0 0 auto;z-index:1;
  width:44px;height:44px;border:0;background:#fff;color:#222;font-size:24px;cursor:pointer}
#checkout-mount{min-height:160px}
/* 本物の全画面もplayerを対象にして、canvasと暗幕を同じ全画面要素内に保つ。 */
#player:fullscreen{width:100vw;height:100vh;max-width:none;border:0;border-radius:0;
  display:flex;align-items:center;justify-content:center;background:#000}
#player:fullscreen #unity-canvas{width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16))}
#player:-webkit-full-screen{width:100vw;height:100vh;max-width:none;border:0;border-radius:0;
  display:flex;align-items:center;justify-content:center;background:#000}
#player:-webkit-full-screen #unity-canvas{width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,calc(100vw * 9 / 16))}