/* 席決め・親決め（seat.html）。色は style.css の先頭の「色（テーマ）」の変数だけを使う */
.st-main { padding-bottom: 40px; }

/* 人数 */
.st-count { display: flex; gap: 4px; margin: 4px 0 16px; padding: 3px; border-radius: 999px; background: var(--track); }
.st-count-btn { flex: 1; min-height: 38px; border: 0; border-radius: 999px; background: transparent; color: var(--text-secondary); font: inherit; font-weight: 700; cursor: pointer; }
.st-count-btn.is-on { background: var(--segment-thumb); color: var(--text); box-shadow: var(--shadow); }

/* わんこ */
.st-wan { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 18px; }
.st-wan .wanko { --wanko-size: 64px; }
.st-wan-bubble { flex: 1; min-width: 0; padding: 10px 14px; border-radius: 14px; background: var(--card-bg); border: 1px solid var(--primary); }
.page-main .st-wan-bubble p { margin: 0; font-size: 0.9375rem; line-height: 1.7; }

/* 卓（牌をちらばらせる場所） */
.st-field { position: relative; height: 290px; margin: 4px -4px 18px; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 50% 35%, var(--felt) 0%, var(--felt-dark) 115%); box-shadow: inset 0 0 0 6px var(--felt-dark), inset 0 8px 28px rgba(0, 0, 0, 0.4); perspective: 700px; }
.st-field::before { content: ''; position: absolute; inset: 0; opacity: 0.06; background: repeating-linear-gradient(45deg, var(--on-accent) 0 1px, transparent 1px 7px); pointer-events: none; }

/* 牌（伏せた面とめくった面） */
.st-tile { position: absolute; width: 54px; aspect-ratio: 64 / 86; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: left 0.3s cubic-bezier(.3, .7, .3, 1), top 0.3s cubic-bezier(.3, .7, .3, 1), transform 0.35s ease; z-index: 1; }
.st-field.is-washing .st-tile { transition-duration: 0.28s; }
.st-tile:disabled { cursor: default; }
.st-tile-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.5s cubic-bezier(.4, 1.6, .5, 1); }
.st-tile.is-open .st-tile-inner { transform: rotateY(180deg); }
.st-back, .st-front { position: absolute; inset: 0; border-radius: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* 伏せた牌：本物の牌の背のように、緑の背と、下にのぞく白い腹 */
.st-back { background: linear-gradient(160deg, var(--tile-back-light) 0%, var(--tile-back) 45%, var(--tile-back-dark) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.15), 0 4px 0 var(--tile-face), 0 6px 10px rgba(0, 0, 0, 0.35); }
.st-tile:not(:disabled):active .st-back { filter: brightness(1.1); }
.st-front { transform: rotateY(180deg); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }
.st-front img { display: block; width: 100%; height: 100%; }

/* 持ち上げて、ゆらしてからめくる */
.st-tile.is-lift { z-index: 3; }
.st-tile.is-lift .st-tile-inner { animation: st-lift 0.55s ease-in-out; }
.st-tile.is-rainbow.is-lift .st-tile-inner { animation: st-lift 0.55s ease-in-out 2; }
@keyframes st-lift {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-10px) scale(1.12) rotate(-6deg); }
  55% { transform: translateY(-10px) scale(1.12) rotate(6deg); }
  80% { transform: translateY(-10px) scale(1.12) rotate(-3deg); }
  100% { transform: translateY(-6px) scale(1.1); }
}
.st-tile.is-open { z-index: 2; }
.st-tile.is-left { opacity: 0.55; }

/* 東：虹色の光（めくる前からにじみ出て、めくったあとも回り続ける） */
.st-aura { position: absolute; inset: -9px; border-radius: 14px; background: conic-gradient(from 0deg, var(--rainbow), var(--rainbow)); opacity: 0; z-index: -1; filter: blur(5px); pointer-events: none; }
.st-tile.is-rainbow .st-aura { opacity: 1; animation: st-spin 1.2s linear infinite, st-glow 0.6s ease-in-out infinite alternate; }
@keyframes st-spin { to { filter: blur(5px) hue-rotate(360deg); } }
@keyframes st-glow { from { inset: -6px; } to { inset: -13px; } }

/* 卓が光る・光の筋・紙吹雪・「起家！」 */
.st-field.is-flash::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, var(--rainbow)); mix-blend-mode: screen; animation: st-flash 0.9s ease-out forwards; pointer-events: none; z-index: 4; }
@keyframes st-flash { 0% { opacity: 0.75; } 100% { opacity: 0; } }
.st-burst { position: absolute; width: 0; height: 0; z-index: 5; pointer-events: none; }
.st-rays { position: absolute; left: -110px; top: -110px; width: 220px; height: 220px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, var(--tile-face) 0 6deg, transparent 6deg 22deg); opacity: 0; -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 70%); mask: radial-gradient(circle, #000 0 30%, transparent 70%); }
.st-burst.is-on .st-rays { animation: st-rays 1.4s ease-out forwards; }
@keyframes st-rays { 0% { opacity: 0; transform: scale(0.3) rotate(0deg); } 25% { opacity: 0.6; } 100% { opacity: 0; transform: scale(1.3) rotate(60deg); } }
.st-burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); filter: hue-rotate(var(--h)); opacity: 0; }
.st-burst.is-on i { animation: st-confetti 1.1s cubic-bezier(.2, .8, .3, 1) var(--d) forwards; }
@keyframes st-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 40px)) rotate(540deg); } }
.st-banner { position: absolute; left: 50%; top: -78px; transform: translateX(-50%) scale(0); padding: 4px 14px; border-radius: 999px; white-space: nowrap; font-size: 1.25rem; font-weight: 900; letter-spacing: 0.08em; color: var(--recommend-text); background: linear-gradient(90deg, var(--rainbow)); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.st-burst.is-below .st-banner { top: 44px; }
.st-burst.is-on .st-banner { animation: st-banner 1.8s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes st-banner { 0% { transform: translateX(-50%) scale(0); opacity: 1; } 25% { transform: translateX(-50%) scale(1.15); } 40% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { transform: translateX(-50%) scale(1) translateY(-6px); opacity: 0; } }

/* ---- 東の確定演出（溜め → 当たり） ---- */
/* 溜め：卓が暗くなり、ほかの牌は沈む。東は真ん中で大きくなり、ゆれがだんだん激しくなる */
.st-field.is-hype .st-tile:not(.is-hype) { filter: brightness(0.3) saturate(0.6); }
.st-field.is-hype::before { opacity: 0.5; background: radial-gradient(circle at 50% 50%, transparent 0 18%, var(--felt-dark) 75%); transition: opacity 0.4s; }
.st-tile.is-hype { z-index: 6; transition: left 0.5s cubic-bezier(.3, .7, .3, 1), top 0.5s cubic-bezier(.3, .7, .3, 1), transform 0.5s cubic-bezier(.3, 1.4, .5, 1); }
.st-tile.is-hype:not(.is-open) .st-tile-inner { animation: st-hype 1.9s ease-in forwards; }
.st-tile.is-hype.is-open .st-front { filter: drop-shadow(0 0 18px var(--tile-face)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4)); }
@keyframes st-hype {
  0%, 20% { transform: rotate(0); }
  25% { transform: rotate(-2deg); } 30% { transform: rotate(2deg); }
  40% { transform: rotate(-4deg) translateX(-1px); } 45% { transform: rotate(4deg) translateX(1px); }
  55% { transform: rotate(-6deg) translateX(-2px); } 60% { transform: rotate(6deg) translateX(2px); }
  68% { transform: rotate(-9deg) translateX(-3px); } 72% { transform: rotate(9deg) translateX(3px); }
  78% { transform: rotate(-12deg) translateX(-4px) scale(1.04); } 82% { transform: rotate(12deg) translateX(4px) scale(1.04); }
  86% { transform: rotate(-14deg) translateX(-5px) scale(1.08); } 90% { transform: rotate(14deg) translateX(5px) scale(1.08); }
  94% { transform: rotate(-8deg) scale(1.12); } 100% { transform: rotate(0) scale(1.15); }
}
.st-tile.is-hype .st-aura { animation: st-spin 0.6s linear infinite, st-pulse 0.32s ease-in-out infinite alternate; }
@keyframes st-pulse { from { inset: -8px; opacity: 0.7; } to { inset: -22px; opacity: 1; } }
.st-burst.is-charging { z-index: 5; }
.st-rays.is-charge { animation: st-charge 1.9s ease-in forwards; }
@keyframes st-charge { 0% { opacity: 0; transform: scale(0.4) rotate(0deg); } 100% { opacity: 0.55; transform: scale(1.5) rotate(200deg); } }

/* 東以外の「もしかして…？」：金色にじわっと光る（めくると外れ） */
.st-tile.is-gold .st-aura { opacity: 1; background: radial-gradient(circle, var(--gold) 0 40%, transparent 72%); animation: st-glow 0.45s ease-in-out infinite alternate; }
.st-tile.is-gold .st-tile-inner { animation: st-lift 0.5s ease-in-out 2; }

/* 当たり：光の筋が大きく回り、衝撃波の輪が2つ広がり、「起家 確定!!」 */
.st-rays.is-big { left: -170px; top: -170px; width: 340px; height: 340px; }
.st-burst.is-on .st-rays.is-big { animation: st-rays-big 2.6s ease-out forwards; }
@keyframes st-rays-big { 0% { opacity: 0.9; transform: scale(0.6) rotate(0deg); } 60% { opacity: 0.6; } 100% { opacity: 0; transform: scale(1.4) rotate(120deg); } }
.st-ring { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 6px solid var(--tile-face); opacity: 0; }
.st-burst.is-on .st-ring { animation: st-ring 0.9s ease-out forwards; }
.st-burst.is-on .st-ring.is-late { animation-delay: 0.25s; border-color: var(--gold); }
@keyframes st-ring { 0% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(4.5); border-width: 1px; } }
.st-banner.is-big { top: -118px; font-size: 1.75rem; padding: 6px 20px; background: linear-gradient(90deg, var(--rainbow), var(--rainbow)); background-size: 200% auto; animation: none; }
.st-burst.is-on .st-banner.is-big { animation: st-banner-big 2.6s cubic-bezier(.3, 1.6, .5, 1) forwards, rainbowShift 1.2s linear infinite; }
@keyframes st-banner-big { 0% { transform: translateX(-50%) scale(0) rotate(-8deg); opacity: 1; } 18% { transform: translateX(-50%) scale(1.35) rotate(3deg); } 30% { transform: translateX(-50%) scale(1) rotate(0); } 85% { opacity: 1; } 100% { transform: translateX(-50%) scale(1); opacity: 0; } }

/* 画面ぜんたい：虹色のフラッシュと、上から降る紙吹雪 */
.st-screen { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; }
.st-screen-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, var(--tile-face) 0%, transparent 60%), linear-gradient(135deg, var(--rainbow)); opacity: 0; animation: st-screen-flash 1s ease-out forwards; }
@keyframes st-screen-flash { 0% { opacity: 0.9; } 100% { opacity: 0; } }
.st-screen i { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; background: var(--gold); filter: hue-rotate(var(--h)); animation: st-fall var(--t) cubic-bezier(.3, .6, .5, 1) var(--d) forwards; opacity: 0; }
@keyframes st-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0.9; transform: translate(var(--x), 110vh) rotate(900deg); } }

@media (prefers-reduced-motion: reduce) {
  .st-tile, .st-tile-inner { transition: none; }
  .st-tile.is-lift .st-tile-inner, .st-tile.is-rainbow .st-aura { animation: none; }
}

/* 白を入れるか（オプション） */
.st-white { display: flex; align-items: flex-start; gap: 10px; margin: -4px 0 16px; padding: 10px 12px; border-radius: var(--r-md); background: var(--card-bg); border: 1px solid var(--border); cursor: pointer; }
.st-white input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--primary); flex-shrink: 0; }
.st-white span { display: flex; flex-direction: column; gap: 2px; }
.st-white b { font-size: 0.9375rem; }
.st-white small { font-size: 12px; line-height: 1.5; color: var(--text-secondary); }

/* めくった順 */
.page-main ol.st-order { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; padding: 0; margin: 0 0 16px; }
.page-main .st-order li { margin: 0; font-size: 0.875rem; color: var(--text-secondary); }
.st-order b { color: var(--text); }

/* 卓の図 */
.st-table { position: relative; width: 270px; height: 300px; margin: 4px auto 14px; }
.st-table-felt { position: absolute; inset: 88px 64px; border-radius: 14px; background: radial-gradient(ellipse at 50% 30%, var(--felt) 0%, var(--felt-dark) 120%); display: flex; align-items: center; justify-content: center; }
.st-table-felt span { color: var(--on-accent); font-weight: 700; opacity: 0.7; }
.st-seat { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.st-seat img { width: 30px; height: auto; }
.st-seat b { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.st-seat small { font-size: 10px; color: var(--text-tertiary); white-space: nowrap; }
.st-seat.is-oya b { color: var(--accent-on-tint); }
.st-seat.is-oya img { box-shadow: 0 0 0 2px var(--gold); border-radius: 4px; }
.st-seat.is-white small { color: var(--accent-on-tint); font-weight: 700; }
.st-seat-bottom { left: 50%; bottom: 0; transform: translateX(-50%); }
.st-seat-top { left: 50%; top: 0; transform: translateX(-50%); }
.st-seat-left { left: 0; top: 50%; transform: translateY(-50%); }
.st-seat-right { right: 0; top: 50%; transform: translateY(-50%); }
.page-main .st-note { text-align: center; font-size: 0.8125rem; line-height: 1.7; color: var(--text-secondary); }

/* ボタン */
.st-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.st-btn { min-height: 46px; padding: 10px 22px; border: 0; border-radius: 999px; background: var(--primary); color: var(--on-accent); font: inherit; font-weight: 700; cursor: pointer; }
.st-btn-sub { background: var(--fill-alt); color: var(--text); }
.page-main .st-foot { text-align: center; font-size: 11px; color: var(--text-tertiary); }