/* キャラタイル (js/tiles.js が生成する .gb-tile) の共通スタイル。
   index.html / stats.html の両方から読み込む。
   背景 = 属性色 (--tile-ac) の薄い混色、上端の帯 = バースト色。
   混色の土台・文字色・混合率はページ側のテーマトークン
   (--tile-mix / --tile-ink-mix / --tile-tint / --tile-ink) が決める
   — ダークモードでも自動で追従する (フォールバックはライト値)。 */

.gb-tile {
    --tile-ac: #8A8A84;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 13px;
    overflow: hidden;
    /* color-mix 非対応環境 (iOS 16.1 以前) は無地グレーに劣化 (透明化して文字が浮くのを防ぐ) */
    background: #ECECE9;
    background: color-mix(in srgb, var(--tile-ac) var(--tile-tint, 16%), var(--tile-mix, #ffffff));
}
.gb-tile-strip {
    height: 14px;
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 800;
    text-align: center;
    line-height: 14px;
    letter-spacing: 1px;
    color: #fff;
}
.gb-tile-strip.dark { color: rgba(20, 20, 18, 0.82); }
.gb-tile-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 1px 3px 3px;
    color: #4A4A46;   /* color-mix 非対応環境のフォールバック */
    color: color-mix(in srgb, var(--tile-ac) var(--tile-ink, 62%), var(--tile-ink-mix, #141412));
}
.gb-tile-base {
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gb-tile-var {
    font-size: 7.5px;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
}
.gb-tile-dot {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
}
.gb-tile--unknown .gb-tile-body { color: var(--sub, #6B7178); }

/* 小サイズ (プリセット顔 38px / 編成ランキング 36px): ベース名のみ */
.gb-tile--xs { border-radius: 9px; }
.gb-tile--xs .gb-tile-strip { height: 10px; font-size: 7px; line-height: 10px; letter-spacing: 0; }
.gb-tile--xs .gb-tile-base { font-size: 8px; font-weight: 800; }
.gb-tile--xs .gb-tile-dot { width: 5px; height: 5px; right: 2px; bottom: 2px; }

/* 画像タイル (キャラ顔 + バースト帯)。画像が無いキャラは従来の文字タイルのまま。
   名前は下端の薄幕オーバーレイ (画像上なので文字色は固定白・テーマ非依存) */
.gb-tile--img .gb-tile-img {
    flex: 1;
    min-height: 0;
    width: 100%;
    object-fit: cover;
    display: block;
}
.gb-tile-body--overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    flex: none;
    justify-content: flex-end;
    padding: 10px 3px 2px;
    background: linear-gradient(transparent, rgba(10, 10, 12, 0.80));
    color: #fff !important;
}
.gb-tile-body--overlay .gb-tile-base, .gb-tile-body--overlay .gb-tile-var { color: #fff; }