/* 同接制限ガチャ用スタイル */

/* カードの虹枠 — lottery-page.css の .starter-gacha と同じ conic-gradient + rainbow-rotate */
.gacha-card-wrapper.is-concurrent-limited {
    padding: 6px;
    border: none;
    border-radius: 16px;
    background: conic-gradient(from var(--rainbow-angle), #ffc8c8, #ffe6b0, #fffaaa, #b8f0b8, #b0d8ff, #d4b0ff, #ffb8e0, #ffc8c8);
    animation: rainbow-rotate 3s linear infinite;
}
.gacha-card-wrapper.is-concurrent-limited > .gacha-card {
    border-radius: 10px;
    background: #fff;
}

/* 満室／他ガチャ入室中はにじ枠アニメを止めてグレーに落とす */
.gacha-card-wrapper.is-concurrent-limited.is-full {
    background: #d0d0d0;
    animation: none;
}

/* 満室時のみ thumbnail / CTA リンクを click 不可に（他ガチャ入室中の席乗り換えは妨げない） */
.gacha-card-wrapper.is-concurrent-limited.is-seats-full a {
    pointer-events: none;
}

.concurrent-seat-view {
    display: grid;
    grid-template-columns: repeat(var(--seat-cols, 10), 32px);
    gap: 6px;
    padding: 4px 0 6px 0;
    justify-content: center;
    width: 100%;
}

/* TOP のガチャカード配下では座席を 28px 固定。grid 全体は中央寄せだが、
   2 行目以降は grid 内で左から順に配置されるため自然に左寄せに見える */
.gacha-card-wrapper .concurrent-seat-view {
    grid-template-columns: repeat(var(--seat-cols, 10), 28px);
    gap: 3px;
    padding: 2px 4px 2px 4px;
    justify-content: center;
}
.gacha-card-wrapper .concurrent-seat {
    width: 28px;
    height: 28px;
}
.gacha-card-wrapper .concurrent-seat-number {
    font-size: 9px;
}
/* TOP カードでは ticker は表示しない（多数のカードで通知が重なるとノイズ） */
.gacha-card-wrapper .concurrent-ticker-area {
    display: none;
}

/* 引いた人通知の専用エリア（座席グループ上に独立して配置） */
.concurrent-ticker-area {
    position: relative;
    width: 100%;
    height: 28px;
    overflow: hidden;
    z-index: 30;
}

.concurrent-seat {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #f3f3f3;
    border: 2px solid #d8d8d8;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 吹き出しを表示するため overflow を切らない。画像側で円形にクリップする */
    overflow: visible;
    position: relative;
    box-sizing: border-box;
}

.concurrent-seat.is-occupied {
    background-color: transparent;
    border-color: #b8b8b8;
}

/* 1 サイクル 2 秒の大小アニメ。JS が N 連分だけ繰り返し発火する */
.concurrent-seat.is-pulled {
    animation: concurrent-seat-pulse 2s ease-in-out;
    will-change: transform;
    z-index: 2;
}

@keyframes concurrent-seat-pulse {
    0%   { transform: scale(1);   }
    15%  { transform: scale(1.4); }
    85%  { transform: scale(1.4); }
    100% { transform: scale(1);   }
}

/* 座席グループ上の通知 ticker
   右からスライドイン → 中央でホールド → 左にフェード+スライドアウト */
.concurrent-ticker {
    position: absolute;
    top: 50%;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    padding: 3px 10px;
    border-radius: 6px;
    pointer-events: none;
    animation: concurrent-ticker-flow 1.6s ease-in-out forwards;
    will-change: transform, opacity, left;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

@keyframes concurrent-ticker-flow {
    0%   { left: 100%; transform: translate(0, -50%);     opacity: 0; }
    25%  { left: 50%;  transform: translate(-50%, -50%);  opacity: 1; }
    70%  { left: 50%;  transform: translate(-50%, -50%);  opacity: 1; }
    100% { left: 0;    transform: translate(-100%, -50%); opacity: 0; }
}

.concurrent-seat.is-vacant {
    background-color: #f7f7f7;
    border: 2px solid #d8d8d8;
}

.concurrent-seat-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.concurrent-seat-number {
    font-size: 11px;
    color: #999;
    font-weight: 600;
}

.concurrent-seat.is-my-seat {
    border-color: #ff3b3b;
    border-width: 3px;
    box-shadow: 0 0 0 1px #ff3b3b inset;
}

/* 入室ボタン / 満室ボタン（border-radius は .gummy-btn の 18px をそのまま使う） */
.concurrent-enter-btn {
    width: 100%;
    padding: 10px;
    background-color: #ffd54f;
    color: #222;
    text-align: center;
    font-weight: 700;
    cursor: pointer;
    border: 0;
}
.concurrent-enter-btn:disabled,
.concurrent-enter-btn.is-full {
    background-color: #d0d0d0;
    color: #777;
    cursor: not-allowed;
    pointer-events: none;
}
.concurrent-enter-btn.is-already-entered {
    background-color: #6ec1ff;
    color: #fff;
}

/* gummy-btn-disabled が ::after でチェーン画像を出す（gacha-buttons.blade.php）が、
   同接ガチャの満室／他入室中表示ではチェーン演出は不要なので無効化する */
.concurrent-enter-btn.gummy-btn-disabled::after {
    display: none;
    background-image: none;
}

/* カウントダウンバナーと自動退室バナーの CSS は header-countdown.blade.php に統合済み */
/* （クーポン/争奪戦/討伐戦と同じ .header-countdown-banner 系統） */

/* バナー表示中の課金ページではコンテンツが裏に隠れないよう余白を確保 */
body.has-battle-countdown .payment-container {
    margin-top: 40px;
}

/* 同接ガチャ詳細ページのサムネイルににじ枠を付与（.starter-gacha と同じ conic-gradient） */
.gacha-thumbnail.concurrent-rainbow-frame {
    padding: 6px;
    border: none;
    border-radius: 16px;
    background: conic-gradient(from var(--rainbow-angle), #ffc8c8, #ffe6b0, #fffaaa, #b8f0b8, #b0d8ff, #d4b0ff, #ffb8e0, #ffc8c8);
    animation: rainbow-rotate 3s linear infinite;
}
.gacha-thumbnail.concurrent-rainbow-frame img {
    border-radius: 10px;
}

/* 同接ガチャバナーの文字は争奪戦/レイドのような赤+パルスではなく控えめなグレーに上書き */
.battle-countdown-banner[data-type="concurrent"].started .battle-label {
    animation: none;
    color: #111;
    text-shadow: none;
    font-weight: 700;
    font-size: 14px;
}
.battle-countdown-banner[data-type="concurrent"].started .battle-countdown,
.battle-countdown-banner[data-type="concurrent"].started .countdown-time {
    color: #111;
    font-size: 1.1rem;
}
.battle-countdown-banner[data-type="concurrent"].started .battle-countdown {
    padding: 3px 10px;
}
.battle-countdown-banner[data-type="concurrent"].started .battle-countdown-container {
    gap: 4px;
    padding: 0 10px;
}