/* 全体 */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, "Noto Sans JP", sans-serif;
	background: #eeeeee;
	color: #222;
}

/* アプリ本体 */
.app {
	width: 100%;
	max-width: 430px;
	min-height: 100vh;
	margin: 0 auto;
	background: #f7f7f7;
	padding-bottom: 90px;
}

/* ヘッダー */
header {
	background: linear-gradient(135deg, #a50044, #004d98);
	color: white;
	padding: 22px 20px;
	text-align: center;
}

header h1 {
	font-size: 22px;
	letter-spacing: 0.5px;
}

/* ポイント */
.points {
	background: white;
	margin: 18px;
	padding: 20px;
	border-radius: 16px;
	text-align: center;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.points p {
	font-size: 12px;
	color: #777;
	letter-spacing: 2px;
}

.points h2 {
	margin-top: 5px;
	font-size: 34px;
	color: #a50044;
}

.points h2 span {
	font-size: 16px;
	color: #555;
}

/* 試合カード */
.match-card {
	background: white;
	margin: 18px;
	padding: 24px 18px;
	border-radius: 20px;
	text-align: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.match-title {
	font-size: 13px;
	font-weight: bold;
	color: #777;
	letter-spacing: 2px;
	margin-bottom: 22px;
}

/* チーム */
.teams {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.team {
	width: 110px;
}

.team-icon {
	font-size: 42px;
	margin-bottom: 8px;
}

.team p {
	font-size: 16px;
	font-weight: bold;
}

.vs {
	font-size: 15px;
	font-weight: bold;
	color: #888;
}

/* 試合日時 */
.match-date {
	margin-top: 22px;
	font-size: 14px;
	color: #555;
}

/* 予想ボタン */
.predict-button {
	width: 100%;
	margin-top: 20px;
	padding: 15px;
	border: none;
	border-radius: 12px;
	background: linear-gradient(135deg, #a50044, #004d98);
	color: white;
	font-size: 17px;
	font-weight: bold;
	cursor: pointer;
}

.predict-button:hover {
	opacity: 0.9;
}

/* ランキング */
.ranking {
	margin: 18px;
}

.ranking h2 {
	font-size: 20px;
	margin-bottom: 12px;
}

.rank {
	display: flex;
	align-items: center;
	gap: 12px;
	background: white;
	padding: 15px;
	margin-bottom: 8px;
	border-radius: 12px;
}

.rank span:nth-child(2) {
	flex: 1;
	font-weight: bold;
}

.rank strong {
	font-size: 14px;
}

.my-rank {
	border: 2px solid #a50044;
}

/* 下部メニュー */
.bottom-nav {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 430px;
	height: 75px;
	background: white;
	border-top: 1px solid #ddd;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.nav-item {
	text-align: center;
	color: #777;
	font-size: 11px;
}

.nav-item span {
	font-size: 22px;
}

.nav-item p {
	margin-top: 3px;
}

.nav-item.active {
	color: #a50044;
	font-weight: bold;
}
/* =========================
   予想ページ
========================= */

.prediction-page {
    padding: 18px;
}

.back-button {
    display: inline-block;
    margin-bottom: 15px;
    color: #a50044;
    text-decoration: none;
    font-weight: bold;
}

.prediction-card {
    background: white;
    padding: 25px 20px;
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.prediction-title {
    font-size: 18px;
    margin-top: 30px;
    margin-bottom: 15px;
}


/* 勝敗ボタン */

.result-buttons {
    display: flex;
    gap: 8px;
}

.result-buttons button {
    flex: 1;
    padding: 14px 5px;

    border: 2px solid #ddd;
    border-radius: 10px;

    background: white;

    font-size: 15px;
    font-weight: bold;

    cursor: pointer;
}


/* 選択されたボタン */

.result-buttons button.selected {
    background: linear-gradient(
        135deg,
        #a50044,
        #004d98
    );

    color: white;
    border-color: transparent;
}


/* スコア */

.score-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;

    margin: 20px 0;
}

.score-area p {
    font-size: 13px;
    margin-bottom: 8px;
}

.score-area input {
    width: 70px;
    height: 55px;

    padding: 0;

    text-align: center;

    font-size: 24px;
    font-weight: bold;

    color: #111;
    background-color: #fff;
    -webkit-text-fill-color: #111;

    border: 2px solid #ddd;
    border-radius: 10px;

    box-sizing: border-box;
}

.score-area span {
    font-size: 25px;
    font-weight: bold;
}


/* 確定ボタン */

.confirm-button {
    width: 100%;

    margin-top: 15px;
    padding: 16px;

    border: none;
    border-radius: 12px;

    background: linear-gradient(
        135deg,
        #a50044,
        #004d98
    );

    color: white;

    font-size: 17px;
    font-weight: bold;

    cursor: pointer;
}


/* 登録結果 */

#predictionMessage {
    margin-top: 20px;

    font-size: 15px;
    font-weight: bold;

    line-height: 1.8;
}
#savedPrediction {

    margin-top: 25px;
    padding: 18px;

    background: #f5f5f5;

    border-radius: 12px;

    text-align: left;
}

#savedPrediction h3 {

    margin-bottom: 12px;

    color: #a50044;
}

#savedPrediction p {

    margin: 7px 0;
}
/* =========================
   スタメン予想
========================= */

.lineup-description {
    font-size: 13px;
    color: #777;
    margin-bottom: 15px;
}


/* ピッチ */

.football-pitch {

    margin-top: 15px;

    padding: 25px 10px;

    border-radius: 18px;

    background:
        linear-gradient(
            rgba(20, 130, 70, 0.95),
            rgba(10, 100, 55, 0.95)
        );

    border: 3px solid white;

}


/* フォーメーションの横列 */

.formation-row {

    display: flex;

    justify-content: space-around;

    gap: 5px;

    margin: 25px 0;

}


/* 選手選択 */

.player-select {

    width: 85px;

    padding: 9px 4px;

    border: none;

    border-radius: 8px;

    background: white;

    font-size: 11px;

    font-weight: bold;

    text-align: center;

    cursor: pointer;

}


/* スマホ対応 */

@media (max-width: 400px) {

    .player-select {

        width: 72px;

        font-size: 10px;

    }

}
/* =========================================
   新しいスタメン予想UI
========================================= */


/* 説明 */

.lineup-description {

    font-size: 13px;

    color: #777;

    margin-bottom: 15px;

}



/* =========================================
   サッカーピッチ
========================================= */

.pitch-ui {

    position: relative;

    margin-top: 15px;

    padding: 25px 6px;

    min-height: 520px;

    border-radius: 18px;

    overflow: hidden;

    background:
        linear-gradient(
            to bottom,
            #299b58 0%,
            #299b58 12.5%,
            #238c4f 12.5%,
            #238c4f 25%,
            #299b58 25%,
            #299b58 37.5%,
            #238c4f 37.5%,
            #238c4f 50%,
            #299b58 50%,
            #299b58 62.5%,
            #238c4f 62.5%,
            #238c4f 75%,
            #299b58 75%,
            #299b58 87.5%,
            #238c4f 87.5%,
            #238c4f 100%
        );

}


/* 外側の白線 */

.pitch-ui::before {

    content: "";

    position: absolute;

    top: 12px;
    bottom: 12px;

    left: 12px;
    right: 12px;

    border: 2px solid
        rgba(255, 255, 255, 0.65);

    border-radius: 5px;

    pointer-events: none;

}


/* センターライン */

.pitch-ui::after {

    content: "";

    position: absolute;

    left: 12px;
    right: 12px;

    top: 50%;

    height: 2px;

    background:
        rgba(255, 255, 255, 0.55);

    pointer-events: none;

}



/* =========================================
   フォーメーション
========================================= */

.pitch-row {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-around;

    gap: 4px;

    margin: 25px 0;

}


.pitch-fw {

    margin-top: 5px;

}


.pitch-cm {

    padding-left: 35px;
    padding-right: 35px;

}


.pitch-df {

    margin-top: 35px;

}



/* =========================================
   ポジションカード
========================================= */

.position-card {

    width: 70px;

    min-height: 67px;

    padding: 5px;

    border: none;

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.94);

    box-shadow:
        0 3px 8px
        rgba(0, 0, 0, 0.2);

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transition:
        transform 0.15s,
        box-shadow 0.15s;

}


.position-card:active {

    transform:
        scale(0.95);

}



/* ポジション */

.position-name {

    font-size: 10px;

    font-weight: bold;

    color: #777;

    margin-bottom: 5px;

}



/* 選手名 */

.player-name {

    font-size: 11px;

    font-weight: bold;

    color: #222;

    line-height: 1.2;

    word-break: break-word;

}



/* ＋ */

.position-card
.player-name:first-letter {

    font-size: 16px;

}



/* 選手選択済み */

.position-card.selected-player {

    border: 2px solid #a50044;

    background: white;

}



/* =========================================
   選手選択モーダル
========================================= */

.player-modal {

    display: none;

    position: fixed;

    z-index: 1000;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(0, 0, 0, 0.55);

    align-items: flex-end;

    justify-content: center;

}



/* 表示 */

.player-modal.show {

    display: flex;

}



/* モーダル本体 */

.player-modal-content {

    width: 100%;

    max-width: 430px;

    max-height: 75vh;

    overflow-y: auto;

    background: white;

    border-radius:
        22px 22px 0 0;

    padding: 22px;

}



/* 上部分 */

.modal-header {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

}


.modal-header h2 {

    font-size: 20px;

}



/* 閉じる */

.modal-close {

    width: 38px;

    height: 38px;

    border: none;

    border-radius: 50%;

    background: #eeeeee;

    font-size: 23px;

    cursor: pointer;

}



.modal-description {

    margin-top: 8px;

    margin-bottom: 18px;

    color: #777;

    font-size: 13px;

}



/* =========================================
   選手一覧
========================================= */

.player-list {

    display: flex;

    flex-direction: column;

    gap: 9px;

}



/* 選手 */

.player-option {

    width: 100%;

    padding: 16px;

    border: 1px solid #ddd;

    border-radius: 12px;

    background: white;

    text-align: left;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;

}


.player-option:hover {

    background: #f5f5f5;

}



/* =========================================
   保存済みスタメン
========================================= */

#savedPrediction h4 {

    margin-top: 20px;

    margin-bottom: 10px;

    color: #004d98;

}



/* =========================================
   小さいスマホ
========================================= */

@media
(max-width: 380px) {


    .position-card {

        width: 62px;

        min-height: 62px;

    }


    .player-name {

        font-size: 10px;

    }


    .pitch-cm {

        padding-left: 25px;

        padding-right: 25px;

    }

}
/* =========================================
   MY PAGE
========================================= */

.mypage {

    padding: 18px;

}


/* =========================================
   PROFILE
========================================= */

.profile-area {

    display: flex;

    align-items: center;

    gap: 15px;

    background: white;

    padding: 18px;

    border-radius: 18px;

    margin-bottom: 15px;

    box-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.08);

}


.profile-icon {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #a50044,
            #004d98
        );

    font-size: 30px;

}


.profile-label {

    font-size: 11px;

    color: #777;

    letter-spacing: 2px;

}



/* =========================================
   POINTS
========================================= */

.mypage-points {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-bottom: 28px;

}


.mypage-point-card {

    background: white;

    padding: 18px 10px;

    border-radius: 16px;

    text-align: center;

    box-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.08);

}


.mypage-point-card p {

    font-size: 11px;

    color: #777;

    letter-spacing: 1px;

}


.mypage-point-card h2 {

    margin-top: 7px;

    font-size: 25px;

    color: #a50044;

}


.mypage-point-card.total h2 {

    color: #004d98;

}


.mypage-point-card span {

    font-size: 12px;

    color: #555;

}



/* =========================================
   MY CARD
========================================= */

.my-card-area {

    margin-bottom: 35px;

}


.my-card-area > h2 {

    margin-bottom: 5px;

}


.mypage-description {

    margin-top: 5px;

    margin-bottom: 16px;

    font-size: 13px;

    color: #777;

}



/* 大きいカード */

.display-player-card {

    position: relative;

    width: 230px;

    height: 320px;

    margin:
        20px auto;

    padding: 20px;

    border-radius: 22px;

    text-align: center;

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.25);

    overflow: hidden;

}



/* レアリティ */

.card-rarity {

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;

}



/* OVR */

.card-ovr {

    position: absolute;

    top: 45px;

    left: 20px;

    font-size: 28px;

    font-weight: bold;

}



/* 仮選手画像 */

.card-player-image {

    margin-top: 50px;

    font-size: 80px;

}



/* 選手名 */

.card-player-name {

    margin-top: 18px;

    font-size: 24px;

    font-weight: bold;

}



/* ポジション */

.card-position {

    margin-top: 6px;

    font-size: 14px;

}



/* OVR表示 */

.card-rating {

    margin-top: 10px;

    font-size: 14px;

    font-weight: bold;

}



/* =========================================
   レアリティ別カード
========================================= */

.normal-card {

    background:
        linear-gradient(
            145deg,
            #eeeeee,
            #bdbdbd
        );

    color: #222;

}


.rare-card {

    background:
        linear-gradient(
            145deg,
            #1d7fe8,
            #003d91
        );

    color: white;

}


.super-card {

    background:
        linear-gradient(
            145deg,
            #ffd54f,
            #b8860b
        );

    color: #222;

}


.epic-card {

    background:
        linear-gradient(
            145deg,
            #7928ca,
            #a50044,
            #004d98
        );

    color: white;

}


.legend-card {

    background:
        linear-gradient(
            145deg,
            #111111,
            #d4af37,
            #111111
        );

    color: white;

}



/* =========================================
   COLLECTION
========================================= */

.collection-area {

    margin-bottom: 35px;

}


.collection-header {

    display: flex;

    align-items: center;

    justify-content:
        space-between;

}


.collection-header h2 {

    font-size: 20px;

}


.collection-header span {

    font-size: 12px;

    color: #777;

}



/* カード一覧 */

.card-collection {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 12px;

}



/* 小さいカード */

.collection-card {

    min-height: 190px;

    padding: 15px;

    border: none;

    border-radius: 16px;

    box-shadow:
        0 5px 12px
        rgba(0, 0, 0, 0.15);

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

}


.collection-card:active {

    transform:
        scale(0.97);

}


.mini-rarity {

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 2px;

}


.mini-player {

    margin: 10px 0;

    font-size: 45px;

}


.collection-card strong {

    font-size: 16px;

}



/* =========================================
   GACHA
========================================= */

.gacha-link-area {

    background: white;

    padding: 20px;

    margin-bottom: 30px;

    border-radius: 18px;

    box-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.08);

}


.gacha-link-area p {

    margin: 10px 0 15px;

    color: #777;

    font-size: 13px;

    line-height: 1.6;

}


.gacha-button {

    width: 100%;

    padding: 15px;

    border: none;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #a50044,
            #004d98
        );

    color: white;

    font-size: 15px;

    font-weight: bold;

}
/* =========================================
   GACHA PAGE
========================================= */

.gacha-page {

    padding: 18px;

}


/* タイトル */

.gacha-header {

    text-align: center;

    margin-bottom: 20px;

}


.gacha-small-title {

    color: #777;

    font-size: 11px;

    letter-spacing: 3px;

}


.gacha-header h2 {

    margin-top: 7px;

    font-size: 24px;

}


.gacha-header > p:last-child {

    margin-top: 8px;

    color: #777;

    font-size: 13px;

}



/* =========================================
   所持ポイント
========================================= */

.gacha-points {

    background: white;

    margin-bottom: 20px;

    padding: 18px;

    border-radius: 16px;

    text-align: center;

    box-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.08);

}


.gacha-points p {

    font-size: 11px;

    color: #777;

    letter-spacing: 2px;

}


.gacha-points h2 {

    margin-top: 5px;

    color: #a50044;

    font-size: 30px;

}


.gacha-points span {

    color: #555;

    font-size: 14px;

}



/* =========================================
   ガチャ本体
========================================= */

.gacha-machine {

    padding: 30px 20px;

    background:

        linear-gradient(
            145deg,
            #a50044,
            #572583,
            #004d98
        );

    color: white;

    border-radius: 22px;

    text-align: center;

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.2);

}


.gacha-ball {

    width: 110px;

    height: 110px;

    margin:
        0 auto 20px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(
            255,
            255,
            255,
            0.15
        );

    font-size: 65px;

}


.gacha-machine h2 {

    font-size: 25px;

}


.gacha-machine > p {

    margin-top: 8px;

    font-size: 13px;

    opacity: 0.85;

}



/* ガチャボタン */

.draw-gacha-button {

    width: 100%;

    margin-top: 22px;

    padding: 17px;

    border: none;

    border-radius: 13px;

    background: white;

    color: #a50044;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

}


.draw-gacha-button:active {

    transform:
        scale(0.98);

}


.gacha-message {

    min-height: 20px;

    margin-top: 13px;

    font-size: 13px;

}



/* =========================================
   ガチャ結果
========================================= */

.gacha-result-area {

    display: none;

    margin-top: 30px;

    text-align: center;

}


.gacha-result-area.show {

    display: block;

}


.result-label {

    margin-bottom: 15px;

    color: #777;

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;

}



/* ガチャ結果カード */

.gacha-result-card {

    position: relative;

    width: 230px;

    height: 320px;

    margin: 0 auto;

    padding: 20px;

    border-radius: 22px;

    text-align: center;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.3);

    overflow: hidden;

}


.new-card-message {

    margin-top: 15px;

    font-size: 18px;

    font-weight: bold;

    color: #a50044;

}



/* =========================================
   排出率
========================================= */

.gacha-rates {

    margin-top: 30px;

    margin-bottom: 30px;

    padding: 20px;

    background: white;

    border-radius: 18px;

    box-shadow:
        0 3px 12px
        rgba(0, 0, 0, 0.08);

}


.gacha-rates h2 {

    margin-bottom: 15px;

    font-size: 18px;

}


.rate-row {

    display: flex;

    justify-content:
        space-between;

    padding: 12px 5px;

    border-bottom:
        1px solid #eeeeee;

}


.rate-row:last-child {

    border-bottom: none;

}


.rate-row span {

    font-size: 13px;

    font-weight: bold;

}


.rate-row strong {

    font-size: 14px;

}
/* =========================================
   COLLECTION追加デザイン
========================================= */


/* OVR */

.collection-card {

    position: relative;

}


.mini-ovr {

    position: absolute;

    top: 12px;

    left: 12px;

    font-size: 20px;

    font-weight: bold;

}


/* =========================================
   カード0枚
========================================= */

.empty-collection {

    grid-column: 1 / -1;

    background: white;

    padding: 35px 20px;

    border-radius: 18px;

    text-align: center;

    color: #777;

}


.empty-card-icon {

    margin-bottom: 12px;

    font-size: 45px;

}


.empty-collection strong {

    display: block;

    color: #333;

    font-size: 15px;

}


.empty-collection p {

    margin-top: 7px;

    font-size: 12px;

}


/* =========================================
   MY CARD未設定
========================================= */

.empty-display-card {

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        linear-gradient(
            145deg,
            #eeeeee,
            #dddddd
        );

    color: #777;

}


.empty-display-content {

    text-align: center;

}


.empty-display-icon {

    margin-bottom: 15px;

    font-size: 60px;

}


.empty-display-content strong {

    display: block;

    color: #333;

    font-size: 18px;

}


.empty-display-content p {

    margin-top: 10px;

    padding: 0 15px;

    font-size: 12px;

    line-height: 1.6;

}
/* =========================================
   REAL CARD GACHA
========================================= */


/* ガチャ結果のレアリティ */

.rarity-result {

    margin-bottom: 10px;

    font-size: 18px;

    font-weight: 900;

    letter-spacing: 4px;

    color: #555;

}


/* =========================================
   実際のカード画像
========================================= */

.real-gacha-card {

    position: relative;

    width: 260px;

    min-height: 350px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 25px;

}


.real-gacha-card img {

    display: block;

    width: 100%;

    max-height: 390px;

    object-fit: contain;

    position: relative;

    z-index: 2;

    filter:

        drop-shadow(
            0 12px 15px
            rgba(0, 0, 0, 0.35)
        );

}


/* 選手名 */

.result-player-name {

    margin-top: 12px;

    font-size: 22px;

    text-align: center;

}



/* =========================================
   EPIC CARD
========================================= */

.epic-result-card {

    animation:

        epicCardAppear
        1.2s
        ease-out;

}


.epic-result-card::before {

    content: "";

    position: absolute;

    width: 115%;

    height: 90%;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(121, 40, 202, 0.8),
            rgba(0, 77, 152, 0.45),
            transparent 70%
        );

    filter: blur(18px);

    animation:

        epicGlow
        1.5s
        infinite
        alternate;

}


.epic-result-text {

    color: #7928ca;

    text-shadow:

        0 0 8px
        rgba(121, 40, 202, 0.7),

        0 0 18px
        rgba(0, 77, 152, 0.5);

}


/* EPICカード登場 */

@keyframes epicCardAppear {

    0% {

        opacity: 0;

        transform:
            scale(0.3)
            rotate(-6deg);

    }


    60% {

        opacity: 1;

        transform:
            scale(1.12)
            rotate(2deg);

    }


    100% {

        transform:
            scale(1)
            rotate(0deg);

    }

}


/* EPIC発光 */

@keyframes epicGlow {

    from {

        opacity: 0.55;

        transform:
            scale(0.9);

    }


    to {

        opacity: 1;

        transform:
            scale(1.08);

    }

}



/* =========================================
   LEGEND CARD
========================================= */

.legend-result-card {

    animation:

        legendCardAppear
        1.4s
        ease-out;

}


.legend-result-card::before {

    content: "";

    position: absolute;

    width: 130%;

    height: 100%;

    border-radius: 50%;

    background:

        radial-gradient(
            circle,
            rgba(255, 215, 0, 0.95),
            rgba(255, 165, 0, 0.55),
            transparent 70%
        );

    filter: blur(22px);

    animation:

        legendGlow
        0.8s
        infinite
        alternate;

}


.legend-result-text {

    color: #d4af37;

    font-size: 24px;

    text-shadow:

        0 0 5px
        #ffffff,

        0 0 12px
        #ffd700,

        0 0 25px
        #ff9900;

}


/* LEGEND登場 */

@keyframes legendCardAppear {

    0% {

        opacity: 0;

        transform:
            scale(0.1)
            rotate(-10deg);

    }


    45% {

        opacity: 1;

        transform:
            scale(1.25)
            rotate(4deg);

    }


    70% {

        transform:
            scale(0.95)
            rotate(-2deg);

    }


    100% {

        transform:
            scale(1)
            rotate(0deg);

    }

}


/* LEGEND発光 */

@keyframes legendGlow {

    from {

        opacity: 0.55;

        transform:
            scale(0.85);

    }


    to {

        opacity: 1;

        transform:
            scale(1.15);

    }

}



/* =========================================
   画面全体の特殊演出
========================================= */

.special-effect {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 9999;

    pointer-events: none;

    opacity: 0;

    visibility: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* 演出表示 */

.show-special-effect {

    opacity: 1;

    visibility: visible;

}



/* =========================================
   EPIC画面演出
========================================= */

.epic-effect {

    background:

        radial-gradient(
            circle,
            rgba(121, 40, 202, 0.75),
            rgba(0, 77, 152, 0.75),
            rgba(0, 0, 0, 0.8)
        );

    animation:

        specialBackground
        2.2s
        ease-out;

}



/* =========================================
   LEGEND画面演出
========================================= */

.legend-effect {

    background:

        radial-gradient(
            circle,
            rgba(255, 215, 0, 0.85),
            rgba(160, 100, 0, 0.75),
            rgba(0, 0, 0, 0.92)
        );

    animation:

        legendBackground
        2.2s
        ease-out;

}



/* =========================================
   特殊文字
========================================= */

.special-text {

    font-weight: 900;

    text-align: center;

    opacity: 0;

}


.epic-special-text {

    color: white;

    font-size: 42px;

    letter-spacing: 5px;

    text-shadow:

        0 0 10px #ffffff,

        0 0 25px #7928ca,

        0 0 45px #004d98;

    animation:

        specialTextAppear
        2.1s
        ease-out;

}


.legend-special-text {

    color: white;

    font-size: 45px;

    letter-spacing: 4px;

    text-shadow:

        0 0 8px #ffffff,

        0 0 18px #ffd700,

        0 0 35px #ff9900,

        0 0 55px #ffd700;

    animation:

        legendTextAppear
        2.1s
        ease-out;

}



/* =========================================
   特殊演出アニメーション
========================================= */

@keyframes specialBackground {

    0% {

        opacity: 0;

    }


    20% {

        opacity: 1;

    }


    75% {

        opacity: 1;

    }


    100% {

        opacity: 0;

    }

}


@keyframes legendBackground {

    0% {

        opacity: 0;

        filter:
            brightness(3);

    }


    15% {

        opacity: 1;

        filter:
            brightness(1.8);

    }


    75% {

        opacity: 1;

        filter:
            brightness(1);

    }


    100% {

        opacity: 0;

    }

}


@keyframes specialTextAppear {

    0% {

        opacity: 0;

        transform:
            scale(0.2);

    }


    25% {

        opacity: 1;

        transform:
            scale(1.25);

    }


    65% {

        opacity: 1;

        transform:
            scale(1);

    }


    100% {

        opacity: 0;

        transform:
            scale(1.1);

    }

}


@keyframes legendTextAppear {

    0% {

        opacity: 0;

        transform:
            scale(0.1);

    }


    20% {

        opacity: 1;

        transform:
            scale(1.4);

    }


    35% {

        transform:
            scale(0.95);

    }


    50% {

        transform:
            scale(1.1);

    }


    75% {

        opacity: 1;

        transform:
            scale(1);

    }


    100% {

        opacity: 0;

        transform:
            scale(1.2);

    }

}



/* =========================================
   スマホ
========================================= */

@media (
    max-width: 480px
) {

    .real-gacha-card {

        width: 230px;

        min-height: 320px;

    }


    .real-gacha-card img {

        max-height: 350px;

    }


    .epic-special-text {

        font-size: 32px;

    }


    .legend-special-text {

        font-size: 34px;

    }

}
/* =========================================
   REAL CARD COLLECTION
========================================= */

.card-collection {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 14px;

}


/* =========================================
   コレクションカード
========================================= */

.real-collection-card {

    position: relative;

    width: 100%;

    padding: 12px 7px 14px;

    border: none;

    border-radius: 18px;

    background: #111827;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 0.2s,
        box-shadow 0.2s;

}


.real-collection-card:active {

    transform:
        scale(0.96);

}


/* カード画像 */

.collection-card-image {

    display: block;

    width: 100%;

    height: 210px;

    object-fit: contain;

    position: relative;

    z-index: 2;

    filter:

        drop-shadow(
            0 8px 8px
            rgba(0, 0, 0, 0.35)
        );

}


/* レアリティ */

.collection-rarity {

    display: block;

    position: relative;

    z-index: 3;

    margin-bottom: 5px;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 2px;

    color: white;

}


/* 選手名 */

.collection-player-name {

    display: block;

    position: relative;

    z-index: 3;

    margin-top: 5px;

    color: white;

    font-size: 12px;

}



/* =========================================
   NORMAL
========================================= */

.collection-normal {

    background:

        radial-gradient(
            circle at center,
            #5d6775,
            #202631
        );

}



/* =========================================
   RARE
========================================= */

.collection-rare {

    background:

        radial-gradient(
            circle at center,
            #1677d2,
            #002a62
        );

    box-shadow:

        0 5px 15px
        rgba(0, 91, 200, 0.25);

}



/* =========================================
   SUPER RARE
========================================= */

.collection-super {

    background:

        radial-gradient(
            circle at center,
            #d39b1c,
            #513100
        );

    box-shadow:

        0 5px 18px
        rgba(255, 180, 0, 0.30);

}



/* =========================================
   EPIC
========================================= */

.collection-epic {

    background:

        radial-gradient(
            circle at center,
            #7928ca,
            #004d98,
            #120c29
        );

    box-shadow:

        0 0 18px
        rgba(121, 40, 202, 0.55);

}


.collection-epic::before {

    content: "";

    position: absolute;

    inset: -30%;

    background:

        radial-gradient(
            circle,
            rgba(138, 43, 226, 0.4),
            transparent 60%
        );

    animation:

        collectionEpicGlow
        2s
        infinite
        alternate;

}


@keyframes collectionEpicGlow {

    from {

        opacity: 0.4;

    }

    to {

        opacity: 1;

    }

}



/* =========================================
   LEGEND
========================================= */

.collection-legend {

    background:

        radial-gradient(
            circle at center,
            #d4af37,
            #5f4200,
            #111111
        );

    box-shadow:

        0 0 22px
        rgba(255, 215, 0, 0.65);

}


.collection-legend::before {

    content: "";

    position: absolute;

    inset: -30%;

    background:

        radial-gradient(
            circle,
            rgba(255, 215, 0, 0.55),
            transparent 60%
        );

    animation:

        collectionLegendGlow
        1.3s
        infinite
        alternate;

}


@keyframes collectionLegendGlow {

    from {

        opacity: 0.35;

        transform:
            scale(0.9);

    }

    to {

        opacity: 1;

        transform:
            scale(1.1);

    }

}



/* =========================================
   REAL MY CARD
========================================= */

.real-display-card {

    position: relative;

    width: 280px;

    min-height: 390px;

    margin: 20px auto;

    padding: 20px 15px;

    border-radius: 25px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    box-shadow:

        0 12px 30px
        rgba(0, 0, 0, 0.25);

}


/* MY CARD画像 */

.display-card-image {

    display: block;

    width: 100%;

    max-height: 340px;

    object-fit: contain;

    position: relative;

    z-index: 2;

    filter:

        drop-shadow(
            0 12px 12px
            rgba(0, 0, 0, 0.4)
        );

}


/* レアリティ */

.display-rarity {

    position: relative;

    z-index: 3;

    margin-bottom: 5px;

    color: white;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 4px;

}


/* 選手名 */

.display-player-name {

    position: relative;

    z-index: 3;

    margin-top: 8px;

    color: white;

    font-size: 18px;

    font-weight: bold;

}



/* =========================================
   MY CARDのLEGENDを少し豪華に
========================================= */

.real-display-card.collection-legend {

    animation:

        myLegendGlow
        2s
        infinite
        alternate;

}


@keyframes myLegendGlow {

    from {

        box-shadow:

            0 0 15px
            rgba(255, 215, 0, 0.45);

    }

    to {

        box-shadow:

            0 0 35px
            rgba(255, 215, 0, 0.9);

    }

}



/* =========================================
   MY CARDのEPIC
========================================= */

.real-display-card.collection-epic {

    animation:

        myEpicGlow
        2s
        infinite
        alternate;

}


@keyframes myEpicGlow {

    from {

        box-shadow:

            0 0 15px
            rgba(121, 40, 202, 0.45);

    }

    to {

        box-shadow:

            0 0 32px
            rgba(0, 77, 152, 0.85);

    }

}



/* =========================================
   スマホ
========================================= */

@media (
    max-width: 480px
) {

    .collection-card-image {

        height: 190px;

    }


    .real-display-card {

        width: 250px;

        min-height: 360px;

    }


    .display-card-image {

        max-height: 310px;

    }

}
/* =========================================
   CARD ACTION MODAL
========================================= */

.card-action-modal {

    position: fixed;

    inset: 0;

    z-index: 10000;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, 0.7);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s ease;

}


/* 表示 */

.card-action-modal.show-card-action-modal {

    opacity: 1;

    visibility: visible;

}


/* =========================================
   メニュー本体
========================================= */

.card-action-box {

    position: relative;

    width: 100%;

    max-width: 400px;

    padding:
        25px 20px
        20px;

    border-radius:
        25px 25px
        15px 15px;

    background: white;

    text-align: center;

    transform:
        translateY(50px);

    transition:
        transform 0.3s ease;

}


.show-card-action-modal
.card-action-box {

    transform:
        translateY(0);

}


/* ×ボタン */

.modal-close-button {

    position: absolute;

    top: 12px;

    right: 15px;

    width: 36px;

    height: 36px;

    border: none;

    border-radius: 50%;

    background: #eeeeee;

    font-size: 22px;

    cursor: pointer;

}


/* SELECT CARD */

.action-small-title {

    margin: 0 0 10px;

    color: #777;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 3px;

}


/* =========================================
   カード画像
========================================= */

.action-card-image {

    display: block;

    width: 180px;

    height: 240px;

    margin:
        0 auto 5px;

    object-fit: contain;

    filter:

        drop-shadow(
            0 10px 10px
            rgba(0, 0, 0, 0.25)
        );

}


#actionCardName {

    margin:
        5px 0;

    font-size: 20px;

}


.action-card-rarity {

    margin:
        0 0 18px;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 3px;

    color: #666;

}


/* =========================================
   MY CARDボタン
========================================= */

.set-mycard-button {

    width: 100%;

    padding: 15px;

    margin-bottom: 10px;

    border: none;

    border-radius: 12px;

    background:

        linear-gradient(
            135deg,
            #004d98,
            #a50044
        );

    color: white;

    font-size: 15px;

    font-weight: 900;

    cursor: pointer;

}


/* =========================================
   売却ボタン
========================================= */

.sell-card-button {

    width: 100%;

    padding: 15px;

    margin-bottom: 10px;

    border: none;

    border-radius: 12px;

    background:

        linear-gradient(
            135deg,
            #d4af37,
            #a36b00
        );

    color: white;

    font-size: 15px;

    font-weight: 900;

    cursor: pointer;

}


/* =========================================
   キャンセル
========================================= */

.cancel-card-button {

    width: 100%;

    padding: 13px;

    border: none;

    border-radius: 12px;

    background: #eeeeee;

    color: #333;

    font-size: 14px;

    font-weight: bold;

    cursor: pointer;

}
/* =========================================
   LINEUP CARD COLLECTION
========================================= */

.modal-section-title {

    margin:
        20px 0 10px;

    font-size: 14px;

    font-weight: 900;

    color: #333;

}


/* 所持カード一覧 */

.lineup-card-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 10px;

    margin-bottom: 20px;

}


.lineup-card-option {

    border: none;

    border-radius: 14px;

    padding: 7px;

    background:

        linear-gradient(
            145deg,
            #111827,
            #202b3c
        );

    color: white;

    cursor: pointer;

    transition:
        transform 0.2s;

}


.lineup-card-option:active {

    transform:
        scale(0.95);

}


.lineup-card-option img {

    display: block;

    width: 100%;

    height: 130px;

    object-fit: contain;

    filter:

        drop-shadow(
            0 5px 5px
            rgba(0, 0, 0, 0.35)
        );

}


.lineup-card-option span {

    display: block;

    margin-top: 4px;

    font-size: 10px;

    font-weight: bold;

}


/* =========================================
   ピッチ上のカード
========================================= */

.position-card {

    position: relative;

    overflow: visible;

}


.pitch-card-image {

    position: absolute;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 68px;

    height: 95px;

    object-fit: contain;

    z-index: 5;

    pointer-events: none;

    filter:

        drop-shadow(
            0 5px 5px
            rgba(0, 0, 0, 0.4)
        );

}
/* =========================================
   スタメン予想
   カード選択時は白い枠を消す
========================================= */

.position-card:has(.pitch-card-image) {

    background: transparent !important;

    border: none !important;

    box-shadow: none !important;

}


/* =========================================
   ピッチ上のカードを大きく表示
========================================= */

.pitch-card-image {

    position: absolute;

    left: 50%;

    top: 50%;

    transform:
        translate(-50%, -50%);

    width: 90px;

    height: 125px;

    object-fit: contain;

    z-index: 10;

    pointer-events: none;

    filter:
        drop-shadow(
            0 7px 7px
            rgba(0, 0, 0, 0.4)
        );

}


/* =========================================
   カード選択時は元の文字も完全に隠す
========================================= */

.position-card:has(.pitch-card-image)
.position-label,

.position-card:has(.pitch-card-image)
.player-name {

    visibility: hidden;

}
/* =========================================
   PREDICTION HISTORY
========================================= */

.history-page {

    padding:
        25px 28px
        120px;

}


.history-title {

    margin-bottom: 25px;

}


.history-small-title {

    margin-bottom: 5px;

    color: #777;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 3px;

}


.history-title h2 {

    margin:
        5px 0 8px;

    font-size: 28px;

}


.history-title > p:last-child {

    color: #777;

}


/* =========================================
   新しい予想
========================================= */

.new-prediction-button {

    width: 100%;

    padding: 17px;

    margin-bottom: 25px;

    border: none;

    border-radius: 15px;

    background:

        linear-gradient(
            135deg,
            #a50044,
            #004d98
        );

    color: white;

    font-size: 16px;

    font-weight: 900;

    cursor: pointer;

}


/* =========================================
   履歴カード
========================================= */

.history-list {

    display: flex;

    flex-direction: column;

    gap: 18px;

}


.history-match-card {

    padding: 22px;

    border-radius: 22px;

    background: white;

    box-shadow:

        0 8px 25px
        rgba(0, 0, 0, 0.08);

}


.history-date {

    margin: 0 0 5px;

    color: #888;

    font-size: 12px;

    font-weight: bold;

}


.history-match-name {

    margin:
        0 0 20px;

    font-size: 20px;

}


/* =========================================
   勝敗予想
========================================= */

.history-result {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        12px 0;

    border-top:
        1px solid #eeeeee;

}


.history-result span {

    color: #777;

    font-size: 12px;

}


.history-result strong {

    color: #a50044;

}


/* =========================================
   SCORE
========================================= */

.history-score {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin:
        15px 0;

    padding: 15px;

    border-radius: 15px;

    background: #f5f5f5;

}


.history-score strong {

    font-size: 25px;

}


.score-team {

    color: #777;

    font-size: 10px;

    font-weight: 900;

}


/* =========================================
   STATUS
========================================= */

.history-status {

    display: inline-block;

    margin-bottom: 15px;

    padding:
        6px 10px;

    border-radius: 20px;

    background: #e7f8ed;

    color: #188342;

    font-size: 11px;

    font-weight: 900;

}


/* =========================================
   スタメンボタン
========================================= */

.history-lineup-button {

    width: 100%;

    padding: 13px;

    border:
        2px solid #004d98;

    border-radius: 12px;

    background: white;

    color: #004d98;

    font-size: 14px;

    font-weight: 900;

    cursor: pointer;

}


/* =========================================
   履歴なし
========================================= */

.empty-history {

    padding:
        50px 20px;

    border-radius: 22px;

    background: white;

    text-align: center;

}


.empty-history-icon {

    margin-bottom: 10px;

    font-size: 45px;

}


.empty-history h3 {

    margin-bottom: 8px;

}


.empty-history p {

    color: #888;

}
/* =========================================
   HISTORY LINEUP MODAL
========================================= */

.history-lineup-modal {

    position: fixed;
    inset: 0;

    z-index: 20000;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px;

    background:
        rgba(0, 0, 0, 0.78);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.25s ease;

}


.history-lineup-modal.show-history-lineup {

    opacity: 1;
    visibility: visible;

}


/* =========================================
   モーダル本体
========================================= */

.history-lineup-box {

    position: relative;

    width: 100%;
    max-width: 520px;

    max-height: 94vh;
    overflow-y: auto;

    padding: 25px 18px;

    border-radius: 25px;

    background: white;

    text-align: center;

}


.history-lineup-close {

    position: absolute;

    top: 12px;
    right: 14px;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #eeeeee;

    font-size: 24px;

    cursor: pointer;

}


.history-lineup-small {

    margin: 0 0 5px;

    color: #777;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: 3px;

}


#historyLineupTitle {

    margin:
        0 35px
        18px;

    font-size: 19px;

}


/* =========================================
   HISTORY PITCH
========================================= */

.history-pitch {

    position: relative;

    width: 100%;

    min-height: 650px;

    padding:
        28px 8px;

    border:
        4px solid
        #238c4d;

    border-radius: 25px;

    background:

        repeating-linear-gradient(
            0deg,
            #279c58 0px,
            #279c58 105px,
            #218c4e 105px,
            #218c4e 210px
        );

    overflow: hidden;

}


/* 外側ライン */

.history-pitch::before {

    content: "";

    position: absolute;

    inset: 15px;

    border:
        3px solid
        rgba(255, 255, 255, 0.75);

    border-radius: 8px;

    pointer-events: none;

}


/* センターライン */

.history-pitch::after {

    content: "";

    position: absolute;

    left: 15px;
    right: 15px;

    top: 50%;

    height: 3px;

    background:
        rgba(255, 255, 255, 0.7);

    pointer-events: none;

}


/* =========================================
   各ライン
========================================= */

.history-row {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content:
        space-around;

    align-items: center;

}


.history-fw {

    height: 125px;

}


.history-cm {

    height: 115px;

}


.history-dm {

    height: 110px;

}


.history-df {

    height: 130px;

}


.history-gk {

    height: 115px;

}


/* =========================================
   通常選手
========================================= */

.history-position {

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    width: 82px;
    min-height: 85px;

    padding: 6px;

    border-radius: 15px;

    background:
        rgba(255, 255, 255, 0.94);

}


.history-position-label {

    margin-bottom: 5px;

    color: #777;

    font-size: 11px;
    font-weight: 900;

}


.history-player-name {

    font-size: 11px;

    line-height: 1.15;

    word-break: break-word;

}


/* =========================================
   カードを使用した選手
========================================= */

.history-position.has-history-card {

    background: transparent;

    padding: 0;

    min-height: 105px;

}


.history-player-card {

    display: block;

    width: 90px;
    height: 120px;

    object-fit: contain;

    filter:

        drop-shadow(
            0 6px 6px
            rgba(0, 0, 0, 0.45)
        );

}
/* =========================================
   BARÇA HEADER LOGO
========================================= */

.header-title {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

}


.barca-header-logo {

    width: 62px;

    height: 62px;

    object-fit: contain;

    display: block;

    filter:
        drop-shadow(
            0 4px 6px
            rgba(0, 0, 0, 0.25)
        );

}


.header-title h1 {

    margin: 0;

}
/* =========================================
   NEXT MATCH TEAM LOGO
========================================= */

.match-team-logo {

    width: 90px;
    height: 90px;

    object-fit: contain;

    display: block;

    margin:
        0 auto 12px;

    filter:
        drop-shadow(
            0 5px 7px
            rgba(0, 0, 0, 0.18)
        );
}
/* =========================================
   HOME NEXT MATCH 修正版
========================================= */

.match-card {

    width: calc(100% - 56px);
    max-width: 560px;

    margin: 28px auto;

    padding: 32px 28px;

    box-sizing: border-box;

    background: white;

    border-radius: 28px;

    box-shadow:
        0 10px 25px
        rgba(0, 0, 0, 0.08);

}


/* NEXT MATCH */

.match-title {

    margin:
        0 0 35px;

    text-align: center;

    color: #777;

    font-size: 17px;

    letter-spacing: 3px;

}


/* =========================================
   Barcelona VS Getafe
========================================= */

.match-teams {

    display: grid;

    grid-template-columns:
        1fr 60px 1fr;

    align-items: center;

    width: 100%;

    margin-bottom: 35px;

}


/* チーム */

.team {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    min-width: 0;

}


.team p {

    margin:
        12px 0 0;

    font-size: 18px;

    font-weight: 800;

    text-align: center;

}


/* VS */

.vs {

    display: flex;

    justify-content: center;

    align-items: center;

    color: #888;

    font-size: 19px;

    font-weight: 900;

}


/* =========================================
   Barcelonaエンブレム
========================================= */

.match-team-logo {

    display: block;

    width: 85px;
    height: 85px;

    object-fit: contain;

    margin: 0 auto;

    filter:
        drop-shadow(
            0 5px 6px
            rgba(0, 0, 0, 0.2)
        );

}


/* =========================================
   Getafe仮ロゴ
========================================= */

.getafe-logo {

    width: 65px;
    height: 65px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 40% 30%,
            #ffffff,
            #eee7f5 45%,
            #a987c8
        );

}


/* =========================================
   日時
========================================= */

.match-date {

    display: flex;

    justify-content: center;

    gap: 28px;

    margin:
        0 0 25px;

    font-size: 16px;

    color: #444;

}


/* =========================================
   予想ボタン
========================================= */

.predict-button {

    display: block;

    width: 100%;

    padding: 18px;

    border: none;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #a50044,
            #0057a8
        );

    color: white;

    font-size: 19px;

    font-weight: 900;

    cursor: pointer;

}
/* =========================================
   アプリ全体のスマホサイズ
========================================= */

html,
body {

    margin: 0;

    padding: 0;

    width: 100%;

    min-height: 100%;

}


body {

    background: #eeeeee;

}


.app {

    position: relative;

    width: 100%;

    max-width: 600px;

    min-height: 100vh;

    margin: 0 auto;

    background: #f7f7f7;

    overflow-x: hidden;

}
/* =========================================
   BOTTOM NAV 修正版
========================================= */

.bottom-nav {

    position: fixed;

    left: 50%;
    bottom: 0;

    transform:
        translateX(-50%);

    width: 100%;
    max-width: 600px;

    height: 78px;

    display: flex;

    justify-content:
        space-around;

    align-items: center;

    box-sizing: border-box;

    background: white;

    border-top:
        1px solid #dddddd;

    z-index: 9999;

}


.bottom-nav .nav-item {

    flex: 1;

    text-align: center;

    cursor: pointer;

}


.bottom-nav .nav-item span {

    display: block;

    font-size: 25px;

}


.bottom-nav .nav-item p {

    margin: 4px 0 0;

    font-size: 12px;

}/* =========================================
   履歴 スタメン採点
========================================= */

.history-lineup-position {
    position: relative;
}


/* 正解 */

.history-correct {
    position: relative;
}

.history-correct-mark {
    position: absolute;

    left: 50%;
    bottom: -28px;

    transform: translateX(-50%);

    z-index: 20;

    white-space: nowrap;

    color: #0a8f3c;

    font-size: 14px;
    font-weight: 900;

    background: white;

    padding: 4px 8px;

    border-radius: 20px;
}


/* 不正解 */

.history-wrong {
    position: relative;
}


/* カード・選手枠の上に出す赤い× */

.history-wrong-mark {
    position: absolute;

    top: 22px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 50;

    color: #e00020;

    font-size: 24px;
    font-weight: 900;

    line-height: 1;

    pointer-events: none;
}

/* 正解選手名 */

.history-correct-answer {
    position: absolute;

    top: 58px;
    left: 50%;

    transform: translateX(-50%);

    z-index: 60;

    width: 100px;

    text-align: center;

    background: transparent;
    border: none;
    box-shadow: none;

    padding: 0;

    pointer-events: none;
}


.history-correct-answer span {
    display: none;
}


.history-correct-answer strong {
    display: block;

    margin: 0;

    color: #e00020;

    font-size: 14px;
    font-weight: 900;

    line-height: 1.1;
}
/* =========================================
   履歴 採点結果
========================================= */

.history-grading-box {
    margin-bottom: 16px;
}


.grading-finished {
    background: #f7f7f7;

    border-radius: 16px;

    padding: 16px 18px;
}


.grading-title {
    font-size: 18px;
    font-weight: 900;

    margin-bottom: 12px;
}


.grading-detail-row {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 15px;

    padding: 7px 0;

    font-size: 15px;
}


.grading-detail-row strong {
    white-space: nowrap;
}


.grading-total {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-top: 10px;
    padding-top: 12px;

    border-top: 2px solid #dddddd;

    font-size: 18px;
    font-weight: 900;
}


.grading-total strong {
    font-size: 21px;
}
/* =========================================
   履歴 実際のスコア
========================================= */

.history-actual-score-label {
    margin-top: 16px;
    margin-bottom: 8px;

    color: #777;

    font-size: 15px;
    font-weight: 700;
}


.history-actual-score {
    border: 2px solid #dddddd;
}
/* =========================================
   RANKING
========================================= */

.ranking-page {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;

    margin: 0 auto;

    padding:
        40px
        0
        120px;

    box-sizing: border-box;

    background:
        linear-gradient(
            160deg,
            #071a3d 0%,
            #123a74 55%,
            #8b1737 100%
        );
}

.ranking-container {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;

    padding: 0 16px;
    box-sizing: border-box;
}

.ranking-small-title {
    margin: 0;
    text-align: center;
    color: #f4c542;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
}

.ranking-container h1 {
    margin: 8px 0 4px;
    text-align: center;
    color: white;
    font-size: 34px;
}

.ranking-description {
    margin-bottom: 30px;
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
}


/* ランキング一覧 */

.ranking-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* 1人分 */

.ranking-item {
    display: grid;

    grid-template-columns:
        70px
        1fr
        auto;

    align-items: center;

    min-height: 72px;

    padding: 12px 20px;

    background: white;

    border-radius: 18px;

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, 0.15);
}


/* 順位 */

.ranking-rank {
    font-size: 20px;
    font-weight: 900;
}


/* 名前 */

.ranking-name {
    font-size: 17px;
    font-weight: 800;
}


/* ポイント */

.ranking-points {
    color: #0c3270;

    font-size: 18px;
    font-weight: 900;
}


/* 自分 */

.ranking-me {
    border: 3px solid #f4c542;

    transform: scale(1.02);

    background:
        linear-gradient(
            90deg,
            #fff8dc,
            #ffffff
        );
}

.ranking-me .ranking-name::after {
    content: " YOU";

    margin-left: 7px;

    color: #c79600;

    font-size: 11px;
    font-weight: 900;
}
body {
    background: #eeeeee;
}
.ranking-page + .bottom-nav {
    width: 100%;
    max-width: 430px;

    left: 50%;
    right: auto;

    transform: translateX(-50%);

    box-sizing: border-box;
}
/* =====================================
   新規登録
===================================== */

.register-page {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 70px 28px 40px;
    box-sizing: border-box;

    background:
        linear-gradient(
            160deg,
            #071a3d 0%,
            #123a74 60%,
            #8b1737 100%
        );

    color: white;
}

.register-logo {
    color: #f7c843;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 3px;
    text-align: center;
    margin-bottom: 32px;
}

.register-page h1 {
    margin: 0;
    text-align: center;
    font-size: 32px;
    font-weight: 900;
}

.register-description {
    margin: 12px 0 38px;
    text-align: center;
    color: #d8e2f1;
    line-height: 1.7;
}

.register-field {
    margin-bottom: 20px;
}

.register-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 800;
}

.register-field input {
    width: 100%;
    height: 54px;
    padding: 0 16px;
    box-sizing: border-box;

    border: none;
    border-radius: 14px;

    background: white;
    color: #111;

    font-size: 16px;
    outline: none;
}

.register-field input:focus {
    outline: 3px solid #f7c843;
}

.register-button {
    width: 100%;
    height: 56px;

    margin-top: 12px;

    border: none;
    border-radius: 16px;

    background: #f7c843;
    color: #071a3d;

    font-size: 17px;
    font-weight: 900;

    cursor: pointer;
}

.register-button:hover {
    opacity: 0.92;
}

.register-message {
    min-height: 24px;
    margin-top: 20px;

    text-align: center;
    font-size: 14px;
    font-weight: 700;
}
/* =====================================
   ログイン画面とサイズ感を統一
===================================== */

.register-page {
    width: 100%;
    max-width: 690px;
    min-height: 100vh;

    margin: 0 auto;

    padding:
        110px
        45px
        80px;
}

.logo {
    font-size: 28px;
    letter-spacing: 5px;
    margin-bottom: 65px;
}

h1 {
    font-size: 44px;
}

.description {
    font-size: 21px;
    line-height: 1.8;

    margin:
        25px
        0
        65px;
}

.form-group {
    margin-bottom: 30px;
}

label {
    font-size: 20px;
    margin-bottom: 12px;
}

input {
    width: 100%;

    padding:
        23px
        24px;

    border-radius: 20px;

    font-size: 20px;
}

button {
    width: 100%;

    margin-top: 15px;

    padding: 22px;

    border-radius: 20px;

    font-size: 22px;
}

/* =========================================
   管理画面 選手選択モーダル
========================================= */

.admin-player-modal {
    display: none;

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.6);

    z-index: 9999;

    align-items: center;
    justify-content: center;
}


.admin-player-modal.show-admin-modal {
    display: flex;
}


.admin-player-modal-box {
    background: white;

    width: 90%;
    max-width: 500px;
    max-height: 80vh;

    overflow-y: auto;

    padding: 25px;

    border-radius: 15px;
}


#adminModalPlayers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


#adminModalPlayers button {
    width: 100%;

    padding: 15px;

    font-size: 18px;

    cursor: pointer;
}
/* =========================================
   ページ幅 最終統一
========================================= */

.app {
    width: 100%;
    max-width: 430px;
    min-height: 100vh;
    margin: 0 auto;
}

.ranking-page {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0;
}

.bottom-nav {
    width: 100%;
    max-width: 430px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}
/* =========================
   MISSION PITCH
========================= */

#mission-game {
    margin-top: 30px;
}

.mission-game-description {
    text-align: center;
    margin-bottom: 20px;
}

.mission-pitch {
    width: 100%;
    max-width: 390px;
    min-height: 520px;
    margin: 20px auto 100px;
    padding: 30px 12px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 16px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0.04) 50%,
            rgba(255,255,255,0.08) 50%
        );
}

.mission-line {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 6px;
}

.mission-position {
    width: 66px;
    min-height: 66px;

    border: 2px solid white;
    border-radius: 50%;

    background: rgba(0, 0, 0, 0.35);
    color: white;

    font-size: 13px;
    font-weight: bold;

    cursor: pointer;
}

.mission-position:active {
    transform: scale(0.95);
}
.history-correct-answer {
    position: absolute;

    left: 50%;
    bottom: -32px;
    transform: translateX(-50%);

    width: 100px;

    text-align: center;
    color: #e6002d;

    font-size: 9px;
    line-height: 1.15;

    z-index: 10;
}

.history-correct-answer span {
    display: block;

    font-size: 8px;
    font-weight: 700;
}

.history-correct-answer strong {
    display: block;

    font-size: 10px;
    font-weight: 800;

    white-space: normal;
    overflow-wrap: break-word;
}
/* =========================================
   HISTORY 4-3-3 POSITION
========================================= */

/* MF3人を斜めに配置 */
.history-cm {
    position: relative;
    height: 210px;
}

/* ================================
   MF配置
================================ */

.history-cm {
    position: relative;
    height: 190px;
}

/* AMF：右上 */
.history-cm #history-cam {
    position: absolute;
    top: 0;
    right: 35px;
}

/* CM：左・少し下 */
.history-cm #history-cm {
    position: absolute;
    top: 55px;
    left: 20px;
}

/* CDM：中央・さらに下 */
.history-cm #history-cdm {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
}

/* DFを下げる */
.history-df {
    margin-top: 35px;
}

/* GKをさらに下げる */
.history-gk {
    margin-top: 55px;
}
/* =========================================
   HISTORY ピッチ位置 微調整
========================================= */

/* -------------------------
   FW
   STはそのまま
   LW・RWだけカード半分下げる
------------------------- */

.history-fw {
    position: relative;
}

#history-lw,
#history-rw {
    position: relative;
    top: 60px;
}


/* -------------------------
   MF
   今の形を維持したまま
   全体をカード半分下げる
------------------------- */

.history-cm {
    top: 60px;
}


/* -------------------------
   DF
   MFとの位置関係を維持して
   同じだけ下げる
------------------------- */

.history-df {
    position: relative;
    top: 60px;
}
/* =========================================
   PREDICT 4-3-3 POSITION
   history画面と同じ配置
========================================= */

/* ---------- FW ---------- */

.pitch-fw {
    position: relative;
}

/* LW・RWを下げる */
.pitch-fw [data-position="lw"],
.pitch-fw [data-position="rw"] {
    position: relative;
    top: 60px;
}


/* ---------- MF ---------- */

.pitch-cm {
    position: relative;
    height: 190px;
    top: 60px;
}

/* CAM：右上 */
.pitch-cm [data-position="cam"] {
    position: absolute;
    top: 0;
    right: 35px;
}

/* CM：左・少し下 */
.pitch-cm [data-position="cm"] {
    position: absolute;
    top: 55px;
    left: 20px;
}

/* CDM：中央・さらに下 */
.pitch-cm [data-position="cdm"] {
    position: absolute;
    top: 110px;
    left: 50%;
    transform: translateX(-50%);
}


/* ---------- DF ---------- */

.pitch-df {
    position: relative;
    top: 60px;
}


/* ---------- GK ---------- */

/* DFとの間隔を確保 */
.pitch-df + .pitch-row {
    position: relative;
    top: 100px;
}
.pitch-df + .pitch-row {
    position: relative;
    top: 100px;
}
/* GKだけ上に戻す */
.pitch-df + .pitch-row {
    position: relative;
    top: -5px;
}
/* =========================================
   PREDICT 最終位置調整
========================================= */

/* -----------------------------------------
   LW / RW
   STに向かって斜め前へ上げる
----------------------------------------- */

/* LW：右上へ */
.pitch-fw [data-position="lw"] {
    position: relative;
    top: -50px;
    left: 55px;
}

/* RW：左上へ */
.pitch-fw [data-position="rw"] {
    position: relative;
    top: -50px;
    right: 55px;
}


/* -----------------------------------------
   MF
   CAM・CM・CDMの形を維持したまま
   全体をカード1枚分上へ
----------------------------------------- */

.pitch-cm {
    top: -40px;
}


/* -----------------------------------------
   DF
   MFとの形を維持したまま
   カード1枚分上へ
----------------------------------------- */

.pitch-df {
    top: -40px;
}
/* LWをLBと同じ横位置へ */
.pitch-fw [data-position="lw"] {
    left: 0;
}

/* RWをRBと同じ横位置へ */
.pitch-fw [data-position="rw"] {
    right: 0;
}
/* LWをLBと同じ縦ラインへ */
.pitch-fw [data-position="lw"] {
    position: relative;
    left: -65px;
}

/* RWをRBと同じ縦ラインへ */
.pitch-fw [data-position="rw"] {
    position: relative;
    right: -65px;
}
/* LW：ピッチ内ギリギリまで左へ */
.pitch-fw [data-position="lw"] {
    position: relative;
    left: -40px;
}

/* RW：ピッチ内ギリギリまで右へ */
.pitch-fw [data-position="rw"] {
    position: relative;
    right: -40px;
}
/* MISSION カード選択画面 */

.mission-card-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.mission-card-modal-content {
    background: #151515;
    color: white;
    padding: 20px;
    border-radius: 15px;
    width: 90%;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
}

#mission-card-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.mission-card-option {
    background: #222;
    border: 1px solid #555;
    border-radius: 10px;
    padding: 5px;
    color: white;
    min-width: 0;
    cursor: pointer;
}

.mission-card-option img {
    width: 100%;
    display: block;
}

.mission-card-option span {
    font-size: 11px;
    overflow-wrap: anywhere;
}

.mission-selected-card {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* MISSION：選択したカードを大きく表示 */
.mission-position:has(.mission-selected-card) {
    background: transparent;
    border: none;
    overflow: visible;
}


.mission-position .mission-selected-card {
    width: 85px;
    height: auto;
    max-width: none;
    display: block;
    object-fit: contain;

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.mission-position {
    position: relative;
}
/* =====================================
   MISSION カードの縦間隔を調整
===================================== */

.mission-pitch {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 650px;
    padding-top: 20px;
    padding-bottom: 20px;
    box-sizing: border-box;
}
/* =====================================
   MISSION サッカーピッチ
===================================== */

.mission-pitch {
    position: relative;

    /* 芝生の縞模様 */
    background: repeating-linear-gradient(
        to bottom,
        #218b46 0px,
        #218b46 65px,
        #18783b 65px,
        #18783b 130px
    );

    border: 3px solid white;
    border-radius: 18px;

    /* GKの下に余白を追加 */
    padding-bottom: 55px;
}
/* =====================================
   ピッチの白いライン
===================================== */

.mission-pitch::before {
    content: "";
    position: absolute;

    top: 12px;
    bottom: 12px;
    left: 12px;
    right: 12px;

    border: 2px solid rgba(255, 255, 255, 0.65);

    border-radius: 3px;

    pointer-events: none;
}

/* センターライン */
.mission-pitch::after {
    content: "";
    position: absolute;

    top: 50%;
    left: 12px;
    right: 12px;

    border-top: 2px solid rgba(255, 255, 255, 0.65);

    pointer-events: none;
}
#mission-remove-button {
    display: block;
    width: 100%;
    margin-top: 20px;
    padding: 14px;
    background: #b91c1c;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

#mission-remove-button:hover {
    background: #991b1b;
}

/* MISSION カード下のポイント */

.mission-position {
    position: relative;
}

.mission-card-points {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;

    white-space: nowrap;
    font-size: 13px;
    font-weight: 900;
    pointer-events: none;
    z-index: 5;
}

.mission-card-points.correct {
    color: #ffe066;
    text-shadow: 0 1px 3px #000;
}

.mission-card-points.incorrect {
    color: #ff8b8b;
    text-shadow: 0 1px 3px #000;
}

/* 合計獲得ポイント */

.mission-total-points {
    font-size: 22px;
    font-weight: 900;
    color: #d4a017;
    margin-top: 15px;
}

/* MISSION 答え合わせ表示 */

.mission-position {
    position: relative;
    overflow: visible;
}

/* 正解：白背景・緑文字 */

.mission-card-points {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);

    display: inline-block;
    padding: 5px 12px;

    background: white;
    color: #16803b;

    border-radius: 20px;
    font-size: 14px;
    font-weight: 900;
    white-space: nowrap;

    z-index: 10;
    pointer-events: none;
}

/* 不正解：カードの上に赤い× */


.mission-wrong-mark {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);

    color: #ff3030;
    font-size: 48px;
    font-weight: 900;
    line-height: 1;

    text-shadow: 0 2px 4px #000;
    z-index: 20;
    pointer-events: none;
}


/* 不正解：カードの下に正解選手名 */

.mission-correct-name {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%);

    color: #ff5555;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;

    text-shadow: 0 1px 3px #000;
    z-index: 10;
    pointer-events: none;
}

.mission-correct-mark {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #00e676;
    font-size: 28px;
    font-weight: bold;
    z-index: 10;
}





.mission-correct-answer {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);

    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 4px 3px;

    color: #ffffff;
    background: rgba(198, 40, 40, 0.95);
    border-radius: 5px;

    font-size: 10px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;

    white-space: normal;
    overflow-wrap: anywhere;

    z-index: 21;
    pointer-events: none;
}

/* ===== MISSION 両チームの得点表示 ===== */

#mission-goals-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.mission-team-goals {
    min-width: 0;
    padding: 12px 8px;
    background: #123c70;
    color: #ffffff;
    border-radius: 10px;
}

.mission-team-goals h4 {
    margin: 0 0 12px;
    font-size: 14px;
    text-align: center;
    overflow-wrap: anywhere;
}

.mission-team-goals p {
    margin: 6px 0;
    font-size: 12px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* =====================================
   DAILY MISSIONS 選択画面
===================================== */

.mission-selection-panel {
    background: linear-gradient(145deg, #101b38, #071126);
    border: 1px solid #30436b;
    border-radius: 20px;
    padding: 24px 16px;
    margin-bottom: 28px;
    color: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.mission-selection-heading {
    text-align: center;
    margin-bottom: 24px;
}

.mission-selection-label {
    color: #e8bb63;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    margin-bottom: 8px;
}

.mission-selection-heading h2 {
    color: #fff;
    font-size: 27px;
    font-weight: 900;
    letter-spacing: 1.5px;
    margin: 0 0 8px;
}

.mission-selection-heading > p:last-child {
    color: #b8c5df;
    font-size: 12px;
    margin: 0;
}

/* 3枚のMISSIONカード */

.mission-selector {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.mission-selector .mission-select-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 18px;
    text-align: left;
    color: #fff;
    background: linear-gradient(110deg, #192d57, #142344);
    border: 1px solid #3a507a;
    border-left: 4px solid #a51b45;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s, background 0.2s;
    font-family: inherit;
}

.mission-selector .mission-select-card:hover {
    transform: translateY(-2px);
    border-color: #e8bb63;
}

.mission-selector .mission-select-card:focus-visible {
    outline: 3px solid #e8bb63;
    outline-offset: 3px;
}

.mission-select-top,
.mission-select-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mission-select-number {
    color: #e8bb63;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.mission-select-status {
    color: #fff;
    background: #a51b45;
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.mission-select-match {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.mission-select-season {
    color: #b8c5df;
    font-size: 12px;
    font-weight: 700;
}

.mission-select-points {
    color: #e8bb63;
    font-size: 13px;
    font-weight: 900;
}

/* 選択中のMISSION */

.mission-selector .mission-select-card.is-active {
    border-color: #e8bb63;
    border-left-color: #e8bb63;
    background: linear-gradient(110deg, #233e74, #192b51);
    box-shadow: 0 0 0 1px rgba(232, 187, 99, 0.35);
}

/* クリア済みのMISSION */

.mission-selector .mission-select-card.is-cleared .mission-select-status {
    background: #1b755f;
}

.mission-selector .mission-select-card.is-cleared {
    border-left-color: #1b755f;
}

/* スマホ向け */

@media (max-width: 480px) {
    .mission-selection-panel {
        padding: 20px 12px;
    }

    .mission-selection-heading h2 {
        font-size: 23px;
    }

    .mission-selector .mission-select-card {
        padding: 15px;
    }

    .mission-select-match {
        font-size: 15px;
    }
}
/* MISSIONヘッダーとDAILY MISSIONSの間の余白 */
.mission-selection-panel {
    margin-top: 12px;
}

/* =====================================
   MATCH CENTER デザイン
===================================== */

/* 試合詳細エリア */
.mission-card.match-center {
    background: linear-gradient(145deg, #101b38, #071126);
    color: #ffffff;
    border: 1px solid #30436b;
    border-radius: 20px;
    padding: 20px 16px;
}

/* MATCH CENTER上部 */
.match-center-header {
    margin-top: 24px;
    margin-bottom: 24px;
}

.match-center-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.match-center-heading .mission-number {
    margin: 0;
    color: #e8bb63;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1px;
}

.match-center-label {
    color: #aebfdf;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

/* シーズン・節数 */
.match-center-meta {
    text-align: center;
    margin-bottom: 18px;
}

.match-center-meta h2 {
    color: #ffffff;
    font-size: 20px;
    margin: 0 0 5px;
}

.match-center-meta p {
    color: #b8c5df;
    font-size: 12px;
    margin: 0;
}

/* 白いスコアボード */
.mission-card.match-center .match-center-scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 24px 12px;
    background: #ffffff;
    color: #14274a;
    border: 1px solid #e1e6ef;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* チーム名 */
.match-center-team {
    min-width: 0;
    text-align: center;
}

.match-center-team span {
    display: block;
    color: #14274a;
    font-size: 13px;
    font-weight: 800;
    overflow-wrap: anywhere;
}

/* スコア */
.match-center-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.match-center-score strong {
    color: #14274a;
    font-size: 30px;
    font-weight: 900;
    white-space: nowrap;
    line-height: 1.2;
}

.match-center-score > span {
    color: #a50044;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

/* スマホ向け */
@media (max-width: 480px) {
    .mission-card.match-center {
        padding: 18px 12px;
    }

    .mission-card.match-center .match-center-scoreboard {
        padding: 20px 8px;
        gap: 6px;
    }

    .match-center-team span {
        font-size: 11px;
    }

    .match-center-score strong {
        font-size: 25px;
    }
}

/* =====================================
   MATCH CENTER：試合イベント
===================================== */

/* GOALS・SUBSTITUTIONSをカード化 */
.mission-card.match-center .mission-goals,
.mission-card.match-center .mission-substitutions {
    background: #102448;
    border: 1px solid #304b78;
    border-radius: 16px;
    padding: 18px 14px;
    margin: 16px 0;
}

/* 見出し */
.mission-card.match-center .mission-goals h3,
.mission-card.match-center .mission-substitutions h3 {
    color: #e8bb63;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1px;
    margin: 0 0 16px;
}

/* GOALS：チーム別カード */
.mission-card.match-center .mission-team-goals {
    background: #1b3764;
    border: 1px solid #385785;
    border-radius: 12px;
    padding: 14px 10px;
}

.mission-card.match-center .mission-team-goals h4 {
    color: #b8c9e9;
    font-size: 12px;
    letter-spacing: 0.5px;
}

.mission-card.match-center .mission-team-goals p {
    color: #ffffff;
    font-size: 13px;
    line-height: 1.7;
}

/* SUBSTITUTIONS：交代選手を行ごとに表示 */
.mission-card.match-center #mission-substitutions-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mission-card.match-center #mission-substitutions-list p {
    background: #1b3764;
    border-radius: 9px;
    color: #ffffff;
    font-size: 14px;
    padding: 11px 14px;
    margin: 0;
    line-height: 1.5;
}

/* スタメン予想への案内 */
.mission-card.match-center .mission-question {
    background: linear-gradient(135deg, #172f58, #101e3e);
    border: 1px solid #385785;
    border-radius: 16px;
    color: #ffffff;
    font-size: 19px;
    font-weight: 800;
    text-align: center;
    line-height: 1.7;
    padding: 24px 12px;
    margin: 18px 0 12px;
}

/* MISSION START・CLEAREDボタン */
.mission-card.match-center #mission-start-button {
    display: block;
    width: 100%;
    padding: 17px 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(100deg, #a50044, #174a8b);
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
}

/* クリア済み */
.mission-card.match-center #mission-start-button:disabled {
    background: #176b58;
    color: #ffffff;
    opacity: 1;
    cursor: default;
}

/* 獲得ポイント */
.mission-card.match-center #mission-earned-points {
    color: #e8bb63;
    font-size: 18px;
    font-weight: 900;
}

/* スマホ表示 */
@media (max-width: 480px) {
    .mission-card.match-center .mission-goals,
    .mission-card.match-center .mission-substitutions {
        padding: 14px 10px;
    }

    .mission-card.match-center .mission-question {
        font-size: 17px;
    }
}
/* ========================================
   MISSION - FINAL MATCH CENTER DESIGN
======================================== */

/* MISSION全体 */
.mission-page {
    background: #06152f;
    color: #ffffff;
}

.mission-page .mission-card.match-center {
    background: linear-gradient(
        145deg,
        #061a3b 0%,
        #04112a 100%
    );
    border: 1px solid #244a80;
    border-radius: 22px;
    padding: 22px;
    color: #ffffff;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

/* MISSION選択エリア */
.mission-page .mission-selection-panel {
    margin-bottom: 28px;
}

.mission-page .mission-selection-heading h2 {
    color: #ffd45b;
    letter-spacing: 2px;
}

.mission-page .mission-selector .mission-select-card {
    background: linear-gradient(
        135deg,
        #0c2d60,
        #061b3d
    );
    border: 1px solid #315d99;
    border-radius: 15px;
    color: white;
    padding: 18px;
    text-align: left;
    transition: transform 0.2s, border-color 0.2s;
}

.mission-page .mission-selector .mission-select-card:hover {
    transform: translateY(-2px);
    border-color: #ffd45b;
}

.mission-page .mission-select-number,
.mission-page .mission-select-points {
    color: #ffd45b;
    font-weight: 800;
}

.mission-page .mission-select-match {
    color: #ffffff;
    font-weight: 700;
}

/* MATCH CENTERヘッダー */
.mission-page .match-center-header {
    background: transparent;
    margin-bottom: 18px;
}

.mission-page .match-center-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mission-page .match-center-heading .mission-number {
    color: #ffd45b;
    font-weight: 900;
    letter-spacing: 2px;
}

.mission-page .match-center-meta {
    color: #d5e2f8;
}

/* 白いスコアボード */
.mission-page .mission-match.match-center-scoreboard {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;

    background: linear-gradient(
        145deg,
        #ffffff,
        #e8eff9
    );

    border-radius: 18px;
    padding: 30px 18px;
    margin-top: 18px;
    position: relative;
    overflow: hidden;
    min-height: 150px;
}

/* 左上のバルサカラー装飾 */
.mission-page .match-center-scoreboard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 12px;
    background: linear-gradient(
        90deg,
        #d80042 0%,
        #d80042 50%,
        #0756a8 50%,
        #0756a8 100%
    );
    transform: rotate(-45deg) translate(-20px, -28px);
}

/* チーム名 */
.mission-page .match-center-team {
    min-width: 0;
    text-align: center;
}

.mission-page .match-center-team span {
    color: #09254f;
    font-weight: 800;
    font-size: clamp(12px, 2.5vw, 18px);
    overflow-wrap: anywhere;
}

/* スコア */
.mission-page .match-center-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border-left: 1px solid #cbd6e5;
    border-right: 1px solid #cbd6e5;
}

.mission-page .match-center-score strong {
    color: #09254f;
    font-size: clamp(32px, 6vw, 56px);
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.mission-page .match-center-score > span {
    color: #c80042;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* GOALS・SUBSTITUTIONS */
.mission-page .mission-goals,
.mission-page .mission-substitutions {
    background: linear-gradient(
        135deg,
        #071c3e,
        #082755
    );
    border: 1px solid #27538c;
    border-radius: 18px;
    padding: 18px;
    margin-top: 16px;
    color: #ffffff;
}

.mission-page .mission-goals h3,
.mission-page .mission-substitutions h3 {
    color: #ffd45b;
    font-weight: 900;
    letter-spacing: 1px;
    margin-bottom: 14px;
}

/* スタメン予想エリア */
.mission-page .mission-question {
    position: relative;
    margin-top: 20px;
    margin-bottom: 0;
    padding: 38px 18px 22px;

    background: linear-gradient(
        135deg,
        #09254f,
        #04132d
    );

    border: 1px solid #315d99;
    border-bottom: none;
    border-radius: 18px 18px 0 0;

    text-align: center;
    color: #ffffff;
    font-size: clamp(18px, 4vw, 24px);
    font-weight: 900;
    line-height: 1.7;
    overflow: hidden;
}

/* 左上の赤青アクセント */
.mission-page .mission-question::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px;
    background: linear-gradient(
        135deg,
        #c90043 0%,
        #c90043 35%,
        #113c8d 35%,
        #113c8d 65%,
        transparent 65%
    );
    opacity: 0.85;
}

/* START / CLEAREDボタン */
.mission-page #mission-start-button {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    border-radius: 0 0 18px 18px;
    padding: 17px;
    font-weight: 900;
    letter-spacing: 1px;
}

/* 画面が狭い場合 */
@media (max-width: 600px) {

    .mission-page .mission-card.match-center {
        padding: 12px;
        border-radius: 16px;
    }

    .mission-page .mission-match.match-center-scoreboard {
        gap: 5px;
        padding: 24px 8px;
        min-height: 125px;
    }

    .mission-page .match-center-score {
        padding: 0 7px;
    }

    .mission-page .match-center-score strong {
        font-size: clamp(26px, 8vw, 40px);
    }

    .mission-page .match-center-team span {
        font-size: 12px;
    }

    .mission-page .mission-goals,
    .mission-page .mission-substitutions {
        padding: 12px;
    }
}
/* ========================================
   MISSION DESIGN - FINAL DETAILS
======================================== */

/* GOALS：チーム別の得点情報 */
.mission-page #mission-goals-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mission-page .mission-team-goals {
    min-width: 0;
    background: linear-gradient(135deg, #123569, #0b2856);
    border: 1px solid #315d99;
    border-radius: 14px;
    padding: 16px;
}

.mission-page .mission-team-goals h4 {
    color: #b9cbea;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 14px;
}

.mission-page .mission-team-goals p {
    color: #ffffff;
    margin: 8px 0;
}

/* 得点時間・選手名 */
.mission-page .mission-goal-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    line-height: 1.5;
}

.mission-page .mission-goal-minute {
    color: #ffd45b;
    font-weight: 900;
    font-size: 17px;
    white-space: nowrap;
}

.mission-page .mission-goal-player {
    color: #ffffff;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* SUBSTITUTIONS：交代選手 */
.mission-page #mission-substitutions-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mission-page #mission-substitutions-list .mission-sub-row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 26px;
    align-items: center;
    gap: 10px;

    margin: 0;
    padding: 11px 16px;
    background: #123569;
    border-radius: 10px;
    color: #ffffff;
}

.mission-page .mission-sub-minute {
    color: #ffd45b;
    font-weight: 900;
    font-size: 17px;
}

.mission-page .mission-sub-player {
    color: #ffffff;
    font-weight: 600;
}

.mission-page .mission-sub-arrow {
    color: #2cde83;
    font-size: 25px;
    font-weight: 900;
    text-align: right;
}

/* STARTING XI：チャレンジパネル */
.mission-page .mission-question {
    padding-top: 65px;
    padding-bottom: 28px;
    background: linear-gradient(
        135deg,
        #09254f,
        #06132c
    );
}

/* 上部に英語の見出しを追加 */
.mission-page .mission-question::after {
    content: "STARTING XI CHALLENGE";
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);

    width: max-content;
    max-width: 85%;
    color: #ffd45b;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
}

/* ボタン周辺のデザイン */
.mission-page #mission-start-button {
    background: linear-gradient(135deg, #008e69, #087d64);
    color: #ffffff;
    border: 1px solid #2bd09a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* MISSION START時は青色 */
.mission-page #mission-start-button:not(:disabled) {
    background: linear-gradient(135deg, #0757ad, #123a87);
    border-color: #4289e1;
}

/* CLEARED表示は緑色 */
.mission-page #mission-start-button:disabled {
    background: linear-gradient(135deg, #008e69, #087d64);
    border-color: #2bd09a;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .mission-page .mission-team-goals {
        padding: 12px;
    }

    .mission-page .mission-goal-row {
        gap: 7px;
        flex-wrap: wrap;
    }

    .mission-page #mission-substitutions-list .mission-sub-row {
        grid-template-columns: 45px minmax(0, 1fr) 20px;
        padding: 10px;
        gap: 6px;
    }

    .mission-page .mission-question::after {
        font-size: 10px;
        letter-spacing: 1px;
    }
}
/* ========================================
   STARTING XI 文字重なり修正
======================================== */

.mission-page .mission-question {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 80px 16px 30px;
    min-height: 190px;

    line-height: 1.7;
    text-align: center;
}

.mission-page .mission-question::after {
    top: 25px;
    left: 50%;
    transform: translateX(-50%);

    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
}

/* スマホ画面 */
@media (max-width: 600px) {
    .mission-page .mission-question {
        padding: 85px 12px 28px;
        min-height: 190px;
        font-size: 19px;
    }

    .mission-page .mission-question::after {
        top: 30px;
        font-size: 10px;
        letter-spacing: 1px;
    }
}
/* =========================================
   6タブ下部ナビゲーション（ガチャ追加）
   既存のCSSより後に置いて上書き
========================================= */
.bottom-nav {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 430px;
    height: 75px;
    padding: 0 2px;
}
.bottom-nav .nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #777;
    text-decoration: none;
    white-space: nowrap;
}
.bottom-nav .nav-item span {
    font-size: 21px;
    line-height: 1.3;
}
.bottom-nav .nav-item p {
    font-size: 10px;
    margin-top: 3px;
    letter-spacing: -0.3px;
}
.bottom-nav .nav-item.active {
    color: #a50044;
    font-weight: bold;
}
@media (max-width: 360px) {
    .bottom-nav .nav-item span { font-size: 19px; }
    .bottom-nav .nav-item p { font-size: 9px; }
}

/* MY SQUAD / bulk selection */
.my-squad-area{margin:18px;background:#fff;padding:18px;border-radius:18px;box-shadow:0 3px 12px #0001}
.my-squad-area h2{font-size:21px;margin-bottom:8px}
#squadFormation{width:100%;padding:12px;border-radius:10px;margin:8px 0 14px}
.squad-pitch{background:repeating-linear-gradient(to bottom,#23894b 0px,#23894b 55px,#177b41 55px,#177b41 110px);border:3px solid #e2f3e8;border-radius:15px;padding:22px 6px;position:relative}
.squad-pitch:before{content:"";position:absolute;inset:12px;border:2px solid #ffffff7a;border-radius:5px;pointer-events:none}
.squad-pitch:after{content:"";position:absolute;left:12px;right:12px;top:50%;border-top:2px solid #ffffff7a;pointer-events:none}
.squad-row{display:flex;justify-content:space-around;gap:4px;position:relative;z-index:1;margin:16px 0}
.squad-slot{width:23%;max-width:77px;min-height:88px;border:1px solid #fff8;background:#ffffffd9;border-radius:9px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;color:#15321e;font-size:10px;overflow:hidden}
.squad-slot img{width:100%;height:57px;object-fit:contain}
.squad-slot strong{font-size:9px;overflow-wrap:anywhere;line-height:1.1}
.squad-slot small{font-size:10px;font-weight:bold}
#squadProgress{text-align:center;margin:12px 0;font-weight:bold}
#saveSquadButton{width:100%;padding:14px;border:0;border-radius:10px;background:#a50044;color:white;font-weight:bold}
#saveSquadButton:disabled{background:#aaa}
#squadMessage{text-align:center;margin:8px}
.squad-picker{position:fixed;inset:0;background:#000b;z-index:2500;display:flex;align-items:center;justify-content:center;padding:12px}
.squad-picker[hidden],#bulkSellToolbar[hidden]{display:none!important}
.squad-picker-panel{background:white;width:100%;max-width:430px;max-height:82vh;overflow:auto;border-radius:16px;padding:16px}
#closeSquadPicker{padding:9px 14px;margin-bottom:10px}
.squad-picker-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.squad-picker-card{border:2px solid #ddd;border-radius:10px;background:white;padding:4px;min-width:0}
.squad-picker-card img{width:100%;height:100px;object-fit:contain}
.squad-picker-card span{display:block;font-size:10px;overflow-wrap:anywhere}
.squad-picker-card:disabled{opacity:.35}
#bulkSelectToggle,#bulkSellButton{border:0;border-radius:9px;padding:9px 12px;background:#004d98;color:white;font-weight:bold}
#bulkSellToolbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 0}
#bulkSellButton{background:#a50044}
.real-collection-card{position:relative}
.card-in-use-star{position:absolute;right:3px;top:3px;z-index:4;color:#ffcb19;text-shadow:0 1px 3px #000;font-size:21px}
.real-collection-card.bulk-selected{outline:4px solid #a50044;outline-offset:-4px}
.card-bulk-check{position:absolute;left:4px;top:4px;background:#fff;border-radius:50%;font-size:20px;z-index:4}
/* CARD COLLECTION 一括売却ボタン修正 */

.collection-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

#bulkSelectToggle {
    width: auto;
    min-width: 90px;
    padding: 10px 16px;
    font-size: 14px;
    flex: 0 0 auto;
}

#bulkSellToolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 15px 0;
}

#bulkSellToolbar[hidden] {
    display: none;
}

#bulkSelectionCount {
    font-size: 14px;
    white-space: nowrap;
}

#bulkSellButton {
    width: auto;
    max-width: 100%;
    padding: 12px 18px;
    font-size: 14px;
    flex: 0 1 auto;
}
/* =====================================
   MY SQUAD カード画像のみ表示
===================================== */

/* 配置済みカードの白い枠を削除 */
.squad-slot:has(img) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

/* カード画像を白い枠の大きさまで拡大 */
.squad-slot img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block;
}

/* ポジション名・選手名を非表示 */
.squad-slot:has(img) small,
.squad-slot:has(img) strong {
    display: none !important;
}

/* カード選択ボタンのサイズは維持 */
.squad-slot {
    flex-shrink: 0;
}