/* ===== ラウンド2 セクション ===== */

/* 
  基本的なスタイルは .turn-flow-section から継承
  turn-flow.css で定義されている以下のスタイルを自動的に継承：
  - セクションの高さ（min-height: 300vh）
  - 背景色
  - パディング
  - .stage のスタイル
  - .turn-flow-container のスタイル
  - .section-title のスタイル
  - .turn-flow-board のスタイル
  - .turn-flow-card, .turn-flow-king のスタイル
  - .turn-text-area のスタイル
  - .hand-cards-area のスタイル
  - .hand-public-area のスタイル
*/
#turn-flow-round2 {
  --round2-card-width: 60px;
  --round2-card-height: 84px;
  --round2-piece-size: 22px;
  --round2-piece-offset: 40px;
}

#turn-flow-round2.turn-flow-section {
  height: 1300vh;
  min-height: 1200vh;
}

/* サブタイトル（「ラウンド2」表示） */
#turn-flow-round2 .section-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  color: rgba(110, 106, 99, 0.85);
  margin-top: 0.6rem;
  line-height: 1.6;
}

#turn-flow-round2 .turn-flow-board {
  left: 50%;
  transform: translateX(-50%);
}

#turn-flow-round2 .turn-flow-king:first-child {
  margin-right: 1.2rem;
}

#turn-flow-round2 .turn-flow-king:last-child {
  margin-left: 1.2rem;
}

#turn-flow-round2 .turn-flow-card img {
  transform: rotate(90deg);
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}


#turn-flow-round2 .turn-flow-card {
  width: var(--round2-card-width);
  height: var(--round2-card-height);
}

#turn-flow-round2 .turn-flow-king {
  width: var(--round2-card-width);
  height: var(--round2-card-height);
}

#turn-flow-round2 .hand-card .turn-flow-start-marker {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: clamp(28px, 5.4vw, 50px);
  height: auto;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  z-index: 20;
}

#turn-flow-round2 .hand-cards-area > .turn-flow-start-marker {
  position: absolute;
  bottom: auto;
  right: auto;
  width: clamp(28px, 5.4vw, 40px);
  height: auto;
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
  z-index: 20;
}

#turn-flow-round2 .hand-card .turn-flow-start-marker img {
  display: block;
  width: clamp(26px, 5vw, 38px);
  height: auto;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  background: transparent;
}

#turn-flow-round2 .hand-cards-area > .turn-flow-start-marker img {
  display: block;
  width: clamp(26px, 5vw, 50px);
  height: auto;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  background: transparent;
}

#turn-flow-round2 .hand-cards-area {
  bottom: 24%;
}

#turn-flow-round2 #r2-hand-2 > img,
#turn-flow-round2 #r2-hand-3 > img {
  transform: rotate(180deg);
}

#turn-flow-round2 .turn-flow-board {
  width: min(92vw, 680px);
  justify-content: center;
  gap: clamp(1.2rem, 3vw, 2rem);
}

#turn-flow-round2 .turn-flow-card,
#turn-flow-round2 .turn-flow-king {
  width: clamp(48px, 7vw, var(--round2-card-width));
  height: calc(clamp(48px, 7vw, var(--round2-card-width)) * 1.4);
}

#turn-flow-round2 .round2-piece-on-card {
  top: calc(clamp(48px, 7vw, var(--round2-card-width)) * 0.5);
  left: calc(clamp(48px, 7vw, var(--round2-card-width)) * 0.5);
  width: clamp(16px, 3vw, var(--round2-piece-size));
  height: clamp(16px, 3vw, var(--round2-piece-size));
}



#turn-flow-round2 .round2-piece-on-card {
  position: absolute;
  top: calc(var(--round2-card-width) * 0.5);
  left: calc(var(--round2-card-height) * 0.5);
  width: clamp(16px, 3vw, var(--round2-piece-size));
  height: clamp(16px, 3vw, var(--round2-piece-size));
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  z-index: 20;
}

#turn-flow-round2 .round2-piece-on-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
}

#turn-flow-round2 #turn-flow-piece-5-r2 {
  left: calc(var(--round2-card-height) * 0.5);
}

#turn-flow-round2 .turn-flow-piece {
  width: clamp(16px, 3vw, var(--round2-piece-size));
  height: clamp(16px, 3vw, var(--round2-piece-size));
}

#turn-flow-round2 .turn-flow-piece img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#r2-new-inserted-card,
#r2-new-inserted-card-left {
  display: none;
}

#turn-flow-round2 .turn-flow-inserted-card img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

#turn-flow-round2 .point-totals-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1600;
}

#turn-flow-round2 .point-total {
  position: absolute;
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -130%);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

#turn-flow-round2 .point-total-red {
  color: rgba(220, 70, 70, 0.95);
}

#turn-flow-round2 .point-total-purple {
  color: rgba(120, 60, 180, 0.95);
}

#turn-flow-round2 .turn-flow-bottom-row {
  display: flex;
  justify-content: flex-start;
  padding-left: 12.5%;
}
@media (max-width: 1024px) {
  #turn-flow-round2 .turn-flow-board {
    width: min(95vw, 620px);
    gap: clamp(2rem, 2.8vw, 1.6rem);
  }
}

@media (max-width: 768px) {
  #turn-flow-round2 {
    --round2-piece-size: 17px;
    --round2-piece-offset: 28px;
  }

  #turn-flow-round2 .turn-flow-board {
    width: min(96vw, 560px);
    gap: clamp(1rem, 2.8vw, 1rem);
  }

  #turn-flow-round2 .round2-piece-on-card {
    /* width: 17px;
    height: 17px; */

    top: calc(var(--round2-card-width) * 0.5);
    left: calc(var(--round2-card-height) * 0.4);
  }

  #turn-flow-round2 .hand-card .turn-flow-start-marker {
    bottom: auto;
    right: auto;
    bottom: -2px;
    width: clamp(26px, 4.4vw, 38px);
  }
}

@media (max-width: 600px) {
  #turn-flow-round2 .turn-flow-board {
    width: 96vw;
    gap: clamp(0.6rem, 3.8vw, 1.1rem);
  }

  #turn-flow-round2 .turn-flow-card,
  #turn-flow-round2 .turn-flow-king {
    width: clamp(38px, 9vw, 60px);
    height: calc(clamp(38px, 9vw, 60px) * 1.4);
  }

  #turn-flow-round2 .round2-piece-on-card {
    top: calc(clamp(38px, 9vw, 60px) * 0.5);
    left: calc(clamp(38px, 9vw, 60px) * 0.5);
    width: clamp(14px, 4vw, 22px);
    height: clamp(14px, 4vw, 22px);
  }

  #turn-flow-round2 #turn-flow-piece-5-r2 {
    left: calc(clamp(38px, 9vw, 60px) * 0.72);
  }

  #turn-flow-round2 .turn-flow-bottom-row {
    padding-left: 18%;
  }

  #turn-flow-round2 .hand-card .turn-flow-start-marker,
  #turn-flow-round2 .hand-cards-area > .turn-flow-start-marker {
    bottom: 3px;
    right: 3px;
    width: clamp(24px, 4.2vw, 40px);
  }

  #turn-flow-round2 .hand-card .turn-flow-start-marker img,
  #turn-flow-round2 .hand-cards-area > .turn-flow-start-marker img {
    width: clamp(24px, 4.2vw, 40px);
  }
}

@media (max-width: 480px) {
  #turn-flow-round2 {
    --round2-card-width: 28px;
    --round2-card-height: 40px;
    --round2-piece-size: 10px;
  }

  #turn-flow-round2 .turn-flow-board {
    width: 94vw;
    gap: 0.9rem;
  }

  #turn-flow-round2 .turn-flow-card,
  #turn-flow-round2 .turn-flow-king {
    width: clamp(22px, 7vw, var(--round2-card-width));
    height: calc(clamp(22px, 7vw, var(--round2-card-width)) * 1.4);
  }

  #turn-flow-round2 .turn-flow-king {
    width: clamp(18px, 5vw, var(--round2-card-width));
    height: calc(clamp(18px, 5vw, var(--round2-card-width)) * 1.4);
  }

  #turn-flow-round2 .turn-flow-king:first-child,
  #turn-flow-round2 .turn-flow-king:last-child {
    margin: 0 0.25rem;
  }

  #turn-flow-round2 .round2-piece-on-card {
    top: calc(clamp(22px, 7vw, var(--round2-card-width)) * 0.48);
    left: calc(clamp(22px, 7vw, var(--round2-card-width)) * 0.5);
    width: clamp(6px, 2.4vw, var(--round2-piece-size));
    height: clamp(6px, 2.4vw, var(--round2-piece-size));
  }

  #turn-flow-round2 #turn-flow-piece-5-r2 {
    left: calc(clamp(22px, 7vw, var(--round2-card-width)) * 0.72);
  }

  #turn-flow-round2 .turn-flow-piece {
    width: clamp(6px, 2.4vw, var(--round2-piece-size));
    height: clamp(6px, 2.4vw, var(--round2-piece-size));
  }

  #turn-flow-round2 .turn-flow-bottom-row {
    padding-left: 20%;
  }

  #turn-flow-round2 .hand-card .turn-flow-start-marker,
  #turn-flow-round2 .hand-cards-area > .turn-flow-start-marker {
    width: clamp(30px, 3.8vw, 40px);
    bottom: 3px;
    right: 3px;
  }

  #turn-flow-round2 .hand-card .turn-flow-start-marker img,
  #turn-flow-round2 .hand-cards-area > .turn-flow-start-marker img {
    width: clamp(30px, 3.8vw, 40px);
  }
}

@media (max-width: 360px) {
  #turn-flow-round2 {
    --round2-card-width: 22px;
    --round2-card-height: 34px;
    --round2-piece-size: 8px;
  }

  #turn-flow-round2 .turn-flow-board {
    width: 95vw;
    gap: 0.35rem;
  }

  #turn-flow-round2 .turn-flow-card,
  #turn-flow-round2 .turn-flow-king {
    width: clamp(18px, 9vw, var(--round2-card-width));
    height: calc(clamp(18px, 9vw, var(--round2-card-width)) * 1.4);
  }

  #turn-flow-round2 .turn-flow-king {
    width: clamp(14px, 6vw, var(--round2-card-width));
    height: calc(clamp(14px, 6vw, var(--round2-card-width)) * 1.4);
  }

  #turn-flow-round2 .round2-piece-on-card {
    top: calc(clamp(18px, 9vw, var(--round2-card-width)) * 0.48);
    left: calc(clamp(18px, 9vw, var(--round2-card-width)) * 0.5);
    width: clamp(4px, 2.4vw, var(--round2-piece-size));
    height: clamp(4px, 2.4vw, var(--round2-piece-size));
  }

  #turn-flow-round2 #turn-flow-piece-5-r2 {
    left: calc(clamp(18px, 9vw, var(--round2-card-width)) * 0.72);
  }

  #turn-flow-round2 .hand-card .turn-flow-start-marker,
  #turn-flow-round2 .hand-cards-area > .turn-flow-start-marker {
    width: 18px;
  }

  #turn-flow-round2 .turn-flow-piece {
    width: clamp(4px, 2.4vw, var(--round2-piece-size));
    height: clamp(4px, 2.4vw, var(--round2-piece-size));
  }

  #turn-flow-round2 .turn-flow-bottom-row {
    padding-left: 22%;
  }

  #turn-flow-round2 .hand-card .turn-flow-start-marker,
  #turn-flow-round2 .hand-cards-area > .turn-flow-start-marker {
    width: clamp(20px, 3.5vw, 28px);
    bottom: 2px;
    right: 2px;
  }

  #turn-flow-round2 .hand-card .turn-flow-start-marker img,
  #turn-flow-round2 .hand-cards-area > .turn-flow-start-marker img {
    width: clamp(20px, 3.5vw, 28px);
  }
}