/* Hoppitree: Science Lab game styles. Prefix every class with the game id. */

/* ---------- shared by Sink or Float and Magnet Lab ---------- */
.sinkfloat-stage, .magnets-stage { gap: clamp(10px, 2.2vh, 22px); padding: clamp(10px, 2vh, 18px); }
.sinkfloat-stage { background: linear-gradient(180deg, rgba(228, 246, 255, .8), rgba(190, 228, 255, .65)); }
.magnets-stage { background: linear-gradient(180deg, rgba(255, 244, 238, .85), rgba(255, 226, 214, .7)); }
.sinkfloat-art, .magnets-art { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; line-height: 1; }
.sinkfloat-art svg, .magnets-art svg { display: block; width: 1em; height: 1em; filter: drop-shadow(0 3px 3px rgba(29, 43, 83, .18)); }

.choices.sinkfloat-opts, .choices.magnets-opts { gap: clamp(12px, 2.4vw, 28px); }
.choices.sinkfloat-opts .choice, .choices.magnets-opts .choice { min-width: clamp(112px, 15vw, 170px); min-height: clamp(92px, min(17vh, 26vw), 160px); padding: 10px 14px; }
.choices.sinkfloat-opts .pic-emo, .choices.magnets-opts .pic-emo { font-size: clamp(40px, min(9vh, 15vw), 80px); }
.choices.sinkfloat-opts .pic-word, .choices.magnets-opts .pic-word { font-size: clamp(17px, 2.7vh, 22px); text-align: center; line-height: 1.15; }
.choices.sinkfloat-words .choice, .choices.magnets-words .choice { max-width: 200px; }
.choices.sinkfloat-words .pic-emo, .choices.magnets-words .pic-emo { font-size: clamp(34px, 6vh, 54px); }

/* drag things into two groups */
.sinkfloat-sort, .magnets-sort { align-self: stretch; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 2vh, 18px); }
.sinkfloat-tray, .magnets-tray { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: clamp(8px, 1.6vw, 18px); }
.sinkfloat-drag, .magnets-drag { position: relative; z-index: 2; font-size: clamp(43px, min(8vh, 11vw), 64px); width: 1.5em; height: 1.5em; display: grid; place-items: center; background: #fff; border-radius: 26%; box-shadow: 0 8px 14px rgba(29, 43, 83, .16); cursor: grab; touch-action: none; transition: transform .25s cubic-bezier(.2, 1.4, .4, 1); }
.sinkfloat-drag.held, .magnets-drag.held { transition: none; z-index: 10; cursor: grabbing; box-shadow: 0 20px 30px rgba(29, 43, 83, .28); }
.sinkfloat-drag.placed, .magnets-drag.placed { font-size: var(--ps); width: 1.2em; height: 1.2em; background: none; box-shadow: none; cursor: default; animation: popIn .4s cubic-bezier(.2, 1.6, .4, 1); }
.sinkfloat-bins, .magnets-bins { flex: 0 1 clamp(170px, 44vh, 400px); min-height: 120px; display: flex; justify-content: center; gap: clamp(10px, 3vw, 40px); }
.sinkfloat-bin, .magnets-bin { --ps: clamp(30px, 6vmin, 56px); flex: 1; max-width: 380px; min-width: 0; display: flex; flex-direction: column; border: 5px solid rgba(255, 255, 255, .95); border-radius: 26px; overflow: hidden; box-shadow: 0 10px 20px rgba(29, 43, 83, .14); transition: transform .2s, box-shadow .2s; }
.sinkfloat-bin.hover, .magnets-bin.hover { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(59, 193, 74, .55), 0 10px 20px rgba(29, 43, 83, .14); }
.sinkfloat-bin-top, .magnets-bin-top { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 8px; font-size: clamp(17px, 2.6vw, 26px); line-height: 1.1; text-align: center; background: rgba(255, 255, 255, .7); }
.sinkfloat-bin-top svg { width: 1.7em; height: 1.7em; flex-shrink: 0; }
.sinkfloat-bin-items, .magnets-bin-items { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 2px; padding: 0 4px; }

/* ---------- Sink or Float ---------- */
.sinkfloat-tank { --th: clamp(150px, 36vh, 330px); position: relative; flex-shrink: 0; width: min(94%, 560px); height: var(--th); border: 6px solid rgba(255, 255, 255, .95); border-top: 0; border-radius: 0 0 30px 30px; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .4)); box-shadow: 0 14px 26px rgba(29, 43, 83, .16); overflow: hidden; }
.sinkfloat-water { position: absolute; left: 0; right: 0; top: 36%; bottom: 0; background: linear-gradient(180deg, #8FDBFF, #3A9BF0 70%, #2B7FD6); }
.sinkfloat-sand { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: radial-gradient(circle at 20% 40%, #E2BF7C 0 3px, transparent 4px) 0 0 / 34px 14px, #F3D9A4; border-radius: 50% 50% 0 0 / 45% 45% 0 0; z-index: 4; }
.sinkfloat-front { position: absolute; left: 0; right: 0; top: 36%; bottom: 0; background: linear-gradient(180deg, rgba(130, 205, 255, .45), rgba(40, 120, 220, .38)); z-index: 3; pointer-events: none; }
.sinkfloat-front::before { content: ''; position: absolute; left: -40px; right: 0; top: -9px; height: 10px; background: radial-gradient(circle at 20px 22px, #8FDBFF 21px, transparent 22px) 0 0 / 40px 10px repeat-x; animation: sinkfloat-wave 2.4s linear infinite; }
.sinkfloat-obj { position: absolute; top: 2px; margin-left: -.575em; font-size: calc(var(--th) * .3); z-index: 2; }
.sinkfloat-wait { animation: float 3s ease-in-out infinite; }
.sinkfloat-bob { animation: sinkfloat-bob 2.2s ease-in-out infinite; }
.sinkfloat-sway { animation: sinkfloat-sway 1.3s ease-in-out; }
.sinkfloat-thud { animation: sinkfloat-thud .4s; }
.sinkfloat-ring { position: absolute; top: 36%; width: 20px; height: 8px; margin: -4px 0 0 -10px; border: 3px solid #fff; border-radius: 50%; z-index: 4; pointer-events: none; animation: sinkfloat-ring .7s ease-out forwards; }
.sinkfloat-bub { position: absolute; bottom: 14%; width: 10px; height: 10px; border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%; background: rgba(255, 255, 255, .35); z-index: 4; opacity: 0; pointer-events: none; animation: sinkfloat-bub 1.6s ease-in forwards; }
.sinkfloat-ico { display: block; line-height: 0; }
.sinkfloat-ico svg { width: clamp(54px, min(9.5vh, 16vw), 88px); height: clamp(54px, min(9.5vh, 16vw), 88px); }
.sinkfloat-ask { line-height: 0; }
.sinkfloat-ask svg { width: clamp(76px, 14vh, 130px); height: clamp(76px, 14vh, 130px); filter: drop-shadow(0 8px 10px rgba(29, 43, 83, .18)); }
/* both groups look like little tanks: floaters ride the top, sinkers rest on the sand */
.sinkfloat-bin-items { background: linear-gradient(180deg, transparent calc(var(--ps) * .75), #8FDBFF calc(var(--ps) * .75), #3A9BF0 85%, #F3D9A4 85%); padding-bottom: 4px; }
.sinkfloat-bin-s .sinkfloat-bin-items { align-content: flex-end; }
.sinkfloat-bin-f .sinkfloat-drag.placed { animation: popIn .4s cubic-bezier(.2, 1.6, .4, 1), sinkfloat-bob 2.2s ease-in-out .4s infinite; }
@keyframes sinkfloat-wave { to { transform: translateX(40px); } }
@keyframes sinkfloat-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(5%) rotate(3deg); } }
@keyframes sinkfloat-sway { 0%, 100% { transform: translateX(0) rotate(0); } 25% { transform: translateX(-22px) rotate(-18deg); } 75% { transform: translateX(22px) rotate(18deg); } }
@keyframes sinkfloat-thud { 40% { transform: scale(1.12, .86) translateY(6%); } }
@keyframes sinkfloat-ring { to { transform: scale(7, 3); opacity: 0; } }
@keyframes sinkfloat-bub { 0% { opacity: 0; bottom: 14%; } 15% { opacity: 1; } 100% { bottom: 62%; opacity: 0; transform: translateX(8px) scale(1.4); } }

/* ---------- Magnet Lab ---------- */
.magnets-mag { position: relative; display: block; flex-shrink: 0; width: var(--mw, clamp(84px, 17vh, 130px)); line-height: 0; }
.magnets-mag svg { display: block; width: 100%; height: auto; }
.magnets-mag.not svg { filter: grayscale(.55); opacity: .75; }
.magnets-mag.not::after { content: ''; position: absolute; inset: -4%; background: linear-gradient(to top right, transparent 45.5%, #1D2B53 45.5% 54.5%, transparent 54.5%); border-radius: 12%; }
.magnets-ask { --mw: clamp(64px, 12vh, 104px); filter: drop-shadow(0 8px 10px rgba(29, 43, 83, .2)); }
.magnets-bin-top .magnets-mag { --mw: 1.7em; }

.magnets-field { position: relative; align-self: stretch; flex: 1; min-height: 0; }
.magnets-items { position: absolute; left: 1%; right: 1%; bottom: 2%; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(16px, 3vw, 44px); padding: clamp(12px, 2.4vh, 22px) 10px; border-radius: 22px; background: repeating-linear-gradient(90deg, #EBC388 0 46px, #E2B470 46px 50px); box-shadow: inset 0 6px 0 rgba(255, 255, 255, .35), inset 0 -8px 0 rgba(140, 90, 30, .22), 0 8px 14px rgba(29, 43, 83, .14); }
.magnets-it, .magnets-slot { flex-shrink: 0; }
.magnets-it { position: relative; font-size: clamp(44px, min(10vh, 11vw), 84px); width: 1.5em; height: 1.5em; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255, 210, 63, .95), 0 8px 14px rgba(29, 43, 83, .16); cursor: pointer; }
.magnets-it.no { background: rgba(255, 255, 255, .5); box-shadow: none; cursor: default; }
.magnets-it.no::after { content: '✕'; position: absolute; right: -2px; top: -2px; width: 28px; height: 28px; border-radius: 50%; background: #8E97A6; color: #fff; font-size: 16px; font-weight: 700; line-height: 1; display: grid; place-items: center; }
.magnets-it.stuck { font-size: clamp(30px, min(6vh, 8vw), 50px); width: 1.05em; height: 1.15em; background: none; box-shadow: none; cursor: default; }
.magnets-grab { position: absolute; left: 0; top: 0; z-index: 5; cursor: grab; touch-action: none; filter: drop-shadow(0 10px 10px rgba(29, 43, 83, .22)); }
.magnets-grab.held { cursor: grabbing; }
.magnets-hold { position: absolute; top: 90%; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; width: max-content; pointer-events: none; }

.magnets-test { --g: clamp(34px, 8vh, 70px); display: flex; flex-direction: column; align-items: center; gap: var(--g); }
.magnets-test .magnets-mag { --mw: clamp(76px, 15vh, 120px); filter: drop-shadow(0 8px 10px rgba(29, 43, 83, .2)); }
.magnets-tobj { font-size: clamp(50px, 10vh, 84px); line-height: 1; }
.magnets-test.yes .magnets-mag { animation: magnets-dip 1.8s both; }
.magnets-test.yes .magnets-tobj { animation: magnets-jump 1.8s both; }
.magnets-test.no .magnets-mag { animation: magnets-try 1.8s both; }
@keyframes magnets-dip { 0%, 100% { transform: none; } 35%, 52% { transform: translateY(calc(var(--g) * .5)); } }
@keyframes magnets-jump { 0%, 34% { transform: none; } 39%, 52% { transform: translateY(calc(var(--g) * -.5)); } 100% { transform: translateY(calc(var(--g) * -1)); } }
@keyframes magnets-try { 0%, 100% { transform: none; } 35%, 68% { transform: translateY(var(--g)); } 45% { transform: translateY(var(--g)) rotate(-7deg); } 56% { transform: translateY(var(--g)) rotate(7deg); } }

.magnets-poles { --pg: clamp(40px, 9vw, 110px); display: flex; align-items: center; gap: var(--pg); padding: 10px 0; }
.magnets-bar { display: flex; border-radius: 14px; overflow: hidden; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .16), 0 8px 14px rgba(29, 43, 83, .2); transition: transform .35s cubic-bezier(.6, 0, 1, .5); }
.magnets-bar i { font-style: normal; width: clamp(54px, 9vw, 96px); height: clamp(48px, 9vh, 76px); display: grid; place-items: center; font-weight: 700; font-size: clamp(24px, 4vw, 38px); color: #fff; }
.magnets-bar .n { background: #F0364D; }
.magnets-bar .s { background: #3A86FF; }
.magnets-poles.pull .magnets-bar:first-child { transform: translateX(calc(var(--pg) / 2)); }
.magnets-poles.pull .magnets-bar:last-child { transform: translateX(calc(var(--pg) / -2)); }
.magnets-poles.push .magnets-bar { transition: transform .6s cubic-bezier(.1, .8, .3, 1); }
.magnets-poles.push .magnets-bar:first-child { transform: translateX(calc(var(--pg) * -.55)); }
.magnets-poles.push .magnets-bar:last-child { transform: translateX(calc(var(--pg) * .55)); }
.choices.magnets-opts .magnets-arrows { font-size: clamp(30px, 5.5vh, 46px); white-space: nowrap; }

.magnets-bin-y { background: rgba(255, 222, 228, .9); }
.magnets-bin-n { background: rgba(255, 255, 255, .75); }
.magnets-bin-items { padding-top: 6px; }
.magnets-bin-n .magnets-bin-items { align-content: center; }

/* ---------- small phones ---------- */
@media (max-width: 600px) {
  .sinkfloat-tank { --th: clamp(150px, 30vh, 330px); }
  .choices.sinkfloat-words, .choices.magnets-words { flex-direction: column; align-items: center; gap: 10px; align-self: stretch; }
  .choices.sinkfloat-words .choice, .choices.magnets-words .choice { flex-direction: row; justify-content: flex-start; gap: 12px; width: 100%; max-width: 330px; min-height: 66px; padding: 8px 42px 12px 16px; border-radius: 24px; }
  .choices.sinkfloat-words .pic-word, .choices.magnets-words .pic-word { text-align: left; }
  .magnets-ask { --mw: 56px; }
}