/* Bắt chữ cùng Gấu Mì */
/* Chọn mức */
.ct-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2.4vmin, 20px); width: min(760px, 100%); }
.ct-lv { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 5px solid var(--c);
  box-shadow: 0 8px 0 var(--d), 0 16px 26px rgba(0, 0, 0, .16), inset 0 3px 0 #fff; animation: pop .4s ease backwards; animation-delay: calc(var(--k) * .06s); }
.ct-lv b { font-size: clamp(17px, 3vmin, 24px); color: var(--d); }
.ct-lv small { font-size: 13px; color: var(--ink-soft); }
.ct-lv.picked { animation: bump .45s ease; }

/* Gấu Mì siêu nhân: khung ảnh vuông cố định (để tính vị trí bàn tay bắn tơ)
   .ct-nhen đứng yên · .ct-body đu dây / nghiêng (quanh điểm treo) · .ct-pose nhún / lật · 2 ảnh chồng mờ dần khi đổi tư thế */
.ct-nhen { --ns: clamp(92px, 17vmin, 150px); display: inline-block; width: var(--ns); height: var(--ns); }
.ct-body { display: block; width: 100%; height: 100%; transform-origin: 50% 0; animation: ctSwing 3s ease-in-out infinite; will-change: transform; }
.ct-pose { position: relative; display: block; width: 100%; height: 100%; transform-origin: 50% 80%; transition: transform .22s ease; }
.ct-pose.flip { transform: scaleX(-1); }
.ct-pose img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .11s ease;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); pointer-events: none; }
.ct-pose img.on { opacity: 1; }
/* nhịp nhún khi đổi tư thế (giữ hướng lật bằng biến --fx) */
.ct-pose { --fx: 1; }
.ct-pose.flip { --fx: -1; }
.ct-pose.squash { animation: ctSquash .32s ease-out; }
.ct-pose.recoil { animation: ctRecoil .3s ease-out; }
.ct-pose.hop { animation: ctHop .55s cubic-bezier(.3, 1.6, .5, 1); }
.ct-pose.shake { animation: ctShake .4s ease-in-out; }
@keyframes ctSquash { 40% { transform: scale(calc(var(--fx) * 1.06), .94); } 100% { transform: scale(var(--fx), 1); } }
@keyframes ctRecoil { 30% { transform: scale(var(--fx), 1) translateY(-6px) rotate(calc(var(--fx) * -4deg)); } 100% { transform: scale(var(--fx), 1); } }
@keyframes ctHop { 0% { transform: scale(var(--fx), 1); } 35% { transform: scale(var(--fx), 1) translateY(-14%); } 70% { transform: scale(calc(var(--fx) * 1.05), .95); } 100% { transform: scale(var(--fx), 1); } }
@keyframes ctShake { 25% { transform: scale(var(--fx), 1) translateX(-5px); } 75% { transform: scale(var(--fx), 1) translateX(5px); } }
/* ô chữ vừa nhận chữ bay tới: nảy nhẹ */
.ct-slots i.land { animation: ctLand .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ctLand { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
.ct-fly { z-index: 60; pointer-events: none; animation: none !important; will-change: transform; }
/* màn chọn mức: một ảnh, đung đưa */
.ct-hero .ct-nhen { --ns: clamp(130px, 26vmin, 220px); }
.ct-hero .ct-nhen img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 0; animation: ctSwing 3.4s ease-in-out infinite; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); }
/* bắt đầu và kết thúc ở 0° để nối liền với lúc nghiêng bắn tơ */
@keyframes ctSwing { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }

/* Ô từ: hình + các ô chữ */
.ct-word { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 8px; }
.ct-word.whole { animation: bump .7s ease; box-shadow: 0 8px 0 #22a454, 0 0 0 6px var(--good); }
.ct-slots { display: flex; gap: 6px; }
.ct-slots i { width: clamp(38px, 7vmin, 56px); height: clamp(44px, 8vmin, 64px); border-radius: 12px; border: 3px dashed #c3cfdf; display: grid; place-items: center;
  font: 800 clamp(26px, 5vmin, 40px)/1 var(--font); font-style: normal; color: #2c5d86; }
.ct-slots i.on { border: 3px solid var(--good); background: #effbf3; animation: pop .35s ease; }
.ct-slots i.cur { border-color: #ff9f1c; background: #fff8e8; animation: pulse 1.2s ease-in-out infinite; }
.ct-slots i.hint, .ct-slots i.rest { color: #c8d3e0; }
.ct-slots i.rest { border-style: solid; border-color: #e3ebf5; }

/* Sân chơi: tơ nhện + chữ cái lơ lửng */
.ct-field { position: relative; flex: 1; width: 100%; min-height: 220px; border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .12) 70%); cursor: crosshair; touch-action: manipulation; }
.ct-top { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 3; }
.ct-top::before { content: ''; position: absolute; left: 50%; top: -40px; height: 40px; border-left: 2px solid rgba(255, 255, 255, .9); }
.ct-web { position: absolute; z-index: 2; width: 3px; height: 0; margin-left: -1.5px; transform-origin: 50% 0; pointer-events: none;
  background: linear-gradient(#fff, #e9eef5); box-shadow: 0 0 0 1px rgba(120, 140, 170, .35); border-radius: 2px; }
.ct-field .ct-web { position: absolute; }
.ct-field { --sz: clamp(64px, 12vmin, 96px); }
.ct-letter { position: absolute; width: var(--sz); height: var(--sz); margin: 0; padding: 0; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; z-index: 1;
  background: radial-gradient(circle at 32% 28%, #fff 0 10%, color-mix(in srgb, var(--c) 30%, white) 40%, color-mix(in srgb, var(--c) 70%, white));
  box-shadow: 0 6px 0 color-mix(in srgb, var(--c) 70%, black), 0 12px 18px rgba(0, 0, 0, .15), inset 0 -4px 0 rgba(0, 0, 0, .06);
  animation: pop .4s ease backwards, ctBob 3s ease-in-out infinite; animation-delay: calc(var(--k) * .07s), calc(var(--k) * .3s);
  transition: transform .34s ease-in, opacity .34s; }
.ct-letter b { font: 800 clamp(32px, 6.4vmin, 52px)/1 var(--font); color: color-mix(in srgb, var(--c) 75%, black); pointer-events: none; }
.ct-letter.wrong { animation: shake .45s ease; opacity: .55; }
/* chữ bị bắt đi theo đầu tơ từng khung hình (requestAnimationFrame) → tắt transition, không làm mờ */
.ct-letter.caught { animation: none; transition: none; z-index: 4; }
@keyframes ctBob { 50% { translate: 0 -6px; } }

@media (orientation: portrait) {
  /* thanh trên: chấm tiến độ xuống dòng riêng để ô từ 5 chữ + nút nghe vừa bề ngang */
  .catcher .game-top { flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
  .catcher .game-top .dots { width: 100%; justify-content: center; }
  .ct-levels { grid-template-columns: 1fr; width: min(320px, 100%); }
  .ct-lv { flex-direction: row; justify-content: flex-start; gap: 10px; padding: 8px 12px; }
  .ct-lv .pic.lg { --s: 52px; }
  .ct-word { padding: 4px 8px 4px 4px; gap: 6px; }
  .ct-word .pic.md { --s: 40px; }
  .ct-slots { gap: 4px; }
  .ct-slots i { width: 34px; height: 40px; font-size: 24px; }
}
@media (orientation: portrait) and (max-width: 380px) {
  .ct-slots i { width: 30px; height: 36px; font-size: 21px; border-width: 2px; }
  .ct-word .pic.md { --s: 32px; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .ct-levels { gap: 8px; }
  .ct-lv { padding: 6px; }
  .ct-lv .pic.lg { --s: 13vh; }
  .ct-hero .ct-nhen { --ns: 26vh; }
  .ct-word .pic.md { --s: 36px; }
  .ct-slots i { width: 36px; height: 40px; font-size: 26px; }
  .ct-field { min-height: 0; }
  .ct-field { --sz: 52px; }
  .ct-letter b { font-size: 30px; }
  .ct-top .ct-nhen { --ns: 72px; }
}