/* =================================
   STAMP CARD PC VERSION
   Scoped to sc-provider
   ================================= */

/* Web Components初期化 */
sc-provider:not(:defined) {
  visibility: hidden;
}

/* CSS変数定義 - スコープ内限定 */
sc-provider {
  /* 基本サイズ */
  --card-width: 960px;
  --stamp-size-large: 180px;
  --stamp-size-medium: 156px;
  --stamp-counter-size: 289px;
  /* Z-index階層 */
  --z-stamp: 10;
  --z-stamp-counter: 12;
  --z-status: 20;
  --z-button: 25;
  /* カラー */
  --bg-dimmed: rgba(0, 0, 0, 0.7);
  --btn-primary: #e93639;
  --text-light: white;
  /* トランジション */
  --transition-opacity: opacity 0.3s ease;
}

/* 基本コンテナ */
sc-provider .stamp-card-container {
  position: relative;
  width: var(--card-width);
  margin: 0 auto;
}

sc-provider .stamp-card-main {
  position: relative;
  display: block;
}

sc-provider .stamp-card-image {
  width: 100%;
  height: auto;
  display: block;
}

/* レイアウトコンテナ */
sc-provider .stamp-base-layout {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-stamp);
}

sc-provider .stamp-overlay-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-stamp);
}

/* スタンプオーバーレイ */
sc-provider .stamp-overlay {
  position: absolute;
  transform: translate(-50%, -50%);
}

sc-provider .stamp-overlay[href] {
  cursor: pointer;
  pointer-events: auto;
  text-decoration: none;
  outline: none;
  user-select: none;
}

sc-provider .stamp-overlay img,
sc-provider .stamp-overlay[href] img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* スタンプサイズ */
sc-provider .stamp-overlay.stamp-0,
sc-provider .stamp-overlay.stamp-1,
sc-provider .stamp-overlay.stamp-2,
sc-provider .stamp-overlay.stamp-3,
sc-provider .stamp-overlay.stamp-4,
sc-provider .stamp-overlay.stamp-5 {
  width: var(--stamp-size-large);
}

sc-provider .stamp-overlay.stamp-6,
sc-provider .stamp-overlay.stamp-7,
sc-provider .stamp-overlay.stamp-8 {
  width: var(--stamp-size-medium);
}

/* スタンプ位置 */
sc-provider .stamp-0 { top: 274px; left: 133px; }
sc-provider .stamp-1 { top: 274px; left: 349px; }
sc-provider .stamp-2 { top: 274px; left: 565px; }
sc-provider .stamp-3 { top: 559px; left: 133px; }
sc-provider .stamp-4 { top: 559px; left: 349px; }
sc-provider .stamp-5 { top: 559px; left: 565px; }
sc-provider .stamp-6 { top: 903px; left: 257px; }
sc-provider .stamp-7 { top: 903px; left: 481px; }
sc-provider .stamp-8 { top: 903px; left: 709px; }

/* スタンプカウンター */
sc-provider .stamp-counter {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 383px;
  left: 815px;
  width: var(--stamp-counter-size);
  z-index: var(--z-stamp-counter);
}

/* 達成済みスタンプ調整 */
sc-provider .stamp-overlay.stamp-6[data-case="true"],
sc-provider .stamp-overlay.stamp-7[data-case="true"],
sc-provider .stamp-overlay.stamp-8[data-case="true"] {
  top: 899px;
}

/* ステータスオーバーレイ */
sc-provider .status-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  z-index: var(--z-status);
  border-radius: 14px;
  overflow: hidden;
}

sc-provider .status-overlay.dimmed {
  background: var(--bg-dimmed);
}

sc-provider .status-message {
  color: var(--text-light);
  text-align: center;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.6;
  transform: translateY(-30px);
  letter-spacing: 0.14em;
}

sc-provider .status-message.error::before {
  content: '';
  display: block;
  width: 86px;
  height: 75px;
  background: url('../img/pc_icon.png') no-repeat center center / contain;
  margin: 0 auto 20px;
}

/* ログインボタン */
sc-provider .login-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 32px auto 0;
  background: var(--btn-primary);
  color: var(--text-light);
  text-decoration: none;
  border-radius: 10px;
  font-size: 26px;
  border: none;
  cursor: pointer;
  width: 600px;
  height: 78px;
  letter-spacing: 0.1em;
  opacity: 1;
  transition: none;
}

sc-provider .login-button:hover,
sc-provider .login-button:visited,
sc-provider .login-button:visited:hover,
sc-provider .login-button:active,
sc-provider .login-button:focus {
  opacity: 1;
  background: var(--btn-primary);
  color: var(--text-light);
  text-decoration: none;
}

/* SC-ANCHORコンポーネント */
sc-provider sc-anchor.howto-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 500px;
  height: 50px;
  background: var(--btn-primary);
  border-radius: 25px;
  cursor: pointer;
  transition: var(--transition-opacity);
}

sc-provider sc-anchor.howto-btn:hover {
  opacity: 0.7;
}

sc-provider sc-anchor.howto-btn img {
  height: 18.97px;
  width: auto;
  pointer-events: none;
  flex-shrink: 0;
  position: relative;
  z-index: 0;
  display: block;
  visibility: visible;
  opacity: 1;
}

sc-provider sc-anchor.howto-btn::part(link) {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: none;
  color: inherit;
  text-decoration: none;
  cursor: inherit;
}

sc-provider sc-anchor.howto-btn::part(disabled) {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ステップ画像 */
sc-provider .howto_step dd img.step-image {
  margin: 0 auto;
  width: 500px;
}

sc-provider .howto_step dd sc-anchor.howto-btn img {
  height: 18.97px;
}

sc-provider .howto_step + .howto_step dd sc-anchor.howto-btn img {
  height: 19.7px;
}

/* フォーカス時のアクセシビリティ */
sc-provider .stamp-overlay[href]:focus-visible,
sc-provider .login-button:focus-visible,
sc-provider sc-anchor.howto-btn:focus-visible {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
}

/* アクセシビリティ */
sc-provider .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* アニメーション無効化 */
@media (prefers-reduced-motion: reduce) {
  sc-provider * {
    animation: none !important;
    transition: none !important;
  }
}