/**
 * ぴよたそおみくじ - 共通スタイル
 * 
 * Lism CSSのカスタム変数とサイト固有のコンポーネントスタイルを定義
 */

/* =============================================================================
   CSS カスタムプロパティ（CSS変数）
   ============================================================================= */
:root {
  /* Lism CSS サイズ変数の上書き */
  --sz--m: 640px;
  --sz--s: 480px;
  --sz--xs: 380px;
  --sz--min: 350px;

  /* サイト固有のカラー */
  --brand: #F1DD46;
  --accent: #F56F8E;
  --accent-dark: #C84D69;
  --base-2: #FDF1D3;
  --bronze: #D0B254;
}

/* =============================================================================
   共通コンポーネント
   ============================================================================= */

/* -----------------------------------------------------------------------------
   z--btn: ボタンコンポーネント
   ----------------------------------------------------------------------------- */
.z--btn {
  display: flex;
  padding: 1rem 2rem;
  background-color: var(--accent);
  color: #FFF;
  text-decoration: none;
  -webkit-text-stroke: 4px var(--accent-dark);
  paint-order: stroke;
  box-shadow: 0 4px 0 var(--accent-dark);
  border-radius: 1rem;
}

.z--btn.z--btn--thick {
  -webkit-text-stroke: 8px var(--accent-dark);
}

.z--btn:hover {
  background-color: var(--accent-dark);
  box-shadow: 0 2px 0 var(--accent-dark);
  transform: translateY(2px);
}

/* -----------------------------------------------------------------------------
   z--simpleBtn: シンプルなボタンコンポーネント
   ----------------------------------------------------------------------------- */
.z--simpleBtn {
  display: flex;
  padding: 0.5rem;
  background-color: var(--white);
  color: var(--black);
  text-decoration: none;
  border-radius: .5rem;
  border: 2px solid;
  justify-content: center;
  font-weight: bold;
}
.z--simpleBtn:hover {
  background-color: var(--black);
  color: var(--white);
}

/* -----------------------------------------------------------------------------
   z--snsLinks: SNSリンクコンポーネント
   ----------------------------------------------------------------------------- */
.z--snsLinks {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s15);
}
.z--snsLinks_heading {
  display: flex;
  align-items: flex-end;
  gap: var(--s10);
  font-size: var(--fz--l);
  text-align: center;
  font-weight: var(--fw--bold);
  color: var(--bronze);
}
.z--snsLinks_heading::before {
  display: block;
  content: '\005C';
}
/* / を文字コードで表示 */
.z--snsLinks_heading::after {
  display: block;
  content: '/';
}
.z--snsLinks_list {
  display: flex;
  gap: 1.25rem;
}
.z--snsLinks_item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  color: white;
  border: none;
  border-radius: var(--bdrs--99);
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  text-decoration: none;
}
.z--snsLinks_item:hover {
  transform: scale(1.1);
}
.z--snsLinks_item:active {
  transform: scale(0.95);
}
/* X（旧Twitter） - 黒背景 */
.z--snsLinks_item--x {
  background-color: #000;
}
/* LINE - 公式カラー */
.z--snsLinks_item--line {
  background-color: #06C755;
}
/* クリップボードコピー - グレー */
.z--snsLinks_item--copy {
  background-color: #666;
}
/* ツールチップ */
.z--snsLinks_tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background-color: var(--black);
  color: var(--white);
  font-size: var(--fz--s);
  font-weight: var(--fw--bold);
  white-space: nowrap;
  border-radius: var(--bdrs--10);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}
.z--snsLinks_tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--black);
}
.z--snsLinks_item.is--copied .z--snsLinks_tooltip {
  opacity: 1;
  visibility: visible;
}

/* -----------------------------------------------------------------------------
   z--strokeTxt: ストローク付きテキストコンポーネント
   ----------------------------------------------------------------------------- */
.z--strokeTxt {
  color: var(--white);
  -webkit-text-stroke: 4px var(--black);
  paint-order: stroke;
}

/* -----------------------------------------------------------------------------
   z--headingGrp: 見出しグループコンポーネント
   ----------------------------------------------------------------------------- */
.z--headingGrp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s10);
  text-align: center;
  border-bottom: 4px dashed var(--brand);
  margin-block-end: var(--s50);
  padding-block: var(--s20);
}
.z--headingGrp_txt {
  font-size: var(--fz--3xl);
  font-weight: var(--fw--bold);
}
.z--headingGrp_subTxt {
  font-size: var(--fz--l);
  font-weight: var(--fw--bold);
  color: var(--bronze);
}

/* -----------------------------------------------------------------------------
   z--gameArea: ゲームエリアコンポーネント
   ----------------------------------------------------------------------------- */
.z--gameArea {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s30);
}
.z--gameArea_headingWrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s10);
}
.z--gameArea_heading {
  font-size: var(--fz--4xl);
  font-weight: var(--fw--bold);
  text-indent: 10px;
}
.z--gameArea_subHeading {
  font-size: var(--fz--l);
  font-weight: var(--fw--bold);
}
.z--gameArea_count {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--white);
  border: 2px solid var(--black);
  border-radius: var(--bdrs--20);
  padding: var(--s5) var(--s20);
  margin-block-start: var(--s10);
}
.z--gameArea_countTxt {
  font-size: var(--fz--l);
  font-weight: var(--fw--bold);
}
.z--gameArea_body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s30);
  width: 100%;
  background-color: var(--base-2);
  padding-block: var(--s50);
  margin-block-start: -56px;
}
.z--gameArea_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s20);
  padding-inline: var(--s20);
  max-width: 460px;
}
.z--gameArea_item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  gap: var(--s10);
  background-color: #FFF;
  border: 4px solid var(--brand);
  border-radius: var(--bdrs--30);
}
@container (min-width: 960px) {
  /* タッチ端末だとhoverが残ってしまうので、PCのみに適用 */
  .z--gameArea_item:hover {
    transform: translateY(-4px);
  }
}
.z--gameArea_imageWrapper {
  width: 100%;          /* 親コンテナに合わせて可変 */
  height: 0;            /* 高さは0にする */
  padding-top: 100%;    /* 横幅の100%を高さとして確保（これで1:1になる） */
  position: relative;   /* 子要素(img)の基準点にする */
  overflow: hidden;     /* はみ出し防止（念の為） */
  margin: 0;            /* figureタグのデフォルトマージンをリセット */
}
.z--gameArea_imageWrapper > img {
  position: absolute;   /* 親要素のpadding領域に重ねる */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: .5rem;
  object-fit: cover;    /* 画像の比率が1:1でなくても、歪まずにトリミングして埋める */
}
.z--gameArea_itemTitle {
  font-size: var(--fz--s);
  font-weight: var(--fw--bold);
  padding-inline: var(--s20);
  line-height: 1.5;
}
.z--gameArea_itemBtn {
  padding: var(--s10);
  background-color: var(--accent);
  color: var(--white);
  font-size: var(--fz--m);
  font-weight: var(--fw--bold);
  margin-inline: var(--s10);
  margin-block-end: var(--s10);
  border: none;
  border-radius: var(--bdrs--20);
}
.z--gameArea_itemBtn:hover {
  background-color: var(--accent-dark);
}
.z--gameArea_desc {
  font-size: var(--fz--m);
  font-weight: var(--fw--bold);
  margin-inline: auto;
  color: var(--bronze);
}

/* -----------------------------------------------------------------------------
   z--result: おみくじ結果コンポーネント
   ----------------------------------------------------------------------------- */
.z--result {
  container-type: inline-size;
  background-color: var(--base-2);
  padding: 2rem 1rem;
}
.z--result_inner {
  display: flex;
  flex-direction: column;
  gap: var(--s40);
  max-width: 480px;
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
   z--resultHead: おみくじ結果概要コンポーネント
   ----------------------------------------------------------------------------- */
.z--resultHead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s20);
}
.z--resultHead_heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1rem;
  gap: 1rem;
}
.z--resultHead_label {
  font-size: var(--fz--2xl);
  font-weight: var(--fw--bold);
  color: var(--white);
  /* 縁取り */
  -webkit-text-stroke: 4px var(--black);
  paint-order: stroke;
}
.z--resultHead_rank {
  font-size: min(7rem, 22vw);
  font-weight: var(--fw--black);
  color: var(--accent);
  /* 縁取り */
  -webkit-text-stroke: 10px var(--white);
  paint-order: stroke;
  /* ドロップシャドウ */
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.2))
}
.z--resultHead_rank--kyou {
  /* 凶・大凶の場合のスタイル */
  color: #8C6DCF; /* 例: 紫系の色 */
}
.z--resultHead_imageWrapper {
  width: 100%;
  max-width: 250px;
  height: auto;
}
.z--resultHead_imageWrapper > img {
  width: 100%;
  height: auto;
}
.z--resultHead_summary {
  margin-inline: auto;
  max-inline-size: max-content;
  max-width: 400px;
  font-size: var(--fz--l);
  font-weight: var(--fw--bold);
  color: var(--black);
  padding-inline: var(--s10);
  /* 縁取り */
  -webkit-text-stroke: 4px var(--white);
  paint-order: stroke;
}

/* -----------------------------------------------------------------------------
   z--resultAdvice: おみくじ結果アドバイスコンポーネント
   ----------------------------------------------------------------------------- */
.z--resultAdvice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s20);
}
.z--resultAdvice_heading {
  position: relative;
  display: flex;
  flex-direction: column;
  font-size: var(--fz--l);
  font-weight: var(--fw--bold);
  border: 2px solid var(--black);
  border-radius: var(--bdrs--20);
  padding: var(--s10) var(--s20);
  background-color: var(--white);
  min-width: 240px;
  text-align: center;
}
@container (min-width: 400px) {
  .z--resultAdvice_heading  {
    flex-direction: row;
    align-items: baseline;
    gap: var(--s5);
  }
}
.z--resultAdvice_body {
  font-size: var(--fz--m);
  font-weight: var(--fw--bold);
  background-color: var(--white);
  border: 4px solid var(--brand);
  border-radius: var(--bdrs--20);
  padding: var(--s40);
  font-size: var(--fz--l);
  font-weight: var(--fw--bold);
  margin-block-start: -47px;
}
.z--resultAdvice_txt {
  font-size: var(--fz--m);
  font-weight: var(--fw--bold);
  margin-block-start: 1rem;
}

/* -----------------------------------------------------------------------------
   z--resultItems: おみくじ結果各項目コンポーネント
   ----------------------------------------------------------------------------- */
.z--resultItems {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s20);
}
@container (min-width: 400px) {
  .z--resultItems {
    grid-template-columns: 1fr 1fr;
  }
}
.z--resultItems_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--white);
  border-radius: var(--bdrs--20);
  padding: var(--s20);
}
.z--resultItems_title {
  font-size: var(--fz--m);
  font-weight: var(--fw--bold);
}     
.z--resultItems_stars {
  display: flex;
  align-items: center;
}
.z--resultItems_star {
  font-size: var(--fz--xl);
  color: var(--brand);
} 
.z--resultItems_comment {
  font-size: var(--fz--s);
  line-height: 1.7;
  margin-block-start: var(--s10);
} 

/* -----------------------------------------------------------------------------
   z--ogpPreview: OGPプレビューコンポーネント
   ----------------------------------------------------------------------------- */
.z--ogpPreview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s20);
}
.z--ogpPreview_heading {
  font-size: var(--fz--xl);
  font-weight: var(--fw--bold);
}
.z--ogpPreview_container {
  width: 100%;
  height: 100%;
}

/* -----------------------------------------------------------------------------
   z--xShareBtn: Xにポストするボタンコンポーネント
   ----------------------------------------------------------------------------- */
.z--xShareBtn {
  display: block;
  background: var(--black);
  font-size: var(--fz--l);
  font-weight: var(--fw--bold);
  color: var(--white);
  text-decoration: none;
  padding: var(--s15) var(--s30);
  border-radius: var(--bdrs--20);
}
.z--xShareBtn:hover {
  opacity: 0.8;
}

/* -----------------------------------------------------------------------------
   z--selectedMaterialCard: 選んだ素材カードコンポーネント
   ----------------------------------------------------------------------------- */
.z--selectedMaterialCard {
  background-color: var(--white);
  border: 4px solid var(--brand);
  border-radius: var(--bdrs--20);
  padding: var(--s15);
  text-decoration: none;
}
.z--selectedMaterialCard:hover {
  transform: translateY(-4px);
}
.z--selectedMaterialCard_body {
  display: flex;
  flex-direction: column;
  gap: var(--s10);
  padding: var(--s20);
}
.z--selectedMaterialCard_title {
  font-size: var(--fz--m);
  font-weight: var(--fw--bold);
  color: var(--black);
}

/* -----------------------------------------------------------------------------
   #loading-overlay: ローディングオーバーレイ（HTMXインジケーター）
   ----------------------------------------------------------------------------- */
#loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  max-height: 100svh;
}
/* HTMXリクエスト中に表示 */
#loading-overlay.htmx-request {
  display: flex;
}
#loading-content {
  background-color: var(--white);
  padding: 2rem;
  border-radius: var(--bdrs--30);
}
#loading-overlay img {
  width: 100px;
  height: auto;
  transform: translateX(3px);
}
#loading-text {
  font-size: var(--fz--l);
  font-weight: var(--fw--bold);
  margin-top: var(--s20);
}
#loading-sub-text {
  font-size: var(--fz--s);
  margin-top: var(--s5);
}