/* Styles for Science Lab experiments and Social Studies activities. */
.sc-tank { position: relative; height: 240px; border: 4px solid #c9d8ee; border-top: 0; border-radius: 0 0 18px 18px; background: #0f2748; overflow: hidden; max-width: 460px; margin: 10px auto 0; }
.sc-water { position: absolute; inset: 40% 0 0 0; background: linear-gradient(180deg, rgba(91,184,255,.75), rgba(47,111,214,.85)); border-top: 4px solid #bfe6ff; }
.sc-obj { position: absolute; left: 50%; top: 2%; transform: translateX(-50%); font-size: 54px; line-height: 1; transition: top 1.1s cubic-bezier(.3,.9,.4,1); }
.sc-obj.float { top: calc(40% - 30px); animation: sc-bob 1.6s ease-in-out 1.1s infinite; } .sc-obj.sink { top: calc(100% - 60px); }
@keyframes sc-bob { 50% { transform: translateX(-50%) translateY(6px); } } body.calm .sc-obj.float { animation: none; }
.sc-mix { position: relative; width: min(280px, calc(70 * var(--vw))); aspect-ratio: 1; margin: 10px auto; border-radius: 24px; background: #000; isolation: isolate; }
.sc-mix.paint { background: #fff; }
.sc-mix i { position: absolute; width: 56%; aspect-ratio: 1; border-radius: 50%; opacity: 0; transition: opacity .25s; mix-blend-mode: screen; }
.sc-mix.paint i { mix-blend-mode: multiply; } .sc-mix i.on { opacity: 1; }
.sc-mix i.a { left: 8%; top: 8%; } .sc-mix i.b { right: 8%; top: 8%; } .sc-mix i.c { left: 22%; bottom: 6%; }
.sc-plant { width: 100%; max-width: 300px; display: block; margin: 0 auto; border-radius: 16px; }
.sc-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; } .sc-table th, .sc-table td { border-bottom: 1px solid var(--line); padding: 5px 6px; text-align: left; }
.sc-matter { padding: 0; overflow: hidden; max-width: 600px; margin: 10px auto 0; } .sc-matter canvas { width: 100%; height: auto; display: block; }
.sc-circuit { width: 100%; max-width: 460px; display: block; margin: 0 auto; background: #0f1b3d; border-radius: 16px; }
.sc-drop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; max-width: 560px; margin: 0 auto; }
.sc-drop .col { display: grid; gap: 2px; } .sc-drop .shaft { position: relative; height: 220px; background: linear-gradient(180deg, #0b1b4a, #1a2a6b); border-radius: 12px 12px 0 0; }
.sc-drop .ball { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-size: 22px; line-height: 26px; } .sc-drop .ground { height: 12px; border-radius: 0 0 8px 8px; } .sc-drop small { font-size: 11px; }
.so-map { width: 100%; height: auto; display: block; border-radius: 14px; }
.so-land, .so-sea { cursor: pointer; transition: filter .15s; outline: none; } .so-land:hover, .so-land:focus-visible, .so-sea:hover circle, .so-sea:focus-visible circle { filter: brightness(1.2); stroke: #ffe27f; stroke-width: 5; }
.so-map .flash { animation: so-flash .45s ease-in-out 4; } @keyframes so-flash { 50% { filter: brightness(1.7) drop-shadow(0 0 10px #fff); } }
.so-info { display: grid; gap: 2px; margin-top: 10px; padding: 10px 14px; background: var(--panel2); border-radius: 14px; min-height: 58px; } .so-info b { font-size: calc(17px * var(--k)); }
.so-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; max-width: 360px; margin: 0 auto; background: #c9a96a; padding: 6px; border-radius: 12px; }
.so-grid span { aspect-ratio: 1; background: #f6e7c1; border-radius: 5px; display: grid; place-items: center; font-size: clamp(16px, calc(4 * var(--vw)), 26px); line-height: 1; } .so-grid span.trail { background: #ffd98a; }
.so-rose { text-align: center; font-weight: 700; font-size: 12px; line-height: 1.25; margin-top: 8px; color: var(--muted); }
.so-step { font-size: calc(20px * var(--k)); margin: 4px 0; }
.so-bars { display: grid; gap: 6px; margin: 8px 0; } .so-bars > div { display: grid; grid-template-columns: 130px 1fr 30px; align-items: center; gap: 8px; font-size: 14px; } .so-bars i { height: 20px; border-radius: 6px; min-width: 2px; transition: width .5s; }
.so-voters { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .so-voters span { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 3px 8px; font-size: 14px; white-space: nowrap; }
@media (max-width: 520px) { .so-bars > div { grid-template-columns: 96px 1fr 24px; font-size: 12px; } }