/* =========================================================
   mode.css
   表示モード選択：わくわく / シンプル
   - 初回訪問時に選択
   - シンプルは音・演出・かわいい要素を抑えて文字中心
========================================================= */

.mh-mode-choice[hidden]{
    display:none !important;
  }
  
  .mh-mode-choice{
    position:fixed;
    inset:0;
    z-index:2147483646;
    display:grid;
    place-items:center;
    padding:20px;
    background:rgba(24,18,10,.48);
    backdrop-filter:blur(2px);
  }
  
  .mh-mode-card{
    width:min(92vw, 520px);
    padding:22px 18px 20px;
    border-radius:24px;
    border:1px solid rgba(191,151,72,.72);
    background:
      radial-gradient(circle at 50% 0%, rgba(255,249,224,.98), rgba(255,255,255,.98) 46%, rgba(244,232,203,.98) 100%);
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.94),
      0 18px 42px rgba(33,22,8,.26);
    text-align:center;
    color:#3f2b1c;
  }
  
  .mh-mode-kicker{
    margin:0 0 4px;
    font-size:13px;
    font-weight:900;
    color:#87612c;
    letter-spacing:.08em;
  }
  
  .mh-mode-card h2{
    margin:0 0 8px;
    font-family:"Yuji Syuku","Hiragino Mincho ProN","Yu Mincho",serif;
    font-size:clamp(24px, 6vw, 34px);
    font-weight:900;
    color:#3f2b1c;
  }
  
  .mh-mode-card p{
    margin:0 0 16px;
    font-weight:800;
    line-height:1.7;
    color:#60462e;
  }
  
  .mh-mode-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  
  .mh-mode-btn{
    appearance:none;
    border:1px solid rgba(170,132,61,.78);
    border-radius:18px;
    padding:15px 10px;
    min-height:106px;
    cursor:pointer;
    text-align:center;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.92),
      0 6px 0 rgba(132,94,39,.44),
      0 10px 18px rgba(58,38,14,.16);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  
  .mh-mode-btn:active{
    transform:translateY(5px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.7),
      0 2px 0 rgba(132,94,39,.38),
      0 5px 12px rgba(58,38,14,.12);
  }
  
  .mh-mode-btn span{
    display:block;
    font-size:clamp(18px, 4.6vw, 24px);
    font-weight:900;
    color:#3b2819;
  }
  
  .mh-mode-btn small{
    display:block;
    margin-top:8px;
    font-size:13px;
    font-weight:800;
    line-height:1.45;
    color:#60462e;
  }
  
  .mh-mode-btn--waku{
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,.92), rgba(255,255,255,0) 44%),
      linear-gradient(180deg, #fff8db, #f0d78b);
  }
  
  .mh-mode-btn--simple{
    background:
      linear-gradient(180deg, #fff, #ece8df);
    border-color:rgba(110,99,81,.55);
  }
  
  .mh-mode-toggle{
    position:fixed;
    right:10px;
    bottom:calc(112px + env(safe-area-inset-bottom));
    z-index:99998;
    padding:8px 11px;
    border-radius:999px;
    border:1px solid rgba(120,88,39,.50);
    background:rgba(255,253,246,.92);
    color:#3f2b1c;
    font-size:12px;
    font-weight:900;
    box-shadow:0 5px 15px rgba(44,30,12,.18);
  }
  
  /* シンプルモード：全体を落ち着かせる */
  html.mode-simple body{
    background:#f7f5ef !important;
    color:#27231d;
  }
  
  html.mode-simple *{
    animation:none !important;
    transition:none !important;
  }
  
  html.mode-simple img{
    filter:grayscale(.35) contrast(.96);
  }
  
  html.mode-simple .mh-copy,
  html.mode-simple .mh-today-card,
  html.mode-simple .mh-feature-link,
  html.mode-simple .rank-banner,
  html.mode-simple .ema-mini,
  html.mode-simple .ema-slide{
    box-shadow:none !important;
    border-color:#d8d1c4 !important;
  }
  
  /* シンプルモード：投稿メニューを文字中心にする */
  html.mode-simple .pm20-heading,
  html.mode-simple .pm20-scroll-img,
  html.mode-simple .pm20-prayer-wrap{
    display:none !important;
  }
  
  html.mode-simple .pm20-wrap{
    width:min(100%, 720px);
    padding:18px 14px 90px;
  }
  
  html.mode-simple .pm20-wrap::before{
    content:"投稿メニュー";
    display:block;
    margin:0 auto 14px;
    padding:0 0 10px;
    border-bottom:2px solid #333;
    color:#222;
    font-size:28px;
    font-weight:900;
    letter-spacing:.03em;
    text-align:left;
  }
  
  html.mode-simple .pm20-scroll-stage{
    width:100% !important;
    margin:0 auto;
    padding:0;
  }
  
  html.mode-simple .pm20-panel{
    position:static !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    height:auto !important;
    transform:none !important;
  }
  
  html.mode-simple .pm20-grid{
    height:auto !important;
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    align-content:start;
  }
  
  html.mode-simple .pm20-item--thanks{
    grid-column:auto;
    width:100%;
  }
  
  html.mode-simple .pm20-card{
    min-height:auto !important;
    display:block;
    padding:15px 16px;
    border-radius:8px;
    border:1px solid #cfc7b8;
    background:#fff !important;
    color:#222;
    box-shadow:none !important;
    text-align:left;
  }
  
  html.mode-simple .pm20-card::before,
  html.mode-simple .pm20-card::after,
  html.mode-simple .pm20-icon,
  html.mode-simple .pm20-title::after{
    display:none !important;
  }
  
  html.mode-simple .pm20-title,
  html.mode-simple .pm20-title--long,
  html.mode-simple .pm20-title--kingan{
    display:block;
    padding:0;
    color:#222;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size:20px;
    font-weight:900;
    line-height:1.35;
    letter-spacing:0;
    white-space:normal;
    text-shadow:none;
  }
  
  html.mode-simple .pm20-sub{
    display:block;
    margin-top:5px;
    color:#555;
    font-size:15px;
    font-weight:700;
    line-height:1.5;
    white-space:normal;
  }
  
  /* PCでは右下ボタンを少し上へ */
  @media(min-width:992px){
    .mh-mode-toggle{
      bottom:18px;
    }
  }
  
  @media(max-width:520px){
    .mh-mode-actions{
      grid-template-columns:1fr;
    }
  
    .mh-mode-card{
      padding:18px 14px;
    }
  
    .mh-mode-btn{
      min-height:86px;
    }
  }
  /* =========================================================
     mode.css v31 追加
     - top.css / style.css より後ろで読む前提の強い上書き
     - シンプルモードを「文字中心・無音・演出なし」に寄せる
  ========================================================= */
  
  body.is-mode-choice-open{
    overflow:hidden !important;
  }
  
  html.mode-simple body{
    background:#f7f5ef !important;
    color:#222 !important;
  }
  
  /* TOPを文字中心にする */
  html.mode-simple #randomHeader,
  html.mode-simple .mh-hero-img{
    display:none !important;
  }
  
  html.mode-simple .mh-top-hero{
    max-width:900px;
    padding:14px 14px 4px;
    text-align:left;
  }
  
  html.mode-simple .mh-hero-card{
    overflow:visible !important;
    border:0 !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
  }
  
  html.mode-simple .mh-copy{
    width:100% !important;
    margin:0 auto 12px !important;
    padding:16px 14px !important;
    border:1px solid #d8d1c4 !important;
    border-radius:8px !important;
    background:#fff !important;
    box-shadow:none !important;
    text-align:left !important;
  }
  
  html.mode-simple .mh-copy h1{
    font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size:clamp(24px, 5.8vw, 34px) !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
  }
  
  html.mode-simple .mh-copy p{
    font-size:clamp(16px, 3.8vw, 18px) !important;
    font-weight:700 !important;
    line-height:1.7 !important;
  }
  
  /* TOPカードも文字メニュー風 */
  html.mode-simple .mh-today-card,
  html.mode-simple .mh-home-ema{
    background:#fff !important;
    border:1px solid #d8d1c4 !important;
    border-radius:8px !important;
    box-shadow:none !important;
  }
  
  html.mode-simple .mh-section-title,
  html.mode-simple .mh-feature h2{
    color:#222 !important;
    text-align:left !important;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size:clamp(22px, 5vw, 30px) !important;
    border-bottom:2px solid #333;
    padding-bottom:6px;
  }
  
  html.mode-simple .mh-feature-grid{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }
  
  html.mode-simple .mh-feature-link{
    display:block !important;
    padding:13px 14px !important;
    border-radius:8px !important;
    border:1px solid #d8d1c4 !important;
    background:#fff !important;
    box-shadow:none !important;
  }
  
  html.mode-simple .mh-feature-main{
    display:block;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size:18px !important;
    font-weight:900 !important;
    color:#222 !important;
  }
  
  html.mode-simple .mh-feature-main::after{
    content:" →";
    font-weight:900;
  }
  
  html.mode-simple .mh-feature-sub{
    font-size:14px !important;
    font-weight:700 !important;
    color:#555 !important;
  }
  
  /* 絵馬まわりの可愛いバッジ類を落ち着かせる */
  html.mode-simple .poster-name,
  html.mode-simple .poster-name--mini,
  html.mode-simple .mh-home-ema .card-time-topleft{
    background:#fff !important;
    border:1px solid #d8d1c4 !important;
    box-shadow:none !important;
    border-radius:6px !important;
  }
  
  html.mode-simple .rank-mini,
  html.mode-simple .rank-badge{
    display:none !important;
  }
  
  html.mode-simple .rank-banner{
    background:#fff !important;
    border:1px solid #d8d1c4 !important;
    box-shadow:none !important;
    border-radius:8px !important;
  }
  
  /* PCナビも過度な金色を抑える */
  html.mode-simple .navbar.bg-light,
  html.mode-simple .navbar .dropdown-menu{
    background:#fff !important;
    border-color:#d8d1c4 !important;
    box-shadow:none !important;
  }
  
  html.mode-simple .navbar.navbar-light .nav-link,
  html.mode-simple .navbar .dropdown-item{
    color:#222 !important;
    background:#fff !important;
    box-shadow:none !important;
    border-radius:4px !important;
    font-weight:800 !important;
  }
  
  html.mode-simple .navbar.navbar-light .nav-link.active,
  html.mode-simple .navbar.navbar-light .show > .nav-link{
    background:#efede8 !important;
    color:#111 !important;
  }
  
  /* 表示モードボタンもシンプル時は控えめ */
  html.mode-simple .mh-mode-toggle{
    background:#fff !important;
    border-color:#bbb !important;
    color:#222 !important;
    box-shadow:none !important;
  }
  
  /* 選択モーダル：シンプル寄りでも見やすく */
  html.mode-simple .mh-mode-card{
    border-radius:10px !important;
    background:#fff !important;
    box-shadow:none !important;
    border:1px solid #bbb !important;
  }
  
  html.mode-simple .mh-mode-btn{
    border-radius:8px !important;
    box-shadow:none !important;
  }
  /* =========================================================
     mode.css v32 追加
     - 選択画面は毎回表示される前提
     - PC/スマホのナビを全ページで常に固定
  ========================================================= */
  
  body.is-mode-choice-open{
    overflow:hidden !important;
  }
  
  body.is-mode-choice-open .mh-mode-toggle{
    display:none !important;
  }
  
  /* PC上部ナビ：常に固定 */
  @media(min-width:992px){
    body{
      padding-top:64px !important;
    }
  
    .navbar.fixed-top,
    nav.navbar.fixed-top{
      position:fixed !important;
      top:0 !important;
      left:0 !important;
      right:0 !important;
      z-index:100000 !important;
    }
  
    main{
      min-height:calc(100vh - 120px);
    }
  }
  
  /* スマホ・タブレット下ナビ：常に固定 */
  @media(max-width:991.98px){
    body{
      padding-bottom:calc((var(--nav-h, 36px) * 2) - var(--row-overlap, 6px) + env(safe-area-inset-bottom) + 10px) !important;
    }
  
    .bottom-nav{
      position:fixed !important;
      left:0 !important;
      right:0 !important;
      bottom:0 !important;
      display:flex !important;
      z-index:100000 !important;
    }
  
    .bottom-nav.second-row{
      position:fixed !important;
      left:0 !important;
      right:0 !important;
      bottom:calc(var(--nav-h, 36px) - var(--row-overlap, 6px)) !important;
      display:flex !important;
      z-index:99999 !important;
    }
  
    .mh-mode-toggle{
      bottom:calc((var(--nav-h, 36px) * 2) - var(--row-overlap, 6px) + env(safe-area-inset-bottom) + 12px) !important;
    }
  }
  
  /* 選択画面はナビよりさらに上 */
  .mh-mode-choice{
    z-index:2147483646 !important;
  }
  /* =========================================================
     mode.css v33 追加
     - 初回選択は1回だけ
     - 右下のモード切替ボタンをPC/スマホ両方で見やすく
  ========================================================= */
  
  .mh-mode-toggle{
    position:fixed !important;
    right:14px !important;
    z-index:2147483000 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:2px !important;
    min-width:132px !important;
    min-height:52px !important;
    padding:8px 12px !important;
    border-radius:999px !important;
    border:2px solid rgba(129,86,30,.72) !important;
    background:
      linear-gradient(180deg, rgba(255,253,244,.98), rgba(245,224,168,.98)) !important;
    color:#2b180c !important;
    font-weight:900 !important;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,.92),
      0 5px 0 rgba(124,84,33,.38),
      0 12px 24px rgba(45,29,10,.22) !important;
    cursor:pointer !important;
  }
  
  .mh-mode-toggle-main{
    display:block !important;
    font-size:14px !important;
    line-height:1.1 !important;
    letter-spacing:.02em !important;
  }
  
  .mh-mode-toggle-sub{
    display:block !important;
    font-size:11px !important;
    line-height:1.1 !important;
    color:#6a4a21 !important;
  }
  
  .mh-mode-toggle:active{
    transform:translateY(3px) !important;
    box-shadow:
      inset 0 2px 8px rgba(60,38,14,.18),
      0 2px 0 rgba(124,84,33,.34),
      0 6px 14px rgba(45,29,10,.18) !important;
  }
  
  html.mode-simple .mh-mode-toggle{
    background:#fff !important;
    border:2px solid #333 !important;
    color:#111 !important;
    box-shadow:0 6px 16px rgba(0,0,0,.18) !important;
  }
  
  html.mode-simple .mh-mode-toggle-sub{
    color:#333 !important;
  }
  
  /* PCは右下に常時固定 */
  @media(min-width:992px){
    .mh-mode-toggle{
      bottom:22px !important;
    }
  }
  
  /* スマホは2段ナビの上に固定 */
  @media(max-width:991.98px){
    .mh-mode-toggle{
      right:8px !important;
      bottom:calc((var(--nav-h, 36px) * 2) - var(--row-overlap, 6px) + env(safe-area-inset-bottom) + 12px) !important;
      min-width:126px !important;
      min-height:48px !important;
      padding:7px 10px !important;
    }
  
    .mh-mode-toggle-main{
      font-size:13px !important;
    }
  
    .mh-mode-toggle-sub{
      font-size:10px !important;
    }
  }
  
  /* 選択中はボタンが邪魔しないよう隠す */
  body.is-mode-choice-open .mh-mode-toggle{
    display:none !important;
  }