/* minigame.css · 统计与概率 13 关动手小游戏样式（星空星球 + 零食 + 宝箱 + 松松） */
.mg {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, #2a1466 0%, #160a36 55%, #0b0420 100%);
  color: #f3eeff;
  padding: 10px 16px 14px;
}
.mg-stars { position: absolute; inset: 0; pointer-events: none; }
.mg-star { position: absolute; background: #fff; border-radius: 50%; box-shadow: 0 0 6px #fff; animation: mgTwinkle 2.4s ease-in-out infinite; }
@keyframes mgTwinkle { 0%,100% { opacity: .25; } 50% { opacity: .9; } }
.mg-guardian { position: absolute; top: 8px; right: 14px; z-index: 6; filter: drop-shadow(0 4px 10px rgba(0,0,0,.4)); transition: transform .3s; }
.mg-guardian.mg-cheer { transform: scale(1.15) rotate(-6deg); }
.mg-prompt { font-size: 22px; font-weight: 800; text-align: center; margin: 6px 0 4px; text-shadow: 0 2px 8px rgba(0,0,0,.4); z-index: 4; }
.mg-hint { font-size: 16px; font-weight: 600; color: #c9bdf0; min-height: 24px; margin-top: 8px; text-align: center; z-index: 4; }
.mg-stage { position: relative; flex: 1; width: 100%; min-height: 360px; }
.mg-item { position: absolute; cursor: grab; user-select: none; z-index: 5; touch-action: none; }
.mg-item.dragging { cursor: grabbing; z-index: 20; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.mg-ok { animation: mgOk .5s; }
@keyframes mgOk { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.mg-bad { animation: mgShake .45s; }
@keyframes mgShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }
.mg-spark { position: absolute; font-size: 22px; transform: translate(-50%,-50%); animation: mgSpark .7s ease-out forwards; pointer-events: none; z-index: 30; }
@keyframes mgSpark { 0%{opacity:1;transform:translate(-50%,-50%) scale(.6)} 100%{opacity:0;transform:translate(-50%,-160%) scale(1.2)} }
.mg-reward { position: absolute; bottom: 10px; left: 50%; font-size: 30px; transform: translateX(-50%); animation: mgReward .9s ease-out forwards; pointer-events: none; z-index: 30; }
@keyframes mgReward { 0%{opacity:0;transform:translate(-50%,20px) scale(.5)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,-60px) scale(1.1)} }
.mg-continue { margin: 14px auto 0; display: block; }

/* 分类 bins */
.mg-bins { display: flex; gap: 26px; justify-content: center; margin: 18px 0; position: relative; z-index: 3; }
.mg-bin { width: 130px; height: 120px; border-radius: 0 0 18px 18px; border: 4px solid var(--bc, #7c6cf0); background: color-mix(in srgb, var(--bc) 18%, transparent); position: relative; }
.mg-bin-label { position: absolute; top: -30px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 16px; }
.mg-bin-mouth { position: absolute; top: 0; left: 8%; right: 8%; height: 14px; background: color-mix(in srgb, var(--bc) 50%, #000); border-radius: 0 0 12px 12px; }

/* 数据收集 */
.mg-count-wrap { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 10px; position: relative; z-index: 3; }
.mg-count-group { border: 3px solid; border-radius: 16px; padding: 10px 14px; background: rgba(255,255,255,.05); min-width: 120px; }
.mg-count-items { display: flex; gap: 2px; flex-wrap: wrap; min-height: 40px; }
.mg-count-items svg { transition: transform .2s; }
.mg-count-items svg.mg-pop { transform: scale(.4); opacity: .3; }
.mg-count-group.done { outline: 3px solid #5eead4; }
.mg-count-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; font-weight: 700; }
.mg-count-num { font-size: 22px; color: #ffd56b; }
.mg-count-slots { display: flex; gap: 18px; justify-content: center; margin-top: 14px; position: relative; z-index: 3; }
.mg-slot { width: 90px; height: 64px; border: 3px dashed #b39cff; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,.04); }
.mg-slot.filled { border-style: solid; border-color: #5eead4; }
.mg-slot-label { font-size: 13px; color: #c9bdf0; }
.mg-slot-drop { font-size: 20px; font-weight: 800; color: #ffd56b; }
.mg-num-tray { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 16px; position: relative; z-index: 5; }

/* 条形 */
.mg-axis { position: absolute; left: 16px; bottom: 60px; width: 50px; border-left: 3px solid #b39cff; border-bottom: 3px solid #b39cff; }
.mg-tick { position: absolute; left: 0; width: 14px; border-top: 1px solid rgba(179,156,255,.5); }
.mg-tick span { position: absolute; left: -22px; top: -9px; font-size: 12px; color: #b39cff; }
.mg-barfield { position: absolute; bottom: 60px; right: 24px; top: 10px; left: 90px; }
.mg-goal { position: absolute; width: 90px; height: 0; border-top: 2px dashed rgba(255,213,107,.6); }
.mg-tower { position: absolute; width: 56px; background: linear-gradient(180deg,#b39cff,#7c6cf0); border-radius: 8px 8px 0 0; display: flex; align-items: flex-start; justify-content: center; }
.mg-tower span { font-size: 14px; font-weight: 800; color: #fff; margin-top: 2px; }
.mg-bar-label { position: absolute; font-size: 14px; font-weight: 700; text-align: center; width: 90px; }

/* 折线 */
.mg-line-svg { position: absolute; left: 0; top: 0; width: 100%; }
.mg-line-field { position: absolute; inset: 0; }
.mg-pt-goal { position: absolute; width: 30px; height: 30px; margin: -15px; border: 2px dashed rgba(255,213,107,.6); border-radius: 50%; }
.mg-node { position: absolute; cursor: grab; z-index: 6; }

/* 扇形 */
.mg-pie-frame { position: absolute; left: 220px; top: 30px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.06); border: 3px solid #b39cff; }
.mg-pie-slot { position: absolute; inset: 0; border-radius: 50%; }
.mg-pie-slot.filled { background: rgba(94,234,212,.15); }
.mg-sector { position: absolute; width: 100px; height: 100px; border-radius: 50%; cursor: grab; z-index: 6; opacity: .92; }

/* 平均数 / 均分 */
.mg-pool, .mg-num-pool { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; min-height: 50px; margin: 10px 0; position: relative; z-index: 5; }
.mg-candy { cursor: grab; }
.mg-plates { display: flex; gap: 20px; justify-content: center; margin-top: 14px; position: relative; z-index: 3; }
.mg-plate { width: 110px; min-height: 80px; border: 3px solid #ffd56b; border-radius: 0 0 60px 60px; background: rgba(255,213,107,.08); padding: 8px; display: flex; flex-wrap: wrap; gap: 2px; align-content: flex-end; }
.mg-plate-label { text-align: center; font-weight: 700; font-size: 13px; }

/* 数据分析 */
.mg-analyze-chart { position: absolute; left: 60px; bottom: 70px; height: 320px; width: 560px; }
.mg-abar { position: absolute; bottom: 20px; width: 70px; background: linear-gradient(180deg,#b39cff,#7c6cf0); border-radius: 8px 8px 0 0; display: flex; justify-content: center; align-items: flex-start; }
.mg-abar span { font-weight: 800; color: #fff; margin-top: 2px; }
.mg-alabel { position: absolute; bottom: 0; width: 70px; text-align: center; font-size: 13px; font-weight: 700; }
.mg-tags { display: flex; gap: 14px; justify-content: center; margin-top: 14px; position: relative; z-index: 5; }
.mg-tag { padding: 8px 16px; border-radius: 14px; background: #ffd56b; color: #3a1f5e; font-weight: 800; cursor: grab; }
.mg-diff { color: #5eead4; font-style: normal; font-weight: 800; margin-left: 6px; }

/* 中位数众数 */
.mg-seats { display: flex; gap: 10px; justify-content: center; margin-top: 20px; position: relative; z-index: 3; }
.mg-seat { width: 56px; height: 66px; border: 3px dashed #b39cff; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.mg-seat .mg-item { position: static; }
.mg-seat .mg-item.mode-hl svg circle { stroke: #ff6b6b; stroke-width: 4; }
.mg-seat .mg-item.sel-median { outline: 4px solid #ffd56b; border-radius: 50%; }
.mg-seat .mg-item.sel-mode { outline: 4px solid #5eead4; border-radius: 50%; }
.mg-num-pool { position: absolute; bottom: 10px; left: 0; right: 0; }

/* 统计图选择 */
.mg-choose { display: flex; gap: 60px; justify-content: center; margin-top: 20px; position: relative; z-index: 3; }
.mg-choose-col { display: flex; flex-direction: column; gap: 12px; }
.mg-cc-title { text-align: center; font-weight: 800; color: #c9bdf0; }
.mg-sc { padding: 12px 16px; border: 3px solid #b39cff; border-radius: 14px; background: rgba(255,255,255,.05); cursor: pointer; max-width: 240px; font-weight: 600; }
.mg-sc.sel { border-color: #ffd56b; background: rgba(255,213,107,.15); }
.mg-sc.ok { border-color: #5eead4; opacity: .5; }
.mg-chart { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border: 3px solid #b39cff; border-radius: 14px; background: rgba(255,255,255,.05); cursor: pointer; }
.mg-chart span { font-size: 13px; font-weight: 700; }
.mg-chart.ok { border-color: #5eead4; opacity: .5; }

/* 可能性初步 */
.mg-poss-row { display: flex; align-items: center; gap: 30px; margin: 14px 0; position: relative; z-index: 3; }
.mg-ball-src { cursor: grab; }
.mg-bag { width: 70px; height: 70px; border: 3px solid #b39cff; border-radius: 16px; background: rgba(124,108,240,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; }
.mg-bag.filled { border-color: #ffd56b; }
.mg-word { padding: 10px 18px; border: 3px solid #5eead4; border-radius: 14px; font-weight: 800; }
.mg-word.ok { background: rgba(94,234,212,.2); }

/* 可能性大小 转盘 */
.mg-wheel { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 220px; height: 220px; border-radius: 50%; border: 4px solid #fff; overflow: hidden; }
.mg-wedge { position: absolute; inset: 0; border-radius: 50%; }
.mg-wedge.red { background: #ff6b6b; }
.mg-wedge.blue { background: #6b8cff; }
.mg-divider { position: absolute; left: 50%; top: 0; width: 4px; height: 50%; background: #fff; transform-origin: bottom center; cursor: grab; z-index: 5; }

/* 概率初步 */
.mg-prob-box { width: 220px; min-height: 120px; border: 4px solid #ffd56b; border-radius: 18px; background: rgba(255,213,107,.08); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: relative; z-index: 3; }
.mg-prob-balls { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; max-width: 200px; }
.mg-prob-frac { font-size: 22px; font-weight: 800; color: #ffd56b; }
.mg-prob-ctrl { display: flex; gap: 10px; margin-top: 12px; position: relative; z-index: 3; }
.mg-add, .mg-clear { padding: 8px 14px; border-radius: 12px; border: none; font-weight: 700; cursor: pointer; }
.mg-add { background: #7c6cf0; color: #fff; }
.mg-clear { background: rgba(255,255,255,.15); color: #fff; }
.mg-frac-tray { display: flex; gap: 10px; margin-top: 14px; position: relative; z-index: 5; }
.mg-frac { padding: 8px 14px; background: #ff8c5a; color: #fff; border-radius: 12px; font-weight: 800; cursor: grab; }

/* 游戏公平性 */
.mg-fair { display: flex; gap: 50px; justify-content: center; margin-top: 24px; position: relative; z-index: 3; }
.mg-fair-p { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mg-fair-name { font-weight: 800; }
.mg-fair-th { font-weight: 600; font-size: 14px; }
.mg-fair-bar { width: 40px; height: 160px; border: 3px solid var(--pc); border-radius: 8px; position: relative; display: flex; align-items: flex-end; }
.mg-fair-fill { width: 100%; background: var(--pc); transition: height .2s; }
.mg-fair-handles { position: relative; height: 50px; margin-top: 10px; }
.mg-handle { position: absolute; top: 0; cursor: grab; }

/* ===== 拖拽可用性修复（2026-08-07）=====
   1) 基于 transform 的拖拽对 static 元素也生效，但 z-index 需要非 static 定位才起作用；
   2) 高度为 0 / 只有几像素宽的元素在真机上根本抓不住，必须给出足够的命中区。 */
.mg-num, .mg-candy, .mg-tag, .mg-frac, .mg-ball-src, .mg-bag { position: relative; }
.mg .dragging { z-index: 40; filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }

/* 条形塔：初始高度 0 时没有任何可抓区域，给一个握把 */
.mg-tower { min-height: 26px; }
.mg-tower::before {
  content: ''; position: absolute; left: -6px; right: -6px; top: -14px; height: 28px;
  border-radius: 10px; background: rgba(255,213,107,.28); border: 2px dashed rgba(255,213,107,.75);
}

/* 转盘分界线：本体只有 4px，向两侧扩出透明命中区 */
.mg-divider::before { content: ''; position: absolute; left: -16px; right: -16px; top: 0; bottom: 0; }

/* 折线星点 / 数字球：加大手感 */
.mg-node { padding: 4px; }
.mg-num { cursor: grab; }