/* 承認済みD案: 青灰色のマットな面と刻印。カードより背景の主張を弱くする。 */
:root {
  --relief-face: #253143;
  /* 2026-10-16 承認モックの値。薄い断面と、盤面から少し浮いた影。 */
  --relief-card-shadow: 0 .7px 0 #514e48, 0 2px 3px #03081099,
    2px 7px 7px #030810b3, 4px 12px 14px #03081080;
  /* 反時計回り90度の守備表示でも、影は画面の右下へ落とす。 */
  --relief-card-defense-shadow: -.7px 0 0 #514e48, -2px 0 3px #03081099,
    -7px 2px 7px #030810b3, -12px 4px 14px #03081080;
  --relief-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.07'/%3E%3C/svg%3E");
}

/* 状態クラスより低い詳細度にし、選択中の金枠・触れている間の青枠を維持する。 */
.tier-item-wrapper {
  border-radius: 3px;
  box-shadow: var(--relief-card-shadow);
}
.tier-item-wrapper .tier-item,
.tier-item-wrapper.is-set::after {
  border-radius: 3px;
}
.custom-slot .tier-item-wrapper {
  scale: .97;
  /* 97% に縮めて上下に空く余白（高さの 1.5%）より上へずらすと、マスの overflow:hidden で上端が切れる。
     固定の -3px はスマホ（カード高さ約90px・余白約1.4px）で上端が切れていた（2026-10-20 ユーザー指摘）。
     余白の範囲内で上へ寄せ、下側に影の見える隙間を残す。 */
  translate: 0 calc(var(--slot-height) * -.012);
}

/* 守備表示は中の画像だけが回転するため、縦長の外枠には影を残さない。 */
.tier-item-wrapper:where(.is-defense) {
  box-shadow: none;
}
.tier-item-wrapper.is-defense:not(.is-set) > .tier-item {
  box-shadow: var(--relief-card-defense-shadow);
}
.tier-item-wrapper.is-defense.is-set::after {
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .55), var(--relief-card-defense-shadow);
}

/* 背景レイヤーなのでドラッグ、カウンター、カードの重なり順には干渉しない。 */
.custom-slot,
.side-slots-container > .sol-side-area,
.sol-hand-area,
#imagePool,
#imagePool2,
.sol-card-info-panel,
.sol-mobile-cip-panel {
  background-color: var(--relief-face);
  background-image: var(--relief-grain), linear-gradient(145deg, #ffffff05, #0000000c);
  background-repeat: repeat, no-repeat;
  background-size: 160px 160px, 100% 100%;
  box-shadow: inset 0 1px 1px #a9bdd526, inset 0 -1px 1px #070f1c66,
    0 2px 3px #080f1b33;
}

/* トレイの刻印も背景として描き、カードの操作領域と枚数表示を維持する。 */
.sol-hand-area { --relief-symbol: url('../icons/hand-relief.svg?v=9'); }
#imagePool2 { --relief-symbol: url('../icons/ex-deck-relief.svg?v=4'); }
#imagePool { --relief-symbol: url('../icons/deck-relief.svg'); }
.sol-hand-area, #imagePool, #imagePool2 {
  background-image: var(--relief-symbol), var(--relief-grain), linear-gradient(145deg, #ffffff05, #0000000c);
  background-position: center, center, center;
  background-repeat: no-repeat, repeat, no-repeat;
  /* 盤面の刻印と同じマス幅を基準にし、パネルの広さで拡大しない。 */
  background-size: calc(var(--slot-width) * .76) auto, 160px 160px, 100% 100%;
}

.custom-slot[data-slot="10"], .custom-slot[data-slot="14"] {
  --relief-symbol: url('../icons/pendulum-relief.svg');
}
.custom-slot[data-slot="3"] {
  --relief-symbol: url('../icons/field-relief.svg');
}
.custom-slot[data-slot="10"], .custom-slot[data-slot="14"], .custom-slot[data-slot="3"] {
  background-image: var(--relief-symbol), var(--relief-grain), linear-gradient(145deg, #ffffff05, #0000000c);
  background-position: center;
  background-repeat: no-repeat, repeat, no-repeat;
  background-size: 76% auto, 160px 160px, 100% 100%;
}
.sol-grave .side-slot {
  background-image: url('../icons/grave-relief.svg');
  background-size: 72% auto;
}
.sol-banish .side-slot {
  background-image: url('../icons/banish-relief.svg');
  background-size: 72% auto;
}
.custom-slot:hover {
  background-color: #2c3a4e;
}

/* 最小カード幅でも収まらない場合は左端からスクロールできるようにする。 */
.main-content { justify-content: safe center; }

/* 必要なスクロールは残す。標準とWebKit系の両方を同じ暗色に揃える。 */
.sol-page-layout, .sol-page-layout * {
  scrollbar-width: thin;
  scrollbar-color: #53647d #151e2d;
}
.sol-page-layout ::-webkit-scrollbar { width: 6px; height: 6px; }
.sol-page-layout ::-webkit-scrollbar-track { background: #151e2d; border-radius: 3px; }
.sol-page-layout ::-webkit-scrollbar-thumb { background: #53647d; border-radius: 3px; }
.sol-page-layout ::-webkit-scrollbar-thumb:hover { background: #6b7f9b; }
.sol-page-layout ::-webkit-scrollbar-corner { background: #151e2d; }

/* スマホの横長領域でも、手札と同じマス幅を基準に刻印を表示する。 */
@media (max-width: 767px) and (orientation: portrait) {
  .sol-grave { --relief-symbol: url('../icons/grave-relief.svg'); }
  .sol-banish { --relief-symbol: url('../icons/banish-relief.svg'); }
  /* 縦ラベルを含むパネル全体の中央に揃える。内側のカード列は基準にしない。 */
  .side-slots-container > .sol-grave,
  .side-slots-container > .sol-banish {
    background-image: var(--relief-symbol), var(--relief-grain), linear-gradient(145deg, #ffffff05, #0000000c);
    background-position: center;
    background-repeat: no-repeat, repeat, no-repeat;
    background-size: calc(var(--slot-width) * .76) auto, 160px 160px, 100% 100%;
  }
  .sol-grave .side-slot, .sol-banish .side-slot {
    background-image: none;
  }
}

/* 両サイドを開いた狭いPC幅でも各トレイを列の中に収め、カードだけをスクロールする。 */
@media (min-width: 768px) {
  #mainContainer { min-width: 0; }
  .sol-hand-area { min-width: 0; flex: 0 1 calc(var(--slot-width) * 6 + 18px); }
  .sol-hand-area .center-slot { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
  .center-row #imagePool2 { min-width: 0; flex: 1 1 calc(var(--slot-width) * 2.5 + 18px); }
}