/* Hallmark · component: mahjong tile surfaces · genre: atmospheric · theme: existing Jun table
 * states: default · hover · focus · active · disabled · loading · error · success
 * contrast: inherited fixed SVG faces · responsive: 320–1920px
 * pre-emit critique: P5 H5 E5 S5 R4 V4
 */

/*
 * 牌面は固定SVGが正本。ここは牌材だけを決定論的に立体化する層であり、
 * 文字・記号・牌種を生成画像へ任せない。
 */
:root {
  --tile3d-ivory-hi: rgba(255, 255, 249, .94);
  --tile3d-ivory-rim: rgba(102, 77, 37, .42);
  --tile3d-ivory-low: rgba(83, 56, 22, .34);
  --tile3d-gloss: rgba(255, 255, 255, .48);
  --tile3d-wood-hi: #f0bc58;
  --tile3d-wood-mid: #bd6b18;
  --tile3d-wood-low: #49260a;
  --tile3d-wood-line: rgba(68, 31, 5, .58);
  --tile3d-shadow: rgba(0, 0, 0, .52);
  --tile3d-back-ink: #102947;
  --tile3d-back-ink-hi: #285983;
}

/* 表面は既存の正確なSVGを前景に保ったまま、象牙の材を重ねる。 */
.tile:not(.back) {
  border-color: var(--tile3d-ivory-rim);
  background:
    linear-gradient(118deg, var(--tile3d-gloss) 0 7%, transparent 20% 73%, var(--tile3d-ivory-low) 100%),
    url('../assets/gptimage_v2/mahjong_tile_master_cropped_v1.png') center / 100% 100% no-repeat,
    linear-gradient(180deg, var(--tile-face-hi), var(--tile-face));
  box-shadow:
    inset 0 1px 0 var(--tile3d-ivory-hi),
    inset 1px 0 0 var(--tile3d-gloss),
    inset -1px 0 0 var(--tile3d-ivory-low),
    0 var(--tile-depth) 0 var(--tile3d-wood-mid),
    0 calc(var(--tile-depth) + 2px) 0 var(--tile3d-wood-low),
    0 calc(var(--tile-depth) + 5px) 8px var(--tile3d-shadow);
}

.tile:not(.back)::before {
  border-color: var(--tile3d-ivory-rim);
  box-shadow: inset 0 0 4px var(--tile3d-ivory-low);
}

.tile:not(.back)::after {
  background: linear-gradient(122deg, var(--tile3d-gloss), transparent 29% 72%, var(--tile3d-ivory-low));
  mix-blend-mode: screen;
}

/* 対面の伏せ牌は卓縁へ沿わせ、単なる縦並びではなく厚い牌の列にする。 */
#strip-left,
#strip-right {
  gap: clamp(0px, .08vw, 1px);
  filter: drop-shadow(0 10px 9px var(--tile3d-shadow));
  transform-style: preserve-3d;
}

#strip-left {
  left: 2.2%;
  transform: translateY(-50%) rotate(18deg) rotateY(13deg);
  transform-origin: 50% 50%;
}

#strip-right {
  right: 2.2%;
  transform: translateY(-50%) rotate(-18deg) rotateY(-13deg);
  transform-origin: 50% 50%;
}

.back-strip.vertical .btile {
  width: clamp(29px, 3.65vw, 36px);
  height: clamp(18px, 2.32vw, 23px);
  overflow: visible;
  border-color: var(--tile3d-wood-line);
  border-radius: 4px 4px 3px 3px;
  background:
    linear-gradient(140deg, var(--tile3d-gloss), transparent 24%),
    linear-gradient(180deg, var(--tile3d-wood-hi), var(--tile3d-wood-mid) 57%, var(--tile3d-wood-low));
  box-shadow:
    inset 0 1px 0 var(--tile3d-gloss),
    inset 0 -1px 0 var(--tile3d-wood-line),
    0 3px 0 var(--tile3d-wood-low),
    0 6px 7px var(--tile3d-shadow);
  transform: translateZ(4px);
}

.back-strip.vertical .btile::after {
  inset: 3px 4px;
  border-color: var(--tile3d-wood-line);
  background:
    radial-gradient(circle at 50% 49%, var(--tile3d-back-ink-hi) 0 12%, transparent 14%),
    linear-gradient(145deg, var(--tile3d-back-ink-hi), var(--tile3d-back-ink));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .17);
}

#strip-left .btile:nth-child(2n),
#strip-right .btile:nth-child(2n) { transform: translateZ(2px); }

/* 牌山の端は卓の奥へ自然に沈み、横画面での角度を卓縁に合わせる。 */
@media (orientation: landscape) {
  #strip-left { left: 1.4%; transform: translateY(-50%) rotate(20deg) rotateY(15deg); }
  #strip-right { right: 1.4%; transform: translateY(-50%) rotate(-20deg) rotateY(-15deg); }
}

@media (orientation: portrait) {
  #strip-left { left: 1.8%; transform: translateY(-50%) rotate(5deg) rotateY(9deg); }
  #strip-right { right: 1.8%; transform: translateY(-50%) rotate(-5deg) rotateY(-9deg); }
  .back-strip.vertical .btile { width: clamp(25px, 6.8vw, 29px); height: clamp(16px, 4.35vw, 19px); }
}

@media (prefers-reduced-motion: reduce) {
  .tile,
  .back-strip .btile { transition: none !important; }
}