/*
t8‑tournament-system/taikousen/tenma-2/sub-page/sub.css
常時ダークモード
*/


/* h1 タイトル */
.t8-match-title {
    align-self: center !important;
    text-align: center !important;

}



/* 勝利カウンター */

.t8-current-score {

    margin-bottom:30px;
    padding:20px;

    border:1px solid #ddd;
    border-radius:12px;

    text-align:center;

}


.score-title {

    font-size:12px;
    letter-spacing:2px;
    color:#888;
    margin-bottom:10px;

}


.score-board {

    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;

}


.score-team {
    font-size:18px;
    font-weight:700;
    transform: translateY(4px); /* ← チーム名だけ少し下げる */
}


/* 勝利カウンターの数字：ゆっくり浮かび上がる */
.score-number {
    font-size:36px;
    font-weight:900;
    opacity: 0;
    animation: t8ScoreFadeUp 1.3s ease-out forwards;
}

@keyframes t8ScoreFadeUp {
    0% { opacity: 0; transform: translateY(14px); }
    40% { opacity: 0.6; transform: translateY(7px); }
    100% { opacity: 1; transform: translateY(0); }
}


.score-vs {

    font-size:22px;
    color:#999;

}




/* アイコン画像 */
/* アイコンをゆっくり浮かび上がるアニメーション */
.t8-team-icon {
    width:150px;
    object-fit:contain;
    vertical-align: middle;
    margin: 0 40px;

    opacity: 0;
    animation: t8IconFadeUp 2.0s ease-out forwards;
    animation-delay: 0.9s; /* ← 数字のアニメーションが終わるタイミングで開始 */
}

@keyframes t8IconFadeUp {
    0% { opacity: 0; transform: translateY(18px); }
    40% { opacity: 0.5; transform: translateY(10px); }
    70% { opacity: 0.8; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
}





/* 結果の文字 上 */

.match-number {
    display:inline-block;
    padding:4px 12px 2px;
    font-size:12px;
    letter-spacing:1px;
    color:#777;
    border:1px solid #ddd;
    border-radius:20px;
    margin-bottom:10px;
}




/* ○ × をゆっくり浮かび上がる */
.t8-result-mark {
    font-weight:800;
    opacity: 0;
    animation: t8ResultFadeUp 1.3s ease-out forwards;
    animation-delay: 0.4s; /* ← 好きに調整可能（score より少し遅らせると綺麗） */
}

@keyframes t8ResultFadeUp {
    0%   { opacity: 0; transform: translateY(14px); }
    40%  { opacity: 0.6; transform: translateY(7px); }
    100% { opacity: 1; transform: translateY(0); }
}



/* 勝利 */
.result-win {
    display:inline-block;
    font-size:38px;
    font-weight:900;
    color:#2ecc71;
    -webkit-text-stroke:0.5px #2ecc71;
    transform: translateY(2px); /* ← 元の位置 */
    opacity: 0;
    animation: t8ResultFadeUpWin 1.3s ease-out forwards;
    animation-delay: 0.4s;
}

@keyframes t8ResultFadeUpWin {
    0%   { opacity: 0; transform: translateY(16px); } /* 14px + 2px */
    40%  { opacity: 0.6; transform: translateY(9px); }
    100% { opacity: 1; transform: translateY(2px); } /* ← 元の位置に戻す */
}



/* 敗北 */
.result-lose {
    display:inline-block;
    font-size:32px;
    font-weight:600;
    color:#999;
    transform: translateY(4px); /* ← 元の位置 */
    opacity: 0;
    animation: t8ResultFadeUpLose 1.3s ease-out forwards;
    animation-delay: 0.4s;
}

@keyframes t8ResultFadeUpLose {
    0%   { opacity: 0; transform: translateY(18px); } /* 14px + 4px */
    40%  { opacity: 0.6; transform: translateY(11px); }
    100% { opacity: 1; transform: translateY(4px); } /* ← 元の位置に戻す */
}


.t8-score {
    font-size:22px;
    font-weight:700;
    letter-spacing:2px;
	
    opacity: 0;
    animation: t8ScoreFadeSlow 1.9s ease-out forwards;
}

@keyframes t8ScoreFadeSlow {
    0% { opacity: 0; transform: translateY(14px); }
    40% { opacity: 0.6; transform: translateY(7px); }
    100% { opacity: 1; transform: translateY(0); }
}



/* 参加者名前 */
.t8-player-name {
    display: block;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 2px;
}

/* 使用キャラ名 */
.t8-player-char {
    display: block;
    font-size: 14px;
    opacity: 0.8;
}


/*
========================================
試合一覧
========================================
*/

.t8-match-list {

    display:flex;
    flex-direction:column;
    gap:18px;

}


.t8-match-card {

    padding:20px;

    border:1px solid #ddd;
    border-radius:12px;


}


.t8-match-header {

    text-align:center;
    margin-bottom:0px;

}


.t8-match-body {

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    gap:30px;

}


.t8-match-player {

    flex:1;
    text-align:center;

}


.t8-match-result {

    min-width:180px;

    text-align:center;

}