/* 娃娃机（cl1.js）· 视觉对标参考图：金属银框机身 + 蓝天玻璃窗 + 满机礼盒堆 + 大摇杆控制台 */

.clw-wrap { max-width: 430px; margin: 0 auto; }

/* ===== 顶栏：logo 胶囊 + 资源 chips ===== */
.clw-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.clw-logo {
  flex: 1; text-align: center; font-weight: 900; font-size: 16px; color: #FFF;
  background: linear-gradient(180deg, #FF9DBE, #F06C9F);
  border: 2px solid #E4578E; border-radius: 999px; padding: 6px 14px;
  box-shadow: 0 3px 8px rgba(240, 108, 159, .35), inset 0 2px 3px rgba(255,255,255,.5);
  text-shadow: 0 1px 2px rgba(180, 50, 100, .4);
}
.clw-chips { display: flex; gap: 6px; }
.clw-chip {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 800; white-space: nowrap;
  border-radius: 999px; padding: 4px 10px;
}
.clw-chip.coin { background: linear-gradient(180deg, #FFF3C4, #FFD268); border: 2px solid #F5B940; color: #7A4E00; }
.clw-chip.play { background: linear-gradient(180deg, #E3F2FF, #BFE0FF); border: 2px solid #7FB5E8; color: #1D5E96; }

/* ===== 机身：金属银框 ===== */
.clw-machine { position: relative; }  /* 侧钮叠在机身右缘上，无需额外预留条（曾留 46px 致右侧不对齐） */
.clw-cab {
  position: relative;
  background: linear-gradient(160deg, #FDFEFF 0%, #E8EFF6 40%, #C9D6E4 100%);
  border: 2px solid #AEBFD0; border-radius: 26px; padding: 10px;
  box-shadow: 0 10px 24px rgba(140, 160, 185, .35), inset 0 2px 4px rgba(255,255,255,.9);
}

/* 玻璃窗：蓝天白云 + 雪白地台 */
.clw-glass {
  position: relative; height: 300px; overflow: hidden;
  background: linear-gradient(180deg, #A9D8FF 0%, #C9E9FF 45%, #E9F7FF 70%, #FDFEFF 71%, #F3F8FC 100%);
  border-radius: 18px; border: 3px solid #FFFFFF;
  box-shadow: inset 0 0 0 2px #D7E3EE, inset 0 6px 14px rgba(90, 130, 170, .25);
}
/* 2D 场景（SVG 整块画布：天空 / 云 / 地台 / 玩偶 / 爪子） */
.clw-scene { display: block; width: 100%; height: 100%; }
.clw-cloud { animation: clwDrift 30s linear infinite alternate; }
@keyframes clwDrift { from { transform: translateX(-10px); } to { transform: translateX(16px); } }
.clw-shine {
  position: absolute; top: -40px; right: -30px; width: 140px; height: 230px;
  background: linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  transform: rotate(30deg); border-radius: 50px; pointer-events: none;
}

/* 机械爪：位置 --x / 深度缩放 --s / 下爪 --dy（SVG 内 CSS transform，单位为 viewBox 用户单位） */
.clw-claw-g {
  transform: translate(var(--x, 0px), var(--dy, 0px)) scale(var(--s, 1));
  transform-box: view-box; transform-origin: 190px 24px;
  transition: transform .5s cubic-bezier(.3, 1.3, .6, 1);
}
.clw-claw-g.live { transition: none; }
.clw-claw-g.down { transition: transform .62s cubic-bezier(.35, .05, .6, 1); }
.clw-caught { opacity: 0; }
.clw-claw-g.down .clw-caught { animation: clwCatch 1.6s ease forwards; }
@keyframes clwCatch {
  0% { opacity: 0; transform: translateY(0) scale(.6); }
  50% { opacity: 0; transform: translateY(60px) scale(.6); }
  62% { opacity: 1; transform: translateY(62px) scale(1); }
  100% { opacity: 1; transform: translateY(-40px) scale(1); }
}

/* 玻璃底部提示条（对标参考图「摇杆移动爪位」） */
.clw-hintbar {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 6;
  text-align: center; font-size: 12px; font-weight: 800; color: #5B7A95;
  background: rgba(255,255,255,.88); border: 1.5px solid #D7E3EE; border-radius: 999px;
  padding: 5px 10px; backdrop-filter: blur(2px);
}

/* 侧边圆形功能钮（对标参考图右侧三钮；收在机身右缘预留条内，窄屏不出屏） */
.clw-side {
  position: absolute; right: 0px; top: 22px; z-index: 7;
  display: flex; flex-direction: column; gap: 10px;
}
.clw-sbtn {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(180deg, #FFB8CF, #F06C9F);
  border: 2.5px solid #FFF; box-shadow: 0 4px 10px rgba(240, 108, 159, .4);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #FFF; line-height: 1.05;
}
.clw-sbtn:active { transform: scale(.94); }
.clw-sbtn .ic { font-size: 17px; font-weight: 900; }
.clw-sbtn .lb { font-size: 9px; font-weight: 800; text-shadow: 0 1px 2px rgba(180,50,100,.4); }

/* ===== 全屏沉浸层（对标钓鱼场 .ffs：盖住顶栏/底栏；手机平板自适应） ===== */
.clw-fs {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 40;
  overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FFE9F1 0%, #FFDCE9 55%, #FFD0E0 100%);
}
.clw-fs-top {
  display: flex; align-items: center; gap: 8px;
  width: 100%; max-width: 560px; margin: 0 auto;   /* 平板上限宽与机身对齐 */
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
}
.clw-chip.back {
  background: #FFF; border: 2px solid #FFC9DC; color: #B3487A; cursor: pointer;
}
.clw-fs-mid {
  flex: 1; min-height: 0; position: relative;
  display: flex; align-items: stretch; justify-content: center;
  padding: 2px 10px;
}
/* 机身撑满中部；平板/宽屏限宽居中（左右对齐自适应） */
.clw-fs-mid .clw-machine {
  width: 100%; max-width: 560px; display: flex; flex-direction: column;
}
.clw-fs-mid .clw-cab { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.clw-glass { flex: 1; min-height: 0; height: auto; }
.clw-scene { display: block; width: 100%; height: 100%; }

.clw-fs-deck {
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
}
.clw-deck-inner {
  max-width: 536px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(180deg, #FFF3F8, #FFE3EE);
  border: 3px solid #F79EC0; border-radius: 26px; padding: 12px 16px;
  box-shadow: 0 6px 16px rgba(247, 158, 192, .3);
}

/* ===== 控制台元件（摇杆随屏幕自适应） ===== */
.clw-deck { display: flex; align-items: center; gap: 16px; margin-top: 14px;
  background: linear-gradient(180deg, #FFF3F8, #FFE3EE);
  border: 3px solid #F79EC0; border-radius: 26px; padding: 16px 18px;
  box-shadow: 0 6px 16px rgba(247, 158, 192, .3);
}
.clw-stick-base {
  position: relative; flex: 0 0 auto;
  width: clamp(76px, 21vmin, 104px); height: clamp(76px, 21vmin, 104px); border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #F2F6FA, #C4D2E0 78%, #AEBFD0);
  border: 3px solid #9FAEC0; box-shadow: inset 0 4px 10px rgba(90, 120, 150, .4), 0 4px 10px rgba(140,160,185,.3);
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.clw-stick-base.drag { cursor: grabbing; }
.clw-stick-base .tick {
  position: absolute; left: 50%; top: 4px; width: 0; height: 50%; margin-left: -1px;
  transform-origin: 50% calc(100% - 4px); pointer-events: none;
}
.clw-stick-base .tick::before {
  content: '▲'; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  font-size: 9px; color: #9FAEC0;
}
.clw-knob {
  position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px;
  background: radial-gradient(circle at 36% 30%, #FFD7E5, #F06C9F 68%, #D9477F);
  border-radius: 50%; border: 2px solid #E4578E;
  box-shadow: 0 5px 10px rgba(200, 70, 120, .45), inset 0 -3px 6px rgba(170, 40, 90, .35);
  transition: transform .25s cubic-bezier(.3, 1.4, .6, 1);
  pointer-events: none;
}
.clw-knob i {
  position: absolute; left: 30%; top: 18%; width: 12px; height: 12px;
  background: rgba(255,255,255,.9); border-radius: 50%;
  filter: blur(1px);
}
.clw-go {
  flex: 1; padding: 22px 0; font-size: 24px; font-weight: 900; letter-spacing: 6px; color: #FFF;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.14) 0 10px, rgba(255,255,255,0) 10px 20px), linear-gradient(180deg, #FFB84D, #FF8A3D);
  border: 3px solid #F07A26; border-radius: 22px;
  box-shadow: 0 6px 0 #E06A1A, 0 12px 20px rgba(240, 122, 38, .35);
  text-shadow: 0 2px 3px rgba(160, 70, 0, .35);
}
.clw-go:active { transform: translateY(4px); box-shadow: 0 2px 0 #E06A1A; }
.clw-go.busy { filter: saturate(.5) brightness(1.05); }

/* ===== 结算浮层（全屏居中） ===== */
.clw-result {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(330px, 86%); z-index: 12; text-align: center; padding: 18px;
  background: #FFF; border: 3px dashed #FFC9DC; border-radius: 20px;
  box-shadow: 0 14px 34px rgba(180, 60, 110, .3);
}
.clw-result.win { border-style: solid; border-color: #F5B940; background: linear-gradient(180deg, #FFF9E8, #FFF); }
.clw-prize-emoji { font-size: 46px; line-height: 1; }
.clw-prize-name { font-weight: 800; font-size: 16px; margin-top: 6px; color: #B3487A; }

/* ===== 战利品浮层（底部滑出） ===== */
.clw-wonlay {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  width: min(380px, 94%); z-index: 12; text-align: left;
  background: rgba(255,255,255,.96); border: 2px solid #FFC9DC; border-radius: 16px;
  padding: 10px 12px; box-shadow: 0 10px 24px rgba(180, 60, 110, .25);
}
.clw-won-title { font-weight: 800; font-size: 13px; color: #B3487A; margin-bottom: 6px; }
.clw-wonlist { display: flex; flex-wrap: wrap; gap: 6px; }
.clw-won {
  font-size: 12px; font-weight: 700; color: #A64D79;
  background: #FFF0F6; border: 1.5px solid #FFC9DC; border-radius: 999px; padding: 3px 10px;
}