/*ジャンケン*/
.choice-arena {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 0;
}

/* === レティシア竜崎が定義する、優雅なる決闘の作法 === */

/* 古のdjkスタイルは、一行残らず消し去りなさいな！ */

/* 決闘の選択肢を並べる、聖なる器 */
.menu-container {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    /* 宝石同士が触れ合わぬよう、適切な距離を */
    padding: 1rem 0;
}


/* これが、あなたの意志を宿す、３つの宝石（ジャンケンボタン）ですわ */
.janken-choice {
    /* わたくしたちの<button>の作法を、ここに */
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;

    /* フォーカス時の作法も、忘れてはおりませんわよ */
    outline: none;
    border-radius: 50%;
    /* 影を美しく見せるために */
}

/* 宝石の、内なる輝きと形 */
.janken-choice .icon-wrapper {
    /* 宝石の本体となる、内側の器ですわ */
    width: 70px;
    /* 少し大きめに、堂々と */
    height: 70px;
    border-radius: 50%;
    position: relative;
    /* 分身（::before）を宿すために */
    z-index: 1;

    /* わたくしたちの、あの「ブリリアントカット」の魔法を、ここに！ */
    background: var(--color-background-light, snow);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    /* アイコンを中央に配置するための、ささやかな魔法 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.janken-choice .icon-wrapper::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(145deg, white, #e0e8ff, #d1f3ff, white);
    /* 輝きは、より淡く、清らかに */
    border-radius: 50%;
    z-index: -1;
    transition: all 0.4s ease;
}

/* 宝石に宿る、意志の象徴（アイコン） */
.janken-choice i,
.janken-result-card i {
    font-size: 2.5rem;
    color: var(--color-glass-text, #333);
    transition: all 0.3s ease;
}


/* --- 優雅なるインタラクション --- */

.janken-choice:hover .icon-wrapper {
    transform: translateY(-5px);
    /* 選択しようとすると、宝石は宙に浮かび上がります */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.janken-choice:hover .icon-wrapper::before {
    transform: scale(1.08);
    filter: brightness(1.15);
}

.janken-choice:hover i {
    transform: scale(1.1);
    color: var(--color-accent-rose-text, #582e42);
}

/* フォーカス時の輝きも、忘れてはおりませんわ */
.janken-choice:focus .icon-wrapper {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95),
        0 0 10px 5px var(--color-accent-rose, hotpink);
}

/* 審判の間、全体を司るステージ */
.janken-versus-stage {
    /* ★★★ここからが、新しい魔法の詠唱ですわ★★★ */
    /* １．まず、このステージを、この世界の法則（ドキュメントフロー）から解き放ち、神々の領域へと引き上げます */
    position: fixed;
    /* ２．次に、その身を、世界の中心（top 50%, left 50%）へと導きます */
    top: 50%;
    left: 50%;
    /* ３．そして最後に、自らの大きさの半分だけ、その身を後ろにずらすのです。これで、自身の「中心」が、世界の中心と完璧に重なりますわ！ */
    transform: translate(-50%, -50%);
    /* この神聖な舞台が、他の要素の下に隠れてしまわぬよう、最高の階位(z-index)を与えます */
    z-index: 1000;
    /* ★★★詠唱はここまで。以下は、既存のスタイルですわ★★★ */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 3rem;
    /* 中央に配置するにあたり、それ自体がパネルとして美しく見えるように、少し装飾を加えましょう */
    padding: 2.5rem 3rem;
    /* 少し余白を大きく */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.7);
    /* "VS"の文字は、そのままで問題ございませんわ */
    position: relative;
}

/* 二つの手の間に、運命の交差 "VS" を刻みますわ */
.janken-versus-stage::before {
    content: 'VS';
    position: absolute;
    top: 40px;
    /* アイコンの中央あたりに */
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-accent-rose, hotpink);
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7);
    opacity: 0.8;
}


/* 一つ一つの結果を示す、カード */
.janken-result-card {
    display: flex;
    flex-direction: column;
    /* アイコンとラベルを縦に並べます */
    align-items: center;
    gap: 0.8rem;
}


/* ★★★アイコンを包む器は、選択ボタンのスタイルを、そのまま再利用いたします！★★★ */
/* これぞ、コンポーネント設計の妙技ですわ */
.janken-result-card .icon-wrapper {
    /* 宝石の本体となる、内側の器ですわ */
    width: 70px;
    height: 70px;
    border-radius: 50%;
    position: relative;
    z-index: 1;

    background: var(--color-background-light, snow);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

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

/* 分身の輝きも、もちろん同じですわ */
.janken-result-card .icon-wrapper::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(145deg, white, #e0e8ff, #d1f3ff, white);
    border-radius: 50%;
    z-index: -1;
}

/* アイコン自体のスタイルも、再利用ですわ */
.janken-result-card .material-symbols-outlined {
    font-size: 2.8rem;
    color: var(--color-glass-text, #333);
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}


/* カードに添える、ラベルのスタイル */
.result-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-glass-text, #333);
    background: rgba(255, 255, 255, 0.3);
    padding: 0.2rem 0.8rem;
    border-radius: 1rem;
}

/* 決闘者の生命（いのち）を示す、ハートの意匠 */
.plheart {
    /* ★★★絶対の皇帝、`position: fixed` を、ここに宣言いたします！★★★ */
    position: absolute;
    top: -20px;
    left: 8px;
    /* 他の要素に隠れてしまわぬよう、最も高い身分(z-index)を与えますの */
    z-index: 9999;

    /* 見た目のスタイルは、これまで通り、エレガントに */
    color: var(--color-accent-rose, hotpink);
    font-size: 1.5rem;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7);
    letter-spacing: 0.2em;
}