/* ============================================================
   年齢確認の 門 ── ひがしやまウォッチ 全ページ共通
   見た目の 正本は design-lab/agegate.html の 案H(確定・2026-10-01):
     ・カード: 枠なし 単色。昼=白 + R-18 ピンク(#EE8FAA・フラット)/
       夜=濃紺 #0E1024。サイトの 時計(.night)に 連動
     ・うしろ: サイト本体(#hsGateWrap)に モザイク(SVG フィルタ #hsPix・16px角)
     ・はい → 下から 緞帳(どんちょう)が 上がる ように モザイクが 消える
       (鮮明な 分身 #hsGateGhost を clip-path で せり上げる。age-gate.js 参照)
     ・いいえ → Google トップへ
     ・「一度答えると30日間有効」チェック(既定 ON)。外すと その回だけ
   JS(age-gate.js)が 読めない あいだは 門が 閉じたまま = 中身は 出ない。
   クローラには DOM を そのまま 見せる(filter は 見た目だけ)。
   ============================================================ */
html:not(.age-ok){overflow:hidden;}
/* ★ モザイクは 本体に 直接 かけない。生きた DOM に filter を かけると
   ①キャラ・紙吹雪が 動く たびに 全面 再ラスタライズで 重い
   ②Safari は 合成レイヤー(アニメ中の canvas など)を フィルタに 巻きこめず
     素通しに なる(実害 2026-10-01)
   かわりに 本体は 隠し、JS が 静止クローン(#hsGateVeil。アニメ停止・
   canvas は 画像化)を 作って、ビューポートぶんだけ モザイク化して 見せる。
   filter:url(#hsPix) は 外部CSSだと 参照が CSSファイル基準で 解決されて
   無効に なる ため、JS が インラインで 当てる(age-gate.js 参照)。 */

/* モザイクの 幕(静止クローン)。filter は JS が インラインで 当てる */
#hsGateVeil{position:fixed; inset:0; z-index:9997; overflow:hidden; pointer-events:none;
  background:var(--page,#fff);}
#hsGateVeil *{animation:none !important; transition:none !important;}
html.age-ok #ageGate{display:none;}

#ageGate{position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(30,22,34,.28); transition:background 1s;}
#ageGate.ag-out{background:rgba(30,22,34,0); pointer-events:none;}
#ageGate.ag-out .ag-card{opacity:0; transform:scale(.96);}

.ag-card{width:min(340px,92vw); background:#FFFFFF; border-radius:16px; padding:28px 22px 20px;
  text-align:center; box-shadow:0 12px 32px rgba(30,22,34,.38);
  transition:opacity .35s, transform .35s;
  font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",sans-serif;}
.ag-r18{font-family:"DotGothic16","Hiragino Kaku Gothic ProN",monospace; font-size:44px; line-height:1;
  letter-spacing:.04em; color:#EE8FAA; margin:0 0 12px;}
.ag-card h2{font-size:16px; margin:0 0 10px; font-weight:800; color:#1E1622;}
.ag-card p{font-size:12.5px; line-height:2; margin:0 0 20px; color:#4A3F50;}
.ag-row{display:flex; gap:10px; width:min(280px,92%); margin:0 auto;}
.ag-btn{position:relative; flex:1; border:0; cursor:pointer; font-family:inherit; font-weight:800;
  font-size:14px; padding:12px 0 13px; border-radius:999px;
  touch-action:manipulation; -webkit-user-select:none; user-select:none;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s cubic-bezier(.34,1.56,.64,1);}
.ag-btn::before{content:""; position:absolute; pointer-events:none; left:9%; top:9%;
  width:45%; height:15%; border-radius:999px; background:rgba(255,255,255,.92);}
.ag-btn:active{transform:scale(.94);}
.ag-yes{background:#FBC7D5; color:#6E2242; border:2px solid #EE8FAA;
  box-shadow:0 3px 0 rgba(200,120,145,.4), inset 0 -3px 4px rgba(200,120,145,.18);}
.ag-yes:active{box-shadow:0 1px 0 rgba(200,120,145,.4), inset 0 -2px 3px rgba(200,120,145,.18);}
.ag-no{background:#F1EFFB; color:#4A3F50; border:2px solid #A79EDA;
  box-shadow:0 3px 0 rgba(140,120,190,.35), inset 0 -3px 4px rgba(140,120,190,.16);}
.ag-no:active{box-shadow:0 1px 0 rgba(140,120,190,.35), inset 0 -2px 3px rgba(140,120,190,.16);}

.ag-agree{display:inline-flex; align-items:center; gap:7px; margin-top:14px; font-size:11px; font-weight:700;
  color:#6B5E75; cursor:pointer; -webkit-user-select:none; user-select:none;}
.ag-agree i{display:none;}
.ag-agree input{appearance:none; -webkit-appearance:none; margin:0; flex:0 0 auto; cursor:pointer;
  width:17px; height:17px; border-radius:5px; border:2px solid #EE8FAA; background:#fff;
  display:inline-grid; place-content:center;}
.ag-agree input::before{content:""; width:9px; height:5px; margin-top:-2px; opacity:0;
  border-left:2.5px solid #9E2F55; border-bottom:2.5px solid #9E2F55; transform:rotate(-45deg);}
.ag-agree input:checked::before{opacity:1;}

/* 夜(NIGHT-CLOCK が html / body に .night を つける) */
.night .ag-card{background:#0E1024;}
.night .ag-r18{color:#F0A8C0;}
.night .ag-card h2{color:#F2EDFA;}
.night .ag-card p{color:#B0A7C8;}
.night .ag-agree{color:#B0A7C8;}
.night .ag-agree input{background:#1B1932; border-color:#B0788F;}
.night .ag-agree input::before{border-color:#F0A8C0;}
.night .ag-no{background:#232244; border-color:#6E6BA8; color:#D7D0E8;
  box-shadow:0 3px 0 rgba(0,0,0,.5), inset 0 -3px 4px rgba(0,0,0,.3);}
.night .ag-no::before{background:rgba(255,255,255,.18);}   /* くらい 面の 照り線は おさえる */
.night .ag-no:active{box-shadow:0 1px 0 rgba(0,0,0,.5), inset 0 -2px 3px rgba(0,0,0,.3);}

/* 緞帳: 鮮明な 分身(クローン)が まんなかから 左右へ ひらく(扉を あける 感じ)。
   本体の モザイクは その 上に 残る */
#hsGateGhost{position:fixed; inset:0; z-index:9998; overflow:hidden; pointer-events:none;
  background:var(--page,#fff); box-sizing:border-box;
  clip-path:inset(0 50% 0 50%); -webkit-clip-path:inset(0 50% 0 50%);
  animation:hs-curtain 1.25s cubic-bezier(.45,.1,.3,1) forwards;}
@keyframes hs-curtain{to{clip-path:inset(0 0 0 0); -webkit-clip-path:inset(0 0 0 0);}}
#hsGateGhost #hsGateWrapGhost{filter:none !important;}

@media (prefers-reduced-motion: reduce){
  #hsGateGhost{animation:none;}
  #ageGate, .ag-card, .ag-btn{transition:none;}
}