/* Result page stylesheet */

/* Import the main theme (Rose Glow) */
@import url("./style.css");

/* Layout for result pages */
body{
  /* ensure background from style.css applies */
}

.result-block {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}

.result-block h2{
  margin: 0 0 8px;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: .02em;
}

.result-img{
  display:block;
  width: 240px;
  max-width: 60%;
  height: auto;
  margin: 12px auto 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: var(--shadow);
}

.section {
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 16px;
  margin: 18px 0;

  display: flex;
  justify-content: center;
}

.section h3{
  margin: 0 0 8px;
  font-size: clamp(16px, 2.2vw, 22px);
}

.share-block{
  margin-top: 24px;
  text-align: center;
}

.share-button{
  display:inline-block;
  margin: 8px 8px 0;
  padding: 12px 16px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  color: #2A0E16;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 18px rgba(255,122,162,.25);
}

.share-button:hover{
  transform: translateY(-1px);
}

.nav-buttons{
  display:flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
}

.retry-button, .top-button{
  display:inline-block;
  padding: 12px 18px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  font-weight: 700;
  color: #2A0E16;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 18px rgba(255,122,162,.25);
}

.sns-buttons{ margin-top: 8px; }

.sns-buttons-row{
  margin-top: 12px;
  justify-content: center;
  gap: 12px;
}


/* --- Results page layout polish --- */
/* Outer page section (wrapper) should not draw a card; avoid double frames */
body > .section {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;

  display: flex;
  justify-content: center;
}

/* Main result card */
.result-block {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}

/* Inner sections inside the card */
.result-block .section {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 18px 0;
  box-shadow: none; /* avoid stacked shadows */

  display: flex;
  justify-content: center;
}

/* Headings spacing */
.result-block .section h3{
  margin: 0 0 10px;
}

/* Image block spacing */
.result-img{
  display:block;
  width: 240px;
  max-width: 60%;
  height: auto;
  margin: 12px auto 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

/* Buttons container spacing */
.nav-buttons{
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* Second row SNS buttons */
.sns-buttons-row{
  margin-top: 14px;
  justify-content: center;
  gap: 12px;
}


/* --- Layout tweak: widen outer card and constrain inner blocks --- */
.result-block {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}

.result-block *{ box-sizing: border-box; }

.result-block .section {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;

  display: flex;
  justify-content: center;
}


/* --- Center result card to align with title --- */
.result-block {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}


/* --- Hard center the outer results container --- */
body > .section {
  display: flex !important;
  justify-content: center !important;
  padding-left: 16px !important;
  padding-right: 16px !important;

  display: flex;
  justify-content: center;
}


/* --- Strong center for outer card --- */
body > .section {
  display: block !important;          /* reset flex just in case */
  padding-left: 16px !important;
  padding-right: 16px !important;

  display: flex;
  justify-content: center;
}
.result-block {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Safety margin adjustment (2025-08-11) --- */
.result-block {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 480px) {
  .result-block {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}
}


/* --- Hard center fix (2025-08-11-b) --- */
/* .section は変更せず、.result-block 側だけで確実に中央寄せ */
.section > .result-block {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 480px) {
  .section > .result-block {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}
}


/* --- Hard center transform fix (2025-08-11-c) --- */
/* .section は変更せず、親のレイアウト影響を受けても確実に中央へ */
.section > .result-block {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 480px) {
  .section > .result-block {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}
}


/* --- Viewport-symmetric centering fallback (2025-08-11-d) --- */
/* 親の影響を完全に無視して、ビューポート基準で左右均等マージンを計算して中央に配置 */
.section > .result-block {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 480px) {
  .section > .result-block {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}
}


/* === FINAL CENTER (2025-08-11-final) === */
/* 余計な left/transform や calc(vw) は使わず、純粋に margin:auto + clamp 幅で中央 */
.section > .result-block {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 480px){
  .section > .result-block {
  max-width: 805px;
  margin-left: auto;
  margin-right: auto;
}
}


/* --- Revert: .section must not be flex; restore block flow --- */
.section {
  display: block !important;
  justify-content: normal !important;
  align-items: normal !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
}

/* --- Robust center for only the outer card --- */
.section > .result-block {
  margin: 20px auto !important;
  width: clamp(0px, calc(100% - 32px), 1100px) !important; /* safety margin 16px */
  max-width: 1100px !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .section > .result-block {
    width: clamp(0px, calc(100% - 24px), 1100px) !important; /* safety margin 12px */
  }
}


/* --- Top-level wrapper symmetric padding (2025-08-11 TLP) --- */
body > .section{
  box-sizing: border-box !important;
  padding-left: 16px !important;
  padding-right: 16px !important; /* symmetric */
  margin: 0 !important;
  width: 100% !important;
}
/* Ensure the card itself stays centered with safety margins */
.section > .result-block{
  margin: 20px auto !important;
  width: clamp(0px, calc(100% - 32px), 1100px) !important;
  max-width: 1100px !important;
  box-sizing: border-box !important;
}
@media (max-width: 480px){
  .section > .result-block{
    width: clamp(0px, calc(100% - 24px), 1100px) !important;
  }
}


/* --- Narrow wrapper to 700px (2025-08-11) --- */
body > .section{
  max-width: 700px !important;
  margin-inline: auto !important; /* center the wrapper itself */
}


/* --- SNS official icon buttons (2025-08-11) --- */
.sns-buttons-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.sns-buttons-row a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  color: #fff;
}
.sns-icon { width: 18px; height: 18px; display:inline-block; }
/* brand colors */
.sns-x { background: #000; color: #fff; }
.sns-fb { background: #1877F2; color: #fff; }
.sns-line { background: #06C755; color: #fff; }
#snsShare .sns-line .sns-icon .line-white { fill:#fff !important; stroke:#fff !important; }
#snsShare .sns-line .sns-icon .line-green { fill:#06C755 !important; stroke:none !important; }
#snsShare .sns-x { color:#fff !important; } /* 文字色の保険 */
#snsShare .sns-x .sns-icon,
#snsShare .sns-x .sns-icon * {
  fill:#fff !important;
  stroke:none !important; /* 余計なストローク無効化 */
}
#snsShare .sns-line .sns-icon { width:22px; height:22px; }
#snsShare .sns-line { display:inline-flex; align-items:center; }