/* ===== 新しい表示（UI案A）：スマメイトの配置・色はそのままに、今風に整えたテーマ =====
   html に class="theme-a" が付いている時だけ効く。既定は新しい表示で、右下のボタンで従来の表示に戻せる。
   ダークモード：html.theme-a.dark */

html.theme-a {
  --a-bg: #f3f5f9;
  --a-surface: #ffffff;
  --a-surface-2: #f7f9fc;
  --a-border: #e2e7ef;
  --a-text: #1f2633;
  --a-muted: #6b7587;
  --a-link: #1a4fd0;
  --a-head: #1565e8;
  --a-head-text: #ffffff;
  --a-accent: #e8344a;
  --a-radius: 12px;
  --a-shadow: 0 1px 2px rgba(20, 30, 50, .05), 0 4px 14px rgba(20, 30, 50, .05);
  --link: var(--a-link);
  --line: var(--a-border);
}
html.theme-a.dark {
  --a-bg: #0e131d;
  --a-surface: #161d2b;
  --a-surface-2: #1b2435;
  --a-border: #2a3449;
  --a-text: #e4e9f2;
  --a-muted: #98a3b8;
  --a-link: #8bb8ff;
  --a-head: #2160d4;
  --a-accent: #ff6b7d;
  --a-shadow: none;
  color-scheme: dark;
}

/* 土台 */
html.theme-a body {
  background: var(--a-bg); color: var(--a-text);
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
html.theme-a a { color: var(--a-link); }
html.theme-a .bar { height: 4px; background: linear-gradient(90deg, #1565e8, #e8344a); }
html.theme-a .muted, html.theme-a .help, html.theme-a .breadcrumb { color: var(--a-muted); }

/* ヘッダー */
html.theme-a header.site { padding-top: 14px; }
html.theme-a .toplinks { color: var(--a-border); }
html.theme-a .toplinks a { color: var(--a-muted); }
html.theme-a .toplinks a:hover { color: var(--a-link); }
html.theme-a .search input { height: 36px; border-radius: 999px 0 0 999px; border-color: var(--a-border); background: var(--a-surface); color: var(--a-text); padding-left: 16px; }
html.theme-a .search button { height: 36px; border-radius: 0 999px 999px 0; padding: 0 18px; }
html.theme-a .head-right .btn-outline { border-radius: 999px; padding: 5px 8px; background: var(--a-surface); }
html.theme-a nav.gnav ul { border: 1px solid var(--a-border); border-radius: var(--a-radius); box-shadow: var(--a-shadow); background: var(--a-surface); }
html.theme-a nav.gnav li + li { border-left-color: var(--a-border); }
html.theme-a nav.gnav a { padding: 12px 4px; color: var(--a-text); transition: background .15s, color .15s; }
html.theme-a nav.gnav a:hover { background: var(--a-surface-2); color: var(--a-link); }
html.theme-a nav.gnav a.active { background: transparent; color: var(--a-head); box-shadow: inset 0 -3px 0 var(--a-head); }
html.theme-a .notice { border-radius: 10px; border: 1px solid #f3c6cc; background: #fff2f4; color: #a3283a; }
html.theme-a.dark .notice { background: #2a1820; border-color: #5a2a36; color: #ffb3bd; }
html.theme-a .notice.maint { background: #fff8e1; border-color: #f2dda0; color: #7a5a00; }

/* 見出し・カード（青い帯＋白い本体を、角丸のカードとして見せる） */
html.theme-a h1.page { color: var(--a-accent); font-weight: 700; font-size: 26px; border-bottom: 0; padding-bottom: 0; margin: 6px 0 16px; letter-spacing: .02em; }
html.theme-a h1.page::after { content: ""; display: block; width: 48px; height: 4px; border-radius: 2px; background: var(--a-head); margin-top: 8px; }
html.theme-a h2.box { background: var(--a-head); color: var(--a-head-text); font-size: 16px; padding: 11px 16px; border-radius: var(--a-radius) var(--a-radius) 0 0; letter-spacing: .02em; }
html.theme-a h2.box small { opacity: .85; }
html.theme-a .box-body, html.theme-a .list, html.theme-a .comments, html.theme-a .diary-body, html.theme-a .waiting-box {
  background: var(--a-surface); border-color: var(--a-border); border-radius: 0 0 var(--a-radius) var(--a-radius); box-shadow: var(--a-shadow);
}
html.theme-a .box-body { padding: 14px 16px; }
html.theme-a h3.sub { border-left-color: var(--a-head); }

/* 一覧 */
html.theme-a .list-row { border-top-color: var(--a-border); padding: 10px 14px; transition: background .12s; }
html.theme-a .list-row:hover { background: var(--a-surface-2); }
html.theme-a .list-row.gray { background: var(--a-surface-2); }
html.theme-a .t-row, html.theme-a .d-row { border-top-color: var(--a-border); padding: 12px 14px; }
html.theme-a .t-row:hover, html.theme-a .d-row:hover { background: var(--a-surface-2); }
html.theme-a .t-row .t-desc, html.theme-a .d-row .d-ex { color: var(--a-muted); }
html.theme-a .rank-row .rate { color: var(--a-text); }
html.theme-a .avatar { border-radius: 50%; }
html.theme-a .label { border-radius: 999px; padding: 2px 8px; }
html.theme-a .fchip { border-radius: 6px; }
html.theme-a .uname { font-weight: 700; }

/* ボタン・入力 */
html.theme-a .btn { border-radius: 10px; padding: 8px 16px; border-color: var(--a-border); background: var(--a-surface); color: var(--a-text); transition: transform .06s, filter .15s; }
html.theme-a .btn:hover { filter: brightness(.97); }
html.theme-a .btn:active { transform: scale(.98); }
html.theme-a .btn-sm { padding: 4px 10px; border-radius: 8px; }
html.theme-a .btn-lg { padding: 12px 18px; border-radius: 12px; }
html.theme-a .btn-primary { background: var(--a-head); border-color: var(--a-head); color: #fff; }
html.theme-a .btn-success { background: #20a35a; border-color: #20a35a; color: #fff; }
html.theme-a .btn-danger { background: #e0404f; border-color: #e0404f; color: #fff; }
html.theme-a .btn-warning { background: #f0a020; border-color: #f0a020; color: #fff; }
html.theme-a .form-control { border-radius: 10px; border-color: var(--a-border); padding: 8px 12px; background: var(--a-surface); color: var(--a-text); }
html.theme-a .form-control:focus { border-color: var(--a-head); box-shadow: 0 0 0 3px rgba(21, 101, 232, .2); }
html.theme-a .alert { border-radius: 10px; }

/* 表・ユーザーページ */
html.theme-a .kv th, html.theme-a .kv td { border-top-color: var(--a-border); }
html.theme-a .kv th { color: var(--a-muted); font-weight: 600; }
html.theme-a table.tbl th, html.theme-a table.tbl td { border-color: var(--a-border); }
html.theme-a table.tbl th { background: var(--a-surface-2); }
html.theme-a .u-links a { border-top-color: var(--a-border); }
html.theme-a .stat-table td { border-top-color: var(--a-border); }

/* 対戦ルーム */
html.theme-a .vs .player { border-color: var(--a-border); border-radius: var(--a-radius); background: var(--a-surface); box-shadow: var(--a-shadow); }
html.theme-a .vs .player.me { background: var(--a-surface-2); box-shadow: inset 0 0 0 2px var(--a-head); }
html.theme-a .arena-box { border-radius: 16px; border-width: 2px; background: var(--a-surface); }
html.theme-a .arena-box .arena-id { color: var(--a-head); }
html.theme-a .stage { border-radius: 8px; border-color: var(--a-border); background: var(--a-surface); }
html.theme-a .stage.x { background: var(--a-surface-2); color: var(--a-muted); }
html.theme-a .games-box { border-radius: 10px; border-color: var(--a-border); background: var(--a-surface-2); }
html.theme-a .comment { border-top-color: var(--a-border); }
html.theme-a .comment.mine { background: rgba(21, 101, 232, .07); }

/* お知らせ・大会 */
html.theme-a .trial-box { border-radius: 16px; border-width: 2px; background: var(--a-surface); box-shadow: var(--a-shadow); }
html.theme-a .trial-badge { border-radius: 999px; }
html.theme-a .br-match { border-radius: 10px; border-color: var(--a-border); background: var(--a-surface); }
html.theme-a .br-side { border-top-color: var(--a-border); }
html.theme-a .br-side.win { background: rgba(21, 101, 232, .08); }
html.theme-a .standings, html.theme-a .host-tools { border-radius: 10px; }
html.theme-a .modal { border-radius: 16px; background: var(--a-surface); color: var(--a-text); }
html.theme-a .modal h2.box { border-radius: 16px 16px 0 0; }
html.theme-a .doc h3 { border-left-color: var(--a-head); }

/* フッター */
html.theme-a footer.site { border-color: var(--a-border); background: var(--a-surface); color: var(--a-muted); }

/* ===== ダークモードの細かい調整 ===== */
html.theme-a.dark .alert-info { background: #14253d; border-color: #24426b; color: #a9c8f2; }
html.theme-a.dark .alert-success { background: #12291c; border-color: #1f4a31; color: #9fdab5; }
html.theme-a.dark .alert-warning { background: #2d2512; border-color: #57461d; color: #ecd08b; }
html.theme-a.dark .alert-danger { background: #2d1519; border-color: #5c2530; color: #f3a8b3; }
html.theme-a.dark .list-empty, html.theme-a.dark .access { color: var(--a-muted); }
html.theme-a.dark .trial-box { background: #1a1f2e; }
html.theme-a.dark .standings { background: #2b2614; border-color: #574b1f; }
html.theme-a.dark .host-tools { background: #152036; }
html.theme-a.dark .code-box { background: #152036; color: var(--a-text); }
html.theme-a.dark .br-side.empty, html.theme-a.dark .br-side.lose { color: #6f7a90; }
html.theme-a.dark .update-banner { background: #2160d4; }
html.theme-a.dark .avatar svg circle, html.theme-a.dark .avatar svg path { opacity: .85; }

/* ===== 表示の切り替えボタン（右下・全ページ共通） ===== */
.theme-switch { position: fixed; right: 12px; bottom: 12px; z-index: 1200; display: flex; gap: 4px; background: rgba(20, 30, 50, .82); padding: 4px; border-radius: 999px; font-size: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.theme-switch button { border: 0; border-radius: 999px; padding: 5px 11px; cursor: pointer; background: transparent; color: #d6deec; font: inherit; line-height: 1.3; }
.theme-switch button:hover { color: #fff; }
.theme-switch button.on { background: #fff; color: #14203a; font-weight: bold; }
.theme-switch button[data-dark] { padding: 5px 9px; }
@media print { .theme-switch { display: none; } }

@media (max-width: 767px) {
  html.theme-a h1.page { font-size: 22px; }
  html.theme-a h2.box { font-size: 15px; }
  html.theme-a nav.gnav li { border-top-color: var(--a-border); }
}