/* --- sevens (七並べ) ---
   盤は胡桃の枠に緋毛氈 ―― 同じ札を使う大富豪の卓と地を揃える。空の枡は
   破線の箱ではなく毛氈に彫った窪みで、置かれた札が図として立つようにする。
   寸法は元のまま(枡42×58、枡の間3px、筋の頭24px)。

   扇の手札・打ち手の木札・出す/パスの木札は大富豪と共有(styles/daifugo.css の
   「緋毛氈の卓」を参照)。ここが持つのは盤 ―― 枠と毛氈、枡、七の筋、灯り。 */
.sevens-container {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.sevens-container.hidden { display: none; }

/* 胡桃の枠(9px)。将棋・リバーシ・チェス・大富豪の盤と同じ組み方。
   幅は毛氈に合わせて詰め、狭い画面では枠の中で毛氈が横に滑る。 */
.sevens-board-wrap {
  align-self: center;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  padding: 9px;
  border-radius: 4px;
  border: 1px solid var(--daifugo-frame-edge);
  background:
    var(--wood-grain),
    linear-gradient(var(--daifugo-frame-a), var(--daifugo-frame-b));
  box-shadow:
    0 3px 6px var(--daifugo-frame-drop),
    inset 0 1px 0 var(--daifugo-frame-sheen);
}
.sevens-board-wrap.hidden { display: none; }
#sevens-container .daifugo-hand.hidden { display: none; }

/* 毛氈。内余白12pxで、枡の座りは元のまま。 */
.sevens-board {
  position: relative;
  display: grid;
  grid-template-columns: 24px repeat(13, 42px);
  grid-auto-rows: 58px;
  gap: 3px;
  width: max-content;
  padding: 12px;
  border-radius: 2px;
  background:
    var(--daifugo-mousen-sheen),
    var(--daifugo-mousen-nap),
    linear-gradient(168deg, var(--daifugo-mousen-a), var(--daifugo-mousen-b));
  box-shadow: var(--daifugo-mousen-well);
}
/* 七の筋 ―― どの筋もここから両側に伸びる。枡の間(3px)に落ちる真鍮の細い罫で、
   毛氈の内余白いっぱいまで通す。左306px = 内余白12 + 筋の頭24 + 間3 + 45×6 - 3。 */
.sevens-board::before {
  content: '';
  position: absolute;
  left: 306px;
  top: 0;
  bottom: 0;
  width: 48px;
  border-left: 1px solid rgba(180, 144, 63, 0.7);
  border-right: 1px solid rgba(180, 144, 63, 0.7);
  background: linear-gradient(rgba(255, 233, 208, 0.12), rgba(255, 233, 208, 0.05));
  z-index: 0;
}
.sevens-suit-label,
.sevens-cell { position: relative; }

/* 筋の頭 ―― 緋色に赤のスートが沈むので、生成りの小札に刷って置く。 */
.sevens-suit-label {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sevens-suit-label > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 30px;
  border-radius: 2px;
  background: var(--shop-paper-light);
  border: 1px solid rgba(180, 144, 63, 0.6);
  box-shadow: 0 1px 2px rgba(20, 6, 4, 0.4);
}
.sevens-suit-label svg { display: block; }
/* 盤が枠に収まらないときは、盤を横に滑らせて読む(JSが開いた直後だけ七の筋を
   真ん中に寄せる)。そのとき筋の頭まで流れてしまうと、まだ札の出ていない筋が
   四本並んだときにどれがどのスートか分からなくなるので、頭だけ留める。
   下を札が流れるので毛氈と同じ地で伏せる ―― 色は毛氈のトークンから取る。

   収まっているかどうかは画面の幅では決まらない。ルームの引き出しを開くと
   #room-screen の左余白が332px増える(styles/room.css)ので、広い画面でも盤は
   滑り出す。JSが実測して .overflowing を付け外しする(games/sevens.js)。 */
.sevens-board-wrap.overflowing .sevens-suit-label {
  position: sticky;
  left: 0;
  z-index: 2;
  background:
    var(--daifugo-mousen-nap),
    linear-gradient(168deg, var(--daifugo-mousen-a), var(--daifugo-mousen-b));
  box-shadow: 3px 0 5px rgba(40, 4, 3, 0.4);
}

.sevens-cell {
  width: 42px;
  height: 58px;
}
.sevens-cell .daifugo-card {
  width: 100%;
  height: 100%;
  cursor: default;
  filter: drop-shadow(0 2px 3px rgba(20, 6, 4, 0.5));
}
/* 直前の一手。CPUの手が続けて流れても、何がどこに増えたか分かるように。 */
.sevens-cell.last .daifugo-card {
  border-radius: 5px;
  box-shadow: 0 0 0 1.5px rgba(221, 192, 127, 0.9);
}

/* 配り終えたところで、手札から抜いた四枚の七が筋ごとに少しずつずれて盤に
   降りる(games/sevens.js の sevensDeal)。 */
.sevens-cell.seven-lands .daifugo-card {
  animation: sevens-seven-lands 0.32s cubic-bezier(.3, .9, .3, 1) both;
  animation-delay: calc(var(--suit-i, 0) * 90ms);
}
@keyframes sevens-seven-lands {
  from { transform: translateY(-14px) scale(1.25); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .sevens-cell.seven-lands .daifugo-card { animation: none; }
}

/* 空の枡 ―― 毛氈に彫った窪み。 */
.sevens-cell.empty {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: 1px solid rgba(255, 233, 208, 0.08);
  background: rgba(58, 10, 8, 0.3);
  box-shadow:
    inset 0 1px 2px rgba(40, 4, 3, 0.55),
    inset 0 -1px 0 rgba(255, 233, 208, 0.05);
  font-family: var(--shop-font-display);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgba(255, 233, 208, 0.38);
}
/* いま手札から出せる枡は真鍮の細い縁。13段×4筋を目で数えなくて済む
   ―― リバーシの「打てるところ」を細い輪で出すのと同じ流儀。 */
.sevens-cell.empty.playable {
  border-color: rgba(180, 144, 63, 0.85);
  background: rgba(58, 10, 8, 0.18);
  box-shadow:
    inset 0 1px 2px rgba(40, 4, 3, 0.45),
    0 0 0 1px rgba(180, 144, 63, 0.18);
  color: rgba(244, 231, 196, 0.85);
}
/* 選んだ札の行き先だけが灯る。 */
.sevens-cell.empty.target {
  border-color: var(--shop-brass-light);
  background: rgba(255, 233, 208, 0.13);
  box-shadow:
    inset 0 1px 2px rgba(40, 4, 3, 0.35),
    0 0 12px rgba(221, 192, 127, 0.5);
  color: #f4e7c4;
}

/* 配る前の手元 ―― 盤の下、手札が来る場所に伏せた山札を置き、横に何を
   待っているかを書く。山札の積み方と寸法は大富豪と共有(styles/daifugo.css)。 */
.sevens-deal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin-top: 6px;
}
.sevens-deal.hidden { display: none; }
#sevens-container .sevens-deal .daifugo-deck {
  flex: none;
  margin: 0;
  filter: drop-shadow(0 4px 6px rgba(20, 6, 4, 0.3));
}
.sevens-deal-text { max-width: 360px; }
.sevens-deal-title {
  margin: 0;
  font-family: var(--shop-font-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.1em;
  color: var(--shop-ink);
}
.sevens-deal-note {
  margin: 10px 0 0;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--shop-ink-soft);
}
@media (max-width: 520px) {
  .sevens-deal { gap: 18px; }
  .sevens-deal-title { font-size: 1.1rem; }
}

/* 二連続パスで脱落すると、伏せていた手を隠さず場に並べる(server/games/sevens.js
   の redactState)。控えの札(.daifugo-recent-cards)と同じ、読むだけの小札。 */
.sevens-open-hand {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 4px;
}
.sevens-open-hand .daifugo-card {
  width: 30px;
  height: 42px;
  border-radius: 3px;
  cursor: default;
  filter: drop-shadow(0 1px 2px rgba(20, 6, 4, 0.35));
}
.sevens-open-hand .daifugo-card:hover { transform: none; }