/* =============================================================================
   デザイン「88ポーカー」(アプリアイコンの紺→紫・金・青紫に光る枠)

   <html data-theme="poker88"> のときだけ効く上書き。既定のデザイン(クラシック)は theme.css のまま。
   data-theme は js/design.js が描画前に付ける(設定は 設定 > デザイン、ユーザーごと)。

   部品の CSS は Blazor のスコープ付き CSS(.x[b-xxxx])なので、上書きは !important で確実に勝たせる。
   背景の写真(img/poker88/*.jpg)は Nanobanana(Gemini の画像生成)でアイコンを参考に作った。
   ============================================================================= */

:root[data-theme="poker88"] {
    --hc-bg: #0e0b2a;
    --hc-bg-raised: #17123a;
    --hc-surface: #1d1747;
    --hc-surface-2: #261e58;
    --hc-line: #33296a;
    --hc-line-control: #7466b8;
    --hc-line-soft: rgba(170, 150, 255, 0.12);
    --hc-sunken: rgba(6, 4, 24, 0.45);
    --hc-ink: #f4f1ff;
    --hc-muted: #aaa3d0;
    --hc-ink-invert: #3a2200;
    --hc-gold: #f0b93a;
    --hc-gold-hi: #fff2b3;
    --hc-gold-text: #ffd76a;
    --hc-felt-1: #5a3fc8;
    --hc-felt-2: #22146a;
    --hc-rail: #0f0b26;
    --hc-room-1: #2b1b66;
    --hc-room-2: #140e3a;
    --p88-frame: linear-gradient(135deg, #5f7dff, #9a5cff 50%, #d04cff);
    --p88-gold: linear-gradient(180deg, #fff4bf 0%, #ffd55a 38%, #e8a521 70%, #b9761a 100%);
}

/* ---- 地: 紺→紫の写真。縦に流れる中身(.hc-content)の背面に貼り、スクロールしても動かさない ---- */
:root[data-theme="poker88"] body,
:root[data-theme="poker88"] #app,
:root[data-theme="poker88"] .hc-page {
    background-color: var(--hc-bg) !important;
}
:root[data-theme="poker88"] .hc-content {
    background: linear-gradient(180deg, rgba(10, 8, 34, 0.35), rgba(10, 8, 34, 0.55)),
                url(../img/poker88/background.jpg) center top / cover no-repeat,
                var(--hc-bg) !important;
}
/* 上端の帯(body の padding-top)。卓は部屋の上端の色に合わせる */
:root[data-theme="poker88"] body:has(.table-screen) {
    background: #170f45 !important;
}

/* ---- 上部バー: 紫の地に、アイコンの枠と同じ青紫の光る下線 ---- */
:root[data-theme="poker88"] .hc-appbar {
  background: linear-gradient(180deg, #2b1b66, #160f40) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(160, 120, 255, .55), 0 6px 18px rgba(90, 60, 220, .25) !important;
}
:root[data-theme="poker88"] .hc-appbar-title { color: #fff !important; letter-spacing: .02em; }
:root[data-theme="poker88"] .hc-appbar-avatar { background: var(--p88-gold) !important; color: #3a2200 !important; border: none !important; font-weight: 800; }
:root[data-theme="poker88"] .hc-appbar-back { border-color: rgba(170, 150, 255, .35) !important; background: rgba(140, 110, 255, .14) !important; }

/* ---- カード・行: 紺紫の面に淡い紫の縁 ---- */
:root[data-theme="poker88"] .hc-card,
:root[data-theme="poker88"] .hc-row,
:root[data-theme="poker88"] .hc-tile,
:root[data-theme="poker88"] .gem-pack,
:root[data-theme="poker88"] .admin-head,
:root[data-theme="poker88"] .hc-kpi,
:root[data-theme="poker88"] .hud-plan,
:root[data-theme="poker88"] .lobby-row {
  background: linear-gradient(180deg, rgba(48, 38, 110, .72), rgba(28, 22, 72, .82)) !important;
  border-color: rgba(150, 125, 255, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 4px 14px rgba(5, 3, 25, .45) !important;
}
:root[data-theme="poker88"] .hc-input,
:root[data-theme="poker88"] .hc-select,
:root[data-theme="poker88"] .form-control,
:root[data-theme="poker88"] .form-select,
:root[data-theme="poker88"] .hc-textarea {
  background: rgba(8, 6, 30, .55) !important; border-color: #6f61b3 !important;
}

/* ---- 金のボタン: アイコンの「88」と同じ立体の金 ---- */
:root[data-theme="poker88"] .hc-btn-gold,
:root[data-theme="poker88"] .btn-primary,
:root[data-theme="poker88"] .hc-btn-neon,
:root[data-theme="poker88"] .btn-success,
:root[data-theme="poker88"] .tbl-raise {
  background: var(--p88-gold) !important; color: #3a2200 !important; border: 1px solid #fff0b0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(120, 60, 0, .35), 0 4px 16px rgba(240, 180, 40, .35) !important;
  font-weight: 800 !important; text-shadow: 0 1px 0 rgba(255, 245, 200, .6);
}
:root[data-theme="poker88"] .hc-btn-ghost { background: rgba(140, 110, 255, .10) !important; border-color: rgba(170, 150, 255, .55) !important; }

/* 金額・見出しの数字は金 */
:root[data-theme="poker88"] .club-balance,
:root[data-theme="poker88"] .hc-amount,
:root[data-theme="poker88"] .hc-kpi b,
:root[data-theme="poker88"] .gem-val { color: #ffd76a !important; }
:root[data-theme="poker88"] .hc-section-label,
:root[data-theme="poker88"] .hc-label { color: #c7bdf5 !important; }

/* ---- 銘板(ログイン): ♠ の章をアプリアイコンに ---- */
:root[data-theme="poker88"] .hc-crest {
  width: 5.2rem !important; height: 5.2rem !important; font-size: 0 !important; color: transparent !important;
  background: url(/icon-192.png) center/cover no-repeat !important; border: none !important; border-radius: 1.3rem !important;
  box-shadow: 0 0 0 2px rgba(150, 110, 255, .7), 0 0 26px rgba(130, 90, 255, .55), 0 10px 26px rgba(0, 0, 0, .5) !important;
}
:root[data-theme="poker88"] .hc-wordmark { background: var(--p88-gold); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-weight: 900 !important; font-size: 1.15rem !important; }
:root[data-theme="poker88"] .hc-tagline { color: #b9a9ff !important; }
:root[data-theme="poker88"] .hc-auth-card { border: 1px solid rgba(150, 125, 255, .35) !important; background: linear-gradient(180deg, rgba(48, 38, 110, .78), rgba(24, 18, 64, .9)) !important; }

/* ---- ホーム: クラブカードは光る紫枠、部屋の写真を敷く ---- */
:root[data-theme="poker88"] .club-name { color: #fff !important; }
:root[data-theme="poker88"] .club-card { border: 2px solid transparent !important; background: linear-gradient(180deg, #1d1650, #140e3a) padding-box, var(--p88-frame) border-box !important; box-shadow: 0 0 24px rgba(154, 92, 255, .4) !important; }
:root[data-theme="poker88"] .cc-hd h2 { background: var(--p88-gold); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
:root[data-theme="poker88"] .cc-hero { background: url(../img/poker88/lobby-lounge.jpg) center 55% / cover no-repeat !important; }
:root[data-theme="poker88"] .cc-emblem { background: var(--p88-gold) !important; box-shadow: 0 0 0 2px #9a5cff !important; }
:root[data-theme="poker88"] .cc-members { background: linear-gradient(180deg, #7a5cff, #4b2fc0) !important; border-color: #a58cff !important; }

/* ---- ホーム・ショップ・プロフの上部バーと下部ナビ ---- */
:root[data-theme="poker88"] .hc-bnav { background: linear-gradient(180deg, #1b1450, #0f0b2a) !important; border-top-color: rgba(160, 120, 255, .45) !important; }
:root[data-theme="poker88"] .hc-bnav a.on::before { background: var(--p88-frame) !important; }
:root[data-theme="poker88"] .shop-hero { background: linear-gradient(180deg, rgba(14, 11, 42, .15), var(--hc-bg) 98%), url(../img/poker88/lobby-lounge.jpg) center 45% / cover no-repeat !important; }
:root[data-theme="poker88"] .shop-hero span { border-color: #c9a8ff !important; text-shadow: 0 0 12px #b88cff, 0 0 2px #fff !important; box-shadow: 0 0 16px #9a5cff, inset 0 0 12px rgba(154, 92, 255, .6) !important; background: rgba(20, 10, 60, .4) !important; }
:root[data-theme="poker88"] .me-av.has-img { background: #1d1747 !important; }
:root[data-theme="poker88"] .me-av { background: var(--p88-gold) !important; box-shadow: 0 0 0 3px #1d1747, 0 0 0 5px #9a5cff, 0 0 26px rgba(154, 92, 255, .55) !important; }
:root[data-theme="poker88"] .me-tile { background: linear-gradient(180deg, #261e58, #1a1442) !important; border-color: #4a3d94 !important; }
:root[data-theme="poker88"] .me-sheet { border: 2px solid transparent !important; background: linear-gradient(180deg, #221a52, #15103a) padding-box, var(--p88-frame) border-box !important; box-shadow: 0 10px 40px rgba(0, 0, 0, .6), 0 0 24px rgba(154, 92, 255, .35) !important; }
:root[data-theme="poker88"] .me-sheet-x, :root[data-theme="poker88"] .me-sheet-back { background: rgba(140, 110, 255, .14) !important; border-color: rgba(170, 150, 255, .35) !important; }
:root[data-theme="poker88"] .me-li .hc-switch-on { background: linear-gradient(90deg, #7a5cff, #b04cff) !important; border-color: #b04cff !important; box-shadow: 0 0 8px rgba(154, 92, 255, .5) !important; }
:root[data-theme="poker88"] .me-li .hc-switch-on::after { background: #fff !important; }
/* キャリア */
:root[data-theme="poker88"] .cr-card, :root[data-theme="poker88"] .gd-stats { background: linear-gradient(180deg, #261e58, #1a1442) !important; border-color: #4a3d94 !important; }
:root[data-theme="poker88"] .cr-seg button.on::after { background: var(--p88-frame) !important; }
:root[data-theme="poker88"] .cr-filter, :root[data-theme="poker88"] .cr-vip { background: rgba(140, 110, 255, .12) !important; border-color: rgba(170, 150, 255, .35) !important; }
:root[data-theme="poker88"] .cr-menu { border: 2px solid transparent !important; background: linear-gradient(180deg, #221a52, #15103a) padding-box, var(--p88-frame) border-box !important; }
:root[data-theme="poker88"] .cr-row { border-bottom-color: rgba(170, 150, 255, .18) !important; }
:root[data-theme="poker88"] .cr-sheet { border: 2px solid transparent !important; background: linear-gradient(180deg, #221a52, #15103a) padding-box, var(--p88-frame) border-box !important; box-shadow: 0 10px 40px rgba(0, 0, 0, .6), 0 0 24px rgba(154, 92, 255, .35) !important; }
:root[data-theme="poker88"] .cr-sheet-x { background: rgba(140, 110, 255, .14) !important; border-color: rgba(170, 150, 255, .35) !important; }
:root[data-theme="poker88"] .gd-p { background: rgba(140, 110, 255, .1) !important; border-color: rgba(170, 150, 255, .25) !important; }
:root[data-theme="poker88"] .gd-p.me { background: rgba(255, 213, 90, .12) !important; border-color: #ffd55a !important; }
:root[data-theme="poker88"] .gd-p .av { background: var(--p88-gold) !important; color: #3a2200 !important; }

/* ---- ロビー ---- */
:root[data-theme="poker88"] .lobby-screen { --room1: #2b1b66 !important; --room2: #120c34 !important; --felt1: #5a3fc8 !important; --felt2: #22146a !important; --gold: #f0b93a !important; --card: #1d1747 !important; --card-line: #33296a !important; background: transparent !important; }
:root[data-theme="poker88"] .hero-emblem { background: var(--p88-gold) !important; color: #3a2200 !important; border: 2px solid #fff0b0 !important; box-shadow: 0 0 16px rgba(240, 180, 40, .45) !important; }
:root[data-theme="poker88"] .hero-cname { color: #fff !important; }
:root[data-theme="poker88"] .lobby-tab { background: rgba(30, 24, 76, .8) !important; border-color: rgba(150, 125, 255, .3) !important; color: #9d95c8 !important; }
:root[data-theme="poker88"] .lobby-tab.on { background: var(--p88-gold) !important; color: #3a2200 !important; border-color: #fff0b0 !important; }
:root[data-theme="poker88"] .lobby-fab,
:root[data-theme="poker88"] .hc-fab { background: var(--p88-gold) !important; color: #3a2200 !important; box-shadow: 0 0 0 3px rgba(150, 110, 255, .55), 0 8px 20px rgba(240, 180, 40, .4) !important; }

/* ---- 卓: 紺紫のフェルト + 金のレール ---- */
:root[data-theme="poker88"] .table-screen { --felt1: #5a3fc8 !important; --felt2: #1f1360 !important; --rail: #0f0b26 !important; --gold: #f0b93a !important; }
:root[data-theme="poker88"] .tbl-oval { box-shadow: 0 0 0 5px #c98a1e, 0 0 0 7px #ffe08a, 0 0 34px rgba(140, 90, 255, .55), inset 0 0 40px rgba(0, 0, 0, .55) !important; }
:root[data-theme="poker88"] .tbl-tab { background: var(--p88-gold) !important; color: #3a2200 !important; }
:root[data-theme="poker88"] .tbl-fold { background: linear-gradient(180deg, #e2434f, #9b1c2a) !important; color: #fff !important; }
:root[data-theme="poker88"] .tbl-call { background: linear-gradient(180deg, #4e7dff, #2a3fb8) !important; color: #fff !important; }
:root[data-theme="poker88"] .tbl-ava { box-shadow: 0 0 0 2px #9a7bff !important; }

:root[data-theme="poker88"] .hero-ic,
:root[data-theme="poker88"] .hero-backtbl { background: rgba(20, 14, 60, .6) !important; color: #ffd76a !important; border-color: rgba(240, 185, 58, .55) !important; filter: drop-shadow(0 0 6px rgba(240, 185, 58, .35)) !important; }
:root[data-theme="poker88"] .hero-bal { background: rgba(20, 14, 60, .85) !important; border-color: rgba(240, 185, 58, .6) !important; color: #ffd76a !important; }
:root[data-theme="poker88"] .lobby-row.mine,
:root[data-theme="poker88"] .lobby-row:hover { border-color: rgba(240, 185, 58, .55) !important; }
:root[data-theme="poker88"] .tbl-plus,
:root[data-theme="poker88"] .tbl-burger { background: rgba(140, 110, 255, .16) !important; color: #ffd76a !important; border: 1px solid rgba(170, 150, 255, .45) !important; }
:root[data-theme="poker88"] .tbl-plate { border: 1px solid rgba(170, 150, 255, .35) !important; background: rgba(14, 10, 40, .85) !important; }

/* ---- ログイン: チップとカードの光をアイコンの後ろに。カードはその下から ---- */
:root[data-theme="poker88"] .hc-auth {
    background: linear-gradient(180deg, transparent 0, transparent 250px, #120d36 350px, transparent 520px) top / 100% 520px no-repeat,
                url(../img/poker88/login-hero.jpg) center 18px / 150% auto no-repeat !important;
}
:root[data-theme="poker88"] .hc-auth-card {
    margin-top: 120px !important;
    background: linear-gradient(180deg, rgba(48, 38, 110, 0.92), rgba(24, 18, 64, 0.96)) !important;
    backdrop-filter: blur(6px);
}
:root[data-theme="poker88"] .hc-tagline { text-shadow: 0 1px 6px #000; }

/* ---- ロビー: 上部は紫のラウンジの写真(線で描いた天井と卓は隠す) ---- */
:root[data-theme="poker88"] .lobby-hero { background: url(../img/poker88/lobby-lounge.jpg) center 62% / cover no-repeat !important; }
:root[data-theme="poker88"] .hero-ceil,
:root[data-theme="poker88"] .hero-ceil2,
:root[data-theme="poker88"] .hero-table,
:root[data-theme="poker88"] .hero-glow { display: none !important; }
:root[data-theme="poker88"] .hero-shade { background: linear-gradient(180deg, rgba(14, 11, 42, 0.55) 0%, rgba(14, 11, 42, 0.1) 30%, rgba(14, 11, 42, 0.55) 70%, #0e0b2a 100%) !important; }
:root[data-theme="poker88"] .lobby-felt { background: url(../img/poker88/table-felt.jpg) center / cover no-repeat !important; }

/* ---- 卓: カジノの部屋 + 紫のフェルト ---- */
:root[data-theme="poker88"] .table-screen {
    background: linear-gradient(180deg, rgba(10, 8, 34, 0.2), rgba(10, 8, 34, 0.35)),
                url(../img/poker88/table-room.jpg) center / cover no-repeat, #0c0926 !important;
}
:root[data-theme="poker88"] .tbl-oval {
    background: url(../img/poker88/table-felt.jpg) center / cover no-repeat !important;
    border-color: #120c30 !important;
}