/* TFT Simulator - styles */
*{margin:0;padding:0;box-sizing:border-box;}
:root {
  /* プロのデザイナー設定：単なる白ではなく、上品な「ペール・フロスト」トーン */
  --gold: #b8860b; --gold2: #d4af37; --blue: #0066cc; --purple: #7a33cc;
  --teal: #008877; --red: #dc3545; 
  --bg0: #f0f4f8; 
  --bg1: #ffffff; 
  --bg2: #e2e8f0; 
  --bg3: #cbd5e1; 
  --border: #94a3b8; 
  --text: #1e293b; 
  --textdim: #64748b;
  --silver: #64748b; --prismatic: #c084fc;
  
  /* 透明度を持たせたパネル用の新設変数 */
  --bg-panel: rgba(255, 255, 255, 0.95);
  --bg-sidebar: rgba(241, 245, 249, 0.85);
  --bg-hex: rgba(226, 232, 240, 0.6);
  --text-main: #1e293b;
  --text-inv: #ffffff;
}
html,body{height:100%;background:var(--bg0);overflow:hidden;font-family:'Noto Sans JP','Rajdhani',sans-serif;color:var(--text);}
#root{height:100%;display:flex;flex-direction:column;}

@keyframes popIn {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* POPアップのスタイル修正 */
.champ-pop-up {
  /* position: fixed; 等はJS側の親要素が担当するので不要になります */
  animation: popInSimple 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popInSimple {
  0% { transform: scale(0.5); opacity: 0; }
  70% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ステージ進行バーのスタイル */
.stage-tracker {
  display: flex;
  align-items: center;
  background: #08101a;
  border: 1px solid #1e2d4a;
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 4px 20px;
  gap: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  position: relative;
}

.stage-num {
  font-family: 'Orbitron';
  font-weight: 900;
  color: #c5d4e8;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.round-dots {
  display: flex;
  align-items: center;
  gap: 10px;
}

.round-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1);
  opacity: 0.3;
  transition: all 0.3s;
}

.round-icon.active {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.2);
}

/* 画像にあったひし形のカレントマーカー */
.round-icon.active::after {
  content: '';
  position: absolute;
  bottom: -12px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid var(--blue);
}


@keyframes fadeIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes starUpAnim{0%{transform:scale(0.5);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes prismaticGlow{0%{box-shadow:0 0 8px #ff00ff,0 0 16px #00ffff}33%{box-shadow:0 0 8px #ffff00,0 0 16px #ff00ff}66%{box-shadow:0 0 8px #00ffff,0 0 16px #ffff00}100%{box-shadow:0 0 8px #ff00ff,0 0 16px #00ffff}}

.menu-btn { padding:12px 25px; border:1px solid var(--border); background:var(--bg2); color:white; font-family:'Noto Sans JP','Orbitron'; cursor:pointer; border-radius:8px; transition:all 0.2s; text-align:center; font-weight:700;}
.menu-btn:hover { background:var(--bg3); border-color:var(--blue); box-shadow:0 0 15px var(--blue); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

.aug-card-silver { border-color: var(--silver) !important; box-shadow: 0 0 12px rgba(176,196,222,0.3); }
.aug-card-silver:hover { border-color: white !important; box-shadow: 0 0 20px rgba(176,196,222,0.6) !important; }
.aug-card-gold { border-color: var(--gold) !important; box-shadow: 0 0 12px rgba(200,169,110,0.4); }
.aug-card-gold:hover { border-color: var(--gold2) !important; box-shadow: 0 0 20px rgba(200,169,110,0.7) !important; }
.aug-card-prismatic { border-color: var(--prismatic) !important; animation: prismaticGlow 2s infinite; }
.aug-card-prismatic:hover { box-shadow: 0 0 30px rgba(232,160,255,0.8) !important; }

.aug-tier-silver { color: var(--silver); }
.aug-tier-gold { color: var(--gold2); }
.aug-tier-prismatic { 
  background: linear-gradient(90deg, #ff00ff, #00ffff, #ffff00, #ff00ff);
  background-size: 200%;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s linear infinite;
}

/* ── スマホ横持ち対応 ── */
@media screen and (max-height: 500px) and (orientation: landscape) {
  /* ステージトラッカー */
  .stage-tracker { padding: 2px 10px; gap: 8px; }
  .stage-num { font-size: 11px; }
  .round-dots { gap: 6px; }

  /* サイドバー系の幅を縮小 */
  .sp-left-trait  { width: 128px !important; padding: 4px !important; }
  .sp-left-item   { width: 52px !important; padding: 4px !important; }
  .sp-right-aug   { width: 72px !important; padding: 8px 3px !important; }

  /* ベンチスロットを小さく */
  .sp-bench-slot  { width: 52px !important; height: 52px !important; }

  /* ショップエリアを低く */
  .sp-shop-area   { height: 134px !important; }
  .sp-shop-header { height: 20px !important; }

  /* NEXTボタンエリアを細く */
  .sp-next-btn-area { width: 100px !important; padding: 8px !important; }
  .sp-next-btn      { height: 52px !important; font-size: 14px !important; }

  /* ヘッダー行を低く */
  .sp-header-row  { height: 36px !important; padding: 0 8px !important; }
  .sp-header-title { font-size: 11px !important; }
}

/* ── ASSET DRAWER ── */
.asset-drawer {
    /* 幅は1箇所（--drawer-w）で管理。アイコンを大きくしたぶん既定を広げた */
    --drawer-w: 420px;
    position: fixed;
    top: 0;
    right: calc(-1 * var(--drawer-w));
    width: var(--drawer-w);
    height: 100vh;
    background: var(--bg-panel);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(0,0,0,0.3);
    z-index: 5000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}
.asset-drawer.open { right: 0; }
/* 画面が狭い端末では画面幅に収める */
@media screen and (max-width: 520px) { .asset-drawer { --drawer-w: 92vw; } }
@media screen and (max-height: 500px) and (orientation: landscape) { .asset-drawer { --drawer-w: 60vw; } }
.drawer-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg2);
}
.drawer-header h3 {
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 900;
    font-size: 15px;
    color: var(--text-main);
    letter-spacing: 0.5px;
}
.close-drawer-btn {
    background: rgba(0,0,0,0.1);
    border: 1px solid var(--border);
    color: var(--text-main);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}
.close-drawer-btn:hover { background: rgba(0,0,0,0.2); }
.drawer-tabs { display: flex; border-bottom: 1px solid var(--border); }
.drawer-tab {
    flex: 1; padding: 10px 0; border: none; background: transparent; cursor: pointer;
    font-size: 12px; font-weight: 900; color: var(--textdim);
    border-bottom: 2px solid transparent; transition: all 0.12s;
}
.drawer-tab.active { color: var(--blue); border-bottom-color: var(--blue); }
.drawer-content { padding: 14px; overflow-y: auto; flex: 1; display: none; }
.drawer-content.active { display: block; }
.drawer-section-title { font-size: 11px; font-weight: 700; color: var(--textdim); margin-top: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.drawer-section-title:first-child { margin-top: 0; }
.drawer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.asset-icon-wrapper {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  cursor: grab;
  border: 2px solid var(--border);
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: all 0.15s;
  position: relative;
}
.asset-icon-wrapper:hover {
  border-color: var(--gold) !important;
  transform: scale(1.1);
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.asset-icon-wrapper img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* ============================================================
   📱 スマホ・タブレット横向き専用 UI (Landscape Only)
   ============================================================ */

/* 縦向き（ポートレート）時に警告を表示して操作をロック */
@media screen and (orientation: portrait) {
  body::after {
    content: "画面を横向きにしてください\A (Please rotate your device)";
    white-space: pre-wrap;
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: var(--bg0); color: var(--text);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; font-weight: bold; text-align: center;
    z-index: 99999;
  }
}

/* 全体のコンテナを画面いっぱい（フルブリード）に固定。
   ※ html/body/#root に padding:env(safe-area-inset-*) を入れると
     #root が width:100vw を持つため、ノッチ側のパディング分だけ中身が右へはみ出し
     「左側が空白・画面が右に寄る」状態になる。
     セーフエリアは各端の要素（左サイドバー等）に内側パディングとして個別付与する。 */
html, body, #root {
  height: 100vh; width: 100vw;
  overflow: hidden;
  background: var(--bg0);
}

/* ═══ 🌗 ダークテーマ（body.dark でCSS変数を一括反転） ═══ */
body.dark {
  --bg0: #0b1320;
  --bg1: #101c33;
  --bg2: #1c2a44;
  --bg3: #24365a;
  --border: #2a3a55;
  --text: #e2e8f0;
  --textdim: #7d8aa5;
  --bg-panel: rgba(16, 28, 51, 0.95);
  --bg-sidebar: rgba(11, 19, 32, 0.85);
  --bg-hex: rgba(28, 42, 68, 0.6);
  --text-main: #e2e8f0;
  --text-inv: #0b1320;
}

/* ============================================================
   🧊 全画面3Dレイアウト（body直下ではなく対戦画面ルートの .b3d-full に付与）
   ── 3D盤面を画面いっぱいに敷き、特性/アイテム/ショップ/オーグメントを
      その上に浮かせる（本家ゲームに近い見え方）。
   ── 2Dのときはこのブロックが一切効かないので、従来レイアウトはそのまま。
   ============================================================ */

/* 盤面エリアを画面全体へ。ヘッダーの下から下端まで敷き詰める */
.b3d-full .sp-main-area { position: static; }
.b3d-full .sp-board-area {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 0;
}

/* 共通：オーバーレイ化したパネルの見た目 */
.b3d-full .sp-left-side,
.b3d-full .sp-right-aug,
.b3d-full .sp-shop-area {
  position: absolute !important;
  z-index: 20;
  background: rgba(12, 20, 34, 0.62) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  color: #e8eefc;
}

/* 左：特性 ＋ アイテム欄（本家と同じく画面左に縦並び） */
.b3d-full .sp-left-side {
  top: 12px !important; left: 12px !important; bottom: 214px !important;
  align-items: stretch;
  overflow: hidden;
}
.b3d-full .sp-left-trait { border-right: 1px solid rgba(255,255,255,0.10); }

/* 右：オーグメント（チート側の縦列と同じ位置） */
.b3d-full .sp-right-aug {
  top: 12px !important; right: 12px !important; bottom: 214px !important;
  border-left: none !important;
}

/* 下：ショップ（画面下部に横長のオーバーレイ） */
.b3d-full .sp-shop-area {
  left: 12px !important; right: 12px !important; bottom: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  overflow: hidden;
}

/* オーバーレイ上の文字はガラス背景に合わせて明るく。
   インラインで明るいテーマ用の濃い色が入っているため !important で上書きする。 */
.b3d-full .sp-left-side,
.b3d-full .sp-left-side *,
.b3d-full .sp-right-aug,
.b3d-full .sp-right-aug * { color: #eaf1ff !important; }

/* 「ユニット数」枠は青のアクセントを残す */
.b3d-full .sp-left-trait > div[style*="text-align"] {
  background: rgba(26, 159, 255, 0.18) !important;
  border-color: #4aa8ff !important;
}
/* シナジー行は自前で配色を持つので、上の文字色の一括指定を打ち消す */
.b3d-full .syn-row, .b3d-full .syn-row * { color: inherit !important; }
.b3d-full .syn-row .syn-name { color: #ffffff !important; }
.b3d-full .syn-off .syn-name { color: #b9c6d8 !important; }
.b3d-full .syn-row .syn-tiers { color: #7f8ea3 !important; }
.b3d-full .syn-row img { filter: brightness(0) invert(1) !important; }
/* 見出し（ユニット数・アイテム）はガラス上でも沈まないよう明るい金に */
.b3d-full .sp-left-side [style*="var(--blue)"] { color: #8fc7ff !important; }
.b3d-full .sp-left-item [style*="var(--gold)"] { color: #ffd76e !important; }

/* パネル内の不透明な背景を透過させて、下の3D盤面を透かす */
.b3d-full .sp-left-trait,
.b3d-full .sp-left-item,
.b3d-full .sp-shop-area > div,
.b3d-full .sp-next-btn-area { background: transparent !important; }

/* 3D盤面のドラッグ操作を邪魔しないよう、パネルの隙間はクリックを通す */
.b3d-full .sp-main-area { pointer-events: none !important; }
.b3d-full .sp-board-area,
.b3d-full .sp-left-side,
.b3d-full .sp-right-aug,
.b3d-full .sp-shop-area { pointer-events: auto; }

/* 画面が狭いときはパネルを小さくして盤面を確保 */
@media screen and (max-height: 700px) {
  .b3d-full .sp-left-side,
  .b3d-full .sp-right-aug { bottom: 178px; }
}
@media screen and (max-height: 500px) and (orientation: landscape) {
  .b3d-full .sp-left-side,
  .b3d-full .sp-right-aug { top: 6px; bottom: 146px; }
  .b3d-full .sp-left-side { left: 6px; }
  .b3d-full .sp-right-aug { right: 6px; }
  .b3d-full .sp-shop-area { left: 6px; right: 6px; bottom: 6px; }
}