@charset "UTF-8";

/* --- 1. ゲームの外枠 --- */
#sumo-frame {
    position: fixed !important; 
    inset: 0 !important; 
    z-index: 100000 !important;
    pointer-events: none;
    border: 16px solid #0d0d0d !important;
}
#sumo-frame::after {
    content: ""; position: absolute; inset: 4px;
    border: 4px solid #0d0d0d;
}

/* --- 2. 画面配置 --- */
#select-scaling-wrapper {
    position: absolute !important; 
    top: 50% !important; 
    left: 50% !important;
    width: 1260px; 
    height: 900px;
    transform: translate(-50%, -50%);
    transform-origin: center center;
}

/* --- 3. 左右パネル（レイアウト崩れ防止） --- */
.team-panel {
    position: absolute !important;
    top: 185px !important;
    width: 280px !important;
    height: 700px !important; /* 固定高 */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.p1-team-panel { left: 30px !important; }
.p2-team-panel { right: 30px !important; }

/* コスト表示エリア（中央揃え・フォント設定） */
.team-cost-area {
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.team-cost-header {
  width: 100%;
    font-family: "tamanegi", serif !important; /* tamanegiに統一 */
    font-weight: 800 !important;
    text-align: center !important;
    margin-bottom: 0px;
    font-size: 1.6rem;
    line-height: 1.2;
}
/* プレイヤーごとの色（ヘッダー部分） */
.p1-team-panel .team-cost-header { color: #3b82f6; } /* P1は青系 */
.p2-team-panel .team-cost-header { color: #ef4444; } /* P2は赤系 */

/* ★コストバーのカラーをプレイヤーカラーに変更 */
.cost-val {
    font-size: 3rem;
    font-weight: 900;
    font-family: "tamanegi", serif !important;
    color: #ffffff;
    -webkit-text-stroke: 4px black;
    paint-order: stroke;
}

/* コスト数値 */
.cost-val {
    font-size: 3rem;
    font-weight: 900;
    font-family: "tamanegi", serif !important;
    color: #ffffff;
    -webkit-text-stroke: 4px black;
    paint-order: stroke;
}

/* --- 4. 力士カード（スロット）：サイズと間隔の縮小 --- */
.slot-wrapper { 
    position: relative; 
    margin-bottom: 5px; /* 間隔を狭める */
    width: 240px; /* 260から縮小 */
    height: 190px; /* 220から縮小 */
}

.team-slot {
    width: 100%; height: 100%;
    position: relative; overflow: hidden;
    border: 8px solid #0d0d0d !important;
    background: #222 !important; /* 深いグレー */
    z-index: 1;
}
.team-slot::after {
    content: ""; position: absolute; inset: 2px;
    border: 2px solid #0d0d0d;
    pointer-events: none; z-index: 100;
}

/* 枠の上に乗るコストバッジにも黒枠を追加 */
.slot-wrapper .cost-badge-on-frame {
    position: absolute; bottom: 15px; right: 15px;
    width: 45px; height: 45px;
    border-radius: 50%; border: 3px solid #000;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-family: 'M PLUS Rounded 1c', sans-serif; font-weight: 800;
    z-index: 200;
    /* 視認性のための縁取り */
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

.team-slot .char-background {
    position: absolute; inset: 0; transform: none !important;
    background-size: cover; background-position: center;
    opacity: 0.4; z-index: 1;
}

.team-slot .preview-char-img {
    position: absolute !important; 
    width: 300px !important; 
    height: 300px !important;
    left: 50% !important; 
    margin-left: -150px !important;
    top: auto !important; 
    transform-origin: bottom center !important;
    pointer-events: none; 
    z-index: 5;
}

#start-btn-container { 
    position: absolute; 
    width: 100%; 
    bottom: 60px; 
    text-align: center; 
    pointer-events: auto; 
}

/* --- タイプ別 登場アニメーション設定 --- */
@keyframes dockBalance { 0% { transform: translateY(-50px) scale(0.9); opacity: 0; } 20% { transform: translateY(0) scale(1); opacity: 1; } 35% { transform: rotate(-15deg) translateY(-15px); } 50% { transform: rotate(0) translateY(5px) scale(1.05, 0.95); } 65% { transform: rotate(15deg) translateY(-15px); } 80% { transform: rotate(0) translateY(5px) scale(1.05, 0.95); } 100% { transform: rotate(0) translateY(0) scale(1); } }
@keyframes dockTech { 0% { transform: scale(0) rotate(-360deg); opacity: 0; } 60% { transform: scale(1.2) rotate(20deg) translateY(-10px); opacity: 1; } 80% { transform: scale(0.9) rotate(-10deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes dockPower { 0% { transform: translateY(-300px) scale(1.5); opacity: 0; } 60% { transform: translateY(0) scale(1.4, 0.6); opacity: 1; } 75% { transform: translateY(-30px) scale(0.9, 1.1); } 85% { transform: translateY(5px) scale(1.05, 0.95); } 100% { transform: translateY(0) scale(1); } }
@keyframes dockSpeed { 0% { transform: translateX(-300px) skewX(-45deg); opacity: 0; } 60% { transform: translateX(30px) skewX(20deg); opacity: 1; } 80% { transform: translateX(-10px) skewX(-10deg); } 100% { transform: translateX(0) skewX(0); } }
@keyframes idleBreath { 0% { transform: scale(1); } 50% { transform: scale(1.02, 0.98) translateY(2px); } 100% { transform: scale(1); } }

/* アニメーションクラスの紐付け */
.dock-balance { animation: dockBalance 1.5s ease-in-out; }
.dock-tech { animation: dockTech 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }
.dock-power { animation: dockPower 0.6s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards; }
.dock-speed { animation: dockSpeed 0.4s ease-out; }

/* 待機呼吸モーション（タイプ別ディレイ調整済み） */
.preview-char-img.is-selected .rikishi-body { 
    animation: idleBreath 2.0s infinite ease-in-out; 
}
/* 登場アニメが終わってから呼吸を開始するようにディレイを調整 */
.preview-char-img.is-selected .anim-wrapper.dock-balance .rikishi-body { animation-delay: 1.5s; }
.preview-char-img.is-selected .anim-wrapper.dock-tech .rikishi-body    { animation-delay: 0.6s; }
.preview-char-img.is-selected .anim-wrapper.dock-power .rikishi-body   { animation-delay: 0.6s; }
.preview-char-img.is-selected .anim-wrapper.dock-speed .rikishi-body   { animation-delay: 0.4s; }

/* 未選択時の位置 */
.preview-char-img:not(.is-selected) .rikishi-body {
    transform: translateY(0px);
}

/* コストヘッダー全体の設定 */
.team-cost-header {
    width: 100%;
    /* タイトル画面の補足と同じフォントを強制 */
    font-family: "Shippori Mincho", serif !important;
    font-weight: 800 !important;
    text-align: center !important;
    margin-bottom: 0px;
    font-size: 1.4rem;
    line-height: 1.2;
}

/* プレイヤーごとの色（ヘッダー部分） */
.p1-team-panel .team-cost-header { color: #3b82f6; } /* P1は青系 */
.p2-team-panel .team-cost-header { color: #ef4444; } /* P2は赤系 */


/* ゲージの幅を固定 */
.team-cost-bar-bg {
    width: 200px;
    height: 12px;
    background: #111;
    border-radius: 6px;
    border: 2px solid #000;
    overflow: hidden;
    margin: 5px auto;
}

/* 力士カードの入れ物：位置を固定 */
.team-slots-container {
    display: flex;
    flex-direction: column;
    margin-top: 10px; /* ★50pxから10pxに縮小して近づけました */
}

/* 画面枠（sumo-frame）の競合回避 */
#sumo-frame {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    pointer-events: none;
    border: 16px solid #0d0d0d !important;
}
.vertical-name {
    position: absolute;
    top: 10px;
    left: 10px !important;
    writing-mode: vertical-rl;
    text-orientation: upright;
    color: #fff;
    font-family: 'tamanegi', serif;
    font-size: 24px;
    text-shadow: 2px 2px 0px #000;
    z-index: 200;
    letter-spacing: 4px;
}
/* =========================================
   団体戦のタイトル周りのレイアウト調整
========================================= */

/* 1. 黒幕（コンテナ）の位置とサイズは固定（カンペキな状態をキープ） */
#team-char-title-container {
    top: 35px !important; 
    height: 170px !important;
}

/* ★追加: 画像の上側に余白を作って、中身（画像＋文章）だけを少し下げる */
#team-select-header-img {
    margin-top: 15px !important; /* ★ここの数値で下がり具合を調整します（例: 10px, 20px） */
}

/* 2. 補足テキストのフォントと【高さ固定】（コストオーバー等のズレを完全に防ぐ） */
#team-select-instruction-text {
    font-family: 'tamanegi', sans-serif !important;
    font-weight: normal !important;
    height: 45px !important;       /* ★ 箱の高さを固定 */
    line-height: 20px !important;  /* ★ 文字の縦位置を固定 */
}

/* 3. 準備完了時（取り組み開始）の文字エフェクトを個人戦と同期 */
.torikumi-obi-mode #team-select-instruction-text {
    color: #fff !important;
    background: transparent !important;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.8) !important; 
    font-size: 1.3rem !important; 
    position: relative !important;
    border: none !important;
}

/* =========================================
   団体戦：シークレット選出画面
========================================= */
#team-secret-screen {
    background-color: #000000 !important; /* 背景色を真っ黒に強制 */
    background-image: none !important;    /* 背景画像がある場合は消す */
}

/* 模様などの装飾（擬似要素）が裏にある場合はそれも完全に消す */
#team-secret-screen::before,
#team-secret-screen::after {
    display: none !important;
}
.secret-panels-container {
    position: absolute;
    top: 220px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 100px;
}

.secret-panel {
    position: relative;
    width: 380px;
    background: transparent; /* 変更: 黒い半透明背景を消す */
    border: none;            /* 変更: 枠線を消す */
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    box-shadow: none;        /* 変更: パネルの影を消す */
}
.p1-secret-panel { border-color: transparent; }
.p2-secret-panel { border-color: transparent; }
.secret-player-label {
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 5px;
    text-shadow: 2px 2px 0 #000;
}

/* 各力士の行（顔＋名前＋キーボード） */
.secret-char-row {
    display: flex;
    align-items: center;
    background: transparent; /* 変更: 白い半透明背景を消す */
    border-radius: 8px;
    padding: 15px;
    gap: 10px;
    border: none;            /* 変更: 枠線を完全に消す */
}

/* 使用済みの力士（グレーアウト） */
.secret-char-row.used-char {
    filter: grayscale(1) brightness(0.3);
    pointer-events: none;
}

/* 顔アイコン */
.secret-char-icon {
    width: 120px;  /* 必要に応じてサイズを大きくしてもOK */
    height: 120px;
    
    /* ★重要：丸い切り取りを止める */
    border-radius: 0;
    
    /* 前回の要望：枠と背景を消す */
    border: none;
    background-color: transparent;

    /* 画像の表示設定 */
    background-size: contain; /* ★ここを contain に変更: 画像全体を領域内に収める */
    background-repeat: no-repeat; /* 画像を繰り返さない */
    background-position: center center; /* 中央に配置 */
}
/* 力士名 */
.secret-char-info {
    flex: 1;
    color: #fff;
    font-family: 'tamanegi', sans-serif;
    font-size: 1.4rem;
}

/* =========================================
   キーボードのキー表示（和風・八角形）
========================================= */
.secret-key-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    height: 50px;
    padding: 0 10px;
    color: #000000;
    font-size: 1.4rem;
    font-family: "M PLUS Rounded 1c", sans-serif;
    font-weight: bold;
    
    /* 元の背景と枠線を透明にし、擬似要素を重ねる準備 */
    background: transparent !important;
    border: none !important;
    
    /* clip-pathを使った要素に影をつけるための処理 */
    box-shadow: none;
    filter: drop-shadow(0 4px 0 #111);
    
    position: relative;
    z-index: 1;
}

/* 1. 外側の「枠線」になる八角形（グレー） */
.secret-key-hint::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #000000; /* 元の枠線の色 */
    
    /* 50pxの箱に合わせて、四隅を8px分カット */
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    z-index: -2;
}

/* 2. 内側の「背景色」になる八角形（ダークグレー） */
.secret-key-hint::after {
    content: '';
    position: absolute;
    /* 2px内側に配置して「2pxの枠線」に見せる */
    top: 2px; left: 2px; right: 2px; bottom: 2px;
    background-color: #ffffff; /* 元の背景色 */
    
    /* 外側のカット(8px)から内側に寄った分(2px)小さくする(6px) */
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
    z-index: -1;
}

/* 中央のVS */
.secret-vs-mark {
    font-family: 'tamanegi', sans-serif;
    font-size: 6rem;
    color: #745399;
    text-shadow: 4px 4px 0 #000;
    font-style: italic;
    margin-top: 50px;
}

/* =========================================
   準備完了スタンプ（軍配画像バージョン）
========================================= */
.secret-ready-stamp {
    position: absolute;
    top: 5%;
    left: 55%;
    
    /* 初期状態：デカくて少し傾いている状態からスタート */
    transform: translate(-50%, -50%) rotate(-30deg) scale(2);
    
    /* 軍配の表示サイズ（大きすぎる/小さすぎる場合はここを調整） */
    width: 180px;
    height: 180px;
    
    /* 軍配画像の読み込み */
    background-image: url('../assets/img/gumbai.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
    /* HTML内にある元の「準備完了」の文字を完全に隠す */
    color: transparent !important;
    font-size: 0 !important;
    text-shadow: none !important;
    padding: 0 !important;
    
    /* 既存の枠線・背景を消す */
    border: none !important;
    background-color: transparent !important;
    
    /* 軍配のシルエットに合わせて渋い影を落とす */
    box-shadow: none !important;
    filter: drop-shadow(0 15px 15px rgba(0,0,0,0.6));

    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
}

/* 前回の八角形を作る擬似要素を完全に無効化 */
.secret-ready-stamp::before,
.secret-ready-stamp::after {
    display: none !important;
}

/* 軍配がバーン！と掲げられた状態 */
.secret-ready-stamp.active {
    opacity: 1;
    /* スッと構えるような角度に落ち着く（-10度） */
    transform: translate(-50%, -50%) rotate(-20deg) scale(1);
}