/* 2026-09-25 polish1 司さん「横向きしなくてもいいとかできないの？スマホ対策もしてて」+ 点検で見つかった前からの課題。
   見た目だけの層。?polish=0 で旧 (html[data-polish] の時だけ効く)。 */

/* ── スマホの横向き: 縦向きの案内を全面に (ブラウザでは向きを固定できないため) ── */
#p3-rotate-guard { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  html[data-polish] #p3-rotate-guard {
    display: flex; position: fixed; inset: 0; z-index: 2147483000;
    flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: radial-gradient(60% 80% at 50% 45%, #0d1118, #030406 70%);
    color: rgba(236,244,250,.9);
    font: 500 15px/1.6 -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", sans-serif;
    letter-spacing: .08em; text-align: center; padding: 24px;
  }
  html[data-polish] #p3-rotate-guard svg { width: 54px; height: 54px; animation: p3RotateHint 2.6s cubic-bezier(.6,0,.3,1) infinite; }
  html[data-polish] #p3-rotate-guard small { display: block; font-size: 12px; color: rgba(200,215,225,.6); letter-spacing: .12em; }
  html[data-polish] body { overflow: hidden !important; }
}
@keyframes p3RotateHint { 0%, 20% { transform: rotate(-90deg); } 55%, 100% { transform: rotate(0deg); } }
@media (prefers-reduced-motion: reduce) { html[data-polish] #p3-rotate-guard svg { animation: none; } }

/* ── 幅 380px 以下: 右上のボタンが「inryokü」の文字に重なっていた (320px で 9px) → 少し上へ ── */
@media (max-width: 380px) {
  html[data-polish] #p3-stargaze-toggle,
  html[data-polish] #myspace-launcher,
  html[data-polish] #p3-sound-toggle,
  html[data-polish] #cart-icon { translate: 0 -13px; }
}

/* ── トーク: 「粒子で話す」の間は「動きを試す」を出さない (例文と辞書リンクを覆っていた) ── */
html[data-polish] #inryoku-chat.chat-cosmos:has(.particle-language-panel:not([hidden])) #info-motion-trial { display: none !important; }
/* スマホで「動きを試す」を開くと見出しと閉じるボタンまで覆っていた → 高さを抑えて中でスクロール */
@media (max-width: 600px) {
  html[data-polish] #inryoku-chat .info-motion-trial-panel { max-height: min(26dvh, 210px) !important; }
}

/* ── 商品の詳細: 6.5〜10px の文字と 20px の高さのリンク ── */
html[data-polish] .product-modal .product-head-meta span { font-size: 11px !important; color: rgba(222,236,244,.68) !important; }
html[data-polish] .product-modal .product-assurance span { font-size: 10.5px !important; color: rgba(224,236,244,.68) !important; letter-spacing: .12em; }
html[data-polish] .product-modal .product-specs { font-size: 11.5px !important; color: rgba(214,224,232,.74) !important; }
html[data-polish] .product-modal .size-label { color: rgba(222,236,244,.72) !important; }
html[data-polish] .product-modal .product-notify-btn { font-size: 12px !important; }
html[data-polish] .product-modal .product-shipping-info a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: rgba(222,232,238,.74) !important;
}