/* Bé khám phá STEAM */
/* ---------- 6 cánh cửa, danh sách hoạt động ---------- */
.sm-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 2.2vmin, 18px); width: min(860px, 100%); }
.sm-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 2.2vmin, 18px); width: min(860px, 100%); }
.sm-acts .sm-door { width: clamp(150px, 26vmin, 220px); }
.sm-door { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; min-height: 64px;
  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); }
.sm-door b { font-size: clamp(15px, 2.6vmin, 21px); line-height: 1.15; color: var(--d); text-align: center; }
.sm-door small { font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.sm-door.picked { animation: bump .45s ease; }
.sm-head { display: inline-flex; align-items: center; gap: 8px; padding: 6px 18px 6px 8px; border: 4px solid var(--c); }
.sm-head b { font-size: clamp(18px, 3vmin, 24px); color: var(--d); }

/* ---------- Vật nổi hay chìm ---------- */
.sf-field { position: relative; width: min(520px, 100%); aspect-ratio: 16 / 10; flex: 0 1 auto; max-height: 46vh; }
.sf-tank { position: absolute; left: 6%; right: 6%; bottom: 0; height: 62%; border-radius: 10px 10px 36px 36px;
  border: 5px solid rgba(255, 255, 255, .9); border-top: 0; background: rgba(255, 255, 255, .35); overflow: hidden;
  box-shadow: 0 10px 22px rgba(30, 80, 140, .2), inset 0 -8px 0 rgba(0, 0, 0, .05); }
.sf-water { position: absolute; left: 0; right: 0; bottom: 0; height: 78%; background: linear-gradient(#7fd0ff, #3a9be6);
  box-shadow: inset 0 6px 0 rgba(255, 255, 255, .55); }
.sf-tank.splash .sf-water { animation: sfSplash .6s ease; }
@keyframes sfSplash { 30% { transform: translateY(-6%) scaleY(1.04); } 60% { transform: translateY(2%); } }
.sf-obj { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 2; transition: top .45s cubic-bezier(.5, 0, .9, .6); }
.sf-obj .pic.ch { --s: min(26vmin, 130px); }
.sf-obj.drop.float { top: 24%; animation: sfBob 1.6s ease-in-out .5s infinite; }
.sf-obj.drop.sink { top: 58%; transition: top 1.3s cubic-bezier(.3, .2, .4, 1); }
@keyframes sfBob { 50% { transform: translateX(-50%) translateY(6%) rotate(4deg); } }
.sf-choices { display: flex; justify-content: center; gap: clamp(16px, 4vmin, 40px); }
.sf-pick { padding: 10px; min-width: 96px; min-height: 96px; border: 5px solid #3aa0ff; box-shadow: 0 7px 0 #1d6fd1, 0 14px 22px rgba(0, 0, 0, .14); }
.sf-pick.sel { border-color: #ff9f1c; box-shadow: 0 7px 0 #d97706, 0 0 0 5px rgba(255, 159, 28, .35); }
.sf-pick.fade { opacity: .45; transform: scale(.94); }
.sf-mini { position: relative; display: block; width: clamp(70px, 13vmin, 110px); aspect-ratio: 1; border-radius: 8px 8px 22px 22px;
  border: 4px solid #9cc9ee; border-top: 0; background: linear-gradient(transparent 30%, #7fd0ff 30%, #3a9be6); overflow: hidden; }
.sf-mini i { position: absolute; left: 50%; width: 34%; aspect-ratio: 1; margin-left: -17%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, #ffcf4a 40%, #f0a100); box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.sf-mini.up i { top: 16%; }
.sf-mini.down i { bottom: 6%; }
.sf-mini.up::after, .sf-mini.down::after { content: '⬆'; position: absolute; right: 4px; top: 2px; font-size: 18px; color: #1d6fd1; }
.sf-mini.down::after { content: '⬇'; }

/* ---------- Lập trình cho Gấu Mì ---------- */
.sc-grid { position: relative; display: grid; grid-template-columns: repeat(var(--cols), 1fr); grid-template-rows: repeat(var(--rows), 1fr);
  gap: 6px; width: min(560px, 100%, calc(46vh * var(--cols) / var(--rows))); aspect-ratio: var(--cols) / var(--rows);
  padding: 8px; border-radius: 22px; background: #8fd16f; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .1), 0 10px 20px rgba(0, 0, 0, .12); }
.sc-cell { border-radius: 14px; background: rgba(255, 255, 255, .35); }
.sc-cell.hint { background: rgba(255, 210, 60, .75); box-shadow: inset 0 0 0 3px #fff; animation: pulse 1.2s ease-in-out infinite; }
.sc-item { position: absolute; left: 8px; top: 8px; width: calc((100% - 16px - (var(--cols) - 1) * 6px) / var(--cols)); aspect-ratio: 1;
  transform: translate(calc(var(--x) * (100% + 6px)), calc(var(--y) * (100% + 6px))); display: grid; place-items: center; }
.sc-grid .sc-item { height: calc((100% - 16px - (var(--rows) - 1) * 6px) / var(--rows)); aspect-ratio: auto; }
.sc-item .pic.md { --s: 72%; width: 72%; height: 72%; }
.sc-bear { z-index: 2; transition: transform .55s ease-in-out; }
.sc-bear img { width: 118%; height: 118%; object-fit: contain; margin-top: -12%; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .2)); }
.sc-bear.flip img { transform: scaleX(-1); }
.sc-goal .pic { animation: pulse 1.6s ease-in-out infinite; } /* nhấp nháy phần hình, không đè vị trí ô */
.sc-prog { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; min-height: 64px; min-width: min(420px, 100%); padding: 6px 10px; }
.sc-step { width: 52px; height: 52px; border: 0; border-radius: 14px; background: #eaf4ff; font-size: 28px; cursor: pointer; box-shadow: 0 4px 0 #b9d4f0; }
.sc-step.cur { background: #ffcf4a; transform: translateY(-4px); }
.sc-empty { opacity: .5; }
.sc-arrow { font-size: 30px; }

/* ---------- Kỹ sư tí hon ---------- */
.sb-field { position: relative; width: min(560px, 100%); aspect-ratio: 16 / 10; max-height: 46vh; border-radius: 22px; overflow: hidden;
  background: linear-gradient(#cfefff, #eaf8ff); box-shadow: 0 10px 20px rgba(0, 0, 0, .1); }
.sb-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 12%; background: #7bd477; box-shadow: inset 0 5px 0 #96e08f; }
.sb-stack { position: absolute; left: 0; right: 0; bottom: 12%; display: flex; flex-direction: column-reverse; align-items: center; }
.sb-on { display: block; width: calc(var(--w) * 1%); height: clamp(22px, 6vmin, 40px); border-radius: 10px; background: var(--c);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .18), inset 0 4px 0 rgba(255, 255, 255, .35); }
.sb-on.drop { animation: sbDrop .4s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes sbDrop { from { transform: translateY(-160%); opacity: 0; } }
.sb-stack.fall { animation: sbFall 1s ease-in forwards; transform-origin: 30% 100%; }
@keyframes sbFall { 30% { transform: rotate(-6deg); } 100% { transform: rotate(-80deg) translateY(10%); opacity: .2; } }
.sb-star { position: absolute; left: 50%; bottom: calc(12% + var(--h) * clamp(22px, 6vmin, 40px) + 6px); transform: translateX(-50%); opacity: .55; }
.sb-tray { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 10px; width: min(560px, 100%); min-height: 64px; }
.sb-block { width: calc(var(--w) * 3px); height: 56px; min-width: 64px; border: 0; border-radius: 12px; background: var(--c); cursor: pointer;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .2), inset 0 -6px 0 rgba(0, 0, 0, .15), inset 0 4px 0 rgba(255, 255, 255, .35); animation: pop .4s ease backwards; }
.sb-block:active { transform: translateY(3px); }
/* cầu */
.sb-field.bridge { --gap: 30; }
.sb-bank { position: absolute; bottom: 0; height: 44%; width: calc((100% - var(--gap) * 1%) / 2); background: #7bd477; box-shadow: inset 0 6px 0 #96e08f; }
.sb-bank.l { left: 0; border-radius: 0 14px 0 0; }
.sb-bank.r { right: 0; border-radius: 14px 0 0 0; }
.sb-river { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: linear-gradient(#7fd0ff, #3a9be6); }
.sb-field.splash .sb-river { animation: sfSplash .6s ease; }
.sb-plank-on { position: absolute; left: 50%; bottom: 44%; width: calc(var(--len, 0) * 1%); height: 14px; transform: translate(-50%, -160%); opacity: 0;
  border-radius: 6px; background: #c98a3d; box-shadow: inset 0 -4px 0 #9a6526; transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), opacity .2s; }
.sb-plank-on.show { opacity: 1; transform: translate(-50%, 0); }
.sb-plank-on.fall { transform: translate(-50%, 260%) rotate(18deg); opacity: .4; transition: transform .7s ease-in, opacity .7s; }
.sb-car { position: absolute; left: 3%; bottom: 44%; transition: left 1.4s ease-in-out; }
.sb-car .pic.md { --s: clamp(46px, 9vmin, 70px); }
.sb-car.go { left: calc(100% - 3% - clamp(46px, 9vmin, 70px)); }
.sb-plank { padding: 12px 10px; min-width: 64px; min-height: 64px; display: grid; place-items: center; animation: pop .4s ease backwards; animation-delay: calc(var(--k) * .06s); }
.sb-plank i { display: block; width: calc(var(--len) * 4px); height: 14px; border-radius: 6px; background: #c98a3d; box-shadow: inset 0 -4px 0 #9a6526; }
.sb-plank.fade { opacity: .4; }

@media (orientation: landscape) and (max-height: 520px) {
  .sm-doors { gap: 8px; }
  .sm-door { padding: 4px; }
  .sm-door .pic.lg { --s: 13vh; }
  .sm-door small { display: none; }
  .sf-field, .sb-field { max-height: 40vh; }
  .sf-pick { min-width: 70px; min-height: 70px; padding: 4px; }
  .sf-mini { width: 54px; }
  .sc-grid { width: min(100%, calc(40vh * var(--cols) / var(--rows))); }
  .sc-prog { min-height: 52px; padding: 2px 6px; }
  .sc-step { width: 40px; height: 40px; font-size: 22px; }
  .sb-block { height: 44px; }
}
@media (orientation: portrait) {
  .sm-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sm-door { padding: 8px 4px; }
  .sm-door .pic.lg { --s: 52px; }
  .sm-door small { font-size: 11px; }
  .sf-field, .sb-field { max-height: 32vh; }
  .sc-grid { width: min(100%, calc(30vh * var(--cols) / var(--rows))); }
  .sb-block { width: calc(var(--w) * 1.5px); }
}