/*
 * ============================================
 * 浮动组件层 (Widget Layer) 样式
 * ============================================
 * 可拖拽 / 可缩放 / 可收起 / 可关闭 的浮动面板
 * 右上角「🧩 组件」按钮统一切换
 */

/* ===== 组件层容器 ===== */
.widget-layer {
  position: fixed;
  inset: 0;
  z-index: 60;               /* 低于弹窗(1000)/特效(500)/toast(600/700) */
  pointer-events: none;      /* 层本身不拦截事件 */
}

.game-widget {
  position: absolute;
  pointer-events: auto;      /* 面板本身可交互 */
  display: flex;
  flex-direction: column;
  min-width: 200px;
  min-height: 130px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  color: var(--text-primary);
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.game-widget.dragging {
  transition: none;
  box-shadow: var(--glass-shadow-lg);
  border-color: var(--glass-border-strong);
}

.game-widget.collapsed .widget-body {
  display: none;
}

.game-widget.collapsed {
  min-height: 0;
}

/* ===== 标题栏（拖拽手柄） ===== */
.widget-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: move;
  background: linear-gradient(135deg, rgba(244, 208, 63, 0.18), rgba(244, 208, 63, 0.04));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  user-select: none;
  flex: 0 0 auto;
  touch-action: none;
}

.widget-icon { font-size: 0.95rem; }

.widget-title {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--accent-gold);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-actions { display: flex; gap: 4px; }

.widget-btn {
  width: 20px;
  height: 20px;
  line-height: 1;
  border: none;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: inherit;
}

.widget-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* ===== 内容区 ===== */
.widget-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px;
  font-size: 0.8rem;
}

/* ===== 缩放手柄 ===== */
.widget-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  touch-action: none;
  background: linear-gradient(135deg, transparent 48%, rgba(244, 208, 63, 0.55) 48%);
  border-bottom-right-radius: 12px;
}

/* ===== 顶部栏右侧集群 + 选择器 ===== */
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.widget-menu-wrap { position: relative; }

.widget-menu-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(244, 208, 63, 0.15);
  border: 1px solid rgba(244, 208, 63, 0.45);
  border-radius: 20px;
  color: var(--accent-gold);
  font-size: 0.8rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}

.widget-menu-btn:hover,
.widget-menu-btn.active {
  background: rgba(244, 208, 63, 0.3);
}

.widget-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 208px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--glass-shadow-lg);
  padding: 8px;
  display: none;
  z-index: 200;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.widget-menu.open { display: block; }

.widget-menu-title {
  font-size: 0.72rem;
  color: var(--text-secondary);
  padding: 2px 6px 8px;
  letter-spacing: 1px;
}

.widget-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.15s;
}

.widget-menu-item:hover { background: rgba(255, 255, 255, 0.08); }

.widget-menu-item .wm-icon { font-size: 0.9rem; }

.widget-menu-item .wm-label { flex: 1; }

.widget-menu-item .wm-switch {
  width: 30px;
  height: 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  transition: background 0.2s;
  flex: 0 0 auto;
}

.widget-menu-item .wm-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}

.widget-menu-item.on .wm-switch { background: var(--accent-green); }
.widget-menu-item.on .wm-switch::after { left: 16px; }

.widget-menu-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 8px 4px;
}

.widget-menu-reset {
  width: 100%;
  padding: 7px;
  border-radius: 7px;
  cursor: pointer;
  background: rgba(52, 152, 219, 0.2);
  border: 1px solid rgba(52, 152, 219, 0.4);
  color: #7fb8ff;
  font-family: inherit;
  font-size: 0.8rem;
  transition: all 0.2s;
}

.widget-menu-reset:hover { background: rgba(52, 152, 219, 0.35); }

/* ===== 记牌器 ===== */
.counter-legend {
  font-size: 0.68rem;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.counter-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.counter-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 2px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s;
}

.counter-cell .cc-rank { font-size: 0.82rem; font-weight: bold; }
.counter-cell .cc-num { font-size: 0.72rem; color: var(--text-secondary); }

.counter-cell.gone { opacity: 0.3; }

.counter-cell.hot {
  border-color: rgba(231, 76, 60, 0.6);
  background: rgba(231, 76, 60, 0.16);
}

.counter-cell.hot .cc-num { color: #ff8a80; }

/* ===== 倍数与分数 ===== */
.mult-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.mult-row span { color: var(--accent-gold); font-weight: bold; }

.mult-row.total {
  border-bottom: none;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.88rem;
}

.mult-row.total span { color: var(--accent-green); font-size: 1.05rem; }

/* ===== 牌型速查 ===== */
.handref-item {
  padding: 5px 7px;
  border-radius: 6px;
  margin-bottom: 2px;
}

.handref-item:nth-child(odd) { background: rgba(255, 255, 255, 0.04); }

.handref-name {
  color: var(--accent-gold);
  font-weight: bold;
  font-size: 0.78rem;
}

.handref-desc { color: var(--text-secondary); font-size: 0.72rem; }


/* ===== 桌面装饰牌堆已移除（改由发牌动画中央牌堆替代） ===== */