/* ===== UWH Tournament - Shared Base CSS ===== */
/* 统一设计 token 体系，所有页面共享，禁止各页自定义 :root */

/* ===== Global Reset ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ===== Font Faces (AlibabaPuHuiTi 3 weights: 400/700/800) ===== */
@font-face { font-family: 'AlibabaPuHuiTi'; src: url('https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-55-Regular/AlibabaPuHuiTi-3-55-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'AlibabaPuHuiTi'; src: url('https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-85-Bold/AlibabaPuHuiTi-3-85-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'AlibabaPuHuiTi'; src: url('https://puhuiti.oss-cn-hangzhou.aliyuncs.com/AlibabaPuHuiTi-3/AlibabaPuHuiTi-3-105-Heavy/AlibabaPuHuiTi-3-105-Heavy.woff2') format('woff2'); font-weight: 800; font-display: swap; }

/* ===== Unified Design Tokens (:root) =====
 * 设计规范手册 v1.0 定义的标准变量
 * 所有页面必须引用这些变量，禁止硬编码颜色/字号/间距
 */
:root {
  /* --- 背景与表面 --- */
  --bg: #0D0D0D;
  --surface: #1A1A1A;          /* 等同旧 --panel */
  --surface-hover: #222222;    /* 等同旧 --panel-hover */
  --surface-raised: #2A2A2A;
  --border: #333333;
  --border-light: #444444;
  --border-dark: #555555;

  /* --- 文字 --- */
  --white: #FFFFFF;
  --text-muted: #888888;       /* 等同旧 --gray-light / --light-gray */
  --text-dim: #666666;         /* 等同旧 --gray */
  --text-secondary: #AAAAAA;   /* 等同旧 --gray-lighter */

  /* --- 主题色（语义化） --- */
  --accent: #4FC3F7;           /* 强调色，等同旧 --blue */
  --danger: #FF3333;           /* 危险/红帽色，等同旧 --red */
  --success: #33CC55;          /* 成功色，等同旧 --green */
  --warning: #FFCC00;          /* 警告色，等同旧 --yellow */
  --highlight: #FF8800;        /* 高亮色，等同旧 --orange */

  /* --- 扩展色（viewer/scoreboard 等大屏页面需要） --- */
  --cyan: #338888;
  --purple: #CC66FF;
  --amber: #FFAA2C;

  /* --- 亮色变体（发光效果用） --- */
  --red-light: #FF4444;
  --red-lighter: #FF6666;
  --green-light: #66FF66;
  --green-glow: #66FF88;
  --orange-light: #FF8800;
  --orange-dark: #FF6600;
  --blue-light: #88AACC;
  --cyan-light: #66CCCC;

  /* --- 深色背景变体（状态横幅底色） --- */
  --bg-green-dark: #0A1A0A;
  --bg-orange-dark: #1A1000;
  --bg-red-dark: #1A0000;
  --bg-red-darker: #330000;
  --bg-yellow-dark: #1A1A00;
  --bg-blue-dark: #0A0A1A;
  --bg-cyan-dark: #0A1A1A;
  --bg-black: #000000;

  /* --- 中性色扩展 --- */
  --black: #000000;
  --bg-deeper: #0A0A0A;        /* 比 --bg 更深的背景 */
  --surface-dim: #111111;      /* 比 --surface 更暗的表面 */
  --purple-dim: #8888CC;       /* 暗淡紫色文字 */

  /* --- UWH 专用色 --- */
  --team-a: #FFFFFF;           /* 白帽队 */
  --team-b: #000000;           /* 黑帽队 */
  --team-black-name: #f59e0b;  /* 黑棍队名/比分色（亮金，深底9.74:1） */
  --team-white-name: #92400e; /* 白棍队名/比分色（深琥珀，浅底6.93:1） */

  /* --- 奖牌色（排名表） --- */
  --medal-silver: #C0C0C0;
  --medal-bronze: #CD7F32;

  /* --- 字号（3级 + 1特殊时钟） --- */
  --text-sm: 13px;
  --text-base: 16px;
  --text-xl: 28px;
  --font-clock: 56px;

  /* --- 间距（5级） --- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* --- z-index 层级 --- */
  --z-fixed: 1000;             /* 固定控件（语言切换器等） */
  --z-loading: 1001;           /* Loading 遮罩 */
  --z-confirm: 10000;          /* 确认弹窗 */
  --z-toast: 10001;            /* Toast 通知（最高） */

  /* ============================================================
   * 向后兼容别名（禁止新代码使用，仅供过渡期旧代码运行）
   * 新代码必须使用上面的语义化变量名
   * ============================================================ */
  --panel: var(--surface);
  --panel-hover: var(--surface-hover);
  --blue: var(--accent);
  --red: var(--danger);
  --green: var(--success);
  --yellow: var(--warning);
  --orange: var(--highlight);
  --gray: var(--text-dim);
  --gray-light: var(--text-muted);
  --gray-lighter: var(--text-secondary);
  --gray-dark: #555555;
  --light-gray: var(--text-muted);
  --dim: var(--text-dim);
  --bg-panel: var(--surface);
}

/* ===== Global Body Styles ===== */
body {
  background: var(--bg);
  color: var(--white);
  font-family: 'AlibabaPuHuiTi', sans-serif;
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== 工具类 ===== */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted, #666); }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ===== Monospace Font ===== */
.mono, .mono span {
    font-family: 'AlibabaPuHuiTi', sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ===== Clock Display (unified) =====
 * 三个页面（裁判端/观众端/计分板）共用。
 * formatClock(t, 'html') 生成 <span class="clock-digit"> 和 <span class="clock-colon">。
 * 各页面只需覆盖 .clock 的 font-size，状态色和动画在此统一定义。
 */
.clock-digit { display: inline-block; width: 0.6em; text-align: center; }
.clock-colon { display: inline-block; width: 0.6em; text-align: center; margin: 0 0.02em; }

.clock.warning { color: var(--red); }
.clock.warning-flash { color: var(--red); animation: clock-pulse 0.8s ease-in-out infinite; }
.clock.paused { color: var(--orange); }
.clock.finished { color: var(--text-dim); }
@keyframes clock-pulse { 0%,100%{ opacity:1; } 50%{ opacity:0.4; } }

/* ===== Unified Button System =====
 * 设计规范第26章：3种变体 + 3种尺寸
 * 所有页面必须使用 btn-primary / btn-default / btn-danger
 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 8px 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.5;
    cursor: pointer;
    transition: opacity 0.2s, background 0.2s, border-color 0.2s;
    white-space: nowrap;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.btn:active { opacity: 0.8; }
.btn:disabled, .btn.btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* 主要按钮：页面核心操作（开始比赛、保存比分） */
.btn-primary {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
.btn-primary:hover { opacity: 0.85; }

/* 默认按钮：次要操作（取消、返回、编辑） */
.btn-default {
    background: var(--surface);
    color: var(--white);
    border-color: var(--border);
}
.btn-default:hover { background: var(--surface-hover); border-color: var(--border-light); }

/* 危险按钮：不可逆破坏操作（删除比赛、清空比分） */
.btn-danger {
    background: var(--danger);
    color: var(--white);
    border-color: var(--danger);
}
.btn-danger:hover { opacity: 0.85; }

/* 按钮尺寸 */
.btn-sm { padding: 4px 12px; font-size: var(--text-sm); }
.btn-lg { padding: 12px 32px; font-size: var(--text-base); }
/* 全宽按钮（登录、确认大名单等） */
.btn-block { width: 100%; }

/* ===== Toast Notification ===== */
.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); padding: 12px 28px; border-radius: 10px; color: var(--white); font-size: var(--text-base); font-weight: 700; z-index: var(--z-toast); opacity: 0; transition: opacity 0.3s; pointer-events: auto; white-space: nowrap; max-width: 90vw; cursor: default; }
.toast.show { opacity: 1; }
.toast-success { background: var(--success); color: #000; }
.toast-error { background: var(--danger); color: #fff; }
.toast-warn { background: var(--highlight); color: #000; }

/* ===== Confirm Dialog ===== */
.confirm-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7); justify-content: center; align-items: center; z-index: var(--z-confirm); }
.confirm-overlay.show { display: flex; }
.confirm-box { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 28px 32px; max-width: 400px; width: 90%; text-align: center; }
.confirm-box .confirm-msg { font-size: var(--text-base); margin-bottom: 22px; color: var(--white); line-height: 1.5; }
.confirm-box .confirm-btns { display: flex; gap: 12px; justify-content: center; }
.confirm-box .confirm-btns button { padding: 10px 32px; border: none; border-radius: 8px; font-size: var(--text-base); font-weight: 700; cursor: pointer; }
.confirm-box .btn-confirm-ok { background: var(--danger); color: var(--white); }
.confirm-box .btn-confirm-cancel { background: var(--surface-hover); color: var(--white); }

/* ===== Badge / 状态徽章 ===== */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 400;
}
.badge-scheduled { background: rgba(136, 136, 136, 0.15); color: var(--text-muted); }
.badge-live { background: rgba(255, 51, 51, 0.15); color: var(--danger); }
.badge-completed { background: rgba(51, 204, 85, 0.15); color: var(--success); }
.badge-admin { background: rgba(79, 195, 247, 0.15); color: var(--accent); }
.badge-referee { background: rgba(255, 183, 77, 0.15); color: #FFB74D; }
.badge-ck { background: rgba(129, 199, 132, 0.15); color: #81C784; }

/* ===== Language Switcher ===== */
#lang-switcher { position: fixed; top: 12px; right: 12px; z-index: var(--z-fixed); }